@semcore/accordion 3.3.4 → 3.5.0

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.5.0] - 2021-03-04
+
+### Added
+
+- Disabled animation if reduce motion is preferred.
+
+## [3.4.1] - 2022-02-24
+
+### Added
+
+- Added repository field to package.json file.
+
+## [3.4.0] - 2022-01-18
+
+### Changed
+
+- Up version icons and use new icon.
+
 ## [3.3.4] - 2021-8-26
 
 ### Changed

package/lib/cjs/Accordion.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -33,13 +33,17 @@ var _flexBox = require("@semcore/flex-box");
 
 var _animation = require("@semcore/animation");
 
-var _xs = _interopRequireDefault(require("@semcore/icon/lib/ChevronRight/xs"));
+var _m = _interopRequireDefault(require("@semcore/icon/ChevronRight/m"));
 
 var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
@@ -50,16 +54,16 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SItemToggle_ljkep_gg_{cursor:pointer;outline:0}.___SItemToggle_ljkep_gg_.__keyboardFocused_ljkep_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}.___SItemToggle_ljkep_gg_.__disabled_ljkep_gg_{opacity:.3;cursor:default;pointer-events:none}.___SItemChevron_ljkep_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_ljkep_gg_.__selected_ljkep_gg_{transform:rotate(90deg)}"
+".___SItemToggle_1qep4_gg_{cursor:pointer;outline:0}.___SItemToggle_1qep4_gg_.__keyboardFocused_1qep4_gg_{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___SItemToggle_1qep4_gg_.__disabled_1qep4_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SItemChevron_1qep4_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_1qep4_gg_.__selected_1qep4_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_1qep4_gg_{transition:none}}"
 /*__inner_css_end__*/
-, "rn2j0n_gg_")
+, "89y8ic_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SItemToggle": "___SItemToggle_ljkep_gg_",
-  "_keyboardFocused": "__keyboardFocused_ljkep_gg_",
-  "_disabled": "__disabled_ljkep_gg_",
-  "__SItemChevron": "___SItemChevron_ljkep_gg_",
-  "_selected": "__selected_ljkep_gg_"
+  "__SItemToggle": "___SItemToggle_1qep4_gg_",
+  "_keyboardFocused": "__keyboardFocused_1qep4_gg_",
+  "_disabled": "__disabled_1qep4_gg_",
+  "__SItemChevron": "___SItemChevron_1qep4_gg_",
+  "_selected": "__selected_1qep4_gg_"
 });
 
 var RootAccordion = /*#__PURE__*/function (_Component) {
@@ -166,6 +170,7 @@ var RootItem = /*#__PURE__*/function (_Component2) {
         disabled: disabled,
         onClick: this.handleClick,
         id: "trigger-".concat(value),
+        role: 'button',
         'aria-expanded': selected,
         'aria-controls': "content-".concat(value)
       };
@@ -250,7 +255,7 @@ function Chevron(props) {
       _ref5;
 
   var styles = props.styles;
-  var SItemChevron = _xs["default"];
+  var SItemChevron = _m["default"];
   return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SItemChevron, _ref5.cn("SItemChevron", _objectSpread({}, (0, _core.assignProps)({}, _ref2))));
 }
 

package/lib/cjs/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion.js"],"names":["RootAccordion","newValue","value","asProps","Array","isArray","indexOfNewValue","indexOf","result","push","splice","handlers","selectedValue","duration","selected","includes","$handleInteraction","handleToggleInteraction","Children","Component","style","defaultValue","RootItem","disabled","onClick","handleClick","id","role","Toggle","e","key","preventDefault","currentTarget","click","styles","SItemToggle","Box","handleKeyDown","Chevron","props","SItemChevron","ChevronRightXS","Collapse","CollapseAnimate","Item","Accordion"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { Collapse as CollapseAnimate } from '@semcore/animation';\nimport ChevronRightXS from '@semcore/icon/lib/ChevronRight/xs';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/accordion.shadow.css';\n\nclass RootAccordion extends Component {\n  static displayName = 'Accordion';\n  static style = style;\n  static defaultProps = {\n    defaultValue: [],\n    duration: 350,\n  };\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleToggleInteraction = (newValue) => {\n    const { value } = this.asProps;\n\n    if (Array.isArray(value)) {\n      const indexOfNewValue = value.indexOf(newValue);\n      const result = [...value];\n      indexOfNewValue === -1 ? result.push(newValue) : result.splice(indexOfNewValue, 1);\n      this.handlers.value(result);\n    } else {\n      this.handlers.value(value === newValue ? null : newValue);\n    }\n  };\n\n  getItemProps({ value }) {\n    const { value: selectedValue, duration } = this.asProps;\n    const selected = Array.isArray(selectedValue)\n      ? selectedValue.includes(value)\n      : selectedValue === value;\n    return {\n      selected,\n      duration,\n      $handleInteraction: this.handleToggleInteraction,\n    };\n  }\n\n  render() {\n    const { Children } = this.asProps;\n    return <Children />;\n  }\n}\n\nexport class RootItem extends Component {\n  static displayName = 'Item';\n  static style = style;\n\n  handleClick = () => {\n    const { value, $handleInteraction } = this.asProps;\n\n    $handleInteraction(value);\n  };\n\n  getToggleProps() {\n    const { value, selected, disabled } = this.asProps;\n    return {\n      disabled,\n      onClick: this.handleClick,\n      id: `trigger-${value}`,\n      'aria-expanded': selected,\n      'aria-controls': `content-${value}`,\n    };\n  }\n\n  getCollapseProps() {\n    const { selected, duration, value } = this.asProps;\n    return {\n      selected,\n      duration,\n      id: `content-${value}`,\n      role: 'region',\n      'aria-labelledby': `trigger-${value}`,\n    };\n  }\n\n  getChevronProps() {\n    const { selected } = this.asProps;\n    return {\n      selected,\n    };\n  }\n\n  render() {\n    const { Children } = this.asProps;\n    return <Children />;\n  }\n}\n\nclass Toggle extends Component {\n  static enhance = [keyboardFocusEnhance()];\n\n  handleKeyDown(e) {\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        e.currentTarget.click();\n    }\n  }\n\n  render() {\n    const { styles } = this.asProps;\n    const SItemToggle = Root;\n\n    return sstyled(styles)(<SItemToggle render={Box} onKeyDown={this.handleKeyDown} />);\n  }\n}\n\nfunction Chevron(props) {\n  const { styles } = props;\n  const SItemChevron = Root;\n  return sstyled(styles)(<SItemChevron render={ChevronRightXS} />);\n}\n\nfunction Collapse(props) {\n  const { selected } = props;\n  return <Root render={CollapseAnimate} visible={selected} interactive />;\n}\n\nconst Item = createComponent(RootItem, {\n  Toggle,\n  Chevron,\n  Collapse,\n});\n\nconst Accordion = createComponent(RootAccordion, {\n  Item,\n});\n\nexport default Accordion;\n"],"file":"Accordion.js"}
+{"version":3,"sources":["../../src/Accordion.js"],"names":["RootAccordion","newValue","value","asProps","Array","isArray","indexOfNewValue","indexOf","result","push","splice","handlers","selectedValue","duration","selected","includes","$handleInteraction","handleToggleInteraction","Children","Component","style","defaultValue","RootItem","disabled","onClick","handleClick","id","role","Toggle","e","key","preventDefault","currentTarget","click","styles","SItemToggle","Box","handleKeyDown","Chevron","props","SItemChevron","ChevronRight","Collapse","CollapseAnimate","Item","Accordion"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMA,a;;;;;;;;;;;;;;;gHAcsB,UAACC,QAAD,EAAc;AACtC,UAAQC,KAAR,GAAkB,MAAKC,OAAvB,CAAQD,KAAR;;AAEA,UAAIE,KAAK,CAACC,OAAN,CAAcH,KAAd,CAAJ,EAA0B;AACxB,YAAMI,eAAe,GAAGJ,KAAK,CAACK,OAAN,CAAcN,QAAd,CAAxB;AACA,YAAMO,MAAM,uCAAON,KAAP,CAAZ;AACAI,QAAAA,eAAe,KAAK,CAAC,CAArB,GAAyBE,MAAM,CAACC,IAAP,CAAYR,QAAZ,CAAzB,GAAiDO,MAAM,CAACE,MAAP,CAAcJ,eAAd,EAA+B,CAA/B,CAAjD;;AACA,cAAKK,QAAL,CAAcT,KAAd,CAAoBM,MAApB;AACD,OALD,MAKO;AACL,cAAKG,QAAL,CAAcT,KAAd,CAAoBA,KAAK,KAAKD,QAAV,GAAqB,IAArB,GAA4BA,QAAhD;AACD;AACF,K;;;;;;WAjBD,6BAAoB;AAClB,aAAO;AACLC,QAAAA,KAAK,EAAE;AADF,OAAP;AAGD;;;WAeD,6BAAwB;AAAA,UAATA,KAAS,SAATA,KAAS;AACtB,0BAA2C,KAAKC,OAAhD;AAAA,UAAeS,aAAf,iBAAQV,KAAR;AAAA,UAA8BW,QAA9B,iBAA8BA,QAA9B;AACA,UAAMC,QAAQ,GAAGV,KAAK,CAACC,OAAN,CAAcO,aAAd,IACbA,aAAa,CAACG,QAAd,CAAuBb,KAAvB,CADa,GAEbU,aAAa,KAAKV,KAFtB;AAGA,aAAO;AACLY,QAAAA,QAAQ,EAARA,QADK;AAELD,QAAAA,QAAQ,EAARA,QAFK;AAGLG,QAAAA,kBAAkB,EAAE,KAAKC;AAHpB,OAAP;AAKD;;;WAED,kBAAS;AACP,UAAQC,QAAR,GAAqB,KAAKf,OAA1B,CAAQe,QAAR;AACA,0BAAO,gCAAC,QAAD,OAAP;AACD;;;EA1CyBC,e;;iCAAtBnB,a,iBACiB,W;iCADjBA,a,WAEWoB,K;iCAFXpB,a,kBAGkB;AACpBqB,EAAAA,YAAY,EAAE,EADM;AAEpBR,EAAAA,QAAQ,EAAE;AAFU,C;;IA0CXS,Q;;;;;;;;;;;;;;;qGAIG,YAAM;AAClB,2BAAsC,OAAKnB,OAA3C;AAAA,UAAQD,KAAR,kBAAQA,KAAR;AAAA,UAAec,kBAAf,kBAAeA,kBAAf;AAEAA,MAAAA,kBAAkB,CAACd,KAAD,CAAlB;AACD,K;;;;;;WAED,0BAAiB;AACf,2BAAsC,KAAKC,OAA3C;AAAA,UAAQD,KAAR,kBAAQA,KAAR;AAAA,UAAeY,QAAf,kBAAeA,QAAf;AAAA,UAAyBS,QAAzB,kBAAyBA,QAAzB;AACA,aAAO;AACLA,QAAAA,QAAQ,EAARA,QADK;AAELC,QAAAA,OAAO,EAAE,KAAKC,WAFT;AAGLC,QAAAA,EAAE,oBAAaxB,KAAb,CAHG;AAILyB,QAAAA,IAAI,EAAE,QAJD;AAKL,yBAAiBb,QALZ;AAML,2CAA4BZ,KAA5B;AANK,OAAP;AAQD;;;WAED,4BAAmB;AACjB,2BAAsC,KAAKC,OAA3C;AAAA,UAAQW,QAAR,kBAAQA,QAAR;AAAA,UAAkBD,QAAlB,kBAAkBA,QAAlB;AAAA,UAA4BX,KAA5B,kBAA4BA,KAA5B;AACA,aAAO;AACLY,QAAAA,QAAQ,EAARA,QADK;AAELD,QAAAA,QAAQ,EAARA,QAFK;AAGLa,QAAAA,EAAE,oBAAaxB,KAAb,CAHG;AAILyB,QAAAA,IAAI,EAAE,QAJD;AAKL,6CAA8BzB,KAA9B;AALK,OAAP;AAOD;;;WAED,2BAAkB;AAChB,UAAQY,QAAR,GAAqB,KAAKX,OAA1B,CAAQW,QAAR;AACA,aAAO;AACLA,QAAAA,QAAQ,EAARA;AADK,OAAP;AAGD;;;WAED,kBAAS;AACP,UAAQI,QAAR,GAAqB,KAAKf,OAA1B,CAAQe,QAAR;AACA,0BAAO,gCAAC,QAAD,OAAP;AACD;;;EA3C2BC,e;;;iCAAjBG,Q,iBACU,M;iCADVA,Q,WAEIF,K;;IA4CXQ,M;;;;;;;;;;;;WAGJ,uBAAcC,CAAd,EAAiB;AACf,cAAQA,CAAC,CAACC,GAAV;AACE,aAAK,OAAL;AACA,aAAK,GAAL;AACED,UAAAA,CAAC,CAACE,cAAF;AACAF,UAAAA,CAAC,CAACG,aAAF,CAAgBC,KAAhB;AAJJ;AAMD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAQC,MAAR,GAAmB,KAAK/B,OAAxB,CAAQ+B,MAAR;AACA,UAAMC,WAAW,GAE2BC,YAF5C;AAEA,qBAAO,mBAAQF,MAAR,CAAP,eAAuB,gCAAC,WAAD;AAAA,qBAAqC,KAAKG;AAA1C,iBAAvB;AACD;;;EAjBkBlB,e;;iCAAfS,M,aACa,CAAC,uCAAD,C;;AAmBnB,SAASU,OAAT,CAAiBC,KAAjB,EAAwB;AAAA;AAAA;;AACtB,MAAQL,MAAR,GAAmBK,KAAnB,CAAQL,MAAR;AACA,MAAMM,YAAY,GAC2BC,aAD7C;AACA,iBAAO,mBAAQP,MAAR,CAAP,eAAuB,gCAAC,YAAD,iFAAvB;AACD;;AAED,SAASQ,QAAT,CAAkBH,KAAlB,EAAyB;AAAA;;AACvB,MAAQzB,QAAR,GAAqByB,KAArB,CAAQzB,QAAR;AACA,sBAAO,gCAAc6B,mBAAd;AAAA,eAAwC7B,QAAxC;AAAA;AAAA,YAAP;AACD;;AAED,IAAM8B,IAAI,GAAG,sBAAgBtB,QAAhB,EAA0B;AACrCM,EAAAA,MAAM,EAANA,MADqC;AAErCU,EAAAA,OAAO,EAAPA,OAFqC;AAGrCI,EAAAA,QAAQ,EAARA;AAHqC,CAA1B,CAAb;AAMA,IAAMG,SAAS,GAAG,sBAAgB7C,aAAhB,EAA+B;AAC/C4C,EAAAA,IAAI,EAAJA;AAD+C,CAA/B,CAAlB;eAIeC,S","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { Collapse as CollapseAnimate } from '@semcore/animation';\nimport ChevronRight from '@semcore/icon/ChevronRight/m';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/accordion.shadow.css';\n\nclass RootAccordion extends Component {\n  static displayName = 'Accordion';\n  static style = style;\n  static defaultProps = {\n    defaultValue: [],\n    duration: 350,\n  };\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleToggleInteraction = (newValue) => {\n    const { value } = this.asProps;\n\n    if (Array.isArray(value)) {\n      const indexOfNewValue = value.indexOf(newValue);\n      const result = [...value];\n      indexOfNewValue === -1 ? result.push(newValue) : result.splice(indexOfNewValue, 1);\n      this.handlers.value(result);\n    } else {\n      this.handlers.value(value === newValue ? null : newValue);\n    }\n  };\n\n  getItemProps({ value }) {\n    const { value: selectedValue, duration } = this.asProps;\n    const selected = Array.isArray(selectedValue)\n      ? selectedValue.includes(value)\n      : selectedValue === value;\n    return {\n      selected,\n      duration,\n      $handleInteraction: this.handleToggleInteraction,\n    };\n  }\n\n  render() {\n    const { Children } = this.asProps;\n    return <Children />;\n  }\n}\n\nexport class RootItem extends Component {\n  static displayName = 'Item';\n  static style = style;\n\n  handleClick = () => {\n    const { value, $handleInteraction } = this.asProps;\n\n    $handleInteraction(value);\n  };\n\n  getToggleProps() {\n    const { value, selected, disabled } = this.asProps;\n    return {\n      disabled,\n      onClick: this.handleClick,\n      id: `trigger-${value}`,\n      role: 'button',\n      'aria-expanded': selected,\n      'aria-controls': `content-${value}`,\n    };\n  }\n\n  getCollapseProps() {\n    const { selected, duration, value } = this.asProps;\n    return {\n      selected,\n      duration,\n      id: `content-${value}`,\n      role: 'region',\n      'aria-labelledby': `trigger-${value}`,\n    };\n  }\n\n  getChevronProps() {\n    const { selected } = this.asProps;\n    return {\n      selected,\n    };\n  }\n\n  render() {\n    const { Children } = this.asProps;\n    return <Children />;\n  }\n}\n\nclass Toggle extends Component {\n  static enhance = [keyboardFocusEnhance()];\n\n  handleKeyDown(e) {\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        e.currentTarget.click();\n    }\n  }\n\n  render() {\n    const { styles } = this.asProps;\n    const SItemToggle = Root;\n\n    return sstyled(styles)(<SItemToggle render={Box} onKeyDown={this.handleKeyDown} />);\n  }\n}\n\nfunction Chevron(props) {\n  const { styles } = props;\n  const SItemChevron = Root;\n  return sstyled(styles)(<SItemChevron render={ChevronRight} />);\n}\n\nfunction Collapse(props) {\n  const { selected } = props;\n  return <Root render={CollapseAnimate} visible={selected} interactive />;\n}\n\nconst Item = createComponent(RootItem, {\n  Toggle,\n  Chevron,\n  Collapse,\n});\n\nconst Accordion = createComponent(RootAccordion, {\n  Item,\n});\n\nexport default Accordion;\n"],"file":"Accordion.js"}

package/lib/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -26,4 +26,8 @@ Object.keys(_Accordion).forEach(function (key) {
     }
   });
 });
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.js.map

package/lib/cjs/style/accordion.shadow.css

@@ -23,3 +23,9 @@ SItemChevron {
     transform: rotate(90deg);
   }
 }
+
+@media (prefers-reduced-motion) {
+  SItemChevron {
+    transition: none;
+  }
+}

package/lib/es6/Accordion.js

@@ -11,9 +11,9 @@ import { assignProps as _assignProps3 } from "@semcore/core";
 import { assignProps as _assignProps2 } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -23,7 +23,7 @@ import React from 'react';
 import createComponent, { Component, sstyled, Root } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
 import { Collapse as CollapseAnimate } from '@semcore/animation';
-import ChevronRightXS from '@semcore/icon/lib/ChevronRight/xs';
+import ChevronRight from '@semcore/icon/ChevronRight/m';
 import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 
 /*__reshadow-styles__:"./style/accordion.shadow.css"*/
@@ -31,16 +31,16 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SItemToggle_ljkep_gg_{cursor:pointer;outline:0}.___SItemToggle_ljkep_gg_.__keyboardFocused_ljkep_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}.___SItemToggle_ljkep_gg_.__disabled_ljkep_gg_{opacity:.3;cursor:default;pointer-events:none}.___SItemChevron_ljkep_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_ljkep_gg_.__selected_ljkep_gg_{transform:rotate(90deg)}"
+".___SItemToggle_1qep4_gg_{cursor:pointer;outline:0}.___SItemToggle_1qep4_gg_.__keyboardFocused_1qep4_gg_{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___SItemToggle_1qep4_gg_.__disabled_1qep4_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SItemChevron_1qep4_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_1qep4_gg_.__selected_1qep4_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_1qep4_gg_{transition:none}}"
 /*__inner_css_end__*/
-, "rn2j0n_gg_")
+, "89y8ic_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SItemToggle": "___SItemToggle_ljkep_gg_",
-  "_keyboardFocused": "__keyboardFocused_ljkep_gg_",
-  "_disabled": "__disabled_ljkep_gg_",
-  "__SItemChevron": "___SItemChevron_ljkep_gg_",
-  "_selected": "__selected_ljkep_gg_"
+  "__SItemToggle": "___SItemToggle_1qep4_gg_",
+  "_keyboardFocused": "__keyboardFocused_1qep4_gg_",
+  "_disabled": "__disabled_1qep4_gg_",
+  "__SItemChevron": "___SItemChevron_1qep4_gg_",
+  "_selected": "__selected_1qep4_gg_"
 });
 
 var RootAccordion = /*#__PURE__*/function (_Component) {
@@ -156,6 +156,7 @@ export var RootItem = /*#__PURE__*/function (_Component2) {
         disabled: disabled,
         onClick: this.handleClick,
         id: "trigger-".concat(value),
+        role: 'button',
         'aria-expanded': selected,
         'aria-controls': "content-".concat(value)
       };
@@ -243,7 +244,7 @@ function Chevron(props) {
       _ref5;
 
   var styles = props.styles;
-  var SItemChevron = ChevronRightXS;
+  var SItemChevron = ChevronRight;
   return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SItemChevron, _ref5.cn("SItemChevron", _objectSpread({}, _assignProps2({}, _ref2))));
 }
 

package/lib/es6/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion.js"],"names":["React","createComponent","Component","sstyled","Root","Box","Collapse","CollapseAnimate","ChevronRightXS","keyboardFocusEnhance","RootAccordion","newValue","value","asProps","Array","isArray","indexOfNewValue","indexOf","result","push","splice","handlers","selectedValue","duration","selected","includes","$handleInteraction","handleToggleInteraction","Children","style","defaultValue","RootItem","disabled","onClick","handleClick","id","role","Toggle","e","key","preventDefault","currentTarget","click","styles","SItemToggle","handleKeyDown","Chevron","props","SItemChevron","Item","Accordion"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { Collapse as CollapseAnimate } from '@semcore/animation';\nimport ChevronRightXS from '@semcore/icon/lib/ChevronRight/xs';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/accordion.shadow.css';\n\nclass RootAccordion extends Component {\n  static displayName = 'Accordion';\n  static style = style;\n  static defaultProps = {\n    defaultValue: [],\n    duration: 350,\n  };\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleToggleInteraction = (newValue) => {\n    const { value } = this.asProps;\n\n    if (Array.isArray(value)) {\n      const indexOfNewValue = value.indexOf(newValue);\n      const result = [...value];\n      indexOfNewValue === -1 ? result.push(newValue) : result.splice(indexOfNewValue, 1);\n      this.handlers.value(result);\n    } else {\n      this.handlers.value(value === newValue ? null : newValue);\n    }\n  };\n\n  getItemProps({ value }) {\n    const { value: selectedValue, duration } = this.asProps;\n    const selected = Array.isArray(selectedValue)\n      ? selectedValue.includes(value)\n      : selectedValue === value;\n    return {\n      selected,\n      duration,\n      $handleInteraction: this.handleToggleInteraction,\n    };\n  }\n\n  render() {\n    const { Children } = this.asProps;\n    return <Children />;\n  }\n}\n\nexport class RootItem extends Component {\n  static displayName = 'Item';\n  static style = style;\n\n  handleClick = () => {\n    const { value, $handleInteraction } = this.asProps;\n\n    $handleInteraction(value);\n  };\n\n  getToggleProps() {\n    const { value, selected, disabled } = this.asProps;\n    return {\n      disabled,\n      onClick: this.handleClick,\n      id: `trigger-${value}`,\n      'aria-expanded': selected,\n      'aria-controls': `content-${value}`,\n    };\n  }\n\n  getCollapseProps() {\n    const { selected, duration, value } = this.asProps;\n    return {\n      selected,\n      duration,\n      id: `content-${value}`,\n      role: 'region',\n      'aria-labelledby': `trigger-${value}`,\n    };\n  }\n\n  getChevronProps() {\n    const { selected } = this.asProps;\n    return {\n      selected,\n    };\n  }\n\n  render() {\n    const { Children } = this.asProps;\n    return <Children />;\n  }\n}\n\nclass Toggle extends Component {\n  static enhance = [keyboardFocusEnhance()];\n\n  handleKeyDown(e) {\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        e.currentTarget.click();\n    }\n  }\n\n  render() {\n    const { styles } = this.asProps;\n    const SItemToggle = Root;\n\n    return sstyled(styles)(<SItemToggle render={Box} onKeyDown={this.handleKeyDown} />);\n  }\n}\n\nfunction Chevron(props) {\n  const { styles } = props;\n  const SItemChevron = Root;\n  return sstyled(styles)(<SItemChevron render={ChevronRightXS} />);\n}\n\nfunction Collapse(props) {\n  const { selected } = props;\n  return <Root render={CollapseAnimate} visible={selected} interactive />;\n}\n\nconst Item = createComponent(RootItem, {\n  Toggle,\n  Chevron,\n  Collapse,\n});\n\nconst Accordion = createComponent(RootAccordion, {\n  Item,\n});\n\nexport default Accordion;\n"],"file":"Accordion.js"}
+{"version":3,"sources":["../../src/Accordion.js"],"names":["React","createComponent","Component","sstyled","Root","Box","Collapse","CollapseAnimate","ChevronRight","keyboardFocusEnhance","RootAccordion","newValue","value","asProps","Array","isArray","indexOfNewValue","indexOf","result","push","splice","handlers","selectedValue","duration","selected","includes","$handleInteraction","handleToggleInteraction","Children","style","defaultValue","RootItem","disabled","onClick","handleClick","id","role","Toggle","e","key","preventDefault","currentTarget","click","styles","SItemToggle","handleKeyDown","Chevron","props","SItemChevron","Item","Accordion"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { Collapse as CollapseAnimate } from '@semcore/animation';\nimport ChevronRight from '@semcore/icon/ChevronRight/m';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/accordion.shadow.css';\n\nclass RootAccordion extends Component {\n  static displayName = 'Accordion';\n  static style = style;\n  static defaultProps = {\n    defaultValue: [],\n    duration: 350,\n  };\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleToggleInteraction = (newValue) => {\n    const { value } = this.asProps;\n\n    if (Array.isArray(value)) {\n      const indexOfNewValue = value.indexOf(newValue);\n      const result = [...value];\n      indexOfNewValue === -1 ? result.push(newValue) : result.splice(indexOfNewValue, 1);\n      this.handlers.value(result);\n    } else {\n      this.handlers.value(value === newValue ? null : newValue);\n    }\n  };\n\n  getItemProps({ value }) {\n    const { value: selectedValue, duration } = this.asProps;\n    const selected = Array.isArray(selectedValue)\n      ? selectedValue.includes(value)\n      : selectedValue === value;\n    return {\n      selected,\n      duration,\n      $handleInteraction: this.handleToggleInteraction,\n    };\n  }\n\n  render() {\n    const { Children } = this.asProps;\n    return <Children />;\n  }\n}\n\nexport class RootItem extends Component {\n  static displayName = 'Item';\n  static style = style;\n\n  handleClick = () => {\n    const { value, $handleInteraction } = this.asProps;\n\n    $handleInteraction(value);\n  };\n\n  getToggleProps() {\n    const { value, selected, disabled } = this.asProps;\n    return {\n      disabled,\n      onClick: this.handleClick,\n      id: `trigger-${value}`,\n      role: 'button',\n      'aria-expanded': selected,\n      'aria-controls': `content-${value}`,\n    };\n  }\n\n  getCollapseProps() {\n    const { selected, duration, value } = this.asProps;\n    return {\n      selected,\n      duration,\n      id: `content-${value}`,\n      role: 'region',\n      'aria-labelledby': `trigger-${value}`,\n    };\n  }\n\n  getChevronProps() {\n    const { selected } = this.asProps;\n    return {\n      selected,\n    };\n  }\n\n  render() {\n    const { Children } = this.asProps;\n    return <Children />;\n  }\n}\n\nclass Toggle extends Component {\n  static enhance = [keyboardFocusEnhance()];\n\n  handleKeyDown(e) {\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        e.currentTarget.click();\n    }\n  }\n\n  render() {\n    const { styles } = this.asProps;\n    const SItemToggle = Root;\n\n    return sstyled(styles)(<SItemToggle render={Box} onKeyDown={this.handleKeyDown} />);\n  }\n}\n\nfunction Chevron(props) {\n  const { styles } = props;\n  const SItemChevron = Root;\n  return sstyled(styles)(<SItemChevron render={ChevronRight} />);\n}\n\nfunction Collapse(props) {\n  const { selected } = props;\n  return <Root render={CollapseAnimate} visible={selected} interactive />;\n}\n\nconst Item = createComponent(RootItem, {\n  Toggle,\n  Chevron,\n  Collapse,\n});\n\nconst Accordion = createComponent(RootAccordion, {\n  Item,\n});\n\nexport default Accordion;\n"],"file":"Accordion.js"}

package/lib/es6/style/accordion.shadow.css

@@ -23,3 +23,9 @@ SItemChevron {
     transform: rotate(90deg);
   }
 }
+
+@media (prefers-reduced-motion) {
+  SItemChevron {
+    transition: none;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/accordion",
   "description": "SEMRush Accordion Component",
-  "version": "3.3.4",
+  "version": "3.5.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -16,13 +16,18 @@
     "@semcore/utils": "^3.17",
     "@semcore/animation": "^1.2",
     "@semcore/flex-box": "^4",
-    "@semcore/icon": "^2"
+    "@semcore/icon": "^2.16"
   },
   "peerDependencies": {
     "@semcore/core": "^1.11",
     "react": "16.8 - 17"
   },
   "jest": {
-    "preset": "jest-preset-ui"
+    "preset": "@semcore/jest-preset-ui"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/semrush/intergalactic.git",
+    "directory": "semcore/accordion"
   }
 }

package/src/Accordion.js

@@ -2,7 +2,7 @@ import React from 'react';
 import createComponent, { Component, sstyled, Root } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
 import { Collapse as CollapseAnimate } from '@semcore/animation';
-import ChevronRightXS from '@semcore/icon/lib/ChevronRight/xs';
+import ChevronRight from '@semcore/icon/ChevronRight/m';
 import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 
 import style from './style/accordion.shadow.css';
@@ -68,6 +68,7 @@ export class RootItem extends Component {
       disabled,
       onClick: this.handleClick,
       id: `trigger-${value}`,
+      role: 'button',
       'aria-expanded': selected,
       'aria-controls': `content-${value}`,
     };
@@ -120,7 +121,7 @@ class Toggle extends Component {
 function Chevron(props) {
   const { styles } = props;
   const SItemChevron = Root;
-  return sstyled(styles)(<SItemChevron render={ChevronRightXS} />);
+  return sstyled(styles)(<SItemChevron render={ChevronRight} />);
 }
 
 function Collapse(props) {

package/src/style/accordion.shadow.css

@@ -23,3 +23,9 @@ SItemChevron {
     transform: rotate(90deg);
   }
 }
+
+@media (prefers-reduced-motion) {
+  SItemChevron {
+    transition: none;
+  }
+}