@uva-glass/component-library 1.1.0 → 1.3.0

package/dist/components/SelectListbox/SelectListBox.stories.js

@@ -1,10 +1,10 @@
 import { jsx as l, jsxs as h } from "react/jsx-runtime";
-import { f as c } from "../../index-CZx-Vhwf.js";
-import { SelectListbox as a } from "./SelectListbox.js";
+import { f as c } from "../../index-DHAcOIyn.js";
+import { SelectListbox as o } from "./SelectListbox.js";
 import * as e from "react";
-const d = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 9 6", ...t }, /* @__PURE__ */ e.createElement("rect", { fill: "#21468B", width: 9, height: 6 }), /* @__PURE__ */ e.createElement("rect", { fill: "#FFF", width: 9, height: 4 }), /* @__PURE__ */ e.createElement("rect", { fill: "#AE1C28", width: 9, height: 2 })), p = d, g = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 60 30", ...t }, /* @__PURE__ */ e.createElement("clipPath", { id: "t" }, /* @__PURE__ */ e.createElement("path", { d: "M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z" })), /* @__PURE__ */ e.createElement("path", { d: "M0,0 v30 h60 v-30 z", fill: "#00247d" }), /* @__PURE__ */ e.createElement("path", { d: "M0,0 L60,30 M60,0 L0,30", stroke: "#fff", strokeWidth: 6 }), /* @__PURE__ */ e.createElement("path", { d: "M0,0 L60,30 M60,0 L0,30", clipPath: "url(#t)", stroke: "#cf142b", strokeWidth: 4 }), /* @__PURE__ */ e.createElement("path", { d: "M30,0 v30 M0,15 h60", stroke: "#fff", strokeWidth: 10 }), /* @__PURE__ */ e.createElement("path", { d: "M30,0 v30 M0,15 h60", stroke: "#cf142b", strokeWidth: 6 })), m = g, f = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 5 3", ...t }, /* @__PURE__ */ e.createElement("desc", null, "Flag of Germany"), /* @__PURE__ */ e.createElement("rect", { id: "black_stripe", width: 5, height: 3, y: 0, x: 0, fill: "#000" }), /* @__PURE__ */ e.createElement("rect", { id: "red_stripe", width: 5, height: 2, y: 1, x: 0, fill: "#D00" }), /* @__PURE__ */ e.createElement("rect", { id: "gold_stripe", width: 5, height: 1, y: 2, x: 0, fill: "#FFCE00" })), b = f, w = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 3 2", ...t }, /* @__PURE__ */ e.createElement("rect", { width: 3, height: 2, fill: "#ED2939" }), /* @__PURE__ */ e.createElement("rect", { width: 2, height: 2, fill: "#fff" }), /* @__PURE__ */ e.createElement("rect", { width: 1, height: 2, fill: "#002395" })), x = w, r = [
+const d = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 9 6", ...t }, /* @__PURE__ */ e.createElement("rect", { fill: "#21468B", width: 9, height: 6 }), /* @__PURE__ */ e.createElement("rect", { fill: "#FFF", width: 9, height: 4 }), /* @__PURE__ */ e.createElement("rect", { fill: "#AE1C28", width: 9, height: 2 })), p = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 60 30", ...t }, /* @__PURE__ */ e.createElement("clipPath", { id: "t" }, /* @__PURE__ */ e.createElement("path", { d: "M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z" })), /* @__PURE__ */ e.createElement("path", { d: "M0,0 v30 h60 v-30 z", fill: "#00247d" }), /* @__PURE__ */ e.createElement("path", { d: "M0,0 L60,30 M60,0 L0,30", stroke: "#fff", strokeWidth: 6 }), /* @__PURE__ */ e.createElement("path", { d: "M0,0 L60,30 M60,0 L0,30", clipPath: "url(#t)", stroke: "#cf142b", strokeWidth: 4 }), /* @__PURE__ */ e.createElement("path", { d: "M30,0 v30 M0,15 h60", stroke: "#fff", strokeWidth: 10 }), /* @__PURE__ */ e.createElement("path", { d: "M30,0 v30 M0,15 h60", stroke: "#cf142b", strokeWidth: 6 })), m = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 5 3", ...t }, /* @__PURE__ */ e.createElement("desc", null, "Flag of Germany"), /* @__PURE__ */ e.createElement("rect", { id: "black_stripe", width: 5, height: 3, y: 0, x: 0, fill: "#000" }), /* @__PURE__ */ e.createElement("rect", { id: "red_stripe", width: 5, height: 2, y: 1, x: 0, fill: "#D00" }), /* @__PURE__ */ e.createElement("rect", { id: "gold_stripe", width: 5, height: 1, y: 2, x: 0, fill: "#FFCE00" })), g = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 3 2", ...t }, /* @__PURE__ */ e.createElement("rect", { width: 3, height: 2, fill: "#ED2939" }), /* @__PURE__ */ e.createElement("rect", { width: 2, height: 2, fill: "#fff" }), /* @__PURE__ */ e.createElement("rect", { width: 1, height: 2, fill: "#002395" })), r = [
   {
-    label: "Nerderlands",
+    label: "Standaard Nederlands (NL)",
     value: "NL"
   },
   {
@@ -19,9 +19,9 @@ const d = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.
     label: "Français",
     value: "FR"
   }
-], M = {
+], S = {
   title: "Organisms/SelectListbox",
-  component: a,
+  component: o,
   argTypes: {
     options: {
       table: {
@@ -90,28 +90,28 @@ const d = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.
   defaultValue: "EN",
   disabled: !1,
   buttonLabelBold: !1,
-  maxOptionHeight: "200px",
+  maxOptionHeight: "20rem",
   optionPositionRight: !1,
   onChange: c()
-}, E = (t) => /* @__PURE__ */ l("div", { style: { width: "10rem" }, children: /* @__PURE__ */ l(a, { ...t, children: r.map(({ label: i, value: o }, n) => /* @__PURE__ */ l(a.SelectOption, { option: { label: i, value: o }, index: n, children: i }, `${o}`)) }) }), u = E.bind({});
-u.args = {
+}, f = (t) => /* @__PURE__ */ l("div", { style: { width: "10rem", margin: "4rem auto 0 auto" }, children: /* @__PURE__ */ l(o, { ...t, children: r.map(({ label: i, value: a }, n) => /* @__PURE__ */ l(o.SelectOption, { option: { label: i, value: a }, index: n, children: i }, `${a}`)) }) }), b = f.bind({});
+b.args = {
   ...s
 };
-const v = ({ label: t, value: i }) => /* @__PURE__ */ h("div", { style: { display: "flex" }, children: [
+const w = ({ label: t, value: i }) => /* @__PURE__ */ h("div", { style: { display: "flex" }, children: [
   {
-    NL: /* @__PURE__ */ l(p, { style: { width: "24px", height: "24px", marginRight: "10px" } }),
-    EN: /* @__PURE__ */ l(m, { style: { width: "24px", height: "24px", marginRight: "10px" } }),
-    DU: /* @__PURE__ */ l(b, { style: { width: "24px", height: "24px", marginRight: "10px" } }),
-    FR: /* @__PURE__ */ l(x, { style: { width: "24px", height: "24px", marginRight: "10px" } })
+    NL: /* @__PURE__ */ l(d, { style: { width: "24px", height: "24px", marginRight: "10px" } }),
+    EN: /* @__PURE__ */ l(p, { style: { width: "24px", height: "24px", marginRight: "10px" } }),
+    DU: /* @__PURE__ */ l(m, { style: { width: "24px", height: "24px", marginRight: "10px" } }),
+    FR: /* @__PURE__ */ l(g, { style: { width: "24px", height: "24px", marginRight: "10px" } })
   }[i],
   t
-] }), F = (t) => /* @__PURE__ */ l("div", { style: { width: "10rem" }, children: /* @__PURE__ */ l(a, { ...t, children: t.options.map(({ label: i, value: o }, n) => /* @__PURE__ */ l(a.SelectOption, { option: { label: i, value: o }, index: n, children: /* @__PURE__ */ l(v, { label: i, value: o }) }, `${o}`)) }) }), y = F.bind({});
-y.args = {
+] }), x = (t) => /* @__PURE__ */ l("div", { style: { width: "10rem", marginTop: "3rem" }, children: /* @__PURE__ */ l(o, { ...t, children: t.options.map(({ label: i, value: a }, n) => /* @__PURE__ */ l(o.SelectOption, { option: { label: i, value: a }, index: n, children: /* @__PURE__ */ l(w, { label: i, value: a }) }, `${a}`)) }) }), u = x.bind({});
+u.args = {
   ...s
 };
 export {
-  u as SelectListboxExample,
-  y as WithComponentOption,
-  M as default
+  b as SelectListboxExample,
+  u as WithComponentOption,
+  S as default
 };
 //# sourceMappingURL=SelectListBox.stories.js.map

package/dist/components/SelectListbox/SelectListBox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectListBox.stories.js","sources":["../../../src/components/SelectListbox/stories-images/nl.svg?react","../../../src/components/SelectListbox/stories-images/gb.svg?react","../../../src/components/SelectListbox/stories-images/de.svg?react","../../../src/components/SelectListbox/stories-images/fr.svg?react","../../../src/components/SelectListbox/SelectListBox.stories.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgNl = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", viewBox: \"0 0 9 6\", ...props }, /* @__PURE__ */ React.createElement(\"rect\", { fill: \"#21468B\", width: 9, height: 6 }), /* @__PURE__ */ React.createElement(\"rect\", { fill: \"#FFF\", width: 9, height: 4 }), /* @__PURE__ */ React.createElement(\"rect\", { fill: \"#AE1C28\", width: 9, height: 2 }));\nexport default SvgNl;\n","import * as React from \"react\";\nconst SvgGb = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", viewBox: \"0 0 60 30\", ...props }, /* @__PURE__ */ React.createElement(\"clipPath\", { id: \"t\" }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z\" })), /* @__PURE__ */ React.createElement(\"path\", { d: \"M0,0 v30 h60 v-30 z\", fill: \"#00247d\" }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M0,0 L60,30 M60,0 L0,30\", stroke: \"#fff\", strokeWidth: 6 }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M0,0 L60,30 M60,0 L0,30\", clipPath: \"url(#t)\", stroke: \"#cf142b\", strokeWidth: 4 }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M30,0 v30 M0,15 h60\", stroke: \"#fff\", strokeWidth: 10 }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M30,0 v30 M0,15 h60\", stroke: \"#cf142b\", strokeWidth: 6 }));\nexport default SvgGb;\n","import * as React from \"react\";\nconst SvgDe = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", viewBox: \"0 0 5 3\", ...props }, /* @__PURE__ */ React.createElement(\"desc\", null, \"Flag of Germany\"), /* @__PURE__ */ React.createElement(\"rect\", { id: \"black_stripe\", width: 5, height: 3, y: 0, x: 0, fill: \"#000\" }), /* @__PURE__ */ React.createElement(\"rect\", { id: \"red_stripe\", width: 5, height: 2, y: 1, x: 0, fill: \"#D00\" }), /* @__PURE__ */ React.createElement(\"rect\", { id: \"gold_stripe\", width: 5, height: 1, y: 2, x: 0, fill: \"#FFCE00\" }));\nexport default SvgDe;\n","import * as React from \"react\";\nconst SvgFr = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", viewBox: \"0 0 3 2\", ...props }, /* @__PURE__ */ React.createElement(\"rect\", { width: 3, height: 2, fill: \"#ED2939\" }), /* @__PURE__ */ React.createElement(\"rect\", { width: 2, height: 2, fill: \"#fff\" }), /* @__PURE__ */ React.createElement(\"rect\", { width: 1, height: 2, fill: \"#002395\" }));\nexport default SvgFr;\n","import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { FC, PropsWithChildren } from 'react';\nimport type { SelectListboxProps } from './SelectListbox';\n\nimport { SelectListbox } from './SelectListbox';\nimport FlagNl from './stories-images/nl.svg?react';\nimport FlagEn from './stories-images/gb.svg?react';\nimport FlagDu from './stories-images/de.svg?react';\nimport FlagFr from './stories-images/fr.svg?react';\n\nconst DATA = [\n  {\n    label: 'Nerderlands',\n    value: 'NL',\n  },\n  {\n    label: 'English',\n    value: 'EN',\n  },\n  {\n    label: 'Deutsch',\n    value: 'DU',\n  },\n  {\n    label: 'Français',\n    value: 'FR',\n  },\n];\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/SelectListbox',\n  component: SelectListbox,\n  argTypes: {\n    options: {\n      table: {\n        disable: true,\n      },\n    },\n    defaultValue: {\n      table: {\n        disable: true,\n      },\n    },\n    onChange: {\n      table: {\n        disable: true,\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      default: false,\n    },\n    buttonLabelBold: {\n      control: 'boolean',\n      default: false,\n    },\n    variant: {\n      options: ['default', 'noborder', 'pill', 'pillLeft', 'pillRight'],\n      control: { type: 'select' },\n    },\n    optionPositionRight: {\n      control: 'boolean',\n      default: false,\n    },\n    buttonLabelProp: {\n      table: {\n        disable: true,\n      },\n    },\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n    SelectOption: {\n      table: {\n        disable: true,\n      },\n    },\n    SelectOptionBox: {\n      table: {\n        disable: true,\n      },\n    },\n    SelectButton: {\n      table: {\n        disable: true,\n      },\n    },\n    SelectContainer: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta<typeof SelectListbox>;\n\nconst defaultArgs: Partial<PropsWithChildren<SelectListboxProps>> = {\n  options: DATA,\n  defaultValue: 'EN',\n  disabled: false,\n  buttonLabelBold: false,\n  maxOptionHeight: '200px',\n  optionPositionRight: false,\n  onChange: fn(),\n};\n\nconst Template: StoryFn<PropsWithChildren<SelectListboxProps>> = (args) => (\n  <div style={{ width: '10rem' }}>\n    <SelectListbox {...args}>\n      {DATA.map(({ label, value }, index) => (\n        <SelectListbox.SelectOption option={{ label, value }} index={index} key={`${value}`}>\n          {label}\n        </SelectListbox.SelectOption>\n      ))}\n    </SelectListbox>\n  </div>\n);\n\nexport const SelectListboxExample = Template.bind({});\nSelectListboxExample.args = {\n  ...defaultArgs,\n};\n\nconst ComponentOption: FC<{ label: string; value: string }> = ({ label, value }) => {\n  const flags = {\n    NL: <FlagNl style={{ width: '24px', height: '24px', marginRight: '10px' }} />,\n    EN: <FlagEn style={{ width: '24px', height: '24px', marginRight: '10px' }} />,\n    DU: <FlagDu style={{ width: '24px', height: '24px', marginRight: '10px' }} />,\n    FR: <FlagFr style={{ width: '24px', height: '24px', marginRight: '10px' }} />,\n  };\n\n  return (\n    <div style={{ display: 'flex' }}>\n      {flags[value as keyof typeof flags]}\n      {label}\n    </div>\n  );\n};\n\nconst TemplateWithComponent: StoryFn<PropsWithChildren<SelectListboxProps>> = (args) => (\n  <div style={{ width: '10rem' }}>\n    <SelectListbox {...args}>\n      {args.options.map(({ label, value }, index) => (\n        <SelectListbox.SelectOption option={{ label, value }} index={index} key={`${value}`}>\n          <ComponentOption label={label} value={value as string} />\n        </SelectListbox.SelectOption>\n      ))}\n    </SelectListbox>\n  </div>\n);\n\nexport const WithComponentOption = TemplateWithComponent.bind({});\nWithComponentOption.args = {\n  ...defaultArgs,\n};\n"],"names":["SvgNl","props","React","FlagNl","SvgGb","FlagEn","SvgDe","FlagDu","SvgFr","FlagFr","DATA","SelectListBox_stories","SelectListbox","defaultArgs","fn","Template","args","jsx","label","value","index","SelectListboxExample","ComponentOption","TemplateWithComponent","WithComponentOption"],"mappings":"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"}
+{"version":3,"file":"SelectListBox.stories.js","sources":["../../../src/components/SelectListbox/stories-images/nl.svg?react","../../../src/components/SelectListbox/stories-images/gb.svg?react","../../../src/components/SelectListbox/stories-images/de.svg?react","../../../src/components/SelectListbox/stories-images/fr.svg?react","../../../src/components/SelectListbox/SelectListBox.stories.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgNl = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", viewBox: \"0 0 9 6\", ...props }, /* @__PURE__ */ React.createElement(\"rect\", { fill: \"#21468B\", width: 9, height: 6 }), /* @__PURE__ */ React.createElement(\"rect\", { fill: \"#FFF\", width: 9, height: 4 }), /* @__PURE__ */ React.createElement(\"rect\", { fill: \"#AE1C28\", width: 9, height: 2 }));\nexport default SvgNl;\n","import * as React from \"react\";\nconst SvgGb = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", viewBox: \"0 0 60 30\", ...props }, /* @__PURE__ */ React.createElement(\"clipPath\", { id: \"t\" }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z\" })), /* @__PURE__ */ React.createElement(\"path\", { d: \"M0,0 v30 h60 v-30 z\", fill: \"#00247d\" }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M0,0 L60,30 M60,0 L0,30\", stroke: \"#fff\", strokeWidth: 6 }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M0,0 L60,30 M60,0 L0,30\", clipPath: \"url(#t)\", stroke: \"#cf142b\", strokeWidth: 4 }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M30,0 v30 M0,15 h60\", stroke: \"#fff\", strokeWidth: 10 }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M30,0 v30 M0,15 h60\", stroke: \"#cf142b\", strokeWidth: 6 }));\nexport default SvgGb;\n","import * as React from \"react\";\nconst SvgDe = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", viewBox: \"0 0 5 3\", ...props }, /* @__PURE__ */ React.createElement(\"desc\", null, \"Flag of Germany\"), /* @__PURE__ */ React.createElement(\"rect\", { id: \"black_stripe\", width: 5, height: 3, y: 0, x: 0, fill: \"#000\" }), /* @__PURE__ */ React.createElement(\"rect\", { id: \"red_stripe\", width: 5, height: 2, y: 1, x: 0, fill: \"#D00\" }), /* @__PURE__ */ React.createElement(\"rect\", { id: \"gold_stripe\", width: 5, height: 1, y: 2, x: 0, fill: \"#FFCE00\" }));\nexport default SvgDe;\n","import * as React from \"react\";\nconst SvgFr = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", viewBox: \"0 0 3 2\", ...props }, /* @__PURE__ */ React.createElement(\"rect\", { width: 3, height: 2, fill: \"#ED2939\" }), /* @__PURE__ */ React.createElement(\"rect\", { width: 2, height: 2, fill: \"#fff\" }), /* @__PURE__ */ React.createElement(\"rect\", { width: 1, height: 2, fill: \"#002395\" }));\nexport default SvgFr;\n","import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { FC, PropsWithChildren } from 'react';\nimport type { SelectListboxProps } from './SelectListbox';\n\nimport { SelectListbox } from './SelectListbox';\nimport FlagNl from './stories-images/nl.svg?react';\nimport FlagEn from './stories-images/gb.svg?react';\nimport FlagDu from './stories-images/de.svg?react';\nimport FlagFr from './stories-images/fr.svg?react';\n\nconst DATA = [\n  {\n    label: 'Standaard Nederlands (NL)',\n    value: 'NL',\n  },\n  {\n    label: 'English',\n    value: 'EN',\n  },\n  {\n    label: 'Deutsch',\n    value: 'DU',\n  },\n  {\n    label: 'Français',\n    value: 'FR',\n  },\n];\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/SelectListbox',\n  component: SelectListbox,\n  argTypes: {\n    options: {\n      table: {\n        disable: true,\n      },\n    },\n    defaultValue: {\n      table: {\n        disable: true,\n      },\n    },\n    onChange: {\n      table: {\n        disable: true,\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      default: false,\n    },\n    buttonLabelBold: {\n      control: 'boolean',\n      default: false,\n    },\n    variant: {\n      options: ['default', 'noborder', 'pill', 'pillLeft', 'pillRight'],\n      control: { type: 'select' },\n    },\n    optionPositionRight: {\n      control: 'boolean',\n      default: false,\n    },\n    buttonLabelProp: {\n      table: {\n        disable: true,\n      },\n    },\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n    SelectOption: {\n      table: {\n        disable: true,\n      },\n    },\n    SelectOptionBox: {\n      table: {\n        disable: true,\n      },\n    },\n    SelectButton: {\n      table: {\n        disable: true,\n      },\n    },\n    SelectContainer: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta<typeof SelectListbox>;\n\nconst defaultArgs: Partial<PropsWithChildren<SelectListboxProps>> = {\n  options: DATA,\n  defaultValue: 'EN',\n  disabled: false,\n  buttonLabelBold: false,\n  maxOptionHeight: '20rem',\n  optionPositionRight: false,\n  onChange: fn(),\n};\n\nconst Template: StoryFn<PropsWithChildren<SelectListboxProps>> = (args) => (\n  <div style={{ width: '10rem', margin: '4rem auto 0 auto' }}>\n    <SelectListbox {...args}>\n      {DATA.map(({ label, value }, index) => (\n        <SelectListbox.SelectOption option={{ label, value }} index={index} key={`${value}`}>\n          {label}\n        </SelectListbox.SelectOption>\n      ))}\n    </SelectListbox>\n  </div>\n);\n\nexport const SelectListboxExample = Template.bind({});\nSelectListboxExample.args = {\n  ...defaultArgs,\n};\n\nconst ComponentOption: FC<{ label: string; value: string }> = ({ label, value }) => {\n  const flags = {\n    NL: <FlagNl style={{ width: '24px', height: '24px', marginRight: '10px' }} />,\n    EN: <FlagEn style={{ width: '24px', height: '24px', marginRight: '10px' }} />,\n    DU: <FlagDu style={{ width: '24px', height: '24px', marginRight: '10px' }} />,\n    FR: <FlagFr style={{ width: '24px', height: '24px', marginRight: '10px' }} />,\n  };\n\n  return (\n    <div style={{ display: 'flex' }}>\n      {flags[value as keyof typeof flags]}\n      {label}\n    </div>\n  );\n};\n\nconst TemplateWithComponent: StoryFn<PropsWithChildren<SelectListboxProps>> = (args) => (\n  <div style={{ width: '10rem', marginTop: '3rem' }}>\n    <SelectListbox {...args}>\n      {args.options.map(({ label, value }, index) => (\n        <SelectListbox.SelectOption option={{ label, value }} index={index} key={`${value}`}>\n          <ComponentOption label={label} value={value as string} />\n        </SelectListbox.SelectOption>\n      ))}\n    </SelectListbox>\n  </div>\n);\n\nexport const WithComponentOption = TemplateWithComponent.bind({});\nWithComponentOption.args = {\n  ...defaultArgs,\n};\n"],"names":["SvgNl","props","React","SvgGb","SvgDe","SvgFr","DATA","SelectListBox_stories","SelectListbox","defaultArgs","fn","Template","args","jsx","label","value","index","SelectListboxExample","ComponentOption","FlagNl","FlagEn","FlagDu","FlagFr","TemplateWithComponent","WithComponentOption"],"mappings":";;;;AACA,MAAMA,IAAQ,CAACC,MAA0B,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,8BAA8B,SAAS,WAAW,GAAGD,KAAyB,gBAAAC,EAAM,cAAc,QAAQ,EAAE,MAAM,WAAW,OAAO,GAAG,QAAQ,EAAC,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,MAAM,QAAQ,OAAO,GAAG,QAAQ,EAAG,CAAA,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,MAAM,WAAW,OAAO,GAAG,QAAQ,EAAC,CAAE,CAAC,GCArYC,IAAQ,CAACF,MAA0B,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,8BAA8B,SAAS,aAAa,GAAGD,EAAO,GAAkB,gBAAAC,EAAM,cAAc,YAAY,EAAE,IAAI,OAAuB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,qDAAoD,CAAE,CAAC,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,uBAAuB,MAAM,WAAW,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,2BAA2B,QAAQ,QAAQ,aAAa,EAAC,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,2BAA2B,UAAU,WAAW,QAAQ,WAAW,aAAa,EAAC,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,uBAAuB,QAAQ,QAAQ,aAAa,GAAI,CAAA,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,uBAAuB,QAAQ,WAAW,aAAa,EAAC,CAAE,CAAC,GCAz1BE,IAAQ,CAACH,MAA0B,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,8BAA8B,SAAS,WAAW,GAAGD,EAAK,GAAoB,gBAAAC,EAAM,cAAc,QAAQ,MAAM,iBAAiB,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,IAAI,gBAAgB,OAAO,GAAG,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,OAAM,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,IAAI,cAAc,OAAO,GAAG,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,OAAQ,CAAA,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,IAAI,eAAe,OAAO,GAAG,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,UAAS,CAAE,CAAC,GCAriBG,IAAQ,CAACJ,MAA0B,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,8BAA8B,SAAS,WAAW,GAAGD,KAAyB,gBAAAC,EAAM,cAAc,QAAQ,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,UAAS,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,OAAQ,CAAA,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,UAAS,CAAE,CAAC,GCWrYI,IAAO;AAAA,EACX;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,SAAS,CAAC,WAAW,YAAY,QAAQ,YAAY,WAAW;AAAA,MAChE,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,IACA,qBAAqB;AAAA,MACnB,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAA8D;AAAA,EAClE,SAASH;AAAA,EACT,cAAc;AAAA,EACd,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,UAAUI,EAAG;AACf,GAEMC,IAA2D,CAACC,wBAC/D,OAAI,EAAA,OAAO,EAAE,OAAO,SAAS,QAAQ,mBAAA,GACpC,UAAC,gBAAAC,EAAAL,GAAA,EAAe,GAAGI,GAChB,UAAAN,EAAK,IAAI,CAAC,EAAE,OAAAQ,GAAO,OAAAC,KAASC,MAC3B,gBAAAH,EAACL,EAAc,cAAd,EAA2B,QAAQ,EAAE,OAAAM,GAAO,OAAAC,EAAM,GAAG,OAAAC,GACnD,UADsEF,EAAA,GAAA,GAAGC,CAAK,EAEjF,CACD,GACH,EACF,CAAA,GAGWE,IAAuBN,EAAS,KAAK,EAAE;AACpDM,EAAqB,OAAO;AAAA,EAC1B,GAAGR;AACL;AAEA,MAAMS,IAAwD,CAAC,EAAE,OAAAJ,GAAO,OAAAC,0BASnE,OAAI,EAAA,OAAO,EAAE,SAAS,OACpB,GAAA,UAAA;AAAA,EATS;AAAA,IACZ,IAAK,gBAAAF,EAAAM,GAAA,EAAO,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,aAAa,OAAU,EAAA,CAAA;AAAA,IAC3E,IAAK,gBAAAN,EAAAO,GAAA,EAAO,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,aAAa,OAAU,EAAA,CAAA;AAAA,IAC3E,IAAK,gBAAAP,EAAAQ,GAAA,EAAO,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,aAAa,OAAU,EAAA,CAAA;AAAA,IAC3E,IAAK,gBAAAR,EAAAS,GAAA,EAAO,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,aAAa,OAAU,EAAA,CAAA;AAAA,EAAA,EAKlEP,CAA2B;AAAA,EACjCD;AACH,EAAA,CAAA,GAIES,IAAwE,CAACX,MAC7E,gBAAAC,EAAC,SAAI,OAAO,EAAE,OAAO,SAAS,WAAW,UACvC,UAAA,gBAAAA,EAACL,KAAe,GAAGI,GAChB,YAAK,QAAQ,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAC,KAASC,wBAClCR,EAAc,cAAd,EAA2B,QAAQ,EAAE,OAAAM,GAAO,OAAAC,EAAM,GAAG,OAAAC,GACpD,UAAC,gBAAAH,EAAAK,GAAA,EAAgB,OAAAJ,GAAc,OAAAC,EAAwB,CAAA,KADgB,GAAGA,CAAK,EAEjF,CACD,GACH,EACF,CAAA,GAGWS,IAAsBD,EAAsB,KAAK,EAAE;AAChEC,EAAoB,OAAO;AAAA,EACzB,GAAGf;AACL;"}

package/dist/components/SelectListbox/SelectListbox.d.ts

@@ -8,7 +8,7 @@ import { ReactNode, PropsWithChildren } from 'react';
 interface ISelect {
     options: OptionValue[];
     defaultValue?: SelectValue;
-    maxOptionHeight?: string;
+    maxOptionHeight?: `${number}${'px' | 'rem'}`;
     disabled?: boolean;
     buttonLabelProp?: string;
     buttonLabelBold?: boolean;
@@ -29,17 +29,15 @@ export interface SelectListboxProps extends ISelect {
  * NOTE: If you want to use a custom component, you should add [aria-hidden="true"]
  *       on the root element so the screen reader will ignore it
  *
- * TODO: Add dynamic positioning/sizing of the optionbox based on the availible space
- *       Fixed positioned so it will not be affected by the parent container and will always be on top
  * TODO: Buttonlabel should take a component aswell zo the bold prop can be removed
  */
 export declare const SelectListbox: {
     ({ options, variant, optionPositionRight, defaultValue, maxOptionHeight, disabled, buttonLabelProp, buttonLabelBold, onChange, children, }: PropsWithChildren<SelectListboxProps>): import("react/jsx-runtime").JSX.Element;
     SelectOption: ({ option, index, children }: import('./components/SelectOption').SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
-    SelectButton: ({ variant, onChange, buttonLabelProp, buttonLabelBold, disabled, }: import('./components/SelectButton').SelectButtonProps) => import("react/jsx-runtime").JSX.Element;
+    SelectButton: import('react').ForwardRefExoticComponent<import('./components/SelectButton').SelectButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
     SelectContainer: ({ children }: {
         children?: ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
-    SelectOptionBox: ({ optionPositionRight, maxOptionHeight, children }: import('./components/SelectOptionBox').SelectOptionBoxProps) => import("react/jsx-runtime").JSX.Element | null;
+    SelectOptionBox: import('react').ForwardRefExoticComponent<import('./components/SelectOptionBox').SelectOptionBoxProps & import('react').RefAttributes<HTMLDivElement>>;
 };
 export {};

package/dist/components/SelectListbox/SelectListbox.js

@@ -1,38 +1,50 @@
-import { jsx as e, jsxs as O } from "react/jsx-runtime";
-import { SelectButton as o } from "./components/SelectButton.js";
-import { SelectContainer as r } from "./components/SelectContainer.js";
-import { SelectOptionBox as i } from "./components/SelectOptionBox.js";
-import { SelectOption as a } from "./components/SelectOption.js";
-import { SelectProvider as d } from "./SelectProvider.js";
-const t = ({
+import { jsx as t, jsxs as P } from "react/jsx-runtime";
+import { useState as o } from "react";
+import { SelectButton as i } from "./components/SelectButton.js";
+import { SelectContainer as n } from "./components/SelectContainer.js";
+import { SelectOptionBox as r } from "./components/SelectOptionBox.js";
+import { SelectOption as b } from "./components/SelectOption.js";
+import { SelectProvider as g } from "./SelectProvider.js";
+import { usePositionedFloaters as j } from "../hooks/usePositionedFloaters.js";
+const e = ({
   options: l,
-  variant: n,
-  optionPositionRight: c,
-  defaultValue: m = -1,
-  maxOptionHeight: p,
-  disabled: S,
-  buttonLabelProp: f = "label",
-  buttonLabelBold: x,
-  onChange: s,
-  children: B
-}) => /* @__PURE__ */ e(d, { options: l, defaultValue: m, children: /* @__PURE__ */ O(r, { children: [
-  /* @__PURE__ */ e(
-    o,
-    {
-      disabled: S,
-      buttonLabelProp: f,
-      buttonLabelBold: x,
-      variant: n,
-      onChange: s
-    }
-  ),
-  /* @__PURE__ */ e(i, { maxOptionHeight: p, optionPositionRight: c, children: B })
-] }) });
-t.SelectOption = a;
-t.SelectButton = o;
-t.SelectContainer = r;
-t.SelectOptionBox = i;
+  variant: m,
+  optionPositionRight: s,
+  defaultValue: c = -1,
+  maxOptionHeight: f,
+  disabled: p,
+  buttonLabelProp: S = "label",
+  buttonLabelBold: u,
+  onChange: x,
+  children: a
+}) => {
+  const [d, h] = o(null), [E, B] = o(null), { style: O } = j(d, E, {
+    mouseEvent: "click",
+    position: "bottomLeft",
+    offset: 4,
+    maxFixedHeight: f,
+    horizontalPosition: s ? "right" : "left"
+  });
+  return /* @__PURE__ */ t(g, { options: l, defaultValue: c, children: /* @__PURE__ */ P(n, { children: [
+    /* @__PURE__ */ t(
+      i,
+      {
+        disabled: p,
+        buttonLabelProp: S,
+        buttonLabelBold: u,
+        variant: m,
+        onChange: x,
+        ref: B
+      }
+    ),
+    /* @__PURE__ */ t(r, { ref: h, ...O, children: a })
+  ] }) });
+};
+e.SelectOption = b;
+e.SelectButton = i;
+e.SelectContainer = n;
+e.SelectOptionBox = r;
 export {
-  t as SelectListbox
+  e as SelectListbox
 };
 //# sourceMappingURL=SelectListbox.js.map

package/dist/components/SelectListbox/SelectListbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import type { ReactNode, PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\n\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\nimport { SelectProvider } from './SelectProvider';\n\ninterface ISelect {\n  options: OptionValue[];\n  defaultValue?: SelectValue;\n  maxOptionHeight?: string;\n  disabled?: boolean;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';\n  optionPositionRight?: boolean;\n  onChange?: (option: OptionValue) => void;\n  children?: ReactNode;\n}\n\nexport interface SelectListboxProps extends ISelect {\n  SelectOption?: typeof SelectOption;\n  SelectOptionBox?: typeof SelectOptionBox;\n  SelectButton: typeof SelectButton;\n  SelectContainer: typeof SelectContainer;\n}\n\n/**\n * SelectListbox component\n * Options can be a component or just a label, it should be wrapped in SelectListbox.SelectOption\n * NOTE: If you want to use a custom component, you should add [aria-hidden=\"true\"]\n *       on the root element so the screen reader will ignore it\n *\n * TODO: Add dynamic positioning/sizing of the optionbox based on the availible space\n *       Fixed positioned so it will not be affected by the parent container and will always be on top\n * TODO: Buttonlabel should take a component aswell zo the bold prop can be removed\n */\n\nexport const SelectListbox = ({\n  options,\n  variant,\n  optionPositionRight,\n  defaultValue = -1,\n  maxOptionHeight,\n  disabled,\n  buttonLabelProp = 'label',\n  buttonLabelBold,\n  onChange,\n  children,\n}: PropsWithChildren<SelectListboxProps>) => {\n  return (\n    <SelectProvider options={options} defaultValue={defaultValue}>\n      <SelectContainer>\n        <SelectButton\n          disabled={disabled}\n          buttonLabelProp={buttonLabelProp}\n          buttonLabelBold={buttonLabelBold}\n          variant={variant}\n          onChange={onChange}\n        />\n        <SelectOptionBox maxOptionHeight={maxOptionHeight} optionPositionRight={optionPositionRight}>\n          {children}\n        </SelectOptionBox>\n      </SelectContainer>\n    </SelectProvider>\n  );\n};\n\nSelectListbox.SelectOption = SelectOption;\nSelectListbox.SelectButton = SelectButton;\nSelectListbox.SelectContainer = SelectContainer;\nSelectListbox.SelectOptionBox = SelectOptionBox;\n"],"names":["SelectListbox","options","variant","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","children","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","SelectOption"],"mappings":";;;;;;AAwCO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAEK,gBAAAC,EAAAC,GAAA,EAAe,SAAAX,GAAkB,cAAAG,GAChC,4BAACS,GACC,EAAA,UAAA;AAAA,EAAA,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,UAAAR;AAAA,MACA,iBAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,SAAAN;AAAA,MACA,UAAAO;AAAA,IAAA;AAAA,EACF;AAAA,EACC,gBAAAE,EAAAI,GAAA,EAAgB,iBAAAV,GAAkC,qBAAAF,GAChD,UAAAO,EACH,CAAA;AAAA,EACF,CAAA,EACF,CAAA;AAIJV,EAAc,eAAegB;AAC7BhB,EAAc,eAAec;AAC7Bd,EAAc,kBAAkBa;AAChCb,EAAc,kBAAkBe;"}
+{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { ReactNode, PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\n\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\nimport { SelectProvider } from './SelectProvider';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\ninterface ISelect {\n  options: OptionValue[];\n  defaultValue?: SelectValue;\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  disabled?: boolean;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';\n  optionPositionRight?: boolean;\n  onChange?: (option: OptionValue) => void;\n  children?: ReactNode;\n}\n\nexport interface SelectListboxProps extends ISelect {\n  SelectOption?: typeof SelectOption;\n  SelectOptionBox?: typeof SelectOptionBox;\n  SelectButton: typeof SelectButton;\n  SelectContainer: typeof SelectContainer;\n}\n\n/**\n * SelectListbox component\n * Options can be a component or just a label, it should be wrapped in SelectListbox.SelectOption\n * NOTE: If you want to use a custom component, you should add [aria-hidden=\"true\"]\n *       on the root element so the screen reader will ignore it\n *\n * TODO: Buttonlabel should take a component aswell zo the bold prop can be removed\n */\n\nexport const SelectListbox = ({\n  options,\n  variant,\n  optionPositionRight,\n  defaultValue = -1,\n  maxOptionHeight,\n  disabled,\n  buttonLabelProp = 'label',\n  buttonLabelBold,\n  onChange,\n  children,\n}: PropsWithChildren<SelectListboxProps>) => {\n  const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\n    mouseEvent: 'click',\n    position: 'bottomLeft',\n    offset: 4,\n    maxFixedHeight: maxOptionHeight,\n    horizontalPosition: optionPositionRight ? 'right' : 'left',\n  });\n\n  return (\n    <SelectProvider options={options} defaultValue={defaultValue}>\n      <SelectContainer>\n        <SelectButton\n          disabled={disabled}\n          buttonLabelProp={buttonLabelProp}\n          buttonLabelBold={buttonLabelBold}\n          variant={variant}\n          onChange={onChange}\n          ref={setReferenceElement}\n        />\n\n        <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n          {children}\n        </SelectOptionBox>\n      </SelectContainer>\n    </SelectProvider>\n  );\n};\n\nSelectListbox.SelectOption = SelectOption;\nSelectListbox.SelectButton = SelectButton;\nSelectListbox.SelectContainer = SelectContainer;\nSelectListbox.SelectOptionBox = SelectOptionBox;\n"],"names":["SelectListbox","options","variant","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","SelectOption"],"mappings":";;;;;;;;AA0CO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAA6C;AAC3C,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzE,CAACC,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,EAAE,OAAOG,EAAA,IAAkBC,EAAsBN,GAAiBG,GAAkB;AAAA,IACxF,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,gBAAgBT;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,EAAA,CACrD;AAED,SACG,gBAAAe,EAAAC,GAAA,EAAe,SAAAlB,GAAkB,cAAAG,GAChC,4BAACgB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAf;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAN;AAAA,QACA,UAAAO;AAAA,QACA,KAAKM;AAAA,MAAA;AAAA,IACP;AAAA,sBAECO,GAAgB,EAAA,KAAKV,GAAqB,GAAGI,GAC3C,UAAAN,GACH;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;AAEAV,EAAc,eAAeuB;AAC7BvB,EAAc,eAAeqB;AAC7BrB,EAAc,kBAAkBoB;AAChCpB,EAAc,kBAAkBsB;"}

package/dist/components/SelectListbox/SelectProvider.js

@@ -1,36 +1,38 @@
-import { jsx as m } from "react/jsx-runtime";
-import { createContext as g, useState as l, useRef as p, useId as C, useContext as P } from "react";
-const d = g({}), L = ({ options: e, defaultValue: o, children: i }) => {
-  const [c, v] = l({ value: "", label: "" }), [x, s] = l(!1), [f, r] = l(-1), I = p(C()), b = () => {
+import { jsx as g } from "react/jsx-runtime";
+import { createContext as m, useState as o, useRef as p, useId as C, useEffect as P, useContext as V } from "react";
+const i = m({}), L = ({ options: e, defaultValue: c, children: v }) => {
+  const [r, x] = o({ value: "", label: "" }), [f, s] = o(!1), [n, u] = o(-1), I = p(C()), b = () => {
     s((t) => !t);
-  }, u = (t) => e.find((n) => n.value === t) || {
+  }, a = (t) => e.find((l) => l.value === t) || {
     value: -1,
     label: "",
     selectedLabel: "-"
-  }, a = (t) => {
-    const n = e.findIndex((S) => S.value === t.value);
-    r(n), v(t), s(!1);
+  }, d = (t) => {
+    const l = e.findIndex((S) => S.value === t.value);
+    u(l), x(t), s(!1);
   };
-  return o !== -1 && !c.value && a(u(o)), /* @__PURE__ */ m(
-    d.Provider,
+  return c !== -1 && !r.value && d(a(c)), P(() => {
+    console.log(n);
+  }, [n]), /* @__PURE__ */ g(
+    i.Provider,
     {
       value: {
         options: e,
-        selectedValue: c,
-        setSelectedValue: a,
-        isOpen: x,
+        selectedValue: r,
+        setSelectedValue: d,
+        isOpen: f,
         setIsOpen: s,
         toggleListbox: b,
-        getValue: u,
-        activeIndex: f,
-        setActiveIndex: r,
+        getValue: a,
+        activeIndex: n,
+        setActiveIndex: u,
         listboxId: I.current
       },
-      children: i
+      children: v
     }
   );
 }, O = () => {
-  const e = P(d);
+  const e = V(i);
   if (e === void 0)
     throw new Error("useSelect can only be used in an SelectProvider");
   return e;

package/dist/components/SelectListbox/SelectProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectProvider.js","sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nexport type SelectValue = string | number | null;\n\nexport type OptionValue = {\n  value: SelectValue;\n  label: string;\n  selectedLabel?: string;\n  disabled?: boolean;\n};\nexport interface SelectListboxContext {\n  options: OptionValue[];\n  selectedValue: OptionValue;\n  setSelectedValue: (v: OptionValue) => void;\n  isOpen: boolean;\n  setIsOpen: (v: boolean) => void;\n  toggleListbox: () => void;\n  getValue: (value: SelectValue) => OptionValue;\n  activeIndex: number;\n  setActiveIndex: (v: number) => void;\n  listboxId: string;\n}\n\nconst SelectContext = createContext<SelectListboxContext>({} as SelectListboxContext);\n\ninterface Props {\n  options: OptionValue[];\n  defaultValue: SelectValue;\n}\n\nexport const SelectProvider = ({ options, defaultValue, children }: PropsWithChildren<Props>) => {\n  const [value, setValue] = useState<OptionValue>({ value: '', label: '' });\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const listboxId = useRef<string>(useId());\n\n  const toggleListbox = () => {\n    setIsOpen((status) => !status);\n  };\n\n  const getValue = (value: SelectValue) => {\n    return (\n      options.find((option) => option.value === value) || {\n        value: -1,\n        label: '',\n        selectedLabel: '-',\n      }\n    );\n  };\n\n  const setSelectedValue = (value: OptionValue) => {\n    const selectedIndex = options.findIndex((option) => option.value === value.value);\n    setActiveIndex(selectedIndex);\n    setValue(value);\n    setIsOpen(false);\n  };\n\n  if (defaultValue !== -1 && !value.value) {\n    setSelectedValue(getValue(defaultValue));\n  }\n\n  return (\n    <SelectContext.Provider\n      value={{\n        options,\n        selectedValue: value,\n        setSelectedValue,\n        isOpen,\n        setIsOpen,\n        toggleListbox,\n        getValue,\n        activeIndex,\n        setActiveIndex,\n        listboxId: listboxId.current,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  );\n};\n\nexport const useSelect = () => {\n  const context = useContext(SelectContext);\n\n  if (context === undefined) throw new Error('useSelect can only be used in an SelectProvider');\n\n  return context;\n};\n"],"names":["SelectContext","createContext","SelectProvider","options","defaultValue","children","value","setValue","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","listboxId","useRef","useId","toggleListbox","status","getValue","option","setSelectedValue","selectedIndex","jsx","useSelect","context","useContext"],"mappings":";;AAyBA,MAAMA,IAAgBC,EAAoC,CAAA,CAA0B,GAOvEC,IAAiB,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,UAAAC,QAAyC;AACzF,QAAA,CAACC,GAAOC,CAAQ,IAAIC,EAAsB,EAAE,OAAO,IAAI,OAAO,GAAA,CAAI,GAClE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3CK,IAAYC,EAAeC,EAAA,CAAO,GAElCC,IAAgB,MAAM;AAChB,IAAAN,EAAA,CAACO,MAAW,CAACA,CAAM;AAAA,EAAA,GAGzBC,IAAW,CAACZ,MAEdH,EAAQ,KAAK,CAACgB,MAAWA,EAAO,UAAUb,CAAK,KAAK;AAAA,IAClD,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe;AAAA,EAAA,GAKfc,IAAmB,CAACd,MAAuB;AACzC,UAAAe,IAAgBlB,EAAQ,UAAU,CAACgB,MAAWA,EAAO,UAAUb,EAAM,KAAK;AAChF,IAAAM,EAAeS,CAAa,GAC5Bd,EAASD,CAAK,GACdI,EAAU,EAAK;AAAA,EAAA;AAGjB,SAAIN,MAAiB,MAAM,CAACE,EAAM,SACfc,EAAAF,EAASd,CAAY,CAAC,GAIvC,gBAAAkB;AAAA,IAACtB,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,SAAAG;AAAA,QACA,eAAeG;AAAA,QACf,kBAAAc;AAAA,QACA,QAAAX;AAAA,QACA,WAAAC;AAAA,QACA,eAAAM;AAAA,QACA,UAAAE;AAAA,QACA,aAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,WAAWC,EAAU;AAAA,MACvB;AAAA,MAEC,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGP,GAEakB,IAAY,MAAM;AACvB,QAAAC,IAAUC,EAAWzB,CAAa;AAExC,MAAIwB,MAAY;AAAiB,UAAA,IAAI,MAAM,iDAAiD;AAErF,SAAAA;AACT;"}
+{"version":3,"file":"SelectProvider.js","sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef, useEffect } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nexport type SelectValue = string | number | null;\n\nexport type OptionValue = {\n  value: SelectValue;\n  label: string;\n  selectedLabel?: string;\n  disabled?: boolean;\n};\nexport interface SelectListboxContext {\n  options: OptionValue[];\n  selectedValue: OptionValue;\n  setSelectedValue: (v: OptionValue) => void;\n  isOpen: boolean;\n  setIsOpen: (v: boolean) => void;\n  toggleListbox: () => void;\n  getValue: (value: SelectValue) => OptionValue;\n  activeIndex: number;\n  setActiveIndex: (v: number) => void;\n  listboxId: string;\n}\n\nconst SelectContext = createContext<SelectListboxContext>({} as SelectListboxContext);\n\ninterface Props {\n  options: OptionValue[];\n  defaultValue: SelectValue;\n}\n\nexport const SelectProvider = ({ options, defaultValue, children }: PropsWithChildren<Props>) => {\n  const [value, setValue] = useState<OptionValue>({ value: '', label: '' });\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const listboxId = useRef<string>(useId());\n\n  const toggleListbox = () => {\n    setIsOpen((status) => !status);\n  };\n\n  const getValue = (value: SelectValue) => {\n    return (\n      options.find((option) => option.value === value) || {\n        value: -1,\n        label: '',\n        selectedLabel: '-',\n      }\n    );\n  };\n\n  const setSelectedValue = (value: OptionValue) => {\n    const selectedIndex = options.findIndex((option) => option.value === value.value);\n    setActiveIndex(selectedIndex);\n    setValue(value);\n    setIsOpen(false);\n  };\n\n  if (defaultValue !== -1 && !value.value) {\n    setSelectedValue(getValue(defaultValue));\n  }\n\n  useEffect(() => {\n    console.log(activeIndex);\n  }, [activeIndex]);\n\n  return (\n    <SelectContext.Provider\n      value={{\n        options,\n        selectedValue: value,\n        setSelectedValue,\n        isOpen,\n        setIsOpen,\n        toggleListbox,\n        getValue,\n        activeIndex,\n        setActiveIndex,\n        listboxId: listboxId.current,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  );\n};\n\nexport const useSelect = () => {\n  const context = useContext(SelectContext);\n\n  if (context === undefined) throw new Error('useSelect can only be used in an SelectProvider');\n\n  return context;\n};\n"],"names":["SelectContext","createContext","SelectProvider","options","defaultValue","children","value","setValue","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","listboxId","useRef","useId","toggleListbox","status","getValue","option","setSelectedValue","selectedIndex","useEffect","jsx","useSelect","context","useContext"],"mappings":";;AAyBA,MAAMA,IAAgBC,EAAoC,CAAA,CAA0B,GAOvEC,IAAiB,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,UAAAC,QAAyC;AACzF,QAAA,CAACC,GAAOC,CAAQ,IAAIC,EAAsB,EAAE,OAAO,IAAI,OAAO,GAAA,CAAI,GAClE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3CK,IAAYC,EAAeC,EAAA,CAAO,GAElCC,IAAgB,MAAM;AAChB,IAAAN,EAAA,CAACO,MAAW,CAACA,CAAM;AAAA,EAAA,GAGzBC,IAAW,CAACZ,MAEdH,EAAQ,KAAK,CAACgB,MAAWA,EAAO,UAAUb,CAAK,KAAK;AAAA,IAClD,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe;AAAA,EAAA,GAKfc,IAAmB,CAACd,MAAuB;AACzC,UAAAe,IAAgBlB,EAAQ,UAAU,CAACgB,MAAWA,EAAO,UAAUb,EAAM,KAAK;AAChF,IAAAM,EAAeS,CAAa,GAC5Bd,EAASD,CAAK,GACdI,EAAU,EAAK;AAAA,EAAA;AAGjB,SAAIN,MAAiB,MAAM,CAACE,EAAM,SACfc,EAAAF,EAASd,CAAY,CAAC,GAGzCkB,EAAU,MAAM;AACd,YAAQ,IAAIX,CAAW;AAAA,EAAA,GACtB,CAACA,CAAW,CAAC,GAGd,gBAAAY;AAAA,IAACvB,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,SAAAG;AAAA,QACA,eAAeG;AAAA,QACf,kBAAAc;AAAA,QACA,QAAAX;AAAA,QACA,WAAAC;AAAA,QACA,eAAAM;AAAA,QACA,UAAAE;AAAA,QACA,aAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,WAAWC,EAAU;AAAA,MACvB;AAAA,MAEC,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGP,GAEamB,IAAY,MAAM;AACvB,QAAAC,IAAUC,EAAW1B,CAAa;AAExC,MAAIyB,MAAY;AAAiB,UAAA,IAAI,MAAM,iDAAiD;AAErF,SAAAA;AACT;"}

package/dist/components/SelectListbox/components/SelectButton.d.ts

@@ -7,4 +7,4 @@ export interface SelectButtonProps {
     buttonLabelBold?: boolean;
     disabled?: boolean;
 }
-export declare const SelectButton: ({ variant, onChange, buttonLabelProp, buttonLabelBold, disabled, }: SelectButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectButton: import('react').ForwardRefExoticComponent<SelectButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/SelectListbox/components/SelectButton.js

@@ -1,59 +1,53 @@
-import { jsxs as w, jsx as D } from "react/jsx-runtime";
+import { jsx as a, jsxs as D } from "react/jsx-runtime";
 import { c as f } from "../../../clsx-DB4S2d7J.js";
-import { useRef as p, useEffect as c } from "react";
-import { s } from "../../../SelectListbox.module-wZfvJXBJ.js";
+import { forwardRef as C, useRef as g, useEffect as c } from "react";
+import { s as o } from "../../../SelectListbox.module-iJtzAajj.js";
 import { Icon as E } from "../../Icon/Icon.js";
-import { useSelect as R } from "../SelectProvider.js";
-const O = ({
-  variant: a,
-  onChange: i,
-  buttonLabelProp: b = "label",
-  buttonLabelBold: m,
-  disabled: x = !1
-}) => {
-  const l = p(null), n = p(!0), { listboxId: g, isOpen: t, selectedValue: e, toggleListbox: d, setIsOpen: u, setActiveIndex: y, options: I } = R() || {}, k = (r) => {
+import { useSelect as L } from "../SelectProvider.js";
+const P = C((d, u) => {
+  const { variant: b, onChange: n, buttonLabelProp: m = "label", buttonLabelBold: x, disabled: h = !1 } = d, l = g(null), i = g(!0), { listboxId: w, isOpen: t, selectedValue: e, toggleListbox: y, setIsOpen: p, setActiveIndex: I, options: k } = L() || {}, v = (r) => {
     switch (r.key) {
       case "Enter":
         if (r.preventDefault(), !t) {
-          u(!0);
+          p(!0);
           return;
         }
         break;
       case "Escape":
-        t && (r.stopPropagation(), y(I.findIndex((o) => o.value === (e == null ? void 0 : e.value))), u(!1));
+        t && (r.stopPropagation(), I(k.findIndex((s) => s.value === (e == null ? void 0 : e.value))), p(!1));
         break;
     }
   };
   return c(() => {
-    var r, o;
-    t ? (r = l.current) == null || r.blur() : !n.current && ((o = l.current) == null || o.focus());
-  }, [t]), c(() => {
-    i && i(e);
-  }, [i, e]), c(() => (n.current = !1, () => {
-    n.current = !0;
-  }), []), /* @__PURE__ */ w(
+    var r, s;
+    t ? ((r = l.current) == null ? void 0 : r.children[0]).blur() : !i.current && ((s = l.current) == null ? void 0 : s.children[0]).focus();
+  }, [t]), c(() => (i.current = !1, () => {
+    i.current = !0;
+  }), []), c(() => {
+    n && n(e);
+  }, [n, e]), /* @__PURE__ */ a("span", { ref: l, children: /* @__PURE__ */ D(
     "button",
     {
-      className: f(s["select-listbox-trigger"], {
-        [s[`select-listbox-trigger--${a}`]]: a,
-        [s["select-listbox-trigger--bold"]]: m
+      className: f(o["select-listbox-trigger"], {
+        [o[`select-listbox-trigger--${b}`]]: b,
+        [o["select-listbox-trigger--bold"]]: x
       }),
       type: "button",
-      onClick: d,
-      onKeyDown: k,
+      onClick: y,
+      onKeyDown: v,
       "aria-expanded": t,
       "aria-haspopup": "listbox",
       "aria-label": `${e.label}`,
-      disabled: x,
-      "aria-controls": g,
-      ref: l,
+      disabled: h,
+      "aria-controls": w,
+      ...u && { ref: u },
       children: [
-        e[b],
-        /* @__PURE__ */ D(
+        /* @__PURE__ */ a("span", { className: o["select-listbox-trigger-label"], children: e[m] }),
+        /* @__PURE__ */ a(
           E,
           {
-            className: f(s["select-listbox-trigger-icon"], {
-              [s["select-listbox-trigger-icon--open"]]: t
+            className: f(o["select-listbox-trigger-icon"], {
+              [o["select-listbox-trigger-icon--open"]]: t
             }),
             name: "CheveronDown",
             size: 16
@@ -61,9 +55,9 @@ const O = ({
         )
       ]
     }
-  );
-};
+  ) });
+});
 export {
-  O as SelectButton
+  P as SelectButton
 };
 //# sourceMappingURL=SelectButton.js.map

package/dist/components/SelectListbox/components/SelectButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.js","sources":["../../../../src/components/SelectListbox/components/SelectButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type {KeyboardEvent} from 'react';\nimport type { OptionValue, SelectValue } from 'components/SelectListbox/SelectProvider';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { Icon } from 'components/Icon';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectButtonProps {\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';\n  onChange?: (option: OptionValue) => void;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  disabled?: boolean;\n}\n\nexport const SelectButton = ({\n  variant,\n  onChange,\n  buttonLabelProp = 'label',\n  buttonLabelBold,\n  disabled = false,\n}: SelectButtonProps) => {\n  const selectButtonRef = useRef<HTMLButtonElement>(null);\n  const isFirstRender = useRef(true);\n  const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options } = useSelect() || {};\n\n  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        if (!isOpen) {\n          setIsOpen(true);\n          return;\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setActiveIndex(options.findIndex((option) => option.value === selectedValue?.value));\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    isOpen ? selectButtonRef.current?.blur() : !isFirstRender.current && selectButtonRef.current?.focus();\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (onChange) onChange(selectedValue);\n  }, [onChange, selectedValue]);\n\n  useEffect(() => {\n    isFirstRender.current = false;\n\n    return () => {\n      isFirstRender.current = true;\n    };\n  }, []);\n\n  return (\n    <button\n      className={clsx(styles['select-listbox-trigger'], {\n        [styles[`select-listbox-trigger--${variant}`]]: variant,\n        [styles['select-listbox-trigger--bold']]: buttonLabelBold,\n      })}\n      type=\"button\"\n      onClick={toggleListbox}\n      onKeyDown={onTriggerKeyDown}\n      aria-expanded={isOpen}\n      aria-haspopup=\"listbox\"\n      aria-label={`${selectedValue.label}`}\n      disabled={disabled}\n      aria-controls={listboxId}\n      ref={selectButtonRef}\n    >\n      {selectedValue[buttonLabelProp as keyof SelectValue]}\n\n      <Icon\n        className={clsx(styles['select-listbox-trigger-icon'], {\n          [styles['select-listbox-trigger-icon--open']]: isOpen,\n        })}\n        name=\"CheveronDown\"\n        size={16}\n      />\n    </button>\n  );\n};\n"],"names":["SelectButton","variant","onChange","buttonLabelProp","buttonLabelBold","disabled","selectButtonRef","useRef","isFirstRender","listboxId","isOpen","selectedValue","toggleListbox","setIsOpen","setActiveIndex","options","useSelect","onTriggerKeyDown","event","option","useEffect","_a","_b","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;AAkBO,MAAMA,IAAe,CAAC;AAAA,EAC3B,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAAyB;AACjB,QAAAC,IAAkBC,EAA0B,IAAI,GAChDC,IAAgBD,EAAO,EAAI,GAC3B,EAAE,WAAAE,GAAW,QAAAC,GAAQ,eAAAC,GAAe,eAAAC,GAAe,WAAAC,GAAW,gBAAAC,GAAgB,SAAAC,EAAQ,IAAIC,EAAU,KAAK,CAAA,GAEzGC,IAAmB,CAACC,MAA4C;AACpE,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AAEH,YADAA,EAAM,eAAe,GACjB,CAACR,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,QACF;AACA;AAAA,MACF,KAAK;AACH,QAAIH,MACFQ,EAAM,gBAAgB,GACPJ,EAAAC,EAAQ,UAAU,CAACI,MAAWA,EAAO,WAAUR,KAAA,gBAAAA,EAAe,MAAK,CAAC,GACnFE,EAAU,EAAK;AAEjB;AAAA,IACJ;AAAA,EAAA;AAGF,SAAAO,EAAU,MAAM;;AACL,IAAAV,KAAAW,IAAAf,EAAgB,YAAhB,QAAAe,EAAyB,SAAS,CAACb,EAAc,aAAWc,IAAAhB,EAAgB,YAAhB,QAAAgB,EAAyB;AAAA,EAAM,GACnG,CAACZ,CAAM,CAAC,GAEXU,EAAU,MAAM;AACV,IAAAlB,KAAUA,EAASS,CAAa;AAAA,EAAA,GACnC,CAACT,GAAUS,CAAa,CAAC,GAE5BS,EAAU,OACRZ,EAAc,UAAU,IAEjB,MAAM;AACX,IAAAA,EAAc,UAAU;AAAA,EAAA,IAEzB,CAAE,CAAA,GAGH,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,wBAAwB,GAAG;AAAA,QAChD,CAACA,EAAO,2BAA2BxB,CAAO,EAAE,CAAC,GAAGA;AAAA,QAChD,CAACwB,EAAO,8BAA8B,CAAC,GAAGrB;AAAA,MAAA,CAC3C;AAAA,MACD,MAAK;AAAA,MACL,SAASQ;AAAA,MACT,WAAWK;AAAA,MACX,iBAAeP;AAAA,MACf,iBAAc;AAAA,MACd,cAAY,GAAGC,EAAc,KAAK;AAAA,MAClC,UAAAN;AAAA,MACA,iBAAeI;AAAA,MACf,KAAKH;AAAA,MAEJ,UAAA;AAAA,QAAAK,EAAcR,CAAoC;AAAA,QAEnD,gBAAAuB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAWH,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrD,CAACA,EAAO,mCAAmC,CAAC,GAAGf;AAAA,YAAA,CAChD;AAAA,YACD,MAAK;AAAA,YACL,MAAM;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"SelectButton.js","sources":["../../../../src/components/SelectListbox/components/SelectButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, forwardRef } from 'react';\n\nimport type { KeyboardEvent } from 'react';\nimport type { OptionValue, SelectValue } from 'components/SelectListbox/SelectProvider';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { Icon } from 'components/Icon';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectButtonProps {\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';\n  onChange?: (option: OptionValue) => void;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  disabled?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n  const { variant, onChange, buttonLabelProp = 'label', buttonLabelBold, disabled = false } = props;\n  const buttonWrapper = useRef<HTMLSpanElement>(null);\n  const isFirstRender = useRef(true);\n  const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options } = useSelect() || {};\n\n  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        if (!isOpen) {\n          setIsOpen(true);\n          return;\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setActiveIndex(options.findIndex((option) => option.value === selectedValue?.value));\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    isOpen\n      ? (buttonWrapper.current?.children[0] as HTMLButtonElement).blur()\n      : !isFirstRender.current && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n  }, [isOpen]);\n\n  useEffect(() => {\n    isFirstRender.current = false;\n\n    return () => {\n      isFirstRender.current = true;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (onChange) onChange(selectedValue);\n  }, [onChange, selectedValue]);\n\n  return (\n    <span ref={buttonWrapper}>\n      <button\n        className={clsx(styles['select-listbox-trigger'], {\n          [styles[`select-listbox-trigger--${variant}`]]: variant,\n          [styles['select-listbox-trigger--bold']]: buttonLabelBold,\n        })}\n        type=\"button\"\n        onClick={toggleListbox}\n        onKeyDown={onTriggerKeyDown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={`${selectedValue.label}`}\n        disabled={disabled}\n        aria-controls={listboxId}\n        {...(ref && { ref: ref })}\n      >\n        <span className={styles['select-listbox-trigger-label']}>\n          {selectedValue[buttonLabelProp as keyof SelectValue]}\n        </span>\n\n        <Icon\n          className={clsx(styles['select-listbox-trigger-icon'], {\n            [styles['select-listbox-trigger-icon--open']]: isOpen,\n          })}\n          name=\"CheveronDown\"\n          size={16}\n        />\n      </button>\n    </span>\n  );\n});\n"],"names":["SelectButton","forwardRef","props","ref","variant","onChange","buttonLabelProp","buttonLabelBold","disabled","buttonWrapper","useRef","isFirstRender","listboxId","isOpen","selectedValue","toggleListbox","setIsOpen","setActiveIndex","options","useSelect","onTriggerKeyDown","event","option","useEffect","_a","_b","jsx","jsxs","clsx","styles","Icon"],"mappings":";;;;;;AAkBO,MAAMA,IAAeC,EAAiD,CAACC,GAAOC,MAAQ;AACrF,QAAA,EAAE,SAAAC,GAAS,UAAAC,GAAU,iBAAAC,IAAkB,SAAS,iBAAAC,GAAiB,UAAAC,IAAW,GAAU,IAAAN,GACtFO,IAAgBC,EAAwB,IAAI,GAC5CC,IAAgBD,EAAO,EAAI,GAC3B,EAAE,WAAAE,GAAW,QAAAC,GAAQ,eAAAC,GAAe,eAAAC,GAAe,WAAAC,GAAW,gBAAAC,GAAgB,SAAAC,EAAQ,IAAIC,EAAU,KAAK,CAAA,GAEzGC,IAAmB,CAACC,MAA4C;AACpE,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AAEH,YADAA,EAAM,eAAe,GACjB,CAACR,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,QACF;AACA;AAAA,MACF,KAAK;AACH,QAAIH,MACFQ,EAAM,gBAAgB,GACPJ,EAAAC,EAAQ,UAAU,CAACI,MAAWA,EAAO,WAAUR,KAAA,gBAAAA,EAAe,MAAK,CAAC,GACnFE,EAAU,EAAK;AAEjB;AAAA,IACJ;AAAA,EAAA;AAGF,SAAAO,EAAU,MAAM;;AACd,IAAAV,MACKW,IAAAf,EAAc,YAAd,gBAAAe,EAAuB,SAAS,IAAyB,SAC1D,CAACb,EAAc,aAAYc,IAAAhB,EAAc,YAAd,gBAAAgB,EAAuB,SAAS,IAAyB;EAAM,GAC7F,CAACZ,CAAM,CAAC,GAEXU,EAAU,OACRZ,EAAc,UAAU,IAEjB,MAAM;AACX,IAAAA,EAAc,UAAU;AAAA,EAAA,IAEzB,CAAE,CAAA,GAELY,EAAU,MAAM;AACV,IAAAlB,KAAUA,EAASS,CAAa;AAAA,EAAA,GACnC,CAACT,GAAUS,CAAa,CAAC,GAG1B,gBAAAY,EAAC,QAAK,EAAA,KAAKjB,GACT,UAAA,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,wBAAwB,GAAG;AAAA,QAChD,CAACA,EAAO,2BAA2BzB,CAAO,EAAE,CAAC,GAAGA;AAAA,QAChD,CAACyB,EAAO,8BAA8B,CAAC,GAAGtB;AAAA,MAAA,CAC3C;AAAA,MACD,MAAK;AAAA,MACL,SAASQ;AAAA,MACT,WAAWK;AAAA,MACX,iBAAeP;AAAA,MACf,iBAAc;AAAA,MACd,cAAY,GAAGC,EAAc,KAAK;AAAA,MAClC,UAAAN;AAAA,MACA,iBAAeI;AAAA,MACd,GAAIT,KAAO,EAAE,KAAAA,EAAS;AAAA,MAEvB,UAAA;AAAA,QAAA,gBAAAuB,EAAC,UAAK,WAAWG,EAAO,8BAA8B,GACnD,UAAAf,EAAcR,CAAoC,GACrD;AAAA,QAEA,gBAAAoB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrD,CAACA,EAAO,mCAAmC,CAAC,GAAGhB;AAAA,YAAA,CAChD;AAAA,YACD,MAAK;AAAA,YACL,MAAM;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}

package/dist/components/SelectListbox/components/SelectContainer.js

@@ -1,7 +1,7 @@
 import { jsx as c } from "react/jsx-runtime";
 import { useRef as i, useCallback as u, useEffect as l } from "react";
 import { useSelect as m } from "../SelectProvider.js";
-import { s as f } from "../../../SelectListbox.module-wZfvJXBJ.js";
+import { s as f } from "../../../SelectListbox.module-iJtzAajj.js";
 const E = ({ children: o }) => {
   const { isOpen: r, setIsOpen: n } = m(), t = i(null), e = u(
     ({ target: s }) => {

package/dist/components/SelectListbox/components/SelectOption.js

@@ -2,51 +2,51 @@ import { jsx as d } from "react/jsx-runtime";
 import { c as v } from "../../../clsx-DB4S2d7J.js";
 import { useRef as D, useEffect as p } from "react";
 import { useSelect as y } from "../SelectProvider.js";
-import { s as b } from "../../../SelectListbox.module-wZfvJXBJ.js";
-const S = ({ option: s, index: l, children: m }) => {
-  const f = D(null), { isOpen: c, activeIndex: r, setActiveIndex: o, selectedValue: u, setSelectedValue: n, setIsOpen: i, options: t } = y(), w = (e) => {
-    n(t[e]), i(!1);
+import { s as b } from "../../../SelectListbox.module-iJtzAajj.js";
+const S = ({ option: t, index: l, children: m }) => {
+  const o = D(null), { isOpen: r, activeIndex: s, setActiveIndex: c, selectedValue: f, setSelectedValue: u, setIsOpen: i, options: a } = y(), w = (e) => {
+    u(a[e]), i(!1);
   }, k = (e) => {
     switch (e.key) {
       case "Tab":
-        e.preventDefault(), c && i(!1);
+        e.preventDefault(), r && i(!1);
         break;
       case "ArrowDown":
       case "ArrowUp":
-        if (e.preventDefault(), !c)
+        if (e.preventDefault(), !r)
           return;
-        e.key === "ArrowDown" && r < t.length - 1 && o(Number((a) => a + 1)), e.key === "ArrowUp" && r > 0 && o(Number((a) => a - 1));
+        e.key === "ArrowDown" && s < a.length - 1 && c(s + 1), e.key === "ArrowUp" && s > 0 && c(s - 1);
         break;
       case "Enter":
-        e.preventDefault(), t != null && t.length && r > -1 && !t[r].disabled && w(r);
+        e.preventDefault(), a != null && a.length && s > -1 && !a[s].disabled && w(s);
         break;
       case "Escape":
-        c && (e.stopPropagation(), i(!1));
+        r && (e.stopPropagation(), i(!1));
         break;
     }
   };
   return p(() => {
-    var e, a;
-    l === r && (c ? (e = f.current) == null || e.focus() : (a = f.current) == null || a.blur());
-  }, [r, l, c]), p(() => {
-    u.value === s.value && o(l);
-  }, [l, s.value, u.value, o]), /* @__PURE__ */ d(
+    var e, n;
+    l === s && (r ? (e = o.current) == null || e.focus() : (n = o.current) == null || n.blur());
+  }, [s, l, r]), p(() => {
+    f.value === t.value && c(l);
+  }, [l, t.value, f.value, c]), /* @__PURE__ */ d(
     "li",
     {
       className: v(b["select-listbox-option"], {
-        [b["select-listbox-option--active"]]: l === r
+        [b["select-listbox-option--active"]]: l === s
       }),
-      ...!s.disabled && {
-        onClick: () => n(s),
+      ...!t.disabled && {
+        onClick: () => u(t),
         onKeyDown: k,
         tabIndex: 0,
         role: "option",
-        "aria-selected": u.value === s.value
+        "aria-selected": f.value === t.value
       },
-      ref: f,
+      ref: o,
       children: m
     },
-    `${s.value}`
+    `${t.value}`
   );
 };
 export {