ingred-ui 31.0.5 → 31.1.0

package/dist/components/AdvancedFilter/hooks/useAdvancedFilterState.d.ts

@@ -5,9 +5,10 @@
  * メインコンポーネントの複雑性を軽減する。
  */
 /// <reference types="react" />
-import { AppliedFilter, FilterType, FilterConfig } from "../types";
+import { AppliedFilter, FilterType, FilterConfig, AdvancedFilterSelectionMode } from "../types";
 export type UseAdvancedFilterStateProps = {
     types: FilterType[];
+    selectionMode?: AdvancedFilterSelectionMode;
     onFiltersChange?: (filters: AppliedFilter[]) => void;
     initialAppliedFilters?: AppliedFilter[];
 };
@@ -34,10 +35,11 @@ export type UseAdvancedFilterStateReturn = {
         y: number;
     } | null) => void;
     handleTypeSelect: (type: string) => void;
+    handleSlotClick: (type: string) => void;
     handleConfigApply: (config: FilterConfig) => void;
     handleRemoveFilter: (filterId: string) => void;
     handleClearAll: () => void;
     handleConfigCancel: () => void;
     handleEditFilter: (filter: AppliedFilter) => void;
 };
-export declare const useAdvancedFilterState: ({ types, onFiltersChange, initialAppliedFilters, }: UseAdvancedFilterStateProps) => UseAdvancedFilterStateReturn;
+export declare const useAdvancedFilterState: ({ types, selectionMode, onFiltersChange, initialAppliedFilters, }: UseAdvancedFilterStateProps) => UseAdvancedFilterStateReturn;

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

@@ -26,10 +26,10 @@ export { AdvancedFilterTrigger } from "./AdvancedFilterTrigger";
 export { AdvancedFilterConfigPanel } from "./AdvancedFilterConfigPanel";
 export { useAdvancedFilterState } from "./hooks/useAdvancedFilterState";
 export { useFilterMenuPosition } from "./hooks/useFilterMenuPosition";
-export { TEXT_OPERATORS, NUMBER_OPERATORS, DATE_OPERATORS, SELECTION_OPERATORS, PRESET_OPERATORS, getPresetOperators, createOperator, combineOperators, overrideOperatorLabels, changeOperatorLabel, getPresetOperatorsWithLabels, selectOperators, selectOperatorsByIndex, applyOperatorToValue, applyFilter, applyMultipleFilters, evaluateFilterConditions, } from "./utils/operators";
+export { TEXT_OPERATORS, NUMBER_OPERATORS, DATE_OPERATORS, SELECTION_OPERATORS, PRESET_OPERATORS, getPresetOperators, createOperator, combineOperators, overrideOperatorLabels, changeOperatorLabel, getPresetOperatorsWithLabels, selectOperators, selectOperatorsByIndex, applyOperatorToValue, applyFilter, applyMultipleFilters, evaluateFilterConditions, normalizeForSearch, } from "./utils/operators";
 export { createValue, combineValues, overrideValueLabels, changeValueLabel, selectValues, selectValuesByIndex, getValueStrings, getValueLabels, getLabelsForValues, mergeValues, sortValues, } from "./utils/values";
 export type { ValueDefinition } from "./utils/values";
-export { isRangeOperator, isCustomOperator, isValidFilterConfig, isValidFilterType, generateTagText, generateTagTitle, getTagBoldText, getAvailableTypes, getFilterTypeLabel, } from "./utils/helpers";
+export { isRangeOperator, isCustomOperator, isValidFilterConfig, isValidFilterType, generateTagText, generateTagTitle, getTagBoldText, getAvailableTypes, getFilterTypeLabel, buildFilterSlots, getPresetSlotId, isConfiguredFilter, getConfiguredFilters, } from "./utils/helpers";
 export { FilterPositionCalculator } from "./utils/positionCalculator";
 export { ADVANCED_FILTER_CONSTANTS } from "./constants";
-export type { AdvancedFilterProps, FilterType, FilterTypeConfig, FilterConfig, AppliedFilter, OperatorDefinition, AdvancedFilterSize, AdvancedFilterVariant, FilterOperator, FilterInputType, FilterPresetType, } from "./types";
+export type { AdvancedFilterProps, FilterType, FilterTypeConfig, FilterConfig, AppliedFilter, OperatorDefinition, AdvancedFilterSize, AdvancedFilterVariant, FilterOperator, FilterInputType, FilterPresetType, AdvancedFilterSelectionMode, FilterSlotView, } from "./types";

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

@@ -82,6 +82,7 @@ export declare const IconArea: import("styled-components/dist/types").IStyledCom
 /**
  * 中央：タグエリア
  */
+export declare const CONFIGURED_PRESET_SLOT_TAG_CLASS = "ingred-advanced-filter-configured-tag";
 export declare const TagArea: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
 /**
  * プレースホルダーテキスト

package/dist/components/AdvancedFilter/types.d.ts

@@ -14,6 +14,7 @@
  * 注: FilterOperator, FilterInputType, FilterPresetType は src/utils/filterTypes.ts で
  * 定義され、本ファイルから re-export しています。
  */
+import type { MouseEvent } from "react";
 import { Theme } from "../../themes";
 import type { FilterOperator, FilterInputType, FilterPresetType } from "../../utils/filterTypes";
 export type { FilterOperator, FilterInputType, FilterPresetType };
@@ -22,6 +23,20 @@ export type FilterType = {
     label: string;
     disabled?: boolean;
 };
+/**
+ * フィルター選択 UI のモード
+ * - menu: メニューからタイプを選んで追加（default）
+ * - presetSlots: types 分のスロットを常時表示。未設定はタイプ名のみ、クリックで ConfigPanel を直接開く
+ */
+export type AdvancedFilterSelectionMode = "menu" | "presetSlots";
+/** presetSlots モード用の表示スロット */
+export type FilterSlotView = {
+    type: string;
+    typeLabel: string;
+    disabled?: boolean;
+    slotId: string;
+    filter: AppliedFilter | null;
+};
 export type OperatorDefinition = {
     value: FilterOperator | (string & {});
     label: string;
@@ -148,14 +163,22 @@ export type AdvancedFilterProps = {
     onFiltersChange?: (filters: AppliedFilter[]) => void;
     /** Story等で初期表示用に事前適用されたフィルターを指定する */
     initialAppliedFilters?: AppliedFilter[];
+    /**
+     * フィルター選択 UI のモード
+     * @default 'menu'
+     */
+    selectionMode?: AdvancedFilterSelectionMode;
 };
 export type AdvancedFilterTriggerProps = {
     placeholder?: string;
     disabled?: boolean;
     isOpen?: boolean;
-    onClick?: () => void;
+    onClick?: (event?: MouseEvent) => void;
     appliedFilters?: AppliedFilter[];
+    selectionMode?: AdvancedFilterSelectionMode;
+    filterSlots?: FilterSlotView[];
     onEditFilter?: (filter: AppliedFilter) => void;
+    onSlotClick?: (type: string) => void;
     onRemoveFilter?: (filterId: string) => void;
     onClearAll?: () => void;
     size?: "small" | "medium" | "large";

package/dist/components/AdvancedFilter/utils/helpers.d.ts

@@ -11,7 +11,7 @@
  * - タグ表示: タグのテキスト・タイトル生成
  * - バリデーション: フィルター設定・タイプの有効性チェック
  */
-import { AppliedFilter, FilterConfig, FilterInputType, FilterTypeConfig, MultiFilterConditionConfig, OperatorDefinition, ValueDefinition } from "../types";
+import { AppliedFilter, FilterConfig, FilterInputType, FilterSlotView, FilterTypeConfig, MultiFilterConditionConfig, OperatorDefinition, ValueDefinition } from "../types";
 /**
  * 範囲指定が必要なオペレーターかどうかを判定
  * @param operator オペレーターのvalue
@@ -159,4 +159,16 @@ type ConditionForTextFocus = {
  * 複数条件モードで最初のテキスト入力条件の ID を取得する
  */
 export declare const getFirstTextConditionId: (filterConfig: FilterTypeConfig | undefined, conditions: ConditionForTextFocus[]) => string | null;
+/** 未設定スロットの安定 ID */
+export declare const getPresetSlotId: (type: string) => string;
+/** 設定済み（値が入っている）フィルターかどうか */
+export declare const isConfiguredFilter: (filter: AppliedFilter) => boolean;
+/** 設定済みフィルターのみ返す */
+export declare const getConfiguredFilters: (appliedFilters: AppliedFilter[]) => AppliedFilter[];
+/** types と appliedFilters から presetSlots 表示用スロットを構築 */
+export declare const buildFilterSlots: (types: Array<{
+    type: string;
+    label: string;
+    disabled?: boolean;
+}>, appliedFilters: AppliedFilter[]) => FilterSlotView[];
 export {};

package/dist/components/AdvancedFilter/utils/operators.d.ts

@@ -69,6 +69,14 @@ export declare const selectOperators: (operators: OperatorDefinition[], values:
  * オペレーター配列から指定されたインデックスの要素のみを抽出
  */
 export declare const selectOperatorsByIndex: (operators: OperatorDefinition[], indices: number[]) => OperatorDefinition[];
+/**
+ * フィルタリング処理用のヘルパー関数群
+ * 実際のデータフィルタリング処理で使用
+ */
+/**
+ * 文字列比較用の正規化（大文字小文字・全角半角を区別しない）
+ */
+export declare const normalizeForSearch: (value: string) => string;
 /**
  * 単一の値に対してオペレーターを適用
  */

package/dist/components/AdvancedFilter/utils/positionCalculator.d.ts

@@ -27,9 +27,13 @@ export declare class FilterPositionCalculator {
      */
     private static calculateSafePosition;
     /**
-     * ConfigPanelの座標を計算
+     * ConfigPanelの座標を計算（AppliedFilter 用。後方互換）
      */
     static calculateConfigPanelPosition(filter: AppliedFilter, appliedFilters: AppliedFilter[], triggerRef: React.RefObject<HTMLDivElement>): MenuPosition;
+    /**
+     * ConfigPanelの座標を計算（slotId ベース。presetSlots モード用）
+     */
+    static calculateConfigPanelPositionBySlotId(slotId: string, slotIndex: number, triggerRef: React.RefObject<HTMLDivElement>): MenuPosition;
     /**
      * 実際のDOM要素から座標を計算
      */

package/dist/components/DateField/DateField2/useDateField2.d.ts

@@ -33,6 +33,7 @@ export declare const useDateField2: ({ date, format, disabled, onDateChange, }:
         spellCheck?: undefined;
         autoCorrect?: undefined;
         style?: undefined;
+        "aria-label"?: undefined;
         onFocus?: undefined;
         onBlur?: undefined;
         onKeyDown?: undefined;
@@ -52,6 +53,7 @@ export declare const useDateField2: ({ date, format, disabled, onDateChange, }:
         style: {
             caretColor: "transparent";
         };
+        "aria-label": "日" | "月" | "年" | undefined;
         onFocus: () => void;
         onBlur: (e: React.FocusEvent) => void;
         onKeyDown: (event: React.KeyboardEvent<HTMLSpanElement>) => void;

package/dist/components/DropdownButton/types.d.ts

@@ -59,6 +59,16 @@ export type DropdownButtonProps = {
      * - アイコン + テキスト: スピナー + ローディングテキストを表示（`true`の場合はデフォルトで"Loading..."）
      */
     loading?: boolean | string;
+    /**
+     * ドロップダウンメニューを開くトグルボタンに付ける accessible name。
+     * - split=true のときの分割トリガー（矢印のみのボタン）
+     * - 単一トリガーが children を持たないとき（アイコンのみ／ローディング中）
+     * のフォールバックとして使用されます。split モードのメインボタン (左側
+     * の onClick 用ボタン) には適用されないので、そちらが icon-only になる
+     * 場合は呼び出し側で `children` か aria-label を渡してください。
+     * @default "メニューを開く"
+     */
+    toggleAriaLabel?: string;
 };
 export type DropdownButtonSizeConfig = {
     arrowIconSize: number;

package/dist/components/LoadingBar/LoadingBar.d.ts

@@ -1,2 +1,2 @@
-declare const LoadingBar: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
+declare const LoadingBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<any, "role" | "aria-busy" | "aria-label"> & Partial<Pick<any, "role" | "aria-busy" | "aria-label">>> & string;
 export default LoadingBar;

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

@@ -7,7 +7,7 @@ export declare const SelectLabel: import("styled-components/dist/types").IStyled
 export declare const SelectLabelText: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
 export declare const SelectLabelIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<any, never> & Partial<Pick<any, never>>> & string;
 export declare const TagContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<any, never> & Partial<Pick<any, never>>> & string;
-export declare const StyledTag: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Tag").TagProps, never> & Partial<Pick<import("../Tag").TagProps, never>>> & string & Omit<({ label, size, variant, onRemove, className, disabled, boldText, onClick, "aria-label": ariaLabel, "data-tag": dataTag, prepend, }: import("../Tag").TagProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const StyledTag: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Tag").TagProps, never> & Partial<Pick<import("../Tag").TagProps, never>>> & string & Omit<({ label, size, variant, onRemove, className, disabled, boldText, onClick, onPointerDown, "aria-label": ariaLabel, "data-tag": dataTag, prepend, }: import("../Tag").TagProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
 export declare const Placeholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<any, never> & Partial<Pick<any, never>>> & string;
 export declare const IconArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<any, never> & Partial<Pick<any, never>>> & string;
 export declare const StyledContextMenu2TextInputItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<{

package/dist/components/Slider/types.d.ts

@@ -45,6 +45,10 @@ export type SliderProps = {
      * Additional inline styles.
      */
     style?: React.CSSProperties;
+    /**
+     * Accessible name for the slider. Use this when the slider has no visible label.
+     */
+    "aria-label"?: string;
     /**
      * ID of the element that labels the slider.
      */

package/dist/components/Tag/Tag.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { TagProps } from "./types";
-export declare const Tag: ({ label, size, variant, onRemove, className, disabled, boldText, onClick, "aria-label": ariaLabel, "data-tag": dataTag, prepend, }: TagProps) => JSX.Element;
+export declare const Tag: ({ label, size, variant, onRemove, className, disabled, boldText, onClick, onPointerDown, "aria-label": ariaLabel, "data-tag": dataTag, prepend, }: TagProps) => JSX.Element;

package/dist/components/Tag/types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { PointerEventHandler, ReactNode } from "react";
 export type TagSize = "small" | "medium" | "large" | "xl";
 export type TagVariant = "light" | "dark";
 export type TagProps = {
@@ -10,6 +10,11 @@ export type TagProps = {
     disabled?: boolean;
     boldText?: string | string[];
     onClick?: () => void;
+    /**
+     * ポインター押下時（マウス・タッチ）。`preventDefault` でフォーカス移動によるスクロールを抑止する用途向け。
+     * タッチでは `onMouseDown` だけでは効かないことがある。
+     */
+    onPointerDown?: PointerEventHandler<HTMLDivElement>;
     "aria-label"?: string;
     "data-tag"?: string;
     prepend?: ReactNode;

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

@@ -32,6 +32,7 @@ export declare const useTimeField2: ({ time, disabled, onTimeChange, }: Props) =
         spellCheck?: undefined;
         autoCorrect?: undefined;
         style?: undefined;
+        "aria-label"?: undefined;
         onFocus?: undefined;
         onBlur?: undefined;
         onKeyDown?: undefined;
@@ -51,6 +52,7 @@ export declare const useTimeField2: ({ time, disabled, onTimeChange, }: Props) =
         style: {
             caretColor: "transparent";
         };
+        "aria-label": string;
         onFocus: () => void;
         onBlur: (e: React.FocusEvent) => void;
         onKeyDown: (event: React.KeyboardEvent<HTMLSpanElement>) => void;

package/dist/components/WeekTime/internal/WeekTimeElement/WeekTimeElement.d.ts

@@ -6,6 +6,13 @@ export type WeekTimeElementProps = {
         active: boolean;
         hover: boolean;
     } & React.HTMLAttributes<HTMLButtonElement | HTMLSpanElement>>;
+    /**
+     * インタラクティブなセル（button）として描画される場合は true。
+     * 読み取り専用（span）として描画される場合は false。
+     * span に aria-label / aria-pressed を付与すると axe の aria-prohibited-attr に該当するため、
+     * インタラクティブな場合のみ付与する。
+     */
+    interactive?: boolean;
     isWithinHoverRange?: (weekIndex: number, timeIndex: number) => boolean;
     onMouseOver?: (weekIndex: number, timeIndex: number) => void;
     onMouseDown?: (weekIndex: number, timeIndex: number, time: string) => void;