visits-style 1.2.1 → 1.4.0-1

package/README.md

@@ -1,4 +1,10 @@
-# visits-style
+<h1 align="center">visits-style</h1>
+
+![release](https://badgen.net/npm/v/visits-style)
+![license](https://badgen.net/npm/license/visits-style)
+![bundle size](https://badgen.net/bundlephobia/minzip/visits-style)
+
+
 VISITS Technologiesのreactデザインコンポーネント
 
 ## Getting Started
@@ -14,12 +20,12 @@ yarn add react react-dom styled-components visits-style
 ```
 
 ## Dependencies
-- React, React-dom(^16.8.6)
-- styled-components(^4.2.0)
+- React, React-dom(^18.0.0)
+- styled-components(^5.0.0)
 
 ## Example
 
-```javascript
+```ts
 // index.tsx
 import * as React from 'react';
 import * as reactDOM from 'react-DOM';
@@ -34,10 +40,11 @@ function App() {
   )
 }
 
-reactDOM.render(App, document.getElementById('root'));
+const rootElement = document.getElementById('root')!;
+const root = reactDOM.createRoot(rootElement);
+root.render(<App />);
 ```
 
 ## Docs
 
-- [ドキュメント](https://visits-works.github.io/visits-style/)
-- [storybook](https://visits-works.github.io/visits-style/storybook)
+- [ドキュメント](https://visits-works.github.io/visits-style/storybook)

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

@@ -1,13 +1,12 @@
-import { HTMLAttributes } from 'react';
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    /** ボタンなどの表示するラベル */
-    header: any;
-    show: boolean;
-    /**
-     * アニメーションの時間
-     * @default 300
-     */
-    timeout?: number;
-}
-export default function Accordion({ header, show, children, timeout, ...rest }: Props): JSX.Element;
-export {};
+import { HTMLAttributes } from 'react';
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** ボタンなどの表示するラベル */
+    header: any;
+    show: boolean;
+    /**
+     * アニメーションの時間
+     * @default 300
+     */
+    timeout?: number;
+}
+export default function Accordion({ header, show, children, timeout, ...rest }: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -1,20 +1,19 @@
-import React, { HTMLAttributes } from 'react';
-import { ColorType } from '../../types';
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    /** background色 */
-    color?: ColorType;
-    /** ロゴのイメージ、プロジェクト名など */
-    brand?: React.ReactElement<any> | string;
-    /** 定義された位置を固定にする */
-    fixed?: boolean;
-    /** (IE11不可)画面がスクロールされても上で貼り付けいるようにする */
-    sticky?: boolean;
-    /** 中央並びから自動幅で表示します */
-    fluid?: boolean;
-    /** 背景がblurされます（safari専用、他は透明度） */
-    backdrop?: boolean;
-    /** childrenに定義するElementの並び順を指定します。未定義は自動並び */
-    align?: 'left' | 'right';
-}
-export default function AppBar({ children, align, brand, ...rest }: Props): JSX.Element;
-export {};
+import React, { HTMLAttributes } from 'react';
+import { ColorType } from '../../types';
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** background色 */
+    color?: ColorType;
+    /** ロゴのイメージ、プロジェクト名など */
+    brand?: React.ReactElement<any> | string;
+    /** 定義された位置を固定にする */
+    fixed?: boolean;
+    /** (IE11不可)画面がスクロールされても上で貼り付けいるようにする */
+    sticky?: boolean;
+    /** 中央並びから自動幅で表示します */
+    fluid?: boolean;
+    /** 背景がblurされます（safari専用、他は透明度） */
+    backdrop?: boolean;
+    /** childrenに定義するElementの並び順を指定します。未定義は自動並び */
+    align?: 'left' | 'right';
+}
+export default function AppBar({ children, align, brand, ...rest }: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -1,30 +1,27 @@
-import React, { HTMLAttributes } from 'react';
-import { ColorType } from '../../types';
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    /** trueの場合、モーダルを表示します。 */
-    show?: boolean;
-    /** モーダルのbodyに入れる内容 */
-    children?: React.ReactNode;
-    /**
-     * モーダルのbackground色
-     * @default 'background'
-     */
-    color?: ColorType;
-    /** モーダルを閉じる処理 */
-    closeModal: () => void;
-    /** オーバーレイのクリックでモーダルクローズ */
-    closeOnOverlay?: boolean;
-    /** escボタンでクローズ */
-    closeOnEsc?: boolean;
-    /**
-     * モーダルの表示・非表示のアニメーション速度
-     * @default 200
-     */
-    timeout?: number;
-    /** モーダル外に表示するElements */
-    external?: React.ReactNode;
-    /** モーダルのtransition exitが完了した時に発火されるcallback */
-    onExited?: () => void;
-}
-export default function Modal({ show, children, timeout, color, closeModal, external, className, closeOnOverlay, closeOnEsc, onExited, ...rest }: Props): JSX.Element;
-export {};
+import React, { HTMLAttributes } from 'react';
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** trueの場合、モーダルを表示します。 */
+    show?: boolean;
+    /** モーダルのbodyに入れる内容 */
+    children?: React.ReactNode;
+    /** モーダルを閉じる処理 */
+    closeModal: () => void;
+    /** オーバーレイのクリックでモーダルクローズ */
+    closeOnOverlay?: boolean;
+    /** escボタンでクローズ */
+    closeOnEsc?: boolean;
+    /**
+     * モーダルの表示・非表示のアニメーション速度
+     * @default 200
+     */
+    timeout?: number;
+    /** モーダルのtransition exitが完了した時に発火されるcallback */
+    onExited?: () => void;
+    /**
+     * モーダルの背景からのpaddingを指定します。
+     * @default '0.85rem'
+     */
+    padding?: string;
+}
+export default function Modal({ show, children, timeout, padding, closeModal, closeOnOverlay, closeOnEsc, onExited, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export declare const ModalContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("../../elements/Box").Props>>;

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

@@ -1,40 +1,38 @@
-import React, { HTMLAttributes } from 'react';
-import { Placement } from '@popperjs/core';
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    /** ボタンの内容 */
-    label: React.ReactElement;
-    /** 内容のリスト */
-    children?: React.ReactNode;
-    /**
-     * 吹き出しの背景色
-     * @default 'background'
-     */
-    color?: string;
-    /** 右の基準でリストを表示する */
-    right?: boolean;
-    /**
-     * 表示される場所
-     * @default 'bottom-end'
-     */
-    position?: Placement;
-    /**
-     * ツールチップが表示される間隔
-     * @default '{ x: 0, y: 6 }'
-     */
-    offset?: {
-        x: number;
-        y: number;
-    };
-    /** 閉じた場合のコールバック */
-    onClose?: () => void;
-    /** 開けた場合のコールバック */
-    onOpen?: () => void;
-    /** コンテンツを出さない */
-    disabled?: boolean;
-}
-export interface PopoverRef {
-    open: () => void;
-    close: () => void;
-}
-declare const Popover: React.ForwardRefExoticComponent<Props & React.RefAttributes<PopoverRef>>;
-export default Popover;
+import React, { HTMLAttributes } from 'react';
+import type { Placement } from '@floating-ui/core';
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** ボタンの内容 */
+    label: React.ReactElement;
+    /** 内容のリスト */
+    children?: React.ReactNode;
+    /**
+     * 吹き出しの背景色
+     * @default 'background'
+     */
+    color?: string;
+    /**
+     * 表示される場所
+     * @default 'bottom-end'
+     */
+    position?: Placement;
+    /**
+     * ツールチップが表示される間隔
+     * @default '{ x: 0, y: 6 }'
+     */
+    offset?: {
+        x: number;
+        y: number;
+    };
+    /** 閉じた場合のコールバック */
+    onClose?: () => void;
+    /** 開けた場合のコールバック */
+    onOpen?: () => void;
+    /** コンテンツを出さない */
+    disabled?: boolean;
+}
+export interface PopoverRef {
+    open: () => void;
+    close: () => void;
+}
+declare const Popover: React.ForwardRefExoticComponent<Props & React.RefAttributes<PopoverRef>>;
+export default Popover;

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

@@ -1,8 +1,8 @@
-import React from 'react';
-interface Props {
-    children: React.ReactNode;
-    container?: HTMLElement;
-    disabled?: boolean;
-}
-declare const Portal: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
-export default Portal;
+import React from 'react';
+export interface Props {
+    children: React.ReactNode;
+    container?: HTMLElement;
+    disabled?: boolean;
+}
+declare const Portal: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+export default Portal;

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

@@ -1,12 +1,12 @@
-import { HTMLAttributes } from 'react';
-import { ColorType } from '../../types';
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    /** 色の指定 */
-    color?: ColorType;
-    /** サイズ */
-    size?: string;
-    /** spinnerの太さ */
-    borderSize?: string;
-}
-declare const Spinner: import("styled-components").StyledComponent<"div", any, Props, never>;
-export default Spinner;
+import { HTMLAttributes } from 'react';
+import { ColorType } from '../../types';
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** 色の指定 */
+    color?: ColorType;
+    /** サイズ */
+    size?: string;
+    /** spinnerの太さ */
+    borderSize?: string;
+}
+declare const Spinner: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>>;
+export default Spinner;

package/dist/components/Toast/ToastItem.d.ts

@@ -0,0 +1,2 @@
+import type { ToastItemProps } from './types';
+export default function ToastItem({ className, message, duration, clear, id, clearOnClick, }: ToastItemProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,39 +1,2 @@
-import React, { HTMLAttributes } from 'react';
-import { ColorType } from '../../types';
-declare type PositionType = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
-interface ToastProps extends HTMLAttributes<HTMLDivElement> {
-    /** 認識ID */
-    id: string;
-    /** 表示する内容 */
-    message?: React.ReactNode;
-    /** 背景の色 */
-    color?: ColorType;
-    /**
-     * 表示される時間 nullの場合は自動で閉じられません
-     * @default 5000
-     */
-    duration?: number | null;
-    /** 押したら閉じられる */
-    clearOnClick?: boolean;
-}
-interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
-    /** 表示するToastのリスト */
-    toasts: ToastProps[];
-    /** toastを消すタイミングのコールバック */
-    clear: (id: string) => void;
-    /**
-     * toastの表示される場所の指定
-     * top, top-right, top-left, bottom, bottom-right, bottom-left
-     * @default 'top-right'
-     */
-    position?: PositionType;
-    /**
-     * margin
-     * @default '1rem'
-     */
-    margin?: string;
-    /** スクロールしても固定として表示する */
-    fixed?: boolean;
-}
-export default function Toast({ toasts, clear, fixed, style, margin, position, ...rest }: ContainerProps): JSX.Element;
-export {};
+import type { ToastContainerProps } from './types';
+export default function Toast({ toasts, clear, fixed, margin, position }: ToastContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Toast/types.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+export interface ToastType {
+    /** 認識ID */
+    id: string;
+    /** 表示する内容 */
+    message?: React.ReactNode;
+    /**
+     * 表示される時間 nullの場合は自動で閉じられません
+     * @default 5000
+     */
+    duration?: number | null;
+    className?: string;
+    /** 押したら閉じられる */
+    clearOnClick?: boolean;
+}
+export interface ToastItemProps extends ToastType {
+    clear: (id: string) => void;
+}
+export type ToastContainerPositionType = 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left';
+export interface ToastContainerProps {
+    /** 表示するToastのリスト */
+    toasts: ToastType[];
+    /** toastを消すタイミングのコールバック */
+    clear: (id: string) => void;
+    /**
+     * toastの表示される場所の指定
+     * \
+     * top, top-right, top-left, bottom, bottom-right, bottom-left
+     * @default 'top-left'
+     */
+    position?: ToastContainerPositionType;
+    /**
+     * margin 単位はpx
+     * @default '16px'
+     */
+    margin?: string;
+    /** スクロールしても固定として表示する */
+    fixed?: boolean;
+}

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

@@ -1,27 +1,30 @@
-import React from 'react';
-import { Placement } from '@popperjs/core';
-import { ColorType } from '../../types';
-interface TooltipProps {
-    /** 吹き出しとして表示したい内容 */
-    label: React.ReactNode;
-    /** マウスオーバーの対象になるelement */
-    children: React.ReactElement;
-    /** 吹き出しの背景色の指定 */
-    color?: ColorType;
-    /**
-     * 表示される場所
-     * @default 'bottom'
-     */
-    position?: Placement;
-    /**
-     * ツールチップが表示される間隔, 単位はpx
-     * @default '{ x: 0, y: 6 }'
-     */
-    offset?: {
-        x: number;
-        y: number;
-    };
-    className?: string;
-}
-export default function Tooltip({ children, position, label, color, className, offset, }: TooltipProps): JSX.Element;
-export {};
+import React from 'react';
+import type { Placement } from '@floating-ui/core';
+import { ColorType } from '../../types';
+export interface TooltipProps {
+    /** 吹き出しとして表示したい内容 */
+    label: React.ReactNode;
+    /** マウスオーバーの対象になるelement */
+    children: React.ReactElement;
+    /** 吹き出しの背景色の指定 */
+    color?: ColorType;
+    /**
+     * 表示される場所
+     * @default 'bottom'
+     */
+    position?: Placement;
+    /**
+     * ツールチップが表示される間隔, 単位はpx
+     * @default '{ x: 0, y: 6 }'
+     */
+    offset?: {
+        x: number;
+        y: number;
+    };
+    /** 吹き出し表示座標を対象のElementではなくマウスカーソルにする */
+    clientPoint?: boolean;
+    /** 吹き出しを出さない */
+    disabled?: boolean;
+    className?: string;
+}
+export default function Tooltip({ children, position, label, color, className, offset, clientPoint, disabled, }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/index.d.ts

@@ -1,10 +1,10 @@
-export * from '../forms';
-export { default as Accordion } from './Accordion';
-export { default as AppBar } from './AppBar';
-export { default as Tooltip } from './Tooltip';
-export { default as Card } from './Card';
-export { default as Popover } from './Popover';
-export { default as Portal } from './Portal';
-export { default as Modal } from './Modal';
-export { default as Toast } from './Toast';
-export { default as Spinner } from './Spinner';
+export * from '../forms';
+export { default as Accordion, type Props as AccordionProps } from './Accordion';
+export { default as AppBar, type Props as AppBarProps } from './AppBar';
+export { default as Tooltip, type TooltipProps } from './Tooltip';
+export { default as Popover, type Props as PopoverProps, type PopoverRef } from './Popover';
+export { default as Portal, type Props as PortalProps } from './Portal';
+export { default as Modal, type Props as ModalProps } from './Modal';
+export { default as Toast } from './Toast';
+export { default as Spinner, type Props as SinnerProps } from './Spinner';
+export type * from './Toast/types';

package/dist/elements/Box/index.d.ts

@@ -1,10 +1,10 @@
-import { HTMLAttributes } from 'react';
-import { ColorType } from '../../types';
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    /** 色指定 */
-    color?: ColorType;
-    /** borderを非表示する */
-    borderless?: boolean;
-}
-declare const _default: import("styled-components").StyledComponent<"div", any, Props, never>;
-export default _default;
+import { HTMLAttributes } from 'react';
+import { ColorType } from '../../types';
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** 色指定 */
+    color?: ColorType;
+    /** borderを非表示する */
+    borderless?: boolean;
+}
+declare const _default: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>>;
+export default _default;