@salutejs/plasma-new-hope 0.170.0-dev.0 → 0.171.0-canary.1484.11400899769.0

package/emotion/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { ComponentProps, ReactNode } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -7,6 +7,8 @@ import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { accordionConfig } from '../../../../components/Accordion';
 import { Pin } from '../../../../utils/roundness';
+import { IconButton } from '../IconButton/IconButton';
+import { IconPlus } from '../../../../components/_Icon';
 
 import { config } from './Accordion.config';
 import { Accordion, AccordionItem } from './Accordion';
@@ -91,3 +93,63 @@ export const Default: StoryObj<AccordionProps> = {
         );
     },
 };
+
+const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
+
+const ControlledAccordion = (props: AccordionProps) => {
+    const args = { ...props, text: undefined };
+    const [activeFirst, setActiveFirst] = useState(false);
+    const [activeSecond, setActiveSecond] = useState(false);
+    const [activeThree, setActiveThree] = useState(false);
+
+    return (
+        <Accordion {...args}>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeFirst}
+            >
+                {args.body}
+            </AccordionItem>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeSecond}
+            >
+                {args.body}
+            </AccordionItem>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeThree}
+            >
+                {args.body}
+            </AccordionItem>
+        </Accordion>
+    );
+};
+
+export const Controlled: StoryObj<AccordionProps> = {
+    render: (props: AccordionProps) => ControlledAccordion(props),
+};

package/emotion/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { ComponentProps, ReactNode } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -7,6 +7,8 @@ import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { accordionConfig } from '../../../../components/Accordion';
 import { Pin } from '../../../../utils/roundness';
+import { IconButton } from '../IconButton/IconButton';
+import { IconPlus } from '../../../../components/_Icon';
 
 import { config } from './Accordion.config';
 import { Accordion, AccordionItem } from './Accordion';
@@ -91,3 +93,63 @@ export const Default: StoryObj<AccordionProps> = {
         );
     },
 };
+
+const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
+
+const ControlledAccordion = (props: AccordionProps) => {
+    const args = { ...props, text: undefined };
+    const [activeFirst, setActiveFirst] = useState(false);
+    const [activeSecond, setActiveSecond] = useState(false);
+    const [activeThree, setActiveThree] = useState(false);
+
+    return (
+        <Accordion {...args}>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeFirst}
+            >
+                {args.body}
+            </AccordionItem>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeSecond}
+            >
+                {args.body}
+            </AccordionItem>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeThree}
+            >
+                {args.body}
+            </AccordionItem>
+        </Accordion>
+    );
+};
+
+export const Controlled: StoryObj<AccordionProps> = {
+    render: (props: AccordionProps) => ControlledAccordion(props),
+};

package/es/components/Accordion/ui/AccordionItem/AccordionItem.js

@@ -1,12 +1,12 @@
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
 import { convertRoundnessMatrix } from '../../../../utils/roundness.js';
 import { classes, tokens } from '../../Accordion.tokens.js';
 import { cx } from '../../../../utils/index.js';
 import { StyledAccordionItem, StyledAccordionHeader, StyledAccordionHeaderLeft, StyledAccordionContentLeft, StyledAccordionTitle, StyledAccordionContentRight, StyledAccordionBodyAnimate, StyledAccordionBody, StyledArrow, StyledPlus, StyledMinus } from './AccordionItem.styles.js';
 
 var _StyledMinus, _StyledArrow;
-var AccordionItem = function AccordionItem(_ref) {
+var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
   var _ref2;
   var value = _ref.value,
     contentRight = _ref.contentRight,
@@ -24,8 +24,10 @@ var AccordionItem = function AccordionItem(_ref) {
     disabled = _ref.disabled,
     _ref$alignWithTitle = _ref.alignWithTitle,
     alignWithTitle = _ref$alignWithTitle === void 0 ? true : _ref$alignWithTitle,
+    opened = _ref.opened,
     view = _ref.view,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    onClick = _ref.onClick;
   var key = (_ref2 = eventKey !== null && eventKey !== void 0 ? eventKey : index) !== null && _ref2 !== void 0 ? _ref2 : 0;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -38,6 +40,9 @@ var AccordionItem = function AccordionItem(_ref) {
     if (onChange) {
       onChange(key, !value);
     }
+    if (onClick) {
+      onClick(key, !value);
+    }
   };
   var leftContentRef = useRef(null);
   useEffect(function () {
@@ -46,11 +51,11 @@ var AccordionItem = function AccordionItem(_ref) {
     var leftPaddingBody = leftContentWidth && (alignWithTitle || view === 'clear') ? "calc(".concat(leftContentWidth, "px + var(").concat(tokens.accordionItemGap, "))") : 0;
     setLeftPadding(leftPaddingBody);
   }, [value, type, leftContentRef, setLeftPadding]);
-  var openedBodyClass = value ? classes.accordionItemShowBody : undefined;
-  var StyledAnimationPLus = function StyledAnimationPLus() {
+  var openedBodyClass = (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
+  var StyledAnimationPlus = function StyledAnimationPlus() {
     return /*#__PURE__*/React.createElement(StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/React.createElement(StyledMinus, {
       size: "xs",
-      color: "inhert"
+      color: "inherit"
     })), /*#__PURE__*/React.createElement(StyledMinus, {
       size: "xs",
       color: "inhert",
@@ -61,14 +66,15 @@ var AccordionItem = function AccordionItem(_ref) {
   var disabledClass = disabled ? classes.accordionDisabled : '';
   var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? _StyledArrow || (_StyledArrow = /*#__PURE__*/React.createElement(StyledArrow, {
     size: "xs",
-    color: "inhert"
+    color: "inherit"
   })) : undefined;
-  var leftContentRotate = type === 'arrow' && value ? classes.accordionItemShowBody : undefined;
-  var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPLus, null) : undefined;
-  var rightContentRotate = type === 'sign' && value ? classes.accordionItemShowBody : undefined;
+  var leftContentRotate = type === 'arrow' && (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
+  var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPlus, null) : undefined;
+  var rightContentRotate = type === 'sign' && (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
   return /*#__PURE__*/React.createElement(StyledAccordionItem, {
     className: cx(classes.accordionItem, className, disabledClass),
     key: key,
+    ref: outerRef,
     style: _objectSpread2({
       borderRadius: accordionBorderRadius
     }, style)
@@ -76,17 +82,17 @@ var AccordionItem = function AccordionItem(_ref) {
     role: "tab",
     tabIndex: 0,
     onClick: handleOpen,
-    "aria-expanded": value,
+    "aria-expanded": opened !== null && opened !== void 0 ? opened : value,
     "aria-controls": "accordion-item-section".concat(key),
     id: "accordion-item-".concat(key)
   }, /*#__PURE__*/React.createElement(StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/React.createElement(StyledAccordionContentLeft, {
     ref: leftContentRef,
     className: leftContentRotate
-  }, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
+  }, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), contentRight || /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
     className: rightContentRotate
   }, rightContent && rightContent)), /*#__PURE__*/React.createElement(StyledAccordionBodyAnimate, {
     "aria-labelledby": "accordion-item-".concat(key),
-    "aria-hidden": !value,
+    "aria-hidden": !(opened !== null && opened !== void 0 ? opened : value),
     id: "accordion-item-section".concat(key),
     className: cx(openedBodyClass),
     style: {
@@ -95,7 +101,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, /*#__PURE__*/React.createElement(StyledAccordionBody, {
     className: classes.accordionItemBody
   }, children)));
-};
+});
 
 export { AccordionItem };
 //# sourceMappingURL=AccordionItem.js.map

package/es/components/Accordion/ui/AccordionItem/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport { convertRoundnessMatrix } from '../../../../utils/roundness';\nimport { classes, tokens } from '../../Accordion.tokens';\nimport { cx } from '../../../../utils';\n\nimport {\n    StyledAccordionItem,\n    StyledAccordionHeader,\n    StyledAccordionBody,\n    StyledAccordionTitle,\n    StyledAccordionContentLeft,\n    StyledAccordionHeaderLeft,\n    StyledAccordionContentRight,\n    StyledArrow,\n    StyledMinus,\n    StyledPlus,\n    StyledAccordionBodyAnimate,\n} from './AccordionItem.styles';\nimport type { AccordionItemProps } from './AccordionItem.types';\n\nexport const AccordionItem: React.FC<AccordionItemProps> = ({\n    value,\n    contentRight,\n    contentLeft,\n    title,\n    pin = 'square-square',\n    children,\n    type = 'sign',\n    index,\n    className,\n    style,\n    eventKey,\n    disabled,\n    alignWithTitle = true,\n    view,\n    onChange,\n}) => {\n    const key = eventKey ?? index ?? 0;\n\n    const [leftPadding, setLeftPadding] = useState<string | number | null>();\n\n    const handleOpen = () => {\n        if (disabled) {\n            return;\n        }\n        if (onChange) {\n            onChange(key, !value);\n        }\n    };\n\n    const leftContentRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const leftContentWidth = leftContentRef?.current?.offsetWidth ?? 0;\n        const leftPaddingBody =\n            leftContentWidth && (alignWithTitle || view === 'clear')\n                ? `calc(${leftContentWidth}px + var(${tokens.accordionItemGap}))`\n                : 0;\n        setLeftPadding(leftPaddingBody);\n    }, [value, type, leftContentRef, setLeftPadding]);\n\n    const openedBodyClass = value ? classes.accordionItemShowBody : undefined;\n\n    const StyledAnimationPLus = () => (\n        <StyledPlus>\n            <StyledMinus size=\"xs\" color=\"inhert\" />\n            <StyledMinus\n                size=\"xs\"\n                color=\"inhert\"\n                className={openedBodyClass ?? classes.accordionPlusAnimationElement}\n            />\n        </StyledPlus>\n    );\n\n    const accordionBorderRadius = convertRoundnessMatrix(pin, `var(${tokens.accordionItemBorderRadius})`, '1.5rem');\n    const disabledClass = disabled ? classes.accordionDisabled : '';\n\n    const leftContent = contentLeft ?? (type === 'arrow' ? <StyledArrow size=\"xs\" color=\"inhert\" /> : undefined);\n    const leftContentRotate = type === 'arrow' && value ? classes.accordionItemShowBody : undefined;\n\n    const rightContent = contentRight ?? (type === 'sign' ? <StyledAnimationPLus /> : undefined);\n    const rightContentRotate = type === 'sign' && value ? classes.accordionItemShowBody : undefined;\n\n    return (\n        <StyledAccordionItem\n            className={cx(classes.accordionItem, className, disabledClass)}\n            key={key}\n            style={{ borderRadius: accordionBorderRadius, ...style }}\n        >\n            <StyledAccordionHeader\n                role=\"tab\"\n                tabIndex={0}\n                onClick={handleOpen}\n                aria-expanded={value}\n                aria-controls={`accordion-item-section${key}`}\n                id={`accordion-item-${key}`}\n            >\n                <StyledAccordionHeaderLeft>\n                    {leftContent && (\n                        <StyledAccordionContentLeft ref={leftContentRef} className={leftContentRotate}>\n                            {leftContent}\n                        </StyledAccordionContentLeft>\n                    )}\n                    <StyledAccordionTitle>{title}</StyledAccordionTitle>\n                </StyledAccordionHeaderLeft>\n\n                <StyledAccordionContentRight className={rightContentRotate}>\n                    {rightContent && rightContent}\n                </StyledAccordionContentRight>\n            </StyledAccordionHeader>\n            <StyledAccordionBodyAnimate\n                aria-labelledby={`accordion-item-${key}`}\n                aria-hidden={!value}\n                id={`accordion-item-section${key}`}\n                className={cx(openedBodyClass)}\n                style={{ paddingLeft: `${leftPadding}` }}\n            >\n                <StyledAccordionBody className={classes.accordionItemBody}>{children}</StyledAccordionBody>\n            </StyledAccordionBodyAnimate>\n        </StyledAccordionItem>\n    );\n};\n"],"names":["AccordionItem","_ref","_ref2","value","contentRight","contentLeft","title","_ref$pin","pin","children","_ref$type","type","index","className","style","eventKey","disabled","_ref$alignWithTitle","alignWithTitle","view","onChange","key","_useState","useState","_useState2","_slicedToArray","leftPadding","setLeftPadding","handleOpen","leftContentRef","useRef","useEffect","_leftContentRef$curre","_leftContentRef$curre2","leftContentWidth","current","offsetWidth","leftPaddingBody","concat","tokens","accordionItemGap","openedBodyClass","classes","accordionItemShowBody","undefined","StyledAnimationPLus","React","createElement","StyledPlus","_StyledMinus","StyledMinus","size","color","accordionPlusAnimationElement","accordionBorderRadius","convertRoundnessMatrix","accordionItemBorderRadius","disabledClass","accordionDisabled","leftContent","_StyledArrow","StyledArrow","leftContentRotate","rightContent","rightContentRotate","StyledAccordionItem","cx","accordionItem","_objectSpread","borderRadius","StyledAccordionHeader","role","tabIndex","onClick","id","StyledAccordionHeaderLeft","StyledAccordionContentLeft","ref","StyledAccordionTitle","StyledAccordionContentRight","StyledAccordionBodyAnimate","paddingLeft","StyledAccordionBody","accordionItemBody"],"mappings":"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"}
+{"version":3,"file":"AccordionItem.js","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import React, { useState, useRef, forwardRef, useEffect } from 'react';\n\nimport { convertRoundnessMatrix } from '../../../../utils/roundness';\nimport { classes, tokens } from '../../Accordion.tokens';\nimport { cx } from '../../../../utils';\n\nimport {\n    StyledAccordionItem,\n    StyledAccordionHeader,\n    StyledAccordionBody,\n    StyledAccordionTitle,\n    StyledAccordionContentLeft,\n    StyledAccordionHeaderLeft,\n    StyledAccordionContentRight,\n    StyledArrow,\n    StyledMinus,\n    StyledPlus,\n    StyledAccordionBodyAnimate,\n} from './AccordionItem.styles';\nimport type { AccordionItemProps } from './AccordionItem.types';\n\nexport const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(\n    (\n        {\n            value,\n            contentRight,\n            contentLeft,\n            title,\n            pin = 'square-square',\n            children,\n            type = 'sign',\n            index,\n            className,\n            style,\n            eventKey,\n            disabled,\n            alignWithTitle = true,\n            opened,\n            view,\n            onChange,\n            onClick,\n        },\n        outerRef,\n    ) => {\n        const key = eventKey ?? index ?? 0;\n\n        const [leftPadding, setLeftPadding] = useState<string | number | null>();\n\n        const handleOpen = () => {\n            if (disabled) {\n                return;\n            }\n            if (onChange) {\n                onChange(key, !value);\n            }\n            if (onClick) {\n                onClick(key, !value);\n            }\n        };\n\n        const leftContentRef = useRef<HTMLDivElement>(null);\n\n        useEffect(() => {\n            const leftContentWidth = leftContentRef?.current?.offsetWidth ?? 0;\n            const leftPaddingBody =\n                leftContentWidth && (alignWithTitle || view === 'clear')\n                    ? `calc(${leftContentWidth}px + var(${tokens.accordionItemGap}))`\n                    : 0;\n            setLeftPadding(leftPaddingBody);\n        }, [value, type, leftContentRef, setLeftPadding]);\n\n        const openedBodyClass = opened ?? value ? classes.accordionItemShowBody : undefined;\n\n        const StyledAnimationPlus = () => (\n            <StyledPlus>\n                <StyledMinus size=\"xs\" color=\"inherit\" />\n                <StyledMinus\n                    size=\"xs\"\n                    color=\"inhert\"\n                    className={openedBodyClass ?? classes.accordionPlusAnimationElement}\n                />\n            </StyledPlus>\n        );\n\n        const accordionBorderRadius = convertRoundnessMatrix(pin, `var(${tokens.accordionItemBorderRadius})`, '1.5rem');\n        const disabledClass = disabled ? classes.accordionDisabled : '';\n\n        const leftContent = contentLeft ?? (type === 'arrow' ? <StyledArrow size=\"xs\" color=\"inherit\" /> : undefined);\n        const leftContentRotate = type === 'arrow' && (opened ?? value) ? classes.accordionItemShowBody : undefined;\n\n        const rightContent = contentRight ?? (type === 'sign' ? <StyledAnimationPlus /> : undefined);\n        const rightContentRotate = type === 'sign' && (opened ?? value) ? classes.accordionItemShowBody : undefined;\n\n        return (\n            <StyledAccordionItem\n                className={cx(classes.accordionItem, className, disabledClass)}\n                key={key}\n                ref={outerRef}\n                style={{ borderRadius: accordionBorderRadius, ...style }}\n            >\n                <StyledAccordionHeader\n                    role=\"tab\"\n                    tabIndex={0}\n                    onClick={handleOpen}\n                    aria-expanded={opened ?? value}\n                    aria-controls={`accordion-item-section${key}`}\n                    id={`accordion-item-${key}`}\n                >\n                    <StyledAccordionHeaderLeft>\n                        {leftContent && (\n                            <StyledAccordionContentLeft ref={leftContentRef} className={leftContentRotate}>\n                                {leftContent}\n                            </StyledAccordionContentLeft>\n                        )}\n                        <StyledAccordionTitle>{title}</StyledAccordionTitle>\n                    </StyledAccordionHeaderLeft>\n\n                    {contentRight || (\n                        <StyledAccordionContentRight className={rightContentRotate}>\n                            {rightContent && rightContent}\n                        </StyledAccordionContentRight>\n                    )}\n                </StyledAccordionHeader>\n                <StyledAccordionBodyAnimate\n                    aria-labelledby={`accordion-item-${key}`}\n                    aria-hidden={!(opened ?? value)}\n                    id={`accordion-item-section${key}`}\n                    className={cx(openedBodyClass)}\n                    style={{ paddingLeft: `${leftPadding}` }}\n                >\n                    <StyledAccordionBody className={classes.accordionItemBody}>{children}</StyledAccordionBody>\n                </StyledAccordionBodyAnimate>\n            </StyledAccordionItem>\n        );\n    },\n);\n"],"names":["AccordionItem","forwardRef","_ref","outerRef","_ref2","value","contentRight","contentLeft","title","_ref$pin","pin","children","_ref$type","type","index","className","style","eventKey","disabled","_ref$alignWithTitle","alignWithTitle","opened","view","onChange","onClick","key","_useState","useState","_useState2","_slicedToArray","leftPadding","setLeftPadding","handleOpen","leftContentRef","useRef","useEffect","_leftContentRef$curre","_leftContentRef$curre2","leftContentWidth","current","offsetWidth","leftPaddingBody","concat","tokens","accordionItemGap","openedBodyClass","classes","accordionItemShowBody","undefined","StyledAnimationPlus","React","createElement","StyledPlus","_StyledMinus","StyledMinus","size","color","accordionPlusAnimationElement","accordionBorderRadius","convertRoundnessMatrix","accordionItemBorderRadius","disabledClass","accordionDisabled","leftContent","_StyledArrow","StyledArrow","leftContentRotate","rightContent","rightContentRotate","StyledAccordionItem","cx","accordionItem","ref","_objectSpread","borderRadius","StyledAccordionHeader","role","tabIndex","id","StyledAccordionHeaderLeft","StyledAccordionContentLeft","StyledAccordionTitle","StyledAccordionContentRight","StyledAccordionBodyAnimate","paddingLeft","StyledAccordionBody","accordionItemBody"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.170.0-dev.0",
+  "version": "0.171.0-canary.1484.11400899769.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -124,5 +124,5 @@
     "react-popper": "2.3.0",
     "storeon": "3.1.5"
   },
-  "gitHead": "b26c817924c499d2d3d212799437fc9c9627863a"
+  "gitHead": "f817b95324448f5e8a40fd84c3071cf2435786b8"
 }

package/styled-components/cjs/components/Accordion/Accordion.template-doc.mdx

@@ -135,6 +135,38 @@ import TabItem from '@theme/TabItem';
     </TabItem>
 </Tabs>
 
+### Использование Accordion в Controlled варианте
+
+```tsx live
+    import React, { useState } from 'react';
+    import { Accordion, AccordionItem, IconButton } from '@salutejs/{{ package }}';
+    import { IconPlus } from '@salutejs/plasma-icons';
+
+    export function App() {
+        const [activeFirst, setActiveFirst] = useState(false);
+        const [activeSecond, setActiveSecond] = useState(false);
+        const [activeThree, setActiveThree] = useState(false);
+
+        const contentRight = (active, setActive) => {
+            return (
+                <IconButton view="secondary" size="s" onClick={() => setActive(!active)}>
+                    <IconPlus size="xs" />
+                </IconButton>
+            )
+        }
+
+        return (
+            <div>
+                <Accordion size="s" singleActive={true}>
+                    <AccordionItem opened={activeFirst} contentRight={contentRight(activeFirst, setActiveFirst)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                    <AccordionItem opened={activeSecond} contentRight={contentRight(activeSecond, setActiveSecond)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                    <AccordionItem opened={activeThree} contentRight={contentRight(activeThree, setActiveThree)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                </Accordion>
+            </div>
+        );
+    }
+    ```
+
 ### Использование Accordion SingleActive
 
 ```tsx live

package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js

@@ -24,7 +24,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
-var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
+var AccordionItem = exports.AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRef) {
   var _ref2;
   var value = _ref.value,
     contentRight = _ref.contentRight,
@@ -42,8 +42,10 @@ var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
     disabled = _ref.disabled,
     _ref$alignWithTitle = _ref.alignWithTitle,
     alignWithTitle = _ref$alignWithTitle === void 0 ? true : _ref$alignWithTitle,
+    opened = _ref.opened,
     view = _ref.view,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    onClick = _ref.onClick;
   var key = (_ref2 = eventKey !== null && eventKey !== void 0 ? eventKey : index) !== null && _ref2 !== void 0 ? _ref2 : 0;
   var _useState = (0, _react.useState)(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -56,6 +58,9 @@ var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
     if (onChange) {
       onChange(key, !value);
     }
+    if (onClick) {
+      onClick(key, !value);
+    }
   };
   var leftContentRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
@@ -64,11 +69,11 @@ var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
     var leftPaddingBody = leftContentWidth && (alignWithTitle || view === 'clear') ? "calc(".concat(leftContentWidth, "px + var(").concat(_Accordion.tokens.accordionItemGap, "))") : 0;
     setLeftPadding(leftPaddingBody);
   }, [value, type, leftContentRef, setLeftPadding]);
-  var openedBodyClass = value ? _Accordion.classes.accordionItemShowBody : undefined;
-  var StyledAnimationPLus = function StyledAnimationPLus() {
+  var openedBodyClass = (opened !== null && opened !== void 0 ? opened : value) ? _Accordion.classes.accordionItemShowBody : undefined;
+  var StyledAnimationPlus = function StyledAnimationPlus() {
     return /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledMinus, {
       size: "xs",
-      color: "inhert"
+      color: "inherit"
     })), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledMinus, {
       size: "xs",
       color: "inhert",
@@ -79,14 +84,15 @@ var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
   var disabledClass = disabled ? _Accordion.classes.accordionDisabled : '';
   var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? _StyledArrow || (_StyledArrow = /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledArrow, {
     size: "xs",
-    color: "inhert"
+    color: "inherit"
   })) : undefined;
-  var leftContentRotate = type === 'arrow' && value ? _Accordion.classes.accordionItemShowBody : undefined;
-  var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/_react["default"].createElement(StyledAnimationPLus, null) : undefined;
-  var rightContentRotate = type === 'sign' && value ? _Accordion.classes.accordionItemShowBody : undefined;
+  var leftContentRotate = type === 'arrow' && (opened !== null && opened !== void 0 ? opened : value) ? _Accordion.classes.accordionItemShowBody : undefined;
+  var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/_react["default"].createElement(StyledAnimationPlus, null) : undefined;
+  var rightContentRotate = type === 'sign' && (opened !== null && opened !== void 0 ? opened : value) ? _Accordion.classes.accordionItemShowBody : undefined;
   return /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionItem, {
     className: (0, _utils.cx)(_Accordion.classes.accordionItem, className, disabledClass),
     key: key,
+    ref: outerRef,
     style: _objectSpread({
       borderRadius: accordionBorderRadius
     }, style)
@@ -94,17 +100,17 @@ var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
     role: "tab",
     tabIndex: 0,
     onClick: handleOpen,
-    "aria-expanded": value,
+    "aria-expanded": opened !== null && opened !== void 0 ? opened : value,
     "aria-controls": "accordion-item-section".concat(key),
     id: "accordion-item-".concat(key)
   }, /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionContentLeft, {
     ref: leftContentRef,
     className: leftContentRotate
-  }, leftContent), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionTitle, null, title)), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionContentRight, {
+  }, leftContent), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionTitle, null, title)), contentRight || /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionContentRight, {
     className: rightContentRotate
   }, rightContent && rightContent)), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionBodyAnimate, {
     "aria-labelledby": "accordion-item-".concat(key),
-    "aria-hidden": !value,
+    "aria-hidden": !(opened !== null && opened !== void 0 ? opened : value),
     id: "accordion-item-section".concat(key),
     className: (0, _utils.cx)(openedBodyClass),
     style: {
@@ -113,4 +119,4 @@ var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionBody, {
     className: _Accordion.classes.accordionItemBody
   }, children)));
-};
+});

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { ComponentProps, ReactNode } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -7,6 +7,8 @@ import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { accordionConfig } from '../../../../components/Accordion';
 import { Pin } from '../../../../utils/roundness';
+import { IconButton } from '../IconButton/IconButton';
+import { IconPlus } from '../../../../components/_Icon';
 
 import { config } from './Accordion.config';
 import { Accordion, AccordionItem } from './Accordion';
@@ -91,3 +93,63 @@ export const Default: StoryObj<AccordionProps> = {
         );
     },
 };
+
+const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
+
+const ControlledAccordion = (props: AccordionProps) => {
+    const args = { ...props, text: undefined };
+    const [activeFirst, setActiveFirst] = useState(false);
+    const [activeSecond, setActiveSecond] = useState(false);
+    const [activeThree, setActiveThree] = useState(false);
+
+    return (
+        <Accordion {...args}>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeFirst}
+            >
+                {args.body}
+            </AccordionItem>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeSecond}
+            >
+                {args.body}
+            </AccordionItem>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeThree}
+            >
+                {args.body}
+            </AccordionItem>
+        </Accordion>
+    );
+};
+
+export const Controlled: StoryObj<AccordionProps> = {
+    render: (props: AccordionProps) => ControlledAccordion(props),
+};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { ComponentProps, ReactNode } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -7,6 +7,8 @@ import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { accordionConfig } from '../../../../components/Accordion';
 import { Pin } from '../../../../utils/roundness';
+import { IconButton } from '../IconButton/IconButton';
+import { IconPlus } from '../../../../components/_Icon';
 
 import { config } from './Accordion.config';
 import { Accordion, AccordionItem } from './Accordion';
@@ -91,3 +93,63 @@ export const Default: StoryObj<AccordionProps> = {
         );
     },
 };
+
+const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
+
+const ControlledAccordion = (props: AccordionProps) => {
+    const args = { ...props, text: undefined };
+    const [activeFirst, setActiveFirst] = useState(false);
+    const [activeSecond, setActiveSecond] = useState(false);
+    const [activeThree, setActiveThree] = useState(false);
+
+    return (
+        <Accordion {...args}>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeFirst}
+            >
+                {args.body}
+            </AccordionItem>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeSecond}
+            >
+                {args.body}
+            </AccordionItem>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeThree}
+            >
+                {args.body}
+            </AccordionItem>
+        </Accordion>
+    );
+};
+
+export const Controlled: StoryObj<AccordionProps> = {
+    render: (props: AccordionProps) => ControlledAccordion(props),
+};