npm - @ahrowe/ui - Versions diffs - 0.30.0 → 0.32.0 - Mend

@ahrowe/ui 0.30.0 → 0.32.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 (146) hide show

package/dist/esm/common/actionButtons/actionButtons.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"./actionButtons.module.mjs";import{ButtonStyleType as n,ButtonType as r}from"../button/button.types.mjs";import i from"../button/button.mjs";import a from"classnames";import{jsx as o,jsxs as s}from"react/jsx-runtime";function c(c){let{onSubmit:l=()=>null,onClose:u=()=>null,submitLabel:d=`Save`,cancelLabel:f=`Cancel`,submitButtonStyle:p=n.Primary,isSubmitButtonLoading:m=!1,isSubmitButtonDisabled:h=!1,submitButtonIcon:g=void 0,cancelButtonStyle:_=n.Default,isCancelButtonLoading:v=!1,isCancelButtonDisabled:y=!1,cancelButtonIcon:b=void 0,hidePrimaryButton:x=!1,hideSecondaryButton:S=!1,noMargin:C=!1,stackButtons:w=!1,className:T,style:E,classNames:D,styles:O,...k}=e(`ActionButtons`,c);return s(`div`,{...k,className:a(t.actionButtons,!C&&t.actionButtonsMargin,w&&t.actionButtonsStacked,T,D?.root),style:{...E,...O?.root},children:[!x&&o(i,{isLoading:m,disabled:h,styleType:p,type:r.Submit,onClick:l,className:D?.submitButton,style:O?.submitButton,icon:g,children:d}),!S&&o(i,{isLoading:v,disabled:y,onClick:u,styleType:_,className:D?.cancelButton,style:O?.cancelButton,icon:b,children:f})]})}export{c as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import n from"./actionButtons.module.mjs";import{ButtonStyleType as r,ButtonType as i}from"../button/button.types.mjs";import a from"../button/button.mjs";import o from"classnames";import{jsx as s,jsxs as c}from"react/jsx-runtime";var l={submit:`Save`,cancel:`Cancel`};function u(u){let{onSubmit:d=()=>null,onClose:f=()=>null,labels:p,submitButtonStyle:m=r.Primary,isSubmitButtonLoading:h=!1,isSubmitButtonDisabled:g=!1,submitButtonIcon:_=void 0,cancelButtonStyle:v=r.Default,isCancelButtonLoading:y=!1,isCancelButtonDisabled:b=!1,cancelButtonIcon:x=void 0,hidePrimaryButton:S=!1,hideSecondaryButton:C=!1,noMargin:w=!1,stackButtons:T=!1,className:E,style:D,classNames:O,styles:k,...A}=e(`ActionButtons`,u),j=t(`ActionButtons`,p,l);return c(`div`,{...A,className:o(n.actionButtons,!w&&n.actionButtonsMargin,T&&n.actionButtonsStacked,E,O?.root),style:{...D,...k?.root},children:[!S&&s(a,{isLoading:h,disabled:g,styleType:m,type:i.Submit,onClick:d,className:O?.submitButton,style:k?.submitButton,icon:_,children:j.submit}),!C&&s(a,{isLoading:y,disabled:b,onClick:f,styleType:v,className:O?.cancelButton,style:k?.cancelButton,icon:x,children:j.cancel})]})}export{u as default};
 //# sourceMappingURL=actionButtons.mjs.map

package/dist/esm/common/actionButtons/actionButtons.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"actionButtons.mjs","names":[],"sources":["../../../../package/common/actionButtons/actionButtons.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport styles from './actionButtons.module.pcss';\nimport Button, { ButtonStyleType, ButtonType } from '../button';\nimport { useComponentDefaults } from '../configProvider';\nimport { ActionButtonsProps } from './actionButtons.types';\n\nexport default function ActionButtons(props: ActionButtonsProps) {\n const {\n onSubmit = () => null,\n onClose = () => null,\n ~~submitLabel = 'Save'~~,\n ~~cancelLabel = 'Cancel',\n~~ submitButtonStyle = ButtonStyleType.Primary,\n isSubmitButtonLoading = false,\n isSubmitButtonDisabled = false,\n submitButtonIcon = undefined,\n cancelButtonStyle = ButtonStyleType.Default,\n isCancelButtonLoading = false,\n isCancelButtonDisabled = false,\n cancelButtonIcon = undefined,\n hidePrimaryButton = false,\n hideSecondaryButton = false,\n noMargin = false,\n stackButtons = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('ActionButtons', props);\n return (\n <div\n {...rest}\n className={cx(\n styles.actionButtons,\n !noMargin && styles.actionButtonsMargin,\n stackButtons && styles.actionButtonsStacked,\n className,\n classNames?.root,\n )}\n style={{ ...style, ...slotStyles?.root }}\n >\n {!hidePrimaryButton && (\n <Button\n isLoading={isSubmitButtonLoading}\n disabled={isSubmitButtonDisabled}\n styleType={submitButtonStyle}\n type={ButtonType.Submit}\n onClick={onSubmit}\n className={classNames?.submitButton}\n style={slotStyles?.submitButton}\n icon={submitButtonIcon}\n >\n {~~submitLabel~~}\n </Button>\n )}\n {!hideSecondaryButton && (\n <Button\n isLoading={isCancelButtonLoading}\n disabled={isCancelButtonDisabled}\n onClick={onClose}\n styleType={cancelButtonStyle}\n className={classNames?.cancelButton}\n style={slotStyles?.cancelButton}\n icon={cancelButtonIcon}\n >\n {~~cancelLabel~~}\n </Button>\n )}\n </div>\n );\n}\n"],"mappings":"~~yTAOA~~,SAAwB,EAAc,EAA2B,CAC/D,GAAM,CACJ,eAAiB,KACjB,cAAgB,KAChB,~~cAAc~~,~~OACd,cAAc,SACd,~~oBAAoB,EAAgB,QACpC,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,IAAA,GACnB,oBAAoB,EAAgB,QACpC,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,IAAA,GACnB,oBAAoB,GACpB,sBAAsB,GACtB,WAAW,GACX,eAAe,GACf,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,gBAAiB,CAAK,~~EAC/C~~,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,cACP,CAAC,GAAY,EAAO,oBACpB,GAAgB,EAAO,qBACvB,EACA,GAAY,IACd,EACA,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EATzC,SAAA,CAWG,CAAC,GACA,EAAC,EAAD,CACE,UAAW,EACX,SAAU,EACV,UAAW,EACX,KAAM,EAAW,OACjB,QAAS,EACT,UAAW,GAAY,aACvB,MAAO,GAAY,aACnB,KAAM,EAEL,SAAA,~~CACK~~,CAAA,EAET,CAAC,GACA,EAAC,EAAD,CACE,UAAW,EACX,SAAU,EACV,QAAS,EACT,UAAW,EACX,UAAW,GAAY,aACvB,MAAO,GAAY,aACnB,KAAM,EAEL,SAAA,~~CACK~~,CAAA,CAEP,GAET"}
1	+ {"version":3,"file":"actionButtons.mjs","names":[],"sources":["../../../../package/common/actionButtons/actionButtons.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport styles from './actionButtons.module.pcss';\nimport Button, { ButtonStyleType, ButtonType } from '../button';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { ActionButtonsProps } from './actionButtons.types';\nimport type { ActionButtonsLabels } from './actionButtons.types';\n\nconst DEFAULT_LABELS: Required<ActionButtonsLabels> = {\n submit: 'Save',\n cancel: 'Cancel',\n};\n\nexport default function ActionButtons(props: ActionButtonsProps) {\n const {\n onSubmit = () => null,\n onClose = () => null,\n labels,\n submitButtonStyle = ButtonStyleType.Primary,\n isSubmitButtonLoading = false,\n isSubmitButtonDisabled = false,\n submitButtonIcon = undefined,\n cancelButtonStyle = ButtonStyleType.Default,\n isCancelButtonLoading = false,\n isCancelButtonDisabled = false,\n cancelButtonIcon = undefined,\n hidePrimaryButton = false,\n hideSecondaryButton = false,\n noMargin = false,\n stackButtons = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('ActionButtons', props);\n const text = useLabels('ActionButtons', labels, DEFAULT_LABELS);\n return (\n <div\n {...rest}\n className={cx(\n styles.actionButtons,\n !noMargin && styles.actionButtonsMargin,\n stackButtons && styles.actionButtonsStacked,\n className,\n classNames?.root,\n )}\n style={{ ...style, ...slotStyles?.root }}\n >\n {!hidePrimaryButton && (\n <Button\n isLoading={isSubmitButtonLoading}\n disabled={isSubmitButtonDisabled}\n styleType={submitButtonStyle}\n type={ButtonType.Submit}\n onClick={onSubmit}\n className={classNames?.submitButton}\n style={slotStyles?.submitButton}\n icon={submitButtonIcon}\n >\n {text.submit}\n </Button>\n )}\n {!hideSecondaryButton && (\n <Button\n isLoading={isCancelButtonLoading}\n disabled={isCancelButtonDisabled}\n onClick={onClose}\n styleType={cancelButtonStyle}\n className={classNames?.cancelButton}\n style={slotStyles?.cancelButton}\n icon={cancelButtonIcon}\n >\n {text.cancel}\n </Button>\n )}\n </div>\n );\n}\n"],"mappings":"qXAQA,IAAM,EAAgD,CACpD,OAAQ,OACR,OAAQ,QACV,EAEA,SAAwB,EAAc,EAA2B,CAC/D,GAAM,CACJ,eAAiB,KACjB,cAAgB,KAChB,SACA,oBAAoB,EAAgB,QACpC,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,IAAA,GACnB,oBAAoB,EAAgB,QACpC,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,IAAA,GACnB,oBAAoB,GACpB,sBAAsB,GACtB,WAAW,GACX,eAAe,GACf,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,gBAAiB,CAAK,EACzC,EAAO,EAAU,gBAAiB,EAAQ,CAAc,EAC9D,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,cACP,CAAC,GAAY,EAAO,oBACpB,GAAgB,EAAO,qBACvB,EACA,GAAY,IACd,EACA,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EATzC,SAAA,CAWG,CAAC,GACA,EAAC,EAAD,CACE,UAAW,EACX,SAAU,EACV,UAAW,EACX,KAAM,EAAW,OACjB,QAAS,EACT,UAAW,GAAY,aACvB,MAAO,GAAY,aACnB,KAAM,EAEL,SAAA,EAAK,MACA,CAAA,EAET,CAAC,GACA,EAAC,EAAD,CACE,UAAW,EACX,SAAU,EACV,QAAS,EACT,UAAW,EACX,UAAW,GAAY,aACvB,MAAO,GAAY,aACnB,KAAM,EAEL,SAAA,EAAK,MACA,CAAA,CAEP,GAET"}

package/dist/esm/common/alert/alert.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{renderIcon as t}from"../utils/renderIcon.mjs";import n from"../actionIcon/actionIcon.mjs";import{AlertStyleType as r}from"./alert.types.mjs";import i from"./alert.module.mjs";import a from"classnames";import{faBell as o,faCircleCheck as s,faCircleInfo as c,faCircleXmark as l,faTriangleExclamation as u,faXmark as d}from"@fortawesome/free-solid-svg-icons";import{jsx as f,jsxs as p}from"react/jsx-runtime";var m={[r.Default]:o,[r.Info]:c,[r.Success]:s,[r.Warn]:u,[r.Error]:l},h={[r.Default]:i.alertStyleDefault,[r.Info]:i.alertStyleInfo,[r.Success]:i.alertStyleSuccess,[r.Warn]:i.alertStyleWarn,[r.Error]:i.alertStyleError};function g(o){let{title:s,children:c=null,styleType:l=r.Default,icon:u,hideIcon:g=!1,onClose:_,className:v,style:y,classNames:b,styles:x,...S}=e(`Alert`,o);return p(`div`,{...S,role:`alert`,className:a(i.alert,h[l],b?.root,v),style:{...y,...x?.root},children:[!g&&t(u??m[l],{className:a(i.alertIcon,b?.icon),style:x?.icon}),p(`div`,{className:a(i.alertContent,b?.content),style:x?.content,children:[s&&f(`div`,{className:a(i.alertTitle,b?.title),style:x?.title,children:s}),c&&f(`div`,{className:a(i.alertDescription,b?.description),style:x?.description,children:c})]}),_&&f(n,{icon:d,onClick:_,className:a(i.alertCloseButton,b?.closeButton),style:x?.closeButton,"aria-label":`Dismiss`})]})}export{g as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{renderIcon as n}from"../utils/renderIcon.mjs";import r from"../actionIcon/actionIcon.mjs";import{AlertStyleType as i}from"./alert.types.mjs";import a from"./alert.module.mjs";import o from"classnames";import{faBell as s,faCircleCheck as c,faCircleInfo as l,faCircleXmark as u,faTriangleExclamation as d,faXmark as f}from"@fortawesome/free-solid-svg-icons";import{jsx as p,jsxs as m}from"react/jsx-runtime";var h={[i.Default]:s,[i.Info]:l,[i.Success]:c,[i.Warn]:d,[i.Error]:u},g={[i.Default]:a.alertStyleDefault,[i.Info]:a.alertStyleInfo,[i.Success]:a.alertStyleSuccess,[i.Warn]:a.alertStyleWarn,[i.Error]:a.alertStyleError},_={dismiss:`Dismiss`};function v(s){let{title:c,children:l=null,styleType:u=i.Default,icon:d,hideIcon:v=!1,onClose:y,className:b,style:x,classNames:S,styles:C,labels:w,...T}=e(`Alert`,s),E=t(`Alert`,w,_);return m(`div`,{...T,role:`alert`,className:o(a.alert,g[u],S?.root,b),style:{...x,...C?.root},children:[!v&&n(d??h[u],{className:o(a.alertIcon,S?.icon),style:C?.icon}),m(`div`,{className:o(a.alertContent,S?.content),style:C?.content,children:[c&&p(`div`,{className:o(a.alertTitle,S?.title),style:C?.title,children:c}),l&&p(`div`,{className:o(a.alertDescription,S?.description),style:C?.description,children:l})]}),y&&p(r,{icon:f,onClick:y,className:o(a.alertCloseButton,S?.closeButton),style:C?.closeButton,"aria-label":E.dismiss})]})}export{v as default};
 //# sourceMappingURL=alert.mjs.map

package/dist/esm/common/alert/alert.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.mjs","names":[],"sources":["../../../../package/common/alert/alert.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport {\n faCircleInfo,\n faCircleCheck,\n faCircleXmark,\n faTriangleExclamation,\n faBell,\n faXmark,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport { AlertStyleType } from './alert.types';\nimport type { AlertProps } from './alert.types';\nimport styles from './alert.module.pcss';\nimport ActionIcon from '../actionIcon';\nimport { useComponentDefaults } from '../configProvider';\nimport { renderIcon } from '../utils/renderIcon';\n\nconst ICON_BY_STYLE: Record<AlertStyleType, typeof faBell> = {\n [AlertStyleType.Default]: faBell,\n [AlertStyleType.Info]: faCircleInfo,\n [AlertStyleType.Success]: faCircleCheck,\n [AlertStyleType.Warn]: faTriangleExclamation,\n [AlertStyleType.Error]: faCircleXmark,\n};\n\nconst CLASS_BY_STYLE: Record<AlertStyleType, string> = {\n [AlertStyleType.Default]: styles.alertStyleDefault,\n [AlertStyleType.Info]: styles.alertStyleInfo,\n [AlertStyleType.Success]: styles.alertStyleSuccess,\n [AlertStyleType.Warn]: styles.alertStyleWarn,\n [AlertStyleType.Error]: styles.alertStyleError,\n};\n\nfunction Alert(props: AlertProps): ReactElement {\n const {\n title,\n children = null,\n styleType = AlertStyleType.Default,\n icon,\n hideIcon = false,\n onClose,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Alert', props);\n\n return (\n <div\n {...rest}\n role='alert'\n className={cx(styles.alert, CLASS_BY_STYLE[styleType], classNames?.root, className)}\n style={{ ...style, ...slotStyles?.root }}\n >\n {!hideIcon &&\n renderIcon(icon ?? ICON_BY_STYLE[styleType], {\n className: cx(styles.alertIcon, classNames?.icon),\n style: slotStyles?.icon,\n })}\n\n <div className={cx(styles.alertContent, classNames?.content)} style={slotStyles?.content}>\n {title && (\n <div className={cx(styles.alertTitle, classNames?.title)} style={slotStyles?.title}>\n {title}\n </div>\n )}\n {children && (\n <div className={cx(styles.alertDescription, classNames?.description)} style={slotStyles?.description}>\n {children}\n </div>\n )}\n </div>\n\n {onClose && (\n <ActionIcon\n icon={faXmark}\n onClick={onClose}\n className={cx(styles.alertCloseButton, classNames?.closeButton)}\n style={slotStyles?.closeButton}\n aria-label=~~'Dismiss'~~\n />\n )}\n </div>\n );\n}\n\nexport default Alert;\n"],"mappings":"~~+eAkBA~~,IAAM,EAAuD,EAC1D,EAAe,SAAU,GACzB,EAAe,MAAO,GACtB,EAAe,SAAU,GACzB,EAAe,MAAO,GACtB,EAAe,OAAQ,CAC1B,EAEM,EAAiD,EACpD,EAAe,SAAU,EAAO,mBAChC,EAAe,MAAO,EAAO,gBAC7B,EAAe,SAAU,EAAO,mBAChC,EAAe,MAAO,EAAO,gBAC7B,EAAe,OAAQ,EAAO,eACjC,EAEA,SAAS,EAAM,EAAiC,CAC9C,GAAM,CACJ,QACA,WAAW,KACX,YAAY,EAAe,QAC3B,OACA,WAAW,GACX,UACA,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,QAAS,CAAK,~~EAEvC~~,OACE,EAAC,MAAD,CACE,GAAI,EACJ,KAAK,QACL,UAAW,EAAG,EAAO,MAAO,EAAe,GAAY,GAAY,KAAM,CAAS,EAClF,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAJzC,SAAA,CAMG,CAAC,GACA,EAAW,GAAQ,EAAc,GAAY,CAC3C,UAAW,EAAG,EAAO,UAAW,GAAY,IAAI,EAChD,MAAO,GAAY,IACrB,CAAC,EAEH,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,aAAc,GAAY,OAAO,EAAG,MAAO,GAAY,QAAjF,SAAA,CACG,GACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,WAAY,GAAY,KAAK,EAAG,MAAO,GAAY,MAC1E,SAAA,CACE,CAAA,EAEN,GACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,iBAAkB,GAAY,WAAW,EAAG,MAAO,GAAY,YACtF,UACE,CAAA,CAEJ,IAEJ,GACC,EAAC,EAAD,CACE,KAAM,EACN,QAAS,EACT,UAAW,EAAG,EAAO,iBAAkB,GAAY,WAAW,EAC9D,MAAO,GAAY,YACnB,~~aAAW~~,~~SACZ~~,CAAA,CAEA,GAET"}
1	+ {"version":3,"file":"alert.mjs","names":[],"sources":["../../../../package/common/alert/alert.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport {\n faCircleInfo,\n faCircleCheck,\n faCircleXmark,\n faTriangleExclamation,\n faBell,\n faXmark,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport { AlertStyleType } from './alert.types';\nimport type { AlertLabels, AlertProps } from './alert.types';\nimport styles from './alert.module.pcss';\nimport ActionIcon from '../actionIcon';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { renderIcon } from '../utils/renderIcon';\n\nconst ICON_BY_STYLE: Record<AlertStyleType, typeof faBell> = {\n [AlertStyleType.Default]: faBell,\n [AlertStyleType.Info]: faCircleInfo,\n [AlertStyleType.Success]: faCircleCheck,\n [AlertStyleType.Warn]: faTriangleExclamation,\n [AlertStyleType.Error]: faCircleXmark,\n};\n\nconst CLASS_BY_STYLE: Record<AlertStyleType, string> = {\n [AlertStyleType.Default]: styles.alertStyleDefault,\n [AlertStyleType.Info]: styles.alertStyleInfo,\n [AlertStyleType.Success]: styles.alertStyleSuccess,\n [AlertStyleType.Warn]: styles.alertStyleWarn,\n [AlertStyleType.Error]: styles.alertStyleError,\n};\n\nconst DEFAULT_LABELS: Required<AlertLabels> = {\n dismiss: 'Dismiss',\n};\n\nfunction Alert(props: AlertProps): ReactElement {\n const {\n title,\n children = null,\n styleType = AlertStyleType.Default,\n icon,\n hideIcon = false,\n onClose,\n className,\n style,\n classNames,\n styles: slotStyles,\n labels,\n ...rest\n } = useComponentDefaults('Alert', props);\n const text = useLabels('Alert', labels, DEFAULT_LABELS);\n\n return (\n <div\n {...rest}\n role='alert'\n className={cx(styles.alert, CLASS_BY_STYLE[styleType], classNames?.root, className)}\n style={{ ...style, ...slotStyles?.root }}\n >\n {!hideIcon &&\n renderIcon(icon ?? ICON_BY_STYLE[styleType], {\n className: cx(styles.alertIcon, classNames?.icon),\n style: slotStyles?.icon,\n })}\n\n <div className={cx(styles.alertContent, classNames?.content)} style={slotStyles?.content}>\n {title && (\n <div className={cx(styles.alertTitle, classNames?.title)} style={slotStyles?.title}>\n {title}\n </div>\n )}\n {children && (\n <div className={cx(styles.alertDescription, classNames?.description)} style={slotStyles?.description}>\n {children}\n </div>\n )}\n </div>\n\n {onClose && (\n <ActionIcon\n icon={faXmark}\n onClick={onClose}\n className={cx(styles.alertCloseButton, classNames?.closeButton)}\n style={slotStyles?.closeButton}\n aria-label={text.dismiss}\n />\n )}\n </div>\n );\n}\n\nexport default Alert;\n"],"mappings":"2iBAkBA,IAAM,EAAuD,EAC1D,EAAe,SAAU,GACzB,EAAe,MAAO,GACtB,EAAe,SAAU,GACzB,EAAe,MAAO,GACtB,EAAe,OAAQ,CAC1B,EAEM,EAAiD,EACpD,EAAe,SAAU,EAAO,mBAChC,EAAe,MAAO,EAAO,gBAC7B,EAAe,SAAU,EAAO,mBAChC,EAAe,MAAO,EAAO,gBAC7B,EAAe,OAAQ,EAAO,eACjC,EAEM,EAAwC,CAC5C,QAAS,SACX,EAEA,SAAS,EAAM,EAAiC,CAC9C,GAAM,CACJ,QACA,WAAW,KACX,YAAY,EAAe,QAC3B,OACA,WAAW,GACX,UACA,YACA,QACA,aACA,OAAQ,EACR,SACA,GAAG,GACD,EAAqB,QAAS,CAAK,EACjC,EAAO,EAAU,QAAS,EAAQ,CAAc,EAEtD,OACE,EAAC,MAAD,CACE,GAAI,EACJ,KAAK,QACL,UAAW,EAAG,EAAO,MAAO,EAAe,GAAY,GAAY,KAAM,CAAS,EAClF,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAJzC,SAAA,CAMG,CAAC,GACA,EAAW,GAAQ,EAAc,GAAY,CAC3C,UAAW,EAAG,EAAO,UAAW,GAAY,IAAI,EAChD,MAAO,GAAY,IACrB,CAAC,EAEH,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,aAAc,GAAY,OAAO,EAAG,MAAO,GAAY,QAAjF,SAAA,CACG,GACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,WAAY,GAAY,KAAK,EAAG,MAAO,GAAY,MAC1E,SAAA,CACE,CAAA,EAEN,GACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,iBAAkB,GAAY,WAAW,EAAG,MAAO,GAAY,YACtF,UACE,CAAA,CAEJ,IAEJ,GACC,EAAC,EAAD,CACE,KAAM,EACN,QAAS,EACT,UAAW,EAAG,EAAO,iBAAkB,GAAY,WAAW,EAC9D,MAAO,GAAY,YACnB,aAAY,EAAK,OAClB,CAAA,CAEA,GAET"}

package/dist/esm/common/alert/alert.types.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.types.mjs","names":[],"sources":["../../../../package/common/alert/alert.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { IconContent } from '../types/icon.types';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\nexport enum AlertStyleType {\n Default = 'default',\n Info = 'info',\n Success = 'success',\n Warn = 'warn',\n Error = 'error',\n}\n\nexport type AlertSlots = 'root' \| 'icon' \| 'content' \| 'title' \| 'description' \| 'closeButton';\n\nexport interface AlertProps extends Omit<HtmlProps, 'title'> {\n title?: ReactNode;\n children?: ReactNode;\n styleType?: AlertStyleType;\n icon?: IconContent;\n hideIcon?: boolean;\n onClose?: () => void;\n className?: string;\n style?: CSSProperties;\n classNames?: SlotClassNames<AlertSlots>;\n styles?: SlotStyles<AlertSlots>;\n}\n"],"mappings":"AAIA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"alert.types.mjs","names":[],"sources":["../../../../package/common/alert/alert.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { IconContent } from '../types/icon.types';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\nexport enum AlertStyleType {\n Default = 'default',\n Info = 'info',\n Success = 'success',\n Warn = 'warn',\n Error = 'error',\n}\n\nexport type AlertSlots = 'root' \| 'icon' \| 'content' \| 'title' \| 'description' \| 'closeButton';\n\n/** Text Alert renders of its own, for translating it. /\nexport interface AlertLabels {\n /* Close button, read out by screen readers. /\n dismiss?: string;\n}\n\nexport interface AlertProps extends Omit<HtmlProps, 'title'> {\n title?: ReactNode;\n children?: ReactNode;\n styleType?: AlertStyleType;\n icon?: IconContent;\n hideIcon?: boolean;\n onClose?: () => void;\n className?: string;\n style?: CSSProperties;\n classNames?: SlotClassNames<AlertSlots>;\n styles?: SlotStyles<AlertSlots>;\n /* Overrides the text Alert renders of its own. Merged per key. */\n labels?: AlertLabels;\n}\n"],"mappings":"AAIA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}

package/dist/esm/common/breadcrumb/breadcrumb.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{renderIcon as t}from"../utils/renderIcon.mjs";import n from"../interactableDiv/index.mjs";import r from"../actionIcon/actionIcon.mjs";import i from"../floatingMenu/floatingMenu.mjs";import a from"./breadcrumb.module.mjs";import{useState as o}from"react";import s from"classnames";import{FontAwesomeIcon as c}from"@fortawesome/react-fontawesome";import{faChevronRight as l,faEllipsis as u}from"@fortawesome/free-solid-svg-icons";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";function m(e,t){let n=e.map((e,t)=>({item:e,index:t}));if(!t||e.length<=t)return{leading:n,hidden:[],trailing:[]};let r=Math.max(1,t-2),i=e.length-1-r;return i<=0?{leading:n,hidden:[],trailing:[]}:{leading:n.slice(0,1),hidden:n.slice(1,1+i),trailing:n.slice(1+i)}}function h(t){let{items:n=[],separator:d,maxItems:h,"aria-label":_=`Breadcrumb`,className:v,style:y,classNames:b,styles:x,...S}=e(`Breadcrumb`,t),[C,w]=o(!1),{leading:T,hidden:E,trailing:D}=m(n,h),O=n.length-1;function k(e){return e===O?null:f(`span`,{className:s(a.breadcrumbSeparator,b?.separator),style:x?.separator,children:d??f(c,{icon:l})})}function A({item:e,index:t}){return p(`li`,{className:s(a.breadcrumbItem,b?.item),style:x?.item,children:[g(e,t===O,a,b,x),k(t)]},e.id??t)}return f(`nav`,{...S,"aria-label":_,className:s(a.breadcrumb,b?.root,v),style:{...y,...x?.root},children:p(`ol`,{className:s(a.breadcrumbList,b?.list),style:x?.list,children:[T.map(A),E.length>0&&p(`li`,{className:s(a.breadcrumbItem,b?.item),style:x?.item,children:[f(i,{isOpen:C,onOpenChange:w,dontCloseOnChildClick:!0,content:f(`ul`,{className:s(a.breadcrumbHiddenList,b?.hiddenList),style:x?.hiddenList,children:E.map(({item:e,index:t})=>f(`li`,{className:s(a.breadcrumbHiddenItem,b?.hiddenItem),style:x?.hiddenItem,children:g({...e,onClick:t=>{e.onClick?.(t),w(!1)}},!1,a,b,x)},e.id??t))}),children:f(r,{icon:u,title:`Show hidden breadcrumbs`,"aria-label":`Show hidden breadcrumbs`,className:s(a.breadcrumbEllipsis,b?.ellipsis),style:x?.ellipsis})}),k(E[E.length-1].index)]}),D.map(A)]})})}function g(e,r,i,a,o){let c=p(d,{children:[e.icon?t(e.icon,{className:s(i.breadcrumbIcon,a?.icon),style:o?.icon}):null,e.label]});return r?f(`span`,{"aria-current":`page`,className:s(i.breadcrumbCurrent,a?.current),style:o?.current,children:c}):e.disabled?f(`span`,{className:s(i.breadcrumbLink,i.breadcrumbLinkDisabled,a?.link),style:o?.link,children:c}):e.href?f(`a`,{href:e.href,onClick:e.onClick,className:s(i.breadcrumbLink,a?.link),style:o?.link,children:c}):e.onClick?f(n,{onClick:e.onClick,className:s(i.breadcrumbLink,a?.link),style:o?.link,children:c}):f(`span`,{className:s(i.breadcrumbLink,i.breadcrumbLinkDisabled,a?.link),style:o?.link,children:c})}export{h as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{renderIcon as n}from"../utils/renderIcon.mjs";import r from"../interactableDiv/index.mjs";import i from"../actionIcon/actionIcon.mjs";import a from"../floatingMenu/floatingMenu.mjs";import o from"./breadcrumb.module.mjs";import{useState as s}from"react";import c from"classnames";import{FontAwesomeIcon as l}from"@fortawesome/react-fontawesome";import{faChevronRight as u,faEllipsis as d}from"@fortawesome/free-solid-svg-icons";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";var h={showHidden:`Show hidden breadcrumbs`};function g(e,t){let n=e.map((e,t)=>({item:e,index:t}));if(!t||e.length<=t)return{leading:n,hidden:[],trailing:[]};let r=Math.max(1,t-2),i=e.length-1-r;return i<=0?{leading:n,hidden:[],trailing:[]}:{leading:n.slice(0,1),hidden:n.slice(1,1+i),trailing:n.slice(1+i)}}function _(n){let{items:r=[],separator:f,maxItems:_,"aria-label":y=`Breadcrumb`,className:b,style:x,classNames:S,styles:C,labels:w,...T}=e(`Breadcrumb`,n),E=t(`Breadcrumb`,w,h),[D,O]=s(!1),{leading:k,hidden:A,trailing:j}=g(r,_),M=r.length-1;function N(e){return e===M?null:p(`span`,{className:c(o.breadcrumbSeparator,S?.separator),style:C?.separator,children:f??p(l,{icon:u})})}function P({item:e,index:t}){return m(`li`,{className:c(o.breadcrumbItem,S?.item),style:C?.item,children:[v(e,t===M,o,S,C),N(t)]},e.id??t)}return p(`nav`,{...T,"aria-label":y,className:c(o.breadcrumb,S?.root,b),style:{...x,...C?.root},children:m(`ol`,{className:c(o.breadcrumbList,S?.list),style:C?.list,children:[k.map(P),A.length>0&&m(`li`,{className:c(o.breadcrumbItem,S?.item),style:C?.item,children:[p(a,{isOpen:D,onOpenChange:O,dontCloseOnChildClick:!0,content:p(`ul`,{className:c(o.breadcrumbHiddenList,S?.hiddenList),style:C?.hiddenList,children:A.map(({item:e,index:t})=>p(`li`,{className:c(o.breadcrumbHiddenItem,S?.hiddenItem),style:C?.hiddenItem,children:v({...e,onClick:t=>{e.onClick?.(t),O(!1)}},!1,o,S,C)},e.id??t))}),children:p(i,{icon:d,title:E.showHidden,"aria-label":E.showHidden,className:c(o.breadcrumbEllipsis,S?.ellipsis),style:C?.ellipsis})}),N(A[A.length-1].index)]}),j.map(P)]})})}function v(e,t,i,a,o){let s=m(f,{children:[e.icon?n(e.icon,{className:c(i.breadcrumbIcon,a?.icon),style:o?.icon}):null,e.label]});return t?p(`span`,{"aria-current":`page`,className:c(i.breadcrumbCurrent,a?.current),style:o?.current,children:s}):e.disabled?p(`span`,{className:c(i.breadcrumbLink,i.breadcrumbLinkDisabled,a?.link),style:o?.link,children:s}):e.href?p(`a`,{href:e.href,onClick:e.onClick,className:c(i.breadcrumbLink,a?.link),style:o?.link,children:s}):e.onClick?p(r,{onClick:e.onClick,className:c(i.breadcrumbLink,a?.link),style:o?.link,children:s}):p(`span`,{className:c(i.breadcrumbLink,i.breadcrumbLinkDisabled,a?.link),style:o?.link,children:s})}export{_ as default};
 //# sourceMappingURL=breadcrumb.mjs.map

package/dist/esm/common/breadcrumb/breadcrumb.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb.mjs","names":[],"sources":["../../../../package/common/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronRight, faEllipsis } from '@fortawesome/free-solid-svg-icons';\n\nimport InteractableDiv from '../interactableDiv';\nimport ActionIcon from '../actionIcon';\nimport FloatingMenu from '../floatingMenu';\nimport { useComponentDefaults } from '../configProvider';\nimport type { BreadcrumbItem, BreadcrumbProps } from './breadcrumb.types';\n\nimport styles from './breadcrumb.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\ninterface IndexedItem {\n item: BreadcrumbItem;\n index: number;\n}\n\nfunction getGroups(items: BreadcrumbItem[], maxItems?: number) {\n const indexed = items.map((item, index) => ({ item, index }));\n if (!maxItems \|\| items.length <= maxItems) {\n return { leading: indexed, hidden: [] as IndexedItem[], trailing: [] as IndexedItem[] };\n }\n\n const trailingCount = Math.max(1, maxItems - 2);\n const hiddenCount = items.length - 1 - trailingCount;\n if (hiddenCount <= 0) {\n return { leading: indexed, hidden: [] as IndexedItem[], trailing: [] as IndexedItem[] };\n }\n\n return {\n leading: indexed.slice(0, 1),\n hidden: indexed.slice(1, 1 + hiddenCount),\n trailing: indexed.slice(1 + hiddenCount),\n };\n}\n\nfunction Breadcrumb(props: BreadcrumbProps): ReactElement {\n const {\n items = [],\n separator,\n maxItems,\n 'aria-label': ariaLabel = 'Breadcrumb',\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Breadcrumb', props);\n\n const [isHiddenMenuOpen, setIsHiddenMenuOpen] = useState(false);\n const { leading, hidden, trailing } = getGroups(items, maxItems);\n const lastIndex = items.length - 1;\n\n function renderSeparatorAfter(index: number) {\n if (index === lastIndex) return null;\n return (\n <span className={cx(styles.breadcrumbSeparator, classNames?.separator)} style={slotStyles?.separator}>\n {separator ?? <FontAwesomeIcon icon={faChevronRight} />}\n </span>\n );\n }\n\n function renderItem({ item, index }: IndexedItem) {\n return (\n <li key={item.id ?? index} className={cx(styles.breadcrumbItem, classNames?.item)} style={slotStyles?.item}>\n {renderCrumb(item, index === lastIndex, styles, classNames, slotStyles)}\n {renderSeparatorAfter(index)}\n </li>\n );\n }\n\n return (\n <nav\n {...rest}\n aria-label={ariaLabel}\n className={cx(styles.breadcrumb, classNames?.root, className)}\n style={{ ...style, ...slotStyles?.root }}\n >\n <ol className={cx(styles.breadcrumbList, classNames?.list)} style={slotStyles?.list}>\n {leading.map(renderItem)}\n\n {hidden.length > 0 && (\n <li className={cx(styles.breadcrumbItem, classNames?.item)} style={slotStyles?.item}>\n <FloatingMenu\n isOpen={isHiddenMenuOpen}\n onOpenChange={setIsHiddenMenuOpen}\n dontCloseOnChildClick\n content={\n <ul className={cx(styles.breadcrumbHiddenList, classNames?.hiddenList)} style={slotStyles?.hiddenList}>\n {hidden.map(({ item, index }) => (\n <li\n key={item.id ?? index}\n className={cx(styles.breadcrumbHiddenItem, classNames?.hiddenItem)}\n style={slotStyles?.hiddenItem}\n >\n {renderCrumb(\n {\n ...item,\n onClick: (event) => {\n item.onClick?.(event);\n setIsHiddenMenuOpen(false);\n },\n },\n false,\n styles,\n classNames,\n slotStyles,\n )}\n </li>\n ))}\n </ul>\n }\n >\n <ActionIcon\n icon={faEllipsis}\n title=~~'Show hidden breadcrumbs'~~\n aria-label=~~'Show hidden breadcrumbs'~~\n className={cx(styles.breadcrumbEllipsis, classNames?.ellipsis)}\n style={slotStyles?.ellipsis}\n />\n </FloatingMenu>\n {renderSeparatorAfter(hidden[hidden.length - 1].index)}\n </li>\n )}\n\n {trailing.map(renderItem)}\n </ol>\n </nav>\n );\n}\n\nfunction renderCrumb(\n item: BreadcrumbItem,\n isCurrent: boolean,\n styles: Record<string, string>,\n classNames: BreadcrumbProps['classNames'],\n slotStyles: BreadcrumbProps['styles'],\n) {\n const content = (\n <>\n {item.icon\n ? renderIcon(item.icon, {\n className: cx(styles.breadcrumbIcon, classNames?.icon),\n style: slotStyles?.icon,\n })\n : null}\n {item.label}\n </>\n );\n\n if (isCurrent) {\n return (\n <span\n aria-current='page'\n className={cx(styles.breadcrumbCurrent, classNames?.current)}\n style={slotStyles?.current}\n >\n {content}\n </span>\n );\n }\n\n if (item.disabled) {\n return (\n <span\n className={cx(styles.breadcrumbLink, styles.breadcrumbLinkDisabled, classNames?.link)}\n style={slotStyles?.link}\n >\n {content}\n </span>\n );\n }\n\n if (item.href) {\n return (\n <a\n href={item.href}\n onClick={item.onClick}\n className={cx(styles.breadcrumbLink, classNames?.link)}\n style={slotStyles?.link}\n >\n {content}\n </a>\n );\n }\n\n if (item.onClick) {\n return (\n <InteractableDiv\n onClick={item.onClick}\n className={cx(styles.breadcrumbLink, classNames?.link)}\n style={slotStyles?.link}\n >\n {content}\n </InteractableDiv>\n );\n }\n\n return (\n <span\n className={cx(styles.breadcrumbLink, styles.breadcrumbLinkDisabled, classNames?.link)}\n style={slotStyles?.link}\n >\n {content}\n </span>\n );\n}\n\nexport default Breadcrumb;\n"],"mappings":"~~qkBAoBA~~,SAAS,EAAU,EAAyB,EAAmB,CAC7D,IAAM,EAAU,EAAM,KAAK,EAAM,KAAW,CAAE,OAAM,OAAM,EAAE,EAC5D,GAAI,CAAC,GAAY,EAAM,QAAU,EAC/B,MAAO,CAAE,QAAS,EAAS,OAAQ,CAAC,EAAoB,SAAU,CAAC,CAAmB,EAGxF,IAAM,EAAgB,KAAK,IAAI,EAAG,EAAW,CAAC,EACxC,EAAc,EAAM,OAAS,EAAI,EAKvC,OAJI,GAAe,EACV,CAAE,QAAS,EAAS,OAAQ,CAAC,EAAoB,SAAU,CAAC,CAAmB,EAGjF,CACL,QAAS,EAAQ,MAAM,EAAG,CAAC,EAC3B,OAAQ,EAAQ,MAAM,EAAG,EAAI,CAAW,EACxC,SAAU,EAAQ,MAAM,EAAI,CAAW,CACzC,CACF,CAEA,SAAS,EAAW,EAAsC,CACxD,GAAM,CACJ,QAAQ,CAAC,EACT,YACA,WACA,aAAc,EAAY,aAC1B,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,aAAc,CAAK,~~EAEtC~~,CAAC,EAAkB,GAAuB,EAAS,EAAK,EACxD,CAAE,UAAS,SAAQ,YAAa,EAAU,EAAO,CAAQ,EACzD,EAAY,EAAM,OAAS,EAEjC,SAAS,EAAqB,EAAe,CAE3C,OADI,IAAU,EAAkB,KAE9B,EAAC,OAAD,CAAM,UAAW,EAAG,EAAO,oBAAqB,GAAY,SAAS,EAAG,MAAO,GAAY,UACxF,SAAA,GAAa,EAAC,EAAD,CAAiB,KAAM,CAAiB,CAAA,CAClD,CAAA,CAEV,CAEA,SAAS,EAAW,CAAE,OAAM,SAAsB,CAChD,OACE,EAAC,KAAD,CAA2B,UAAW,EAAG,EAAO,eAAgB,GAAY,IAAI,EAAG,MAAO,GAAY,KAAtG,SAAA,CACG,EAAY,EAAM,IAAU,EAAW,EAAQ,EAAY,CAAU,EACrE,EAAqB,CAAK,CACzB,CAHK,EAAA,EAAK,IAAM,CAGhB,CAER,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,aAAY,EACZ,UAAW,EAAG,EAAO,WAAY,GAAY,KAAM,CAAS,EAC5D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAEvC,SAAA,EAAC,KAAD,CAAI,UAAW,EAAG,EAAO,eAAgB,GAAY,IAAI,EAAG,MAAO,GAAY,KAA/E,SAAA,CACG,EAAQ,IAAI,CAAU,EAEtB,EAAO,OAAS,GACf,EAAC,KAAD,CAAI,UAAW,EAAG,EAAO,eAAgB,GAAY,IAAI,EAAG,MAAO,GAAY,KAA/E,SAAA,CACE,EAAC,EAAD,CACE,OAAQ,EACR,aAAc,EACd,sBAAA,GACA,QACE,EAAC,KAAD,CAAI,UAAW,EAAG,EAAO,qBAAsB,GAAY,UAAU,EAAG,MAAO,GAAY,WACxF,SAAA,EAAO,KAAK,CAAE,OAAM,WACnB,EAAC,KAAD,CAEE,UAAW,EAAG,EAAO,qBAAsB,GAAY,UAAU,EACjE,MAAO,GAAY,WAElB,SAAA,EACC,CACE,GAAG,EACH,QAAU,GAAU,CAClB,EAAK,UAAU,CAAK,EACpB,EAAoB,EAAK,CAC3B,CACF,EACA,GACA,EACA,EACA,CACF,CACE,EAjBG,EAAK,IAAM,CAiBd,CACL,CACC,CAAA,EAGN,SAAA,EAAC,EAAD,CACE,KAAM,EACN,~~MAAM~~,~~0BACN~~,~~aAAW~~,~~0BACX~~,UAAW,EAAG,EAAO,mBAAoB,GAAY,QAAQ,EAC7D,MAAO,GAAY,QACpB,CAAA,CACW,CAAA,EACb,EAAqB,EAAO,EAAO,OAAS,EAAE,CAAC,KAAK,CACnD,IAGL,EAAS,IAAI,CAAU,CACtB,GACD,CAAA,CAET,CAEA,SAAS,EACP,EACA,EACA,EACA,EACA,EACA,CACA,IAAM,EACJ,EAAA,EAAA,CAAA,SAAA,CACG,EAAK,KACF,EAAW,EAAK,KAAM,CACpB,UAAW,EAAG,EAAO,eAAgB,GAAY,IAAI,EACrD,MAAO,GAAY,IACrB,CAAC,EACD,KACH,EAAK,KACN,CAAA,CAAA,EAmDJ,OAhDI,EAEA,EAAC,OAAD,CACE,eAAa,OACb,UAAW,EAAG,EAAO,kBAAmB,GAAY,OAAO,EAC3D,MAAO,GAAY,QAElB,SAAA,CACG,CAAA,EAIN,EAAK,SAEL,EAAC,OAAD,CACE,UAAW,EAAG,EAAO,eAAgB,EAAO,uBAAwB,GAAY,IAAI,EACpF,MAAO,GAAY,KAElB,SAAA,CACG,CAAA,EAIN,EAAK,KAEL,EAAC,IAAD,CACE,KAAM,EAAK,KACX,QAAS,EAAK,QACd,UAAW,EAAG,EAAO,eAAgB,GAAY,IAAI,EACrD,MAAO,GAAY,KAElB,SAAA,CACA,CAAA,EAIH,EAAK,QAEL,EAAC,EAAD,CACE,QAAS,EAAK,QACd,UAAW,EAAG,EAAO,eAAgB,GAAY,IAAI,EACrD,MAAO,GAAY,KAElB,SAAA,CACc,CAAA,EAKnB,EAAC,OAAD,CACE,UAAW,EAAG,EAAO,eAAgB,EAAO,uBAAwB,GAAY,IAAI,EACpF,MAAO,GAAY,KAElB,SAAA,CACG,CAAA,CAEV"}
1	+ {"version":3,"file":"breadcrumb.mjs","names":[],"sources":["../../../../package/common/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronRight, faEllipsis } from '@fortawesome/free-solid-svg-icons';\n\nimport InteractableDiv from '../interactableDiv';\nimport ActionIcon from '../actionIcon';\nimport FloatingMenu from '../floatingMenu';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { BreadcrumbItem, BreadcrumbLabels, BreadcrumbProps } from './breadcrumb.types';\n\nimport styles from './breadcrumb.module.pcss';\nimport { renderIcon } from '../utils/renderIcon';\n\ninterface IndexedItem {\n item: BreadcrumbItem;\n index: number;\n}\n\nconst DEFAULT_LABELS: Required<BreadcrumbLabels> = {\n showHidden: 'Show hidden breadcrumbs',\n};\n\nfunction getGroups(items: BreadcrumbItem[], maxItems?: number) {\n const indexed = items.map((item, index) => ({ item, index }));\n if (!maxItems \|\| items.length <= maxItems) {\n return { leading: indexed, hidden: [] as IndexedItem[], trailing: [] as IndexedItem[] };\n }\n\n const trailingCount = Math.max(1, maxItems - 2);\n const hiddenCount = items.length - 1 - trailingCount;\n if (hiddenCount <= 0) {\n return { leading: indexed, hidden: [] as IndexedItem[], trailing: [] as IndexedItem[] };\n }\n\n return {\n leading: indexed.slice(0, 1),\n hidden: indexed.slice(1, 1 + hiddenCount),\n trailing: indexed.slice(1 + hiddenCount),\n };\n}\n\nfunction Breadcrumb(props: BreadcrumbProps): ReactElement {\n const {\n items = [],\n separator,\n maxItems,\n 'aria-label': ariaLabel = 'Breadcrumb',\n className,\n style,\n classNames,\n styles: slotStyles,\n labels,\n ...rest\n } = useComponentDefaults('Breadcrumb', props);\n const text = useLabels('Breadcrumb', labels, DEFAULT_LABELS);\n\n const [isHiddenMenuOpen, setIsHiddenMenuOpen] = useState(false);\n const { leading, hidden, trailing } = getGroups(items, maxItems);\n const lastIndex = items.length - 1;\n\n function renderSeparatorAfter(index: number) {\n if (index === lastIndex) return null;\n return (\n <span className={cx(styles.breadcrumbSeparator, classNames?.separator)} style={slotStyles?.separator}>\n {separator ?? <FontAwesomeIcon icon={faChevronRight} />}\n </span>\n );\n }\n\n function renderItem({ item, index }: IndexedItem) {\n return (\n <li key={item.id ?? index} className={cx(styles.breadcrumbItem, classNames?.item)} style={slotStyles?.item}>\n {renderCrumb(item, index === lastIndex, styles, classNames, slotStyles)}\n {renderSeparatorAfter(index)}\n </li>\n );\n }\n\n return (\n <nav\n {...rest}\n aria-label={ariaLabel}\n className={cx(styles.breadcrumb, classNames?.root, className)}\n style={{ ...style, ...slotStyles?.root }}\n >\n <ol className={cx(styles.breadcrumbList, classNames?.list)} style={slotStyles?.list}>\n {leading.map(renderItem)}\n\n {hidden.length > 0 && (\n <li className={cx(styles.breadcrumbItem, classNames?.item)} style={slotStyles?.item}>\n <FloatingMenu\n isOpen={isHiddenMenuOpen}\n onOpenChange={setIsHiddenMenuOpen}\n dontCloseOnChildClick\n content={\n <ul className={cx(styles.breadcrumbHiddenList, classNames?.hiddenList)} style={slotStyles?.hiddenList}>\n {hidden.map(({ item, index }) => (\n <li\n key={item.id ?? index}\n className={cx(styles.breadcrumbHiddenItem, classNames?.hiddenItem)}\n style={slotStyles?.hiddenItem}\n >\n {renderCrumb(\n {\n ...item,\n onClick: (event) => {\n item.onClick?.(event);\n setIsHiddenMenuOpen(false);\n },\n },\n false,\n styles,\n classNames,\n slotStyles,\n )}\n </li>\n ))}\n </ul>\n }\n >\n <ActionIcon\n icon={faEllipsis}\n title={text.showHidden}\n aria-label={text.showHidden}\n className={cx(styles.breadcrumbEllipsis, classNames?.ellipsis)}\n style={slotStyles?.ellipsis}\n />\n </FloatingMenu>\n {renderSeparatorAfter(hidden[hidden.length - 1].index)}\n </li>\n )}\n\n {trailing.map(renderItem)}\n </ol>\n </nav>\n );\n}\n\nfunction renderCrumb(\n item: BreadcrumbItem,\n isCurrent: boolean,\n styles: Record<string, string>,\n classNames: BreadcrumbProps['classNames'],\n slotStyles: BreadcrumbProps['styles'],\n) {\n const content = (\n <>\n {item.icon\n ? renderIcon(item.icon, {\n className: cx(styles.breadcrumbIcon, classNames?.icon),\n style: slotStyles?.icon,\n })\n : null}\n {item.label}\n </>\n );\n\n if (isCurrent) {\n return (\n <span\n aria-current='page'\n className={cx(styles.breadcrumbCurrent, classNames?.current)}\n style={slotStyles?.current}\n >\n {content}\n </span>\n );\n }\n\n if (item.disabled) {\n return (\n <span\n className={cx(styles.breadcrumbLink, styles.breadcrumbLinkDisabled, classNames?.link)}\n style={slotStyles?.link}\n >\n {content}\n </span>\n );\n }\n\n if (item.href) {\n return (\n <a\n href={item.href}\n onClick={item.onClick}\n className={cx(styles.breadcrumbLink, classNames?.link)}\n style={slotStyles?.link}\n >\n {content}\n </a>\n );\n }\n\n if (item.onClick) {\n return (\n <InteractableDiv\n onClick={item.onClick}\n className={cx(styles.breadcrumbLink, classNames?.link)}\n style={slotStyles?.link}\n >\n {content}\n </InteractableDiv>\n );\n }\n\n return (\n <span\n className={cx(styles.breadcrumbLink, styles.breadcrumbLinkDisabled, classNames?.link)}\n style={slotStyles?.link}\n >\n {content}\n </span>\n );\n}\n\nexport default Breadcrumb;\n"],"mappings":"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"}

package/dist/esm/common/carousel/carousel.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../interactableDiv/index.mjs";import n from"../actionIcon/actionIcon.mjs";import r from"./carousel.module.mjs";import i,{useEffect as a,useLayoutEffect as o,useRef as s,useState as c}from"react";import l from"classnames";import{faChevronLeft as ee,faChevronRight as te}from"@fortawesome/free-solid-svg-icons";import{Fragment as ne,jsx as u,jsxs as d}from"react/jsx-runtime";var f=10,re=.2;function p(p){let{children:ie,currentIndex:g,defaultIndex:ae=0,onChange:oe=()=>{},loop:se=!0,autoPlay:_=!1,autoPlayInterval:v=4e3,pauseOnHover:ce=!0,showArrows:le=!0,showDots:ue=!0,swipeable:de=!0,lazyRender:fe=!1,adaptiveHeight:y=!1,className:pe,style:me,classNames:b,styles:x,...S}=e(`Carousel`,p),C=i.useId(),w=i.Children.toArray(ie),T=w.length,E=se&&T>1,D=+!!E,O=E?[w[T-1],...w,w[0]]:w,k=g!==void 0,[he,ge]=c(()=>h(ae,T,E)),A=h(k?g:he,T,E),[j,M]=c(A+D),[_e,N]=c(!0),P=s(A),[ve,F]=c(!1),[ye,I]=c(!1),[be,L]=c(!1),R=s(null),z=s(null),B=s(null),V=O.length>0?100/O.length:100;o(()=>{let e=P.current;if(P.current=A,e===A)return;let t=O.length-1,n=j;E&&j===0?n=T:E&&j===t&&(n=1);let r=E&&e===T-1&&A===0,i=E&&e===0&&A===T-1,a;a=r?n+1:i?n-1:A+D;let o=z.current;n!==j&&o&&(o.style.transition=`none`,o.style.transform=m(n,0,V),o.offsetWidth,o.style.transition=``),N(!0),M(a)},[A]);let[H,xe]=c(()=>({min:A+D-1,max:A+D+1})),Se=Math.min(H.min,j-1),Ce=Math.max(H.max,j+1),[we,Te]=c(void 0);o(()=>{if(!y)return;let e=z.current?.children[j];if(!e)return;let t=()=>Te(e.offsetHeight);t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[y,j,T]),o(()=>{let e=B.current,t=e?.children[A];e&&t&&(e.scrollLeft=t.offsetLeft-(e.clientWidth-t.offsetWidth)/2)},[A,T]);function U(e){let t=h(e,T,E);k||ge(t),oe(t)}function W(){!E&&A>=T-1||U(A+1)}function G(){!E&&A<=0||U(A-1)}function Ee(e){e.target===e.currentTarget&&(xe({min:j-1,max:j+1}),E&&(j===0?(N(!1),M(T)):j===O.length-1&&(N(!1),M(1))))}let K=_&&ce,q=ve||ye||be;a(()=>{if(!_||T<=1||q)return;let e=setInterval(W,v);return()=>clearInterval(e)},[_,v,q,A,T]);let J=s(null);function De(e){!de||T<=1||(J.current={startX:e.clientX,startY:e.clientY,width:R.current?.getBoundingClientRect().width||1,axisLocked:!1,active:!0,offsetPercent:0})}function Oe(e){let t=J.current;if(!t||!t.active)return;let n=e.clientX-t.startX,r=e.clientY-t.startY;if(!t.axisLocked){if(Math.abs(n)<f&&Math.abs(r)<f)return;if(Math.abs(r)>Math.abs(n)){t.active=!1;return}t.axisLocked=!0,e.currentTarget.setPointerCapture?.(e.pointerId),L(!0),N(!1)}t.offsetPercent=n/t.width*100,z.current&&(z.current.style.transform=m(j,t.offsetPercent,V))}function Y(){let e=J.current;if(J.current=null,!e||!e.axisLocked){L(!1);return}N(!0),L(!1),z.current&&(z.current.style.transition=``,z.current.style.transform=m(j,0,V)),Math.abs(e.offsetPercent)>=re*100&&(e.offsetPercent<0?W():G())}function ke(e){e.defaultPrevented||z.current?.contains(e.target)||(e.key===`ArrowLeft`?(e.preventDefault(),G()):e.key===`ArrowRight`&&(e.preventDefault(),W()))}function Ae(e){let t=null;if(e.key===`ArrowLeft`?t=A-1:e.key===`ArrowRight`?t=A+1:e.key===`Home`?t=0:e.key===`End`&&(t=T-1),t===null)return;e.preventDefault();let n=h(t,T,E);U(n),(B.current?.children[n])?.focus()}let X=ue&&T>1,je=e=>`${C}-dot-${e}`,Z=e=>`${C}-slide-${e}`,Me=S[`aria-label`]!==void 0||S[`aria-labelledby`]!==void 0;function Ne(e){return X?{id:Z(e),role:`tabpanel`,"aria-labelledby":je(e)}:{id:Z(e),role:`group`,"aria-roledescription":`slide`,"aria-label":`${e+1} of ${T}`}}let Q=!E&&A<=0,$=!E&&A>=T-1,Pe=m(j,0,V);return d(`div`,{...S,ref:R,role:Me?`region`:`group`,"aria-roledescription":`carousel`,className:l(r.carousel,y&&r.carouselAdaptive,b?.root,pe),style:{height:y?we:void 0,...me,...x?.root},onMouseEnter:K?()=>F(!0):void 0,onMouseLeave:K?()=>F(!1):void 0,onFocus:K?()=>I(!0):void 0,onBlur:K?()=>I(!1):void 0,onKeyDown:ke,children:[u(`div`,{ref:z,className:l(r.carouselTrack,y&&r.carouselTrackAdaptive,b?.track),style:{width:`${O.length*100}%`,transform:Pe,transition:_e?void 0:`none`,...x?.track},"aria-live":_?`off`:`polite`,onTransitionEnd:Ee,onPointerDown:De,onPointerMove:Oe,onPointerUp:Y,onPointerCancel:Y,children:O.map((e,t)=>{let n=E&&(t===0||t===O.length-1),i=t-D,a=!n&&i===A,o=!fe||t>=Se&&t<=Ce;return u(`div`,{...n?{}:Ne(i),className:l(r.carouselSlide,b?.slide),style:{width:`${100/O.length}%`,...x?.slide},inert:!a||void 0,children:o?e:null},`carousel-slide-${t}`)})}),le&&T>1&&d(ne,{children:[u(n,{icon:ee,title:`Previous slide`,"aria-label":`Previous slide`,"aria-disabled":Q||void 0,onClick:()=>!Q&&G(),className:l(r.carouselPrevButton,Q&&r.carouselButtonDisabled,b?.prevButton),style:x?.prevButton}),u(n,{icon:te,title:`Next slide`,"aria-label":`Next slide`,"aria-disabled":$||void 0,onClick:()=>!$&&W(),className:l(r.carouselNextButton,$&&r.carouselButtonDisabled,b?.nextButton),style:x?.nextButton})]}),X&&u(`div`,{ref:B,role:`tablist`,"aria-label":`Slides`,className:l(r.carouselDots,b?.dots),style:x?.dots,onKeyDown:Ae,children:w.map((e,n)=>u(t,{id:je(n),role:`tab`,"aria-label":`Go to slide ${n+1}`,"aria-selected":n===A,"aria-controls":Z(n),tabIndex:n===A?0:-1,onClick:()=>U(n),className:l(r.carouselDot,n===A&&r.carouselDotActive,b?.dot),style:x?.dot},`carousel-dot-${n}`))})]})}function m(e,t,n){return`translateX(calc(${-e*n}% + ${n/100*t}%))`}function h(e,t,n){return t===0?0:n?(e%t+t)%t:Math.max(0,Math.min(t-1,e))}export{p as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import n from"../interactableDiv/index.mjs";import r from"../actionIcon/actionIcon.mjs";import i from"./carousel.module.mjs";import a,{useEffect as o,useLayoutEffect as s,useRef as c,useState as l}from"react";import u from"classnames";import{faChevronLeft as ee,faChevronRight as te}from"@fortawesome/free-solid-svg-icons";import{Fragment as ne,jsx as d,jsxs as f}from"react/jsx-runtime";var p=10,re=.2,ie={previous:`Previous slide`,next:`Next slide`,slides:`Slides`,goToSlide:e=>`Go to slide ${e}`};function m(m){let{children:ae,currentIndex:_,defaultIndex:oe=0,onChange:se=()=>{},loop:ce=!0,autoPlay:v=!1,autoPlayInterval:y=4e3,pauseOnHover:le=!0,showArrows:ue=!0,showDots:de=!0,swipeable:fe=!0,lazyRender:pe=!1,adaptiveHeight:b=!1,className:me,style:he,classNames:x,styles:S,labels:ge,...C}=e(`Carousel`,m),w=t(`Carousel`,ge,ie),_e=a.useId(),T=a.Children.toArray(ae),E=T.length,D=ce&&E>1,O=+!!D,k=D?[T[E-1],...T,T[0]]:T,A=_!==void 0,[ve,ye]=l(()=>g(oe,E,D)),j=g(A?_:ve,E,D),[M,N]=l(j+O),[be,P]=l(!0),F=c(j),[xe,I]=l(!1),[Se,L]=l(!1),[Ce,R]=l(!1),z=c(null),B=c(null),V=c(null),H=k.length>0?100/k.length:100;s(()=>{let e=F.current;if(F.current=j,e===j)return;let t=k.length-1,n=M;D&&M===0?n=E:D&&M===t&&(n=1);let r=D&&e===E-1&&j===0,i=D&&e===0&&j===E-1,a;a=r?n+1:i?n-1:j+O;let o=B.current;n!==M&&o&&(o.style.transition=`none`,o.style.transform=h(n,0,H),o.offsetWidth,o.style.transition=``),P(!0),N(a)},[j]);let[U,we]=l(()=>({min:j+O-1,max:j+O+1})),Te=Math.min(U.min,M-1),Ee=Math.max(U.max,M+1),[De,Oe]=l(void 0);s(()=>{if(!b)return;let e=B.current?.children[M];if(!e)return;let t=()=>Oe(e.offsetHeight);t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[b,M,E]),s(()=>{let e=V.current,t=e?.children[j];e&&t&&(e.scrollLeft=t.offsetLeft-(e.clientWidth-t.offsetWidth)/2)},[j,E]);function W(e){let t=g(e,E,D);A||ye(t),se(t)}function G(){!D&&j>=E-1||W(j+1)}function K(){!D&&j<=0||W(j-1)}function ke(e){e.target===e.currentTarget&&(we({min:M-1,max:M+1}),D&&(M===0?(P(!1),N(E)):M===k.length-1&&(P(!1),N(1))))}let q=v&&le,J=xe||Se||Ce;o(()=>{if(!v||E<=1||J)return;let e=setInterval(G,y);return()=>clearInterval(e)},[v,y,J,j,E]);let Y=c(null);function Ae(e){!fe||E<=1||(Y.current={startX:e.clientX,startY:e.clientY,width:z.current?.getBoundingClientRect().width||1,axisLocked:!1,active:!0,offsetPercent:0})}function je(e){let t=Y.current;if(!t||!t.active)return;let n=e.clientX-t.startX,r=e.clientY-t.startY;if(!t.axisLocked){if(Math.abs(n)<p&&Math.abs(r)<p)return;if(Math.abs(r)>Math.abs(n)){t.active=!1;return}t.axisLocked=!0,e.currentTarget.setPointerCapture?.(e.pointerId),R(!0),P(!1)}t.offsetPercent=n/t.width*100,B.current&&(B.current.style.transform=h(M,t.offsetPercent,H))}function X(){let e=Y.current;if(Y.current=null,!e||!e.axisLocked){R(!1);return}P(!0),R(!1),B.current&&(B.current.style.transition=``,B.current.style.transform=h(M,0,H)),Math.abs(e.offsetPercent)>=re*100&&(e.offsetPercent<0?G():K())}function Me(e){e.defaultPrevented||B.current?.contains(e.target)||(e.key===`ArrowLeft`?(e.preventDefault(),K()):e.key===`ArrowRight`&&(e.preventDefault(),G()))}function Ne(e){let t=null;if(e.key===`ArrowLeft`?t=j-1:e.key===`ArrowRight`?t=j+1:e.key===`Home`?t=0:e.key===`End`&&(t=E-1),t===null)return;e.preventDefault();let n=g(t,E,D);W(n),(V.current?.children[n])?.focus()}let Pe=de&&E>1,Fe=e=>`${_e}-dot-${e}`,Z=e=>`${_e}-slide-${e}`,Ie=C[`aria-label`]!==void 0||C[`aria-labelledby`]!==void 0;function Le(e){return Pe?{id:Z(e),role:`tabpanel`,"aria-labelledby":Fe(e)}:{id:Z(e),role:`group`,"aria-roledescription":`slide`,"aria-label":`${e+1} of ${E}`}}let Q=!D&&j<=0,$=!D&&j>=E-1,Re=h(M,0,H);return f(`div`,{...C,ref:z,role:Ie?`region`:`group`,"aria-roledescription":`carousel`,className:u(i.carousel,b&&i.carouselAdaptive,x?.root,me),style:{height:b?De:void 0,...he,...S?.root},onMouseEnter:q?()=>I(!0):void 0,onMouseLeave:q?()=>I(!1):void 0,onFocus:q?()=>L(!0):void 0,onBlur:q?()=>L(!1):void 0,onKeyDown:Me,children:[d(`div`,{ref:B,className:u(i.carouselTrack,b&&i.carouselTrackAdaptive,x?.track),style:{width:`${k.length*100}%`,transform:Re,transition:be?void 0:`none`,...S?.track},"aria-live":v?`off`:`polite`,onTransitionEnd:ke,onPointerDown:Ae,onPointerMove:je,onPointerUp:X,onPointerCancel:X,children:k.map((e,t)=>{let n=D&&(t===0||t===k.length-1),r=t-O,a=!n&&r===j,o=!pe||t>=Te&&t<=Ee;return d(`div`,{...n?{}:Le(r),className:u(i.carouselSlide,x?.slide),style:{width:`${100/k.length}%`,...S?.slide},inert:!a||void 0,children:o?e:null},`carousel-slide-${t}`)})}),ue&&E>1&&f(ne,{children:[d(r,{icon:ee,title:w.previous,"aria-label":w.previous,"aria-disabled":Q||void 0,onClick:()=>!Q&&K(),className:u(i.carouselPrevButton,Q&&i.carouselButtonDisabled,x?.prevButton),style:S?.prevButton}),d(r,{icon:te,title:w.next,"aria-label":w.next,"aria-disabled":$||void 0,onClick:()=>!$&&G(),className:u(i.carouselNextButton,$&&i.carouselButtonDisabled,x?.nextButton),style:S?.nextButton})]}),Pe&&d(`div`,{ref:V,role:`tablist`,"aria-label":w.slides,className:u(i.carouselDots,x?.dots),style:S?.dots,onKeyDown:Ne,children:T.map((e,t)=>d(n,{id:Fe(t),role:`tab`,"aria-label":w.goToSlide(t+1),"aria-selected":t===j,"aria-controls":Z(t),tabIndex:t===j?0:-1,onClick:()=>W(t),className:u(i.carouselDot,t===j&&i.carouselDotActive,x?.dot),style:S?.dot},`carousel-dot-${t}`))})]})}function h(e,t,n){return`translateX(calc(${-e*n}% + ${n/100*t}%))`}function g(e,t,n){return t===0?0:n?(e%t+t)%t:Math.max(0,Math.min(t-1,e))}export{m as default};
 //# sourceMappingURL=carousel.mjs.map

package/dist/esm/common/carousel/carousel.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"carousel.mjs","names":[],"sources":["../../../../package/common/carousel/carousel.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from '../actionIcon';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\nimport type { CarouselProps } from './carousel.types';\n\nimport styles from './carousel.module.pcss';\n\nconst AXIS_LOCK_THRESHOLD = 10;\nconst DRAG_COMMIT_RATIO = 0.2;\n\nfunction Carousel(props: CarouselProps) {\n const {\n children,\n currentIndex,\n defaultIndex = 0,\n onChange = () => {},\n loop = true,\n autoPlay = false,\n autoPlayInterval = 4000,\n pauseOnHover = true,\n showArrows = true,\n showDots = true,\n swipeable = true,\n lazyRender = false,\n adaptiveHeight = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Carousel', props);\n\n const instanceId = React.useId();\n const slides = React.Children.toArray(children);\n const count = slides.length;\n const canLoop = loop && count > 1;\n const offset = canLoop ? 1 : 0;\n const extendedSlides = canLoop ? [slides[count - 1], ...slides, slides[0]] : slides;\n\n const isControlled = currentIndex !== undefined;\n const [internalIndex, setInternalIndex] = useState(() => clampIndex(defaultIndex, count, canLoop));\n const realIndex = clampIndex(isControlled ? currentIndex! : internalIndex, count, canLoop);\n\n const [displayIndex, setDisplayIndex] = useState(realIndex + offset);\n const [transitionEnabled, setTransitionEnabled] = useState(true);\n const prevRealIndexRef = useRef(realIndex);\n\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n const [dragging, setDragging] = useState(false);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const trackRef = useRef<HTMLDivElement>(null);\n const dotsRef = useRef<HTMLDivElement>(null);\n\n const slideWidthPercent = extendedSlides.length > 0 ? 100 / extendedSlides.length : 100;\n\n useLayoutEffect(() => {\n const prevReal = prevRealIndexRef.current;\n prevRealIndexRef.current = realIndex;\n if (prevReal === realIndex) return;\n\n // A wrap parks the track on a clone until transitionEnd swaps it back, so a change arriving\n // before that has to animate from the normalised position rather than the clone.\n const lastExtendedIndex = extendedSlides.length - 1;\n let fromIndex = displayIndex;\n if (canLoop && displayIndex === 0) fromIndex = count;\n else if (canLoop && displayIndex === lastExtendedIndex) fromIndex = 1;\n\n const forwardWrap = canLoop && prevReal === count - 1 && realIndex === 0;\n const backwardWrap = canLoop && prevReal === 0 && realIndex === count - 1;\n\n let target: number;\n if (forwardWrap) target = fromIndex + 1;\n else if (backwardWrap) target = fromIndex - 1;\n else target = realIndex + offset;\n\n // Written straight to the node: the normalised position has to reach style recalculation on its\n // own, or it and the animated position collapse into one jump with no transition.\n const track = trackRef.current;\n if (fromIndex !== displayIndex && track) {\n track.style.transition = 'none';\n track.style.transform = buildTrackTransform(fromIndex, 0, slideWidthPercent);\n void track.offsetWidth;\n track.style.transition = '';\n }\n\n setTransitionEnabled(true);\n setDisplayIndex(target);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [realIndex]);\n\n // The window of slides `lazyRender` keeps mounted, as of the last settled position. Slides are\n // rendered for the union of this and the current window, so the ones a multi-step jump slides\n // past stay mounted until the transform transition ends instead of blanking out mid-flight.\n const [settledMountRange, setSettledMountRange] = useState(() => ({\n min: realIndex + offset - 1,\n max: realIndex + offset + 1,\n }));\n const mountMin = Math.min(settledMountRange.min, displayIndex - 1);\n const mountMax = Math.max(settledMountRange.max, displayIndex + 1);\n\n const [contentHeight, setContentHeight] = useState<number \| undefined>(undefined);\n\n useLayoutEffect(() => {\n if (!adaptiveHeight) return;\n const slideElement = trackRef.current?.children[displayIndex] as HTMLElement \| undefined;\n if (!slideElement) return;\n\n const update = () => setContentHeight(slideElement.offsetHeight);\n update();\n\n const observer = new ResizeObserver(update);\n observer.observe(slideElement);\n return () => observer.disconnect();\n }, [adaptiveHeight, displayIndex, count]);\n\n // Keeps the selected dot in view. Written as `scrollLeft` because `scrollIntoView` is free to\n // scroll the page along with it.\n useLayoutEffect(() => {\n const strip = dotsRef.current;\n const dot = strip?.children[realIndex] as HTMLElement \| undefined;\n if (!strip \|\| !dot) return;\n strip.scrollLeft = dot.offsetLeft - (strip.clientWidth - dot.offsetWidth) / 2;\n }, [realIndex, count]);\n\n function goToIndex(nextIndex: number) {\n const clamped = clampIndex(nextIndex, count, canLoop);\n if (!isControlled) setInternalIndex(clamped);\n onChange(clamped);\n }\n\n function goNext() {\n if (!canLoop && realIndex >= count - 1) return;\n goToIndex(realIndex + 1);\n }\n\n function goPrev() {\n if (!canLoop && realIndex <= 0) return;\n goToIndex(realIndex - 1);\n }\n\n function handleTrackTransitionEnd(event: React.TransitionEvent<HTMLDivElement>) {\n if (event.target !== event.currentTarget) return;\n setSettledMountRange({ min: displayIndex - 1, max: displayIndex + 1 });\n\n if (!canLoop) return;\n if (displayIndex === 0) {\n setTransitionEnabled(false);\n setDisplayIndex(count);\n } else if (displayIndex === extendedSlides.length - 1) {\n setTransitionEnabled(false);\n setDisplayIndex(1);\n }\n }\n\n // Hover and focus only ever pause the timer, so without one they are not worth tracking.\n const tracksPointerPause = autoPlay && pauseOnHover;\n const isPaused = hovered \|\| focused \|\| dragging;\n useEffect(() => {\n if (!autoPlay \|\| count <= 1 \|\| isPaused) return;\n const timer = setInterval(goNext, autoPlayInterval);\n return () => clearInterval(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [autoPlay, autoPlayInterval, isPaused, realIndex, count]);\n\n // A drag follows the pointer through the node, not through state: a render per move event would\n // rebuild every slide and dot for something only the track's transform sees.\n const dragRef = useRef<{\n startX: number;\n startY: number;\n width: number;\n axisLocked: boolean;\n active: boolean;\n offsetPercent: number;\n } \| null>(null);\n\n function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {\n if (!swipeable \|\| count <= 1) return;\n dragRef.current = {\n startX: event.clientX,\n startY: event.clientY,\n // Measured once: measuring per move would force a layout between the transform writes.\n width: containerRef.current?.getBoundingClientRect().width \|\| 1,\n axisLocked: false,\n active: true,\n offsetPercent: 0,\n };\n }\n\n function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {\n const drag = dragRef.current;\n if (!drag \|\| !drag.active) return;\n\n const deltaX = event.clientX - drag.startX;\n const deltaY = event.clientY - drag.startY;\n\n if (!drag.axisLocked) {\n if (Math.abs(deltaX) < AXIS_LOCK_THRESHOLD && Math.abs(deltaY) < AXIS_LOCK_THRESHOLD) return;\n if (Math.abs(deltaY) > Math.abs(deltaX)) {\n drag.active = false;\n return;\n }\n drag.axisLocked = true;\n // Never on pointerdown: a captured pointer sends its `click` to the capture target too, so\n // capturing earlier would swallow every click meant for a button inside a slide.\n event.currentTarget.setPointerCapture?.(event.pointerId);\n setDragging(true);\n setTransitionEnabled(false);\n }\n\n drag.offsetPercent = (deltaX / drag.width) * 100;\n if (trackRef.current) {\n trackRef.current.style.transform = buildTrackTransform(displayIndex, drag.offsetPercent, slideWidthPercent);\n }\n }\n\n function handlePointerUp() {\n const drag = dragRef.current;\n dragRef.current = null;\n if (!drag \|\| !drag.axisLocked) {\n setDragging(false);\n return;\n }\n\n setTransitionEnabled(true);\n setDragging(false);\n\n // React never saw the dragged transform, so it has to be handed back by hand, and always: a\n // drag that changes no index would otherwise strand the track off-screen. One that does change\n // it overwrites this in the same tick, and still animates on from where the pointer left off.\n if (trackRef.current) {\n trackRef.current.style.transition = '';\n trackRef.current.style.transform = buildTrackTransform(displayIndex, 0, slideWidthPercent);\n }\n\n if (Math.abs(drag.offsetPercent) >= DRAG_COMMIT_RATIO * 100) {\n if (drag.offsetPercent < 0) goNext();\n else goPrev();\n }\n }\n\n // Arrow keys belong to the carousel's own controls, never to the slides: a text field or a\n // scrollable region in a slide has to keep its own. `defaultPrevented` leaves the dots to their\n // own handling below.\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (event.defaultPrevented \|\| trackRef.current?.contains(event.target as Node)) return;\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n goPrev();\n } else if (event.key === 'ArrowRight') {\n event.preventDefault();\n goNext();\n }\n }\n\n function handleDotsKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n let next: number \| null = null;\n if (event.key === 'ArrowLeft') next = realIndex - 1;\n else if (event.key === 'ArrowRight') next = realIndex + 1;\n else if (event.key === 'Home') next = 0;\n else if (event.key === 'End') next = count - 1;\n if (next === null) return;\n\n event.preventDefault();\n const clamped = clampIndex(next, count, canLoop);\n goToIndex(clamped);\n // The selected dot is the one holding the tab stop, so focus has to travel with the selection.\n (dotsRef.current?.children[clamped] as HTMLElement \| undefined)?.focus();\n }\n\n // The dots are the APG tablist over the slides. Without them the slides describe themselves as\n // plain slides rather than as panels.\n const hasTabs = showDots && count > 1;\n const dotId = (index: number) => `${instanceId}-dot-${index}`;\n const slideId = (index: number) => `${instanceId}-slide-${index}`;\n\n // An unnamed landmark is worse than none, so the carousel is only a region once it has a name.\n const isNamed = rest['aria-label'] !== undefined \|\| rest['aria-labelledby'] !== undefined;\n\n function slideSemantics(index: number) {\n if (hasTabs) {\n return { id: slideId(index), role: 'tabpanel', 'aria-labelledby': dotId(index) };\n }\n return {\n id: slideId(index),\n role: 'group',\n 'aria-roledescription': 'slide',\n 'aria-label': `${index + 1} of ${count}`,\n };\n }\n\n const isPrevDisabled = !canLoop && realIndex <= 0;\n const isNextDisabled = !canLoop && realIndex >= count - 1;\n\n const trackTransform = buildTrackTransform(displayIndex, 0, slideWidthPercent);\n\n return (\n <div\n {...rest}\n ref={containerRef}\n role={isNamed ? 'region' : 'group'}\n aria-roledescription='carousel'\n className={cx(styles.carousel, adaptiveHeight && styles.carouselAdaptive, classNames?.root, className)}\n style={{ height: adaptiveHeight ? contentHeight : undefined, ...style, ...slotStyles?.root }}\n onMouseEnter={tracksPointerPause ? () => setHovered(true) : undefined}\n onMouseLeave={tracksPointerPause ? () => setHovered(false) : undefined}\n onFocus={tracksPointerPause ? () => setFocused(true) : undefined}\n onBlur={tracksPointerPause ? () => setFocused(false) : undefined}\n onKeyDown={handleKeyDown}\n >\n <div\n ref={trackRef}\n className={cx(styles.carouselTrack, adaptiveHeight && styles.carouselTrackAdaptive, classNames?.track)}\n style={{\n width: `${extendedSlides.length * 100}%`,\n transform: trackTransform,\n transition: transitionEnabled ? undefined : 'none',\n ...slotStyles?.track,\n }}\n aria-live={autoPlay ? 'off' : 'polite'}\n onTransitionEnd={handleTrackTransitionEnd}\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={handlePointerUp}\n onPointerCancel={handlePointerUp}\n >\n {extendedSlides.map((slide, idx) => {\n const isClonePosition = canLoop && (idx === 0 \|\| idx === extendedSlides.length - 1);\n const logicalIndex = idx - offset;\n const isActive = !isClonePosition && logicalIndex === realIndex;\n const isRendered = !lazyRender \|\| (idx >= mountMin && idx <= mountMax);\n\n return (\n <div\n key={`carousel-slide-${idx}`}\n {...(isClonePosition ? {} : slideSemantics(logicalIndex))}\n className={cx(styles.carouselSlide, classNames?.slide)}\n style={{ width: `${100 / extendedSlides.length}%`, ...slotStyles?.slide }}\n inert={isActive ? undefined : true}\n >\n {isRendered ? slide : null}\n </div>\n );\n })}\n </div>\n\n {showArrows && count > 1 && (\n <>\n <ActionIcon\n icon={faChevronLeft}\n title='Previous slide'\n aria-label='Previous slide'\n aria-disabled={isPrevDisabled \|\| undefined}\n onClick={() => !isPrevDisabled && goPrev()}\n className={cx(\n styles.carouselPrevButton,\n isPrevDisabled && styles.carouselButtonDisabled,\n classNames?.prevButton,\n )}\n style={slotStyles?.prevButton}\n />\n <ActionIcon\n icon={faChevronRight}\n title='Next slide'\n aria-label='Next slide'\n aria-disabled={isNextDisabled \|\| undefined}\n onClick={() => !isNextDisabled && goNext()}\n className={cx(\n styles.carouselNextButton,\n isNextDisabled && styles.carouselButtonDisabled,\n classNames?.nextButton,\n )}\n style={slotStyles?.nextButton}\n />\n </>\n )}\n\n {hasTabs && (\n <div\n ref={dotsRef}\n role='tablist'\n aria-label='Slides'\n className={cx(styles.carouselDots, classNames?.dots)}\n style={slotStyles?.dots}\n onKeyDown={handleDotsKeyDown}\n >\n {slides.map((_, index) => (\n <InteractableDiv\n key={`carousel-dot-${index}`}\n id={dotId(index)}\n role='tab'\n aria-label={`Go to slide ${index + 1}`}\n aria-selected={index === realIndex}\n aria-controls={slideId(index)}\n // One tab stop for the whole set, arrow keys inside it.\n tabIndex={index === realIndex ? 0 : -1}\n onClick={() => goToIndex(index)}\n className={cx(styles.carouselDot, index === realIndex && styles.carouselDotActive, classNames?.dot)}\n style={slotStyles?.dot}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction buildTrackTransform(position: number, dragPercent: number, slideWidthPercent: number): string {\n return `translateX(calc(${-position * slideWidthPercent}% + ${dragPercent * (slideWidthPercent / 100)}%))`;\n}\n\nfunction clampIndex(index: number, count: number, canLoop: boolean): number {\n if (count === 0) return 0;\n if (canLoop) return ((index % count) + count) % count;\n return Math.max(0, Math.min(count - 1, index));\n}\n\nexport default Carousel;\n"],"mappings":"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"}
1	+ {"version":3,"file":"carousel.mjs","names":[],"sources":["../../../../package/common/carousel/carousel.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from '../actionIcon';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { CarouselLabels, CarouselProps } from './carousel.types';\n\nimport styles from './carousel.module.pcss';\n\nconst AXIS_LOCK_THRESHOLD = 10;\nconst DRAG_COMMIT_RATIO = 0.2;\n\nconst DEFAULT_LABELS: Required<CarouselLabels> = {\n previous: 'Previous slide',\n next: 'Next slide',\n slides: 'Slides',\n goToSlide: (slide) => `Go to slide ${slide}`,\n};\n\nfunction Carousel(props: CarouselProps) {\n const {\n children,\n currentIndex,\n defaultIndex = 0,\n onChange = () => {},\n loop = true,\n autoPlay = false,\n autoPlayInterval = 4000,\n pauseOnHover = true,\n showArrows = true,\n showDots = true,\n swipeable = true,\n lazyRender = false,\n adaptiveHeight = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n labels,\n ...rest\n } = useComponentDefaults('Carousel', props);\n const text = useLabels('Carousel', labels, DEFAULT_LABELS);\n\n const instanceId = React.useId();\n const slides = React.Children.toArray(children);\n const count = slides.length;\n const canLoop = loop && count > 1;\n const offset = canLoop ? 1 : 0;\n const extendedSlides = canLoop ? [slides[count - 1], ...slides, slides[0]] : slides;\n\n const isControlled = currentIndex !== undefined;\n const [internalIndex, setInternalIndex] = useState(() => clampIndex(defaultIndex, count, canLoop));\n const realIndex = clampIndex(isControlled ? currentIndex! : internalIndex, count, canLoop);\n\n const [displayIndex, setDisplayIndex] = useState(realIndex + offset);\n const [transitionEnabled, setTransitionEnabled] = useState(true);\n const prevRealIndexRef = useRef(realIndex);\n\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n const [dragging, setDragging] = useState(false);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const trackRef = useRef<HTMLDivElement>(null);\n const dotsRef = useRef<HTMLDivElement>(null);\n\n const slideWidthPercent = extendedSlides.length > 0 ? 100 / extendedSlides.length : 100;\n\n useLayoutEffect(() => {\n const prevReal = prevRealIndexRef.current;\n prevRealIndexRef.current = realIndex;\n if (prevReal === realIndex) return;\n\n // A wrap parks the track on a clone until transitionEnd swaps it back, so a change arriving\n // before that has to animate from the normalised position rather than the clone.\n const lastExtendedIndex = extendedSlides.length - 1;\n let fromIndex = displayIndex;\n if (canLoop && displayIndex === 0) fromIndex = count;\n else if (canLoop && displayIndex === lastExtendedIndex) fromIndex = 1;\n\n const forwardWrap = canLoop && prevReal === count - 1 && realIndex === 0;\n const backwardWrap = canLoop && prevReal === 0 && realIndex === count - 1;\n\n let target: number;\n if (forwardWrap) target = fromIndex + 1;\n else if (backwardWrap) target = fromIndex - 1;\n else target = realIndex + offset;\n\n // Written straight to the node: the normalised position has to reach style recalculation on its\n // own, or it and the animated position collapse into one jump with no transition.\n const track = trackRef.current;\n if (fromIndex !== displayIndex && track) {\n track.style.transition = 'none';\n track.style.transform = buildTrackTransform(fromIndex, 0, slideWidthPercent);\n void track.offsetWidth;\n track.style.transition = '';\n }\n\n setTransitionEnabled(true);\n setDisplayIndex(target);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [realIndex]);\n\n // The window of slides `lazyRender` keeps mounted, as of the last settled position. Slides are\n // rendered for the union of this and the current window, so the ones a multi-step jump slides\n // past stay mounted until the transform transition ends instead of blanking out mid-flight.\n const [settledMountRange, setSettledMountRange] = useState(() => ({\n min: realIndex + offset - 1,\n max: realIndex + offset + 1,\n }));\n const mountMin = Math.min(settledMountRange.min, displayIndex - 1);\n const mountMax = Math.max(settledMountRange.max, displayIndex + 1);\n\n const [contentHeight, setContentHeight] = useState<number \| undefined>(undefined);\n\n useLayoutEffect(() => {\n if (!adaptiveHeight) return;\n const slideElement = trackRef.current?.children[displayIndex] as HTMLElement \| undefined;\n if (!slideElement) return;\n\n const update = () => setContentHeight(slideElement.offsetHeight);\n update();\n\n const observer = new ResizeObserver(update);\n observer.observe(slideElement);\n return () => observer.disconnect();\n }, [adaptiveHeight, displayIndex, count]);\n\n // Keeps the selected dot in view. Written as `scrollLeft` because `scrollIntoView` is free to\n // scroll the page along with it.\n useLayoutEffect(() => {\n const strip = dotsRef.current;\n const dot = strip?.children[realIndex] as HTMLElement \| undefined;\n if (!strip \|\| !dot) return;\n strip.scrollLeft = dot.offsetLeft - (strip.clientWidth - dot.offsetWidth) / 2;\n }, [realIndex, count]);\n\n function goToIndex(nextIndex: number) {\n const clamped = clampIndex(nextIndex, count, canLoop);\n if (!isControlled) setInternalIndex(clamped);\n onChange(clamped);\n }\n\n function goNext() {\n if (!canLoop && realIndex >= count - 1) return;\n goToIndex(realIndex + 1);\n }\n\n function goPrev() {\n if (!canLoop && realIndex <= 0) return;\n goToIndex(realIndex - 1);\n }\n\n function handleTrackTransitionEnd(event: React.TransitionEvent<HTMLDivElement>) {\n if (event.target !== event.currentTarget) return;\n setSettledMountRange({ min: displayIndex - 1, max: displayIndex + 1 });\n\n if (!canLoop) return;\n if (displayIndex === 0) {\n setTransitionEnabled(false);\n setDisplayIndex(count);\n } else if (displayIndex === extendedSlides.length - 1) {\n setTransitionEnabled(false);\n setDisplayIndex(1);\n }\n }\n\n // Hover and focus only ever pause the timer, so without one they are not worth tracking.\n const tracksPointerPause = autoPlay && pauseOnHover;\n const isPaused = hovered \|\| focused \|\| dragging;\n useEffect(() => {\n if (!autoPlay \|\| count <= 1 \|\| isPaused) return;\n const timer = setInterval(goNext, autoPlayInterval);\n return () => clearInterval(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [autoPlay, autoPlayInterval, isPaused, realIndex, count]);\n\n // A drag follows the pointer through the node, not through state: a render per move event would\n // rebuild every slide and dot for something only the track's transform sees.\n const dragRef = useRef<{\n startX: number;\n startY: number;\n width: number;\n axisLocked: boolean;\n active: boolean;\n offsetPercent: number;\n } \| null>(null);\n\n function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {\n if (!swipeable \|\| count <= 1) return;\n dragRef.current = {\n startX: event.clientX,\n startY: event.clientY,\n // Measured once: measuring per move would force a layout between the transform writes.\n width: containerRef.current?.getBoundingClientRect().width \|\| 1,\n axisLocked: false,\n active: true,\n offsetPercent: 0,\n };\n }\n\n function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {\n const drag = dragRef.current;\n if (!drag \|\| !drag.active) return;\n\n const deltaX = event.clientX - drag.startX;\n const deltaY = event.clientY - drag.startY;\n\n if (!drag.axisLocked) {\n if (Math.abs(deltaX) < AXIS_LOCK_THRESHOLD && Math.abs(deltaY) < AXIS_LOCK_THRESHOLD) return;\n if (Math.abs(deltaY) > Math.abs(deltaX)) {\n drag.active = false;\n return;\n }\n drag.axisLocked = true;\n // Never on pointerdown: a captured pointer sends its `click` to the capture target too, so\n // capturing earlier would swallow every click meant for a button inside a slide.\n event.currentTarget.setPointerCapture?.(event.pointerId);\n setDragging(true);\n setTransitionEnabled(false);\n }\n\n drag.offsetPercent = (deltaX / drag.width) * 100;\n if (trackRef.current) {\n trackRef.current.style.transform = buildTrackTransform(displayIndex, drag.offsetPercent, slideWidthPercent);\n }\n }\n\n function handlePointerUp() {\n const drag = dragRef.current;\n dragRef.current = null;\n if (!drag \|\| !drag.axisLocked) {\n setDragging(false);\n return;\n }\n\n setTransitionEnabled(true);\n setDragging(false);\n\n // React never saw the dragged transform, so it has to be handed back by hand, and always: a\n // drag that changes no index would otherwise strand the track off-screen. One that does change\n // it overwrites this in the same tick, and still animates on from where the pointer left off.\n if (trackRef.current) {\n trackRef.current.style.transition = '';\n trackRef.current.style.transform = buildTrackTransform(displayIndex, 0, slideWidthPercent);\n }\n\n if (Math.abs(drag.offsetPercent) >= DRAG_COMMIT_RATIO * 100) {\n if (drag.offsetPercent < 0) goNext();\n else goPrev();\n }\n }\n\n // Arrow keys belong to the carousel's own controls, never to the slides: a text field or a\n // scrollable region in a slide has to keep its own. `defaultPrevented` leaves the dots to their\n // own handling below.\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (event.defaultPrevented \|\| trackRef.current?.contains(event.target as Node)) return;\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n goPrev();\n } else if (event.key === 'ArrowRight') {\n event.preventDefault();\n goNext();\n }\n }\n\n function handleDotsKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n let next: number \| null = null;\n if (event.key === 'ArrowLeft') next = realIndex - 1;\n else if (event.key === 'ArrowRight') next = realIndex + 1;\n else if (event.key === 'Home') next = 0;\n else if (event.key === 'End') next = count - 1;\n if (next === null) return;\n\n event.preventDefault();\n const clamped = clampIndex(next, count, canLoop);\n goToIndex(clamped);\n // The selected dot is the one holding the tab stop, so focus has to travel with the selection.\n (dotsRef.current?.children[clamped] as HTMLElement \| undefined)?.focus();\n }\n\n // The dots are the APG tablist over the slides. Without them the slides describe themselves as\n // plain slides rather than as panels.\n const hasTabs = showDots && count > 1;\n const dotId = (index: number) => `${instanceId}-dot-${index}`;\n const slideId = (index: number) => `${instanceId}-slide-${index}`;\n\n // An unnamed landmark is worse than none, so the carousel is only a region once it has a name.\n const isNamed = rest['aria-label'] !== undefined \|\| rest['aria-labelledby'] !== undefined;\n\n function slideSemantics(index: number) {\n if (hasTabs) {\n return { id: slideId(index), role: 'tabpanel', 'aria-labelledby': dotId(index) };\n }\n return {\n id: slideId(index),\n role: 'group',\n 'aria-roledescription': 'slide',\n 'aria-label': `${index + 1} of ${count}`,\n };\n }\n\n const isPrevDisabled = !canLoop && realIndex <= 0;\n const isNextDisabled = !canLoop && realIndex >= count - 1;\n\n const trackTransform = buildTrackTransform(displayIndex, 0, slideWidthPercent);\n\n return (\n <div\n {...rest}\n ref={containerRef}\n role={isNamed ? 'region' : 'group'}\n aria-roledescription='carousel'\n className={cx(styles.carousel, adaptiveHeight && styles.carouselAdaptive, classNames?.root, className)}\n style={{ height: adaptiveHeight ? contentHeight : undefined, ...style, ...slotStyles?.root }}\n onMouseEnter={tracksPointerPause ? () => setHovered(true) : undefined}\n onMouseLeave={tracksPointerPause ? () => setHovered(false) : undefined}\n onFocus={tracksPointerPause ? () => setFocused(true) : undefined}\n onBlur={tracksPointerPause ? () => setFocused(false) : undefined}\n onKeyDown={handleKeyDown}\n >\n <div\n ref={trackRef}\n className={cx(styles.carouselTrack, adaptiveHeight && styles.carouselTrackAdaptive, classNames?.track)}\n style={{\n width: `${extendedSlides.length * 100}%`,\n transform: trackTransform,\n transition: transitionEnabled ? undefined : 'none',\n ...slotStyles?.track,\n }}\n aria-live={autoPlay ? 'off' : 'polite'}\n onTransitionEnd={handleTrackTransitionEnd}\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={handlePointerUp}\n onPointerCancel={handlePointerUp}\n >\n {extendedSlides.map((slide, idx) => {\n const isClonePosition = canLoop && (idx === 0 \|\| idx === extendedSlides.length - 1);\n const logicalIndex = idx - offset;\n const isActive = !isClonePosition && logicalIndex === realIndex;\n const isRendered = !lazyRender \|\| (idx >= mountMin && idx <= mountMax);\n\n return (\n <div\n key={`carousel-slide-${idx}`}\n {...(isClonePosition ? {} : slideSemantics(logicalIndex))}\n className={cx(styles.carouselSlide, classNames?.slide)}\n style={{ width: `${100 / extendedSlides.length}%`, ...slotStyles?.slide }}\n inert={isActive ? undefined : true}\n >\n {isRendered ? slide : null}\n </div>\n );\n })}\n </div>\n\n {showArrows && count > 1 && (\n <>\n <ActionIcon\n icon={faChevronLeft}\n title={text.previous}\n aria-label={text.previous}\n aria-disabled={isPrevDisabled \|\| undefined}\n onClick={() => !isPrevDisabled && goPrev()}\n className={cx(\n styles.carouselPrevButton,\n isPrevDisabled && styles.carouselButtonDisabled,\n classNames?.prevButton,\n )}\n style={slotStyles?.prevButton}\n />\n <ActionIcon\n icon={faChevronRight}\n title={text.next}\n aria-label={text.next}\n aria-disabled={isNextDisabled \|\| undefined}\n onClick={() => !isNextDisabled && goNext()}\n className={cx(\n styles.carouselNextButton,\n isNextDisabled && styles.carouselButtonDisabled,\n classNames?.nextButton,\n )}\n style={slotStyles?.nextButton}\n />\n </>\n )}\n\n {hasTabs && (\n <div\n ref={dotsRef}\n role='tablist'\n aria-label={text.slides}\n className={cx(styles.carouselDots, classNames?.dots)}\n style={slotStyles?.dots}\n onKeyDown={handleDotsKeyDown}\n >\n {slides.map((_, index) => (\n <InteractableDiv\n key={`carousel-dot-${index}`}\n id={dotId(index)}\n role='tab'\n aria-label={text.goToSlide(index + 1)}\n aria-selected={index === realIndex}\n aria-controls={slideId(index)}\n // One tab stop for the whole set, arrow keys inside it.\n tabIndex={index === realIndex ? 0 : -1}\n onClick={() => goToIndex(index)}\n className={cx(styles.carouselDot, index === realIndex && styles.carouselDotActive, classNames?.dot)}\n style={slotStyles?.dot}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction buildTrackTransform(position: number, dragPercent: number, slideWidthPercent: number): string {\n return `translateX(calc(${-position * slideWidthPercent}% + ${dragPercent * (slideWidthPercent / 100)}%))`;\n}\n\nfunction clampIndex(index: number, count: number, canLoop: boolean): number {\n if (count === 0) return 0;\n if (canLoop) return ((index % count) + count) % count;\n return Math.max(0, Math.min(count - 1, index));\n}\n\nexport default Carousel;\n"],"mappings":"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"}

package/dist/esm/common/chip/chip.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../ripple/ripple.mjs";import{isSelfActivation as n}from"../utils/activationKey.mjs";import r from"../interactableDiv/index.mjs";import i from"../actionIcon/actionIcon.mjs";import{ChipStyleType as a}from"./chip.types.mjs";import o from"./chip.module.mjs";import{useMemo as s,useRef as c}from"react";import l from"classnames";import{faXmarkCircle as u}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";var p={default:o.chipStyleDefault,primary:o.chipStylePrimary,info:o.chipStyleInfo,warn:o.chipStyleWarn,error:o.chipStyleError};function m(m){let{className:h=``,thumbnail:g=``,text:_=``,styleType:v=a.Default,showRemoveIcon:y=!1,removeLabel:b=`Remove`,onClick:x,onRemove:S,...C}=e(`Chip`,m),w=c(null);function T(e){x&&n(e)&&w.current?.addRipple()}let E=s(()=>{if(typeof g==`string`&&g.startsWith(`http`))return g},[g]);return d(r,{...C,className:l(o.chip,p[v],x&&o.chipClickable,h),onClick:x,onKeyDown:T,children:d(t,{ref:w,disabled:!x,style:{borderRadius:`inherit`},children:f(`div`,{className:o.chipInner,children:[g&&d(`div`,{className:o.chipThumbnail,style:E?{backgroundImage:`url(${E})`}:{},children:!E&&g}),d(`div`,{className:o.chipText,children:_}),y&&d(i,{icon:u,"aria-label":b,onClick:e=>{e.stopPropagation(),S?.()}})]})})})}export{m as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import n from"../ripple/ripple.mjs";import{isSelfActivation as r}from"../utils/activationKey.mjs";import i from"../interactableDiv/index.mjs";import a from"../actionIcon/actionIcon.mjs";import{ChipStyleType as o}from"./chip.types.mjs";import s from"./chip.module.mjs";import{useMemo as c,useRef as l}from"react";import u from"classnames";import{faXmarkCircle as d}from"@fortawesome/free-solid-svg-icons";import{jsx as f,jsxs as p}from"react/jsx-runtime";var m={default:s.chipStyleDefault,primary:s.chipStylePrimary,info:s.chipStyleInfo,warn:s.chipStyleWarn,error:s.chipStyleError},h={remove:`Remove`};function g(g){let{className:_=``,thumbnail:v=``,text:y=``,styleType:b=o.Default,showRemoveIcon:x=!1,labels:S,onClick:C,onRemove:w,...T}=e(`Chip`,g),E=t(`Chip`,S,h),D=l(null);function O(e){C&&r(e)&&D.current?.addRipple()}let k=c(()=>{if(typeof v==`string`&&v.startsWith(`http`))return v},[v]);return f(i,{...T,className:u(s.chip,m[b],C&&s.chipClickable,_),onClick:C,onKeyDown:O,children:f(n,{ref:D,disabled:!C,style:{borderRadius:`inherit`},children:p(`div`,{className:s.chipInner,children:[v&&f(`div`,{className:s.chipThumbnail,style:k?{backgroundImage:`url(${k})`}:{},children:!k&&v}),f(`div`,{className:s.chipText,children:y}),x&&f(a,{icon:d,"aria-label":E.remove,onClick:e=>{e.stopPropagation(),w?.()}})]})})})}export{g as default};
 //# sourceMappingURL=chip.mjs.map

package/dist/esm/common/chip/chip.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.mjs","names":[],"sources":["../../../../package/common/chip/chip.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { faXmarkCircle } from '@fortawesome/free-solid-svg-icons';\nimport cx from 'classnames';\n\nimport Ripple from '../ripple';\nimport type { RippleHandle } from '../ripple';\nimport InteractableDiv from '../interactableDiv';\nimport ActionIcon from '../actionIcon';\nimport { ChipStyleType, ChipProps } from './chip.types';\nimport { useComponentDefaults } from '../configProvider';\nimport { isSelfActivation } from '../utils/activationKey';\n\nimport styles from './chip.module.pcss';\n\nconst CLASS_BY_STYLE: Record<ChipStyleType, string> = {\n default: styles.chipStyleDefault,\n primary: styles.chipStylePrimary,\n info: styles.chipStyleInfo,\n warn: styles.chipStyleWarn,\n error: styles.chipStyleError,\n};\n\nfunction Chip(props: ChipProps) {\n const {\n className = '',\n thumbnail = '',\n text = '',\n styleType = ChipStyleType.Default,\n showRemoveIcon = false,\n ~~removeLabel = 'Remove'~~,\n onClick,\n onRemove,\n ...rest\n } = useComponentDefaults('Chip', props);\n const rippleRef = useRef<RippleHandle>(null);\n\n // Keyboard activation calls onClick directly without dispatching a DOM click, so Ripple's own\n // listener never sees it.\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (onClick && isSelfActivation(event)) rippleRef.current?.addRipple();\n }\n\n const thumbnailUrl = useMemo(() => {\n if (typeof thumbnail === 'string' && thumbnail.startsWith('http')) return thumbnail;\n return undefined;\n }, [thumbnail]);\n\n return (\n <InteractableDiv\n {...rest}\n className={cx(styles.chip, CLASS_BY_STYLE[styleType], onClick && styles.chipClickable, className)}\n onClick={onClick}\n onKeyDown={handleKeyDown}\n >\n <Ripple ref={rippleRef} disabled={!onClick} style={{ borderRadius: 'inherit' }}>\n <div className={styles.chipInner}>\n {thumbnail && (\n <div\n className={styles.chipThumbnail}\n style={thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : {}}\n >\n {!thumbnailUrl && thumbnail}\n </div>\n )}\n <div className={styles.chipText}>{text}</div>\n {showRemoveIcon && (\n <ActionIcon\n icon={faXmarkCircle}\n aria-label={~~removeLabel~~}\n onClick={(e) => {\n e.stopPropagation();\n onRemove?.();\n }}\n />\n )}\n </div>\n </Ripple>\n </InteractableDiv>\n );\n}\n\nexport default Chip;\n"],"mappings":"~~whBAcA~~,IAAM,EAAgD,CACpD,QAAS,EAAO,iBAChB,QAAS,EAAO,iBAChB,KAAM,EAAO,cACb,KAAM,EAAO,cACb,MAAO,EAAO,cAChB,EAEA,SAAS,EAAK,EAAkB,CAC9B,GAAM,CACJ,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,YAAY,EAAc,QAC1B,iBAAiB,GACjB,~~cAAc~~,~~SACd,~~UACA,WACA,GAAG,GACD,EAAqB,OAAQ,CAAK,EAChC,EAAY,EAAqB,IAAI,EAI3C,SAAS,EAAc,EAA4C,CAC7D,GAAW,EAAiB,CAAK,GAAG,EAAU,SAAS,UAAU,CACvE,CAEA,IAAM,EAAe,MAAc,CACjC,GAAI,OAAO,GAAc,UAAY,EAAU,WAAW,MAAM,EAAG,OAAO,CAE5E,EAAG,CAAC,CAAS,CAAC,EAEd,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,KAAM,EAAe,GAAY,GAAW,EAAO,cAAe,CAAS,EACvF,UACT,UAAW,EAEX,SAAA,EAAC,EAAD,CAAQ,IAAK,EAAW,SAAU,CAAC,EAAS,MAAO,CAAE,aAAc,SAAU,EAC3E,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,UAAvB,SAAA,CACG,GACC,EAAC,MAAD,CACE,UAAW,EAAO,cAClB,MAAO,EAAe,CAAE,gBAAiB,OAAO,EAAa,EAAG,EAAI,CAAC,EAEpE,SAAA,CAAC,GAAgB,CACf,CAAA,EAEP,EAAC,MAAD,CAAK,UAAW,EAAO,SAAW,SAAA,CAAU,CAAA,EAC3C,GACC,EAAC,EAAD,CACE,KAAM,EACN,aAAY,~~EACZ~~,QAAU,GAAM,CACd,EAAE,gBAAgB,EAClB,IAAW,CACb,CACD,CAAA,CAEA,GACC,CAAA,CACO,CAAA,CAErB"}
1	+ {"version":3,"file":"chip.mjs","names":[],"sources":["../../../../package/common/chip/chip.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { faXmarkCircle } from '@fortawesome/free-solid-svg-icons';\nimport cx from 'classnames';\n\nimport Ripple from '../ripple';\nimport type { RippleHandle } from '../ripple';\nimport InteractableDiv from '../interactableDiv';\nimport ActionIcon from '../actionIcon';\nimport { ChipStyleType, ChipProps } from './chip.types';\nimport type { ChipLabels } from './chip.types';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { isSelfActivation } from '../utils/activationKey';\n\nimport styles from './chip.module.pcss';\n\nconst CLASS_BY_STYLE: Record<ChipStyleType, string> = {\n default: styles.chipStyleDefault,\n primary: styles.chipStylePrimary,\n info: styles.chipStyleInfo,\n warn: styles.chipStyleWarn,\n error: styles.chipStyleError,\n};\n\nconst DEFAULT_LABELS: Required<ChipLabels> = {\n remove: 'Remove',\n};\n\nfunction Chip(props: ChipProps) {\n const {\n className = '',\n thumbnail = '',\n text = '',\n styleType = ChipStyleType.Default,\n showRemoveIcon = false,\n labels,\n onClick,\n onRemove,\n ...rest\n } = useComponentDefaults('Chip', props);\n const resolvedLabels = useLabels('Chip', labels, DEFAULT_LABELS);\n const rippleRef = useRef<RippleHandle>(null);\n\n // Keyboard activation calls onClick directly without dispatching a DOM click, so Ripple's own\n // listener never sees it.\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (onClick && isSelfActivation(event)) rippleRef.current?.addRipple();\n }\n\n const thumbnailUrl = useMemo(() => {\n if (typeof thumbnail === 'string' && thumbnail.startsWith('http')) return thumbnail;\n return undefined;\n }, [thumbnail]);\n\n return (\n <InteractableDiv\n {...rest}\n className={cx(styles.chip, CLASS_BY_STYLE[styleType], onClick && styles.chipClickable, className)}\n onClick={onClick}\n onKeyDown={handleKeyDown}\n >\n <Ripple ref={rippleRef} disabled={!onClick} style={{ borderRadius: 'inherit' }}>\n <div className={styles.chipInner}>\n {thumbnail && (\n <div\n className={styles.chipThumbnail}\n style={thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : {}}\n >\n {!thumbnailUrl && thumbnail}\n </div>\n )}\n <div className={styles.chipText}>{text}</div>\n {showRemoveIcon && (\n <ActionIcon\n icon={faXmarkCircle}\n aria-label={resolvedLabels.remove}\n onClick={(e) => {\n e.stopPropagation();\n onRemove?.();\n }}\n />\n )}\n </div>\n </Ripple>\n </InteractableDiv>\n );\n}\n\nexport default Chip;\n"],"mappings":"olBAeA,IAAM,EAAgD,CACpD,QAAS,EAAO,iBAChB,QAAS,EAAO,iBAChB,KAAM,EAAO,cACb,KAAM,EAAO,cACb,MAAO,EAAO,cAChB,EAEM,EAAuC,CAC3C,OAAQ,QACV,EAEA,SAAS,EAAK,EAAkB,CAC9B,GAAM,CACJ,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,YAAY,EAAc,QAC1B,iBAAiB,GACjB,SACA,UACA,WACA,GAAG,GACD,EAAqB,OAAQ,CAAK,EAChC,EAAiB,EAAU,OAAQ,EAAQ,CAAc,EACzD,EAAY,EAAqB,IAAI,EAI3C,SAAS,EAAc,EAA4C,CAC7D,GAAW,EAAiB,CAAK,GAAG,EAAU,SAAS,UAAU,CACvE,CAEA,IAAM,EAAe,MAAc,CACjC,GAAI,OAAO,GAAc,UAAY,EAAU,WAAW,MAAM,EAAG,OAAO,CAE5E,EAAG,CAAC,CAAS,CAAC,EAEd,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,KAAM,EAAe,GAAY,GAAW,EAAO,cAAe,CAAS,EACvF,UACT,UAAW,EAEX,SAAA,EAAC,EAAD,CAAQ,IAAK,EAAW,SAAU,CAAC,EAAS,MAAO,CAAE,aAAc,SAAU,EAC3E,SAAA,EAAC,MAAD,CAAK,UAAW,EAAO,UAAvB,SAAA,CACG,GACC,EAAC,MAAD,CACE,UAAW,EAAO,cAClB,MAAO,EAAe,CAAE,gBAAiB,OAAO,EAAa,EAAG,EAAI,CAAC,EAEpE,SAAA,CAAC,GAAgB,CACf,CAAA,EAEP,EAAC,MAAD,CAAK,UAAW,EAAO,SAAW,SAAA,CAAU,CAAA,EAC3C,GACC,EAAC,EAAD,CACE,KAAM,EACN,aAAY,EAAe,OAC3B,QAAU,GAAM,CACd,EAAE,gBAAgB,EAClB,IAAW,CACb,CACD,CAAA,CAEA,GACC,CAAA,CACO,CAAA,CAErB"}

package/dist/esm/common/chip/chip.types.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.types.mjs","names":[],"sources":["../../../../package/common/chip/chip.types.ts"],"sourcesContent":["import type { HtmlProps } from '../types/slots.types';\n\nexport enum ChipStyleType {\n Default = 'default',\n Primary = 'primary',\n Info = 'info',\n Warn = 'warn',\n Error = 'error',\n}\n\nexport interface ChipProps extends HtmlProps {\n className?: string;\n text?: string;\n thumbnail?: React.ReactNode;\n styleType?: ChipStyleType;\n showRemoveIcon?: boolean;\n /** Accessible name for the remove button. Default `'Remove'`. */\n ~~removeLabel?: string;\n~~ onClick?: () => void;\n onRemove?: () => void;\n}\n\nexport interface ChipContainerProps extends HtmlProps {\n className?: string;\n children?: React.ReactNode;\n inline?: boolean;\n}\n"],"mappings":"AAEA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"chip.types.mjs","names":[],"sources":["../../../../package/common/chip/chip.types.ts"],"sourcesContent":["import type { HtmlProps } from '../types/slots.types';\n\nexport enum ChipStyleType {\n Default = 'default',\n Primary = 'primary',\n Info = 'info',\n Warn = 'warn',\n Error = 'error',\n}\n\n/** Text Chip renders of its own, for translating it. /\nexport interface ChipLabels {\n /* The remove button, read out by screen readers (default `Remove`). /\n remove?: string;\n}\n\nexport interface ChipProps extends HtmlProps {\n className?: string;\n text?: string;\n thumbnail?: React.ReactNode;\n styleType?: ChipStyleType;\n showRemoveIcon?: boolean;\n /* Accessible name for the remove button. Default `'Remove'`. /\n onClick?: () => void;\n onRemove?: () => void;\n /* Overrides the text Chip renders of its own. Merged per key. */\n labels?: ChipLabels;\n}\n\nexport interface ChipContainerProps extends HtmlProps {\n className?: string;\n children?: React.ReactNode;\n inline?: boolean;\n}\n"],"mappings":"AAEA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}

package/dist/esm/common/colorPicker/colorPicker.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import e from"../interactableDiv/index.mjs";import{Align as t}from"../floatingMenu/floatingMenu.types.mjs";import n from"../floatingMenu/floatingMenu.mjs";import r from"../input/input.mjs";import{toHex as i}from"./toHex.mjs";import a from"./colorPicker.module.mjs";import{useRef as o,useState as s}from"react";import c from"classnames";import{FontAwesomeIcon as l}from"@fortawesome/react-fontawesome";import{faEyeDropper as u}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";var p=typeof window<`u`&&`EyeDropper`in window;async function m(){let e=window.EyeDropper;if(!e)return null;try{return(await new e().open()).sRGBHex}catch{return null}}function h(e){return/^#[0-9a-fA-F]{6}$/.test(e)||/^#[0-9a-fA-F]{8}$/.test(e)}function g(e){return/^#[0-9a-fA-F]{8}$/.test(e)?{hex6:e.slice(0,7),alpha:parseInt(e.slice(7,9),16)/255*100}:{hex6:e.slice(0,7),alpha:100}}function _(e,t,n){return!n||t>=100?e:`${e}${Math.round(t/100*255).toString(16).padStart(2,`0`)}`}function v(e,t){return`rgba(${parseInt(e.slice(1,3),16)}, ${parseInt(e.slice(3,5),16)}, ${parseInt(e.slice(5,7),16)}, ${t/100})`}function y(e){let t=parseInt(e.slice(1,3),16)/255,n=parseInt(e.slice(3,5),16)/255,r=parseInt(e.slice(5,7),16)/255,i=Math.max(t,n,r),a=i-Math.min(t,n,r),o=0;a!==0&&(o=i===t?(n-r)/a%6:i===n?(r-t)/a+2:(t-n)/a+4,o*=60,o<0&&(o+=360));let s=i===0?0:a/i*100,c=i*100;return{h:o,s,v:c}}function b(e,t,n){let r=t/100,i=n/100,a=i*r,o=a*(1-Math.abs(e/60%2-1)),s=i-a,c=0,l=0,u=0;e<60?(c=a,l=o,u=0):e<120?(c=o,l=a,u=0):e<180?(c=0,l=a,u=o):e<240?(c=0,l=o,u=a):e<300?(c=o,l=0,u=a):(c=a,l=0,u=o);let d=e=>Math.round((e+s)*255).toString(16).padStart(2,`0`);return`#${d(c)}${d(l)}${d(u)}`}function x({hex:e,onChange:t,useInputComponent:n=!1}){let[i,o]=s(e),[c,l]=s(e);e!==c&&(l(e),o(e));function u(e){o(e);let n=e.startsWith(`#`)?e:`#${e}`;h(n)&&t(n)}function f(){h(i.startsWith(`#`)?i:`#${i}`)||o(e)}return n?d(r,{value:i,onChange:e=>u(e),onBlur:f}):d(`input`,{type:`text`,value:i,onChange:e=>u(e.target.value),onBlur:f,className:a.hexInput,spellCheck:!1})}function S({hue:e,sat:t,val:n,alpha:r,onHueChange:i,onSVChange:s,onAlphaChange:c,showInput:h=!0,showAlpha:v=!1}){let S=o(null);function C(e){let t=S.current.getBoundingClientRect(),n=Math.max(0,Math.min(1,(e.clientX-t.left)/t.width)),r=Math.max(0,Math.min(1,(e.clientY-t.top)/t.height));return{s:n*100,v:(1-r)*100}}function w(e){e.currentTarget.setPointerCapture(e.pointerId);let{s:t,v:n}=C(e);s(t,n);let r=e=>{let{s:t,v:n}=C(e);s(t,n)},i=()=>{window.removeEventListener(`pointermove`,r),window.removeEventListener(`pointerup`,i)};window.addEventListener(`pointermove`,r),window.addEventListener(`pointerup`,i)}function T(e){let{hex6:t,alpha:n}=g(e),{h:r,s:a,v:o}=y(t);i(r),s(a,o),v&&c(n)}let E=b(e,t,n),D=v?_(E,r,!0):E;return f(`div`,{className:a.panel,children:[f(`div`,{ref:S,className:a.gradientArea,style:{"--hue":e},onPointerDown:w,children:[d(`div`,{className:a.gradientOverlay}),d(`div`,{className:a.cursor,style:{left:`${t}%`,top:`${100-n}%`}})]}),d(`input`,{type:`range`,min:0,max:359,value:Math.round(e),onChange:e=>i(Number(e.target.value)),className:a.hueSlider}),v&&d(`input`,{type:`range`,min:0,max:100,value:Math.round(r),onChange:e=>c(Number(e.target.value)),className:a.alphaSlider,style:{"--alpha-color":E}}),(h||p)&&f(`div`,{className:a.hexRow,children:[h&&d(x,{hex:D,onChange:T}),p&&d(`button`,{type:`button`,className:a.eyeDropperButton,onClick:async()=>{let e=await m();e&&T(e)},"aria-label":`Pick color from screen`,children:d(l,{icon:u})})]})]})}var C=`#3b82f6`;function w({className:r,value:l=C,onChange:u,showInput:p=!1,showAlpha:m=!1,inline:h=!1,...w}){let[T,E]=s(!1),{hex6:D,alpha:O}=g(i(l)??C),k=y(D),[A,j]=s({h:k.h,s:k.s,v:k.v,a:O}),M=o(A),[N,P]=s(l);if(l!==N){P(l);let{hex6:e,alpha:t}=g(i(l)??C);if(e!==b(A.h,A.s,A.v)||t!==A.a){let n=y(e);j({h:n.h,s:n.s,v:n.v,a:t})}}let{h:F,s:I,v:L,a:R}=A;function z(e,t,n,r){u?.(_(b(e,t,n),r,m))}function B(e){M.current.h=e,j(t=>({...t,h:e})),z(e,M.current.s,M.current.v,M.current.a)}function V(e,t){M.current.s=e,M.current.v=t,j(n=>({...n,s:e,v:t})),z(M.current.h,e,t,M.current.a)}function H(e){M.current.a=e,j(t=>({...t,a:e})),z(M.current.h,M.current.s,M.current.v,e)}let U=b(F,I,L),W=m?v(U,R):U,G=_(U,R,m),K={hue:F,sat:I,val:L,alpha:R,onHueChange:B,onSVChange:V,onAlphaChange:H,showAlpha:m};return h?d(`div`,{...w,className:c(a.colorPicker,r),children:d(S,{...K,showInput:p})}):f(`div`,{...w,className:c(a.colorPicker,r),children:[d(n,{isOpen:T,onOpenChange:E,dontCloseOnChildClick:!0,align:t.Left,content:d(S,{...K}),children:f(e,{className:a.swatch,children:[d(`div`,{className:a.swatchFill,style:{background:W}}),d(`span`,{className:a.swatchHex,children:G})]})}),p&&d(x,{hex:G,onChange:e=>u?.(e),useInputComponent:!0})]})}export{w as default};
+import{useLabels as e}from"../configProvider/useLabels.mjs";import t from"../interactableDiv/index.mjs";import{Align as n}from"../floatingMenu/floatingMenu.types.mjs";import r from"../floatingMenu/floatingMenu.mjs";import i from"../input/input.mjs";import{toHex as a}from"./toHex.mjs";import o from"./colorPicker.module.mjs";import{useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as u}from"@fortawesome/react-fontawesome";import{faEyeDropper as d}from"@fortawesome/free-solid-svg-icons";import{jsx as f,jsxs as p}from"react/jsx-runtime";var m=typeof window<`u`&&`EyeDropper`in window;async function h(){let e=window.EyeDropper;if(!e)return null;try{return(await new e().open()).sRGBHex}catch{return null}}function g(e){return/^#[0-9a-fA-F]{6}$/.test(e)||/^#[0-9a-fA-F]{8}$/.test(e)}function _(e){return/^#[0-9a-fA-F]{8}$/.test(e)?{hex6:e.slice(0,7),alpha:parseInt(e.slice(7,9),16)/255*100}:{hex6:e.slice(0,7),alpha:100}}function v(e,t,n){return!n||t>=100?e:`${e}${Math.round(t/100*255).toString(16).padStart(2,`0`)}`}function y(e,t){return`rgba(${parseInt(e.slice(1,3),16)}, ${parseInt(e.slice(3,5),16)}, ${parseInt(e.slice(5,7),16)}, ${t/100})`}function b(e){let t=parseInt(e.slice(1,3),16)/255,n=parseInt(e.slice(3,5),16)/255,r=parseInt(e.slice(5,7),16)/255,i=Math.max(t,n,r),a=i-Math.min(t,n,r),o=0;a!==0&&(o=i===t?(n-r)/a%6:i===n?(r-t)/a+2:(t-n)/a+4,o*=60,o<0&&(o+=360));let s=i===0?0:a/i*100,c=i*100;return{h:o,s,v:c}}function x(e,t,n){let r=t/100,i=n/100,a=i*r,o=a*(1-Math.abs(e/60%2-1)),s=i-a,c=0,l=0,u=0;e<60?(c=a,l=o,u=0):e<120?(c=o,l=a,u=0):e<180?(c=0,l=a,u=o):e<240?(c=0,l=o,u=a):e<300?(c=o,l=0,u=a):(c=a,l=0,u=o);let d=e=>Math.round((e+s)*255).toString(16).padStart(2,`0`);return`#${d(c)}${d(l)}${d(u)}`}function S({hex:e,onChange:t,useInputComponent:n=!1}){let[r,a]=c(e),[s,l]=c(e);e!==s&&(l(e),a(e));function u(e){a(e);let n=e.startsWith(`#`)?e:`#${e}`;g(n)&&t(n)}function d(){g(r.startsWith(`#`)?r:`#${r}`)||a(e)}return n?f(i,{value:r,onChange:e=>u(e),onBlur:d}):f(`input`,{type:`text`,value:r,onChange:e=>u(e.target.value),onBlur:d,className:o.hexInput,spellCheck:!1})}function C({hue:e,sat:t,val:n,alpha:r,onHueChange:i,onSVChange:a,onAlphaChange:c,showInput:l=!0,showAlpha:g=!1,labels:y}){let C=s(null);function w(e){let t=C.current.getBoundingClientRect(),n=Math.max(0,Math.min(1,(e.clientX-t.left)/t.width)),r=Math.max(0,Math.min(1,(e.clientY-t.top)/t.height));return{s:n*100,v:(1-r)*100}}function T(e){e.currentTarget.setPointerCapture(e.pointerId);let{s:t,v:n}=w(e);a(t,n);let r=e=>{let{s:t,v:n}=w(e);a(t,n)},i=()=>{window.removeEventListener(`pointermove`,r),window.removeEventListener(`pointerup`,i)};window.addEventListener(`pointermove`,r),window.addEventListener(`pointerup`,i)}function E(e){let{hex6:t,alpha:n}=_(e),{h:r,s:o,v:s}=b(t);i(r),a(o,s),g&&c(n)}let D=x(e,t,n),O=g?v(D,r,!0):D;return p(`div`,{className:o.panel,children:[p(`div`,{ref:C,className:o.gradientArea,style:{"--hue":e},onPointerDown:T,children:[f(`div`,{className:o.gradientOverlay}),f(`div`,{className:o.cursor,style:{left:`${t}%`,top:`${100-n}%`}})]}),f(`input`,{type:`range`,min:0,max:359,value:Math.round(e),onChange:e=>i(Number(e.target.value)),className:o.hueSlider}),g&&f(`input`,{type:`range`,min:0,max:100,value:Math.round(r),onChange:e=>c(Number(e.target.value)),className:o.alphaSlider,style:{"--alpha-color":D}}),(l||m)&&p(`div`,{className:o.hexRow,children:[l&&f(S,{hex:O,onChange:E}),m&&f(`button`,{type:`button`,className:o.eyeDropperButton,onClick:async()=>{let e=await h();e&&E(e)},"aria-label":y.pickFromScreen,children:f(u,{icon:d})})]})]})}var w=`#3b82f6`,T={pickFromScreen:`Pick color from screen`};function E({className:i,value:u=w,onChange:d,showInput:m=!1,showAlpha:h=!1,inline:g=!1,labels:E,...D}){let O=e(`ColorPicker`,E,T),[k,A]=c(!1),{hex6:j,alpha:M}=_(a(u)??w),N=b(j),[P,F]=c({h:N.h,s:N.s,v:N.v,a:M}),I=s(P),[L,R]=c(u);if(u!==L){R(u);let{hex6:e,alpha:t}=_(a(u)??w);if(e!==x(P.h,P.s,P.v)||t!==P.a){let n=b(e);F({h:n.h,s:n.s,v:n.v,a:t})}}let{h:z,s:B,v:V,a:H}=P;function U(e,t,n,r){d?.(v(x(e,t,n),r,h))}function W(e){I.current.h=e,F(t=>({...t,h:e})),U(e,I.current.s,I.current.v,I.current.a)}function G(e,t){I.current.s=e,I.current.v=t,F(n=>({...n,s:e,v:t})),U(I.current.h,e,t,I.current.a)}function K(e){I.current.a=e,F(t=>({...t,a:e})),U(I.current.h,I.current.s,I.current.v,e)}let q=x(z,B,V),J=h?y(q,H):q,Y=v(q,H,h),X={hue:z,sat:B,val:V,alpha:H,onHueChange:W,onSVChange:G,onAlphaChange:K,showAlpha:h,labels:O};return g?f(`div`,{...D,className:l(o.colorPicker,i),children:f(C,{...X,showInput:m})}):p(`div`,{...D,className:l(o.colorPicker,i),children:[f(r,{isOpen:k,onOpenChange:A,dontCloseOnChildClick:!0,align:n.Left,content:f(C,{...X}),children:p(t,{className:o.swatch,children:[f(`div`,{className:o.swatchFill,style:{background:J}}),f(`span`,{className:o.swatchHex,children:Y})]})}),m&&f(S,{hex:Y,onChange:e=>d?.(e),useInputComponent:!0})]})}export{E as default};
 //# sourceMappingURL=colorPicker.mjs.map

package/dist/esm/common/colorPicker/colorPicker.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"colorPicker.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.tsx"],"sourcesContent":["import { useState, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faEyeDropper } from '@fortawesome/free-solid-svg-icons';\n\nimport InteractableDiv from 'components/common/interactableDiv';\nimport FloatingMenu from 'components/common/floatingMenu';\nimport Input from 'components/common/input';\nimport { Align } from 'components/common/floatingMenu/floatingMenu.types';\nimport type { ColorPickerProps } from './colorPicker.types';\n// Aliased: `hsvToHex` has a local `toHex` that formats one channel byte, which is a\n// different job from normalising a whole CSS colour.\nimport { toHex as cssToHex } from './toHex';\n\nimport styles from './colorPicker.module.pcss';\n\ninterface EyeDropperConstructor {\n new (): { open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }> };\n}\n\nconst eyeDropperSupported = typeof window !== 'undefined' && 'EyeDropper' in window;\n\nasync function pickColorFromScreen(): Promise<string \| null> {\n const EyeDropperCtor = (window as unknown as { EyeDropper?: EyeDropperConstructor }).EyeDropper;\n if (!EyeDropperCtor) return null;\n try {\n const result = await new EyeDropperCtor().open();\n return result.sRGBHex;\n } catch {\n return null; // user cancelled or picker failed\n }\n}\n\n// ── Color utilities ──────────────────────────────────────────────────────────\n\nfunction isValidHex(s: string): boolean {\n return /^#[0-9a-fA-F]{6}$/.test(s) \|\| /^#[0-9a-fA-F]{8}$/.test(s);\n}\n\n/** Split any valid hex into its 6-digit base and 0-100 alpha. /\nfunction parseHex(hex: string): { hex6: string; alpha: number } {\n if (/^#[0-9a-fA-F]{8}$/.test(hex)) {\n return {\n hex6: hex.slice(0, 7),\n alpha: (parseInt(hex.slice(7, 9), 16) / 255) 100,\n };\n }\n return { hex6: hex.slice(0, 7), alpha: 100 };\n}\n\n/** Combine a 6-digit hex + 0-100 alpha into the right output format.\n * Full opacity (alpha === 100) is omitted — 6-digit hex implies opaque. /\nfunction buildValue(hex6: string, alpha: number, showAlpha: boolean): string {\n if (!showAlpha \|\| alpha >= 100) return hex6;\n const a = Math.round((alpha / 100) 255)\n .toString(16)\n .padStart(2, '0');\n return `${hex6}${a}`;\n}\n\nfunction hexToRgba(hex6: string, alpha: number): string {\n const r = parseInt(hex6.slice(1, 3), 16);\n const g = parseInt(hex6.slice(3, 5), 16);\n const b = parseInt(hex6.slice(5, 7), 16);\n return `rgba(${r}, ${g}, ${b}, ${alpha / 100})`;\n}\n\nfunction hexToHsv(hex6: string): { h: number; s: number; v: number } {\n const r = parseInt(hex6.slice(1, 3), 16) / 255;\n const g = parseInt(hex6.slice(3, 5), 16) / 255;\n const b = parseInt(hex6.slice(5, 7), 16) / 255;\n\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const delta = max - min;\n\n let h = 0;\n if (delta !== 0) {\n if (max === r) h = ((g - b) / delta) % 6;\n else if (max === g) h = (b - r) / delta + 2;\n else h = (r - g) / delta + 4;\n h = 60;\n if (h < 0) h += 360;\n }\n\n // Deliberately unrounded: hsvToHex rounds once, at the byte. Rounding here too costs up to a\n // unit per channel, so a value handed in would come back out changed (#3b82f6 -> #3b82f5).\n const s = max === 0 ? 0 : (delta / max) 100;\n const v = max * 100;\n\n return { h, s, v };\n}\n\nfunction hsvToHex(h: number, s: number, v: number): string {\n const sv = s / 100;\n const vv = v / 100;\n const c = vv * sv;\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n const m = vv - c;\n\n let r = 0,\n g = 0,\n b = 0;\n if (h < 60) {\n r = c;\n g = x;\n b = 0;\n } else if (h < 120) {\n r = x;\n g = c;\n b = 0;\n } else if (h < 180) {\n r = 0;\n g = c;\n b = x;\n } else if (h < 240) {\n r = 0;\n g = x;\n b = c;\n } else if (h < 300) {\n r = x;\n g = 0;\n b = c;\n } else {\n r = c;\n g = 0;\n b = x;\n }\n\n const toHex = (n: number) =>\n Math.round((n + m) * 255)\n .toString(16)\n .padStart(2, '0');\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\n// ── HexInput ─────────────────────────────────────────────────────────────────\n\ninterface HexInputProps {\n hex: string;\n onChange: (hex: string) => void;\n useInputComponent?: boolean;\n}\n\nfunction HexInput({ hex, onChange, useInputComponent = false }: HexInputProps): ReactElement {\n const [draft, setDraft] = useState(hex);\n\n const [prevHex, setPrevHex] = useState(hex);\n if (hex !== prevHex) {\n setPrevHex(hex);\n setDraft(hex);\n }\n\n function handleChange(raw: string) {\n setDraft(raw);\n const normalized = raw.startsWith('#') ? raw : `#${raw}`;\n if (isValidHex(normalized)) onChange(normalized);\n }\n\n function handleBlur() {\n const normalized = draft.startsWith('#') ? draft : `#${draft}`;\n if (!isValidHex(normalized)) setDraft(hex);\n }\n\n if (useInputComponent) {\n return <Input value={draft} onChange={(value: string) => handleChange(value)} onBlur={handleBlur} />;\n }\n\n return (\n <input\n type='text'\n value={draft}\n onChange={(e) => handleChange(e.target.value)}\n onBlur={handleBlur}\n className={styles.hexInput}\n spellCheck={false}\n />\n );\n}\n\n// ── Picker panel ─────────────────────────────────────────────────────────────\n\ninterface PickerPanelProps {\n hue: number;\n sat: number;\n val: number;\n alpha: number;\n onHueChange: (h: number) => void;\n onSVChange: (s: number, v: number) => void;\n onAlphaChange: (a: number) => void;\n showInput?: boolean;\n showAlpha?: boolean;\n}\n\nfunction PickerPanel({\n hue,\n sat,\n val,\n alpha,\n onHueChange,\n onSVChange,\n onAlphaChange,\n showInput = true,\n showAlpha = false,\n}: PickerPanelProps): ReactElement {\n const gradientRef = useRef<HTMLDivElement>(null);\n\n function getSVFromEvent(e: { clientX: number; clientY: number }): { s: number; v: number } {\n const rect = gradientRef.current!.getBoundingClientRect();\n const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));\n return { s: x * 100, v: (1 - y) * 100 };\n }\n\n // Pointer Events (not mouse events) so dragging works for touch/pen too.\n function onGradientPointerDown(e: React.PointerEvent) {\n e.currentTarget.setPointerCapture(e.pointerId);\n const { s, v } = getSVFromEvent(e);\n onSVChange(s, v);\n\n const onMove = (ev: PointerEvent) => {\n const { s, v } = getSVFromEvent(ev);\n onSVChange(s, v);\n };\n const onUp = () => {\n window.removeEventListener('pointermove', onMove);\n window.removeEventListener('pointerup', onUp);\n };\n window.addEventListener('pointermove', onMove);\n window.addEventListener('pointerup', onUp);\n }\n\n function onHexChange(normalized: string) {\n const { hex6, alpha: parsedAlpha } = parseHex(normalized);\n const { h, s, v } = hexToHsv(hex6);\n onHueChange(h);\n onSVChange(s, v);\n if (showAlpha) onAlphaChange(parsedAlpha);\n }\n\n const hex6 = hsvToHex(hue, sat, val);\n const hexInputValue = showAlpha ? buildValue(hex6, alpha, true) : hex6;\n\n return (\n <div className={styles.panel}>\n <div\n ref={gradientRef}\n className={styles.gradientArea}\n style={{ '--hue': hue } as React.CSSProperties}\n onPointerDown={onGradientPointerDown}\n >\n <div className={styles.gradientOverlay} />\n <div className={styles.cursor} style={{ left: `${sat}%`, top: `${100 - val}%` }} />\n </div>\n\n <input\n type='range'\n min={0}\n max={359}\n value={Math.round(hue)}\n onChange={(e) => onHueChange(Number(e.target.value))}\n className={styles.hueSlider}\n />\n\n {showAlpha && (\n <input\n type='range'\n min={0}\n max={100}\n value={Math.round(alpha)}\n onChange={(e) => onAlphaChange(Number(e.target.value))}\n className={styles.alphaSlider}\n style={{ '--alpha-color': hex6 } as React.CSSProperties}\n />\n )}\n\n {(showInput \|\| eyeDropperSupported) && (\n <div className={styles.hexRow}>\n {showInput && <HexInput hex={hexInputValue} onChange={onHexChange} />}\n {eyeDropperSupported && (\n <button\n type='button'\n className={styles.eyeDropperButton}\n onClick={async () => {\n const hex = await pickColorFromScreen();\n if (hex) onHexChange(hex);\n }}\n aria-label='Pick color from screen'\n >\n <FontAwesomeIcon icon={faEyeDropper} />\n </button>\n )}\n </div>\n )}\n </div>\n );\n}\n\n// ── ColorPicker ───────────────────────────────────────────────────────────────\n\nconst DEFAULT_COLOR = '#3b82f6';\n\nfunction ColorPicker({\n className,\n value = DEFAULT_COLOR,\n onChange,\n showInput = false,\n showAlpha = false,\n inline = false,\n ...rest\n}: ColorPickerProps): ReactElement {\n const [isOpen, setIsOpen] = useState(false);\n\n const initSafe = cssToHex(value) ?? DEFAULT_COLOR;\n const { hex6: initHex6, alpha: initAlpha } = parseHex(initSafe);\n const initHsv = hexToHsv(initHex6);\n\n // Single state object so hue survives when saturation/value hit 0\n // (hexToHsv of any grey returns h=0, which would corrupt hue if derived from props).\n const [hsva, setHsva] = useState({ h: initHsv.h, s: initHsv.s, v: initHsv.v, a: initAlpha });\n\n // Ref mirrors state so drag callbacks never read stale closure values.\n const cur = useRef(hsva);\n\n // Sync from external prop changes: \"derive state during render\" pattern\n // avoids setState-in-effect. We compare the incoming hex against what our\n // current state produces — if they match, the change came from us and we skip.\n const [prevValue, setPrevValue] = useState(value);\n if (value !== prevValue) {\n setPrevValue(value);\n const safe = cssToHex(value) ?? DEFAULT_COLOR;\n const { hex6: incomingHex6, alpha: incomingA } = parseHex(safe);\n const currentHex6 = hsvToHex(hsva.h, hsva.s, hsva.v);\n if (incomingHex6 !== currentHex6 \|\| incomingA !== hsva.a) {\n const hsv = hexToHsv(incomingHex6);\n const next = { h: hsv.h, s: hsv.s, v: hsv.v, a: incomingA };\n setHsva(next);\n }\n }\n\n const { h: hue, s: sat, v: val, a: alpha } = hsva;\n\n function emit(h: number, s: number, v: number, a: number) {\n onChange?.(buildValue(hsvToHex(h, s, v), a, showAlpha));\n }\n\n function handleHueChange(h: number) {\n cur.current.h = h;\n setHsva((prev) => ({ ...prev, h }));\n emit(h, cur.current.s, cur.current.v, cur.current.a);\n }\n\n function handleSVChange(s: number, v: number) {\n cur.current.s = s;\n cur.current.v = v;\n setHsva((prev) => ({ ...prev, s, v }));\n emit(cur.current.h, s, v, cur.current.a);\n }\n\n function handleAlphaChange(a: number) {\n cur.current.a = a;\n setHsva((prev) => ({ ...prev, a }));\n emit(cur.current.h, cur.current.s, cur.current.v, a);\n }\n\n const hex6 = hsvToHex(hue, sat, val);\n const swatchBackground = showAlpha ? hexToRgba(hex6, alpha) : hex6;\n const displayValue = buildValue(hex6, alpha, showAlpha);\n\n const pickerPanelProps: PickerPanelProps = {\n hue,\n sat,\n val,\n alpha,\n onHueChange: handleHueChange,\n onSVChange: handleSVChange,\n onAlphaChange: handleAlphaChange,\n showAlpha,\n };\n\n if (inline) {\n return (\n <div {...rest} className={cx(styles.colorPicker, className)}>\n <PickerPanel {...pickerPanelProps} showInput={showInput} />\n </div>\n );\n }\n\n return (\n <div {...rest} className={cx(styles.colorPicker, className)}>\n <FloatingMenu\n isOpen={isOpen}\n onOpenChange={setIsOpen}\n dontCloseOnChildClick\n align={Align.Left}\n content={<PickerPanel {...pickerPanelProps} />}\n >\n <InteractableDiv className={styles.swatch}>\n <div className={styles.swatchFill} style={{ background: swatchBackground }} />\n <span className={styles.swatchHex}>{displayValue}</span>\n </InteractableDiv>\n </FloatingMenu>\n\n {showInput && <HexInput hex={displayValue} onChange={(v) => onChange?.(v)} useInputComponent />}\n </div>\n );\n}\n\nexport default ColorPicker;\n"],"mappings":"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"}
1	+ {"version":3,"file":"colorPicker.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.tsx"],"sourcesContent":["import { useState, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faEyeDropper } from '@fortawesome/free-solid-svg-icons';\n\nimport InteractableDiv from 'components/common/interactableDiv';\nimport FloatingMenu from 'components/common/floatingMenu';\nimport Input from 'components/common/input';\nimport { Align } from 'components/common/floatingMenu/floatingMenu.types';\nimport type { ColorPickerLabels, ColorPickerProps } from './colorPicker.types';\nimport { useLabels } from '../configProvider';\n// Aliased: `hsvToHex` has a local `toHex` that formats one channel byte, which is a\n// different job from normalising a whole CSS colour.\nimport { toHex as cssToHex } from './toHex';\n\nimport styles from './colorPicker.module.pcss';\n\ninterface EyeDropperConstructor {\n new (): { open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }> };\n}\n\nconst eyeDropperSupported = typeof window !== 'undefined' && 'EyeDropper' in window;\n\nasync function pickColorFromScreen(): Promise<string \| null> {\n const EyeDropperCtor = (window as unknown as { EyeDropper?: EyeDropperConstructor }).EyeDropper;\n if (!EyeDropperCtor) return null;\n try {\n const result = await new EyeDropperCtor().open();\n return result.sRGBHex;\n } catch {\n return null; // user cancelled or picker failed\n }\n}\n\n// ── Color utilities ──────────────────────────────────────────────────────────\n\nfunction isValidHex(s: string): boolean {\n return /^#[0-9a-fA-F]{6}$/.test(s) \|\| /^#[0-9a-fA-F]{8}$/.test(s);\n}\n\n/** Split any valid hex into its 6-digit base and 0-100 alpha. /\nfunction parseHex(hex: string): { hex6: string; alpha: number } {\n if (/^#[0-9a-fA-F]{8}$/.test(hex)) {\n return {\n hex6: hex.slice(0, 7),\n alpha: (parseInt(hex.slice(7, 9), 16) / 255) 100,\n };\n }\n return { hex6: hex.slice(0, 7), alpha: 100 };\n}\n\n/** Combine a 6-digit hex + 0-100 alpha into the right output format.\n * Full opacity (alpha === 100) is omitted — 6-digit hex implies opaque. /\nfunction buildValue(hex6: string, alpha: number, showAlpha: boolean): string {\n if (!showAlpha \|\| alpha >= 100) return hex6;\n const a = Math.round((alpha / 100) 255)\n .toString(16)\n .padStart(2, '0');\n return `${hex6}${a}`;\n}\n\nfunction hexToRgba(hex6: string, alpha: number): string {\n const r = parseInt(hex6.slice(1, 3), 16);\n const g = parseInt(hex6.slice(3, 5), 16);\n const b = parseInt(hex6.slice(5, 7), 16);\n return `rgba(${r}, ${g}, ${b}, ${alpha / 100})`;\n}\n\nfunction hexToHsv(hex6: string): { h: number; s: number; v: number } {\n const r = parseInt(hex6.slice(1, 3), 16) / 255;\n const g = parseInt(hex6.slice(3, 5), 16) / 255;\n const b = parseInt(hex6.slice(5, 7), 16) / 255;\n\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const delta = max - min;\n\n let h = 0;\n if (delta !== 0) {\n if (max === r) h = ((g - b) / delta) % 6;\n else if (max === g) h = (b - r) / delta + 2;\n else h = (r - g) / delta + 4;\n h = 60;\n if (h < 0) h += 360;\n }\n\n // Deliberately unrounded: hsvToHex rounds once, at the byte. Rounding here too costs up to a\n // unit per channel, so a value handed in would come back out changed (#3b82f6 -> #3b82f5).\n const s = max === 0 ? 0 : (delta / max) 100;\n const v = max * 100;\n\n return { h, s, v };\n}\n\nfunction hsvToHex(h: number, s: number, v: number): string {\n const sv = s / 100;\n const vv = v / 100;\n const c = vv * sv;\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n const m = vv - c;\n\n let r = 0,\n g = 0,\n b = 0;\n if (h < 60) {\n r = c;\n g = x;\n b = 0;\n } else if (h < 120) {\n r = x;\n g = c;\n b = 0;\n } else if (h < 180) {\n r = 0;\n g = c;\n b = x;\n } else if (h < 240) {\n r = 0;\n g = x;\n b = c;\n } else if (h < 300) {\n r = x;\n g = 0;\n b = c;\n } else {\n r = c;\n g = 0;\n b = x;\n }\n\n const toHex = (n: number) =>\n Math.round((n + m) * 255)\n .toString(16)\n .padStart(2, '0');\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\n// ── HexInput ─────────────────────────────────────────────────────────────────\n\ninterface HexInputProps {\n hex: string;\n onChange: (hex: string) => void;\n useInputComponent?: boolean;\n}\n\nfunction HexInput({ hex, onChange, useInputComponent = false }: HexInputProps): ReactElement {\n const [draft, setDraft] = useState(hex);\n\n const [prevHex, setPrevHex] = useState(hex);\n if (hex !== prevHex) {\n setPrevHex(hex);\n setDraft(hex);\n }\n\n function handleChange(raw: string) {\n setDraft(raw);\n const normalized = raw.startsWith('#') ? raw : `#${raw}`;\n if (isValidHex(normalized)) onChange(normalized);\n }\n\n function handleBlur() {\n const normalized = draft.startsWith('#') ? draft : `#${draft}`;\n if (!isValidHex(normalized)) setDraft(hex);\n }\n\n if (useInputComponent) {\n return <Input value={draft} onChange={(value: string) => handleChange(value)} onBlur={handleBlur} />;\n }\n\n return (\n <input\n type='text'\n value={draft}\n onChange={(e) => handleChange(e.target.value)}\n onBlur={handleBlur}\n className={styles.hexInput}\n spellCheck={false}\n />\n );\n}\n\n// ── Picker panel ─────────────────────────────────────────────────────────────\n\ninterface PickerPanelProps {\n hue: number;\n sat: number;\n val: number;\n alpha: number;\n onHueChange: (h: number) => void;\n onSVChange: (s: number, v: number) => void;\n onAlphaChange: (a: number) => void;\n showInput?: boolean;\n showAlpha?: boolean;\n labels: Required<ColorPickerLabels>;\n}\n\nfunction PickerPanel({\n hue,\n sat,\n val,\n alpha,\n onHueChange,\n onSVChange,\n onAlphaChange,\n showInput = true,\n showAlpha = false,\n labels,\n}: PickerPanelProps): ReactElement {\n const gradientRef = useRef<HTMLDivElement>(null);\n\n function getSVFromEvent(e: { clientX: number; clientY: number }): { s: number; v: number } {\n const rect = gradientRef.current!.getBoundingClientRect();\n const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));\n return { s: x * 100, v: (1 - y) * 100 };\n }\n\n // Pointer Events (not mouse events) so dragging works for touch/pen too.\n function onGradientPointerDown(e: React.PointerEvent) {\n e.currentTarget.setPointerCapture(e.pointerId);\n const { s, v } = getSVFromEvent(e);\n onSVChange(s, v);\n\n const onMove = (ev: PointerEvent) => {\n const { s, v } = getSVFromEvent(ev);\n onSVChange(s, v);\n };\n const onUp = () => {\n window.removeEventListener('pointermove', onMove);\n window.removeEventListener('pointerup', onUp);\n };\n window.addEventListener('pointermove', onMove);\n window.addEventListener('pointerup', onUp);\n }\n\n function onHexChange(normalized: string) {\n const { hex6, alpha: parsedAlpha } = parseHex(normalized);\n const { h, s, v } = hexToHsv(hex6);\n onHueChange(h);\n onSVChange(s, v);\n if (showAlpha) onAlphaChange(parsedAlpha);\n }\n\n const hex6 = hsvToHex(hue, sat, val);\n const hexInputValue = showAlpha ? buildValue(hex6, alpha, true) : hex6;\n\n return (\n <div className={styles.panel}>\n <div\n ref={gradientRef}\n className={styles.gradientArea}\n style={{ '--hue': hue } as React.CSSProperties}\n onPointerDown={onGradientPointerDown}\n >\n <div className={styles.gradientOverlay} />\n <div className={styles.cursor} style={{ left: `${sat}%`, top: `${100 - val}%` }} />\n </div>\n\n <input\n type='range'\n min={0}\n max={359}\n value={Math.round(hue)}\n onChange={(e) => onHueChange(Number(e.target.value))}\n className={styles.hueSlider}\n />\n\n {showAlpha && (\n <input\n type='range'\n min={0}\n max={100}\n value={Math.round(alpha)}\n onChange={(e) => onAlphaChange(Number(e.target.value))}\n className={styles.alphaSlider}\n style={{ '--alpha-color': hex6 } as React.CSSProperties}\n />\n )}\n\n {(showInput \|\| eyeDropperSupported) && (\n <div className={styles.hexRow}>\n {showInput && <HexInput hex={hexInputValue} onChange={onHexChange} />}\n {eyeDropperSupported && (\n <button\n type='button'\n className={styles.eyeDropperButton}\n onClick={async () => {\n const hex = await pickColorFromScreen();\n if (hex) onHexChange(hex);\n }}\n aria-label={labels.pickFromScreen}\n >\n <FontAwesomeIcon icon={faEyeDropper} />\n </button>\n )}\n </div>\n )}\n </div>\n );\n}\n\n// ── ColorPicker ───────────────────────────────────────────────────────────────\n\nconst DEFAULT_COLOR = '#3b82f6';\n\nconst DEFAULT_LABELS: Required<ColorPickerLabels> = {\n pickFromScreen: 'Pick color from screen',\n};\n\nfunction ColorPicker({\n className,\n value = DEFAULT_COLOR,\n onChange,\n showInput = false,\n showAlpha = false,\n inline = false,\n labels,\n ...rest\n}: ColorPickerProps): ReactElement {\n const text = useLabels('ColorPicker', labels, DEFAULT_LABELS);\n const [isOpen, setIsOpen] = useState(false);\n\n const initSafe = cssToHex(value) ?? DEFAULT_COLOR;\n const { hex6: initHex6, alpha: initAlpha } = parseHex(initSafe);\n const initHsv = hexToHsv(initHex6);\n\n // Single state object so hue survives when saturation/value hit 0\n // (hexToHsv of any grey returns h=0, which would corrupt hue if derived from props).\n const [hsva, setHsva] = useState({ h: initHsv.h, s: initHsv.s, v: initHsv.v, a: initAlpha });\n\n // Ref mirrors state so drag callbacks never read stale closure values.\n const cur = useRef(hsva);\n\n // Sync from external prop changes: \"derive state during render\" pattern\n // avoids setState-in-effect. We compare the incoming hex against what our\n // current state produces — if they match, the change came from us and we skip.\n const [prevValue, setPrevValue] = useState(value);\n if (value !== prevValue) {\n setPrevValue(value);\n const safe = cssToHex(value) ?? DEFAULT_COLOR;\n const { hex6: incomingHex6, alpha: incomingA } = parseHex(safe);\n const currentHex6 = hsvToHex(hsva.h, hsva.s, hsva.v);\n if (incomingHex6 !== currentHex6 \|\| incomingA !== hsva.a) {\n const hsv = hexToHsv(incomingHex6);\n const next = { h: hsv.h, s: hsv.s, v: hsv.v, a: incomingA };\n setHsva(next);\n }\n }\n\n const { h: hue, s: sat, v: val, a: alpha } = hsva;\n\n function emit(h: number, s: number, v: number, a: number) {\n onChange?.(buildValue(hsvToHex(h, s, v), a, showAlpha));\n }\n\n function handleHueChange(h: number) {\n cur.current.h = h;\n setHsva((prev) => ({ ...prev, h }));\n emit(h, cur.current.s, cur.current.v, cur.current.a);\n }\n\n function handleSVChange(s: number, v: number) {\n cur.current.s = s;\n cur.current.v = v;\n setHsva((prev) => ({ ...prev, s, v }));\n emit(cur.current.h, s, v, cur.current.a);\n }\n\n function handleAlphaChange(a: number) {\n cur.current.a = a;\n setHsva((prev) => ({ ...prev, a }));\n emit(cur.current.h, cur.current.s, cur.current.v, a);\n }\n\n const hex6 = hsvToHex(hue, sat, val);\n const swatchBackground = showAlpha ? hexToRgba(hex6, alpha) : hex6;\n const displayValue = buildValue(hex6, alpha, showAlpha);\n\n const pickerPanelProps: PickerPanelProps = {\n hue,\n sat,\n val,\n alpha,\n onHueChange: handleHueChange,\n onSVChange: handleSVChange,\n onAlphaChange: handleAlphaChange,\n showAlpha,\n labels: text,\n };\n\n if (inline) {\n return (\n <div {...rest} className={cx(styles.colorPicker, className)}>\n <PickerPanel {...pickerPanelProps} showInput={showInput} />\n </div>\n );\n }\n\n return (\n <div {...rest} className={cx(styles.colorPicker, className)}>\n <FloatingMenu\n isOpen={isOpen}\n onOpenChange={setIsOpen}\n dontCloseOnChildClick\n align={Align.Left}\n content={<PickerPanel {...pickerPanelProps} />}\n >\n <InteractableDiv className={styles.swatch}>\n <div className={styles.swatchFill} style={{ background: swatchBackground }} />\n <span className={styles.swatchHex}>{displayValue}</span>\n </InteractableDiv>\n </FloatingMenu>\n\n {showInput && <HexInput hex={displayValue} onChange={(v) => onChange?.(v)} useInputComponent />}\n </div>\n );\n}\n\nexport default ColorPicker;\n"],"mappings":"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"}

package/dist/esm/common/configProvider/useLabels.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{ConfigContext as e}from"./configProvider.mjs";import{useContext as t}from"react";function n(n,r,i){let a=t(e)?.[n]?.labels;return{...i,...a,...r}}export{n as useLabels};
2	+ //# sourceMappingURL=useLabels.mjs.map

package/dist/esm/common/configProvider/useLabels.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useLabels.mjs","names":[],"sources":["../../../../package/common/configProvider/useLabels.ts"],"sourcesContent":["import { useContext } from 'react';\n\nimport { ConfigContext } from './configProvider';\nimport type { ComponentDefaults } from './configProvider.types';\n\n/**\n * Resolves the text a component renders of its own, per key, from three places:\n * the component's built-in English, the nearest `ConfigProvider`, and the\n * instance's `labels` prop, in that order of increasing precedence.\n *\n * Per key is the point, and the reason this exists next to `useComponentDefaults`\n * rather than relying on it. That one fills in whole props: a `labels` object on\n * an instance would replace the provider's entirely, so translating an app once\n * and overriding a single string on one instance would silently drop every other\n * translation for that component.\n *\n * ```tsx\n * const DEFAULT_LABELS: Required<ModalLabels> = { close: 'Close' };\n *\n * function Modal({ labels, ...rest }: ModalProps) {\n * const text = useLabels('Modal', labels, DEFAULT_LABELS);\n * // text.close\n * }\n * ```\n */\nexport function useLabels<L extends object>(\n component: keyof ComponentDefaults,\n labels: Partial<L> | undefined,\n defaults: L,\n): L {\n const ctx = useContext(ConfigContext);\n const global = (ctx?.[component] as { labels?: Partial<L> } | undefined)?.labels;\n // Not memoised on purpose: `defaults` and `labels` are object literals at every\n // call site, so a dependency list would never hit and the bookkeeping would\n // cost more than three spreads of a handful of strings.\n return { ...defaults, ...global, ...labels };\n}\n"],"mappings":"wFAyBA,SAAgB,EACd,EACA,EACA,EACG,CAEH,IAAM,EADM,EAAW,CACP,CAAA,GAAM,EAAA,EAAoD,OAI1E,MAAO,CAAE,GAAG,EAAU,GAAG,EAAQ,GAAG,CAAO,CAC7C"}

package/dist/esm/common/confirmModal/confirmModal.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{ButtonStyleType as t}from"../button/button.types.mjs";import n from"../actionButtons/actionButtons.mjs";import r from"../modal/modal.mjs";import{useState as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";function s(s){let{children:c=null,className:l=``,onClose:u=()=>{},onConfirm:d=()=>{},title:f=``,content:p=null,isOpen:m=void 0,submitLabel:h=`Confirm`,cancelLabel:g=`Cancel`,isDelete:_=!1,actionButtonsProps:v={}}=e(`ConfirmModal`,s),[y,b]=i(!1),[x,S]=i(!1);function C(e=!1){b(!1),u(e)}async function w(){S(!0);try{await d(),C(!0)}catch{}finally{S(!1)}}let T=o(r,{title:f,isOpen:m===void 0?y:m,onClose:()=>C(),className:c?void 0:l,children:[p,a(n,{onClose:()=>C(),onSubmit:w,submitLabel:h,cancelLabel:g,submitButtonStyle:_?t.Delete:void 0,isSubmitButtonLoading:x,...v})]});return c?o(`div`,{className:l,children:[a(`span`,{onClick:()=>b(!0),children:c}),T]}):T}export{s as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{ButtonStyleType as n}from"../button/button.types.mjs";import r from"../actionButtons/actionButtons.mjs";import i from"../modal/modal.mjs";import{useState as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";var c={submit:`Confirm`,cancel:`Cancel`};function l(l){let{children:u=null,className:d=``,onClose:f=()=>{},onConfirm:p=()=>{},title:m=``,content:h=null,isOpen:g=void 0,labels:_,isDelete:v=!1,actionButtonsProps:y={}}=e(`ConfirmModal`,l),b=t(`ConfirmModal`,_,c),[x,S]=a(!1),[C,w]=a(!1);function T(e=!1){S(!1),f(e)}async function E(){w(!0);try{await p(),T(!0)}catch{}finally{w(!1)}}let D=s(i,{title:m,isOpen:g===void 0?x:g,onClose:()=>T(),className:u?void 0:d,children:[h,o(r,{onClose:()=>T(),onSubmit:E,labels:{submit:b.submit,cancel:b.cancel},submitButtonStyle:v?n.Delete:void 0,isSubmitButtonLoading:C,...y})]});return u?s(`div`,{className:d,children:[o(`span`,{onClick:()=>S(!0),children:u}),D]}):D}export{l as default};
 //# sourceMappingURL=confirmModal.mjs.map

package/dist/esm/common/confirmModal/confirmModal.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"confirmModal.mjs","names":[],"sources":["../../../../package/common/confirmModal/confirmModal.tsx"],"sourcesContent":["import { useState, type ReactElement } from 'react';\n\nimport Modal from '../modal';\nimport { ActionButtons } from '../actionButtons';\nimport { ButtonStyleType } from '../button';\nimport { useComponentDefaults } from '../configProvider';\nimport type { ConfirmModalProps } from './confirmModal.types';\n\nfunction ConfirmModal(props: ConfirmModalProps): ReactElement {\n const {\n children = null,\n className = '',\n onClose = () => {},\n onConfirm = () => {},\n title = '',\n content = null,\n isOpen: propIsOpen = undefined,\n ~~submitLabel = 'Confirm'~~,\n ~~cancelLabel = 'Cancel',\n~~ isDelete = false,\n actionButtonsProps = {},\n } = useComponentDefaults('ConfirmModal', props);\n const [internalOpen, setInternalOpen] = useState(false);\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n function handleClose(didSubmit = false) {\n setInternalOpen(false);\n onClose(didSubmit);\n }\n\n async function handleConfirm() {\n setIsSubmitting(true);\n try {\n await onConfirm();\n handleClose(true);\n } catch {\n // Nothing is awaiting this handler, so a rejection would surface as an unhandled one.\n // The dialog staying open is the signal that the action did not go through; reporting\n // the failure itself belongs to whoever wrote `onConfirm`.\n } finally {\n setIsSubmitting(false);\n }\n }\n\n const isOpen = propIsOpen === undefined ? internalOpen : propIsOpen;\n\n const modal = (\n <Modal title={title} isOpen={isOpen} onClose={() => handleClose()} className={children ? undefined : className}>\n {content}\n <ActionButtons\n onClose={() => handleClose()}\n onSubmit={handleConfirm}\n ~~submitLabel~~={~~submitLabel}\n cancelLabel=~~{~~cancelLabel~~}\n submitButtonStyle={isDelete ? ButtonStyleType.Delete : undefined}\n isSubmitButtonLoading={isSubmitting}\n {...actionButtonsProps}\n />\n </Modal>\n );\n\n if (!children) return modal;\n\n return (\n <div className={className}>\n <span onClick={() => setInternalOpen(true)}>{children}</span>\n {modal}\n </div>\n );\n}\n\nexport default ConfirmModal;\n"],"mappings":"~~sTAQA~~,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,WAAW,KACX,YAAY,GACZ,cAAgB,CAAC,EACjB,gBAAkB,CAAC,EACnB,QAAQ,GACR,UAAU,KACV,OAAQ,EAAa,IAAA,GACrB,~~cAAc~~,~~UACd,cAAc,SACd,~~WAAW,GACX,qBAAqB,CAAC,GACpB,EAAqB,eAAgB,CAAK,EACxC,CAAC,EAAc,GAAmB,EAAS,EAAK,EAChD,CAAC,EAAc,GAAmB,EAAS,EAAK,EAEtD,SAAS,EAAY,EAAY,GAAO,CACtC,EAAgB,EAAK,EACrB,EAAQ,CAAS,CACnB,CAEA,eAAe,GAAgB,CAC7B,EAAgB,EAAI,EACpB,GAAI,CACF,MAAM,EAAU,EAChB,EAAY,EAAI,CAClB,MAAQ,CAIR,QAAU,CACR,EAAgB,EAAK,CACvB,CACF,CAIA,IAAM,EACJ,EAAC,EAAD,CAAc,QAAe,OAHhB,IAAe,IAAA,GAAY,EAAe,EAGlB,YAAe,EAAY,EAAG,UAAW,EAAW,IAAA,GAAY,EAArG,SAAA,CACG,EACD,EAAC,EAAD,CACE,YAAe,EAAY,EAC3B,SAAU,~~EACG~~,~~cACA~~,~~cACb~~,kBAAmB,EAAW,EAAgB,OAAS,IAAA,GACvD,sBAAuB,EACvB,GAAI,CACL,CAAA,CACI,IAKT,OAFK,EAGH,EAAC,MAAD,CAAgB,YAAhB,SAAA,CACE,EAAC,OAAD,CAAM,YAAe,EAAgB,EAAI,EAAI,UAAe,CAAA,EAC3D,CACE,IANe,CAQxB"}
1	+ {"version":3,"file":"confirmModal.mjs","names":[],"sources":["../../../../package/common/confirmModal/confirmModal.tsx"],"sourcesContent":["import { useState, type ReactElement } from 'react';\n\nimport Modal from '../modal';\nimport { ActionButtons } from '../actionButtons';\nimport { ButtonStyleType } from '../button';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { ConfirmModalLabels, ConfirmModalProps } from './confirmModal.types';\n\nconst DEFAULT_LABELS: Required<ConfirmModalLabels> = {\n submit: 'Confirm',\n cancel: 'Cancel',\n};\n\nfunction ConfirmModal(props: ConfirmModalProps): ReactElement {\n const {\n children = null,\n className = '',\n onClose = () => {},\n onConfirm = () => {},\n title = '',\n content = null,\n isOpen: propIsOpen = undefined,\n labels,\n isDelete = false,\n actionButtonsProps = {},\n } = useComponentDefaults('ConfirmModal', props);\n const text = useLabels('ConfirmModal', labels, DEFAULT_LABELS);\n const [internalOpen, setInternalOpen] = useState(false);\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n function handleClose(didSubmit = false) {\n setInternalOpen(false);\n onClose(didSubmit);\n }\n\n async function handleConfirm() {\n setIsSubmitting(true);\n try {\n await onConfirm();\n handleClose(true);\n } catch {\n // Nothing is awaiting this handler, so a rejection would surface as an unhandled one.\n // The dialog staying open is the signal that the action did not go through; reporting\n // the failure itself belongs to whoever wrote `onConfirm`.\n } finally {\n setIsSubmitting(false);\n }\n }\n\n const isOpen = propIsOpen === undefined ? internalOpen : propIsOpen;\n\n const modal = (\n <Modal title={title} isOpen={isOpen} onClose={() => handleClose()} className={children ? undefined : className}>\n {content}\n <ActionButtons\n onClose={() => handleClose()}\n onSubmit={handleConfirm}\n labels={{ submit: text.submit, cancel: text.cancel }}\n submitButtonStyle={isDelete ? ButtonStyleType.Delete : undefined}\n isSubmitButtonLoading={isSubmitting}\n {...actionButtonsProps}\n />\n </Modal>\n );\n\n if (!children) return modal;\n\n return (\n <div className={className}>\n <span onClick={() => setInternalOpen(true)}>{children}</span>\n {modal}\n </div>\n );\n}\n\nexport default ConfirmModal;\n"],"mappings":"kXAQA,IAAM,EAA+C,CACnD,OAAQ,UACR,OAAQ,QACV,EAEA,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,WAAW,KACX,YAAY,GACZ,cAAgB,CAAC,EACjB,gBAAkB,CAAC,EACnB,QAAQ,GACR,UAAU,KACV,OAAQ,EAAa,IAAA,GACrB,SACA,WAAW,GACX,qBAAqB,CAAC,GACpB,EAAqB,eAAgB,CAAK,EACxC,EAAO,EAAU,eAAgB,EAAQ,CAAc,EACvD,CAAC,EAAc,GAAmB,EAAS,EAAK,EAChD,CAAC,EAAc,GAAmB,EAAS,EAAK,EAEtD,SAAS,EAAY,EAAY,GAAO,CACtC,EAAgB,EAAK,EACrB,EAAQ,CAAS,CACnB,CAEA,eAAe,GAAgB,CAC7B,EAAgB,EAAI,EACpB,GAAI,CACF,MAAM,EAAU,EAChB,EAAY,EAAI,CAClB,MAAQ,CAIR,QAAU,CACR,EAAgB,EAAK,CACvB,CACF,CAIA,IAAM,EACJ,EAAC,EAAD,CAAc,QAAe,OAHhB,IAAe,IAAA,GAAY,EAAe,EAGlB,YAAe,EAAY,EAAG,UAAW,EAAW,IAAA,GAAY,EAArG,SAAA,CACG,EACD,EAAC,EAAD,CACE,YAAe,EAAY,EAC3B,SAAU,EACV,OAAQ,CAAE,OAAQ,EAAK,OAAQ,OAAQ,EAAK,MAAO,EACnD,kBAAmB,EAAW,EAAgB,OAAS,IAAA,GACvD,sBAAuB,EACvB,GAAI,CACL,CAAA,CACI,IAKT,OAFK,EAGH,EAAC,MAAD,CAAgB,YAAhB,SAAA,CACE,EAAC,OAAD,CAAM,YAAe,EAAgB,EAAI,EAAI,UAAe,CAAA,EAC3D,CACE,IANe,CAQxB"}