npm - @elliemae/ds-accordion - Versions diffs - 3.62.1 → 3.70.0-alpha.9 - Mend

@elliemae/ds-accordion 3.62.1 → 3.70.0-alpha.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

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

@@ -1,8 +1,6 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { BUTTON_TYPES, DSButtonV2 } from "@elliemae/ds-button-v2";
-import { Grid } from "@elliemae/ds-grid";
-import { DSPopperJS } from "@elliemae/ds-popperjs";
+import { useFloatingContext, FloatingWrapper, PopoverArrow } from "@elliemae/ds-floating-context";
 import {
   describe,
   useGetGlobalAttributes,
@@ -10,21 +8,19 @@ import {
   useMemoMergePropsWithDefault
 } from "@elliemae/ds-props-helpers";
 import { mergeRefs } from "@elliemae/ds-system";
-import { useCallback, useContext, useMemo, useState } from "react";
+import { useCallback, useContext, useState } from "react";
 import { DSAccordionContext } from "../../DSAccordionCTX.js";
 import { DSAccordionDataTestid } from "../../constants/index.js";
 import { accordionItemDefaultProps } from "../../defaultProps.js";
 import { accordionItemPropTypes } from "../../react-desc-prop-types.js";
+import { ItemCustomActions } from "./ItemCustomActions.js";
+import { ItemTitle } from "./ItemTitle.js";
 import {
-  StyledItemAddon,
   StyledItemContainer,
   StyledItemContent,
-  StyledItemCustomActions,
+  StyledItemDetails,
   StyledItemHeader,
   StyledItemHeaderContainer,
-  StyledItemTitles,
-  StyledPrimaryTitle,
-  StyledSecondaryTitle,
   StyledTooltipContent
 } from "./styles.js";
 import { useAccordionItem } from "./useAccordionItem.js";
@@ -55,7 +51,7 @@ const DSAccordionItem = (props) => {
     wrapLabel,
     ...rest
   } = propsWithDefaults;
-  const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled, applyAriaDisabled });
+  const { handleOnKeyDown, toggle, selected } = useAccordionItem({ value, disabled, applyAriaDisabled });
   const xstyledAttrs = useGetXstyledProps(rest);
   const xstyledContentAttrs = useGetXstyledProps(xStyledPropsContent);
   const {
@@ -65,56 +61,44 @@ const DSAccordionItem = (props) => {
   } = useContext(DSAccordionContext);
   const [showPopover, setShowPopover] = useState(false);
   const [referenceElement, setReferenceElement] = useState(null);
-  const CustomActionsContent = useMemo(() => {
-    if (!isDSMobile && customActions?.length > 0)
-      return /* @__PURE__ */ jsx(
-        StyledItemCustomActions,
-        {
-          isDSMobile,
-          getOwnerProps,
-          getOwnerPropsArguments,
-          children: customActions?.map(({ onClick, id, ...otherProps }) => /* @__PURE__ */ jsx(
-            DSButtonV2,
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                if (onClick) onClick(e);
-              },
-              ...otherProps,
-              buttonType: BUTTON_TYPES.OUTLINE
-            },
-            id
-          ))
-        }
-      );
-    if (!isDSMobile && (renderCustomActions || CustomActions))
-      return /* @__PURE__ */ jsx(
-        StyledItemCustomActions,
-        {
-          isDSMobile,
-          getOwnerProps,
-          getOwnerPropsArguments,
-          children: CustomActions !== void 0 ? /* @__PURE__ */ jsx(CustomActions, { allRefs: allChildrenReferences, actualActiveValue }) : renderCustomActions?.({ allRefs: allChildrenReferences, actualActiveValue })
-        }
-      );
-    return null;
-  }, [
-    CustomActions,
-    actualActiveValue,
-    allChildrenReferences,
-    customActions,
-    getOwnerProps,
-    getOwnerPropsArguments,
-    isDSMobile,
-    renderCustomActions
-  ]);
   const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();
   const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();
-  const onKeyDownWithIndex = useCallback(
+  const isTooltipOpen = !selected && showPopover;
+  const {
+    refs: floatingRefs,
+    floatingStyles,
+    arrowStyles,
+    context: floatingContext,
+    isOpen: isFloatingOpen
+  } = useFloatingContext({
+    externallyControlledIsOpen: isTooltipOpen,
+    externalReferenceElement: referenceElement,
+    withoutAnimation: true,
+    customOffset: [0, 14]
+  });
+  const handleSummaryClick = useCallback(
+    (e) => {
+      e.preventDefault();
+      toggle(e);
+    },
+    [toggle]
+  );
+  const handleSummaryKeyDown = useCallback(
     (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle(e);
+        return;
+      }
       handleOnKeyDown(e, dsIndex);
     },
-    [dsIndex, handleOnKeyDown]
+    [toggle, handleOnKeyDown, dsIndex]
+  );
+  const handleSummaryMouseDown = useCallback(
+    (e) => {
+      if (disabled) e.preventDefault();
+    },
+    [disabled]
   );
   const handleOnFocus = useCallback(
     () => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis),
@@ -122,225 +106,142 @@ const DSAccordionItem = (props) => {
   );
   const handleOnBlur = useCallback(() => setShowPopover(false), []);
   const { className, ...globalAttrs } = useGetGlobalAttributes(rest, {
-    onClick: handleOnClick,
+    onClick: handleSummaryClick,
     onFocus: handleOnFocus,
     onBlur: handleOnBlur
   });
   const handlers = {
-    onClick: handleOnClick,
+    onClick: handleSummaryClick,
+    onKeyDown: handleSummaryKeyDown,
+    onMouseDown: handleSummaryMouseDown,
     onFocus: handleOnFocus,
     onBlur: handleOnBlur
   };
-  const titleDesktop = useMemo(
-    () => /* @__PURE__ */ jsxs(
-      Grid,
-      {
-        onMouseEnter: handleOnFocus,
-        onMouseLeave: handleOnBlur,
-        cols: ["auto", "1fr"],
-        padding: "6px 0px",
-        marginRight: "20px",
-        width: "100%",
-        children: [
-          /* @__PURE__ */ jsx(
-            StyledItemAddon,
-            {
-              disabled,
-              applyAriaDisabled,
-              getOwnerProps,
-              getOwnerPropsArguments,
-              children: selected ? /* @__PURE__ */ jsx(IconOpened, {}) : /* @__PURE__ */ jsx(IconClosed, {})
-            }
-          ),
-          /* @__PURE__ */ jsxs(Grid, { rows: secondaryTitle ? ["auto", "auto"] : ["auto"], rowGap: secondaryTitle ? "3px" : "0px", children: [
-            /* @__PURE__ */ jsx(
-              StyledItemTitles,
-              {
-                withSecondaryTitle: secondaryTitle,
-                selected,
-                getOwnerProps,
-                getOwnerPropsArguments,
-                children: /* @__PURE__ */ jsx(
-                  StyledPrimaryTitle,
-                  {
-                    innerRef: setPrimaryElement,
-                    ...title ? { id: `accordion_${title || ""}id-${value}` } : void 0,
-                    disabled,
-                    applyAriaDisabled,
-                    selected,
-                    withSecondaryTitle: Boolean(secondaryTitle),
-                    getOwnerProps,
-                    getOwnerPropsArguments,
-                    wrapLabel,
-                    children: title
-                  }
-                )
-              }
-            ),
-            secondaryTitle && /* @__PURE__ */ jsx(
-              StyledSecondaryTitle,
-              {
-                innerRef: setSecondaryElement,
-                disabled,
-                applyAriaDisabled,
-                selected,
-                getOwnerProps,
-                getOwnerPropsArguments,
-                wrapLabel,
-                children: secondaryTitle
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    [
-      handleOnFocus,
-      handleOnBlur,
-      secondaryTitle,
-      disabled,
-      applyAriaDisabled,
-      getOwnerProps,
-      getOwnerPropsArguments,
-      selected,
-      IconOpened,
-      IconClosed,
-      setPrimaryElement,
-      title,
-      value,
-      wrapLabel,
-      setSecondaryElement
-    ]
-  );
-  const titleMobile = useMemo(
-    () => /* @__PURE__ */ jsx(Grid, { width: "100%", children: /* @__PURE__ */ jsxs(Grid, { cols: ["auto", "20px"], children: [
-      /* @__PURE__ */ jsx(
-        StyledItemTitles,
-        {
-          onMouseEnter: handleOnFocus,
-          onMouseLeave: handleOnBlur,
-          isDSMobile: true,
-          withSecondaryTitle: secondaryTitle,
-          selected,
-          getOwnerProps,
-          getOwnerPropsArguments,
-          children: /* @__PURE__ */ jsx(
-            StyledPrimaryTitle,
-            {
-              innerRef: setPrimaryElement,
-              ...title ? { id: `accordion_${title || ""}id` } : void 0,
-              disabled,
-              applyAriaDisabled,
-              isDSMobile: true,
-              selected,
-              withSecondaryTitle: Boolean(secondaryTitle),
-              getOwnerProps,
-              getOwnerPropsArguments,
-              wrapLabel,
-              children: title
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        StyledItemAddon,
-        {
-          disabled,
-          applyAriaDisabled,
-          isDSMobile: true,
-          getOwnerProps,
-          getOwnerPropsArguments,
-          children: selected ? /* @__PURE__ */ jsx(IconOpened, { isDSMobile: true }) : /* @__PURE__ */ jsx(IconClosed, { isDSMobile: true })
-        }
-      )
-    ] }) }),
-    [
-      handleOnFocus,
-      handleOnBlur,
-      secondaryTitle,
-      selected,
-      getOwnerProps,
-      getOwnerPropsArguments,
-      setPrimaryElement,
-      title,
-      disabled,
-      applyAriaDisabled,
-      wrapLabel,
-      IconOpened,
-      IconClosed
-    ]
-  );
+  const headerId = `ds-accordion-header-${value}`;
+  const contentId = `ds-accordion-content-${value}`;
+  const withCustomActions = (customActions?.length > 0 || renderCustomActions !== void 0 || CustomActions !== void 0) && !isDSMobile;
   return /* @__PURE__ */ jsxs(
     StyledItemContainer,
     {
       "data-testid": DSAccordionDataTestid.ITEM_CONTAINER,
       className,
       ...xstyledAttrs,
+      disabled,
+      applyAriaDisabled,
       getOwnerProps,
       getOwnerPropsArguments,
       children: [
         /* @__PURE__ */ jsxs(
-          StyledItemHeaderContainer,
+          StyledItemDetails,
           {
-            disabled,
-            applyAriaDisabled,
-            innerRef: (HTMLNode) => setReferenceElement(HTMLNode ?? null),
+            open: selected,
+            "data-testid": DSAccordionDataTestid.ITEM_DETAILS,
             getOwnerProps,
             getOwnerPropsArguments,
             children: [
               /* @__PURE__ */ jsxs(
                 StyledItemHeader,
                 {
-                  withCustomActions: (customActions?.length > 0 || renderCustomActions !== void 0) && !isDSMobile,
+                  withCustomActions,
                   withSecondaryTitle: secondaryTitle,
-                  tabIndex: !disabled ? 0 : void 0,
+                  tabIndex: disabled ? -1 : 0,
                   disabled,
                   "data-disabled": disabled,
                   innerRef: mergeRefs(allChildrenReferences[dsIndex], innerRef),
-                  onKeyDown: onKeyDownWithIndex,
                   isDSMobile,
                   "data-testid": DSAccordionDataTestid.ITEM_HEADER,
-                  id: `ds-accordion-header-${value}`,
+                  id: headerId,
                   "aria-expanded": selected,
                   "aria-disabled": disabled || applyAriaDisabled,
                   applyAriaDisabled,
-                  "aria-controls": `ds-accordion-content-${value}`,
+                  "aria-controls": contentId,
                   ...handlers,
                   ...globalAttrs,
-                  type: "button",
                   getOwnerProps,
                   getOwnerPropsArguments,
                   children: [
-                    isDSMobile ? titleMobile : titleDesktop,
-                    wrapLabel ? null : /* @__PURE__ */ jsx(DSPopperJS, { referenceElement, showPopover: !selected && showPopover, children: /* @__PURE__ */ jsxs(StyledTooltipContent, { getOwnerProps, getOwnerPropsArguments, children: [
-                      /* @__PURE__ */ jsx("p", { children: title }),
-                      /* @__PURE__ */ jsxs("p", { children: [
-                        " ",
-                        secondaryTitle
-                      ] })
-                    ] }) })
+                    /* @__PURE__ */ jsx(
+                      StyledItemHeaderContainer,
+                      {
+                        innerRef: (HTMLNode) => setReferenceElement(HTMLNode ?? null),
+                        getOwnerProps,
+                        getOwnerPropsArguments,
+                        children: /* @__PURE__ */ jsx(
+                          ItemTitle,
+                          {
+                            title,
+                            secondaryTitle,
+                            value,
+                            selected,
+                            disabled,
+                            applyAriaDisabled,
+                            wrapLabel,
+                            isDSMobile,
+                            IconOpened,
+                            IconClosed,
+                            onMouseEnter: handleOnFocus,
+                            onMouseLeave: handleOnBlur,
+                            setPrimaryElement,
+                            setSecondaryElement,
+                            getOwnerProps,
+                            getOwnerPropsArguments
+                          }
+                        )
+                      }
+                    ),
+                    wrapLabel ? null : /* @__PURE__ */ jsxs(
+                      FloatingWrapper,
+                      {
+                        innerRef: floatingRefs.setFloating,
+                        isOpen: isFloatingOpen,
+                        floatingStyles,
+                        context: floatingContext,
+                        children: [
+                          /* @__PURE__ */ jsxs(StyledTooltipContent, { getOwnerProps, getOwnerPropsArguments, children: [
+                            /* @__PURE__ */ jsx("p", { children: title }),
+                            /* @__PURE__ */ jsxs("p", { children: [
+                              " ",
+                              secondaryTitle
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
+                        ]
+                      }
+                    )
                   ]
                 }
               ),
-              CustomActionsContent
+              (selected || keepContentMounted) && /* @__PURE__ */ jsx(
+                StyledItemContent,
+                {
+                  "data-testid": DSAccordionDataTestid.ITEM_CONTENT_CONTAINER,
+                  "aria-labelledby": headerId,
+                  role: "region",
+                  isDSMobile,
+                  id: contentId,
+                  ...xstyledContentAttrs,
+                  selected,
+                  keepContentMounted,
+                  applyAriaDisabled,
+                  getOwnerProps,
+                  getOwnerPropsArguments,
+                  children
+                }
+              )
             ]
           }
         ),
-        (selected || keepContentMounted) && /* @__PURE__ */ jsx(
-          StyledItemContent,
+        /* @__PURE__ */ jsx(
+          ItemCustomActions,
           {
-            "data-testid": DSAccordionDataTestid.ITEM_CONTENT_CONTAINER,
-            "aria-labelledby": `ds-accordion-header-${value}`,
-            role: "region",
+            customActions,
+            renderCustomActions,
+            CustomActionsComponent: CustomActions,
             isDSMobile,
-            id: `ds-accordion-content-${value}`,
-            ...xstyledContentAttrs,
-            selected,
-            keepContentMounted,
-            applyAriaDisabled,
+            allRefs: allChildrenReferences,
+            actualActiveValue,
             getOwnerProps,
-            getOwnerPropsArguments,
-            children
+            getOwnerPropsArguments
           }
         )
       ]

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

@@ -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-statements */\n/* eslint-disable max-lines */\nimport { BUTTON_TYPES, DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useContext, useMemo, useState } from 'react';\nimport { DSAccordionContext } from '../../DSAccordionCTX.js';\nimport { DSAccordionDataTestid } from '../../constants/index.js';\nimport { accordionItemDefaultProps } from '../../defaultProps.js';\nimport type { DSAccordionT } from '../../react-desc-prop-types.js';\nimport { accordionItemPropTypes } from '../../react-desc-prop-types.js';\nimport {\n  StyledItemAddon,\n  StyledItemContainer,\n  StyledItemContent,\n  StyledItemCustomActions,\n  StyledItemHeader,\n  StyledItemHeaderContainer,\n  StyledItemTitles,\n  StyledPrimaryTitle,\n  StyledSecondaryTitle,\n  StyledTooltipContent,\n} from './styles.js';\nimport { useAccordionItem } from './useAccordionItem.js';\nimport { useIsShowingEllipsis } from './useIsShowingEllipsis.js';\n\nconst DSAccordionItem = (props: DSAccordionT.ItemProps): JSX.Element => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(\n    props,\n    accordionItemDefaultProps,\n  ) as DSAccordionT.InternalItemProps;\n\n  const getOwnerProps = useCallback(() => props, [props]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\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    CustomActions,\n    xStyledPropsContent,\n    keepContentMounted,\n    innerRef,\n    applyAriaDisabled,\n    wrapLabel,\n    ...rest\n  } = propsWithDefaults;\n\n  const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled, applyAriaDisabled });\n\n  const xstyledAttrs = useGetXstyledProps(rest);\n  const xstyledContentAttrs = useGetXstyledProps(xStyledPropsContent);\n\n  const {\n    allChildrenReferences,\n    actualActiveValue,\n    props: { isDSMobile },\n  } = useContext(DSAccordionContext);\n\n  const [showPopover, setShowPopover] = useState(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n\n  const CustomActionsContent = useMemo(() => {\n    if (!isDSMobile && customActions?.length > 0)\n      return (\n        <StyledItemCustomActions\n          isDSMobile={isDSMobile}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {customActions?.map(({ onClick, id, ...otherProps }) => (\n            <DSButtonV2\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_TYPES.OUTLINE}\n            />\n          ))}\n        </StyledItemCustomActions>\n      );\n\n    if (!isDSMobile && (renderCustomActions || CustomActions))\n      return (\n        <StyledItemCustomActions\n          isDSMobile={isDSMobile}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {CustomActions !== undefined ? (\n            <CustomActions allRefs={allChildrenReferences} actualActiveValue={actualActiveValue} />\n          ) : (\n            renderCustomActions?.({ allRefs: allChildrenReferences, actualActiveValue })\n          )}\n        </StyledItemCustomActions>\n      );\n    return null;\n  }, [\n    CustomActions,\n    actualActiveValue,\n    allChildrenReferences,\n    customActions,\n    getOwnerProps,\n    getOwnerPropsArguments,\n    isDSMobile,\n    renderCustomActions,\n  ]);\n\n  const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();\n\n  const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();\n\n  const onKeyDownWithIndex = useCallback(\n    (e: React.KeyboardEvent) => {\n      handleOnKeyDown(e, dsIndex);\n    },\n    [dsIndex, handleOnKeyDown],\n  );\n  const handleOnFocus = useCallback(\n    () => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis),\n    [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis],\n  );\n\n  const handleOnBlur = useCallback(() => setShowPopover(false), []);\n\n  const { className, ...globalAttrs } = useGetGlobalAttributes(rest, {\n    onClick: handleOnClick,\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const handlers = {\n    onClick: handleOnClick,\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  };\n\n  const titleDesktop = useMemo(\n    () => (\n      <Grid\n        onMouseEnter={handleOnFocus}\n        onMouseLeave={handleOnBlur}\n        cols={['auto', '1fr']}\n        padding=\"6px 0px\"\n        marginRight=\"20px\"\n        width=\"100%\"\n      >\n        <StyledItemAddon\n          disabled={disabled}\n          applyAriaDisabled={applyAriaDisabled}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {selected ? <IconOpened /> : <IconClosed />}\n        </StyledItemAddon>\n        <Grid rows={secondaryTitle ? ['auto', 'auto'] : ['auto']} rowGap={secondaryTitle ? '3px' : '0px'}>\n          <StyledItemTitles\n            withSecondaryTitle={secondaryTitle}\n            selected={selected}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <StyledPrimaryTitle\n              innerRef={setPrimaryElement}\n              {...(title ? { id: `accordion_${title || ''}id-${value}` } : undefined)}\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabled}\n              selected={selected}\n              withSecondaryTitle={Boolean(secondaryTitle)}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n              wrapLabel={wrapLabel}\n            >\n              {title}\n            </StyledPrimaryTitle>\n          </StyledItemTitles>\n          {secondaryTitle && (\n            <StyledSecondaryTitle\n              innerRef={setSecondaryElement}\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabled}\n              selected={selected}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n              wrapLabel={wrapLabel}\n            >\n              {secondaryTitle}\n            </StyledSecondaryTitle>\n          )}\n        </Grid>\n      </Grid>\n    ),\n    [\n      handleOnFocus,\n      handleOnBlur,\n      secondaryTitle,\n      disabled,\n      applyAriaDisabled,\n      getOwnerProps,\n      getOwnerPropsArguments,\n      selected,\n      IconOpened,\n      IconClosed,\n      setPrimaryElement,\n      title,\n      value,\n      wrapLabel,\n      setSecondaryElement,\n    ],\n  );\n\n  const titleMobile = useMemo(\n    () => (\n      <Grid width=\"100%\">\n        <Grid cols={['auto', '20px']}>\n          <StyledItemTitles\n            onMouseEnter={handleOnFocus}\n            onMouseLeave={handleOnBlur}\n            isDSMobile\n            withSecondaryTitle={secondaryTitle}\n            selected={selected}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <StyledPrimaryTitle\n              innerRef={setPrimaryElement}\n              {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabled}\n              isDSMobile\n              selected={selected}\n              withSecondaryTitle={Boolean(secondaryTitle)}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n              wrapLabel={wrapLabel}\n            >\n              {title}\n            </StyledPrimaryTitle>\n          </StyledItemTitles>\n          <StyledItemAddon\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled}\n            isDSMobile\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {selected ? <IconOpened isDSMobile /> : <IconClosed isDSMobile />}\n          </StyledItemAddon>\n        </Grid>\n      </Grid>\n    ),\n    [\n      handleOnFocus,\n      handleOnBlur,\n      secondaryTitle,\n      selected,\n      getOwnerProps,\n      getOwnerPropsArguments,\n      setPrimaryElement,\n      title,\n      disabled,\n      applyAriaDisabled,\n      wrapLabel,\n      IconOpened,\n      IconClosed,\n    ],\n  );\n  return (\n    <StyledItemContainer\n      data-testid={DSAccordionDataTestid.ITEM_CONTAINER}\n      className={className}\n      {...xstyledAttrs}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledItemHeaderContainer\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled}\n        innerRef={(HTMLNode) => setReferenceElement(HTMLNode ?? null)}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledItemHeader\n          withCustomActions={(customActions?.length > 0 || renderCustomActions !== undefined) && !isDSMobile}\n          withSecondaryTitle={secondaryTitle}\n          tabIndex={!disabled ? 0 : undefined}\n          disabled={disabled}\n          data-disabled={disabled}\n          innerRef={mergeRefs(allChildrenReferences[dsIndex], innerRef)}\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 || applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled}\n          aria-controls={`ds-accordion-content-${value}`}\n          {...handlers}\n          {...globalAttrs}\n          type=\"button\"\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {isDSMobile ? titleMobile : titleDesktop}\n          {wrapLabel ? null : (\n            <DSPopperJS referenceElement={referenceElement} showPopover={!selected && showPopover}>\n              <StyledTooltipContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n                <p>{title}</p>\n                <p> {secondaryTitle}</p>\n              </StyledTooltipContent>\n            </DSPopperJS>\n          )}\n        </StyledItemHeader>\n        {CustomActionsContent}\n      </StyledItemHeaderContainer>\n      {(selected || keepContentMounted) && (\n        <StyledItemContent\n          data-testid={DSAccordionDataTestid.ITEM_CONTENT_CONTAINER}\n          aria-labelledby={`ds-accordion-header-${value}`}\n          role=\"region\"\n          isDSMobile={isDSMobile}\n          id={`ds-accordion-content-${value}`}\n          {...xstyledContentAttrs}\n          selected={selected}\n          keepContentMounted={keepContentMounted}\n          applyAriaDisabled={applyAriaDisabled}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {children}\n        </StyledItemContent>\n      )}\n    </StyledItemContainer>\n  );\n};\n\nDSAccordionItem.displayName = 'DSAccordionItem';\nconst DSAccordionItemWithSchema = describe(DSAccordionItem);\nDSAccordionItemWithSchema.propTypes = accordionItemPropTypes as ValidationMap<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 */\n/* eslint-disable max-statements */\nimport { useFloatingContext, FloatingWrapper, PopoverArrow } from '@elliemae/ds-floating-context';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useContext, useState } from 'react';\nimport { DSAccordionContext } from '../../DSAccordionCTX.js';\nimport { DSAccordionDataTestid } from '../../constants/index.js';\nimport { accordionItemDefaultProps } from '../../defaultProps.js';\nimport type { DSAccordionT } from '../../react-desc-prop-types.js';\nimport { accordionItemPropTypes } from '../../react-desc-prop-types.js';\nimport { ItemCustomActions } from './ItemCustomActions.js';\nimport { ItemTitle } from './ItemTitle.js';\nimport {\n  StyledItemContainer,\n  StyledItemContent,\n  StyledItemDetails,\n  StyledItemHeader,\n  StyledItemHeaderContainer,\n  StyledTooltipContent,\n} from './styles.js';\nimport { useAccordionItem } from './useAccordionItem.js';\nimport { useIsShowingEllipsis } from './useIsShowingEllipsis.js';\n\nconst DSAccordionItem = (props: DSAccordionT.ItemProps): JSX.Element => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(\n    props,\n    accordionItemDefaultProps,\n  ) as DSAccordionT.InternalItemProps;\n\n  const getOwnerProps = useCallback(() => props, [props]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\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    CustomActions,\n    xStyledPropsContent,\n    keepContentMounted,\n    innerRef,\n    applyAriaDisabled,\n    wrapLabel,\n    ...rest\n  } = propsWithDefaults;\n\n  const { handleOnKeyDown, toggle, selected } = useAccordionItem({ value, disabled, applyAriaDisabled });\n\n  const xstyledAttrs = useGetXstyledProps(rest);\n  const xstyledContentAttrs = useGetXstyledProps(xStyledPropsContent);\n\n  const {\n    allChildrenReferences,\n    actualActiveValue,\n    props: { isDSMobile },\n  } = useContext(DSAccordionContext);\n\n  const [showPopover, setShowPopover] = useState(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n\n  const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();\n  const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();\n\n  const isTooltipOpen = !selected && showPopover;\n  const {\n    refs: floatingRefs,\n    floatingStyles,\n    arrowStyles,\n    context: floatingContext,\n    isOpen: isFloatingOpen,\n  } = useFloatingContext({\n    externallyControlledIsOpen: isTooltipOpen,\n    externalReferenceElement: referenceElement,\n    withoutAnimation: true,\n    customOffset: [0, 14],\n  });\n\n  const handleSummaryClick = useCallback(\n    (e: React.MouseEvent) => {\n      // Prevent the native <details> toggle \u2014 React state (activeValue) is the\n      // single source of truth and drives the `open` attribute below.\n      e.preventDefault();\n      toggle(e);\n    },\n    [toggle],\n  );\n\n  const handleSummaryKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      // A <summary> toggles natively on Enter/Space; intercept so the toggle is\n      // routed through React state exactly like a click (keeps controlled mode,\n      // allowMultipleOpen exclusivity, and onChange firing once).\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        toggle(e);\n        return;\n      }\n      handleOnKeyDown(e, dsIndex);\n    },\n    [toggle, handleOnKeyDown, dsIndex],\n  );\n\n  const handleSummaryMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      // A native <summary> takes focus on mousedown even with tabIndex -1.\n      // Cancel that for disabled items so they cannot be focused by click either,\n      // matching the pre-migration <button disabled> behavior. applyAriaDisabled\n      // stays focusable by design, so it is intentionally not guarded here.\n      if (disabled) e.preventDefault();\n    },\n    [disabled],\n  );\n\n  const handleOnFocus = useCallback(\n    () => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis),\n    [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis],\n  );\n\n  const handleOnBlur = useCallback(() => setShowPopover(false), []);\n\n  const { className, ...globalAttrs } = useGetGlobalAttributes(rest, {\n    onClick: handleSummaryClick,\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const handlers = {\n    onClick: handleSummaryClick,\n    onKeyDown: handleSummaryKeyDown,\n    onMouseDown: handleSummaryMouseDown,\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  };\n\n  const headerId = `ds-accordion-header-${value}`;\n  const contentId = `ds-accordion-content-${value}`;\n  const withCustomActions =\n    (customActions?.length > 0 || renderCustomActions !== undefined || CustomActions !== undefined) && !isDSMobile;\n\n  return (\n    <StyledItemContainer\n      data-testid={DSAccordionDataTestid.ITEM_CONTAINER}\n      className={className}\n      {...xstyledAttrs}\n      disabled={disabled}\n      applyAriaDisabled={applyAriaDisabled}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledItemDetails\n        // Native disclosure state mirrors the React-controlled `selected` flag.\n        // Visibility is still governed by React (content is conditionally\n        // rendered below), so this is for native semantics/consistency only.\n        open={selected}\n        data-testid={DSAccordionDataTestid.ITEM_DETAILS}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledItemHeader\n          withCustomActions={withCustomActions}\n          withSecondaryTitle={secondaryTitle}\n          // A native <summary> is always focusable, so `disabled` (unlike the old\n          // <button disabled>) must be removed from the tab order explicitly.\n          // applyAriaDisabled stays focusable (tabIndex 0) by design.\n          tabIndex={disabled ? -1 : 0}\n          disabled={disabled}\n          data-disabled={disabled}\n          // The trigger is a <summary>; the public innerRef type stays\n          // HTMLButtonElement for backward compatibility, so cast at the boundary.\n          innerRef={mergeRefs(allChildrenReferences[dsIndex], innerRef) as React.Ref<HTMLElement>}\n          isDSMobile={isDSMobile}\n          data-testid={DSAccordionDataTestid.ITEM_HEADER}\n          id={headerId}\n          aria-expanded={selected}\n          aria-disabled={disabled || applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled}\n          aria-controls={contentId}\n          {...handlers}\n          {...globalAttrs}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          <StyledItemHeaderContainer\n            innerRef={(HTMLNode) => setReferenceElement(HTMLNode ?? null)}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <ItemTitle\n              title={title}\n              secondaryTitle={secondaryTitle}\n              value={value}\n              selected={selected}\n              disabled={disabled}\n              applyAriaDisabled={applyAriaDisabled}\n              wrapLabel={wrapLabel}\n              isDSMobile={isDSMobile}\n              IconOpened={IconOpened}\n              IconClosed={IconClosed}\n              onMouseEnter={handleOnFocus}\n              onMouseLeave={handleOnBlur}\n              setPrimaryElement={setPrimaryElement}\n              setSecondaryElement={setSecondaryElement}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            />\n          </StyledItemHeaderContainer>\n          {wrapLabel ? null : (\n            <FloatingWrapper\n              innerRef={floatingRefs.setFloating}\n              isOpen={isFloatingOpen}\n              floatingStyles={floatingStyles}\n              context={floatingContext}\n            >\n              <StyledTooltipContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n                <p>{title}</p>\n                <p> {secondaryTitle}</p>\n              </StyledTooltipContent>\n              <PopoverArrow {...arrowStyles} />\n            </FloatingWrapper>\n          )}\n        </StyledItemHeader>\n        {(selected || keepContentMounted) && (\n          <StyledItemContent\n            data-testid={DSAccordionDataTestid.ITEM_CONTENT_CONTAINER}\n            aria-labelledby={headerId}\n            role=\"region\"\n            isDSMobile={isDSMobile}\n            id={contentId}\n            {...xstyledContentAttrs}\n            selected={selected}\n            keepContentMounted={keepContentMounted}\n            applyAriaDisabled={applyAriaDisabled}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {children}\n          </StyledItemContent>\n        )}\n      </StyledItemDetails>\n      <ItemCustomActions\n        customActions={customActions}\n        renderCustomActions={renderCustomActions}\n        CustomActionsComponent={CustomActions}\n        isDSMobile={isDSMobile}\n        allRefs={allChildrenReferences}\n        actualActiveValue={actualActiveValue}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      />\n    </StyledItemContainer>\n  );\n};\n\nDSAccordionItem.displayName = 'DSAccordionItem';\nconst DSAccordionItemWithSchema = describe(DSAccordionItem);\nDSAccordionItemWithSchema.propTypes = accordionItemPropTypes as ValidationMap<unknown>;\n\nexport { DSAccordionItem, DSAccordionItemWithSchema };\nexport default DSAccordionItem;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/accordionItem/ItemCustomActions.js ADDED Viewed

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { BUTTON_TYPES, DSButtonV2 } from "@elliemae/ds-button-v2";
+import { StyledItemCustomActions } from "./styles.js";
+const ItemCustomActions = ({
+  customActions,
+  renderCustomActions,
+  CustomActionsComponent,
+  isDSMobile,
+  allRefs,
+  actualActiveValue,
+  getOwnerProps,
+  getOwnerPropsArguments
+}) => {
+  if (isDSMobile) return null;
+  if (customActions?.length > 0) {
+    return /* @__PURE__ */ jsx(
+      StyledItemCustomActions,
+      {
+        isDSMobile,
+        getOwnerProps,
+        getOwnerPropsArguments,
+        children: customActions.map(({ onClick, id, ...otherProps }) => /* @__PURE__ */ jsx(
+          DSButtonV2,
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              if (onClick) onClick(e);
+            },
+            ...otherProps,
+            buttonType: BUTTON_TYPES.OUTLINE
+          },
+          id
+        ))
+      }
+    );
+  }
+  if (renderCustomActions || CustomActionsComponent) {
+    return /* @__PURE__ */ jsx(
+      StyledItemCustomActions,
+      {
+        isDSMobile,
+        getOwnerProps,
+        getOwnerPropsArguments,
+        children: CustomActionsComponent !== void 0 ? /* @__PURE__ */ jsx(CustomActionsComponent, { allRefs, actualActiveValue }) : renderCustomActions?.({ allRefs, actualActiveValue })
+      }
+    );
+  }
+  return null;
+};
+export {
+  ItemCustomActions
+};
+//# sourceMappingURL=ItemCustomActions.js.map

package/dist/esm/parts/accordionItem/ItemCustomActions.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/ItemCustomActions.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { BUTTON_TYPES, DSButtonV2 } from '@elliemae/ds-button-v2';\nimport React from 'react';\n\nimport type { DSAccordionT } from '../../react-desc-prop-types.js';\nimport type { DSAccordionInternalsT } from '../../sharedTypes.js';\nimport { StyledItemCustomActions } from './styles.js';\n\ninterface ItemCustomActionsProps {\n  customActions: DSAccordionInternalsT.CustomActions[];\n  renderCustomActions?: DSAccordionT.ItemOptionalProps['renderCustomActions'];\n  CustomActionsComponent?: DSAccordionT.ItemOptionalProps['CustomActions'];\n  isDSMobile: boolean;\n  allRefs: DSAccordionInternalsT.AllChildrenReferences;\n  actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n  getOwnerProps: () => DSAccordionT.ItemProps;\n  getOwnerPropsArguments: () => object;\n}\n\nexport const ItemCustomActions = ({\n  customActions,\n  renderCustomActions,\n  CustomActionsComponent,\n  isDSMobile,\n  allRefs,\n  actualActiveValue,\n  getOwnerProps,\n  getOwnerPropsArguments,\n}: ItemCustomActionsProps): JSX.Element | null => {\n  if (isDSMobile) return null;\n\n  if (customActions?.length > 0) {\n    return (\n      <StyledItemCustomActions\n        isDSMobile={isDSMobile}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {customActions.map(({ onClick, id, ...otherProps }) => (\n          <DSButtonV2\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_TYPES.OUTLINE}\n          />\n        ))}\n      </StyledItemCustomActions>\n    );\n  }\n\n  if (renderCustomActions || CustomActionsComponent) {\n    return (\n      <StyledItemCustomActions\n        isDSMobile={isDSMobile}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {CustomActionsComponent !== undefined ? (\n          <CustomActionsComponent allRefs={allRefs} actualActiveValue={actualActiveValue} />\n        ) : (\n          renderCustomActions?.({ allRefs, actualActiveValue })\n        )}\n      </StyledItemCustomActions>\n    );\n  }\n\n  return null;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsCb;AAtCV,SAAS,cAAc,kBAAkB;AAKzC,SAAS,+BAA+B;AAajC,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkD;AAChD,MAAI,WAAY,QAAO;AAEvB,MAAI,eAAe,SAAS,GAAG;AAC7B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QAEC,wBAAc,IAAI,CAAC,EAAE,SAAS,IAAI,GAAG,WAAW,MAC/C;AAAA,UAAC;AAAA;AAAA,YAEC,SAAS,CAAC,MAA0F;AAClG,gBAAE,gBAAgB;AAClB,kBAAI,QAAS,SAAQ,CAA8C;AAAA,YACrE;AAAA,YACC,GAAG;AAAA,YACJ,YAAY,aAAa;AAAA;AAAA,UANpB;AAAA,QAOP,CACD;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,MAAI,uBAAuB,wBAAwB;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QAEC,qCAA2B,SAC1B,oBAAC,0BAAuB,SAAkB,mBAAsC,IAEhF,sBAAsB,EAAE,SAAS,kBAAkB,CAAC;AAAA;AAAA,IAExD;AAAA,EAEJ;AAEA,SAAO;AACT;",
+  "names": []
+}