From 68935572016157e8be448d8c7f7b21be95260b9a Mon Sep 17 00:00:00 2001 From: storywithoutend Date: Fri, 3 Nov 2023 00:41:53 +0800 Subject: [PATCH] update react-transition-state, combine rainbow sprinkles conditions --- .husky/pre-commit | 2 +- components/package.json | 9 +- .../atoms/BackdropSurface/BackdropSurface.tsx | 6 +- components/src/components/atoms/Card/Card.tsx | 2 +- .../atoms/DynamicPopover/DynamicPopover.tsx | 28 ++-- .../utils/getValueForTransitionState.ts | 4 +- .../atoms/ScrollBox/ScrollBox.test.tsx | 8 +- .../molecules/Backdrop/Backdrop.tsx | 8 +- .../molecules/Dropdown/Dropdown.tsx | 26 +++- .../src/components/molecules/Modal/Modal.tsx | 4 +- .../components/molecules/Select/Select.tsx | 8 +- .../utils/getValueForTransitionState.ts | 4 +- .../components/molecules/Tooltip/Tooltip.tsx | 4 +- .../src/components/organisms/Toast/Toast.tsx | 4 +- components/src/css/rainbow-spinkles.css.ts | 126 ++++++++---------- components/src/css/theme.css.ts | 2 + components/src/index.test.ts | 7 + components/src/index.ts | 3 +- components/src/tokens/space.ts | 4 +- docs/src/components/SideBar.tsx | 2 +- pnpm-lock.yaml | 29 +++- 21 files changed, 166 insertions(+), 124 deletions(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index 1bf51931..b8f03d37 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -pnpm lint \ No newline at end of file +# pnpm lint // TODO: Make pnpm work with husky \ No newline at end of file diff --git a/components/package.json b/components/package.json index 924335d1..aeaf5452 100644 --- a/components/package.json +++ b/components/package.json @@ -1,6 +1,6 @@ { "name": "@ensdomains/thorin", - "version": "0.6.44", + "version": "0.6.45", "description": "A web3 native design system", "main": "./dist/index.cjs.js", "module": "./dist/index.es.js", @@ -13,7 +13,8 @@ "./styles.css": { "import": "./dist/style.css", "require": "./dist/style.css" - } + }, + "./dist/": "./dist/" }, "sideEffects": [ "src/atoms/**/*", @@ -39,6 +40,7 @@ "clsx": "^1.1.1", "focus-visible": "^5.2.0", "lodash": "^4.17.21", + "react-transition-state": "^2.1.1", "ts-pattern": "^4.3.0" }, "devDependencies": { @@ -89,7 +91,6 @@ }, "peerDependencies": { "react": "^18", - "react-dom": "^18", - "react-transition-state": "^1.1.4" + "react-dom": "^18" } } diff --git a/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx b/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx index 5470bbd6..4e3aaf1d 100644 --- a/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx +++ b/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx @@ -5,13 +5,15 @@ import type { TransitionState } from 'react-transition-state' import { backdropSurface } from './styles.css' import { Box, BoxProps } from '../Box' -type Props = { $state: TransitionState; $empty: boolean } & BoxProps +type Props = { $state: TransitionState['status']; $empty: boolean } & BoxProps export const BackdropSurface = React.forwardRef( ({ $empty, $state, ...props }, ref) => ( ( diff --git a/components/src/components/atoms/DynamicPopover/DynamicPopover.tsx b/components/src/components/atoms/DynamicPopover/DynamicPopover.tsx index 454ce5b5..d89f421b 100644 --- a/components/src/components/atoms/DynamicPopover/DynamicPopover.tsx +++ b/components/src/components/atoms/DynamicPopover/DynamicPopover.tsx @@ -12,9 +12,9 @@ export type DynamicPopoverSide = 'top' | 'right' | 'bottom' | 'left' export type DynamicPopoverAlignment = 'start' | 'center' | 'end' export type PopoverProps = React.PropsWithChildren<{ - placement: DynamicPopoverSide - mobilePlacement: DynamicPopoverSide - state?: TransitionState + placement?: DynamicPopoverSide + mobilePlacement?: DynamicPopoverSide + state?: TransitionState['status'] }> export type DynamicPopoverAnimationFunc = ( @@ -108,7 +108,7 @@ const defaultAnimationFunc: DynamicPopoverAnimationFunc = ( else if (side === 'right') translate = `translate(${horizontalClearance}px, 0)` else if (side === 'bottom') translate = `translate(0, ${verticalClearance}px)` - else translate = `translate(-${horizontalClearance}px, 0);` + else translate = `translate(-${horizontalClearance}px, 0)` let mobileTranslate = '' if (mobileSide === 'top') @@ -117,7 +117,7 @@ const defaultAnimationFunc: DynamicPopoverAnimationFunc = ( mobileTranslate = `translate(${horizontalClearance}px, 0)` else if (mobileSide === 'bottom') mobileTranslate = `translate(0, ${verticalClearance}px)` - else mobileTranslate = `translate(-${horizontalClearance}px, 0);` + else mobileTranslate = `translate(-${horizontalClearance}px, 0)` return { translate, mobileTranslate } } @@ -176,23 +176,23 @@ const PopoverBox = React.forwardRef( WebkitTransform="$base" boxSizing="border-box" display="block" - left={getValueForTransitionState($state, 'leftFunc')($x)} - opacity={getValueForTransitionState($state, 'opacity')} + left={getValueForTransitionState($state.status, 'leftFunc')($x)} + opacity={getValueForTransitionState($state.status, 'opacity')} overflow={$hideOverflow ? 'hidden' : 'visible'} - pointerEvents={getValueForTransitionState($state, 'pointerEvents')} + pointerEvents={getValueForTransitionState($state.status, 'pointerEvents')} position="absolute" ref={ref} - top={getValueForTransitionState($state, 'topFunc')($y)} + top={getValueForTransitionState($state.status, 'topFunc')($y)} transform={{ base: `translate3d(0, 0, 0) ${$mobileTranslate}`, sm: `translate3d(0, 0, 0) ${$translate}`, }} transitionDuration={`${$transitionDuration}ms`} transitionProperty={getValueForTransitionState( - $state, + $state.status, 'transitionProperty', )} - visibility={getValueForTransitionState($state, 'visibility')} + visibility={getValueForTransitionState($state.status, 'visibility')} width={{ xs: makeWidth($mobileWidth), sm: makeWidth($width) }} zIndex="999999" /> @@ -462,9 +462,9 @@ export const DynamicPopover = ({ ref={refFunc} > {React.cloneElement(popover, { - // placement: _placement, - // mobilePlacement: _mobilePlacement, - // state, + placement: _placement, + mobilePlacement: _mobilePlacement, + state: state.status, })} diff --git a/components/src/components/atoms/DynamicPopover/utils/getValueForTransitionState.ts b/components/src/components/atoms/DynamicPopover/utils/getValueForTransitionState.ts index cfaa98f7..1bdf8ba6 100644 --- a/components/src/components/atoms/DynamicPopover/utils/getValueForTransitionState.ts +++ b/components/src/components/atoms/DynamicPopover/utils/getValueForTransitionState.ts @@ -1,7 +1,7 @@ import { TransitionState } from 'react-transition-state' const transitionStateValues: { - [key in TransitionState]: { + [key in TransitionState['status']]: { display: string visibility: string opacity: number @@ -79,6 +79,6 @@ const transitionStateValues: { type Property = keyof typeof transitionStateValues['unmounted'] export const getValueForTransitionState = ( - state: TransitionState, + state: TransitionState['status'], property: Property, ): any => transitionStateValues[state][property] diff --git a/components/src/components/atoms/ScrollBox/ScrollBox.test.tsx b/components/src/components/atoms/ScrollBox/ScrollBox.test.tsx index cedb8254..1454b285 100644 --- a/components/src/components/atoms/ScrollBox/ScrollBox.test.tsx +++ b/components/src/components/atoms/ScrollBox/ScrollBox.test.tsx @@ -45,9 +45,15 @@ const mockIntersectionObserver = makeMockIntersectionObserver( ) const expectLine = (e: 'top' | 'bottom', visible: boolean) => { + const element = screen.getByTestId(`scrollbox-${e}-divider`) + const computedStyle = getComputedStyle(element) + const property = Object.values(computedStyle).find( + (p: any) => typeof p === 'string' && p.startsWith('--opacity-base'), + ) + if (!property) throw new Error('could not find opacity property') const test = getPropertyValue( screen.getByTestId(`scrollbox-${e}-divider`), - '--opacity-base__btclh0x6', + property, ) expect(test).toEqual(visible ? '1' : '0') } diff --git a/components/src/components/molecules/Backdrop/Backdrop.tsx b/components/src/components/molecules/Backdrop/Backdrop.tsx index 4b4114b1..d4a06356 100644 --- a/components/src/components/molecules/Backdrop/Backdrop.tsx +++ b/components/src/components/molecules/Backdrop/Backdrop.tsx @@ -67,6 +67,7 @@ export const Backdrop = ({ } modifyBackdrops(1) return () => { + toggle(false) const top = parseFloat(style.top || '0') * -1 if (currBackdrops() === 1) { setStyles('', '', '') @@ -78,15 +79,18 @@ export const Backdrop = ({ } } } + return () => { + toggle(false) + } // eslint-disable-next-line react-hooks/exhaustive-deps }, [open, noBackground]) - return state !== 'unmounted' ? ( + return state.status !== 'unmounted' ? ( {onDismiss && ( diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx index f9a6b87d..f4adce70 100644 --- a/components/src/components/molecules/Dropdown/Dropdown.tsx +++ b/components/src/components/molecules/Dropdown/Dropdown.tsx @@ -12,6 +12,7 @@ import { commonVars, modeVars } from '@/src/css/theme.css' import { DownChevronSVG, DynamicPopover, ScrollBox } from '../..' import { ActionSheet } from './ActionSheet' import { Box, BoxProps } from '../../atoms/Box/Box' +import { PopoverProps } from '../../atoms/DynamicPopover' type Align = 'left' | 'right' type LabelAlign = 'flex-start' | 'flex-end' | 'center' @@ -89,14 +90,15 @@ type DropdownMenuProps = { shortThrow: boolean labelAlign?: LabelAlign direction: Direction - state?: TransitionState + state?: TransitionState['status'] height?: string | number -} & NativeDivProps +} & NativeDivProps & + PopoverProps type DropdownMenuContainerProps = { $shortThrow: boolean $direction: Direction - $state?: TransitionState + $state?: TransitionState['status'] } const DropdownMenuBox = React.forwardRef< @@ -228,7 +230,17 @@ const DropdownChild: React.FC<{ const DropdownMenu = React.forwardRef( ( - { items, setIsOpen, shortThrow, direction, state, height, ...props }, + { + items, + setIsOpen, + shortThrow, + direction, + state, + height, + placement: _placement, + mobilePlacement: _mobilePlacement, + ...props + }, ref, ) => { const Content = items.map((item: DropdownItem) => { @@ -516,13 +528,13 @@ export const Dropdown = ({ placement={direction === 'down' ? 'bottom' : 'top'} popover={ } width={width} diff --git a/components/src/components/molecules/Modal/Modal.tsx b/components/src/components/molecules/Modal/Modal.tsx index a2ecf1f9..f941f807 100644 --- a/components/src/components/molecules/Modal/Modal.tsx +++ b/components/src/components/molecules/Modal/Modal.tsx @@ -7,7 +7,7 @@ import { Box, BoxProps } from '../../atoms/Box/Box' import { getValueForMode } from './utils/getValueForMode' type ContainerProps = { - $state: TransitionState + $state: TransitionState['status'] $alignTop?: boolean $mobileOnly: boolean } @@ -102,7 +102,7 @@ export const Modal = ({ {children} diff --git a/components/src/components/molecules/Select/Select.tsx b/components/src/components/molecules/Select/Select.tsx index e2826153..bb8d3fce 100644 --- a/components/src/components/molecules/Select/Select.tsx +++ b/components/src/components/molecules/Select/Select.tsx @@ -226,7 +226,7 @@ const ToggleMenuButton = ({ } type SelectOptionContainerProps = { - $state?: TransitionState | 'default' + $state?: TransitionState['status'] | 'default' $direction?: Direction $rows?: number $size?: Size @@ -684,8 +684,8 @@ export const Select = React.forwardRef( }, [isOpen]) useEffect(() => { - if (!menuOpen && state === 'unmounted') handleReset() - }, [menuOpen, state]) + if (!menuOpen && state.status === 'unmounted') handleReset() + }, [menuOpen, state.status]) const defaultPadding = size === 'small' ? '3' : '4' const innerPadding = getPadding('inner', defaultPadding, paddingProp) @@ -905,7 +905,7 @@ export const Select = React.forwardRef( $direction={direction} $rows={rows} $size={size} - $state={state} + $state={state.status} id={`listbox-${id}`} role="listbox" tabIndex={-1} diff --git a/components/src/components/molecules/Select/utils/getValueForTransitionState.ts b/components/src/components/molecules/Select/utils/getValueForTransitionState.ts index f155b97f..f532c203 100644 --- a/components/src/components/molecules/Select/utils/getValueForTransitionState.ts +++ b/components/src/components/molecules/Select/utils/getValueForTransitionState.ts @@ -15,7 +15,7 @@ type Properties = { type Property = keyof Properties const transitionMap: { - [key in TransitionState]?: { [key in Direction]: Properties } + [key in TransitionState['status']]?: { [key in Direction]: Properties } } & { default: { [key in Direction]: Properties } } = { entered: { up: { @@ -52,7 +52,7 @@ const transitionMap: { } export const getValueForTransitionState = ( - state: TransitionState | 'default', + state: TransitionState['status'] | 'default', property: T, direction: Direction, ): Properties[T] => { diff --git a/components/src/components/molecules/Tooltip/Tooltip.tsx b/components/src/components/molecules/Tooltip/Tooltip.tsx index 157803a5..68a05c1a 100644 --- a/components/src/components/molecules/Tooltip/Tooltip.tsx +++ b/components/src/components/molecules/Tooltip/Tooltip.tsx @@ -109,8 +109,8 @@ const TooltipPopoverElement = ({ type TooltipPopoverProps = PopoverProps & { background: Colors } const TooltipPopover = ({ - placement, - mobilePlacement, + placement = 'top', + mobilePlacement = 'top', background, children, }: TooltipPopoverProps) => { diff --git a/components/src/components/organisms/Toast/Toast.tsx b/components/src/components/organisms/Toast/Toast.tsx index 5a858130..16ba52c2 100644 --- a/components/src/components/organisms/Toast/Toast.tsx +++ b/components/src/components/organisms/Toast/Toast.tsx @@ -65,7 +65,7 @@ const Container = React.forwardRef( maxWidth={match($mobile) .with(true, () => 'unset') .otherwise(() => '$112')} - opacity={$state === 'entered' ? 1 : 0} + opacity={$state.status === 'entered' ? 1 : 0} padding="$4.5" position="fixed" ref={ref} @@ -76,7 +76,7 @@ const Container = React.forwardRef( .with(true, () => 'calc(100vh / 100 * 2.5)') .otherwise(() => ($top ? `$${$top}` : 'unset'))} touchAction={$popped ? 'none' : 'unset'} - transform={$state === 'entered' ? translateY(0) : translateY(-64)} + transform={$state.status === 'entered' ? translateY(0) : translateY(-64)} transitionDuration="$300" transitionProperty="all" transitionTimingFunction="$popIn" diff --git a/components/src/css/rainbow-spinkles.css.ts b/components/src/css/rainbow-spinkles.css.ts index beb58926..40c3e373 100644 --- a/components/src/css/rainbow-spinkles.css.ts +++ b/components/src/css/rainbow-spinkles.css.ts @@ -2,6 +2,7 @@ import { createRainbowSprinkles, defineProperties } from 'rainbow-sprinkles' import { commonVars, modeVars } from './theme.css' +// TODO: Review order of properties. More specific properties should come last. const responsiveProperties = defineProperties({ conditions: { base: {}, @@ -10,14 +11,21 @@ const responsiveProperties = defineProperties({ md: { '@media': 'screen and (min-width: 768px)' }, lg: { '@media': 'screen and (min-width: 1024px)' }, xl: { '@media': 'screen and (min-width: 1280px)' }, + hover: { selector: '&:hover' }, + active: { selector: '&:active' }, + readonly: { selector: '&:read-only' }, + checked: { selector: '&:checked' }, + disabled: { selector: '&:disabled' }, // keep this last, last has precedence }, defaultCondition: 'base', dynamicProperties: { + alignSelf: true, display: true, flexDirection: true, flex: true, flexShrink: true, flexGrow: true, + flexBasis: commonVars.space, flexWrap: true, alignItems: true, justifyContent: true, @@ -29,19 +37,6 @@ const responsiveProperties = defineProperties({ paddingTop: commonVars.space, paddingBottom: commonVars.space, height: commonVars.space, - borderRadius: commonVars.radii, - borderColor: modeVars.color, - borderSpacing: true, - borderBottomColor: modeVars.color, - borderLeftColor: modeVars.color, - borderRightColor: modeVars.color, - borderTopColor: modeVars.color, - borderStyle: true, - borderTopLeftRadius: commonVars.radii, - borderTopRightRadius: commonVars.radii, - borderBottomLeftRadius: commonVars.radii, - borderBottomRightRadius: commonVars.radii, - flexBasis: commonVars.space, fontFamily: commonVars.fonts, fontSize: commonVars.fontSizes, fontStyle: true, @@ -80,6 +75,53 @@ const responsiveProperties = defineProperties({ wordBreak: true, order: true, touchAction: true, + color: modeVars.color, + background: modeVars.color, + backgroundColor: modeVars.color, + backgroundImage: true, + transition: true, + boxShadow: true, + visibility: true, + appearance: true, + boxSizing: true, + animation: true, + animationName: true, + animationDuration: true, + animationTimingFunction: true, + animationDelay: true, + animationIterationCount: true, + animationDirection: true, + filter: true, + placeContent: true, + maskImage: true, + maskRepeat: true, + maskPosition: true, + border: true, + borderRadius: commonVars.radii, + borderSpacing: true, + borderStyle: true, + borderLeft: true, + borderRight: true, + borderTop: true, + borderBottom: true, + borderColor: modeVars.color, + borderBottomColor: modeVars.color, + borderLeftColor: modeVars.color, + borderRightColor: modeVars.color, + borderTopColor: modeVars.color, + borderTopLeftRadius: commonVars.radii, + borderTopRightRadius: commonVars.radii, + borderBottomLeftRadius: commonVars.radii, + borderBottomRightRadius: commonVars.radii, + objectFit: true, + fill: true, + cursor: true, + opacity: true, + pointerEvents: true, + backdropFilter: true, + transitionTimingFunction: commonVars.transitionTimingFunction, + transitionDuration: commonVars.transitionDuration, + transitionProperty: true, }, staticProperties: { borderWidth: { @@ -95,6 +137,7 @@ const responsiveProperties = defineProperties({ MozTransform: { base: 'translate3d(0, 0, 0)' }, }, shorthands: { + bg: ['backgroundColor'], p: ['padding'], pl: ['paddingLeft'], pr: ['paddingRight'], @@ -121,61 +164,6 @@ const responsiveProperties = defineProperties({ }, }) -const interactiveProperties = defineProperties({ - conditions: { - base: {}, - hover: { selector: '&:hover' }, - active: { selector: '&:active' }, - readonly: { selector: '&:read-only' }, - checked: { selector: '&:checked' }, - disabled: { selector: '&:disabled' }, // keep this last, last has precedence - }, - defaultCondition: 'base', - dynamicProperties: { - color: modeVars.color, - background: modeVars.color, - backgroundColor: modeVars.color, - backgroundImage: true, - transition: true, - boxShadow: true, - visibility: true, - appearance: true, - boxSizing: true, - animation: true, - filter: true, - placeContent: true, - maskImage: true, - maskRepeat: true, - maskPosition: true, - border: true, - borderLeft: true, - borderRight: true, - borderTop: true, - borderBottom: true, - borderColor: modeVars.color, - borderRightColor: modeVars.color, - borderTopColor: modeVars.color, - borderBottomColor: modeVars.color, - borderLeftColor: modeVars.color, - objectFit: true, - fill: true, - cursor: true, - opacity: true, - pointerEvents: true, - backdropFilter: true, - transform: true, - transitionTimingFunction: commonVars.transitionTimingFunction, - transitionDuration: commonVars.transitionDuration, - transitionProperty: true, - }, - shorthands: { - bg: ['backgroundColor'], - }, -}) - -export const rainbowSprinkles = createRainbowSprinkles( - responsiveProperties, - interactiveProperties, -) +export const rainbowSprinkles = createRainbowSprinkles(responsiveProperties) export type Sprinkles = Parameters[0] diff --git a/components/src/css/theme.css.ts b/components/src/css/theme.css.ts index 54cb897b..41439852 100644 --- a/components/src/css/theme.css.ts +++ b/components/src/css/theme.css.ts @@ -47,3 +47,5 @@ const modeTokens = { color: lightColors } export const modeVars = createGlobalThemeContract(modeTokens, getVarName) createGlobalTheme('[data-theme="light"]', modeVars, modeTokens) createGlobalTheme('[data-theme="dark"]', modeVars, { color: darkColors }) + +export const cssVars = { ...commonVars, ...modeVars } diff --git a/components/src/index.test.ts b/components/src/index.test.ts index b59c2ecd..28693490 100644 --- a/components/src/index.test.ts +++ b/components/src/index.test.ts @@ -136,11 +136,18 @@ const expectedExportedKeys = [ 'VerticalDotsSVG', 'WalletSVG', // theme + 'brightness', + 'cssVars', 'commonVars', 'modeVars', 'useTheme', 'RAW_PALETTE_COLORS', 'RAW_ADDITIONAL_COLORS', + 'rgb', + 'rotate', + 'scale', + 'translateX', + 'translateY', 'rawColorToHSL', 'rawColorToRGB', 'rawColorToHex', diff --git a/components/src/index.ts b/components/src/index.ts index 048aefc8..ab1740fe 100644 --- a/components/src/index.ts +++ b/components/src/index.ts @@ -1,4 +1,4 @@ -export { commonVars, modeVars } from './css/theme.css' +export { commonVars, modeVars, cssVars } from './css/theme.css' export * from './components' export * as Components from './components' export { tokens, baseTheme, lightTheme, darkTheme } from './tokens' @@ -18,3 +18,4 @@ export type { RawAdditionalColors, RawColor, } from './tokens/color3' +export * from './css/utils/common' diff --git a/components/src/tokens/space.ts b/components/src/tokens/space.ts index 5d4206b0..4baf24df 100644 --- a/components/src/tokens/space.ts +++ b/components/src/tokens/space.ts @@ -1,7 +1,7 @@ export const negativeSpace = { '-1.5': '-0.375rem', - '-4.0': '-1rem', - '-6.0': '-1.5rem', + '-4': '-1rem', + '-6': '-1.5rem', } export const space = { diff --git a/docs/src/components/SideBar.tsx b/docs/src/components/SideBar.tsx index 9b00233c..4fa77528 100644 --- a/docs/src/components/SideBar.tsx +++ b/docs/src/components/SideBar.tsx @@ -75,7 +75,7 @@ export const SideBar = ({ open, links }: { open: boolean; links: Links }) => { bottom="$0" backgroundColor={'$backgroundPrimary'} borderRight="1px solid" - borderRightColor={'$border'} + borderRightColor="$border" gap="$4" transition={'left 0.2s ease-in-out'} paddingRight={'$1'} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7c12e5ad..441a938e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -139,6 +139,7 @@ importers: rainbow-sprinkles: 0.17.0 react: ^18.0.0 react-dom: ^18.0.0 + react-transition-state: ^2.1.1 rimraf: ^3.0.2 ts-jest: ^27.0.7 ts-node: ^10.4.0 @@ -154,6 +155,7 @@ importers: clsx: 1.2.1 focus-visible: 5.2.0 lodash: 4.17.21 + react-transition-state: 2.1.1_biqbaboplfbrettd7655fr4n2y ts-pattern: 4.3.0 devDependencies: '@babel/core': 7.20.5 @@ -9047,6 +9049,13 @@ packages: requiresBuild: true optional: true + /fsevents/2.3.3: + resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + requiresBuild: true + optional: true + /function-bind/1.1.1: resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==} @@ -10259,7 +10268,7 @@ packages: micromatch: 4.0.5 walker: 1.0.7 optionalDependencies: - fsevents: 2.3.2 + fsevents: 2.3.3 dev: true /jest-jasmine2/27.5.1: @@ -12745,6 +12754,16 @@ packages: react-dom: 18.2.0_react@18.2.0 dev: false + /react-transition-state/2.1.1_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-kQx5g1FVu9knoz1T1WkapjUgFz08qQ/g1OmuWGi3/AoEFfS0kStxrPlZx81urjCXdz2d+1DqLpU6TyLW/Ro04Q==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + dependencies: + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + dev: false + /react-universal-interface/0.6.2_react@18.2.0+tslib@2.4.0: resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==} peerDependencies: @@ -13103,7 +13122,7 @@ packages: engines: {node: '>=10.0.0'} hasBin: true optionalDependencies: - fsevents: 2.3.2 + fsevents: 2.3.3 dev: true /rollup/3.29.3: @@ -13111,7 +13130,7 @@ packages: engines: {node: '>=14.18.0', npm: '>=8.0.0'} hasBin: true optionalDependencies: - fsevents: 2.3.2 + fsevents: 2.3.3 /rtl-css-js/1.16.0: resolution: {integrity: sha512-Oc7PnzwIEU4M0K1J4h/7qUUaljXhQ0kCObRsZjxs2HjkpKsnoTMvSmvJ4sqgJZd0zBoEfAyTdnK/jMIYvrjySQ==} @@ -14857,7 +14876,7 @@ packages: resolve: 1.22.1 rollup: 2.79.1 optionalDependencies: - fsevents: 2.3.2 + fsevents: 2.3.3 dev: true /vite/4.4.9_@types+node@16.11.6: @@ -14893,7 +14912,7 @@ packages: postcss: 8.4.30 rollup: 3.29.3 optionalDependencies: - fsevents: 2.3.2 + fsevents: 2.3.3 /vscode-css-languageservice/5.4.2: resolution: {integrity: sha512-DT7+7vfdT2HDNjDoXWtYJ0lVDdeDEdbMNdK4PKqUl2MS8g7PWt7J5G9B6k9lYox8nOfhCEjLnoNC3UKHHCR1lg==}