@gusto/embedded-react-sdk 0.37.0 → 0.38.0-rc.2

package/dist/components/Common/UI/Checkbox/Checkbox.js

@@ -1,70 +1,81 @@
-import { jsx as e, jsxs as D } from "react/jsx-runtime";
-import { useFieldIds as F } from "../hooks/useFieldIds.js";
-import r from "./Checkbox.module.scss.js";
-import { CheckboxDefaults as M } from "./CheckboxTypes.js";
-import { applyMissingDefaults as j } from "../../../../helpers/applyMissingDefaults.js";
-import { HorizontalFieldLayout as B } from "../../HorizontalFieldLayout/HorizontalFieldLayout.js";
-import H from "../../../../assets/icons/checkbox.svg.js";
-const W = (a) => {
-  const c = j(a, M), {
-    name: d,
-    label: t,
-    description: s,
+import { jsx as s, jsxs as D } from "react/jsx-runtime";
+import F from "classnames";
+import { useFieldIds as M } from "../hooks/useFieldIds.js";
+import e from "./Checkbox.module.scss.js";
+import { CheckboxDefaults as j } from "./CheckboxTypes.js";
+import { applyMissingDefaults as B } from "../../../../helpers/applyMissingDefaults.js";
+import { HorizontalFieldLayout as H } from "../../HorizontalFieldLayout/HorizontalFieldLayout.js";
+import L from "../../../../assets/icons/checkbox.svg.js";
+const A = (d) => {
+  const l = B(d, j), {
+    name: t,
+    label: n,
+    description: r,
     errorMessage: i,
-    isRequired: l,
-    inputRef: n,
-    value: p,
-    isInvalid: m,
-    isDisabled: h,
-    id: u,
-    onChange: b,
+    isRequired: m,
+    inputRef: p,
+    value: o,
+    isInvalid: h,
+    isDisabled: a,
+    id: b,
+    onChange: u,
     onBlur: f,
     className: k,
     shouldVisuallyHideLabel: x,
     ...g
-  } = c, { inputId: o, errorMessageId: v, descriptionId: y, ariaDescribedBy: I } = F({
-    inputId: u,
+  } = l, { inputId: c, errorMessageId: v, descriptionId: y, ariaDescribedBy: I } = M({
+    inputId: b,
     errorMessage: i,
-    description: s
+    description: r
   }), C = (N) => {
-    b?.(N.target.checked);
+    u?.(N.target.checked);
   };
-  return /* @__PURE__ */ e(
-    B,
+  return /* @__PURE__ */ s(
+    H,
     {
-      label: t,
-      description: s,
+      label: n,
+      description: r,
       errorMessage: i,
-      isRequired: l,
-      htmlFor: o,
+      isRequired: m,
+      htmlFor: c,
       errorMessageId: v,
       descriptionId: y,
       shouldVisuallyHideLabel: x,
       className: k,
       ...g,
-      children: /* @__PURE__ */ D("div", { className: r.checkboxWrapper, children: [
-        /* @__PURE__ */ e(
-          "input",
-          {
-            type: "checkbox",
-            name: d,
-            disabled: h,
-            "aria-invalid": m,
-            "aria-describedby": I,
-            checked: p,
-            id: o,
-            ref: n,
-            onBlur: f,
-            onChange: C,
-            className: r.checkboxInput
-          }
-        ),
-        /* @__PURE__ */ e("div", { className: r.checkbox, children: /* @__PURE__ */ e(H, { className: r.check }) })
-      ] })
+      children: /* @__PURE__ */ D(
+        "div",
+        {
+          className: F(
+            e.checkboxWrapper,
+            o && e.checked,
+            a && e.disabled
+          ),
+          children: [
+            /* @__PURE__ */ s(
+              "input",
+              {
+                type: "checkbox",
+                name: t,
+                disabled: a,
+                "aria-invalid": h,
+                "aria-describedby": I,
+                checked: o,
+                id: c,
+                ref: p,
+                onBlur: f,
+                onChange: C,
+                className: e.checkboxInput
+              }
+            ),
+            /* @__PURE__ */ s("div", { className: e.checkbox, children: /* @__PURE__ */ s(L, { className: e.check }) })
+          ]
+        }
+      )
     }
   );
 };
 export {
-  W as Checkbox
+  A as Checkbox
 };
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/Common/UI/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Common/UI/Checkbox/Checkbox.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './Checkbox.module.scss'\nimport type { CheckboxProps } from './CheckboxTypes'\nimport { CheckboxDefaults } from './CheckboxTypes'\nimport { applyMissingDefaults } from '@/helpers/applyMissingDefaults'\nimport { HorizontalFieldLayout } from '@/components/Common/HorizontalFieldLayout'\nimport IconChecked from '@/assets/icons/checkbox.svg?react'\n\nexport const Checkbox = (rawProps: CheckboxProps) => {\n  const resolvedProps = applyMissingDefaults(rawProps, CheckboxDefaults)\n  const {\n    name,\n    label,\n    description,\n    errorMessage,\n    isRequired,\n    inputRef,\n    value,\n    isInvalid,\n    isDisabled,\n    id,\n    onChange,\n    onBlur,\n    className,\n    shouldVisuallyHideLabel,\n    ...otherProps\n  } = resolvedProps\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.checked)\n  }\n\n  return (\n    <HorizontalFieldLayout\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      htmlFor={inputId}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={className}\n      {...otherProps}\n    >\n      <div className={styles.checkboxWrapper}>\n        <input\n          type=\"checkbox\"\n          name={name}\n          disabled={isDisabled}\n          aria-invalid={isInvalid}\n          aria-describedby={ariaDescribedBy}\n          checked={value}\n          id={inputId}\n          ref={inputRef}\n          onBlur={onBlur}\n          onChange={handleChange}\n          className={styles.checkboxInput}\n        />\n        <div className={styles.checkbox}>\n          <IconChecked className={styles.check} />\n        </div>\n      </div>\n    </HorizontalFieldLayout>\n  )\n}\n"],"names":["Checkbox","rawProps","resolvedProps","applyMissingDefaults","CheckboxDefaults","name","label","description","errorMessage","isRequired","inputRef","value","isInvalid","isDisabled","id","onChange","onBlur","className","shouldVisuallyHideLabel","otherProps","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","handleChange","event","jsx","HorizontalFieldLayout","jsxs","styles","IconChecked"],"mappings":";;;;;;;AASO,MAAMA,IAAW,CAACC,MAA4B;AACnD,QAAMC,IAAgBC,EAAqBF,GAAUG,CAAgB,GAC/D;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,yBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDjB,GACE,EAAE,SAAAkB,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAASV;AAAA,IACT,cAAAN;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEKkB,IAAe,CAACC,MAAyC;AAC7D,IAAAX,IAAWW,EAAM,OAAO,OAAO;AAAA,EACjC;AAEA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAtB;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAASW;AAAA,MACT,gBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,yBAAAJ;AAAA,MACA,WAAAD;AAAA,MACC,GAAGE;AAAA,MAEJ,UAAA,gBAAAU,EAAC,OAAA,EAAI,WAAWC,EAAO,iBACrB,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAAtB;AAAA,YACA,UAAUQ;AAAA,YACV,gBAAcD;AAAA,YACd,oBAAkBW;AAAA,YAClB,SAASZ;AAAA,YACT,IAAIS;AAAA,YACJ,KAAKV;AAAA,YACL,QAAAM;AAAA,YACA,UAAUS;AAAA,YACV,WAAWK,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpB,gBAAAH,EAAC,OAAA,EAAI,WAAWG,EAAO,UACrB,4BAACC,GAAA,EAAY,WAAWD,EAAO,MAAA,CAAO,EAAA,CACxC;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Common/UI/Checkbox/Checkbox.tsx"],"sourcesContent":["import type { ChangeEvent } from 'react'\nimport classNames from 'classnames'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './Checkbox.module.scss'\nimport type { CheckboxProps } from './CheckboxTypes'\nimport { CheckboxDefaults } from './CheckboxTypes'\nimport { applyMissingDefaults } from '@/helpers/applyMissingDefaults'\nimport { HorizontalFieldLayout } from '@/components/Common/HorizontalFieldLayout'\nimport IconChecked from '@/assets/icons/checkbox.svg?react'\n\nexport const Checkbox = (rawProps: CheckboxProps) => {\n  const resolvedProps = applyMissingDefaults(rawProps, CheckboxDefaults)\n  const {\n    name,\n    label,\n    description,\n    errorMessage,\n    isRequired,\n    inputRef,\n    value,\n    isInvalid,\n    isDisabled,\n    id,\n    onChange,\n    onBlur,\n    className,\n    shouldVisuallyHideLabel,\n    ...otherProps\n  } = resolvedProps\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.checked)\n  }\n\n  return (\n    <HorizontalFieldLayout\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      isRequired={isRequired}\n      htmlFor={inputId}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={className}\n      {...otherProps}\n    >\n      <div\n        className={classNames(\n          styles.checkboxWrapper,\n          value && styles.checked,\n          isDisabled && styles.disabled,\n        )}\n      >\n        <input\n          type=\"checkbox\"\n          name={name}\n          disabled={isDisabled}\n          aria-invalid={isInvalid}\n          aria-describedby={ariaDescribedBy}\n          checked={value}\n          id={inputId}\n          ref={inputRef}\n          onBlur={onBlur}\n          onChange={handleChange}\n          className={styles.checkboxInput}\n        />\n        <div className={styles.checkbox}>\n          <IconChecked className={styles.check} />\n        </div>\n      </div>\n    </HorizontalFieldLayout>\n  )\n}\n"],"names":["Checkbox","rawProps","resolvedProps","applyMissingDefaults","CheckboxDefaults","name","label","description","errorMessage","isRequired","inputRef","value","isInvalid","isDisabled","id","onChange","onBlur","className","shouldVisuallyHideLabel","otherProps","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","handleChange","event","jsx","HorizontalFieldLayout","jsxs","classNames","styles","IconChecked"],"mappings":";;;;;;;;AAUO,MAAMA,IAAW,CAACC,MAA4B;AACnD,QAAMC,IAAgBC,EAAqBF,GAAUG,CAAgB,GAC/D;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,yBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDjB,GACE,EAAE,SAAAkB,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAASV;AAAA,IACT,cAAAN;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GAEKkB,IAAe,CAACC,MAAyC;AAC7D,IAAAX,IAAWW,EAAM,OAAO,OAAO;AAAA,EACjC;AAEA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAtB;AAAA,MACA,aAAAC;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAASW;AAAA,MACT,gBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,yBAAAJ;AAAA,MACA,WAAAD;AAAA,MACC,GAAGE;AAAA,MAEJ,UAAA,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC;AAAA,YACTC,EAAO;AAAA,YACPpB,KAASoB,EAAO;AAAA,YAChBlB,KAAckB,EAAO;AAAA,UAAA;AAAA,UAGvB,UAAA;AAAA,YAAA,gBAAAJ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,MAAAtB;AAAA,gBACA,UAAUQ;AAAA,gBACV,gBAAcD;AAAA,gBACd,oBAAkBW;AAAA,gBAClB,SAASZ;AAAA,gBACT,IAAIS;AAAA,gBACJ,KAAKV;AAAA,gBACL,QAAAM;AAAA,gBACA,UAAUS;AAAA,gBACV,WAAWM,EAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAEpB,gBAAAJ,EAAC,OAAA,EAAI,WAAWI,EAAO,UACrB,4BAACC,GAAA,EAAY,WAAWD,EAAO,MAAA,CAAO,EAAA,CACxC;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/Common/UI/Checkbox/Checkbox.module.scss.js

@@ -1,14 +1,18 @@
-const c = "_checkboxWrapper_19uv2_1", e = "_checkbox_19uv2_1", o = "_check_19uv2_1", h = "_checkboxInput_19uv2_29", k = {
+const c = "_checkboxWrapper_87qmz_1", e = "_checkbox_87qmz_1", _ = "_check_87qmz_1", o = "_checkboxInput_87qmz_29", h = "_checked_87qmz_45", k = "_disabled_87qmz_61", s = {
   checkboxWrapper: c,
   checkbox: e,
-  check: o,
-  checkboxInput: h
+  check: _,
+  checkboxInput: o,
+  checked: h,
+  disabled: k
 };
 export {
-  o as check,
+  _ as check,
   e as checkbox,
-  h as checkboxInput,
+  o as checkboxInput,
   c as checkboxWrapper,
-  k as default
+  h as checked,
+  s as default,
+  k as disabled
 };
 //# sourceMappingURL=Checkbox.module.scss.js.map

package/dist/components/Common/UI/Checkbox/Checkbox.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"Checkbox.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Common/UI/ComboBox/ComboBox.js

@@ -62,7 +62,7 @@ const tr = ({
             inputValue: e ?? "",
             onInputChange: (r) => c?.(r)
           } : {
-            selectedKey: e || void 0,
+            selectedKey: e || null,
             onSelectionChange: (r) => {
               r && c?.(r.toString());
             }

package/dist/components/Common/UI/ComboBox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sources":["../../../../../src/components/Common/UI/ComboBox/ComboBox.tsx"],"sourcesContent":["import type { Key } from 'react-aria-components'\nimport {\n  ComboBox as AriaComboBox,\n  Button,\n  Input,\n  ListBox,\n  ListBoxItem,\n  ListLayout,\n  Popover,\n  Virtualizer,\n} from 'react-aria-components'\nimport { useTranslation } from 'react-i18next'\nimport { useMemo } from 'react'\nimport classNames from 'classnames'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './ComboBox.module.scss'\nimport type { ComboBoxProps } from './ComboBoxTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\n\nexport const ComboBox = ({\n  allowsCustomValue,\n  className,\n  description,\n  errorMessage,\n  id,\n  isDisabled,\n  isInvalid,\n  isRequired,\n  label,\n  onChange,\n  onBlur,\n  options,\n  placeholder,\n  value,\n  inputRef,\n  shouldVisuallyHideLabel,\n  name,\n  ...props\n}: ComboBoxProps) => {\n  const { t } = useTranslation()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n  const { container } = useTheme()\n\n  const items = useMemo(() => {\n    return options.map(option => ({ name: option.label, id: option.value }))\n  }, [options])\n\n  return (\n    <FieldLayout\n      label={label}\n      htmlFor={inputId}\n      errorMessage={errorMessage}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      isRequired={isRequired}\n      description={description}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={classNames(styles.root, className)}\n      withErrorIcon={false}\n    >\n      <AriaComboBox\n        aria-label={label}\n        aria-describedby={ariaDescribedBy}\n        className={'react-aria-ComboBox-root'}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        menuTrigger=\"focus\"\n        allowsCustomValue={allowsCustomValue}\n        {...(allowsCustomValue\n          ? {\n              inputValue: value ?? '',\n              onInputChange: (inputVal: string) => onChange?.(inputVal),\n            }\n          : {\n              selectedKey: value ? (value as Key) : undefined,\n              onSelectionChange: (key: Key | null) => {\n                if (key) onChange?.(key.toString())\n              },\n            })}\n        id={inputId}\n        name={name}\n      >\n        <Input ref={inputRef} placeholder={placeholder} onBlur={onBlur} {...props} />\n        <Button>\n          <div aria-hidden=\"true\" className={styles.icons}>\n            {isInvalid && <AlertCircle fontSize={16} />}\n            <CaretDown title={t('icons.selectArrow')} />\n          </div>\n        </Button>\n\n        <Popover\n          className={classNames(styles.popover, 'react-aria-Popover')}\n          UNSTABLE_portalContainer={container.current}\n          maxHeight={320}\n        >\n          <Virtualizer layout={ListLayout}>\n            <ListBox items={items}>\n              {item => <ListBoxItem key={item.id}>{item.name}</ListBoxItem>}\n            </ListBox>\n          </Virtualizer>\n        </Popover>\n      </AriaComboBox>\n    </FieldLayout>\n  )\n}\n"],"names":["ComboBox","allowsCustomValue","className","description","errorMessage","id","isDisabled","isInvalid","isRequired","label","onChange","onBlur","options","placeholder","value","inputRef","shouldVisuallyHideLabel","name","props","t","useTranslation","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","container","useTheme","items","useMemo","option","jsx","FieldLayout","classNames","styles","jsxs","AriaComboBox","inputVal","key","Input","Button","AlertCircle","CaretDown","Popover","Virtualizer","ListLayout","ListBox","item","ListBoxItem"],"mappings":";;;;;;;;;;;;AAsBO,MAAMA,KAAW,CAAC;AAAA,EACvB,mBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,IAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACL,MAAqB;AACnB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAASpB;AAAA,IACT,cAAAD;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GACK,EAAE,WAAAuB,EAAA,IAAcC,EAAA,GAEhBC,IAAQC,EAAQ,MACbjB,EAAQ,IAAI,CAAAkB,OAAW,EAAE,MAAMA,EAAO,OAAO,IAAIA,EAAO,MAAA,EAAQ,GACtE,CAAClB,CAAO,CAAC;AAEZ,SACE,gBAAAmB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAvB;AAAA,MACA,SAASY;AAAA,MACT,cAAAjB;AAAA,MACA,gBAAAkB;AAAA,MACA,eAAAC;AAAA,MACA,YAAAf;AAAA,MACA,aAAAL;AAAA,MACA,yBAAAa;AAAA,MACA,WAAWiB,EAAWC,EAAO,MAAMhC,CAAS;AAAA,MAC5C,eAAe;AAAA,MAEf,UAAA,gBAAAiC;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,cAAY3B;AAAA,UACZ,oBAAkBe;AAAA,UAClB,WAAW;AAAA,UACX,YAAAlB;AAAA,UACA,WAAAC;AAAA,UACA,aAAY;AAAA,UACZ,mBAAAN;AAAA,UACC,GAAIA,IACD;AAAA,YACE,YAAYa,KAAS;AAAA,YACrB,eAAe,CAACuB,MAAqB3B,IAAW2B,CAAQ;AAAA,UAAA,IAE1D;AAAA,YACE,aAAavB,KAAyB;AAAA,YACtC,mBAAmB,CAACwB,MAAoB;AACtC,cAAIA,KAAK5B,IAAW4B,EAAI,SAAA,CAAU;AAAA,YACpC;AAAA,UAAA;AAAA,UAEN,IAAIjB;AAAA,UACJ,MAAAJ;AAAA,UAEA,UAAA;AAAA,YAAA,gBAAAc,EAACQ,KAAM,KAAKxB,GAAU,aAAAF,GAA0B,QAAAF,GAAiB,GAAGO,GAAO;AAAA,YAC3E,gBAAAa,EAACS,KACC,UAAA,gBAAAL,EAAC,OAAA,EAAI,eAAY,QAAO,WAAWD,EAAO,OACvC,UAAA;AAAA,cAAA3B,KAAa,gBAAAwB,EAACU,GAAA,EAAY,UAAU,GAAA,CAAI;AAAA,cACzC,gBAAAV,EAACW,GAAA,EAAU,OAAOvB,EAAE,mBAAmB,EAAA,CAAG;AAAA,YAAA,EAAA,CAC5C,EAAA,CACF;AAAA,YAEA,gBAAAY;AAAA,cAACY;AAAA,cAAA;AAAA,gBACC,WAAWV,EAAWC,EAAO,SAAS,oBAAoB;AAAA,gBAC1D,0BAA0BR,EAAU;AAAA,gBACpC,WAAW;AAAA,gBAEX,UAAA,gBAAAK,EAACa,GAAA,EAAY,QAAQC,GACnB,4BAACC,GAAA,EAAQ,OAAAlB,GACN,UAAA,CAAAmB,MAAQ,gBAAAhB,EAACiB,KAA2B,UAAAD,EAAK,KAAA,GAAfA,EAAK,EAAe,GACjD,EAAA,CACF;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ComboBox.js","sources":["../../../../../src/components/Common/UI/ComboBox/ComboBox.tsx"],"sourcesContent":["import type { Key } from 'react-aria-components'\nimport {\n  ComboBox as AriaComboBox,\n  Button,\n  Input,\n  ListBox,\n  ListBoxItem,\n  ListLayout,\n  Popover,\n  Virtualizer,\n} from 'react-aria-components'\nimport { useTranslation } from 'react-i18next'\nimport { useMemo } from 'react'\nimport classNames from 'classnames'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './ComboBox.module.scss'\nimport type { ComboBoxProps } from './ComboBoxTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\n\nexport const ComboBox = ({\n  allowsCustomValue,\n  className,\n  description,\n  errorMessage,\n  id,\n  isDisabled,\n  isInvalid,\n  isRequired,\n  label,\n  onChange,\n  onBlur,\n  options,\n  placeholder,\n  value,\n  inputRef,\n  shouldVisuallyHideLabel,\n  name,\n  ...props\n}: ComboBoxProps) => {\n  const { t } = useTranslation()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n  const { container } = useTheme()\n\n  const items = useMemo(() => {\n    return options.map(option => ({ name: option.label, id: option.value }))\n  }, [options])\n\n  return (\n    <FieldLayout\n      label={label}\n      htmlFor={inputId}\n      errorMessage={errorMessage}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      isRequired={isRequired}\n      description={description}\n      shouldVisuallyHideLabel={shouldVisuallyHideLabel}\n      className={classNames(styles.root, className)}\n      withErrorIcon={false}\n    >\n      <AriaComboBox\n        aria-label={label}\n        aria-describedby={ariaDescribedBy}\n        className={'react-aria-ComboBox-root'}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        menuTrigger=\"focus\"\n        allowsCustomValue={allowsCustomValue}\n        {...(allowsCustomValue\n          ? {\n              inputValue: value ?? '',\n              onInputChange: (inputVal: string) => onChange?.(inputVal),\n            }\n          : {\n              selectedKey: value ? (value as Key) : null,\n              onSelectionChange: (key: Key | null) => {\n                if (key) onChange?.(key.toString())\n              },\n            })}\n        id={inputId}\n        name={name}\n      >\n        <Input ref={inputRef} placeholder={placeholder} onBlur={onBlur} {...props} />\n        <Button>\n          <div aria-hidden=\"true\" className={styles.icons}>\n            {isInvalid && <AlertCircle fontSize={16} />}\n            <CaretDown title={t('icons.selectArrow')} />\n          </div>\n        </Button>\n\n        <Popover\n          className={classNames(styles.popover, 'react-aria-Popover')}\n          UNSTABLE_portalContainer={container.current}\n          maxHeight={320}\n        >\n          <Virtualizer layout={ListLayout}>\n            <ListBox items={items}>\n              {item => <ListBoxItem key={item.id}>{item.name}</ListBoxItem>}\n            </ListBox>\n          </Virtualizer>\n        </Popover>\n      </AriaComboBox>\n    </FieldLayout>\n  )\n}\n"],"names":["ComboBox","allowsCustomValue","className","description","errorMessage","id","isDisabled","isInvalid","isRequired","label","onChange","onBlur","options","placeholder","value","inputRef","shouldVisuallyHideLabel","name","props","t","useTranslation","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","container","useTheme","items","useMemo","option","jsx","FieldLayout","classNames","styles","jsxs","AriaComboBox","inputVal","key","Input","Button","AlertCircle","CaretDown","Popover","Virtualizer","ListLayout","ListBox","item","ListBoxItem"],"mappings":";;;;;;;;;;;;AAsBO,MAAMA,KAAW,CAAC;AAAA,EACvB,mBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,IAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACL,MAAqB;AACnB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR,EAAE,SAAAC,GAAS,gBAAAC,GAAgB,eAAAC,GAAe,iBAAAC,EAAA,IAAoBC,EAAY;AAAA,IAC9E,SAASpB;AAAA,IACT,cAAAD;AAAA,IACA,aAAAD;AAAA,EAAA,CACD,GACK,EAAE,WAAAuB,EAAA,IAAcC,EAAA,GAEhBC,IAAQC,EAAQ,MACbjB,EAAQ,IAAI,CAAAkB,OAAW,EAAE,MAAMA,EAAO,OAAO,IAAIA,EAAO,MAAA,EAAQ,GACtE,CAAClB,CAAO,CAAC;AAEZ,SACE,gBAAAmB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAvB;AAAA,MACA,SAASY;AAAA,MACT,cAAAjB;AAAA,MACA,gBAAAkB;AAAA,MACA,eAAAC;AAAA,MACA,YAAAf;AAAA,MACA,aAAAL;AAAA,MACA,yBAAAa;AAAA,MACA,WAAWiB,EAAWC,EAAO,MAAMhC,CAAS;AAAA,MAC5C,eAAe;AAAA,MAEf,UAAA,gBAAAiC;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,cAAY3B;AAAA,UACZ,oBAAkBe;AAAA,UAClB,WAAW;AAAA,UACX,YAAAlB;AAAA,UACA,WAAAC;AAAA,UACA,aAAY;AAAA,UACZ,mBAAAN;AAAA,UACC,GAAIA,IACD;AAAA,YACE,YAAYa,KAAS;AAAA,YACrB,eAAe,CAACuB,MAAqB3B,IAAW2B,CAAQ;AAAA,UAAA,IAE1D;AAAA,YACE,aAAavB,KAAyB;AAAA,YACtC,mBAAmB,CAACwB,MAAoB;AACtC,cAAIA,KAAK5B,IAAW4B,EAAI,SAAA,CAAU;AAAA,YACpC;AAAA,UAAA;AAAA,UAEN,IAAIjB;AAAA,UACJ,MAAAJ;AAAA,UAEA,UAAA;AAAA,YAAA,gBAAAc,EAACQ,KAAM,KAAKxB,GAAU,aAAAF,GAA0B,QAAAF,GAAiB,GAAGO,GAAO;AAAA,YAC3E,gBAAAa,EAACS,KACC,UAAA,gBAAAL,EAAC,OAAA,EAAI,eAAY,QAAO,WAAWD,EAAO,OACvC,UAAA;AAAA,cAAA3B,KAAa,gBAAAwB,EAACU,GAAA,EAAY,UAAU,GAAA,CAAI;AAAA,cACzC,gBAAAV,EAACW,GAAA,EAAU,OAAOvB,EAAE,mBAAmB,EAAA,CAAG;AAAA,YAAA,EAAA,CAC5C,EAAA,CACF;AAAA,YAEA,gBAAAY;AAAA,cAACY;AAAA,cAAA;AAAA,gBACC,WAAWV,EAAWC,EAAO,SAAS,oBAAoB;AAAA,gBAC1D,0BAA0BR,EAAU;AAAA,gBACpC,WAAW;AAAA,gBAEX,UAAA,gBAAAK,EAACa,GAAA,EAAY,QAAQC,GACnB,4BAACC,GAAA,EAAQ,OAAAlB,GACN,UAAA,CAAAmB,MAAQ,gBAAAhB,EAACiB,KAA2B,UAAAD,EAAK,KAAA,GAAfA,EAAK,EAAe,GACjD,EAAA,CACF;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/Common/UI/ComboBox/ComboBoxTypes.d.ts

@@ -38,7 +38,7 @@ export interface ComboBoxProps extends SharedFieldLayoutProps, Pick<InputHTMLAtt
     /**
      * Currently selected value
      */
-    value?: string;
+    value?: string | null;
     /**
      * React ref for the combo box input element
      */

package/dist/components/Common/UI/DatePicker/DatePicker.d.ts

@@ -1,2 +1,2 @@
 import { DatePickerProps } from './DatePickerTypes';
-export declare const DatePicker: ({ className, description, errorMessage, id, inputRef, isDisabled, isInvalid, isRequired, label, onChange, onBlur, value, portalContainer, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: ({ className, description, errorMessage, id, inputRef, isDisabled, isInvalid, isRequired, label, onChange, onBlur, value, portalContainer, minDate, maxDate, isDateDisabled, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/UI/DatePicker/DatePicker.js

@@ -1,93 +1,112 @@
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import { DatePicker as k, Group as A, DateInput as B, DateSegment as F, Button as c, Popover as L, Dialog as j, Calendar as E, Heading as G, CalendarGrid as M, CalendarCell as z } from "react-aria-components";
-import { useTranslation as H } from "react-i18next";
-import u from "classnames";
-import { parseDate as R } from "@internationalized/date";
-import { useFieldIds as U } from "../hooks/useFieldIds.js";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { DatePicker as z, Group as H, DateInput as R, DateSegment as V, Button as c, Popover as Y, Dialog as _, Calendar as $, Heading as q, CalendarGrid as J, CalendarCell as K } from "react-aria-components";
+import { useTranslation as O } from "react-i18next";
+import S from "classnames";
+import { parseDate as T } from "@internationalized/date";
+import { useFieldIds as Q } from "../hooks/useFieldIds.js";
 import i from "./DatePicker.module.scss.js";
-import { FieldLayout as _ } from "../../FieldLayout/FieldLayout.js";
+import { FieldLayout as W } from "../../FieldLayout/FieldLayout.js";
 import "react";
-import { useTheme as $ } from "../../../../contexts/ThemeProvider/useTheme.js";
+import { useTheme as X } from "../../../../contexts/ThemeProvider/useTheme.js";
 /* empty css                          */
-import q from "../../../../assets/icons/caret-down.svg.js";
-import J from "../../../../assets/icons/caret-right.svg.js";
-import K from "../../../../assets/icons/caret-left.svg.js";
-import O from "../../../../assets/icons/alert-circle.svg.js";
-import { formatDateToStringDate as Q } from "../../../../helpers/dateFormatting.js";
-function W(e) {
-  return e ? new Date(
-    e.year,
-    e.month - 1,
+import Z from "../../../../assets/icons/caret-down.svg.js";
+import rr from "../../../../assets/icons/caret-right.svg.js";
+import tr from "../../../../assets/icons/caret-left.svg.js";
+import er from "../../../../assets/icons/alert-circle.svg.js";
+import { formatDateToStringDate as or } from "../../../../helpers/dateFormatting.js";
+function C(t) {
+  if (!(t instanceof Date) || isNaN(t.getTime()))
+    return;
+  const o = [
+    String(t.getFullYear()).padStart(4, "0"),
+    String(t.getMonth() + 1).padStart(2, "0"),
+    String(t.getDate()).padStart(2, "0")
+  ].join("-");
+  return T(o);
+}
+function N(t) {
+  return t ? new Date(
+    t.year,
+    t.month - 1,
     // DateValue months are 1-indexed
-    e.day
+    t.day
   ) : null;
 }
-const pr = ({
-  className: e,
-  description: n,
+const Cr = ({
+  className: t,
+  description: o,
   errorMessage: l,
-  id: D,
-  inputRef: g,
-  isDisabled: v,
-  isInvalid: m,
-  isRequired: C,
-  label: s,
-  onChange: d,
-  onBlur: S,
+  id: y,
+  inputRef: I,
+  isDisabled: x,
+  isInvalid: s,
+  isRequired: P,
+  label: d,
+  onChange: m,
+  onBlur: j,
   value: p,
-  portalContainer: y,
-  ...I
+  portalContainer: w,
+  minDate: f,
+  maxDate: h,
+  isDateDisabled: u,
+  ...F
 }) => {
-  const { t: a } = H(), { inputId: h, errorMessageId: N, descriptionId: x, ariaDescribedBy: P } = U({
-    inputId: D,
+  const { t: a } = O(), { inputId: g, errorMessageId: b, descriptionId: k, ariaDescribedBy: A } = Q({
+    inputId: y,
     errorMessage: l,
-    description: n
-  }), { container: T } = $(), f = p ? Q(p) : "", w = f ? R(f) : null, b = (t) => {
-    d && d(W(t));
+    description: o
+  }), { container: B } = X(), D = p ? or(p) : "", L = D ? T(D) : null, M = f ? C(f) : void 0, E = h ? C(h) : void 0, G = u ? (e) => {
+    const v = N(e);
+    return v ? u(v) : !1;
+  } : void 0, U = (e) => {
+    m && m(N(e));
   };
   return /* @__PURE__ */ r(
-    _,
+    W,
     {
-      label: s,
-      htmlFor: h,
+      label: d,
+      htmlFor: g,
       errorMessage: l,
-      errorMessageId: N,
-      descriptionId: x,
-      isRequired: C,
-      description: n,
-      className: u(i.root, e),
+      errorMessageId: b,
+      descriptionId: k,
+      isRequired: P,
+      description: o,
+      className: S(i.root, t),
       withErrorIcon: !1,
-      children: /* @__PURE__ */ r("div", { className: i.container, children: /* @__PURE__ */ o(
-        k,
+      children: /* @__PURE__ */ r("div", { className: i.container, children: /* @__PURE__ */ n(
+        z,
         {
-          "aria-label": s,
-          "aria-describedby": P,
-          id: h,
-          isDisabled: v,
-          isInvalid: m,
-          value: w,
-          onChange: b,
-          ...I,
+          "aria-label": d,
+          "aria-describedby": A,
+          id: g,
+          isDisabled: x,
+          isInvalid: s,
+          value: L,
+          onChange: U,
+          minValue: M,
+          maxValue: E,
+          isDateUnavailable: G,
+          ...F,
           children: [
-            /* @__PURE__ */ o(A, { children: [
-              /* @__PURE__ */ r(B, { ref: g, children: (t) => /* @__PURE__ */ r(F, { segment: t }) }),
-              /* @__PURE__ */ o("div", { className: i.icons, children: [
-                m && /* @__PURE__ */ r(O, { "aria-hidden": "true", fontSize: 16 }),
-                /* @__PURE__ */ r(c, { onBlur: S, children: /* @__PURE__ */ r(q, { title: a("icons.calendarArrow") }) })
+            /* @__PURE__ */ n(H, { children: [
+              /* @__PURE__ */ r(R, { ref: I, children: (e) => /* @__PURE__ */ r(V, { segment: e }) }),
+              /* @__PURE__ */ n("div", { className: i.icons, children: [
+                s && /* @__PURE__ */ r(er, { "aria-hidden": "true", fontSize: 16 }),
+                /* @__PURE__ */ r(c, { onBlur: j, children: /* @__PURE__ */ r(Z, { title: a("icons.calendarArrow") }) })
               ] })
             ] }),
             /* @__PURE__ */ r(
-              L,
+              Y,
               {
-                className: u(i.popover, "react-aria-Popover"),
-                UNSTABLE_portalContainer: y || T.current,
-                children: /* @__PURE__ */ r(j, { children: /* @__PURE__ */ o(E, { children: [
-                  /* @__PURE__ */ o("header", { children: [
-                    /* @__PURE__ */ r(c, { slot: "previous", children: /* @__PURE__ */ r(K, { title: a("icons.previousMonth") }) }),
-                    /* @__PURE__ */ r(G, {}),
-                    /* @__PURE__ */ r(c, { slot: "next", children: /* @__PURE__ */ r(J, { title: a("icons.nextMonth") }) })
+                className: S(i.popover, "react-aria-Popover"),
+                UNSTABLE_portalContainer: w || B.current,
+                children: /* @__PURE__ */ r(_, { children: /* @__PURE__ */ n($, { children: [
+                  /* @__PURE__ */ n("header", { children: [
+                    /* @__PURE__ */ r(c, { slot: "previous", children: /* @__PURE__ */ r(tr, { title: a("icons.previousMonth") }) }),
+                    /* @__PURE__ */ r(q, {}),
+                    /* @__PURE__ */ r(c, { slot: "next", children: /* @__PURE__ */ r(rr, { title: a("icons.nextMonth") }) })
                   ] }),
-                  /* @__PURE__ */ r(M, { children: (t) => /* @__PURE__ */ r(z, { date: t }) })
+                  /* @__PURE__ */ r(J, { children: (e) => /* @__PURE__ */ r(K, { date: e }) })
                 ] }) })
               }
             )
@@ -98,6 +117,6 @@ const pr = ({
   );
 };
 export {
-  pr as DatePicker
+  Cr as DatePicker
 };
 //# sourceMappingURL=DatePicker.js.map

package/dist/components/Common/UI/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/Common/UI/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n  DatePicker as AriaDatePicker,\n  Button,\n  Calendar,\n  CalendarCell,\n  CalendarGrid,\n  DateInput,\n  DateSegment,\n  Dialog,\n  Group,\n  Heading,\n  Popover,\n  type DateValue,\n} from 'react-aria-components'\nimport { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport { parseDate } from '@internationalized/date'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './DatePicker.module.scss'\nimport type { DatePickerProps } from './DatePickerTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\nimport CaretRight from '@/assets/icons/caret-right.svg?react'\nimport CaretLeft from '@/assets/icons/caret-left.svg?react'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport { formatDateToStringDate } from '@/helpers/dateFormatting'\n\nfunction calendarDateValueToDate(dateValue: DateValue | null): Date | null {\n  if (!dateValue) return null\n\n  const date = new Date(\n    dateValue.year,\n    dateValue.month - 1, // DateValue months are 1-indexed\n    dateValue.day,\n  )\n\n  return date\n}\n\nexport const DatePicker = ({\n  className,\n  description,\n  errorMessage,\n  id,\n  inputRef,\n  isDisabled,\n  isInvalid,\n  isRequired,\n  label,\n  onChange,\n  onBlur,\n  value,\n  portalContainer,\n  ...props\n}: DatePickerProps) => {\n  const { t } = useTranslation()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n  const { container } = useTheme()\n\n  // Convert JavaScript Date to DateValue for internal use\n  // Format the date as YYYY-MM-DD for parseDate\n  const formattedDate = value ? formatDateToStringDate(value) : ''\n  const internalValue = formattedDate ? parseDate(formattedDate) : null\n\n  // Handle internal onChange to convert DateValue back to Date\n  const handleChange = (dateValue: DateValue | null) => {\n    if (onChange) {\n      onChange(calendarDateValueToDate(dateValue))\n    }\n  }\n\n  return (\n    <FieldLayout\n      label={label}\n      htmlFor={inputId}\n      errorMessage={errorMessage}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      isRequired={isRequired}\n      description={description}\n      className={classNames(styles.root, className)}\n      withErrorIcon={false}\n    >\n      <div className={styles.container}>\n        <AriaDatePicker\n          aria-label={label}\n          aria-describedby={ariaDescribedBy}\n          id={inputId}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          value={internalValue}\n          onChange={handleChange}\n          {...props}\n        >\n          <Group>\n            <DateInput ref={inputRef}>{segment => <DateSegment segment={segment} />}</DateInput>\n\n            <div className={styles.icons}>\n              {isInvalid && <AlertCircle aria-hidden=\"true\" fontSize={16} />}\n              <Button onBlur={onBlur}>\n                <CaretDown title={t('icons.calendarArrow')} />\n              </Button>\n            </div>\n          </Group>\n          <Popover\n            className={classNames(styles.popover, 'react-aria-Popover')}\n            UNSTABLE_portalContainer={portalContainer || container.current}\n          >\n            <Dialog>\n              <Calendar>\n                <header>\n                  <Button slot=\"previous\">\n                    <CaretLeft title={t('icons.previousMonth')} />\n                  </Button>\n                  <Heading />\n                  <Button slot=\"next\">\n                    <CaretRight title={t('icons.nextMonth')} />\n                  </Button>\n                </header>\n                <CalendarGrid>{date => <CalendarCell date={date} />}</CalendarGrid>\n              </Calendar>\n            </Dialog>\n          </Popover>\n        </AriaDatePicker>\n      </div>\n    </FieldLayout>\n  )\n}\n"],"names":["calendarDateValueToDate","dateValue","DatePicker","className","description","errorMessage","id","inputRef","isDisabled","isInvalid","isRequired","label","onChange","onBlur","value","portalContainer","props","t","useTranslation","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","container","useTheme","formattedDate","formatDateToStringDate","internalValue","parseDate","handleChange","jsx","FieldLayout","classNames","styles","jsxs","AriaDatePicker","Group","DateInput","DateSegment","segment","AlertCircle","Button","CaretDown","Popover","Dialog","Calendar","CaretLeft","Heading","CaretRight","CalendarGrid","date","CalendarCell"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/Common/UI/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n  DatePicker as AriaDatePicker,\n  Button,\n  Calendar,\n  CalendarCell,\n  CalendarGrid,\n  DateInput,\n  DateSegment,\n  Dialog,\n  Group,\n  Heading,\n  Popover,\n  type DateValue,\n} from 'react-aria-components'\nimport { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport { parseDate, type CalendarDate } from '@internationalized/date'\nimport { useFieldIds } from '../hooks/useFieldIds'\nimport styles from './DatePicker.module.scss'\nimport type { DatePickerProps } from './DatePickerTypes'\nimport { FieldLayout } from '@/components/Common/FieldLayout'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport CaretDown from '@/assets/icons/caret-down.svg?react'\nimport CaretRight from '@/assets/icons/caret-right.svg?react'\nimport CaretLeft from '@/assets/icons/caret-left.svg?react'\nimport AlertCircle from '@/assets/icons/alert-circle.svg?react'\nimport { formatDateToStringDate } from '@/helpers/dateFormatting'\n\nfunction dateToCalendarDate(date: Date): CalendarDate | undefined {\n  if (!(date instanceof Date) || isNaN(date.getTime())) {\n    return undefined\n  }\n\n  // Use local date parts to avoid UTC timezone shift from toISOString()\n  const dateString = [\n    String(date.getFullYear()).padStart(4, '0'),\n    String(date.getMonth() + 1).padStart(2, '0'),\n    String(date.getDate()).padStart(2, '0'),\n  ].join('-')\n\n  return parseDate(dateString)\n}\n\nfunction calendarDateValueToDate(dateValue: DateValue | null): Date | null {\n  if (!dateValue) return null\n\n  const date = new Date(\n    dateValue.year,\n    dateValue.month - 1, // DateValue months are 1-indexed\n    dateValue.day,\n  )\n\n  return date\n}\n\nexport const DatePicker = ({\n  className,\n  description,\n  errorMessage,\n  id,\n  inputRef,\n  isDisabled,\n  isInvalid,\n  isRequired,\n  label,\n  onChange,\n  onBlur,\n  value,\n  portalContainer,\n  minDate,\n  maxDate,\n  isDateDisabled,\n  ...props\n}: DatePickerProps) => {\n  const { t } = useTranslation()\n  const { inputId, errorMessageId, descriptionId, ariaDescribedBy } = useFieldIds({\n    inputId: id,\n    errorMessage,\n    description,\n  })\n  const { container } = useTheme()\n\n  // Convert JavaScript Date to DateValue for internal use\n  // Format the date as YYYY-MM-DD for parseDate\n  const formattedDate = value ? formatDateToStringDate(value) : ''\n  const internalValue = formattedDate ? parseDate(formattedDate) : null\n\n  // Convert date constraint props to react-aria DateValue format\n  const minValue = minDate ? dateToCalendarDate(minDate) : undefined\n  const maxValue = maxDate ? dateToCalendarDate(maxDate) : undefined\n  const isDateUnavailable = isDateDisabled\n    ? (dateValue: DateValue) => {\n        const jsDate = calendarDateValueToDate(dateValue)\n        return jsDate ? isDateDisabled(jsDate) : false\n      }\n    : undefined\n\n  // Handle internal onChange to convert DateValue back to Date\n  const handleChange = (dateValue: DateValue | null) => {\n    if (onChange) {\n      onChange(calendarDateValueToDate(dateValue))\n    }\n  }\n\n  return (\n    <FieldLayout\n      label={label}\n      htmlFor={inputId}\n      errorMessage={errorMessage}\n      errorMessageId={errorMessageId}\n      descriptionId={descriptionId}\n      isRequired={isRequired}\n      description={description}\n      className={classNames(styles.root, className)}\n      withErrorIcon={false}\n    >\n      <div className={styles.container}>\n        <AriaDatePicker\n          aria-label={label}\n          aria-describedby={ariaDescribedBy}\n          id={inputId}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          value={internalValue}\n          onChange={handleChange}\n          minValue={minValue}\n          maxValue={maxValue}\n          isDateUnavailable={isDateUnavailable}\n          {...props}\n        >\n          <Group>\n            <DateInput ref={inputRef}>{segment => <DateSegment segment={segment} />}</DateInput>\n\n            <div className={styles.icons}>\n              {isInvalid && <AlertCircle aria-hidden=\"true\" fontSize={16} />}\n              <Button onBlur={onBlur}>\n                <CaretDown title={t('icons.calendarArrow')} />\n              </Button>\n            </div>\n          </Group>\n          <Popover\n            className={classNames(styles.popover, 'react-aria-Popover')}\n            UNSTABLE_portalContainer={portalContainer || container.current}\n          >\n            <Dialog>\n              <Calendar>\n                <header>\n                  <Button slot=\"previous\">\n                    <CaretLeft title={t('icons.previousMonth')} />\n                  </Button>\n                  <Heading />\n                  <Button slot=\"next\">\n                    <CaretRight title={t('icons.nextMonth')} />\n                  </Button>\n                </header>\n                <CalendarGrid>{date => <CalendarCell date={date} />}</CalendarGrid>\n              </Calendar>\n            </Dialog>\n          </Popover>\n        </AriaDatePicker>\n      </div>\n    </FieldLayout>\n  )\n}\n"],"names":["dateToCalendarDate","date","dateString","parseDate","calendarDateValueToDate","dateValue","DatePicker","className","description","errorMessage","id","inputRef","isDisabled","isInvalid","isRequired","label","onChange","onBlur","value","portalContainer","minDate","maxDate","isDateDisabled","props","t","useTranslation","inputId","errorMessageId","descriptionId","ariaDescribedBy","useFieldIds","container","useTheme","formattedDate","formatDateToStringDate","internalValue","minValue","maxValue","isDateUnavailable","jsDate","handleChange","jsx","FieldLayout","classNames","styles","jsxs","AriaDatePicker","Group","DateInput","DateSegment","segment","AlertCircle","Button","CaretDown","Popover","Dialog","Calendar","CaretLeft","Heading","CaretRight","CalendarGrid","CalendarCell"],"mappings":"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"}

package/dist/components/Common/UI/DatePicker/DatePickerTypes.d.ts

@@ -37,4 +37,17 @@ export interface DatePickerProps extends SharedFieldLayoutProps, Pick<InputHTMLA
      * Element to use as the portal container
      */
     portalContainer?: HTMLElement;
+    /**
+     * Minimum selectable date. Dates before this will be disabled.
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date. Dates after this will be disabled.
+     */
+    maxDate?: Date;
+    /**
+     * Callback to determine if a specific date should be disabled.
+     * Return true to disable the date.
+     */
+    isDateDisabled?: (date: Date) => boolean;
 }

package/dist/components/Common/UI/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,2 @@
+import { DateRangePickerProps } from './DateRangePickerTypes';
+export declare const DateRangePicker: ({ label, value, onChange, startDateLabel, endDateLabel, minValue: minDate, maxValue: maxDate, }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/UI/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,72 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { DateRangePicker as I, RangeCalendar as R, Button as h, Heading as x, Group as y, DateInput as g, DateSegment as N, CalendarGrid as G, CalendarCell as j } from "react-aria-components";
+import { parseDate as k } from "@internationalized/date";
+import a from "./DateRangePicker.module.scss.js";
+import B from "../../../../assets/icons/caret-left.svg.js";
+import H from "../../../../assets/icons/caret-right.svg.js";
+function s(n) {
+  if (!(n instanceof Date) || isNaN(n.getTime())) return;
+  const t = [
+    String(n.getFullYear()).padStart(4, "0"),
+    String(n.getMonth() + 1).padStart(2, "0"),
+    String(n.getDate()).padStart(2, "0")
+  ].join("-");
+  return k(t);
+}
+function f(n) {
+  return new Date(n.year, n.month - 1, n.day);
+}
+const J = ({
+  label: n,
+  value: t,
+  onChange: d,
+  startDateLabel: i,
+  endDateLabel: c,
+  minValue: o,
+  maxValue: m
+}) => {
+  const p = t ? s(t.start) : void 0, u = t ? s(t.end) : void 0, C = p && u ? { start: p, end: u } : null, v = o ? s(o) : void 0, S = m ? s(m) : void 0;
+  return /* @__PURE__ */ e(
+    I,
+    {
+      value: C,
+      onChange: (r) => {
+        if (r) {
+          const D = {
+            start: f(r.start),
+            end: f(r.end)
+          };
+          d(D);
+        } else
+          d(null);
+      },
+      minValue: v,
+      maxValue: S,
+      "aria-label": typeof n == "string" ? n : void 0,
+      className: a.root,
+      children: /* @__PURE__ */ l(R, { className: a.rangeCalendar, children: [
+        /* @__PURE__ */ l("header", { className: a.calendarHeader, children: [
+          /* @__PURE__ */ e(h, { slot: "previous", className: a.calendarNavButton, children: /* @__PURE__ */ e(B, { "aria-hidden": !0 }) }),
+          /* @__PURE__ */ e(x, { className: a.calendarHeading }),
+          /* @__PURE__ */ e(h, { slot: "next", className: a.calendarNavButton, children: /* @__PURE__ */ e(H, { "aria-hidden": !0 }) })
+        ] }),
+        /* @__PURE__ */ l(y, { className: a.dateInputGroup, children: [
+          /* @__PURE__ */ l("div", { className: a.dateInputWrapper, children: [
+            /* @__PURE__ */ e("span", { className: a.dateInputLabel, children: i }),
+            /* @__PURE__ */ e(g, { slot: "start", className: a.dateInput, "aria-label": i, children: (r) => /* @__PURE__ */ e(N, { segment: r }) })
+          ] }),
+          /* @__PURE__ */ e("span", { className: a.rangeSeparator, "aria-hidden": "true", children: "–" }),
+          /* @__PURE__ */ l("div", { className: a.dateInputWrapper, children: [
+            /* @__PURE__ */ e("span", { className: a.dateInputLabel, children: c }),
+            /* @__PURE__ */ e(g, { slot: "end", className: a.dateInput, "aria-label": c, children: (r) => /* @__PURE__ */ e(N, { segment: r }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ e(G, { className: a.calendarGrid, children: (r) => /* @__PURE__ */ e(j, { date: r, className: a.calendarCell }) })
+      ] })
+    }
+  );
+};
+export {
+  J as DateRangePicker
+};
+//# sourceMappingURL=DateRangePicker.js.map

package/dist/components/Common/UI/DateRangePicker/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","sources":["../../../../../src/components/Common/UI/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import {\n  DateRangePicker as AriaDateRangePicker,\n  Button as AriaButton,\n  CalendarCell,\n  CalendarGrid,\n  DateInput,\n  DateSegment,\n  Group,\n  Heading,\n  RangeCalendar,\n  type DateValue,\n} from 'react-aria-components'\nimport { parseDate, type CalendarDate } from '@internationalized/date'\nimport type { DateRange, DateRangePickerProps } from './DateRangePickerTypes'\nimport styles from './DateRangePicker.module.scss'\nimport CaretLeft from '@/assets/icons/caret-left.svg?react'\nimport CaretRight from '@/assets/icons/caret-right.svg?react'\n\nfunction dateToCalendarDate(date: Date): CalendarDate | undefined {\n  if (!(date instanceof Date) || isNaN(date.getTime())) return undefined\n\n  const dateString = [\n    String(date.getFullYear()).padStart(4, '0'),\n    String(date.getMonth() + 1).padStart(2, '0'),\n    String(date.getDate()).padStart(2, '0'),\n  ].join('-')\n\n  return parseDate(dateString)\n}\n\nfunction calendarDateToJsDate(dateValue: DateValue): Date {\n  return new Date(dateValue.year, dateValue.month - 1, dateValue.day)\n}\n\nexport const DateRangePicker = ({\n  label,\n  value,\n  onChange,\n  startDateLabel,\n  endDateLabel,\n  minValue: minDate,\n  maxValue: maxDate,\n}: DateRangePickerProps) => {\n  const startCalendar = value ? dateToCalendarDate(value.start) : undefined\n  const endCalendar = value ? dateToCalendarDate(value.end) : undefined\n\n  const ariaValue = startCalendar && endCalendar ? { start: startCalendar, end: endCalendar } : null\n\n  const minValue = minDate ? dateToCalendarDate(minDate) : undefined\n  const maxValue = maxDate ? dateToCalendarDate(maxDate) : undefined\n\n  const handleRangeChange = (range: { start: DateValue; end: DateValue } | null) => {\n    if (range) {\n      const newRange: DateRange = {\n        start: calendarDateToJsDate(range.start),\n        end: calendarDateToJsDate(range.end),\n      }\n      onChange(newRange)\n    } else {\n      onChange(null)\n    }\n  }\n\n  return (\n    <AriaDateRangePicker\n      value={ariaValue}\n      onChange={handleRangeChange}\n      minValue={minValue}\n      maxValue={maxValue}\n      aria-label={typeof label === 'string' ? label : undefined}\n      className={styles.root}\n    >\n      <RangeCalendar className={styles.rangeCalendar}>\n        <header className={styles.calendarHeader}>\n          <AriaButton slot=\"previous\" className={styles.calendarNavButton}>\n            <CaretLeft aria-hidden />\n          </AriaButton>\n          <Heading className={styles.calendarHeading} />\n          <AriaButton slot=\"next\" className={styles.calendarNavButton}>\n            <CaretRight aria-hidden />\n          </AriaButton>\n        </header>\n        <Group className={styles.dateInputGroup}>\n          <div className={styles.dateInputWrapper}>\n            <span className={styles.dateInputLabel}>{startDateLabel}</span>\n            <DateInput slot=\"start\" className={styles.dateInput} aria-label={startDateLabel}>\n              {segment => <DateSegment segment={segment} />}\n            </DateInput>\n          </div>\n          <span className={styles.rangeSeparator} aria-hidden=\"true\">\n            –\n          </span>\n          <div className={styles.dateInputWrapper}>\n            <span className={styles.dateInputLabel}>{endDateLabel}</span>\n            <DateInput slot=\"end\" className={styles.dateInput} aria-label={endDateLabel}>\n              {segment => <DateSegment segment={segment} />}\n            </DateInput>\n          </div>\n        </Group>\n        <CalendarGrid className={styles.calendarGrid}>\n          {date => <CalendarCell date={date} className={styles.calendarCell} />}\n        </CalendarGrid>\n      </RangeCalendar>\n    </AriaDateRangePicker>\n  )\n}\n"],"names":["dateToCalendarDate","date","dateString","parseDate","calendarDateToJsDate","dateValue","DateRangePicker","label","value","onChange","startDateLabel","endDateLabel","minDate","maxDate","startCalendar","endCalendar","ariaValue","minValue","maxValue","jsx","AriaDateRangePicker","range","newRange","styles","jsxs","RangeCalendar","AriaButton","CaretLeft","Heading","CaretRight","Group","DateInput","segment","DateSegment","CalendarGrid","CalendarCell"],"mappings":"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"}