chore: refine listbox and native select, add support for items with k…

…ey and label.
josemarluedke · Feb 18, 2024 · d1bbcea · d1bbcea
1 parent 1f19a00
commit d1bbcea
Show file tree

Hide file tree

Showing 8 changed files with 242 additions and 161 deletions.
diff --git a/packages/collections/src/components/listbox/listManager.ts b/packages/collections/src/components/listbox/listManager.ts
@@ -104,6 +104,10 @@ class ListManager {
     if (options.onSelectionChange) {
       this.#onSelectionChange = options.onSelectionChange;
     }
+
+    if (options.onNodesChange) {
+      this.#onNodesChange = options.onNodesChange;
+    }
   }
 
   selectActiveNode(): void {
@@ -346,6 +350,22 @@ class ListManager {
     }
   );
 }
+function keyAndLabelForItem(item: unknown): {
+  key: string;
+  label: string;
+} {
+  if (typeof item === 'string' || typeof item === 'number') {
+    return { key: item.toString(), label: item.toString() };
+  } else if (typeof item === 'object' && item !== null) {
+    const typedItem = item as { key: string; label: string };
+    if ('key' in typedItem && 'label' in typedItem) {
+      return { key: typedItem.key, label: typedItem.label };
+    } else {
+      return { key: item.toString(), label: item.toString() };
+    }
+  }
+  return { key: '', label: '' };
+}
 
 export type { Node, NodeArgs, SelectionMode };
-export { ListManager };
+export { ListManager, keyAndLabelForItem };
diff --git a/packages/collections/src/components/listbox/listbox.gts b/packages/collections/src/components/listbox/listbox.gts
@@ -3,7 +3,12 @@ import { hash } from '@ember/helper';
 import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { useStyles } from '@frontile/theme';
-import { ListManager, type SelectionMode } from './listManager';
+import {
+  ListManager,
+  keyAndLabelForItem,
+  type SelectionMode,
+  type Node
+} from './listManager';
 import { ListboxItem, type ListboxItemSignature } from './item';
 import type { WithBoundArgs } from '@glint/template';
 
@@ -40,7 +45,7 @@ interface ListboxSignature<T = unknown> {
   };
   Element: HTMLUListElement;
   Blocks: {
-    item: [{ item: T; Item: ItemCompBounded }];
+    item: [{ item: T; key: string; label: string; Item: ItemCompBounded }];
     default: [{ Item: ItemCompBounded }];
   };
 }
@@ -132,33 +137,36 @@ class Listbox extends Component<ListboxSignature> {
       ...attributes
     >
       {{#each @items as |item|}}
-        {{#if (has-block "item")}}
-          {{yield
-            (hash
-              item=item
-              Item=(component
-                ListboxItem
-                manager=this.listManager
-                appearance=@appearance
-                intent=@intent
-                type=this.role
+        {{#let (keyAndLabelForItem item) as |keyLabel|}}
+          {{#if (has-block "item")}}
+            {{yield
+              (hash
+                item=item
+                key=keyLabel.key
+                label=keyLabel.label
+                Item=(component
+                  ListboxItem
+                  manager=this.listManager
+                  appearance=@appearance
+                  intent=@intent
+                  type=this.role
+                  key=keyLabel.key
+                )
               )
-            )
-            to="item"
-          }}
-        {{else}}
-          <ListboxItem
-            @manager={{this.listManager}}
-            {{! @glint-expect-error: if we get to this option, we are assuming the option is primitive value}}
-            @key={{item}}
-            @appearance={{@appearance}}
-            @intent={{@intent}}
-            @type={{this.role}}
-          >
-            {{! @glint-expect-error: if we get to this option, we are assuming the option is primitive value}}
-            {{item}}
-          </ListboxItem>
-        {{/if}}
+              to="item"
+            }}
+          {{else}}
+            <ListboxItem
+              @manager={{this.listManager}}
+              @key={{keyLabel.key}}
+              @appearance={{@appearance}}
+              @intent={{@intent}}
+              @type={{this.role}}
+            >
+              {{keyLabel.label}}
+            </ListboxItem>
+          {{/if}}
+        {{/let}}
       {{/each}}
 
       {{yield
@@ -181,6 +189,7 @@ export {
   Listbox,
   ListboxItem,
   type ListboxSignature,
-  type ListboxItemSignature
+  type ListboxItemSignature,
+  type Node as ListItemNode
 };
 export default Listbox;
diff --git a/packages/collections/src/components/native-select.gts b/packages/collections/src/components/native-select.gts
@@ -5,17 +5,17 @@ import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { assert } from '@ember/debug';
 import { useStyles } from '@frontile/theme';
-import { ListManager, type Node } from './listbox/listManager';
+import {
+  ListManager,
+  keyAndLabelForItem,
+  type Node
+} from './listbox/listManager';
 import type { WithBoundArgs } from '@glint/template';
 
 type ItemCompBounded = WithBoundArgs<typeof NativeSelectItem, 'manager'>;
 
 interface NativeSelectSignature<T = unknown> {
   Args: {
-    /**
-     * @default 'listbox'
-     */
-    type?: 'menu' | 'listbox';
     selectionMode?: 'single' | 'multiple';
     selectedKeys?: string[];
     disabledKeys?: string[];
@@ -31,26 +31,14 @@ interface NativeSelectSignature<T = unknown> {
     onAction?: (key: string) => void;
     onSelectionChange?: (key: string[]) => void;
 
-    /**
-     * The appearance of each item
-     *
-     * @defaultValue 'default'
-     */
-    appearance?: 'default' | 'outlined' | 'faded';
-
-    /**
-     * The intent of each item
-     */
-    intent?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
-
     /**
      * @internal
      */
     onItemsChange?: (nodes: Node[], action: 'add' | 'remove') => void;
   };
-  Element: HTMLUListElement | HTMLSelectElement;
+  Element: HTMLSelectElement;
   Blocks: {
-    item: [{ item: T; Item: ItemCompBounded }];
+    item: [{ item: T; key: string; label: string; Item: ItemCompBounded }];
     default: [{ Item: ItemCompBounded }];
   };
 }
@@ -124,42 +112,30 @@ class NativeSelect extends Component<NativeSelectSignature> {
         </NativeSelectItem>
       {{/if}}
       {{#each @items as |item|}}
-        {{#if (has-block "item")}}
-          {{yield
-            (hash
-              item=item
-              Item=(component
-                NativeSelectItem
-                manager=this.listManager
-                appearance=@appearance
-                intent=@intent
+        {{#let (keyAndLabelForItem item) as |keyLabel|}}
+          {{#if (has-block "item")}}
+            {{yield
+              (hash
+                item=item
+                key=keyLabel.key
+                label=keyLabel.label
+                Item=(component NativeSelectItem manager=this.listManager)
               )
-            )
-            to="item"
-          }}
-        {{else}}
-          <NativeSelectItem
-            @manager={{this.listManager}}
-            {{! @glint-expect-error: if we get to this option, we are assuming the option is primitive value}}
-            @key={{item}}
-            @appearance={{@appearance}}
-            @intent={{@intent}}
-          >
-            {{! @glint-expect-error: if we get to this option, we are assuming the option is primitive value}}
-            {{item}}
-          </NativeSelectItem>
-        {{/if}}
+              to="item"
+            }}
+          {{else}}
+            <NativeSelectItem
+              @manager={{this.listManager}}
+              @key={{keyLabel.key}}
+            >
+              {{keyLabel.label}}
+            </NativeSelectItem>
+          {{/if}}
+        {{/let}}
       {{/each}}
 
       {{yield
-        (hash
-          Item=(component
-            NativeSelectItem
-            manager=this.listManager
-            appearance=@appearance
-            intent=@intent
-          )
-        )
+        (hash Item=(component NativeSelectItem manager=this.listManager))
         to="default"
       }}
     </select>
@@ -172,7 +148,7 @@ export interface SelectItemSignature {
     key: string;
     textValue?: string;
   };
-  Element: HTMLOptionElement | HTMLLIElement;
+  Element: HTMLOptionElement;
   Blocks: {
     default: [];
     selectedIcon: [];

diff --git a/packages/forms/package.json b/packages/forms/package.json
@@ -44,6 +44,7 @@
     "@frontile/theme": "workspace:0.17.0-alpha.6",
     "@frontile/overlays": "workspace:0.17.0-alpha.6",
     "@frontile/collections": "workspace:0.17.0-alpha.6",
+    "@frontile/utilities": "workspace:0.17.0-alpha.6",
     "@glint/template": "1.3.0"
   },
   "devDependencies": {