@salutejs/plasma-new-hope 0.137.1-dev.0 → 0.138.0-canary.1406.10666365265.0

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

@@ -1,252 +0,0 @@
-import React, { useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import { mergeConfig } from '../../../../engines';
-import { Checkbox } from '../Checkbox/Checkbox';
-import { ComboboxPrimitiveValue, comboboxConfig } from '../../../../components/Combobox';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
-import { IconDone } from '../../../../components/_Icon';
-
-import { Combobox, ComboboxDivider, ComboboxItem } from './Combobox';
-import { config } from './Combobox.config';
-
-const placements: Array<string> = ['top', 'bottom', 'right', 'left', 'auto'];
-const enumerations: Array<string> = ['comma', 'chip'];
-
-type StorySelectPropsCustom = {
-    skidding?: number;
-    distance?: number;
-};
-
-type StorySelectProps = ComponentProps<typeof Combobox> & StorySelectPropsCustom;
-
-const meta: Meta<StorySelectProps> = {
-    title: 'plasma_web/Combobox',
-    decorators: [WithTheme],
-    component: Combobox,
-    argTypes: {
-        placement: {
-            options: placements,
-            control: {
-                type: 'select',
-            },
-        },
-        enumerationType: {
-            options: enumerations,
-            control: {
-                type: 'select',
-            },
-        },
-        ...argTypesFromConfig(mergeConfig(comboboxConfig, config)),
-    },
-    args: {
-        usePortal: false,
-        disabled: false,
-        readOnly: false,
-        label: 'Label',
-        placeholder: 'Placeholder',
-        enumerationType: 'comma',
-        size: 'm',
-        view: 'default',
-        placement: 'bottom',
-    },
-};
-
-export default meta;
-
-const onChangeAction = action('onChange');
-
-const iconDoneToSelectSizeMap: Record<string, 'xs' | 's'> = {
-    xs: 'xs',
-    s: 's',
-    m: 's',
-    l: 's',
-};
-
-const checkboxToSelectSizeMap: Record<string, 's' | 'm'> = {
-    xs: 's',
-    s: 'm',
-    m: 'm',
-    l: 'm',
-};
-
-const getSelectItems = (slug: string, elemCount: number) =>
-    [...Array(elemCount).keys()].map((num) => ({
-        value: `${slug}_${num}`,
-        child: `${slug} ${num}`,
-    }));
-
-const StorySingle = (args: StorySelectProps) => {
-    const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args;
-
-    const [value, setValue] = useState<ComboboxPrimitiveValue | undefined>('item_0');
-
-    const onChangeValue = (newValue?: ComboboxPrimitiveValue) => {
-        setValue(newValue);
-        onChangeAction(newValue);
-    };
-
-    return (
-        <div style={{ width: '50%' }}>
-            <Combobox
-                frame="theme-root"
-                usePortal={usePortal}
-                valueType="single"
-                value={value}
-                placement={placement}
-                label={label}
-                placeholder={placeholder}
-                size={size}
-                view={view}
-                disabled={disabled}
-                readOnly={readOnly}
-                onChangeValue={onChangeValue}
-            >
-                <ComboboxItem value={undefined} text="Clear" />
-                {getSelectItems('item', 6).map((item) => (
-                    <ComboboxItem
-                        key={item.value}
-                        contentLeft={
-                            item.value === value ? (
-                                <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
-                            ) : undefined
-                        }
-                        value={item.value}
-                        text={item.child}
-                    />
-                ))}
-            </Combobox>
-        </div>
-    );
-};
-
-export const Single: StoryObj<StorySelectProps> = {
-    render: (args) => <StorySingle {...args} />,
-};
-
-const StoryMultiple = (args: StorySelectProps) => {
-    const { usePortal, placement, label, placeholder, readOnly, disabled, enumerationType, size = 'm', view } = args;
-
-    const [value, setValue] = useState<Array<ComboboxPrimitiveValue> | undefined>(['item_2', 'item_3']);
-
-    const onChangeValue = (newValue?: Array<ComboboxPrimitiveValue>) => {
-        setValue(newValue);
-        onChangeAction(newValue);
-    };
-
-    return (
-        <div style={{ width: '50%' }}>
-            <Combobox
-                frame="theme-root"
-                usePortal={usePortal}
-                valueType="multiple"
-                enumerationType={enumerationType}
-                value={value}
-                placement={placement}
-                label={label}
-                placeholder={placeholder}
-                size={size}
-                view={view}
-                disabled={disabled}
-                readOnly={readOnly}
-                onChangeValue={onChangeValue}
-            >
-                <ComboboxItem value={undefined} text="Clear" />
-                {getSelectItems('item', 6).map((item) => (
-                    <ComboboxItem
-                        key={item.value}
-                        contentLeft={<Checkbox size={checkboxToSelectSizeMap[size]} />}
-                        value={item.value}
-                        text={item.child}
-                    />
-                ))}
-            </Combobox>
-        </div>
-    );
-};
-
-export const Multiple: StoryObj<StorySelectProps> = {
-    render: (args) => <StoryMultiple {...args} />,
-};
-
-const StoryAddCustomItem = (args: StorySelectProps) => {
-    const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args;
-
-    const [opened, setOpened] = useState(false);
-    const [items, setItems] = useState(getSelectItems('item', 1));
-    const [value, setValue] = useState<ComboboxPrimitiveValue | undefined>('item_0');
-
-    const onChangeValue = (newValue?: ComboboxPrimitiveValue) => {
-        setValue(newValue);
-        onChangeAction(newValue);
-    };
-
-    const onToggle = (openValue: boolean) => setOpened(openValue);
-
-    const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        const { code } = event;
-
-        if (code === 'Enter') {
-            const newValue = (event.target as HTMLInputElement).value;
-            const newItems = [...items];
-
-            if (newItems.find((item) => item.child === newValue)) {
-                return;
-            }
-
-            newItems.push({
-                value: `${newValue}_`,
-                child: (newValue || '').toString(),
-            });
-
-            setOpened(false);
-            setItems(newItems);
-        }
-    };
-
-    const filterFunction = () => true;
-
-    return (
-        <div style={{ width: '50%' }}>
-            <Combobox
-                frame="theme-root"
-                usePortal={usePortal}
-                valueType="single"
-                value={value}
-                placement={placement}
-                label={label}
-                placeholder={placeholder}
-                size={size}
-                view={view}
-                disabled={disabled}
-                readOnly={readOnly}
-                opened={opened}
-                onToggle={onToggle}
-                onChangeValue={onChangeValue}
-                onKeyDown={onKeyDown}
-                filterFunction={filterFunction}
-            >
-                <ComboboxItem value={undefined} text="Clear" />
-                <ComboboxDivider />
-                {items.map((item) => (
-                    <ComboboxItem
-                        key={item.value}
-                        contentLeft={
-                            item.value === value ? (
-                                <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
-                            ) : undefined
-                        }
-                        value={item.value}
-                        text={item.child}
-                    />
-                ))}
-            </Combobox>
-        </div>
-    );
-};
-
-export const AddCustomItem: StoryObj<StorySelectProps> = {
-    render: (args) => <StoryAddCustomItem {...args} />,
-};

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

@@ -1,255 +0,0 @@
-var _excluded = ["name", "form", "readOnly", "disabled", "label", "placeholder", "id", "children", "role", "view", "size", "frame", "usePortal", "negativeResultContent", "enumerationType", "opened", "placement", "onToggle", "onKeyDown", "filterFunction"];
-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 _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, { Children, forwardRef, useEffect, useRef, useState } from 'react';
-import { safeUseId, useForkRef } from '@salutejs/plasma-core';
-import { cx, getPlacements } from '../../utils';
-import { useDidMountEffect, useForceUpdate } from '../../hooks';
-import { getChildren, getNewSelected, getValues } from './utils';
-import { useKeyNavigation } from './hooks';
-import { base as viewCSS } from './variations/_view/base';
-import { base as sizeCSS } from './variations/_size/base';
-import { ComboboxTarget } from './ui';
-import { ComboboxItemNotFound, StyledPopover, StyledRoot, StyledCombobox, StyledNativeSelect } from './Combobox.styles';
-/**
- * Выпадающий список без внешнего контроля видимости.
- */
-export var comboboxRoot = function comboboxRoot(Root) {
-  return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
-    var _targetRef$current;
-    var name = _ref.name,
-      form = _ref.form,
-      readOnly = _ref.readOnly,
-      disabled = _ref.disabled,
-      label = _ref.label,
-      placeholder = _ref.placeholder,
-      id = _ref.id,
-      children = _ref.children,
-      role = _ref.role,
-      view = _ref.view,
-      size = _ref.size,
-      frame = _ref.frame,
-      usePortal = _ref.usePortal,
-      _ref$negativeResultCo = _ref.negativeResultContent,
-      negativeResultContent = _ref$negativeResultCo === void 0 ? 'Элементы не найдены' : _ref$negativeResultCo,
-      _ref$enumerationType = _ref.enumerationType,
-      enumerationType = _ref$enumerationType === void 0 ? 'comma' : _ref$enumerationType,
-      _ref$opened = _ref.opened,
-      opened = _ref$opened === void 0 ? false : _ref$opened,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
-      onToggle = _ref.onToggle,
-      onKeyDown = _ref.onKeyDown,
-      filterFunction = _ref.filterFunction,
-      rest = _objectWithoutProperties(_ref, _excluded);
-    var forceUpdate = useForceUpdate();
-    var uniqId = safeUseId();
-    var innerId = id || uniqId;
-    var _rest$valueType = rest.valueType,
-      valueType = _rest$valueType === void 0 ? 'single' : _rest$valueType,
-      value = rest.value;
-    var offset = [0, 4];
-    var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      ref = _useState2[0],
-      setRef = _useState2[1];
-    var targetRef = useRef(null);
-    var chipsRefs = useRef([]);
-    var comboboxRef = useRef(null);
-    var itemsRefs = useRef([]);
-    var inputRef = useRef(null);
-    var handleRef = useForkRef(targetRef, outerRootRef);
-    var controlledRefs = {
-      targetRef: targetRef,
-      chipsRefs: chipsRefs,
-      selectRef: comboboxRef,
-      itemsRefs: itemsRefs,
-      inputRef: inputRef
-    };
-    var _useState3 = useState(opened),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isVisible = _useState4[0],
-      setIsVisible = _useState4[1];
-    var _useState5 = useState(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      search = _useState6[0],
-      setSearch = _useState6[1];
-    var _useState7 = useState(search),
-      _useState8 = _slicedToArray(_useState7, 2),
-      filterValue = _useState8[0],
-      setFilterValue = _useState8[1];
-
-    // INFO: нужно высчитывать для корректной работы портала
-    var dynamicTargetWidth = (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth;
-
-    // INFO: Из-за того, что классы передаются через ref,
-    // состояние пропсов после изменения view, size
-    // всегда предыдущее, поэтому нужно делать форс-ререндер
-    useDidMountEffect(function () {
-      forceUpdate();
-    }, [view, size]);
-    useEffect(function () {
-      if (disabled || readOnly) {
-        return;
-      }
-      setIsVisible(opened);
-    }, [opened, disabled, readOnly]);
-    useEffect(function () {
-      // INFO: Для кейсов, когда значение выбрано и нужно вывести весь список
-      if (opened) {
-        setFilterValue('');
-      }
-    }, []);
-    var onInnerToggle = function onInnerToggle(openValue, event) {
-      if (disabled || readOnly) {
-        return;
-      }
-
-      // INFO: Для кейсов, когда значение выбрано и нужно вывести весь список
-      if (!isVisible) {
-        setFilterValue('');
-      }
-      if (onToggle) {
-        onToggle(openValue, event);
-        return;
-      }
-      setIsVisible(openValue);
-    };
-    var closedWithoutChanges = useRef(true);
-    var updateValue = function updateValue(item, event) {
-      var _rest$onChangeValue2;
-      var newValue = item.dataset.value;
-      if (rest.valueType === 'multiple') {
-        var _rest$onChangeValue;
-        var _newSelected = getNewSelected(rest.value, newValue, rest.valueType);
-        (_rest$onChangeValue = rest.onChangeValue) === null || _rest$onChangeValue === void 0 || _rest$onChangeValue.call(rest, _newSelected);
-        return;
-      }
-      var newSelected = getNewSelected(rest.value, newValue, 'single');
-      (_rest$onChangeValue2 = rest.onChangeValue) === null || _rest$onChangeValue2 === void 0 || _rest$onChangeValue2.call(rest, newSelected);
-      onInnerToggle === null || onInnerToggle === void 0 || onInnerToggle(false, event);
-      closedWithoutChanges.current = false;
-    };
-    var onClickChildrenItem = function onClickChildrenItem(event) {
-      // INFO: Для корректной работы компонента Popper
-      event.stopPropagation();
-      var item = event.currentTarget;
-      updateValue(item, event);
-    };
-    var onChangeChipValue = function onChangeChipValue(newValue) {
-      var _rest$onChangeValue3;
-      if (rest.valueType !== 'multiple') {
-        return;
-      }
-      (_rest$onChangeValue3 = rest.onChangeValue) === null || _rest$onChangeValue3 === void 0 || _rest$onChangeValue3.call(rest, newValue);
-    };
-    var _useKeyNavigation = useKeyNavigation({
-        controlledRefs: controlledRefs,
-        opened: isVisible,
-        enumerationType: enumerationType,
-        valueType: valueType,
-        componentType: 'combobox',
-        value: value,
-        search: filterValue,
-        updateOpened: onInnerToggle,
-        updateValue: updateValue
-      }),
-      onKeyDownTarget = _useKeyNavigation.onKeyDownTarget,
-      onKeyDownSelect = _useKeyNavigation.onKeyDownSelect;
-    var childrenArray = Children.toArray(children);
-    var childrenMemo = getChildren(childrenArray, {
-      onClick: onClickChildrenItem,
-      childrenRefs: itemsRefs
-    }, value, filterValue, filterFunction).filter(Boolean);
-    var values = getValues(childrenArray, value);
-    var onSearch = function onSearch(newSearch, newOpened) {
-      setSearch(newSearch);
-      setFilterValue(newSearch);
-      setIsVisible(newOpened !== null && newOpened !== void 0 ? newOpened : true);
-    };
-    var onKeyDownHandle = function onKeyDownHandle(event) {
-      onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
-      onKeyDownTarget(event);
-    };
-    return /*#__PURE__*/React.createElement(StyledRoot, {
-      ref: comboboxRef
-    }, /*#__PURE__*/React.createElement(StyledNativeSelect, {
-      "aria-invalid": "false",
-      "aria-hidden": "true",
-      "aria-readonly": readOnly,
-      tabIndex: -1,
-      form: form,
-      name: name,
-      value: "".concat(value),
-      disabled: disabled || readOnly
-    }), /*#__PURE__*/React.createElement(StyledPopover, {
-      role: role,
-      opened: isVisible,
-      onToggle: onInnerToggle,
-      target: /*#__PURE__*/React.createElement(ComboboxTarget, _extends({
-        opened: isVisible,
-        values: values,
-        label: label,
-        placeholder: placeholder,
-        search: search,
-        enumerationType: enumerationType,
-        valueType: valueType,
-        readOnly: readOnly,
-        disabled: disabled,
-        size: size,
-        closedWithoutChanges: closedWithoutChanges,
-        ref: handleRef,
-        chipsRefs: chipsRefs,
-        inputRef: inputRef,
-        id: innerId,
-        onChange: onChangeChipValue,
-        onSearch: onSearch,
-        onKeyDown: onKeyDownHandle
-      }, rest)),
-      className: cx(ref === null || ref === void 0 ? void 0 : ref.classList.toString()) // INFO: Прокидываем стили для Popover
-      ,
-      id: innerId,
-      offset: offset,
-      placement: getPlacements(placement),
-      usePortal: usePortal,
-      selectWidth: dynamicTargetWidth,
-      frame: frame,
-      trigger: "click",
-      isFocusTrapped: false,
-      preventOverflow: false,
-      closeOnEsc: false,
-      closeOnOverlayClick: true
-    }, /*#__PURE__*/React.createElement(Root, {
-      ref: setRef,
-      view: view,
-      size: size
-    }, /*#__PURE__*/React.createElement(StyledCombobox, {
-      onKeyDown: onKeyDownSelect
-    }, childrenMemo.length ? childrenMemo : /*#__PURE__*/React.createElement(ComboboxItemNotFound, null, negativeResultContent)))));
-  });
-};
-export var comboboxConfig = {
-  name: 'Combobox',
-  tag: 'div',
-  layout: comboboxRoot,
-  base: '',
-  variations: {
-    view: {
-      css: viewCSS
-    },
-    size: {
-      css: sizeCSS
-    }
-  },
-  defaults: {
-    view: 'default',
-    size: 'm'
-  }
-};

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

@@ -1,26 +0,0 @@
-import styled from 'styled-components';
-import { component } from '../../engines';
-import { popoverClasses, popoverConfig } from '../Popover';
-import { tokens } from './Combobox.tokens';
-export var StyledRoot = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-gt7m6a-0"
-})(["width:100%;position:relative;& .", "{display:block;}"], popoverClasses.wrapper);
-export var StyledCombobox = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-gt7m6a-1"
-})(["box-sizing:border-box;background:var(", ");box-shadow:var(", ");border-radius:var(", ");width:var(", ");height:var(", ");padding:var(", ") var(", ") var(", ") var(", ");"], tokens.background, tokens.boxShadow, tokens.borderRadius, tokens.width, tokens.height, tokens.paddingTop, tokens.paddingRight, tokens.paddingBottom, tokens.paddingLeft);
-
-// issue #823
-var Popover = /*#__PURE__*/component(popoverConfig);
-export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
-  componentId: "plasma-new-hope__sc-gt7m6a-2"
-})(["display:block;.", ",.", "{width:", ";}"], /*#__PURE__*/String(popoverClasses.root), /*#__PURE__*/String(popoverClasses.target), function (_ref) {
-  var usePortal = _ref.usePortal,
-    selectWidth = _ref.selectWidth;
-  return usePortal ? "".concat(selectWidth, "px") : '100%';
-});
-export var ComboboxItemNotFound = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-gt7m6a-3"
-})(["text-align:center;padding:0.5rem;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight);
-export var StyledNativeSelect = /*#__PURE__*/styled.select.withConfig({
-  componentId: "plasma-new-hope__sc-gt7m6a-4"
-})(["display:none;appearance:none;-moz-appearance:none;-webkit-appearance:none;background:transparent;color:transparent;border:none;outline:none;opacity:0;position:absolute;inset:0;"]);