@elliemae/ds-accordion 3.70.3-rc.0 → 3.70.3-rc.2

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 (9) hide show
  1. package/dist/cjs/parts/accordionItem/DSAccordionItem.js +90 -92
  2. package/dist/cjs/parts/accordionItem/DSAccordionItem.js.map +2 -2
  3. package/dist/cjs/parts/accordionItem/styles.js +3 -0
  4. package/dist/cjs/parts/accordionItem/styles.js.map +2 -2
  5. package/dist/esm/parts/accordionItem/DSAccordionItem.js +90 -92
  6. package/dist/esm/parts/accordionItem/DSAccordionItem.js.map +2 -2
  7. package/dist/esm/parts/accordionItem/styles.js +3 -0
  8. package/dist/esm/parts/accordionItem/styles.js.map +2 -2
  9. package/package.json +9 -9
package/dist/cjs/parts/accordionItem/DSAccordionItem.js CHANGED
@@ -154,104 +154,85 @@ const DSAccordionItem = (props) => {
154
154
  getOwnerProps,
155
155
  getOwnerPropsArguments,
156
156
  children: [
157
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
157
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
158
158
  import_styles.StyledItemDetails,
159
159
  {
160
160
  open: selected,
161
161
  "data-testid": import_constants.DSAccordionDataTestid.ITEM_DETAILS,
162
162
  getOwnerProps,
163
163
  getOwnerPropsArguments,
164
- children: [
165
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
166
- import_styles.StyledItemHeader,
167
- {
168
- withCustomActions,
169
- withSecondaryTitle: secondaryTitle,
170
- tabIndex: disabled ? -1 : 0,
171
- disabled,
172
- "data-disabled": disabled,
173
- innerRef: (0, import_ds_system.mergeRefs)(allChildrenReferences[dsIndex], innerRef),
174
- isDSMobile,
175
- "data-testid": import_constants.DSAccordionDataTestid.ITEM_HEADER,
176
- id: headerId,
177
- "aria-expanded": selected,
178
- "aria-disabled": disabled || applyAriaDisabled,
179
- applyAriaDisabled,
180
- "aria-controls": contentId,
181
- ...handlers,
182
- ...globalAttrs,
183
- getOwnerProps,
184
- getOwnerPropsArguments,
185
- children: [
186
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
187
- import_styles.StyledItemHeaderContainer,
188
- {
189
- innerRef: (HTMLNode) => setReferenceElement(HTMLNode ?? null),
190
- getOwnerProps,
191
- getOwnerPropsArguments,
192
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
193
- import_ItemTitle.ItemTitle,
194
- {
195
- title,
196
- secondaryTitle,
197
- value,
198
- selected,
199
- disabled,
200
- applyAriaDisabled,
201
- wrapLabel,
202
- isDSMobile,
203
- IconOpened,
204
- IconClosed,
205
- onMouseEnter: handleOnFocus,
206
- onMouseLeave: handleOnBlur,
207
- setPrimaryElement,
208
- setSecondaryElement,
209
- getOwnerProps,
210
- getOwnerPropsArguments
211
- }
212
- )
213
- }
214
- ),
215
- wrapLabel ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
216
- import_ds_floating_context.FloatingWrapper,
217
- {
218
- innerRef: floatingRefs.setFloating,
219
- isOpen: isFloatingOpen,
220
- floatingStyles,
221
- context: floatingContext,
222
- children: [
223
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTooltipContent, { getOwnerProps, getOwnerPropsArguments, children: [
224
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: title }),
225
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
226
- " ",
227
- secondaryTitle
228
- ] })
229
- ] }),
230
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
231
- ]
232
- }
233
- )
234
- ]
235
- }
236
- ),
237
- (selected || keepContentMounted) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
238
- import_styles.StyledItemContent,
239
- {
240
- "data-testid": import_constants.DSAccordionDataTestid.ITEM_CONTENT_CONTAINER,
241
- "aria-labelledby": headerId,
242
- role: "region",
243
- isDSMobile,
244
- id: contentId,
245
- ...xstyledContentAttrs,
246
- selected,
247
- keepContentMounted,
248
- applyAriaDisabled,
249
- getOwnerProps,
250
- getOwnerPropsArguments,
251
- children
252
- }
253
- )
254
- ]
164
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
165
+ import_styles.StyledItemHeader,
166
+ {
167
+ withCustomActions,
168
+ withSecondaryTitle: secondaryTitle,
169
+ tabIndex: disabled ? -1 : 0,
170
+ disabled,
171
+ "data-disabled": disabled,
172
+ innerRef: (0, import_ds_system.mergeRefs)(allChildrenReferences[dsIndex], innerRef),
173
+ isDSMobile,
174
+ "data-testid": import_constants.DSAccordionDataTestid.ITEM_HEADER,
175
+ id: headerId,
176
+ "aria-expanded": selected,
177
+ "aria-disabled": disabled || applyAriaDisabled,
178
+ applyAriaDisabled,
179
+ "aria-controls": contentId,
180
+ ...handlers,
181
+ ...globalAttrs,
182
+ getOwnerProps,
183
+ getOwnerPropsArguments,
184
+ children: [
185
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
186
+ import_styles.StyledItemHeaderContainer,
187
+ {
188
+ innerRef: (HTMLNode) => setReferenceElement(HTMLNode ?? null),
189
+ getOwnerProps,
190
+ getOwnerPropsArguments,
191
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
192
+ import_ItemTitle.ItemTitle,
193
+ {
194
+ title,
195
+ secondaryTitle,
196
+ value,
197
+ selected,
198
+ disabled,
199
+ applyAriaDisabled,
200
+ wrapLabel,
201
+ isDSMobile,
202
+ IconOpened,
203
+ IconClosed,
204
+ onMouseEnter: handleOnFocus,
205
+ onMouseLeave: handleOnBlur,
206
+ setPrimaryElement,
207
+ setSecondaryElement,
208
+ getOwnerProps,
209
+ getOwnerPropsArguments
210
+ }
211
+ )
212
+ }
213
+ ),
214
+ wrapLabel ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
215
+ import_ds_floating_context.FloatingWrapper,
216
+ {
217
+ innerRef: floatingRefs.setFloating,
218
+ isOpen: isFloatingOpen,
219
+ floatingStyles,
220
+ context: floatingContext,
221
+ children: [
222
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTooltipContent, { getOwnerProps, getOwnerPropsArguments, children: [
223
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: title }),
224
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
225
+ " ",
226
+ secondaryTitle
227
+ ] })
228
+ ] }),
229
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
230
+ ]
231
+ }
232
+ )
233
+ ]
234
+ }
235
+ )
255
236
  }
256
237
  ),
257
238
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -266,6 +247,23 @@ const DSAccordionItem = (props) => {
266
247
  getOwnerProps,
267
248
  getOwnerPropsArguments
268
249
  }
250
+ ),
251
+ (selected || keepContentMounted) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
252
+ import_styles.StyledItemContent,
253
+ {
254
+ "data-testid": import_constants.DSAccordionDataTestid.ITEM_CONTENT_CONTAINER,
255
+ "aria-labelledby": headerId,
256
+ role: "region",
257
+ isDSMobile,
258
+ id: contentId,
259
+ ...xstyledContentAttrs,
260
+ selected,
261
+ keepContentMounted,
262
+ applyAriaDisabled,
263
+ getOwnerProps,
264
+ getOwnerPropsArguments,
265
+ children
266
+ }
269
267
  )
270
268
  ]
271
269
  }
package/dist/cjs/parts/accordionItem/DSAccordionItem.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/accordionItem/DSAccordionItem.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* 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, outside <details>), so this is for native\n // 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 </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 {/* Content is rendered after the custom actions (not inside <details>) so\n the DOM order matches the visual order and Tab goes\n header -> actions -> content, as before the native-engine migration. */}\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 </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", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/accordionItem/styles.js CHANGED
@@ -78,6 +78,9 @@ const StyledItemDetails = (0, import_ds_system.styled)("details", {
78
78
  slot: import_constants.DSAccordionItemSlots.ITEM_DETAILS
79
79
  })`
80
80
  display: contents;
81
+ &::details-content {
82
+ grid-area: content;
83
+ }
81
84
  `;
82
85
  const StyledItemHeader = (0, import_ds_system.styled)("summary", {
83
86
  name: import_constants.DSAccordionName,
package/dist/cjs/parts/accordionItem/styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/accordionItem/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSAccordionName, DSAccordionItemSlots } from '../../constants/index.js';\ninterface StyledItemHeaderPropsT {\n withCustomActions: boolean;\n withSecondaryTitle?: string;\n isDSMobile?: boolean;\n disabled?: boolean;\n applyAriaDisabled: boolean;\n}\n\ninterface StyledItemTitlesPropsT {\n withSecondaryTitle?: string;\n isDSMobile?: boolean;\n selected: boolean;\n}\n\ninterface StyledPrimaryTitlePropsT {\n disabled: boolean;\n applyAriaDisabled: boolean;\n isDSMobile?: boolean;\n selected: boolean;\n withSecondaryTitle: boolean;\n wrapLabel: boolean;\n}\n\ninterface StyledItemContentPropsT {\n isDSMobile?: boolean;\n selected?: boolean;\n keepContentMounted: boolean;\n applyAriaDisabled: boolean;\n}\n\ninterface StyledSecondaryTitlePropsT {\n disabled: boolean;\n applyAriaDisabled: boolean;\n selected: boolean;\n wrapLabel: boolean;\n}\n\ninterface StyledItemAddonPropsT {\n disabled: boolean;\n applyAriaDisabled: boolean;\n isDSMobile?: boolean;\n}\n\ninterface StyledItemContainerPropsT {\n disabled: boolean;\n applyAriaDisabled: boolean;\n}\n\ninterface StyledItemCustomActionsPropsT {\n isDSMobile?: boolean;\n}\n\nexport const StyledItemContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_CONTAINER,\n})<StyledItemContainerPropsT>`\n display: grid;\n grid-template-columns: minmax(0, 1fr) max-content;\n grid-template-areas:\n 'heading actions'\n 'content content';\n border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n align-items: center;\n min-width: 240px;\n position: relative;\n\n &::before {\n content: '';\n grid-area: 1 / 1 / 2 / -1;\n align-self: stretch;\n justify-self: stretch;\n border-radius: 2px;\n pointer-events: none;\n box-sizing: border-box;\n }\n &:hover::before {\n ${({ disabled, applyAriaDisabled, theme }) =>\n !disabled && !applyAriaDisabled ? `background: ${theme.colors.brand[200]};` : ``}\n }\n\n ${xStyledCommonProps};\n`;\n\n// The `<details>` wrapper is styled with `display: contents` so its children\n// (the summary trigger + the content panel) participate directly in the item\n// container's grid, exactly as the button/content siblings did before the\n// native-engine migration. It carries the additive ITEM_DETAILS slot.\nexport const StyledItemDetails = styled('details', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_DETAILS,\n})`\n display: contents;\n`;\n\n// Trigger element. Migrated from <button> to <summary> to adopt the native\n// disclosure pattern. Keeps the ITEM_HEADER slot/testid and the focus-ring\n// treatment. Summary defaults (list marker, default cursor) are reset here.\nexport const StyledItemHeader = styled('summary', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER,\n})<StyledItemHeaderPropsT>`\n grid-area: heading;\n display: flex;\n min-height: ${({ theme, withSecondaryTitle, isDSMobile }) =>\n isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};\n width: 100%;\n align-items: center;\n border: none;\n outline: none;\n background: none;\n list-style: none;\n position: relative;\n &::-webkit-details-marker {\n display: none;\n }\n &:hover {\n cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : 'pointer')};\n }\n padding: ${({ isDSMobile }) => (isDSMobile ? `0 16px` : `0`)};\n &:focus {\n &:after {\n position: absolute;\n content: '';\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n pointer-events: none;\n z-index: 2;\n ${({ withCustomActions }) =>\n withCustomActions ? `border-right: none; border-radius: 2px 0 0 2px;` : `border-radius: 2px;`}\n }\n }\n`;\n\nexport const StyledItemContent = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_CONTENT_CONTAINER,\n})<StyledItemContentPropsT>`\n grid-area: content;\n padding: ${({ isDSMobile }) => (isDSMobile ? `3px 16px 24px 16px` : '16px 20px')};\n ${({ selected, keepContentMounted }) => {\n if (selected) return '';\n return keepContentMounted ? 'visibility: hidden; height: 0px; padding: 0px;' : '';\n }}\n color: ${({ applyAriaDisabled, theme }) =>\n applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n ${xStyledCommonProps};\n`;\n\nexport const StyledItemAddon = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_ADDON,\n})<StyledItemAddonPropsT>`\n height: 100%;\n display: grid;\n place-items: flex-start;\n & .em-ds-icon svg {\n fill: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[200] : theme.colors.brand[800]};\n }\n`;\n\nexport const StyledItemTitles = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_TITLE_CONTAINER,\n})<StyledItemTitlesPropsT>`\n display: grid;\n grid-gap: ${({ theme }) => theme.space.xxxs};\n grid-template-columns: 100%;\n width: 100%;\n align-content: center;\n`;\n\nexport const StyledPrimaryTitle = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_PRIMARY_TITLE,\n})<StyledPrimaryTitlePropsT>`\n margin: 0;\n font-size: 16px;\n line-height: 1.125;\n text-align: left;\n text-overflow: ellipsis;\n min-height: ${({ theme }) => theme.space.xs};\n color: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n font-weight: ${({ theme, isDSMobile }) => (isDSMobile ? theme.fontWeights.semibold : theme.fontWeights.regular)};\n ${({ selected }) =>\n selected\n ? `word-break: break-word;`\n : `\n overflow: hidden;\n white-space: nowrap;\n `};\n ${({ wrapLabel }) =>\n wrapLabel &&\n `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`};\n width: 100%;\n display: block;\n`;\n\nexport const StyledSecondaryTitle = styled('span', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_SECONDARY_TITLE,\n})<StyledSecondaryTitlePropsT>`\n margin: 0;\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n line-height: 1.273;\n text-align: left;\n min-height: 12px;\n color: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n text-overflow: ellipsis;\n ${({ selected }) =>\n selected\n ? `word-break: break-word;`\n : `\n overflow: hidden;\n white-space: nowrap;\n width: 100%;\n display: block;`}\n ${({ wrapLabel }) =>\n wrapLabel &&\n `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`};\n`;\n\nexport const StyledItemCustomActions = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_CUSTOM_ACTIONS_CONTAINER,\n})<StyledItemCustomActionsPropsT>`\n grid-area: actions;\n position: relative;\n align-self: stretch;\n z-index: 1;\n display: grid;\n grid-auto-flow: column;\n place-items: center;\n grid-gap: ${({ theme }) => theme.space.xxs};\n margin: ${({ theme, isDSMobile }) => (isDSMobile ? `0 ${theme.space.xs}` : `0 20px 0 0`)};\n justify-content: flex-end;\n min-height: 28px;\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: -20px;\n border: 2px solid transparent;\n border-left: none;\n border-radius: 0 2px 2px 0;\n pointer-events: none;\n z-index: 2;\n }\n\n /* Right half of the focus ring lights up when the sibling summary (inside the\n display:contents <details>) is focused. Replaces the pre-migration\n header-container:focus-within selector now that the trigger moved into\n <details>. */\n ${StyledItemDetails}:focus-within + &::after {\n border-color: ${({ theme }) => theme.colors.brand[700]};\n }\n`;\n\n// Heading wrapper. Now nested inside the <summary> trigger (native disclosure\n// pattern places the heading inside the summary). Consumers still apply heading\n// semantics through the dsAccordionItemHeaderContainer slot prop\n// (role=\"heading\" + aria-level), exactly as before the migration.\nexport const StyledItemHeaderContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_CONTAINER,\n})`\n position: relative;\n align-self: stretch;\n min-width: 0;\n width: 100%;\n display: flex;\n align-items: center;\n`;\n\nexport const StyledTooltipContent = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_TOOLTIP,\n})`\n padding: 8px;\n width: 250px;\n background: white;\n display: grid;\n gap: ${({ theme }) => theme.space.xxs};\n\n p {\n margin: 0;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSAccordionName, DSAccordionItemSlots } from '../../constants/index.js';\ninterface StyledItemHeaderPropsT {\n withCustomActions: boolean;\n withSecondaryTitle?: string;\n isDSMobile?: boolean;\n disabled?: boolean;\n applyAriaDisabled: boolean;\n}\n\ninterface StyledItemTitlesPropsT {\n withSecondaryTitle?: string;\n isDSMobile?: boolean;\n selected: boolean;\n}\n\ninterface StyledPrimaryTitlePropsT {\n disabled: boolean;\n applyAriaDisabled: boolean;\n isDSMobile?: boolean;\n selected: boolean;\n withSecondaryTitle: boolean;\n wrapLabel: boolean;\n}\n\ninterface StyledItemContentPropsT {\n isDSMobile?: boolean;\n selected?: boolean;\n keepContentMounted: boolean;\n applyAriaDisabled: boolean;\n}\n\ninterface StyledSecondaryTitlePropsT {\n disabled: boolean;\n applyAriaDisabled: boolean;\n selected: boolean;\n wrapLabel: boolean;\n}\n\ninterface StyledItemAddonPropsT {\n disabled: boolean;\n applyAriaDisabled: boolean;\n isDSMobile?: boolean;\n}\n\ninterface StyledItemContainerPropsT {\n disabled: boolean;\n applyAriaDisabled: boolean;\n}\n\ninterface StyledItemCustomActionsPropsT {\n isDSMobile?: boolean;\n}\n\nexport const StyledItemContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_CONTAINER,\n})<StyledItemContainerPropsT>`\n display: grid;\n grid-template-columns: minmax(0, 1fr) max-content;\n grid-template-areas:\n 'heading actions'\n 'content content';\n border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n align-items: center;\n min-width: 240px;\n position: relative;\n\n &::before {\n content: '';\n grid-area: 1 / 1 / 2 / -1;\n align-self: stretch;\n justify-self: stretch;\n border-radius: 2px;\n pointer-events: none;\n box-sizing: border-box;\n }\n &:hover::before {\n ${({ disabled, applyAriaDisabled, theme }) =>\n !disabled && !applyAriaDisabled ? `background: ${theme.colors.brand[200]};` : ``}\n }\n\n ${xStyledCommonProps};\n`;\n\n// The `<details>` wrapper is styled with `display: contents` so the summary\n// trigger participates directly in the item container's grid, exactly as the\n// button did before the native-engine migration. It carries the additive\n// ITEM_DETAILS slot. The content panel is a sibling rendered after the custom\n// actions, not a child: the UA wraps every non-summary child of <details> in\n// the `::details-content` pseudo (a real block box), which would take it out of\n// the grid and put it before the actions in the Tab order.\n// That pseudo is still generated (empty) and becomes a grid item, so it is\n// pinned to the content area to keep it from auto-placing into an extra row.\nexport const StyledItemDetails = styled('details', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_DETAILS,\n})`\n display: contents;\n &::details-content {\n grid-area: content;\n }\n`;\n\n// Trigger element. Migrated from <button> to <summary> to adopt the native\n// disclosure pattern. Keeps the ITEM_HEADER slot/testid and the focus-ring\n// treatment. Summary defaults (list marker, default cursor) are reset here.\nexport const StyledItemHeader = styled('summary', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER,\n})<StyledItemHeaderPropsT>`\n grid-area: heading;\n display: flex;\n min-height: ${({ theme, withSecondaryTitle, isDSMobile }) =>\n isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};\n width: 100%;\n align-items: center;\n border: none;\n outline: none;\n background: none;\n list-style: none;\n position: relative;\n &::-webkit-details-marker {\n display: none;\n }\n &:hover {\n cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : 'pointer')};\n }\n padding: ${({ isDSMobile }) => (isDSMobile ? `0 16px` : `0`)};\n &:focus {\n &:after {\n position: absolute;\n content: '';\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n pointer-events: none;\n z-index: 2;\n ${({ withCustomActions }) =>\n withCustomActions ? `border-right: none; border-radius: 2px 0 0 2px;` : `border-radius: 2px;`}\n }\n }\n`;\n\nexport const StyledItemContent = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_CONTENT_CONTAINER,\n})<StyledItemContentPropsT>`\n grid-area: content;\n padding: ${({ isDSMobile }) => (isDSMobile ? `3px 16px 24px 16px` : '16px 20px')};\n ${({ selected, keepContentMounted }) => {\n if (selected) return '';\n return keepContentMounted ? 'visibility: hidden; height: 0px; padding: 0px;' : '';\n }}\n color: ${({ applyAriaDisabled, theme }) =>\n applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n ${xStyledCommonProps};\n`;\n\nexport const StyledItemAddon = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_ADDON,\n})<StyledItemAddonPropsT>`\n height: 100%;\n display: grid;\n place-items: flex-start;\n & .em-ds-icon svg {\n fill: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[200] : theme.colors.brand[800]};\n }\n`;\n\nexport const StyledItemTitles = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_TITLE_CONTAINER,\n})<StyledItemTitlesPropsT>`\n display: grid;\n grid-gap: ${({ theme }) => theme.space.xxxs};\n grid-template-columns: 100%;\n width: 100%;\n align-content: center;\n`;\n\nexport const StyledPrimaryTitle = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_PRIMARY_TITLE,\n})<StyledPrimaryTitlePropsT>`\n margin: 0;\n font-size: 16px;\n line-height: 1.125;\n text-align: left;\n text-overflow: ellipsis;\n min-height: ${({ theme }) => theme.space.xs};\n color: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n font-weight: ${({ theme, isDSMobile }) => (isDSMobile ? theme.fontWeights.semibold : theme.fontWeights.regular)};\n ${({ selected }) =>\n selected\n ? `word-break: break-word;`\n : `\n overflow: hidden;\n white-space: nowrap;\n `};\n ${({ wrapLabel }) =>\n wrapLabel &&\n `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`};\n width: 100%;\n display: block;\n`;\n\nexport const StyledSecondaryTitle = styled('span', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_SECONDARY_TITLE,\n})<StyledSecondaryTitlePropsT>`\n margin: 0;\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n line-height: 1.273;\n text-align: left;\n min-height: 12px;\n color: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n text-overflow: ellipsis;\n ${({ selected }) =>\n selected\n ? `word-break: break-word;`\n : `\n overflow: hidden;\n white-space: nowrap;\n width: 100%;\n display: block;`}\n ${({ wrapLabel }) =>\n wrapLabel &&\n `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`};\n`;\n\nexport const StyledItemCustomActions = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_CUSTOM_ACTIONS_CONTAINER,\n})<StyledItemCustomActionsPropsT>`\n grid-area: actions;\n position: relative;\n align-self: stretch;\n z-index: 1;\n display: grid;\n grid-auto-flow: column;\n place-items: center;\n grid-gap: ${({ theme }) => theme.space.xxs};\n margin: ${({ theme, isDSMobile }) => (isDSMobile ? `0 ${theme.space.xs}` : `0 20px 0 0`)};\n justify-content: flex-end;\n min-height: 28px;\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: -20px;\n border: 2px solid transparent;\n border-left: none;\n border-radius: 0 2px 2px 0;\n pointer-events: none;\n z-index: 2;\n }\n\n /* Right half of the focus ring lights up when the sibling summary (inside the\n display:contents <details>) is focused. Replaces the pre-migration\n header-container:focus-within selector now that the trigger moved into\n <details>. */\n ${StyledItemDetails}:focus-within + &::after {\n border-color: ${({ theme }) => theme.colors.brand[700]};\n }\n`;\n\n// Heading wrapper. Now nested inside the <summary> trigger (native disclosure\n// pattern places the heading inside the summary). Consumers still apply heading\n// semantics through the dsAccordionItemHeaderContainer slot prop\n// (role=\"heading\" + aria-level), exactly as before the migration.\nexport const StyledItemHeaderContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_CONTAINER,\n})`\n position: relative;\n align-self: stretch;\n min-width: 0;\n width: 100%;\n display: flex;\n align-items: center;\n`;\n\nexport const StyledTooltipContent = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_TOOLTIP,\n})`\n padding: 8px;\n width: 250px;\n background: white;\n display: grid;\n gap: ${({ theme }) => theme.space.xxs};\n\n p {\n margin: 0;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA2C;AAC3C,uBAAsD;AAqD/C,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,sCAAqB;AAC7B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAM4B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAe/D,CAAC,EAAE,UAAU,mBAAmB,MAAM,MACtC,CAAC,YAAY,CAAC,oBAAoB,eAAe,MAAM,OAAO,MAAM,GAAG,CAAC,MAAM,EAAE;AAAA;AAAA;AAAA,IAGlF,mCAAkB;AAAA;AAYf,MAAM,wBAAoB,yBAAO,WAAW;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,sCAAqB;AAC7B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAUM,MAAM,uBAAmB,yBAAO,WAAW;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,sCAAqB;AAC7B,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,OAAO,oBAAoB,WAAW,MACrD,aAAa,SAAS,GAAG,qBAAqB,MAAM,MAAM,IAAI,MAAM,MAAM,CAAC,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAYnE,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,gBAAgB,SAAU;AAAA;AAAA,aAEjG,CAAC,EAAE,WAAW,MAAO,aAAa,WAAW,GAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BASpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,QAGxD,CAAC,EAAE,kBAAkB,MACrB,oBAAoB,oDAAoD,qBAAqB;AAAA;AAAA;AAAA;AAK9F,MAAM,wBAAoB,yBAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,sCAAqB;AAC7B,CAAC;AAAA;AAAA,aAEY,CAAC,EAAE,WAAW,MAAO,aAAa,uBAAuB,WAAY;AAAA,IAC9E,CAAC,EAAE,UAAU,mBAAmB,MAAM;AACtC,MAAI,SAAU,QAAO;AACrB,SAAO,qBAAqB,mDAAmD;AACjF,CAAC;AAAA,WACQ,CAAC,EAAE,mBAAmB,MAAM,MACnC,oBAAoB,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,IACzE,mCAAkB;AAAA;AAGf,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,sCAAqB;AAC7B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAKW,CAAC,EAAE,UAAU,mBAAmB,MAAM,MAC5C,YAAY,oBAAoB,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAIlF,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,sCAAqB;AAC7B,CAAC;AAAA;AAAA,cAEa,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAMtC,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,sCAAqB;AAC7B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMe,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,WAClC,CAAC,EAAE,UAAU,mBAAmB,MAAM,MAC7C,YAAY,oBAAoB,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,iBACxE,CAAC,EAAE,OAAO,WAAW,MAAO,aAAa,MAAM,YAAY,WAAW,MAAM,YAAY,OAAQ;AAAA,IAC7G,CAAC,EAAE,SAAS,MACZ,WACI,4BACA;AAAA;AAAA;AAAA,IAGJ;AAAA,IACA,CAAC,EAAE,UAAU,MACb,aACA;AAAA;AAAA;AAAA;AAAA,CAIH;AAAA;AAAA;AAAA;AAKM,MAAM,2BAAuB,yBAAO,QAAQ;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,sCAAqB;AAC7B,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,WAI7C,CAAC,EAAE,UAAU,mBAAmB,MAAM,MAC7C,YAAY,oBAAoB,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,IAErF,CAAC,EAAE,SAAS,MACZ,WACI,4BACA;AAAA;AAAA;AAAA;AAAA,kBAIU;AAAA,IACd,CAAC,EAAE,UAAU,MACb,aACA;AAAA;AAAA;AAAA;AAAA,CAIH;AAAA;AAGM,MAAM,8BAA0B,yBAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,sCAAqB;AAC7B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQa,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA,YAChC,CAAC,EAAE,OAAO,WAAW,MAAO,aAAa,KAAK,MAAM,MAAM,EAAE,KAAK,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAsBtF,iBAAiB;AAAA,oBACD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAQnD,MAAM,gCAA4B,yBAAO,OAAO;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,sCAAqB;AAC7B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASM,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,sCAAqB;AAC7B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,SAKQ,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/accordionItem/DSAccordionItem.js CHANGED
@@ -131,104 +131,85 @@ const DSAccordionItem = (props) => {
131
131
  getOwnerProps,
132
132
  getOwnerPropsArguments,
133
133
  children: [
134
- /* @__PURE__ */ jsxs(
134
+ /* @__PURE__ */ jsx(
135
135
  StyledItemDetails,
136
136
  {
137
137
  open: selected,
138
138
  "data-testid": DSAccordionDataTestid.ITEM_DETAILS,
139
139
  getOwnerProps,
140
140
  getOwnerPropsArguments,
141
- children: [
142
- /* @__PURE__ */ jsxs(
143
- StyledItemHeader,
144
- {
145
- withCustomActions,
146
- withSecondaryTitle: secondaryTitle,
147
- tabIndex: disabled ? -1 : 0,
148
- disabled,
149
- "data-disabled": disabled,
150
- innerRef: mergeRefs(allChildrenReferences[dsIndex], innerRef),
151
- isDSMobile,
152
- "data-testid": DSAccordionDataTestid.ITEM_HEADER,
153
- id: headerId,
154
- "aria-expanded": selected,
155
- "aria-disabled": disabled || applyAriaDisabled,
156
- applyAriaDisabled,
157
- "aria-controls": contentId,
158
- ...handlers,
159
- ...globalAttrs,
160
- getOwnerProps,
161
- getOwnerPropsArguments,
162
- children: [
163
- /* @__PURE__ */ jsx(
164
- StyledItemHeaderContainer,
165
- {
166
- innerRef: (HTMLNode) => setReferenceElement(HTMLNode ?? null),
167
- getOwnerProps,
168
- getOwnerPropsArguments,
169
- children: /* @__PURE__ */ jsx(
170
- ItemTitle,
171
- {
172
- title,
173
- secondaryTitle,
174
- value,
175
- selected,
176
- disabled,
177
- applyAriaDisabled,
178
- wrapLabel,
179
- isDSMobile,
180
- IconOpened,
181
- IconClosed,
182
- onMouseEnter: handleOnFocus,
183
- onMouseLeave: handleOnBlur,
184
- setPrimaryElement,
185
- setSecondaryElement,
186
- getOwnerProps,
187
- getOwnerPropsArguments
188
- }
189
- )
190
- }
191
- ),
192
- wrapLabel ? null : /* @__PURE__ */ jsxs(
193
- FloatingWrapper,
194
- {
195
- innerRef: floatingRefs.setFloating,
196
- isOpen: isFloatingOpen,
197
- floatingStyles,
198
- context: floatingContext,
199
- children: [
200
- /* @__PURE__ */ jsxs(StyledTooltipContent, { getOwnerProps, getOwnerPropsArguments, children: [
201
- /* @__PURE__ */ jsx("p", { children: title }),
202
- /* @__PURE__ */ jsxs("p", { children: [
203
- " ",
204
- secondaryTitle
205
- ] })
206
- ] }),
207
- /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
208
- ]
209
- }
210
- )
211
- ]
212
- }
213
- ),
214
- (selected || keepContentMounted) && /* @__PURE__ */ jsx(
215
- StyledItemContent,
216
- {
217
- "data-testid": DSAccordionDataTestid.ITEM_CONTENT_CONTAINER,
218
- "aria-labelledby": headerId,
219
- role: "region",
220
- isDSMobile,
221
- id: contentId,
222
- ...xstyledContentAttrs,
223
- selected,
224
- keepContentMounted,
225
- applyAriaDisabled,
226
- getOwnerProps,
227
- getOwnerPropsArguments,
228
- children
229
- }
230
- )
231
- ]
141
+ children: /* @__PURE__ */ jsxs(
142
+ StyledItemHeader,
143
+ {
144
+ withCustomActions,
145
+ withSecondaryTitle: secondaryTitle,
146
+ tabIndex: disabled ? -1 : 0,
147
+ disabled,
148
+ "data-disabled": disabled,
149
+ innerRef: mergeRefs(allChildrenReferences[dsIndex], innerRef),
150
+ isDSMobile,
151
+ "data-testid": DSAccordionDataTestid.ITEM_HEADER,
152
+ id: headerId,
153
+ "aria-expanded": selected,
154
+ "aria-disabled": disabled || applyAriaDisabled,
155
+ applyAriaDisabled,
156
+ "aria-controls": contentId,
157
+ ...handlers,
158
+ ...globalAttrs,
159
+ getOwnerProps,
160
+ getOwnerPropsArguments,
161
+ children: [
162
+ /* @__PURE__ */ jsx(
163
+ StyledItemHeaderContainer,
164
+ {
165
+ innerRef: (HTMLNode) => setReferenceElement(HTMLNode ?? null),
166
+ getOwnerProps,
167
+ getOwnerPropsArguments,
168
+ children: /* @__PURE__ */ jsx(
169
+ ItemTitle,
170
+ {
171
+ title,
172
+ secondaryTitle,
173
+ value,
174
+ selected,
175
+ disabled,
176
+ applyAriaDisabled,
177
+ wrapLabel,
178
+ isDSMobile,
179
+ IconOpened,
180
+ IconClosed,
181
+ onMouseEnter: handleOnFocus,
182
+ onMouseLeave: handleOnBlur,
183
+ setPrimaryElement,
184
+ setSecondaryElement,
185
+ getOwnerProps,
186
+ getOwnerPropsArguments
187
+ }
188
+ )
189
+ }
190
+ ),
191
+ wrapLabel ? null : /* @__PURE__ */ jsxs(
192
+ FloatingWrapper,
193
+ {
194
+ innerRef: floatingRefs.setFloating,
195
+ isOpen: isFloatingOpen,
196
+ floatingStyles,
197
+ context: floatingContext,
198
+ children: [
199
+ /* @__PURE__ */ jsxs(StyledTooltipContent, { getOwnerProps, getOwnerPropsArguments, children: [
200
+ /* @__PURE__ */ jsx("p", { children: title }),
201
+ /* @__PURE__ */ jsxs("p", { children: [
202
+ " ",
203
+ secondaryTitle
204
+ ] })
205
+ ] }),
206
+ /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
207
+ ]
208
+ }
209
+ )
210
+ ]
211
+ }
212
+ )
232
213
  }
233
214
  ),
234
215
  /* @__PURE__ */ jsx(
@@ -243,6 +224,23 @@ const DSAccordionItem = (props) => {
243
224
  getOwnerProps,
244
225
  getOwnerPropsArguments
245
226
  }
227
+ ),
228
+ (selected || keepContentMounted) && /* @__PURE__ */ jsx(
229
+ StyledItemContent,
230
+ {
231
+ "data-testid": DSAccordionDataTestid.ITEM_CONTENT_CONTAINER,
232
+ "aria-labelledby": headerId,
233
+ role: "region",
234
+ isDSMobile,
235
+ id: contentId,
236
+ ...xstyledContentAttrs,
237
+ selected,
238
+ keepContentMounted,
239
+ applyAriaDisabled,
240
+ getOwnerProps,
241
+ getOwnerPropsArguments,
242
+ children
243
+ }
246
244
  )
247
245
  ]
248
246
  }
package/dist/esm/parts/accordionItem/DSAccordionItem.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/DSAccordionItem.tsx"],
4
- "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"],
5
- "mappings": "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",
4
+ "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, outside <details>), so this is for native\n // 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 </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 {/* Content is rendered after the custom actions (not inside <details>) so\n the DOM order matches the visual order and Tab goes\n header -> actions -> content, as before the native-engine migration. */}\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 </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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/accordionItem/styles.js CHANGED
@@ -35,6 +35,9 @@ const StyledItemDetails = styled("details", {
35
35
  slot: DSAccordionItemSlots.ITEM_DETAILS
36
36
  })`
37
37
  display: contents;
38
+ &::details-content {
39
+ grid-area: content;
40
+ }
38
41
  `;
39
42
  const StyledItemHeader = styled("summary", {
40
43
  name: DSAccordionName,
package/dist/esm/parts/accordionItem/styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/styles.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSAccordionName, DSAccordionItemSlots } from '../../constants/index.js';\ninterface StyledItemHeaderPropsT {\n withCustomActions: boolean;\n withSecondaryTitle?: string;\n isDSMobile?: boolean;\n disabled?: boolean;\n applyAriaDisabled: boolean;\n}\n\ninterface StyledItemTitlesPropsT {\n withSecondaryTitle?: string;\n isDSMobile?: boolean;\n selected: boolean;\n}\n\ninterface StyledPrimaryTitlePropsT {\n disabled: boolean;\n applyAriaDisabled: boolean;\n isDSMobile?: boolean;\n selected: boolean;\n withSecondaryTitle: boolean;\n wrapLabel: boolean;\n}\n\ninterface StyledItemContentPropsT {\n isDSMobile?: boolean;\n selected?: boolean;\n keepContentMounted: boolean;\n applyAriaDisabled: boolean;\n}\n\ninterface StyledSecondaryTitlePropsT {\n disabled: boolean;\n applyAriaDisabled: boolean;\n selected: boolean;\n wrapLabel: boolean;\n}\n\ninterface StyledItemAddonPropsT {\n disabled: boolean;\n applyAriaDisabled: boolean;\n isDSMobile?: boolean;\n}\n\ninterface StyledItemContainerPropsT {\n disabled: boolean;\n applyAriaDisabled: boolean;\n}\n\ninterface StyledItemCustomActionsPropsT {\n isDSMobile?: boolean;\n}\n\nexport const StyledItemContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_CONTAINER,\n})<StyledItemContainerPropsT>`\n display: grid;\n grid-template-columns: minmax(0, 1fr) max-content;\n grid-template-areas:\n 'heading actions'\n 'content content';\n border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n align-items: center;\n min-width: 240px;\n position: relative;\n\n &::before {\n content: '';\n grid-area: 1 / 1 / 2 / -1;\n align-self: stretch;\n justify-self: stretch;\n border-radius: 2px;\n pointer-events: none;\n box-sizing: border-box;\n }\n &:hover::before {\n ${({ disabled, applyAriaDisabled, theme }) =>\n !disabled && !applyAriaDisabled ? `background: ${theme.colors.brand[200]};` : ``}\n }\n\n ${xStyledCommonProps};\n`;\n\n// The `<details>` wrapper is styled with `display: contents` so its children\n// (the summary trigger + the content panel) participate directly in the item\n// container's grid, exactly as the button/content siblings did before the\n// native-engine migration. It carries the additive ITEM_DETAILS slot.\nexport const StyledItemDetails = styled('details', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_DETAILS,\n})`\n display: contents;\n`;\n\n// Trigger element. Migrated from <button> to <summary> to adopt the native\n// disclosure pattern. Keeps the ITEM_HEADER slot/testid and the focus-ring\n// treatment. Summary defaults (list marker, default cursor) are reset here.\nexport const StyledItemHeader = styled('summary', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER,\n})<StyledItemHeaderPropsT>`\n grid-area: heading;\n display: flex;\n min-height: ${({ theme, withSecondaryTitle, isDSMobile }) =>\n isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};\n width: 100%;\n align-items: center;\n border: none;\n outline: none;\n background: none;\n list-style: none;\n position: relative;\n &::-webkit-details-marker {\n display: none;\n }\n &:hover {\n cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : 'pointer')};\n }\n padding: ${({ isDSMobile }) => (isDSMobile ? `0 16px` : `0`)};\n &:focus {\n &:after {\n position: absolute;\n content: '';\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n pointer-events: none;\n z-index: 2;\n ${({ withCustomActions }) =>\n withCustomActions ? `border-right: none; border-radius: 2px 0 0 2px;` : `border-radius: 2px;`}\n }\n }\n`;\n\nexport const StyledItemContent = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_CONTENT_CONTAINER,\n})<StyledItemContentPropsT>`\n grid-area: content;\n padding: ${({ isDSMobile }) => (isDSMobile ? `3px 16px 24px 16px` : '16px 20px')};\n ${({ selected, keepContentMounted }) => {\n if (selected) return '';\n return keepContentMounted ? 'visibility: hidden; height: 0px; padding: 0px;' : '';\n }}\n color: ${({ applyAriaDisabled, theme }) =>\n applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n ${xStyledCommonProps};\n`;\n\nexport const StyledItemAddon = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_ADDON,\n})<StyledItemAddonPropsT>`\n height: 100%;\n display: grid;\n place-items: flex-start;\n & .em-ds-icon svg {\n fill: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[200] : theme.colors.brand[800]};\n }\n`;\n\nexport const StyledItemTitles = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_TITLE_CONTAINER,\n})<StyledItemTitlesPropsT>`\n display: grid;\n grid-gap: ${({ theme }) => theme.space.xxxs};\n grid-template-columns: 100%;\n width: 100%;\n align-content: center;\n`;\n\nexport const StyledPrimaryTitle = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_PRIMARY_TITLE,\n})<StyledPrimaryTitlePropsT>`\n margin: 0;\n font-size: 16px;\n line-height: 1.125;\n text-align: left;\n text-overflow: ellipsis;\n min-height: ${({ theme }) => theme.space.xs};\n color: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n font-weight: ${({ theme, isDSMobile }) => (isDSMobile ? theme.fontWeights.semibold : theme.fontWeights.regular)};\n ${({ selected }) =>\n selected\n ? `word-break: break-word;`\n : `\n overflow: hidden;\n white-space: nowrap;\n `};\n ${({ wrapLabel }) =>\n wrapLabel &&\n `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`};\n width: 100%;\n display: block;\n`;\n\nexport const StyledSecondaryTitle = styled('span', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_SECONDARY_TITLE,\n})<StyledSecondaryTitlePropsT>`\n margin: 0;\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n line-height: 1.273;\n text-align: left;\n min-height: 12px;\n color: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n text-overflow: ellipsis;\n ${({ selected }) =>\n selected\n ? `word-break: break-word;`\n : `\n overflow: hidden;\n white-space: nowrap;\n width: 100%;\n display: block;`}\n ${({ wrapLabel }) =>\n wrapLabel &&\n `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`};\n`;\n\nexport const StyledItemCustomActions = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_CUSTOM_ACTIONS_CONTAINER,\n})<StyledItemCustomActionsPropsT>`\n grid-area: actions;\n position: relative;\n align-self: stretch;\n z-index: 1;\n display: grid;\n grid-auto-flow: column;\n place-items: center;\n grid-gap: ${({ theme }) => theme.space.xxs};\n margin: ${({ theme, isDSMobile }) => (isDSMobile ? `0 ${theme.space.xs}` : `0 20px 0 0`)};\n justify-content: flex-end;\n min-height: 28px;\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: -20px;\n border: 2px solid transparent;\n border-left: none;\n border-radius: 0 2px 2px 0;\n pointer-events: none;\n z-index: 2;\n }\n\n /* Right half of the focus ring lights up when the sibling summary (inside the\n display:contents <details>) is focused. Replaces the pre-migration\n header-container:focus-within selector now that the trigger moved into\n <details>. */\n ${StyledItemDetails}:focus-within + &::after {\n border-color: ${({ theme }) => theme.colors.brand[700]};\n }\n`;\n\n// Heading wrapper. Now nested inside the <summary> trigger (native disclosure\n// pattern places the heading inside the summary). Consumers still apply heading\n// semantics through the dsAccordionItemHeaderContainer slot prop\n// (role=\"heading\" + aria-level), exactly as before the migration.\nexport const StyledItemHeaderContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_CONTAINER,\n})`\n position: relative;\n align-self: stretch;\n min-width: 0;\n width: 100%;\n display: flex;\n align-items: center;\n`;\n\nexport const StyledTooltipContent = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_TOOLTIP,\n})`\n padding: 8px;\n width: 250px;\n background: white;\n display: grid;\n gap: ${({ theme }) => theme.space.xxs};\n\n p {\n margin: 0;\n }\n`;\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSAccordionName, DSAccordionItemSlots } from '../../constants/index.js';\ninterface StyledItemHeaderPropsT {\n withCustomActions: boolean;\n withSecondaryTitle?: string;\n isDSMobile?: boolean;\n disabled?: boolean;\n applyAriaDisabled: boolean;\n}\n\ninterface StyledItemTitlesPropsT {\n withSecondaryTitle?: string;\n isDSMobile?: boolean;\n selected: boolean;\n}\n\ninterface StyledPrimaryTitlePropsT {\n disabled: boolean;\n applyAriaDisabled: boolean;\n isDSMobile?: boolean;\n selected: boolean;\n withSecondaryTitle: boolean;\n wrapLabel: boolean;\n}\n\ninterface StyledItemContentPropsT {\n isDSMobile?: boolean;\n selected?: boolean;\n keepContentMounted: boolean;\n applyAriaDisabled: boolean;\n}\n\ninterface StyledSecondaryTitlePropsT {\n disabled: boolean;\n applyAriaDisabled: boolean;\n selected: boolean;\n wrapLabel: boolean;\n}\n\ninterface StyledItemAddonPropsT {\n disabled: boolean;\n applyAriaDisabled: boolean;\n isDSMobile?: boolean;\n}\n\ninterface StyledItemContainerPropsT {\n disabled: boolean;\n applyAriaDisabled: boolean;\n}\n\ninterface StyledItemCustomActionsPropsT {\n isDSMobile?: boolean;\n}\n\nexport const StyledItemContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_CONTAINER,\n})<StyledItemContainerPropsT>`\n display: grid;\n grid-template-columns: minmax(0, 1fr) max-content;\n grid-template-areas:\n 'heading actions'\n 'content content';\n border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n align-items: center;\n min-width: 240px;\n position: relative;\n\n &::before {\n content: '';\n grid-area: 1 / 1 / 2 / -1;\n align-self: stretch;\n justify-self: stretch;\n border-radius: 2px;\n pointer-events: none;\n box-sizing: border-box;\n }\n &:hover::before {\n ${({ disabled, applyAriaDisabled, theme }) =>\n !disabled && !applyAriaDisabled ? `background: ${theme.colors.brand[200]};` : ``}\n }\n\n ${xStyledCommonProps};\n`;\n\n// The `<details>` wrapper is styled with `display: contents` so the summary\n// trigger participates directly in the item container's grid, exactly as the\n// button did before the native-engine migration. It carries the additive\n// ITEM_DETAILS slot. The content panel is a sibling rendered after the custom\n// actions, not a child: the UA wraps every non-summary child of <details> in\n// the `::details-content` pseudo (a real block box), which would take it out of\n// the grid and put it before the actions in the Tab order.\n// That pseudo is still generated (empty) and becomes a grid item, so it is\n// pinned to the content area to keep it from auto-placing into an extra row.\nexport const StyledItemDetails = styled('details', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_DETAILS,\n})`\n display: contents;\n &::details-content {\n grid-area: content;\n }\n`;\n\n// Trigger element. Migrated from <button> to <summary> to adopt the native\n// disclosure pattern. Keeps the ITEM_HEADER slot/testid and the focus-ring\n// treatment. Summary defaults (list marker, default cursor) are reset here.\nexport const StyledItemHeader = styled('summary', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER,\n})<StyledItemHeaderPropsT>`\n grid-area: heading;\n display: flex;\n min-height: ${({ theme, withSecondaryTitle, isDSMobile }) =>\n isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};\n width: 100%;\n align-items: center;\n border: none;\n outline: none;\n background: none;\n list-style: none;\n position: relative;\n &::-webkit-details-marker {\n display: none;\n }\n &:hover {\n cursor: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'not-allowed' : 'pointer')};\n }\n padding: ${({ isDSMobile }) => (isDSMobile ? `0 16px` : `0`)};\n &:focus {\n &:after {\n position: absolute;\n content: '';\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n pointer-events: none;\n z-index: 2;\n ${({ withCustomActions }) =>\n withCustomActions ? `border-right: none; border-radius: 2px 0 0 2px;` : `border-radius: 2px;`}\n }\n }\n`;\n\nexport const StyledItemContent = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_CONTENT_CONTAINER,\n})<StyledItemContentPropsT>`\n grid-area: content;\n padding: ${({ isDSMobile }) => (isDSMobile ? `3px 16px 24px 16px` : '16px 20px')};\n ${({ selected, keepContentMounted }) => {\n if (selected) return '';\n return keepContentMounted ? 'visibility: hidden; height: 0px; padding: 0px;' : '';\n }}\n color: ${({ applyAriaDisabled, theme }) =>\n applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n ${xStyledCommonProps};\n`;\n\nexport const StyledItemAddon = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_ADDON,\n})<StyledItemAddonPropsT>`\n height: 100%;\n display: grid;\n place-items: flex-start;\n & .em-ds-icon svg {\n fill: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[200] : theme.colors.brand[800]};\n }\n`;\n\nexport const StyledItemTitles = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_TITLE_CONTAINER,\n})<StyledItemTitlesPropsT>`\n display: grid;\n grid-gap: ${({ theme }) => theme.space.xxxs};\n grid-template-columns: 100%;\n width: 100%;\n align-content: center;\n`;\n\nexport const StyledPrimaryTitle = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_PRIMARY_TITLE,\n})<StyledPrimaryTitlePropsT>`\n margin: 0;\n font-size: 16px;\n line-height: 1.125;\n text-align: left;\n text-overflow: ellipsis;\n min-height: ${({ theme }) => theme.space.xs};\n color: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n font-weight: ${({ theme, isDSMobile }) => (isDSMobile ? theme.fontWeights.semibold : theme.fontWeights.regular)};\n ${({ selected }) =>\n selected\n ? `word-break: break-word;`\n : `\n overflow: hidden;\n white-space: nowrap;\n `};\n ${({ wrapLabel }) =>\n wrapLabel &&\n `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`};\n width: 100%;\n display: block;\n`;\n\nexport const StyledSecondaryTitle = styled('span', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_SECONDARY_TITLE,\n})<StyledSecondaryTitlePropsT>`\n margin: 0;\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n line-height: 1.273;\n text-align: left;\n min-height: 12px;\n color: ${({ disabled, applyAriaDisabled, theme }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n text-overflow: ellipsis;\n ${({ selected }) =>\n selected\n ? `word-break: break-word;`\n : `\n overflow: hidden;\n white-space: nowrap;\n width: 100%;\n display: block;`}\n ${({ wrapLabel }) =>\n wrapLabel &&\n `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`};\n`;\n\nexport const StyledItemCustomActions = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_CUSTOM_ACTIONS_CONTAINER,\n})<StyledItemCustomActionsPropsT>`\n grid-area: actions;\n position: relative;\n align-self: stretch;\n z-index: 1;\n display: grid;\n grid-auto-flow: column;\n place-items: center;\n grid-gap: ${({ theme }) => theme.space.xxs};\n margin: ${({ theme, isDSMobile }) => (isDSMobile ? `0 ${theme.space.xs}` : `0 20px 0 0`)};\n justify-content: flex-end;\n min-height: 28px;\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: -20px;\n border: 2px solid transparent;\n border-left: none;\n border-radius: 0 2px 2px 0;\n pointer-events: none;\n z-index: 2;\n }\n\n /* Right half of the focus ring lights up when the sibling summary (inside the\n display:contents <details>) is focused. Replaces the pre-migration\n header-container:focus-within selector now that the trigger moved into\n <details>. */\n ${StyledItemDetails}:focus-within + &::after {\n border-color: ${({ theme }) => theme.colors.brand[700]};\n }\n`;\n\n// Heading wrapper. Now nested inside the <summary> trigger (native disclosure\n// pattern places the heading inside the summary). Consumers still apply heading\n// semantics through the dsAccordionItemHeaderContainer slot prop\n// (role=\"heading\" + aria-level), exactly as before the migration.\nexport const StyledItemHeaderContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_CONTAINER,\n})`\n position: relative;\n align-self: stretch;\n min-width: 0;\n width: 100%;\n display: flex;\n align-items: center;\n`;\n\nexport const StyledTooltipContent = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_TOOLTIP,\n})`\n padding: 8px;\n width: 250px;\n background: white;\n display: grid;\n gap: ${({ theme }) => theme.space.xxs};\n\n p {\n margin: 0;\n }\n`;\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-accordion",
3
- "version": "3.70.3-rc.0",
3
+ "version": "3.70.3-rc.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Accordion",
6
6
  "files": [
@@ -36,12 +36,12 @@
36
36
  "indent": 4
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-button-v2": "3.70.3-rc.0",
40
- "@elliemae/ds-floating-context": "3.70.3-rc.0",
41
- "@elliemae/ds-grid": "3.70.3-rc.0",
42
- "@elliemae/ds-system": "3.70.3-rc.0",
43
- "@elliemae/ds-props-helpers": "3.70.3-rc.0",
44
- "@elliemae/ds-icons": "3.70.3-rc.0"
39
+ "@elliemae/ds-button-v2": "3.70.3-rc.2",
40
+ "@elliemae/ds-icons": "3.70.3-rc.2",
41
+ "@elliemae/ds-floating-context": "3.70.3-rc.2",
42
+ "@elliemae/ds-props-helpers": "3.70.3-rc.2",
43
+ "@elliemae/ds-system": "3.70.3-rc.2",
44
+ "@elliemae/ds-grid": "3.70.3-rc.2"
45
45
  },
46
46
  "devDependencies": {
47
47
  "@xstyled/system": "~3.8.1",
@@ -51,8 +51,8 @@
51
51
  "react": "^18.3.1",
52
52
  "react-dom": "^18.3.1",
53
53
  "styled-components": "~5.3.11",
54
- "@elliemae/ds-monorepo-devops": "3.70.3-rc.0",
55
- "@elliemae/ds-test-utils": "3.70.3-rc.0"
54
+ "@elliemae/ds-monorepo-devops": "3.70.3-rc.2",
55
+ "@elliemae/ds-test-utils": "3.70.3-rc.2"
56
56
  },
57
57
  "peerDependencies": {
58
58
  "lodash-es": "^4.18.1",