@jstoolkit/styled-components - npm Package Compare versions

Comparing version 1.12.0 to 1.12.1

Button/Button.d.ts

@@ -10,5 +10,5 @@ import React from 'react';
 }
-export declare type ButtonSize = GetOverridedKeys<'contain' | 'xs' | 's' | 'm' | 'l' | 'xl', ButtonSizes>;
-export declare type ButtonColor = GetOverridedKeys<'none' | 'default' | 'primary' | 'secondary', ButtonColors>;
-export declare type ButtonVariant = GetOverridedKeys<'outlined' | 'filled' | 'text', ButtonVariants>;
+export type ButtonSize = GetOverridedKeys<'contain' | 'xs' | 's' | 'm' | 'l' | 'xl', ButtonSizes>;
+export type ButtonColor = GetOverridedKeys<'none' | 'default' | 'primary' | 'secondary', ButtonColors>;
+export type ButtonVariant = GetOverridedKeys<'outlined' | 'filled' | 'text', ButtonVariants>;
 export interface ButtonStyleProps {
@@ -19,3 +19,3 @@ size?: ButtonSize;
 }
-export declare type ButtonProps<C extends React.ElementType = 'button'> = FlexAllProps<C> & ButtonStyleProps;
+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';
-declare type MakeStylesProps = Pick<ButtonProps, 'variant'>;
+type MakeStylesProps = Pick<ButtonProps, 'variant'>;
 declare const useStyles: (props: MakeStylesProps & {
@@ -4,0 +4,0 @@ 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;

Checkbox/Checkbox.d.ts

 import React from 'react';
 import { FlexComponentProps } from 'reflexy/styled';
-export declare type CheckboxType = 'checkbox' | 'radio' | 'switch';
+export type CheckboxType = 'checkbox' | 'radio' | 'switch';
 export interface CheckboxProps<V = unknown> extends Omit<FlexComponentProps<'div'>, 'onChange'> {
@@ -5,0 +5,0 @@ type?: CheckboxType;

Divider/Divider.d.ts

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

DropDown/DropDownBox/DropDownBox.d.ts

 import React from 'react';
 import { FlexComponentProps } from 'reflexy/styled';
 /** Map of html tags and their selector */
-export declare type HtmlTagSelectorMap = {
+export type HtmlTagSelectorMap = {
     [P in keyof JSX.IntrinsicElements]?: string | undefined;
@@ -6,0 +6,0 @@ };

DropDown/DropDownLabel/DropDownLabel.d.ts

 import React from 'react';
 import { FlexAllProps, DefaultComponentType } from 'reflexy/styled';
-export declare type DropDownLabelProps<C extends React.ElementType = DefaultComponentType> = React.PropsWithChildren<{
+export type DropDownLabelProps<C extends React.ElementType = DefaultComponentType> = React.PropsWithChildren<{
     toggleOnClick?: boolean;
@@ -5,0 +5,0 @@ expandedClassName?: string;

ErrorBoundary/DefaultRenderer/DefaultRenderer.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import { FlexComponentProps } from 'reflexy/styled';
@@ -3,0 +2,0 @@ export interface DefaultRendererProps extends FlexComponentProps {

Field/Field.d.ts

@@ -6,4 +6,4 @@ import React from 'react';
 }
-export declare type FieldState = GetOverridedKeys<'default' | 'error' | 'warn' | 'info', FieldStates>;
-declare type FlexContent<T extends React.ElementType> = FlexComponentProps<T> & {
+export type FieldState = GetOverridedKeys<'default' | 'error' | 'warn' | 'info', FieldStates>;
+type FlexContent<T extends React.ElementType> = FlexComponentProps<T> & {
     content?: React.ReactNode;
@@ -10,0 +10,0 @@ };

HideableFlex/HideableFlex.d.ts

@@ -23,3 +23,3 @@ import React from 'react';
 }
-export declare type HideableFlexProps<C extends React.ElementType = DefaultComponentType> = FlexAllProps<C, {
+export type HideableFlexProps<C extends React.ElementType = DefaultComponentType> = FlexAllProps<C, {
     inferStyleProps: {
@@ -29,5 +29,5 @@ style: true;
 }> & HideableProps;
-declare type MakeStylesProps = Pick<HideableFlexProps, 'hidden' | 'collapsable'> & RequiredBut<Transition, 'property'>;
+type MakeStylesProps = Pick<HideableFlexProps, 'hidden' | 'collapsable'> & RequiredBut<Transition, 'property'>;
 export declare function getTransition({ hidden, collapsable, duration, func, property: prop, }: MakeStylesProps): string;
 export default function HideableFlex<C extends React.ElementType = DefaultComponentType>({ hidden: hiddenProp, disposable, collapsable, keepChildren, appear, className, hiddenClassName, transitionDuration, transitionFunction, transitionProperty, transition: { duration, func, property, }, onHidden, onShown, ...rest }: HideableFlexProps<C>): JSX.Element | null;
 export {};

HighlightedText/HighlightedText.d.ts

 import React from 'react';
 import { FlexAllProps } from 'reflexy';
-export declare type HighlightedTextProps<C extends React.ElementType = 'span'> = {
+export type HighlightedTextProps<C extends React.ElementType = 'span'> = {
     ignoreCase?: boolean;
@@ -5,0 +5,0 @@ children?: string | string[];

LoadableButton/LoadableButton.d.ts

 import React from 'react';
 import { LoadableFlexProps, SpinnerPosition as LoadableSpinnerPosition } from '../LoadableFlex';
 import { ButtonProps } from '../Button';
-export declare type SpinnerPosition = Extract<LoadableSpinnerPosition, 'right' | 'left' | 'center'>;
-export declare type LoadableButtonProps<C extends React.ElementType = 'button'> = Omit<LoadableFlexProps<any>, 'size' | 'color' | 'variant' | 'spinnerPosition' | 'spinnerSize'> & ButtonProps<C> & {
+export type SpinnerPosition = Extract<LoadableSpinnerPosition, 'right' | 'left' | 'center'>;
+export type LoadableButtonProps<C extends React.ElementType = 'button'> = Omit<LoadableFlexProps<any>, 'size' | 'color' | 'variant' | 'spinnerPosition' | 'spinnerSize'> & ButtonProps<C> & {
     spinnerPosition?: SpinnerPosition;
 };
 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';
-declare type MakeStylesProps = Pick<LoadableButtonProps, 'loading' | 'spinnerPosition'>;
+type MakeStylesProps = Pick<LoadableButtonProps, 'loading' | 'spinnerPosition'>;
 declare const useStyles: (props: MakeStylesProps & {
@@ -4,0 +4,0 @@ classes?: Partial<import("@mui/styles/withStyles").ClassNameMap<"root" | "spinner">> | undefined;

LoadableFlex/LoadableFlex.d.ts

 import React from 'react';
 import { FlexAllProps, DefaultComponentType } from 'reflexy/styled';
-export declare type SpinnerPosition = 'top' | 'right' | 'left' | 'bottom' | 'center';
-export declare type SpinnerSize = 'auto' | 'xs' | 's' | 'm' | 'l' | 'xl';
+export type SpinnerPosition = 'top' | 'right' | 'left' | 'bottom' | 'center';
+export type SpinnerSize = 'auto' | 'xs' | 's' | 'm' | 'l' | 'xl';
 interface LoadableStyleProps {
@@ -16,3 +16,3 @@ loading?: boolean;
 }
-export declare type LoadableFlexProps<C extends React.ElementType = DefaultComponentType> = React.PropsWithChildren<FlexAllProps<C> & LoadableStyleProps & {
+export type LoadableFlexProps<C extends React.ElementType = DefaultComponentType> = React.PropsWithChildren<FlexAllProps<C> & LoadableStyleProps & {
     spinner?: boolean | React.ReactElement;
@@ -19,0 +19,0 @@ spinnerClassName?: string;

Menu/MenuList.d.ts

@@ -6,3 +6,3 @@ import React from 'react';
 import { MenuListItemProps } from './MenuListItem';
-export declare type MenuItem<V, I extends string | SvgSpriteIconProps<string>> = Omit<MenuListItemProps<V, I>, 'onClick'> & React.Attributes;
+export type MenuItem<V, I extends string | SvgSpriteIconProps<string>> = Omit<MenuListItemProps<V, I>, 'onClick'> & React.Attributes;
 export interface MenuListProps<V, I extends string | SvgSpriteIconProps<string>, HI extends string | SvgSpriteIconProps<string>> extends FlexComponentProps<'div'> {
@@ -9,0 +9,0 @@ header?: React.ReactChild;

Menu/MenuListItem.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React,{useEffect,useRef}from"react";import makeStyles from"@mui/styles/makeStyles";import useTheme from"@mui/styles/useTheme";import{Flex}from"reflexy";import noop from"@jstoolkit/utils/noop";import preventDefault from"@jstoolkit/web-utils/preventDefault";import stopPropagation from"@jstoolkit/web-utils/stopPropagation";import useRefCallback from"@jstoolkit/react-hooks/useRefCallback";import useRefs from"@jstoolkit/react-hooks/useRefs";import TruncatedText from"../TruncatedText";import SvgSpriteIcon from"../SvgSpriteIcon";const useStyles=makeStyles((({rc:e})=>{var t,o,l,i,n;return{root:Object.assign({cursor:({clickable:e})=>e?"pointer":""},null===(t=null==e?void 0:e.MenuListItem)||void 0===t?void 0:t.root),title:Object.assign({},null===(l=null===(o=null==e?void 0:e.MenuListItem)||void 0===o?void 0:o.title)||void 0===l?void 0:l.root),subtitle:Object.assign({},null===(n=null===(i=null==e?void 0:e.MenuListItem)||void 0===i?void 0:i.subtitle)||void 0===n?void 0:n.root)}}));export default function MenuListItem(e){var t,o,l,i,{icon:n,title:s,subtitle:c,value:u,submenu:r=!1,checked:a=!1,autoFocus:m,shrinkTitle:f=!c&&!(!a&&!r)||!c&&!a&&!r,className:p,onSelect:d,onClick:v,onKeyDown:b,componentRef:k}=e,h=__rest(e,["icon","title","subtitle","value","submenu","checked","autoFocus","shrinkTitle","className","onSelect","onClick","onKeyDown","componentRef"]);const g=useStyles({classes:{root:p},clickable:!!d}),{rc:x}=useTheme(),R=useRefCallback((e=>{v&&v(e),d&&(stopPropagation(e),d(u,e))})),S=useRefCallback((e=>{b&&b(e),!d||"Enter"!==e.code&&"Space"!==e.code&&"ArrowRight"!==e.code||(preventDefault(e),stopPropagation(e),("ArrowRight"!==e.code||r)&&d(u,e))})),y=useRef(null),T=useRefs(y,k);useEffect((()=>{const{current:e}=y;if(!e||!m)return noop;if(!0===m)return e.focus(),noop;const t=setTimeout((()=>e.focus()),m);return()=>{clearTimeout(t)}}),[m]);const I=null==x?void 0:x.MenuListItem,j="string"==typeof n?{name:n,size:"1.5em"}:n,E="function"==typeof(null==I?void 0:I.flex)?I.flex({hasIcon:!!j,submenu:r,checked:a}):null==I?void 0:I.flex,O="function"==typeof(null===(t=null==I?void 0:I.title)||void 0===t?void 0:t.flex)?I.title.flex({hasIcon:!!j,shrinkTitle:f,submenu:r,checked:a}):null===(o=null==I?void 0:I.title)||void 0===o?void 0:o.flex,w="function"==typeof(null===(l=null==I?void 0:I.subtitle)||void 0===l?void 0:l.flex)?I.subtitle.flex({hasIcon:!!j,shrinkTitle:f,submenu:r,checked:a}):null===(i=null==I?void 0:I.subtitle)||void 0===i?void 0:i.flex,C=a?null==I?void 0:I.checkIcon:void 0,D=r?null==I?void 0:I.submenuIcon:void 0;return React.createElement(Flex,Object.assign({"aria-haspopup":r||void 0,role:"menuitem",componentRef:T,px:!0,py:j?.375:.625,alignItems:"center"},E,{className:g.root,onClick:R,onKeyDown:S},h),!!j&&React.createElement(SvgSpriteIcon,Object.assign({},j)),s&&"object"!=typeof s?React.createElement(TruncatedText,Object.assign({ml:j?"xs":void 0,grow:!0,shrink:f},O,{className:g.title}),s):s,!!c&&React.createElement(TruncatedText,Object.assign({ml:!0,shrink:!f},w,{className:g.subtitle}),c),!!C&&React.createElement(Flex,Object.assign({ml:!0,shrink:0,component:SvgSpriteIcon,size:"0.75em"},C)),!!D&&React.createElement(Flex,Object.assign({ml:!0,shrink:0,component:SvgSpriteIcon,size:"0.6em"},D)))}
+import{__rest}from"tslib";import React,{useEffect,useRef}from"react";import makeStyles from"@mui/styles/makeStyles";import useTheme from"@mui/styles/useTheme";import{Flex}from"reflexy";import noop from"@jstoolkit/utils/noop";import preventDefault from"@jstoolkit/web-utils/preventDefault";import stopPropagation from"@jstoolkit/web-utils/stopPropagation";import useRefCallback from"@jstoolkit/react-hooks/useRefCallback";import useRefs from"@jstoolkit/react-hooks/useRefs";import TruncatedText from"../TruncatedText";import SvgSpriteIcon from"../SvgSpriteIcon";const useStyles=makeStyles((({rc:e})=>{var t,o,l,i,n;return{root:Object.assign({cursor:({clickable:e})=>e?"pointer":""},null===(t=null==e?void 0:e.MenuListItem)||void 0===t?void 0:t.root),title:Object.assign({},null===(l=null===(o=null==e?void 0:e.MenuListItem)||void 0===o?void 0:o.title)||void 0===l?void 0:l.root),subtitle:Object.assign({},null===(n=null===(i=null==e?void 0:e.MenuListItem)||void 0===i?void 0:i.subtitle)||void 0===n?void 0:n.root)}}));export default function MenuListItem(e){var t,o,l,i,{icon:n,title:s,subtitle:c,value:r,submenu:u=!1,checked:a=!1,autoFocus:m,shrinkTitle:f=!c&&!(!a&&!u)||!c&&!a&&!u,className:p,onSelect:d,onClick:v,onKeyDown:b,componentRef:k}=e,h=__rest(e,["icon","title","subtitle","value","submenu","checked","autoFocus","shrinkTitle","className","onSelect","onClick","onKeyDown","componentRef"]);const g=useStyles({classes:{root:p},clickable:!!d}),{rc:x}=useTheme(),R=useRefCallback((e=>{v&&v(e),d&&(stopPropagation(e),d(r,e))})),I=useRefCallback((e=>{b&&b(e),!d||"Enter"!==e.code&&"Space"!==e.code&&"ArrowRight"!==e.code||(preventDefault(e),stopPropagation(e),("ArrowRight"!==e.code||u)&&d(r,e))})),S=useRef(null),y=useRefs(S,k);useEffect((()=>{const{current:e}=S;if(!e||!m)return noop;const t=()=>requestAnimationFrame((()=>{e.focus({preventScroll:!!e.scrollIntoView}),e.scrollIntoView&&e.scrollIntoView({behavior:"smooth",block:"nearest"})}));let o;if(!0===m)return o=t(),()=>cancelAnimationFrame(o);const l=setTimeout((()=>{o=t()}),m);return()=>{clearTimeout(l),cancelAnimationFrame(o)}}),[m]);const T=null==x?void 0:x.MenuListItem,j="string"==typeof n?{name:n,size:"1.5em"}:n,w="function"==typeof(null==T?void 0:T.flex)?T.flex({hasIcon:!!j,submenu:u,checked:a}):null==T?void 0:T.flex,E="function"==typeof(null===(t=null==T?void 0:T.title)||void 0===t?void 0:t.flex)?T.title.flex({hasIcon:!!j,shrinkTitle:f,submenu:u,checked:a}):null===(o=null==T?void 0:T.title)||void 0===o?void 0:o.flex,F="function"==typeof(null===(l=null==T?void 0:T.subtitle)||void 0===l?void 0:l.flex)?T.subtitle.flex({hasIcon:!!j,shrinkTitle:f,submenu:u,checked:a}):null===(i=null==T?void 0:T.subtitle)||void 0===i?void 0:i.flex,O=a?null==T?void 0:T.checkIcon:void 0,C=u?null==T?void 0:T.submenuIcon:void 0;return React.createElement(Flex,Object.assign({"aria-haspopup":u||void 0,role:"menuitem",componentRef:y,px:!0,py:j?.375:.625,alignItems:"center"},w,{className:g.root,onClick:R,onKeyDown:I},h),!!j&&React.createElement(SvgSpriteIcon,Object.assign({},j)),s&&"object"!=typeof s?React.createElement(TruncatedText,Object.assign({ml:j?"xs":void 0,grow:!0,shrink:f},E,{className:g.title}),s):s,!!c&&React.createElement(TruncatedText,Object.assign({ml:!0,shrink:!f},F,{className:g.subtitle}),c),!!O&&React.createElement(Flex,Object.assign({ml:!0,shrink:0,component:SvgSpriteIcon,size:"0.75em"},O)),!!C&&React.createElement(Flex,Object.assign({ml:!0,shrink:0,component:SvgSpriteIcon,size:"0.6em"},C)))}

Modal/Body.d.ts

 import React from 'react';
 import { FlexComponentProps } from 'reflexy';
 export declare function getBodyStyles(): import("@mui/styles/withStyles").StyleRules<{}, "root">;
-export declare type BodyProps = FlexComponentProps<'div'>;
+export type BodyProps = FlexComponentProps<'div'>;
 export default function Body({ p, className, ...rest }: React.PropsWithChildren<BodyProps>): JSX.Element;

Modal/Footer.d.ts

 import React from 'react';
 import { FlexComponentProps } from 'reflexy';
-export declare type FooterProps = FlexComponentProps<'div'>;
+export type FooterProps = FlexComponentProps<'div'>;
 export default function Footer({ p, className, ...rest }: React.PropsWithChildren<FooterProps>): JSX.Element;

Modal/Modal.d.ts

@@ -6,3 +6,3 @@ import React from 'react';
 import { HideableProps } from '../HideableFlex';
-declare type ModalSize = 'auto' | 'xs' | 's' | 'm' | 'l';
+type ModalSize = 'auto' | 'xs' | 's' | 'm' | 'l';
 export interface ModalProps extends ExcludeTypes<RequiredSome<OmitStrict<HideableProps, 'disposable'>, 'hidden'>, string, {
@@ -9,0 +9,0 @@ pick: 'transitionDuration';

Notifications/NotificationBar.d.ts

 import React from 'react';
-import { FlexComponentProps } from 'reflexy';
+import { FlexAllProps, FlexComponentProps } from 'reflexy';
+import { HideableProps, TransitionComponent } from '../TransitionFlex';
+import type { GetOverridedKeys } from '../types/local';
 export interface NotificationVariants {
-    info: 'info';
-    success: 'success';
-    warning: 'warning';
-    error: 'error';
 }
-export declare type NotificationVariant = NotificationVariants[keyof NotificationVariants];
-export interface NotificationBarProps<T extends React.ReactText = React.ReactText> extends FlexComponentProps {
-    readonly id: T;
+export type NotificationVariant = GetOverridedKeys<'info' | 'success' | 'warning' | 'error', NotificationVariants>;
+export interface NotificationBarProps<TID extends string | number = string | number, TContent extends React.ElementType = any, TAction extends React.ElementType = any, TTransition extends TransitionComponent = TransitionComponent> extends FlexComponentProps<'div', {
+    omitProps: true;
+}>, HideableProps<TTransition> {
+    readonly id: TID;
     readonly variant?: NotificationVariant;
     readonly action?: (props: Pick<this, 'id' | 'variant' | 'onAction'>) => JSX.Element;
-    readonly onAction?: (id: T) => void;
-    readonly contentProps?: FlexComponentProps;
-    readonly actionProps?: FlexComponentProps;
+    readonly onAction?: (id: TID) => void;
+    readonly contentProps?: FlexAllProps<TContent>;
+    readonly actionProps?: FlexAllProps<TAction>;
+    readonly applyClassesToTransition?: boolean;
 }
-export default function NotificationBar<T extends React.ReactText = React.ReactText>({ id, variant, action: Action, onAction, className, contentProps, actionProps, children, ...rest }: React.PropsWithChildren<NotificationBarProps<T>>): JSX.Element;
+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/NotificationBar.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React from"react";import makeStyles from"@mui/styles/makeStyles";import{Flex}from"reflexy";import clsx from"clsx";const useStyles=makeStyles((({rc:e})=>{var t;const o=null!==(t=null==e?void 0:e.NotificationBar)&&void 0!==t?t:{},{root:n,content:r,action:c,info:s,success:a,warning:i,error:l}=o,g=__rest(o,["root","content","action","info","success","warning","error"]),m=Object.getOwnPropertyNames(g).reduce(((e,t)=>("object"==typeof g[t]&&(e[t]=g[t]),e)),{});return Object.assign(Object.assign({root:Object.assign({boxSizing:"border-box",padding:"0.75em 1.25em",borderRadius:"2px"},n),content:Object.assign({userSelect:"none",whiteSpace:"pre-line",wordBreak:"break-word",textAlign:({contentProps:{column:e,alignItems:t,justifyContent:o,center:n}={}})=>e?"flex-end"===t?"right":"center"===t||n?"center":void 0:"flex-end"===o?"right":"center"===o||n?"center":void 0},r),action:Object.assign({marginLeft:"1em"},c)},m),{info:Object.assign({backgroundColor:"rgb(100, 200, 255)",color:"rgb(0, 80, 100)"},s),success:Object.assign({backgroundColor:"rgb(120, 220, 125)",color:"rgb(30, 90, 30)"},a),warning:Object.assign({backgroundColor:"rgb(255, 200, 50)",color:"rgb(130, 80, 0)"},i),error:Object.assign({backgroundColor:"rgb(255, 100, 90)",color:"rgb(125, 0, 0)"},l)})}));export default function NotificationBar(e){var{id:t,variant:o="info",action:n,onAction:r,className:c,contentProps:s,actionProps:a,children:i}=e,l=__rest(e,["id","variant","action","onAction","className","contentProps","actionProps","children"]);const g=useStyles({classes:{content:null==s?void 0:s.className,action:null==a?void 0:a.className},contentProps:s});return React.createElement(Flex,Object.assign({alignItems:"center",className:clsx(g.root,g[o],c)},l),React.createElement(Flex,Object.assign({grow:!0},s,{className:g.content}),i),!!n&&React.createElement(Flex,Object.assign({},a,{className:g.action}),React.createElement(n,{id:t,variant:o,onAction:r})))}
+import{__rest}from"tslib";import React from"react";import makeStyles from"@mui/styles/makeStyles";import{Flex}from"reflexy";import clsx from"clsx";import TransitionFlex from"../TransitionFlex";const useStyles=makeStyles((({rc:e})=>{var t;const n=null!==(t=null==e?void 0:e.NotificationBar)&&void 0!==t?t:{},{root:o,content:r,action:i,info:s,success:a,warning:c,error:l}=n,g=__rest(n,["root","content","action","info","success","warning","error"]),m=Object.getOwnPropertyNames(g).reduce(((e,t)=>("object"==typeof g[t]&&(e[t]=g[t]),e)),{});return Object.assign(Object.assign({root:Object.assign({boxSizing:"border-box",padding:"0.75em 1.25em",borderRadius:"2px"},o),textRight:{textAlign:"right"},textCenter:{textAlign:"center"},content:Object.assign({userSelect:"none",whiteSpace:"pre-line",wordBreak:"break-word"},r),action:Object.assign({marginLeft:"1em"},i)},m),{info:Object.assign({backgroundColor:"rgb(100, 200, 255)",color:"rgb(0, 80, 100)"},s),success:Object.assign({backgroundColor:"rgb(120, 220, 125)",color:"rgb(30, 90, 30)"},a),warning:Object.assign({backgroundColor:"rgb(255, 200, 50)",color:"rgb(130, 80, 0)"},c),error:Object.assign({backgroundColor:"rgb(255, 100, 90)",color:"rgb(125, 0, 0)"},l)})}));export default function NotificationBar(e){var{id:t,variant:n="info",action:o,onAction:r,className:i,contentProps:s,actionProps:a,children:c,transitionProps:l,applyClassesToTransition:g}=e,m=__rest(e,["id","variant","action","onAction","className","contentProps","actionProps","children","transitionProps","applyClassesToTransition"]);const x=useStyles({classes:{content:null==s?void 0:s.className,action:null==a?void 0:a.className}}),b=m,{appear:d,in:p,enter:u,exit:E,onEnter:f,onEntering:j,onEntered:O,onExit:y,onExiting:N,onExited:v}=b,C=__rest(b,["appear","in","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited"]);return React.createElement(TransitionFlex,Object.assign({alignItems:"center",className:g?void 0:clsx(x.root,x[n],i),transitionProps:Object.assign(Object.assign({appear:d,in:p,enter:u,exit:E,onEnter:f,onEntering:j,onEntered:O,onExit:y,onExiting:N,onExited:v},l),g&&{className:clsx(x.root,x[n],null==l?void 0:l.className,i)})},C),React.createElement(Flex,Object.assign({grow:!0},s,{className:s?clsx((s.column&&"flex-end"===s.alignItems||!s.column&&"flex-end"===s.justifyContent)&&x.textRight,(s.center||s.column&&"center"===s.alignItems||!s.column&&"center"===s.justifyContent)&&x.textCenter,x.content):x.content}),c),!!o&&React.createElement(Flex,Object.assign({},a,{className:x.action}),React.createElement(o,{id:t,variant:n,onAction:r})))}

Notifications/NotificationCloseAction.d.ts

 import React from 'react';
 import type { FlexComponentProps } from 'reflexy';
 import type { NotificationBarProps } from './NotificationBar';
-export interface NotificationCloseActionProps<T extends React.ReactText> extends FlexComponentProps, Pick<NotificationBarProps<T>, 'id' | 'onAction'> {
+export interface NotificationCloseActionProps<T extends string | number> extends FlexComponentProps, Pick<NotificationBarProps<T>, 'id' | 'onAction'> {
 }
-export default function NotificationCloseAction<T extends React.ReactText>({ id, onAction, children, ...rest }: React.PropsWithChildren<NotificationCloseActionProps<T>>): JSX.Element;
+export default function NotificationCloseAction<T extends string | number>({ id, onAction, children, ...rest }: React.PropsWithChildren<NotificationCloseActionProps<T>>): JSX.Element;

Notifications/Notifications.d.ts

 import React from 'react';
-import { FlexAllProps, DefaultComponentType } from 'reflexy';
+import { FlexAllProps, FlexComponentProps } from 'reflexy';
+import type { TransitionComponent } from '../TransitionFlex';
+import type { GetOverridedKeys } from '../types/local';
 import { NotificationBarProps } from './NotificationBar';
 export interface NotificationPositions {
-    static: 'static';
-    'sticky-top': 'sticky-top';
-    'sticky-bottom': 'sticky-bottom';
-    top: 'top';
-    bottom: 'bottom';
-    'window-top': 'window-top';
-    'window-bottom': 'window-bottom';
 }
-export declare type NotificationPosition = keyof NotificationPositions;
-export interface Notification<TID extends React.ReactText = React.ReactText, TContent = JSX.Element | string> extends RequiredSome<Pick<NotificationBarProps<TID>, 'id' | 'variant' | 'contentProps' | 'actionProps'>, 'variant'> {
+export type NotificationPosition = GetOverridedKeys<'static' | 'sticky-top' | 'sticky-bottom' | 'top' | 'bottom' | 'left-top' | 'left-middle' | 'left-bottom' | 'right-top' | 'right-middle' | 'right-bottom' | 'window-top' | 'window-bottom', NotificationPositions>;
+export interface Notification<TID extends string | number = string | number, TContent = JSX.Element | string, TTransition extends TransitionComponent = TransitionComponent, TBarContentElement extends React.ElementType = any, TBarActionElement extends React.ElementType = any> extends RequiredSome<Pick<NotificationBarProps<TID, TBarContentElement, TBarActionElement, TTransition>, 'id' | 'variant' | 'contentProps' | 'actionProps'>, 'variant'> {
     readonly content: TContent;
     readonly position?: NotificationPosition;
-    readonly permanent?: boolean;
+    readonly noAction?: boolean;
+    readonly rootProps?: OmitStrict<NotificationBarProps<TID, TBarContentElement, TBarActionElement, TTransition>, 'id' | 'variant' | 'contentProps' | 'actionProps'>;
 }
-export declare type NotificationsProps<C extends React.ElementType = DefaultComponentType, N extends Notification<any, any> = Notification> = FlexAllProps<C> & {
+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> ? TID : React.ReactText>['action'];
-    readonly onAction?: NotificationBarProps<N extends Notification<infer TID> ? TID : React.ReactText>['onAction'];
+    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 containerProps?: FlexComponentProps<'div', {
+        omitProps: true;
+    }>;
+    readonly listProps?: FlexComponentProps<'div', {
+        omitProps: true;
+    }>;
 };
-export default function Notifications<C extends React.ElementType = DefaultComponentType, N extends Notification<any, any> = Notification>({ list, defaultPosition, defaultAction, onAction, className, ...rest }: NotificationsProps<C, N>): JSX.Element | null;
+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;

Notifications/Notifications.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React from"react";import makeStyles from"@mui/styles/makeStyles";import{Flex}from"reflexy";import clsx from"clsx";import NotificationBar from"./NotificationBar";const useStyles=makeStyles((({rc:t})=>{var o;const{root:e,static:i,"sticky-top":n,"sticky-bottom":s,top:a,bottom:c,"window-top":r,"window-bottom":l}=null!==(o=null==t?void 0:t.Notifications)&&void 0!==o?o:{};return{fixedContainer:{position:"fixed",left:0,top:"-1px",width:"100%",height:0,overflow:"hidden",zIndex:999},absoluteContainer:{position:"absolute",left:0,width:"100%",height:0,zIndex:999},root:Object.assign({zIndex:999},e),static:Object.assign({position:"static"},i),"sticky-top":Object.assign({position:"sticky",top:0},n),"sticky-bottom":Object.assign({position:"sticky",bottom:0},s),top:Object.assign({position:"absolute",top:0},a),bottom:Object.assign({position:"absolute",bottom:0},c),"window-top":Object.assign({position:"fixed",top:"0.75rem"},r),"window-bottom":Object.assign({position:"fixed",bottom:"0.75rem"},l),item:{marginTop:"0.375em",marginBottom:"0.375em"}}}));export default function Notifications(t){var{list:o,defaultPosition:e="window-top",defaultAction:i,onAction:n,className:s}=t,a=__rest(t,["list","defaultPosition","defaultAction","onAction","className"]);const c=useStyles();if(0===o.length)return null;const r=o.reduce(((t,o)=>{var s,a;const r=null!==(s=o.position)&&void 0!==s?s:e;t[r]=null!==(a=t[r])&&void 0!==a?a:[];const l=React.createElement(NotificationBar,{key:o.id,id:o.id,variant:o.variant,shrink:!1,justifyContent:"center",className:c.item,action:i,onAction:o.permanent?void 0:n,contentProps:o.contentProps,actionProps:o.actionProps},o.content);return t[r].push(l),t}),{});return React.createElement(React.Fragment,null,Object.getOwnPropertyNames(r).map((t=>{const o=clsx(c.root,c[t],s),e=React.createElement(Flex,Object.assign({column:!0,className:o},a),r[t]),i=0===t.indexOf("window")&&c.fixedContainer||("top"===t||"bottom"===t)&&`${c.absoluteContainer} ${c[t]}`||c[t];return React.createElement(Flex,{key:t,justifyContent:"center",className:i},e)})))}
+import{__rest}from"tslib";import React,{useEffect,useRef}from"react";import makeStyles from"@mui/styles/makeStyles";import{Flex,ForwardRef}from"reflexy";import TransitionGroup from"react-transition-group/TransitionGroup";import clsx from"clsx";import clear from"@jstoolkit/utils/clear";import useUpdate from"@jstoolkit/react-hooks/useUpdate";import NotificationBar from"./NotificationBar";const useStyles=makeStyles((({rc:t})=>{var o;const{root:e,item:i,itemSpace:s,static:n,"sticky-top":a,"sticky-bottom":r,top:c,bottom:l,"left-top":m,"left-middle":p,"left-bottom":f,"right-top":u,"right-middle":b,"right-bottom":d,"window-top":g,"window-bottom":h}=null!==(o=null==t?void 0:t.Notifications)&&void 0!==o?o:{};return{fixedContainer:{position:"fixed",left:0,top:"-1px",width:"100%",height:0,overflow:"hidden",zIndex:999},absoluteContainer:{position:"absolute",left:0,width:"100%",height:0,zIndex:999},root:Object.assign({zIndex:999},e),static:Object.assign({position:"static"},n),"sticky-top":Object.assign({position:"sticky",top:0},a),"sticky-bottom":Object.assign({position:"sticky",bottom:0},r),top:Object.assign({position:"absolute",top:0},c),bottom:Object.assign({position:"absolute",bottom:0},l),"left-top":Object.assign({position:"absolute",left:0,top:0},m),"left-middle":Object.assign({position:"absolute",left:0,top:"50%",transform:"translateY(-50%)"},p),"left-bottom":Object.assign({position:"absolute",left:0,bottom:0},f),"right-top":Object.assign({position:"absolute",right:0,top:0},u),"right-middle":Object.assign({position:"absolute",right:0,top:"50%",transform:"translateY(-50%)"},b),"right-bottom":Object.assign({position:"absolute",right:0,bottom:0},d),"window-top":Object.assign({position:"fixed",top:"0.75rem"},g),"window-bottom":Object.assign({position:"fixed",bottom:"0.75rem"},h),item:Object.assign(Object.assign({},i),{"& + &":Object.assign({marginTop:"0.75em"},s)})}}));export default React.memo((function(t){var{list:o,defaultPosition:e="window-top",defaultAction:i,onAction:s,className:n,containerProps:a,listProps:r}=t,c=__rest(t,["list","defaultPosition","defaultAction","onAction","className","containerProps","listProps"]);const l=useStyles(),m=useUpdate(),p=useRef();p.current||(p.current=new Map),useEffect((()=>{const t=p.current;t&&(t.forEach(clear),o.forEach((o=>{var n,a;const r=null!==(n=o.position)&&void 0!==n?n:e,c=null!==(a=t.get(r))&&void 0!==a?a:[];t.set(r,c),c.push(React.createElement(ForwardRef,Object.assign({component:NotificationBar,key:o.id,id:o.id,variant:o.variant,shrink:!1,justifyContent:"center",className:l.item,action:o.noAction?void 0:i,onAction:o.noAction?void 0:s,contentProps:o.contentProps,actionProps:o.actionProps},o.rootProps),o.content))})),m())}),[l,i,e,o,s,m]);const f=p.current;return f?Array.from(f.entries(),(([t,o])=>{const e=clsx((t.startsWith("window")&&l.fixedContainer||"top"===t||"bottom"===t||t.startsWith("left")||t.startsWith("right"))&&l.absoluteContainer,l[t],null==a?void 0:a.className),i=clsx(l.root,l[t],n);return React.createElement(Flex,Object.assign({key:t,justifyContent:"center"},a,{className:e}),React.createElement(Flex,Object.assign({column:!0,className:i},c),React.createElement(Flex,Object.assign({column:!0,alignItems:(t.startsWith("left")?"flex-start":t.startsWith("right")&&"flex-end")||void 0},r),React.createElement(TransitionGroup,{component:null},o))))})):null}));

package.json

 {
   "name": "@jstoolkit/styled-components",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "description": "Styled react components powered by JSS via @material-ui/styles",
@@ -20,4 +20,5 @@ "author": "VZH",
     "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'",
-    "patch-publish": "yarn run build && yarn version --patch && yarn run copy:configs && npm publish ./dist/ --access public && git push origin master --follow-tags",
-    "minor-publish": "yarn run build && yarn version --minor && yarn run copy:configs && npm publish ./dist/ --access public && git push origin master --follow-tags"
+    "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",
+    "minor-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,19 +30,19 @@ "optionalDependencies": {
     "@jstoolkit/configs": "^3.84.7",
-    "@jstoolkit/react-hooks": "^1.44.0",
-    "@jstoolkit/utils": "^1.44.2",
-    "@jstoolkit/web-utils": "^1.34.0",
-    "@mui/material": "^5.10.0",
-    "@mui/styles": "^5.9.3",
-    "@types/react": "18.0.17",
+    "@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",
     "@types/react-modal": "^3.13.1",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.21.0",
+    "eslint": "^8.31.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.27.2",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react": "^7.32.0",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -61,11 +62,11 @@ "jss": "^10.9.2",
     "jss-plugin-vendor-prefixer": "^10.9.2",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.2",
     "react": "^18.2.0",
-    "react-modal": "^3.15.1",
+    "react-modal": "^3.16.1",
     "react-outside-click-listener": "^1.5.1",
-    "reflexy": "^3.42.2",
+    "reflexy": "^3.45.0",
     "rimraf": "^3.0.2",
-    "terser": "^5.14.2",
-    "typescript": "^4.7.4",
-    "yargs": "^17.5.1"
+    "terser": "^5.16.1",
+    "typescript": "^4.9.4",
+    "yargs": "^17.6.2"
   },
@@ -72,0 +73,0 @@ "peerDependencies": {

Picture/Picture.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React,{useCallback,useRef,useState}from"react";import makeStyles from"@mui/styles/makeStyles";import useMemoDestructor from"@jstoolkit/react-hooks/useMemoDestructor";import TransitionFlex from"../TransitionFlex";const useStyles=makeStyles({root:{pointerEvents:"none","& picture":{width:"100%",height:"100%"},"& img, & source":{width:"100%",height:"100%",objectFit:"cover"}}});export default function Picture(e){var{hidden:t,src:r,crossOrigin:o,timeout:s,transitionProps:n,onLoadTimeout:i,onLoadCompleted:a,onError:c,className:u}=e,l=__rest(e,["hidden","src","crossOrigin","timeout","transitionProps","onLoadTimeout","onLoadCompleted","onError","className"]);const m=useStyles({classes:{root:u}}),[d,p]=useState(!1),g=useRef(0),f=useMemoDestructor((()=>{var e;const t="string"==typeof r?{src:r}:r;return g.current=(null!=s?s:0)>0&&i?setTimeout(i,s):0,[React.createElement(React.Fragment,null,null===(e=t.srcset)||void 0===e?void 0:e.map((e=>{var{src:t}=e,r=__rest(e,["src"]);return React.createElement("source",Object.assign({key:t,srcSet:t},r))})),React.createElement("img",{src:t.src,alt:"",crossOrigin:o})),()=>{clearTimeout(g.current)}]}),[o,r]),h=useCallback((()=>{clearTimeout(g.current),p(!0),a&&a()}),[a]),k=useCallback((e=>{clearTimeout(g.current),c&&c(e)}),[c]);return React.createElement(TransitionFlex,Object.assign({hidden:null!=t?t:!d,transitionDuration:250,transitionProps:Object.assign({easing:{enter:"ease-in",exit:"ease-out"}},n),component:"picture",flex:!1,onLoad:h,onError:k,className:m.root},l),f)}
+import{__rest}from"tslib";import React,{useCallback,useLayoutEffect,useRef,useState}from"react";import makeStyles from"@mui/styles/makeStyles";import useMemoDestructor from"@jstoolkit/react-hooks/useMemoDestructor";import TransitionFlex from"../TransitionFlex";const useStyles=makeStyles({root:{pointerEvents:"none","& img":{width:"100%",height:"100%",objectFit:"cover",borderRadius:"inherit"}}});export default function Picture(e){var{hidden:t,src:r,crossOrigin:o,timeout:s,transitionProps:n,onLoadTimeout:i,onLoadCompleted:a,onError:c,className:u}=e,l=__rest(e,["hidden","src","crossOrigin","timeout","transitionProps","onLoadTimeout","onLoadCompleted","onError","className"]);const m=useStyles({classes:{root:u}}),[d,f]=useState(!1),p=useRef(null),g=useRef(0),[y,E]=useMemoDestructor((()=>{var e;const t="string"==typeof r?{src:r}:r;return g.current=(null!=s?s:0)>0&&i?window.setTimeout(i,s):0,[[t,React.createElement(React.Fragment,null,null===(e=t.srcset)||void 0===e?void 0:e.map((e=>{var{src:t}=e,r=__rest(e,["src"]);return React.createElement("source",Object.assign({key:t,srcSet:t},r))})),React.createElement("img",{ref:p,crossOrigin:o}))],()=>{clearTimeout(g.current)}]}),[o,r]);useLayoutEffect((()=>{const{current:e}=p;e&&(e.src=y.src)}),[y]);const R=useCallback((()=>{clearTimeout(g.current),f(!0),a&&a()}),[a]),b=useCallback((e=>{clearTimeout(g.current),c?c(e):console.error(e),a&&a()}),[c,a]);return React.createElement(TransitionFlex,Object.assign({hidden:null!=t?t:!d,transitionDuration:250,transitionProps:Object.assign({easing:{enter:"ease-in",exit:"ease-out"}},n),component:"picture",flex:!1,onLoad:R,onError:b,className:m.root},l),E)}

Poster/Poster.d.ts

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

README.md

 # Styled React Components
 
-![GitHub package.json version](https://img.shields.io/github/package-json/v/js-toolkit/styled-components)
+[![npm package](https://img.shields.io/npm/v/@jstoolkit/styled-components.svg?style=flat-square)](https://www.npmjs.org/package/@jstoolkit/styled-components)
 
 Powered by [JSS](https://github.com/cssinjs/jss) via [@mui/styles](https://github.com/mui-org/material-ui/tree/master/packages/mui-styles).
-
-## Installation
-
-See [Github instructions](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#installing-a-package).
-
-> In the same directory as your `package.json` file, create or edit an `.npmrc` file to include a line specifying GitHub Packages URL and the account owner.
->
-> ```
-> @js-toolkit:registry=https://npm.pkg.github.com
-> ```

ResizeListener/ResizeListener.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 export interface Size {
@@ -3,0 +2,0 @@ width: number;

StylesProvider/createPlugins.d.ts

@@ -31,3 +31,3 @@ import type { JssOptions } from 'jss';
 export declare function getDefaultPlugins(): Partial<Record<keyof PluginsFactory, true>>;
-export declare type CreatePluginsOptions = {
+export type CreatePluginsOptions = {
     [P in keyof PluginsFactory]?: boolean | Parameters<PluginsFactory[P]>[0];
@@ -34,0 +34,0 @@ };

StylesProvider/StylesProvider.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import { JssOptions } from 'jss';
@@ -3,0 +2,0 @@ import { StylesProviderProps as MuiStylesProviderProps } from '@mui/styles/StylesProvider';

SvgSpriteIcon/SvgSpriteIcon.d.ts

@@ -14,5 +14,6 @@ import React from 'react';
     htmlRef?: React.Ref<SVGSVGElement>;
+    componentRef?: this['htmlRef'];
 }
 /** Uses with svg-sprite-loader */
-declare function SvgSpriteIcon<N extends string>({ name, size, width, height, scaleOnHover, useProps, htmlRef, className, children, ...rest }: SvgSpriteIconProps<N>): JSX.Element | null;
+declare function SvgSpriteIcon<N extends string>({ name, size, width, height, scaleOnHover, useProps, htmlRef, componentRef, className, children, ...rest }: SvgSpriteIconProps<N>): JSX.Element | null;
 declare namespace SvgSpriteIcon {
@@ -19,0 +20,0 @@ var spriteId: string;

SvgSpriteIcon/SvgSpriteIcon.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React from"react";import makeStyles from"@mui/styles/makeStyles";import useTheme from"@mui/styles/useTheme";import clsx from"clsx";import useSvgSpriteIconHref from"./useSvgSpriteIconHref";const useStyles=makeStyles({root:{display:"inline-block",verticalAlign:"middle"},scalable:{transition:"transform 0.1s",cursor:"pointer","&:hover":{transform:({scaleOnHover:e})=>"number"==typeof e?`scale(${e})`:"scale(1.2)"}}});function SvgSpriteIcon(e){var r,t,s,l,{name:i,size:o,width:n,height:c,scaleOnHover:a,useProps:m,htmlRef:u,className:v,children:f}=e,p=__rest(e,["name","size","width","height","scaleOnHover","useProps","htmlRef","className","children"]);const S=useStyles({scaleOnHover:a||1}),{rc:d}=useTheme(),h=useSvgSpriteIconHref(i);if(!h)return null;const g=null!==(s=null!==(r=null!=n?n:o)&&void 0!==r?r:null===(t=null==d?void 0:d.SvgSpriteIcon)||void 0===t?void 0:t.defaultSize)&&void 0!==s?s:18,y=null!==(l=null!=c?c:o)&&void 0!==l?l:g;return React.createElement("svg",Object.assign({ref:u,width:g,height:y,className:clsx(S.root,a&&S.scalable,v)},p),React.createElement("use",Object.assign({xlinkHref:h,fill:"currentColor"},m)),f)}SvgSpriteIcon.spriteId="svgsprite";export default SvgSpriteIcon;
+import{__rest}from"tslib";import React from"react";import makeStyles from"@mui/styles/makeStyles";import useTheme from"@mui/styles/useTheme";import clsx from"clsx";import useRefs from"@jstoolkit/react-hooks/useRefs";import useSvgSpriteIconHref from"./useSvgSpriteIconHref";const useStyles=makeStyles({root:{display:"inline-block",verticalAlign:"middle"},scalable:{transition:"transform 0.1s",cursor:"pointer","&:hover":{transform:({scaleOnHover:e})=>"number"==typeof e?`scale(${e})`:"scale(1.2)"}}});function SvgSpriteIcon(e){var s,t,r,o,{name:l,size:i,width:n,height:c,scaleOnHover:a,useProps:m,htmlRef:u,componentRef:f,className:p,children:v}=e,S=__rest(e,["name","size","width","height","scaleOnHover","useProps","htmlRef","componentRef","className","children"]);const h=useStyles({scaleOnHover:a||1}),{rc:d}=useTheme(),g=useRefs(u,f),R=useSvgSpriteIconHref(l);if(!R)return null;const y=null!==(r=null!==(s=null!=n?n:i)&&void 0!==s?s:null===(t=null==d?void 0:d.SvgSpriteIcon)||void 0===t?void 0:t.defaultSize)&&void 0!==r?r:18,H=null!==(o=null!=c?c:i)&&void 0!==o?o:y;return React.createElement("svg",Object.assign({ref:g,width:y,height:H,className:clsx(h.root,a&&h.scalable,p)},S),React.createElement("use",Object.assign({xlinkHref:R,fill:"currentColor"},m)),v)}SvgSpriteIcon.spriteId="svgsprite";export default SvgSpriteIcon;

theme.d.ts

@@ -12,3 +12,3 @@ import type { BaseCSSProperties } from '@mui/styles/withStyles';
 }
-export declare type BaseCreateCSSProperties = {
+export type BaseCreateCSSProperties = {
     [P in keyof BaseCSSProperties]: BaseCSSProperties[P];
@@ -19,7 +19,7 @@ };
 }
-export declare type CSSProperties = CSSPropertiesDeep | CreateCSSProperties;
-export declare type ButtonThemeSizes = {
+export type CSSProperties = CSSPropertiesDeep | CreateCSSProperties;
+export type ButtonThemeSizes = {
     [P in ButtonSize as `size-${P}`]?: CSSProperties;
 };
-export declare type ButtonThemeVariants = {
+export type ButtonThemeVariants = {
     [P in ButtonVariant as `variant-${P}`]?: CSSProperties;
@@ -241,2 +241,4 @@ };
             root?: CSSProperties;
+            item?: CSSProperties;
+            itemSpace?: CSSProperties;
         } & {
@@ -243,0 +245,0 @@ [P in NotificationPosition]?: CSSProperties;

Tooltip/Tooltip.d.ts

@@ -7,4 +7,4 @@ import React from 'react';
 } | undefined) => import("@mui/styles/withStyles").ClassNameMap<"style" | "title" | "text" | "root" | "container" | "rowContainer" | "arrow">;
-declare type TooltipAlignX = 'left' | 'middle' | 'right';
-declare type TooltipAlignY = 'top' | 'middle' | 'bottom';
+type TooltipAlignX = 'left' | 'middle' | 'right';
+type TooltipAlignY = 'top' | 'middle' | 'bottom';
 export interface TooltipData {
@@ -11,0 +11,0 @@ readonly target: HTMLElement;

TooltipButton/TooltipButton.d.ts

@@ -9,10 +9,20 @@ import React from 'react';
 export interface TooltipButtonTooltipProps<D = never> {
-    tooltip?: TooltipData<D>['title'];
-    tooltipDelay?: number;
-    onShowTooltip?: (tooltip: TooltipData<D>) => void;
-    onHideTooltip?: (target: TooltipData<D>['target']) => void;
+    readonly tooltip?: TooltipData['title'];
+    readonly tooltipDelay?: number;
+    readonly onShowTooltip?: (tooltip: TooltipData<D>) => void;
+    readonly onHideTooltip?: (target: TooltipData['target']) => void;
 }
-export declare type TooltipButtonProps<C extends React.ElementType = 'button', D = never> = ButtonProps<C> & TooltipButtonTooltipProps<D> & {
+type WithData<D = never> = Exclude<D, undefined> extends never ? {
     readonly data?: D;
+} : unknown extends D ? {
+    readonly data?: D;
+} : IfExtends<D, undefined, {
+    readonly data?: D;
+}, {
+    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;
 };
 export default function TooltipButton<C extends React.ElementType = 'button', D = never>({ tooltip, tooltipDelay, data, onShowTooltip, onHideTooltip, ...restProps }: TooltipButtonProps<C, D>): JSX.Element;
+export {};

TooltipButton/TooltipButton.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React,{useEffect,useRef}from"react";import useToggleDebounce from"@jstoolkit/react-hooks/useToggleDebounce";import useRefCallback from"@jstoolkit/react-hooks/useRefCallback";import Button from"../Button";export default function TooltipButton(e){var{tooltip:o,tooltipDelay:t=0,data:n,onShowTooltip:r,onHideTooltip:u}=e;const a=__rest(e,["tooltip","tooltipDelay","data","onShowTooltip","onHideTooltip"]),{onClick:l,onMouseEnter:c,onMouseLeave:s,onTouchStart:i,onContextMenu:f}=a,p=__rest(a,["onClick","onMouseEnter","onMouseLeave","onTouchStart","onContextMenu"]),[k,C,T]=useToggleDebounce({wait:t}),b=k(),m=C(),R=useRef(!1);useEffect((()=>{b&&r&&o&&m?r({target:m,title:o,data:n}):b&&o||!u||!m||u(m)}),[n,m,b,u,r,o]);const g=useRefCallback((e=>{R.current=!0,i&&i(e)})),M=useRefCallback((e=>{R.current=!1,f&&f(e)})),h=useRefCallback((e=>{R.current=!1,l&&l(e)})),d=useRefCallback((e=>{R.current||(o&&r&&T(!0,e.currentTarget),c&&c(e))})),E=useRefCallback((e=>{R.current||((k()||o)&&u&&T(!1,e.currentTarget),s&&s(e))}));return React.createElement(Button,Object.assign({onMouseEnter:d,onMouseLeave:E,onTouchStart:g,onContextMenu:M,onClick:h},p))}
+import{__rest}from"tslib";import React,{useEffect,useRef}from"react";import noop from"@jstoolkit/utils/noop";import debounce from"@jstoolkit/utils/debounce";import useRefs from"@jstoolkit/react-hooks/useRefs";import useMemoDestructor from"@jstoolkit/react-hooks/useMemoDestructor";import useRefCallback from"@jstoolkit/react-hooks/useRefCallback";import Button from"../Button";export default function TooltipButton(e){var{tooltip:o,tooltipDelay:t=0,data:r,onShowTooltip:n,onHideTooltip:u}=e;const s=__rest(e,["tooltip","tooltipDelay","data","onShowTooltip","onHideTooltip"]),{onClick:c,onMouseEnter:l,onMouseLeave:a,onTouchStart:f,onContextMenu:i,componentRef:p}=s,m=__rest(s,["onClick","onMouseEnter","onMouseLeave","onTouchStart","onContextMenu","componentRef"]),R=useRef(null),k=useRefs(R,p),C=useRef(!1),b=useRef(!1),M=useRefCallback((()=>{R.current&&o&&n&&(C.current=!0,n({target:R.current,title:o,data:r}))})),d=useRefCallback((()=>{R.current&&u&&(C.current=!1,u(R.current))})),h=useMemoDestructor((()=>{if(u&&t>0){const e=debounce(d,t);return[e,()=>e.flush()]}return[d,noop]}),[d,u,t]);useEffect((()=>{C.current&&(o?M():d())}),[d,M,o]);const T=useRefCallback((e=>{b.current=!0,f&&f(e)})),j=useRefCallback((e=>{b.current=!1,i&&i(e)})),E=useRefCallback((e=>{b.current=!1,c&&c(e,r)})),_=useRefCallback((e=>{b.current||(M(),l&&l(e))})),D=useRefCallback((e=>{b.current||(h(),a&&a(e))}));return React.createElement(Button,Object.assign({componentRef:k,onMouseEnter:_,onMouseLeave:D,onTouchStart:T,onContextMenu:j,onClick:E},m))}

TransitionFlex/TransitionFlex.d.ts

 import React from 'react';
 import type { TransitionProps } from '@mui/material/transitions/transition';
 import { DefaultComponentType, FlexAllProps } from 'reflexy';
-declare type TransitionComponent = React.JSXElementConstructor<TransitionProps & {
+export type TransitionComponent = React.JSXElementConstructor<TransitionProps & {
     children: React.ReactElement<any, any>;
@@ -19,3 +19,3 @@ }>;
 }
-export declare type TransitionFlexProps<T extends TransitionComponent = TransitionComponent, C extends React.ElementType = DefaultComponentType> = FlexAllProps<C, {
+export type TransitionFlexProps<T extends TransitionComponent = TransitionComponent, C extends React.ElementType = DefaultComponentType> = FlexAllProps<C, {
     inferStyleProps: {
@@ -27,2 +27,1 @@ style: true;
 export default function TransitionFlex<T extends TransitionComponent = TransitionComponent, C extends React.ElementType = DefaultComponentType>({ transition, transitionProps, transitionDuration, hidden, appear, disposable, keepChildren, onHidden, onShown, className, hiddenClassName, ...rest }: TransitionFlexProps<T, C>): JSX.Element;
-export {};

TruncatedText/TruncatedText.d.ts

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

types/local.d.ts

@@ -1,4 +0,4 @@
-export declare type GetFilteredKeys<T extends AnyObject> = Extract<{
+export type GetFilteredKeys<T extends AnyObject> = Extract<{
     [P in keyof T]: true extends T[P] ? P : never;
 }[keyof T], string>;
-export declare type GetOverridedKeys<T extends string | number, U extends AnyObject = EmptyObject> = GetFilteredKeys<Merge<Record<T, true>, U>>;
+export type GetOverridedKeys<T extends string | number, U extends AnyObject = EmptyObject> = GetFilteredKeys<Merge<Record<T, true>, U>>;

VideoWatermark/VideoWatermark.d.ts

 import React from 'react';
 import type { FlexComponentProps } from 'reflexy';
 import type { Size } from '../ResizeListener';
-export declare type VideoWatermarkProps = FlexComponentProps & Partial<Point> & Partial<Size> & {
+export type VideoWatermarkProps = FlexComponentProps & Partial<Point> & Partial<Size> & {
     text: string;
@@ -6,0 +6,0 @@ baseFontSize?: number;

VideoWatermark/VideoWatermark.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React,{useLayoutEffect,useRef}from"react";import makeStyles from"@mui/styles/makeStyles";import useTheme from"@mui/styles/useTheme";import Fade from"@mui/material/Fade";import TransitionGroup from"react-transition-group/TransitionGroup";import toInt from"@jstoolkit/utils/toInt";import noop from"@jstoolkit/utils/noop";import useRefState from"@jstoolkit/react-hooks/useRefState";import useUpdate from"@jstoolkit/react-hooks/useUpdate";import useRefs from"@jstoolkit/react-hooks/useRefs";import useHideableState from"@jstoolkit/react-hooks/useHideableState";import useUpdatedRef from"@jstoolkit/react-hooks/useUpdatedRef";import TransitionFlex from"../TransitionFlex";import WatermarkField from"../WatermarkField";import{getShowController}from"./getShowController";import{getRandomShowController}from"./getRandomShowController";const useStyles=makeStyles((({rc:e})=>{var t,o,i,s,n,r,a,l;const d={position:"absolute",visibility:"hidden",opacity:0,zIndex:-1,whiteSpace:"nowrap",display:"inline-block"};return{root:{position:"absolute",fontSize:"inherit"},textStripes:Object.assign(Object.assign(Object.assign({},null===(t=null==e?void 0:e.VideoWatermark)||void 0===t?void 0:t.default),null===(o=null==e?void 0:e.VideoWatermark)||void 0===o?void 0:o.stripes),d),textRandom:Object.assign(Object.assign(Object.assign({},null===(i=null==e?void 0:e.VideoWatermark)||void 0===i?void 0:i.default),null===(s=null==e?void 0:e.VideoWatermark)||void 0===s?void 0:s.random),d),stripes:Object.assign(Object.assign({},null===(n=null==e?void 0:e.VideoWatermark)||void 0===n?void 0:n.default),null===(r=null==e?void 0:e.VideoWatermark)||void 0===r?void 0:r.stripes),random:Object.assign(Object.assign(Object.assign({},null===(a=null==e?void 0:e.VideoWatermark)||void 0===a?void 0:a.default),null===(l=null==e?void 0:e.VideoWatermark)||void 0===l?void 0:l.random),{position:"absolute"})}}));function scaleFontSize(e,t,o,i){const s=Math.min(o,i);return Math.floor(e*(s/100*t))}export default React.memo((function(e){var t,o,i,s,n,r,a,{videoRef:l,text:d,mode:u="stripes",updateTimeout:m,baseFontSize:c,scaleBySize:p,visibleTimeout:v,hiddenTimeout:f,x:h,y:g,width:b,height:k,className:x}=e,y=__rest(e,["videoRef","text","mode","updateTimeout","baseFontSize","scaleBySize","visibleTimeout","hiddenTimeout","x","y","width","height","className"]);const S=useStyles({classes:{root:x}}),R=useRef(null),j=useUpdate(),T=useRefs(R,j),W=useRef(null),[w,E]=useRefState({textWidth:0,textHeight:0}),[O,F]=useRefState(void 0),H=useHideableState({enabled:!0,visible:!0}),L=b&&toInt(b),V=k&&toInt(k),z=null!=L?L:null===(t=R.current)||void 0===t?void 0:t.offsetWidth,C=null!=V?V:null===(o=R.current)||void 0===o?void 0:o.offsetHeight,U=(()=>{if(c&&p){if(!z||!C)return;return scaleFontSize(c,p,z,C)}return c})(),N=useUpdatedRef(z&&C?{width:z,height:C}:void 0);useLayoutEffect((()=>{const{current:e}=W;if(!e)return;if(c&&!U)return;const{width:t,height:o}=e.getBoundingClientRect();E({textWidth:t,textHeight:o})}),[E,c,U,d]),useLayoutEffect((()=>{if(!l||"random"===u||!v||!f)return noop;const{current:e}=l;if(!e)return noop;const t=getShowController({visibleTimeout:v,hiddenTimeout:f,isVisible:()=>H.visible,onShow:H.show,onHide:H.hide});return e.addEventListener("play",t.start),e.addEventListener("pause",t.stop),e.paused||t.start(),()=>{e.removeEventListener("play",t.start),e.removeEventListener("pause",t.stop),t.stop()}}),[f,H,u,l,v]),useLayoutEffect((()=>{if(!l||"random"!==u||c&&!U||!d)return noop;const{current:e}=l;if(!e)return noop;const t=getRandomShowController({updateTimeout:m,getBounds:()=>{var e;const{textWidth:t,textHeight:o}=w(),{width:i=0,height:s=0}=null!==(e=N.current)&&void 0!==e?e:{};return{x:i-t,y:s-o}},onUpdate:F,showOptions:v&&f?{visibleTimeout:v,hiddenTimeout:f,isVisible:()=>H.visible,onShow:H.show,onHide:H.hide}:void 0});return e.addEventListener("play",t.start),e.addEventListener("pause",t.stop),e.paused?H.visible&&t.update():t.start(),()=>{e.removeEventListener("play",t.start),e.removeEventListener("pause",t.stop),t.stop()}}),[c,U,w,f,H,u,F,N,d,m,l,v]);const{rc:$}=useTheme(),{textWidth:I,textHeight:B}=w(),_=O();return React.createElement(TransitionFlex,Object.assign({hidden:H.hidden,componentRef:T,fill:!0,className:S.root},y,{style:Object.assign(Object.assign({},y.style),{fontSize:null!=U?U:c,left:null!=h?h:0,top:null!=g?g:0,width:null!=L?L:"100%",height:null!=V?V:"100%"})}),React.createElement("span",{ref:W,className:"random"===u?S.textRandom:S.textStripes},d),"stripes"===u&&I>0&&B>0&&React.createElement(WatermarkField,Object.assign({},null===(s=null===(i=null==$?void 0:$.VideoWatermark)||void 0===i?void 0:i.stripes)||void 0===s?void 0:s.field,{text:d,textWidth:I,textHeight:B,className:S.stripes})),"random"===u&&I>0&&B>0&&_&&!!z&&!!C&&React.createElement(TransitionGroup,{key:`${z}${C}`,component:null},React.createElement(Fade,{key:v&&f?void 0:`${_.x}-${_.y}`,timeout:null===(a=null===(r=null===(n=null==$?void 0:$.VideoWatermark)||void 0===n?void 0:n.random)||void 0===r?void 0:r.field)||void 0===a?void 0:a.transitionDuration},React.createElement(WatermarkField,{id:v&&f?void 0:`${_.x}-${_.y}`,text:d,textWidth:I,textHeight:B,width:I,height:B,patternTransform:"none",className:S.random,style:{left:_.x,top:_.y}}))))}));
+import{__rest}from"tslib";import React,{useLayoutEffect,useRef}from"react";import makeStyles from"@mui/styles/makeStyles";import useTheme from"@mui/styles/useTheme";import Fade from"@mui/material/Fade";import TransitionGroup from"react-transition-group/TransitionGroup";import toInt from"@jstoolkit/utils/toInt";import noop from"@jstoolkit/utils/noop";import useRefState from"@jstoolkit/react-hooks/useRefState";import useUpdate from"@jstoolkit/react-hooks/useUpdate";import useRefs from"@jstoolkit/react-hooks/useRefs";import useHideableState from"@jstoolkit/react-hooks/useHideableState";import useUpdatedRef from"@jstoolkit/react-hooks/useUpdatedRef";import TransitionFlex from"../TransitionFlex";import WatermarkField from"../WatermarkField";import{getShowController}from"./getShowController";import{getRandomShowController}from"./getRandomShowController";const useStyles=makeStyles((({rc:e})=>{var t,o,i,s,n,r,a,l;const d={position:"absolute",visibility:"hidden",opacity:0,zIndex:-1,whiteSpace:"nowrap",display:"inline-block"};return{root:{position:"absolute",fontSize:"inherit"},textStripes:Object.assign(Object.assign(Object.assign({},null===(t=null==e?void 0:e.VideoWatermark)||void 0===t?void 0:t.default),null===(o=null==e?void 0:e.VideoWatermark)||void 0===o?void 0:o.stripes),d),textRandom:Object.assign(Object.assign(Object.assign({},null===(i=null==e?void 0:e.VideoWatermark)||void 0===i?void 0:i.default),null===(s=null==e?void 0:e.VideoWatermark)||void 0===s?void 0:s.random),d),stripes:Object.assign(Object.assign({},null===(n=null==e?void 0:e.VideoWatermark)||void 0===n?void 0:n.default),null===(r=null==e?void 0:e.VideoWatermark)||void 0===r?void 0:r.stripes),random:Object.assign(Object.assign(Object.assign({},null===(a=null==e?void 0:e.VideoWatermark)||void 0===a?void 0:a.default),null===(l=null==e?void 0:e.VideoWatermark)||void 0===l?void 0:l.random),{position:"absolute"})}}));function scaleFontSize(e,t,o,i){const s=Math.min(o,i);return Math.floor(e*(s/100*t))}export default React.memo((function(e){var t,o,i,s,n,r,a,{videoRef:l,text:d,mode:u="stripes",updateTimeout:m,baseFontSize:c,scaleBySize:p,visibleTimeout:v,hiddenTimeout:f,x:h,y:g,width:b,height:k,className:x}=e,y=__rest(e,["videoRef","text","mode","updateTimeout","baseFontSize","scaleBySize","visibleTimeout","hiddenTimeout","x","y","width","height","className"]);const S=useStyles({classes:{root:x}}),R=useRef(null),j=useUpdate(),T=useRefs(R,j),W=useRef(null),[w,E]=useRefState({textWidth:0,textHeight:0}),[O,F]=useRefState(void 0),H=useHideableState({enabled:!0,visible:!0}),L=b&&toInt(b),V=k&&toInt(k),z=null!=L?L:null===(t=R.current)||void 0===t?void 0:t.offsetWidth,C=null!=V?V:null===(o=R.current)||void 0===o?void 0:o.offsetHeight,U=(()=>{if(c&&p){if(!z||!C)return;return scaleFontSize(c,p,z,C)}return c})(),N=useUpdatedRef(z&&C?{width:z,height:C}:void 0);useLayoutEffect((()=>{const{current:e}=W;if(!e)return;if(c&&!U)return;const{width:t,height:o}=e.getBoundingClientRect();E({textWidth:t,textHeight:o})}),[E,c,U,d]),useLayoutEffect((()=>{if(!l||"random"===u||!v||!f)return noop;const{current:e}=l;if(!e)return noop;const t=getShowController({visibleTimeout:v,hiddenTimeout:f,isVisible:()=>H.visible,onShow:H.show,onHide:H.hide});return e.addEventListener("play",t.start),e.addEventListener("pause",t.stop),e.paused||t.start(),()=>{e.removeEventListener("play",t.start),e.removeEventListener("pause",t.stop),t.stop()}}),[f,H,u,l,v]),useLayoutEffect((()=>{if(!l||"random"!==u||c&&!U||!d)return noop;const{current:e}=l;if(!e)return noop;const t=getRandomShowController({updateTimeout:m,getBounds:()=>{var e;const{textWidth:t,textHeight:o}=w(),{width:i=0,height:s=0}=null!==(e=N.current)&&void 0!==e?e:{};return{x:i-t,y:s-o}},onUpdate:F,showOptions:v&&f?{visibleTimeout:v,hiddenTimeout:f,isVisible:()=>H.visible,onShow:H.show,onHide:H.hide}:void 0});return e.addEventListener("play",t.start),e.addEventListener("pause",t.stop),e.paused?H.visible&&t.update():t.start(),()=>{e.removeEventListener("play",t.start),e.removeEventListener("pause",t.stop),t.stop()}}),[c,U,w,f,H,u,F,N,d,m,l,v]);const{rc:$}=useTheme(),{textWidth:I,textHeight:B}=w(),_=O();return React.createElement(TransitionFlex,Object.assign({hidden:H.hidden,componentRef:T,fill:!0,className:S.root},y,{style:Object.assign(Object.assign({},y.style),{fontSize:null!=U?U:c,left:null!=h?h:0,top:null!=g?g:0,width:null!=L?L:"100%",height:null!=V?V:"100%"})}),React.createElement("span",{ref:W,className:"random"===u?S.textRandom:S.textStripes},d),"stripes"===u&&I>0&&B>0&&React.createElement(WatermarkField,Object.assign({},null===(s=null===(i=null==$?void 0:$.VideoWatermark)||void 0===i?void 0:i.stripes)||void 0===s?void 0:s.field,{text:d,textWidth:I,textHeight:B,className:S.stripes})),"random"===u&&I>0&&B>0&&_&&!!z&&!!C&&React.createElement(TransitionGroup,{key:`${z}${C}`,component:null},React.createElement(Fade,{key:v&&f?void 0:`${_.x}-${_.y}`,timeout:null===(a=null===(r=null===(n=null==$?void 0:$.VideoWatermark)||void 0===n?void 0:n.random)||void 0===r?void 0:r.field)||void 0===a?void 0:a.transitionDuration},React.createElement(WatermarkField,{id:v&&f?void 0:`${_.x}-${_.y}`,text:d,textWidth:I,textHeight:B,width:I,height:B,patternTransform:null,className:S.random,style:{left:_.x,top:_.y}}))))}));

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

181398

increased by2.27%

Lines of code

1091

increased by1.39%

Worsened metrics

Number of lines in readme file

6

decreased by-62.5%

No dependency changes