@semcore/accordion - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0

CHANGELOG.md

@@ -5,2 +5,14 @@ # Changelog
 
+## [3.0.0] - 2020-10-08
+
+### BREAK
+
+- Remove wrapper node for `Accordion`.
+- Remove style for `Trigger` and rename in `Toggle`.
+- Rename Content to `Collapse`.
+- Remove margin for `Chevron`.
+- Remove export `AccordionItem`.
+- Remove prop `selectedValues`.
+- Change animation way.
+
 ## [2.1.0] - 2020-09-30
@@ -7,0 +19,0 @@

lib/cjs/Accordion.js

@@ -11,7 +11,5 @@ "use strict";
 exports.Chevron = Chevron;
-exports.Content = Content;
-exports["default"] = exports.AccordionItem = exports.Trigger = exports.RootItem = void 0;
+exports.Collapse = Collapse;
+exports["default"] = exports.Toggle = exports.RootItem = void 0;
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -37,16 +35,12 @@
 
-var _reactTransitionGroup = require("react-transition-group");
+var _core = _interopRequireWildcard(require("@semcore/core"));
 
 var _flexBox = require("@semcore/flex-box");
 
+var _animation = require("@semcore/animation");
+
 var _xs = _interopRequireDefault(require("@semcore/icon/lib/ChevronRight/xs"));
 
-var _core = _interopRequireWildcard(require("@semcore/core"));
-
 var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
 
-var _useEventCallback = _interopRequireDefault(require("@semcore/utils/lib/use/useEventCallback"));
-
-var _createUUID = _interopRequireDefault(require("@semcore/utils/lib/createUUID"));
-
 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); }; }
@@ -61,34 +55,15 @@
 /*__inner_css_start__*/
-".___SAccordion_4z90p_gg_{display:flex;flex-direction:column;align-items:flex-start;overflow-anchor:none}.___SItemTrigger_4z90p_gg_{position:relative;padding:0;margin:0;font-family:inherit;font-weight:400;line-height:normal;vertical-align:middle;background:#fff;outline:0;border:none;box-shadow:none;cursor:pointer;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.___SItemTrigger_4z90p_gg_.__disabled_4z90p_gg_{opacity:.3;cursor:default;pointer-events:none}.___SItemTrigger_4z90p_gg_.__keyboardFocused_4z90p_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3);z-index:1}.___SItemChevron_4z90p_gg_{margin-right:8px;transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_4z90p_gg_.__selected_4z90p_gg_{transform:rotate(90deg)}.___SItemContent_4z90p_gg_{width:100%}._animate--enter_1ggkx_gg_{display:block}._animate--exit_1s0td_gg_{display:none}._animate--enter-active_f4qht_gg_,._animate--exit-active_1rr0v_gg_{height:0;overflow:hidden;transition:height .35s ease}"
+".___SItemToggle_qomwj_gg_{cursor:pointer;outline:0}.___SItemToggle_qomwj_gg_.__keyboardFocused_qomwj_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}.___SItemToggle_qomwj_gg_.__disabled_qomwj_gg_{opacity:.3;cursor:default;pointer-events:none}.___SItemChevron_qomwj_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_qomwj_gg_.__selected_qomwj_gg_{transform:rotate(90deg)}"
 /*__inner_css_end__*/
-, "cx9nf2")
+, "104iyap")
 /*__reshadow_css_end__*/
 , {
-  "__SAccordion": "___SAccordion_4z90p_gg_",
-  "__SItemTrigger": "___SItemTrigger_4z90p_gg_",
-  "_disabled": "__disabled_4z90p_gg_",
-  "_keyboardFocused": "__keyboardFocused_4z90p_gg_",
-  "__SItemChevron": "___SItemChevron_4z90p_gg_",
-  "_selected": "__selected_4z90p_gg_",
-  "__SItemContent": "___SItemContent_4z90p_gg_",
-  "animate--enter": "_animate--enter_1ggkx_gg_",
-  "animate--exit": "_animate--exit_1s0td_gg_",
-  "animate--exit-active": "_animate--exit-active_1rr0v_gg_",
-  "animate--enter-active": "_animate--enter-active_f4qht_gg_"
+  "__SItemToggle": "___SItemToggle_qomwj_gg_",
+  "_keyboardFocused": "__keyboardFocused_qomwj_gg_",
+  "_disabled": "__disabled_qomwj_gg_",
+  "__SItemChevron": "___SItemChevron_qomwj_gg_",
+  "_selected": "__selected_qomwj_gg_"
 }),
     style = (0, _extends2["default"])({}, _ref);
 
-if (false) {
-  /*__reshadow_css_start__*/
-  (0, _core.__css__)(
-  /*__inner_css_start__*/
-  "@media (max-width: 768px) {\n\n.___SItemChevron_4z90p_gg_ {\n  margin-right: 10.4px\n}}"
-  /*__inner_css_end__*/
-  , "164zr22")
-  /*__reshadow_css_end__*/
-  ;
-}
-
-var styled_c8 = (0, _core.create)([]);
-
 var RootAccordion = /*#__PURE__*/function (_Component) {
@@ -109,13 +84,5 @@ (0, _inherits2["default"])(RootAccordion, _Component);
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTriggerInteraction", function (newValue) {
-      var _this$asProps = _this.asProps,
-          value = _this$asProps.value,
-          selectedValues = _this$asProps.selectedValues;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleToggleInteraction", function (newValue) {
+      var value = _this.asProps.value;
 
-      if (selectedValues) {
-        _this.handlers.value(selectedValues(value, newValue));
-
-        return;
-      }
-
       if (Array.isArray(value)) {
@@ -135,32 +102,27 @@ var indexOfNewValue = value.indexOf(newValue);
   (0, _createClass2["default"])(RootAccordion, [{
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      return {
+        value: null
+      };
+    }
+  }, {
     key: "getItemProps",
     value: function getItemProps(_ref2) {
       var value = _ref2.value;
-      var selectedValue = this.asProps.value;
+      var _this$asProps = this.asProps,
+          selectedValue = _this$asProps.value,
+          duration = _this$asProps.duration;
       var selected = Array.isArray(selectedValue) ? selectedValue.includes(value) : selectedValue === value;
       return {
         selected: selected,
-        handleTriggerInteraction: this.handleTriggerInteraction
+        duration: duration,
+        $handleInteraction: this.handleToggleInteraction
       };
     }
   }, {
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      return {
-        value: []
-      };
-    }
-  }, {
     key: "render",
     value: function render() {
-      var SAccordion = _flexBox.Flex; // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
-      var _this$asProps2 = this.asProps,
-          styles = _this$asProps2.styles,
-          forwardRef = _this$asProps2.forwardRef,
-          onChange = _this$asProps2.onChange,
-          other = (0, _objectWithoutProperties2["default"])(_this$asProps2, ["styles", "forwardRef", "onChange"]);
-      return (0, _core.styled)(((0, _core.set)([styled_c8, styles]), /*#__PURE__*/_react["default"].createElement(SAccordion, (0, _core.map)("SAccordion", {
-        ref: forwardRef
-      }, other))));
+      var Children = this.asProps.Children;
+      return /*#__PURE__*/_react["default"].createElement(Children, null);
     }
@@ -174,3 +136,4 @@ }]);
 (0, _defineProperty2["default"])(RootAccordion, "defaultProps", {
-  defaultValue: []
+  defaultValue: [],
+  duration: 350
 });
@@ -183,15 +146,18 @@
 
-  function RootItem(props) {
+  function RootItem() {
     var _this2;
 
     (0, _classCallCheck2["default"])(this, RootItem);
-    _this2 = _super2.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "uuid", void 0);
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    _this2 = _super2.call.apply(_super2, [this].concat(args));
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "handleClick", function () {
       var _this2$asProps = _this2.asProps,
           value = _this2$asProps.value,
-          handleTriggerInteraction = _this2$asProps.handleTriggerInteraction;
-      handleTriggerInteraction(value);
+          $handleInteraction = _this2$asProps.$handleInteraction;
+      $handleInteraction(value);
     });
-    _this2.uuid = (0, _createUUID["default"])();
     return _this2;
@@ -201,24 +167,29 @@ }
   (0, _createClass2["default"])(RootItem, [{
-    key: "getTriggerProps",
-    value: function getTriggerProps() {
-      var _this$asProps3 = this.asProps,
-          selected = _this$asProps3.selected,
-          disabled = _this$asProps3.disabled;
+    key: "getToggleProps",
+    value: function getToggleProps() {
+      var _this$asProps2 = this.asProps,
+          value = _this$asProps2.value,
+          selected = _this$asProps2.selected,
+          disabled = _this$asProps2.disabled;
       return {
         disabled: disabled,
         onClick: this.handleClick,
-        id: "trigger-".concat(this.uuid),
+        id: "trigger-".concat(value),
         'aria-expanded': selected,
-        'aria-controls': "content-".concat(this.uuid)
+        'aria-controls': "content-".concat(value)
       };
     }
   }, {
-    key: "getContentProps",
-    value: function getContentProps() {
-      var selected = this.asProps.selected;
+    key: "getCollapseProps",
+    value: function getCollapseProps() {
+      var _this$asProps3 = this.asProps,
+          selected = _this$asProps3.selected,
+          duration = _this$asProps3.duration,
+          value = _this$asProps3.value;
       return {
         selected: selected,
-        id: "content-".concat(this.uuid),
+        duration: duration,
+        id: "content-".concat(value),
         role: 'region',
-        'aria-labelledby': "trigger-".concat(this.uuid)
+        'aria-labelledby': "trigger-".concat(value)
       };
@@ -247,40 +218,35 @@ }
 (0, _defineProperty2["default"])(RootItem, "style", style);
-var styled_12c = (0, _core.create)([]);
+var styled_c8 = (0, _core.create)([]);
 
-var Trigger = /*#__PURE__*/function (_Component3) {
-  (0, _inherits2["default"])(Trigger, _Component3);
+var Toggle = /*#__PURE__*/function (_Component3) {
+  (0, _inherits2["default"])(Toggle, _Component3);
 
-  var _super3 = _createSuper(Trigger);
+  var _super3 = _createSuper(Toggle);
 
-  function Trigger() {
-    (0, _classCallCheck2["default"])(this, Trigger);
+  function Toggle() {
+    (0, _classCallCheck2["default"])(this, Toggle);
     return _super3.apply(this, arguments);
   }
 
-  (0, _createClass2["default"])(Trigger, [{
+  (0, _createClass2["default"])(Toggle, [{
     key: "render",
     value: function render() {
-      var SItemTrigger = this.Root;
+      var SItemToggle = this.Root;
       var _this$asProps4 = this.asProps,
           styles = _this$asProps4.styles,
-          disabled = _this$asProps4.disabled,
-          keyboardFocused = _this$asProps4.keyboardFocused;
-      return (0, _core.styled)(((0, _core.set)([styled_12c, styles]), /*#__PURE__*/_react["default"].createElement(SItemTrigger, (0, _core.map)("SItemTrigger", {
+          keyboardFocused = _this$asProps4.keyboardFocused,
+          disabled = _this$asProps4.disabled;
+      return (0, _core.styled)(((0, _core.set)([styled_c8, styles]), /*#__PURE__*/_react["default"].createElement(SItemToggle, (0, _core.map)("SItemToggle", {
         render: _flexBox.Box,
-        disabled: disabled,
         keyboardFocused: keyboardFocused,
-        tabIndex: 0
+        disabled: disabled
       }))));
     }
   }]);
-  return Trigger;
+  return Toggle;
 }(_core.Component);
 
-exports.Trigger = Trigger;
-(0, _defineProperty2["default"])(Trigger, "enhance", [(0, _keyboardFocusEnhance["default"])()]);
-(0, _defineProperty2["default"])(Trigger, "defaultProps", {
-  tag: 'button',
-  role: 'button'
-});
-var styled_190 = (0, _core.create)([]);
+exports.Toggle = Toggle;
+(0, _defineProperty2["default"])(Toggle, "enhance", [(0, _keyboardFocusEnhance["default"])()]);
+var styled_12c = (0, _core.create)([]);
 
@@ -293,3 +259,3 @@ function Chevron(props) {
       tag = _props$tag === void 0 ? _xs["default"] : _props$tag;
-  return (0, _core.styled)(((0, _core.set)([styled_190, styles]), /*#__PURE__*/_react["default"].createElement(SItemChevron, (0, _core.map)("SItemChevron", {
+  return (0, _core.styled)(((0, _core.set)([styled_12c, styles]), /*#__PURE__*/_react["default"].createElement(SItemChevron, (0, _core.map)("SItemChevron", {
     render: _flexBox.Box,
@@ -301,54 +267,19 @@ selected: selected,
 
-function getNodeHeight(node) {
-  var style = window.getComputedStyle(node);
-  var value = node.offsetHeight;
-  var margins = ['marginTop', 'marginBottom'];
-  return value + parseInt(style[margins[0]], 10) + parseInt(style[margins[1]], 10);
-}
-
-var styled_1f4 = (0, _core.create)([]);
-
-function Content(props) {
-  var SItemContent = props.Root,
-      styles = props.styles,
+function Collapse(props) {
+  var Root = props.Root,
       selected = props.selected;
-  var handleEntering = (0, _useEventCallback["default"])(function (node) {
-    node.style.height = "".concat(node.scrollHeight, "px");
+  return /*#__PURE__*/_react["default"].createElement(Root, {
+    render: _animation.Collapse,
+    visible: selected,
+    interactive: true,
+    style: {
+      overflow: 'hidden'
+    }
   });
-  var handleEnter = (0, _useEventCallback["default"])(function (node) {
-    node.style.height = '0';
-  });
-  var handleEnteredExiting = (0, _useEventCallback["default"])(function (node) {
-    node.style.height = null;
-  });
-  var handleExit = (0, _useEventCallback["default"])(function (node) {
-    node.style.height = "".concat(getNodeHeight(node), "px");
-  });
-  var STATE_TO_CLASSNAME = {
-    exited: 'animate--exit',
-    entered: 'animate--entered',
-    exiting: 'animate--exit-active',
-    entering: 'animate--enter-active'
-  };
-  return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
-    "in": selected,
-    timeout: 350,
-    onEnter: handleEnter,
-    onEntering: handleEntering,
-    onEntered: handleEnteredExiting,
-    onExit: handleExit,
-    onExiting: handleEnteredExiting
-  }, function (state) {
-    return (0, _core.styled)(((0, _core.set)([styled_1f4, styles]), /*#__PURE__*/_react["default"].createElement(_flexBox.Box, (0, _core.map)("Box", {
-      className: _core.styled.styles[STATE_TO_CLASSNAME[state]]
-    }), /*#__PURE__*/_react["default"].createElement(SItemContent, (0, _core.map)("SItemContent", {
-      render: _flexBox.Box
-    })))));
-  });
 }
 
 var Item = (0, _core["default"])(RootItem, {
-  Trigger: Trigger,
+  Toggle: Toggle,
   Chevron: Chevron,
-  Content: Content
+  Collapse: Collapse
 });
@@ -358,6 +289,4 @@ var Accordion = (0, _core["default"])(RootAccordion, {
 });
-var AccordionItem = Accordion.Item;
-exports.AccordionItem = AccordionItem;
 var _default = Accordion;
 exports["default"] = _default;
 //# sourceMappingURL=Accordion.js.map

lib/es6/es6/Accordion.js

@@ -1,2 +0,1 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
@@ -17,9 +16,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import React from 'react';
-import { CSSTransition } from 'react-transition-group';
-import { Flex, Box } from '@semcore/flex-box';
+import createComponent, { Component, styled, css, __css__, set, create, map } 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 createComponent, { Component, styled, css, __css__, set, create, map } from '@semcore/core';
 import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-import useEventCallback from '@semcore/utils/lib/use/useEventCallback';
-import createUUID from '@semcore/utils/lib/createUUID';
 
@@ -31,34 +28,15 @@ /*__reshadow-styles__:"./style/accordion.shadow.css"*/
 /*__inner_css_start__*/
-".___SAccordion_4z90p_gg_{display:flex;flex-direction:column;align-items:flex-start;overflow-anchor:none}.___SItemTrigger_4z90p_gg_{position:relative;padding:0;margin:0;font-family:inherit;font-weight:400;line-height:normal;vertical-align:middle;background:#fff;outline:0;border:none;box-shadow:none;cursor:pointer;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.___SItemTrigger_4z90p_gg_.__disabled_4z90p_gg_{opacity:.3;cursor:default;pointer-events:none}.___SItemTrigger_4z90p_gg_.__keyboardFocused_4z90p_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3);z-index:1}.___SItemChevron_4z90p_gg_{margin-right:8px;transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_4z90p_gg_.__selected_4z90p_gg_{transform:rotate(90deg)}.___SItemContent_4z90p_gg_{width:100%}._animate--enter_1ggkx_gg_{display:block}._animate--exit_1s0td_gg_{display:none}._animate--enter-active_f4qht_gg_,._animate--exit-active_1rr0v_gg_{height:0;overflow:hidden;transition:height .35s ease}"
+".___SItemToggle_qomwj_gg_{cursor:pointer;outline:0}.___SItemToggle_qomwj_gg_.__keyboardFocused_qomwj_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}.___SItemToggle_qomwj_gg_.__disabled_qomwj_gg_{opacity:.3;cursor:default;pointer-events:none}.___SItemChevron_qomwj_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_qomwj_gg_.__selected_qomwj_gg_{transform:rotate(90deg)}"
 /*__inner_css_end__*/
-, "cx9nf2")
+, "104iyap")
 /*__reshadow_css_end__*/
 , {
-  "__SAccordion": "___SAccordion_4z90p_gg_",
-  "__SItemTrigger": "___SItemTrigger_4z90p_gg_",
-  "_disabled": "__disabled_4z90p_gg_",
-  "_keyboardFocused": "__keyboardFocused_4z90p_gg_",
-  "__SItemChevron": "___SItemChevron_4z90p_gg_",
-  "_selected": "__selected_4z90p_gg_",
-  "__SItemContent": "___SItemContent_4z90p_gg_",
-  "animate--enter": "_animate--enter_1ggkx_gg_",
-  "animate--exit": "_animate--exit_1s0td_gg_",
-  "animate--exit-active": "_animate--exit-active_1rr0v_gg_",
-  "animate--enter-active": "_animate--enter-active_f4qht_gg_"
+  "__SItemToggle": "___SItemToggle_qomwj_gg_",
+  "_keyboardFocused": "__keyboardFocused_qomwj_gg_",
+  "_disabled": "__disabled_qomwj_gg_",
+  "__SItemChevron": "___SItemChevron_qomwj_gg_",
+  "_selected": "__selected_qomwj_gg_"
 }),
     style = _extends({}, _ref);
 
-if (false) {
-  /*__reshadow_css_start__*/
-  __css__(
-  /*__inner_css_start__*/
-  "@media (max-width: 768px) {\n\n.___SItemChevron_4z90p_gg_ {\n  margin-right: 10.4px\n}}"
-  /*__inner_css_end__*/
-  , "164zr22")
-  /*__reshadow_css_end__*/
-  ;
-}
-
-var styled_c8 = create([]);
-
 var RootAccordion = /*#__PURE__*/function (_Component) {
@@ -80,13 +58,5 @@ _inherits(RootAccordion, _Component);
 
-    _defineProperty(_assertThisInitialized(_this), "handleTriggerInteraction", function (newValue) {
-      var _this$asProps = _this.asProps,
-          value = _this$asProps.value,
-          selectedValues = _this$asProps.selectedValues;
+    _defineProperty(_assertThisInitialized(_this), "handleToggleInteraction", function (newValue) {
+      var value = _this.asProps.value;
 
-      if (selectedValues) {
-        _this.handlers.value(selectedValues(value, newValue));
-
-        return;
-      }
-
       if (Array.isArray(value)) {
@@ -109,33 +79,27 @@ var indexOfNewValue = value.indexOf(newValue);
   _createClass(RootAccordion, [{
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      return {
+        value: null
+      };
+    }
+  }, {
     key: "getItemProps",
     value: function getItemProps(_ref2) {
       var value = _ref2.value;
-      var selectedValue = this.asProps.value;
+      var _this$asProps = this.asProps,
+          selectedValue = _this$asProps.value,
+          duration = _this$asProps.duration;
       var selected = Array.isArray(selectedValue) ? selectedValue.includes(value) : selectedValue === value;
       return {
         selected: selected,
-        handleTriggerInteraction: this.handleTriggerInteraction
+        duration: duration,
+        $handleInteraction: this.handleToggleInteraction
       };
     }
   }, {
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      return {
-        value: []
-      };
-    }
-  }, {
     key: "render",
     value: function render() {
-      var SAccordion = Flex; // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
-      var _this$asProps2 = this.asProps,
-          styles = _this$asProps2.styles,
-          forwardRef = _this$asProps2.forwardRef,
-          onChange = _this$asProps2.onChange,
-          other = _objectWithoutProperties(_this$asProps2, ["styles", "forwardRef", "onChange"]);
-
-      return styled((set([styled_c8, styles]), /*#__PURE__*/React.createElement(SAccordion, map("SAccordion", {
-        ref: forwardRef
-      }, other))));
+      var Children = this.asProps.Children;
+      return /*#__PURE__*/React.createElement(Children, null);
     }
@@ -152,3 +116,4 @@ }]);
 _defineProperty(RootAccordion, "defaultProps", {
-  defaultValue: []
+  defaultValue: [],
+  duration: 350
 });
@@ -161,3 +126,3 @@
 
-  function RootItem(props) {
+  function RootItem() {
     var _this2;
@@ -167,5 +132,7 @@
 
-    _this2 = _super2.call(this, props);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
 
-    _defineProperty(_assertThisInitialized(_this2), "uuid", void 0);
+    _this2 = _super2.call.apply(_super2, [this].concat(args));
 
@@ -175,7 +142,6 @@ _defineProperty(_assertThisInitialized(_this2), "handleClick", function () {
           value = _this2$asProps.value,
-          handleTriggerInteraction = _this2$asProps.handleTriggerInteraction;
-      handleTriggerInteraction(value);
+          $handleInteraction = _this2$asProps.$handleInteraction;
+      $handleInteraction(value);
     });
 
-    _this2.uuid = createUUID();
     return _this2;
@@ -185,24 +151,29 @@ }
   _createClass(RootItem, [{
-    key: "getTriggerProps",
-    value: function getTriggerProps() {
-      var _this$asProps3 = this.asProps,
-          selected = _this$asProps3.selected,
-          disabled = _this$asProps3.disabled;
+    key: "getToggleProps",
+    value: function getToggleProps() {
+      var _this$asProps2 = this.asProps,
+          value = _this$asProps2.value,
+          selected = _this$asProps2.selected,
+          disabled = _this$asProps2.disabled;
       return {
         disabled: disabled,
         onClick: this.handleClick,
-        id: "trigger-".concat(this.uuid),
+        id: "trigger-".concat(value),
         'aria-expanded': selected,
-        'aria-controls': "content-".concat(this.uuid)
+        'aria-controls': "content-".concat(value)
       };
     }
   }, {
-    key: "getContentProps",
-    value: function getContentProps() {
-      var selected = this.asProps.selected;
+    key: "getCollapseProps",
+    value: function getCollapseProps() {
+      var _this$asProps3 = this.asProps,
+          selected = _this$asProps3.selected,
+          duration = _this$asProps3.duration,
+          value = _this$asProps3.value;
       return {
         selected: selected,
-        id: "content-".concat(this.uuid),
+        duration: duration,
+        id: "content-".concat(value),
         role: 'region',
-        'aria-labelledby': "trigger-".concat(this.uuid)
+        'aria-labelledby': "trigger-".concat(value)
       };
@@ -233,10 +204,10 @@ }
 
-var styled_12c = create([]);
-export var Trigger = /*#__PURE__*/function (_Component3) {
-  _inherits(Trigger, _Component3);
+var styled_c8 = create([]);
+export var Toggle = /*#__PURE__*/function (_Component3) {
+  _inherits(Toggle, _Component3);
 
-  var _super3 = _createSuper(Trigger);
+  var _super3 = _createSuper(Toggle);
 
-  function Trigger() {
-    _classCallCheck(this, Trigger);
+  function Toggle() {
+    _classCallCheck(this, Toggle);
 
@@ -246,15 +217,14 @@ return _super3.apply(this, arguments);
 
-  _createClass(Trigger, [{
+  _createClass(Toggle, [{
     key: "render",
     value: function render() {
-      var SItemTrigger = this.Root;
+      var SItemToggle = this.Root;
       var _this$asProps4 = this.asProps,
           styles = _this$asProps4.styles,
-          disabled = _this$asProps4.disabled,
-          keyboardFocused = _this$asProps4.keyboardFocused;
-      return styled((set([styled_12c, styles]), /*#__PURE__*/React.createElement(SItemTrigger, map("SItemTrigger", {
+          keyboardFocused = _this$asProps4.keyboardFocused,
+          disabled = _this$asProps4.disabled;
+      return styled((set([styled_c8, styles]), /*#__PURE__*/React.createElement(SItemToggle, map("SItemToggle", {
         render: Box,
-        disabled: disabled,
         keyboardFocused: keyboardFocused,
-        tabIndex: 0
+        disabled: disabled
       }))));
@@ -264,13 +234,8 @@ }
 
-  return Trigger;
+  return Toggle;
 }(Component);
 
-_defineProperty(Trigger, "enhance", [keyboardFocusEnhance()]);
+_defineProperty(Toggle, "enhance", [keyboardFocusEnhance()]);
 
-_defineProperty(Trigger, "defaultProps", {
-  tag: 'button',
-  role: 'button'
-});
-
-var styled_190 = create([]);
+var styled_12c = create([]);
 export function Chevron(props) {
@@ -282,3 +247,3 @@ var SItemChevron = props.Root,
       tag = _props$tag === void 0 ? ChevronRightXS : _props$tag;
-  return styled((set([styled_190, styles]), /*#__PURE__*/React.createElement(SItemChevron, map("SItemChevron", {
+  return styled((set([styled_12c, styles]), /*#__PURE__*/React.createElement(SItemChevron, map("SItemChevron", {
     render: Box,
@@ -289,53 +254,18 @@ selected: selected,
 }
-
-function getNodeHeight(node) {
-  var style = window.getComputedStyle(node);
-  var value = node.offsetHeight;
-  var margins = ['marginTop', 'marginBottom'];
-  return value + parseInt(style[margins[0]], 10) + parseInt(style[margins[1]], 10);
-}
-
-var styled_1f4 = create([]);
-export function Content(props) {
-  var SItemContent = props.Root,
-      styles = props.styles,
+export function Collapse(props) {
+  var Root = props.Root,
       selected = props.selected;
-  var handleEntering = useEventCallback(function (node) {
-    node.style.height = "".concat(node.scrollHeight, "px");
+  return /*#__PURE__*/React.createElement(Root, {
+    render: CollapseAnimate,
+    visible: selected,
+    interactive: true,
+    style: {
+      overflow: 'hidden'
+    }
   });
-  var handleEnter = useEventCallback(function (node) {
-    node.style.height = '0';
-  });
-  var handleEnteredExiting = useEventCallback(function (node) {
-    node.style.height = null;
-  });
-  var handleExit = useEventCallback(function (node) {
-    node.style.height = "".concat(getNodeHeight(node), "px");
-  });
-  var STATE_TO_CLASSNAME = {
-    exited: 'animate--exit',
-    entered: 'animate--entered',
-    exiting: 'animate--exit-active',
-    entering: 'animate--enter-active'
-  };
-  return /*#__PURE__*/React.createElement(CSSTransition, {
-    "in": selected,
-    timeout: 350,
-    onEnter: handleEnter,
-    onEntering: handleEntering,
-    onEntered: handleEnteredExiting,
-    onExit: handleExit,
-    onExiting: handleEnteredExiting
-  }, function (state) {
-    return styled((set([styled_1f4, styles]), /*#__PURE__*/React.createElement(Box, map("Box", {
-      className: styled.styles[STATE_TO_CLASSNAME[state]]
-    }), /*#__PURE__*/React.createElement(SItemContent, map("SItemContent", {
-      render: Box
-    })))));
-  });
 }
 var Item = createComponent(RootItem, {
-  Trigger: Trigger,
+  Toggle: Toggle,
   Chevron: Chevron,
-  Content: Content
+  Collapse: Collapse
 });
@@ -345,4 +275,3 @@ var Accordion = createComponent(RootAccordion, {
 });
-export var AccordionItem = Accordion.Item;
 export default Accordion;
 //# sourceMappingURL=Accordion.js.map

lib/types/Accordion.d.ts

 import React, { HTMLAttributes } from 'react';
-import { IFlexProps, IBoxProps } from '@semcore/flex-box';
-import { Component, PropGetterFn, Merge, PropsAndRef } from '@semcore/core';
+import { Component, Merge, PropGetterFn, PropsAndRef } from '@semcore/core';
+import { IBoxProps, IFlexProps } from '@semcore/flex-box';
+import { ICollapseProps } from '@semcore/animation';
 export declare type AccordionValue = number | string | Array<number> | Array<string>;
 export interface IAccordionProps<T extends AccordionValue = AccordionValue> extends IFlexProps {
-    /** Значение активной вкладки */
+    /** Значение активной вкладки, может быть как значением(str, num, null), так и массивом значений */
     value?: T;
@@ -15,7 +16,5 @@ /**
     onChange?: (value: T, event?: React.SyntheticEvent) => void;
-    /**
-     * Функция для управления активностью вкладок
-     * @default (activeValue, value) => ([...])
-     */
-    selectedValues?: (activeValue: T, value: React.ReactText) => AccordionValue;
+    /** Длительность анимации
+     * @default 350 */
+    duration?: number;
 }
@@ -25,2 +24,18 @@ export interface IAccordionContext extends IAccordionProps {
 }
+export interface IAccordionItemProps {
+    /** Значение вкладки */
+    value: string | number;
+    /** Отключение изменения выбора */
+    disabled?: boolean;
+    /** @ignore */
+    $handleInteraction?: any;
+    /** @ignore */
+    duration?: number;
+}
+export interface IAccordionItemContext {
+    getToggleProps?: PropGetterFn;
+    getCollapseProps?: PropGetterFn;
+    getChevronProps?: PropGetterFn;
+    selected?: boolean;
+}
 declare class RootAccordion extends Component<IAccordionProps> {
@@ -31,4 +46,8 @@ static displayName: string;
         defaultValue: any[];
+        duration: number;
     };
-    handleTriggerInteraction: (newValue: string | number) => void;
+    uncontrolledProps(): {
+        value: any;
+    };
+    handleToggleInteraction: (newValue: any) => void;
     getItemProps({ value }: {
@@ -38,36 +57,21 @@ value: any;
         selected: boolean;
-        handleTriggerInteraction: (newValue: import("csstype").FlexProperty<string>) => void;
+        duration: number;
+        $handleInteraction: (newValue: any) => void;
     };
-    uncontrolledProps(): {
-        value: any[];
-    };
-    render(): any;
+    render(): JSX.Element;
 }
-export interface IAccordionItemProps {
-    /** Значение вкладки */
-    value: React.ReactText;
-    /** Отключение изменения выбора */
-    disabled?: boolean;
-}
-export interface IAccordionItemContext {
-    getTriggerProps?: PropGetterFn;
-    getContentProps?: PropGetterFn;
-    getChevronProps?: PropGetterFn;
-    selected?: boolean;
-}
-export declare class RootItem extends Component<IAccordionItemProps & IAccordionProps> {
+export declare class RootItem extends Component<IAccordionItemProps> {
     static displayName: string;
     static style: any;
-    private readonly uuid;
-    constructor(props: any);
     handleClick: () => void;
-    getTriggerProps(): {
+    getToggleProps(): {
         disabled: boolean;
         onClick: () => void;
         id: string;
-        'aria-expanded': unknown;
+        'aria-expanded': boolean;
         'aria-controls': string;
     };
-    getContentProps(): {
-        selected: unknown;
+    getCollapseProps(): {
+        selected: boolean;
+        duration: number;
         id: string;
@@ -78,34 +82,23 @@ role: string;
     getChevronProps(): {
-        selected: unknown;
+        selected: boolean;
     };
     render(): JSX.Element;
 }
-export declare class Trigger extends Component<IBoxProps> {
+export declare class Toggle extends Component<IBoxProps> {
     static enhance: any[];
-    static defaultProps: {
-        tag: string;
-        role: string;
-    };
     render(): any;
 }
 export declare function Chevron(props: any): any;
-export declare function Content(props: any): JSX.Element;
+export declare function Collapse(props: any): JSX.Element;
 declare const Accordion: import("@semcore/core").ComponentType<IAccordionProps<AccordionValue>, {
     Item: [IAccordionItemProps, {
-        Trigger: Merge<IBoxProps, HTMLAttributes<HTMLButtonElement>>;
+        Toggle: Merge<IBoxProps, HTMLAttributes<HTMLDivElement>>;
         Chevron: Merge<IBoxProps, HTMLAttributes<HTMLDivElement>>;
-        Content: Merge<IBoxProps, HTMLAttributes<HTMLDivElement>>;
+        Collapse: Merge<ICollapseProps, HTMLAttributes<HTMLDivElement>>;
     }];
 }, IAccordionContext & IAccordionItemContext, {
-    value: any[];
+    value: any;
 }, <T extends AccordionValue = AccordionValue>(props: PropsAndRef<IAccordionProps<T>, IAccordionContext & IAccordionItemContext, {
-    value: any[];
+    value: any;
 }>) => React.ReactElement>;
-export declare const AccordionItem: import("@semcore/core").ComponentType<IAccordionItemProps, {
-    Trigger: Merge<IBoxProps, HTMLAttributes<HTMLButtonElement>>;
-    Chevron: Merge<IBoxProps, HTMLAttributes<HTMLDivElement>>;
-    Content: Merge<IBoxProps, HTMLAttributes<HTMLDivElement>>;
-}, IAccordionContext & IAccordionItemContext, {
-    value: any[];
-}, null>;
 export default Accordion;

package.json

 {
   "name": "@semcore/accordion",
   "description": "SEMRush Accordion Component",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "main": "lib/cjs/index.js",
@@ -16,5 +16,5 @@ "module": "lib/es6/index.js",
     "@semcore/utils": "^3.17",
+    "@semcore/animation": "^1.1",
     "@semcore/flex-box": "^4",
-    "@semcore/icon": "^2",
-    "react-transition-group": "^4.3"
+    "@semcore/icon": "^2"
   },
@@ -21,0 +21,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

1

decreased by-66.67%

Worsened metrics

Total package byte prevSize

53138

decreased by-26.25%

Lines of code

817

decreased by-27.44%

Dependency changes

• + Added@semcore/animation@^1.1

• + Added@semcore/animation@1.10.21(transitive)

• - Removedreact-transition-group@^4.3

• - Removeddom-helpers@5.2.1(transitive)

• - Removedreact-transition-group@4.4.5(transitive)