matsuri-ui 9.7.2-alpha.0

package/dist/types/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,30 @@
+import { PartialColorProps } from "../theme";
+import React from "react";
+export declare type ProgressBarLabel = React.FC<Readonly<{
+    value: number;
+    max: number;
+    rate: number;
+    percent: number;
+    children?: never;
+}>>;
+export interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, PartialColorProps {
+    /**
+     * 進捗度合いを表します。0以上の自然数のみ有効です。
+     * また内部的にはこの値を最大値+1で割った剰余が用いられます。
+     *
+     * @default 0
+     */
+    value?: number;
+    /**
+     * 進捗度の最大値を表します。0以上の自然数のみ有効です。
+     *
+     * @default 0
+     */
+    max?: number;
+    /**
+     * ラベルを付与します。
+     */
+    label?: ProgressBarLabel;
+    children?: never;
+}
+export declare const ProgressBar: React.FC<ProgressBarProps>;

package/dist/types/ProgressBar/index.d.ts

@@ -0,0 +1 @@
+export * from "./ProgressBar";

package/dist/types/RadioButton/RadioButton.d.ts

@@ -0,0 +1,26 @@
+import { Theme } from "../theme";
+import React from "react";
+export interface RadioButtonProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * 子要素は文字列である必要があります。
+     */
+    children: string;
+    checkedValue?: string;
+    checked?: never;
+    /**
+     * テーマカラーを指定できます。
+     */
+    color?: keyof Theme["palette"]["intentions"];
+    onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+    /**
+     * 値を指定してください。
+     */
+    value: string;
+    className?: string;
+    style?: React.CSSProperties;
+    /**
+     * アンコントロールにする場合はRadioButtonにdefaultCheckedを渡し、RadioButtonGroupにvalueを渡さないようにしてください。
+     */
+    defaultChecked?: boolean;
+}
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;

package/dist/types/RadioButton/RadioButtonGroup.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface RadioButtonGroupProps {
+    name: string;
+    value?: string;
+    onChange?: (event: React.SyntheticEvent<HTMLInputElement>) => void;
+    children: React.ReactElement[];
+}
+export declare const RadioButtonGroup: React.FC<RadioButtonGroupProps>;

package/dist/types/RadioButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./RadioButton";
+export * from "./RadioButtonGroup";

package/dist/types/RelativeTime/RelativeTime.d.ts

@@ -0,0 +1,15 @@
+import { RelativeTimeFormatOptions } from "../@utils";
+import React from "react";
+export interface RelativeTimeProps extends RelativeTimeFormatOptions {
+    children?: never;
+    className?: string;
+    /**
+     * Numeric value to use in the internationalized relative time message.
+     */
+    value: number;
+    /**
+     * Unit to use in the relative time internationalized message
+     */
+    unit: "year" | "quarter" | "month" | "week" | "day" | "hour" | "minute" | "second";
+}
+export declare const RelativeTime: React.FC<RelativeTimeProps>;

package/dist/types/RelativeTime/index.d.ts

@@ -0,0 +1 @@
+export * from "./RelativeTime";

package/dist/types/SearchField/SearchField.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { SearchProps } from "./useSearch";
+import { TextFieldProps } from "../TextField";
+export declare type SearchFieldResult = {
+    keys: string[];
+    content: string;
+    score: number;
+}[];
+export declare type SearchFieldHandleChange = (result: SearchFieldResult) => void;
+export interface SearchFieldProps extends Pick<SearchProps, "items">, TextFieldProps {
+    /**
+     * 見出し
+     */
+    onChangeQuery?: SearchFieldHandleChange;
+    children?: never;
+}
+export declare const SearchField: ({ label, items, onChangeQuery, ...props }: SearchFieldProps) => JSX.Element;

package/dist/types/SearchField/index.d.ts

@@ -0,0 +1 @@
+export * from "./SearchField";

package/dist/types/SearchField/useSearch.d.ts

@@ -0,0 +1,14 @@
+export interface SearchProps {
+    items: string[] | {
+        keys: string[];
+        content: string;
+    }[];
+    query: string;
+}
+export declare const useSearch: ({ items, query }: SearchProps) => {
+    result: {
+        keys: string[];
+        content: string;
+        score: number;
+    }[];
+};

package/dist/types/SelectField/Select.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+export declare type SelectData = {
+    value: string | undefined;
+    label?: string;
+    Option?: React.ReactNode | ((props: {
+        value?: string;
+        label: string;
+        isExpanded: boolean;
+    }) => JSX.Element);
+    options?: SelectData;
+}[];
+export interface SelectProps {
+    name?: string;
+    defaultValue?: string;
+    /**
+     * valueの変更は、defaultValueが指定されていないときのみ反映されます。
+     */
+    value?: string;
+    disabled?: boolean;
+    renderValue?: ({ value, isExpanded }: {
+        value: string;
+        isExpanded: boolean;
+    }) => JSX.Element;
+    style?: React.CSSProperties;
+    className?: string;
+    /**
+     * placeholder
+     */
+    placeholder?: string;
+    /**
+     * selecting data is required
+     */
+    required?: boolean;
+    /**
+    {
+        value: string
+        label?: string
+        Option?: React.ReactNode | ((props: { value: string; label: string }) => JSX.Element)
+    }[]
+     */
+    data: SelectData | string[];
+    readOnly?: boolean;
+    /**
+     * SelectFieldのOptionがクリックされた際に発火する関数。
+     * イベントを取得できます。
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * 値が変更されたときに発火する関数。
+     * 引数から最新のvalueを取得できます。
+     */
+    onChangeValue?: (value?: string) => void;
+}
+export declare const Select: React.FC<SelectProps>;

package/dist/types/SelectField/SelectField.d.ts

@@ -0,0 +1,12 @@
+import { FieldProps } from "../TextField";
+import { InputBottomGutterProps } from "../FormHelperText";
+import { SelectProps } from "./Select";
+import React from "react";
+export interface SelectFieldProps extends SelectProps, InputBottomGutterProps, Pick<FieldProps<string>, "helperText" | "invalid"> {
+    children?: React.ReactNode;
+    /**
+     * 見出し
+     */
+    label?: string;
+}
+export declare const SelectField: ({ label, name, data, onChange, placeholder, required, value, defaultValue, disabled, children, readOnly, helperText, bottomGutter, onChangeValue, invalid, ...props }: SelectFieldProps) => JSX.Element;

package/dist/types/SelectField/SelectInnerSpinButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const SelectInnerSpinButton: ({ open }: {
+    open: boolean;
+}) => JSX.Element;

package/dist/types/SelectField/SelectList.d.ts

@@ -0,0 +1,3 @@
+import { PaperProps } from "../Paper";
+import React from "react";
+export declare const SelectList: React.ForwardRefExoticComponent<PaperProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/SelectField/SelectOption.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface SelectOptionProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    /**
+     * @default false
+     */
+    disabled?: boolean;
+}
+export declare const SelectOption: React.FC<SelectOptionProps>;

package/dist/types/SelectField/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Select";
+export * from "./SelectField";

package/dist/types/SelectSearchField/index.d.ts

@@ -0,0 +1,11 @@
+import { SelectFieldProps } from "../SelectField";
+import React from "react";
+export interface SelectSearchFieldItem {
+    keys: string[];
+    value: string;
+    label?: string;
+}
+export interface SelectSearchFieldProps extends Omit<SelectFieldProps, "data"> {
+    items: SelectSearchFieldItem[];
+}
+export declare const SelectSearchField: React.VFC<SelectSearchFieldProps>;

package/dist/types/SortArea/index.d.ts

@@ -0,0 +1,15 @@
+import { BoxProps } from "../Layouts";
+import React from "react";
+export interface SortAreaProps extends Omit<BoxProps, "onChange"> {
+    /**
+     * このコンポーネントの子要素はkey属性を必ず持っている必要があります。
+     * keyはuniqueでなければなりません。決して安直なmapのindexなどを渡さないようにしてください。
+     * また子コンポーネントは任意のpropsを受け取れるようになっている必要があります。
+     */
+    children: React.ReactElement[];
+    list?: any[];
+    onChange?: (keys: any[]) => void;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+}
+export declare const SortArea: ({ children, onChange, list: listProp, startAdornment, endAdornment, ...props }: SortAreaProps) => JSX.Element;

package/dist/types/Status/Status.d.ts

@@ -0,0 +1,5 @@
+import { ChipProps } from "../Chip";
+import React from "react";
+export interface StatusProps extends ChipProps {
+}
+export declare const Status: React.ForwardRefExoticComponent<StatusProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/types/Status/index.d.ts

@@ -0,0 +1 @@
+export * from "./Status";

package/dist/types/Steper/Step.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
+    active?: boolean;
+    current?: boolean;
+    label?: React.ReactNode;
+}
+export declare const Step: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/Steper/Steper.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface SteperProps extends React.HTMLAttributes<HTMLDivElement> {
+    current?: number;
+    children?: never;
+    steps: number | React.ReactNode[];
+}
+export declare const Steper: React.FC<SteperProps>;

package/dist/types/Steper/index.d.ts

@@ -0,0 +1 @@
+export * from "./Steper";

package/dist/types/Table/Table.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+export interface TableRootProps extends React.HTMLAttributes<HTMLTableElement> {
+}
+export interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * @default false
+     */
+    striped?: boolean;
+}
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    selected?: boolean;
+}
+export interface TableAlignProps {
+    /**
+     * @deprecated
+     * Use useTable.args.columns[].align instead
+     */
+    align?: "left" | "center" | "right";
+}
+export interface TableHeaderCellProps extends TableAlignProps, React.HTMLAttributes<HTMLTableHeaderCellElement> {
+}
+export interface TableDataCellProps extends TableAlignProps, React.HTMLAttributes<HTMLTableDataCellElement> {
+}
+export declare const Table: React.FC<TableRootProps> & {
+    Header: React.FC<TableHeadProps>;
+    Body: React.FC<TableBodyProps>;
+    Row: React.FC<TableRowProps>;
+    HeaderCell: React.FC<TableHeaderCellProps>;
+    Cell: React.FC<TableDataCellProps>;
+    Checkbox: React.FC<import("./TableCheckbox").TableCheckboxProps>;
+};

package/dist/types/Table/TableCheckbox.d.ts

@@ -0,0 +1,9 @@
+import { Color } from "../theme";
+import React from "react";
+interface PartialColorProps {
+    color: Exclude<Color, "default">;
+}
+export interface TableCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "color">, Partial<PartialColorProps> {
+}
+export declare const TableCheckbox: React.FC<TableCheckboxProps>;
+export {};

package/dist/types/Table/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Table";
+export * from "./TableCheckbox";
+export * from "./useTable";

package/dist/types/Table/useTable.d.ts

@@ -0,0 +1,87 @@
+import { CSSObject } from "@emotion/react";
+import React from "react";
+declare type Values<S> = Pick<S, Exclude<keyof S, "subRows">>;
+interface Props<S> {
+    key: string;
+    path: number[];
+    values: Values<S>;
+    isSelected: boolean;
+    canExpand: boolean;
+    isExpanded: boolean;
+    subRows: S[] | undefined;
+}
+interface Cell {
+    key: string;
+    props: UseTableCellProps<any, any>;
+    style: React.CSSProperties & CSSObject;
+    render: () => React.ReactElement<any, any> | null;
+    Content: (props: React.HTMLProps<HTMLDivElement> & UseTableCellProps<any, any>) => React.ReactElement<any, any> | null;
+}
+interface Row<S> extends Props<S> {
+    cells: Cell[];
+}
+declare type Rows<S> = Row<S>[];
+export interface UseTableCellProps<S, K extends keyof S> {
+    cell: {
+        value: S[K];
+    };
+    row: Props<S>;
+}
+export declare type TableCell<S, K extends keyof S> = (props: UseTableCellProps<S, K>) => JSX.Element;
+declare type ColumnLayoutProperties = {
+    width?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    align?: React.CSSProperties["textAlign"];
+    cellAlign?: React.CSSProperties["textAlign"];
+};
+declare type Column<S, K extends keyof S> = {
+    Header: string | React.FC<{
+        toggleAllRowsSelected: () => void;
+        filterValues: Values<S>;
+        setFilters: (values: Values<S>) => void;
+        column: {
+            filterValue: S[K];
+            setFilter: (value: S[K]) => void;
+        };
+    }>;
+    Cell?: React.VFC<UseTableCellProps<S, K>>;
+    filter?: (value: S[K], args: {
+        column: {
+            filterValue: S[K];
+        };
+    }) => boolean;
+} & ColumnLayoutProperties;
+export declare type TableColumns<S> = {
+    [K in keyof S]?: Column<S, K>;
+};
+export declare const useTable: <S extends {
+    [accessor: string]: any;
+    subRows?: S[] | undefined;
+}>({ data, ...props }: {
+    columns: { [K in keyof S]?: Column<S, K> | undefined; };
+    data: S[];
+    initialState?: {
+        pageIndex?: number | undefined;
+        pageSize?: number | undefined;
+    } | undefined;
+}) => {
+    canPreviousPage: boolean;
+    canNextPage: boolean;
+    gotoPage: React.Dispatch<React.SetStateAction<number>>;
+    nextPage: () => void;
+    setPageSize: React.Dispatch<React.SetStateAction<number>>;
+    previousPage: () => void;
+    pageIndex: number;
+    headers: {
+        key: string;
+        style: React.CSSProperties & CSSObject;
+        render: () => JSX.Element;
+    }[];
+    rows: Rows<S>;
+    page: Row<S>[];
+    toggleRowSelected: (toggleRows: number[], flag?: boolean | undefined) => void;
+    toggleAllRowsSelected: () => void;
+    toggleRowExpanded: (toggleRows: string[], flag?: boolean | undefined) => void;
+};
+export {};

package/dist/types/Tabs/Tab.d.ts

@@ -0,0 +1,10 @@
+import { AsComponentProps, FakeAsComponent } from "../AsComponentProps";
+import React from "react";
+interface BaseTabProps {
+    index?: number;
+    fullWidth?: boolean;
+    children?: React.ReactNode;
+}
+export declare type TabProps<E extends React.ElementType> = AsComponentProps<E, BaseTabProps>;
+export declare const Tab: FakeAsComponent<"button", BaseTabProps>;
+export {};

package/dist/types/Tabs/TabGroup.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface TabGroupProps extends React.HTMLProps<HTMLDivElement> {
+    position?: "start" | "center" | "end";
+    underline?: "none" | "hover" | "always";
+}
+export declare const TabGroup: React.FC<TabGroupProps>;

package/dist/types/Tabs/TabPanel.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const TabPanel: React.FC<{
+    index?: number;
+} & React.HTMLAttributes<HTMLDivElement>>;

package/dist/types/Tabs/TabPanelGroup.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const TabPanelGroup: React.FC;

package/dist/types/Tabs/TabProvider.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface TabContextProps {
+    currentIndex: number;
+    setCurrentIndex: (index: number) => void;
+    currentTab?: HTMLButtonElement;
+    setCurrentTab: (tab: HTMLButtonElement) => void;
+}
+export declare const TabContext: React.Context<TabContextProps>;
+export declare const TabProvider: React.FC<{
+    defaultIndex?: number;
+    onChange?: (v: any) => void;
+}>;

package/dist/types/Tabs/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./Tab";
+export * from "./TabGroup";
+export * from "./TabPanel";
+export * from "./TabPanelGroup";
+export * from "./useTab";
+export * from "./TabProvider";

package/dist/types/Tabs/useTab.d.ts

@@ -0,0 +1 @@
+export declare const useTab: () => import("./TabProvider").TabContextProps;

package/dist/types/TextField/index.d.ts

@@ -0,0 +1,41 @@
+import { InputBottomGutterProps } from "../FormHelperText";
+import { InputBaseProps } from "../InputBase";
+import React from "react";
+export interface FieldProps<T> {
+    value?: T;
+    defaultValue?: T;
+    /**
+     * ラベルの文字列を指定します。ラベルは左上に表示されます。
+     */
+    label?: string;
+    /**
+     * input要素本来のバリデーションに任意のバリデーションを追加することができます。
+     */
+    customValidations?: Array<(value?: T) => string | undefined | false>;
+    /**
+     * input要素本来のバリーデーションメッセージを変更することができます。
+     */
+    validationMessages?: {
+        [key in keyof ValidityState]?: string;
+    };
+    /**
+     * inputの値が更新された場合に発火します。
+     *
+     * onChangeが呼ばれるタイミングと内部実装の値が変更されるタイミングは異なります。
+     * そのため、onChange発火直後にformなどのrefから値を取得しようとするとズレが発生する場合があります。
+     */
+    onChange?: (value: T, event?: React.SyntheticEvent<HTMLElement>) => void;
+    /**
+     * 任意のヘルパーテキストを挿入できます。ただしinput要素本来のバリデーションの方が優先されます。
+     */
+    helperText?: React.ReactNode | ((props: {
+        value?: T;
+    }) => React.ReactNode);
+    /**
+     * 任意のヘルパーテキストをinvalidなものとして扱いたい場合に使用できます。
+     */
+    invalid?: boolean;
+}
+export interface TextFieldProps extends FieldProps<string>, Omit<InputBaseProps, "value" | "onChange" | "defaultValue">, InputBottomGutterProps {
+}
+export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/TextField/useDitectInputTouched.d.ts

@@ -0,0 +1,4 @@
+export declare const useDitectInputTouched: () => readonly [boolean, {
+    readonly "data-touched": boolean;
+    readonly onFocus: (() => void) | undefined;
+}];

package/dist/types/TextField/useValidation.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export interface Validation {
+    valid: boolean;
+    type: keyof ValidityState;
+    message: string;
+}
+export interface UseValidation<T> {
+    value?: T;
+    fuck: Array<(value: T) => string | false | undefined>;
+}
+export declare function useValidation<T>({ ref, validationMessages, customValidations, value }: {
+    ref: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
+    validationMessages?: {
+        [key in keyof ValidityState]?: string;
+    };
+    value: T;
+    customValidations?: Array<(value: T) => string | false | undefined>;
+}): Validation;

package/dist/types/TextareaBase/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export interface TextareaBaseProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+export declare const TextareaBase: React.ForwardRefExoticComponent<TextareaBaseProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/types/Thumbnail/index.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+export interface ThumbnailProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> {
+    /**
+     * 画像のソースを指定します。File型も許容しています。
+     */
+    src?: string | File;
+    /**
+     * 画像の品質を0から1の値で設定します。
+     * @default 1
+     */
+    quality?: number;
+    /**
+     * 幅を100%にします。
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+    children?: never;
+    /**
+     * 画像圧縮をするかどうかを指定します。
+     * ユーザーの環境が良いまたは与えられる画像サイズが元々最適な場合は、
+     * nocompressを指定した方がHTMLパース直後からバックグラウンドプロセスで処理が走るため高速です。
+     * 要素のサイズと画像サイズがほぼ同じ場合は自動で非圧縮にする仕様を考えています。
+     *
+     * @default false
+     */
+    nocompress?: boolean;
+    /**
+     * 圧縮する際の幅の最低値を指定します。width属性やcssによる指定よりも優先されます。
+     */
+    compressWidth?: number;
+    /**
+     * 圧縮する際の高さの最低値を指定します。height属性やcssによる指定よりも優先されます。
+     */
+    compressHeight?: number;
+    /**
+     * デフォルトの表示はobject-fit: coverです。containedを指定することでobject-fit: containにすることができます。
+     * @default false
+     */
+    contained?: boolean;
+}
+export declare const useCompressImage: () => readonly [string | undefined, ({ src, name, width, height, quality }: {
+    src: string | File;
+    name?: string | undefined;
+    width: number;
+    height: number;
+    quality?: number | undefined;
+}) => void];
+export declare const Thumbnail: React.ForwardRefExoticComponent<Readonly<ThumbnailProps> & React.RefAttributes<HTMLImageElement>>;

package/dist/types/Thumbnail/useIntersectionObserver.d.ts

@@ -0,0 +1,4 @@
+export declare const useIntersectionObserver: (element: HTMLElement | null, options?: IntersectionObserverInit | undefined) => {
+    entry: IntersectionObserverEntry | undefined;
+    unobserve: () => void;
+};