@consta/uikit 4.19.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.
Files changed (30) hide show
  1. package/__internal__/src/components/AutoCompleteCanary/useAutoComplete.js +1 -1
  2. package/__internal__/src/components/AutoCompleteCanary/useAutoComplete.js.map +1 -1
  3. package/__internal__/src/components/Button/Button.css +1 -1
  4. package/__internal__/src/components/ListCanary/ListItem/ListItem.css +1 -1
  5. package/__internal__/src/hooks/useComponentSize/getElementSize.d.ts +2 -0
  6. package/__internal__/src/hooks/useComponentSize/getElementSize.js +2 -0
  7. package/__internal__/src/hooks/useComponentSize/getElementSize.js.map +1 -0
  8. package/__internal__/src/hooks/useComponentSize/index.d.ts +2 -0
  9. package/__internal__/src/hooks/useComponentSize/index.js +1 -1
  10. package/__internal__/src/hooks/useComponentSize/index.js.map +1 -1
  11. package/__internal__/src/hooks/useComponentSize/types.d.ts +4 -0
  12. package/__internal__/src/hooks/useComponentSize/types.js +2 -0
  13. package/__internal__/src/hooks/useComponentSize/types.js.map +1 -0
  14. package/__internal__/src/hooks/useComponentSize/useComponentSize.d.ts +1 -5
  15. package/__internal__/src/hooks/useComponentSize/useComponentSize.js +1 -1
  16. package/__internal__/src/hooks/useComponentSize/useComponentSize.js.map +1 -1
  17. package/__internal__/src/hooks/useResizeObserved/useResizeObserved.js +1 -1
  18. package/__internal__/src/hooks/useResizeObserved/useResizeObserved.js.map +1 -1
  19. package/__internal__/src/hooks/useVirtualScrollCanary/hellpers.d.ts +8 -0
  20. package/__internal__/src/hooks/useVirtualScrollCanary/hellpers.js +2 -0
  21. package/__internal__/src/hooks/useVirtualScrollCanary/hellpers.js.map +1 -0
  22. package/__internal__/src/hooks/useVirtualScrollCanary/index.d.ts +1 -0
  23. package/__internal__/src/hooks/useVirtualScrollCanary/index.js +2 -0
  24. package/__internal__/src/hooks/useVirtualScrollCanary/index.js.map +1 -0
  25. package/__internal__/src/hooks/useVirtualScrollCanary/useVirtualScrollCanary.d.ts +14 -0
  26. package/__internal__/src/hooks/useVirtualScrollCanary/useVirtualScrollCanary.js +2 -0
  27. package/__internal__/src/hooks/useVirtualScrollCanary/useVirtualScrollCanary.js.map +1 -0
  28. package/package.json +2 -2
  29. package/useVirtualScrollCanary/index.d.ts +1 -0
  30. 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!==g(a).toLocaleLowerCase().indexOf(b.toLocaleLowerCase())},z=useMemo(function(){if(o&&""!==o.trim()){var a=b.filter(function(a){return i?i(a,o):y(a,o)});return a}return b},[b,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&&o&&""!==(null===o||void 0===o?void 0:o.trim())),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}}
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:transparent;border:none;border-radius:var(--control-radius);box-sizing:border-box;cursor:pointer;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:hover{color:var(--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{--color-hover:var(--color-control-typo-clear-hover);background-color:var(--color-control-bg-clear);color:var(--color-control-typo-clear)}.Button_view_clear:hover{background-color:var(--color-control-bg-clear-hover)}.Button_view_ghost{--color-hover:var(--color-control-typo-ghost-hover);background-color:var(--color-control-bg-ghost);color:var(--color-control-typo-ghost)}.Button_view_ghost:hover{background-color:var(--color-control-bg-ghost-hover)}.Button_view_primary{--color-hover:var(--color-control-typo-primary-hover);background-color:var(--color-control-bg-primary);color:var(--color-control-typo-primary)}.Button_view_primary:hover{background-color:var(--color-control-bg-primary-hover)}.Button_view_secondary{--color-hover:var(--color-control-typo-secondary-hover);background-color:var(--color-control-bg-secondary);border:var(--control-border-width) solid var(--color-control-bg-border-secondary);color:var(--color-control-typo-secondary);line-height:calc(var(--button-height) - var(--control-border-width)*2)}.Button_view_secondary:hover{background-color:var(--color-control-bg-secondary-hover);border-color:var(--color-control-bg-border-secondary-hover)}.Button_disabled,.Button_loading{background-color:var(--color-control-bg-disable);border-color:transparent;cursor:not-allowed;pointer-events:none}.Button_disabled{color:var(--color-control-typo-disable)}.Button_loading{color:transparent}.Button_width_full{width:100%}.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-Loader{--loaderBackgroundColor:var(--color-control-typo-disable);position:absolute}
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
- .ListItem{--list-item-color:var(--color-typo-primary);background:var(--color-control-bg-clear);position:relative;text-decoration:none;transition:color .3s}.ListItem.Text{color:var(--list-item-color)}.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{--list-item-color:var(--color-control-typo-secondary)}.ListItem_checked:before{opacity:1}.ListItem_disabled{--list-item-color:var(--color-control-typo-disable);cursor:auto}
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}
@@ -0,0 +1,2 @@
1
+ import { ComponentSize } from './types';
2
+ export declare const getElementSize: (el: HTMLElement | SVGGraphicsElement | null) => ComponentSize;
@@ -0,0 +1,2 @@
1
+ var defaultSize={width:0,height:0};export var getElementSize=function(a){if(!a)return defaultSize;var b=a.getBoundingClientRect(),c=b.width,d=b.height;return{width:c,height:d}};
2
+ //# sourceMappingURL=getElementSize.js.map
@@ -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 +1,3 @@
1
1
  export * from './useComponentSize';
2
+ export * from './getElementSize';
3
+ export * from './types';
@@ -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,4 @@
1
+ export declare type ComponentSize = {
2
+ width: number;
3
+ height: number;
4
+ };
@@ -0,0 +1,2 @@
1
+ export{};
2
+ //# sourceMappingURL=types.js.map
@@ -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
- export declare type ComponentSize = {
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 _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useMemo}from"react";import{useResizeObserved}from"../useResizeObserved/useResizeObserved";export var getElementSize=function(a){if(!a)return{width:0,height:0};var b=a.getBoundingClientRect(),c=b.width,d=b.height;return{width:Math.floor(c),height:Math.floor(d)}};export function useComponentSize(a){var b=useMemo(function(){return[a]},[a.current]),c=useResizeObserved(b,getElementSize),d=_slicedToArray(c,1),e=d[0];return e}
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","el","width","height","getBoundingClientRect","Math","floor","useComponentSize","ref","refs","current","componentSize"],"sources":["../../../../../src/hooks/useComponentSize/useComponentSize.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useResizeObserved } from '../useResizeObserved/useResizeObserved';\n\nexport type ComponentSize = {\n width: number;\n height: number;\n};\n\nexport const getElementSize = (\n el: HTMLElement | SVGGraphicsElement | null,\n): ComponentSize => {\n if (!el) {\n return { width: 0, height: 0 };\n }\n\n const { width, height } = el.getBoundingClientRect();\n\n return {\n width: Math.floor(width),\n height: Math.floor(height),\n };\n};\n\nexport function useComponentSize(\n ref: React.RefObject<HTMLElement | SVGGraphicsElement>,\n): ComponentSize {\n const refs = useMemo(\n () => [ref],\n // Если реф начал указывать на другой элемент, нужно обновить подписки\n [ref.current],\n );\n const [componentSize] = useResizeObserved(refs, getElementSize);\n return componentSize;\n}\n"],"mappings":"iEAAA,OAASA,OAAT,KAAwB,OAAxB,CAEA,OAASC,iBAAT,8CAOA,MAAO,IAAMC,eAAc,CAAG,SAC5BC,CAD4B,CAEV,CAClB,GAAI,CAACA,CAAL,CACE,MAAO,CAAEC,KAAK,CAAE,CAAT,CAAYC,MAAM,CAAE,CAApB,CAAP,CAGF,MAA0BF,CAAE,CAACG,qBAAH,EAA1B,CAAQF,CAAR,GAAQA,KAAR,CAAeC,CAAf,GAAeA,MAAf,CAEA,MAAO,CACLD,KAAK,CAAEG,IAAI,CAACC,KAAL,CAAWJ,CAAX,CADF,CAELC,MAAM,CAAEE,IAAI,CAACC,KAAL,CAAWH,CAAX,CAFH,CAIR,CAbM,CAeP,MAAO,SAASI,iBAAT,CACLC,CADK,CAEU,IACTC,EAAI,CAAGX,OAAO,CAClB,iBAAM,CAACU,CAAD,CAAN,CADkB,CAGlB,CAACA,CAAG,CAACE,OAAL,CAHkB,CADL,GAMSX,iBAAiB,CAACU,CAAD,CAAOT,cAAP,CAN1B,uBAMRW,CANQ,MAOf,MAAOA,EACR"}
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 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 React.useLayoutEffect(function(){g.current=b},[b]),React.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};
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","useLayoutEffect","resizeObserver","ResizeObserver","observe","disconnect"],"sources":["../../../../../src/hooks/useResizeObserved/useResizeObserved.ts"],"sourcesContent":["import React, { RefObject } 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 React.useLayoutEffect(() => {\n mapperRef.current = mapper;\n }, [mapper]);\n\n React.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,KAAiC,OAAjC,CAEA,MAAO,IAAMC,kBAAiB,CAAG,SAI/BC,CAJ+B,CAK/BC,CAL+B,CAMb,OACkBH,KAAK,CAACI,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,CAAGV,KAAK,CAACW,MAAN,CAAaR,CAAb,CANA,CAyBlB,MAlBAH,MAAK,CAACY,eAAN,CAAsB,UAAM,CAC1BF,CAAS,CAACH,OAAV,CAAoBJ,CACrB,CAFD,CAEG,CAACA,CAAD,CAFH,CAkBA,CAdAH,KAAK,CAACY,eAAN,CAAsB,UAAM,OACpBC,CAAc,CAAG,GAAIC,eAAJ,CAAmB,UAAM,CAC9CL,CAAa,CAACP,CAAI,CAACG,GAAL,CAAS,SAACC,CAAD,QAASI,EAAS,CAACH,OAAV,CAAkBD,CAAG,CAACC,OAAtB,CAAT,CAAT,CAAD,CACd,CAFsB,CADG,8BAKRL,CALQ,MAK1B,2BAAwB,IAAbI,EAAa,SACtBA,CAAG,CAACC,OAAJ,EAAeM,CAAc,CAACE,OAAf,CAAuBT,CAAG,CAACC,OAA3B,CAChB,CAPyB,+BAS1B,MAAO,WAAM,CACXM,CAAc,CAACG,UAAf,EACD,CACF,CAZD,CAYG,CAACd,CAAD,CAZH,CAcA,CAAOM,CACR,CAhCM"}
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,2 @@
1
+ export*from"./useVirtualScrollCanary";
2
+ //# sourceMappingURL=index.js.map
@@ -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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@consta/uikit",
3
- "version": "4.19.0",
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.1.1",
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";