npm - @uva-glass/component-library - Versions diffs - 3.39.1 → 3.41.0 - Mend

@uva-glass/component-library 3.39.1 → 3.41.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxButtonBar.stories.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxButtonBarProps } from './CheckboxButtonBar';\n\nimport { CheckboxButtonBar } from './CheckboxButtonBar';\n\nconst codeString =\n '<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/CheckboxButtonBar',\n component: CheckboxButtonBar,\n argTypes: {\n checkboxes: {\n table: {\n disable: true,\n },\n },\n defaultValues: {\n table: {\n disable: true,\n },\n },\n label: {\n control: 'text',\n },\n labelPosition: {\n control: 'radio',\n options: ['top', 'left'],\n },\n required: {\n control: 'boolean',\n },\n notValidatedText: {\n control: 'text',\n },\n disableGroup: {\n control: 'boolean',\n },\n actAsRadioButtonBar: {\n control: 'boolean',\n },\n onSetValues: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: CheckboxButtonBar,\n codeString: codeString,\n },\n} as Meta<CheckboxButtonBarProps>;\n\nconst Template: StoryFn<CheckboxButtonBarProps> = (args) => <CheckboxButtonBar {...args} />;\n\nexport const CheckboxButtonBarExample = Template.bind({});\nCheckboxButtonBarExample.args = {\n label: 'Periode',\n required: true,\n checkboxes: [\n {\n label: '1.1',\n value: '1',\n },\n {\n label: '1.2',\n value: '2',\n },\n {\n label: '1.3',\n value: '3',\n },\n {\n label: '4',\n value: '4',\n },\n {\n label: '5',\n value: '5',\n },\n {\n label: '6',\n value: '6',\n },\n ],\n defaultValues: ['1', '2'],\n labelPosition: 'top',\n footerText: 'Weken in periode 2',\n onSetValues: fn(),\n};\n\nexport const CheckboxButtonBarAsRadioButtonBar = Template.bind({});\nCheckboxButtonBarAsRadioButtonBar.args = {\n label: 'Weken',\n required: true,\n checkboxes: [\n {\n label: '1',\n value: '1',\n },\n {\n label: '2',\n value: '2',\n },\n {\n label: '3',\n value: '3',\n },\n {\n label: '4',\n value: '4',\n },\n {\n label: '5',\n value: '5',\n },\n {\n label: '6',\n value: '6',\n },\n ],\n defaultValues: ['1'],\n labelPosition: 'top',\n actAsRadioButtonBar: true,\n onSetValues: fn(),\n};\n\nexport const CheckboxButtonBarWithPrefix = Template.bind({});\nCheckboxButtonBarWithPrefix.args = {\n label: 'Weken',\n required: true,\n checkboxes: [\n {\n label: '1',\n value: '1',\n prefix: '13',\n },\n {\n label: '2',\n value: '2',\n prefix: '14',\n },\n {\n label: '3',\n value: '3',\n prefix: '15',\n },\n {\n label: '4',\n value: '4',\n prefix: '16',\n },\n {\n label: '5',\n value: '5',\n prefix: '17',\n },\n {\n label: '6',\n value: '6',\n prefix: '18',\n },\n ],\n defaultValues: ['1'],\n labelPosition: 'top',\n actAsRadioButtonBar: false,\n onSetValues: fn(),\n};\n\nexport const CheckboxButtonBarWithTooltip = Template.bind({});\nCheckboxButtonBarWithTooltip.args = {\n label: 'Weken',\n required: true,\n checkboxes: [\n {\n label: '1',\n value: '1',\n prefix: '36',\n tooltip: (\n <>\n 1 sept - 5 sept\n <br />\n 2025\n </>\n ),\n },\n {\n label: '2',\n value: '2',\n prefix: '37',\n tooltip: (\n <>\n 8 sept - 12 sept\n <br />\n 2025\n </>\n ),\n },\n {\n label: '3',\n value: '3',\n prefix: '38',\n tooltip: (\n <>\n 15 sept - 19 sept\n <br />\n 2025\n </>\n ),\n },\n {\n label: '4',\n value: '4',\n prefix: '39',\n tooltip: (\n <>\n 22 sept - 26 sept\n <br />\n 2025\n </>\n ),\n },\n {\n label: '5',\n value: '5',\n prefix: '40',\n tooltip: (\n <>\n 29 sept - 3 okt\n <br />\n 2025\n </>\n ),\n },\n {\n label: '6',\n value: '6',\n prefix: '41',\n tooltip: (\n <>\n 6 okt - 10 okt\n <br />\n 2025\n </>\n ),\n },\n {\n label: '7',\n value: '7',\n prefix: '42',\n tooltip: (\n <>\n 13 okt - 17 okt\n <br />\n 2025\n </>\n ),\n },\n {\n label: '8',\n value: '8',\n prefix: '43',\n tooltip: (\n <>\n 20 okt - 24 okt\n <br />\n 2025\n </>\n ),\n },\n ],\n defaultValues: ['1'],\n labelPosition: 'top',\n actAsRadioButtonBar: false,\n onSetValues: fn(),\n};\n"],"names":["codeString","CheckboxButtonBar_stories","CheckboxButtonBar","Template","args","jsx","CheckboxButtonBarExample","fn","CheckboxButtonBarAsRadioButtonBar","CheckboxButtonBarWithPrefix","CheckboxButtonBarWithTooltip","jsxs","Fragment"],"mappings":";;;AAOA,MAAMA,IACJ,iJAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,eAAe;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,eAAe;AAAA,MACb,SAAS;AAAA,MACT,SAAS,CAAC,OAAO,MAAM;AAAA,IAAA;AAAA,IAEzB,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,kBAAkB;AAAA,MAChB,SAAS;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,IAEX,qBAAqB;AAAA,MACnB,SAAS;AAAA,IAAA;AAAA,IAEX,aAAa;AAAA,MACX,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAA4C,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAmB,GAAGE,GAAM,GAE5EE,IAA2BH,EAAS,KAAK,CAAA,CAAE;AACxDG,EAAyB,OAAO;AAAA,EAC9B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,eAAe,CAAC,KAAK,GAAG;AAAA,EACxB,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,aAAaC,EAAA;AACf;AAEO,MAAMC,IAAoCL,EAAS,KAAK,CAAA,CAAE;AACjEK,EAAkC,OAAO;AAAA,EACvC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,eAAe,CAAC,GAAG;AAAA,EACnB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,aAAaD,EAAA;AACf;AAEO,MAAME,IAA8BN,EAAS,KAAK,CAAA,CAAE;AAC3DM,EAA4B,OAAO;AAAA,EACjC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,IAEV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,IAEV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,IAEV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,IAEV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,IAEV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,eAAe,CAAC,GAAG;AAAA,EACnB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,aAAaF,EAAA;AACf;AAEO,MAAMG,IAA+BP,EAAS,KAAK,CAAA,CAAE;AAC5DO,EAA6B,OAAO;AAAA,EAClC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SACE,gBAAAC,EAAAC,GAAA,EAAE,UAAA;AAAA,QAAA;AAAA,0BAEC,MAAA,EAAG;AAAA,QAAE;AAAA,MAAA,~~EAAA~~,~~CAER~~;AAAA,IAAA;AAAA,~~IAGJ~~;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SACE,gBAAAD,EAAAC,GAAA,EAAE,UAAA;AAAA,QAAA;AAAA,0BAEC,MAAA,EAAG;AAAA,QAAE;AAAA,MAAA,EAAA,CAER;AAAA,IAAA;AAAA,IAGJ;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SACE,gBAAAD,EAAAC,GAAA,EAAE,UAAA;AAAA,QAAA;AAAA,0BAEC,MAAA,EAAG;AAAA,QAAE;AAAA,MAAA,EAAA,CAER;AAAA,IAAA;AAAA,IAGJ;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SACE,gBAAAD,EAAAC,GAAA,EAAE,UAAA;AAAA,QAAA;AAAA,0BAEC,MAAA,EAAG;AAAA,QAAE;AAAA,MAAA,EAAA,CAER;AAAA,IAAA;AAAA,IAGJ;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SACE,gBAAAD,EAAAC,GAAA,EAAE,UAAA;AAAA,QAAA;AAAA,0BAEC,MAAA,EAAG;AAAA,QAAE;AAAA,MAAA,EAAA,CAER;AAAA,IAAA;AAAA,IAGJ;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SACE,gBAAAD,EAAAC,GAAA,EAAE,UAAA;AAAA,QAAA;AAAA,0BAEC,MAAA,EAAG;AAAA,QAAE;AAAA,MAAA,EAAA,CAER;AAAA,IAAA;AAAA,IAGJ;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SACE,gBAAAD,EAAAC,GAAA,EAAE,UAAA;AAAA,QAAA;AAAA,0BAEC,MAAA,EAAG;AAAA,QAAE;AAAA,MAAA,EAAA,CAER;AAAA,IAAA;AAAA,IAGJ;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SACE,gBAAAD,EAAAC,GAAA,EAAE,UAAA;AAAA,QAAA;AAAA,0BAEC,MAAA,EAAG;AAAA,QAAE;AAAA,MAAA,~~EAAA~~,~~CAER~~;AAAA,IAAA;AAAA,~~EAEJ~~;AAAA,EAEF,eAAe,CAAC,GAAG;AAAA,EACnB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,aAAaL,EAAA;AACf;"}
1	+ {"version":3,"file":"CheckboxButtonBar.stories.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxButtonBarProps } from './CheckboxButtonBar';\n\nimport { CheckboxButtonBar } from './CheckboxButtonBar';\n\nconst codeString =\n '<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/CheckboxButtonBar',\n component: CheckboxButtonBar,\n argTypes: {\n checkboxes: {\n table: {\n disable: true,\n },\n },\n defaultValues: {\n table: {\n disable: true,\n },\n },\n label: {\n control: 'text',\n },\n labelPosition: {\n control: 'radio',\n options: ['top', 'left'],\n },\n required: {\n control: 'boolean',\n },\n notValidatedText: {\n control: 'text',\n },\n disableGroup: {\n control: 'boolean',\n },\n actAsRadioButtonBar: {\n control: 'boolean',\n },\n onSetValues: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: CheckboxButtonBar,\n codeString: codeString,\n },\n} as Meta<CheckboxButtonBarProps>;\n\nconst Template: StoryFn<CheckboxButtonBarProps> = (args) => <CheckboxButtonBar {...args} />;\n\nexport const CheckboxButtonBarExample = Template.bind({});\nCheckboxButtonBarExample.args = {\n label: 'Periode',\n required: true,\n checkboxes: [\n {\n label: '1.1',\n value: '1',\n },\n {\n label: '1.2',\n value: '2',\n },\n {\n label: '1.3',\n value: '3',\n },\n {\n label: '4',\n value: '4',\n },\n {\n label: '5',\n value: '5',\n },\n {\n label: '6',\n value: '6',\n },\n ],\n defaultValues: ['1', '2'],\n labelPosition: 'top',\n footerText: 'Weken in periode 2',\n onSetValues: fn(),\n};\n\nexport const CheckboxButtonBarAsRadioButtonBar = Template.bind({});\nCheckboxButtonBarAsRadioButtonBar.args = {\n label: 'Weken',\n required: true,\n checkboxes: [\n {\n label: '1',\n value: '1',\n },\n {\n label: '2',\n value: '2',\n },\n {\n label: '3',\n value: '3',\n },\n {\n label: '4',\n value: '4',\n },\n {\n label: '5',\n value: '5',\n },\n {\n label: '6',\n value: '6',\n },\n ],\n defaultValues: ['1'],\n labelPosition: 'top',\n actAsRadioButtonBar: true,\n onSetValues: fn(),\n};\n\nexport const CheckboxButtonBarWithPrefix = Template.bind({});\nCheckboxButtonBarWithPrefix.args = {\n label: 'Weken',\n required: true,\n checkboxes: [\n {\n label: '1',\n value: '1',\n prefix: '13',\n },\n {\n label: '2',\n value: '2',\n prefix: '14',\n },\n {\n label: '3',\n value: '3',\n prefix: '15',\n },\n {\n label: '4',\n value: '4',\n prefix: '16',\n },\n {\n label: '5',\n value: '5',\n prefix: '17',\n },\n {\n label: '6',\n value: '6',\n prefix: '18',\n },\n ],\n defaultValues: ['1'],\n labelPosition: 'top',\n actAsRadioButtonBar: false,\n onSetValues: fn(),\n};\n\nexport const CheckboxButtonBarWithTooltip = Template.bind({});\nCheckboxButtonBarWithTooltip.args = {\n label: 'Weken',\n required: true,\n checkboxes: [\n {\n label: '1',\n value: '1',\n prefix: '36',\n tooltip: (\n <>\n 1 sept - 5 sept\n <br />\n 2025\n </>\n ),\n tooltipPosition: 'left',\n },\n {\n label: '2',\n value: '2',\n prefix: '37',\n tooltip: (\n <>\n 8 sept - 12 sept\n <br />\n 2025\n </>\n ),\n },\n {\n label: '3',\n value: '3',\n prefix: '38',\n tooltip: (\n <>\n 15 sept - 19 sept\n <br />\n 2025\n </>\n ),\n },\n {\n label: '4',\n value: '4',\n prefix: '39',\n tooltip: (\n <>\n 22 sept - 26 sept\n <br />\n 2025\n </>\n ),\n },\n {\n label: '5',\n value: '5',\n prefix: '40',\n tooltip: (\n <>\n 29 sept - 3 okt\n <br />\n 2025\n </>\n ),\n },\n {\n label: '6',\n value: '6',\n prefix: '41',\n tooltip: (\n <>\n 6 okt - 10 okt\n <br />\n 2025\n </>\n ),\n },\n {\n label: '7',\n value: '7',\n prefix: '42',\n tooltip: (\n <>\n 13 okt - 17 okt\n <br />\n 2025\n </>\n ),\n },\n {\n label: '8',\n value: '8',\n prefix: '43',\n tooltip: (\n <>\n 20 okt - 24 okt\n <br />\n 2025\n </>\n ),\n tooltipPosition: 'right',\n },\n ],\n defaultValues: ['1'],\n labelPosition: 'top',\n actAsRadioButtonBar: false,\n onSetValues: fn(),\n};\n"],"names":["codeString","CheckboxButtonBar_stories","CheckboxButtonBar","Template","args","jsx","CheckboxButtonBarExample","fn","CheckboxButtonBarAsRadioButtonBar","CheckboxButtonBarWithPrefix","CheckboxButtonBarWithTooltip","jsxs","Fragment"],"mappings":"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"}

package/dist/components/CheckboxTree/CheckboxTree.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { jsxs as l, jsx as i } from "react/jsx-runtime";
 import { useRef as G, useState as S, useEffect as E, createRef as q } from "react";
 import { c as j } from "../../clsx-OuTLNxxd.js";
+import "../Accordion/Accordion.js";
 import { Icon as I } from "../Icon/Icon.js";
 import { Button as L } from "../Buttons/Button.js";
 import "../Buttons/LinkButton.js";
@@ -17,7 +18,7 @@ import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
 import "react-router";
-import "../../TablePlugin-C38z2r5y.js";
+import "../../TablePlugin-DNGtPPjq.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
@@ -36,7 +37,7 @@ import '../../assets/CheckboxTree.css';const a = {
   "checkbox-tree__leaves": "_checkbox-tree__leaves_l338d_39",
   "checkbox-tree__leaves--expanded": "_checkbox-tree__leaves--expanded_l338d_48",
   "checkbox-tree__leaf": "_checkbox-tree__leaf_l338d_52"
-}, _e = ({
+}, fe = ({
   title: f,
   checkboxTree: F,
   selectedValues: d,
@@ -163,6 +164,6 @@ import '../../assets/CheckboxTree.css';const a = {
   ] });
 };
 export {
-  _e as CheckboxTree
+  fe as CheckboxTree
 };
 //# sourceMappingURL=CheckboxTree.js.map

package/dist/components/CheckboxTree/CheckboxTree.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["import { createRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { MouseEventHandler, RefObject } from 'react';\n\nimport styles from './CheckboxTree.module.css';\n\nimport { Button, Checkbox, FormField, Icon, Label } from 'components';\nimport { useResponsive } from 'components/hooks/useResponsive';\n\n// TODO: Currently the checkbox tree shows odd behavior when a disabled checkbox is checked.\n// When deselecting the parent checkbox, the disabled checkbox is deselected, and will never\n// be checked again. We'll leave this for now, until we run into a real world\n// example where this is necessary.\n\nexport type CheckboxLeaf = {\n itemName: string;\n itemValue: string;\n disabled?: boolean;\n};\n\nexport type CheckboxBranch = {\n itemName: string;\n children: CheckboxLeaf[];\n};\n\nexport interface CheckboxTreeProps {\n /** The title of the component. /\n title?: string;\n /* Array of checkbox groups with a label and array of children (itemName, itemValue and disabled boolean). /\n checkboxTree: CheckboxBranch[];\n /* Array of selected values. /\n selectedValues?: string[];\n /* `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. /\n noLabelFrontWeight?: boolean;\n /* Returns array of selected values. /\n onChange?: (value: string[]) => void;\n}\n\n/* Represents a component to render a tree of checkboxes. /\nexport const CheckboxTree = ({\n title,\n checkboxTree,\n selectedValues,\n noLabelFrontWeight = false,\n onChange,\n}: CheckboxTreeProps) => {\n const checkboxRefs = useRef<Record<string, RefObject<HTMLInputElement \| null>>>({});\n const [values, setValues] = useState<string[]>([]);\n const { lessThan } = useResponsive();\n\n const valuesAreEqual = (values1: string[], values2: string[]): boolean => {\n if (values1.length !== values2.length) return false;\n\n const countElements = (list: string[]) =>\n list.reduce((acc: Record<string, number>, val) => {\n acc[val] = (acc[val] \|\| 0) + 1;\n return acc;\n }, {});\n\n const numberOfValues1 = countElements(values1);\n const numberOfValues2 = countElements(values2);\n\n return !Object.keys(numberOfValues1).some((key) => numberOfValues1[key] !== numberOfValues2[key]);\n };\n\n const createRefForKey = (key: string) => {\n if (!checkboxRefs.current[key]) {\n checkboxRefs.current[key] = createRef();\n }\n return checkboxRefs.current[key];\n };\n\n const setValue = () => {\n const newValues: string[] = [];\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (chkBox && chkBox.name.indexOf('Group') === -1 && chkBox.checked) {\n newValues.push(chkBox.value);\n }\n });\n setValues(newValues);\n if (onChange) onChange(newValues);\n };\n\n const setCheckboxesState = (checkGroupName: string) => {\n if (checkGroupName === '') return;\n\n const groupStatus: boolean[] = [];\n\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (chkBox?.getAttribute('data-groupname') === checkGroupName) {\n groupStatus.push(chkBox.checked);\n }\n });\n\n const every = groupStatus.every(Boolean);\n const some = groupStatus.some(Boolean);\n\n if (checkboxRefs.current[checkGroupName].current) {\n checkboxRefs.current[checkGroupName].current.checked = every;\n checkboxRefs.current[checkGroupName].current.indeterminate = !every && every !== some;\n checkboxRefs.current[checkGroupName].current.checked = every && every === some;\n }\n };\n\n const setExpandedAttributes = (trigger: HTMLButtonElement, container: Element \| null) => {\n const children = container?.querySelector('[data-ul]');\n\n (trigger.childNodes[0] as Element).classList.toggle(styles['checkbox-tree__branch--icon--expanded']);\n container\n ?.closest('[data-li]')\n ?.setAttribute(\n 'aria-expanded',\n container?.closest('[data-li]')?.getAttribute('aria-expanded') === 'false' ? 'true' : 'false'\n );\n\n if (children) {\n children.classList.toggle(styles['checkbox-tree__leaves--expanded']);\n }\n };\n\n const handleChange: MouseEventHandler<HTMLDivElement> = (event) => {\n const check = event.target as HTMLInputElement;\n\n if (check.type !== 'checkbox' && check.type !== 'button') return;\n\n if (\n lessThan.md &&\n check.name.indexOf('Group') !== -1 &&\n check.parentNode &&\n (check.parentNode.parentNode as HTMLElement).getAttribute('aria-expanded') === 'false'\n ) {\n event.preventDefault();\n setExpandedAttributes(check.parentNode as HTMLButtonElement, check.parentNode.parentNode as HTMLElement);\n return;\n }\n\n if (check.name.indexOf('Group') !== -1) {\n const childPrefix = check.name;\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n if (key.indexOf(`${childPrefix}_`) !== -1) {\n const chkBox = checkboxRefs.current[key].current;\n const parentCheckbox = checkboxRefs.current[childPrefix].current;\n if (!chkBox \|\| !parentCheckbox) return;\n chkBox.checked = parentCheckbox.checked ? true : false;\n }\n });\n setCheckboxesState(childPrefix);\n setValue();\n return;\n }\n setCheckboxesState(check.getAttribute('data-groupname') \|\| '');\n setValue();\n };\n\n const handleExpanded: MouseEventHandler<HTMLButtonElement> = (event) => {\n const target = event.target as HTMLButtonElement;\n const parent = target.closest('[data-li]');\n setExpandedAttributes(target, parent);\n };\n\n useEffect(() => {\n if (selectedValues && !valuesAreEqual(selectedValues, values)) {\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (selectedValues?.includes(chkBox.value)) {\n chkBox.checked = true;\n } else {\n chkBox.checked = false;\n }\n if (chkBox.name.indexOf('Group') !== -1) {\n setValues(selectedValues \|\| []);\n }\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedValues]);\n\n useEffect(() => {\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (chkBox.name.indexOf('Group') !== -1) {\n setCheckboxesState(chkBox.name);\n }\n });\n }, [values]);\n\n return (\n <div>\n {title && <span className={styles['checkbox-tree__header']}>{title}</span>}\n {/ eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n <div onClick={handleChange} data-ul role=\"tree\" tabIndex={0}>\n {checkboxTree.map(({ itemName, children }, index) => (\n <div\n key={itemName}\n className={styles['checkbox-tree__branch']}\n data-li\n aria-expanded={lessThan.md ? 'false' : 'true'}\n >\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Button variant=\"blank\" onClick={handleExpanded}>\n <Icon\n name=\"CheveronRight\"\n size={16}\n className={clsx(styles['checkbox-tree__branch--icon'], {\n [styles['checkbox-tree__branch--icon--expanded']]: !lessThan.md,\n })}\n />\n </Button>\n <Checkbox\n id={itemName}\n name={`Group${index}`}\n disabled={children.every((checkbox) => checkbox.disabled)}\n ref={createRefForKey(`Group${index}`)}\n />\n <Label htmlFor={itemName} noFontWeight={noLabelFrontWeight}>\n {itemName}\n </Label>\n </FormField>\n <div\n className={clsx(styles['checkbox-tree__leaves'], {\n [styles['checkbox-tree__leaves--expanded']]: !lessThan.md,\n })}\n data-ul\n >\n {children.map(({ itemName, itemValue, disabled }) => (\n <div key={itemName} className={styles['checkbox-tree__leaf']} data-li>\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Checkbox\n id={itemName}\n name={itemName}\n value={itemValue}\n disabled={disabled}\n data-groupname={`Group${index}`}\n ref={createRefForKey(`Group${index}_${itemName}`)}\n />\n <Label htmlFor={itemName} noFontWeight={noLabelFrontWeight}>\n {itemName}\n </Label>\n </FormField>\n </div>\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxTree","title","checkboxTree","selectedValues","noLabelFrontWeight","onChange","checkboxRefs","useRef","values","setValues","useState","lessThan","useResponsive","valuesAreEqual","values1","values2","countElements","list","acc","val","numberOfValues1","numberOfValues2","key","createRefForKey","createRef","setValue","newValues","chkBox","setCheckboxesState","checkGroupName","groupStatus","every","some","setExpandedAttributes","trigger","container","children","styles","handleChange","event","check","childPrefix","parentCheckbox","handleExpanded","target","parent","useEffect","itemName","index","jsxs","FormField","jsx","Button","Icon","clsx","Checkbox","checkbox","Label","itemValue","disabled"],"mappings":"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"}
1	+ {"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["import { createRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { MouseEventHandler, RefObject } from 'react';\n\nimport styles from './CheckboxTree.module.css';\n\nimport { Button, Checkbox, FormField, Icon, Label } from 'components';\nimport { useResponsive } from 'components/hooks/useResponsive';\n\n// TODO: Currently the checkbox tree shows odd behavior when a disabled checkbox is checked.\n// When deselecting the parent checkbox, the disabled checkbox is deselected, and will never\n// be checked again. We'll leave this for now, until we run into a real world\n// example where this is necessary.\n\nexport type CheckboxLeaf = {\n itemName: string;\n itemValue: string;\n disabled?: boolean;\n};\n\nexport type CheckboxBranch = {\n itemName: string;\n children: CheckboxLeaf[];\n};\n\nexport interface CheckboxTreeProps {\n /** The title of the component. /\n title?: string;\n /* Array of checkbox groups with a label and array of children (itemName, itemValue and disabled boolean). /\n checkboxTree: CheckboxBranch[];\n /* Array of selected values. /\n selectedValues?: string[];\n /* `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. /\n noLabelFrontWeight?: boolean;\n /* Returns array of selected values. /\n onChange?: (value: string[]) => void;\n}\n\n/* Represents a component to render a tree of checkboxes. /\nexport const CheckboxTree = ({\n title,\n checkboxTree,\n selectedValues,\n noLabelFrontWeight = false,\n onChange,\n}: CheckboxTreeProps) => {\n const checkboxRefs = useRef<Record<string, RefObject<HTMLInputElement \| null>>>({});\n const [values, setValues] = useState<string[]>([]);\n const { lessThan } = useResponsive();\n\n const valuesAreEqual = (values1: string[], values2: string[]): boolean => {\n if (values1.length !== values2.length) return false;\n\n const countElements = (list: string[]) =>\n list.reduce((acc: Record<string, number>, val) => {\n acc[val] = (acc[val] \|\| 0) + 1;\n return acc;\n }, {});\n\n const numberOfValues1 = countElements(values1);\n const numberOfValues2 = countElements(values2);\n\n return !Object.keys(numberOfValues1).some((key) => numberOfValues1[key] !== numberOfValues2[key]);\n };\n\n const createRefForKey = (key: string) => {\n if (!checkboxRefs.current[key]) {\n checkboxRefs.current[key] = createRef();\n }\n return checkboxRefs.current[key];\n };\n\n const setValue = () => {\n const newValues: string[] = [];\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (chkBox && chkBox.name.indexOf('Group') === -1 && chkBox.checked) {\n newValues.push(chkBox.value);\n }\n });\n setValues(newValues);\n if (onChange) onChange(newValues);\n };\n\n const setCheckboxesState = (checkGroupName: string) => {\n if (checkGroupName === '') return;\n\n const groupStatus: boolean[] = [];\n\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (chkBox?.getAttribute('data-groupname') === checkGroupName) {\n groupStatus.push(chkBox.checked);\n }\n });\n\n const every = groupStatus.every(Boolean);\n const some = groupStatus.some(Boolean);\n\n if (checkboxRefs.current[checkGroupName].current) {\n checkboxRefs.current[checkGroupName].current.checked = every;\n checkboxRefs.current[checkGroupName].current.indeterminate = !every && every !== some;\n checkboxRefs.current[checkGroupName].current.checked = every && every === some;\n }\n };\n\n const setExpandedAttributes = (trigger: HTMLButtonElement, container: Element \| null) => {\n const children = container?.querySelector('[data-ul]');\n\n (trigger.childNodes[0] as Element).classList.toggle(styles['checkbox-tree__branch--icon--expanded']);\n container\n ?.closest('[data-li]')\n ?.setAttribute(\n 'aria-expanded',\n container?.closest('[data-li]')?.getAttribute('aria-expanded') === 'false' ? 'true' : 'false'\n );\n\n if (children) {\n children.classList.toggle(styles['checkbox-tree__leaves--expanded']);\n }\n };\n\n const handleChange: MouseEventHandler<HTMLDivElement> = (event) => {\n const check = event.target as HTMLInputElement;\n\n if (check.type !== 'checkbox' && check.type !== 'button') return;\n\n if (\n lessThan.md &&\n check.name.indexOf('Group') !== -1 &&\n check.parentNode &&\n (check.parentNode.parentNode as HTMLElement).getAttribute('aria-expanded') === 'false'\n ) {\n event.preventDefault();\n setExpandedAttributes(check.parentNode as HTMLButtonElement, check.parentNode.parentNode as HTMLElement);\n return;\n }\n\n if (check.name.indexOf('Group') !== -1) {\n const childPrefix = check.name;\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n if (key.indexOf(`${childPrefix}_`) !== -1) {\n const chkBox = checkboxRefs.current[key].current;\n const parentCheckbox = checkboxRefs.current[childPrefix].current;\n if (!chkBox \|\| !parentCheckbox) return;\n chkBox.checked = parentCheckbox.checked ? true : false;\n }\n });\n setCheckboxesState(childPrefix);\n setValue();\n return;\n }\n setCheckboxesState(check.getAttribute('data-groupname') \|\| '');\n setValue();\n };\n\n const handleExpanded: MouseEventHandler<HTMLButtonElement> = (event) => {\n const target = event.target as HTMLButtonElement;\n const parent = target.closest('[data-li]');\n setExpandedAttributes(target, parent);\n };\n\n useEffect(() => {\n if (selectedValues && !valuesAreEqual(selectedValues, values)) {\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (selectedValues?.includes(chkBox.value)) {\n chkBox.checked = true;\n } else {\n chkBox.checked = false;\n }\n if (chkBox.name.indexOf('Group') !== -1) {\n setValues(selectedValues \|\| []);\n }\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedValues]);\n\n useEffect(() => {\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (chkBox.name.indexOf('Group') !== -1) {\n setCheckboxesState(chkBox.name);\n }\n });\n }, [values]);\n\n return (\n <div>\n {title && <span className={styles['checkbox-tree__header']}>{title}</span>}\n {/ eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n <div onClick={handleChange} data-ul role=\"tree\" tabIndex={0}>\n {checkboxTree.map(({ itemName, children }, index) => (\n <div\n key={itemName}\n className={styles['checkbox-tree__branch']}\n data-li\n aria-expanded={lessThan.md ? 'false' : 'true'}\n >\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Button variant=\"blank\" onClick={handleExpanded}>\n <Icon\n name=\"CheveronRight\"\n size={16}\n className={clsx(styles['checkbox-tree__branch--icon'], {\n [styles['checkbox-tree__branch--icon--expanded']]: !lessThan.md,\n })}\n />\n </Button>\n <Checkbox\n id={itemName}\n name={`Group${index}`}\n disabled={children.every((checkbox) => checkbox.disabled)}\n ref={createRefForKey(`Group${index}`)}\n />\n <Label htmlFor={itemName} noFontWeight={noLabelFrontWeight}>\n {itemName}\n </Label>\n </FormField>\n <div\n className={clsx(styles['checkbox-tree__leaves'], {\n [styles['checkbox-tree__leaves--expanded']]: !lessThan.md,\n })}\n data-ul\n >\n {children.map(({ itemName, itemValue, disabled }) => (\n <div key={itemName} className={styles['checkbox-tree__leaf']} data-li>\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Checkbox\n id={itemName}\n name={itemName}\n value={itemValue}\n disabled={disabled}\n data-groupname={`Group${index}`}\n ref={createRefForKey(`Group${index}_${itemName}`)}\n />\n <Label htmlFor={itemName} noFontWeight={noLabelFrontWeight}>\n {itemName}\n </Label>\n </FormField>\n </div>\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxTree","title","checkboxTree","selectedValues","noLabelFrontWeight","onChange","checkboxRefs","useRef","values","setValues","useState","lessThan","useResponsive","valuesAreEqual","values1","values2","countElements","list","acc","val","numberOfValues1","numberOfValues2","key","createRefForKey","createRef","setValue","newValues","chkBox","setCheckboxesState","checkGroupName","groupStatus","every","some","setExpandedAttributes","trigger","container","children","styles","handleChange","event","check","childPrefix","parentCheckbox","handleExpanded","target","parent","useEffect","itemName","index","jsxs","FormField","jsx","Button","Icon","clsx","Checkbox","checkbox","Label","itemValue","disabled"],"mappings":"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"}

package/dist/components/ControlsButton/ControlsButton.d.ts CHANGED Viewed

@@ -13,6 +13,8 @@ export interface ControlsButtonProps {
     prefix?: string;
     /** set tooltip */
     tooltip?: ReactNode;
+    /** set horizontal position of the tooltip */
+    tooltipPosition?: 'left' | 'center' | 'right';
     /** set if used as radiogroup */
     name?: string;
     /** `true` to set squared button; otherwise, `false`. The default is `false`. Note: hides icon */
@@ -24,4 +26,4 @@ export interface ControlsButtonProps {
     /** The callback function that is invoked when the radio button changes value. */
     onSetValue: (event: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const ControlsButton: ({ type, label, value, iconName, prefix, tooltip, name, forceSquared, checked, disabled, onSetValue, }: ControlsButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlsButton: ({ type, label, value, iconName, prefix, tooltip, tooltipPosition, name, forceSquared, checked, disabled, onSetValue, }: ControlsButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlsButton/ControlsButton.js CHANGED Viewed

@@ -1,67 +1,79 @@
-import { jsxs as l, Fragment as x, jsx as o } from "react/jsx-runtime";
-import { useId as z } from "react";
-import { c as w } from "../../clsx-OuTLNxxd.js";
-import { Icon as v } from "../Icon/Icon.js";
+import { jsxs as s, Fragment as g, jsx as o } from "react/jsx-runtime";
+import { useId as v } from "react";
+import { c as e } from "../../clsx-OuTLNxxd.js";
+import { Icon as I } from "../Icon/Icon.js";
 import '../../assets/ControlsButton.css';const t = {
-  "controls-input": "_controls-input_1hbz5_1",
-  "controls-button": "_controls-button_1hbz5_32",
-  "controls-button--squared": "_controls-button--squared_1hbz5_50",
-  "controls-button--with-prefix": "_controls-button--with-prefix_1hbz5_62",
-  "controls-button--with-icon": "_controls-button--with-icon_1hbz5_68",
-  "controls-button__wrapper": "_controls-button__wrapper_1hbz5_72",
-  "controls-button__prefix": "_controls-button__prefix_1hbz5_78",
-  "controls-button__tooltip": "_controls-button__tooltip_1hbz5_83"
-}, $ = ({
+  "controls-input": "_controls-input_lu12f_1",
+  "controls-button": "_controls-button_lu12f_32",
+  "controls-button--squared": "_controls-button--squared_lu12f_50",
+  "controls-button--with-prefix": "_controls-button--with-prefix_lu12f_62",
+  "controls-button--with-icon": "_controls-button--with-icon_lu12f_68",
+  "controls-button__wrapper": "_controls-button__wrapper_lu12f_72",
+  "controls-button__prefix": "_controls-button__prefix_lu12f_78",
+  "controls-button__tooltip": "_controls-button__tooltip_lu12f_83",
+  "controls-button__tooltip--left": "_controls-button__tooltip--left_lu12f_98",
+  "controls-button__tooltip--center": "_controls-button__tooltip--center_lu12f_102",
+  "controls-button__tooltip--right": "_controls-button__tooltip--right_lu12f_107"
+}, y = ({
   type: b = "checkbox",
-  label: _,
-  value: u,
+  label: c,
+  value: p,
   iconName: n,
-  prefix: r,
-  tooltip: s,
-  name: a,
-  forceSquared: p = !1,
+  prefix: l,
+  tooltip: r,
+  tooltipPosition: a = "center",
+  name: f,
+  forceSquared: d = !1,
   checked: h,
-  disabled: d,
-  onSetValue: m
+  disabled: m,
+  onSetValue: x
 }) => {
-  const f = z(), i = _.replace(/\s+/g, "_"), c = `${f}${i}`, e = `${c}-tooltip`;
-  return /* @__PURE__ */ l(x, { children: [
+  const w = v(), i = c.replace(/\s+/g, "_"), _ = `${w}${i}`, u = `${_}-tooltip`;
+  return /* @__PURE__ */ s(g, { children: [
     /* @__PURE__ */ o(
       "input",
       {
         type: b,
-        id: c,
-        name: a ?? i,
-        disabled: d,
-        value: u,
+        id: _,
+        name: f ?? i,
+        disabled: m,
+        value: p,
         checked: h,
-        onChange: m,
+        onChange: x,
         className: t["controls-input"],
-        "aria-describedby": s ? e : void 0
+        "aria-describedby": r ? u : void 0
       }
     ),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ s(
       "label",
       {
-        htmlFor: c,
-        className: w(t["controls-button"], [
-          p && t["controls-button--squared"],
-          r && t["controls-button--with-prefix"],
+        htmlFor: _,
+        className: e(t["controls-button"], [
+          d && t["controls-button--squared"],
+          l && t["controls-button--with-prefix"],
           n && t["controls-button--with-icon"]
         ]),
         children: [
-          n && /* @__PURE__ */ o(v, { name: n, size: 20 }),
-          /* @__PURE__ */ l("div", { className: t["controls-button__wrapper"], children: [
-            r && /* @__PURE__ */ o("div", { className: t["controls-button__prefix"], children: r }),
-            _
+          n && /* @__PURE__ */ o(I, { name: n, size: 20 }),
+          /* @__PURE__ */ s("div", { className: t["controls-button__wrapper"], children: [
+            l && /* @__PURE__ */ o("div", { className: t["controls-button__prefix"], children: l }),
+            c
           ] }),
-          s && /* @__PURE__ */ o("div", { id: e, role: "tooltip", className: t["controls-button__tooltip"], children: s })
+          r && /* @__PURE__ */ o(
+            "div",
+            {
+              id: u,
+              role: "tooltip",
+              className: e(t["controls-button__tooltip"], t[`controls-button__tooltip--${a}`]),
+              children: r
+            }
+          )
         ]
       }
     )
   ] });
 };
 export {
-  $ as ControlsButton
+  y as ControlsButton
 };
 //# sourceMappingURL=ControlsButton.js.map

package/dist/components/ControlsButton/ControlsButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ControlsButton.js","sources":["../../../src/components/ControlsButton/ControlsButton.tsx"],"sourcesContent":["import { useId } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { ChangeEvent, ReactNode } from 'react';\r\nimport type { IconProps } from 'components/Icon';\r\n\r\nimport styles from './ControlsButton.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface ControlsButtonProps {\r\n /** to set type/behaviour of input radio or checkbox /\r\n type?: 'radio' \| 'checkbox';\r\n /* button label /\r\n label: string;\r\n /* button value /\r\n value: string;\r\n /* set if icon is needed in font of label /\r\n iconName?: IconProps['name'];\r\n /* set if prefix is needed above of label /\r\n prefix?: string;\r\n /* set tooltip /\r\n tooltip?: ReactNode;\r\n /* set if used as radiogroup /\r\n name?: string;\r\n /* `true` to set squared button; otherwise, `false`. The default is `false`. Note: hides icon /\r\n forceSquared?: boolean;\r\n /* to set default status /\r\n checked?: boolean;\r\n /* `true` to disable the button; otherwise, `false`. The default is `false`. /\r\n disabled?: boolean;\r\n /* The callback function that is invoked when the radio button changes value. */\r\n onSetValue: (event: ChangeEvent<HTMLInputElement>) => void;\r\n}\r\n\r\nexport const ControlsButton = ({\r\n type = 'checkbox',\r\n label,\r\n value,\r\n iconName,\r\n prefix,\r\n tooltip,\r\n name,\r\n forceSquared = false,\r\n checked,\r\n disabled,\r\n onSetValue,\r\n}: ControlsButtonProps) => {\r\n const idPrefix = useId();\r\n const sanitizedLabel = label.replace(/\\s+/g, '_');\r\n const baseId = `${idPrefix}${sanitizedLabel}`;\r\n const tooltipId = `${baseId}-tooltip`;\r\n\r\n return (\r\n <>\r\n <input\r\n type={type}\r\n id={baseId}\r\n name={name ?? sanitizedLabel}\r\n disabled={disabled}\r\n value={value}\r\n checked={checked}\r\n onChange={onSetValue}\r\n className={styles['controls-input']}\r\n aria-describedby={tooltip ? tooltipId : undefined}\r\n />\r\n <label\r\n htmlFor={baseId}\r\n className={clsx(styles['controls-button'], [\r\n forceSquared && styles['controls-button--squared'],\r\n prefix && styles['controls-button--with-prefix'],\r\n iconName && styles['controls-button--with-icon'],\r\n ])}\r\n >\r\n {iconName && <Icon name={iconName} size={20} />}\r\n <div className={styles['controls-button__wrapper']}>\r\n {prefix && <div className={styles['controls-button__prefix']}>{prefix}</div>}\r\n {label}\r\n </div>\r\n {tooltip && (\r\n <div id={tooltipId} role=\"tooltip\" className={styles['controls-button__tooltip']}>\r\n {tooltip}\r\n </div>\r\n )}\r\n </label>\r\n </>\r\n );\r\n};\r\n"],"names":["ControlsButton","type","label","value","iconName","prefix","tooltip","name","forceSquared","checked","disabled","onSetValue","idPrefix","useId","sanitizedLabel","baseId","tooltipId","jsxs","Fragment","jsx","styles","clsx","Icon"],"mappings":"~~;;;;;;;;;;;;;GAmCaA~~,IAAiB,CAAC;AAAA,EAC7B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAA2B;AACzB,QAAMC,IAAWC,EAAA,GACXC,~~IAAiBZ~~,EAAM,QAAQ,QAAQ,GAAG,~~GAC1Ca~~,IAAS,GAAGH,CAAQ,GAAGE,CAAc,IACrCE,IAAY,GAAGD,CAAM;AAE3B,SACE,gBAAAE,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,~~MAAAlB~~;AAAA,QACA,~~IAAIc~~;AAAA,QACJ,MAAMR,KAAQO;AAAA,QACd,UAAAJ;AAAA,QACA,~~OAAAP~~;AAAA,QACA,~~SAAAM~~;AAAA,QACA,UAAUE;AAAA,QACV,WAAWS,EAAO,gBAAgB;AAAA,QAClC,~~oBAAkBd~~,~~IAAUU~~,IAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAE1C,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASF;AAAA,QACT,WAAWM,EAAKD,EAAO,iBAAiB,GAAG;AAAA,UACzCZ,KAAgBY,EAAO,0BAA0B;AAAA,~~UACjDf~~,~~KAAUe~~,EAAO,8BAA8B;AAAA,UAC/~~ChB~~,~~KAAYgB~~,EAAO,4BAA4B;AAAA,QAAA,CAChD;AAAA,QAEA,UAAA;AAAA,~~UAAAhB~~,KAAY,~~gBAAAe~~,EAACG,GAAA,EAAK,~~MAAMlB~~,GAAU,MAAM,IAAI;AAAA,UAC7C,~~gBAAAa~~,EAAC,OAAA,EAAI,WAAWG,EAAO,0BAA0B,GAC9C,UAAA;AAAA,~~YAAAf~~,uBAAW,OAAA,EAAI,~~WAAWe~~,EAAO,yBAAyB,GAAI,~~UAAAf~~,GAAO;AAAA,YACrEH;AAAA,UAAA,GACH;AAAA,UACCI,KACC,~~gBAAAa~~,~~EAAC~~,~~OAAA~~,~~EAAI~~,IAAIH,~~GAAW~~,MAAK,~~WAAU~~,~~WAAWI~~,EAAO,0BAA0B,~~GAC5E~~,~~UAAAd~~,~~EAAA~~,~~CACH~~;AAAA,~~QAAA~~;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;"}
1	+ {"version":3,"file":"ControlsButton.js","sources":["../../../src/components/ControlsButton/ControlsButton.tsx"],"sourcesContent":["import { useId } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { ChangeEvent, ReactNode } from 'react';\r\nimport type { IconProps } from 'components/Icon';\r\n\r\nimport styles from './ControlsButton.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface ControlsButtonProps {\r\n /** to set type/behaviour of input radio or checkbox /\r\n type?: 'radio' \| 'checkbox';\r\n /* button label /\r\n label: string;\r\n /* button value /\r\n value: string;\r\n /* set if icon is needed in font of label /\r\n iconName?: IconProps['name'];\r\n /* set if prefix is needed above of label /\r\n prefix?: string;\r\n /* set tooltip /\r\n tooltip?: ReactNode;\r\n /* set horizontal position of the tooltip /\r\n tooltipPosition?: 'left' \| 'center' \| 'right';\r\n /* set if used as radiogroup /\r\n name?: string;\r\n /* `true` to set squared button; otherwise, `false`. The default is `false`. Note: hides icon /\r\n forceSquared?: boolean;\r\n /* to set default status /\r\n checked?: boolean;\r\n /* `true` to disable the button; otherwise, `false`. The default is `false`. /\r\n disabled?: boolean;\r\n /* The callback function that is invoked when the radio button changes value. */\r\n onSetValue: (event: ChangeEvent<HTMLInputElement>) => void;\r\n}\r\n\r\nexport const ControlsButton = ({\r\n type = 'checkbox',\r\n label,\r\n value,\r\n iconName,\r\n prefix,\r\n tooltip,\r\n tooltipPosition = 'center',\r\n name,\r\n forceSquared = false,\r\n checked,\r\n disabled,\r\n onSetValue,\r\n}: ControlsButtonProps) => {\r\n const idPrefix = useId();\r\n const sanitizedLabel = label.replace(/\\s+/g, '_');\r\n const baseId = `${idPrefix}${sanitizedLabel}`;\r\n const tooltipId = `${baseId}-tooltip`;\r\n\r\n return (\r\n <>\r\n <input\r\n type={type}\r\n id={baseId}\r\n name={name ?? sanitizedLabel}\r\n disabled={disabled}\r\n value={value}\r\n checked={checked}\r\n onChange={onSetValue}\r\n className={styles['controls-input']}\r\n aria-describedby={tooltip ? tooltipId : undefined}\r\n />\r\n <label\r\n htmlFor={baseId}\r\n className={clsx(styles['controls-button'], [\r\n forceSquared && styles['controls-button--squared'],\r\n prefix && styles['controls-button--with-prefix'],\r\n iconName && styles['controls-button--with-icon'],\r\n ])}\r\n >\r\n {iconName && <Icon name={iconName} size={20} />}\r\n <div className={styles['controls-button__wrapper']}>\r\n {prefix && <div className={styles['controls-button__prefix']}>{prefix}</div>}\r\n {label}\r\n </div>\r\n {tooltip && (\r\n <div\r\n id={tooltipId}\r\n role=\"tooltip\"\r\n className={clsx(styles['controls-button__tooltip'], styles[`controls-button__tooltip--${tooltipPosition}`])}\r\n >\r\n {tooltip}\r\n </div>\r\n )}\r\n </label>\r\n </>\r\n );\r\n};\r\n"],"names":["ControlsButton","type","label","value","iconName","prefix","tooltip","tooltipPosition","name","forceSquared","checked","disabled","onSetValue","idPrefix","useId","sanitizedLabel","baseId","tooltipId","jsxs","Fragment","jsx","styles","clsx","Icon"],"mappings":";;;;;;;;;;;;;;;;GAqCaA,IAAiB,CAAC;AAAA,EAC7B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAA2B;AACzB,QAAMC,IAAWC,EAAA,GACXC,IAAiBb,EAAM,QAAQ,QAAQ,GAAG,GAC1Cc,IAAS,GAAGH,CAAQ,GAAGE,CAAc,IACrCE,IAAY,GAAGD,CAAM;AAE3B,SACE,gBAAAE,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAAnB;AAAA,QACA,IAAIe;AAAA,QACJ,MAAMR,KAAQO;AAAA,QACd,UAAAJ;AAAA,QACA,OAAAR;AAAA,QACA,SAAAO;AAAA,QACA,UAAUE;AAAA,QACV,WAAWS,EAAO,gBAAgB;AAAA,QAClC,oBAAkBf,IAAUW,IAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAE1C,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASF;AAAA,QACT,WAAWM,EAAKD,EAAO,iBAAiB,GAAG;AAAA,UACzCZ,KAAgBY,EAAO,0BAA0B;AAAA,UACjDhB,KAAUgB,EAAO,8BAA8B;AAAA,UAC/CjB,KAAYiB,EAAO,4BAA4B;AAAA,QAAA,CAChD;AAAA,QAEA,UAAA;AAAA,UAAAjB,KAAY,gBAAAgB,EAACG,GAAA,EAAK,MAAMnB,GAAU,MAAM,IAAI;AAAA,UAC7C,gBAAAc,EAAC,OAAA,EAAI,WAAWG,EAAO,0BAA0B,GAC9C,UAAA;AAAA,YAAAhB,uBAAW,OAAA,EAAI,WAAWgB,EAAO,yBAAyB,GAAI,UAAAhB,GAAO;AAAA,YACrEH;AAAA,UAAA,GACH;AAAA,UACCI,KACC,gBAAAc;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAIH;AAAA,cACJ,MAAK;AAAA,cACL,WAAWK,EAAKD,EAAO,0BAA0B,GAAGA,EAAO,6BAA6Bd,CAAe,EAAE,CAAC;AAAA,cAEzG,UAAAD;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;"}

package/dist/components/ControlsButton/ControlsButton.stories.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { jsx as l, jsxs as a, Fragment as r } from "react/jsx-runtime";
-import { l as e } from "../../index-BYGu3RV5.js";
+import { jsx as n, jsxs as a, Fragment as r } from "react/jsx-runtime";
+import { l as o } from "../../index-BYGu3RV5.js";
 import { ControlsButton as t } from "./ControlsButton.js";
 import { Icons as c } from "../Icon/icons/index.js";
-const s = Object.keys(c), i = "<ControlsButton type={radio or checkbox} label={} value={} prefix={} tooltip={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", S = {
+const i = Object.keys(c), s = "<ControlsButton type={radio or checkbox} label={} value={} prefix={} tooltip={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", S = {
   title: "Atoms/ControlsButton",
   component: t,
   argTypes: {
@@ -14,7 +14,7 @@ const s = Object.keys(c), i = "<ControlsButton type={radio or checkbox} label={}
     },
     iconName: {
       control: { type: "select" },
-      options: s
+      options: i
     },
     forceSquared: {
       control: "boolean"
@@ -33,33 +33,33 @@ const s = Object.keys(c), i = "<ControlsButton type={radio or checkbox} label={}
   },
   parameters: {
     inspectComponent: t,
-    codeString: i
+    codeString: s
   }
-}, o = (n) => /* @__PURE__ */ l(t, { ...n }), p = o.bind({});
+}, e = (l) => /* @__PURE__ */ n(t, { ...l }), p = e.bind({});
 p.args = {
   type: "checkbox",
   label: "1.2",
   value: "1.2",
   forceSquared: !0,
-  onSetValue: e()
+  onSetValue: o()
 };
-const b = o.bind({});
+const b = e.bind({});
 b.args = {
   type: "checkbox",
   label: "1.3",
   value: "1.3",
   prefix: "13",
-  onSetValue: e()
+  onSetValue: o()
 };
-const u = o.bind({});
+const u = e.bind({});
 u.args = {
   type: "checkbox",
   label: "2.1",
   value: "2.1",
   iconName: "AcademicCap",
-  onSetValue: e()
+  onSetValue: o()
 };
-const d = o.bind({});
+const d = e.bind({});
 d.args = {
   type: "checkbox",
   label: "5",
@@ -67,10 +67,11 @@ d.args = {
   prefix: "40",
   tooltip: /* @__PURE__ */ a(r, { children: [
     "15 dec - 19 dec",
-    /* @__PURE__ */ l("br", {}),
+    /* @__PURE__ */ n("br", {}),
     "2025"
   ] }),
-  onSetValue: e()
+  tooltipPosition: "center",
+  onSetValue: o()
 };
 export {
   p as ControlsButtonExample,

package/dist/components/ControlsButton/ControlsButton.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ControlsButton.stories.js","sources":["../../../src/components/ControlsButton/ControlsButton.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { ControlsButtonProps } from './ControlsButton';\r\n\r\nimport { ControlsButton } from './ControlsButton';\r\n\r\nimport { Icons } from 'components/Icon/icons';\r\n\r\nconst iconNames = Object.keys(Icons) as (keyof typeof Icons)[];\r\n\r\nconst codeString =\r\n '<ControlsButton type={radio or checkbox} label={} value={} prefix={} tooltip={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Atoms/ControlsButton',\r\n component: ControlsButton,\r\n argTypes: {\r\n label: {\r\n control: 'text',\r\n },\r\n value: {\r\n control: 'string',\r\n },\r\n iconName: {\r\n control: { type: 'select' },\r\n options: iconNames,\r\n },\r\n forceSquared: {\r\n control: 'boolean',\r\n },\r\n isChecked: {\r\n control: 'boolean',\r\n },\r\n disabled: {\r\n control: 'boolean',\r\n },\r\n onSetValue: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n },\r\n parameters: {\r\n inspectComponent: ControlsButton,\r\n codeString: codeString,\r\n },\r\n} as Meta<ControlsButtonProps>;\r\n\r\nconst Template: StoryFn<ControlsButtonProps> = (args) => <ControlsButton {...args} />;\r\n\r\nexport const ControlsButtonExample = Template.bind({});\r\nControlsButtonExample.args = {\r\n type: 'checkbox',\r\n label: '1.2',\r\n value: '1.2',\r\n forceSquared: true,\r\n onSetValue: fn(),\r\n};\r\n\r\nexport const WithPrefix = Template.bind({});\r\nWithPrefix.args = {\r\n type: 'checkbox',\r\n label: '1.3',\r\n value: '1.3',\r\n prefix: '13',\r\n onSetValue: fn(),\r\n};\r\n\r\nexport const WithIcon = Template.bind({});\r\nWithIcon.args = {\r\n type: 'checkbox',\r\n label: '2.1',\r\n value: '2.1',\r\n iconName: 'AcademicCap',\r\n onSetValue: fn(),\r\n};\r\n\r\nexport const WithTooltip = Template.bind({});\r\nWithTooltip.args = {\r\n type: 'checkbox',\r\n label: '5',\r\n value: '5',\r\n prefix: '40',\r\n tooltip: (\r\n <>\r\n 15 dec - 19 dec\r\n <br />\r\n 2025\r\n </>\r\n ),\r\n onSetValue: fn(),\r\n};\r\n"],"names":["iconNames","Icons","codeString","ControlsButton_stories","ControlsButton","Template","args","jsx","ControlsButtonExample","fn","WithPrefix","WithIcon","WithTooltip","jsxs","Fragment"],"mappings":";;;;AASA,MAAMA,IAAY,OAAO,KAAKC,CAAK,GAE7BC,IACJ,0KAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS,EAAE,MAAM,SAAA;AAAA,MACjB,SAASJ;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,IAEX,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBI;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAgB,GAAGE,GAAM,GAEtEE,IAAwBH,EAAS,KAAK,CAAA,CAAE;AACrDG,EAAsB,OAAO;AAAA,EAC3B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,cAAc;AAAA,EACd,YAAYC,EAAA;AACd;AAEO,MAAMC,IAAaL,EAAS,KAAK,CAAA,CAAE;AAC1CK,EAAW,OAAO;AAAA,EAChB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,YAAYD,EAAA;AACd;AAEO,MAAME,IAAWN,EAAS,KAAK,CAAA,CAAE;AACxCM,EAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAYF,EAAA;AACd;AAEO,MAAMG,IAAcP,EAAS,KAAK,CAAA,CAAE;AAC3CO,EAAY,OAAO;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SACE,gBAAAC,EAAAC,GAAA,EAAE,UAAA;AAAA,IAAA;AAAA,sBAEC,MAAA,EAAG;AAAA,IAAE;AAAA,EAAA,GAER;AAAA,EAEF,YAAYL,EAAA;AACd;"}
1	+ {"version":3,"file":"ControlsButton.stories.js","sources":["../../../src/components/ControlsButton/ControlsButton.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { ControlsButtonProps } from './ControlsButton';\r\n\r\nimport { ControlsButton } from './ControlsButton';\r\n\r\nimport { Icons } from 'components/Icon/icons';\r\n\r\nconst iconNames = Object.keys(Icons) as (keyof typeof Icons)[];\r\n\r\nconst codeString =\r\n '<ControlsButton type={radio or checkbox} label={} value={} prefix={} tooltip={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Atoms/ControlsButton',\r\n component: ControlsButton,\r\n argTypes: {\r\n label: {\r\n control: 'text',\r\n },\r\n value: {\r\n control: 'string',\r\n },\r\n iconName: {\r\n control: { type: 'select' },\r\n options: iconNames,\r\n },\r\n forceSquared: {\r\n control: 'boolean',\r\n },\r\n isChecked: {\r\n control: 'boolean',\r\n },\r\n disabled: {\r\n control: 'boolean',\r\n },\r\n onSetValue: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n },\r\n parameters: {\r\n inspectComponent: ControlsButton,\r\n codeString: codeString,\r\n },\r\n} as Meta<ControlsButtonProps>;\r\n\r\nconst Template: StoryFn<ControlsButtonProps> = (args) => <ControlsButton {...args} />;\r\n\r\nexport const ControlsButtonExample = Template.bind({});\r\nControlsButtonExample.args = {\r\n type: 'checkbox',\r\n label: '1.2',\r\n value: '1.2',\r\n forceSquared: true,\r\n onSetValue: fn(),\r\n};\r\n\r\nexport const WithPrefix = Template.bind({});\r\nWithPrefix.args = {\r\n type: 'checkbox',\r\n label: '1.3',\r\n value: '1.3',\r\n prefix: '13',\r\n onSetValue: fn(),\r\n};\r\n\r\nexport const WithIcon = Template.bind({});\r\nWithIcon.args = {\r\n type: 'checkbox',\r\n label: '2.1',\r\n value: '2.1',\r\n iconName: 'AcademicCap',\r\n onSetValue: fn(),\r\n};\r\n\r\nexport const WithTooltip = Template.bind({});\r\nWithTooltip.args = {\r\n type: 'checkbox',\r\n label: '5',\r\n value: '5',\r\n prefix: '40',\r\n tooltip: (\r\n <>\r\n 15 dec - 19 dec\r\n <br />\r\n 2025\r\n </>\r\n ),\r\n tooltipPosition: 'center',\r\n onSetValue: fn(),\r\n};\r\n"],"names":["iconNames","Icons","codeString","ControlsButton_stories","ControlsButton","Template","args","jsx","ControlsButtonExample","fn","WithPrefix","WithIcon","WithTooltip","jsxs","Fragment"],"mappings":";;;;AASA,MAAMA,IAAY,OAAO,KAAKC,CAAK,GAE7BC,IACJ,0KAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS,EAAE,MAAM,SAAA;AAAA,MACjB,SAASJ;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,IAEX,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBI;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAS,gBAAAC,EAACH,GAAA,EAAgB,GAAGE,GAAM,GAEtEE,IAAwBH,EAAS,KAAK,CAAA,CAAE;AACrDG,EAAsB,OAAO;AAAA,EAC3B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,cAAc;AAAA,EACd,YAAYC,EAAA;AACd;AAEO,MAAMC,IAAaL,EAAS,KAAK,CAAA,CAAE;AAC1CK,EAAW,OAAO;AAAA,EAChB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,YAAYD,EAAA;AACd;AAEO,MAAME,IAAWN,EAAS,KAAK,CAAA,CAAE;AACxCM,EAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAYF,EAAA;AACd;AAEO,MAAMG,IAAcP,EAAS,KAAK,CAAA,CAAE;AAC3CO,EAAY,OAAO;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SACE,gBAAAC,EAAAC,GAAA,EAAE,UAAA;AAAA,IAAA;AAAA,sBAEC,MAAA,EAAG;AAAA,IAAE;AAAA,EAAA,GAER;AAAA,EAEF,iBAAiB;AAAA,EACjB,YAAYL,EAAA;AACd;"}

package/dist/components/FormInput/FormInput.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { jsxs as a, jsx as t, Fragment as b } from "react/jsx-runtime";
 import { c as v } from "../../clsx-OuTLNxxd.js";
+import "../Accordion/Accordion.js";
 import "react";
 import "../Buttons/Button.js";
 import "../Buttons/LinkButton.js";
@@ -16,7 +17,7 @@ import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
 import "react-router";
-import "../../TablePlugin-C38z2r5y.js";
+import "../../TablePlugin-DNGtPPjq.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
@@ -32,7 +33,7 @@ import '../../assets/FormInput.css';const o = {
   "form-input__input-feedback-container": "_form-input__input-feedback-container_c0vpz_25",
   "form-input__input-container": "_form-input__input-container_c0vpz_35",
   "form-input__input": "_form-input__input_c0vpz_25"
-}, U = ({
+}, W = ({
   id: i,
   label: n,
   labelPosition: f = "top",
@@ -64,6 +65,6 @@ import '../../assets/FormInput.css';const o = {
   return u ? c : /* @__PURE__ */ t("div", { className: v(o["form-input__container"], o[`form-input__container--label-${f}`]), children: c });
 };
 export {
-  U as FormInput
+  W as FormInput
 };
 //# sourceMappingURL=FormInput.js.map

package/dist/components/FormInput/FormInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n /** The id of the input element. /\n id: string;\n /* label text if empthy the label is not renderd /\n label: string;\n /* label position `top` or `left`. The default is `top`. /\n labelPosition?: 'top' \| 'left';\n /* The type of the input element. /\n type?: 'text' \| 'password' \| 'email' \| 'number';\n /* Shows red * /\n required?: boolean;\n /* error text to display if set /\n notValidatedText?: string;\n /* Returns array of selected values as number /\n onChange?: (value: string) => void;\n /* Determines if the container wrapper is rendered. /\n noContainer?: boolean;\n /* Optional custom input that will replace the default input */\n customInput?: ReactNode;\n}\n\nexport const FormInput = ({\n id,\n label,\n labelPosition = 'top',\n type = 'text',\n required = false,\n notValidatedText = '',\n onChange,\n noContainer = false,\n customInput,\n}: FormInputProps) => {\n const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (typeof onChange === 'function') {\n onChange(event.target.value);\n }\n };\n\n const componentContent = (\n <>\n {label && (\n <Label htmlFor={id} required={required} alignRight>\n {label}\n </Label>\n )}\n\n <div className={styles['form-input__input-feedback-container']}>\n {customInput ? (\n customInput\n ) : (\n <div className={styles['form-input__input-container']}>\n <input\n id={id}\n type={type}\n {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n onChange={handleChange}\n className={styles['form-input__input']}\n />\n </div>\n )}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </>\n );\n\n return noContainer ? (\n componentContent\n ) : (\n <div className={clsx(styles['form-input__container'], styles[`form-input__container--label-${labelPosition}`])}>\n {componentContent}\n </div>\n );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","noContainer","customInput","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","FeedbackBox","clsx"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~GA6BaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC;AACF,MAAsB;AACpB,QAAMC,IAAmB,CAACC,MACxB,CAAC,KAAK,KAAK,KAAK,GAAG,EAAE,SAASA,EAAM,GAAG,KAAKA,EAAM,eAAA,GAE9CC,IAAe,CAACD,MAA+C;AACnE,IAAI,OAAOJ,KAAa,cACtBA,EAASI,EAAM,OAAO,KAAK;AAAA,EAC7B,GAGIE,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAb,uBACEc,GAAA,EAAM,SAASf,GAAI,UAAAI,GAAoB,YAAU,IAC/C,UAAAH,EAAA,CACH;AAAA,IAGF,gBAAAY,EAAC,OAAA,EAAI,WAAWG,EAAO,sCAAsC,GAC1D,UAAA;AAAA,MAAAR,KAGC,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAjB;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWM,EAAA;AAAA,UACvC,UAAUE;AAAA,UACV,WAAWK,EAAO,mBAAmB;AAAA,QAAA;AAAA,MAAA,GAEzC;AAAA,MAEDX,MAAqB,MAAM,gBAAAY,EAACC,KAAY,OAAM,SAAQ,UAAUb,EAAA,CAAkB;AAAA,IAAA,EAAA,CACrF;AAAA,EAAA,GACF;AAGF,SAAOE,IACLK,IAEA,gBAAAK,EAAC,OAAA,EAAI,WAAWE,EAAKH,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCd,CAAa,EAAE,CAAC,GAC1G,UAAAU,GACH;AAEJ;"}
1	+ {"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n /** The id of the input element. /\n id: string;\n /* label text if empthy the label is not renderd /\n label: string;\n /* label position `top` or `left`. The default is `top`. /\n labelPosition?: 'top' \| 'left';\n /* The type of the input element. /\n type?: 'text' \| 'password' \| 'email' \| 'number';\n /* Shows red * /\n required?: boolean;\n /* error text to display if set /\n notValidatedText?: string;\n /* Returns array of selected values as number /\n onChange?: (value: string) => void;\n /* Determines if the container wrapper is rendered. /\n noContainer?: boolean;\n /* Optional custom input that will replace the default input */\n customInput?: ReactNode;\n}\n\nexport const FormInput = ({\n id,\n label,\n labelPosition = 'top',\n type = 'text',\n required = false,\n notValidatedText = '',\n onChange,\n noContainer = false,\n customInput,\n}: FormInputProps) => {\n const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (typeof onChange === 'function') {\n onChange(event.target.value);\n }\n };\n\n const componentContent = (\n <>\n {label && (\n <Label htmlFor={id} required={required} alignRight>\n {label}\n </Label>\n )}\n\n <div className={styles['form-input__input-feedback-container']}>\n {customInput ? (\n customInput\n ) : (\n <div className={styles['form-input__input-container']}>\n <input\n id={id}\n type={type}\n {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n onChange={handleChange}\n className={styles['form-input__input']}\n />\n </div>\n )}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </>\n );\n\n return noContainer ? (\n componentContent\n ) : (\n <div className={clsx(styles['form-input__container'], styles[`form-input__container--label-${labelPosition}`])}>\n {componentContent}\n </div>\n );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","noContainer","customInput","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","FeedbackBox","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC;AACF,MAAsB;AACpB,QAAMC,IAAmB,CAACC,MACxB,CAAC,KAAK,KAAK,KAAK,GAAG,EAAE,SAASA,EAAM,GAAG,KAAKA,EAAM,eAAA,GAE9CC,IAAe,CAACD,MAA+C;AACnE,IAAI,OAAOJ,KAAa,cACtBA,EAASI,EAAM,OAAO,KAAK;AAAA,EAC7B,GAGIE,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAb,uBACEc,GAAA,EAAM,SAASf,GAAI,UAAAI,GAAoB,YAAU,IAC/C,UAAAH,EAAA,CACH;AAAA,IAGF,gBAAAY,EAAC,OAAA,EAAI,WAAWG,EAAO,sCAAsC,GAC1D,UAAA;AAAA,MAAAR,KAGC,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAjB;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWM,EAAA;AAAA,UACvC,UAAUE;AAAA,UACV,WAAWK,EAAO,mBAAmB;AAAA,QAAA;AAAA,MAAA,GAEzC;AAAA,MAEDX,MAAqB,MAAM,gBAAAY,EAACC,KAAY,OAAM,SAAQ,UAAUb,EAAA,CAAkB;AAAA,IAAA,EAAA,CACrF;AAAA,EAAA,GACF;AAGF,SAAOE,IACLK,IAEA,gBAAAK,EAAC,OAAA,EAAI,WAAWE,EAAKH,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCd,CAAa,EAAE,CAAC,GAC1G,UAAAU,GACH;AAEJ;"}

package/dist/components/InputField/InputField.stories.js CHANGED Viewed

@@ -1,8 +1,9 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { useState as d, useRef as g } from "react";
 import { l } from "../../index-BYGu3RV5.js";
-import { InputField as o } from "./InputField.js";
+import { InputField as e } from "./InputField.js";
 import { Container as u } from "../../storyComponents/Container/Container.js";
+import "../Accordion/Accordion.js";
 import { Icon as h } from "../Icon/Icon.js";
 import "../Buttons/Button.js";
 import "../Buttons/LinkButton.js";
@@ -16,7 +17,7 @@ import "../GridRow/GridRow.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "react-router";
-import "../../TablePlugin-C38z2r5y.js";
+import "../../TablePlugin-DNGtPPjq.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
@@ -32,9 +33,9 @@ const C = `
 `, f = (t) => {
   const r = t.variant ?? [];
   return { ...t, variant: r.toString() };
-}, Q = {
+}, U = {
   title: "Atoms/InputField",
-  component: o,
+  component: e,
   argTypes: {
     variant: {
       options: ["large"],
@@ -62,17 +63,17 @@ const C = `
     }
   },
   parameters: {
-    inspectComponent: o,
+    inspectComponent: e,
     codeString: C
   }
-}, a = (t) => {
+}, i = (t) => {
   const [r, n] = d(""), p = g(null), m = (c) => {
     n(c.target.value), l()("handleChange");
   }, s = () => {
     n(""), l()("handleClear");
   };
-  return /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
-    o,
+  return /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(
+    e,
     {
       ...f(t),
       value: r,
@@ -81,28 +82,28 @@ const C = `
       ref: p
     }
   ) });
-}, i = {
+}, a = {
   type: "text",
   variant: void 0,
   id: "4f9ca77d"
-}, b = a.bind({});
+}, b = i.bind({});
 b.args = {
-  ...i
+  ...a
 };
-const v = a.bind({});
+const v = i.bind({});
 v.args = {
-  ...i,
+  ...a,
   clearTrigger: "Clear"
 };
-const y = a.bind({});
+const y = i.bind({});
 y.args = {
-  ...i,
-  clearTrigger: /* @__PURE__ */ e(h, { name: "Cross" })
+  ...a,
+  clearTrigger: /* @__PURE__ */ o(h, { name: "Cross" })
 };
 export {
   b as InputFieldExample,
   y as WithIconClearTrigger,
   v as WithStringClearTrigger,
-  Q as default
+  U as default
 };
 //# sourceMappingURL=InputField.stories.js.map

package/dist/components/InputField/InputField.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from 'storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n const variantArray = (args.variant as unknown as string[]) ?? [];\n return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/InputField',\n component: InputField,\n argTypes: {\n variant: {\n options: ['large'],\n control: 'check',\n },\n width: {\n control: 'radio',\n options: [undefined, 'small', 'compact'],\n },\n type: {\n control: 'radio',\n options: ['text', 'password', 'email'],\n },\n background: {\n control: 'check',\n options: ['white'],\n },\n id: {\n control: 'text',\n },\n autoComplete: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: InputField,\n codeString: codeString,\n },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setInputValue(event.target.value);\n fn()('handleChange');\n };\n\n const handleClear = () => {\n setInputValue('');\n fn()('handleClear');\n };\n\n return (\n <Container>\n <InputField\n {...transformArgs(args)}\n value={inputValue}\n onChange={handleChange}\n onClear={handleClear}\n ref={inputRef}\n />\n </Container>\n );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n type: 'text',\n variant: undefined,\n id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAYA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAgB,CAACC,MAA0B;AAE/C,QAAMC,IAAgBD,EAAK,WAAmC,CAAA;AAC9D,SAAO,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAA,EAAW;AAC1D,GAGAC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS,CAAC,QAAW,SAAS,SAAS;AAAA,IAAA;AAAA,IAEzC,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IAAA;AAAA,IAEvC,YAAY;AAAA,MACV,SAAS;AAAA,MACT,SAAS,CAAC,OAAO;AAAA,IAAA;AAAA,IAEnB,IAAI;AAAA,MACF,SAAS;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAL;AAAA,EAAA;AAEJ,GAEMM,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC7D,IAAAL,EAAcK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EAAA,GAGfC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EAAA;AAGpB,2BACGE,GAAA,EACC,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAAA,GAET;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,CAAA,CAAE;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,CAAA,CAAE;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,CAAA,CAAE;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAA,EAAK,MAAK,QAAA,CAAQ;AACnC;"}
1	+ {"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from 'storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n const variantArray = (args.variant as unknown as string[]) ?? [];\n return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/InputField',\n component: InputField,\n argTypes: {\n variant: {\n options: ['large'],\n control: 'check',\n },\n width: {\n control: 'radio',\n options: [undefined, 'small', 'compact'],\n },\n type: {\n control: 'radio',\n options: ['text', 'password', 'email'],\n },\n background: {\n control: 'check',\n options: ['white'],\n },\n id: {\n control: 'text',\n },\n autoComplete: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: InputField,\n codeString: codeString,\n },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setInputValue(event.target.value);\n fn()('handleChange');\n };\n\n const handleClear = () => {\n setInputValue('');\n fn()('handleClear');\n };\n\n return (\n <Container>\n <InputField\n {...transformArgs(args)}\n value={inputValue}\n onChange={handleChange}\n onClear={handleClear}\n ref={inputRef}\n />\n </Container>\n );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n type: 'text',\n variant: undefined,\n id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAgB,CAACC,MAA0B;AAE/C,QAAMC,IAAgBD,EAAK,WAAmC,CAAA;AAC9D,SAAO,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAA,EAAW;AAC1D,GAGAC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS,CAAC,QAAW,SAAS,SAAS;AAAA,IAAA;AAAA,IAEzC,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IAAA;AAAA,IAEvC,YAAY;AAAA,MACV,SAAS;AAAA,MACT,SAAS,CAAC,OAAO;AAAA,IAAA;AAAA,IAEnB,IAAI;AAAA,MACF,SAAS;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAL;AAAA,EAAA;AAEJ,GAEMM,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC7D,IAAAL,EAAcK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EAAA,GAGfC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EAAA;AAGpB,2BACGE,GAAA,EACC,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAAA,GAET;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,CAAA,CAAE;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,CAAA,CAAE;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,CAAA,CAAE;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAA,EAAK,MAAK,QAAA,CAAQ;AACnC;"}

package/dist/components/MultiSelect/MultiSelect.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "../../clsx-OuTLNxxd.js";
 import "../../MultiSelectItem-DbOdEllV.js";
-import { M as p } from "../../TablePlugin-C38z2r5y.js";
+import { M as p } from "../../TablePlugin-DNGtPPjq.js";
 export {
   p as MultiSelect
 };