@elliemae/ds-accordion 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/config/useAccordion.js

@@ -1,31 +1,35 @@
-import * as React from "react";
-import { useMemo, useState, useCallback } from "react";
-import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
-import { useAccordionRefs } from "./useAccordionRefs";
-import { defaultProps } from "../defaultProps";
-const useAccordion = (props) => {
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import { useState, useMemo, useCallback } from 'react';
+import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
+import { useAccordionRefs } from './useAccordionRefs.js';
+import { defaultProps } from '../defaultProps.js';
+
+const useAccordion = props => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
-  const { activeValue, allowMultipleOpen, onChange } = propsWithDefaults;
-  const { focusableChildrenReferences, allChildrenReferences } = useAccordionRefs(propsWithDefaults);
+  const {
+    activeValue,
+    allowMultipleOpen,
+    onChange
+  } = propsWithDefaults;
+  const {
+    focusableChildrenReferences,
+    allChildrenReferences
+  } = useAccordionRefs(propsWithDefaults);
   const [internalActiveValue, setInternalActiveValue] = useState(activeValue);
   const actualActiveValue = useMemo(() => {
-    if (activeValue === void 0)
-      return internalActiveValue;
+    if (activeValue === undefined) return internalActiveValue;
     return activeValue;
   }, [activeValue, internalActiveValue]);
   const setActiveValues = useCallback((value, e) => {
     let newState;
-    if (allowMultipleOpen && (actualActiveValue === void 0 || actualActiveValue === null))
-      newState = [value];
-    else if (allowMultipleOpen && Array.isArray(actualActiveValue))
-      if (!actualActiveValue.some((currentValues) => currentValues === value))
-        newState = [...actualActiveValue, value];
-      else
-        newState = actualActiveValue.filter((currentValues) => currentValues !== value);
-    else if (actualActiveValue === value)
-      newState = null;
-    else
-      newState = value;
+    if (allowMultipleOpen && (actualActiveValue === undefined || actualActiveValue === null)) newState = [value];else if (allowMultipleOpen && Array.isArray(actualActiveValue)) {
+      if (!actualActiveValue.some(currentValues => currentValues === value)) newState = [...actualActiveValue, value];else newState = actualActiveValue.filter(currentValues => currentValues !== value);
+    } else if (actualActiveValue === value) newState = null;else newState = value;
     setInternalActiveValue(newState);
     return onChange(newState, e);
   }, [actualActiveValue, allowMultipleOpen, onChange]);
@@ -38,7 +42,5 @@ const useAccordion = (props) => {
   }), [actualActiveValue, allChildrenReferences, focusableChildrenReferences, propsWithDefaults, setActiveValues]);
   return ctx;
 };
-export {
-  useAccordion
-};
-//# sourceMappingURL=useAccordion.js.map
+
+export { useAccordion };

package/esm/config/useAccordionRefs.js

@@ -1,18 +1,32 @@
-import * as React from "react";
-import React2, { useMemo } from "react";
-const useAccordionRefs = ({ children }) => useMemo(() => {
-  const focusableChildrenReferences = [];
-  const allChildrenReferences = {};
-  React2.Children.map(children, (child, index) => {
-    const { value, disabled } = child.props;
-    const currentRef = React2.createRef();
-    allChildrenReferences[index] = currentRef;
-    if (!disabled)
-      focusableChildrenReferences.push({ index, value, ref: currentRef });
-  });
-  return { focusableChildrenReferences, allChildrenReferences };
-}, [children]);
-export {
-  useAccordionRefs
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import React, { useMemo } from 'react';
+
+const useAccordionRefs = _ref => {
+  let {
+    children
+  } = _ref;
+  return useMemo(() => {
+    const focusableChildrenReferences = [];
+    const allChildrenReferences = {};
+    React.Children.map(children, (child, index) => {
+      const {
+        value,
+        disabled
+      } = child.props;
+      const currentRef = /*#__PURE__*/React.createRef();
+      allChildrenReferences[index] = currentRef;
+      if (!disabled) focusableChildrenReferences.push({
+        index,
+        value,
+        ref: currentRef
+      });
+    });
+    return {
+      focusableChildrenReferences,
+      allChildrenReferences
+    };
+  }, [children]);
 };
-//# sourceMappingURL=useAccordionRefs.js.map
+
+export { useAccordionRefs };

package/esm/defaultProps.js

@@ -1,18 +1,31 @@
-import * as React from "react";
-import React2, { memo } from "react";
-import { ArrowheadRight, ArrowheadDown, ChevronRight, ChevronDown } from "@elliemae/ds-icons";
-const DefaultIconClosed = memo(({ isDSMobile = false }) => isDSMobile ? /* @__PURE__ */ React2.createElement(ChevronRight, {
-  width: "20px"
-}) : /* @__PURE__ */ React2.createElement(ArrowheadRight, {
-  width: "20px"
-}));
-const DefaultIconOpen = memo(({ isDSMobile = false }) => isDSMobile ? /* @__PURE__ */ React2.createElement(ChevronDown, {
-  width: "20px"
-}) : /* @__PURE__ */ React2.createElement(ArrowheadDown, {
-  width: "20px"
-}));
-const noop = () => {
-};
+import _jsx2 from '@babel/runtime/helpers/esm/jsx';
+import { memo } from 'react';
+import { ChevronRight, ArrowheadRight, ChevronDown, ArrowheadDown } from '@elliemae/ds-icons';
+
+var _ChevronRight, _ArrowheadRight, _ChevronDown, _ArrowheadDown;
+const DefaultIconClosed = /*#__PURE__*/memo(_ref => {
+  let {
+    isDSMobile = false
+  } = _ref;
+  return isDSMobile ? _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx2(ChevronRight, {
+    width: "20px"
+  })) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx2(ArrowheadRight, {
+    width: "20px"
+  }));
+});
+const DefaultIconOpen = /*#__PURE__*/memo(_ref2 => {
+  let {
+    isDSMobile = false
+  } = _ref2;
+  return isDSMobile ? _ChevronDown || (_ChevronDown = /*#__PURE__*/_jsx2(ChevronDown, {
+    width: "20px"
+  })) : _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx2(ArrowheadDown, {
+    width: "20px"
+  }));
+}); // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+const noop = () => {};
+
 const defaultProps = {
   containerProps: {},
   allowMultipleOpen: false,
@@ -24,12 +37,9 @@ const defaultProps = {
 const accordionItemDefaultProps = {
   iconClosed: DefaultIconClosed,
   iconOpened: DefaultIconOpen,
-  title: "",
+  title: '',
   customActions: [],
   disabled: false
 };
-export {
-  accordionItemDefaultProps,
-  defaultProps
-};
-//# sourceMappingURL=defaultProps.js.map
+
+export { accordionItemDefaultProps, defaultProps };

package/esm/index.js

@@ -1,8 +1,2 @@
-import * as React from "react";
-export * from "./DSAccordion";
-export * from "./parts/accordionItem/DSAccordionItem";
-import { default as default2 } from "./DSAccordion";
-export {
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export { DSAccordion, DSAccordionWithSchema, DSAccordion as default } from './DSAccordion.js';
+export { DSAccordionItem, DSAccordionItemWithSchema } from './parts/accordionItem/DSAccordionItem.js';

package/esm/parts/accordionContent/AccordionContent.js

@@ -1,21 +1,32 @@
-import * as React from "react";
-import React2, { useContext } from "react";
-import { DSAccordionContext } from "../../DSAccordionCTX";
-import { DSAccordionDataTestid } from "../../DSAccordionDatatestid";
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import React, { useContext } from 'react';
+import { DSAccordionContext } from '../../DSAccordionCTX.js';
+import { DSAccordionDataTestid } from '../../DSAccordionDatatestid.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const AccordionContent = () => {
   const {
-    props: { containerProps, children }
+    props: {
+      containerProps,
+      children
+    }
   } = useContext(DSAccordionContext);
   const childrenWithIndex = [];
-  React2.Children.forEach(children, (child, index) => childrenWithIndex.push(React2.cloneElement(child, {
+  React.Children.forEach(children, (child, index) => childrenWithIndex.push( /*#__PURE__*/React.cloneElement(child, {
     dsIndex: index
   })));
-  return /* @__PURE__ */ React2.createElement("div", {
-    ...containerProps,
-    "data-testid": DSAccordionDataTestid.GROUP
-  }, childrenWithIndex);
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+    "data-testid": DSAccordionDataTestid.GROUP,
+    children: childrenWithIndex
+  }));
 };
-export {
-  AccordionContent
-};
-//# sourceMappingURL=AccordionContent.js.map
+
+export { AccordionContent };

package/esm/parts/accordionItem/DSAccordionItem.js

@@ -1,27 +1,35 @@
-import * as React from "react";
-import React2, { useState, useContext, useCallback, useMemo } from "react";
-import { describe } from "react-desc";
-import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
-import { DSButton, BUTTON_TYPE } from "@elliemae/ds-button";
-import { DSPopperJS } from "@elliemae/ds-popperjs";
-import { accordionItemDefaultProps } from "../../defaultProps";
-import {
-  StyledItemAddon,
-  StyledItemContainer,
-  StyledItemContent,
-  StyledItemCustomActions,
-  StyledItemHeader,
-  StyledItemHeaderContainer,
-  StyledItemTitles,
-  StyledPrimaryTitle,
-  StyledSecondaryTitle
-} from "./styles";
-import { accordionItemPropTypes } from "../../propTypes";
-import { useAccordionItem } from "./useAccordionItem";
-import { DSAccordionContext } from "../../DSAccordionCTX";
-import { DSAccordionDataTestid } from "../../DSAccordionDatatestid";
-import { useIsShowingEllipsis } from "./useIsShowingEllipsis";
-const DSAccordionItem = (props) => {
+import _jsx2 from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { useContext, useCallback, useState, useMemo } from 'react';
+import { describe } from 'react-desc';
+import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
+import DSButton, { BUTTON_TYPE } from '@elliemae/ds-button';
+import { DSPopperJS } from '@elliemae/ds-popperjs';
+import { accordionItemDefaultProps } from '../../defaultProps.js';
+import { StyledItemCustomActions, StyledPrimaryTitle, StyledSecondaryTitle, StyledItemContainer, StyledItemHeaderContainer, StyledItemHeader, StyledItemAddon, StyledItemTitles, StyledItemContent } from './styles.js';
+import { accordionItemPropTypes } from '../../propTypes.js';
+import { useAccordionItem } from './useAccordionItem.js';
+import { DSAccordionContext } from '../../DSAccordionCTX.js';
+import { DSAccordionDataTestid } from '../../DSAccordionDatatestid.js';
+import { useIsShowingEllipsis } from './useIsShowingEllipsis.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+const _excluded = ["onClick", "id"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const DSAccordionItem = props => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, accordionItemDefaultProps);
   const {
     children,
@@ -35,126 +43,151 @@ const DSAccordionItem = (props) => {
     dsIndex,
     renderCustomActions
   } = propsWithDefaults;
-  const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });
+  const {
+    handleOnClick,
+    handleOnKeyDown,
+    selected
+  } = useAccordionItem({
+    value,
+    disabled
+  });
   const {
     allChildrenReferences,
     actualActiveValue,
-    props: { isDSMobile }
+    props: {
+      isDSMobile
+    }
   } = useContext(DSAccordionContext);
-  const onKeyDownWithIndex = useCallback((e) => {
+  const onKeyDownWithIndex = useCallback(e => {
     handleOnKeyDown(e, dsIndex);
   }, [dsIndex, handleOnKeyDown]);
   const [showPopover, setShowPopover] = useState(false);
   const [referenceElement, setReferenceElement] = useState();
   const CustomActionsContent = useMemo(() => {
-    if (!isDSMobile && customActions?.length > 0)
-      return /* @__PURE__ */ React2.createElement(StyledItemCustomActions, null, customActions?.map(({ onClick, id, ...rest }) => /* @__PURE__ */ React2.createElement(DSButton, {
-        key: id,
-        onClick: (e) => {
+    if (!isDSMobile && (customActions === null || customActions === void 0 ? void 0 : customActions.length) > 0) return /*#__PURE__*/_jsx2(StyledItemCustomActions, {}, void 0, customActions === null || customActions === void 0 ? void 0 : customActions.map(_ref => {
+      let {
+        onClick,
+        id
+      } = _ref,
+          rest = _objectWithoutProperties(_ref, _excluded);
+
+      return /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({
+        onClick: e => {
           e.stopPropagation();
-          if (onClick)
-            onClick(e);
-        },
-        ...rest,
+          if (onClick) onClick(e);
+        }
+      }, rest), {}, {
         buttonType: BUTTON_TYPE.SECONDARY
-      })));
-    if (!isDSMobile && renderCustomActions)
-      return /* @__PURE__ */ React2.createElement(StyledItemCustomActions, null, renderCustomActions({ allRefs: allChildrenReferences, actualActiveValue }));
+      }), id);
+    }));
+    if (!isDSMobile && renderCustomActions) return /*#__PURE__*/_jsx2(StyledItemCustomActions, {}, void 0, renderCustomActions({
+      allRefs: allChildrenReferences,
+      actualActiveValue
+    }));
     return null;
   }, [actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);
-  const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();
-  const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();
+  const {
+    isShowingEllipsis: isPrimaryShowingEllipsis,
+    setElement: setPrimaryElement
+  } = useIsShowingEllipsis();
+  const {
+    isShowingEllipsis: isSecondaryShowingEllipsis,
+    setElement: setSecondaryElement
+  } = useIsShowingEllipsis();
   const handleOnFocus = useCallback(() => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis), [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis]);
   const handleOnBlur = useCallback(() => setShowPopover(false), []);
   const Titles = useMemo(() => {
-    if (isPrimaryShowingEllipsis || isSecondaryShowingEllipsis)
-      return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledPrimaryTitle, {
+    if (isPrimaryShowingEllipsis || isSecondaryShowingEllipsis) return /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(StyledPrimaryTitle, {
         ref: setPrimaryElement,
-        id: `accordion_${title}id`,
-        disabled,
-        isDSMobile
-      }, title), !isDSMobile && secondaryTitle && /* @__PURE__ */ React2.createElement(StyledSecondaryTitle, {
+        id: "accordion_".concat(title, "id"),
+        disabled: disabled,
+        isDSMobile: isDSMobile,
+        children: title
+      }), !isDSMobile && secondaryTitle && /*#__PURE__*/jsx(StyledSecondaryTitle, {
         ref: setSecondaryElement,
-        disabled
-      }, secondaryTitle), /* @__PURE__ */ React2.createElement(DSPopperJS, {
-        referenceElement,
-        showPopover
-      }, /* @__PURE__ */ React2.createElement("div", {
-        style: { maxWidth: 260, padding: 8, background: "white", display: "grid", gap: 8 }
-      }, /* @__PURE__ */ React2.createElement("p", {
-        style: { margin: 0 }
-      }, title), /* @__PURE__ */ React2.createElement("p", {
-        style: { margin: 0 }
-      }, " ", secondaryTitle))));
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledPrimaryTitle, {
-      ref: setPrimaryElement,
-      id: `accordion_${title}id`,
-      disabled,
-      isDSMobile
-    }, title), !isDSMobile && secondaryTitle && /* @__PURE__ */ React2.createElement(StyledSecondaryTitle, {
-      ref: setSecondaryElement,
-      disabled
-    }, secondaryTitle));
-  }, [
-    disabled,
-    isDSMobile,
-    isPrimaryShowingEllipsis,
-    isSecondaryShowingEllipsis,
-    referenceElement,
-    secondaryTitle,
-    setPrimaryElement,
-    setSecondaryElement,
-    showPopover,
-    title
-  ]);
-  return /* @__PURE__ */ React2.createElement(StyledItemContainer, {
+        disabled: disabled,
+        children: secondaryTitle
+      }), /*#__PURE__*/_jsx2(DSPopperJS, {
+        referenceElement: referenceElement,
+        showPopover: showPopover
+      }, void 0, /*#__PURE__*/_jsx2("div", {
+        style: {
+          maxWidth: 260,
+          padding: 8,
+          background: 'white',
+          display: 'grid',
+          gap: 8
+        }
+      }, void 0, /*#__PURE__*/_jsx2("p", {
+        style: {
+          margin: 0
+        }
+      }, void 0, title), /*#__PURE__*/_jsx2("p", {
+        style: {
+          margin: 0
+        }
+      }, void 0, " ", secondaryTitle)))]
+    });
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(StyledPrimaryTitle, {
+        ref: setPrimaryElement,
+        id: "accordion_".concat(title, "id"),
+        disabled: disabled,
+        isDSMobile: isDSMobile,
+        children: title
+      }), !isDSMobile && secondaryTitle && /*#__PURE__*/jsx(StyledSecondaryTitle, {
+        ref: setSecondaryElement,
+        disabled: disabled,
+        children: secondaryTitle
+      })]
+    });
+  }, [disabled, isDSMobile, isPrimaryShowingEllipsis, isSecondaryShowingEllipsis, referenceElement, secondaryTitle, setPrimaryElement, setSecondaryElement, showPopover, title]);
+  return /*#__PURE__*/_jsx2(StyledItemContainer, {
     "data-testid": DSAccordionDataTestid.ITEM.CONTAINER
-  }, /* @__PURE__ */ React2.createElement(StyledItemHeaderContainer, {
-    disabled
-  }, /* @__PURE__ */ React2.createElement(StyledItemHeader, {
-    withCustomActions: (customActions?.length > 0 || renderCustomActions !== void 0) && !isDSMobile,
+  }, void 0, /*#__PURE__*/_jsx2(StyledItemHeaderContainer, {
+    disabled: disabled
+  }, void 0, /*#__PURE__*/jsxs(StyledItemHeader, {
+    withCustomActions: ((customActions === null || customActions === void 0 ? void 0 : customActions.length) > 0 || renderCustomActions !== undefined) && !isDSMobile,
     withSecondaryTitle: secondaryTitle,
     onClick: handleOnClick,
-    tabIndex: !disabled ? 0 : void 0,
-    disabled,
+    tabIndex: !disabled ? 0 : undefined,
+    disabled: disabled,
     "data-disabled": disabled,
     ref: allChildrenReferences[dsIndex],
     onKeyDown: onKeyDownWithIndex,
-    isDSMobile,
+    isDSMobile: isDSMobile,
     "data-testid": DSAccordionDataTestid.ITEM.HEADER,
-    id: `ds-accordion-header-${value}`,
+    id: "ds-accordion-header-".concat(value),
     "aria-expanded": selected,
     "aria-disabled": disabled,
-    "aria-controls": `ds-accordion-content-${value}`,
+    "aria-controls": "ds-accordion-content-".concat(value),
     onFocus: handleOnFocus,
-    onBlur: handleOnBlur
-  }, /* @__PURE__ */ React2.createElement(StyledItemAddon, {
-    disabled,
-    isDSMobile
-  }, selected ? /* @__PURE__ */ React2.createElement(IconOpened, {
-    isDSMobile
-  }) : /* @__PURE__ */ React2.createElement(IconClosed, {
-    isDSMobile
-  })), /* @__PURE__ */ React2.createElement(StyledItemTitles, {
-    onMouseEnter: handleOnFocus,
-    onMouseLeave: handleOnBlur,
-    isDSMobile,
-    ref: setReferenceElement
-  }, Titles)), CustomActionsContent), selected && /* @__PURE__ */ React2.createElement(StyledItemContent, {
+    onBlur: handleOnBlur,
+    children: [/*#__PURE__*/_jsx2(StyledItemAddon, {
+      disabled: disabled,
+      isDSMobile: isDSMobile
+    }, void 0, selected ? /*#__PURE__*/_jsx2(IconOpened, {
+      isDSMobile: isDSMobile
+    }) : /*#__PURE__*/_jsx2(IconClosed, {
+      isDSMobile: isDSMobile
+    })), /*#__PURE__*/jsx(StyledItemTitles, {
+      onMouseEnter: handleOnFocus,
+      onMouseLeave: handleOnBlur,
+      isDSMobile: isDSMobile,
+      ref: setReferenceElement,
+      children: Titles
+    })]
+  }), CustomActionsContent), selected && /*#__PURE__*/_jsx2(StyledItemContent, {
     "data-testid": DSAccordionDataTestid.ITEM.CONTENT,
-    "aria-labelledby": `ds-accordion-header-${value}`,
+    "aria-labelledby": "ds-accordion-header-".concat(value),
     role: "region",
-    isDSMobile,
-    id: `ds-accordion-content-${value}`
-  }, children));
+    isDSMobile: isDSMobile,
+    id: "ds-accordion-content-".concat(value)
+  }, void 0, children));
 };
-DSAccordionItem.propTypes = accordionItemPropTypes;
+
 const DSAccordionItemWithSchema = describe(DSAccordionItem);
 DSAccordionItemWithSchema.propTypes = accordionItemPropTypes;
-var DSAccordionItem_default = DSAccordionItem;
-export {
-  DSAccordionItem,
-  DSAccordionItemWithSchema,
-  DSAccordionItem_default as default
-};
-//# sourceMappingURL=DSAccordionItem.js.map
+
+export { DSAccordionItem, DSAccordionItemWithSchema, DSAccordionItem as default };