@elliemae/ds-accordion 2.3.1 → 3.0.0-alpha.3

package/dist/esm/DSAccordionTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/esm/config/useAccordion.js

@@ -0,0 +1,44 @@
+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) => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
+  const { activeValue, allowMultipleOpen, onChange } = propsWithDefaults;
+  const { focusableChildrenReferences, allChildrenReferences } = useAccordionRefs(propsWithDefaults);
+  const [internalActiveValue, setInternalActiveValue] = useState(activeValue);
+  const actualActiveValue = useMemo(() => {
+    if (activeValue === void 0)
+      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;
+    setInternalActiveValue(newState);
+    return onChange(newState, e);
+  }, [actualActiveValue, allowMultipleOpen, onChange]);
+  const ctx = useMemo(() => ({
+    props: propsWithDefaults,
+    actualActiveValue,
+    setActiveValues,
+    focusableChildrenReferences,
+    allChildrenReferences
+  }), [actualActiveValue, allChildrenReferences, focusableChildrenReferences, propsWithDefaults, setActiveValues]);
+  return ctx;
+};
+export {
+  useAccordion
+};
+//# sourceMappingURL=useAccordion.js.map

package/dist/esm/config/useAccordion.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useAccordion.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useState, useCallback } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { useAccordionRefs } from './useAccordionRefs';\nimport { defaultProps } from '../defaultProps';\nimport type {\n  DSAccordionPropsT,\n  DSAccordionUseAccordionContextT,\n  DSAccordionPropsWithDefaultsT,\n  InternalActiveValueT,\n} from '../DSAccordionTypes';\n\nexport const useAccordion = (props: DSAccordionPropsT): DSAccordionUseAccordionContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps) as DSAccordionPropsWithDefaultsT;\n\n  const { activeValue, allowMultipleOpen, onChange } = propsWithDefaults;\n\n  const { focusableChildrenReferences, allChildrenReferences } = useAccordionRefs(propsWithDefaults);\n\n  const [internalActiveValue, setInternalActiveValue] = useState<InternalActiveValueT>(activeValue);\n\n  const actualActiveValue = useMemo(() => {\n    if (activeValue === undefined) return internalActiveValue;\n    return activeValue;\n  }, [activeValue, internalActiveValue]);\n\n  const setActiveValues = useCallback(\n    (value: string | number, e: React.MouseEvent | React.KeyboardEvent) => {\n      let newState: InternalActiveValueT;\n      if (allowMultipleOpen && (actualActiveValue === undefined || actualActiveValue === null)) newState = [value];\n      else if (allowMultipleOpen && Array.isArray(actualActiveValue))\n        if (!actualActiveValue.some((currentValues: string | number) => currentValues === value))\n          newState = [...actualActiveValue, value];\n        else newState = actualActiveValue.filter((currentValues: string | number) => currentValues !== value);\n      else if (actualActiveValue === value) newState = null;\n      else newState = value;\n      setInternalActiveValue(newState);\n      return onChange(newState, e);\n    },\n    [actualActiveValue, allowMultipleOpen, onChange],\n  );\n\n  const ctx = useMemo(\n    () => ({\n      props: propsWithDefaults,\n      actualActiveValue,\n      setActiveValues,\n      focusableChildrenReferences,\n      allChildrenReferences,\n    }),\n    [actualActiveValue, allChildrenReferences, focusableChildrenReferences, propsWithDefaults, setActiveValues],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAQO,MAAM,eAAe,CAAC,UAA8D;AACzF,QAAM,oBAAoB,6BAA6B,OAAO;AAE9D,QAAM,EAAE,aAAa,mBAAmB,aAAa;AAErD,QAAM,EAAE,6BAA6B,0BAA0B,iBAAiB;AAEhF,QAAM,CAAC,qBAAqB,0BAA0B,SAA+B;AAErF,QAAM,oBAAoB,QAAQ,MAAM;AACtC,QAAI,gBAAgB;AAAW,aAAO;AACtC,WAAO;AAAA,KACN,CAAC,aAAa;AAEjB,QAAM,kBAAkB,YACtB,CAAC,OAAwB,MAA8C;AACrE,QAAI;AACJ,QAAI,qBAAsB,uBAAsB,UAAa,sBAAsB;AAAO,iBAAW,CAAC;AAAA,aAC7F,qBAAqB,MAAM,QAAQ;AAC1C,UAAI,CAAC,kBAAkB,KAAK,CAAC,kBAAmC,kBAAkB;AAChF,mBAAW,CAAC,GAAG,mBAAmB;AAAA;AAC/B,mBAAW,kBAAkB,OAAO,CAAC,kBAAmC,kBAAkB;AAAA,aACxF,sBAAsB;AAAO,iBAAW;AAAA;AAC5C,iBAAW;AAChB,2BAAuB;AACvB,WAAO,SAAS,UAAU;AAAA,KAE5B,CAAC,mBAAmB,mBAAmB;AAGzC,QAAM,MAAM,QACV,MAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,CAAC,mBAAmB,uBAAuB,6BAA6B,mBAAmB;AAG7F,SAAO;AAAA;",
+  "names": []
+}

package/dist/esm/config/useAccordionRefs.js

@@ -0,0 +1,18 @@
+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
+};
+//# sourceMappingURL=useAccordionRefs.js.map

package/dist/esm/config/useAccordionRefs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useAccordionRefs.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport type {\n  UseAccordionRefsPropsT,\n  UseAccordionRefsReturnTypeT,\n  FocusableChildrenReferences,\n  AllChildrenReferences,\n} from '../DSAccordionTypes';\n\nexport const useAccordionRefs = ({ children }: UseAccordionRefsPropsT): UseAccordionRefsReturnTypeT =>\n  useMemo(() => {\n    const focusableChildrenReferences: FocusableChildrenReferences[] = [];\n    const allChildrenReferences: AllChildrenReferences = {};\n\n    React.Children.map(children, (child, index) => {\n      const { value, disabled } = child.props;\n      const currentRef = React.createRef<HTMLButtonElement>();\n      allChildrenReferences[index] = currentRef;\n      if (!disabled) focusableChildrenReferences.push({ index, value, ref: currentRef });\n    });\n    return { focusableChildrenReferences, allChildrenReferences };\n  }, [children]);\n"],
+  "mappings": "AAAA;ACAA;AAQO,MAAM,mBAAmB,CAAC,EAAE,eACjC,QAAQ,MAAM;AACZ,QAAM,8BAA6D;AACnE,QAAM,wBAA+C;AAErD,SAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AAC7C,UAAM,EAAE,OAAO,aAAa,MAAM;AAClC,UAAM,aAAa,OAAM;AACzB,0BAAsB,SAAS;AAC/B,QAAI,CAAC;AAAU,kCAA4B,KAAK,EAAE,OAAO,OAAO,KAAK;AAAA;AAEvE,SAAO,EAAE,6BAA6B;AAAA,GACrC,CAAC;",
+  "names": []
+}

package/dist/esm/defaultProps.js

@@ -0,0 +1,35 @@
+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 = () => {
+};
+const defaultProps = {
+  containerProps: {},
+  allowMultipleOpen: false,
+  contentExpandable: false,
+  onChange: noop,
+  children: [],
+  isDSMobile: false
+};
+const accordionItemDefaultProps = {
+  iconClosed: DefaultIconClosed,
+  iconOpened: DefaultIconOpen,
+  title: "",
+  customActions: [],
+  disabled: false
+};
+export {
+  accordionItemDefaultProps,
+  defaultProps
+};
+//# sourceMappingURL=defaultProps.js.map

package/dist/esm/defaultProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { memo } from 'react';\nimport { ArrowheadRight, ArrowheadDown, ChevronRight, ChevronDown } from '@elliemae/ds-icons';\nimport type { DefaultIconPropsT, DSAccordionDefaultPropsT, DSAccordionItemDefaultPropsT } from './DSAccordionTypes';\n\nconst DefaultIconClosed = memo(({ isDSMobile = false }: DefaultIconPropsT) =>\n  isDSMobile ? <ChevronRight width=\"20px\" /> : <ArrowheadRight width=\"20px\" />,\n);\n\nconst DefaultIconOpen = memo(({ isDSMobile = false }: DefaultIconPropsT) =>\n  isDSMobile ? <ChevronDown width=\"20px\" /> : <ArrowheadDown width=\"20px\" />,\n);\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\n\nexport const defaultProps: DSAccordionDefaultPropsT = {\n  containerProps: {},\n  allowMultipleOpen: false,\n  contentExpandable: false,\n  onChange: noop,\n  children: [],\n  isDSMobile: false,\n};\n\nexport const accordionItemDefaultProps: DSAccordionItemDefaultPropsT = {\n  iconClosed: DefaultIconClosed,\n  iconOpened: DefaultIconOpen,\n  title: '',\n  customActions: [],\n  disabled: false,\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAGA,MAAM,oBAAoB,KAAK,CAAC,EAAE,aAAa,YAC7C,aAAa,qCAAC,cAAD;AAAA,EAAc,OAAM;AAAA,KAAY,qCAAC,gBAAD;AAAA,EAAgB,OAAM;AAAA;AAGrE,MAAM,kBAAkB,KAAK,CAAC,EAAE,aAAa,YAC3C,aAAa,qCAAC,aAAD;AAAA,EAAa,OAAM;AAAA,KAAY,qCAAC,eAAD;AAAA,EAAe,OAAM;AAAA;AAInE,MAAM,OAAO,MAAY;AAAA;AAElB,MAAM,eAAyC;AAAA,EACpD,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA;AAGP,MAAM,4BAA0D;AAAA,EACrE,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+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

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSAccordion';\nexport * from './parts/accordionItem/DSAccordionItem';\n\nexport type { DSAccordionPropsT, DSAccordionItemPropsT } from './DSAccordionTypes';\n\nexport { default } from './DSAccordion';\n"],
+  "mappings": "AAAA;ACAA;AACA;AAIA;",
+  "names": []
+}

package/dist/esm/parts/accordionContent/AccordionContent.js

@@ -0,0 +1,39 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import React2, { useContext } from "react";
+import { DSAccordionContext } from "../../DSAccordionCTX";
+import { DSAccordionDataTestid } from "../../DSAccordionDatatestid";
+const AccordionContent = () => {
+  const {
+    props: { containerProps, children }
+  } = useContext(DSAccordionContext);
+  const childrenWithIndex = [];
+  React2.Children.forEach(children, (child, index) => childrenWithIndex.push(React2.cloneElement(child, {
+    dsIndex: index
+  })));
+  return /* @__PURE__ */ React2.createElement("div", __spreadProps(__spreadValues({}, containerProps), {
+    "data-testid": DSAccordionDataTestid.GROUP
+  }), childrenWithIndex);
+};
+export {
+  AccordionContent
+};
+//# sourceMappingURL=AccordionContent.js.map

package/dist/esm/parts/accordionContent/AccordionContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionContent/AccordionContent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport { DSAccordionDataTestid } from '../../DSAccordionDatatestid';\nimport type { DSAccordionItemPropsT } from '../../DSAccordionTypes';\n\nexport const AccordionContent = (): JSX.Element => {\n  const {\n    props: { containerProps, children },\n  } = useContext(DSAccordionContext);\n\n  const childrenWithIndex: React.ReactElement<DSAccordionItemPropsT>[] = [];\n\n  React.Children.forEach(children, (child, index) =>\n    childrenWithIndex.push(\n      React.cloneElement(child, {\n        dsIndex: index,\n      }),\n    ),\n  );\n\n  return (\n    <div {...containerProps} data-testid={DSAccordionDataTestid.GROUP}>\n      {childrenWithIndex}\n    </div>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAGO,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB;AAAA,MACvB,WAAW;AAEf,QAAM,oBAAiE;AAEvE,SAAM,SAAS,QAAQ,UAAU,CAAC,OAAO,UACvC,kBAAkB,KAChB,OAAM,aAAa,OAAO;AAAA,IACxB,SAAS;AAAA;AAKf,SACE,qCAAC,OAAD,iCAAS,iBAAT;AAAA,IAAyB,eAAa,sBAAsB;AAAA,MACzD;AAAA;",
+  "names": []
+}

package/dist/esm/parts/accordionItem/DSAccordionItem.js

@@ -0,0 +1,194 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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 { useIsShowingEllipsis } from "@elliemae/ds-utilities";
+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";
+const DSAccordionItem = (props) => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, accordionItemDefaultProps);
+  const {
+    children,
+    title,
+    secondaryTitle,
+    customActions,
+    iconOpened: IconOpened,
+    iconClosed: IconClosed,
+    value,
+    disabled,
+    dsIndex,
+    renderCustomActions
+  } = propsWithDefaults;
+  const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });
+  const {
+    allChildrenReferences,
+    actualActiveValue,
+    props: { isDSMobile }
+  } = useContext(DSAccordionContext);
+  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((_a) => {
+        var _b = _a, { onClick, id } = _b, rest = __objRest(_b, ["onClick", "id"]);
+        return /* @__PURE__ */ React2.createElement(DSButton, __spreadProps(__spreadValues({
+          key: id,
+          onClick: (e) => {
+            e.stopPropagation();
+            if (onClick)
+              onClick(e);
+          }
+        }, rest), {
+          buttonType: BUTTON_TYPE.SECONDARY
+        }));
+      }));
+    if (!isDSMobile && renderCustomActions)
+      return /* @__PURE__ */ React2.createElement(StyledItemCustomActions, null, renderCustomActions({ allRefs: allChildrenReferences, actualActiveValue }));
+    return null;
+  }, [actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);
+  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, {
+        ref: setPrimaryElement,
+        id: `accordion_${title}id`,
+        disabled,
+        isDSMobile
+      }, title), !isDSMobile && secondaryTitle && /* @__PURE__ */ React2.createElement(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, {
+    "data-testid": DSAccordionDataTestid.ITEM.CONTAINER
+  }, /* @__PURE__ */ React2.createElement(StyledItemHeaderContainer, {
+    disabled
+  }, /* @__PURE__ */ React2.createElement(StyledItemHeader, {
+    withCustomActions: (customActions?.length > 0 || renderCustomActions !== void 0) && !isDSMobile,
+    withSecondaryTitle: secondaryTitle,
+    onClick: handleOnClick,
+    tabIndex: !disabled ? 0 : void 0,
+    disabled,
+    "data-disabled": disabled,
+    ref: allChildrenReferences[dsIndex],
+    onKeyDown: onKeyDownWithIndex,
+    isDSMobile,
+    "data-testid": DSAccordionDataTestid.ITEM.HEADER,
+    id: `ds-accordion-header-${value}`,
+    "aria-expanded": selected,
+    "aria-disabled": disabled,
+    "aria-controls": `ds-accordion-content-${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, {
+    "data-testid": DSAccordionDataTestid.ITEM.CONTENT,
+    "aria-labelledby": `ds-accordion-header-${value}`,
+    role: "region",
+    isDSMobile,
+    id: `ds-accordion-content-${value}`
+  }, 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

package/dist/esm/parts/accordionItem/DSAccordionItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/DSAccordionItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useContext, useCallback, useMemo } from 'react';\nimport { describe } from 'react-desc';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSButton, BUTTON_TYPE } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { useIsShowingEllipsis } from '@elliemae/ds-utilities';\nimport { accordionItemDefaultProps } from '../../defaultProps';\nimport {\n  StyledItemAddon,\n  StyledItemContainer,\n  StyledItemContent,\n  StyledItemCustomActions,\n  StyledItemHeader,\n  StyledItemHeaderContainer,\n  StyledItemTitles,\n  StyledPrimaryTitle,\n  StyledSecondaryTitle,\n} from './styles';\nimport { accordionItemPropTypes } from '../../propTypes';\nimport { useAccordionItem } from './useAccordionItem';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport { DSAccordionDataTestid } from '../../DSAccordionDatatestid';\nimport type { DSAccordionItemPropsT, DSAccordionItemPropsWithDefaultsT } from '../../DSAccordionTypes';\n\nconst DSAccordionItem = (props: DSAccordionItemPropsT): JSX.Element => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(\n    props,\n    accordionItemDefaultProps,\n  ) as DSAccordionItemPropsWithDefaultsT;\n\n  const {\n    children,\n    title,\n    secondaryTitle,\n    customActions,\n    iconOpened: IconOpened,\n    iconClosed: IconClosed,\n    value,\n    disabled,\n    dsIndex,\n    renderCustomActions,\n  } = propsWithDefaults;\n\n  const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });\n  const {\n    allChildrenReferences,\n    actualActiveValue,\n    props: { isDSMobile },\n  } = useContext(DSAccordionContext);\n\n  const onKeyDownWithIndex = useCallback(\n    (e: React.KeyboardEvent) => {\n      handleOnKeyDown(e, dsIndex);\n    },\n    [dsIndex, handleOnKeyDown],\n  );\n\n  const [showPopover, setShowPopover] = useState(false);\n  const [referenceElement, setReferenceElement] = useState();\n\n  const CustomActionsContent = useMemo(() => {\n    if (!isDSMobile && customActions?.length > 0)\n      return (\n        <StyledItemCustomActions>\n          {customActions?.map(({ onClick, id, ...rest }) => (\n            <DSButton\n              key={id}\n              onClick={(e: React.MouseEvent) => {\n                e.stopPropagation();\n                if (onClick) onClick(e);\n              }}\n              {...rest}\n              buttonType={BUTTON_TYPE.SECONDARY}\n            />\n          ))}\n        </StyledItemCustomActions>\n      );\n\n    if (!isDSMobile && renderCustomActions)\n      return (\n        <StyledItemCustomActions>\n          {renderCustomActions({ allRefs: allChildrenReferences, actualActiveValue })}\n        </StyledItemCustomActions>\n      );\n    return null;\n  }, [actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);\n\n  const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();\n\n  const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();\n\n  const handleOnFocus = useCallback(\n    () => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis),\n    [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis],\n  );\n\n  const handleOnBlur = useCallback(() => setShowPopover(false), []);\n\n  const Titles = useMemo(() => {\n    if (isPrimaryShowingEllipsis || isSecondaryShowingEllipsis)\n      return (\n        <>\n          <StyledPrimaryTitle\n            ref={setPrimaryElement}\n            id={`accordion_${title}id`}\n            disabled={disabled}\n            isDSMobile={isDSMobile}\n          >\n            {title}\n          </StyledPrimaryTitle>\n          {!isDSMobile && secondaryTitle && (\n            <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled}>\n              {secondaryTitle}\n            </StyledSecondaryTitle>\n          )}\n          <DSPopperJS referenceElement={referenceElement} showPopover={showPopover}>\n            <div style={{ maxWidth: 260, padding: 8, background: 'white', display: 'grid', gap: 8 }}>\n              <p style={{ margin: 0 }}>{title}</p>\n              <p style={{ margin: 0 }}> {secondaryTitle}</p>\n            </div>\n          </DSPopperJS>\n        </>\n      );\n\n    return (\n      <>\n        <StyledPrimaryTitle\n          ref={setPrimaryElement}\n          id={`accordion_${title}id`}\n          disabled={disabled}\n          isDSMobile={isDSMobile}\n        >\n          {title}\n        </StyledPrimaryTitle>\n        {!isDSMobile && secondaryTitle && (\n          <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled}>\n            {secondaryTitle}\n          </StyledSecondaryTitle>\n        )}\n      </>\n    );\n  }, [\n    disabled,\n    isDSMobile,\n    isPrimaryShowingEllipsis,\n    isSecondaryShowingEllipsis,\n    referenceElement,\n    secondaryTitle,\n    setPrimaryElement,\n    setSecondaryElement,\n    showPopover,\n    title,\n  ]);\n\n  return (\n    <StyledItemContainer data-testid={DSAccordionDataTestid.ITEM.CONTAINER}>\n      <StyledItemHeaderContainer disabled={disabled}>\n        <StyledItemHeader\n          withCustomActions={(customActions?.length > 0 || renderCustomActions !== undefined) && !isDSMobile}\n          withSecondaryTitle={secondaryTitle}\n          onClick={handleOnClick}\n          tabIndex={!disabled ? 0 : undefined}\n          disabled={disabled}\n          data-disabled={disabled}\n          ref={allChildrenReferences[dsIndex]}\n          onKeyDown={onKeyDownWithIndex}\n          isDSMobile={isDSMobile}\n          data-testid={DSAccordionDataTestid.ITEM.HEADER}\n          id={`ds-accordion-header-${value}`}\n          aria-expanded={selected}\n          aria-disabled={disabled}\n          aria-controls={`ds-accordion-content-${value}`}\n          onFocus={handleOnFocus}\n          onBlur={handleOnBlur}\n        >\n          <StyledItemAddon disabled={disabled} isDSMobile={isDSMobile}>\n            {selected ? <IconOpened isDSMobile={isDSMobile} /> : <IconClosed isDSMobile={isDSMobile} />}\n          </StyledItemAddon>\n          <StyledItemTitles\n            onMouseEnter={handleOnFocus}\n            onMouseLeave={handleOnBlur}\n            isDSMobile={isDSMobile}\n            ref={setReferenceElement}\n          >\n            {Titles}\n          </StyledItemTitles>\n        </StyledItemHeader>\n        {CustomActionsContent}\n      </StyledItemHeaderContainer>\n      {selected && (\n        <StyledItemContent\n          data-testid={DSAccordionDataTestid.ITEM.CONTENT}\n          aria-labelledby={`ds-accordion-header-${value}`}\n          role=\"region\"\n          isDSMobile={isDSMobile}\n          id={`ds-accordion-content-${value}`}\n        >\n          {children}\n        </StyledItemContent>\n      )}\n    </StyledItemContainer>\n  );\n};\n\nDSAccordionItem.propTypes = accordionItemPropTypes;\n\nconst DSAccordionItemWithSchema = describe(DSAccordionItem);\nDSAccordionItemWithSchema.propTypes = accordionItemPropTypes;\n\nexport { DSAccordionItem, DSAccordionItemWithSchema };\nexport default DSAccordionItem;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/parts/accordionItem/styles.js

@@ -0,0 +1,114 @@
+import * as React from "react";
+import styled from "styled-components";
+const StyledItemContainer = styled.div`
+  display: grid;
+  grid-template-rows: auto auto;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};
+  align-items: center;
+`;
+const StyledItemHeader = styled.button`
+  display: flex;
+  height: ${({ theme, withSecondaryTitle }) => withSecondaryTitle ? theme.space.m : theme.space.s};
+  width: 100%;
+  align-items: center;
+  border: none;
+  outline: none;
+  background: none;
+
+  &:hover {
+    cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  }
+
+  padding: ${({ isDSMobile }) => isDSMobile ? `0 16px` : `0`};
+
+  ${({ isDSMobile }) => isDSMobile ? `flex-direction: row-reverse;` : ``}
+
+  &:focus {
+    &:after {
+      position: absolute;
+      content: '';
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 2px;
+      border: 2px solid ${({ theme }) => theme.colors.brand[700]};
+      pointer-events: none;
+    }
+  }
+`;
+const StyledItemContent = styled.div`
+  margin: ${({ isDSMobile }) => isDSMobile ? `16px 16px 24px 16px` : `16px 16px 16px 32px`};
+  grid-column: 1/2;
+`;
+const StyledItemAddon = styled.div`
+  ${({ theme, isDSMobile }) => !isDSMobile ? `padding: 0 ${theme.space.xxs};` : ``}
+  height: 100%;
+  width: ${({ theme }) => theme.space.s};
+  display: grid;
+  place-items: center;
+
+  & .em-ds-icon svg {
+    fill: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.brand[800]};
+  }
+`;
+const StyledItemTitles = styled.div`
+  display: grid;
+  grid-template-columns: 100%;
+  width: 100%;
+  align-content: center;
+`;
+const StyledPrimaryTitle = styled.div`
+  margin: 0;
+  font-size: 16px;
+  color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.neutral[700]};
+  font-weight: ${({ theme, isDSMobile }) => isDSMobile ? theme.fontWeights.regular : theme.fontWeights.regular};
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: ${({ theme }) => theme.space.xs};
+  width: 100%;
+  text-align: left;
+  display: block;
+  white-space: nowrap;
+`;
+const StyledSecondaryTitle = styled.span`
+  margin: 0;
+  font-size: ${({ theme }) => theme.fontSizes.label[200]};
+  text-align: left;
+  color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.neutral[500]};
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: ${({ theme }) => theme.space.xs};
+  width: 100%;
+  text-align: left;
+  display: block;
+  white-space: nowrap;
+`;
+const StyledItemCustomActions = styled.div`
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: ${({ theme }) => theme.space.xxs};
+  margin: 0 ${({ theme }) => theme.space.xs};
+  justify-content: flex-end;
+`;
+const StyledItemHeaderContainer = styled.div`
+  display: grid;
+  grid-template-columns: auto max-content;
+  place-items: center;
+  position: relative;
+  &:hover {
+    ${({ disabled, theme }) => !disabled ? `background: ${theme.colors.brand[200]};` : ``}
+  }
+`;
+export {
+  StyledItemAddon,
+  StyledItemContainer,
+  StyledItemContent,
+  StyledItemCustomActions,
+  StyledItemHeader,
+  StyledItemHeaderContainer,
+  StyledItemTitles,
+  StyledPrimaryTitle,
+  StyledSecondaryTitle
+};
+//# sourceMappingURL=styles.js.map

package/dist/esm/parts/accordionItem/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport type {\n  StyledItemAddonPropsT,\n  StyledItemHeaderPropsT,\n  StyledItemTitlesPropsT,\n  StyledPrimaryTitlePropsT,\n  StyledSecondaryTitlePropsT,\n  StyledItemContentPropsT,\n  StyledItemHeaderContainerPropsT,\n} from '../../DSAccordionTypes';\n\nexport const StyledItemContainer = styled.div`\n  display: grid;\n  grid-template-rows: auto auto;\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n  align-items: center;\n`;\n\nexport const StyledItemHeader = styled.button<StyledItemHeaderPropsT>`\n  display: flex;\n  height: ${({ theme, withSecondaryTitle }) => (withSecondaryTitle ? theme.space.m : theme.space.s)};\n  width: 100%;\n  align-items: center;\n  border: none;\n  outline: none;\n  background: none;\n\n  &:hover {\n    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n  }\n\n  padding: ${({ isDSMobile }) => (isDSMobile ? `0 16px` : `0`)};\n\n  ${({ isDSMobile }) => (isDSMobile ? `flex-direction: row-reverse;` : ``)}\n\n  &:focus {\n    &:after {\n      position: absolute;\n      content: '';\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledItemContent = styled.div<StyledItemContentPropsT>`\n  margin: ${({ isDSMobile }) => (isDSMobile ? `16px 16px 24px 16px` : `16px 16px 16px 32px`)};\n  grid-column: 1/2;\n`;\n\nexport const StyledItemAddon = styled.div<StyledItemAddonPropsT>`\n  ${({ theme, isDSMobile }) => (!isDSMobile ? `padding: 0 ${theme.space.xxs};` : ``)}\n  height: 100%;\n  width: ${({ theme }) => theme.space.s};\n  display: grid;\n  place-items: center;\n\n  & .em-ds-icon svg {\n    fill: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.brand[800])};\n  }\n`;\n\nexport const StyledItemTitles = styled.div<StyledItemTitlesPropsT>`\n  display: grid;\n  grid-template-columns: 100%;\n  width: 100%;\n  align-content: center;\n`;\n\nexport const StyledPrimaryTitle = styled.div<StyledPrimaryTitlePropsT>`\n  margin: 0;\n  font-size: 16px;\n  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.neutral[700])};\n  font-weight: ${({ theme, isDSMobile }) => (isDSMobile ? theme.fontWeights.regular : theme.fontWeights.regular)};\n  text-overflow: ellipsis;\n  overflow: hidden;\n  height: ${({ theme }) => theme.space.xs};\n  width: 100%;\n  text-align: left;\n  display: block;\n  white-space: nowrap;\n`;\n\nexport const StyledSecondaryTitle = styled.span<StyledSecondaryTitlePropsT>`\n  margin: 0;\n  font-size: ${({ theme }) => theme.fontSizes.label[200]};\n  text-align: left;\n  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.neutral[500])};\n  text-overflow: ellipsis;\n  overflow: hidden;\n  height: ${({ theme }) => theme.space.xs};\n  width: 100%;\n  text-align: left;\n  display: block;\n  white-space: nowrap;\n`;\n\nexport const StyledItemCustomActions = styled.div`\n  display: grid;\n  grid-auto-flow: column;\n  grid-gap: ${({ theme }) => theme.space.xxs};\n  margin: 0 ${({ theme }) => theme.space.xs};\n  justify-content: flex-end;\n`;\n\nexport const StyledItemHeaderContainer = styled.div<StyledItemHeaderContainerPropsT>`\n  display: grid;\n  grid-template-columns: auto max-content;\n  place-items: center;\n  position: relative;\n  &:hover {\n    ${({ disabled, theme }) => (!disabled ? `background: ${theme.colors.brand[200]};` : ``)}\n  }\n`;\n"],
+  "mappings": "AAAA;ACAA;AAWO,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA,6BAGb,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1D,MAAM,mBAAmB,OAAO;AAAA;AAAA,YAE3B,CAAC,EAAE,OAAO,yBAA0B,qBAAqB,MAAM,MAAM,IAAI,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQnF,CAAC,EAAE,eAAgB,WAAW,gBAAgB;AAAA;AAAA;AAAA,aAG/C,CAAC,EAAE,iBAAkB,aAAa,WAAW;AAAA;AAAA,IAEtD,CAAC,EAAE,iBAAkB,aAAa,iCAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAW7C,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMrD,MAAM,oBAAoB,OAAO;AAAA,YAC5B,CAAC,EAAE,iBAAkB,aAAa,wBAAwB;AAAA;AAAA;AAI/D,MAAM,kBAAkB,OAAO;AAAA,IAClC,CAAC,EAAE,OAAO,iBAAkB,CAAC,aAAa,cAAc,MAAM,MAAM,SAAS;AAAA;AAAA,WAEtE,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,YAK1B,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAIzF,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA,WAG9B,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA,iBAChF,CAAC,EAAE,OAAO,iBAAkB,aAAa,MAAM,YAAY,UAAU,MAAM,YAAY;AAAA;AAAA;AAAA,YAG5F,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,uBAAuB,OAAO;AAAA;AAAA,eAE5B,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA,WAEzC,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,YAGrF,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA,cAGhC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,cAC3B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAIlC,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM1C,CAAC,EAAE,UAAU,YAAa,CAAC,WAAW,eAAe,MAAM,OAAO,MAAM,UAAU;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/parts/accordionItem/useAccordionItem.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { useCallback, useContext, useMemo } from "react";
+import { DSAccordionContext } from "../../DSAccordionCTX";
+const useAccordionItem = ({ value, disabled }) => {
+  const { actualActiveValue, setActiveValues, focusableChildrenReferences } = useContext(DSAccordionContext);
+  const selected = useMemo(() => {
+    if (Array.isArray(actualActiveValue)) {
+      return actualActiveValue.some((currentValue) => currentValue === value);
+    }
+    return value === actualActiveValue;
+  }, [actualActiveValue, value]);
+  const handleOnClick = useCallback((e) => {
+    if (!disabled)
+      setActiveValues(value, e);
+  }, [disabled, setActiveValues, value]);
+  const handleOnKeyDown = useCallback((e, _dsIndex) => {
+    if (!disabled && e.key === "ArrowDown") {
+      const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);
+      if (focusableChildrenReferences[currentIndex + 1]?.ref?.current)
+        focusableChildrenReferences[currentIndex + 1]?.ref?.current?.focus();
+    }
+    if (!disabled && e.key === "ArrowUp") {
+      const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);
+      if (focusableChildrenReferences[currentIndex - 1]?.ref?.current)
+        focusableChildrenReferences[currentIndex - 1]?.ref?.current?.focus();
+    }
+  }, [disabled, focusableChildrenReferences]);
+  return {
+    handleOnClick,
+    handleOnKeyDown,
+    selected
+  };
+};
+export {
+  useAccordionItem
+};
+//# sourceMappingURL=useAccordionItem.js.map

package/dist/esm/parts/accordionItem/useAccordionItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/useAccordionItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useMemo } from 'react';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport type { UseAccordionPropsT, UseAccordionItemReturnTypeT } from '../../DSAccordionTypes';\n\nexport const useAccordionItem = ({ value, disabled }: UseAccordionPropsT): UseAccordionItemReturnTypeT => {\n  const { actualActiveValue, setActiveValues, focusableChildrenReferences } = useContext(DSAccordionContext);\n\n  const selected = useMemo(() => {\n    if (Array.isArray(actualActiveValue)) {\n      return actualActiveValue.some((currentValue) => currentValue === value);\n    }\n    return value === actualActiveValue;\n  }, [actualActiveValue, value]);\n\n  const handleOnClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (!disabled) setActiveValues(value, e);\n    },\n    [disabled, setActiveValues, value],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent, _dsIndex: number) => {\n      if (!disabled && e.key === 'ArrowDown') {\n        const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);\n        if (focusableChildrenReferences[currentIndex + 1]?.ref?.current)\n          focusableChildrenReferences[currentIndex + 1]?.ref?.current?.focus();\n      }\n\n      if (!disabled && e.key === 'ArrowUp') {\n        const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);\n        if (focusableChildrenReferences[currentIndex - 1]?.ref?.current)\n          focusableChildrenReferences[currentIndex - 1]?.ref?.current?.focus();\n      }\n    },\n    [disabled, focusableChildrenReferences],\n  );\n\n  return {\n    handleOnClick,\n    handleOnKeyDown,\n    selected,\n  };\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAGO,MAAM,mBAAmB,CAAC,EAAE,OAAO,eAAgE;AACxG,QAAM,EAAE,mBAAmB,iBAAiB,gCAAgC,WAAW;AAEvF,QAAM,WAAW,QAAQ,MAAM;AAC7B,QAAI,MAAM,QAAQ,oBAAoB;AACpC,aAAO,kBAAkB,KAAK,CAAC,iBAAiB,iBAAiB;AAAA;AAEnE,WAAO,UAAU;AAAA,KAChB,CAAC,mBAAmB;AAEvB,QAAM,gBAAgB,YACpB,CAAC,MAAwB;AACvB,QAAI,CAAC;AAAU,sBAAgB,OAAO;AAAA,KAExC,CAAC,UAAU,iBAAiB;AAG9B,QAAM,kBAAkB,YACtB,CAAC,GAAwB,aAAqB;AAC5C,QAAI,CAAC,YAAY,EAAE,QAAQ,aAAa;AACtC,YAAM,eAAe,4BAA4B,UAAU,CAAC,SAAS,KAAK,UAAU;AACpF,UAAI,4BAA4B,eAAe,IAAI,KAAK;AACtD,oCAA4B,eAAe,IAAI,KAAK,SAAS;AAAA;AAGjE,QAAI,CAAC,YAAY,EAAE,QAAQ,WAAW;AACpC,YAAM,eAAe,4BAA4B,UAAU,CAAC,SAAS,KAAK,UAAU;AACpF,UAAI,4BAA4B,eAAe,IAAI,KAAK;AACtD,oCAA4B,eAAe,IAAI,KAAK,SAAS;AAAA;AAAA,KAGnE,CAAC,UAAU;AAGb,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/propTypes.js

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { PropTypes } from "react-desc";
+const accordionItemPropTypes = {
+  children: PropTypes.node.description("Dimsum AccordionItem content.").isRequired,
+  title: PropTypes.string.description("Set a primary title."),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Dimsum AccordionItem value, this value should be unique.").isRequired,
+  iconClosed: PropTypes.node.description("Custom Dimsum Icon when it is closed."),
+  iconOpened: PropTypes.node.description("Custom Dimsum Icon when it is open."),
+  secondaryTitle: PropTypes.string.description("Set a secondary title"),
+  customActions: PropTypes.arrayOf(PropTypes.object).description("Set Dimsum AccordionItem custom actions."),
+  renderCustomActions: PropTypes.func.description("This property will render any JSX in the custom actions area. You can access to all references and active values within the props.")
+};
+const accordionPropTypes = {
+  containerProps: PropTypes.object.description("Adds props to the container."),
+  activeValue: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+    PropTypes.string,
+    PropTypes.number
+  ]).description("Selected active value. This property makes the component a controlled one."),
+  children: PropTypes.node.description("Dimsum AccordionItems to show."),
+  allowMultipleOpen: PropTypes.bool.description("Allows multiple Dimsum AccordionItems to be open at the same time."),
+  onChange: PropTypes.func.description("Callback function once the Dimsum Accordion changes.")
+};
+export {
+  accordionItemPropTypes,
+  accordionPropTypes
+};
+//# sourceMappingURL=propTypes.js.map