@jstoolkit/styled-components - npm Package Compare versions

Comparing version 1.13.0 to 1.13.1

avatars/Avatar/Avatar.d.ts

 import React from 'react';
 import { FlexComponentProps } from 'reflexy/styled';
 export interface AvatarProps extends FlexComponentProps<'div'> {
-    img?: string;
-    size?: React.ReactText;
+    img?: string | undefined;
+    size?: React.ReactText | undefined;
 }
 export default function Avatar({ img, size, className, children, ...rest }: AvatarProps): JSX.Element;

Badge/Badge.d.ts

 import React from 'react';
 import { FlexComponentProps } from 'reflexy/styled';
 export interface BadgeProps extends FlexComponentProps {
-    count?: React.ReactNode;
-    loading?: boolean;
+    count?: React.ReactNode | undefined;
+    loading?: boolean | undefined;
 }
 export default function Badge({ count, loading, className, children, ...rest }: React.PropsWithChildren<BadgeProps>): JSX.Element;

Badge/BadgeIcon/BadgeIcon.d.ts

@@ -7,5 +7,5 @@ import React from 'react';
 declare const BadgeIcon: import("@mui/styles/styled").StyledComponent<Omit<BadgeIconProps, "className" | "classes"> & import("@mui/styles/withStyles").StyledComponentProps<"root"> & Omit<BadgeIconProps, "className" | "theme"> & {
-    className?: string | undefined;
-    theme?: Theme | undefined;
+    className?: string;
+    theme?: Theme;
 }>;
 export default BadgeIcon;

Button/Button.d.ts

@@ -14,7 +14,7 @@ import React from 'react';
 export interface ButtonStyleProps {
-    size?: ButtonSize;
-    color?: ButtonColor;
-    variant?: ButtonVariant;
+    readonly size?: ButtonSize | undefined;
+    readonly color?: ButtonColor | undefined;
+    readonly variant?: ButtonVariant | undefined;
 }
 export type ButtonProps<C extends React.ElementType = 'button'> = FlexAllProps<C> & ButtonStyleProps;
 export default function Button<C extends React.ElementType = 'button'>({ component, size, color, variant, className, ...rest }: ButtonProps<C>): JSX.Element;

Button/useStyles.d.ts

 import type { ButtonProps } from './Button';
 type MakeStylesProps = Pick<ButtonProps, 'variant'>;
 declare const useStyles: (props: MakeStylesProps & {
-    classes?: Partial<import("@mui/styles/withStyles").ClassNameMap<"s" | "text" | "root" | "contain" | "filled" | "m" | "xs" | "l" | "xl" | "outlined" | "variant-text" | "variant-outlined" | "variant-filled" | "size-contain" | "size-xs" | "size-s" | "size-m" | "size-l" | "size-xl" | "none-text" | "none-filled" | "none-outlined" | "default-text" | "default-filled" | "default-outlined" | "primary-text" | "primary-filled" | "primary-outlined" | "secondary-text" | "secondary-filled" | "secondary-outlined">> | undefined;
+    classes?: OptionalToUndefined<Partial<import("@mui/styles/withStyles").ClassNameMap<"s" | "text" | "root" | "contain" | "filled" | "m" | "xs" | "l" | "xl" | "outlined" | "variant-text" | "variant-outlined" | "variant-filled" | "size-contain" | "size-xs" | "size-s" | "size-m" | "size-l" | "size-xl" | "none-text" | "none-filled" | "none-outlined" | "default-text" | "default-filled" | "default-outlined" | "primary-text" | "primary-filled" | "primary-outlined" | "secondary-text" | "secondary-filled" | "secondary-outlined">>> | undefined;
 }) => import("@mui/styles/withStyles").ClassNameMap<"s" | "text" | "root" | "contain" | "filled" | "m" | "xs" | "l" | "xl" | "outlined" | "variant-text" | "variant-outlined" | "variant-filled" | "size-contain" | "size-xs" | "size-s" | "size-m" | "size-l" | "size-xl" | "none-text" | "none-filled" | "none-outlined" | "default-text" | "default-filled" | "default-outlined" | "primary-text" | "primary-filled" | "primary-outlined" | "secondary-text" | "secondary-filled" | "secondary-outlined">;
 export default useStyles;

Checkbox/Checkbox.d.ts

@@ -5,9 +5,9 @@ import React from 'react';
 export interface CheckboxProps<V = unknown> extends Omit<FlexComponentProps<'div'>, 'onChange'> {
-    type?: CheckboxType;
-    onChange?: (checked: boolean) => void;
-    checked?: boolean;
-    disabled?: boolean;
+    type?: CheckboxType | undefined;
+    onChange?: ((checked: boolean) => void) | undefined;
+    checked?: boolean | undefined;
+    disabled?: boolean | undefined;
     /** Used with CheckboxGroup */
-    value?: V;
+    value?: V | undefined;
 }
 export default function Checkbox<V = unknown>({ type, onChange, checked, disabled, value, className, ...rest }: React.PropsWithChildren<CheckboxProps<V>>): JSX.Element;

Checkbox/CheckboxContext.d.ts

 import React from 'react';
 export interface CheckboxContextValue<V = unknown> {
     /** Callback when child checked */
-    onChecked?: (value: V) => void;
+    onChecked?: ((value: V) => void) | undefined;
     /** Value for group for check child with corresponding value */
-    checkedValue?: V;
+    checkedValue?: V | undefined;
 }
 declare const _default: React.Context<CheckboxContextValue<any>>;
 export default _default;

Checkbox/CheckboxGroup.d.ts

@@ -5,10 +5,10 @@ import React from 'react';
 export interface CheckboxGroupChangeEvent<V = unknown> {
-    name?: string;
+    name?: string | undefined;
     value: V;
 }
 export interface CheckboxGroupProps<V = unknown> extends Omit<FlexComponentProps<'div'>, 'onChange'> {
-    name?: string;
-    value?: CheckboxContextValue<V>['checkedValue'];
-    onChange?: (data: CheckboxGroupChangeEvent<V>) => void;
+    name?: string | undefined;
+    value?: CheckboxContextValue<V>['checkedValue'] | undefined;
+    onChange?: ((data: CheckboxGroupChangeEvent<V>) => void) | undefined;
 }
 export default function CheckboxGroup<V = unknown>({ name, value: checkedValueProp, onChange, ...rest }: React.PropsWithChildren<CheckboxGroupProps<V>>): JSX.Element;

Divider/Divider.d.ts

 import React from 'react';
 import { FlexAllProps, DefaultComponentType } from 'reflexy/styled';
 export type DividerProps<C extends React.ElementType = DefaultComponentType> = {
-    light?: boolean;
+    light?: boolean | undefined;
 } & FlexAllProps<C>;
 export default function Divider<C extends React.ElementType = DefaultComponentType>({ light, column, className, ...rest }: DividerProps<C>): JSX.Element;

DropDown/DropDown.d.ts

@@ -5,8 +5,8 @@ import React from 'react';
 export interface DropDownProps extends Partial<Pick<OutsideClickListenerProps, 'onOutsideClick'>>, Omit<FlexComponentProps<'div'>, keyof React.DOMAttributes<any>> {
-    expanded?: boolean;
-    onToggle?: (expanded: boolean) => void;
+    expanded?: boolean | undefined;
+    onToggle?: ((expanded: boolean) => void) | undefined;
     /** Works only for uncontrolled */
-    onToggled?: (expanded: boolean) => void;
-    expandedClassName?: string;
-    hideOnOutsideClick?: boolean;
+    onToggled?: ((expanded: boolean) => void) | undefined;
+    expandedClassName?: string | undefined;
+    hideOnOutsideClick?: boolean | undefined;
     /**
@@ -16,4 +16,4 @@ * Whether set position `absolute` for DropDownBox.
      */
-    floating?: boolean;
+    floating?: boolean | undefined;
 }
 export default function DropDown({ expanded, onToggle, onToggled, floating, hideOnOutsideClick, className, expandedClassName, onOutsideClick, children, ...rest }: React.PropsWithChildren<DropDownProps>): JSX.Element;

DropDown/DropDownBox/DropDownBox.d.ts

@@ -12,3 +12,3 @@ import React from 'react';
      */
-    closeOnClick?: ((event: React.MouseEvent<Element>) => boolean) | boolean | HtmlTagSelectorMap;
+    closeOnClick?: ((event: React.MouseEvent<Element>) => boolean) | boolean | HtmlTagSelectorMap | undefined;
     /**
@@ -18,4 +18,4 @@ * Whether render hidden content.
      */
-    prerender?: boolean;
+    prerender?: boolean | undefined;
 }
 export default function DropDownBox({ closeOnClick, prerender, className, ...rest }: React.PropsWithChildren<DropDownBoxProps>): JSX.Element | null;

DropDown/DropDownLabel/DropDownLabel.d.ts

 import React from 'react';
 import { FlexAllProps, DefaultComponentType } from 'reflexy/styled';
 export type DropDownLabelProps<C extends React.ElementType = DefaultComponentType> = React.PropsWithChildren<{
-    toggleOnClick?: boolean;
-    expandedClassName?: string;
-    expandIcon?: boolean | React.ReactElement;
+    toggleOnClick?: boolean | undefined;
+    expandedClassName?: string | undefined;
+    expandIcon?: boolean | React.ReactElement | undefined;
 }> & FlexAllProps<C>;
 export default function DropDownLabel<C extends React.ElementType = DefaultComponentType>({ toggleOnClick, expandIcon, expandedClassName, className, children, ...rest }: DropDownLabelProps<C>): JSX.Element;

DropDown/DropDownLabel/ExpandIcon.d.ts

 import React from 'react';
 import type { DropDownContextValue } from '../DropDownContext';
 declare const ExpandIcon: import("@mui/styles/styled").StyledComponent<Omit<React.HTMLAttributes<HTMLDivElement> & Pick<DropDownContextValue, "expanded">, "className" | "classes"> & import("@mui/styles/withStyles").StyledComponentProps<"root"> & Omit<React.HTMLAttributes<HTMLDivElement> & Pick<DropDownContextValue, "expanded">, "className" | "theme"> & {
-    className?: string | undefined;
-    theme?: import("@mui/private-theming").DefaultTheme | undefined;
+    className?: string;
+    theme?: import("@mui/private-theming").DefaultTheme;
 }>;
 export default ExpandIcon;

ErrorBoundary/ErrorBoundary.d.ts

 import React from 'react';
 export interface ErrorBoundaryProps {
-    error?: unknown;
-    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
-    renderer: (error: unknown) => React.ReactNode;
+    readonly error?: unknown | undefined;
+    readonly onError?: ((error: Error, errorInfo: React.ErrorInfo) => void) | undefined;
+    readonly renderer: ((error: unknown) => React.ReactNode) | undefined;
 }
 interface State {
-    error: unknown;
+    readonly error: unknown;
 }
@@ -10,0 +10,0 @@ export default class ErrorBoundary extends React.Component<React.PropsWithChildren<ErrorBoundaryProps>, State> {

Field/Field.d.ts

@@ -8,13 +8,13 @@ import React from 'react';
 type FlexContent<T extends React.ElementType> = FlexComponentProps<T> & {
-    content?: React.ReactNode;
+    content?: React.ReactNode | undefined;
 };
 export interface FieldProps extends FlexComponentProps {
-    label?: React.ReactNode | FlexContent<'label'>;
+    label?: React.ReactNode | FlexContent<'label'> | undefined;
     /** @deprecated Use `controls` */
-    container?: FlexComponentProps<'div'>;
-    controls?: FlexComponentProps<'div'>;
-    helperText?: React.ReactNode | FlexContent<'div'>;
-    state?: FieldState;
+    container?: FlexComponentProps<'div'> | undefined;
+    controls?: FlexComponentProps<'div'> | undefined;
+    helperText?: React.ReactNode | FlexContent<'div'> | undefined;
+    state?: FieldState | undefined;
 }
 export default function Field({ column, row, label, container, controls, helperText, state, children, className, ...rest }: React.PropsWithChildren<FieldProps>): JSX.Element;
 export {};

HideableFlex/HideableFlex.d.ts

@@ -5,19 +5,19 @@ import React from 'react';
 export interface Transition {
-    readonly duration?: Property.TransitionDuration<number>;
-    readonly func?: Property.TransitionTimingFunction;
-    readonly property?: Property.TransitionProperty;
+    readonly duration?: Property.TransitionDuration<number> | undefined;
+    readonly func?: Property.TransitionTimingFunction | undefined;
+    readonly property?: Property.TransitionProperty | undefined;
 }
 export interface HideableProps {
-    readonly transitionDuration?: Transition['duration'];
-    readonly transitionFunction?: Transition['func'];
-    readonly transitionProperty?: Transition['property'];
-    readonly transition?: Transition;
-    readonly hidden?: boolean;
-    readonly disposable?: boolean;
-    readonly collapsable?: boolean;
-    readonly keepChildren?: boolean;
-    readonly appear?: boolean;
-    readonly hiddenClassName?: string;
-    readonly onHidden?: VoidFunction;
-    readonly onShown?: VoidFunction;
+    readonly transitionDuration?: Transition['duration'] | undefined;
+    readonly transitionFunction?: Transition['func'] | undefined;
+    readonly transitionProperty?: Transition['property'] | undefined;
+    readonly transition?: Transition | undefined;
+    readonly hidden?: boolean | undefined;
+    readonly disposable?: boolean | undefined;
+    readonly collapsable?: boolean | undefined;
+    readonly keepChildren?: boolean | undefined;
+    readonly appear?: boolean | undefined;
+    readonly hiddenClassName?: string | undefined;
+    readonly onHidden?: VoidFunction | undefined;
+    readonly onShown?: VoidFunction | undefined;
 }
@@ -24,0 +24,0 @@ export type HideableFlexProps<C extends React.ElementType = DefaultComponentType> = FlexAllProps<C, {

HighlightedText/HighlightedText.d.ts

 import React from 'react';
 import { FlexAllProps } from 'reflexy';
 export type HighlightedTextProps<C extends React.ElementType = 'span'> = {
-    ignoreCase?: boolean;
-    children?: string | string[];
-    highlight?: string;
+    ignoreCase?: boolean | undefined;
+    children?: string | string[] | undefined;
+    highlight?: string | undefined;
 } & FlexAllProps<C>;
 export default function HighlightedText<C extends React.ElementType = 'span'>({ highlight, children: text, ignoreCase, className, ...rest }: HighlightedTextProps<C>): JSX.Element;

InputGroup/InputGroup.d.ts

@@ -5,4 +5,4 @@ import React from 'react';
     input: JSX.Element | FlexAllProps<C>;
-    error?: string | boolean | JSX.Element;
+    error?: string | boolean | JSX.Element | undefined;
 }
 export default function InputGroup<C extends React.ElementType = 'input'>({ input, error, className, children, ...rest }: React.PropsWithChildren<InputGroupProps<C>>): JSX.Element;

LoadableButton/LoadableButton.d.ts

@@ -6,4 +6,4 @@ import React from 'react';
 export type LoadableButtonProps<C extends React.ElementType = 'button'> = Omit<LoadableFlexProps<any>, 'size' | 'color' | 'variant' | 'spinnerPosition' | 'spinnerSize'> & ButtonProps<C> & {
-    spinnerPosition?: SpinnerPosition;
+    spinnerPosition?: SpinnerPosition | undefined;
 };
 export default function LoadableButton<C extends React.ElementType = 'button'>({ component, loading, spinnerPosition, spinnerClassName, className, ...rest }: LoadableButtonProps<C>): JSX.Element;

LoadableButton/useStyles.d.ts

 import type { LoadableButtonProps } from './LoadableButton';
 type MakeStylesProps = Pick<LoadableButtonProps, 'loading' | 'spinnerPosition'>;
 declare const useStyles: (props: MakeStylesProps & {
-    classes?: Partial<import("@mui/styles/withStyles").ClassNameMap<"root" | "spinner">> | undefined;
+    classes?: OptionalToUndefined<Partial<import("@mui/styles/withStyles").ClassNameMap<"root" | "spinner">>> | undefined;
 }) => import("@mui/styles/withStyles").ClassNameMap<"root" | "spinner">;
 export default useStyles;

LoadableFlex/LoadableFlex.d.ts

@@ -6,17 +6,17 @@ import React from 'react';
 interface LoadableStyleProps {
-    loading?: boolean;
-    disableOnLoading?: boolean;
-    backdrop?: boolean;
-    blur?: boolean;
-    spinnerSize?: SpinnerSize;
-    spinnerPosition?: SpinnerPosition;
+    readonly loading?: boolean | undefined;
+    readonly disableOnLoading?: boolean | undefined;
+    readonly backdrop?: boolean | undefined;
+    readonly blur?: boolean | undefined;
+    readonly spinnerSize?: SpinnerSize | undefined;
+    readonly spinnerPosition?: SpinnerPosition | undefined;
     /** @deprecated Use `animation` */
-    transition?: boolean;
-    animation?: boolean;
+    readonly transition?: boolean | undefined;
+    readonly animation?: boolean | undefined;
 }
 export type LoadableFlexProps<C extends React.ElementType = DefaultComponentType> = React.PropsWithChildren<FlexAllProps<C> & LoadableStyleProps & {
-    spinner?: boolean | React.ReactElement;
-    spinnerClassName?: string;
+    spinner?: boolean | React.ReactElement | undefined;
+    spinnerClassName?: string | undefined;
 }>;
 export default function LoadableFlex<C extends React.ElementType = DefaultComponentType>({ loading, disableOnLoading, spinner, spinnerPosition, spinnerSize, spinnerClassName, backdrop, blur, transition, animation, className, children, ...rest }: LoadableFlexProps<C>): JSX.Element;
 export {};

Menu/MenuList.d.ts

@@ -8,17 +8,17 @@ import React from 'react';
 export interface MenuListProps<V, I extends string | SvgSpriteIconProps<string>, HI extends string | SvgSpriteIconProps<string>> extends FlexComponentProps<'div'> {
-    header?: React.ReactChild;
-    headerIcon?: HI;
-    headerAction?: string | React.ReactElement<any, any>;
-    items?: MenuItem<V, I>[];
-    onItemSelect?: MenuListItemProps<V, I>['onSelect'];
-    onItemMouseEnter?: (value: MenuListItemProps<V, I>['value'], event: React.MouseEvent<HTMLDivElement>) => void;
-    onItemMouseLeave?: (value: MenuListItemProps<V, I>['value'], event: React.MouseEvent<HTMLDivElement>) => void;
-    onItemFocus?: (value: MenuListItemProps<V, I>['value'], event: React.FocusEvent<HTMLDivElement>) => void;
-    onItemBlur?: (value: MenuListItemProps<V, I>['value'], event: React.FocusEvent<HTMLDivElement>) => void;
-    onItemProps?: (itemProps: MenuItem<V, I>) => MenuItem<V, I>;
-    onClose?: () => void;
-    onBack?: () => void;
-    onHeaderAction?: () => void;
+    header?: React.ReactChild | undefined;
+    headerIcon?: HI | undefined;
+    headerAction?: string | React.ReactElement<any, any> | undefined;
+    items?: MenuItem<V, I>[] | undefined;
+    onItemSelect?: MenuListItemProps<V, I>['onSelect'] | undefined;
+    onItemMouseEnter?: ((value: MenuListItemProps<V, I>['value'], event: React.MouseEvent<HTMLDivElement>) => void) | undefined;
+    onItemMouseLeave?: ((value: MenuListItemProps<V, I>['value'], event: React.MouseEvent<HTMLDivElement>) => void) | undefined;
+    onItemFocus?: ((value: MenuListItemProps<V, I>['value'], event: React.FocusEvent<HTMLDivElement>) => void) | undefined;
+    onItemBlur?: ((value: MenuListItemProps<V, I>['value'], event: React.FocusEvent<HTMLDivElement>) => void) | undefined;
+    onItemProps?: ((itemProps: MenuItem<V, I>) => MenuItem<V, I>) | undefined;
+    onClose?: VoidFunction | undefined;
+    onBack?: VoidFunction | undefined;
+    onHeaderAction?: VoidFunction | undefined;
 }
 export declare function DefaultHeaderAction({ className, ...rest }: ButtonProps): JSX.Element;
 export default function MenuList<V, I extends string | SvgSpriteIconProps<string>, HI extends string | SvgSpriteIconProps<string>>({ header, headerIcon, onBack, onClose, items, onItemSelect, onItemMouseEnter, onItemMouseLeave, onItemFocus, onItemBlur, onItemProps, headerAction, onHeaderAction, children, className, onKeyDown, ...rest }: MenuListProps<V, I, HI>): JSX.Element;

Menu/MenuListItem.d.ts

@@ -7,12 +7,12 @@ import React, { AriaAttributes } from 'react';
 }>, Pick<React.HTMLAttributes<HTMLDivElement>, keyof React.AriaAttributes | 'tabIndex' | 'role' | Exclude<KeysOfType<React.HTMLAttributes<HTMLDivElement>, AnyFunction>, 'onSelect' | 'onSelectCapture'>>, AriaAttributes {
-    icon?: I;
+    icon?: I | undefined;
     title: React.ReactNode;
-    subtitle?: React.ReactNode;
-    shrinkTitle?: boolean;
+    subtitle?: React.ReactNode | undefined;
+    shrinkTitle?: boolean | undefined;
     value: V;
-    submenu?: boolean;
-    checked?: boolean;
-    autoFocus?: boolean | number;
-    onSelect?: (value: this['value'], event: React.UIEvent<HTMLDivElement>) => void;
+    submenu?: boolean | undefined;
+    checked?: boolean | undefined;
+    autoFocus?: boolean | number | undefined;
+    onSelect?: ((value: this['value'], event: React.UIEvent<HTMLDivElement>) => void) | undefined;
 }
 export default function MenuListItem<V, I extends string | SvgSpriteIconProps<string>>({ icon, title, subtitle, value, submenu, checked, autoFocus, shrinkTitle, className, onSelect, onClick, onKeyDown, componentRef, ...rest }: MenuListItemProps<V, I>): JSX.Element;

Modal/Header.d.ts

 import React from 'react';
 import { FlexComponentProps } from 'reflexy';
 export interface HeaderProps extends FlexComponentProps<'div'> {
-    readonly closeIcon?: boolean | React.ReactNode;
-    readonly onCloseClick?: React.MouseEventHandler<SVGSVGElement>;
+    readonly closeIcon?: boolean | React.ReactNode | undefined;
+    readonly onCloseClick?: React.MouseEventHandler<SVGSVGElement> | undefined;
 }
 export default function Header({ p, closeIcon, onCloseClick, className, children, ...rest }: React.PropsWithChildren<HeaderProps>): JSX.Element;

Modal/Modal.d.ts

@@ -10,10 +10,10 @@ import React from 'react';
 }>, OmitStrict<FlexComponentProps<typeof ReactModal>, 'isOpen' | 'overlayElement' | 'overlayRef' | 'shouldCloseOnOverlayClick' | 'overlayClassName' | 'contentElement' | 'closeTimeoutMS'> {
-    readonly backdropElement?: ReactModal.Props['overlayElement'];
-    readonly backdropRef?: ReactModal.Props['overlayRef'];
-    readonly shouldCloseOnBackdropClick?: ReactModal.Props['shouldCloseOnOverlayClick'];
-    readonly backdropClassName?: this['className'];
-    readonly backdropStyle?: this['style'];
-    readonly disableBackdrop?: boolean;
-    readonly lockBodyScroll?: boolean;
-    readonly size?: ModalSize;
+    readonly backdropElement?: ReactModal.Props['overlayElement'] | undefined;
+    readonly backdropRef?: ReactModal.Props['overlayRef'] | undefined;
+    readonly shouldCloseOnBackdropClick?: ReactModal.Props['shouldCloseOnOverlayClick'] | undefined;
+    readonly backdropClassName?: this['className'] | undefined;
+    readonly backdropStyle?: this['style'] | undefined;
+    readonly disableBackdrop?: boolean | undefined;
+    readonly lockBodyScroll?: boolean | undefined;
+    readonly size?: ModalSize | undefined;
 }
@@ -20,0 +20,0 @@ declare function Modal({ size, lockBodyScroll, bodyOpenClassName, className, style, backdropRef, backdropClassName, backdropStyle, disableBackdrop, shouldCloseOnBackdropClick, hidden, collapsable, keepChildren, appear, transitionDuration, transitionFunction, transitionProperty, hiddenClassName, onShown, onHidden, ...rest }: React.PropsWithChildren<ModalProps>): JSX.Element;

Notifications/NotificationBar.d.ts

@@ -12,9 +12,9 @@ import React from 'react';
     readonly id: TID;
-    readonly variant?: NotificationVariant;
-    readonly action?: (props: Pick<this, 'id' | 'variant' | 'onAction'>) => JSX.Element;
-    readonly onAction?: (id: TID) => void;
-    readonly contentProps?: FlexAllProps<TContent>;
-    readonly actionProps?: FlexAllProps<TAction>;
-    readonly applyClassesToTransition?: boolean;
+    readonly variant?: NotificationVariant | undefined;
+    readonly action?: ((props: Pick<this, 'id' | 'variant' | 'onAction'>) => JSX.Element) | undefined;
+    readonly onAction?: ((id: TID) => void) | undefined;
+    readonly contentProps?: FlexAllProps<TContent> | undefined;
+    readonly actionProps?: FlexAllProps<TAction> | undefined;
+    readonly applyClassesToTransition?: boolean | undefined;
 }
 export default function NotificationBar<TID extends string | number = string | number, TContent extends React.ElementType = any, TAction extends React.ElementType = any, TTransition extends TransitionComponent = TransitionComponent>({ id, variant, action: Action, onAction, className, contentProps, actionProps, children, transitionProps, applyClassesToTransition, ...rest }: React.PropsWithChildren<NotificationBarProps<TID, TContent, TAction, TTransition>>): JSX.Element;

Notifications/Notifications.d.ts

@@ -11,19 +11,19 @@ import React from 'react';
     readonly content: TContent;
-    readonly position?: NotificationPosition;
-    readonly noAction?: boolean;
-    readonly rootProps?: OmitStrict<NotificationBarProps<TID, TBarContentElement, TBarActionElement, TTransition>, 'id' | 'variant' | 'contentProps' | 'actionProps'>;
+    readonly position?: NotificationPosition | undefined;
+    readonly noAction?: boolean | undefined;
+    readonly rootProps?: OmitStrict<NotificationBarProps<TID, TBarContentElement, TBarActionElement, TTransition>, 'id' | 'variant' | 'contentProps' | 'actionProps'> | undefined;
 }
 export type NotificationsProps<C extends React.ElementType, N extends Notification<any, any, any, any, any>> = FlexAllProps<C> & {
     readonly list: readonly N[];
-    readonly defaultPosition?: NotificationPosition;
-    readonly defaultAction?: NotificationBarProps<N extends Notification<infer TID, any, any, any, any> ? TID : string | number>['action'];
-    readonly onAction?: NotificationBarProps<N extends Notification<infer TID, any, any, any, any> ? TID : string | number>['onAction'];
+    readonly defaultPosition?: NotificationPosition | undefined;
+    readonly defaultAction?: NotificationBarProps<N extends Notification<infer TID, any, any, any, any> ? TID : string | number>['action'] | undefined;
+    readonly onAction?: NotificationBarProps<N extends Notification<infer TID, any, any, any, any> ? TID : string | number>['onAction'] | undefined;
     readonly containerProps?: FlexComponentProps<'div', {
         omitProps: true;
-    }>;
+    }> | undefined;
     readonly listProps?: FlexComponentProps<'div', {
         omitProps: true;
-    }>;
+    }> | undefined;
 };
 declare const _default: React.MemoExoticComponent<(<C extends React.ElementType<any> = "div", N extends Notification<any, any, any, any, any> = Notification<string | number, string | JSX.Element, TransitionComponent, any, any>>({ list, defaultPosition, defaultAction, onAction, className, containerProps, listProps, ...rest }: NotificationsProps<C, N>) => JSX.Element | null)>;
 export default _default;

package.json

 {
   "name": "@jstoolkit/styled-components",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "description": "Styled react components powered by JSS via @material-ui/styles",
@@ -18,5 +18,2 @@ "author": "VZH",
     "build": "npm run clean && tsc --build ./tsconfig.json && npm run minify",
-    "build-to-tutoron": "tsc --project ./tsconfig.json --outDir '../../../tutoron/node_modules/@jstoolkit/styled-components'",
-    "build-to-player": "tsc --build ./tsconfig.json && npm run minify && copyfiles -e './dist/*(package.json|README.md|LICENSE)' -u 1 './dist/**/*' '../../../player/modules/styled-components'",
-    "build-to-player-utils": "tsc --build ./tsconfig.json && copyfiles -e './dist/*(package.json|README.md|LICENSE)' -u 1 './dist/**/*' '../player-utils/node_modules/@jstoolkit/styled-components'",
     "patch-publish": "yarn run build && npm version patch --no-workspaces-update -m 'v%s' && yarn run copy:configs && cd ./dist && npm publish --access public && git push origin master --follow-tags",
@@ -29,20 +26,20 @@ "minor-publish": "yarn run build && npm version minor --no-workspaces-update -m 'v%s' && yarn run copy:configs && cd ./dist && npm publish --access public && git push origin master --follow-tags"
   "devDependencies": {
-    "@jstoolkit/configs": "^3.84.7",
+    "@jstoolkit/configs": "^3.85.0",
     "@jstoolkit/react-hooks": "^1.45.0",
-    "@jstoolkit/utils": "^1.45.6",
-    "@jstoolkit/web-utils": "^1.37.1",
-    "@mui/material": "^5.11.4",
-    "@mui/styles": "^5.11.2",
-    "@types/react": "^18.0.26",
+    "@jstoolkit/utils": "^1.46.1",
+    "@jstoolkit/web-utils": "^1.40.0",
+    "@mui/material": "^5.11.7",
+    "@mui/styles": "^5.11.7",
+    "@types/react": "^18.0.27",
     "@types/react-modal": "^3.13.1",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
+    "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "@typescript-eslint/parser": "^5.50.0",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.31.0",
+    "eslint": "^8.33.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-import": "^2.27.2",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -62,10 +59,10 @@ "jss": "^10.9.2",
     "jss-plugin-vendor-prefixer": "^10.9.2",
-    "prettier": "^2.8.2",
+    "prettier": "^2.8.3",
     "react": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-outside-click-listener": "^1.5.1",
-    "reflexy": "^3.45.0",
-    "rimraf": "^3.0.2",
-    "terser": "^5.16.1",
-    "typescript": "^4.9.4",
+    "reflexy": "^3.45.1",
+    "rimraf": "^4.1.2",
+    "terser": "^5.16.2",
+    "typescript": "^4.9.5",
     "yargs": "^17.6.2"
@@ -72,0 +69,0 @@ },

Picture/Picture.d.ts

@@ -10,12 +10,12 @@ import React from 'react';
             src: string;
-            type?: string;
-            media?: string;
-        }[];
+            type?: string | undefined;
+            media?: string | undefined;
+        }[] | undefined;
     };
-    crossOrigin?: React.ImgHTMLAttributes<unknown>['crossOrigin'];
-    timeout?: number;
-    onLoadTimeout?: VoidFunction;
-    onLoadCompleted?: VoidFunction;
-    onError?: (error: unknown) => void;
+    crossOrigin?: React.ImgHTMLAttributes<unknown>['crossOrigin'] | undefined;
+    timeout?: number | undefined;
+    onLoadTimeout?: VoidFunction | undefined;
+    onLoadCompleted?: VoidFunction | undefined;
+    onError?: ((error: unknown) => void) | undefined;
 }
 export default function Picture({ hidden, src: srcProp, crossOrigin, timeout, transitionProps, onLoadTimeout, onLoadCompleted, onError, className, ...rest }: PictureProps): JSX.Element;

Poster/Poster.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import type { FlexComponentProps } from 'reflexy';
@@ -2,0 +3,0 @@ import { HideableProps } from '../TransitionFlex';

ResizeListener/ResizeListener.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 export interface Size {
@@ -6,4 +7,4 @@ width: number;
 export interface ResizeListenerProps {
-    onlyWidth?: boolean;
-    onlyHeight?: boolean;
+    onlyWidth?: boolean | undefined;
+    onlyHeight?: boolean | undefined;
     onSizeChange: (size: Size, domRect: DOMRect) => void;
@@ -10,0 +11,0 @@ }

StylesProvider/createPlugins.d.ts

@@ -32,5 +32,5 @@ import type { JssOptions } from 'jss';
 export type CreatePluginsOptions = {
-    [P in keyof PluginsFactory]?: boolean | Parameters<PluginsFactory[P]>[0];
+    [P in keyof PluginsFactory]?: boolean | Parameters<PluginsFactory[P]>[0] | undefined;
 };
 export default function createPlugins(options?: CreatePluginsOptions): JssOptions['plugins'];
 export {};

StylesProvider/StylesProvider.d.ts

@@ -0,6 +1,7 @@
+/// <reference types="react" />
 import { JssOptions } from 'jss';
 import { StylesProviderProps as MuiStylesProviderProps } from '@mui/styles/StylesProvider';
-export interface StylesProviderProps extends MuiStylesProviderProps, Partial<Pick<JssOptions, 'Renderer' | 'insertionPoint' | 'id'>> {
-    plugins?: () => JssOptions['plugins'];
+export interface StylesProviderProps extends MuiStylesProviderProps, OptionalToUndefined<Partial<Pick<JssOptions, 'Renderer' | 'insertionPoint' | 'id'>>> {
+    plugins?: (() => JssOptions['plugins']) | undefined;
 }
 export default function StylesProvider({ plugins, Renderer, insertionPoint, id, injectFirst, ...rest }: StylesProviderProps): JSX.Element;

SuspenseFallback/SuspenseFallback.d.ts

 import React from 'react';
 export interface SuspenseFallbackProps {
-    readonly delay?: number;
-    readonly onMountChanged?: (mounted: boolean) => void;
-    readonly onMount?: VoidFunction;
-    readonly onUnmount?: VoidFunction;
-    readonly element?: React.SuspenseProps['fallback'];
+    readonly delay?: number | undefined;
+    readonly onMountChanged?: ((mounted: boolean) => void) | undefined;
+    readonly onMount?: VoidFunction | undefined;
+    readonly onUnmount?: VoidFunction | undefined;
+    readonly element?: React.SuspenseProps['fallback'] | undefined;
 }
 export default function SuspenseFallback({ delay, onMountChanged, onMount, onUnmount, element, }: SuspenseFallbackProps): JSX.Element | null;

SvgSpriteIcon/SvgSpriteIcon.d.ts

@@ -10,7 +10,7 @@ import React from 'react';
     name: N;
-    size?: number | string;
-    scaleOnHover?: boolean | number;
-    useProps?: Omit<React.SVGAttributes<SVGUseElement>, 'xlinkHref'>;
-    htmlRef?: React.Ref<SVGSVGElement>;
-    componentRef?: this['htmlRef'];
+    size?: number | string | undefined;
+    scaleOnHover?: boolean | number | undefined;
+    useProps?: Omit<React.SVGAttributes<SVGUseElement>, 'xlinkHref'> | undefined;
+    htmlRef?: React.Ref<SVGSVGElement> | undefined;
+    componentRef?: this['htmlRef'] | undefined;
 }
@@ -17,0 +17,0 @@ /** Uses with svg-sprite-loader */

theme.d.ts

@@ -20,6 +20,6 @@ import type { BaseCSSProperties } from '@mui/styles/withStyles';
 export type ButtonThemeSizes = {
-    [P in ButtonSize as `size-${P}`]?: CSSProperties;
+    [P in ButtonSize as `size-${P}`]?: CSSProperties | undefined;
 };
 export type ButtonThemeVariants = {
-    [P in ButtonVariant as `variant-${P}`]?: CSSProperties;
+    [P in ButtonVariant as `variant-${P}`]?: CSSProperties | undefined;
 };
@@ -29,179 +29,179 @@ export interface Theme {
         colors?: {
-            error?: string;
-        };
+            error?: string | undefined;
+        } | undefined;
         Badge?: {
-            BadgeIcon?: CSSProperties;
-        };
-        Divider?: CSSProperties & {
-            light?: CSSProperties;
-        };
+            BadgeIcon?: CSSProperties | undefined;
+        } | undefined;
+        Divider?: (CSSProperties & {
+            light?: CSSProperties | undefined;
+        }) | undefined;
         DropDown?: {
-            root?: CSSProperties;
-        };
+            root?: CSSProperties | undefined;
+        } | undefined;
         DropDownLabel?: {
-            root?: CSSProperties;
-        };
+            root?: CSSProperties | undefined;
+        } | undefined;
         DropDownBox?: {
-            root?: CSSProperties;
-        };
-        Modal?: {
-            root?: CSSProperties;
-            backdrop?: CSSProperties;
-            Header?: CSSProperties & {
-                closeIcon?: CSSProperties;
-            };
-            Body?: CSSProperties;
-            Footer?: CSSProperties;
+            root?: CSSProperties | undefined;
+        } | undefined;
+        Modal?: ({
+            root?: CSSProperties | undefined;
+            backdrop?: CSSProperties | undefined;
+            Header?: (CSSProperties & {
+                closeIcon?: CSSProperties | undefined;
+            }) | undefined;
+            Body?: CSSProperties | undefined;
+            Footer?: CSSProperties | undefined;
         } & {
-            [P in NonNullable<ModalProps['size']> as `size-${P}`]?: CSSProperties;
-        };
+            [P in NonNullable<ModalProps['size']> as `size-${P}`]?: CSSProperties | undefined;
+        }) | undefined;
         LoadableFlex?: {
-            root?: CSSProperties;
-            backdrop?: CSSProperties;
-            spinner?: CSSProperties;
-            spinnerSizeAuto?: CSSProperties;
-            spinnerSizeXS?: CSSProperties;
-            spinnerSizeS?: CSSProperties;
-            spinnerSizeM?: CSSProperties;
-            spinnerSizeL?: CSSProperties;
-            spinnerSizeXL?: CSSProperties;
-            spinnerPositionCenter?: CSSProperties;
-            spinnerPositionTop?: CSSProperties;
-            spinnerPositionBottom?: CSSProperties;
-            spinnerPositionLeft?: CSSProperties;
-            spinnerPositionRight?: CSSProperties;
-            ring?: CSSProperties;
+            root?: CSSProperties | undefined;
+            backdrop?: CSSProperties | undefined;
+            spinner?: CSSProperties | undefined;
+            spinnerSizeAuto?: CSSProperties | undefined;
+            spinnerSizeXS?: CSSProperties | undefined;
+            spinnerSizeS?: CSSProperties | undefined;
+            spinnerSizeM?: CSSProperties | undefined;
+            spinnerSizeL?: CSSProperties | undefined;
+            spinnerSizeXL?: CSSProperties | undefined;
+            spinnerPositionCenter?: CSSProperties | undefined;
+            spinnerPositionTop?: CSSProperties | undefined;
+            spinnerPositionBottom?: CSSProperties | undefined;
+            spinnerPositionLeft?: CSSProperties | undefined;
+            spinnerPositionRight?: CSSProperties | undefined;
+            ring?: CSSProperties | undefined;
         };
-        Button?: ButtonThemeSizes & ButtonThemeVariants & {
-            root?: CSSProperties;
+        Button?: (ButtonThemeSizes & ButtonThemeVariants & {
+            root?: CSSProperties | undefined;
         } & {
             [P in ButtonColor]?: {
-                [K in ButtonVariant]?: CSSProperties;
-            };
-        };
+                [K in ButtonVariant]?: CSSProperties | undefined;
+            } | undefined;
+        }) | undefined;
         LoadableButton?: {
-            root?: CSSProperties;
-            spinner?: CSSProperties;
-        };
+            root?: CSSProperties | undefined;
+            spinner?: CSSProperties | undefined;
+        } | undefined;
         Checkbox?: {
-            root?: CSSProperties;
-            shape?: CSSProperties;
-            disabled?: CSSProperties;
+            root?: CSSProperties | undefined;
+            shape?: CSSProperties | undefined;
+            disabled?: CSSProperties | undefined;
             colors?: {
-                hover?: string;
-                checked?: string;
-                unchecked?: string;
-                empty?: string;
-            };
+                hover?: string | undefined;
+                checked?: string | undefined;
+                unchecked?: string | undefined;
+                empty?: string | undefined;
+            } | undefined;
             checkbox?: {
-                root?: CSSProperties;
-                shape?: CSSProperties;
+                root?: CSSProperties | undefined;
+                shape?: CSSProperties | undefined;
                 checked?: {
-                    root?: CSSProperties;
-                    shape?: CSSProperties;
-                };
-            };
+                    root?: CSSProperties | undefined;
+                    shape?: CSSProperties | undefined;
+                } | undefined;
+            } | undefined;
             radio?: {
-                root?: CSSProperties;
-                shape?: CSSProperties;
+                root?: CSSProperties | undefined;
+                shape?: CSSProperties | undefined;
                 checked?: {
-                    root?: CSSProperties;
-                    shape?: CSSProperties;
-                };
-            };
+                    root?: CSSProperties | undefined;
+                    shape?: CSSProperties | undefined;
+                } | undefined;
+            } | undefined;
             switch?: {
-                root?: CSSProperties;
-                shape?: CSSProperties;
+                root?: CSSProperties | undefined;
+                shape?: CSSProperties | undefined;
                 checked?: {
-                    root?: CSSProperties;
-                    shape?: CSSProperties;
-                };
-                duration?: string;
-                indent?: string;
+                    root?: CSSProperties | undefined;
+                    shape?: CSSProperties | undefined;
+                } | undefined;
+                duration?: string | undefined;
+                indent?: string | undefined;
             };
         };
         Avatar?: {
-            defaultSize?: number | string;
-            root?: CSSProperties;
-            noImg?: CSSProperties;
-            img?: CSSProperties;
-            fallbackImg?: CSSProperties;
-        };
+            defaultSize?: number | string | undefined;
+            root?: CSSProperties | undefined;
+            noImg?: CSSProperties | undefined;
+            img?: CSSProperties | undefined;
+            fallbackImg?: CSSProperties | undefined;
+        } | undefined;
         HighlightedText?: {
-            root?: CSSProperties;
+            root?: CSSProperties | undefined;
         };
         TruncatedText?: {
-            root?: CSSProperties;
-            multiline?: CSSProperties;
-        };
-        Field?: {
-            root?: CSSProperties;
-            label?: CSSProperties;
-            controls?: CSSProperties;
-            helperText?: CSSProperties;
+            root?: CSSProperties | undefined;
+            multiline?: CSSProperties | undefined;
+        } | undefined;
+        Field?: ({
+            root?: CSSProperties | undefined;
+            label?: CSSProperties | undefined;
+            controls?: CSSProperties | undefined;
+            helperText?: CSSProperties | undefined;
         } & {
-            [P in FieldState]?: Pick<NonNullable<NonNullable<Theme['rc']>['Field']>, 'root' | 'label' | 'controls' | 'helperText'>;
+            [P in FieldState]?: Pick<NonNullable<NonNullable<Theme['rc']>['Field']>, 'root' | 'label' | 'controls' | 'helperText'> | undefined;
         } & {
-            [P in 'row' | 'column']?: Pick<NonNullable<NonNullable<Theme['rc']>['Field']>, 'root' | 'label' | 'controls' | 'helperText'>;
-        };
-        InputGroup?: {
-            root?: CSSProperties;
-            input?: CSSProperties;
-            errorIcon?: CSSProperties & {
+            [P in 'row' | 'column']?: Pick<NonNullable<NonNullable<Theme['rc']>['Field']>, 'root' | 'label' | 'controls' | 'helperText'> | undefined;
+        }) | undefined;
+        InputGroup?: ({
+            root?: CSSProperties | undefined;
+            input?: CSSProperties | undefined;
+            errorIcon?: (CSSProperties & {
                 size: 'string';
                 indent: 'string';
-            };
+            }) | undefined;
             error?: {
-                root?: CSSProperties;
-                input?: CSSProperties;
-            };
-            DropDownLabel?: CSSProperties;
-            DropDownBox?: CSSProperties;
+                root?: CSSProperties | undefined;
+                input?: CSSProperties | undefined;
+            } | undefined;
+            DropDownLabel?: CSSProperties | undefined;
+            DropDownBox?: CSSProperties | undefined;
         } & {
-            [P in FieldState]?: Pick<NonNullable<NonNullable<Theme['rc']>['InputGroup']>, 'root' | 'input' | 'DropDownLabel' | 'DropDownBox'>;
-        };
+            [P in FieldState]?: Pick<NonNullable<NonNullable<Theme['rc']>['InputGroup']>, 'root' | 'input' | 'DropDownLabel' | 'DropDownBox'> | undefined;
+        }) | undefined;
         VideoWatermark?: {
-            default?: CSSProperties;
-            stripes?: CSSProperties & {
+            default?: CSSProperties | undefined;
+            stripes?: (CSSProperties & {
                 field?: {
                     patternTransform?: string;
                 };
-            };
-            random?: CSSProperties & {
+            }) | undefined;
+            random?: (CSSProperties & {
                 field?: {
                     transitionDuration?: number;
                 };
-            };
-        };
+            }) | undefined;
+        } | undefined;
         SvgSpriteIcon?: {
-            spriteId?: string;
-            defaultSize?: number | string;
-        };
+            spriteId?: string | undefined;
+            defaultSize?: number | string | undefined;
+        } | undefined;
         MenuList?: {
-            root?: CSSProperties;
+            root?: CSSProperties | undefined;
             header?: {
-                root?: CSSProperties;
-                flex?: FlexOnlyProps;
-                backIcon?: Pick<SvgSpriteIconProps<string>, 'name' | 'size'>;
-                closeIcon?: Pick<SvgSpriteIconProps<string>, 'name' | 'size'>;
+                root?: CSSProperties | undefined;
+                flex?: FlexOnlyProps | undefined;
+                backIcon?: Pick<SvgSpriteIconProps<string>, 'name' | 'size'> | undefined;
+                closeIcon?: Pick<SvgSpriteIconProps<string>, 'name' | 'size'> | undefined;
                 title?: {
-                    root?: CSSProperties;
+                    root?: CSSProperties | undefined;
                     flex?: FlexOnlyProps | ((options: {
                         hasIcon: boolean;
-                    }) => FlexOnlyProps);
-                };
+                    }) => FlexOnlyProps) | undefined;
+                } | undefined;
                 action?: {
-                    root?: CSSProperties;
-                    flex?: FlexOnlyProps;
-                };
-            };
+                    root?: CSSProperties | undefined;
+                    flex?: FlexOnlyProps | undefined;
+                } | undefined;
+            } | undefined;
             list?: {
                 flex?: FlexOnlyProps | ((options: {
                     hasHeader: boolean;
-                }) => FlexOnlyProps);
-            };
+                }) => FlexOnlyProps) | undefined;
+            } | undefined;
         };
         MenuListItem?: {
-            root?: CSSProperties;
-            hover?: CSSProperties;
+            root?: CSSProperties | undefined;
+            hover?: CSSProperties | undefined;
             flex?: FlexOnlyProps | ((options: {
@@ -211,5 +211,5 @@ hasIcon: boolean;
                 checked: boolean;
-            }) => FlexOnlyProps);
+            }) => FlexOnlyProps) | undefined;
             title?: {
-                root?: CSSProperties;
+                root?: CSSProperties | undefined;
                 flex?: FlexOnlyProps | ((options: {
@@ -219,6 +219,6 @@ hasIcon: boolean;
                     checked: boolean;
-                } & Pick<MenuListItemProps<string, string>, 'shrinkTitle'>) => FlexOnlyProps);
-            };
+                } & Pick<MenuListItemProps<string, string>, 'shrinkTitle'>) => FlexOnlyProps) | undefined;
+            } | undefined;
             subtitle?: {
-                root?: CSSProperties;
+                root?: CSSProperties | undefined;
                 flex?: FlexOnlyProps | ((options: {
@@ -228,30 +228,30 @@ hasIcon: boolean;
                     checked: boolean;
-                } & Pick<MenuListItemProps<string, string>, 'shrinkTitle'>) => FlexOnlyProps);
-            };
-            checkIcon?: Pick<SvgSpriteIconProps<string>, 'name' | 'size'> & SpaceProps;
-            submenuIcon?: Pick<SvgSpriteIconProps<string>, 'name' | 'size'> & SpaceProps;
+                } & Pick<MenuListItemProps<string, string>, 'shrinkTitle'>) => FlexOnlyProps) | undefined;
+            } | undefined;
+            checkIcon?: (Pick<SvgSpriteIconProps<string>, 'name' | 'size'> & SpaceProps) | undefined;
+            submenuIcon?: (Pick<SvgSpriteIconProps<string>, 'name' | 'size'> & SpaceProps) | undefined;
         };
         Tooltip?: {
-            style?: CSSProperties;
-            title?: CSSProperties;
-            text?: CSSProperties;
-            arrowColor?: string;
-            space?: SpaceProps;
-            innerSpace?: SpaceProps;
-        };
-        Notifications?: {
-            root?: CSSProperties;
-            item?: CSSProperties;
-            itemSpace?: CSSProperties;
+            style?: CSSProperties | undefined;
+            title?: CSSProperties | undefined;
+            text?: CSSProperties | undefined;
+            arrowColor?: string | undefined;
+            space?: SpaceProps | undefined;
+            innerSpace?: SpaceProps | undefined;
+        } | undefined;
+        Notifications?: ({
+            root?: CSSProperties | undefined;
+            item?: CSSProperties | undefined;
+            itemSpace?: CSSProperties | undefined;
         } & {
-            [P in NotificationPosition]?: CSSProperties;
-        };
-        NotificationBar?: {
-            root?: CSSProperties;
-            content?: CSSProperties;
-            action?: CSSProperties;
+            [P in NotificationPosition]?: CSSProperties | undefined;
+        }) | undefined;
+        NotificationBar?: ({
+            root?: CSSProperties | undefined;
+            content?: CSSProperties | undefined;
+            action?: CSSProperties | undefined;
         } & {
-            [P in NotificationVariant]?: CSSProperties;
-        };
+            [P in NotificationVariant]?: CSSProperties | undefined;
+        }) | undefined;
     };
 }

Tooltip/Tooltip.d.ts

@@ -5,3 +5,3 @@ import React from 'react';
 export declare const useStyles: (props?: {
-    classes?: Partial<import("@mui/styles/withStyles").ClassNameMap<"style" | "title" | "text" | "root" | "container" | "rowContainer" | "arrow">> | undefined;
+    classes?: OptionalToUndefined<Partial<import("@mui/styles/withStyles").ClassNameMap<"style" | "title" | "text" | "root" | "container" | "rowContainer" | "arrow">>> | undefined;
 } | undefined) => import("@mui/styles/withStyles").ClassNameMap<"style" | "title" | "text" | "root" | "container" | "rowContainer" | "arrow">;
@@ -12,6 +12,6 @@ type TooltipAlignX = 'left' | 'middle' | 'right';
     readonly target: HTMLElement;
-    readonly preview?: React.ReactElement | React.CSSProperties;
-    readonly title?: React.ReactNode;
+    readonly preview?: React.ReactElement | React.CSSProperties | undefined;
+    readonly title?: React.ReactNode | undefined;
     readonly text: React.ReactNode;
-    readonly arrow?: boolean;
+    readonly arrow?: boolean | undefined;
     readonly x: number;
@@ -21,10 +21,10 @@ readonly y: number;
     readonly alignY: TooltipAlignY;
-    readonly minX?: number;
-    readonly maxX?: number;
-    readonly minY?: number;
-    readonly maxY?: number;
-    readonly maxWidth?: number;
-    readonly space?: SpaceProps;
-    readonly innerSpace?: SpaceProps;
-    readonly sequence?: boolean;
+    readonly minX?: number | undefined;
+    readonly maxX?: number | undefined;
+    readonly minY?: number | undefined;
+    readonly maxY?: number | undefined;
+    readonly maxWidth?: number | undefined;
+    readonly space?: SpaceProps | undefined;
+    readonly innerSpace?: SpaceProps | undefined;
+    readonly sequence?: boolean | undefined;
 }
@@ -31,0 +31,0 @@ export interface TooltipProps extends FlexSimpleProps, Pick<TransitionFlexProps, 'onShown' | 'onHidden'> {

Tooltip/utils.d.ts

 import type React from 'react';
 import type { TooltipData } from './Tooltip';
-export declare function calcX(x: number, alignX: TooltipData['alignX'], contentWidth: number, minX?: number, maxX?: number): number;
-export declare function calcY(y: number, alignY: TooltipData['alignY'], contentHeight: number, minY?: number, maxY?: number): number;
+export declare function calcX(x: number, alignX: TooltipData['alignX'], contentWidth: number, minX?: number | undefined, maxX?: number | undefined): number;
+export declare function calcY(y: number, alignY: TooltipData['alignY'], contentHeight: number, minY?: number | undefined, maxY?: number | undefined): number;
 export declare function calcXInside(x: number, width: number, min: number, max: number): number;
 export declare function calcArrowCss(alignX: TooltipData['alignX'], alignY: TooltipData['alignY'], color: NonNullable<React.CSSProperties['color']>, size: string): React.CSSProperties | undefined;

TooltipButton/TooltipButton.d.ts

@@ -6,16 +6,16 @@ import React from 'react';
     readonly title: string;
-    readonly data?: D;
+    readonly data?: D | undefined;
 }
 export interface TooltipButtonTooltipProps<D = never> {
-    readonly tooltip?: TooltipData['title'];
-    readonly tooltipDelay?: number;
-    readonly onShowTooltip?: (tooltip: TooltipData<D>) => void;
-    readonly onHideTooltip?: (target: TooltipData['target']) => void;
+    readonly tooltip?: TooltipData['title'] | undefined;
+    readonly tooltipDelay?: number | undefined;
+    readonly onShowTooltip?: ((tooltip: TooltipData<D>) => void) | undefined;
+    readonly onHideTooltip?: ((target: TooltipData['target']) => void) | undefined;
 }
 type WithData<D = never> = Exclude<D, undefined> extends never ? {
-    readonly data?: D;
+    readonly data?: D | undefined;
 } : unknown extends D ? {
-    readonly data?: D;
+    readonly data?: D | undefined;
 } : IfExtends<D, undefined, {
-    readonly data?: D;
+    readonly data?: D | undefined;
 }, {
@@ -25,5 +25,5 @@ readonly data: D;
 export type TooltipButtonProps<C extends React.ElementType = 'button', D = never> = Omit<ButtonProps<C>, 'onClick'> & TooltipButtonTooltipProps<D> & WithData<D> & {
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>, data: D) => void;
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement>, data: D) => void) | undefined;
 };
 export default function TooltipButton<C extends React.ElementType = 'button', D = never>({ tooltip, tooltipDelay, data, onShowTooltip, onHideTooltip, ...restProps }: TooltipButtonProps<C, D>): JSX.Element;
 export {};

Transition/Transition.d.ts

@@ -9,7 +9,7 @@ import React from 'react';
     children: React.ReactElement<{
-        style?: React.CSSProperties;
+        style?: React.CSSProperties | undefined;
     }, any>;
-    styles?: Partial<Record<TransitionStatus, React.CSSProperties>>;
+    styles?: Partial<Record<TransitionStatus, React.CSSProperties>> | undefined;
 }
 declare const _default: <E extends HTMLElement>(props: TransitionProps & React.RefAttributes<E>) => JSX.Element;
 export default _default;

TransitionFlex/TransitionFlex.d.ts

@@ -8,12 +8,12 @@ import React from 'react';
 export interface HideableProps<T extends TransitionComponent = TransitionComponent> {
-    readonly hidden?: boolean;
-    readonly appear?: boolean;
-    readonly disposable?: boolean;
-    readonly keepChildren?: boolean;
-    readonly hiddenClassName?: string;
-    readonly onHidden?: VoidFunction;
-    readonly onShown?: VoidFunction;
-    readonly transition?: T;
-    readonly transitionProps?: OmitStrict<React.ComponentProps<T>, 'children'>;
-    readonly transitionDuration?: TransitionProps['timeout'];
+    readonly hidden?: boolean | undefined;
+    readonly appear?: boolean | undefined;
+    readonly disposable?: boolean | undefined;
+    readonly keepChildren?: boolean | undefined;
+    readonly hiddenClassName?: string | undefined;
+    readonly onHidden?: VoidFunction | undefined;
+    readonly onShown?: VoidFunction | undefined;
+    readonly transition?: T | undefined;
+    readonly transitionProps?: OmitStrict<React.ComponentProps<T>, 'children'> | undefined;
+    readonly transitionDuration?: TransitionProps['timeout'] | undefined;
 }
@@ -20,0 +20,0 @@ export type TransitionFlexProps<T extends TransitionComponent = TransitionComponent, C extends React.ElementType = DefaultComponentType> = FlexAllProps<C, {

TruncatedText/TruncatedText.d.ts

 import React from 'react';
 import { FlexAllProps } from 'reflexy';
 export type TruncatedTextProps<C extends React.ElementType = 'span'> = FlexAllProps<C> & {
-    lines?: number;
+    readonly lines?: number | undefined;
 };
 export default function TruncatedText<C extends React.ElementType = 'span'>({ component, lines, className, ...rest }: TruncatedTextProps<C>): JSX.Element;

types/index.d.ts

 declare module '@mui/styles/makeStyles' {
     import type { ClassNameMap, Styles, WithStylesOptions } from '@mui/styles/withStyles';
     import type { DefaultTheme } from '@mui/styles/defaultTheme';
-    export default function makeStyles<Theme = DefaultTheme, Props extends object = {}, ClassKey extends string = string>(styles: Styles<Theme, Props, ClassKey>, options?: Omit<WithStylesOptions<Theme>, 'withTheme'>): keyof Props extends never ? (props?: {
-        classes?: Partial<ClassNameMap<ClassKey>>;
-    }) => ClassNameMap<ClassKey> : (props: Props & {
-        classes?: Partial<ClassNameMap<ClassKey>>;
+    export default function makeStyles<Theme = DefaultTheme, Props extends object = {}, ClassKey extends string = string>(styles: Styles<Theme, Props, ClassKey>, options?: Omit<WithStylesOptions<Theme>, 'withTheme'> | undefined): keyof Props extends never ? (props?: {
+        classes?: OptionalToUndefined<Partial<ClassNameMap<ClassKey>>> | undefined;
+    } | undefined) => ClassNameMap<ClassKey> : (props: Props & {
+        classes?: OptionalToUndefined<Partial<ClassNameMap<ClassKey>>> | undefined;
     }) => ClassNameMap<ClassKey>;
 }

types/refs.d.ts

@@ -0,1 +1,2 @@
+import '@jstoolkit/utils/types';
 import '@jstoolkit/web-utils/types';

types/refs.js

@@ -1,1 +0,1 @@
-import"@jstoolkit/web-utils/types";
+import"@jstoolkit/utils/types";import"@jstoolkit/web-utils/types";

VideoWatermark/getRandomShowController.d.ts

 import { ShowController, ShowControllerOptions } from './getShowController';
 export interface RandomShowControllerOptions {
-    readonly updateTimeout?: number;
+    readonly updateTimeout?: number | undefined;
     readonly getBounds: () => Point;
     readonly onUpdate: (coord: Point) => void;
-    readonly showOptions?: ShowControllerOptions;
+    readonly showOptions?: ShowControllerOptions | undefined;
 }
@@ -8,0 +8,0 @@ export interface RandomShowController extends ShowController {

VideoWatermark/VideoWatermark.d.ts

@@ -6,8 +6,8 @@ import React from 'react';
     text: string;
-    baseFontSize?: number;
-    scaleBySize?: number;
-    visibleTimeout?: number;
-    hiddenTimeout?: number;
+    baseFontSize?: number | undefined;
+    scaleBySize?: number | undefined;
+    visibleTimeout?: number | undefined;
+    hiddenTimeout?: number | undefined;
     /** Used with random mode. */
-    updateTimeout?: number;
+    updateTimeout?: number | undefined;
 } & ({
@@ -17,6 +17,6 @@ mode: 'random';
 } | {
-    mode?: 'stripes';
-    videoRef?: React.RefObject<HTMLVideoElement>;
+    mode?: 'stripes' | undefined;
+    videoRef?: React.RefObject<HTMLVideoElement> | undefined;
 });
 declare const _default: React.NamedExoticComponent<VideoWatermarkProps>;
 export default _default;

No alert changes

Improved metrics

Total package byte prevSize

185210

increased by2.1%

Lines of code

1094

increased by0.27%

Worsened metrics

Number of package files

213

decreased by-0.93%

No dependency changes