ingred-ui 30.0.0 → 30.1.0

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

@@ -1,81 +1,3 @@
-import React, { type ReactNode } from "react";
-import { Middleware, Placement } from "@floating-ui/react";
-import { type Item } from "./types";
-type DualListBox2Props = {
-    /**
-     * 選択済みの「追加」項目の配列
-     */
-    included: Item[];
-    /**
-     * 選択済みの「除外」項目の配列
-     */
-    excluded: Item[];
-    /**
-     * 追加ボタンを非活性にし、「除外のみモード」にするかどうか
-     */
-    disableInclude?: boolean;
-    /**
-     * 除外ボタンを非活性にし、「追加のみモード」にするかどうか
-     */
-    disableExclude?: boolean;
-    /**
-     * メニューに表示するカスタムボタン要素
-     */
-    menuButtons?: ReactNode;
-    /**
-     * データ読み込み中かどうかを示すフラグ
-     */
-    loading?: boolean;
-    /**
-     * 項目リスト（DualListBox2Item, DualListBox2Accordion, DualListBox2Section のいずれかのコンポーネントのみ許可）
-     */
-    children: ReactNode;
-    /**
-     * 「追加」状態の変更イベントハンドラ
-     **/
-    onIncludedChange: (includedIds: string[]) => void;
-    /**
-     * 「除外」状態の変更イベントハンドラ
-     **/
-    onExcludedChange: (excludedIds: string[]) => void;
-    /**
-     * セクション切り替え時のハンドラ
-     **/
-    onActiveSectionChange?: (activeSection: string | null) => void;
-    /**
-     * スクロールによって追加データの読み込みが必要になったときに呼び出されるハンドラ
-     **/
-    onLoadMore?: () => void;
-    /**
-     * 1ページあたりの表示件数
-     **/
-    pageSize?: number;
-    /**
-     * 1ページあたりの表示件数の選択肢
-     **/
-    pageSizeOptions?: number[];
-    /**
-     * 1ページあたりの表示件数が変更されたときのハンドラ
-     **/
-    onPageSizeChange?: (pageSize: number) => void;
-    /**
-     * 検索フィルターの文字列
-     **/
-    filter?: string;
-    /**
-     * 検索フィルターが変更されたときのハンドラ
-     **/
-    onFilterChange?: (filter: string) => void;
-    /**
-     * Floating UIのplacement（メニューの表示位置）
-     * 詳細は https://floating-ui.com/docs/tutorial#placements を参照
-     */
-    placement?: Placement;
-    /**
-     * Floating UIのmiddleware配列（高度なメニュー位置制御用）
-     * 詳細は https://floating-ui.com/docs/middleware を参照
-     */
-    middleware?: Middleware[];
-};
+import React from "react";
+import type { DualListBox2Props } from "./types";
 export declare const DualListBox2: React.ForwardRefExoticComponent<DualListBox2Props & React.RefAttributes<HTMLDivElement>>;
-export {};

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

@@ -0,0 +1,8 @@
+import React, { type ReactNode } from "react";
+export declare const DualListBox2SelectedItem: React.MemoExoticComponent<({ id, children }: {
+    id: string;
+    children: ReactNode;
+}) => JSX.Element>;
+export declare const DualListBox2SelectedLabel: ({ label }: {
+    label: string;
+}) => JSX.Element;

package/dist/components/DualListBox2/hooks/useDualListBox2Filter.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode, type ChangeEvent } from "react";
+import type { Item } from "../types";
+type UseDualListBox2FilterProps = {
+    children: ReactNode;
+    externalFilter: string;
+    onFilterChange?: (filter: string) => void;
+    allItems: Item[];
+};
+type UseDualListBox2FilterReturn = {
+    currentFilter: string;
+    filterWords: string[];
+    filteredChildren: ReactNode;
+    matchesFilter: (label: string) => boolean;
+    handleFilterChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleFilterReset: () => void;
+};
+/**
+ * DualListBox2 のビルトインテキスト検索を提供するフック。
+ *
+ * `renderFilterHeader` が指定されている場合、DualListBox2 はこのフックの結果を
+ * バイパスし、フィルタリングはアプリ側に委ねられる（詳細は DualListBox2.tsx を参照）。
+ */
+export declare function useDualListBox2Filter({ children, externalFilter, onFilterChange, allItems, }: UseDualListBox2FilterProps): UseDualListBox2FilterReturn;
+export {};

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

@@ -17,6 +17,11 @@ export declare const traverseChildren: (children: ReactNode, callback: (child: R
 export declare const extractAllItems: (children: ReactNode) => Item[];
 export declare const getAllIds: (children: ReactNode) => string[];
 export declare const extractItemContents: (children: ReactNode) => Record<string, ReactNode>;
+export type GroupedItems = {
+    groupName?: string;
+    items: Pick<Item, "id" | "label" | "selectedContent">[];
+};
+export declare const toGrouped: (items: Item[]) => GroupedItems[];
 type groupedItems = {
     groupName?: string;
     items: Item[];

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const DualListBox2: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const TabList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
 export declare const CountBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
@@ -8,12 +9,14 @@ export declare const LeftPanel: import("styled-components").StyledComponent<"div
 export declare const LeftPanelBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const LeftPanelHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     hasMenu?: boolean | undefined;
+    hasCustomFilterHeader?: boolean | undefined;
 }, never>;
 export declare const HeaderSearch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const HeaderSearchReset: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
-export declare const HeaderMenuButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const HeaderCustomFilter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const HeaderMenuButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const HeaderCount: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const HeaderButtons: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const HeaderButtons: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const HeaderLoadButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const RightPanel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     isShow: boolean;
@@ -37,7 +40,7 @@ export declare const AccordionHeader: import("styled-components").StyledComponen
     $depth: number;
 }, never>;
 export declare const AccordionButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
-export declare const AccordionActionButtons: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const AccordionActionButtons: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const AccordionIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const SectionButtonBefore: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const SectionButtonAfter: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,4 +1,5 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
+import type { Middleware, Placement } from "@floating-ui/react";
 export type Item = {
     id: string;
     groupName?: string;
@@ -7,3 +8,87 @@ export type Item = {
     childNode?: string;
     selectedContent?: ReactNode;
 };
+export type DualListBox2Props = {
+    /**
+     * 選択済みの「追加」項目の配列
+     */
+    included: Item[];
+    /**
+     * 選択済みの「除外」項目の配列
+     */
+    excluded: Item[];
+    /**
+     * 追加ボタンを非活性にし、「除外のみモード」にするかどうか
+     */
+    disableInclude?: boolean;
+    /**
+     * 除外ボタンを非活性にし、「追加のみモード」にするかどうか
+     */
+    disableExclude?: boolean;
+    /**
+     * メニューに表示するカスタムボタン要素
+     */
+    menuButtons?: ReactNode;
+    /**
+     * データ読み込み中かどうかを示すフラグ
+     */
+    loading?: boolean;
+    /**
+     * 項目リスト（DualListBox2Item, DualListBox2Accordion, DualListBox2Section のいずれかのコンポーネントのみ許可）
+     */
+    children: ReactNode;
+    /**
+     * 「追加」状態の変更イベントハンドラ
+     **/
+    onIncludedChange: (includedIds: string[]) => void;
+    /**
+     * 「除外」状態の変更イベントハンドラ
+     **/
+    onExcludedChange: (excludedIds: string[]) => void;
+    /**
+     * セクション切り替え時のハンドラ
+     **/
+    onActiveSectionChange?: (activeSection: string | null) => void;
+    /**
+     * スクロールによって追加データの読み込みが必要になったときに呼び出されるハンドラ
+     **/
+    onLoadMore?: () => void;
+    /**
+     * 1ページあたりの表示件数
+     **/
+    pageSize?: number;
+    /**
+     * 1ページあたりの表示件数の選択肢
+     **/
+    pageSizeOptions?: number[];
+    /**
+     * 1ページあたりの表示件数が変更されたときのハンドラ
+     **/
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * 検索フィルターの文字列
+     **/
+    filter?: string;
+    /**
+     * 検索フィルターが変更されたときのハンドラ
+     **/
+    onFilterChange?: (filter: string) => void;
+    /**
+     * デフォルトの検索UIを置き換えるカスタムフィルターヘッダー。
+     * 指定時は内蔵のシンプル検索が非表示になり、フィルタリングはアプリ側の責務となる。
+     *
+     * セクション型と組み合わせる場合は、セクション未選択時のフィルター無効化や、
+     * セクション一覧へ戻ったときのフィルターリセットもアプリ側で制御する。
+     **/
+    renderFilterHeader?: () => ReactNode;
+    /**
+     * Floating UIのplacement（メニューの表示位置）
+     * 詳細は https://floating-ui.com/docs/tutorial#placements を参照
+     */
+    placement?: Placement;
+    /**
+     * Floating UIのmiddleware配列（高度なメニュー位置制御用）
+     * 詳細は https://floating-ui.com/docs/middleware を参照
+     */
+    middleware?: Middleware[];
+};