@zenkigen-inc/component-ui 1.17.0 → 1.18.0

package/README.md

@@ -1,5 +1,14 @@
 # @zenkigen-inc/component-ui
 
+## 目次
+
+- [インストール](#インストール)
+- [利用方法](#利用方法)
+- [開発者向け](#開発者向け)
+  - [コンポーネントの雛形を生成する](#コンポーネントの雛形を生成する)
+  - [実装したコンポーネントを export する](#実装したコンポーネントを-export-する)
+- [ライセンス](#ライセンス)
+
 ## インストール
 
 ```bash

package/dist/index.d.mts

@@ -3,22 +3,23 @@ import react__default, { PropsWithChildren, ElementType, ComponentPropsWithoutRe
 import { IconName } from '@zenkigen-inc/component-icons';
 import { iconColors, tagLightColors } from '@zenkigen-inc/component-theme';
 import { tokens } from '@zenkigen-inc/component-config';
+import { useFloating } from '@floating-ui/react';
 
-type Props$x = {
+type Props$z = {
     size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
     userId?: number;
     firstName?: string;
     lastName?: string;
     isDisabled?: boolean;
 };
-declare function Avatar({ size, ...props }: Props$x): react.JSX.Element;
+declare function Avatar({ size, ...props }: Props$z): react.JSX.Element;
 
 declare function Breadcrumb({ children }: PropsWithChildren): react.JSX.Element;
 declare namespace Breadcrumb {
     var Item: ({ children }: PropsWithChildren) => react.JSX.Element;
 }
 
-type Size$2 = 'small' | 'medium' | 'large';
+type Size$3 = 'small' | 'medium' | 'large';
 type Variant$1 = 'fill' | 'fillDanger' | 'outline' | 'text';
 type JustifyContent = 'start' | 'center';
 type ElementAs = ElementType;
@@ -26,20 +27,22 @@ type AsProp<T extends ElementAs> = {
     elementAs?: T;
 };
 type PolymorphicPropsWithoutRef<T extends ElementAs, P extends object> = PropsWithChildren<P> & ComponentPropsWithoutRef<T> & AsProp<T>;
-type Props$w<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
-    size?: Size$2;
+type BaseProps$1<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
+    size?: Size$3;
     width?: CSSProperties['width'];
     isSelected?: boolean;
     isDisabled?: boolean;
-    variant?: Variant$1;
     before?: ReactNode;
     after?: ReactNode;
     borderRadius?: CSSProperties['borderRadius'];
     justifyContent?: JustifyContent;
 }>;
-declare const Button: <T extends ElementAs = "button">({ size, variant, isDisabled, isSelected, width, borderRadius, justifyContent, before, after, elementAs, children, ...props }: Props$w<T>) => react.JSX.Element;
+type PublicProps<T extends ElementAs> = BaseProps$1<T> & {
+    variant?: Variant$1;
+};
+declare const Button: <T extends ElementAs = "button">(props: PublicProps<T>) => react.JSX.Element;
 
-type Props$v = {
+type Props$y = {
     name?: string;
     value?: string;
     id?: string;
@@ -50,13 +53,13 @@ type Props$v = {
     label?: string;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$v): react.JSX.Element;
+declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$y): react.JSX.Element;
 
-type Props$u = {
+type Props$x = {
     color?: 'gray' | 'red';
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
-declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$u>): react.JSX.Element;
+declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$x>): react.JSX.Element;
 
 type DropdownItemType = {
     id: string;
@@ -67,15 +70,15 @@ type DropdownItemType = {
 type DropdownVerticalPosition = 'top' | 'bottom';
 type DropdownHorizontalAlign = 'left' | 'center' | 'right';
 
-type Props$t = {
+type Props$w = {
     maxHeight?: CSSProperties['height'];
     isNoPadding?: boolean;
     verticalPosition?: DropdownVerticalPosition;
     horizontalAlign?: DropdownHorizontalAlign;
 };
-declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$t>): false | react.JSX.Element;
+declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$w>): false | react.JSX.Element;
 
-type Props$s = {
+type Props$v = {
     size?: 'x-small' | 'small' | 'medium' | 'large';
     variant?: 'text' | 'outline';
     title?: string;
@@ -91,28 +94,73 @@ type Props$s = {
     label: string;
     icon?: IconName;
 });
-declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props$s>): react.JSX.Element;
+declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props$v>): react.JSX.Element;
 declare namespace Dropdown {
     var Menu: typeof DropdownMenu;
     var Item: typeof DropdownItem;
 }
 
-type Props$r = {
+type Props$u = {
     value: number;
     isEditable?: boolean;
     onChangeRating?: (newRating: number) => void | null;
     size?: 'medium' | 'large';
 };
-declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$r): react.JSX.Element;
+declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$u): react.JSX.Element;
+
+type Size$2 = 'small' | 'medium' | 'large';
+declare const ERROR_TYPES: {
+    readonly SIZE_TOO_LARGE: "SIZE_TOO_LARGE";
+    readonly UNSUPPORTED_FORMAT: "UNSUPPORTED_FORMAT";
+};
+type FileInputErrorType = (typeof ERROR_TYPES)[keyof typeof ERROR_TYPES];
+type FileInputError = {
+    type: FileInputErrorType;
+    message: string;
+};
+type BaseFileInputProps = {
+    /** input要素のID（外部のlabel要素との連携用） */
+    id?: string;
+    /** 許可するファイル形式（MIMEタイプ） */
+    accept?: string;
+    /** 最大ファイルサイズ（バイト単位） */
+    maxSize?: number;
+    /** 無効化状態 */
+    isDisabled?: boolean;
+    /** エラー状態 */
+    isError?: boolean;
+    /** ファイル選択時のコールバック */
+    onSelect?: (file: File | null) => void;
+    /** エラー時のコールバック */
+    onError?: (errors: FileInputError[]) => void;
+    /** エラーメッセージリスト */
+    errorMessages?: string[];
+};
+type ButtonFileInputProps = BaseFileInputProps & {
+    /** コンポーネントのバリエーション */
+    variant: 'button';
+    /** サイズ */
+    size?: Size$2;
+};
+type DropzoneFileInputProps = BaseFileInputProps & {
+    /** コンポーネントのバリエーション */
+    variant: 'dropzone';
+};
+type FileInputProps = ButtonFileInputProps | DropzoneFileInputProps;
+type FileInputRef = {
+    /** ファイル選択状態をリセット */
+    reset: () => void;
+};
+declare const FileInput: react.ForwardRefExoticComponent<FileInputProps & react.RefAttributes<FileInputRef>>;
 
 type Level = 1 | 2 | 3 | 4 | 5;
-type Props$q = {
+type Props$t = {
     level: Level;
     before?: ReactNode;
     after?: ReactNode;
     children?: ReactNode;
 };
-declare function Heading(props: Props$q): react.JSX.Element;
+declare function Heading(props: Props$t): react.JSX.Element;
 
 declare const useOutsideClick: <T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: (event: Event) => void, enabled?: boolean) => void;
 
@@ -183,7 +231,7 @@ type ColorToken = UserColorToken | TextColorToken | LinkColorToken | BackgroundC
 
 type Size$1 = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
 type Color = keyof typeof iconColors;
-type Props$p = {
+type Props$s = {
     name: IconName;
     size?: Size$1;
     color?: Color;
@@ -191,11 +239,11 @@ type Props$p = {
     isDisabled?: boolean;
     className?: string;
 };
-declare const Icon: ({ size, isDisabled, ...props }: Props$p) => react.JSX.Element;
+declare const Icon: ({ size, isDisabled, ...props }: Props$s) => react.JSX.Element;
 
 type Size = 'small' | 'medium' | 'large';
 type Variant = 'outline' | 'text';
-type Props$o = {
+type Props$r = {
     /** 表示するアイコン名 */
     icon: IconName;
     /** ボタンのサイズ */
@@ -214,30 +262,29 @@ type Props$o = {
     target?: HTMLAnchorElement['target'];
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'className'>) | ({
     isAnchor?: false;
-    onClick?: () => void;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled' | 'className'>));
-declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$o): react.JSX.Element;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'className'>));
+declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$r): react.JSX.Element;
 
-type Props$n = {
+type Props$q = {
     size?: 'small' | 'medium' | 'large';
     position?: 'fixed' | 'absolute' | 'static';
     height?: string;
 };
-declare function Loading({ size, position, height }: Props$n): react.JSX.Element;
+declare function Loading({ size, position, height }: Props$q): react.JSX.Element;
 
 declare function ModalBody({ children }: PropsWithChildren): react.JSX.Element;
 
-type Props$m = {
+type Props$p = {
     isNoBorder?: boolean;
 };
-declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$m>): react__default.JSX.Element;
+declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$p>): react__default.JSX.Element;
 
-type Props$l = {
+type Props$o = {
     isNoBorder?: boolean;
 };
-declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$l>): react.JSX.Element;
+declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$o>): react.JSX.Element;
 
-type Props$k = {
+type Props$n = {
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
     maxWidth?: CSSProperties['maxWidth'];
@@ -245,14 +292,14 @@ type Props$k = {
     onClose?: () => void;
     portalTargetRef?: MutableRefObject<HTMLElement | null>;
 };
-declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$k>): react.JSX.Element | null;
+declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$n>): react.JSX.Element | null;
 declare namespace Modal {
     var Body: typeof ModalBody;
     var Header: typeof ModalHeader;
     var Footer: typeof ModalFooter;
 }
 
-type Props$j = {
+type Props$m = {
     state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
     size?: 'small' | 'medium';
     children?: ReactNode;
@@ -262,9 +309,9 @@ type Props$j = {
     showClose: true;
     onClickClose: () => void;
 });
-declare function NotificationInline({ state, size, ...props }: Props$j): react.JSX.Element;
+declare function NotificationInline({ state, size, ...props }: Props$m): react.JSX.Element;
 
-type Props$i = {
+type Props$l = {
     /** 現在のページ番号 */
     currentPage: number;
     /** トータルのページ数 */
@@ -274,9 +321,9 @@ type Props$i = {
     /** ボタンが押されたときのイベントハンドラ */
     onClick: (value: number) => void;
 };
-declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$i): react.JSX.Element;
+declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$l): react.JSX.Element;
 
-type Props$h = {
+type Props$k = {
     /** トータル件数 */
     totalSize: number;
     /** ページあたり件数 */
@@ -296,7 +343,7 @@ type Props$h = {
     /** Selectが切り替わった時のイベントハンドラ */
     onChange: (value: number) => void;
 };
-declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$h): react.JSX.Element;
+declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$k): react.JSX.Element;
 
 declare const TextInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
     size?: "medium" | "large";
@@ -308,8 +355,85 @@ declare const TextInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttribute
     after?: ReactNode;
 } & react.RefAttributes<HTMLInputElement>>;
 
-type Props$g = Omit<ComponentPropsWithoutRef<typeof TextInput>, 'type' | 'onClickClearButton'>;
-declare const PasswordInput: react.ForwardRefExoticComponent<Props$g & react.RefAttributes<HTMLInputElement>>;
+type Props$j = Omit<ComponentPropsWithoutRef<typeof TextInput>, 'type' | 'onClickClearButton'>;
+declare const PasswordInput: react.ForwardRefExoticComponent<Props$j & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Popoverが閉じられる理由を定義する型
+ */
+type CloseReason = 'outside-click' | 'escape-key-down';
+/**
+ * Popoverのクローズイベントの型定義
+ */
+type PopoverCloseEvent = {
+    /** 閉じられた理由 */
+    reason: CloseReason;
+};
+/**
+ * Popoverの配置位置を定義する型
+ */
+type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+/**
+ * Popover Context の値の型定義
+ */
+type PopoverContextValue = {
+    isOpen: boolean;
+    triggerRef: react.RefObject<HTMLElement | null>;
+    anchorRef?: react.RefObject<HTMLElement | null>;
+    floating: ReturnType<typeof useFloating>;
+    contentId: string;
+    panelId: string;
+    onClose?: (event: PopoverCloseEvent) => void;
+};
+
+type Props$i = {
+    isOpen: boolean;
+    placement?: PopoverPlacement;
+    offset?: number;
+    onClose?: (event: PopoverCloseEvent) => void;
+    anchorRef?: React.RefObject<HTMLElement | null>;
+};
+declare function Popover({ isOpen, children, placement, offset: offsetValue, onClose, anchorRef, }: PropsWithChildren<Props$i>): react.JSX.Element;
+declare namespace Popover {
+    var Trigger: react.ForwardRefExoticComponent<{
+        children: React.ReactElement;
+    } & react.RefAttributes<HTMLElement>>;
+    var Content: react.ForwardRefExoticComponent<{
+        children?: React.ReactNode;
+    } & react.RefAttributes<HTMLDivElement>>;
+}
+
+type PopoverContentProps = {
+    children?: react.ReactNode;
+};
+declare const PopoverContent: react.ForwardRefExoticComponent<PopoverContentProps & react.RefAttributes<HTMLDivElement>>;
+
+type PopoverTriggerProps = {
+    children: react.ReactElement;
+};
+declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverTriggerProps & react.RefAttributes<HTMLElement>>;
+
+declare function PopupBody({ children }: PropsWithChildren): react.JSX.Element;
+
+declare function PopupFooter({ children }: PropsWithChildren): react__default.JSX.Element;
+
+type Props$h = PropsWithChildren<{
+    before?: ReactNode;
+}>;
+declare function PopupHeader({ children, before }: Props$h): react.JSX.Element;
+
+type Props$g = {
+    isOpen?: boolean;
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+    onClose?: () => void;
+};
+declare function Popup({ children, isOpen: controlledIsOpen, width, height, onClose }: PropsWithChildren<Props$g>): react.JSX.Element | null;
+declare namespace Popup {
+    var Body: typeof PopupBody;
+    var Header: typeof PopupHeader;
+    var Footer: typeof PopupFooter;
+}
 
 type Props$f = {
     name?: string;
@@ -560,4 +684,4 @@ type Props = {
 };
 declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: PropsWithChildren<Props>): react.JSX.Element;
 
-export { Avatar, Breadcrumb, Button, Checkbox, type ColorVariant, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Radio, Search, SegmentedControl, Select, type SelectOption, SelectSort, SortButton, type SortOrder, Tab, TabItem, Table, TableCell, TableRow, Tag, type TagColor, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, useOutsideClick, useRovingFocus, useToast };
+export { Avatar, Breadcrumb, Button, Checkbox, type ColorVariant, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, FileInput, type FileInputRef, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Popover, PopoverContent, type PopoverContextValue, type PopoverPlacement, PopoverTrigger, Popup, Radio, Search, SegmentedControl, Select, type SelectOption, SelectSort, SortButton, type SortOrder, Tab, TabItem, Table, TableCell, TableRow, Tag, type TagColor, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, useOutsideClick, useRovingFocus, useToast };