@nulogy/components 16.0.1 → 16.0.3

package/dist/src/Radio/Radio.story.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
-import { action } from "@storybook/addon-actions";
+import { expect, userEvent, within } from "storybook/test";
+import { action } from "storybook/actions";
 import { Radio, Button } from "../index";
 export default {
     title: "Components/Radio",
@@ -14,6 +15,15 @@ export const Default = {
     args: {
         labelText: "I am a radio button",
     },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("can be checked", async () => {
+            const radio = canvas.getByRole("radio");
+            await expect(radio).not.toBeChecked();
+            await userEvent.click(radio);
+            await expect(radio).toBeChecked();
+        });
+    },
 };
 export const SetToDefaultChecked = {
     args: {
@@ -21,10 +31,27 @@ export const SetToDefaultChecked = {
         labelText: "I am checked by default",
     },
     name: "Set to default checked",
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByRole("radio")).toBeChecked();
+    },
 };
 export const SetToDisabled = {
     render: (args) => (_jsxs(_Fragment, { children: [_jsx(Radio, { ...args, id: "radio-1", disabled: true, labelText: "I am disabled" }), _jsx(Radio, { ...args, id: "radio-2", checked: true, disabled: true, labelText: "I am disabled" })] })),
     name: "Set to disabled",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("shows checked value", async () => {
+            const radios = canvas.getAllByRole("radio");
+            await expect(radios[0]).not.toBeChecked();
+            await expect(radios[1]).toBeChecked();
+        });
+        await step("inputs are disabled", async () => {
+            const radios = canvas.getAllByRole("radio");
+            await expect(radios[0]).toBeDisabled();
+            await expect(radios[1]).toBeDisabled();
+        });
+    },
 };
 export const SetToError = {
     render: (args) => (_jsxs(_Fragment, { children: [_jsx(Radio, { ...args, id: "radio", error: true, labelText: "I am error" }), _jsx(Radio, { ...args, id: "radio", defaultChecked: true, error: true, labelText: "I am error" })] })),
@@ -36,6 +63,14 @@ export const SetToRequired = {
 };
 export const Controlled = {
     render: (args) => (_jsxs(_Fragment, { children: [_jsx(Radio, { ...args, id: "radio-1", checked: true, onChange: action("onChange"), labelText: "I am controlled and checked" }), _jsx(Radio, { ...args, id: "radio-2", checked: false, onChange: action("onChange"), labelText: "I am controlled and unchecked" })] })),
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("shows checked value", async () => {
+            const radios = canvas.getAllByRole("radio");
+            await expect(radios[0]).toBeChecked();
+            await expect(radios[1]).not.toBeChecked();
+        });
+    },
 };
 const UsingRefToControlFocusComponent = () => {
     const ref = useRef(null);
@@ -47,4 +82,12 @@ const UsingRefToControlFocusComponent = () => {
 export const UsingRefToControlFocus = {
     render: (args) => _jsx(UsingRefToControlFocusComponent, { ...args }),
     name: "using ref to control focus",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("focus can be set via ref", async () => {
+            const radio = canvas.getByRole("radio");
+            await userEvent.click(canvas.getByTestId("the-button"));
+            await expect(radio).toHaveFocus();
+        });
+    },
 };

package/dist/src/Radio/RadioGroup.story.d.ts

@@ -8,38 +8,46 @@ declare const _default: {
 };
 export default _default;
 export declare const _RadioGroup: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
 export declare const RadioGroupWithAllProps: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
     parameters: {
         chromatic: {
             diffThreshold: number;
         };
     };
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
 export declare const WithErrorMessage: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithErrorList: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const SetToDisabled: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
+export declare const Controlled: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
-export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Radio/RadioGroup.story.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { expect, userEvent, within } from "storybook/test";
 import { Radio, RadioGroup, Icon, Tooltip, Flex } from "../index";
 const errorList = ["Error message 1", "Error message 2"];
 export default {
@@ -7,27 +8,79 @@ export default {
         chromatic: { diffThreshold: 0.3 },
     },
 };
-export const _RadioGroup = () => (_jsxs(RadioGroup, { labelText: "Setting Selection", name: "settingSelection", children: [_jsx(Radio, { value: "a", labelText: "Option A" }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] }));
-_RadioGroup.story = {
+export const _RadioGroup = {
+    render: () => (_jsxs(RadioGroup, { labelText: "Setting Selection", name: "settingSelection", children: [_jsx(Radio, { value: "a", labelText: "Option A" }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] })),
     name: "RadioGroup",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("has the correct initial values", async () => {
+            const radios = canvas.getAllByRole("radio");
+            await expect(radios[0]).not.toBeChecked();
+            await expect(radios[1]).not.toBeChecked();
+            await expect(radios[2]).not.toBeChecked();
+        });
+        await step("can be checked", async () => {
+            const radios = canvas.getAllByRole("radio");
+            await userEvent.click(radios[1]);
+            await expect(radios[1]).toBeChecked();
+            await userEvent.click(radios[2]);
+            await expect(radios[2]).toBeChecked();
+            await expect(radios[1]).not.toBeChecked();
+        });
+    },
 };
-export const RadioGroupWithAllProps = () => (_jsxs(RadioGroup, { labelText: "Setting Selection", name: "settingSelection", helpText: "Select a setting from the menu below:", required: true, requirementText: "(Required)", defaultValue: "a", children: [_jsx(Radio, { value: "a", labelText: _jsxs(Flex, { alignItems: "center", children: ["Option A", _jsx(Tooltip, { placement: "bottom", tooltip: "Option A is a special option with extra information", defaultOpen: true, children: _jsx(Icon, { icon: "help", color: "darkBlue", size: "x2", ml: "x1" }) })] }) }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] }));
-RadioGroupWithAllProps.story = {
+export const RadioGroupWithAllProps = {
+    render: () => (_jsxs(RadioGroup, { labelText: "Setting Selection", name: "settingSelection", helpText: "Select a setting from the menu below:", required: true, requirementText: "(Required)", defaultValue: "a", children: [_jsx(Radio, { value: "a", labelText: _jsxs(Flex, { alignItems: "center", children: ["Option A", _jsx(Tooltip, { placement: "bottom", tooltip: "Option A is a special option with extra information", defaultOpen: true, children: _jsx(Icon, { icon: "help", color: "darkBlue", size: "x2", ml: "x1" }) })] }) }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] })),
     name: "RadioGroup with all props",
+    parameters: {
+        chromatic: { diffThreshold: 0.3 },
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("has the correct initial values", async () => {
+            const radios = canvas.getAllByRole("radio");
+            await expect(radios[0]).toBeChecked();
+            await expect(radios[1]).not.toBeChecked();
+            await expect(radios[2]).not.toBeChecked();
+        });
+    },
 };
-RadioGroupWithAllProps.parameters = {
-    chromatic: { diffThreshold: 0.3 },
-};
-export const WithErrorMessage = () => (_jsxs(RadioGroup, { errorMessage: "Please select an option", labelText: "Setting Selection", name: "settingSelection", defaultValue: "a", children: [_jsx(Radio, { value: "a", labelText: "Option A" }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] }));
-WithErrorMessage.story = {
+export const WithErrorMessage = {
+    render: () => (_jsxs(RadioGroup, { errorMessage: "Please select an option", labelText: "Setting Selection", name: "settingSelection", defaultValue: "a", children: [_jsx(Radio, { value: "a", labelText: "Option A" }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] })),
     name: "with error message",
 };
-export const WithErrorList = () => (_jsxs(RadioGroup, { errorMessage: "Please select an option", errorList: errorList, labelText: "Setting Selection", name: "settingSelection", defaultValue: "a", children: [_jsx(Radio, { value: "a", labelText: "Option A" }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] }));
-WithErrorList.story = {
+export const WithErrorList = {
+    render: () => (_jsxs(RadioGroup, { errorMessage: "Please select an option", errorList: errorList, labelText: "Setting Selection", name: "settingSelection", defaultValue: "a", children: [_jsx(Radio, { value: "a", labelText: "Option A" }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] })),
     name: "with error list",
 };
-export const SetToDisabled = () => (_jsxs(RadioGroup, { disabled: true, labelText: "Setting Selection", name: "settingSelection", defaultValue: "a", children: [_jsx(Radio, { value: "a", labelText: "Option A" }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] }));
-SetToDisabled.story = {
+export const SetToDisabled = {
+    render: () => (_jsxs(RadioGroup, { disabled: true, labelText: "Setting Selection", name: "settingSelection", defaultValue: "a", children: [_jsx(Radio, { value: "a", labelText: "Option A" }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] })),
     name: "Set to disabled",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("has the correct initial values", async () => {
+            const radios = canvas.getAllByRole("radio");
+            await expect(radios[0]).toBeChecked();
+            await expect(radios[1]).not.toBeChecked();
+            await expect(radios[2]).not.toBeChecked();
+        });
+        await step("all inputs are disabled", async () => {
+            const radios = canvas.getAllByRole("radio");
+            await expect(radios[0]).toBeDisabled();
+            await expect(radios[1]).toBeDisabled();
+            await expect(radios[2]).toBeDisabled();
+        });
+    },
+};
+export const Controlled = {
+    render: () => (_jsxs(RadioGroup, { labelText: "Setting Selection", name: "settingSelection", checkedValue: "a", onChange: () => { }, children: [_jsx(Radio, { value: "a", labelText: "Option A" }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] })),
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("has the correct initial values", async () => {
+            const radios = canvas.getAllByRole("radio");
+            await expect(radios[0]).toBeChecked();
+            await expect(radios[1]).not.toBeChecked();
+            await expect(radios[2]).not.toBeChecked();
+        });
+    },
 };
-export const Controlled = () => (_jsxs(RadioGroup, { labelText: "Setting Selection", name: "settingSelection", checkedValue: "a", onChange: () => { }, children: [_jsx(Radio, { value: "a", labelText: "Option A" }), _jsx(Radio, { value: "b", labelText: "Option B" }), _jsx(Radio, { value: "c", labelText: "Option C" })] }));

package/dist/src/RangeContainer/RangeContainer.story.d.ts

@@ -3,8 +3,6 @@ declare const _default: {
 };
 export default _default;
 export declare const _RangeContainer: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/RangeContainer/RangeContainer.story.js

@@ -3,7 +3,7 @@ import { RangeContainer } from ".";
 export default {
     title: "Components/RangeContainer",
 };
-export const _RangeContainer = () => _jsx(RangeContainer, { children: "Example" });
-_RangeContainer.story = {
+export const _RangeContainer = {
+    render: () => _jsx(RangeContainer, { children: "Example" }),
     name: "RangeContainer",
 };

package/dist/src/Select/Select.story.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 import Select, { NDSSelectProps } from "./Select";
 declare const _default: {
     title: string;
@@ -10,102 +10,74 @@ type Story = StoryObj<typeof Select>;
 export declare const _Select: Story;
 export declare const WithStyledProps: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithABlankValue: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAnOptionSelected: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithState: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const SetToDisabled: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithErrorMessage: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithErrorList: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const Required: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAClearButton: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithAllFieldLabelProps: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithCustomId: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithSmallerMaxHeight: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithWrappingText: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithMultiselect: {
-    (props: any): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: (props: any) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
 export declare const WithCloseMenuOnSelectTurnedOff: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const TestMultiselectOverflow: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithFixedPositioning: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithFetchedOptions: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithCustomOptionComponent: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const UsingRefToControlFocus: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithTopMenuPlacement: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Select/Select.story.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from "react";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
 import { Button } from "../index";
@@ -130,90 +131,133 @@ export const _Select = {
             control: { type: "boolean" },
         },
     },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("dropdown is closed initially", async () => {
+            await expect(screen.queryByTestId("select-dropdown")).not.toBeInTheDocument();
+        });
+        await step("opens dropdown on click", async () => {
+            // Click the combobox input — the most reliable way to open react-select
+            await userEvent.click(canvas.getByRole("combobox"));
+            await waitFor(() => expect(screen.getByTestId("select-dropdown")).toBeInTheDocument());
+        });
+        await step("closes dropdown on Escape key", async () => {
+            await userEvent.keyboard("{Escape}");
+            await waitFor(() => expect(screen.queryByTestId("select-dropdown")).not.toBeInTheDocument());
+        });
+        await step("selects an option by clicking and closes the dropdown", async () => {
+            await userEvent.click(canvas.getByRole("combobox"));
+            await userEvent.click(screen.getByText("Assigned to a line"));
+            await waitFor(() => expect(screen.queryByTestId("select-dropdown")).not.toBeInTheDocument());
+        });
+    },
 };
 export const WithStyledProps = () => {
     return (_jsx(Select, { initialIsOpen: true, placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), maxWidth: "300px", options: options, labelText: "Default size", onInputChange: action("typed input value changed") }));
 };
-export const WithABlankValue = () => {
-    const optionsWithBlank = [{ value: null, label: "" }, ...options];
-    return (_jsx(Select, { placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
-};
-WithABlankValue.story = {
+export const WithABlankValue = {
+    render: () => {
+        const optionsWithBlank = [{ value: null, label: "" }, ...options];
+        return (_jsx(Select, { placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
+    },
     name: "with a blank value",
 };
-export const WithAnOptionSelected = () => (_jsxs(_Fragment, { children: [_jsx(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }), _jsx("br", {}), _jsx(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })] }));
-WithAnOptionSelected.story = {
+export const WithAnOptionSelected = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }), _jsx("br", {}), _jsx(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })] })),
     name: "with an option selected",
 };
-export const WithState = () => (_jsx(SelectWithState, { selectedValue: "foo", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" }));
-WithState.story = {
+export const WithState = {
+    render: () => (_jsx(SelectWithState, { selectedValue: "foo", placeholder: "Please select inventory status", options: options, labelText: "Inventory status" })),
     name: "with state",
 };
-export const SetToDisabled = () => (_jsx(Select, { placeholder: "Please select inventory status", options: options, onChange: action("selection changed"), onBlur: action("blurred"), disabled: true, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
-SetToDisabled.story = {
+export const SetToDisabled = {
+    render: () => (_jsx(Select, { placeholder: "Please select inventory status", options: options, onChange: action("selection changed"), onBlur: action("blurred"), disabled: true, labelText: "Inventory status", onInputChange: action("typed input value changed") })),
     name: "set to disabled",
 };
-export const WithErrorMessage = () => (_jsxs(_Fragment, { children: [_jsx(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }), _jsx("br", {}), _jsx(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })] }));
-WithErrorMessage.story = {
+export const WithErrorMessage = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }), _jsx("br", {}), _jsx(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })] })),
     name: "with error message",
 };
-export const WithErrorList = () => (_jsxs(_Fragment, { children: [_jsx(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", errorList: errorList, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }), _jsx("br", {}), _jsx(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", errorList: errorList, initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })] }));
-WithErrorList.story = {
+export const WithErrorList = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", errorList: errorList, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }), _jsx("br", {}), _jsx(Select, { placeholder: "Please select inventory status", options: options, errorMessage: "Please select an inventory status", errorList: errorList, initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })] })),
     name: "with error list",
 };
-export const Required = () => (_jsx(Select, { placeholder: "Please select inventory status", options: options, required: true, requirementText: "(Required)", labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
-Required.story = {
+export const Required = {
+    render: () => (_jsx(Select, { placeholder: "Please select inventory status", options: options, required: true, requirementText: "(Required)", labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })),
     name: "set to required",
 };
 export const WithAClearButton = () => (_jsx(Select, { isClearable: true, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
-export const WithAllFieldLabelProps = () => (_jsx(Select, { placeholder: "Please select inventory status", options: options, labelText: "Inventory status", helpText: "Additional information about input", hint: "This is a hint for the input field", requirementText: "(Required)", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
-WithAllFieldLabelProps.story = {
+export const WithAllFieldLabelProps = {
+    render: () => (_jsx(Select, { placeholder: "Please select inventory status", options: options, labelText: "Inventory status", helpText: "Additional information about input", hint: "This is a hint for the input field", requirementText: "(Required)", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })),
     name: "with all field label props",
 };
-export const WithCustomId = () => (_jsx(Select, { id: "my-custom-id", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", helpText: "Additional information about input", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
-WithCustomId.story = {
+export const WithCustomId = {
+    render: () => (_jsx(Select, { id: "my-custom-id", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", helpText: "Additional information about input", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })),
     name: "with custom id",
 };
-export const WithSmallerMaxHeight = () => (_jsx(Select, { initialIsOpen: true, maxHeight: "132px", value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
-WithSmallerMaxHeight.story = {
+export const WithSmallerMaxHeight = {
+    render: () => (_jsx(Select, { initialIsOpen: true, maxHeight: "132px", value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })),
     name: "with smaller maxHeight",
 };
-export const WithWrappingText = () => (_jsx(Select, { initialIsOpen: true, value: wrappingOptions[0].value, placeholder: "Please select inventory status", options: wrappingOptions, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
-WithWrappingText.story = {
+export const WithWrappingText = {
+    render: () => (_jsx(Select, { initialIsOpen: true, value: wrappingOptions[0].value, placeholder: "Please select inventory status", options: wrappingOptions, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })),
     name: "With wrapping text",
 };
-export const WithMultiselect = (props) => {
-    return (_jsx(Select, { defaultValue: [partnerCompanyName[0].value, partnerCompanyName[2].value], noOptionsMessage: () => "Nothing to see here", placeholder: "Please select inventory status", options: PCNList, labelText: "Select PCN", className: "Select", multiselect: true, ...props }));
-};
-WithMultiselect.story = {
+export const WithMultiselect = {
+    render: (props) => {
+        return (_jsx(Select, { defaultValue: [partnerCompanyName[0].value, partnerCompanyName[2].value], noOptionsMessage: () => "Nothing to see here", placeholder: "Please select inventory status", options: PCNList, labelText: "Select PCN", className: "Select", multiselect: true, ...props }));
+    },
     name: "with multiselect",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("shows initial default values and excludes unselected ones", async () => {
+            await expect(canvas.getByText("PCN2")).toBeInTheDocument();
+            await expect(canvas.getByText("PCN1")).toBeInTheDocument();
+            // PCN4 is an unselected option — should not be visible while dropdown is closed
+            await expect(canvas.queryByText("PCN4")).not.toBeInTheDocument();
+        });
+        await step("removes a selected value via its remove button", async () => {
+            const [firstMultivalue] = canvas.getAllByTestId("select-multivalue");
+            // Click the react-select MultiValueRemove element (direct child of our NDS wrapper)
+            const removeBtn = firstMultivalue.querySelector('[class*="multi-value__remove"]');
+            await userEvent.click(removeBtn);
+            await waitFor(() => expect(canvas.getAllByTestId("select-multivalue")).toHaveLength(1));
+        });
+        await step("clears all remaining values with the clear button", async () => {
+            const clearWrapper = canvas.getByTestId("select-clear");
+            // Click the react-select ClearIndicator element (direct child of our NDS wrapper)
+            const clearBtn = clearWrapper.querySelector('[class*="clear-indicator"]');
+            await userEvent.click(clearBtn);
+            await waitFor(() => expect(canvas.queryByTestId("select-multivalue")).not.toBeInTheDocument());
+        });
+    },
 };
-export const WithCloseMenuOnSelectTurnedOff = () => {
-    return (_jsx(Select, { defaultValue: [partnerCompanyName[0].value, partnerCompanyName[2].value], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: PCNList, labelText: "Select PCN", className: "Select", multiselect: true, closeMenuOnSelect: false }));
-};
-WithCloseMenuOnSelectTurnedOff.story = {
+export const WithCloseMenuOnSelectTurnedOff = {
+    render: () => {
+        return (_jsx(Select, { defaultValue: [partnerCompanyName[0].value, partnerCompanyName[2].value], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: PCNList, labelText: "Select PCN", className: "Select", multiselect: true, closeMenuOnSelect: false }));
+    },
     name: "with closeMenuOnSelect turned off",
 };
-export const TestMultiselectOverflow = () => (_jsxs(_Fragment, { children: [_jsx(Select, { defaultValue: ["accepted", "assigned"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }), _jsx(Box, { width: "300px", children: _jsx(Select, { defaultValue: partnerCompanyName.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: partnerCompanyName, labelText: "PCN", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }) }), _jsx(Box, { width: "400px", children: _jsx(Select, { defaultValue: options.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }) })] }));
-TestMultiselectOverflow.story = {
+export const TestMultiselectOverflow = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Select, { defaultValue: ["accepted", "assigned"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }), _jsx(Box, { width: "300px", children: _jsx(Select, { defaultValue: partnerCompanyName.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: partnerCompanyName, labelText: "PCN", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }) }), _jsx(Box, { width: "400px", children: _jsx(Select, { defaultValue: options.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }) })] })),
     name: "test multiselect overflow",
 };
-export const WithFixedPositioning = () => (_jsx(_Fragment, { children: _jsx(Box, { style: {
-            position: "relative",
-            overflow: "hidden",
-            width: "300px",
-            height: "100px",
-        }, children: _jsx(Select, { defaultValue: ["accepted", "assigned"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", menuPosition: "fixed" }) }) }));
-WithFixedPositioning.story = {
+export const WithFixedPositioning = {
+    render: () => (_jsx(_Fragment, { children: _jsx(Box, { style: {
+                position: "relative",
+                overflow: "hidden",
+                width: "300px",
+                height: "100px",
+            }, children: _jsx(Select, { defaultValue: ["accepted", "assigned"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", menuPosition: "fixed" }) }) })),
     name: "with fixed positioning",
 };
 export const WithFetchedOptions = () => (_jsxs(Box, { style: { width: "300px" }, children: [_jsx(SelectWithManyOptions, { labelText: "Select from many options:" }), _jsx(SelectWithManyOptions, { multiselect: true, labelText: "Multiselect many options:" })] }));
-export const WithCustomOptionComponent = () => {
-    return (_jsx(Box, { position: "relative", overflow: "hidden", width: "300px", height: "600px", children: _jsx(Select, { defaultValue: ["accepted"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, components: {
-                Option: CustomOption,
-            }, multiselect: true, labelText: "Inventory status", menuPosition: "fixed" }) }));
-};
-WithCustomOptionComponent.story = {
+export const WithCustomOptionComponent = {
+    render: () => {
+        return (_jsx(Box, { position: "relative", overflow: "hidden", width: "300px", height: "600px", children: _jsx(Select, { defaultValue: ["accepted"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, components: {
+                    Option: CustomOption,
+                }, multiselect: true, labelText: "Inventory status", menuPosition: "fixed" }) }));
+    },
     name: "with custom option component",
 };
 export const UsingRefToControlFocus = () => {