@consta/uikit 3.23.0 → 3.23.1

package/ResponsesImage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImage",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImage403/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImage403",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImage404/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImage404",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImage500/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImage500",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImage503/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImage503",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageConnectionError/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageConnectionError",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageDeleted/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageDeleted",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageEmptyBox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageEmptyBox",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageEmptyPockets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageEmptyPockets",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageNothingFound/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageNothingFound",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageSuccess/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageSuccess",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesNothingFound/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesNothingFound",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesSuccess/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesSuccess",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Select",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Sidebar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Sidebar",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Skeleton/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Skeleton",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/SliderCanary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/SliderCanary",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/SnackBar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/SnackBar",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Steps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Steps",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/StepsCanary/es.js

@@ -0,0 +1 @@
+export * from "../__internal__/src/components/StepsCanary/StepsCanary";

package/StepsCanary/index.d.ts

@@ -0,0 +1 @@
+export * from "../__internal__/src/components/StepsCanary/StepsCanary";

package/StepsCanary/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("../__internal__/cjs-src/components/StepsCanary/StepsCanary"), exports);

package/StepsCanary/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@consta/uikit/StepsCanary",
+  "version": "3.23.1",
+  "main": "index.js",
+  "module": "es.js",
+  "sideEffects": [
+    "*.css"
+  ]
+}

package/Switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Switch",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/SwitchGroup/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/SwitchGroup",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Table",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Tabs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Tabs",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Tag/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Tag",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/TagBase/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/TagBase",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Text",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/TextField/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/TextField",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Theme",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ThemeToggler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ThemeToggler",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Timer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Timer",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Tooltip",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/User/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/User",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/UserSelect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/UserSelect",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/UserSelectDeprecated/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/UserSelectDeprecated",
-  "version": "3.23.0",
+  "version": "3.23.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/__internal__/cjs-src/components/File/File.js

@@ -19,7 +19,7 @@ var FileIconMp3_1 = require("../../fileIcons/FileIconMp3/FileIconMp3");
 var FileIconMp4_1 = require("../../fileIcons/FileIconMp4/FileIconMp4");
 var FileIconPdf_1 = require("../../fileIcons/FileIconPdf/FileIconPdf");
 var FileIconPng_1 = require("../../fileIcons/FileIconPng/FileIconPng");
-var FileIconPtt_1 = require("../../fileIcons/FileIconPtt/FileIconPtt");
+var FileIconPpt_1 = require("../../fileIcons/FileIconPpt/FileIconPpt");
 var FileIconRar_1 = require("../../fileIcons/FileIconRar/FileIconRar");
 var FileIconRtf_1 = require("../../fileIcons/FileIconRtf/FileIconRtf");
 var FileIconTiff_1 = require("../../fileIcons/FileIconTiff/FileIconTiff");
@@ -45,8 +45,8 @@ var mapExtensionToSvg = {
     mov: FileIconMov_1.FileIconMov,
     mp4: FileIconMp4_1.FileIconMp4,
     pdf: FileIconPdf_1.FileIconPdf,
-    ptt: FileIconPtt_1.FileIconPtt,
-    pttx: FileIconPtt_1.FileIconPtt,
+    ppt: FileIconPpt_1.FileIconPpt,
+    pptx: FileIconPpt_1.FileIconPpt,
     png: FileIconPng_1.FileIconPng,
     rar: FileIconRar_1.FileIconRar,
     rtf: FileIconRtf_1.FileIconRtf,

package/__internal__/cjs-src/components/SliderCanary/useSliderStationing.js

@@ -51,7 +51,7 @@ exports.useSliderStationing = function (value, min, max, view, range, step, butt
                     for (var i = 0; i < endPointArray.length - 1; i++) {
                         sizesArray.push({
                             width: ((endPointArray[i + 1] - endPointArray[i]) / absoluteSize) * 100,
-                            active: endPointArray[i] !== min && endPointArray[i + 1] !== max
+                            active: endPointArray[i] >= value[0] && endPointArray[i + 1] <= value[1]
                         });
                     }
                 }

package/__internal__/cjs-src/components/Steps/Steps.css

@@ -21,6 +21,9 @@
     display: flex;
     overflow-x: scroll;
     overflow-y: visible;
+    padding-bottom: var(--space-2xs);
+    -ms-overflow-style: none;
+    scrollbar-width: none;
   }
 
   .Steps-List::-webkit-scrollbar {

package/__internal__/cjs-src/components/StepsCanary/Steps.css

@@ -0,0 +1,39 @@
+.Steps {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 100%;
+}
+
+  .Steps-Item:not(:last-child) {
+      margin-right: var(--space-xs);
+    }
+
+  .Steps-List {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    overflow-x: scroll;
+    overflow-y: visible;
+    padding-bottom: var(--space-2xs);
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .Steps-List::-webkit-scrollbar {
+      display: none;
+    }
+
+  .Steps-Button_side_left {
+        margin-right: var(--space-xs);
+      }
+
+  .Steps-Button_side_right {
+        margin-left: var(--space-xs);
+      }

package/__internal__/cjs-src/components/StepsCanary/StepsCanary.d.ts

@@ -0,0 +1,5 @@
+import './Steps.css';
+import { StepsCompnent } from './types';
+export declare const cnSteps: import("@bem-react/classname").ClassNameFormatter;
+export declare const Steps: StepsCompnent;
+export * from './types';

package/__internal__/cjs-src/components/StepsCanary/StepsCanary.js

@@ -0,0 +1,53 @@
+"use strict";
+exports.__esModule = true;
+exports.Steps = exports.cnSteps = void 0;
+var tslib_1 = require("tslib");
+require("./Steps.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useChoiceGroup_1 = require("../../hooks/useChoiceGroup/useChoiceGroup");
+var useOverflow_1 = require("../../hooks/useOverflow/useOverflow");
+var useScrollElements_1 = require("../../hooks/useScrollElements/useScrollElements");
+var IconArrowLeft_1 = require("../../icons/IconArrowLeft/IconArrowLeft");
+var IconArrowRight_1 = require("../../icons/IconArrowRight/IconArrowRight");
+var bem_1 = require("../../utils/bem");
+var Button_1 = require("../Button/Button");
+var StepsStep_1 = require("./StepsStep/StepsStep");
+var helper_1 = require("./helper");
+var types_1 = require("./types");
+exports.cnSteps = bem_1.cn('Steps');
+function StepsRender(props, ref) {
+    var _a = helper_1.withDefaultGetters(props), _b = _a.size, size = _b === void 0 ? types_1.stepsDefaultSize : _b, items = _a.items, value = _a.value, getItemLabel = _a.getItemLabel, getItemDisabled = _a.getItemDisabled, getItemCompleted = _a.getItemCompleted, getItemSkipped = _a.getItemSkipped, onChange = _a.onChange, className = _a.className, otherProps = tslib_1.__rest(_a, ["size", "items", "value", "getItemLabel", "getItemDisabled", "getItemCompleted", "getItemSkipped", "onChange", "className"]);
+    var _c = tslib_1.__read(react_1.useState(-1), 2), activeStep = _c[0], setActiveStep = _c[1];
+    var _d = useChoiceGroup_1.useChoiceGroup({
+        value: value,
+        getKey: getItemLabel,
+        callBack: onChange,
+        multiple: false
+    }), getOnChange = _d.getOnChange, getChecked = _d.getChecked;
+    react_1.useMemo(function () {
+        items.forEach(function (item, index) {
+            if (getChecked(item)) {
+                setActiveStep(index);
+            }
+        });
+    }, [items, value]);
+    var _e = useScrollElements_1.useScrollElements(items), refs = _e.refs, scrollTo = _e.scrollTo;
+    var stepsRef = react_1.useRef(null);
+    var isOverflow = useOverflow_1.useOverflow({ currentRef: stepsRef });
+    var changeStep = function (e, prev) {
+        if (prev && activeStep !== 0) {
+            getOnChange(items[activeStep - 1])(e);
+            scrollTo(activeStep - 1);
+        }
+        if (!prev && activeStep !== items.length - 1) {
+            getOnChange(items[activeStep + 1])(e);
+            scrollTo(activeStep + 1);
+        }
+    };
+    return (react_1["default"].createElement("div", tslib_1.__assign({ ref: ref, className: exports.cnSteps({ size: size }, [className]) }, otherProps),
+        isOverflow && (react_1["default"].createElement(Button_1.Button, { iconLeft: function () { return react_1["default"].createElement(IconArrowLeft_1.IconArrowLeft, { size: "xs" }); }, view: "clear", onlyIcon: true, size: "xs", className: exports.cnSteps('Button', { side: 'left' }), onClick: function (e) { return changeStep(e, true); } })),
+        react_1["default"].createElement("div", { ref: stepsRef, className: exports.cnSteps('List') }, items.map(function (item, index) { return (react_1["default"].createElement(StepsStep_1.StepsStep, { key: index, ref: refs[index], className: exports.cnSteps('Item'), label: (getItemCompleted === null || getItemCompleted === void 0 ? void 0 : getItemCompleted(item)) ? getItemLabel(item) : index + 1 + " " + getItemLabel(item), size: size, active: activeStep === index, onChange: getOnChange(item), completed: getItemCompleted === null || getItemCompleted === void 0 ? void 0 : getItemCompleted(item), skipped: getItemSkipped === null || getItemSkipped === void 0 ? void 0 : getItemSkipped(item), disabled: getItemDisabled === null || getItemDisabled === void 0 ? void 0 : getItemDisabled(item) })); })),
+        isOverflow && (react_1["default"].createElement(Button_1.Button, { iconLeft: function () { return react_1["default"].createElement(IconArrowRight_1.IconArrowRight, { size: "xs" }); }, view: "clear", onlyIcon: true, size: "xs", className: exports.cnSteps('Button', { side: 'right' }), onClick: function (e) { return changeStep(e, false); } }))));
+}
+exports.Steps = react_1.forwardRef(StepsRender);
+tslib_1.__exportStar(require("./types"), exports);

package/__internal__/cjs-src/components/StepsCanary/StepsStep/StepsStep.css

@@ -0,0 +1,108 @@
+.StepsStep {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: var(--space-xs) 0;
+  color: var(--color-control-typo-ghost);
+  background-color: transparent;
+  border: none;
+  font-family: var(--font);
+  line-height: var(--line-height-text-s);
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-transition: color 0.2s, font-weight 0.2s;
+  transition: color 0.2s, font-weight 0.2s;
+}
+
+  .StepsStep-Icon {
+    margin-right: var(--space-2xs);
+  }
+
+  .StepsStep::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    width: 100%;
+    height: 2px;
+    background-color: var(--color-control-bg-ghost);
+    border-radius: var(--control-radius);
+    -webkit-transition: background-color 0.2s, opacity 0.2s;
+    transition: background-color 0.2s, opacity 0.2s;
+  }
+
+  .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_m {
+      font-size: var(--size-text-m);
+    }
+
+  .StepsStep_size_l {
+      font-size: var(--size-text-l);
+    }
+
+  .StepsStep_skipped,
+  .StepsStep_completed,
+  .StepsStep_active {
+    color: var(--color-control-typo-secondary);
+  }
+
+  .StepsStep_skipped::after, .StepsStep_completed::after, .StepsStep_active::after {
+      background-color: var(--color-control-bg-border-secondary);
+      opacity: 0.5;
+    }
+
+  .StepsStep_skipped:hover, .StepsStep_completed:hover, .StepsStep_active:hover {
+      color: var(--color-control-typo-secondary-hover);
+    }
+
+  .StepsStep_skipped:hover::after, .StepsStep_completed:hover::after, .StepsStep_active:hover::after {
+        background-color: var(--color-control-bg-border-secondary-hover);
+        opacity: 0.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);
+      }

package/__internal__/cjs-src/components/StepsCanary/StepsStep/StepsStep.d.ts

@@ -0,0 +1,16 @@
+import './StepsStep.css';
+import React from 'react';
+import { StepsPropSize } from '../StepsCanary';
+export declare const cnStepsStep: import("@bem-react/classname").ClassNameFormatter;
+declare type Props = {
+    size: StepsPropSize;
+    label: string;
+    active?: boolean;
+    disabled?: boolean;
+    completed?: boolean;
+    skipped?: boolean;
+    onChange: React.MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+};
+export declare const StepsStep: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/__internal__/cjs-src/components/StepsCanary/StepsStep/StepsStep.js

@@ -0,0 +1,24 @@
+"use strict";
+exports.__esModule = true;
+exports.StepsStep = exports.cnStepsStep = void 0;
+var tslib_1 = require("tslib");
+require("./StepsStep.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var IconCheck_1 = require("../../../icons/IconCheck/IconCheck");
+var bem_1 = require("../../../utils/bem");
+var getByMap_1 = require("../../../utils/getByMap");
+exports.cnStepsStep = bem_1.cn('StepsStep');
+var sizeMap = {
+    m: 'xs',
+    l: 's'
+};
+exports.StepsStep = react_1["default"].forwardRef(function (props, ref) {
+    var size = props.size, label = props.label, _a = props.active, active = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.completed, completed = _c === void 0 ? false : _c, _d = props.skipped, skipped = _d === void 0 ? false : _d, onChange = props.onChange, className = props.className;
+    var clickHandler = function (e) {
+        !active && !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(e));
+    };
+    var iconSize = getByMap_1.getByMap(sizeMap, size);
+    return (react_1["default"].createElement("button", { ref: ref, className: exports.cnStepsStep({ size: size, active: active, disabled: disabled, completed: completed, skipped: skipped }, [className]), type: "button", title: label, onClick: clickHandler },
+        completed && react_1["default"].createElement(IconCheck_1.IconCheck, { className: exports.cnStepsStep('Icon'), size: iconSize }),
+        label));
+});