@salutejs/plasma-new-hope 0.322.0-canary.1944.14662885061.0 → 0.322.0-canary.1947.14664713311.0

package/styled-components/cjs/components/PaginationDots/utils/getDotSize.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDotSize = void 0;
+var getDotSize = exports.getDotSize = function getDotSize(size, index, offset, count, visibleCount) {
+  var innerViewValue = index - offset;
+  var toEnd = count - (visibleCount + offset);
+  var canScrollBackward = Boolean(offset);
+  var canScrollForward = Boolean(toEnd);
+  var isFirst = innerViewValue === 0;
+  var isSecond = innerViewValue === 1;
+  var isSecondLast = innerViewValue === visibleCount - 2;
+  var isLast = innerViewValue === visibleCount - 1;
+  if (size === 's') {
+    if (isFirst && canScrollBackward || isLast && canScrollForward) {
+      return 'xs';
+    }
+    return 's';
+  }
+  if (canScrollBackward) {
+    // (m) m m s xs
+    // m (m) m s xs
+    // m m (m) s xs
+    // s m (m) s xs
+    // xs s m (m) s
+    // xs s m (m) s
+    // xs s m m (m)
+    if (isFirst) {
+      return offset === 1 ? 's' : 'xs';
+    }
+    if (isSecond && offset > 1) {
+      return 's';
+    }
+  }
+  if (canScrollForward) {
+    if (isLast) {
+      return toEnd === 1 ? 's' : 'xs';
+    }
+    if (isSecondLast && toEnd > 1) {
+      return 's';
+    }
+  }
+  return 'm';
+};

package/styled-components/cjs/components/PaginationDots/variations/_size/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);

package/styled-components/cjs/components/PaginationDots/variations/_size/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/cjs/components/PaginationDots/variations/_view/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);

package/styled-components/cjs/components/PaginationDots/variations/_view/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/cjs/examples/plasma_b2c/components/PaginationDots/PaginationDots.config.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _PaginationDots = /*#__PURE__*/require("../../../../components/PaginationDots");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":#0808081f;", ":#080808;"], _PaginationDots.paginationDotsTokens.itemBackground, _PaginationDots.paginationDotsTokens.activeItemBackground)
+    },
+    size: {
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0 0.375rem;", ":0.375rem 0;", ":0.75rem;", ":0.5rem;", ":0.375rem;", ":50%;", ":2rem;", ":0.5rem;", ":0.375rem;", ":0.5rem;", ":2rem;"], _PaginationDots.paginationDotsTokens.dotPadding, _PaginationDots.paginationDotsTokens.verticalDotPadding, _PaginationDots.paginationDotsTokens.dotSizeM, _PaginationDots.paginationDotsTokens.dotSizeS, _PaginationDots.paginationDotsTokens.dotSizeXS, _PaginationDots.paginationDotsTokens.dotBorderRadius, _PaginationDots.paginationDotsTokens.lineWidth, _PaginationDots.paginationDotsTokens.lineHeight, _PaginationDots.paginationDotsTokens.lineBorderRadius, _PaginationDots.paginationDotsTokens.verticalLineWidth, _PaginationDots.paginationDotsTokens.verticalLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0 0.375rem;", ":0.375rem 0;", ":50%;", ":0.75rem;", ":0.5rem;", ":0.375rem;", ":3rem;", ":0.75rem;", ":0.375rem;", ":0.75rem;", ":3rem;"], _PaginationDots.paginationDotsTokens.dotPadding, _PaginationDots.paginationDotsTokens.verticalDotPadding, _PaginationDots.paginationDotsTokens.dotBorderRadius, _PaginationDots.paginationDotsTokens.dotSizeM, _PaginationDots.paginationDotsTokens.dotSizeS, _PaginationDots.paginationDotsTokens.dotSizeXS, _PaginationDots.paginationDotsTokens.lineWidth, _PaginationDots.paginationDotsTokens.lineHeight, _PaginationDots.paginationDotsTokens.lineBorderRadius, _PaginationDots.paginationDotsTokens.verticalLineWidth, _PaginationDots.paginationDotsTokens.verticalLineHeight)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_b2c/components/PaginationDots/PaginationDots.js

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

package/styled-components/cjs/examples/plasma_b2c/components/PaginationDots/PaginationDots.stories.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { ComponentProps, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { PaginationDots } from './PaginationDots';
+import { config } from './PaginationDots.config';
+
+const { views, sizes } = getConfigVariations(config);
+const orientations: Array<string> = ['vertical', 'horizontal'];
+
+const meta: Meta<typeof PaginationDots> = {
+    title: 'b2c/Data Entry/PaginationDots',
+    decorators: [WithTheme],
+    component: PaginationDots,
+    args: {
+        view: 'default',
+        size: 'm',
+    },
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        dotType: {
+            options: ['dot', 'line'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        orientation: {
+            options: orientations,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        count: {
+            control: {
+                type: 'number',
+            },
+        },
+        visibleCount: {
+            control: {
+                type: 'number',
+            },
+        },
+        ...disableProps(['value', 'focused', 'pin']),
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof PaginationDots> & {
+    currentDot: string;
+};
+
+const StoryDefault = ({ dotType, ...rest }: StoryPropsDefault) => {
+    const [value, setValue] = useState(0);
+
+    return (
+        <div style={{ width: '400px', height: '400px' }}>
+            <PaginationDots value={value} activeElementView={dotType} onChange={setValue} {...rest} />
+        </div>
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        size: 'm',
+        dotType: 'dot',
+        orientation: 'horizontal',
+        centered: false,
+        count: 9,
+        visibleCount: 9,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _PaginationDots = /*#__PURE__*/require("../../../../components/PaginationDots");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    focused: 'true',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":'#0808081f',", ":'#080808',"], _PaginationDots.paginationDotsTokens.itemBackground, _PaginationDots.paginationDotsTokens.activeItemBackground)
+    },
+    size: {
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":'0 0.375rem',", ":'0.375rem 0',", ":'0.375rem',", ":'0.5rem',", ":'0.75rem',", ":'50%',", ":'2rem',", ":'0.5rem',", ":'0.375rem',", ":'0.5rem',", ":'2rem',"], _PaginationDots.paginationDotsTokens.dotPadding, _PaginationDots.paginationDotsTokens.verticalDotPadding, _PaginationDots.paginationDotsTokens.dotSizeM, _PaginationDots.paginationDotsTokens.dotSizeS, _PaginationDots.paginationDotsTokens.dotSizeXS, _PaginationDots.paginationDotsTokens.dotBorderRadius, _PaginationDots.paginationDotsTokens.lineWidth, _PaginationDots.paginationDotsTokens.lineHeight, _PaginationDots.paginationDotsTokens.lineBorderRadius, _PaginationDots.paginationDotsTokens.verticalLineWidth, _PaginationDots.paginationDotsTokens.verticalLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":'0 0.375rem',", ":'0.375rem 0',", ":'50%',", ":'0.375rem',", ":'0.5rem',", ":'0.75rem',", ":'3rem',", ":'0.75rem',", ":'0.375rem',", ":'0.75rem',", ":'3rem',"], _PaginationDots.paginationDotsTokens.dotPadding, _PaginationDots.paginationDotsTokens.verticalDotPadding, _PaginationDots.paginationDotsTokens.dotBorderRadius, _PaginationDots.paginationDotsTokens.dotSizeM, _PaginationDots.paginationDotsTokens.dotSizeS, _PaginationDots.paginationDotsTokens.dotSizeXS, _PaginationDots.paginationDotsTokens.lineWidth, _PaginationDots.paginationDotsTokens.lineHeight, _PaginationDots.paginationDotsTokens.lineBorderRadius, _PaginationDots.paginationDotsTokens.verticalLineWidth, _PaginationDots.paginationDotsTokens.verticalLineHeight)
+    }
+  }
+};

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

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

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

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { PaginationDots } from './PaginationDots';
+import { config } from './PaginationDots.config';
+
+const { views, sizes } = getConfigVariations(config);
+const orientations: Array<string> = ['vertical', 'horizontal'];
+
+const meta: Meta<typeof PaginationDots> = {
+    title: 'web/Data Entry/PaginationDots',
+    decorators: [WithTheme],
+    component: PaginationDots,
+    args: {
+        view: 'default',
+        size: 'm',
+    },
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inner-radio',
+            },
+        },
+        orientation: {
+            options: orientations,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        activeDotCentered: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        ...disableProps(['value', 'focused', 'pin']),
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof PaginationDots> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+};
+
+const StoryDefault = ({ size, ...rest }: StoryPropsDefault) => {
+    return <PaginationDots size={size} value={0} count={9} {...rest} />;
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        orientation: 'horizontal',
+        stretched: true,
+        currentDot: 'first',
+    },
+    render: (args) => <StoryDefault {...args} />,
+};

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

@@ -0,0 +1,311 @@
+var _excluded = ["view", "size", "activeElementView", "orientation", "centered", "value", "count", "visibleCount", "onChange"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+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, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import cls from 'classnames';
+import { useForkRef } from '@salutejs/plasma-core';
+import { usePreviousValue } from "../../hooks";
+import { base as viewCSS } from "../PaginationDots/variations/_view/base";
+import { base as sizeCSS } from "../PaginationDots/variations/_size/base";
+import { AnimatedDotsWrapper, base, Dot, Line, Wrapper } from "./PaginationDots.styles";
+import { classes } from "./PaginationDots.tokens";
+import { getDotSize } from "./utils/getDotSize";
+import { useAnimation } from "./hooks/useAnimation";
+var sizesMap = {
+  xs: 18,
+  s: 20,
+  m: 24
+};
+var getInitialOffset = function getInitialOffset(value, visibleCount, count) {
+  var middle = Math.floor(visibleCount / 2);
+  if (value < middle) {
+    return 0;
+  }
+  if (count - value <= middle) {
+    return count - visibleCount;
+  }
+  return value - middle;
+};
+export var getVisualOffsets = function getVisualOffsets(dots, innerViewValue) {
+  var before = dots.slice(0, innerViewValue).reduce(function (acc, size) {
+    return acc + sizesMap[size];
+  }, 0);
+  var after = dots.slice(innerViewValue + 1).reduce(function (acc, size) {
+    return acc + sizesMap[size];
+  }, 0);
+  return (after - before) / 2;
+};
+var getFirstAnimatedDotsOffset = function getFirstAnimatedDotsOffset(dots, prevDots) {
+  var sizeBefore = sizesMap[prevDots[0]];
+  var sizeAfter = sizesMap[dots[0]];
+  return sizeBefore - sizeAfter;
+};
+var getLastAnimatedDotsOffset = function getLastAnimatedDotsOffset(dots, prevDots) {
+  var sizeBefore = sizesMap[prevDots[prevDots.length - 1]];
+  var sizeAfter = sizesMap[dots[dots.length - 1]];
+  return sizeBefore - sizeAfter;
+};
+
+/*
+        (m) m m s xs  value: 0, offset: 0
+      m (m) m s xs    value: 1, offset: 0
+    m m (m) s xs      value: 2, offset: 0
+    s m (m) s xs      value: 3, offset: 1
+   xs s (m) s xs      value: 4, offset: 2
+
+ */
+
+var isDebug = false;
+export var paginationDotsRoot = function paginationDotsRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (_ref, outerRef) {
+    var view = _ref.view,
+      size = _ref.size,
+      _ref$activeElementVie = _ref.activeElementView,
+      activeElementView = _ref$activeElementVie === void 0 ? 'dot' : _ref$activeElementVie,
+      _ref$orientation = _ref.orientation,
+      orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
+      _ref$centered = _ref.centered,
+      centered = _ref$centered === void 0 ? false : _ref$centered,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 0 : _ref$value,
+      _ref$count = _ref.count,
+      count = _ref$count === void 0 ? 0 : _ref$count,
+      visibleCount = _ref.visibleCount,
+      onChange = _ref.onChange,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    var innerRef = useRef(null);
+    var wrapperRef = useRef(null);
+    var activeElementRef = useRef(null);
+    var animatedDotsWrapperRef = useRef(null);
+    useForkRef(outerRef, innerRef);
+    var innerValue = Math.min(value, count - 1);
+    var innerVisibleCount = Math.min(visibleCount || count, count);
+    var isLineView = activeElementView === 'line';
+    var isVertical = orientation === 'vertical';
+    var hasScroll = innerVisibleCount < count;
+    var _useState = useState(innerValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentValue = _useState2[0],
+      setCurrentValue = _useState2[1];
+    var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      prevValue = _useState4[0],
+      setPrevValue = _useState4[1];
+    var _useState5 = useState(function () {
+        return getInitialOffset(innerValue, innerVisibleCount, count);
+      }),
+      _useState6 = _slicedToArray(_useState5, 2),
+      offset = _useState6[0],
+      setOffset = _useState6[1];
+    var prevOffset = usePreviousValue(offset);
+    var prevDotsRef = useRef([]);
+    var dots = new Array(innerVisibleCount).fill(null).map(function (_, index) {
+      return getDotSize(size, index + offset, offset, count, innerVisibleCount);
+    });
+    var setVisualOffset = function setVisualOffset(currentValueNew, newOffset) {
+      var innerViewValue = currentValueNew - newOffset;
+
+      // canScrollBackward || canScrollForward
+      var withAnimation = centered ? true : newOffset !== offset;
+      if (!animatedDotsWrapperRef.current || !withAnimation) {
+        if (wrapperRef.current) {
+          wrapperRef.current.style.transform = 'none';
+        }
+        return;
+      }
+      var visualOffset = getVisualOffsets(dots, innerViewValue);
+      if (wrapperRef.current) {
+        wrapperRef.current.style.transform = isVertical ? "translateY(".concat(visualOffset, "px)") : "translateX(".concat(visualOffset, "px)");
+      }
+    };
+    if (isDebug) {
+      console.log('!!!', JSON.stringify({
+        prevValue: prevValue,
+        prevOffset: prevOffset,
+        value: innerValue,
+        offset: offset
+      }));
+    }
+    var canScrollForward = prevValue !== undefined ? !!offset && count - innerVisibleCount > prevOffset : false;
+    var canScrollBackward = Boolean(prevOffset && offset + innerVisibleCount !== count);
+    var _useAnimation = useAnimation({
+        innerViewIndex: currentValue - offset,
+        dots: dots,
+        prevDots: prevDotsRef.current,
+        canScrollBackward: canScrollBackward,
+        canScrollForward: canScrollForward,
+        isVertical: isVertical,
+        activeElementRef: activeElementRef,
+        animatedDotsWrapperRef: animatedDotsWrapperRef,
+        onAnimationEnd: function onAnimationEnd() {
+          console.log('!!! onAnimationEnd');
+          var newOffset = getInitialOffset(innerValue, innerVisibleCount, count);
+          setOffset(newOffset);
+          setPrevValue(undefined);
+          setSkipAnimation(true);
+        }
+      }),
+      skipAnimation = _useAnimation.skipAnimation,
+      hasAnimation = _useAnimation.hasAnimation,
+      hasForwardAnimation = _useAnimation.hasForwardAnimation,
+      hasBackwardAnimation = _useAnimation.hasBackwardAnimation,
+      setSkipAnimation = _useAnimation.setSkipAnimation,
+      setHasForwardAnimation = _useAnimation.setHasForwardAnimation,
+      setHasBackwardAnimation = _useAnimation.setHasBackwardAnimation,
+      handleAnimationEnd = _useAnimation.handleAnimationEnd;
+    var hasAnimatedDot = hasAnimation && innerVisibleCount > 2 && (hasBackwardAnimation && canScrollBackward || hasForwardAnimation && canScrollForward);
+    var calcOffset = function calcOffset(currentValue, prevValue) {
+      if (prevValue === undefined || centered && !hasScroll) {
+        return;
+      }
+      var toFront = currentValue > prevValue;
+      var toBack = currentValue < prevValue;
+      var newOffset = getInitialOffset(currentValue, innerVisibleCount, count);
+      var withAnimation = centered ? true : newOffset !== offset;
+      if (toFront) {
+        if (withAnimation) {
+          setHasForwardAnimation(true);
+          prevDotsRef.current = _toConsumableArray(dots);
+          setOffset(newOffset);
+        } else {
+          setOffset(newOffset);
+        }
+      } else if (toBack) {
+        if (withAnimation) {
+          setHasBackwardAnimation(true);
+          prevDotsRef.current = _toConsumableArray(dots);
+          setOffset(newOffset);
+        } else {
+          setOffset(newOffset);
+        }
+      }
+    };
+    useLayoutEffect(function () {
+      setVisualOffset(innerValue, offset);
+    }, [isVertical, centered]);
+    useLayoutEffect(function () {
+      if (prevValue === undefined) {
+        setVisualOffset(innerValue, offset);
+        if (animatedDotsWrapperRef.current) {
+          animatedDotsWrapperRef.current.style.transition = 'none';
+          animatedDotsWrapperRef.current.style.transform = 'none';
+        }
+      }
+    }, [innerValue, offset, prevValue]);
+    useLayoutEffect(function () {
+      setSkipAnimation(true);
+      setPrevValue(undefined);
+    }, [count, innerVisibleCount, isVertical, isLineView, hasScroll]);
+    useEffect(function () {
+      // setSkipAnimation(true);
+      // setPrevValue(undefined);
+    }, []);
+    var onMove = function onMove(newValue) {
+      setSkipAnimation(false);
+      calcOffset(newValue, currentValue);
+      setCurrentValue(newValue);
+      setPrevValue(currentValue);
+      onChange === null || onChange === void 0 || onChange(newValue);
+    };
+    if (!innerVisibleCount || innerVisibleCount <= 0) {
+      return null;
+    }
+    var dotsNodes = dots.map(function (dotSize, viewIndex) {
+      var dotIndex = viewIndex + offset;
+      var isCurrent = dotIndex === currentValue;
+      var isClickable = dotIndex === currentValue - 1 || dotIndex === currentValue + 1;
+      var onClick = isClickable && !hasAnimation ? function () {
+        return onMove(dotIndex);
+      } : undefined;
+      if (isCurrent) {
+        var ActiveElement = activeElementView === 'dot' ? Dot : Line;
+        return /*#__PURE__*/React.createElement(ActiveElement, {
+          key: viewIndex,
+          ref: activeElementRef,
+          "data-size": size,
+          "data-view": activeElementView,
+          className: cls(classes.active, isVertical && classes.vertical, skipAnimation && classes.skipAnimation)
+        }, isDebug ? dotIndex : null);
+      }
+      var isPrevActive = prevValue === dotIndex;
+      var innerViewValue = dotIndex - offset;
+      var isFirst = innerViewValue === 0;
+      var isLast = innerViewValue === innerVisibleCount - 1;
+      return /*#__PURE__*/React.createElement(Dot, {
+        key: viewIndex,
+        className: cls(isVertical && classes.vertical, isClickable && classes.clickable, isPrevActive && classes.prevActive, skipAnimation && classes.skipAnimation),
+        style: {
+          visibility: isLast && hasForwardAnimation && canScrollForward || isFirst && hasBackwardAnimation && canScrollBackward ? 'hidden' : 'visible'
+        },
+        "data-size": dotSize,
+        "data-view": activeElementView,
+        onClick: onClick
+      }, isDebug ? dotIndex : null);
+    });
+    return /*#__PURE__*/React.createElement(Root, _extends({
+      size: size,
+      view: view,
+      className: cls(centered && classes.centered, isVertical && classes.vertical),
+      ref: innerRef
+    }, rest), /*#__PURE__*/React.createElement(Wrapper, {
+      ref: wrapperRef,
+      "data-size": size
+    }, hasAnimatedDot && /*#__PURE__*/React.createElement(Dot, {
+      className: cls(isVertical && classes.vertical, {
+        hidden: hasForwardAnimation,
+        showed: hasBackwardAnimation
+      }),
+      "data-view": activeElementView,
+      "data-size": dots[0],
+      style: isVertical ? {
+        top: "".concat(getFirstAnimatedDotsOffset(dots, prevDotsRef.current), "px")
+      } : {
+        left: "".concat(getFirstAnimatedDotsOffset(dots, prevDotsRef.current), "px")
+      }
+    }, isDebug ? offset + (hasForwardAnimation ? -1 : 0) : null), /*#__PURE__*/React.createElement(AnimatedDotsWrapper, {
+      ref: animatedDotsWrapperRef,
+      onTransitionEnd: handleAnimationEnd
+    }, dotsNodes), hasAnimatedDot && /*#__PURE__*/React.createElement(Dot, {
+      className: cls(isVertical && classes.vertical, {
+        hidden: hasBackwardAnimation,
+        showed: hasForwardAnimation
+      }),
+      "data-view": activeElementView,
+      "data-size": dots[dots.length - 1],
+      style: isVertical ? {
+        bottom: "".concat(getLastAnimatedDotsOffset(dots, prevDotsRef.current), "px")
+      } : {
+        right: "".concat(getLastAnimatedDotsOffset(dots, prevDotsRef.current), "px")
+      }
+    }, isDebug ? offset + innerVisibleCount + (hasForwardAnimation ? -1 : 0) : null)));
+  });
+};
+export var paginationDotsConfig = {
+  name: 'PaginationDots',
+  tag: 'div',
+  layout: paginationDotsRoot,
+  base: base,
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 'm'
+  }
+};

package/styled-components/es/components/PaginationDots/PaginationDots.styles.js

@@ -0,0 +1,18 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { css } from 'styled-components';
+import styled from 'styled-components';
+import { classes, tokens } from "./PaginationDots.tokens";
+export var Wrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-b6xerq-0"
+})(["position:relative;display:flex;align-items:center;justify-content:center;"]);
+export var AnimatedDotsWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-b6xerq-1"
+})(["display:flex;align-items:center;justify-content:center;"]);
+export var Dot = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-b6xerq-2"
+})(["box-sizing:border-box;padding:var(", ");&:before{content:'';display:block;border-radius:var(", ");background-color:var(", ");transition:width 0.3s linear,height 0.3s linear;}&.", "{&:before{background-color:var(", ");}}&[data-size='xs']{&:before{--plasma-private-dot-size:var(", ");width:var(", ");height:var(", ");}}&[data-size='s']{&:before{--plasma-private-dot-size:var(", ");width:var(", ");height:var(", ");}}&[data-size='m']{&:before{--plasma-private-dot-size:var(", ");width:var(", ");height:var(", ");}}&.", "{cursor:pointer;}@keyframes showAnimation{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}@keyframes showWithColor{from{background-color:var(", ");}to{background-color:var(", ");}}@keyframes hideWithColor{from{background-color:var(", ");}to{background-color:var(", ");}}@keyframes hideAnimation{from{transform:scale(1);opacity:1;}to{transform:scale(0);opacity:0;}}@keyframes reversedWidthAnimation{from{width:var(", ");height:var(", ");border-radius:var(", ");background-color:var(", ");}to{width:var(--plasma-private-dot-size);height:var(--plasma-private-dot-size);border-radius:var(", ");background-color:var(", ");}}@keyframes reversedHeightAnimation{from{width:var(", ");height:var(", ");border-radius:var(", ");}to{width:var(--plasma-private-dot-size);height:var(--plasma-private-dot-size);border-radius:var(", ");}}&.", "{&[data-view='line']{&:before{animation-name:reversedWidthAnimation;animation-duration:0.3s;animation-iteration-count:1;animation-play-state:running;animation-timing-function:linear;}&.", "{&:before{animation-name:reversedHeightAnimation;}}}&[data-view='dot']{&:before{animation-name:hideWithColor;animation-duration:0.3s;animation-iteration-count:1;animation-play-state:running;animation-timing-function:linear;animation-timing-function:ease-out;}}}&.hidden{position:absolute;animation-name:hideAnimation;animation-duration:calc(0.3s + 0.1s);animation-iteration-count:1;animation-play-state:running;animation-timing-function:linear;}&.showed{position:absolute;animation-name:showAnimation;animation-duration:0.3s;animation-iteration-count:1;animation-play-state:running;animation-timing-function:linear;}&.", "{&[data-view='dot']{&:before{animation-name:showWithColor;animation-duration:0.3s;animation-iteration-count:1;animation-play-state:running;animation-timing-function:linear;animation-timing-function:ease-in;}}}&.", "{transition:none;animation-name:none !important;&:before{transition:none;animation-name:none !important;}}"], tokens.dotPadding, tokens.dotBorderRadius, tokens.itemBackground, classes.active, tokens.activeItemBackground, tokens.dotSizeXS, tokens.dotSizeXS, tokens.dotSizeXS, tokens.dotSizeS, tokens.dotSizeS, tokens.dotSizeS, tokens.dotSizeM, tokens.dotSizeM, tokens.dotSizeM, classes.clickable, tokens.itemBackground, tokens.activeItemBackground, tokens.activeItemBackground, tokens.itemBackground, tokens.lineWidth, tokens.lineHeight, tokens.lineBorderRadius, tokens.activeItemBackground, tokens.lineBorderRadius, tokens.itemBackground, tokens.verticalLineWidth, tokens.verticalLineHeight, tokens.lineBorderRadius, tokens.lineBorderRadius, classes.prevActive, classes.vertical, classes.active, classes.skipAnimation);
+export var Line = /*#__PURE__*/styled(Dot).withConfig({
+  componentId: "plasma-new-hope__sc-b6xerq-3"
+})(["@keyframes widthAnimation{from{width:var(", ");height:var(", ");background-color:var(", ");}to{width:var(", ");height:var(", ");background-color:var(", ");}}@keyframes heightAnimation{from{width:var(", ");height:var(", ");background-color:var(", ");}to{width:var(", ");height:var(", ");background-color:var(", ");}}&[data-size='s']{&:before{width:var(", ");height:var(", ");border-radius:var(", ");}}&[data-size='m']{&:before{width:var(", ");height:var(", ");border-radius:var(", ");}}&.", "{&[data-size='s']{&:before{width:var(", ");height:var(", ");}}&[data-size='m']{&:before{width:var(", ");height:var(", ");}}}&.", "{&:before{animation-name:widthAnimation;animation-duration:0.3s;animation-iteration-count:1;animation-play-state:running;animation-timing-function:linear;}&.", "{&:before{animation-name:heightAnimation;}}}&.", "{animation-name:none !important;&:before{animation-name:none !important;}}"], tokens.lineHeight, tokens.lineHeight, tokens.itemBackground, tokens.lineWidth, tokens.lineHeight, tokens.activeItemBackground, tokens.lineHeight, tokens.lineHeight, tokens.itemBackground, tokens.verticalLineWidth, tokens.verticalLineHeight, tokens.activeItemBackground, tokens.lineWidth, tokens.lineHeight, tokens.lineBorderRadius, tokens.lineWidth, tokens.lineHeight, tokens.lineBorderRadius, classes.vertical, tokens.verticalLineWidth, tokens.verticalLineHeight, tokens.verticalLineWidth, tokens.verticalLineHeight, classes.active, classes.vertical, classes.skipAnimation);
+export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n\n    &.", " {\n        width: 100%;\n        justify-content: center;\n    }\n\n    &.", " {\n        display: inline-flex;\n        flex-direction: column;\n        align-items: center;\n\n        ", " {\n            padding: var(", ");\n        }\n\n        ", " {\n            flex-direction: column;\n        }\n\n        &.", " {\n            width: auto;\n            height: 100%;\n\n            position: relative;\n        }\n    }\n"])), classes.centered, classes.vertical, Dot, tokens.verticalDotPadding, AnimatedDotsWrapper, classes.centered);