@consta/uikit 4.21.0 → 4.23.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/BadgeGroup/index.d.ts +1 -0
- package/BadgeGroup/index.js +1 -0
- package/__internal__/src/components/Avatar/Avatar.css +1 -1
- package/__internal__/src/components/Badge/Badge.css +1 -1
- package/__internal__/src/components/BadgeGroup/BadgeGroup.css +1 -0
- package/__internal__/src/components/BadgeGroup/BadgeGroup.d.ts +4 -0
- package/__internal__/src/components/BadgeGroup/BadgeGroup.js +2 -0
- package/__internal__/src/components/BadgeGroup/BadgeGroup.js.map +1 -0
- package/__internal__/src/components/BadgeGroup/helper.d.ts +35 -0
- package/__internal__/src/components/BadgeGroup/helper.js +2 -0
- package/__internal__/src/components/BadgeGroup/helper.js.map +1 -0
- package/__internal__/src/components/BadgeGroup/index.d.ts +1 -0
- package/__internal__/src/components/BadgeGroup/index.js +2 -0
- package/__internal__/src/components/BadgeGroup/index.js.map +1 -0
- package/__internal__/src/components/BadgeGroup/types.d.ts +47 -0
- package/__internal__/src/components/BadgeGroup/types.js +2 -0
- package/__internal__/src/components/BadgeGroup/types.js.map +1 -0
- package/__internal__/src/components/Button/Button.css +1 -1
- package/__internal__/src/components/Checkbox/Checkbox.css +2 -2
- package/__internal__/src/components/ChoiceGroup/ChoiceGroup.css +1 -1
- package/__internal__/src/components/Collapse/Collapse.css +1 -1
- package/__internal__/src/components/Collapse/Collapse.js +1 -1
- package/__internal__/src/components/Collapse/Collapse.js.map +1 -1
- package/__internal__/src/components/Collapse/CollapseIcon/CollapseIcon.css +1 -1
- package/__internal__/src/components/Collapse/CollapseIcon/CollapseIcon.js +1 -1
- package/__internal__/src/components/Collapse/CollapseIcon/CollapseIcon.js.map +1 -1
- package/__internal__/src/components/Collapse/types.d.ts +2 -6
- package/__internal__/src/components/Collapse/types.js.map +1 -1
- package/__internal__/src/components/CollapseGroup/helpers.d.ts +2 -2
- package/__internal__/src/components/Combobox/Combobox.js +1 -1
- package/__internal__/src/components/Combobox/Combobox.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateRange/DatePickerFieldTypeDateRange.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateRange/DatePickerFieldTypeDateRange.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateTimeRange/DatePickerFieldTypeDateTimeRange.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeDateTimeRange/DatePickerFieldTypeDateTimeRange.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeMonthRange/DatePickerFieldTypeMonthRange.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeMonthRange/DatePickerFieldTypeMonthRange.js.map +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeYearRange/DatePickerFieldTypeYearRange.js +1 -1
- package/__internal__/src/components/DatePicker/DatePickerFieldTypeYearRange/DatePickerFieldTypeYearRange.js.map +1 -1
- package/__internal__/src/components/Select/Select.js +1 -1
- package/__internal__/src/components/Select/Select.js.map +1 -1
- package/__internal__/src/components/SelectComponents/SelectContainer/SelectContainer.js +1 -1
- package/__internal__/src/components/SelectComponents/SelectContainer/SelectContainer.js.map +1 -1
- package/__internal__/src/components/Slider/Slider.css +1 -1
- package/__internal__/src/components/Slider/Slider.js +1 -1
- package/__internal__/src/components/Slider/Slider.js.map +1 -1
- package/__internal__/src/components/Slider/SliderInput/SliderInput.css +1 -0
- package/__internal__/src/components/Slider/SliderInput/SliderInput.d.ts +1 -0
- package/__internal__/src/components/Slider/SliderInput/SliderInput.js +1 -1
- package/__internal__/src/components/Slider/SliderInput/SliderInput.js.map +1 -1
- package/__internal__/src/components/Slider/SliderLine/SliderLine.css +1 -1
- package/__internal__/src/components/Slider/SliderPoint/SliderPoint.css +1 -1
- package/__internal__/src/components/Slider/SliderPoint/SliderPoint.js +1 -1
- package/__internal__/src/components/Slider/SliderPoint/SliderPoint.js.map +1 -1
- package/__internal__/src/components/Slider/helper.d.ts +4 -0
- package/__internal__/src/components/Slider/helper.js +1 -1
- package/__internal__/src/components/Slider/helper.js.map +1 -1
- package/__internal__/src/components/Slider/useSlider/helper.d.ts +1 -0
- package/__internal__/src/components/Slider/useSlider/helper.js +1 -1
- package/__internal__/src/components/Slider/useSlider/helper.js.map +1 -1
- package/__internal__/src/components/Slider/useSlider/useSlider.js +1 -1
- package/__internal__/src/components/Slider/useSlider/useSlider.js.map +1 -1
- package/__internal__/src/components/Slider/useSliderStationing.js +1 -1
- package/__internal__/src/components/Slider/useSliderStationing.js.map +1 -1
- package/__internal__/src/components/SpoilerCanary/Spoiler.css +1 -0
- package/__internal__/src/components/SpoilerCanary/Spoiler.d.ts +5 -0
- package/__internal__/src/components/SpoilerCanary/Spoiler.js +2 -0
- package/__internal__/src/components/SpoilerCanary/Spoiler.js.map +1 -0
- package/__internal__/src/components/SpoilerCanary/SpoilerButton/SpoilerButton.css +1 -0
- package/__internal__/src/components/SpoilerCanary/SpoilerButton/SpoilerButton.d.ts +4 -0
- package/__internal__/src/components/SpoilerCanary/SpoilerButton/SpoilerButton.js +2 -0
- package/__internal__/src/components/SpoilerCanary/SpoilerButton/SpoilerButton.js.map +1 -0
- package/__internal__/src/components/SpoilerCanary/SpoilerButton/index.d.ts +1 -0
- package/__internal__/src/components/SpoilerCanary/SpoilerButton/index.js +2 -0
- package/__internal__/src/components/SpoilerCanary/SpoilerButton/index.js.map +1 -0
- package/__internal__/src/components/SpoilerCanary/index.d.ts +2 -0
- package/__internal__/src/components/SpoilerCanary/index.js +2 -0
- package/__internal__/src/components/SpoilerCanary/index.js.map +1 -0
- package/__internal__/src/components/SpoilerCanary/types.d.ts +32 -0
- package/__internal__/src/components/SpoilerCanary/types.js +2 -0
- package/__internal__/src/components/SpoilerCanary/types.js.map +1 -0
- package/__internal__/src/components/Steps/Steps.js +1 -1
- package/__internal__/src/components/Steps/Steps.js.map +1 -1
- package/__internal__/src/components/Steps/StepsStep/StepsStep.css +1 -1
- package/__internal__/src/components/Steps/StepsStep/StepsStep.d.ts +1 -0
- package/__internal__/src/components/Steps/StepsStep/StepsStep.js +1 -1
- package/__internal__/src/components/Steps/StepsStep/StepsStep.js.map +1 -1
- package/__internal__/src/components/Steps/helper.d.ts +1 -1
- package/__internal__/src/components/Steps/types.d.ts +1 -1
- package/__internal__/src/components/Steps/types.js +1 -1
- package/__internal__/src/components/Steps/types.js.map +1 -1
- package/__internal__/src/components/TagBase/TagBase.css +1 -1
- package/__internal__/src/components/TextField/TextField.js +1 -1
- package/__internal__/src/components/TextField/TextField.js.map +1 -1
- package/__internal__/src/components/Tooltip/Tooltip.css +1 -1
- package/__internal__/src/components/UserSelect/UserSelect.js +1 -1
- package/__internal__/src/components/UserSelect/UserSelect.js.map +1 -1
- package/__internal__/src/hooks/useResizableContentCanary/helpers.d.ts +11 -0
- package/__internal__/src/hooks/useResizableContentCanary/helpers.js +2 -0
- package/__internal__/src/hooks/useResizableContentCanary/helpers.js.map +1 -0
- package/__internal__/src/hooks/useResizableContentCanary/index.d.ts +1 -0
- package/__internal__/src/hooks/useResizableContentCanary/index.js +2 -0
- package/__internal__/src/hooks/useResizableContentCanary/index.js.map +1 -0
- package/__internal__/src/hooks/useResizableContentCanary/types.d.ts +27 -0
- package/__internal__/src/hooks/useResizableContentCanary/types.js +2 -0
- package/__internal__/src/hooks/useResizableContentCanary/types.js.map +1 -0
- package/__internal__/src/hooks/useResizableContentCanary/useResizableContent.d.ts +2 -0
- package/__internal__/src/hooks/useResizableContentCanary/useResizableContent.js +2 -0
- package/__internal__/src/hooks/useResizableContentCanary/useResizableContent.js.map +1 -0
- package/__internal__/src/hooks/useSelect/useSelect.js +1 -1
- package/__internal__/src/hooks/useSelect/useSelect.js.map +1 -1
- package/__internal__/src/mixs/MixPopoverArrow/MixPopoverArrow.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSliderStationing.js","names":["useCallback","useEffect","useMemo","useState","COUNT_STEPS","getSteps","step","min","max","stepsArray","size","Array","isArray","i","length","push","useSliderStationing","value","view","range","buttonRefs","sliderLineRef","lineSizes","setLineSizes","buttonPositions","setButtonPositions","calcualtedStep","val","Math","abs","calculateLines","sizesArray","absoluteSize","width","active","forEach","stepSize","endPointArray","unshift","getValidValue","calculateButtonPositions","defaultPaddingValue","positions","buttonRef","index","current","offsetWidth"],"sources":["../../../../../src/components/Slider/useSliderStationing.ts"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { Line, PropView } from './helper';\nimport { COUNT_STEPS } from './useSlider/useSlider';\n\ntype UseSliderStationing = (\n value: number | [number, number] | undefined,\n min: number,\n max: number,\n view: PropView,\n range: boolean | undefined,\n step: number | number[] | undefined,\n buttonRefs: [\n React.RefObject<HTMLButtonElement>,\n React.RefObject<HTMLButtonElement>,\n ],\n sliderLineRef: React.RefObject<HTMLButtonElement | HTMLDivElement>,\n) => {\n lineSizes: Line[];\n buttonPositions: number[];\n};\n\nexport const getSteps = (step: number | number[], min: number, max: number) => {\n const stepsArray: { min: number; max: number }[] = [];\n let size = min;\n if (Array.isArray(step)) {\n for (let i = 0; i < step.length - 1; i++) {\n stepsArray.push({\n min: step[i],\n max: step[i + 1],\n });\n }\n } else {\n for (let i = min; i < max; i += step) {\n stepsArray.push({\n min: size,\n max: size + (max - i < step ? max - i : step),\n });\n size += step;\n }\n }\n return stepsArray;\n};\n\nexport const useSliderStationing: UseSliderStationing = (\n value,\n min,\n max,\n view,\n range,\n step = 1,\n buttonRefs,\n sliderLineRef,\n) => {\n const [lineSizes, setLineSizes] = useState<Line[]>([]);\n const [buttonPositions, setButtonPositions] = useState<number[]>([]);\n\n const calcualtedStep = useMemo(() => {\n if (!Array.isArray(step)) {\n const val = Math.abs((max - min) / COUNT_STEPS);\n if (val > step) {\n return val - (val % step);\n }\n return Math.max(val, step);\n }\n return step;\n }, [max, min, step]);\n\n const calculateLines = () => {\n const sizesArray: Line[] = [];\n const absoluteSize = Math.abs(max - min);\n if (typeof value !== 'undefined') {\n if (view === 'default') {\n if (!Array.isArray(value) && typeof value === 'number') {\n sizesArray.push({\n width: (1 - (max - value) / absoluteSize) * 100,\n active: true,\n });\n sizesArray.push({\n width: ((max - value) / absoluteSize) * 100,\n active: false,\n });\n } else if (Array.isArray(value) && value) {\n const endPointArray = [...value];\n endPointArray.unshift(min);\n endPointArray.push(max);\n for (let i = 0; i < endPointArray.length - 1; i++) {\n sizesArray.push({\n width:\n ((endPointArray[i + 1] - endPointArray[i]) / absoluteSize) *\n 100,\n active:\n endPointArray[i] >= value[0] &&\n endPointArray[i + 1] <= value[1],\n });\n }\n } else {\n sizesArray.push({\n width: 100,\n active: false,\n });\n }\n } else if (typeof calcualtedStep !== 'undefined') {\n getSteps(calcualtedStep, min, max).forEach((stepSize) => {\n sizesArray.push({\n width: (Math.abs(stepSize.max - stepSize.min) * 100) / absoluteSize,\n active:\n (typeof value === 'number' || Array.isArray(value)) &&\n (range && Array.isArray(value)\n ? stepSize.max > value[0] &&\n stepSize.min < value[value.length - 1]\n : stepSize.max <= value),\n });\n });\n }\n } else {\n sizesArray.push({\n width: 100,\n active: false,\n });\n }\n return sizesArray;\n };\n\n const getValidValue = (value: number) => {\n if (value < min) return min;\n if (value > max) return max;\n return value;\n };\n\n const calculateButtonPositions = useCallback(() => {\n const absoluteSize = Math.abs(max - min);\n let defaultPaddingValue = 0;\n const positions: number[] = [];\n buttonRefs.forEach((buttonRef, index) => {\n if (\n buttonRef.current &&\n buttonRef.current.offsetWidth &&\n sliderLineRef.current &&\n sliderLineRef.current.offsetWidth\n ) {\n defaultPaddingValue =\n (absoluteSize * buttonRef.current.offsetWidth) /\n (2 * sliderLineRef.current.offsetWidth) || 0;\n }\n if (typeof value === 'number' || Array.isArray(value)) {\n positions.push(\n typeof value === 'number'\n ? (1 -\n (max - getValidValue(value) + defaultPaddingValue) /\n absoluteSize) *\n 100\n : (1 -\n (max - getValidValue(value[index]) + defaultPaddingValue) /\n absoluteSize) *\n 100,\n );\n }\n });\n return positions;\n }, [buttonRefs, sliderLineRef]);\n\n useEffect(() => {\n setLineSizes(calculateLines());\n setButtonPositions(calculateButtonPositions());\n }, [value, min, max, range, calcualtedStep, view]);\n\n return {\n lineSizes,\n buttonPositions,\n };\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useSliderStationing.js","names":["useCallback","useEffect","useMemo","useState","useComponentSize","COUNT_STEPS","getSteps","step","min","max","stepsArray","size","Array","isArray","i","length","push","useSliderStationing","value","view","range","buttonRefs","sliderLineRef","lineSizes","setLineSizes","buttonPositions","setButtonPositions","width","height","calcualtedStep","val","Math","abs","calculateLines","sizesArray","absoluteSize","active","forEach","stepSize","minValue","maxValue","endPointArray","unshift","getValidValue","calculateButtonPositions","defaultPaddingValue","positions","buttonRef","index","current","offsetWidth"],"sources":["../../../../../src/components/Slider/useSliderStationing.ts"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useComponentSize } from '##/hooks/useComponentSize';\n\nimport { Line, PropView } from './helper';\nimport { COUNT_STEPS } from './useSlider/useSlider';\n\ntype UseSliderStationing = (\n value: number | [number, number] | undefined,\n min: number,\n max: number,\n view: PropView,\n range: boolean | undefined,\n step: number | number[] | undefined,\n buttonRefs: [\n React.RefObject<HTMLButtonElement>,\n React.RefObject<HTMLButtonElement>,\n ],\n sliderLineRef: React.RefObject<HTMLButtonElement | HTMLDivElement>,\n) => {\n lineSizes: Line[];\n buttonPositions: number[];\n};\n\nexport const getSteps = (step: number | number[], min: number, max: number) => {\n const stepsArray: { min: number; max: number }[] = [];\n let size = min;\n if (Array.isArray(step)) {\n for (let i = 0; i < step.length - 1; i++) {\n stepsArray.push({\n min: step[i],\n max: step[i + 1],\n });\n }\n } else {\n for (let i = min; i < max; i += step) {\n stepsArray.push({\n min: size,\n max: size + (max - i < step ? max - i : step),\n });\n size += step;\n }\n }\n return stepsArray;\n};\n\nexport const useSliderStationing: UseSliderStationing = (\n value,\n min,\n max,\n view,\n range,\n step = 1,\n buttonRefs,\n sliderLineRef,\n) => {\n const [lineSizes, setLineSizes] = useState<Line[]>([]);\n const [buttonPositions, setButtonPositions] = useState<number[]>([]);\n\n const { width, height } = useComponentSize(sliderLineRef);\n\n const calcualtedStep = useMemo(() => {\n if (!Array.isArray(step)) {\n const val = Math.abs((max - min) / COUNT_STEPS);\n if (val > step) {\n return val - (val % step);\n }\n return Math.max(val, step);\n }\n return step;\n }, [max, min, step]);\n\n const calculateLines = () => {\n const sizesArray: Line[] = [];\n const absoluteSize = Math.abs(max - min);\n if (typeof value !== 'undefined') {\n if (view === 'default') {\n if (!Array.isArray(value) && typeof value === 'number') {\n sizesArray.push({\n width: (1 - (max - value) / absoluteSize) * 100,\n active: true,\n });\n sizesArray.push({\n width: ((max - value) / absoluteSize) * 100,\n active: false,\n });\n } else if (Array.isArray(value) && value) {\n const [minValue, maxValue] = [Math.min(...value), Math.max(...value)];\n const endPointArray = [minValue, maxValue];\n endPointArray.unshift(min);\n endPointArray.push(max);\n for (let i = 0; i < endPointArray.length - 1; i++) {\n sizesArray.push({\n width:\n ((endPointArray[i + 1] - endPointArray[i]) / absoluteSize) *\n 100,\n active:\n endPointArray[i] >= minValue &&\n endPointArray[i + 1] <= maxValue,\n });\n }\n } else {\n sizesArray.push({\n width: 100,\n active: false,\n });\n }\n } else if (typeof calcualtedStep !== 'undefined') {\n getSteps(calcualtedStep, min, max).forEach((stepSize) => {\n sizesArray.push({\n width: (Math.abs(stepSize.max - stepSize.min) * 100) / absoluteSize,\n active:\n (typeof value === 'number' || Array.isArray(value)) &&\n (range && Array.isArray(value)\n ? stepSize.max > Math.min(...value) &&\n stepSize.min < Math.max(...value)\n : stepSize.max <= value),\n });\n });\n }\n } else {\n sizesArray.push({\n width: 100,\n active: false,\n });\n }\n return sizesArray;\n };\n\n const getValidValue = (value: number) => {\n if (value < min) return min;\n if (value > max) return max;\n return value;\n };\n\n const calculateButtonPositions = useCallback(() => {\n const absoluteSize = Math.abs(max - min);\n let defaultPaddingValue = 0;\n const positions: number[] = [];\n buttonRefs.forEach((buttonRef, index) => {\n if (\n buttonRef.current &&\n buttonRef.current.offsetWidth &&\n sliderLineRef.current &&\n sliderLineRef.current.offsetWidth\n ) {\n defaultPaddingValue =\n (absoluteSize * buttonRef.current.offsetWidth) /\n (2 * sliderLineRef.current.offsetWidth) || 0;\n }\n if (typeof value === 'number' || Array.isArray(value)) {\n positions.push(\n typeof value === 'number'\n ? (1 -\n (max - getValidValue(value) + defaultPaddingValue) /\n absoluteSize) *\n 100\n : (1 -\n (max - getValidValue(value[index]) + defaultPaddingValue) /\n absoluteSize) *\n 100,\n );\n }\n });\n return positions;\n }, [buttonRefs, sliderLineRef]);\n\n useEffect(() => {\n setLineSizes(calculateLines());\n setButtonPositions(calculateButtonPositions());\n }, [value, min, max, range, calcualtedStep, view, width, height]);\n\n return {\n lineSizes,\n buttonPositions,\n };\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.canary--Spoiler{width:100%}.canary--Spoiler-Wrapper{--spoiler-content-max-heigt:max-content;max-height:var(--spoiler-content-max-heigt);overflow:hidden;position:relative;width:100%}.canary--Spoiler-Wrapper_mode_blur:not(.canary--Spoiler-Wrapper_open){--spoiler-content-max-heigt:var(--spoiler-content-height)}.canary--Spoiler-Wrapper_mode_blur:not(.canary--Spoiler-Wrapper_open):after{background:linear-gradient(to bottom,transparent 0,var(--color-bg-default) 100%);bottom:0;content:"";height:min(100%,var(--space-6xl));left:0;pointer-events:none;position:absolute;right:0}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import './Spoiler.css';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { SpoilerProps } from './types';
|
|
4
|
+
export declare const cnSpoiler: import("@bem-react/classname").ClassNameFormatter;
|
|
5
|
+
export declare const Spoiler: React.ForwardRefExoticComponent<SpoilerProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["preview","maxHeight","fullText","size","lessIcon","lessLabel","children","moreIcon","moreLabel","className"];import"./Spoiler.css";import React,{forwardRef}from"react";import{Text}from"../Text";import{useFlag}from"../../hooks/useFlag";import{cnMixSpace}from"../../mixs/MixSpace";import{cnCanary}from"../../utils/bem";import{SpoilerButton}from"./SpoilerButton";import{defaultSpoilerPropSize}from"./types";export var cnSpoiler=cnCanary("Spoiler");var spoilerOffsetMap={xs:"xs",s:"s",m:"m",l:"m"},getContent=function(a,b){return a.children?{mode:"blur",content:a.children}:{mode:"dots",content:b?a.fullText:a.preview}};export var Spoiler=forwardRef(function(a,b){var c=a.preview,d=a.maxHeight,e=void 0===d?96:d,f=a.fullText,g=a.size,h=void 0===g?defaultSpoilerPropSize:g,i=a.lessIcon,j=a.lessLabel,k=a.children,l=a.moreIcon,m=a.moreLabel,n=a.className,o=_objectWithoutProperties(a,_excluded),p=useFlag(),q=_slicedToArray(p,2),r=q[0],s=q[1],t=getContent(a,r),u=t.mode,v=t.content;return React.createElement("div",Object.assign({ref:b,className:cnSpoiler({size:h},[n])},o),React.createElement(Text,{className:cnSpoiler("Wrapper",{mode:u,open:r}),size:h,style:_defineProperty({},"--spoiler-content-height","".concat(e,"px"))},v),React.createElement(SpoilerButton,{className:cnSpoiler("Button",[cnMixSpace({mT:spoilerOffsetMap[h]})]),lessIcon:i,lessLabel:j,moreIcon:l,moreLabel:m,onClick:s.toggle,open:r,size:h}))});
|
|
2
|
+
//# sourceMappingURL=Spoiler.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Spoiler.js","names":["React","forwardRef","Text","useFlag","cnMixSpace","cnCanary","SpoilerButton","defaultSpoilerPropSize","cnSpoiler","spoilerOffsetMap","xs","s","m","l","getContent","props","isOpen","children","mode","content","fullText","preview","Spoiler","ref","maxHeight","size","lessIcon","lessLabel","moreIcon","moreLabel","className","otherProps","setIsOpen","open","mT","toggle"],"sources":["../../../../../src/components/SpoilerCanary/Spoiler.tsx"],"sourcesContent":["import './Spoiler.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { Text } from '##/components/Text';\nimport { useFlag } from '##/hooks/useFlag';\nimport { cnMixSpace, Space } from '##/mixs/MixSpace';\nimport { cnCanary } from '##/utils/bem';\n\nimport { SpoilerButton } from './SpoilerButton';\nimport { defaultSpoilerPropSize, SpoilerProps, SpoilerPropSize } from './types';\n\nexport const cnSpoiler = cnCanary('Spoiler');\n\nconst spoilerOffsetMap: Record<SpoilerPropSize, Space> = {\n xs: 'xs',\n s: 's',\n m: 'm',\n l: 'm',\n};\n\nconst getContent = (props: SpoilerProps, isOpen: boolean) => {\n if (props.children) {\n return {\n mode: 'blur',\n content: props.children,\n };\n }\n return {\n mode: 'dots',\n content: isOpen ? props.fullText : props.preview,\n };\n};\n\nexport const Spoiler = forwardRef<HTMLDivElement, SpoilerProps>(\n (props, ref) => {\n const {\n preview,\n maxHeight = 96,\n fullText,\n size = defaultSpoilerPropSize,\n lessIcon,\n lessLabel,\n children,\n moreIcon,\n moreLabel,\n className,\n ...otherProps\n } = props;\n\n const [isOpen, setIsOpen] = useFlag();\n\n const { mode, content } = getContent(props, isOpen);\n\n return (\n <div\n ref={ref}\n className={cnSpoiler({ size }, [className])}\n {...otherProps}\n >\n <Text\n className={cnSpoiler('Wrapper', { mode, open: isOpen })}\n size={size}\n style={{\n ['--spoiler-content-height' as string]: `${maxHeight}px`,\n }}\n >\n {content}\n </Text>\n <SpoilerButton\n className={cnSpoiler('Button', [\n cnMixSpace({ mT: spoilerOffsetMap[size] }),\n ])}\n lessIcon={lessIcon}\n lessLabel={lessLabel}\n moreIcon={moreIcon}\n moreLabel={moreLabel}\n onClick={setIsOpen.toggle}\n open={isOpen}\n size={size}\n />\n </div>\n );\n },\n);\n"],"mappings":"sVAAA,sBAEA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OAASC,IAAT,eACA,OAASC,OAAT,2BACA,OAASC,UAAT,2BACA,OAASC,QAAT,uBAEA,OAASC,aAAT,uBACA,OAASC,sBAAT,eAEA,MAAO,IAAMC,UAAS,CAAGH,QAAQ,CAAC,SAAD,CAA1B,C,GAEDI,iBAAgD,CAAG,CACvDC,EAAE,CAAE,IADmD,CAEvDC,CAAC,CAAE,GAFoD,CAGvDC,CAAC,CAAE,GAHoD,CAIvDC,CAAC,CAAE,GAJoD,C,CAOnDC,UAAU,CAAG,SAACC,CAAD,CAAsBC,CAAtB,CAA0C,OACvDD,EAAK,CAACE,QADiD,CAElD,CACLC,IAAI,CAAE,MADD,CAELC,OAAO,CAAEJ,CAAK,CAACE,QAFV,CAFkD,CAOpD,CACLC,IAAI,CAAE,MADD,CAELC,OAAO,CAAEH,CAAM,CAAGD,CAAK,CAACK,QAAT,CAAoBL,CAAK,CAACM,OAFpC,CAIR,C,CAED,MAAO,IAAMC,QAAO,CAAGrB,UAAU,CAC/B,SAACc,CAAD,CAAQQ,CAAR,CAAgB,IAEZF,EAFY,CAaVN,CAbU,CAEZM,OAFY,GAaVN,CAbU,CAGZS,SAHY,CAGZA,CAHY,YAGA,EAHA,GAIZJ,CAJY,CAaVL,CAbU,CAIZK,QAJY,GAaVL,CAbU,CAKZU,IALY,CAKZA,CALY,YAKLlB,sBALK,GAMZmB,CANY,CAaVX,CAbU,CAMZW,QANY,CAOZC,CAPY,CAaVZ,CAbU,CAOZY,SAPY,CAQZV,CARY,CAaVF,CAbU,CAQZE,QARY,CASZW,CATY,CAaVb,CAbU,CASZa,QATY,CAUZC,CAVY,CAaVd,CAbU,CAUZc,SAVY,CAWZC,CAXY,CAaVf,CAbU,CAWZe,SAXY,CAYTC,CAZS,0BAaVhB,CAbU,cAecZ,OAAO,EAfrB,uBAePa,CAfO,MAeCgB,CAfD,QAiBYlB,UAAU,CAACC,CAAD,CAAQC,CAAR,CAjBtB,CAiBNE,CAjBM,GAiBNA,IAjBM,CAiBAC,CAjBA,GAiBAA,OAjBA,CAmBd,MACE,0CACE,GAAG,CAAEI,CADP,CAEE,SAAS,CAAEf,SAAS,CAAC,CAAEiB,IAAI,CAAJA,CAAF,CAAD,CAAW,CAACK,CAAD,CAAX,CAFtB,EAGMC,CAHN,EAKE,oBAAC,IAAD,EACE,SAAS,CAAEvB,SAAS,CAAC,SAAD,CAAY,CAAEU,IAAI,CAAJA,CAAF,CAAQe,IAAI,CAAEjB,CAAd,CAAZ,CADtB,CAEE,IAAI,CAAES,CAFR,CAGE,KAAK,oBACF,0BADE,WACwCD,CADxC,OAHP,EAOGL,CAPH,CALF,CAcE,oBAAC,aAAD,EACE,SAAS,CAAEX,SAAS,CAAC,QAAD,CAAW,CAC7BJ,UAAU,CAAC,CAAE8B,EAAE,CAAEzB,gBAAgB,CAACgB,CAAD,CAAtB,CAAD,CADmB,CAAX,CADtB,CAIE,QAAQ,CAAEC,CAJZ,CAKE,SAAS,CAAEC,CALb,CAME,QAAQ,CAAEC,CANZ,CAOE,SAAS,CAAEC,CAPb,CAQE,OAAO,CAAEG,CAAS,CAACG,MARrB,CASE,IAAI,CAAEnB,CATR,CAUE,IAAI,CAAES,CAVR,EAdF,CA4BH,CAjD8B,CAA1B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.canary--SpoilerButton{align-items:center;color:var(--color-control-typo-secondary);cursor:pointer;display:inline-flex;gap:var(--space-xs);justify-content:center;transition:color .3s}.canary--SpoilerButton:hover{color:var(--color-control-typo-secondary-hover)}.canary--SpoilerButton-Label.Text{color:currentColor}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import './SpoilerButton.css';
|
|
2
|
+
import { SpoilerButtonProps } from '../types';
|
|
3
|
+
export declare const cnSpoilerButton: import("@bem-react/classname").ClassNameFormatter;
|
|
4
|
+
export declare const SpoilerButton: import("../../../utils/types/PropsWithAsAttributes").ComponentWithAs<SpoilerButtonProps, "div">;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","lessIcon","lessLabel","moreIcon","moreLabel","className","open","as"];import"./SpoilerButton.css";import{AnimateIconSwitcher}from"@consta/icons/AnimateIconSwitcher";import React from"react";import{IconArrowDown}from"../../../icons/IconArrowDown";import{cnCanary}from"../../../utils/bem";import{forwardRefWithAs}from"../../../utils/types/PropsWithAsAttributes";import{Text}from"../../Text";import{defaultSpoilerPropSize}from"../types";export var cnSpoilerButton=cnCanary("SpoilerButton");var spoilerIconSizeMap={l:"m",m:"s",s:"s",xs:"xs"};export var SpoilerButton=forwardRefWithAs(function(a,b){var c=a.size,d=void 0===c?defaultSpoilerPropSize:c,e=a.lessIcon,f=a.lessLabel,g=void 0===f?"\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043C\u0435\u043D\u044C\u0448\u0435":f,h=a.moreIcon,i=void 0===h?IconArrowDown:h,j=a.moreLabel,k=void 0===j?"\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0431\u043E\u043B\u044C\u0448\u0435":j,l=a.className,m=a.open,n=a.as,o=void 0===n?"div":n,p=_objectWithoutProperties(a,_excluded);return React.createElement(o,Object.assign({ref:b,className:cnSpoilerButton({size:d},[l])},p),React.createElement(Text,{className:cnSpoilerButton("Label"),size:d,as:"span"},m?g:k),React.createElement(AnimateIconSwitcher,{startIcon:i,endIcon:e,active:m,endDirection:e?void 0:180,size:spoilerIconSizeMap[d],className:cnSpoilerButton("Icon")}))});
|
|
2
|
+
//# sourceMappingURL=SpoilerButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SpoilerButton.js","names":["AnimateIconSwitcher","React","IconArrowDown","cnCanary","forwardRefWithAs","Text","defaultSpoilerPropSize","cnSpoilerButton","spoilerIconSizeMap","l","m","s","xs","SpoilerButton","props","ref","size","lessIcon","lessLabel","moreIcon","moreLabel","className","open","as","otherProps"],"sources":["../../../../../../src/components/SpoilerCanary/SpoilerButton/SpoilerButton.tsx"],"sourcesContent":["import './SpoilerButton.css';\n\nimport { AnimateIconSwitcher } from '@consta/icons/AnimateIconSwitcher';\nimport React from 'react';\n\nimport { IconPropSize } from '##/icons/Icon';\nimport { IconArrowDown } from '##/icons/IconArrowDown';\nimport { cnCanary } from '##/utils/bem';\nimport { forwardRefWithAs } from '##/utils/types/PropsWithAsAttributes';\n\nimport { Text } from '../../Text';\nimport {\n defaultSpoilerPropSize,\n SpoilerButtonProps,\n SpoilerPropSize,\n} from '../types';\n\nexport const cnSpoilerButton = cnCanary('SpoilerButton');\n\nconst spoilerIconSizeMap: Record<SpoilerPropSize, IconPropSize> = {\n l: 'm',\n m: 's',\n s: 's',\n xs: 'xs',\n};\n\nexport const SpoilerButton = forwardRefWithAs<SpoilerButtonProps>(\n (props, ref) => {\n const {\n size = defaultSpoilerPropSize,\n lessIcon,\n lessLabel = 'Показать меньше',\n moreIcon = IconArrowDown,\n moreLabel = 'Показать больше',\n className,\n open,\n as = 'div',\n ...otherProps\n } = props;\n\n const Tag = as as string;\n\n return (\n <Tag\n ref={ref}\n className={cnSpoilerButton({ size }, [className])}\n {...otherProps}\n >\n <Text className={cnSpoilerButton('Label')} size={size} as=\"span\">\n {open ? lessLabel : moreLabel}\n </Text>\n <AnimateIconSwitcher\n startIcon={moreIcon}\n endIcon={lessIcon}\n active={open}\n endDirection={lessIcon ? undefined : 180}\n size={spoilerIconSizeMap[size]}\n className={cnSpoilerButton('Icon')}\n />\n </Tag>\n );\n },\n);\n"],"mappings":"kLAAA,4BAEA,OAASA,mBAAT,KAAoC,mCAApC,CACA,MAAOC,MAAP,KAAkB,OAAlB,CAGA,OAASC,aAAT,oCACA,OAASC,QAAT,0BACA,OAASC,gBAAT,kDAEA,OAASC,IAAT,kBACA,OACEC,sBADF,gBAMA,MAAO,IAAMC,gBAAe,CAAGJ,QAAQ,CAAC,eAAD,CAAhC,CAEP,GAAMK,mBAAyD,CAAG,CAChEC,CAAC,CAAE,GAD6D,CAEhEC,CAAC,CAAE,GAF6D,CAGhEC,CAAC,CAAE,GAH6D,CAIhEC,EAAE,CAAE,IAJ4D,CAAlE,CAOA,MAAO,IAAMC,cAAa,CAAGT,gBAAgB,CAC3C,SAACU,CAAD,CAAQC,CAAR,CAAgB,OAWVD,CAXU,CAEZE,IAFY,CAEZA,CAFY,YAELV,sBAFK,GAGZW,CAHY,CAWVH,CAXU,CAGZG,QAHY,GAWVH,CAXU,CAIZI,SAJY,CAIZA,CAJY,YAIA,uFAJA,KAWVJ,CAXU,CAKZK,QALY,CAKZA,CALY,YAKDjB,aALC,KAWVY,CAXU,CAMZM,SANY,CAMZA,CANY,YAMA,uFANA,GAOZC,CAPY,CAWVP,CAXU,CAOZO,SAPY,CAQZC,CARY,CAWVR,CAXU,CAQZQ,IARY,GAWVR,CAXU,CASZS,EATY,CASZA,CATY,YASP,KATO,GAUTC,CAVS,0BAWVV,CAXU,YAed,MACE,qBAHUS,CAGV,gBACE,GAAG,CAAER,CADP,CAEE,SAAS,CAAER,eAAe,CAAC,CAAES,IAAI,CAAJA,CAAF,CAAD,CAAW,CAACK,CAAD,CAAX,CAF5B,EAGMG,CAHN,EAKE,oBAAC,IAAD,EAAM,SAAS,CAAEjB,eAAe,CAAC,OAAD,CAAhC,CAA2C,IAAI,CAAES,CAAjD,CAAuD,EAAE,CAAC,MAA1D,EACGM,CAAI,CAAGJ,CAAH,CAAeE,CADtB,CALF,CAQE,oBAAC,mBAAD,EACE,SAAS,CAAED,CADb,CAEE,OAAO,CAAEF,CAFX,CAGE,MAAM,CAAEK,CAHV,CAIE,YAAY,CAAEL,CAAQ,QAAe,GAJvC,CAKE,IAAI,CAAET,kBAAkB,CAACQ,CAAD,CAL1B,CAME,SAAS,CAAET,eAAe,CAAC,MAAD,CAN5B,EARF,CAkBH,CAnC0C,CAAtC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './SpoilerButton';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/components/SpoilerCanary/SpoilerButton/index.ts"],"sourcesContent":["export * from './SpoilerButton';\n"],"mappings":"AAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/SpoilerCanary/index.ts"],"sourcesContent":["export * from './Spoiler';\nexport * from './SpoilerButton';\n"],"mappings":"AAAA,uBACA"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { IconComponent } from '@consta/icons/Icon';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { PropsWithHTMLAttributes } from "../../utils/types/PropsWithHTMLAttributes";
|
|
4
|
+
export declare const spolierPropSize: readonly ["m", "xs", "s", "l"];
|
|
5
|
+
export declare type SpoilerPropSize = typeof spolierPropSize[number];
|
|
6
|
+
export declare const defaultSpoilerPropSize: "m";
|
|
7
|
+
export declare type SpoilerModeProp = 'dots' | 'blur';
|
|
8
|
+
export declare type SpoilerButtonProps = {
|
|
9
|
+
size?: SpoilerPropSize;
|
|
10
|
+
lessLabel?: string;
|
|
11
|
+
lessIcon?: IconComponent;
|
|
12
|
+
moreLabel?: string;
|
|
13
|
+
moreIcon?: IconComponent;
|
|
14
|
+
open?: boolean;
|
|
15
|
+
};
|
|
16
|
+
export declare type SpoilerProps = Omit<PropsWithHTMLAttributes<{
|
|
17
|
+
size?: SpoilerPropSize;
|
|
18
|
+
lessLabel?: string;
|
|
19
|
+
lessIcon?: IconComponent;
|
|
20
|
+
moreLabel?: string;
|
|
21
|
+
moreIcon?: IconComponent;
|
|
22
|
+
}, HTMLDivElement>, 'children'> & ({
|
|
23
|
+
preview: React.ReactNode;
|
|
24
|
+
fullText: React.ReactNode;
|
|
25
|
+
maxHeight?: never;
|
|
26
|
+
children?: never;
|
|
27
|
+
} | {
|
|
28
|
+
preview?: never;
|
|
29
|
+
fullText?: never;
|
|
30
|
+
children: React.ReactNode;
|
|
31
|
+
maxHeight?: number;
|
|
32
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","names":["spolierPropSize","defaultSpoilerPropSize"],"sources":["../../../../../src/components/SpoilerCanary/types.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { PropsWithHTMLAttributes } from '##/utils/types/PropsWithHTMLAttributes';\n\nexport const spolierPropSize = ['m', 'xs', 's', 'l'] as const;\nexport type SpoilerPropSize = typeof spolierPropSize[number];\nexport const defaultSpoilerPropSize = spolierPropSize[0];\n\nexport type SpoilerModeProp = 'dots' | 'blur';\n\nexport type SpoilerButtonProps = {\n size?: SpoilerPropSize;\n lessLabel?: string;\n lessIcon?: IconComponent;\n moreLabel?: string;\n moreIcon?: IconComponent;\n open?: boolean;\n};\n\nexport type SpoilerProps = Omit<\n PropsWithHTMLAttributes<\n {\n size?: SpoilerPropSize;\n lessLabel?: string;\n lessIcon?: IconComponent;\n moreLabel?: string;\n moreIcon?: IconComponent;\n },\n HTMLDivElement\n >,\n 'children'\n> &\n (\n | {\n preview: React.ReactNode;\n fullText: React.ReactNode;\n maxHeight?: never;\n children?: never;\n }\n | {\n preview?: never;\n fullText?: never;\n children: React.ReactNode;\n maxHeight?: number;\n }\n );\n"],"mappings":"AAKA,MAAO,IAAMA,gBAAe,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAAxB,CAEP,MAAO,IAAMC,uBAAsB,CAAGD,eAAe,CAAC,CAAD,CAA9C"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","items","value","getItemLabel","getItemDisabled","getItemCompleted","getItemSkipped","onChange","className"];import"./Steps.css";import{IconArrowLeft}from"@consta/icons/IconArrowLeft";import{IconArrowRight}from"@consta/icons/IconArrowRight";import React,{forwardRef,useMemo,useRef,useState}from"react";import{useChoiceGroup}from"../../hooks/useChoiceGroup/useChoiceGroup";import{useOverflow}from"../../hooks/useOverflow/useOverflow";import{useScrollElements}from"../../hooks/useScrollElements/useScrollElements";import{cn}from"../../utils/bem";import{Button}from"../Button/Button";import{withDefaultGetters}from"./helper";import{StepsStep}from"./StepsStep/StepsStep";import{stepsDefaultSize}from"./types";export var cnSteps=cn("Steps");var StepsRender=function(a,b){var c=withDefaultGetters(a),d=c.size,e=void 0===d?stepsDefaultSize:d,f=c.items,g=c.value,h=c.getItemLabel,i=c.getItemDisabled,j=c.getItemCompleted,k=c.getItemSkipped,l=c.onChange,m=c.className,n=_objectWithoutProperties(c,_excluded),o=useState(-1),p=_slicedToArray(o,2),q=p[0],r=p[1],s=useChoiceGroup({value:g,getKey:h,callBack:l,multiple:!1}),t=s.getOnChange,u=s.getChecked;useMemo(function(){f.forEach(function(a,b){u(a)&&r(b)})},[f,g]);var v=useScrollElements(f),w=v.refs,x=v.scrollTo,y=useRef(null),z=useOverflow({currentRef:y}),A=function(a,b){b&&0!==q&&(t(f[q-1])(a),x(q-1)),b||q===f.length-1||(t(f[q+1])(a),x(q+1))};return React.createElement("div",Object.assign({ref:b,className:cnSteps({size:e},[m])},n),z&&React.createElement(Button,{iconLeft:function iconLeft(){return React.createElement(IconArrowLeft,{size:"xs"})},view:"clear",onlyIcon:!0,size:"xs",type:"button",className:cnSteps("Button",{side:"left"}),onClick:function onClick(a){return A(a,!0)}}),React.createElement("div",{ref:y,className:cnSteps("List")},f.map(function(a,b){return React.createElement(StepsStep,{key:b,ref:w[b],className:cnSteps("Item"),label:
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","items","value","getItemLabel","getItemDisabled","getItemCompleted","getItemSkipped","onChange","className"];import"./Steps.css";import{IconArrowLeft}from"@consta/icons/IconArrowLeft";import{IconArrowRight}from"@consta/icons/IconArrowRight";import React,{forwardRef,useMemo,useRef,useState}from"react";import{useChoiceGroup}from"../../hooks/useChoiceGroup/useChoiceGroup";import{useOverflow}from"../../hooks/useOverflow/useOverflow";import{useScrollElements}from"../../hooks/useScrollElements/useScrollElements";import{cn}from"../../utils/bem";import{Button}from"../Button/Button";import{withDefaultGetters}from"./helper";import{StepsStep}from"./StepsStep/StepsStep";import{stepsDefaultSize}from"./types";export var cnSteps=cn("Steps");var StepsRender=function(a,b){var c=withDefaultGetters(a),d=c.size,e=void 0===d?stepsDefaultSize:d,f=c.items,g=c.value,h=c.getItemLabel,i=c.getItemDisabled,j=c.getItemCompleted,k=c.getItemSkipped,l=c.onChange,m=c.className,n=_objectWithoutProperties(c,_excluded),o=useState(-1),p=_slicedToArray(o,2),q=p[0],r=p[1],s=useChoiceGroup({value:g,getKey:h,callBack:l,multiple:!1}),t=s.getOnChange,u=s.getChecked;useMemo(function(){f.forEach(function(a,b){u(a)&&r(b)})},[f,g]);var v=useScrollElements(f),w=v.refs,x=v.scrollTo,y=useRef(null),z=useOverflow({currentRef:y}),A=function(a,b){b&&0!==q&&(t(f[q-1])(a),x(q-1)),b||q===f.length-1||(t(f[q+1])(a),x(q+1))};return React.createElement("div",Object.assign({ref:b,className:cnSteps({size:e},[m])},n),z&&React.createElement(Button,{iconLeft:function iconLeft(){return React.createElement(IconArrowLeft,{size:"xs"})},view:"clear",onlyIcon:!0,size:"xs",type:"button",className:cnSteps("Button",{side:"left"}),onClick:function onClick(a){return A(a,!0)}}),React.createElement("div",{ref:y,className:cnSteps("List")},f.map(function(a,b){return React.createElement(StepsStep,{key:b,ref:w[b],className:cnSteps("Item"),label:h(a),step:b+1,size:e,active:q===b,onChange:t(a),completed:null===j||void 0===j?void 0:j(a),skipped:null===k||void 0===k?void 0:k(a),disabled:null===i||void 0===i?void 0:i(a)})})),z&&React.createElement(Button,{iconLeft:function iconLeft(){return React.createElement(IconArrowRight,{size:"xs"})},view:"clear",onlyIcon:!0,size:"xs",type:"button",className:cnSteps("Button",{side:"right"}),onClick:function onClick(a){return A(a,!1)}}))};export var Steps=forwardRef(StepsRender);export*from"./types";
|
|
2
2
|
//# sourceMappingURL=Steps.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Steps.js","names":["IconArrowLeft","IconArrowRight","React","forwardRef","useMemo","useRef","useState","useChoiceGroup","useOverflow","useScrollElements","cn","Button","withDefaultGetters","StepsStep","stepsDefaultSize","cnSteps","StepsRender","props","ref","size","items","value","getItemLabel","getItemDisabled","getItemCompleted","getItemSkipped","onChange","className","otherProps","activeStep","setActiveStep","getKey","callBack","multiple","getOnChange","getChecked","forEach","item","index","refs","scrollTo","stepsRef","isOverflow","currentRef","changeStep","e","prev","length","side","map","Steps"],"sources":["../../../../../src/components/Steps/Steps.tsx"],"sourcesContent":["import './Steps.css';\n\nimport { IconArrowLeft } from '@consta/icons/IconArrowLeft';\nimport { IconArrowRight } from '@consta/icons/IconArrowRight';\nimport React, { forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';\nimport { useOverflow } from '../../hooks/useOverflow/useOverflow';\nimport { useScrollElements } from '../../hooks/useScrollElements/useScrollElements';\nimport { cn } from '../../utils/bem';\nimport { Button } from '../Button/Button';\nimport { withDefaultGetters } from './helper';\nimport { StepsStep } from './StepsStep/StepsStep';\nimport { StepsCompnent, stepsDefaultSize, StepsProps } from './types';\n\nexport const cnSteps = cn('Steps');\n\nconst StepsRender = (props: StepsProps, ref: React.Ref<HTMLDivElement>) => {\n const {\n size = stepsDefaultSize,\n items,\n value,\n getItemLabel,\n getItemDisabled,\n getItemCompleted,\n getItemSkipped,\n onChange,\n className,\n ...otherProps\n } = withDefaultGetters(props);\n\n const [activeStep, setActiveStep] = useState<number>(-1);\n\n const { getOnChange, getChecked } = useChoiceGroup({\n value,\n getKey: getItemLabel,\n callBack: onChange,\n multiple: false,\n });\n\n useMemo(() => {\n items.forEach((item, index) => {\n if (getChecked(item)) {\n setActiveStep(index);\n }\n });\n }, [items, value]);\n\n const { refs, scrollTo } = useScrollElements(items);\n\n const stepsRef = useRef<HTMLDivElement>(null);\n\n const isOverflow = useOverflow({ currentRef: stepsRef });\n\n const changeStep = (e: React.MouseEvent, prev: boolean) => {\n if (prev && activeStep !== 0) {\n getOnChange(items[activeStep - 1])(e);\n scrollTo(activeStep - 1);\n }\n if (!prev && activeStep !== items.length - 1) {\n getOnChange(items[activeStep + 1])(e);\n scrollTo(activeStep + 1);\n }\n };\n\n return (\n <div ref={ref} className={cnSteps({ size }, [className])} {...otherProps}>\n {isOverflow && (\n <Button\n iconLeft={() => <IconArrowLeft size=\"xs\" />}\n view=\"clear\"\n onlyIcon\n size=\"xs\"\n type=\"button\"\n className={cnSteps('Button', { side: 'left' })}\n onClick={(e) => changeStep(e, true)}\n />\n )}\n <div ref={stepsRef} className={cnSteps('List')}>\n {items.map((item, index) => (\n <StepsStep\n key={index}\n ref={refs[index] as React.RefObject<HTMLButtonElement>}\n className={cnSteps('Item')}\n label={
|
|
1
|
+
{"version":3,"file":"Steps.js","names":["IconArrowLeft","IconArrowRight","React","forwardRef","useMemo","useRef","useState","useChoiceGroup","useOverflow","useScrollElements","cn","Button","withDefaultGetters","StepsStep","stepsDefaultSize","cnSteps","StepsRender","props","ref","size","items","value","getItemLabel","getItemDisabled","getItemCompleted","getItemSkipped","onChange","className","otherProps","activeStep","setActiveStep","getKey","callBack","multiple","getOnChange","getChecked","forEach","item","index","refs","scrollTo","stepsRef","isOverflow","currentRef","changeStep","e","prev","length","side","map","Steps"],"sources":["../../../../../src/components/Steps/Steps.tsx"],"sourcesContent":["import './Steps.css';\n\nimport { IconArrowLeft } from '@consta/icons/IconArrowLeft';\nimport { IconArrowRight } from '@consta/icons/IconArrowRight';\nimport React, { forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';\nimport { useOverflow } from '../../hooks/useOverflow/useOverflow';\nimport { useScrollElements } from '../../hooks/useScrollElements/useScrollElements';\nimport { cn } from '../../utils/bem';\nimport { Button } from '../Button/Button';\nimport { withDefaultGetters } from './helper';\nimport { StepsStep } from './StepsStep/StepsStep';\nimport { StepsCompnent, stepsDefaultSize, StepsProps } from './types';\n\nexport const cnSteps = cn('Steps');\n\nconst StepsRender = (props: StepsProps, ref: React.Ref<HTMLDivElement>) => {\n const {\n size = stepsDefaultSize,\n items,\n value,\n getItemLabel,\n getItemDisabled,\n getItemCompleted,\n getItemSkipped,\n onChange,\n className,\n ...otherProps\n } = withDefaultGetters(props);\n\n const [activeStep, setActiveStep] = useState<number>(-1);\n\n const { getOnChange, getChecked } = useChoiceGroup({\n value,\n getKey: getItemLabel,\n callBack: onChange,\n multiple: false,\n });\n\n useMemo(() => {\n items.forEach((item, index) => {\n if (getChecked(item)) {\n setActiveStep(index);\n }\n });\n }, [items, value]);\n\n const { refs, scrollTo } = useScrollElements(items);\n\n const stepsRef = useRef<HTMLDivElement>(null);\n\n const isOverflow = useOverflow({ currentRef: stepsRef });\n\n const changeStep = (e: React.MouseEvent, prev: boolean) => {\n if (prev && activeStep !== 0) {\n getOnChange(items[activeStep - 1])(e);\n scrollTo(activeStep - 1);\n }\n if (!prev && activeStep !== items.length - 1) {\n getOnChange(items[activeStep + 1])(e);\n scrollTo(activeStep + 1);\n }\n };\n\n return (\n <div ref={ref} className={cnSteps({ size }, [className])} {...otherProps}>\n {isOverflow && (\n <Button\n iconLeft={() => <IconArrowLeft size=\"xs\" />}\n view=\"clear\"\n onlyIcon\n size=\"xs\"\n type=\"button\"\n className={cnSteps('Button', { side: 'left' })}\n onClick={(e) => changeStep(e, true)}\n />\n )}\n <div ref={stepsRef} className={cnSteps('List')}>\n {items.map((item, index) => (\n <StepsStep\n key={index}\n ref={refs[index] as React.RefObject<HTMLButtonElement>}\n className={cnSteps('Item')}\n label={getItemLabel(item)}\n step={index + 1}\n size={size}\n active={activeStep === index}\n onChange={getOnChange(item)}\n completed={getItemCompleted?.(item)}\n skipped={getItemSkipped?.(item)}\n disabled={getItemDisabled?.(item)}\n />\n ))}\n </div>\n {isOverflow && (\n <Button\n iconLeft={() => <IconArrowRight size=\"xs\" />}\n view=\"clear\"\n onlyIcon\n size=\"xs\"\n type=\"button\"\n className={cnSteps('Button', { side: 'right' })}\n onClick={(e) => changeStep(e, false)}\n />\n )}\n </div>\n );\n};\n\nexport const Steps = forwardRef(StepsRender) as StepsCompnent;\n\nexport * from './types';\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.StepsStep{align-items:center;background-color:transparent;border:none;color:var(--color-control-typo-ghost);cursor:pointer;display:inline-flex;flex:1;font-family:var(--font);line-height:var(--line-height-text-s);padding:var(--space-xs) 0;position:relative;text-align:left;transition:color .2s,font-weight .2s;white-space:nowrap}.StepsStep
|
|
1
|
+
.StepsStep{align-items:center;background-color:transparent;border:none;color:var(--color-control-typo-ghost);cursor:pointer;display:inline-flex;flex:1;font-family:var(--font);font-size:var(--step-text-size);gap:var(--space-2xs);line-height:var(--line-height-text-s);line-height:var(--step-text-line-height);padding:var(--space-xs) var(--step-text-padding-right) var(--space-xs) 0;position:relative;text-align:left;transition:color .2s,font-weight .2s;white-space:nowrap}.StepsStep:after{background-color:var(--color-control-bg-ghost);border-radius:var(--control-radius);bottom:-2px;content:"";height:2px;position:absolute;transition:background-color .2s,opacity .2s;width:100%}.StepsStep:hover{color:var(--color-control-typo-ghost-hover)}.StepsStep:hover:after{background-color:var(--color-control-bg-ghost-hover)}.StepsStep:focus{outline:none}.StepsStep_size_s{--step-text-size:var(--size-text-s);--step-text-padding-right:var(--space-xs);--step-text-line-height:var(--line-height-text-xs)}.StepsStep_size_m{--step-text-padding-right:var(--space-s);--step-text-size:var(--size-text-m);--step-text-line-height:var(--line-height-text-s)}.StepsStep_size_l{--step-text-padding-right:var(--space-s);--step-text-size:var(--size-text-l);--step-text-line-height:var(--line-height-text-s)}.StepsStep_active,.StepsStep_completed,.StepsStep_skipped{color:var(--color-control-typo-secondary)}.StepsStep_active:after,.StepsStep_completed:after,.StepsStep_skipped:after{background-color:var(--color-control-bg-border-secondary);opacity:.5}.StepsStep_active:hover,.StepsStep_completed:hover,.StepsStep_skipped:hover{color:var(--color-control-typo-secondary-hover)}.StepsStep_active:hover:after,.StepsStep_completed:hover:after,.StepsStep_skipped:hover:after{background-color:var(--color-control-bg-border-secondary-hover);opacity:.5}.StepsStep_active{font-weight:var(--font-weight-text-semibold)}.StepsStep_active:after{opacity:1}.StepsStep_active:hover:after{opacity:1}.StepsStep_disabled{color:var(--color-control-typo-disable);cursor:unset}.StepsStep_disabled:after{background-color:var(--color-control-bg-disable)}.StepsStep_disabled:hover{color:var(--color-control-typo-disable)}.StepsStep_disabled:hover:after{background-color:var(--color-control-bg-disable)}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"./StepsStep.css";import{IconCheck}from"@consta/icons/IconCheck";import React from"react";import{cn}from"../../../utils/bem";import{getByMap}from"../../../utils/getByMap";export var cnStepsStep=cn("StepsStep");var sizeMap={m:"xs",l:"s"};export var StepsStep=React.forwardRef(function(a,b){var c=a.size,d=a.label,e=a.active,f=void 0!==e&&e,g=a.disabled,h=void 0!==g&&g,i=a.completed,j=void 0!==i&&i,k=a.skipped,l=a.onChange,m=a.
|
|
1
|
+
import"./StepsStep.css";import{IconCheck}from"@consta/icons/IconCheck";import React from"react";import{cn}from"../../../utils/bem";import{getByMap}from"../../../utils/getByMap";export var cnStepsStep=cn("StepsStep");var sizeMap={m:"xs",s:"xs",l:"s"};export var StepsStep=React.forwardRef(function(a,b){var c=a.size,d=a.label,e=a.active,f=void 0!==e&&e,g=a.disabled,h=void 0!==g&&g,i=a.completed,j=void 0!==i&&i,k=a.skipped,l=a.onChange,m=a.step,n=void 0===m?1:m,o=a.className,p=getByMap(sizeMap,c);return React.createElement("button",{ref:b,className:cnStepsStep({size:c,active:f,disabled:h,completed:j,skipped:void 0!==k&&k},[o]),type:"button",title:d,onClick:function clickHandler(a){f||h||(null===l||void 0===l?void 0:l(a))}},j?React.createElement(IconCheck,{className:cnStepsStep("Icon"),size:p}):n,React.createElement("span",null,d))});
|
|
2
2
|
//# sourceMappingURL=StepsStep.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepsStep.js","names":["IconCheck","React","cn","getByMap","cnStepsStep","sizeMap","m","l","StepsStep","forwardRef","props","ref","size","label","active","disabled","completed","skipped","onChange","className","iconSize","clickHandler","e"],"sources":["../../../../../../src/components/Steps/StepsStep/StepsStep.tsx"],"sourcesContent":["import './StepsStep.css';\n\nimport { IconPropSize } from '@consta/icons/Icon';\nimport { IconCheck } from '@consta/icons/IconCheck';\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { getByMap } from '../../../utils/getByMap';\nimport { StepsPropSize } from '../Steps';\n\nexport const cnStepsStep = cn('StepsStep');\n\ntype Props = {\n size: StepsPropSize;\n label: string;\n active?: boolean;\n disabled?: boolean;\n completed?: boolean;\n skipped?: boolean;\n onChange: React.MouseEventHandler<HTMLButtonElement>;\n className?: string;\n};\n\nconst sizeMap: Record<StepsPropSize, IconPropSize> = {\n m: 'xs',\n l: 's',\n};\n\nexport const StepsStep = React.forwardRef<HTMLButtonElement, Props>(\n (props, ref) => {\n const {\n size,\n label,\n active = false,\n disabled = false,\n completed = false,\n skipped = false,\n onChange,\n className,\n } = props;\n\n const clickHandler = (e: React.MouseEvent<HTMLButtonElement>) => {\n !active && !disabled && onChange?.(e);\n };\n const iconSize = getByMap(sizeMap, size);\n\n return (\n <button\n ref={ref}\n className={cnStepsStep({ size, active, disabled, completed, skipped }, [\n className,\n ])}\n type=\"button\"\n title={label}\n onClick={clickHandler}\n >\n {completed
|
|
1
|
+
{"version":3,"file":"StepsStep.js","names":["IconCheck","React","cn","getByMap","cnStepsStep","sizeMap","m","s","l","StepsStep","forwardRef","props","ref","size","label","active","disabled","completed","skipped","onChange","step","className","iconSize","clickHandler","e"],"sources":["../../../../../../src/components/Steps/StepsStep/StepsStep.tsx"],"sourcesContent":["import './StepsStep.css';\n\nimport { IconPropSize } from '@consta/icons/Icon';\nimport { IconCheck } from '@consta/icons/IconCheck';\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { getByMap } from '../../../utils/getByMap';\nimport { StepsPropSize } from '../Steps';\n\nexport const cnStepsStep = cn('StepsStep');\n\ntype Props = {\n size: StepsPropSize;\n label: string;\n step?: number;\n active?: boolean;\n disabled?: boolean;\n completed?: boolean;\n skipped?: boolean;\n onChange: React.MouseEventHandler<HTMLButtonElement>;\n className?: string;\n};\n\nconst sizeMap: Record<StepsPropSize, IconPropSize> = {\n m: 'xs',\n s: 'xs',\n l: 's',\n};\n\nexport const StepsStep = React.forwardRef<HTMLButtonElement, Props>(\n (props, ref) => {\n const {\n size,\n label,\n active = false,\n disabled = false,\n completed = false,\n skipped = false,\n onChange,\n step = 1,\n className,\n } = props;\n\n const clickHandler = (e: React.MouseEvent<HTMLButtonElement>) => {\n !active && !disabled && onChange?.(e);\n };\n const iconSize = getByMap(sizeMap, size);\n\n return (\n <button\n ref={ref}\n className={cnStepsStep({ size, active, disabled, completed, skipped }, [\n className,\n ])}\n type=\"button\"\n title={label}\n onClick={clickHandler}\n >\n {completed ? (\n <IconCheck className={cnStepsStep('Icon')} size={iconSize} />\n ) : (\n step\n )}\n <span>{label}</span>\n </button>\n );\n },\n);\n"],"mappings":"AAAA,wBAGA,OAASA,SAAT,KAA0B,yBAA1B,CACA,MAAOC,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0BACA,OAASC,QAAT,+BAGA,MAAO,IAAMC,YAAW,CAAGF,EAAE,CAAC,WAAD,CAAtB,CAcP,GAAMG,QAA4C,CAAG,CACnDC,CAAC,CAAE,IADgD,CAEnDC,CAAC,CAAE,IAFgD,CAGnDC,CAAC,CAAE,GAHgD,CAArD,CAMA,MAAO,IAAMC,UAAS,CAAGR,KAAK,CAACS,UAAN,CACvB,SAACC,CAAD,CAAQC,CAAR,CAAgB,IAEZC,EAFY,CAWVF,CAXU,CAEZE,IAFY,CAGZC,CAHY,CAWVH,CAXU,CAGZG,KAHY,GAWVH,CAXU,CAIZI,MAJY,CAIZA,CAJY,iBAWVJ,CAXU,CAKZK,QALY,CAKZA,CALY,iBAWVL,CAXU,CAMZM,SANY,CAMZA,CANY,iBAWVN,CAXU,CAOZO,OAPY,CAQZC,CARY,CAWVR,CAXU,CAQZQ,QARY,GAWVR,CAXU,CASZS,IATY,CASZA,CATY,YASL,CATK,GAUZC,CAVY,CAWVV,CAXU,CAUZU,SAVY,CAgBRC,CAAQ,CAAGnB,QAAQ,CAACE,OAAD,CAAUQ,CAAV,CAhBX,CAkBd,MACE,+BACE,GAAG,CAAED,CADP,CAEE,SAAS,CAAER,WAAW,CAAC,CAAES,IAAI,CAAJA,CAAF,CAAQE,MAAM,CAANA,CAAR,CAAgBC,QAAQ,CAARA,CAAhB,CAA0BC,SAAS,CAATA,CAA1B,CAAqCC,OAAO,cAA5C,CAAD,CAAiD,CACrEG,CADqE,CAAjD,CAFxB,CAKE,IAAI,CAAC,QALP,CAME,KAAK,CAAEP,CANT,CAOE,OAAO,CAbU,QAAfS,aAAe,CAACC,CAAD,CAA4C,CAC9DT,CAAD,EAAYC,CAAZ,UAAwBG,CAAxB,WAAwBA,CAAxB,QAAwBA,CAAQ,CAAGK,CAAH,CAAhC,CACD,CAIC,EASGP,CAAS,CACR,oBAAC,SAAD,EAAW,SAAS,CAAEb,WAAW,CAAC,MAAD,CAAjC,CAA2C,IAAI,CAAEkB,CAAjD,EADQ,CAGRF,CAZJ,CAcE,gCAAON,CAAP,CAdF,CAiBH,CArCsB,CAAlB"}
|
|
@@ -5,7 +5,7 @@ export declare function withDefaultGetters(props: StepsProps): {
|
|
|
5
5
|
getItemDisabled: StepsPropGetDisabled<StepsItemDefault>;
|
|
6
6
|
getItemCompleted: StepsPropGetCompleted<StepsItemDefault>;
|
|
7
7
|
getItemSkipped: StepsPropGetSkipped<StepsItemDefault>;
|
|
8
|
-
size?: "m" | "l" | undefined;
|
|
8
|
+
size?: "m" | "s" | "l" | undefined;
|
|
9
9
|
items: StepsItemDefault[];
|
|
10
10
|
value: StepsItemDefault;
|
|
11
11
|
onChange: import("./types").StepsPropOnChange<StepsItemDefault>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
|
|
3
|
-
export declare const stepsSizes: readonly ["m", "l"];
|
|
3
|
+
export declare const stepsSizes: readonly ["m", "s", "l"];
|
|
4
4
|
export declare type StepsPropSize = typeof stepsSizes[number];
|
|
5
5
|
export declare const stepsDefaultSize: StepsPropSize;
|
|
6
6
|
export declare type StepsPropOnChange<ITEM> = (props: {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export var stepsSizes=["m","l"];export var stepsDefaultSize=stepsSizes[0];
|
|
1
|
+
export var stepsSizes=["m","s","l"];export var stepsDefaultSize=stepsSizes[0];
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":["stepsSizes","stepsDefaultSize"],"sources":["../../../../../src/components/Steps/types.ts"],"sourcesContent":["import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport const stepsSizes = ['m', 'l'] as const;\nexport type StepsPropSize = typeof stepsSizes[number];\nexport const stepsDefaultSize: StepsPropSize = stepsSizes[0];\n\nexport type StepsPropOnChange<ITEM> = (props: {\n e: React.MouseEvent;\n value: ITEM;\n}) => void;\n\nexport type StepsPropGetLabel<ITEM> = (item: ITEM) => string;\nexport type StepsPropGetDisabled<ITEM> = (item: ITEM) => boolean | undefined;\nexport type StepsPropGetSkipped<ITEM> = (item: ITEM) => boolean | undefined;\nexport type StepsPropGetCompleted<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type StepsItemDefault = {\n label: string;\n disabled?: boolean;\n skipped?: boolean;\n completed?: boolean;\n};\n\nexport type StepsProps<ITEM = StepsItemDefault> = PropsWithHTMLAttributesAndRef<\n {\n size?: StepsPropSize;\n items: ITEM[];\n value: ITEM;\n getItemLabel?: StepsPropGetLabel<ITEM>;\n getItemDisabled?: StepsPropGetDisabled<ITEM>;\n getItemCompleted?: StepsPropGetCompleted<ITEM>;\n getItemSkipped?: StepsPropGetSkipped<ITEM>;\n onChange: StepsPropOnChange<ITEM>;\n className?: string;\n },\n HTMLDivElement\n> &\n (ITEM extends { label: StepsItemDefault['label'] }\n ? {}\n : {\n getItemLabel: StepsPropGetLabel<ITEM>;\n });\n\nexport type StepsCompnent = <ITEM>(\n props: StepsProps<ITEM>,\n) => React.ReactElement | null;\n"],"mappings":"AAEA,MAAO,IAAMA,WAAU,CAAG,CAAC,GAAD,CAAM,GAAN,CAAnB,CAEP,MAAO,IAAMC,iBAA+B,CAAGD,UAAU,CAAC,CAAD,CAAlD"}
|
|
1
|
+
{"version":3,"file":"types.js","names":["stepsSizes","stepsDefaultSize"],"sources":["../../../../../src/components/Steps/types.ts"],"sourcesContent":["import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport const stepsSizes = ['m', 's', 'l'] as const;\nexport type StepsPropSize = typeof stepsSizes[number];\nexport const stepsDefaultSize: StepsPropSize = stepsSizes[0];\n\nexport type StepsPropOnChange<ITEM> = (props: {\n e: React.MouseEvent;\n value: ITEM;\n}) => void;\n\nexport type StepsPropGetLabel<ITEM> = (item: ITEM) => string;\nexport type StepsPropGetDisabled<ITEM> = (item: ITEM) => boolean | undefined;\nexport type StepsPropGetSkipped<ITEM> = (item: ITEM) => boolean | undefined;\nexport type StepsPropGetCompleted<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type StepsItemDefault = {\n label: string;\n disabled?: boolean;\n skipped?: boolean;\n completed?: boolean;\n};\n\nexport type StepsProps<ITEM = StepsItemDefault> = PropsWithHTMLAttributesAndRef<\n {\n size?: StepsPropSize;\n items: ITEM[];\n value: ITEM;\n getItemLabel?: StepsPropGetLabel<ITEM>;\n getItemDisabled?: StepsPropGetDisabled<ITEM>;\n getItemCompleted?: StepsPropGetCompleted<ITEM>;\n getItemSkipped?: StepsPropGetSkipped<ITEM>;\n onChange: StepsPropOnChange<ITEM>;\n className?: string;\n },\n HTMLDivElement\n> &\n (ITEM extends { label: StepsItemDefault['label'] }\n ? {}\n : {\n getItemLabel: StepsPropGetLabel<ITEM>;\n });\n\nexport type StepsCompnent = <ITEM>(\n props: StepsProps<ITEM>,\n) => React.ReactElement | null;\n"],"mappings":"AAEA,MAAO,IAAMA,WAAU,CAAG,CAAC,GAAD,CAAM,GAAN,CAAW,GAAX,CAAnB,CAEP,MAAO,IAAMC,iBAA+B,CAAGD,UAAU,CAAC,CAAD,CAAlD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.TagBase{--tag-base-typo-color:var(--color-control-typo-ghost);--tag-base-half-space:calc(var(--tag-base-spaсe)/2);background:var(--tag-base-bg-color);border:none;border-radius:var(--control-radius);box-shadow:inset 0 0 0 1px var(--tag-base-border-color);color:var(--tag-base-typo-color);display:inline-flex;font-family:var(--font--primary);font-size:var(--tag-base-font-size);height:var(--tag-base-height);line-height:var(--tag-base-height);overflow:hidden;padding-bottom:0;padding-left:var(--tag-base-spaсe);padding-right:var(--tag-base-spaсe);padding-top:0;position:relative;text-decoration:none;transition:box-shadow .15s ease,background .15s ease,color .15s ease}.TagBase:focus,.TagBase:focus:hover{outline:none}.TagBase_view_stroked{--tag-base-border-color:var(--color-control-bg-border-default);--tag-base-bg-color:var(--color-bg-default)}.TagBase_view_filled{--tag-base-border-color:transparent;--tag-base-bg-color:var(--color-control-bg-ghost)}.TagBase_withAction{cursor:pointer}.TagBase_withAction.TagBase_view_stroked:hover{--tag-base-border-color:var(--color-control-bg-border-default-hover)}.TagBase_withAction.TagBase_view_filled:hover{--tag-base-bg-color:var(--color-control-bg-ghost-hover);--tag-base-border-color:transparent}.TagBase_size_xs{--tag-base-height:
|
|
1
|
+
.TagBase{--tag-base-typo-color:var(--color-control-typo-ghost);--tag-base-half-space:calc(var(--tag-base-spaсe)/2);background:var(--tag-base-bg-color);border:none;border-radius:var(--control-radius);box-shadow:inset 0 0 0 1px var(--tag-base-border-color);color:var(--tag-base-typo-color);display:inline-flex;font-family:var(--font--primary);font-size:var(--tag-base-font-size);height:var(--tag-base-height);line-height:var(--tag-base-height);overflow:hidden;padding-bottom:0;padding-left:var(--tag-base-spaсe);padding-right:var(--tag-base-spaсe);padding-top:0;position:relative;text-decoration:none;transition:box-shadow .15s ease,background .15s ease,color .15s ease}.TagBase:focus,.TagBase:focus:hover{outline:none}.TagBase_view_stroked{--tag-base-border-color:var(--color-control-bg-border-default);--tag-base-bg-color:var(--color-bg-default)}.TagBase_view_filled{--tag-base-border-color:transparent;--tag-base-bg-color:var(--color-control-bg-ghost)}.TagBase_withAction{cursor:pointer}.TagBase_withAction.TagBase_view_stroked:hover{--tag-base-border-color:var(--color-control-bg-border-default-hover)}.TagBase_withAction.TagBase_view_filled:hover{--tag-base-bg-color:var(--color-control-bg-ghost-hover);--tag-base-border-color:transparent}.TagBase_size_xs{--tag-base-height:var(--space-l);--tag-base-spaсe:var(--space-2xs);--tag-base-font-size:var(--size-text-2xs)}.TagBase_size_s{--tag-base-height:var(--space-xl);--tag-base-spaсe:var(--space-xs);--tag-base-font-size:var(--size-text-xs)}.TagBase_size_m{--tag-base-height:calc(var(--space-2xl) - var(--space-2xs));--tag-base-spaсe:var(--space-xs);--tag-base-font-size:var(--size-text-s)}.TagBase_size_l{--tag-base-height:var(--space-2xl);--tag-base-spaсe:var(--space-s);--tag-base-font-size:var(--size-text-m)}.TagBase_withCancel{padding-right:0}.TagBase_withIcon{padding-left:0}.TagBase[class*=TagBase_group]:before{background:var(--tag-base-group-color);content:"";height:100%;left:0;position:absolute;top:0;width:2px}.TagBase_group_1{--tag-base-group-color:#e92064}.TagBase_group_2{--tag-base-group-color:#b92eff}.TagBase_group_3{--tag-base-group-color:#1160ff}.TagBase_group_4{--tag-base-group-color:#0fafff}.TagBase_group_5{--tag-base-group-color:#02e2ff}.TagBase_group_6{--tag-base-group-color:#0c6}.TagBase_group_7{--tag-base-group-color:#b4d50b}.TagBase_group_8{--tag-base-group-color:#f5b800}.TagBase_group_9{--tag-base-group-color:#f56600}.TagBase-CancelButton{align-items:center;background:transparent;border:none;color:var(--color-control-typo-ghost);cursor:pointer;display:inline-flex;height:var(--tag-base-height);opacity:.4;outline:none;padding:0 var(--tag-base-half-space) 0 var(--tag-base-half-space);transition:opacity .15s ease}.TagBase-CancelButton:hover{background:transparent;opacity:1;outline:none}.TagBase-Label{height:var(--tag-base-height);line-height:var(--tag-base-height)}.TagBase-IconWrapper{align-items:center;display:inline-flex;height:var(--tag-base-height);padding:0 var(--tag-base-half-space) 0 var(--tag-base-half-space)}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className","type","value","onChange","id","name","rows","cols","minRows","maxRows","inputRef","maxLength","disabled","size","view","form","state","status","width","onBlur","onFocus","autoFocus","placeholder","leftSide","rightSide","autoComplete","withClearButton","incrementButtons","max","min","readOnly","required","step","tabIndex","ariaLabel","label","labelIcon","inputContainerRef","labelPosition","caption","iconSize","focused","onClick","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture"];import"./TextField.css";import{IconClose}from"@consta/icons/IconClose";import{IconEye}from"@consta/icons/IconEye";import{IconEyeClose}from"@consta/icons/IconEyeClose";import{IconSelect}from"@consta/icons/IconSelect";import{IconSelectOpen}from"@consta/icons/IconSelectOpen";import React,{forwardRef,useCallback,useEffect}from"react";import TextAreaAutoSize from"react-textarea-autosize";import{useFlag}from"../../hooks/useFlag/useFlag";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{useMutableRef}from"../../hooks/useMutableRef/useMutableRef";import{useSortSteps}from"../../hooks/useSortSteps/useSortSteps";import{cn}from"../../utils/bem";import{getByMap}from"../../utils/getByMap";import{isString}from"../../utils/type-guards";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{FieldCaption}from"../FieldCaption/FieldCaption";import{FieldLabel}from"../FieldLabel/FieldLabel";import{getIncrementFlag,getTypeForRender,getValueByStep,sizeMap}from"./helpers";import{textFieldPropFormDefault,textFieldPropSizeDefault,textFieldPropViewDefault,textFieldPropWidthDefault}from"./types";export var COMPONENT_NAME="TextField";export var cnTextField=cn("TextField");export var TextFieldRender=function(a,b){var c=React.useRef(null),d=React.useRef(null),e=usePropsHandler(COMPONENT_NAME,a,c),f=e.className,g=e.type,h=void 0===g?"text":g,i=e.value,j=e.onChange,k=e.id,l=e.name,m=e.rows,n=e.cols,o=e.minRows,p=e.maxRows,q=e.inputRef,r=e.maxLength,s=e.disabled,t=e.size,u=void 0===t?textFieldPropSizeDefault:t,v=e.view,w=void 0===v?textFieldPropViewDefault:v,x=e.form,y=void 0===x?textFieldPropFormDefault:x,z=e.state,A=e.status,B=e.width,C=void 0===B?textFieldPropWidthDefault:B,D=e.onBlur,E=e.onFocus,F=e.autoFocus,G=void 0!==F&&F,H=e.placeholder,I=e.leftSide,J=e.rightSide,K=e.autoComplete,L=e.withClearButton,M=e.incrementButtons,N=e.max,O=e.min,P=e.readOnly,Q=e.required,R=e.step,S=void 0===R?1:R,T=e.tabIndex,U=e.ariaLabel,V=e.label,W=e.labelIcon,X=e.inputContainerRef,Y=e.labelPosition,Z=void 0===Y?"top":Y,$=e.caption,_=e.iconSize,aa=e.focused,ba=e.onClick,ca=e.onKeyDown,da=e.onKeyDownCapture,ea=e.onKeyPress,fa=e.onKeyPressCapture,ga=e.onKeyUp,ha=e.onKeyUpCapture,ia=_objectWithoutProperties(e,_excluded),ja=useFlag(G),ka=_slicedToArray(ja,2),la=ka[0],ma=ka[1],na=useFlag(!1),oa=_slicedToArray(na,2),pa=oa[0],qa=oa[1],ra=useMutableRef(i),sa=useMutableRef(ba),ta=useMutableRef(j),ua=useCallback(function(a){var b;a.stopPropagation(),qa.toggle(),null===(b=d.current)||void 0===b?void 0:b.focus()},[]),va=I,wa=J,xa=isString(I),ya=isString(J),za=getByMap(sizeMap,u,_),Aa=useSortSteps({step:S,min:+O,max:+N}),Ba=useCallback(function(a){var b;s||(null===(b=ta.current)||void 0===b?void 0:b.call(ta,{e:a,id:k,name:l,value:a.target.value||null}))},[k,l,s]),Ca=function(a){ma.on(),null===E||void 0===E?void 0:E(a)},Da={className:cnTextField("Input"),value:i||"",onChange:Ba,maxLength:r,disabled:s,onBlur:function handleBlur(a){ma.off(),null===D||void 0===D?void 0:D(a)},onFocus:Ca,autoFocus:G,placeholder:H,autoComplete:K,readOnly:P,tabIndex:T,name:l,onKeyDownCapture:da,onKeyPress:ea,onKeyPressCapture:fa,onKeyUp:ga,onKeyUpCapture:ha,id:k?k.toString():"","aria-label":U},Ea=pa?IconEyeClose:IconEye,Fa={rows:m,cols:n,minRows:o||m,maxRows:p||m,ref:useForkRef([d,q])},Ga={type:getTypeForRender(h,pa),max:N,min:O,step:Array.isArray(Aa)?0:Aa,onKeyDown:function onKeyDown(a){var b=getIncrementFlag(a);if(null===ca||void 0===ca?void 0:ca(a),"number"===h&&"boolean"==typeof b&&!s){var c;a.preventDefault(),null===(c=ta.current)||void 0===c?void 0:c.call(ta,{e:a,id:k,name:l,value:getValueByStep(Aa,i,b,O,N)})}},ref:useForkRef([d,q])},Ha=useCallback(function(a){var b;null===(b=ta.current)||void 0===b?void 0:b.call(ta,{e:a,id:k,name:l,value:null})},[]),Ia=function(a){var b,c=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];null===(b=ta.current)||void 0===b?void 0:b.call(ta,{e:a,id:k,name:l,value:getValueByStep(Aa,i,c,O,N)})},Ja={onClick:useCallback(function(a){var b,c;null===(b=d.current)||void 0===b?void 0:b.focus(),null===(c=sa.current)||void 0===c?void 0:c.call(sa,a)},[])};return useEffect(function(){if("password"===h&&d.current){var a;d.current.selectionStart=(null===(a=ra.current)||void 0===a?void 0:a.length)||0}},[pa]),React.createElement("div",Object.assign({className:cnTextField({labelPosition:Z,size:u,view:w,width:C},[f]),ref:useForkRef([b,c])},Ja,ia),V&&React.createElement(FieldLabel,{icon:W,required:Q,className:cnTextField("Label",{labelPosition:Z}),size:u},V),React.createElement("div",{className:cnTextField("Body")},React.createElement("div",{ref:X,className:cnTextField("InputContainer",{view:w,form:y,status:A||z,disabled:s,type:h,focus:la||aa,withValue:!!i})},va&&React.createElement("div",{className:cnTextField("Side",{position:"left",type:xa?"string":"icon"}),title:"string"==typeof I?I:void 0},xa?I:React.createElement(va,{className:cnTextField("Icon"),size:za})),"textarea"===h?React.createElement(TextAreaAutoSize,Object.assign({},Da,Fa)):React.createElement("input",Object.assign({},Da,Ga)),"number"===h&&(void 0===M||M)&&React.createElement("div",{className:cnTextField("Counter")},React.createElement("button",{onFocus:Ca,onClick:function(a){return Ia(a,!0)},type:"button",className:cnTextField("CounterButton")},React.createElement(IconSelectOpen,{size:"xs"})),React.createElement("button",{onFocus:Ca,onClick:function(a){return Ia(a,!1)},type:"button",className:cnTextField("CounterButton")},React.createElement(IconSelect,{size:"xs"}))),i&&L&&"number"!==h&&React.createElement("button",{type:"button",disabled:s,onClick:Ha,className:cnTextField("ClearButton")},React.createElement(IconClose,{size:"xs",className:cnTextField("ClearButtonIcon")})),"password"===h&&i&&React.createElement("button",{className:cnTextField("ClearButton"),type:"button",onClick:ua},React.createElement(Ea,{className:cnTextField("Icon"),size:za})),wa&&"number"!==h&&"password"!==h&&React.createElement("div",{className:cnTextField("Side",{position:"right",type:ya?"string":"icon"}),title:"string"==typeof J?J:void 0},ya?J:React.createElement(wa,{className:cnTextField("Icon"),size:za}))),$&&React.createElement(FieldCaption,{className:cnTextField("Caption"),status:A||z},$)))};export var TextField=forwardRef(TextFieldRender);export*from"./types";
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className","type","value","onChange","id","name","rows","cols","minRows","maxRows","inputRef","maxLength","disabled","size","view","form","state","status","width","onBlur","onFocus","autoFocus","placeholder","leftSide","rightSide","autoComplete","withClearButton","incrementButtons","max","min","readOnly","required","step","tabIndex","ariaLabel","label","labelIcon","inputContainerRef","labelPosition","caption","iconSize","focused","onClick","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture"];import"./TextField.css";import{IconClose}from"@consta/icons/IconClose";import{IconEye}from"@consta/icons/IconEye";import{IconEyeClose}from"@consta/icons/IconEyeClose";import{IconSelect}from"@consta/icons/IconSelect";import{IconSelectOpen}from"@consta/icons/IconSelectOpen";import React,{forwardRef,useCallback,useEffect}from"react";import TextAreaAutoSize from"react-textarea-autosize";import{useFlag}from"../../hooks/useFlag/useFlag";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{useMutableRef}from"../../hooks/useMutableRef/useMutableRef";import{useSortSteps}from"../../hooks/useSortSteps/useSortSteps";import{cn}from"../../utils/bem";import{getByMap}from"../../utils/getByMap";import{isString}from"../../utils/type-guards";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{FieldCaption}from"../FieldCaption/FieldCaption";import{FieldLabel}from"../FieldLabel/FieldLabel";import{getIncrementFlag,getTypeForRender,getValueByStep,sizeMap}from"./helpers";import{textFieldPropFormDefault,textFieldPropSizeDefault,textFieldPropViewDefault,textFieldPropWidthDefault}from"./types";export var COMPONENT_NAME="TextField";export var cnTextField=cn("TextField");export var TextFieldRender=function(a,b){var c=React.useRef(null),d=React.useRef(null),e=usePropsHandler(COMPONENT_NAME,a,c),f=e.className,g=e.type,h=void 0===g?"text":g,i=e.value,j=e.onChange,k=e.id,l=e.name,m=e.rows,n=e.cols,o=e.minRows,p=e.maxRows,q=e.inputRef,r=e.maxLength,s=e.disabled,t=e.size,u=void 0===t?textFieldPropSizeDefault:t,v=e.view,w=void 0===v?textFieldPropViewDefault:v,x=e.form,y=void 0===x?textFieldPropFormDefault:x,z=e.state,A=e.status,B=e.width,C=void 0===B?textFieldPropWidthDefault:B,D=e.onBlur,E=e.onFocus,F=e.autoFocus,G=void 0!==F&&F,H=e.placeholder,I=e.leftSide,J=e.rightSide,K=e.autoComplete,L=e.withClearButton,M=e.incrementButtons,N=e.max,O=e.min,P=e.readOnly,Q=e.required,R=e.step,S=void 0===R?1:R,T=e.tabIndex,U=e.ariaLabel,V=e.label,W=e.labelIcon,X=e.inputContainerRef,Y=e.labelPosition,Z=void 0===Y?"top":Y,$=e.caption,_=e.iconSize,aa=e.focused,ba=e.onClick,ca=e.onKeyDown,da=e.onKeyDownCapture,ea=e.onKeyPress,fa=e.onKeyPressCapture,ga=e.onKeyUp,ha=e.onKeyUpCapture,ia=_objectWithoutProperties(e,_excluded),ja=useFlag(G),ka=_slicedToArray(ja,2),la=ka[0],ma=ka[1],na=useFlag(!1),oa=_slicedToArray(na,2),pa=oa[0],qa=oa[1],ra=useMutableRef(i),sa=useMutableRef(ba),ta=useMutableRef(j),ua=useCallback(function(a){var b;a.stopPropagation(),qa.toggle(),null===(b=d.current)||void 0===b?void 0:b.focus()},[]),va=I,wa=J,xa=isString(I),ya=isString(J),za=getByMap(sizeMap,u,_),Aa=useSortSteps({step:S,min:+O,max:+N}),Ba=useCallback(function(a){var b;s||(null===(b=ta.current)||void 0===b?void 0:b.call(ta,{e:a,id:k,name:l,value:a.target.value||null}))},[k,l,s]),Ca=function(a){ma.on(),null===E||void 0===E?void 0:E(a)},Da={className:cnTextField("Input"),value:i||"",onChange:Ba,maxLength:r,disabled:s,onBlur:function handleBlur(a){ma.off(),null===D||void 0===D?void 0:D(a)},onFocus:Ca,autoFocus:G,placeholder:H,autoComplete:K,readOnly:P,tabIndex:T,name:l,onKeyDownCapture:da,onKeyPress:ea,onKeyPressCapture:fa,onKeyUp:ga,onKeyUpCapture:ha,id:k?k.toString():"","aria-label":U},Ea=pa?IconEyeClose:IconEye,Fa={rows:m,cols:n,minRows:o||m,maxRows:p||m,ref:useForkRef([d,q])},Ga={type:getTypeForRender(h,pa),max:N,min:O,step:Array.isArray(Aa)?0:Aa,onKeyDown:function onKeyDown(a){var b=getIncrementFlag(a);if(null===ca||void 0===ca?void 0:ca(a),"number"===h&&"boolean"==typeof b&&!s){var c;a.preventDefault(),null===(c=ta.current)||void 0===c?void 0:c.call(ta,{e:a,id:k,name:l,value:getValueByStep(Aa,i,b,O,N)})}},ref:useForkRef([d,q])},Ha=useCallback(function(a){var b;null===(b=ta.current)||void 0===b?void 0:b.call(ta,{e:a,id:k,name:l,value:null})},[]),Ia=function(a){var b,c=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];null===(b=ta.current)||void 0===b?void 0:b.call(ta,{e:a,id:k,name:l,value:getValueByStep(Aa,i,c,O,N)})},Ja={onClick:useCallback(function(a){var b,c;null===(b=d.current)||void 0===b?void 0:b.focus(),null===(c=sa.current)||void 0===c?void 0:c.call(sa,a)},[])};return useEffect(function(){if("password"===h&&d.current){var a;d.current.selectionStart=(null===(a=ra.current)||void 0===a?void 0:a.length)||0}},[pa]),React.createElement("div",Object.assign({className:cnTextField({labelPosition:Z,size:u,view:w,width:C},[f]),ref:useForkRef([b,c])},Ja,ia),V&&React.createElement(FieldLabel,{as:"label",htmlFor:null===k||void 0===k?void 0:k.toString(),icon:W,required:Q,className:cnTextField("Label",{labelPosition:Z}),size:u},V),React.createElement("div",{className:cnTextField("Body")},React.createElement("div",{ref:X,className:cnTextField("InputContainer",{view:w,form:y,status:A||z,disabled:s,type:h,focus:la||aa,withValue:!!i})},va&&React.createElement("div",{className:cnTextField("Side",{position:"left",type:xa?"string":"icon"}),title:"string"==typeof I?I:void 0},xa?I:React.createElement(va,{className:cnTextField("Icon"),size:za})),"textarea"===h?React.createElement(TextAreaAutoSize,Object.assign({},Da,Fa)):React.createElement("input",Object.assign({},Da,Ga)),"number"===h&&(void 0===M||M)&&React.createElement("div",{className:cnTextField("Counter")},React.createElement("button",{onFocus:Ca,onClick:function(a){return Ia(a,!0)},type:"button",className:cnTextField("CounterButton")},React.createElement(IconSelectOpen,{size:"xs"})),React.createElement("button",{onFocus:Ca,onClick:function(a){return Ia(a,!1)},type:"button",className:cnTextField("CounterButton")},React.createElement(IconSelect,{size:"xs"}))),i&&L&&"number"!==h&&React.createElement("button",{type:"button",disabled:s,onClick:Ha,className:cnTextField("ClearButton")},React.createElement(IconClose,{size:"xs",className:cnTextField("ClearButtonIcon")})),"password"===h&&i&&React.createElement("button",{className:cnTextField("ClearButton"),type:"button",onClick:ua},React.createElement(Ea,{className:cnTextField("Icon"),size:za})),wa&&"number"!==h&&"password"!==h&&React.createElement("div",{className:cnTextField("Side",{position:"right",type:ya?"string":"icon"}),title:"string"==typeof J?J:void 0},ya?J:React.createElement(wa,{className:cnTextField("Icon"),size:za}))),$&&React.createElement(FieldCaption,{className:cnTextField("Caption"),status:A||z},$)))};export var TextField=forwardRef(TextFieldRender);export*from"./types";
|
|
2
2
|
//# sourceMappingURL=TextField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","names":["IconClose","IconEye","IconEyeClose","IconSelect","IconSelectOpen","React","forwardRef","useCallback","useEffect","TextAreaAutoSize","useFlag","useForkRef","useMutableRef","useSortSteps","cn","getByMap","isString","usePropsHandler","FieldCaption","FieldLabel","getIncrementFlag","getTypeForRender","getValueByStep","sizeMap","textFieldPropFormDefault","textFieldPropSizeDefault","textFieldPropViewDefault","textFieldPropWidthDefault","COMPONENT_NAME","cnTextField","TextFieldRender","props","ref","textFieldRef","useRef","inputRef","className","type","value","onChange","id","name","rows","cols","minRows","maxRows","inputRefProp","maxLength","disabled","size","view","form","state","status","width","onBlur","onFocus","autoFocus","placeholder","leftSide","rightSide","autoComplete","withClearButton","incrementButtons","max","min","readOnly","required","step","tabIndex","ariaLabel","label","labelIcon","inputContainerRef","labelPosition","caption","iconSizeProp","iconSize","focused","onClick","onKeyDownProp","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture","otherProps","focus","setFocus","passwordVisible","setPasswordVisuble","valueRef","onClickRef","onChangeRef","handleEyeClick","e","stopPropagation","toggle","current","LeftIcon","RightIcon","leftSideIsString","rightSideIsString","sortedSteps","handleChange","target","handleFocus","on","commonProps","handleBlur","off","toString","Eye","textareaProps","inputProps","Array","isArray","flag","preventDefault","handleClear","changeNumberValue","isIncrement","rootProps","selectionStart","length","withValue","position","TextField"],"sources":["../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import './TextField.css';\n\nimport { IconClose } from '@consta/icons/IconClose';\nimport { IconEye } from '@consta/icons/IconEye';\nimport { IconEyeClose } from '@consta/icons/IconEyeClose';\nimport { IconSelect } from '@consta/icons/IconSelect';\nimport { IconSelectOpen } from '@consta/icons/IconSelectOpen';\nimport React, { forwardRef, useCallback, useEffect } from 'react';\nimport TextAreaAutoSize from 'react-textarea-autosize';\n\nimport { useFlag } from '../../hooks/useFlag/useFlag';\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { useMutableRef } from '../../hooks/useMutableRef/useMutableRef';\nimport { useSortSteps } from '../../hooks/useSortSteps/useSortSteps';\nimport { cn } from '../../utils/bem';\nimport { getByMap } from '../../utils/getByMap';\nimport { isString } from '../../utils/type-guards';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport { FieldCaption } from '../FieldCaption/FieldCaption';\nimport { FieldLabel } from '../FieldLabel/FieldLabel';\nimport {\n getIncrementFlag,\n getTypeForRender,\n getValueByStep,\n sizeMap,\n} from './helpers';\nimport {\n TextFieldComponent,\n textFieldPropFormDefault,\n TextFieldProps,\n textFieldPropSizeDefault,\n textFieldPropViewDefault,\n textFieldPropWidthDefault,\n} from './types';\n\nexport const COMPONENT_NAME = 'TextField' as const;\nexport const cnTextField = cn(COMPONENT_NAME);\n\nexport const TextFieldRender = <TYPE extends string>(\n props: TextFieldProps<TYPE>,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const textFieldRef = React.useRef<HTMLDivElement>(null);\n const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n\n const {\n className,\n type = 'text',\n value,\n onChange,\n id,\n name,\n rows,\n cols,\n minRows,\n maxRows,\n inputRef: inputRefProp,\n maxLength,\n disabled,\n size = textFieldPropSizeDefault,\n view = textFieldPropViewDefault,\n form = textFieldPropFormDefault,\n state,\n status,\n width = textFieldPropWidthDefault,\n onBlur,\n onFocus,\n autoFocus = false,\n placeholder,\n leftSide,\n rightSide,\n autoComplete,\n withClearButton,\n incrementButtons = true,\n max,\n min,\n readOnly,\n required,\n step = 1,\n tabIndex,\n ariaLabel,\n label,\n labelIcon,\n inputContainerRef,\n labelPosition = 'top',\n caption,\n iconSize: iconSizeProp,\n focused,\n onClick,\n // onkey props\n onKeyDown: onKeyDownProp,\n onKeyDownCapture,\n onKeyPress,\n onKeyPressCapture,\n onKeyUp,\n onKeyUpCapture,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, props, textFieldRef);\n const [focus, setFocus] = useFlag(autoFocus);\n const [passwordVisible, setPasswordVisuble] = useFlag(false);\n\n const valueRef = useMutableRef(value);\n const onClickRef = useMutableRef(onClick);\n const onChangeRef = useMutableRef(onChange);\n\n const handleEyeClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n e.stopPropagation();\n setPasswordVisuble.toggle();\n inputRef.current?.focus();\n },\n [],\n );\n\n const textarea = type === 'textarea';\n const LeftIcon = leftSide;\n const RightIcon = rightSide;\n const leftSideIsString = isString(leftSide);\n const rightSideIsString = isString(rightSide);\n const iconSize = getByMap(sizeMap, size, iconSizeProp);\n\n const sortedSteps = useSortSteps({\n step,\n min: Number(min),\n max: Number(max),\n });\n\n const handleChange: React.ChangeEventHandler<\n HTMLInputElement | HTMLTextAreaElement\n > = useCallback(\n (e) => {\n !disabled &&\n onChangeRef.current?.({ e, id, name, value: e.target.value || null });\n },\n [id, name, disabled],\n );\n\n const handleBlur: React.FocusEventHandler<HTMLElement> = (e) => {\n setFocus.off();\n onBlur?.(e);\n };\n\n const handleFocus: React.FocusEventHandler<HTMLElement> = (e) => {\n setFocus.on();\n onFocus?.(e);\n };\n\n const commonProps = {\n 'className': cnTextField('Input'),\n 'value': value || '',\n 'onChange': handleChange,\n maxLength,\n disabled,\n 'onBlur': handleBlur,\n 'onFocus': handleFocus,\n autoFocus,\n placeholder,\n autoComplete,\n readOnly,\n tabIndex,\n name,\n onKeyDownCapture,\n onKeyPress,\n onKeyPressCapture,\n onKeyUp,\n onKeyUpCapture,\n 'id': id ? id.toString() : '',\n 'aria-label': ariaLabel,\n };\n\n const Eye = passwordVisible ? IconEyeClose : IconEye;\n\n const onKeyDown = (e: React.KeyboardEvent) => {\n const flag = getIncrementFlag(e);\n onKeyDownProp?.(e);\n if (type === 'number' && typeof flag === 'boolean' && !disabled) {\n e.preventDefault();\n onChangeRef.current?.({\n e,\n id,\n name,\n value: getValueByStep(sortedSteps, value, flag, min, max),\n });\n }\n };\n\n const textareaProps = {\n rows,\n cols,\n minRows: minRows || rows,\n maxRows: maxRows || rows,\n ref: useForkRef([inputRef, inputRefProp]) as (\n node: HTMLTextAreaElement,\n ) => void,\n };\n\n const inputProps = {\n type: getTypeForRender(type, passwordVisible),\n max,\n min,\n step: !Array.isArray(sortedSteps) ? sortedSteps : 0,\n onKeyDown,\n ref: useForkRef([\n inputRef,\n inputRefProp,\n ]) as React.RefCallback<HTMLInputElement>,\n };\n\n const handleClear = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {\n onChangeRef.current?.({\n e,\n id,\n name,\n value: null,\n });\n }, []);\n\n const changeNumberValue = (\n e: React.MouseEvent<HTMLButtonElement>,\n isIncrement = true,\n ) => {\n onChangeRef.current?.({\n e,\n id,\n name,\n value: getValueByStep(sortedSteps, value, isIncrement, min, max),\n });\n };\n\n const rootProps = {\n onClick: useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n inputRef.current?.focus();\n onClickRef.current?.(e);\n }, []),\n };\n\n // при смене passwordVible, перемещаем курсор в конец строки\n useEffect(() => {\n if (type === 'password' && inputRef.current) {\n inputRef.current.selectionStart = valueRef.current?.length || 0;\n }\n }, [passwordVisible]);\n\n return (\n <div\n className={cnTextField({ labelPosition, size, view, width }, [className])}\n ref={useForkRef([ref, textFieldRef])}\n {...rootProps}\n {...otherProps}\n >\n {label && (\n <FieldLabel\n icon={labelIcon}\n required={required}\n className={cnTextField('Label', { labelPosition })}\n size={size}\n >\n {label}\n </FieldLabel>\n )}\n <div className={cnTextField('Body')}>\n <div\n ref={inputContainerRef}\n className={cnTextField('InputContainer', {\n view,\n form,\n status: status || state,\n disabled,\n type,\n focus: focus || focused,\n withValue: !!value,\n })}\n >\n {LeftIcon && (\n <div\n className={cnTextField('Side', {\n position: 'left',\n type: leftSideIsString ? 'string' : 'icon',\n })}\n title={typeof leftSide === 'string' ? leftSide : undefined}\n >\n {leftSideIsString ? (\n leftSide\n ) : (\n <LeftIcon className={cnTextField('Icon')} size={iconSize} />\n )}\n </div>\n )}\n {textarea ? (\n <TextAreaAutoSize {...commonProps} {...textareaProps} />\n ) : (\n <input {...commonProps} {...inputProps} />\n )}\n\n {type === 'number' && incrementButtons && (\n <div className={cnTextField('Counter')}>\n <button\n onFocus={handleFocus}\n onClick={(e) => changeNumberValue(e, true)}\n type=\"button\"\n className={cnTextField('CounterButton')}\n >\n <IconSelectOpen size=\"xs\" />\n </button>\n <button\n onFocus={handleFocus}\n onClick={(e) => changeNumberValue(e, false)}\n type=\"button\"\n className={cnTextField('CounterButton')}\n >\n <IconSelect size=\"xs\" />\n </button>\n </div>\n )}\n\n {value && withClearButton && type !== 'number' && (\n <button\n type=\"button\"\n disabled={disabled}\n onClick={handleClear}\n className={cnTextField('ClearButton')}\n >\n <IconClose size=\"xs\" className={cnTextField('ClearButtonIcon')} />\n </button>\n )}\n\n {type === 'password' && value && (\n <button\n className={cnTextField('ClearButton')}\n type=\"button\"\n onClick={handleEyeClick}\n >\n <Eye className={cnTextField('Icon')} size={iconSize} />\n </button>\n )}\n\n {RightIcon && type !== 'number' && type !== 'password' && (\n <div\n className={cnTextField('Side', {\n position: 'right',\n type: rightSideIsString ? 'string' : 'icon',\n })}\n title={typeof rightSide === 'string' ? rightSide : undefined}\n >\n {rightSideIsString ? (\n rightSide\n ) : (\n <RightIcon className={cnTextField('Icon')} size={iconSize} />\n )}\n </div>\n )}\n </div>\n {caption && (\n <FieldCaption\n className={cnTextField('Caption')}\n status={status || state}\n >\n {caption}\n </FieldCaption>\n )}\n </div>\n </div>\n );\n};\n\nexport const TextField = forwardRef(TextFieldRender) as TextFieldComponent;\nexport * from './types';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TextField.js","names":["IconClose","IconEye","IconEyeClose","IconSelect","IconSelectOpen","React","forwardRef","useCallback","useEffect","TextAreaAutoSize","useFlag","useForkRef","useMutableRef","useSortSteps","cn","getByMap","isString","usePropsHandler","FieldCaption","FieldLabel","getIncrementFlag","getTypeForRender","getValueByStep","sizeMap","textFieldPropFormDefault","textFieldPropSizeDefault","textFieldPropViewDefault","textFieldPropWidthDefault","COMPONENT_NAME","cnTextField","TextFieldRender","props","ref","textFieldRef","useRef","inputRef","className","type","value","onChange","id","name","rows","cols","minRows","maxRows","inputRefProp","maxLength","disabled","size","view","form","state","status","width","onBlur","onFocus","autoFocus","placeholder","leftSide","rightSide","autoComplete","withClearButton","incrementButtons","max","min","readOnly","required","step","tabIndex","ariaLabel","label","labelIcon","inputContainerRef","labelPosition","caption","iconSizeProp","iconSize","focused","onClick","onKeyDownProp","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture","otherProps","focus","setFocus","passwordVisible","setPasswordVisuble","valueRef","onClickRef","onChangeRef","handleEyeClick","e","stopPropagation","toggle","current","LeftIcon","RightIcon","leftSideIsString","rightSideIsString","sortedSteps","handleChange","target","handleFocus","on","commonProps","handleBlur","off","toString","Eye","textareaProps","inputProps","Array","isArray","flag","preventDefault","handleClear","changeNumberValue","isIncrement","rootProps","selectionStart","length","withValue","position","TextField"],"sources":["../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import './TextField.css';\n\nimport { IconClose } from '@consta/icons/IconClose';\nimport { IconEye } from '@consta/icons/IconEye';\nimport { IconEyeClose } from '@consta/icons/IconEyeClose';\nimport { IconSelect } from '@consta/icons/IconSelect';\nimport { IconSelectOpen } from '@consta/icons/IconSelectOpen';\nimport React, { forwardRef, useCallback, useEffect } from 'react';\nimport TextAreaAutoSize from 'react-textarea-autosize';\n\nimport { useFlag } from '../../hooks/useFlag/useFlag';\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { useMutableRef } from '../../hooks/useMutableRef/useMutableRef';\nimport { useSortSteps } from '../../hooks/useSortSteps/useSortSteps';\nimport { cn } from '../../utils/bem';\nimport { getByMap } from '../../utils/getByMap';\nimport { isString } from '../../utils/type-guards';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport { FieldCaption } from '../FieldCaption/FieldCaption';\nimport { FieldLabel } from '../FieldLabel/FieldLabel';\nimport {\n getIncrementFlag,\n getTypeForRender,\n getValueByStep,\n sizeMap,\n} from './helpers';\nimport {\n TextFieldComponent,\n textFieldPropFormDefault,\n TextFieldProps,\n textFieldPropSizeDefault,\n textFieldPropViewDefault,\n textFieldPropWidthDefault,\n} from './types';\n\nexport const COMPONENT_NAME = 'TextField' as const;\nexport const cnTextField = cn(COMPONENT_NAME);\n\nexport const TextFieldRender = <TYPE extends string>(\n props: TextFieldProps<TYPE>,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const textFieldRef = React.useRef<HTMLDivElement>(null);\n const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n\n const {\n className,\n type = 'text',\n value,\n onChange,\n id,\n name,\n rows,\n cols,\n minRows,\n maxRows,\n inputRef: inputRefProp,\n maxLength,\n disabled,\n size = textFieldPropSizeDefault,\n view = textFieldPropViewDefault,\n form = textFieldPropFormDefault,\n state,\n status,\n width = textFieldPropWidthDefault,\n onBlur,\n onFocus,\n autoFocus = false,\n placeholder,\n leftSide,\n rightSide,\n autoComplete,\n withClearButton,\n incrementButtons = true,\n max,\n min,\n readOnly,\n required,\n step = 1,\n tabIndex,\n ariaLabel,\n label,\n labelIcon,\n inputContainerRef,\n labelPosition = 'top',\n caption,\n iconSize: iconSizeProp,\n focused,\n onClick,\n // onkey props\n onKeyDown: onKeyDownProp,\n onKeyDownCapture,\n onKeyPress,\n onKeyPressCapture,\n onKeyUp,\n onKeyUpCapture,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, props, textFieldRef);\n const [focus, setFocus] = useFlag(autoFocus);\n const [passwordVisible, setPasswordVisuble] = useFlag(false);\n\n const valueRef = useMutableRef(value);\n const onClickRef = useMutableRef(onClick);\n const onChangeRef = useMutableRef(onChange);\n\n const handleEyeClick = useCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n e.stopPropagation();\n setPasswordVisuble.toggle();\n inputRef.current?.focus();\n },\n [],\n );\n\n const textarea = type === 'textarea';\n const LeftIcon = leftSide;\n const RightIcon = rightSide;\n const leftSideIsString = isString(leftSide);\n const rightSideIsString = isString(rightSide);\n const iconSize = getByMap(sizeMap, size, iconSizeProp);\n\n const sortedSteps = useSortSteps({\n step,\n min: Number(min),\n max: Number(max),\n });\n\n const handleChange: React.ChangeEventHandler<\n HTMLInputElement | HTMLTextAreaElement\n > = useCallback(\n (e) => {\n !disabled &&\n onChangeRef.current?.({ e, id, name, value: e.target.value || null });\n },\n [id, name, disabled],\n );\n\n const handleBlur: React.FocusEventHandler<HTMLElement> = (e) => {\n setFocus.off();\n onBlur?.(e);\n };\n\n const handleFocus: React.FocusEventHandler<HTMLElement> = (e) => {\n setFocus.on();\n onFocus?.(e);\n };\n\n const commonProps = {\n 'className': cnTextField('Input'),\n 'value': value || '',\n 'onChange': handleChange,\n maxLength,\n disabled,\n 'onBlur': handleBlur,\n 'onFocus': handleFocus,\n autoFocus,\n placeholder,\n autoComplete,\n readOnly,\n tabIndex,\n name,\n onKeyDownCapture,\n onKeyPress,\n onKeyPressCapture,\n onKeyUp,\n onKeyUpCapture,\n 'id': id ? id.toString() : '',\n 'aria-label': ariaLabel,\n };\n\n const Eye = passwordVisible ? IconEyeClose : IconEye;\n\n const onKeyDown = (e: React.KeyboardEvent) => {\n const flag = getIncrementFlag(e);\n onKeyDownProp?.(e);\n if (type === 'number' && typeof flag === 'boolean' && !disabled) {\n e.preventDefault();\n onChangeRef.current?.({\n e,\n id,\n name,\n value: getValueByStep(sortedSteps, value, flag, min, max),\n });\n }\n };\n\n const textareaProps = {\n rows,\n cols,\n minRows: minRows || rows,\n maxRows: maxRows || rows,\n ref: useForkRef([inputRef, inputRefProp]) as (\n node: HTMLTextAreaElement,\n ) => void,\n };\n\n const inputProps = {\n type: getTypeForRender(type, passwordVisible),\n max,\n min,\n step: !Array.isArray(sortedSteps) ? sortedSteps : 0,\n onKeyDown,\n ref: useForkRef([\n inputRef,\n inputRefProp,\n ]) as React.RefCallback<HTMLInputElement>,\n };\n\n const handleClear = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {\n onChangeRef.current?.({\n e,\n id,\n name,\n value: null,\n });\n }, []);\n\n const changeNumberValue = (\n e: React.MouseEvent<HTMLButtonElement>,\n isIncrement = true,\n ) => {\n onChangeRef.current?.({\n e,\n id,\n name,\n value: getValueByStep(sortedSteps, value, isIncrement, min, max),\n });\n };\n\n const rootProps = {\n onClick: useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n inputRef.current?.focus();\n onClickRef.current?.(e);\n }, []),\n };\n\n // при смене passwordVible, перемещаем курсор в конец строки\n useEffect(() => {\n if (type === 'password' && inputRef.current) {\n inputRef.current.selectionStart = valueRef.current?.length || 0;\n }\n }, [passwordVisible]);\n\n return (\n <div\n className={cnTextField({ labelPosition, size, view, width }, [className])}\n ref={useForkRef([ref, textFieldRef])}\n {...rootProps}\n {...otherProps}\n >\n {label && (\n <FieldLabel\n as=\"label\"\n htmlFor={id?.toString()}\n icon={labelIcon}\n required={required}\n className={cnTextField('Label', { labelPosition })}\n size={size}\n >\n {label}\n </FieldLabel>\n )}\n <div className={cnTextField('Body')}>\n <div\n ref={inputContainerRef}\n className={cnTextField('InputContainer', {\n view,\n form,\n status: status || state,\n disabled,\n type,\n focus: focus || focused,\n withValue: !!value,\n })}\n >\n {LeftIcon && (\n <div\n className={cnTextField('Side', {\n position: 'left',\n type: leftSideIsString ? 'string' : 'icon',\n })}\n title={typeof leftSide === 'string' ? leftSide : undefined}\n >\n {leftSideIsString ? (\n leftSide\n ) : (\n <LeftIcon className={cnTextField('Icon')} size={iconSize} />\n )}\n </div>\n )}\n {textarea ? (\n <TextAreaAutoSize {...commonProps} {...textareaProps} />\n ) : (\n <input {...commonProps} {...inputProps} />\n )}\n\n {type === 'number' && incrementButtons && (\n <div className={cnTextField('Counter')}>\n <button\n onFocus={handleFocus}\n onClick={(e) => changeNumberValue(e, true)}\n type=\"button\"\n className={cnTextField('CounterButton')}\n >\n <IconSelectOpen size=\"xs\" />\n </button>\n <button\n onFocus={handleFocus}\n onClick={(e) => changeNumberValue(e, false)}\n type=\"button\"\n className={cnTextField('CounterButton')}\n >\n <IconSelect size=\"xs\" />\n </button>\n </div>\n )}\n\n {value && withClearButton && type !== 'number' && (\n <button\n type=\"button\"\n disabled={disabled}\n onClick={handleClear}\n className={cnTextField('ClearButton')}\n >\n <IconClose size=\"xs\" className={cnTextField('ClearButtonIcon')} />\n </button>\n )}\n\n {type === 'password' && value && (\n <button\n className={cnTextField('ClearButton')}\n type=\"button\"\n onClick={handleEyeClick}\n >\n <Eye className={cnTextField('Icon')} size={iconSize} />\n </button>\n )}\n\n {RightIcon && type !== 'number' && type !== 'password' && (\n <div\n className={cnTextField('Side', {\n position: 'right',\n type: rightSideIsString ? 'string' : 'icon',\n })}\n title={typeof rightSide === 'string' ? rightSide : undefined}\n >\n {rightSideIsString ? (\n rightSide\n ) : (\n <RightIcon className={cnTextField('Icon')} size={iconSize} />\n )}\n </div>\n )}\n </div>\n {caption && (\n <FieldCaption\n className={cnTextField('Caption')}\n status={status || state}\n >\n {caption}\n </FieldCaption>\n )}\n </div>\n </div>\n );\n};\n\nexport const TextField = forwardRef(TextFieldRender) as TextFieldComponent;\nexport * from './types';\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Tooltip{--tooltip-bg-color:var(--color-bg-default);--popover-arrow-bg-color:var(--tooltip-bg-color)
|
|
1
|
+
.Tooltip{--tooltip-bg-color:var(--color-bg-default);--popover-arrow-bg-color:var(--tooltip-bg-color)}.Tooltip_status_alert{--tooltip-bg-color:var(--color-bg-alert)}.Tooltip_status_warning{--tooltip-bg-color:var(--color-bg-warning)}.Tooltip_status_success{--tooltip-bg-color:var(--color-bg-success)}.Tooltip_status_normal{--tooltip-bg-color:var(--color-bg-normal)}.Tooltip[class*=status] .Tooltip-Content{text-shadow:var(--shadow-group)}.Tooltip-Background{background:var(--tooltip-bg-color);border-radius:var(--control-radius);bottom:0;box-shadow:var(--shadow-layer);left:0;position:absolute;right:0;top:0}.Tooltip-Content{box-sizing:border-box;padding:var(--space-xs);position:relative;width:100%}.Tooltip-Content_size_s{max-width:150px}.Tooltip-Content_size_m{max-width:260px}.Tooltip-Content_size_l{max-width:400px}
|
|
@@ -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","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)})},
|
|
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=p?"".concat(p,"-input"):p,ua=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)})},va=useForkRef([la,Q]),wa=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 ua({item:a,handleRemove:qa(a)})}),isNotMultipleParams(a)&&a.value&&ua({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,id:ta,onFocus:ia,onBlur:ja,"aria-label":o,onChange:na,ref:va,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,id:ta,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})},wa()):wa())),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
|