@elliemae/ds-accordion 3.62.1 → 3.70.0-alpha.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/constants/index.js +3 -0
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/parts/accordionItem/DSAccordionItem.js +126 -221
- package/dist/cjs/parts/accordionItem/DSAccordionItem.js.map +2 -2
- package/dist/cjs/parts/accordionItem/ItemCustomActions.js +84 -0
- package/dist/cjs/parts/accordionItem/ItemCustomActions.js.map +7 -0
- package/dist/cjs/parts/accordionItem/ItemTitle.js +172 -0
- package/dist/cjs/parts/accordionItem/ItemTitle.js.map +7 -0
- package/dist/cjs/parts/accordionItem/styles.js +69 -14
- package/dist/cjs/parts/accordionItem/styles.js.map +2 -2
- package/dist/cjs/parts/accordionItem/useAccordionItem.js +4 -2
- package/dist/cjs/parts/accordionItem/useAccordionItem.js.map +2 -2
- package/dist/esm/constants/index.js +3 -0
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/parts/accordionItem/DSAccordionItem.js +128 -227
- package/dist/esm/parts/accordionItem/DSAccordionItem.js.map +2 -2
- package/dist/esm/parts/accordionItem/ItemCustomActions.js +54 -0
- package/dist/esm/parts/accordionItem/ItemCustomActions.js.map +7 -0
- package/dist/esm/parts/accordionItem/ItemTitle.js +142 -0
- package/dist/esm/parts/accordionItem/ItemTitle.js.map +7 -0
- package/dist/esm/parts/accordionItem/styles.js +69 -14
- package/dist/esm/parts/accordionItem/styles.js.map +2 -2
- package/dist/esm/parts/accordionItem/useAccordionItem.js +4 -2
- package/dist/esm/parts/accordionItem/useAccordionItem.js.map +2 -2
- package/dist/types/constants/index.d.ts +4 -0
- package/dist/types/parts/accordionItem/ItemCustomActions.d.ts +14 -0
- package/dist/types/parts/accordionItem/ItemTitle.d.ts +23 -0
- package/dist/types/parts/accordionItem/styles.d.ts +6 -4
- package/dist/types/parts/accordionItem/useAccordionItem.d.ts +1 -0
- package/package.json +11 -11
- package/dist/types/tests/DSAccordion.a11y.test.d.ts +0 -1
- package/dist/types/tests/DSAccordion.callback.test.d.ts +0 -1
- package/dist/types/tests/DSAccordion.data-testid.test.d.ts +0 -1
- package/dist/types/tests/DSAccordion.events.test.d.ts +0 -1
- package/dist/types/tests/DSAccordion.exports.test.d.ts +0 -1
- package/dist/types/tests/DSAccordion.get-owner-props.test.d.ts +0 -1
- package/dist/types/tests/DSAccordion.keyboard.test.d.ts +0 -1
- package/dist/types/tests/DSAccordion.test.d.ts +0 -1
- package/dist/types/typescript-testing/typescript-accordion-valid.d.ts +0 -1
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
+
import { StyledItemAddon, StyledItemTitles, StyledPrimaryTitle, StyledSecondaryTitle } from "./styles.js";
|
|
5
|
+
const ItemTitleMobile = ({
|
|
6
|
+
title,
|
|
7
|
+
secondaryTitle,
|
|
8
|
+
selected,
|
|
9
|
+
disabled,
|
|
10
|
+
applyAriaDisabled,
|
|
11
|
+
wrapLabel,
|
|
12
|
+
IconOpened,
|
|
13
|
+
IconClosed,
|
|
14
|
+
onMouseEnter,
|
|
15
|
+
onMouseLeave,
|
|
16
|
+
setPrimaryElement,
|
|
17
|
+
getOwnerProps,
|
|
18
|
+
getOwnerPropsArguments
|
|
19
|
+
}) => /* @__PURE__ */ jsx(Grid, { width: "100%", children: /* @__PURE__ */ jsxs(Grid, { cols: ["auto", "20px"], children: [
|
|
20
|
+
/* @__PURE__ */ jsx(
|
|
21
|
+
StyledItemTitles,
|
|
22
|
+
{
|
|
23
|
+
onMouseEnter,
|
|
24
|
+
onMouseLeave,
|
|
25
|
+
isDSMobile: true,
|
|
26
|
+
withSecondaryTitle: secondaryTitle,
|
|
27
|
+
selected,
|
|
28
|
+
getOwnerProps,
|
|
29
|
+
getOwnerPropsArguments,
|
|
30
|
+
children: /* @__PURE__ */ jsx(
|
|
31
|
+
StyledPrimaryTitle,
|
|
32
|
+
{
|
|
33
|
+
innerRef: setPrimaryElement,
|
|
34
|
+
...title ? { id: `accordion_${title}id` } : void 0,
|
|
35
|
+
disabled,
|
|
36
|
+
applyAriaDisabled,
|
|
37
|
+
isDSMobile: true,
|
|
38
|
+
selected,
|
|
39
|
+
withSecondaryTitle: Boolean(secondaryTitle),
|
|
40
|
+
getOwnerProps,
|
|
41
|
+
getOwnerPropsArguments,
|
|
42
|
+
wrapLabel,
|
|
43
|
+
children: title
|
|
44
|
+
}
|
|
45
|
+
)
|
|
46
|
+
}
|
|
47
|
+
),
|
|
48
|
+
/* @__PURE__ */ jsx(
|
|
49
|
+
StyledItemAddon,
|
|
50
|
+
{
|
|
51
|
+
disabled,
|
|
52
|
+
applyAriaDisabled,
|
|
53
|
+
isDSMobile: true,
|
|
54
|
+
getOwnerProps,
|
|
55
|
+
getOwnerPropsArguments,
|
|
56
|
+
children: selected ? /* @__PURE__ */ jsx(IconOpened, { isDSMobile: true }) : /* @__PURE__ */ jsx(IconClosed, { isDSMobile: true })
|
|
57
|
+
}
|
|
58
|
+
)
|
|
59
|
+
] }) });
|
|
60
|
+
const ItemTitleDesktop = ({
|
|
61
|
+
title,
|
|
62
|
+
secondaryTitle,
|
|
63
|
+
value,
|
|
64
|
+
selected,
|
|
65
|
+
disabled,
|
|
66
|
+
applyAriaDisabled,
|
|
67
|
+
wrapLabel,
|
|
68
|
+
IconOpened,
|
|
69
|
+
IconClosed,
|
|
70
|
+
onMouseEnter,
|
|
71
|
+
onMouseLeave,
|
|
72
|
+
setPrimaryElement,
|
|
73
|
+
setSecondaryElement,
|
|
74
|
+
getOwnerProps,
|
|
75
|
+
getOwnerPropsArguments
|
|
76
|
+
}) => /* @__PURE__ */ jsxs(
|
|
77
|
+
Grid,
|
|
78
|
+
{
|
|
79
|
+
onMouseEnter,
|
|
80
|
+
onMouseLeave,
|
|
81
|
+
cols: ["auto", "1fr"],
|
|
82
|
+
padding: "6px 0px",
|
|
83
|
+
marginRight: "20px",
|
|
84
|
+
width: "100%",
|
|
85
|
+
children: [
|
|
86
|
+
/* @__PURE__ */ jsx(
|
|
87
|
+
StyledItemAddon,
|
|
88
|
+
{
|
|
89
|
+
disabled,
|
|
90
|
+
applyAriaDisabled,
|
|
91
|
+
getOwnerProps,
|
|
92
|
+
getOwnerPropsArguments,
|
|
93
|
+
children: selected ? /* @__PURE__ */ jsx(IconOpened, {}) : /* @__PURE__ */ jsx(IconClosed, {})
|
|
94
|
+
}
|
|
95
|
+
),
|
|
96
|
+
/* @__PURE__ */ jsxs(Grid, { rows: secondaryTitle ? ["auto", "auto"] : ["auto"], rowGap: secondaryTitle ? "3px" : "0px", children: [
|
|
97
|
+
/* @__PURE__ */ jsx(
|
|
98
|
+
StyledItemTitles,
|
|
99
|
+
{
|
|
100
|
+
withSecondaryTitle: secondaryTitle,
|
|
101
|
+
selected,
|
|
102
|
+
getOwnerProps,
|
|
103
|
+
getOwnerPropsArguments,
|
|
104
|
+
children: /* @__PURE__ */ jsx(
|
|
105
|
+
StyledPrimaryTitle,
|
|
106
|
+
{
|
|
107
|
+
innerRef: setPrimaryElement,
|
|
108
|
+
...title ? { id: `accordion_${title}id-${value}` } : void 0,
|
|
109
|
+
disabled,
|
|
110
|
+
applyAriaDisabled,
|
|
111
|
+
selected,
|
|
112
|
+
withSecondaryTitle: Boolean(secondaryTitle),
|
|
113
|
+
getOwnerProps,
|
|
114
|
+
getOwnerPropsArguments,
|
|
115
|
+
wrapLabel,
|
|
116
|
+
children: title
|
|
117
|
+
}
|
|
118
|
+
)
|
|
119
|
+
}
|
|
120
|
+
),
|
|
121
|
+
secondaryTitle && /* @__PURE__ */ jsx(
|
|
122
|
+
StyledSecondaryTitle,
|
|
123
|
+
{
|
|
124
|
+
innerRef: setSecondaryElement,
|
|
125
|
+
disabled,
|
|
126
|
+
applyAriaDisabled,
|
|
127
|
+
selected,
|
|
128
|
+
getOwnerProps,
|
|
129
|
+
getOwnerPropsArguments,
|
|
130
|
+
wrapLabel,
|
|
131
|
+
children: secondaryTitle
|
|
132
|
+
}
|
|
133
|
+
)
|
|
134
|
+
] })
|
|
135
|
+
]
|
|
136
|
+
}
|
|
137
|
+
);
|
|
138
|
+
const ItemTitle = (props) => props.isDSMobile ? /* @__PURE__ */ jsx(ItemTitleMobile, { ...props }) : /* @__PURE__ */ jsx(ItemTitleDesktop, { ...props });
|
|
139
|
+
export {
|
|
140
|
+
ItemTitle
|
|
141
|
+
};
|
|
142
|
+
//# sourceMappingURL=ItemTitle.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/ItemTitle.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport React from 'react';\n\nimport type { DSAccordionT } from '../../react-desc-prop-types.js';\nimport type { DSAccordionInternalsT } from '../../sharedTypes.js';\nimport { StyledItemAddon, StyledItemTitles, StyledPrimaryTitle, StyledSecondaryTitle } from './styles.js';\n\ninterface ItemTitleProps {\n title: string;\n secondaryTitle?: string;\n value: string | number;\n selected: boolean;\n disabled: boolean;\n applyAriaDisabled: boolean;\n wrapLabel: boolean;\n isDSMobile: boolean;\n IconOpened: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n IconClosed: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n onMouseEnter: () => void;\n onMouseLeave: () => void;\n setPrimaryElement: React.Dispatch<React.SetStateAction<HTMLElement | null | undefined>>;\n setSecondaryElement: React.Dispatch<React.SetStateAction<HTMLElement | null | undefined>>;\n getOwnerProps: () => DSAccordionT.ItemProps;\n getOwnerPropsArguments: () => object;\n}\n\nconst ItemTitleMobile = ({\n title,\n secondaryTitle,\n selected,\n disabled,\n applyAriaDisabled,\n wrapLabel,\n IconOpened,\n IconClosed,\n onMouseEnter,\n onMouseLeave,\n setPrimaryElement,\n getOwnerProps,\n getOwnerPropsArguments,\n}: Omit<ItemTitleProps, 'isDSMobile' | 'value' | 'setSecondaryElement'>): JSX.Element => (\n <Grid width=\"100%\">\n <Grid cols={['auto', '20px']}>\n <StyledItemTitles\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n isDSMobile\n withSecondaryTitle={secondaryTitle}\n selected={selected}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledPrimaryTitle\n innerRef={setPrimaryElement}\n {...(title ? { id: `accordion_${title}id` } : undefined)}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n isDSMobile\n selected={selected}\n withSecondaryTitle={Boolean(secondaryTitle)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n wrapLabel={wrapLabel}\n >\n {title}\n </StyledPrimaryTitle>\n </StyledItemTitles>\n <StyledItemAddon\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n isDSMobile\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {selected ? <IconOpened isDSMobile /> : <IconClosed isDSMobile />}\n </StyledItemAddon>\n </Grid>\n </Grid>\n);\n\nconst ItemTitleDesktop = ({\n title,\n secondaryTitle,\n value,\n selected,\n disabled,\n applyAriaDisabled,\n wrapLabel,\n IconOpened,\n IconClosed,\n onMouseEnter,\n onMouseLeave,\n setPrimaryElement,\n setSecondaryElement,\n getOwnerProps,\n getOwnerPropsArguments,\n}: Omit<ItemTitleProps, 'isDSMobile'>): JSX.Element => (\n <Grid\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n cols={['auto', '1fr']}\n padding=\"6px 0px\"\n marginRight=\"20px\"\n width=\"100%\"\n >\n <StyledItemAddon\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {selected ? <IconOpened /> : <IconClosed />}\n </StyledItemAddon>\n <Grid rows={secondaryTitle ? ['auto', 'auto'] : ['auto']} rowGap={secondaryTitle ? '3px' : '0px'}>\n <StyledItemTitles\n withSecondaryTitle={secondaryTitle}\n selected={selected}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledPrimaryTitle\n innerRef={setPrimaryElement}\n {...(title ? { id: `accordion_${title}id-${value}` } : undefined)}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n selected={selected}\n withSecondaryTitle={Boolean(secondaryTitle)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n wrapLabel={wrapLabel}\n >\n {title}\n </StyledPrimaryTitle>\n </StyledItemTitles>\n {secondaryTitle && (\n <StyledSecondaryTitle\n innerRef={setSecondaryElement}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n selected={selected}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n wrapLabel={wrapLabel}\n >\n {secondaryTitle}\n </StyledSecondaryTitle>\n )}\n </Grid>\n </Grid>\n);\n\nexport const ItemTitle = (props: ItemTitleProps): JSX.Element =>\n props.isDSMobile ? <ItemTitleMobile {...props} /> : <ItemTitleDesktop {...props} />;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC0CnB,SAUI,KAVJ;AA1CJ,SAAS,YAAY;AAKrB,SAAS,iBAAiB,kBAAkB,oBAAoB,4BAA4B;AAqB5F,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,oBAAC,QAAK,OAAM,QACV,+BAAC,QAAK,MAAM,CAAC,QAAQ,MAAM,GACzB;AAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,YAAU;AAAA,MACV,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACT,GAAI,QAAQ,EAAE,IAAI,aAAa,KAAK,KAAK,IAAI;AAAA,UAC9C;AAAA,UACA;AAAA,UACA,YAAU;AAAA,UACV;AAAA,UACA,oBAAoB,QAAQ,cAAc;AAAA,UAC1C;AAAA,UACA;AAAA,UACA;AAAA,UAEC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAAA,EACA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,YAAU;AAAA,MACV;AAAA,MACA;AAAA,MAEC,qBAAW,oBAAC,cAAW,YAAU,MAAC,IAAK,oBAAC,cAAW,YAAU,MAAC;AAAA;AAAA,EACjE;AAAA,GACF,GACF;AAGF,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA,MAAM,CAAC,QAAQ,KAAK;AAAA,IACpB,SAAQ;AAAA,IACR,aAAY;AAAA,IACZ,OAAM;AAAA,IAEN;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEC,qBAAW,oBAAC,cAAW,IAAK,oBAAC,cAAW;AAAA;AAAA,MAC3C;AAAA,MACA,qBAAC,QAAK,MAAM,iBAAiB,CAAC,QAAQ,MAAM,IAAI,CAAC,MAAM,GAAG,QAAQ,iBAAiB,QAAQ,OACzF;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,oBAAoB;AAAA,YACpB;AAAA,YACA;AAAA,YACA;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU;AAAA,gBACT,GAAI,QAAQ,EAAE,IAAI,aAAa,KAAK,MAAM,KAAK,GAAG,IAAI;AAAA,gBACvD;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,oBAAoB,QAAQ,cAAc;AAAA,gBAC1C;AAAA,gBACA;AAAA,gBACA;AAAA,gBAEC;AAAA;AAAA,YACH;AAAA;AAAA,QACF;AAAA,QACC,kBACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,SAEJ;AAAA;AAAA;AACF;AAGK,MAAM,YAAY,CAAC,UACxB,MAAM,aAAa,oBAAC,mBAAiB,GAAG,OAAO,IAAK,oBAAC,oBAAkB,GAAG,OAAO;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -6,17 +6,41 @@ const StyledItemContainer = styled("div", {
|
|
|
6
6
|
slot: DSAccordionItemSlots.ITEM_CONTAINER
|
|
7
7
|
})`
|
|
8
8
|
display: grid;
|
|
9
|
-
grid-template-
|
|
9
|
+
grid-template-columns: minmax(0, 1fr) max-content;
|
|
10
|
+
grid-template-areas:
|
|
11
|
+
'heading actions'
|
|
12
|
+
'content content';
|
|
10
13
|
border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};
|
|
11
14
|
align-items: center;
|
|
12
15
|
min-width: 240px;
|
|
13
|
-
|
|
16
|
+
position: relative;
|
|
17
|
+
|
|
18
|
+
&::before {
|
|
19
|
+
content: '';
|
|
20
|
+
grid-area: 1 / 1 / 2 / -1;
|
|
21
|
+
align-self: stretch;
|
|
22
|
+
justify-self: stretch;
|
|
23
|
+
border-radius: 2px;
|
|
24
|
+
pointer-events: none;
|
|
25
|
+
box-sizing: border-box;
|
|
26
|
+
}
|
|
27
|
+
&:hover::before {
|
|
28
|
+
${({ disabled, applyAriaDisabled, theme }) => !disabled && !applyAriaDisabled ? `background: ${theme.colors.brand[200]};` : ``}
|
|
29
|
+
}
|
|
30
|
+
|
|
14
31
|
${xStyledCommonProps};
|
|
15
32
|
`;
|
|
16
|
-
const
|
|
33
|
+
const StyledItemDetails = styled("details", {
|
|
34
|
+
name: DSAccordionName,
|
|
35
|
+
slot: DSAccordionItemSlots.ITEM_DETAILS
|
|
36
|
+
})`
|
|
37
|
+
display: contents;
|
|
38
|
+
`;
|
|
39
|
+
const StyledItemHeader = styled("summary", {
|
|
17
40
|
name: DSAccordionName,
|
|
18
41
|
slot: DSAccordionItemSlots.ITEM_HEADER
|
|
19
42
|
})`
|
|
43
|
+
grid-area: heading;
|
|
20
44
|
display: flex;
|
|
21
45
|
min-height: ${({ theme, withSecondaryTitle, isDSMobile }) => isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};
|
|
22
46
|
width: 100%;
|
|
@@ -24,9 +48,13 @@ const StyledItemHeader = styled("button", {
|
|
|
24
48
|
border: none;
|
|
25
49
|
outline: none;
|
|
26
50
|
background: none;
|
|
51
|
+
list-style: none;
|
|
52
|
+
position: relative;
|
|
53
|
+
&::-webkit-details-marker {
|
|
54
|
+
display: none;
|
|
55
|
+
}
|
|
27
56
|
&:hover {
|
|
28
|
-
cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
|
|
29
|
-
cursor: ${({ applyAriaDisabled }) => applyAriaDisabled ? "not-allowed" : "pointer"};
|
|
57
|
+
cursor: ${({ disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "not-allowed" : "pointer"};
|
|
30
58
|
}
|
|
31
59
|
padding: ${({ isDSMobile }) => isDSMobile ? `0 16px` : `0`};
|
|
32
60
|
&:focus {
|
|
@@ -37,9 +65,10 @@ const StyledItemHeader = styled("button", {
|
|
|
37
65
|
top: 0;
|
|
38
66
|
width: 100%;
|
|
39
67
|
height: 100%;
|
|
40
|
-
border-radius: 2px;
|
|
41
68
|
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
42
69
|
pointer-events: none;
|
|
70
|
+
z-index: 2;
|
|
71
|
+
${({ withCustomActions }) => withCustomActions ? `border-right: none; border-radius: 2px 0 0 2px;` : `border-radius: 2px;`}
|
|
43
72
|
}
|
|
44
73
|
}
|
|
45
74
|
`;
|
|
@@ -47,6 +76,7 @@ const StyledItemContent = styled("div", {
|
|
|
47
76
|
name: DSAccordionName,
|
|
48
77
|
slot: DSAccordionItemSlots.ITEM_CONTENT_CONTAINER
|
|
49
78
|
})`
|
|
79
|
+
grid-area: content;
|
|
50
80
|
padding: ${({ isDSMobile }) => isDSMobile ? `3px 16px 24px 16px` : "16px 20px"};
|
|
51
81
|
${({ selected, keepContentMounted }) => {
|
|
52
82
|
if (selected) return "";
|
|
@@ -126,26 +156,50 @@ const StyledItemCustomActions = styled("div", {
|
|
|
126
156
|
name: DSAccordionName,
|
|
127
157
|
slot: DSAccordionItemSlots.ITEM_HEADER_CUSTOM_ACTIONS_CONTAINER
|
|
128
158
|
})`
|
|
159
|
+
grid-area: actions;
|
|
160
|
+
position: relative;
|
|
161
|
+
align-self: stretch;
|
|
162
|
+
z-index: 1;
|
|
129
163
|
display: grid;
|
|
130
164
|
grid-auto-flow: column;
|
|
131
165
|
place-items: center;
|
|
132
166
|
grid-gap: ${({ theme }) => theme.space.xxs};
|
|
133
167
|
margin: ${({ theme, isDSMobile }) => isDSMobile ? `0 ${theme.space.xs}` : `0 20px 0 0`};
|
|
134
168
|
justify-content: flex-end;
|
|
135
|
-
height: 28px;
|
|
169
|
+
min-height: 28px;
|
|
170
|
+
|
|
171
|
+
&::after {
|
|
172
|
+
content: '';
|
|
173
|
+
position: absolute;
|
|
174
|
+
top: 0;
|
|
175
|
+
bottom: 0;
|
|
176
|
+
left: 0;
|
|
177
|
+
right: -20px;
|
|
178
|
+
border: 2px solid transparent;
|
|
179
|
+
border-left: none;
|
|
180
|
+
border-radius: 0 2px 2px 0;
|
|
181
|
+
pointer-events: none;
|
|
182
|
+
z-index: 2;
|
|
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
|
+
}
|
|
136
192
|
`;
|
|
137
193
|
const StyledItemHeaderContainer = styled("div", {
|
|
138
194
|
name: DSAccordionName,
|
|
139
195
|
slot: DSAccordionItemSlots.ITEM_HEADER_CONTAINER
|
|
140
196
|
})`
|
|
141
|
-
display: grid;
|
|
142
|
-
grid-template-columns: auto max-content;
|
|
143
|
-
place-items: center;
|
|
144
197
|
position: relative;
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
198
|
+
align-self: stretch;
|
|
199
|
+
min-width: 0;
|
|
200
|
+
width: 100%;
|
|
201
|
+
display: flex;
|
|
202
|
+
align-items: center;
|
|
149
203
|
`;
|
|
150
204
|
const StyledTooltipContent = styled("div", {
|
|
151
205
|
name: DSAccordionName,
|
|
@@ -166,6 +220,7 @@ export {
|
|
|
166
220
|
StyledItemContainer,
|
|
167
221
|
StyledItemContent,
|
|
168
222
|
StyledItemCustomActions,
|
|
223
|
+
StyledItemDetails,
|
|
169
224
|
StyledItemHeader,
|
|
170
225
|
StyledItemHeaderContainer,
|
|
171
226
|
StyledItemTitles,
|
|
@@ -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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,iBAAiB,4BAA4B;
|
|
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
|
}
|
|
@@ -13,12 +13,13 @@ const useAccordionItem = ({
|
|
|
13
13
|
}
|
|
14
14
|
return value === actualActiveValue;
|
|
15
15
|
}, [actualActiveValue, value]);
|
|
16
|
-
const
|
|
16
|
+
const toggle = useCallback(
|
|
17
17
|
(e) => {
|
|
18
18
|
if (!disabled && !applyAriaDisabled) setActiveValues(value, e);
|
|
19
19
|
},
|
|
20
|
-
[disabled, setActiveValues, value
|
|
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
|
};
|
|
@@ -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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,YAAY,eAAe;AACjD,SAAS,0BAA0B;
|
|
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
|
}
|
|
@@ -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";
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { DSAccordionT } from '../../react-desc-prop-types.js';
|
|
2
|
+
import type { DSAccordionInternalsT } from '../../sharedTypes.js';
|
|
3
|
+
interface ItemCustomActionsProps {
|
|
4
|
+
customActions: DSAccordionInternalsT.CustomActions[];
|
|
5
|
+
renderCustomActions?: DSAccordionT.ItemOptionalProps['renderCustomActions'];
|
|
6
|
+
CustomActionsComponent?: DSAccordionT.ItemOptionalProps['CustomActions'];
|
|
7
|
+
isDSMobile: boolean;
|
|
8
|
+
allRefs: DSAccordionInternalsT.AllChildrenReferences;
|
|
9
|
+
actualActiveValue: DSAccordionInternalsT.InternalActiveValue;
|
|
10
|
+
getOwnerProps: () => DSAccordionT.ItemProps;
|
|
11
|
+
getOwnerPropsArguments: () => object;
|
|
12
|
+
}
|
|
13
|
+
export declare const ItemCustomActions: ({ customActions, renderCustomActions, CustomActionsComponent, isDSMobile, allRefs, actualActiveValue, getOwnerProps, getOwnerPropsArguments, }: ItemCustomActionsProps) => JSX.Element | null;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DSAccordionT } from '../../react-desc-prop-types.js';
|
|
3
|
+
import type { DSAccordionInternalsT } from '../../sharedTypes.js';
|
|
4
|
+
interface ItemTitleProps {
|
|
5
|
+
title: string;
|
|
6
|
+
secondaryTitle?: string;
|
|
7
|
+
value: string | number;
|
|
8
|
+
selected: boolean;
|
|
9
|
+
disabled: boolean;
|
|
10
|
+
applyAriaDisabled: boolean;
|
|
11
|
+
wrapLabel: boolean;
|
|
12
|
+
isDSMobile: boolean;
|
|
13
|
+
IconOpened: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;
|
|
14
|
+
IconClosed: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;
|
|
15
|
+
onMouseEnter: () => void;
|
|
16
|
+
onMouseLeave: () => void;
|
|
17
|
+
setPrimaryElement: React.Dispatch<React.SetStateAction<HTMLElement | null | undefined>>;
|
|
18
|
+
setSecondaryElement: React.Dispatch<React.SetStateAction<HTMLElement | null | undefined>>;
|
|
19
|
+
getOwnerProps: () => DSAccordionT.ItemProps;
|
|
20
|
+
getOwnerPropsArguments: () => object;
|
|
21
|
+
}
|
|
22
|
+
export declare const ItemTitle: (props: ItemTitleProps) => JSX.Element;
|
|
23
|
+
export {};
|
|
@@ -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 {
|
|
@@ -34,21 +35,22 @@ interface StyledItemAddonPropsT {
|
|
|
34
35
|
applyAriaDisabled: boolean;
|
|
35
36
|
isDSMobile?: boolean;
|
|
36
37
|
}
|
|
37
|
-
interface
|
|
38
|
+
interface StyledItemContainerPropsT {
|
|
38
39
|
disabled: boolean;
|
|
39
40
|
applyAriaDisabled: boolean;
|
|
40
41
|
}
|
|
41
42
|
interface StyledItemCustomActionsPropsT {
|
|
42
43
|
isDSMobile?: boolean;
|
|
43
44
|
}
|
|
44
|
-
export declare const StyledItemContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme,
|
|
45
|
-
export declare const
|
|
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>;
|
|
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>;
|
|
49
51
|
export declare const StyledPrimaryTitle: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledPrimaryTitlePropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
50
52
|
export declare const StyledSecondaryTitle: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, StyledSecondaryTitlePropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
|
|
51
53
|
export declare const StyledItemCustomActions: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledItemCustomActionsPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
52
|
-
export declare const StyledItemHeaderContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme,
|
|
54
|
+
export declare const StyledItemHeaderContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
53
55
|
export declare const StyledTooltipContent: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
54
56
|
export {};
|
|
@@ -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.
|
|
3
|
+
"version": "3.70.0-alpha.9",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Accordion",
|
|
6
6
|
"files": [
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
],
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
|
25
|
-
"url": "https://
|
|
25
|
+
"url": "https://github.com/intcx/PLATFORM-UI.dimsum.git"
|
|
26
26
|
},
|
|
27
27
|
"engines": {
|
|
28
28
|
"pnpm": ">=9",
|
|
@@ -36,12 +36,12 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-button-v2": "3.
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-button-v2": "3.70.0-alpha.9",
|
|
40
|
+
"@elliemae/ds-system": "3.70.0-alpha.9",
|
|
41
|
+
"@elliemae/ds-grid": "3.70.0-alpha.9",
|
|
42
|
+
"@elliemae/ds-floating-context": "3.70.0-alpha.9",
|
|
43
|
+
"@elliemae/ds-icons": "3.70.0-alpha.9",
|
|
44
|
+
"@elliemae/ds-props-helpers": "3.70.0-alpha.9"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@xstyled/system": "~3.8.1",
|
|
@@ -50,9 +50,9 @@
|
|
|
50
50
|
"lodash-es": "^4.18.1",
|
|
51
51
|
"react": "^18.3.1",
|
|
52
52
|
"react-dom": "^18.3.1",
|
|
53
|
-
"styled-components": "~5.3.
|
|
54
|
-
"@elliemae/ds-
|
|
55
|
-
"@elliemae/ds-
|
|
53
|
+
"styled-components": "~5.3.11",
|
|
54
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-alpha.9",
|
|
55
|
+
"@elliemae/ds-test-utils": "3.70.0-alpha.9"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"lodash-es": "^4.18.1",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|