@salt-ds/lab 1.0.0-alpha.7 → 1.0.0-alpha.71

package/dist-cjs/date-picker/useDatePicker.js

@@ -0,0 +1,218 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
+var DatePickerOverlayProvider = require('./DatePickerOverlayProvider.js');
+
+function useDatePicker(props, ref) {
+  const {
+    dateAdapter,
+    defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate }
+  } = LocalizationProvider.useLocalization();
+  const {
+    readOnly = false,
+    disabled,
+    selectionVariant,
+    defaultSelectedDate,
+    isDayDisabled,
+    isDayHighlighted,
+    isDayUnselectable,
+    selectedDate: selectedDateProp,
+    onSelectionChange,
+    onApply,
+    minDate = defaultMinDate,
+    maxDate = defaultMaxDate,
+    onCancel,
+    timezone
+  } = props;
+  const previousSelectedDate = react.useRef();
+  const datePickerRef = react.useRef(null);
+  const containerRef = core.useForkRef(ref, datePickerRef);
+  const {
+    state: { open },
+    helpers: { setOpen, setOnDismiss }
+  } = DatePickerOverlayProvider.useDatePickerOverlay();
+  const [selectedDate, setSelectedDate] = core.useControlled({
+    controlled: selectedDateProp,
+    default: defaultSelectedDate,
+    name: "DatePicker",
+    state: "selectedDate"
+  });
+  const [enableApply, setEnableApply] = react.useState(false);
+  const [cancelled, setCancelled] = react.useState(false);
+  react.useEffect(() => {
+    if (open) {
+      previousSelectedDate.current = selectedDate;
+      if (enableApply) {
+        setOnDismiss(cancel);
+      }
+      setCancelled(false);
+    }
+  }, [enableApply, open, setOnDismiss, setCancelled]);
+  react.useEffect(() => {
+    if (cancelled) {
+      setSelectedDate(previousSelectedDate == null ? void 0 : previousSelectedDate.current);
+    }
+  }, [cancelled, setSelectedDate]);
+  const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } = core.useFormFieldProps();
+  const isReadOnly = readOnly || formFieldReadOnly || false;
+  const isDisabled = disabled || formFieldDisabled || false;
+  const applySingle = react.useCallback(
+    (event, date) => {
+      setCancelled(false);
+      setOpen(false, event.nativeEvent, "apply");
+      if (selectionVariant === "single") {
+        onApply == null ? void 0 : onApply(event, date);
+      }
+    },
+    [selectionVariant, setOpen, onApply]
+  );
+  const checkAndAddError = react.useCallback(
+    (date, checkFunction, errorType, details = {}) => {
+      const errorMessage = date ? checkFunction == null ? void 0 : checkFunction(date) : false;
+      if (errorMessage) {
+        details.errors = details.errors ?? [];
+        details.errors.push({
+          type: errorType,
+          message: errorMessage
+        });
+      }
+    },
+    []
+  );
+  const selectSingle = react.useCallback(
+    (event, date, details) => {
+      var _a;
+      const canBeApplied = dateAdapter.isValid(date) && !((_a = details == null ? void 0 : details.errors) == null ? void 0 : _a.length);
+      setSelectedDate(date);
+      checkAndAddError(date, isDayDisabled, "disabled", details);
+      checkAndAddError(date, isDayUnselectable, "unselectable", details);
+      if (selectionVariant === "single") {
+        onSelectionChange == null ? void 0 : onSelectionChange(event, date, details);
+      }
+      if (!enableApply && canBeApplied) {
+        applySingle(event, date);
+      }
+    },
+    [
+      checkAndAddError,
+      dateAdapter,
+      applySingle,
+      isDayDisabled,
+      isDayUnselectable,
+      enableApply,
+      onSelectionChange,
+      selectionVariant
+    ]
+  );
+  const applyRange = react.useCallback(
+    (event, date) => {
+      setCancelled(false);
+      setOpen(false, event.nativeEvent, "apply");
+      if (selectionVariant === "range") {
+        onApply == null ? void 0 : onApply(event, date);
+      }
+    },
+    [onApply, setOpen, selectionVariant]
+  );
+  const selectRange = react.useCallback(
+    (event, date, details) => {
+      var _a, _b, _c, _d;
+      setSelectedDate(date);
+      checkAndAddError(
+        date == null ? void 0 : date.startDate,
+        isDayDisabled,
+        "disabled",
+        details == null ? void 0 : details.startDate
+      );
+      checkAndAddError(
+        date == null ? void 0 : date.endDate,
+        isDayDisabled,
+        "disabled",
+        details == null ? void 0 : details.endDate
+      );
+      checkAndAddError(
+        date == null ? void 0 : date.startDate,
+        isDayUnselectable,
+        "unselectable",
+        details == null ? void 0 : details.startDate
+      );
+      checkAndAddError(
+        date == null ? void 0 : date.endDate,
+        isDayUnselectable,
+        "unselectable",
+        details == null ? void 0 : details.endDate
+      );
+      if (selectionVariant === "range") {
+        onSelectionChange == null ? void 0 : onSelectionChange(event, date, details);
+      }
+      const isAValidRange = dateAdapter.isValid(date == null ? void 0 : date.startDate) && dateAdapter.isValid(date == null ? void 0 : date.endDate);
+      const isValidSelection = !((_b = (_a = details == null ? void 0 : details.startDate) == null ? void 0 : _a.errors) == null ? void 0 : _b.length) && !((_d = (_c = details == null ? void 0 : details.endDate) == null ? void 0 : _c.errors) == null ? void 0 : _d.length);
+      const canBeApplied = isAValidRange && isValidSelection;
+      if (!enableApply && canBeApplied) {
+        applyRange(event, date);
+      }
+    },
+    [
+      checkAndAddError,
+      dateAdapter,
+      applyRange,
+      isDayDisabled,
+      isDayUnselectable,
+      enableApply,
+      onSelectionChange,
+      selectionVariant
+    ]
+  );
+  const cancel = react.useCallback(
+    (event) => {
+      setCancelled(true);
+      setOpen(false, event, "cancel");
+      onCancel == null ? void 0 : onCancel();
+    },
+    [setOpen, onCancel]
+  );
+  const returnValue = {
+    state: {
+      selectionVariant,
+      selectedDate,
+      cancelled,
+      enableApply,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      containerRef,
+      minDate,
+      maxDate,
+      timezone
+    },
+    helpers: {
+      cancel,
+      isDayDisabled,
+      isDayHighlighted,
+      isDayUnselectable,
+      setEnableApply
+    }
+  };
+  if (props.selectionVariant === "range") {
+    return {
+      ...returnValue,
+      helpers: {
+        ...returnValue.helpers,
+        apply: applyRange,
+        select: selectRange
+      }
+    };
+  }
+  return {
+    ...returnValue,
+    helpers: {
+      ...returnValue.helpers,
+      apply: applySingle,
+      select: selectSingle
+    }
+  };
+}
+
+exports.useDatePicker = useDatePicker;
+//# sourceMappingURL=useDatePicker.js.map

package/dist-cjs/date-picker/useDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDatePicker.js","sources":["../src/date-picker/useDatePicker.ts"],"sourcesContent":["import { useControlled, useForkRef, useFormFieldProps } from \"@salt-ds/core\";\nimport type { DateFrameworkType, Timezone } from \"@salt-ds/date-adapters\";\nimport {\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport type {\n  DateInputRangeDetails,\n  DateInputSingleDetails,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport type {\n  RangeDatePickerState,\n  SingleDatePickerState,\n} from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\ninterface UseDatePickerBaseProps<TDate> {\n  /** If `true`, the component is disabled. */\n  disabled?: boolean;\n  /**\n   * Function to determine if a day is disabled.\n   * @param date - The date to check.\n   * @returns A string reason if the day is disabled, otherwise `false` or `undefined`.\n   */\n  isDayDisabled?: (date: TDate) => string | false | undefined;\n  /**\n   * Function to determine if a day is highlighted.\n   * @param date - The date to check.\n   * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.\n   */\n  isDayHighlighted?: (date: TDate) => string | false | undefined;\n  /**\n   * Function to determine if a day is unselectable.\n   * @param date - The date to check.\n   * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.\n   */\n  isDayUnselectable?: (date: TDate) => string | false | undefined;\n  /** If `true`, the component is read-only. */\n  readOnly?: boolean;\n  /**\n   * The minimum date for the range, default is 1900.\n   */\n  minDate?: TDate;\n  /**\n   * The maximum date for the range, default is 2100.\n   */\n  maxDate?: TDate;\n  /**\n   * Handler for when the date selection is cancelled.\n   */\n  onCancel?: () => void;\n  /**\n   * Timezone, if un-defined will take the timezone from passed date (or defaultSelectedDate/selectedDate)\n   * Can also be set to \"default\" to use the default timezone of the date library\n   * Can also be set to \"system\" to take the timezone of the local system.\n   */\n  timezone?: Timezone;\n}\n\n/**\n * Props for single date selection.\n * @template TDate - The type of the date object.\n */\nexport interface UseDatePickerSingleProps<TDate extends DateFrameworkType>\n  extends UseDatePickerBaseProps<TDate> {\n  /**\n   * Single date selection.\n   */\n  selectionVariant: \"single\";\n  /**\n   * The selected date. The selected date will be controlled when this prop is provided.\n   */\n  selectedDate?: SingleDateSelection<TDate> | null;\n  /**\n   * The initial selected date, when the selected date is uncontrolled.\n   */\n  defaultSelectedDate?: SingleDateSelection<TDate> | null;\n  /**\n   * Handler called when the selected date changes.\n   * @param event - The synthetic event.\n   * @param date - The selected date or null.\n   * @param details - The selected date details.\n   */\n  onSelectionChange?: (\n    event: SyntheticEvent,\n    date: SingleDateSelection<TDate> | null,\n    details?: DateInputSingleDetails,\n  ) => void;\n  /**\n   * Handler called when the selected date is confirmed/applied.\n   * @param event - The synthetic event.\n   * @param date - The selected date or null.\n   */\n  onApply?: (\n    event: SyntheticEvent,\n    date: SingleDateSelection<TDate> | null,\n  ) => void;\n}\n\n/**\n * Props for date range selection.\n * @template TDate - The type of the date object.\n */\nexport interface UseDatePickerRangeProps<TDate extends DateFrameworkType>\n  extends UseDatePickerBaseProps<TDate> {\n  /**\n   * Date range selection.\n   */\n  selectionVariant: \"range\";\n  /**\n   * The selected date range. The selected date will be controlled when this prop is provided.\n   */\n  selectedDate?: DateRangeSelection<TDate> | null;\n  /**\n   * The initial selected date range, when the selected date is uncontrolled.\n   */\n  defaultSelectedDate?: DateRangeSelection<TDate> | null;\n  /**\n   * Handler called when the selected date range changes.\n   * @param event - The synthetic event.\n   * @param date - The selected date range or null.\n   * @param details - The selected date range details.\n   */\n  onSelectionChange?: (\n    event: SyntheticEvent,\n    date: DateRangeSelection<TDate> | null,\n    details?: DateInputRangeDetails,\n  ) => void;\n  /**\n   * Handler called when the selected date range is confirmed/applied.\n   * @param event - The synthetic event.\n   * @param date - The selected date range.\n   */\n  onApply?: (\n    event: SyntheticEvent,\n    date: DateRangeSelection<TDate> | null,\n  ) => void;\n}\n\n/**\n * Props for the useDatePicker hook.\n * @template TDate - The type of the date object.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n */\nexport type UseDatePickerProps<\n  TDate extends DateFrameworkType,\n  SelectionVariant,\n> = SelectionVariant extends \"single\"\n  ? UseDatePickerSingleProps<TDate>\n  : SelectionVariant extends \"range\"\n    ? UseDatePickerRangeProps<TDate>\n    : never;\n\n/**\n * Custom hook for managing date picker state.\n * @template TDate - The type of the date object.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n * @param props - The props for the date picker.\n * @param ref - The ref for the date picker container.\n * @returns The date picker state and helpers.\n */\nexport function useDatePicker<\n  TDate extends DateFrameworkType,\n  SelectionVariant extends \"single\" | \"range\",\n>(\n  props: UseDatePickerProps<TDate, SelectionVariant>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n): SingleDatePickerState<TDate> | RangeDatePickerState<TDate> {\n  const {\n    dateAdapter,\n    defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate },\n  } = useLocalization<TDate>();\n  const {\n    readOnly = false,\n    disabled,\n    selectionVariant,\n    defaultSelectedDate,\n    isDayDisabled,\n    isDayHighlighted,\n    isDayUnselectable,\n    selectedDate: selectedDateProp,\n    onSelectionChange,\n    onApply,\n    minDate = defaultMinDate,\n    maxDate = defaultMaxDate,\n    onCancel,\n    timezone,\n  } = props;\n\n  const previousSelectedDate = useRef<typeof selectedDateProp>();\n  const datePickerRef = useRef<HTMLDivElement>(null);\n  const containerRef = useForkRef(ref, datePickerRef);\n\n  const {\n    state: { open },\n    helpers: { setOpen, setOnDismiss },\n  } = useDatePickerOverlay();\n\n  const [selectedDate, setSelectedDate] = useControlled({\n    controlled: selectedDateProp,\n    default: defaultSelectedDate,\n    name: \"DatePicker\",\n    state: \"selectedDate\",\n  });\n\n  const [enableApply, setEnableApply] = useState<boolean>(false);\n  const [cancelled, setCancelled] = useState<boolean>(false);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n  useEffect(() => {\n    if (open) {\n      previousSelectedDate.current = selectedDate;\n      if (enableApply) {\n        setOnDismiss(cancel);\n      }\n      setCancelled(false);\n    }\n  }, [enableApply, open, setOnDismiss, setCancelled]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n  useEffect(() => {\n    if (cancelled) {\n      setSelectedDate(previousSelectedDate?.current);\n    }\n  }, [cancelled, setSelectedDate]);\n\n  const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =\n    useFormFieldProps();\n  const isReadOnly = readOnly || formFieldReadOnly || false;\n  const isDisabled = disabled || formFieldDisabled || false;\n\n  const applySingle = useCallback(\n    (event: SyntheticEvent, date: SingleDateSelection<TDate> | null): void => {\n      setCancelled(false);\n      setOpen(false, event.nativeEvent, \"apply\");\n      if (selectionVariant === \"single\") {\n        onApply?.(event, date);\n      }\n    },\n    [selectionVariant, setOpen, onApply],\n  );\n\n  const checkAndAddError = useCallback(\n    (\n      date: TDate | null | undefined,\n      checkFunction: ((date: TDate) => string | false | undefined) | undefined,\n      errorType: string,\n      details: {\n        errors?: { type: string; message: string | false | undefined }[];\n      } = {},\n    ) => {\n      const errorMessage = date ? checkFunction?.(date) : false;\n      if (errorMessage) {\n        details.errors = details.errors ?? [];\n        details.errors.push({\n          type: errorType,\n          message: errorMessage,\n        });\n      }\n    },\n    [],\n  );\n\n  const selectSingle = useCallback(\n    (\n      event: SyntheticEvent,\n      date: SingleDateSelection<TDate> | null,\n      details: DateInputSingleDetails,\n    ) => {\n      const canBeApplied =\n        dateAdapter.isValid(date) && !details?.errors?.length;\n      setSelectedDate(date);\n      checkAndAddError(date, isDayDisabled, \"disabled\", details);\n      checkAndAddError(date, isDayUnselectable, \"unselectable\", details);\n\n      if (selectionVariant === \"single\") {\n        onSelectionChange?.(event, date, details);\n      }\n      if (!enableApply && canBeApplied) {\n        applySingle(event, date);\n      }\n    },\n    [\n      checkAndAddError,\n      dateAdapter,\n      applySingle,\n      isDayDisabled,\n      isDayUnselectable,\n      enableApply,\n      onSelectionChange,\n      selectionVariant,\n    ],\n  );\n\n  const applyRange = useCallback(\n    (event: SyntheticEvent, date: DateRangeSelection<TDate> | null): void => {\n      setCancelled(false);\n      setOpen(false, event.nativeEvent, \"apply\");\n      if (selectionVariant === \"range\") {\n        onApply?.(event, date);\n      }\n    },\n    [onApply, setOpen, selectionVariant],\n  );\n\n  const selectRange = useCallback(\n    (\n      event: SyntheticEvent,\n      date: DateRangeSelection<TDate> | null,\n      details: DateInputRangeDetails,\n    ) => {\n      setSelectedDate(date);\n      checkAndAddError(\n        date?.startDate,\n        isDayDisabled,\n        \"disabled\",\n        details?.startDate,\n      );\n      checkAndAddError(\n        date?.endDate,\n        isDayDisabled,\n        \"disabled\",\n        details?.endDate,\n      );\n      checkAndAddError(\n        date?.startDate,\n        isDayUnselectable,\n        \"unselectable\",\n        details?.startDate,\n      );\n      checkAndAddError(\n        date?.endDate,\n        isDayUnselectable,\n        \"unselectable\",\n        details?.endDate,\n      );\n\n      if (selectionVariant === \"range\") {\n        onSelectionChange?.(event, date, details);\n      }\n      const isAValidRange =\n        dateAdapter.isValid(date?.startDate) &&\n        dateAdapter.isValid(date?.endDate);\n      const isValidSelection =\n        !details?.startDate?.errors?.length &&\n        !details?.endDate?.errors?.length;\n      const canBeApplied = isAValidRange && isValidSelection;\n      if (!enableApply && canBeApplied) {\n        applyRange(event, date);\n      }\n    },\n    [\n      checkAndAddError,\n      dateAdapter,\n      applyRange,\n      isDayDisabled,\n      isDayUnselectable,\n      enableApply,\n      onSelectionChange,\n      selectionVariant,\n    ],\n  );\n\n  const cancel = useCallback(\n    (event?: Event) => {\n      setCancelled(true);\n      setOpen(false, event, \"cancel\");\n      onCancel?.();\n    },\n    [setOpen, onCancel],\n  );\n\n  const returnValue = {\n    state: {\n      selectionVariant,\n      selectedDate,\n      cancelled,\n      enableApply,\n      disabled: isDisabled,\n      readOnly: isReadOnly,\n      containerRef,\n      minDate,\n      maxDate,\n      timezone,\n    },\n    helpers: {\n      cancel,\n      isDayDisabled,\n      isDayHighlighted,\n      isDayUnselectable,\n      setEnableApply,\n    },\n  };\n  if (props.selectionVariant === \"range\") {\n    return {\n      ...returnValue,\n      helpers: {\n        ...returnValue.helpers,\n        apply: applyRange,\n        select: selectRange,\n      },\n    } as RangeDatePickerState<TDate>;\n  }\n  return {\n    ...returnValue,\n    helpers: {\n      ...returnValue.helpers,\n      apply: applySingle,\n      select: selectSingle,\n    },\n  } as SingleDatePickerState<TDate>;\n}\n"],"names":["useLocalization","useRef","useForkRef","useDatePickerOverlay","useControlled","useState","useEffect","useFormFieldProps","useCallback"],"mappings":"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"}

package/dist-cjs/date-picker/useFocusOut.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var react = require('react');
+
+function getTabbableElements(parent) {
+  const focusableSelectors = [
+    "button:not([disabled])",
+    "input:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])'
+  ];
+  const tabbableElements = parent.querySelectorAll(
+    focusableSelectors.join(",")
+  );
+  return Array.from(tabbableElements).filter(
+    (element) => !element.hasAttribute("disabled") && element.tabIndex >= 0
+  );
+}
+function useFocusOut(context, props) {
+  const { onOpenChange} = context;
+  const { enabled = true } = props;
+  const reference = react.useMemo(() => {
+    const referenceElement = context.elements.reference;
+    if (!referenceElement) {
+      return {};
+    }
+    return {
+      onKeyDown(event) {
+        if (event.key === "Tab") {
+          const tabbableElements = getTabbableElements(referenceElement);
+          const tabbedBeforeFirstElement = event.shiftKey && document.activeElement === tabbableElements[0];
+          const tabbedAfterLastElement = document.activeElement === tabbableElements[tabbableElements.length - 1];
+          if (tabbedBeforeFirstElement || tabbedAfterLastElement) {
+            onOpenChange(false, event.nativeEvent, "focus-out");
+          }
+        }
+      }
+    };
+  }, [onOpenChange, context.elements.reference]);
+  return react.useMemo(() => enabled ? { reference } : {}, [enabled, reference]);
+}
+
+exports.useFocusOut = useFocusOut;
+//# sourceMappingURL=useFocusOut.js.map

package/dist-cjs/date-picker/useFocusOut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusOut.js","sources":["../src/date-picker/useFocusOut.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { useMemo } from \"react\";\n\nexport interface UseFocusOutProps {\n  /**\n   * Whether the hook is enabled\n   * @default true\n   */\n  enabled?: boolean;\n}\n\nfunction getTabbableElements(parent: Element): HTMLElement[] {\n  const focusableSelectors = [\n    \"button:not([disabled])\",\n    \"input:not([disabled])\",\n    '[tabindex]:not([tabindex=\"-1\"])',\n  ];\n  const tabbableElements = parent.querySelectorAll<HTMLElement>(\n    focusableSelectors.join(\",\"),\n  );\n  return Array.from(tabbableElements).filter(\n    (element) => !element.hasAttribute(\"disabled\") && element.tabIndex >= 0,\n  );\n}\n//\n// This hook is needed to close the overlay, when,\n// 1. the floating element is opened\n// 2. the user re-focuses into the reference element with the mouse\n// 3. the user tabs out of the reference element\n// Without this hook, the floating element can re-receive focus\nexport function useFocusOut(\n  context: FloatingContext,\n  props: UseFocusOutProps,\n): ElementProps {\n  const { onOpenChange, open } = context;\n  const { enabled = true } = props;\n\n  const reference: ElementProps[\"reference\"] = useMemo<\n    React.HTMLProps<Element>\n  >(() => {\n    const referenceElement = context.elements.reference as Element | undefined;\n\n    if (!referenceElement) {\n      return {};\n    }\n\n    return {\n      onKeyDown(event: React.KeyboardEvent<Element>) {\n        if (event.key === \"Tab\") {\n          const tabbableElements = getTabbableElements(referenceElement);\n          const tabbedBeforeFirstElement =\n            event.shiftKey && document.activeElement === tabbableElements[0];\n          const tabbedAfterLastElement =\n            document.activeElement ===\n            tabbableElements[tabbableElements.length - 1];\n          if (tabbedBeforeFirstElement || tabbedAfterLastElement) {\n            onOpenChange(false, event.nativeEvent, \"focus-out\");\n          }\n        }\n      },\n    };\n  }, [onOpenChange, context.elements.reference]);\n\n  return useMemo(() => (enabled ? { reference } : {}), [enabled, reference]);\n}\n"],"names":["useMemo"],"mappings":";;;;AAWA,SAAS,oBAAoB,MAAgC,EAAA;AAC3D,EAAA,MAAM,kBAAqB,GAAA;AAAA,IACzB,wBAAA;AAAA,IACA,uBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,mBAAmB,MAAO,CAAA,gBAAA;AAAA,IAC9B,kBAAA,CAAmB,KAAK,GAAG;AAAA,GAC7B;AACA,EAAO,OAAA,KAAA,CAAM,IAAK,CAAA,gBAAgB,CAAE,CAAA,MAAA;AAAA,IAClC,CAAC,YAAY,CAAC,OAAA,CAAQ,aAAa,UAAU,CAAA,IAAK,QAAQ,QAAY,IAAA;AAAA,GACxE;AACF;AAOgB,SAAA,WAAA,CACd,SACA,KACc,EAAA;AACd,EAAM,MAAA,EAAE,YAAmB,CAAI,GAAA,OAAA;AAC/B,EAAM,MAAA,EAAE,OAAU,GAAA,IAAA,EAAS,GAAA,KAAA;AAE3B,EAAM,MAAA,SAAA,GAAuCA,cAE3C,MAAM;AACN,IAAM,MAAA,gBAAA,GAAmB,QAAQ,QAAS,CAAA,SAAA;AAE1C,IAAA,IAAI,CAAC,gBAAkB,EAAA;AACrB,MAAA,OAAO,EAAC;AAAA;AAGV,IAAO,OAAA;AAAA,MACL,UAAU,KAAqC,EAAA;AAC7C,QAAI,IAAA,KAAA,CAAM,QAAQ,KAAO,EAAA;AACvB,UAAM,MAAA,gBAAA,GAAmB,oBAAoB,gBAAgB,CAAA;AAC7D,UAAA,MAAM,2BACJ,KAAM,CAAA,QAAA,IAAY,QAAS,CAAA,aAAA,KAAkB,iBAAiB,CAAC,CAAA;AACjE,UAAA,MAAM,yBACJ,QAAS,CAAA,aAAA,KACT,gBAAiB,CAAA,gBAAA,CAAiB,SAAS,CAAC,CAAA;AAC9C,UAAA,IAAI,4BAA4B,sBAAwB,EAAA;AACtD,YAAa,YAAA,CAAA,KAAA,EAAO,KAAM,CAAA,WAAA,EAAa,WAAW,CAAA;AAAA;AACpD;AACF;AACF,KACF;AAAA,KACC,CAAC,YAAA,EAAc,OAAQ,CAAA,QAAA,CAAS,SAAS,CAAC,CAAA;AAE7C,EAAO,OAAAA,aAAA,CAAQ,MAAO,OAAA,GAAU,EAAE,SAAA,EAAc,GAAA,EAAK,EAAA,CAAC,OAAS,EAAA,SAAS,CAAC,CAAA;AAC3E;;;;"}

package/dist-cjs/date-picker/useKeyboard.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var react = require('react');
+
+function useKeyboard(_context, props) {
+  const { enabled = true, onArrowDown } = props;
+  const reference = react.useMemo(
+    () => ({
+      onKeyDown(event) {
+        if (event.key === "ArrowDown") {
+          event.preventDefault();
+          onArrowDown == null ? void 0 : onArrowDown(event);
+        }
+      }
+    }),
+    [onArrowDown]
+  );
+  return react.useMemo(() => enabled ? { reference } : {}, [enabled, reference]);
+}
+
+exports.useKeyboard = useKeyboard;
+//# sourceMappingURL=useKeyboard.js.map

package/dist-cjs/date-picker/useKeyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboard.js","sources":["../src/date-picker/useKeyboard.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { type KeyboardEvent, useMemo } from \"react\";\n\nexport interface UseKeyboardProps {\n  /**\n   * Whether the hook is enabled\n   * @default true\n   */\n  enabled?: boolean;\n  /**\n   * Handler for when the arrow key down is pressed\n   * @param event\n   */\n  onArrowDown?: (event: KeyboardEvent) => void;\n}\n\n/**\n * Floating UI Interactions hook, that will open DatePicker on keydown\n * @param context\n * @param props\n */\nexport function useKeyboard(\n  _context: FloatingContext,\n  props: UseKeyboardProps,\n): ElementProps {\n  const { enabled = true, onArrowDown } = props;\n  const reference = useMemo(\n    () => ({\n      onKeyDown(event: KeyboardEvent) {\n        if (event.key === \"ArrowDown\") {\n          event.preventDefault();\n          onArrowDown?.(event);\n        }\n      },\n    }),\n    [onArrowDown],\n  );\n\n  return useMemo(() => (enabled ? { reference } : {}), [enabled, reference]);\n}\n"],"names":["useMemo"],"mappings":";;;;AAqBgB,SAAA,WAAA,CACd,UACA,KACc,EAAA;AACd,EAAA,MAAM,EAAE,OAAA,GAAU,IAAM,EAAA,WAAA,EAAgB,GAAA,KAAA;AACxC,EAAA,MAAM,SAAY,GAAAA,aAAA;AAAA,IAChB,OAAO;AAAA,MACL,UAAU,KAAsB,EAAA;AAC9B,QAAI,IAAA,KAAA,CAAM,QAAQ,WAAa,EAAA;AAC7B,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAc,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAA,KAAA,CAAA;AAAA;AAChB;AACF,KACF,CAAA;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAO,OAAAA,aAAA,CAAQ,MAAO,OAAA,GAAU,EAAE,SAAA,EAAc,GAAA,EAAK,EAAA,CAAC,OAAS,EAAA,SAAS,CAAC,CAAA;AAC3E;;;;"}

package/dist-cjs/deck-item/DeckItem.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltDeckItem {\n  display: inline-block;\n}\n\n.saltDeckLayout-slide-vertical .saltDeckItem {\n  display: block;\n}\n\n.saltDeckItem-fade-previous,\n.saltDeckItem-fade-next,\n.saltDeckItem-static-previous,\n.saltDeckItem-static-next {\n  display: none;\n}\n\n.saltDeckItem-fade-in {\n  animation: var(--salt-animation-fade-in-center);\n}\n.saltDeckItem-fade-out {\n  animation: var(--salt-animation-fade-out-back);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=DeckItem.css.js.map

package/dist-cjs/deck-item/DeckItem.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeckItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/deck-item/DeckItem.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var DeckItem$1 = require('./DeckItem.css.js');
+
+const withBaseName = core.makePrefixer("saltDeckItem");
+const DeckItem = react.forwardRef(
+  function DeckItem2({
+    activeIndex = 0,
+    animation,
+    children,
+    className,
+    index,
+    role = "group",
+    id: idProp,
+    ...rest
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-deck-item",
+      css: DeckItem$1,
+      window: targetWindow
+    });
+    const sliderRef = react.useRef(null);
+    const isCurrent = activeIndex === index;
+    const position = react.useMemo(() => {
+      return isCurrent ? "current" : activeIndex < index ? "next" : "previous";
+    }, [activeIndex, index, isCurrent]);
+    const classesIndex = animation && position === "current" ? 0 : 1;
+    const getActiveClasses = [
+      `${animation || "fade"}-in`,
+      // in-right
+      `${animation || "fade"}-out`
+      // out-left
+    ];
+    const id = core.useId(idProp);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx.clsx(
+          withBaseName(),
+          withBaseName(`${animation ? animation : "static"}-${position}`),
+          {
+            [withBaseName(getActiveClasses[classesIndex])]: animation === "fade"
+          },
+          className
+        ),
+        ref: core.useForkRef(ref, sliderRef),
+        role,
+        tabIndex: isCurrent ? 0 : -1,
+        id,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+exports.DeckItem = DeckItem;
+//# sourceMappingURL=DeckItem.js.map

package/dist-cjs/deck-item/DeckItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeckItem.js","sources":["../src/deck-item/DeckItem.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useMemo, useRef } from \"react\";\nimport type { LayoutAnimation } from \"../deck-layout\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport deckItemCss from \"./DeckItem.css\";\n\nconst withBaseName = makePrefixer(\"saltDeckItem\");\n\nexport interface DeckItemProps extends HTMLAttributes<HTMLDivElement> {\n  activeIndex?: number;\n  animation?: LayoutAnimation;\n  index: number;\n  role?: string;\n}\n\nexport const DeckItem = forwardRef<HTMLDivElement, DeckItemProps>(\n  function DeckItem(\n    {\n      activeIndex = 0,\n      animation,\n      children,\n      className,\n      index,\n      role = \"group\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-deck-item\",\n      css: deckItemCss,\n      window: targetWindow,\n    });\n\n    const sliderRef = useRef<HTMLDivElement | null>(null);\n\n    const isCurrent = activeIndex === index;\n\n    const position = useMemo(() => {\n      return isCurrent ? \"current\" : activeIndex < index ? \"next\" : \"previous\";\n    }, [activeIndex, index, isCurrent]);\n\n    const classesIndex = animation && position === \"current\" ? 0 : 1;\n\n    const getActiveClasses = [\n      `${animation || \"fade\"}-in`, // in-right\n      `${animation || \"fade\"}-out`, // out-left\n    ];\n\n    const id = useId(idProp);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(`${animation ? animation : \"static\"}-${position}`),\n          {\n            [withBaseName(getActiveClasses[classesIndex])]:\n              animation === \"fade\",\n          },\n          className,\n        )}\n        ref={useForkRef(ref, sliderRef)}\n        role={role}\n        tabIndex={isCurrent ? 0 : -1}\n        id={id}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","DeckItem","useWindow","useComponentCssInjection","deckItemCss","useRef","useMemo","useId","jsx","clsx","useForkRef"],"mappings":";;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA;AASzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SACP,CAAA;AAAA,IACE,WAAc,GAAA,CAAA;AAAA,IACd,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAO,GAAA,OAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,SAAA,GAAYC,aAA8B,IAAI,CAAA;AAEpD,IAAA,MAAM,YAAY,WAAgB,KAAA,KAAA;AAElC,IAAM,MAAA,QAAA,GAAWC,cAAQ,MAAM;AAC7B,MAAA,OAAO,SAAY,GAAA,SAAA,GAAY,WAAc,GAAA,KAAA,GAAQ,MAAS,GAAA,UAAA;AAAA,KAC7D,EAAA,CAAC,WAAa,EAAA,KAAA,EAAO,SAAS,CAAC,CAAA;AAElC,IAAA,MAAM,YAAe,GAAA,SAAA,IAAa,QAAa,KAAA,SAAA,GAAY,CAAI,GAAA,CAAA;AAE/D,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,CAAA,EAAG,aAAa,MAAM,CAAA,GAAA,CAAA;AAAA;AAAA,MACtB,CAAA,EAAG,aAAa,MAAM,CAAA,IAAA;AAAA;AAAA,KACxB;AAEA,IAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA;AAEvB,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,CAAG,EAAA,SAAA,GAAY,YAAY,QAAQ,CAAA,CAAA,EAAI,QAAQ,CAAE,CAAA,CAAA;AAAA,UAC9D;AAAA,YACE,CAAC,YAAa,CAAA,gBAAA,CAAiB,YAAY,CAAC,CAAC,GAC3C,SAAc,KAAA;AAAA,WAClB;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA,EAAKC,eAAW,CAAA,GAAA,EAAK,SAAS,CAAA;AAAA,QAC9B,IAAA;AAAA,QACA,QAAA,EAAU,YAAY,CAAI,GAAA,EAAA;AAAA,QAC1B,EAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-cjs/deck-layout/DeckLayout.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltDeckLayout {\n  overflow: hidden;\n}\n\n.saltDeckLayout-animate {\n  white-space: nowrap;\n}\n\n.saltDeckLayout-slide-horizontal {\n  width: var(--deckLayout-width);\n  transition: transform var(--salt-animation-duration);\n  transform: translateX(var(--deckLayout-transform-value));\n}\n\n.saltDeckLayout-slide-vertical {\n  height: var(--deckLayout-height);\n  transition: transform var(--salt-animation-duration);\n  transform: translateY(var(--deckLayout-transform-value));\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=DeckLayout.css.js.map

package/dist-cjs/deck-layout/DeckLayout.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeckLayout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/deck-layout/DeckLayout.js

@@ -0,0 +1,100 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var react = require('react');
+var DeckItem = require('../deck-item/DeckItem.js');
+require('../responsive/useResizeObserver.js');
+var useWidth = require('../responsive/useWidth.js');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var DeckLayout$1 = require('./DeckLayout.css.js');
+
+const withBaseName = core.makePrefixer("saltDeckLayout");
+const DeckLayout = react.forwardRef(
+  function DeckLayout2({
+    activeIndex = 0,
+    animation,
+    className,
+    children,
+    direction = "horizontal",
+    style,
+    deckItemProps,
+    ...rest
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-deck-layout",
+      css: DeckLayout$1,
+      window: targetWindow
+    });
+    const [deckItemRef, deckItemWidth] = useWidth.useWidth(true);
+    const [deckItemHeight, setDeckItemHeight] = react.useState(0);
+    const handleResize = react.useCallback(function handleResize2(contentRect) {
+      setDeckItemHeight(contentRect.height);
+    }, []);
+    core.useIsomorphicLayoutEffect(() => {
+      if (!deckItemRef.current) {
+        return void 0;
+      }
+      handleResize(deckItemRef.current.getBoundingClientRect());
+      const observer = new ResizeObserver(
+        ([{ contentRect }]) => {
+          handleResize(contentRect);
+        }
+      );
+      observer.observe(deckItemRef.current);
+      return () => {
+        observer.disconnect();
+      };
+    }, [deckItemRef, handleResize]);
+    const deckLayoutStyles = {
+      ...style,
+      "--deckLayout-width": `${deckItemWidth}px`,
+      "--deckLayout-height": `${deckItemHeight}px`
+    };
+    const innerStyles = {
+      "--deckLayout-transform-value": `-${activeIndex * 100}%`
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx.clsx(withBaseName(), className),
+        style: deckLayoutStyles,
+        ref,
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: clsx.clsx(
+              {
+                [withBaseName("animate")]: animation
+              },
+              {
+                [withBaseName(`${animation || "slide"}-${direction}`)]: animation
+              }
+            ),
+            style: innerStyles,
+            children: react.Children.map(children, (child, index) => {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                DeckItem.DeckItem,
+                {
+                  ref: deckItemRef,
+                  index,
+                  activeIndex,
+                  animation,
+                  ...deckItemProps,
+                  children: child
+                }
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+
+exports.DeckLayout = DeckLayout;
+//# sourceMappingURL=DeckLayout.js.map

package/dist-cjs/deck-layout/DeckLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeckLayout.js","sources":["../src/deck-layout/DeckLayout.tsx"],"sourcesContent":["import { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  type CSSProperties,\n  Children,\n  type HTMLAttributes,\n  forwardRef,\n  useCallback,\n  useState,\n} from \"react\";\nimport { DeckItem, type DeckItemProps } from \"../deck-item\";\nimport { useWidth } from \"../responsive\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport deckLayoutCss from \"./DeckLayout.css\";\n\nexport type LayoutAnimation = \"slide\" | \"fade\";\nexport type LayoutAnimationDirection = \"horizontal\" | \"vertical\";\nexport type LayoutAnimationTransition = \"increase\" | \"decrease\";\n\nexport interface DeckLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The initial item to render.\n   **/\n  activeIndex?: number;\n  /**\n   * The animation when the slides are shown.\n   **/\n  animation?: LayoutAnimation;\n  /**\n   * The direction in which items will transition.\n   **/\n  direction?: LayoutAnimationDirection;\n  /**\n   * Props to be passed to the DeckItem component.\n   */\n  deckItemProps?: Partial<DeckItemProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltDeckLayout\");\n\nexport const DeckLayout = forwardRef<HTMLDivElement, DeckLayoutProps>(\n  function DeckLayout(\n    {\n      activeIndex = 0,\n      animation,\n      className,\n      children,\n      direction = \"horizontal\",\n      style,\n      deckItemProps,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-deck-layout\",\n      css: deckLayoutCss,\n      window: targetWindow,\n    });\n\n    const [deckItemRef, deckItemWidth] = useWidth<HTMLDivElement>(true);\n\n    const [deckItemHeight, setDeckItemHeight] = useState<number>(0);\n\n    const handleResize = useCallback(function handleResize(\n      contentRect: DOMRect,\n    ) {\n      setDeckItemHeight(contentRect.height);\n    }, []);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!deckItemRef.current) {\n        return undefined;\n      }\n\n      handleResize(deckItemRef.current.getBoundingClientRect());\n\n      const observer = new ResizeObserver(\n        ([{ contentRect }]: ResizeObserverEntry[]) => {\n          handleResize(contentRect);\n        },\n      );\n      observer.observe(deckItemRef.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [deckItemRef, handleResize]);\n\n    const deckLayoutStyles = {\n      ...style,\n      \"--deckLayout-width\": `${deckItemWidth}px`,\n      \"--deckLayout-height\": `${deckItemHeight}px`,\n    };\n\n    const innerStyles = {\n      \"--deckLayout-transform-value\": `-${activeIndex * 100}%`,\n    } as CSSProperties;\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        style={deckLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        <div\n          className={clsx(\n            {\n              [withBaseName(\"animate\")]: animation,\n            },\n            {\n              [withBaseName(`${animation || \"slide\"}-${direction}`)]: animation,\n            },\n          )}\n          style={innerStyles}\n        >\n          {Children.map(children, (child, index) => {\n            return (\n              <DeckItem\n                ref={deckItemRef}\n                index={index}\n                activeIndex={activeIndex}\n                animation={animation}\n                {...deckItemProps}\n              >\n                {child}\n              </DeckItem>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","DeckLayout","useWindow","useComponentCssInjection","deckLayoutCss","useWidth","useState","useCallback","handleResize","useIsomorphicLayoutEffect","jsx","clsx","Children","DeckItem"],"mappings":"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"}

package/dist-cjs/dropdown/Dropdown.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltDropdownBase {\n  --saltIcon-margin: 2px 0 0 8px;\n  display: inline-block;\n  line-height: 0;\n  position: relative;\n}\n\n.saltDropdownBase-fullWidth {\n  width: 100%;\n}\n\n.saltDropdownBase-popup {\n  background: var(--salt-container-primary-background);\n  z-index: calc(var(--salt-zIndex-flyover) - 1);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Dropdown.css.js.map

package/dist-cjs/dropdown/Dropdown.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}