@jstoolkit/styled-components - npm Package Compare versions

Comparing version 1.14.0 to 1.15.0

avatars/Avatar/Avatar.d.ts

 import React from 'react';
-import { FlexComponentProps } from 'reflexy/styled';
+import { type FlexComponentProps } from 'reflexy/styled';
 export interface AvatarProps extends FlexComponentProps<'div'> {
@@ -4,0 +4,0 @@ img?: string | undefined;

Badge/Badge.d.ts

 import React from 'react';
-import { FlexComponentProps } from 'reflexy/styled';
+import { type FlexComponentProps } from 'reflexy/styled';
 export interface BadgeProps extends FlexComponentProps {
@@ -4,0 +4,0 @@ count?: React.ReactNode | undefined;

Badge/BadgeIcon/BadgeIcon.d.ts

 import React from 'react';
-import { FlexComponentProps } from 'reflexy/styled';
+import { type FlexComponentProps } from 'reflexy/styled';
 import type { Theme } from '../../theme';
@@ -4,0 +4,0 @@ export interface BadgeIconProps extends FlexComponentProps, Required<React.PropsWithChildren<{}>> {

Button/Button.d.ts

 import React from 'react';
-import { FlexAllProps } from 'reflexy/styled';
+import { type FlexAllProps } from 'reflexy/styled';
 import type { GetOverridedKeys } from '../types/local';
@@ -4,0 +4,0 @@ export interface ButtonSizes {

Button/useStyles.d.ts

 import type { ButtonProps } from './Button';
 type MakeStylesProps = Pick<ButtonProps, 'variant'>;
 declare const useStyles: (props: MakeStylesProps & {
-    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">;
+    classes?: OptionalToUndefined<Partial<import("@mui/styles/withStyles").ClassNameMap<"root" | "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<"root" | "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;

Button/useStyles.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import makeStyles from"@mui/styles/makeStyles";function excludeHoverRules(e){if(null==e)return e;const{"&:hover":o,"&&:hover":i}=e;return __rest(e,["&:hover","&&:hover"])}const useStyles=makeStyles((e=>{var o,i,l,r,n,t,s,a,c,d,v,u,b,g,O,j,h,f,m,x;const p=e=>"outlined"===e?"1px":"0px",z=null!==(i=null===(o=e.rc)||void 0===o?void 0:o.Button)&&void 0!==i?i:{},{root:k,default:C,primary:y,secondary:H,"variant-text":S,"variant-outlined":$,"variant-filled":R,"size-contain":_,"size-xs":w,"size-s":A,"size-m":E,"size-l":N,"size-xl":P,css:W}=z,B=__rest(z,["root","default","primary","secondary","variant-text","variant-outlined","variant-filled","size-contain","size-xs","size-s","size-m","size-l","size-xl","css"]),F=Object.getOwnPropertyNames(B).reduce(((e,o)=>{if(0===o.indexOf("size-"))e.sizes[o]=Object.assign({},B[o]);else if(0===o.indexOf("variant-"))e.variants[o]=Object.assign({},B[o]);else{const i=B[o];Object.getOwnPropertyNames(i).forEach((l=>{e.colors[`${o}-${l}`]=Object.assign({},i[l])}))}return e}),{sizes:{},colors:{},variants:{}});return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({root:Object.assign(Object.assign({borderRadius:"var(--rc--border-radius-xs, 3px)",border:"none",outline:"none",WebkitTapHighlightColor:"transparent",fontFamily:"inherit",lineHeight:1.5,cursor:"pointer",userSelect:"none",textAlign:"center",backgroundColor:"transparent",color:"inherit",padding:0,margin:0,touchAction:"manipulation"},k),{"&:disabled":Object.assign({cursor:"default",opacity:"var(--rc--disabled-opacity, 0.5)",pointerEvents:"none"},null==k?void 0:k["&:disabled"])})},W),F.sizes),{"size-contain":Object.assign({lineHeight:"inherit"},_),"size-xs":Object.assign({fontSize:"0.75em",padding:({variant:e})=>{const o=p(e);return`calc((1.75rem - 1.5em) / 2 - ${o}) calc(0.75rem - ${o})`}},w),"size-s":Object.assign({fontSize:"0.875em",padding:({variant:e})=>{const o=p(e);return`calc((2rem - 1.5em) / 2 - ${o}) calc(1rem - ${o})`}},A),"size-m":Object.assign({fontSize:"1em",padding:({variant:e})=>{const o=p(e);return`calc((2.5rem - 1.5em) / 2 - ${o}) calc(1.25rem - ${o})`}},E),"size-l":Object.assign({fontSize:"1.125em",padding:({variant:e})=>{const o=p(e);return`calc((3rem - 1.5em) / 2 - ${o}) calc(1.25rem - ${o})`}},N),"size-xl":Object.assign({fontSize:"1.25em",padding:({variant:e})=>{const o=p(e);return`calc((3.5rem - 1.5em) / 2 - ${o}) calc(1.25rem - ${o})`}},P)}),F.variants),{"variant-text":Object.assign({},S),"variant-outlined":Object.assign({borderWidth:"1px",borderStyle:"solid"},$),"variant-filled":Object.assign({},R)}),F.colors),{"default-filled":Object.assign(Object.assign({backgroundColor:"rgb(210, 220, 220)",color:"rgb(70, 80, 80)"},excludeHoverRules(null==C?void 0:C.filled)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgb(195, 205, 205)",color:"rgb(50, 60, 60)"},null==k?void 0:k["&:hover"]),null===(l=null==C?void 0:C.filled)||void 0===l?void 0:l["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgb(210, 220, 220)"},null==k?void 0:k["&:active"]),null===(r=null==C?void 0:C.filled)||void 0===r?void 0:r["&:active"])}),"default-outlined":Object.assign(Object.assign({borderColor:"rgb(195, 205, 205)",color:"rgb(70, 80, 80)"},excludeHoverRules(null==C?void 0:C.outlined)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgb(225, 235, 235)"},null==k?void 0:k["&:hover"]),null===(n=null==C?void 0:C.outlined)||void 0===n?void 0:n["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgb(210, 220, 220)"},null==k?void 0:k["&:active"]),null===(t=null==C?void 0:C.outlined)||void 0===t?void 0:t["&:active"])}),"default-text":Object.assign(Object.assign({color:"rgb(70, 80, 80)"},excludeHoverRules(null==C?void 0:C.text)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgba(225, 235, 235, 0.2)"},null==k?void 0:k["&:hover"]),null===(s=null==C?void 0:C.text)||void 0===s?void 0:s["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgba(210, 220, 220, 0.7)"},null==k?void 0:k["&:active"]),null===(a=null==C?void 0:C.text)||void 0===a?void 0:a["&:active"])}),"primary-filled":Object.assign(Object.assign({backgroundColor:"rgb(92, 184, 92)",color:"#fff"},excludeHoverRules(null==y?void 0:y.filled)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgb(73, 167, 73)"},null==k?void 0:k["&:hover"]),null===(c=null==y?void 0:y.filled)||void 0===c?void 0:c["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgb(92, 184, 92)"},null==k?void 0:k["&:active"]),null===(d=null==y?void 0:y.filled)||void 0===d?void 0:d["&:active"])}),"primary-outlined":Object.assign(Object.assign({borderColor:"rgb(92, 184, 92)",color:"rgb(92, 184, 92)"},excludeHoverRules(null==y?void 0:y.outlined)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgba(73, 167, 73, 0.2)",color:"rgb(73, 167, 73)"},null==k?void 0:k["&:hover"]),null===(v=null==y?void 0:y.outlined)||void 0===v?void 0:v["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgb(92, 184, 92)",color:"#fff"},null==k?void 0:k["&:active"]),null===(u=null==y?void 0:y.outlined)||void 0===u?void 0:u["&:active"])}),"primary-text":Object.assign(Object.assign({color:"rgb(92, 184, 92)"},excludeHoverRules(null==y?void 0:y.text)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgba(73, 167, 73, 0.2)",color:"rgb(73, 167, 73)"},null==k?void 0:k["&:hover"]),null===(b=null==y?void 0:y.text)||void 0===b?void 0:b["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgb(92, 184, 92)",color:"#fff"},null==k?void 0:k["&:active"]),null===(g=null==y?void 0:y.text)||void 0===g?void 0:g["&:active"])}),"secondary-filled":Object.assign(Object.assign({backgroundColor:"rgb(220, 0, 78)",color:"#fff"},excludeHoverRules(null==H?void 0:H.filled)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgb(200, 0, 58)"},null==k?void 0:k["&:hover"]),null===(O=null==H?void 0:H.filled)||void 0===O?void 0:O["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgb(220, 0, 78)"},null==k?void 0:k["&:active"]),null===(j=null==H?void 0:H.filled)||void 0===j?void 0:j["&:active"])}),"secondary-outlined":Object.assign(Object.assign({borderColor:"rgb(220, 0, 78)",color:"rgb(220, 0, 78)"},excludeHoverRules(null==H?void 0:H.outlined)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgba(200, 0, 58, 0.2)",color:"rgb(200, 0, 58)"},null==k?void 0:k["&:hover"]),null===(h=null==H?void 0:H.outlined)||void 0===h?void 0:h["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgb(220, 0, 78)",color:"#fff"},null==k?void 0:k["&:active"]),null===(f=null==H?void 0:H.outlined)||void 0===f?void 0:f["&:active"])}),"secondary-text":Object.assign(Object.assign({color:"rgb(220, 0, 78)"},excludeHoverRules(null==H?void 0:H.text)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgba(200, 0, 58, 0.2)",color:"rgb(200, 0, 58)"},null==k?void 0:k["&:hover"]),null===(m=null==H?void 0:H.text)||void 0===m?void 0:m["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgb(220, 0, 78)",color:"#fff"},null==k?void 0:k["&:active"]),null===(x=null==H?void 0:H.text)||void 0===x?void 0:x["&:active"])})})}));export default useStyles;
+import{__rest}from"tslib";import makeStyles from"@mui/styles/makeStyles";function excludeHoverRules(e){if(null==e)return e;const{"&:hover":o,"&&:hover":i}=e;return __rest(e,["&:hover","&&:hover"])}const useStyles=makeStyles((e=>{var o,i,l,r,n,t,s,a,c,d,v,u,b,g,O,j,h,f,m,x;const p=e=>"outlined"===e?"1px":"0px",z=null!==(i=null===(o=e.rc)||void 0===o?void 0:o.Button)&&void 0!==i?i:{},{root:k,default:C,primary:y,secondary:H,"variant-text":S,"variant-outlined":$,"variant-filled":R,"size-contain":_,"size-xs":w,"size-s":A,"size-m":E,"size-l":N,"size-xl":P,css:W}=z,B=__rest(z,["root","default","primary","secondary","variant-text","variant-outlined","variant-filled","size-contain","size-xs","size-s","size-m","size-l","size-xl","css"]),F=Object.getOwnPropertyNames(B).reduce(((e,o)=>{if(0===o.indexOf("size-")){const i=o;e.sizes[i]=Object.assign({},B[i])}else if(0===o.indexOf("variant-")){const i=o;e.variants[i]=Object.assign({},B[i])}else{const i=o,l=B[i];l&&Object.getOwnPropertyNames(l).forEach((o=>{const r=o;e.colors[`${i}-${r}`]=Object.assign({},l[r])}))}return e}),{sizes:{},colors:{},variants:{}});return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({root:Object.assign(Object.assign({borderRadius:"var(--rc--border-radius-xs, 3px)",border:"none",outline:"none",WebkitTapHighlightColor:"transparent",fontFamily:"inherit",lineHeight:1.5,cursor:"pointer",userSelect:"none",textAlign:"center",backgroundColor:"transparent",color:"inherit",padding:0,margin:0,touchAction:"manipulation"},k),{"&:disabled":Object.assign({cursor:"default",opacity:"var(--rc--disabled-opacity, 0.5)",pointerEvents:"none"},null==k?void 0:k["&:disabled"])})},W),F.sizes),{"size-contain":Object.assign({lineHeight:"inherit"},_),"size-xs":Object.assign({fontSize:"0.75em",padding:({variant:e})=>{const o=p(e);return`calc((1.75rem - 1.5em) / 2 - ${o}) calc(0.75rem - ${o})`}},w),"size-s":Object.assign({fontSize:"0.875em",padding:({variant:e})=>{const o=p(e);return`calc((2rem - 1.5em) / 2 - ${o}) calc(1rem - ${o})`}},A),"size-m":Object.assign({fontSize:"1em",padding:({variant:e})=>{const o=p(e);return`calc((2.5rem - 1.5em) / 2 - ${o}) calc(1.25rem - ${o})`}},E),"size-l":Object.assign({fontSize:"1.125em",padding:({variant:e})=>{const o=p(e);return`calc((3rem - 1.5em) / 2 - ${o}) calc(1.25rem - ${o})`}},N),"size-xl":Object.assign({fontSize:"1.25em",padding:({variant:e})=>{const o=p(e);return`calc((3.5rem - 1.5em) / 2 - ${o}) calc(1.25rem - ${o})`}},P)}),F.variants),{"variant-text":Object.assign({},S),"variant-outlined":Object.assign({borderWidth:"1px",borderStyle:"solid"},$),"variant-filled":Object.assign({},R)}),F.colors),{"default-filled":Object.assign(Object.assign({backgroundColor:"rgb(210, 220, 220)",color:"rgb(70, 80, 80)"},excludeHoverRules(null==C?void 0:C.filled)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgb(195, 205, 205)",color:"rgb(50, 60, 60)"},null==k?void 0:k["&:hover"]),null===(l=null==C?void 0:C.filled)||void 0===l?void 0:l["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgb(210, 220, 220)"},null==k?void 0:k["&:active"]),null===(r=null==C?void 0:C.filled)||void 0===r?void 0:r["&:active"])}),"default-outlined":Object.assign(Object.assign({borderColor:"rgb(195, 205, 205)",color:"rgb(70, 80, 80)"},excludeHoverRules(null==C?void 0:C.outlined)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgb(225, 235, 235)"},null==k?void 0:k["&:hover"]),null===(n=null==C?void 0:C.outlined)||void 0===n?void 0:n["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgb(210, 220, 220)"},null==k?void 0:k["&:active"]),null===(t=null==C?void 0:C.outlined)||void 0===t?void 0:t["&:active"])}),"default-text":Object.assign(Object.assign({color:"rgb(70, 80, 80)"},excludeHoverRules(null==C?void 0:C.text)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgba(225, 235, 235, 0.2)"},null==k?void 0:k["&:hover"]),null===(s=null==C?void 0:C.text)||void 0===s?void 0:s["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgba(210, 220, 220, 0.7)"},null==k?void 0:k["&:active"]),null===(a=null==C?void 0:C.text)||void 0===a?void 0:a["&:active"])}),"primary-filled":Object.assign(Object.assign({backgroundColor:"rgb(92, 184, 92)",color:"#fff"},excludeHoverRules(null==y?void 0:y.filled)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgb(73, 167, 73)"},null==k?void 0:k["&:hover"]),null===(c=null==y?void 0:y.filled)||void 0===c?void 0:c["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgb(92, 184, 92)"},null==k?void 0:k["&:active"]),null===(d=null==y?void 0:y.filled)||void 0===d?void 0:d["&:active"])}),"primary-outlined":Object.assign(Object.assign({borderColor:"rgb(92, 184, 92)",color:"rgb(92, 184, 92)"},excludeHoverRules(null==y?void 0:y.outlined)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgba(73, 167, 73, 0.2)",color:"rgb(73, 167, 73)"},null==k?void 0:k["&:hover"]),null===(v=null==y?void 0:y.outlined)||void 0===v?void 0:v["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgb(92, 184, 92)",color:"#fff"},null==k?void 0:k["&:active"]),null===(u=null==y?void 0:y.outlined)||void 0===u?void 0:u["&:active"])}),"primary-text":Object.assign(Object.assign({color:"rgb(92, 184, 92)"},excludeHoverRules(null==y?void 0:y.text)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgba(73, 167, 73, 0.2)",color:"rgb(73, 167, 73)"},null==k?void 0:k["&:hover"]),null===(b=null==y?void 0:y.text)||void 0===b?void 0:b["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgb(92, 184, 92)",color:"#fff"},null==k?void 0:k["&:active"]),null===(g=null==y?void 0:y.text)||void 0===g?void 0:g["&:active"])}),"secondary-filled":Object.assign(Object.assign({backgroundColor:"rgb(220, 0, 78)",color:"#fff"},excludeHoverRules(null==H?void 0:H.filled)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgb(200, 0, 58)"},null==k?void 0:k["&:hover"]),null===(O=null==H?void 0:H.filled)||void 0===O?void 0:O["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgb(220, 0, 78)"},null==k?void 0:k["&:active"]),null===(j=null==H?void 0:H.filled)||void 0===j?void 0:j["&:active"])}),"secondary-outlined":Object.assign(Object.assign({borderColor:"rgb(220, 0, 78)",color:"rgb(220, 0, 78)"},excludeHoverRules(null==H?void 0:H.outlined)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgba(200, 0, 58, 0.2)",color:"rgb(200, 0, 58)"},null==k?void 0:k["&:hover"]),null===(h=null==H?void 0:H.outlined)||void 0===h?void 0:h["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgb(220, 0, 78)",color:"#fff"},null==k?void 0:k["&:active"]),null===(f=null==H?void 0:H.outlined)||void 0===f?void 0:f["&:active"])}),"secondary-text":Object.assign(Object.assign({color:"rgb(220, 0, 78)"},excludeHoverRules(null==H?void 0:H.text)),{"@media (hover: hover)":{"&:hover":Object.assign(Object.assign({backgroundColor:"rgba(200, 0, 58, 0.2)",color:"rgb(200, 0, 58)"},null==k?void 0:k["&:hover"]),null===(m=null==H?void 0:H.text)||void 0===m?void 0:m["&:hover"])},"&:active":Object.assign(Object.assign({backgroundColor:"rgb(220, 0, 78)",color:"#fff"},null==k?void 0:k["&:active"]),null===(x=null==H?void 0:H.text)||void 0===x?void 0:x["&:active"])})})}));export default useStyles;

Checkbox/Checkbox.d.ts

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

Checkbox/CheckboxGroup.d.ts

 import React from 'react';
-import { FlexComponentProps } from 'reflexy/styled';
-import { CheckboxContextValue } from './CheckboxContext';
+import { type FlexComponentProps } from 'reflexy/styled';
+import { type CheckboxContextValue } from './CheckboxContext';
 export interface CheckboxGroupChangeEvent<V = unknown> {
@@ -5,0 +5,0 @@ name?: string | undefined;

Checkbox/CheckboxGroup.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React,{useState,useMemo}from"react";import{Flex}from"reflexy/styled";import useRefCallback from"@jstoolkit/react-hooks/useRefCallback";import CheckboxContext from"./CheckboxContext";export default function CheckboxGroup(e){var{name:t,value:o,onChange:a}=e,r=__rest(e,["name","value","onChange"]);const[l,c]=useState(o),n=useRefCallback((e=>{a?a({value:e,name:t}):c(e)})),m=useMemo((()=>({checkedValue:a?o:l,onChecked:n})),[l,o,a,n]);return React.createElement(CheckboxContext.Provider,{value:m},React.createElement(Flex,Object.assign({role:"radiogroup"},r)))}
+import{__rest}from"tslib";import React,{useState,useMemo}from"react";import{Flex}from"reflexy/styled";import useRefCallback from"@jstoolkit/react-hooks/useRefCallback";import CheckboxContext,{}from"./CheckboxContext";export default function CheckboxGroup(e){var{name:t,value:o,onChange:a}=e,r=__rest(e,["name","value","onChange"]);const[l,c]=useState(o),n=useRefCallback((e=>{a?a({value:e,name:t}):c(e)})),m=useMemo((()=>({checkedValue:a?o:l,onChecked:n})),[l,o,a,n]);return React.createElement(CheckboxContext.Provider,{value:m},React.createElement(Flex,Object.assign({role:"radiogroup"},r)))}

Divider/Divider.d.ts

 import React from 'react';
-import { FlexAllProps, DefaultComponentType } from 'reflexy/styled';
+import { type FlexAllProps, type DefaultComponentType } from 'reflexy/styled';
 export type DividerProps<C extends React.ElementType = DefaultComponentType> = {
@@ -4,0 +4,0 @@ light?: boolean | undefined;

DropDown/DropDown.d.ts

 import React from 'react';
 import type { FlexComponentProps } from 'reflexy/styled';
-import { OutsideClickListenerProps } from 'react-outside-click-listener';
+import { type OutsideClickListenerProps } from 'react-outside-click-listener';
 export interface DropDownProps extends Partial<Pick<OutsideClickListenerProps, 'onOutsideClick'>>, Omit<FlexComponentProps<'div'>, keyof React.DOMAttributes<any>> {
@@ -5,0 +5,0 @@ expanded?: boolean | undefined;

DropDown/DropDown.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React,{useCallback,useState,useRef,useMemo}from"react";import makeStyles from"@mui/styles/makeStyles";import FlexWithRef from"reflexy/FlexWithRef";import{OutsideClickListener}from"react-outside-click-listener";import DropDownContext from"./DropDownContext";const useStyles=makeStyles((e=>{var t,o;return{root:Object.assign({position:"relative",cursor:"pointer",userSelect:"none"},null===(o=null===(t=e.rc)||void 0===t?void 0:t.DropDown)||void 0===o?void 0:o.root)}}));export default function DropDown(e){var{expanded:t,onToggle:o,onToggled:r,floating:n=!0,hideOnOutsideClick:s=n,className:l,expandedClassName:a,onOutsideClick:i,children:c}=e,d=__rest(e,["expanded","onToggle","onToggled","floating","hideOnOutsideClick","className","expandedClassName","onOutsideClick","children"]);const[u,m]=useState(!o&&!!t),p=o?!!t:u,f=useRef(!1);f.current=p;const g=useCallback((e=>{const t="boolean"==typeof e?e:!f.current;t!==f.current&&(o?o(t):(m(t),r&&r(t)))}),[o,r]),C=useMemo((()=>({floating:n,expanded:p,toggle:g})),[n,p,g]),k=useCallback((e=>{i?i(e):g(!1)}),[i,g]),x=useStyles({classes:{root:`${l||""} ${f.current&&a||""}`.trim()}});return React.createElement(DropDownContext.Provider,{value:C},React.createElement(OutsideClickListener,{disabled:!s||!f.current,onOutsideClick:k},React.createElement(FlexWithRef,Object.assign({component:"div",column:!0,className:x.root,"aria-expanded":f.current,"data-dropdown":""},d),c)))}
+import{__rest}from"tslib";import React,{useCallback,useState,useRef,useMemo}from"react";import makeStyles from"@mui/styles/makeStyles";import FlexWithRef from"reflexy/FlexWithRef";import{OutsideClickListener}from"react-outside-click-listener";import DropDownContext,{}from"./DropDownContext";const useStyles=makeStyles((e=>{var t,o;return{root:Object.assign({position:"relative",cursor:"pointer",userSelect:"none"},null===(o=null===(t=e.rc)||void 0===t?void 0:t.DropDown)||void 0===o?void 0:o.root)}}));export default function DropDown(e){var{expanded:t,onToggle:o,onToggled:r,floating:n=!0,hideOnOutsideClick:s=n,className:l,expandedClassName:a,onOutsideClick:i,children:c}=e,d=__rest(e,["expanded","onToggle","onToggled","floating","hideOnOutsideClick","className","expandedClassName","onOutsideClick","children"]);const[u,m]=useState(!o&&!!t),p=o?!!t:u,f=useRef(!1);f.current=p;const g=useCallback((e=>{const t="boolean"==typeof e?e:!f.current;t!==f.current&&(o?o(t):(m(t),r&&r(t)))}),[o,r]),C=useMemo((()=>({floating:n,expanded:p,toggle:g})),[n,p,g]),k=useCallback((e=>{i?i(e):g(!1)}),[i,g]),x=useStyles({classes:{root:`${l||""} ${f.current&&a||""}`.trim()}});return React.createElement(DropDownContext.Provider,{value:C},React.createElement(OutsideClickListener,{disabled:!s||!f.current,onOutsideClick:k},React.createElement(FlexWithRef,Object.assign({component:"div",column:!0,className:x.root,"aria-expanded":f.current,"data-dropdown":""},d),c)))}

DropDown/DropDownBox/DropDownBox.d.ts

 import React from 'react';
-import { FlexComponentProps } from 'reflexy/styled';
+import { type FlexComponentProps } from 'reflexy/styled';
 /** Map of html tags and their selector */
@@ -4,0 +4,0 @@ export type HtmlTagSelectorMap = {

DropDown/DropDownBox/DropDownBox.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React,{useCallback,useContext,useRef,useEffect}from"react";import makeStyles from"@mui/styles/makeStyles";import{Flex}from"reflexy/styled";import DropDownContext from"../DropDownContext";function isShouldClose(e,o,t){const n=e.nodeName.toLowerCase();return!(!(n in t)||null!=t[n]&&!e.matches(t[n]))||!(e===o||!e.parentElement)&&isShouldClose(e.parentElement,o,t)}const useStyles=makeStyles((e=>({root:({floating:o,prerender:t})=>{var n,r;return Object.assign(Object.assign({"&[hidden]":t?{display:"none"}:void 0},o?{cursor:"default",zIndex:1,position:"absolute",top:"100%",minWidth:"100%"}:void 0),null===(r=null===(n=e.rc)||void 0===n?void 0:n.DropDownBox)||void 0===r?void 0:r.root)}})));export default function DropDownBox(e){var{closeOnClick:o,prerender:t,className:n}=e,r=__rest(e,["closeOnClick","prerender","className"]);const s=useRef(null),l=useRef(o),{expanded:a,floating:c,toggle:i}=useContext(DropDownContext),u=useStyles({classes:{root:n},floating:c,prerender:t});useEffect((()=>{l.current=o}),[o]);const d=useCallback((e=>{let o=!1;const t=l.current;o="object"==typeof t?!!s.current&&isShouldClose(e.target,s.current,t):"function"==typeof t?t(e):!!t,o&&i(!1)}),[i]);return a||t?React.createElement(Flex,Object.assign({column:!0,component:"div",componentRef:s,className:u.root,onClick:d,hidden:!a,"aria-expanded":a,"data-dropdown-box":""},r)):null}
+import{__rest}from"tslib";import React,{useCallback,useContext,useRef,useEffect}from"react";import makeStyles from"@mui/styles/makeStyles";import{Flex}from"reflexy/styled";import DropDownContext,{}from"../DropDownContext";function isShouldClose(e,o,t){const n=e.nodeName.toLowerCase();if(n in t){const o=t[n];if(null==o||e.matches(o))return!0}return!(e===o||!e.parentElement)&&isShouldClose(e.parentElement,o,t)}const useStyles=makeStyles((e=>({root:({floating:o,prerender:t})=>{var n,r;return Object.assign(Object.assign({"&[hidden]":t?{display:"none"}:void 0},o?{cursor:"default",zIndex:1,position:"absolute",top:"100%",minWidth:"100%"}:void 0),null===(r=null===(n=e.rc)||void 0===n?void 0:n.DropDownBox)||void 0===r?void 0:r.root)}})));export default function DropDownBox(e){var{closeOnClick:o,prerender:t,className:n}=e,r=__rest(e,["closeOnClick","prerender","className"]);const s=useRef(null),l=useRef(o),{expanded:a,floating:c,toggle:i}=useContext(DropDownContext),u=useStyles({classes:{root:n},floating:c,prerender:t});useEffect((()=>{l.current=o}),[o]);const d=useCallback((e=>{let o=!1;const t=l.current;o="object"==typeof t?!!s.current&&isShouldClose(e.target,s.current,t):"function"==typeof t?t(e):!!t,o&&i(!1)}),[i]);return a||t?React.createElement(Flex,Object.assign({column:!0,component:"div",componentRef:s,className:u.root,onClick:d,hidden:!a,"aria-expanded":a,"data-dropdown-box":""},r)):null}

DropDown/DropDownLabel/DropDownLabel.d.ts

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

DropDown/index.d.ts

@@ -5,3 +5,3 @@ export { default as DropDownContext } from './DropDownContext';
 export * from './DropDown';
-export { default as DropDownButton, DropDownProps as DropDownButtonProps } from './DropDown';
+export { default as DropDownButton, type DropDownProps as DropDownButtonProps } from './DropDown';
 export { default as DropDownLabel } from './DropDownLabel';
@@ -8,0 +8,0 @@ export * from './DropDownLabel';

ErrorBoundary/DefaultRenderer.d.ts

 /// <reference types="react" />
-import { FlexComponentProps } from 'reflexy/styled';
+import { type FlexComponentProps } from 'reflexy/styled';
 export interface DefaultRendererProps extends FlexComponentProps {
@@ -4,0 +4,0 @@ readonly error: unknown;

ErrorBoundary/ErrorBoundary.js

@@ -1,1 +0,1 @@
-import React from"react";import DefaultRenderer from"./DefaultRenderer";export default class ErrorBoundary extends React.Component{constructor(){super(...arguments),this.state={error:void 0}}static getDerivedStateFromProps(r,e){var t;return r.error!==e.error?{error:null!==(t=r.error)&&void 0!==t?t:e.error}:null}static getDerivedStateFromError(r){return{error:r}}componentDidCatch(r,e){const{onError:t}=this.props;t&&t(r,e)}render(){const{renderer:r,children:e}=this.props,{error:t}=this.state;return null==t?e:r?r(t):null}}ErrorBoundary.defaultRenderer=r=>React.createElement(DefaultRenderer,{error:r});
+import React from"react";import DefaultRenderer from"./DefaultRenderer";class ErrorBoundary extends React.Component{constructor(){super(...arguments),this.state={error:void 0}}static getDerivedStateFromProps(r,e){var t;return r.error!==e.error?{error:null!==(t=r.error)&&void 0!==t?t:e.error}:null}static getDerivedStateFromError(r){return{error:r}}componentDidCatch(r,e){const{onError:t}=this.props;t&&t(r,e)}render(){const{renderer:r,children:e}=this.props,{error:t}=this.state;return null==t?e:r?r(t):null}}ErrorBoundary.defaultRenderer=r=>React.createElement(DefaultRenderer,{error:r});export default ErrorBoundary;

Field/Field.d.ts

 import React from 'react';
-import { FlexComponentProps } from 'reflexy';
+import { type FlexComponentProps } from 'reflexy';
 import type { GetOverridedKeys } from '../types/local';
@@ -7,3 +7,3 @@ export interface FieldStates {
 export type FieldState = GetOverridedKeys<'default' | 'error' | 'warn' | 'info', FieldStates>;
-type FlexContent<T extends React.ElementType> = FlexComponentProps<T> & {
+type FlexContent<T extends React.ElementType> = Omit<FlexComponentProps<T>, 'content'> & {
     content?: React.ReactNode | undefined;
@@ -10,0 +10,0 @@ };

Field/Field.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React from"react";import makeStyles from"@mui/styles/makeStyles";import clsx from"clsx";import{Flex}from"reflexy";import{isValidReactNode}from"../isValidReactNode";const useStyles=makeStyles((e=>{var l,t;const o=null!==(t=null===(l=e.rc)||void 0===l?void 0:l.Field)&&void 0!==t?t:{},{root:s,label:a,controls:n,helperText:r,row:c,column:i}=o,b=__rest(o,["root","label","controls","helperText","row","column"]),d=Object.getOwnPropertyNames(b).reduce(((e,l)=>{const t=b[l];return e.root[`state-${l}`]=Object.assign({},null==t?void 0:t.root),e.label[`state-${l}-label`]=Object.assign({},null==t?void 0:t.label),e.controls[`state-${l}-controls`]=Object.assign({},null==t?void 0:t.controls),e.helperText[`state-${l}-helperText`]=Object.assign({},null==t?void 0:t.helperText),e}),{root:{},label:{},controls:{},helperText:{}}),m={row:(null==c?void 0:c.root)&&Object.assign({},c.root),"row-label":(null==c?void 0:c.label)&&Object.assign({},c.label),"row-controls":(null==c?void 0:c.controls)&&Object.assign({},c.controls),"row-helperText":(null==c?void 0:c.helperText)&&Object.assign({},c.helperText),column:(null==i?void 0:i.root)&&Object.assign({},i.root),"column-label":(null==i?void 0:i.label)&&Object.assign({},i.label),"column-controls":(null==i?void 0:i.controls)&&Object.assign({},i.controls),"column-helperText":(null==i?void 0:i.helperText)&&Object.assign({},i.helperText)};return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({root:Object.assign({},s),label:Object.assign({},a),controls:Object.assign({},n),helperText:Object.assign({cursor:"default",marginTop:"0.5em",fontSize:"0.85em",color:"inherit",opacity:"var(--rc--placeholder-opacity, 0.7)",textAlign:"left"},r)},m),{"row-label":Object.assign({width:"auto",marginRight:"1.5em",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},m["row-label"]),"column-label":Object.assign({paddingBottom:"0.5em"},m["column-label"])}),d.root),d.label),d.controls),d.helperText)}));export default function Field(e){var{column:l,row:t=!l,label:o,container:s,controls:a=s,helperText:n,state:r="default",children:c,className:i}=e,b=__rest(e,["column","row","label","container","controls","helperText","state","children","className"]);const d=isValidReactNode(o)?{content:o}:o,{children:m,content:u=m,className:p}=d,x=__rest(d,["children","content","className"]),g=isValidReactNode(n)?{content:n}:n,{children:h,content:O=h,className:j}=g,f=__rest(g,["children","content","className"]),v=useStyles(),T=l?"column":"row";return React.createElement(Flex,Object.assign({row:t,column:l,alignItems:l?"flex-start":"baseline",className:clsx(v.root,v[T],v[`state-${r}`],i),"data-field":"","data-field-dir":T,"data-field-state":r||void 0},b),u&&React.createElement(Flex,Object.assign({grow:!1,shrink:!1,justifyContent:t?"flex-end":void 0,component:"label","data-field-label":""},x,{className:clsx(v.label,v[`${T}-label`],v[`state-${r}-label`],p)}),u),React.createElement(Flex,Object.assign({column:!0,shrink:!1,hfill:l},a,{className:clsx(v.controls,v[`${T}-controls`],v[`state-${r}-controls`],null==a?void 0:a.className)}),c,null!=O&&React.createElement(Flex,Object.assign({shrink:!1,"data-field-helper-text":""},f,{className:clsx(v.helperText,v[`${T}-helperText`],v[`state-${r}-helperText`],j)}),O)))}
+import{__rest}from"tslib";import React from"react";import makeStyles from"@mui/styles/makeStyles";import clsx from"clsx";import{Flex}from"reflexy";import{isValidReactNode}from"../isValidReactNode";const useStyles=makeStyles((e=>{var l,t;const o=null!==(t=null===(l=e.rc)||void 0===l?void 0:l.Field)&&void 0!==t?t:{},{root:s,label:a,controls:n,helperText:r,row:c,column:i}=o,b=__rest(o,["root","label","controls","helperText","row","column"]),d=Object.getOwnPropertyNames(b).reduce(((e,l)=>{const t=l,o=b[t];return e.root[`state-${t}`]=Object.assign({},null==o?void 0:o.root),e.label[`state-${t}-label`]=Object.assign({},null==o?void 0:o.label),e.controls[`state-${t}-controls`]=Object.assign({},null==o?void 0:o.controls),e.helperText[`state-${t}-helperText`]=Object.assign({},null==o?void 0:o.helperText),e}),{root:{},label:{},controls:{},helperText:{}}),m={row:(null==c?void 0:c.root)&&Object.assign({},c.root),"row-label":(null==c?void 0:c.label)&&Object.assign({},c.label),"row-controls":(null==c?void 0:c.controls)&&Object.assign({},c.controls),"row-helperText":(null==c?void 0:c.helperText)&&Object.assign({},c.helperText),column:(null==i?void 0:i.root)&&Object.assign({},i.root),"column-label":(null==i?void 0:i.label)&&Object.assign({},i.label),"column-controls":(null==i?void 0:i.controls)&&Object.assign({},i.controls),"column-helperText":(null==i?void 0:i.helperText)&&Object.assign({},i.helperText)};return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({root:Object.assign({},s),label:Object.assign({},a),controls:Object.assign({},n),helperText:Object.assign({cursor:"default",marginTop:"0.5em",fontSize:"0.85em",color:"inherit",opacity:"var(--rc--placeholder-opacity, 0.7)",textAlign:"left"},r)},m),{"row-label":Object.assign({width:"auto",marginRight:"1.5em",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},m["row-label"]),"column-label":Object.assign({paddingBottom:"0.5em"},m["column-label"])}),d.root),d.label),d.controls),d.helperText)}));export default function Field(e){var{column:l,row:t=!l,label:o,container:s,controls:a=s,helperText:n,state:r="default",children:c,className:i}=e,b=__rest(e,["column","row","label","container","controls","helperText","state","children","className"]);const d=isValidReactNode(o)?{content:o}:o,{children:m,content:u=m,className:p}=d,x=__rest(d,["children","content","className"]),g=isValidReactNode(n)?{content:n}:n,{children:h,content:O=h,className:j}=g,f=__rest(g,["children","content","className"]),v=useStyles(),T=l?"column":"row";return React.createElement(Flex,Object.assign({row:t,column:l,alignItems:l?"flex-start":"baseline",className:clsx(v.root,v[T],v[`state-${r}`],i),"data-field":"","data-field-dir":T,"data-field-state":r||void 0},b),u&&React.createElement(Flex,Object.assign({grow:!1,shrink:!1,justifyContent:t?"flex-end":void 0,component:"label","data-field-label":""},x,{className:clsx(v.label,v[`${T}-label`],v[`state-${r}-label`],p)}),u),React.createElement(Flex,Object.assign({column:!0,shrink:!1,hfill:l},a,{className:clsx(v.controls,v[`${T}-controls`],v[`state-${r}-controls`],null==a?void 0:a.className)}),c,null!=O&&React.createElement(Flex,Object.assign({shrink:!1,"data-field-helper-text":""},f,{className:clsx(v.helperText,v[`${T}-helperText`],v[`state-${r}-helperText`],j)}),O)))}

HideableFlex/HideableFlex.d.ts

 import React from 'react';
 import type { Property } from 'csstype';
-import { DefaultComponentType, FlexAllProps } from 'reflexy';
+import { type DefaultComponentType, type FlexAllProps } from 'reflexy';
 export interface Transition {
@@ -5,0 +5,0 @@ readonly duration?: Property.TransitionDuration<number> | undefined;

HighlightedText/HighlightedText.d.ts

 import React from 'react';
-import { FlexAllProps } from 'reflexy';
+import { type FlexAllProps } from 'reflexy';
 export type HighlightedTextProps<C extends React.ElementType = 'span'> = {
@@ -4,0 +4,0 @@ ignoreCase?: boolean | undefined;

InputGroup/InputGroup.d.ts

 import React from 'react';
-import { FlexComponentProps, FlexAllProps } from 'reflexy';
+import { type FlexComponentProps, type FlexAllProps } from 'reflexy';
 export interface InputGroupProps<C extends React.ElementType = 'input'> extends FlexComponentProps {
@@ -4,0 +4,0 @@ input: JSX.Element | FlexAllProps<C>;

LoadableButton/LoadableButton.d.ts

 import React from 'react';
-import { LoadableFlexProps, SpinnerPosition as LoadableSpinnerPosition } from '../LoadableFlex';
-import { ButtonProps } from '../Button';
+import { type LoadableFlexProps, type SpinnerPosition as LoadableSpinnerPosition } from '../LoadableFlex';
+import { type ButtonProps } from '../Button';
 export type SpinnerPosition = Extract<LoadableSpinnerPosition, 'right' | 'left' | 'center'>;
@@ -5,0 +5,0 @@ export type LoadableButtonProps<C extends React.ElementType = 'button'> = Omit<LoadableFlexProps<any>, 'size' | 'color' | 'variant' | 'spinnerPosition' | 'spinnerSize'> & ButtonProps<C> & {

LoadableButton/LoadableButton.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React from"react";import LoadableFlex from"../LoadableFlex";import Button from"../Button";import useStyles from"./useStyles";export default function LoadableButton(e){var{component:n=Button,loading:o,spinnerPosition:s="center",spinnerClassName:t,className:a}=e,r=__rest(e,["component","loading","spinnerPosition","spinnerClassName","className"]);const i=useStyles({classes:{root:a,spinner:t},loading:o,spinnerPosition:s});return React.createElement(LoadableFlex,Object.assign({center:!0,shrink:!1,className:i.root,component:n,loading:o,spinnerPosition:s,spinnerClassName:i.spinner},r))}
+import{__rest}from"tslib";import React from"react";import LoadableFlex,{}from"../LoadableFlex";import Button,{}from"../Button";import useStyles from"./useStyles";export default function LoadableButton(e){var{component:n=Button,loading:o,spinnerPosition:s="center",spinnerClassName:t,className:a}=e,r=__rest(e,["component","loading","spinnerPosition","spinnerClassName","className"]);const i=useStyles({classes:{root:a,spinner:t},loading:o,spinnerPosition:s});return React.createElement(LoadableFlex,Object.assign({center:!0,shrink:!1,className:i.root,component:n,loading:o,spinnerPosition:s,spinnerClassName:i.spinner},r))}

LoadableFlex/LoadableFlex.d.ts

 import React from 'react';
-import { FlexAllProps, DefaultComponentType } from 'reflexy/styled';
+import { type FlexAllProps, type DefaultComponentType } from 'reflexy/styled';
 export type SpinnerPosition = 'top' | 'right' | 'left' | 'bottom' | 'center';
@@ -4,0 +4,0 @@ export type SpinnerSize = 'auto' | 'xs' | 's' | 'm' | 'l' | 'xl';

Menu/MenuList.d.ts

 import React from 'react';
-import { FlexComponentProps } from 'reflexy';
-import { SvgSpriteIconProps } from '../SvgSpriteIcon';
-import { ButtonProps } from '../Button';
-import { MenuListItemProps } from './MenuListItem';
+import { type FlexComponentProps } from 'reflexy';
+import { type SvgSpriteIconProps } from '../SvgSpriteIcon';
+import { type ButtonProps } from '../Button';
+import { type MenuListItemProps } from './MenuListItem';
 export type MenuItem<V, I extends string | SvgSpriteIconProps<string>> = Omit<MenuListItemProps<V, I>, 'onClick'> & React.Attributes;
@@ -7,0 +7,0 @@ export interface MenuListProps<V, I extends string | SvgSpriteIconProps<string>, HI extends string | SvgSpriteIconProps<string>> extends FlexComponentProps<'div'> {

Menu/MenuList.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React,{useMemo}from"react";import makeStyles from"@mui/styles/makeStyles";import useTheme from"@mui/styles/useTheme";import{Flex}from"reflexy";import stopPropagation from"@jstoolkit/web-utils/stopPropagation";import useRefCallback from"@jstoolkit/react-hooks/useRefCallback";import SvgSpriteIcon from"../SvgSpriteIcon";import Button from"../Button";import MenuListItem from"./MenuListItem";const useStyles=makeStyles((({rc:e})=>{var o,t,n,l,i,a,s,r,c;return{root:Object.assign({},null===(o=null==e?void 0:e.MenuList)||void 0===o?void 0:o.root),clickable:{cursor:"pointer"},header:Object.assign({},null===(n=null===(t=null==e?void 0:e.MenuList)||void 0===t?void 0:t.header)||void 0===n?void 0:n.root),headerTitle:Object.assign({fontWeight:500},null===(a=null===(i=null===(l=null==e?void 0:e.MenuList)||void 0===l?void 0:l.header)||void 0===i?void 0:i.title)||void 0===a?void 0:a.root),headerAction:Object.assign({},null===(c=null===(r=null===(s=null==e?void 0:e.MenuList)||void 0===s?void 0:s.header)||void 0===r?void 0:r.action)||void 0===c?void 0:c.root)}}));export function DefaultHeaderAction(e){var o,t,n,{className:l}=e,i=__rest(e,["className"]);const{rc:a}=useTheme(),s=useStyles({classes:{headerAction:l}});return React.createElement(Button,Object.assign({ml:!0,shrink:0,size:"contain",color:"none"},null===(n=null===(t=null===(o=null==a?void 0:a.MenuList)||void 0===o?void 0:o.header)||void 0===t?void 0:t.action)||void 0===n?void 0:n.flex,{className:s.headerAction},i))}export default function MenuList(e){var o,t,n,l,i,a,s,r,c,{header:u,headerIcon:d,onBack:m,onClose:v,items:p,onItemSelect:f,onItemMouseEnter:h,onItemMouseLeave:g,onItemFocus:k,onItemBlur:I,onItemProps:b,headerAction:y,onHeaderAction:x,children:R,className:S,onKeyDown:M}=e,E=__rest(e,["header","headerIcon","onBack","onClose","items","onItemSelect","onItemMouseEnter","onItemMouseLeave","onItemFocus","onItemBlur","onItemProps","headerAction","onHeaderAction","children","className","onKeyDown"]);const{rc:j}=useTheme(),L=useStyles({classes:{root:S}}),O=useRefCallback((e=>{m&&stopPropagation(e),m&&m()})),A=useRefCallback((e=>{v&&stopPropagation(e),v&&v()})),C=useRefCallback((e=>{x&&stopPropagation(e),x&&x()})),w=null==j?void 0:j.MenuList,F=m?null===(o=null==w?void 0:w.header)||void 0===o?void 0:o.backIcon:void 0,B=v?null===(t=null==w?void 0:w.header)||void 0===t?void 0:t.closeIcon:void 0,N="string"==typeof d?{name:d}:d,P=!!(u||N||m||y||v),_="function"==typeof(null===(l=null===(n=null==w?void 0:w.header)||void 0===n?void 0:n.title)||void 0===l?void 0:l.flex)?w.header.title.flex({hasIcon:!!F||!!N}):null===(a=null===(i=null==w?void 0:w.header)||void 0===i?void 0:i.title)||void 0===a?void 0:a.flex,T="function"==typeof(null===(s=null==w?void 0:w.list)||void 0===s?void 0:s.flex)?w.list.flex({hasHeader:P}):null===(r=null==w?void 0:w.list)||void 0===r?void 0:r.flex,D=useMemo((()=>p&&0!==p.length?p.map(((e,o)=>{const t=b?b(e):e,{value:n,key:l=(null==n||"string"==typeof n||"number"==typeof n?n:`key${o}`)}=t,i=__rest(t,["value","key"]);return React.createElement(MenuListItem,Object.assign({key:l,value:n,onSelect:f,onMouseEnter:h&&(e=>h(n,e)),onMouseLeave:g&&(e=>g(n,e)),onFocus:k&&(e=>k(n,e)),onBlur:I&&(e=>I(n,e))},i))})):[]),[p,I,k,h,g,b,f]),H=useRefCallback((e=>{M&&M(e),("ArrowLeft"===e.code||"ArrowRight"===e.code)&&stopPropagation(e),"ArrowLeft"===e.code&&m&&m()})),z=!!y&&(React.isValidElement(y)?y:React.createElement(DefaultHeaderAction,{onClick:C},y));return React.createElement(Flex,Object.assign({column:!0,className:L.root,role:"menu",onKeyDown:H},E),P&&React.createElement(Flex,Object.assign({py:"xs",pl:"s",pr:!0,alignItems:"center",shrink:0},null===(c=null==w?void 0:w.header)||void 0===c?void 0:c.flex,{className:L.header}),React.createElement(Flex,{grow:!0,alignItems:"center",className:m?L.clickable:void 0,onClick:m?O:void 0},!!F&&React.createElement(SvgSpriteIcon,Object.assign({size:"1.5em"},F)),!!N&&React.createElement(SvgSpriteIcon,Object.assign({},N)),React.createElement(Flex,Object.assign({ml:F||N?"xs":"s",py:"xs",grow:!0},_,{className:L.headerTitle}),u)),z,!!B&&React.createElement(Button,{shrink:0,size:"contain",color:"none",onClick:A},React.createElement(SvgSpriteIcon,Object.assign({size:"0.875em"},B)))),React.createElement(Flex,Object.assign({mt:P?"xs":void 0,column:!0,overflowY:"auto"},T),React.createElement(Flex,{column:!0,shrink:0},D,R)))}
+import{__rest}from"tslib";import React,{useMemo}from"react";import makeStyles from"@mui/styles/makeStyles";import useTheme from"@mui/styles/useTheme";import{Flex}from"reflexy";import stopPropagation from"@jstoolkit/web-utils/stopPropagation";import useRefCallback from"@jstoolkit/react-hooks/useRefCallback";import SvgSpriteIcon,{}from"../SvgSpriteIcon";import Button,{}from"../Button";import MenuListItem,{}from"./MenuListItem";const useStyles=makeStyles((({rc:e})=>{var o,t,n,l,i,a,s,r,c;return{root:Object.assign({},null===(o=null==e?void 0:e.MenuList)||void 0===o?void 0:o.root),clickable:{cursor:"pointer"},header:Object.assign({},null===(n=null===(t=null==e?void 0:e.MenuList)||void 0===t?void 0:t.header)||void 0===n?void 0:n.root),headerTitle:Object.assign({fontWeight:500},null===(a=null===(i=null===(l=null==e?void 0:e.MenuList)||void 0===l?void 0:l.header)||void 0===i?void 0:i.title)||void 0===a?void 0:a.root),headerAction:Object.assign({},null===(c=null===(r=null===(s=null==e?void 0:e.MenuList)||void 0===s?void 0:s.header)||void 0===r?void 0:r.action)||void 0===c?void 0:c.root)}}));export function DefaultHeaderAction(e){var o,t,n,{className:l}=e,i=__rest(e,["className"]);const{rc:a}=useTheme(),s=useStyles({classes:{headerAction:l}});return React.createElement(Button,Object.assign({ml:!0,shrink:0,size:"contain",color:"none"},null===(n=null===(t=null===(o=null==a?void 0:a.MenuList)||void 0===o?void 0:o.header)||void 0===t?void 0:t.action)||void 0===n?void 0:n.flex,{className:s.headerAction},i))}export default function MenuList(e){var o,t,n,l,i,a,s,r,c,{header:u,headerIcon:d,onBack:m,onClose:v,items:p,onItemSelect:f,onItemMouseEnter:h,onItemMouseLeave:g,onItemFocus:k,onItemBlur:I,onItemProps:b,headerAction:y,onHeaderAction:x,children:R,className:S,onKeyDown:M}=e,E=__rest(e,["header","headerIcon","onBack","onClose","items","onItemSelect","onItemMouseEnter","onItemMouseLeave","onItemFocus","onItemBlur","onItemProps","headerAction","onHeaderAction","children","className","onKeyDown"]);const{rc:j}=useTheme(),L=useStyles({classes:{root:S}}),O=useRefCallback((e=>{m&&stopPropagation(e),m&&m()})),A=useRefCallback((e=>{v&&stopPropagation(e),v&&v()})),C=useRefCallback((e=>{x&&stopPropagation(e),x&&x()})),w=null==j?void 0:j.MenuList,F=m?null===(o=null==w?void 0:w.header)||void 0===o?void 0:o.backIcon:void 0,B=v?null===(t=null==w?void 0:w.header)||void 0===t?void 0:t.closeIcon:void 0,N="string"==typeof d?{name:d}:d,P=!!(u||N||m||y||v),_="function"==typeof(null===(l=null===(n=null==w?void 0:w.header)||void 0===n?void 0:n.title)||void 0===l?void 0:l.flex)?w.header.title.flex({hasIcon:!!F||!!N}):null===(a=null===(i=null==w?void 0:w.header)||void 0===i?void 0:i.title)||void 0===a?void 0:a.flex,T="function"==typeof(null===(s=null==w?void 0:w.list)||void 0===s?void 0:s.flex)?w.list.flex({hasHeader:P}):null===(r=null==w?void 0:w.list)||void 0===r?void 0:r.flex,D=useMemo((()=>p&&0!==p.length?p.map(((e,o)=>{const t=b?b(e):e,{value:n,key:l=(null==n||"string"==typeof n||"number"==typeof n?n:`key${o}`)}=t,i=__rest(t,["value","key"]);return React.createElement(MenuListItem,Object.assign({key:l,value:n,onSelect:f,onMouseEnter:h&&(e=>h(n,e)),onMouseLeave:g&&(e=>g(n,e)),onFocus:k&&(e=>k(n,e)),onBlur:I&&(e=>I(n,e))},i))})):[]),[p,I,k,h,g,b,f]),H=useRefCallback((e=>{M&&M(e),("ArrowLeft"===e.code||"ArrowRight"===e.code)&&stopPropagation(e),"ArrowLeft"===e.code&&m&&m()})),z=!!y&&(React.isValidElement(y)?y:React.createElement(DefaultHeaderAction,{onClick:C},y));return React.createElement(Flex,Object.assign({column:!0,className:L.root,role:"menu",onKeyDown:H},E),P&&React.createElement(Flex,Object.assign({py:"xs",pl:"s",pr:!0,alignItems:"center",shrink:0},null===(c=null==w?void 0:w.header)||void 0===c?void 0:c.flex,{className:L.header}),React.createElement(Flex,{grow:!0,alignItems:"center",className:m?L.clickable:void 0,onClick:m?O:void 0},!!F&&React.createElement(SvgSpriteIcon,Object.assign({size:"1.5em"},F)),!!N&&React.createElement(SvgSpriteIcon,Object.assign({},N)),React.createElement(Flex,Object.assign({ml:F||N?"xs":"s",py:"xs",grow:!0},_,{className:L.headerTitle}),u)),z,!!B&&React.createElement(Button,{shrink:0,size:"contain",color:"none",onClick:A},React.createElement(SvgSpriteIcon,Object.assign({size:"0.875em"},B)))),React.createElement(Flex,Object.assign({mt:P?"xs":void 0,column:!0,overflowY:"auto"},T),React.createElement(Flex,{column:!0,shrink:0},D,R)))}

Menu/MenuListItem.d.ts

@@ -1,4 +0,4 @@
-import React, { AriaAttributes } from 'react';
-import { FlexComponentProps } from 'reflexy';
-import { SvgSpriteIconProps } from '../SvgSpriteIcon';
+import React, { type AriaAttributes } from 'react';
+import { type FlexComponentProps } from 'reflexy';
+import { type SvgSpriteIconProps } from '../SvgSpriteIcon';
 export interface MenuListItemProps<V, I extends string | SvgSpriteIconProps<string>> extends FlexComponentProps<'div', {
@@ -5,0 +5,0 @@ omitProps: true;

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: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)))}
+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)))}

Menu/MenuSelectList.d.ts

 import React from 'react';
 import type { SvgSpriteIconProps } from '../SvgSpriteIcon';
-import { MenuItem, MenuListProps } from './MenuList';
+import { type MenuItem, type MenuListProps } from './MenuList';
 export interface MenuSelectListProps<V extends React.Key | null, I extends string | SvgSpriteIconProps<string>, HI extends string | SvgSpriteIconProps<string>> extends MenuListProps<V, I, HI> {
@@ -5,0 +5,0 @@ selectedValue: MenuItem<V, I>['value'];

Menu/MenuSelectList.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React from"react";import useRefCallback from"@jstoolkit/react-hooks/useRefCallback";import MenuList from"./MenuList";export default function MenuSelectList(e){var{selectedValue:t,onItemProps:s}=e,o=__rest(e,["selectedValue","onItemProps"]);const r=useRefCallback((e=>Object.assign(Object.assign({},s?s(e):e),{checked:t===e.value})));return React.createElement(MenuList,Object.assign({onItemProps:r},o))}
+import{__rest}from"tslib";import React from"react";import useRefCallback from"@jstoolkit/react-hooks/useRefCallback";import MenuList,{}from"./MenuList";export default function MenuSelectList(e){var{selectedValue:t,onItemProps:s}=e,o=__rest(e,["selectedValue","onItemProps"]);const r=useRefCallback((e=>Object.assign(Object.assign({},s?s(e):e),{checked:t===e.value})));return React.createElement(MenuList,Object.assign({onItemProps:r},o))}

Modal/Body.d.ts

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

Modal/Header.d.ts

 import React from 'react';
-import { FlexComponentProps } from 'reflexy';
+import { type FlexComponentProps } from 'reflexy';
 export interface HeaderProps extends FlexComponentProps<'div'> {
@@ -4,0 +4,0 @@ readonly closeIcon?: boolean | React.ReactNode | undefined;

Modal/Modal.d.ts

 import React from 'react';
 import '@jstoolkit/utils/types';
 import ReactModal from 'react-modal';
-import { FlexComponentProps } from 'reflexy/styled';
-import { HideableProps } from '../HideableFlex';
+import { type FlexComponentProps } from 'reflexy/styled';
+import { type HideableProps } from '../HideableFlex';
 type ModalSize = 'auto' | 'xs' | 's' | 'm' | 'l';
@@ -7,0 +7,0 @@ export interface ModalProps extends ExcludeTypes<RequiredSome<OmitStrict<HideableProps, 'disposable'>, 'hidden'>, string, {

Modal/Modal.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React,{useCallback}from"react";import makeStyles from"@mui/styles/makeStyles";import"@jstoolkit/utils/types";import ReactModal from"react-modal";import{Flex}from"reflexy/styled";import useUpdatedRefState from"@jstoolkit/react-hooks/useUpdatedRefState";import HideableFlex from"../HideableFlex";import Header from"./Header";import Body from"./Body";import Footer from"./Footer";ReactModal.defaultStyles.content={},ReactModal.defaultStyles.overlay={};const useStyles=makeStyles((e=>{var o,a;const t=null!==(a=null===(o=e.rc)||void 0===o?void 0:o.Modal)&&void 0!==a?a:{},r=Object.getOwnPropertyNames(t).reduce(((e,o)=>(0===o.indexOf("size-")&&(e[o]=Object.assign({},t[o])),e)),{});return Object.assign(Object.assign({root:Object.assign({outline:"none",borderRadius:"var(--rc--modal-border-radius, 5px)",boxShadow:"var(--rc--modal-shadow, 0 15px 12px 0 rgba(0, 0, 0, 0.2), 0 20px 40px 0 rgba(0, 0, 0, 0.3))",maxWidth:"100vw"},t.root)},r),{backdrop:Object.assign({position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"var(--rc--backdrop-color, rgba(0, 0, 0, 0.5))",zIndex:1},t.backdrop),lockScroll:{overflow:"hidden"}})})),classNameTransformer=(e,o)=>{if(o&&"string"!=typeof o)throw new Error("Expected string.");return{base:o?`${e} ${o}`:e,afterOpen:"open",beforeClose:"close"}},styleTransformer=(e,o)=>o?{content:Object.assign(Object.assign({},e),o.content),overlay:o.overlay}:{content:e};function Modal(e){var o,{size:a="auto",lockBodyScroll:t,bodyOpenClassName:r,className:l,style:s,backdropRef:n,backdropClassName:d,backdropStyle:c,disableBackdrop:i,shouldCloseOnBackdropClick:p,hidden:m,collapsable:b,keepChildren:f,appear:u,transitionDuration:y=250,transitionFunction:k,transitionProperty:S,hiddenClassName:C,onShown:h,onHidden:v}=e,O=__rest(e,["size","lockBodyScroll","bodyOpenClassName","className","style","backdropRef","backdropClassName","backdropStyle","disableBackdrop","shouldCloseOnBackdropClick","hidden","collapsable","keepChildren","appear","transitionDuration","transitionFunction","transitionProperty","hiddenClassName","onShown","onHidden"]);const R=useStyles({classes:{root:l,backdrop:d}}),[M,g]=useUpdatedRefState((e=>!m||!!e),[m]),x=useCallback((()=>{g(!1),v&&v()}),[v,g]),N=O.backdropElement&&!i?O.backdropElement:(e,o)=>{var{ref:a}=e,t=__rest(e,["ref"]);return i?o:React.createElement(Flex,Object.assign({componentRef:a,center:!0,overflowX:"hidden",overflowY:"auto"},t),o)},j={base:R.backdrop,afterOpen:"open",beforeClose:"close"},F={content:s,overlay:c},w=null!==(o=R[`size-${a}`])&&void 0!==o?o:"";return React.createElement(Flex,Object.assign({component:ReactModal,className:`${R.root} ${w}`,style:F,classNameTransformer:classNameTransformer,styleTransformer:styleTransformer,parentSelector:Modal.defaultParentSelector,portalClassName:"sc-modal-portal"},O,{isOpen:M(),closeTimeoutMS:0,overlayClassName:j,bodyOpenClassName:t&&r?`${R.lockScroll} ${r}`:t&&R.lockScroll||r||null,contentElement:(e,o)=>{var{ref:a}=e,t=__rest(e,["ref"]);return React.createElement(HideableFlex,Object.assign({componentRef:a,column:!0,hidden:m,collapsable:b,keepChildren:f,appear:u,transitionDuration:y,transitionFunction:k,transitionProperty:S,hiddenClassName:C,onShown:h,onHidden:x},t),o)},overlayElement:N,overlayRef:n,shouldCloseOnOverlayClick:p}))}function AsChild(e){var o,{size:a="auto",className:t}=e,r=__rest(e,["size","className"]);const l=useStyles({classes:{root:t}}),s=null!==(o=l[`size-${a}`])&&void 0!==o?o:"";return React.createElement(Flex,Object.assign({column:!0,className:`${l.root} ${s}`},r))}Modal.Header=Header,Modal.Body=Body,Modal.Footer=Footer,Modal.AsChild=AsChild,Modal.setAppElement=ReactModal.setAppElement.bind(ReactModal),Modal.defaultStyles=ReactModal.defaultStyles,Modal.defaultParentSelector=void 0,Object.defineProperty(Modal,"defaultStyles",{configurable:!0,enumerable:!0,get:()=>ReactModal.defaultStyles,set(e){ReactModal.defaultStyles=e}});export default Modal;
+import{__rest}from"tslib";import React,{useCallback}from"react";import makeStyles from"@mui/styles/makeStyles";import"@jstoolkit/utils/types";import ReactModal from"react-modal";import{Flex}from"reflexy/styled";import useUpdatedRefState from"@jstoolkit/react-hooks/useUpdatedRefState";import HideableFlex,{}from"../HideableFlex";import Header from"./Header";import Body from"./Body";import Footer from"./Footer";ReactModal.defaultStyles.content={},ReactModal.defaultStyles.overlay={};const useStyles=makeStyles((e=>{var o,a;const t=null!==(a=null===(o=e.rc)||void 0===o?void 0:o.Modal)&&void 0!==a?a:{},r=Object.getOwnPropertyNames(t).reduce(((e,o)=>{if(0===o.indexOf("size-")){const a=o;e[a]=Object.assign({},t[a])}return e}),{});return Object.assign(Object.assign({root:Object.assign({outline:"none",borderRadius:"var(--rc--modal-border-radius, 5px)",boxShadow:"var(--rc--modal-shadow, 0 15px 12px 0 rgba(0, 0, 0, 0.2), 0 20px 40px 0 rgba(0, 0, 0, 0.3))",maxWidth:"100vw"},t.root)},r),{backdrop:Object.assign({position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"var(--rc--backdrop-color, rgba(0, 0, 0, 0.5))",zIndex:1},t.backdrop),lockScroll:{overflow:"hidden"}})})),classNameTransformer=(e,o)=>{if(o&&"string"!=typeof o)throw new Error("Expected string.");return{base:o?`${e} ${o}`:e,afterOpen:"open",beforeClose:"close"}},styleTransformer=(e,o)=>o?{content:Object.assign(Object.assign({},e),o.content),overlay:o.overlay}:{content:e};function Modal(e){var o,{size:a="auto",lockBodyScroll:t,bodyOpenClassName:r,className:l,style:s,backdropRef:n,backdropClassName:d,backdropStyle:c,disableBackdrop:i,shouldCloseOnBackdropClick:p,hidden:m,collapsable:f,keepChildren:u,appear:b,transitionDuration:y=250,transitionFunction:k,transitionProperty:S,hiddenClassName:C,onShown:h,onHidden:v}=e,O=__rest(e,["size","lockBodyScroll","bodyOpenClassName","className","style","backdropRef","backdropClassName","backdropStyle","disableBackdrop","shouldCloseOnBackdropClick","hidden","collapsable","keepChildren","appear","transitionDuration","transitionFunction","transitionProperty","hiddenClassName","onShown","onHidden"]);const R=useStyles({classes:{root:l,backdrop:d}}),[M,g]=useUpdatedRefState((e=>!m||!!e),[m]),x=useCallback((()=>{g(!1),v&&v()}),[v,g]),N=O.backdropElement&&!i?O.backdropElement:(e,o)=>{var{ref:a}=e,t=__rest(e,["ref"]);return i?o:React.createElement(Flex,Object.assign({componentRef:a,center:!0,overflowX:"hidden",overflowY:"auto"},t),o)},j={base:R.backdrop,afterOpen:"open",beforeClose:"close"},F={content:s,overlay:c},w=null!==(o=R[`size-${a}`])&&void 0!==o?o:"";return React.createElement(Flex,Object.assign({component:ReactModal,className:`${R.root} ${w}`,style:F,classNameTransformer:classNameTransformer,styleTransformer:styleTransformer,parentSelector:Modal.defaultParentSelector,portalClassName:"sc-modal-portal"},O,{isOpen:M(),closeTimeoutMS:0,overlayClassName:j,bodyOpenClassName:t&&r?`${R.lockScroll} ${r}`:t&&R.lockScroll||r||null,contentElement:(e,o)=>{var{ref:a}=e,t=__rest(e,["ref"]);return React.createElement(HideableFlex,Object.assign({componentRef:a,column:!0,hidden:m,collapsable:f,keepChildren:u,appear:b,transitionDuration:y,transitionFunction:k,transitionProperty:S,hiddenClassName:C,onShown:h,onHidden:x},t),o)},overlayElement:N,overlayRef:n,shouldCloseOnOverlayClick:p}))}function AsChild(e){var o,{size:a="auto",className:t}=e,r=__rest(e,["size","className"]);const l=useStyles({classes:{root:t}}),s=null!==(o=l[`size-${a}`])&&void 0!==o?o:"";return React.createElement(Flex,Object.assign({column:!0,className:`${l.root} ${s}`},r))}Modal.Header=Header,Modal.Body=Body,Modal.Footer=Footer,Modal.AsChild=AsChild,Modal.setAppElement=ReactModal.setAppElement.bind(ReactModal),Modal.defaultStyles=ReactModal.defaultStyles,Modal.defaultParentSelector=void 0,Object.defineProperty(Modal,"defaultStyles",{configurable:!0,enumerable:!0,get:()=>ReactModal.defaultStyles,set(e){ReactModal.defaultStyles=e}});export default Modal;

Notifications/NotificationBar.d.ts

 import React from 'react';
-import { FlexAllProps, FlexComponentProps } from 'reflexy';
-import { HideableProps, TransitionComponent } from '../TransitionFlex';
+import { type FlexAllProps, type FlexComponentProps } from 'reflexy';
+import { type HideableProps, type TransitionComponent } from '../TransitionFlex';
 import type { GetOverridedKeys } from '../types/local';
@@ -5,0 +5,0 @@ export interface NotificationVariants {

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";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})))}
+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:s,info:a,success:c,warning:i,error:l}=n,g=__rest(n,["root","content","action","info","success","warning","error"]),m=Object.getOwnPropertyNames(g).reduce(((e,t)=>{const n=t;return"object"==typeof g[n]&&(e[n]=g[n]),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"},s)},m),{info:Object.assign({backgroundColor:"rgb(100, 200, 255)",color:"rgb(0, 80, 100)"},a),success:Object.assign({backgroundColor:"rgb(120, 220, 125)",color:"rgb(30, 90, 30)"},c),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:n="info",action:o,onAction:r,className:s,contentProps:a,actionProps:c,children:i,transitionProps:l,applyClassesToTransition:g}=e,m=__rest(e,["id","variant","action","onAction","className","contentProps","actionProps","children","transitionProps","applyClassesToTransition"]);const b=useStyles({classes:{content:null==a?void 0:a.className,action:null==c?void 0:c.className}});return React.createElement(TransitionFlex,Object.assign({alignItems:"center",className:g?void 0:clsx(b.root,b[n],s),transitionProps:Object.assign(Object.assign({},l),g&&{className:clsx(b.root,b[n],null==l?void 0:l.className,s)})},m),React.createElement(Flex,Object.assign({grow:!0},a,{className:a?clsx((a.column&&"flex-end"===a.alignItems||!a.column&&"flex-end"===a.justifyContent)&&b.textRight,(a.center||a.column&&"center"===a.alignItems||!a.column&&"center"===a.justifyContent)&&b.textCenter,b.content):b.content}),i),!!o&&React.createElement(Flex,Object.assign({},c,{className:b.action}),React.createElement(o,{id:t,variant:n,onAction:r})))}

Notifications/Notifications.d.ts

 import React from 'react';
-import { FlexAllProps, FlexComponentProps } from 'reflexy';
+import { type FlexAllProps, type FlexComponentProps } from 'reflexy';
 import type { TransitionComponent } from '../TransitionFlex';
 import type { GetOverridedKeys } from '../types/local';
-import { NotificationBarProps } from './NotificationBar';
+import { type NotificationBarProps } from './NotificationBar';
 export interface NotificationPositions {
@@ -26,4 +26,5 @@ }
     }> | undefined;
+    readonly disableTransition?: boolean;
 };
-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)>;
+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, disableTransition, ...rest }: NotificationsProps<C, N>) => JSX.Element | null)>;
 export default _default;

Notifications/Notifications.js

@@ -1,1 +0,1 @@
-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}));
+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":b,"right-middle":u,"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},b),"right-middle":Object.assign({position:"absolute",right:0,top:"50%",transform:"translateY(-50%)"},u),"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,disableTransition:c}=t,l=__rest(t,["list","defaultPosition","defaultAction","onAction","className","containerProps","listProps","disableTransition"]);const m=useStyles(),p=useUpdate(),f=useRef();f.current||(f.current=new Map),useEffect((()=>{const t=f.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:m.item,action:o.noAction?void 0:i,onAction:o.noAction?void 0:s,contentProps:o.contentProps,actionProps:o.actionProps},o.rootProps),o.content))})),p())}),[m,i,e,o,s,p]);const b=f.current;return b?Array.from(b.entries(),(([t,o])=>{const e=clsx((t.startsWith("window")&&m.fixedContainer||"top"===t||"bottom"===t||t.startsWith("left")||t.startsWith("right"))&&m.absoluteContainer,m[t],null==a?void 0:a.className),i=clsx(m.root,m[t],n);return React.createElement(Flex,Object.assign({key:t,justifyContent:"center"},a,{className:e}),React.createElement(Flex,Object.assign({column:!0,className:i},l),React.createElement(Flex,Object.assign({column:!0,alignItems:(t.startsWith("left")?"flex-start":t.startsWith("right")&&"flex-end")||void 0},r),React.createElement(TransitionGroup,Object.assign({component:null},c&&{appear:!1,enter:!1,exit:!1}),o))))})):null}));

package.json

 {
   "name": "@jstoolkit/styled-components",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Styled react components powered by JSS via @material-ui/styles",
@@ -25,16 +25,16 @@ "author": "VZH",
   "devDependencies": {
-    "@jstoolkit/configs": "^3.85.0",
-    "@jstoolkit/react-hooks": "^1.45.0",
-    "@jstoolkit/utils": "^1.47.0",
-    "@jstoolkit/web-utils": "^1.40.0",
-    "@mui/material": "^5.11.9",
-    "@mui/styles": "^5.11.9",
-    "@types/react": "^18.0.28",
-    "@types/react-modal": "^3.13.1",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
-    "@typescript-eslint/parser": "^5.52.0",
+    "@jstoolkit/configs": "^3.86.1",
+    "@jstoolkit/react-hooks": "^1.46.1",
+    "@jstoolkit/utils": "^1.48.3",
+    "@jstoolkit/web-utils": "^1.45.1",
+    "@mui/material": "^5.13.5",
+    "@mui/styles": "^5.13.2",
+    "@types/react": "^18.2.12",
+    "@types/react-modal": "^3.16.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.34.0",
+    "eslint": "^8.42.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
@@ -47,11 +47,11 @@ "eslint-plugin-jsx-a11y": "^6.7.1",
     "jss-preset-default": "^10.10.0",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-outside-click-listener": "^1.5.1",
-    "reflexy": "^3.45.1",
-    "rimraf": "^4.1.2",
-    "terser": "^5.16.3",
-    "typescript": "^4.9.5",
-    "yargs": "^17.7.0"
+    "reflexy": "^3.47.1",
+    "rimraf": "^5.0.1",
+    "terser": "^5.18.0",
+    "typescript": "^5.1.3",
+    "yargs": "^17.7.2"
   },
@@ -58,0 +58,0 @@ "peerDependencies": {

Picture/Picture.d.ts

 import React from 'react';
 import type { FlexComponentProps } from 'reflexy';
-import { HideableProps } from '../TransitionFlex';
+import { type HideableProps } from '../TransitionFlex';
 export interface PictureProps extends FlexComponentProps, Pick<HideableProps, 'hidden' | 'disposable' | 'onShown' | 'onHidden' | 'transitionDuration' | 'transitionProps'> {
@@ -5,0 +5,0 @@ src: string | {

Picture/Picture.js

@@ -1,1 +0,1 @@
-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)}
+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",touchAction:"none",userSelect:"none","& img":{width:"100%",height:"100%",objectFit:"cover",borderRadius:"inherit",pointerEvents:"none",touchAction:"none",userSelect:"none"}}});export default function Picture(e){var{hidden:t,src:r,crossOrigin:o,timeout:s,transitionProps:n,onLoadTimeout:c,onLoadCompleted:i,onError:a,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),[E,h]=useMemoDestructor((()=>{var e;const t="string"==typeof r?{src:r}:r;return g.current=(null!=s?s:0)>0&&c?window.setTimeout(c,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,c,r,s]);useLayoutEffect((()=>{const{current:e}=p;e&&(e.src=E.src)}),[E]);const y=useCallback((()=>{clearTimeout(g.current),f(!0),i&&i()}),[i]),R=useCallback((e=>{clearTimeout(g.current),a?a(e):console.error(e),i&&i()}),[a,i]);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:y,onError:R,className:m.root},l),h)}

Poster/Poster.d.ts

 /// <reference types="react" />
 import type { FlexComponentProps } from 'reflexy';
-import { HideableProps } from '../TransitionFlex';
+import { type HideableProps } from '../TransitionFlex';
 import type { PictureProps } from '../Picture';
@@ -5,0 +5,0 @@ export interface PosterProps extends FlexComponentProps, Pick<HideableProps, 'hidden' | 'disposable' | 'onShown' | 'onHidden' | 'transitionDuration' | 'transitionProps'>, Pick<PictureProps, 'src' | 'crossOrigin' | 'timeout' | 'onLoadTimeout' | 'onLoadCompleted' | 'onError'> {

Poster/Poster.js

@@ -1,1 +0,1 @@
-import{__awaiter,__rest}from"tslib";import React,{useEffect,useState}from"react";import makeStyles from"@mui/styles/makeStyles";import loadImage from"@jstoolkit/web-utils/loadImage";import{takeSnapshot}from"@jstoolkit/web-utils/takeSnapshot";import{isWebPSupported}from"@jstoolkit/web-utils/isWebPSupported";import TransitionFlex from"../TransitionFlex";const useStyles=makeStyles({root:{pointerEvents:"none",backgroundSize:"cover",backgroundPosition:"center center",backgroundRepeat:"no-repeat"}});export default function Poster(e){var{hidden:t,src:o,crossOrigin:s,timeout:r,transitionProps:i,onLoadTimeout:a,onLoadCompleted:n,onError:l,className:c,style:m}=e,u=__rest(e,["hidden","src","crossOrigin","timeout","transitionProps","onLoadTimeout","onLoadCompleted","onError","className","style"]);const d=useStyles({classes:{root:c}}),[p,g]=useState("");return useEffect((()=>{let e=!1;const t=(null!=r?r:0)>0&&a?setTimeout(a,r):0;return(()=>__awaiter(this,void 0,void 0,(function*(){var e;if("string"==typeof o)return loadImage({src:o,crossOrigin:s});let t,r;for(let i of null!==(e=o.srcset)&&void 0!==e?e:[]){const{type:e,media:o}=i,a=__rest(i,["type","media"]);try{let i=!0;if("image/webp"===e&&(i=null!=r?r:r=yield isWebPSupported()),i&&(i=!o||window.matchMedia(o).matches),t=i?yield loadImage(Object.assign(Object.assign({},a),{crossOrigin:s})):void 0,t)break}catch(e){}}return t||loadImage({src:o.src,crossOrigin:s})})))().then((o=>{if(clearTimeout(t),e)return;const s=takeSnapshot(o,{quality:1});g(s)})).catch((o=>{clearTimeout(t),e||(l?l(o):console.error(o))})).finally((()=>!e&&n&&n())),()=>{e=!0,clearTimeout(t)}}),[s,o,r]),React.createElement(TransitionFlex,Object.assign({hidden:null!=t?t:!p,transitionDuration:250,transitionProps:Object.assign({easing:{enter:"ease-in",exit:"ease-out"}},i),className:d.root,style:p?Object.assign(Object.assign({},m),{backgroundImage:`url('${p}')`}):m},u))}
+import{__awaiter,__rest}from"tslib";import React,{useEffect,useState}from"react";import makeStyles from"@mui/styles/makeStyles";import loadImage from"@jstoolkit/web-utils/loadImage";import{takeSnapshot}from"@jstoolkit/web-utils/takeSnapshot";import{isWebPSupported}from"@jstoolkit/web-utils/isWebPSupported";import TransitionFlex,{}from"../TransitionFlex";const useStyles=makeStyles({root:{pointerEvents:"none",touchAction:"none",userSelect:"none",backgroundSize:"cover",backgroundPosition:"center center",backgroundRepeat:"no-repeat"}});export default function Poster(e){var{hidden:t,src:o,crossOrigin:s,timeout:r,transitionProps:i,onLoadTimeout:n,onLoadCompleted:a,onError:l,className:c,style:m}=e,u=__rest(e,["hidden","src","crossOrigin","timeout","transitionProps","onLoadTimeout","onLoadCompleted","onError","className","style"]);const d=useStyles({classes:{root:c}}),[p,g]=useState("");return useEffect((()=>{let e=!1;const t=(null!=r?r:0)>0&&n?setTimeout(n,r):0;return(()=>__awaiter(this,void 0,void 0,(function*(){var e;if("string"==typeof o)return loadImage({src:o,crossOrigin:s});let t,r;for(let i of null!==(e=o.srcset)&&void 0!==e?e:[]){const{type:e,media:o}=i,n=__rest(i,["type","media"]);try{let i=!0;if("image/webp"===e&&(i=null!=r?r:r=yield isWebPSupported()),i&&(i=!o||window.matchMedia(o).matches),t=i?yield loadImage(Object.assign(Object.assign({},n),{crossOrigin:s})):void 0,t)break}catch(e){}}return t||loadImage({src:o.src,crossOrigin:s})})))().then((o=>{if(clearTimeout(t),e)return;const s=takeSnapshot(o,{quality:1});g(s)})).catch((o=>{clearTimeout(t),e||(l?l(o):console.error(o))})).finally((()=>!e&&a&&a())),()=>{e=!0,clearTimeout(t)}}),[s,o,r]),React.createElement(TransitionFlex,Object.assign({hidden:null!=t?t:!p,transitionDuration:250,transitionProps:Object.assign({easing:{enter:"ease-in",exit:"ease-out"}},i),className:d.root,style:p?Object.assign(Object.assign({},m),{backgroundImage:`url('${p}')`}):m},u))}

StylesProvider/StylesProvider.d.ts

 /// <reference types="react" />
-import { JssOptions } from 'jss';
-import { StylesProviderProps as MuiStylesProviderProps } from '@mui/styles/StylesProvider';
+import { type JssOptions } from 'jss';
+import { type StylesProviderProps as MuiStylesProviderProps } from '@mui/styles/StylesProvider';
 export interface StylesProviderProps extends MuiStylesProviderProps, OptionalToUndefined<Partial<Pick<JssOptions, 'Renderer' | 'insertionPoint' | 'id'>>> {
@@ -5,0 +5,0 @@ plugins?: (() => JssOptions['plugins']) | undefined;

StylesProvider/StylesProvider.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React,{useMemo}from"react";import{create}from"jss";import MuiStylesProvider from"@mui/styles/StylesProvider";import createPlugins from"./createPlugins";export default function StylesProvider(e){var{plugins:i=createPlugins,Renderer:t,insertionPoint:r,id:n,injectFirst:s}=e,o=__rest(e,["plugins","Renderer","insertionPoint","id","injectFirst"]);const d=useMemo((()=>{var e;let o=r;if(!o&&s&&"undefined"!=typeof window){const{head:i}=document;(null===(e=i.firstChild)||void 0===e?void 0:e.nodeType)===Node.COMMENT_NODE&&"mui-inject-first"===i.firstChild.nodeValue?o=i.firstChild:(o=document.createComment("mui-inject-first"),i.insertBefore(o,i.firstChild))}return create(Object.assign(Object.assign(Object.assign({plugins:i()},t?{Renderer:t}:void 0),o?{insertionPoint:o}:void 0),n?{id:n}:void 0))}),[t,i,n,s,r]);return React.createElement(MuiStylesProvider,Object.assign({jss:d},o))}
+import{__rest}from"tslib";import React,{useMemo}from"react";import{create}from"jss";import MuiStylesProvider,{}from"@mui/styles/StylesProvider";import createPlugins from"./createPlugins";export default function StylesProvider(e){var{plugins:i=createPlugins,Renderer:t,insertionPoint:r,id:n,injectFirst:s}=e,o=__rest(e,["plugins","Renderer","insertionPoint","id","injectFirst"]);const d=useMemo((()=>{var e;let o=r;if(!o&&s&&"undefined"!=typeof window){const{head:i}=document;(null===(e=i.firstChild)||void 0===e?void 0:e.nodeType)===Node.COMMENT_NODE&&"mui-inject-first"===i.firstChild.nodeValue?o=i.firstChild:(o=document.createComment("mui-inject-first"),i.insertBefore(o,i.firstChild))}return create(Object.assign(Object.assign(Object.assign({plugins:i()},t?{Renderer:t}:void 0),o?{insertionPoint:o}:void 0),n?{id:n}:void 0))}),[t,i,n,s,r]);return React.createElement(MuiStylesProvider,Object.assign({jss:d},o))}

SuspenseFallback/SuspenseFallback.js

@@ -1,1 +0,1 @@
-import{useEffect,useState}from"react";import useIsMounted from"@jstoolkit/react-hooks/useIsMounted";export default function SuspenseFallback({delay:e,onMountChanged:t,onMount:o,onUnmount:n,element:u}){const[s,l]=useState(null==e||e<=0),r=useIsMounted();return useEffect((()=>{const t=null!=e&&e>0?window.setTimeout((()=>l(!0)),e):void 0;return()=>{window.clearTimeout(t)}}),[e]),useEffect((()=>(s&&(t&&t(!0),o&&o()),()=>{!s&&r()||(t&&t(!1),n&&n())})),[s,r,o,t,n]),s&&u||null}
+import React,{useEffect,useState}from"react";import useIsMounted from"@jstoolkit/react-hooks/useIsMounted";export default function SuspenseFallback({delay:e,onMountChanged:t,onMount:o,onUnmount:n,element:u}){const[s,l]=useState(null==e||e<=0),r=useIsMounted();return useEffect((()=>{const t=null!=e&&e>0?window.setTimeout((()=>l(!0)),e):void 0;return()=>{window.clearTimeout(t)}}),[e]),useEffect((()=>(s&&(t&&t(!0),o&&o()),()=>{!s&&r()||(t&&t(!1),n&&n())})),[s,r,o,t,n]),s&&u||null}

theme.d.ts

@@ -25,2 +25,10 @@ import type { BaseCSSProperties, StyleRules } from '@mui/styles/withStyles';
 };
+export type ButtonTheme = ButtonThemeSizes & ButtonThemeVariants & {
+    root?: CSSProperties | undefined;
+    css?: StyleRules | undefined;
+} & {
+    [P in ButtonColor]?: {
+        [K in ButtonVariant]?: CSSProperties | undefined;
+    } | undefined;
+};
 export interface Theme {
@@ -74,10 +82,3 @@ rc?: {
         };
-        Button?: (ButtonThemeSizes & ButtonThemeVariants & {
-            root?: CSSProperties | undefined;
-            css?: StyleRules | undefined;
-        } & {
-            [P in ButtonColor]?: {
-                [K in ButtonVariant]?: CSSProperties | undefined;
-            } | undefined;
-        }) | undefined;
+        Button?: ButtonTheme | undefined;
         LoadableButton?: {
@@ -84,0 +85,0 @@ root?: CSSProperties | undefined;

Tooltip/Tooltip.d.ts

 import React from 'react';
-import { FlexSimpleProps, SpaceProps } from 'reflexy';
-import { TransitionFlexProps } from '../TransitionFlex';
+import { type FlexSimpleProps, type SpaceProps } from 'reflexy';
+import { type TransitionFlexProps } from '../TransitionFlex';
 export declare const useStyles: (props?: {
@@ -5,0 +5,0 @@ classes?: OptionalToUndefined<Partial<import("@mui/styles/withStyles").ClassNameMap<"style" | "title" | "text" | "root" | "container" | "rowContainer" | "arrow">>> | undefined;

Tooltip/Tooltip.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{Flex}from"reflexy";import useUpdatedRefState from"@jstoolkit/react-hooks/useUpdatedRefState";import TransitionFlex from"../TransitionFlex";import TruncatedText from"../TruncatedText";import{calcX,calcY,calcArrowCss,calcXInside}from"./utils";export const useStyles=makeStyles((({rc:e})=>{var t,o,l;return{root:{position:"absolute",userSelect:"none",pointerEvents:"none",transformOrigin:"0 0",left:0,top:0},container:{position:"relative"},rowContainer:{maxWidth:"inherit"},arrow:{position:"absolute"},style:Object.assign({color:"#ffffff",backgroundColor:"rgba(50, 50, 50, 0.8)",boxShadow:"0px 4px 16px rgba(0, 0, 0, 0.16)",borderRadius:"4px"},null===(t=null==e?void 0:e.Tooltip)||void 0===t?void 0:t.style),title:Object.assign({composes:"$style",maxWidth:"inherit"},null===(o=null==e?void 0:e.Tooltip)||void 0===o?void 0:o.title),text:Object.assign({composes:"$style",maxWidth:"inherit"},null===(l=null==e?void 0:e.Tooltip)||void 0===l?void 0:l.text)}}));export default function Tooltip(e){var t,o,l,n,i,s,{tooltip:a,className:r,onShown:c,onHidden:d}=e,u=__rest(e,["tooltip","className","onShown","onHidden"]);const m=useStyles({classes:{root:r}}),{rc:f}=useTheme(),p=useRef(null),v=useRef(null),x=useRef(null),R=useRef(null),h=useRef(null),T=useRef(null),[y,g]=useUpdatedRefState((e=>null==e||(!(null==a?void 0:a.sequence)||e)),[a]);useLayoutEffect((()=>{var e,t,o;if(!a||!(a.title||a.text||a.preview))return void(y()||g(!0));const{current:l}=p,{current:n}=v;if(!l||!n)return;const{x:i,y:s,alignX:r,alignY:c,minX:d,maxX:u,minY:m,maxY:w}=a,b=calcX(i,r,n.offsetWidth,d,u),S=calcY(s,c,n.offsetHeight,m,w);l.style.transform=`translate(${b}px, ${S}px)`;const{current:E}=x;if(E){const e=calcXInside(i-b,E.offsetWidth,0,n.offsetWidth);E.style.transform=`translateX(${e}px)`}const{current:W}=R;if(W){const e=calcXInside(i-b,W.offsetWidth,0,n.offsetWidth);W.style.transform=`translateX(${e}px)`}const{current:X}=h;if(X){const e=calcXInside(i-b,X.offsetWidth,0,n.offsetWidth);X.style.transform=`translateX(${e}px)`}const{current:C}=T;C&&Object.assign(C.style,calcArrowCss(a.alignX,a.alignY,(null===(e=null==f?void 0:f.Tooltip)||void 0===e?void 0:e.arrowColor)||(null===(o=null===(t=null==f?void 0:f.Tooltip)||void 0===t?void 0:t.style)||void 0===o?void 0:o.backgroundColor)||"rgba(50, 50, 50, 0.8)",n.clientHeight/4+"px")),y()&&g(!1)}),[y,null===(t=null==f?void 0:f.Tooltip)||void 0===t?void 0:t.arrowColor,null===(l=null===(o=null==f?void 0:f.Tooltip)||void 0===o?void 0:o.style)||void 0===l?void 0:l.backgroundColor,g,a]);const w=y();return React.createElement(TransitionFlex,{hidden:w,keepChildren:!0,componentRef:p,className:m.root,onShown:c,onHidden:d},a&&!(!a.title&&!a.text)&&React.createElement(Flex,Object.assign({componentRef:v,column:!0,alignItems:"flex-start"},u,null===(n=null==f?void 0:f.Tooltip)||void 0===n?void 0:n.space,a.space,{className:m.container,style:null!=a.maxWidth?{maxWidth:a.maxWidth}:void 0}),a.preview&&React.createElement(Flex,{componentRef:x,className:m.rowContainer},React.isValidElement(a.preview)?a.preview:React.createElement("div",{style:a.preview})),a.title&&React.createElement(Flex,{componentRef:R,className:m.rowContainer},React.isValidElement(a.title)?a.title:React.createElement(TruncatedText,Object.assign({mb:"xs",p:"xs"},null===(i=null==f?void 0:f.Tooltip)||void 0===i?void 0:i.innerSpace,a.innerSpace,{className:m.title}),a.title)),React.createElement(Flex,{componentRef:h,className:m.rowContainer},a.text&&React.isValidElement(a.text)?a.text:React.createElement(TruncatedText,Object.assign({p:"xs"},null===(s=null==f?void 0:f.Tooltip)||void 0===s?void 0:s.innerSpace,a.innerSpace,{className:m.text}),a.text)),a.arrow&&(!a.title||!a.text)&&React.createElement("div",{ref:T,className:m.arrow})))}
+import{__rest}from"tslib";import React,{useLayoutEffect,useRef}from"react";import makeStyles from"@mui/styles/makeStyles";import useTheme from"@mui/styles/useTheme";import{Flex}from"reflexy";import useUpdatedRefState from"@jstoolkit/react-hooks/useUpdatedRefState";import TransitionFlex,{}from"../TransitionFlex";import TruncatedText from"../TruncatedText";import{calcX,calcY,calcArrowCss,calcXInside}from"./utils";export const useStyles=makeStyles((({rc:e})=>{var t,o,l;return{root:{position:"absolute",userSelect:"none",pointerEvents:"none",transformOrigin:"0 0",left:0,top:0},container:{position:"relative"},rowContainer:{maxWidth:"inherit"},arrow:{position:"absolute"},style:Object.assign({color:"#ffffff",backgroundColor:"rgba(50, 50, 50, 0.8)",boxShadow:"0px 4px 16px rgba(0, 0, 0, 0.16)",borderRadius:"4px"},null===(t=null==e?void 0:e.Tooltip)||void 0===t?void 0:t.style),title:Object.assign({composes:"$style",maxWidth:"inherit"},null===(o=null==e?void 0:e.Tooltip)||void 0===o?void 0:o.title),text:Object.assign({composes:"$style",maxWidth:"inherit"},null===(l=null==e?void 0:e.Tooltip)||void 0===l?void 0:l.text)}}));export default function Tooltip(e){var t,o,l,n,i,s,{tooltip:a,className:r,onShown:c,onHidden:d}=e,u=__rest(e,["tooltip","className","onShown","onHidden"]);const m=useStyles({classes:{root:r}}),{rc:f}=useTheme(),p=useRef(null),v=useRef(null),x=useRef(null),R=useRef(null),h=useRef(null),T=useRef(null),[y,g]=useUpdatedRefState((e=>null==e||(!(null==a?void 0:a.sequence)||e)),[a]);useLayoutEffect((()=>{var e,t,o;if(!a||!(a.title||a.text||a.preview))return void(y()||g(!0));const{current:l}=p,{current:n}=v;if(!l||!n)return;const{x:i,y:s,alignX:r,alignY:c,minX:d,maxX:u,minY:m,maxY:w}=a,b=calcX(i,r,n.offsetWidth,d,u),S=calcY(s,c,n.offsetHeight,m,w);l.style.transform=`translate(${b}px, ${S}px)`;const{current:E}=x;if(E){const e=calcXInside(i-b,E.offsetWidth,0,n.offsetWidth);E.style.transform=`translateX(${e}px)`}const{current:W}=R;if(W){const e=calcXInside(i-b,W.offsetWidth,0,n.offsetWidth);W.style.transform=`translateX(${e}px)`}const{current:X}=h;if(X){const e=calcXInside(i-b,X.offsetWidth,0,n.offsetWidth);X.style.transform=`translateX(${e}px)`}const{current:C}=T;C&&Object.assign(C.style,calcArrowCss(a.alignX,a.alignY,(null===(e=null==f?void 0:f.Tooltip)||void 0===e?void 0:e.arrowColor)||(null===(o=null===(t=null==f?void 0:f.Tooltip)||void 0===t?void 0:t.style)||void 0===o?void 0:o.backgroundColor)||"rgba(50, 50, 50, 0.8)",n.clientHeight/4+"px")),y()&&g(!1)}),[y,null===(t=null==f?void 0:f.Tooltip)||void 0===t?void 0:t.arrowColor,null===(l=null===(o=null==f?void 0:f.Tooltip)||void 0===o?void 0:o.style)||void 0===l?void 0:l.backgroundColor,g,a]);const w=y();return React.createElement(TransitionFlex,{hidden:w,keepChildren:!0,componentRef:p,className:m.root,onShown:c,onHidden:d},a&&!(!a.title&&!a.text)&&React.createElement(Flex,Object.assign({componentRef:v,column:!0,alignItems:"flex-start"},u,null===(n=null==f?void 0:f.Tooltip)||void 0===n?void 0:n.space,a.space,{className:m.container,style:null!=a.maxWidth?{maxWidth:a.maxWidth}:void 0}),a.preview&&React.createElement(Flex,{componentRef:x,className:m.rowContainer},React.isValidElement(a.preview)?a.preview:React.createElement("div",{style:a.preview})),a.title&&React.createElement(Flex,{componentRef:R,className:m.rowContainer},React.isValidElement(a.title)?a.title:React.createElement(TruncatedText,Object.assign({mb:"xs",p:"xs"},null===(i=null==f?void 0:f.Tooltip)||void 0===i?void 0:i.innerSpace,a.innerSpace,{className:m.title}),a.title)),React.createElement(Flex,{componentRef:h,className:m.rowContainer},a.text&&React.isValidElement(a.text)?a.text:React.createElement(TruncatedText,Object.assign({p:"xs"},null===(s=null==f?void 0:f.Tooltip)||void 0===s?void 0:s.innerSpace,a.innerSpace,{className:m.text}),a.text)),a.arrow&&(!a.title||!a.text)&&React.createElement("div",{ref:T,className:m.arrow})))}

TooltipButton/TooltipButton.d.ts

 import React from 'react';
-import { ButtonProps } from '../Button';
-export interface TooltipData<D = never> {
-    readonly target: HTMLButtonElement;
-    readonly title: string;
-    readonly data?: D | undefined;
-}
-export interface TooltipButtonTooltipProps<D = never> {
-    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 | undefined;
-} : unknown extends D ? {
-    readonly data?: D | undefined;
-} : IfExtends<D, undefined, {
-    readonly data?: D | undefined;
-}, {
-    readonly data: D;
-}>;
-export type TooltipButtonProps<C extends React.ElementType = 'button', D = never> = Omit<ButtonProps<C>, 'onClick'> & TooltipButtonTooltipProps<D> & WithData<D> & {
+import { type ButtonProps } from '../Button';
+import { type TooltipableTooltipProps } from '../Tooltipable';
+export { type TooltipableTooltipProps as TooltipButtonTooltipProps };
+export type TooltipButtonProps<C extends React.ElementType = 'button', D = undefined> = Omit<ButtonProps<C>, 'onClick'> & TooltipableTooltipProps<D, HTMLElement> & {
     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 {};
+export default function TooltipButton<C extends React.ElementType = 'button', D = undefined>({ data, tooltip, tooltipDelay, onShowTooltip, onHideTooltip, ...restProps }: TooltipButtonProps<C, D>): JSX.Element;

TooltipButton/TooltipButton.js

@@ -1,1 +0,1 @@
-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))}
+import{__rest}from"tslib";import React from"react";import{TweakableElementWrapper}from"reflexy";import useRefCallback from"@jstoolkit/react-hooks/useRefCallback";import Button,{}from"../Button";import Tooltipable,{}from"../Tooltipable";export{};export default function TooltipButton(o){var{data:t,tooltip:e,tooltipDelay:l,onShowTooltip:a,onHideTooltip:i}=o;const p=__rest(o,["data","tooltip","tooltipDelay","onShowTooltip","onHideTooltip"]),{onClick:r}=p,n=__rest(p,["onClick"]),m=useRefCallback((o=>{r&&r(o,t)}));return React.createElement(Tooltipable,{data:t,tooltip:e,tooltipDelay:l,onShowTooltip:a,onHideTooltip:i,onClick:m,component:TweakableElementWrapper,element:React.createElement(Button,Object.assign({},n))})}

Transition/Transition.d.ts

 import React from 'react';
-import type { TransitionActions, TimeoutProps, TransitionStatus } from 'react-transition-group/Transition';
-import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
-interface BaseProps extends TransitionActions, TimeoutProps<undefined>, Pick<CSSTransitionProps, 'classNames'> {
-}
-export interface TransitionProps extends BaseProps {
+import { type TransitionActions, type TimeoutProps, type TransitionStatus as TransitionStatusOrigin } from 'react-transition-group/Transition';
+export type TransitionClassNames = PartialRecord<ExcludeStrict<TransitionStatusOrigin, 'unmounted'> | 'appearing' | 'appeared', string | undefined>;
+export type TransitionStatus = keyof TransitionClassNames;
+export interface TransitionProps<E extends HTMLElement | undefined> extends TransitionActions, TimeoutProps<E> {
     /** A single child content element. */
     children: React.ReactElement<{
         style?: React.CSSProperties | undefined;
+        className?: string | undefined;
     }, any>;
+    classNames?: string | TransitionClassNames | undefined;
     styles?: Partial<Record<TransitionStatus, React.CSSProperties>> | undefined;
 }
-declare const _default: <E extends HTMLElement>(props: TransitionProps & React.RefAttributes<E>) => JSX.Element;
+declare const _default: <E extends HTMLElement>(props: TransitionProps<E> & React.RefAttributes<E>) => JSX.Element;
 export default _default;

Transition/Transition.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React from"react";import CSSTransition from"react-transition-group/CSSTransition";import useRefs from"@jstoolkit/react-hooks/useRefs";export default React.forwardRef((function(e,n){const{nodeRef:t,appear:r=!0,in:o,addEndListener:i,onEnter:s,onEntered:a,onEntering:d,onExit:E,onExited:c,onExiting:f,styles:l,children:p}=e,u=__rest(e,["nodeRef","appear","in","addEndListener","onEnter","onEntered","onEntering","onExit","onExited","onExiting","styles","children"]),R=React.useRef(null),g=useRefs(p.ref,n,R),m=e=>n=>{if(!e||!R.current)return;const t=R.current;void 0===n?e(t):e(t,n)},x=m(s),S=m(d),b=m(a),j=m(E),y=m(f),_=m(c),h=CSSTransition;return React.createElement(h,Object.assign({appear:r,in:o,nodeRef:R,onEnter:x,onEntered:b,onEntering:S,onExit:j,onExited:_,onExiting:y,addEndListener:e=>{i&&R.current&&i(R.current,e)}},u),(e=>React.cloneElement(p,{style:Object.assign(Object.assign({},p.props.style),l&&l[e]),ref:g})))}));
+import{__rest}from"tslib";import React from"react";import TransitionBase,{}from"react-transition-group/Transition";import{clsx}from"clsx";import useRefs from"@jstoolkit/react-hooks/useRefs";import useRefCallback from"@jstoolkit/react-hooks/useRefCallback";import useChainRefCallback from"@jstoolkit/react-hooks/useChainRefCallback";const normalizedTransitionCallback=(e,n)=>a=>{if(!n||!e.current)return;const t=e.current;void 0===a?n(t):n(t,a)},getClassName=(e,n)=>{var a;const t="string"==typeof e;return t?`${t&&e?`${e}-`:""}${n}`:null!==(a=e[n])&&void 0!==a?a:""};export default React.forwardRef((function(e,n){const{nodeRef:a,appear:t=!0,in:r,addEndListener:o,onEnter:s,onEntered:i,onEntering:l,onExit:c,onExited:f,onExiting:d,styles:u,classNames:m="",children:R}=e,k=__rest(e,["nodeRef","appear","in","addEndListener","onEnter","onEntered","onEntering","onExit","onExited","onExiting","styles","classNames","children"]),p=React.useRef(null),C=useRefs(R.ref,n,e.nodeRef,p),E=React.useRef(!1),b=e=>{E.current=!!e},g=useChainRefCallback(b,normalizedTransitionCallback(p,s)),x=useRefCallback(normalizedTransitionCallback(p,l)),T=useRefCallback(normalizedTransitionCallback(p,i)),h=useChainRefCallback(b,normalizedTransitionCallback(p,c)),z=useRefCallback(normalizedTransitionCallback(p,d)),j=useRefCallback(normalizedTransitionCallback(p,f)),N=useRefCallback((e=>{o&&p.current&&o(p.current,e)}));return React.createElement(TransitionBase,Object.assign({appear:t,in:r,nodeRef:p,onEnter:g,onEntering:x,onEntered:T,onExit:h,onExiting:z,onExited:j,addEndListener:N},k),(e=>{if("unmounted"===e)return null;const n=E.current&&("entering"===e?"appearing":"entered"===e&&"appeared")||e,a=clsx(R.props.className,getClassName(m,n));return React.cloneElement(R,{style:Object.assign(Object.assign({},R.props.style),u&&u[n]),className:a,ref:C})}))}));

TransitionFlex/TransitionFlex.d.ts

 import React from 'react';
 import type { TransitionProps } from '@mui/material/transitions/transition';
-import { DefaultComponentType, FlexAllProps } from 'reflexy';
+import { type DefaultComponentType, type FlexAllProps } from 'reflexy';
 export type TransitionComponent = React.JSXElementConstructor<TransitionProps & {
@@ -5,0 +5,0 @@ children: React.ReactElement<any, any>;

TransitionFlex/TransitionFlex.js

@@ -1,1 +0,1 @@
-import{__rest}from"tslib";import React,{useRef}from"react";import Fade from"@mui/material/Fade";import clsx from"clsx";import{FlexWithRef}from"reflexy";import useChainRefCallback from"@jstoolkit/react-hooks/useChainRefCallback";export default function TransitionFlex(e){var n,i,{transition:t=Fade,transitionProps:a,transitionDuration:o=(null==a?void 0:a.timeout),hidden:r=!(null===(n=null==a?void 0:a.in)||void 0===n||n),appear:l=null===(i=null==a?void 0:a.appear)||void 0===i||i,disposable:s=(null==a?void 0:a.unmountOnExit),keepChildren:d,onHidden:u,onShown:c,className:m,hiddenClassName:p}=e,f=__rest(e,["transition","transitionProps","transitionDuration","hidden","appear","disposable","keepChildren","onHidden","onShown","className","hiddenClassName"]);const{children:h}=f,x=useRef(h);d&&!r&&(x.current=h);const C=d?h||x.current:h,R=useChainRefCallback(c&&(()=>c()),null==a?void 0:a.onEntered),b=useChainRefCallback(u&&(()=>u()),null==a?void 0:a.onExited);return React.createElement(t,Object.assign(Object.assign({},a),{in:!r,appear:l,unmountOnExit:s,timeout:o,onEntered:R,onExited:b}),React.createElement(FlexWithRef,Object.assign({component:"div",className:clsx(m,r&&p)},f),C))}
+import{__rest}from"tslib";import React,{useRef}from"react";import Fade from"@mui/material/Fade";import clsx from"clsx";import{FlexWithRef}from"reflexy";import useChainRefCallback from"@jstoolkit/react-hooks/useChainRefCallback";export default function TransitionFlex(e){var n,i,{transition:t=Fade,transitionProps:o,transitionDuration:a=(null==o?void 0:o.timeout),hidden:r=!(null===(n=null==o?void 0:o.in)||void 0===n||n),appear:l=null===(i=null==o?void 0:o.appear)||void 0===i||i,disposable:s=(null==o?void 0:o.unmountOnExit),keepChildren:d,onHidden:u,onShown:c,className:m,hiddenClassName:p}=e,f=__rest(e,["transition","transitionProps","transitionDuration","hidden","appear","disposable","keepChildren","onHidden","onShown","className","hiddenClassName"]);const x=f,{in:h=!r,enter:C,exit:R,onExited:b}=x,v=__rest(x,["in","enter","exit","onExited"]),{children:E}=f,k=useRef(E);d&&!r&&(k.current=E);const F=d?E||k.current:E,_=useChainRefCallback(c&&(()=>c()),null==o?void 0:o.onEntered),N=useChainRefCallback(u&&(()=>u()),null==o?void 0:o.onExited,b);return React.createElement(t,Object.assign(Object.assign({},o),{in:h,appear:l,enter:C,exit:R,unmountOnExit:s,timeout:a,onEntered:_,onExited:N}),React.createElement(FlexWithRef,Object.assign({component:"div",className:clsx(m,r&&p)},v),F))}

TruncatedText/TruncatedText.d.ts

 import React from 'react';
-import { FlexAllProps } from 'reflexy';
+import { type FlexAllProps } from 'reflexy';
 export type TruncatedTextProps<C extends React.ElementType = 'span'> = FlexAllProps<C> & {
@@ -4,0 +4,0 @@ readonly lines?: number | undefined;

VideoWatermark/getRandomShowController.d.ts

@@ -1,2 +0,2 @@
-import { ShowController, ShowControllerOptions } from './getShowController';
+import { type ShowController, type ShowControllerOptions } from './getShowController';
 export interface RandomShowControllerOptions {
@@ -3,0 +3,0 @@ readonly updateTimeout?: number | undefined;

VideoWatermark/getRandomShowController.js

@@ -1,1 +0,1 @@
-import getRandom from"@jstoolkit/utils/getRandom";import getTimer from"@jstoolkit/utils/getTimer";import toInt from"@jstoolkit/utils/toInt";import{getShowController}from"./getShowController";export function getRandomShowController({showOptions:t,updateTimeout:o,getBounds:e,onUpdate:i}){const n=()=>{const{x:t,y:o}=e();i({x:getRandom(0,t),y:getRandom(0,o)})};if(t){const{visibleTimeout:o,hiddenTimeout:e,isVisible:i,onShow:r,onHide:s}=t,{start:l,stop:m}=getShowController({visibleTimeout:o,hiddenTimeout:e,isVisible:i,onShow:()=>{n(),r()},onHide:s});return{start:l,stop:m,update:n}}const r=getTimer({callback:n,interval:()=>null!=o?o:toInt(1e3*getRandom(5,20)),autostart:!1});return{start:r.start,stop:r.stop,update:n}}
+import getRandom from"@jstoolkit/utils/getRandom";import getTimer from"@jstoolkit/utils/getTimer";import toInt from"@jstoolkit/utils/toInt";import{getShowController}from"./getShowController";export function getRandomShowController({showOptions:t,updateTimeout:o,getBounds:e,onUpdate:i}){const r=()=>{const{x:t,y:o}=e();i({x:getRandom(0,t),y:getRandom(0,o)})};if(t){const{visibleTimeout:o,hiddenTimeout:e,isVisible:i,onShow:n,onHide:s}=t,{start:l,stop:m,reset:a}=getShowController({visibleTimeout:o,hiddenTimeout:e,isVisible:i,onShow:()=>{r(),n()},onHide:s});return{start:l,stop:m,update:r,reset:a}}const n=getTimer({callback:r,interval:()=>null!=o?o:toInt(1e3*getRandom(5,20)),autostart:!1});return{start:n.start,stop:n.pause,update:r,reset:n.stop}}

VideoWatermark/getShowController.d.ts

@@ -11,3 +11,4 @@ export interface ShowControllerOptions {
     readonly stop: VoidFunction;
+    readonly reset: VoidFunction;
 }
 export declare function getShowController({ visibleTimeout, hiddenTimeout, isVisible, onShow, onHide, }: ShowControllerOptions): ShowController;

VideoWatermark/getShowController.js

@@ -1,1 +0,1 @@
-import getTimer from"@jstoolkit/utils/getTimer";export function getShowController({visibleTimeout:t,hiddenTimeout:o,isVisible:e,onShow:i,onHide:r}){const s=()=>{l.stop(),n.start(),e()||i()},a=()=>{n.stop(),l.start(),e()&&r()},l=getTimer({callback:s,interval:()=>o,autostart:!1}),n=getTimer({callback:a,interval:()=>t,autostart:!1});return{start:()=>{e()?s():a()},stop:()=>{l.stop(),n.stop()}}}
+import getTimer from"@jstoolkit/utils/getTimer";export function getShowController({visibleTimeout:t,hiddenTimeout:e,isVisible:o,onShow:i,onHide:r}){const s=()=>{l.pause(),u.start(),o()||i()},a=()=>{u.pause(),l.start(),o()&&r()},l=getTimer({callback:s,interval:()=>e,autostart:!1}),u=getTimer({callback:a,interval:()=>t,autostart:!1});return{start:()=>{o()?s():a()},stop:()=>{l.pause(),u.pause()},reset:()=>{l.stop(),u.stop()}}}

VideoWatermark/VideoWatermark.d.ts

@@ -5,2 +5,3 @@ import React from 'react';
 export type VideoWatermarkProps = FlexComponentProps & Partial<Point> & Partial<Size> & {
+    htmlRef?: React.Ref<HTMLDivElement>;
     text: string;
@@ -13,2 +14,4 @@ baseFontSize?: number | undefined;
     updateTimeout?: number | undefined;
+    modificationDetectionInterval?: number;
+    onModificationDetected?: VoidFunction;
 } & ({
@@ -15,0 +18,0 @@ mode: 'random';

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:null,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 useMemoDestructor from"@jstoolkit/react-hooks/useMemoDestructor";import useIncrementalState from"@jstoolkit/react-hooks/useIncrementalState";import TransitionFlex from"../TransitionFlex";import WatermarkField from"../WatermarkField";import{getShowController}from"./getShowController";import{getRandomShowController}from"./getRandomShowController";import{getModificationDetector}from"./modificationDetector";const useStyles=makeStyles((({rc:e})=>{var t,o,i,n,r,s,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===(n=null==e?void 0:e.VideoWatermark)||void 0===n?void 0:n.random),d),stripes:Object.assign(Object.assign({},null===(r=null==e?void 0:e.VideoWatermark)||void 0===r?void 0:r.default),null===(s=null==e?void 0:e.VideoWatermark)||void 0===s?void 0:s.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 n=Math.min(o,i);return Math.floor(e*(n/100*t))}export default React.memo((function(e){var t,o,i,n,r,s,a,{htmlRef:l,videoRef:d,text:u,mode:m="stripes",updateTimeout:c,baseFontSize:f,scaleBySize:v,visibleTimeout:p,hiddenTimeout:h,x:g,y:b,width:k,height:S,className:y,modificationDetectionInterval:R=5e3,onModificationDetected:x}=e,j=__rest(e,["htmlRef","videoRef","text","mode","updateTimeout","baseFontSize","scaleBySize","visibleTimeout","hiddenTimeout","x","y","width","height","className","modificationDetectionInterval","onModificationDetected"]);const w=useStyles({classes:{root:y}}),T=useRef(null),W=useUpdate(),E=useRef(null),O=useIncrementalState(),[F,H]=useRefState({textWidth:0,textHeight:0}),[V,L]=useRefState(void 0),D=useHideableState({enabled:!0,visible:!0}),I=k&&toInt(k),M=S&&toInt(S),z=null!=I?I:null===(t=T.current)||void 0===t?void 0:t.offsetWidth,C=null!=M?M:null===(o=T.current)||void 0===o?void 0:o.offsetHeight,N=(()=>{if(f&&v){if(!z||!C)return;return scaleFontSize(f,v,z,C)}return f})(),U=useUpdatedRef(z&&C?{width:z,height:C}:void 0),$=useMemoDestructor((()=>[R>0?getModificationDetector({mode:m,checkInterval:R,onModified:e=>{"children"===e?O.inc():x&&x()}}):void 0,e=>null==e?void 0:e.destroy()]),[O,m,R,x]),B=useRefs(T,l,null==$?void 0:$.setNode,W);useLayoutEffect((()=>{const{current:e}=E;if(!e)return;if(f&&!N)return;const{width:t,height:o}=e.getBoundingClientRect();H({textWidth:t,textHeight:o})}),[H,f,N,u]),useLayoutEffect((()=>{if(!d||"random"===m||!p||!h)return noop;const{current:e}=d;if(!e)return noop;const t=getShowController({visibleTimeout:p,hiddenTimeout:h,isVisible:()=>D.visible,onShow:D.show,onHide:D.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.reset()}}),[h,D,m,d,p]),useLayoutEffect((()=>{if(!d||"random"!==m||f&&!N||!u)return noop;const{current:e}=d;if(!e)return noop;const t=getRandomShowController({updateTimeout:c,getBounds:()=>{var e;const{textWidth:t,textHeight:o}=F(),{width:i=0,height:n=0}=null!==(e=U.current)&&void 0!==e?e:{};return{x:i-t,y:n-o}},onUpdate:L,showOptions:p&&h?{visibleTimeout:p,hiddenTimeout:h,isVisible:()=>D.visible,onShow:D.show,onHide:D.hide}:void 0});return e.addEventListener("play",t.start),e.addEventListener("pause",t.stop),e.paused?D.visible&&t.update():t.start(),()=>{e.removeEventListener("play",t.start),e.removeEventListener("pause",t.stop),t.reset()}}),[f,N,F,h,D,m,L,U,u,c,d,p]),D.hidden&&$&&$.setHidden();const{rc:_}=useTheme(),{textWidth:G,textHeight:q}=F(),A=V();return React.createElement(TransitionFlex,Object.assign({key:O.value,hidden:D.hidden,componentRef:B,fill:!0,className:w.root},j,{style:Object.assign(Object.assign({},j.style),{fontSize:null!=N?N:f,left:null!=g?g:0,top:null!=b?b:0,width:null!=I?I:"100%",height:null!=M?M:"100%"}),onShown:null==$?void 0:$.setVisible}),React.createElement("span",{ref:E,className:"random"===m?w.textRandom:w.textStripes},u),"stripes"===m&&G>0&&q>0&&React.createElement(WatermarkField,Object.assign({},null===(n=null===(i=null==_?void 0:_.VideoWatermark)||void 0===i?void 0:i.stripes)||void 0===n?void 0:n.field,{text:u,textWidth:G,textHeight:q,className:w.stripes})),"random"===m&&G>0&&q>0&&A&&!!z&&!!C&&React.createElement(TransitionGroup,{key:`${z}${C}`,component:null},React.createElement(Fade,{key:p&&h?void 0:`${A.x}-${A.y}`,timeout:null===(a=null===(s=null===(r=null==_?void 0:_.VideoWatermark)||void 0===r?void 0:r.random)||void 0===s?void 0:s.field)||void 0===a?void 0:a.transitionDuration},React.createElement(WatermarkField,{id:p&&h?void 0:`${A.x}-${A.y}`,text:u,textWidth:G,textHeight:q,width:G,height:q,patternTransform:null,className:w.random,style:{left:A.x,top:A.y}}))))}));

ViewableListener/ViewableListener.js

@@ -1,1 +0,1 @@
-import React,{useRef,useEffect,useCallback}from"react";import makeStyles from"@mui/styles/makeStyles";import useRefState from"@jstoolkit/react-hooks/useRefState";import EventTargetListener from"@jstoolkit/web-utils/EventTargetListener";const useStyles=makeStyles({root:{position:"absolute",top:0,left:0,width:"100%",height:"100%",zIndex:-1,opacity:0}});export default function ViewableListener({onViewable:e,className:t,style:s}){const n=useStyles({classes:{root:t}}),o=useRef(null),r=useRef(0),[a,i]=useRefState(!1),l=useCallback((()=>{const{current:t}=o;t&&(window.cancelAnimationFrame(r.current),r.current=window.requestAnimationFrame((()=>{const{top:s}=t.getBoundingClientRect(),n=s<=2*window.innerHeight/3;!a()&&n&&e(),a()!==n&&i(n)})))}),[a,e,i]);return useEffect((()=>{const e=new EventTargetListener(window);return e.on("scroll",l,{capture:!1,passive:!0}),l(),()=>{window.cancelAnimationFrame(r.current),e.removeAllListeners()}}),[l]),React.createElement("div",{ref:o,className:n.root,style:s})}
+import React,{useRef,useEffect,useCallback}from"react";import makeStyles from"@mui/styles/makeStyles";import useRefState from"@jstoolkit/react-hooks/useRefState";import{EventEmitterListener}from"@jstoolkit/web-utils/EventEmitterListener";const useStyles=makeStyles({root:{position:"absolute",top:0,left:0,width:"100%",height:"100%",zIndex:-1,opacity:0}});export default function ViewableListener({onViewable:e,className:t,style:s}){const n=useStyles({classes:{root:t}}),o=useRef(null),r=useRef(0),[i,a]=useRefState(!1),l=useCallback((()=>{const{current:t}=o;t&&(window.cancelAnimationFrame(r.current),r.current=window.requestAnimationFrame((()=>{const{top:s}=t.getBoundingClientRect(),n=s<=2*window.innerHeight/3;!i()&&n&&e(),i()!==n&&a(n)})))}),[i,e,a]);return useEffect((()=>{const e=new EventEmitterListener(window);return e.on("scroll",l,{capture:!1,passive:!0}),l(),()=>{window.cancelAnimationFrame(r.current),e.removeAllListeners()}}),[l]),React.createElement("div",{ref:o,className:n.root,style:s})}

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

192756

increased by4.1%

Number of package files

221

increased by3.76%

Lines of code

1133

increased by3.75%

No dependency changes