@moneyforward/mfui-components 2.48.1

package/dist/cjs/src/DataGrid/DataGridRow/DataGridRow.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const recipes_1 = require("../../../styled-system/recipes");
+const DataGridCell_1 = require("../DataGridCell");
+const Checkbox_1 = require("../../Checkbox");
+const DataGridProvider_1 = require("../DataGridProvider");
+const css_1 = require("../../../styled-system/css");
+const isComponentOrWrapped_1 = require("../../utilities/react/isComponentOrWrapped");
+exports.DataGridRow = (0, react_1.forwardRef)(({ children, disabled = false, highlighted, checkboxProps, className, onClickRow, selectable, ...props }, ref) => {
+    const { enableRowSelection: contextEnableRowSelection, layout } = (0, DataGridProvider_1.useDataGridContext)();
+    const isSelectable = selectable ?? contextEnableRowSelection;
+    const isRowHighlighted = isSelectable ? (checkboxProps?.checked ?? highlighted) : highlighted;
+    const isInteractive = onClickRow !== undefined && !disabled;
+    const classes = (0, recipes_1.dataGridRowSlotRecipe)({
+        layout,
+        highlighted: isRowHighlighted,
+        interactive: isInteractive,
+        disabled,
+    });
+    const handleClickRow = (event) => {
+        if (!disabled) {
+            onClickRow?.(event);
+        }
+    };
+    const handleKeyDownRow = (event) => {
+        if (!disabled && (event.key === 'Enter' || event.key === ' ')) {
+            onClickRow?.(event);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("tr", { ref: ref, className: (0, css_1.cx)(classes.root, 'mfui-DataGridRow__root', className), ...props, 
+        // When the row is clickable, the role should be 'button' in order to allow screen readers to understand the row is clickable.
+        role: isInteractive ? 'button' : 'row', tabIndex: isInteractive ? 0 : undefined, ...(disabled && { 'aria-disabled': disabled }), onClick: handleClickRow, onKeyDown: handleKeyDownRow, children: [isSelectable ? ((0, jsx_runtime_1.jsx)(DataGridCell_1.DataGridCell, { columnIndex: 0, isRowHighlighted: isRowHighlighted, disabled: disabled, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: checkboxProps?.checked, "aria-label": checkboxProps?.['aria-label'] ?? '行を選択', disabled: disabled || checkboxProps?.disabled, onChange: checkboxProps?.onChange, onClick: checkboxProps?.onClick }) })) : null, react_1.Children.map(children, (child, index) => {
+                if (!(0, react_1.isValidElement)(child)) {
+                    return child;
+                }
+                if ((0, isComponentOrWrapped_1.isComponentOrWrapped)(child, DataGridCell_1.DataGridCell)) {
+                    // Add selectable offset to columnIndex if selectable is true
+                    const columnIndex = isSelectable ? index + 1 : index;
+                    return (0, react_1.cloneElement)(child, { isRowHighlighted, columnIndex, disabled });
+                }
+                return child;
+            })] }));
+});
+exports.DataGridRow.displayName = 'DataGridRow';

package/dist/cjs/src/DataGrid/DataGridRow/DataGridRow.types.d.ts

@@ -0,0 +1,60 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type CheckboxProps } from '../../Checkbox';
+/**
+ * The props for the `DataGridRow` component.
+ *
+ * It extends the general attributes of `tr` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
+ */
+export type DataGridRowProps = {
+    /**
+     * Whether the row is disabled.
+     * When true, interaction when the row is clicked and the checkbox for selectable feature will be disabled.
+     * The row content remains visible with appropriate styling for readability.
+     * Interactive elements passed as a children for DataGrid.Cell won't be disabled automatically.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The state of the row whether it is highlighted without a selected.
+     * This prop displays a highlighted background color regardless of the `enableRowSelection` prop of the DataGrid component.
+     *
+     * @default false
+     */
+    highlighted?: boolean;
+    /**
+     * The properties for the checkbox.
+     * This prop is available when the `enableRowSelection` prop of the `DataGrid` component is `true`.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the checkbox. default is '行を選択'.
+     *
+     * @property checked - The checked state of the checkbox.
+     *
+     * @property onChange - The handler called when the checkbox is clicked.
+     *
+     * @property onClick - The handler called when the checkbox is clicked (for event propagation control).
+     *
+     * @property disabled - Whether the checkbox is disabled.
+     */
+    checkboxProps?: Pick<CheckboxProps, 'aria-label' | 'checked' | 'onChange' | 'disabled' | 'onClick'>;
+    /**
+     * The callback function that is called when the row is clicked.
+     * If provided, the row can be focused and the focus indicator is displayed.
+     *
+     * This prop will be passed to the `onClick` and `onKeyDown` of the `tr` element.
+     * When the element is clicked, the event is passed to the `onClickRow` prop, but event isn't passed when the Enter or Space key is pressed.
+     *
+     * @default undefined
+     */
+    onClickRow?: (event: React.MouseEvent<HTMLTableRowElement> | React.KeyboardEvent<HTMLTableRowElement>) => void;
+    /**
+     * Whether the table rows are selectable.
+     * If `true`, the checkbox cell will be added to the first column of header and each row.
+     *
+     * @default false
+     */
+    selectable?: boolean;
+} & ComponentPropsWithRef<'tr'>;

package/dist/cjs/src/DataGrid/DataGridRow/DataGridRow.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/DataGrid/DataGridRow/index.d.ts

@@ -0,0 +1,2 @@
+export { DataGridRow } from './DataGridRow';
+export type { DataGridRowProps } from './DataGridRow.types';

package/dist/cjs/src/DataGrid/DataGridRow/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridRow = void 0;
+var DataGridRow_1 = require("./DataGridRow");
+Object.defineProperty(exports, "DataGridRow", { enumerable: true, get: function () { return DataGridRow_1.DataGridRow; } });

package/dist/cjs/src/DataGrid/index.d.ts

@@ -0,0 +1,8 @@
+export { DataGrid } from './DataGrid';
+export type { DataGridProps } from './DataGrid.types';
+export type { DataGridBodyProps } from './DataGridBody';
+export type { DataGridCellProps } from './DataGridCell';
+export type { DataGridHeaderProps } from './DataGridHeader';
+export type { DataGridHeaderCellProps } from './DataGridHeaderCell';
+export type { DataGridHeaderRowProps } from './DataGridHeaderRow';
+export type { DataGridRowProps } from './DataGridRow';

package/dist/cjs/src/DataGrid/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGrid = void 0;
+var DataGrid_1 = require("./DataGrid");
+Object.defineProperty(exports, "DataGrid", { enumerable: true, get: function () { return DataGrid_1.DataGrid; } });

package/dist/cjs/src/DataGrid/utils/handleCheckbox.d.ts

@@ -0,0 +1 @@
+export declare function handleCheckboxCellClick(event: React.MouseEvent<HTMLDivElement>): void;

package/dist/cjs/src/DataGrid/utils/handleCheckbox.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleCheckboxCellClick = handleCheckboxCellClick;
+function handleCheckboxCellClick(event) {
+    const checkbox = event.currentTarget.querySelector('input[type="checkbox"]');
+    if (checkbox && checkbox instanceof HTMLInputElement && !checkbox.disabled && event.target !== checkbox) {
+        event.stopPropagation();
+        checkbox.click();
+    }
+}

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePicker.d.ts

@@ -0,0 +1,55 @@
+import { type BasePickerProps } from '../shared/BasePicker';
+import { type IconButtonProps } from '../../IconButton';
+export type DatePickerProps = Omit<BasePickerProps, 'renderPopoverContent' | 'baseFormat'> & {
+    /**
+     * Function to check if a date should be disabled.
+     *
+     * @param date - The date to check
+     *
+     * @returns true if the date should be disabled
+     */
+    checkDisabledDate?: (date: Date) => boolean;
+    /**
+     * The minimum selectable date
+     */
+    minDate?: Date;
+    /**
+     * The maximum selectable date
+     */
+    maxDate?: Date;
+    /**
+     * Props for the previous month navigation button
+     */
+    prevMonthIconButtonProps?: Pick<IconButtonProps, 'aria-label'>;
+    /**
+     * Props for the next month navigation button
+     */
+    nextMonthIconButtonProps?: Pick<IconButtonProps, 'aria-label'>;
+    /**
+     * Props for the today button
+     */
+    todayButtonProps?: {
+        label?: string;
+    };
+    /**
+     * Whether to display the date in Japanese calendar format (e.g., "令和7年1月15日")
+     * When enabled, the text input will show dates in Japanese calendar format
+     * while internal value handling remains unchanged.
+     *
+     * @default false
+     */
+    displayJapaneseCalendar?: boolean;
+    /**
+     * The locale of the calendar.
+     *
+     * @default 'ja'
+     */
+    calendarLocale?: BasePickerProps['calendarLocale'];
+};
+/**
+ * DatePicker component
+ *
+ * This is a wrapper around BasePicker, setting default format to 'YYYY/MM/DD' and using DatePickerPanel.
+ * See BasePicker for implementation details.
+ */
+export declare function DatePicker({ format, checkDisabledDate, minDate, maxDate, prevMonthIconButtonProps, nextMonthIconButtonProps, todayButtonProps, displayJapaneseCalendar, calendarLocale, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePicker.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = DatePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const BasePicker_1 = require("../shared/BasePicker");
+const DatePickerPanel_1 = require("./DatePickerPanel");
+const CalendarLocaleContext_1 = require("../shared/CalendarLocale/CalendarLocaleContext");
+/**
+ * DatePicker component
+ *
+ * This is a wrapper around BasePicker, setting default format to 'YYYY/MM/DD' and using DatePickerPanel.
+ * See BasePicker for implementation details.
+ */
+function DatePicker({ format = 'YYYY/MM/DD', checkDisabledDate, minDate, maxDate, prevMonthIconButtonProps, nextMonthIconButtonProps, todayButtonProps, displayJapaneseCalendar = false, calendarLocale = 'ja', ...props }) {
+    const customFormatValue = (0, react_1.useMemo)(() => {
+        if (!displayJapaneseCalendar)
+            return;
+        const formatter = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
+            era: 'long',
+            year: 'numeric',
+            month: 'narrow',
+            day: 'numeric',
+        });
+        return (date) => formatter.format(date);
+    }, [displayJapaneseCalendar]);
+    return ((0, jsx_runtime_1.jsx)(BasePicker_1.BasePicker, { ...props, format: format, baseFormat: "YYYY-MM-DD", calendarLocale: calendarLocale, customFormatValue: customFormatValue, renderPopoverContent: ({ value, onChange }) => ((0, jsx_runtime_1.jsx)(CalendarLocaleContext_1.CalendarLocaleProvider, { value: calendarLocale, children: (0, jsx_runtime_1.jsx)(DatePickerPanel_1.DatePickerPanel, { value: value, checkDisabledDate: checkDisabledDate, minDate: minDate, maxDate: maxDate, prevMonthIconButtonProps: prevMonthIconButtonProps, nextMonthIconButtonProps: nextMonthIconButtonProps, todayButtonProps: todayButtonProps, onChange: onChange }) })) }));
+}

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePickerCalendar/DatePickerCalendar.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { DatePickerDateCell } from '../DatePickerDateCell';
+export type DatePickerCalendarProps = {
+    value?: Date;
+    onChange?: (date: Date | undefined, event: React.MouseEvent<HTMLButtonElement>) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    checkDisabledDate?: (date: Date) => boolean;
+    todayButtonProps?: {
+        label?: string;
+    };
+    prevMonthIconButtonProps?: {
+        'aria-label'?: string;
+    };
+    nextMonthIconButtonProps?: {
+        'aria-label'?: string;
+    };
+    renderDateCell?: (props: React.ComponentProps<typeof DatePickerDateCell>) => React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'>;
+/**
+ * DatePickerCalendar is a self-contained calendar component for DatePicker.
+ * It integrates DatePicker context and custom cell rendering.
+ */
+export declare function DatePickerCalendar({ value, onChange, minDate, maxDate, checkDisabledDate, todayButtonProps, prevMonthIconButtonProps, nextMonthIconButtonProps, renderDateCell, ...rest }: DatePickerCalendarProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePickerCalendar/DatePickerCalendar.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerCalendar = DatePickerCalendar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
+const react_1 = require("react");
+const IconButton_1 = require("../../../IconButton");
+const Typography_1 = require("../../../Typography");
+const Button_1 = require("../../../Button");
+const BasePickerProvider_1 = require("../../shared/BasePicker/BasePickerProvider");
+const DatePickerDateCell_1 = require("../DatePickerDateCell");
+const constants_1 = require("../../shared/BasePicker/constants");
+const recipes_1 = require("../../../../styled-system/recipes");
+const CalendarGrid_1 = require("../../shared/CalendarGrid");
+const YearSelector_1 = require("../../shared/YearSelector");
+const css_1 = require("../../../../styled-system/css");
+const CalendarLocaleContext_1 = require("../../shared/CalendarLocale/CalendarLocaleContext");
+/**
+ * DatePickerCalendar is a self-contained calendar component for DatePicker.
+ * It integrates DatePicker context and custom cell rendering.
+ */
+function DatePickerCalendar({ value, onChange, minDate, maxDate, checkDisabledDate, todayButtonProps, prevMonthIconButtonProps, nextMonthIconButtonProps, renderDateCell, ...rest }) {
+    const { viewingValue, setViewingValue, pendingFocusDate, setPendingFocusDate } = (0, BasePickerProvider_1.useBasePickerContext)();
+    const [internalValue, setInternalValue] = (0, react_1.useState)(value);
+    const calendarLocale = (0, CalendarLocaleContext_1.useCalendarLocale)();
+    (0, react_1.useEffect)(() => {
+        setInternalValue(value);
+    }, [value]);
+    const setValue = (0, react_1.useCallback)((date, event) => {
+        setInternalValue(date);
+        onChange?.(date, event);
+    }, [onChange]);
+    const handleTodayButtonClick = (0, react_1.useCallback)((event) => {
+        setValue(new Date(), event);
+    }, [setValue]);
+    const hideTodayButton = (0, react_1.useMemo)(() => (checkDisabledDate ? checkDisabledDate(new Date()) : false), [checkDisabledDate]);
+    const { isPrevMonthDisabled, isNextMonthDisabled } = (0, react_1.useMemo)(() => {
+        const firstDayOfMonth = new Date(viewingValue.getFullYear(), viewingValue.getMonth(), 1);
+        const firstDayOfNextMonth = new Date(viewingValue.getFullYear(), viewingValue.getMonth() + 1, 1);
+        return {
+            isPrevMonthDisabled: firstDayOfMonth <= constants_1.MINIMUM_NAVIGABLE_DATE || (minDate ? firstDayOfMonth <= minDate : false),
+            isNextMonthDisabled: firstDayOfNextMonth > constants_1.MAXIMUM_NAVIGABLE_DATE || (maxDate ? firstDayOfNextMonth > maxDate : false),
+        };
+    }, [viewingValue, minDate, maxDate]);
+    const goToPreviousMonth = (0, react_1.useCallback)(() => {
+        const previousMonth = new Date(viewingValue);
+        previousMonth.setMonth(previousMonth.getMonth() - 1);
+        setViewingValue(previousMonth);
+    }, [setViewingValue, viewingValue]);
+    const goToNextMonth = (0, react_1.useCallback)(() => {
+        const nextMonth = new Date(viewingValue);
+        nextMonth.setMonth(nextMonth.getMonth() + 1);
+        setViewingValue(nextMonth);
+    }, [setViewingValue, viewingValue]);
+    const handleSelectYear = (0, react_1.useCallback)((year) => {
+        const newDate = new Date(viewingValue);
+        newDate.setFullYear(year);
+        setViewingValue(newDate);
+    }, [setViewingValue, viewingValue]);
+    const onDateClick = (0, react_1.useCallback)((date, event) => {
+        setValue(date, event);
+    }, [setValue]);
+    (0, react_1.useEffect)(() => {
+        if (!pendingFocusDate)
+            return;
+        const targetCell = document.querySelector(`[data-mfui-date="${pendingFocusDate}"]`);
+        if (targetCell && !targetCell.disabled) {
+            targetCell.focus();
+        }
+        setPendingFocusDate(null);
+    }, [viewingValue, pendingFocusDate, setPendingFocusDate]);
+    // Custom renderDateCell logic (preserved from original)
+    const customRenderDateCell = renderDateCell ?? ((props) => (0, jsx_runtime_1.jsx)(DatePickerDateCell_1.DatePickerDateCell, { ...props }, `date-${props.date.toISOString()}`));
+    const classes = (0, recipes_1.datePickerCalendarSlotRecipe)({
+        monthFirst: calendarLocale === 'en',
+        yearFirst: calendarLocale === 'ja',
+    });
+    const headerMonthLabel = (0, react_1.useMemo)(() => {
+        if (calendarLocale === 'ja') {
+            return `${String(viewingValue.getMonth() + 1)}月`;
+        }
+        const formatter = new Intl.DateTimeFormat('en-US', { month: 'long' });
+        return formatter.format(viewingValue);
+    }, [calendarLocale, viewingValue]);
+    const localizedPreviousMonthAria = (0, react_1.useMemo)(() => (0, constants_1.getBasePickerLabel)('GO_TO_PREV_MONTH', calendarLocale), [calendarLocale]);
+    const localizedNextMonthAria = (0, react_1.useMemo)(() => (0, constants_1.getBasePickerLabel)('GO_TO_NEXT_MONTH', calendarLocale), [calendarLocale]);
+    const localizedTodayLabel = (0, react_1.useMemo)(() => (0, constants_1.getBasePickerLabel)('TODAY', calendarLocale), [calendarLocale]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...rest, className: (0, css_1.cx)(classes.root, 'mfui-DatePickerCalendar__root'), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.main, 'mfui-DatePickerCalendar__main'), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.header, 'mfui-DatePickerCalendar__header'), children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": prevMonthIconButtonProps?.['aria-label'] ?? localizedPreviousMonthAria, disabled: isPrevMonthDisabled, onClick: goToPreviousMonth, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PickerBefore, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.yearMonthSelector, 'mfui-DatePickerCalendar__yearMonthSelector'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.monthContainer, 'mfui-DatePickerCalendar__monthContainer'), children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "contentHeading", className: (0, css_1.cx)(classes.headerTitle, 'mfui-DatePickerCalendar__headerTitle'), children: (0, jsx_runtime_1.jsx)("span", { children: headerMonthLabel }) }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.yearContainer, 'mfui-DatePickerCalendar__yearContainer'), children: (0, jsx_runtime_1.jsx)(YearSelector_1.YearSelector, { value: viewingValue, onChange: handleSelectYear }) })] }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": nextMonthIconButtonProps?.['aria-label'] ?? localizedNextMonthAria, disabled: isNextMonthDisabled, onClick: goToNextMonth, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PickerAfter, {}) })] }), (0, jsx_runtime_1.jsx)(CalendarGrid_1.CalendarGrid, { viewingValue: viewingValue, minDate: minDate, maxDate: maxDate, checkDisabledDate: checkDisabledDate, value: internalValue, renderDateCell: customRenderDateCell, pendingFocusDate: pendingFocusDate ?? undefined, onDateClick: onDateClick, onPendingFocusDateChange: setPendingFocusDate })] }), !hideTodayButton && ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.footer, 'mfui-DatePickerCalendar__footer'), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", onClick: handleTodayButtonClick, children: todayButtonProps?.label ?? localizedTodayLabel }) }))] }));
+}

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePickerCalendar/index.d.ts

@@ -0,0 +1 @@
+export * from './DatePickerCalendar';

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePickerCalendar/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DatePickerCalendar"), exports);

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePickerDateCell/DatePickerDateCell.d.ts

@@ -0,0 +1,10 @@
+import { type DatePickerDateCellProps } from './DatePickerDateCell.types';
+/**
+ * DatePickerDateCell is a wrapper component around the shared DateCell component.
+ * It adds DatePicker-specific keyboard navigation and context integration.
+ *
+ * This component is used internally by the DatePicker component.
+ *
+ * @param props - The component props
+ */
+export declare function DatePickerDateCell({ date, selected, disabled, onKeyDown, ...otherProps }: DatePickerDateCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePickerDateCell/DatePickerDateCell.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerDateCell = DatePickerDateCell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const dayjs_1 = __importDefault(require("dayjs"));
+const BasePickerProvider_1 = require("../../shared/BasePicker/BasePickerProvider");
+const DateCell_1 = require("../../shared/DateCell");
+const accessibility_1 = require("../../shared/accessibility");
+/**
+ * DatePickerDateCell is a wrapper component around the shared DateCell component.
+ * It adds DatePicker-specific keyboard navigation and context integration.
+ *
+ * This component is used internally by the DatePicker component.
+ *
+ * @param props - The component props
+ */
+function DatePickerDateCell({ date, selected, disabled, onKeyDown, ...otherProps }) {
+    const { viewingValue, setViewingValue, setPendingFocusDate } = (0, BasePickerProvider_1.useBasePickerContext)();
+    const ariaAttributes = (0, accessibility_1.getDateAriaAttributes)({
+        date,
+        selected,
+        disabled,
+    });
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        const { key, currentTarget } = event;
+        const allowedKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+        if (!allowedKeys.includes(key)) {
+            onKeyDown?.(event);
+            return;
+        }
+        const currentDate = currentTarget.dataset['mfuiDate'];
+        if (!currentDate)
+            return;
+        const currentDayjs = (0, dayjs_1.default)(currentDate);
+        // Prevent screen scrolling when changing focus
+        event.preventDefault();
+        // Handle date navigation
+        let targetDate = currentDayjs;
+        switch (key) {
+            case 'ArrowLeft':
+                targetDate = currentDayjs.subtract(1, 'day');
+                break;
+            case 'ArrowRight':
+                targetDate = currentDayjs.add(1, 'day');
+                break;
+            case 'ArrowUp':
+                targetDate = currentDayjs.subtract(7, 'day');
+                break;
+            case 'ArrowDown':
+                targetDate = currentDayjs.add(7, 'day');
+                break;
+        }
+        const targetMonth = targetDate.format('YYYY-MM');
+        const currentMonth = (0, dayjs_1.default)(viewingValue).format('YYYY-MM');
+        if (targetMonth !== currentMonth) {
+            // If target date is in a different month, update viewingValue and set pending focus
+            setViewingValue(targetDate.toDate());
+            setPendingFocusDate(targetDate.format('YYYY-MM-DD'));
+        }
+        else {
+            // Focus the target date if it exists and is not disabled
+            const targetCell = document.querySelector(`[data-mfui-date="${targetDate.format('YYYY-MM-DD')}"]`);
+            if (targetCell && !targetCell.disabled) {
+                targetCell.focus();
+            }
+        }
+        onKeyDown?.(event);
+    }, [viewingValue, setViewingValue, setPendingFocusDate, onKeyDown]);
+    return ((0, jsx_runtime_1.jsx)(DateCell_1.DateCell, { ...otherProps, date: date, selected: selected, disabled: disabled, onKeyDown: handleKeyDown, ...ariaAttributes }));
+}

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePickerDateCell/DatePickerDateCell.types.d.ts

@@ -0,0 +1,8 @@
+import { type DateCellProps } from '../../shared/DateCell';
+/**
+ * DatePickerDateCell component props.
+ *
+ * This component wraps the shared DateCell component and adds DatePicker-specific functionality.
+ * It inherits all props from the base DateCell component.
+ */
+export type DatePickerDateCellProps = DateCellProps;

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePickerDateCell/DatePickerDateCell.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePickerDateCell/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DatePickerDateCell';
+export * from './DatePickerDateCell.types';

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePickerDateCell/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DatePickerDateCell"), exports);
+__exportStar(require("./DatePickerDateCell.types"), exports);

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePickerPanel/DatePickerPanel.d.ts

@@ -0,0 +1,8 @@
+import { type DatePickerPanelProps } from './DatePickerPanel.types';
+/**
+ * The DatePickerPanel component.
+ *
+ * This component is a panel that contains the DatePickerCalendar component.
+ * It provides the styling container for the DatePicker's calendar interface.
+ */
+export declare function DatePickerPanel({ ...rest }: DatePickerPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePickerPanel/DatePickerPanel.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerPanel = DatePickerPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DatePickerCalendar_1 = require("../DatePickerCalendar");
+const css_1 = require("../../../../styled-system/css");
+const recipes_1 = require("../../../../styled-system/recipes");
+/**
+ * The DatePickerPanel component.
+ *
+ * This component is a panel that contains the DatePickerCalendar component.
+ * It provides the styling container for the DatePicker's calendar interface.
+ */
+function DatePickerPanel({ ...rest }) {
+    const classNames = (0, recipes_1.datePickerPanelSlotRecipe)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classNames.root, 'mfui-DatePickerPanel__root'), children: (0, jsx_runtime_1.jsx)(DatePickerCalendar_1.DatePickerCalendar, { ...rest }) }));
+}

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePickerPanel/DatePickerPanel.types.d.ts

@@ -0,0 +1,6 @@
+import { type DatePickerCalendarProps } from '../DatePickerCalendar';
+/**
+ * The props for the DatePickerPanel component.
+ * Currently, it just extends the props of the DatePickerCalendar component.
+ */
+export type DatePickerPanelProps = DatePickerCalendarProps;

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePickerPanel/DatePickerPanel.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePickerPanel/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePickerPanel } from './DatePickerPanel';
+export { type DatePickerPanelProps } from './DatePickerPanel.types';

package/dist/cjs/src/DateTimeSelection/DatePicker/DatePickerPanel/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerPanel = void 0;
+var DatePickerPanel_1 = require("./DatePickerPanel");
+Object.defineProperty(exports, "DatePickerPanel", { enumerable: true, get: function () { return DatePickerPanel_1.DatePickerPanel; } });

package/dist/cjs/src/DateTimeSelection/DatePicker/index.d.ts

@@ -0,0 +1 @@
+export { DatePicker, type DatePickerProps } from './DatePicker';

package/dist/cjs/src/DateTimeSelection/DatePicker/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = void 0;
+var DatePicker_1 = require("./DatePicker");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });

package/dist/cjs/src/DateTimeSelection/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,8 @@
+import { type DateRangePickerProps } from './DateRangePicker.types';
+/**
+ * DateRangePicker component for selecting date ranges.
+ * Extends BaseRangePicker with date-specific functionality.
+ *
+ * @param props - DateRangePicker props
+ */
+export declare function DateRangePicker({ format, calendarLocale, ...restProps }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/DateTimeSelection/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePicker = DateRangePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * DateRangePicker component
+ *
+ * This is a wrapper around BaseRangePicker, setting default format to 'YYYY/MM/DD' for date selection.
+ * All logic and props are inherited from BaseRangePicker.
+ * See BaseRangePicker for implementation details.
+ */
+const BaseRangePicker_1 = require("../shared/BaseRangePicker");
+const CalendarLocaleContext_1 = require("../shared/CalendarLocale/CalendarLocaleContext");
+const DateRangePickerPopover_1 = require("./DateRangePickerPopover/DateRangePickerPopover");
+/**
+ * DateRangePicker component for selecting date ranges.
+ * Extends BaseRangePicker with date-specific functionality.
+ *
+ * @param props - DateRangePicker props
+ */
+function DateRangePicker({ format = 'YYYY/MM/DD', calendarLocale = 'ja', ...restProps }) {
+    return ((0, jsx_runtime_1.jsx)(BaseRangePicker_1.BaseRangePicker, { ...restProps, format: format, calendarLocale: calendarLocale, renderPopoverContent: () => ((0, jsx_runtime_1.jsx)(CalendarLocaleContext_1.CalendarLocaleProvider, { value: calendarLocale, children: (0, jsx_runtime_1.jsx)(DateRangePickerPopover_1.DateRangePickerPopover, {}) })) }));
+}

package/dist/cjs/src/DateTimeSelection/DateRangePicker/DateRangePicker.types.d.ts

@@ -0,0 +1,13 @@
+import { type BaseRangePickerProps } from '../shared/BaseRangePicker';
+import { type BasePickerProps } from '../shared/BasePicker';
+/**
+ * The props for the DateRangePicker component
+ */
+export type DateRangePickerProps = BaseRangePickerProps & {
+    /**
+     * The locale of the calendar.
+     *
+     * @default 'ja'
+     */
+    calendarLocale?: BasePickerProps['calendarLocale'];
+};

package/dist/cjs/src/DateTimeSelection/DateRangePicker/DateRangePicker.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/DateRangePickerCalendar/DateRangePickerCalendar.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Internal component: DateRangePickerCalendar
+ * Combines header (month label only) and CalendarGrid for a single month
+ */
+export declare function DateRangePickerCalendar({ viewingMonth, handleKeyboardNavigation, }: {
+    viewingMonth: Date;
+    handleKeyboardNavigation?: React.KeyboardEventHandler<HTMLButtonElement>;
+}): import("react/jsx-runtime").JSX.Element;