ingred-ui 14.11.0 → 14.13.0

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

@@ -1,3 +1,6 @@
+export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    expanded: boolean;
+}, never>;
 export declare const AccordionTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Flex").FlexProps & {
     expanded: boolean;
     disabled?: boolean | undefined;

package/dist/components/DualListBox/DualListBox.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+type DualListBoxItemId = string;
+type DualListBoxItemSelectedWithToggle = {
+    id: DualListBoxItemId;
+    checked: boolean;
+};
+type DualListBoxItemSelected = {
+    id: DualListBoxItemId;
+    checked?: undefined;
+};
+export type DualListBoxItem = {
+    id: DualListBoxItemId;
+    label?: string;
+    items?: DualListBoxItem[];
+};
+export type DualListBoxSelectedItem = DualListBoxItemSelectedWithToggle | DualListBoxItemSelected;
+type BaseProps = {
+    candidateItems: DualListBoxItem[];
+    onAdd?: (id: DualListBoxItemId) => void;
+    onRemove?: (id: DualListBoxItemId) => void;
+};
+export type DualListBoxProps = BaseProps & ({
+    selectedItems: DualListBoxItemSelected[];
+    onToggleChange?: undefined;
+} | {
+    selectedItems: DualListBoxItemSelectedWithToggle[];
+    onToggleChange: (id: DualListBoxItemId) => void;
+});
+/**
+ * @memo 内部で選択候補の状態を保持するための型
+ */
+export type CandidateItem = DualListBoxItem & {
+    selected?: boolean;
+};
+/**
+ * @memo 内部で選択済みの状態を保持するための型
+ */
+export type SelectedItem = DualListBoxSelectedItem & {
+    label?: string;
+};
+declare const DualListBox: React.ForwardRefExoticComponent<DualListBoxProps & React.RefAttributes<HTMLDivElement>>;
+export default DualListBox;

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { StoryObj } from "@storybook/react";
+import { DualListBoxProps } from "./DualListBox";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<DualListBoxProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const Example: StoryObj<DualListBoxProps>;
+/**
+ * ingred-ui としてのデータ構造自体は再帰で表現しておいて
+ * onAdd/onRemove 等での状態管理であったり submit する
+ * ときにフラットにするのは利用者側で頑張ってもらう
+ */
+export declare const Nested: StoryObj<DualListBoxProps>;
+export declare const WithToggle: StoryObj<DualListBoxProps>;

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

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

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

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

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

@@ -0,0 +1,2 @@
+export { default } from "./DualListBox";
+export type { DualListBoxProps, DualListBoxItem, DualListBoxSelectedItem, } from "./DualListBox";

package/dist/components/DualListBox/internal/CandidateRenderer/CandidateRenderer.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { DualListBoxItem } from "../../DualListBox";
+/**
+ * @memo ネストした構造を持つものを扱う場合は、再帰的に処理する必要がある
+ */
+export declare const CandidateRenderer: React.FunctionComponent<{
+    items: DualListBoxItem[];
+    onAdd?: (id: string) => void;
+    onRemove?: (id: string) => void;
+}>;

package/dist/components/DualListBox/internal/CandidateRenderer/index.d.ts

@@ -0,0 +1 @@
+export { CandidateRenderer } from "./CandidateRenderer";

package/dist/components/DualListBox/internal/CandidateRenderer/internal/SelectLabel/SelectLabel.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { CandidateItem } from "../../../../DualListBox";
+export declare const SelectLabel: React.FunctionComponent<{
+    item: CandidateItem;
+    onAdd?: (id: string) => void;
+    onRemove?: (id: string) => void;
+    children: React.ReactNode;
+}>;

package/dist/components/DualListBox/internal/CandidateRenderer/internal/SelectLabel/index.d.ts

@@ -0,0 +1 @@
+export { SelectLabel } from "./SelectLabel";

package/dist/components/DualListBox/internal/CandidateRenderer/styled.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const Container: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const UnselectedItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    isLastIndex?: boolean | undefined;
+}, never>;
+export declare const AccordionWrapper: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    isLastIndex?: boolean | undefined;
+}, never>;
+export declare const AccordionComponent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Accordion/Accordion").AccordionProps & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const AccordionTitleWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/DualListBox/internal/SelectedList/SelectedList.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { SelectedItem } from "../../DualListBox";
+export declare const SelectedList: React.FunctionComponent<{
+    items: SelectedItem[];
+    onRemove?: (id: string) => void;
+    onToggleChange?: (id: string) => void;
+}>;

package/dist/components/DualListBox/internal/SelectedList/index.d.ts

@@ -0,0 +1 @@
+export { SelectedList } from "./SelectedList";

package/dist/components/DualListBox/internal/SelectedList/styled.d.ts

@@ -0,0 +1,8 @@
+export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SelectedHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SelectedList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const SelectedItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    isLastIndex: boolean;
+}, never>;
+export declare const RemoveButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const Action: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1 @@
+export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,2 @@
+import { CandidateItem, SelectedItem } from "./DualListBox";
+export declare const getCandidateItems: (candidateItems: CandidateItem[], selectedItems: SelectedItem[]) => CandidateItem[];

package/dist/components/Icon/Icon.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-export type IconName = "dashboard" | "bar_chart" | "bar_chart_framed" | "line_chart_framed" | "multi_line_chart_framed" | "logout" | "setting" | "arrow_bottom" | "arrow_left" | "arrow_right" | "pencil" | "delete_bin" | "close" | "forbid" | "check" | "eye" | "eye_off" | "exclamation" | "arrow_double_left" | "arrow_double_right" | "question" | "zoom_in" | "sort_up" | "sort_down" | "sort_inactive" | "folder" | "folder_open" | "refresh_line" | "return_line" | "link" | "unlink" | "no_link" | "search" | "import" | "export" | "add_line" | "more" | "more_vert" | "date_range" | "external_link" | "desktop" | "mobile" | "desktop_mobile" | "copy" | "truck" | "camera_movie" | "code_file" | "cart_secure" | "profile" | "auction" | "mail" | "mail_open" | "filter" | "notification" | "user_settings" | "company_settings" | "heart_pulse" | "checkbox_circle" | "alart" | "base_station" | "braille" | "label" | "download_cloud" | "save" | "close_circle" | "bid_strap" | "fluct" | "data_strap" | "company" | "document" | "user" | "information" | "analytics" | "support" | "apps" | "ad_block" | "building" | "image" | "calendar" | "menu" | "file_list" | "draft" | "time" | "stop_circle" | "play_circle" | "sort_asc" | "sort_desc" | "bar_chart_search" | "check_thin";
+export type IconName = "dashboard" | "bar_chart" | "bar_chart_framed" | "line_chart_framed" | "multi_line_chart_framed" | "logout" | "setting" | "arrow_bottom" | "arrow_left" | "arrow_right" | "pencil" | "delete_bin" | "close" | "forbid" | "check" | "eye" | "eye_off" | "exclamation" | "arrow_double_left" | "arrow_double_right" | "question" | "zoom_in" | "sort_up" | "sort_down" | "sort_inactive" | "folder" | "folder_open" | "refresh_line" | "return_line" | "link" | "unlink" | "no_link" | "search" | "import" | "export" | "add_line" | "more" | "more_vert" | "date_range" | "external_link" | "desktop" | "mobile" | "desktop_mobile" | "copy" | "truck" | "camera_movie" | "code_file" | "cart_secure" | "profile" | "auction" | "mail" | "mail_open" | "filter" | "notification" | "user_settings" | "company_settings" | "heart_pulse" | "checkbox_circle" | "alart" | "base_station" | "braille" | "label" | "download_cloud" | "save" | "close_circle" | "bid_strap" | "fluct" | "data_strap" | "company" | "document" | "user" | "information" | "analytics" | "support" | "apps" | "ad_block" | "building" | "image" | "calendar" | "menu" | "file_list" | "draft" | "time" | "stop_circle" | "play_circle" | "sort_asc" | "sort_desc" | "bar_chart_search" | "check_thin" | "image_check";
 type IconType = "fill" | "line";
 type IconColor = IconType | "active" | string;
 type IconSize = "sm" | "md" | "lg";

package/dist/components/Icon/internal/ImageCheckIcon/index.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { IconProps } from "../../Icon";
+declare const ImageCheckIcon: React.FunctionComponent<IconProps>;
+export { ImageCheckIcon };

package/dist/components/index.d.ts

@@ -38,6 +38,8 @@ export { default as Divider } from "./Divider";
 export * from "./Divider";
 export { default as DropdownButton } from "./DropdownButton";
 export * from "./DropdownButton";
+export { default as DualListBox } from "./DualListBox";
+export * from "./DualListBox";
 export { default as ErrorText } from "./ErrorText";
 export * from "./ErrorText";
 export { default as Fade } from "./Fade";