@salt-ds/date-components 0.0.0-snapshot-20260330155807

package/dist-types/date-picker/DatePickerRangeInput.d.ts

@@ -0,0 +1,17 @@
+import { type DateFrameworkType, type SaltDateAdapter } from "@salt-ds/date-adapters";
+import type { DateRangeSelection } from "../calendar";
+import { type DateInputRangeDetails, type DateInputRangeProps } from "../date-input";
+/**
+ * Props for the DatePickerRangeInput component.
+ */
+export interface DatePickerRangeInputProps extends DateInputRangeProps {
+    /**
+     * Function to validate the entered date
+     * @param date - The selected date
+     * @param details - The details of date selection, either a valid date or error
+     * @returns updated DateInputRangeDetails details
+     */
+    validate?: (date: DateRangeSelection | null, details: DateInputRangeDetails) => DateInputRangeDetails;
+}
+export declare function defaultRangeValidator(dateAdapter: SaltDateAdapter, date: DateRangeSelection | null, details: DateInputRangeDetails, minDate?: DateFrameworkType, maxDate?: DateFrameworkType): DateInputRangeDetails;
+export declare const DatePickerRangeInput: import("react").ForwardRefExoticComponent<DatePickerRangeInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-picker/DatePickerRangePanel.d.ts

@@ -0,0 +1,83 @@
+import type { DateFrameworkType } from "@salt-ds/date-adapters";
+import { type ComponentPropsWithoutRef, type SyntheticEvent } from "react";
+import { type CalendarGridProps, type CalendarNavigationProps, type CalendarOffsetProps, type CalendarRangeProps, type DateRangeSelection } from "../calendar";
+/**
+ * Props for the DatePickerRangePanel component.
+ */
+export interface DatePickerRangePanelProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Callback fired when a date range is selected.
+     * @param event - The synthetic event.
+     * @param selectedDate - The selected date range or null.
+     */
+    onSelectionChange?: (event: SyntheticEvent, selectedDate?: DateRangeSelection | null) => void;
+    /**
+     * Helper text to be displayed below the date picker.
+     */
+    helperText?: string;
+    /**
+     * The currently visible month for the start date.
+     */
+    startVisibleMonth?: DateFrameworkType;
+    /**
+     * The default visible month for the start date.
+     */
+    defaultStartVisibleMonth?: DateFrameworkType;
+    /**
+     * Callback fired when the visible month for the start date changes.
+     * @param event - The synthetic event, or null if called by effect.
+     * @param visibleMonth - The new visible month for the start date.
+     */
+    onStartVisibleMonthChange?: (event: SyntheticEvent | null, visibleMonth: DateFrameworkType) => void;
+    /**
+     * The currently visible month for the end date.
+     */
+    endVisibleMonth?: DateFrameworkType;
+    /**
+     * The default visible month for the end date.
+     */
+    defaultEndVisibleMonth?: DateFrameworkType;
+    /**
+     * Callback fired when the visible month for the end date changes.
+     * @param event - The synthetic event or null if triggered by code.
+     * @param visibleMonth - The new visible month for the end date.
+     */
+    onEndVisibleMonthChange?: (event: SyntheticEvent | null, visibleMonth: DateFrameworkType) => void;
+    /**
+     * Callback fired when the focused date changes.
+     * @param event - The synthetic event or null if triggered by code.
+     * @param focusedDate - The new focused date.
+     */
+    onFocusedDateChange?: (event: SyntheticEvent | null, focusedDate?: DateFrameworkType | null) => void;
+    /**
+     * Callback fired when the hovered date changes.
+     * @param event - The synthetic event.
+     * @param hoveredDate - The new hovered date.
+     */
+    onHoveredDateChange?: (event: SyntheticEvent, hoveredDate?: DateFrameworkType | null) => void;
+    /**
+     * Props to be passed to the start date CalendarNavigation component.
+     */
+    StartCalendarNavigationProps?: CalendarNavigationProps;
+    /**
+     * Props to be passed to the start date calendar component.
+     */
+    StartCalendarProps?: Partial<Omit<CalendarRangeProps | CalendarOffsetProps, "selectedDate" | "defaultSelectedDate" | "multiselect" | "onFocusedDateChange" | "onHoveredDateChange" | "onSelectionChange" | "onVisibleMonthChange">>;
+    /**
+     * Props to be passed to the start date CalendarGrid component.
+     */
+    StartCalendarGridProps?: CalendarGridProps;
+    /**
+     * Props to be passed to the end date CalendarNavigation component.
+     */
+    EndCalendarProps?: Partial<Omit<CalendarRangeProps, "selectedDate" | "defaultSelectedDate" | "multiselect" | "onFocusedDateChange" | "onHoveredDateChange" | "onSelectionChange" | "onVisibleMonthChange">>;
+    /**
+     * Props to be passed to the end date CalendarNavigation component.
+     */
+    EndCalendarNavigationProps?: CalendarNavigationProps;
+    /**
+     * Props to be passed to the end date CalendarGrid component.
+     */
+    EndCalendarGridProps?: CalendarGridProps;
+}
+export declare const DatePickerRangePanel: import("react").ForwardRefExoticComponent<DatePickerRangePanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-picker/DatePickerSingleGridPanel.d.ts

@@ -0,0 +1,63 @@
+import { type ResponsiveProp } from "@salt-ds/core";
+import type { DateFrameworkType } from "@salt-ds/date-adapters";
+import { type ComponentPropsWithoutRef, type SyntheticEvent } from "react";
+import { type CalendarGridProps, type CalendarNavigationProps as CalendarNavigationPropsType, type CalendarSingleProps } from "../calendar";
+/**
+ * Base props for the DatePickerPanel grid components.
+ */
+export interface DatePickerPanelBaseProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Helper text to be displayed below the date picker.
+     */
+    helperText?: string;
+    /**
+     * The visible month for the first visible calendar
+     */
+    visibleMonth?: DateFrameworkType;
+    /**
+     * Number of columns.
+     */
+    columns?: ResponsiveProp<number | string>;
+    /**
+     * Number of visible months, maximum 12, defaults to 1
+     */
+    numberOfVisibleMonths?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
+    /**
+     * The default visible month.
+     */
+    defaultVisibleMonth?: DateFrameworkType;
+    /**
+     * Callback fired when the visible month changes.
+     * @param event - The synthetic event or null if triggered by code.
+     * @param visibleMonth - The new visible month.
+     */
+    onVisibleMonthChange?: (event: SyntheticEvent | null, visibleMonth: DateFrameworkType) => void;
+    /**
+     * Callback fired when the focused date changes.
+     * @param event - The synthetic event or null if triggered by code.
+     * @param focusedDate - The new hovered date.
+     */
+    onFocusedDateChange?: (event: SyntheticEvent | null, focusedDate?: DateFrameworkType | null) => void;
+    /**
+     * Callback fired when the hovered date changes.
+     * @param event - The synthetic event.
+     * @param hoveredDate - The new hovered date.
+     */
+    onHoveredDateChange?: (event: SyntheticEvent, hoveredDate?: DateFrameworkType | null) => void;
+    /**
+     * Props to be passed to the CalendarNavigation component.
+     */
+    CalendarNavigationProps?: Partial<CalendarNavigationPropsType>;
+    /**
+     * Props to be passed to the CalendarGrid component.
+     */
+    CalendarGridProps?: Partial<CalendarGridProps>;
+}
+export type DatePickerSingleGridPanelProps = DatePickerPanelBaseProps & {
+    onSelectionChange?: (event: SyntheticEvent, selectedDate?: DateFrameworkType | null) => void;
+    CalendarProps?: Partial<Omit<CalendarSingleProps, "selectionVariant" | "selectedDate" | "defaultSelectedDate" | "onSelectionChange" | "onVisibleMonthChange">>;
+};
+export declare const DatePickerSingleGridPanel: import("react").ForwardRefExoticComponent<DatePickerPanelBaseProps & {
+    onSelectionChange?: (event: SyntheticEvent, selectedDate?: DateFrameworkType | null) => void;
+    CalendarProps?: Partial<Omit<CalendarSingleProps, "selectionVariant" | "selectedDate" | "defaultSelectedDate" | "onSelectionChange" | "onVisibleMonthChange">>;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-picker/DatePickerSingleInput.d.ts

@@ -0,0 +1,15 @@
+import type { SingleDateSelection } from "../calendar";
+import { type DateInputSingleDetails, type DateInputSingleProps } from "../date-input";
+/**
+ * Props for the DatePickerSingleInput component.
+ */
+export interface DatePickerSingleInputProps extends DateInputSingleProps {
+    /**
+     * Function to validate the entered date
+     * @param date - The selected date
+     * @param details - The details of date selection, either a valid date or error
+     * @returns updated DateInputSingleDetails details
+     */
+    validate?: (date: SingleDateSelection | null | undefined, details: DateInputSingleDetails) => DateInputSingleDetails;
+}
+export declare const DatePickerSingleInput: import("react").ForwardRefExoticComponent<DatePickerSingleInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-picker/DatePickerSinglePanel.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @deprecated DatePickerSinglePanel is deprecated. Use DatePickerSingleGridPanel instead.
+ * This component will be deleted when we move DatePickerSingleGridPanel from labs to core.
+ */
+export declare const DatePickerSinglePanel: import("react").ForwardRefExoticComponent<import("./DatePickerSingleGridPanel").DatePickerPanelBaseProps & {
+    onSelectionChange?: (event: import("react").SyntheticEvent, selectedDate?: import("@salt-ds/date-adapters").DateFrameworkType | null) => void;
+    CalendarProps?: Partial<Omit<import("..").CalendarSingleProps, "selectionVariant" | "selectedDate" | "defaultSelectedDate" | "onSelectionChange" | "onVisibleMonthChange">>;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-picker/DatePickerTrigger.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+/**
+ * Props for the DatePickerTrigger component.
+ */
+export interface DatePickerTriggerProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare const DatePickerTrigger: import("react").ForwardRefExoticComponent<DatePickerTriggerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-picker/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./DatePicker";
+export * from "./DatePickerActions";
+export * from "./DatePickerContext";
+export * from "./DatePickerHelperText";
+export * from "./DatePickerOverlay";
+export * from "./DatePickerOverlayProvider";
+export * from "./DatePickerRangeGridPanel";
+export * from "./DatePickerRangeInput";
+export * from "./DatePickerRangePanel";
+export * from "./DatePickerSingleGridPanel";
+export * from "./DatePickerSingleInput";
+export * from "./DatePickerSinglePanel";
+export * from "./DatePickerTrigger";

package/dist-types/date-picker/useDatePicker.d.ts

@@ -0,0 +1,121 @@
+import type { DateFrameworkType, Timezone } from "@salt-ds/date-adapters";
+import { type SyntheticEvent } from "react";
+import type { DateRangeSelection, SingleDateSelection } from "../calendar";
+import { type CreateAnnouncement } from "../calendar";
+import type { DateInputRangeDetails, DateInputSingleDetails } from "../date-input";
+import type { RangeDatePickerState, SingleDatePickerState } from "./DatePickerContext";
+interface UseDatePickerBaseProps {
+    /**
+     * Factory method for date selection live announcements or null to silence announcements
+     */
+    createAnnouncement?: CreateAnnouncement | null;
+    /**
+     * If `true`, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Function to determine if a day is highlighted.
+     * @param date - The date to check.
+     * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.
+     */
+    isDayHighlighted?: (date: DateFrameworkType) => string | false | undefined;
+    /**
+     * Function to determine if a day is unselectable.
+     * @param date - The date to check.
+     * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.
+     */
+    isDayUnselectable?: (date: DateFrameworkType) => string | false | undefined;
+    /** If `true`, the component is read-only. */
+    readOnly?: boolean;
+    /**
+     * The minimum date for the range, default is 1900.
+     */
+    minDate?: DateFrameworkType;
+    /**
+     * The maximum date for the range, default is 2100.
+     */
+    maxDate?: DateFrameworkType;
+    /**
+     * Handler for when the date selection is cancelled.
+     */
+    onCancel?: () => void;
+    /**
+     * Timezone, if un-defined will take the timezone from passed date (or defaultSelectedDate/selectedDate)
+     * Can also be set to "default" to use the default timezone of the date library
+     * Can also be set to "system" to take the timezone of the local system.
+     */
+    timezone?: Timezone;
+}
+/**
+ * Props for single date selection.
+ */
+export interface UseDatePickerSingleProps extends UseDatePickerBaseProps {
+    /**
+     * Single date selection.
+     */
+    selectionVariant: "single";
+    /**
+     * The selected date. The selected date will be controlled when this prop is provided.
+     */
+    selectedDate?: SingleDateSelection | null;
+    /**
+     * The initial selected date, when the selected date is uncontrolled.
+     */
+    defaultSelectedDate?: SingleDateSelection | null;
+    /**
+     * Handler called when the selected date changes.
+     * @param event - The synthetic event.
+     * @param date - The selected date or null.
+     * @param details - The selected date details.
+     */
+    onSelectionChange?: (event: SyntheticEvent, date: SingleDateSelection | null, details?: DateInputSingleDetails) => void;
+    /**
+     * Handler called when the selected date is confirmed/applied.
+     * @param event - The synthetic event.
+     * @param date - The selected date or null.
+     */
+    onApply?: (event: SyntheticEvent, date: SingleDateSelection | null) => void;
+}
+/**
+ * Props for date range selection.
+ */
+export interface UseDatePickerRangeProps extends UseDatePickerBaseProps {
+    /**
+     * Date range selection.
+     */
+    selectionVariant: "range";
+    /**
+     * The selected date range. The selected date will be controlled when this prop is provided.
+     */
+    selectedDate?: DateRangeSelection | null;
+    /**
+     * The initial selected date range, when the selected date is uncontrolled.
+     */
+    defaultSelectedDate?: DateRangeSelection | null;
+    /**
+     * Handler called when the selected date range changes.
+     * @param event - The synthetic event.
+     * @param date - The selected date range or null.
+     * @param details - The selected date range details.
+     */
+    onSelectionChange?: (event: SyntheticEvent, date: DateRangeSelection | null, details?: DateInputRangeDetails) => void;
+    /**
+     * Handler called when the selected date range is confirmed/applied.
+     * @param event - The synthetic event.
+     * @param date - The selected date range.
+     */
+    onApply?: (event: SyntheticEvent, date: DateRangeSelection | null) => void;
+}
+/**
+ * Props for the useDatePicker hook.
+ */
+export type UseDatePickerProps = UseDatePickerSingleProps | UseDatePickerRangeProps;
+/**
+ * Custom hook for managing date picker state.
+ * @template SelectionVariant - The selection variant, either "single" or "range".
+ * @param props - The props for the date picker.
+ * @param ref - The ref for the date picker container.
+ * @returns The date picker state and helpers.
+ */
+export declare function useDatePicker(props: UseDatePickerProps, ref: React.ForwardedRef<HTMLDivElement>): SingleDatePickerState | RangeDatePickerState;
+export {};

package/dist-types/date-picker/useFocusOut.d.ts

@@ -0,0 +1,9 @@
+import type { ElementProps, FloatingContext } from "@floating-ui/react";
+export interface UseFocusOutProps {
+    /**
+     * Whether the hook is enabled
+     * @default true
+     */
+    enabled?: boolean;
+}
+export declare function useFocusOut(context: FloatingContext, props: UseFocusOutProps): ElementProps;

package/dist-types/date-picker/useKeyboard.d.ts

@@ -0,0 +1,20 @@
+import type { ElementProps, FloatingContext } from "@floating-ui/react";
+import { type KeyboardEvent } from "react";
+export interface UseKeyboardProps {
+    /**
+     * Whether the hook is enabled
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Handler for when the arrow key down is pressed
+     * @param event
+     */
+    onArrowDown?: (event: KeyboardEvent) => void;
+}
+/**
+ * Floating UI Interactions hook, that will open DatePicker on keydown
+ * @param context
+ * @param props
+ */
+export declare function useKeyboard(_context: FloatingContext, props: UseKeyboardProps): ElementProps;

package/dist-types/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./calendar";
+export * from "./date-input";
+export * from "./date-picker";
+export * from "./localization-provider";

package/dist-types/localization-provider/LocalizationProvider.d.ts

@@ -0,0 +1,62 @@
+import type { DateFrameworkType, SaltDateAdapter } from "@salt-ds/date-adapters";
+export interface LocalizationProviderValue<TDate extends DateFrameworkType = DateFrameworkType> {
+    defaultDates: {
+        minDate: TDate;
+        maxDate: TDate;
+    };
+    dateAdapter: SaltDateAdapter<TDate>;
+}
+/**
+ * Props for the LocalizationProvider component.
+ *
+ * @template TDate - The type of the date object used in the provider.
+ * @template TLocale - The type of the locale, defaulting to string.
+ */
+export interface LocalizationProviderProps<TDate extends DateFrameworkType = DateFrameworkType, TLocale = string> {
+    /**
+     * The child components to be rendered within the provider.
+     */
+    children?: React.ReactNode;
+    /**
+     * The instance of the date library being used.
+     */
+    instance?: any;
+    /**
+     * The date adapter class, which provides methods for date manipulation and formatting.
+     * This should be a constructor for a class implementing the SaltDateAdapter interface.
+     */
+    DateAdapter: new (...args: any) => SaltDateAdapter<TDate, TLocale>;
+    /**
+     * The locale to be used for date formatting and manipulation.
+     */
+    locale?: TLocale;
+    /**
+     * The minimum date allowed for all date selections.
+     * Defaults to January 1, 1900.
+     */
+    minDate?: TDate;
+    /**
+     * The maximum date allowed for all date selections.
+     * Defaults to December 31, 2099.
+     */
+    maxDate?: TDate;
+}
+export type LocalizationProviderContext<TDate extends DateFrameworkType = DateFrameworkType> = {
+    [K in keyof LocalizationProviderValue<TDate>]: LocalizationProviderValue<TDate>[K] | null;
+};
+export declare const LocalizationProviderContext: import("react").Context<LocalizationProviderValue<any> | null>;
+export declare const LocalizationProvider: <TDate extends DateFrameworkType = DateFrameworkType, TLocale = undefined>(props: LocalizationProviderProps<TDate, TLocale>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Custom hook to access the localization context.
+ *
+ * This hook provides access to the localization settings and utilities
+ * within the `LocalizationProviderContext`. It should be used within a
+ * component that is a descendant of `LocalizationProviderContext.Provider`.
+ *
+ * @template TDate - The type of the date object used in the localization context.
+ *
+ * @returns The localization provider value, which includes date manipulation and formatting utilities.
+ *
+ * @throws Will throw an error if the hook is used outside of a `LocalizationProviderContext.Provider`.
+ */
+export declare const useLocalization: <TDate extends DateFrameworkType = DateFrameworkType>() => LocalizationProviderValue<TDate>;

package/dist-types/localization-provider/index.d.ts

@@ -0,0 +1 @@
+export * from "./LocalizationProvider";

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@salt-ds/date-components",
+  "version": "0.0.0-snapshot-20260330155807",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jpmorganchase/salt-ds.git",
+    "directory": "packages/date-components"
+  },
+  "bugs": "https://github.com/jpmorganchase/salt-ds/issues",
+  "main": "dist-cjs/index.js",
+  "files": [
+    "css",
+    "dist-cjs",
+    "dist-es",
+    "dist-types",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "@floating-ui/react": "^0.26.28",
+    "@salt-ds/core": "^0.0.0-snapshot-20260330155807",
+    "@salt-ds/date-adapters": "^0.0.0-snapshot-20260330155807",
+    "@salt-ds/icons": "^0.0.0-snapshot-20260330155807",
+    "@salt-ds/styles": "0.3.0",
+    "@salt-ds/window": "0.1.1",
+    "clsx": "^2.0.0"
+  },
+  "devDependencies": {
+    "@date-fns/tz": "^1.4.1",
+    "@types/luxon": "^3.7.1",
+    "date-fns": "^4.1.0",
+    "dayjs": "^1.11.20",
+    "luxon": "^3.7.2",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.6.1"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.14.0",
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "directory": "../../dist/salt-ds-date-components",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "yarn node ../../scripts/build.mjs",
+    "bundle:css": "yarn node ./scripts/bundleCSS.mjs"
+  },
+  "module": "dist-es/index.js",
+  "typings": "dist-types/index.d.ts"
+}