@salutejs/plasma-new-hope 0.88.0-canary.1223.9381749289.0 → 0.88.0-canary.1223.9385643490.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Accordion/Accordion.css +1 -1
- package/cjs/components/Accordion/Accordion.js +12 -10
- package/cjs/components/Accordion/Accordion.js.map +1 -1
- package/cjs/components/Accordion/Accordion.styles.js +1 -1
- package/cjs/components/Accordion/Accordion.styles.js.map +1 -1
- package/cjs/components/Accordion/{Accordion.styles_1mo1sxr.css → Accordion.styles_rsiff6.css} +1 -1
- package/cjs/components/Accordion/Accordion.tokens.js +2 -1
- package/cjs/components/Accordion/Accordion.tokens.js.map +1 -1
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +21 -15
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +5 -5
- package/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js.map +1 -1
- package/cjs/components/Accordion/utils/index.js +5 -4
- package/cjs/components/Accordion/utils/index.js.map +1 -1
- package/cjs/components/_Icon/Icon.assets/ChevronDownFill.js +3 -12
- package/cjs/components/_Icon/Icon.assets/ChevronDownFill.js.map +1 -1
- package/cjs/index.css +1 -1
- package/es/components/Accordion/Accordion.css +1 -1
- package/es/components/Accordion/Accordion.js +13 -11
- package/es/components/Accordion/Accordion.js.map +1 -1
- package/es/components/Accordion/Accordion.styles.js +1 -1
- package/es/components/Accordion/Accordion.styles.js.map +1 -1
- package/es/components/Accordion/{Accordion.styles_1mo1sxr.css → Accordion.styles_rsiff6.css} +1 -1
- package/es/components/Accordion/Accordion.tokens.js +2 -1
- package/es/components/Accordion/Accordion.tokens.js.map +1 -1
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.js +21 -15
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.js.map +1 -1
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +5 -5
- package/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js.map +1 -1
- package/es/components/Accordion/utils/index.js +5 -4
- package/es/components/Accordion/utils/index.js.map +1 -1
- package/es/components/_Icon/Icon.assets/ChevronDownFill.js +3 -12
- package/es/components/_Icon/Icon.assets/ChevronDownFill.js.map +1 -1
- package/es/index.css +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Accordion/Accordion.js +12 -10
- package/styled-components/cjs/components/Accordion/Accordion.styles.js +1 -1
- package/styled-components/cjs/components/Accordion/Accordion.tokens.js +2 -1
- package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js +21 -15
- package/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +5 -5
- package/styled-components/cjs/components/Accordion/utils/index.js +5 -4
- package/styled-components/cjs/components/Accordion/variations/_size/tokens.json +6 -1
- package/styled-components/cjs/components/Accordion/variations/_view/tokens.json +8 -1
- package/styled-components/cjs/components/_Icon/Icon.assets/ChevronDownFill.js +3 -12
- package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.config.js +0 -4
- package/styled-components/cjs/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +12 -5
- package/styled-components/cjs/examples/plasma_web/components/Accordion/Accordion.stories.tsx +11 -5
- package/styled-components/es/components/Accordion/Accordion.js +13 -11
- package/styled-components/es/components/Accordion/Accordion.styles.js +1 -1
- package/styled-components/es/components/Accordion/Accordion.tokens.js +2 -1
- package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.js +21 -15
- package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js +5 -5
- package/styled-components/es/components/Accordion/utils/index.js +5 -4
- package/styled-components/es/components/Accordion/variations/_size/tokens.json +6 -1
- package/styled-components/es/components/Accordion/variations/_view/tokens.json +8 -1
- package/styled-components/es/components/_Icon/Icon.assets/ChevronDownFill.js +3 -12
- package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.config.js +0 -4
- package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx +12 -5
- package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.stories.tsx +11 -5
- package/types/components/Accordion/Accordion.d.ts +8 -2
- package/types/components/Accordion/Accordion.d.ts.map +1 -1
- package/types/components/Accordion/Accordion.tokens.d.ts +1 -0
- package/types/components/Accordion/Accordion.tokens.d.ts.map +1 -1
- package/types/components/Accordion/Accordion.types.d.ts +14 -6
- package/types/components/Accordion/Accordion.types.d.ts.map +1 -1
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.d.ts.map +1 -1
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.styles.d.ts.map +1 -1
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.types.d.ts +11 -15
- package/types/components/Accordion/ui/AccordionItem/AccordionItem.types.d.ts.map +1 -1
- package/types/components/Accordion/utils/index.d.ts +6 -7
- package/types/components/Accordion/utils/index.d.ts.map +1 -1
- package/types/components/_Icon/Icon.assets/ChevronDownFill.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Accordion/Accordion.config.d.ts +0 -4
- package/types/examples/plasma_b2c/components/Accordion/Accordion.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Accordion/Accordion.d.ts +4 -5
- package/types/examples/plasma_b2c/components/Accordion/Accordion.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Accordion/Accordion.d.ts +4 -1
- package/types/examples/plasma_web/components/Accordion/Accordion.d.ts.map +1 -1
@@ -1 +1 @@
|
|
1
|
-
.
|
1
|
+
.Accordion_styles_rsiff6_bjv6ypd__465a9c67{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--plasma-accordion-gap);-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;height:auto;background:var(--plasma-accordion-background);}.Accordion_styles_rsiff6_bjv6ypd__465a9c67.Accordion_styles_rsiff6_accordionStretchingFixed__465a9c67{width:var(--plasma-accordion-width);}.Accordion_styles_rsiff6_bjv6ypd__465a9c67.Accordion_styles_rsiff6_accordionStretchingFilled__465a9c67{width:100%;}
|
@@ -17,29 +17,31 @@ var accordionRoot = function accordionRoot(Root) {
|
|
17
17
|
view = _ref.view,
|
18
18
|
_ref$stretching = _ref.stretching,
|
19
19
|
stretching = _ref$stretching === void 0 ? 'filled' : _ref$stretching,
|
20
|
+
defaultActiveIndex = _ref.defaultActiveIndex,
|
20
21
|
children = _ref.children,
|
22
|
+
disabled = _ref.disabled,
|
21
23
|
className = _ref.className,
|
22
|
-
|
24
|
+
singleActive = _ref.singleActive,
|
25
|
+
onChangeValue = _ref.onChangeValue;
|
23
26
|
var stretchingClass = Accordion_tokens.classes["".concat(stretching, "Stretching")];
|
24
|
-
var _useState = React.useState(),
|
27
|
+
var _useState = React.useState(defaultActiveIndex),
|
25
28
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
26
29
|
activeIndex = _useState2[0],
|
27
30
|
setActiveIndex = _useState2[1];
|
28
31
|
var updateValue = function updateValue(index, value) {
|
29
|
-
|
32
|
+
onChangeValue && onChangeValue(index, value);
|
33
|
+
if (value && singleActive) {
|
34
|
+
setActiveIndex(index);
|
35
|
+
}
|
30
36
|
};
|
31
|
-
var childrenArray = React.
|
32
|
-
|
33
|
-
}, [children]);
|
34
|
-
var childrenMemo = React.useMemo(function () {
|
35
|
-
return index.getChildren(childrenArray, activeIndex, updateValue);
|
36
|
-
}, [activeIndex, updateValue, childrenArray]);
|
37
|
+
var childrenArray = React.Children.toArray(children);
|
38
|
+
var childrenMemo = index.getChildren(childrenArray, activeIndex, disabled, updateValue);
|
37
39
|
return /*#__PURE__*/React.createElement(Root, {
|
38
40
|
ref: outerRootRef,
|
39
41
|
size: size,
|
40
42
|
view: view,
|
41
43
|
className: index$1.cx(stretchingClass, Accordion_tokens.classes.accordionRoot, className)
|
42
|
-
},
|
44
|
+
}, childrenMemo);
|
43
45
|
});
|
44
46
|
};
|
45
47
|
var accordionConfig = {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { Children, forwardRef,
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { Children, forwardRef, useState } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { AccordionProps } from './Accordion.types';\nimport { base } from './Accordion.styles';\nimport { classes } from './Accordion.tokens';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { getChildren } from './utils';\n\nexport const accordionRoot = (Root: RootProps<HTMLDivElement, AccordionProps>) =>\n forwardRef<HTMLDivElement, AccordionProps>(\n (\n {\n size,\n view,\n stretching = 'filled',\n defaultActiveIndex,\n children,\n disabled,\n className,\n singleActive,\n onChangeValue,\n },\n outerRootRef,\n ) => {\n const stretchingClass = classes[`${stretching}Stretching` as keyof typeof classes];\n\n const [activeIndex, setActiveIndex] = useState<number | undefined>(defaultActiveIndex);\n\n const updateValue = (index?: number, value?: boolean) => {\n onChangeValue && onChangeValue(index, value);\n if (value && singleActive) {\n setActiveIndex(index);\n }\n };\n\n const childrenArray = Children.toArray(children) as React.ReactElement[];\n\n const childrenMemo = getChildren(childrenArray, activeIndex, disabled, updateValue);\n\n return (\n <Root\n ref={outerRootRef}\n size={size}\n view={view}\n className={cx(stretchingClass, classes.accordionRoot, className)}\n >\n {childrenMemo}\n </Root>\n );\n },\n );\n\nexport const accordionConfig = {\n name: 'Accordion',\n tag: 'div',\n layout: accordionRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n },\n};\n"],"names":["accordionRoot","Root","forwardRef","_ref","outerRootRef","size","view","_ref$stretching","stretching","defaultActiveIndex","children","disabled","className","singleActive","onChangeValue","stretchingClass","classes","concat","_useState","useState","_useState2","_slicedToArray","activeIndex","setActiveIndex","updateValue","index","value","childrenArray","Children","toArray","childrenMemo","getChildren","React","createElement","ref","cx","accordionConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":";;;;;;;;;;;;;IAYaA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,IAA+C,EAAA;AAAA,EAAA,oBACzEC,gBAAU,CACN,UAAAC,IAAA,EAYIC,YAAY,EACX;AAAA,IAAA,IAXGC,IAAI,GAAAF,IAAA,CAAJE,IAAI;MACJC,IAAI,GAAAH,IAAA,CAAJG,IAAI;MAAAC,eAAA,GAAAJ,IAAA,CACJK,UAAU;AAAVA,MAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,eAAA;MACrBE,kBAAkB,GAAAN,IAAA,CAAlBM,kBAAkB;MAClBC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;MACRC,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;MACRC,SAAS,GAAAT,IAAA,CAATS,SAAS;MACTC,YAAY,GAAAV,IAAA,CAAZU,YAAY;MACZC,aAAa,GAAAX,IAAA,CAAbW,aAAa,CAAA;AAIjB,IAAA,IAAMC,eAAe,GAAGC,wBAAO,IAAAC,MAAA,CAAIT,UAAU,EAAqC,YAAA,CAAA,CAAA,CAAA;AAElF,IAAA,IAAAU,SAAA,GAAsCC,cAAQ,CAAqBV,kBAAkB,CAAC;MAAAW,UAAA,GAAAC,uCAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAA/EI,MAAAA,WAAW,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,MAAAA,cAAc,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;IAElC,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAIC,KAAc,EAAEC,KAAe,EAAK;AACrDZ,MAAAA,aAAa,IAAIA,aAAa,CAACW,KAAK,EAAEC,KAAK,CAAC,CAAA;MAC5C,IAAIA,KAAK,IAAIb,YAAY,EAAE;QACvBU,cAAc,CAACE,KAAK,CAAC,CAAA;AACzB,OAAA;KACH,CAAA;AAED,IAAA,IAAME,aAAa,GAAGC,cAAQ,CAACC,OAAO,CAACnB,QAAQ,CAAyB,CAAA;IAExE,IAAMoB,YAAY,GAAGC,iBAAW,CAACJ,aAAa,EAAEL,WAAW,EAAEX,QAAQ,EAAEa,WAAW,CAAC,CAAA;AAEnF,IAAA,oBACIQ,KAAA,CAAAC,aAAA,CAAChC,IAAI,EAAA;AACDiC,MAAAA,GAAG,EAAE9B,YAAa;AAClBC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,IAAI,EAAEA,IAAK;MACXM,SAAS,EAAEuB,UAAE,CAACpB,eAAe,EAAEC,wBAAO,CAAChB,aAAa,EAAEY,SAAS,CAAA;AAAE,KAAA,EAEhEkB,YACC,CAAC,CAAA;AAEf,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAMM,eAAe,GAAG;AAC3BC,EAAAA,IAAI,EAAE,WAAW;AACjBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAEvC,aAAa;AACrBwC,EAAAA,IAAI,EAAJA,qBAAI;AACJC,EAAAA,UAAU,EAAE;AACRnC,IAAAA,IAAI,EAAE;AACFoC,MAAAA,GAAG,EAAEC,SAAAA;KACR;AACDtC,IAAAA,IAAI,EAAE;AACFqC,MAAAA,GAAG,EAAEE,WAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNvC,IAAAA,IAAI,EAAE,SAAS;AACfD,IAAAA,IAAI,EAAE,GAAA;AACV,GAAA;AACJ;;;;;"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Accordion.styles.js","sources":["../../../src/components/Accordion/Accordion.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from './Accordion.tokens';\n\nexport const base = css`\n display: flex;\n flex-direction: column;\n gap: var(${tokens.accordionGap});\n align-items: stretch;\n height: auto;\n background: var(${tokens.accordionBackground});\n\n
|
1
|
+
{"version":3,"file":"Accordion.styles.js","sources":["../../../src/components/Accordion/Accordion.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from './Accordion.tokens';\n\nexport const base = css`\n display: flex;\n flex-direction: column;\n gap: var(${tokens.accordionGap});\n align-items: stretch;\n height: auto;\n background: var(${tokens.accordionBackground});\n\n &.${classes.fixedStretching} {\n width: var(${tokens.accordionWidth});\n }\n &.${classes.filledStretching} {\n width: 100%;\n }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAchB;;;;"}
|
package/cjs/components/Accordion/{Accordion.styles_1mo1sxr.css → Accordion.styles_rsiff6.css}
RENAMED
@@ -1 +1 @@
|
|
1
|
-
.bjv6ypd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--plasma-accordion-gap);-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;height:auto;background:var(--plasma-accordion-background);}.bjv6ypd.
|
1
|
+
.bjv6ypd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--plasma-accordion-gap);-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;height:auto;background:var(--plasma-accordion-background);}.bjv6ypd.accordion-stretching-fixed{width:var(--plasma-accordion-width);}.bjv6ypd.accordion-stretching-filled{width:100%;}
|
@@ -9,7 +9,8 @@ var classes = {
|
|
9
9
|
accordionItem: 'accordion-item',
|
10
10
|
clearAccordionItem: 'clear-accordion-item',
|
11
11
|
accordionItemShowBody: 'accordion-item-show-body',
|
12
|
-
accordionPlusAnimationElement: 'accordion-plus-animation-element'
|
12
|
+
accordionPlusAnimationElement: 'accordion-plus-animation-element',
|
13
|
+
accordionDisabled: '--plasma-accordion-disabled'
|
13
14
|
};
|
14
15
|
var tokens = {
|
15
16
|
accordionGap: '--plasma-accordion-gap',
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Accordion.tokens.js","sources":["../../../src/components/Accordion/Accordion.tokens.ts"],"sourcesContent":["export const classes = {\n filledStretching: 'accordion-stretching-filled',\n fixedStretching: 'accordion-stretching-fixed',\n accordionRoot: 'accordion-root',\n accordionItem: 'accordion-item',\n clearAccordionItem: 'clear-accordion-item',\n accordionItemShowBody: 'accordion-item-show-body',\n accordionPlusAnimationElement: 'accordion-plus-animation-element',\n};\n\nexport const tokens = {\n accordionGap: '--plasma-accordion-gap',\n accordionWidth: '--plasma-accordion-width',\n accordionBackground: '--plasma-accordion-background',\n\n accordionItemBackground: '--plasma-accordion-item-background',\n accordionItemBorderRadius: '--plasma-accordion-item-border-radius',\n accordionItemPadding: '--plasma-accordion-item-padding',\n accordionItemPaddingVertical: '--plasma-accordion-item-padding-vertical',\n accordionItemPaddingHorizontal: '--plasma-accordion-item-padding-horizontal',\n accordionItemGap: '--plasma-accordion-item-gap',\n accordionItemFocus: '--plasma-accordion-item-focus',\n accordionItemBorderBottom: '--plasma-accordion-item-border-bottom',\n\n accordionItemTitleColor: '--plasma-accordion-item-title-color',\n accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',\n accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',\n accordionItemTitleFontStyle: '--plasma-accordion-item-title-font-style',\n accordionItemTitleFontWeight: '--plasma-accordion-item-title-font-weight',\n accordionItemTitleLetterSpacing: '--plasma-accordion-item-title-letter-spacing',\n accordionItemTitleLineHeight: '--plasma-accordion-item-title-line-height',\n\n accordionItemTextColor: '--plasma-accordion-item-text-color',\n accordionItemTextFontFamily: '--plasma-accordion-item-text-font-family',\n accordionItemTextFontSize: '--plasma-accordion-item-text-font-size',\n accordionItemTextFontStyle: '--plasma-accordion-item-text-font-style',\n accordionItemTextFontWeight: '--plasma-accordion-item-text-font-weight',\n accordionItemTextLetterSpacing: '--plasma-accordion-item-text-letter-spacing',\n accordionItemTextLineHeight: '--plasma-accordion-item-text-line-height',\n};\n"],"names":["classes","filledStretching","fixedStretching","accordionRoot","accordionItem","clearAccordionItem","accordionItemShowBody","accordionPlusAnimationElement","tokens","accordionGap","accordionWidth","accordionBackground","accordionItemBackground","accordionItemBorderRadius","accordionItemPadding","accordionItemPaddingVertical","accordionItemPaddingHorizontal","accordionItemGap","accordionItemFocus","accordionItemBorderBottom","accordionItemTitleColor","accordionItemTitleFontFamily","accordionItemTitleFontSize","accordionItemTitleFontStyle","accordionItemTitleFontWeight","accordionItemTitleLetterSpacing","accordionItemTitleLineHeight","accordionItemTextColor","accordionItemTextFontFamily","accordionItemTextFontSize","accordionItemTextFontStyle","accordionItemTextFontWeight","accordionItemTextLetterSpacing","accordionItemTextLineHeight"],"mappings":";;;;AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,gBAAgB,EAAE,6BAA6B;AAC/CC,EAAAA,eAAe,EAAE,4BAA4B;AAC7CC,EAAAA,aAAa,EAAE,gBAAgB;AAC/BC,EAAAA,aAAa,EAAE,gBAAgB;AAC/BC,EAAAA,kBAAkB,EAAE,sBAAsB;AAC1CC,EAAAA,qBAAqB,EAAE,0BAA0B;AACjDC,EAAAA,6BAA6B,EAAE,
|
1
|
+
{"version":3,"file":"Accordion.tokens.js","sources":["../../../src/components/Accordion/Accordion.tokens.ts"],"sourcesContent":["export const classes = {\n filledStretching: 'accordion-stretching-filled',\n fixedStretching: 'accordion-stretching-fixed',\n accordionRoot: 'accordion-root',\n accordionItem: 'accordion-item',\n clearAccordionItem: 'clear-accordion-item',\n accordionItemShowBody: 'accordion-item-show-body',\n accordionPlusAnimationElement: 'accordion-plus-animation-element',\n accordionDisabled: '--plasma-accordion-disabled',\n};\n\nexport const tokens = {\n accordionGap: '--plasma-accordion-gap',\n accordionWidth: '--plasma-accordion-width',\n accordionBackground: '--plasma-accordion-background',\n\n accordionItemBackground: '--plasma-accordion-item-background',\n accordionItemBorderRadius: '--plasma-accordion-item-border-radius',\n accordionItemPadding: '--plasma-accordion-item-padding',\n accordionItemPaddingVertical: '--plasma-accordion-item-padding-vertical',\n accordionItemPaddingHorizontal: '--plasma-accordion-item-padding-horizontal',\n accordionItemGap: '--plasma-accordion-item-gap',\n accordionItemFocus: '--plasma-accordion-item-focus',\n accordionItemBorderBottom: '--plasma-accordion-item-border-bottom',\n\n accordionItemTitleColor: '--plasma-accordion-item-title-color',\n accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',\n accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',\n accordionItemTitleFontStyle: '--plasma-accordion-item-title-font-style',\n accordionItemTitleFontWeight: '--plasma-accordion-item-title-font-weight',\n accordionItemTitleLetterSpacing: '--plasma-accordion-item-title-letter-spacing',\n accordionItemTitleLineHeight: '--plasma-accordion-item-title-line-height',\n\n accordionItemTextColor: '--plasma-accordion-item-text-color',\n accordionItemTextFontFamily: '--plasma-accordion-item-text-font-family',\n accordionItemTextFontSize: '--plasma-accordion-item-text-font-size',\n accordionItemTextFontStyle: '--plasma-accordion-item-text-font-style',\n accordionItemTextFontWeight: '--plasma-accordion-item-text-font-weight',\n accordionItemTextLetterSpacing: '--plasma-accordion-item-text-letter-spacing',\n accordionItemTextLineHeight: '--plasma-accordion-item-text-line-height',\n};\n"],"names":["classes","filledStretching","fixedStretching","accordionRoot","accordionItem","clearAccordionItem","accordionItemShowBody","accordionPlusAnimationElement","accordionDisabled","tokens","accordionGap","accordionWidth","accordionBackground","accordionItemBackground","accordionItemBorderRadius","accordionItemPadding","accordionItemPaddingVertical","accordionItemPaddingHorizontal","accordionItemGap","accordionItemFocus","accordionItemBorderBottom","accordionItemTitleColor","accordionItemTitleFontFamily","accordionItemTitleFontSize","accordionItemTitleFontStyle","accordionItemTitleFontWeight","accordionItemTitleLetterSpacing","accordionItemTitleLineHeight","accordionItemTextColor","accordionItemTextFontFamily","accordionItemTextFontSize","accordionItemTextFontStyle","accordionItemTextFontWeight","accordionItemTextLetterSpacing","accordionItemTextLineHeight"],"mappings":";;;;AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,gBAAgB,EAAE,6BAA6B;AAC/CC,EAAAA,eAAe,EAAE,4BAA4B;AAC7CC,EAAAA,aAAa,EAAE,gBAAgB;AAC/BC,EAAAA,aAAa,EAAE,gBAAgB;AAC/BC,EAAAA,kBAAkB,EAAE,sBAAsB;AAC1CC,EAAAA,qBAAqB,EAAE,0BAA0B;AACjDC,EAAAA,6BAA6B,EAAE,kCAAkC;AACjEC,EAAAA,iBAAiB,EAAE,6BAAA;AACvB,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,YAAY,EAAE,wBAAwB;AACtCC,EAAAA,cAAc,EAAE,0BAA0B;AAC1CC,EAAAA,mBAAmB,EAAE,+BAA+B;AAEpDC,EAAAA,uBAAuB,EAAE,oCAAoC;AAC7DC,EAAAA,yBAAyB,EAAE,uCAAuC;AAClEC,EAAAA,oBAAoB,EAAE,iCAAiC;AACvDC,EAAAA,4BAA4B,EAAE,0CAA0C;AACxEC,EAAAA,8BAA8B,EAAE,4CAA4C;AAC5EC,EAAAA,gBAAgB,EAAE,6BAA6B;AAC/CC,EAAAA,kBAAkB,EAAE,+BAA+B;AACnDC,EAAAA,yBAAyB,EAAE,uCAAuC;AAElEC,EAAAA,uBAAuB,EAAE,qCAAqC;AAC9DC,EAAAA,4BAA4B,EAAE,2CAA2C;AACzEC,EAAAA,0BAA0B,EAAE,yCAAyC;AACrEC,EAAAA,2BAA2B,EAAE,0CAA0C;AACvEC,EAAAA,4BAA4B,EAAE,2CAA2C;AACzEC,EAAAA,+BAA+B,EAAE,8CAA8C;AAC/EC,EAAAA,4BAA4B,EAAE,2CAA2C;AAEzEC,EAAAA,sBAAsB,EAAE,oCAAoC;AAC5DC,EAAAA,2BAA2B,EAAE,0CAA0C;AACvEC,EAAAA,yBAAyB,EAAE,wCAAwC;AACnEC,EAAAA,0BAA0B,EAAE,yCAAyC;AACrEC,EAAAA,2BAA2B,EAAE,0CAA0C;AACvEC,EAAAA,8BAA8B,EAAE,6CAA6C;AAC7EC,EAAAA,2BAA2B,EAAE,0CAAA;AACjC;;;;;"}
|
@@ -16,30 +16,34 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
16
16
|
title = _ref.title,
|
17
17
|
_ref$pin = _ref.pin,
|
18
18
|
pin = _ref$pin === void 0 ? 'square-square' : _ref$pin,
|
19
|
-
|
19
|
+
children = _ref.children,
|
20
20
|
_ref$type = _ref.type,
|
21
21
|
type = _ref$type === void 0 ? 'sign' : _ref$type,
|
22
22
|
index = _ref.index,
|
23
|
-
|
24
|
-
updateValue = _ref.updateValue,
|
23
|
+
disabled = _ref.disabled,
|
25
24
|
onChangeValue = _ref.onChangeValue;
|
26
25
|
var _useState = React.useState(value),
|
27
26
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
28
|
-
|
27
|
+
isOpen = _useState2[0],
|
29
28
|
setShow = _useState2[1];
|
30
29
|
var _useState3 = React.useState(),
|
31
30
|
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
32
31
|
leftPadding = _useState4[0],
|
33
32
|
setLeftPadding = _useState4[1];
|
34
|
-
var
|
35
|
-
|
36
|
-
|
37
|
-
|
33
|
+
var handleOpen = function handleOpen() {
|
34
|
+
if (disabled) {
|
35
|
+
return;
|
36
|
+
}
|
37
|
+
setShow(!isOpen);
|
38
|
+
onChangeValue && onChangeValue(index, !isOpen);
|
38
39
|
};
|
39
40
|
var onKeyPress = function onKeyPress(event) {
|
41
|
+
if (disabled) {
|
42
|
+
return;
|
43
|
+
}
|
40
44
|
event.persist();
|
41
45
|
if (event.keyCode === 13) {
|
42
|
-
|
46
|
+
handleOpen();
|
43
47
|
}
|
44
48
|
};
|
45
49
|
var leftContentRef = React.useRef(null);
|
@@ -50,7 +54,7 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
50
54
|
var leftPaddingBody = leftContentWidth ? "calc(".concat(leftContentWidth, "px + var(").concat(Accordion_tokens.tokens.accordionItemGap, "))") : 0;
|
51
55
|
setLeftPadding(leftPaddingBody);
|
52
56
|
}, [value, type, leftContentRef, setLeftPadding]);
|
53
|
-
var showedBody =
|
57
|
+
var showedBody = isOpen ? Accordion_tokens.classes.accordionItemShowBody : undefined;
|
54
58
|
var StyledAnimationPLus = function StyledAnimationPLus() {
|
55
59
|
return /*#__PURE__*/React.createElement(AccordionItem_styles.StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/React.createElement(AccordionItem_styles.StyledMinus, {
|
56
60
|
size: "xs",
|
@@ -62,24 +66,26 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
62
66
|
}));
|
63
67
|
};
|
64
68
|
var accordionBorderRadius = roundness.convertRoundnessMatrix(pin, "var(".concat(Accordion_tokens.tokens.accordionItemBorderRadius, ")"), '1.5rem');
|
69
|
+
var disabledClass = disabled ? Accordion_tokens.classes.accordionDisabled : '';
|
65
70
|
var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? _StyledArrow || (_StyledArrow = /*#__PURE__*/React.createElement(AccordionItem_styles.StyledArrow, {
|
66
71
|
size: "xs",
|
67
72
|
color: "inhert"
|
68
73
|
})) : undefined;
|
69
|
-
var leftContentRotate = type === 'arrow' &&
|
74
|
+
var leftContentRotate = type === 'arrow' && isOpen ? Accordion_tokens.classes.accordionItemShowBody : undefined;
|
70
75
|
var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPLus, null) : undefined;
|
71
|
-
var rightContentRotate = type === 'sign' &&
|
76
|
+
var rightContentRotate = type === 'sign' && isOpen ? Accordion_tokens.classes.accordionItemShowBody : undefined;
|
72
77
|
return /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionItem, {
|
73
78
|
role: "tab",
|
74
79
|
className: Accordion_tokens.classes.accordionItem,
|
75
80
|
tabIndex: 0,
|
76
|
-
key:
|
81
|
+
key: index,
|
77
82
|
style: {
|
78
83
|
borderRadius: accordionBorderRadius
|
79
84
|
},
|
80
85
|
onKeyDown: onKeyPress
|
81
86
|
}, /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionHeader, {
|
82
|
-
onClick:
|
87
|
+
onClick: handleOpen,
|
88
|
+
className: disabledClass
|
83
89
|
}, /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionContentLeft, {
|
84
90
|
ref: leftContentRef,
|
85
91
|
className: leftContentRotate
|
@@ -90,7 +96,7 @@ var AccordionItem = function AccordionItem(_ref) {
|
|
90
96
|
style: {
|
91
97
|
paddingLeft: "".concat(leftPadding)
|
92
98
|
}
|
93
|
-
}, /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionBody, null,
|
99
|
+
}, /*#__PURE__*/React.createElement(AccordionItem_styles.StyledAccordionBody, null, children)));
|
94
100
|
};
|
95
101
|
|
96
102
|
exports.AccordionItem = AccordionItem;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"AccordionItem.js","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState, KeyboardEvent, useRef, useEffect } from 'react';\n\nimport { convertRoundnessMatrix } from '../../../../utils/roundness';\nimport { classes, tokens } from '../../Accordion.tokens';\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<HTMLAttributes<HTMLDivElement> & AccordionItemProps> = ({\n value,\n contentRight,\n contentLeft,\n title,\n pin = 'square-square',\n
|
1
|
+
{"version":3,"file":"AccordionItem.js","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState, KeyboardEvent, useRef, useEffect } from 'react';\n\nimport { convertRoundnessMatrix } from '../../../../utils/roundness';\nimport { classes, tokens } from '../../Accordion.tokens';\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<HTMLAttributes<HTMLDivElement> & AccordionItemProps> = ({\n value,\n contentRight,\n contentLeft,\n title,\n pin = 'square-square',\n children,\n type = 'sign',\n index,\n disabled,\n onChangeValue,\n}) => {\n const [isOpen, setShow] = useState(value);\n const [leftPadding, setLeftPadding] = useState<string | number | null>();\n\n const handleOpen = () => {\n if (disabled) {\n return;\n }\n setShow(!isOpen);\n onChangeValue && onChangeValue(index, !isOpen);\n };\n\n const onKeyPress = (event: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n event.persist();\n if (event.keyCode === 13) {\n handleOpen();\n }\n };\n\n const leftContentRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setShow(value);\n const leftContentWidth = leftContentRef?.current?.offsetWidth ?? 0;\n const leftPaddingBody = leftContentWidth ? `calc(${leftContentWidth}px + var(${tokens.accordionItemGap}))` : 0;\n setLeftPadding(leftPaddingBody);\n }, [value, type, leftContentRef, setLeftPadding]);\n\n const showedBody = isOpen ? classes.accordionItemShowBody : undefined;\n\n const StyledAnimationPLus = () => (\n <StyledPlus>\n <StyledMinus size=\"xs\" color=\"inhert\" />\n <StyledMinus size=\"xs\" color=\"inhert\" className={showedBody ?? classes.accordionPlusAnimationElement} />\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' && isOpen ? classes.accordionItemShowBody : undefined;\n\n const rightContent = contentRight ?? (type === 'sign' ? <StyledAnimationPLus /> : undefined);\n const rightContentRotate = type === 'sign' && isOpen ? classes.accordionItemShowBody : undefined;\n\n return (\n <StyledAccordionItem\n role=\"tab\"\n className={classes.accordionItem}\n tabIndex={0}\n key={index}\n style={{ borderRadius: accordionBorderRadius }}\n onKeyDown={onKeyPress}\n >\n <StyledAccordionHeader onClick={handleOpen} className={disabledClass}>\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 className={showedBody} style={{ paddingLeft: `${leftPadding}` }}>\n <StyledAccordionBody>{children}</StyledAccordionBody>\n </StyledAccordionBodyAnimate>\n </StyledAccordionItem>\n );\n};\n"],"names":["AccordionItem","_ref","value","contentRight","contentLeft","title","_ref$pin","pin","children","_ref$type","type","index","disabled","onChangeValue","_useState","useState","_useState2","_slicedToArray","isOpen","setShow","_useState3","_useState4","leftPadding","setLeftPadding","handleOpen","onKeyPress","event","persist","keyCode","leftContentRef","useRef","useEffect","_leftContentRef$curre","_leftContentRef$curre2","leftContentWidth","current","offsetWidth","leftPaddingBody","concat","tokens","accordionItemGap","showedBody","classes","accordionItemShowBody","undefined","StyledAnimationPLus","React","createElement","StyledPlus","_StyledMinus","StyledMinus","size","color","className","accordionPlusAnimationElement","accordionBorderRadius","convertRoundnessMatrix","accordionItemBorderRadius","disabledClass","accordionDisabled","leftContent","_StyledArrow","StyledArrow","leftContentRotate","rightContent","rightContentRotate","StyledAccordionItem","role","accordionItem","tabIndex","key","style","borderRadius","onKeyDown","StyledAccordionHeader","onClick","StyledAccordionHeaderLeft","StyledAccordionContentLeft","ref","StyledAccordionTitle","StyledAccordionContentRight","StyledAccordionBodyAnimate","paddingLeft","StyledAccordionBody"],"mappings":";;;;;;;;;;;IAoBaA,aAA4E,GAAG,SAA/EA,aAA4EA,CAAAC,IAAA,EAWnF;AAAA,EAAA,IAVFC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,YAAY,GAAAF,IAAA,CAAZE,YAAY;IACZC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IACXC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAAAC,QAAA,GAAAL,IAAA,CACLM,GAAG;AAAHA,IAAAA,GAAG,GAAAD,QAAA,KAAG,KAAA,CAAA,GAAA,eAAe,GAAAA,QAAA;IACrBE,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IAAAC,SAAA,GAAAR,IAAA,CACRS,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,SAAA;IACbE,KAAK,GAAAV,IAAA,CAALU,KAAK;IACLC,QAAQ,GAAAX,IAAA,CAARW,QAAQ;IACRC,aAAa,GAAAZ,IAAA,CAAbY,aAAa,CAAA;AAEb,EAAA,IAAAC,SAAA,GAA0BC,cAAQ,CAACb,KAAK,CAAC;IAAAc,UAAA,GAAAC,uCAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAAlCI,IAAAA,MAAM,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,OAAO,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;AACtB,EAAA,IAAAI,UAAA,GAAsCL,cAAQ,EAA0B;IAAAM,UAAA,GAAAJ,uCAAA,CAAAG,UAAA,EAAA,CAAA,CAAA;AAAjEE,IAAAA,WAAW,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,cAAc,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AAElC,EAAA,IAAMG,UAAU,GAAG,SAAbA,UAAUA,GAAS;AACrB,IAAA,IAAIZ,QAAQ,EAAE;AACV,MAAA,OAAA;AACJ,KAAA;IACAO,OAAO,CAAC,CAACD,MAAM,CAAC,CAAA;AAChBL,IAAAA,aAAa,IAAIA,aAAa,CAACF,KAAK,EAAE,CAACO,MAAM,CAAC,CAAA;GACjD,CAAA;AAED,EAAA,IAAMO,UAAU,GAAG,SAAbA,UAAUA,CAAIC,KAAoC,EAAK;AACzD,IAAA,IAAId,QAAQ,EAAE;AACV,MAAA,OAAA;AACJ,KAAA;IACAc,KAAK,CAACC,OAAO,EAAE,CAAA;AACf,IAAA,IAAID,KAAK,CAACE,OAAO,KAAK,EAAE,EAAE;AACtBJ,MAAAA,UAAU,EAAE,CAAA;AAChB,KAAA;GACH,CAAA;AAED,EAAA,IAAMK,cAAc,GAAGC,YAAM,CAAiB,IAAI,CAAC,CAAA;AAEnDC,EAAAA,eAAS,CAAC,YAAM;IAAA,IAAAC,qBAAA,EAAAC,sBAAA,CAAA;IACZd,OAAO,CAACjB,KAAK,CAAC,CAAA;IACd,IAAMgC,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;AAClE,IAAA,IAAMK,eAAe,GAAGH,gBAAgB,GAAA,OAAA,CAAAI,MAAA,CAAWJ,gBAAgB,EAAAI,WAAAA,CAAAA,CAAAA,MAAA,CAAYC,uBAAM,CAACC,gBAAgB,UAAO,CAAC,CAAA;IAC9GjB,cAAc,CAACc,eAAe,CAAC,CAAA;GAClC,EAAE,CAACnC,KAAK,EAAEQ,IAAI,EAAEmB,cAAc,EAAEN,cAAc,CAAC,CAAC,CAAA;EAEjD,IAAMkB,UAAU,GAAGvB,MAAM,GAAGwB,wBAAO,CAACC,qBAAqB,GAAGC,SAAS,CAAA;AAErE,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;AAACC,MAAAA,IAAI,EAAC,IAAI;AAACC,MAAAA,KAAK,EAAC,QAAQ;MAACC,SAAS,EAAEZ,UAAU,KAAVA,IAAAA,IAAAA,UAAU,cAAVA,UAAU,GAAIC,wBAAO,CAACY,6BAAAA;AAA8B,KAAE,CAC/F,CAAC,CAAA;GAChB,CAAA;AAED,EAAA,IAAMC,qBAAqB,GAAGC,gCAAsB,CAACjD,GAAG,EAAA,MAAA,CAAA+B,MAAA,CAASC,uBAAM,CAACkB,yBAAyB,EAAA,GAAA,CAAA,EAAK,QAAQ,CAAC,CAAA;EAC/G,IAAMC,aAAa,GAAG9C,QAAQ,GAAG8B,wBAAO,CAACiB,iBAAiB,GAAG,EAAE,CAAA;EAE/D,IAAMC,WAAW,GAAGxD,WAAW,KAAA,IAAA,IAAXA,WAAW,KAAXA,KAAAA,CAAAA,GAAAA,WAAW,GAAKM,IAAI,KAAK,OAAO,GAAAmD,YAAA,KAAAA,YAAA,gBAAGf,KAAA,CAAAC,aAAA,CAACe,gCAAW,EAAA;AAACX,IAAAA,IAAI,EAAC,IAAI;AAACC,IAAAA,KAAK,EAAC,QAAA;GAAU,CAAC,IAAGR,SAAU,CAAA;AAC5G,EAAA,IAAMmB,iBAAiB,GAAGrD,IAAI,KAAK,OAAO,IAAIQ,MAAM,GAAGwB,wBAAO,CAACC,qBAAqB,GAAGC,SAAS,CAAA;EAEhG,IAAMoB,YAAY,GAAG7D,YAAY,KAAA,IAAA,IAAZA,YAAY,KAAZA,KAAAA,CAAAA,GAAAA,YAAY,GAAKO,IAAI,KAAK,MAAM,gBAAGoC,KAAA,CAAAC,aAAA,CAACF,mBAAmB,EAAE,IAAA,CAAC,GAAGD,SAAU,CAAA;AAC5F,EAAA,IAAMqB,kBAAkB,GAAGvD,IAAI,KAAK,MAAM,IAAIQ,MAAM,GAAGwB,wBAAO,CAACC,qBAAqB,GAAGC,SAAS,CAAA;AAEhG,EAAA,oBACIE,KAAA,CAAAC,aAAA,CAACmB,wCAAmB,EAAA;AAChBC,IAAAA,IAAI,EAAC,KAAK;IACVd,SAAS,EAAEX,wBAAO,CAAC0B,aAAc;AACjCC,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,GAAG,EAAE3D,KAAM;AACX4D,IAAAA,KAAK,EAAE;AAAEC,MAAAA,YAAY,EAAEjB,qBAAAA;KAAwB;AAC/CkB,IAAAA,SAAS,EAAEhD,UAAAA;AAAW,GAAA,eAEtBqB,KAAA,CAAAC,aAAA,CAAC2B,0CAAqB,EAAA;AAACC,IAAAA,OAAO,EAAEnD,UAAW;AAAC6B,IAAAA,SAAS,EAAEK,aAAAA;AAAc,GAAA,eACjEZ,KAAA,CAAAC,aAAA,CAAC6B,8CAAyB,EAAA,IAAA,EACrBhB,WAAW,iBACRd,KAAA,CAAAC,aAAA,CAAC8B,+CAA0B,EAAA;AAACC,IAAAA,GAAG,EAAEjD,cAAe;AAACwB,IAAAA,SAAS,EAAEU,iBAAAA;AAAkB,GAAA,EACzEH,WACuB,CAC/B,eACDd,KAAA,CAAAC,aAAA,CAACgC,yCAAoB,EAAE1E,IAAAA,EAAAA,KAA4B,CAC5B,CAAC,eAE5ByC,KAAA,CAAAC,aAAA,CAACiC,gDAA2B,EAAA;AAAC3B,IAAAA,SAAS,EAAEY,kBAAAA;GACnCD,EAAAA,YAAY,IAAIA,YACQ,CACV,CAAC,eACxBlB,KAAA,CAAAC,aAAA,CAACkC,+CAA0B,EAAA;AAAC5B,IAAAA,SAAS,EAAEZ,UAAW;AAAC8B,IAAAA,KAAK,EAAE;MAAEW,WAAW,EAAA,EAAA,CAAA5C,MAAA,CAAKhB,WAAW,CAAA;AAAG,KAAA;GACtFwB,eAAAA,KAAA,CAAAC,aAAA,CAACoC,wCAAmB,EAAE3E,IAAAA,EAAAA,QAA8B,CAC5B,CACX,CAAC,CAAA;AAE9B;;;;"}
|
@@ -20,22 +20,22 @@ var StyledAccordionItem = /*#__PURE__*/styled.div.withConfig({
|
|
20
20
|
}));
|
21
21
|
var StyledAccordionHeader = /*#__PURE__*/styled.div.withConfig({
|
22
22
|
componentId: "plasma-new-hope__sc-iot32d-1"
|
23
|
-
})(["padding:var(", ");display:flex;gap:var(", ");justify-content:space-between;align-items:center;cursor:pointer;"], Accordion_tokens.tokens.accordionItemPadding, Accordion_tokens.tokens.accordionItemGap);
|
23
|
+
})(["padding:var(", ");display:flex;gap:var(", ");justify-content:space-between;align-items:center;cursor:pointer;&.", "{opacity:0.4;cursor:not-allowed;}"], Accordion_tokens.tokens.accordionItemPadding, Accordion_tokens.tokens.accordionItemGap, Accordion_tokens.classes.accordionDisabled);
|
24
24
|
var StyledAccordionHeaderLeft = /*#__PURE__*/styled.div.withConfig({
|
25
25
|
componentId: "plasma-new-hope__sc-iot32d-2"
|
26
26
|
})(["display:flex;gap:var(", ");justify-content:space-between;align-items:center;"], Accordion_tokens.tokens.accordionItemGap);
|
27
27
|
var StyledAccordionContentRight = /*#__PURE__*/styled.div.withConfig({
|
28
28
|
componentId: "plasma-new-hope__sc-iot32d-3"
|
29
|
-
})(["transition:0.2s;transform:rotate(90deg)
|
29
|
+
})(["transition:0.2s;transform:rotate(90deg);&.", "{transition:0.2s;transform:rotate(0deg);}"], Accordion_tokens.classes.accordionItemShowBody);
|
30
30
|
var StyledAccordionContentLeft = /*#__PURE__*/styled.div.withConfig({
|
31
31
|
componentId: "plasma-new-hope__sc-iot32d-4"
|
32
|
-
})(["transition:0.2s;display:flex;align-items:center
|
32
|
+
})(["transition:0.2s;display:flex;align-items:center;&.", "{transition:0.2s;transform:rotate(180deg);}"], Accordion_tokens.classes.accordionItemShowBody);
|
33
33
|
var StyledAccordionTitle = /*#__PURE__*/styled.div.withConfig({
|
34
34
|
componentId: "plasma-new-hope__sc-iot32d-5"
|
35
35
|
})(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");"], Accordion_tokens.tokens.accordionItemTitleColor, Accordion_tokens.tokens.accordionItemTitleFontFamily, Accordion_tokens.tokens.accordionItemTitleFontSize, Accordion_tokens.tokens.accordionItemTitleFontWeight, Accordion_tokens.tokens.accordionItemTitleFontStyle, Accordion_tokens.tokens.accordionItemTitleLetterSpacing, Accordion_tokens.tokens.accordionItemTitleLineHeight);
|
36
36
|
var StyledAccordionBodyAnimate = /*#__PURE__*/styled.div.withConfig({
|
37
37
|
componentId: "plasma-new-hope__sc-iot32d-6"
|
38
|
-
})(["display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.2s ease-out;overflow:hidden
|
38
|
+
})(["display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.2s ease-out;overflow:hidden;&.", "{grid-template-rows:1fr;padding-bottom:var(", ");&.", "{transition:0.2s;transform:rotate(0deg);}}"], Accordion_tokens.classes.accordionItemShowBody, Accordion_tokens.tokens.accordionItemPaddingVertical, Accordion_tokens.classes.accordionPlusAnimationElement);
|
39
39
|
var StyledAccordionBody = /*#__PURE__*/styled.div.withConfig({
|
40
40
|
componentId: "plasma-new-hope__sc-iot32d-7"
|
41
41
|
})(["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(", ");"], Accordion_tokens.tokens.accordionItemTextColor, Accordion_tokens.tokens.accordionItemTextFontFamily, Accordion_tokens.tokens.accordionItemTextFontSize, Accordion_tokens.tokens.accordionItemTextFontWeight, Accordion_tokens.tokens.accordionItemTextFontStyle, Accordion_tokens.tokens.accordionItemTextLetterSpacing, Accordion_tokens.tokens.accordionItemTextLineHeight, Accordion_tokens.tokens.accordionItemPaddingHorizontal, Accordion_tokens.tokens.accordionItemPaddingHorizontal);
|
@@ -44,7 +44,7 @@ var StyledArrow = /*#__PURE__*/styled(IconChevronDownFill.IconChevronDownFill).w
|
|
44
44
|
})(["pointer-events:none;user-select:none;color:var(", ");"], Accordion_tokens.tokens.accordionItemTextColor);
|
45
45
|
var StyledMinus = /*#__PURE__*/styled(IconMinus.IconMinus).withConfig({
|
46
46
|
componentId: "plasma-new-hope__sc-iot32d-9"
|
47
|
-
})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0
|
47
|
+
})(["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);}"], Accordion_tokens.tokens.accordionItemTextColor, Accordion_tokens.classes.accordionPlusAnimationElement, Accordion_tokens.classes.accordionItemShowBody);
|
48
48
|
var StyledPlus = /*#__PURE__*/styled.div.withConfig({
|
49
49
|
componentId: "plasma-new-hope__sc-iot32d-10"
|
50
50
|
})(["position:relative;height:1rem;display:flex;align-items:center;justify-content:center;width:1rem;"]);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"AccordionItem.styles.js","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { IconChevronDownFill, IconMinus } from '../../../_Icon';\nimport { classes, tokens } from '../../Accordion.tokens';\nimport { addFocus } from '../../../../mixins';\n\nexport const StyledAccordionItem = styled.div`\n background: var(${tokens.accordionItemBackground});\n border-bottom: var(${tokens.accordionItemBorderBottom});\n &:focus {\n outline: none;\n }\n\n ${addFocus({\n outlineOffset: '0.125rem',\n outlineSize: '0.125rem',\n outlineRadius: '0',\n outlineColor: `var(${tokens.accordionItemFocus})`,\n })}\n\n &:last-child {\n border-bottom: none;\n }\n`;\n\nexport const StyledAccordionHeader = styled.div`\n padding: var(${tokens.accordionItemPadding});\n display: flex;\n gap: var(${tokens.accordionItemGap});\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n`;\n\nexport const StyledAccordionHeaderLeft = styled.div`\n display: flex;\n gap: var(${tokens.accordionItemGap});\n justify-content: space-between;\n align-items: center;\n`;\n\nexport const StyledAccordionContentRight = styled.div`\n transition: 0.2s;\n transform: rotate(90deg);\n\n
|
1
|
+
{"version":3,"file":"AccordionItem.styles.js","sources":["../../../../../src/components/Accordion/ui/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { IconChevronDownFill, IconMinus } from '../../../_Icon';\nimport { classes, tokens } from '../../Accordion.tokens';\nimport { addFocus } from '../../../../mixins';\n\nexport const StyledAccordionItem = styled.div`\n background: var(${tokens.accordionItemBackground});\n border-bottom: var(${tokens.accordionItemBorderBottom});\n &:focus {\n outline: none;\n }\n\n ${addFocus({\n outlineOffset: '0.125rem',\n outlineSize: '0.125rem',\n outlineRadius: '0',\n outlineColor: `var(${tokens.accordionItemFocus})`,\n })}\n\n &:last-child {\n border-bottom: none;\n }\n`;\n\nexport const StyledAccordionHeader = styled.div`\n padding: var(${tokens.accordionItemPadding});\n display: flex;\n gap: var(${tokens.accordionItemGap});\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n\n &.${classes.accordionDisabled} {\n opacity: 0.4;\n cursor: not-allowed;\n }\n`;\n\nexport const StyledAccordionHeaderLeft = styled.div`\n display: flex;\n gap: var(${tokens.accordionItemGap});\n justify-content: space-between;\n align-items: center;\n`;\n\nexport const StyledAccordionContentRight = styled.div`\n transition: 0.2s;\n transform: rotate(90deg);\n\n &.${classes.accordionItemShowBody} {\n transition: 0.2s;\n transform: rotate(0deg);\n }\n`;\n\nexport const StyledAccordionContentLeft = styled.div`\n transition: 0.2s;\n display: flex;\n align-items: center;\n\n &.${classes.accordionItemShowBody} {\n transition: 0.2s;\n transform: rotate(180deg);\n }\n`;\n\nexport const StyledAccordionTitle = styled.div`\n color: var(${tokens.accordionItemTitleColor});\n font-family: var(${tokens.accordionItemTitleFontFamily});\n font-size: var(${tokens.accordionItemTitleFontSize});\n font-weight: var(${tokens.accordionItemTitleFontWeight});\n font-style: var(${tokens.accordionItemTitleFontStyle});\n letter-spacing: var(${tokens.accordionItemTitleLetterSpacing});\n line-height: var(${tokens.accordionItemTitleLineHeight});\n`;\n\nexport const StyledAccordionBodyAnimate = styled.div`\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.2s ease-out;\n overflow: hidden;\n\n &.${classes.accordionItemShowBody} {\n grid-template-rows: 1fr;\n padding-bottom: var(${tokens.accordionItemPaddingVertical});\n\n &.${classes.accordionPlusAnimationElement} {\n transition: 0.2s;\n transform: rotate(0deg);\n }\n }\n`;\n\nexport const StyledAccordionBody = styled.div`\n color: var(${tokens.accordionItemTextColor});\n font-family: var(${tokens.accordionItemTextFontFamily});\n font-size: var(${tokens.accordionItemTextFontSize});\n font-weight: var(${tokens.accordionItemTextFontWeight});\n font-style: var(${tokens.accordionItemTextFontStyle});\n letter-spacing: var(${tokens.accordionItemTextLetterSpacing});\n line-height: var(${tokens.accordionItemTextLineHeight});\n overflow: hidden;\n padding-right: var(${tokens.accordionItemPaddingHorizontal});\n padding-left: var(${tokens.accordionItemPaddingHorizontal});\n`;\n\nexport const StyledArrow = styled(IconChevronDownFill)`\n pointer-events: none;\n user-select: none;\n color: var(${tokens.accordionItemTextColor});\n`;\n\nexport const StyledMinus = styled(IconMinus)`\n pointer-events: none;\n user-select: none;\n color: var(${tokens.accordionItemTextColor});\n display: flex;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n\n &.${classes.accordionPlusAnimationElement} {\n transition: 0.2s;\n transform: rotate(90deg);\n }\n\n &.${classes.accordionItemShowBody} {\n transition: 0.2s;\n transform: rotate(0deg);\n }\n`;\n\nexport const StyledPlus = styled.div`\n position: relative;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n`;\n"],"names":["StyledAccordionItem","styled","div","withConfig","componentId","tokens","accordionItemBackground","accordionItemBorderBottom","addFocus","outlineOffset","outlineSize","outlineRadius","outlineColor","concat","accordionItemFocus","StyledAccordionHeader","accordionItemPadding","accordionItemGap","classes","accordionDisabled","StyledAccordionHeaderLeft","StyledAccordionContentRight","accordionItemShowBody","StyledAccordionContentLeft","StyledAccordionTitle","accordionItemTitleColor","accordionItemTitleFontFamily","accordionItemTitleFontSize","accordionItemTitleFontWeight","accordionItemTitleFontStyle","accordionItemTitleLetterSpacing","accordionItemTitleLineHeight","StyledAccordionBodyAnimate","accordionItemPaddingVertical","accordionPlusAnimationElement","StyledAccordionBody","accordionItemTextColor","accordionItemTextFontFamily","accordionItemTextFontSize","accordionItemTextFontWeight","accordionItemTextFontStyle","accordionItemTextLetterSpacing","accordionItemTextLineHeight","accordionItemPaddingHorizontal","StyledArrow","IconChevronDownFill","StyledMinus","IconMinus","StyledPlus"],"mappings":"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"}
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
5
5
|
var React = require('react');
|
6
6
|
|
7
|
-
var updatePropsRecursively = function updatePropsRecursively(children, activeIndex, updateValue) {
|
7
|
+
var updatePropsRecursively = function updatePropsRecursively(children, activeIndex, disabled, updateValue) {
|
8
8
|
return React.Children.map(children || [], function (child, index) {
|
9
9
|
if (! /*#__PURE__*/React.isValidElement(child)) {
|
10
10
|
return child;
|
@@ -12,13 +12,14 @@ var updatePropsRecursively = function updatePropsRecursively(children, activeInd
|
|
12
12
|
var props = {
|
13
13
|
index: index,
|
14
14
|
value: activeIndex === index,
|
15
|
-
|
15
|
+
disabled: disabled,
|
16
|
+
onChangeValue: updateValue
|
16
17
|
};
|
17
18
|
return /*#__PURE__*/React.cloneElement(child, props);
|
18
19
|
});
|
19
20
|
};
|
20
|
-
var getChildren = function getChildren(children, activeIndex, updateValue) {
|
21
|
-
return updatePropsRecursively(children, activeIndex, updateValue);
|
21
|
+
var getChildren = function getChildren(children, activeIndex, disabled, updateValue) {
|
22
|
+
return updatePropsRecursively(children, activeIndex, disabled, updateValue);
|
22
23
|
};
|
23
24
|
|
24
25
|
exports.getChildren = getChildren;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Accordion/utils/index.ts"],"sourcesContent":["import { Children, ReactElement, ReactNode, cloneElement, isValidElement } from 'react';\n\nimport { AccordionItemProps } from '../ui/AccordionItem/AccordionItem.types';\n\nexport const updatePropsRecursively = (\n children?: ReactElement<AccordionItemProps>[],\n activeIndex?: number,\n updateValue?: (index?: number, value?: boolean) => void,\n): ReactNode[] =>\n Children.map(children || [], (child, index) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n const props = {\n index,\n value: activeIndex === index,\n updateValue,\n };\n\n return cloneElement(child, props);\n });\n\nexport const getChildren = (\n children: ReactElement<AccordionItemProps>[],\n activeIndex?: number,\n updateValue?: (index?: number, value?: boolean) => void,\n) => {\n return updatePropsRecursively(children, activeIndex, updateValue);\n};\n"],"names":["updatePropsRecursively","children","activeIndex","updateValue","Children","map","child","index","isValidElement","props","value","cloneElement","getChildren"],"mappings":";;;;;;
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Accordion/utils/index.ts"],"sourcesContent":["import { Children, ReactElement, ReactNode, cloneElement, isValidElement } from 'react';\n\nimport { AccordionItemProps } from '../ui/AccordionItem/AccordionItem.types';\n\nexport const updatePropsRecursively = (\n children?: ReactElement<AccordionItemProps>[],\n activeIndex?: number,\n disabled?: boolean,\n updateValue?: (index?: number, value?: boolean) => void,\n): ReactNode[] =>\n Children.map(children || [], (child, index) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n const props = {\n index,\n value: activeIndex === index,\n disabled,\n onChangeValue: updateValue,\n };\n\n return cloneElement(child, props);\n });\n\nexport const getChildren = (\n children: ReactElement<AccordionItemProps>[],\n activeIndex?: number,\n disabled?: boolean,\n updateValue?: (index?: number, value?: boolean) => void,\n) => {\n return updatePropsRecursively(children, activeIndex, disabled, updateValue);\n};\n"],"names":["updatePropsRecursively","children","activeIndex","disabled","updateValue","Children","map","child","index","isValidElement","props","value","onChangeValue","cloneElement","getChildren"],"mappings":";;;;;;AAIaA,IAAAA,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAC/BC,QAA6C,EAC7CC,WAAoB,EACpBC,QAAkB,EAClBC,WAAuD,EAAA;AAAA,EAAA,OAEvDC,cAAQ,CAACC,GAAG,CAACL,QAAQ,IAAI,EAAE,EAAE,UAACM,KAAK,EAAEC,KAAK,EAAK;AAC3C,IAAA,IAAI,eAACC,oBAAc,CAACF,KAAK,CAAC,EAAE;AACxB,MAAA,OAAOA,KAAK,CAAA;AAChB,KAAA;AAEA,IAAA,IAAMG,KAAK,GAAG;AACVF,MAAAA,KAAK,EAALA,KAAK;MACLG,KAAK,EAAET,WAAW,KAAKM,KAAK;AAC5BL,MAAAA,QAAQ,EAARA,QAAQ;AACRS,MAAAA,aAAa,EAAER,WAAAA;KAClB,CAAA;AAED,IAAA,oBAAOS,kBAAY,CAACN,KAAK,EAAEG,KAAK,CAAC,CAAA;AACrC,GAAC,CAAC,CAAA;AAAA,EAAA;AAEOI,IAAAA,WAAW,GAAG,SAAdA,WAAWA,CACpBb,QAA4C,EAC5CC,WAAoB,EACpBC,QAAkB,EAClBC,WAAuD,EACtD;EACD,OAAOJ,sBAAsB,CAACC,QAAQ,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,WAAW,CAAC,CAAA;AAC/E;;;;;"}
|
@@ -5,28 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
5
|
var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
|
6
6
|
var React = require('react');
|
7
7
|
|
8
|
-
var
|
8
|
+
var _path;
|
9
9
|
var ChevronDownFill = function ChevronDownFill(props) {
|
10
10
|
return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({
|
11
11
|
width: "100%",
|
12
12
|
viewBox: "0 0 16 16",
|
13
13
|
fill: "none"
|
14
|
-
}, props),
|
15
|
-
id: "clip3066_154194"
|
16
|
-
}, /*#__PURE__*/React.createElement("rect", {
|
17
|
-
width: "16.000000",
|
18
|
-
height: "16.000000",
|
19
|
-
fill: "currentColor",
|
20
|
-
fillOpacity: "0"
|
21
|
-
})))), _g || (_g = /*#__PURE__*/React.createElement("g", {
|
22
|
-
clipPath: "url(#clip3066_154194)"
|
23
|
-
}, /*#__PURE__*/React.createElement("path", {
|
14
|
+
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
24
15
|
id: "path",
|
25
16
|
d: "M11.45 5.79C11.37 5.61 11.19 5.5 11 5.5L5 5.5C4.8 5.5 4.62 5.61 4.54 5.79C4.46 5.96 4.49 6.17 4.62 6.32L7.62 9.82C7.71 9.93 7.85 10 8 10C8.14 10 8.28 9.93 8.37 9.82L11.37 6.32C11.5 6.17 11.53 5.96 11.45 5.79Z",
|
26
17
|
fillRule: "evenodd",
|
27
18
|
fill: "currentColor",
|
28
19
|
clipRule: "evenodd"
|
29
|
-
})))
|
20
|
+
})));
|
30
21
|
};
|
31
22
|
|
32
23
|
exports.ChevronDownFill = ChevronDownFill;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ChevronDownFill.js","sources":["../../../../src/components/_Icon/Icon.assets/ChevronDownFill.tsx"],"sourcesContent":["import React from 'react';\n\nimport { IconProps } from '../IconRoot';\n\nexport const ChevronDownFill: React.FC<IconProps> = (props) => (\n <svg width=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\" {...props}>\n <
|
1
|
+
{"version":3,"file":"ChevronDownFill.js","sources":["../../../../src/components/_Icon/Icon.assets/ChevronDownFill.tsx"],"sourcesContent":["import React from 'react';\n\nimport { IconProps } from '../IconRoot';\n\nexport const ChevronDownFill: React.FC<IconProps> = (props) => (\n <svg width=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\" {...props}>\n <path\n id=\"path\"\n d=\"M11.45 5.79C11.37 5.61 11.19 5.5 11 5.5L5 5.5C4.8 5.5 4.62 5.61 4.54 5.79C4.46 5.96 4.49 6.17 4.62 6.32L7.62 9.82C7.71 9.93 7.85 10 8 10C8.14 10 8.28 9.93 8.37 9.82L11.37 6.32C11.5 6.17 11.53 5.96 11.45 5.79Z\"\n fillRule=\"evenodd\"\n fill=\"currentColor\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\n"],"names":["ChevronDownFill","props","React","createElement","_extends","width","viewBox","fill","_path","id","d","fillRule","clipRule"],"mappings":";;;;;;;;IAIaA,eAAoC,GAAG,SAAvCA,eAAoCA,CAAIC,KAAK,EAAA;AAAA,EAAA,oBACtDC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,iCAAA,CAAA;AAAKC,IAAAA,KAAK,EAAC,MAAM;AAACC,IAAAA,OAAO,EAAC,WAAW;AAACC,IAAAA,IAAI,EAAC,MAAA;GAAWN,EAAAA,KAAK,GAAAO,KAAA,KAAAA,KAAA,gBACvDN,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AACIM,IAAAA,EAAE,EAAC,MAAM;AACTC,IAAAA,CAAC,EAAC,kNAAkN;AACpNC,IAAAA,QAAQ,EAAC,SAAS;AAClBJ,IAAAA,IAAI,EAAC,cAAc;AACnBK,IAAAA,QAAQ,EAAC,SAAA;GACZ,CAAC,CACD,CAAC,CAAA;AAAA;;;;"}
|
package/cjs/index.css
CHANGED
@@ -580,4 +580,4 @@
|
|
580
580
|
|
581
581
|
|
582
582
|
|
583
|
-
.
|
583
|
+
.Accordion_styles_rsiff6_bjv6ypd__465a9c67{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--plasma-accordion-gap);-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;height:auto;background:var(--plasma-accordion-background);}.Accordion_styles_rsiff6_bjv6ypd__465a9c67.Accordion_styles_rsiff6_accordionStretchingFixed__465a9c67{width:var(--plasma-accordion-width);}.Accordion_styles_rsiff6_bjv6ypd__465a9c67.Accordion_styles_rsiff6_accordionStretchingFilled__465a9c67{width:100%;}
|
@@ -1 +1 @@
|
|
1
|
-
.
|
1
|
+
.Accordion_styles_rsiff6_bjv6ypd__465a9c67{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--plasma-accordion-gap);-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;height:auto;background:var(--plasma-accordion-background);}.Accordion_styles_rsiff6_bjv6ypd__465a9c67.Accordion_styles_rsiff6_accordionStretchingFixed__465a9c67{width:var(--plasma-accordion-width);}.Accordion_styles_rsiff6_bjv6ypd__465a9c67.Accordion_styles_rsiff6_accordionStretchingFilled__465a9c67{width:100%;}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
|
-
import React, { forwardRef, useState,
|
2
|
+
import React, { forwardRef, useState, Children } from 'react';
|
3
3
|
import { cx } from '../../utils/index.js';
|
4
4
|
import { base } from './Accordion.styles.js';
|
5
5
|
import { classes } from './Accordion.tokens.js';
|
@@ -13,29 +13,31 @@ var accordionRoot = function accordionRoot(Root) {
|
|
13
13
|
view = _ref.view,
|
14
14
|
_ref$stretching = _ref.stretching,
|
15
15
|
stretching = _ref$stretching === void 0 ? 'filled' : _ref$stretching,
|
16
|
+
defaultActiveIndex = _ref.defaultActiveIndex,
|
16
17
|
children = _ref.children,
|
18
|
+
disabled = _ref.disabled,
|
17
19
|
className = _ref.className,
|
18
|
-
|
20
|
+
singleActive = _ref.singleActive,
|
21
|
+
onChangeValue = _ref.onChangeValue;
|
19
22
|
var stretchingClass = classes["".concat(stretching, "Stretching")];
|
20
|
-
var _useState = useState(),
|
23
|
+
var _useState = useState(defaultActiveIndex),
|
21
24
|
_useState2 = _slicedToArray(_useState, 2),
|
22
25
|
activeIndex = _useState2[0],
|
23
26
|
setActiveIndex = _useState2[1];
|
24
27
|
var updateValue = function updateValue(index, value) {
|
25
|
-
|
28
|
+
onChangeValue && onChangeValue(index, value);
|
29
|
+
if (value && singleActive) {
|
30
|
+
setActiveIndex(index);
|
31
|
+
}
|
26
32
|
};
|
27
|
-
var childrenArray =
|
28
|
-
|
29
|
-
}, [children]);
|
30
|
-
var childrenMemo = useMemo(function () {
|
31
|
-
return getChildren(childrenArray, activeIndex, updateValue);
|
32
|
-
}, [activeIndex, updateValue, childrenArray]);
|
33
|
+
var childrenArray = Children.toArray(children);
|
34
|
+
var childrenMemo = getChildren(childrenArray, activeIndex, disabled, updateValue);
|
33
35
|
return /*#__PURE__*/React.createElement(Root, {
|
34
36
|
ref: outerRootRef,
|
35
37
|
size: size,
|
36
38
|
view: view,
|
37
39
|
className: cx(stretchingClass, classes.accordionRoot, className)
|
38
|
-
},
|
40
|
+
}, childrenMemo);
|
39
41
|
});
|
40
42
|
};
|
41
43
|
var accordionConfig = {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { Children, forwardRef,
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { Children, forwardRef, useState } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { AccordionProps } from './Accordion.types';\nimport { base } from './Accordion.styles';\nimport { classes } from './Accordion.tokens';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { getChildren } from './utils';\n\nexport const accordionRoot = (Root: RootProps<HTMLDivElement, AccordionProps>) =>\n forwardRef<HTMLDivElement, AccordionProps>(\n (\n {\n size,\n view,\n stretching = 'filled',\n defaultActiveIndex,\n children,\n disabled,\n className,\n singleActive,\n onChangeValue,\n },\n outerRootRef,\n ) => {\n const stretchingClass = classes[`${stretching}Stretching` as keyof typeof classes];\n\n const [activeIndex, setActiveIndex] = useState<number | undefined>(defaultActiveIndex);\n\n const updateValue = (index?: number, value?: boolean) => {\n onChangeValue && onChangeValue(index, value);\n if (value && singleActive) {\n setActiveIndex(index);\n }\n };\n\n const childrenArray = Children.toArray(children) as React.ReactElement[];\n\n const childrenMemo = getChildren(childrenArray, activeIndex, disabled, updateValue);\n\n return (\n <Root\n ref={outerRootRef}\n size={size}\n view={view}\n className={cx(stretchingClass, classes.accordionRoot, className)}\n >\n {childrenMemo}\n </Root>\n );\n },\n );\n\nexport const accordionConfig = {\n name: 'Accordion',\n tag: 'div',\n layout: accordionRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n },\n};\n"],"names":["accordionRoot","Root","forwardRef","_ref","outerRootRef","size","view","_ref$stretching","stretching","defaultActiveIndex","children","disabled","className","singleActive","onChangeValue","stretchingClass","classes","concat","_useState","useState","_useState2","_slicedToArray","activeIndex","setActiveIndex","updateValue","index","value","childrenArray","Children","toArray","childrenMemo","getChildren","React","createElement","ref","cx","accordionConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":";;;;;;;;;IAYaA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,IAA+C,EAAA;AAAA,EAAA,oBACzEC,UAAU,CACN,UAAAC,IAAA,EAYIC,YAAY,EACX;AAAA,IAAA,IAXGC,IAAI,GAAAF,IAAA,CAAJE,IAAI;MACJC,IAAI,GAAAH,IAAA,CAAJG,IAAI;MAAAC,eAAA,GAAAJ,IAAA,CACJK,UAAU;AAAVA,MAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,eAAA;MACrBE,kBAAkB,GAAAN,IAAA,CAAlBM,kBAAkB;MAClBC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;MACRC,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;MACRC,SAAS,GAAAT,IAAA,CAATS,SAAS;MACTC,YAAY,GAAAV,IAAA,CAAZU,YAAY;MACZC,aAAa,GAAAX,IAAA,CAAbW,aAAa,CAAA;AAIjB,IAAA,IAAMC,eAAe,GAAGC,OAAO,IAAAC,MAAA,CAAIT,UAAU,EAAqC,YAAA,CAAA,CAAA,CAAA;AAElF,IAAA,IAAAU,SAAA,GAAsCC,QAAQ,CAAqBV,kBAAkB,CAAC;MAAAW,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAA/EI,MAAAA,WAAW,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,MAAAA,cAAc,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;IAElC,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAIC,KAAc,EAAEC,KAAe,EAAK;AACrDZ,MAAAA,aAAa,IAAIA,aAAa,CAACW,KAAK,EAAEC,KAAK,CAAC,CAAA;MAC5C,IAAIA,KAAK,IAAIb,YAAY,EAAE;QACvBU,cAAc,CAACE,KAAK,CAAC,CAAA;AACzB,OAAA;KACH,CAAA;AAED,IAAA,IAAME,aAAa,GAAGC,QAAQ,CAACC,OAAO,CAACnB,QAAQ,CAAyB,CAAA;IAExE,IAAMoB,YAAY,GAAGC,WAAW,CAACJ,aAAa,EAAEL,WAAW,EAAEX,QAAQ,EAAEa,WAAW,CAAC,CAAA;AAEnF,IAAA,oBACIQ,KAAA,CAAAC,aAAA,CAAChC,IAAI,EAAA;AACDiC,MAAAA,GAAG,EAAE9B,YAAa;AAClBC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,IAAI,EAAEA,IAAK;MACXM,SAAS,EAAEuB,EAAE,CAACpB,eAAe,EAAEC,OAAO,CAAChB,aAAa,EAAEY,SAAS,CAAA;AAAE,KAAA,EAEhEkB,YACC,CAAC,CAAA;AAEf,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAMM,eAAe,GAAG;AAC3BC,EAAAA,IAAI,EAAE,WAAW;AACjBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAEvC,aAAa;AACrBwC,EAAAA,IAAI,EAAJA,IAAI;AACJC,EAAAA,UAAU,EAAE;AACRnC,IAAAA,IAAI,EAAE;AACFoC,MAAAA,GAAG,EAAEC,MAAAA;KACR;AACDtC,IAAAA,IAAI,EAAE;AACFqC,MAAAA,GAAG,EAAEE,MAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACNvC,IAAAA,IAAI,EAAE,SAAS;AACfD,IAAAA,IAAI,EAAE,GAAA;AACV,GAAA;AACJ;;;;"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Accordion.styles.js","sources":["../../../src/components/Accordion/Accordion.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from './Accordion.tokens';\n\nexport const base = css`\n display: flex;\n flex-direction: column;\n gap: var(${tokens.accordionGap});\n align-items: stretch;\n height: auto;\n background: var(${tokens.accordionBackground});\n\n
|
1
|
+
{"version":3,"file":"Accordion.styles.js","sources":["../../../src/components/Accordion/Accordion.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from './Accordion.tokens';\n\nexport const base = css`\n display: flex;\n flex-direction: column;\n gap: var(${tokens.accordionGap});\n align-items: stretch;\n height: auto;\n background: var(${tokens.accordionBackground});\n\n &.${classes.fixedStretching} {\n width: var(${tokens.accordionWidth});\n }\n &.${classes.filledStretching} {\n width: 100%;\n }\n`;\n"],"names":["base"],"mappings":"AAIO,IAAMA,IAAI,GAchB;;;;"}
|
package/es/components/Accordion/{Accordion.styles_1mo1sxr.css → Accordion.styles_rsiff6.css}
RENAMED
@@ -1 +1 @@
|
|
1
|
-
.bjv6ypd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--plasma-accordion-gap);-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;height:auto;background:var(--plasma-accordion-background);}.bjv6ypd.
|
1
|
+
.bjv6ypd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--plasma-accordion-gap);-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;height:auto;background:var(--plasma-accordion-background);}.bjv6ypd.accordion-stretching-fixed{width:var(--plasma-accordion-width);}.bjv6ypd.accordion-stretching-filled{width:100%;}
|
@@ -5,7 +5,8 @@ var classes = {
|
|
5
5
|
accordionItem: 'accordion-item',
|
6
6
|
clearAccordionItem: 'clear-accordion-item',
|
7
7
|
accordionItemShowBody: 'accordion-item-show-body',
|
8
|
-
accordionPlusAnimationElement: 'accordion-plus-animation-element'
|
8
|
+
accordionPlusAnimationElement: 'accordion-plus-animation-element',
|
9
|
+
accordionDisabled: '--plasma-accordion-disabled'
|
9
10
|
};
|
10
11
|
var tokens = {
|
11
12
|
accordionGap: '--plasma-accordion-gap',
|