@consta/uikit 4.20.0 → 4.21.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/Button/Button.js +1 -1
- package/__internal__/src/components/Button/Button.js.map +1 -1
- package/__internal__/src/components/Checkbox/Checkbox.css +1 -1
- package/__internal__/src/components/Collapse/Collapse.css +1 -1
- package/__internal__/src/components/Collapse/Collapse.js +1 -1
- package/__internal__/src/components/Collapse/Collapse.js.map +1 -1
- package/__internal__/src/components/Collapse/types.d.ts +6 -2
- package/__internal__/src/components/Collapse/types.js +1 -1
- package/__internal__/src/components/Collapse/types.js.map +1 -1
- package/__internal__/src/components/CollapseGroup/CollapseGroup.js +1 -1
- package/__internal__/src/components/CollapseGroup/CollapseGroup.js.map +1 -1
- package/__internal__/src/components/CollapseGroup/helpers.d.ts +8 -5
- package/__internal__/src/components/CollapseGroup/helpers.js.map +1 -1
- package/__internal__/src/components/ListCanary/ListItem/ListItem.js +1 -1
- package/__internal__/src/components/ListCanary/ListItem/ListItem.js.map +1 -1
- package/__internal__/src/components/SelectComponents/Select.css +1 -1
- package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.js +1 -1
- package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.js.map +1 -1
- package/__internal__/src/components/Tabs/Tab/TabsTab.d.ts +2 -11
- package/__internal__/src/components/Tabs/Tab/TabsTab.js +1 -1
- package/__internal__/src/components/Tabs/Tab/TabsTab.js.map +1 -1
- package/__internal__/src/components/Tabs/Tabs.d.ts +0 -2
- package/__internal__/src/components/Tabs/Tabs.js +1 -1
- package/__internal__/src/components/Tabs/Tabs.js.map +1 -1
- package/__internal__/src/components/Tabs/helpers.d.ts +7 -1
- package/__internal__/src/components/Tabs/helpers.js +1 -1
- package/__internal__/src/components/Tabs/helpers.js.map +1 -1
- package/__internal__/src/components/Tabs/index.d.ts +1 -0
- package/__internal__/src/components/Tabs/index.js +1 -1
- package/__internal__/src/components/Tabs/index.js.map +1 -1
- package/__internal__/src/components/Tabs/types.d.ts +16 -3
- package/__internal__/src/components/Tabs/types.js.map +1 -1
- package/__internal__/src/components/Text/Text.css +1 -1
- package/__internal__/src/components/Text/Text.d.ts +1 -1
- package/__internal__/src/components/Text/Text.js +1 -1
- package/__internal__/src/components/Text/Text.js.map +1 -1
- package/__internal__/src/components/TextField/TextField.js +1 -1
- package/__internal__/src/components/TextField/TextField.js.map +1 -1
- package/__internal__/src/hocs/withTooltip/withTooltip.d.ts +1 -1
- package/__internal__/src/hocs/withTooltip/withTooltip.js +1 -1
- package/__internal__/src/hocs/withTooltip/withTooltip.js.map +1 -1
- package/package.json +1 -1
|
@@ -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!!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}}
|
|
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,b]),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","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
|
+
{"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, items],\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{--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(.
|
|
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_disabled):hover,.Button:not(.Button_disabled):not(.Button_loading):hover,.Button:not(.Button_loading):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_disabled):hover,.Button_view_secondary:not(.Button_disabled):not(.Button_loading):hover,.Button_view_secondary:not(.Button_loading):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;--button-color-hover:var(--button-color-disable);--button-bg-color-hover:var(--button-bg-color-disable);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:not(.Button_disabled){--button-color-hover:transparent;--button-bg-color-hover:var(--button-bg-color)}.Button_loading.Button_disabled{--button-cursor:not-allowed;color:transparent}.Button_loading .Button-Loader{--loaderBackgroundColor:var(--button-loader-color);position:absolute}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","view","width","form","iconLeft","iconRight","label","className","onClick","disabled","loading","tabIndex","as","onlyIcon","iconSize"];import"./Button.css";import React,{useRef}from"react";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{cnMixFocus}from"../../mixs/MixFocus/MixFocus";import{cn}from"../../utils/bem";import{getByMap}from"../../utils/getByMap";import{forwardRefWithAs}from"../../utils/types/PropsWithAsAttributes";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{Loader}from"../Loader/Loader";export var buttonPropSize=["m","xs","s","l"];export var buttonPropSizeDefault=buttonPropSize[0];export var buttonPropView=["primary","clear","ghost","secondary"];export var buttonPropViewDefault=buttonPropView[0];export var buttonPropWidth=["default","full"];export var buttonPropWidthDefault=buttonPropWidth[0];export var buttonPropForm=["default","brick","round","brickRound","roundBrick","brickDefault","defaultBrick"];var mapStableForm={default:"default",defaultClear:"defaultBrick",defaultBrick:"defaultBrick",brick:"brick",brickDefault:"brickDefault",brickClear:"brick",brickRound:"brickRound",round:"round",roundClear:"roundBrick",roundBrick:"roundBrick",clearRound:"brickRound",clearDefault:"brickDefault",clearBrick:"brick",clearClear:"brick"};export var buttonPropFormDefault=buttonPropForm[0];export var COMPONENT_NAME="Button";export var cnButton=cn("Button");var sizeMap={xs:"xs",s:"xs",m:"s",l:"m"},sizeMapOnlyIcon={xs:"xs",s:"s",m:"m",l:"m"};export var Button=forwardRefWithAs(function(a,b){var c=useRef(null),d=usePropsHandler(COMPONENT_NAME,a,c),e=d.size,f=void 0===e?buttonPropSizeDefault:e,g=d.view,h=void 0===g?buttonPropViewDefault:g,i=d.width,j=void 0===i?buttonPropWidthDefault:i,k=d.form,l=void 0===k?buttonPropFormDefault:k,m=d.iconLeft,n=d.iconRight,o=d.label,p=d.className,q=d.onClick,r=d.disabled,s=d.loading,t=d.tabIndex,u=d.as,v=void 0===u?"button":u,w=d.onlyIcon,x=d.iconSize,y=_objectWithoutProperties(d,_excluded),z=
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","view","width","form","iconLeft","iconRight","label","className","onClick","disabled","loading","tabIndex","as","onlyIcon","iconSize"];import"./Button.css";import React,{useRef}from"react";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{cnMixFocus}from"../../mixs/MixFocus/MixFocus";import{cn}from"../../utils/bem";import{getByMap}from"../../utils/getByMap";import{forwardRefWithAs}from"../../utils/types/PropsWithAsAttributes";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{Loader}from"../Loader/Loader";export var buttonPropSize=["m","xs","s","l"];export var buttonPropSizeDefault=buttonPropSize[0];export var buttonPropView=["primary","clear","ghost","secondary"];export var buttonPropViewDefault=buttonPropView[0];export var buttonPropWidth=["default","full"];export var buttonPropWidthDefault=buttonPropWidth[0];export var buttonPropForm=["default","brick","round","brickRound","roundBrick","brickDefault","defaultBrick"];var mapStableForm={default:"default",defaultClear:"defaultBrick",defaultBrick:"defaultBrick",brick:"brick",brickDefault:"brickDefault",brickClear:"brick",brickRound:"brickRound",round:"round",roundClear:"roundBrick",roundBrick:"roundBrick",clearRound:"brickRound",clearDefault:"brickDefault",clearBrick:"brick",clearClear:"brick"};export var buttonPropFormDefault=buttonPropForm[0];export var COMPONENT_NAME="Button";export var cnButton=cn("Button");var sizeMap={xs:"xs",s:"xs",m:"s",l:"m"},sizeMapOnlyIcon={xs:"xs",s:"s",m:"m",l:"m"};export var Button=forwardRefWithAs(function(a,b){var c=useRef(null),d=usePropsHandler(COMPONENT_NAME,a,c),e=d.size,f=void 0===e?buttonPropSizeDefault:e,g=d.view,h=void 0===g?buttonPropViewDefault:g,i=d.width,j=void 0===i?buttonPropWidthDefault:i,k=d.form,l=void 0===k?buttonPropFormDefault:k,m=d.iconLeft,n=d.iconRight,o=d.label,p=d.className,q=d.onClick,r=d.disabled,s=d.loading,t=d.tabIndex,u=d.as,v=void 0===u?"button":u,w=d.onlyIcon,x=d.iconSize,y=_objectWithoutProperties(d,_excluded),z=(!o||w)&&(m||n),A=m,B=n,C=a.title||!!z&&o||void 0,D=z?getByMap(sizeMapOnlyIcon,f,x):getByMap(sizeMap,f,x);return React.createElement(v,Object.assign({},y,{onClick:q?function handleClick(a){r||s||!q||q(a)}:void 0,className:cnButton({size:f,view:h,width:j,form:mapStableForm[l],disabled:r,loading:s,withIcon:!!m||!!n,onlyIcon:!!z},[r||s?void 0:cnMixFocus(),p]),tabIndex:t,title:C,ref:useForkRef([b,c])}),z&&React.createElement(z,{className:cnButton("Icon"),size:D}),!z&&((A||B)&&o?React.createElement(React.Fragment,null,A&&React.createElement(A,{className:cnButton("Icon",{position:"left"}),size:D}),React.createElement("span",{className:cnButton("Label")},o),B&&React.createElement(B,{className:cnButton("Icon",{position:"right"}),size:D})):o),s&&React.createElement(Loader,{className:cnButton("Loader"),size:"s"}))});
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["React","useRef","useForkRef","cnMixFocus","cn","getByMap","forwardRefWithAs","usePropsHandler","Loader","buttonPropSize","buttonPropSizeDefault","buttonPropView","buttonPropViewDefault","buttonPropWidth","buttonPropWidthDefault","buttonPropForm","mapStableForm","defaultClear","defaultBrick","brick","brickDefault","brickClear","brickRound","round","roundClear","roundBrick","clearRound","clearDefault","clearBrick","clearClear","buttonPropFormDefault","COMPONENT_NAME","cnButton","sizeMap","xs","s","m","l","sizeMapOnlyIcon","Button","props","ref","buttonRef","size","view","width","form","iconLeft","iconRight","label","className","onClick","disabled","loading","tabIndex","as","onlyIcon","iconSizeProp","iconSize","otherProps","
|
|
1
|
+
{"version":3,"file":"Button.js","names":["React","useRef","useForkRef","cnMixFocus","cn","getByMap","forwardRefWithAs","usePropsHandler","Loader","buttonPropSize","buttonPropSizeDefault","buttonPropView","buttonPropViewDefault","buttonPropWidth","buttonPropWidthDefault","buttonPropForm","mapStableForm","defaultClear","defaultBrick","brick","brickDefault","brickClear","brickRound","round","roundClear","roundBrick","clearRound","clearDefault","clearBrick","clearClear","buttonPropFormDefault","COMPONENT_NAME","cnButton","sizeMap","xs","s","m","l","sizeMapOnlyIcon","Button","props","ref","buttonRef","size","view","width","form","iconLeft","iconRight","label","className","onClick","disabled","loading","tabIndex","as","onlyIcon","iconSizeProp","iconSize","otherProps","IconOnly","IconLeft","IconRight","title","handleClick","e","withIcon","position"],"sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import './Button.css';\n\nimport { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport React, { useRef } from 'react';\n\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { cnMixFocus } from '../../mixs/MixFocus/MixFocus';\nimport { cn } from '../../utils/bem';\nimport { getByMap } from '../../utils/getByMap';\nimport { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport { Loader } from '../Loader/Loader';\n\nexport const buttonPropSize = ['m', 'xs', 's', 'l'] as const;\nexport type ButtonPropSize = typeof buttonPropSize[number];\nexport const buttonPropSizeDefault: ButtonPropSize = buttonPropSize[0];\n\nexport const buttonPropView = [\n 'primary',\n 'clear',\n 'ghost',\n 'secondary',\n] as const;\nexport type ButtonPropView = typeof buttonPropView[number];\nexport const buttonPropViewDefault: ButtonPropView = buttonPropView[0];\n\nexport const buttonPropWidth = ['default', 'full'] as const;\nexport type ButtonPropWidth = typeof buttonPropWidth[number];\nexport const buttonPropWidthDefault: ButtonPropWidth = buttonPropWidth[0];\n\nexport const buttonPropForm = [\n 'default',\n 'brick',\n 'round',\n 'brickRound',\n 'roundBrick',\n 'brickDefault',\n 'defaultBrick',\n] as const;\n\nexport type ButtonPropForm = typeof buttonPropForm[number];\n\ntype GlobalForm =\n | 'default'\n | 'brick'\n | 'round'\n | 'brickRound'\n | 'roundBrick'\n | 'brickDefault'\n | 'defaultBrick'\n | 'defaultClear'\n | 'brickClear'\n | 'roundClear'\n | 'clearRound'\n | 'clearDefault'\n | 'clearBrick'\n | 'clearClear';\n\nconst mapStableForm: Record<GlobalForm, ButtonPropForm> = {\n default: 'default',\n defaultClear: 'defaultBrick',\n defaultBrick: 'defaultBrick',\n brick: 'brick',\n brickDefault: 'brickDefault',\n brickClear: 'brick',\n brickRound: 'brickRound',\n round: 'round',\n roundClear: 'roundBrick',\n roundBrick: 'roundBrick',\n clearRound: 'brickRound',\n clearDefault: 'brickDefault',\n clearBrick: 'brick',\n clearClear: 'brick',\n};\n\nexport const buttonPropFormDefault = buttonPropForm[0];\n\nexport type Props = {\n size?: ButtonPropSize;\n view?: ButtonPropView;\n width?: ButtonPropWidth;\n form?: ButtonPropForm;\n tabIndex?: number;\n disabled?: boolean;\n loading?: boolean;\n label?: string | number;\n onClick?: React.EventHandler<React.MouseEvent>;\n iconLeft?: IconComponent;\n iconRight?: IconComponent;\n onlyIcon?: boolean;\n iconSize?: IconPropSize;\n title?: string;\n children?: never;\n};\n\nexport const COMPONENT_NAME = 'Button' as const;\nexport const cnButton = cn(COMPONENT_NAME);\n\nconst sizeMap: Record<ButtonPropSize, IconPropSize> = {\n xs: 'xs',\n s: 'xs',\n m: 's',\n l: 'm',\n};\n\nconst sizeMapOnlyIcon: Record<ButtonPropSize, IconPropSize> = {\n xs: 'xs',\n s: 's',\n m: 'm',\n l: 'm',\n};\n\nexport const Button = forwardRefWithAs<Props, 'button'>((props, ref) => {\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n const {\n size = buttonPropSizeDefault,\n view = buttonPropViewDefault,\n width = buttonPropWidthDefault,\n form = buttonPropFormDefault,\n iconLeft,\n iconRight,\n label,\n className,\n onClick,\n disabled,\n loading,\n tabIndex,\n as = 'button',\n onlyIcon,\n iconSize: iconSizeProp,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, props, buttonRef);\n\n const Tag = as as string;\n const IconOnly = (!label || onlyIcon) && (iconLeft || iconRight);\n const IconLeft = iconLeft;\n const IconRight = iconRight;\n const withIcon = !!iconLeft || !!iconRight;\n const title = props.title || (!!IconOnly && label) || undefined;\n const iconSize = IconOnly\n ? getByMap(sizeMapOnlyIcon, size, iconSizeProp)\n : getByMap(sizeMap, size, iconSizeProp);\n\n const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!disabled && !loading && onClick) {\n onClick(e);\n }\n };\n\n return (\n <Tag\n {...otherProps}\n onClick={onClick ? handleClick : undefined}\n className={cnButton(\n {\n size,\n view,\n width,\n form: mapStableForm[form],\n disabled,\n loading,\n withIcon,\n onlyIcon: !!IconOnly,\n },\n [!(disabled || loading) ? cnMixFocus() : undefined, className],\n )}\n tabIndex={tabIndex}\n title={title}\n ref={useForkRef([ref, buttonRef])}\n >\n {IconOnly && <IconOnly className={cnButton('Icon')} size={iconSize} />}\n {!IconOnly &&\n ((IconLeft || IconRight) && label ? (\n <>\n {IconLeft && (\n <IconLeft\n className={cnButton('Icon', { position: 'left' })}\n size={iconSize}\n />\n )}\n <span className={cnButton('Label')}>{label}</span>\n {IconRight && (\n <IconRight\n className={cnButton('Icon', { position: 'right' })}\n size={iconSize}\n />\n )}\n </>\n ) : (\n label\n ))}\n {loading && <Loader className={cnButton('Loader')} size=\"s\" />}\n </Tag>\n );\n});\n"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
.Checkbox{cursor:pointer;display:inline-flex;font-family:var(--font-sans);position:relative}.Checkbox_size_xs{--checkbox-font-size:var(--control-text-size-xs);--checkbox-size:var(--control-box-size-s);--checkbox-offset:var(--space-xs);--checkbox-arrow-width:calc(var(--space-3xs)*3/4)}.Checkbox_size_s{--checkbox-font-size:var(--control-text-size-s);--checkbox-size:calc(var(--control-box-size-s) + var(--space-3xs));--checkbox-offset:var(--space-xs);--checkbox-arrow-width:calc(var(--space-3xs)*3/4)}.Checkbox_size_m{--checkbox-font-size:var(--control-text-size-m);--checkbox-size:var(--control-box-size-m);--checkbox-offset:var(--space-xs);--checkbox-arrow-width:var(--space-3xs)}.Checkbox_size_l{--checkbox-font-size:var(--control-text-size-l);--checkbox-size:var(--control-box-size-l);--checkbox-offset:var(--space-s);--checkbox-arrow-width:var(--space-3xs)}.Checkbox_view_primary{--checkbox-checked-border:var(--color-control-bg-primary);--checkbox-checked-background:var(--color-control-bg-primary);--checkbox-checked-check:var(--color-control-typo-primary);--checkbox-checked-border-hover:var(--color-control-bg-primary-hover);--checkbox-checked-background-hover:var(
|
|
2
2
|
--color-control-bg-primary-hover
|
|
3
|
-
)}.Checkbox_view_ghost{--checkbox-checked-border:var(--color-control-bg-border-default);--checkbox-checked-background:var(--color-control-bg-ghost);--checkbox-checked-check:var(--color-control-typo-ghost);--checkbox-checked-border-hover:var(--color-control-bg-border-default);--checkbox-checked-background-hover:var(--color-control-bg-ghost-hover)}.Checkbox_intermediate .Checkbox-Input,.Checkbox_intermediate .Checkbox-Input:checked,.Checkbox_intermediate:hover .Checkbox-Input,.Checkbox_intermediate:hover .Checkbox-Input:checked{background-color:var(--checkbox-checked-background);border-color:var(--checkbox-checked-border)}.Checkbox_intermediate .Checkbox-Input:before,.Checkbox_intermediate .Checkbox-Input:checked:before,.Checkbox_intermediate:hover .Checkbox-Input:before,.Checkbox_intermediate:hover .Checkbox-Input:checked:before{background-color:var(--checkbox-checked-check);border:none;opacity:1;transform:rotate(0) scaleY(.48) translateY(-50%);transition:opacity .15s,transform .15s,background-color .08s .04s}.Checkbox_disabled{pointer-events:none}.Checkbox_disabled .Checkbox-Input:disabled{background-color:var(--color-control-bg-disable);border-color:transparent}.Checkbox_disabled .Checkbox-Input:disabled:before{border-color:var(--color-control-typo-disable)}.Checkbox_disabled.Checkbox_intermediate .Checkbox-Input:disabled:before{background-color:var(--color-control-typo-disable)}.Checkbox_disabled .Checkbox-Input:disabled~.Checkbox-Label{color:var(--color-control-typo-disable)}.Checkbox_align_center{align-items:center}.Checkbox_align_top{align-items:top}.Checkbox_align_top .Checkbox-Input{margin-top:var(--space-3xs)}.Checkbox-Label{color:var(--color-control-typo-default);font-size:var(--checkbox-font-size);margin-left:var(--checkbox-offset)}.Checkbox-Input{-webkit-appearance:none;background-color:transparent;border:var(--control-border-width) solid var(--color-control-bg-border-default);border-radius:var(--control-radius);box-sizing:border-box;cursor:pointer;flex-shrink:0;height:var(--checkbox-size);margin:0;max-width:var(--checkbox-size);padding:0;position:relative;transition:border-color .15s,background-color .15s;width:var(--checkbox-size)}.Checkbox-Input:before{background-color:var(--color-control-bg-affect);border-bottom:var(--checkbox-arrow-width) solid var(--checkbox-checked-check);border-left:var(--checkbox-arrow-width) solid var(--checkbox-checked-check);box-sizing:border-box;content:"";height:calc(var(--checkbox-size)*.35);left:calc(var(--checkbox-size)/5 - 1.2px);opacity:0;position:absolute;top:calc(var(--checkbox-size)/2 - .5px);transform:rotate(-50deg) scaleX(0);transform-origin:0 0;transition:opacity .15s,transform .15s,background-color .08s;width:calc(var(--checkbox-size)*.6)
|
|
3
|
+
)}.Checkbox_view_ghost{--checkbox-checked-border:var(--color-control-bg-border-default);--checkbox-checked-background:var(--color-control-bg-ghost);--checkbox-checked-check:var(--color-control-typo-ghost);--checkbox-checked-border-hover:var(--color-control-bg-border-default);--checkbox-checked-background-hover:var(--color-control-bg-ghost-hover)}.Checkbox_intermediate .Checkbox-Input,.Checkbox_intermediate .Checkbox-Input:checked,.Checkbox_intermediate:hover .Checkbox-Input,.Checkbox_intermediate:hover .Checkbox-Input:checked{background-color:var(--checkbox-checked-background);border-color:var(--checkbox-checked-border)}.Checkbox_intermediate .Checkbox-Input:before,.Checkbox_intermediate .Checkbox-Input:checked:before,.Checkbox_intermediate:hover .Checkbox-Input:before,.Checkbox_intermediate:hover .Checkbox-Input:checked:before{background-color:var(--checkbox-checked-check);border:none;opacity:1;transform:rotate(0) scaleY(.48) translateY(-50%);transition:opacity .15s,transform .15s,background-color .08s .04s}.Checkbox_disabled{pointer-events:none}.Checkbox_disabled .Checkbox-Input:disabled{background-color:var(--color-control-bg-disable);border-color:transparent}.Checkbox_disabled .Checkbox-Input:disabled:before{border-color:var(--color-control-typo-disable)}.Checkbox_disabled.Checkbox_intermediate .Checkbox-Input:disabled:before{background-color:var(--color-control-typo-disable)}.Checkbox_disabled .Checkbox-Input:disabled~.Checkbox-Label{color:var(--color-control-typo-disable)}.Checkbox_align_center{align-items:center}.Checkbox_align_top{align-items:top}.Checkbox_align_top .Checkbox-Input{margin-top:var(--space-3xs)}.Checkbox-Label{color:var(--color-control-typo-default);font-size:var(--checkbox-font-size);margin-left:var(--checkbox-offset)}.Checkbox-Input{-webkit-appearance:none;background-color:transparent;border:var(--control-border-width) solid var(--color-control-bg-border-default);border-radius:var(--control-radius);box-sizing:border-box;cursor:pointer;flex-shrink:0;height:var(--checkbox-size);margin:0;max-width:var(--checkbox-size);padding:0;position:relative;transition:border-color .15s,background-color .15s;width:var(--checkbox-size)}.Checkbox-Input:before{background-color:var(--color-control-bg-affect);border-bottom:var(--checkbox-arrow-width) solid var(--checkbox-checked-check);border-left:var(--checkbox-arrow-width) solid var(--checkbox-checked-check);box-sizing:border-box;content:"";height:calc(var(--checkbox-size)*.35);left:calc(var(--checkbox-size)/5 - 1.2px);opacity:0;position:absolute;top:calc(var(--checkbox-size)/2 - .5px);transform:rotate(-50deg) scaleX(0);transform-origin:0 0;transition:opacity .15s,transform .15s,background-color .08s;width:calc(var(--checkbox-size)*.6)}.Checkbox-Input:checked{background-color:var(--checkbox-checked-background);border-color:var(--checkbox-checked-border)}.Checkbox-Input:checked:before{opacity:1;transform:rotate(-50deg) scale(1)}.Checkbox:hover .Checkbox-Input{border-color:var(--color-control-bg-border-default-hover)}.Checkbox:hover .Checkbox-Input:checked{background-color:var(--checkbox-checked-background-hover);border-color:var(--checkbox-checked-border-hover)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Collapse{color:var(--
|
|
1
|
+
.Collapse{color:var(--color-typo-primary)}.Collapse_size_2xs,.Collapse_size_xs{--vertical-space:var(--space-2xs);--elements-offset:var(--space-xs);--body-offset-up:var(--space-2xs);--body-offset-bottom:var(--space-xs)}.Collapse_size_s{--vertical-space:var(--space-xs);--elements-offset:var(--space-xs);--body-offset-up:var(--space-xs);--body-offset-bottom:var(--space-m)}.Collapse_size_l,.Collapse_size_m{--vertical-space:var(--space-s);--elements-offset:var(--space-s);--body-offset-up:var(--space-s);--body-offset-bottom:var(--space-xl)}.Collapse_view_clear{--collapse-bg:transparent;--collapse-bg-hover:var(--color-control-bg-clear-hover)}.Collapse_view_ghost{--collapse-bg:var(--color-control-bg-ghost);--collapse-bg-hover:var(--color-control-bg-ghost-hover)}.Collapse-Label{align-items:center;background:var(--collapse-bg);border-radius:var(--collapse-label-radius);cursor:pointer;display:flex;flex-direction:row;padding:var(--collapse-label-padding);transition:background .3s}.Collapse-Label_hoverEffect:hover{background:var(--collapse-bg-hover)}.Collapse-Label_iconPosition_right{flex-direction:row-reverse}.Collapse-Label_form_brick{--collapse-label-padding:var(--vertical-space) var(--horizontal-space);--collapse-label-radius:0}.Collapse-Label_form_default{--collapse-label-padding:var(--vertical-space) var(--horizontal-space);--collapse-label-radius:var(--control-radius)}.Collapse-Label_form_round{--collapse-label-padding:var(--vertical-space) var(--horizontal-space);--collapse-label-radius:var(--space-3xl)}.Collapse-Body{max-height:0;overflow:hidden;transition:max-height .3s;transition-timing-function:cubic-bezier(.7,0,.5,1)}.Collapse-Body_isOpen{max-height:var(--collapse-body-max-height)}.Collapse-Body_divider{border-bottom:1px solid var(--color-bg-border)}.Collapse-Side{line-height:0;margin-left:var(--elements-offset)}.Collapse-Content{padding:var(--body-offset-up) var(--horizontal-space) var(--body-offset-bottom) var(--horizontal-space)}.Collapse-Icon{flex:none}.Collapse-Icon_position_left{margin-right:var(--elements-offset)}.Collapse-Icon_position_right{margin-left:var(--elements-offset)}.Collapse-LabelText{flex:1}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var _excluded=["label","size","view","className","maxContentHeight","isOpen","children","hoverEffect","divider","icon","closeIcon","rightSide","horizontalSpace","iconPosition","directionIcon","closeDirectionIcon","style","iconView"];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"./Collapse.css";import{IconArrowDown}from"@consta/icons/IconArrowDown";import React,{useRef}from"react";import{useComponentSize}from"../../hooks/useComponentSize";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{cn}from"../../utils/bem";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{Text}from"../Text/Text";import{CollapseIcon}from"./CollapseIcon/CollapseIcon";import{collapsePropCloseDirectionIconDefault,collapsePropDirectionIconDefault,collapsePropIconPositionDefault,collapsePropIconViewDefault,collapsePropSizeDefault,collapsePropViewDefault}from"./types";export var COMPONENT_NAME="Collapse";export var cnCollapse=cn("Collapse");export var sizeIconMap={"2xs":"xs",xs:"xs",s:"xs",m:"s",l:"s"};function renderSide(a){var b=a?_toConsumableArray(Array.isArray(a)?a:[a]):[];return b.map(function(a,b){return React.createElement("div",{className:cnCollapse("Side"),key:b},a)})}var getMaxHeight=function(a,b){return b?"string"==typeof b?b:"".concat(b,"px"):"".concat(a,"px")};export var Collapse=React.forwardRef(function(a,b){var c=useRef(null),d=useRef(null),e=useComponentSize(d),f=e.height,g=usePropsHandler(COMPONENT_NAME,a,c),h=g.label,i=g.size,j=void 0===i?collapsePropSizeDefault:i,k=g.view,l=void 0===k?collapsePropViewDefault:k,m=g.className,n=g.maxContentHeight,o=g.isOpen,p=g.
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var _excluded=["label","size","view","className","maxContentHeight","isOpen","form","children","hoverEffect","divider","icon","closeIcon","rightSide","horizontalSpace","iconPosition","directionIcon","closeDirectionIcon","style","iconView"];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"./Collapse.css";import{IconArrowDown}from"@consta/icons/IconArrowDown";import React,{useRef}from"react";import{useComponentSize}from"../../hooks/useComponentSize";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{cn}from"../../utils/bem";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{Text}from"../Text/Text";import{CollapseIcon}from"./CollapseIcon/CollapseIcon";import{collapsePropCloseDirectionIconDefault,collapsePropDirectionIconDefault,collapsePropFormDefault,collapsePropIconPositionDefault,collapsePropIconViewDefault,collapsePropSizeDefault,collapsePropViewDefault}from"./types";export var COMPONENT_NAME="Collapse";export var cnCollapse=cn("Collapse");export var sizeIconMap={"2xs":"xs",xs:"xs",s:"xs",m:"s",l:"s"};function renderSide(a){var b=a?_toConsumableArray(Array.isArray(a)?a:[a]):[];return b.map(function(a,b){return React.createElement("div",{className:cnCollapse("Side"),key:b},a)})}var getMaxHeight=function(a,b){return b?"string"==typeof b?b:"".concat(b,"px"):"".concat(a,"px")},collapseViewMap={clear:"clear",ghost:"ghost",primary:"clear",secondary:"ghost"};export var Collapse=React.forwardRef(function(a,b){var c=useRef(null),d=useRef(null),e=useComponentSize(d),f=e.height,g=usePropsHandler(COMPONENT_NAME,a,c),h=g.label,i=g.size,j=void 0===i?collapsePropSizeDefault:i,k=g.view,l=void 0===k?collapsePropViewDefault:k,m=g.className,n=g.maxContentHeight,o=g.isOpen,p=g.form,q=void 0===p?collapsePropFormDefault:p,r=g.children,s=g.hoverEffect,t=g.divider,u=g.icon,v=void 0===u?IconArrowDown:u,w=g.closeIcon,x=g.rightSide,y=g.horizontalSpace,z=g.iconPosition,A=void 0===z?collapsePropIconPositionDefault:z,B=g.directionIcon,C=void 0===B?collapsePropDirectionIconDefault:B,D=g.closeDirectionIcon,E=void 0===D?collapsePropCloseDirectionIconDefault:D,F=g.style,G=g.iconView,H=void 0===G?collapsePropIconViewDefault:G,I=_objectWithoutProperties(g,_excluded),J=collapseViewMap[l];return React.createElement("div",{ref:useForkRef([b,c]),className:cnCollapse({size:j,view:J},[m]),style:_objectSpread(_objectSpread({},F),{},_defineProperty({},"--horizontal-space",y?"var(--space-".concat(y,")"):"0px"))},React.createElement("div",Object.assign({className:cnCollapse("Label",{hoverEffect:s,iconPosition:A,view:J,form:q})},I),React.createElement(CollapseIcon,{className:cnCollapse("Icon",{position:A}),size:sizeIconMap[j],icon:v,closeIcon:w,isOpen:o,direction:C,closeDirection:E,view:H}),"object"==typeof h?React.createElement("div",{className:cnCollapse("LabelText")},h):React.createElement(Text,{className:cnCollapse("LabelText"),size:j},h),"left"===A&&renderSide(x)),React.createElement("div",{style:_defineProperty({},"--collapse-body-max-height",getMaxHeight(f,n)),className:cnCollapse("Body",{isOpen:o,divider:t})},React.createElement("div",{ref:d,className:cnCollapse("Content")},r)))});export*from"./types";
|
|
2
2
|
//# sourceMappingURL=Collapse.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collapse.js","names":["IconArrowDown","React","useRef","useComponentSize","useForkRef","cn","usePropsHandler","Text","CollapseIcon","collapsePropCloseDirectionIconDefault","collapsePropDirectionIconDefault","collapsePropIconPositionDefault","collapsePropIconViewDefault","collapsePropSizeDefault","collapsePropViewDefault","COMPONENT_NAME","cnCollapse","sizeIconMap","renderSide","side","sides","Array","isArray","map","item","index","getMaxHeight","height","maxHeight","Collapse","forwardRef","props","ref","collapseRef","contentRef","contentHeight","label","size","view","className","maxContentHeight","isOpen","children","hoverEffect","divider","icon","closeIcon","rightSide","horizontalSpace","iconPosition","directionIcon","closeDirectionIcon","style","iconView","otherProps","position"],"sources":["../../../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import './Collapse.css';\n\nimport { IconArrowDown } from '@consta/icons/IconArrowDown';\nimport React, { useRef } from 'react';\n\nimport { useComponentSize } from '##/hooks/useComponentSize';\nimport { useForkRef } from '##/hooks/useForkRef/useForkRef';\nimport { cn } from '##/utils/bem';\n\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport { Text } from '../Text/Text';\nimport { CollapseIcon } from './CollapseIcon/CollapseIcon';\nimport {\n CollapseComponent,\n collapsePropCloseDirectionIconDefault,\n collapsePropDirectionIconDefault,\n collapsePropIconPositionDefault,\n collapsePropIconViewDefault,\n CollapseProps,\n CollapsePropSize,\n collapsePropSizeDefault,\n collapsePropViewDefault,\n} from './types';\n\nexport const COMPONENT_NAME = 'Collapse' as const;\n\nexport const cnCollapse = cn('Collapse');\n\nexport const sizeIconMap: Record<CollapsePropSize, 'xs' | 's'> = {\n '2xs': 'xs',\n 'xs': 'xs',\n 's': 'xs',\n 'm': 's',\n 'l': 's',\n};\n\nfunction renderSide(side: React.ReactNode): React.ReactNode {\n const sides = side ? [...(Array.isArray(side) ? side : [side])] : [];\n\n return sides.map((item, index) => (\n <div className={cnCollapse('Side')} key={index}>\n {item}\n </div>\n ));\n}\n\nconst getMaxHeight = (height: number, maxHeight?: number | string) => {\n if (maxHeight) {\n return typeof maxHeight === 'string' ? maxHeight : `${maxHeight}px`;\n }\n return `${height}px`;\n};\n\nexport const Collapse: CollapseComponent = React.forwardRef<\n HTMLDivElement,\n CollapseProps\n>((props, ref) => {\n const collapseRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const { height: contentHeight } = useComponentSize(contentRef);\n\n const {\n label,\n size = collapsePropSizeDefault,\n view = collapsePropViewDefault,\n className,\n maxContentHeight,\n isOpen,\n children,\n hoverEffect,\n divider,\n icon = IconArrowDown,\n closeIcon,\n rightSide,\n horizontalSpace,\n iconPosition = collapsePropIconPositionDefault,\n directionIcon = collapsePropDirectionIconDefault,\n closeDirectionIcon = collapsePropCloseDirectionIconDefault,\n style,\n iconView = collapsePropIconViewDefault,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, props, collapseRef);\n\n return (\n <div\n ref={useForkRef([ref, collapseRef])}\n className={cnCollapse({ size, view }, [className])}\n style={{\n ...style,\n ['--horizontal-space' as string]: horizontalSpace\n ? `var(--space-${horizontalSpace})`\n :
|
|
1
|
+
{"version":3,"file":"Collapse.js","names":["IconArrowDown","React","useRef","useComponentSize","useForkRef","cn","usePropsHandler","Text","CollapseIcon","collapsePropCloseDirectionIconDefault","collapsePropDirectionIconDefault","collapsePropFormDefault","collapsePropIconPositionDefault","collapsePropIconViewDefault","collapsePropSizeDefault","collapsePropViewDefault","COMPONENT_NAME","cnCollapse","sizeIconMap","renderSide","side","sides","Array","isArray","map","item","index","getMaxHeight","height","maxHeight","collapseViewMap","clear","ghost","primary","secondary","Collapse","forwardRef","props","ref","collapseRef","contentRef","contentHeight","label","size","view","viewProp","className","maxContentHeight","isOpen","form","children","hoverEffect","divider","icon","closeIcon","rightSide","horizontalSpace","iconPosition","directionIcon","closeDirectionIcon","style","iconView","otherProps","position"],"sources":["../../../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import './Collapse.css';\n\nimport { IconArrowDown } from '@consta/icons/IconArrowDown';\nimport React, { useRef } from 'react';\n\nimport { useComponentSize } from '##/hooks/useComponentSize';\nimport { useForkRef } from '##/hooks/useForkRef/useForkRef';\nimport { cn } from '##/utils/bem';\n\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport { Text } from '../Text/Text';\nimport { CollapseIcon } from './CollapseIcon/CollapseIcon';\nimport {\n CollapseComponent,\n collapsePropCloseDirectionIconDefault,\n collapsePropDirectionIconDefault,\n collapsePropFormDefault,\n collapsePropIconPositionDefault,\n collapsePropIconViewDefault,\n CollapseProps,\n CollapsePropSize,\n collapsePropSizeDefault,\n CollapsePropView,\n collapsePropViewDefault,\n} from './types';\n\nexport const COMPONENT_NAME = 'Collapse' as const;\n\nexport const cnCollapse = cn('Collapse');\n\nexport const sizeIconMap: Record<CollapsePropSize, 'xs' | 's'> = {\n '2xs': 'xs',\n 'xs': 'xs',\n 's': 'xs',\n 'm': 's',\n 'l': 's',\n};\n\nfunction renderSide(side: React.ReactNode): React.ReactNode {\n const sides = side ? [...(Array.isArray(side) ? side : [side])] : [];\n\n return sides.map((item, index) => (\n <div className={cnCollapse('Side')} key={index}>\n {item}\n </div>\n ));\n}\n\nconst getMaxHeight = (height: number, maxHeight?: number | string) => {\n if (maxHeight) {\n return typeof maxHeight === 'string' ? maxHeight : `${maxHeight}px`;\n }\n return `${height}px`;\n};\n\nconst collapseViewMap: Record<CollapsePropView, 'clear' | 'ghost'> = {\n clear: 'clear',\n ghost: 'ghost',\n primary: 'clear',\n secondary: 'ghost',\n};\n\nexport const Collapse: CollapseComponent = React.forwardRef<\n HTMLDivElement,\n CollapseProps\n>((props, ref) => {\n const collapseRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const { height: contentHeight } = useComponentSize(contentRef);\n\n const {\n label,\n size = collapsePropSizeDefault,\n view: viewProp = collapsePropViewDefault,\n className,\n maxContentHeight,\n isOpen,\n form = collapsePropFormDefault,\n children,\n hoverEffect,\n divider,\n icon = IconArrowDown,\n closeIcon,\n rightSide,\n horizontalSpace,\n iconPosition = collapsePropIconPositionDefault,\n directionIcon = collapsePropDirectionIconDefault,\n closeDirectionIcon = collapsePropCloseDirectionIconDefault,\n style,\n iconView = collapsePropIconViewDefault,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, props, collapseRef);\n\n const view = collapseViewMap[viewProp];\n\n return (\n <div\n ref={useForkRef([ref, collapseRef])}\n className={cnCollapse({ size, view }, [className])}\n style={{\n ...style,\n ['--horizontal-space' as string]: horizontalSpace\n ? `var(--space-${horizontalSpace})`\n : `0px`,\n }}\n >\n <div\n className={cnCollapse('Label', {\n hoverEffect,\n iconPosition,\n view,\n form,\n })}\n {...otherProps}\n >\n <CollapseIcon\n className={cnCollapse('Icon', { position: iconPosition })}\n size={sizeIconMap[size]}\n icon={icon}\n closeIcon={closeIcon}\n isOpen={isOpen}\n direction={directionIcon}\n closeDirection={closeDirectionIcon}\n view={iconView}\n />\n {typeof label === 'object' ? (\n <div className={cnCollapse('LabelText')}>{label}</div>\n ) : (\n <Text className={cnCollapse('LabelText')} size={size}>\n {label}\n </Text>\n )}\n {iconPosition === 'left' && renderSide(rightSide)}\n </div>\n <div\n style={{\n ['--collapse-body-max-height' as string]: getMaxHeight(\n contentHeight,\n maxContentHeight,\n ),\n }}\n className={cnCollapse('Body', { isOpen, divider })}\n >\n <div ref={contentRef} className={cnCollapse('Content')}>\n {children}\n </div>\n </div>\n </div>\n );\n});\n\nexport * from './types';\n"],"mappings":"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"}
|
|
@@ -4,9 +4,12 @@ import { PropsWithHTMLAttributes, PropsWithHTMLAttributesAndRef } from "../../ut
|
|
|
4
4
|
export declare const collapsePropSize: readonly ["m", "l", "s", "xs", "2xs"];
|
|
5
5
|
export declare type CollapsePropSize = typeof collapsePropSize[number];
|
|
6
6
|
export declare const collapsePropSizeDefault: "m";
|
|
7
|
-
export declare const
|
|
7
|
+
export declare const collapsePropForm: readonly ["brick", "default", "round"];
|
|
8
|
+
export declare type CollapsePropForm = typeof collapsePropForm[number];
|
|
9
|
+
export declare const collapsePropFormDefault: "brick";
|
|
10
|
+
export declare const collapsePropView: readonly ["clear", "ghost", "primary", "secondary"];
|
|
8
11
|
export declare type CollapsePropView = typeof collapsePropView[number];
|
|
9
|
-
export declare const collapsePropViewDefault: "
|
|
12
|
+
export declare const collapsePropViewDefault: "clear";
|
|
10
13
|
export declare const collapsePropHorizontalSpace: readonly ["3xs", "6xl", "5xl", "4xl", "3xl", "2xl", "xl", "l", "m", "s", "xs", "2xs"];
|
|
11
14
|
export declare type CollapsePropHorizontalSpace = typeof collapsePropHorizontalSpace[number];
|
|
12
15
|
export declare const collapsePropIconPosition: readonly ["left", "right"];
|
|
@@ -33,6 +36,7 @@ export declare type CollapsePropIconView = typeof collapsePropIconView[number];
|
|
|
33
36
|
export declare type CollapseProps = PropsWithHTMLAttributesAndRef<{
|
|
34
37
|
size?: CollapsePropSize;
|
|
35
38
|
icon?: IconComponent;
|
|
39
|
+
form?: CollapsePropForm;
|
|
36
40
|
view?: CollapsePropView;
|
|
37
41
|
divider?: boolean;
|
|
38
42
|
label: React.ReactNode;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export var collapsePropSize=["m","l","s","xs","2xs"];export var collapsePropSizeDefault=collapsePropSize[0];export var collapsePropView=["primary","secondary"];export var collapsePropViewDefault=collapsePropView[0];export var collapsePropHorizontalSpace=["3xs","6xl","5xl","4xl","3xl","2xl","xl","l","m","s","xs","2xs"];export var collapsePropIconPosition=["left","right"];export var collapsePropIconPositionDefault=collapsePropIconPosition[0];export var collapseIconPropDirection=["up","right","down","left","upRight","downRight","upLeft","downLeft"];export var collapsePropDirectionIcon=collapseIconPropDirection;export var collapsePropDirectionIconDefault=collapsePropDirectionIcon[0];export var collapsePropCloseDirectionIconDefault=collapsePropDirectionIcon[2];export var collapsePropIconView=["clear","ghost"];export var collapsePropIconViewDefault=collapsePropIconView[0];
|
|
1
|
+
export var collapsePropSize=["m","l","s","xs","2xs"];export var collapsePropSizeDefault=collapsePropSize[0];export var collapsePropForm=["brick","default","round"];export var collapsePropFormDefault=collapsePropForm[0];export var collapsePropView=["clear","ghost","primary","secondary"];export var collapsePropViewDefault=collapsePropView[0];export var collapsePropHorizontalSpace=["3xs","6xl","5xl","4xl","3xl","2xl","xl","l","m","s","xs","2xs"];export var collapsePropIconPosition=["left","right"];export var collapsePropIconPositionDefault=collapsePropIconPosition[0];export var collapseIconPropDirection=["up","right","down","left","upRight","downRight","upLeft","downLeft"];export var collapsePropDirectionIcon=collapseIconPropDirection;export var collapsePropDirectionIconDefault=collapsePropDirectionIcon[0];export var collapsePropCloseDirectionIconDefault=collapsePropDirectionIcon[2];export var collapsePropIconView=["clear","ghost"];export var collapsePropIconViewDefault=collapsePropIconView[0];
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":["collapsePropSize","collapsePropSizeDefault","collapsePropView","collapsePropViewDefault","collapsePropHorizontalSpace","collapsePropIconPosition","collapsePropIconPositionDefault","collapseIconPropDirection","collapsePropDirectionIcon","collapsePropDirectionIconDefault","collapsePropCloseDirectionIconDefault","collapsePropIconView","collapsePropIconViewDefault"],"sources":["../../../../../src/components/Collapse/types.ts"],"sourcesContent":["import { IconComponent, IconProps } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport {\n PropsWithHTMLAttributes,\n PropsWithHTMLAttributesAndRef,\n} from '##/utils/types/PropsWithHTMLAttributes';\n\nexport const collapsePropSize = ['m', 'l', 's', 'xs', '2xs'] as const;\nexport type CollapsePropSize = typeof collapsePropSize[number];\nexport const collapsePropSizeDefault = collapsePropSize[0];\n\nexport const
|
|
1
|
+
{"version":3,"file":"types.js","names":["collapsePropSize","collapsePropSizeDefault","collapsePropForm","collapsePropFormDefault","collapsePropView","collapsePropViewDefault","collapsePropHorizontalSpace","collapsePropIconPosition","collapsePropIconPositionDefault","collapseIconPropDirection","collapsePropDirectionIcon","collapsePropDirectionIconDefault","collapsePropCloseDirectionIconDefault","collapsePropIconView","collapsePropIconViewDefault"],"sources":["../../../../../src/components/Collapse/types.ts"],"sourcesContent":["import { IconComponent, IconProps } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport {\n PropsWithHTMLAttributes,\n PropsWithHTMLAttributesAndRef,\n} from '##/utils/types/PropsWithHTMLAttributes';\n\nexport const collapsePropSize = ['m', 'l', 's', 'xs', '2xs'] as const;\nexport type CollapsePropSize = typeof collapsePropSize[number];\nexport const collapsePropSizeDefault = collapsePropSize[0];\n\nexport const collapsePropForm = ['brick', 'default', 'round'] as const;\nexport type CollapsePropForm = typeof collapsePropForm[number];\nexport const collapsePropFormDefault = collapsePropForm[0];\n\nexport const collapsePropView = [\n 'clear',\n 'ghost',\n 'primary',\n 'secondary',\n] as const;\nexport type CollapsePropView = typeof collapsePropView[number];\nexport const collapsePropViewDefault = collapsePropView[0];\n\nexport const collapsePropHorizontalSpace = [\n '3xs',\n '6xl',\n '5xl',\n '4xl',\n '3xl',\n '2xl',\n 'xl',\n 'l',\n 'm',\n 's',\n 'xs',\n '2xs',\n] as const;\nexport type CollapsePropHorizontalSpace =\n typeof collapsePropHorizontalSpace[number];\n\nexport const collapsePropIconPosition = ['left', 'right'] as const;\nexport type CollapsePropIconPosition = typeof collapsePropIconPosition[number];\nexport const collapsePropIconPositionDefault = collapsePropIconPosition[0];\n\nexport const collapseIconPropDirection = [\n 'up',\n 'right',\n 'down',\n 'left',\n 'upRight',\n 'downRight',\n 'upLeft',\n 'downLeft',\n] as const;\nexport type CollapseIconPropDirection =\n typeof collapseIconPropDirection[number];\n\nexport type CollapseIconProps = PropsWithHTMLAttributes<\n {\n size: 'xs' | 's';\n icon: React.FC<IconProps>;\n view: CollapsePropIconView;\n isOpen?: boolean;\n cildren?: never;\n closeIcon?: React.FC<IconProps>;\n direction?: CollapseIconPropDirection;\n closeDirection?: CollapseIconPropDirection;\n },\n HTMLSpanElement\n>;\n\nexport const collapsePropDirectionIcon = collapseIconPropDirection;\nexport const collapsePropDirectionIconDefault = collapsePropDirectionIcon[0];\nexport const collapsePropCloseDirectionIconDefault =\n collapsePropDirectionIcon[2];\n\nexport const collapsePropIconView = ['clear', 'ghost'] as const;\nexport const collapsePropIconViewDefault = collapsePropIconView[0];\nexport type CollapsePropIconView = typeof collapsePropIconView[number];\n\nexport type CollapseProps = PropsWithHTMLAttributesAndRef<\n {\n size?: CollapsePropSize;\n icon?: IconComponent;\n form?: CollapsePropForm;\n view?: CollapsePropView;\n divider?: boolean;\n label: React.ReactNode;\n maxContentHeight?: string | number;\n horizontalSpace?: CollapsePropHorizontalSpace;\n hoverEffect?: boolean;\n isOpen?: boolean;\n iconView?: CollapsePropIconView;\n } & (\n | {\n closeIcon?: IconComponent;\n directionIcon?: never;\n closeDirectionIcon?: never;\n }\n | {\n closeIcon?: never;\n directionIcon?: CollapseIconPropDirection;\n closeDirectionIcon?: CollapseIconPropDirection;\n }\n ) &\n (\n | {\n iconPosition?: 'left';\n rightSide?: React.ReactNode;\n }\n | {\n iconPosition?: 'right';\n rightSide?: never;\n }\n ),\n HTMLDivElement\n>;\n\nexport type CollapseComponent = (\n props: CollapseProps,\n) => React.ReactElement | null;\n"],"mappings":"AAQA,MAAO,IAAMA,iBAAgB,CAAG,CAAC,GAAD,CAAM,GAAN,CAAW,GAAX,CAAgB,IAAhB,CAAsB,KAAtB,CAAzB,CAEP,MAAO,IAAMC,wBAAuB,CAAGD,gBAAgB,CAAC,CAAD,CAAhD,CAEP,MAAO,IAAME,iBAAgB,CAAG,CAAC,OAAD,CAAU,SAAV,CAAqB,OAArB,CAAzB,CAEP,MAAO,IAAMC,wBAAuB,CAAGD,gBAAgB,CAAC,CAAD,CAAhD,CAEP,MAAO,IAAME,iBAAgB,CAAG,CAC9B,OAD8B,CAE9B,OAF8B,CAG9B,SAH8B,CAI9B,WAJ8B,CAAzB,CAOP,MAAO,IAAMC,wBAAuB,CAAGD,gBAAgB,CAAC,CAAD,CAAhD,CAEP,MAAO,IAAME,4BAA2B,CAAG,CACzC,KADyC,CAEzC,KAFyC,CAGzC,KAHyC,CAIzC,KAJyC,CAKzC,KALyC,CAMzC,KANyC,CAOzC,IAPyC,CAQzC,GARyC,CASzC,GATyC,CAUzC,GAVyC,CAWzC,IAXyC,CAYzC,KAZyC,CAApC,CAiBP,MAAO,IAAMC,yBAAwB,CAAG,CAAC,MAAD,CAAS,OAAT,CAAjC,CAEP,MAAO,IAAMC,gCAA+B,CAAGD,wBAAwB,CAAC,CAAD,CAAhE,CAEP,MAAO,IAAME,0BAAyB,CAAG,CACvC,IADuC,CAEvC,OAFuC,CAGvC,MAHuC,CAIvC,MAJuC,CAKvC,SALuC,CAMvC,WANuC,CAOvC,QAPuC,CAQvC,UARuC,CAAlC,CA2BP,MAAO,IAAMC,0BAAyB,CAAGD,yBAAlC,CACP,MAAO,IAAME,iCAAgC,CAAGD,yBAAyB,CAAC,CAAD,CAAlE,CACP,MAAO,IAAME,sCAAqC,CAChDF,yBAAyB,CAAC,CAAD,CADpB,CAGP,MAAO,IAAMG,qBAAoB,CAAG,CAAC,OAAD,CAAU,OAAV,CAA7B,CACP,MAAO,IAAMC,4BAA2B,CAAGD,oBAAoB,CAAC,CAAD,CAAxD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["items","getItemLabel","getItemContent","size","view","hoverEffect","divider","icon","closeIcon","getItemRightSide","horizontalSpace","iconPosition","directionIcon","closeDirectionIcon","iconView","isAccordion"];import{IconArrowDown}from"@consta/icons/IconArrowDown";import React,{forwardRef}from"react";import{Collapse,collapsePropCloseDirectionIconDefault,collapsePropDirectionIconDefault,collapsePropIconPositionDefault,collapsePropSizeDefault,collapsePropViewDefault}from"../Collapse/Collapse";import{withDefaultGetters}from"./helpers";import{useChoice}from"./useChoice";var CollapseGroupRender=function(a,b){var c=withDefaultGetters(a),d=c.items,e=c.getItemLabel,f=c.getItemContent,g=c.size,h=void 0===g?collapsePropSizeDefault:g,i=c.view,j=void 0===i?collapsePropViewDefault:i,k=c.
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["items","getItemLabel","getItemContent","size","view","form","hoverEffect","divider","icon","closeIcon","getItemRightSide","horizontalSpace","iconPosition","directionIcon","closeDirectionIcon","iconView","isAccordion"];import{IconArrowDown}from"@consta/icons/IconArrowDown";import React,{forwardRef}from"react";import{Collapse,collapsePropCloseDirectionIconDefault,collapsePropDirectionIconDefault,collapsePropFormDefault,collapsePropIconPositionDefault,collapsePropSizeDefault,collapsePropViewDefault}from"../Collapse/Collapse";import{withDefaultGetters}from"./helpers";import{useChoice}from"./useChoice";var CollapseGroupRender=function(a,b){var c=withDefaultGetters(a),d=c.items,e=c.getItemLabel,f=c.getItemContent,g=c.size,h=void 0===g?collapsePropSizeDefault:g,i=c.view,j=void 0===i?collapsePropViewDefault:i,k=c.form,l=void 0===k?collapsePropFormDefault:k,m=c.hoverEffect,n=c.divider,o=c.icon,p=void 0===o?IconArrowDown:o,q=c.closeIcon,r=c.getItemRightSide,s=c.horizontalSpace,t=c.iconPosition,u=void 0===t?collapsePropIconPositionDefault:t,v=c.directionIcon,w=void 0===v?collapsePropDirectionIconDefault:v,x=c.closeDirectionIcon,y=void 0===x?collapsePropCloseDirectionIconDefault:x,z=c.iconView,A=c.isAccordion,B=_objectWithoutProperties(c,_excluded),C=useChoice(a),D=C.getChecked,E=C.getOnChange;return React.createElement("div",Object.assign({ref:b},B),d.map(function(a,b){return React.createElement(Collapse,Object.assign({label:e(a),key:b,size:h,view:j,form:l,horizontalSpace:s,icon:p,hoverEffect:m,divider:n,isOpen:D(b),onClick:E(b),iconView:z},"left"===u?{iconPosition:u,rightSide:r(a)}:{iconPosition:u},q?{closeIcon:q}:{directionIcon:w,closeDirectionIcon:y}),f(a))}))};export var CollapseGroup=forwardRef(CollapseGroupRender);export*from"./helpers";
|
|
2
2
|
//# sourceMappingURL=CollapseGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollapseGroup.js","names":["IconArrowDown","React","forwardRef","Collapse","collapsePropCloseDirectionIconDefault","collapsePropDirectionIconDefault","collapsePropIconPositionDefault","collapsePropSizeDefault","collapsePropViewDefault","withDefaultGetters","useChoice","CollapseGroupRender","props","ref","items","getItemLabel","getItemContent","size","view","hoverEffect","divider","icon","closeIcon","getItemRightSide","horizontalSpace","iconPosition","directionIcon","closeDirectionIcon","iconView","isAccordion","otherProps","getChecked","getOnChange","map","item","index","rightSide","CollapseGroup"],"sources":["../../../../../src/components/CollapseGroup/CollapseGroup.tsx"],"sourcesContent":["import { IconArrowDown } from '@consta/icons/IconArrowDown';\nimport React, { forwardRef } from 'react';\n\nimport {\n Collapse,\n collapsePropCloseDirectionIconDefault,\n collapsePropDirectionIconDefault,\n collapsePropIconPositionDefault,\n collapsePropSizeDefault,\n collapsePropViewDefault,\n} from '../Collapse/Collapse';\nimport {\n CollapseGroupComponent,\n CollapseGroupRenderFunction,\n withDefaultGetters,\n} from './helpers';\nimport { useChoice } from './useChoice';\n\nconst CollapseGroupRender: CollapseGroupRenderFunction = (props, ref) => {\n const {\n items,\n getItemLabel,\n getItemContent,\n size = collapsePropSizeDefault,\n view = collapsePropViewDefault,\n hoverEffect,\n divider,\n icon = IconArrowDown,\n closeIcon,\n getItemRightSide,\n horizontalSpace,\n iconPosition = collapsePropIconPositionDefault,\n directionIcon = collapsePropDirectionIconDefault,\n closeDirectionIcon = collapsePropCloseDirectionIconDefault,\n iconView,\n isAccordion,\n ...otherProps\n } = withDefaultGetters(props);\n\n const { getChecked, getOnChange } = useChoice(props);\n\n return (\n <div ref={ref} {...otherProps}>\n {items.map((item, index) => {\n return (\n <Collapse\n label={getItemLabel(item)}\n key={index}\n size={size}\n view={view}\n horizontalSpace={horizontalSpace}\n icon={icon}\n hoverEffect={hoverEffect}\n divider={divider}\n isOpen={getChecked(index)}\n onClick={getOnChange(index)}\n iconView={iconView}\n {...(iconPosition === 'left'\n ? {\n iconPosition,\n rightSide: getItemRightSide(item),\n }\n : { iconPosition })}\n {...(closeIcon\n ? { closeIcon }\n : {\n directionIcon,\n closeDirectionIcon,\n })}\n >\n {getItemContent(item)}\n </Collapse>\n );\n })}\n </div>\n );\n};\n\nexport const CollapseGroup = forwardRef(\n CollapseGroupRender,\n) as CollapseGroupComponent;\n\nexport * from './helpers';\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CollapseGroup.js","names":["IconArrowDown","React","forwardRef","Collapse","collapsePropCloseDirectionIconDefault","collapsePropDirectionIconDefault","collapsePropFormDefault","collapsePropIconPositionDefault","collapsePropSizeDefault","collapsePropViewDefault","withDefaultGetters","useChoice","CollapseGroupRender","props","ref","items","getItemLabel","getItemContent","size","view","form","hoverEffect","divider","icon","closeIcon","getItemRightSide","horizontalSpace","iconPosition","directionIcon","closeDirectionIcon","iconView","isAccordion","otherProps","getChecked","getOnChange","map","item","index","rightSide","CollapseGroup"],"sources":["../../../../../src/components/CollapseGroup/CollapseGroup.tsx"],"sourcesContent":["import { IconArrowDown } from '@consta/icons/IconArrowDown';\nimport React, { forwardRef } from 'react';\n\nimport {\n Collapse,\n collapsePropCloseDirectionIconDefault,\n collapsePropDirectionIconDefault,\n collapsePropFormDefault,\n collapsePropIconPositionDefault,\n collapsePropSizeDefault,\n collapsePropViewDefault,\n} from '../Collapse/Collapse';\nimport {\n CollapseGroupComponent,\n CollapseGroupRenderFunction,\n withDefaultGetters,\n} from './helpers';\nimport { useChoice } from './useChoice';\n\nconst CollapseGroupRender: CollapseGroupRenderFunction = (props, ref) => {\n const {\n items,\n getItemLabel,\n getItemContent,\n size = collapsePropSizeDefault,\n view = collapsePropViewDefault,\n form = collapsePropFormDefault,\n hoverEffect,\n divider,\n icon = IconArrowDown,\n closeIcon,\n getItemRightSide,\n horizontalSpace,\n iconPosition = collapsePropIconPositionDefault,\n directionIcon = collapsePropDirectionIconDefault,\n closeDirectionIcon = collapsePropCloseDirectionIconDefault,\n iconView,\n isAccordion,\n ...otherProps\n } = withDefaultGetters(props);\n\n const { getChecked, getOnChange } = useChoice(props);\n\n return (\n <div ref={ref} {...otherProps}>\n {items.map((item, index) => {\n return (\n <Collapse\n label={getItemLabel(item)}\n key={index}\n size={size}\n view={view}\n form={form}\n horizontalSpace={horizontalSpace}\n icon={icon}\n hoverEffect={hoverEffect}\n divider={divider}\n isOpen={getChecked(index)}\n onClick={getOnChange(index)}\n iconView={iconView}\n {...(iconPosition === 'left'\n ? {\n iconPosition,\n rightSide: getItemRightSide(item),\n }\n : { iconPosition })}\n {...(closeIcon\n ? { closeIcon }\n : {\n directionIcon,\n closeDirectionIcon,\n })}\n >\n {getItemContent(item)}\n </Collapse>\n );\n })}\n </div>\n );\n};\n\nexport const CollapseGroup = forwardRef(\n CollapseGroupRender,\n) as CollapseGroupComponent;\n\nexport * from './helpers';\n"],"mappings":"+TAAA,OAASA,aAAT,KAA8B,6BAA9B,CACA,MAAOC,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OACEC,QADF,CAEEC,qCAFF,CAGEC,gCAHF,CAIEC,uBAJF,CAKEC,+BALF,CAMEC,uBANF,CAOEC,uBAPF,4BASA,OAGEC,kBAHF,iBAKA,OAASC,SAAT,mBAEA,GAAMC,oBAAgD,CAAG,SAACC,CAAD,CAAQC,CAAR,CAAgB,OAoBnEJ,kBAAkB,CAACG,CAAD,CApBiD,CAErEE,CAFqE,GAErEA,KAFqE,CAGrEC,CAHqE,GAGrEA,YAHqE,CAIrEC,CAJqE,GAIrEA,cAJqE,KAKrEC,IALqE,CAKrEA,CALqE,YAK9DV,uBAL8D,OAMrEW,IANqE,CAMrEA,CANqE,YAM9DV,uBAN8D,OAOrEW,IAPqE,CAOrEA,CAPqE,YAO9Dd,uBAP8D,GAQrEe,CARqE,GAQrEA,WARqE,CASrEC,CATqE,GASrEA,OATqE,KAUrEC,IAVqE,CAUrEA,CAVqE,YAU9DvB,aAV8D,GAWrEwB,CAXqE,GAWrEA,SAXqE,CAYrEC,CAZqE,GAYrEA,gBAZqE,CAarEC,CAbqE,GAarEA,eAbqE,KAcrEC,YAdqE,CAcrEA,CAdqE,YActDpB,+BAdsD,OAerEqB,aAfqE,CAerEA,CAfqE,YAerDvB,gCAfqD,OAgBrEwB,kBAhBqE,CAgBrEA,CAhBqE,YAgBhDzB,qCAhBgD,GAiBrE0B,CAjBqE,GAiBrEA,QAjBqE,CAkBrEC,CAlBqE,GAkBrEA,WAlBqE,CAmBlEC,CAnBkE,yCAsBnCrB,SAAS,CAACE,CAAD,CAtB0B,CAsB/DoB,CAtB+D,GAsB/DA,UAtB+D,CAsBnDC,CAtBmD,GAsBnDA,WAtBmD,CAwBvE,MACE,0CAAK,GAAG,CAAEpB,CAAV,EAAmBkB,CAAnB,EACGjB,CAAK,CAACoB,GAAN,CAAU,SAACC,CAAD,CAAOC,CAAP,CAAiB,CAC1B,MACE,qBAAC,QAAD,gBACE,KAAK,CAAErB,CAAY,CAACoB,CAAD,CADrB,CAEE,GAAG,CAAEC,CAFP,CAGE,IAAI,CAAEnB,CAHR,CAIE,IAAI,CAAEC,CAJR,CAKE,IAAI,CAAEC,CALR,CAME,eAAe,CAAEM,CANnB,CAOE,IAAI,CAAEH,CAPR,CAQE,WAAW,CAAEF,CARf,CASE,OAAO,CAAEC,CATX,CAUE,MAAM,CAAEW,CAAU,CAACI,CAAD,CAVpB,CAWE,OAAO,CAAEH,CAAW,CAACG,CAAD,CAXtB,CAYE,QAAQ,CAAEP,CAZZ,EAawB,MAAjB,GAAAH,CAAY,CACb,CACEA,YAAY,CAAZA,CADF,CAEEW,SAAS,CAAEb,CAAgB,CAACW,CAAD,CAF7B,CADa,CAKb,CAAET,YAAY,CAAZA,CAAF,CAlBN,CAmBOH,CAAS,CACV,CAAEA,SAAS,CAATA,CAAF,CADU,CAEV,CACEI,aAAa,CAAbA,CADF,CAEEC,kBAAkB,CAAlBA,CAFF,CArBN,EA0BGZ,CAAc,CAACmB,CAAD,CA1BjB,CA6BH,CA/BA,CADH,CAmCH,CA5DD,CA8DA,MAAO,IAAMG,cAAa,CAAGrC,UAAU,CACrCU,mBADqC,CAAhC,CAIP"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { IconComponent } from '@consta/icons/Icon';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { CollapseIconPropDirection, CollapsePropHorizontalSpace, CollapsePropIconView, CollapsePropSize, CollapsePropView } from "../Collapse";
|
|
3
|
+
import { CollapseIconPropDirection, CollapsePropForm, CollapsePropHorizontalSpace, CollapsePropIconView, CollapsePropSize, CollapsePropView } from "../Collapse";
|
|
4
4
|
import { PropsWithHTMLAttributesAndRef } from "../../utils/types/PropsWithHTMLAttributes";
|
|
5
5
|
export declare type DefaultItem = {
|
|
6
6
|
label: React.ReactNode;
|
|
@@ -22,6 +22,7 @@ export declare type CollapseGroupProps<ITEM, IS_ACCORDION extends boolean> = Pro
|
|
|
22
22
|
icon?: IconComponent;
|
|
23
23
|
divider?: boolean;
|
|
24
24
|
size?: CollapsePropSize;
|
|
25
|
+
form?: CollapsePropForm;
|
|
25
26
|
view?: CollapsePropView;
|
|
26
27
|
horizontalSpace?: CollapsePropHorizontalSpace;
|
|
27
28
|
hoverEffect?: boolean;
|
|
@@ -65,7 +66,8 @@ export declare function withDefaultGetters<ITEM, IS_ACCORDION extends boolean>(p
|
|
|
65
66
|
icon?: IconComponent | undefined;
|
|
66
67
|
divider?: boolean | undefined;
|
|
67
68
|
size?: "m" | "s" | "xs" | "l" | "2xs" | undefined;
|
|
68
|
-
|
|
69
|
+
form?: "default" | "round" | "brick" | undefined;
|
|
70
|
+
view?: "primary" | "ghost" | "clear" | "secondary" | undefined;
|
|
69
71
|
horizontalSpace?: "m" | "s" | "xs" | "l" | "2xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs" | undefined;
|
|
70
72
|
hoverEffect?: boolean | undefined;
|
|
71
73
|
onOpen?: CollapseGroupPropOnOpen<IS_ACCORDION> | undefined;
|
|
@@ -80,7 +82,7 @@ export declare function withDefaultGetters<ITEM, IS_ACCORDION extends boolean>(p
|
|
|
80
82
|
} & {
|
|
81
83
|
iconPosition?: "left" | undefined;
|
|
82
84
|
getItemRightSide?: CollapseGroupPropGetItemRightSide<ITEM> | undefined;
|
|
83
|
-
} & Omit<React.HTMLAttributes<HTMLDivElement>, "css" | "children" | "size" | "view" | "items" | "getItemLabel" | "icon" | "getItemRightSide" | "horizontalSpace" | "closeIcon" | "divider" | "hoverEffect" | "iconView" | "directionIcon" | "closeDirectionIcon" | "iconPosition" | "isAccordion" | "onOpen" | "opened" | "getItemContent"> & React.RefAttributes<HTMLDivElement> & (ITEM extends {
|
|
85
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "css" | "children" | "size" | "form" | "view" | "items" | "getItemLabel" | "icon" | "getItemRightSide" | "horizontalSpace" | "closeIcon" | "divider" | "hoverEffect" | "iconView" | "directionIcon" | "closeDirectionIcon" | "iconPosition" | "isAccordion" | "onOpen" | "opened" | "getItemContent"> & React.RefAttributes<HTMLDivElement> & (ITEM extends {
|
|
84
86
|
label: React.ReactNode;
|
|
85
87
|
} ? {} : {
|
|
86
88
|
getItemLabel: CollapseGroupPropGetItemLabel<ITEM>;
|
|
@@ -99,7 +101,8 @@ export declare function withDefaultGetters<ITEM, IS_ACCORDION extends boolean>(p
|
|
|
99
101
|
icon?: IconComponent | undefined;
|
|
100
102
|
divider?: boolean | undefined;
|
|
101
103
|
size?: "m" | "s" | "xs" | "l" | "2xs" | undefined;
|
|
102
|
-
|
|
104
|
+
form?: "default" | "round" | "brick" | undefined;
|
|
105
|
+
view?: "primary" | "ghost" | "clear" | "secondary" | undefined;
|
|
103
106
|
horizontalSpace?: "m" | "s" | "xs" | "l" | "2xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs" | undefined;
|
|
104
107
|
hoverEffect?: boolean | undefined;
|
|
105
108
|
onOpen?: CollapseGroupPropOnOpen<IS_ACCORDION> | undefined;
|
|
@@ -114,7 +117,7 @@ export declare function withDefaultGetters<ITEM, IS_ACCORDION extends boolean>(p
|
|
|
114
117
|
} & {
|
|
115
118
|
iconPosition?: "left" | undefined;
|
|
116
119
|
getItemRightSide?: CollapseGroupPropGetItemRightSide<ITEM> | undefined;
|
|
117
|
-
} & Omit<React.HTMLAttributes<HTMLDivElement>, "css" | "children" | "size" | "view" | "items" | "getItemLabel" | "icon" | "getItemRightSide" | "horizontalSpace" | "closeIcon" | "divider" | "hoverEffect" | "iconView" | "directionIcon" | "closeDirectionIcon" | "iconPosition" | "isAccordion" | "onOpen" | "opened" | "getItemContent"> & React.RefAttributes<HTMLDivElement> & (ITEM extends {
|
|
120
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "css" | "children" | "size" | "form" | "view" | "items" | "getItemLabel" | "icon" | "getItemRightSide" | "horizontalSpace" | "closeIcon" | "divider" | "hoverEffect" | "iconView" | "directionIcon" | "closeDirectionIcon" | "iconPosition" | "isAccordion" | "onOpen" | "opened" | "getItemContent"> & React.RefAttributes<HTMLDivElement> & (ITEM extends {
|
|
118
121
|
label: React.ReactNode;
|
|
119
122
|
} ? {} : {
|
|
120
123
|
getItemLabel: CollapseGroupPropGetItemLabel<ITEM>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","names":["defaultGetItemLabel","item","label","defaultGetItemContent","content","defaultGetItemRightSide","rightSide","withDefaultGetters","props","getItemLabel","getItemContent","getItemRightSide"],"sources":["../../../../../src/components/CollapseGroup/helpers.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport {\n CollapseIconPropDirection,\n CollapsePropHorizontalSpace,\n CollapsePropIconView,\n CollapsePropSize,\n CollapsePropView,\n} from '##/components/Collapse';\nimport { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';\n\nexport type DefaultItem = {\n label: React.ReactNode;\n content: React.ReactNode;\n rightSide?: React.ReactNode | React.ReactNode[];\n};\n\nexport type CollapseGroupPropOnOpen<IS_ACCORDION> = (params: {\n e: React.MouseEvent<HTMLDivElement, MouseEvent>;\n value: (IS_ACCORDION extends true ? number : number[]) | null;\n}) => void;\n\nexport type CollapseGroupPropOpened<IS_ACCORDION> =\n | (IS_ACCORDION extends true ? number : number[])\n | null\n | undefined;\n\ntype CollapseGroupPropGetItemLabel<ITEM> = (item: ITEM) => React.ReactNode;\ntype CollapseGroupPropGetItemContent<ITEM> = (item: ITEM) => React.ReactNode;\ntype CollapseGroupPropGetItemRightSide<ITEM> = (\n item: ITEM,\n) => React.ReactNode | React.ReactNode[] | undefined;\n\nexport type CollapseGroupProps<\n ITEM,\n IS_ACCORDION extends boolean,\n> = PropsWithHTMLAttributesAndRef<\n {\n items: ITEM[];\n isAccordion?: IS_ACCORDION;\n children?: never;\n icon?: IconComponent;\n divider?: boolean;\n size?: CollapsePropSize;\n view?: CollapsePropView;\n horizontalSpace?: CollapsePropHorizontalSpace;\n hoverEffect?: boolean;\n onOpen?: CollapseGroupPropOnOpen<IS_ACCORDION>;\n opened?: CollapseGroupPropOpened<IS_ACCORDION>;\n getItemLabel?: CollapseGroupPropGetItemLabel<ITEM>;\n getItemContent?: CollapseGroupPropGetItemContent<ITEM>;\n iconView?: CollapsePropIconView;\n } & (\n | {\n closeIcon: IconComponent;\n directionIcon?: never;\n closeDirectionIcon?: never;\n }\n | {\n closeIcon?: never;\n directionIcon?: CollapseIconPropDirection;\n closeDirectionIcon?: CollapseIconPropDirection;\n }\n ) &\n (\n | {\n iconPosition?: 'left';\n getItemRightSide?: CollapseGroupPropGetItemRightSide<ITEM>;\n }\n | {\n iconPosition?: 'right';\n getItemRightSide?: never;\n }\n ),\n HTMLDivElement\n> &\n (ITEM extends { label: DefaultItem['label'] }\n ? {}\n : { getItemLabel: CollapseGroupPropGetItemLabel<ITEM> }) &\n (ITEM extends { content: DefaultItem['content'] }\n ? {}\n : { getItemContent: CollapseGroupPropGetItemContent<ITEM> });\n\nexport const defaultGetItemLabel: CollapseGroupPropGetItemLabel<DefaultItem> = (\n item,\n) => item.label;\nexport const defaultGetItemContent: CollapseGroupPropGetItemContent<\n DefaultItem\n> = (item) => item.content;\nexport const defaultGetItemRightSide: CollapseGroupPropGetItemContent<\n DefaultItem\n> = (item) => item.rightSide;\n\nexport type CollapseGroupComponent = <\n ITEM,\n IS_ACCORDION extends boolean = false,\n>(\n props: CollapseGroupProps<ITEM, IS_ACCORDION>,\n) => React.ReactElement | null;\n\nexport type CollapseGroupRenderFunction = <\n ITEM,\n IS_ACCORDION extends boolean = false,\n>(\n props: CollapseGroupProps<ITEM, IS_ACCORDION>,\n ref: React.Ref<HTMLDivElement>,\n) => React.ReactElement | null;\n\nexport function withDefaultGetters<ITEM, IS_ACCORDION extends boolean>(\n props: CollapseGroupProps<ITEM, IS_ACCORDION>,\n) {\n return {\n ...props,\n getItemLabel: props.getItemLabel || defaultGetItemLabel,\n getItemContent: props.getItemContent || defaultGetItemContent,\n getItemRightSide: props.getItemRightSide || defaultGetItemRightSide,\n };\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"helpers.js","names":["defaultGetItemLabel","item","label","defaultGetItemContent","content","defaultGetItemRightSide","rightSide","withDefaultGetters","props","getItemLabel","getItemContent","getItemRightSide"],"sources":["../../../../../src/components/CollapseGroup/helpers.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport {\n CollapseIconPropDirection,\n CollapsePropForm,\n CollapsePropHorizontalSpace,\n CollapsePropIconView,\n CollapsePropSize,\n CollapsePropView,\n} from '##/components/Collapse';\nimport { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';\n\nexport type DefaultItem = {\n label: React.ReactNode;\n content: React.ReactNode;\n rightSide?: React.ReactNode | React.ReactNode[];\n};\n\nexport type CollapseGroupPropOnOpen<IS_ACCORDION> = (params: {\n e: React.MouseEvent<HTMLDivElement, MouseEvent>;\n value: (IS_ACCORDION extends true ? number : number[]) | null;\n}) => void;\n\nexport type CollapseGroupPropOpened<IS_ACCORDION> =\n | (IS_ACCORDION extends true ? number : number[])\n | null\n | undefined;\n\ntype CollapseGroupPropGetItemLabel<ITEM> = (item: ITEM) => React.ReactNode;\ntype CollapseGroupPropGetItemContent<ITEM> = (item: ITEM) => React.ReactNode;\ntype CollapseGroupPropGetItemRightSide<ITEM> = (\n item: ITEM,\n) => React.ReactNode | React.ReactNode[] | undefined;\n\nexport type CollapseGroupProps<\n ITEM,\n IS_ACCORDION extends boolean,\n> = PropsWithHTMLAttributesAndRef<\n {\n items: ITEM[];\n isAccordion?: IS_ACCORDION;\n children?: never;\n icon?: IconComponent;\n divider?: boolean;\n size?: CollapsePropSize;\n form?: CollapsePropForm;\n view?: CollapsePropView;\n horizontalSpace?: CollapsePropHorizontalSpace;\n hoverEffect?: boolean;\n onOpen?: CollapseGroupPropOnOpen<IS_ACCORDION>;\n opened?: CollapseGroupPropOpened<IS_ACCORDION>;\n getItemLabel?: CollapseGroupPropGetItemLabel<ITEM>;\n getItemContent?: CollapseGroupPropGetItemContent<ITEM>;\n iconView?: CollapsePropIconView;\n } & (\n | {\n closeIcon: IconComponent;\n directionIcon?: never;\n closeDirectionIcon?: never;\n }\n | {\n closeIcon?: never;\n directionIcon?: CollapseIconPropDirection;\n closeDirectionIcon?: CollapseIconPropDirection;\n }\n ) &\n (\n | {\n iconPosition?: 'left';\n getItemRightSide?: CollapseGroupPropGetItemRightSide<ITEM>;\n }\n | {\n iconPosition?: 'right';\n getItemRightSide?: never;\n }\n ),\n HTMLDivElement\n> &\n (ITEM extends { label: DefaultItem['label'] }\n ? {}\n : { getItemLabel: CollapseGroupPropGetItemLabel<ITEM> }) &\n (ITEM extends { content: DefaultItem['content'] }\n ? {}\n : { getItemContent: CollapseGroupPropGetItemContent<ITEM> });\n\nexport const defaultGetItemLabel: CollapseGroupPropGetItemLabel<DefaultItem> = (\n item,\n) => item.label;\nexport const defaultGetItemContent: CollapseGroupPropGetItemContent<\n DefaultItem\n> = (item) => item.content;\nexport const defaultGetItemRightSide: CollapseGroupPropGetItemContent<\n DefaultItem\n> = (item) => item.rightSide;\n\nexport type CollapseGroupComponent = <\n ITEM,\n IS_ACCORDION extends boolean = false,\n>(\n props: CollapseGroupProps<ITEM, IS_ACCORDION>,\n) => React.ReactElement | null;\n\nexport type CollapseGroupRenderFunction = <\n ITEM,\n IS_ACCORDION extends boolean = false,\n>(\n props: CollapseGroupProps<ITEM, IS_ACCORDION>,\n ref: React.Ref<HTMLDivElement>,\n) => React.ReactElement | null;\n\nexport function withDefaultGetters<ITEM, IS_ACCORDION extends boolean>(\n props: CollapseGroupProps<ITEM, IS_ACCORDION>,\n) {\n return {\n ...props,\n getItemLabel: props.getItemLabel || defaultGetItemLabel,\n getItemContent: props.getItemContent || defaultGetItemContent,\n getItemRightSide: props.getItemRightSide || defaultGetItemRightSide,\n };\n}\n"],"mappings":"qqBAsFA,MAAO,IAAMA,oBAA+D,CAAG,SAC7EC,CAD6E,QAE1EA,EAAI,CAACC,KAFqE,CAAxE,CAGP,MAAO,IAAMC,sBAEZ,CAAG,SAACF,CAAD,QAAUA,EAAI,CAACG,OAAf,CAFG,CAGP,MAAO,IAAMC,wBAEZ,CAAG,SAACJ,CAAD,QAAUA,EAAI,CAACK,SAAf,CAFG,CAmBP,MAAO,SAASC,mBAAT,CACLC,CADK,CAEL,CACA,sCACKA,CADL,MAEEC,YAAY,CAAED,CAAK,CAACC,YAAN,EAAsBT,mBAFtC,CAGEU,cAAc,CAAEF,CAAK,CAACE,cAAN,EAAwBP,qBAH1C,CAIEQ,gBAAgB,CAAEH,CAAK,CAACG,gBAAN,EAA0BN,uBAJ9C,EAMD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","active","label","innerOffset","disabled","className","leftSide","rightSide","rightIcon","leftIcon","as","checked","onClick","status","space","iconSize"];import"./ListItem.css";import React,{forwardRef}from"react";import{Text}from"../../Text";import{cnMixSpace}from"../../../mixs/MixSpace";import{cn}from"../../../utils/bem";import{cnListItemGrid,renderSlot}from"../ListItemGrid";import{mapHorisontalSpase,mapHorisontalSpaseIncreased,mapItemVerticalPadding}from"../maps";import{defaultListPropSize}from"../types";export var cnListItem=cn("ListItem");var ListItemRender=function(a,b){var c=a.size,d=void 0===c?defaultListPropSize:c,e=a.active,f=a.label,g=a.innerOffset,h=a.disabled,i=a.className,j=a.leftSide,k=a.rightSide,l=a.rightIcon,m=a.leftIcon,n=a.as,o=a.checked,p=a.onClick,q=a.status,r=a.space,s=a.iconSize,t=_objectWithoutProperties(a,_excluded),u=p&&!h?p:void 0;return React.createElement(Text,Object.assign({},t,{className:cnListItem({active:e,disabled:h,checked:o,interactive:!!u},[cnMixSpace(r||{pH:"increased"===g?mapHorisontalSpaseIncreased[d]:mapHorisontalSpase[d],pV:mapItemVerticalPadding[d]}),cnListItemGrid(),i]),as:n,onClick:u,lineHeight:"xs",size:d,ref:b,view:q}),renderSlot(j,"left",d,m,s),l||k||j||m?React.createElement("span",{className:cnListItemGrid("Slot",{position:"center"})},f):f,renderSlot(k,"right",d,l,s))};export var ListItem=forwardRef(ListItemRender);
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","active","label","innerOffset","disabled","className","leftSide","rightSide","rightIcon","leftIcon","as","checked","onClick","status","space","iconSize"];import"./ListItem.css";import React,{forwardRef}from"react";import{Text}from"../../Text";import{cnMixSpace}from"../../../mixs/MixSpace";import{cn}from"../../../utils/bem";import{cnListItemGrid,renderSlot}from"../ListItemGrid";import{mapHorisontalSpase,mapHorisontalSpaseIncreased,mapItemVerticalPadding}from"../maps";import{defaultListPropSize}from"../types";export var cnListItem=cn("ListItem");var ListItemRender=function(a,b){var c=a.size,d=void 0===c?defaultListPropSize:c,e=a.active,f=a.label,g=a.innerOffset,h=a.disabled,i=a.className,j=a.leftSide,k=a.rightSide,l=a.rightIcon,m=a.leftIcon,n=a.as,o=a.checked,p=a.onClick,q=a.status,r=a.space,s=a.iconSize,t=_objectWithoutProperties(a,_excluded),u=p&&!h?p:void 0;return React.createElement(Text,Object.assign({},t,{className:cnListItem({active:e,disabled:h,checked:o,interactive:!!u},[cnMixSpace(r||{pH:"increased"===g?mapHorisontalSpaseIncreased[d]:mapHorisontalSpase[d],pV:mapItemVerticalPadding[d]}),cnListItemGrid(),i]),as:n,onClick:u,lineHeight:"xs",size:d,ref:b,view:q}),renderSlot(j,"left",d,m,s),l||k||j||m?f&&React.createElement("span",{className:cnListItemGrid("Slot",{position:"center"})},f):f,renderSlot(k,"right",d,l,s))};export var ListItem=forwardRef(ListItemRender);
|
|
2
2
|
//# sourceMappingURL=ListItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","names":["React","forwardRef","Text","cnMixSpace","cn","cnListItemGrid","renderSlot","mapHorisontalSpase","mapHorisontalSpaseIncreased","mapItemVerticalPadding","defaultListPropSize","cnListItem","ListItemRender","props","ref","size","active","label","innerOffset","disabled","className","leftSide","rightSide","rightIcon","leftIcon","as","checked","onClick","status","space","iconSize","otherProps","handleClick","interactive","pH","pV","position","ListItem"],"sources":["../../../../../../src/components/ListCanary/ListItem/ListItem.tsx"],"sourcesContent":["import './ListItem.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { Text } from '##/components/Text';\nimport { cnMixSpace } from '##/mixs/MixSpace';\nimport { cn } from '##/utils/bem';\n\nimport { cnListItemGrid, renderSlot } from '../ListItemGrid';\nimport {\n mapHorisontalSpase,\n mapHorisontalSpaseIncreased,\n mapItemVerticalPadding,\n} from '../maps';\nimport {\n defaultListPropSize,\n ListItemComponent,\n ListItemProps,\n} from '../types';\n\nexport const cnListItem = cn('ListItem');\n\nconst ListItemRender = (\n props: ListItemProps,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const {\n size = defaultListPropSize,\n active,\n label,\n innerOffset,\n disabled,\n className,\n leftSide,\n rightSide,\n rightIcon,\n leftIcon,\n as,\n checked,\n onClick,\n status,\n space,\n iconSize,\n ...otherProps\n } = props;\n\n const handleClick: React.MouseEventHandler<HTMLDivElement> | undefined =\n onClick && !disabled ? onClick : undefined;\n\n return (\n <Text\n {...otherProps}\n className={cnListItem(\n { active, disabled, checked, interactive: !!handleClick },\n [\n cnMixSpace(\n space || {\n pH:\n innerOffset === 'increased'\n ? mapHorisontalSpaseIncreased[size]\n : mapHorisontalSpase[size],\n pV: mapItemVerticalPadding[size],\n },\n ),\n cnListItemGrid(),\n className,\n ],\n )}\n as={as}\n onClick={handleClick}\n lineHeight=\"xs\"\n size={size}\n ref={ref}\n view={status}\n >\n {renderSlot(leftSide, 'left', size, leftIcon, iconSize)}\n {!rightIcon && !rightSide && !leftSide && !leftIcon
|
|
1
|
+
{"version":3,"file":"ListItem.js","names":["React","forwardRef","Text","cnMixSpace","cn","cnListItemGrid","renderSlot","mapHorisontalSpase","mapHorisontalSpaseIncreased","mapItemVerticalPadding","defaultListPropSize","cnListItem","ListItemRender","props","ref","size","active","label","innerOffset","disabled","className","leftSide","rightSide","rightIcon","leftIcon","as","checked","onClick","status","space","iconSize","otherProps","handleClick","interactive","pH","pV","position","ListItem"],"sources":["../../../../../../src/components/ListCanary/ListItem/ListItem.tsx"],"sourcesContent":["import './ListItem.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { Text } from '##/components/Text';\nimport { cnMixSpace } from '##/mixs/MixSpace';\nimport { cn } from '##/utils/bem';\n\nimport { cnListItemGrid, renderSlot } from '../ListItemGrid';\nimport {\n mapHorisontalSpase,\n mapHorisontalSpaseIncreased,\n mapItemVerticalPadding,\n} from '../maps';\nimport {\n defaultListPropSize,\n ListItemComponent,\n ListItemProps,\n} from '../types';\n\nexport const cnListItem = cn('ListItem');\n\nconst ListItemRender = (\n props: ListItemProps,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const {\n size = defaultListPropSize,\n active,\n label,\n innerOffset,\n disabled,\n className,\n leftSide,\n rightSide,\n rightIcon,\n leftIcon,\n as,\n checked,\n onClick,\n status,\n space,\n iconSize,\n ...otherProps\n } = props;\n\n const handleClick: React.MouseEventHandler<HTMLDivElement> | undefined =\n onClick && !disabled ? onClick : undefined;\n\n return (\n <Text\n {...otherProps}\n className={cnListItem(\n { active, disabled, checked, interactive: !!handleClick },\n [\n cnMixSpace(\n space || {\n pH:\n innerOffset === 'increased'\n ? mapHorisontalSpaseIncreased[size]\n : mapHorisontalSpase[size],\n pV: mapItemVerticalPadding[size],\n },\n ),\n cnListItemGrid(),\n className,\n ],\n )}\n as={as}\n onClick={handleClick}\n lineHeight=\"xs\"\n size={size}\n ref={ref}\n view={status}\n >\n {renderSlot(leftSide, 'left', size, leftIcon, iconSize)}\n {!rightIcon && !rightSide && !leftSide && !leftIcon\n ? label\n : label && (\n <span className={cnListItemGrid('Slot', { position: 'center' })}>\n {label}\n </span>\n )}\n {renderSlot(rightSide, 'right', size, rightIcon, iconSize)}\n </Text>\n );\n};\n\nexport const ListItem = forwardRef(ListItemRender) as ListItemComponent;\n"],"mappings":"qQAAA,uBAEA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OAASC,IAAT,kBACA,OAASC,UAAT,8BACA,OAASC,EAAT,0BAEA,OAASC,cAAT,CAAyBC,UAAzB,uBACA,OACEC,kBADF,CAEEC,2BAFF,CAGEC,sBAHF,eAKA,OACEC,mBADF,gBAMA,MAAO,IAAMC,WAAU,CAAGP,EAAE,CAAC,UAAD,CAArB,CAEP,GAAMQ,eAAc,CAAG,SACrBC,CADqB,CAErBC,CAFqB,CAGlB,OAmBCD,CAnBD,CAEDE,IAFC,CAEDA,CAFC,YAEML,mBAFN,GAGDM,CAHC,CAmBCH,CAnBD,CAGDG,MAHC,CAIDC,CAJC,CAmBCJ,CAnBD,CAIDI,KAJC,CAKDC,CALC,CAmBCL,CAnBD,CAKDK,WALC,CAMDC,CANC,CAmBCN,CAnBD,CAMDM,QANC,CAODC,CAPC,CAmBCP,CAnBD,CAODO,SAPC,CAQDC,CARC,CAmBCR,CAnBD,CAQDQ,QARC,CASDC,CATC,CAmBCT,CAnBD,CASDS,SATC,CAUDC,CAVC,CAmBCV,CAnBD,CAUDU,SAVC,CAWDC,CAXC,CAmBCX,CAnBD,CAWDW,QAXC,CAYDC,CAZC,CAmBCZ,CAnBD,CAYDY,EAZC,CAaDC,CAbC,CAmBCb,CAnBD,CAaDa,OAbC,CAcDC,CAdC,CAmBCd,CAnBD,CAcDc,OAdC,CAeDC,CAfC,CAmBCf,CAnBD,CAeDe,MAfC,CAgBDC,CAhBC,CAmBChB,CAnBD,CAgBDgB,KAhBC,CAiBDC,CAjBC,CAmBCjB,CAnBD,CAiBDiB,QAjBC,CAkBEC,CAlBF,0BAmBClB,CAnBD,YAqBGmB,CAAgE,CACpEL,CAAO,EAAI,CAACR,CAAZ,CAAuBQ,CAAvB,OAtBC,CAwBH,MACE,qBAAC,IAAD,kBACMI,CADN,EAEE,SAAS,CAAEpB,UAAU,CACnB,CAAEK,MAAM,CAANA,CAAF,CAAUG,QAAQ,CAARA,CAAV,CAAoBO,OAAO,CAAPA,CAApB,CAA6BO,WAAW,CAAE,CAAC,CAACD,CAA5C,CADmB,CAEnB,CACE7B,UAAU,CACR0B,CAAK,EAAI,CACPK,EAAE,CACgB,WAAhB,GAAAhB,CAAW,CACPV,2BAA2B,CAACO,CAAD,CADpB,CAEPR,kBAAkB,CAACQ,CAAD,CAJjB,CAKPoB,EAAE,CAAE1B,sBAAsB,CAACM,CAAD,CALnB,CADD,CADZ,CAUEV,cAAc,EAVhB,CAWEe,CAXF,CAFmB,CAFvB,CAkBE,EAAE,CAAEK,CAlBN,CAmBE,OAAO,CAAEO,CAnBX,CAoBE,UAAU,CAAC,IApBb,CAqBE,IAAI,CAAEjB,CArBR,CAsBE,GAAG,CAAED,CAtBP,CAuBE,IAAI,CAAEc,CAvBR,GAyBGtB,UAAU,CAACe,CAAD,CAAW,MAAX,CAAmBN,CAAnB,CAAyBS,CAAzB,CAAmCM,CAAnC,CAzBb,CA0BIP,CAAD,EAAeD,CAAf,EAA6BD,CAA7B,EAA0CG,CAA1C,CAEGP,CAAK,EACH,4BAAM,SAAS,CAAEZ,cAAc,CAAC,MAAD,CAAS,CAAE+B,QAAQ,CAAE,QAAZ,CAAT,CAA/B,EACGnB,CADH,CAHL,CACGA,CA3BN,CAiCGX,UAAU,CAACgB,CAAD,CAAY,OAAZ,CAAqBP,CAArB,CAA2BQ,CAA3B,CAAsCO,CAAtC,CAjCb,CAoCH,CAhED,CAkEA,MAAO,IAAMO,SAAQ,CAAGpC,UAAU,CAACW,cAAD,CAA3B"}
|