@semcore/core 17.0.0-prerelease.20-prerelease.20 → 17.0.0-prerelease.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/LastInteractionType.js +22 -36
- package/lib/LastInteractionType.js.map +1 -1
- package/lib/LastInteractionType.mjs +19 -33
- package/lib/LastInteractionType.mjs.map +1 -1
- package/lib/core-types/Component.js +25 -41
- package/lib/core-types/Component.js.map +1 -1
- package/lib/core-types/Component.mjs +18 -38
- package/lib/core-types/Component.mjs.map +1 -1
- package/lib/core-types/symbols.js +9 -9
- package/lib/core-types/symbols.js.map +1 -1
- package/lib/core-types/symbols.mjs +9 -9
- package/lib/core-types/symbols.mjs.map +1 -1
- package/lib/coreFactory.js +143 -205
- package/lib/coreFactory.js.map +1 -1
- package/lib/coreFactory.mjs +118 -164
- package/lib/coreFactory.mjs.map +1 -1
- package/lib/decorators/propsObserver.js +36 -64
- package/lib/decorators/propsObserver.js.map +1 -1
- package/lib/decorators/propsObserver.mjs +33 -61
- package/lib/decorators/propsObserver.mjs.map +1 -1
- package/lib/decorators/reactive.js +17 -17
- package/lib/decorators/reactive.js.map +1 -1
- package/lib/decorators/reactive.mjs +15 -15
- package/lib/decorators/reactive.mjs.map +1 -1
- package/lib/enhancement/Children.js +51 -59
- package/lib/enhancement/Children.js.map +1 -1
- package/lib/enhancement/Children.mjs +47 -41
- package/lib/enhancement/Children.mjs.map +1 -1
- package/lib/enhancement/Root.js +36 -37
- package/lib/enhancement/Root.js.map +1 -1
- package/lib/enhancement/Root.mjs +28 -18
- package/lib/enhancement/Root.mjs.map +1 -1
- package/lib/enhancement/dataName.js +7 -8
- package/lib/enhancement/dataName.js.map +1 -1
- package/lib/enhancement/dataName.mjs +5 -5
- package/lib/enhancement/dataName.mjs.map +1 -1
- package/lib/enhancement/enhance.js +6 -9
- package/lib/enhancement/enhance.js.map +1 -1
- package/lib/enhancement/enhance.mjs +5 -7
- package/lib/enhancement/enhance.mjs.map +1 -1
- package/lib/enhancement/functionDefaultProps.js +6 -6
- package/lib/enhancement/functionDefaultProps.js.map +1 -1
- package/lib/enhancement/functionDefaultProps.mjs +4 -4
- package/lib/enhancement/functionDefaultProps.mjs.map +1 -1
- package/lib/enhancement/i18n.js +13 -13
- package/lib/enhancement/i18n.js.map +1 -1
- package/lib/enhancement/i18n.mjs +10 -9
- package/lib/enhancement/i18n.mjs.map +1 -1
- package/lib/enhancement/inheritedName.js +7 -8
- package/lib/enhancement/inheritedName.js.map +1 -1
- package/lib/enhancement/inheritedName.mjs +5 -5
- package/lib/enhancement/inheritedName.mjs.map +1 -1
- package/lib/enhancement/staticChildren.js +47 -56
- package/lib/enhancement/staticChildren.js.map +1 -1
- package/lib/enhancement/staticChildren.mjs +43 -48
- package/lib/enhancement/staticChildren.mjs.map +1 -1
- package/lib/enhancement/style.js +29 -27
- package/lib/enhancement/style.js.map +1 -1
- package/lib/enhancement/style.mjs +26 -20
- package/lib/enhancement/style.mjs.map +1 -1
- package/lib/enhancement/uncontrolledProps.js +46 -65
- package/lib/enhancement/uncontrolledProps.js.map +1 -1
- package/lib/enhancement/uncontrolledProps.mjs +43 -52
- package/lib/enhancement/uncontrolledProps.mjs.map +1 -1
- package/lib/esm/LastInteractionType.mjs +19 -33
- package/lib/esm/core-types/Component.mjs +18 -38
- package/lib/esm/core-types/symbols.mjs +9 -9
- package/lib/esm/coreFactory.mjs +118 -164
- package/lib/esm/enhancement/Children.mjs +47 -41
- package/lib/esm/enhancement/Root.mjs +28 -18
- package/lib/esm/enhancement/dataName.mjs +5 -5
- package/lib/esm/enhancement/enhance.mjs +5 -7
- package/lib/esm/enhancement/functionDefaultProps.mjs +4 -4
- package/lib/esm/enhancement/i18n.mjs +10 -9
- package/lib/esm/enhancement/inheritedName.mjs +5 -5
- package/lib/esm/enhancement/staticChildren.mjs +43 -48
- package/lib/esm/enhancement/style.mjs +26 -20
- package/lib/esm/enhancement/uncontrolledProps.mjs +43 -52
- package/lib/esm/register.mjs +12 -20
- package/lib/esm/styled/reshadow-core.mjs +98 -111
- package/lib/esm/styled/sstyled.mjs +31 -41
- package/lib/esm/utils/assignProps.mjs +32 -36
- package/lib/esm/utils/enhances/WithI18n.mjs +15 -17
- package/lib/esm/utils/enhances/i18nEnhance.mjs +47 -61
- package/lib/esm/utils/logger.mjs +13 -21
- package/lib/esm/utils/pick.mjs +4 -4
- package/lib/esm/utils/ref.mjs +27 -43
- package/lib/esm/utils/use/useEnhancedEffect.mjs +1 -1
- package/lib/index.js +17 -17
- package/lib/register.js +17 -24
- package/lib/register.js.map +1 -1
- package/lib/register.mjs +12 -20
- package/lib/register.mjs.map +1 -1
- package/lib/styled/index.js +4 -4
- package/lib/styled/reshadow-core.js +102 -104
- package/lib/styled/reshadow-core.js.map +1 -1
- package/lib/styled/reshadow-core.mjs +98 -111
- package/lib/styled/reshadow-core.mjs.map +1 -1
- package/lib/styled/sstyled.js +31 -53
- package/lib/styled/sstyled.js.map +1 -1
- package/lib/styled/sstyled.mjs +31 -41
- package/lib/styled/sstyled.mjs.map +1 -1
- package/lib/theme/processor.js +150 -222
- package/lib/theme/processor.js.map +1 -1
- package/lib/theme/processor.mjs +148 -221
- package/lib/theme/processor.mjs.map +1 -1
- package/lib/theme/themes/dark.js +2 -2
- package/lib/theme/themes/dark.js.map +1 -1
- package/lib/theme/themes/default.js +2 -2
- package/lib/theme/themes/default.js.map +1 -1
- package/lib/theme/themes/highlights-dark.js +2 -2
- package/lib/theme/themes/highlights-dark.js.map +1 -1
- package/lib/theme/themes/highlights-light.js +2 -2
- package/lib/theme/themes/highlights-light.js.map +1 -1
- package/lib/theme/themes/light.js +2 -2
- package/lib/theme/themes/light.js.map +1 -1
- package/lib/theme/utils.js +140 -215
- package/lib/theme/utils.js.map +1 -1
- package/lib/theme/utils.mjs +135 -214
- package/lib/theme/utils.mjs.map +1 -1
- package/lib/utils/CSSinJS.js +8 -10
- package/lib/utils/CSSinJS.js.map +1 -1
- package/lib/utils/CSSinJS.mjs +6 -7
- package/lib/utils/CSSinJS.mjs.map +1 -1
- package/lib/utils/ThemeProvider.js +44 -51
- package/lib/utils/ThemeProvider.js.map +1 -1
- package/lib/utils/ThemeProvider.mjs +36 -47
- package/lib/utils/ThemeProvider.mjs.map +1 -1
- package/lib/utils/addonText.js +4 -7
- package/lib/utils/addonText.js.map +1 -1
- package/lib/utils/addonText.mjs +2 -5
- package/lib/utils/addonText.mjs.map +1 -1
- package/lib/utils/addonTextChildren.js +15 -21
- package/lib/utils/addonTextChildren.js.map +1 -1
- package/lib/utils/addonTextChildren.mjs +7 -13
- package/lib/utils/addonTextChildren.mjs.map +1 -1
- package/lib/utils/ariaProps.js +7 -5
- package/lib/utils/ariaProps.js.map +1 -1
- package/lib/utils/ariaProps.mjs +7 -5
- package/lib/utils/ariaProps.mjs.map +1 -1
- package/lib/utils/assignProps.js +33 -37
- package/lib/utils/assignProps.js.map +1 -1
- package/lib/utils/assignProps.mjs +32 -36
- package/lib/utils/assignProps.mjs.map +1 -1
- package/lib/utils/canUseDOM.js +1 -1
- package/lib/utils/capitalizeFirstLetter.js +1 -1
- package/lib/utils/color.js +72 -95
- package/lib/utils/color.js.map +1 -1
- package/lib/utils/color.mjs +71 -94
- package/lib/utils/color.mjs.map +1 -1
- package/lib/utils/compose.js +3 -12
- package/lib/utils/compose.js.map +1 -1
- package/lib/utils/compose.mjs +2 -11
- package/lib/utils/compose.mjs.map +1 -1
- package/lib/utils/createUUID.js +5 -5
- package/lib/utils/createUUID.js.map +1 -1
- package/lib/utils/createUUID.mjs +4 -4
- package/lib/utils/createUUID.mjs.map +1 -1
- package/lib/utils/cssToIntDefault.js +3 -4
- package/lib/utils/cssToIntDefault.js.map +1 -1
- package/lib/utils/cssToIntDefault.mjs +2 -3
- package/lib/utils/cssToIntDefault.mjs.map +1 -1
- package/lib/utils/enhances/WithCSS.js +10 -8
- package/lib/utils/enhances/WithCSS.js.map +1 -1
- package/lib/utils/enhances/WithCSS.mjs +7 -6
- package/lib/utils/enhances/WithCSS.mjs.map +1 -1
- package/lib/utils/enhances/WithI18n.js +19 -19
- package/lib/utils/enhances/WithI18n.js.map +1 -1
- package/lib/utils/enhances/WithI18n.mjs +15 -17
- package/lib/utils/enhances/WithI18n.mjs.map +1 -1
- package/lib/utils/enhances/a11yEnhance.js +34 -39
- package/lib/utils/enhances/a11yEnhance.js.map +1 -1
- package/lib/utils/enhances/a11yEnhance.mjs +32 -36
- package/lib/utils/enhances/a11yEnhance.mjs.map +1 -1
- package/lib/utils/enhances/animatedSizeEnhance.js +55 -63
- package/lib/utils/enhances/animatedSizeEnhance.js.map +1 -1
- package/lib/utils/enhances/animatedSizeEnhance.mjs +50 -58
- package/lib/utils/enhances/animatedSizeEnhance.mjs.map +1 -1
- package/lib/utils/enhances/contextEnhance.js +12 -11
- package/lib/utils/enhances/contextEnhance.js.map +1 -1
- package/lib/utils/enhances/contextEnhance.mjs +9 -8
- package/lib/utils/enhances/contextEnhance.mjs.map +1 -1
- package/lib/utils/enhances/i18nEnhance.js +51 -67
- package/lib/utils/enhances/i18nEnhance.js.map +1 -1
- package/lib/utils/enhances/i18nEnhance.mjs +47 -61
- package/lib/utils/enhances/i18nEnhance.mjs.map +1 -1
- package/lib/utils/enhances/resolveColorEnhance.js +12 -10
- package/lib/utils/enhances/resolveColorEnhance.js.map +1 -1
- package/lib/utils/enhances/resolveColorEnhance.mjs +8 -6
- package/lib/utils/enhances/resolveColorEnhance.mjs.map +1 -1
- package/lib/utils/eventEmitter.js +30 -57
- package/lib/utils/eventEmitter.js.map +1 -1
- package/lib/utils/eventEmitter.mjs +26 -55
- package/lib/utils/eventEmitter.mjs.map +1 -1
- package/lib/utils/findComponent.js +35 -42
- package/lib/utils/findComponent.js.map +1 -1
- package/lib/utils/findComponent.mjs +26 -33
- package/lib/utils/findComponent.mjs.map +1 -1
- package/lib/utils/fire.js +7 -13
- package/lib/utils/fire.js.map +1 -1
- package/lib/utils/fire.mjs +5 -11
- package/lib/utils/fire.mjs.map +1 -1
- package/lib/utils/focus-lock/focusBorders.js +28 -32
- package/lib/utils/focus-lock/focusBorders.js.map +1 -1
- package/lib/utils/focus-lock/focusBorders.mjs +26 -32
- package/lib/utils/focus-lock/focusBorders.mjs.map +1 -1
- package/lib/utils/focus-lock/getFocusableIn.js +4 -6
- package/lib/utils/focus-lock/getFocusableIn.js.map +1 -1
- package/lib/utils/focus-lock/getFocusableIn.mjs +3 -6
- package/lib/utils/focus-lock/getFocusableIn.mjs.map +1 -1
- package/lib/utils/focus-lock/isFocusInside.js +5 -6
- package/lib/utils/focus-lock/isFocusInside.js.map +1 -1
- package/lib/utils/focus-lock/isFocusInside.mjs +4 -6
- package/lib/utils/focus-lock/isFocusInside.mjs.map +1 -1
- package/lib/utils/focus-lock/isFocusable.js +9 -12
- package/lib/utils/focus-lock/isFocusable.js.map +1 -1
- package/lib/utils/focus-lock/isFocusable.mjs +8 -11
- package/lib/utils/focus-lock/isFocusable.mjs.map +1 -1
- package/lib/utils/focus-lock/setFocus.js +21 -27
- package/lib/utils/focus-lock/setFocus.js.map +1 -1
- package/lib/utils/focus-lock/setFocus.mjs +19 -25
- package/lib/utils/focus-lock/setFocus.mjs.map +1 -1
- package/lib/utils/getAccessibleName.js +10 -22
- package/lib/utils/getAccessibleName.js.map +1 -1
- package/lib/utils/getAccessibleName.mjs +10 -21
- package/lib/utils/getAccessibleName.mjs.map +1 -1
- package/lib/utils/getDisplayName.js +1 -1
- package/lib/utils/getEventTarget.js +13 -32
- package/lib/utils/getEventTarget.js.map +1 -1
- package/lib/utils/getEventTarget.mjs +12 -31
- package/lib/utils/getEventTarget.mjs.map +1 -1
- package/lib/utils/getOriginChildren.js +4 -4
- package/lib/utils/getOriginChildren.js.map +1 -1
- package/lib/utils/getRandomInt.js +1 -1
- package/lib/utils/getValue.js +4 -6
- package/lib/utils/getValue.js.map +1 -1
- package/lib/utils/getValue.mjs +3 -5
- package/lib/utils/getValue.mjs.map +1 -1
- package/lib/utils/hasLabels.js +16 -27
- package/lib/utils/hasLabels.js.map +1 -1
- package/lib/utils/hasLabels.mjs +14 -24
- package/lib/utils/hasLabels.mjs.map +1 -1
- package/lib/utils/hasParent.js +3 -2
- package/lib/utils/hasParent.js.map +1 -1
- package/lib/utils/hasParent.mjs +2 -3
- package/lib/utils/hasParent.mjs.map +1 -1
- package/lib/utils/ifChildren.js +6 -4
- package/lib/utils/ifChildren.js.map +1 -1
- package/lib/utils/ifChildren.mjs +4 -2
- package/lib/utils/ifChildren.mjs.map +1 -1
- package/lib/utils/injectStyle.js +11 -13
- package/lib/utils/injectStyle.js.map +1 -1
- package/lib/utils/injectStyle.mjs +9 -10
- package/lib/utils/injectStyle.mjs.map +1 -1
- package/lib/utils/inputProps.js +5 -5
- package/lib/utils/inputProps.js.map +1 -1
- package/lib/utils/inputProps.mjs +4 -4
- package/lib/utils/inputProps.mjs.map +1 -1
- package/lib/utils/isInteractiveElement.js +7 -9
- package/lib/utils/isInteractiveElement.js.map +1 -1
- package/lib/utils/isInteractiveElement.mjs +7 -9
- package/lib/utils/isInteractiveElement.mjs.map +1 -1
- package/lib/utils/isNode.js +4 -5
- package/lib/utils/isNode.js.map +1 -1
- package/lib/utils/isNode.mjs +1 -2
- package/lib/utils/isNode.mjs.map +1 -1
- package/lib/utils/isPromise.js +1 -1
- package/lib/utils/isRetina.js +7 -2
- package/lib/utils/isRetina.js.map +1 -1
- package/lib/utils/isRetina.mjs +6 -1
- package/lib/utils/isRetina.mjs.map +1 -1
- package/lib/utils/logger.js +18 -25
- package/lib/utils/logger.js.map +1 -1
- package/lib/utils/logger.mjs +13 -21
- package/lib/utils/logger.mjs.map +1 -1
- package/lib/utils/numericChecker.js +11 -18
- package/lib/utils/numericChecker.js.map +1 -1
- package/lib/utils/numericChecker.mjs +10 -17
- package/lib/utils/numericChecker.mjs.map +1 -1
- package/lib/utils/ownerDocument.js +2 -2
- package/lib/utils/ownerDocument.js.map +1 -1
- package/lib/utils/ownerDocument.mjs +1 -1
- package/lib/utils/ownerDocument.mjs.map +1 -1
- package/lib/utils/pick.js +5 -5
- package/lib/utils/pick.js.map +1 -1
- package/lib/utils/pick.mjs +4 -4
- package/lib/utils/pick.mjs.map +1 -1
- package/lib/utils/propsForElement.js +10 -12
- package/lib/utils/propsForElement.js.map +1 -1
- package/lib/utils/propsForElement.mjs +8 -10
- package/lib/utils/propsForElement.mjs.map +1 -1
- package/lib/utils/rafTrottle.js +9 -14
- package/lib/utils/rafTrottle.js.map +1 -1
- package/lib/utils/rafTrottle.mjs +7 -12
- package/lib/utils/rafTrottle.mjs.map +1 -1
- package/lib/utils/reactToText.js +5 -8
- package/lib/utils/reactToText.js.map +1 -1
- package/lib/utils/reactToText.mjs +3 -6
- package/lib/utils/reactToText.mjs.map +1 -1
- package/lib/utils/ref.js +29 -47
- package/lib/utils/ref.js.map +1 -1
- package/lib/utils/ref.mjs +27 -43
- package/lib/utils/ref.mjs.map +1 -1
- package/lib/utils/setRef.js +2 -2
- package/lib/utils/setRef.js.map +1 -1
- package/lib/utils/syncScroll.js +24 -24
- package/lib/utils/syncScroll.js.map +1 -1
- package/lib/utils/syncScroll.mjs +21 -21
- package/lib/utils/syncScroll.mjs.map +1 -1
- package/lib/utils/uncontroll.js +8 -18
- package/lib/utils/uncontroll.js.map +1 -1
- package/lib/utils/uncontroll.mjs +8 -17
- package/lib/utils/uncontroll.mjs.map +1 -1
- package/lib/utils/uniqueID.js +22 -27
- package/lib/utils/uniqueID.js.map +1 -1
- package/lib/utils/uniqueID.mjs +18 -25
- package/lib/utils/uniqueID.mjs.map +1 -1
- package/lib/utils/use/useColorResolver.js +20 -21
- package/lib/utils/use/useColorResolver.js.map +1 -1
- package/lib/utils/use/useColorResolver.mjs +16 -18
- package/lib/utils/use/useColorResolver.mjs.map +1 -1
- package/lib/utils/use/useEnhancedEffect.js +4 -4
- package/lib/utils/use/useEnhancedEffect.js.map +1 -1
- package/lib/utils/use/useEnhancedEffect.mjs +1 -1
- package/lib/utils/use/useEnhancedEffect.mjs.map +1 -1
- package/lib/utils/use/useEventCallback.js +5 -10
- package/lib/utils/use/useEventCallback.js.map +1 -1
- package/lib/utils/use/useEventCallback.mjs +3 -8
- package/lib/utils/use/useEventCallback.mjs.map +1 -1
- package/lib/utils/use/useEventListener.js +11 -15
- package/lib/utils/use/useEventListener.js.map +1 -1
- package/lib/utils/use/useEventListener.mjs +7 -11
- package/lib/utils/use/useEventListener.mjs.map +1 -1
- package/lib/utils/use/useFocusLock.js +80 -94
- package/lib/utils/use/useFocusLock.js.map +1 -1
- package/lib/utils/use/useFocusLock.mjs +71 -88
- package/lib/utils/use/useFocusLock.mjs.map +1 -1
- package/lib/utils/use/usePreventScroll.js +26 -28
- package/lib/utils/use/usePreventScroll.js.map +1 -1
- package/lib/utils/use/usePreventScroll.mjs +21 -23
- package/lib/utils/use/usePreventScroll.mjs.map +1 -1
- package/lib/utils/use/useScrollBarWidth.js +8 -14
- package/lib/utils/use/useScrollBarWidth.js.map +1 -1
- package/lib/utils/use/useScrollBarWidth.mjs +8 -13
- package/lib/utils/use/useScrollBarWidth.mjs.map +1 -1
- package/lib/utils/useCssVariable.js +32 -37
- package/lib/utils/useCssVariable.js.map +1 -1
- package/lib/utils/useCssVariable.mjs +27 -34
- package/lib/utils/useCssVariable.mjs.map +1 -1
- package/lib/utils/zIndexStacking.js +28 -24
- package/lib/utils/zIndexStacking.js.map +1 -1
- package/lib/utils/zIndexStacking.mjs +23 -22
- package/lib/utils/zIndexStacking.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11yEnhance.js","names":["_assignProps","require","defaultOnNeighborChange","neighborElement","focus","defaultFindNeighbor","listSelectors","element","direction","elementSibling","includes","indexElement","findIndex","node","lengthList","length","lastIndex","indexNext","a11yEnhance","options","findNeighbor","onNeighborChange","childSelector","props","
|
|
1
|
+
{"version":3,"file":"a11yEnhance.js","names":["_assignProps","require","defaultOnNeighborChange","neighborElement","focus","defaultFindNeighbor","listSelectors","element","direction","elementSibling","includes","indexElement","findIndex","node","lengthList","length","lastIndex","indexNext","a11yEnhance","options","findNeighbor","onNeighborChange","childSelector","props","getNeighbor","neighbor","disabled","handleKeyDown","event","parent","currentTarget","selectedElement","target","childAttrName","childAttrValue","getAttribute","Array","from","querySelectorAll","key","preventDefault","onKeyDown","callAllEventHandlers","_default","exports","default"],"sources":["../../../src/utils/enhances/a11yEnhance.tsx"],"sourcesContent":["import type React from 'react';\n\nimport { callAllEventHandlers } from '../assignProps';\n\ntype OnNeighborChange<P> = (neighborElement: HTMLElement, props: P) => void;\ntype FindNeighbor = (\n listSelectors: HTMLElement[],\n element: HTMLElement,\n direction: string,\n) => HTMLElement | undefined;\ntype ChildSelector<P> = [string, string] | ((props: P) => [string, string]);\n\ntype A11yEnhanceOptions<P = any> = {\n findNeighbor?: FindNeighbor;\n onNeighborChange?: OnNeighborChange<P>;\n childSelector: ChildSelector<P>;\n};\n\nconst defaultOnNeighborChange: OnNeighborChange<any> = (neighborElement) => {\n neighborElement?.focus();\n};\n\nconst defaultFindNeighbor: FindNeighbor = (listSelectors, element, direction) => {\n const elementSibling = ['right', 'top'].includes(direction) ? 1 : -1;\n const indexElement = listSelectors.findIndex((node) => node === element);\n const lengthList = listSelectors.length;\n\n const lastIndex = lengthList - 1;\n let indexNext = indexElement + elementSibling;\n if (indexNext < 0) indexNext = lastIndex;\n if (indexNext > lastIndex) indexNext = 0;\n return listSelectors[indexNext];\n};\n\nconst a11yEnhance = (options: A11yEnhanceOptions) => {\n const findNeighbor = options.findNeighbor || defaultFindNeighbor;\n const onNeighborChange = options.onNeighborChange || defaultOnNeighborChange;\n const { childSelector } = options;\n\n return (props: any) => {\n if (!childSelector)\n throw `parameter childSelector not passed in options for a11yEnhance for ${props['data-ui-name']}`;\n const getNeighbor = (\n listSelectors: any,\n element: HTMLElement,\n direction: string,\n ): HTMLElement => {\n const neighbor = findNeighbor(listSelectors, element, direction);\n if (!neighbor) return element;\n if ('disabled' in neighbor && neighbor.disabled)\n return getNeighbor(listSelectors, neighbor, direction);\n return neighbor;\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const parent = event.currentTarget;\n const selectedElement = event.target as HTMLElement;\n const [childAttrName, childAttrValue] =\n typeof childSelector === 'function' ? childSelector(props) : childSelector;\n if (!selectedElement.getAttribute(childAttrName)) return;\n\n const listSelectors = Array.from(\n parent.querySelectorAll(`[${childAttrName}=\"${childAttrValue}\"]`),\n );\n if (!listSelectors.length)\n throw `no children found querySelectorAll([${childAttrName}=\"${childAttrValue}\"] a11yEnhance for ${props['data-ui-name']}`;\n\n switch (event.key) {\n case 'ArrowLeft':\n onNeighborChange(getNeighbor(listSelectors, selectedElement, 'left'), props);\n event.preventDefault();\n break;\n case 'ArrowTop':\n onNeighborChange(getNeighbor(listSelectors, selectedElement, 'top'), props);\n event.preventDefault();\n break;\n case 'ArrowRight':\n onNeighborChange(getNeighbor(listSelectors, selectedElement, 'right'), props);\n event.preventDefault();\n break;\n case 'ArrowBottom':\n onNeighborChange(getNeighbor(listSelectors, selectedElement, 'bottom'), props);\n event.preventDefault();\n break;\n }\n };\n\n return {\n ...props,\n onKeyDown: callAllEventHandlers(props.onKeyDown, handleKeyDown),\n };\n };\n};\n\nexport default a11yEnhance;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,65 +1,61 @@
|
|
|
1
|
-
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
1
|
import { callAllEventHandlers } from "../assignProps.mjs";
|
|
4
|
-
|
|
5
|
-
neighborElement
|
|
2
|
+
const defaultOnNeighborChange = neighborElement => {
|
|
3
|
+
neighborElement?.focus();
|
|
6
4
|
};
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var lastIndex = lengthList - 1;
|
|
14
|
-
var indexNext = indexElement + elementSibling;
|
|
5
|
+
const defaultFindNeighbor = (listSelectors, element, direction) => {
|
|
6
|
+
const elementSibling = ['right', 'top'].includes(direction) ? 1 : -1;
|
|
7
|
+
const indexElement = listSelectors.findIndex(node => node === element);
|
|
8
|
+
const lengthList = listSelectors.length;
|
|
9
|
+
const lastIndex = lengthList - 1;
|
|
10
|
+
let indexNext = indexElement + elementSibling;
|
|
15
11
|
if (indexNext < 0) indexNext = lastIndex;
|
|
16
12
|
if (indexNext > lastIndex) indexNext = 0;
|
|
17
13
|
return listSelectors[indexNext];
|
|
18
14
|
};
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
15
|
+
const a11yEnhance = options => {
|
|
16
|
+
const findNeighbor = options.findNeighbor || defaultFindNeighbor;
|
|
17
|
+
const onNeighborChange = options.onNeighborChange || defaultOnNeighborChange;
|
|
18
|
+
const {
|
|
19
|
+
childSelector
|
|
20
|
+
} = options;
|
|
21
|
+
return props => {
|
|
22
|
+
if (!childSelector) throw `parameter childSelector not passed in options for a11yEnhance for ${props['data-ui-name']}`;
|
|
23
|
+
const getNeighbor = (listSelectors, element, direction) => {
|
|
24
|
+
const neighbor = findNeighbor(listSelectors, element, direction);
|
|
27
25
|
if (!neighbor) return element;
|
|
28
|
-
if ('disabled' in neighbor && neighbor.disabled) return
|
|
26
|
+
if ('disabled' in neighbor && neighbor.disabled) return getNeighbor(listSelectors, neighbor, direction);
|
|
29
27
|
return neighbor;
|
|
30
28
|
};
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
_ref2 = _slicedToArray(_ref, 2),
|
|
36
|
-
childAttrName = _ref2[0],
|
|
37
|
-
childAttrValue = _ref2[1];
|
|
29
|
+
const handleKeyDown = event => {
|
|
30
|
+
const parent = event.currentTarget;
|
|
31
|
+
const selectedElement = event.target;
|
|
32
|
+
const [childAttrName, childAttrValue] = typeof childSelector === 'function' ? childSelector(props) : childSelector;
|
|
38
33
|
if (!selectedElement.getAttribute(childAttrName)) return;
|
|
39
|
-
|
|
40
|
-
if (!listSelectors.length) throw
|
|
34
|
+
const listSelectors = Array.from(parent.querySelectorAll(`[${childAttrName}="${childAttrValue}"]`));
|
|
35
|
+
if (!listSelectors.length) throw `no children found querySelectorAll([${childAttrName}="${childAttrValue}"] a11yEnhance for ${props['data-ui-name']}`;
|
|
41
36
|
switch (event.key) {
|
|
42
37
|
case 'ArrowLeft':
|
|
43
|
-
onNeighborChange(
|
|
38
|
+
onNeighborChange(getNeighbor(listSelectors, selectedElement, 'left'), props);
|
|
44
39
|
event.preventDefault();
|
|
45
40
|
break;
|
|
46
41
|
case 'ArrowTop':
|
|
47
|
-
onNeighborChange(
|
|
42
|
+
onNeighborChange(getNeighbor(listSelectors, selectedElement, 'top'), props);
|
|
48
43
|
event.preventDefault();
|
|
49
44
|
break;
|
|
50
45
|
case 'ArrowRight':
|
|
51
|
-
onNeighborChange(
|
|
46
|
+
onNeighborChange(getNeighbor(listSelectors, selectedElement, 'right'), props);
|
|
52
47
|
event.preventDefault();
|
|
53
48
|
break;
|
|
54
49
|
case 'ArrowBottom':
|
|
55
|
-
onNeighborChange(
|
|
50
|
+
onNeighborChange(getNeighbor(listSelectors, selectedElement, 'bottom'), props);
|
|
56
51
|
event.preventDefault();
|
|
57
52
|
break;
|
|
58
53
|
}
|
|
59
54
|
};
|
|
60
|
-
return
|
|
55
|
+
return {
|
|
56
|
+
...props,
|
|
61
57
|
onKeyDown: callAllEventHandlers(props.onKeyDown, handleKeyDown)
|
|
62
|
-
}
|
|
58
|
+
};
|
|
63
59
|
};
|
|
64
60
|
};
|
|
65
61
|
export default a11yEnhance;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11yEnhance.mjs","names":["callAllEventHandlers","defaultOnNeighborChange","neighborElement","focus","defaultFindNeighbor","listSelectors","element","direction","elementSibling","includes","indexElement","findIndex","node","lengthList","length","lastIndex","indexNext","a11yEnhance","options","findNeighbor","onNeighborChange","childSelector","props","
|
|
1
|
+
{"version":3,"file":"a11yEnhance.mjs","names":["callAllEventHandlers","defaultOnNeighborChange","neighborElement","focus","defaultFindNeighbor","listSelectors","element","direction","elementSibling","includes","indexElement","findIndex","node","lengthList","length","lastIndex","indexNext","a11yEnhance","options","findNeighbor","onNeighborChange","childSelector","props","getNeighbor","neighbor","disabled","handleKeyDown","event","parent","currentTarget","selectedElement","target","childAttrName","childAttrValue","getAttribute","Array","from","querySelectorAll","key","preventDefault","onKeyDown"],"sources":["../../../src/utils/enhances/a11yEnhance.tsx"],"sourcesContent":["import type React from 'react';\n\nimport { callAllEventHandlers } from '../assignProps';\n\ntype OnNeighborChange<P> = (neighborElement: HTMLElement, props: P) => void;\ntype FindNeighbor = (\n listSelectors: HTMLElement[],\n element: HTMLElement,\n direction: string,\n) => HTMLElement | undefined;\ntype ChildSelector<P> = [string, string] | ((props: P) => [string, string]);\n\ntype A11yEnhanceOptions<P = any> = {\n findNeighbor?: FindNeighbor;\n onNeighborChange?: OnNeighborChange<P>;\n childSelector: ChildSelector<P>;\n};\n\nconst defaultOnNeighborChange: OnNeighborChange<any> = (neighborElement) => {\n neighborElement?.focus();\n};\n\nconst defaultFindNeighbor: FindNeighbor = (listSelectors, element, direction) => {\n const elementSibling = ['right', 'top'].includes(direction) ? 1 : -1;\n const indexElement = listSelectors.findIndex((node) => node === element);\n const lengthList = listSelectors.length;\n\n const lastIndex = lengthList - 1;\n let indexNext = indexElement + elementSibling;\n if (indexNext < 0) indexNext = lastIndex;\n if (indexNext > lastIndex) indexNext = 0;\n return listSelectors[indexNext];\n};\n\nconst a11yEnhance = (options: A11yEnhanceOptions) => {\n const findNeighbor = options.findNeighbor || defaultFindNeighbor;\n const onNeighborChange = options.onNeighborChange || defaultOnNeighborChange;\n const { childSelector } = options;\n\n return (props: any) => {\n if (!childSelector)\n throw `parameter childSelector not passed in options for a11yEnhance for ${props['data-ui-name']}`;\n const getNeighbor = (\n listSelectors: any,\n element: HTMLElement,\n direction: string,\n ): HTMLElement => {\n const neighbor = findNeighbor(listSelectors, element, direction);\n if (!neighbor) return element;\n if ('disabled' in neighbor && neighbor.disabled)\n return getNeighbor(listSelectors, neighbor, direction);\n return neighbor;\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const parent = event.currentTarget;\n const selectedElement = event.target as HTMLElement;\n const [childAttrName, childAttrValue] =\n typeof childSelector === 'function' ? childSelector(props) : childSelector;\n if (!selectedElement.getAttribute(childAttrName)) return;\n\n const listSelectors = Array.from(\n parent.querySelectorAll(`[${childAttrName}=\"${childAttrValue}\"]`),\n );\n if (!listSelectors.length)\n throw `no children found querySelectorAll([${childAttrName}=\"${childAttrValue}\"] a11yEnhance for ${props['data-ui-name']}`;\n\n switch (event.key) {\n case 'ArrowLeft':\n onNeighborChange(getNeighbor(listSelectors, selectedElement, 'left'), props);\n event.preventDefault();\n break;\n case 'ArrowTop':\n onNeighborChange(getNeighbor(listSelectors, selectedElement, 'top'), props);\n event.preventDefault();\n break;\n case 'ArrowRight':\n onNeighborChange(getNeighbor(listSelectors, selectedElement, 'right'), props);\n event.preventDefault();\n break;\n case 'ArrowBottom':\n onNeighborChange(getNeighbor(listSelectors, selectedElement, 'bottom'), props);\n event.preventDefault();\n break;\n }\n };\n\n return {\n ...props,\n onKeyDown: callAllEventHandlers(props.onKeyDown, handleKeyDown),\n };\n };\n};\n\nexport default a11yEnhance;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,98 +1,90 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports
|
|
8
|
-
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
10
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
7
|
+
exports.default = void 0;
|
|
11
8
|
var _react = _interopRequireDefault(require("react"));
|
|
12
|
-
var
|
|
9
|
+
var _ref = require("../ref");
|
|
13
10
|
var _useEnhancedEffect = _interopRequireDefault(require("../use/useEnhancedEffect"));
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
11
|
+
let uniqueId = 0;
|
|
12
|
+
function animatedSizeEnhance({
|
|
13
|
+
animateProps = [],
|
|
14
|
+
onChangeOf = []
|
|
15
|
+
}) {
|
|
16
|
+
return props => {
|
|
17
|
+
const {
|
|
18
|
+
ref,
|
|
19
|
+
__animatedEnhanceInstanceId,
|
|
20
|
+
duration,
|
|
21
|
+
...other
|
|
22
|
+
} = props;
|
|
23
|
+
const nodeRef = /*#__PURE__*/_react.default.createRef();
|
|
24
|
+
const lastSizesRef = _react.default.useRef([]);
|
|
25
|
+
const prevPropsRef = _react.default.useRef(props);
|
|
26
|
+
const animatedSizeInstanceIdRef = _react.default.useRef(uniqueId++);
|
|
30
27
|
prevPropsRef.current = props;
|
|
31
|
-
(0, _useEnhancedEffect
|
|
28
|
+
(0, _useEnhancedEffect.default)(() => {
|
|
32
29
|
if (props.animationsDisabled) return;
|
|
33
30
|
if (__animatedEnhanceInstanceId !== undefined && __animatedEnhanceInstanceId !== animatedSizeInstanceIdRef.current) return;
|
|
34
31
|
if (!nodeRef.current) {
|
|
35
32
|
return;
|
|
36
33
|
}
|
|
37
|
-
|
|
38
|
-
if (lastSizesRef.current.every(
|
|
39
|
-
|
|
40
|
-
})) {
|
|
41
|
-
for (var i = 0; i < animateProps.length; i++) {
|
|
34
|
+
const node = nodeRef.current;
|
|
35
|
+
if (lastSizesRef.current.every(value => value === undefined)) {
|
|
36
|
+
for (let i = 0; i < animateProps.length; i++) {
|
|
42
37
|
// @ts-ignore
|
|
43
38
|
lastSizesRef.current[i] = node.getBoundingClientRect()[animateProps[i]];
|
|
44
39
|
}
|
|
45
40
|
return;
|
|
46
41
|
}
|
|
47
|
-
|
|
48
|
-
for (
|
|
49
|
-
sizes[
|
|
50
|
-
if (Math.abs(lastSizesRef.current[
|
|
51
|
-
lastSizesRef.current[
|
|
52
|
-
sizes[
|
|
42
|
+
const sizes = [];
|
|
43
|
+
for (let i = 0; i < animateProps.length; i++) {
|
|
44
|
+
sizes[i] = node.getBoundingClientRect()[animateProps[i]];
|
|
45
|
+
if (Math.abs(lastSizesRef.current[i] - sizes[i]) < 3 || node.style.getPropertyValue(animateProps[i]).endsWith('%')) {
|
|
46
|
+
lastSizesRef.current[i] = sizes[i];
|
|
47
|
+
sizes[i] = undefined;
|
|
53
48
|
}
|
|
54
49
|
}
|
|
55
|
-
if (sizes.every(
|
|
56
|
-
return value === undefined;
|
|
57
|
-
})) return;
|
|
50
|
+
if (sizes.every(value => value === undefined)) return;
|
|
58
51
|
node.style.transition = 'none';
|
|
59
|
-
for (
|
|
60
|
-
node.style[animateProps[
|
|
52
|
+
for (let i = 0; i < animateProps.length; i++) {
|
|
53
|
+
node.style[animateProps[i]] = `${lastSizesRef.current[i]}px`;
|
|
61
54
|
}
|
|
62
|
-
|
|
63
|
-
|
|
55
|
+
let timeout = -1;
|
|
56
|
+
const handleTransitionEnd = () => {
|
|
64
57
|
clearTimeout(timeout);
|
|
65
58
|
if (!node) return;
|
|
66
59
|
node.style.transition = null;
|
|
67
|
-
for (
|
|
68
|
-
node.style[animateProps[
|
|
60
|
+
for (let i = 0; i < animateProps.length; i++) {
|
|
61
|
+
node.style[animateProps[i]] = null;
|
|
69
62
|
}
|
|
70
|
-
node.removeEventListener('transitionend',
|
|
71
|
-
node.removeEventListener('transitioncancel',
|
|
63
|
+
node.removeEventListener('transitionend', handleTransitionEnd);
|
|
64
|
+
node.removeEventListener('transitioncancel', handleTransitionEnd);
|
|
72
65
|
};
|
|
73
|
-
|
|
66
|
+
const animationFrame = requestAnimationFrame(() => {
|
|
74
67
|
if (!node) return;
|
|
75
|
-
node.addEventListener('transitionend',
|
|
76
|
-
node.addEventListener('transitioncancel',
|
|
77
|
-
node.style.transition =
|
|
78
|
-
for (
|
|
79
|
-
lastSizesRef.current[
|
|
80
|
-
node.style[animateProps[
|
|
68
|
+
node.addEventListener('transitionend', handleTransitionEnd);
|
|
69
|
+
node.addEventListener('transitioncancel', handleTransitionEnd);
|
|
70
|
+
node.style.transition = `${duration}ms all ease-in-out`;
|
|
71
|
+
for (let i = 0; i < animateProps.length; i++) {
|
|
72
|
+
lastSizesRef.current[i] = sizes[i];
|
|
73
|
+
node.style[animateProps[i]] = `${sizes[i]}px`;
|
|
81
74
|
}
|
|
82
75
|
});
|
|
83
|
-
timeout = setTimeout(
|
|
84
|
-
return
|
|
76
|
+
timeout = setTimeout(handleTransitionEnd, 500);
|
|
77
|
+
return () => {
|
|
85
78
|
cancelAnimationFrame(animationFrame);
|
|
86
|
-
|
|
79
|
+
handleTransitionEnd();
|
|
87
80
|
};
|
|
88
|
-
}, [__animatedEnhanceInstanceId, props.animationsDisabled, duration
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}, other);
|
|
81
|
+
}, [__animatedEnhanceInstanceId, props.animationsDisabled, duration, ...onChangeOf.map(propName => props[propName])]);
|
|
82
|
+
return {
|
|
83
|
+
ref: (0, _ref.useForkRef)(ref, nodeRef),
|
|
84
|
+
__animatedEnhanceInstanceId: __animatedEnhanceInstanceId ?? animatedSizeInstanceIdRef.current,
|
|
85
|
+
...other
|
|
86
|
+
};
|
|
95
87
|
};
|
|
96
88
|
}
|
|
97
|
-
var _default = exports
|
|
89
|
+
var _default = exports.default = animatedSizeEnhance;
|
|
98
90
|
//# sourceMappingURL=animatedSizeEnhance.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animatedSizeEnhance.js","names":["_react","_interopRequireDefault","require","
|
|
1
|
+
{"version":3,"file":"animatedSizeEnhance.js","names":["_react","_interopRequireDefault","require","_ref","_useEnhancedEffect","uniqueId","animatedSizeEnhance","animateProps","onChangeOf","props","ref","__animatedEnhanceInstanceId","duration","other","nodeRef","React","createRef","lastSizesRef","useRef","prevPropsRef","animatedSizeInstanceIdRef","current","useEnhancedEffect","animationsDisabled","undefined","node","every","value","i","length","getBoundingClientRect","sizes","Math","abs","style","getPropertyValue","endsWith","transition","timeout","handleTransitionEnd","clearTimeout","removeEventListener","animationFrame","requestAnimationFrame","addEventListener","setTimeout","cancelAnimationFrame","map","propName","useForkRef","_default","exports","default"],"sources":["../../../src/utils/enhances/animatedSizeEnhance.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useForkRef } from '../ref';\nimport useEnhancedEffect from '../use/useEnhancedEffect';\n\nexport type WithAnimatedSizeEnhanceProps = {\n animationsDisabled?: boolean;\n};\n\nlet uniqueId = 0;\n\nfunction animatedSizeEnhance({\n animateProps = [],\n onChangeOf = [],\n}: {\n animateProps: ('width' | 'height')[];\n onChangeOf: string[];\n}) {\n return (props: any) => {\n const { ref, __animatedEnhanceInstanceId, duration, ...other } = props;\n const nodeRef = React.createRef<HTMLElement>();\n const lastSizesRef = React.useRef<(number | undefined)[]>([]);\n const prevPropsRef = React.useRef(props);\n const animatedSizeInstanceIdRef = React.useRef(uniqueId++);\n\n prevPropsRef.current = props;\n\n useEnhancedEffect(() => {\n if (props.animationsDisabled) return;\n if (\n __animatedEnhanceInstanceId !== undefined &&\n __animatedEnhanceInstanceId !== animatedSizeInstanceIdRef.current\n )\n return;\n if (!nodeRef.current) {\n return;\n }\n const node = nodeRef.current;\n if (lastSizesRef.current.every((value) => value === undefined)) {\n for (let i = 0; i < animateProps.length; i++) {\n // @ts-ignore\n lastSizesRef.current[i] = node.getBoundingClientRect()[animateProps[i]];\n }\n return;\n }\n\n const sizes: (number | undefined)[] = [];\n for (let i = 0; i < animateProps.length; i++) {\n sizes[i] = node.getBoundingClientRect()[animateProps[i]];\n if (\n Math.abs(lastSizesRef.current[i]! - sizes[i]!) < 3 ||\n node.style.getPropertyValue(animateProps[i]).endsWith('%')\n ) {\n lastSizesRef.current[i] = sizes[i];\n sizes[i] = undefined;\n }\n }\n if (sizes.every((value) => value === undefined)) return;\n\n node.style.transition = 'none';\n for (let i = 0; i < animateProps.length; i++) {\n node.style[animateProps[i]] = `${lastSizesRef.current[i]}px`;\n }\n let timeout = -1;\n const handleTransitionEnd = () => {\n clearTimeout(timeout);\n if (!node) return;\n node.style.transition = null as any;\n for (let i = 0; i < animateProps.length; i++) {\n node.style[animateProps[i]] = null as any;\n }\n node.removeEventListener('transitionend', handleTransitionEnd);\n node.removeEventListener('transitioncancel', handleTransitionEnd);\n };\n const animationFrame = requestAnimationFrame(() => {\n if (!node) return;\n node.addEventListener('transitionend', handleTransitionEnd);\n node.addEventListener('transitioncancel', handleTransitionEnd);\n node.style.transition = `${duration}ms all ease-in-out`;\n for (let i = 0; i < animateProps.length; i++) {\n lastSizesRef.current[i] = sizes[i];\n node.style[animateProps[i]] = `${sizes[i]}px`;\n }\n });\n timeout = setTimeout(handleTransitionEnd, 500) as any;\n return () => {\n cancelAnimationFrame(animationFrame);\n handleTransitionEnd();\n };\n }, [\n __animatedEnhanceInstanceId,\n props.animationsDisabled,\n duration,\n ...onChangeOf.map((propName) => props[propName]),\n ]);\n\n return {\n ref: useForkRef(ref, nodeRef),\n __animatedEnhanceInstanceId: __animatedEnhanceInstanceId ?? animatedSizeInstanceIdRef.current,\n ...other,\n };\n };\n}\n\nexport default animatedSizeEnhance;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,90 +1,82 @@
|
|
|
1
|
-
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
-
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
3
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
|
-
var _excluded = ["ref", "__animatedEnhanceInstanceId", "duration"];
|
|
5
1
|
import React from 'react';
|
|
6
2
|
import { useForkRef } from "../ref.mjs";
|
|
7
3
|
import useEnhancedEffect from "../use/useEnhancedEffect.mjs";
|
|
8
|
-
|
|
9
|
-
function animatedSizeEnhance(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
__animatedEnhanceInstanceId
|
|
17
|
-
duration
|
|
18
|
-
other
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
4
|
+
let uniqueId = 0;
|
|
5
|
+
function animatedSizeEnhance({
|
|
6
|
+
animateProps = [],
|
|
7
|
+
onChangeOf = []
|
|
8
|
+
}) {
|
|
9
|
+
return props => {
|
|
10
|
+
const {
|
|
11
|
+
ref,
|
|
12
|
+
__animatedEnhanceInstanceId,
|
|
13
|
+
duration,
|
|
14
|
+
...other
|
|
15
|
+
} = props;
|
|
16
|
+
const nodeRef = /*#__PURE__*/React.createRef();
|
|
17
|
+
const lastSizesRef = React.useRef([]);
|
|
18
|
+
const prevPropsRef = React.useRef(props);
|
|
19
|
+
const animatedSizeInstanceIdRef = React.useRef(uniqueId++);
|
|
23
20
|
prevPropsRef.current = props;
|
|
24
|
-
useEnhancedEffect(
|
|
21
|
+
useEnhancedEffect(() => {
|
|
25
22
|
if (props.animationsDisabled) return;
|
|
26
23
|
if (__animatedEnhanceInstanceId !== undefined && __animatedEnhanceInstanceId !== animatedSizeInstanceIdRef.current) return;
|
|
27
24
|
if (!nodeRef.current) {
|
|
28
25
|
return;
|
|
29
26
|
}
|
|
30
|
-
|
|
31
|
-
if (lastSizesRef.current.every(
|
|
32
|
-
|
|
33
|
-
})) {
|
|
34
|
-
for (var i = 0; i < animateProps.length; i++) {
|
|
27
|
+
const node = nodeRef.current;
|
|
28
|
+
if (lastSizesRef.current.every(value => value === undefined)) {
|
|
29
|
+
for (let i = 0; i < animateProps.length; i++) {
|
|
35
30
|
// @ts-ignore
|
|
36
31
|
lastSizesRef.current[i] = node.getBoundingClientRect()[animateProps[i]];
|
|
37
32
|
}
|
|
38
33
|
return;
|
|
39
34
|
}
|
|
40
|
-
|
|
41
|
-
for (
|
|
42
|
-
sizes[
|
|
43
|
-
if (Math.abs(lastSizesRef.current[
|
|
44
|
-
lastSizesRef.current[
|
|
45
|
-
sizes[
|
|
35
|
+
const sizes = [];
|
|
36
|
+
for (let i = 0; i < animateProps.length; i++) {
|
|
37
|
+
sizes[i] = node.getBoundingClientRect()[animateProps[i]];
|
|
38
|
+
if (Math.abs(lastSizesRef.current[i] - sizes[i]) < 3 || node.style.getPropertyValue(animateProps[i]).endsWith('%')) {
|
|
39
|
+
lastSizesRef.current[i] = sizes[i];
|
|
40
|
+
sizes[i] = undefined;
|
|
46
41
|
}
|
|
47
42
|
}
|
|
48
|
-
if (sizes.every(
|
|
49
|
-
return value === undefined;
|
|
50
|
-
})) return;
|
|
43
|
+
if (sizes.every(value => value === undefined)) return;
|
|
51
44
|
node.style.transition = 'none';
|
|
52
|
-
for (
|
|
53
|
-
node.style[animateProps[
|
|
45
|
+
for (let i = 0; i < animateProps.length; i++) {
|
|
46
|
+
node.style[animateProps[i]] = `${lastSizesRef.current[i]}px`;
|
|
54
47
|
}
|
|
55
|
-
|
|
56
|
-
|
|
48
|
+
let timeout = -1;
|
|
49
|
+
const handleTransitionEnd = () => {
|
|
57
50
|
clearTimeout(timeout);
|
|
58
51
|
if (!node) return;
|
|
59
52
|
node.style.transition = null;
|
|
60
|
-
for (
|
|
61
|
-
node.style[animateProps[
|
|
53
|
+
for (let i = 0; i < animateProps.length; i++) {
|
|
54
|
+
node.style[animateProps[i]] = null;
|
|
62
55
|
}
|
|
63
|
-
node.removeEventListener('transitionend',
|
|
64
|
-
node.removeEventListener('transitioncancel',
|
|
56
|
+
node.removeEventListener('transitionend', handleTransitionEnd);
|
|
57
|
+
node.removeEventListener('transitioncancel', handleTransitionEnd);
|
|
65
58
|
};
|
|
66
|
-
|
|
59
|
+
const animationFrame = requestAnimationFrame(() => {
|
|
67
60
|
if (!node) return;
|
|
68
|
-
node.addEventListener('transitionend',
|
|
69
|
-
node.addEventListener('transitioncancel',
|
|
70
|
-
node.style.transition =
|
|
71
|
-
for (
|
|
72
|
-
lastSizesRef.current[
|
|
73
|
-
node.style[animateProps[
|
|
61
|
+
node.addEventListener('transitionend', handleTransitionEnd);
|
|
62
|
+
node.addEventListener('transitioncancel', handleTransitionEnd);
|
|
63
|
+
node.style.transition = `${duration}ms all ease-in-out`;
|
|
64
|
+
for (let i = 0; i < animateProps.length; i++) {
|
|
65
|
+
lastSizesRef.current[i] = sizes[i];
|
|
66
|
+
node.style[animateProps[i]] = `${sizes[i]}px`;
|
|
74
67
|
}
|
|
75
68
|
});
|
|
76
|
-
timeout = setTimeout(
|
|
77
|
-
return
|
|
69
|
+
timeout = setTimeout(handleTransitionEnd, 500);
|
|
70
|
+
return () => {
|
|
78
71
|
cancelAnimationFrame(animationFrame);
|
|
79
|
-
|
|
72
|
+
handleTransitionEnd();
|
|
80
73
|
};
|
|
81
|
-
}, [__animatedEnhanceInstanceId, props.animationsDisabled, duration
|
|
82
|
-
|
|
83
|
-
}))));
|
|
84
|
-
return _objectSpread({
|
|
74
|
+
}, [__animatedEnhanceInstanceId, props.animationsDisabled, duration, ...onChangeOf.map(propName => props[propName])]);
|
|
75
|
+
return {
|
|
85
76
|
ref: useForkRef(ref, nodeRef),
|
|
86
|
-
__animatedEnhanceInstanceId: __animatedEnhanceInstanceId
|
|
87
|
-
|
|
77
|
+
__animatedEnhanceInstanceId: __animatedEnhanceInstanceId ?? animatedSizeInstanceIdRef.current,
|
|
78
|
+
...other
|
|
79
|
+
};
|
|
88
80
|
};
|
|
89
81
|
}
|
|
90
82
|
export default animatedSizeEnhance;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animatedSizeEnhance.mjs","names":["React","useForkRef","useEnhancedEffect","uniqueId","animatedSizeEnhance","
|
|
1
|
+
{"version":3,"file":"animatedSizeEnhance.mjs","names":["React","useForkRef","useEnhancedEffect","uniqueId","animatedSizeEnhance","animateProps","onChangeOf","props","ref","__animatedEnhanceInstanceId","duration","other","nodeRef","createRef","lastSizesRef","useRef","prevPropsRef","animatedSizeInstanceIdRef","current","animationsDisabled","undefined","node","every","value","i","length","getBoundingClientRect","sizes","Math","abs","style","getPropertyValue","endsWith","transition","timeout","handleTransitionEnd","clearTimeout","removeEventListener","animationFrame","requestAnimationFrame","addEventListener","setTimeout","cancelAnimationFrame","map","propName"],"sources":["../../../src/utils/enhances/animatedSizeEnhance.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useForkRef } from '../ref';\nimport useEnhancedEffect from '../use/useEnhancedEffect';\n\nexport type WithAnimatedSizeEnhanceProps = {\n animationsDisabled?: boolean;\n};\n\nlet uniqueId = 0;\n\nfunction animatedSizeEnhance({\n animateProps = [],\n onChangeOf = [],\n}: {\n animateProps: ('width' | 'height')[];\n onChangeOf: string[];\n}) {\n return (props: any) => {\n const { ref, __animatedEnhanceInstanceId, duration, ...other } = props;\n const nodeRef = React.createRef<HTMLElement>();\n const lastSizesRef = React.useRef<(number | undefined)[]>([]);\n const prevPropsRef = React.useRef(props);\n const animatedSizeInstanceIdRef = React.useRef(uniqueId++);\n\n prevPropsRef.current = props;\n\n useEnhancedEffect(() => {\n if (props.animationsDisabled) return;\n if (\n __animatedEnhanceInstanceId !== undefined &&\n __animatedEnhanceInstanceId !== animatedSizeInstanceIdRef.current\n )\n return;\n if (!nodeRef.current) {\n return;\n }\n const node = nodeRef.current;\n if (lastSizesRef.current.every((value) => value === undefined)) {\n for (let i = 0; i < animateProps.length; i++) {\n // @ts-ignore\n lastSizesRef.current[i] = node.getBoundingClientRect()[animateProps[i]];\n }\n return;\n }\n\n const sizes: (number | undefined)[] = [];\n for (let i = 0; i < animateProps.length; i++) {\n sizes[i] = node.getBoundingClientRect()[animateProps[i]];\n if (\n Math.abs(lastSizesRef.current[i]! - sizes[i]!) < 3 ||\n node.style.getPropertyValue(animateProps[i]).endsWith('%')\n ) {\n lastSizesRef.current[i] = sizes[i];\n sizes[i] = undefined;\n }\n }\n if (sizes.every((value) => value === undefined)) return;\n\n node.style.transition = 'none';\n for (let i = 0; i < animateProps.length; i++) {\n node.style[animateProps[i]] = `${lastSizesRef.current[i]}px`;\n }\n let timeout = -1;\n const handleTransitionEnd = () => {\n clearTimeout(timeout);\n if (!node) return;\n node.style.transition = null as any;\n for (let i = 0; i < animateProps.length; i++) {\n node.style[animateProps[i]] = null as any;\n }\n node.removeEventListener('transitionend', handleTransitionEnd);\n node.removeEventListener('transitioncancel', handleTransitionEnd);\n };\n const animationFrame = requestAnimationFrame(() => {\n if (!node) return;\n node.addEventListener('transitionend', handleTransitionEnd);\n node.addEventListener('transitioncancel', handleTransitionEnd);\n node.style.transition = `${duration}ms all ease-in-out`;\n for (let i = 0; i < animateProps.length; i++) {\n lastSizesRef.current[i] = sizes[i];\n node.style[animateProps[i]] = `${sizes[i]}px`;\n }\n });\n timeout = setTimeout(handleTransitionEnd, 500) as any;\n return () => {\n cancelAnimationFrame(animationFrame);\n handleTransitionEnd();\n };\n }, [\n __animatedEnhanceInstanceId,\n props.animationsDisabled,\n duration,\n ...onChangeOf.map((propName) => props[propName]),\n ]);\n\n return {\n ref: useForkRef(ref, nodeRef),\n __animatedEnhanceInstanceId: __animatedEnhanceInstanceId ?? animatedSizeInstanceIdRef.current,\n ...other,\n };\n };\n}\n\nexport default animatedSizeEnhance;\n"],"mappings":"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","ignoreList":[]}
|