Merge pull request #290 from josemarluedke/feat/clear-select

feat: add startContent/endContent to Select/NativeSelect & Clear Butt…
josemarluedke · Apr 14, 2024 · 012d2f2 · 012d2f2
2 parents 5855a4d + 6993185
commit 012d2f2
Show file tree

Hide file tree

Showing 8 changed files with 344 additions and 127 deletions.
diff --git a/packages/forms/package.json b/packages/forms/package.json
@@ -92,6 +92,7 @@
       "./components/form-description.js": "./dist/_app_/components/form-description.js",
       "./components/form-feedback.js": "./dist/_app_/components/form-feedback.js",
       "./components/form.js": "./dist/_app_/components/form.js",
+      "./components/icons.js": "./dist/_app_/components/icons.js",
       "./components/input.js": "./dist/_app_/components/input.js",
       "./components/label.js": "./dist/_app_/components/label.js",
       "./components/native-select.js": "./dist/_app_/components/native-select.js",

diff --git a/packages/forms/src/components/icons.gts b/packages/forms/src/components/icons.gts
@@ -0,0 +1,23 @@
+import type { TOC } from '@ember/component/template-only';
+
+const IconChevronUpDown: TOC<{
+  Element: SVGElement;
+}> = <template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    aria-hidden="true"
+    ...attributes
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
+    />
+  </svg>
+</template>;
+
+export { IconChevronUpDown };
diff --git a/packages/forms/src/components/native-select.gts b/packages/forms/src/components/native-select.gts
@@ -16,6 +16,7 @@ import {
   keyAndLabelForItem,
   type ListItem
 } from '@frontile/collections/utils/listManager';
+import { IconChevronUpDown } from './icons';
 import type { WithBoundArgs } from '@glint/template';
 
 type ItemCompBounded = WithBoundArgs<typeof NativeSelectItem, 'manager'>;
@@ -43,6 +44,24 @@ interface Args<T> extends FormControlSharedArgs {
    * @internal
    */
   onItemsChange?: (items: ListItem[], action: 'add' | 'remove') => void;
+
+  /**
+   * Controls pointer-events property of startContent.
+   * If you want to pass the click event to the input, set it to `none`.
+   *
+   * @defaultValue 'auto'
+   */
+  startContentPointerEvents?: 'none' | 'auto';
+
+  /**
+   * Controls pointer-events property of endContent.
+   * Defauled to `none` to pass the click event to the input. If your content
+   * needs to capture events, consider adding `pointer-events-auto` class to that
+   * element only.
+   *
+   * @defaultValue 'none'
+   */
+  endContentPointerEvents?: 'none' | 'auto';
 }
 
 interface NativeSelectSignature<T> {
@@ -51,6 +70,8 @@ interface NativeSelectSignature<T> {
   Blocks: {
     item: [{ item: T; key: string; label: string; Item: ItemCompBounded }];
     default: [{ Item: ItemCompBounded }];
+    startContent: [];
+    endContent: [];
   };
 }
 
@@ -116,59 +137,91 @@ class NativeSelect<T = unknown> extends Component<NativeSelectSignature<T>> {
       @class={{this.classes.base class=@classes.base}}
       as |c|
     >
-      <select
-        {{this.listManager.setup
-          selectedKeys=@selectedKeys
-          disabledKeys=@disabledKeys
-          selectionMode=@selectionMode
-          allowEmpty=@allowEmpty
-          onListItemsChange=@onItemsChange
-          isKeyboardEventsEnabled=false
-        }}
-        {{on "change" this.handleOnChange}}
-        multiple={{this.isMultiple}}
-        data-test-id="native-select"
-        data-component="native-select"
-        class={{this.classes.input class=@classes.input}}
-        id={{c.id}}
-        name={{@name}}
-        aria-invalid={{if c.isInvalid "true"}}
-        aria-describedby={{c.describedBy @description c.isInvalid}}
-        ...attributes
-      >
-        {{#if this.args.allowEmpty}}
-          <NativeSelectItem @manager={{this.listManager}} @key="">
-            {{this.args.placeholder}}
-          </NativeSelectItem>
+      <div class={{this.classes.innerContainer class=@classes.innerContainer}}>
+        {{#if (has-block "startContent")}}
+          <div
+            data-test-id="input-start-content"
+            class={{this.classes.startContent
+              class=@classes.startContent
+              startContentPointerEvents=(if
+                @startContentPointerEvents @startContentPointerEvents "auto"
+              )
+            }}
+          >
+            {{yield to="startContent"}}
+          </div>
         {{/if}}
-        {{#each @items as |item|}}
-          {{#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}}
-                @key={{keyLabel.key}}
-              >
-                {{keyLabel.label}}
-              </NativeSelectItem>
-            {{/if}}
-          {{/let}}
-        {{/each}}
-
-        {{yield
-          (hash Item=(component NativeSelectItem manager=this.listManager))
-          to="default"
-        }}
-      </select>
+        <select
+          {{this.listManager.setup
+            selectedKeys=@selectedKeys
+            disabledKeys=@disabledKeys
+            selectionMode=@selectionMode
+            allowEmpty=@allowEmpty
+            onListItemsChange=@onItemsChange
+            isKeyboardEventsEnabled=false
+          }}
+          {{on "change" this.handleOnChange}}
+          multiple={{this.isMultiple}}
+          data-test-id="native-select"
+          data-component="native-select"
+          class={{this.classes.input
+            class=@classes.input
+            hasStartContent=(has-block "startContent")
+            hasEndContent=true
+          }}
+          id={{c.id}}
+          name={{@name}}
+          aria-invalid={{if c.isInvalid "true"}}
+          aria-describedby={{c.describedBy @description c.isInvalid}}
+          ...attributes
+        >
+          {{#if this.args.allowEmpty}}
+            <NativeSelectItem @manager={{this.listManager}} @key="">
+              {{this.args.placeholder}}
+            </NativeSelectItem>
+          {{/if}}
+          {{#each @items as |item|}}
+            {{#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}}
+                  @key={{keyLabel.key}}
+                >
+                  {{keyLabel.label}}
+                </NativeSelectItem>
+              {{/if}}
+            {{/let}}
+          {{/each}}
+
+          {{yield
+            (hash Item=(component NativeSelectItem manager=this.listManager))
+            to="default"
+          }}
+        </select>
+        <div
+          data-test-id="input-end-content"
+          class={{this.classes.endContent
+            class=@classes.endContent
+            endContentPointerEvents=(if
+              @endContentPointerEvents @endContentPointerEvents "none"
+            )
+          }}
+        >
+          {{yield to="endContent"}}
+
+          <IconChevronUpDown class={{this.classes.icon class=@classes.icon}} />
+        </div>
+      </div>
     </FormControl>
   </template>
 }