@ukic/web-components 2.35.2 → 3.0.0-alpha.10

package/dist/collection/components/ic-select/{ic-select-searchable.stories.js → ic-select_(searchable).stories.js}

@@ -11,12 +11,13 @@ const defaultArgs = {
   placeholder: "Select an option",
   readonly: false,
   required: false,
-  size: "default",
+  size: "medium",
   ["validation-status"]: "none",
   ["validation-text"]: "",
   ["include-descriptions-in-search"]: false,
   ["include-group-titles-in-search"]: false,
   ["search-match-position"]: "anywhere",
+  theme: "inherit",
 };
 
 export default {
@@ -309,12 +310,12 @@ export const Sizes = {
         });
       </script>
       <ic-select
-        id="select-size-default"
+        id="select-size-medium"
         label="What is your favourite coffee?"
         searchable
       ></ic-select>
       <script>
-        var select = document.querySelector("#select-size-default");
+        var select = document.querySelector("#select-size-medium");
         select.options = [
           { label: "Cappuccino", value: "Cap" },
           { label: "Latte", value: "Lat" },
@@ -665,7 +666,7 @@ export const ExternalFiltering = {
         label="What is your favourite coffee?"
         searchable
         debounce="300"
-        disable-filter
+        disable-auto-filtering
         id="select-external-filtering"
         timeout="1000"
       ></ic-select>
@@ -704,7 +705,7 @@ export const ExternalFiltering = {
                 return new Promise((resolve) =>
                   setTimeout(
                     () => resolve(filteredResults),
-                    event.type === "icChange" ? 2000 : 900
+                    event.type === "icInput" ? 2000 : 900
                   )
                 );
               };
@@ -722,7 +723,7 @@ export const ExternalFiltering = {
         select.addEventListener("icOptionSelect", function (event) {
           selectedValue = event.detail.value;
         });
-        select.addEventListener("icChange", handleFilter);
+        select.addEventListener("icInput", handleFilter);
         select.addEventListener("icRetryLoad", handleFilter);
       </script>`,
 
@@ -821,6 +822,8 @@ export const EmittingIcOptionSelectOnEnter = {
   name: "Emitting icOptionSelect on enter",
 };
 
+const inlineRadioSelector = "inline-radio";
+
 export const Playground = {
   render: (args) =>
     html` <ic-select
@@ -842,6 +845,7 @@ export const Playground = {
         size=${args.size}
         validation-status=${args["validation-status"]}
         validation-text=${args["validation-text"]}
+        theme=${args.theme}
       >
         ${args.showIcon &&
         html` <svg
@@ -923,7 +927,7 @@ export const Playground = {
       options: ["anywhere", "start"],
 
       control: {
-        type: "inline-radio",
+        type: inlineRadioSelector,
       },
     },
 
@@ -937,10 +941,10 @@ export const Playground = {
     },
 
     size: {
-      options: ["small", "default", "large"],
+      options: ["small", "medium", "large"],
 
       control: {
-        type: "inline-radio",
+        type: inlineRadioSelector,
       },
     },
 
@@ -949,5 +953,13 @@ export const Playground = {
         type: "boolean",
       },
     },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
   },
 };

package/dist/collection/components/ic-select/{ic-select-single.stories.js → ic-select_(single).stories.js}

@@ -11,10 +11,11 @@ const defaultArgs = {
   placeholder: "Select an option",
   readonly: false,
   required: false,
-  size: "default",
+  size: "medium",
   ["validation-status"]: "none",
   ["validation-text"]: "",
   ["show-clear-button"]: false,
+  theme: "inherit",
 };
 
 export default {
@@ -264,11 +265,11 @@ export const Sizes = {
         });
       </script>
       <ic-select
-        id="select-size-default"
+        id="select-size-medium"
         label="What is your favourite coffee?"
       ></ic-select>
       <script>
-        var select = document.querySelector("#select-size-default");
+        var select = document.querySelector("#select-size-medium");
         select.options = [
           { label: "Cappuccino", value: "Cap" },
           { label: "Latte", value: "Lat" },
@@ -678,6 +679,7 @@ export const Playground = {
         size=${args.size}
         validation-status=${args["validation-status"]}
         validation-text=${args["validation-text"]}
+        theme=${args.theme}
       >
         ${args.showIcon &&
         html` <svg
@@ -764,7 +766,7 @@ export const Playground = {
     },
 
     size: {
-      options: ["small", "default", "large"],
+      options: ["small", "medium", "large"],
 
       control: {
         type: "inline-radio",
@@ -776,5 +778,13 @@ export const Playground = {
         type: "boolean",
       },
     },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
   },
 };

package/dist/collection/components/ic-select/test/basic/ic-select.spec.js

@@ -66,6 +66,12 @@ const menuOptionsWithDuplicates = [
         ],
     },
 ];
+const menuOptionsWithDisabled = [
+    { label: label1, value: value1 },
+    { label: label2, value: value2 },
+    { label: label3, value: value3, disabled: true },
+    { label: label4, value: value4 },
+];
 const menuOptionsWithGroups = [
     {
         label: "Fancy",
@@ -946,7 +952,7 @@ describe("ic-select searchable", () => {
     it("should test click on input with external filtering", async () => {
         const page = await newSpecPage({
             components: [Select, Menu, InputComponentContainer],
-            html: `<ic-select label="IC Select Test" searchable="true" disable-filter="true"></ic-select>`,
+            html: `<ic-select label="IC Select Test" searchable="true" disable-auto-filtering="true"></ic-select>`,
         });
         page.root.options = menuOptions;
         await page.waitForChanges();
@@ -988,6 +994,34 @@ describe("ic-select searchable", () => {
         await page.waitForChanges();
         expect(eventSpy).not.toHaveBeenCalled();
     });
+    it("should clear the input text on blur when an option is not selected", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer],
+            html: `<ic-select label="IC Select Test" searchable="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        page.rootInstance.searchableSelectInputValue = "aaa";
+        page.rootInstance.value = null;
+        await page.waitForChanges();
+        const event = new FocusEvent("blur");
+        await page.rootInstance.onBlur(event);
+        await page.waitForChanges();
+        expect(page.rootInstance.searchableSelectInputValue).toBe(null);
+    });
+    it("should not clear the input text on blur when an option is selected", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer],
+            html: `<ic-select label="IC Select Test" searchable="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        const event = new FocusEvent("blur");
+        page.rootInstance.searchableSelectInputValue = label1;
+        page.rootInstance.value = value1;
+        await page.waitForChanges();
+        await page.rootInstance.onBlur(event);
+        await page.waitForChanges();
+        expect(page.rootInstance.searchableSelectInputValue).toBe(label1);
+    });
     it("should test searchable input", async () => {
         const page = await newSpecPage({
             components: [Select, Menu, InputComponentContainer],
@@ -1185,7 +1219,7 @@ describe("ic-select searchable", () => {
     it("should test debounce change", async () => {
         const page = await newSpecPage({
             components: [Select, Menu, InputComponentContainer],
-            html: `<ic-select label="IC Select Test" searchable="true" disable-filter="true" debounce="300"></ic-select>`,
+            html: `<ic-select label="IC Select Test" searchable="true" disable-auto-filtering="true" debounce="300"></ic-select>`,
         });
         await page.waitForChanges();
         expect(page.rootInstance.currDebounce).toBe(300);
@@ -1196,7 +1230,7 @@ describe("ic-select searchable", () => {
     it("should test no results state when no options passed and filtering disabled", async () => {
         const page = await newSpecPage({
             components: [Select, Menu, InputComponentContainer],
-            html: `<ic-select label="IC Select Test" searchable="true" disable-filter="true" debounce="300"></ic-select>`,
+            html: `<ic-select label="IC Select Test" searchable="true" disable-auto-filtering="true" debounce="300"></ic-select>`,
         });
         page.root.options = menuOptions;
         page.rootInstance.searchableSelectInputValue = "test";
@@ -1219,10 +1253,10 @@ describe("ic-select searchable", () => {
         page.root.options = menuOptions;
         await page.waitForChanges();
     });
-    it("should test menus opens and closes when enter pressed - external filtering", async () => {
+    it("should test menu opens and closes when enter pressed - external filtering", async () => {
         const page = await newSpecPage({
             components: [Select, Menu, InputComponentContainer],
-            html: `<ic-select label="IC Select Test" searchable="true" disable-filter="true" debounce="300"></ic-select>`,
+            html: `<ic-select label="IC Select Test" searchable="true" disable-auto-filtering="true" debounce="300"></ic-select>`,
         });
         page.root.options = [];
         page.rootInstance.searchableSelectInputValue = "test";
@@ -1308,10 +1342,23 @@ describe("ic-select searchable", () => {
         const input = page.root.shadowRoot.querySelector("input");
         expect(input.value).toBe(value1);
     });
+    it("should set the default value of searchable only when value is not null", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer],
+            html: `<ic-select label="IC Select Test" searchable="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        page.root.value = null;
+        await page.waitForChanges();
+        expect(page.rootInstance.searchableSelectInputValue).toBe(null);
+        page.root.value = value1;
+        await page.waitForChanges();
+        expect(page.rootInstance.searchableSelectInputValue).toBe(label1);
+    });
     it("should test loading state and timeout for searchable select with external filtering", async () => {
         const page = await newSpecPage({
             components: [Select, Menu, InputComponentContainer],
-            html: `<ic-select label="IC Select Test" searchable="true" disable-filter="true" debounce="300" timeout="1000"></ic-select>`,
+            html: `<ic-select label="IC Select Test" searchable="true" disable-auto-filtering="true" debounce="300" timeout="1000"></ic-select>`,
         });
         page.rootInstance.searchableSelectInputValue = "test";
         await page.waitForChanges();
@@ -1360,7 +1407,7 @@ describe("ic-select searchable", () => {
     it("should test keydown on loading retry button", async () => {
         const page = await newSpecPage({
             components: [Select, Menu, InputComponentContainer],
-            html: `<ic-select label="IC Select Test" searchable="true" disable-filter="true" debounce="300" timeout="1000"></ic-select>`,
+            html: `<ic-select label="IC Select Test" searchable="true" disable-auto-filtering="true" debounce="300" timeout="1000"></ic-select>`,
         });
         const input = page.root.shadowRoot.querySelector("input");
         const spy = jest.spyOn(input, "focus");
@@ -1445,5 +1492,181 @@ describe("ic-select searchable", () => {
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot("disabled-removed");
     });
+    it("should emit icChange when input is edited after selection", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer],
+            html: `<ic-select label="IC Select Test" searchable="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        page.root.value = null;
+        await page.waitForChanges();
+        const eventSpy = jest.fn();
+        page.win.addEventListener("icChange", eventSpy);
+        const event = { target: { value: value1 } };
+        await page.rootInstance.handleSearchableSelectInput(event);
+        await page.waitForChanges();
+        expect(eventSpy).not.toHaveBeenCalled();
+        page.root.value = value1;
+        await page.rootInstance.handleSearchableSelectInput(event);
+        await page.waitForChanges();
+        expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: expect.objectContaining({
+                value: null,
+            }),
+        }));
+    });
+});
+describe("ic-select multi", () => {
+    it("should not render a native select on a mobile / tablet screen", async () => {
+        Object.defineProperty(helpers, "isMobileOrTablet", {
+            value: jest.fn().mockReturnValue(true),
+        });
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer, Button],
+            html: `<ic-select label="IC Select Test" multiple="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should test handleKeyboardOpen method on menu - arrow down", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer, Button],
+            html: `<ic-select label="IC Select Test" multiple="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        await page.waitForChanges();
+        const menu = page.root.shadowRoot.querySelector("ic-menu");
+        const KeyEvent = {
+            key: "ArrowDown",
+            preventDefault: () => null,
+        };
+        await menu.handleKeyboardOpen(KeyEvent);
+        await page.waitForChanges();
+        expect(page.rootInstance.open).toBeTruthy;
+        // Test option is not selected by automatic selection
+        expect(page.rootInstance.value).toBe(undefined);
+    });
+    it("should test menu handleKeyboardOpen method - arrow up", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer, Button],
+            html: `<ic-select label="IC Select Test" multiple="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        await page.waitForChanges();
+        const menu = page.root.shadowRoot.querySelector("ic-menu");
+        const KeyEvent = {
+            key: "ArrowUp",
+            preventDefault: () => null,
+        };
+        await menu.handleKeyboardOpen(KeyEvent);
+        await page.waitForChanges();
+        expect(page.rootInstance.open).toBeTruthy;
+        // Test option is not selected by automatic selection
+        expect(page.rootInstance.value).toBe(undefined);
+    });
+    it("should test keydown on menu - arrow down, up, and enter", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer, Button],
+            html: `<ic-select label="IC Select Test" multiple="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        page.rootInstance.open = true;
+        await page.waitForChanges();
+        const menu = page.root.shadowRoot.querySelector(menuUl);
+        menu.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+            key: "ArrowDown",
+            bubbles: true,
+            cancelable: true,
+        }));
+        await page.waitForChanges();
+        menu.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+            key: "Enter",
+            bubbles: true,
+            cancelable: true,
+        }));
+        await page.waitForChanges();
+        expect(page.rootInstance.value).toEqual([value1]);
+        expect(page.root).toMatchSnapshot();
+        menu.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+            key: "ArrowDown",
+            bubbles: true,
+            cancelable: true,
+        }));
+        await page.waitForChanges();
+        menu.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+            key: "Enter",
+            bubbles: true,
+            cancelable: true,
+        }));
+        await page.waitForChanges();
+        expect(page.rootInstance.value).toEqual([value1, value2]);
+        expect(page.root).toMatchSnapshot();
+        menu.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+            key: "ArrowUp",
+            bubbles: true,
+            cancelable: true,
+        }));
+        await page.waitForChanges();
+        menu.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+            key: "Enter",
+            bubbles: true,
+            cancelable: true,
+        }));
+        await page.waitForChanges();
+        expect(page.rootInstance.value).toEqual([value2]);
+    });
+    it("should select all options - handleSelectAllChange", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer, Button],
+            html: `<ic-select label="IC Select Test" multiple="true"></ic-select>`,
+        });
+        const eventSpy = jest.fn();
+        page.win.addEventListener("icOptionSelect", eventSpy);
+        page.root.options = menuOptionsWithDisabled;
+        await page.waitForChanges();
+        page.rootInstance.handleSelectAllChange({ detail: { select: true } });
+        // Test disabled option not selected
+        expect(page.rootInstance.value).toEqual([value1, value2, value4]);
+        expect(eventSpy).toHaveBeenCalledTimes(3);
+    });
+    it("should emit icOptionSelect only for unselected options - handleSelectAllChange", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer, Button],
+            html: `<ic-select label="IC Select Test" multiple="true"></ic-select>`,
+        });
+        const eventSpy = jest.fn();
+        page.win.addEventListener("icOptionSelect", eventSpy);
+        page.root.options = menuOptionsWithDisabled;
+        page.root.value = [value1];
+        await page.waitForChanges();
+        page.rootInstance.handleSelectAllChange({ detail: { select: true } });
+        expect(eventSpy).toHaveBeenCalledTimes(2);
+    });
+    it("should deselect all options - handleSelectAllChange", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer, Button],
+            html: `<ic-select label="IC Select Test" multiple="true"></ic-select>`,
+        });
+        page.root.options = menuOptionsWithDisabled;
+        page.root.value = [value1, value2, value4];
+        await page.waitForChanges();
+        page.rootInstance.handleSelectAllChange({ detail: { select: false } });
+        expect(page.rootInstance.value).toEqual(null);
+    });
+    it("should sort the selected options by the order of the options in the menu", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer, Button],
+            html: `<ic-select label="IC Select Test" multiple="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        page.root.value = [value1];
+        await page.waitForChanges();
+        page.root.value = [value2, value1];
+        await page.waitForChanges();
+        const button = page.root.shadowRoot.querySelector("button.select-input");
+        expect(page.rootInstance.currValue).toEqual([value1, value2]);
+        expect(button.textContent).toContain(`${label1}, ${label2}`);
+    });
 });
 //# sourceMappingURL=ic-select.spec.js.map