@amboss/design-system 3.29.4 → 3.29.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/components/Collapsible/Collapsible.d.ts +2 -1
- package/build/cjs/components/Collapsible/Collapsible.js +1 -1
- package/build/cjs/components/Utilities/Expandable/Expandable.d.ts +2 -1
- package/build/cjs/components/Utilities/Expandable/Expandable.js +1 -1
- package/build/esm/components/Collapsible/Collapsible.d.ts +2 -1
- package/build/esm/components/Collapsible/Collapsible.js +1 -1
- package/build/esm/components/Utilities/Expandable/Expandable.d.ts +2 -1
- package/build/esm/components/Utilities/Expandable/Expandable.js +1 -1
- package/package.json +1 -1
|
@@ -9,6 +9,7 @@ export type CollapsibleProps = {
|
|
|
9
9
|
];
|
|
10
10
|
isExpanded: boolean | undefined;
|
|
11
11
|
overflow?: Property.Overflow;
|
|
12
|
+
reduceMotion?: boolean;
|
|
12
13
|
};
|
|
13
14
|
export type CollapsibleHeaderProps = {
|
|
14
15
|
onClick?: (e: React.FormEvent<HTMLButtonElement>) => void;
|
|
@@ -16,4 +17,4 @@ export type CollapsibleHeaderProps = {
|
|
|
16
17
|
collapsedIconAriaLabel?: string;
|
|
17
18
|
} & React.ComponentProps<typeof Box>;
|
|
18
19
|
export declare function CollapsibleHeader({ space, vSpace, rSpace, lSpace, tSpace, bSpace, onClick, children, expandedIconAriaLabel, collapsedIconAriaLabel, }: CollapsibleHeaderProps): React.ReactElement;
|
|
19
|
-
export declare function Collapsible({ isExpanded, overflow, children, }: CollapsibleProps): React.ReactElement;
|
|
20
|
+
export declare function Collapsible({ isExpanded, overflow, children, reduceMotion, }: CollapsibleProps): React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Collapsible(){return Collapsible},get CollapsibleHeader(){return CollapsibleHeader}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Box=require("../Box/Box"),_Icon=require("../Icon/Icon"),_Inline=require("../Inline/Inline"),_Expandable=require("../Utilities/Expandable/Expandable"),IsExpandedContext=(0,_react.createContext)(!1),StyledButton=(0,_styled.default)("button",{target:"
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get Collapsible(){return Collapsible},get CollapsibleHeader(){return CollapsibleHeader}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Box=require("../Box/Box"),_Icon=require("../Icon/Icon"),_Inline=require("../Inline/Inline"),_Expandable=require("../Utilities/Expandable/Expandable"),IsExpandedContext=(0,_react.createContext)(!1),StyledButton=(0,_styled.default)("button",{target:"ectsdrj0",label:"StyledButton"})(({theme,isExpanded})=>({display:"block",width:"100%",backgroundColor:theme.values.color.background.primary.default,border:"none",cursor:"pointer",padding:0,...isExpanded&&{backgroundColor:theme.values.color.background.secondary.hover,":global(.isDarkmodeActive) &":{backgroundColor:theme.values.color.background.primary.default}},"&:hover":{backgroundColor:theme.values.color.background.secondary.hover,":global(.isDarkmodeActive) &":{backgroundColor:theme.values.color.background.primary.default}}}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvQ29sbGFwc2libGUvQ29sbGFwc2libGUudHN4Iiwic291cmNlcyI6WyJzcmMvY29tcG9uZW50cy9Db2xsYXBzaWJsZS9Db2xsYXBzaWJsZS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IGNyZWF0ZUNvbnRleHQsIHVzZUNvbnRleHQgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHR5cGUgeyBQcm9wZXJ0eSB9IGZyb20gXCJjc3N0eXBlXCI7XG5pbXBvcnQgeyBCb3ggfSBmcm9tIFwiLi4vQm94L0JveFwiO1xuaW1wb3J0IHsgSWNvbiB9IGZyb20gXCIuLi9JY29uL0ljb25cIjtcbmltcG9ydCB7IElubGluZSB9IGZyb20gXCIuLi9JbmxpbmUvSW5saW5lXCI7XG5pbXBvcnQgeyBFeHBhbmRhYmxlIH0gZnJvbSBcIi4uL1V0aWxpdGllcy9FeHBhbmRhYmxlL0V4cGFuZGFibGVcIjtcblxuZXhwb3J0IHR5cGUgQ29sbGFwc2libGVQcm9wcyA9IHtcbiAgLyoqIHRoZSBmaXJzdCBlbGVtZW50IG9mIHRoZSBhcnJheSBvZiBjaGlsZHJlbiBoYXMgdG8gYmUgIGA8Q29sbGFwc2libGVIZWFkZXIvPmAuIFRoZSByZXN0IG9mIHRoZSBjaGlsZHJlbiBpcyB0aGUgY29udGVudCB2aXNpYmxlIGFmdGVyIHNwcmVhZGluZyB0aGUgY29tcG9uZW50ICovXG4gIGNoaWxkcmVuOiBbXG4gICAgUmVhY3QuUmVhY3RFbGVtZW50PENvbGxhcHNpYmxlSGVhZGVyUHJvcHM+LFxuICAgIC4uLlJlYWN0LlJlYWN0RWxlbWVudFtdXG4gIF07XG4gIGlzRXhwYW5kZWQ6IGJvb2xlYW4gfCB1bmRlZmluZWQ7XG4gIG92ZXJmbG93PzogUHJvcGVydHkuT3ZlcmZsb3c7XG4gIHJlZHVjZU1vdGlvbj86IGJvb2xlYW47XG59O1xuXG5leHBvcnQgdHlwZSBDb2xsYXBzaWJsZUhlYWRlclByb3BzID0ge1xuICBvbkNsaWNrPzogKGU6IFJlYWN0LkZvcm1FdmVudDxIVE1MQnV0dG9uRWxlbWVudD4pID0+IHZvaWQ7XG4gIGV4cGFuZGVkSWNvbkFyaWFMYWJlbD86IHN0cmluZztcbiAgY29sbGFwc2VkSWNvbkFyaWFMYWJlbD86IHN0cmluZztcbn0gJiBSZWFjdC5Db21wb25lbnRQcm9wczx0eXBlb2YgQm94PjtcblxuY29uc3QgSXNFeHBhbmRlZENvbnRleHQgPSBjcmVhdGVDb250ZXh0KGZhbHNlKTtcblxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkLmJ1dHRvbjx7IGlzRXhwYW5kZWQ6IGJvb2xlYW4gfT4oXG4gICh7IHRoZW1lLCBpc0V4cGFuZGVkIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci5iYWNrZ3JvdW5kLnByaW1hcnkuZGVmYXVsdCxcbiAgICBib3JkZXI6IFwibm9uZVwiLFxuICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgcGFkZGluZzogMCxcbiAgICAuLi4oaXNFeHBhbmRlZCAmJiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci5iYWNrZ3JvdW5kLnNlY29uZGFyeS5ob3ZlcixcbiAgICAgIFwiOmdsb2JhbCguaXNEYXJrbW9kZUFjdGl2ZSkgJlwiOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLmJhY2tncm91bmQucHJpbWFyeS5kZWZhdWx0LFxuICAgICAgfSxcbiAgICB9KSxcblxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci5iYWNrZ3JvdW5kLnNlY29uZGFyeS5ob3ZlcixcbiAgICAgIFwiOmdsb2JhbCguaXNEYXJrbW9kZUFjdGl2ZSkgJlwiOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLmJhY2tncm91bmQucHJpbWFyeS5kZWZhdWx0LFxuICAgICAgfSxcbiAgICB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGZ1bmN0aW9uIENvbGxhcHNpYmxlSGVhZGVyKHtcbiAgc3BhY2UsXG4gIHZTcGFjZSxcbiAgclNwYWNlLFxuICBsU3BhY2UsXG4gIHRTcGFjZSxcbiAgYlNwYWNlLFxuICBvbkNsaWNrLFxuICBjaGlsZHJlbixcbiAgZXhwYW5kZWRJY29uQXJpYUxhYmVsID0gXCJleHBhbmRlZFwiLFxuICBjb2xsYXBzZWRJY29uQXJpYUxhYmVsID0gXCJjb2xsYXBzZWRcIixcbn06IENvbGxhcHNpYmxlSGVhZGVyUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICBjb25zdCBpc0V4cGFuZGVkID0gdXNlQ29udGV4dChJc0V4cGFuZGVkQ29udGV4dCk7XG4gIHJldHVybiAoXG4gICAgPFN0eWxlZEJ1dHRvblxuICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICBkYXRhLWRzLWlkPVwiQ29sbGFwc2libGVIZWFkZXJcIlxuICAgICAgaXNFeHBhbmRlZD17aXNFeHBhbmRlZH1cbiAgICAgIG9uQ2xpY2s9e29uQ2xpY2t9XG4gICAgPlxuICAgICAgPEJveFxuICAgICAgICBzcGFjZT17c3BhY2V9XG4gICAgICAgIHZTcGFjZT17dlNwYWNlfVxuICAgICAgICByU3BhY2U9e3JTcGFjZX1cbiAgICAgICAgbFNwYWNlPXtsU3BhY2V9XG4gICAgICAgIHRTcGFjZT17dFNwYWNlfVxuICAgICAgICBiU3BhY2U9e2JTcGFjZX1cbiAgICAgID5cbiAgICAgICAgPElubGluZSBhbGlnbkl0ZW1zPVwic3BhY2VCZXR3ZWVuXCIgbm9XcmFwPlxuICAgICAgICAgIDxkaXY+e2NoaWxkcmVufTwvZGl2PlxuICAgICAgICAgIDxJY29uXG4gICAgICAgICAgICByb2xlPVwiaW1nXCJcbiAgICAgICAgICAgIGFyaWEtbGFiZWw9e1xuICAgICAgICAgICAgICBpc0V4cGFuZGVkID8gZXhwYW5kZWRJY29uQXJpYUxhYmVsIDogY29sbGFwc2VkSWNvbkFyaWFMYWJlbFxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgbmFtZT17aXNFeHBhbmRlZCA/IFwiY2hldnJvbi11cFwiIDogXCJjaGV2cm9uLWRvd25cIn1cbiAgICAgICAgICAgIGNvbG9yPVwidGVydGlhcnlcIlxuICAgICAgICAgIC8+XG4gICAgICAgIDwvSW5saW5lPlxuICAgICAgPC9Cb3g+XG4gICAgPC9TdHlsZWRCdXR0b24+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBDb2xsYXBzaWJsZSh7XG4gIGlzRXhwYW5kZWQsXG4gIG92ZXJmbG93LFxuICBjaGlsZHJlbixcbiAgcmVkdWNlTW90aW9uID0gZmFsc2UsXG59OiBDb2xsYXBzaWJsZVByb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgY29uc3QgW2NvbGxhcHNpYmxlSGVhZGVyLCAuLi5jb2xsYXBzaWJsZUNoaWxkcmVuXSA9IGNoaWxkcmVuO1xuICByZXR1cm4gKFxuICAgIDxJc0V4cGFuZGVkQ29udGV4dC5Qcm92aWRlciB2YWx1ZT17aXNFeHBhbmRlZH0+XG4gICAgICB7Y29sbGFwc2libGVIZWFkZXJ9XG4gICAgICA8RXhwYW5kYWJsZVxuICAgICAgICBpc0V4cGFuZGVkPXtpc0V4cGFuZGVkfVxuICAgICAgICBvdmVyZmxvdz17b3ZlcmZsb3d9XG4gICAgICAgIHJlZHVjZU1vdGlvbj17cmVkdWNlTW90aW9ufVxuICAgICAgPlxuICAgICAgICB7Y29sbGFwc2libGVDaGlsZHJlbn1cbiAgICAgIDwvRXhwYW5kYWJsZT5cbiAgICA8L0lzRXhwYW5kZWRDb250ZXh0LlByb3ZpZGVyPlxuICApO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJCcUIifQ== */");function CollapsibleHeader({space,vSpace,rSpace,lSpace,tSpace,bSpace,onClick,children,expandedIconAriaLabel="expanded",collapsedIconAriaLabel="collapsed"}){let isExpanded=(0,_react.useContext)(IsExpandedContext);return _react.default.createElement(StyledButton,{type:"button","data-ds-id":"CollapsibleHeader",isExpanded:isExpanded,onClick:onClick},_react.default.createElement(_Box.Box,{space:space,vSpace:vSpace,rSpace:rSpace,lSpace:lSpace,tSpace:tSpace,bSpace:bSpace},_react.default.createElement(_Inline.Inline,{alignItems:"spaceBetween",noWrap:!0},_react.default.createElement("div",null,children),_react.default.createElement(_Icon.Icon,{role:"img","aria-label":isExpanded?expandedIconAriaLabel:collapsedIconAriaLabel,name:isExpanded?"chevron-up":"chevron-down",color:"tertiary"}))))}function Collapsible({isExpanded,overflow,children,reduceMotion=!1}){let[collapsibleHeader,...collapsibleChildren]=children;return _react.default.createElement(IsExpandedContext.Provider,{value:isExpanded},collapsibleHeader,_react.default.createElement(_Expandable.Expandable,{isExpanded:isExpanded,overflow:overflow,reduceMotion:reduceMotion},collapsibleChildren))}
|
|
@@ -7,5 +7,6 @@ export type ExpandableProps = {
|
|
|
7
7
|
isExpanded?: boolean;
|
|
8
8
|
/** Internally overflow is set to hidden when collapsed. Use this prop to restore overflow on expand */
|
|
9
9
|
overflow?: Property.Overflow;
|
|
10
|
+
reduceMotion?: boolean;
|
|
10
11
|
};
|
|
11
|
-
export declare function Expandable({ id, isExpanded, children, overflow, }: ExpandableProps): React.ReactElement;
|
|
12
|
+
export declare function Expandable({ id, isExpanded, children, overflow, reduceMotion, }: ExpandableProps): React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Expandable",{enumerable:!0,get:function(){return Expandable}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_ispropvalid=/*#__PURE__*/_interop_require_default._(require("@emotion/is-prop-valid")),StyledContainer=(0,_styled.default)("div",{target:"
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Expandable",{enumerable:!0,get:function(){return Expandable}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_ispropvalid=/*#__PURE__*/_interop_require_default._(require("@emotion/is-prop-valid")),_useWindow=require("../../../shared/useWindow"),StyledContainer=(0,_styled.default)("div",{target:"e1wnslky0",label:"StyledContainer"})(({isExpanded,reduceMotion})=>({display:"grid",gridTemplateRows:"0fr",...!reduceMotion&&{transition:"200ms grid-template-rows cubic-bezier(0.0, 0.0, 0.25, 1.0)"},...isExpanded&&{gridTemplateRows:"1fr"}}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvVXRpbGl0aWVzL0V4cGFuZGFibGUvRXhwYW5kYWJsZS50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL1V0aWxpdGllcy9FeHBhbmRhYmxlL0V4cGFuZGFibGUudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgdHlwZSB7IFByb3BlcnR5IH0gZnJvbSBcImNzc3R5cGVcIjtcbmltcG9ydCBpc1Byb3BWYWxpZCBmcm9tIFwiQGVtb3Rpb24vaXMtcHJvcC12YWxpZFwiO1xuaW1wb3J0IHsgdXNlV2luZG93IH0gZnJvbSBcIi4uLy4uLy4uL3NoYXJlZC91c2VXaW5kb3dcIjtcblxuZXhwb3J0IHR5cGUgRXhwYW5kYWJsZVByb3BzID0ge1xuICAvKiogYGlkYCBjYW4gYmUgcmVmZXJlbmNlZCBieSB0aGUgYnV0dG9uIHRyaWdnZXIncyBhcmlhLWNvbnRyb2xzIGF0dHJpYnV0ZSB0byBlc3RhYmxpc2ggYWNjZXNzaWJpbGl0eSBsaW5rYWdlLiAqL1xuICBpZD86IHN0cmluZztcbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbiAgaXNFeHBhbmRlZD86IGJvb2xlYW47XG4gIC8qKiBJbnRlcm5hbGx5IG92ZXJmbG93IGlzIHNldCB0byBoaWRkZW4gd2hlbiBjb2xsYXBzZWQuIFVzZSB0aGlzIHByb3AgdG8gcmVzdG9yZSBvdmVyZmxvdyBvbiBleHBhbmQgKi9cbiAgb3ZlcmZsb3c/OiBQcm9wZXJ0eS5PdmVyZmxvdztcbiAgcmVkdWNlTW90aW9uPzogYm9vbGVhbjtcbn07XG5cbmNvbnN0IEFOSU1BVElPTl9USU1FID0gMjAwO1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2PFBhcnRpYWw8RXhwYW5kYWJsZVByb3BzPj4oXG4gICh7IGlzRXhwYW5kZWQsIHJlZHVjZU1vdGlvbiB9KSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiZ3JpZFwiLFxuICAgIGdyaWRUZW1wbGF0ZVJvd3M6IFwiMGZyXCIsXG5cbiAgICAuLi4oIXJlZHVjZU1vdGlvbiAmJiB7XG4gICAgICB0cmFuc2l0aW9uOiBgJHtBTklNQVRJT05fVElNRX1tcyBncmlkLXRlbXBsYXRlLXJvd3MgY3ViaWMtYmV6aWVyKDAuMCwgMC4wLCAwLjI1LCAxLjApYCxcbiAgICB9KSxcblxuICAgIC4uLihpc0V4cGFuZGVkICYmIHtcbiAgICAgIGdyaWRUZW1wbGF0ZVJvd3M6IFwiMWZyXCIsXG4gICAgfSksXG4gIH0pXG4pO1xuXG50eXBlIFN0eWxlZENvbnRlbnRDb250YWluZXJQcm9wcyA9IHtcbiAgaXNFeHBhbmRlZDogYm9vbGVhbjtcbn0gJiBQaWNrPEV4cGFuZGFibGVQcm9wcywgXCJvdmVyZmxvd1wiPjtcblxuY29uc3QgU3R5bGVkQ29udGVudENvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiAocHJvcCkgPT5cbiAgICBpc1Byb3BWYWxpZChwcm9wKSAmJiBwcm9wICE9PSBcIm92ZXJmbG93XCIgJiYgcHJvcCAhPT0gXCJpc0V4cGFuZGVkXCIsXG59KTxTdHlsZWRDb250ZW50Q29udGFpbmVyUHJvcHM+KCh7IGlzRXhwYW5kZWQsIG92ZXJmbG93IH0pID0+ICh7XG4gIG92ZXJmbG93OiBcImhpZGRlblwiLFxuXG4gIC4uLihpc0V4cGFuZGVkICYmIHtcbiAgICBvdmVyZmxvdyxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBmdW5jdGlvbiBFeHBhbmRhYmxlKHtcbiAgaWQsXG4gIGlzRXhwYW5kZWQsXG4gIGNoaWxkcmVuLFxuICBvdmVyZmxvdyA9IFwidmlzaWJsZVwiLFxuICByZWR1Y2VNb3Rpb24gPSBmYWxzZSxcbn06IEV4cGFuZGFibGVQcm9wcyk6IFJlYWN0LlJlYWN0RWxlbWVudCB7XG4gIGNvbnN0IFtpc0NvbnRlbnRDb250YWluZXJFeHBhbmRlZCwgc2V0SXNDb250ZW50Q29udGFpbmVyRXhwYW5kZWRdID0gdXNlU3RhdGUoXG4gICAgISFpc0V4cGFuZGVkXG4gICk7XG5cbiAgY29uc3Qgd2luZG93ID0gdXNlV2luZG93KCk7XG4gIGNvbnN0IGlzTW90aW9uUmVkdWNlZCA9XG4gICAgcmVkdWNlTW90aW9uIHx8XG4gICAgd2luZG93Py5tYXRjaE1lZGlhKFwiKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSlcIikubWF0Y2hlcztcblxuICBjb25zdCBoYW5kbGVUcmFuc2l0aW9uRW5kID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChpc0V4cGFuZGVkKSB7XG4gICAgICBzZXRJc0NvbnRlbnRDb250YWluZXJFeHBhbmRlZCh0cnVlKTtcbiAgICB9XG4gIH0sIFtpc0V4cGFuZGVkXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaXNNb3Rpb25SZWR1Y2VkKSB7XG4gICAgICBzZXRJc0NvbnRlbnRDb250YWluZXJFeHBhbmRlZChpc0V4cGFuZGVkKTtcbiAgICB9IGVsc2Uge1xuICAgICAgc2V0SXNDb250ZW50Q29udGFpbmVyRXhwYW5kZWQoZmFsc2UpO1xuICAgIH1cbiAgfSwgW2lzRXhwYW5kZWQsIGlzTW90aW9uUmVkdWNlZF0pO1xuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZENvbnRhaW5lclxuICAgICAgb25UcmFuc2l0aW9uRW5kPXtoYW5kbGVUcmFuc2l0aW9uRW5kfVxuICAgICAgaXNFeHBhbmRlZD17aXNFeHBhbmRlZH1cbiAgICAgIGRhdGEtZHMtaWQ9XCJFeHBhbmRhYmxlXCJcbiAgICAgIGlkPXtpZH1cbiAgICAgIHJlZHVjZU1vdGlvbj17aXNNb3Rpb25SZWR1Y2VkfVxuICAgID5cbiAgICAgIDxTdHlsZWRDb250ZW50Q29udGFpbmVyXG4gICAgICAgIGlzRXhwYW5kZWQ9e2lzQ29udGVudENvbnRhaW5lckV4cGFuZGVkfVxuICAgICAgICBvdmVyZmxvdz17b3ZlcmZsb3d9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvU3R5bGVkQ29udGVudENvbnRhaW5lcj5cbiAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgKTtcbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQndCIn0= */"),StyledContentContainer=(0,_styled.default)("div",{shouldForwardProp:prop=>(0,_ispropvalid.default)(prop)&&"overflow"!==prop&&"isExpanded"!==prop,target:"e1wnslky1",label:"StyledContentContainer"})(({isExpanded,overflow})=>({overflow:"hidden",...isExpanded&&{overflow}}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvVXRpbGl0aWVzL0V4cGFuZGFibGUvRXhwYW5kYWJsZS50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL1V0aWxpdGllcy9FeHBhbmRhYmxlL0V4cGFuZGFibGUudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgdHlwZSB7IFByb3BlcnR5IH0gZnJvbSBcImNzc3R5cGVcIjtcbmltcG9ydCBpc1Byb3BWYWxpZCBmcm9tIFwiQGVtb3Rpb24vaXMtcHJvcC12YWxpZFwiO1xuaW1wb3J0IHsgdXNlV2luZG93IH0gZnJvbSBcIi4uLy4uLy4uL3NoYXJlZC91c2VXaW5kb3dcIjtcblxuZXhwb3J0IHR5cGUgRXhwYW5kYWJsZVByb3BzID0ge1xuICAvKiogYGlkYCBjYW4gYmUgcmVmZXJlbmNlZCBieSB0aGUgYnV0dG9uIHRyaWdnZXIncyBhcmlhLWNvbnRyb2xzIGF0dHJpYnV0ZSB0byBlc3RhYmxpc2ggYWNjZXNzaWJpbGl0eSBsaW5rYWdlLiAqL1xuICBpZD86IHN0cmluZztcbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbiAgaXNFeHBhbmRlZD86IGJvb2xlYW47XG4gIC8qKiBJbnRlcm5hbGx5IG92ZXJmbG93IGlzIHNldCB0byBoaWRkZW4gd2hlbiBjb2xsYXBzZWQuIFVzZSB0aGlzIHByb3AgdG8gcmVzdG9yZSBvdmVyZmxvdyBvbiBleHBhbmQgKi9cbiAgb3ZlcmZsb3c/OiBQcm9wZXJ0eS5PdmVyZmxvdztcbiAgcmVkdWNlTW90aW9uPzogYm9vbGVhbjtcbn07XG5cbmNvbnN0IEFOSU1BVElPTl9USU1FID0gMjAwO1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2PFBhcnRpYWw8RXhwYW5kYWJsZVByb3BzPj4oXG4gICh7IGlzRXhwYW5kZWQsIHJlZHVjZU1vdGlvbiB9KSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiZ3JpZFwiLFxuICAgIGdyaWRUZW1wbGF0ZVJvd3M6IFwiMGZyXCIsXG5cbiAgICAuLi4oIXJlZHVjZU1vdGlvbiAmJiB7XG4gICAgICB0cmFuc2l0aW9uOiBgJHtBTklNQVRJT05fVElNRX1tcyBncmlkLXRlbXBsYXRlLXJvd3MgY3ViaWMtYmV6aWVyKDAuMCwgMC4wLCAwLjI1LCAxLjApYCxcbiAgICB9KSxcblxuICAgIC4uLihpc0V4cGFuZGVkICYmIHtcbiAgICAgIGdyaWRUZW1wbGF0ZVJvd3M6IFwiMWZyXCIsXG4gICAgfSksXG4gIH0pXG4pO1xuXG50eXBlIFN0eWxlZENvbnRlbnRDb250YWluZXJQcm9wcyA9IHtcbiAgaXNFeHBhbmRlZDogYm9vbGVhbjtcbn0gJiBQaWNrPEV4cGFuZGFibGVQcm9wcywgXCJvdmVyZmxvd1wiPjtcblxuY29uc3QgU3R5bGVkQ29udGVudENvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiAocHJvcCkgPT5cbiAgICBpc1Byb3BWYWxpZChwcm9wKSAmJiBwcm9wICE9PSBcIm92ZXJmbG93XCIgJiYgcHJvcCAhPT0gXCJpc0V4cGFuZGVkXCIsXG59KTxTdHlsZWRDb250ZW50Q29udGFpbmVyUHJvcHM+KCh7IGlzRXhwYW5kZWQsIG92ZXJmbG93IH0pID0+ICh7XG4gIG92ZXJmbG93OiBcImhpZGRlblwiLFxuXG4gIC4uLihpc0V4cGFuZGVkICYmIHtcbiAgICBvdmVyZmxvdyxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBmdW5jdGlvbiBFeHBhbmRhYmxlKHtcbiAgaWQsXG4gIGlzRXhwYW5kZWQsXG4gIGNoaWxkcmVuLFxuICBvdmVyZmxvdyA9IFwidmlzaWJsZVwiLFxuICByZWR1Y2VNb3Rpb24gPSBmYWxzZSxcbn06IEV4cGFuZGFibGVQcm9wcyk6IFJlYWN0LlJlYWN0RWxlbWVudCB7XG4gIGNvbnN0IFtpc0NvbnRlbnRDb250YWluZXJFeHBhbmRlZCwgc2V0SXNDb250ZW50Q29udGFpbmVyRXhwYW5kZWRdID0gdXNlU3RhdGUoXG4gICAgISFpc0V4cGFuZGVkXG4gICk7XG5cbiAgY29uc3Qgd2luZG93ID0gdXNlV2luZG93KCk7XG4gIGNvbnN0IGlzTW90aW9uUmVkdWNlZCA9XG4gICAgcmVkdWNlTW90aW9uIHx8XG4gICAgd2luZG93Py5tYXRjaE1lZGlhKFwiKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSlcIikubWF0Y2hlcztcblxuICBjb25zdCBoYW5kbGVUcmFuc2l0aW9uRW5kID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChpc0V4cGFuZGVkKSB7XG4gICAgICBzZXRJc0NvbnRlbnRDb250YWluZXJFeHBhbmRlZCh0cnVlKTtcbiAgICB9XG4gIH0sIFtpc0V4cGFuZGVkXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaXNNb3Rpb25SZWR1Y2VkKSB7XG4gICAgICBzZXRJc0NvbnRlbnRDb250YWluZXJFeHBhbmRlZChpc0V4cGFuZGVkKTtcbiAgICB9IGVsc2Uge1xuICAgICAgc2V0SXNDb250ZW50Q29udGFpbmVyRXhwYW5kZWQoZmFsc2UpO1xuICAgIH1cbiAgfSwgW2lzRXhwYW5kZWQsIGlzTW90aW9uUmVkdWNlZF0pO1xuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZENvbnRhaW5lclxuICAgICAgb25UcmFuc2l0aW9uRW5kPXtoYW5kbGVUcmFuc2l0aW9uRW5kfVxuICAgICAgaXNFeHBhbmRlZD17aXNFeHBhbmRlZH1cbiAgICAgIGRhdGEtZHMtaWQ9XCJFeHBhbmRhYmxlXCJcbiAgICAgIGlkPXtpZH1cbiAgICAgIHJlZHVjZU1vdGlvbj17aXNNb3Rpb25SZWR1Y2VkfVxuICAgID5cbiAgICAgIDxTdHlsZWRDb250ZW50Q29udGFpbmVyXG4gICAgICAgIGlzRXhwYW5kZWQ9e2lzQ29udGVudENvbnRhaW5lckV4cGFuZGVkfVxuICAgICAgICBvdmVyZmxvdz17b3ZlcmZsb3d9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvU3R5bGVkQ29udGVudENvbnRhaW5lcj5cbiAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgKTtcbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQytCIn0= */");function Expandable({id,isExpanded,children,overflow="visible",reduceMotion=!1}){let[isContentContainerExpanded,setIsContentContainerExpanded]=(0,_react.useState)(!!isExpanded),window=(0,_useWindow.useWindow)(),isMotionReduced=reduceMotion||window?.matchMedia("(prefers-reduced-motion: reduce)").matches,handleTransitionEnd=(0,_react.useCallback)(()=>{isExpanded&&setIsContentContainerExpanded(!0)},[isExpanded]);return(0,_react.useEffect)(()=>{isMotionReduced?setIsContentContainerExpanded(isExpanded):setIsContentContainerExpanded(!1)},[isExpanded,isMotionReduced]),_react.default.createElement(StyledContainer,{onTransitionEnd:handleTransitionEnd,isExpanded:isExpanded,"data-ds-id":"Expandable",id:id,reduceMotion:isMotionReduced},_react.default.createElement(StyledContentContainer,{isExpanded:isContentContainerExpanded,overflow:overflow},children))}
|
|
@@ -9,6 +9,7 @@ export type CollapsibleProps = {
|
|
|
9
9
|
];
|
|
10
10
|
isExpanded: boolean | undefined;
|
|
11
11
|
overflow?: Property.Overflow;
|
|
12
|
+
reduceMotion?: boolean;
|
|
12
13
|
};
|
|
13
14
|
export type CollapsibleHeaderProps = {
|
|
14
15
|
onClick?: (e: React.FormEvent<HTMLButtonElement>) => void;
|
|
@@ -16,4 +17,4 @@ export type CollapsibleHeaderProps = {
|
|
|
16
17
|
collapsedIconAriaLabel?: string;
|
|
17
18
|
} & React.ComponentProps<typeof Box>;
|
|
18
19
|
export declare function CollapsibleHeader({ space, vSpace, rSpace, lSpace, tSpace, bSpace, onClick, children, expandedIconAriaLabel, collapsedIconAriaLabel, }: CollapsibleHeaderProps): React.ReactElement;
|
|
19
|
-
export declare function Collapsible({ isExpanded, overflow, children, }: CollapsibleProps): React.ReactElement;
|
|
20
|
+
export declare function Collapsible({ isExpanded, overflow, children, reduceMotion, }: CollapsibleProps): React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{createContext,useContext}from"react";import styled from"@emotion/styled";import{Box}from"../Box/Box";import{Icon}from"../Icon/Icon";import{Inline}from"../Inline/Inline";import{Expandable}from"../Utilities/Expandable/Expandable";let IsExpandedContext=createContext(!1),StyledButton=styled("button",{target:"
|
|
1
|
+
import React,{createContext,useContext}from"react";import styled from"@emotion/styled";import{Box}from"../Box/Box";import{Icon}from"../Icon/Icon";import{Inline}from"../Inline/Inline";import{Expandable}from"../Utilities/Expandable/Expandable";let IsExpandedContext=createContext(!1),StyledButton=styled("button",{target:"ectsdrj0",label:"StyledButton"})(({theme,isExpanded})=>({display:"block",width:"100%",backgroundColor:theme.values.color.background.primary.default,border:"none",cursor:"pointer",padding:0,...isExpanded&&{backgroundColor:theme.values.color.background.secondary.hover,":global(.isDarkmodeActive) &":{backgroundColor:theme.values.color.background.primary.default}},"&:hover":{backgroundColor:theme.values.color.background.secondary.hover,":global(.isDarkmodeActive) &":{backgroundColor:theme.values.color.background.primary.default}}}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvQ29sbGFwc2libGUvQ29sbGFwc2libGUudHN4Iiwic291cmNlcyI6WyJzcmMvY29tcG9uZW50cy9Db2xsYXBzaWJsZS9Db2xsYXBzaWJsZS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IGNyZWF0ZUNvbnRleHQsIHVzZUNvbnRleHQgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHR5cGUgeyBQcm9wZXJ0eSB9IGZyb20gXCJjc3N0eXBlXCI7XG5pbXBvcnQgeyBCb3ggfSBmcm9tIFwiLi4vQm94L0JveFwiO1xuaW1wb3J0IHsgSWNvbiB9IGZyb20gXCIuLi9JY29uL0ljb25cIjtcbmltcG9ydCB7IElubGluZSB9IGZyb20gXCIuLi9JbmxpbmUvSW5saW5lXCI7XG5pbXBvcnQgeyBFeHBhbmRhYmxlIH0gZnJvbSBcIi4uL1V0aWxpdGllcy9FeHBhbmRhYmxlL0V4cGFuZGFibGVcIjtcblxuZXhwb3J0IHR5cGUgQ29sbGFwc2libGVQcm9wcyA9IHtcbiAgLyoqIHRoZSBmaXJzdCBlbGVtZW50IG9mIHRoZSBhcnJheSBvZiBjaGlsZHJlbiBoYXMgdG8gYmUgIGA8Q29sbGFwc2libGVIZWFkZXIvPmAuIFRoZSByZXN0IG9mIHRoZSBjaGlsZHJlbiBpcyB0aGUgY29udGVudCB2aXNpYmxlIGFmdGVyIHNwcmVhZGluZyB0aGUgY29tcG9uZW50ICovXG4gIGNoaWxkcmVuOiBbXG4gICAgUmVhY3QuUmVhY3RFbGVtZW50PENvbGxhcHNpYmxlSGVhZGVyUHJvcHM+LFxuICAgIC4uLlJlYWN0LlJlYWN0RWxlbWVudFtdXG4gIF07XG4gIGlzRXhwYW5kZWQ6IGJvb2xlYW4gfCB1bmRlZmluZWQ7XG4gIG92ZXJmbG93PzogUHJvcGVydHkuT3ZlcmZsb3c7XG4gIHJlZHVjZU1vdGlvbj86IGJvb2xlYW47XG59O1xuXG5leHBvcnQgdHlwZSBDb2xsYXBzaWJsZUhlYWRlclByb3BzID0ge1xuICBvbkNsaWNrPzogKGU6IFJlYWN0LkZvcm1FdmVudDxIVE1MQnV0dG9uRWxlbWVudD4pID0+IHZvaWQ7XG4gIGV4cGFuZGVkSWNvbkFyaWFMYWJlbD86IHN0cmluZztcbiAgY29sbGFwc2VkSWNvbkFyaWFMYWJlbD86IHN0cmluZztcbn0gJiBSZWFjdC5Db21wb25lbnRQcm9wczx0eXBlb2YgQm94PjtcblxuY29uc3QgSXNFeHBhbmRlZENvbnRleHQgPSBjcmVhdGVDb250ZXh0KGZhbHNlKTtcblxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkLmJ1dHRvbjx7IGlzRXhwYW5kZWQ6IGJvb2xlYW4gfT4oXG4gICh7IHRoZW1lLCBpc0V4cGFuZGVkIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci5iYWNrZ3JvdW5kLnByaW1hcnkuZGVmYXVsdCxcbiAgICBib3JkZXI6IFwibm9uZVwiLFxuICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgcGFkZGluZzogMCxcbiAgICAuLi4oaXNFeHBhbmRlZCAmJiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci5iYWNrZ3JvdW5kLnNlY29uZGFyeS5ob3ZlcixcbiAgICAgIFwiOmdsb2JhbCguaXNEYXJrbW9kZUFjdGl2ZSkgJlwiOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLmJhY2tncm91bmQucHJpbWFyeS5kZWZhdWx0LFxuICAgICAgfSxcbiAgICB9KSxcblxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci5iYWNrZ3JvdW5kLnNlY29uZGFyeS5ob3ZlcixcbiAgICAgIFwiOmdsb2JhbCguaXNEYXJrbW9kZUFjdGl2ZSkgJlwiOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLmJhY2tncm91bmQucHJpbWFyeS5kZWZhdWx0LFxuICAgICAgfSxcbiAgICB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGZ1bmN0aW9uIENvbGxhcHNpYmxlSGVhZGVyKHtcbiAgc3BhY2UsXG4gIHZTcGFjZSxcbiAgclNwYWNlLFxuICBsU3BhY2UsXG4gIHRTcGFjZSxcbiAgYlNwYWNlLFxuICBvbkNsaWNrLFxuICBjaGlsZHJlbixcbiAgZXhwYW5kZWRJY29uQXJpYUxhYmVsID0gXCJleHBhbmRlZFwiLFxuICBjb2xsYXBzZWRJY29uQXJpYUxhYmVsID0gXCJjb2xsYXBzZWRcIixcbn06IENvbGxhcHNpYmxlSGVhZGVyUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICBjb25zdCBpc0V4cGFuZGVkID0gdXNlQ29udGV4dChJc0V4cGFuZGVkQ29udGV4dCk7XG4gIHJldHVybiAoXG4gICAgPFN0eWxlZEJ1dHRvblxuICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICBkYXRhLWRzLWlkPVwiQ29sbGFwc2libGVIZWFkZXJcIlxuICAgICAgaXNFeHBhbmRlZD17aXNFeHBhbmRlZH1cbiAgICAgIG9uQ2xpY2s9e29uQ2xpY2t9XG4gICAgPlxuICAgICAgPEJveFxuICAgICAgICBzcGFjZT17c3BhY2V9XG4gICAgICAgIHZTcGFjZT17dlNwYWNlfVxuICAgICAgICByU3BhY2U9e3JTcGFjZX1cbiAgICAgICAgbFNwYWNlPXtsU3BhY2V9XG4gICAgICAgIHRTcGFjZT17dFNwYWNlfVxuICAgICAgICBiU3BhY2U9e2JTcGFjZX1cbiAgICAgID5cbiAgICAgICAgPElubGluZSBhbGlnbkl0ZW1zPVwic3BhY2VCZXR3ZWVuXCIgbm9XcmFwPlxuICAgICAgICAgIDxkaXY+e2NoaWxkcmVufTwvZGl2PlxuICAgICAgICAgIDxJY29uXG4gICAgICAgICAgICByb2xlPVwiaW1nXCJcbiAgICAgICAgICAgIGFyaWEtbGFiZWw9e1xuICAgICAgICAgICAgICBpc0V4cGFuZGVkID8gZXhwYW5kZWRJY29uQXJpYUxhYmVsIDogY29sbGFwc2VkSWNvbkFyaWFMYWJlbFxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgbmFtZT17aXNFeHBhbmRlZCA/IFwiY2hldnJvbi11cFwiIDogXCJjaGV2cm9uLWRvd25cIn1cbiAgICAgICAgICAgIGNvbG9yPVwidGVydGlhcnlcIlxuICAgICAgICAgIC8+XG4gICAgICAgIDwvSW5saW5lPlxuICAgICAgPC9Cb3g+XG4gICAgPC9TdHlsZWRCdXR0b24+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBDb2xsYXBzaWJsZSh7XG4gIGlzRXhwYW5kZWQsXG4gIG92ZXJmbG93LFxuICBjaGlsZHJlbixcbiAgcmVkdWNlTW90aW9uID0gZmFsc2UsXG59OiBDb2xsYXBzaWJsZVByb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgY29uc3QgW2NvbGxhcHNpYmxlSGVhZGVyLCAuLi5jb2xsYXBzaWJsZUNoaWxkcmVuXSA9IGNoaWxkcmVuO1xuICByZXR1cm4gKFxuICAgIDxJc0V4cGFuZGVkQ29udGV4dC5Qcm92aWRlciB2YWx1ZT17aXNFeHBhbmRlZH0+XG4gICAgICB7Y29sbGFwc2libGVIZWFkZXJ9XG4gICAgICA8RXhwYW5kYWJsZVxuICAgICAgICBpc0V4cGFuZGVkPXtpc0V4cGFuZGVkfVxuICAgICAgICBvdmVyZmxvdz17b3ZlcmZsb3d9XG4gICAgICAgIHJlZHVjZU1vdGlvbj17cmVkdWNlTW90aW9ufVxuICAgICAgPlxuICAgICAgICB7Y29sbGFwc2libGVDaGlsZHJlbn1cbiAgICAgIDwvRXhwYW5kYWJsZT5cbiAgICA8L0lzRXhwYW5kZWRDb250ZXh0LlByb3ZpZGVyPlxuICApO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJCcUIifQ== */");export function CollapsibleHeader({space,vSpace,rSpace,lSpace,tSpace,bSpace,onClick,children,expandedIconAriaLabel="expanded",collapsedIconAriaLabel="collapsed"}){let isExpanded=useContext(IsExpandedContext);return React.createElement(StyledButton,{type:"button","data-ds-id":"CollapsibleHeader",isExpanded:isExpanded,onClick:onClick},React.createElement(Box,{space:space,vSpace:vSpace,rSpace:rSpace,lSpace:lSpace,tSpace:tSpace,bSpace:bSpace},React.createElement(Inline,{alignItems:"spaceBetween",noWrap:!0},React.createElement("div",null,children),React.createElement(Icon,{role:"img","aria-label":isExpanded?expandedIconAriaLabel:collapsedIconAriaLabel,name:isExpanded?"chevron-up":"chevron-down",color:"tertiary"}))))}export function Collapsible({isExpanded,overflow,children,reduceMotion=!1}){let[collapsibleHeader,...collapsibleChildren]=children;return React.createElement(IsExpandedContext.Provider,{value:isExpanded},collapsibleHeader,React.createElement(Expandable,{isExpanded:isExpanded,overflow:overflow,reduceMotion:reduceMotion},collapsibleChildren))}
|
|
@@ -7,5 +7,6 @@ export type ExpandableProps = {
|
|
|
7
7
|
isExpanded?: boolean;
|
|
8
8
|
/** Internally overflow is set to hidden when collapsed. Use this prop to restore overflow on expand */
|
|
9
9
|
overflow?: Property.Overflow;
|
|
10
|
+
reduceMotion?: boolean;
|
|
10
11
|
};
|
|
11
|
-
export declare function Expandable({ id, isExpanded, children, overflow, }: ExpandableProps): React.ReactElement;
|
|
12
|
+
export declare function Expandable({ id, isExpanded, children, overflow, reduceMotion, }: ExpandableProps): React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useCallback,useEffect,useState}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";let StyledContainer=styled("div",{target:"
|
|
1
|
+
import React,{useCallback,useEffect,useState}from"react";import styled from"@emotion/styled";import isPropValid from"@emotion/is-prop-valid";import{useWindow}from"../../../shared/useWindow";let StyledContainer=styled("div",{target:"e1wnslky0",label:"StyledContainer"})(({isExpanded,reduceMotion})=>({display:"grid",gridTemplateRows:"0fr",...!reduceMotion&&{transition:"200ms grid-template-rows cubic-bezier(0.0, 0.0, 0.25, 1.0)"},...isExpanded&&{gridTemplateRows:"1fr"}}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvVXRpbGl0aWVzL0V4cGFuZGFibGUvRXhwYW5kYWJsZS50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL1V0aWxpdGllcy9FeHBhbmRhYmxlL0V4cGFuZGFibGUudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgdHlwZSB7IFByb3BlcnR5IH0gZnJvbSBcImNzc3R5cGVcIjtcbmltcG9ydCBpc1Byb3BWYWxpZCBmcm9tIFwiQGVtb3Rpb24vaXMtcHJvcC12YWxpZFwiO1xuaW1wb3J0IHsgdXNlV2luZG93IH0gZnJvbSBcIi4uLy4uLy4uL3NoYXJlZC91c2VXaW5kb3dcIjtcblxuZXhwb3J0IHR5cGUgRXhwYW5kYWJsZVByb3BzID0ge1xuICAvKiogYGlkYCBjYW4gYmUgcmVmZXJlbmNlZCBieSB0aGUgYnV0dG9uIHRyaWdnZXIncyBhcmlhLWNvbnRyb2xzIGF0dHJpYnV0ZSB0byBlc3RhYmxpc2ggYWNjZXNzaWJpbGl0eSBsaW5rYWdlLiAqL1xuICBpZD86IHN0cmluZztcbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbiAgaXNFeHBhbmRlZD86IGJvb2xlYW47XG4gIC8qKiBJbnRlcm5hbGx5IG92ZXJmbG93IGlzIHNldCB0byBoaWRkZW4gd2hlbiBjb2xsYXBzZWQuIFVzZSB0aGlzIHByb3AgdG8gcmVzdG9yZSBvdmVyZmxvdyBvbiBleHBhbmQgKi9cbiAgb3ZlcmZsb3c/OiBQcm9wZXJ0eS5PdmVyZmxvdztcbiAgcmVkdWNlTW90aW9uPzogYm9vbGVhbjtcbn07XG5cbmNvbnN0IEFOSU1BVElPTl9USU1FID0gMjAwO1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2PFBhcnRpYWw8RXhwYW5kYWJsZVByb3BzPj4oXG4gICh7IGlzRXhwYW5kZWQsIHJlZHVjZU1vdGlvbiB9KSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiZ3JpZFwiLFxuICAgIGdyaWRUZW1wbGF0ZVJvd3M6IFwiMGZyXCIsXG5cbiAgICAuLi4oIXJlZHVjZU1vdGlvbiAmJiB7XG4gICAgICB0cmFuc2l0aW9uOiBgJHtBTklNQVRJT05fVElNRX1tcyBncmlkLXRlbXBsYXRlLXJvd3MgY3ViaWMtYmV6aWVyKDAuMCwgMC4wLCAwLjI1LCAxLjApYCxcbiAgICB9KSxcblxuICAgIC4uLihpc0V4cGFuZGVkICYmIHtcbiAgICAgIGdyaWRUZW1wbGF0ZVJvd3M6IFwiMWZyXCIsXG4gICAgfSksXG4gIH0pXG4pO1xuXG50eXBlIFN0eWxlZENvbnRlbnRDb250YWluZXJQcm9wcyA9IHtcbiAgaXNFeHBhbmRlZDogYm9vbGVhbjtcbn0gJiBQaWNrPEV4cGFuZGFibGVQcm9wcywgXCJvdmVyZmxvd1wiPjtcblxuY29uc3QgU3R5bGVkQ29udGVudENvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiAocHJvcCkgPT5cbiAgICBpc1Byb3BWYWxpZChwcm9wKSAmJiBwcm9wICE9PSBcIm92ZXJmbG93XCIgJiYgcHJvcCAhPT0gXCJpc0V4cGFuZGVkXCIsXG59KTxTdHlsZWRDb250ZW50Q29udGFpbmVyUHJvcHM+KCh7IGlzRXhwYW5kZWQsIG92ZXJmbG93IH0pID0+ICh7XG4gIG92ZXJmbG93OiBcImhpZGRlblwiLFxuXG4gIC4uLihpc0V4cGFuZGVkICYmIHtcbiAgICBvdmVyZmxvdyxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBmdW5jdGlvbiBFeHBhbmRhYmxlKHtcbiAgaWQsXG4gIGlzRXhwYW5kZWQsXG4gIGNoaWxkcmVuLFxuICBvdmVyZmxvdyA9IFwidmlzaWJsZVwiLFxuICByZWR1Y2VNb3Rpb24gPSBmYWxzZSxcbn06IEV4cGFuZGFibGVQcm9wcyk6IFJlYWN0LlJlYWN0RWxlbWVudCB7XG4gIGNvbnN0IFtpc0NvbnRlbnRDb250YWluZXJFeHBhbmRlZCwgc2V0SXNDb250ZW50Q29udGFpbmVyRXhwYW5kZWRdID0gdXNlU3RhdGUoXG4gICAgISFpc0V4cGFuZGVkXG4gICk7XG5cbiAgY29uc3Qgd2luZG93ID0gdXNlV2luZG93KCk7XG4gIGNvbnN0IGlzTW90aW9uUmVkdWNlZCA9XG4gICAgcmVkdWNlTW90aW9uIHx8XG4gICAgd2luZG93Py5tYXRjaE1lZGlhKFwiKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSlcIikubWF0Y2hlcztcblxuICBjb25zdCBoYW5kbGVUcmFuc2l0aW9uRW5kID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChpc0V4cGFuZGVkKSB7XG4gICAgICBzZXRJc0NvbnRlbnRDb250YWluZXJFeHBhbmRlZCh0cnVlKTtcbiAgICB9XG4gIH0sIFtpc0V4cGFuZGVkXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaXNNb3Rpb25SZWR1Y2VkKSB7XG4gICAgICBzZXRJc0NvbnRlbnRDb250YWluZXJFeHBhbmRlZChpc0V4cGFuZGVkKTtcbiAgICB9IGVsc2Uge1xuICAgICAgc2V0SXNDb250ZW50Q29udGFpbmVyRXhwYW5kZWQoZmFsc2UpO1xuICAgIH1cbiAgfSwgW2lzRXhwYW5kZWQsIGlzTW90aW9uUmVkdWNlZF0pO1xuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZENvbnRhaW5lclxuICAgICAgb25UcmFuc2l0aW9uRW5kPXtoYW5kbGVUcmFuc2l0aW9uRW5kfVxuICAgICAgaXNFeHBhbmRlZD17aXNFeHBhbmRlZH1cbiAgICAgIGRhdGEtZHMtaWQ9XCJFeHBhbmRhYmxlXCJcbiAgICAgIGlkPXtpZH1cbiAgICAgIHJlZHVjZU1vdGlvbj17aXNNb3Rpb25SZWR1Y2VkfVxuICAgID5cbiAgICAgIDxTdHlsZWRDb250ZW50Q29udGFpbmVyXG4gICAgICAgIGlzRXhwYW5kZWQ9e2lzQ29udGVudENvbnRhaW5lckV4cGFuZGVkfVxuICAgICAgICBvdmVyZmxvdz17b3ZlcmZsb3d9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvU3R5bGVkQ29udGVudENvbnRhaW5lcj5cbiAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgKTtcbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQndCIn0= */"),StyledContentContainer=styled("div",{shouldForwardProp:prop=>isPropValid(prop)&&"overflow"!==prop&&"isExpanded"!==prop,target:"e1wnslky1",label:"StyledContentContainer"})(({isExpanded,overflow})=>({overflow:"hidden",...isExpanded&&{overflow}}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvVXRpbGl0aWVzL0V4cGFuZGFibGUvRXhwYW5kYWJsZS50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL1V0aWxpdGllcy9FeHBhbmRhYmxlL0V4cGFuZGFibGUudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgdHlwZSB7IFByb3BlcnR5IH0gZnJvbSBcImNzc3R5cGVcIjtcbmltcG9ydCBpc1Byb3BWYWxpZCBmcm9tIFwiQGVtb3Rpb24vaXMtcHJvcC12YWxpZFwiO1xuaW1wb3J0IHsgdXNlV2luZG93IH0gZnJvbSBcIi4uLy4uLy4uL3NoYXJlZC91c2VXaW5kb3dcIjtcblxuZXhwb3J0IHR5cGUgRXhwYW5kYWJsZVByb3BzID0ge1xuICAvKiogYGlkYCBjYW4gYmUgcmVmZXJlbmNlZCBieSB0aGUgYnV0dG9uIHRyaWdnZXIncyBhcmlhLWNvbnRyb2xzIGF0dHJpYnV0ZSB0byBlc3RhYmxpc2ggYWNjZXNzaWJpbGl0eSBsaW5rYWdlLiAqL1xuICBpZD86IHN0cmluZztcbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbiAgaXNFeHBhbmRlZD86IGJvb2xlYW47XG4gIC8qKiBJbnRlcm5hbGx5IG92ZXJmbG93IGlzIHNldCB0byBoaWRkZW4gd2hlbiBjb2xsYXBzZWQuIFVzZSB0aGlzIHByb3AgdG8gcmVzdG9yZSBvdmVyZmxvdyBvbiBleHBhbmQgKi9cbiAgb3ZlcmZsb3c/OiBQcm9wZXJ0eS5PdmVyZmxvdztcbiAgcmVkdWNlTW90aW9uPzogYm9vbGVhbjtcbn07XG5cbmNvbnN0IEFOSU1BVElPTl9USU1FID0gMjAwO1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2PFBhcnRpYWw8RXhwYW5kYWJsZVByb3BzPj4oXG4gICh7IGlzRXhwYW5kZWQsIHJlZHVjZU1vdGlvbiB9KSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiZ3JpZFwiLFxuICAgIGdyaWRUZW1wbGF0ZVJvd3M6IFwiMGZyXCIsXG5cbiAgICAuLi4oIXJlZHVjZU1vdGlvbiAmJiB7XG4gICAgICB0cmFuc2l0aW9uOiBgJHtBTklNQVRJT05fVElNRX1tcyBncmlkLXRlbXBsYXRlLXJvd3MgY3ViaWMtYmV6aWVyKDAuMCwgMC4wLCAwLjI1LCAxLjApYCxcbiAgICB9KSxcblxuICAgIC4uLihpc0V4cGFuZGVkICYmIHtcbiAgICAgIGdyaWRUZW1wbGF0ZVJvd3M6IFwiMWZyXCIsXG4gICAgfSksXG4gIH0pXG4pO1xuXG50eXBlIFN0eWxlZENvbnRlbnRDb250YWluZXJQcm9wcyA9IHtcbiAgaXNFeHBhbmRlZDogYm9vbGVhbjtcbn0gJiBQaWNrPEV4cGFuZGFibGVQcm9wcywgXCJvdmVyZmxvd1wiPjtcblxuY29uc3QgU3R5bGVkQ29udGVudENvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiAocHJvcCkgPT5cbiAgICBpc1Byb3BWYWxpZChwcm9wKSAmJiBwcm9wICE9PSBcIm92ZXJmbG93XCIgJiYgcHJvcCAhPT0gXCJpc0V4cGFuZGVkXCIsXG59KTxTdHlsZWRDb250ZW50Q29udGFpbmVyUHJvcHM+KCh7IGlzRXhwYW5kZWQsIG92ZXJmbG93IH0pID0+ICh7XG4gIG92ZXJmbG93OiBcImhpZGRlblwiLFxuXG4gIC4uLihpc0V4cGFuZGVkICYmIHtcbiAgICBvdmVyZmxvdyxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBmdW5jdGlvbiBFeHBhbmRhYmxlKHtcbiAgaWQsXG4gIGlzRXhwYW5kZWQsXG4gIGNoaWxkcmVuLFxuICBvdmVyZmxvdyA9IFwidmlzaWJsZVwiLFxuICByZWR1Y2VNb3Rpb24gPSBmYWxzZSxcbn06IEV4cGFuZGFibGVQcm9wcyk6IFJlYWN0LlJlYWN0RWxlbWVudCB7XG4gIGNvbnN0IFtpc0NvbnRlbnRDb250YWluZXJFeHBhbmRlZCwgc2V0SXNDb250ZW50Q29udGFpbmVyRXhwYW5kZWRdID0gdXNlU3RhdGUoXG4gICAgISFpc0V4cGFuZGVkXG4gICk7XG5cbiAgY29uc3Qgd2luZG93ID0gdXNlV2luZG93KCk7XG4gIGNvbnN0IGlzTW90aW9uUmVkdWNlZCA9XG4gICAgcmVkdWNlTW90aW9uIHx8XG4gICAgd2luZG93Py5tYXRjaE1lZGlhKFwiKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSlcIikubWF0Y2hlcztcblxuICBjb25zdCBoYW5kbGVUcmFuc2l0aW9uRW5kID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChpc0V4cGFuZGVkKSB7XG4gICAgICBzZXRJc0NvbnRlbnRDb250YWluZXJFeHBhbmRlZCh0cnVlKTtcbiAgICB9XG4gIH0sIFtpc0V4cGFuZGVkXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaXNNb3Rpb25SZWR1Y2VkKSB7XG4gICAgICBzZXRJc0NvbnRlbnRDb250YWluZXJFeHBhbmRlZChpc0V4cGFuZGVkKTtcbiAgICB9IGVsc2Uge1xuICAgICAgc2V0SXNDb250ZW50Q29udGFpbmVyRXhwYW5kZWQoZmFsc2UpO1xuICAgIH1cbiAgfSwgW2lzRXhwYW5kZWQsIGlzTW90aW9uUmVkdWNlZF0pO1xuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZENvbnRhaW5lclxuICAgICAgb25UcmFuc2l0aW9uRW5kPXtoYW5kbGVUcmFuc2l0aW9uRW5kfVxuICAgICAgaXNFeHBhbmRlZD17aXNFeHBhbmRlZH1cbiAgICAgIGRhdGEtZHMtaWQ9XCJFeHBhbmRhYmxlXCJcbiAgICAgIGlkPXtpZH1cbiAgICAgIHJlZHVjZU1vdGlvbj17aXNNb3Rpb25SZWR1Y2VkfVxuICAgID5cbiAgICAgIDxTdHlsZWRDb250ZW50Q29udGFpbmVyXG4gICAgICAgIGlzRXhwYW5kZWQ9e2lzQ29udGVudENvbnRhaW5lckV4cGFuZGVkfVxuICAgICAgICBvdmVyZmxvdz17b3ZlcmZsb3d9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvU3R5bGVkQ29udGVudENvbnRhaW5lcj5cbiAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgKTtcbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQytCIn0= */");export function Expandable({id,isExpanded,children,overflow="visible",reduceMotion=!1}){let[isContentContainerExpanded,setIsContentContainerExpanded]=useState(!!isExpanded),window=useWindow(),isMotionReduced=reduceMotion||window?.matchMedia("(prefers-reduced-motion: reduce)").matches,handleTransitionEnd=useCallback(()=>{isExpanded&&setIsContentContainerExpanded(!0)},[isExpanded]);return useEffect(()=>{isMotionReduced?setIsContentContainerExpanded(isExpanded):setIsContentContainerExpanded(!1)},[isExpanded,isMotionReduced]),React.createElement(StyledContainer,{onTransitionEnd:handleTransitionEnd,isExpanded:isExpanded,"data-ds-id":"Expandable",id:id,reduceMotion:isMotionReduced},React.createElement(StyledContentContainer,{isExpanded:isContentContainerExpanded,overflow:overflow},children))}
|