@elliemae/ds-accordion 3.22.0-next.2 → 3.22.0-next.21
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.
- package/dist/cjs/DSAccordion.js +2 -2
- package/dist/cjs/DSAccordion.js.map +2 -2
- package/dist/cjs/defaultProps.js +2 -1
- package/dist/cjs/defaultProps.js.map +2 -2
- package/dist/cjs/exported-related/{theming.js → DSAccordionDefinitions.js} +22 -19
- package/dist/cjs/exported-related/DSAccordionDefinitions.js.map +7 -0
- package/dist/cjs/exported-related/index.js +1 -2
- package/dist/cjs/exported-related/index.js.map +2 -2
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/parts/accordionContent/AccordionContent.js +21 -7
- package/dist/cjs/parts/accordionContent/AccordionContent.js.map +2 -2
- package/dist/cjs/parts/accordionItem/DSAccordionItem.js +185 -75
- package/dist/cjs/parts/accordionItem/DSAccordionItem.js.map +2 -2
- package/dist/cjs/parts/accordionItem/styles.js +15 -10
- package/dist/cjs/parts/accordionItem/styles.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +8 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/DSAccordion.js +1 -1
- package/dist/esm/DSAccordion.js.map +1 -1
- package/dist/esm/defaultProps.js +2 -1
- package/dist/esm/defaultProps.js.map +2 -2
- package/dist/esm/exported-related/DSAccordionDefinitions.js +28 -0
- package/dist/esm/exported-related/DSAccordionDefinitions.js.map +7 -0
- package/dist/esm/exported-related/index.js +1 -2
- package/dist/esm/exported-related/index.js.map +2 -2
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/parts/accordionContent/AccordionContent.js +22 -8
- package/dist/esm/parts/accordionContent/AccordionContent.js.map +2 -2
- package/dist/esm/parts/accordionItem/DSAccordionItem.js +186 -76
- package/dist/esm/parts/accordionItem/DSAccordionItem.js.map +2 -2
- package/dist/esm/parts/accordionItem/styles.js +15 -10
- package/dist/esm/parts/accordionItem/styles.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +14 -3
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/DSAccordion.d.ts +1 -0
- package/dist/types/exported-related/DSAccordionDefinitions.d.ts +19 -0
- package/dist/types/exported-related/index.d.ts +1 -2
- package/dist/types/parts/accordionContent/AccordionContent.d.ts +1 -0
- package/dist/types/parts/accordionContent/styles.d.ts +1 -0
- package/dist/types/parts/accordionItem/DSAccordionItem.d.ts +1 -0
- package/dist/types/parts/accordionItem/styles.d.ts +46 -0
- package/dist/types/react-desc-prop-types.d.ts +3 -0
- package/package.json +12 -10
- package/dist/cjs/exported-related/DSAccordionDatatestid.js +0 -43
- package/dist/cjs/exported-related/DSAccordionDatatestid.js.map +0 -7
- package/dist/cjs/exported-related/theming.js.map +0 -7
- package/dist/esm/exported-related/DSAccordionDatatestid.js +0 -13
- package/dist/esm/exported-related/DSAccordionDatatestid.js.map +0 -7
- package/dist/esm/exported-related/theming.js +0 -25
- package/dist/esm/exported-related/theming.js.map +0 -7
- package/dist/types/exported-related/DSAccordionDatatestid.d.ts +0 -8
- package/dist/types/exported-related/theming.d.ts +0 -19
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
useGetXstyledProps
|
|
9
9
|
} from "@elliemae/ds-props-helpers";
|
|
10
10
|
import { Grid } from "@elliemae/ds-grid";
|
|
11
|
-
import { useIsShowingEllipsis } from "@elliemae/ds-utilities";
|
|
11
|
+
import { mergeRefs, useIsShowingEllipsis } from "@elliemae/ds-utilities";
|
|
12
12
|
import { DSButtonV2, BUTTON_TYPES } from "@elliemae/ds-button-v2";
|
|
13
13
|
import { DSPopperJS } from "@elliemae/ds-popperjs";
|
|
14
14
|
import { accordionItemDefaultProps } from "../../defaultProps.js";
|
|
@@ -26,13 +26,15 @@ import {
|
|
|
26
26
|
} from "./styles.js";
|
|
27
27
|
import { useAccordionItem } from "./useAccordionItem.js";
|
|
28
28
|
import { DSAccordionContext } from "../../DSAccordionCTX.js";
|
|
29
|
-
import { DSAccordionDataTestid } from "../../exported-related/
|
|
29
|
+
import { DSAccordionDataTestid } from "../../exported-related/DSAccordionDefinitions.js";
|
|
30
30
|
import { accordionItemPropTypes } from "../../react-desc-prop-types.js";
|
|
31
31
|
const DSAccordionItem = (props) => {
|
|
32
32
|
const propsWithDefaults = useMemoMergePropsWithDefault(
|
|
33
33
|
props,
|
|
34
34
|
accordionItemDefaultProps
|
|
35
35
|
);
|
|
36
|
+
const getOwnerProps = useCallback(() => props, [props]);
|
|
37
|
+
const getOwnerPropsArguments = useCallback(() => ({}), []);
|
|
36
38
|
const {
|
|
37
39
|
children,
|
|
38
40
|
title,
|
|
@@ -46,6 +48,8 @@ const DSAccordionItem = (props) => {
|
|
|
46
48
|
renderCustomActions,
|
|
47
49
|
CustomActions,
|
|
48
50
|
xStyledPropsContent,
|
|
51
|
+
keepContentMounted,
|
|
52
|
+
innerRef,
|
|
49
53
|
...rest
|
|
50
54
|
} = propsWithDefaults;
|
|
51
55
|
const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });
|
|
@@ -57,26 +61,51 @@ const DSAccordionItem = (props) => {
|
|
|
57
61
|
props: { isDSMobile }
|
|
58
62
|
} = useContext(DSAccordionContext);
|
|
59
63
|
const [showPopover, setShowPopover] = useState(false);
|
|
60
|
-
const [referenceElement, setReferenceElement] = useState();
|
|
64
|
+
const [referenceElement, setReferenceElement] = useState(null);
|
|
61
65
|
const CustomActionsContent = useMemo(() => {
|
|
62
66
|
if (!isDSMobile && customActions?.length > 0)
|
|
63
|
-
return /* @__PURE__ */ jsx(
|
|
64
|
-
|
|
67
|
+
return /* @__PURE__ */ jsx(
|
|
68
|
+
StyledItemCustomActions,
|
|
65
69
|
{
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
70
|
+
isDSMobile,
|
|
71
|
+
getOwnerProps,
|
|
72
|
+
getOwnerPropsArguments,
|
|
73
|
+
children: customActions?.map(({ onClick, id, ...otherProps }) => /* @__PURE__ */ jsx(
|
|
74
|
+
DSButtonV2,
|
|
75
|
+
{
|
|
76
|
+
onClick: (e) => {
|
|
77
|
+
e.stopPropagation();
|
|
78
|
+
if (onClick)
|
|
79
|
+
onClick(e);
|
|
80
|
+
},
|
|
81
|
+
...otherProps,
|
|
82
|
+
buttonType: BUTTON_TYPES.OUTLINE
|
|
83
|
+
},
|
|
84
|
+
id
|
|
85
|
+
))
|
|
86
|
+
}
|
|
87
|
+
);
|
|
76
88
|
if (!isDSMobile && (renderCustomActions || CustomActions))
|
|
77
|
-
return /* @__PURE__ */ jsx(
|
|
89
|
+
return /* @__PURE__ */ jsx(
|
|
90
|
+
StyledItemCustomActions,
|
|
91
|
+
{
|
|
92
|
+
isDSMobile,
|
|
93
|
+
getOwnerProps,
|
|
94
|
+
getOwnerPropsArguments,
|
|
95
|
+
children: CustomActions !== void 0 ? /* @__PURE__ */ jsx(CustomActions, { allRefs: allChildrenReferences, actualActiveValue }) : renderCustomActions?.({ allRefs: allChildrenReferences, actualActiveValue })
|
|
96
|
+
}
|
|
97
|
+
);
|
|
78
98
|
return null;
|
|
79
|
-
}, [
|
|
99
|
+
}, [
|
|
100
|
+
CustomActions,
|
|
101
|
+
actualActiveValue,
|
|
102
|
+
allChildrenReferences,
|
|
103
|
+
customActions,
|
|
104
|
+
getOwnerProps,
|
|
105
|
+
getOwnerPropsArguments,
|
|
106
|
+
isDSMobile,
|
|
107
|
+
renderCustomActions
|
|
108
|
+
]);
|
|
80
109
|
const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();
|
|
81
110
|
const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();
|
|
82
111
|
const onKeyDownWithIndex = useCallback(
|
|
@@ -112,22 +141,51 @@ const DSAccordionItem = (props) => {
|
|
|
112
141
|
width: "100%",
|
|
113
142
|
children: [
|
|
114
143
|
/* @__PURE__ */ jsxs(Grid, { cols: ["20px", "auto"], children: [
|
|
115
|
-
/* @__PURE__ */ jsx(
|
|
116
|
-
|
|
117
|
-
StyledPrimaryTitle,
|
|
144
|
+
/* @__PURE__ */ jsx(
|
|
145
|
+
StyledItemAddon,
|
|
118
146
|
{
|
|
119
|
-
ref: setPrimaryElement,
|
|
120
|
-
...title ? { id: `accordion_${title || ""}id-${value}` } : void 0,
|
|
121
147
|
disabled,
|
|
122
|
-
|
|
148
|
+
getOwnerProps,
|
|
149
|
+
getOwnerPropsArguments,
|
|
150
|
+
children: selected ? /* @__PURE__ */ jsx(IconOpened, {}) : /* @__PURE__ */ jsx(IconClosed, {})
|
|
151
|
+
}
|
|
152
|
+
),
|
|
153
|
+
/* @__PURE__ */ jsx(
|
|
154
|
+
StyledItemTitles,
|
|
155
|
+
{
|
|
123
156
|
withSecondaryTitle: secondaryTitle,
|
|
124
|
-
|
|
157
|
+
selected,
|
|
158
|
+
getOwnerProps,
|
|
159
|
+
getOwnerPropsArguments,
|
|
160
|
+
children: /* @__PURE__ */ jsx(
|
|
161
|
+
StyledPrimaryTitle,
|
|
162
|
+
{
|
|
163
|
+
ref: setPrimaryElement,
|
|
164
|
+
...title ? { id: `accordion_${title || ""}id-${value}` } : void 0,
|
|
165
|
+
disabled,
|
|
166
|
+
selected,
|
|
167
|
+
withSecondaryTitle: Boolean(secondaryTitle),
|
|
168
|
+
getOwnerProps,
|
|
169
|
+
getOwnerPropsArguments,
|
|
170
|
+
children: title
|
|
171
|
+
}
|
|
172
|
+
)
|
|
125
173
|
}
|
|
126
|
-
)
|
|
174
|
+
)
|
|
127
175
|
] }),
|
|
128
176
|
secondaryTitle && /* @__PURE__ */ jsxs(Grid, { cols: ["20px", "auto"], children: [
|
|
129
177
|
/* @__PURE__ */ jsx("div", {}),
|
|
130
|
-
/* @__PURE__ */ jsx(
|
|
178
|
+
/* @__PURE__ */ jsx(
|
|
179
|
+
StyledSecondaryTitle,
|
|
180
|
+
{
|
|
181
|
+
ref: setSecondaryElement,
|
|
182
|
+
disabled,
|
|
183
|
+
selected,
|
|
184
|
+
getOwnerProps,
|
|
185
|
+
getOwnerPropsArguments,
|
|
186
|
+
children: secondaryTitle
|
|
187
|
+
}
|
|
188
|
+
)
|
|
131
189
|
] })
|
|
132
190
|
]
|
|
133
191
|
}
|
|
@@ -137,6 +195,8 @@ const DSAccordionItem = (props) => {
|
|
|
137
195
|
handleOnBlur,
|
|
138
196
|
secondaryTitle,
|
|
139
197
|
disabled,
|
|
198
|
+
getOwnerProps,
|
|
199
|
+
getOwnerPropsArguments,
|
|
140
200
|
selected,
|
|
141
201
|
IconOpened,
|
|
142
202
|
IconClosed,
|
|
@@ -156,6 +216,8 @@ const DSAccordionItem = (props) => {
|
|
|
156
216
|
isDSMobile: true,
|
|
157
217
|
withSecondaryTitle: secondaryTitle,
|
|
158
218
|
selected,
|
|
219
|
+
getOwnerProps,
|
|
220
|
+
getOwnerPropsArguments,
|
|
159
221
|
children: /* @__PURE__ */ jsx(
|
|
160
222
|
StyledPrimaryTitle,
|
|
161
223
|
{
|
|
@@ -164,64 +226,112 @@ const DSAccordionItem = (props) => {
|
|
|
164
226
|
disabled,
|
|
165
227
|
isDSMobile: true,
|
|
166
228
|
selected,
|
|
167
|
-
withSecondaryTitle: secondaryTitle,
|
|
229
|
+
withSecondaryTitle: Boolean(secondaryTitle),
|
|
230
|
+
getOwnerProps,
|
|
231
|
+
getOwnerPropsArguments,
|
|
168
232
|
children: title
|
|
169
233
|
}
|
|
170
234
|
)
|
|
171
235
|
}
|
|
172
236
|
),
|
|
173
|
-
/* @__PURE__ */ jsx(
|
|
174
|
-
|
|
175
|
-
[handleOnFocus, handleOnBlur, secondaryTitle, selected, setPrimaryElement, title, disabled, IconOpened, IconClosed]
|
|
176
|
-
);
|
|
177
|
-
return /* @__PURE__ */ jsxs(StyledItemContainer, { "data-testid": DSAccordionDataTestid.ITEM.CONTAINER, className, ...xstyledAttrs, children: [
|
|
178
|
-
/* @__PURE__ */ jsxs(StyledItemHeaderContainer, { disabled, ref: setReferenceElement, children: [
|
|
179
|
-
/* @__PURE__ */ jsxs(
|
|
180
|
-
StyledItemHeader,
|
|
237
|
+
/* @__PURE__ */ jsx(
|
|
238
|
+
StyledItemAddon,
|
|
181
239
|
{
|
|
182
|
-
type: "button",
|
|
183
|
-
withCustomActions: (customActions?.length > 0 || renderCustomActions !== void 0) && !isDSMobile,
|
|
184
|
-
withSecondaryTitle: secondaryTitle,
|
|
185
|
-
tabIndex: !disabled ? 0 : void 0,
|
|
186
240
|
disabled,
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
isDSMobile,
|
|
191
|
-
"data-testid": DSAccordionDataTestid.ITEM.HEADER,
|
|
192
|
-
id: `ds-accordion-header-${value}`,
|
|
193
|
-
"aria-expanded": selected,
|
|
194
|
-
"aria-disabled": disabled,
|
|
195
|
-
"aria-controls": `ds-accordion-content-${value}`,
|
|
196
|
-
...handlers,
|
|
197
|
-
...globalAttrs,
|
|
198
|
-
children: [
|
|
199
|
-
isDSMobile ? titleMobile : titleDesktop,
|
|
200
|
-
/* @__PURE__ */ jsx(DSPopperJS, { referenceElement, showPopover: !selected && showPopover, children: /* @__PURE__ */ jsxs(StyledTooltipContent, { children: [
|
|
201
|
-
/* @__PURE__ */ jsx("p", { children: title }),
|
|
202
|
-
/* @__PURE__ */ jsxs("p", { children: [
|
|
203
|
-
" ",
|
|
204
|
-
secondaryTitle
|
|
205
|
-
] })
|
|
206
|
-
] }) })
|
|
207
|
-
]
|
|
241
|
+
isDSMobile: true,
|
|
242
|
+
getOwnerProps,
|
|
243
|
+
getOwnerPropsArguments,
|
|
244
|
+
children: selected ? /* @__PURE__ */ jsx(IconOpened, { isDSMobile: true }) : /* @__PURE__ */ jsx(IconClosed, { isDSMobile: true })
|
|
208
245
|
}
|
|
209
|
-
)
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
246
|
+
)
|
|
247
|
+
] }) }),
|
|
248
|
+
[
|
|
249
|
+
handleOnFocus,
|
|
250
|
+
handleOnBlur,
|
|
251
|
+
secondaryTitle,
|
|
252
|
+
selected,
|
|
253
|
+
getOwnerProps,
|
|
254
|
+
getOwnerPropsArguments,
|
|
255
|
+
setPrimaryElement,
|
|
256
|
+
title,
|
|
257
|
+
disabled,
|
|
258
|
+
IconOpened,
|
|
259
|
+
IconClosed
|
|
260
|
+
]
|
|
261
|
+
);
|
|
262
|
+
return /* @__PURE__ */ jsxs(
|
|
263
|
+
StyledItemContainer,
|
|
264
|
+
{
|
|
265
|
+
"data-testid": DSAccordionDataTestid.ITEM_CONTAINER,
|
|
266
|
+
className,
|
|
267
|
+
...xstyledAttrs,
|
|
268
|
+
getOwnerProps,
|
|
269
|
+
getOwnerPropsArguments,
|
|
270
|
+
children: [
|
|
271
|
+
/* @__PURE__ */ jsxs(
|
|
272
|
+
StyledItemHeaderContainer,
|
|
273
|
+
{
|
|
274
|
+
disabled,
|
|
275
|
+
ref: setReferenceElement,
|
|
276
|
+
getOwnerProps,
|
|
277
|
+
getOwnerPropsArguments,
|
|
278
|
+
children: [
|
|
279
|
+
/* @__PURE__ */ jsxs(
|
|
280
|
+
StyledItemHeader,
|
|
281
|
+
{
|
|
282
|
+
withCustomActions: (customActions?.length > 0 || renderCustomActions !== void 0) && !isDSMobile,
|
|
283
|
+
withSecondaryTitle: secondaryTitle,
|
|
284
|
+
tabIndex: !disabled ? 0 : void 0,
|
|
285
|
+
disabled,
|
|
286
|
+
"data-disabled": disabled,
|
|
287
|
+
ref: mergeRefs(allChildrenReferences[dsIndex], innerRef),
|
|
288
|
+
onKeyDown: onKeyDownWithIndex,
|
|
289
|
+
isDSMobile,
|
|
290
|
+
"data-testid": DSAccordionDataTestid.ITEM_HEADER_CONTAINER,
|
|
291
|
+
id: `ds-accordion-header-${value}`,
|
|
292
|
+
"aria-expanded": selected,
|
|
293
|
+
"aria-disabled": disabled,
|
|
294
|
+
"aria-controls": `ds-accordion-content-${value}`,
|
|
295
|
+
...handlers,
|
|
296
|
+
...globalAttrs,
|
|
297
|
+
type: "button",
|
|
298
|
+
getOwnerProps,
|
|
299
|
+
getOwnerPropsArguments,
|
|
300
|
+
children: [
|
|
301
|
+
isDSMobile ? titleMobile : titleDesktop,
|
|
302
|
+
/* @__PURE__ */ jsx(DSPopperJS, { referenceElement, showPopover: !selected && showPopover, children: /* @__PURE__ */ jsxs(StyledTooltipContent, { getOwnerProps, getOwnerPropsArguments, children: [
|
|
303
|
+
/* @__PURE__ */ jsx("p", { children: title }),
|
|
304
|
+
/* @__PURE__ */ jsxs("p", { children: [
|
|
305
|
+
" ",
|
|
306
|
+
secondaryTitle
|
|
307
|
+
] })
|
|
308
|
+
] }) })
|
|
309
|
+
]
|
|
310
|
+
}
|
|
311
|
+
),
|
|
312
|
+
CustomActionsContent
|
|
313
|
+
]
|
|
314
|
+
}
|
|
315
|
+
),
|
|
316
|
+
(selected || keepContentMounted) && /* @__PURE__ */ jsx(
|
|
317
|
+
StyledItemContent,
|
|
318
|
+
{
|
|
319
|
+
"data-testid": DSAccordionDataTestid.ITEM_CONTENT_CONTAINER,
|
|
320
|
+
"aria-labelledby": `ds-accordion-header-${value}`,
|
|
321
|
+
role: "region",
|
|
322
|
+
isDSMobile,
|
|
323
|
+
id: `ds-accordion-content-${value}`,
|
|
324
|
+
...xstyledContentAttrs,
|
|
325
|
+
selected,
|
|
326
|
+
keepContentMounted,
|
|
327
|
+
getOwnerProps,
|
|
328
|
+
getOwnerPropsArguments,
|
|
329
|
+
children
|
|
330
|
+
}
|
|
331
|
+
)
|
|
332
|
+
]
|
|
333
|
+
}
|
|
334
|
+
);
|
|
225
335
|
};
|
|
226
336
|
DSAccordionItem.displayName = "DSAccordionItem";
|
|
227
337
|
const DSAccordionItemWithSchema = describe(DSAccordionItem);
|
|
@@ -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 type { WeakValidationMap } from 'react';\nimport React, { useState, useContext, useCallback, useMemo } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useIsShowingEllipsis } from '@elliemae/ds-utilities';\nimport { DSButtonV2, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { accordionItemDefaultProps } from '../../defaultProps.js';\nimport {\n StyledItemAddon,\n StyledItemContainer,\n StyledItemContent,\n StyledItemCustomActions,\n StyledItemHeader,\n StyledItemHeaderContainer,\n StyledItemTitles,\n StyledPrimaryTitle,\n StyledSecondaryTitle,\n StyledTooltipContent,\n} from './styles.js';\nimport { useAccordionItem } from './useAccordionItem.js';\nimport { DSAccordionContext } from '../../DSAccordionCTX.js';\nimport { DSAccordionDataTestid } from '../../exported-related/DSAccordionDatatestid.js';\nimport { accordionItemPropTypes } from '../../react-desc-prop-types.js';\nimport type { DSAccordionT } from '../../react-desc-prop-types.js';\n\nconst DSAccordionItem = (props: DSAccordionT.ItemProps): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(\n props,\n accordionItemDefaultProps,\n ) as DSAccordionT.InternalItemProps;\n\n const {\n children,\n title,\n secondaryTitle,\n customActions,\n iconOpened: IconOpened,\n iconClosed: IconClosed,\n value,\n disabled,\n dsIndex,\n renderCustomActions,\n CustomActions,\n xStyledPropsContent,\n ...rest\n } = propsWithDefaults;\n\n const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });\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>();\n\n const CustomActionsContent = useMemo(() => {\n if (!isDSMobile && customActions?.length > 0)\n return (\n <StyledItemCustomActions isDSMobile={isDSMobile}>\n {customActions?.map(({ onClick, id, ...otherProps }) => (\n <DSButtonV2\n key={id}\n onClick={(e: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>): void => {\n e.stopPropagation();\n if (onClick) onClick(e as React.MouseEvent<HTMLElement, MouseEvent>);\n }}\n {...otherProps}\n buttonType={BUTTON_TYPES.OUTLINE}\n />\n ))}\n </StyledItemCustomActions>\n );\n\n if (!isDSMobile && (renderCustomActions || CustomActions))\n return (\n <StyledItemCustomActions isDSMobile={isDSMobile}>\n {CustomActions !== undefined ? (\n <CustomActions allRefs={allChildrenReferences} actualActiveValue={actualActiveValue} />\n ) : (\n renderCustomActions?.({ allRefs: allChildrenReferences, actualActiveValue })\n )}\n </StyledItemCustomActions>\n );\n return null;\n }, [CustomActions, actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);\n\n const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();\n\n const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();\n\n const onKeyDownWithIndex = useCallback(\n (e: React.KeyboardEvent) => {\n handleOnKeyDown(e, dsIndex);\n },\n [dsIndex, handleOnKeyDown],\n );\n const handleOnFocus = useCallback(\n () => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis),\n [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis],\n );\n\n const handleOnBlur = useCallback(() => setShowPopover(false), []);\n\n const { className, ...globalAttrs } = useGetGlobalAttributes(rest, {\n onClick: handleOnClick,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const handlers = {\n onClick: handleOnClick,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n };\n\n const titleDesktop = useMemo(\n () => (\n <Grid\n onMouseEnter={handleOnFocus}\n onMouseLeave={handleOnBlur}\n rows={['auto', 'auto']}\n rowGap={secondaryTitle ? '3px' : '0px'}\n padding=\"6px 0px\"\n width=\"100%\"\n >\n <Grid cols={['20px', 'auto']}>\n <StyledItemAddon disabled={disabled}>{selected ? <IconOpened /> : <IconClosed />}</StyledItemAddon>\n <StyledItemTitles withSecondaryTitle={secondaryTitle} selected={selected}>\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n {...(title ? { id: `accordion_${title || ''}id-${value}` } : undefined)}\n disabled={disabled}\n selected={selected}\n withSecondaryTitle={secondaryTitle}\n >\n {title}\n </StyledPrimaryTitle>\n </StyledItemTitles>\n </Grid>\n {secondaryTitle && (\n <Grid cols={['20px', 'auto']}>\n <div></div>\n <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled} selected={selected}>\n {secondaryTitle}\n </StyledSecondaryTitle>\n </Grid>\n )}\n </Grid>\n ),\n [\n handleOnFocus,\n handleOnBlur,\n secondaryTitle,\n disabled,\n selected,\n IconOpened,\n IconClosed,\n setPrimaryElement,\n title,\n value,\n setSecondaryElement,\n ],\n );\n\n const titleMobile = useMemo(\n () => (\n <Grid width=\"100%\">\n <Grid cols={['auto', '20px']}>\n <StyledItemTitles\n onMouseEnter={handleOnFocus}\n onMouseLeave={handleOnBlur}\n isDSMobile\n withSecondaryTitle={secondaryTitle}\n selected={selected}\n >\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n disabled={disabled}\n isDSMobile\n selected={selected}\n withSecondaryTitle={secondaryTitle}\n >\n {title}\n </StyledPrimaryTitle>\n </StyledItemTitles>\n <StyledItemAddon disabled={disabled} isDSMobile>\n {selected ? <IconOpened isDSMobile /> : <IconClosed isDSMobile />}\n </StyledItemAddon>\n </Grid>\n </Grid>\n ),\n [handleOnFocus, handleOnBlur, secondaryTitle, selected, setPrimaryElement, title, disabled, IconOpened, IconClosed],\n );\n return (\n <StyledItemContainer data-testid={DSAccordionDataTestid.ITEM.CONTAINER} className={className} {...xstyledAttrs}>\n <StyledItemHeaderContainer disabled={disabled} ref={setReferenceElement}>\n <StyledItemHeader\n type=\"button\"\n withCustomActions={(customActions?.length > 0 || renderCustomActions !== undefined) && !isDSMobile}\n withSecondaryTitle={secondaryTitle}\n tabIndex={!disabled ? 0 : undefined}\n disabled={disabled}\n data-disabled={disabled}\n ref={allChildrenReferences[dsIndex]}\n onKeyDown={onKeyDownWithIndex}\n isDSMobile={isDSMobile}\n data-testid={DSAccordionDataTestid.ITEM.HEADER}\n id={`ds-accordion-header-${value}`}\n aria-expanded={selected}\n aria-disabled={disabled}\n aria-controls={`ds-accordion-content-${value}`}\n {...handlers}\n {...globalAttrs}\n >\n {isDSMobile ? titleMobile : titleDesktop}\n <DSPopperJS referenceElement={referenceElement} showPopover={!selected && showPopover}>\n <StyledTooltipContent>\n <p>{title}</p>\n <p> {secondaryTitle}</p>\n </StyledTooltipContent>\n </DSPopperJS>\n </StyledItemHeader>\n {CustomActionsContent}\n </StyledItemHeaderContainer>\n {selected && (\n <StyledItemContent\n data-testid={DSAccordionDataTestid.ITEM.CONTENT}\n aria-labelledby={`ds-accordion-header-${value}`}\n role=\"region\"\n isDSMobile={isDSMobile}\n id={`ds-accordion-content-${value}`}\n {...xstyledContentAttrs}\n >\n {children}\n </StyledItemContent>\n )}\n </StyledItemContainer>\n );\n};\n\nDSAccordionItem.displayName = 'DSAccordionItem';\nconst DSAccordionItemWithSchema = describe(DSAccordionItem);\nDSAccordionItemWithSchema.propTypes = accordionItemPropTypes as WeakValidationMap<unknown>;\n\nexport { DSAccordionItem, DSAccordionItemWithSchema };\nexport default DSAccordionItem;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useState, useContext, useCallback, useMemo } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport { mergeRefs, useIsShowingEllipsis } from '@elliemae/ds-utilities';\nimport { DSButtonV2, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { accordionItemDefaultProps } from '../../defaultProps.js';\nimport {\n StyledItemAddon,\n StyledItemContainer,\n StyledItemContent,\n StyledItemCustomActions,\n StyledItemHeader,\n StyledItemHeaderContainer,\n StyledItemTitles,\n StyledPrimaryTitle,\n StyledSecondaryTitle,\n StyledTooltipContent,\n} from './styles.js';\nimport { useAccordionItem } from './useAccordionItem.js';\nimport { DSAccordionContext } from '../../DSAccordionCTX.js';\nimport { DSAccordionDataTestid } from '../../exported-related/DSAccordionDefinitions.js';\nimport { accordionItemPropTypes } from '../../react-desc-prop-types.js';\nimport type { DSAccordionT } from '../../react-desc-prop-types.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 ...rest\n } = propsWithDefaults;\n\n const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });\n\n const xstyledAttrs = useGetXstyledProps(rest);\n const xstyledContentAttrs = useGetXstyledProps(xStyledPropsContent);\n\n const {\n allChildrenReferences,\n actualActiveValue,\n props: { isDSMobile },\n } = useContext(DSAccordionContext);\n\n const [showPopover, setShowPopover] = useState(false);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n\n const CustomActionsContent = useMemo(() => {\n if (!isDSMobile && customActions?.length > 0)\n return (\n <StyledItemCustomActions\n isDSMobile={isDSMobile}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {customActions?.map(({ onClick, id, ...otherProps }) => (\n <DSButtonV2\n key={id}\n onClick={(e: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>): void => {\n e.stopPropagation();\n if (onClick) onClick(e as React.MouseEvent<HTMLElement, MouseEvent>);\n }}\n {...otherProps}\n buttonType={BUTTON_TYPES.OUTLINE}\n />\n ))}\n </StyledItemCustomActions>\n );\n\n if (!isDSMobile && (renderCustomActions || CustomActions))\n return (\n <StyledItemCustomActions\n isDSMobile={isDSMobile}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {CustomActions !== undefined ? (\n <CustomActions allRefs={allChildrenReferences} actualActiveValue={actualActiveValue} />\n ) : (\n renderCustomActions?.({ allRefs: allChildrenReferences, actualActiveValue })\n )}\n </StyledItemCustomActions>\n );\n return null;\n }, [\n CustomActions,\n actualActiveValue,\n allChildrenReferences,\n customActions,\n getOwnerProps,\n getOwnerPropsArguments,\n isDSMobile,\n renderCustomActions,\n ]);\n\n const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();\n\n const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();\n\n const onKeyDownWithIndex = useCallback(\n (e: React.KeyboardEvent) => {\n handleOnKeyDown(e, dsIndex);\n },\n [dsIndex, handleOnKeyDown],\n );\n const handleOnFocus = useCallback(\n () => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis),\n [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis],\n );\n\n const handleOnBlur = useCallback(() => setShowPopover(false), []);\n\n const { className, ...globalAttrs } = useGetGlobalAttributes(rest, {\n onClick: handleOnClick,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const handlers = {\n onClick: handleOnClick,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n };\n\n const titleDesktop = useMemo(\n () => (\n <Grid\n onMouseEnter={handleOnFocus}\n onMouseLeave={handleOnBlur}\n rows={['auto', 'auto']}\n rowGap={secondaryTitle ? '3px' : '0px'}\n padding=\"6px 0px\"\n width=\"100%\"\n >\n <Grid cols={['20px', 'auto']}>\n <StyledItemAddon\n disabled={disabled}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {selected ? <IconOpened /> : <IconClosed />}\n </StyledItemAddon>\n <StyledItemTitles\n withSecondaryTitle={secondaryTitle}\n selected={selected}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n {...(title ? { id: `accordion_${title || ''}id-${value}` } : undefined)}\n disabled={disabled}\n selected={selected}\n withSecondaryTitle={Boolean(secondaryTitle)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {title}\n </StyledPrimaryTitle>\n </StyledItemTitles>\n </Grid>\n {secondaryTitle && (\n <Grid cols={['20px', 'auto']}>\n <div></div>\n <StyledSecondaryTitle\n ref={setSecondaryElement}\n disabled={disabled}\n selected={selected}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {secondaryTitle}\n </StyledSecondaryTitle>\n </Grid>\n )}\n </Grid>\n ),\n [\n handleOnFocus,\n handleOnBlur,\n secondaryTitle,\n disabled,\n getOwnerProps,\n getOwnerPropsArguments,\n selected,\n IconOpened,\n IconClosed,\n setPrimaryElement,\n title,\n value,\n setSecondaryElement,\n ],\n );\n\n const titleMobile = useMemo(\n () => (\n <Grid width=\"100%\">\n <Grid cols={['auto', '20px']}>\n <StyledItemTitles\n onMouseEnter={handleOnFocus}\n onMouseLeave={handleOnBlur}\n isDSMobile\n withSecondaryTitle={secondaryTitle}\n selected={selected}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n disabled={disabled}\n isDSMobile\n selected={selected}\n withSecondaryTitle={Boolean(secondaryTitle)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {title}\n </StyledPrimaryTitle>\n </StyledItemTitles>\n <StyledItemAddon\n disabled={disabled}\n isDSMobile\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {selected ? <IconOpened isDSMobile /> : <IconClosed isDSMobile />}\n </StyledItemAddon>\n </Grid>\n </Grid>\n ),\n [\n handleOnFocus,\n handleOnBlur,\n secondaryTitle,\n selected,\n getOwnerProps,\n getOwnerPropsArguments,\n setPrimaryElement,\n title,\n disabled,\n IconOpened,\n IconClosed,\n ],\n );\n return (\n <StyledItemContainer\n data-testid={DSAccordionDataTestid.ITEM_CONTAINER}\n className={className}\n {...xstyledAttrs}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledItemHeaderContainer\n disabled={disabled}\n ref={setReferenceElement}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledItemHeader\n withCustomActions={(customActions?.length > 0 || renderCustomActions !== undefined) && !isDSMobile}\n withSecondaryTitle={secondaryTitle}\n tabIndex={!disabled ? 0 : undefined}\n disabled={disabled}\n data-disabled={disabled}\n ref={mergeRefs(allChildrenReferences[dsIndex], innerRef)}\n onKeyDown={onKeyDownWithIndex}\n isDSMobile={isDSMobile}\n data-testid={DSAccordionDataTestid.ITEM_HEADER_CONTAINER}\n id={`ds-accordion-header-${value}`}\n aria-expanded={selected}\n aria-disabled={disabled}\n aria-controls={`ds-accordion-content-${value}`}\n {...handlers}\n {...globalAttrs}\n type=\"button\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {isDSMobile ? titleMobile : titleDesktop}\n <DSPopperJS referenceElement={referenceElement} showPopover={!selected && showPopover}>\n <StyledTooltipContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <p>{title}</p>\n <p> {secondaryTitle}</p>\n </StyledTooltipContent>\n </DSPopperJS>\n </StyledItemHeader>\n {CustomActionsContent}\n </StyledItemHeaderContainer>\n {(selected || keepContentMounted) && (\n <StyledItemContent\n data-testid={DSAccordionDataTestid.ITEM_CONTENT_CONTAINER}\n aria-labelledby={`ds-accordion-header-${value}`}\n role=\"region\"\n isDSMobile={isDSMobile}\n id={`ds-accordion-content-${value}`}\n {...xstyledContentAttrs}\n selected={selected}\n keepContentMounted={keepContentMounted}\n 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 WeakValidationMap<unknown>;\n\nexport { DSAccordionItem, DSAccordionItemWithSchema };\nexport default DSAccordionItem;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,7 +3,7 @@ import { styled, xStyledCommonProps } from "@elliemae/ds-system";
|
|
|
3
3
|
import { DSAccordionName, DSAccordionSlots } from "../../exported-related/index.js";
|
|
4
4
|
const StyledItemContainer = styled("div", {
|
|
5
5
|
name: DSAccordionName,
|
|
6
|
-
slot: DSAccordionSlots.
|
|
6
|
+
slot: DSAccordionSlots.ITEM_CONTAINER
|
|
7
7
|
})`
|
|
8
8
|
display: grid;
|
|
9
9
|
grid-template-rows: auto auto;
|
|
@@ -15,7 +15,7 @@ const StyledItemContainer = styled("div", {
|
|
|
15
15
|
`;
|
|
16
16
|
const StyledItemHeader = styled("button", {
|
|
17
17
|
name: DSAccordionName,
|
|
18
|
-
slot: DSAccordionSlots.
|
|
18
|
+
slot: DSAccordionSlots.ITEM_HEADER_CONTAINER
|
|
19
19
|
})`
|
|
20
20
|
display: flex;
|
|
21
21
|
min-height: ${({ theme, withSecondaryTitle, isDSMobile }) => isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};
|
|
@@ -44,14 +44,19 @@ const StyledItemHeader = styled("button", {
|
|
|
44
44
|
`;
|
|
45
45
|
const StyledItemContent = styled("div", {
|
|
46
46
|
name: DSAccordionName,
|
|
47
|
-
slot: DSAccordionSlots.
|
|
47
|
+
slot: DSAccordionSlots.ITEM_CONTENT_CONTAINER
|
|
48
48
|
})`
|
|
49
49
|
padding: ${({ isDSMobile }) => isDSMobile ? `3px 16px 24px 16px` : "16px 20px"};
|
|
50
|
+
${({ selected, keepContentMounted }) => {
|
|
51
|
+
if (selected)
|
|
52
|
+
return "";
|
|
53
|
+
return keepContentMounted ? "visibility: hidden; height: 0px; padding: 0px;" : "";
|
|
54
|
+
}}
|
|
50
55
|
${xStyledCommonProps};
|
|
51
56
|
`;
|
|
52
57
|
const StyledItemAddon = styled("div", {
|
|
53
58
|
name: DSAccordionName,
|
|
54
|
-
slot: DSAccordionSlots.
|
|
59
|
+
slot: DSAccordionSlots.ITEM_HEADER_ADDON
|
|
55
60
|
})`
|
|
56
61
|
height: 100%;
|
|
57
62
|
display: grid;
|
|
@@ -62,7 +67,7 @@ const StyledItemAddon = styled("div", {
|
|
|
62
67
|
`;
|
|
63
68
|
const StyledItemTitles = styled("div", {
|
|
64
69
|
name: DSAccordionName,
|
|
65
|
-
slot: DSAccordionSlots.
|
|
70
|
+
slot: DSAccordionSlots.ITEM_HEADER_TITLE_CONTAINER
|
|
66
71
|
})`
|
|
67
72
|
display: grid;
|
|
68
73
|
grid-gap: ${({ theme }) => theme.space.xxxs};
|
|
@@ -72,7 +77,7 @@ const StyledItemTitles = styled("div", {
|
|
|
72
77
|
`;
|
|
73
78
|
const StyledPrimaryTitle = styled("div", {
|
|
74
79
|
name: DSAccordionName,
|
|
75
|
-
slot: DSAccordionSlots.
|
|
80
|
+
slot: DSAccordionSlots.ITEM_HEADER_PRIMARY_TITLE
|
|
76
81
|
})`
|
|
77
82
|
margin: 0;
|
|
78
83
|
font-size: 16px;
|
|
@@ -91,7 +96,7 @@ const StyledPrimaryTitle = styled("div", {
|
|
|
91
96
|
`;
|
|
92
97
|
const StyledSecondaryTitle = styled("span", {
|
|
93
98
|
name: DSAccordionName,
|
|
94
|
-
slot: DSAccordionSlots.
|
|
99
|
+
slot: DSAccordionSlots.ITEM_HEADER_SECONDARY_TITLE
|
|
95
100
|
})`
|
|
96
101
|
margin: 0;
|
|
97
102
|
font-size: ${({ theme }) => theme.fontSizes.label[200]};
|
|
@@ -108,7 +113,7 @@ const StyledSecondaryTitle = styled("span", {
|
|
|
108
113
|
`;
|
|
109
114
|
const StyledItemCustomActions = styled("div", {
|
|
110
115
|
name: DSAccordionName,
|
|
111
|
-
slot: DSAccordionSlots.
|
|
116
|
+
slot: DSAccordionSlots.ITEM_HEADER_CUSTOM_ACTIONS_CONTAINER
|
|
112
117
|
})`
|
|
113
118
|
display: grid;
|
|
114
119
|
grid-auto-flow: column;
|
|
@@ -120,7 +125,7 @@ const StyledItemCustomActions = styled("div", {
|
|
|
120
125
|
`;
|
|
121
126
|
const StyledItemHeaderContainer = styled("div", {
|
|
122
127
|
name: DSAccordionName,
|
|
123
|
-
slot: DSAccordionSlots.
|
|
128
|
+
slot: DSAccordionSlots.ITEM_HEADER_CONTAINER
|
|
124
129
|
})`
|
|
125
130
|
display: grid;
|
|
126
131
|
grid-template-columns: auto max-content;
|
|
@@ -133,7 +138,7 @@ const StyledItemHeaderContainer = styled("div", {
|
|
|
133
138
|
`;
|
|
134
139
|
const StyledTooltipContent = styled("div", {
|
|
135
140
|
name: DSAccordionName,
|
|
136
|
-
slot: DSAccordionSlots.
|
|
141
|
+
slot: DSAccordionSlots.ITEM_HEADER_TOOLTIP
|
|
137
142
|
})`
|
|
138
143
|
padding: 8px;
|
|
139
144
|
width: 250px;
|
|
@@ -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, DSAccordionSlots } from '../../exported-related/index.js';\ninterface StyledItemHeaderPropsT {\n withCustomActions: boolean;\n withSecondaryTitle?: string;\n isDSMobile?: boolean;\n}\n\ninterface StyledItemTitlesPropsT {\n withSecondaryTitle?: string;\n isDSMobile?: boolean;\n selected: boolean;\n}\n\ninterface StyledPrimaryTitlePropsT {\n disabled: boolean;\n isDSMobile?: boolean;\n selected: boolean;\n withSecondaryTitle: boolean;\n}\n\ninterface StyledItemContentPropsT {\n isDSMobile?: boolean;\n}\n\ninterface StyledSecondaryTitlePropsT {\n disabled: boolean;\n selected: boolean;\n}\n\ninterface StyledItemAddonPropsT {\n disabled: boolean;\n isDSMobile?: boolean;\n}\n\ninterface StyledItemHeaderContainerPropsT {\n disabled: boolean;\n}\n\ninterface StyledItemCustomActionsPropsT {\n isDSMobile?: boolean;\n}\n\nexport const StyledItemContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,iBAAiB,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSAccordionName, DSAccordionSlots } from '../../exported-related/index.js';\ninterface StyledItemHeaderPropsT {\n withCustomActions: boolean;\n withSecondaryTitle?: string;\n isDSMobile?: boolean;\n}\n\ninterface StyledItemTitlesPropsT {\n withSecondaryTitle?: string;\n isDSMobile?: boolean;\n selected: boolean;\n}\n\ninterface StyledPrimaryTitlePropsT {\n disabled: boolean;\n isDSMobile?: boolean;\n selected: boolean;\n withSecondaryTitle: boolean;\n}\n\ninterface StyledItemContentPropsT {\n isDSMobile?: boolean;\n selected?: boolean;\n keepContentMounted: boolean;\n}\n\ninterface StyledSecondaryTitlePropsT {\n disabled: boolean;\n selected: boolean;\n}\n\ninterface StyledItemAddonPropsT {\n disabled: boolean;\n isDSMobile?: boolean;\n}\n\ninterface StyledItemHeaderContainerPropsT {\n disabled: boolean;\n}\n\ninterface StyledItemCustomActionsPropsT {\n isDSMobile?: boolean;\n}\n\nexport const StyledItemContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM_CONTAINER,\n})`\n display: grid;\n grid-template-rows: auto auto;\n border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n align-items: center;\n min-width: 240px;\n grid-template-columns: 100%;\n ${xStyledCommonProps};\n`;\n\nexport const StyledItemHeader = styled('button', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM_HEADER_CONTAINER,\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 }\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-radius: 2px;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n pointer-events: none;\n }\n }\n`;\n\nexport const StyledItemContent = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM_CONTENT_CONTAINER,\n})<StyledItemContentPropsT>`\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 ${xStyledCommonProps};\n`;\n\nexport const StyledItemAddon = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM_HEADER_ADDON,\n})<StyledItemAddonPropsT>`\n height: 100%;\n display: grid;\n place-items: center;\n & .em-ds-icon svg {\n fill: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.brand[800])};\n }\n`;\n\nexport const StyledItemTitles = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.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: DSAccordionSlots.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, theme }) => (disabled ? 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 width: 100%;\n display: block;\n`;\n\nexport const StyledSecondaryTitle = styled('span', {\n name: DSAccordionName,\n slot: DSAccordionSlots.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, theme }) => (disabled ? 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`;\n\nexport const StyledItemCustomActions = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM_HEADER_CUSTOM_ACTIONS_CONTAINER,\n})<StyledItemCustomActionsPropsT>`\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 16px')};\n justify-content: flex-end;\n height: 28px;\n`;\n\nexport const StyledItemHeaderContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM_HEADER_CONTAINER,\n})<StyledItemHeaderContainerPropsT>`\n display: grid;\n grid-template-columns: auto max-content;\n place-items: center;\n position: relative;\n border-radius: 2px;\n &:hover {\n ${({ disabled, theme }) => (!disabled ? `background: ${theme.colors.brand[200]};` : ``)}\n }\n`;\n\nexport const StyledTooltipContent = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.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
|
}
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
PropTypes,
|
|
4
|
+
globalAttributesPropTypes,
|
|
5
|
+
xstyledPropTypes,
|
|
6
|
+
getPropsPerDatatestIdPropTypes
|
|
7
|
+
} from "@elliemae/ds-props-helpers";
|
|
8
|
+
import { DSAccordionDataTestid } from "./exported-related/DSAccordionDefinitions.js";
|
|
3
9
|
const accordionItemPropTypes = {
|
|
4
10
|
...globalAttributesPropTypes,
|
|
5
11
|
...xstyledPropTypes,
|
|
@@ -20,7 +26,11 @@ const accordionItemPropTypes = {
|
|
|
20
26
|
).deprecated({ version: "4.x" }),
|
|
21
27
|
CustomActions: PropTypes.func.description(
|
|
22
28
|
"This property will render any JSX in the header controls area. You can access to all references and active values within the props."
|
|
23
|
-
)
|
|
29
|
+
),
|
|
30
|
+
keepContentMounted: PropTypes.bool.description(
|
|
31
|
+
"This property will keep the content mounted when the AccordionItem is closed."
|
|
32
|
+
),
|
|
33
|
+
...getPropsPerDatatestIdPropTypes(DSAccordionDataTestid)
|
|
24
34
|
};
|
|
25
35
|
const accordionPropTypes = {
|
|
26
36
|
...globalAttributesPropTypes,
|
|
@@ -33,7 +43,8 @@ const accordionPropTypes = {
|
|
|
33
43
|
]).description("Selected active value. This property makes the component a controlled one."),
|
|
34
44
|
children: PropTypes.node.description("Dimsum AccordionItems to show."),
|
|
35
45
|
allowMultipleOpen: PropTypes.bool.description("Allows multiple Dimsum AccordionItems to be open at the same time."),
|
|
36
|
-
onChange: PropTypes.func.description("Callback function once the Dimsum Accordion changes.")
|
|
46
|
+
onChange: PropTypes.func.description("Callback function once the Dimsum Accordion changes."),
|
|
47
|
+
...getPropsPerDatatestIdPropTypes(DSAccordionDataTestid)
|
|
37
48
|
};
|
|
38
49
|
export {
|
|
39
50
|
accordionItemPropTypes,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n type XstyledProps,\n getPropsPerDatatestIdPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSAccordionInternalsT } from './sharedTypes.js';\nimport { DSAccordionDataTestid } from './exported-related/DSAccordionDefinitions.js';\n\nexport declare namespace DSAccordionT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n allowMultipleOpen: boolean;\n onChange: (value: (string | number)[] | string | number | null, e: React.MouseEvent | React.KeyboardEvent) => void;\n children: React.ReactElement<InternalItemProps>[];\n isDSMobile: boolean;\n }\n\n export interface OptionalProps {\n activeValue?: DSAccordionInternalsT.InternalActiveValue;\n }\n\n export interface RequiredProps {\n children: React.ReactElement<ItemProps>[];\n }\n\n export interface Props extends OptionalProps, Partial<Omit<DefaultProps, 'children'>>, RequiredProps {}\n\n export interface ItemDefaultProps {\n iconClosed: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n iconOpened: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n title: string;\n customActions: DSAccordionInternalsT.CustomActions[];\n disabled: boolean;\n keepContentMounted: boolean;\n xStyledPropsContent: XstyledProps;\n }\n\n export interface ItemOptionalProps {\n secondaryTitle?: string;\n renderCustomActions?: (props: {\n allRefs: DSAccordionInternalsT.AllChildrenReferences;\n actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n }) => JSX.Element;\n CustomActions?: React.ComponentType<{\n allRefs: DSAccordionInternalsT.AllChildrenReferences;\n actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n }>;\n innerRef?: React.MutableRefObject<HTMLButtonElement | null> | ((_ref: HTMLButtonElement | null) => void);\n }\n\n export interface ItemRequiredProps {\n children: React.ReactNode;\n value: string | number;\n }\n\n export interface ItemProps extends ItemRequiredProps, ItemOptionalProps, Partial<ItemDefaultProps> {}\n\n export interface InternalItemProps\n extends ItemRequiredProps,\n ItemOptionalProps,\n Omit<ItemDefaultProps, 'disabled' | 'customActions' | 'iconClosed' | 'iconOpened'> {\n dsIndex: number;\n disabled: boolean;\n customActions: DSAccordionInternalsT.CustomActions[];\n iconClosed: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n iconOpened: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n }\n\n export interface InternalProps\n extends OptionalProps,\n Partial<Omit<DefaultProps, 'children' | 'isDSMobile' | 'onChange'>> {\n children: React.ReactElement<InternalItemProps>[];\n isDSMobile: boolean;\n onChange: (value: (string | number)[] | string | number | null, e: React.MouseEvent | React.KeyboardEvent) => void;\n }\n}\n\nexport const accordionItemPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n children: PropTypes.node.description('Dimsum AccordionItem content.').isRequired,\n title: PropTypes.string.description('Set a primary title.'),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n 'Dimsum AccordionItem value, this value should be unique.',\n ).isRequired,\n iconClosed: PropTypes.node.description('Custom Dimsum Icon when it is closed.').deprecated({ version: '3.x' }),\n iconOpened: PropTypes.node.description('Custom Dimsum Icon when it is open.').deprecated({ version: '3.x' }),\n secondaryTitle: PropTypes.string.description('Set a secondary title'),\n xStyledPropsContent: PropTypes.shape(xstyledPropTypes).description(\n 'This property is xStyledProps object to apply in the content wrapper',\n ),\n customActions: PropTypes.arrayOf(PropTypes.object)\n .description('Set Dimsum AccordionItem custom actions.')\n .deprecated({ version: '3.x' }),\n renderCustomActions: PropTypes.func\n .description(\n 'This property will render any JSX in the header controls area. You can access to all references and active values within the props. Rendered as a function which does not allow hook calls inside.',\n )\n .deprecated({ version: '4.x' }),\n CustomActions: PropTypes.func.description(\n 'This property will render any JSX in the header controls area. You can access to all references and active values within the props.',\n ),\n keepContentMounted: PropTypes.bool.description(\n 'This property will keep the content mounted when the AccordionItem is closed.',\n ),\n ...getPropsPerDatatestIdPropTypes(DSAccordionDataTestid),\n};\n\nexport const accordionPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n containerProps: PropTypes.object.description('Adds props to the container.').deprecated({ version: '4.x' }),\n activeValue: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n PropTypes.string,\n PropTypes.number,\n ]).description('Selected active value. This property makes the component a controlled one.'),\n children: PropTypes.node.description('Dimsum AccordionItems to show.'),\n allowMultipleOpen: PropTypes.bool.description('Allows multiple Dimsum AccordionItems to be open at the same time.'),\n onChange: PropTypes.func.description('Callback function once the Dimsum Accordion changes.'),\n ...getPropsPerDatatestIdPropTypes(DSAccordionDataTestid),\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAEP,SAAS,6BAA6B;AAuE/B,MAAM,yBAAyB;AAAA,EACpC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,YAAY,+BAA+B,EAAE;AAAA,EACtE,OAAO,UAAU,OAAO,YAAY,sBAAsB;AAAA,EAC1D,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE;AAAA,IAC/D;AAAA,EACF,EAAE;AAAA,EACF,YAAY,UAAU,KAAK,YAAY,uCAAuC,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC7G,YAAY,UAAU,KAAK,YAAY,qCAAqC,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC3G,gBAAgB,UAAU,OAAO,YAAY,uBAAuB;AAAA,EACpE,qBAAqB,UAAU,MAAM,gBAAgB,EAAE;AAAA,IACrD;AAAA,EACF;AAAA,EACA,eAAe,UAAU,QAAQ,UAAU,MAAM,EAC9C,YAAY,0CAA0C,EACtD,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,qBAAqB,UAAU,KAC5B;AAAA,IACC;AAAA,EACF,EACC,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,eAAe,UAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,oBAAoB,UAAU,KAAK;AAAA,IACjC;AAAA,EACF;AAAA,EACA,GAAG,+BAA+B,qBAAqB;AACzD;AAEO,MAAM,qBAAqB;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,UAAU,OAAO,YAAY,8BAA8B,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC1G,aAAa,UAAU,UAAU;AAAA,IAC/B,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC;AAAA,IAC3E,UAAU;AAAA,IACV,UAAU;AAAA,EACZ,CAAC,EAAE,YAAY,4EAA4E;AAAA,EAC3F,UAAU,UAAU,KAAK,YAAY,gCAAgC;AAAA,EACrE,mBAAmB,UAAU,KAAK,YAAY,oEAAoE;AAAA,EAClH,UAAU,UAAU,KAAK,YAAY,sDAAsD;AAAA,EAC3F,GAAG,+BAA+B,qBAAqB;AACzD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|