@uva-glass/component-library 3.55.1 → 3.55.2

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

@@ -1,95 +1,85 @@
-import { jsxs as S, jsx as r } from "react/jsx-runtime";
-import { f as d } from "../../index-B_q_4aBT.js";
-import { useState as p } from "react";
-import { M as e } from "../../TablePlugin-BRZcXq73.js";
-import { Container as M } from "../../storyComponents/Container/Container.js";
-const C = `
-  // 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: e,
-  argTypes: {
-    header: {
-      table: {
-        disable: !0
-      }
-    }
-  },
-  parameters: {
-    inspectComponent: e,
-    codeString: C
-  }
-}, m = (i) => {
-  const [n, o] = p([]), 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" },
-    { itemName: "CItem 4", itemValue: "4" },
-    { itemName: "DItem 5", itemValue: "5" },
-    { itemName: "EItem 6", itemValue: "6" }
-  ], h = () => {
-    o([]), d()();
-  }, b = (t) => {
-    const { checked: l, value: a } = t.target;
-    o((s) => {
-      const c = l ? [...s, a] : s.filter((g) => g !== a);
-      return d()(c), c;
-    });
-  };
-  return /* @__PURE__ */ S(M, { children: [
-    i.header && /* @__PURE__ */ r(
-      e.MultiSelectHeader,
-      {
-        label: "Item list",
-        clearTrigger: n.length > 0 ? "Clear Selection" : "",
-        onClear: h
-      }
-    ),
-    /* @__PURE__ */ r(e, { ...i, children: I.map(({ itemName: t, itemValue: l, disabled: a }) => /* @__PURE__ */ r(
-      e.MultiSelectItem,
-      {
-        label: t,
-        value: l,
-        checked: n.includes(l),
-        onChange: b,
-        disabled: a
-      },
-      t
-    )) })
-  ] });
-}, u = {
-  scrollable: !0,
-  noBorder: !1
-}, f = m.bind({});
-f.args = {
-  ...u
+import { r as e } from "../../test-CPFNM-bL.js";
+import { f as t } from "../../components-DVUYdcHS.js";
+import "../../PasteHandlerPlugin-DUdocSHB.js";
+import { t as n } from "../../Container-BLjtYDqq.js";
+import "../../storyComponents/Container/index.js";
+import { useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+var o = {
+	title: "Organisms/MultiSelect",
+	component: t,
+	argTypes: { header: { table: { disable: !0 } } },
+	parameters: {
+		inspectComponent: t,
+		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  "
+	}
+}, s = (o) => {
+	let [s, c] = r([]), l = [
+		{
+			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"
+		},
+		{
+			itemName: "CItem 4",
+			itemValue: "4"
+		},
+		{
+			itemName: "DItem 5",
+			itemValue: "5"
+		},
+		{
+			itemName: "EItem 6",
+			itemValue: "6"
+		}
+	], u = () => {
+		c([]), e()();
+	}, d = (t) => {
+		let { checked: n, value: r } = t.target;
+		c((t) => {
+			let i = n ? [...t, r] : t.filter((e) => e !== r);
+			return e()(i), i;
+		});
+	};
+	return /* @__PURE__ */ a(n, { children: [o.header && /* @__PURE__ */ i(t.MultiSelectHeader, {
+		label: "Item list",
+		clearTrigger: s.length > 0 ? "Clear Selection" : "",
+		onClear: u
+	}), /* @__PURE__ */ i(t, {
+		...o,
+		children: l.map(({ itemName: e, itemValue: n, disabled: r }) => /* @__PURE__ */ i(t.MultiSelectItem, {
+			label: e,
+			value: n,
+			checked: s.includes(n),
+			onChange: d,
+			disabled: r
+		}, e))
+	})] });
+}, c = {
+	scrollable: !0,
+	noBorder: !1
+}, l = s.bind({});
+l.args = { ...c };
+var u = s.bind({});
+u.args = {
+	...c,
+	header: !0
 };
-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
+var d = s.bind({});
+d.args = {
+	scrollable: !1,
+	noBorder: !0,
+	header: !0
 };
-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
-  // storybook would not correctly clear the checkboxes
-  header: !0
-};
-export {
-  f as MultiSelectExample,
-  N as WithHeader,
-  V as WithheaderAndWithoutScrollContainerAndBorder,
-  H as default
-};
-//# sourceMappingURL=MultiSelect.stories.js.map
+//#endregion
+export { l as MultiSelectExample, u as WithHeader, d as WithheaderAndWithoutScrollContainerAndBorder, o 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 '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    inspectComponent: MultiSelect,\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,KAYnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyD,CAACC,MAAS;AACvE,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAmB,CAAA,CAAE,GAEzCC,IAAY;AAAA,IAChB,EAAE,UAAU,WAAW,WAAW,KAAK,UAAU,GAAA;AAAA,IACjD,EAAE,UAAU,WAAW,WAAW,IAAA;AAAA,IAClC,EAAE,UAAU,oFAAoF,WAAW,IAAA;AAAA,IAC3G,EAAE,UAAU,WAAW,WAAW,IAAA;AAAA,IAClC,EAAE,UAAU,WAAW,WAAW,IAAA;AAAA,IAClC,EAAE,UAAU,WAAW,WAAW,IAAA;AAAA,EAAI,GAGlCC,IAAc,MAAM;AACxB,IAAAH,EAAS,CAAA,CAAE,GACXI,IAAG;AAAA,EACL,GAEMC,IAAe,CAACC,MAAyC;AAC7D,UAAM,EAAE,SAAAC,GAAS,OAAAC,EAAA,IAAUF,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,IACT,CAAC;AAAA,EACH;AAEA,2BACGE,GAAA,EAGE,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,IAAA;AAAA,IAGb,gBAAAU,EAACjB,GAAA,EAAa,GAAGE,GACd,UAAAI,EAAU,IAAI,CAAC,EAAE,UAAAY,GAAU,WAAAH,GAAW,UAAAI,EAAA,MACrC,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,IAAA,CAOR,EAAA,CACH;AAAA,EAAA,GACF;AAEJ,GAEME,IAAyC;AAAA,EAC7C,YAAY;AAAA,EACZ,UAAU;AACZ,GAEaC,IAAqBpB,EAAS,KAAK,CAAA,CAAE;AAClDoB,EAAmB,OAAO;AAAA,EACxB,GAAGD;AACL;AAEO,MAAME,IAAarB,EAAS,KAAK,CAAA,CAAE;AAC1CqB,EAAW,OAAO;AAAA,EAChB,GAAGF;AAAA;AAAA;AAAA,EAGH,QAAQ;AACV;AAEO,MAAMG,IAA+CtB,EAAS,KAAK,CAAA,CAAE;AAC5EsB,EAA6C,OAAO;AAAA,EAClD,YAAY;AAAA,EACZ,UAAU;AAAA;AAAA;AAAA,EAGV,QAAQ;AACV;"}
+{"version":3,"file":"MultiSelect.stories.js","names":[],"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 '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    inspectComponent: MultiSelect,\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"],"mappings":";;;;;;;AAuBA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU,EACR,QAAQ,EACN,OAAO,EACL,SAAS,IACV,EACF,EACF;CACD,YAAY;EACV,kBAAkB;EACN,YAxBG;EAyBhB;CACF,EAEK,KAA0D,MAAS;CACvE,IAAM,CAAC,GAAO,KAAY,EAAmB,EAAE,CAAC,EAE1C,IAAY;EAChB;GAAE,UAAU;GAAW,WAAW;GAAK,UAAU;GAAM;EACvD;GAAE,UAAU;GAAW,WAAW;GAAK;EACvC;GAAE,UAAU;GAAoF,WAAW;GAAK;EAChH;GAAE,UAAU;GAAW,WAAW;GAAK;EACvC;GAAE,UAAU;GAAW,WAAW;GAAK;EACvC;GAAE,UAAU;GAAW,WAAW;GAAK;EACxC,EAEK,UAAoB;AAExB,EADA,EAAS,EAAE,CAAC,EACZ,GAAI,EAAE;IAGF,KAAgB,MAAyC;EAC7D,IAAM,EAAE,YAAS,aAAU,EAAM;AACjC,KAAU,MAAc;GACtB,IAAM,IAAW,IAAU,CAAC,GAAG,GAAW,EAAM,GAAG,EAAU,QAAQ,MAAc,MAAc,EAAM;AAEvG,UADA,GAAI,CAAC,EAAS,EACP;IACP;;AAGJ,QACE,kBAAC,GAAD,EAAA,UAAA,CAGG,EAAK,UACJ,kBAAC,EAAY,mBAAb;EACE,OAAM;EACN,cAAc,EAAM,SAAS,IAAI,oBAAoB;EACrD,SAAS;EACT,CAAA,EAEJ,kBAAC,GAAD;EAAa,GAAI;YACd,EAAU,KAAK,EAAE,aAAU,cAAW,kBACrC,kBAAC,EAAY,iBAAb;GAEE,OAAO;GACP,OAAO;GACP,SAAS,EAAM,SAAS,EAAU;GAClC,UAAU;GACA;GACV,EANK,EAML,CACF;EACU,CAAA,CACJ,EAAA,CAAA;GAIV,IAAyC;CAC7C,YAAY;CACZ,UAAU;CACX,EAEY,IAAqB,EAAS,KAAK,EAAE,CAAC;AACnD,EAAmB,OAAO,EACxB,GAAG,GACJ;AAED,IAAa,IAAa,EAAS,KAAK,EAAE,CAAC;AAC3C,EAAW,OAAO;CAChB,GAAG;CAGH,QAAQ;CACT;AAED,IAAa,IAA+C,EAAS,KAAK,EAAE,CAAC;AAC7E,EAA6C,OAAO;CAClD,YAAY;CACZ,UAAU;CAGV,QAAQ;CACT"}

package/dist/components/MultiSelect/components/MultiSelectHeader.js

@@ -1,34 +1,3 @@
-import "react/jsx-runtime";
-import "../../../MultiSelectItem-BzBmsKof.js";
-import "../../Label/Label.js";
-import "../../Accordion/Accordion.js";
-import "react";
-import "../../Buttons/Button.js";
-import "../../Buttons/LinkButton.js";
-import "@react-aria/button";
-import "../../Checkbox/Checkbox.js";
-import "@react-aria/dialog";
-import "@react-aria/focus";
-import "@react-aria/overlays";
-import "../../OverlayCloseButton/OverlayCloseButton.js";
-import "../../GridRow/GridRow.js";
-import "../../IconButton/IconButton.js";
-import "../../Input/Input.js";
-import "../../InputField/InputField.js";
-import "react-router";
-import { a as C } from "../../../TablePlugin-BRZcXq73.js";
-import "../../RteEditor/Providers/LanguageProvider.js";
-import "../../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
-import "../../RteEditor/hooks/components/Flyout.js";
-import "react-dom";
-import "../../../index-yEhaxKq-.js";
-import "../../SearchField/SearchField.js";
-import "../../SelectListbox/SelectListbox.js";
-import "../../SelectListbox/SelectProvider.js";
-import "../../Sortable/components/SortableItem.js";
-import "../../../SortableProvider-BbwlEPIr.js";
-import "../../WeekSelector/components/WeekSelectorOptionContainer.js";
-export {
-  C as MultiSelectHeader
-};
-//# sourceMappingURL=MultiSelectHeader.js.map
+import { p as e } from "../../../components-DVUYdcHS.js";
+import "../../../PasteHandlerPlugin-DUdocSHB.js";
+export { e as MultiSelectHeader };

package/dist/components/MultiSelect/components/MultiSelectItem.js

@@ -1,9 +1,2 @@
-import "react/jsx-runtime";
-import "react";
-import { M as e } from "../../../MultiSelectItem-BzBmsKof.js";
-import "../../Checkbox/Checkbox.js";
-import "../../Label/Label.js";
-export {
-  e as MultiSelectItem
-};
-//# sourceMappingURL=MultiSelectItem.js.map
+import { t as e } from "../../../MultiSelectItem-BF5xRjz5.js";
+export { e as MultiSelectItem };

package/dist/components/MultiSelect/index.js

@@ -1,5 +1,3 @@
-import { M as l } from "../../TablePlugin-BRZcXq73.js";
-export {
-  l as MultiSelect
-};
-//# sourceMappingURL=index.js.map
+import { f as e } from "../../components-DVUYdcHS.js";
+import "../../PasteHandlerPlugin-DUdocSHB.js";
+export { e as MultiSelect };

package/dist/components/MultiSelectBox/MultiSelectBox.js

@@ -1,207 +1,2 @@
-import { jsxs as g, jsx as u } from "react/jsx-runtime";
-import { useId as G, useState as d, useRef as A, useCallback as f, useEffect as k } from "react";
-import { c as v } from "../../clsx-OuTLNxxd.js";
-import { Icon as J } from "../Icon/Icon.js";
-import { Checkbox as Q } from "../Checkbox/Checkbox.js";
-import { usePositionedFloaters as V } from "../hooks/usePositionedFloaters.js";
-import '../../assets/MultiSelectBox.css';const r = {
-  "multi-select-box-wrapper": "_multi-select-box-wrapper_wvuay_1",
-  "multi-select-box-trigger": "_multi-select-box-trigger_wvuay_5",
-  "multi-select-box-trigger--darkBorder": "_multi-select-box-trigger--darkBorder_wvuay_22",
-  "multi-select-box-trigger--not-valid": "_multi-select-box-trigger--not-valid_wvuay_26",
-  "multi-select-box-trigger-label": "_multi-select-box-trigger-label_wvuay_40",
-  "multi-select-box-trigger-icon": "_multi-select-box-trigger-icon_wvuay_54",
-  "multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--open_wvuay_59",
-  "multi-select-box-listbox--wrapper": "_multi-select-box-listbox--wrapper_wvuay_63",
-  "multi-select-box-listbox": "_multi-select-box-listbox_wvuay_63",
-  "multi-select-box-listbox-option": "_multi-select-box-listbox-option_wvuay_90",
-  "multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--active_wvuay_101",
-  "multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-content_wvuay_112",
-  "multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_wvuay_126"
-}, le = ({
-  selectData: c,
-  onChange: m,
-  defaultSelectedItems: I,
-  labelSuffix: E = "geselecteerd",
-  disabled: P = !1,
-  fullWidth: B = !1,
-  darkBorder: C = !1,
-  notValid: L = !1,
-  maxOptionHeight: F,
-  optionPositionRight: K
-}) => {
-  const _ = G(), [n, w] = d(I || []), [S, y] = d(I?.length || 0), [s, a] = d(!1), [b, x] = d(-1), h = A(null), N = A(null), [R, $] = d(null), [D, M] = d(null), { style: T, updatePosition: O } = V(R, D, {
-    mouseEvent: "click",
-    offset: 4,
-    maxFixedHeight: F,
-    horizontalPosition: K ? "right" : "left",
-    mobileBreakpoint: "28rem",
-    fullWidth: B
-  }), p = f(
-    ({ target: e }) => {
-      !e || !h.current || h.current.contains(e) || a(!1);
-    },
-    [a]
-  ), j = f(
-    (e) => {
-      switch (e.key) {
-        case "Enter":
-          e.preventDefault(), a(!0);
-          break;
-        case "Escape":
-          s && (e.stopPropagation(), a(!1));
-          break;
-      }
-    },
-    [s]
-  ), z = f(
-    (e) => {
-      if (s)
-        switch (e.key) {
-          case "ArrowDown":
-            e.preventDefault(), x((t) => {
-              let l = t;
-              do
-                l = l < c.length - 1 ? l + 1 : 0;
-              while (c[l]?.disabled);
-              return l;
-            });
-            break;
-          case "ArrowUp":
-            e.preventDefault(), x((t) => {
-              let l = t;
-              do
-                l = l <= 0 ? c.length - 1 : l - 1;
-              while (c[l]?.disabled);
-              return l;
-            });
-            break;
-          case "Enter": {
-            e.preventDefault();
-            const t = c[b];
-            if (!t || t.disabled) break;
-            const o = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
-            w(o), y(o.length), m(o);
-            break;
-          }
-          case "Tab":
-            e.preventDefault(), a(!1);
-            break;
-          case "Escape":
-            e.stopPropagation(), a(!1);
-            break;
-        }
-    },
-    [b, s, c, n, m]
-  ), U = (e, t) => {
-    if (t.disabled || e.target.tagName === "INPUT") return;
-    const o = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
-    w(o), y(o.length), m(o), O();
-  }, H = f(
-    (e) => {
-      const { checked: t, value: l } = e.target;
-      let o = [...n];
-      if (t) {
-        const i = c.find((q) => q.value === l);
-        i && o.push(i);
-      } else
-        o = o.filter((i) => i.value !== l);
-      w(o), y(o.length), m(o), O();
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [c, n, m]
-  );
-  return k(() => {
-    s && x(0);
-  }, [s]), k(() => {
-    N.current?.children[b]?.focus();
-  }, [b]), k(() => {
-    if (s)
-      return document.addEventListener("click", p, !0), document.addEventListener("scroll", p, !0), () => {
-        document.removeEventListener("click", p, !0), document.removeEventListener("scroll", p, !0);
-      };
-  }, [p, s]), /* @__PURE__ */ g("div", { className: r["multi-select-box-wrapper"], ref: h, children: [
-    /* @__PURE__ */ g(
-      "button",
-      {
-        className: v(r["multi-select-box-trigger"], {
-          [r["multi-select-box-trigger--darkBorder"]]: C,
-          [r["multi-select-box-trigger--not-valid"]]: L
-        }),
-        type: "button",
-        onClick: () => {
-          a(!s);
-        },
-        onKeyDown: j,
-        "aria-expanded": s,
-        "aria-haspopup": "listbox",
-        "aria-label": `${S} ${E}`,
-        disabled: P,
-        ...s && { "aria-controls": _ },
-        ref: M,
-        children: [
-          /* @__PURE__ */ g("span", { className: r["multi-select-box-trigger-label"], children: [
-            S,
-            " ",
-            E
-          ] }),
-          /* @__PURE__ */ u(
-            J,
-            {
-              className: v(r["multi-select-box-trigger-icon"], {
-                [r["multi-select-box-trigger-icon--open"]]: s
-              }),
-              name: "CheveronDown",
-              size: 16
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ u(
-      "div",
-      {
-        id: _,
-        className: v(r["multi-select-box-listbox--wrapper"]),
-        style: { ...T.style, visibility: s ? "visible" : "hidden" },
-        role: "listbox",
-        ref: $,
-        children: /* @__PURE__ */ u("ul", { className: r["multi-select-box-listbox"], ref: N, children: c.map(({ label: e, value: t, disabled: l }, o) => /* @__PURE__ */ u(
-          "li",
-          {
-            className: v(r["multi-select-box-listbox-option"], {
-              [r["multi-select-box-listbox-option--active"]]: o === b,
-              [r["multi-select-box-listbox-option--disabled"]]: l
-            }),
-            role: "option",
-            onKeyDown: z,
-            onClick: (i) => U(i, { label: e, value: t, disabled: l }),
-            onMouseOver: () => x(o),
-            onFocus: () => x(o),
-            tabIndex: 0,
-            "aria-selected": n.some((i) => i.value === t),
-            children: /* @__PURE__ */ g("label", { htmlFor: e, className: r["multi-select-box-listbox-option-content"], tabIndex: -1, children: [
-              /* @__PURE__ */ u(
-                Q,
-                {
-                  id: `${e}-${_}`,
-                  onChange: H,
-                  value: t,
-                  tabIndex: -1,
-                  disabled: l,
-                  checked: n.some((i) => i.value === t)
-                }
-              ),
-              /* @__PURE__ */ u("span", { children: e })
-            ] })
-          },
-          t
-        )) })
-      }
-    )
-  ] });
-};
-export {
-  le as MultiSelectBox
-};
-//# sourceMappingURL=MultiSelectBox.js.map
+import { t as e } from "../../MultiSelectBox-Cuh_o-A1.js";
+export { e as MultiSelectBox };

package/dist/components/MultiSelectBox/MultiSelectBox.stories.js

@@ -1,71 +1,102 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { f as u } from "../../index-B_q_4aBT.js";
-import { useState as r } from "react";
-import { MultiSelectBox as l } from "./MultiSelectBox.js";
-const d = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", S = {
-  title: "Organisms/MultiSelectBox",
-  component: l,
-  argTypes: {
-    onChange: {
-      action: "Selected values",
-      table: {
-        disable: !0
-      }
-    }
-  },
-  parameters: {
-    inspectComponent: l,
-    codeString: d
-  }
-}, f = [
-  { label: "A.B. Docent", value: "1" },
-  { label: "B.C. Docent met lange achternaam", value: "2" },
-  {
-    label: "prof. F.G. Docent met lang achternaam",
-    value: "3"
-  },
-  { label: "H.I. Docent", value: "4" },
-  { label: "K.L. Docent ", value: "5" },
-  { label: "A.B. Docent", value: "6" },
-  { label: "B.C. Docent met lange achternaam", value: "7" },
-  {
-    label: "prof. F.G. Docent met lang achternaam",
-    value: "8"
-  },
-  { label: "H.I. Docent", value: "9" },
-  { label: "K.L. Docent ", value: "10" }
-], n = (e) => {
-  const [c, s] = r(e.defaultSelectedItems || []), i = (t) => {
-    e.onChange && e.onChange(t), s(t);
-  };
-  return /* @__PURE__ */ m("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: [
-    /* @__PURE__ */ a("span", { children: c.map((t) => t.label).join(", ") }),
-    /* @__PURE__ */ a(l, { ...e, onChange: i })
-  ] });
-}, o = {
-  fullWidth: !1,
-  labelSuffix: "geselecteerd",
-  maxOptionHeight: "20rem",
-  optionPositionRight: !1,
-  disabled: !1,
-  selectData: f,
-  onChange: u()
-}, b = n.bind({});
-b.args = {
-  ...o
+import { r as e } from "../../test-CPFNM-bL.js";
+import { t } from "../../MultiSelectBox-Cuh_o-A1.js";
+import { useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+var a = {
+	title: "Organisms/MultiSelectBox",
+	component: t,
+	argTypes: { onChange: {
+		action: "Selected values",
+		table: { disable: !0 }
+	} },
+	parameters: {
+		inspectComponent: t,
+		codeString: "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />"
+	}
+}, o = [
+	{
+		label: "A.B. Docent",
+		value: "1"
+	},
+	{
+		label: "B.C. Docent met lange achternaam",
+		value: "2"
+	},
+	{
+		label: "prof. F.G. Docent met lang achternaam",
+		value: "3"
+	},
+	{
+		label: "H.I. Docent",
+		value: "4"
+	},
+	{
+		label: "K.L. Docent ",
+		value: "5"
+	},
+	{
+		label: "A.B. Docent",
+		value: "6"
+	},
+	{
+		label: "B.C. Docent met lange achternaam",
+		value: "7"
+	},
+	{
+		label: "prof. F.G. Docent met lang achternaam",
+		value: "8"
+	},
+	{
+		label: "H.I. Docent",
+		value: "9"
+	},
+	{
+		label: "K.L. Docent ",
+		value: "10"
+	}
+], s = (e) => {
+	let [a, o] = n(e.defaultSelectedItems || []), s = (t) => {
+		e.onChange && e.onChange(t), o(t);
+	};
+	return /* @__PURE__ */ i("div", {
+		style: {
+			width: "30rem",
+			margin: "0rem auto 0 auto"
+		},
+		children: [/* @__PURE__ */ r("span", { children: a.map((e) => e.label).join(", ") }), /* @__PURE__ */ r(t, {
+			...e,
+			onChange: s
+		})]
+	});
+}, c = {
+	fullWidth: !1,
+	labelSuffix: "geselecteerd",
+	maxOptionHeight: "20rem",
+	optionPositionRight: !1,
+	disabled: !1,
+	selectData: o,
+	onChange: e()
+}, l = s.bind({});
+l.args = { ...c };
+var u = s.bind({});
+u.args = {
+	...c,
+	defaultSelectedItems: [
+		{
+			label: "A.B. Docent",
+			value: "1"
+		},
+		{
+			label: "H.I. Docent",
+			value: "4"
+		},
+		{
+			label: "A.B. Docent",
+			value: "6"
+		}
+	]
 };
-const g = n.bind({});
-g.args = {
-  ...o,
-  defaultSelectedItems: [
-    { label: "A.B. Docent", value: "1" },
-    { label: "H.I. Docent", value: "4" },
-    { label: "A.B. Docent", value: "6" }
-  ]
-};
-export {
-  b as MultiSelectBoxExample,
-  g as WithDefaultSelectedItems,
-  S as default
-};
-//# sourceMappingURL=MultiSelectBox.stories.js.map
+//#endregion
+export { l as MultiSelectBoxExample, u as WithDefaultSelectedItems, a as default };
+
+//# sourceMappingURL=MultiSelectBox.stories.js.map