@plasmicpkgs/react-aria 0.0.109 → 0.0.110

package/skinny/registerSelect.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerSelect.esm.js","sources":["../src/registerSelect.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport {\n  Select,\n  SelectProps,\n  SelectRenderProps,\n  SelectStateContext,\n  SelectValue,\n} from \"react-aria-components\";\nimport { COMMON_STYLES, arrowDown, getCommonProps } from \"./common\";\nimport {\n  PlasmicListBoxContext,\n  PlasmicPopoverTriggerContext,\n} from \"./contexts\";\nimport { OptionsItemIdManager } from \"./OptionsItemIdManager\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n  HasControlContextData,\n  Registerable,\n  WithPlasmicCanvasComponentInfo,\n  extractPlasmicDataProps,\n  makeComponentName,\n  registerComponentHelper,\n  useAutoOpen,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\n// It cannot be used as a hook like useAutoOpen() within the BaseSelect component\n// because it needs access to SelectStateContext, which is only created in the BaseSelect component's render function.\nfunction SelectAutoOpen(props: any) {\n  const { open, close } = React.useContext(SelectStateContext) ?? {};\n  useAutoOpen({\n    props,\n    open: () => {\n      open?.();\n      // using settimeout because the focus is not immediately available\n      setTimeout(() => {\n        /*\n          When the select's popover is opened in the canvas, the listbox gains focus, trapping the keyboard focus within it. Pressing the up or down arrow keys navigates through the listbox items.\n          However, there are three issues with this behavior:\n\n            1. Focus should not be triggered in canvas (non-interactive mode)\n            2. Canvas (non-interactive mode) should remain non-interactive: Navigation between listbox items or selection using the space key should not be possible.\n            3. Keyboard hotkeys (e.g., backspace, undo) stop working: Key presses are absorbed by the listbox, breaking the expected behavior for shortcuts like backspace or undo (reference).\n\n          To resolve this, we need to call document.activeElement.blur() to remove focus from the listbox.\n\n          However, since the select component is a code component embedded within the artboard iframe, the keyboard hotkeys (e.g., backspace, undo) will not work,\n          because they only function in the parent iframe (__wab_studio-frame).\n          To ensure hotkeys work properly, we need to shift focus from the active element in the child iframe (artboard iframe) to the parent iframe (__wab_studio-frame) by using window.parent.\n        */\n        (window.parent.document.activeElement as HTMLElement)?.blur?.();\n      }, 1);\n    },\n    close,\n  });\n\n  return null;\n}\n\nexport interface BaseSelectValueProps\n  extends React.ComponentProps<typeof SelectValue> {\n  children: React.ReactNode;\n}\n\nexport const BaseSelectValue = (props: BaseSelectValueProps) => {\n  const { children: placeholder, className } = props;\n  return (\n    <SelectValue className={className} style={COMMON_STYLES}>\n      {({ isPlaceholder, selectedText }) => (\n        <>{isPlaceholder ? placeholder : selectedText}</>\n      )}\n    </SelectValue>\n  );\n};\n\nconst SELECT_NAME = makeComponentName(\"select\");\n\nexport interface BaseSelectControlContextData {\n  itemIds: string[];\n}\n\nconst SELECT_VARIANTS = [\n  \"focused\" as const,\n  \"focusVisible\" as const,\n  \"disabled\" as const,\n];\n\nconst { variants: SELECT_VARIANTS_DATA } =\n  pickAriaComponentVariants(SELECT_VARIANTS);\n\nexport interface BaseSelectProps\n  extends SelectProps<{}>, // NOTE: We don't need generic type here since we don't use items prop (that needs it). We just need to make the type checker happy\n    WithVariants<typeof SELECT_VARIANTS>,\n    WithPlasmicCanvasComponentInfo,\n    HasControlContextData<BaseSelectControlContextData> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport function BaseSelect(props: BaseSelectProps) {\n  const {\n    selectedKey,\n    onSelectionChange,\n    onOpenChange,\n    isDisabled,\n    className,\n    children,\n    disabledKeys,\n    name,\n    setControlContextData,\n    plasmicUpdateVariant,\n    \"aria-label\": ariaLabel,\n  } = props;\n\n  const idManager = useMemo(() => new OptionsItemIdManager(), []);\n\n  useEffect(() => {\n    idManager.subscribe((ids: string[]) => {\n      setControlContextData?.({\n        itemIds: ids,\n      });\n    });\n  }, []);\n\n  const classNameProp = useCallback(\n    ({\n      isDisabled: isDisabled2,\n      isFocusVisible,\n      isFocused,\n    }: SelectRenderProps) => {\n      plasmicUpdateVariant?.({\n        disabled: isDisabled2,\n        focused: isFocused,\n        focusVisible: isFocusVisible,\n      });\n      return className ?? \"\";\n    },\n    [className, plasmicUpdateVariant]\n  );\n\n  return (\n    <Select\n      selectedKey={selectedKey}\n      onSelectionChange={onSelectionChange}\n      onOpenChange={onOpenChange}\n      isDisabled={isDisabled}\n      className={classNameProp}\n      style={COMMON_STYLES}\n      name={name}\n      disabledKeys={disabledKeys}\n      aria-label={ariaLabel}\n      {...extractPlasmicDataProps(props)}\n    >\n      <SelectAutoOpen {...props} />\n      <PlasmicPopoverTriggerContext.Provider value={true}>\n        <PlasmicListBoxContext.Provider\n          value={{\n            idManager,\n          }}\n        >\n          {children}\n        </PlasmicListBoxContext.Provider>\n      </PlasmicPopoverTriggerContext.Provider>\n    </Select>\n  );\n}\n\nexport function registerSelect(loader?: Registerable) {\n  const selectValueMeta = registerComponentHelper(loader, BaseSelectValue, {\n    name: makeComponentName(\"select-value\"),\n    displayName: \"Aria Selected Value\",\n    importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n    importName: \"BaseSelectValue\",\n    parentComponentName: SELECT_NAME,\n    props: {\n      /** @deprecated use children (Placeholder) directly */\n      customize: {\n        type: \"boolean\",\n        displayName: \"Customize placeholder\",\n        defaultValue: true,\n        description: \"Customize the placeholder text and styles\",\n        /** Obsolete, but retained (permanently hidden) for backward compatibility.  */\n        hidden: () => true,\n      },\n      children: {\n        type: \"slot\",\n        displayName: \"Placeholder\",\n        defaultValue: [\n          {\n            type: \"text\",\n            value: \"Select an item\",\n          },\n        ],\n      },\n    },\n    trapsFocus: true,\n  });\n\n  registerComponentHelper(loader, BaseSelect, {\n    name: SELECT_NAME,\n    displayName: \"Aria Select\",\n    importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n    importName: \"BaseSelect\",\n    variants: SELECT_VARIANTS_DATA,\n    props: {\n      ...getCommonProps<BaseSelectProps>(\"Select\", [\n        \"name\",\n        \"aria-label\",\n        \"isDisabled\",\n        \"autoFocus\",\n      ]),\n      selectedKey: {\n        type: \"choice\",\n        editOnly: true,\n        uncontrolledProp: \"defaultSelectedKey\",\n        displayName: \"Initial selected item\",\n        options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n        // React Aria Select do not support multiple selections yet\n        multiSelect: false,\n      },\n      onSelectionChange: {\n        type: \"eventHandler\",\n        argTypes: [{ name: \"selectedValue\", type: \"string\" }],\n      },\n      disabledKeys: {\n        type: \"choice\",\n        displayName: \"Disabled values\",\n        description:\n          \"The items that are disabled. These items cannot be selected, focused, or otherwise interacted with.\",\n        options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n        multiSelect: true,\n        advanced: true,\n      },\n      isOpen: {\n        type: \"boolean\",\n        defaultValue: false,\n        // It doesn't make sense to make isOpen prop editable (it's controlled by user interaction and always closed by default), so we keep this prop hidden. We have listed the prop here in the meta only so we can expose a writeable state for it.\n        hidden: () => true,\n      },\n      onOpenChange: {\n        type: \"eventHandler\",\n        argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n      },\n      children: {\n        type: \"slot\",\n        mergeWithParent: true,\n        defaultValue: [\n          {\n            type: \"vbox\",\n            styles: {\n              justifyContent: \"flex-start\",\n              alignItems: \"flex-start\",\n              width: \"300px\",\n              padding: 0,\n            },\n            children: [\n              {\n                type: \"component\",\n                name: LABEL_COMPONENT_NAME,\n                props: {\n                  children: {\n                    type: \"text\",\n                    value: \"Label\",\n                  },\n                },\n              },\n              {\n                type: \"component\",\n                name: BUTTON_COMPONENT_NAME,\n                styles: {\n                  width: \"100%\",\n                  padding: \"4px 10px\",\n                  background: \"white\",\n                },\n                props: {\n                  children: {\n                    type: \"hbox\",\n                    styles: {\n                      width: \"stretch\",\n                      justifyContent: \"space-between\",\n                      alignItems: \"center\",\n                      padding: 0,\n                    },\n                    children: [\n                      {\n                        type: \"component\",\n                        name: selectValueMeta.name,\n                      },\n                      arrowDown,\n                    ],\n                  },\n                },\n              },\n              {\n                type: \"component\",\n                name: POPOVER_COMPONENT_NAME,\n                styles: {\n                  backgroundColor: \"white\",\n                  padding: \"10px\",\n                  overflow: \"scroll\",\n                  width: \"unset\",\n                },\n                props: {\n                  children: [\n                    {\n                      type: \"component\",\n                      name: LIST_BOX_COMPONENT_NAME,\n                      props: {\n                        selectionMode: \"single\",\n                      },\n                      styles: {\n                        borderWidth: 0,\n                        width: \"stretch\",\n                      },\n                    },\n                  ],\n                },\n              },\n            ],\n          },\n        ],\n      },\n    },\n    states: {\n      selectedValue: {\n        type: \"writable\",\n        valueProp: \"selectedKey\",\n        onChangeProp: \"onSelectionChange\",\n        variableType: \"text\",\n      },\n      isOpen: {\n        type: \"writable\",\n        valueProp: \"isOpen\",\n        onChangeProp: \"onOpenChange\",\n        variableType: \"boolean\",\n      },\n    },\n    trapsFocus: true,\n  });\n}\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"registerSelect.esm.js","sources":["../src/registerSelect.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport {\n  Select,\n  SelectProps,\n  SelectRenderProps,\n  SelectStateContext,\n  SelectValue,\n} from \"react-aria-components\";\nimport { COMMON_STYLES, arrowDown, getCommonProps } from \"./common\";\nimport {\n  PlasmicListBoxContext,\n  PlasmicPopoverTriggerContext,\n} from \"./contexts\";\nimport { OptionsItemIdManager } from \"./OptionsItemIdManager\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n  HasControlContextData,\n  Registerable,\n  WithPlasmicCanvasComponentInfo,\n  extractPlasmicDataProps,\n  makeComponentName,\n  registerComponentHelper,\n  useAutoOpen,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\n// It cannot be used as a hook like useAutoOpen() within the BaseSelect component\n// because it needs access to SelectStateContext, which is only created in the BaseSelect component's render function.\nfunction SelectAutoOpen(props: any) {\n  const { open, close } = React.useContext(SelectStateContext) ?? {};\n  useAutoOpen({\n    props,\n    open: () => {\n      open?.();\n      // using settimeout because the focus is not immediately available\n      setTimeout(() => {\n        /*\n          When the select's popover is opened in the canvas, the listbox gains focus, trapping the keyboard focus within it. Pressing the up or down arrow keys navigates through the listbox items.\n          However, there are three issues with this behavior:\n\n            1. Focus should not be triggered in canvas (non-interactive mode)\n            2. Canvas (non-interactive mode) should remain non-interactive: Navigation between listbox items or selection using the space key should not be possible.\n            3. Keyboard hotkeys (e.g., backspace, undo) stop working: Key presses are absorbed by the listbox, breaking the expected behavior for shortcuts like backspace or undo (reference).\n\n          To resolve this, we need to call document.activeElement.blur() to remove focus from the listbox.\n\n          However, since the select component is a code component embedded within the artboard iframe, the keyboard hotkeys (e.g., backspace, undo) will not work,\n          because they only function in the parent iframe (__wab_studio-frame).\n          To ensure hotkeys work properly, we need to shift focus from the active element in the child iframe (artboard iframe) to the parent iframe (__wab_studio-frame) by using window.parent.\n        */\n        (window.parent.document.activeElement as HTMLElement)?.blur?.();\n      }, 1);\n    },\n    close,\n  });\n\n  return null;\n}\n\nexport interface BaseSelectValueProps\n  extends React.ComponentProps<typeof SelectValue> {\n  children: React.ReactNode;\n}\n\nexport const BaseSelectValue = (props: BaseSelectValueProps) => {\n  const { children: placeholder, className } = props;\n  return (\n    <SelectValue className={className} style={COMMON_STYLES}>\n      {({ isPlaceholder, selectedText }) => (\n        <>{isPlaceholder ? placeholder : selectedText}</>\n      )}\n    </SelectValue>\n  );\n};\n\nconst SELECT_NAME = makeComponentName(\"select\");\n\nexport interface BaseSelectControlContextData {\n  itemIds: string[];\n}\n\nconst SELECT_VARIANTS = [\n  \"focused\" as const,\n  \"focusVisible\" as const,\n  \"disabled\" as const,\n];\n\nconst { variants: SELECT_VARIANTS_DATA } =\n  pickAriaComponentVariants(SELECT_VARIANTS);\n\nexport interface BaseSelectProps\n  extends SelectProps<{}>, // NOTE: We don't need generic type here since we don't use items prop (that needs it). We just need to make the type checker happy\n    WithVariants<typeof SELECT_VARIANTS>,\n    WithPlasmicCanvasComponentInfo,\n    HasControlContextData<BaseSelectControlContextData> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport function BaseSelect(props: BaseSelectProps) {\n  const {\n    selectedKey,\n    onSelectionChange,\n    onOpenChange,\n    isDisabled,\n    className,\n    children,\n    disabledKeys,\n    name,\n    setControlContextData,\n    plasmicUpdateVariant,\n    defaultSelectedKey,\n    \"aria-label\": ariaLabel,\n  } = props;\n\n  const idManager = useMemo(() => new OptionsItemIdManager(), []);\n\n  useEffect(() => {\n    idManager.subscribe((ids: string[]) => {\n      setControlContextData?.({\n        itemIds: ids,\n      });\n    });\n  }, []);\n\n  const classNameProp = useCallback(\n    ({\n      isDisabled: isDisabled2,\n      isFocusVisible,\n      isFocused,\n    }: SelectRenderProps) => {\n      plasmicUpdateVariant?.({\n        disabled: isDisabled2,\n        focused: isFocused,\n        focusVisible: isFocusVisible,\n      });\n      return className ?? \"\";\n    },\n    [className, plasmicUpdateVariant]\n  );\n\n  return (\n    <Select\n      defaultSelectedKey={defaultSelectedKey}\n      selectedKey={selectedKey}\n      onSelectionChange={onSelectionChange}\n      onOpenChange={onOpenChange}\n      isDisabled={isDisabled}\n      className={classNameProp}\n      style={COMMON_STYLES}\n      name={name}\n      disabledKeys={disabledKeys}\n      aria-label={ariaLabel}\n      {...extractPlasmicDataProps(props)}\n    >\n      <SelectAutoOpen {...props} />\n      <PlasmicPopoverTriggerContext.Provider value={true}>\n        <PlasmicListBoxContext.Provider\n          value={{\n            idManager,\n          }}\n        >\n          {children}\n        </PlasmicListBoxContext.Provider>\n      </PlasmicPopoverTriggerContext.Provider>\n    </Select>\n  );\n}\n\nexport function registerSelect(loader?: Registerable) {\n  const selectValueMeta = registerComponentHelper(loader, BaseSelectValue, {\n    name: makeComponentName(\"select-value\"),\n    displayName: \"Aria Selected Value\",\n    importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n    importName: \"BaseSelectValue\",\n    parentComponentName: SELECT_NAME,\n    props: {\n      /** @deprecated use children (Placeholder) directly */\n      customize: {\n        type: \"boolean\",\n        displayName: \"Customize placeholder\",\n        defaultValue: true,\n        description: \"Customize the placeholder text and styles\",\n        /** Obsolete, but retained (permanently hidden) for backward compatibility.  */\n        hidden: () => true,\n      },\n      children: {\n        type: \"slot\",\n        displayName: \"Placeholder\",\n        defaultValue: [\n          {\n            type: \"text\",\n            value: \"Select an item\",\n          },\n        ],\n      },\n    },\n    trapsFocus: true,\n  });\n\n  registerComponentHelper(loader, BaseSelect, {\n    name: SELECT_NAME,\n    displayName: \"Aria Select\",\n    importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n    importName: \"BaseSelect\",\n    variants: SELECT_VARIANTS_DATA,\n    props: {\n      ...getCommonProps<BaseSelectProps>(\"Select\", [\n        \"name\",\n        \"aria-label\",\n        \"isDisabled\",\n        \"autoFocus\",\n      ]),\n      selectedKey: {\n        type: \"choice\",\n        editOnly: true,\n        uncontrolledProp: \"defaultSelectedKey\",\n        displayName: \"Initial selected item\",\n        options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n        // React Aria Select do not support multiple selections yet\n        multiSelect: false,\n      },\n      onSelectionChange: {\n        type: \"eventHandler\",\n        argTypes: [{ name: \"selectedValue\", type: \"string\" }],\n      },\n      disabledKeys: {\n        type: \"choice\",\n        displayName: \"Disabled values\",\n        description:\n          \"The items that are disabled. These items cannot be selected, focused, or otherwise interacted with.\",\n        options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n        multiSelect: true,\n        advanced: true,\n      },\n      isOpen: {\n        type: \"boolean\",\n        defaultValue: false,\n        // It doesn't make sense to make isOpen prop editable (it's controlled by user interaction and always closed by default), so we keep this prop hidden. We have listed the prop here in the meta only so we can expose a writeable state for it.\n        hidden: () => true,\n      },\n      onOpenChange: {\n        type: \"eventHandler\",\n        argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n      },\n      children: {\n        type: \"slot\",\n        mergeWithParent: true,\n        defaultValue: [\n          {\n            type: \"vbox\",\n            styles: {\n              justifyContent: \"flex-start\",\n              alignItems: \"flex-start\",\n              width: \"300px\",\n              padding: 0,\n            },\n            children: [\n              {\n                type: \"component\",\n                name: LABEL_COMPONENT_NAME,\n                props: {\n                  children: {\n                    type: \"text\",\n                    value: \"Label\",\n                  },\n                },\n              },\n              {\n                type: \"component\",\n                name: BUTTON_COMPONENT_NAME,\n                styles: {\n                  width: \"100%\",\n                  padding: \"4px 10px\",\n                  background: \"white\",\n                },\n                props: {\n                  children: {\n                    type: \"hbox\",\n                    styles: {\n                      width: \"stretch\",\n                      justifyContent: \"space-between\",\n                      alignItems: \"center\",\n                      padding: 0,\n                    },\n                    children: [\n                      {\n                        type: \"component\",\n                        name: selectValueMeta.name,\n                      },\n                      arrowDown,\n                    ],\n                  },\n                },\n              },\n              {\n                type: \"component\",\n                name: POPOVER_COMPONENT_NAME,\n                styles: {\n                  backgroundColor: \"white\",\n                  padding: \"10px\",\n                  overflow: \"scroll\",\n                  width: \"unset\",\n                },\n                props: {\n                  children: [\n                    {\n                      type: \"component\",\n                      name: LIST_BOX_COMPONENT_NAME,\n                      props: {\n                        selectionMode: \"single\",\n                      },\n                      styles: {\n                        borderWidth: 0,\n                        width: \"stretch\",\n                      },\n                    },\n                  ],\n                },\n              },\n            ],\n          },\n        ],\n      },\n    },\n    states: {\n      selectedValue: {\n        type: \"writable\",\n        valueProp: \"selectedKey\",\n        onChangeProp: \"onSelectionChange\",\n        variableType: \"text\",\n      },\n      isOpen: {\n        type: \"writable\",\n        valueProp: \"isOpen\",\n        onChangeProp: \"onOpenChange\",\n        variableType: \"boolean\",\n      },\n    },\n    trapsFocus: true,\n  });\n}\n"],"names":["_a"],"mappings":"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"}

package/skinny/registerSelect.stories.cjs.js

@@ -93,6 +93,43 @@ const Basic = {
     test.expect(args.onSelectionChange).toHaveBeenCalledOnce();
   }
 };
+const WithDefaultSelection = {
+  args: {
+    defaultSelectedKey: "3",
+    children: /* @__PURE__ */ React__default.default.createElement(BoilerplateSelect, null, createListItems(3).map((item) => /* @__PURE__ */ React__default.default.createElement(registerListBoxItem.BaseListBoxItem, { textValue: item.textValue, id: item.id }, item.children)))
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = test.within(canvasElement);
+    const doc = test.within(document.body);
+    const button = canvas.getByRole("button");
+    test.expect(doc.queryByRole("listbox")).not.toBeInTheDocument();
+    await test.waitFor(() => test.expect(button).toHaveTextContent("Item 3"));
+    await test.userEvent.click(button);
+    const options = test.within(doc.getByRole("listbox")).getAllByRole("option");
+    await test.userEvent.click(options[1]);
+    test.expect(button).toHaveTextContent("Item 2");
+  }
+};
+const Disabled = {
+  args: {
+    defaultSelectedKey: "3",
+    isDisabled: true,
+    children: /* @__PURE__ */ React__default.default.createElement(BoilerplateSelect, null, createListItems(3).map((item) => /* @__PURE__ */ React__default.default.createElement(registerListBoxItem.BaseListBoxItem, { textValue: item.textValue, id: item.id }, item.children)))
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = test.within(canvasElement);
+    const doc = test.within(document.body);
+    const button = canvas.getByRole("button");
+    test.expect(button).toBeDisabled();
+    await test.userEvent.tab();
+    await test.waitFor(() => test.expect(button).toHaveTextContent("Item 3"));
+    await test.userEvent.click(button);
+    test.expect(doc.queryByRole("listbox")).not.toBeInTheDocument();
+    test.expect(button).toHaveTextContent("Item 3");
+    test.expect(args.onOpenChange).not.toHaveBeenCalled();
+    test.expect(args.onSelectionChange).not.toHaveBeenCalled();
+  }
+};
 const WithDisabledOptions = {
   args: {
     disabledKeys: ["1"],
@@ -170,7 +207,9 @@ const SelectedInCanvas = {
 };
 
 exports.Basic = Basic;
+exports.Disabled = Disabled;
 exports.SelectedInCanvas = SelectedInCanvas;
+exports.WithDefaultSelection = WithDefaultSelection;
 exports.WithDisabledOptions = WithDisabledOptions;
 exports.default = meta;
 //# sourceMappingURL=registerSelect.stories.cjs.js.map

package/skinny/registerSelect.stories.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerSelect.stories.cjs.js","sources":["../src/registerSelect.stories.tsx"],"sourcesContent":["import { PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, fn, userEvent, waitFor, within } from \"@storybook/test\";\nimport React, { useEffect, useState } from \"react\";\nimport { BaseButton } from \"./registerButton\";\nimport { BaseListBox } from \"./registerListBox\";\nimport { BaseListBoxItem } from \"./registerListBoxItem\";\nimport { BasePopover } from \"./registerPopover\";\nimport { BaseSelect, BaseSelectValue } from \"./registerSelect\";\n\nconst meta: Meta<typeof BaseSelect> = {\n  title: \"Components/BaseSelect\",\n  component: BaseSelect,\n  args: {\n    onSelectionChange: fn(),\n    onOpenChange: fn(),\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BaseSelect>;\n\n// Helper function to create list items\nconst createListItems = (count: number) => {\n  return Array.from({ length: count }, (_, i) => ({\n    id: `${i + 1}`,\n    textValue: `Item ${i + 1}`,\n    children: `Item ${i + 1}`,\n  }));\n};\n\nconst BoilerplateSelect = ({ children }: { children: React.ReactNode }) => (\n  <>\n    <BaseButton>\n      <BaseSelectValue>Select an option ▼</BaseSelectValue>\n    </BaseButton>\n    <BasePopover>\n      <BaseListBox>{children}</BaseListBox>\n    </BasePopover>\n  </>\n);\n\nexport const Basic: Story = {\n  args: {\n    children: (\n      <BoilerplateSelect>\n        {createListItems(3).map((item) => (\n          <BaseListBoxItem textValue={item.textValue} id={item.id}>\n            {item.children}\n          </BaseListBoxItem>\n        ))}\n      </BoilerplateSelect>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    // popovers are rendered outside canvas, so we need to use document.body\n    const doc = within(document.body);\n\n    // Get the button and input\n    const button = canvas.getByRole(\"button\");\n\n    // Check that listbox is not in the document\n    expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n    expect(button).toHaveTextContent(\"Select an option ▼\");\n\n    // Open the select\n    await userEvent.click(button);\n\n    // Ensure that clicking the button shows all available options, regardless of the input value\n    const options = await within(doc.getByRole(\"listbox\")).findAllByRole(\n      \"option\"\n    );\n    expect(options).toHaveLength(3);\n\n    // Select an option\n    await userEvent.click(options[1]);\n    // Check that the input value is updated\n    expect(button).toHaveTextContent(\"Item 2\");\n\n    // Check that listbox is not in the document\n    expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n\n    // Check that the onOpenChange and onSelectionChange are called as expected\n    expect(args.onOpenChange).toHaveBeenCalledTimes(2);\n    expect(args.onSelectionChange).toHaveBeenCalledOnce();\n  },\n};\n\n// TODO: Currently, the BaseSelect does not pass defaultSelectedKey prop to <Select>, causing the below tests to fail.\n// Uncomment the test below in the PR that fixes the issue\n// export const WithDefaultSelection: Story = {\n//   args: {\n//     defaultSelectedKey: \"3\",\n//     children: (\n//       <BoilerplateSelect>\n//         {createListItems(3).map((item) => (\n//           <BaseListBoxItem textValue={item.textValue} id={item.id}>\n//             {item.children}\n//           </BaseListBoxItem>\n//         ))}\n//       </BoilerplateSelect>\n//     ),\n//   },\n//   play: async ({ canvasElement }) => {\n//     const canvas = within(canvasElement);\n//     // popovers are rendered outside canvas, so we need to use document.body\n//     const doc = within(document.body);\n\n//     // Get the button and input\n//     const button = canvas.getByRole(\"button\");\n\n//     // Check that listbox is not in the document\n//     expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n\n//     await waitFor(() => expect(button).toHaveTextContent(\"Item 3\")); // via defaultSelectedKey\n\n//     // Open the select\n//     await userEvent.click(button);\n\n//     const options = within(doc.getByRole(\"listbox\")).getAllByRole(\"option\");\n//     await userEvent.click(options[1]);\n\n//     expect(button).toHaveTextContent(\"Item 2\");\n//   },\n// };\n\n// export const Disabled: Story = {\n//   args: {\n//     defaultSelectedKey: \"3\",\n//     isDisabled: true,\n//     children: (\n//       <BoilerplateSelect>\n//         {createListItems(3).map((item) => (\n//           <BaseListBoxItem textValue={item.textValue} id={item.id}>\n//             {item.children}\n//           </BaseListBoxItem>\n//         ))}\n//       </BoilerplateSelect>\n//     ),\n//   },\n//   play: async ({ canvasElement, args }) => {\n//     const canvas = within(canvasElement);\n//     // popovers are rendered outside canvas, so we need to use document.body\n//     const doc = within(document.body);\n\n//     // Get the button and input\n//     const button = canvas.getByRole(\"button\");\n\n//     // Verify disabled state\n//     expect(button).toBeDisabled();\n\n//     await userEvent.tab(); // NOTE: I'm not sure why, but without this, the test is very flaky at the next line.\n//     await waitFor(() => expect(button).toHaveTextContent(\"Item 3\")); // via defaultSelectedKey\n\n//     // Open the select\n//     await userEvent.click(button);\n\n//     // Check that listbox is not in the document\n//     expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n\n//     expect(button).toHaveTextContent(\"Item 3\"); // unchanged\n\n//     expect(args.onOpenChange).not.toHaveBeenCalled();\n//     expect(args.onSelectionChange).not.toHaveBeenCalled();\n//   },\n// };\n\nexport const WithDisabledOptions: Story = {\n  args: {\n    disabledKeys: [\"1\"],\n    children: (\n      <BoilerplateSelect>\n        {createListItems(3).map((item) => (\n          <BaseListBoxItem textValue={item.textValue} id={item.id}>\n            {item.children}\n          </BaseListBoxItem>\n        ))}\n      </BoilerplateSelect>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    // popovers are rendered outside canvas, so we need to use document.body\n    const doc = within(document.body);\n\n    // Get the button and input\n    const button = canvas.getByRole(\"button\");\n\n    expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n    expect(button).toHaveTextContent(\"Select an option ▼\");\n\n    // Open the select\n    await userEvent.click(button);\n    expect(args.onOpenChange).toHaveBeenCalledOnce();\n\n    // Ensure that clicking the button shows all available options, regardless of the input value\n    const listbox = await doc.findByRole(\"listbox\");\n    const options = await within(listbox).findAllByRole(\"option\");\n    expect(options).toHaveLength(3);\n\n    // click the disabled option\n    await userEvent.click(options[0]);\n    expect(args.onOpenChange).toHaveBeenCalledOnce(); // the popover does not close when selecting a disabled option\n    expect(args.onSelectionChange).not.toHaveBeenCalled(); // the select state does not change when selecting a disabled option\n    expect(button).toHaveTextContent(\"Select an option ▼\"); // unchanged\n\n    await userEvent.click(options[1]); // Other items stay selectable\n    expect(args.onOpenChange).toHaveBeenCalledTimes(2);\n    expect(args.onSelectionChange).toHaveBeenCalledOnce();\n\n    expect(button).toHaveTextContent(\"Item 2\");\n  },\n};\n\nexport const SelectedInCanvas: Story = {\n  args: {\n    children: (\n      <BoilerplateSelect>\n        {createListItems(3).map((item) => (\n          <BaseListBoxItem textValue={item.textValue} id={item.id}>\n            {item.children}\n          </BaseListBoxItem>\n        ))}\n      </BoilerplateSelect>\n    ),\n  },\n  render: ({ __plasmic_selection_prop__, ...args }) => {\n    const [selected, setSelected] = useState(false);\n    useEffect(() => {\n      setTimeout(() => {\n        setSelected(true);\n      }, 1000);\n    }, []);\n\n    return (\n      // Simulate Plasmic canvas envirnment\n      <PlasmicCanvasContext.Provider\n        value={{\n          componentName: \"test\",\n          globalVariants: {},\n        }}\n      >\n        <BaseSelect\n          // Simulate node selection in Plasmic canvas\n          __plasmic_selection_prop__={{\n            isSelected: selected,\n          }}\n          {...args}\n        />\n      </PlasmicCanvasContext.Provider>\n    );\n  },\n  play: async () => {\n    // popovers are rendered outside canvas, so we need to use document.body\n    const doc = within(document.body);\n\n    await waitFor(\n      () => {\n        expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n      },\n      { timeout: 100 }\n    );\n\n    await waitFor(\n      () => {\n        expect(doc.queryByRole(\"listbox\")).toBeInTheDocument();\n      },\n      { timeout: 1100 }\n    );\n  },\n};\n"],"names":["BaseSelect","fn","React","BaseButton","BaseSelectValue","BasePopover","BaseListBox","BaseListBoxItem","within","expect","userEvent","useState","useEffect","PlasmicCanvasContext","waitFor"],"mappings":"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"}
+{"version":3,"file":"registerSelect.stories.cjs.js","sources":["../src/registerSelect.stories.tsx"],"sourcesContent":["import { PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, fn, userEvent, waitFor, within } from \"@storybook/test\";\nimport React, { useEffect, useState } from \"react\";\nimport { BaseButton } from \"./registerButton\";\nimport { BaseListBox } from \"./registerListBox\";\nimport { BaseListBoxItem } from \"./registerListBoxItem\";\nimport { BasePopover } from \"./registerPopover\";\nimport { BaseSelect, BaseSelectValue } from \"./registerSelect\";\n\nconst meta: Meta<typeof BaseSelect> = {\n  title: \"Components/BaseSelect\",\n  component: BaseSelect,\n  args: {\n    onSelectionChange: fn(),\n    onOpenChange: fn(),\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BaseSelect>;\n\n// Helper function to create list items\nconst createListItems = (count: number) => {\n  return Array.from({ length: count }, (_, i) => ({\n    id: `${i + 1}`,\n    textValue: `Item ${i + 1}`,\n    children: `Item ${i + 1}`,\n  }));\n};\n\nconst BoilerplateSelect = ({ children }: { children: React.ReactNode }) => (\n  <>\n    <BaseButton>\n      <BaseSelectValue>Select an option ▼</BaseSelectValue>\n    </BaseButton>\n    <BasePopover>\n      <BaseListBox>{children}</BaseListBox>\n    </BasePopover>\n  </>\n);\n\nexport const Basic: Story = {\n  args: {\n    children: (\n      <BoilerplateSelect>\n        {createListItems(3).map((item) => (\n          <BaseListBoxItem textValue={item.textValue} id={item.id}>\n            {item.children}\n          </BaseListBoxItem>\n        ))}\n      </BoilerplateSelect>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    // popovers are rendered outside canvas, so we need to use document.body\n    const doc = within(document.body);\n\n    // Get the button and input\n    const button = canvas.getByRole(\"button\");\n\n    // Check that listbox is not in the document\n    expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n    expect(button).toHaveTextContent(\"Select an option ▼\");\n\n    // Open the select\n    await userEvent.click(button);\n\n    // Ensure that clicking the button shows all available options, regardless of the input value\n    const options = await within(doc.getByRole(\"listbox\")).findAllByRole(\n      \"option\"\n    );\n    expect(options).toHaveLength(3);\n\n    // Select an option\n    await userEvent.click(options[1]);\n    // Check that the input value is updated\n    expect(button).toHaveTextContent(\"Item 2\");\n\n    // Check that listbox is not in the document\n    expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n\n    // Check that the onOpenChange and onSelectionChange are called as expected\n    expect(args.onOpenChange).toHaveBeenCalledTimes(2);\n    expect(args.onSelectionChange).toHaveBeenCalledOnce();\n  },\n};\n\nexport const WithDefaultSelection: Story = {\n  args: {\n    defaultSelectedKey: \"3\",\n    children: (\n      <BoilerplateSelect>\n        {createListItems(3).map((item) => (\n          <BaseListBoxItem textValue={item.textValue} id={item.id}>\n            {item.children}\n          </BaseListBoxItem>\n        ))}\n      </BoilerplateSelect>\n    ),\n  },\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    // popovers are rendered outside canvas, so we need to use document.body\n    const doc = within(document.body);\n\n    // Get the button and input\n    const button = canvas.getByRole(\"button\");\n\n    // Check that listbox is not in the document\n    expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n\n    await waitFor(() => expect(button).toHaveTextContent(\"Item 3\")); // via defaultSelectedKey\n\n    // Open the select\n    await userEvent.click(button);\n\n    const options = within(doc.getByRole(\"listbox\")).getAllByRole(\"option\");\n    await userEvent.click(options[1]);\n\n    expect(button).toHaveTextContent(\"Item 2\");\n  },\n};\n\nexport const Disabled: Story = {\n  args: {\n    defaultSelectedKey: \"3\",\n    isDisabled: true,\n    children: (\n      <BoilerplateSelect>\n        {createListItems(3).map((item) => (\n          <BaseListBoxItem textValue={item.textValue} id={item.id}>\n            {item.children}\n          </BaseListBoxItem>\n        ))}\n      </BoilerplateSelect>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    // popovers are rendered outside canvas, so we need to use document.body\n    const doc = within(document.body);\n\n    // Get the button and input\n    const button = canvas.getByRole(\"button\");\n\n    // Verify disabled state\n    expect(button).toBeDisabled();\n\n    await userEvent.tab(); // NOTE: I'm not sure why, but without this, the test is very flaky at the next line.\n    await waitFor(() => expect(button).toHaveTextContent(\"Item 3\")); // via defaultSelectedKey\n\n    // Open the select\n    await userEvent.click(button);\n\n    // Check that listbox is not in the document\n    expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n\n    expect(button).toHaveTextContent(\"Item 3\"); // unchanged\n\n    expect(args.onOpenChange).not.toHaveBeenCalled();\n    expect(args.onSelectionChange).not.toHaveBeenCalled();\n  },\n};\n\nexport const WithDisabledOptions: Story = {\n  args: {\n    disabledKeys: [\"1\"],\n    children: (\n      <BoilerplateSelect>\n        {createListItems(3).map((item) => (\n          <BaseListBoxItem textValue={item.textValue} id={item.id}>\n            {item.children}\n          </BaseListBoxItem>\n        ))}\n      </BoilerplateSelect>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    // popovers are rendered outside canvas, so we need to use document.body\n    const doc = within(document.body);\n\n    // Get the button and input\n    const button = canvas.getByRole(\"button\");\n\n    expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n    expect(button).toHaveTextContent(\"Select an option ▼\");\n\n    // Open the select\n    await userEvent.click(button);\n    expect(args.onOpenChange).toHaveBeenCalledOnce();\n\n    // Ensure that clicking the button shows all available options, regardless of the input value\n    const listbox = await doc.findByRole(\"listbox\");\n    const options = await within(listbox).findAllByRole(\"option\");\n    expect(options).toHaveLength(3);\n\n    // click the disabled option\n    await userEvent.click(options[0]);\n    expect(args.onOpenChange).toHaveBeenCalledOnce(); // the popover does not close when selecting a disabled option\n    expect(args.onSelectionChange).not.toHaveBeenCalled(); // the select state does not change when selecting a disabled option\n    expect(button).toHaveTextContent(\"Select an option ▼\"); // unchanged\n\n    await userEvent.click(options[1]); // Other items stay selectable\n    expect(args.onOpenChange).toHaveBeenCalledTimes(2);\n    expect(args.onSelectionChange).toHaveBeenCalledOnce();\n\n    expect(button).toHaveTextContent(\"Item 2\");\n  },\n};\n\nexport const SelectedInCanvas: Story = {\n  args: {\n    children: (\n      <BoilerplateSelect>\n        {createListItems(3).map((item) => (\n          <BaseListBoxItem textValue={item.textValue} id={item.id}>\n            {item.children}\n          </BaseListBoxItem>\n        ))}\n      </BoilerplateSelect>\n    ),\n  },\n  render: ({ __plasmic_selection_prop__, ...args }) => {\n    const [selected, setSelected] = useState(false);\n    useEffect(() => {\n      setTimeout(() => {\n        setSelected(true);\n      }, 1000);\n    }, []);\n\n    return (\n      // Simulate Plasmic canvas envirnment\n      <PlasmicCanvasContext.Provider\n        value={{\n          componentName: \"test\",\n          globalVariants: {},\n        }}\n      >\n        <BaseSelect\n          // Simulate node selection in Plasmic canvas\n          __plasmic_selection_prop__={{\n            isSelected: selected,\n          }}\n          {...args}\n        />\n      </PlasmicCanvasContext.Provider>\n    );\n  },\n  play: async () => {\n    // popovers are rendered outside canvas, so we need to use document.body\n    const doc = within(document.body);\n\n    await waitFor(\n      () => {\n        expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n      },\n      { timeout: 100 }\n    );\n\n    await waitFor(\n      () => {\n        expect(doc.queryByRole(\"listbox\")).toBeInTheDocument();\n      },\n      { timeout: 1100 }\n    );\n  },\n};\n"],"names":["BaseSelect","fn","React","BaseButton","BaseSelectValue","BasePopover","BaseListBox","BaseListBoxItem","within","expect","userEvent","waitFor","useState","useEffect","PlasmicCanvasContext"],"mappings":"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"}

package/skinny/registerSelect.stories.esm.js

@@ -85,6 +85,43 @@ const Basic = {
     expect(args.onSelectionChange).toHaveBeenCalledOnce();
   }
 };
+const WithDefaultSelection = {
+  args: {
+    defaultSelectedKey: "3",
+    children: /* @__PURE__ */ React.createElement(BoilerplateSelect, null, createListItems(3).map((item) => /* @__PURE__ */ React.createElement(BaseListBoxItem, { textValue: item.textValue, id: item.id }, item.children)))
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const doc = within(document.body);
+    const button = canvas.getByRole("button");
+    expect(doc.queryByRole("listbox")).not.toBeInTheDocument();
+    await waitFor(() => expect(button).toHaveTextContent("Item 3"));
+    await userEvent.click(button);
+    const options = within(doc.getByRole("listbox")).getAllByRole("option");
+    await userEvent.click(options[1]);
+    expect(button).toHaveTextContent("Item 2");
+  }
+};
+const Disabled = {
+  args: {
+    defaultSelectedKey: "3",
+    isDisabled: true,
+    children: /* @__PURE__ */ React.createElement(BoilerplateSelect, null, createListItems(3).map((item) => /* @__PURE__ */ React.createElement(BaseListBoxItem, { textValue: item.textValue, id: item.id }, item.children)))
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const doc = within(document.body);
+    const button = canvas.getByRole("button");
+    expect(button).toBeDisabled();
+    await userEvent.tab();
+    await waitFor(() => expect(button).toHaveTextContent("Item 3"));
+    await userEvent.click(button);
+    expect(doc.queryByRole("listbox")).not.toBeInTheDocument();
+    expect(button).toHaveTextContent("Item 3");
+    expect(args.onOpenChange).not.toHaveBeenCalled();
+    expect(args.onSelectionChange).not.toHaveBeenCalled();
+  }
+};
 const WithDisabledOptions = {
   args: {
     disabledKeys: ["1"],
@@ -161,5 +198,5 @@ const SelectedInCanvas = {
   }
 };
 
-export { Basic, SelectedInCanvas, WithDisabledOptions, meta as default };
+export { Basic, Disabled, SelectedInCanvas, WithDefaultSelection, WithDisabledOptions, meta as default };
 //# sourceMappingURL=registerSelect.stories.esm.js.map

package/skinny/registerSelect.stories.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerSelect.stories.esm.js","sources":["../src/registerSelect.stories.tsx"],"sourcesContent":["import { PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, fn, userEvent, waitFor, within } from \"@storybook/test\";\nimport React, { useEffect, useState } from \"react\";\nimport { BaseButton } from \"./registerButton\";\nimport { BaseListBox } from \"./registerListBox\";\nimport { BaseListBoxItem } from \"./registerListBoxItem\";\nimport { BasePopover } from \"./registerPopover\";\nimport { BaseSelect, BaseSelectValue } from \"./registerSelect\";\n\nconst meta: Meta<typeof BaseSelect> = {\n  title: \"Components/BaseSelect\",\n  component: BaseSelect,\n  args: {\n    onSelectionChange: fn(),\n    onOpenChange: fn(),\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BaseSelect>;\n\n// Helper function to create list items\nconst createListItems = (count: number) => {\n  return Array.from({ length: count }, (_, i) => ({\n    id: `${i + 1}`,\n    textValue: `Item ${i + 1}`,\n    children: `Item ${i + 1}`,\n  }));\n};\n\nconst BoilerplateSelect = ({ children }: { children: React.ReactNode }) => (\n  <>\n    <BaseButton>\n      <BaseSelectValue>Select an option ▼</BaseSelectValue>\n    </BaseButton>\n    <BasePopover>\n      <BaseListBox>{children}</BaseListBox>\n    </BasePopover>\n  </>\n);\n\nexport const Basic: Story = {\n  args: {\n    children: (\n      <BoilerplateSelect>\n        {createListItems(3).map((item) => (\n          <BaseListBoxItem textValue={item.textValue} id={item.id}>\n            {item.children}\n          </BaseListBoxItem>\n        ))}\n      </BoilerplateSelect>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    // popovers are rendered outside canvas, so we need to use document.body\n    const doc = within(document.body);\n\n    // Get the button and input\n    const button = canvas.getByRole(\"button\");\n\n    // Check that listbox is not in the document\n    expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n    expect(button).toHaveTextContent(\"Select an option ▼\");\n\n    // Open the select\n    await userEvent.click(button);\n\n    // Ensure that clicking the button shows all available options, regardless of the input value\n    const options = await within(doc.getByRole(\"listbox\")).findAllByRole(\n      \"option\"\n    );\n    expect(options).toHaveLength(3);\n\n    // Select an option\n    await userEvent.click(options[1]);\n    // Check that the input value is updated\n    expect(button).toHaveTextContent(\"Item 2\");\n\n    // Check that listbox is not in the document\n    expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n\n    // Check that the onOpenChange and onSelectionChange are called as expected\n    expect(args.onOpenChange).toHaveBeenCalledTimes(2);\n    expect(args.onSelectionChange).toHaveBeenCalledOnce();\n  },\n};\n\n// TODO: Currently, the BaseSelect does not pass defaultSelectedKey prop to <Select>, causing the below tests to fail.\n// Uncomment the test below in the PR that fixes the issue\n// export const WithDefaultSelection: Story = {\n//   args: {\n//     defaultSelectedKey: \"3\",\n//     children: (\n//       <BoilerplateSelect>\n//         {createListItems(3).map((item) => (\n//           <BaseListBoxItem textValue={item.textValue} id={item.id}>\n//             {item.children}\n//           </BaseListBoxItem>\n//         ))}\n//       </BoilerplateSelect>\n//     ),\n//   },\n//   play: async ({ canvasElement }) => {\n//     const canvas = within(canvasElement);\n//     // popovers are rendered outside canvas, so we need to use document.body\n//     const doc = within(document.body);\n\n//     // Get the button and input\n//     const button = canvas.getByRole(\"button\");\n\n//     // Check that listbox is not in the document\n//     expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n\n//     await waitFor(() => expect(button).toHaveTextContent(\"Item 3\")); // via defaultSelectedKey\n\n//     // Open the select\n//     await userEvent.click(button);\n\n//     const options = within(doc.getByRole(\"listbox\")).getAllByRole(\"option\");\n//     await userEvent.click(options[1]);\n\n//     expect(button).toHaveTextContent(\"Item 2\");\n//   },\n// };\n\n// export const Disabled: Story = {\n//   args: {\n//     defaultSelectedKey: \"3\",\n//     isDisabled: true,\n//     children: (\n//       <BoilerplateSelect>\n//         {createListItems(3).map((item) => (\n//           <BaseListBoxItem textValue={item.textValue} id={item.id}>\n//             {item.children}\n//           </BaseListBoxItem>\n//         ))}\n//       </BoilerplateSelect>\n//     ),\n//   },\n//   play: async ({ canvasElement, args }) => {\n//     const canvas = within(canvasElement);\n//     // popovers are rendered outside canvas, so we need to use document.body\n//     const doc = within(document.body);\n\n//     // Get the button and input\n//     const button = canvas.getByRole(\"button\");\n\n//     // Verify disabled state\n//     expect(button).toBeDisabled();\n\n//     await userEvent.tab(); // NOTE: I'm not sure why, but without this, the test is very flaky at the next line.\n//     await waitFor(() => expect(button).toHaveTextContent(\"Item 3\")); // via defaultSelectedKey\n\n//     // Open the select\n//     await userEvent.click(button);\n\n//     // Check that listbox is not in the document\n//     expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n\n//     expect(button).toHaveTextContent(\"Item 3\"); // unchanged\n\n//     expect(args.onOpenChange).not.toHaveBeenCalled();\n//     expect(args.onSelectionChange).not.toHaveBeenCalled();\n//   },\n// };\n\nexport const WithDisabledOptions: Story = {\n  args: {\n    disabledKeys: [\"1\"],\n    children: (\n      <BoilerplateSelect>\n        {createListItems(3).map((item) => (\n          <BaseListBoxItem textValue={item.textValue} id={item.id}>\n            {item.children}\n          </BaseListBoxItem>\n        ))}\n      </BoilerplateSelect>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    // popovers are rendered outside canvas, so we need to use document.body\n    const doc = within(document.body);\n\n    // Get the button and input\n    const button = canvas.getByRole(\"button\");\n\n    expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n    expect(button).toHaveTextContent(\"Select an option ▼\");\n\n    // Open the select\n    await userEvent.click(button);\n    expect(args.onOpenChange).toHaveBeenCalledOnce();\n\n    // Ensure that clicking the button shows all available options, regardless of the input value\n    const listbox = await doc.findByRole(\"listbox\");\n    const options = await within(listbox).findAllByRole(\"option\");\n    expect(options).toHaveLength(3);\n\n    // click the disabled option\n    await userEvent.click(options[0]);\n    expect(args.onOpenChange).toHaveBeenCalledOnce(); // the popover does not close when selecting a disabled option\n    expect(args.onSelectionChange).not.toHaveBeenCalled(); // the select state does not change when selecting a disabled option\n    expect(button).toHaveTextContent(\"Select an option ▼\"); // unchanged\n\n    await userEvent.click(options[1]); // Other items stay selectable\n    expect(args.onOpenChange).toHaveBeenCalledTimes(2);\n    expect(args.onSelectionChange).toHaveBeenCalledOnce();\n\n    expect(button).toHaveTextContent(\"Item 2\");\n  },\n};\n\nexport const SelectedInCanvas: Story = {\n  args: {\n    children: (\n      <BoilerplateSelect>\n        {createListItems(3).map((item) => (\n          <BaseListBoxItem textValue={item.textValue} id={item.id}>\n            {item.children}\n          </BaseListBoxItem>\n        ))}\n      </BoilerplateSelect>\n    ),\n  },\n  render: ({ __plasmic_selection_prop__, ...args }) => {\n    const [selected, setSelected] = useState(false);\n    useEffect(() => {\n      setTimeout(() => {\n        setSelected(true);\n      }, 1000);\n    }, []);\n\n    return (\n      // Simulate Plasmic canvas envirnment\n      <PlasmicCanvasContext.Provider\n        value={{\n          componentName: \"test\",\n          globalVariants: {},\n        }}\n      >\n        <BaseSelect\n          // Simulate node selection in Plasmic canvas\n          __plasmic_selection_prop__={{\n            isSelected: selected,\n          }}\n          {...args}\n        />\n      </PlasmicCanvasContext.Provider>\n    );\n  },\n  play: async () => {\n    // popovers are rendered outside canvas, so we need to use document.body\n    const doc = within(document.body);\n\n    await waitFor(\n      () => {\n        expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n      },\n      { timeout: 100 }\n    );\n\n    await waitFor(\n      () => {\n        expect(doc.queryByRole(\"listbox\")).toBeInTheDocument();\n      },\n      { timeout: 1100 }\n    );\n  },\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"registerSelect.stories.esm.js","sources":["../src/registerSelect.stories.tsx"],"sourcesContent":["import { PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, fn, userEvent, waitFor, within } from \"@storybook/test\";\nimport React, { useEffect, useState } from \"react\";\nimport { BaseButton } from \"./registerButton\";\nimport { BaseListBox } from \"./registerListBox\";\nimport { BaseListBoxItem } from \"./registerListBoxItem\";\nimport { BasePopover } from \"./registerPopover\";\nimport { BaseSelect, BaseSelectValue } from \"./registerSelect\";\n\nconst meta: Meta<typeof BaseSelect> = {\n  title: \"Components/BaseSelect\",\n  component: BaseSelect,\n  args: {\n    onSelectionChange: fn(),\n    onOpenChange: fn(),\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BaseSelect>;\n\n// Helper function to create list items\nconst createListItems = (count: number) => {\n  return Array.from({ length: count }, (_, i) => ({\n    id: `${i + 1}`,\n    textValue: `Item ${i + 1}`,\n    children: `Item ${i + 1}`,\n  }));\n};\n\nconst BoilerplateSelect = ({ children }: { children: React.ReactNode }) => (\n  <>\n    <BaseButton>\n      <BaseSelectValue>Select an option ▼</BaseSelectValue>\n    </BaseButton>\n    <BasePopover>\n      <BaseListBox>{children}</BaseListBox>\n    </BasePopover>\n  </>\n);\n\nexport const Basic: Story = {\n  args: {\n    children: (\n      <BoilerplateSelect>\n        {createListItems(3).map((item) => (\n          <BaseListBoxItem textValue={item.textValue} id={item.id}>\n            {item.children}\n          </BaseListBoxItem>\n        ))}\n      </BoilerplateSelect>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    // popovers are rendered outside canvas, so we need to use document.body\n    const doc = within(document.body);\n\n    // Get the button and input\n    const button = canvas.getByRole(\"button\");\n\n    // Check that listbox is not in the document\n    expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n    expect(button).toHaveTextContent(\"Select an option ▼\");\n\n    // Open the select\n    await userEvent.click(button);\n\n    // Ensure that clicking the button shows all available options, regardless of the input value\n    const options = await within(doc.getByRole(\"listbox\")).findAllByRole(\n      \"option\"\n    );\n    expect(options).toHaveLength(3);\n\n    // Select an option\n    await userEvent.click(options[1]);\n    // Check that the input value is updated\n    expect(button).toHaveTextContent(\"Item 2\");\n\n    // Check that listbox is not in the document\n    expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n\n    // Check that the onOpenChange and onSelectionChange are called as expected\n    expect(args.onOpenChange).toHaveBeenCalledTimes(2);\n    expect(args.onSelectionChange).toHaveBeenCalledOnce();\n  },\n};\n\nexport const WithDefaultSelection: Story = {\n  args: {\n    defaultSelectedKey: \"3\",\n    children: (\n      <BoilerplateSelect>\n        {createListItems(3).map((item) => (\n          <BaseListBoxItem textValue={item.textValue} id={item.id}>\n            {item.children}\n          </BaseListBoxItem>\n        ))}\n      </BoilerplateSelect>\n    ),\n  },\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    // popovers are rendered outside canvas, so we need to use document.body\n    const doc = within(document.body);\n\n    // Get the button and input\n    const button = canvas.getByRole(\"button\");\n\n    // Check that listbox is not in the document\n    expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n\n    await waitFor(() => expect(button).toHaveTextContent(\"Item 3\")); // via defaultSelectedKey\n\n    // Open the select\n    await userEvent.click(button);\n\n    const options = within(doc.getByRole(\"listbox\")).getAllByRole(\"option\");\n    await userEvent.click(options[1]);\n\n    expect(button).toHaveTextContent(\"Item 2\");\n  },\n};\n\nexport const Disabled: Story = {\n  args: {\n    defaultSelectedKey: \"3\",\n    isDisabled: true,\n    children: (\n      <BoilerplateSelect>\n        {createListItems(3).map((item) => (\n          <BaseListBoxItem textValue={item.textValue} id={item.id}>\n            {item.children}\n          </BaseListBoxItem>\n        ))}\n      </BoilerplateSelect>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    // popovers are rendered outside canvas, so we need to use document.body\n    const doc = within(document.body);\n\n    // Get the button and input\n    const button = canvas.getByRole(\"button\");\n\n    // Verify disabled state\n    expect(button).toBeDisabled();\n\n    await userEvent.tab(); // NOTE: I'm not sure why, but without this, the test is very flaky at the next line.\n    await waitFor(() => expect(button).toHaveTextContent(\"Item 3\")); // via defaultSelectedKey\n\n    // Open the select\n    await userEvent.click(button);\n\n    // Check that listbox is not in the document\n    expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n\n    expect(button).toHaveTextContent(\"Item 3\"); // unchanged\n\n    expect(args.onOpenChange).not.toHaveBeenCalled();\n    expect(args.onSelectionChange).not.toHaveBeenCalled();\n  },\n};\n\nexport const WithDisabledOptions: Story = {\n  args: {\n    disabledKeys: [\"1\"],\n    children: (\n      <BoilerplateSelect>\n        {createListItems(3).map((item) => (\n          <BaseListBoxItem textValue={item.textValue} id={item.id}>\n            {item.children}\n          </BaseListBoxItem>\n        ))}\n      </BoilerplateSelect>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    // popovers are rendered outside canvas, so we need to use document.body\n    const doc = within(document.body);\n\n    // Get the button and input\n    const button = canvas.getByRole(\"button\");\n\n    expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n    expect(button).toHaveTextContent(\"Select an option ▼\");\n\n    // Open the select\n    await userEvent.click(button);\n    expect(args.onOpenChange).toHaveBeenCalledOnce();\n\n    // Ensure that clicking the button shows all available options, regardless of the input value\n    const listbox = await doc.findByRole(\"listbox\");\n    const options = await within(listbox).findAllByRole(\"option\");\n    expect(options).toHaveLength(3);\n\n    // click the disabled option\n    await userEvent.click(options[0]);\n    expect(args.onOpenChange).toHaveBeenCalledOnce(); // the popover does not close when selecting a disabled option\n    expect(args.onSelectionChange).not.toHaveBeenCalled(); // the select state does not change when selecting a disabled option\n    expect(button).toHaveTextContent(\"Select an option ▼\"); // unchanged\n\n    await userEvent.click(options[1]); // Other items stay selectable\n    expect(args.onOpenChange).toHaveBeenCalledTimes(2);\n    expect(args.onSelectionChange).toHaveBeenCalledOnce();\n\n    expect(button).toHaveTextContent(\"Item 2\");\n  },\n};\n\nexport const SelectedInCanvas: Story = {\n  args: {\n    children: (\n      <BoilerplateSelect>\n        {createListItems(3).map((item) => (\n          <BaseListBoxItem textValue={item.textValue} id={item.id}>\n            {item.children}\n          </BaseListBoxItem>\n        ))}\n      </BoilerplateSelect>\n    ),\n  },\n  render: ({ __plasmic_selection_prop__, ...args }) => {\n    const [selected, setSelected] = useState(false);\n    useEffect(() => {\n      setTimeout(() => {\n        setSelected(true);\n      }, 1000);\n    }, []);\n\n    return (\n      // Simulate Plasmic canvas envirnment\n      <PlasmicCanvasContext.Provider\n        value={{\n          componentName: \"test\",\n          globalVariants: {},\n        }}\n      >\n        <BaseSelect\n          // Simulate node selection in Plasmic canvas\n          __plasmic_selection_prop__={{\n            isSelected: selected,\n          }}\n          {...args}\n        />\n      </PlasmicCanvasContext.Provider>\n    );\n  },\n  play: async () => {\n    // popovers are rendered outside canvas, so we need to use document.body\n    const doc = within(document.body);\n\n    await waitFor(\n      () => {\n        expect(doc.queryByRole(\"listbox\")).not.toBeInTheDocument();\n      },\n      { timeout: 100 }\n    );\n\n    await waitFor(\n      () => {\n        expect(doc.queryByRole(\"listbox\")).toBeInTheDocument();\n      },\n      { timeout: 1100 }\n    );\n  },\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,IAAgC,GAAA;AAAA,EACpC,KAAO,EAAA,uBAAA;AAAA,EACP,SAAW,EAAA,UAAA;AAAA,EACX,IAAM,EAAA;AAAA,IACJ,mBAAmB,EAAG,EAAA;AAAA,IACtB,cAAc,EAAG,EAAA;AAAA,GACnB;AACF,EAAA;AAMA,MAAM,eAAA,GAAkB,CAAC,KAAkB,KAAA;AACzC,EAAO,OAAA,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,OAAS,EAAA,CAAC,GAAG,CAAO,MAAA;AAAA,IAC9C,EAAA,EAAI,GAAG,CAAI,GAAA,CAAA,CAAA,CAAA;AAAA,IACX,SAAA,EAAW,QAAQ,CAAI,GAAA,CAAA,CAAA,CAAA;AAAA,IACvB,QAAA,EAAU,QAAQ,CAAI,GAAA,CAAA,CAAA,CAAA;AAAA,GACtB,CAAA,CAAA,CAAA;AACJ,CAAA,CAAA;AAEA,MAAM,oBAAoB,CAAC,EAAE,UAC3B,qBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,UACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,uBAAgB,yBAAkB,CACrC,mBACC,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,sCACE,WAAa,EAAA,IAAA,EAAA,QAAS,CACzB,CACF,CAAA,CAAA;AAGK,MAAM,KAAe,GAAA;AAAA,EAC1B,IAAM,EAAA;AAAA,IACJ,QAAA,sCACG,iBACE,EAAA,IAAA,EAAA,eAAA,CAAgB,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,IACvB,qBAAA,KAAA,CAAA,aAAA,CAAC,mBAAgB,SAAW,EAAA,IAAA,CAAK,WAAW,EAAI,EAAA,IAAA,CAAK,MAClD,IAAK,CAAA,QACR,CACD,CACH,CAAA;AAAA,GAEJ;AAAA,EACA,IAAM,EAAA,OAAO,EAAE,aAAA,EAAe,MAAW,KAAA;AACvC,IAAM,MAAA,MAAA,GAAS,OAAO,aAAa,CAAA,CAAA;AAEnC,IAAM,MAAA,GAAA,GAAM,MAAO,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAGhC,IAAM,MAAA,MAAA,GAAS,MAAO,CAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AAGxC,IAAA,MAAA,CAAO,IAAI,WAAY,CAAA,SAAS,CAAC,CAAA,CAAE,IAAI,iBAAkB,EAAA,CAAA;AACzD,IAAO,MAAA,CAAA,MAAM,CAAE,CAAA,iBAAA,CAAkB,yBAAoB,CAAA,CAAA;AAGrD,IAAM,MAAA,SAAA,CAAU,MAAM,MAAM,CAAA,CAAA;AAG5B,IAAA,MAAM,UAAU,MAAM,MAAA,CAAO,IAAI,SAAU,CAAA,SAAS,CAAC,CAAE,CAAA,aAAA;AAAA,MACrD,QAAA;AAAA,KACF,CAAA;AACA,IAAO,MAAA,CAAA,OAAO,CAAE,CAAA,YAAA,CAAa,CAAC,CAAA,CAAA;AAG9B,IAAA,MAAM,SAAU,CAAA,KAAA,CAAM,OAAQ,CAAA,CAAC,CAAC,CAAA,CAAA;AAEhC,IAAO,MAAA,CAAA,MAAM,CAAE,CAAA,iBAAA,CAAkB,QAAQ,CAAA,CAAA;AAGzC,IAAA,MAAA,CAAO,IAAI,WAAY,CAAA,SAAS,CAAC,CAAA,CAAE,IAAI,iBAAkB,EAAA,CAAA;AAGzD,IAAA,MAAA,CAAO,IAAK,CAAA,YAAY,CAAE,CAAA,qBAAA,CAAsB,CAAC,CAAA,CAAA;AACjD,IAAO,MAAA,CAAA,IAAA,CAAK,iBAAiB,CAAA,CAAE,oBAAqB,EAAA,CAAA;AAAA,GACtD;AACF,EAAA;AAEO,MAAM,oBAA8B,GAAA;AAAA,EACzC,IAAM,EAAA;AAAA,IACJ,kBAAoB,EAAA,GAAA;AAAA,IACpB,QAAA,sCACG,iBACE,EAAA,IAAA,EAAA,eAAA,CAAgB,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,IACvB,qBAAA,KAAA,CAAA,aAAA,CAAC,mBAAgB,SAAW,EAAA,IAAA,CAAK,WAAW,EAAI,EAAA,IAAA,CAAK,MAClD,IAAK,CAAA,QACR,CACD,CACH,CAAA;AAAA,GAEJ;AAAA,EACA,IAAM,EAAA,OAAO,EAAE,aAAA,EAAoB,KAAA;AACjC,IAAM,MAAA,MAAA,GAAS,OAAO,aAAa,CAAA,CAAA;AAEnC,IAAM,MAAA,GAAA,GAAM,MAAO,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAGhC,IAAM,MAAA,MAAA,GAAS,MAAO,CAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AAGxC,IAAA,MAAA,CAAO,IAAI,WAAY,CAAA,SAAS,CAAC,CAAA,CAAE,IAAI,iBAAkB,EAAA,CAAA;AAEzD,IAAA,MAAM,QAAQ,MAAM,MAAA,CAAO,MAAM,CAAE,CAAA,iBAAA,CAAkB,QAAQ,CAAC,CAAA,CAAA;AAG9D,IAAM,MAAA,SAAA,CAAU,MAAM,MAAM,CAAA,CAAA;AAE5B,IAAM,MAAA,OAAA,GAAU,OAAO,GAAI,CAAA,SAAA,CAAU,SAAS,CAAC,CAAA,CAAE,aAAa,QAAQ,CAAA,CAAA;AACtE,IAAA,MAAM,SAAU,CAAA,KAAA,CAAM,OAAQ,CAAA,CAAC,CAAC,CAAA,CAAA;AAEhC,IAAO,MAAA,CAAA,MAAM,CAAE,CAAA,iBAAA,CAAkB,QAAQ,CAAA,CAAA;AAAA,GAC3C;AACF,EAAA;AAEO,MAAM,QAAkB,GAAA;AAAA,EAC7B,IAAM,EAAA;AAAA,IACJ,kBAAoB,EAAA,GAAA;AAAA,IACpB,UAAY,EAAA,IAAA;AAAA,IACZ,QAAA,sCACG,iBACE,EAAA,IAAA,EAAA,eAAA,CAAgB,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,IACvB,qBAAA,KAAA,CAAA,aAAA,CAAC,mBAAgB,SAAW,EAAA,IAAA,CAAK,WAAW,EAAI,EAAA,IAAA,CAAK,MAClD,IAAK,CAAA,QACR,CACD,CACH,CAAA;AAAA,GAEJ;AAAA,EACA,IAAM,EAAA,OAAO,EAAE,aAAA,EAAe,MAAW,KAAA;AACvC,IAAM,MAAA,MAAA,GAAS,OAAO,aAAa,CAAA,CAAA;AAEnC,IAAM,MAAA,GAAA,GAAM,MAAO,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAGhC,IAAM,MAAA,MAAA,GAAS,MAAO,CAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AAGxC,IAAO,MAAA,CAAA,MAAM,EAAE,YAAa,EAAA,CAAA;AAE5B,IAAA,MAAM,UAAU,GAAI,EAAA,CAAA;AACpB,IAAA,MAAM,QAAQ,MAAM,MAAA,CAAO,MAAM,CAAE,CAAA,iBAAA,CAAkB,QAAQ,CAAC,CAAA,CAAA;AAG9D,IAAM,MAAA,SAAA,CAAU,MAAM,MAAM,CAAA,CAAA;AAG5B,IAAA,MAAA,CAAO,IAAI,WAAY,CAAA,SAAS,CAAC,CAAA,CAAE,IAAI,iBAAkB,EAAA,CAAA;AAEzD,IAAO,MAAA,CAAA,MAAM,CAAE,CAAA,iBAAA,CAAkB,QAAQ,CAAA,CAAA;AAEzC,IAAA,MAAA,CAAO,IAAK,CAAA,YAAY,CAAE,CAAA,GAAA,CAAI,gBAAiB,EAAA,CAAA;AAC/C,IAAA,MAAA,CAAO,IAAK,CAAA,iBAAiB,CAAE,CAAA,GAAA,CAAI,gBAAiB,EAAA,CAAA;AAAA,GACtD;AACF,EAAA;AAEO,MAAM,mBAA6B,GAAA;AAAA,EACxC,IAAM,EAAA;AAAA,IACJ,YAAA,EAAc,CAAC,GAAG,CAAA;AAAA,IAClB,QAAA,sCACG,iBACE,EAAA,IAAA,EAAA,eAAA,CAAgB,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,IACvB,qBAAA,KAAA,CAAA,aAAA,CAAC,mBAAgB,SAAW,EAAA,IAAA,CAAK,WAAW,EAAI,EAAA,IAAA,CAAK,MAClD,IAAK,CAAA,QACR,CACD,CACH,CAAA;AAAA,GAEJ;AAAA,EACA,IAAM,EAAA,OAAO,EAAE,aAAA,EAAe,MAAW,KAAA;AACvC,IAAM,MAAA,MAAA,GAAS,OAAO,aAAa,CAAA,CAAA;AAEnC,IAAM,MAAA,GAAA,GAAM,MAAO,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAGhC,IAAM,MAAA,MAAA,GAAS,MAAO,CAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AAExC,IAAA,MAAA,CAAO,IAAI,WAAY,CAAA,SAAS,CAAC,CAAA,CAAE,IAAI,iBAAkB,EAAA,CAAA;AACzD,IAAO,MAAA,CAAA,MAAM,CAAE,CAAA,iBAAA,CAAkB,yBAAoB,CAAA,CAAA;AAGrD,IAAM,MAAA,SAAA,CAAU,MAAM,MAAM,CAAA,CAAA;AAC5B,IAAO,MAAA,CAAA,IAAA,CAAK,YAAY,CAAA,CAAE,oBAAqB,EAAA,CAAA;AAG/C,IAAA,MAAM,OAAU,GAAA,MAAM,GAAI,CAAA,UAAA,CAAW,SAAS,CAAA,CAAA;AAC9C,IAAA,MAAM,UAAU,MAAM,MAAA,CAAO,OAAO,CAAA,CAAE,cAAc,QAAQ,CAAA,CAAA;AAC5D,IAAO,MAAA,CAAA,OAAO,CAAE,CAAA,YAAA,CAAa,CAAC,CAAA,CAAA;AAG9B,IAAA,MAAM,SAAU,CAAA,KAAA,CAAM,OAAQ,CAAA,CAAC,CAAC,CAAA,CAAA;AAChC,IAAO,MAAA,CAAA,IAAA,CAAK,YAAY,CAAA,CAAE,oBAAqB,EAAA,CAAA;AAC/C,IAAA,MAAA,CAAO,IAAK,CAAA,iBAAiB,CAAE,CAAA,GAAA,CAAI,gBAAiB,EAAA,CAAA;AACpD,IAAO,MAAA,CAAA,MAAM,CAAE,CAAA,iBAAA,CAAkB,yBAAoB,CAAA,CAAA;AAErD,IAAA,MAAM,SAAU,CAAA,KAAA,CAAM,OAAQ,CAAA,CAAC,CAAC,CAAA,CAAA;AAChC,IAAA,MAAA,CAAO,IAAK,CAAA,YAAY,CAAE,CAAA,qBAAA,CAAsB,CAAC,CAAA,CAAA;AACjD,IAAO,MAAA,CAAA,IAAA,CAAK,iBAAiB,CAAA,CAAE,oBAAqB,EAAA,CAAA;AAEpD,IAAO,MAAA,CAAA,MAAM,CAAE,CAAA,iBAAA,CAAkB,QAAQ,CAAA,CAAA;AAAA,GAC3C;AACF,EAAA;AAEO,MAAM,gBAA0B,GAAA;AAAA,EACrC,IAAM,EAAA;AAAA,IACJ,QAAA,sCACG,iBACE,EAAA,IAAA,EAAA,eAAA,CAAgB,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,IACvB,qBAAA,KAAA,CAAA,aAAA,CAAC,mBAAgB,SAAW,EAAA,IAAA,CAAK,WAAW,EAAI,EAAA,IAAA,CAAK,MAClD,IAAK,CAAA,QACR,CACD,CACH,CAAA;AAAA,GAEJ;AAAA,EACA,MAAA,EAAQ,CAAC,EAA4C,KAAA;AAA5C,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,CAAiC,IAAA,GAAA,SAAA,CAAjC,IAAiC,CAA/B,4BAAA,CAAA,EAAA;AACT,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC9C,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,UAAA,CAAW,MAAM;AACf,QAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAAA,SACf,GAAI,CAAA,CAAA;AAAA,KACT,EAAG,EAAE,CAAA,CAAA;AAEL,IAAA;AAAA;AAAA,sBAEE,KAAA,CAAA,aAAA;AAAA,QAAC,oBAAqB,CAAA,QAAA;AAAA,QAArB;AAAA,UACC,KAAO,EAAA;AAAA,YACL,aAAe,EAAA,MAAA;AAAA,YACf,gBAAgB,EAAC;AAAA,WACnB;AAAA,SAAA;AAAA,wBAEA,KAAA,CAAA,aAAA;AAAA,UAAC,UAAA;AAAA,UAAA,cAAA,CAAA;AAAA,YAEC,0BAA4B,EAAA;AAAA,cAC1B,UAAY,EAAA,QAAA;AAAA,aACd;AAAA,WACI,EAAA,IAAA,CAAA;AAAA,SACN;AAAA,OACF;AAAA,MAAA;AAAA,GAEJ;AAAA,EACA,MAAM,YAAY;AAEhB,IAAM,MAAA,GAAA,GAAM,MAAO,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAEhC,IAAM,MAAA,OAAA;AAAA,MACJ,MAAM;AACJ,QAAA,MAAA,CAAO,IAAI,WAAY,CAAA,SAAS,CAAC,CAAA,CAAE,IAAI,iBAAkB,EAAA,CAAA;AAAA,OAC3D;AAAA,MACA,EAAE,SAAS,GAAI,EAAA;AAAA,KACjB,CAAA;AAEA,IAAM,MAAA,OAAA;AAAA,MACJ,MAAM;AACJ,QAAA,MAAA,CAAO,GAAI,CAAA,WAAA,CAAY,SAAS,CAAC,EAAE,iBAAkB,EAAA,CAAA;AAAA,OACvD;AAAA,MACA,EAAE,SAAS,IAAK,EAAA;AAAA,KAClB,CAAA;AAAA,GACF;AACF;;;;"}

package/skinny/registerSlider.stories.cjs.js

@@ -22,25 +22,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const meta = {
   title: "Components/BaseSlider",
   component: registerSlider.BaseSlider,
@@ -51,23 +32,22 @@ const meta = {
     maxValue: 100,
     step: 1,
     orientation: "horizontal"
+  }
+};
+const Basic = {
+  args: {
+    children: /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(registerLabel.BaseLabel, null, "Slider label"), /* @__PURE__ */ React__default.default.createElement(registerSliderOutput.BaseSliderOutput, null, "Output"), /* @__PURE__ */ React__default.default.createElement(registerSliderTrack.BaseSliderTrack, null, /* @__PURE__ */ React__default.default.createElement(registerSliderThumb.BaseSliderThumb, { autoFocus: true, className: "thumb-1" })))
   },
-  // TODO: Currently, the BaseSlider's defaultValue prop is not handled correctly inside BaseSliderTrack, i.e. it can't be uncontrolled
-  // The render function below assigns the defaultValue prop to the value prop - its needed to keep the BaseSlider controlled
-  // This render function needs to be removed in the PR that fixes the handling of defaultValue in BaseSliderTrack.
-  render: (args) => {
-    const [value, setValue] = React.useState(args.defaultValue);
-    return /* @__PURE__ */ React__default.default.createElement(
-      registerSlider.BaseSlider,
-      __spreadProps(__spreadValues({}, args), {
-        value,
-        onChange: (newValue) => {
-          var _a;
-          setValue(newValue);
-          (_a = args.onChange) == null ? void 0 : _a.call(args, newValue);
-        }
-      })
-    );
+  play: async ({ canvasElement, args }) => {
+    const canvas = test.within(canvasElement);
+    const slider = canvas.getByRole("group");
+    const label = test.within(slider).getByText("Slider label");
+    const thumbs = slider.getElementsByTagName("input");
+    test.expect(thumbs).toHaveLength(1);
+    await test.userEvent.click(label);
+    await test.userEvent.keyboard("{ArrowRight}");
+    test.expect(args.onChange).toHaveBeenCalledWith([1]);
+    test.expect(args.onChangeEnd).toHaveBeenCalledOnce();
   }
 };
 const WithDefaultValue = {
@@ -175,6 +155,7 @@ const TooManyThumbs = {
   }
 };
 
+exports.Basic = Basic;
 exports.Disabled = Disabled;
 exports.RangeSlider = RangeSlider;
 exports.TooFewThumbs = TooFewThumbs;

package/skinny/registerSlider.stories.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerSlider.stories.cjs.js","sources":["../src/registerSlider.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\nimport React, { useState } from \"react\";\nimport { BaseLabel } from \"./registerLabel\";\nimport { BaseSlider } from \"./registerSlider\";\nimport { BaseSliderOutput } from \"./registerSliderOutput\";\nimport { BaseSliderThumb } from \"./registerSliderThumb\";\nimport { BaseSliderTrack } from \"./registerSliderTrack\";\n\n// Single value slider meta\nconst meta: Meta<typeof BaseSlider<number>> = {\n  title: \"Components/BaseSlider\",\n  component: BaseSlider,\n  args: {\n    onChange: fn(),\n    onChangeEnd: fn(),\n    minValue: 0,\n    maxValue: 100,\n    step: 1,\n    orientation: \"horizontal\" as const,\n  },\n  // TODO: Currently, the BaseSlider's defaultValue prop is not handled correctly inside BaseSliderTrack, i.e. it can't be uncontrolled\n  // The render function below assigns the defaultValue prop to the value prop - its needed to keep the BaseSlider controlled\n  // This render function needs to be removed in the PR that fixes the handling of defaultValue in BaseSliderTrack.\n  render: (args) => {\n    const [value, setValue] = useState(args.defaultValue);\n    return (\n      <BaseSlider\n        {...args}\n        value={value}\n        onChange={(newValue) => {\n          setValue(newValue);\n          args.onChange?.(newValue);\n        }}\n      />\n    );\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BaseSlider<number>>;\n\n// TODO: Currently, BaseSliderTrack does not render any thumbs if there is no value/default value prop\n// The test below needs to be uncommented in the PR that fixes the issue\n// Basic slider with no initial value\n// export const Basic: Story = {\n//     args: {\n//         step: 5,\n//         children: (\n//             <>\n//                 <BaseLabel>Slider label</BaseLabel>\n//                 <BaseSliderOutput>Output</BaseSliderOutput>\n//                 <BaseSliderTrack>\n//                     <BaseSliderThumb autoFocus className={\"thumb-1\"} />\n//                 </BaseSliderTrack>\n//             </>\n//         ),\n//     },\n//     play: async ({ canvasElement, args }) => {\n//         const canvas = within(canvasElement);\n//         const slider = canvas.getByRole(\"group\");\n//         const label = within(slider).getByText(\"Slider label\");\n//         const thumbs = slider.getElementsByTagName(\"input\");\n//         expect(thumbs).toHaveLength(1);\n\n//         await userEvent.click(label); // Focus on the slider thumb\n//         await userEvent.keyboard(\"{ArrowRight}\"); // Move to the right\n\n//         expect(args.onChange).toHaveBeenCalledWith([5]); // defaults to range slider if no value/defaultValue is provided (that's the default react-aria slider component behaviour)\n//         expect(args.onChangeEnd).toHaveBeenCalledOnce();\n//     },\n// };\n\n// Basic slider with no initial value\nexport const WithDefaultValue: Story = {\n  args: {\n    step: 5,\n    defaultValue: 22,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n    expect(thumbs).toHaveLength(1);\n\n    await userEvent.click(label); // Focus on the slider thumb\n    await userEvent.keyboard(\"{ArrowRight}\"); // Move to the right\n\n    expect(args.onChange).toHaveBeenCalledWith(25);\n    expect(args.onChangeEnd).toHaveBeenCalledOnce();\n  },\n};\n\n// // Disabled slider\nexport const Disabled: Story = {\n  args: {\n    step: 5,\n    defaultValue: 22,\n    isDisabled: true,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n    expect(thumbs).toHaveLength(1);\n\n    await userEvent.click(label); // Focus on the slider thumb\n    await userEvent.keyboard(\"{ArrowRight}\"); // Move to the right\n\n    expect(args.onChange).not.toHaveBeenCalled();\n    expect(args.onChangeEnd).not.toHaveBeenCalled();\n  },\n};\n\n// Range slider specific stories\ntype RangeStory = StoryObj<typeof BaseSlider<number[]>>;\n\nexport const RangeSlider: RangeStory = {\n  args: {\n    defaultValue: [20, 80],\n    step: 10,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n          <BaseSliderThumb className={\"thumb-2\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n\n    expect(thumbs).toHaveLength(2);\n\n    expect(slider.querySelector(\".thumb-1\")).toBeInTheDocument();\n    expect(slider.querySelector(\".thumb-2\")).toBeInTheDocument();\n\n    await userEvent.click(label);\n    await userEvent.keyboard(\"{ArrowLeft}\");\n    expect(args.onChange).toHaveBeenCalledWith([10, 80]);\n    await userEvent.tab();\n    await userEvent.keyboard(\"{ArrowRight}\");\n\n    expect(args.onChange).toHaveBeenCalledWith([10, 90]);\n  },\n};\n\nexport const TooFewThumbs: RangeStory = {\n  args: {\n    defaultValue: [20, 47, 80],\n    step: 10,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n          <BaseSliderThumb className={\"thumb-2\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n\n    expect(thumbs).toHaveLength(3);\n\n    expect(slider.querySelectorAll(\".thumb-1\")).toHaveLength(1);\n    expect(slider.querySelectorAll(\".thumb-2\")).toHaveLength(2);\n\n    await userEvent.click(label);\n    await userEvent.keyboard(\"{ArrowLeft}\");\n    expect(args.onChange).toHaveBeenCalledWith([10, 50, 80]); // all values adjusted to the step (47 -> 50)\n\n    await userEvent.tab();\n    await userEvent.keyboard(\"{ArrowRight}\");\n\n    expect(args.onChange).toHaveBeenCalledWith([10, 60, 80]);\n  },\n};\n\nexport const TooManyThumbs: RangeStory = {\n  args: {\n    defaultValue: [20, 80],\n    step: 10,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Range: 20-80</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n          <BaseSliderThumb className={\"thumb-2\"} />\n          <BaseSliderThumb className={\"thumb-3\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n\n    expect(thumbs).toHaveLength(2);\n\n    expect(slider.querySelectorAll(\".thumb-1\")).toHaveLength(1);\n    expect(slider.querySelectorAll(\".thumb-2\")).toHaveLength(1);\n    expect(slider.querySelectorAll(\".thumb-3\")).toHaveLength(0); // unused, because there are 3 thumbs but only 2 values\n\n    await userEvent.click(label);\n    await userEvent.keyboard(\"{ArrowLeft}\");\n    expect(args.onChange).toHaveBeenCalledWith([10, 80]);\n\n    await userEvent.tab();\n    await userEvent.keyboard(\"{ArrowRight}\");\n\n    expect(args.onChange).toHaveBeenCalledWith([10, 90]);\n  },\n};\n"],"names":["BaseSlider","fn","useState","React","BaseLabel","BaseSliderOutput","BaseSliderTrack","BaseSliderThumb","within","expect","userEvent"],"mappings":"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"}
+{"version":3,"file":"registerSlider.stories.cjs.js","sources":["../src/registerSlider.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\nimport React from \"react\";\nimport { BaseLabel } from \"./registerLabel\";\nimport { BaseSlider } from \"./registerSlider\";\nimport { BaseSliderOutput } from \"./registerSliderOutput\";\nimport { BaseSliderThumb } from \"./registerSliderThumb\";\nimport { BaseSliderTrack } from \"./registerSliderTrack\";\n\n// Single value slider meta\nconst meta: Meta<typeof BaseSlider<number>> = {\n  title: \"Components/BaseSlider\",\n  component: BaseSlider,\n  args: {\n    onChange: fn(),\n    onChangeEnd: fn(),\n    minValue: 0,\n    maxValue: 100,\n    step: 1,\n    orientation: \"horizontal\" as const,\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BaseSlider<number>>;\n\n// Basic slider with no initial value\nexport const Basic: Story = {\n  args: {\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb autoFocus className={\"thumb-1\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n    expect(thumbs).toHaveLength(1);\n\n    await userEvent.click(label); // Focus on the slider thumb\n    await userEvent.keyboard(\"{ArrowRight}\"); // Move to the right\n\n    expect(args.onChange).toHaveBeenCalledWith([1]); // defaults to range slider if no value/defaultValue is provided (that's the default react-aria slider component behaviour)\n    expect(args.onChangeEnd).toHaveBeenCalledOnce();\n  },\n};\n\n// Basic slider with no initial value\nexport const WithDefaultValue: Story = {\n  args: {\n    step: 5,\n    defaultValue: 22,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n    expect(thumbs).toHaveLength(1);\n\n    await userEvent.click(label); // Focus on the slider thumb\n    await userEvent.keyboard(\"{ArrowRight}\"); // Move to the right\n\n    expect(args.onChange).toHaveBeenCalledWith(25);\n    expect(args.onChangeEnd).toHaveBeenCalledOnce();\n  },\n};\n\n// // Disabled slider\nexport const Disabled: Story = {\n  args: {\n    step: 5,\n    defaultValue: 22,\n    isDisabled: true,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n    expect(thumbs).toHaveLength(1);\n\n    await userEvent.click(label); // Focus on the slider thumb\n    await userEvent.keyboard(\"{ArrowRight}\"); // Move to the right\n\n    expect(args.onChange).not.toHaveBeenCalled();\n    expect(args.onChangeEnd).not.toHaveBeenCalled();\n  },\n};\n\n// Range slider specific stories\ntype RangeStory = StoryObj<typeof BaseSlider<number[]>>;\n\nexport const RangeSlider: RangeStory = {\n  args: {\n    defaultValue: [20, 80],\n    step: 10,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n          <BaseSliderThumb className={\"thumb-2\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n\n    expect(thumbs).toHaveLength(2);\n\n    expect(slider.querySelector(\".thumb-1\")).toBeInTheDocument();\n    expect(slider.querySelector(\".thumb-2\")).toBeInTheDocument();\n\n    await userEvent.click(label);\n    await userEvent.keyboard(\"{ArrowLeft}\");\n    expect(args.onChange).toHaveBeenCalledWith([10, 80]);\n    await userEvent.tab();\n    await userEvent.keyboard(\"{ArrowRight}\");\n\n    expect(args.onChange).toHaveBeenCalledWith([10, 90]);\n  },\n};\n\nexport const TooFewThumbs: RangeStory = {\n  args: {\n    defaultValue: [20, 47, 80],\n    step: 10,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n          <BaseSliderThumb className={\"thumb-2\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n\n    expect(thumbs).toHaveLength(3);\n\n    expect(slider.querySelectorAll(\".thumb-1\")).toHaveLength(1);\n    expect(slider.querySelectorAll(\".thumb-2\")).toHaveLength(2);\n\n    await userEvent.click(label);\n    await userEvent.keyboard(\"{ArrowLeft}\");\n    expect(args.onChange).toHaveBeenCalledWith([10, 50, 80]); // all values adjusted to the step (47 -> 50)\n\n    await userEvent.tab();\n    await userEvent.keyboard(\"{ArrowRight}\");\n\n    expect(args.onChange).toHaveBeenCalledWith([10, 60, 80]);\n  },\n};\n\nexport const TooManyThumbs: RangeStory = {\n  args: {\n    defaultValue: [20, 80],\n    step: 10,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Range: 20-80</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n          <BaseSliderThumb className={\"thumb-2\"} />\n          <BaseSliderThumb className={\"thumb-3\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n\n    expect(thumbs).toHaveLength(2);\n\n    expect(slider.querySelectorAll(\".thumb-1\")).toHaveLength(1);\n    expect(slider.querySelectorAll(\".thumb-2\")).toHaveLength(1);\n    expect(slider.querySelectorAll(\".thumb-3\")).toHaveLength(0); // unused, because there are 3 thumbs but only 2 values\n\n    await userEvent.click(label);\n    await userEvent.keyboard(\"{ArrowLeft}\");\n    expect(args.onChange).toHaveBeenCalledWith([10, 80]);\n\n    await userEvent.tab();\n    await userEvent.keyboard(\"{ArrowRight}\");\n\n    expect(args.onChange).toHaveBeenCalledWith([10, 90]);\n  },\n};\n"],"names":["BaseSlider","fn","React","BaseLabel","BaseSliderOutput","BaseSliderTrack","BaseSliderThumb","within","expect","userEvent"],"mappings":"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"}

package/skinny/registerSlider.stories.esm.js

@@ -1,5 +1,5 @@
 import { fn, within, expect, userEvent } from '@storybook/test';
-import React, { useState } from 'react';
+import React from 'react';
 import { BaseLabel } from './registerLabel.esm.js';
 import { BaseSlider } from './registerSlider.esm.js';
 import { BaseSliderOutput } from './registerSliderOutput.esm.js';
@@ -14,25 +14,6 @@ import './contexts-5cb81c2f.esm.js';
 import './variant-utils-4405ebb0.esm.js';
 import 'react-keyed-flatten-children';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const meta = {
   title: "Components/BaseSlider",
   component: BaseSlider,
@@ -43,23 +24,22 @@ const meta = {
     maxValue: 100,
     step: 1,
     orientation: "horizontal"
+  }
+};
+const Basic = {
+  args: {
+    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BaseLabel, null, "Slider label"), /* @__PURE__ */ React.createElement(BaseSliderOutput, null, "Output"), /* @__PURE__ */ React.createElement(BaseSliderTrack, null, /* @__PURE__ */ React.createElement(BaseSliderThumb, { autoFocus: true, className: "thumb-1" })))
   },
-  // TODO: Currently, the BaseSlider's defaultValue prop is not handled correctly inside BaseSliderTrack, i.e. it can't be uncontrolled
-  // The render function below assigns the defaultValue prop to the value prop - its needed to keep the BaseSlider controlled
-  // This render function needs to be removed in the PR that fixes the handling of defaultValue in BaseSliderTrack.
-  render: (args) => {
-    const [value, setValue] = useState(args.defaultValue);
-    return /* @__PURE__ */ React.createElement(
-      BaseSlider,
-      __spreadProps(__spreadValues({}, args), {
-        value,
-        onChange: (newValue) => {
-          var _a;
-          setValue(newValue);
-          (_a = args.onChange) == null ? void 0 : _a.call(args, newValue);
-        }
-      })
-    );
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const slider = canvas.getByRole("group");
+    const label = within(slider).getByText("Slider label");
+    const thumbs = slider.getElementsByTagName("input");
+    expect(thumbs).toHaveLength(1);
+    await userEvent.click(label);
+    await userEvent.keyboard("{ArrowRight}");
+    expect(args.onChange).toHaveBeenCalledWith([1]);
+    expect(args.onChangeEnd).toHaveBeenCalledOnce();
   }
 };
 const WithDefaultValue = {
@@ -167,5 +147,5 @@ const TooManyThumbs = {
   }
 };
 
-export { Disabled, RangeSlider, TooFewThumbs, TooManyThumbs, WithDefaultValue, meta as default };
+export { Basic, Disabled, RangeSlider, TooFewThumbs, TooManyThumbs, WithDefaultValue, meta as default };
 //# sourceMappingURL=registerSlider.stories.esm.js.map