@salutejs/plasma-new-hope 0.171.0-canary.1484.11400899769.0 → 0.171.0-canary.1491.11400434499.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (25) hide show
  1. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +13 -19
  2. package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
  3. package/emotion/cjs/components/Accordion/Accordion.template-doc.mdx +0 -32
  4. package/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +13 -19
  5. package/emotion/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +1 -63
  6. package/emotion/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +1 -63
  7. package/emotion/es/components/Accordion/Accordion.template-doc.mdx +0 -32
  8. package/emotion/es/components/Accordion/ui/AccordionItem/AccordionItem.js +14 -20
  9. package/emotion/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +1 -63
  10. package/emotion/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +1 -63
  11. package/es/components/Accordion/ui/AccordionItem/AccordionItem.js +14 -20
  12. package/es/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
  13. package/package.json +4 -4
  14. package/styled-components/cjs/components/Accordion/Accordion.template-doc.mdx +0 -32
  15. package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +13 -19
  16. package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +1 -63
  17. package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +1 -63
  18. package/styled-components/es/components/Accordion/Accordion.template-doc.mdx +0 -32
  19. package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.js +14 -20
  20. package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +1 -63
  21. package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +1 -63
  22. package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts +2 -17
  23. package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts.map +1 -1
  24. package/types/components/Accordion/ui/AccordionItem/AccordionItem.types.d.ts +9 -17
  25. package/types/components/Accordion/ui/AccordionItem/AccordionItem.types.d.ts.map +1 -1
package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js CHANGED
@@ -10,7 +10,7 @@ var index = require('../../../../utils/index.js');
10
10
  var AccordionItem_styles = require('./AccordionItem.styles.js');
11
11
 
12
12
  var _StyledMinus, _StyledArrow;
13
- var AccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
13
+ var AccordionItem = function AccordionItem(_ref) {
14
14
  var _ref2;
15
15
  var value = _ref.value,
16
16
  contentRight = _ref.contentRight,
@@ -28,10 +28,8 @@ var AccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
28
28
  disabled = _ref.disabled,
29
29
  _ref$alignWithTitle = _ref.alignWithTitle,
30
30
  alignWithTitle = _ref$alignWithTitle === void 0 ? true : _ref$alignWithTitle,
31
- opened = _ref.opened,
32
31
  view = _ref.view,
33
- onChange = _ref.onChange,
34
- onClick = _ref.onClick;
32
+ onChange = _ref.onChange;
35
33
  var key = (_ref2 = eventKey !== null && eventKey !== void 0 ? eventKey : index$1) !== null && _ref2 !== void 0 ? _ref2 : 0;
36
34
  var _useState = React.useState(),
37
35
  _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -44,9 +42,6 @@ var AccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
44
42
  if (onChange) {
45
43
  onChange(key, !value);
46
44
  }
47
- if (onClick) {
48
- onClick(key, !value);
49
- }
50
45
  };
51
46
  var leftContentRef = React.useRef(null);
52
47
  React.useEffect(function () {
@@ -55,11 +50,11 @@ var AccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
55
50
  var leftPaddingBody = leftContentWidth && (alignWithTitle || view === 'clear') ? "calc(".concat(leftContentWidth, "px + var(").concat(Accordion_tokens.tokens.accordionItemGap, "))") : 0;
56
51
  setLeftPadding(leftPaddingBody);
57
52
  }, [value, type, leftContentRef, setLeftPadding]);
58
- var openedBodyClass = (opened !== null && opened !== void 0 ? opened : value) ? Accordion_tokens.classes.accordionItemShowBody : undefined;
59
- var StyledAnimationPlus = function StyledAnimationPlus() {
53
+ var openedBodyClass = value ? Accordion_tokens.classes.accordionItemShowBody : undefined;
54
+ var StyledAnimationPLus = function StyledAnimationPLus() {
60
55
  return /*#__PURE__*/React.createElement(AccordionItem_styles.StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/React.createElement(AccordionItem_styles.StyledMinus, {
61
56
  size: "xs",
62
- color: "inherit"
57
+ color: "inhert"
63
58
  })), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledMinus, {
64
59
  size: "xs",
65
60
  color: "inhert",
@@ -70,15 +65,14 @@ var AccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
70
65
  var disabledClass = disabled ? Accordion_tokens.classes.accordionDisabled : '';
71
66
  var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? _StyledArrow || (_StyledArrow = /*#__PURE__*/React.createElement(AccordionItem_styles.StyledArrow, {
72
67
  size: "xs",
73
- color: "inherit"
68
+ color: "inhert"
74
69
  })) : undefined;
75
- var leftContentRotate = type === 'arrow' && (opened !== null && opened !== void 0 ? opened : value) ? Accordion_tokens.classes.accordionItemShowBody : undefined;
76
- var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPlus, null) : undefined;
77
- var rightContentRotate = type === 'sign' && (opened !== null && opened !== void 0 ? opened : value) ? Accordion_tokens.classes.accordionItemShowBody : undefined;
70
+ var leftContentRotate = type === 'arrow' && value ? Accordion_tokens.classes.accordionItemShowBody : undefined;
71
+ var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPLus, null) : undefined;
72
+ var rightContentRotate = type === 'sign' && value ? Accordion_tokens.classes.accordionItemShowBody : undefined;
78
73
  return /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionItem, {
79
74
  className: index.cx(Accordion_tokens.classes.accordionItem, className, disabledClass),
80
75
  key: key,
81
- ref: outerRef,
82
76
  style: _rollupPluginBabelHelpers.objectSpread2({
83
77
  borderRadius: accordionBorderRadius
84
78
  }, style)
@@ -86,17 +80,17 @@ var AccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
86
80
  role: "tab",
87
81
  tabIndex: 0,
88
82
  onClick: handleOpen,
89
- "aria-expanded": opened !== null && opened !== void 0 ? opened : value,
83
+ "aria-expanded": value,
90
84
  "aria-controls": "accordion-item-section".concat(key),
91
85
  id: "accordion-item-".concat(key)
92
86
  }, /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionContentLeft, {
93
87
  ref: leftContentRef,
94
88
  className: leftContentRotate
95
- }, leftContent), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionTitle, null, title)), contentRight || /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionContentRight, {
89
+ }, leftContent), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionTitle, null, title)), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionContentRight, {
96
90
  className: rightContentRotate
97
91
  }, rightContent && rightContent)), /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionBodyAnimate, {
98
92
  "aria-labelledby": "accordion-item-".concat(key),
99
- "aria-hidden": !(opened !== null && opened !== void 0 ? opened : value),
93
+ "aria-hidden": !value,
100
94
  id: "accordion-item-section".concat(key),
101
95
  className: index.cx(openedBodyClass),
102
96
  style: {
@@ -105,7 +99,7 @@ var AccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
105
99
  }, /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionBody, {
106
100
  className: Accordion_tokens.classes.accordionItemBody
107
101
  }, children)));
108
- });
102
+ };
109
103
 
110
104
  exports.AccordionItem = AccordionItem;
111
105
  //# sourceMappingURL=AccordionItem.js.map
package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js.map CHANGED
@@ -1 +1 @@
1
- {"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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"}
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":";;;;;;;;;;;;IAqBaA,aAA2C,GAAG,SAA9CA,aAA2CA,CAAAC,IAAA,EAgBlD;AAAA,EAAA,IAAAC,KAAA,CAAA;AAAA,EAAA,IAfFC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,YAAY,GAAAH,IAAA,CAAZG,YAAY;IACZC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,KAAK,GAAAL,IAAA,CAALK,KAAK;IAAAC,QAAA,GAAAN,IAAA,CACLO,GAAG;AAAHA,IAAAA,GAAG,GAAAD,QAAA,KAAG,KAAA,CAAA,GAAA,eAAe,GAAAA,QAAA;IACrBE,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;IAAAC,SAAA,GAAAT,IAAA,CACRU,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,SAAA;IACbE,OAAK,GAAAX,IAAA,CAALW,KAAK;IACLC,SAAS,GAAAZ,IAAA,CAATY,SAAS;IACTC,KAAK,GAAAb,IAAA,CAALa,KAAK;IACLC,QAAQ,GAAAd,IAAA,CAARc,QAAQ;IACRC,QAAQ,GAAAf,IAAA,CAARe,QAAQ;IAAAC,mBAAA,GAAAhB,IAAA,CACRiB,cAAc;AAAdA,IAAAA,cAAc,GAAAD,mBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,mBAAA;IACrBE,IAAI,GAAAlB,IAAA,CAAJkB,IAAI;IACJC,QAAQ,GAAAnB,IAAA,CAARmB,QAAQ,CAAA;AAER,EAAA,IAAMC,GAAG,GAAAnB,CAAAA,KAAA,GAAGa,QAAQ,aAARA,QAAQ,KAAA,KAAA,CAAA,GAARA,QAAQ,GAAIH,OAAK,MAAAV,IAAAA,IAAAA,KAAA,KAAAA,KAAAA,CAAAA,GAAAA,KAAA,GAAI,CAAC,CAAA;AAElC,EAAA,IAAAoB,SAAA,GAAsCC,cAAQ,EAA0B;IAAAC,UAAA,GAAAC,uCAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAAjEI,IAAAA,WAAW,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,cAAc,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;AAElC,EAAA,IAAMI,UAAU,GAAG,SAAbA,UAAUA,GAAS;AACrB,IAAA,IAAIZ,QAAQ,EAAE;AACV,MAAA,OAAA;AACJ,KAAA;AACA,IAAA,IAAII,QAAQ,EAAE;AACVA,MAAAA,QAAQ,CAACC,GAAG,EAAE,CAAClB,KAAK,CAAC,CAAA;AACzB,KAAA;GACH,CAAA;AAED,EAAA,IAAM0B,cAAc,GAAGC,YAAM,CAAiB,IAAI,CAAC,CAAA;AAEnDC,EAAAA,eAAS,CAAC,YAAM;IAAA,IAAAC,qBAAA,EAAAC,sBAAA,CAAA;IACZ,IAAMC,gBAAgB,GAAAF,CAAAA,qBAAA,GAAGH,cAAc,aAAdA,cAAc,KAAA,KAAA,CAAA,IAAA,CAAAI,sBAAA,GAAdJ,cAAc,CAAEM,OAAO,MAAAF,IAAAA,IAAAA,sBAAA,KAAvBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,sBAAA,CAAyBG,WAAW,cAAAJ,qBAAA,KAAA,KAAA,CAAA,GAAAA,qBAAA,GAAI,CAAC,CAAA;IAClE,IAAMK,eAAe,GACjBH,gBAAgB,KAAKhB,cAAc,IAAIC,IAAI,KAAK,OAAO,CAAC,WAAAmB,MAAA,CAC1CJ,gBAAgB,EAAAI,WAAAA,CAAAA,CAAAA,MAAA,CAAYC,uBAAM,CAACC,gBAAgB,EAAA,IAAA,CAAA,GAC3D,CAAC,CAAA;IACXb,cAAc,CAACU,eAAe,CAAC,CAAA;GAClC,EAAE,CAAClC,KAAK,EAAEQ,IAAI,EAAEkB,cAAc,EAAEF,cAAc,CAAC,CAAC,CAAA;EAEjD,IAAMc,eAAe,GAAGtC,KAAK,GAAGuC,wBAAO,CAACC,qBAAqB,GAAGC,SAAS,CAAA;AAEzE,EAAA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,GAAA;AAAA,IAAA,oBACrBC,KAAA,CAAAC,aAAA,CAACC,+BAAU,EAAAC,IAAAA,EAAAA,YAAA,KAAAA,YAAA,gBACPH,KAAA,CAAAC,aAAA,CAACG,gCAAW,EAAA;AAACC,MAAAA,IAAI,EAAC,IAAI;AAACC,MAAAA,KAAK,EAAC,QAAA;AAAQ,KAAE,CAAC,CACxCN,eAAAA,KAAA,CAAAC,aAAA,CAACG,gCAAW,EAAA;AACRC,MAAAA,IAAI,EAAC,IAAI;AACTC,MAAAA,KAAK,EAAC,QAAQ;MACdvC,SAAS,EAAE4B,eAAe,KAAfA,IAAAA,IAAAA,eAAe,cAAfA,eAAe,GAAIC,wBAAO,CAACW,6BAAAA;AAA8B,KACvE,CACO,CAAC,CAAA;GAChB,CAAA;AAED,EAAA,IAAMC,qBAAqB,GAAGC,gCAAsB,CAAC/C,GAAG,EAAA,MAAA,CAAA8B,MAAA,CAASC,uBAAM,CAACiB,yBAAyB,EAAA,GAAA,CAAA,EAAK,QAAQ,CAAC,CAAA;EAC/G,IAAMC,aAAa,GAAGzC,QAAQ,GAAG0B,wBAAO,CAACgB,iBAAiB,GAAG,EAAE,CAAA;EAE/D,IAAMC,WAAW,GAAGtD,WAAW,KAAA,IAAA,IAAXA,WAAW,KAAXA,KAAAA,CAAAA,GAAAA,WAAW,GAAKM,IAAI,KAAK,OAAO,GAAAiD,YAAA,KAAAA,YAAA,gBAAGd,KAAA,CAAAC,aAAA,CAACc,gCAAW,EAAA;AAACV,IAAAA,IAAI,EAAC,IAAI;AAACC,IAAAA,KAAK,EAAC,QAAA;GAAU,CAAC,IAAGR,SAAU,CAAA;AAC5G,EAAA,IAAMkB,iBAAiB,GAAGnD,IAAI,KAAK,OAAO,IAAIR,KAAK,GAAGuC,wBAAO,CAACC,qBAAqB,GAAGC,SAAS,CAAA;EAE/F,IAAMmB,YAAY,GAAG3D,YAAY,KAAA,IAAA,IAAZA,YAAY,KAAZA,KAAAA,CAAAA,GAAAA,YAAY,GAAKO,IAAI,KAAK,MAAM,gBAAGmC,KAAA,CAAAC,aAAA,CAACF,mBAAmB,EAAE,IAAA,CAAC,GAAGD,SAAU,CAAA;AAC5F,EAAA,IAAMoB,kBAAkB,GAAGrD,IAAI,KAAK,MAAM,IAAIR,KAAK,GAAGuC,wBAAO,CAACC,qBAAqB,GAAGC,SAAS,CAAA;AAE/F,EAAA,oBACIE,KAAA,CAAAC,aAAA,CAACkB,wCAAmB,EAAA;IAChBpD,SAAS,EAAEqD,QAAE,CAACxB,wBAAO,CAACyB,aAAa,EAAEtD,SAAS,EAAE4C,aAAa,CAAE;AAC/DpC,IAAAA,GAAG,EAAEA,GAAI;AACTP,IAAAA,KAAK,EAAAsD,uCAAA,CAAA;AAAIC,MAAAA,YAAY,EAAEf,qBAAAA;AAAqB,KAAA,EAAKxC,KAAK,CAAA;AAAG,GAAA,eAEzDgC,KAAA,CAAAC,aAAA,CAACuB,0CAAqB,EAAA;AAClBC,IAAAA,IAAI,EAAC,KAAK;AACVC,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,OAAO,EAAE7C,UAAW;AACpB,IAAA,eAAA,EAAezB,KAAM;IACrB,eAAAmC,EAAAA,wBAAAA,CAAAA,MAAA,CAAwCjB,GAAG,CAAG;IAC9CqD,EAAE,EAAA,iBAAA,CAAApC,MAAA,CAAoBjB,GAAG,CAAA;AAAG,GAAA,eAE5ByB,KAAA,CAAAC,aAAA,CAAC4B,8CAAyB,EAAA,IAAA,EACrBhB,WAAW,iBACRb,KAAA,CAAAC,aAAA,CAAC6B,+CAA0B,EAAA;AAACC,IAAAA,GAAG,EAAEhD,cAAe;AAAChB,IAAAA,SAAS,EAAEiD,iBAAAA;AAAkB,GAAA,EACzEH,WACuB,CAC/B,eACDb,KAAA,CAAAC,aAAA,CAAC+B,yCAAoB,EAAExE,IAAAA,EAAAA,KAA4B,CAC5B,CAAC,eAE5BwC,KAAA,CAAAC,aAAA,CAACgC,gDAA2B,EAAA;AAAClE,IAAAA,SAAS,EAAEmD,kBAAAA;GACnCD,EAAAA,YAAY,IAAIA,YACQ,CACV,CAAC,eACxBjB,KAAA,CAAAC,aAAA,CAACiC,+CAA0B,EAAA;IACvB,iBAAA1C,EAAAA,iBAAAA,CAAAA,MAAA,CAAmCjB,GAAG,CAAG;AACzC,IAAA,aAAA,EAAa,CAAClB,KAAM;AACpBuE,IAAAA,EAAE,EAAApC,wBAAAA,CAAAA,MAAA,CAA2BjB,GAAG,CAAG;AACnCR,IAAAA,SAAS,EAAEqD,QAAE,CAACzB,eAAe,CAAE;AAC/B3B,IAAAA,KAAK,EAAE;MAAEmE,WAAW,EAAA,EAAA,CAAA3C,MAAA,CAAKZ,WAAW,CAAA;AAAG,KAAA;AAAE,GAAA,eAEzCoB,KAAA,CAAAC,aAAA,CAACmC,wCAAmB,EAAA;IAACrE,SAAS,EAAE6B,wBAAO,CAACyC,iBAAAA;GAAoB1E,EAAAA,QAA8B,CAClE,CACX,CAAC,CAAA;AAE9B;;;;"}
package/emotion/cjs/components/Accordion/Accordion.template-doc.mdx CHANGED
@@ -135,38 +135,6 @@ import TabItem from '@theme/TabItem';
135
135
  </TabItem>
136
136
  </Tabs>
137
137
 
138
- ### Использование Accordion в Controlled варианте
139
-
140
- ```tsx live
141
- import React, { useState } from 'react';
142
- import { Accordion, AccordionItem, IconButton } from '@salutejs/{{ package }}';
143
- import { IconPlus } from '@salutejs/plasma-icons';
144
-
145
- export function App() {
146
- const [activeFirst, setActiveFirst] = useState(false);
147
- const [activeSecond, setActiveSecond] = useState(false);
148
- const [activeThree, setActiveThree] = useState(false);
149
-
150
- const contentRight = (active, setActive) => {
151
- return (
152
- <IconButton view="secondary" size="s" onClick={() => setActive(!active)}>
153
- <IconPlus size="xs" />
154
- </IconButton>
155
- )
156
- }
157
-
158
- return (
159
- <div>
160
- <Accordion size="s" singleActive={true}>
161
- <AccordionItem opened={activeFirst} contentRight={contentRight(activeFirst, setActiveFirst)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
162
- <AccordionItem opened={activeSecond} contentRight={contentRight(activeSecond, setActiveSecond)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
163
- <AccordionItem opened={activeThree} contentRight={contentRight(activeThree, setActiveThree)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
164
- </Accordion>
165
- </div>
166
- );
167
- }
168
- ```
169
-
170
138
  ### Использование Accordion SingleActive
171
139
 
172
140
  ```tsx live
package/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js CHANGED
@@ -24,7 +24,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
24
24
  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; }
25
25
  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; } }
26
26
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
27
- var AccordionItem = exports.AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRef) {
27
+ var AccordionItem = exports.AccordionItem = function AccordionItem(_ref) {
28
28
  var _ref2;
29
29
  var value = _ref.value,
30
30
  contentRight = _ref.contentRight,
@@ -42,10 +42,8 @@ var AccordionItem = exports.AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(
42
42
  disabled = _ref.disabled,
43
43
  _ref$alignWithTitle = _ref.alignWithTitle,
44
44
  alignWithTitle = _ref$alignWithTitle === void 0 ? true : _ref$alignWithTitle,
45
- opened = _ref.opened,
46
45
  view = _ref.view,
47
- onChange = _ref.onChange,
48
- onClick = _ref.onClick;
46
+ onChange = _ref.onChange;
49
47
  var key = (_ref2 = eventKey !== null && eventKey !== void 0 ? eventKey : index) !== null && _ref2 !== void 0 ? _ref2 : 0;
50
48
  var _useState = (0, _react.useState)(),
51
49
  _useState2 = _slicedToArray(_useState, 2),
@@ -58,9 +56,6 @@ var AccordionItem = exports.AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(
58
56
  if (onChange) {
59
57
  onChange(key, !value);
60
58
  }
61
- if (onClick) {
62
- onClick(key, !value);
63
- }
64
59
  };
65
60
  var leftContentRef = (0, _react.useRef)(null);
66
61
  (0, _react.useEffect)(function () {
@@ -69,11 +64,11 @@ var AccordionItem = exports.AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(
69
64
  var leftPaddingBody = leftContentWidth && (alignWithTitle || view === 'clear') ? "calc(".concat(leftContentWidth, "px + var(").concat(_Accordion.tokens.accordionItemGap, "))") : 0;
70
65
  setLeftPadding(leftPaddingBody);
71
66
  }, [value, type, leftContentRef, setLeftPadding]);
72
- var openedBodyClass = (opened !== null && opened !== void 0 ? opened : value) ? _Accordion.classes.accordionItemShowBody : undefined;
73
- var StyledAnimationPlus = function StyledAnimationPlus() {
67
+ var openedBodyClass = value ? _Accordion.classes.accordionItemShowBody : undefined;
68
+ var StyledAnimationPLus = function StyledAnimationPLus() {
74
69
  return /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledMinus, {
75
70
  size: "xs",
76
- color: "inherit"
71
+ color: "inhert"
77
72
  })), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledMinus, {
78
73
  size: "xs",
79
74
  color: "inhert",
@@ -84,15 +79,14 @@ var AccordionItem = exports.AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(
84
79
  var disabledClass = disabled ? _Accordion.classes.accordionDisabled : '';
85
80
  var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? _StyledArrow || (_StyledArrow = /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledArrow, {
86
81
  size: "xs",
87
- color: "inherit"
82
+ color: "inhert"
88
83
  })) : undefined;
89
- var leftContentRotate = type === 'arrow' && (opened !== null && opened !== void 0 ? opened : value) ? _Accordion.classes.accordionItemShowBody : undefined;
90
- var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/_react["default"].createElement(StyledAnimationPlus, null) : undefined;
91
- var rightContentRotate = type === 'sign' && (opened !== null && opened !== void 0 ? opened : value) ? _Accordion.classes.accordionItemShowBody : undefined;
84
+ var leftContentRotate = type === 'arrow' && value ? _Accordion.classes.accordionItemShowBody : undefined;
85
+ var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/_react["default"].createElement(StyledAnimationPLus, null) : undefined;
86
+ var rightContentRotate = type === 'sign' && value ? _Accordion.classes.accordionItemShowBody : undefined;
92
87
  return /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionItem, {
93
88
  className: (0, _utils.cx)(_Accordion.classes.accordionItem, className, disabledClass),
94
89
  key: key,
95
- ref: outerRef,
96
90
  style: _objectSpread({
97
91
  borderRadius: accordionBorderRadius
98
92
  }, style)
@@ -100,17 +94,17 @@ var AccordionItem = exports.AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(
100
94
  role: "tab",
101
95
  tabIndex: 0,
102
96
  onClick: handleOpen,
103
- "aria-expanded": opened !== null && opened !== void 0 ? opened : value,
97
+ "aria-expanded": value,
104
98
  "aria-controls": "accordion-item-section".concat(key),
105
99
  id: "accordion-item-".concat(key)
106
100
  }, /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionContentLeft, {
107
101
  ref: leftContentRef,
108
102
  className: leftContentRotate
109
- }, leftContent), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionTitle, null, title)), contentRight || /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionContentRight, {
103
+ }, leftContent), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionTitle, null, title)), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionContentRight, {
110
104
  className: rightContentRotate
111
105
  }, rightContent && rightContent)), /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionBodyAnimate, {
112
106
  "aria-labelledby": "accordion-item-".concat(key),
113
- "aria-hidden": !(opened !== null && opened !== void 0 ? opened : value),
107
+ "aria-hidden": !value,
114
108
  id: "accordion-item-section".concat(key),
115
109
  className: (0, _utils.cx)(openedBodyClass),
116
110
  style: {
@@ -119,4 +113,4 @@ var AccordionItem = exports.AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(
119
113
  }, /*#__PURE__*/_react["default"].createElement(_AccordionItem.StyledAccordionBody, {
120
114
  className: _Accordion.classes.accordionItemBody
121
115
  }, children)));
122
- });
116
+ };
package/emotion/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState } from 'react';
1
+ import React from 'react';
2
2
  import type { ComponentProps, ReactNode } from 'react';
3
3
  import type { StoryObj, Meta } from '@storybook/react';
4
4
  import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -7,8 +7,6 @@ import { mergeConfig } from '../../../../engines';
7
7
  import { WithTheme, argTypesFromConfig } from '../../../_helpers';
8
8
  import { accordionConfig } from '../../../../components/Accordion';
9
9
  import { Pin } from '../../../../utils/roundness';
10
- import { IconButton } from '../IconButton/IconButton';
11
- import { IconPlus } from '../../../../components/_Icon';
12
10
 
13
11
  import { config } from './Accordion.config';
14
12
  import { Accordion, AccordionItem } from './Accordion';
@@ -93,63 +91,3 @@ export const Default: StoryObj<AccordionProps> = {
93
91
  );
94
92
  },
95
93
  };
96
-
97
- const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
98
-
99
- const ControlledAccordion = (props: AccordionProps) => {
100
- const args = { ...props, text: undefined };
101
- const [activeFirst, setActiveFirst] = useState(false);
102
- const [activeSecond, setActiveSecond] = useState(false);
103
- const [activeThree, setActiveThree] = useState(false);
104
-
105
- return (
106
- <Accordion {...args}>
107
- <AccordionItem
108
- contentRight={
109
- <IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
110
- <IconPlus size={getSizeForIcon(args.size)} />
111
- </IconButton>
112
- }
113
- alignWithTitle={args.alignWithTitle}
114
- type={args.type}
115
- pin={args.pin}
116
- title={args.title}
117
- opened={activeFirst}
118
- >
119
- {args.body}
120
- </AccordionItem>
121
- <AccordionItem
122
- contentRight={
123
- <IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
124
- <IconPlus size={getSizeForIcon(args.size)} />
125
- </IconButton>
126
- }
127
- alignWithTitle={args.alignWithTitle}
128
- type={args.type}
129
- pin={args.pin}
130
- title={args.title}
131
- opened={activeSecond}
132
- >
133
- {args.body}
134
- </AccordionItem>
135
- <AccordionItem
136
- contentRight={
137
- <IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
138
- <IconPlus size={getSizeForIcon(args.size)} />
139
- </IconButton>
140
- }
141
- alignWithTitle={args.alignWithTitle}
142
- type={args.type}
143
- pin={args.pin}
144
- title={args.title}
145
- opened={activeThree}
146
- >
147
- {args.body}
148
- </AccordionItem>
149
- </Accordion>
150
- );
151
- };
152
-
153
- export const Controlled: StoryObj<AccordionProps> = {
154
- render: (props: AccordionProps) => ControlledAccordion(props),
155
- };
package/emotion/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState } from 'react';
1
+ import React from 'react';
2
2
  import type { ComponentProps, ReactNode } from 'react';
3
3
  import type { StoryObj, Meta } from '@storybook/react';
4
4
  import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -7,8 +7,6 @@ import { mergeConfig } from '../../../../engines';
7
7
  import { WithTheme, argTypesFromConfig } from '../../../_helpers';
8
8
  import { accordionConfig } from '../../../../components/Accordion';
9
9
  import { Pin } from '../../../../utils/roundness';
10
- import { IconButton } from '../IconButton/IconButton';
11
- import { IconPlus } from '../../../../components/_Icon';
12
10
 
13
11
  import { config } from './Accordion.config';
14
12
  import { Accordion, AccordionItem } from './Accordion';
@@ -93,63 +91,3 @@ export const Default: StoryObj<AccordionProps> = {
93
91
  );
94
92
  },
95
93
  };
96
-
97
- const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
98
-
99
- const ControlledAccordion = (props: AccordionProps) => {
100
- const args = { ...props, text: undefined };
101
- const [activeFirst, setActiveFirst] = useState(false);
102
- const [activeSecond, setActiveSecond] = useState(false);
103
- const [activeThree, setActiveThree] = useState(false);
104
-
105
- return (
106
- <Accordion {...args}>
107
- <AccordionItem
108
- contentRight={
109
- <IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
110
- <IconPlus size={getSizeForIcon(args.size)} />
111
- </IconButton>
112
- }
113
- alignWithTitle={args.alignWithTitle}
114
- type={args.type}
115
- pin={args.pin}
116
- title={args.title}
117
- opened={activeFirst}
118
- >
119
- {args.body}
120
- </AccordionItem>
121
- <AccordionItem
122
- contentRight={
123
- <IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
124
- <IconPlus size={getSizeForIcon(args.size)} />
125
- </IconButton>
126
- }
127
- alignWithTitle={args.alignWithTitle}
128
- type={args.type}
129
- pin={args.pin}
130
- title={args.title}
131
- opened={activeSecond}
132
- >
133
- {args.body}
134
- </AccordionItem>
135
- <AccordionItem
136
- contentRight={
137
- <IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
138
- <IconPlus size={getSizeForIcon(args.size)} />
139
- </IconButton>
140
- }
141
- alignWithTitle={args.alignWithTitle}
142
- type={args.type}
143
- pin={args.pin}
144
- title={args.title}
145
- opened={activeThree}
146
- >
147
- {args.body}
148
- </AccordionItem>
149
- </Accordion>
150
- );
151
- };
152
-
153
- export const Controlled: StoryObj<AccordionProps> = {
154
- render: (props: AccordionProps) => ControlledAccordion(props),
155
- };
package/emotion/es/components/Accordion/Accordion.template-doc.mdx CHANGED
@@ -135,38 +135,6 @@ import TabItem from '@theme/TabItem';
135
135
  </TabItem>
136
136
  </Tabs>
137
137
 
138
- ### Использование Accordion в Controlled варианте
139
-
140
- ```tsx live
141
- import React, { useState } from 'react';
142
- import { Accordion, AccordionItem, IconButton } from '@salutejs/{{ package }}';
143
- import { IconPlus } from '@salutejs/plasma-icons';
144
-
145
- export function App() {
146
- const [activeFirst, setActiveFirst] = useState(false);
147
- const [activeSecond, setActiveSecond] = useState(false);
148
- const [activeThree, setActiveThree] = useState(false);
149
-
150
- const contentRight = (active, setActive) => {
151
- return (
152
- <IconButton view="secondary" size="s" onClick={() => setActive(!active)}>
153
- <IconPlus size="xs" />
154
- </IconButton>
155
- )
156
- }
157
-
158
- return (
159
- <div>
160
- <Accordion size="s" singleActive={true}>
161
- <AccordionItem opened={activeFirst} contentRight={contentRight(activeFirst, setActiveFirst)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
162
- <AccordionItem opened={activeSecond} contentRight={contentRight(activeSecond, setActiveSecond)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
163
- <AccordionItem opened={activeThree} contentRight={contentRight(activeThree, setActiveThree)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
164
- </Accordion>
165
- </div>
166
- );
167
- }
168
- ```
169
-
170
138
  ### Использование Accordion SingleActive
171
139
 
172
140
  ```tsx live
package/emotion/es/components/Accordion/ui/AccordionItem/AccordionItem.js CHANGED
@@ -11,12 +11,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
11
11
  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; }
12
12
  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; } }
13
13
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
14
- import React, { useState, useRef, forwardRef, useEffect } from 'react';
14
+ import React, { useState, useRef, useEffect } from 'react';
15
15
  import { convertRoundnessMatrix } from '../../../../utils/roundness';
16
16
  import { classes, tokens } from '../../Accordion.tokens';
17
17
  import { cx } from '../../../../utils';
18
18
  import { StyledAccordionItem, StyledAccordionHeader, StyledAccordionBody, StyledAccordionTitle, StyledAccordionContentLeft, StyledAccordionHeaderLeft, StyledAccordionContentRight, StyledArrow, StyledMinus, StyledPlus, StyledAccordionBodyAnimate } from './AccordionItem.styles';
19
- export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
19
+ export var AccordionItem = function AccordionItem(_ref) {
20
20
  var _ref2;
21
21
  var value = _ref.value,
22
22
  contentRight = _ref.contentRight,
@@ -34,10 +34,8 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
34
34
  disabled = _ref.disabled,
35
35
  _ref$alignWithTitle = _ref.alignWithTitle,
36
36
  alignWithTitle = _ref$alignWithTitle === void 0 ? true : _ref$alignWithTitle,
37
- opened = _ref.opened,
38
37
  view = _ref.view,
39
- onChange = _ref.onChange,
40
- onClick = _ref.onClick;
38
+ onChange = _ref.onChange;
41
39
  var key = (_ref2 = eventKey !== null && eventKey !== void 0 ? eventKey : index) !== null && _ref2 !== void 0 ? _ref2 : 0;
42
40
  var _useState = useState(),
43
41
  _useState2 = _slicedToArray(_useState, 2),
@@ -50,9 +48,6 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
50
48
  if (onChange) {
51
49
  onChange(key, !value);
52
50
  }
53
- if (onClick) {
54
- onClick(key, !value);
55
- }
56
51
  };
57
52
  var leftContentRef = useRef(null);
58
53
  useEffect(function () {
@@ -61,11 +56,11 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
61
56
  var leftPaddingBody = leftContentWidth && (alignWithTitle || view === 'clear') ? "calc(".concat(leftContentWidth, "px + var(").concat(tokens.accordionItemGap, "))") : 0;
62
57
  setLeftPadding(leftPaddingBody);
63
58
  }, [value, type, leftContentRef, setLeftPadding]);
64
- var openedBodyClass = (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
65
- var StyledAnimationPlus = function StyledAnimationPlus() {
59
+ var openedBodyClass = value ? classes.accordionItemShowBody : undefined;
60
+ var StyledAnimationPLus = function StyledAnimationPLus() {
66
61
  return /*#__PURE__*/React.createElement(StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/React.createElement(StyledMinus, {
67
62
  size: "xs",
68
- color: "inherit"
63
+ color: "inhert"
69
64
  })), /*#__PURE__*/React.createElement(StyledMinus, {
70
65
  size: "xs",
71
66
  color: "inhert",
@@ -76,15 +71,14 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
76
71
  var disabledClass = disabled ? classes.accordionDisabled : '';
77
72
  var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? _StyledArrow || (_StyledArrow = /*#__PURE__*/React.createElement(StyledArrow, {
78
73
  size: "xs",
79
- color: "inherit"
74
+ color: "inhert"
80
75
  })) : undefined;
81
- var leftContentRotate = type === 'arrow' && (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
82
- var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPlus, null) : undefined;
83
- var rightContentRotate = type === 'sign' && (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
76
+ var leftContentRotate = type === 'arrow' && value ? classes.accordionItemShowBody : undefined;
77
+ var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPLus, null) : undefined;
78
+ var rightContentRotate = type === 'sign' && value ? classes.accordionItemShowBody : undefined;
84
79
  return /*#__PURE__*/React.createElement(StyledAccordionItem, {
85
80
  className: cx(classes.accordionItem, className, disabledClass),
86
81
  key: key,
87
- ref: outerRef,
88
82
  style: _objectSpread({
89
83
  borderRadius: accordionBorderRadius
90
84
  }, style)
@@ -92,17 +86,17 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
92
86
  role: "tab",
93
87
  tabIndex: 0,
94
88
  onClick: handleOpen,
95
- "aria-expanded": opened !== null && opened !== void 0 ? opened : value,
89
+ "aria-expanded": value,
96
90
  "aria-controls": "accordion-item-section".concat(key),
97
91
  id: "accordion-item-".concat(key)
98
92
  }, /*#__PURE__*/React.createElement(StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/React.createElement(StyledAccordionContentLeft, {
99
93
  ref: leftContentRef,
100
94
  className: leftContentRotate
101
- }, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), contentRight || /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
95
+ }, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
102
96
  className: rightContentRotate
103
97
  }, rightContent && rightContent)), /*#__PURE__*/React.createElement(StyledAccordionBodyAnimate, {
104
98
  "aria-labelledby": "accordion-item-".concat(key),
105
- "aria-hidden": !(opened !== null && opened !== void 0 ? opened : value),
99
+ "aria-hidden": !value,
106
100
  id: "accordion-item-section".concat(key),
107
101
  className: cx(openedBodyClass),
108
102
  style: {
@@ -111,4 +105,4 @@ export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
111
105
  }, /*#__PURE__*/React.createElement(StyledAccordionBody, {
112
106
  className: classes.accordionItemBody
113
107
  }, children)));
114
- });
108
+ };