ingred-ui 23.23.0 → 23.24.0

package/dist/components/Calendar/Calendar/Calendar.d.ts

@@ -1,6 +1,7 @@
 import { Dayjs } from "dayjs";
 import React from "react";
 import { PresetButton } from "../internal/Actions";
+import { TimeFieldProps } from "../../TimeField/TimeField";
 export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * 日付
@@ -53,6 +54,15 @@ export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
      * 日付が変更されたときに呼ばれる関数
      */
     onDateChange: (value: Dayjs) => void;
+    /**
+     * カレンダー内にTimeFieldを表示する
+     * @default false
+     */
+    showTimeFields?: boolean;
+    /**
+     * TimeFieldのprops
+     */
+    timeFieldProps?: Partial<TimeFieldProps>;
 };
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /**
@@ -106,5 +116,14 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
      * 日付が変更されたときに呼ばれる関数
      */
     onDateChange: (value: Dayjs) => void;
+    /**
+     * カレンダー内にTimeFieldを表示する
+     * @default false
+     */
+    showTimeFields?: boolean | undefined;
+    /**
+     * TimeFieldのprops
+     */
+    timeFieldProps?: Partial<TimeFieldProps> | undefined;
 } & React.RefAttributes<HTMLDivElement>>>;
 export default _default;

package/dist/components/Calendar/Calendar/Calendar.stories.d.ts

@@ -16,6 +16,8 @@ declare const _default: {
         dateFieldFormat?: string | undefined;
         isOutsideRange?: ((date: dayjs.Dayjs) => boolean) | undefined;
         onDateChange: (value: dayjs.Dayjs) => void;
+        showTimeFields?: boolean | undefined;
+        timeFieldProps?: Partial<import("../..").TimeFieldProps> | undefined;
     } & React.RefAttributes<HTMLDivElement>>>;
 };
 export default _default;
@@ -24,3 +26,4 @@ export declare const IsOutsideRange: StoryObj<CalendarProps>;
 export declare const WithPresetButtons: StoryObj<CalendarProps>;
 export declare const WithDateField: StoryObj<CalendarProps>;
 export declare const WithDateFieldAndPresetButtons: StoryObj<CalendarProps>;
+export declare const WithDateFieldsAndTimeFields: StoryObj<CalendarProps>;

package/dist/components/Calendar/CalendarRange/CalendarRange.d.ts

@@ -2,6 +2,7 @@ import dayjs, { Dayjs } from "dayjs";
 import { DateRange } from "../..";
 import React from "react";
 import { PresetButton } from "../internal/Actions";
+import { TimeFieldProps } from "../../TimeField/TimeField";
 export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * 開始日
@@ -62,7 +63,16 @@ export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * 日付が変更されたときに呼ばれる関数
      */
-    onDatesChange: (dates: DateRange) => void;
+    onDatesChange?: (dates: DateRange) => void;
+    /**
+     * カレンダー内にTimeFieldを表示する
+     * @default false
+     */
+    showTimeFields?: boolean;
+    /**
+     * TimeFieldのprops
+     */
+    timeFieldProps?: Partial<TimeFieldProps>;
 };
 /**
  * CalendarRange
@@ -129,7 +139,16 @@ export declare const CalendarRange: React.ForwardRefExoticComponent<React.HTMLAt
     /**
      * 日付が変更されたときに呼ばれる関数
      */
-    onDatesChange: (dates: DateRange) => void;
+    onDatesChange?: ((dates: DateRange) => void) | undefined;
+    /**
+     * カレンダー内にTimeFieldを表示する
+     * @default false
+     */
+    showTimeFields?: boolean | undefined;
+    /**
+     * TimeFieldのprops
+     */
+    timeFieldProps?: Partial<TimeFieldProps> | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export type { DateRange };
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
@@ -192,6 +211,15 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     /**
      * 日付が変更されたときに呼ばれる関数
      */
-    onDatesChange: (dates: DateRange) => void;
+    onDatesChange?: ((dates: DateRange) => void) | undefined;
+    /**
+     * カレンダー内にTimeFieldを表示する
+     * @default false
+     */
+    showTimeFields?: boolean | undefined;
+    /**
+     * TimeFieldのprops
+     */
+    timeFieldProps?: Partial<TimeFieldProps> | undefined;
 } & React.RefAttributes<HTMLDivElement>>>;
 export default _default;

package/dist/components/Calendar/CalendarRange/CalendarRange.stories.d.ts

@@ -17,7 +17,9 @@ declare const _default: {
         dateFieldFormat?: string | undefined;
         onClose?: ((clickState: any) => void) | undefined;
         isOutsideRange?: ((date: dayjs.Dayjs) => boolean) | undefined;
-        onDatesChange: (dates: import("./CalendarRange").DateRange) => void;
+        onDatesChange?: ((dates: import("./CalendarRange").DateRange) => void) | undefined;
+        showTimeFields?: boolean | undefined;
+        timeFieldProps?: Partial<import("../..").TimeFieldProps> | undefined;
     } & React.RefAttributes<HTMLDivElement>>>;
 };
 export default _default;
@@ -26,3 +28,4 @@ export declare const IsOutsideRange: StoryObj<CalendarRangeProps>;
 export declare const WithPresetButtons: StoryObj<CalendarRangeProps>;
 export declare const WithDateField: StoryObj<CalendarRangeProps>;
 export declare const WithDateFieldAndPresetButtons: StoryObj<CalendarRangeProps>;
+export declare const WithDateFieldsAndTimeFields: StoryObj<CalendarRangeProps>;

package/dist/components/ContextMenu2/ContextMenu2.d.ts

@@ -30,6 +30,10 @@ type ContextMenu2Props = {
      * コンテキストメニューの最小幅
      */
     minWidth?: number;
+    /**
+     * コンテキストメニューの最大高さ（省略時は80vh）
+     */
+    maxHeight?: string | number;
     /**
      * メニュー内の項目。ContextMenu2*** のコンポーネントのみで構成する前提
      */

package/dist/components/ContextMenu2/ContextMenu2.stories.d.ts

@@ -10,6 +10,7 @@ declare const _default: {
         }, "button">;
         width?: number | undefined;
         minWidth?: number | undefined;
+        maxHeight?: string | number | undefined;
         children: React.ReactNode;
         onOpenChange?: ((open: boolean) => void) | undefined;
         stickyHeader?: React.ReactNode;

package/dist/components/DateField/DateRangeField/DateRangeField.stories.d.ts

@@ -14,3 +14,4 @@ export declare const Disable: StoryObj<DateRangeFieldProps>;
 export declare const Small: StoryObj<DateRangeFieldProps>;
 export declare const Large: StoryObj<DateRangeFieldProps>;
 export declare const Dark: StoryObj<DateRangeFieldProps>;
+export declare const WithTimeFormat: StoryObj<DateRangeFieldProps>;

package/dist/components/DateField/constants.d.ts

@@ -17,6 +17,9 @@ export declare const AllowedKeys: {
     readonly "8": "8";
     readonly "9": "9";
 };
+export declare const numpadCodes: string[];
 export declare const numberKeys: string[];
-export declare const allowedKeys: ("0" | "1" | "4" | "2" | "3" | "5" | "6" | "8" | "ArrowDown" | "ArrowUp" | "7" | "Backspace" | "Delete" | "ArrowLeft" | "ArrowRight" | "Tab" | "9")[];
+export declare const allowedKeys: ("0" | "1" | "4" | "2" | "3" | "5" | "ArrowDown" | "ArrowUp" | "Backspace" | "Delete" | "ArrowLeft" | "ArrowRight" | "Tab" | "6" | "7" | "8" | "9")[];
+export declare const isNumpadKey: (code: string) => boolean;
+export declare const getNumpadNumber: (code: string) => string | null;
 export type AllowedKeys = (typeof AllowedKeys)[keyof typeof AllowedKeys];

package/dist/components/DateField/utils.d.ts

@@ -23,4 +23,37 @@ export declare const getSections: (formattedDate?: string | null) => Sections[];
  * 開始位置と終了位置と値を持つセクションをフォーマットされた日付に変換する
  */
 export declare const formatString: (sectionsWithCharacter: Sections[]) => string;
+/**
+ * セクションの種類を判定する
+ *
+ * セクションとは、日付フォーマットを編集可能な部分に分割した単位のことです。
+ * 例: "2023-01-02" -> [
+ *   { value: "2023", editable: true },  // 年セクション
+ *   { value: "-", editable: false },    // 区切り文字
+ *   { value: "01", editable: true },    // 月セクション
+ *   { value: "-", editable: false },    // 区切り文字
+ *   { value: "02", editable: true }     // 日セクション
+ * ]
+ *
+ * @param sectionLength セクションの値の長さ
+ * @param format 日付フォーマット
+ * @param sectionIndex セクションのインデックス
+ * @returns "year" | "month" | "day" | "unknown"
+ */
+export declare const getSectionType: (sectionLength: number, format: string, sectionIndex: number) => "year" | "month" | "day" | "unknown";
+/**
+ * 入力が確定すべきかを判定
+ *
+ * セクションの種類に応じて、1桁目の入力で確定すべきかを判定します。
+ * - 年: 4桁入力完了で確定
+ * - 月: 1桁目が2-9なら即確定、0-1なら2桁目待ち
+ * - 日: 1桁目が4-9なら即確定、0-3なら2桁目待ち
+ *
+ * @param inputNumber 入力された数字
+ * @param keyDownCount 現在の入力カウント
+ * @param sectionType セクションの種類（年・月・日）
+ * @param sectionLength セクションの値の長さ
+ * @returns true: 確定して次のセクションへ移動, false: まだ入力を受け付ける
+ */
+export declare const shouldMoveToNextSection: (inputNumber: string, keyDownCount: number, sectionType: "year" | "month" | "day" | "unknown", sectionLength: number) => boolean;
 export {};

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { PresetButton } from "../Calendar/internal/Actions";
 import { Dayjs } from "dayjs";
+import { TimeFieldProps } from "../TimeField/TimeField";
 import { InputSize, InputVariant } from "../Input/types";
 export type DatePickerProps = {
     /**
@@ -85,6 +86,31 @@ export type DatePickerProps = {
      * 日付が変更されたときに呼ばれる関数
      */
     onDateChange: (date: Dayjs) => void;
+    /**
+     * 日付範囲が変更されたときに呼ばれる関数（useCalendarRange=trueの時）
+     */
+    onDatesChange?: (dates: {
+        startDate: Dayjs;
+        endDate: Dayjs;
+    }) => void;
+    /**
+     * 終了日付（useCalendarRange=trueの時）
+     */
+    endDate?: Dayjs;
+    /**
+     * カレンダー内にTimeFieldを表示する
+     * @default false
+     */
+    showTimeFields?: boolean;
+    /**
+     * TimeFieldのprops
+     */
+    timeFieldProps?: Partial<TimeFieldProps>;
+    /**
+     * CalendarRangeを使用するかどうか
+     * @default false
+     */
+    useCalendarRange?: boolean;
 };
 export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>>;

package/dist/components/DatePicker/DatePicker.stories.d.ts

@@ -21,3 +21,4 @@ export declare const LargeSize: StoryObj<DatePickerProps>;
 export declare const DarkVariant: StoryObj<DatePickerProps>;
 export declare const WithDateFields: StoryObj<DatePickerProps>;
 export declare const WithDateFieldsAndPresetButtons: StoryObj<DatePickerProps>;
+export declare const WithDateFieldsAndTimeFields: StoryObj<DatePickerProps>;

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Dayjs } from "dayjs";
 import { PresetButton } from "../Calendar/internal/Actions";
+import { TimeFieldProps } from "../TimeField/TimeField";
 import { InputSize, InputVariant } from "../Input/types";
 export type DateRange = {
     startDate: Dayjs;
@@ -85,6 +86,20 @@ export type DateRangePickerProps = {
      * 日付が変更されたときに呼ばれる関数
      */
     onDatesChange: (dates: DateRange) => void;
+    /**
+     * カレンダー内にTimeFieldを表示する
+     * @default false
+     */
+    showTimeFields?: boolean;
+    /**
+     * TimeFieldのprops
+     */
+    timeFieldProps?: Partial<TimeFieldProps>;
+    /**
+     * 日付の表示フォーマット
+     * @default "YYYY-MM-DD"
+     */
+    format?: string;
 };
 export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>>;

package/dist/components/DualListBox2/DualListBox2.stories.d.ts

@@ -32,8 +32,8 @@ declare const meta: {
             fn: (state: {
                 x: number;
                 y: number;
-                platform: import("@floating-ui/core").Platform;
                 placement: import("@floating-ui/utils").Placement;
+                platform: import("@floating-ui/core").Platform;
                 strategy: import("@floating-ui/utils").Strategy;
                 initialPlacement: import("@floating-ui/utils").Placement;
                 middlewareData: import("@floating-ui/core").MiddlewareData;

package/dist/components/FilterComboBox/FilterComboBox.stories.d.ts

@@ -28,8 +28,8 @@ declare const meta: {
             fn: (state: {
                 x: number;
                 y: number;
-                platform: import("@floating-ui/core").Platform;
                 placement: import("@floating-ui/utils").Placement;
+                platform: import("@floating-ui/core").Platform;
                 strategy: import("@floating-ui/utils").Strategy;
                 initialPlacement: import("@floating-ui/utils").Placement;
                 middlewareData: import("@floating-ui/core").MiddlewareData;

package/dist/components/TimeField/TimeField.d.ts

@@ -0,0 +1,96 @@
+import React from "react";
+import { Dayjs } from "dayjs";
+/**
+ * 時刻入力コンポーネント
+ *
+ * キーボード入力とドロップダウン選択の両方で時刻を入力できます。
+ * - キーボード入力: セクション（時、分）ごとに上下キーで増減、数字キーで直接入力
+ * - ドロップダウン: 矢印アイコンをクリックして時刻リストから選択
+ * - フィルター: filterTimeOptionsで選択可能な時刻をカスタマイズ可能
+ *
+ * @example
+ * ```tsx
+ * const [time, setTime] = useState(dayjs().hour(9).minute(0));
+ *
+ * <TimeField
+ *   time={time}
+ *   onTimeChange={setTime}
+ *   dropdownInterval={30}
+ *   filterTimeOptions={[
+ *     (time) => {
+ *       const hour = parseInt(time.split(":")[0]);
+ *       return hour >= 9 && hour < 18; // 9時〜18時のみ
+ *     }
+ *   ]}
+ * />
+ * ```
+ */
+export type TimeFieldProps = {
+    /**
+     * 時刻
+     * @default dayjs()
+     */
+    time?: Dayjs | null;
+    /**
+     * エラー状態
+     * Inputを警告色にするのみでエラーテキストは付随しない。
+     * errorTextを別途実装する場合などに利用する。
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * エラーメッセージのテキスト
+     * Inputを警告色にし、エラーテキストも表示する。
+     * 簡単にエラー状態を表現したい場合はこちらがおすすめ。
+     */
+    errorText?: string;
+    /**
+     * 入力を無効にする
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 時刻が変更されたときに呼ばれる関数
+     */
+    onTimeChange?: (time: Dayjs) => void;
+    /**
+     * ドロップダウンの時刻間隔（分）
+     * @default 60
+     */
+    dropdownInterval?: number;
+    /**
+     * 時刻選択肢をフィルタリングする関数の配列
+     * すべてのフィルターを通過した時刻のみが表示される
+     * 各フィルター関数は時刻文字列（例: "09:00"）を受け取り、表示する場合はtrue、非表示にする場合はfalseを返す
+     */
+    filterTimeOptions?: Array<(time: string) => boolean>;
+    /**
+     * サイズ
+     * @default "medium"
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * バリアント
+     * @default "light"
+     */
+    variant?: "light" | "dark";
+    /**
+     * 幅を明示的に指定
+     */
+    width?: string;
+    /**
+     * ドロップダウンメニューの最大高さ
+     * @default 300
+     */
+    maxHeight?: number | string;
+    /**
+     * フォーカスイベント
+     */
+    onFocus?: () => void;
+    /**
+     * ブラーイベント
+     */
+    onBlur?: () => void;
+};
+declare const _default: React.NamedExoticComponent<TimeFieldProps>;
+export default _default;

package/dist/components/TimeField/TimeField.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import TimeField, { TimeFieldProps } from "./TimeField";
+declare const meta: Meta<typeof TimeField>;
+export default meta;
+type Story = StoryObj<TimeFieldProps>;
+export declare const Example: Story;
+export declare const SmallSize: Story;
+export declare const LargeSize: Story;
+export declare const DarkVariant: Story;
+export declare const Disabled: Story;
+export declare const Error: Story;
+export declare const FilteredTimeOptions: Story;

package/dist/components/TimeField/__tests__/TimeField.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/TimeField/__tests__/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/TimeField/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as TimeField } from "./TimeField";
+export type { TimeFieldProps } from "./TimeField";

package/dist/components/TimeField/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const DropdownIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    disabled?: boolean | undefined;
+}, never>;

package/dist/components/TimeField/utils.d.ts

@@ -0,0 +1,53 @@
+import { Dayjs } from "dayjs";
+import { AllowedKeys } from "../DateField/constants";
+import type { Sections } from "../DateField/types";
+/**
+ * 指定した間隔で時刻オプションを生成する
+ * @param interval 間隔（分）
+ * @returns 時刻文字列の配列 ["00:00", "00:15", ...]
+ */
+export declare const generateTimeOptions: (interval?: number) => string[];
+/**
+ * 左右キーでセクションを移動する際の移動量を計算する
+ * @param currentIndex 現在のセクションインデックス
+ * @param direction 移動方向 ("ArrowLeft" | "ArrowRight")
+ * @param sections セクション配列
+ * @returns 移動量（差分）
+ */
+export declare const calculateSectionIndexDelta: (currentIndex: number, direction: typeof AllowedKeys.ArrowLeft | typeof AllowedKeys.ArrowRight, sections: Sections[]) => number;
+/**
+ * 上下キーで時刻を増減する
+ * @param currentTime 現在の時刻
+ * @param sectionIndex 現在のセクションインデックス（HH:mm形式の場合、0=時、2=分）
+ * @param increment 増減量（1または-1）
+ * @param format 時刻フォーマット（例: "HH:mm"）
+ * @returns 増減後の時刻と正規化された値
+ */
+export declare const calculateIncrementedTime: (currentTime: Dayjs, sectionIndex: number, increment: number, format: string) => {
+    newTime: Dayjs;
+    normalizedValue: string;
+} | null;
+/**
+ * 数字入力処理の結果
+ */
+export type NumericInputResult = {
+    newSections: Sections[];
+    shouldMoveToNextSection: boolean;
+    newLastEditedSection: number | null;
+};
+/**
+ * 数字キーで値を直接入力する処理
+ * @param inputNumber 入力された数字文字列
+ * @param sections 現在のセクション配列
+ * @param sectionIndex 現在のセクションインデックス
+ * @param lastEditedSection 最後に編集したセクションのインデックス
+ * @returns 新しいセクション配列、次のセクションへの移動フラグ、新しい編集履歴
+ */
+export declare const processNumericInput: (inputNumber: string, sections: Sections[], sectionIndex: number, lastEditedSection: number | null) => NumericInputResult;
+/**
+ * Backspaceキーで値をクリアする処理
+ * @param sections 現在のセクション配列
+ * @param sectionIndex 現在のセクションインデックス
+ * @returns 新しいセクション配列
+ */
+export declare const processBackspaceInput: (sections: Sections[], sectionIndex: number) => Sections[];

package/dist/components/index.d.ts

@@ -117,6 +117,8 @@ export { default as Tabs } from "./Tabs";
 export * from "./Tabs";
 export { default as TextField } from "./TextField";
 export * from "./TextField";
+export { TimeField } from "./TimeField";
+export * from "./TimeField";
 export { default as Toast } from "./Toast";
 export * from "./Toast";
 export { default as ToggleButton } from "./ToggleButton";