matsuri-ui 9.7.2-alpha.0

package/dist/types/Time/Time.d.ts

@@ -0,0 +1,72 @@
+import React from "react";
+import { Dayjs } from "dayjs";
+export interface TimeProps {
+    /**
+     * The locale matching algorithm to use.
+     * Possible values are "lookup" and "best fit"; the default is "best fit".
+     * @default "best fit"
+     */
+    localeMatcher?: "lookup" | "best fit";
+    /**
+     * The representation of the weekday.
+     */
+    weekday?: "long" | "short" | "narrow";
+    /**
+     * The representation of the era
+     */
+    era?: "long" | "short" | "narrow";
+    /**
+     * The representation of the year.
+     */
+    year?: "numeric" | "2-digit";
+    /**
+     * The representation of the month.
+     */
+    month?: "numeric" | "2-digit" | "narrow" | "short" | "long";
+    /**
+     * The representation of the day.
+     */
+    day?: "numeric" | "2-digit";
+    /**
+     * The representation of the hour.
+     */
+    hour?: "numeric" | "2-digit";
+    /**
+     * The representation of the minute.
+     */
+    minute?: "numeric" | "2-digit";
+    /**
+     * The representation of the second.
+     */
+    second?: "numeric" | "2-digit";
+    /**
+     * The representation of the time zone name.
+     */
+    timeZoneName?: "long" | "short";
+    /**
+     * The format matching algorithm to use. Possible values are "basic" and "best fit"; the default is "best fit". See the following paragraphs for information about the use of this property.
+     * @default "best fit"
+     */
+    formatMatcher?: "basic" | "best fit";
+    /**
+     * Whether to use 12-hour time (as opposed to 24-hour time). Possible values are true and false; the default is locale dependent. This option overrides the hc language tag and/or the hourCycle option in case both are present.
+     */
+    hour12?: boolean;
+    /**
+     * The time zone to use.
+     * The only value implementations must recognize is "UTC";
+     * the default is the runtime's default time zone.
+     * Implementations may also recognize the time zone names of the IANA time zone database,
+     * such as "Asia/Shanghai", "Asia/Kolkata", "America/New_York".
+     * @see https://www.iana.org/time-zones
+     */
+    timeZone?: string;
+    /**
+     *
+     */
+    date?: string | number | Date | Dayjs;
+    children?: never;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const Time: React.FC<TimeProps>;

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

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

package/dist/types/Timeline/Timeline.d.ts

@@ -0,0 +1,79 @@
+import { BaseTypographyProps } from "../Typography";
+import React from "react";
+export interface TimelineProps<Props extends {
+    [key: string]: any;
+}> extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * TimelineProps.datesで指定されたデータをpropsとして受け取り表示するためのコンポーネントを指定します。
+     */
+    item: (props: Props & {
+        date: string;
+        index: number;
+    }) => JSX.Element;
+    /**
+     * 日付と、日付に対応するデータ群を指定します。
+     *
+     * 昇順でkeyがソートされていることを前提としている点に注意してください。
+     *
+     * ソート処理が面倒な場合はUI側での処理を検討します。
+     *
+     * ここで値として指定された配列の型はTimelineProps.itemの引数に用いられます。
+     *
+     * dateのフォーマットはYYYYMMDDまたはYYYY-MM-DDです。number(ms)には後に対応するかもしれません。
+     *
+     * Date型を利用したいという強い要望があった場合はMapに切り替えることを検討します。
+     *
+     */
+    dates: {
+        [date: string]: Props[];
+    };
+    /**
+     * 区分ごとのラベルの表記を指定します。
+     *
+     * @default {year: numeric ,month: numeric, day: numeric}
+     */
+    format?: "relative" | Intl.DateTimeFormatOptions;
+    /**
+     * 区分を指定する。原点を中心として両側に、順に指定された区分点を配置していく。
+     *
+     * 原点のデフォルトは"今日"。
+     *
+     * 過去から未来へ昇順でソートされていることを前提にしています。
+     * ソート処理が難しい場合はUI側での処理を検討します。
+     *
+     * @default []
+     */
+    separators?: {
+        unit: "day" | "month" | "year" | "week";
+        value: number;
+    }[];
+    /**
+     * 未対応。このコンポーネントのルート要素を指定する。
+     * @default div
+     */
+    container?: React.ElementType;
+    /**
+     * 未対応。区分ごとに表示されるラベル要素を指定する。
+     * @default div
+     */
+    label?: (props: {
+        date: string;
+    }) => JSX.Element;
+    /**
+     * 区分ごとに表示されるラベル要素に渡すPropsを指定する。
+     */
+    labelProps?: BaseTypographyProps;
+    /**
+     * 未対応。原点を指定する。
+     *
+     * フォーマットはYYYYMMDDまたは`today`
+     *
+     * number (ms) | Date には対応予定。
+     *
+     * @default today
+     */
+    origin?: string;
+}
+export declare const Timeline: <E extends {
+    [key: string]: any;
+} = {}>({ item, dates, format, separators, labelProps, ...props }: TimelineProps<E>) => JSX.Element | null;

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

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

package/dist/types/Tooltip/Tooltip.d.ts

@@ -0,0 +1,19 @@
+import { PopperBaseProps } from "../Popper";
+import React from "react";
+export interface TooltipProps extends Pick<PopperBaseProps, "placement"> {
+    title: string;
+    children: React.ReactElement | string;
+    /**
+     * 矢印を表示します。
+     *
+     * @default false
+     */
+    arrow?: boolean;
+    /**
+     * デフォルトの子要素にホバーした際に表示する機能を無視して、表示するかどうかを指定します。
+     *
+     * @default undefined
+     */
+    open?: boolean;
+}
+export declare const Tooltip: ({ children, title, placement, arrow, open: openProp }: TooltipProps) => JSX.Element;

package/dist/types/Tooltip/Tooltip.test.d.ts

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

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

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

package/dist/types/Tooltip/useHover.d.ts

@@ -0,0 +1 @@
+export declare const useHover: (node: HTMLElement | null) => boolean;

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

@@ -0,0 +1,46 @@
+import { AsComponentProps, FakeAsComponent } from "../AsComponentProps";
+import React from "react";
+export interface TypographyVariantProps {
+    /**
+     * どのようなタイポグラフィを適用するかを指定します。
+     *
+     * @default body
+     */
+    variant?: "h1" | "h2" | "h3" | "h4" | "body" | "button" | "caption";
+}
+export interface TypographyColorProps {
+    /**
+     * 文字の色を決定します。
+     *
+     * @default inherit
+     */
+    color?: "initial" | "inherit" | "primary" | "secondary" | "error" | "accent" | "textPrimary" | "textSecondary" | "textDisabled" | "textHint";
+}
+export interface TypographyAlignProps {
+    /**
+     * 文字の位置を指定します。
+     *
+     * @default "inherit"
+     */
+    align?: "inherit" | "left" | "center" | "right" | "justify";
+}
+export interface TypographyBolderProps {
+    /**
+     * フォント太くします。
+     *
+     * @default false
+     */
+    bolder?: boolean;
+}
+export interface TypographyLineClampProps {
+    /**
+     * 1以上の整数を指定することで、表示される行数を制限します。制限された場合、文末に三点リーダーが付与されます。
+     *
+     * @default 0
+     */
+    clamp?: number;
+}
+export interface BaseTypographyProps extends TypographyColorProps, TypographyVariantProps, TypographyAlignProps, TypographyBolderProps, TypographyLineClampProps, Omit<React.HTMLAttributes<HTMLElement>, "color"> {
+}
+export declare type TypographyProps<E extends React.ElementType> = AsComponentProps<E, BaseTypographyProps>;
+export declare const Typography: FakeAsComponent<"p", BaseTypographyProps>;

package/dist/types/ViewCarousel/ViewCarousel.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface ViewCarouselProps {
+    /**
+     * 何番目のスクリーンを表示するか指定します。
+     * @default 0
+     */
+    currentIndex?: number;
+}
+export declare const ViewCarousel: React.FC<ViewCarouselProps>;

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

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

package/dist/types/WeeklyCalendarUI/WeeklyCalendar.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import dayjs from "dayjs";
+export interface WeeklyCalendarProps<T> {
+    /**
+     * 各日付毎に入れるデータを指定する。
+     * 日付を表すYYYYMMDDフォーマットのキーに対して、オブジェクトの配列を渡す。このオブジェクトはrenderCellに引数として渡る。
+     */
+    dates?: {
+        [date: string]: T[];
+    };
+    /**
+     * datesで使用されたオブジェクトを引数として受け取り、どのように表示するかJSXで記述する。
+     */
+    renderCell?: (props: T) => JSX.Element;
+    date?: dayjs.Dayjs;
+    renderDate?: (props: {
+        date: Date;
+        isToday: boolean;
+    }) => JSX.Element;
+    columnHeight?: number | string | "auto";
+}
+export declare const WeeklyCalendar: <T extends unknown>({ date, dates, renderCell, renderDate: RenderDate, columnHeight }: WeeklyCalendarProps<T>) => JSX.Element;

package/dist/types/WeeklyCalendarUI/WeeklyCalendarUI.d.ts

@@ -0,0 +1,21 @@
+import { WeeklyCalendarProps } from "./WeeklyCalendar";
+import React from "react";
+import dayjs from "dayjs";
+export declare const useWeeklyCalendar: ({ date, startWeekday }: {
+    date?: dayjs.ConfigType;
+    startWeekday?: number | undefined;
+}) => {
+    date: dayjs.Dayjs;
+    increment: () => void;
+    decrement: () => void;
+    reset: () => void;
+    set: (config: dayjs.ConfigType) => void;
+};
+export interface WeeklyCalendarUIProps<T> extends Omit<WeeklyCalendarProps<T>, "date"> {
+    style?: React.CSSProperties;
+    className?: string;
+    startWeekday?: number;
+    date?: dayjs.ConfigType;
+    onChange?: (date: Date) => void;
+}
+export declare const WeeklyCalendarUI: <T extends unknown>({ style, className, date: initialDate, startWeekday, onChange, ...props }: WeeklyCalendarUIProps<T>) => JSX.Element;

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

@@ -0,0 +1,2 @@
+export * from "./WeeklyCalendar";
+export * from "./WeeklyCalendarUI";

package/dist/types/ZipCodeField/ZipCodeField.d.ts

@@ -0,0 +1,59 @@
+import { FetchAddressResponse } from "../@utils/fetchAddress";
+import { FieldProps } from "../TextField";
+import { InputBottomGutterProps } from "../FormHelperText";
+import React from "react";
+/**
+ * Converts `string` to half-width form
+ *
+ * @category String
+ * @param {string} [string=''] The string to convert.
+ * @returns {string} Returns the half-width formed string.
+ * @example
+ *
+ * halfWidthForm('Ａａａ０２３あいう0923Absee')
+ * // => 'Aaa023あいう0923Absee'
+ *
+ */
+export declare const halfWidthForm: (str: string) => string;
+export interface ZipCodeValue extends FetchAddressResponse {
+    status?: "" | "waiting" | "done";
+}
+export declare type ZipCodeFieldProps = FieldProps<ZipCodeValue> & {
+    /**
+     * ZipCodeFieldのみ、notResponseが存在します。これは`prefectureName`を取得できなかった場合に発火します。
+     */
+    validationMessages?: {
+        [key in keyof ValidityState | "notResponse" | "waiting"]?: string;
+    };
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "css" | "defaultValue" | "value" | "onChange"> & InputBottomGutterProps;
+/**
+ * 日本の郵便番号の入力をサポートとした入力フォーム。
+ *
+ * ### ZipCodeFieldProps.value
+ *
+ * ```tsx
+ * interface ZipCodeValue {
+ *  zipCodeLeft: string
+ *  zipCodeRight: string
+ *  prefectureName?: string
+ *  cityName?: string
+ *  townName?: string
+ * }
+ * ```
+ *
+ * valueは郵便番号の左3桁を表すzipCodeLeft、右4桁を表すzipCodeRightを必須としてオブジェクトです。
+ * 入力されたzipCodeLeft及びzipCodeRightを元に県名prefectureName, 市名cityName, 町名townNameを取得し、結果を返します。
+ *
+ * ### アンコントロールでForm要素を利用する場合
+ *
+ * 住所は非同期で取得されるため、Formのchangeイベントが発火したタイミングでは取得できません。
+ * 住所の取得が保証されている状態で、changeイベントを発火させる必要があります。
+ *
+ * そのためForm内のInput要素が編集される度にHTTP Requestをなげるような実装は難しいですが、
+ * ボタンを押しsubmitしてからHTTP Requestをなげるような実装であれば、
+ * ZipCodeFieldProps.validationMessages.waitingからメッセージを変更できるカスタムバリデーションが存在し、
+ * submitされずエラーが出力されるため、住所の取得を保証できます。
+ *
+ * [サンプル](/?path=/docs/inputs-zipcodefield--form-usage)
+ */
+export declare const ZipCodeField: ({ label, onChange, validationMessages, customValidations, style, className, disabled, readOnly, required, value: propsValue, name, defaultValue, bottomGutter, helperText, invalid }: ZipCodeFieldProps) => JSX.Element;

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

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

package/dist/types/dayjs.d.ts

@@ -0,0 +1,2 @@
+import _dayjs from "dayjs";
+export default _dayjs;

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

@@ -0,0 +1,15 @@
+export * from "./useClickAnimation";
+export * from "./useFetch";
+export * from "./useFocus";
+export * from "./useForceUpdate";
+export * from "./useHover";
+export * from "./useIntersectionObserver";
+export * from "./useInterval";
+export * from "./useKeyboard";
+export * from "./useLocaleString";
+export * from "./useMouseLongPress";
+export * from "./useMutationObserver";
+export * from "./useOnClickOutside";
+export * from "./useResizeObserver";
+export * from "./useTimeout";
+export * from "./useWindowResize";

package/dist/types/hooks/useClickAnimation.d.ts

@@ -0,0 +1,5 @@
+export declare const useClickAnimation: (injectHandleEvent?: ((event: any) => void) | undefined) => {
+    clicked: boolean;
+    onClick: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onAnimationEnd: (event: React.SyntheticEvent<HTMLElement>) => void;
+};

package/dist/types/hooks/useFetch.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @example
+ * useFetch<string[]>("https://hrdtbs.github.io/mocks/animals.json", useMemo(() => ({}), []), "json")
+ */
+export declare const useFetch: <T>(input: RequestInfo, init?: RequestInit | undefined, type?: "text" | "json" | "blob" | "formData") => [T, Error];

package/dist/types/hooks/useFocus.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useFocus: <T extends HTMLElement>(ref: import("react").RefObject<T>, defaultState?: boolean) => boolean;

package/dist/types/hooks/useForceUpdate.d.ts

@@ -0,0 +1 @@
+export declare const useForceUpdate: () => () => void;

package/dist/types/hooks/useHover.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const useHover: (ref: React.RefObject<HTMLElement>) => boolean;

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

@@ -0,0 +1 @@
+export declare const useIntersectionObserver: (ref: React.RefObject<HTMLElement>, options?: IntersectionObserverInit | undefined) => IntersectionObserverEntry | undefined;

package/dist/types/hooks/useInterval.d.ts

@@ -0,0 +1,3 @@
+declare type Callback = (...argv: any[]) => void;
+export declare const useInterval: (callback: Callback, delay: number, flag?: boolean | undefined) => void;
+export {};

package/dist/types/hooks/useKeyboard.d.ts

@@ -0,0 +1 @@
+export declare const useKeyboard: (code: string, callback?: ((event: KeyboardEvent) => void) | undefined) => void;

package/dist/types/hooks/useLocaleString.d.ts

@@ -0,0 +1,5 @@
+export declare const useLocaleString: (localeStrings: {
+    [key: string]: {
+        [locale: string]: string;
+    };
+}) => (string: string) => string;

package/dist/types/hooks/useMouseLongPress.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const useMouseLongPress: (callback: Function) => {
+    onMouseDown: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseUp: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseOut: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};

package/dist/types/hooks/useMutationObserver.d.ts

@@ -0,0 +1 @@
+export declare const useMutationObserver: (element: HTMLElement | Document | null, config?: MutationObserverInit) => MutationRecord | undefined;

package/dist/types/hooks/useOnClickOutside.d.ts

@@ -0,0 +1 @@
+export declare const useOnClickOutside: (ref: React.RefObject<HTMLElement>, handler?: ((event: MouseEvent | TouchEvent) => void) | undefined) => void;

package/dist/types/hooks/useResizeObserver.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useResizeObserver: <T extends HTMLElement>(ref: import("react").RefObject<T>) => ResizeObserverEntry | undefined;

package/dist/types/hooks/useTimeout.d.ts

@@ -0,0 +1,3 @@
+declare type Callback = (...argv: any[]) => void;
+export declare const useTimeout: (callback: Callback, delay: number) => void;
+export {};

package/dist/types/hooks/useWindowResize.d.ts

@@ -0,0 +1,4 @@
+export declare const useWindowResize: () => {
+    width: number;
+    height: number;
+};

package/dist/types/index.d.ts

@@ -0,0 +1,63 @@
+export * from "./Alert";
+export * from "./Breadcrumbs";
+export * from "./Button";
+export * from "./Calendar";
+export * from "./CalendarController";
+export * from "./CalendarLabel";
+export * from "./CalendarUI";
+export * from "./Card";
+export * from "./CardMedia";
+export * from "./Checkbox";
+export * from "./Chip";
+export * from "./Container";
+export * from "./DateField";
+export * from "./DropArea";
+export * from "./ErrorBoundary";
+export * from "./ErrorBoundaryAlert";
+export * from "./FormControl";
+export * from "./FormHelperText";
+export * from "./FullHeight";
+export * from "./Icon";
+export * from "./ImageViewer";
+export * from "./InputBase";
+export * from "./InputLabel";
+export * from "./Layouts";
+export * from "./Legend";
+export * from "./List";
+export * from "./Loading";
+export * from "./LoadingOverlay";
+export * from "./Menu";
+export * from "./Mobile";
+export * from "./Modal";
+export * from "./MultipleTextField";
+export * from "./NumberField";
+export * from "./NumericTextField";
+export * from "./Pagination";
+export * from "./Overlay";
+export * from "./Panel";
+export * from "./Paper";
+export * from "./Popper";
+export * from "./Portal";
+export * from "./ProgressBar";
+export * from "./RadioButton";
+export * from "./RelativeTime";
+export * from "./SearchField";
+export * from "./SelectField";
+export * from "./SelectSearchField";
+export * from "./SortArea";
+export * from "./Status";
+export * from "./Steper";
+export * from "./Table";
+export * from "./Tabs";
+export * from "./TextareaBase";
+export * from "./TextField";
+export * from "./Thumbnail";
+export * from "./Time";
+export * from "./Timeline";
+export * from "./Tooltip";
+export * from "./Typography";
+export * from "./ViewCarousel";
+export * from "./WeeklyCalendarUI";
+export * from "./theme";
+export * from "./LocaleProvider";
+export * from "./ZipCodeField";

package/dist/types/isBrowser.d.ts

@@ -0,0 +1 @@
+export declare const isBrowser: boolean;

package/dist/types/tests/index.test.d.ts

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