@salutejs/plasma-new-hope 0.158.0-canary.1443.11128958088.0 → 0.158.0-canary.1451.11128265656.0

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

@@ -1,121 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["size", "orientation", "contentAlign", "hasLine", "hasContent", "hasLoader", "items", "onChange", "current", "status"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-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(arr) { if (Array.isArray(arr)) return arr; }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { forwardRef, useState, useEffect } from 'react';
-import cls from 'classnames';
-import { classes } from './Steps.tokens';
-import { base } from './Steps.styles';
-import { StepItem } from './ui';
-import { base as sizeCSS } from './variations/_size/base';
-import { base as viewCSS } from './variations/_view/base';
-export var stepsRoot = function stepsRoot(Root) {
-  return /*#__PURE__*/forwardRef(function (props, outerRef) {
-    var _props$size = props.size,
-      size = _props$size === void 0 ? 's' : _props$size,
-      _props$orientation = props.orientation,
-      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
-      _props$contentAlign = props.contentAlign,
-      contentAlign = _props$contentAlign === void 0 ? 'left' : _props$contentAlign,
-      _props$hasLine = props.hasLine,
-      hasLine = _props$hasLine === void 0 ? true : _props$hasLine,
-      _props$hasContent = props.hasContent,
-      hasContent = _props$hasContent === void 0 ? 'all' : _props$hasContent,
-      hasLoader = props.hasLoader,
-      _props$items = props.items,
-      items = _props$items === void 0 ? [] : _props$items,
-      onChange = props.onChange,
-      current = props.current,
-      status = props.status,
-      rest = _objectWithoutProperties(props, _excluded);
-    var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      prevIndex = _useState2[0],
-      setPrevIndex = _useState2[1];
-    var isUncontrolled = current !== undefined;
-    var hasIndicator = items.some(function (item) {
-      return item.indicator != null;
-    });
-    var isSimple = items.every(function (item) {
-      return !item.title && !item.content;
-    });
-    useEffect(function () {
-      return function () {
-        if (current !== undefined) {
-          setPrevIndex(current);
-        } else {
-          var index = items.findIndex(function (item) {
-            return item.status === 'active';
-          });
-          setPrevIndex(index !== -1 ? index : undefined);
-        }
-      };
-    }, [current, items]);
-    return /*#__PURE__*/React.createElement(Root, _extends({
-      size: size,
-      view: "default",
-      ref: outerRef,
-      className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, orientation === 'vertical'), classes.simple, isSimple), classes.hasIndicator, hasIndicator))
-    }, rest), items.map(function (item, index) {
-      var itemStatus = 'inactive';
-      if (isUncontrolled) {
-        if (current > index) {
-          itemStatus = 'completed';
-        } else if (current === index) {
-          itemStatus = status || 'active';
-        }
-      } else {
-        itemStatus = status || item.status || 'inactive';
-      }
-      if (item.disabled) {
-        itemStatus = 'inactive';
-      }
-      var isActive = itemStatus === 'active';
-      var content = item.content;
-      if (hasContent === 'active' && !isActive || hasContent === 'none') {
-        content = '';
-      }
-      return /*#__PURE__*/React.createElement(StepItem, {
-        key: index,
-        index: index,
-        title: item.title,
-        content: content,
-        indicator: item.indicator,
-        status: itemStatus,
-        size: size,
-        orientation: orientation,
-        contentAlign: orientation === 'horizontal' ? contentAlign : 'left',
-        hasLine: hasLine,
-        hasLoader: hasLoader && isActive,
-        onClick: onChange ? function () {
-          return onChange(item, index, prevIndex);
-        } : undefined,
-        items: items
-      });
-    }));
-  });
-};
-export var stepsConfig = {
-  name: 'Steps',
-  tag: 'div',
-  layout: stepsRoot,
-  base: base,
-  variations: {
-    size: sizeCSS,
-    view: viewCSS
-  },
-  defaults: {
-    view: 'default',
-    size: 's'
-  }
-};

package/styled-components/es/components/Steps/Steps.review-doc.mdx

@@ -1,304 +0,0 @@
----
-id: steps
-title: Steps
----
-
-# Steps
-Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
-
-```tsx live
-import { ReactNode } from 'react';
-
-export type StepStatus = 'active' | 'inactive' | 'completed';
-
-export interface StepItemProps {
-  /**
-   * Заголовок
-   */
-  title?: string;
-  /**
-   * Контент, может быть как React компонентом, так и функцией
-   */
-  content?: string | ReactNode | ((status: StepStatus, index: number, items: StepItemProps[]) => ReactNode);
-  /**
-   * Индикатор шага, может быть как React компонентом, так и функцией
-   */
-  indicator?: number | string | ReactNode | ((status: StepStatus, item: StepItemProps) => ReactNode | null);
-  /**
-   * Статус шага: активный, инактивный, завершенный
-   * @description
-   * active - активный шаг
-   * inactive - не пройденный шаг
-   * completed - пройденный шаг
-   */
-  status?: StepStatus;
-  /**
-   * Отключенный шаг
-   * @default false
-   */
-  disabled?: boolean;
-}
-
-interface BaseSteps {
-  /**
-   * Ориентация компонента
-   * @default 'horizontal'
-   */
-  orientation?: 'horizontal' | 'vertical';
-  /**
-   * Выравнивание контента в шагах
-   * @default 'left'
-   */
-  contentAlign?: 'left' | 'center';
-  /**
-   * Включает разделительную линию
-   * @default true
-   */
-  hasLine?: boolean;
-  /**
-   * Индекс текущего шага, для uncontrolled компонента
-   */
-  current?: number;
-  /**
-   * Статус текущего шага, имеет приоритет над item.status
-   */
-  status?: StepStatus;
-  /**
-   * Обработчик изменения шага, делает индикаторы и заголовки шагов кликабельными
-   */
-  onChange?: (item: StepItemProps, index: number, prevIndex?: number) => void;
-  /**
-   * Массив шагов
-   */
-  items: StepItemProps[];
-}
-
-type IndicatorSizeSimple = 8 | 16;
-type IndicatorSize = 24 | 36;
-
-export type Steps = BaseSteps & {
-  /**
-   * Размер шага
-   */
-  size: 'xs' | 's';
-  indicatorSize: never;
-} & {
-  /**
-   * Размер шага
-   */
-  size: 'm' | 'l';
-  /**
-   * Размер индикатора
-   */
-  indicatorSize: IndicatorSize | IndicatorSizeSimple;
-};
-
-```
-
-примеры использования https://codesandbox.io/p/devbox/crzql2?file=%2Fsrc%2FDemo.tsx%3A23%2C1
-
-```
-import React, { useState } from 'react';
-import { fullItems } from './App.data.tsx';
-import { Steps } from './Steps/Steps.tsx';
-import { StepItemProps, StepStatus } from './Steps/Steps.types';
-
-const DemoContent: React.FC<{ onClick: () => void; status: string; index?: number; current?: number }> = ({
-  onClick,
-  status,
-  index,
-  current = 0,
-  children,
-}) => {
-  return (
-    <>
-      <div>Content</div>
-      <button onClick={onClick} disabled={index !== (current || 0)}>
-        {children}
-      </button>
-    </>
-  );
-};
-
-export const DemoWithExternalControl = () => {
-  const items = [
-    {
-      title: 'Title',
-      indicator: '1',
-      content: 'Content',
-    },
-    {
-      title: 'Title',
-      indicator: '2',
-      content: 'Content',
-    },
-    {
-      title: 'Title',
-      indicator: '3',
-      content: 'Content',
-    },
-    {
-      title: 'Title',
-      indicator: '4',
-      content: 'Content',
-    },
-  ];
-
-  const [current, setCurrent] = useState(1);
-  const [status, setStatus] = useState('active');
-
-  const isLast = current === items.length - 1;
-
-  const onClick = () => {
-    if (isLast) {
-      setStatus('completed');
-    } else {
-      setCurrent(current + 1);
-    }
-  };
-
-  return (
-    <>
-      <Steps style={{ width: '1000px' }} current={current} status={status} items={items} />
-      <br />
-      <div>
-        External control:{' '}
-        <button onClick={onClick} style={{ width: '5rem' }}>
-          {isLast ? 'complete' : 'next'}
-        </button>
-      </div>
-      <hr />
-    </>
-  );
-};
-
-export const DemoWithInternalControls = () => {
-  const [current, setCurrent] = useState(undefined);
-  const [status, setStatus] = useState<StepStatus | undefined>();
-
-  const renderContent = (status, index, items) => {
-    const isFirst = index === 0 && current === undefined;
-    const isLast = index === items.length - 1;
-
-    const onNext = () => setCurrent((current) => (current === undefined ? 0 : current + 1));
-    const onComplete = () => {
-      setStatus('completed');
-    };
-
-    return (
-      <DemoContent onClick={isLast ? onComplete : onNext} index={index} status={status} current={current}>
-        {isFirst && 'go'}
-        {isLast && 'complete'}
-        {!isFirst && !isLast && 'next'}
-      </DemoContent>
-    );
-  };
-
-  return (
-    <Steps
-      current={current}
-      status={status}
-      items={[
-        {
-          title: 'Title',
-          indicator: '1',
-          content: renderContent,
-        },
-        {
-          title: 'Title',
-          indicator: '2',
-          content: renderContent,
-        },
-        {
-          title: 'Title',
-          indicator: '3',
-          content: renderContent,
-        },
-        {
-          title: 'Title',
-          indicator: '4',
-          content: renderContent,
-        },
-      ]}
-    />
-  );
-};
-
-export const DemoWithControlledUsage = () => {
-  const [exampleItems, setExampleItems] = useState<StepItemProps[]>(() =>
-    fullItems.map((item) => ({ ...item, status: 'inactive' }))
-  );
-
-  return (
-    <Steps
-      style={{ width: '1000px' }}
-      onChange={(item, index) => {
-        setExampleItems(
-          exampleItems.map((item, itemIndex) => {
-            if (index > itemIndex) {
-              return { ...item, status: 'completed' };
-            }
-
-            if (index === itemIndex) {
-              return { ...item, status: 'active' };
-            }
-
-            return { ...item, status: 'inactive' };
-          })
-        );
-      }}
-      items={exampleItems}
-    />
-  );
-};
-
-export const DemoWithControlledFreeUsage = () => {
-  const [items, setItems] = useState<StepItemProps[]>(() => fullItems.map((item) => ({ ...item, status: 'inactive' })));
-
-  return (
-    <Steps
-      style={{ width: '1000px' }}
-      onChange={(item, index, prevIndex) => {
-        console.log('!!! onChange', index, prevIndex);
-
-        const newItems = [...items];
-        if (prevIndex !== undefined) {
-          newItems[prevIndex].status = 'completed';
-        }
-        newItems[index].status = 'active';
-
-        setItems(newItems);
-      }}
-      items={items}
-    />
-  );
-};
-
-export const DemoControlledWithStatus = () => {
-  const [items, setItems] = useState<StepItemProps[]>(() => fullItems.map(({ status, ...item }) => ({ ...item })));
-  return (
-    <Steps
-      style={{ width: '1000px' }}
-      current={2}
-      status="active"
-      onClick={(item, index) => {
-        setItems(
-          items.map((item, itemIndex) => {
-            if (index > itemIndex) {
-              return { ...item, status: 'completed' };
-            }
-
-            if (index === itemIndex) {
-              return { ...item, status: 'active' };
-            }
-
-            return { ...item, status: 'inactive' };
-          })
-        );
-      }}
-      items={items}
-    />
-  );
-};
-
-```

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

@@ -1,3 +0,0 @@
-import { css } from 'styled-components';
-import { classes, tokens } from './Steps.tokens';
-export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;&.", "{align-items:center;&.", "{height:var(", ");}&:not(.", "){height:var(", ");}&.", "{&.", "{width:var(", ");height:auto;}&:not(.", "){width:var(", ");height:auto;}}}&.", "{display:inline;flex-direction:column;justify-content:center;&.", "{display:inline-flex;}}"], classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.simple);

package/styled-components/es/components/Steps/Steps.template-doc.mdx

@@ -1,84 +0,0 @@
----
-id: steps
-title: Steps
----
-
-import { PropsTable, Description } from '@site/src/components';
-
-# Steps
-
-<Description name="Steps" />
-<PropsTable name="Steps" />
-
-## Вариант использования с управлением текущим элементом из вне
-
-```tsx live
-import React, { useState } from 'react';
-import { Steps, Button } from '@salutejs/{{ package }}';
-
-const items = [{
-    indicator: 1,
-}, {
-    indicator: 2,
-}, {
-    indicator: 3,
-}];
-
-export function App() {
-    const [current, setCurrent] = useState<number>(0);
-    const onClick = () => setCurrent(() => current + 1);
-
-    return (
-        <section>
-            <Steps items={items}
-                current={current}
-            />
-            <br />
-            <Button view="secondary" onClick={onClick}>
-                Next
-            </Button>
-        </section>
-    );
-}
-```
-
-## Вариант более гибкого использования через onChange и status в items
-
-```tsx live
-import React, { useState } from 'react';
-import { Steps, StepItemProps  } from '@salutejs/{{ package }}';
-
-const initialItems = [{
-    indicator: 1,
-    title: 'Title',
-    content: 'Content',
-}, {
-    indicator: 2,
-    title: 'Title',
-    content: 'Content',
-}, {
-    indicator: 3,
-    title: 'Title',
-    content: 'Content',
-}];
-
-export function App() {
-    const [items, setItems] = useState(initialItems);
-
-    const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
-        if (prevIndex !== undefined) {
-            items[prevIndex].status = 'completed';
-        }
-
-        items[index].status = 'active';
-
-        setItems([...items]);
-    };
-
-    return (
-        <section>
-            <Steps items={items} onChange={onChange} />
-        </section>
-    );
-}
-```

package/styled-components/es/components/Steps/Steps.tokens.js

@@ -1,73 +0,0 @@
-export var classes = {
-  simple: '--plasma-steps-simple',
-  centered: '--plasma-step-item-centered',
-  active: '--plasma-step-item-active',
-  inactive: '--plasma-step-item-inactive',
-  clickable: '--plasma-step-item-clickable',
-  hovered: '--plasma-step-item-hovered',
-  disabled: '--plasma-step-item-disabled',
-  verticalOrientation: '--plasma-steps-vertical-orientation',
-  hasIndicator: '--plasma-step-item-has-indicator',
-  activeItem: '--plasma-step-item-has-indicator',
-  transparentDivider: '--plasma-steps-transparent-divider'
-};
-export var tokens = {
-  indicatorSize: '--plasma-step-item-indicator-size',
-  activeIndicatorSize: '--plasma-step-item-active-indicator-size',
-  bulletSize: '--plasma-step-item-bullet-size',
-  activeBulletSize: '--plasma-step-item-active-bullet-size',
-  titlePaddingTop: '--plasma-step-item-title-padding-top',
-  contentPaddingTop: '--plasma-step-item-content-padding-top',
-  contentPaddingRight: '--plasma-step-item-content-padding-right',
-  contentSidePadding: '--plasma-step-item-content-side-padding',
-  contentVerticalPadding: '--plasma-step-item-content-vertical-padding',
-  verticalContentPaddingLeft: '--plasma-step-item-vertical-content-padding-left',
-  smallIndicatorIndentHeight: '--plasma-step-item-s-indicator-intent-height',
-  largeIndicatorIndentHeight: '--plasma-step-item-l-indicator-intent-height',
-  smallBulletIndentHeight: '--plasma-step-item-s-bullet-intent-height',
-  largeBulletIndentHeight: '--plasma-step-item-l-bullet-intent-height',
-  titleFontFamily: '--plasma-step-item-title-font-family',
-  titleFontSize: '--plasma-step-item-title-font-size',
-  titleFontStyle: '--plasma-step-item-title-font-style',
-  titleFontWeight: '--plasma-step-item-title-font-weight',
-  titleLetterSpacing: '--plasma-step-item-title-letter-spacing',
-  titleLineHeight: '--plasma-step-item-title-line-height',
-  contentFontFamily: '--plasma-step-item-content-font-family',
-  contentFontSize: '--plasma-step-item-content-font-size',
-  contentFontStyle: '--plasma-step-item-content-font-style',
-  contentFontWeight: '--plasma-step-item-content-font-weight',
-  contentLetterSpacing: '--plasma-step-item-content-letter-spacing',
-  contentLineHeight: '--plasma-step-item-content-line-height',
-  indicatorFontFamily: '--plasma-step-item-indicator-font-family',
-  indicatorFontSize: '--plasma-step-item-indicator-font-size',
-  indicatorFontStyle: '--plasma-step-item-indicator-font-style',
-  indicatorFontWeight: '--plasma-step-item-indicator-font-weight',
-  indicatorLetterSpacing: '--plasma-step-item-indicator-letter-spacing',
-  indicatorLineHeight: '--plasma-step-item-indicator-line-height',
-  activeIndicatorFontFamily: '--plasma-step-item-active-indicator-font-family',
-  activeIndicatorFontSize: '--plasma-step-item-active-indicator-font-size',
-  activeIndicatorFontStyle: '--plasma-step-item-active-indicator-font-style',
-  activeIndicatorFontWeight: '--plasma-step-item-active-indicator-font-weight',
-  activeIndicatorLetterSpacing: '--plasma-step-item-active-indicator-letter-spacing',
-  activeIndicatorLineHeight: '--plasma-step-item-active-indicator-line-height',
-  activeTitleColor: '--plasma-step-item-active-title-color',
-  activeTitleColorHover: '--plasma-step-item-active-title-color-hover',
-  inactiveTitleColor: '--plasma-step-item-inactive-title-color',
-  inactiveTitleColorHover: '--plasma-step-item-inactive-title-color-hover',
-  contentColor: '--plasma-step-item-content-color',
-  activeIndicatorBorder: '--plasma-step-item-active-indicator-border',
-  activeIndicatorBorderHover: '--plasma-step-item-active-indicator-border-hover',
-  activeIndicatorColor: '--plasma-step-item-active-indicator-color',
-  activeIndicatorColorHover: '--plasma-step-item-active-indicator-color-hover',
-  activeIndicatorBackground: '--plasma-step-item-active-indicator-background',
-  completedIndicatorColor: '--plasma-step-item-completed-indicator-color',
-  completedIndicatorColorHover: '--plasma-step-item-completed-indicator-color-hover',
-  completedIndicatorBackground: '--plasma-step-item-completed-indicator-background',
-  completedIndicatorBackgroundHover: '--plasma-step-item-completed-indicator-background-hover',
-  inactiveIndicatorColor: '--plasma-step-item-inactive-indicator-color',
-  inactiveIndicatorColorHover: '--plasma-step-item-inactive-indicator-color-hover',
-  inactiveIndicatorBackground: '--plasma-step-item-inactive-indicator-background',
-  inactiveIndicatorBackgroundHover: '--plasma-step-item-inactive-indicator-background-hover',
-  disabledOpacity: '--plasma-step-item-disabled-opacity',
-  dividerThickness: '--plasma-step-item-divider-thickness'
-};

package/styled-components/es/components/Steps/Steps.types.js

@@ -1 +0,0 @@
-export {};

package/styled-components/es/components/Steps/index.js

@@ -1,2 +0,0 @@
-export { stepsConfig, stepsRoot } from './Steps';
-export { tokens as stepsTokens } from './Steps.tokens';