@szhsin/react-accordion - npm Package Compare versions

Comparing version 1.2.0-alpha.0 to 1.2.0-alpha.1

dist/cjs/index.js

@@ -34,12 +34,11 @@ 'use strict';
 
-var _excluded$4 = ["transition", "transitionTimeout"];
-var getTransition = function getTransition(transition, name) {
-  return transition === true || !!(transition && transition[name]);
-};
-var useAccordionProvider = function useAccordionProvider(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-    transition = _ref.transition,
-    transitionTimeout = _ref.transitionTimeout,
+const _excluded$4 = ["transition", "transitionTimeout"];
+const getTransition = (transition, name) => transition === true || !!(transition && transition[name]);
+const useAccordionProvider = (_ref = {}) => {
+  let {
+      transition,
+      transitionTimeout
+    } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  var transitionMap = reactTransitionState.useTransitionMap(_extends({
+  const transitionMap = reactTransitionState.useTransitionMap(_extends({
     timeout: transitionTimeout,
@@ -57,35 +56,33 @@ enter: getTransition(transition, 'enter'),
 
-var ACCORDION_BLOCK = 'szh-accordion';
-var ACCORDION_PREFIX = 'szh-adn';
-var ACCORDION_ATTR = "data-" + ACCORDION_PREFIX;
-var ACCORDION_BTN_ATTR = "data-" + ACCORDION_PREFIX + "-btn";
-var AccordionContext = /*#__PURE__*/react.createContext({});
+const ACCORDION_BLOCK = 'szh-accordion';
+const ACCORDION_PREFIX = 'szh-adn';
+const ACCORDION_ATTR = `data-${ACCORDION_PREFIX}`;
+const ACCORDION_BTN_ATTR = `data-${ACCORDION_PREFIX}-btn`;
+const AccordionContext = /*#__PURE__*/react.createContext({});
 
-var bem = function bem(block, element, modifiers) {
-  return function (className, props) {
-    var blockElement = element ? block + "__" + element : block;
-    var classString = blockElement;
-    modifiers && Object.keys(modifiers).forEach(function (name) {
-      var value = modifiers[name];
-      if (value) classString += " " + blockElement + "--" + (value === true ? name : name + "-" + value);
-    });
-    var expandedClassName = typeof className === 'function' ? className(props) : className;
-    if (typeof expandedClassName === 'string') {
-      expandedClassName = expandedClassName.trim();
-      if (expandedClassName) classString += " " + expandedClassName;
-    }
-    return classString;
-  };
+const bem = (block, element, modifiers) => (className, props) => {
+  const blockElement = element ? `${block}__${element}` : block;
+  let classString = blockElement;
+  modifiers && Object.keys(modifiers).forEach(name => {
+    const value = modifiers[name];
+    if (value) classString += ` ${blockElement}--${value === true ? name : `${name}-${value}`}`;
+  });
+  let expandedClassName = typeof className === 'function' ? className(props) : className;
+  if (typeof expandedClassName === 'string') {
+    expandedClassName = expandedClassName.trim();
+    if (expandedClassName) classString += ` ${expandedClassName}`;
+  }
+  return classString;
 };
 
-var mergeProps = function mergeProps(target, source) {
+const mergeProps = (target, source) => {
   if (!source) return target;
-  var result = _extends({}, target);
-  Object.keys(source).forEach(function (key) {
-    var targetProp = target[key];
-    var sourceProp = source[key];
+  const result = _extends({}, target);
+  Object.keys(source).forEach(key => {
+    const targetProp = target[key];
+    const sourceProp = source[key];
     if (typeof sourceProp === 'function' && targetProp) {
-      result[key] = function () {
-        targetProp.apply(void 0, arguments);
-        sourceProp.apply(void 0, arguments);
+      result[key] = (...e) => {
+        targetProp(...e);
+        sourceProp(...e);
       };
@@ -99,7 +96,5 @@ } else {
 
-var AccordionProvider = function AccordionProvider(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(AccordionContext.Provider, _extends({}, props));
-};
+const AccordionProvider = props => /*#__PURE__*/jsxRuntime.jsx(AccordionContext.Provider, _extends({}, props));
 
-var getAccordion = function getAccordion(node) {
+const getAccordion = node => {
   do {
@@ -110,17 +105,16 @@ node = node.parentElement;
 };
-var getNextIndex = function getNextIndex(moveUp, current, length) {
-  return moveUp ? current > 0 ? current - 1 : length - 1 : (current + 1) % length;
-};
-var moveFocus = function moveFocus(moveUp, e) {
-  var _document = document,
-    activeElement = _document.activeElement;
+const getNextIndex = (moveUp, current, length) => moveUp ? current > 0 ? current - 1 : length - 1 : (current + 1) % length;
+const moveFocus = (moveUp, e) => {
+  const {
+    activeElement
+  } = document;
   if (!activeElement || !activeElement.hasAttribute(ACCORDION_BTN_ATTR) || getAccordion(activeElement) !== e.currentTarget) return;
-  var nodes = e.currentTarget.querySelectorAll("[" + ACCORDION_BTN_ATTR + "]");
-  var length = nodes.length;
-  for (var i = 0; i < length; i++) {
+  const nodes = e.currentTarget.querySelectorAll(`[${ACCORDION_BTN_ATTR}]`);
+  const {
+    length
+  } = nodes;
+  for (let i = 0; i < length; i++) {
     if (nodes[i] === activeElement) {
-      var next = getNextIndex(moveUp, i, length);
-      while (getAccordion(nodes[i]) !== getAccordion(nodes[next])) {
-        next = getNextIndex(moveUp, next, length);
-      }
+      let next = getNextIndex(moveUp, i, length);
+      while (getAccordion(nodes[i]) !== getAccordion(nodes[next])) next = getNextIndex(moveUp, next, length);
       if (i !== next) {
@@ -134,19 +128,22 @@ e.preventDefault();
 };
-var useAccordion = function useAccordion() {
-  var _accordionProps;
-  var accordionProps = (_accordionProps = {}, _accordionProps[ACCORDION_ATTR] = '', _accordionProps.onKeyDown = function onKeyDown(e) {
-    return e.key === 'ArrowUp' ? moveFocus(true, e) : e.key === 'ArrowDown' && moveFocus(false, e);
-  }, _accordionProps);
+const useAccordion = () => {
+  const accordionProps = {
+    [ACCORDION_ATTR]: '',
+    onKeyDown: e => e.key === 'ArrowUp' ? moveFocus(true, e) : e.key === 'ArrowDown' && moveFocus(false, e)
+  };
   return {
-    accordionProps: accordionProps
+    accordionProps
   };
 };
 
-var _excluded$3 = ["providerValue", "className"];
-var ControlledAccordion = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-  var providerValue = _ref.providerValue,
-    className = _ref.className,
+const _excluded$3 = ["providerValue", "className"];
+const ControlledAccordion = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  let {
+      providerValue,
+      className
+    } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var _useAccordion = useAccordion(),
-    accordionProps = _useAccordion.accordionProps;
+  const {
+    accordionProps
+  } = useAccordion();
   return /*#__PURE__*/jsxRuntime.jsx(AccordionProvider, {
@@ -162,20 +159,22 @@ value: providerValue,
 
-var _excluded$2 = ["allowMultiple", "initialEntered", "mountOnEnter", "unmountOnExit", "transition", "transitionTimeout", "onStateChange"];
-var Accordion = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-  var allowMultiple = _ref.allowMultiple,
-    initialEntered = _ref.initialEntered,
-    mountOnEnter = _ref.mountOnEnter,
-    unmountOnExit = _ref.unmountOnExit,
-    transition = _ref.transition,
-    transitionTimeout = _ref.transitionTimeout,
-    onStateChange = _ref.onStateChange,
+const _excluded$2 = ["allowMultiple", "initialEntered", "mountOnEnter", "unmountOnExit", "transition", "transitionTimeout", "onStateChange"];
+const Accordion = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+  let {
+      allowMultiple,
+      initialEntered,
+      mountOnEnter,
+      unmountOnExit,
+      transition,
+      transitionTimeout,
+      onStateChange
+    } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  var providerValue = useAccordionProvider({
-    allowMultiple: allowMultiple,
-    initialEntered: initialEntered,
-    mountOnEnter: mountOnEnter,
-    unmountOnExit: unmountOnExit,
-    transition: transition,
-    transitionTimeout: transitionTimeout,
-    onStateChange: onStateChange
+  const providerValue = useAccordionProvider({
+    allowMultiple,
+    initialEntered,
+    mountOnEnter,
+    unmountOnExit,
+    transition,
+    transitionTimeout,
+    onStateChange
   });
@@ -189,21 +188,18 @@ return /*#__PURE__*/jsxRuntime.jsx(ControlledAccordion, _extends({}, rest, {
 
-var current = 0;
-var useIdShim = function useIdShim() {
-  var _useState = react.useState(),
-    id = _useState[0],
-    setId = _useState[1];
-  react.useEffect(function () {
-    return setId(++current);
-  }, []);
-  return id && ACCORDION_PREFIX + "-" + id;
+let current = 0;
+const useIdShim = () => {
+  const [id, setId] = react.useState();
+  react.useEffect(() => setId(++current), []);
+  return id && `${ACCORDION_PREFIX}-${id}`;
 };
-var _useId = react.useId || useIdShim;
+const _useId = react.useId || useIdShim;
 
-var useAccordionItem = function useAccordionItem(_ref) {
-  var state = _ref.state,
-    toggle = _ref.toggle,
-    disabled = _ref.disabled;
-  var buttonId = _useId();
-  var panelId = buttonId && buttonId + '-';
-  var buttonProps = {
+const useAccordionItem = ({
+  state,
+  toggle,
+  disabled
+}) => {
+  const buttonId = _useId();
+  const panelId = buttonId && buttonId + '-';
+  const buttonProps = {
     id: buttonId,
@@ -215,3 +211,3 @@ 'aria-controls': panelId,
   disabled ? buttonProps.disabled = true : buttonProps[ACCORDION_BTN_ATTR] = '';
-  var panelProps = {
+  const panelProps = {
     id: panelId,
@@ -222,20 +218,19 @@ 'aria-labelledby': buttonId,
   return {
-    buttonProps: buttonProps,
-    panelProps: panelProps
+    buttonProps,
+    panelProps
   };
 };
 
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? react.useLayoutEffect : react.useEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? react.useLayoutEffect : react.useEffect;
 
-var useHeightTransition = function useHeightTransition(_ref) {
-  var status = _ref.status,
-    isResolved = _ref.isResolved;
-  var _useState = react.useState(),
-    height = _useState[0],
-    setHeight = _useState[1];
-  var elementRef = react.useRef(null);
-  useIsomorphicLayoutEffect(function () {
+const useHeightTransition = ({
+  status,
+  isResolved
+}) => {
+  const [height, setHeight] = react.useState();
+  const elementRef = react.useRef(null);
+  useIsomorphicLayoutEffect(() => {
     (status === 'preEnter' || status === 'preExit') && setHeight(elementRef.current.getBoundingClientRect().height);
   }, [status]);
-  var style = {
+  const style = {
     height: status === 'preEnter' || status === 'exiting' ? 0 : status === 'entering' || status === 'preExit' ? height : undefined,
@@ -251,6 +246,6 @@ overflow: isResolved ? undefined : 'hidden'
 function useMergeRef(refA, refB) {
-  return react.useMemo(function () {
+  return react.useMemo(() => {
     if (!refA) return refB;
     if (!refB) return refA;
-    return function (instance) {
+    return instance => {
       setRef(refA, instance);
@@ -262,7 +257,9 @@ setRef(refB, instance);
 
-var getItemState = function getItemState(providerValue, key, itemInitialEntered) {
-  var stateMap = providerValue.stateMap,
-    mountOnEnter = providerValue.mountOnEnter,
-    initialEntered = providerValue.initialEntered;
-  var _initialEntered = itemInitialEntered != null ? itemInitialEntered : initialEntered;
+const getItemState = (providerValue, key, itemInitialEntered) => {
+  const {
+    stateMap,
+    mountOnEnter,
+    initialEntered
+  } = providerValue;
+  const _initialEntered = itemInitialEntered != null ? itemInitialEntered : initialEntered;
   return stateMap.get(key) || {
@@ -275,4 +272,4 @@ status: _initialEntered ? 'entered' : mountOnEnter ? 'unmounted' : 'exited',
 };
-var useAccordionContext = function useAccordionContext() {
-  var context = react.useContext(AccordionContext);
+const useAccordionContext = () => {
+  const context = react.useContext(AccordionContext);
   if (process.env.NODE_ENV !== 'production' && !context.stateMap) {
@@ -284,38 +281,38 @@ throw new Error('[React-Accordion] Cannot find a <AccordionProvider/> above this AccordionItem.');
 
-var useAccordionItemEffect = function useAccordionItemEffect(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-    itemKey = _ref.itemKey,
-    initialEntered = _ref.initialEntered,
-    disabled = _ref.disabled;
-  var itemRef = react.useRef(null);
-  var context = useAccordionContext();
-  var key = itemKey != null ? itemKey : itemRef.current;
-  var state = getItemState(context, key, initialEntered);
-  var setItem = context.setItem,
-    deleteItem = context.deleteItem,
-    toggle = context.toggle;
-  react.useEffect(function () {
+const useAccordionItemEffect = ({
+  itemKey,
+  initialEntered,
+  disabled
+} = {}) => {
+  const itemRef = react.useRef(null);
+  const context = useAccordionContext();
+  const key = itemKey != null ? itemKey : itemRef.current;
+  const state = getItemState(context, key, initialEntered);
+  const {
+    setItem,
+    deleteItem,
+    toggle
+  } = context;
+  react.useEffect(() => {
     if (disabled) return;
-    var key = itemKey != null ? itemKey : itemRef.current;
+    const key = itemKey != null ? itemKey : itemRef.current;
     setItem(key, {
-      initialEntered: initialEntered
+      initialEntered
     });
-    return function () {
-      return void deleteItem(key);
-    };
+    return () => void deleteItem(key);
   }, [setItem, deleteItem, itemKey, initialEntered, disabled]);
   return {
-    itemRef: itemRef,
-    state: state,
-    toggle: react.useCallback(function (toEnter) {
-      return toggle(key, toEnter);
-    }, [toggle, key])
+    itemRef,
+    state,
+    toggle: react.useCallback(toEnter => toggle(key, toEnter), [toggle, key])
   };
 };
 
-var _excluded$1 = ["itemKey", "initialEntered"];
-var withAccordionItem = function withAccordionItem(WrappedItem) {
-  var WithAccordionItem = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-    var itemKey = _ref.itemKey,
-      initialEntered = _ref.initialEntered,
+const _excluded$1 = ["itemKey", "initialEntered"];
+const withAccordionItem = WrappedItem => {
+  const WithAccordionItem = /*#__PURE__*/react.forwardRef((_ref, ref) => {
+    let {
+        itemKey,
+        initialEntered
+      } = _ref,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
@@ -325,4 +322,4 @@ return /*#__PURE__*/jsxRuntime.jsx(WrappedItem, _extends({
     }, rest, useAccordionItemEffect({
-      itemKey: itemKey,
-      initialEntered: initialEntered,
+      itemKey,
+      initialEntered,
       disabled: rest.disabled
@@ -335,52 +332,54 @@ })));
 
-var _excluded = ["forwardedRef", "itemRef", "state", "toggle", "className", "disabled", "header", "headingTag", "headingProps", "buttonProps", "contentProps", "panelProps", "children"];
-var getRenderNode = function getRenderNode(nodeOrFunc, props) {
-  return typeof nodeOrFunc === 'function' ? nodeOrFunc(props) : nodeOrFunc;
-};
-var WrappedItem = /*#__PURE__*/react.memo(function (_ref) {
-  var forwardedRef = _ref.forwardedRef,
-    itemRef = _ref.itemRef,
-    state = _ref.state,
-    toggle = _ref.toggle,
-    className = _ref.className,
-    disabled = _ref.disabled,
-    header = _ref.header,
-    headingTag = _ref.headingTag,
-    headingProps = _ref.headingProps,
-    buttonProps = _ref.buttonProps,
-    contentProps = _ref.contentProps,
-    panelProps = _ref.panelProps,
-    children = _ref.children,
+const _excluded = ["forwardedRef", "itemRef", "state", "toggle", "className", "disabled", "header", "headingTag", "headingProps", "buttonProps", "contentProps", "panelProps", "children"];
+const getRenderNode = (nodeOrFunc, props) => typeof nodeOrFunc === 'function' ? nodeOrFunc(props) : nodeOrFunc;
+const WrappedItem = /*#__PURE__*/react.memo(_ref => {
+  let {
+      forwardedRef,
+      itemRef,
+      state,
+      toggle,
+      className,
+      disabled,
+      header,
+      headingTag: Heading = 'h3',
+      headingProps,
+      buttonProps,
+      contentProps,
+      panelProps,
+      children
+    } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var itemState = {
-    state: state,
-    toggle: toggle,
-    disabled: disabled
+  const itemState = {
+    state,
+    toggle,
+    disabled
   };
-  var _useAccordionItem = useAccordionItem(itemState),
-    _buttonProps = _useAccordionItem.buttonProps,
-    _panelProps = _useAccordionItem.panelProps;
-  var _useHeightTransition = useHeightTransition(state),
-    transitionStyle = _useHeightTransition[0],
-    _panelRef = _useHeightTransition[1];
-  var panelRef = useMergeRef(panelProps && panelProps.ref, _panelRef);
-  var status = state.status,
-    isMounted = state.isMounted,
-    isEnter = state.isEnter;
+  const {
+    buttonProps: _buttonProps,
+    panelProps: _panelProps
+  } = useAccordionItem(itemState);
+  const [transitionStyle, _panelRef] = useHeightTransition(state);
+  const panelRef = useMergeRef(panelProps && panelProps.ref, _panelRef);
+  const {
+    status,
+    isMounted,
+    isEnter
+  } = state;
   return /*#__PURE__*/jsxRuntime.jsxs("div", _extends({}, rest, {
     ref: useMergeRef(forwardedRef, itemRef),
     className: bem(ACCORDION_BLOCK, 'item', {
-      status: status,
+      status,
       expanded: isEnter
     })(className, state),
-    children: [/*#__PURE__*/react.createElement(headingTag || 'h3', _extends({}, headingProps, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Heading, _extends({}, headingProps, {
       style: _extends({
         margin: 0
       }, headingProps && headingProps.style),
-      className: bem(ACCORDION_BLOCK, 'item-heading')(headingProps && headingProps.className, state)
-    }), /*#__PURE__*/jsxRuntime.jsx("button", _extends({}, mergeProps(_buttonProps, buttonProps), {
-      type: "button",
-      className: bem(ACCORDION_BLOCK, 'item-btn')(buttonProps && buttonProps.className, state),
-      children: getRenderNode(header, itemState)
-    }))), isMounted && /*#__PURE__*/jsxRuntime.jsx("div", _extends({}, contentProps, {
+      className: bem(ACCORDION_BLOCK, 'item-heading')(headingProps && headingProps.className, state),
+      children: /*#__PURE__*/jsxRuntime.jsx("button", _extends({}, mergeProps(_buttonProps, buttonProps), {
+        type: "button",
+        className: bem(ACCORDION_BLOCK, 'item-btn')(buttonProps && buttonProps.className, state),
+        children: getRenderNode(header, itemState)
+      }))
+    })), isMounted && /*#__PURE__*/jsxRuntime.jsx("div", _extends({}, contentProps, {
       style: _extends({
@@ -399,12 +398,10 @@ display: status === 'exited' ? 'none' : undefined
 WrappedItem.displayName = 'AccordionItem';
-var AccordionItem = /*#__PURE__*/withAccordionItem(WrappedItem);
+const AccordionItem = /*#__PURE__*/withAccordionItem(WrappedItem);
 
-var useAccordionState = function useAccordionState() {
-  var context = useAccordionContext();
+const useAccordionState = () => {
+  const context = useAccordionContext();
   return {
-    getItemState: function getItemState$1(key, _temp) {
-      var _ref = _temp === void 0 ? {} : _temp,
-        initialEntered = _ref.initialEntered;
-      return getItemState(context, key, initialEntered);
-    },
+    getItemState: (key, {
+      initialEntered
+    } = {}) => getItemState(context, key, initialEntered),
     toggle: context.toggle,
@@ -411,0 +408,0 @@ toggleAll: context.toggleAll

dist/es/components/Accordion.js

@@ -7,20 +7,22 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 
-var _excluded = ["allowMultiple", "initialEntered", "mountOnEnter", "unmountOnExit", "transition", "transitionTimeout", "onStateChange"];
-var Accordion = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var allowMultiple = _ref.allowMultiple,
-    initialEntered = _ref.initialEntered,
-    mountOnEnter = _ref.mountOnEnter,
-    unmountOnExit = _ref.unmountOnExit,
-    transition = _ref.transition,
-    transitionTimeout = _ref.transitionTimeout,
-    onStateChange = _ref.onStateChange,
+const _excluded = ["allowMultiple", "initialEntered", "mountOnEnter", "unmountOnExit", "transition", "transitionTimeout", "onStateChange"];
+const Accordion = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      allowMultiple,
+      initialEntered,
+      mountOnEnter,
+      unmountOnExit,
+      transition,
+      transitionTimeout,
+      onStateChange
+    } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var providerValue = useAccordionProvider({
-    allowMultiple: allowMultiple,
-    initialEntered: initialEntered,
-    mountOnEnter: mountOnEnter,
-    unmountOnExit: unmountOnExit,
-    transition: transition,
-    transitionTimeout: transitionTimeout,
-    onStateChange: onStateChange
+  const providerValue = useAccordionProvider({
+    allowMultiple,
+    initialEntered,
+    mountOnEnter,
+    unmountOnExit,
+    transition,
+    transitionTimeout,
+    onStateChange
   });
@@ -27,0 +29,0 @@ return /*#__PURE__*/jsx(ControlledAccordion, _extends({}, rest, {

dist/es/components/AccordionItem.js

 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { memo, createElement } from 'react';
+import { memo } from 'react';
 import { ACCORDION_BLOCK } from '../utils/constants.js';
@@ -12,52 +12,54 @@ import { bem } from '../utils/bem.js';
 
-var _excluded = ["forwardedRef", "itemRef", "state", "toggle", "className", "disabled", "header", "headingTag", "headingProps", "buttonProps", "contentProps", "panelProps", "children"];
-var getRenderNode = function getRenderNode(nodeOrFunc, props) {
-  return typeof nodeOrFunc === 'function' ? nodeOrFunc(props) : nodeOrFunc;
-};
-var WrappedItem = /*#__PURE__*/memo(function (_ref) {
-  var forwardedRef = _ref.forwardedRef,
-    itemRef = _ref.itemRef,
-    state = _ref.state,
-    toggle = _ref.toggle,
-    className = _ref.className,
-    disabled = _ref.disabled,
-    header = _ref.header,
-    headingTag = _ref.headingTag,
-    headingProps = _ref.headingProps,
-    buttonProps = _ref.buttonProps,
-    contentProps = _ref.contentProps,
-    panelProps = _ref.panelProps,
-    children = _ref.children,
+const _excluded = ["forwardedRef", "itemRef", "state", "toggle", "className", "disabled", "header", "headingTag", "headingProps", "buttonProps", "contentProps", "panelProps", "children"];
+const getRenderNode = (nodeOrFunc, props) => typeof nodeOrFunc === 'function' ? nodeOrFunc(props) : nodeOrFunc;
+const WrappedItem = /*#__PURE__*/memo(_ref => {
+  let {
+      forwardedRef,
+      itemRef,
+      state,
+      toggle,
+      className,
+      disabled,
+      header,
+      headingTag: Heading = 'h3',
+      headingProps,
+      buttonProps,
+      contentProps,
+      panelProps,
+      children
+    } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var itemState = {
-    state: state,
-    toggle: toggle,
-    disabled: disabled
+  const itemState = {
+    state,
+    toggle,
+    disabled
   };
-  var _useAccordionItem = useAccordionItem(itemState),
-    _buttonProps = _useAccordionItem.buttonProps,
-    _panelProps = _useAccordionItem.panelProps;
-  var _useHeightTransition = useHeightTransition(state),
-    transitionStyle = _useHeightTransition[0],
-    _panelRef = _useHeightTransition[1];
-  var panelRef = useMergeRef(panelProps && panelProps.ref, _panelRef);
-  var status = state.status,
-    isMounted = state.isMounted,
-    isEnter = state.isEnter;
+  const {
+    buttonProps: _buttonProps,
+    panelProps: _panelProps
+  } = useAccordionItem(itemState);
+  const [transitionStyle, _panelRef] = useHeightTransition(state);
+  const panelRef = useMergeRef(panelProps && panelProps.ref, _panelRef);
+  const {
+    status,
+    isMounted,
+    isEnter
+  } = state;
   return /*#__PURE__*/jsxs("div", _extends({}, rest, {
     ref: useMergeRef(forwardedRef, itemRef),
     className: bem(ACCORDION_BLOCK, 'item', {
-      status: status,
+      status,
       expanded: isEnter
     })(className, state),
-    children: [/*#__PURE__*/createElement(headingTag || 'h3', _extends({}, headingProps, {
+    children: [/*#__PURE__*/jsx(Heading, _extends({}, headingProps, {
       style: _extends({
         margin: 0
       }, headingProps && headingProps.style),
-      className: bem(ACCORDION_BLOCK, 'item-heading')(headingProps && headingProps.className, state)
-    }), /*#__PURE__*/jsx("button", _extends({}, mergeProps(_buttonProps, buttonProps), {
-      type: "button",
-      className: bem(ACCORDION_BLOCK, 'item-btn')(buttonProps && buttonProps.className, state),
-      children: getRenderNode(header, itemState)
-    }))), isMounted && /*#__PURE__*/jsx("div", _extends({}, contentProps, {
+      className: bem(ACCORDION_BLOCK, 'item-heading')(headingProps && headingProps.className, state),
+      children: /*#__PURE__*/jsx("button", _extends({}, mergeProps(_buttonProps, buttonProps), {
+        type: "button",
+        className: bem(ACCORDION_BLOCK, 'item-btn')(buttonProps && buttonProps.className, state),
+        children: getRenderNode(header, itemState)
+      }))
+    })), isMounted && /*#__PURE__*/jsx("div", _extends({}, contentProps, {
       style: _extends({
@@ -76,4 +78,4 @@ display: status === 'exited' ? 'none' : undefined
 WrappedItem.displayName = 'AccordionItem';
-var AccordionItem = /*#__PURE__*/withAccordionItem(WrappedItem);
+const AccordionItem = /*#__PURE__*/withAccordionItem(WrappedItem);
 
 export { AccordionItem };

dist/es/components/AccordionProvider.js

@@ -5,6 +5,4 @@ import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 
-var AccordionProvider = function AccordionProvider(props) {
-  return /*#__PURE__*/jsx(AccordionContext.Provider, _extends({}, props));
-};
+const AccordionProvider = props => /*#__PURE__*/jsx(AccordionContext.Provider, _extends({}, props));
 
 export { AccordionProvider };

dist/es/components/ControlledAccordion.js

@@ -10,9 +10,12 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 
-var _excluded = ["providerValue", "className"];
-var ControlledAccordion = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var providerValue = _ref.providerValue,
-    className = _ref.className,
+const _excluded = ["providerValue", "className"];
+const ControlledAccordion = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      providerValue,
+      className
+    } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useAccordion = useAccordion(),
-    accordionProps = _useAccordion.accordionProps;
+  const {
+    accordionProps
+  } = useAccordion();
   return /*#__PURE__*/jsx(AccordionProvider, {
@@ -19,0 +22,0 @@ value: providerValue,

dist/es/components/withAccordionItem.js

@@ -6,7 +6,9 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 
-var _excluded = ["itemKey", "initialEntered"];
-var withAccordionItem = function withAccordionItem(WrappedItem) {
-  var WithAccordionItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
-    var itemKey = _ref.itemKey,
-      initialEntered = _ref.initialEntered,
+const _excluded = ["itemKey", "initialEntered"];
+const withAccordionItem = WrappedItem => {
+  const WithAccordionItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+    let {
+        itemKey,
+        initialEntered
+      } = _ref,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -16,4 +18,4 @@ return /*#__PURE__*/jsx(WrappedItem, _extends({
     }, rest, useAccordionItemEffect({
-      itemKey: itemKey,
-      initialEntered: initialEntered,
+      itemKey,
+      initialEntered,
       disabled: rest.disabled
@@ -20,0 +22,0 @@ })));

dist/es/hooks/useAccordion.js

 import { ACCORDION_ATTR, ACCORDION_BTN_ATTR } from '../utils/constants.js';
 
-var getAccordion = function getAccordion(node) {
+const getAccordion = node => {
   do {
@@ -9,17 +9,16 @@ node = node.parentElement;
 };
-var getNextIndex = function getNextIndex(moveUp, current, length) {
-  return moveUp ? current > 0 ? current - 1 : length - 1 : (current + 1) % length;
-};
-var moveFocus = function moveFocus(moveUp, e) {
-  var _document = document,
-    activeElement = _document.activeElement;
+const getNextIndex = (moveUp, current, length) => moveUp ? current > 0 ? current - 1 : length - 1 : (current + 1) % length;
+const moveFocus = (moveUp, e) => {
+  const {
+    activeElement
+  } = document;
   if (!activeElement || !activeElement.hasAttribute(ACCORDION_BTN_ATTR) || getAccordion(activeElement) !== e.currentTarget) return;
-  var nodes = e.currentTarget.querySelectorAll("[" + ACCORDION_BTN_ATTR + "]");
-  var length = nodes.length;
-  for (var i = 0; i < length; i++) {
+  const nodes = e.currentTarget.querySelectorAll(`[${ACCORDION_BTN_ATTR}]`);
+  const {
+    length
+  } = nodes;
+  for (let i = 0; i < length; i++) {
     if (nodes[i] === activeElement) {
-      var next = getNextIndex(moveUp, i, length);
-      while (getAccordion(nodes[i]) !== getAccordion(nodes[next])) {
-        next = getNextIndex(moveUp, next, length);
-      }
+      let next = getNextIndex(moveUp, i, length);
+      while (getAccordion(nodes[i]) !== getAccordion(nodes[next])) next = getNextIndex(moveUp, next, length);
       if (i !== next) {
@@ -33,9 +32,9 @@ e.preventDefault();
 };
-var useAccordion = function useAccordion() {
-  var _accordionProps;
-  var accordionProps = (_accordionProps = {}, _accordionProps[ACCORDION_ATTR] = '', _accordionProps.onKeyDown = function onKeyDown(e) {
-    return e.key === 'ArrowUp' ? moveFocus(true, e) : e.key === 'ArrowDown' && moveFocus(false, e);
-  }, _accordionProps);
+const useAccordion = () => {
+  const accordionProps = {
+    [ACCORDION_ATTR]: '',
+    onKeyDown: e => e.key === 'ArrowUp' ? moveFocus(true, e) : e.key === 'ArrowDown' && moveFocus(false, e)
+  };
   return {
-    accordionProps: accordionProps
+    accordionProps
   };
@@ -42,0 +41,0 @@ };

dist/es/hooks/useAccordionContext.js

 import { useContext } from 'react';
 import { AccordionContext } from '../utils/constants.js';
 
-var getItemState = function getItemState(providerValue, key, itemInitialEntered) {
-  var stateMap = providerValue.stateMap,
-    mountOnEnter = providerValue.mountOnEnter,
-    initialEntered = providerValue.initialEntered;
-  var _initialEntered = itemInitialEntered != null ? itemInitialEntered : initialEntered;
+const getItemState = (providerValue, key, itemInitialEntered) => {
+  const {
+    stateMap,
+    mountOnEnter,
+    initialEntered
+  } = providerValue;
+  const _initialEntered = itemInitialEntered != null ? itemInitialEntered : initialEntered;
   return stateMap.get(key) || {
@@ -16,4 +18,4 @@ status: _initialEntered ? 'entered' : mountOnEnter ? 'unmounted' : 'exited',
 };
-var useAccordionContext = function useAccordionContext() {
-  var context = useContext(AccordionContext);
+const useAccordionContext = () => {
+  const context = useContext(AccordionContext);
   if (process.env.NODE_ENV !== 'production' && !context.stateMap) {
@@ -20,0 +22,0 @@ throw new Error('[React-Accordion] Cannot find a <AccordionProvider/> above this AccordionItem.');

dist/es/hooks/useAccordionItem.js

 import { ACCORDION_BTN_ATTR } from '../utils/constants.js';
 import { useId as _useId } from './useId.js';
 
-var useAccordionItem = function useAccordionItem(_ref) {
-  var state = _ref.state,
-    toggle = _ref.toggle,
-    disabled = _ref.disabled;
-  var buttonId = _useId();
-  var panelId = buttonId && buttonId + '-';
-  var buttonProps = {
+const useAccordionItem = ({
+  state,
+  toggle,
+  disabled
+}) => {
+  const buttonId = _useId();
+  const panelId = buttonId && buttonId + '-';
+  const buttonProps = {
     id: buttonId,
@@ -17,3 +18,3 @@ 'aria-controls': panelId,
   disabled ? buttonProps.disabled = true : buttonProps[ACCORDION_BTN_ATTR] = '';
-  var panelProps = {
+  const panelProps = {
     id: panelId,
@@ -24,4 +25,4 @@ 'aria-labelledby': buttonId,
   return {
-    buttonProps: buttonProps,
-    panelProps: panelProps
+    buttonProps,
+    panelProps
   };
@@ -28,0 +29,0 @@ };

dist/es/hooks/useAccordionItemEffect.js

 import { useRef, useEffect, useCallback } from 'react';
 import { useAccordionContext, getItemState } from './useAccordionContext.js';
 
-var useAccordionItemEffect = function useAccordionItemEffect(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-    itemKey = _ref.itemKey,
-    initialEntered = _ref.initialEntered,
-    disabled = _ref.disabled;
-  var itemRef = useRef(null);
-  var context = useAccordionContext();
-  var key = itemKey != null ? itemKey : itemRef.current;
-  var state = getItemState(context, key, initialEntered);
-  var setItem = context.setItem,
-    deleteItem = context.deleteItem,
-    toggle = context.toggle;
-  useEffect(function () {
+const useAccordionItemEffect = ({
+  itemKey,
+  initialEntered,
+  disabled
+} = {}) => {
+  const itemRef = useRef(null);
+  const context = useAccordionContext();
+  const key = itemKey != null ? itemKey : itemRef.current;
+  const state = getItemState(context, key, initialEntered);
+  const {
+    setItem,
+    deleteItem,
+    toggle
+  } = context;
+  useEffect(() => {
     if (disabled) return;
-    var key = itemKey != null ? itemKey : itemRef.current;
+    const key = itemKey != null ? itemKey : itemRef.current;
     setItem(key, {
-      initialEntered: initialEntered
+      initialEntered
     });
-    return function () {
-      return void deleteItem(key);
-    };
+    return () => void deleteItem(key);
   }, [setItem, deleteItem, itemKey, initialEntered, disabled]);
   return {
-    itemRef: itemRef,
-    state: state,
-    toggle: useCallback(function (toEnter) {
-      return toggle(key, toEnter);
-    }, [toggle, key])
+    itemRef,
+    state,
+    toggle: useCallback(toEnter => toggle(key, toEnter), [toggle, key])
   };
@@ -33,0 +31,0 @@ };

dist/es/hooks/useAccordionProvider.js

 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useTransitionMap } from 'react-transition-state';
 
-var _excluded = ["transition", "transitionTimeout"];
-var getTransition = function getTransition(transition, name) {
-  return transition === true || !!(transition && transition[name]);
-};
-var useAccordionProvider = function useAccordionProvider(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-    transition = _ref.transition,
-    transitionTimeout = _ref.transitionTimeout,
+const _excluded = ["transition", "transitionTimeout"];
+const getTransition = (transition, name) => transition === true || !!(transition && transition[name]);
+const useAccordionProvider = (_ref = {}) => {
+  let {
+      transition,
+      transitionTimeout
+    } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var transitionMap = useTransitionMap(_extends({
+  const transitionMap = useTransitionMap(_extends({
     timeout: transitionTimeout,
@@ -15,0 +14,0 @@ enter: getTransition(transition, 'enter'),

dist/es/hooks/useAccordionState.js

 import { useAccordionContext, getItemState } from './useAccordionContext.js';
 
-var useAccordionState = function useAccordionState() {
-  var context = useAccordionContext();
+const useAccordionState = () => {
+  const context = useAccordionContext();
   return {
-    getItemState: function getItemState$1(key, _temp) {
-      var _ref = _temp === void 0 ? {} : _temp,
-        initialEntered = _ref.initialEntered;
-      return getItemState(context, key, initialEntered);
-    },
+    getItemState: (key, {
+      initialEntered
+    } = {}) => getItemState(context, key, initialEntered),
     toggle: context.toggle,
@@ -12,0 +10,0 @@ toggleAll: context.toggleAll

dist/es/hooks/useHeightTransition.js

 import { useState, useRef } from 'react';
 import { useLayoutEffect as useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
 
-var useHeightTransition = function useHeightTransition(_ref) {
-  var status = _ref.status,
-    isResolved = _ref.isResolved;
-  var _useState = useState(),
-    height = _useState[0],
-    setHeight = _useState[1];
-  var elementRef = useRef(null);
-  useIsomorphicLayoutEffect(function () {
+const useHeightTransition = ({
+  status,
+  isResolved
+}) => {
+  const [height, setHeight] = useState();
+  const elementRef = useRef(null);
+  useIsomorphicLayoutEffect(() => {
     (status === 'preEnter' || status === 'preExit') && setHeight(elementRef.current.getBoundingClientRect().height);
   }, [status]);
-  var style = {
+  const style = {
     height: status === 'preEnter' || status === 'exiting' ? 0 : status === 'entering' || status === 'preExit' ? height : undefined,
@@ -16,0 +15,0 @@ overflow: isResolved ? undefined : 'hidden'

dist/es/hooks/useId.js

 import { useId, useState, useEffect } from 'react';
 import { ACCORDION_PREFIX } from '../utils/constants.js';
 
-var current = 0;
-var useIdShim = function useIdShim() {
-  var _useState = useState(),
-    id = _useState[0],
-    setId = _useState[1];
-  useEffect(function () {
-    return setId(++current);
-  }, []);
-  return id && ACCORDION_PREFIX + "-" + id;
+let current = 0;
+const useIdShim = () => {
+  const [id, setId] = useState();
+  useEffect(() => setId(++current), []);
+  return id && `${ACCORDION_PREFIX}-${id}`;
 };
-var _useId = useId || useIdShim;
+const _useId = useId || useIdShim;
 
 export { _useId as useId };

dist/es/hooks/useMergeRef.js

@@ -7,6 +7,6 @@ import { useMemo } from 'react';
 function useMergeRef(refA, refB) {
-  return useMemo(function () {
+  return useMemo(() => {
     if (!refA) return refB;
     if (!refB) return refA;
-    return function (instance) {
+    return instance => {
       setRef(refA, instance);
@@ -13,0 +13,0 @@ setRef(refB, instance);

dist/es/utils/bem.js

@@ -1,18 +0,16 @@
-var bem = function bem(block, element, modifiers) {
-  return function (className, props) {
-    var blockElement = element ? block + "__" + element : block;
-    var classString = blockElement;
-    modifiers && Object.keys(modifiers).forEach(function (name) {
-      var value = modifiers[name];
-      if (value) classString += " " + blockElement + "--" + (value === true ? name : name + "-" + value);
-    });
-    var expandedClassName = typeof className === 'function' ? className(props) : className;
-    if (typeof expandedClassName === 'string') {
-      expandedClassName = expandedClassName.trim();
-      if (expandedClassName) classString += " " + expandedClassName;
-    }
-    return classString;
-  };
+const bem = (block, element, modifiers) => (className, props) => {
+  const blockElement = element ? `${block}__${element}` : block;
+  let classString = blockElement;
+  modifiers && Object.keys(modifiers).forEach(name => {
+    const value = modifiers[name];
+    if (value) classString += ` ${blockElement}--${value === true ? name : `${name}-${value}`}`;
+  });
+  let expandedClassName = typeof className === 'function' ? className(props) : className;
+  if (typeof expandedClassName === 'string') {
+    expandedClassName = expandedClassName.trim();
+    if (expandedClassName) classString += ` ${expandedClassName}`;
+  }
+  return classString;
 };
 
 export { bem };

dist/es/utils/constants.js

 import { createContext } from 'react';
 
-var ACCORDION_BLOCK = 'szh-accordion';
-var ACCORDION_PREFIX = 'szh-adn';
-var ACCORDION_ATTR = "data-" + ACCORDION_PREFIX;
-var ACCORDION_BTN_ATTR = "data-" + ACCORDION_PREFIX + "-btn";
-var AccordionContext = /*#__PURE__*/createContext({});
+const ACCORDION_BLOCK = 'szh-accordion';
+const ACCORDION_PREFIX = 'szh-adn';
+const ACCORDION_ATTR = `data-${ACCORDION_PREFIX}`;
+const ACCORDION_BTN_ATTR = `data-${ACCORDION_PREFIX}-btn`;
+const AccordionContext = /*#__PURE__*/createContext({});
 
 export { ACCORDION_ATTR, ACCORDION_BLOCK, ACCORDION_BTN_ATTR, ACCORDION_PREFIX, AccordionContext };

dist/es/utils/mergeProps.js

 import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 
-var mergeProps = function mergeProps(target, source) {
+const mergeProps = (target, source) => {
   if (!source) return target;
-  var result = _extends({}, target);
-  Object.keys(source).forEach(function (key) {
-    var targetProp = target[key];
-    var sourceProp = source[key];
+  const result = _extends({}, target);
+  Object.keys(source).forEach(key => {
+    const targetProp = target[key];
+    const sourceProp = source[key];
     if (typeof sourceProp === 'function' && targetProp) {
-      result[key] = function () {
-        targetProp.apply(void 0, arguments);
-        sourceProp.apply(void 0, arguments);
+      result[key] = (...e) => {
+        targetProp(...e);
+        sourceProp(...e);
       };
@@ -14,0 +14,0 @@ } else {

dist/es/utils/useIsomorphicLayoutEffect.js

 import { useLayoutEffect, useEffect } from 'react';
 
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect;
 
 export { useIsomorphicLayoutEffect as useLayoutEffect };

package.json

 {
   "name": "@szhsin/react-accordion",
-  "version": "1.2.0-alpha.0",
+  "version": "1.2.0-alpha.1",
   "description": "An unstyled, accessible accordion library for building React apps and design systems.",
@@ -5,0 +5,0 @@ "author": "Zheng Song",

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

Worsened metrics

Total package byte prevSize

44222

decreased by-8.25%

Lines of code

1011

decreased by-0.59%

No dependency changes