@consta/uikit 4.10.0 → 4.11.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/Combobox/Combobox.js +1 -1
- package/__internal__/src/components/Combobox/Combobox.js.map +1 -1
- package/__internal__/src/components/Combobox/helpers.d.ts +3 -1
- package/__internal__/src/components/Combobox/helpers.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDate/DatePickerFieldTypeDate.d.ts +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDate/DatePickerFieldTypeDate.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDate/DatePickerFieldTypeDate.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDate/helpers.d.ts +13 -4
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDate/helpers.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDate/helpers.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateTime/DatePickerFieldTypeDateTime.d.ts +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateTime/DatePickerFieldTypeDateTime.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateTime/DatePickerFieldTypeDateTime.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateTime/helpers.d.ts +16 -4
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateTime/helpers.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateTime/helpers.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeMonth/DatePickerFieldTypeMonth.d.ts +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeMonth/DatePickerFieldTypeMonth.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeMonth/DatePickerFieldTypeMonth.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeMonth/helpers.d.ts +13 -4
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeMonth/helpers.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeMonth/helpers.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeTime/DatePickerFieldTypeTime.d.ts +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeTime/DatePickerFieldTypeTime.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeTime/DatePickerFieldTypeTime.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeTime/helpers.d.ts +16 -4
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeTime/helpers.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeTime/helpers.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/DatePickerFieldTypeYear.d.ts +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/DatePickerFieldTypeYear.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/DatePickerFieldTypeYear.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/helpers.d.ts +13 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/helpers.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeYear/helpers.js.map +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBar.css +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBar.js +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBar.js.map +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBarItem/ProgressStepBarItem.css +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBarItem/ProgressStepBarItem.js +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBarItem/ProgressStepBarItem.js.map +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.css +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.js +1 -1
- package/__internal__/src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.js.map +1 -1
- package/__internal__/src/components/ProgressStepBar/helpers.d.ts +2 -0
- package/__internal__/src/components/ProgressStepBar/helpers.js +1 -1
- package/__internal__/src/components/ProgressStepBar/helpers.js.map +1 -1
- package/__internal__/src/components/SelectComponents/SelectItem/SelectItem.js +1 -1
- package/__internal__/src/components/SelectComponents/SelectItem/SelectItem.js.map +1 -1
- package/__internal__/src/components/SelectComponents/SelectValueTag/SelectValueTag.css +1 -1
- package/__internal__/src/components/SelectComponents/SelectValueTag/SelectValueTag.d.ts +1 -0
- package/__internal__/src/components/SelectComponents/SelectValueTag/SelectValueTag.js +1 -1
- package/__internal__/src/components/SelectComponents/SelectValueTag/SelectValueTag.js.map +1 -1
- package/__internal__/src/components/TextField/TextField.css +1 -1
- package/__internal__/src/components/TextField/index.d.ts +1 -0
- package/__internal__/src/components/TextField/index.js +1 -1
- package/__internal__/src/components/TextField/index.js.map +1 -1
- package/__internal__/src/components/TextField/useIMask.d.ts +15 -0
- package/__internal__/src/components/TextField/useIMask.js +2 -0
- package/__internal__/src/components/TextField/useIMask.js.map +1 -0
- package/__internal__/src/components/UserSelect/UserSelect.js +1 -1
- package/__internal__/src/components/UserSelect/UserSelect.js.map +1 -1
- package/__internal__/src/components/UserSelect/UserSelectItem/UserSelectItem.css +1 -1
- package/__internal__/src/components/UserSelect/UserSelectValue/UserSelectValue.css +1 -1
- package/__internal__/src/components/UserSelect/UserSelectValue/UserSelectValue.js +1 -1
- package/__internal__/src/components/UserSelect/UserSelectValue/UserSelectValue.js.map +1 -1
- package/__internal__/src/components/UserSelect/helpers.d.ts +3 -1
- package/__internal__/src/components/UserSelect/helpers.js.map +1 -1
- package/__internal__/src/hooks/useSelect/useSelect.js +1 -1
- package/__internal__/src/hooks/useSelect/useSelect.js.map +1 -1
- package/package.json +1 -1
package/__internal__/src/components/ProgressStepBar/ProgressStepBarItem/ProgressStepBarItem.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ProgressStepBarItem{align-items:flex-start;display:inline-flex;flex:1;height:100%;position:relative}.ProgressStepBarItem_direction_horizontal{flex-direction:column}.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_xs{margin-bottom:var(--space-2xs)}.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_m,.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_s{margin-bottom:var(--space-xs)}.ProgressStepBarItem_direction_vertical{flex-direction:row}.ProgressStepBarItem_direction_vertical .ProgressStepBarItem-Point{margin-right:var(--space-xs)}.ProgressStepBarItem_direction_vertical .ProgressStepBarItem-Content_size_xs{margin-top:-4px}.ProgressStepBarItem_size_xs{--progress-step-bar-item-point-size:var(--space-xs);--progress-step-bar-item-label-margin:var(--space-2xs)}.ProgressStepBarItem_size_s{--progress-step-bar-item-point-size:var(--space-m);--progress-step-bar-item-label-margin:var(--space-xs)}.ProgressStepBarItem_size_m{--progress-step-bar-item-point-size:var(--space-xl);--progress-step-bar-item-label-margin:var(--space-xs)}.ProgressStepBarItem_position_start{flex:1}.ProgressStepBarItem_position_start .ProgressStepBarItem-Content,.ProgressStepBarItem_position_start.ProgressStepBarItem_direction_horizontal{align-items:flex-start;text-align:left}.ProgressStepBarItem_position_center{flex:2}.ProgressStepBarItem_position_center .ProgressStepBarItemr-Content,.ProgressStepBarItem_position_center.ProgressStepBarItem_direction_horizontal{align-items:center;text-align:center}.ProgressStepBarItem_position_end{flex:1}.ProgressStepBarItem_position_end .ProgressStepBarItem-Content,.ProgressStepBarItem_position_end.ProgressStepBarItem_direction_horizontal{align-items:flex-end;text-align:right}.ProgressStepBarItem_status_system{--progress-step-bar-item-point-background:var(--color-bg-system);--progress-step-bar-item-point-content-color:var(--color-typo-secondary)}.ProgressStepBarItem_status_normal{--progress-step-bar-item-point-background:var(--color-bg-normal);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_success{--progress-step-bar-item-point-background:var(--color-bg-success);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_warning{--progress-step-bar-item-point-background:var(--color-bg-warning);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_alert{--progress-step-bar-item-point-background:var(--color-bg-alert);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem .ProgressStepBarItem-PointIcon,.ProgressStepBarItem .ProgressStepBarItem-PointText{color:var(--progress-step-bar-item-point-content-color)}.ProgressStepBarItem .ProgressSpin{stroke:var(--progress-step-bar-item-point-content-color)}.ProgressStepBarItem-Point{align-items:center;background-color:var(--progress-step-bar-item-point-background);border:none;border-radius:calc(var(--progress-step-bar-item-point-size)*.5);color:var(--color-bg-default);display:flex;justify-content:center;margin:0;min-height:var(--progress-step-bar-item-point-size);min-width:var(--progress-step-bar-item-point-size);padding:0;transition:background-color .3s}.ProgressStepBarItem-Point_pointer{cursor:pointer}.ProgressStepBarItem-PointText{color:var(--color-typo-secondary);transition:color .3s}.ProgressStepBarItem-Content_bottomOffset,.ProgressStepBarItem-Label{margin-bottom:var(--progress-step-bar-item-label-margin)}
|
|
1
|
+
.ProgressStepBarItem{align-items:flex-start;display:inline-flex;flex:1;height:100%;position:relative;width:100%}.ProgressStepBarItem_direction_horizontal{flex-direction:column}.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_xs{margin-bottom:var(--space-2xs)}.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_m,.ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_s{margin-bottom:var(--space-xs)}.ProgressStepBarItem_direction_vertical{flex-direction:row}.ProgressStepBarItem_direction_vertical .ProgressStepBarItem-Point{margin-right:var(--space-xs)}.ProgressStepBarItem_direction_vertical .ProgressStepBarItem-Content_size_xs{margin-top:-4px}.ProgressStepBarItem_size_xs{--progress-step-bar-item-point-size:var(--space-xs);--progress-step-bar-item-label-margin:var(--space-2xs)}.ProgressStepBarItem_size_s{--progress-step-bar-item-point-size:var(--space-m);--progress-step-bar-item-label-margin:var(--space-xs)}.ProgressStepBarItem_size_m{--progress-step-bar-item-point-size:var(--space-xl);--progress-step-bar-item-label-margin:var(--space-xs)}.ProgressStepBarItem_position_start{flex:1}.ProgressStepBarItem_position_start .ProgressStepBarItem-Content,.ProgressStepBarItem_position_start.ProgressStepBarItem_direction_horizontal{align-items:flex-start;text-align:left}.ProgressStepBarItem_position_center{flex:2}.ProgressStepBarItem_position_center .ProgressStepBarItemr-Content,.ProgressStepBarItem_position_center.ProgressStepBarItem_direction_horizontal{align-items:center;text-align:center}.ProgressStepBarItem_position_end{flex:1}.ProgressStepBarItem_position_end .ProgressStepBarItem-Content,.ProgressStepBarItem_position_end.ProgressStepBarItem_direction_horizontal{align-items:flex-end;text-align:right}.ProgressStepBarItem_status_system{--progress-step-bar-item-point-background:var(--color-bg-system);--progress-step-bar-item-point-content-color:var(--color-typo-secondary)}.ProgressStepBarItem_status_normal{--progress-step-bar-item-point-background:var(--color-bg-normal);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_success{--progress-step-bar-item-point-background:var(--color-bg-success);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_warning{--progress-step-bar-item-point-background:var(--color-bg-warning);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem_status_alert{--progress-step-bar-item-point-background:var(--color-bg-alert);--progress-step-bar-item-point-content-color:var(--color-bg-default)}.ProgressStepBarItem .ProgressStepBarItem-PointIcon,.ProgressStepBarItem .ProgressStepBarItem-PointText{color:var(--progress-step-bar-item-point-content-color)}.ProgressStepBarItem .ProgressSpin{stroke:var(--progress-step-bar-item-point-content-color)}.ProgressStepBarItem-Point{align-items:center;background-color:var(--progress-step-bar-item-point-background);border:none;border-radius:calc(var(--progress-step-bar-item-point-size)*.5);color:var(--color-bg-default);display:flex;justify-content:center;margin:0;min-height:var(--progress-step-bar-item-point-size);min-width:var(--progress-step-bar-item-point-size);padding:0;transition:background-color .3s}.ProgressStepBarItem-Point_pointer{cursor:pointer}.ProgressStepBarItem-PointText{color:var(--color-typo-secondary);transition:color .3s}.ProgressStepBarItem-Content_bottomOffset,.ProgressStepBarItem-Label{margin-bottom:var(--progress-step-bar-item-label-margin)}
|
package/__internal__/src/components/ProgressStepBar/ProgressStepBarItem/ProgressStepBarItem.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["content","tooltipContent","label","point","status","progress","direction","size","pointRef","onClick","position","tooltipZIndex"];import"./ProgressStepBarItem.css";import React,{useRef}from"react";import{useForkRef}from"../../../hooks/useForkRef";import{useMouseLeave}from"../../../hooks/useMouseLeave";import{useFlag}from"../../../hooks/useFlag/useFlag";import{cnMixFocus}from"../../../mixs/MixFocus/MixFocus";import{cn}from"../../../utils/bem";import{ProgressSpin}from"../../ProgressSpin/ProgressSpin";import{Text}from"../../Text/Text";import{Tooltip}from"../../Tooltip/Tooltip";import{propPositionDefault,propStatusDefault}from"../helpers";var cnProgressStepBarItem=cn("ProgressStepBarItem"),possibleVerticalDirections=["leftCenter","rightCenter","rightUp","downCenter"],possibleHorizontalDirections=["downCenter","upCenter","downStartLeft","downStartRight"],renderPointContent=function(a,b,c){if(c)return React.createElement(ProgressSpin,{size:b});if(!a)return null;if("number"==typeof a)return React.createElement(Text,{className:cnProgressStepBarItem("PointText"),size:"s"===b?"2xs":"xs",weight:"bold"},a);return React.createElement(a,{className:cnProgressStepBarItem("PointIcon"),size:"xs"})};export var ProgressStepBarItem=React.forwardRef(function(a,b){var c=a.content,d=a.tooltipContent,e=a.label,f=a.point,g=a.status,h=a.progress,i=a.direction,j=a.size,k=a.pointRef,l=a.onClick,m=a.position,n=void 0===m?propPositionDefault:m,o=a.tooltipZIndex,p=_objectWithoutProperties(a,_excluded),
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["content","tooltipContent","label","point","status","progress","direction","size","pointRef","onClick","position","tooltipZIndex","className"];import"./ProgressStepBarItem.css";import React,{useRef}from"react";import{useForkRef}from"../../../hooks/useForkRef";import{useMouseLeave}from"../../../hooks/useMouseLeave";import{useFlag}from"../../../hooks/useFlag/useFlag";import{cnMixFocus}from"../../../mixs/MixFocus/MixFocus";import{cn}from"../../../utils/bem";import{ProgressSpin}from"../../ProgressSpin/ProgressSpin";import{Text}from"../../Text/Text";import{Tooltip}from"../../Tooltip/Tooltip";import{propPositionDefault,propStatusDefault}from"../helpers";var cnProgressStepBarItem=cn("ProgressStepBarItem"),possibleVerticalDirections=["leftCenter","rightCenter","rightUp","downCenter"],possibleHorizontalDirections=["downCenter","upCenter","downStartLeft","downStartRight"],renderPointContent=function(a,b,c){if(c)return React.createElement(ProgressSpin,{size:b});if(!a)return null;if("number"==typeof a)return React.createElement(Text,{className:cnProgressStepBarItem("PointText"),size:"s"===b?"2xs":"xs",weight:"bold"},a);return React.createElement(a,{className:cnProgressStepBarItem("PointIcon"),size:"xs"})};export var ProgressStepBarItem=React.forwardRef(function(a,b){var c=a.content,d=a.tooltipContent,e=a.label,f=a.point,g=a.status,h=a.progress,i=a.direction,j=a.size,k=a.pointRef,l=a.onClick,m=a.position,n=void 0===m?propPositionDefault:m,o=a.tooltipZIndex,p=a.className,q=_objectWithoutProperties(a,_excluded),r=useFlag(),s=_slicedToArray(r,2),t=s[0],u=s[1],v=useRef(null),w=useRef(null),x=useRef(null),y=useForkRef([x,k]),z={onMouseEnter:u.on,className:cnProgressStepBarItem("Point",{size:j,pointer:!!l},[l?cnMixFocus():void 0]),children:"xs"!==j&&renderPointContent(f,j,h),ref:y,onClick:l};return useMouseLeave({isActive:t,refs:[v,x,w],handler:u.off,debounce:100}),React.createElement(React.Fragment,null,React.createElement("div",Object.assign({ref:b,className:cnProgressStepBarItem({direction:i,position:n,status:g||propStatusDefault,size:j},[p])},q),React.createElement("button",Object.assign({tabIndex:-1,type:"button"},z)),(e||c)&&React.createElement("div",{className:cnProgressStepBarItem("Content",{bottomOffset:!!c})},e&&React.createElement(Text,{className:cnProgressStepBarItem("Label"),ref:v,size:j,onMouseEnter:u.on,lineHeight:"s"===j?"xs":j,view:"primary"},e),c)),d&&t&&React.createElement(Tooltip,{ref:w,anchorRef:e||c?v:x,className:cnProgressStepBarItem("Tooltip"),direction:"horizontal"===i?"downCenter":"leftUp",style:{zIndex:o},isInteractive:!1,possibleDirections:"horizontal"===i?possibleHorizontalDirections:possibleVerticalDirections},d))});
|
|
2
2
|
//# sourceMappingURL=ProgressStepBarItem.js.map
|
package/__internal__/src/components/ProgressStepBar/ProgressStepBarItem/ProgressStepBarItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressStepBarItem.js","names":["React","useRef","useForkRef","useMouseLeave","useFlag","cnMixFocus","cn","ProgressSpin","Text","Tooltip","propPositionDefault","propStatusDefault","cnProgressStepBarItem","possibleVerticalDirections","possibleHorizontalDirections","renderPointContent","point","size","progress","ProgressStepBarItem","forwardRef","props","ref","content","tooltipContent","label","status","direction","pointRefProp","pointRef","onClick","position","tooltipZIndex","otherProps","isTooltipVisible","setTooltipVisible","anchorRef","tooltipRef","pointForkedRef","pointProps","onMouseEnter","on","
|
|
1
|
+
{"version":3,"file":"ProgressStepBarItem.js","names":["React","useRef","useForkRef","useMouseLeave","useFlag","cnMixFocus","cn","ProgressSpin","Text","Tooltip","propPositionDefault","propStatusDefault","cnProgressStepBarItem","possibleVerticalDirections","possibleHorizontalDirections","renderPointContent","point","size","progress","ProgressStepBarItem","forwardRef","props","ref","content","tooltipContent","label","status","direction","pointRefProp","pointRef","onClick","position","tooltipZIndex","className","otherProps","isTooltipVisible","setTooltipVisible","anchorRef","tooltipRef","pointForkedRef","pointProps","onMouseEnter","on","pointer","children","isActive","refs","handler","off","debounce","bottomOffset","zIndex"],"sources":["../../../../../../src/components/ProgressStepBar/ProgressStepBarItem/ProgressStepBarItem.tsx"],"sourcesContent":["import './ProgressStepBarItem.css';\n\nimport { IconComponent } from '@consta/icons/Icon';\nimport React, { useRef } from 'react';\n\nimport { useForkRef } from '##/hooks/useForkRef';\nimport { useMouseLeave } from '##/hooks/useMouseLeave';\n\nimport { useFlag } from '../../../hooks/useFlag/useFlag';\nimport { cnMixFocus } from '../../../mixs/MixFocus/MixFocus';\nimport { cn } from '../../../utils/bem';\nimport { Direction } from '../../Popover/Popover';\nimport { ProgressSpin } from '../../ProgressSpin/ProgressSpin';\nimport { Text } from '../../Text/Text';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport {\n PointNumbersMap,\n ProgressStepBarItemComponent,\n propPositionDefault,\n propStatusDefault,\n} from '../helpers';\n\nconst cnProgressStepBarItem = cn('ProgressStepBarItem');\n\nconst possibleVerticalDirections: Direction[] = [\n 'leftCenter',\n 'rightCenter',\n 'rightUp',\n 'downCenter',\n];\nconst possibleHorizontalDirections: Direction[] = [\n 'downCenter',\n 'upCenter',\n 'downStartLeft',\n 'downStartRight',\n];\n\nconst renderPointContent = (\n point: PointNumbersMap | IconComponent | undefined,\n size: 'm' | 's',\n progress: boolean | undefined,\n) => {\n if (progress) return <ProgressSpin size={size} />;\n if (!point) return null;\n\n if (typeof point === 'number') {\n return (\n <Text\n className={cnProgressStepBarItem('PointText')}\n size={size === 's' ? '2xs' : 'xs'}\n weight=\"bold\"\n >\n {point}\n </Text>\n );\n }\n\n const Icon = point;\n\n return <Icon className={cnProgressStepBarItem('PointIcon')} size=\"xs\" />;\n};\n\nexport const ProgressStepBarItem: ProgressStepBarItemComponent =\n React.forwardRef((props, ref) => {\n const {\n content,\n tooltipContent,\n label,\n point,\n status,\n progress,\n direction,\n size,\n pointRef: pointRefProp,\n onClick,\n position = propPositionDefault,\n tooltipZIndex,\n className,\n ...otherProps\n } = props;\n\n const [isTooltipVisible, setTooltipVisible] = useFlag();\n\n const anchorRef = useRef<HTMLDivElement>(null);\n const tooltipRef = useRef<HTMLDivElement>(null);\n const pointRef = useRef<HTMLButtonElement>(null);\n\n const pointForkedRef = useForkRef([pointRef, pointRefProp]);\n\n const pointProps = {\n onMouseEnter: setTooltipVisible.on,\n className: cnProgressStepBarItem(\n 'Point',\n {\n size,\n pointer: !!onClick,\n },\n [onClick ? cnMixFocus() : undefined],\n ),\n children: size !== 'xs' && renderPointContent(point, size, progress),\n ref: pointForkedRef,\n onClick,\n };\n\n useMouseLeave({\n isActive: isTooltipVisible,\n refs: [anchorRef, pointRef, tooltipRef],\n handler: setTooltipVisible.off,\n debounce: 100,\n });\n\n return (\n <>\n <div\n ref={ref}\n className={cnProgressStepBarItem(\n {\n direction,\n position,\n status: status || propStatusDefault,\n size,\n },\n [className],\n )}\n {...otherProps}\n >\n <button tabIndex={-1} type=\"button\" {...pointProps} />\n {(label || content) && (\n <div\n className={cnProgressStepBarItem('Content', {\n bottomOffset: !!content,\n })}\n >\n {label && (\n <Text\n className={cnProgressStepBarItem('Label')}\n ref={anchorRef}\n size={size}\n onMouseEnter={setTooltipVisible.on}\n lineHeight={size === 's' ? 'xs' : size}\n view=\"primary\"\n >\n {label}\n </Text>\n )}\n {content}\n </div>\n )}\n </div>\n {tooltipContent && isTooltipVisible && (\n <Tooltip\n ref={tooltipRef}\n anchorRef={label || content ? anchorRef : pointRef}\n className={cnProgressStepBarItem('Tooltip')}\n direction={direction === 'horizontal' ? 'downCenter' : 'leftUp'}\n style={{ zIndex: tooltipZIndex }}\n isInteractive={false}\n possibleDirections={\n direction === 'horizontal'\n ? possibleHorizontalDirections\n : possibleVerticalDirections\n }\n >\n {tooltipContent}\n </Tooltip>\n )}\n </>\n );\n });\n"],"mappings":"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"}
|
package/__internal__/src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ProgressStepBarLine{
|
|
1
|
+
.ProgressStepBarLine{border-radius:var(--space-xs);height:var(--progress-step-bar-line-height);left:var(--progress-step-bar-line-left);overflow:hidden;position:absolute;top:var(--progress-step-bar-line-top);width:var(--progress-step-bar-line-width)}.ProgressStepBarLine_direction_horizontal{--progress-step-bar-line-top:calc(var(--progress-step-bar-line-padding) + var(--progress-step-bar-offset));--progress-step-bar-line-left:var(--progress-step-bar-offset);--progress-step-bar-line-width:calc(var(--line-size) - var(--progress-step-bar-offset)*4);--progress-step-bar-line-height:var(--progress-step-bar-line-size);--progress-step-bar-line-after-top:0;--progress-step-bar-line-after-left:var(--line-active-size)}.ProgressStepBarLine_direction_vertical{--progress-step-bar-line-top:var(--progress-step-bar-offset);--progress-step-bar-line-left:calc(var(--progress-step-bar-line-padding) + var(--progress-step-bar-offset));--progress-step-bar-line-width:var(--progress-step-bar-line-size);--progress-step-bar-line-height:calc(var(--line-size) - var(--progress-step-bar-offset));--progress-step-bar-line-after-top:var(--line-active-size);--progress-step-bar-line-after-left:0}.ProgressStepBarLine_size_xs{--progress-step-bar-line-size:var(--space-3xs);--progress-step-bar-line-padding:calc((var(--space-xs) - var(--space-3xs))*0.5)}.ProgressStepBarLine_size_s{--progress-step-bar-line-size:var(--space-2xs);--progress-step-bar-line-padding:calc((var(--space-m) - var(--space-2xs))*0.5)}.ProgressStepBarLine_size_m{--progress-step-bar-line-size:var(--space-2xs);--progress-step-bar-line-padding:calc((var(--space-xl) - var(--space-2xs))*0.5)}.ProgressStepBarLine:after{background:var(--color-bg-system);bottom:0;content:"";left:var(--progress-step-bar-line-after-left);position:absolute;right:0;top:var(--progress-step-bar-line-after-top);transition:left .3s,top .3s}.ProgressStepBarLine-Svg{left:0;position:absolute;top:0}
|
package/__internal__/src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["lines","activeStepIndex","size","direction"];import"./ProgressStepBarLine.css";import React from"react";import{cn}from"../../../utils/bem";
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["lines","activeStepIndex","size","direction"];import"./ProgressStepBarLine.css";import React from"react";import{cn}from"../../../utils/bem";var cnProgressStepBarLine=cn("ProgressStepBarLine"),getActiveLineSize=function(a,b){var c=b.map(function(a){var b=a.size;return b}),d=a?Math.max(a,0):void 0;return"number"!=typeof d||0===d?0:c.splice(0,d).reduce(function(c,a){return c+a})},getPathParams=function(a,b){var c=[],d=0;return a.forEach(function(a){var e=a.size,f=a.status;c.push({width:"horizontal"===b?e:"var(--progress-step-bar-line-width)",height:"horizontal"===b?"var(--progress-step-bar-line-height)":e,x:"horizontal"===b?d:0,y:"horizontal"===b?0:d,fill:"var(--color-bg-".concat(f||"normal",")")}),d+=e}),c};export var ProgressStepBarLine=function(a){var b,c=a.lines,d=a.activeStepIndex,e=a.size,f=a.direction,g=_objectWithoutProperties(a,_excluded),h=c.map(function(a){var b=a.size;return b}).reduce(function(c,a){return c+a}),i=getActiveLineSize(d,c);return React.createElement("div",Object.assign({},g,{className:cnProgressStepBarLine({size:e,direction:f}),style:(b={},_defineProperty(b,"--line-size","".concat(h,"px")),_defineProperty(b,"--line-active-size","".concat(i,"px")),b)}),React.createElement("svg",{className:cnProgressStepBarLine("Svg"),width:"100%",height:"100%",xmlns:"http://www.w3.org/2000/svg"},getPathParams(c,f).map(function(a,b){var c=a.fill,d=a.height,e=a.width,f=a.x,g=a.y;return React.createElement("rect",{key:b,style:{height:d,width:e,fill:c},x:f,y:g})})))};
|
|
2
2
|
//# sourceMappingURL=ProgressStepBarLine.js.map
|
package/__internal__/src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressStepBarLine.js","names":["React","cn","
|
|
1
|
+
{"version":3,"file":"ProgressStepBarLine.js","names":["React","cn","cnProgressStepBarLine","getActiveLineSize","activeStepIndex","lines","lineSizes","map","size","active","Math","max","splice","reduce","a","b","getPathParams","direction","paths","width","forEach","status","push","height","x","y","fill","ProgressStepBarLine","props","otherProps","lineSize","activeLineSize","index"],"sources":["../../../../../../src/components/ProgressStepBar/ProgressStepBarLine/ProgressStepBarLine.tsx"],"sourcesContent":["import './ProgressStepBarLine.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { Line, PropDirection, PropSize } from '../helpers';\n\ntype ProgressStepBarLineProps = {\n lines: Line[];\n size: PropSize;\n direction: PropDirection;\n activeStepIndex?: number;\n};\n\nconst cnProgressStepBarLine = cn('ProgressStepBarLine');\n\nconst getActiveLineSize = (\n activeStepIndex: number | undefined,\n lines: Line[],\n) => {\n const lineSizes = lines.map(({ size }) => size);\n const active = activeStepIndex ? Math.max(activeStepIndex, 0) : undefined;\n if (typeof active !== 'number' || active === 0) {\n return 0;\n }\n\n return lineSizes.splice(0, active).reduce((a, b) => a + b);\n};\n\ntype PathItem = {\n fill: string;\n height: string | number;\n width: string | number;\n x: number;\n y: number;\n};\nconst getPathParams = (lines: Line[], direction: PropDirection) => {\n const paths: PathItem[] = [];\n let width = 0;\n lines.forEach(({ size, status }) => {\n paths.push({\n width:\n direction === 'horizontal'\n ? size\n : 'var(--progress-step-bar-line-width)',\n height:\n direction === 'horizontal'\n ? 'var(--progress-step-bar-line-height)'\n : size,\n x: direction === 'horizontal' ? width : 0,\n y: direction === 'horizontal' ? 0 : width,\n fill: `var(--color-bg-${status || 'normal'})`,\n });\n width += size;\n });\n return paths;\n};\n\nexport const ProgressStepBarLine = (props: ProgressStepBarLineProps) => {\n const { lines, activeStepIndex, size, direction, ...otherProps } = props;\n const lineSize = lines.map(({ size }) => size).reduce((a, b) => a + b);\n const activeLineSize = getActiveLineSize(activeStepIndex, lines);\n\n return (\n <div\n {...otherProps}\n className={cnProgressStepBarLine({ size, direction })}\n style={{\n ['--line-size' as string]: `${lineSize}px`,\n ['--line-active-size' as string]: `${activeLineSize}px`,\n }}\n >\n <svg\n className={cnProgressStepBarLine('Svg')}\n width=\"100%\"\n height=\"100%\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n {getPathParams(lines, direction).map(\n ({ fill, height, width, x, y }, index) => (\n <rect key={index} style={{ height, width, fill }} x={x} y={y} />\n ),\n )}\n </svg>\n </div>\n );\n};\n"],"mappings":"qNAAA,kCAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0B,GAUMC,sBAAqB,CAAGD,EAAE,CAAC,qBAAD,C,CAE1BE,iBAAiB,CAAG,SACxBC,CADwB,CAExBC,CAFwB,CAGrB,IACGC,EAAS,CAAGD,CAAK,CAACE,GAAN,CAAU,eAAGC,EAAH,GAAGA,IAAH,OAAcA,EAAd,CAAV,CADf,CAEGC,CAAM,CAAGL,CAAe,CAAGM,IAAI,CAACC,GAAL,CAASP,CAAT,CAA0B,CAA1B,CAAH,OAF3B,OAGmB,QAAlB,QAAOK,EAAP,EAAyC,CAAX,GAAAA,CAH/B,CAIM,CAJN,CAOIH,CAAS,CAACM,MAAV,CAAiB,CAAjB,CAAoBH,CAApB,EAA4BI,MAA5B,CAAmC,SAACC,CAAD,CAAIC,CAAJ,QAAUD,EAAC,CAAGC,CAAd,CAAnC,CACR,C,CASKC,aAAa,CAAG,SAACX,CAAD,CAAgBY,CAAhB,CAA6C,IAC3DC,EAAiB,CAAG,EADuC,CAE7DC,CAAK,CAAG,CAFqD,CAmBjE,MAhBAd,EAAK,CAACe,OAAN,CAAc,WAAsB,IAAnBZ,EAAmB,GAAnBA,IAAmB,CAAba,CAAa,GAAbA,MAAa,CAClCH,CAAK,CAACI,IAAN,CAAW,CACTH,KAAK,CACW,YAAd,GAAAF,CAAS,CACLT,CADK,CAEL,qCAJG,CAKTe,MAAM,CACU,YAAd,GAAAN,CAAS,CACL,sCADK,CAELT,CARG,CASTgB,CAAC,CAAgB,YAAd,GAAAP,CAAS,CAAoBE,CAApB,CAA4B,CAT/B,CAUTM,CAAC,CAAgB,YAAd,GAAAR,CAAS,CAAoB,CAApB,CAAwBE,CAV3B,CAWTO,IAAI,0BAAoBL,CAAM,EAAI,QAA9B,KAXK,CAAX,CADkC,CAclCF,CAAK,EAAIX,CACV,CAfD,CAgBA,CAAOU,CACR,C,CAED,MAAO,IAAMS,oBAAmB,CAAG,SAACC,CAAD,CAAqC,OAC9DvB,CAD8D,CACHuB,CADG,CAC9DvB,KAD8D,CACvDD,CADuD,CACHwB,CADG,CACvDxB,eADuD,CACtCI,CADsC,CACHoB,CADG,CACtCpB,IADsC,CAChCS,CADgC,CACHW,CADG,CAChCX,SADgC,CAClBY,CADkB,0BACHD,CADG,YAEhEE,CAAQ,CAAGzB,CAAK,CAACE,GAAN,CAAU,eAAGC,EAAH,GAAGA,IAAH,OAAcA,EAAd,CAAV,EAA8BK,MAA9B,CAAqC,SAACC,CAAD,CAAIC,CAAJ,QAAUD,EAAC,CAAGC,CAAd,CAArC,CAFqD,CAGhEgB,CAAc,CAAG5B,iBAAiB,CAACC,CAAD,CAAkBC,CAAlB,CAH8B,CAKtE,MACE,4CACMwB,CADN,EAEE,SAAS,CAAE3B,qBAAqB,CAAC,CAAEM,IAAI,CAAJA,CAAF,CAAQS,SAAS,CAATA,CAAR,CAAD,CAFlC,CAGE,KAAK,yBACF,aADE,WAC2Ba,CAD3B,0BAEF,oBAFE,WAEkCC,CAFlC,UAHP,GAQE,2BACE,SAAS,CAAE7B,qBAAqB,CAAC,KAAD,CADlC,CAEE,KAAK,CAAC,MAFR,CAGE,MAAM,CAAC,MAHT,CAIE,KAAK,CAAC,4BAJR,EAMGc,aAAa,CAACX,CAAD,CAAQY,CAAR,CAAb,CAAgCV,GAAhC,CACC,WAAgCyB,CAAhC,KAAGN,EAAH,GAAGA,IAAH,CAASH,CAAT,GAASA,MAAT,CAAiBJ,CAAjB,GAAiBA,KAAjB,CAAwBK,CAAxB,GAAwBA,CAAxB,CAA2BC,CAA3B,GAA2BA,CAA3B,OACE,6BAAM,GAAG,CAAEO,CAAX,CAAkB,KAAK,CAAE,CAAET,MAAM,CAANA,CAAF,CAAUJ,KAAK,CAALA,CAAV,CAAiBO,IAAI,CAAJA,CAAjB,CAAzB,CAAkD,CAAC,CAAEF,CAArD,CAAwD,CAAC,CAAEC,CAA3D,EADF,CADD,CANH,CARF,CAsBH,CA5BM"}
|
|
@@ -74,6 +74,7 @@ export declare type ProgressStepBarItemProps = {
|
|
|
74
74
|
size: PropSize;
|
|
75
75
|
onClick?: (e: React.MouseEvent) => void;
|
|
76
76
|
pointRef?: React.RefObject<HTMLButtonElement>;
|
|
77
|
+
className?: string;
|
|
77
78
|
};
|
|
78
79
|
export declare const cnProgressStepBar: import("@bem-react/classname").ClassNameFormatter;
|
|
79
80
|
export declare const defaultGetItemLabel: PropGetItemLabel<DefaultItem>;
|
|
@@ -120,3 +121,4 @@ export declare function withDefaultGetters<ITEM>(props: ProgressStepBarProps<ITE
|
|
|
120
121
|
};
|
|
121
122
|
export declare const getItemPosition: (index: number, lendth: number) => "end" | "start" | "center";
|
|
122
123
|
export declare const getLineSize: (container: React.RefObject<HTMLElement>, activeElement: React.RefObject<HTMLElement>, direction: PropDirection) => number;
|
|
124
|
+
export declare const calculateLines: (refs: React.RefObject<HTMLElement>[], direction: PropDirection) => number[];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";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{cn}from"../../utils/bem";export var propSize=["s","xs","m"];export var propSizeDefault=propSize[0];export var propDirection=["horizontal","vertical"];export var propDirectionDefault=propDirection[0];export var propStatus=["normal","success","warning","alert"];export var propStatusDefault=propStatus[0];export var pointNumbersMap=[0,1,2,3,4,5,6,7,8,9];export var propPosition=["center","start","end"];export var propPositionDefault=propPosition[0];export var cnProgressStepBar=cn("ProgressStepBar");export var defaultGetItemLabel=function(a){return a.label};export var defaultGetItemTooltipContent=function(a){return a.tooltipContent};export var defaultGetItemPoint=function(a){return a.point};export var defaultGetItemLineStatus=function(a){return a.lineStatus};export var defaultGetItemProgress=function(a){return a.progress};export var defaultGetItemContent=function(a){return a.content};export var defaultGetItemStatus=function(a){return a.status};export var defaultGetItemOnClick=function(a){return a.onClick};export function withDefaultGetters(a){return _objectSpread(_objectSpread({},a),{},{getItemLabel:a.getItemLabel||defaultGetItemLabel,getItemTooltipContent:a.getItemTooltipContent||defaultGetItemTooltipContent,getItemPoint:a.getItemPoint||defaultGetItemPoint,getItemProgress:a.getItemProgress||defaultGetItemProgress,getItemContent:a.getItemContent||defaultGetItemContent,getItemStatus:a.getItemStatus||defaultGetItemStatus,getItemLineStatus:a.getItemLineStatus||defaultGetItemLineStatus,getItemOnClick:a.getItemOnClick||defaultGetItemOnClick})}export var getItemPosition=function(a,b){var c="center";return a===b-1&&(c="end"),0===a&&(c="start"),c};export var getLineSize=function(a,b,c){var d=0;if(a&&a.current&&b&&b.current){var e=a.current.getBoundingClientRect(),f=b.current.getBoundingClientRect();d="vertical"===c?f.y-e.y+f.height:f.x-e.x}return d};
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";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{cn}from"../../utils/bem";export var propSize=["s","xs","m"];export var propSizeDefault=propSize[0];export var propDirection=["horizontal","vertical"];export var propDirectionDefault=propDirection[0];export var propStatus=["normal","success","warning","alert"];export var propStatusDefault=propStatus[0];export var pointNumbersMap=[0,1,2,3,4,5,6,7,8,9];export var propPosition=["center","start","end"];export var propPositionDefault=propPosition[0];export var cnProgressStepBar=cn("ProgressStepBar");export var defaultGetItemLabel=function(a){return a.label};export var defaultGetItemTooltipContent=function(a){return a.tooltipContent};export var defaultGetItemPoint=function(a){return a.point};export var defaultGetItemLineStatus=function(a){return a.lineStatus};export var defaultGetItemProgress=function(a){return a.progress};export var defaultGetItemContent=function(a){return a.content};export var defaultGetItemStatus=function(a){return a.status};export var defaultGetItemOnClick=function(a){return a.onClick};export function withDefaultGetters(a){return _objectSpread(_objectSpread({},a),{},{getItemLabel:a.getItemLabel||defaultGetItemLabel,getItemTooltipContent:a.getItemTooltipContent||defaultGetItemTooltipContent,getItemPoint:a.getItemPoint||defaultGetItemPoint,getItemProgress:a.getItemProgress||defaultGetItemProgress,getItemContent:a.getItemContent||defaultGetItemContent,getItemStatus:a.getItemStatus||defaultGetItemStatus,getItemLineStatus:a.getItemLineStatus||defaultGetItemLineStatus,getItemOnClick:a.getItemOnClick||defaultGetItemOnClick})}export var getItemPosition=function(a,b){var c="center";return a===b-1&&(c="end"),0===a&&(c="start"),c};export var getLineSize=function(a,b,c){var d=0;if(a&&a.current&&b&&b.current){var e=a.current.getBoundingClientRect(),f=b.current.getBoundingClientRect();d="vertical"===c?f.y-e.y+f.height:f.x-e.x}return d};var getRefSize=function(a){if(a.current){var b=a.current.getBoundingClientRect(),c=b.width,d=b.height;return[c,d]}return[0,0]};export var calculateLines=function(a,b){var c=[];return a.forEach(function(d,e){if(e!==a.length-1){var f=getRefSize(d),g=getRefSize(a[e+1]),h=0;h=0===e?"horizontal"===b?f[0]+g[0]/2:f[1]:e===a.length-2?"horizontal"===b?f[0]/2+g[0]:f[1]:"horizontal"===b?f[0]/2+g[0]/2:f[1],c.push(h)}}),c};
|
|
2
2
|
//# sourceMappingURL=helpers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","names":["cn","propSize","propSizeDefault","propDirection","propDirectionDefault","propStatus","propStatusDefault","pointNumbersMap","propPosition","propPositionDefault","cnProgressStepBar","defaultGetItemLabel","item","label","defaultGetItemTooltipContent","tooltipContent","defaultGetItemPoint","point","defaultGetItemLineStatus","lineStatus","defaultGetItemProgress","progress","defaultGetItemContent","content","defaultGetItemStatus","status","defaultGetItemOnClick","onClick","withDefaultGetters","props","getItemLabel","getItemTooltipContent","getItemPoint","getItemProgress","getItemContent","getItemStatus","getItemLineStatus","getItemOnClick","getItemPosition","index","lendth","position","getLineSize","container","activeElement","direction","size","current","containerPosition","getBoundingClientRect","activeElementPosition","y","height","x"],"sources":["../../../../../src/components/ProgressStepBar/helpers.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { cn } from '../../utils/bem';\nimport { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport const propSize = ['s', 'xs', 'm'] as const;\nexport type PropSize = typeof propSize[number];\nexport const propSizeDefault = propSize[0];\n\nexport const propDirection = ['horizontal', 'vertical'] as const;\nexport type PropDirection = typeof propDirection[number];\nexport const propDirectionDefault = propDirection[0];\n\nexport const propStatus = ['normal', 'success', 'warning', 'alert'] as const;\nexport type PropStatus = typeof propStatus[number];\nexport const propStatusDefault = propStatus[0];\n\nexport const pointNumbersMap = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;\nexport type PointNumbersMap = typeof pointNumbersMap[number];\n\nexport const propPosition = ['center', 'start', 'end'] as const;\nexport type PropPosition = typeof propPosition[number];\nexport const propPositionDefault: PropPosition = propPosition[0];\n\nexport type PropGetItemLabel<ITEM> = (item: ITEM) => string | undefined;\nexport type PropGetItemKey<ITEM> = (item: ITEM) => string | number;\nexport type PropGetItemTooltipContent<ITEM> = (\n item: ITEM,\n) => string | undefined;\nexport type PropGetItemLineStatus<ITEM> = (\n item: ITEM,\n) => PropStatus | undefined;\nexport type PropGetItemPoint<ITEM> = (\n item: ITEM,\n) => PointNumbersMap | IconComponent | undefined;\nexport type PropGetItemProgress<ITEM> = (item: ITEM) => boolean | undefined;\nexport type PropGetItemContent<ITEM> = (\n item: ITEM,\n) => React.ReactNode | undefined;\nexport type PropGetItemStatus<ITEM> = (item: ITEM) => PropStatus | undefined;\nexport type PropGetItemOnClick<ITEM> = (\n item: ITEM,\n) => React.EventHandler<React.MouseEvent> | undefined;\n\nexport type DefaultItem = {\n label?: string;\n tooltipContent?: string;\n lineStatus?: PropStatus;\n point?: PointNumbersMap | IconComponent;\n status?: PropStatus;\n progress?: boolean;\n content?: React.ReactNode;\n onClick?: React.EventHandler<React.MouseEvent>;\n};\n\nexport type Line = {\n status: PropStatus;\n size: number;\n};\n\nexport type ProgressStepBarProps<ITEM = DefaultItem> =\n PropsWithHTMLAttributesAndRef<\n {\n steps: ITEM[];\n direction?: PropDirection;\n size?: PropSize;\n activeStepIndex?: number;\n onItemClick?: (props: {\n e: React.MouseEvent;\n item: ITEM;\n index: number;\n }) => void;\n getItemLabel?: PropGetItemLabel<ITEM>;\n getItemLineStatus?: PropGetItemLineStatus<ITEM>;\n getItemTooltipContent?: PropGetItemTooltipContent<ITEM>;\n getItemPoint?: PropGetItemPoint<ITEM>;\n getItemProgress?: PropGetItemProgress<ITEM>;\n getItemContent?: PropGetItemContent<ITEM>;\n getItemStatus?: PropGetItemStatus<ITEM>;\n getItemOnClick?: PropGetItemOnClick<ITEM>;\n },\n HTMLDivElement\n > &\n (ITEM extends { label: DefaultItem['label'] }\n ? {}\n : { getItemLabel: PropGetItemLabel<ITEM> });\n\nexport type ProgressStepBarItemProps = {\n content?: React.ReactNode;\n label?: string;\n point?: PointNumbersMap | IconComponent;\n progress?: boolean;\n status?: PropStatus | 'system';\n tooltipContent?: string;\n tooltipZIndex?: number;\n position?: PropPosition;\n direction: PropDirection;\n size: PropSize;\n onClick?: (e: React.MouseEvent) => void;\n pointRef?: React.RefObject<HTMLButtonElement>;\n};\n\nexport const cnProgressStepBar = cn('ProgressStepBar');\n\nexport const defaultGetItemLabel: PropGetItemLabel<DefaultItem> = (item) =>\n item.label;\nexport const defaultGetItemTooltipContent: PropGetItemTooltipContent<\n DefaultItem\n> = (item) => item.tooltipContent;\nexport const defaultGetItemPoint: PropGetItemPoint<DefaultItem> = (item) =>\n item.point;\nexport const defaultGetItemLineStatus: PropGetItemLineStatus<DefaultItem> = (\n item,\n) => item.lineStatus;\nexport const defaultGetItemProgress: PropGetItemProgress<DefaultItem> = (\n item,\n) => item.progress;\nexport const defaultGetItemContent: PropGetItemContent<DefaultItem> = (item) =>\n item.content;\nexport const defaultGetItemStatus: PropGetItemStatus<DefaultItem> = (item) =>\n item.status;\nexport const defaultGetItemOnClick: PropGetItemOnClick<DefaultItem> = (item) =>\n item.onClick;\n\nexport type ProgressStepBarComponent = <ITEM = DefaultItem>(\n props: ProgressStepBarProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type ProgressStepBarItemComponent = (\n props: PropsWithHTMLAttributesAndRef<\n ProgressStepBarItemProps,\n HTMLDivElement\n >,\n) => React.ReactElement | null;\n\nexport function withDefaultGetters<ITEM>(props: ProgressStepBarProps<ITEM>) {\n return {\n ...props,\n getItemLabel: props.getItemLabel || defaultGetItemLabel,\n getItemTooltipContent:\n props.getItemTooltipContent || defaultGetItemTooltipContent,\n getItemPoint: props.getItemPoint || defaultGetItemPoint,\n getItemProgress: props.getItemProgress || defaultGetItemProgress,\n getItemContent: props.getItemContent || defaultGetItemContent,\n getItemStatus: props.getItemStatus || defaultGetItemStatus,\n getItemLineStatus: props.getItemLineStatus || defaultGetItemLineStatus,\n getItemOnClick: props.getItemOnClick || defaultGetItemOnClick,\n };\n}\n\nexport const getItemPosition = (index: number, lendth: number) => {\n let position: PropPosition = 'center';\n if (index === lendth - 1) position = 'end';\n if (index === 0) position = 'start';\n\n return position;\n};\n\nexport const getLineSize: (\n container: React.RefObject<HTMLElement>,\n activeElement: React.RefObject<HTMLElement>,\n direction: PropDirection,\n) => number = (container, activeElement, direction) => {\n let size = 0;\n if (\n container &&\n container.current &&\n activeElement &&\n activeElement.current\n ) {\n const containerPosition = container.current.getBoundingClientRect();\n const activeElementPosition = activeElement.current.getBoundingClientRect();\n if (direction === 'vertical')\n size =\n activeElementPosition.y -\n containerPosition.y +\n activeElementPosition.height;\n else size = activeElementPosition.x - containerPosition.x;\n }\n return size;\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"helpers.js","names":["cn","propSize","propSizeDefault","propDirection","propDirectionDefault","propStatus","propStatusDefault","pointNumbersMap","propPosition","propPositionDefault","cnProgressStepBar","defaultGetItemLabel","item","label","defaultGetItemTooltipContent","tooltipContent","defaultGetItemPoint","point","defaultGetItemLineStatus","lineStatus","defaultGetItemProgress","progress","defaultGetItemContent","content","defaultGetItemStatus","status","defaultGetItemOnClick","onClick","withDefaultGetters","props","getItemLabel","getItemTooltipContent","getItemPoint","getItemProgress","getItemContent","getItemStatus","getItemLineStatus","getItemOnClick","getItemPosition","index","lendth","position","getLineSize","container","activeElement","direction","size","current","containerPosition","getBoundingClientRect","activeElementPosition","y","height","x","getRefSize","ref","width","calculateLines","refs","sizes","forEach","length","firstSize","secondSize","push"],"sources":["../../../../../src/components/ProgressStepBar/helpers.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { cn } from '../../utils/bem';\nimport { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport const propSize = ['s', 'xs', 'm'] as const;\nexport type PropSize = typeof propSize[number];\nexport const propSizeDefault = propSize[0];\n\nexport const propDirection = ['horizontal', 'vertical'] as const;\nexport type PropDirection = typeof propDirection[number];\nexport const propDirectionDefault = propDirection[0];\n\nexport const propStatus = ['normal', 'success', 'warning', 'alert'] as const;\nexport type PropStatus = typeof propStatus[number];\nexport const propStatusDefault = propStatus[0];\n\nexport const pointNumbersMap = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;\nexport type PointNumbersMap = typeof pointNumbersMap[number];\n\nexport const propPosition = ['center', 'start', 'end'] as const;\nexport type PropPosition = typeof propPosition[number];\nexport const propPositionDefault: PropPosition = propPosition[0];\n\nexport type PropGetItemLabel<ITEM> = (item: ITEM) => string | undefined;\nexport type PropGetItemKey<ITEM> = (item: ITEM) => string | number;\nexport type PropGetItemTooltipContent<ITEM> = (\n item: ITEM,\n) => string | undefined;\nexport type PropGetItemLineStatus<ITEM> = (\n item: ITEM,\n) => PropStatus | undefined;\nexport type PropGetItemPoint<ITEM> = (\n item: ITEM,\n) => PointNumbersMap | IconComponent | undefined;\nexport type PropGetItemProgress<ITEM> = (item: ITEM) => boolean | undefined;\nexport type PropGetItemContent<ITEM> = (\n item: ITEM,\n) => React.ReactNode | undefined;\nexport type PropGetItemStatus<ITEM> = (item: ITEM) => PropStatus | undefined;\nexport type PropGetItemOnClick<ITEM> = (\n item: ITEM,\n) => React.EventHandler<React.MouseEvent> | undefined;\n\nexport type DefaultItem = {\n label?: string;\n tooltipContent?: string;\n lineStatus?: PropStatus;\n point?: PointNumbersMap | IconComponent;\n status?: PropStatus;\n progress?: boolean;\n content?: React.ReactNode;\n onClick?: React.EventHandler<React.MouseEvent>;\n};\n\nexport type Line = {\n status: PropStatus;\n size: number;\n};\n\nexport type ProgressStepBarProps<ITEM = DefaultItem> =\n PropsWithHTMLAttributesAndRef<\n {\n steps: ITEM[];\n direction?: PropDirection;\n size?: PropSize;\n activeStepIndex?: number;\n onItemClick?: (props: {\n e: React.MouseEvent;\n item: ITEM;\n index: number;\n }) => void;\n getItemLabel?: PropGetItemLabel<ITEM>;\n getItemLineStatus?: PropGetItemLineStatus<ITEM>;\n getItemTooltipContent?: PropGetItemTooltipContent<ITEM>;\n getItemPoint?: PropGetItemPoint<ITEM>;\n getItemProgress?: PropGetItemProgress<ITEM>;\n getItemContent?: PropGetItemContent<ITEM>;\n getItemStatus?: PropGetItemStatus<ITEM>;\n getItemOnClick?: PropGetItemOnClick<ITEM>;\n },\n HTMLDivElement\n > &\n (ITEM extends { label: DefaultItem['label'] }\n ? {}\n : { getItemLabel: PropGetItemLabel<ITEM> });\n\nexport type ProgressStepBarItemProps = {\n content?: React.ReactNode;\n label?: string;\n point?: PointNumbersMap | IconComponent;\n progress?: boolean;\n status?: PropStatus | 'system';\n tooltipContent?: string;\n tooltipZIndex?: number;\n position?: PropPosition;\n direction: PropDirection;\n size: PropSize;\n onClick?: (e: React.MouseEvent) => void;\n pointRef?: React.RefObject<HTMLButtonElement>;\n className?: string;\n};\n\nexport const cnProgressStepBar = cn('ProgressStepBar');\n\nexport const defaultGetItemLabel: PropGetItemLabel<DefaultItem> = (item) =>\n item.label;\nexport const defaultGetItemTooltipContent: PropGetItemTooltipContent<\n DefaultItem\n> = (item) => item.tooltipContent;\nexport const defaultGetItemPoint: PropGetItemPoint<DefaultItem> = (item) =>\n item.point;\nexport const defaultGetItemLineStatus: PropGetItemLineStatus<DefaultItem> = (\n item,\n) => item.lineStatus;\nexport const defaultGetItemProgress: PropGetItemProgress<DefaultItem> = (\n item,\n) => item.progress;\nexport const defaultGetItemContent: PropGetItemContent<DefaultItem> = (item) =>\n item.content;\nexport const defaultGetItemStatus: PropGetItemStatus<DefaultItem> = (item) =>\n item.status;\nexport const defaultGetItemOnClick: PropGetItemOnClick<DefaultItem> = (item) =>\n item.onClick;\n\nexport type ProgressStepBarComponent = <ITEM = DefaultItem>(\n props: ProgressStepBarProps<ITEM>,\n) => React.ReactElement | null;\n\nexport type ProgressStepBarItemComponent = (\n props: PropsWithHTMLAttributesAndRef<\n ProgressStepBarItemProps,\n HTMLDivElement\n >,\n) => React.ReactElement | null;\n\nexport function withDefaultGetters<ITEM>(props: ProgressStepBarProps<ITEM>) {\n return {\n ...props,\n getItemLabel: props.getItemLabel || defaultGetItemLabel,\n getItemTooltipContent:\n props.getItemTooltipContent || defaultGetItemTooltipContent,\n getItemPoint: props.getItemPoint || defaultGetItemPoint,\n getItemProgress: props.getItemProgress || defaultGetItemProgress,\n getItemContent: props.getItemContent || defaultGetItemContent,\n getItemStatus: props.getItemStatus || defaultGetItemStatus,\n getItemLineStatus: props.getItemLineStatus || defaultGetItemLineStatus,\n getItemOnClick: props.getItemOnClick || defaultGetItemOnClick,\n };\n}\n\nexport const getItemPosition = (index: number, lendth: number) => {\n let position: PropPosition = 'center';\n if (index === lendth - 1) position = 'end';\n if (index === 0) position = 'start';\n\n return position;\n};\n\nexport const getLineSize: (\n container: React.RefObject<HTMLElement>,\n activeElement: React.RefObject<HTMLElement>,\n direction: PropDirection,\n) => number = (container, activeElement, direction) => {\n let size = 0;\n if (\n container &&\n container.current &&\n activeElement &&\n activeElement.current\n ) {\n const containerPosition = container.current.getBoundingClientRect();\n const activeElementPosition = activeElement.current.getBoundingClientRect();\n if (direction === 'vertical')\n size =\n activeElementPosition.y -\n containerPosition.y +\n activeElementPosition.height;\n else size = activeElementPosition.x - containerPosition.x;\n }\n return size;\n};\n\nconst getRefSize = (ref: React.RefObject<HTMLElement>) => {\n if (ref.current) {\n const { width, height } = ref.current.getBoundingClientRect();\n return [width, height];\n }\n return [0, 0];\n};\n\nexport const calculateLines = (\n refs: React.RefObject<HTMLElement>[],\n direction: PropDirection,\n) => {\n const sizes: number[] = [];\n refs.forEach((ref, index) => {\n if (index !== refs.length - 1) {\n const firstSize = getRefSize(ref);\n const secondSize = getRefSize(refs[index + 1]);\n let size = 0;\n if (index === 0) {\n size =\n direction === 'horizontal'\n ? firstSize[0] + secondSize[0] / 2\n : firstSize[1];\n } else if (index === refs.length - 2) {\n size =\n direction === 'horizontal'\n ? firstSize[0] / 2 + secondSize[0]\n : firstSize[1];\n } else {\n size =\n direction === 'horizontal'\n ? firstSize[0] / 2 + secondSize[0] / 2\n : firstSize[1];\n }\n sizes.push(size);\n }\n });\n return sizes;\n};\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className","label","active","hovered","multiple","size","indent","disabled"];import"./SelectItem.css";import React from"react";import{ListItem}from"../../ListCanary";import{cn}from"../../../utils/bem";import{Checkbox}from"../../Checkbox/Checkbox";var sizeCheckboxMap={xs:"m",s:"m",m:"l",l:"l"};export var cnSelectItem=cn("SelectItem");export var SelectItem=function(a){var b=a.className,c=a.label,d=a.active,e=a.hovered,f=a.multiple,g=a.size,h=a.indent,i=a.disabled,j=_objectWithoutProperties(a,_excluded);return React.createElement(ListItem,Object.assign({},j,{className:cnSelectItem(null,[b]),"aria-selected":d,"aria-disabled":i,role:"option",label:c,innerOffset:h,size:g,active:e,checked:!f&&d,disabled:i,leftSide:f&&React.createElement(Checkbox,{checked:d,size:sizeCheckboxMap[g]})}),c)};
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className","label","active","hovered","multiple","size","indent","disabled"];import"./SelectItem.css";import React from"react";import{ListItem}from"../../ListCanary";import{cn}from"../../../utils/bem";import{Checkbox}from"../../Checkbox/Checkbox";var sizeCheckboxMap={xs:"m",s:"m",m:"l",l:"l"};export var cnSelectItem=cn("SelectItem");export var SelectItem=function(a){var b=a.className,c=a.label,d=a.active,e=a.hovered,f=a.multiple,g=a.size,h=a.indent,i=a.disabled,j=_objectWithoutProperties(a,_excluded);return React.createElement(ListItem,Object.assign({},j,{className:cnSelectItem(null,[b]),"aria-selected":d,"aria-disabled":i,role:"option",label:c,innerOffset:h,size:g,active:e,checked:!f&&d,disabled:i,leftSide:f&&React.createElement(Checkbox,{checked:d,disabled:i,size:sizeCheckboxMap[g]})}),c)};
|
|
2
2
|
//# sourceMappingURL=SelectItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectItem.js","names":["React","ListItem","cn","Checkbox","sizeCheckboxMap","xs","s","m","l","cnSelectItem","SelectItem","props","className","label","active","hovered","multiple","size","indent","disabled","otherProps"],"sources":["../../../../../../src/components/SelectComponents/SelectItem/SelectItem.tsx"],"sourcesContent":["import './SelectItem.css';\n\nimport React from 'react';\n\nimport { ListItem } from '##/components/ListCanary';\nimport { cn } from '##/utils/bem';\n\nimport { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';\nimport { Checkbox, CheckboxPropSize } from '../../Checkbox/Checkbox';\nimport { PropSize } from '../types';\n\nexport type SelectItemProps = PropsWithHTMLAttributes<\n {\n label: string;\n active: boolean;\n hovered: boolean;\n multiple: boolean;\n size: PropSize;\n indent: 'normal' | 'increased';\n disabled: boolean | undefined;\n },\n HTMLDivElement\n>;\n\nconst sizeCheckboxMap: Record<PropSize, CheckboxPropSize> = {\n xs: 'm',\n s: 'm',\n m: 'l',\n l: 'l',\n};\n\nexport const cnSelectItem = cn('SelectItem');\n\nexport const SelectItem: React.FC<SelectItemProps> = (props) => {\n const {\n className,\n label,\n active,\n hovered,\n multiple,\n size,\n indent,\n disabled,\n ...otherProps\n } = props;\n\n return (\n <ListItem\n {...otherProps}\n className={cnSelectItem(null, [className])}\n aria-selected={active}\n aria-disabled={disabled}\n role=\"option\"\n label={label}\n innerOffset={indent}\n size={size}\n active={hovered}\n checked={!multiple && active}\n disabled={disabled}\n leftSide={\n multiple && <Checkbox
|
|
1
|
+
{"version":3,"file":"SelectItem.js","names":["React","ListItem","cn","Checkbox","sizeCheckboxMap","xs","s","m","l","cnSelectItem","SelectItem","props","className","label","active","hovered","multiple","size","indent","disabled","otherProps"],"sources":["../../../../../../src/components/SelectComponents/SelectItem/SelectItem.tsx"],"sourcesContent":["import './SelectItem.css';\n\nimport React from 'react';\n\nimport { ListItem } from '##/components/ListCanary';\nimport { cn } from '##/utils/bem';\n\nimport { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';\nimport { Checkbox, CheckboxPropSize } from '../../Checkbox/Checkbox';\nimport { PropSize } from '../types';\n\nexport type SelectItemProps = PropsWithHTMLAttributes<\n {\n label: string;\n active: boolean;\n hovered: boolean;\n multiple: boolean;\n size: PropSize;\n indent: 'normal' | 'increased';\n disabled: boolean | undefined;\n },\n HTMLDivElement\n>;\n\nconst sizeCheckboxMap: Record<PropSize, CheckboxPropSize> = {\n xs: 'm',\n s: 'm',\n m: 'l',\n l: 'l',\n};\n\nexport const cnSelectItem = cn('SelectItem');\n\nexport const SelectItem: React.FC<SelectItemProps> = (props) => {\n const {\n className,\n label,\n active,\n hovered,\n multiple,\n size,\n indent,\n disabled,\n ...otherProps\n } = props;\n\n return (\n <ListItem\n {...otherProps}\n className={cnSelectItem(null, [className])}\n aria-selected={active}\n aria-disabled={disabled}\n role=\"option\"\n label={label}\n innerOffset={indent}\n size={size}\n active={hovered}\n checked={!multiple && active}\n disabled={disabled}\n leftSide={\n multiple && (\n <Checkbox\n checked={active}\n disabled={disabled}\n size={sizeCheckboxMap[size]}\n />\n )\n }\n >\n {label}\n </ListItem>\n );\n};\n"],"mappings":"kLAAA,yBAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,QAAT,wBACA,OAASC,EAAT,0BAGA,OAASC,QAAT,+BAgBA,GAAMC,gBAAmD,CAAG,CAC1DC,EAAE,CAAE,GADsD,CAE1DC,CAAC,CAAE,GAFuD,CAG1DC,CAAC,CAAE,GAHuD,CAI1DC,CAAC,CAAE,GAJuD,CAA5D,CAOA,MAAO,IAAMC,aAAY,CAAGP,EAAE,CAAC,YAAD,CAAvB,CAEP,MAAO,IAAMQ,WAAqC,CAAG,SAACC,CAAD,CAAW,CAC9D,GACEC,EADF,CAUID,CAVJ,CACEC,SADF,CAEEC,CAFF,CAUIF,CAVJ,CAEEE,KAFF,CAGEC,CAHF,CAUIH,CAVJ,CAGEG,MAHF,CAIEC,CAJF,CAUIJ,CAVJ,CAIEI,OAJF,CAKEC,CALF,CAUIL,CAVJ,CAKEK,QALF,CAMEC,CANF,CAUIN,CAVJ,CAMEM,IANF,CAOEC,CAPF,CAUIP,CAVJ,CAOEO,MAPF,CAQEC,CARF,CAUIR,CAVJ,CAQEQ,QARF,CASKC,CATL,0BAUIT,CAVJ,YAYA,MACE,qBAAC,QAAD,kBACMS,CADN,EAEE,SAAS,CAAEX,YAAY,CAAC,IAAD,CAAO,CAACG,CAAD,CAAP,CAFzB,CAGE,gBAAeE,CAHjB,CAIE,gBAAeK,CAJjB,CAKE,IAAI,CAAC,QALP,CAME,KAAK,CAAEN,CANT,CAOE,WAAW,CAAEK,CAPf,CAQE,IAAI,CAAED,CARR,CASE,MAAM,CAAEF,CATV,CAUE,OAAO,CAAE,CAACC,CAAD,EAAaF,CAVxB,CAWE,QAAQ,CAAEK,CAXZ,CAYE,QAAQ,CACNH,CAAQ,EACN,oBAAC,QAAD,EACE,OAAO,CAAEF,CADX,CAEE,QAAQ,CAAEK,CAFZ,CAGE,IAAI,CAAEf,eAAe,CAACa,CAAD,CAHvB,EAdN,GAsBGJ,CAtBH,CAyBH,CAvCM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.SelectValueTag{margin:0 var(--tag-space) var(--tag-space) 0}.SelectValueTag .TagBase-Label{word-break:break-word}.SelectValueTag_disabled{
|
|
1
|
+
.TagBase.SelectValueTag{margin:0 var(--tag-space) var(--tag-space) 0}.TagBase.SelectValueTag .TagBase-Label{word-break:break-word}.TagBase.SelectValueTag_disabled{background-color:var(--color-control-bg-disable);pointer-events:none}.TagBase.SelectValueTag_disabled>*{color:var(--color-control-typo-disable)}
|
|
@@ -4,6 +4,7 @@ declare type SelectValueTagProps = {
|
|
|
4
4
|
label: string;
|
|
5
5
|
size: 's' | 'm' | 'l';
|
|
6
6
|
children?: never;
|
|
7
|
+
disabled?: boolean;
|
|
7
8
|
handleRemove?: (e: React.SyntheticEvent) => void;
|
|
8
9
|
};
|
|
9
10
|
export declare const cnSelectValueTag: import("@bem-react/classname").ClassNameFormatter;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"./SelectValueTag.css";import React from"react";import{cn}from"../../../utils/bem";import{Tag}from"../../Tag/Tag";export var cnSelectValueTag=cn("SelectValueTag");export var SelectValueTag=function(a){var b=a.handleRemove,c=a.size,
|
|
1
|
+
import"./SelectValueTag.css";import React from"react";import{cn}from"../../../utils/bem";import{Tag}from"../../Tag/Tag";export var cnSelectValueTag=cn("SelectValueTag");export var SelectValueTag=function(a){var b=a.handleRemove,c=void 0===b?function(){}:b,d=a.size,e=a.label,f=a.disabled;return React.createElement(Tag,{className:cnSelectValueTag({size:d,disabled:f}),label:e,mode:"cancel",onCancel:c,size:d})};
|
|
2
2
|
//# sourceMappingURL=SelectValueTag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectValueTag.js","names":["React","cn","Tag","cnSelectValueTag","SelectValueTag","props","handleRemove","size","label","disabled"],"sources":["../../../../../../src/components/SelectComponents/SelectValueTag/SelectValueTag.tsx"],"sourcesContent":["import './SelectValueTag.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { Tag } from '../../Tag/Tag';\n\ntype SelectValueTagProps = {\n label: string;\n size: 's' | 'm' | 'l';\n children?: never;\n handleRemove?: (e: React.SyntheticEvent) => void;\n};\n\nexport const cnSelectValueTag = cn('SelectValueTag');\n\nexport const SelectValueTag: React.FC<SelectValueTagProps> = (props) => {\n const { handleRemove, size, label } = props;\n\n return
|
|
1
|
+
{"version":3,"file":"SelectValueTag.js","names":["React","cn","Tag","cnSelectValueTag","SelectValueTag","props","handleRemove","size","label","disabled"],"sources":["../../../../../../src/components/SelectComponents/SelectValueTag/SelectValueTag.tsx"],"sourcesContent":["import './SelectValueTag.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { Tag } from '../../Tag/Tag';\n\ntype SelectValueTagProps = {\n label: string;\n size: 's' | 'm' | 'l';\n children?: never;\n disabled?: boolean;\n handleRemove?: (e: React.SyntheticEvent) => void;\n};\n\nexport const cnSelectValueTag = cn('SelectValueTag');\n\nexport const SelectValueTag: React.FC<SelectValueTagProps> = (props) => {\n const { handleRemove = () => {}, size, label, disabled } = props;\n\n return (\n <Tag\n className={cnSelectValueTag({ size, disabled })}\n label={label}\n mode=\"cancel\"\n onCancel={handleRemove}\n size={size}\n />\n );\n};\n"],"mappings":"AAAA,6BAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0BACA,OAASC,GAAT,qBAUA,MAAO,IAAMC,iBAAgB,CAAGF,EAAE,CAAC,gBAAD,CAA3B,CAEP,MAAO,IAAMG,eAA6C,CAAG,SAACC,CAAD,CAAW,CACtE,MAA2DA,CAA3D,CAAQC,YAAR,CAAQA,CAAR,YAAuB,UAAM,CAAE,CAA/B,GAAiCC,CAAjC,CAA2DF,CAA3D,CAAiCE,IAAjC,CAAuCC,CAAvC,CAA2DH,CAA3D,CAAuCG,KAAvC,CAA8CC,CAA9C,CAA2DJ,CAA3D,CAA8CI,QAA9C,CAEA,MACE,qBAAC,GAAD,EACE,SAAS,CAAEN,gBAAgB,CAAC,CAAEI,IAAI,CAAJA,CAAF,CAAQE,QAAQ,CAARA,CAAR,CAAD,CAD7B,CAEE,KAAK,CAAED,CAFT,CAGE,IAAI,CAAC,QAHP,CAIE,QAAQ,CAAEF,CAJZ,CAKE,IAAI,CAAEC,CALR,EAQH,CAZM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.TextField{--caption-margin-left:calc(var(--input-space) + var(--control-border-width));--counter-button-icon-color:var(--color-control-typo-ghost);--counter-button-background:transparent;--clear-button-color:var(--color-control-typo-clear);display:inline-flex;position:relative}.TextField_width_full{width:100%}.TextField_size_xs{--input-height:var(--control-height-xs);--input-font-size:var(--control-text-size-xs);--input-space:calc(var(--control-space-xs)*0.5)}.TextField_size_s{--input-height:var(--control-height-s);--input-font-size:var(--control-text-size-s);--input-space:calc(var(--control-space-s)*0.5)}.TextField_size_m{--input-height:var(--control-height-m);--input-font-size:var(--control-text-size-m);--input-space:calc(var(--control-space-m)*0.5)}.TextField_size_l{--input-height:var(--control-height-l);--input-font-size:var(--control-text-size-l);--input-space:calc(var(--control-space-l)*0.5)}.TextField_labelPosition_top{flex-direction:column}.TextField_labelPosition_top>:not(:last-child){margin-bottom:var(--space-xs)}.TextField_labelPosition_left{flex-direction:row}.TextField_labelPosition_left .TextField-Label{align-items:center;display:inline-flex;height:var(--input-height)}.TextField_labelPosition_left>:not(:last-child){margin-right:var(--space-s)}.TextField-Body{display:inline-flex;flex-direction:column;width:100%}.TextField-Body .TextField-Caption{margin-left:var(--caption-margin-left);margin-top:var(--space-2xs)}.TextField_view_clear .TextField-Caption{--caption-margin-left:0}.TextField-InputContainer{box-sizing:border-box;display:inline-flex;font-family:var(--font-primary);font-weight:var(--font-weight-text-regular);max-width:100%;min-height:var(--input-height);position:relative;transition:border-color .15s,box-shadow .15s,background-color .15s}.TextField-InputContainer_disabled{--counter-button-background:var(--color-control-bg-disable);--counter-button-icon-color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear,.TextField-InputContainer_view_clear:focus,.TextField-InputContainer_view_clear:hover{color:var(--color-control-typo-default);padding:0}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled{pointer-events:none}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover{-webkit-text-fill-color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input::placeholder,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input::placeholder,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input::placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default{--container-border-color:var(--color-control-bg-border-default);background:var(--color-control-bg-default);border:var(--control-border-width) solid var(--container-border-color);border-radius:var(--control-radius);color:var(--color-control-typo-default);overflow-x:hidden;padding:0 var(--input-space)}.TextField-InputContainer_view_default:hover{border-color:var(--color-control-bg-border-default-hover)}.TextField-InputContainer_view_default.TextField-InputContainer_status_alert{--container-border-color:var(--color-bg-alert)}.TextField-InputContainer_view_default.TextField-InputContainer_status_success{--container-border-color:var(--color-bg-success)}.TextField-InputContainer_view_default.TextField-InputContainer_status_warning{--container-border-color:var(--color-bg-warning)}.TextField-InputContainer_view_default .TextField-Input{color:var(--color-control-typo-default)}.TextField-InputContainer_view_default .TextField-Input::-moz-placeholder{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default .TextField-Input::placeholder{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill:hover{-webkit-text-fill-color:var(--color-control-typo-default)}.TextField-InputContainer_view_default .TextField-Side_type_string{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default.TextField-InputContainer_focus{border-color:var(--color-control-bg-border-focus);outline:none;z-index:1}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearClear{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus),calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_brickClear,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_defaultClear,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_roundClear{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearBrick,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearDefault,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearRound{box-shadow:calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled{--clear-button-color:var(--color-control-typo-disable);background:var(--color-control-bg-disable);border-color:var(--color-control-bg-border-disable);pointer-events:none}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input::placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string{color:var(--color-control-typo-disable)}.TextField-InputContainer_form_defaultClear{border-right-width:0}.TextField-InputContainer_form_defaultBrick,.TextField-InputContainer_form_defaultClear{border-radius:var(--control-radius) 0 0 var(--control-radius)}.TextField-InputContainer_form_round{border-radius:calc(var(--input-height)/2);padding-left:calc(var(--input-space)*1.6);padding-right:calc(var(--input-space)*1.6)}.TextField-InputContainer_form_roundBrick{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);padding-left:calc(var(--input-space)*1.6)}.TextField-InputContainer_form_roundClear{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);border-right-width:0;padding-left:calc(var(--input-space)*1.6)}.TextField-InputContainer_form_brick{border-radius:0}.TextField-InputContainer_form_brickDefault{border-radius:0 var(--control-radius) var(--control-radius) 0}.TextField-InputContainer_form_brickRound{border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0;padding-right:calc(var(--input-space)*1.6)}.TextField-InputContainer_form_brickClear{border-radius:0;border-right-width:0}.TextField-InputContainer_form_clearDefault{border-left-width:0;border-radius:0 var(--control-radius) var(--control-radius) 0}.TextField-InputContainer_form_clearBrick{border-left-width:0;border-radius:0}.TextField-InputContainer_form_clearRound{border-left-width:0;border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0;padding-right:calc(var(--input-space)*1.6)}.TextField-InputContainer_form_clearClear{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0;border-top-width:var(--control-border-width)}.TextField-InputContainer_withValue .TextField-Side.TextField-Side_type_string{color:var(--color-control-typo-default)}.TextField-InputContainer_withValue .TextField-Icon{color:var(--color-typo-secondary)}.TextField-InputContainer_type_number{padding-right:0}.TextField-InputContainer_type_textarea .TextField-Input{display:block;line-height:var(--line-height-text-m);min-width:0;padding-bottom:calc((var(--input-height) - (var(--control-border-width)*2) - var(--line-height-text-m))/2);padding-top:calc((var(--input-height) - (var(--control-border-width)*2) - var(--line-height-text-m))/2);resize:none}.TextField-Counter{display:inline-flex;flex-direction:column;height:calc(var(--input-height) - var(--control-border-width)*2);width:var(--space-xl)}.TextField-CounterButton{align-items:center;background-color:var(--counter-button-background);border:none;color:var(--counter-button-icon-color);cursor:pointer;display:inline-flex;flex:1;flex-direction:column;justify-content:center;margin:0;overflow-y:hidden;padding:0;transition:background-color .15s;width:var(--space-xl)}.TextField-ClearButton,.TextField-EyeButton{background-color:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;height:calc(var(--input-height) - var(--control-border-width)*2);justify-content:center;margin:0;margin-left:var(--input-space);padding:0}.TextField-ClearButton{color:var(--clear-button-color)}.TextField-ClearButton:hover{--clear-button-color:var(--color-control-typo-clear-hover)}.TextField-EyeButton{color:var(--color-control-typo-placeholder)}.TextField-EyeButton:hover{color:var(--color-control-typo-clear-hover)}.TextField-ClearButtonIcon{position:relative;top:1px}.TextField-Input{background:transparent;border:none;color:currentColor;flex:1;font-family:var(--font-primary);font-size:var(--input-font-size);height:calc(var(--input-height) - var(--control-border-width)*2);min-width:80px;outline:none;padding:0;width:100%}.TextField-Input::-webkit-inner-spin-button,.TextField-Input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.TextField-Input[type=password]::-ms-reveal{display:none}.TextField-Input[type=number]{-moz-appearance:textfield}.TextField-Input:focus{outline:none}.TextField-Input:-webkit-autofill,.TextField-Input:-webkit-autofill:focus,.TextField-Input:-webkit-autofill:hover{border:none;-webkit-box-shadow:inset 0 0 0 1000px transparent;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}.TextField-Side{align-items:center;display:flex;height:calc(var(--input-height) - var(--control-border-width)*2);overflow:hidden}.TextField-Side_position_left{margin-right:var(--input-space)}.TextField-Side_position_right{margin-left:var(--input-space)}.TextField-Side_type_string{font-size:var(--input-font-size);white-space:nowrap}.TextField-Icon{color:var(--color-control-typo-placeholder)}
|
|
1
|
+
.TextField{--caption-margin-left:calc(var(--input-space) + var(--control-border-width));--counter-button-icon-color:var(--color-control-typo-ghost);--counter-button-background:transparent;--clear-button-color:var(--color-control-typo-clear);display:inline-flex;position:relative}.TextField_width_full{width:100%}.TextField_size_xs{--input-height:var(--control-height-xs);--input-font-size:var(--control-text-size-xs);--input-space:calc(var(--control-space-xs)*0.5)}.TextField_size_s{--input-height:var(--control-height-s);--input-font-size:var(--control-text-size-s);--input-space:calc(var(--control-space-s)*0.5)}.TextField_size_m{--input-height:var(--control-height-m);--input-font-size:var(--control-text-size-m);--input-space:calc(var(--control-space-m)*0.5)}.TextField_size_l{--input-height:var(--control-height-l);--input-font-size:var(--control-text-size-l);--input-space:calc(var(--control-space-l)*0.5)}.TextField_labelPosition_top{flex-direction:column}.TextField_labelPosition_top>:not(:last-child){margin-bottom:var(--space-xs)}.TextField_labelPosition_left{flex-direction:row}.TextField_labelPosition_left .TextField-Label{align-items:center;display:inline-flex;height:var(--input-height)}.TextField_labelPosition_left>:not(:last-child){margin-right:var(--space-s)}.TextField-Body{display:inline-flex;flex-direction:column;width:100%}.TextField-Body .TextField-Caption{margin-left:var(--caption-margin-left);margin-top:var(--space-2xs)}.TextField_view_clear .TextField-Caption{--caption-margin-left:0}.TextField-InputContainer{box-sizing:border-box;display:inline-flex;font-family:var(--font-primary);font-weight:var(--font-weight-text-regular);max-width:100%;min-height:var(--input-height);position:relative;transition:border-color .15s,box-shadow .15s,background-color .15s}.TextField-InputContainer_disabled{--counter-button-background:var(--color-control-bg-disable);--counter-button-icon-color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear,.TextField-InputContainer_view_clear:focus,.TextField-InputContainer_view_clear:hover{color:var(--color-control-typo-default);padding:0}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input{color:var(--color-control-typo-disable);pointer-events:all}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover{-webkit-text-fill-color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input::placeholder,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input::placeholder,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input::placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default{--container-border-color:var(--color-control-bg-border-default);background:var(--color-control-bg-default);border:var(--control-border-width) solid var(--container-border-color);border-radius:var(--control-radius);color:var(--color-control-typo-default);overflow-x:hidden;padding:0 var(--input-space)}.TextField-InputContainer_view_default:hover{border-color:var(--color-control-bg-border-default-hover)}.TextField-InputContainer_view_default.TextField-InputContainer_status_alert{--container-border-color:var(--color-bg-alert)}.TextField-InputContainer_view_default.TextField-InputContainer_status_success{--container-border-color:var(--color-bg-success)}.TextField-InputContainer_view_default.TextField-InputContainer_status_warning{--container-border-color:var(--color-bg-warning)}.TextField-InputContainer_view_default .TextField-Input{color:var(--color-control-typo-default)}.TextField-InputContainer_view_default .TextField-Input::-moz-placeholder{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default .TextField-Input::placeholder{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill:hover{-webkit-text-fill-color:var(--color-control-typo-default)}.TextField-InputContainer_view_default .TextField-Side_type_string{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default.TextField-InputContainer_focus{border-color:var(--color-control-bg-border-focus);outline:none;z-index:1}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearClear{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus),calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_brickClear,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_defaultClear,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_roundClear{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearBrick,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearDefault,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearRound{box-shadow:calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled{--clear-button-color:var(--color-control-typo-disable);background:var(--color-control-bg-disable);border-color:var(--color-control-bg-border-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input{color:var(--color-control-typo-disable);pointer-events:all}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input::placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string{color:var(--color-control-typo-disable)}.TextField-InputContainer_form_defaultClear{border-right-width:0}.TextField-InputContainer_form_defaultBrick,.TextField-InputContainer_form_defaultClear{border-radius:var(--control-radius) 0 0 var(--control-radius)}.TextField-InputContainer_form_round{border-radius:calc(var(--input-height)/2);padding-left:calc(var(--input-space)*1.6);padding-right:calc(var(--input-space)*1.6)}.TextField-InputContainer_form_roundBrick{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);padding-left:calc(var(--input-space)*1.6)}.TextField-InputContainer_form_roundClear{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);border-right-width:0;padding-left:calc(var(--input-space)*1.6)}.TextField-InputContainer_form_brick{border-radius:0}.TextField-InputContainer_form_brickDefault{border-radius:0 var(--control-radius) var(--control-radius) 0}.TextField-InputContainer_form_brickRound{border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0;padding-right:calc(var(--input-space)*1.6)}.TextField-InputContainer_form_brickClear{border-radius:0;border-right-width:0}.TextField-InputContainer_form_clearDefault{border-left-width:0;border-radius:0 var(--control-radius) var(--control-radius) 0}.TextField-InputContainer_form_clearBrick{border-left-width:0;border-radius:0}.TextField-InputContainer_form_clearRound{border-left-width:0;border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0;padding-right:calc(var(--input-space)*1.6)}.TextField-InputContainer_form_clearClear{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0;border-top-width:var(--control-border-width)}.TextField-InputContainer_withValue .TextField-Side.TextField-Side_type_string{color:var(--color-control-typo-default)}.TextField-InputContainer_withValue .TextField-Icon{color:var(--color-typo-secondary)}.TextField-InputContainer_type_number{padding-right:0}.TextField-InputContainer_type_textarea .TextField-Input{display:block;line-height:var(--line-height-text-m);min-width:0;padding-bottom:calc((var(--input-height) - (var(--control-border-width)*2) - var(--line-height-text-m))/2);padding-top:calc((var(--input-height) - (var(--control-border-width)*2) - var(--line-height-text-m))/2);resize:none}.TextField-Counter{display:inline-flex;flex-direction:column;height:calc(var(--input-height) - var(--control-border-width)*2);width:var(--space-xl)}.TextField-CounterButton{align-items:center;background-color:var(--counter-button-background);border:none;color:var(--counter-button-icon-color);cursor:pointer;display:inline-flex;flex:1;flex-direction:column;justify-content:center;margin:0;overflow-y:hidden;padding:0;transition:background-color .15s;width:var(--space-xl)}.TextField-ClearButton,.TextField-EyeButton{background-color:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;height:calc(var(--input-height) - var(--control-border-width)*2);justify-content:center;margin:0;margin-left:var(--input-space);padding:0}.TextField-ClearButton{color:var(--clear-button-color)}.TextField-ClearButton:hover{--clear-button-color:var(--color-control-typo-clear-hover)}.TextField-EyeButton{color:var(--color-control-typo-placeholder)}.TextField-EyeButton:hover{color:var(--color-control-typo-clear-hover)}.TextField-ClearButtonIcon{position:relative;top:1px}.TextField-Input{background:transparent;border:none;color:currentColor;flex:1;font-family:var(--font-primary);font-size:var(--input-font-size);height:calc(var(--input-height) - var(--control-border-width)*2);min-width:80px;outline:none;padding:0;width:100%}.TextField-Input::-webkit-inner-spin-button,.TextField-Input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.TextField-Input[type=password]::-ms-reveal{display:none}.TextField-Input[type=number]{-moz-appearance:textfield}.TextField-Input:focus{outline:none}.TextField-Input:-webkit-autofill,.TextField-Input:-webkit-autofill:focus,.TextField-Input:-webkit-autofill:hover{border:none;-webkit-box-shadow:inset 0 0 0 1000px transparent;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}.TextField-Side{align-items:center;display:flex;height:calc(var(--input-height) - var(--control-border-width)*2);overflow:hidden}.TextField-Side_position_left{margin-right:var(--input-space)}.TextField-Side_position_right{margin-left:var(--input-space)}.TextField-Side_type_string{font-size:var(--input-font-size);white-space:nowrap}.TextField-Icon{color:var(--color-control-typo-placeholder)}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export*from"./TextField";
|
|
1
|
+
export*from"./TextField";export*from"./useIMask";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/TextField/index.ts"],"sourcesContent":["export * from './TextField';\n"],"mappings":"AAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/TextField/index.ts"],"sourcesContent":["export * from './TextField';\nexport * from './useIMask';\n"],"mappings":"AAAA,yBACA"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import IMask from 'imask';
|
|
3
|
+
declare type Props<MASK extends IMask.AnyMaskedOptions> = {
|
|
4
|
+
value: string | null;
|
|
5
|
+
onChange?: (value: string | null, params: {
|
|
6
|
+
e: Event;
|
|
7
|
+
value: string | null;
|
|
8
|
+
}) => void;
|
|
9
|
+
maskOptions: string | MASK;
|
|
10
|
+
};
|
|
11
|
+
export declare function useIMask<MASK extends IMask.AnyMaskedOptions>(props: Props<MASK>): {
|
|
12
|
+
inputRef: import("react").RefObject<HTMLInputElement>;
|
|
13
|
+
imaskRef: import("react").MutableRefObject<IMask.InputMask<MASK> | null>;
|
|
14
|
+
};
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import IMask from"imask";import{useCallback,useEffect,useRef}from"react";import{useMutableRef}from"../../hooks/useMutableRef";export function useIMask(a){var b=a.value,c=a.maskOptions,d=a.onChange,e=useRef(null),f=useRef(null),g=useMutableRef(d);useEffect(function(){if(e.current){var a="string"==typeof c?{mask:c}:c;f.current?f.current.updateOptions(a):f.current=IMask(e.current,a)}},[e.current,c]),useEffect(function(){return function(){var a;null===(a=f.current)||void 0===a?void 0:a.destroy()}},[]);var h=useCallback(function(a){var b,c,d=(null===(b=f.current)||void 0===b?void 0:b.value)||null;null===(c=g.current)||void 0===c?void 0:c.call(g,d,{e:a,value:d})},[]);return useEffect(function(){var a;return null===(a=f.current)||void 0===a?void 0:a.on("accept",h),function(){var a;null===(a=f.current)||void 0===a?void 0:a.off("accept",h)}},[]),useEffect(function(){var a;null===(a=f.current)||void 0===a?void 0:a.updateValue()},[b]),{inputRef:e,imaskRef:f}}
|
|
2
|
+
//# sourceMappingURL=useIMask.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useIMask.js","names":["IMask","useCallback","useEffect","useRef","useMutableRef","useIMask","props","value","maskOptions","onChange","inputRef","imaskRef","handleChanheRef","current","options","mask","updateOptions","destroy","onAcept","e","on","off","updateValue"],"sources":["../../../../../src/components/TextField/useIMask.ts"],"sourcesContent":["import IMask from 'imask';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { useMutableRef } from '##/hooks/useMutableRef';\n\ntype Props<MASK extends IMask.AnyMaskedOptions> = {\n value: string | null;\n onChange?: (\n value: string | null,\n params: { e: Event; value: string | null },\n ) => void;\n maskOptions: string | MASK;\n};\nexport function useIMask<MASK extends IMask.AnyMaskedOptions>(\n props: Props<MASK>,\n) {\n const { value, maskOptions, onChange } = props;\n const inputRef = useRef<HTMLInputElement>(null);\n const imaskRef = useRef<IMask.InputMask<MASK> | null>(null);\n const handleChanheRef = useMutableRef(onChange);\n\n useEffect(() => {\n if (inputRef.current) {\n const options = (\n typeof maskOptions === 'string' ? { mask: maskOptions } : maskOptions\n ) as MASK;\n if (imaskRef.current) {\n imaskRef.current.updateOptions(options);\n } else {\n imaskRef.current = IMask(inputRef.current, options);\n }\n }\n }, [inputRef.current, maskOptions]);\n\n useEffect(() => {\n return () => {\n imaskRef.current?.destroy();\n };\n }, []);\n\n // Нужно для синхранизации value c Imask,\n // так как value мы можем задать через пропс без самого ввода,\n // и Imask требует ручной синхронихации в этом случае\n const onAcept = useCallback((e: Event) => {\n const value = imaskRef.current?.value || null;\n handleChanheRef.current?.(value, { e, value });\n }, []);\n\n useEffect(() => {\n imaskRef.current?.on('accept', onAcept);\n return () => {\n imaskRef.current?.off('accept', onAcept);\n };\n }, []);\n\n useEffect(() => {\n imaskRef.current?.updateValue();\n }, [value]);\n\n return {\n inputRef,\n imaskRef,\n };\n}\n"],"mappings":"AAAA,MAAOA,MAAP,KAAkB,OAAlB,CACA,OAASC,WAAT,CAAsBC,SAAtB,CAAiCC,MAAjC,KAA+C,OAA/C,CAEA,OAASC,aAAT,iCAUA,MAAO,SAASC,SAAT,CACLC,CADK,CAEL,IACQC,EADR,CACyCD,CADzC,CACQC,KADR,CACeC,CADf,CACyCF,CADzC,CACeE,WADf,CAC4BC,CAD5B,CACyCH,CADzC,CAC4BG,QAD5B,CAEMC,CAAQ,CAAGP,MAAM,CAAmB,IAAnB,CAFvB,CAGMQ,CAAQ,CAAGR,MAAM,CAA+B,IAA/B,CAHvB,CAIMS,CAAe,CAAGR,aAAa,CAACK,CAAD,CAJrC,CAMAP,SAAS,CAAC,UAAM,CACd,GAAIQ,CAAQ,CAACG,OAAb,CAAsB,CACpB,GAAMC,EAAO,CACY,QAAvB,QAAON,EAAP,CAAkC,CAAEO,IAAI,CAAEP,CAAR,CAAlC,CAA0DA,CAD5D,CAGIG,CAAQ,CAACE,OAJO,CAKlBF,CAAQ,CAACE,OAAT,CAAiBG,aAAjB,CAA+BF,CAA/B,CALkB,CAOlBH,CAAQ,CAACE,OAAT,CAAmBb,KAAK,CAACU,CAAQ,CAACG,OAAV,CAAmBC,CAAnB,CAE3B,CACF,CAXQ,CAWN,CAACJ,CAAQ,CAACG,OAAV,CAAmBL,CAAnB,CAXM,CANT,CAmBAN,SAAS,CAAC,UAAM,CACd,MAAO,WAAM,iBACXS,CAAQ,CAACE,OADE,qBACX,EAAkBI,OAAlB,EACD,CACF,CAJQ,CAIN,EAJM,CAnBT,CA4BA,GAAMC,EAAO,CAAGjB,WAAW,CAAC,SAACkB,CAAD,CAAc,SAClCZ,CAAK,CAAG,WAAAI,CAAQ,CAACE,OAAT,uBAAkBN,KAAlB,GAA2B,IADD,WAExCK,CAAe,CAACC,OAFwB,qBAExC,OAAAD,CAAe,CAAWL,CAAX,CAAkB,CAAEY,CAAC,CAADA,CAAF,CAAKZ,KAAK,CAALA,CAAL,CAAlB,CAChB,CAH0B,CAGxB,EAHwB,CAA3B,CAgBA,MAXAL,UAAS,CAAC,UAAM,OAEd,iBADAS,CAAQ,CAACE,OACT,qBADA,EAAkBO,EAAlB,CAAqB,QAArB,CAA+BF,CAA/B,CACA,CAAO,UAAM,iBACXP,CAAQ,CAACE,OADE,qBACX,EAAkBQ,GAAlB,CAAsB,QAAtB,CAAgCH,CAAhC,CACD,CACF,CALQ,CAKN,EALM,CAWT,CAJAhB,SAAS,CAAC,UAAM,iBACdS,CAAQ,CAACE,OADK,qBACd,EAAkBS,WAAlB,EACD,CAFQ,CAEN,CAACf,CAAD,CAFM,CAIT,CAAO,CACLG,QAAQ,CAARA,CADK,CAELC,QAAQ,CAARA,CAFK,CAIR"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["placeholder","onBlur","onFocus","items","onChange","value","disabled","ariaLabel","id","isLoading","required","dropdownRef","form","view","size","dropdownClassName","name","groups","getItemKey","getItemLabel","getItemSubLabel","getItemAvatarUrl","getItemGroupKey","getItemDisabled","getGroupKey","getGroupLabel","renderItem","renderValue","onCreate","inputRef","labelForNotFound","labelForCreate","labelForEmptyItems","multiple","searchFunction","style","dropdownForm"];import"../SelectComponents/Select.css";import{IconClose}from"@consta/icons/IconClose";import{IconSelect}from"@consta/icons/IconSelect";import React,{forwardRef,useRef}from"react";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{useSelect}from"../../hooks/useSelect/useSelect";import{cnMixFocus}from"../../mixs/MixFocus/MixFocus";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{cnSelect}from"../SelectComponents/cnSelect";import{defaultlabelForCreate,defaultLabelForEmptyItems,defaultlabelForNotFound,getInputWidth}from"../SelectComponents/helpers";import{SelectContainer}from"../SelectComponents/SelectContainer/SelectContainer";import{SelectDropdown}from"../SelectComponents/SelectDropdown/SelectDropdown";import{defaultPropForm,defaultPropSize,defaultPropView}from"../SelectComponents/types";import{isMultipleParams,isNotMultipleParams,searchCompare,withDefaultGetters}from"./helpers";import{UserSelectItem}from"./UserSelectItem/UserSelectItem";import{UserSelectValue}from"./UserSelectValue/UserSelectValue";export var COMPONENT_NAME="UserSelect";var UserSelectRender=function(a,b){var c=useRef(null),d=useRef(null),e=useRef(null),f=useRef(null),g=usePropsHandler(COMPONENT_NAME,withDefaultGetters(a),f),h=g.placeholder,i=g.onBlur,j=g.onFocus,k=g.items,l=g.onChange,m=g.value,n=g.disabled,o=g.ariaLabel,p=g.id,q=g.isLoading,r=g.required,s=g.dropdownRef,t=void 0===s?c:s,u=g.form,v=void 0===u?defaultPropForm:u,w=g.view,x=void 0===w?defaultPropView:w,y=g.size,z=void 0===y?defaultPropSize:y,A=g.dropdownClassName,B=g.
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["placeholder","onBlur","onFocus","items","onChange","value","disabled","ariaLabel","id","isLoading","required","dropdownRef","form","view","size","dropdownClassName","searchValue","name","groups","getItemKey","getItemLabel","getItemSubLabel","getItemAvatarUrl","getItemGroupKey","getItemDisabled","getGroupKey","getGroupLabel","renderItem","renderValue","onCreate","inputRef","labelForNotFound","labelForCreate","labelForEmptyItems","multiple","searchFunction","style","dropdownForm"];import"../SelectComponents/Select.css";import{IconClose}from"@consta/icons/IconClose";import{IconSelect}from"@consta/icons/IconSelect";import React,{forwardRef,useRef}from"react";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{useSelect}from"../../hooks/useSelect/useSelect";import{cnMixFocus}from"../../mixs/MixFocus/MixFocus";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{cnSelect}from"../SelectComponents/cnSelect";import{defaultlabelForCreate,defaultLabelForEmptyItems,defaultlabelForNotFound,getInputWidth}from"../SelectComponents/helpers";import{SelectContainer}from"../SelectComponents/SelectContainer/SelectContainer";import{SelectDropdown}from"../SelectComponents/SelectDropdown/SelectDropdown";import{defaultPropForm,defaultPropSize,defaultPropView}from"../SelectComponents/types";import{isMultipleParams,isNotMultipleParams,searchCompare,withDefaultGetters}from"./helpers";import{UserSelectItem}from"./UserSelectItem/UserSelectItem";import{UserSelectValue}from"./UserSelectValue/UserSelectValue";export var COMPONENT_NAME="UserSelect";var UserSelectRender=function(a,b){var c=useRef(null),d=useRef(null),e=useRef(null),f=useRef(null),g=usePropsHandler(COMPONENT_NAME,withDefaultGetters(a),f),h=g.placeholder,i=g.onBlur,j=g.onFocus,k=g.items,l=g.onChange,m=g.value,n=g.disabled,o=g.ariaLabel,p=g.id,q=g.isLoading,r=g.required,s=g.dropdownRef,t=void 0===s?c:s,u=g.form,v=void 0===u?defaultPropForm:u,w=g.view,x=void 0===w?defaultPropView:w,y=g.size,z=void 0===y?defaultPropSize:y,A=g.dropdownClassName,B=g.searchValue,C=g.name,D=g.groups,E=void 0===D?[]:D,F=g.getItemKey,G=g.getItemLabel,H=g.getItemSubLabel,I=g.getItemAvatarUrl,J=g.getItemGroupKey,K=g.getItemDisabled,L=g.getGroupKey,M=g.getGroupLabel,N=g.renderItem,O=g.renderValue,P=g.onCreate,Q=g.inputRef,R=g.labelForNotFound,S=void 0===R?defaultlabelForNotFound:R,T=g.labelForCreate,U=void 0===T?defaultlabelForCreate:T,V=g.labelForEmptyItems,W=void 0===V?defaultLabelForEmptyItems:V,X=g.multiple,Y=void 0!==X&&X,Z=g.searchFunction,$=g.style,_=g.dropdownForm,aa=void 0===_?"default":_,ba=_objectWithoutProperties(g,_excluded),ca=useSelect({items:k,groups:E,value:m,onChange:l,dropdownRef:t,controlRef:f,disabled:n,getItemLabel:G,getItemKey:F,getGroupKey:L,getItemGroupKey:J,searchValue:B,getItemDisabled:K,multiple:Y,onBlur:i,onFocus:j,onCreate:P,searchFunction:Z||function searchFunctionDefault(a,b){var c=searchCompare(b,G(a));return c?c:searchCompare(b,H(a))}}),da=ca.getKeyProps,ea=ca.getOptionProps,fa=ca.isOpen,ga=ca.visibleItems,ha=ca.isFocused,ia=ca.handleInputFocus,ja=ca.handleInputBlur,ka=ca.handleToggleDropdown,la=ca.inputRef,ma=ca.handleInputClick,na=ca.handleInputChange,oa=ca.searchValue,pa=ca.clearValue,qa=ca.getHandleRemoveValue,ra=ca.notFound,sa=ca.hasItems,ta=O||function renderValueDefault(a){var b=a.item,c=a.handleRemove;return React.createElement(UserSelectValue,{label:G(b),subLabel:H(b),avatarUrl:I(b),key:F(b),size:z,handleRemove:c,multiple:Y,disabled:n||K(b)})},ua=useForkRef([la,Q]),va=function(){var b=Y?getInputWidth(d,e):void 0;return React.createElement(React.Fragment,null,isMultipleParams(a)&&Array.isArray(a.value)&&a.value.map(function(a){return ta({item:a,handleRemove:qa(a)})}),isNotMultipleParams(a)&&a.value&&ta({item:a.value}),(!m||Array.isArray(m)&&0===m.length)&&!oa&&h&&React.createElement("span",{className:cnSelect("Placeholder"),title:"placeholder"},h),React.createElement("input",Object.assign({},da(),{type:"text",name:C,onFocus:ia,onBlur:ja,"aria-label":o,onChange:na,ref:ua,className:cnSelect("Input",{size:z,hide:!Y&&!!m,multiple:Y,isUserSelect:!0}),value:oa,style:{width:b}})))};return React.createElement(React.Fragment,null,React.createElement(SelectContainer,Object.assign({focused:ha,disabled:n,size:z,required:r,view:x,type:"userselect",form:v,multiple:!0,ref:b,style:$},ba),React.createElement("div",{className:cnSelect("Control",{hasInput:!0}),ref:f,"aria-expanded":fa,"aria-haspopup":"listbox",id:p},React.createElement("div",{className:cnSelect("ControlInner"),onClick:ma,role:"button",ref:d,"aria-hidden":"true"},React.createElement("div",{className:cnSelect("ControlValueContainer")},Y?React.createElement("div",{className:cnSelect("ControlValue",{isUserSelect:!0})},va()):va())),React.createElement("span",{className:cnSelect("Indicators")},m&&React.createElement("button",{type:"button",onClick:pa,className:cnSelect("ClearIndicator",[cnMixFocus()])},React.createElement(IconClose,{size:"xs",className:cnSelect("ClearIndicatorIcon")})),React.createElement("span",{className:cnSelect("Delimiter")}),React.createElement("button",{type:"button",className:cnSelect("IndicatorsDropdown"),tabIndex:-1,onClick:ka},React.createElement(IconSelect,{size:"xs",className:cnSelect("DropdownIndicatorIcon")})))),React.createElement("div",{className:cnSelect("HelperInputFakeElement"),ref:e},oa)),React.createElement(SelectDropdown,{isOpen:fa,size:z,controlRef:f,getOptionProps:ea,dropdownRef:t,form:aa,isLoading:q,className:A,renderItem:N||function renderItemDefault(a){var b=a.item,c=a.active,d=a.hovered,e=a.onClick,f=a.onMouseEnter;return React.createElement(UserSelectItem,{label:G(b),subLabel:H(b),avatarUrl:I(b),active:c,hovered:d,size:z,indent:"round"===aa?"increased":"normal",onClick:e,onMouseEnter:f,disable:K(b),multiple:Y})},getGroupLabel:M,visibleItems:ga,labelForNotFound:S,labelForCreate:U,notFound:ra,hasItems:sa,labelForEmptyItems:W,style:"number"==typeof(null===$||void 0===$?void 0:$.zIndex)?{zIndex:$.zIndex+1}:void 0}))};export var UserSelect=forwardRef(UserSelectRender);export*from"./helpers";
|
|
2
2
|
//# sourceMappingURL=UserSelect.js.map
|