npm - @uva-glass/component-library - Versions diffs - 1.48.1 → 1.50.0 - Mend

@uva-glass/component-library 1.48.1 → 1.50.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 (180) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuLink.stories.js","sources":["../../../src/components/MenuLink/MenuLink.stories.tsx"],"sourcesContent":["import { MemoryRouter, type NavLinkProps } from 'react-router-dom';\n\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { MenuLink } from './MenuLink';\n\nimport './MenuLink.stories.css';\n\nconst codeString = `\n// Can only be used wrapped in a 'react-router-dom' <MemoryRouter />\n <MenuLink to={linkUrl}>{children}</MenuLink>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/MenuLink',\n component: MenuLink,\n parameters: {\n codeString: codeString,\n },\n} as Meta<Omit<NavLinkProps, 'style'>>;\n\nconst menuLinks = [\n { to: '/menu-link-1', title: 'Menu Link One' },\n { to: '/menu-link-2', title: 'Menu Link Two' },\n { to: '/menu-link-3', title: 'Menu Link Three' },\n];\n\nconst Template: StoryFn<Omit<NavLinkProps, 'style'>> = () => {\n return (\n <MemoryRouter initialEntries={menuLinks.map((link) => link.to)} initialIndex={0}>\n <nav className=\"navbar\">\n {menuLinks.map((link) => (\n <MenuLink key={link.to} to={link.to}>\n {link.title}\n </MenuLink>\n ))}\n </nav>\n </MemoryRouter>\n );\n};\n\nexport const MenuLinkExample = Template.bind({});\n"],"names":["codeString","MenuLink_stories","MenuLink","menuLinks","Template","jsx","MemoryRouter","link","MenuLinkExample"],"mappings":";;;AAQA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAY;AAAA,EAChB,EAAE,IAAI,gBAAgB,OAAO,gBAAgB;AAAA,EAC7C,EAAE,IAAI,gBAAgB,OAAO,gBAAgB;AAAA,EAC7C,EAAE,IAAI,gBAAgB,OAAO,kBAAkB;AACjD,GAEMC,IAAiD,MAElD,gBAAAC,EAAAC,GAAA,EAAa,gBAAgBH,EAAU,IAAI,CAACI,MAASA,EAAK,EAAE,GAAG,cAAc,GAC5E,4BAAC,OAAI,EAAA,WAAU,UACZ,UAAAJ,EAAU,IAAI,CAACI,MACd,gBAAAF,EAACH,KAAuB,IAAIK,EAAK,IAC9B,UAAAA,EAAK,SADOA,EAAK,EAEpB,CACD,GACH,EACF,CAAA,GAISC,IAAkBJ,EAAS,KAAK,CAAE,CAAA;"}
1	+ {"version":3,"file":"MenuLink.stories.js","sources":["../../../src/components/MenuLink/MenuLink.stories.tsx"],"sourcesContent":["import { MemoryRouter, type NavLinkProps } from 'react-router-dom';\n\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { MenuLink } from './MenuLink';\n\nimport './MenuLink.stories.css';\n\nconst codeString = `\n// Can only be used wrapped in a 'react-router-dom' <MemoryRouter />\n <MenuLink to={linkUrl}>{children}</MenuLink>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/MenuLink',\n component: MenuLink,\n parameters: {\n inspectComponent: MenuLink,\n codeString: codeString,\n },\n} as Meta<Omit<NavLinkProps, 'style'>>;\n\nconst menuLinks = [\n { to: '/menu-link-1', title: 'Menu Link One' },\n { to: '/menu-link-2', title: 'Menu Link Two' },\n { to: '/menu-link-3', title: 'Menu Link Three' },\n];\n\nconst Template: StoryFn<Omit<NavLinkProps, 'style'>> = () => {\n return (\n <MemoryRouter initialEntries={menuLinks.map((link) => link.to)} initialIndex={0}>\n <nav className=\"navbar\">\n {menuLinks.map((link) => (\n <MenuLink key={link.to} to={link.to}>\n {link.title}\n </MenuLink>\n ))}\n </nav>\n </MemoryRouter>\n );\n};\n\nexport const MenuLinkExample = Template.bind({});\n"],"names":["codeString","MenuLink_stories","MenuLink","menuLinks","Template","jsx","MemoryRouter","link","MenuLinkExample"],"mappings":";;;AAQA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAY;AAAA,EAChB,EAAE,IAAI,gBAAgB,OAAO,gBAAgB;AAAA,EAC7C,EAAE,IAAI,gBAAgB,OAAO,gBAAgB;AAAA,EAC7C,EAAE,IAAI,gBAAgB,OAAO,kBAAkB;AACjD,GAEMC,IAAiD,MAElD,gBAAAC,EAAAC,GAAA,EAAa,gBAAgBH,EAAU,IAAI,CAACI,MAASA,EAAK,EAAE,GAAG,cAAc,GAC5E,4BAAC,OAAI,EAAA,WAAU,UACZ,UAAAJ,EAAU,IAAI,CAACI,MACd,gBAAAF,EAACH,KAAuB,IAAIK,EAAK,IAC9B,UAAAA,EAAK,SADOA,EAAK,EAEpB,CACD,GACH,EACF,CAAA,GAISC,IAAkBJ,EAAS,KAAK,CAAE,CAAA;"}

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

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 export interface MetaDataListProps {
+    /** A list of key value pairs to display. The value is be a [ReactNode](https://reactnative.dev/docs/react-node). */
     items: Record<string, ReactNode>;
 }
+/** Represents a component of a list of key value pairs. */
 export declare const MetaDataList: ({ items }: MetaDataListProps) => import("react/jsx-runtime").JSX.Element;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MetaDataList.js","sources":["../../../src/components/MetaDataList/MetaDataList.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport styles from './MetaDataList.module.css';\n\nexport interface MetaDataListProps {\n items: Record<string, ReactNode>;\n}\n\nexport const MetaDataList = ({ items }: MetaDataListProps) => (\n <dl className={styles['meta-data-list']}>\n {Object.entries(items).map(([term, description]) => (\n <div key={term} className={styles['meta-data-list__item']}>\n <dt className={styles['meta-data-list__term']}>{term}</dt>\n <dd className={styles['meta-data-list__description']}>{description}</dd>\n </div>\n ))}\n </dl>\n);\n"],"names":["MetaDataList","items","jsx","styles","term","description","jsxs"],"mappings":";;;;;;~~GAQaA~~,IAAe,CAAC,EAAE,OAAAC,EAAM,MAClC,gBAAAC,EAAA,MAAA,EAAG,WAAWC,EAAO,gBAAgB,GACnC,UAAO,OAAA,QAAQF,CAAK,EAAE,IAAI,CAAC,CAACG,GAAMC,CAAW,MAC5C,gBAAAC,EAAC,OAAe,EAAA,WAAWH,EAAO,sBAAsB,GACtD,UAAA;AAAA,EAAA,gBAAAD,EAAC,MAAG,EAAA,WAAWC,EAAO,sBAAsB,GAAI,UAAKC,GAAA;AAAA,oBACpD,MAAG,EAAA,WAAWD,EAAO,6BAA6B,GAAI,UAAYE,GAAA;AAAA,EAF3D,GAAAD,CAGV,CACD,EACH,CAAA;"}
1	+ {"version":3,"file":"MetaDataList.js","sources":["../../../src/components/MetaDataList/MetaDataList.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport styles from './MetaDataList.module.css';\n\nexport interface MetaDataListProps {\n /** A list of key value pairs to display. The value is be a [ReactNode](https://reactnative.dev/docs/react-node). /\n items: Record<string, ReactNode>;\n}\n\n/* Represents a component of a list of key value pairs. */\nexport const MetaDataList = ({ items }: MetaDataListProps) => (\n <dl className={styles['meta-data-list']}>\n {Object.entries(items).map(([term, description]) => (\n <div key={term} className={styles['meta-data-list__item']}>\n <dt className={styles['meta-data-list__term']}>{term}</dt>\n <dd className={styles['meta-data-list__description']}>{description}</dd>\n </div>\n ))}\n </dl>\n);\n"],"names":["MetaDataList","items","jsx","styles","term","description","jsxs"],"mappings":";;;;;;GAUaA,IAAe,CAAC,EAAE,OAAAC,EAAM,MAClC,gBAAAC,EAAA,MAAA,EAAG,WAAWC,EAAO,gBAAgB,GACnC,UAAO,OAAA,QAAQF,CAAK,EAAE,IAAI,CAAC,CAACG,GAAMC,CAAW,MAC5C,gBAAAC,EAAC,OAAe,EAAA,WAAWH,EAAO,sBAAsB,GACtD,UAAA;AAAA,EAAA,gBAAAD,EAAC,MAAG,EAAA,WAAWC,EAAO,sBAAsB,GAAI,UAAKC,GAAA;AAAA,oBACpD,MAAG,EAAA,WAAWD,EAAO,6BAA6B,GAAI,UAAYE,GAAA;AAAA,EAF3D,GAAAD,CAGV,CACD,EACH,CAAA;"}

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

@@ -1,13 +1,14 @@
-import { jsx as t } from "react/jsx-runtime";
-import { MetaDataList as e } from "./MetaDataList.js";
+import { jsx as e } from "react/jsx-runtime";
+import { MetaDataList as t } from "./MetaDataList.js";
 import { Container as o } from "../../storyComponents/Container/Container.js";
 const i = "<MetaDataList items={items} />", c = {
   title: "Atoms/MetaDataList",
-  component: e,
+  component: t,
   parameters: {
+    inspectComponent: t,
     codeString: i
   }
-}, s = (a) => /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t(e, { ...a }) }), m = s.bind({});
+}, s = (a) => /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(t, { ...a }) }), m = s.bind({});
 m.args = {
   items: {
     "item one": "foo",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MetaDataList.stories.js","sources":["../../../src/components/MetaDataList/MetaDataList.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { MetaDataListProps } from './MetaDataList';\n\nimport { MetaDataList } from './MetaDataList';\n\nimport { Container } from 'storyComponents/Container/';\n\nconst codeString = '<MetaDataList items={items} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/MetaDataList',\n component: MetaDataList,\n parameters: {\n codeString: codeString,\n },\n} as Meta<MetaDataListProps>;\n\nconst Template: StoryFn<MetaDataListProps> = (args) => (\n <Container>\n <MetaDataList {...args} />\n </Container>\n);\n\nexport const MetaDataListExample = Template.bind({});\nMetaDataListExample.args = {\n items: {\n 'item one': 'foo',\n 'item two': 'bar',\n 'item three': 'baz',\n },\n};\n"],"names":["codeString","MetaDataList_stories","MetaDataList","Template","args","jsx","Container","MetaDataListExample"],"mappings":";;;AAOA,MAAMA,IAAa,kCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAuC,CAACC,MAC5C,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAc,GAAGE,EAAM,CAAA,EAC1B,CAAA,GAGWG,IAAsBJ,EAAS,KAAK,EAAE;AACnDI,EAAoB,OAAO;AAAA,EACzB,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;"}
1	+ {"version":3,"file":"MetaDataList.stories.js","sources":["../../../src/components/MetaDataList/MetaDataList.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { MetaDataListProps } from './MetaDataList';\n\nimport { MetaDataList } from './MetaDataList';\n\nimport { Container } from 'storyComponents/Container/';\n\nconst codeString = '<MetaDataList items={items} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/MetaDataList',\n component: MetaDataList,\n parameters: {\n inspectComponent: MetaDataList,\n codeString: codeString,\n },\n} as Meta<MetaDataListProps>;\n\nconst Template: StoryFn<MetaDataListProps> = (args) => (\n <Container>\n <MetaDataList {...args} />\n </Container>\n);\n\nexport const MetaDataListExample = Template.bind({});\nMetaDataListExample.args = {\n items: {\n 'item one': 'foo',\n 'item two': 'bar',\n 'item three': 'baz',\n },\n};\n"],"names":["codeString","MetaDataList_stories","MetaDataList","Template","args","jsx","Container","MetaDataListExample"],"mappings":";;;AAOA,MAAMA,IAAa,kCAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAuC,CAACC,MAC5C,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAc,GAAGE,EAAM,CAAA,EAC1B,CAAA,GAGWG,IAAsBJ,EAAS,KAAK,EAAE;AACnDI,EAAoB,OAAO;AAAA,EACzB,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AACF;"}

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

@@ -1,23 +1,42 @@
-import { AriaDialogProps } from '@react-types/dialog';
 import { FormHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import { AriaDialogProps } from '@react-types/dialog';
 export interface ModalDialogProps {
+    /** The buttons of the dialog. */
     buttons?: ReactNode;
+    /** `true` if the dialog can be closed by clicking outside of it; otherwise, `false`. The default is `false`. */
     isDismissable?: boolean;
+    /** `true` to disable closing the dialog with the keyboard; otherwise, `false`. The default is `false`. */
     isKeyboardDismissDisabled?: boolean;
+    /** `true` to show a spinner, if the contents of the dialog is lazy loaded; otherwise, `false`. The default is `false`. */
     isLoading?: boolean;
+    /** The `aria-valuetext` value of the [Spinner](/story/atoms-spinner--spinner-example) component. The default is `'Loading'` Used together with `isLoading`. */
     spinnerAriaValueText?: string;
+    /** The `aria-label` value of the [OverlayCloseButton](/story/atoms-overlayclosebutton--overlay-close-button-example) component. The default is `'Close'` */
     closeButtonAriaValueText?: string;
+    /** `true` to render the dialog opened; otherwise, `false`. The default is `false`. */
     isOpen: boolean;
+    /** `true` to disable form validation; otherwise, `false`. The default is `false`. */
     noValidate?: boolean;
+    /** The callback function that is invoked when the dialog is closed. */
     onClose?(): void;
+    /** The callback function that is invoked when the form is submitted. */
     onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];
+    /** The `aria-role` value of the dialog. Possible values are `'dialog'`, `'alertdialog'`. The default is `'dialog'`. */
     role?: AriaDialogProps['role'];
+    /** The title of the dialog. */
     title?: string;
+    /** The contents of the dialog header. */
     headerContent?: ReactNode;
+    /** The variant of the dialog. */
     variant?: 'confirm' | 'dialog';
+    /** `true` to add padding to the dialog; otherwise, `false`. The default is `false`. */
     padded?: boolean;
+    /** `true` to display the dialog in a slimmer form; otherwise, `false`. The default is `false`. */
     slim?: boolean;
+    /** `true` to display the dialog in a wider form; otherwise, `false`. The default is `false`. */
     wide?: boolean;
+    /** `true` to show a border between the main content of the dialog and the buttons; otherwise, `false`. The default is `false`. */
     noButtonBorder?: boolean;
 }
+/** Represents a component for a modal dialog. */
 export declare function ModalDialog(props: PropsWithChildren<ModalDialogProps>): import("react/jsx-runtime").JSX.Element | null;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalDialog.js","sources":["../../../src/components/ModalDialog/ModalDialog.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport classNames from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { AriaDialogProps } from '@react-types/dialog';\nimport type { FormHTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './ModalDialog.module.css';\n\nimport { Backdrop } from 'components/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\n\nexport interface ModalDialogProps {\n buttons?: ReactNode;\n isDismissable?: boolean;\n isKeyboardDismissDisabled?: boolean;\n isLoading?: boolean;\n spinnerAriaValueText?: string;\n closeButtonAriaValueText?: string;\n isOpen: boolean;\n noValidate?: boolean;\n onClose?(): void;\n onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];\n role?: AriaDialogProps['role'];\n title?: string;\n headerContent?: ReactNode;\n variant?: 'confirm' \| 'dialog';\n padded?: boolean;\n slim?: boolean;\n wide?: boolean;\n noButtonBorder?: boolean;\n}\n\nexport function ModalDialog(props: PropsWithChildren<ModalDialogProps>) {\n const {\n buttons,\n children,\n isDismissable = true,\n isKeyboardDismissDisabled = !isDismissable,\n isLoading,\n spinnerAriaValueText = 'Loading',\n closeButtonAriaValueText = 'Close',\n isOpen,\n noValidate = false,\n onClose,\n onSubmit,\n role = 'dialog',\n title,\n headerContent,\n variant = 'dialog',\n padded,\n slim,\n wide,\n noButtonBorder = false,\n } = props;\n\n const ref = useRef<HTMLDivElement>(null);\n const formRef = useRef<HTMLFormElement>(null);\n const [isScrollable, setIsScrollable] = useState(false);\n const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n const { dialogProps, titleProps } = useDialog({ role }, ref);\n const { modalProps } = useModal({ isDisabled: !isOpen });\n const { overlayProps, underlayProps } = useOverlay(\n { isDismissable, isKeyboardDismissDisabled, isOpen, onClose },\n ref\n );\n\n usePreventScroll({ isDisabled: !isOpen });\n\n useEffect(() => {\n const formElement = formRef.current;\n\n function checkScrollable() {\n if (formElement) {\n const scrollHeight = formElement.scrollHeight;\n const clientHeight = formElement.clientHeight;\n const scrollTop = formElement.scrollTop;\n\n setIsScrollable(scrollHeight > clientHeight);\n setIsScrolledToBottom(scrollTop + clientHeight >= scrollHeight);\n }\n }\n\n function handleScrollAndResize() {\n checkScrollable();\n }\n\n if (formElement) {\n formElement.addEventListener('scroll', handleScrollAndResize);\n window.addEventListener('resize', handleScrollAndResize);\n }\n\n const timeoutId = setTimeout(() => {\n checkScrollable();\n }, 0);\n\n return () => {\n if (formElement) {\n formElement.removeEventListener('scroll', handleScrollAndResize);\n }\n window.removeEventListener('resize', handleScrollAndResize);\n clearTimeout(timeoutId);\n };\n }, [isOpen, headerContent]);\n\n function onKeyUp(event: KeyboardEvent) {\n event.stopPropagation();\n }\n\n if (!isOpen) return null;\n\n return (\n <OverlayContainer>\n <Backdrop {...underlayProps}>\n {isLoading ? (\n <Spinner ariaValueText={spinnerAriaValueText} />\n ) : (\n <>\n {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n <FocusScope autoFocus contain restoreFocus>\n <div\n {...dialogProps}\n {...modalProps}\n {...overlayProps}\n className={classNames(styles['modal-dialog'], {\n [styles['modal-dialog--confirm']]: variant === 'confirm',\n [styles['modal-dialog--padded']]: padded,\n [styles['modal-dialog--slim']]: slim,\n [styles['modal-dialog--wide']]: wide,\n })}\n onKeyUp={onKeyUp}\n role=\"presentation\"\n ref={ref}\n >\n {(title \|\| headerContent) && variant === 'dialog' && (\n <>\n {title && (\n <h1 {...titleProps} className={styles['modal-dialog__title']}>\n {title}\n </h1>\n )}\n {headerContent}\n {variant === 'dialog' && (\n <span className={styles['modal-dialog__close']}>\n <OverlayCloseButton\n aria-label={closeButtonAriaValueText}\n onClick={onClose}\n paddedModal={padded}\n />\n </span>\n )}\n </>\n )}\n <form\n className={classNames(styles['modal-dialog__content'], {\n [styles['modal-dialog--content-with-buttons']]: buttons,\n })}\n onSubmit={onSubmit}\n noValidate={noValidate}\n ref={formRef}\n >\n <div className={classNames({ [styles['modal-dialog__children']]: !noButtonBorder })}>{children}</div>\n {buttons && (\n <div\n className={classNames(styles['modal-dialog__buttons'], {\n [styles['modal-dialog__buttons--border']]: !noButtonBorder,\n [styles['modal-dialog__buttons--shadow']]: isScrollable && !isScrolledToBottom,\n })}\n >\n {buttons}\n </div>\n )}\n </form>\n </div>\n </FocusScope>\n </>\n )}\n </Backdrop>\n </OverlayContainer>\n );\n}\n"],"names":["ModalDialog","props","buttons","children","isDismissable","isKeyboardDismissDisabled","isLoading","spinnerAriaValueText","closeButtonAriaValueText","isOpen","noValidate","onClose","onSubmit","role","title","headerContent","variant","padded","slim","wide","noButtonBorder","ref","useRef","formRef","isScrollable","setIsScrollable","useState","isScrolledToBottom","setIsScrolledToBottom","dialogProps","titleProps","useDialog","modalProps","useModal","overlayProps","underlayProps","useOverlay","usePreventScroll","useEffect","formElement","checkScrollable","scrollHeight","clientHeight","scrollTop","handleScrollAndResize","timeoutId","onKeyUp","event","jsx","OverlayContainer","Backdrop","Spinner","Fragment","FocusScope","jsxs","classNames","styles","OverlayCloseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoCO,SAASA,GAAYC,GAA4C;AAChE,QAAA;AAAA,IACJ,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,2BAAAC,IAA4B,CAACD;AAAA,IAC7B,WAAAE;AAAA,IACA,sBAAAC,IAAuB;AAAA,IACvB,0BAAAC,IAA2B;AAAA,IAC3B,QAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,EACf,IAAAnB,GAEEoB,IAAMC,EAAuB,IAAI,GACjCC,IAAUD,EAAwB,IAAI,GACtC,CAACE,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAChD,CAACC,GAAoBC,CAAqB,IAAIF,EAAS,EAAK,GAE5D,EAAE,aAAAG,GAAa,YAAAC,EAAW,IAAIC,EAAU,EAAE,MAAAlB,EAAA,GAAQQ,CAAG,GACrD,EAAE,YAAAW,MAAeC,EAAS,EAAE,YAAY,CAACxB,GAAQ,GACjD,EAAE,cAAAyB,GAAc,eAAAC,EAAA,IAAkBC;AAAA,IACtC,EAAE,eAAAhC,GAAe,2BAAAC,GAA2B,QAAAI,GAAQ,SAAAE,EAAQ;AAAA,IAC5DU;AAAA,EAAA;AAGF,EAAAgB,EAAiB,EAAE,YAAY,CAAC5B,EAAQ,CAAA,GAExC6B,EAAU,MAAM;AACd,UAAMC,IAAchB,EAAQ;AAE5B,aAASiB,IAAkB;AACzB,UAAID,GAAa;AACf,cAAME,IAAeF,EAAY,cAC3BG,IAAeH,EAAY,cAC3BI,IAAYJ,EAAY;AAE9B,QAAAd,EAAgBgB,IAAeC,CAAY,GACrBd,EAAAe,IAAYD,KAAgBD,CAAY;AAAA,MAChE;AAAA,IACF;AAEA,aAASG,IAAwB;AACf,MAAAJ;IAClB;AAEA,IAAID,MACUA,EAAA,iBAAiB,UAAUK,CAAqB,GACrD,OAAA,iBAAiB,UAAUA,CAAqB;AAGnD,UAAAC,IAAY,WAAW,MAAM;AACjB,MAAAL;OACf,CAAC;AAEJ,WAAO,MAAM;AACX,MAAID,KACUA,EAAA,oBAAoB,UAAUK,CAAqB,GAE1D,OAAA,oBAAoB,UAAUA,CAAqB,GAC1D,aAAaC,CAAS;AAAA,IAAA;AAAA,EACxB,GACC,CAACpC,GAAQM,CAAa,CAAC;AAE1B,WAAS+B,EAAQC,GAAsB;AACrC,IAAAA,EAAM,gBAAgB;AAAA,EACxB;AAEI,SAACtC,IAGH,gBAAAuC,EAACC,KACC,UAAC,gBAAAD,EAAAE,GAAA,EAAU,GAAGf,GACX,UAAA7B,sBACE6C,IAAQ,EAAA,eAAe5C,GAAsB,IAE9C,gBAAAyC,EAAAI,GAAA,EAEE,4BAACC,GAAW,EAAA,WAAS,IAAC,SAAO,IAAC,cAAY,IACxC,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGzB;AAAA,MACH,GAAGG;AAAA,MACH,GAAGE;AAAA,MACJ,WAAWqB,EAAWC,EAAO,cAAc,GAAG;AAAA,QAC5C,CAACA,EAAO,uBAAuB,CAAC,GAAGxC,MAAY;AAAA,QAC/C,CAACwC,EAAO,sBAAsB,CAAC,GAAGvC;AAAA,QAClC,CAACuC,EAAO,oBAAoB,CAAC,GAAGtC;AAAA,QAChC,CAACsC,EAAO,oBAAoB,CAAC,GAAGrC;AAAA,MAAA,CACjC;AAAA,MACD,SAAA2B;AAAA,MACA,MAAK;AAAA,MACL,KAAAzB;AAAA,MAEE,UAAA;AAAA,SAASP,KAAAC,MAAkBC,MAAY,YAEpC,gBAAAsC,EAAAF,GAAA,EAAA,UAAA;AAAA,UACCtC,KAAA,gBAAAkC,EAAC,QAAI,GAAGlB,GAAY,WAAW0B,EAAO,qBAAqB,GACxD,UACH1C,EAAA,CAAA;AAAA,UAEDC;AAAA,UACAC,MAAY,YACX,gBAAAgC,EAAC,UAAK,WAAWQ,EAAO,qBAAqB,GAC3C,UAAA,gBAAAR;AAAA,YAACS;AAAA,YAAA;AAAA,cACC,cAAYjD;AAAA,cACZ,SAASG;AAAA,cACT,aAAaM;AAAA,YAAA;AAAA,UAAA,GAEjB;AAAA,QAAA,GAEJ;AAAA,QAEF,gBAAAqC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAWC,EAAO,uBAAuB,GAAG;AAAA,cACrD,CAACA,EAAO,oCAAoC,CAAC,GAAGtD;AAAA,YAAA,CACjD;AAAA,YACD,UAAAU;AAAA,YACA,YAAAF;AAAA,YACA,KAAKa;AAAA,YAEL,UAAA;AAAA,cAAA,gBAAAyB,EAAC,OAAI,EAAA,WAAWO,EAAW,EAAE,CAACC,EAAO,wBAAwB,CAAC,GAAG,CAACpC,GAAgB,GAAI,UAAAjB,EAAS,CAAA;AAAA,cAC9FD,KACC,gBAAA8C;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWO,EAAWC,EAAO,uBAAuB,GAAG;AAAA,oBACrD,CAACA,EAAO,+BAA+B,CAAC,GAAG,CAACpC;AAAA,oBAC5C,CAACoC,EAAO,+BAA+B,CAAC,GAAGhC,KAAgB,CAACG;AAAA,kBAAA,CAC7D;AAAA,kBAEA,UAAAzB;AAAA,gBAAA;AAAA,cACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,CACF,EACF,CAAA,GAEJ,EACF,CAAA,IArEkB;AAuEtB;"}
1	+ {"version":3,"file":"ModalDialog.js","sources":["../../../src/components/ModalDialog/ModalDialog.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport classNames from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { FormHTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';\nimport type { AriaDialogProps } from '@react-types/dialog';\n\nimport styles from './ModalDialog.module.css';\n\nimport { Backdrop } from 'components/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\n\nexport interface ModalDialogProps {\n /** The buttons of the dialog. /\n buttons?: ReactNode;\n /* `true` if the dialog can be closed by clicking outside of it; otherwise, `false`. The default is `false`. /\n isDismissable?: boolean;\n /* `true` to disable closing the dialog with the keyboard; otherwise, `false`. The default is `false`. /\n isKeyboardDismissDisabled?: boolean;\n /* `true` to show a spinner, if the contents of the dialog is lazy loaded; otherwise, `false`. The default is `false`. /\n isLoading?: boolean;\n /* The `aria-valuetext` value of the [Spinner](/story/atoms-spinner--spinner-example) component. The default is `'Loading'` Used together with `isLoading`. /\n spinnerAriaValueText?: string;\n /* The `aria-label` value of the [OverlayCloseButton](/story/atoms-overlayclosebutton--overlay-close-button-example) component. The default is `'Close'` /\n closeButtonAriaValueText?: string;\n /* `true` to render the dialog opened; otherwise, `false`. The default is `false`. /\n isOpen: boolean;\n /* `true` to disable form validation; otherwise, `false`. The default is `false`. /\n noValidate?: boolean;\n /* The callback function that is invoked when the dialog is closed. /\n onClose?(): void;\n /* The callback function that is invoked when the form is submitted. /\n onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];\n /* The `aria-role` value of the dialog. Possible values are `'dialog'`, `'alertdialog'`. The default is `'dialog'`. /\n role?: AriaDialogProps['role'];\n /* The title of the dialog. /\n title?: string;\n /* The contents of the dialog header. /\n headerContent?: ReactNode;\n /* The variant of the dialog. /\n variant?: 'confirm' \| 'dialog';\n /* `true` to add padding to the dialog; otherwise, `false`. The default is `false`. /\n padded?: boolean;\n /* `true` to display the dialog in a slimmer form; otherwise, `false`. The default is `false`. /\n slim?: boolean;\n /* `true` to display the dialog in a wider form; otherwise, `false`. The default is `false`. /\n wide?: boolean;\n /* `true` to show a border between the main content of the dialog and the buttons; otherwise, `false`. The default is `false`. /\n noButtonBorder?: boolean;\n}\n\n/* Represents a component for a modal dialog. /\nexport function ModalDialog(props: PropsWithChildren<ModalDialogProps>) {\n const {\n buttons,\n children,\n isDismissable = true,\n isKeyboardDismissDisabled = !isDismissable,\n isLoading,\n spinnerAriaValueText = 'Loading',\n closeButtonAriaValueText = 'Close',\n isOpen,\n noValidate = false,\n onClose,\n onSubmit,\n role = 'dialog',\n title,\n headerContent,\n variant = 'dialog',\n padded,\n slim,\n wide,\n noButtonBorder = false,\n } = props;\n\n const ref = useRef<HTMLDivElement>(null);\n const formRef = useRef<HTMLFormElement>(null);\n const [isScrollable, setIsScrollable] = useState(false);\n const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n const { dialogProps, titleProps } = useDialog({ role }, ref);\n const { modalProps } = useModal({ isDisabled: !isOpen });\n const { overlayProps, underlayProps } = useOverlay(\n { isDismissable, isKeyboardDismissDisabled, isOpen, onClose },\n ref\n );\n\n usePreventScroll({ isDisabled: !isOpen });\n\n useEffect(() => {\n const formElement = formRef.current;\n\n function checkScrollable() {\n if (formElement) {\n const scrollHeight = formElement.scrollHeight;\n const clientHeight = formElement.clientHeight;\n const scrollTop = formElement.scrollTop;\n\n setIsScrollable(scrollHeight > clientHeight);\n setIsScrolledToBottom(scrollTop + clientHeight >= scrollHeight);\n }\n }\n\n function handleScrollAndResize() {\n checkScrollable();\n }\n\n if (formElement) {\n formElement.addEventListener('scroll', handleScrollAndResize);\n window.addEventListener('resize', handleScrollAndResize);\n }\n\n const timeoutId = setTimeout(() => {\n checkScrollable();\n }, 0);\n\n return () => {\n if (formElement) {\n formElement.removeEventListener('scroll', handleScrollAndResize);\n }\n window.removeEventListener('resize', handleScrollAndResize);\n clearTimeout(timeoutId);\n };\n }, [isOpen, headerContent]);\n\n function onKeyUp(event: KeyboardEvent) {\n event.stopPropagation();\n }\n\n if (!isOpen) return null;\n\n return (\n <OverlayContainer>\n <Backdrop {...underlayProps}>\n {isLoading ? (\n <Spinner ariaValueText={spinnerAriaValueText} />\n ) : (\n <>\n {/ eslint-disable-next-line jsx-a11y/no-autofocus */}\n <FocusScope autoFocus contain restoreFocus>\n <div\n {...dialogProps}\n {...modalProps}\n {...overlayProps}\n className={classNames(styles['modal-dialog'], {\n [styles['modal-dialog--confirm']]: variant === 'confirm',\n [styles['modal-dialog--padded']]: padded,\n [styles['modal-dialog--slim']]: slim,\n [styles['modal-dialog--wide']]: wide,\n })}\n onKeyUp={onKeyUp}\n role=\"presentation\"\n ref={ref}\n >\n {(title \|\| headerContent) && variant === 'dialog' && (\n <>\n {title && (\n <h1 {...titleProps} className={styles['modal-dialog__title']}>\n {title}\n </h1>\n )}\n {headerContent}\n {variant === 'dialog' && (\n <span className={styles['modal-dialog__close']}>\n <OverlayCloseButton\n aria-label={closeButtonAriaValueText}\n onClick={onClose}\n paddedModal={padded}\n />\n </span>\n )}\n </>\n )}\n <form\n className={classNames(styles['modal-dialog__content'], {\n [styles['modal-dialog--content-with-buttons']]: buttons,\n })}\n onSubmit={onSubmit}\n noValidate={noValidate}\n ref={formRef}\n >\n <div className={classNames({ [styles['modal-dialog__children']]: !noButtonBorder })}>{children}</div>\n {buttons && (\n <div\n className={classNames(styles['modal-dialog__buttons'], {\n [styles['modal-dialog__buttons--border']]: !noButtonBorder,\n [styles['modal-dialog__buttons--shadow']]: isScrollable && !isScrolledToBottom,\n })}\n >\n {buttons}\n </div>\n )}\n </form>\n </div>\n </FocusScope>\n </>\n )}\n </Backdrop>\n </OverlayContainer>\n );\n}\n"],"names":["ModalDialog","props","buttons","children","isDismissable","isKeyboardDismissDisabled","isLoading","spinnerAriaValueText","closeButtonAriaValueText","isOpen","noValidate","onClose","onSubmit","role","title","headerContent","variant","padded","slim","wide","noButtonBorder","ref","useRef","formRef","isScrollable","setIsScrollable","useState","isScrolledToBottom","setIsScrolledToBottom","dialogProps","titleProps","useDialog","modalProps","useModal","overlayProps","underlayProps","useOverlay","usePreventScroll","useEffect","formElement","checkScrollable","scrollHeight","clientHeight","scrollTop","handleScrollAndResize","timeoutId","onKeyUp","event","jsx","OverlayContainer","Backdrop","Spinner","Fragment","FocusScope","jsxs","classNames","styles","OverlayCloseButton"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { ModalProvider as n } from "@react-aria/overlays";
+import { ModalProvider as l } from "@react-aria/overlays";
 import { fn as i } from "../../index-MQ0yPLdl.js";
-import { ModalDialog as o } from "./ModalDialog.js";
-import { Button as l } from "../Button/Button.js";
+import { ModalDialog as t } from "./ModalDialog.js";
+import { Button as n } from "../Button/Button.js";
 import { ButtonGroup as m } from "../ButtonGroup/ButtonGroup.js";
 import { FormField as r } from "../FormField/FormField.js";
 import { InputField as d } from "../InputField/InputField.js";
@@ -14,7 +14,7 @@ const p = `
     onSubmit={onSubmitFunction} buttons={buttons}> {children} </ModalDialog>
 `, F = {
   title: "Molecules/ModalDialog",
-  component: o,
+  component: t,
   argTypes: {
     isOpen: {
       table: {
@@ -45,9 +45,10 @@ const p = `
     }
   },
   parameters: {
+    inspectComponent: t,
     codeString: p
   }
-}, u = (t) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(o, { ...t, children: /* @__PURE__ */ a(r, { outerSpace: !0, children: [
+}, u = (o) => /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(t, { ...o, children: /* @__PURE__ */ a(r, { outerSpace: !0, children: [
   /* @__PURE__ */ e(c, { htmlFor: "text-field", children: "Example Text Field" }),
   /* @__PURE__ */ e(d, { id: "text-field" })
 ] }) }) }), s = {
@@ -63,8 +64,8 @@ const p = `
   onSubmit: i(),
   onClose: i(),
   buttons: /* @__PURE__ */ a(m, { reversed: !0, children: [
-    /* @__PURE__ */ e(l, { variant: "primary", onClick: i(), children: "OK" }),
-    /* @__PURE__ */ e(l, { variant: "secondary", onClick: i(), children: "Cancel" })
+    /* @__PURE__ */ e(n, { variant: "primary", onClick: i(), children: "OK" }),
+    /* @__PURE__ */ e(n, { variant: "secondary", onClick: i(), children: "Cancel" })
   ] }),
   isOpen: !0
 }, b = u.bind({});
@@ -77,7 +78,7 @@ g.args = {
   isLoading: !0,
   spinnerAriaValueText: "Loading"
 };
-const f = (t) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(o, { ...t, children: /* @__PURE__ */ a(r, { outerSpace: !0, children: [
+const f = (o) => /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(t, { ...o, children: /* @__PURE__ */ a(r, { outerSpace: !0, children: [
   /* @__PURE__ */ e("div", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui et nibh eleifend ultricies a id nulla. Pellentesque eleifend sem a tellus dictum tempus. Proin non leo id risus placerat vulputate at ac erat. Ut fringilla imperdiet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras molestie ante ac magna ornare rhoncus non at quam. Mauris elementum luctus euismod. Pellentesque molestie malesuada purus, sed egestas lacus interdum sit amet. Morbi blandit lacus sit amet dictum pulvinar. Ut semper nunc ac enim imperdiet, non interdum diam gravida. In nunc tortor, mollis ac molestie dignissim, elementum sed quam. Suspendisse mollis venenatis libero, pellentesque vestibulum elit consequat et. Aliquam fringilla tellus id libero tempus, sit amet suscipit augue tristique. Quisque cursus neque vel justo tristique, eget semper turpis elementum. Etiam venenatis mattis sapien ac mattis. Mauris vitae ultrices erat." }),
   /* @__PURE__ */ e("div", { children: "Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat nec. Nam porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus risus. Phasellus ac diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac euismod non, vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet. Proin semper enim ut sapien tempor, a ornare ipsum faucibus." })
 ] }) }) }), h = f.bind({});

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalDialog.stories.js","sources":["../../../src/components/ModalDialog/ModalDialog.stories.tsx"],"sourcesContent":["import { ModalProvider } from '@react-aria/overlays';\nimport { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ModalDialogProps } from './ModalDialog';\n\nimport { ModalDialog } from './ModalDialog';\n\nimport { Button } from 'components/Button';\nimport { ButtonGroup } from 'components/ButtonGroup';\nimport { FormField } from 'components/FormField';\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\n\nconst codeString = `\n/* ModalDialog has more styling props (see Info-tab).\n Code example is made with the most commonly used props. **/\n <ModalDialog isOpen={isOpen} title={title} onClose={onCloseFunction}\n onSubmit={onSubmitFunction} buttons={buttons}> {children} </ModalDialog>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/ModalDialog',\n component: ModalDialog,\n argTypes: {\n isOpen: {\n table: {\n disable: true,\n },\n },\n noValidate: {\n control: 'boolean',\n },\n role: {\n control: 'radio',\n options: ['dialog', 'alertdialog'],\n },\n onSubmit: {\n table: {\n disable: true,\n },\n },\n onClose: {\n table: {\n disable: true,\n },\n },\n buttons: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n codeString: codeString,\n },\n} as Meta<ModalDialogProps>;\n\nconst Template: StoryFn<ModalDialogProps> = (args: ModalDialogProps) => (\n <ModalProvider>\n <ModalDialog {...args}>\n <FormField outerSpace>\n <Label htmlFor=\"text-field\">Example Text Field</Label>\n <InputField id=\"text-field\" />\n </FormField>\n </ModalDialog>\n </ModalProvider>\n);\n\nconst defaultArgs: Partial<ModalDialogProps> = {\n padded: false,\n slim: false,\n wide: false,\n noButtonBorder: false,\n variant: 'dialog',\n role: 'dialog',\n title: 'Example Title',\n closeButtonAriaValueText: 'Close',\n noValidate: false,\n onSubmit: fn(),\n onClose: fn(),\n buttons: (\n <ButtonGroup reversed>\n <Button variant=\"primary\" onClick={fn()}>\n OK\n </Button>\n <Button variant=\"secondary\" onClick={fn()}>\n Cancel\n </Button>\n </ButtonGroup>\n ),\n isOpen: true,\n};\n\nexport const ModalDialogExample = Template.bind({});\nModalDialogExample.args = {\n ...defaultArgs,\n};\n\nexport const Loading = Template.bind({});\nLoading.args = {\n ...defaultArgs,\n isLoading: true,\n spinnerAriaValueText: 'Loading',\n};\n\nconst LongContentTemplate: StoryFn<ModalDialogProps> = (args: ModalDialogProps) => (\n <ModalProvider>\n <ModalDialog {...args}>\n <FormField outerSpace>\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui et nibh eleifend ultricies a id nulla.\n Pellentesque eleifend sem a tellus dictum tempus. Proin non leo id risus placerat vulputate at ac erat. Ut\n fringilla imperdiet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n cubilia curae; Cras molestie ante ac magna ornare rhoncus non at quam. Mauris elementum luctus euismod.\n Pellentesque molestie malesuada purus, sed egestas lacus interdum sit amet. Morbi blandit lacus sit amet\n dictum pulvinar. Ut semper nunc ac enim imperdiet, non interdum diam gravida. In nunc tortor, mollis ac\n molestie dignissim, elementum sed quam. Suspendisse mollis venenatis libero, pellentesque vestibulum elit\n consequat et. Aliquam fringilla tellus id libero tempus, sit amet suscipit augue tristique. Quisque cursus\n neque vel justo tristique, eget semper turpis elementum. Etiam venenatis mattis sapien ac mattis. Mauris vitae\n ultrices erat.\n </div>\n <div>\n Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat nec. Nam\n porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus risus. Phasellus ac\n diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac euismod non,\n vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet. Proin semper enim ut\n sapien tempor, a ornare ipsum faucibus.\n </div>\n </FormField>\n </ModalDialog>\n </ModalProvider>\n);\n\nexport const WithLongContentAndNoBorder = LongContentTemplate.bind({});\nWithLongContentAndNoBorder.args = {\n ...defaultArgs,\n noButtonBorder: true,\n};\n"],"names":["codeString","ModalDialog_stories","ModalDialog","Template","args","jsx","ModalProvider","jsxs","FormField","Label","InputField","defaultArgs","fn","ButtonGroup","Button","ModalDialogExample","Loading","LongContentTemplate","WithLongContentAndNoBorder"],"mappings":";;;;;;;;;AAcA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA,GAQJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,UAAU,aAAa;AAAA,IACnC;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAsC,CAACC,MAC3C,gBAAAC,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACH,GAAa,EAAA,GAAGE,GACf,UAAA,gBAAAG,EAACC,GAAU,EAAA,YAAU,IACnB,UAAA;AAAA,EAAC,gBAAAH,EAAAI,GAAA,EAAM,SAAQ,cAAa,UAAkB,sBAAA;AAAA,EAC9C,gBAAAJ,EAACK,GAAW,EAAA,IAAG,aAAa,CAAA;AAAA,GAC9B,GACF,EACF,CAAA,GAGIC,IAAyC;AAAA,EAC7C,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,0BAA0B;AAAA,EAC1B,YAAY;AAAA,EACZ,UAAUC,EAAG;AAAA,EACb,SAASA,EAAG;AAAA,EACZ,SACE,gBAAAL,EAACM,GAAY,EAAA,UAAQ,IACnB,UAAA;AAAA,IAAA,gBAAAR,EAACS,KAAO,SAAQ,WAAU,SAASF,KAAM,UAEzC,MAAA;AAAA,sBACCE,GAAO,EAAA,SAAQ,aAAY,SAASF,KAAM,UAE3C,UAAA;AAAA,EAAA,GACF;AAAA,EAEF,QAAQ;AACV,GAEaG,IAAqBZ,EAAS,KAAK,EAAE;AAClDY,EAAmB,OAAO;AAAA,EACxB,GAAGJ;AACL;AAEO,MAAMK,IAAUb,EAAS,KAAK,EAAE;AACvCa,EAAQ,OAAO;AAAA,EACb,GAAGL;AAAA,EACH,WAAW;AAAA,EACX,sBAAsB;AACxB;AAEA,MAAMM,IAAiD,CAACb,MACtD,gBAAAC,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACH,GAAa,EAAA,GAAGE,GACf,UAAA,gBAAAG,EAACC,GAAU,EAAA,YAAU,IACnB,UAAA;AAAA,EAAA,gBAAAH,EAAC,SAAI,UAWL,88BAAA,CAAA;AAAA,EACA,gBAAAA,EAAC,SAAI,UAML,4dAAA,CAAA;AAAA,GACF,GACF,EACF,CAAA,GAGWa,IAA6BD,EAAoB,KAAK,EAAE;AACrEC,EAA2B,OAAO;AAAA,EAChC,GAAGP;AAAA,EACH,gBAAgB;AAClB;"}
1	+ {"version":3,"file":"ModalDialog.stories.js","sources":["../../../src/components/ModalDialog/ModalDialog.stories.tsx"],"sourcesContent":["import { ModalProvider } from '@react-aria/overlays';\nimport { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ModalDialogProps } from './ModalDialog';\n\nimport { ModalDialog } from './ModalDialog';\n\nimport { Button } from 'components/Button';\nimport { ButtonGroup } from 'components/ButtonGroup';\nimport { FormField } from 'components/FormField';\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\n\nconst codeString = `\n/* ModalDialog has more styling props (see Info-tab).\n Code example is made with the most commonly used props. **/\n <ModalDialog isOpen={isOpen} title={title} onClose={onCloseFunction}\n onSubmit={onSubmitFunction} buttons={buttons}> {children} </ModalDialog>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/ModalDialog',\n component: ModalDialog,\n argTypes: {\n isOpen: {\n table: {\n disable: true,\n },\n },\n noValidate: {\n control: 'boolean',\n },\n role: {\n control: 'radio',\n options: ['dialog', 'alertdialog'],\n },\n onSubmit: {\n table: {\n disable: true,\n },\n },\n onClose: {\n table: {\n disable: true,\n },\n },\n buttons: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: ModalDialog,\n codeString: codeString,\n },\n} as Meta<ModalDialogProps>;\n\nconst Template: StoryFn<ModalDialogProps> = (args: ModalDialogProps) => (\n <ModalProvider>\n <ModalDialog {...args}>\n <FormField outerSpace>\n <Label htmlFor=\"text-field\">Example Text Field</Label>\n <InputField id=\"text-field\" />\n </FormField>\n </ModalDialog>\n </ModalProvider>\n);\n\nconst defaultArgs: Partial<ModalDialogProps> = {\n padded: false,\n slim: false,\n wide: false,\n noButtonBorder: false,\n variant: 'dialog',\n role: 'dialog',\n title: 'Example Title',\n closeButtonAriaValueText: 'Close',\n noValidate: false,\n onSubmit: fn(),\n onClose: fn(),\n buttons: (\n <ButtonGroup reversed>\n <Button variant=\"primary\" onClick={fn()}>\n OK\n </Button>\n <Button variant=\"secondary\" onClick={fn()}>\n Cancel\n </Button>\n </ButtonGroup>\n ),\n isOpen: true,\n};\n\nexport const ModalDialogExample = Template.bind({});\nModalDialogExample.args = {\n ...defaultArgs,\n};\n\nexport const Loading = Template.bind({});\nLoading.args = {\n ...defaultArgs,\n isLoading: true,\n spinnerAriaValueText: 'Loading',\n};\n\nconst LongContentTemplate: StoryFn<ModalDialogProps> = (args: ModalDialogProps) => (\n <ModalProvider>\n <ModalDialog {...args}>\n <FormField outerSpace>\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui et nibh eleifend ultricies a id nulla.\n Pellentesque eleifend sem a tellus dictum tempus. Proin non leo id risus placerat vulputate at ac erat. Ut\n fringilla imperdiet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n cubilia curae; Cras molestie ante ac magna ornare rhoncus non at quam. Mauris elementum luctus euismod.\n Pellentesque molestie malesuada purus, sed egestas lacus interdum sit amet. Morbi blandit lacus sit amet\n dictum pulvinar. Ut semper nunc ac enim imperdiet, non interdum diam gravida. In nunc tortor, mollis ac\n molestie dignissim, elementum sed quam. Suspendisse mollis venenatis libero, pellentesque vestibulum elit\n consequat et. Aliquam fringilla tellus id libero tempus, sit amet suscipit augue tristique. Quisque cursus\n neque vel justo tristique, eget semper turpis elementum. Etiam venenatis mattis sapien ac mattis. Mauris vitae\n ultrices erat.\n </div>\n <div>\n Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat nec. Nam\n porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus risus. Phasellus ac\n diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac euismod non,\n vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet. Proin semper enim ut\n sapien tempor, a ornare ipsum faucibus.\n </div>\n </FormField>\n </ModalDialog>\n </ModalProvider>\n);\n\nexport const WithLongContentAndNoBorder = LongContentTemplate.bind({});\nWithLongContentAndNoBorder.args = {\n ...defaultArgs,\n noButtonBorder: true,\n};\n"],"names":["codeString","ModalDialog_stories","ModalDialog","Template","args","jsx","ModalProvider","jsxs","FormField","Label","InputField","defaultArgs","fn","ButtonGroup","Button","ModalDialogExample","Loading","LongContentTemplate","WithLongContentAndNoBorder"],"mappings":";;;;;;;;;AAcA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA,GAQJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,UAAU,aAAa;AAAA,IACnC;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAsC,CAACC,MAC3C,gBAAAC,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACH,GAAa,EAAA,GAAGE,GACf,UAAA,gBAAAG,EAACC,GAAU,EAAA,YAAU,IACnB,UAAA;AAAA,EAAC,gBAAAH,EAAAI,GAAA,EAAM,SAAQ,cAAa,UAAkB,sBAAA;AAAA,EAC9C,gBAAAJ,EAACK,GAAW,EAAA,IAAG,aAAa,CAAA;AAAA,GAC9B,GACF,EACF,CAAA,GAGIC,IAAyC;AAAA,EAC7C,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,0BAA0B;AAAA,EAC1B,YAAY;AAAA,EACZ,UAAUC,EAAG;AAAA,EACb,SAASA,EAAG;AAAA,EACZ,SACE,gBAAAL,EAACM,GAAY,EAAA,UAAQ,IACnB,UAAA;AAAA,IAAA,gBAAAR,EAACS,KAAO,SAAQ,WAAU,SAASF,KAAM,UAEzC,MAAA;AAAA,sBACCE,GAAO,EAAA,SAAQ,aAAY,SAASF,KAAM,UAE3C,UAAA;AAAA,EAAA,GACF;AAAA,EAEF,QAAQ;AACV,GAEaG,IAAqBZ,EAAS,KAAK,EAAE;AAClDY,EAAmB,OAAO;AAAA,EACxB,GAAGJ;AACL;AAEO,MAAMK,IAAUb,EAAS,KAAK,EAAE;AACvCa,EAAQ,OAAO;AAAA,EACb,GAAGL;AAAA,EACH,WAAW;AAAA,EACX,sBAAsB;AACxB;AAEA,MAAMM,IAAiD,CAACb,MACtD,gBAAAC,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACH,GAAa,EAAA,GAAGE,GACf,UAAA,gBAAAG,EAACC,GAAU,EAAA,YAAU,IACnB,UAAA;AAAA,EAAA,gBAAAH,EAAC,SAAI,UAWL,88BAAA,CAAA;AAAA,EACA,gBAAAA,EAAC,SAAI,UAML,4dAAA,CAAA;AAAA,GACF,GACF,EACF,CAAA,GAGWa,IAA6BD,EAAoB,KAAK,EAAE;AACrEC,EAA2B,OAAO;AAAA,EAChC,GAAGP;AAAA,EACH,gBAAgB;AAClB;"}

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

@@ -2,10 +2,14 @@ import { PropsWithChildren, ReactNode } from 'react';
 import { MultiSelectItem } from 'components/MultiSelect/components/MultiSelectItem';
 import { MultiSelectHeader } from 'components/MultiSelect/components/MultiSelectHeader';
 export interface MultiSelectProps {
+    /** `true` if the container should scroll on overflow; otherwise, `false` to resize the container to its contents. The default is `true`. */
     scrollable?: boolean;
+    /** `true` to disable the border around the container; otherwise, `false`. The default is `false`. */
     noBorder?: boolean;
+    /** The header contents. */
     header?: ReactNode;
 }
+/** Represents a component to list a number of checkboxes. */
 export declare const MultiSelect: {
     ({ scrollable, noBorder, header, children }: PropsWithChildren<MultiSelectProps>): import("react/jsx-runtime").JSX.Element;
     MultiSelectHeader: typeof MultiSelectHeader;

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

@@ -1,9 +1,9 @@
 import { jsxs as S, jsx as r } from "react/jsx-runtime";
 import { fn as d } from "../../index-MQ0yPLdl.js";
-import { useState as M } from "react";
-import { M as a } from "../../MultiSelect-Ckf3uGw5.js";
-import { Container as p } from "../../storyComponents/Container/Container.js";
-const f = `
+import { useState as p } from "react";
+import { M as e } from "../../MultiSelect-Ckf3uGw5.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}>
@@ -14,7 +14,7 @@ const f = `
   </MultiSelect>
   `, H = {
   title: "Organisms/MultiSelect",
-  component: a,
+  component: e,
   argTypes: {
     header: {
       table: {
@@ -23,10 +23,11 @@ const f = `
     }
   },
   parameters: {
-    codeString: f
+    inspectComponent: e,
+    codeString: C
   }
 }, m = (i) => {
-  const [n, o] = 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" },
@@ -35,39 +36,39 @@ const f = `
     { itemName: "EItem 6", itemValue: "6" }
   ], h = () => {
     o([]), d()();
-  }, b = (e) => {
-    const { checked: t, value: l } = e.target;
+  }, b = (t) => {
+    const { checked: l, value: a } = t.target;
     o((s) => {
-      const c = t ? [...s, l] : s.filter((g) => g !== l);
+      const c = l ? [...s, a] : s.filter((g) => g !== a);
       return d()(c), c;
     });
   };
-  return /* @__PURE__ */ S(p, { children: [
+  return /* @__PURE__ */ S(M, { children: [
     i.header && /* @__PURE__ */ r(
-      a.MultiSelectHeader,
+      e.MultiSelectHeader,
       {
         label: "Item list",
         clearTrigger: n.length > 0 ? "Clear Selection" : "",
         onClear: h
       }
     ),
-    /* @__PURE__ */ r(a, { ...i, children: I.map(({ itemName: e, itemValue: t, disabled: l }) => /* @__PURE__ */ r(
-      a.MultiSelectItem,
+    /* @__PURE__ */ r(e, { ...i, children: I.map(({ itemName: t, itemValue: l, disabled: a }) => /* @__PURE__ */ r(
+      e.MultiSelectItem,
       {
-        label: e,
-        value: t,
-        checked: n.includes(t),
+        label: t,
+        value: l,
+        checked: n.includes(l),
         onChange: b,
-        disabled: l
+        disabled: a
       },
-      e
+      t
     )) })
   ] });
 }, u = {
   scrollable: !0,
   noBorder: !1
-}, C = m.bind({});
-C.args = {
+}, f = m.bind({});
+f.args = {
   ...u
 };
 const N = m.bind({});
@@ -86,7 +87,7 @@ V.args = {
   header: !0
 };
 export {
-  C as MultiSelectExample,
+  f as MultiSelectExample,
   N as WithHeader,
   V as WithheaderAndWithoutScrollContainerAndBorder,
   H as default

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

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

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

@@ -1,6 +1,9 @@
 import { ButtonHTMLAttributes } from 'react';
 export interface OverlayCloseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+    /** The `aria-label` value of the button. */
     'aria-label': string;
+    /** `true` to add padding around the button; otherwise, `false`. The default is `false`. */
     paddedModal?: boolean;
 }
+/** Represents a component to render a close button in the top right corner of a container. */
 export declare const OverlayCloseButton: import('react').ForwardRefExoticComponent<OverlayCloseButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OverlayCloseButton.js","sources":["../../../src/components/OverlayCloseButton/OverlayCloseButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport styles from './OverlayCloseButton.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface OverlayCloseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {\n 'aria-label': string; // mandatory\n paddedModal?: boolean;\n}\n\nexport const OverlayCloseButton = forwardRef<HTMLButtonElement, OverlayCloseButtonProps>(\n ({ paddedModal, ...restProps }, forwardedRef) => (\n <button\n {...restProps}\n type=\"button\"\n ref={forwardedRef}\n className={clsx(styles['overlay-close-button'], {\n [styles['overlay-close-button--padded']]: paddedModal,\n })}\n >\n <Icon name=\"Cross\" size={24} />\n </button>\n )\n);\n"],"names":["OverlayCloseButton","forwardRef","paddedModal","restProps","forwardedRef","jsx","clsx","styles","Icon"],"mappings":";;;;;;;~~GAcaA~~,IAAqBC;AAAA,EAChC,CAAC,EAAE,aAAAC,GAAa,GAAGC,KAAaC,MAC9B,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,MAAK;AAAA,MACL,KAAKC;AAAA,MACL,WAAWE,EAAKC,EAAO,sBAAsB,GAAG;AAAA,QAC9C,CAACA,EAAO,8BAA8B,CAAC,GAAGL;AAAA,MAAA,CAC3C;AAAA,MAED,UAAC,gBAAAG,EAAAG,GAAA,EAAK,MAAK,SAAQ,MAAM,IAAI;AAAA,IAAA;AAAA,EAC/B;AAEJ;"}
1	+ {"version":3,"file":"OverlayCloseButton.js","sources":["../../../src/components/OverlayCloseButton/OverlayCloseButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport styles from './OverlayCloseButton.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface OverlayCloseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {\n /** The `aria-label` value of the button. /\n 'aria-label': string; // mandatory\n /* `true` to add padding around the button; otherwise, `false`. The default is `false`. /\n paddedModal?: boolean;\n}\n\n/* Represents a component to render a close button in the top right corner of a container. */\nexport const OverlayCloseButton = forwardRef<HTMLButtonElement, OverlayCloseButtonProps>(\n ({ paddedModal, ...restProps }, forwardedRef) => (\n <button\n {...restProps}\n type=\"button\"\n ref={forwardedRef}\n className={clsx(styles['overlay-close-button'], {\n [styles['overlay-close-button--padded']]: paddedModal,\n })}\n >\n <Icon name=\"Cross\" size={24} />\n </button>\n )\n);\n"],"names":["OverlayCloseButton","forwardRef","paddedModal","restProps","forwardedRef","jsx","clsx","styles","Icon"],"mappings":";;;;;;;GAiBaA,IAAqBC;AAAA,EAChC,CAAC,EAAE,aAAAC,GAAa,GAAGC,KAAaC,MAC9B,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,MAAK;AAAA,MACL,KAAKC;AAAA,MACL,WAAWE,EAAKC,EAAO,sBAAsB,GAAG;AAAA,QAC9C,CAACA,EAAO,8BAA8B,CAAC,GAAGL;AAAA,MAAA,CAC3C;AAAA,MAED,UAAC,gBAAAG,EAAAG,GAAA,EAAK,MAAK,SAAQ,MAAM,IAAI;AAAA,IAAA;AAAA,EAC/B;AAEJ;"}

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

@@ -1,10 +1,10 @@
-import { jsx as o } from "react/jsx-runtime";
-import { fn as l } from "../../index-MQ0yPLdl.js";
-import { OverlayCloseButton as e } from "./OverlayCloseButton.js";
-import { Container as t } from "../../storyComponents/Container/Container.js";
-const r = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />", p = {
+import { jsx as e } from "react/jsx-runtime";
+import { fn as a } from "../../index-MQ0yPLdl.js";
+import { OverlayCloseButton as o } from "./OverlayCloseButton.js";
+import { Container as l } from "../../storyComponents/Container/Container.js";
+const n = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />", c = {
   title: "Atoms/OverlayCloseButton",
-  component: e,
+  component: o,
   argTypes: {
     paddedModal: {
       control: "boolean"
@@ -14,16 +14,17 @@ const r = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction}
     }
   },
   parameters: {
-    codeString: r
+    inspectComponent: o,
+    codeString: n
   }
-}, n = (a) => /* @__PURE__ */ o(t, { size: "small", padded: !1, children: /* @__PURE__ */ o(e, { ...a }) }), s = n.bind({});
+}, r = (t) => /* @__PURE__ */ e(l, { size: "small", padded: !1, children: /* @__PURE__ */ e(o, { ...t }) }), s = r.bind({});
 s.args = {
   paddedModal: !1,
   "aria-label": "Close",
-  onClick: l()
+  onClick: a()
 };
 export {
   s as OverlayCloseButtonExample,
-  p as default
+  c as default
 };
 //# sourceMappingURL=OverlayCloseButton.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OverlayCloseButton.stories.js","sources":["../../../src/components/OverlayCloseButton/OverlayCloseButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayCloseButtonProps } from './OverlayCloseButton';\n\nimport { OverlayCloseButton } from './OverlayCloseButton';\n\nimport { Container } from 'storyComponents/Container/';\n\nconst codeString = '<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/OverlayCloseButton',\n component: OverlayCloseButton,\n argTypes: {\n paddedModal: {\n control: 'boolean',\n },\n 'aria-label': {\n control: 'text',\n },\n },\n parameters: {\n codeString: codeString,\n },\n} as Meta<OverlayCloseButtonProps>;\n\nconst Template: StoryFn<OverlayCloseButtonProps> = (args) => {\n return (\n <Container size=\"small\" padded={false}>\n <OverlayCloseButton {...args} />\n </Container>\n );\n};\n\nexport const OverlayCloseButtonExample = Template.bind({});\nOverlayCloseButtonExample.args = {\n paddedModal: false,\n 'aria-label': 'Close',\n onClick: fn(),\n};\n"],"names":["codeString","OverlayCloseButton_stories","OverlayCloseButton","Template","args","jsx","Container","OverlayCloseButtonExample","fn"],"mappings":";;;;AASA,MAAMA,IAAa,4EAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAA6C,CAACC,MAEhD,gBAAAC,EAACC,GAAU,EAAA,MAAK,SAAQ,QAAQ,IAC9B,UAAC,gBAAAD,EAAAH,GAAA,EAAoB,GAAGE,EAAM,CAAA,EAChC,CAAA,GAISG,IAA4BJ,EAAS,KAAK,EAAE;AACzDI,EAA0B,OAAO;AAAA,EAC/B,aAAa;AAAA,EACb,cAAc;AAAA,EACd,SAASC,EAAG;AACd;"}
1	+ {"version":3,"file":"OverlayCloseButton.stories.js","sources":["../../../src/components/OverlayCloseButton/OverlayCloseButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayCloseButtonProps } from './OverlayCloseButton';\n\nimport { OverlayCloseButton } from './OverlayCloseButton';\n\nimport { Container } from 'storyComponents/Container/';\n\nconst codeString = '<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/OverlayCloseButton',\n component: OverlayCloseButton,\n argTypes: {\n paddedModal: {\n control: 'boolean',\n },\n 'aria-label': {\n control: 'text',\n },\n },\n parameters: {\n inspectComponent: OverlayCloseButton,\n codeString: codeString,\n },\n} as Meta<OverlayCloseButtonProps>;\n\nconst Template: StoryFn<OverlayCloseButtonProps> = (args) => {\n return (\n <Container size=\"small\" padded={false}>\n <OverlayCloseButton {...args} />\n </Container>\n );\n};\n\nexport const OverlayCloseButtonExample = Template.bind({});\nOverlayCloseButtonExample.args = {\n paddedModal: false,\n 'aria-label': 'Close',\n onClick: fn(),\n};\n"],"names":["codeString","OverlayCloseButton_stories","OverlayCloseButton","Template","args","jsx","Container","OverlayCloseButtonExample","fn"],"mappings":";;;;AASA,MAAMA,IAAa,4EAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAA6C,CAACC,MAEhD,gBAAAC,EAACC,GAAU,EAAA,MAAK,SAAQ,QAAQ,IAC9B,UAAC,gBAAAD,EAAAH,GAAA,EAAoB,GAAGE,EAAM,CAAA,EAChC,CAAA,GAISG,IAA4BJ,EAAS,KAAK,EAAE;AACzDI,EAA0B,OAAO;AAAA,EAC/B,aAAa;AAAA,EACb,cAAc;AAAA,EACd,SAASC,EAAG;AACd;"}

package/dist/components/PeriodSelector/PeriodSelector.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+export interface PeriodSelectorProps {
+    /** Indicates how many periods are shown. */
+    maxPeriods: 6 | 7;
+    /** array of period values [3, 5 ...] */
+    defaultValues?: number[];
+    label: string;
+    labelPosition?: 'top' | 'left';
+    /** Shows red * */
+    required?: boolean;
+    /** error text to display if set */
+    notValidatedText?: string;
+    /** Returns array of selected values as number */
+    onChange: (values: number[]) => void;
+}
+/** Checkbox group for selecting periods */
+export declare const PeriodSelector: ({ maxPeriods, defaultValues, label, labelPosition, required, notValidatedText, onChange, }: PeriodSelectorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/PeriodSelector/PeriodSelector.js ADDED Viewed

@@ -0,0 +1,74 @@
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import { c as v } from "../../clsx-OuTLNxxd.js";
+import { useRef as N, useState as M, useEffect as $ } from "react";
+import { Label as k } from "../Label/Label.js";
+import { CheckboxButtonBar as I } from "../CheckboxButtonBar/CheckboxButtonBar.js";
+import { Icon as T } from "../Icon/Icon.js";
+import '../../assets/PeriodSelector.css';const c = {
+  "period-selector__container": "_period-selector__container_1on0y_1",
+  "period-selector__container--label-left": "_period-selector__container--label-left_1on0y_6",
+  "period-selector__container--label-top": "_period-selector__container--label-top_1on0y_12",
+  "period-selector__selector-container": "_period-selector__selector-container_1on0y_19",
+  "period-selector__selector-row": "_period-selector__selector-row_1on0y_24",
+  "period-selector__error": "_period-selector__error_1on0y_31"
+}, E = 0, S = 1, f = 2, a = 3, w = 7, D = (_) => {
+  const n = [];
+  for (let t = 0; t < _.length; t += a)
+    n.push(_.slice(t, t + a));
+  return n;
+}, L = ({
+  maxPeriods: _ = w,
+  defaultValues: n,
+  label: t,
+  labelPosition: b = "top",
+  required: p = !1,
+  notValidatedText: d = "",
+  onChange: g
+}) => {
+  const R = Array.from({ length: _ }, (e, r) => r + 1), m = D(R), x = m.map((e, r) => e.map((o) => ({
+    label: `${r + 1}${e.length === 1 ? "" : `.${(o - 1) % a + 1}`}`,
+    value: o.toString()
+  }))), s = N(
+    m.map(
+      (e) => e.reduce((r, o) => (n != null && n.includes(o) && r.push(o), r), [])
+    )
+  ), [y, u] = M([]), h = (e) => e[E].length !== 0 || e[S].length !== 0 ? [f] : e[f].length !== 0 ? [E, S] : [], P = (e, r) => {
+    s.current[r] = e.map((o) => Number(o)), u(h(s.current)), g([...s.current.flat()].sort());
+  };
+  return $(() => {
+    u(h(s.current));
+  }, []), /* @__PURE__ */ i(
+    "div",
+    {
+      className: v(
+        c["period-selector__container"],
+        c[`period-selector__container--label-${b}`]
+      ),
+      children: [
+        t && /* @__PURE__ */ l(k, { htmlFor: "", required: p, children: t }),
+        /* @__PURE__ */ i("div", { className: c["period-selector__selector-container"], children: [
+          /* @__PURE__ */ l("div", { className: c["period-selector__selector-row"], children: x.map((e, r) => /* @__PURE__ */ l(
+            I,
+            {
+              checkboxes: e,
+              defaultValues: s.current[r].map((o) => o.toString()),
+              disableGroup: y.includes(r),
+              required: p,
+              onSetValues: (o) => P(o, r)
+            },
+            `group_${r}`
+          )) }),
+          /* @__PURE__ */ l("div", { className: c["period-selector__error"] }),
+          d !== "" && /* @__PURE__ */ i("div", { className: c["period-selector__error"], children: [
+            /* @__PURE__ */ l(T, { name: "ExclamationTriangleFill", size: 24 }),
+            d
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  L as PeriodSelector
+};
+//# sourceMappingURL=PeriodSelector.js.map

package/dist/components/PeriodSelector/PeriodSelector.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label } from 'components/Label';\nimport { CheckboxButtonBar } from 'components/CheckboxButtonBar';\nimport { Icon } from 'components/Icon';\n\nexport interface PeriodSelectorProps {\n /** Indicates how many periods are shown. */\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n maxPeriods: 6 | 7;\n /** array of period values [3, 5 ...] */\n defaultValues?: number[];\n label: string;\n labelPosition?: 'top' | 'left';\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: (values: number[]) => void;\n}\n\nconst SEMESTER_1 = 0;\nconst SEMESTER_2 = 1;\nconst SEMESTER_3 = 2;\n\nconst PERIODS_PER_SEMESTER = 3;\nconst MAX_PERIODS = 7;\n\nconst chunkPeriods = (array: number[]): number[][] => {\n const result: number[][] = [];\n for (let count = 0; count < array.length; count += PERIODS_PER_SEMESTER) {\n result.push(array.slice(count, count + PERIODS_PER_SEMESTER));\n }\n return result;\n};\n\n/** Checkbox group for selecting periods */\nexport const PeriodSelector = ({\n maxPeriods = MAX_PERIODS,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidatedText = '',\n onChange,\n}: PeriodSelectorProps) => {\n const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n const chunkedPeriods = chunkPeriods(maxPeriodsList);\n\n const checkboxItems = chunkedPeriods.map((periods, semester) => {\n return periods.map((period) => ({\n label: `${semester + 1}${periods.length === 1 ? '' : `.${((period - 1) % PERIODS_PER_SEMESTER) + 1}`}`,\n value: period.toString(),\n }));\n });\n\n const returnValues = useRef<number[][]>(\n chunkedPeriods.map((semester) =>\n semester.reduce((periods, period) => {\n if (defaultValues?.includes(period)) periods.push(period);\n return periods;\n }, [] as number[])\n )\n );\n const [disableSemesters, setDisableSemesters] = useState<number[]>([]);\n\n const disableGroups = (selects: number[][]) => {\n if (selects[SEMESTER_1].length !== 0 || selects[SEMESTER_2].length !== 0) return [SEMESTER_3];\n if (selects[SEMESTER_3].length !== 0) return [SEMESTER_1, SEMESTER_2];\n return [];\n };\n\n const handleChange = (values: string[], index: number) => {\n returnValues.current[index] = values.map((num) => Number(num));\n setDisableSemesters(disableGroups(returnValues.current));\n onChange([...returnValues.current.flat()].sort());\n };\n\n useEffect(() => {\n setDisableSemesters(disableGroups(returnValues.current));\n }, []);\n\n return (\n <div\n className={clsx(\n styles['period-selector__container'],\n styles[`period-selector__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['period-selector__selector-container']}>\n <div className={styles['period-selector__selector-row']}>\n {checkboxItems.map((checkboxes, semester) => (\n <CheckboxButtonBar\n key={`group_${semester}`}\n checkboxes={checkboxes}\n defaultValues={returnValues.current[semester].map((num) => num.toString())}\n disableGroup={disableSemesters.includes(semester)}\n required={required}\n onSetValues={(event) => handleChange(event, semester)}\n />\n ))}\n </div>\n <div className={styles['period-selector__error']}></div>\n {notValidatedText !== '' && (\n <div className={styles['period-selector__error']}>\n <Icon name=\"ExclamationTriangleFill\" size={24} />\n {notValidatedText}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["SEMESTER_1","SEMESTER_2","SEMESTER_3","PERIODS_PER_SEMESTER","MAX_PERIODS","chunkPeriods","array","result","count","PeriodSelector","maxPeriods","defaultValues","label","labelPosition","required","notValidatedText","onChange","maxPeriodsList","_","index","chunkedPeriods","checkboxItems","periods","semester","period","returnValues","useRef","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","Icon"],"mappings":"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"}

package/dist/components/PeriodSelector/PeriodSelector.stories.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { PeriodSelectorProps } from './PeriodSelector';
+declare const _default: Meta<PeriodSelectorProps>;
+export default _default;
+export declare const PeriodSelectorExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PeriodSelectorProps>;