@itcase/ui 1.8.123 → 1.8.124

package/dist/cjs/components/Segmented/stories/__mock__.js

@@ -1,9 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('../../../../tslib.es6_cjs_CCZ3TN_7.js');
 var _default = require('@itcase/icons/default');
 
-var segmentedMock = {
+const segmentedMock = {
     activeSegment: {
         value: 1,
     },
@@ -34,17 +33,31 @@ var segmentedMock = {
         },
     ],
 };
-var segmentedLabelMock = segmentedMock === null || segmentedMock === void 0 ? void 0 : segmentedMock.segments.map(function (segment) { return ({
+const segmentedLabelMock = segmentedMock?.segments.map((segment) => ({
     label: segment.label,
     value: segment.value,
-}); });
-var segmentedIconMock = segmentedMock === null || segmentedMock === void 0 ? void 0 : segmentedMock.segments.map(function (segment) { return ({
+}));
+const segmentedIconMock = segmentedMock?.segments
+    .map((segment) => ({
     iconBefore: segment.iconBefore,
-}); }).slice(3);
-var segmentedMockSize = {
-    14: segmentedMock.segments.map(function (segment) { return (tslib_es6.__assign(tslib_es6.__assign({}, segment), { iconAfter: _default.icons14.Placeholder.Default, iconBefore: _default.icons14.Placeholder.Default })); }),
-    16: segmentedMock.segments.map(function (segment) { return (tslib_es6.__assign(tslib_es6.__assign({}, segment), { iconAfter: _default.icons16.Placeholder.Default, iconBefore: _default.icons16.Placeholder.Default })); }),
-    20: segmentedMock.segments.map(function (segment) { return (tslib_es6.__assign(tslib_es6.__assign({}, segment), { iconAfter: _default.icons20.Placeholder.Default, iconBefore: _default.icons20.Placeholder.Default })); }),
+}))
+    .slice(3);
+const segmentedMockSize = {
+    14: segmentedMock.segments.map((segment) => ({
+        ...segment,
+        iconAfter: _default.icons14.Placeholder.Default,
+        iconBefore: _default.icons14.Placeholder.Default,
+    })),
+    16: segmentedMock.segments.map((segment) => ({
+        ...segment,
+        iconAfter: _default.icons16.Placeholder.Default,
+        iconBefore: _default.icons16.Placeholder.Default,
+    })),
+    20: segmentedMock.segments.map((segment) => ({
+        ...segment,
+        iconAfter: _default.icons20.Placeholder.Default,
+        iconBefore: _default.icons20.Placeholder.Default,
+    })),
 };
 
 exports.segmentedIconMock = segmentedIconMock;

package/dist/cjs/components/Segmented.js

@@ -3,11 +3,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var Icon = require('../../Icon_cjs_Cz6IyOkb.js');
+var Icon = require('../../Icon_cjs_DpFxIFv5.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Text = require('../../Text_cjs_0EINiUq4.js');
-var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
+var Text = require('../../Text_cjs_BDTjOTVB.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('@itcase/common');
@@ -24,10 +23,10 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Link_cjs_C5UsZUiF.js');
+require('../../Link_cjs_qKXVfU8e.js');
 require('lodash/castArray');
 
-var segmentedAppearanceDefault = {
+const segmentedAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfacePrimary',
         fillActive: 'accentPrimary',
@@ -64,7 +63,7 @@ var segmentedAppearanceDefault = {
     },
 };
 
-var segmentedAppearanceDisabled = {
+const segmentedAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceDisabled',
         fillActive: 'surfaceItemTertiary',
@@ -80,7 +79,7 @@ var segmentedAppearanceDisabled = {
     },
 };
 
-var segmentedAppearanceError = {
+const segmentedAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         fillActive: 'errorPrimary',
@@ -98,7 +97,7 @@ var segmentedAppearanceError = {
     },
 };
 
-var segmentedAppearanceShape = {
+const segmentedAppearanceShape = {
     circular: {
         shape: 'circular',
     },
@@ -123,7 +122,7 @@ var segmentedAppearanceShape = {
     },
 };
 
-var segmentedAppearanceSize = {
+const segmentedAppearanceSize = {
     sizeL: {
         size: 'l',
         labelTextSize: 'm',
@@ -151,7 +150,7 @@ var segmentedAppearanceSize = {
     },
 };
 
-var segmentedAppearanceStyle = {
+const segmentedAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -167,7 +166,7 @@ var segmentedAppearanceStyle = {
     },
 };
 
-var segmentedAppearanceSuccess = {
+const segmentedAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
         fillActive: 'successItemSecondary',
@@ -185,7 +184,7 @@ var segmentedAppearanceSuccess = {
     },
 };
 
-var segmentedAppearanceWarning = {
+const segmentedAppearanceWarning = {
     warningPrimary: {
         fill: 'warningTertiary',
         fillActive: 'accentPrimary',
@@ -204,55 +203,61 @@ var segmentedAppearanceWarning = {
     },
 };
 
-var segmentedAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, segmentedAppearanceDisabled), segmentedAppearanceSize), segmentedAppearanceShape), segmentedAppearanceStyle), segmentedAppearanceError), segmentedAppearanceSuccess), segmentedAppearanceDefault), segmentedAppearanceWarning);
+const segmentedAppearance = {
+    ...segmentedAppearanceDisabled,
+    ...segmentedAppearanceSize,
+    ...segmentedAppearanceShape,
+    ...segmentedAppearanceStyle,
+    ...segmentedAppearanceError,
+    ...segmentedAppearanceSuccess,
+    ...segmentedAppearanceDefault,
+    ...segmentedAppearanceWarning,
+};
 
-var segmentedConfig = {
+const segmentedConfig = {
     appearance: segmentedAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         segmentedConfig.appearance = appearanceConfig;
     },
 };
-var Segmented = function (props) {
-    var appearance = props.appearance, className = props.className, name = props.name, _a = props.activeSegment, activeSegment = _a === void 0 ? {} : _a, segments = props.segments, isDisabled = props.isDisabled, isSkeleton = props.isSkeleton, setActiveSegment = props.setActiveSegment, onChange = props.onChange;
-    var controlRef = React.useRef(null);
-    var segmentsRefs = React.useMemo(function () {
-        return new Map(segments.map(function (item) { return [item.value, React.createRef()]; }));
-    }, [segments]);
-    var onChangeValue = React.useCallback(function (item) {
+const Segmented = (props) => {
+    const { appearance, className, name, activeSegment = {}, segments, isDisabled, isSkeleton, setActiveSegment, onChange, } = props;
+    const controlRef = React.useRef(null);
+    const segmentsRefs = React.useMemo(() => new Map(segments.map((item) => [item.value, React.createRef()])), [segments]);
+    const onChangeValue = React.useCallback((item) => {
         onChange && onChange(item.value, name);
         setActiveSegment && setActiveSegment(item);
     }, [name, onChange, setActiveSegment]);
-    React.useEffect(function () {
-        var _a, _b;
-        var offsetWidth = 0;
-        var offsetLeft = 0;
-        var activeSegmentRef = segmentsRefs.get(activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value);
-        if (activeSegmentRef === null || activeSegmentRef === void 0 ? void 0 : activeSegmentRef.current) {
+    React.useEffect(() => {
+        let offsetWidth = 0;
+        let offsetLeft = 0;
+        const activeSegmentRef = segmentsRefs.get(activeSegment?.value);
+        if (activeSegmentRef?.current) {
             offsetWidth = activeSegmentRef.current.offsetWidth;
             offsetLeft = activeSegmentRef.current.offsetLeft;
         }
-        (_a = controlRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('--segmented-active-width', "".concat(offsetWidth, "px"));
+        controlRef.current?.style.setProperty('--segmented-active-width', `${offsetWidth}px`);
         // controlRef.current.style.setProperty('--segmented-active-x-pos', `${offsetLeft - 2}px`)
-        (_b = controlRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty('--segmented-active-x-pos', "".concat(offsetLeft, "px"));
+        controlRef.current?.style.setProperty('--segmented-active-x-pos', `${offsetLeft}px`);
     }, [activeSegment, segmentsRefs]);
-    var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, segmentedConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextColor = propsGenerator.labelTextColor, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextSize = propsGenerator.labelTextSize, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconFill = propsGenerator.iconFill, iconFillActive = propsGenerator.iconFillActive, iconFillDisabled = propsGenerator.iconFillDisabled, iconSize = propsGenerator.iconSize, indicatorFillClass = propsGenerator.indicatorFillClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'segmented', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), fillClass && "fill_".concat(fillClass), widthClass && "segmented_width_".concat(widthClass), sizeClass && "segmented_size_".concat(sizeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), isSkeleton && "segmented_skeleton"), ref: controlRef, children: jsxRuntime.jsx("div", { className: "segmented__wrapper", children: jsxRuntime.jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments === null || segments === void 0 ? void 0 : segments.map(function (item) {
-                        var isActive = String(activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value) === String(item.value);
-                        return (jsxRuntime.jsx("div", { className: clsx('segmented__item', !item.label && 'segmented__item_icon', sizeClass && "segmented__item_size_".concat(sizeClass), isActive && 'segmented__item_active', !isActive && isDisabled && 'segmented__item_state_disabled', isActive &&
+    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, segmentedConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveHoverColor, labelTextColor, labelTextHoverColor, labelTextSize, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconFill, iconFillActive, iconFillDisabled, iconSize, indicatorFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'segmented', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, widthClass && `segmented_width_${widthClass}`, sizeClass && `segmented_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, isSkeleton && `segmented_skeleton`), ref: controlRef, children: jsxRuntime.jsx("div", { className: "segmented__wrapper", children: jsxRuntime.jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments?.map((item) => {
+                        const isActive = String(activeSegment?.value) === String(item.value);
+                        return (jsxRuntime.jsx("div", { className: clsx('segmented__item', !item.label && 'segmented__item_icon', sizeClass && `segmented__item_size_${sizeClass}`, isActive && 'segmented__item_active', !isActive && isDisabled && 'segmented__item_state_disabled', isActive &&
                                 isDisabled &&
                                 'segmented__item_active_state_disabled', !isActive
-                                ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
+                                ? fillHoverClass && `fill_hover_${fillHoverClass}`
                                 : fillActiveHoverClass &&
-                                    "fill_active_hover_".concat(fillActiveHoverClass), isActive &&
+                                    `fill_active_hover_${fillActiveHoverClass}`, isActive &&
                                 fillActiveClass &&
-                                "fill_active_".concat(fillActiveClass)), ref: segmentsRefs.get(item.value), onClick: function () { return !isDisabled && onChangeValue(item); }, children: jsxRuntime.jsxs("div", { className: clsx('segmented__item-label', sizeClass && "segmented_size_".concat(sizeClass)), children: [item.iconBefore || item.iconBeforeActive ? (jsxRuntime.jsx(Icon.Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
+                                `fill_active_${fillActiveClass}`), ref: segmentsRefs.get(item.value), onClick: () => !isDisabled && onChangeValue(item), children: jsxRuntime.jsxs("div", { className: clsx('segmented__item-label', sizeClass && `segmented_size_${sizeClass}`), children: [item.iconBefore || item.iconBeforeActive ? (jsxRuntime.jsx(Icon.Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
                                             ? item.iconBeforeActive || item.iconBefore
                                             : item.iconBefore, isActive: isActive, isDisabled: isDisabled })) : null, item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (jsxRuntime.jsx(Icon.Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive, isDisabled: isDisabled })) : null, item.iconAfter || item.iconAfterActive ? (jsxRuntime.jsx(Icon.Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
                                             ? item.iconAfterActive || item.iconAfter
-                                            : item.iconAfter, isActive: isActive, isDisabled: isDisabled })) : null] }) }, "".concat(name, "-").concat(item.value)));
-                    }), jsxRuntime.jsx("div", { className: clsx('segmented__indicator', indicatorFillClass && "fill_".concat(indicatorFillClass)) })] }) }) }));
+                                            : item.iconAfter, isActive: isActive, isDisabled: isDisabled })) : null] }) }, `${name}-${item.value}`));
+                    }), jsxRuntime.jsx("div", { className: clsx('segmented__indicator', indicatorFillClass && `fill_${indicatorFillClass}`) })] }) }) }));
 };
 
 exports.Segmented = Segmented;