Table: Datepicker, AutoComplete, Select Cell Editor

stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.scss

@@ -31,7 +31,8 @@
   .chips-container {
     align-items: center;
     background-color: $modus-autocomplete-bg;
-    border: $rem-1px solid $modus-autocomplete-container-border-color;
+    border: var(--modus-autocomplete-border, #{$rem-1px solid $modus-autocomplete-container-border-color});
+    border-bottom-color: $modus-autocomplete-container-bottom-line-color;
     border-radius: 4px;
     box-sizing: border-box;
     display: flex;
@@ -59,6 +60,8 @@
       height: auto !important;
       position: relative;
 
+      --input-font-size: var(--modus-autocomplete-font-size, #{12px});
+
       &::part(input-container) {
         border: none !important;
         box-shadow: none;
@@ -163,6 +166,7 @@
 }
 
 .autocomplete .chips-container:focus-within {
-  border-color: $modus-autocomplete-container-border-active-color;
-  box-shadow: 0 0 0 1px $modus-autocomplete-container-border-active-color;
+  border: var(--modus-autocomplete-border-active, #{$rem-1px solid $modus-autocomplete-container-border-active-color});
+  box-shadow: 0 0 0 1px
+    var(--modus-autocomplete-border-active, #{$rem-1px solid $modus-autocomplete-container-border-active-color});
 }

stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.vars.scss

@@ -5,6 +5,7 @@ $modus-autocomplete-options-border-active-color: var(--modus-list-item-border-co
 $modus-autocomplete-no-results-message-color: var(--modus-autocomplete-no-results-message-color, #252a2e) !default;
 $modus-autocomplete-no-results-subtext-color: var(--modus-autocomplete-no-results-subtext-color, #252a2e) !default;
 $modus-autocomplete-container-border-color: var(--modus-input-border-bottom-color, #6a6e79) !default;
+$modus-autocomplete-container-bottom-line-color: var(--modus-input-bottom-line-color, #6a6e79) !default;
 $modus-autocomplete-container-border-active-color: var(--modus-input-border-active-line-color, #217cbb) !default;
 $modus-autocomplete-bg: var(--modus-autocomplete-bg, #fff) !default;
 $modus-autocomplete-label-color: var(--modus-autocomplete-label-color, #464b52) !default;

stencil-workspace/src/components/modus-date-input/modus-date-input.scss

@@ -95,8 +95,8 @@
     }
 
     &:focus-within {
-      border-color: $modus-input-bottom-line-active-color;
-      box-shadow: 0 0 0 1px $modus-input-bottom-line-active-color;
+      border-color: var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color});
+      box-shadow: 0 0 0 1px var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color});
 
       svg.icon-calendar path {
         fill: $modus-input-bottom-line-active-color;

stencil-workspace/src/components/modus-number-input/modus-number-input.scss

@@ -58,8 +58,8 @@
     }
 
     &:focus-within {
-      border-color: $modus-input-bottom-line-active-color;
-      box-shadow: 0 0 0 1px $modus-input-bottom-line-active-color;
+      border-color: var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color});
+      box-shadow: 0 0 0 1px var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color});
     }
 
     &.error {

stencil-workspace/src/components/modus-select/modus-select.scss

@@ -62,8 +62,8 @@
       }
 
       &:focus-within {
-        border-color: $modus-input-bottom-line-active-color;
-        box-shadow: 0 0 0 1px $modus-input-bottom-line-active-color;
+        border-color: var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color});
+        box-shadow: 0 0 0 1px var(--modus-input-border-color, #{$rem-1px solid $modus-input-bottom-line-active-color});
       }
 
       &.large {

stencil-workspace/src/components/modus-table/models/modus-table.models.ts

@@ -16,9 +16,14 @@ import {
   COLUMN_DEF_DATATYPE_INTEGER,
   COLUMN_DEF_DATATYPE_LINK,
   COLUMN_DEF_DATATYPE_TEXT,
-  CELL_EDIT_TYPE_DROPDOWN,
   COLUMN_DEF_DATATYPE_BADGE,
+  CELL_EDIT_TYPE_SELECT,
+  CELL_EDIT_TYPE_DATE,
+  CELL_EDIT_TYPE_AUTOCOMPLETE,
+  CELL_EDIT_TYPE_INT,
+  CELL_EDIT_TYPE_TEXT,
 } from '../modus-table.constants';
+import { ModusAutocompleteOption } from '../../modus-autocomplete/modus-autocomplete';
 
 export type ModusTableRowData = RowData;
 export type ModusTableSortingState = SortingState;
@@ -37,12 +42,23 @@ export type ModusTableColumnDataType =
   | typeof COLUMN_DEF_DATATYPE_BADGE;
 // | typeof COLUMN_DEF_DATATYPE_DATE;
 
-export type ModusTableCellEditorType = typeof CELL_EDIT_TYPE_DROPDOWN;
-// typeof CELL_EDIT_TYPE_AUTOCOMPLETE |
+export type ModusTableCellEditorType =
+  | typeof CELL_EDIT_TYPE_SELECT
+  | typeof CELL_EDIT_TYPE_TEXT
+  | typeof CELL_EDIT_TYPE_INT
+  | typeof CELL_EDIT_TYPE_AUTOCOMPLETE
+  | typeof CELL_EDIT_TYPE_DATE;
 
 export type ModusTableCellDateEditorArgs = { format: string };
-export type ModusTableCellDropdownEditorArgs = { options: unknown[] };
-export type ModusTableCellEditorArgs = ModusTableCellDropdownEditorArgs | ModusTableCellDateEditorArgs;
+export type ModusTableCellSelectEditorArgs = { options: unknown[]; optionsDisplayProp?: string };
+export type ModusTableCellAutocompleteEditorArgs = {
+  options: ModusAutocompleteOption[];
+  noResultsFoundText: string;
+  noResultsFoundSubtext: string;
+  showNoResultsFoundMessage: boolean;
+  showOptionsOnFocus: boolean;
+};
+export type ModusTableCellEditorArgs = ModusTableCellSelectEditorArgs | ModusTableCellDateEditorArgs;
 
 export type ModusTableSortingFunction<TData extends RowData> = SortingFnOption<TData> | 'sortForHyperlink' | 'sortForBadge';
 

stencil-workspace/src/components/modus-table/modus-table.constants.ts

@@ -22,14 +22,14 @@ export const COLUMN_DEF_DATATYPE_BADGE = 'badge';
 
 export const CELL_EDIT_TYPE_TEXT = COLUMN_DEF_DATATYPE_TEXT;
 export const CELL_EDIT_TYPE_INT = COLUMN_DEF_DATATYPE_INTEGER;
-export const CELL_EDIT_TYPE_DROPDOWN = 'dropdown';
+export const CELL_EDIT_TYPE_SELECT = 'select';
 export const CELL_EDIT_TYPE_AUTOCOMPLETE = 'autocomplete';
 export const CELL_EDIT_TYPE_DATE = COLUMN_DEF_DATATYPE_DATE;
 
 export const ALLOWED_CELL_EDIT_TYPES = [
   CELL_EDIT_TYPE_TEXT,
   CELL_EDIT_TYPE_INT,
-  CELL_EDIT_TYPE_DROPDOWN,
+  CELL_EDIT_TYPE_SELECT,
   CELL_EDIT_TYPE_AUTOCOMPLETE,
   CELL_EDIT_TYPE_DATE,
 ];

stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-badge-element.tsx

@@ -3,15 +3,24 @@ import {
   h, // eslint-disable-line @typescript-eslint/no-unused-vars
 } from '@stencil/core';
 import { ModusTableCellBadge } from '../../models/modus-table.models';
+import { KEYBOARD_ENTER, KEYBOARD_SPACE } from '../../modus-table.constants';
 
 interface ModusTableCellBadgeProps {
   badge: ModusTableCellBadge;
   onBadgeClick?: (badge: ModusTableCellBadge) => void;
 }
 
-export const ModusTableCellBadgeElement: FunctionalComponent<ModusTableCellBadgeProps> = ({ badge }) => {
+export const ModusTableCellBadgeElement: FunctionalComponent<ModusTableCellBadgeProps> = ({ badge, onBadgeClick }) => {
+  function handleBadgeKeyDown(e: KeyboardEvent) {
+    const key = e.key.toLowerCase();
+    if (key === KEYBOARD_ENTER || key === KEYBOARD_SPACE) {
+      onBadgeClick(badge);
+      e.stopImmediatePropagation();
+    }
+  }
+
   return (
-    <div class="cell-badge">
+    <div class="cell-badge" onClick={() => onBadgeClick(badge)} onKeyDown={() => handleBadgeKeyDown}>
       <modus-badge tabIndex={0} color={badge.color} size={badge.size} type={badge.type} ariaLabel={badge?.ariaLabel}>
         {badge.text}
       </modus-badge>

stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss

@@ -1,3 +1,10 @@
+:host {
+  --modus-autocomplete-border: none;
+  --modus-autocomplete-border-active: none;
+  --modus-autocomplete-font-size: 14px;
+  --modus-input-border-color: none;
+}
+
 .editor::part(input-container),
 .editor::part(input) {
   border: none !important;
@@ -17,3 +24,8 @@ table.density-compact {
     height: calc($rem-24px - $rem-4px) !important;
   }
 }
+
+.autocomplete-container {
+  margin-left: 4px;
+  margin-top: 5px;
+}