ingred-ui 21.4.2 → 22.1.0

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

@@ -2,32 +2,32 @@ import React, { type ReactNode } from "react";
 import { type Item } from "./types";
 type DualListBox2Props = {
     /**
-     * 選択済みの「追加」項目
-     **/
+     * 選択済みの「追加」項目の配列
+     */
     included: Item[];
     /**
-     * 選択済みの「除外」項目
-     **/
+     * 選択済みの「除外」項目の配列
+     */
     excluded: Item[];
     /**
-     * 追加ボタンを非活性にし、「排他のみモード」にするかどうか
-     **/
+     * 追加ボタンを非活性にし、「除外のみモード」にするかどうか
+     */
     disableInclude?: boolean;
     /**
-     * 除外ボタンを非活性にし、「排他のみモード」にするかどうか
-     **/
+     * 除外ボタンを非活性にし、「追加のみモード」にするかどうか
+     */
     disableExclude?: boolean;
     /**
-     * メニューに表示するボタン要素
-     **/
+     * メニューに表示するカスタムボタン要素
+     */
     menuButtons?: ReactNode;
     /**
-     * ローディング中かどうかのフラグ
-     **/
+     * データ読み込み中かどうかを示すフラグ
+     */
     loading?: boolean;
     /**
-     * 項目リスト（DualListBox2Item, DualListBox2Accordion, DualListBox2Section のいずれかのみ）
-     **/
+     * 項目リスト（DualListBox2Item, DualListBox2Accordion, DualListBox2Section のいずれかのコンポーネントのみ許可）
+     */
     children: ReactNode;
     /**
      * 「追加」状態の変更イベントハンドラ
@@ -57,6 +57,14 @@ type DualListBox2Props = {
      * 1ページあたりの表示件数が変更されたときのハンドラ
      **/
     onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * 検索フィルターの文字列
+     **/
+    filter?: string;
+    /**
+     * 検索フィルターが変更されたときのハンドラ
+     **/
+    onFilterChange?: (filter: string) => void;
 };
 export declare const DualListBox2: React.ForwardRefExoticComponent<DualListBox2Props & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,11 +1,16 @@
 import React from "react";
-import { StoryObj, ComponentStory } from "@storybook/react";
-import { type Item, DualListBox2 } from "./index";
+import { StoryObj } from "@storybook/react";
+import { DualListBox2 } from "./DualListBox2";
+export type Item = {
+    id: string;
+    label: string;
+    groupName?: string;
+};
 declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<{
-        included: Item[];
-        excluded: Item[];
+        included: import("./types").Item[];
+        excluded: import("./types").Item[];
         disableInclude?: boolean | undefined;
         disableExclude?: boolean | undefined;
         menuButtons?: React.ReactNode;
@@ -18,45 +23,42 @@ declare const meta: {
         pageSize?: number | undefined;
         pageSizeOptions?: number[] | undefined;
         onPageSizeChange?: ((pageSize: number) => void) | undefined;
+        filter?: string | undefined;
+        onFilterChange?: ((filter: string) => void) | undefined;
     } & React.RefAttributes<HTMLDivElement>>;
-    argTypes: {};
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default meta;
+type Story = StoryObj<typeof DualListBox2>;
 /**
  * #### ベーシックなタイプ
  *
  * 件数の上限が不明で都度サーバへ問い合わせる必要がある場合、上限が決まっている場合いずれにも使えます。
- *
- * ---
- *
- * `included` と `excluded` で選択中の値を指定します。
- * 選択状態変更時は、`onIncludedChange` と `onExcludedChange` で、新しい `included` と `excluded` を受け取れるので、これを使って `included` と `excluded` を更新してください。
- *
- * children には、左パネル用の選択できる項目を渡します。右パネルの内容は状態に応じて自動で表示管理されます。
- *
- * モバイルサイズでは、タブで左右パネルの表示を切り替える
- *
- * included はフラットな配列。アコーディオンやセクションの group ごとに分けて配置する
  */
-export declare const Default: ComponentStory<typeof DualListBox2>;
+export declare const Default: Story;
 /**
- * #### 選択候補がアコーディオンで折りたたまれているタイプ
+ * #### アコーディオンタイプ
  *
- * 件数の上限が決まっていて、多い場合や区切りたい場合に利用します。
- * セクションごとに一括選択もできます。
+ * グループ化されたアイテムを表示する場合に使用します。
  */
-export declare const Accordion: StoryObj<typeof DualListBox2>;
+export declare const Accordion: Story;
 /**
- * 「追加」「除外」のいずれかしかできない場合の例です。
+ * #### 「追加」「除外」のいずれかしかできない場合
+ *
  * 状況に応じて、`disableExclude`（除外無効）、`disableInclude`（追加無効） に `true` を指定して制御してください。
  */
-export declare const Either: StoryObj<typeof DualListBox2>;
+export declare const Either: Story;
 /**
  * #### 選択候補がセクションで分かれているタイプ
  *
  * 件数の上限が不明で都度サーバへ問い合わせる必要がある場合に利用します。
  * 検索は各セクションに移動後に使えます。
- *
- * 任意のセクション選択中は、その他のセクションは非表示となります。
  */
-export declare const Section: StoryObj<typeof DualListBox2>;
+export declare const Section: Story;

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

@@ -1,12 +1,10 @@
-import { type ReactNode } from "react";
-type DualListBox2ItemProps = {
+import React, { type ReactNode } from "react";
+export type DualListBox2ItemProps = {
     id: string;
     children: ReactNode;
+    isIncluded?: boolean;
+    isExcluded?: boolean;
     disableInclude?: boolean;
     disableExclude?: boolean;
 };
-export declare const DualListBox2Item: {
-    ({ id, disableInclude, disableExclude, children, }: DualListBox2ItemProps): JSX.Element | null;
-    displayName: string;
-};
-export {};
+export declare const DualListBox2Item: React.FC<DualListBox2ItemProps>;

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

@@ -9,6 +9,7 @@ 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, {}, 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 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>;