@salutejs/plasma-new-hope 0.119.0-canary.1344.10284816964.0 → 0.119.0-canary.1347.10280706154.0

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
@@ -6,7 +6,6 @@ import { SSRProvider } from '@salutejs/plasma-core';
 
 import { PopupProvider, popupClasses } from '../Popup/Popup';
 import { Button } from '../Button/Button';
-import { TextField } from '../TextField/TextField';
 import { WithTheme } from '../../../_helpers';
 
 import { Modal, modalClasses } from './Modal';
@@ -207,114 +206,3 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
     },
     render: (args) => <StoryModalDemo {...args} />,
 };
-
-const StyledModalAnimation = styled(Modal)`
-    /* stylelint-disable */
-    && .${popupClasses.root} {
-        animation: fadeIn 1s forwards;
-    }
-
-    &&.${popupClasses.endAnimation} .${popupClasses.root} {
-        animation: fadeOut 1s forwards;
-    }
-
-    && .${modalClasses.overlay} {
-        animation: overlayFadeIn 1s forwards;
-    }
-
-    &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
-        animation: overlayFadeOut 1s forwards;
-    }
-    /* stylelint-enable */
-
-    @keyframes overlayFadeIn {
-        from {
-            opacity: 0;
-        }
-
-        to {
-            opacity: 1;
-        }
-    }
-
-    @keyframes overlayFadeOut {
-        from {
-            opacity: 1;
-        }
-
-        to {
-            opacity: 0;
-        }
-    }
-
-    @keyframes fadeIn {
-        from {
-            opacity: 0;
-            transform: translate(-50%, 100%);
-        }
-
-        to {
-            opacity: 1;
-            transform: translate(-50%, -50%);
-        }
-    }
-
-    @keyframes fadeOut {
-        from {
-            opacity: 1;
-            transform: translate(-50%, -50%);
-        }
-
-        to {
-            opacity: 0;
-            transform: translate(-50%, 100%);
-        }
-    }
-`;
-
-const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
-    const ref = useRef(null);
-    const [isOpen, setIsOpen] = useState(false);
-
-    const close = useCallback(() => {
-        setIsOpen(false);
-    }, []);
-
-    return (
-        <SSRProvider>
-            <PopupProvider>
-                <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
-                <StyledModalAnimation
-                    id="modal"
-                    frame="theme-root"
-                    withAnimation
-                    onClose={() => setIsOpen(false)}
-                    isOpen={isOpen}
-                    placement={placement}
-                    offset={[offsetX, offsetY]}
-                    initialFocusRef={ref}
-                    {...rest}
-                >
-                    <Content>
-                        <TextField value="Text" onChange={() => {}} />
-                        <TextField ref={ref} value="Text2" onChange={() => {}} />
-                        <Button text="Закрыть" onClick={close} />
-                    </Content>
-                </StyledModalAnimation>
-            </PopupProvider>
-        </SSRProvider>
-    );
-};
-
-export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
-    args: {
-        placement: 'bottom',
-        withAnimation: true,
-        withBlur: false,
-        closeOnEsc: true,
-        closeOnOverlayClick: true,
-        offsetX: 0,
-        offsetY: 0,
-    },
-    render: (args) => <StoryModalAnimationDemo {...args} />,
-};

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

@@ -13,8 +13,8 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], _Accordion.accordionTokens.accordionGap, _Accordion.accordionTokens.accordionWidth, _Accordion.accordionTokens.accordionItemPadding, _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemBackground, _Accordion.accordionTokens.accordionItemTitleColor, _Accordion.accordionTokens.accordionItemTextColor, _Accordion.accordionTokens.accordionItemIconColor, _Accordion.accordionTokens.accordionItemFocus, _Accordion.accordionTokens.accordionBackground, _Accordion.accordionTokens.accordionItemBorder, _Accordion.accordionTokens.accordionItemBorderBottom, _Accordion.accordionTokens.accordionItemPaddingHorizontalLeft, _Accordion.accordionTokens.accordionItemPaddingHorizontal),
-      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], _Accordion.accordionTokens.accordionGap, _Accordion.accordionTokens.accordionWidth, _Accordion.accordionTokens.accordionItemPadding, _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemBackground, _Accordion.accordionTokens.accordionItemTitleColor, _Accordion.accordionTokens.accordionItemTextColor, _Accordion.accordionTokens.accordionItemIconColor, _Accordion.accordionTokens.accordionItemFocus, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionBackground, _Accordion.accordionTokens.accordionItemBorder, _Accordion.accordionTokens.accordionItemBorderBottom, _Accordion.accordionTokens.accordionItemPaddingHorizontalLeft)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], _Accordion.accordionTokens.accordionGap, _Accordion.accordionTokens.accordionWidth, _Accordion.accordionTokens.accordionItemPadding, _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemBackground, _Accordion.accordionTokens.accordionItemTitleColor, _Accordion.accordionTokens.accordionItemTextColor, _Accordion.accordionTokens.accordionItemFocus, _Accordion.accordionTokens.accordionBackground, _Accordion.accordionTokens.accordionItemBorder, _Accordion.accordionTokens.accordionItemBorderBottom, _Accordion.accordionTokens.accordionItemPaddingHorizontalLeft, _Accordion.accordionTokens.accordionItemPaddingHorizontal),
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.125rem;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], _Accordion.accordionTokens.accordionGap, _Accordion.accordionTokens.accordionWidth, _Accordion.accordionTokens.accordionItemPadding, _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemBackground, _Accordion.accordionTokens.accordionItemTitleColor, _Accordion.accordionTokens.accordionItemTextColor, _Accordion.accordionTokens.accordionItemFocus, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionBackground, _Accordion.accordionTokens.accordionItemBorder, _Accordion.accordionTokens.accordionItemBorderBottom, _Accordion.accordionTokens.accordionItemPaddingHorizontalLeft)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.0625rem;", ":1.25rem;", ":0.5rem;", ":0.875rem;", ":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-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Accordion.accordionTokens.accordionItemPaddingVertical, _Accordion.accordionTokens.accordionItemPaddingHorizontal, _Accordion.accordionTokens.accordionItemGap, _Accordion.accordionTokens.accordionItemBorderRadius, _Accordion.accordionTokens.accordionItemTitleFontFamily, _Accordion.accordionTokens.accordionItemTitleFontSize, _Accordion.accordionTokens.accordionItemTitleFontStyle, _Accordion.accordionTokens.accordionItemTitleFontWeight, _Accordion.accordionTokens.accordionItemTitleLetterSpacing, _Accordion.accordionTokens.accordionItemTitleLineHeight, _Accordion.accordionTokens.accordionItemTextFontFamily, _Accordion.accordionTokens.accordionItemTextFontSize, _Accordion.accordionTokens.accordionItemTextFontStyle, _Accordion.accordionTokens.accordionItemTextFontWeight, _Accordion.accordionTokens.accordionItemTextLetterSpacing, _Accordion.accordionTokens.accordionItemTextLineHeight),

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
@@ -6,7 +6,6 @@ import { SSRProvider } from '@salutejs/plasma-core';
 
 import { PopupProvider, popupClasses } from '../Popup/Popup';
 import { Button } from '../Button/Button';
-import { TextField } from '../TextField/TextField';
 import { WithTheme } from '../../../_helpers';
 
 import { Modal, modalClasses } from './Modal';
@@ -207,114 +206,3 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
     },
     render: (args) => <StoryModalDemo {...args} />,
 };
-
-const StyledModalAnimation = styled(Modal)`
-    /* stylelint-disable */
-    && .${popupClasses.root} {
-        animation: fadeIn 1s forwards;
-    }
-
-    &&.${popupClasses.endAnimation} .${popupClasses.root} {
-        animation: fadeOut 1s forwards;
-    }
-
-    && .${modalClasses.overlay} {
-        animation: overlayFadeIn 1s forwards;
-    }
-
-    &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
-        animation: overlayFadeOut 1s forwards;
-    }
-    /* stylelint-enable */
-
-    @keyframes overlayFadeIn {
-        from {
-            opacity: 0;
-        }
-
-        to {
-            opacity: 1;
-        }
-    }
-
-    @keyframes overlayFadeOut {
-        from {
-            opacity: 1;
-        }
-
-        to {
-            opacity: 0;
-        }
-    }
-
-    @keyframes fadeIn {
-        from {
-            opacity: 0;
-            transform: translate(-50%, 100%);
-        }
-
-        to {
-            opacity: 1;
-            transform: translate(-50%, -50%);
-        }
-    }
-
-    @keyframes fadeOut {
-        from {
-            opacity: 1;
-            transform: translate(-50%, -50%);
-        }
-
-        to {
-            opacity: 0;
-            transform: translate(-50%, 100%);
-        }
-    }
-`;
-
-const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
-    const ref = useRef(null);
-    const [isOpen, setIsOpen] = useState(false);
-
-    const close = useCallback(() => {
-        setIsOpen(false);
-    }, []);
-
-    return (
-        <SSRProvider>
-            <PopupProvider>
-                <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
-                <StyledModalAnimation
-                    id="modal"
-                    frame="theme-root"
-                    withAnimation
-                    onClose={() => setIsOpen(false)}
-                    isOpen={isOpen}
-                    placement={placement}
-                    offset={[offsetX, offsetY]}
-                    initialFocusRef={ref}
-                    {...rest}
-                >
-                    <Content>
-                        <TextField value="Text" onChange={() => {}} />
-                        <TextField ref={ref} value="Text2" onChange={() => {}} />
-                        <Button text="Закрыть" onClick={close} />
-                    </Content>
-                </StyledModalAnimation>
-            </PopupProvider>
-        </SSRProvider>
-    );
-};
-
-export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
-    args: {
-        placement: 'bottom',
-        withAnimation: true,
-        withBlur: false,
-        closeOnEsc: true,
-        closeOnOverlayClick: true,
-        offsetX: 0,
-        offsetY: 0,
-    },
-    render: (args) => <StoryModalAnimationDemo {...args} />,
-};

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

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "useDidMountEffect", {
     return _useDidMountEffect.useDidMountEffect;
   }
 });
-Object.defineProperty(exports, "useFocusTrap", {
-  enumerable: true,
-  get: function get() {
-    return _useFocusTrap.useFocusTrap;
-  }
-});
 Object.defineProperty(exports, "useForceUpdate", {
   enumerable: true,
   get: function get() {
@@ -46,7 +40,6 @@ Object.defineProperty(exports, "useUniqId", {
   }
 });
 var _useUniqId = /*#__PURE__*/require("./useUniqId");
-var _useFocusTrap = /*#__PURE__*/require("./useFocusTrap");
 var _usePreviousValue = /*#__PURE__*/require("./usePreviousValue");
 var _useForceUpdate = /*#__PURE__*/require("./useForceUpdate");
 var _useDidMountEffect = /*#__PURE__*/require("./useDidMountEffect");

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

@@ -23,7 +23,6 @@ export var tokens = {
   accordionItemFocus: '--plasma-accordion-item-focus',
   accordionItemBorder: '--plasma-accordion-item-border',
   accordionItemBorderBottom: '--plasma-accordion-item-border-bottom',
-  accordionItemIconColor: '--plasma-accordion-item-color-icon',
   accordionItemTitleColor: '--plasma-accordion-item-title-color',
   accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',
   accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',

package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js

@@ -33,10 +33,10 @@ export var StyledAccordionBody = /*#__PURE__*/styled.div.withConfig({
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");overflow:hidden;padding-right:var(", ");padding-left:var(", ");text-align:left;"], tokens.accordionItemTextColor, tokens.accordionItemTextFontFamily, tokens.accordionItemTextFontSize, tokens.accordionItemTextFontWeight, tokens.accordionItemTextFontStyle, tokens.accordionItemTextLetterSpacing, tokens.accordionItemTextLineHeight, tokens.accordionItemPaddingHorizontal, tokens.accordionItemPaddingHorizontalLeft);
 export var StyledArrow = /*#__PURE__*/styled(IconChevronDownFill).withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-8"
-})(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemIconColor);
+})(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemTextColor);
 export var StyledMinus = /*#__PURE__*/styled(IconMinus).withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-9"
-})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
+})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemTextColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
 export var StyledPlus = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-10"
 })(["position:relative;height:1rem;display:flex;align-items:center;justify-content:center;width:1rem;"]);

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

@@ -1,4 +1,4 @@
-var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch"];
+var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch"];
 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."); }
@@ -39,6 +39,7 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
       onScroll = _ref.onScroll,
       listMaxHeight = _ref.listMaxHeight,
       listWidth = _ref.listWidth,
+      portal = _ref.portal,
       filter = _ref.filter,
       onSuggestionSelect = _ref.onSuggestionSelect,
       _ref$threshold = _ref.threshold,
@@ -119,6 +120,8 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
       offset: [0, 0],
       placement: getPlacements('bottom'),
       isFocusTrapped: false,
+      usePortal: Boolean(portal),
+      frame: portal,
       target: /*#__PURE__*/React.createElement(StyledTextField, _extends({
         value: value,
         onChange: handleChange,
@@ -146,7 +149,13 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
       preventOverflow: false,
       ref: targetRef,
       listWidth: listWidth
-    }, renderList && renderList(finalResults) || Boolean(finalResults.length) && /*#__PURE__*/React.createElement(Ul, {
+    }, renderList && renderList(finalResults) || Boolean(finalResults.length) && /*#__PURE__*/React.createElement(Root, {
+      view: view,
+      size: size,
+      labelPlacement: labelPlacement,
+      disabled: disabled,
+      readOnly: readOnly
+    }, /*#__PURE__*/React.createElement(Ul, {
       id: listId,
       role: "listbox",
       "aria-label": label,
@@ -160,7 +169,7 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
         id: "".concat(listId, "/").concat(index),
         focused: focused === index
       });
-    }), renderListEnd && /*#__PURE__*/React.createElement(InfiniteLoaderWrapper, null, renderListEnd()))), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
+    }), renderListEnd && /*#__PURE__*/React.createElement(InfiniteLoaderWrapper, null, renderListEnd())))), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
       id: helperTextId,
       disabled: disabled,
       readOnly: readOnly