@consta/uikit 4.18.0 → 4.20.0
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/__internal__/src/components/AutoCompleteCanary/useAutoComplete.js +1 -1
- package/__internal__/src/components/AutoCompleteCanary/useAutoComplete.js.map +1 -1
- package/__internal__/src/components/Button/Button.css +1 -1
- package/__internal__/src/components/ContextMenu/ContextMenuLevel/ContextMenuLevel.css +1 -1
- package/__internal__/src/components/ContextMenu/ContextMenuLevel/ContextMenuLevel.js +1 -1
- package/__internal__/src/components/ContextMenu/ContextMenuLevel/ContextMenuLevel.js.map +1 -1
- package/__internal__/src/components/DragNDropField/DragNDropField.d.ts +1 -2
- package/__internal__/src/components/DragNDropField/DragNDropField.js +1 -1
- package/__internal__/src/components/DragNDropField/DragNDropField.js.map +1 -1
- package/__internal__/src/components/ListCanary/ListItem/ListItem.css +1 -1
- package/__internal__/src/components/Popover/Popover.css +1 -1
- package/__internal__/src/components/Popover/Popover.d.ts +3 -4
- package/__internal__/src/components/Popover/Popover.js +1 -1
- package/__internal__/src/components/Popover/Popover.js.map +1 -1
- package/__internal__/src/components/Popover/index.d.ts +1 -0
- package/__internal__/src/components/Popover/index.js +1 -1
- package/__internal__/src/components/Popover/index.js.map +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.js +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.js.map +1 -1
- package/__internal__/src/components/Slider/SliderPoint/SliderPoint.js +1 -1
- package/__internal__/src/components/Slider/SliderPoint/SliderPoint.js.map +1 -1
- package/__internal__/src/components/Tooltip/Tooltip.d.ts +2 -1
- package/__internal__/src/components/Tooltip/Tooltip.js +1 -1
- package/__internal__/src/components/Tooltip/Tooltip.js.map +1 -1
- package/__internal__/src/hooks/useComponentSize/getElementSize.d.ts +2 -0
- package/__internal__/src/hooks/useComponentSize/getElementSize.js +2 -0
- package/__internal__/src/hooks/useComponentSize/getElementSize.js.map +1 -0
- package/__internal__/src/hooks/useComponentSize/index.d.ts +2 -0
- package/__internal__/src/hooks/useComponentSize/index.js +1 -1
- package/__internal__/src/hooks/useComponentSize/index.js.map +1 -1
- package/__internal__/src/hooks/useComponentSize/types.d.ts +4 -0
- package/__internal__/src/hooks/useComponentSize/types.js +2 -0
- package/__internal__/src/hooks/useComponentSize/types.js.map +1 -0
- package/__internal__/src/hooks/useComponentSize/useComponentSize.d.ts +1 -5
- package/__internal__/src/hooks/useComponentSize/useComponentSize.js +1 -1
- package/__internal__/src/hooks/useComponentSize/useComponentSize.js.map +1 -1
- package/__internal__/src/hooks/useResizeObserved/useResizeObserved.js +1 -1
- package/__internal__/src/hooks/useResizeObserved/useResizeObserved.js.map +1 -1
- package/__internal__/src/hooks/useVirtualScrollCanary/hellpers.d.ts +8 -0
- package/__internal__/src/hooks/useVirtualScrollCanary/hellpers.js +2 -0
- package/__internal__/src/hooks/useVirtualScrollCanary/hellpers.js.map +1 -0
- package/__internal__/src/hooks/useVirtualScrollCanary/index.d.ts +1 -0
- package/__internal__/src/hooks/useVirtualScrollCanary/index.js +2 -0
- package/__internal__/src/hooks/useVirtualScrollCanary/index.js.map +1 -0
- package/__internal__/src/hooks/useVirtualScrollCanary/useVirtualScrollCanary.d.ts +14 -0
- package/__internal__/src/hooks/useVirtualScrollCanary/useVirtualScrollCanary.js +2 -0
- package/__internal__/src/hooks/useVirtualScrollCanary/useVirtualScrollCanary.js.map +1 -0
- package/__internal__/src/utils/isRenderProp.d.ts +2 -0
- package/__internal__/src/utils/isRenderProp.js +2 -0
- package/__internal__/src/utils/isRenderProp.js.map +1 -0
- package/package.json +2 -2
- package/useVirtualScrollCanary/index.d.ts +1 -0
- package/useVirtualScrollCanary/index.js +1 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function _createForOfIteratorHelper(a,b){var c="undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(!c){if(Array.isArray(a)||(c=_unsupportedIterableToArray(a))||b&&a&&"number"==typeof a.length){c&&(a=c);var d=0,e=function(){};return{s:e,n:function n(){return d>=a.length?{done:!0}:{done:!1,value:a[d++]}},e:function(a){function b(){return a.apply(this,arguments)}return b.toString=function(){return a.toString()},b}(function(a){throw a}),f:e}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f,g=!0,h=!1;return{s:function s(){c=c.call(a)},n:function n(){var a=c.next();return g=a.done,a},e:function(a){function b(){return a.apply(this,arguments)}return b.toString=function(){return a.toString()},b}(function(a){h=!0,f=a}),f:function f(){try{g||null==c["return"]||c["return"]()}finally{if(h)throw f}}}}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{useClickOutside}from"../../hooks/useClickOutside";import{useFlag}from"../../hooks/useFlag";import{useKeys}from"../../hooks/useKeys";import{getGroups}from"../../utils/getGroups";export function useAutoComplete(a){var b=a.items,c=a.dropdownRef,d=a.controlRef,e=a.disabled,f=void 0!==e&&e,g=a.getItemLabel,h=a.getItemKey,i=a.searchFunction,j=a.getItemGroupKey,k=a.groups,l=a.getGroupKey,m=a.onFocus,n=a.onBlur,o=a.searchValue,p=useRef(null),q=useFlag(),r=_slicedToArray(q,2),s=r[0],t=r[1],u=useState(0),v=_slicedToArray(u,2),w=v[0],x=v[1],y=function(a,b){return
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function _createForOfIteratorHelper(a,b){var c="undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(!c){if(Array.isArray(a)||(c=_unsupportedIterableToArray(a))||b&&a&&"number"==typeof a.length){c&&(a=c);var d=0,e=function(){};return{s:e,n:function n(){return d>=a.length?{done:!0}:{done:!1,value:a[d++]}},e:function(a){function b(){return a.apply(this,arguments)}return b.toString=function(){return a.toString()},b}(function(a){throw a}),f:e}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f,g=!0,h=!1;return{s:function s(){c=c.call(a)},n:function n(){var a=c.next();return g=a.done,a},e:function(a){function b(){return a.apply(this,arguments)}return b.toString=function(){return a.toString()},b}(function(a){h=!0,f=a}),f:function f(){try{g||null==c["return"]||c["return"]()}finally{if(h)throw f}}}}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{useClickOutside}from"../../hooks/useClickOutside";import{useFlag}from"../../hooks/useFlag";import{useKeys}from"../../hooks/useKeys";import{getGroups}from"../../utils/getGroups";export function useAutoComplete(a){var b=a.items,c=a.dropdownRef,d=a.controlRef,e=a.disabled,f=void 0!==e&&e,g=a.getItemLabel,h=a.getItemKey,i=a.searchFunction,j=a.getItemGroupKey,k=a.groups,l=a.getGroupKey,m=a.onFocus,n=a.onBlur,o=a.searchValue,p=useRef(null),q=useFlag(),r=_slicedToArray(q,2),s=r[0],t=r[1],u=useState(0),v=_slicedToArray(u,2),w=v[0],x=v[1],y=function(a,b){return!!b&&-1!==g(a).toLocaleLowerCase().indexOf(b.toLocaleLowerCase())},z=useMemo(function(){return b.filter(function(a){return i?i(a,o||""):y(a,o||"")})},[o]),A=useMemo(function(){var a=getGroups(z,null!==k&&void 0!==k&&k.length?j:void 0,k,l,void 0);return a},[z,k,j,l]),B=useMemo(function(){return!!A.find(function(a){return 0<a.items.length})},[A]),C=useCallback(function(a){x(Math.min(Math.max(0,"function"==typeof a?a(w):a),z.length-1))},[z,w]),D=function(b,c){f||a.onChange({value:c,e:b})},E=function(a,b){b.preventDefault(),C(function(a){return a-1})},F=function(a,b){b.preventDefault(),C(function(a){return a+1})},G=useKeys({ArrowUp:E,ArrowDown:F,PageUp:E,PageDown:F,Home:E,End:F,Enter:function Enter(a,b){if(s){(o||z[w])&&b.preventDefault();var c=function(a){var b,c=0,d=_createForOfIteratorHelper(A);try{for(d.s();!(b=d.n()).done;){var e=b.value;if(e.items.length+c>a)return e.items[a-c];c+=e.items.length}}catch(a){d.e(a)}finally{d.f()}},d=c(w);d&&D(b,d)}},Escape:function Escape(){t.off()},Tab:function Tab(){t.off()}});useClickOutside({isActive:s,ignoreClicksInsideRefs:[c,d],handler:function handler(){t.off()}}),useEffect(function(){if(f){var a;t.off(),null===(a=p.current)||void 0===a?void 0:a.blur()}},[f]);return{isOpen:!!(s&&B),visibleItems:A,getOptionProps:function getOptionProps(a){var b=a.index,c=a.item,d=h(c);return{onClick:function onClick(a){D(a,c)},onMouseEnter:function onMouseEnter(){C(b)},active:!1,hovered:b===w,key:d}},handleInputFocus:function handleInputFocus(a){f||(!s&&t.on(),"function"==typeof m&&m(a))},handleInputBlur:function handleInputBlur(a){if(s){var b;return void(null===(b=p.current)||void 0===b?void 0:b.focus())}"function"==typeof n&&n(a)},inputRef:p,getKeyProps:G,hasItems:B}}
|
|
2
2
|
//# sourceMappingURL=useAutoComplete.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAutoComplete.js","names":["useCallback","useEffect","useMemo","useRef","useState","useClickOutside","useFlag","useKeys","getGroups","useAutoComplete","params","items","dropdownRef","controlRef","disabled","getItemLabel","getItemKey","searchFunction","getItemGroupKey","groups","getGroupKey","onFocus","onBlur","searchValue","inputRef","isOpen","setIsOpen","highlightedIndex","setHighlightedIndex","searchFunctionDefault","item","toLocaleLowerCase","indexOf","filteredOptions","trim","fiteredOptions","filter","visibleItems","resultGroups","length","hasItems","find","group","highlightIndex","indexForHighlight","Math","min","max","onChange","e","value","ArrowUp","_","preventDefault","old","ArrowDown","getKeyProps","PageUp","PageDown","Home","End","Enter","getItem","index","couter","Escape","off","Tab","isActive","ignoreClicksInsideRefs","handler","current","blur","getOptionProps","key","onClick","onMouseEnter","active","hovered","handleInputFocus","on","handleInputBlur","focus"],"sources":["../../../../../src/components/AutoCompleteCanary/useAutoComplete.ts"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { useClickOutside } from '##/hooks/useClickOutside';\nimport { useFlag } from '##/hooks/useFlag';\nimport { KeyHandler, useKeys } from '##/hooks/useKeys';\nimport { getGroups } from '##/utils/getGroups';\n\ntype IndexForHighlight = number | ((oldIndex: number) => number);\n\ntype GetItemGroupKey<ITEM> = (item: ITEM) => string | number | undefined;\ntype GetGroupKey<GROUP> = (item: GROUP) => string | number | undefined;\n\ntype OnChangeProp<ITEM> = (props: {\n value: ITEM | null;\n e: React.SyntheticEvent;\n}) => void;\n\ntype UseAutoCompleteProps<ITEM, GROUP> = {\n getItemGroupKey?: GetItemGroupKey<ITEM> | undefined;\n getGroupKey?: GetGroupKey<GROUP>;\n groups?: GROUP[];\n items: ITEM[];\n dropdownRef: React.MutableRefObject<HTMLDivElement | null>;\n controlRef: React.MutableRefObject<HTMLDivElement | null>;\n disabled?: boolean;\n getItemLabel: (item: ITEM) => string;\n getItemKey: (item: ITEM) => string | number;\n searchFunction?: (item: ITEM, searchValue: string) => boolean;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n searchValue?: string;\n onChange: OnChangeProp<ITEM>;\n};\n\ntype OptionProps<ITEM> = {\n index: number;\n item: ITEM;\n};\n\ntype GetOptionPropsResult = {\n onClick: (e: React.SyntheticEvent) => void;\n onMouseEnter: (e: React.SyntheticEvent) => void;\n active: boolean;\n hovered: boolean;\n key: string | number;\n};\n\nexport function useAutoComplete<ITEM, GROUP>(\n params: UseAutoCompleteProps<ITEM, GROUP>,\n) {\n const {\n items,\n dropdownRef,\n controlRef,\n disabled = false,\n getItemLabel,\n getItemKey,\n searchFunction,\n getItemGroupKey,\n groups,\n getGroupKey,\n onFocus,\n onBlur,\n searchValue,\n } = params;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const [isOpen, setIsOpen] = useFlag();\n const [highlightedIndex, setHighlightedIndex] = useState<number>(0);\n\n const searchFunctionDefault = (item: ITEM, searchValue: string) =>\n getItemLabel(item)\n .toLocaleLowerCase()\n .indexOf(searchValue.toLocaleLowerCase()) !== -1;\n\n const filteredOptions = useMemo(() => {\n if (searchValue && searchValue.trim() !== '') {\n const fiteredOptions = items.filter((item) =>\n searchFunction\n ? searchFunction(item, searchValue)\n : searchFunctionDefault(item, searchValue),\n );\n\n return fiteredOptions;\n }\n return items;\n }, [items, searchValue]);\n\n const visibleItems = useMemo(() => {\n const resultGroups = getGroups(\n filteredOptions,\n groups?.length ? getItemGroupKey : undefined,\n groups,\n getGroupKey,\n undefined,\n );\n\n return resultGroups;\n }, [filteredOptions, groups, getItemGroupKey, getGroupKey]);\n\n const hasItems = useMemo(() => {\n return !!visibleItems.find((group) => group.items.length > 0);\n }, [visibleItems]);\n\n const highlightIndex = useCallback(\n (indexForHighlight: IndexForHighlight) => {\n setHighlightedIndex(\n Math.min(\n Math.max(\n 0,\n typeof indexForHighlight === 'function'\n ? indexForHighlight(highlightedIndex)\n : indexForHighlight,\n ),\n filteredOptions.length - 1,\n ),\n );\n },\n [filteredOptions, highlightedIndex],\n );\n\n const onChange = (e: React.SyntheticEvent, item: ITEM) => {\n if (!disabled) {\n params.onChange({ value: item, e });\n }\n };\n\n // Prop Getters\n\n const ArrowUp: KeyHandler = (_, e): void => {\n e.preventDefault();\n highlightIndex((old) => old - 1);\n };\n\n const ArrowDown: KeyHandler = (_, e): void => {\n e.preventDefault();\n highlightIndex((old) => old + 1);\n };\n\n const Enter: KeyHandler = (_, e): void => {\n if (isOpen) {\n if (searchValue || filteredOptions[highlightedIndex]) {\n e.preventDefault();\n }\n\n const getItem = (index: number) => {\n let couter = 0;\n for (const group of visibleItems) {\n if (group.items.length + couter > index) {\n return group.items[index - couter];\n }\n couter += group.items.length;\n }\n return undefined;\n };\n\n const item = getItem(highlightedIndex);\n\n if (item) {\n onChange(e, item);\n }\n }\n };\n\n const Escape = (): void => {\n setIsOpen.off();\n };\n\n const Tab = (): void => {\n setIsOpen.off();\n };\n\n const getKeyProps = useKeys({\n ArrowUp,\n ArrowDown,\n PageUp: ArrowUp,\n PageDown: ArrowDown,\n Home: ArrowUp,\n End: ArrowDown,\n Enter,\n Escape,\n Tab,\n });\n\n const getOptionProps = ({\n index,\n item,\n }: OptionProps<ITEM>): GetOptionPropsResult => {\n const key = getItemKey(item);\n return {\n onClick: (e: React.SyntheticEvent) => {\n onChange(e, item);\n },\n onMouseEnter: () => {\n highlightIndex(index);\n },\n active: false,\n hovered: index === highlightedIndex,\n key,\n };\n };\n\n useClickOutside({\n isActive: isOpen,\n ignoreClicksInsideRefs: [dropdownRef, controlRef],\n handler: () => {\n setIsOpen.off();\n },\n });\n\n useEffect(() => {\n if (disabled) {\n setIsOpen.off();\n inputRef.current?.blur();\n }\n }, [disabled]);\n\n const handleInputFocus = (e: React.FocusEvent<HTMLInputElement>): void => {\n if (!disabled) {\n if (!isOpen) {\n setIsOpen.on();\n }\n if (typeof onFocus === 'function') {\n onFocus(e);\n }\n }\n };\n\n const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>): void => {\n if (isOpen) {\n inputRef.current?.focus();\n return;\n }\n\n if (typeof onBlur === 'function') {\n onBlur(e);\n }\n };\n\n return {\n isOpen: !!(isOpen && hasItems && searchValue && searchValue?.trim() !== ''),\n visibleItems,\n getOptionProps,\n handleInputFocus,\n handleInputBlur,\n inputRef,\n getKeyProps,\n hasItems,\n };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useAutoComplete.js","names":["useCallback","useEffect","useMemo","useRef","useState","useClickOutside","useFlag","useKeys","getGroups","useAutoComplete","params","items","dropdownRef","controlRef","disabled","getItemLabel","getItemKey","searchFunction","getItemGroupKey","groups","getGroupKey","onFocus","onBlur","searchValue","inputRef","isOpen","setIsOpen","highlightedIndex","setHighlightedIndex","searchFunctionDefault","item","toLocaleLowerCase","indexOf","filteredOptions","filter","visibleItems","resultGroups","length","hasItems","find","group","highlightIndex","indexForHighlight","Math","min","max","onChange","e","value","ArrowUp","_","preventDefault","old","ArrowDown","getKeyProps","PageUp","PageDown","Home","End","Enter","getItem","index","couter","Escape","off","Tab","isActive","ignoreClicksInsideRefs","handler","current","blur","getOptionProps","key","onClick","onMouseEnter","active","hovered","handleInputFocus","on","handleInputBlur","focus"],"sources":["../../../../../src/components/AutoCompleteCanary/useAutoComplete.ts"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { useClickOutside } from '##/hooks/useClickOutside';\nimport { useFlag } from '##/hooks/useFlag';\nimport { KeyHandler, useKeys } from '##/hooks/useKeys';\nimport { getGroups } from '##/utils/getGroups';\n\ntype IndexForHighlight = number | ((oldIndex: number) => number);\n\ntype GetItemGroupKey<ITEM> = (item: ITEM) => string | number | undefined;\ntype GetGroupKey<GROUP> = (item: GROUP) => string | number | undefined;\n\ntype OnChangeProp<ITEM> = (props: {\n value: ITEM | null;\n e: React.SyntheticEvent;\n}) => void;\n\ntype UseAutoCompleteProps<ITEM, GROUP> = {\n getItemGroupKey?: GetItemGroupKey<ITEM> | undefined;\n getGroupKey?: GetGroupKey<GROUP>;\n groups?: GROUP[];\n items: ITEM[];\n dropdownRef: React.MutableRefObject<HTMLDivElement | null>;\n controlRef: React.MutableRefObject<HTMLDivElement | null>;\n disabled?: boolean;\n getItemLabel: (item: ITEM) => string;\n getItemKey: (item: ITEM) => string | number;\n searchFunction?: (item: ITEM, searchValue: string) => boolean;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n searchValue?: string;\n onChange: OnChangeProp<ITEM>;\n};\n\ntype OptionProps<ITEM> = {\n index: number;\n item: ITEM;\n};\n\ntype GetOptionPropsResult = {\n onClick: (e: React.SyntheticEvent) => void;\n onMouseEnter: (e: React.SyntheticEvent) => void;\n active: boolean;\n hovered: boolean;\n key: string | number;\n};\n\nexport function useAutoComplete<ITEM, GROUP>(\n params: UseAutoCompleteProps<ITEM, GROUP>,\n) {\n const {\n items,\n dropdownRef,\n controlRef,\n disabled = false,\n getItemLabel,\n getItemKey,\n searchFunction,\n getItemGroupKey,\n groups,\n getGroupKey,\n onFocus,\n onBlur,\n searchValue,\n } = params;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const [isOpen, setIsOpen] = useFlag();\n const [highlightedIndex, setHighlightedIndex] = useState<number>(0);\n\n const searchFunctionDefault = (item: ITEM, searchValue: string) => {\n if (!searchValue) {\n return false;\n }\n return (\n getItemLabel(item)\n .toLocaleLowerCase()\n .indexOf(searchValue.toLocaleLowerCase()) !== -1\n );\n };\n\n const filteredOptions = useMemo(\n () =>\n items.filter((item) =>\n searchFunction\n ? searchFunction(item, searchValue || '')\n : searchFunctionDefault(item, searchValue || ''),\n ),\n [searchValue],\n );\n\n const visibleItems = useMemo(() => {\n const resultGroups = getGroups(\n filteredOptions,\n groups?.length ? getItemGroupKey : undefined,\n groups,\n getGroupKey,\n undefined,\n );\n\n return resultGroups;\n }, [filteredOptions, groups, getItemGroupKey, getGroupKey]);\n\n const hasItems = useMemo(() => {\n return !!visibleItems.find((group) => group.items.length > 0);\n }, [visibleItems]);\n\n const highlightIndex = useCallback(\n (indexForHighlight: IndexForHighlight) => {\n setHighlightedIndex(\n Math.min(\n Math.max(\n 0,\n typeof indexForHighlight === 'function'\n ? indexForHighlight(highlightedIndex)\n : indexForHighlight,\n ),\n filteredOptions.length - 1,\n ),\n );\n },\n [filteredOptions, highlightedIndex],\n );\n\n const onChange = (e: React.SyntheticEvent, item: ITEM) => {\n if (!disabled) {\n params.onChange({ value: item, e });\n }\n };\n\n // Prop Getters\n\n const ArrowUp: KeyHandler = (_, e): void => {\n e.preventDefault();\n highlightIndex((old) => old - 1);\n };\n\n const ArrowDown: KeyHandler = (_, e): void => {\n e.preventDefault();\n highlightIndex((old) => old + 1);\n };\n\n const Enter: KeyHandler = (_, e): void => {\n if (isOpen) {\n if (searchValue || filteredOptions[highlightedIndex]) {\n e.preventDefault();\n }\n\n const getItem = (index: number) => {\n let couter = 0;\n for (const group of visibleItems) {\n if (group.items.length + couter > index) {\n return group.items[index - couter];\n }\n couter += group.items.length;\n }\n return undefined;\n };\n\n const item = getItem(highlightedIndex);\n\n if (item) {\n onChange(e, item);\n }\n }\n };\n\n const Escape = (): void => {\n setIsOpen.off();\n };\n\n const Tab = (): void => {\n setIsOpen.off();\n };\n\n const getKeyProps = useKeys({\n ArrowUp,\n ArrowDown,\n PageUp: ArrowUp,\n PageDown: ArrowDown,\n Home: ArrowUp,\n End: ArrowDown,\n Enter,\n Escape,\n Tab,\n });\n\n const getOptionProps = ({\n index,\n item,\n }: OptionProps<ITEM>): GetOptionPropsResult => {\n const key = getItemKey(item);\n return {\n onClick: (e: React.SyntheticEvent) => {\n onChange(e, item);\n },\n onMouseEnter: () => {\n highlightIndex(index);\n },\n active: false,\n hovered: index === highlightedIndex,\n key,\n };\n };\n\n useClickOutside({\n isActive: isOpen,\n ignoreClicksInsideRefs: [dropdownRef, controlRef],\n handler: () => {\n setIsOpen.off();\n },\n });\n\n useEffect(() => {\n if (disabled) {\n setIsOpen.off();\n inputRef.current?.blur();\n }\n }, [disabled]);\n\n const handleInputFocus = (e: React.FocusEvent<HTMLInputElement>): void => {\n if (!disabled) {\n if (!isOpen) {\n setIsOpen.on();\n }\n if (typeof onFocus === 'function') {\n onFocus(e);\n }\n }\n };\n\n const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>): void => {\n if (isOpen) {\n inputRef.current?.focus();\n return;\n }\n\n if (typeof onBlur === 'function') {\n onBlur(e);\n }\n };\n\n return {\n isOpen: Boolean(isOpen && hasItems),\n visibleItems,\n getOptionProps,\n handleInputFocus,\n handleInputBlur,\n inputRef,\n getKeyProps,\n hasItems,\n };\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Button{-webkit-appearance:none;background:
|
|
1
|
+
.Button{--button-loader-color:var(--button-color);--button-cursor:pointer;-webkit-appearance:none;background:var(--button-bg-color);border:none;border-radius:var(--control-radius);box-sizing:border-box;color:var(--button-color);cursor:var(--button-cursor);display:inline-block;flex-shrink:0;font-family:var(--font-primary);font-size:var(--button-font-size);font-weight:var(--font-weight-text-regular);height:var(--button-height);line-height:var(--button-height);max-width:100%;overflow:hidden;padding:0 var(--button-space);position:relative;text-decoration:none;text-overflow:ellipsis;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;white-space:nowrap}.Button:not(.Button_loading):not(.Button_disabled):hover{background:var(--button-bg-color-hover);color:var(--button-color-hover)}.Button_form_brick{border-radius:0}.Button_form_round{border-radius:99rem;padding-left:calc(var(--button-space)*1.2);padding-right:calc(var(--button-space)*1.2)}.Button_form_brickDefault{border-radius:0 var(--control-radius) var(--control-radius) 0}.Button_form_defaultBrick{border-radius:var(--control-radius) 0 0 var(--control-radius)}.Button_form_brickRound{border-radius:0 99rem 99rem 0;padding-right:calc(var(--button-space)*1.2)}.Button_form_roundBrick{border-radius:99rem 0 0 99rem;padding-left:calc(var(--button-space)*1.2)}.Button_size_xs{--button-height:var(--control-height-xs);--button-font-size:var(--control-text-size-xs);--button-space:var(--control-space-xs)}.Button_size_s{--button-height:var(--control-height-s);--button-font-size:var(--control-text-size-s);--button-space:var(--control-space-s)}.Button_size_m{--button-height:var(--control-height-m);--button-font-size:var(--control-text-size-m);--button-space:var(--control-space-m)}.Button_size_l{--button-height:var(--control-height-l);--button-font-size:var(--control-text-size-l);--button-space:var(--control-space-l)}.Button_view_clear{--button-bg-color:var(--color-control-bg-clear);--button-bg-color-hover:var(--color-control-bg-clear-hover);--button-color:var(--color-control-typo-clear);--button-color-hover:var(--color-control-typo-clear-hover);--button-border:transparent;--button-bg-color-disable:var(--color-control-bg-border-disable);--button-color-disable:var(--color-control-typo-disable)}.Button_view_ghost{--button-bg-color:var(--color-control-bg-ghost);--button-bg-color-hover:var(--color-control-bg-ghost-hover);--button-color:var(--color-control-typo-ghost);--button-color-hover:var(--color-control-typo-ghost-hover);--button-border:transparent;--button-bg-color-disable:var(--color-control-bg-disable);--button-color-disable:var(--color-control-typo-disable)}.Button_view_primary{--button-bg-color:var(--color-control-bg-primary);--button-bg-color-hover:var(--color-control-bg-primary-hover);--button-color:var(--color-control-typo-primary);--button-color-hover:var(--color-control-typo-primary-hover);--button-border:transparent;--button-bg-color-disable:var(--color-control-bg-disable);--button-color-disable:var(--color-control-typo-disable)}.Button_view_secondary{--button-bg-color:var(--color-control-bg-secondary);--button-bg-color-hover:var(--color-control-bg-clear);--button-color:var(--color-control-typo-secondary);--button-color-hover:var(--color-control-typo-secondary-hover);--button-border:var(--color-control-bg-border-secondary);--button-border-hover:var(--color-control-bg-border-secondary-hover);--button-bg-color-disable:var(--color-control-bg-secondary);--button-color-disable:var(--color-control-typo-disable);--button-border-disable:var(--color-control-typo-disable);border:var(--control-border-width) solid var(--button-border);line-height:calc(var(--button-height) - var(--control-border-width)*2)}.Button_view_secondary:not(.Button_loading):not(.Button_disabled):hover{border-color:var(--button-border-hover)}.Button_width_full{width:100%}.Button_disabled{--button-loader-color:var(--button-color-disable);--button-cursor:not-allowed;background-color:var(--button-bg-color-disable);border-color:var(--button-border-disable);color:var(--button-color-disable)}.Button_onlyIcon{justify-content:center;padding:0;width:var(--button-height)}.Button_onlyIcon,.Button_withIcon{align-items:center;display:inline-flex}.Button_withIcon{--icon-indent:calc(var(--button-space)*0.7)}.Button-Icon{display:block;flex-shrink:0}.Button-Icon_position_left{margin-right:var(--icon-indent)}.Button-Icon_position_right{margin-left:var(--icon-indent)}.Button-Label{flex-grow:1;flex-shrink:1;overflow:hidden;text-align:center;text-overflow:ellipsis}.Button_loading{--button-cursor:wait;color:transparent}.Button_loading.Button_disabled{--button-cursor:not-allowed;color:transparent}.Button_loading .Button-Loader{--loaderBackgroundColor:var(--button-loader-color);position:absolute}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Popover.ContextMenuLevel-Desktop{
|
|
1
|
+
.Popover.ContextMenuLevel-Desktop{width:240px}.Popover.ContextMenuLevel-Desktop:not(.Popover.ContextMenuLevel-Desktop_firstLevel).Popover.ContextMenuLevel-Desktop:not(.Popover.ContextMenuLevel-Desktop_isMobile).MixPopoverAnimate_animate_entered.Popover_direction_leftStartUp,.Popover.ContextMenuLevel-Desktop:not(.Popover.ContextMenuLevel-Desktop_firstLevel).Popover.ContextMenuLevel-Desktop:not(.Popover.ContextMenuLevel-Desktop_isMobile).MixPopoverAnimate_animate_entered.Popover_direction_rightStartUp,.Popover.ContextMenuLevel-Desktop:not(.Popover.ContextMenuLevel-Desktop_firstLevel).Popover.ContextMenuLevel-Desktop:not(.Popover.ContextMenuLevel-Desktop_isMobile).MixPopoverAnimate_animate_entering.Popover_direction_leftStartUp,.Popover.ContextMenuLevel-Desktop:not(.Popover.ContextMenuLevel-Desktop_firstLevel).Popover.ContextMenuLevel-Desktop:not(.Popover.ContextMenuLevel-Desktop_isMobile).MixPopoverAnimate_animate_entering.Popover_direction_rightStartUp{transform:translateY(calc((var(--space-xs) + 1px)*-1))}.Popover.ContextMenuLevel-Desktop:not(.Popover.ContextMenuLevel-Desktop_firstLevel).Popover.ContextMenuLevel-Desktop:not(.Popover.ContextMenuLevel-Desktop_isMobile).MixPopoverAnimate_animate_entered.Popover_direction_leftStartDown,.Popover.ContextMenuLevel-Desktop:not(.Popover.ContextMenuLevel-Desktop_firstLevel).Popover.ContextMenuLevel-Desktop:not(.Popover.ContextMenuLevel-Desktop_isMobile).MixPopoverAnimate_animate_entered.Popover_direction_rightStartDown,.Popover.ContextMenuLevel-Desktop:not(.Popover.ContextMenuLevel-Desktop_firstLevel).Popover.ContextMenuLevel-Desktop:not(.Popover.ContextMenuLevel-Desktop_isMobile).MixPopoverAnimate_animate_entering.Popover_direction_leftStartDown,.Popover.ContextMenuLevel-Desktop:not(.Popover.ContextMenuLevel-Desktop_firstLevel).Popover.ContextMenuLevel-Desktop:not(.Popover.ContextMenuLevel-Desktop_isMobile).MixPopoverAnimate_animate_entering.Popover_direction_rightStartDown{transform:translateY(calc(var(--space-xs) + 1px))}.ContextMenuLevel-Mobile{bottom:0;left:0;position:absolute;right:0;top:0;width:240px}.ContextMenuWrapper_innerAnimation .ContextMenuLevel-Mobile_animate_entered,.ContextMenuWrapper_innerAnimation .ContextMenuLevel-Mobile_animate_entering,.ContextMenuWrapper_innerAnimation .ContextMenuLevel-Mobile_animate_exited,.ContextMenuWrapper_innerAnimation .ContextMenuLevel-Mobile_animate_exiting{pointer-events:none;transition:transform .2s,opacity .2s}.ContextMenuWrapper_innerAnimation .ContextMenuLevel-Mobile_animate_entered{pointer-events:all}.ContextMenuWrapper_innerAnimation .ContextMenuLevel-Mobile_animate_entered,.ContextMenuWrapper_innerAnimation .ContextMenuLevel-Mobile_animate_entering{opacity:1;transform:translate(0)}.ContextMenuWrapper_innerAnimation .ContextMenuLevel-Mobile_animate_exited{opacity:0;transform:translate(100%)}.ContextMenuWrapper_innerAnimation .ContextMenuLevel-Mobile_animate_exiting{opacity:0;transform:translate(-100%)}.ContextMenuWrapper_innerAnimation.ContextMenuWrapper_animationBack .ContextMenuLevel-Mobile_animate_exited{transform:translate(-100%)}.ContextMenuWrapper_innerAnimation.ContextMenuWrapper_animationBack .ContextMenuLevel-Mobile_animate_exiting{transform:translate(100%)}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","items","groups","className","form","animate","levelDepth","activeItem","addLevel","deleteLevel","setHoveredParenLevel","hoveredParenLevel","sortGroup","onItemClick","isOpen","parent","isMobile","direction","possibleDirections","offset","onSetDirection","spareDirection","anchorRef","getItemLabel","getItemRightSide","getItemLeftSide","getItemSubMenu","getItemStatus","getItemDisabled","getItemKey","getItemOnClick","getItemAs","getItemAttributes","getItemGroupId","getItemLeftIcon","getItemRightIcon","getGroupLabel","getGroupId"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _createForOfIteratorHelper(a,b){var c="undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(!c){if(Array.isArray(a)||(c=_unsupportedIterableToArray(a))||b&&a&&"number"==typeof a.length){c&&(a=c);var d=0,e=function(){};return{s:e,n:function n(){return d>=a.length?{done:!0}:{done:!1,value:a[d++]}},e:function e(a){throw a},f:e}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f,g=!0,h=!1;return{s:function s(){c=c.call(a)},n:function n(){var a=c.next();return g=a.done,a},e:function e(a){h=!0,f=a},f:function f(){try{g||null==c["return"]||c["return"]()}finally{if(h)throw f}}}}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}import"./ContextMenuLevel.css";import{IconArrowLeft}from"@consta/icons/IconArrowLeft";import{IconArrowRight}from"@consta/icons/IconArrowRight";import React,{forwardRef,useEffect}from"react";import{cnListBox,List,ListDivider,ListItem,mapIconSize,mapVerticalSpase}from"../../ListCanary";import{
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","items","groups","className","form","animate","levelDepth","activeItem","addLevel","deleteLevel","setHoveredParenLevel","hoveredParenLevel","sortGroup","onItemClick","isOpen","parent","isMobile","direction","possibleDirections","offset","onSetDirection","spareDirection","anchorRef","getItemLabel","getItemRightSide","getItemLeftSide","getItemSubMenu","getItemStatus","getItemDisabled","getItemKey","getItemOnClick","getItemAs","getItemAttributes","getItemGroupId","getItemLeftIcon","getItemRightIcon","getGroupLabel","getGroupId"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _createForOfIteratorHelper(a,b){var c="undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(!c){if(Array.isArray(a)||(c=_unsupportedIterableToArray(a))||b&&a&&"number"==typeof a.length){c&&(a=c);var d=0,e=function(){};return{s:e,n:function n(){return d>=a.length?{done:!0}:{done:!1,value:a[d++]}},e:function e(a){throw a},f:e}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f,g=!0,h=!1;return{s:function s(){c=c.call(a)},n:function n(){var a=c.next();return g=a.done,a},e:function e(a){h=!0,f=a},f:function f(){try{g||null==c["return"]||c["return"]()}finally{if(h)throw f}}}}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}import"./ContextMenuLevel.css";import{IconArrowLeft}from"@consta/icons/IconArrowLeft";import{IconArrowRight}from"@consta/icons/IconArrowRight";import React,{forwardRef,useEffect}from"react";import{cnListBox,List,ListDivider,ListItem,mapIconSize,mapVerticalSpase}from"../../ListCanary";import{useFlag}from"../../../hooks/useFlag/useFlag";import{useRefs}from"../../../hooks/useRefs/useRefs";import{cnMixPopoverAnimate}from"../../../mixs/MixPopoverAnimate";import{cnMixSpace}from"../../../mixs/MixSpace";import{cn}from"../../../utils/bem";import{ContextMenuLevelWrapper}from"../ContextMenuLevelWrapper";import{contextMenuDefaultSize}from"../types";export var cnContextMenuLevel=cn("ContextMenuLevel");var timers=[];export function clearTimers(){var a,b=_createForOfIteratorHelper(timers);try{for(b.s();!(a=b.n()).done;){var c=a.value;clearTimeout(c)}}catch(a){b.e(a)}finally{b.f()}timers=[]}var closeDelay=300,ContextMenuLevelRender=function(a,b){var c=a.size,d=void 0===c?contextMenuDefaultSize:c,e=a.items,f=a.groups,g=a.className,h=a.form,i=void 0===h?"default":h,j=a.animate,k=a.levelDepth,l=a.activeItem,m=a.addLevel,n=a.deleteLevel,o=a.setHoveredParenLevel,p=a.hoveredParenLevel,q=a.sortGroup,r=a.onItemClick,s=a.isOpen,t=a.parent,u=a.isMobile,v=a.direction,w=a.possibleDirections,x=a.offset,y=a.onSetDirection,z=a.spareDirection,A=a.anchorRef,B=a.getItemLabel,C=a.getItemRightSide,D=a.getItemLeftSide,E=a.getItemSubMenu,F=a.getItemStatus,G=a.getItemDisabled,H=a.getItemKey,I=a.getItemOnClick,J=a.getItemAs,K=a.getItemAttributes,L=a.getItemGroupId,M=a.getItemLeftIcon,N=a.getItemRightIcon,O=a.getGroupLabel,P=a.getGroupId,Q=_objectWithoutProperties(a,_excluded),R=useFlag(!1),S=_slicedToArray(R,2),T=S[0],U=S[1],V=function(a){return(H(a)||B(a)).toString()},W=useRefs(e.map(function(a){return V(a)}),[f]);useEffect(function(){return 0!==k&&!T&&p<k&&(clearTimeout(timers[k]),timers[k]=setTimeout(function(){return n(k)},closeDelay)),function(){return clearTimeout(timers[k])}},[T,p]),useEffect(function(){s||clearTimeout(timers[k])},[s]);var X=function(a){var b=E(a),c=G(a);if(Array.isArray(b)&&!c){var d=V(a);m({level:k+1,items:b,anchorRef:W[d],activeItem:d,parent:a}),o(k+1)}else o(k)},Y=u?void 0:function(a){return function(b){var c;X(a);var d=null===(c=K(a))||void 0===c?void 0:c.onMouseEnter;null===d||void 0===d?void 0:d(b)}},Z=0===k;return React.createElement(ContextMenuLevelWrapper,Object.assign({anchorRef:A,className:u?cnContextMenuLevel("Mobile",{animate:j},[g]):cnContextMenuLevel("Desktop",{firstLevel:Z},[cnListBox({size:d,form:i,border:!0,shadow:!0}),cnMixSpace({pV:mapVerticalSpase[d]}),cnMixPopoverAnimate({animate:j}),Z?g:void 0]),possibleDirections:w,spareDirection:z,direction:v,offset:x,onSetDirection:y,onMouseEnter:U.on,onMouseLeave:U.off,ref:b,isMobile:u},Q),t&&React.createElement(React.Fragment,null,React.createElement(ListItem,{label:B(t),size:d,leftIcon:IconArrowLeft,onClick:function onClick(){return n(k)}}),React.createElement(ListDivider,{size:d,space:{mV:mapVerticalSpase[d]}})),React.createElement(List,{size:d,items:e,getItemLabel:B,onItemClick:function onItemClick(a,b){var c=b.e;u&&X(a),null===r||void 0===r?void 0:r({item:a,e:c})},sortGroup:q?function(c,a){return q(c.key,a.key)}:void 0,getItemOnClick:I?function(a){return function(b){var c;return null===(c=I(a))||void 0===c?void 0:c({e:b,item:a})}}:void 0,getItemAs:J,getItemAttributes:Y?function(a){return _objectSpread(_objectSpread({},K(a)),{},{onMouseEnter:Y(a)})}:K,getItemGroupKey:L,getItemLeftIcon:M,getItemRightIcon:N,getItemLeftSide:D,getItemRightSide:function getItemRightSide(a){var b=C(a);if(!E(a))return b;var c=Array.isArray(b)?b:[b];return c.push(React.createElement(IconArrowRight,{size:mapIconSize[d]})),c},getGroupKey:P,getGroupLabel:O,getItemDisabled:G,getItemStatus:F,getItemRef:function getItemRef(a){return W[V(a)]},groups:f,getItemActive:function getItemActive(a){return V(a)===l},innerOffset:"round"===i?"increased":"normal"}))};export var ContextMenuLevel=forwardRef(ContextMenuLevelRender);
|
|
2
2
|
//# sourceMappingURL=ContextMenuLevel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuLevel.js","names":["IconArrowLeft","IconArrowRight","React","forwardRef","useEffect","cnListBox","List","ListDivider","ListItem","mapIconSize","mapVerticalSpase","useDebounce","useFlag","useRefs","cnMixPopoverAnimate","cnMixSpace","cn","ContextMenuLevelWrapper","contextMenuDefaultSize","cnContextMenuLevel","timers","clearTimers","timer","clearTimeout","closeDelay","ContextMenuLevelRender","props","ref","size","items","groupsProp","groups","className","form","animate","levelDepth","activeItem","addLevel","deleteLevel","setHoveredParenLevel","hoveredParenLevel","sortGroup","onItemClick","isOpen","parent","isMobile","direction","possibleDirections","offset","onSetDirection","spareDirection","anchorRef","getItemLabel","getItemRightSide","getItemLeftSide","getItemSubMenu","getItemStatus","getItemDisabled","getItemKey","getItemOnClick","getItemAs","getItemAttributes","getItemGroupId","getItemLeftIcon","getItemRightIcon","getGroupLabel","getGroupId","otherProps","hovered","setHovered","visible","setVisible","setVisibleTrue","on","getKey","item","toString","itemsRefs","map","setTimeout","addCurrentLevel","subMenu","disabled","Array","isArray","key","level","onMouseEnter","e","firstLevel","border","shadow","pV","off","mV","a","b","side","sides","push","ContextMenuLevel"],"sources":["../../../../../../src/components/ContextMenu/ContextMenuLevel/ContextMenuLevel.tsx"],"sourcesContent":["import './ContextMenuLevel.css';\n\nimport { IconArrowLeft } from '@consta/icons/IconArrowLeft';\nimport { IconArrowRight } from '@consta/icons/IconArrowRight';\nimport React, { forwardRef, useEffect } from 'react';\n\nimport {\n cnListBox,\n List,\n ListDivider,\n ListItem,\n mapIconSize,\n mapVerticalSpase,\n} from '##/components/ListCanary';\nimport { useDebounce } from '##/hooks/useDebounce';\nimport { useFlag } from '##/hooks/useFlag/useFlag';\nimport { useRefs } from '##/hooks/useRefs/useRefs';\nimport { cnMixPopoverAnimate } from '##/mixs/MixPopoverAnimate';\nimport { cnMixSpace } from '##/mixs/MixSpace';\nimport { cn } from '##/utils/bem';\n\nimport { ContextMenuLevelWrapper } from '../ContextMenuLevelWrapper';\nimport {\n contextMenuDefaultSize,\n ContextMenuItemDefault,\n ContextMenuLevelComponent,\n ContextMenuLevelProps,\n} from '../types';\n\nexport const cnContextMenuLevel = cn('ContextMenuLevel');\n\nlet timers: ReturnType<typeof setTimeout>[] = [];\nexport function clearTimers() {\n for (const timer of timers) {\n clearTimeout(timer);\n }\n timers = [];\n}\n\nconst closeDelay = 300;\n\nconst ContextMenuLevelRender = (\n props: ContextMenuLevelProps,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const {\n size = contextMenuDefaultSize,\n items,\n groups: groupsProp,\n className,\n form = 'default',\n animate,\n // Свойства относящиеся к меню\n levelDepth,\n activeItem,\n addLevel,\n deleteLevel,\n setHoveredParenLevel,\n hoveredParenLevel,\n sortGroup,\n onItemClick,\n isOpen,\n parent,\n isMobile,\n\n // Свойства для поповера\n direction,\n possibleDirections,\n offset,\n onSetDirection,\n spareDirection,\n anchorRef,\n // Геттеры для ITEM\n getItemLabel,\n getItemRightSide,\n getItemLeftSide,\n getItemSubMenu,\n getItemStatus,\n getItemDisabled,\n getItemKey,\n getItemOnClick,\n getItemAs,\n getItemAttributes,\n getItemGroupId,\n getItemLeftIcon,\n getItemRightIcon,\n // Геттеры для GROUP\n getGroupLabel,\n getGroupId,\n ...otherProps\n } = props;\n\n const [hovered, setHovered] = useFlag(false);\n\n const [visible, setVisible] = useFlag(false);\n const setVisibleTrue = useDebounce(setVisible.on, 20);\n\n const getKey = (item: ContextMenuItemDefault) =>\n (getItemKey(item) || getItemLabel(item)).toString();\n\n const itemsRefs = useRefs<HTMLDivElement, string[]>(\n items.map((item) => getKey(item)),\n [groupsProp],\n );\n\n useEffect(() => {\n if (levelDepth !== 0 && !hovered && hoveredParenLevel < levelDepth) {\n clearTimeout(timers[levelDepth]);\n timers[levelDepth] = setTimeout(\n () => deleteLevel(levelDepth),\n closeDelay,\n );\n }\n return () => clearTimeout(timers[levelDepth]);\n }, [hovered, hoveredParenLevel]);\n\n useEffect(() => {\n if (!isOpen) {\n clearTimeout(timers[levelDepth]);\n }\n }, [isOpen]);\n\n const addCurrentLevel = (item: ContextMenuItemDefault) => {\n const subMenu = getItemSubMenu(item);\n const disabled = getItemDisabled(item);\n\n if (Array.isArray(subMenu) && !disabled) {\n const key = getKey(item);\n addLevel({\n level: levelDepth + 1,\n items: subMenu,\n anchorRef: itemsRefs[key],\n activeItem: key,\n parent: item,\n });\n setHoveredParenLevel(levelDepth + 1);\n } else {\n setHoveredParenLevel(levelDepth);\n }\n };\n\n const onMouseEnter = isMobile\n ? undefined\n : (\n item: ContextMenuItemDefault,\n ): JSX.IntrinsicElements['div']['onMouseEnter'] =>\n (e) => {\n addCurrentLevel(item);\n const onMouseEnter = getItemAttributes(item)\n ?.onMouseEnter as JSX.IntrinsicElements['div']['onMouseEnter'];\n\n onMouseEnter?.(e);\n };\n\n const firstLevel = levelDepth === 0;\n\n return (\n <ContextMenuLevelWrapper\n anchorRef={anchorRef}\n className={\n isMobile\n ? cnContextMenuLevel('Mobile', { animate }, [className])\n : cnContextMenuLevel('Desktop', { firstLevel, visible }, [\n cnListBox({ size, form, border: true, shadow: true }),\n cnMixSpace({\n pV: mapVerticalSpase[size],\n }),\n cnMixPopoverAnimate({ animate }),\n firstLevel ? className : undefined,\n ])\n }\n possibleDirections={possibleDirections}\n spareDirection={spareDirection}\n direction={direction}\n offset={offset}\n onSetDirection={(item) => {\n // скрываем блок пока не найдем точную позицию для оображения\n setVisibleTrue();\n onSetDirection?.(item);\n }}\n onMouseEnter={setHovered.on}\n onMouseLeave={setHovered.off}\n ref={ref}\n isMobile={isMobile}\n {...otherProps}\n >\n {parent && (\n <>\n <ListItem\n label={getItemLabel(parent)}\n size={size}\n leftIcon={IconArrowLeft}\n onClick={() => deleteLevel(levelDepth)}\n />\n <ListDivider size={size} space={{ mV: mapVerticalSpase[size] }} />\n </>\n )}\n <List\n size={size}\n items={items}\n getItemLabel={getItemLabel}\n onItemClick={(item, { e }) => {\n isMobile && addCurrentLevel(item);\n onItemClick?.({\n item,\n e: e as React.MouseEvent<HTMLDivElement>,\n });\n }}\n sortGroup={sortGroup ? (a, b) => sortGroup(a.key, b.key) : undefined}\n getItemOnClick={\n getItemOnClick\n ? (item) => (e) =>\n getItemOnClick(item)?.({\n e: e as React.MouseEvent<HTMLDivElement>,\n item,\n })\n : undefined\n }\n getItemAs={getItemAs}\n getItemAttributes={\n onMouseEnter\n ? (item) =>\n ({\n ...getItemAttributes(item),\n onMouseEnter: onMouseEnter(item),\n } as JSX.IntrinsicElements[keyof JSX.IntrinsicElements])\n : getItemAttributes\n }\n getItemGroupKey={getItemGroupId}\n getItemLeftIcon={getItemLeftIcon}\n getItemRightIcon={getItemRightIcon}\n getItemLeftSide={getItemLeftSide}\n getItemRightSide={(item) => {\n const side = getItemRightSide(item);\n if (!getItemSubMenu(item)) {\n return side;\n }\n\n const sides: React.ReactNode[] = Array.isArray(side) ? side : [side];\n sides.push(<IconArrowRight size={mapIconSize[size]} />);\n return sides;\n }}\n getGroupKey={getGroupId}\n getGroupLabel={getGroupLabel}\n getItemDisabled={getItemDisabled}\n getItemStatus={getItemStatus}\n getItemRef={(item) => itemsRefs[getKey(item)]}\n groups={groupsProp}\n getItemActive={(item) => getKey(item) === activeItem}\n innerOffset={form === 'round' ? 'increased' : 'normal'}\n />\n </ContextMenuLevelWrapper>\n );\n};\n\nexport const ContextMenuLevel = forwardRef(\n ContextMenuLevelRender,\n) as ContextMenuLevelComponent;\n"],"mappings":"0/EAAA,+BAEA,OAASA,aAAT,KAA8B,6BAA9B,CACA,OAASC,cAAT,KAA+B,8BAA/B,CACA,MAAOC,MAAP,EAAgBC,UAAhB,CAA4BC,SAA5B,KAA6C,OAA7C,CAEA,OACEC,SADF,CAEEC,IAFF,CAGEC,WAHF,CAIEC,QAJF,CAKEC,WALF,CAMEC,gBANF,wBAQA,OAASC,WAAT,kCACA,OAASC,OAAT,sCACA,OAASC,OAAT,sCACA,OAASC,mBAAT,uCACA,OAASC,UAAT,8BACA,OAASC,EAAT,0BAEA,OAASC,uBAAT,kCACA,OACEC,sBADF,gBAOA,MAAO,IAAMC,mBAAkB,CAAGH,EAAE,CAAC,kBAAD,CAA7B,CAEP,GAAII,OAAuC,CAAG,EAA9C,CACA,MAAO,SAASC,YAAT,EAAuB,oCACRD,MADQ,MAC5B,2BAA4B,IAAjBE,EAAiB,SAC1BC,YAAY,CAACD,CAAD,CACb,CAH2B,+BAI5BF,MAAM,CAAG,EACV,C,GAEKI,WAAU,CAAG,G,CAEbC,sBAAsB,CAAG,SAC7BC,CAD6B,CAE7BC,CAF6B,CAG1B,OA8CCD,CA9CD,CAEDE,IAFC,CAEDA,CAFC,YAEMV,sBAFN,GAGDW,CAHC,CA8CCH,CA9CD,CAGDG,KAHC,CAIOC,CAJP,CA8CCJ,CA9CD,CAIDK,MAJC,CAKDC,CALC,CA8CCN,CA9CD,CAKDM,SALC,GA8CCN,CA9CD,CAMDO,IANC,CAMDA,CANC,YAMM,SANN,GAODC,CAPC,CA8CCR,CA9CD,CAODQ,OAPC,CASDC,CATC,CA8CCT,CA9CD,CASDS,UATC,CAUDC,CAVC,CA8CCV,CA9CD,CAUDU,UAVC,CAWDC,CAXC,CA8CCX,CA9CD,CAWDW,QAXC,CAYDC,CAZC,CA8CCZ,CA9CD,CAYDY,WAZC,CAaDC,CAbC,CA8CCb,CA9CD,CAaDa,oBAbC,CAcDC,CAdC,CA8CCd,CA9CD,CAcDc,iBAdC,CAeDC,CAfC,CA8CCf,CA9CD,CAeDe,SAfC,CAgBDC,CAhBC,CA8CChB,CA9CD,CAgBDgB,WAhBC,CAiBDC,CAjBC,CA8CCjB,CA9CD,CAiBDiB,MAjBC,CAkBDC,CAlBC,CA8CClB,CA9CD,CAkBDkB,MAlBC,CAmBDC,CAnBC,CA8CCnB,CA9CD,CAmBDmB,QAnBC,CAsBDC,CAtBC,CA8CCpB,CA9CD,CAsBDoB,SAtBC,CAuBDC,CAvBC,CA8CCrB,CA9CD,CAuBDqB,kBAvBC,CAwBDC,CAxBC,CA8CCtB,CA9CD,CAwBDsB,MAxBC,CAyBDC,CAzBC,CA8CCvB,CA9CD,CAyBDuB,cAzBC,CA0BDC,CA1BC,CA8CCxB,CA9CD,CA0BDwB,cA1BC,CA2BDC,CA3BC,CA8CCzB,CA9CD,CA2BDyB,SA3BC,CA6BDC,CA7BC,CA8CC1B,CA9CD,CA6BD0B,YA7BC,CA8BDC,CA9BC,CA8CC3B,CA9CD,CA8BD2B,gBA9BC,CA+BDC,CA/BC,CA8CC5B,CA9CD,CA+BD4B,eA/BC,CAgCDC,CAhCC,CA8CC7B,CA9CD,CAgCD6B,cAhCC,CAiCDC,CAjCC,CA8CC9B,CA9CD,CAiCD8B,aAjCC,CAkCDC,CAlCC,CA8CC/B,CA9CD,CAkCD+B,eAlCC,CAmCDC,CAnCC,CA8CChC,CA9CD,CAmCDgC,UAnCC,CAoCDC,CApCC,CA8CCjC,CA9CD,CAoCDiC,cApCC,CAqCDC,CArCC,CA8CClC,CA9CD,CAqCDkC,SArCC,CAsCDC,CAtCC,CA8CCnC,CA9CD,CAsCDmC,iBAtCC,CAuCDC,CAvCC,CA8CCpC,CA9CD,CAuCDoC,cAvCC,CAwCDC,CAxCC,CA8CCrC,CA9CD,CAwCDqC,eAxCC,CAyCDC,CAzCC,CA8CCtC,CA9CD,CAyCDsC,gBAzCC,CA2CDC,CA3CC,CA8CCvC,CA9CD,CA2CDuC,aA3CC,CA4CDC,CA5CC,CA8CCxC,CA9CD,CA4CDwC,UA5CC,CA6CEC,CA7CF,0BA8CCzC,CA9CD,cAgD2Bd,OAAO,IAhDlC,uBAgDIwD,CAhDJ,MAgDaC,CAhDb,QAkD2BzD,OAAO,IAlDlC,uBAkDI0D,CAlDJ,MAkDaC,CAlDb,MAmDGC,CAAc,CAAG7D,WAAW,CAAC4D,CAAU,CAACE,EAAZ,CAAgB,EAAhB,CAnD/B,CAqDGC,CAAM,CAAG,SAACC,CAAD,QACb,CAACjB,CAAU,CAACiB,CAAD,CAAV,EAAoBvB,CAAY,CAACuB,CAAD,CAAjC,EAAyCC,QAAzC,EADa,CArDZ,CAwDGC,CAAS,CAAGhE,OAAO,CACvBgB,CAAK,CAACiD,GAAN,CAAU,SAACH,CAAD,QAAUD,EAAM,CAACC,CAAD,CAAhB,CAAV,CADuB,CAEvB,CAAC7C,CAAD,CAFuB,CAxDtB,CA6DH1B,SAAS,CAAC,UAAM,CAQd,MAPmB,EAAf,GAAA+B,CAAU,EAAU,CAACiC,CAArB,EAAgC5B,CAAiB,CAAGL,CAOxD,GANEZ,YAAY,CAACH,MAAM,CAACe,CAAD,CAAP,CAMd,CALEf,MAAM,CAACe,CAAD,CAAN,CAAqB4C,UAAU,CAC7B,iBAAMzC,EAAW,CAACH,CAAD,CAAjB,CAD6B,CAE7BX,UAF6B,CAKjC,EAAO,iBAAMD,aAAY,CAACH,MAAM,CAACe,CAAD,CAAP,CAAlB,CACR,CATQ,CASN,CAACiC,CAAD,CAAU5B,CAAV,CATM,CA7DN,CAwEHpC,SAAS,CAAC,UAAM,CACTuC,CADS,EAEZpB,YAAY,CAACH,MAAM,CAACe,CAAD,CAAP,CAEf,CAJQ,CAIN,CAACQ,CAAD,CAJM,CAxEN,IA8EGqC,GAAe,CAAG,SAACL,CAAD,CAAkC,IAClDM,EAAO,CAAG1B,CAAc,CAACoB,CAAD,CAD0B,CAElDO,CAAQ,CAAGzB,CAAe,CAACkB,CAAD,CAFwB,CAIxD,GAAIQ,KAAK,CAACC,OAAN,CAAcH,CAAd,GAA0B,CAACC,CAA/B,CAAyC,CACvC,GAAMG,EAAG,CAAGX,CAAM,CAACC,CAAD,CAAlB,CACAtC,CAAQ,CAAC,CACPiD,KAAK,CAAEnD,CAAU,CAAG,CADb,CAEPN,KAAK,CAAEoD,CAFA,CAGP9B,SAAS,CAAE0B,CAAS,CAACQ,CAAD,CAHb,CAIPjD,UAAU,CAAEiD,CAJL,CAKPzC,MAAM,CAAE+B,CALD,CAAD,CAF+B,CASvCpC,CAAoB,CAACJ,CAAU,CAAG,CAAd,CACrB,CAVD,IAWEI,EAAoB,CAACJ,CAAD,CAEvB,CA/FE,CAiGGoD,EAAY,CAAG1C,CAAQ,QAEzB,SACI8B,CADJ,QAGE,UAACa,CAAD,CAAO,OACLR,EAAe,CAACL,CAAD,CADV,CAEL,GAAMY,EAAY,WAAG1B,CAAiB,CAACc,CAAD,CAApB,qBAAG,EACjBY,YADJ,CAFK,OAKLA,CALK,WAKLA,CALK,QAKLA,CAAY,CAAGC,CAAH,CACb,CATH,CAnGD,CA8GGC,EAAU,CAAkB,CAAf,GAAAtD,CA9GhB,CAgHH,MACE,qBAAC,uBAAD,gBACE,SAAS,CAAEgB,CADb,CAEE,SAAS,CACPN,CAAQ,CACJ1B,kBAAkB,CAAC,QAAD,CAAW,CAAEe,OAAO,CAAPA,CAAF,CAAX,CAAwB,CAACF,CAAD,CAAxB,CADd,CAEJb,kBAAkB,CAAC,SAAD,CAAY,CAAEsE,UAAU,CAAVA,EAAF,CAAcnB,OAAO,CAAPA,CAAd,CAAZ,CAAqC,CACrDjE,SAAS,CAAC,CAAEuB,IAAI,CAAJA,CAAF,CAAQK,IAAI,CAAJA,CAAR,CAAcyD,MAAM,GAApB,CAA4BC,MAAM,GAAlC,CAAD,CAD4C,CAErD5E,UAAU,CAAC,CACT6E,EAAE,CAAElF,gBAAgB,CAACkB,CAAD,CADX,CAAD,CAF2C,CAKrDd,mBAAmB,CAAC,CAAEoB,OAAO,CAAPA,CAAF,CAAD,CALkC,CAMrDuD,EAAU,CAAGzD,CAAH,OAN2C,CAArC,CAL1B,CAcE,kBAAkB,CAAEe,CAdtB,CAeE,cAAc,CAAEG,CAflB,CAgBE,SAAS,CAAEJ,CAhBb,CAiBE,MAAM,CAAEE,CAjBV,CAkBE,cAAc,CAAE,wBAAC2B,CAAD,CAAU,CAExBH,CAAc,EAFU,QAGxBvB,CAHwB,WAGxBA,CAHwB,QAGxBA,CAAc,CAAG0B,CAAH,CACf,CAtBH,CAuBE,YAAY,CAAEN,CAAU,CAACI,EAvB3B,CAwBE,YAAY,CAAEJ,CAAU,CAACwB,GAxB3B,CAyBE,GAAG,CAAElE,CAzBP,CA0BE,QAAQ,CAAEkB,CA1BZ,EA2BMsB,CA3BN,EA6BGvB,CAAM,EACL,wCACE,oBAAC,QAAD,EACE,KAAK,CAAEQ,CAAY,CAACR,CAAD,CADrB,CAEE,IAAI,CAAEhB,CAFR,CAGE,QAAQ,CAAE5B,aAHZ,CAIE,OAAO,CAAE,yBAAMsC,EAAW,CAACH,CAAD,CAAjB,CAJX,EADF,CAOE,oBAAC,WAAD,EAAa,IAAI,CAAEP,CAAnB,CAAyB,KAAK,CAAE,CAAEkE,EAAE,CAAEpF,gBAAgB,CAACkB,CAAD,CAAtB,CAAhC,EAPF,CA9BJ,CAwCE,oBAAC,IAAD,EACE,IAAI,CAAEA,CADR,CAEE,KAAK,CAAEC,CAFT,CAGE,YAAY,CAAEuB,CAHhB,CAIE,WAAW,CAAE,qBAACuB,CAAD,GAAiB,IAARa,EAAQ,GAARA,CAAQ,CAC5B3C,CAAQ,EAAImC,EAAe,CAACL,CAAD,CADC,QAE5BjC,CAF4B,WAE5BA,CAF4B,QAE5BA,CAAW,CAAG,CACZiC,IAAI,CAAJA,CADY,CAEZa,CAAC,CAAEA,CAFS,CAAH,CAIZ,CAVH,CAWE,SAAS,CAAE/C,CAAS,CAAG,SAACsD,CAAD,CAAIC,CAAJ,QAAUvD,EAAS,CAACsD,CAAC,CAACV,GAAH,CAAQW,CAAC,CAACX,GAAV,CAAnB,CAAH,OAXtB,CAYE,cAAc,CACZ1B,CAAc,CACV,SAACgB,CAAD,QAAU,UAACa,CAAD,yBACR7B,CAAc,CAACgB,CAAD,CADN,qBACR,EAAuB,CACrBa,CAAC,CAAEA,CADkB,CAErBb,IAAI,CAAJA,CAFqB,CAAvB,CADQ,CAAV,CADU,OAblB,CAqBE,SAAS,CAAEf,CArBb,CAsBE,iBAAiB,CACf2B,EAAY,CACR,SAACZ,CAAD,wCAEOd,CAAiB,CAACc,CAAD,CAFxB,MAGIY,YAAY,CAAEA,EAAY,CAACZ,CAAD,CAH9B,GADQ,CAMRd,CA7BR,CA+BE,eAAe,CAAEC,CA/BnB,CAgCE,eAAe,CAAEC,CAhCnB,CAiCE,gBAAgB,CAAEC,CAjCpB,CAkCE,eAAe,CAAEV,CAlCnB,CAmCE,gBAAgB,CAAE,0BAACqB,CAAD,CAAU,CAC1B,GAAMsB,EAAI,CAAG5C,CAAgB,CAACsB,CAAD,CAA7B,CACA,GAAI,CAACpB,CAAc,CAACoB,CAAD,CAAnB,CACE,MAAOsB,EAAP,CAGF,GAAMC,EAAwB,CAAGf,KAAK,CAACC,OAAN,CAAca,CAAd,EAAsBA,CAAtB,CAA6B,CAACA,CAAD,CAA9D,CAEA,MADAC,EAAK,CAACC,IAAN,CAAW,oBAAC,cAAD,EAAgB,IAAI,CAAE1F,WAAW,CAACmB,CAAD,CAAjC,EAAX,CACA,CAAOsE,CACR,CA5CH,CA6CE,WAAW,CAAEhC,CA7Cf,CA8CE,aAAa,CAAED,CA9CjB,CA+CE,eAAe,CAAER,CA/CnB,CAgDE,aAAa,CAAED,CAhDjB,CAiDE,UAAU,CAAE,oBAACmB,CAAD,QAAUE,EAAS,CAACH,CAAM,CAACC,CAAD,CAAP,CAAnB,CAjDd,CAkDE,MAAM,CAAE7C,CAlDV,CAmDE,aAAa,CAAE,uBAAC6C,CAAD,QAAUD,EAAM,CAACC,CAAD,CAAN,GAAiBvC,CAA3B,CAnDjB,CAoDE,WAAW,CAAW,OAAT,GAAAH,CAAI,CAAe,WAAf,CAA6B,QApDhD,EAxCF,CAgGH,C,CAED,MAAO,IAAMmE,iBAAgB,CAAGjG,UAAU,CACxCsB,sBADwC,CAAnC"}
|
|
1
|
+
{"version":3,"file":"ContextMenuLevel.js","names":["IconArrowLeft","IconArrowRight","React","forwardRef","useEffect","cnListBox","List","ListDivider","ListItem","mapIconSize","mapVerticalSpase","useFlag","useRefs","cnMixPopoverAnimate","cnMixSpace","cn","ContextMenuLevelWrapper","contextMenuDefaultSize","cnContextMenuLevel","timers","clearTimers","timer","clearTimeout","closeDelay","ContextMenuLevelRender","props","ref","size","items","groupsProp","groups","className","form","animate","levelDepth","activeItem","addLevel","deleteLevel","setHoveredParenLevel","hoveredParenLevel","sortGroup","onItemClick","isOpen","parent","isMobile","direction","possibleDirections","offset","onSetDirection","spareDirection","anchorRef","getItemLabel","getItemRightSide","getItemLeftSide","getItemSubMenu","getItemStatus","getItemDisabled","getItemKey","getItemOnClick","getItemAs","getItemAttributes","getItemGroupId","getItemLeftIcon","getItemRightIcon","getGroupLabel","getGroupId","otherProps","hovered","setHovered","getKey","item","toString","itemsRefs","map","setTimeout","addCurrentLevel","subMenu","disabled","Array","isArray","key","level","onMouseEnter","e","firstLevel","border","shadow","pV","on","off","mV","a","b","side","sides","push","ContextMenuLevel"],"sources":["../../../../../../src/components/ContextMenu/ContextMenuLevel/ContextMenuLevel.tsx"],"sourcesContent":["import './ContextMenuLevel.css';\n\nimport { IconArrowLeft } from '@consta/icons/IconArrowLeft';\nimport { IconArrowRight } from '@consta/icons/IconArrowRight';\nimport React, { forwardRef, useEffect } from 'react';\n\nimport {\n cnListBox,\n List,\n ListDivider,\n ListItem,\n mapIconSize,\n mapVerticalSpase,\n} from '##/components/ListCanary';\nimport { useFlag } from '##/hooks/useFlag/useFlag';\nimport { useRefs } from '##/hooks/useRefs/useRefs';\nimport { cnMixPopoverAnimate } from '##/mixs/MixPopoverAnimate';\nimport { cnMixSpace } from '##/mixs/MixSpace';\nimport { cn } from '##/utils/bem';\n\nimport { ContextMenuLevelWrapper } from '../ContextMenuLevelWrapper';\nimport {\n contextMenuDefaultSize,\n ContextMenuItemDefault,\n ContextMenuLevelComponent,\n ContextMenuLevelProps,\n} from '../types';\n\nexport const cnContextMenuLevel = cn('ContextMenuLevel');\n\nlet timers: ReturnType<typeof setTimeout>[] = [];\nexport function clearTimers() {\n for (const timer of timers) {\n clearTimeout(timer);\n }\n timers = [];\n}\n\nconst closeDelay = 300;\n\nconst ContextMenuLevelRender = (\n props: ContextMenuLevelProps,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const {\n size = contextMenuDefaultSize,\n items,\n groups: groupsProp,\n className,\n form = 'default',\n animate,\n // Свойства относящиеся к меню\n levelDepth,\n activeItem,\n addLevel,\n deleteLevel,\n setHoveredParenLevel,\n hoveredParenLevel,\n sortGroup,\n onItemClick,\n isOpen,\n parent,\n isMobile,\n\n // Свойства для поповера\n direction,\n possibleDirections,\n offset,\n onSetDirection,\n spareDirection,\n anchorRef,\n // Геттеры для ITEM\n getItemLabel,\n getItemRightSide,\n getItemLeftSide,\n getItemSubMenu,\n getItemStatus,\n getItemDisabled,\n getItemKey,\n getItemOnClick,\n getItemAs,\n getItemAttributes,\n getItemGroupId,\n getItemLeftIcon,\n getItemRightIcon,\n // Геттеры для GROUP\n getGroupLabel,\n getGroupId,\n ...otherProps\n } = props;\n\n const [hovered, setHovered] = useFlag(false);\n\n const getKey = (item: ContextMenuItemDefault) =>\n (getItemKey(item) || getItemLabel(item)).toString();\n\n const itemsRefs = useRefs<HTMLDivElement, string[]>(\n items.map((item) => getKey(item)),\n [groupsProp],\n );\n\n useEffect(() => {\n if (levelDepth !== 0 && !hovered && hoveredParenLevel < levelDepth) {\n clearTimeout(timers[levelDepth]);\n timers[levelDepth] = setTimeout(\n () => deleteLevel(levelDepth),\n closeDelay,\n );\n }\n return () => clearTimeout(timers[levelDepth]);\n }, [hovered, hoveredParenLevel]);\n\n useEffect(() => {\n if (!isOpen) {\n clearTimeout(timers[levelDepth]);\n }\n }, [isOpen]);\n\n const addCurrentLevel = (item: ContextMenuItemDefault) => {\n const subMenu = getItemSubMenu(item);\n const disabled = getItemDisabled(item);\n\n if (Array.isArray(subMenu) && !disabled) {\n const key = getKey(item);\n addLevel({\n level: levelDepth + 1,\n items: subMenu,\n anchorRef: itemsRefs[key],\n activeItem: key,\n parent: item,\n });\n setHoveredParenLevel(levelDepth + 1);\n } else {\n setHoveredParenLevel(levelDepth);\n }\n };\n\n const onMouseEnter = isMobile\n ? undefined\n : (\n item: ContextMenuItemDefault,\n ): JSX.IntrinsicElements['div']['onMouseEnter'] =>\n (e) => {\n addCurrentLevel(item);\n const onMouseEnter = getItemAttributes(item)\n ?.onMouseEnter as JSX.IntrinsicElements['div']['onMouseEnter'];\n\n onMouseEnter?.(e);\n };\n\n const firstLevel = levelDepth === 0;\n\n return (\n <ContextMenuLevelWrapper\n anchorRef={anchorRef}\n className={\n isMobile\n ? cnContextMenuLevel('Mobile', { animate }, [className])\n : cnContextMenuLevel('Desktop', { firstLevel }, [\n cnListBox({ size, form, border: true, shadow: true }),\n cnMixSpace({\n pV: mapVerticalSpase[size],\n }),\n cnMixPopoverAnimate({ animate }),\n firstLevel ? className : undefined,\n ])\n }\n possibleDirections={possibleDirections}\n spareDirection={spareDirection}\n direction={direction}\n offset={offset}\n onSetDirection={onSetDirection}\n onMouseEnter={setHovered.on}\n onMouseLeave={setHovered.off}\n ref={ref}\n isMobile={isMobile}\n {...otherProps}\n >\n {parent && (\n <>\n <ListItem\n label={getItemLabel(parent)}\n size={size}\n leftIcon={IconArrowLeft}\n onClick={() => deleteLevel(levelDepth)}\n />\n <ListDivider size={size} space={{ mV: mapVerticalSpase[size] }} />\n </>\n )}\n <List\n size={size}\n items={items}\n getItemLabel={getItemLabel}\n onItemClick={(item, { e }) => {\n isMobile && addCurrentLevel(item);\n onItemClick?.({\n item,\n e: e as React.MouseEvent<HTMLDivElement>,\n });\n }}\n sortGroup={sortGroup ? (a, b) => sortGroup(a.key, b.key) : undefined}\n getItemOnClick={\n getItemOnClick\n ? (item) => (e) =>\n getItemOnClick(item)?.({\n e: e as React.MouseEvent<HTMLDivElement>,\n item,\n })\n : undefined\n }\n getItemAs={getItemAs}\n getItemAttributes={\n onMouseEnter\n ? (item) =>\n ({\n ...getItemAttributes(item),\n onMouseEnter: onMouseEnter(item),\n } as JSX.IntrinsicElements[keyof JSX.IntrinsicElements])\n : getItemAttributes\n }\n getItemGroupKey={getItemGroupId}\n getItemLeftIcon={getItemLeftIcon}\n getItemRightIcon={getItemRightIcon}\n getItemLeftSide={getItemLeftSide}\n getItemRightSide={(item) => {\n const side = getItemRightSide(item);\n if (!getItemSubMenu(item)) {\n return side;\n }\n\n const sides: React.ReactNode[] = Array.isArray(side) ? side : [side];\n sides.push(<IconArrowRight size={mapIconSize[size]} />);\n return sides;\n }}\n getGroupKey={getGroupId}\n getGroupLabel={getGroupLabel}\n getItemDisabled={getItemDisabled}\n getItemStatus={getItemStatus}\n getItemRef={(item) => itemsRefs[getKey(item)]}\n groups={groupsProp}\n getItemActive={(item) => getKey(item) === activeItem}\n innerOffset={form === 'round' ? 'increased' : 'normal'}\n />\n </ContextMenuLevelWrapper>\n );\n};\n\nexport const ContextMenuLevel = forwardRef(\n ContextMenuLevelRender,\n) as ContextMenuLevelComponent;\n"],"mappings":"0/EAAA,+BAEA,OAASA,aAAT,KAA8B,6BAA9B,CACA,OAASC,cAAT,KAA+B,8BAA/B,CACA,MAAOC,MAAP,EAAgBC,UAAhB,CAA4BC,SAA5B,KAA6C,OAA7C,CAEA,OACEC,SADF,CAEEC,IAFF,CAGEC,WAHF,CAIEC,QAJF,CAKEC,WALF,CAMEC,gBANF,wBAQA,OAASC,OAAT,sCACA,OAASC,OAAT,sCACA,OAASC,mBAAT,uCACA,OAASC,UAAT,8BACA,OAASC,EAAT,0BAEA,OAASC,uBAAT,kCACA,OACEC,sBADF,gBAOA,MAAO,IAAMC,mBAAkB,CAAGH,EAAE,CAAC,kBAAD,CAA7B,CAEP,GAAII,OAAuC,CAAG,EAA9C,CACA,MAAO,SAASC,YAAT,EAAuB,oCACRD,MADQ,MAC5B,2BAA4B,IAAjBE,EAAiB,SAC1BC,YAAY,CAACD,CAAD,CACb,CAH2B,+BAI5BF,MAAM,CAAG,EACV,C,GAEKI,WAAU,CAAG,G,CAEbC,sBAAsB,CAAG,SAC7BC,CAD6B,CAE7BC,CAF6B,CAG1B,OA8CCD,CA9CD,CAEDE,IAFC,CAEDA,CAFC,YAEMV,sBAFN,GAGDW,CAHC,CA8CCH,CA9CD,CAGDG,KAHC,CAIOC,CAJP,CA8CCJ,CA9CD,CAIDK,MAJC,CAKDC,CALC,CA8CCN,CA9CD,CAKDM,SALC,GA8CCN,CA9CD,CAMDO,IANC,CAMDA,CANC,YAMM,SANN,GAODC,CAPC,CA8CCR,CA9CD,CAODQ,OAPC,CASDC,CATC,CA8CCT,CA9CD,CASDS,UATC,CAUDC,CAVC,CA8CCV,CA9CD,CAUDU,UAVC,CAWDC,CAXC,CA8CCX,CA9CD,CAWDW,QAXC,CAYDC,CAZC,CA8CCZ,CA9CD,CAYDY,WAZC,CAaDC,CAbC,CA8CCb,CA9CD,CAaDa,oBAbC,CAcDC,CAdC,CA8CCd,CA9CD,CAcDc,iBAdC,CAeDC,CAfC,CA8CCf,CA9CD,CAeDe,SAfC,CAgBDC,CAhBC,CA8CChB,CA9CD,CAgBDgB,WAhBC,CAiBDC,CAjBC,CA8CCjB,CA9CD,CAiBDiB,MAjBC,CAkBDC,CAlBC,CA8CClB,CA9CD,CAkBDkB,MAlBC,CAmBDC,CAnBC,CA8CCnB,CA9CD,CAmBDmB,QAnBC,CAsBDC,CAtBC,CA8CCpB,CA9CD,CAsBDoB,SAtBC,CAuBDC,CAvBC,CA8CCrB,CA9CD,CAuBDqB,kBAvBC,CAwBDC,CAxBC,CA8CCtB,CA9CD,CAwBDsB,MAxBC,CAyBDC,CAzBC,CA8CCvB,CA9CD,CAyBDuB,cAzBC,CA0BDC,CA1BC,CA8CCxB,CA9CD,CA0BDwB,cA1BC,CA2BDC,CA3BC,CA8CCzB,CA9CD,CA2BDyB,SA3BC,CA6BDC,CA7BC,CA8CC1B,CA9CD,CA6BD0B,YA7BC,CA8BDC,CA9BC,CA8CC3B,CA9CD,CA8BD2B,gBA9BC,CA+BDC,CA/BC,CA8CC5B,CA9CD,CA+BD4B,eA/BC,CAgCDC,CAhCC,CA8CC7B,CA9CD,CAgCD6B,cAhCC,CAiCDC,CAjCC,CA8CC9B,CA9CD,CAiCD8B,aAjCC,CAkCDC,CAlCC,CA8CC/B,CA9CD,CAkCD+B,eAlCC,CAmCDC,CAnCC,CA8CChC,CA9CD,CAmCDgC,UAnCC,CAoCDC,CApCC,CA8CCjC,CA9CD,CAoCDiC,cApCC,CAqCDC,CArCC,CA8CClC,CA9CD,CAqCDkC,SArCC,CAsCDC,CAtCC,CA8CCnC,CA9CD,CAsCDmC,iBAtCC,CAuCDC,CAvCC,CA8CCpC,CA9CD,CAuCDoC,cAvCC,CAwCDC,CAxCC,CA8CCrC,CA9CD,CAwCDqC,eAxCC,CAyCDC,CAzCC,CA8CCtC,CA9CD,CAyCDsC,gBAzCC,CA2CDC,CA3CC,CA8CCvC,CA9CD,CA2CDuC,aA3CC,CA4CDC,CA5CC,CA8CCxC,CA9CD,CA4CDwC,UA5CC,CA6CEC,CA7CF,0BA8CCzC,CA9CD,cAgD2Bd,OAAO,IAhDlC,uBAgDIwD,CAhDJ,MAgDaC,CAhDb,MAkDGC,CAAM,CAAG,SAACC,CAAD,QACb,CAACb,CAAU,CAACa,CAAD,CAAV,EAAoBnB,CAAY,CAACmB,CAAD,CAAjC,EAAyCC,QAAzC,EADa,CAlDZ,CAqDGC,CAAS,CAAG5D,OAAO,CACvBgB,CAAK,CAAC6C,GAAN,CAAU,SAACH,CAAD,QAAUD,EAAM,CAACC,CAAD,CAAhB,CAAV,CADuB,CAEvB,CAACzC,CAAD,CAFuB,CArDtB,CA0DHzB,SAAS,CAAC,UAAM,CAQd,MAPmB,EAAf,GAAA8B,CAAU,EAAU,CAACiC,CAArB,EAAgC5B,CAAiB,CAAGL,CAOxD,GANEZ,YAAY,CAACH,MAAM,CAACe,CAAD,CAAP,CAMd,CALEf,MAAM,CAACe,CAAD,CAAN,CAAqBwC,UAAU,CAC7B,iBAAMrC,EAAW,CAACH,CAAD,CAAjB,CAD6B,CAE7BX,UAF6B,CAKjC,EAAO,iBAAMD,aAAY,CAACH,MAAM,CAACe,CAAD,CAAP,CAAlB,CACR,CATQ,CASN,CAACiC,CAAD,CAAU5B,CAAV,CATM,CA1DN,CAqEHnC,SAAS,CAAC,UAAM,CACTsC,CADS,EAEZpB,YAAY,CAACH,MAAM,CAACe,CAAD,CAAP,CAEf,CAJQ,CAIN,CAACQ,CAAD,CAJM,CArEN,IA2EGiC,EAAe,CAAG,SAACL,CAAD,CAAkC,IAClDM,EAAO,CAAGtB,CAAc,CAACgB,CAAD,CAD0B,CAElDO,CAAQ,CAAGrB,CAAe,CAACc,CAAD,CAFwB,CAIxD,GAAIQ,KAAK,CAACC,OAAN,CAAcH,CAAd,GAA0B,CAACC,CAA/B,CAAyC,CACvC,GAAMG,EAAG,CAAGX,CAAM,CAACC,CAAD,CAAlB,CACAlC,CAAQ,CAAC,CACP6C,KAAK,CAAE/C,CAAU,CAAG,CADb,CAEPN,KAAK,CAAEgD,CAFA,CAGP1B,SAAS,CAAEsB,CAAS,CAACQ,CAAD,CAHb,CAIP7C,UAAU,CAAE6C,CAJL,CAKPrC,MAAM,CAAE2B,CALD,CAAD,CAF+B,CASvChC,CAAoB,CAACJ,CAAU,CAAG,CAAd,CACrB,CAVD,IAWEI,EAAoB,CAACJ,CAAD,CAEvB,CA5FE,CA8FGgD,CAAY,CAAGtC,CAAQ,QAEzB,SACI0B,CADJ,QAGE,UAACa,CAAD,CAAO,OACLR,CAAe,CAACL,CAAD,CADV,CAEL,GAAMY,EAAY,WAAGtB,CAAiB,CAACU,CAAD,CAApB,qBAAG,EACjBY,YADJ,CAFK,OAKLA,CALK,WAKLA,CALK,QAKLA,CAAY,CAAGC,CAAH,CACb,CATH,CAhGD,CA2GGC,CAAU,CAAkB,CAAf,GAAAlD,CA3GhB,CA6GH,MACE,qBAAC,uBAAD,gBACE,SAAS,CAAEgB,CADb,CAEE,SAAS,CACPN,CAAQ,CACJ1B,kBAAkB,CAAC,QAAD,CAAW,CAAEe,OAAO,CAAPA,CAAF,CAAX,CAAwB,CAACF,CAAD,CAAxB,CADd,CAEJb,kBAAkB,CAAC,SAAD,CAAY,CAAEkE,UAAU,CAAVA,CAAF,CAAZ,CAA4B,CAC5C/E,SAAS,CAAC,CAAEsB,IAAI,CAAJA,CAAF,CAAQK,IAAI,CAAJA,CAAR,CAAcqD,MAAM,GAApB,CAA4BC,MAAM,GAAlC,CAAD,CADmC,CAE5CxE,UAAU,CAAC,CACTyE,EAAE,CAAE7E,gBAAgB,CAACiB,CAAD,CADX,CAAD,CAFkC,CAK5Cd,mBAAmB,CAAC,CAAEoB,OAAO,CAAPA,CAAF,CAAD,CALyB,CAM5CmD,CAAU,CAAGrD,CAAH,OANkC,CAA5B,CAL1B,CAcE,kBAAkB,CAAEe,CAdtB,CAeE,cAAc,CAAEG,CAflB,CAgBE,SAAS,CAAEJ,CAhBb,CAiBE,MAAM,CAAEE,CAjBV,CAkBE,cAAc,CAAEC,CAlBlB,CAmBE,YAAY,CAAEoB,CAAU,CAACoB,EAnB3B,CAoBE,YAAY,CAAEpB,CAAU,CAACqB,GApB3B,CAqBE,GAAG,CAAE/D,CArBP,CAsBE,QAAQ,CAAEkB,CAtBZ,EAuBMsB,CAvBN,EAyBGvB,CAAM,EACL,wCACE,oBAAC,QAAD,EACE,KAAK,CAAEQ,CAAY,CAACR,CAAD,CADrB,CAEE,IAAI,CAAEhB,CAFR,CAGE,QAAQ,CAAE3B,aAHZ,CAIE,OAAO,CAAE,yBAAMqC,EAAW,CAACH,CAAD,CAAjB,CAJX,EADF,CAOE,oBAAC,WAAD,EAAa,IAAI,CAAEP,CAAnB,CAAyB,KAAK,CAAE,CAAE+D,EAAE,CAAEhF,gBAAgB,CAACiB,CAAD,CAAtB,CAAhC,EAPF,CA1BJ,CAoCE,oBAAC,IAAD,EACE,IAAI,CAAEA,CADR,CAEE,KAAK,CAAEC,CAFT,CAGE,YAAY,CAAEuB,CAHhB,CAIE,WAAW,CAAE,qBAACmB,CAAD,GAAiB,IAARa,EAAQ,GAARA,CAAQ,CAC5BvC,CAAQ,EAAI+B,CAAe,CAACL,CAAD,CADC,QAE5B7B,CAF4B,WAE5BA,CAF4B,QAE5BA,CAAW,CAAG,CACZ6B,IAAI,CAAJA,CADY,CAEZa,CAAC,CAAEA,CAFS,CAAH,CAIZ,CAVH,CAWE,SAAS,CAAE3C,CAAS,CAAG,SAACmD,CAAD,CAAIC,CAAJ,QAAUpD,EAAS,CAACmD,CAAC,CAACX,GAAH,CAAQY,CAAC,CAACZ,GAAV,CAAnB,CAAH,OAXtB,CAYE,cAAc,CACZtB,CAAc,CACV,SAACY,CAAD,QAAU,UAACa,CAAD,yBACRzB,CAAc,CAACY,CAAD,CADN,qBACR,EAAuB,CACrBa,CAAC,CAAEA,CADkB,CAErBb,IAAI,CAAJA,CAFqB,CAAvB,CADQ,CAAV,CADU,OAblB,CAqBE,SAAS,CAAEX,CArBb,CAsBE,iBAAiB,CACfuB,CAAY,CACR,SAACZ,CAAD,wCAEOV,CAAiB,CAACU,CAAD,CAFxB,MAGIY,YAAY,CAAEA,CAAY,CAACZ,CAAD,CAH9B,GADQ,CAMRV,CA7BR,CA+BE,eAAe,CAAEC,CA/BnB,CAgCE,eAAe,CAAEC,CAhCnB,CAiCE,gBAAgB,CAAEC,CAjCpB,CAkCE,eAAe,CAAEV,CAlCnB,CAmCE,gBAAgB,CAAE,0BAACiB,CAAD,CAAU,CAC1B,GAAMuB,EAAI,CAAGzC,CAAgB,CAACkB,CAAD,CAA7B,CACA,GAAI,CAAChB,CAAc,CAACgB,CAAD,CAAnB,CACE,MAAOuB,EAAP,CAGF,GAAMC,EAAwB,CAAGhB,KAAK,CAACC,OAAN,CAAcc,CAAd,EAAsBA,CAAtB,CAA6B,CAACA,CAAD,CAA9D,CAEA,MADAC,EAAK,CAACC,IAAN,CAAW,oBAAC,cAAD,EAAgB,IAAI,CAAEtF,WAAW,CAACkB,CAAD,CAAjC,EAAX,CACA,CAAOmE,CACR,CA5CH,CA6CE,WAAW,CAAE7B,CA7Cf,CA8CE,aAAa,CAAED,CA9CjB,CA+CE,eAAe,CAAER,CA/CnB,CAgDE,aAAa,CAAED,CAhDjB,CAiDE,UAAU,CAAE,oBAACe,CAAD,QAAUE,EAAS,CAACH,CAAM,CAACC,CAAD,CAAP,CAAnB,CAjDd,CAkDE,MAAM,CAAEzC,CAlDV,CAmDE,aAAa,CAAE,uBAACyC,CAAD,QAAUD,EAAM,CAACC,CAAD,CAAN,GAAiBnC,CAA3B,CAnDjB,CAoDE,WAAW,CAAW,OAAT,GAAAH,CAAI,CAAe,WAAf,CAA6B,QApDhD,EApCF,CA4FH,C,CAED,MAAO,IAAMgE,iBAAgB,CAAG7F,UAAU,CACxCqB,sBADwC,CAAnC"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import './DragNDropField.css';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { DragNDropFieldChildrenRenderProp } from './types';
|
|
4
3
|
export declare const COMPONENT_NAME: "DragNDropField";
|
|
5
4
|
export declare const DragNDropField: React.ForwardRefExoticComponent<{
|
|
6
5
|
accept?: string | string[] | undefined;
|
|
@@ -8,7 +7,7 @@ export declare const DragNDropField: React.ForwardRefExoticComponent<{
|
|
|
8
7
|
minSize?: number | undefined;
|
|
9
8
|
multiple?: boolean | undefined;
|
|
10
9
|
onDropFiles: (files: File[]) => void;
|
|
11
|
-
children?: React.ReactNode | DragNDropFieldChildrenRenderProp;
|
|
10
|
+
children?: React.ReactNode | import("./types").DragNDropFieldChildrenRenderProp;
|
|
12
11
|
locale?: import("./locale").Locale | undefined;
|
|
13
12
|
disabled?: boolean | undefined;
|
|
14
13
|
} & Omit<React.HTMLAttributes<HTMLDivElement>, "css" | "children" | "disabled" | "accept" | "multiple" | "locale" | "maxSize" | "minSize" | "onDropFiles"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["accept","maxSize","minSize","multiple","onDropFiles","children","locale","disabled","onClick"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./DragNDropField.css";import React,{forwardRef,useRef}from"react";import{useDropzone}from"react-dropzone";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{useMutableRef}from"../../hooks/useMutableRef/useMutableRef";import{cn}from"../../utils/bem";import{
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["accept","maxSize","minSize","multiple","onDropFiles","children","locale","disabled","onClick"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./DragNDropField.css";import React,{forwardRef,useRef}from"react";import{useDropzone}from"react-dropzone";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{Text}from"../Text/Text";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{useMutableRef}from"../../hooks/useMutableRef/useMutableRef";import{cn}from"../../utils/bem";import{isRenderProp}from"../../utils/isRenderProp";import{DragNDropFieldContent}from"./DragNDropFieldContent/DragNDropFieldContent";import{DragNDropFieldTooltip}from"./DragNDropFieldTooltip/DragNDropFieldTooltip";import{getErrorsList}from"./getErrorsList";import{withdefaultLocale}from"./locale";var cnDragNDropField=cn("DragNDropField");export var COMPONENT_NAME="DragNDropField";export var DragNDropField=forwardRef(function(a,b){var c=useRef(null),d=usePropsHandler(COMPONENT_NAME,a,c),e=d.accept,f=d.maxSize,g=d.minSize,h=d.multiple,i=void 0!==h&&h,j=d.onDropFiles,k=d.children,l=void 0===k?DragNDropFieldContent:k,m=d.locale,n=d.disabled,o=d.onClick,p=_objectWithoutProperties(d,_excluded),q=useMutableRef(o),r=withdefaultLocale(m),s=React.useCallback(function(a){return 0<a.length&&j(a)},[j]),t=useDropzone({accept:null!==e&&void 0!==e&&e.length?e:void 0,maxSize:f||void 0,minSize:g||void 0,onDrop:s,multiple:i,disabled:n}),u=t.fileRejections,v=t.getRootProps,w=t.getInputProps,x=t.isDragActive,y=t.rootRef,z=t.open,A=React.useCallback(function(a){var b;a.target!==y.current&&a.stopPropagation(),null===(b=q.current)||void 0===b?void 0:b.call(q,a)},[]),B=v(_objectSpread(_objectSpread({},p),{},{className:cnDragNDropField({active:x,disabled:n},[p.className]),onClick:A})),C=isRenderProp(l)?l({accept:e,maxSize:f,minSize:g,multiple:i,openFileDialog:z,locale:r,disabled:n}):l,D=React.useMemo(function(){return getErrorsList(u,{maxSize:f,minSize:g},r)},[u]);return React.createElement(React.Fragment,null,React.createElement("div",Object.assign({},B,{ref:useForkRef([b,y,c])}),React.createElement("input",w()),x?React.createElement(Text,{view:"secondary",size:"s",align:"center"},"\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B \u0441\u044E\u0434\u0430"):C),React.createElement(DragNDropFieldTooltip,{anchorRef:y,errors:D}))});export*from"./types";
|
|
2
2
|
//# sourceMappingURL=DragNDropField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragNDropField.js","names":["React","forwardRef","useRef","useDropzone","useForkRef","useMutableRef","cn","
|
|
1
|
+
{"version":3,"file":"DragNDropField.js","names":["React","forwardRef","useRef","useDropzone","usePropsHandler","Text","useForkRef","useMutableRef","cn","isRenderProp","DragNDropFieldContent","DragNDropFieldTooltip","getErrorsList","withdefaultLocale","cnDragNDropField","COMPONENT_NAME","DragNDropField","props","ref","dragNDropFieldRef","accept","maxSize","minSize","multiple","onDropFiles","children","localeProp","locale","disabled","onClick","otherProps","onClickRef","handleDrop","useCallback","acceptedFiles","length","onDrop","fileRejections","getRootProps","getInputProps","isDragActive","rootRef","open","handleRootClick","e","target","current","stopPropagation","rootProps","className","active","content","openFileDialog","errors","useMemo"],"sources":["../../../../../src/components/DragNDropField/DragNDropField.tsx"],"sourcesContent":["import './DragNDropField.css';\n\nimport React, { forwardRef, useRef } from 'react';\nimport { DropzoneOptions, useDropzone } from 'react-dropzone';\n\nimport { usePropsHandler } from '##/components/EventInterceptor/usePropsHandler';\nimport { Text } from '##/components/Text/Text';\nimport { useForkRef } from '##/hooks/useForkRef/useForkRef';\nimport { useMutableRef } from '##/hooks/useMutableRef/useMutableRef';\nimport { cn } from '##/utils/bem';\nimport { isRenderProp } from '##/utils/isRenderProp';\n\nimport { DragNDropFieldContent } from './DragNDropFieldContent/DragNDropFieldContent';\nimport { DragNDropFieldTooltip } from './DragNDropFieldTooltip/DragNDropFieldTooltip';\nimport { getErrorsList } from './getErrorsList';\nimport { withdefaultLocale } from './locale';\nimport { DragNDropFieldProps } from './types';\n\nconst cnDragNDropField = cn('DragNDropField');\n\nexport const COMPONENT_NAME = 'DragNDropField' as const;\n\nexport const DragNDropField = forwardRef<HTMLDivElement, DragNDropFieldProps>(\n (props, ref) => {\n const dragNDropFieldRef = useRef<HTMLDivElement>(null);\n\n const {\n accept,\n maxSize,\n minSize,\n multiple = false,\n onDropFiles,\n children = DragNDropFieldContent,\n locale: localeProp,\n disabled,\n onClick,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, props, dragNDropFieldRef);\n\n const onClickRef = useMutableRef(onClick);\n\n const locale = withdefaultLocale(localeProp);\n\n const handleDrop: DropzoneOptions['onDrop'] = React.useCallback(\n (acceptedFiles: File[]) =>\n acceptedFiles.length > 0 && onDropFiles(acceptedFiles),\n [onDropFiles],\n );\n\n const {\n fileRejections,\n getRootProps,\n getInputProps,\n isDragActive,\n rootRef,\n open,\n } = useDropzone({\n accept: accept?.length ? accept : undefined,\n maxSize: maxSize || undefined,\n minSize: minSize || undefined,\n onDrop: handleDrop,\n multiple,\n disabled,\n });\n\n const handleRootClick: React.MouseEventHandler<HTMLDivElement> =\n React.useCallback((e) => {\n // Чтобы не открывалось окно выбора файла при клике по внутренним элементам\n if (e.target !== rootRef.current) {\n e.stopPropagation();\n }\n onClickRef.current?.(e);\n }, []);\n\n const rootProps = getRootProps({\n ...otherProps,\n className: cnDragNDropField({ active: isDragActive, disabled }, [\n otherProps.className,\n ]),\n onClick: handleRootClick,\n });\n\n const content = isRenderProp(children)\n ? children({\n accept,\n maxSize,\n minSize,\n multiple,\n openFileDialog: open,\n locale,\n disabled,\n })\n : children;\n\n const errors = React.useMemo(\n () => getErrorsList(fileRejections, { maxSize, minSize }, locale),\n [fileRejections],\n );\n\n return (\n <>\n <div {...rootProps} ref={useForkRef([ref, rootRef, dragNDropFieldRef])}>\n <input {...getInputProps()} />\n {isDragActive ? (\n <Text view=\"secondary\" size=\"s\" align=\"center\">\n Перетащите файлы сюда\n </Text>\n ) : (\n content\n )}\n </div>\n <DragNDropFieldTooltip anchorRef={rootRef} errors={errors} />\n </>\n );\n },\n);\n\nexport * from './types';\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ListItem{
|
|
1
|
+
.ListItem{background:var(--color-control-bg-clear);position:relative;text-decoration:none;transition:color .3s}.ListItem_interactive{cursor:pointer}.ListItem_active,.ListItem_interactive:hover{background:var(--color-control-bg-clear-hover)}.ListItem:before{background-color:var(--color-control-typo-secondary);bottom:0;content:"";left:0;opacity:0;position:absolute;top:0;transition:opacity .2s;width:var(--space-3xs)}.ListItem_checked.Text{color:var(--color-control-typo-secondary)}.ListItem_checked.Text:before{opacity:1}.ListItem_disabled.Text{color:var(--color-control-typo-disable);cursor:auto}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Popover{left:var(--popover-left);pointer-events:var(--popover-pointer-events);position:absolute;top:var(--popover-top);visibility:var(--popover-visibility);width:var(--popover-width)}
|
|
1
|
+
.Popover{left:var(--popover-left);pointer-events:var(--popover-pointer-events);position:absolute;top:var(--popover-top);visibility:var(--popover-visibility);width:var(--popover-width)}.Popover_notVisible{left:-100vw;pointer-events:none;position:absolute;top:-100vh;visibility:hidden}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import './Popover.css';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { ClickOutsideHandler } from
|
|
4
|
-
import { PropsWithJsxAttributes } from
|
|
5
|
-
import { usePopoverReposition } from './usePopoverReposition';
|
|
6
|
-
export { usePopoverReposition };
|
|
3
|
+
import { ClickOutsideHandler } from "../../hooks/useClickOutside";
|
|
4
|
+
import { PropsWithJsxAttributes } from "../../utils/types/PropsWithJsxAttributes";
|
|
7
5
|
/**
|
|
8
6
|
* Стороны упорядочены по приоритету:
|
|
9
7
|
* Используется первая сторона, в которую смог вписаться поповер.
|
|
@@ -40,3 +38,4 @@ export declare type Props = PropsWithJsxAttributes<{
|
|
|
40
38
|
onSetDirection?: (direction: Direction) => void;
|
|
41
39
|
} & PositioningProps>;
|
|
42
40
|
export declare const Popover: React.ForwardRefExoticComponent<Pick<Props, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "direction" | "offset" | "position" | "arrowOffset" | "possibleDirections" | "spareDirection" | "isInteractive" | "onClickOutside" | "onSetDirection" | "anchorRef" | "equalAnchorWidth"> & React.RefAttributes<HTMLDivElement>>;
|
|
41
|
+
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var _excluded=["children","direction","offset","arrowOffset","possibleDirections","isInteractive","onClickOutside","spareDirection","style","className","position","anchorRef","equalAnchorWidth","onSetDirection"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./Popover.css";import React,{forwardRef,useEffect,useLayoutEffect,useMemo}from"react";import{useClickOutside}from"../../hooks/useClickOutside
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var _excluded=["children","direction","offset","arrowOffset","possibleDirections","isInteractive","onClickOutside","spareDirection","style","className","position","anchorRef","equalAnchorWidth","onSetDirection"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./Popover.css";import React,{forwardRef,useEffect,useLayoutEffect,useMemo}from"react";import{PortalWithTheme,usePortalContext}from"../PortalWithTheme";import{useTheme}from"../Theme/Theme";import{useClickOutside}from"../../hooks/useClickOutside";import{useComponentSize}from"../../hooks/useComponentSize";import{useForkRef}from"../../hooks/useForkRef";import{cn}from"../../utils/bem";import{isRenderProp}from"../../utils/isRenderProp";import{isNumber,isString}from"../../utils/type-guards";import{getComputedPositionAndDirection}from"./helpers";import{usePopoverReposition}from"./usePopoverReposition";export var directionsStartCenter=["downCenter","upCenter","downRight","downLeft","upRight","upLeft","leftUp","leftCenter","leftDown","rightUp","rightCenter","rightDown"];export var directionsStartEdge=["downStartLeft","upStartLeft","downStartRight","upStartRight","leftStartUp","leftStartDown","rightStartUp","rightStartDown"];export var popoverPropOffset=["3xs","2xs","xs","s","m","l","xl","2xl","3xl","4xl","5xl","6xl"];export var directions=[].concat(directionsStartCenter,directionsStartEdge);var getOffset=function(a,b){if(isNumber(b))return b;if(isString(b)&&a.current){var g=getComputedStyle(a.current).getPropertyValue("--space-".concat(b));if(g&&/px$/.test(g))return+g.slice(0,g.length-2);if(g&&/rem$/.test(g)){var c=parseFloat(getComputedStyle(document.documentElement).fontSize),d=+g.slice(0,g.length-3);return c*d}if(g&&/em$/.test(g)){var e=parseFloat(getComputedStyle(a.current).fontSize),f=+g.slice(0,g.length-2);return e*f}return 0}return 0},ContextConsumer=function(a){var b=a.onClickOutside,c=a.children,d=a.ignoreClicksInsideRefs,e=usePortalContext(),f=e.refs;return useClickOutside({isActive:!!b,ignoreClicksInsideRefs:[].concat(_toConsumableArray(d||[]),_toConsumableArray(f||[])),handler:b}),c},cnPopover=cn("Popover");export var Popover=forwardRef(function(a,b){var c,d=a.children,e=a.direction,f=void 0===e?"upCenter":e,g=a.offset,h=void 0===g?0:g,i=a.arrowOffset,j=a.possibleDirections,k=void 0===j?directions:j,l=a.isInteractive,m=a.onClickOutside,n=a.spareDirection,o=void 0===n?"downStartLeft":n,p=a.style,q=a.className,r=a.position,s=a.anchorRef,t=a.equalAnchorWidth,u=a.onSetDirection,v=_objectWithoutProperties(a,_excluded),w=React.useRef(null),x=useTheme(),y=x.theme,z=React.useState(),A=_slicedToArray(z,2),B=A[0],C=A[1],D=useComponentSize(w),E=D.width,F=D.height,G=useComponentSize(s||{current:null}),H=React.useRef(null),I=React.useState([]),J=_slicedToArray(I,2),K=J[0],L=J[1],M=function(){L(function(a){return a.length?[]:a}),H.current=null},N=function(){var a;return C(null===s||void 0===s||null===(a=s.current)||void 0===a?void 0:a.getBoundingClientRect())},O=useMemo(function(){return getOffset(w,h)},[h,!!w.current]),P=getComputedPositionAndDirection({contentSize:{width:E,height:F},viewportSize:{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight},arrowOffset:i,offset:O,direction:f,possibleDirections:k,bannedDirections:K,position:B?{x:B.left,y:B.top}:r,anchorSize:G,spareDirection:o}),Q=P.position,R=P.direction;useEffect(function(){return null===u||void 0===u?void 0:u(R)},[R]),useEffect(N,[G]),usePopoverReposition({isActive:!0,scrollAnchorRef:s||{current:null},onRequestReposition:function onRequestReposition(){M(),N()}}),useLayoutEffect(function(){H.current!==R&&(H.current&&!K.includes(H.current)&&!K.includes(R)&&R!==o&&L(function(a){return H.current?[].concat(_toConsumableArray(a),[H.current]):a}),H.current=R)},[R]),useLayoutEffect(M,[a]);var S=!Q||!F||!E;return React.createElement(PortalWithTheme,Object.assign({},v,{preset:y,className:cnPopover({direction:R,notVisible:S},[q]),container:window.document.body,ref:useForkRef([w,b]),style:_objectSpread(_objectSpread({},p),S?{}:(c={},_defineProperty(c,"--popover-top","".concat(((null===Q||void 0===Q?void 0:Q.y)||0)+window.scrollY,"px")),_defineProperty(c,"--popover-left","".concat(((null===Q||void 0===Q?void 0:Q.x)||0)+window.scrollX,"px")),_defineProperty(c,"--popover-width",t?"".concat(G.width,"px"):void 0),_defineProperty(c,"--popover-pointer-events",!(void 0!==l)||l?void 0:"none"),_defineProperty(c,"--popover-visibility",Q?void 0:"hidden"),c))}),React.createElement(ContextConsumer,{onClickOutside:m,ignoreClicksInsideRefs:[w,s||{current:null}]},isRenderProp(d)?d(R):d))});
|
|
2
2
|
//# sourceMappingURL=Popover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","names":["React","forwardRef","useEffect","useLayoutEffect","useMemo","useClickOutside","useComponentSize","useForkRef","cn","isNumber","isString","PortalWithTheme","usePortalContext","useTheme","getComputedPositionAndDirection","usePopoverReposition","directionsStartCenter","directionsStartEdge","popoverPropOffset","directions","getOffset","ref","propOffset","current","cssVar","getComputedStyle","getPropertyValue","test","slice","length","fontSize","parseFloat","document","documentElement","rem","em","isRenderProp","children","ContextConsumer","onClickOutside","ignoreClicksInsideRefs","refs","isActive","handler","cnPopover","Popover","props","componentRef","direction","passedDirection","offset","arrowOffset","possibleDirections","isInteractive","spareDirection","style","className","passedPosition","position","anchorRef","equalAnchorWidth","onSetDirection","otherProps","useRef","theme","useState","anchorClientRect","setAnchorClientRect","width","height","anchorSize","previousDirectionRef","bannedDirections","setBannedDirections","resetBannedDirections","state","updateAnchorClientRect","getBoundingClientRect","contentSize","viewportSize","clientWidth","clientHeight","x","left","y","top","scrollAnchorRef","onRequestReposition","includes","window","body","scrollY","scrollX"],"sources":["../../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import './Popover.css';\n\nimport React, { forwardRef, useEffect, useLayoutEffect, useMemo } from 'react';\n\nimport {\n ClickOutsideHandler,\n useClickOutside,\n} from '../../hooks/useClickOutside/useClickOutside';\nimport { useComponentSize } from '../../hooks/useComponentSize/useComponentSize';\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { cn } from '../../utils/bem';\nimport { isNumber, isString } from '../../utils/type-guards';\nimport { PropsWithJsxAttributes } from '../../utils/types/PropsWithJsxAttributes';\nimport {\n PortalWithTheme,\n usePortalContext,\n} from '../PortalWithTheme/PortalWithTheme';\nimport { useTheme } from '../Theme/Theme';\nimport { getComputedPositionAndDirection } from './helpers';\nimport { usePopoverReposition } from './usePopoverReposition';\n\nexport { usePopoverReposition };\n\n/**\n * Стороны упорядочены по приоритету:\n * Используется первая сторона, в которую смог вписаться поповер.\n */\nexport const directionsStartCenter = [\n 'downCenter',\n 'upCenter',\n\n 'downRight',\n 'downLeft',\n 'upRight',\n 'upLeft',\n\n 'leftUp',\n 'leftCenter',\n 'leftDown',\n\n 'rightUp',\n 'rightCenter',\n 'rightDown',\n] as const;\n\nexport const directionsStartEdge = [\n 'downStartLeft',\n 'upStartLeft',\n\n 'downStartRight',\n 'upStartRight',\n\n 'leftStartUp',\n 'leftStartDown',\n\n 'rightStartUp',\n 'rightStartDown',\n] as const;\n\nexport const popoverPropOffset = [\n '3xs',\n '2xs',\n 'xs',\n 's',\n 'm',\n 'l',\n 'xl',\n '2xl',\n '3xl',\n '4xl',\n '5xl',\n '6xl',\n] as const;\nexport type PopoverPropOffset = typeof popoverPropOffset[number] | number;\n\nexport const directions = [...directionsStartCenter, ...directionsStartEdge];\n\nexport type Direction = typeof directions[number];\n\nexport type Position = { x: number; y: number } | undefined;\n\nexport type PositioningProps =\n | {\n anchorRef: React.RefObject<HTMLElement>;\n equalAnchorWidth?: boolean;\n position?: never;\n }\n | {\n anchorRef?: never;\n equalAnchorWidth?: never;\n position: Position;\n };\n\ntype ChildrenRenderProp = (direction: Direction) => React.ReactNode;\n\nexport type Props = PropsWithJsxAttributes<\n {\n direction?: Direction;\n spareDirection?: Direction;\n offset?: PopoverPropOffset;\n arrowOffset?: number;\n possibleDirections?: readonly Direction[];\n isInteractive?: boolean;\n children: React.ReactNode | ChildrenRenderProp;\n onClickOutside?: ClickOutsideHandler;\n onSetDirection?: (direction: Direction) => void;\n } & PositioningProps\n>;\n\nconst getOffset = (\n ref: React.RefObject<HTMLDivElement>,\n propOffset: PopoverPropOffset,\n) => {\n if (isNumber(propOffset)) {\n return propOffset;\n }\n\n if (isString(propOffset) && ref.current) {\n const cssVar = getComputedStyle(ref.current).getPropertyValue(\n `--space-${propOffset}`,\n );\n\n if (cssVar && /px$/.test(cssVar)) {\n return Number(cssVar.slice(0, cssVar.length - 2));\n }\n\n if (cssVar && /rem$/.test(cssVar)) {\n const fontSize = parseFloat(\n getComputedStyle(document.documentElement).fontSize,\n );\n const rem = Number(cssVar.slice(0, cssVar.length - 3));\n\n return fontSize * rem;\n }\n\n if (cssVar && /em$/.test(cssVar)) {\n const fontSize = parseFloat(getComputedStyle(ref.current).fontSize);\n const em = Number(cssVar.slice(0, cssVar.length - 2));\n\n return fontSize * em;\n }\n\n return 0;\n }\n\n return 0;\n};\n\nconst isRenderProp = (\n children: React.ReactNode | ChildrenRenderProp,\n): children is ChildrenRenderProp => typeof children === 'function';\n\n/**\n * Подписчик на PortalWithThemeProvider\n * получает рефы всех вложенных порталов в модалку\n * для дальнейшего исключения их из useClickOutside\n */\nconst ContextConsumer: React.FC<{\n onClickOutside?: (event: MouseEvent) => void;\n ignoreClicksInsideRefs?: ReadonlyArray<React.RefObject<HTMLElement>>;\n children: React.ReactNode;\n}> = ({ onClickOutside, children, ignoreClicksInsideRefs }) => {\n const { refs } = usePortalContext();\n\n useClickOutside({\n isActive: !!onClickOutside,\n ignoreClicksInsideRefs: [\n ...(ignoreClicksInsideRefs || []),\n ...(refs || []),\n ],\n handler: onClickOutside,\n });\n\n return children as React.ReactElement;\n};\n\nconst cnPopover = cn('Popover');\n\nexport const Popover = forwardRef<HTMLDivElement, Props>(\n (props, componentRef) => {\n const {\n children,\n direction: passedDirection = 'upCenter',\n offset: propOffset = 0,\n arrowOffset,\n possibleDirections = directions,\n isInteractive = true,\n onClickOutside,\n spareDirection = 'downStartLeft',\n style,\n className,\n position: passedPosition,\n anchorRef,\n equalAnchorWidth,\n onSetDirection,\n ...otherProps\n } = props;\n\n const ref = React.useRef<HTMLDivElement>(null);\n const { theme } = useTheme();\n\n const [anchorClientRect, setAnchorClientRect] = React.useState<\n DOMRect | undefined\n >();\n const { width, height } = useComponentSize(ref);\n const anchorSize = useComponentSize(anchorRef || { current: null });\n const previousDirectionRef = React.useRef<Direction | null>(null);\n const [bannedDirections, setBannedDirections] = React.useState<\n readonly Direction[]\n >([]);\n\n const resetBannedDirections = () => {\n setBannedDirections((state) => (state.length ? [] : state));\n previousDirectionRef.current = null;\n };\n\n const updateAnchorClientRect = () =>\n setAnchorClientRect(anchorRef?.current?.getBoundingClientRect());\n\n const offset = useMemo(\n () => getOffset(ref, propOffset),\n [propOffset, Boolean(ref.current)],\n );\n\n const { position, direction } = getComputedPositionAndDirection({\n contentSize: { width, height },\n viewportSize: {\n // Размер вьюпорта без скроллбаров\n width: document.documentElement.clientWidth,\n height: document.documentElement.clientHeight,\n },\n arrowOffset,\n offset,\n direction: passedDirection,\n possibleDirections,\n bannedDirections,\n position: anchorClientRect\n ? { x: anchorClientRect.left, y: anchorClientRect.top }\n : passedPosition,\n anchorSize,\n spareDirection,\n });\n\n useLayoutEffect(() => onSetDirection?.(direction), [direction]);\n\n useEffect(updateAnchorClientRect, [anchorSize]);\n\n usePopoverReposition({\n isActive: true,\n scrollAnchorRef: anchorRef || { current: null },\n onRequestReposition: () => {\n resetBannedDirections();\n updateAnchorClientRect();\n },\n });\n\n /**\n * Может возникнуть ситуация, когда перерасчет поповера всегда будет выдавать 2 направления\n * и бесконечно зацикливать себя. Для избежания таких кейсов мы запоминаем стороны,\n * которые не подошли, чтобы не возвращаться к ним и предотвратить бесконечный ререндер.\n * См. PopoverBannedPositionsStory\n */\n\n useLayoutEffect(() => {\n if (previousDirectionRef.current !== direction) {\n if (\n previousDirectionRef.current &&\n !bannedDirections.includes(previousDirectionRef.current) &&\n !bannedDirections.includes(direction) &&\n direction !== spareDirection\n ) {\n setBannedDirections((state) =>\n previousDirectionRef.current\n ? [...state, previousDirectionRef.current]\n : state,\n );\n }\n previousDirectionRef.current = direction;\n }\n }, [direction]);\n\n // Сбрасываем при любом изменении пропсов, чтобы заново начать перебор направлений\n // Главное не сбрасывать при изменении размеров поповера, т.к. именно оно может вызвать бесконечный перебор\n\n useLayoutEffect(resetBannedDirections, [props]);\n\n return (\n <PortalWithTheme\n {...otherProps}\n preset={theme}\n className={cnPopover({ direction }, [className])}\n container={window.document.body}\n ref={useForkRef([ref, componentRef])}\n style={{\n ...style,\n ['--popover-top' as string]: `${\n (position?.y || 0) + window.scrollY\n }px`,\n ['--popover-left' as string]: `${\n (position?.x || 0) + window.scrollX\n }px`,\n [`--popover-width` as string]: equalAnchorWidth\n ? `${anchorSize.width}px`\n : undefined,\n [`--popover-pointer-events` as string]: isInteractive\n ? undefined\n : 'none',\n [`--popover-visibility` as string]: position ? undefined : 'hidden',\n }}\n >\n <ContextConsumer\n onClickOutside={onClickOutside}\n ignoreClicksInsideRefs={[ref, anchorRef || { current: null }]}\n >\n {isRenderProp(children) ? children(direction) : children}\n </ContextConsumer>\n </PortalWithTheme>\n );\n },\n);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Popover.js","names":["React","forwardRef","useEffect","useLayoutEffect","useMemo","PortalWithTheme","usePortalContext","useTheme","useClickOutside","useComponentSize","useForkRef","cn","isRenderProp","isNumber","isString","getComputedPositionAndDirection","usePopoverReposition","directionsStartCenter","directionsStartEdge","popoverPropOffset","directions","getOffset","ref","propOffset","current","cssVar","getComputedStyle","getPropertyValue","test","slice","length","fontSize","parseFloat","document","documentElement","rem","em","ContextConsumer","onClickOutside","children","ignoreClicksInsideRefs","refs","isActive","handler","cnPopover","Popover","props","componentRef","direction","passedDirection","offset","arrowOffset","possibleDirections","isInteractive","spareDirection","style","className","passedPosition","position","anchorRef","equalAnchorWidth","onSetDirection","otherProps","useRef","theme","useState","anchorClientRect","setAnchorClientRect","width","height","anchorSize","previousDirectionRef","bannedDirections","setBannedDirections","resetBannedDirections","state","updateAnchorClientRect","getBoundingClientRect","contentSize","viewportSize","clientWidth","clientHeight","x","left","y","top","scrollAnchorRef","onRequestReposition","includes","notVisible","window","body","scrollY","scrollX"],"sources":["../../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import './Popover.css';\n\nimport React, { forwardRef, useEffect, useLayoutEffect, useMemo } from 'react';\n\nimport {\n PortalWithTheme,\n usePortalContext,\n} from '##/components/PortalWithTheme';\nimport { useTheme } from '##/components/Theme/Theme';\nimport { ClickOutsideHandler, useClickOutside } from '##/hooks/useClickOutside';\nimport { useComponentSize } from '##/hooks/useComponentSize';\nimport { useForkRef } from '##/hooks/useForkRef';\nimport { cn } from '##/utils/bem';\nimport { isRenderProp } from '##/utils/isRenderProp';\nimport { isNumber, isString } from '##/utils/type-guards';\nimport { PropsWithJsxAttributes } from '##/utils/types/PropsWithJsxAttributes';\n\nimport { getComputedPositionAndDirection } from './helpers';\nimport { usePopoverReposition } from './usePopoverReposition';\n\n/**\n * Стороны упорядочены по приоритету:\n * Используется первая сторона, в которую смог вписаться поповер.\n */\nexport const directionsStartCenter = [\n 'downCenter',\n 'upCenter',\n\n 'downRight',\n 'downLeft',\n 'upRight',\n 'upLeft',\n\n 'leftUp',\n 'leftCenter',\n 'leftDown',\n\n 'rightUp',\n 'rightCenter',\n 'rightDown',\n] as const;\n\nexport const directionsStartEdge = [\n 'downStartLeft',\n 'upStartLeft',\n\n 'downStartRight',\n 'upStartRight',\n\n 'leftStartUp',\n 'leftStartDown',\n\n 'rightStartUp',\n 'rightStartDown',\n] as const;\n\nexport const popoverPropOffset = [\n '3xs',\n '2xs',\n 'xs',\n 's',\n 'm',\n 'l',\n 'xl',\n '2xl',\n '3xl',\n '4xl',\n '5xl',\n '6xl',\n] as const;\nexport type PopoverPropOffset = typeof popoverPropOffset[number] | number;\n\nexport const directions = [...directionsStartCenter, ...directionsStartEdge];\n\nexport type Direction = typeof directions[number];\n\nexport type Position = { x: number; y: number } | undefined;\n\nexport type PositioningProps =\n | {\n anchorRef: React.RefObject<HTMLElement>;\n equalAnchorWidth?: boolean;\n position?: never;\n }\n | {\n anchorRef?: never;\n equalAnchorWidth?: never;\n position: Position;\n };\n\ntype ChildrenRenderProp = (direction: Direction) => React.ReactNode;\n\nexport type Props = PropsWithJsxAttributes<\n {\n direction?: Direction;\n spareDirection?: Direction;\n offset?: PopoverPropOffset;\n arrowOffset?: number;\n possibleDirections?: readonly Direction[];\n isInteractive?: boolean;\n children: React.ReactNode | ChildrenRenderProp;\n onClickOutside?: ClickOutsideHandler;\n onSetDirection?: (direction: Direction) => void;\n } & PositioningProps\n>;\n\nconst getOffset = (\n ref: React.RefObject<HTMLDivElement>,\n propOffset: PopoverPropOffset,\n) => {\n if (isNumber(propOffset)) {\n return propOffset;\n }\n\n if (isString(propOffset) && ref.current) {\n const cssVar = getComputedStyle(ref.current).getPropertyValue(\n `--space-${propOffset}`,\n );\n\n if (cssVar && /px$/.test(cssVar)) {\n return Number(cssVar.slice(0, cssVar.length - 2));\n }\n\n if (cssVar && /rem$/.test(cssVar)) {\n const fontSize = parseFloat(\n getComputedStyle(document.documentElement).fontSize,\n );\n const rem = Number(cssVar.slice(0, cssVar.length - 3));\n\n return fontSize * rem;\n }\n\n if (cssVar && /em$/.test(cssVar)) {\n const fontSize = parseFloat(getComputedStyle(ref.current).fontSize);\n const em = Number(cssVar.slice(0, cssVar.length - 2));\n\n return fontSize * em;\n }\n\n return 0;\n }\n\n return 0;\n};\n\n/**\n * Подписчик на PortalWithThemeProvider\n * получает рефы всех вложенных порталов в модалку\n * для дальнейшего исключения их из useClickOutside\n */\nconst ContextConsumer: React.FC<{\n onClickOutside?: (event: MouseEvent) => void;\n ignoreClicksInsideRefs?: ReadonlyArray<React.RefObject<HTMLElement>>;\n children: React.ReactNode;\n}> = ({ onClickOutside, children, ignoreClicksInsideRefs }) => {\n const { refs } = usePortalContext();\n\n useClickOutside({\n isActive: !!onClickOutside,\n ignoreClicksInsideRefs: [\n ...(ignoreClicksInsideRefs || []),\n ...(refs || []),\n ],\n handler: onClickOutside,\n });\n\n return children as React.ReactElement;\n};\n\nconst cnPopover = cn('Popover');\n\nexport const Popover = forwardRef<HTMLDivElement, Props>(\n (props, componentRef) => {\n const {\n children,\n direction: passedDirection = 'upCenter',\n offset: propOffset = 0,\n arrowOffset,\n possibleDirections = directions,\n isInteractive = true,\n onClickOutside,\n spareDirection = 'downStartLeft',\n style,\n className,\n position: passedPosition,\n anchorRef,\n equalAnchorWidth,\n onSetDirection,\n ...otherProps\n } = props;\n\n const ref = React.useRef<HTMLDivElement>(null);\n const { theme } = useTheme();\n\n const [anchorClientRect, setAnchorClientRect] = React.useState<\n DOMRect | undefined\n >();\n const { width, height } = useComponentSize(ref);\n const anchorSize = useComponentSize(anchorRef || { current: null });\n const previousDirectionRef = React.useRef<Direction | null>(null);\n const [bannedDirections, setBannedDirections] = React.useState<\n readonly Direction[]\n >([]);\n\n const resetBannedDirections = () => {\n setBannedDirections((state) => (state.length ? [] : state));\n previousDirectionRef.current = null;\n };\n\n const updateAnchorClientRect = () =>\n setAnchorClientRect(anchorRef?.current?.getBoundingClientRect());\n\n const offset = useMemo(\n () => getOffset(ref, propOffset),\n [propOffset, Boolean(ref.current)],\n );\n\n const { position, direction } = getComputedPositionAndDirection({\n contentSize: { width, height },\n viewportSize: {\n // Размер вьюпорта без скроллбаров\n width: document.documentElement.clientWidth,\n height: document.documentElement.clientHeight,\n },\n arrowOffset,\n offset,\n direction: passedDirection,\n possibleDirections,\n bannedDirections,\n position: anchorClientRect\n ? { x: anchorClientRect.left, y: anchorClientRect.top }\n : passedPosition,\n anchorSize,\n spareDirection,\n });\n\n useEffect(() => onSetDirection?.(direction), [direction]);\n\n useEffect(updateAnchorClientRect, [anchorSize]);\n\n usePopoverReposition({\n isActive: true,\n scrollAnchorRef: anchorRef || { current: null },\n onRequestReposition: () => {\n resetBannedDirections();\n updateAnchorClientRect();\n },\n });\n\n /**\n * Может возникнуть ситуация, когда перерасчет поповера всегда будет выдавать 2 направления\n * и бесконечно зацикливать себя. Для избежания таких кейсов мы запоминаем стороны,\n * которые не подошли, чтобы не возвращаться к ним и предотвратить бесконечный ререндер.\n * См. PopoverBannedPositionsStory\n */\n\n useLayoutEffect(() => {\n if (previousDirectionRef.current !== direction) {\n if (\n previousDirectionRef.current &&\n !bannedDirections.includes(previousDirectionRef.current) &&\n !bannedDirections.includes(direction) &&\n direction !== spareDirection\n ) {\n setBannedDirections((state) =>\n previousDirectionRef.current\n ? [...state, previousDirectionRef.current]\n : state,\n );\n }\n previousDirectionRef.current = direction;\n }\n }, [direction]);\n\n // Сбрасываем при любом изменении пропсов, чтобы заново начать перебор направлений\n // Главное не сбрасывать при изменении размеров поповера, т.к. именно оно может вызвать бесконечный перебор\n\n useLayoutEffect(resetBannedDirections, [props]);\n\n const notVisible = !position || !height || !width;\n\n return (\n <PortalWithTheme\n {...otherProps}\n preset={theme}\n className={cnPopover({ direction, notVisible }, [className])}\n container={window.document.body}\n ref={useForkRef([ref, componentRef])}\n style={{\n ...style,\n ...(notVisible\n ? {}\n : {\n ['--popover-top' as string]: `${\n (position?.y || 0) + window.scrollY\n }px`,\n ['--popover-left' as string]: `${\n (position?.x || 0) + window.scrollX\n }px`,\n [`--popover-width` as string]: equalAnchorWidth\n ? `${anchorSize.width}px`\n : undefined,\n [`--popover-pointer-events` as string]: isInteractive\n ? undefined\n : 'none',\n [`--popover-visibility` as string]: position\n ? undefined\n : 'hidden',\n }),\n }}\n >\n <ContextConsumer\n onClickOutside={onClickOutside}\n ignoreClicksInsideRefs={[ref, anchorRef || { current: null }]}\n >\n {isRenderProp(children) ? children(direction) : children}\n </ContextConsumer>\n </PortalWithTheme>\n );\n },\n);\n"],"mappings":"wlCAAA,sBAEA,MAAOA,MAAP,EAAgBC,UAAhB,CAA4BC,SAA5B,CAAuCC,eAAvC,CAAwDC,OAAxD,KAAuE,OAAvE,CAEA,OACEC,eADF,CAEEC,gBAFF,0BAIA,OAASC,QAAT,sBACA,OAA8BC,eAA9B,mCACA,OAASC,gBAAT,oCACA,OAASC,UAAT,8BACA,OAASC,EAAT,uBACA,OAASC,YAAT,gCACA,OAASC,QAAT,CAAmBC,QAAnB,+BAGA,OAASC,+BAAT,iBACA,OAASC,oBAAT,8BAMA,MAAO,IAAMC,sBAAqB,CAAG,CACnC,YADmC,CAEnC,UAFmC,CAInC,WAJmC,CAKnC,UALmC,CAMnC,SANmC,CAOnC,QAPmC,CASnC,QATmC,CAUnC,YAVmC,CAWnC,UAXmC,CAanC,SAbmC,CAcnC,aAdmC,CAenC,WAfmC,CAA9B,CAkBP,MAAO,IAAMC,oBAAmB,CAAG,CACjC,eADiC,CAEjC,aAFiC,CAIjC,gBAJiC,CAKjC,cALiC,CAOjC,aAPiC,CAQjC,eARiC,CAUjC,cAViC,CAWjC,gBAXiC,CAA5B,CAcP,MAAO,IAAMC,kBAAiB,CAAG,CAC/B,KAD+B,CAE/B,KAF+B,CAG/B,IAH+B,CAI/B,GAJ+B,CAK/B,GAL+B,CAM/B,GAN+B,CAO/B,IAP+B,CAQ/B,KAR+B,CAS/B,KAT+B,CAU/B,KAV+B,CAW/B,KAX+B,CAY/B,KAZ+B,CAA1B,CAgBP,MAAO,IAAMC,WAAU,WAAOH,qBAAP,CAAiCC,mBAAjC,CAAhB,C,GAkCDG,UAAS,CAAG,SAChBC,CADgB,CAEhBC,CAFgB,CAGb,CACH,GAAIV,QAAQ,CAACU,CAAD,CAAZ,CACE,MAAOA,EAAP,CAGF,GAAIT,QAAQ,CAACS,CAAD,CAAR,EAAwBD,CAAG,CAACE,OAAhC,CAAyC,CACvC,GAAMC,EAAM,CAAGC,gBAAgB,CAACJ,CAAG,CAACE,OAAL,CAAhB,CAA8BG,gBAA9B,mBACFJ,CADE,EAAf,CAIA,GAAIE,CAAM,EAAI,MAAMG,IAAN,CAAWH,CAAX,CAAd,CACE,OAAcA,CAAM,CAACI,KAAP,CAAa,CAAb,CAAgBJ,CAAM,CAACK,MAAP,CAAgB,CAAhC,CAAd,CAGF,GAAIL,CAAM,EAAI,OAAOG,IAAP,CAAYH,CAAZ,CAAd,CAAmC,IAC3BM,EAAQ,CAAGC,UAAU,CACzBN,gBAAgB,CAACO,QAAQ,CAACC,eAAV,CAAhB,CAA2CH,QADlB,CADM,CAI3BI,CAAG,EAAUV,CAAM,CAACI,KAAP,CAAa,CAAb,CAAgBJ,CAAM,CAACK,MAAP,CAAgB,CAAhC,CAJc,CAMjC,MAAOC,EAAQ,CAAGI,CACnB,CAED,GAAIV,CAAM,EAAI,MAAMG,IAAN,CAAWH,CAAX,CAAd,CAAkC,IAC1BM,EAAQ,CAAGC,UAAU,CAACN,gBAAgB,CAACJ,CAAG,CAACE,OAAL,CAAhB,CAA8BO,QAA/B,CADK,CAE1BK,CAAE,EAAUX,CAAM,CAACI,KAAP,CAAa,CAAb,CAAgBJ,CAAM,CAACK,MAAP,CAAgB,CAAhC,CAFc,CAIhC,MAAOC,EAAQ,CAAGK,CACnB,CAED,MAAO,EACR,CAED,MAAO,EACR,C,CAOKC,eAIJ,CAAG,WAA0D,IAAvDC,EAAuD,GAAvDA,cAAuD,CAAvCC,CAAuC,GAAvCA,QAAuC,CAA7BC,CAA6B,GAA7BA,sBAA6B,GAC5ClC,gBAAgB,EAD4B,CACrDmC,CADqD,GACrDA,IADqD,CAY7D,MATAjC,gBAAe,CAAC,CACdkC,QAAQ,CAAE,CAAC,CAACJ,CADE,CAEdE,sBAAsB,8BAChBA,CAAsB,EAAI,EADV,qBAEhBC,CAAI,EAAI,EAFQ,EAFR,CAMdE,OAAO,CAAEL,CANK,CAAD,CASf,CAAOC,CACR,C,CAEKK,SAAS,CAAGjC,EAAE,CAAC,SAAD,C,CAEpB,MAAO,IAAMkC,QAAO,CAAG5C,UAAU,CAC/B,SAAC6C,CAAD,CAAQC,CAAR,CAAyB,OAErBR,CAFqB,CAiBnBO,CAjBmB,CAErBP,QAFqB,GAiBnBO,CAjBmB,CAGrBE,SAHqB,CAGVC,CAHU,YAGQ,UAHR,KAiBnBH,CAjBmB,CAIrBI,MAJqB,CAIb3B,CAJa,YAIA,CAJA,GAKrB4B,CALqB,CAiBnBL,CAjBmB,CAKrBK,WALqB,GAiBnBL,CAjBmB,CAMrBM,kBANqB,CAMrBA,CANqB,YAMAhC,UANA,KAiBnB0B,CAjBmB,CAOrBO,aAPqB,CAQrBf,CARqB,CAiBnBQ,CAjBmB,CAQrBR,cARqB,GAiBnBQ,CAjBmB,CASrBQ,cATqB,CASrBA,CATqB,YASJ,eATI,GAUrBC,CAVqB,CAiBnBT,CAjBmB,CAUrBS,KAVqB,CAWrBC,CAXqB,CAiBnBV,CAjBmB,CAWrBU,SAXqB,CAYXC,CAZW,CAiBnBX,CAjBmB,CAYrBY,QAZqB,CAarBC,CAbqB,CAiBnBb,CAjBmB,CAarBa,SAbqB,CAcrBC,CAdqB,CAiBnBd,CAjBmB,CAcrBc,gBAdqB,CAerBC,CAfqB,CAiBnBf,CAjBmB,CAerBe,cAfqB,CAgBlBC,CAhBkB,0BAiBnBhB,CAjBmB,YAmBjBxB,CAAG,CAAGtB,KAAK,CAAC+D,MAAN,CAA6B,IAA7B,CAnBW,GAoBLxD,QAAQ,EApBH,CAoBfyD,CApBe,GAoBfA,KApBe,GAsByBhE,KAAK,CAACiE,QAAN,EAtBzB,uBAsBhBC,CAtBgB,MAsBEC,CAtBF,QAyBG1D,gBAAgB,CAACa,CAAD,CAzBnB,CAyBf8C,CAzBe,GAyBfA,KAzBe,CAyBRC,CAzBQ,GAyBRA,MAzBQ,CA0BjBC,CAAU,CAAG7D,gBAAgB,CAACkD,CAAS,EAAI,CAAEnC,OAAO,CAAE,IAAX,CAAd,CA1BZ,CA2BjB+C,CAAoB,CAAGvE,KAAK,CAAC+D,MAAN,CAA+B,IAA/B,CA3BN,GA4ByB/D,KAAK,CAACiE,QAAN,CAE9C,EAF8C,CA5BzB,uBA4BhBO,CA5BgB,MA4BEC,CA5BF,MAgCjBC,CAAqB,CAAG,UAAM,CAClCD,CAAmB,CAAC,SAACE,CAAD,QAAYA,EAAK,CAAC7C,MAAN,CAAe,EAAf,CAAoB6C,CAAhC,CAAD,CADe,CAElCJ,CAAoB,CAAC/C,OAArB,CAA+B,IAChC,CAnCsB,CAqCjBoD,CAAsB,CAAG,uBAC7BT,EAAmB,QAACR,CAAD,WAACA,CAAD,YAACA,CAAS,CAAEnC,OAAZ,qBAAC,EAAoBqD,qBAApB,EAAD,CADU,CArCR,CAwCjB3B,CAAM,CAAG9C,OAAO,CACpB,iBAAMiB,UAAS,CAACC,CAAD,CAAMC,CAAN,CAAf,CADoB,CAEpB,CAACA,CAAD,GAAqBD,CAAG,CAACE,OAAzB,CAFoB,CAxCC,GA6CST,+BAA+B,CAAC,CAC9D+D,WAAW,CAAE,CAAEV,KAAK,CAALA,CAAF,CAASC,MAAM,CAANA,CAAT,CADiD,CAE9DU,YAAY,CAAE,CAEZX,KAAK,CAAEnC,QAAQ,CAACC,eAAT,CAAyB8C,WAFpB,CAGZX,MAAM,CAAEpC,QAAQ,CAACC,eAAT,CAAyB+C,YAHrB,CAFgD,CAO9D9B,WAAW,CAAXA,CAP8D,CAQ9DD,MAAM,CAANA,CAR8D,CAS9DF,SAAS,CAAEC,CATmD,CAU9DG,kBAAkB,CAAlBA,CAV8D,CAW9DoB,gBAAgB,CAAhBA,CAX8D,CAY9Dd,QAAQ,CAAEQ,CAAgB,CACtB,CAAEgB,CAAC,CAAEhB,CAAgB,CAACiB,IAAtB,CAA4BC,CAAC,CAAElB,CAAgB,CAACmB,GAAhD,CADsB,CAEtB5B,CAd0D,CAe9Da,UAAU,CAAVA,CAf8D,CAgB9DhB,cAAc,CAAdA,CAhB8D,CAAD,CA7CxC,CA6CfI,CA7Ce,GA6CfA,QA7Ce,CA6CLV,CA7CK,GA6CLA,SA7CK,CAgEvB9C,SAAS,CAAC,yBAAM2D,CAAN,WAAMA,CAAN,QAAMA,CAAc,CAAGb,CAAH,CAApB,CAAD,CAAoC,CAACA,CAAD,CAApC,CAhEc,CAkEvB9C,SAAS,CAAC0E,CAAD,CAAyB,CAACN,CAAD,CAAzB,CAlEc,CAoEvBtD,oBAAoB,CAAC,CACnB0B,QAAQ,GADW,CAEnB4C,eAAe,CAAE3B,CAAS,EAAI,CAAEnC,OAAO,CAAE,IAAX,CAFX,CAGnB+D,mBAAmB,CAAE,8BAAM,CACzBb,CAAqB,EADI,CAEzBE,CAAsB,EACvB,CANkB,CAAD,CApEG,CAoFvBzE,eAAe,CAAC,UAAM,CAChBoE,CAAoB,CAAC/C,OAArB,GAAiCwB,CADjB,GAGhBuB,CAAoB,CAAC/C,OAArB,EACA,CAACgD,CAAgB,CAACgB,QAAjB,CAA0BjB,CAAoB,CAAC/C,OAA/C,CADD,EAEA,CAACgD,CAAgB,CAACgB,QAAjB,CAA0BxC,CAA1B,CAFD,EAGAA,CAAS,GAAKM,CANE,EAQhBmB,CAAmB,CAAC,SAACE,CAAD,QAClBJ,EAAoB,CAAC/C,OAArB,8BACQmD,CADR,GACeJ,CAAoB,CAAC/C,OADpC,GAEImD,CAHc,CAAD,CARH,CAclBJ,CAAoB,CAAC/C,OAArB,CAA+BwB,CAdb,CAgBrB,CAhBc,CAgBZ,CAACA,CAAD,CAhBY,CApFQ,CAyGvB7C,eAAe,CAACuE,CAAD,CAAwB,CAAC5B,CAAD,CAAxB,CAzGQ,CA2GvB,GAAM2C,EAAU,CAAG,CAAC/B,CAAD,EAAa,CAACW,CAAd,EAAwB,CAACD,CAA5C,CAEA,MACE,qBAAC,eAAD,kBACMN,CADN,EAEE,MAAM,CAAEE,CAFV,CAGE,SAAS,CAAEpB,SAAS,CAAC,CAAEI,SAAS,CAATA,CAAF,CAAayC,UAAU,CAAVA,CAAb,CAAD,CAA4B,CAACjC,CAAD,CAA5B,CAHtB,CAIE,SAAS,CAAEkC,MAAM,CAACzD,QAAP,CAAgB0D,IAJ7B,CAKE,GAAG,CAAEjF,UAAU,CAAC,CAACY,CAAD,CAAMyB,CAAN,CAAD,CALjB,CAME,KAAK,gCACAQ,CADA,EAECkC,CAAU,CACV,EADU,yBAGP,eAHO,WAIN,CAAC,QAAA/B,CAAQ,WAARA,CAAA,QAAAA,CAAQ,CAAE0B,CAAV,GAAe,CAAhB,EAAqBM,MAAM,CAACE,OAJtB,0BAMP,gBANO,WAON,CAAC,QAAAlC,CAAQ,WAARA,CAAA,QAAAA,CAAQ,CAAEwB,CAAV,GAAe,CAAhB,EAAqBQ,MAAM,CAACG,OAPtB,4CASuBjC,CAAgB,WACxCU,CAAU,CAACF,KAD6B,aATvC,+CAYgC,wBAEpC,MAdI,2CAe4BV,CAAQ,QAExC,QAjBI,IAFX,CANP,GA6BE,oBAAC,eAAD,EACE,cAAc,CAAEpB,CADlB,CAEE,sBAAsB,CAAE,CAAChB,CAAD,CAAMqC,CAAS,EAAI,CAAEnC,OAAO,CAAE,IAAX,CAAnB,CAF1B,EAIGZ,YAAY,CAAC2B,CAAD,CAAZ,CAAyBA,CAAQ,CAACS,CAAD,CAAjC,CAA+CT,CAJlD,CA7BF,CAqCH,CApJ8B,CAA1B"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export*from"./Popover";
|
|
1
|
+
export*from"./Popover";export{usePopoverReposition}from"./usePopoverReposition";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/Popover/index.ts"],"sourcesContent":["export * from './Popover';\n"],"mappings":"AAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["usePopoverReposition"],"sources":["../../../../../src/components/Popover/index.ts"],"sourcesContent":["export * from './Popover';\nexport { usePopoverReposition } from './usePopoverReposition';\n"],"mappings":"AAAA,uBACA,OAASA,oBAAT"}
|
package/__internal__/src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["lines","activeStepIndex","size","direction"];import"./ProgressStepBarLine.css";import React from"react";import{cn}from"../../../utils/bem";var cnProgressStepBarLine=cn("ProgressStepBarLine"),getActiveLineSize=function(a,b){var c=b.map(function(a){var b=a.size;return b}),d=a?Math.max(a,0):void 0;return"number"!=typeof d||0===d?0:c.splice(0,d).reduce(function(c,a){return c+a})},getPathParams=function(a,b){var c=[],d=0;return a.forEach(function(a){var e=a.size,f=a.status;c.push({width:"horizontal"===b?e:"var(--progress-step-bar-line-width)",height:"horizontal"===b?"var(--progress-step-bar-line-height)":e,x:"horizontal"===b?d:0,y:"horizontal"===b?0:d,fill:"var(--color-bg-".concat(f||"normal",")")}),d+=e}),c};export var ProgressStepBarLine=function(a){var b,c=a.lines,d=a.activeStepIndex,e=a.size,f=a.direction,g=_objectWithoutProperties(a,_excluded),h=c.map(function(a){var b=a.size;return b}).reduce(function(c,a){return c+a},0),i=getActiveLineSize(d,c);return React.createElement("div",Object.assign({},g,{className:cnProgressStepBarLine({size:e,direction:f}),style:(b={},_defineProperty(b,"--line-size","".concat(h,"px")),_defineProperty(b,"--line-active-size","".concat(i,"px")),b)}),React.createElement("svg",{className:cnProgressStepBarLine("Svg"),width:"100%",height:"100%",xmlns:"http://www.w3.org/2000/svg"},getPathParams(c,f).map(function(a,b){var c=a.fill,d=a.height,e=a.width,f=a.x,g=a.y;return React.createElement("rect",{key:b,style:{height:d,width:e,fill:c},x:f,y:g})})))};
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["lines","activeStepIndex","size","direction"];import"./ProgressStepBarLine.css";import React from"react";import{cn}from"../../../utils/bem";var cnProgressStepBarLine=cn("ProgressStepBarLine"),getActiveLineSize=function(a,b){var c=b.map(function(a){var b=a.size;return b}),d=a?Math.max(a,0):void 0;return"number"!=typeof d||0===d?0:c.splice(0,d).reduce(function(c,a){return c+a},0)},getPathParams=function(a,b){var c=[],d=0;return a.forEach(function(a){var e=a.size,f=a.status;c.push({width:"horizontal"===b?e:"var(--progress-step-bar-line-width)",height:"horizontal"===b?"var(--progress-step-bar-line-height)":e,x:"horizontal"===b?d:0,y:"horizontal"===b?0:d,fill:"var(--color-bg-".concat(f||"normal",")")}),d+=e}),c};export var ProgressStepBarLine=function(a){var b,c=a.lines,d=a.activeStepIndex,e=a.size,f=a.direction,g=_objectWithoutProperties(a,_excluded),h=c.map(function(a){var b=a.size;return b}).reduce(function(c,a){return c+a},0),i=getActiveLineSize(d,c);return React.createElement("div",Object.assign({},g,{className:cnProgressStepBarLine({size:e,direction:f}),style:(b={},_defineProperty(b,"--line-size","".concat(h,"px")),_defineProperty(b,"--line-active-size","".concat(i,"px")),b)}),React.createElement("svg",{className:cnProgressStepBarLine("Svg"),width:"100%",height:"100%",xmlns:"http://www.w3.org/2000/svg"},getPathParams(c,f).map(function(a,b){var c=a.fill,d=a.height,e=a.width,f=a.x,g=a.y;return React.createElement("rect",{key:b,style:{height:d,width:e,fill:c},x:f,y:g})})))};
|
|
2
2
|
//# sourceMappingURL=ProgressStepBarLine.js.map
|
package/__internal__/src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressStepBarLine.js","names":["React","cn","cnProgressStepBarLine","getActiveLineSize","activeStepIndex","lines","lineSizes","map","size","active","Math","max","splice","reduce","a","b","getPathParams","direction","paths","width","forEach","status","push","height","x","y","fill","ProgressStepBarLine","props","otherProps","lineSize","activeLineSize","index"],"sources":["../../../../../../src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.tsx"],"sourcesContent":["import './ProgressStepBarLine.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { Line, PropDirection, PropSize } from '../helpers';\n\ntype ProgressStepBarLineProps = {\n lines: Line[];\n size: PropSize;\n direction: PropDirection;\n activeStepIndex?: number;\n};\n\nconst cnProgressStepBarLine = cn('ProgressStepBarLine');\n\nconst getActiveLineSize = (\n activeStepIndex: number | undefined,\n lines: Line[],\n) => {\n const lineSizes = lines.map(({ size }) => size);\n const active = activeStepIndex ? Math.max(activeStepIndex, 0) : undefined;\n if (typeof active !== 'number' || active === 0) {\n return 0;\n }\n\n return lineSizes.splice(0, active).reduce((a, b) => a + b);\n};\n\ntype PathItem = {\n fill: string;\n height: string | number;\n width: string | number;\n x: number;\n y: number;\n};\nconst getPathParams = (lines: Line[], direction: PropDirection) => {\n const paths: PathItem[] = [];\n let width = 0;\n lines.forEach(({ size, status }) => {\n paths.push({\n width:\n direction === 'horizontal'\n ? size\n : 'var(--progress-step-bar-line-width)',\n height:\n direction === 'horizontal'\n ? 'var(--progress-step-bar-line-height)'\n : size,\n x: direction === 'horizontal' ? width : 0,\n y: direction === 'horizontal' ? 0 : width,\n fill: `var(--color-bg-${status || 'normal'})`,\n });\n width += size;\n });\n return paths;\n};\n\nexport const ProgressStepBarLine = (props: ProgressStepBarLineProps) => {\n const { lines, activeStepIndex, size, direction, ...otherProps } = props;\n const lineSize = lines.map(({ size }) => size).reduce((a, b) => a + b, 0);\n const activeLineSize = getActiveLineSize(activeStepIndex, lines);\n\n return (\n <div\n {...otherProps}\n className={cnProgressStepBarLine({ size, direction })}\n style={{\n ['--line-size' as string]: `${lineSize}px`,\n ['--line-active-size' as string]: `${activeLineSize}px`,\n }}\n >\n <svg\n className={cnProgressStepBarLine('Svg')}\n width=\"100%\"\n height=\"100%\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n {getPathParams(lines, direction).map(\n ({ fill, height, width, x, y }, index) => (\n <rect key={index} style={{ height, width, fill }} x={x} y={y} />\n ),\n )}\n </svg>\n </div>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ProgressStepBarLine.js","names":["React","cn","cnProgressStepBarLine","getActiveLineSize","activeStepIndex","lines","lineSizes","map","size","active","Math","max","splice","reduce","a","b","getPathParams","direction","paths","width","forEach","status","push","height","x","y","fill","ProgressStepBarLine","props","otherProps","lineSize","activeLineSize","index"],"sources":["../../../../../../src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.tsx"],"sourcesContent":["import './ProgressStepBarLine.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { Line, PropDirection, PropSize } from '../helpers';\n\ntype ProgressStepBarLineProps = {\n lines: Line[];\n size: PropSize;\n direction: PropDirection;\n activeStepIndex?: number;\n};\n\nconst cnProgressStepBarLine = cn('ProgressStepBarLine');\n\nconst getActiveLineSize = (\n activeStepIndex: number | undefined,\n lines: Line[],\n) => {\n const lineSizes = lines.map(({ size }) => size);\n const active = activeStepIndex ? Math.max(activeStepIndex, 0) : undefined;\n if (typeof active !== 'number' || active === 0) {\n return 0;\n }\n\n return lineSizes.splice(0, active).reduce((a, b) => a + b, 0);\n};\n\ntype PathItem = {\n fill: string;\n height: string | number;\n width: string | number;\n x: number;\n y: number;\n};\nconst getPathParams = (lines: Line[], direction: PropDirection) => {\n const paths: PathItem[] = [];\n let width = 0;\n lines.forEach(({ size, status }) => {\n paths.push({\n width:\n direction === 'horizontal'\n ? size\n : 'var(--progress-step-bar-line-width)',\n height:\n direction === 'horizontal'\n ? 'var(--progress-step-bar-line-height)'\n : size,\n x: direction === 'horizontal' ? width : 0,\n y: direction === 'horizontal' ? 0 : width,\n fill: `var(--color-bg-${status || 'normal'})`,\n });\n width += size;\n });\n return paths;\n};\n\nexport const ProgressStepBarLine = (props: ProgressStepBarLineProps) => {\n const { lines, activeStepIndex, size, direction, ...otherProps } = props;\n const lineSize = lines.map(({ size }) => size).reduce((a, b) => a + b, 0);\n const activeLineSize = getActiveLineSize(activeStepIndex, lines);\n\n return (\n <div\n {...otherProps}\n className={cnProgressStepBarLine({ size, direction })}\n style={{\n ['--line-size' as string]: `${lineSize}px`,\n ['--line-active-size' as string]: `${activeLineSize}px`,\n }}\n >\n <svg\n className={cnProgressStepBarLine('Svg')}\n width=\"100%\"\n height=\"100%\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n {getPathParams(lines, direction).map(\n ({ fill, height, width, x, y }, index) => (\n <rect key={index} style={{ height, width, fill }} x={x} y={y} />\n ),\n )}\n </svg>\n </div>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["hovered","onHover","value","position","disabled","withTooltip","focused","popoverPosition","buttonRef","handlePress","onKeyPress","tooltipFormatter","buttonLabel","onFocus","tooltipZIndex"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./SliderPoint.css";import React,{useEffect,useRef}from"react";import{useFlag}from"../../../hooks/useFlag/useFlag";import{useForkRef}from"../../../hooks/useForkRef/useForkRef";import{cnMixFocus}from"../../../mixs/MixFocus/MixFocus";import{cn}from"../../../utils/bem";import{generateThemeClassNames,ThemeContext,useTheme}from"../../Theme/Theme";import{Tooltip}from"../../Tooltip/Tooltip";var cnSliderPoint=cn("SliderPoint"),getTooltipPosition=function(a,b){if(a&&b&&b.current){var c=b.current.getBoundingClientRect(),d=c.y,e=c.height;return{x:a.x,y:d-e+
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["hovered","onHover","value","position","disabled","withTooltip","focused","popoverPosition","buttonRef","handlePress","onKeyPress","tooltipFormatter","buttonLabel","onFocus","tooltipZIndex"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./SliderPoint.css";import React,{useEffect,useRef}from"react";import{useFlag}from"../../../hooks/useFlag/useFlag";import{useForkRef}from"../../../hooks/useForkRef/useForkRef";import{cnMixFocus}from"../../../mixs/MixFocus/MixFocus";import{cn}from"../../../utils/bem";import{generateThemeClassNames,ThemeContext,useTheme}from"../../Theme/Theme";import{Tooltip}from"../../Tooltip/Tooltip";var cnSliderPoint=cn("SliderPoint"),getTooltipPosition=function(a,b){if(a&&b&&b.current){var c=b.current.getBoundingClientRect(),d=c.y,e=c.height;return{x:Math.round(a.x),y:Math.round(d-e+22)}}return{x:0,y:0}};export var SliderPoint=function(a){var b=a.hovered,c=a.onHover,d=a.value,e=a.position,f=a.disabled,g=a.withTooltip,h=a.focused,i=a.popoverPosition,j=a.buttonRef,k=a.handlePress,l=a.onKeyPress,m=a.tooltipFormatter,n=a.buttonLabel,o=a.onFocus,p=a.tooltipZIndex,q=_objectWithoutProperties(a,_excluded),r=useFlag(!1),s=_slicedToArray(r,2),t=s[0],u=s[1],v=useTheme(),w=v.theme,x=_objectSpread(_objectSpread({},w),{},{color:{primary:w.color.invert,accent:w.color.accent,invert:w.color.primary}}),y=generateThemeClassNames(x),z=function(a){f||(null===o||void 0===o?void 0:o(a,n),u.on())},A=function(a){f||(null===c||void 0===c?void 0:c(a),a&&u.on(),a&&u.on(),!a&&!h&&u.off())},B=useRef(null),C=getTooltipPosition(i,j||B);return useEffect(function(){h?u.on():u.off()},[h]),React.createElement(React.Fragment,null,React.createElement("button",Object.assign({type:"button","aria-label":"".concat(n,"-button"),className:cnSliderPoint({hovered:b,disabled:f},[f?"":cnMixFocus()]),onMouseOver:function onMouseOver(){return A(!0)},onMouseOut:function onMouseOut(){return A(!1)},onMouseDown:function onMouseDown(){return null===k||void 0===k?void 0:k(n)},onTouchStart:function onTouchStart(){return null===k||void 0===k?void 0:k(n)},onKeyDown:function onKeyDown(a){return null===l||void 0===l?void 0:l(a,n)},onFocus:z,onBlur:function handleBlur(a){f||(null===o||void 0===o?void 0:o(a,null),u.off())},onClick:z,ref:useForkRef([j,B]),tabIndex:0,style:_defineProperty({},"--slider-button-left","".concat(e,"%"))},q)),t&&g&&i&&React.createElement(ThemeContext.Provider,{value:{theme:x,themeClassNames:y}},React.createElement(Tooltip,{position:C,className:cnSliderPoint("Tooltip"),direction:"downCenter",possibleDirections:["downCenter","leftDown","rightDown","upCenter"],style:{zIndex:p},offset:8},m?m(d):d)))};
|
|
2
2
|
//# sourceMappingURL=SliderPoint.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderPoint.js","names":["React","useEffect","useRef","useFlag","useForkRef","cnMixFocus","cn","generateThemeClassNames","ThemeContext","useTheme","Tooltip","cnSliderPoint","getTooltipPosition","popoverPosition","buttonRef","current","getBoundingClientRect","y","height","x","SliderPoint","props","hovered","onHover","value","position","disabled","withTooltip","focused","handlePress","onKeyPress","tooltipFormatter","buttonLabel","onFocus","tooltipZIndex","otherProps","tooltipVisible","
|
|
1
|
+
{"version":3,"file":"SliderPoint.js","names":["React","useEffect","useRef","useFlag","useForkRef","cnMixFocus","cn","generateThemeClassNames","ThemeContext","useTheme","Tooltip","cnSliderPoint","getTooltipPosition","popoverPosition","buttonRef","current","getBoundingClientRect","y","height","x","Math","round","SliderPoint","props","hovered","onHover","value","position","disabled","withTooltip","focused","handlePress","onKeyPress","tooltipFormatter","buttonLabel","onFocus","tooltipZIndex","otherProps","tooltipVisible","setTooltipVisible","theme","tooltipTheme","color","primary","invert","accent","tooltipThemeClassNames","handleFocus","e","on","handleMouseAction","enter","off","pointRef","tooltipPosition","handleBlur","themeClassNames","zIndex"],"sources":["../../../../../../src/components/Slider/SliderPoint/SliderPoint.tsx"],"sourcesContent":["import './SliderPoint.css';\n\nimport React, { useEffect, useRef } from 'react';\n\nimport { useFlag } from '../../../hooks/useFlag/useFlag';\nimport { useForkRef } from '../../../hooks/useForkRef/useForkRef';\nimport { cnMixFocus } from '../../../mixs/MixFocus/MixFocus';\nimport { cn } from '../../../utils/bem';\nimport {\n generateThemeClassNames,\n ThemeContext,\n useTheme,\n} from '../../Theme/Theme';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { SliderPointProps, TrackPosition } from '../helper';\n\nconst cnSliderPoint = cn('SliderPoint');\n\nconst getTooltipPosition = (\n popoverPosition?: TrackPosition,\n buttonRef?: React.RefObject<HTMLButtonElement>,\n) => {\n if (popoverPosition && buttonRef && buttonRef.current) {\n const { y, height } = buttonRef.current.getBoundingClientRect();\n return {\n x: Math.round(popoverPosition.x),\n y: Math.round(y - height + 22),\n };\n }\n\n return { x: 0, y: 0 };\n};\nexport const SliderPoint = (props: SliderPointProps) => {\n const {\n hovered,\n onHover,\n value,\n position,\n disabled,\n withTooltip,\n focused,\n popoverPosition,\n buttonRef,\n handlePress,\n onKeyPress,\n tooltipFormatter,\n buttonLabel,\n onFocus,\n tooltipZIndex,\n ...otherProps\n } = props;\n\n const [tooltipVisible, setTooltipVisible] = useFlag(false);\n\n const { theme } = useTheme();\n\n const tooltipTheme = {\n ...theme,\n color: {\n primary: theme.color.invert,\n accent: theme.color.accent,\n invert: theme.color.primary,\n },\n };\n\n const tooltipThemeClassNames = generateThemeClassNames(tooltipTheme);\n\n const handleFocus = (\n e: React.FocusEvent<HTMLButtonElement> | React.MouseEvent,\n ) => {\n if (!disabled) {\n onFocus?.(e, buttonLabel);\n setTooltipVisible.on();\n }\n };\n\n const handleMouseAction = (enter: boolean) => {\n if (!disabled) {\n onHover?.(enter);\n enter && setTooltipVisible.on();\n if (enter) setTooltipVisible.on();\n if (!enter && !focused) setTooltipVisible.off();\n }\n };\n\n const handleBlur = (\n e:\n | React.FocusEvent<HTMLButtonElement>\n | React.MouseEvent<HTMLButtonElement>,\n ) => {\n if (!disabled) {\n onFocus?.(e, null);\n setTooltipVisible.off();\n }\n };\n\n const pointRef = useRef<HTMLButtonElement>(null);\n\n const tooltipPosition = getTooltipPosition(\n popoverPosition,\n buttonRef || pointRef,\n );\n\n useEffect(() => {\n focused ? setTooltipVisible.on() : setTooltipVisible.off();\n }, [focused]);\n\n return (\n <>\n <button\n type=\"button\"\n aria-label={`${buttonLabel}-button`}\n className={cnSliderPoint({ hovered, disabled }, [\n !disabled ? cnMixFocus() : '',\n ])}\n onMouseOver={() => handleMouseAction(true)}\n onMouseOut={() => handleMouseAction(false)}\n onMouseDown={() => handlePress?.(buttonLabel)}\n onTouchStart={() => handlePress?.(buttonLabel)}\n onKeyDown={(e) => onKeyPress?.(e, buttonLabel)}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onClick={handleFocus}\n ref={useForkRef([buttonRef, pointRef])}\n tabIndex={0}\n style={{\n ['--slider-button-left' as string]: `${position}%`,\n }}\n {...otherProps}\n />\n {tooltipVisible && withTooltip && popoverPosition && (\n <ThemeContext.Provider\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value={{\n theme: tooltipTheme,\n themeClassNames: tooltipThemeClassNames,\n }}\n >\n <Tooltip\n position={tooltipPosition}\n className={cnSliderPoint('Tooltip')}\n direction=\"downCenter\"\n possibleDirections={[\n 'downCenter',\n 'leftDown',\n 'rightDown',\n 'upCenter',\n ]}\n style={{ zIndex: tooltipZIndex }}\n offset={8}\n >\n {tooltipFormatter ? tooltipFormatter(value) : value}\n </Tooltip>\n </ThemeContext.Provider>\n )}\n </>\n );\n};\n"],"mappings":"ygCAAA,0BAEA,MAAOA,MAAP,EAAgBC,SAAhB,CAA2BC,MAA3B,KAAyC,OAAzC,CAEA,OAASC,OAAT,sCACA,OAASC,UAAT,4CACA,OAASC,UAAT,uCACA,OAASC,EAAT,0BACA,OACEC,uBADF,CAEEC,YAFF,CAGEC,QAHF,yBAKA,OAASC,OAAT,6B,GAGMC,cAAa,CAAGL,EAAE,CAAC,aAAD,C,CAElBM,kBAAkB,CAAG,SACzBC,CADyB,CAEzBC,CAFyB,CAGtB,CACH,GAAID,CAAe,EAAIC,CAAnB,EAAgCA,CAAS,CAACC,OAA9C,CAAuD,CACrD,MAAsBD,CAAS,CAACC,OAAV,CAAkBC,qBAAlB,EAAtB,CAAQC,CAAR,GAAQA,CAAR,CAAWC,CAAX,GAAWA,MAAX,CACA,MAAO,CACLC,CAAC,CAAEC,IAAI,CAACC,KAAL,CAAWR,CAAe,CAACM,CAA3B,CADE,CAELF,CAAC,CAAEG,IAAI,CAACC,KAAL,CAAWJ,CAAC,CAAGC,CAAJ,CAAa,EAAxB,CAFE,CAIR,CAED,MAAO,CAAEC,CAAC,CAAE,CAAL,CAAQF,CAAC,CAAE,CAAX,CACR,C,CACD,MAAO,IAAMK,YAAW,CAAG,SAACC,CAAD,CAA6B,IAEpDC,EAFoD,CAkBlDD,CAlBkD,CAEpDC,OAFoD,CAGpDC,CAHoD,CAkBlDF,CAlBkD,CAGpDE,OAHoD,CAIpDC,CAJoD,CAkBlDH,CAlBkD,CAIpDG,KAJoD,CAKpDC,CALoD,CAkBlDJ,CAlBkD,CAKpDI,QALoD,CAMpDC,CANoD,CAkBlDL,CAlBkD,CAMpDK,QANoD,CAOpDC,CAPoD,CAkBlDN,CAlBkD,CAOpDM,WAPoD,CAQpDC,CARoD,CAkBlDP,CAlBkD,CAQpDO,OARoD,CASpDjB,CAToD,CAkBlDU,CAlBkD,CASpDV,eAToD,CAUpDC,CAVoD,CAkBlDS,CAlBkD,CAUpDT,SAVoD,CAWpDiB,CAXoD,CAkBlDR,CAlBkD,CAWpDQ,WAXoD,CAYpDC,CAZoD,CAkBlDT,CAlBkD,CAYpDS,UAZoD,CAapDC,CAboD,CAkBlDV,CAlBkD,CAapDU,gBAboD,CAcpDC,CAdoD,CAkBlDX,CAlBkD,CAcpDW,WAdoD,CAepDC,CAfoD,CAkBlDZ,CAlBkD,CAepDY,OAfoD,CAgBpDC,CAhBoD,CAkBlDb,CAlBkD,CAgBpDa,aAhBoD,CAiBjDC,CAjBiD,0BAkBlDd,CAlBkD,cAoBVpB,OAAO,IApBG,uBAoB/CmC,CApB+C,MAoB/BC,CApB+B,QAsBpC9B,QAAQ,EAtB4B,CAsB9C+B,CAtB8C,GAsB9CA,KAtB8C,CAwBhDC,CAAY,gCACbD,CADa,MAEhBE,KAAK,CAAE,CACLC,OAAO,CAAEH,CAAK,CAACE,KAAN,CAAYE,MADhB,CAELC,MAAM,CAAEL,CAAK,CAACE,KAAN,CAAYG,MAFf,CAGLD,MAAM,CAAEJ,CAAK,CAACE,KAAN,CAAYC,OAHf,CAFS,EAxBoC,CAiChDG,CAAsB,CAAGvC,uBAAuB,CAACkC,CAAD,CAjCA,CAmChDM,CAAW,CAAG,SAClBC,CADkB,CAEf,CACEpB,CADF,UAEDO,CAFC,WAEDA,CAFC,QAEDA,CAAO,CAAGa,CAAH,CAAMd,CAAN,CAFN,CAGDK,CAAiB,CAACU,EAAlB,EAHC,CAKJ,CA1CqD,CA4ChDC,CAAiB,CAAG,SAACC,CAAD,CAAoB,CACvCvB,CADuC,UAE1CH,CAF0C,WAE1CA,CAF0C,QAE1CA,CAAO,CAAG0B,CAAH,CAFmC,CAG1CA,CAAK,EAAIZ,CAAiB,CAACU,EAAlB,EAHiC,CAItCE,CAJsC,EAI/BZ,CAAiB,CAACU,EAAlB,EAJ+B,CAKtC,CAACE,CAAD,EAAU,CAACrB,CAL2B,EAKlBS,CAAiB,CAACa,GAAlB,EALkB,CAO7C,CAnDqD,CAgEhDC,CAAQ,CAAGnD,MAAM,CAAoB,IAApB,CAhE+B,CAkEhDoD,CAAe,CAAG1C,kBAAkB,CACxCC,CADwC,CAExCC,CAAS,EAAIuC,CAF2B,CAlEY,CA2EtD,MAJApD,UAAS,CAAC,UAAM,CACd6B,CAAO,CAAGS,CAAiB,CAACU,EAAlB,EAAH,CAA4BV,CAAiB,CAACa,GAAlB,EACpC,CAFQ,CAEN,CAACtB,CAAD,CAFM,CAIT,CACE,wCACE,4CACE,IAAI,CAAC,QADP,CAEE,uBAAeI,CAAf,WAFF,CAGE,SAAS,CAAEvB,aAAa,CAAC,CAAEa,OAAO,CAAPA,CAAF,CAAWI,QAAQ,CAARA,CAAX,CAAD,CAAwB,CAC7CA,CAAD,CAA2B,EAA3B,CAAYvB,UAAU,EADwB,CAAxB,CAH1B,CAME,WAAW,CAAE,6BAAM6C,EAAiB,IAAvB,CANf,CAOE,UAAU,CAAE,4BAAMA,EAAiB,IAAvB,CAPd,CAQE,WAAW,CAAE,qCAAMnB,CAAN,WAAMA,CAAN,QAAMA,CAAW,CAAGG,CAAH,CAAjB,CARf,CASE,YAAY,CAAE,sCAAMH,CAAN,WAAMA,CAAN,QAAMA,CAAW,CAAGG,CAAH,CAAjB,CAThB,CAUE,SAAS,CAAE,mBAACc,CAAD,gBAAOhB,CAAP,WAAOA,CAAP,QAAOA,CAAU,CAAGgB,CAAH,CAAMd,CAAN,CAAjB,CAVb,CAWE,OAAO,CAAEa,CAXX,CAYE,MAAM,CApCO,QAAbQ,WAAa,CACjBP,CADiB,CAId,CACEpB,CADF,UAEDO,CAFC,WAEDA,CAFC,QAEDA,CAAO,CAAGa,CAAH,CAAM,IAAN,CAFN,CAGDT,CAAiB,CAACa,GAAlB,EAHC,CAKJ,CAeG,CAaE,OAAO,CAAEL,CAbX,CAcE,GAAG,CAAE3C,UAAU,CAAC,CAACU,CAAD,CAAYuC,CAAZ,CAAD,CAdjB,CAeE,QAAQ,CAAE,CAfZ,CAgBE,KAAK,oBACF,sBADE,WACoC1B,CADpC,MAhBP,EAmBMU,CAnBN,EADF,CAsBGC,CAAc,EAAIT,CAAlB,EAAiChB,CAAjC,EACC,oBAAC,YAAD,CAAc,QAAd,EAEE,KAAK,CAAE,CACL2B,KAAK,CAAEC,CADF,CAELe,eAAe,CAAEV,CAFZ,CAFT,EAOE,oBAAC,OAAD,EACE,QAAQ,CAAEQ,CADZ,CAEE,SAAS,CAAE3C,aAAa,CAAC,SAAD,CAF1B,CAGE,SAAS,CAAC,YAHZ,CAIE,kBAAkB,CAAE,CAClB,YADkB,CAElB,UAFkB,CAGlB,WAHkB,CAIlB,UAJkB,CAJtB,CAUE,KAAK,CAAE,CAAE8C,MAAM,CAAErB,CAAV,CAVT,CAWE,MAAM,CAAE,CAXV,EAaGH,CAAgB,CAAGA,CAAgB,CAACP,CAAD,CAAnB,CAA6BA,CAbhD,CAPF,CAvBJ,CAiDH,CA7HM"}
|
|
@@ -18,6 +18,7 @@ export declare type TooltipProps = PropsWithJsxAttributes<{
|
|
|
18
18
|
children: React.ReactNode;
|
|
19
19
|
onClickOutside?: ClickOutsideHandler;
|
|
20
20
|
className?: string;
|
|
21
|
+
offset?: number;
|
|
21
22
|
onSetDirection?: (direction: Direction) => void;
|
|
22
23
|
} & PositioningProps>;
|
|
23
|
-
export declare const Tooltip: React.ForwardRefExoticComponent<Pick<TooltipProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "status" | "key" | "direction" | "position" | "possibleDirections" | "spareDirection" | "isInteractive" | "onClickOutside" | "onSetDirection" | "anchorRef" | "equalAnchorWidth"> & React.RefAttributes<HTMLDivElement>>;
|
|
24
|
+
export declare const Tooltip: React.ForwardRefExoticComponent<Pick<TooltipProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "status" | "key" | "direction" | "offset" | "position" | "possibleDirections" | "spareDirection" | "isInteractive" | "onClickOutside" | "onSetDirection" | "anchorRef" | "equalAnchorWidth"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","size","className","status","onSetDirection","style"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./Tooltip.css";import React,{useMemo,useState}from"react";import{cnMixPopoverArrow}from"../../mixs/MixPopoverArrow/MixPopoverArrow";import{cn}from"../../utils/bem";import{Popover}from"../Popover/Popover";import{Text}from"../Text/Text";import{generateDeps,generateThemeClassNames,ThemeContext,useTheme}from"../Theme/Theme";var ARROW_SIZE=6,ARROW_OFFSET=8,cnTooltip=cn("Tooltip");export var tooltipPropSizes=["m","s","l"];export var tooltipPropSizesDefault=tooltipPropSizes[0];export var tooltipPropStatus=["normal","alert","success","warning"];function renderChildren(a){return"string"==typeof a||"number"==typeof a?React.createElement(Text,{size:"xs"},a):a}export var Tooltip=React.forwardRef(function(a,b){var c,d=a.children,e=a.size,f=void 0===e?tooltipPropSizesDefault:e,g=a.className,h=a.status,i=a.onSetDirection,j=a.style,k=_objectWithoutProperties(a,_excluded),
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","size","className","status","onSetDirection","style","offset"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./Tooltip.css";import React,{useMemo,useState}from"react";import{cnMixPopoverArrow}from"../../mixs/MixPopoverArrow/MixPopoverArrow";import{cn}from"../../utils/bem";import{Popover}from"../Popover/Popover";import{Text}from"../Text/Text";import{generateDeps,generateThemeClassNames,ThemeContext,useTheme}from"../Theme/Theme";var ARROW_SIZE=6,ARROW_OFFSET=8,cnTooltip=cn("Tooltip");export var tooltipPropSizes=["m","s","l"];export var tooltipPropSizesDefault=tooltipPropSizes[0];export var tooltipPropStatus=["normal","alert","success","warning"];function renderChildren(a){return"string"==typeof a||"number"==typeof a?React.createElement(Text,{size:"xs"},a):a}export var Tooltip=React.forwardRef(function(a,b){var c,d=a.children,e=a.size,f=void 0===e?tooltipPropSizesDefault:e,g=a.className,h=a.status,i=a.onSetDirection,j=a.style,k=a.offset,l=void 0===k?0:k,m=_objectWithoutProperties(a,_excluded),n=useTheme(),o=n.theme,p=useState(),q=_slicedToArray(p,2),r=q[0],s=q[1],t=useMemo(function(){var a=h?_objectSpread(_objectSpread({},o),{},{color:{primary:o.color.accent,accent:o.color.accent,invert:o.color.primary}}):_objectSpread(_objectSpread({},o),{},{color:{primary:o.color.invert,accent:o.color.accent,invert:o.color.primary}});return{theme:a,themeClassNames:generateThemeClassNames(a)}},[generateDeps(o),h]);return React.createElement(ThemeContext.Provider,{value:t},React.createElement(Popover,Object.assign({},m,{arrowOffset:ARROW_OFFSET+ARROW_SIZE,offset:10+l,onSetDirection:function onSetDirection(a){i&&i(a),s(a)},ref:b,className:cnTooltip({status:h},[g]),style:_objectSpread((c={},_defineProperty(c,"--popover-arrow-size","".concat(ARROW_SIZE,"px")),_defineProperty(c,"--popover-arrow-offset","".concat(ARROW_OFFSET,"px")),c),j)}),React.createElement("div",{className:cnTooltip("Background")}),React.createElement("div",{className:cnTooltip("Arrow",[cnMixPopoverArrow({direction:r})])}),React.createElement("div",{className:cnTooltip("Content",{size:f})},renderChildren(d))))});
|
|
2
2
|
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","names":["React","useMemo","useState","cnMixPopoverArrow","cn","Popover","Text","generateDeps","generateThemeClassNames","ThemeContext","useTheme","ARROW_SIZE","ARROW_OFFSET","cnTooltip","tooltipPropSizes","tooltipPropSizesDefault","tooltipPropStatus","renderChildren","children","Tooltip","forwardRef","props","ref","size","className","status","onSetDirectionProp","onSetDirection","style","rest","theme","direction","setDirection","value","tooltipTheme","color","primary","accent","invert","themeClassNames"],"sources":["../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import './Tooltip.css';\n\nimport React, { useMemo, useState } from 'react';\n\nimport { ClickOutsideHandler } from '../../hooks/useClickOutside/useClickOutside';\nimport { cnMixPopoverArrow } from '../../mixs/MixPopoverArrow/MixPopoverArrow';\nimport { cn } from '../../utils/bem';\nimport { PropsWithJsxAttributes } from '../../utils/types/PropsWithJsxAttributes';\nimport { Direction, Popover, PositioningProps } from '../Popover/Popover';\nimport { Text } from '../Text/Text';\nimport {\n generateDeps,\n generateThemeClassNames,\n ThemeContext,\n useTheme,\n} from '../Theme/Theme';\n\nconst ARROW_SIZE = 6;\nconst ARROW_OFFSET = 8;\n\nconst cnTooltip = cn('Tooltip');\n\nexport const tooltipPropSizes = ['m', 's', 'l'] as const;\nexport const tooltipPropSizesDefault = tooltipPropSizes[0];\nexport type TooltipPropSize = typeof tooltipPropSizes[number];\n\nexport const tooltipPropStatus = [\n 'normal',\n 'alert',\n 'success',\n 'warning',\n] as const;\nexport type TooltipPropStatus = typeof tooltipPropStatus[number];\n\nexport type TooltipProps = PropsWithJsxAttributes<\n {\n size?: TooltipPropSize;\n status?: TooltipPropStatus;\n direction?: Direction;\n spareDirection?: Direction;\n possibleDirections?: readonly Direction[];\n isInteractive?: boolean;\n children: React.ReactNode;\n onClickOutside?: ClickOutsideHandler;\n className?: string;\n onSetDirection?: (direction: Direction) => void;\n } & PositioningProps\n>;\n\nfunction renderChildren(children: React.ReactNode): React.ReactNode {\n return typeof children === 'string' || typeof children === 'number' ? (\n <Text size=\"xs\">{children}</Text>\n ) : (\n children\n );\n}\n\nexport const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(\n (props, ref) => {\n const {\n children,\n size = tooltipPropSizesDefault,\n className,\n status,\n onSetDirection: onSetDirectionProp,\n style,\n ...rest\n } = props;\n const { theme } = useTheme();\n const [direction, setDirection] = useState<Direction | undefined>();\n\n const onSetDirection = (direction: Direction) => {\n onSetDirectionProp && onSetDirectionProp(direction);\n setDirection(direction);\n };\n\n const value = useMemo(() => {\n const tooltipTheme = status\n ? {\n ...theme,\n color: {\n primary: theme.color.accent,\n accent: theme.color.accent,\n invert: theme.color.primary,\n },\n }\n : {\n ...theme,\n color: {\n primary: theme.color.invert,\n accent: theme.color.accent,\n invert: theme.color.primary,\n },\n };\n\n return {\n theme: tooltipTheme,\n themeClassNames: generateThemeClassNames(tooltipTheme),\n };\n }, [generateDeps(theme), status]);\n\n return (\n <ThemeContext.Provider value={value}>\n <Popover\n {...rest}\n arrowOffset={ARROW_OFFSET + ARROW_SIZE}\n offset={ARROW_SIZE + 4}\n onSetDirection={onSetDirection}\n ref={ref}\n className={cnTooltip({ status }, [className])}\n style={{\n ['--popover-arrow-size' as string]: `${ARROW_SIZE}px`,\n ['--popover-arrow-offset' as string]: `${ARROW_OFFSET}px`,\n ...style,\n }}\n >\n <div className={cnTooltip('Background')} />\n <div\n className={cnTooltip('Arrow', [cnMixPopoverArrow({ direction })])}\n />\n <div className={cnTooltip('Content', { size })}>\n {renderChildren(children)}\n </div>\n </Popover>\n </ThemeContext.Provider>\n );\n },\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tooltip.js","names":["React","useMemo","useState","cnMixPopoverArrow","cn","Popover","Text","generateDeps","generateThemeClassNames","ThemeContext","useTheme","ARROW_SIZE","ARROW_OFFSET","cnTooltip","tooltipPropSizes","tooltipPropSizesDefault","tooltipPropStatus","renderChildren","children","Tooltip","forwardRef","props","ref","size","className","status","onSetDirectionProp","onSetDirection","style","offset","rest","theme","direction","setDirection","value","tooltipTheme","color","primary","accent","invert","themeClassNames"],"sources":["../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import './Tooltip.css';\n\nimport React, { useMemo, useState } from 'react';\n\nimport { ClickOutsideHandler } from '../../hooks/useClickOutside/useClickOutside';\nimport { cnMixPopoverArrow } from '../../mixs/MixPopoverArrow/MixPopoverArrow';\nimport { cn } from '../../utils/bem';\nimport { PropsWithJsxAttributes } from '../../utils/types/PropsWithJsxAttributes';\nimport { Direction, Popover, PositioningProps } from '../Popover/Popover';\nimport { Text } from '../Text/Text';\nimport {\n generateDeps,\n generateThemeClassNames,\n ThemeContext,\n useTheme,\n} from '../Theme/Theme';\n\nconst ARROW_SIZE = 6;\nconst ARROW_OFFSET = 8;\n\nconst cnTooltip = cn('Tooltip');\n\nexport const tooltipPropSizes = ['m', 's', 'l'] as const;\nexport const tooltipPropSizesDefault = tooltipPropSizes[0];\nexport type TooltipPropSize = typeof tooltipPropSizes[number];\n\nexport const tooltipPropStatus = [\n 'normal',\n 'alert',\n 'success',\n 'warning',\n] as const;\nexport type TooltipPropStatus = typeof tooltipPropStatus[number];\n\nexport type TooltipProps = PropsWithJsxAttributes<\n {\n size?: TooltipPropSize;\n status?: TooltipPropStatus;\n direction?: Direction;\n spareDirection?: Direction;\n possibleDirections?: readonly Direction[];\n isInteractive?: boolean;\n children: React.ReactNode;\n onClickOutside?: ClickOutsideHandler;\n className?: string;\n offset?: number;\n onSetDirection?: (direction: Direction) => void;\n } & PositioningProps\n>;\n\nfunction renderChildren(children: React.ReactNode): React.ReactNode {\n return typeof children === 'string' || typeof children === 'number' ? (\n <Text size=\"xs\">{children}</Text>\n ) : (\n children\n );\n}\n\nexport const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(\n (props, ref) => {\n const {\n children,\n size = tooltipPropSizesDefault,\n className,\n status,\n onSetDirection: onSetDirectionProp,\n style,\n offset = 0,\n ...rest\n } = props;\n const { theme } = useTheme();\n const [direction, setDirection] = useState<Direction | undefined>();\n\n const onSetDirection = (direction: Direction) => {\n onSetDirectionProp && onSetDirectionProp(direction);\n setDirection(direction);\n };\n\n const value = useMemo(() => {\n const tooltipTheme = status\n ? {\n ...theme,\n color: {\n primary: theme.color.accent,\n accent: theme.color.accent,\n invert: theme.color.primary,\n },\n }\n : {\n ...theme,\n color: {\n primary: theme.color.invert,\n accent: theme.color.accent,\n invert: theme.color.primary,\n },\n };\n\n return {\n theme: tooltipTheme,\n themeClassNames: generateThemeClassNames(tooltipTheme),\n };\n }, [generateDeps(theme), status]);\n\n return (\n <ThemeContext.Provider value={value}>\n <Popover\n {...rest}\n arrowOffset={ARROW_OFFSET + ARROW_SIZE}\n offset={ARROW_SIZE + 4 + offset}\n onSetDirection={onSetDirection}\n ref={ref}\n className={cnTooltip({ status }, [className])}\n style={{\n ['--popover-arrow-size' as string]: `${ARROW_SIZE}px`,\n ['--popover-arrow-offset' as string]: `${ARROW_OFFSET}px`,\n ...style,\n }}\n >\n <div className={cnTooltip('Background')} />\n <div\n className={cnTooltip('Arrow', [cnMixPopoverArrow({ direction })])}\n />\n <div className={cnTooltip('Content', { size })}>\n {renderChildren(children)}\n </div>\n </Popover>\n </ThemeContext.Provider>\n );\n },\n);\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getElementSize.js","names":["defaultSize","width","height","getElementSize","el","getBoundingClientRect"],"sources":["../../../../../src/hooks/useComponentSize/getElementSize.ts"],"sourcesContent":["import { ComponentSize } from './types';\n\nconst defaultSize: ComponentSize = { width: 0, height: 0 };\n\nexport const getElementSize = (\n el: HTMLElement | SVGGraphicsElement | null,\n): ComponentSize => {\n if (!el) {\n return defaultSize;\n }\n\n const { width, height } = el.getBoundingClientRect();\n\n return {\n width,\n height,\n };\n};\n"],"mappings":"AAEA,GAAMA,YAA0B,CAAG,CAAEC,KAAK,CAAE,CAAT,CAAYC,MAAM,CAAE,CAApB,CAAnC,CAEA,MAAO,IAAMC,eAAc,CAAG,SAC5BC,CAD4B,CAEV,CAClB,GAAI,CAACA,CAAL,CACE,MAAOJ,YAAP,CAGF,MAA0BI,CAAE,CAACC,qBAAH,EAA1B,CAAQJ,CAAR,GAAQA,KAAR,CAAeC,CAAf,GAAeA,MAAf,CAEA,MAAO,CACLD,KAAK,CAALA,CADK,CAELC,MAAM,CAANA,CAFK,CAIR,CAbM"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export*from"./useComponentSize";
|
|
1
|
+
export*from"./useComponentSize";export*from"./getElementSize";export*from"./types";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/hooks/useComponentSize/index.ts"],"sourcesContent":["export * from './useComponentSize';\n"],"mappings":"AAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/hooks/useComponentSize/index.ts"],"sourcesContent":["export * from './useComponentSize';\nexport * from './getElementSize';\nexport * from './types';\n"],"mappings":"AAAA,gCACA,8BACA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/hooks/useComponentSize/types.ts"],"sourcesContent":["export type ComponentSize = {\n width: number;\n height: number;\n};\n"],"mappings":""}
|
|
@@ -1,7 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
width: number;
|
|
4
|
-
height: number;
|
|
5
|
-
};
|
|
6
|
-
export declare const getElementSize: (el: HTMLElement | SVGGraphicsElement | null) => ComponentSize;
|
|
2
|
+
import { ComponentSize } from './types';
|
|
7
3
|
export declare function useComponentSize(ref: React.RefObject<HTMLElement | SVGGraphicsElement>): ComponentSize;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{useMemo}from"react";import{useResizeObserved}from"../useResizeObserved";import{getElementSize}from"./getElementSize";export function useComponentSize(a){var b=useMemo(function(){return[a]},[a.current]);return useResizeObserved(b,getElementSize)[0]}
|
|
2
2
|
//# sourceMappingURL=useComponentSize.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useComponentSize.js","names":["useMemo","useResizeObserved","getElementSize","
|
|
1
|
+
{"version":3,"file":"useComponentSize.js","names":["useMemo","useResizeObserved","getElementSize","useComponentSize","ref","refs","current"],"sources":["../../../../../src/hooks/useComponentSize/useComponentSize.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useResizeObserved } from '##/hooks/useResizeObserved';\n\nimport { getElementSize } from './getElementSize';\nimport { ComponentSize } from './types';\n\nexport function useComponentSize(\n ref: React.RefObject<HTMLElement | SVGGraphicsElement>,\n): ComponentSize {\n const refs = useMemo(\n () => [ref],\n // Если реф начал указывать на другой элемент, нужно обновить подписки\n [ref.current],\n );\n return useResizeObserved(refs, getElementSize)[0];\n}\n"],"mappings":"AAAA,OAASA,OAAT,KAAwB,OAAxB,CAEA,OAASC,iBAAT,4BAEA,OAASC,cAAT,wBAGA,MAAO,SAASC,iBAAT,CACLC,CADK,CAEU,CACf,GAAMC,EAAI,CAAGL,OAAO,CAClB,iBAAM,CAACI,CAAD,CAAN,CADkB,CAGlB,CAACA,CAAG,CAACE,OAAL,CAHkB,CAApB,CAKA,MAAOL,kBAAiB,CAACI,CAAD,CAAOH,cAAP,CAAjB,CAAwC,CAAxC,CACR"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function _createForOfIteratorHelper(a,b){var c="undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(!c){if(Array.isArray(a)||(c=_unsupportedIterableToArray(a))||b&&a&&"number"==typeof a.length){c&&(a=c);var d=0,e=function(){};return{s:e,n:function n(){return d>=a.length?{done:!0}:{done:!1,value:a[d++]}},e:function e(a){throw a},f:e}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f,g=!0,h=!1;return{s:function s(){c=c.call(a)},n:function n(){var a=c.next();return g=a.done,a},e:function e(a){h=!0,f=a},f:function f(){try{g||null==c["return"]||c["return"]()}finally{if(h)throw f}}}}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}import React
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function _createForOfIteratorHelper(a,b){var c="undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(!c){if(Array.isArray(a)||(c=_unsupportedIterableToArray(a))||b&&a&&"number"==typeof a.length){c&&(a=c);var d=0,e=function(){};return{s:e,n:function n(){return d>=a.length?{done:!0}:{done:!1,value:a[d++]}},e:function e(a){throw a},f:e}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f,g=!0,h=!1;return{s:function s(){c=c.call(a)},n:function n(){var a=c.next();return g=a.done,a},e:function e(a){h=!0,f=a},f:function f(){try{g||null==c["return"]||c["return"]()}finally{if(h)throw f}}}}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}import React,{useLayoutEffect}from"react";export var useResizeObserved=function(a,b){var c=React.useState(function(){return a.map(function(a){return b(a.current)})}),d=_slicedToArray(c,2),e=d[0],f=d[1],g=React.useRef(b);return useLayoutEffect(function(){g.current=b},[b]),useLayoutEffect(function(){var b,c=new ResizeObserver(function(){f(a.map(function(a){return g.current(a.current)}))}),d=_createForOfIteratorHelper(a);try{for(d.s();!(b=d.n()).done;){var e=b.value;e.current&&c.observe(e.current)}}catch(a){d.e(a)}finally{d.f()}return function(){c.disconnect()}},[a]),e};
|
|
2
2
|
//# sourceMappingURL=useResizeObserved.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useResizeObserved.js","names":["React","useResizeObserved","refs","mapper","useState","map","ref","current","dimensions","setDimensions","mapperRef","useRef","
|
|
1
|
+
{"version":3,"file":"useResizeObserved.js","names":["React","useLayoutEffect","useResizeObserved","refs","mapper","useState","map","ref","current","dimensions","setDimensions","mapperRef","useRef","resizeObserver","ResizeObserver","observe","disconnect"],"sources":["../../../../../src/hooks/useResizeObserved/useResizeObserved.ts"],"sourcesContent":["import React, { RefObject, useLayoutEffect } from 'react';\n\nexport const useResizeObserved = <\n ELEMENT extends HTMLElement | SVGGraphicsElement,\n RETURN_TYPE,\n>(\n refs: Array<RefObject<ELEMENT>>,\n mapper: (el: ELEMENT | null) => RETURN_TYPE,\n): RETURN_TYPE[] => {\n const [dimensions, setDimensions] = React.useState<RETURN_TYPE[]>(() =>\n refs.map((ref) => mapper(ref.current)),\n );\n\n // Храним маппер в рефке, чтобы если его передадут инлайн-функцией, это не вызвало бесконечные перерендеры\n const mapperRef = React.useRef(mapper);\n useLayoutEffect(() => {\n mapperRef.current = mapper;\n }, [mapper]);\n\n useLayoutEffect(() => {\n const resizeObserver = new ResizeObserver(() => {\n setDimensions(refs.map((ref) => mapperRef.current(ref.current)));\n });\n\n for (const ref of refs) {\n ref.current && resizeObserver.observe(ref.current);\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [refs]);\n\n return dimensions;\n};\n"],"mappings":"stCAAA,MAAOA,MAAP,EAA2BC,eAA3B,KAAkD,OAAlD,CAEA,MAAO,IAAMC,kBAAiB,CAAG,SAI/BC,CAJ+B,CAK/BC,CAL+B,CAMb,OACkBJ,KAAK,CAACK,QAAN,CAA8B,iBAChEF,EAAI,CAACG,GAAL,CAAS,SAACC,CAAD,QAASH,EAAM,CAACG,CAAG,CAACC,OAAL,CAAf,CAAT,CADgE,CAA9B,CADlB,uBACXC,CADW,MACCC,CADD,MAMZC,CAAS,CAAGX,KAAK,CAACY,MAAN,CAAaR,CAAb,CANA,CAyBlB,MAlBAH,gBAAe,CAAC,UAAM,CACpBU,CAAS,CAACH,OAAV,CAAoBJ,CACrB,CAFc,CAEZ,CAACA,CAAD,CAFY,CAkBf,CAdAH,eAAe,CAAC,UAAM,OACdY,CAAc,CAAG,GAAIC,eAAJ,CAAmB,UAAM,CAC9CJ,CAAa,CAACP,CAAI,CAACG,GAAL,CAAS,SAACC,CAAD,QAASI,EAAS,CAACH,OAAV,CAAkBD,CAAG,CAACC,OAAtB,CAAT,CAAT,CAAD,CACd,CAFsB,CADH,8BAKFL,CALE,MAKpB,2BAAwB,IAAbI,EAAa,SACtBA,CAAG,CAACC,OAAJ,EAAeK,CAAc,CAACE,OAAf,CAAuBR,CAAG,CAACC,OAA3B,CAChB,CAPmB,+BASpB,MAAO,WAAM,CACXK,CAAc,CAACG,UAAf,EACD,CACF,CAZc,CAYZ,CAACb,CAAD,CAZY,CAcf,CAAOM,CACR,CAhCM"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
export declare const defaultItemsCalculationCount = 5;
|
|
3
|
+
export declare const useScroll: (ref: RefObject<HTMLElement>, fn: () => void, isActive: boolean) => void;
|
|
4
|
+
export declare const getElementHeight: (el: HTMLElement | SVGGraphicsElement | null) => number;
|
|
5
|
+
export declare const getVisiblePosition: (top: number, height: number) => [number, number];
|
|
6
|
+
export declare const calculateSavedSizes: (savedSizes: number[], sizes: number[]) => number[];
|
|
7
|
+
export declare const useCalculateVisiblePosition: (scrollElement: HTMLElement | null, set: (value: React.SetStateAction<[number, number]>) => void) => () => void;
|
|
8
|
+
export declare const calculateBounds: (savedSize: number[], size: number[], visiblePosition: [number, number], length: number) => [number, number][];
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import{useCallback,useEffect}from"react";import{getElementSize}from"../useComponentSize";export var defaultItemsCalculationCount=5;var visualGap=200;export var useScroll=function(a,b,c){useEffect(function(){return c?b():void 0},[a.current,b,c]),useEffect(function(){if(c){var d;null===(d=a.current)||void 0===d?void 0:d.addEventListener("scroll",b)}return function(){var c;null===(c=a.current)||void 0===c?void 0:c.removeEventListener("scroll",b)}},[a.current,b,c])};export var getElementHeight=function(a){return getElementSize(a).height};var roundPositionByGap=function(a,b){return 0>=a?0:Math.ceil(a/b)*b};export var getVisiblePosition=function(a,b){var c=Math.ceil(roundPositionByGap(0>a-b?0:a-b,b)-visualGap);return[0>=c?0:c,Math.ceil(roundPositionByGap(0===a?b:a,b)+b+visualGap)]};export var calculateSavedSizes=function(a,b){for(var c,d=_toConsumableArray(a),e=0;e<b.length;e++)c=b[e],0<c&&(d[e]=c);return d};export var useCalculateVisiblePosition=function(a,b){return useCallback(function(){if(a){var c=getVisiblePosition(a.scrollTop,getElementHeight(a));b(function(a){return c[0]!==a[0]||c[1]!==a[1]?c:a})}},[a,b])};var addCount=function(a,b,c){for(var d=c.slice(-50),e=d.reduce(function(c,a){return c+a},0)/d.length,f=defaultItemsCalculationCount;b[1]>a[1]+f*e;)f+=defaultItemsCalculationCount;return f};export var calculateBounds=function(a,b,c,d){for(var e=[0,0],f=[0,0],g=0;g<a.length;g++)c[0]>e[0]&&(e[0]+=a[g],f[0]=g),c[1]>e[1]&&(e[1]+=a[g],f[1]=g);return 0===f[0]&&0===f[1]&&(f[1]=defaultItemsCalculationCount),a.length-1>=f[1]&&b.length!==a.length&&(f[1]+=addCount(e,c,a)),f[1]-1>d&&(f[1]=d-1),[e,f]};
|
|
2
|
+
//# sourceMappingURL=hellpers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hellpers.js","names":["useCallback","useEffect","getElementSize","defaultItemsCalculationCount","visualGap","useScroll","ref","fn","isActive","current","addEventListener","removeEventListener","getElementHeight","el","height","roundPositionByGap","position","gap","Math","ceil","getVisiblePosition","top","first","calculateSavedSizes","savedSizes","sizes","element","newSavedSizes","index","length","useCalculateVisiblePosition","scrollElement","set","visiblePosition","scrollTop","state","addCount","pxs","savedSize","lastSavedSize","slice","average","reduce","a","b","add","calculateBounds","size","indexs"],"sources":["../../../../../src/hooks/useVirtualScrollCanary/hellpers.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect } from 'react';\n\nimport { getElementSize } from '##/hooks/useComponentSize';\n\nexport const defaultItemsCalculationCount = 5;\nconst visualGap = 200;\n\nexport const useScroll = (\n ref: RefObject<HTMLElement>,\n fn: () => void,\n isActive: boolean,\n) => {\n useEffect(() => (isActive ? fn() : undefined), [ref.current, fn, isActive]);\n useEffect(() => {\n if (isActive) {\n ref.current?.addEventListener('scroll', fn);\n }\n\n return () => {\n ref.current?.removeEventListener('scroll', fn);\n };\n }, [ref.current, fn, isActive]);\n};\n\nexport const getElementHeight = (el: HTMLElement | SVGGraphicsElement | null) =>\n getElementSize(el).height;\n\nconst roundPositionByGap = (position: number, gap: number) => {\n if (position <= 0) {\n return 0;\n }\n return Math.ceil(position / gap) * gap;\n};\n\nexport const getVisiblePosition = (\n top: number,\n height: number,\n): [number, number] => {\n const first = Math.ceil(\n roundPositionByGap(top - height < 0 ? 0 : top - height, height) - visualGap,\n );\n\n return [\n first <= 0 ? 0 : first,\n Math.ceil(\n roundPositionByGap(top === 0 ? height : top, height) + height + visualGap,\n ),\n ];\n};\n\nexport const calculateSavedSizes = (savedSizes: number[], sizes: number[]) => {\n const newSavedSizes = [...savedSizes];\n for (let index = 0; index < sizes.length; index++) {\n const element = sizes[index];\n if (element > 0) {\n newSavedSizes[index] = element;\n }\n }\n return newSavedSizes;\n};\n\nexport const useCalculateVisiblePosition = (\n scrollElement: HTMLElement | null,\n set: (value: React.SetStateAction<[number, number]>) => void,\n) =>\n useCallback(() => {\n if (!scrollElement) {\n return;\n }\n\n const visiblePosition = getVisiblePosition(\n scrollElement.scrollTop,\n getElementHeight(scrollElement),\n );\n\n set((state) => {\n if (visiblePosition[0] !== state[0] || visiblePosition[1] !== state[1]) {\n return visiblePosition;\n }\n\n return state;\n });\n }, [scrollElement, set]);\n\nconst addCount = (\n pxs: [number, number],\n visiblePosition: [number, number],\n savedSize: number[],\n) => {\n const lastSavedSize = savedSize.slice(-50);\n const average =\n lastSavedSize.reduce((a, b) => a + b, 0) / lastSavedSize.length;\n\n let add = defaultItemsCalculationCount;\n\n while (visiblePosition[1] > pxs[1] + add * average) {\n add += defaultItemsCalculationCount;\n }\n\n return add;\n};\n\nexport const calculateBounds = (\n savedSize: number[],\n size: number[],\n visiblePosition: [number, number],\n length: number,\n) => {\n const pxs: [number, number] = [0, 0];\n const indexs: [number, number] = [0, 0];\n\n for (let index = 0; index < savedSize.length; index++) {\n if (visiblePosition[0] > pxs[0]) {\n pxs[0] += savedSize[index];\n indexs[0] = index;\n }\n\n if (visiblePosition[1] > pxs[1]) {\n pxs[1] += savedSize[index];\n indexs[1] = index;\n }\n }\n\n if (indexs[0] === 0 && indexs[1] === 0) {\n indexs[1] = defaultItemsCalculationCount;\n }\n\n if (savedSize.length - 1 >= indexs[1] && size.length !== savedSize.length) {\n indexs[1] += addCount(pxs, visiblePosition, savedSize);\n }\n\n if (indexs[1] - 1 > length) {\n indexs[1] = length - 1;\n }\n\n return [pxs, indexs];\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './useVirtualScrollCanary';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/hooks/useVirtualScrollCanary/index.ts"],"sourcesContent":["export * from './useVirtualScrollCanary';\n"],"mappings":"AAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare type UseVirtualScrollProps = {
|
|
3
|
+
length: number;
|
|
4
|
+
isActive?: boolean;
|
|
5
|
+
onScrollToBottom?: (index: number) => void;
|
|
6
|
+
};
|
|
7
|
+
declare type UseVirtualScrollReturn<ITEM_ELEMENT, SCROLL_ELEMENT> = {
|
|
8
|
+
listRefs: React.RefObject<ITEM_ELEMENT>[];
|
|
9
|
+
scrollElementRef: React.RefObject<SCROLL_ELEMENT>;
|
|
10
|
+
slice: [number, number];
|
|
11
|
+
spaceTop: number;
|
|
12
|
+
};
|
|
13
|
+
export declare const useVirtualScroll: <ITEM_ELEMENT extends HTMLElement = HTMLDivElement, SCROLL_ELEMENT extends HTMLElement = HTMLDivElement>({ length, onScrollToBottom, isActive, }: UseVirtualScrollProps) => UseVirtualScrollReturn<ITEM_ELEMENT, SCROLL_ELEMENT>;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useEffect,useRef,useState}from"react";import{useMutableRef}from"../useMutableRef";import{useRefs}from"../useRefs";import{useResizeObserved}from"../useResizeObserved";import{calculateBounds,calculateSavedSizes,defaultItemsCalculationCount,getElementHeight,useCalculateVisiblePosition,useScroll}from"./hellpers";export var useVirtualScroll=function(a){var b=a.length,c=a.onScrollToBottom,d=a.isActive,e=void 0!==d&&d,f=useState([0,0]),g=_slicedToArray(f,2),h=g[0],i=g[1],j=useState([[0,0],[0,e?defaultItemsCalculationCount:b]]),k=_slicedToArray(j,2),l=k[0],m=k[1],n=useRefs(b,h),o=useRef(null),p=useResizeObserved(n,getElementHeight),q=useRef(calculateSavedSizes([],p)),r=useMutableRef(c);return useScroll(o,useCalculateVisiblePosition(o.current,i),e),useEffect(function(){e?(q.current=calculateSavedSizes(q.current,p),m(calculateBounds(q.current,p,h,b))):m([[0,0],[0,b]])},[].concat(_toConsumableArray(h),[p,b,e])),useEffect(function(){r.current&&e&&l[1][1]+1>=b&&r.current(b)},[l[1][1],b,e]),{listRefs:n,scrollElementRef:o,slice:[0===l[1][0]?0:l[1][0]+1,0===l[1][1]?0:l[1][1]+1],spaceTop:l[0][0]}};
|
|
2
|
+
//# sourceMappingURL=useVirtualScrollCanary.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useVirtualScrollCanary.js","names":["useEffect","useRef","useState","useMutableRef","useRefs","useResizeObserved","calculateBounds","calculateSavedSizes","defaultItemsCalculationCount","getElementHeight","useCalculateVisiblePosition","useScroll","useVirtualScroll","length","onScrollToBottom","isActive","visiblePosition","setVisiblePosition","bounds","setBounds","listRefs","scrollElementRef","sizes","savedSizesRef","onScrollToBottomRef","current","slice","spaceTop"],"sources":["../../../../../src/hooks/useVirtualScrollCanary/useVirtualScrollCanary.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { useMutableRef } from '##/hooks/useMutableRef';\nimport { useRefs } from '##/hooks/useRefs';\nimport { useResizeObserved } from '##/hooks/useResizeObserved';\n\nimport {\n calculateBounds,\n calculateSavedSizes,\n defaultItemsCalculationCount,\n getElementHeight,\n useCalculateVisiblePosition,\n useScroll,\n} from './hellpers';\n\ntype UseVirtualScrollProps = {\n length: number;\n isActive?: boolean;\n onScrollToBottom?: (index: number) => void;\n};\n\ntype UseVirtualScrollReturn<ITEM_ELEMENT, SCROLL_ELEMENT> = {\n listRefs: React.RefObject<ITEM_ELEMENT>[];\n scrollElementRef: React.RefObject<SCROLL_ELEMENT>;\n slice: [number, number];\n spaceTop: number;\n};\n\nexport const useVirtualScroll = <\n ITEM_ELEMENT extends HTMLElement = HTMLDivElement,\n SCROLL_ELEMENT extends HTMLElement = HTMLDivElement,\n>({\n length,\n onScrollToBottom,\n isActive = false,\n}: UseVirtualScrollProps): UseVirtualScrollReturn<\n ITEM_ELEMENT,\n SCROLL_ELEMENT\n> => {\n const [visiblePosition, setVisiblePosition] = useState<[number, number]>([\n 0, 0,\n ]);\n const [bounds, setBounds] = useState<number[][]>([\n [0, 0],\n [0, isActive ? defaultItemsCalculationCount : length],\n ]);\n const listRefs = useRefs<ITEM_ELEMENT>(length, visiblePosition);\n const scrollElementRef = useRef<SCROLL_ELEMENT>(null);\n const sizes = useResizeObserved(listRefs, getElementHeight);\n const savedSizesRef = useRef(calculateSavedSizes([], sizes));\n const onScrollToBottomRef = useMutableRef(onScrollToBottom);\n\n useScroll(\n scrollElementRef,\n useCalculateVisiblePosition(scrollElementRef.current, setVisiblePosition),\n isActive,\n );\n\n useEffect(() => {\n if (isActive) {\n savedSizesRef.current = calculateSavedSizes(savedSizesRef.current, sizes);\n setBounds(\n calculateBounds(savedSizesRef.current, sizes, visiblePosition, length),\n );\n } else {\n setBounds([\n [0, 0],\n [0, length],\n ]);\n }\n }, [...visiblePosition, sizes, length, isActive]);\n\n useEffect(() => {\n if (onScrollToBottomRef.current && isActive && bounds[1][1] + 1 >= length) {\n onScrollToBottomRef.current(length);\n }\n }, [bounds[1][1], length, isActive]);\n\n return {\n listRefs,\n scrollElementRef,\n slice: [\n bounds[1][0] === 0 ? 0 : bounds[1][0] + 1,\n bounds[1][1] === 0 ? 0 : bounds[1][1] + 1,\n ],\n spaceTop: bounds[0][0],\n };\n};\n"],"mappings":"0IAAA,OAASA,SAAT,CAAoBC,MAApB,CAA4BC,QAA5B,KAA4C,OAA5C,CAEA,OAASC,aAAT,wBACA,OAASC,OAAT,kBACA,OAASC,iBAAT,4BAEA,OACEC,eADF,CAEEC,mBAFF,CAGEC,4BAHF,CAIEC,gBAJF,CAKEC,2BALF,CAMEC,SANF,kBAsBA,MAAO,IAAMC,iBAAgB,CAAG,WAU3B,IANHC,EAMG,GANHA,MAMG,CALHC,CAKG,GALHA,gBAKG,KAJHC,QAIG,CAJHA,CAIG,iBAC2Cb,QAAQ,CAAmB,CACvE,CADuE,CACpE,CADoE,CAAnB,CADnD,uBACIc,CADJ,MACqBC,CADrB,QAIyBf,QAAQ,CAAa,CAC/C,CAAC,CAAD,CAAI,CAAJ,CAD+C,CAE/C,CAAC,CAAD,CAAIa,CAAQ,CAAGP,4BAAH,CAAkCK,CAA9C,CAF+C,CAAb,CAJjC,uBAIIK,CAJJ,MAIYC,CAJZ,MAQGC,CAAQ,CAAGhB,OAAO,CAAeS,CAAf,CAAuBG,CAAvB,CARrB,CASGK,CAAgB,CAAGpB,MAAM,CAAiB,IAAjB,CAT5B,CAUGqB,CAAK,CAAGjB,iBAAiB,CAACe,CAAD,CAAWX,gBAAX,CAV5B,CAWGc,CAAa,CAAGtB,MAAM,CAACM,mBAAmB,CAAC,EAAD,CAAKe,CAAL,CAApB,CAXzB,CAYGE,CAAmB,CAAGrB,aAAa,CAACW,CAAD,CAZtC,CAwCH,MA1BAH,UAAS,CACPU,CADO,CAEPX,2BAA2B,CAACW,CAAgB,CAACI,OAAlB,CAA2BR,CAA3B,CAFpB,CAGPF,CAHO,CA0BT,CApBAf,SAAS,CAAC,UAAM,CACVe,CADU,EAEZQ,CAAa,CAACE,OAAd,CAAwBlB,mBAAmB,CAACgB,CAAa,CAACE,OAAf,CAAwBH,CAAxB,CAF/B,CAGZH,CAAS,CACPb,eAAe,CAACiB,CAAa,CAACE,OAAf,CAAwBH,CAAxB,CAA+BN,CAA/B,CAAgDH,CAAhD,CADR,CAHG,EAOZM,CAAS,CAAC,CACR,CAAC,CAAD,CAAI,CAAJ,CADQ,CAER,CAAC,CAAD,CAAIN,CAAJ,CAFQ,CAAD,CAKZ,CAZQ,8BAYFG,CAZE,GAYeM,CAZf,CAYsBT,CAZtB,CAY8BE,CAZ9B,GAoBT,CANAf,SAAS,CAAC,UAAM,CACVwB,CAAmB,CAACC,OAApB,EAA+BV,CAA/B,EAA2CG,CAAM,CAAC,CAAD,CAAN,CAAU,CAAV,EAAe,CAAf,EAAoBL,CADrD,EAEZW,CAAmB,CAACC,OAApB,CAA4BZ,CAA5B,CAEH,CAJQ,CAIN,CAACK,CAAM,CAAC,CAAD,CAAN,CAAU,CAAV,CAAD,CAAeL,CAAf,CAAuBE,CAAvB,CAJM,CAMT,CAAO,CACLK,QAAQ,CAARA,CADK,CAELC,gBAAgB,CAAhBA,CAFK,CAGLK,KAAK,CAAE,CACY,CAAjB,GAAAR,CAAM,CAAC,CAAD,CAAN,CAAU,CAAV,EAAqB,CAArB,CAAyBA,CAAM,CAAC,CAAD,CAAN,CAAU,CAAV,EAAe,CADnC,CAEY,CAAjB,GAAAA,CAAM,CAAC,CAAD,CAAN,CAAU,CAAV,EAAqB,CAArB,CAAyBA,CAAM,CAAC,CAAD,CAAN,CAAU,CAAV,EAAe,CAFnC,CAHF,CAOLS,QAAQ,CAAET,CAAM,CAAC,CAAD,CAAN,CAAU,CAAV,CAPL,CASR,CA3DM"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"isRenderProp.js","names":["isRenderProp","children"],"sources":["../../../../src/utils/isRenderProp.ts"],"sourcesContent":["export const isRenderProp = <PROPS>(\n children: React.ReactNode | PROPS,\n): children is PROPS => typeof children === 'function';\n"],"mappings":"AAAA,MAAO,IAAMA,aAAY,CAAG,SAC1BC,CAD0B,QAEgB,UAApB,QAAOA,EAFH,CAArB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@consta/uikit",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.20.0",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"ui-kit",
|
|
6
6
|
"design-system",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@bem-react/classname": "^1.5.12",
|
|
18
18
|
"@bem-react/classnames": "^1.3.10",
|
|
19
|
-
"@consta/icons": "^0.
|
|
19
|
+
"@consta/icons": "^0.5.2",
|
|
20
20
|
"compute-scroll-into-view": "^1.0.17",
|
|
21
21
|
"date-fns": "^2.29.1",
|
|
22
22
|
"focus-trap-react": "8.7.0",
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "../__internal__/src/hooks/useVirtualScrollCanary";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "../__internal__/src/hooks/useVirtualScrollCanary";
|