@semcore/accordion 3.5.2 → 3.5.5

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.5.5] - 2022-04-28
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/icon` [2.20.0 ~> 2.21.0]).
+
+## [3.5.4] - 2022-04-03
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/animation` [1.5.0 ~> 1.5.0]).
+
+## [3.5.3] - 2022-03-21
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/icon` [2.19.4 ~> 2.20.0]).
+
 ## [3.5.2] - 2022-03-14
 
 ### Changed

package/lib/cjs/Accordion.js

@@ -235,7 +235,7 @@ var Toggle = /*#__PURE__*/function (_Component3) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref4;
 
       var styles = this.asProps.styles;
@@ -251,7 +251,7 @@ var Toggle = /*#__PURE__*/function (_Component3) {
 (0, _defineProperty2["default"])(Toggle, "enhance", [(0, _keyboardFocusEnhance["default"])()]);
 
 function Chevron(props) {
-  var _ref2 = this ? this.asProps : arguments[0],
+  var _ref2 = arguments[0],
       _ref5;
 
   var styles = props.styles;
@@ -260,8 +260,7 @@ function Chevron(props) {
 }
 
 function Collapse(props) {
-  var _ref3 = this ? this.asProps : arguments[0];
-
+  var _ref3 = arguments[0];
   var selected = props.selected;
   return /*#__PURE__*/_react["default"].createElement(_animation.Collapse, (0, _core.assignProps)({
     "visible": selected,

package/lib/cjs/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion.jsx"],"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":"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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"}
+{"version":3,"sources":["../../src/Accordion.jsx"],"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":"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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/cjs/index.d.ts

@@ -0,0 +1,61 @@
+import { Box, IFlexProps } from '@semcore/flex-box';
+import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
+import { ICollapseProps } from '@semcore/animation';
+
+export type AccordionValue = null | number | string | Array<number | string | null>;
+
+export interface IAccordionProps<T extends AccordionValue = AccordionValue> extends IFlexProps {
+  /** Value for the active tab. Can be set as stroke, number, null or as array.
+   * @type AccordionValue
+   * */
+  value?: T;
+  /**
+   * Value of the active tabs selected by default
+   * @type AccordionValue
+   * @default []
+   */
+  defaultValue?: T;
+  /** Called when the selection is changed
+   * @type (value: AccordionValue, event?: React.SyntheticEvent) => void
+   * */
+  onChange?: (value: T, event?: React.SyntheticEvent) => void;
+  /** Animation duration
+   * @default 350 */
+  duration?: number;
+}
+
+export interface IAccordionContext {
+  getItemProps: PropGetterFn;
+}
+
+export interface IAccordionHandlers {
+  value: (value: AccordionValue) => void;
+}
+
+export interface IAccordionItemProps {
+  /** Tab value */
+  value: string | number;
+  /** Disabling selection changes */
+  disabled?: boolean;
+}
+
+export interface IAccordionItemContext {
+  getToggleProps?: PropGetterFn;
+  getCollapseProps?: PropGetterFn;
+  getChevronProps?: PropGetterFn;
+  selected?: boolean;
+}
+
+declare const Accordion: (<T, V extends AccordionValue = AccordionValue>(
+  props: CProps<IAccordionProps<V> & T, IAccordionContext, IAccordionHandlers>,
+) => ReturnEl) & {
+  Item: (<T>(
+    props: CProps<IAccordionItemProps & T, IAccordionItemContext, IAccordionHandlers>,
+  ) => ReturnEl) & {
+    Toggle: typeof Box;
+    Chevron: typeof Box;
+    Collapse: <T>(props: ICollapseProps & T) => ReturnEl;
+  };
+};
+
+export default Accordion;

package/lib/es6/Accordion.js

@@ -223,7 +223,7 @@ var Toggle = /*#__PURE__*/function (_Component3) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref4;
 
       var styles = this.asProps.styles;
@@ -240,7 +240,7 @@ var Toggle = /*#__PURE__*/function (_Component3) {
 _defineProperty(Toggle, "enhance", [keyboardFocusEnhance()]);
 
 function Chevron(props) {
-  var _ref2 = this ? this.asProps : arguments[0],
+  var _ref2 = arguments[0],
       _ref5;
 
   var styles = props.styles;
@@ -249,8 +249,7 @@ function Chevron(props) {
 }
 
 function Collapse(props) {
-  var _ref3 = this ? this.asProps : arguments[0];
-
+  var _ref3 = arguments[0];
   var selected = props.selected;
   return /*#__PURE__*/React.createElement(CollapseAnimate, _assignProps3({
     "visible": selected,

package/lib/es6/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Accordion.jsx"],"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"}
+{"version":3,"sources":["../../src/Accordion.jsx"],"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/index.d.ts

@@ -0,0 +1,61 @@
+import { Box, IFlexProps } from '@semcore/flex-box';
+import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
+import { ICollapseProps } from '@semcore/animation';
+
+export type AccordionValue = null | number | string | Array<number | string | null>;
+
+export interface IAccordionProps<T extends AccordionValue = AccordionValue> extends IFlexProps {
+  /** Value for the active tab. Can be set as stroke, number, null or as array.
+   * @type AccordionValue
+   * */
+  value?: T;
+  /**
+   * Value of the active tabs selected by default
+   * @type AccordionValue
+   * @default []
+   */
+  defaultValue?: T;
+  /** Called when the selection is changed
+   * @type (value: AccordionValue, event?: React.SyntheticEvent) => void
+   * */
+  onChange?: (value: T, event?: React.SyntheticEvent) => void;
+  /** Animation duration
+   * @default 350 */
+  duration?: number;
+}
+
+export interface IAccordionContext {
+  getItemProps: PropGetterFn;
+}
+
+export interface IAccordionHandlers {
+  value: (value: AccordionValue) => void;
+}
+
+export interface IAccordionItemProps {
+  /** Tab value */
+  value: string | number;
+  /** Disabling selection changes */
+  disabled?: boolean;
+}
+
+export interface IAccordionItemContext {
+  getToggleProps?: PropGetterFn;
+  getCollapseProps?: PropGetterFn;
+  getChevronProps?: PropGetterFn;
+  selected?: boolean;
+}
+
+declare const Accordion: (<T, V extends AccordionValue = AccordionValue>(
+  props: CProps<IAccordionProps<V> & T, IAccordionContext, IAccordionHandlers>,
+) => ReturnEl) & {
+  Item: (<T>(
+    props: CProps<IAccordionItemProps & T, IAccordionItemContext, IAccordionHandlers>,
+  ) => ReturnEl) & {
+    Toggle: typeof Box;
+    Chevron: typeof Box;
+    Collapse: <T>(props: ICollapseProps & T) => ReturnEl;
+  };
+};
+
+export default Accordion;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/accordion",
   "description": "SEMRush Accordion Component",
-  "version": "3.5.2",
+  "version": "3.5.5",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -29,5 +29,8 @@
     "type": "git",
     "url": "https://github.com/semrush/intergalactic.git",
     "directory": "semcore/accordion"
+  },
+  "devDependencies": {
+    "@semcore/jest-preset-ui": "1.0.0"
   }
 }