@uva-glass/component-library 1.45.6 → 1.47.0

package/dist/components/Accordion/Accordion.d.ts

@@ -1,7 +1,11 @@
 import { ReactNode } from 'react';
 export interface AccordionProps {
+    /** Clickable title (always visible). */
     title: ReactNode;
+    /** Main content (hidden when expanded is false). */
     content: ReactNode;
+    /** Indicator if Accordion is should be expanded by default.*/
     expanded?: boolean;
 }
+/** A controller for accordion dispay toggeling of content with click on a title. */
 export declare const Accordion: ({ title, content, expanded }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\n\nimport styles from './Accordion.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface AccordionProps {\n  title: ReactNode;\n  content: ReactNode;\n  expanded?: boolean;\n}\n\nexport const Accordion = ({ title, content, expanded = false }: AccordionProps) => {\n  const [isExpanded, setIsExpanded] = useState(expanded);\n  const accordionId = useId();\n\n  function onKeyUp(event: KeyboardEvent<HTMLDivElement>) {\n    const { code } = event;\n\n    if (code === 'Enter' || code === 'Space') {\n      setIsExpanded(!isExpanded);\n    }\n  }\n\n  return (\n    <div className={styles['accordion']}>\n      <div\n        className={styles['accordion__title']}\n        id={accordionId}\n        role=\"button\"\n        tabIndex={0}\n        onClick={() => setIsExpanded(!isExpanded)}\n        onKeyUp={onKeyUp}\n        aria-expanded={isExpanded}\n      >\n        {title}\n        <Icon\n          className={clsx(styles['accordion__title-icon'], { [styles['accordion__title-icon--expanded']]: isExpanded })}\n          name=\"CheveronLeft\"\n          size={16}\n        />\n      </div>\n      <div\n        aria-labelledby={accordionId}\n        className={clsx(styles.accordion__content, { [styles['accordion__content--expanded']]: isExpanded })}\n      >\n        {content}\n      </div>\n    </div>\n  );\n};\n"],"names":["Accordion","title","content","expanded","isExpanded","setIsExpanded","useState","accordionId","useId","onKeyUp","event","code","jsxs","styles","jsx","Icon","clsx"],"mappings":";;;;;;;;;;;GAeaA,IAAY,CAAC,EAAE,OAAAC,GAAO,SAAAC,GAAS,UAAAC,IAAW,SAA4B;AACjF,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,CAAQ,GAC/CI,IAAcC;AAEpB,WAASC,EAAQC,GAAsC;AAC/C,UAAA,EAAE,MAAAC,EAAS,IAAAD;AAEb,KAAAC,MAAS,WAAWA,MAAS,YAC/BN,EAAc,CAACD,CAAU;AAAA,EAE7B;AAEA,SACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,WACrB,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAO;AAAA,QAClB,IAAIN;AAAA,QACJ,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS,MAAMF,EAAc,CAACD,CAAU;AAAA,QACxC,SAAAK;AAAA,QACA,iBAAeL;AAAA,QAEd,UAAA;AAAA,UAAAH;AAAA,UACD,gBAAAa;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAWC,EAAKH,EAAO,uBAAuB,GAAG,EAAE,CAACA,EAAO,iCAAiC,CAAC,GAAGT,GAAY;AAAA,cAC5G,MAAK;AAAA,cACL,MAAM;AAAA,YAAA;AAAA,UACR;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiBP;AAAA,QACjB,WAAWS,EAAKH,EAAO,oBAAoB,EAAE,CAACA,EAAO,8BAA8B,CAAC,GAAGT,GAAY;AAAA,QAElG,UAAAF;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\n\nimport styles from './Accordion.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface AccordionProps {\n  /** Clickable title (always visible). */\n  title: ReactNode;\n  /** Main content (hidden when expanded is false). */\n  content: ReactNode;\n  /** Indicator if Accordion is should be expanded by default.*/\n  expanded?: boolean;\n}\n\n/** A controller for accordion dispay toggeling of content with click on a title. */\nexport const Accordion = ({ title, content, expanded = false }: AccordionProps) => {\n  const [isExpanded, setIsExpanded] = useState(expanded);\n  const accordionId = useId();\n\n  function onKeyUp(event: KeyboardEvent<HTMLDivElement>) {\n    const { code } = event;\n\n    if (code === 'Enter' || code === 'Space') {\n      setIsExpanded(!isExpanded);\n    }\n  }\n\n  return (\n    <div className={styles['accordion']}>\n      <div\n        className={styles['accordion__title']}\n        id={accordionId}\n        role=\"button\"\n        tabIndex={0}\n        onClick={() => setIsExpanded(!isExpanded)}\n        onKeyUp={onKeyUp}\n        aria-expanded={isExpanded}\n      >\n        {title}\n        <Icon\n          className={clsx(styles['accordion__title-icon'], { [styles['accordion__title-icon--expanded']]: isExpanded })}\n          name=\"CheveronLeft\"\n          size={16}\n        />\n      </div>\n      <div\n        aria-labelledby={accordionId}\n        className={clsx(styles.accordion__content, { [styles['accordion__content--expanded']]: isExpanded })}\n      >\n        {content}\n      </div>\n    </div>\n  );\n};\n"],"names":["Accordion","title","content","expanded","isExpanded","setIsExpanded","useState","accordionId","useId","onKeyUp","event","code","jsxs","styles","jsx","Icon","clsx"],"mappings":";;;;;;;;;;;GAmBaA,IAAY,CAAC,EAAE,OAAAC,GAAO,SAAAC,GAAS,UAAAC,IAAW,SAA4B;AACjF,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,CAAQ,GAC/CI,IAAcC;AAEpB,WAASC,EAAQC,GAAsC;AAC/C,UAAA,EAAE,MAAAC,EAAS,IAAAD;AAEb,KAAAC,MAAS,WAAWA,MAAS,YAC/BN,EAAc,CAACD,CAAU;AAAA,EAE7B;AAEA,SACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,WACrB,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAO;AAAA,QAClB,IAAIN;AAAA,QACJ,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS,MAAMF,EAAc,CAACD,CAAU;AAAA,QACxC,SAAAK;AAAA,QACA,iBAAeL;AAAA,QAEd,UAAA;AAAA,UAAAH;AAAA,UACD,gBAAAa;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAWC,EAAKH,EAAO,uBAAuB,GAAG,EAAE,CAACA,EAAO,iCAAiC,CAAC,GAAGT,GAAY;AAAA,cAC5G,MAAK;AAAA,cACL,MAAM;AAAA,YAAA;AAAA,UACR;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiBP;AAAA,QACjB,WAAWS,EAAKH,EAAO,oBAAoB,EAAE,CAACA,EAAO,8BAA8B,CAAC,GAAGT,GAAY;AAAA,QAElG,UAAAF;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/components/Accordion/Accordion.stories.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
 import { Accordion as e } from "./Accordion.js";
 import { Container as i } from "../storyComponents/Container/Container.js";
-const p = {
+const c = "<Accordion title={title} content={content}/>", a = {
   title: "Atoms/Accordion",
   component: e,
   argTypes: {
@@ -11,20 +11,24 @@ const p = {
         disable: !0
       }
     }
+  },
+  parameters: {
+    inspectComponent: e,
+    codeString: c
   }
 }, o = (n) => /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(e, { ...n }) }), l = o.bind({});
 l.args = {
   title: "Example title",
   content: "Example content"
 };
-const c = o.bind({});
-c.args = {
+const r = o.bind({});
+r.args = {
   title: /* @__PURE__ */ t("div", { style: { fontWeight: "bold" }, children: "Complex sample title" }),
   content: /* @__PURE__ */ t("div", { style: { fontStyle: "italic" }, children: "Complex sample content" })
 };
 export {
   l as AccordionExample,
-  c as WithComplexProps,
-  p as default
+  r as WithComplexProps,
+  a as default
 };
 //# sourceMappingURL=Accordion.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.stories.js","sources":["../../../src/components/Accordion/Accordion.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { AccordionProps } from './Accordion';\n\nimport { Accordion } from './Accordion';\n\nimport { Container } from 'components/storyComponents/Container';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Accordion',\n  component: Accordion,\n  argTypes: {\n    expanded: {\n      // Hide the expanded prop. Changing the value in Storybook doesn't update the state of the component.\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta<AccordionProps>;\n\nconst Template: StoryFn<AccordionProps> = (args) => (\n  <Container>\n    <Accordion {...args} />\n  </Container>\n);\n\nexport const AccordionExample = Template.bind({});\nAccordionExample.args = {\n  title: 'Example title',\n  content: 'Example content',\n};\n\nexport const WithComplexProps = Template.bind({});\nWithComplexProps.args = {\n  title: <div style={{ fontWeight: 'bold' }}>Complex sample title</div>,\n  content: <div style={{ fontStyle: 'italic' }}>Complex sample content</div>,\n};\n"],"names":["Accordion_stories","Accordion","Template","args","jsx","Container","AccordionExample","WithComplexProps"],"mappings":";;;AAQA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA;AAAA,MAER,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAoC,CAACC,MACzC,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAW,GAAGE,EAAM,CAAA,EACvB,CAAA,GAGWG,IAAmBJ,EAAS,KAAK,EAAE;AAChDI,EAAiB,OAAO;AAAA,EACtB,OAAO;AAAA,EACP,SAAS;AACX;AAEO,MAAMC,IAAmBL,EAAS,KAAK,EAAE;AAChDK,EAAiB,OAAO;AAAA,EACtB,yBAAQ,OAAI,EAAA,OAAO,EAAE,YAAY,UAAU,UAAoB,wBAAA;AAAA,EAC/D,2BAAU,OAAI,EAAA,OAAO,EAAE,WAAW,YAAY,UAAsB,0BAAA;AACtE;"}
+{"version":3,"file":"Accordion.stories.js","sources":["../../../src/components/Accordion/Accordion.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { AccordionProps } from './Accordion';\n\nimport { Accordion } from './Accordion';\n\nimport { Container } from 'components/storyComponents/Container';\n\nconst codeString = '<Accordion title={title} content={content}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Accordion',\n  component: Accordion,\n  argTypes: {\n    expanded: {\n      // Hide the expanded prop. Changing the value in Storybook doesn't update the state of the component.\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: Accordion,\n    codeString: codeString,\n  },\n} as Meta<AccordionProps>;\n\nconst Template: StoryFn<AccordionProps> = (args) => (\n  <Container>\n    <Accordion {...args} />\n  </Container>\n);\n\nexport const AccordionExample = Template.bind({});\nAccordionExample.args = {\n  title: 'Example title',\n  content: 'Example content',\n};\n\nexport const WithComplexProps = Template.bind({});\nWithComplexProps.args = {\n  title: <div style={{ fontWeight: 'bold' }}>Complex sample title</div>,\n  content: <div style={{ fontStyle: 'italic' }}>Complex sample content</div>,\n};\n"],"names":["codeString","Accordion_stories","Accordion","Template","args","jsx","Container","AccordionExample","WithComplexProps"],"mappings":";;;AAOA,MAAMA,IAAa,gDAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA;AAAA,MAER,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAoC,CAACC,MACzC,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAW,GAAGE,EAAM,CAAA,EACvB,CAAA,GAGWG,IAAmBJ,EAAS,KAAK,EAAE;AAChDI,EAAiB,OAAO;AAAA,EACtB,OAAO;AAAA,EACP,SAAS;AACX;AAEO,MAAMC,IAAmBL,EAAS,KAAK,EAAE;AAChDK,EAAiB,OAAO;AAAA,EACtB,yBAAQ,OAAI,EAAA,OAAO,EAAE,YAAY,UAAU,UAAoB,wBAAA;AAAA,EAC/D,2BAAU,OAAI,EAAA,OAAO,EAAE,WAAW,YAAY,UAAsB,0BAAA;AACtE;"}

package/dist/components/MultiSelect/MultiSelect.stories.js

@@ -1,20 +1,32 @@
-import { jsxs as b, jsx as m } from "react/jsx-runtime";
+import { jsxs as S, jsx as r } from "react/jsx-runtime";
 import { f as d } from "../../index-C7tAT8j7.js";
-import { useState as p } from "react";
-import { M as r } from "../../MultiSelect-Ckf3uGw5.js";
-import { Container as C } from "../storyComponents/Container/Container.js";
-const T = {
+import { useState as M } from "react";
+import { M as a } from "../../MultiSelect-Ckf3uGw5.js";
+import { Container as p } from "../storyComponents/Container/Container.js";
+const f = `
+  // MultiSelectHeader can be added optionally
+  <MultiSelect.MultiSelectHeader label={label} clearTrigger={clearTrigger} onClear={handleClear} />
+  <MultiSelect noBorder={noBorder} scrollable={scrollable}>
+    {mockItems.map(({ itemName, itemValue, disabled }) => (
+      <MultiSelect.MultiSelectItem key={itemName} label={itemName} value={itemValue}
+        checked={stateItems.includes(itemValue)} onChange={handleChange} disabled={disabled} />
+    ))}
+  </MultiSelect>
+  `, H = {
   title: "Organisms/MultiSelect",
-  component: r,
+  component: a,
   argTypes: {
     header: {
       table: {
         disable: !0
       }
     }
+  },
+  parameters: {
+    codeString: f
   }
-}, a = (i) => {
-  const [n, o] = p([]), I = [
+}, m = (i) => {
+  const [n, o] = M([]), I = [
     { itemName: "AItem 1", itemValue: "1", disabled: !0 },
     { itemName: "BItem 2", itemValue: "2" },
     { itemName: "Multi line Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3", itemValue: "3" },
@@ -23,29 +35,29 @@ const T = {
     { itemName: "EItem 6", itemValue: "6" }
   ], h = () => {
     o([]), d()();
-  }, f = (e) => {
+  }, b = (e) => {
     const { checked: t, value: l } = e.target;
     o((s) => {
       const c = t ? [...s, l] : s.filter((g) => g !== l);
       return d()(c), c;
     });
   };
-  return /* @__PURE__ */ b(C, { children: [
-    i.header && /* @__PURE__ */ m(
-      r.MultiSelectHeader,
+  return /* @__PURE__ */ S(p, { children: [
+    i.header && /* @__PURE__ */ r(
+      a.MultiSelectHeader,
       {
         label: "Item list",
         clearTrigger: n.length > 0 ? "Clear Selection" : "",
         onClear: h
       }
     ),
-    /* @__PURE__ */ m(r, { ...i, children: I.map(({ itemName: e, itemValue: t, disabled: l }) => /* @__PURE__ */ m(
-      r.MultiSelectItem,
+    /* @__PURE__ */ r(a, { ...i, children: I.map(({ itemName: e, itemValue: t, disabled: l }) => /* @__PURE__ */ r(
+      a.MultiSelectItem,
       {
         label: e,
         value: t,
         checked: n.includes(t),
-        onChange: f,
+        onChange: b,
         disabled: l
       },
       e
@@ -54,19 +66,19 @@ const T = {
 }, u = {
   scrollable: !0,
   noBorder: !1
-}, M = a.bind({});
-M.args = {
+}, C = m.bind({});
+C.args = {
   ...u
 };
-const S = a.bind({});
-S.args = {
+const N = m.bind({});
+N.args = {
   ...u,
   // boolean is not normal way of adding header but if added after template the rerender logic of
   // storybook would not correctly clear the checkboxes
   header: !0
 };
-const N = a.bind({});
-N.args = {
+const V = m.bind({});
+V.args = {
   scrollable: !1,
   noBorder: !0,
   // boolean is not normal way of adding header but if added after template the rerender logic of
@@ -74,9 +86,9 @@ N.args = {
   header: !0
 };
 export {
-  M as MultiSelectExample,
-  S as WithHeader,
-  N as WithheaderAndWithoutScrollContainerAndBorder,
-  T as default
+  C as MultiSelectExample,
+  N as WithHeader,
+  V as WithheaderAndWithoutScrollContainerAndBorder,
+  H as default
 };
 //# sourceMappingURL=MultiSelect.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.stories.js","sources":["../../../src/components/MultiSelect/MultiSelect.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\nimport { useState } from 'react';\n\nimport type { ChangeEvent, PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MultiSelectProps } from './MultiSelect';\n\nimport { MultiSelect } from './MultiSelect';\n\nimport { Container } from 'components/storyComponents/Container';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/MultiSelect',\n  component: MultiSelect,\n  argTypes: {\n    header: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta<PropsWithChildren<MultiSelectProps>>;\n\nconst Template: StoryFn<PropsWithChildren<MultiSelectProps>> = (args) => {\n  const [items, setItems] = useState<string[]>([]);\n\n  const mockItems = [\n    { itemName: 'AItem 1', itemValue: '1', disabled: true },\n    { itemName: 'BItem 2', itemValue: '2' },\n    { itemName: 'Multi line Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3', itemValue: '3' },\n    { itemName: 'CItem 4', itemValue: '4' },\n    { itemName: 'DItem 5', itemValue: '5' },\n    { itemName: 'EItem 6', itemValue: '6' },\n  ];\n\n  const handleClear = () => {\n    setItems([]);\n    fn()();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const { checked, value } = event.target;\n    setItems((prevState) => {\n      const newItems = checked ? [...prevState, value] : prevState.filter((itemValue) => itemValue !== value);\n      fn()(newItems);\n      return newItems;\n    });\n  };\n\n  return (\n    <Container>\n      {/* header added under separate boolean arg here for storybook purpose, \n      it should be added as direct arg to MultiSelect when used in application */}\n      {args.header && (\n        <MultiSelect.MultiSelectHeader\n          label=\"Item list\"\n          clearTrigger={items.length > 0 ? 'Clear Selection' : ''}\n          onClear={handleClear}\n        />\n      )}\n      <MultiSelect {...args}>\n        {mockItems.map(({ itemName, itemValue, disabled }) => (\n          <MultiSelect.MultiSelectItem\n            key={itemName}\n            label={itemName}\n            value={itemValue}\n            checked={items.includes(itemValue)}\n            onChange={handleChange}\n            disabled={disabled}\n          />\n        ))}\n      </MultiSelect>\n    </Container>\n  );\n};\n\nconst defaultArgs: Partial<MultiSelectProps> = {\n  scrollable: true,\n  noBorder: false,\n};\n\nexport const MultiSelectExample = Template.bind({});\nMultiSelectExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithHeader = Template.bind({});\nWithHeader.args = {\n  ...defaultArgs,\n  // boolean is not normal way of adding header but if added after template the rerender logic of\n  // storybook would not correctly clear the checkboxes\n  header: true,\n};\n\nexport const WithheaderAndWithoutScrollContainerAndBorder = Template.bind({});\nWithheaderAndWithoutScrollContainerAndBorder.args = {\n  scrollable: false,\n  noBorder: true,\n  // boolean is not normal way of adding header but if added after template the rerender logic of\n  // storybook would not correctly clear the checkboxes\n  header: true,\n};\n"],"names":["MultiSelect_stories","MultiSelect","Template","args","items","setItems","useState","mockItems","handleClear","fn","handleChange","event","checked","value","prevState","newItems","itemValue","Container","jsx","itemName","disabled","defaultArgs","MultiSelectExample","WithHeader","WithheaderAndWithoutScrollContainerAndBorder"],"mappings":";;;;;AAYA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAyD,CAACC,MAAS;AACvE,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAmB,CAAE,CAAA,GAEzCC,IAAY;AAAA,IAChB,EAAE,UAAU,WAAW,WAAW,KAAK,UAAU,GAAK;AAAA,IACtD,EAAE,UAAU,WAAW,WAAW,IAAI;AAAA,IACtC,EAAE,UAAU,oFAAoF,WAAW,IAAI;AAAA,IAC/G,EAAE,UAAU,WAAW,WAAW,IAAI;AAAA,IACtC,EAAE,UAAU,WAAW,WAAW,IAAI;AAAA,IACtC,EAAE,UAAU,WAAW,WAAW,IAAI;AAAA,EAAA,GAGlCC,IAAc,MAAM;AACxB,IAAAH,EAAS,CAAE,CAAA,GACXI,EAAK,EAAA;AAAA,EAAA,GAGDC,IAAe,CAACC,MAAyC;AAC7D,UAAM,EAAE,SAAAC,GAAS,OAAAC,MAAUF,EAAM;AACjC,IAAAN,EAAS,CAACS,MAAc;AACtB,YAAMC,IAAWH,IAAU,CAAC,GAAGE,GAAWD,CAAK,IAAIC,EAAU,OAAO,CAACE,MAAcA,MAAcH,CAAK;AACtGJ,aAAAA,EAAA,EAAKM,CAAQ,GACNA;AAAA,IAAA,CACR;AAAA,EAAA;AAGH,2BACGE,GAGE,EAAA,UAAA;AAAA,IAAAd,EAAK,UACJ,gBAAAe;AAAA,MAACjB,EAAY;AAAA,MAAZ;AAAA,QACC,OAAM;AAAA,QACN,cAAcG,EAAM,SAAS,IAAI,oBAAoB;AAAA,QACrD,SAASI;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,gBAAAU,EAACjB,GAAa,EAAA,GAAGE,GACd,UAAAI,EAAU,IAAI,CAAC,EAAE,UAAAY,GAAU,WAAAH,GAAW,UAAAI,EACrC,MAAA,gBAAAF;AAAA,MAACjB,EAAY;AAAA,MAAZ;AAAA,QAEC,OAAOkB;AAAA,QACP,OAAOH;AAAA,QACP,SAASZ,EAAM,SAASY,CAAS;AAAA,QACjC,UAAUN;AAAA,QACV,UAAAU;AAAA,MAAA;AAAA,MALKD;AAAA,IAOR,CAAA,GACH;AAAA,EACF,EAAA,CAAA;AAEJ,GAEME,IAAyC;AAAA,EAC7C,YAAY;AAAA,EACZ,UAAU;AACZ,GAEaC,IAAqBpB,EAAS,KAAK,EAAE;AAClDoB,EAAmB,OAAO;AAAA,EACxB,GAAGD;AACL;AAEO,MAAME,IAAarB,EAAS,KAAK,EAAE;AAC1CqB,EAAW,OAAO;AAAA,EAChB,GAAGF;AAAA;AAAA;AAAA,EAGH,QAAQ;AACV;AAEO,MAAMG,IAA+CtB,EAAS,KAAK,EAAE;AAC5EsB,EAA6C,OAAO;AAAA,EAClD,YAAY;AAAA,EACZ,UAAU;AAAA;AAAA;AAAA,EAGV,QAAQ;AACV;"}
+{"version":3,"file":"MultiSelect.stories.js","sources":["../../../src/components/MultiSelect/MultiSelect.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\nimport { useState } from 'react';\n\nimport type { ChangeEvent, PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MultiSelectProps } from './MultiSelect';\n\nimport { MultiSelect } from './MultiSelect';\n\nimport { Container } from 'components/storyComponents/Container';\n\nconst codeString = `\n  // MultiSelectHeader can be added optionally\n  <MultiSelect.MultiSelectHeader label={label} clearTrigger={clearTrigger} onClear={handleClear} />\n  <MultiSelect noBorder={noBorder} scrollable={scrollable}>\n    {mockItems.map(({ itemName, itemValue, disabled }) => (\n      <MultiSelect.MultiSelectItem key={itemName} label={itemName} value={itemValue}\n        checked={stateItems.includes(itemValue)} onChange={handleChange} disabled={disabled} />\n    ))}\n  </MultiSelect>\n  `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/MultiSelect',\n  component: MultiSelect,\n  argTypes: {\n    header: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    codeString: codeString,\n  },\n} as Meta<PropsWithChildren<MultiSelectProps>>;\n\nconst Template: StoryFn<PropsWithChildren<MultiSelectProps>> = (args) => {\n  const [items, setItems] = useState<string[]>([]);\n\n  const mockItems = [\n    { itemName: 'AItem 1', itemValue: '1', disabled: true },\n    { itemName: 'BItem 2', itemValue: '2' },\n    { itemName: 'Multi line Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3', itemValue: '3' },\n    { itemName: 'CItem 4', itemValue: '4' },\n    { itemName: 'DItem 5', itemValue: '5' },\n    { itemName: 'EItem 6', itemValue: '6' },\n  ];\n\n  const handleClear = () => {\n    setItems([]);\n    fn()();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const { checked, value } = event.target;\n    setItems((prevState) => {\n      const newItems = checked ? [...prevState, value] : prevState.filter((itemValue) => itemValue !== value);\n      fn()(newItems);\n      return newItems;\n    });\n  };\n\n  return (\n    <Container>\n      {/* header added under separate boolean arg here for storybook purpose, \n      it should be added as direct arg to MultiSelect when used in application */}\n      {args.header && (\n        <MultiSelect.MultiSelectHeader\n          label=\"Item list\"\n          clearTrigger={items.length > 0 ? 'Clear Selection' : ''}\n          onClear={handleClear}\n        />\n      )}\n      <MultiSelect {...args}>\n        {mockItems.map(({ itemName, itemValue, disabled }) => (\n          <MultiSelect.MultiSelectItem\n            key={itemName}\n            label={itemName}\n            value={itemValue}\n            checked={items.includes(itemValue)}\n            onChange={handleChange}\n            disabled={disabled}\n          />\n        ))}\n      </MultiSelect>\n    </Container>\n  );\n};\n\nconst defaultArgs: Partial<MultiSelectProps> = {\n  scrollable: true,\n  noBorder: false,\n};\n\nexport const MultiSelectExample = Template.bind({});\nMultiSelectExample.args = {\n  ...defaultArgs,\n};\n\nexport const WithHeader = Template.bind({});\nWithHeader.args = {\n  ...defaultArgs,\n  // boolean is not normal way of adding header but if added after template the rerender logic of\n  // storybook would not correctly clear the checkboxes\n  header: true,\n};\n\nexport const WithheaderAndWithoutScrollContainerAndBorder = Template.bind({});\nWithheaderAndWithoutScrollContainerAndBorder.args = {\n  scrollable: false,\n  noBorder: true,\n  // boolean is not normal way of adding header but if added after template the rerender logic of\n  // storybook would not correctly clear the checkboxes\n  header: true,\n};\n"],"names":["codeString","MultiSelect_stories","MultiSelect","Template","args","items","setItems","useState","mockItems","handleClear","fn","handleChange","event","checked","value","prevState","newItems","itemValue","Container","jsx","itemName","disabled","defaultArgs","MultiSelectExample","WithHeader","WithheaderAndWithoutScrollContainerAndBorder"],"mappings":";;;;;AAWA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAYJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAyD,CAACC,MAAS;AACvE,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAmB,CAAE,CAAA,GAEzCC,IAAY;AAAA,IAChB,EAAE,UAAU,WAAW,WAAW,KAAK,UAAU,GAAK;AAAA,IACtD,EAAE,UAAU,WAAW,WAAW,IAAI;AAAA,IACtC,EAAE,UAAU,oFAAoF,WAAW,IAAI;AAAA,IAC/G,EAAE,UAAU,WAAW,WAAW,IAAI;AAAA,IACtC,EAAE,UAAU,WAAW,WAAW,IAAI;AAAA,IACtC,EAAE,UAAU,WAAW,WAAW,IAAI;AAAA,EAAA,GAGlCC,IAAc,MAAM;AACxB,IAAAH,EAAS,CAAE,CAAA,GACXI,EAAK,EAAA;AAAA,EAAA,GAGDC,IAAe,CAACC,MAAyC;AAC7D,UAAM,EAAE,SAAAC,GAAS,OAAAC,MAAUF,EAAM;AACjC,IAAAN,EAAS,CAACS,MAAc;AACtB,YAAMC,IAAWH,IAAU,CAAC,GAAGE,GAAWD,CAAK,IAAIC,EAAU,OAAO,CAACE,MAAcA,MAAcH,CAAK;AACtGJ,aAAAA,EAAA,EAAKM,CAAQ,GACNA;AAAA,IAAA,CACR;AAAA,EAAA;AAGH,2BACGE,GAGE,EAAA,UAAA;AAAA,IAAAd,EAAK,UACJ,gBAAAe;AAAA,MAACjB,EAAY;AAAA,MAAZ;AAAA,QACC,OAAM;AAAA,QACN,cAAcG,EAAM,SAAS,IAAI,oBAAoB;AAAA,QACrD,SAASI;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,gBAAAU,EAACjB,GAAa,EAAA,GAAGE,GACd,UAAAI,EAAU,IAAI,CAAC,EAAE,UAAAY,GAAU,WAAAH,GAAW,UAAAI,EACrC,MAAA,gBAAAF;AAAA,MAACjB,EAAY;AAAA,MAAZ;AAAA,QAEC,OAAOkB;AAAA,QACP,OAAOH;AAAA,QACP,SAASZ,EAAM,SAASY,CAAS;AAAA,QACjC,UAAUN;AAAA,QACV,UAAAU;AAAA,MAAA;AAAA,MALKD;AAAA,IAOR,CAAA,GACH;AAAA,EACF,EAAA,CAAA;AAEJ,GAEME,IAAyC;AAAA,EAC7C,YAAY;AAAA,EACZ,UAAU;AACZ,GAEaC,IAAqBpB,EAAS,KAAK,EAAE;AAClDoB,EAAmB,OAAO;AAAA,EACxB,GAAGD;AACL;AAEO,MAAME,IAAarB,EAAS,KAAK,EAAE;AAC1CqB,EAAW,OAAO;AAAA,EAChB,GAAGF;AAAA;AAAA;AAAA,EAGH,QAAQ;AACV;AAEO,MAAMG,IAA+CtB,EAAS,KAAK,EAAE;AAC5EsB,EAA6C,OAAO;AAAA,EAClD,YAAY;AAAA,EACZ,UAAU;AAAA;AAAA;AAAA,EAGV,QAAQ;AACV;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "1.45.6",
+  "version": "1.47.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -52,10 +52,12 @@
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-links": "^8.2.9",
     "@storybook/blocks": "^8.2.9",
+    "@storybook/manager-api": "^8.2.9",
+    "@storybook/preview-api": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
     "@storybook/test": "^8.2.9",
-    "@types/node": "^20.16.3",
+    "@types/node": "^20.16.5",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@uva-glass/eslint-config": "^1.3.1",
@@ -65,7 +67,7 @@
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.35.1",
+    "eslint-plugin-react": "^7.35.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.11",
     "eslint-plugin-storybook": "^0.8.0",
@@ -77,7 +79,7 @@
     "npm-run-all2": "^6.2.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.1",
+    "react-router-dom": "^6.26.2",
     "semantic-release": "^24.1.0",
     "storybook": "^8.2.9",
     "style-dictionary": "^4.1.0",
@@ -85,9 +87,9 @@
     "stylelint-config-recommended": "^14.0.1",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-order": "^6.0.4",
-    "typescript": "^5.5.4",
+    "typescript": "^5.6.2",
     "vite": "^5.4.3",
-    "vite-plugin-dts": "^4.1.0",
+    "vite-plugin-dts": "^4.2.1",
     "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-plugin-static-copy": "^1.0.6",
     "vite-plugin-svgr": "^4.2.0",