@salutejs/plasma-new-hope 0.327.0-canary.1973.15733948288.0 → 0.327.0-canary.2010.15678347777.0

package/styled-components/cjs/examples/plasma_web/components/CodeField/CodeField.config.js

@@ -14,7 +14,7 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ":var(--outline-accent);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-negative);"], _CodeField.codeFieldTokens.caretColor, _CodeField.codeFieldTokens.captionColor, _CodeField.codeFieldTokens.captionColorError, _CodeField.codeFieldTokens.codeColor, _CodeField.codeFieldTokens.codeColorError, _CodeField.codeFieldTokens.borderColorFocus, _CodeField.codeFieldTokens.borderColor, _CodeField.codeFieldTokens.borderColorHover, _CodeField.codeFieldTokens.borderColorFocus, _CodeField.codeFieldTokens.borderErrorColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-negative);"], _CodeField.codeFieldTokens.caretColor, _CodeField.codeFieldTokens.captionColor, _CodeField.codeFieldTokens.captionColorError, _CodeField.codeFieldTokens.codeColor, _CodeField.codeFieldTokens.codeColorError, _CodeField.codeFieldTokens.borderColor, _CodeField.codeFieldTokens.borderColorHover, _CodeField.codeFieldTokens.borderColorFocus, _CodeField.codeFieldTokens.borderErrorColor)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":0.125rem;", ":0.25rem;", ":2.75rem;", ":3.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.063rem;", ":0.875rem;", ":0.375rem;", ":0.875rem;"], _CodeField.codeFieldTokens.captionGap, _CodeField.codeFieldTokens.codeItemsGap, _CodeField.codeFieldTokens.separatorWidth, _CodeField.codeFieldTokens.codeItemWidth, _CodeField.codeFieldTokens.codeItemHeight, _CodeField.codeFieldTokens.fontFamily, _CodeField.codeFieldTokens.fontSize, _CodeField.codeFieldTokens.fontStyle, _CodeField.codeFieldTokens.fontWeight, _CodeField.codeFieldTokens.letterSpacing, _CodeField.codeFieldTokens.lineHeight, _CodeField.codeFieldTokens.captionFontFamily, _CodeField.codeFieldTokens.captionFontSize, _CodeField.codeFieldTokens.captionFontStyle, _CodeField.codeFieldTokens.captionFontWeight, _CodeField.codeFieldTokens.captionLetterSpacing, _CodeField.codeFieldTokens.captionLineHeight, _CodeField.codeFieldTokens.borderWidth, _CodeField.codeFieldTokens.borderRadius, _CodeField.codeFieldTokens.borderRadiusSegmented, _CodeField.codeFieldTokens.segmentedSideBorderRadius),

package/styled-components/cjs/examples/plasma_web/components/Tour/Tour.config.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Tour = /*#__PURE__*/require("../../../../components/Tour/Tour.tokens");
+var config = exports.config = {
+  defaults: {
+    view: 'accent',
+    size: 's'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)([""])
+    },
+    size: {
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":0.75rem;", ":0.75rem;"], _Tour.tokens.cardPadding, _Tour.tokens.cardRadius, _Tour.tokens.highlightRadius)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_web/components/Tour/Tour.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tour = void 0;
+var _Tour = /*#__PURE__*/require("../../../../components/Tour");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Tour2 = /*#__PURE__*/require("./Tour.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tour.tourConfig, _Tour2.config);
+var Tour = exports.Tour = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/examples/plasma_web/components/Tour/Tour.stories.tsx

@@ -0,0 +1,242 @@
+import React, { useRef, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import styled from 'styled-components';
+
+import { linkConfig } from '../../../../components/Link';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { Button } from '../Button/Button';
+
+import { config } from './Tour.config';
+import { Tour } from './Tour';
+
+const meta: Meta<typeof Tour> = {
+    title: 'web/Navigation/Tour',
+    decorators: [WithTheme],
+    component: Tour,
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(linkConfig, config)),
+        withOverlay: {
+            type: 'boolean',
+        },
+        overlayColor: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
+};
+
+export default meta;
+
+const Card = styled.div`
+    padding: 1rem;
+    background: #fff;
+    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
+    border-radius: 0.75rem;
+    max-width: 20rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+`;
+
+const Title = styled.h4`
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #000;
+`;
+
+const Description = styled.p`
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: #666;
+`;
+
+const Footer = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1.5rem;
+    margin-top: 0.5rem;
+
+    > div {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    small {
+        color: #666;
+        white-space: nowrap;
+    }
+`;
+
+const TourCard: React.FC<{
+    title: string;
+    description: string;
+    index: number;
+    last: boolean;
+    total: number;
+    onPrev: () => void;
+    onNext: () => void;
+    onClose: () => void;
+}> = ({ title, description, index, last, total, onPrev, onNext, onClose }) => {
+    return (
+        <Card>
+            {title && <Title>{title}</Title>}
+            {description && <Description>{description}</Description>}
+            <Footer>
+                <div>
+                    {index > 0 && (
+                        <Button size="xs" type="button" onClick={onPrev}>
+                            Назад
+                        </Button>
+                    )}
+                    {!last && (
+                        <Button size="xs" type="button" onClick={onNext}>
+                            Далее
+                        </Button>
+                    )}
+                    {last && (
+                        <Button size="xs" type="button" onClick={onClose}>
+                            Закрыть
+                        </Button>
+                    )}
+                </div>
+                <small>
+                    Шаг {index + 1} / {total}
+                </small>
+            </Footer>
+        </Card>
+    );
+};
+
+const StoryDefault = (args) => {
+    const ref1 = useRef<HTMLButtonElement>(null);
+    const ref2 = useRef<HTMLButtonElement>(null);
+    const ref3 = useRef<HTMLButtonElement>(null);
+    const ref4 = useRef<HTMLButtonElement>(null);
+    const [open, setOpen] = useState(false);
+    const [current, setCurrent] = useState(0);
+
+    const onNext = () => setCurrent(current + 1);
+    const onPrev = () => setCurrent(current - 1);
+    const onClose = () => setOpen(false);
+
+    const steps = [
+        {
+            target: ref1,
+            renderItem: () => (
+                <TourCard
+                    title="Первый шаг"
+                    description="Нажмите кнопку, чтобы продолжить"
+                    index={0}
+                    last={current === steps.length - 1}
+                    total={steps.length}
+                    onNext={onNext}
+                    onPrev={onPrev}
+                    onClose={onClose}
+                />
+            ),
+            placement: 'right',
+        },
+        {
+            target: ref2,
+            renderItem: () => (
+                <TourCard
+                    title="Первый шаг"
+                    description="Нажмите кнопку, чтобы продолжить"
+                    index={1}
+                    last={current === steps.length - 1}
+                    total={steps.length}
+                    onNext={onNext}
+                    onPrev={onPrev}
+                    onClose={onClose}
+                />
+            ),
+        },
+        {
+            target: ref3,
+            renderItem: () => (
+                <TourCard
+                    title="Первый шаг"
+                    description="Нажмите кнопку, чтобы продолжить"
+                    index={2}
+                    last={current === steps.length - 1}
+                    total={steps.length}
+                    onNext={onNext}
+                    onPrev={onPrev}
+                    onClose={onClose}
+                />
+            ),
+        },
+        {
+            target: ref4,
+            renderItem: () => (
+                <TourCard
+                    title="Первый шаг"
+                    description="Нажмите кнопку, чтобы продолжить"
+                    index={3}
+                    last={current === steps.length - 1}
+                    total={steps.length}
+                    onNext={onNext}
+                    onPrev={onPrev}
+                    onClose={onClose}
+                />
+            ),
+            placement: 'left',
+        },
+    ];
+
+    return (
+        <div
+            style={{
+                width: '100%',
+                height: '110vh',
+                display: 'flex',
+                justifyContent: 'space-between',
+                flexDirection: 'column',
+                alignItems: 'center',
+            }}
+        >
+            <div
+                style={{
+                    width: '100%',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                }}
+            >
+                <Button ref={ref1}>Блок 1</Button>
+                <Button ref={ref2}>Блок 2</Button>
+            </div>
+            <Button onClick={() => setOpen(true)}>Запуск тура</Button>
+
+            <div
+                style={{
+                    width: '100%',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                }}
+            >
+                <Button ref={ref3}>Блок 3</Button>
+                <Button ref={ref4}>Блок 4</Button>
+            </div>
+
+            <Tour
+                {...args}
+                open={open}
+                current={current}
+                onClose={() => {
+                    setCurrent(0);
+                    setOpen(false);
+                }}
+                steps={steps}
+            />
+        </div>
+    );
+};
+
+export const Default: StoryObj = {
+    render: (args) => <StoryDefault {...args} />,
+};

package/styled-components/cjs/hooks/index.js

@@ -3,12 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "useCodeHook", {
-  enumerable: true,
-  get: function get() {
-    return _useCodeHook.useCodeHook;
-  }
-});
 Object.defineProperty(exports, "useDidMountEffect", {
   enumerable: true,
   get: function get() {
@@ -64,5 +58,4 @@ var _useForceUpdate = /*#__PURE__*/require("./useForceUpdate");
 var _useDidMountEffect = /*#__PURE__*/require("./useDidMountEffect");
 var _useDidMountLayoutEffect = /*#__PURE__*/require("./useDidMountLayoutEffect");
 var _useOutsideClick = /*#__PURE__*/require("./useOutsideClick");
-var _useIsomorphicLayoutEffect = /*#__PURE__*/require("./useIsomorphicLayoutEffect");
-var _useCodeHook = /*#__PURE__*/require("./useCodeHook");
+var _useIsomorphicLayoutEffect = /*#__PURE__*/require("./useIsomorphicLayoutEffect");

package/styled-components/cjs/index.js

@@ -850,25 +850,25 @@ Object.keys(_PaginationDots).forEach(function (key) {
     }
   });
 });
-var _CodeInput = /*#__PURE__*/require("./components/CodeInput");
-Object.keys(_CodeInput).forEach(function (key) {
+var _CodeField = /*#__PURE__*/require("./components/CodeField");
+Object.keys(_CodeField).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _CodeInput[key]) return;
+  if (key in exports && exports[key] === _CodeField[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _CodeInput[key];
+      return _CodeField[key];
     }
   });
 });
-var _CodeField = /*#__PURE__*/require("./components/CodeField");
-Object.keys(_CodeField).forEach(function (key) {
+var _Tour = /*#__PURE__*/require("./components/Tour");
+Object.keys(_Tour).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _CodeField[key]) return;
+  if (key in exports && exports[key] === _Tour[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _CodeField[key];
+      return _Tour[key];
     }
   });
 });

package/styled-components/cjs/utils/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.screenGroupBreakpoints = exports.keyCodes = exports.ONLY_DIGITS_PATTERN = exports.ONLY_DIGITS_AND_CHARS_PATTERN = exports.ONLY_CHARS_PATTERN = exports.FORBIDDEN_KEYS = exports.BACKSPACE_KEY = exports.ANIMATION_TIMEOUT = void 0;
+exports.screenGroupBreakpoints = exports.keyCodes = void 0;
 var keyCodes = exports.keyCodes = {
   PageUp: 33,
   PageDown: 34,
@@ -21,10 +21,4 @@ var screenGroupBreakpoints = exports.screenGroupBreakpoints = {
   small: '0',
   medium: '35rem',
   large: '60rem'
-};
-var ONLY_DIGITS_PATTERN = exports.ONLY_DIGITS_PATTERN = '^\\d+$';
-var ONLY_CHARS_PATTERN = exports.ONLY_CHARS_PATTERN = '^[a-zA-Z]+$';
-var ONLY_DIGITS_AND_CHARS_PATTERN = exports.ONLY_DIGITS_AND_CHARS_PATTERN = '^[a-zA-Z0-9]+$';
-var FORBIDDEN_KEYS = exports.FORBIDDEN_KEYS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Delete', 'Tab'];
-var BACKSPACE_KEY = exports.BACKSPACE_KEY = 'Backspace';
-var ANIMATION_TIMEOUT = exports.ANIMATION_TIMEOUT = 300;
+};

package/styled-components/cjs/utils/index.js

@@ -131,18 +131,6 @@ Object.keys(_getPopoverPlacement).forEach(function (key) {
     }
   });
 });
-var _initialValuesHelper = /*#__PURE__*/require("./initialValuesHelper");
-Object.keys(_initialValuesHelper).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _initialValuesHelper[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _initialValuesHelper[key];
-    }
-  });
-});
 var _noop = /*#__PURE__*/require("./noop");
 var _getHeightAsNumber = /*#__PURE__*/require("./getHeightAsNumber");
 var _createConditionalComponent = /*#__PURE__*/require("./createConditionalComponent");

package/styled-components/es/components/CodeField/CodeField.js

@@ -17,11 +17,10 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { forwardRef, Fragment, useCallback, useRef, useState } from 'react';
+import React, { forwardRef, Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import cls from 'classnames';
 import { useDidMountEffect } from "../../hooks";
 import { getSizeValueFromProp } from "../../utils";
-import { useCodeHook } from "../../hooks";
 import { BACKSPACE_KEY, FORBIDDEN_KEYS, ONLY_DIGITS_PATTERN } from "./utils/constants";
 import { getCodeValue, getFieldPattern, getPlaceholderValue, handleCodeError, handleItemError } from "./utils";
 import { classes } from "./CodeField.tokens";
@@ -172,7 +171,6 @@ export var codeFieldRoot = function codeFieldRoot(Root) {
     };
     var handlePaste = function handlePaste(event) {
       var _inputRefs$current$ac;
-      var newCode = _toConsumableArray(code);
       if (disabled) {
         return;
       }
@@ -182,27 +180,30 @@ export var codeFieldRoot = function codeFieldRoot(Root) {
         var _symb$match;
         return ((_symb$match = symb.match(fieldPattern)) === null || _symb$match === void 0 ? void 0 : _symb$match[0]) || '';
       }).filter(Boolean) || [] : rawData.split('')).slice(0, codeLength);
-      pastedData.forEach(function (element, index) {
-        newCode[index] = element;
-      });
       var activeIndex = Math.min(pastedData.length, codeLength - 1);
       (_inputRefs$current$ac = inputRefs.current[activeIndex]) === null || _inputRefs$current$ac === void 0 || _inputRefs$current$ac.focus();
-      codeSetter(newCode);
+      codeSetter(pastedData);
     };
     var handleFullCodeEnter = useCallback(function (fullCode) {
       if (onFullCodeEnter) {
         onFullCodeEnter(fullCode);
       }
     }, []);
-    useCodeHook({
-      inputRefs: inputRefs,
-      codeLength: codeLength,
-      disabled: disabled,
-      autoFocus: autoFocus,
-      originalValue: originalValue,
-      getLastActiveIndex: getLastActiveIndex,
-      handleFullCodeEnter: handleFullCodeEnter
-    });
+    useEffect(function () {
+      inputRefs.current = inputRefs.current.slice(0, codeLength);
+    }, [codeLength]);
+    useEffect(function () {
+      if (autoFocus && !disabled) {
+        var _inputRefs$current$la;
+        var lastActiveIndex = getLastActiveIndex();
+        (_inputRefs$current$la = inputRefs.current[lastActiveIndex]) === null || _inputRefs$current$la === void 0 || _inputRefs$current$la.focus();
+      }
+    }, [autoFocus]);
+    useDidMountEffect(function () {
+      if (handleFullCodeEnter && originalValue.length === codeLength) {
+        handleFullCodeEnter(originalValue);
+      }
+    }, [originalValue, handleFullCodeEnter]);
     useDidMountEffect(function () {
       if (isError) {
         handleCodeError({