@ultraviolet/ui 1.8.4 → 1.10.0

package/dist/index.d.ts

@@ -14,7 +14,6 @@ import { ReactDatePickerProps } from 'react-datepicker';
 import { Serie, LineSvgProps } from '@nivo/line';
 import { ScaleSpec } from '@nivo/scales';
 import { PopoverStateReturn } from 'reakit/Popover';
-import { DialogProps, DialogStateReturn } from 'reakit/Dialog';
 import Select, { OptionProps, Props, CommonProps as CommonProps$1, GroupBase } from 'react-select';
 import { ToastOptions } from 'react-toastify';
 
@@ -1083,8 +1082,15 @@ declare const Carousel: {
 
 type CheckboxProps = {
     error?: string | ReactNode;
+    /**
+     * @deprecated Size prop is deprecated and will be removed in next major update.
+     */
     size?: number;
+    /**
+     * @deprecated Progress prop is deprecated and will be removed in next major update.
+     */
     progress?: boolean;
+    helper?: ReactNode;
     disabled?: boolean;
     checked?: boolean | 'indeterminate';
     className?: string;
@@ -1394,86 +1400,47 @@ type PasswordStrengthMeterProps$1 = {
 };
 declare const Meter: ({ strength, title, value, className, "data-testid": dataTestId, id, }: PasswordStrengthMeterProps$1) => JSX.Element;
 
-declare const MODAL_WIDTH: {
-    large: number;
-    medium: number;
-    small: number;
-    xsmall: number;
-    xxsmall: number;
-};
-type ModalWidth = keyof typeof MODAL_WIDTH;
-declare const MODAL_PLACEMENT: {
-    bottom: string;
-    'bottom-left': string;
-    'bottom-right': string;
-    center: string;
-    left: string;
-    right: string;
-    top: string;
-    'top-left': string;
-    'top-right': string;
-};
-type ModalPlacement = keyof typeof MODAL_PLACEMENT;
-declare const MODAL_ANIMATION: {
-    fold: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
-    scaleBack: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
-    scaleUp: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
-    sketch: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
-    slideBottom: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
-    slideLeft: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
-    slideRight: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
-    slideTop: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
-    zoom: {
-        enter: _emotion_react.Keyframes;
-        leave: _emotion_react.Keyframes;
-    };
+type ModalSize = 'large' | 'medium' | 'small' | 'xsmall' | 'xxsmall';
+type ModalPlacement = 'bottom' | 'bottom-left' | 'bottom-right' | 'center' | 'top' | 'top-left' | 'top-right' | 'right' | 'left';
+type ModalState = {
+    onOpen: () => void;
+    onClose: () => void;
+    toggle: () => void;
+    visible: boolean;
+    modalId: string;
 };
-type ModalAnimation = keyof typeof MODAL_ANIMATION;
-type DisclosureParam = ((dialog?: Partial<DialogStateReturn>) => ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>) | ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>;
-type ModalProps = Partial<Pick<DialogProps, 'animated' | 'id' | 'hideOnEsc' | 'hideOnClickOutside' | 'preventBodyScroll'>> & {
-    animation?: ModalAnimation;
+
+type ModalProps = {
+    id?: string;
+    hideOnEsc?: boolean;
+    hideOnClickOutside?: boolean;
+    preventBodyScroll?: boolean;
     ariaLabel?: string;
-    bordered?: boolean;
-    customDialogBackdropStyles?: JSX.IntrinsicAttributes['css'];
-    customDialogStyles?: JSX.IntrinsicAttributes['css'];
-    disclosure?: DisclosureParam;
-    height?: string;
+    disclosure?: ReactNode | ((state: ModalState) => ReactNode);
     isClosable?: boolean;
-    modal?: boolean;
     onClose?: () => void;
     onBeforeClose?: () => Promise<void> | void;
     opened?: boolean;
     placement?: ModalPlacement;
-    width?: ModalWidth;
-    children: ReactNode | ((args: DialogStateReturn) => ReactNode);
+    size?: ModalSize;
+    /**
+     * @deprecated You should use size prop instead
+     */
+    width?: ModalSize;
+    children: ReactNode | ((args: ModalState) => ReactNode);
     className?: string;
     'data-testid'?: string;
+    backdropClassName?: string;
+    /**
+     * @deprecated You should use backdropClassName instead
+     */
+    customDialogBackdropStyles?: react__default.JSX.IntrinsicAttributes['css'];
+    /**
+     * @deprecated You should use className instead
+     */
+    customDialogStyles?: react__default.JSX.IntrinsicAttributes['css'];
 };
-declare const Modal: react.MemoExoticComponent<({ animated, animation, ariaLabel, id, bordered, children, customDialogBackdropStyles, customDialogStyles, disclosure, height, hideOnClickOutside, hideOnEsc, isClosable, modal, onClose, onBeforeClose, opened, placement, preventBodyScroll, width, className, "data-testid": dataTestId, }: ModalProps) => _emotion_react_jsx_runtime.JSX.Element>;
+declare const Modal: ({ ariaLabel, id, children, disclosure, hideOnClickOutside, hideOnEsc, isClosable, onClose, onBeforeClose, opened, placement, preventBodyScroll, size, className, "data-testid": dataTestId, backdropClassName, width, customDialogStyles, customDialogBackdropStyles, }: ModalProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type NoticeProps = {
     children: ReactNode;
@@ -1692,7 +1659,7 @@ type ProgressBarProps = {
 declare const ProgressBar: ({ progress, value, sentiment, className, "data-testid": dataTestId, }: ProgressBarProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type RadioProps = {
-    error?: string | ReactNode;
+    error?: ReactNode;
     checked?: boolean;
     value: string | number;
     helper?: ReactNode;
@@ -2322,6 +2289,7 @@ type ToggleProps = {
     size?: 'large' | 'small';
     labelPosition?: 'left' | 'right';
     label?: ReactNode;
+    helper?: ReactNode;
     disabled?: boolean;
     className?: string;
     required?: boolean;
@@ -2362,6 +2330,21 @@ type VerificationCodeProps = {
 };
 declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, inputStyle, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, }: VerificationCodeProps) => JSX.Element;
 
+type RadioGroupRadioProps = Omit<ComponentProps<typeof Radio>, 'onChange' | 'checked' | 'required'>;
+type RadioGroupProps = {
+    legend: string;
+    value: string | number;
+    className?: string;
+    helper?: ReactNode;
+    error?: ReactNode;
+    direction?: 'row' | 'column';
+    children: ReactNode;
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'required'>;
+declare const RadioGroup: {
+    ({ legend, value, className, helper, error, direction, children, onChange, name, required, }: RadioGroupProps): _emotion_react_jsx_runtime.JSX.Element;
+    Radio: ({ onFocus, onBlur, disabled, error, name, value, label, helper, className, autoFocus, onKeyDown, "data-testid": dataTestId, }: RadioGroupRadioProps) => _emotion_react_jsx_runtime.JSX.Element;
+};
+
 declare const getUUID: (prefix?: string) => string;
 
 declare const bounce: _emotion_react.Keyframes;
@@ -2405,4 +2388,4 @@ declare const down: (size: ScreenSize, rules: string) => string;
 
 declare const normalize: () => string;
 
-export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CopyButton, DateInput, EmptyState, Expandable, LineChart, Link, List, Loader, Menu, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, ProgressBar, Radio, Row, SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextInput, TimeInput, ToastContainer, Toggle, Tooltip, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };
+export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CopyButton, DateInput, EmptyState, Expandable, LineChart, Link, List, Loader, Menu, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, ProgressBar, Radio, RadioGroup, Row, SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextInput, TimeInput, ToastContainer, Toggle, Tooltip, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };