@uva-glass/component-library 1.0.0

package/dist/components/IconButton/IconButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.stories.js","sources":["../../../src/components/IconButton/IconButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { IconButtonProps } from 'components/IconButton';\n\nimport { IconButton } from 'components/IconButton';\nimport { Icon } from 'components/Icon';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/IconButton',\n  component: IconButton,\n  argTypes: {\n    variant: {\n      options: ['destructive'],\n      control: { type: 'check' },\n    },\n    noBorder: {\n      control: 'boolean',\n      default: false,\n    },\n    wide: {\n      control: 'boolean',\n      default: false,\n    },\n    'aria-label': {\n      table: {\n        disable: true,\n      },\n    },\n    type: {\n      options: ['button', 'submit', 'reset'],\n      control: { type: 'select' },\n    },\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta<IconButtonProps>;\n\nconst Template: StoryFn<IconButtonProps> = (args) => <IconButton {...args} />;\n\nexport const IconButtonExample = Template.bind({});\nIconButtonExample.args = {\n  variant: 'destructive',\n  noBorder: false,\n  wide: false,\n  children: <Icon name=\"Trash\" />,\n  onClick: fn(),\n};\n"],"names":["IconButton_stories","IconButton","Template","args","jsx","IconButtonExample","Icon","fn"],"mappings":";;;;AASA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,aAAa;AAAA,MACvB,SAAS,EAAE,MAAM,QAAQ;AAAA,IAC3B;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,CAAC,UAAU,UAAU,OAAO;AAAA,MACrC,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAqC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAY,GAAGE,EAAM,CAAA,GAE9DE,IAAoBH,EAAS,KAAK,EAAE;AACjDG,EAAkB,OAAO;AAAA,EACvB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU,gBAAAD,EAACE,GAAK,EAAA,MAAK,QAAQ,CAAA;AAAA,EAC7B,SAASC,EAAG;AACd;"}

package/dist/components/IconButton/index.d.ts

@@ -0,0 +1 @@
+export * from './IconButton';

package/dist/components/IconButton/index.js

@@ -0,0 +1,5 @@
+import { IconButton as n } from "./IconButton.js";
+export {
+  n as IconButton
+};
+//# sourceMappingURL=index.js.map

package/dist/components/IconButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/InfoMessage/InfoMassage.stories.d.ts

@@ -0,0 +1,5 @@
+import { InfoMessageProps } from './InfoMessage';
+
+declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, InfoMessageProps>;
+export default _default;
+export declare const InfoMessageExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InfoMessageProps>;

package/dist/components/InfoMessage/InfoMassage.stories.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import { InfoMessage as e } from "./InfoMessage.js";
+const r = {
+  title: "Atoms/InfoMessage",
+  component: e,
+  argTypes: {
+    message: {
+      control: "text"
+    },
+    hasOwnContainer: {
+      control: "boolean"
+    }
+  }
+}, a = (s) => /* @__PURE__ */ o(e, { ...s }), n = a.bind({});
+n.args = {
+  message: "This is an example info message",
+  hasOwnContainer: !1
+};
+export {
+  n as InfoMessageExample,
+  r as default
+};
+//# sourceMappingURL=InfoMassage.stories.js.map

package/dist/components/InfoMessage/InfoMassage.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoMassage.stories.js","sources":["../../../src/components/InfoMessage/InfoMassage.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { InfoMessageProps } from './InfoMessage';\n\nimport { InfoMessage } from './InfoMessage';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/InfoMessage',\n  component: InfoMessage,\n  argTypes: {\n    message: {\n      control: 'text',\n    },\n    hasOwnContainer: {\n      control: 'boolean',\n    },\n  },\n} as Meta<InfoMessageProps>;\n\nconst Template: StoryFn<InfoMessageProps> = (args) => <InfoMessage {...args} />;\n\nexport const InfoMessageExample = Template.bind({});\nInfoMessageExample.args = {\n  message: 'This is an example info message',\n  hasOwnContainer: false,\n};\n"],"names":["InfoMassage_stories","InfoMessage","Template","args","jsx","InfoMessageExample"],"mappings":";;AAMA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF,GAEMC,IAAsC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAa,GAAGE,EAAM,CAAA,GAEhEE,IAAqBH,EAAS,KAAK,EAAE;AAClDG,EAAmB,OAAO;AAAA,EACxB,SAAS;AAAA,EACT,iBAAiB;AACnB;"}

package/dist/components/InfoMessage/InfoMessage.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+
+export interface InfoMessageProps {
+    message: string;
+    hasOwnContainer?: boolean;
+}
+export declare const InfoMessage: ({ message, hasOwnContainer }: PropsWithChildren<InfoMessageProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InfoMessage/InfoMessage.js

@@ -0,0 +1,25 @@
+import '../../assets/InfoMessage.css';
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { c as _ } from "../../clsx-DB4S2d7J.js";
+import { Icon as a } from "../Icon/Icon.js";
+const e = {
+  "visually-hidden": "_visually-hidden_elg9f_1",
+  "info-message": "_info-message_elg9f_3",
+  "info-message__container": "_info-message__container_elg9f_8",
+  "info-message__icon": "_info-message__icon_elg9f_13"
+}, c = ({ message: s, hasOwnContainer: i = !1 }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: _(e["info-message"], {
+      [e["info-message__container"]]: i
+    }),
+    children: [
+      /* @__PURE__ */ o(a, { name: "InformationCircleFillMini", className: e["info-message__icon"] }),
+      s
+    ]
+  }
+);
+export {
+  c as InfoMessage
+};
+//# sourceMappingURL=InfoMessage.js.map

package/dist/components/InfoMessage/InfoMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoMessage.js","sources":["../../../src/components/InfoMessage/InfoMessage.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './InfoMessage.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface InfoMessageProps {\n  message: string;\n  hasOwnContainer?: boolean;\n}\n\nexport const InfoMessage = ({ message, hasOwnContainer = false }: PropsWithChildren<InfoMessageProps>) => (\n  <div\n    className={clsx(styles['info-message'], {\n      [styles['info-message__container']]: hasOwnContainer,\n    })}\n  >\n    <Icon name=\"InformationCircleFillMini\" className={styles['info-message__icon']} />\n    {message}\n  </div>\n);\n"],"names":["InfoMessage","message","hasOwnContainer","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;GAaaA,IAAc,CAAC,EAAE,SAAAC,GAAS,iBAAAC,IAAkB,GACvD,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,cAAc,GAAG;AAAA,MACtC,CAACA,EAAO,yBAAyB,CAAC,GAAGH;AAAA,IAAA,CACtC;AAAA,IAED,UAAA;AAAA,MAAA,gBAAAI,EAACC,KAAK,MAAK,6BAA4B,WAAWF,EAAO,oBAAoB,GAAG;AAAA,MAC/EJ;AAAA,IAAA;AAAA,EAAA;AACH;"}

package/dist/components/InfoMessage/index.d.ts

@@ -0,0 +1 @@
+export * from './InfoMessage';

package/dist/components/InfoMessage/index.js

@@ -0,0 +1,5 @@
+import { InfoMessage as f } from "./InfoMessage.js";
+export {
+  f as InfoMessage
+};
+//# sourceMappingURL=index.js.map

package/dist/components/InfoMessage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/SectionNotification/SectionNotification.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+
+export interface SectionNotificationProps {
+    fullWidth?: boolean;
+}
+export declare const SectionNotification: ({ fullWidth, children }: PropsWithChildren<SectionNotificationProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SectionNotification/SectionNotification.js

@@ -0,0 +1,20 @@
+import '../../assets/SectionNotification.css';
+import { jsx as n } from "react/jsx-runtime";
+import { c as s } from "../../clsx-DB4S2d7J.js";
+const i = {
+  "visually-hidden": "_visually-hidden_xsb8x_1",
+  "section-notification": "_section-notification_xsb8x_3",
+  "section-notification--fullwidth": "_section-notification--fullwidth_xsb8x_12"
+}, a = ({ fullWidth: t = !1, children: o }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: s(i["section-notification"], {
+      [i["section-notification--fullwidth"]]: t
+    }),
+    children: o
+  }
+);
+export {
+  a as SectionNotification
+};
+//# sourceMappingURL=SectionNotification.js.map

package/dist/components/SectionNotification/SectionNotification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionNotification.js","sources":["../../../src/components/SectionNotification/SectionNotification.tsx"],"sourcesContent":["import classNames from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './SectionNotification.module.css';\n\nexport interface SectionNotificationProps {\n  fullWidth?: boolean;\n}\n\nexport const SectionNotification = ({ fullWidth = false, children }: PropsWithChildren<SectionNotificationProps>) => (\n  <div\n    className={classNames(styles['section-notification'], {\n      [styles['section-notification--fullwidth']]: fullWidth,\n    })}\n  >\n    {children}\n  </div>\n);\n"],"names":["SectionNotification","fullWidth","children","jsx","classNames","styles"],"mappings":";;;;;;GAUaA,IAAsB,CAAC,EAAE,WAAAC,IAAY,IAAO,UAAAC,EACvD,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWC,EAAO,sBAAsB,GAAG;AAAA,MACpD,CAACA,EAAO,iCAAiC,CAAC,GAAGJ;AAAA,IAAA,CAC9C;AAAA,IAEA,UAAAC;AAAA,EAAA;AACH;"}

package/dist/components/SectionNotification/SectionNotification.stories.d.ts

@@ -0,0 +1,6 @@
+import { SectionNotificationProps } from 'components/SectionNotification';
+import { PropsWithChildren } from 'react';
+
+declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, PropsWithChildren<SectionNotificationProps>>;
+export default _default;
+export declare const SectionNotificationExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<SectionNotificationProps>>;

package/dist/components/SectionNotification/SectionNotification.stories.js

@@ -0,0 +1,21 @@
+import { jsx as i } from "react/jsx-runtime";
+import { SectionNotification as t } from "./SectionNotification.js";
+const l = {
+  title: "Atoms/SectionNotification",
+  component: t,
+  argTypes: {
+    fullWidth: {
+      control: "boolean",
+      default: !1
+    }
+  }
+}, e = (o) => /* @__PURE__ */ i(t, { ...o }), n = e.bind({});
+n.args = {
+  fullWidth: !0,
+  children: "This is an example notification"
+};
+export {
+  n as SectionNotificationExample,
+  l as default
+};
+//# sourceMappingURL=SectionNotification.stories.js.map

package/dist/components/SectionNotification/SectionNotification.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionNotification.stories.js","sources":["../../../src/components/SectionNotification/SectionNotification.stories.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { SectionNotificationProps } from 'components/SectionNotification';\n\nimport { SectionNotification } from 'components/SectionNotification';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/SectionNotification',\n  component: SectionNotification,\n  argTypes: {\n    fullWidth: {\n      control: 'boolean',\n      default: false,\n    },\n  },\n} as Meta<PropsWithChildren<SectionNotificationProps>>;\n\nconst Template: StoryFn<PropsWithChildren<SectionNotificationProps>> = (args) => <SectionNotification {...args} />;\n\nexport const SectionNotificationExample = Template.bind({});\nSectionNotificationExample.args = {\n  fullWidth: true,\n  children: 'This is an example notification',\n};\n"],"names":["SectionNotification_stories","SectionNotification","Template","args","jsx","SectionNotificationExample"],"mappings":";;AAOA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,WAAW;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AACF,GAEMC,IAAiE,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAqB,GAAGE,EAAM,CAAA,GAEnGE,IAA6BH,EAAS,KAAK,EAAE;AAC1DG,EAA2B,OAAO;AAAA,EAChC,WAAW;AAAA,EACX,UAAU;AACZ;"}

package/dist/components/SectionNotification/index.d.ts

@@ -0,0 +1 @@
+export * from './SectionNotification';

package/dist/components/SectionNotification/index.js

@@ -0,0 +1,5 @@
+import { SectionNotification as t } from "./SectionNotification.js";
+export {
+  t as SectionNotification
+};
+//# sourceMappingURL=index.js.map

package/dist/components/SectionNotification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,9 @@
+import { SelectListboxProps } from './SelectListbox';
+import { PropsWithChildren } from 'react';
+
+declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, SelectListboxProps & {
+    children?: import('react').ReactNode;
+}>;
+export default _default;
+export declare const SelectListboxExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<SelectListboxProps>>;
+export declare const WithComponentOption: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<SelectListboxProps>>;

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

@@ -0,0 +1,117 @@
+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 * 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 = [
+  {
+    label: "Nerderlands",
+    value: "NL"
+  },
+  {
+    label: "English",
+    value: "EN"
+  },
+  {
+    label: "Deutsch",
+    value: "DU"
+  },
+  {
+    label: "Français",
+    value: "FR"
+  }
+], M = {
+  title: "Organisms/SelectListbox",
+  component: a,
+  argTypes: {
+    options: {
+      table: {
+        disable: !0
+      }
+    },
+    defaultValue: {
+      table: {
+        disable: !0
+      }
+    },
+    onChange: {
+      table: {
+        disable: !0
+      }
+    },
+    disabled: {
+      control: "boolean",
+      default: !1
+    },
+    buttonLabelBold: {
+      control: "boolean",
+      default: !1
+    },
+    variant: {
+      options: ["default", "noborder", "pill", "pillLeft", "pillRight"],
+      control: { type: "select" }
+    },
+    optionPositionRight: {
+      control: "boolean",
+      default: !1
+    },
+    buttonLabelProp: {
+      table: {
+        disable: !0
+      }
+    },
+    children: {
+      table: {
+        disable: !0
+      }
+    },
+    SelectOption: {
+      table: {
+        disable: !0
+      }
+    },
+    SelectOptionBox: {
+      table: {
+        disable: !0
+      }
+    },
+    SelectButton: {
+      table: {
+        disable: !0
+      }
+    },
+    SelectContainer: {
+      table: {
+        disable: !0
+      }
+    }
+  }
+}, s = {
+  options: r,
+  defaultValue: "EN",
+  disabled: !1,
+  buttonLabelBold: !1,
+  maxOptionHeight: "200px",
+  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 = {
+  ...s
+};
+const v = ({ 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" } })
+  }[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 = {
+  ...s
+};
+export {
+  u as SelectListboxExample,
+  y as WithComponentOption,
+  M as default
+};
+//# sourceMappingURL=SelectListBox.stories.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,45 @@
+import { SelectOption } from './components/SelectOption';
+import { SelectOptionBox } from './components/SelectOptionBox';
+import { SelectContainer } from './components/SelectContainer';
+import { SelectButton } from './components/SelectButton';
+import { OptionValue, SelectValue } from './SelectProvider';
+import { ReactNode, PropsWithChildren } from 'react';
+
+interface ISelect {
+    options: OptionValue[];
+    defaultValue?: SelectValue;
+    maxOptionHeight?: string;
+    disabled?: boolean;
+    buttonLabelProp?: string;
+    buttonLabelBold?: boolean;
+    variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';
+    optionPositionRight?: boolean;
+    onChange?: (option: OptionValue) => void;
+    children?: ReactNode;
+}
+export interface SelectListboxProps extends ISelect {
+    SelectOption?: typeof SelectOption;
+    SelectOptionBox?: typeof SelectOptionBox;
+    SelectButton: typeof SelectButton;
+    SelectContainer: typeof SelectContainer;
+}
+/**
+ * SelectListbox component
+ * Options can be a component or just a label, it should be wrapped in SelectListbox.SelectOption
+ * 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;
+    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;
+};
+export {};

package/dist/components/SelectListbox/SelectListbox.js

@@ -0,0 +1,38 @@
+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 = ({
+  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;
+export {
+  t as SelectListbox
+};
+//# sourceMappingURL=SelectListbox.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,28 @@
+import { PropsWithChildren } from 'react';
+
+export type SelectValue = string | number | null;
+export type OptionValue = {
+    value: SelectValue;
+    label: string;
+    selectedLabel?: string;
+    disabled?: boolean;
+};
+export interface SelectListboxContext {
+    options: OptionValue[];
+    selectedValue: OptionValue;
+    setSelectedValue: (v: OptionValue) => void;
+    isOpen: boolean;
+    setIsOpen: (v: boolean) => void;
+    toggleListbox: () => void;
+    getValue: (value: SelectValue) => OptionValue;
+    activeIndex: number;
+    setActiveIndex: (v: number) => void;
+    listboxId: string;
+}
+interface Props {
+    options: OptionValue[];
+    defaultValue: SelectValue;
+}
+export declare const SelectProvider: ({ options, defaultValue, children }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export declare const useSelect: () => SelectListboxContext;
+export {};

package/dist/components/SelectListbox/SelectProvider.js

@@ -0,0 +1,42 @@
+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 = () => {
+    s((t) => !t);
+  }, u = (t) => e.find((n) => n.value === t) || {
+    value: -1,
+    label: "",
+    selectedLabel: "-"
+  }, a = (t) => {
+    const n = e.findIndex((S) => S.value === t.value);
+    r(n), v(t), s(!1);
+  };
+  return o !== -1 && !c.value && a(u(o)), /* @__PURE__ */ m(
+    d.Provider,
+    {
+      value: {
+        options: e,
+        selectedValue: c,
+        setSelectedValue: a,
+        isOpen: x,
+        setIsOpen: s,
+        toggleListbox: b,
+        getValue: u,
+        activeIndex: f,
+        setActiveIndex: r,
+        listboxId: I.current
+      },
+      children: i
+    }
+  );
+}, O = () => {
+  const e = P(d);
+  if (e === void 0)
+    throw new Error("useSelect can only be used in an SelectProvider");
+  return e;
+};
+export {
+  L as SelectProvider,
+  O as useSelect
+};
+//# sourceMappingURL=SelectProvider.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,10 @@
+import { OptionValue } from 'components/SelectListbox/SelectProvider';
+
+export interface SelectButtonProps {
+    variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';
+    onChange?: (option: OptionValue) => void;
+    buttonLabelProp?: string;
+    buttonLabelBold?: boolean;
+    disabled?: boolean;
+}
+export declare const SelectButton: ({ variant, onChange, buttonLabelProp, buttonLabelBold, disabled, }: SelectButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,69 @@
+import { jsxs as w, jsx 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 { 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) => {
+    switch (r.key) {
+      case "Enter":
+        if (r.preventDefault(), !t) {
+          u(!0);
+          return;
+        }
+        break;
+      case "Escape":
+        t && (r.stopPropagation(), y(I.findIndex((o) => o.value === (e == null ? void 0 : e.value))), u(!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(
+    "button",
+    {
+      className: f(s["select-listbox-trigger"], {
+        [s[`select-listbox-trigger--${a}`]]: a,
+        [s["select-listbox-trigger--bold"]]: m
+      }),
+      type: "button",
+      onClick: d,
+      onKeyDown: k,
+      "aria-expanded": t,
+      "aria-haspopup": "listbox",
+      "aria-label": `${e.label}`,
+      disabled: x,
+      "aria-controls": g,
+      ref: l,
+      children: [
+        e[b],
+        /* @__PURE__ */ D(
+          E,
+          {
+            className: f(s["select-listbox-trigger-icon"], {
+              [s["select-listbox-trigger-icon--open"]]: t
+            }),
+            name: "CheveronDown",
+            size: 16
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  O as SelectButton
+};
+//# sourceMappingURL=SelectButton.js.map

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

@@ -0,0 +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;"}