@elliemae/ds-accordion 3.1.0-next.1 → 3.1.0-next.4
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 -1
- package/dist/cjs/DSAccordion.js.map +2 -2
- package/dist/cjs/config/useAccordionRefs.js.map +1 -1
- package/dist/cjs/exported-related/theming.js +2 -2
- package/dist/cjs/exported-related/theming.js.map +2 -2
- package/dist/cjs/parts/accordionContent/styles.js +4 -5
- package/dist/cjs/parts/accordionContent/styles.js.map +2 -2
- package/dist/cjs/parts/accordionItem/styles.js +13 -14
- package/dist/cjs/parts/accordionItem/styles.js.map +2 -2
- package/dist/esm/DSAccordion.js +2 -1
- package/dist/esm/DSAccordion.js.map +2 -2
- package/dist/esm/config/useAccordionRefs.js.map +1 -1
- package/dist/esm/exported-related/theming.js +2 -2
- package/dist/esm/exported-related/theming.js.map +2 -2
- package/dist/esm/parts/accordionContent/styles.js +3 -4
- package/dist/esm/parts/accordionContent/styles.js.map +2 -2
- package/dist/esm/parts/accordionItem/styles.js +12 -13
- package/dist/esm/parts/accordionItem/styles.js.map +2 -2
- package/package.json +16 -19
package/dist/cjs/DSAccordion.js
CHANGED
|
@@ -32,13 +32,14 @@ var import_AccordionContent = require("./parts/accordionContent/AccordionContent
|
|
|
32
32
|
var import_useAccordion = require("./config/useAccordion");
|
|
33
33
|
var import_DSAccordionCTX = require("./DSAccordionCTX");
|
|
34
34
|
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
35
|
+
var import_theming = require("./exported-related/theming");
|
|
35
36
|
const DSAccordion = (props) => {
|
|
36
37
|
const ctx = (0, import_useAccordion.useAccordion)(props);
|
|
37
38
|
return /* @__PURE__ */ import_react.default.createElement(import_DSAccordionCTX.DSAccordionContext.Provider, {
|
|
38
39
|
value: ctx
|
|
39
40
|
}, /* @__PURE__ */ import_react.default.createElement(import_AccordionContent.AccordionContent, null));
|
|
40
41
|
};
|
|
41
|
-
DSAccordion.displayName =
|
|
42
|
+
DSAccordion.displayName = import_theming.DSAccordionName;
|
|
42
43
|
const DSAccordionWithSchema = (0, import_ds_utilities.describe)(DSAccordion);
|
|
43
44
|
DSAccordionWithSchema.propTypes = import_react_desc_prop_types.accordionPropTypes;
|
|
44
45
|
var DSAccordion_default = DSAccordion;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSAccordion.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { AccordionContent } from './parts/accordionContent/AccordionContent';\nimport { useAccordion } from './config/useAccordion';\nimport { DSAccordionContext } from './DSAccordionCTX';\nimport { accordionPropTypes } from './react-desc-prop-types';\nimport type { DSAccordionT } from './react-desc-prop-types';\n\nconst DSAccordion = (props: DSAccordionT.Props): JSX.Element => {\n const ctx = useAccordion(props);\n\n return (\n <DSAccordionContext.Provider value={ctx}>\n <AccordionContent />\n </DSAccordionContext.Provider>\n );\n};\n\nDSAccordion.displayName =
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,0BAAyB;AACzB,8BAAiC;AACjC,0BAA6B;AAC7B,4BAAmC;AACnC,mCAAmC;
|
|
4
|
+
"sourcesContent": ["import React, { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { AccordionContent } from './parts/accordionContent/AccordionContent';\nimport { useAccordion } from './config/useAccordion';\nimport { DSAccordionContext } from './DSAccordionCTX';\nimport { accordionPropTypes } from './react-desc-prop-types';\nimport type { DSAccordionT } from './react-desc-prop-types';\nimport { DSAccordionName } from './exported-related/theming';\n\nconst DSAccordion = (props: DSAccordionT.Props): JSX.Element => {\n const ctx = useAccordion(props);\n\n return (\n <DSAccordionContext.Provider value={ctx}>\n <AccordionContent />\n </DSAccordionContext.Provider>\n );\n};\n\nDSAccordion.displayName = DSAccordionName;\nconst DSAccordionWithSchema = describe(DSAccordion);\nDSAccordionWithSchema.propTypes = accordionPropTypes as WeakValidationMap<unknown>;\n\nexport { DSAccordion, DSAccordionWithSchema };\n\nexport default DSAccordion;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,0BAAyB;AACzB,8BAAiC;AACjC,0BAA6B;AAC7B,4BAAmC;AACnC,mCAAmC;AAEnC,qBAAgC;AAEhC,MAAM,cAAc,CAAC,UAA2C;AAC9D,QAAM,MAAM,sCAAa,KAAK;AAE9B,SACE,mDAAC,yCAAmB,UAAnB;AAAA,IAA4B,OAAO;AAAA,KAClC,mDAAC,8CAAiB,CACpB;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,kCAAS,WAAW;AAClD,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useAccordionRefs.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from 'react';\nimport type { DSAccordionT } from 'react-desc-prop-types';\nimport type { DSAccordionInternalsT } from '../sharedTypes';\n\ninterface UseAccordionRefsPropsT {\n children: React.ReactElement<DSAccordionT.InternalItemProps>[];\n}\n\ninterface UseAccordionRefsReturnTypeT {\n focusableChildrenReferences: DSAccordionInternalsT.FocusableChildrenReferences[];\n allChildrenReferences: DSAccordionInternalsT.AllChildrenReferences;\n}\n\nexport const useAccordionRefs = ({ children }: UseAccordionRefsPropsT): UseAccordionRefsReturnTypeT =>\n useMemo(() => {\n const focusableChildrenReferences: DSAccordionInternalsT.FocusableChildrenReferences[] = [];\n const allChildrenReferences: DSAccordionInternalsT.AllChildrenReferences = {};\n\n React.Children.map(children, (child: React.ReactElement<DSAccordionT.InternalItemProps>, index) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const { value, disabled } = child.props;\n const currentRef = React.createRef<HTMLButtonElement>();\n allChildrenReferences[index] = currentRef;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n if (!disabled) focusableChildrenReferences.push({ index, value, ref: currentRef });\n });\n return { focusableChildrenReferences, allChildrenReferences };\n }, [children]);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react';\nimport type { DSAccordionT } from '../react-desc-prop-types';\nimport type { DSAccordionInternalsT } from '../sharedTypes';\n\ninterface UseAccordionRefsPropsT {\n children: React.ReactElement<DSAccordionT.InternalItemProps>[];\n}\n\ninterface UseAccordionRefsReturnTypeT {\n focusableChildrenReferences: DSAccordionInternalsT.FocusableChildrenReferences[];\n allChildrenReferences: DSAccordionInternalsT.AllChildrenReferences;\n}\n\nexport const useAccordionRefs = ({ children }: UseAccordionRefsPropsT): UseAccordionRefsReturnTypeT =>\n useMemo(() => {\n const focusableChildrenReferences: DSAccordionInternalsT.FocusableChildrenReferences[] = [];\n const allChildrenReferences: DSAccordionInternalsT.AllChildrenReferences = {};\n\n React.Children.map(children, (child: React.ReactElement<DSAccordionT.InternalItemProps>, index) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const { value, disabled } = child.props;\n const currentRef = React.createRef<HTMLButtonElement>();\n allChildrenReferences[index] = currentRef;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n if (!disabled) focusableChildrenReferences.push({ index, value, ref: currentRef });\n });\n return { focusableChildrenReferences, allChildrenReferences };\n }, [children]);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+B;AAaxB,MAAM,mBAAmB,CAAC,EAAE,eACjC,0BAAQ,MAAM;AACZ,QAAM,8BAAmF,CAAC;AAC1F,QAAM,wBAAqE,CAAC;AAE5E,uBAAM,SAAS,IAAI,UAAU,CAAC,OAA2D,UAAU;AAEjG,UAAM,EAAE,OAAO,aAAa,MAAM;AAClC,UAAM,aAAa,qBAAM,UAA6B;AACtD,0BAAsB,SAAS;AAE/B,QAAI,CAAC;AAAU,kCAA4B,KAAK,EAAE,OAAO,OAAO,KAAK,WAAW,CAAC;AAAA,EACnF,CAAC;AACD,SAAO,EAAE,6BAA6B,sBAAsB;AAC9D,GAAG,CAAC,QAAQ,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -20,12 +20,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
20
20
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
21
21
|
var theming_exports = {};
|
|
22
22
|
__export(theming_exports, {
|
|
23
|
-
|
|
23
|
+
DSAccordionName: () => DSAccordionName,
|
|
24
24
|
slots: () => slots
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(theming_exports);
|
|
27
27
|
var React = __toESM(require("react"));
|
|
28
|
-
const
|
|
28
|
+
const DSAccordionName = "DSAccordion";
|
|
29
29
|
const slots = {
|
|
30
30
|
CONTAINER: "root",
|
|
31
31
|
ITEM: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/theming.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,
|
|
4
|
+
"sourcesContent": ["export const DSAccordionName = 'DSAccordion';\n\nexport const slots = {\n CONTAINER: 'root',\n ITEM: {\n CONTAINER: 'item-container',\n HEADER: {\n CONTAINER: 'item-header-container',\n ADDON: 'item-header-addon',\n TITLE_CONTAINER: 'item-header-titles-container',\n PRIMARY_TITLE: 'item-header-primary-title',\n SECONDARY_TITLE: 'item-header-secondary-title',\n CUSTOM_ACTIONS_CONTAINER: 'item-header-custom-actions-container',\n TOOLTIP: 'item-header-tooltip',\n },\n CONTENT: {\n CONTAINER: 'item-content-container',\n },\n },\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,kBAAkB;AAExB,MAAM,QAAQ;AAAA,EACnB,WAAW;AAAA,EACX,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,MACP,iBAAiB;AAAA,MACjB,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB,0BAA0B;AAAA,MAC1B,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,WAAW;AAAA,IACb;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,14 +25,13 @@ __export(styles_exports, {
|
|
|
25
25
|
module.exports = __toCommonJS(styles_exports);
|
|
26
26
|
var React = __toESM(require("react"));
|
|
27
27
|
var import_ds_system = require("@elliemae/ds-system");
|
|
28
|
-
var import_styled_components = require("@xstyled/styled-components");
|
|
29
28
|
var import_exported_related = require("../../exported-related");
|
|
30
29
|
const StyledContainer = (0, import_ds_system.styled)("div", {
|
|
31
|
-
name: import_exported_related.
|
|
30
|
+
name: import_exported_related.DSAccordionName,
|
|
32
31
|
slot: import_exported_related.slots.CONTAINER
|
|
33
32
|
})`
|
|
34
|
-
${
|
|
35
|
-
${
|
|
36
|
-
${
|
|
33
|
+
${import_ds_system.sizing}
|
|
34
|
+
${import_ds_system.space}
|
|
35
|
+
${import_ds_system.layout}
|
|
37
36
|
`;
|
|
38
37
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/accordionContent/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { styled, sizing, space, layout } from '@elliemae/ds-system';\nimport { DSAccordionName, slots } from '../../exported-related';\n\nexport const StyledContainer = styled('div', {\n name: DSAccordionName,\n slot: slots.CONTAINER,\n})`\n ${sizing}\n ${space}\n ${layout}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA8C;AAC9C,8BAAuC;AAEhC,MAAM,kBAAkB,6BAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,8BAAM;AACd,CAAC;AAAA,IACG;AAAA,IACA;AAAA,IACA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,7 +34,6 @@ __export(styles_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(styles_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
36
|
var import_ds_system = require("@elliemae/ds-system");
|
|
37
|
-
var import_styled_components = require("@xstyled/styled-components");
|
|
38
37
|
var import_exported_related = require("../../exported-related");
|
|
39
38
|
const paddingSetter = ({ isDSMobile, withSecondaryTitle }) => {
|
|
40
39
|
if (isDSMobile)
|
|
@@ -49,18 +48,18 @@ const paddingSetter = ({ isDSMobile, withSecondaryTitle }) => {
|
|
|
49
48
|
padding: 7px 0;
|
|
50
49
|
`;
|
|
51
50
|
};
|
|
52
|
-
const StyledItemContainer = (0, import_ds_system.styled)("div", { name: import_exported_related.
|
|
51
|
+
const StyledItemContainer = (0, import_ds_system.styled)("div", { name: import_exported_related.DSAccordionName, slot: import_exported_related.slots.ITEM.CONTAINER })`
|
|
53
52
|
display: grid;
|
|
54
53
|
grid-template-rows: auto auto;
|
|
55
54
|
border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};
|
|
56
55
|
align-items: center;
|
|
57
56
|
min-width: 240px;
|
|
58
|
-
${
|
|
59
|
-
${
|
|
60
|
-
${
|
|
57
|
+
${import_ds_system.layout}
|
|
58
|
+
${import_ds_system.sizing}
|
|
59
|
+
${import_ds_system.space}
|
|
61
60
|
`;
|
|
62
61
|
const StyledItemHeader = (0, import_ds_system.styled)("button", {
|
|
63
|
-
name: import_exported_related.
|
|
62
|
+
name: import_exported_related.DSAccordionName,
|
|
64
63
|
slot: import_exported_related.slots.ITEM.HEADER.CONTAINER
|
|
65
64
|
})`
|
|
66
65
|
display: flex;
|
|
@@ -90,14 +89,14 @@ const StyledItemHeader = (0, import_ds_system.styled)("button", {
|
|
|
90
89
|
}
|
|
91
90
|
`;
|
|
92
91
|
const StyledItemContent = (0, import_ds_system.styled)("div", {
|
|
93
|
-
name: import_exported_related.
|
|
92
|
+
name: import_exported_related.DSAccordionName,
|
|
94
93
|
slot: import_exported_related.slots.ITEM.CONTENT.CONTAINER
|
|
95
94
|
})`
|
|
96
95
|
margin: ${({ isDSMobile }) => isDSMobile ? `3px 16px 24px 16px` : "16px 20px"};
|
|
97
96
|
grid-column: 1/2;
|
|
98
97
|
`;
|
|
99
98
|
const StyledItemAddon = (0, import_ds_system.styled)("div", {
|
|
100
|
-
name: import_exported_related.
|
|
99
|
+
name: import_exported_related.DSAccordionName,
|
|
101
100
|
slot: import_exported_related.slots.ITEM.HEADER.ADDON
|
|
102
101
|
})`
|
|
103
102
|
height: 100%;
|
|
@@ -109,7 +108,7 @@ const StyledItemAddon = (0, import_ds_system.styled)("div", {
|
|
|
109
108
|
}
|
|
110
109
|
`;
|
|
111
110
|
const StyledItemTitles = (0, import_ds_system.styled)("div", {
|
|
112
|
-
name: import_exported_related.
|
|
111
|
+
name: import_exported_related.DSAccordionName,
|
|
113
112
|
slot: import_exported_related.slots.ITEM.HEADER.TITLE_CONTAINER
|
|
114
113
|
})`
|
|
115
114
|
display: grid;
|
|
@@ -120,7 +119,7 @@ const StyledItemTitles = (0, import_ds_system.styled)("div", {
|
|
|
120
119
|
align-content: center;
|
|
121
120
|
`;
|
|
122
121
|
const StyledPrimaryTitle = (0, import_ds_system.styled)("div", {
|
|
123
|
-
name: import_exported_related.
|
|
122
|
+
name: import_exported_related.DSAccordionName,
|
|
124
123
|
slot: import_exported_related.slots.ITEM.HEADER.PRIMARY_TITLE
|
|
125
124
|
})`
|
|
126
125
|
margin: 0;
|
|
@@ -139,7 +138,7 @@ const StyledPrimaryTitle = (0, import_ds_system.styled)("div", {
|
|
|
139
138
|
display: block;
|
|
140
139
|
`;
|
|
141
140
|
const StyledSecondaryTitle = (0, import_ds_system.styled)("span", {
|
|
142
|
-
name: import_exported_related.
|
|
141
|
+
name: import_exported_related.DSAccordionName,
|
|
143
142
|
slot: import_exported_related.slots.ITEM.HEADER.SECONDARY_TITLE
|
|
144
143
|
})`
|
|
145
144
|
margin: 0;
|
|
@@ -156,7 +155,7 @@ const StyledSecondaryTitle = (0, import_ds_system.styled)("span", {
|
|
|
156
155
|
display: block;`}
|
|
157
156
|
`;
|
|
158
157
|
const StyledItemCustomActions = (0, import_ds_system.styled)("div", {
|
|
159
|
-
name: import_exported_related.
|
|
158
|
+
name: import_exported_related.DSAccordionName,
|
|
160
159
|
slot: import_exported_related.slots.ITEM.HEADER.CUSTOM_ACTIONS_CONTAINER
|
|
161
160
|
})`
|
|
162
161
|
display: grid;
|
|
@@ -168,7 +167,7 @@ const StyledItemCustomActions = (0, import_ds_system.styled)("div", {
|
|
|
168
167
|
height: 28px;
|
|
169
168
|
`;
|
|
170
169
|
const StyledItemHeaderContainer = (0, import_ds_system.styled)("div", {
|
|
171
|
-
name: import_exported_related.
|
|
170
|
+
name: import_exported_related.DSAccordionName,
|
|
172
171
|
slot: import_exported_related.slots.ITEM.HEADER.CONTAINER
|
|
173
172
|
})`
|
|
174
173
|
display: grid;
|
|
@@ -181,7 +180,7 @@ const StyledItemHeaderContainer = (0, import_ds_system.styled)("div", {
|
|
|
181
180
|
}
|
|
182
181
|
`;
|
|
183
182
|
const StyledTooltipContent = (0, import_ds_system.styled)("div", {
|
|
184
|
-
name: import_exported_related.
|
|
183
|
+
name: import_exported_related.DSAccordionName,
|
|
185
184
|
slot: import_exported_related.slots.ITEM.HEADER.TOOLTIP
|
|
186
185
|
})`
|
|
187
186
|
padding: 8px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/accordionItem/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, css
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { styled, css, sizing, space, layout } from '@elliemae/ds-system';\nimport { DSAccordionName, slots } from '../../exported-related';\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\ninterface PaddingSetterT {\n isDSMobile: boolean;\n withSecondaryTitle: boolean;\n}\n\nconst paddingSetter = ({ isDSMobile, withSecondaryTitle }: PaddingSetterT): string => {\n if (isDSMobile)\n return css`\n padding: 13px 0;\n `;\n if (withSecondaryTitle)\n return css`\n padding: 6px 0;\n `;\n return css`\n padding: 7px 0;\n `;\n};\n\nexport const StyledItemContainer = styled('div', { name: DSAccordionName, slot: slots.ITEM.CONTAINER })`\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 ${layout}\n ${sizing}\n ${space}\n`;\n\nexport const StyledItemHeader = styled('button', {\n name: DSAccordionName,\n slot: slots.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 ${({ isDSMobile }) => (isDSMobile ? `flex-direction: row-reverse;` : ``)}\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: slots.ITEM.CONTENT.CONTAINER,\n})<StyledItemContentPropsT>`\n margin: ${({ isDSMobile }) => (isDSMobile ? `3px 16px 24px 16px` : '16px 20px')};\n grid-column: 1/2;\n`;\n\nexport const StyledItemAddon = styled('div', {\n name: DSAccordionName,\n slot: slots.ITEM.HEADER.ADDON,\n})<StyledItemAddonPropsT>`\n height: 100%;\n display: grid;\n place-items: center;\n\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: slots.ITEM.HEADER.TITLE_CONTAINER,\n})<StyledItemTitlesPropsT>`\n display: grid;\n grid-gap: ${({ theme }) => theme.space.xxxs};\n ${paddingSetter}\n grid-template-columns: 100%;\n width: 100%;\n align-content: center;\n`;\n\nexport const StyledPrimaryTitle = styled('div', {\n name: DSAccordionName,\n slot: slots.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: slots.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: slots.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: slots.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: slots.ITEM.HEADER.TOOLTIP,\n})`\n padding: 8px;\n width: 250px;\n background: white;\n display: grid;\n gap: ${({ theme }) => theme.space.xxs};\n\n p {\n margin: 0;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAmD;AACnD,8BAAuC;AA+CvC,MAAM,gBAAgB,CAAC,EAAE,YAAY,yBAAiD;AACpF,MAAI;AACF,WAAO;AAAA;AAAA;AAGT,MAAI;AACF,WAAO;AAAA;AAAA;AAGT,SAAO;AAAA;AAAA;AAGT;AAEO,MAAM,sBAAsB,6BAAO,OAAO,EAAE,MAAM,yCAAiB,MAAM,8BAAM,KAAK,UAAU,CAAC;AAAA;AAAA;AAAA,6BAGzE,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG7D;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,mBAAmB,6BAAO,UAAU;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,8BAAM,KAAK,OAAO;AAC1B,CAAC;AAAA;AAAA,gBAEe,CAAC,EAAE,OAAO,oBAAoB,iBAC1C,aAAa,SAAS,GAAG,qBAAqB,MAAM,MAAM,IAAI,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOhE,CAAC,EAAE,eAAgB,WAAW,gBAAgB;AAAA;AAAA,aAE/C,CAAC,EAAE,iBAAkB,aAAa,WAAW;AAAA,IACtD,CAAC,EAAE,iBAAkB,aAAa,iCAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAU7C,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMrD,MAAM,oBAAoB,6BAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,8BAAM,KAAK,QAAQ;AAC3B,CAAC;AAAA,YACW,CAAC,EAAE,iBAAkB,aAAa,uBAAuB;AAAA;AAAA;AAI9D,MAAM,kBAAkB,6BAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,8BAAM,KAAK,OAAO;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMW,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAIzF,MAAM,mBAAmB,6BAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,8BAAM,KAAK,OAAO;AAC1B,CAAC;AAAA;AAAA,cAEa,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,IACrC;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,qBAAqB,6BAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,8BAAM,KAAK,OAAO;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMe,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,WAChC,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA,iBAChF,CAAC,EAAE,OAAO,iBAAkB,aAAa,MAAM,YAAY,WAAW,MAAM,YAAY;AAAA,IACrG,CAAC,EAAE,eACH,WACI,4BACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQD,MAAM,uBAAuB,6BAAO,QAAQ;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,8BAAM,KAAK,OAAO;AAC1B,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA,WAIzC,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA,IAE7F,CAAC,EAAE,eACH,WACI,4BACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOD,MAAM,0BAA0B,6BAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,8BAAM,KAAK,OAAO;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA,cAIa,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,YAC7B,CAAC,EAAE,OAAO,iBAAkB,aAAa,KAAK,MAAM,MAAM,OAAO;AAAA;AAAA;AAAA;AAKtE,MAAM,4BAA4B,6BAAO,OAAO;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,8BAAM,KAAK,OAAO;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOK,CAAC,EAAE,UAAU,YAAa,CAAC,WAAW,eAAe,MAAM,OAAO,MAAM,UAAU;AAAA;AAAA;AAIjF,MAAM,uBAAuB,6BAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,8BAAM,KAAK,OAAO;AAC1B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,SAKQ,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSAccordion.js
CHANGED
|
@@ -5,13 +5,14 @@ import { AccordionContent } from "./parts/accordionContent/AccordionContent";
|
|
|
5
5
|
import { useAccordion } from "./config/useAccordion";
|
|
6
6
|
import { DSAccordionContext } from "./DSAccordionCTX";
|
|
7
7
|
import { accordionPropTypes } from "./react-desc-prop-types";
|
|
8
|
+
import { DSAccordionName } from "./exported-related/theming";
|
|
8
9
|
const DSAccordion = (props) => {
|
|
9
10
|
const ctx = useAccordion(props);
|
|
10
11
|
return /* @__PURE__ */ React2.createElement(DSAccordionContext.Provider, {
|
|
11
12
|
value: ctx
|
|
12
13
|
}, /* @__PURE__ */ React2.createElement(AccordionContent, null));
|
|
13
14
|
};
|
|
14
|
-
DSAccordion.displayName =
|
|
15
|
+
DSAccordion.displayName = DSAccordionName;
|
|
15
16
|
const DSAccordionWithSchema = describe(DSAccordion);
|
|
16
17
|
DSAccordionWithSchema.propTypes = accordionPropTypes;
|
|
17
18
|
var DSAccordion_default = DSAccordion;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSAccordion.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { AccordionContent } from './parts/accordionContent/AccordionContent';\nimport { useAccordion } from './config/useAccordion';\nimport { DSAccordionContext } from './DSAccordionCTX';\nimport { accordionPropTypes } from './react-desc-prop-types';\nimport type { DSAccordionT } from './react-desc-prop-types';\n\nconst DSAccordion = (props: DSAccordionT.Props): JSX.Element => {\n const ctx = useAccordion(props);\n\n return (\n <DSAccordionContext.Provider value={ctx}>\n <AccordionContent />\n </DSAccordionContext.Provider>\n );\n};\n\nDSAccordion.displayName =
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { AccordionContent } from './parts/accordionContent/AccordionContent';\nimport { useAccordion } from './config/useAccordion';\nimport { DSAccordionContext } from './DSAccordionCTX';\nimport { accordionPropTypes } from './react-desc-prop-types';\nimport type { DSAccordionT } from './react-desc-prop-types';\nimport { DSAccordionName } from './exported-related/theming';\n\nconst DSAccordion = (props: DSAccordionT.Props): JSX.Element => {\n const ctx = useAccordion(props);\n\n return (\n <DSAccordionContext.Provider value={ctx}>\n <AccordionContent />\n </DSAccordionContext.Provider>\n );\n};\n\nDSAccordion.displayName = DSAccordionName;\nconst DSAccordionWithSchema = describe(DSAccordion);\nDSAccordionWithSchema.propTypes = accordionPropTypes as WeakValidationMap<unknown>;\n\nexport { DSAccordion, DSAccordionWithSchema };\n\nexport default DSAccordion;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA,MAAM,cAAc,CAAC,UAA2C;AAC9D,QAAM,MAAM,aAAa,KAAK;AAE9B,SACE,qCAAC,mBAAmB,UAAnB;AAAA,IAA4B,OAAO;AAAA,KAClC,qCAAC,sBAAiB,CACpB;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useAccordionRefs.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport type { DSAccordionT } from 'react-desc-prop-types';\nimport type { DSAccordionInternalsT } from '../sharedTypes';\n\ninterface UseAccordionRefsPropsT {\n children: React.ReactElement<DSAccordionT.InternalItemProps>[];\n}\n\ninterface UseAccordionRefsReturnTypeT {\n focusableChildrenReferences: DSAccordionInternalsT.FocusableChildrenReferences[];\n allChildrenReferences: DSAccordionInternalsT.AllChildrenReferences;\n}\n\nexport const useAccordionRefs = ({ children }: UseAccordionRefsPropsT): UseAccordionRefsReturnTypeT =>\n useMemo(() => {\n const focusableChildrenReferences: DSAccordionInternalsT.FocusableChildrenReferences[] = [];\n const allChildrenReferences: DSAccordionInternalsT.AllChildrenReferences = {};\n\n React.Children.map(children, (child: React.ReactElement<DSAccordionT.InternalItemProps>, index) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const { value, disabled } = child.props;\n const currentRef = React.createRef<HTMLButtonElement>();\n allChildrenReferences[index] = currentRef;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n if (!disabled) focusableChildrenReferences.push({ index, value, ref: currentRef });\n });\n return { focusableChildrenReferences, allChildrenReferences };\n }, [children]);\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport type { DSAccordionT } from '../react-desc-prop-types';\nimport type { DSAccordionInternalsT } from '../sharedTypes';\n\ninterface UseAccordionRefsPropsT {\n children: React.ReactElement<DSAccordionT.InternalItemProps>[];\n}\n\ninterface UseAccordionRefsReturnTypeT {\n focusableChildrenReferences: DSAccordionInternalsT.FocusableChildrenReferences[];\n allChildrenReferences: DSAccordionInternalsT.AllChildrenReferences;\n}\n\nexport const useAccordionRefs = ({ children }: UseAccordionRefsPropsT): UseAccordionRefsReturnTypeT =>\n useMemo(() => {\n const focusableChildrenReferences: DSAccordionInternalsT.FocusableChildrenReferences[] = [];\n const allChildrenReferences: DSAccordionInternalsT.AllChildrenReferences = {};\n\n React.Children.map(children, (child: React.ReactElement<DSAccordionT.InternalItemProps>, index) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const { value, disabled } = child.props;\n const currentRef = React.createRef<HTMLButtonElement>();\n allChildrenReferences[index] = currentRef;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n if (!disabled) focusableChildrenReferences.push({ index, value, ref: currentRef });\n });\n return { focusableChildrenReferences, allChildrenReferences };\n }, [children]);\n"],
|
|
5
5
|
"mappings": "AAAA;ACAA;AAaO,MAAM,mBAAmB,CAAC,EAAE,eACjC,QAAQ,MAAM;AACZ,QAAM,8BAAmF,CAAC;AAC1F,QAAM,wBAAqE,CAAC;AAE5E,SAAM,SAAS,IAAI,UAAU,CAAC,OAA2D,UAAU;AAEjG,UAAM,EAAE,OAAO,aAAa,MAAM;AAClC,UAAM,aAAa,OAAM,UAA6B;AACtD,0BAAsB,SAAS;AAE/B,QAAI,CAAC;AAAU,kCAA4B,KAAK,EAAE,OAAO,OAAO,KAAK,WAAW,CAAC;AAAA,EACnF,CAAC;AACD,SAAO,EAAE,6BAA6B,sBAAsB;AAC9D,GAAG,CAAC,QAAQ,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
const
|
|
2
|
+
const DSAccordionName = "DSAccordion";
|
|
3
3
|
const slots = {
|
|
4
4
|
CONTAINER: "root",
|
|
5
5
|
ITEM: {
|
|
@@ -19,7 +19,7 @@ const slots = {
|
|
|
19
19
|
}
|
|
20
20
|
};
|
|
21
21
|
export {
|
|
22
|
-
|
|
22
|
+
DSAccordionName,
|
|
23
23
|
slots
|
|
24
24
|
};
|
|
25
25
|
//# sourceMappingURL=theming.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSAccordionName = 'DSAccordion';\n\nexport const slots = {\n CONTAINER: 'root',\n ITEM: {\n CONTAINER: 'item-container',\n HEADER: {\n CONTAINER: 'item-header-container',\n ADDON: 'item-header-addon',\n TITLE_CONTAINER: 'item-header-titles-container',\n PRIMARY_TITLE: 'item-header-primary-title',\n SECONDARY_TITLE: 'item-header-secondary-title',\n CUSTOM_ACTIONS_CONTAINER: 'item-header-custom-actions-container',\n TOOLTIP: 'item-header-tooltip',\n },\n CONTENT: {\n CONTAINER: 'item-content-container',\n },\n },\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,kBAAkB;AAExB,MAAM,QAAQ;AAAA,EACnB,WAAW;AAAA,EACX,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,MACP,iBAAiB;AAAA,MACjB,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB,0BAA0B;AAAA,MAC1B,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,WAAW;AAAA,IACb;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled } from "@elliemae/ds-system";
|
|
3
|
-
import {
|
|
4
|
-
import { COMPONENT_NAME, slots } from "../../exported-related";
|
|
2
|
+
import { styled, sizing, space, layout } from "@elliemae/ds-system";
|
|
3
|
+
import { DSAccordionName, slots } from "../../exported-related";
|
|
5
4
|
const StyledContainer = styled("div", {
|
|
6
|
-
name:
|
|
5
|
+
name: DSAccordionName,
|
|
7
6
|
slot: slots.CONTAINER
|
|
8
7
|
})`
|
|
9
8
|
${sizing}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionContent/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, sizing, space, layout } from '@elliemae/ds-system';\nimport { DSAccordionName, slots } from '../../exported-related';\n\nexport const StyledContainer = styled('div', {\n name: DSAccordionName,\n slot: slots.CONTAINER,\n})`\n ${sizing}\n ${space}\n ${layout}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,MAAM;AACd,CAAC;AAAA,IACG;AAAA,IACA;AAAA,IACA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled, css } from "@elliemae/ds-system";
|
|
3
|
-
import {
|
|
4
|
-
import { COMPONENT_NAME, slots } from "../../exported-related";
|
|
2
|
+
import { styled, css, sizing, space, layout } from "@elliemae/ds-system";
|
|
3
|
+
import { DSAccordionName, slots } from "../../exported-related";
|
|
5
4
|
const paddingSetter = ({ isDSMobile, withSecondaryTitle }) => {
|
|
6
5
|
if (isDSMobile)
|
|
7
6
|
return css`
|
|
@@ -15,7 +14,7 @@ const paddingSetter = ({ isDSMobile, withSecondaryTitle }) => {
|
|
|
15
14
|
padding: 7px 0;
|
|
16
15
|
`;
|
|
17
16
|
};
|
|
18
|
-
const StyledItemContainer = styled("div", { name:
|
|
17
|
+
const StyledItemContainer = styled("div", { name: DSAccordionName, slot: slots.ITEM.CONTAINER })`
|
|
19
18
|
display: grid;
|
|
20
19
|
grid-template-rows: auto auto;
|
|
21
20
|
border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};
|
|
@@ -26,7 +25,7 @@ const StyledItemContainer = styled("div", { name: COMPONENT_NAME, slot: slots.IT
|
|
|
26
25
|
${space}
|
|
27
26
|
`;
|
|
28
27
|
const StyledItemHeader = styled("button", {
|
|
29
|
-
name:
|
|
28
|
+
name: DSAccordionName,
|
|
30
29
|
slot: slots.ITEM.HEADER.CONTAINER
|
|
31
30
|
})`
|
|
32
31
|
display: flex;
|
|
@@ -56,14 +55,14 @@ const StyledItemHeader = styled("button", {
|
|
|
56
55
|
}
|
|
57
56
|
`;
|
|
58
57
|
const StyledItemContent = styled("div", {
|
|
59
|
-
name:
|
|
58
|
+
name: DSAccordionName,
|
|
60
59
|
slot: slots.ITEM.CONTENT.CONTAINER
|
|
61
60
|
})`
|
|
62
61
|
margin: ${({ isDSMobile }) => isDSMobile ? `3px 16px 24px 16px` : "16px 20px"};
|
|
63
62
|
grid-column: 1/2;
|
|
64
63
|
`;
|
|
65
64
|
const StyledItemAddon = styled("div", {
|
|
66
|
-
name:
|
|
65
|
+
name: DSAccordionName,
|
|
67
66
|
slot: slots.ITEM.HEADER.ADDON
|
|
68
67
|
})`
|
|
69
68
|
height: 100%;
|
|
@@ -75,7 +74,7 @@ const StyledItemAddon = styled("div", {
|
|
|
75
74
|
}
|
|
76
75
|
`;
|
|
77
76
|
const StyledItemTitles = styled("div", {
|
|
78
|
-
name:
|
|
77
|
+
name: DSAccordionName,
|
|
79
78
|
slot: slots.ITEM.HEADER.TITLE_CONTAINER
|
|
80
79
|
})`
|
|
81
80
|
display: grid;
|
|
@@ -86,7 +85,7 @@ const StyledItemTitles = styled("div", {
|
|
|
86
85
|
align-content: center;
|
|
87
86
|
`;
|
|
88
87
|
const StyledPrimaryTitle = styled("div", {
|
|
89
|
-
name:
|
|
88
|
+
name: DSAccordionName,
|
|
90
89
|
slot: slots.ITEM.HEADER.PRIMARY_TITLE
|
|
91
90
|
})`
|
|
92
91
|
margin: 0;
|
|
@@ -105,7 +104,7 @@ const StyledPrimaryTitle = styled("div", {
|
|
|
105
104
|
display: block;
|
|
106
105
|
`;
|
|
107
106
|
const StyledSecondaryTitle = styled("span", {
|
|
108
|
-
name:
|
|
107
|
+
name: DSAccordionName,
|
|
109
108
|
slot: slots.ITEM.HEADER.SECONDARY_TITLE
|
|
110
109
|
})`
|
|
111
110
|
margin: 0;
|
|
@@ -122,7 +121,7 @@ const StyledSecondaryTitle = styled("span", {
|
|
|
122
121
|
display: block;`}
|
|
123
122
|
`;
|
|
124
123
|
const StyledItemCustomActions = styled("div", {
|
|
125
|
-
name:
|
|
124
|
+
name: DSAccordionName,
|
|
126
125
|
slot: slots.ITEM.HEADER.CUSTOM_ACTIONS_CONTAINER
|
|
127
126
|
})`
|
|
128
127
|
display: grid;
|
|
@@ -134,7 +133,7 @@ const StyledItemCustomActions = styled("div", {
|
|
|
134
133
|
height: 28px;
|
|
135
134
|
`;
|
|
136
135
|
const StyledItemHeaderContainer = styled("div", {
|
|
137
|
-
name:
|
|
136
|
+
name: DSAccordionName,
|
|
138
137
|
slot: slots.ITEM.HEADER.CONTAINER
|
|
139
138
|
})`
|
|
140
139
|
display: grid;
|
|
@@ -147,7 +146,7 @@ const StyledItemHeaderContainer = styled("div", {
|
|
|
147
146
|
}
|
|
148
147
|
`;
|
|
149
148
|
const StyledTooltipContent = styled("div", {
|
|
150
|
-
name:
|
|
149
|
+
name: DSAccordionName,
|
|
151
150
|
slot: slots.ITEM.HEADER.TOOLTIP
|
|
152
151
|
})`
|
|
153
152
|
padding: 8px;
|
|
@@ -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", "import { styled, css
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, sizing, space, layout } from '@elliemae/ds-system';\nimport { DSAccordionName, slots } from '../../exported-related';\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\ninterface PaddingSetterT {\n isDSMobile: boolean;\n withSecondaryTitle: boolean;\n}\n\nconst paddingSetter = ({ isDSMobile, withSecondaryTitle }: PaddingSetterT): string => {\n if (isDSMobile)\n return css`\n padding: 13px 0;\n `;\n if (withSecondaryTitle)\n return css`\n padding: 6px 0;\n `;\n return css`\n padding: 7px 0;\n `;\n};\n\nexport const StyledItemContainer = styled('div', { name: DSAccordionName, slot: slots.ITEM.CONTAINER })`\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 ${layout}\n ${sizing}\n ${space}\n`;\n\nexport const StyledItemHeader = styled('button', {\n name: DSAccordionName,\n slot: slots.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 ${({ isDSMobile }) => (isDSMobile ? `flex-direction: row-reverse;` : ``)}\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: slots.ITEM.CONTENT.CONTAINER,\n})<StyledItemContentPropsT>`\n margin: ${({ isDSMobile }) => (isDSMobile ? `3px 16px 24px 16px` : '16px 20px')};\n grid-column: 1/2;\n`;\n\nexport const StyledItemAddon = styled('div', {\n name: DSAccordionName,\n slot: slots.ITEM.HEADER.ADDON,\n})<StyledItemAddonPropsT>`\n height: 100%;\n display: grid;\n place-items: center;\n\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: slots.ITEM.HEADER.TITLE_CONTAINER,\n})<StyledItemTitlesPropsT>`\n display: grid;\n grid-gap: ${({ theme }) => theme.space.xxxs};\n ${paddingSetter}\n grid-template-columns: 100%;\n width: 100%;\n align-content: center;\n`;\n\nexport const StyledPrimaryTitle = styled('div', {\n name: DSAccordionName,\n slot: slots.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: slots.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: slots.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: slots.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: slots.ITEM.HEADER.TOOLTIP,\n})`\n padding: 8px;\n width: 250px;\n background: white;\n display: grid;\n gap: ${({ theme }) => theme.space.xxs};\n\n p {\n margin: 0;\n }\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-accordion",
|
|
3
|
-
"version": "3.1.0-next.
|
|
3
|
+
"version": "3.1.0-next.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Accordion",
|
|
6
6
|
"files": [
|
|
@@ -82,28 +82,17 @@
|
|
|
82
82
|
"reportFile": "tests.xml",
|
|
83
83
|
"indent": 4
|
|
84
84
|
},
|
|
85
|
-
"scripts": {
|
|
86
|
-
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
87
|
-
"test": "node ../../scripts/testing/test.mjs",
|
|
88
|
-
"lint": "node ../../scripts/lint.mjs",
|
|
89
|
-
"dts": "node ../../scripts/dts.mjs",
|
|
90
|
-
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
91
|
-
},
|
|
92
85
|
"dependencies": {
|
|
93
|
-
"@elliemae/ds-button": "3.1.0-next.
|
|
94
|
-
"@elliemae/ds-
|
|
95
|
-
"@elliemae/ds-
|
|
96
|
-
"@elliemae/ds-
|
|
97
|
-
"@elliemae/ds-
|
|
98
|
-
"@elliemae/ds-system": "3.1.0-next.1",
|
|
99
|
-
"@elliemae/ds-truncated-tooltip-text": "3.1.0-next.1",
|
|
100
|
-
"@elliemae/ds-utilities": "3.1.0-next.1",
|
|
101
|
-
"@xstyled/styled-components": "~3.1.2",
|
|
102
|
-
"react-desc": "~4.1.3"
|
|
86
|
+
"@elliemae/ds-button": "3.1.0-next.4",
|
|
87
|
+
"@elliemae/ds-icons": "3.1.0-next.4",
|
|
88
|
+
"@elliemae/ds-popperjs": "3.1.0-next.4",
|
|
89
|
+
"@elliemae/ds-system": "3.1.0-next.4",
|
|
90
|
+
"@elliemae/ds-utilities": "3.1.0-next.4"
|
|
103
91
|
},
|
|
104
92
|
"devDependencies": {
|
|
105
93
|
"@testing-library/jest-dom": "~5.16.2",
|
|
106
94
|
"@testing-library/react": "~12.1.2",
|
|
95
|
+
"@testing-library/user-event": "~13.5.0",
|
|
107
96
|
"react": "^17.0.2",
|
|
108
97
|
"react-dom": "^17.0.2"
|
|
109
98
|
},
|
|
@@ -114,5 +103,13 @@
|
|
|
114
103
|
"publishConfig": {
|
|
115
104
|
"access": "public",
|
|
116
105
|
"typeSafety": false
|
|
106
|
+
},
|
|
107
|
+
"scripts": {
|
|
108
|
+
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
109
|
+
"test": "node ../../scripts/testing/test.mjs",
|
|
110
|
+
"lint": "node ../../scripts/lint.mjs",
|
|
111
|
+
"dts": "node ../../scripts/dts.mjs",
|
|
112
|
+
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
113
|
+
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
117
114
|
}
|
|
118
|
-
}
|
|
115
|
+
}
|