@elliemae/ds-accordion 3.70.0-next.48 → 3.70.0-next.49

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 (20) hide show
  1. package/dist/cjs/constants/index.js +3 -0
  2. package/dist/cjs/constants/index.js.map +2 -2
  3. package/dist/cjs/parts/accordionItem/DSAccordionItem.js +123 -91
  4. package/dist/cjs/parts/accordionItem/DSAccordionItem.js.map +2 -2
  5. package/dist/cjs/parts/accordionItem/styles.js +24 -8
  6. package/dist/cjs/parts/accordionItem/styles.js.map +2 -2
  7. package/dist/cjs/parts/accordionItem/useAccordionItem.js +4 -2
  8. package/dist/cjs/parts/accordionItem/useAccordionItem.js.map +2 -2
  9. package/dist/esm/constants/index.js +3 -0
  10. package/dist/esm/constants/index.js.map +2 -2
  11. package/dist/esm/parts/accordionItem/DSAccordionItem.js +124 -91
  12. package/dist/esm/parts/accordionItem/DSAccordionItem.js.map +2 -2
  13. package/dist/esm/parts/accordionItem/styles.js +24 -8
  14. package/dist/esm/parts/accordionItem/styles.js.map +2 -2
  15. package/dist/esm/parts/accordionItem/useAccordionItem.js +4 -2
  16. package/dist/esm/parts/accordionItem/useAccordionItem.js.map +2 -2
  17. package/dist/types/constants/index.d.ts +4 -0
  18. package/dist/types/parts/accordionItem/styles.d.ts +3 -1
  19. package/dist/types/parts/accordionItem/useAccordionItem.d.ts +1 -0
  20. package/package.json +9 -9
package/dist/cjs/constants/index.js CHANGED
@@ -46,6 +46,9 @@ const ACCORDION_SLOTS = {
46
46
  const DSAccordionSlots = ACCORDION_SLOTS;
47
47
  const ACCORDION_ITEM_SLOTS = {
48
48
  ITEM_CONTAINER: "item-container",
49
+ // additive slot: wraps the summary + content as a native <details> disclosure.
50
+ // New in the native-engine migration — not a breaking change (did not exist before).
51
+ ITEM_DETAILS: "item-details",
49
52
  ITEM_HEADER_CONTAINER: "item-header-container",
50
53
  ITEM_HEADER: "item-header",
51
54
  ITEM_HEADER_ADDON: "item-header-addon",
package/dist/cjs/constants/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSAccordionName = 'DSAccordion';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const ACCORDION_SLOTS = {\n CONTAINER: 'root',\n} as const;\nexport const DSAccordionSlots = ACCORDION_SLOTS;\n\nexport const ACCORDION_ITEM_SLOTS = {\n ITEM_CONTAINER: 'item-container',\n ITEM_HEADER_CONTAINER: 'item-header-container',\n ITEM_HEADER: 'item-header',\n ITEM_HEADER_ADDON: 'item-header-addon',\n ITEM_HEADER_TITLE_CONTAINER: 'item-header-titles-container',\n ITEM_HEADER_PRIMARY_TITLE: 'item-header-primary-title',\n ITEM_HEADER_SECONDARY_TITLE: 'item-header-secondary-title',\n ITEM_HEADER_CUSTOM_ACTIONS_CONTAINER: 'item-header-custom-actions-container',\n ITEM_HEADER_TOOLTIP: 'item-header-tooltip',\n ITEM_CONTENT_CONTAINER: 'item-content-container',\n} as const;\nexport const DSAccordionItemSlots = ACCORDION_ITEM_SLOTS;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const ACCORDION_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSAccordionName, ACCORDION_SLOTS),\n ...slotObjectToDataTestIds(DSAccordionName, ACCORDION_ITEM_SLOTS),\n ITEM_CONTENT_CONTAINER: 'ds-accordion_item-content',\n ITEM_HEADER: 'ds-accordion_item-header',\n ITEM_CONTAINER: 'ds-accordion_item',\n CONTAINER: 'ds-accordion_group',\n};\nexport const DSAccordionDataTestid = ACCORDION_DATA_TESTID;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,kBAAkB;AAGxB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AACb;AACO,MAAM,mBAAmB;AAEzB,MAAM,uBAAuB;AAAA,EAClC,gBAAgB;AAAA,EAChB,uBAAuB;AAAA,EACvB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,6BAA6B;AAAA,EAC7B,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,sCAAsC;AAAA,EACtC,qBAAqB;AAAA,EACrB,wBAAwB;AAC1B;AACO,MAAM,uBAAuB;AAG7B,MAAM,wBAAwB;AAAA,EACnC,OAAG,0CAAwB,iBAAiB,eAAe;AAAA,EAC3D,OAAG,0CAAwB,iBAAiB,oBAAoB;AAAA,EAChE,wBAAwB;AAAA,EACxB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,WAAW;AACb;AACO,MAAM,wBAAwB;",
4
+ "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSAccordionName = 'DSAccordion';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const ACCORDION_SLOTS = {\n CONTAINER: 'root',\n} as const;\nexport const DSAccordionSlots = ACCORDION_SLOTS;\n\nexport const ACCORDION_ITEM_SLOTS = {\n ITEM_CONTAINER: 'item-container',\n // additive slot: wraps the summary + content as a native <details> disclosure.\n // New in the native-engine migration \u2014 not a breaking change (did not exist before).\n ITEM_DETAILS: 'item-details',\n ITEM_HEADER_CONTAINER: 'item-header-container',\n ITEM_HEADER: 'item-header',\n ITEM_HEADER_ADDON: 'item-header-addon',\n ITEM_HEADER_TITLE_CONTAINER: 'item-header-titles-container',\n ITEM_HEADER_PRIMARY_TITLE: 'item-header-primary-title',\n ITEM_HEADER_SECONDARY_TITLE: 'item-header-secondary-title',\n ITEM_HEADER_CUSTOM_ACTIONS_CONTAINER: 'item-header-custom-actions-container',\n ITEM_HEADER_TOOLTIP: 'item-header-tooltip',\n ITEM_CONTENT_CONTAINER: 'item-content-container',\n} as const;\nexport const DSAccordionItemSlots = ACCORDION_ITEM_SLOTS;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const ACCORDION_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSAccordionName, ACCORDION_SLOTS),\n ...slotObjectToDataTestIds(DSAccordionName, ACCORDION_ITEM_SLOTS),\n ITEM_CONTENT_CONTAINER: 'ds-accordion_item-content',\n ITEM_HEADER: 'ds-accordion_item-header',\n ITEM_CONTAINER: 'ds-accordion_item',\n CONTAINER: 'ds-accordion_group',\n};\nexport const DSAccordionDataTestid = ACCORDION_DATA_TESTID;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,kBAAkB;AAGxB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AACb;AACO,MAAM,mBAAmB;AAEzB,MAAM,uBAAuB;AAAA,EAClC,gBAAgB;AAAA;AAAA;AAAA,EAGhB,cAAc;AAAA,EACd,uBAAuB;AAAA,EACvB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,6BAA6B;AAAA,EAC7B,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,sCAAsC;AAAA,EACtC,qBAAqB;AAAA,EACrB,wBAAwB;AAC1B;AACO,MAAM,uBAAuB;AAG7B,MAAM,wBAAwB;AAAA,EACnC,OAAG,0CAAwB,iBAAiB,eAAe;AAAA,EAC3D,OAAG,0CAAwB,iBAAiB,oBAAoB;AAAA,EAChE,wBAAwB;AAAA,EACxB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,WAAW;AACb;AACO,MAAM,wBAAwB;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/accordionItem/DSAccordionItem.js CHANGED
@@ -74,7 +74,7 @@ const DSAccordionItem = (props) => {
74
74
  wrapLabel,
75
75
  ...rest
76
76
  } = propsWithDefaults;
77
- const { handleOnClick, handleOnKeyDown, selected } = (0, import_useAccordionItem.useAccordionItem)({ value, disabled, applyAriaDisabled });
77
+ const { handleOnKeyDown, toggle, selected } = (0, import_useAccordionItem.useAccordionItem)({ value, disabled, applyAriaDisabled });
78
78
  const xstyledAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(rest);
79
79
  const xstyledContentAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(xStyledPropsContent);
80
80
  const {
@@ -99,11 +99,29 @@ const DSAccordionItem = (props) => {
99
99
  withoutAnimation: true,
100
100
  customOffset: [0, 14]
101
101
  });
102
- const onKeyDownWithIndex = (0, import_react.useCallback)(
102
+ const handleSummaryClick = (0, import_react.useCallback)(
103
103
  (e) => {
104
+ e.preventDefault();
105
+ toggle(e);
106
+ },
107
+ [toggle]
108
+ );
109
+ const handleSummaryKeyDown = (0, import_react.useCallback)(
110
+ (e) => {
111
+ if (e.key === "Enter" || e.key === " ") {
112
+ e.preventDefault();
113
+ toggle(e);
114
+ return;
115
+ }
104
116
  handleOnKeyDown(e, dsIndex);
105
117
  },
106
- [dsIndex, handleOnKeyDown]
118
+ [toggle, handleOnKeyDown, dsIndex]
119
+ );
120
+ const handleSummaryMouseDown = (0, import_react.useCallback)(
121
+ (e) => {
122
+ if (disabled) e.preventDefault();
123
+ },
124
+ [disabled]
107
125
  );
108
126
  const handleOnFocus = (0, import_react.useCallback)(
109
127
  () => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis),
@@ -111,15 +129,20 @@ const DSAccordionItem = (props) => {
111
129
  );
112
130
  const handleOnBlur = (0, import_react.useCallback)(() => setShowPopover(false), []);
113
131
  const { className, ...globalAttrs } = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest, {
114
- onClick: handleOnClick,
132
+ onClick: handleSummaryClick,
115
133
  onFocus: handleOnFocus,
116
134
  onBlur: handleOnBlur
117
135
  });
118
136
  const handlers = {
119
- onClick: handleOnClick,
137
+ onClick: handleSummaryClick,
138
+ onKeyDown: handleSummaryKeyDown,
139
+ onMouseDown: handleSummaryMouseDown,
120
140
  onFocus: handleOnFocus,
121
141
  onBlur: handleOnBlur
122
142
  };
143
+ const headerId = `ds-accordion-header-${value}`;
144
+ const contentId = `ds-accordion-content-${value}`;
145
+ const withCustomActions = (customActions?.length > 0 || renderCustomActions !== void 0 || CustomActions !== void 0) && !isDSMobile;
123
146
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
124
147
  import_styles.StyledItemContainer,
125
148
  {
@@ -131,78 +154,104 @@ const DSAccordionItem = (props) => {
131
154
  getOwnerProps,
132
155
  getOwnerPropsArguments,
133
156
  children: [
134
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
135
- import_styles.StyledItemHeaderContainer,
157
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
158
+ import_styles.StyledItemDetails,
136
159
  {
137
- innerRef: (HTMLNode) => setReferenceElement(HTMLNode ?? null),
160
+ open: selected,
161
+ "data-testid": import_constants.DSAccordionDataTestid.ITEM_DETAILS,
138
162
  getOwnerProps,
139
163
  getOwnerPropsArguments,
140
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
141
- import_styles.StyledItemHeader,
142
- {
143
- withCustomActions: (customActions?.length > 0 || renderCustomActions !== void 0 || CustomActions !== void 0) && !isDSMobile,
144
- withSecondaryTitle: secondaryTitle,
145
- tabIndex: !disabled ? 0 : void 0,
146
- disabled,
147
- "data-disabled": disabled,
148
- innerRef: (0, import_ds_system.mergeRefs)(allChildrenReferences[dsIndex], innerRef),
149
- onKeyDown: onKeyDownWithIndex,
150
- isDSMobile,
151
- "data-testid": import_constants.DSAccordionDataTestid.ITEM_HEADER,
152
- id: `ds-accordion-header-${value}`,
153
- "aria-expanded": selected,
154
- "aria-disabled": disabled || applyAriaDisabled,
155
- applyAriaDisabled,
156
- "aria-controls": `ds-accordion-content-${value}`,
157
- ...handlers,
158
- ...globalAttrs,
159
- type: "button",
160
- getOwnerProps,
161
- getOwnerPropsArguments,
162
- children: [
163
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
164
- import_ItemTitle.ItemTitle,
165
- {
166
- title,
167
- secondaryTitle,
168
- value,
169
- selected,
170
- disabled,
171
- applyAriaDisabled,
172
- wrapLabel,
173
- isDSMobile,
174
- IconOpened,
175
- IconClosed,
176
- onMouseEnter: handleOnFocus,
177
- onMouseLeave: handleOnBlur,
178
- setPrimaryElement,
179
- setSecondaryElement,
180
- getOwnerProps,
181
- getOwnerPropsArguments
182
- }
183
- ),
184
- wrapLabel ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
185
- import_ds_floating_context.FloatingWrapper,
186
- {
187
- innerRef: floatingRefs.setFloating,
188
- isOpen: isFloatingOpen,
189
- floatingStyles,
190
- context: floatingContext,
191
- children: [
192
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTooltipContent, { getOwnerProps, getOwnerPropsArguments, children: [
193
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: title }),
194
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
195
- " ",
196
- secondaryTitle
197
- ] })
198
- ] }),
199
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
200
- ]
201
- }
202
- )
203
- ]
204
- }
205
- )
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
+ ]
206
255
  }
207
256
  ),
208
257
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -217,23 +266,6 @@ const DSAccordionItem = (props) => {
217
266
  getOwnerProps,
218
267
  getOwnerPropsArguments
219
268
  }
220
- ),
221
- (selected || keepContentMounted) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
222
- import_styles.StyledItemContent,
223
- {
224
- "data-testid": import_constants.DSAccordionDataTestid.ITEM_CONTENT_CONTAINER,
225
- "aria-labelledby": `ds-accordion-header-${value}`,
226
- role: "region",
227
- isDSMobile,
228
- id: `ds-accordion-content-${value}`,
229
- ...xstyledContentAttrs,
230
- selected,
231
- keepContentMounted,
232
- applyAriaDisabled,
233
- getOwnerProps,
234
- getOwnerPropsArguments,
235
- children
236
- }
237
269
  )
238
270
  ]
239
271
  }
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 */\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 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 { 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 { 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 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 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 <StyledItemHeaderContainer\n innerRef={(HTMLNode) => setReferenceElement(HTMLNode ?? null)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledItemHeader\n withCustomActions={\n (customActions?.length > 0 || renderCustomActions !== undefined || CustomActions !== undefined) &&\n !isDSMobile\n }\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 <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 {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 </StyledItemHeaderContainer>\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 {(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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwJb;AAvJV,iCAAkE;AAClE,8BAMO;AACP,uBAA0B;AAC1B,mBAAyD;AACzD,4BAAmC;AACnC,uBAAsC;AACtC,0BAA0C;AAE1C,mCAAuC;AACvC,+BAAkC;AAClC,uBAA0B;AAC1B,oBAMO;AACP,8BAAiC;AACjC,kCAAqC;AAErC,MAAM,kBAAkB,CAAC,UAA+C;AACtE,QAAM,wBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,oBAAgB,0BAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AACtD,QAAM,6BAAyB,0BAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,eAAe,iBAAiB,SAAS,QAAI,0CAAiB,EAAE,OAAO,UAAU,kBAAkB,CAAC;AAE5G,QAAM,mBAAe,4CAAmB,IAAI;AAC5C,QAAM,0BAAsB,4CAAmB,mBAAmB;AAElE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,WAAW;AAAA,EACtB,QAAI,yBAAW,wCAAkB;AAEjC,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAA6B,IAAI;AAEjF,QAAM,EAAE,mBAAmB,0BAA0B,YAAY,kBAAkB,QAAI,kDAAqB;AAC5G,QAAM,EAAE,mBAAmB,4BAA4B,YAAY,oBAAoB,QAAI,kDAAqB;AAEhH,QAAM,gBAAgB,CAAC,YAAY;AACnC,QAAM;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,QAAI,+CAAmB;AAAA,IACrB,4BAA4B;AAAA,IAC5B,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,EAAE;AAAA,EACtB,CAAC;AAED,QAAM,yBAAqB;AAAA,IACzB,CAAC,MAA2B;AAC1B,sBAAgB,GAAG,OAAO;AAAA,IAC5B;AAAA,IACA,CAAC,SAAS,eAAe;AAAA,EAC3B;AACA,QAAM,oBAAgB;AAAA,IACpB,MAAM,eAAe,4BAA4B,0BAA0B;AAAA,IAC3E,CAAC,0BAA0B,0BAA0B;AAAA,EACvD;AAEA,QAAM,mBAAe,0BAAY,MAAM,eAAe,KAAK,GAAG,CAAC,CAAC;AAEhE,QAAM,EAAE,WAAW,GAAG,YAAY,QAAI,gDAAuB,MAAM;AAAA,IACjE,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,WAAW;AAAA,IACf,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,uCAAsB;AAAA,MACnC;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,CAAC,aAAa,oBAAoB,YAAY,IAAI;AAAA,YAC5D;AAAA,YACA;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,oBACG,eAAe,SAAS,KAAK,wBAAwB,UAAa,kBAAkB,WACrF,CAAC;AAAA,gBAEH,oBAAoB;AAAA,gBACpB,UAAU,CAAC,WAAW,IAAI;AAAA,gBAC1B;AAAA,gBACA,iBAAe;AAAA,gBACf,cAAU,4BAAU,sBAAsB,OAAO,GAAG,QAAQ;AAAA,gBAC5D,WAAW;AAAA,gBACX;AAAA,gBACA,eAAa,uCAAsB;AAAA,gBACnC,IAAI,uBAAuB,KAAK;AAAA,gBAChC,iBAAe;AAAA,gBACf,iBAAe,YAAY;AAAA,gBAC3B;AAAA,gBACA,iBAAe,wBAAwB,KAAK;AAAA,gBAC3C,GAAG;AAAA,gBACH,GAAG;AAAA,gBACJ,MAAK;AAAA,gBACL;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA,cAAc;AAAA,sBACd,cAAc;AAAA,sBACd;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA;AAAA;AAAA,kBACF;AAAA,kBACC,YAAY,OACX;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAU,aAAa;AAAA,sBACvB,QAAQ;AAAA,sBACR;AAAA,sBACA,SAAS;AAAA,sBAET;AAAA,qEAAC,sCAAqB,eAA8B,wBAClD;AAAA,sEAAC,OAAG,iBAAM;AAAA,0BACV,6CAAC,OAAE;AAAA;AAAA,4BAAE;AAAA,6BAAe;AAAA,2BACtB;AAAA,wBACA,4CAAC,2CAAc,GAAG,aAAa;AAAA;AAAA;AAAA,kBACjC;AAAA;AAAA;AAAA,YAEJ;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,wBAAwB;AAAA,YACxB;AAAA,YACA,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,SACE,YAAY,uBACZ;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,uCAAsB;AAAA,YACnC,mBAAiB,uBAAuB,KAAK;AAAA,YAC7C,MAAK;AAAA,YACL;AAAA,YACA,IAAI,wBAAwB,KAAK;AAAA,YAChC,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,gBAAgB,cAAc;AAC9B,MAAM,gCAA4B,kCAAS,eAAe;AAC1D,0BAA0B,YAAY;AAGtC,IAAO,0BAAQ;",
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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",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/accordionItem/styles.js CHANGED
@@ -32,6 +32,7 @@ __export(styles_exports, {
32
32
  StyledItemContainer: () => StyledItemContainer,
33
33
  StyledItemContent: () => StyledItemContent,
34
34
  StyledItemCustomActions: () => StyledItemCustomActions,
35
+ StyledItemDetails: () => StyledItemDetails,
35
36
  StyledItemHeader: () => StyledItemHeader,
36
37
  StyledItemHeaderContainer: () => StyledItemHeaderContainer,
37
38
  StyledItemTitles: () => StyledItemTitles,
@@ -72,10 +73,17 @@ const StyledItemContainer = (0, import_ds_system.styled)("div", {
72
73
 
73
74
  ${import_ds_system.xStyledCommonProps};
74
75
  `;
75
- const StyledItemHeader = (0, import_ds_system.styled)("button", {
76
+ const StyledItemDetails = (0, import_ds_system.styled)("details", {
77
+ name: import_constants.DSAccordionName,
78
+ slot: import_constants.DSAccordionItemSlots.ITEM_DETAILS
79
+ })`
80
+ display: contents;
81
+ `;
82
+ const StyledItemHeader = (0, import_ds_system.styled)("summary", {
76
83
  name: import_constants.DSAccordionName,
77
84
  slot: import_constants.DSAccordionItemSlots.ITEM_HEADER
78
85
  })`
86
+ grid-area: heading;
79
87
  display: flex;
80
88
  min-height: ${({ theme, withSecondaryTitle, isDSMobile }) => isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};
81
89
  width: 100%;
@@ -83,9 +91,13 @@ const StyledItemHeader = (0, import_ds_system.styled)("button", {
83
91
  border: none;
84
92
  outline: none;
85
93
  background: none;
94
+ list-style: none;
95
+ position: relative;
96
+ &::-webkit-details-marker {
97
+ display: none;
98
+ }
86
99
  &:hover {
87
- cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
88
- cursor: ${({ applyAriaDisabled }) => applyAriaDisabled ? "not-allowed" : "pointer"};
100
+ cursor: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "not-allowed" : "pointer"};
89
101
  }
90
102
  padding: ${({ isDSMobile }) => isDSMobile ? `0 16px` : `0`};
91
103
  &:focus {
@@ -212,21 +224,25 @@ const StyledItemCustomActions = (0, import_ds_system.styled)("div", {
212
224
  pointer-events: none;
213
225
  z-index: 2;
214
226
  }
227
+
228
+ /* Right half of the focus ring lights up when the sibling summary (inside the
229
+ display:contents <details>) is focused. Replaces the pre-migration
230
+ header-container:focus-within selector now that the trigger moved into
231
+ <details>. */
232
+ ${StyledItemDetails}:focus-within + &::after {
233
+ border-color: ${({ theme }) => theme.colors.brand[700]};
234
+ }
215
235
  `;
216
236
  const StyledItemHeaderContainer = (0, import_ds_system.styled)("div", {
217
237
  name: import_constants.DSAccordionName,
218
238
  slot: import_constants.DSAccordionItemSlots.ITEM_HEADER_CONTAINER
219
239
  })`
220
- grid-area: heading;
221
240
  position: relative;
222
241
  align-self: stretch;
223
242
  min-width: 0;
243
+ width: 100%;
224
244
  display: flex;
225
245
  align-items: center;
226
-
227
- &:focus-within + [data-dimsum-slot='dsAccordionItemHeaderCustomActionsContainer']::after {
228
- border-color: ${({ theme }) => theme.colors.brand[700]};
229
- }
230
246
  `;
231
247
  const StyledTooltipContent = (0, import_ds_system.styled)("div", {
232
248
  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 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\nexport const StyledItemHeader = styled('button', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER,\n})<StyledItemHeaderPropsT>`\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 &:hover {\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n cursor: ${({ applyAriaDisabled }) => (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\nexport const StyledItemHeaderContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_CONTAINER,\n})`\n grid-area: heading;\n position: relative;\n align-self: stretch;\n min-width: 0;\n display: flex;\n align-items: center;\n\n &:focus-within + [data-dimsum-slot='dsAccordionItemHeaderCustomActionsContainer']::after {\n border-color: ${({ theme }) => theme.colors.brand[700]};\n }\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 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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",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/accordionItem/useAccordionItem.js CHANGED
@@ -46,12 +46,13 @@ const useAccordionItem = ({
46
46
  }
47
47
  return value === actualActiveValue;
48
48
  }, [actualActiveValue, value]);
49
- const handleOnClick = (0, import_react.useCallback)(
49
+ const toggle = (0, import_react.useCallback)(
50
50
  (e) => {
51
51
  if (!disabled && !applyAriaDisabled) setActiveValues(value, e);
52
52
  },
53
- [disabled, setActiveValues, value, applyAriaDisabled]
53
+ [disabled, applyAriaDisabled, setActiveValues, value]
54
54
  );
55
+ const handleOnClick = (0, import_react.useCallback)((e) => toggle(e), [toggle]);
55
56
  const handleOnKeyDown = (0, import_react.useCallback)(
56
57
  (e, _dsIndex) => {
57
58
  if (!disabled && e.key === "ArrowDown") {
@@ -76,6 +77,7 @@ const useAccordionItem = ({
76
77
  return {
77
78
  handleOnClick,
78
79
  handleOnKeyDown,
80
+ toggle,
79
81
  selected
80
82
  };
81
83
  };
package/dist/cjs/parts/accordionItem/useAccordionItem.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/accordionItem/useAccordionItem.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type React from 'react';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { DSAccordionContext } from '../../DSAccordionCTX.js';\n\nexport interface UseAccordionItemPropsT {\n value: string | number;\n disabled: boolean;\n applyAriaDisabled: boolean;\n}\n\ninterface UseAccordionItemReturnTypeT {\n handleOnClick: (e: React.MouseEvent) => void;\n handleOnKeyDown: (e: React.KeyboardEvent, dsIndex: number) => void;\n selected: boolean;\n}\n\nexport const useAccordionItem = ({\n value,\n disabled,\n applyAriaDisabled,\n}: UseAccordionItemPropsT): UseAccordionItemReturnTypeT => {\n const { actualActiveValue, setActiveValues, focusableChildrenReferences } = useContext(DSAccordionContext);\n\n const selected = useMemo(() => {\n if (Array.isArray(actualActiveValue)) {\n return actualActiveValue.some((currentValue) => currentValue === value);\n }\n return value === actualActiveValue;\n }, [actualActiveValue, value]);\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent) => {\n if (!disabled && !applyAriaDisabled) setActiveValues(value, e);\n },\n [disabled, setActiveValues, value, applyAriaDisabled],\n );\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent, _dsIndex: number) => {\n if (!disabled && e.key === 'ArrowDown') {\n const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);\n if (focusableChildrenReferences[currentIndex + 1]?.ref?.current)\n focusableChildrenReferences[currentIndex + 1]?.ref?.current?.focus();\n else if (currentIndex === focusableChildrenReferences.length - 1) {\n focusableChildrenReferences[0]?.ref?.current?.focus();\n }\n }\n\n if (!disabled && e.key === 'ArrowUp') {\n const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);\n if (focusableChildrenReferences[currentIndex - 1]?.ref?.current)\n focusableChildrenReferences[currentIndex - 1]?.ref?.current?.focus();\n else if (currentIndex === 0) {\n focusableChildrenReferences[focusableChildrenReferences.length - 1]?.ref?.current?.focus();\n }\n }\n },\n [disabled, focusableChildrenReferences],\n );\n\n return {\n handleOnClick,\n handleOnKeyDown,\n selected,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiD;AACjD,4BAAmC;AAc5B,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,MAA2D;AACzD,QAAM,EAAE,mBAAmB,iBAAiB,4BAA4B,QAAI,yBAAW,wCAAkB;AAEzG,QAAM,eAAW,sBAAQ,MAAM;AAC7B,QAAI,MAAM,QAAQ,iBAAiB,GAAG;AACpC,aAAO,kBAAkB,KAAK,CAAC,iBAAiB,iBAAiB,KAAK;AAAA,IACxE;AACA,WAAO,UAAU;AAAA,EACnB,GAAG,CAAC,mBAAmB,KAAK,CAAC;AAE7B,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAwB;AACvB,UAAI,CAAC,YAAY,CAAC,kBAAmB,iBAAgB,OAAO,CAAC;AAAA,IAC/D;AAAA,IACA,CAAC,UAAU,iBAAiB,OAAO,iBAAiB;AAAA,EACtD;AAEA,QAAM,sBAAkB;AAAA,IACtB,CAAC,GAAwB,aAAqB;AAC5C,UAAI,CAAC,YAAY,EAAE,QAAQ,aAAa;AACtC,cAAM,eAAe,4BAA4B,UAAU,CAAC,SAAS,KAAK,UAAU,QAAQ;AAC5F,YAAI,4BAA4B,eAAe,CAAC,GAAG,KAAK;AACtD,sCAA4B,eAAe,CAAC,GAAG,KAAK,SAAS,MAAM;AAAA,iBAC5D,iBAAiB,4BAA4B,SAAS,GAAG;AAChE,sCAA4B,CAAC,GAAG,KAAK,SAAS,MAAM;AAAA,QACtD;AAAA,MACF;AAEA,UAAI,CAAC,YAAY,EAAE,QAAQ,WAAW;AACpC,cAAM,eAAe,4BAA4B,UAAU,CAAC,SAAS,KAAK,UAAU,QAAQ;AAC5F,YAAI,4BAA4B,eAAe,CAAC,GAAG,KAAK;AACtD,sCAA4B,eAAe,CAAC,GAAG,KAAK,SAAS,MAAM;AAAA,iBAC5D,iBAAiB,GAAG;AAC3B,sCAA4B,4BAA4B,SAAS,CAAC,GAAG,KAAK,SAAS,MAAM;AAAA,QAC3F;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,UAAU,2BAA2B;AAAA,EACxC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
4
+ "sourcesContent": ["import type React from 'react';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { DSAccordionContext } from '../../DSAccordionCTX.js';\n\nexport interface UseAccordionItemPropsT {\n value: string | number;\n disabled: boolean;\n applyAriaDisabled: boolean;\n}\n\ninterface UseAccordionItemReturnTypeT {\n handleOnClick: (e: React.MouseEvent) => void;\n handleOnKeyDown: (e: React.KeyboardEvent, dsIndex: number) => void;\n toggle: (e: React.MouseEvent | React.KeyboardEvent) => void;\n selected: boolean;\n}\n\nexport const useAccordionItem = ({\n value,\n disabled,\n applyAriaDisabled,\n}: UseAccordionItemPropsT): UseAccordionItemReturnTypeT => {\n const { actualActiveValue, setActiveValues, focusableChildrenReferences } = useContext(DSAccordionContext);\n\n const selected = useMemo(() => {\n if (Array.isArray(actualActiveValue)) {\n return actualActiveValue.some((currentValue) => currentValue === value);\n }\n return value === actualActiveValue;\n }, [actualActiveValue, value]);\n\n // Unified toggle usable from both pointer and keyboard events. The <summary>\n // trigger (native disclosure) does not synthesize a click on Enter/Space the\n // way the old <button> did, so the keydown handler calls this directly.\n const toggle = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n if (!disabled && !applyAriaDisabled) setActiveValues(value, e);\n },\n [disabled, applyAriaDisabled, setActiveValues, value],\n );\n\n const handleOnClick = useCallback((e: React.MouseEvent) => toggle(e), [toggle]);\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent, _dsIndex: number) => {\n if (!disabled && e.key === 'ArrowDown') {\n const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);\n if (focusableChildrenReferences[currentIndex + 1]?.ref?.current)\n focusableChildrenReferences[currentIndex + 1]?.ref?.current?.focus();\n else if (currentIndex === focusableChildrenReferences.length - 1) {\n focusableChildrenReferences[0]?.ref?.current?.focus();\n }\n }\n\n if (!disabled && e.key === 'ArrowUp') {\n const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);\n if (focusableChildrenReferences[currentIndex - 1]?.ref?.current)\n focusableChildrenReferences[currentIndex - 1]?.ref?.current?.focus();\n else if (currentIndex === 0) {\n focusableChildrenReferences[focusableChildrenReferences.length - 1]?.ref?.current?.focus();\n }\n }\n },\n [disabled, focusableChildrenReferences],\n );\n\n return {\n handleOnClick,\n handleOnKeyDown,\n toggle,\n selected,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiD;AACjD,4BAAmC;AAe5B,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,MAA2D;AACzD,QAAM,EAAE,mBAAmB,iBAAiB,4BAA4B,QAAI,yBAAW,wCAAkB;AAEzG,QAAM,eAAW,sBAAQ,MAAM;AAC7B,QAAI,MAAM,QAAQ,iBAAiB,GAAG;AACpC,aAAO,kBAAkB,KAAK,CAAC,iBAAiB,iBAAiB,KAAK;AAAA,IACxE;AACA,WAAO,UAAU;AAAA,EACnB,GAAG,CAAC,mBAAmB,KAAK,CAAC;AAK7B,QAAM,aAAS;AAAA,IACb,CAAC,MAA8C;AAC7C,UAAI,CAAC,YAAY,CAAC,kBAAmB,iBAAgB,OAAO,CAAC;AAAA,IAC/D;AAAA,IACA,CAAC,UAAU,mBAAmB,iBAAiB,KAAK;AAAA,EACtD;AAEA,QAAM,oBAAgB,0BAAY,CAAC,MAAwB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC;AAE9E,QAAM,sBAAkB;AAAA,IACtB,CAAC,GAAwB,aAAqB;AAC5C,UAAI,CAAC,YAAY,EAAE,QAAQ,aAAa;AACtC,cAAM,eAAe,4BAA4B,UAAU,CAAC,SAAS,KAAK,UAAU,QAAQ;AAC5F,YAAI,4BAA4B,eAAe,CAAC,GAAG,KAAK;AACtD,sCAA4B,eAAe,CAAC,GAAG,KAAK,SAAS,MAAM;AAAA,iBAC5D,iBAAiB,4BAA4B,SAAS,GAAG;AAChE,sCAA4B,CAAC,GAAG,KAAK,SAAS,MAAM;AAAA,QACtD;AAAA,MACF;AAEA,UAAI,CAAC,YAAY,EAAE,QAAQ,WAAW;AACpC,cAAM,eAAe,4BAA4B,UAAU,CAAC,SAAS,KAAK,UAAU,QAAQ;AAC5F,YAAI,4BAA4B,eAAe,CAAC,GAAG,KAAK;AACtD,sCAA4B,eAAe,CAAC,GAAG,KAAK,SAAS,MAAM;AAAA,iBAC5D,iBAAiB,GAAG;AAC3B,sCAA4B,4BAA4B,SAAS,CAAC,GAAG,KAAK,SAAS,MAAM;AAAA,QAC3F;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,UAAU,2BAA2B;AAAA,EACxC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
6
6
  "names": []
7
7
  }
package/dist/esm/constants/index.js CHANGED
@@ -7,6 +7,9 @@ const ACCORDION_SLOTS = {
7
7
  const DSAccordionSlots = ACCORDION_SLOTS;
8
8
  const ACCORDION_ITEM_SLOTS = {
9
9
  ITEM_CONTAINER: "item-container",
10
+ // additive slot: wraps the summary + content as a native <details> disclosure.
11
+ // New in the native-engine migration — not a breaking change (did not exist before).
12
+ ITEM_DETAILS: "item-details",
10
13
  ITEM_HEADER_CONTAINER: "item-header-container",
11
14
  ITEM_HEADER: "item-header",
12
15
  ITEM_HEADER_ADDON: "item-header-addon",
package/dist/esm/constants/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSAccordionName = 'DSAccordion';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const ACCORDION_SLOTS = {\n CONTAINER: 'root',\n} as const;\nexport const DSAccordionSlots = ACCORDION_SLOTS;\n\nexport const ACCORDION_ITEM_SLOTS = {\n ITEM_CONTAINER: 'item-container',\n ITEM_HEADER_CONTAINER: 'item-header-container',\n ITEM_HEADER: 'item-header',\n ITEM_HEADER_ADDON: 'item-header-addon',\n ITEM_HEADER_TITLE_CONTAINER: 'item-header-titles-container',\n ITEM_HEADER_PRIMARY_TITLE: 'item-header-primary-title',\n ITEM_HEADER_SECONDARY_TITLE: 'item-header-secondary-title',\n ITEM_HEADER_CUSTOM_ACTIONS_CONTAINER: 'item-header-custom-actions-container',\n ITEM_HEADER_TOOLTIP: 'item-header-tooltip',\n ITEM_CONTENT_CONTAINER: 'item-content-container',\n} as const;\nexport const DSAccordionItemSlots = ACCORDION_ITEM_SLOTS;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const ACCORDION_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSAccordionName, ACCORDION_SLOTS),\n ...slotObjectToDataTestIds(DSAccordionName, ACCORDION_ITEM_SLOTS),\n ITEM_CONTENT_CONTAINER: 'ds-accordion_item-content',\n ITEM_HEADER: 'ds-accordion_item-header',\n ITEM_CONTAINER: 'ds-accordion_item',\n CONTAINER: 'ds-accordion_group',\n};\nexport const DSAccordionDataTestid = ACCORDION_DATA_TESTID;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,kBAAkB;AAGxB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AACb;AACO,MAAM,mBAAmB;AAEzB,MAAM,uBAAuB;AAAA,EAClC,gBAAgB;AAAA,EAChB,uBAAuB;AAAA,EACvB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,6BAA6B;AAAA,EAC7B,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,sCAAsC;AAAA,EACtC,qBAAqB;AAAA,EACrB,wBAAwB;AAC1B;AACO,MAAM,uBAAuB;AAG7B,MAAM,wBAAwB;AAAA,EACnC,GAAG,wBAAwB,iBAAiB,eAAe;AAAA,EAC3D,GAAG,wBAAwB,iBAAiB,oBAAoB;AAAA,EAChE,wBAAwB;AAAA,EACxB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,WAAW;AACb;AACO,MAAM,wBAAwB;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSAccordionName = 'DSAccordion';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const ACCORDION_SLOTS = {\n CONTAINER: 'root',\n} as const;\nexport const DSAccordionSlots = ACCORDION_SLOTS;\n\nexport const ACCORDION_ITEM_SLOTS = {\n ITEM_CONTAINER: 'item-container',\n // additive slot: wraps the summary + content as a native <details> disclosure.\n // New in the native-engine migration \u2014 not a breaking change (did not exist before).\n ITEM_DETAILS: 'item-details',\n ITEM_HEADER_CONTAINER: 'item-header-container',\n ITEM_HEADER: 'item-header',\n ITEM_HEADER_ADDON: 'item-header-addon',\n ITEM_HEADER_TITLE_CONTAINER: 'item-header-titles-container',\n ITEM_HEADER_PRIMARY_TITLE: 'item-header-primary-title',\n ITEM_HEADER_SECONDARY_TITLE: 'item-header-secondary-title',\n ITEM_HEADER_CUSTOM_ACTIONS_CONTAINER: 'item-header-custom-actions-container',\n ITEM_HEADER_TOOLTIP: 'item-header-tooltip',\n ITEM_CONTENT_CONTAINER: 'item-content-container',\n} as const;\nexport const DSAccordionItemSlots = ACCORDION_ITEM_SLOTS;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const ACCORDION_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSAccordionName, ACCORDION_SLOTS),\n ...slotObjectToDataTestIds(DSAccordionName, ACCORDION_ITEM_SLOTS),\n ITEM_CONTENT_CONTAINER: 'ds-accordion_item-content',\n ITEM_HEADER: 'ds-accordion_item-header',\n ITEM_CONTAINER: 'ds-accordion_item',\n CONTAINER: 'ds-accordion_group',\n};\nexport const DSAccordionDataTestid = ACCORDION_DATA_TESTID;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,kBAAkB;AAGxB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AACb;AACO,MAAM,mBAAmB;AAEzB,MAAM,uBAAuB;AAAA,EAClC,gBAAgB;AAAA;AAAA;AAAA,EAGhB,cAAc;AAAA,EACd,uBAAuB;AAAA,EACvB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,6BAA6B;AAAA,EAC7B,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,sCAAsC;AAAA,EACtC,qBAAqB;AAAA,EACrB,wBAAwB;AAC1B;AACO,MAAM,uBAAuB;AAG7B,MAAM,wBAAwB;AAAA,EACnC,GAAG,wBAAwB,iBAAiB,eAAe;AAAA,EAC3D,GAAG,wBAAwB,iBAAiB,oBAAoB;AAAA,EAChE,wBAAwB;AAAA,EACxB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,WAAW;AACb;AACO,MAAM,wBAAwB;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/accordionItem/DSAccordionItem.js CHANGED
@@ -18,6 +18,7 @@ import { ItemTitle } from "./ItemTitle.js";
18
18
  import {
19
19
  StyledItemContainer,
20
20
  StyledItemContent,
21
+ StyledItemDetails,
21
22
  StyledItemHeader,
22
23
  StyledItemHeaderContainer,
23
24
  StyledTooltipContent
@@ -50,7 +51,7 @@ const DSAccordionItem = (props) => {
50
51
  wrapLabel,
51
52
  ...rest
52
53
  } = propsWithDefaults;
53
- const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled, applyAriaDisabled });
54
+ const { handleOnKeyDown, toggle, selected } = useAccordionItem({ value, disabled, applyAriaDisabled });
54
55
  const xstyledAttrs = useGetXstyledProps(rest);
55
56
  const xstyledContentAttrs = useGetXstyledProps(xStyledPropsContent);
56
57
  const {
@@ -75,11 +76,29 @@ const DSAccordionItem = (props) => {
75
76
  withoutAnimation: true,
76
77
  customOffset: [0, 14]
77
78
  });
78
- const onKeyDownWithIndex = useCallback(
79
+ const handleSummaryClick = useCallback(
79
80
  (e) => {
81
+ e.preventDefault();
82
+ toggle(e);
83
+ },
84
+ [toggle]
85
+ );
86
+ const handleSummaryKeyDown = useCallback(
87
+ (e) => {
88
+ if (e.key === "Enter" || e.key === " ") {
89
+ e.preventDefault();
90
+ toggle(e);
91
+ return;
92
+ }
80
93
  handleOnKeyDown(e, dsIndex);
81
94
  },
82
- [dsIndex, handleOnKeyDown]
95
+ [toggle, handleOnKeyDown, dsIndex]
96
+ );
97
+ const handleSummaryMouseDown = useCallback(
98
+ (e) => {
99
+ if (disabled) e.preventDefault();
100
+ },
101
+ [disabled]
83
102
  );
84
103
  const handleOnFocus = useCallback(
85
104
  () => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis),
@@ -87,15 +106,20 @@ const DSAccordionItem = (props) => {
87
106
  );
88
107
  const handleOnBlur = useCallback(() => setShowPopover(false), []);
89
108
  const { className, ...globalAttrs } = useGetGlobalAttributes(rest, {
90
- onClick: handleOnClick,
109
+ onClick: handleSummaryClick,
91
110
  onFocus: handleOnFocus,
92
111
  onBlur: handleOnBlur
93
112
  });
94
113
  const handlers = {
95
- onClick: handleOnClick,
114
+ onClick: handleSummaryClick,
115
+ onKeyDown: handleSummaryKeyDown,
116
+ onMouseDown: handleSummaryMouseDown,
96
117
  onFocus: handleOnFocus,
97
118
  onBlur: handleOnBlur
98
119
  };
120
+ const headerId = `ds-accordion-header-${value}`;
121
+ const contentId = `ds-accordion-content-${value}`;
122
+ const withCustomActions = (customActions?.length > 0 || renderCustomActions !== void 0 || CustomActions !== void 0) && !isDSMobile;
99
123
  return /* @__PURE__ */ jsxs(
100
124
  StyledItemContainer,
101
125
  {
@@ -107,78 +131,104 @@ const DSAccordionItem = (props) => {
107
131
  getOwnerProps,
108
132
  getOwnerPropsArguments,
109
133
  children: [
110
- /* @__PURE__ */ jsx(
111
- StyledItemHeaderContainer,
134
+ /* @__PURE__ */ jsxs(
135
+ StyledItemDetails,
112
136
  {
113
- innerRef: (HTMLNode) => setReferenceElement(HTMLNode ?? null),
137
+ open: selected,
138
+ "data-testid": DSAccordionDataTestid.ITEM_DETAILS,
114
139
  getOwnerProps,
115
140
  getOwnerPropsArguments,
116
- children: /* @__PURE__ */ jsxs(
117
- StyledItemHeader,
118
- {
119
- withCustomActions: (customActions?.length > 0 || renderCustomActions !== void 0 || CustomActions !== void 0) && !isDSMobile,
120
- withSecondaryTitle: secondaryTitle,
121
- tabIndex: !disabled ? 0 : void 0,
122
- disabled,
123
- "data-disabled": disabled,
124
- innerRef: mergeRefs(allChildrenReferences[dsIndex], innerRef),
125
- onKeyDown: onKeyDownWithIndex,
126
- isDSMobile,
127
- "data-testid": DSAccordionDataTestid.ITEM_HEADER,
128
- id: `ds-accordion-header-${value}`,
129
- "aria-expanded": selected,
130
- "aria-disabled": disabled || applyAriaDisabled,
131
- applyAriaDisabled,
132
- "aria-controls": `ds-accordion-content-${value}`,
133
- ...handlers,
134
- ...globalAttrs,
135
- type: "button",
136
- getOwnerProps,
137
- getOwnerPropsArguments,
138
- children: [
139
- /* @__PURE__ */ jsx(
140
- ItemTitle,
141
- {
142
- title,
143
- secondaryTitle,
144
- value,
145
- selected,
146
- disabled,
147
- applyAriaDisabled,
148
- wrapLabel,
149
- isDSMobile,
150
- IconOpened,
151
- IconClosed,
152
- onMouseEnter: handleOnFocus,
153
- onMouseLeave: handleOnBlur,
154
- setPrimaryElement,
155
- setSecondaryElement,
156
- getOwnerProps,
157
- getOwnerPropsArguments
158
- }
159
- ),
160
- wrapLabel ? null : /* @__PURE__ */ jsxs(
161
- FloatingWrapper,
162
- {
163
- innerRef: floatingRefs.setFloating,
164
- isOpen: isFloatingOpen,
165
- floatingStyles,
166
- context: floatingContext,
167
- children: [
168
- /* @__PURE__ */ jsxs(StyledTooltipContent, { getOwnerProps, getOwnerPropsArguments, children: [
169
- /* @__PURE__ */ jsx("p", { children: title }),
170
- /* @__PURE__ */ jsxs("p", { children: [
171
- " ",
172
- secondaryTitle
173
- ] })
174
- ] }),
175
- /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
176
- ]
177
- }
178
- )
179
- ]
180
- }
181
- )
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
+ ]
182
232
  }
183
233
  ),
184
234
  /* @__PURE__ */ jsx(
@@ -193,23 +243,6 @@ const DSAccordionItem = (props) => {
193
243
  getOwnerProps,
194
244
  getOwnerPropsArguments
195
245
  }
196
- ),
197
- (selected || keepContentMounted) && /* @__PURE__ */ jsx(
198
- StyledItemContent,
199
- {
200
- "data-testid": DSAccordionDataTestid.ITEM_CONTENT_CONTAINER,
201
- "aria-labelledby": `ds-accordion-header-${value}`,
202
- role: "region",
203
- isDSMobile,
204
- id: `ds-accordion-content-${value}`,
205
- ...xstyledContentAttrs,
206
- selected,
207
- keepContentMounted,
208
- applyAriaDisabled,
209
- getOwnerProps,
210
- getOwnerPropsArguments,
211
- children
212
- }
213
246
  )
214
247
  ]
215
248
  }
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 */\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 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 { 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 { 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 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 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 <StyledItemHeaderContainer\n innerRef={(HTMLNode) => setReferenceElement(HTMLNode ?? null)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledItemHeader\n withCustomActions={\n (customActions?.length > 0 || renderCustomActions !== undefined || CustomActions !== undefined) &&\n !isDSMobile\n }\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 <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 {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 </StyledItemHeaderContainer>\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 {(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"],
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), 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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",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/accordionItem/styles.js CHANGED
@@ -30,10 +30,17 @@ const StyledItemContainer = styled("div", {
30
30
 
31
31
  ${xStyledCommonProps};
32
32
  `;
33
- const StyledItemHeader = styled("button", {
33
+ const StyledItemDetails = styled("details", {
34
+ name: DSAccordionName,
35
+ slot: DSAccordionItemSlots.ITEM_DETAILS
36
+ })`
37
+ display: contents;
38
+ `;
39
+ const StyledItemHeader = styled("summary", {
34
40
  name: DSAccordionName,
35
41
  slot: DSAccordionItemSlots.ITEM_HEADER
36
42
  })`
43
+ grid-area: heading;
37
44
  display: flex;
38
45
  min-height: ${({ theme, withSecondaryTitle, isDSMobile }) => isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};
39
46
  width: 100%;
@@ -41,9 +48,13 @@ const StyledItemHeader = styled("button", {
41
48
  border: none;
42
49
  outline: none;
43
50
  background: none;
51
+ list-style: none;
52
+ position: relative;
53
+ &::-webkit-details-marker {
54
+ display: none;
55
+ }
44
56
  &:hover {
45
- cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
46
- cursor: ${({ applyAriaDisabled }) => applyAriaDisabled ? "not-allowed" : "pointer"};
57
+ cursor: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "not-allowed" : "pointer"};
47
58
  }
48
59
  padding: ${({ isDSMobile }) => isDSMobile ? `0 16px` : `0`};
49
60
  &:focus {
@@ -170,21 +181,25 @@ const StyledItemCustomActions = styled("div", {
170
181
  pointer-events: none;
171
182
  z-index: 2;
172
183
  }
184
+
185
+ /* Right half of the focus ring lights up when the sibling summary (inside the
186
+ display:contents <details>) is focused. Replaces the pre-migration
187
+ header-container:focus-within selector now that the trigger moved into
188
+ <details>. */
189
+ ${StyledItemDetails}:focus-within + &::after {
190
+ border-color: ${({ theme }) => theme.colors.brand[700]};
191
+ }
173
192
  `;
174
193
  const StyledItemHeaderContainer = styled("div", {
175
194
  name: DSAccordionName,
176
195
  slot: DSAccordionItemSlots.ITEM_HEADER_CONTAINER
177
196
  })`
178
- grid-area: heading;
179
197
  position: relative;
180
198
  align-self: stretch;
181
199
  min-width: 0;
200
+ width: 100%;
182
201
  display: flex;
183
202
  align-items: center;
184
-
185
- &:focus-within + [data-dimsum-slot='dsAccordionItemHeaderCustomActionsContainer']::after {
186
- border-color: ${({ theme }) => theme.colors.brand[700]};
187
- }
188
203
  `;
189
204
  const StyledTooltipContent = styled("div", {
190
205
  name: DSAccordionName,
@@ -205,6 +220,7 @@ export {
205
220
  StyledItemContainer,
206
221
  StyledItemContent,
207
222
  StyledItemCustomActions,
223
+ StyledItemDetails,
208
224
  StyledItemHeader,
209
225
  StyledItemHeaderContainer,
210
226
  StyledItemTitles,
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 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\nexport const StyledItemHeader = styled('button', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER,\n})<StyledItemHeaderPropsT>`\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 &:hover {\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n cursor: ${({ applyAriaDisabled }) => (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\nexport const StyledItemHeaderContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionItemSlots.ITEM_HEADER_CONTAINER,\n})`\n grid-area: heading;\n position: relative;\n align-self: stretch;\n min-width: 0;\n display: flex;\n align-items: center;\n\n &:focus-within + [data-dimsum-slot='dsAccordionItemHeaderCustomActionsContainer']::after {\n border-color: ${({ theme }) => theme.colors.brand[700]};\n }\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 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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",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/accordionItem/useAccordionItem.js CHANGED
@@ -13,12 +13,13 @@ const useAccordionItem = ({
13
13
  }
14
14
  return value === actualActiveValue;
15
15
  }, [actualActiveValue, value]);
16
- const handleOnClick = useCallback(
16
+ const toggle = useCallback(
17
17
  (e) => {
18
18
  if (!disabled && !applyAriaDisabled) setActiveValues(value, e);
19
19
  },
20
- [disabled, setActiveValues, value, applyAriaDisabled]
20
+ [disabled, applyAriaDisabled, setActiveValues, value]
21
21
  );
22
+ const handleOnClick = useCallback((e) => toggle(e), [toggle]);
22
23
  const handleOnKeyDown = useCallback(
23
24
  (e, _dsIndex) => {
24
25
  if (!disabled && e.key === "ArrowDown") {
@@ -43,6 +44,7 @@ const useAccordionItem = ({
43
44
  return {
44
45
  handleOnClick,
45
46
  handleOnKeyDown,
47
+ toggle,
46
48
  selected
47
49
  };
48
50
  };
package/dist/esm/parts/accordionItem/useAccordionItem.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/useAccordionItem.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { DSAccordionContext } from '../../DSAccordionCTX.js';\n\nexport interface UseAccordionItemPropsT {\n value: string | number;\n disabled: boolean;\n applyAriaDisabled: boolean;\n}\n\ninterface UseAccordionItemReturnTypeT {\n handleOnClick: (e: React.MouseEvent) => void;\n handleOnKeyDown: (e: React.KeyboardEvent, dsIndex: number) => void;\n selected: boolean;\n}\n\nexport const useAccordionItem = ({\n value,\n disabled,\n applyAriaDisabled,\n}: UseAccordionItemPropsT): UseAccordionItemReturnTypeT => {\n const { actualActiveValue, setActiveValues, focusableChildrenReferences } = useContext(DSAccordionContext);\n\n const selected = useMemo(() => {\n if (Array.isArray(actualActiveValue)) {\n return actualActiveValue.some((currentValue) => currentValue === value);\n }\n return value === actualActiveValue;\n }, [actualActiveValue, value]);\n\n const handleOnClick = useCallback(\n (e: React.MouseEvent) => {\n if (!disabled && !applyAriaDisabled) setActiveValues(value, e);\n },\n [disabled, setActiveValues, value, applyAriaDisabled],\n );\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent, _dsIndex: number) => {\n if (!disabled && e.key === 'ArrowDown') {\n const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);\n if (focusableChildrenReferences[currentIndex + 1]?.ref?.current)\n focusableChildrenReferences[currentIndex + 1]?.ref?.current?.focus();\n else if (currentIndex === focusableChildrenReferences.length - 1) {\n focusableChildrenReferences[0]?.ref?.current?.focus();\n }\n }\n\n if (!disabled && e.key === 'ArrowUp') {\n const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);\n if (focusableChildrenReferences[currentIndex - 1]?.ref?.current)\n focusableChildrenReferences[currentIndex - 1]?.ref?.current?.focus();\n else if (currentIndex === 0) {\n focusableChildrenReferences[focusableChildrenReferences.length - 1]?.ref?.current?.focus();\n }\n }\n },\n [disabled, focusableChildrenReferences],\n );\n\n return {\n handleOnClick,\n handleOnKeyDown,\n selected,\n };\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,YAAY,eAAe;AACjD,SAAS,0BAA0B;AAc5B,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,MAA2D;AACzD,QAAM,EAAE,mBAAmB,iBAAiB,4BAA4B,IAAI,WAAW,kBAAkB;AAEzG,QAAM,WAAW,QAAQ,MAAM;AAC7B,QAAI,MAAM,QAAQ,iBAAiB,GAAG;AACpC,aAAO,kBAAkB,KAAK,CAAC,iBAAiB,iBAAiB,KAAK;AAAA,IACxE;AACA,WAAO,UAAU;AAAA,EACnB,GAAG,CAAC,mBAAmB,KAAK,CAAC;AAE7B,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAwB;AACvB,UAAI,CAAC,YAAY,CAAC,kBAAmB,iBAAgB,OAAO,CAAC;AAAA,IAC/D;AAAA,IACA,CAAC,UAAU,iBAAiB,OAAO,iBAAiB;AAAA,EACtD;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,GAAwB,aAAqB;AAC5C,UAAI,CAAC,YAAY,EAAE,QAAQ,aAAa;AACtC,cAAM,eAAe,4BAA4B,UAAU,CAAC,SAAS,KAAK,UAAU,QAAQ;AAC5F,YAAI,4BAA4B,eAAe,CAAC,GAAG,KAAK;AACtD,sCAA4B,eAAe,CAAC,GAAG,KAAK,SAAS,MAAM;AAAA,iBAC5D,iBAAiB,4BAA4B,SAAS,GAAG;AAChE,sCAA4B,CAAC,GAAG,KAAK,SAAS,MAAM;AAAA,QACtD;AAAA,MACF;AAEA,UAAI,CAAC,YAAY,EAAE,QAAQ,WAAW;AACpC,cAAM,eAAe,4BAA4B,UAAU,CAAC,SAAS,KAAK,UAAU,QAAQ;AAC5F,YAAI,4BAA4B,eAAe,CAAC,GAAG,KAAK;AACtD,sCAA4B,eAAe,CAAC,GAAG,KAAK,SAAS,MAAM;AAAA,iBAC5D,iBAAiB,GAAG;AAC3B,sCAA4B,4BAA4B,SAAS,CAAC,GAAG,KAAK,SAAS,MAAM;AAAA,QAC3F;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,UAAU,2BAA2B;AAAA,EACxC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { DSAccordionContext } from '../../DSAccordionCTX.js';\n\nexport interface UseAccordionItemPropsT {\n value: string | number;\n disabled: boolean;\n applyAriaDisabled: boolean;\n}\n\ninterface UseAccordionItemReturnTypeT {\n handleOnClick: (e: React.MouseEvent) => void;\n handleOnKeyDown: (e: React.KeyboardEvent, dsIndex: number) => void;\n toggle: (e: React.MouseEvent | React.KeyboardEvent) => void;\n selected: boolean;\n}\n\nexport const useAccordionItem = ({\n value,\n disabled,\n applyAriaDisabled,\n}: UseAccordionItemPropsT): UseAccordionItemReturnTypeT => {\n const { actualActiveValue, setActiveValues, focusableChildrenReferences } = useContext(DSAccordionContext);\n\n const selected = useMemo(() => {\n if (Array.isArray(actualActiveValue)) {\n return actualActiveValue.some((currentValue) => currentValue === value);\n }\n return value === actualActiveValue;\n }, [actualActiveValue, value]);\n\n // Unified toggle usable from both pointer and keyboard events. The <summary>\n // trigger (native disclosure) does not synthesize a click on Enter/Space the\n // way the old <button> did, so the keydown handler calls this directly.\n const toggle = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n if (!disabled && !applyAriaDisabled) setActiveValues(value, e);\n },\n [disabled, applyAriaDisabled, setActiveValues, value],\n );\n\n const handleOnClick = useCallback((e: React.MouseEvent) => toggle(e), [toggle]);\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent, _dsIndex: number) => {\n if (!disabled && e.key === 'ArrowDown') {\n const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);\n if (focusableChildrenReferences[currentIndex + 1]?.ref?.current)\n focusableChildrenReferences[currentIndex + 1]?.ref?.current?.focus();\n else if (currentIndex === focusableChildrenReferences.length - 1) {\n focusableChildrenReferences[0]?.ref?.current?.focus();\n }\n }\n\n if (!disabled && e.key === 'ArrowUp') {\n const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);\n if (focusableChildrenReferences[currentIndex - 1]?.ref?.current)\n focusableChildrenReferences[currentIndex - 1]?.ref?.current?.focus();\n else if (currentIndex === 0) {\n focusableChildrenReferences[focusableChildrenReferences.length - 1]?.ref?.current?.focus();\n }\n }\n },\n [disabled, focusableChildrenReferences],\n );\n\n return {\n handleOnClick,\n handleOnKeyDown,\n toggle,\n selected,\n };\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,YAAY,eAAe;AACjD,SAAS,0BAA0B;AAe5B,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,MAA2D;AACzD,QAAM,EAAE,mBAAmB,iBAAiB,4BAA4B,IAAI,WAAW,kBAAkB;AAEzG,QAAM,WAAW,QAAQ,MAAM;AAC7B,QAAI,MAAM,QAAQ,iBAAiB,GAAG;AACpC,aAAO,kBAAkB,KAAK,CAAC,iBAAiB,iBAAiB,KAAK;AAAA,IACxE;AACA,WAAO,UAAU;AAAA,EACnB,GAAG,CAAC,mBAAmB,KAAK,CAAC;AAK7B,QAAM,SAAS;AAAA,IACb,CAAC,MAA8C;AAC7C,UAAI,CAAC,YAAY,CAAC,kBAAmB,iBAAgB,OAAO,CAAC;AAAA,IAC/D;AAAA,IACA,CAAC,UAAU,mBAAmB,iBAAiB,KAAK;AAAA,EACtD;AAEA,QAAM,gBAAgB,YAAY,CAAC,MAAwB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC;AAE9E,QAAM,kBAAkB;AAAA,IACtB,CAAC,GAAwB,aAAqB;AAC5C,UAAI,CAAC,YAAY,EAAE,QAAQ,aAAa;AACtC,cAAM,eAAe,4BAA4B,UAAU,CAAC,SAAS,KAAK,UAAU,QAAQ;AAC5F,YAAI,4BAA4B,eAAe,CAAC,GAAG,KAAK;AACtD,sCAA4B,eAAe,CAAC,GAAG,KAAK,SAAS,MAAM;AAAA,iBAC5D,iBAAiB,4BAA4B,SAAS,GAAG;AAChE,sCAA4B,CAAC,GAAG,KAAK,SAAS,MAAM;AAAA,QACtD;AAAA,MACF;AAEA,UAAI,CAAC,YAAY,EAAE,QAAQ,WAAW;AACpC,cAAM,eAAe,4BAA4B,UAAU,CAAC,SAAS,KAAK,UAAU,QAAQ;AAC5F,YAAI,4BAA4B,eAAe,CAAC,GAAG,KAAK;AACtD,sCAA4B,eAAe,CAAC,GAAG,KAAK,SAAS,MAAM;AAAA,iBAC5D,iBAAiB,GAAG;AAC3B,sCAA4B,4BAA4B,SAAS,CAAC,GAAG,KAAK,SAAS,MAAM;AAAA,QAC3F;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,UAAU,2BAA2B;AAAA,EACxC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
6
6
  "names": []
7
7
  }
package/dist/types/constants/index.d.ts CHANGED
@@ -7,6 +7,7 @@ export declare const DSAccordionSlots: {
7
7
  };
8
8
  export declare const ACCORDION_ITEM_SLOTS: {
9
9
  readonly ITEM_CONTAINER: "item-container";
10
+ readonly ITEM_DETAILS: "item-details";
10
11
  readonly ITEM_HEADER_CONTAINER: "item-header-container";
11
12
  readonly ITEM_HEADER: "item-header";
12
13
  readonly ITEM_HEADER_ADDON: "item-header-addon";
@@ -19,6 +20,7 @@ export declare const ACCORDION_ITEM_SLOTS: {
19
20
  };
20
21
  export declare const DSAccordionItemSlots: {
21
22
  readonly ITEM_CONTAINER: "item-container";
23
+ readonly ITEM_DETAILS: "item-details";
22
24
  readonly ITEM_HEADER_CONTAINER: "item-header-container";
23
25
  readonly ITEM_HEADER: "item-header";
24
26
  readonly ITEM_HEADER_ADDON: "item-header-addon";
@@ -34,6 +36,7 @@ export declare const ACCORDION_DATA_TESTID: {
34
36
  ITEM_HEADER: string;
35
37
  ITEM_CONTAINER: string;
36
38
  CONTAINER: string;
39
+ ITEM_DETAILS: "ds-accordion-item-details";
37
40
  ITEM_HEADER_CONTAINER: "ds-accordion-item-header-container";
38
41
  ITEM_HEADER_ADDON: "ds-accordion-item-header-addon";
39
42
  ITEM_HEADER_TITLE_CONTAINER: "ds-accordion-item-header-titles-container";
@@ -47,6 +50,7 @@ export declare const DSAccordionDataTestid: {
47
50
  ITEM_HEADER: string;
48
51
  ITEM_CONTAINER: string;
49
52
  CONTAINER: string;
53
+ ITEM_DETAILS: "ds-accordion-item-details";
50
54
  ITEM_HEADER_CONTAINER: "ds-accordion-item-header-container";
51
55
  ITEM_HEADER_ADDON: "ds-accordion-item-header-addon";
52
56
  ITEM_HEADER_TITLE_CONTAINER: "ds-accordion-item-header-titles-container";
package/dist/types/parts/accordionItem/styles.d.ts CHANGED
@@ -2,6 +2,7 @@ interface StyledItemHeaderPropsT {
2
2
  withCustomActions: boolean;
3
3
  withSecondaryTitle?: string;
4
4
  isDSMobile?: boolean;
5
+ disabled?: boolean;
5
6
  applyAriaDisabled: boolean;
6
7
  }
7
8
  interface StyledItemTitlesPropsT {
@@ -42,7 +43,8 @@ interface StyledItemCustomActionsPropsT {
42
43
  isDSMobile?: boolean;
43
44
  }
44
45
  export declare const StyledItemContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledItemContainerPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
45
- export declare const StyledItemHeader: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, StyledItemHeaderPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;
46
+ export declare const StyledItemDetails: import("styled-components").StyledComponent<"details", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"details">, never>;
47
+ export declare const StyledItemHeader: import("styled-components").StyledComponent<"summary", import("@elliemae/ds-system").Theme, StyledItemHeaderPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"summary">, never>;
46
48
  export declare const StyledItemContent: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledItemContentPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
47
49
  export declare const StyledItemAddon: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledItemAddonPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
48
50
  export declare const StyledItemTitles: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledItemTitlesPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
package/dist/types/parts/accordionItem/useAccordionItem.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface UseAccordionItemPropsT {
7
7
  interface UseAccordionItemReturnTypeT {
8
8
  handleOnClick: (e: React.MouseEvent) => void;
9
9
  handleOnKeyDown: (e: React.KeyboardEvent, dsIndex: number) => void;
10
+ toggle: (e: React.MouseEvent | React.KeyboardEvent) => void;
10
11
  selected: boolean;
11
12
  }
12
13
  export declare const useAccordionItem: ({ value, disabled, applyAriaDisabled, }: UseAccordionItemPropsT) => UseAccordionItemReturnTypeT;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-accordion",
3
- "version": "3.70.0-next.48",
3
+ "version": "3.70.0-next.49",
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-floating-context": "3.70.0-next.48",
40
- "@elliemae/ds-grid": "3.70.0-next.48",
41
- "@elliemae/ds-button-v2": "3.70.0-next.48",
42
- "@elliemae/ds-icons": "3.70.0-next.48",
43
- "@elliemae/ds-props-helpers": "3.70.0-next.48",
44
- "@elliemae/ds-system": "3.70.0-next.48"
39
+ "@elliemae/ds-button-v2": "3.70.0-next.49",
40
+ "@elliemae/ds-icons": "3.70.0-next.49",
41
+ "@elliemae/ds-grid": "3.70.0-next.49",
42
+ "@elliemae/ds-system": "3.70.0-next.49",
43
+ "@elliemae/ds-floating-context": "3.70.0-next.49",
44
+ "@elliemae/ds-props-helpers": "3.70.0-next.49"
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.9",
54
- "@elliemae/ds-monorepo-devops": "3.70.0-next.48",
55
- "@elliemae/ds-test-utils": "3.70.0-next.48"
54
+ "@elliemae/ds-test-utils": "3.70.0-next.49",
55
+ "@elliemae/ds-monorepo-devops": "3.70.0-next.49"
56
56
  },
57
57
  "peerDependencies": {
58
58
  "lodash-es": "^4.18.1",