@elliemae/ds-accordion 3.0.0-next.9 → 3.0.1

package/dist/esm/DSAccordion.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSAccordion.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { AccordionContent } from './parts/accordionContent/AccordionContent';\nimport { useAccordion } from './config/useAccordion';\nimport { DSAccordionContext } from './DSAccordionCTX';\nimport { accordionPropTypes } from './propTypes';\nimport type { DSAccordionPropsT } from './DSAccordionTypes';\n\nconst DSAccordion = (props: DSAccordionPropsT): JSX.Element => {\n  const ctx = useAccordion(props);\n\n  return (\n    <DSAccordionContext.Provider value={ctx}>\n      <AccordionContent />\n    </DSAccordionContext.Provider>\n  );\n};\n\nDSAccordion.propTypes = accordionPropTypes;\nconst DSAccordionWithSchema = describe(DSAccordion);\nDSAccordionWithSchema.propTypes = accordionPropTypes as WeakValidationMap<unknown>;\n\nexport { DSAccordion, DSAccordionWithSchema };\n\nexport default DSAccordion;\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,cAAc,CAAC,UAA0C;AAC7D,QAAM,MAAM,aAAa;AAEzB,SACE,qCAAC,mBAAmB,UAApB;AAAA,IAA6B,OAAO;AAAA,KAClC,qCAAC,kBAAD;AAAA;AAKN,YAAY,YAAY;AACxB,MAAM,wBAAwB,SAAS;AACvC,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { AccordionContent } from './parts/accordionContent/AccordionContent';\nimport { useAccordion } from './config/useAccordion';\nimport { DSAccordionContext } from './DSAccordionCTX';\nimport { accordionPropTypes } from './react-desc-prop-types';\nimport type { DSAccordionT } from './react-desc-prop-types';\n\nconst DSAccordion = (props: DSAccordionT.Props): JSX.Element => {\n  const ctx = useAccordion(props);\n\n  return (\n    <DSAccordionContext.Provider value={ctx}>\n      <AccordionContent />\n    </DSAccordionContext.Provider>\n  );\n};\n\nDSAccordion.displayName = 'DSAccordion';\nconst DSAccordionWithSchema = describe(DSAccordion);\nDSAccordionWithSchema.propTypes = accordionPropTypes as WeakValidationMap<unknown>;\n\nexport { DSAccordion, DSAccordionWithSchema };\n\nexport default DSAccordion;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,cAAc,CAAC,UAA2C;AAC9D,QAAM,MAAM,aAAa,KAAK;AAE9B,SACE,qCAAC,mBAAmB,UAAnB;AAAA,IAA4B,OAAO;AAAA,KAClC,qCAAC,sBAAiB,CACpB;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
   "names": []
 }

package/dist/esm/DSAccordionCTX.js

@@ -1,15 +1,6 @@
 import * as React from "react";
 import { createContext } from "react";
-import { defaultProps } from "./defaultProps";
-const noop = () => {
-};
-const defaultContext = {
-  props: defaultProps,
-  actualActiveValue: [],
-  setActiveValues: noop,
-  focusableChildrenReferences: [],
-  allChildrenReferences: {}
-};
+const defaultContext = {};
 const DSAccordionContext = createContext(defaultContext);
 export {
   DSAccordionContext

package/dist/esm/DSAccordionCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSAccordionCTX.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport { defaultProps } from './defaultProps';\nimport type { DSAccordionContextT } from './DSAccordionTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\n\nconst defaultContext = {\n  props: defaultProps,\n  actualActiveValue: [],\n  setActiveValues: noop,\n  focusableChildrenReferences: [],\n  allChildrenReferences: {},\n};\n\nexport const DSAccordionContext = createContext<DSAccordionContextT>(defaultContext);\n"],
-  "mappings": "AAAA;ACAA;AACA;AAIA,MAAM,OAAO,MAAY;AAAA;AAEzB,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA;AAGlB,MAAM,qBAAqB,cAAmC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { DSAccordionT } from './react-desc-prop-types';\nimport type { DSAccordionInternalsT } from './sharedTypes';\n\ninterface DSAccordionContextT {\n  props: DSAccordionT.InternalProps;\n  actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n  setActiveValues: (value: string | number, e: React.MouseEvent | React.KeyboardEvent) => void;\n  focusableChildrenReferences: DSAccordionInternalsT.FocusableChildrenReferences[];\n  allChildrenReferences: DSAccordionInternalsT.AllChildrenReferences;\n}\n\nconst defaultContext = {} as DSAccordionContextT;\n\nexport const DSAccordionContext = createContext<DSAccordionContextT>(defaultContext);\n"],
+  "mappings": "AAAA;ACAA;AAYA,MAAM,iBAAiB,CAAC;AAEjB,MAAM,qBAAqB,cAAmC,cAAc;",
   "names": []
 }

package/dist/esm/config/useAccordion.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useMemo, useState, useCallback } from "react";
-import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { useMemoMergePropsWithDefault } from "@elliemae/ds-utilities";
 import { useAccordionRefs } from "./useAccordionRefs";
 import { defaultProps } from "../defaultProps";
 const useAccordion = (props) => {

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

@@ -1,7 +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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useState, useCallback } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { useAccordionRefs } from './useAccordionRefs';\nimport { defaultProps } from '../defaultProps';\nimport type { DSAccordionT } from '../react-desc-prop-types';\nimport type { DSAccordionInternalsT } from '../sharedTypes';\n\ninterface DSAccordionUseAccordionContextT {\n  props: DSAccordionT.InternalProps;\n  actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n  setActiveValues: (value: string | number, e: React.MouseEvent | React.KeyboardEvent) => void;\n  focusableChildrenReferences: DSAccordionInternalsT.FocusableChildrenReferences[];\n  allChildrenReferences: DSAccordionInternalsT.AllChildrenReferences;\n}\n\nexport const useAccordion = (props: DSAccordionT.Props): DSAccordionUseAccordionContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps) as DSAccordionT.InternalProps;\n\n  const { activeValue, allowMultipleOpen, onChange } = propsWithDefaults;\n\n  const { focusableChildrenReferences, allChildrenReferences } = useAccordionRefs(propsWithDefaults);\n\n  const [internalActiveValue, setInternalActiveValue] =\n    useState<DSAccordionInternalsT.InternalActiveValue>(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: DSAccordionInternalsT.InternalActiveValue;\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;AAYO,MAAM,eAAe,CAAC,UAA+D;AAC1F,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAE1E,QAAM,EAAE,aAAa,mBAAmB,aAAa;AAErD,QAAM,EAAE,6BAA6B,0BAA0B,iBAAiB,iBAAiB;AAEjG,QAAM,CAAC,qBAAqB,0BAC1B,SAAoD,WAAW;AAEjE,QAAM,oBAAoB,QAAQ,MAAM;AACtC,QAAI,gBAAgB;AAAW,aAAO;AACtC,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,mBAAmB,CAAC;AAErC,QAAM,kBAAkB,YACtB,CAAC,OAAwB,MAA8C;AACrE,QAAI;AACJ,QAAI,qBAAsB,uBAAsB,UAAa,sBAAsB;AAAO,iBAAW,CAAC,KAAK;AAAA,aAClG,qBAAqB,MAAM,QAAQ,iBAAiB;AAC3D,UAAI,CAAC,kBAAkB,KAAK,CAAC,kBAAmC,kBAAkB,KAAK;AACrF,mBAAW,CAAC,GAAG,mBAAmB,KAAK;AAAA;AACpC,mBAAW,kBAAkB,OAAO,CAAC,kBAAmC,kBAAkB,KAAK;AAAA,aAC7F,sBAAsB;AAAO,iBAAW;AAAA;AAC5C,iBAAW;AAChB,2BAAuB,QAAQ;AAC/B,WAAO,SAAS,UAAU,CAAC;AAAA,EAC7B,GACA,CAAC,mBAAmB,mBAAmB,QAAQ,CACjD;AAEA,QAAM,MAAM,QACV,MAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,mBAAmB,uBAAuB,6BAA6B,mBAAmB,eAAe,CAC5G;AAEA,SAAO;AACT;",
   "names": []
 }

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

@@ -1,7 +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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport type { DSAccordionT } from 'react-desc-prop-types';\nimport type { DSAccordionInternalsT } from '../sharedTypes';\n\ninterface UseAccordionRefsPropsT {\n  children: React.ReactElement<DSAccordionT.InternalItemProps>[];\n}\n\ninterface UseAccordionRefsReturnTypeT {\n  focusableChildrenReferences: DSAccordionInternalsT.FocusableChildrenReferences[];\n  allChildrenReferences: DSAccordionInternalsT.AllChildrenReferences;\n}\n\nexport const useAccordionRefs = ({ children }: UseAccordionRefsPropsT): UseAccordionRefsReturnTypeT =>\n  useMemo(() => {\n    const focusableChildrenReferences: DSAccordionInternalsT.FocusableChildrenReferences[] = [];\n    const allChildrenReferences: DSAccordionInternalsT.AllChildrenReferences = {};\n\n    React.Children.map(children, (child: React.ReactElement<DSAccordionT.InternalItemProps>, index) => {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      const { value, disabled } = child.props;\n      const currentRef = React.createRef<HTMLButtonElement>();\n      allChildrenReferences[index] = currentRef;\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      if (!disabled) focusableChildrenReferences.push({ index, value, ref: currentRef });\n    });\n    return { focusableChildrenReferences, allChildrenReferences };\n  }, [children]);\n"],
+  "mappings": "AAAA;ACAA;AAaO,MAAM,mBAAmB,CAAC,EAAE,eACjC,QAAQ,MAAM;AACZ,QAAM,8BAAmF,CAAC;AAC1F,QAAM,wBAAqE,CAAC;AAE5E,SAAM,SAAS,IAAI,UAAU,CAAC,OAA2D,UAAU;AAEjG,UAAM,EAAE,OAAO,aAAa,MAAM;AAClC,UAAM,aAAa,OAAM,UAA6B;AACtD,0BAAsB,SAAS;AAE/B,QAAI,CAAC;AAAU,kCAA4B,KAAK,EAAE,OAAO,OAAO,KAAK,WAAW,CAAC;AAAA,EACnF,CAAC;AACD,SAAO,EAAE,6BAA6B,sBAAsB;AAC9D,GAAG,CAAC,QAAQ,CAAC;",
   "names": []
 }

package/dist/esm/defaultProps.js

@@ -2,12 +2,14 @@ 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"
+  width: "20px",
+  color: ["brand", "800"]
 }) : /* @__PURE__ */ React2.createElement(ArrowheadRight, {
   width: "20px"
 }));
 const DefaultIconOpen = memo(({ isDSMobile = false }) => isDSMobile ? /* @__PURE__ */ React2.createElement(ChevronDown, {
-  width: "20px"
+  width: "20px",
+  color: ["brand", "800"]
 }) : /* @__PURE__ */ React2.createElement(ArrowheadDown, {
   width: "20px"
 }));
@@ -16,7 +18,6 @@ const noop = () => {
 const defaultProps = {
   containerProps: {},
   allowMultipleOpen: false,
-  contentExpandable: false,
   onChange: noop,
   children: [],
   isDSMobile: false

package/dist/esm/defaultProps.js.map

@@ -1,7 +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;",
+  "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 { DSAccordionInternalsT } from './sharedTypes';\nimport type { DSAccordionT } from './react-desc-prop-types';\n\nconst DefaultIconClosed = memo(({ isDSMobile = false }: DSAccordionInternalsT.DefaultIconProps) =>\n  isDSMobile ? <ChevronRight width=\"20px\" color={['brand', '800']} /> : <ArrowheadRight width=\"20px\" />,\n);\n\nconst DefaultIconOpen = memo(({ isDSMobile = false }: DSAccordionInternalsT.DefaultIconProps) =>\n  isDSMobile ? <ChevronDown width=\"20px\" color={['brand', '800']} /> : <ArrowheadDown width=\"20px\" />,\n);\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\n\nexport const defaultProps: DSAccordionT.DefaultProps = {\n  containerProps: {},\n  allowMultipleOpen: false,\n  onChange: noop,\n  children: [],\n  isDSMobile: false,\n};\n\nexport const accordionItemDefaultProps: DSAccordionT.ItemDefaultProps = {\n  iconClosed: DefaultIconClosed,\n  iconOpened: DefaultIconOpen,\n  title: '',\n  customActions: [],\n  disabled: false,\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAIA,MAAM,oBAAoB,KAAK,CAAC,EAAE,aAAa,YAC7C,aAAa,qCAAC;AAAA,EAAa,OAAM;AAAA,EAAO,OAAO,CAAC,SAAS,KAAK;AAAA,CAAG,IAAK,qCAAC;AAAA,EAAe,OAAM;AAAA,CAAO,CACrG;AAEA,MAAM,kBAAkB,KAAK,CAAC,EAAE,aAAa,YAC3C,aAAa,qCAAC;AAAA,EAAY,OAAM;AAAA,EAAO,OAAO,CAAC,SAAS,KAAK;AAAA,CAAG,IAAK,qCAAC;AAAA,EAAc,OAAM;AAAA,CAAO,CACnG;AAGA,MAAM,OAAO,MAAY;AAAC;AAEnB,MAAM,eAA0C;AAAA,EACrD,gBAAgB,CAAC;AAAA,EACjB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU,CAAC;AAAA,EACX,YAAY;AACd;AAEO,MAAM,4BAA2D;AAAA,EACtE,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,eAAe,CAAC;AAAA,EAChB,UAAU;AACZ;",
   "names": []
 }

package/dist/esm/{DSAccordionDatatestid.js.map → exported-related/DSAccordionDatatestid.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSAccordionDatatestid.tsx"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/DSAccordionDatatestid.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSAccordionDataTestid = {\n  ITEM: {\n    CONTENT: 'ds-accordion_item-content',\n    HEADER: 'ds-accordion_item-header',\n    CONTAINER: 'ds-accordion_item',\n  },\n  GROUP: 'ds-accordion_group',\n};\n"],
-  "mappings": "AAAA;ACAO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA;AAAA,EAEb,OAAO;AAAA;",
+  "mappings": "AAAA;ACAO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AACT;",
   "names": []
 }

package/dist/esm/exported-related/index.js

@@ -0,0 +1,4 @@
+import * as React from "react";
+export * from "./DSAccordionDatatestid";
+export * from "./theming";
+//# sourceMappingURL=index.js.map

package/dist/esm/exported-related/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSAccordionDatatestid';\nexport * from './theming';\n"],
+  "mappings": "AAAA;ACAA;AACA;",
+  "names": []
+}

package/dist/esm/exported-related/theming.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+const COMPONENT_NAME = "DS-Accordion";
+const slots = {
+  CONTAINER: "root",
+  ITEM: {
+    CONTAINER: "item-container",
+    HEADER: {
+      CONTAINER: "item-header-container",
+      ADDON: "item-header-addon",
+      TITLE_CONTAINER: "item-header-titles-container",
+      PRIMARY_TITLE: "item-header-primary-title",
+      SECONDARY_TITLE: "item-header-secondary-title",
+      CUSTOM_ACTIONS_CONTAINER: "item-header-custom-actions-container",
+      TOOLTIP: "item-header-tooltip"
+    },
+    CONTENT: {
+      CONTAINER: "item-content-container"
+    }
+  }
+};
+export {
+  COMPONENT_NAME,
+  slots
+};
+//# sourceMappingURL=theming.js.map

package/dist/esm/exported-related/theming.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const COMPONENT_NAME = 'DS-Accordion';\n\nexport const slots = {\n  CONTAINER: 'root',\n  ITEM: {\n    CONTAINER: 'item-container',\n    HEADER: {\n      CONTAINER: 'item-header-container',\n      ADDON: 'item-header-addon',\n      TITLE_CONTAINER: 'item-header-titles-container',\n      PRIMARY_TITLE: 'item-header-primary-title',\n      SECONDARY_TITLE: 'item-header-secondary-title',\n      CUSTOM_ACTIONS_CONTAINER: 'item-header-custom-actions-container',\n      TOOLTIP: 'item-header-tooltip',\n    },\n    CONTENT: {\n      CONTAINER: 'item-content-container',\n    },\n  },\n};\n"],
+  "mappings": "AAAA;ACAO,MAAM,iBAAiB;AAEvB,MAAM,QAAQ;AAAA,EACnB,WAAW;AAAA,EACX,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,MACP,iBAAiB;AAAA,MACjB,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB,0BAA0B;AAAA,MAC1B,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,WAAW;AAAA,IACb;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/index.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 export * from "./DSAccordion";
 export * from "./parts/accordionItem/DSAccordionItem";
+export * from "./exported-related";
 import { default as default2 } from "./DSAccordion";
 export {
   default2 as default

package/dist/esm/index.js.map

@@ -1,7 +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;",
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSAccordion';\nexport * from './parts/accordionItem/DSAccordionItem';\nexport * from './exported-related';\n\nexport { default } from './DSAccordion';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA;",
   "names": []
 }

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

@@ -1,6 +1,4 @@
 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;
@@ -16,22 +14,37 @@ var __spreadValues = (a, b) => {
     }
   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, { useContext } from "react";
+import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-utilities";
 import { DSAccordionContext } from "../../DSAccordionCTX";
-import { DSAccordionDataTestid } from "../../DSAccordionDatatestid";
+import { DSAccordionDataTestid } from "../../exported-related/DSAccordionDatatestid";
+import { StyledContainer } from "./styles";
 const AccordionContent = () => {
   const {
-    props: { containerProps, children }
-  } = useContext(DSAccordionContext);
+    props: _a
+  } = useContext(DSAccordionContext), _b = _a, { containerProps, children } = _b, rest = __objRest(_b, ["containerProps", "children"]);
   const childrenWithIndex = [];
+  const xstyledAttrs = useGetXstyledProps(rest);
+  const globalAttrs = useGetGlobalAttributes(rest);
   React2.Children.forEach(children, (child, index) => childrenWithIndex.push(React2.cloneElement(child, {
     dsIndex: index
   })));
-  return /* @__PURE__ */ React2.createElement("div", __spreadProps(__spreadValues({}, containerProps), {
+  return /* @__PURE__ */ React2.createElement(StyledContainer, __spreadValues(__spreadValues(__spreadValues({
     "data-testid": DSAccordionDataTestid.GROUP
-  }), childrenWithIndex);
+  }, containerProps), globalAttrs), xstyledAttrs), childrenWithIndex);
 };
 export {
   AccordionContent

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

@@ -1,7 +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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport { DSAccordionDataTestid } from '../../exported-related/DSAccordionDatatestid';\nimport { StyledContainer } from './styles';\nimport type { DSAccordionT } from '../../react-desc-prop-types';\n\nexport const AccordionContent = (): JSX.Element => {\n  const {\n    props: { containerProps, children, ...rest },\n  } = useContext(DSAccordionContext);\n\n  const childrenWithIndex: React.ReactElement<DSAccordionT.InternalItemProps>[] = [];\n\n  const xstyledAttrs = useGetXstyledProps(rest);\n\n  const globalAttrs = useGetGlobalAttributes(rest);\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    <StyledContainer data-testid={DSAccordionDataTestid.GROUP} {...containerProps} {...globalAttrs} {...xstyledAttrs}>\n      {childrenWithIndex}\n    </StyledContainer>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AAGO,MAAM,mBAAmB,MAAmB;AACjD,QACS;AAAA,IAAP,OAAO;AAAA,MACL,WAAW,kBAAkB,GADxB,SAAE,kBAAgB,aAAlB,IAA+B,iBAA/B,IAA+B,CAA7B,kBAAgB;AAG3B,QAAM,oBAA0E,CAAC;AAEjF,QAAM,eAAe,mBAAmB,IAAI;AAE5C,QAAM,cAAc,uBAAuB,IAAI;AAE/C,SAAM,SAAS,QAAQ,UAAU,CAAC,OAAO,UACvC,kBAAkB,KAChB,OAAM,aAAa,OAAO;AAAA,IACxB,SAAS;AAAA,EACX,CAAC,CACH,CACF;AAEA,SACE,qCAAC;AAAA,IAAgB,eAAa,sBAAsB;AAAA,KAAW,iBAAoB,cAAiB,eACjG,iBACH;AAEJ;",
   "names": []
 }

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { styled } from "@elliemae/ds-system";
+import { sizing, space, layout } from "@xstyled/styled-components";
+import { COMPONENT_NAME, slots } from "../../exported-related";
+const StyledContainer = styled("div", {
+  name: COMPONENT_NAME,
+  slot: slots.CONTAINER
+})`
+  ${sizing}
+  ${space}
+  ${layout}
+`;
+export {
+  StyledContainer
+};
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionContent/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { sizing, space, layout } from '@xstyled/styled-components';\nimport { COMPONENT_NAME, slots } from '../../exported-related';\n\nexport const StyledContainer = styled('div', {\n  name: COMPONENT_NAME,\n  slot: slots.CONTAINER,\n})`\n  ${sizing}\n  ${space}\n  ${layout}\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,MAAM;AACd,CAAC;AAAA,IACG;AAAA,IACA;AAAA,IACA;AAAA;",
+  "names": []
+}

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

@@ -31,10 +31,15 @@ var __objRest = (source, exclude) => {
 };
 import * as React from "react";
 import React2, { useState, useContext, useCallback, useMemo } from "react";
-import { useMemoMergePropsWithDefault, describe } from "@elliemae/ds-props-helpers";
+import {
+  useMemoMergePropsWithDefault,
+  describe,
+  useIsShowingEllipsis,
+  useGetGlobalAttributes,
+  useGetXstyledProps
+} from "@elliemae/ds-utilities";
 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,
@@ -45,15 +50,16 @@ import {
   StyledItemHeaderContainer,
   StyledItemTitles,
   StyledPrimaryTitle,
-  StyledSecondaryTitle
+  StyledSecondaryTitle,
+  StyledTooltipContent
 } from "./styles";
-import { accordionItemPropTypes } from "../../propTypes";
 import { useAccordionItem } from "./useAccordionItem";
 import { DSAccordionContext } from "../../DSAccordionCTX";
-import { DSAccordionDataTestid } from "../../DSAccordionDatatestid";
+import { DSAccordionDataTestid } from "../../exported-related/DSAccordionDatatestid";
+import { accordionItemPropTypes } from "../../react-desc-prop-types";
 const DSAccordionItem = (props) => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, accordionItemDefaultProps);
-  const {
+  const _a = propsWithDefaults, {
     children,
     title,
     secondaryTitle,
@@ -64,7 +70,20 @@ const DSAccordionItem = (props) => {
     disabled,
     dsIndex,
     renderCustomActions
-  } = propsWithDefaults;
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "title",
+    "secondaryTitle",
+    "customActions",
+    "iconOpened",
+    "iconClosed",
+    "value",
+    "disabled",
+    "dsIndex",
+    "renderCustomActions"
+  ]);
+  const _b = useGetGlobalAttributes(rest), { className } = _b, globalAttrs = __objRest(_b, ["className"]);
+  const xstyledAttrs = useGetXstyledProps(rest);
   const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });
   const {
     allChildrenReferences,
@@ -78,8 +97,10 @@ const DSAccordionItem = (props) => {
   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(StyledItemCustomActions, {
+        isDSMobile
+      }, customActions?.map((_a2) => {
+        var _b2 = _a2, { onClick, id } = _b2, otherProps = __objRest(_b2, ["onClick", "id"]);
         return /* @__PURE__ */ React2.createElement(DSButton, __spreadProps(__spreadValues({
           key: id,
           onClick: (e) => {
@@ -87,12 +108,14 @@ const DSAccordionItem = (props) => {
             if (onClick)
               onClick(e);
           }
-        }, rest), {
+        }, otherProps), {
           buttonType: BUTTON_TYPE.SECONDARY
         }));
       }));
     if (!isDSMobile && renderCustomActions)
-      return /* @__PURE__ */ React2.createElement(StyledItemCustomActions, null, renderCustomActions({ allRefs: allChildrenReferences, actualActiveValue }));
+      return /* @__PURE__ */ React2.createElement(StyledItemCustomActions, {
+        isDSMobile
+      }, renderCustomActions({ allRefs: allChildrenReferences, actualActiveValue }));
     return null;
   }, [actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);
   const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();
@@ -100,33 +123,33 @@ const DSAccordionItem = (props) => {
   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`,
+    if ((isPrimaryShowingEllipsis || isSecondaryShowingEllipsis) && !isDSMobile)
+      return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledPrimaryTitle, __spreadProps(__spreadValues({
+        ref: setPrimaryElement
+      }, title ? { id: `accordion_${title || ""}id` } : void 0), {
         disabled,
-        isDSMobile
-      }, title), !isDSMobile && secondaryTitle && /* @__PURE__ */ React2.createElement(StyledSecondaryTitle, {
+        isDSMobile,
+        selected,
+        withSecondaryTitle: secondaryTitle
+      }), title), !isDSMobile && secondaryTitle && /* @__PURE__ */ React2.createElement(StyledSecondaryTitle, {
         ref: setSecondaryElement,
-        disabled
+        disabled,
+        selected
       }, 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`,
+      }, /* @__PURE__ */ React2.createElement(StyledTooltipContent, null, /* @__PURE__ */ React2.createElement("p", null, title), /* @__PURE__ */ React2.createElement("p", null, " ", secondaryTitle))));
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledPrimaryTitle, __spreadProps(__spreadValues({
+      ref: setPrimaryElement
+    }, title ? { id: `accordion_${title || ""}id` } : void 0), {
       disabled,
-      isDSMobile
-    }, title), !isDSMobile && secondaryTitle && /* @__PURE__ */ React2.createElement(StyledSecondaryTitle, {
+      isDSMobile,
+      selected,
+      withSecondaryTitle: secondaryTitle
+    }), title), !isDSMobile && secondaryTitle && /* @__PURE__ */ React2.createElement(StyledSecondaryTitle, {
       ref: setSecondaryElement,
-      disabled
+      disabled,
+      selected
     }, secondaryTitle));
   }, [
     disabled,
@@ -138,13 +161,16 @@ const DSAccordionItem = (props) => {
     setPrimaryElement,
     setSecondaryElement,
     showPopover,
+    selected,
     title
   ]);
-  return /* @__PURE__ */ React2.createElement(StyledItemContainer, {
-    "data-testid": DSAccordionDataTestid.ITEM.CONTAINER
-  }, /* @__PURE__ */ React2.createElement(StyledItemHeaderContainer, {
-    disabled
-  }, /* @__PURE__ */ React2.createElement(StyledItemHeader, {
+  return /* @__PURE__ */ React2.createElement(StyledItemContainer, __spreadValues({
+    "data-testid": DSAccordionDataTestid.ITEM.CONTAINER,
+    className
+  }, xstyledAttrs), /* @__PURE__ */ React2.createElement(StyledItemHeaderContainer, {
+    disabled,
+    ref: setReferenceElement
+  }, /* @__PURE__ */ React2.createElement(StyledItemHeader, __spreadValues({
     withCustomActions: (customActions?.length > 0 || renderCustomActions !== void 0) && !isDSMobile,
     withSecondaryTitle: secondaryTitle,
     onClick: handleOnClick,
@@ -161,7 +187,7 @@ const DSAccordionItem = (props) => {
     "aria-controls": `ds-accordion-content-${value}`,
     onFocus: handleOnFocus,
     onBlur: handleOnBlur
-  }, /* @__PURE__ */ React2.createElement(StyledItemAddon, {
+  }, globalAttrs), /* @__PURE__ */ React2.createElement(StyledItemAddon, {
     disabled,
     isDSMobile
   }, selected ? /* @__PURE__ */ React2.createElement(IconOpened, {
@@ -172,7 +198,8 @@ const DSAccordionItem = (props) => {
     onMouseEnter: handleOnFocus,
     onMouseLeave: handleOnBlur,
     isDSMobile,
-    ref: setReferenceElement
+    withSecondaryTitle: secondaryTitle,
+    selected
   }, Titles)), CustomActionsContent), selected && /* @__PURE__ */ React2.createElement(StyledItemContent, {
     "data-testid": DSAccordionDataTestid.ITEM.CONTENT,
     "aria-labelledby": `ds-accordion-header-${value}`,
@@ -181,7 +208,7 @@ const DSAccordionItem = (props) => {
     id: `ds-accordion-content-${value}`
   }, children));
 };
-DSAccordionItem.propTypes = accordionItemPropTypes;
+DSAccordionItem.displayName = "DSAccordionItem";
 const DSAccordionItemWithSchema = describe(DSAccordionItem);
 DSAccordionItemWithSchema.propTypes = accordionItemPropTypes;
 var DSAccordionItem_default = DSAccordionItem;

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

@@ -1,7 +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, WeakValidationMap } from 'react';\nimport { useMemoMergePropsWithDefault, describe } 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<HTMLElement | null>();\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<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>): void => {\n                e.stopPropagation();\n                if (onClick) onClick(e as React.MouseEvent<HTMLElement, MouseEvent>);\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 as WeakValidationMap<unknown>;\n\nexport { DSAccordionItem, DSAccordionItemWithSchema };\nexport default DSAccordionItem;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useContext, useCallback, useMemo, WeakValidationMap } from 'react';\nimport {\n  useMemoMergePropsWithDefault,\n  describe,\n  useIsShowingEllipsis,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { DSButton, BUTTON_TYPE } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { accordionItemDefaultProps } from '../../defaultProps';\nimport {\n  StyledItemAddon,\n  StyledItemContainer,\n  StyledItemContent,\n  StyledItemCustomActions,\n  StyledItemHeader,\n  StyledItemHeaderContainer,\n  StyledItemTitles,\n  StyledPrimaryTitle,\n  StyledSecondaryTitle,\n  StyledTooltipContent,\n} from './styles';\nimport { useAccordionItem } from './useAccordionItem';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport { DSAccordionDataTestid } from '../../exported-related/DSAccordionDatatestid';\nimport { accordionItemPropTypes } from '../../react-desc-prop-types';\nimport type { DSAccordionT } from '../../react-desc-prop-types';\n\nconst DSAccordionItem = (props: DSAccordionT.ItemProps): JSX.Element => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(\n    props,\n    accordionItemDefaultProps,\n  ) as DSAccordionT.InternalItemProps;\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    ...rest\n  } = propsWithDefaults;\n\n  const { className, ...globalAttrs } = useGetGlobalAttributes(rest);\n  const xstyledAttrs = useGetXstyledProps(rest);\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<HTMLElement | null>();\n\n  const CustomActionsContent = useMemo(() => {\n    if (!isDSMobile && customActions?.length > 0)\n      return (\n        <StyledItemCustomActions isDSMobile={isDSMobile}>\n          {customActions?.map(({ onClick, id, ...otherProps }) => (\n            <DSButton\n              key={id}\n              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>): void => {\n                e.stopPropagation();\n                if (onClick) onClick(e as React.MouseEvent<HTMLElement, MouseEvent>);\n              }}\n              {...otherProps}\n              buttonType={BUTTON_TYPE.SECONDARY}\n            />\n          ))}\n        </StyledItemCustomActions>\n      );\n\n    if (!isDSMobile && renderCustomActions)\n      return (\n        <StyledItemCustomActions isDSMobile={isDSMobile}>\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  // eslint-disable-next-line complexity\n  const Titles = useMemo(() => {\n    if ((isPrimaryShowingEllipsis || isSecondaryShowingEllipsis) && !isDSMobile)\n      return (\n        <>\n          <StyledPrimaryTitle\n            ref={setPrimaryElement}\n            {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n            disabled={disabled}\n            isDSMobile={isDSMobile}\n            selected={selected}\n            withSecondaryTitle={secondaryTitle}\n          >\n            {title}\n          </StyledPrimaryTitle>\n          {!isDSMobile && secondaryTitle && (\n            <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled} selected={selected}>\n              {secondaryTitle}\n            </StyledSecondaryTitle>\n          )}\n          <DSPopperJS referenceElement={referenceElement} showPopover={showPopover}>\n            <StyledTooltipContent>\n              <p>{title}</p>\n              <p> {secondaryTitle}</p>\n            </StyledTooltipContent>\n          </DSPopperJS>\n        </>\n      );\n\n    return (\n      <>\n        <StyledPrimaryTitle\n          ref={setPrimaryElement}\n          {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n          disabled={disabled}\n          isDSMobile={isDSMobile}\n          selected={selected}\n          withSecondaryTitle={secondaryTitle}\n        >\n          {title}\n        </StyledPrimaryTitle>\n        {!isDSMobile && secondaryTitle && (\n          <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled} selected={selected}>\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    selected,\n    title,\n  ]);\n\n  return (\n    <StyledItemContainer data-testid={DSAccordionDataTestid.ITEM.CONTAINER} className={className} {...xstyledAttrs}>\n      <StyledItemHeaderContainer disabled={disabled} ref={setReferenceElement}>\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          {...globalAttrs}\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            withSecondaryTitle={secondaryTitle}\n            selected={selected}\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.displayName = 'DSAccordionItem';\nconst DSAccordionItemWithSchema = describe(DSAccordionItem);\nDSAccordionItemWithSchema.propTypes = accordionItemPropTypes as WeakValidationMap<unknown>;\n\nexport { DSAccordionItem, DSAccordionItemWithSchema };\nexport default DSAccordionItem;\n"],
+  "mappings": "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",
   "names": []
 }