@elliemae/ds-side-panel-header 3.22.0-next.22 → 3.22.0-next.24
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/SidePanelHeader.js +31 -43
- package/dist/cjs/SidePanelHeader.js.map +2 -2
- package/dist/cjs/SidePanelHeaderDefinitions.js +1 -0
- package/dist/cjs/SidePanelHeaderDefinitions.js.map +2 -2
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +8 -5
- package/dist/cjs/react-desc-prop-types.js.map +3 -3
- package/dist/cjs/styled.js +14 -2
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/SidePanelHeader.js +38 -45
- package/dist/esm/SidePanelHeader.js.map +2 -2
- package/dist/esm/SidePanelHeaderDefinitions.js +1 -0
- package/dist/esm/SidePanelHeaderDefinitions.js.map +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +6 -0
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled.js +15 -3
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/SidePanelHeaderDefinitions.d.ts +1 -0
- package/dist/types/react-desc-prop-types.d.ts +1 -1
- package/dist/types/styled.d.ts +3 -3
- package/package.json +8 -8
|
@@ -36,7 +36,6 @@ var React = __toESM(require("react"));
|
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
37
|
var import_react = require("react");
|
|
38
38
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
39
|
-
var import_ds_system = require("@elliemae/ds-system");
|
|
40
39
|
var import_lodash = require("lodash");
|
|
41
40
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
42
41
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
@@ -44,53 +43,42 @@ var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
|
44
43
|
var import_styled = require("./styled.js");
|
|
45
44
|
const SidePanelHeader = (props) => {
|
|
46
45
|
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
46
|
+
const globalAttributes = (0, import_lodash.omit)((0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefaults), "cols", "wrap", "rows");
|
|
47
|
+
const xStyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefaults);
|
|
47
48
|
const getOwnerProps = (0, import_react.useCallback)(() => propsWithDefaults, [propsWithDefaults]);
|
|
48
49
|
const getOwnerPropsArguments = (0, import_react.useCallback)(() => ({}), []);
|
|
49
50
|
const { title, additionalAction, onClose = import_lodash.noop, showClose = true, closeButtonRef = void 0 } = propsWithDefaults;
|
|
50
|
-
const theme = (0, import_ds_system.useTheme)();
|
|
51
51
|
const separator = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { height: "24px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledSeparator, { getOwnerProps, getOwnerPropsArguments }) });
|
|
52
52
|
const cols = ["1fr", "auto", "auto"];
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
size: "m",
|
|
83
|
-
onClick: onClose,
|
|
84
|
-
"data-testid": "btn-close-slide-panel",
|
|
85
|
-
getOwnerProps,
|
|
86
|
-
getOwnerPropsArguments,
|
|
87
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseSmall, {})
|
|
88
|
-
}
|
|
89
|
-
) })
|
|
90
|
-
] })
|
|
91
|
-
]
|
|
92
|
-
}
|
|
93
|
-
);
|
|
53
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.Wrapper, { cols, alignItems: "center", width: "100%", ...globalAttributes, ...xStyledProps, children: [
|
|
54
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
55
|
+
import_styled.StyledTitle,
|
|
56
|
+
{
|
|
57
|
+
maxWidth: "100%",
|
|
58
|
+
alignItems: "center",
|
|
59
|
+
getOwnerProps,
|
|
60
|
+
getOwnerPropsArguments,
|
|
61
|
+
children: title
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { ml: "xxs", alignItems: "center", cols: additionalAction ? ["auto", "auto", "auto"] : ["auto"], children: [
|
|
65
|
+
additionalAction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: additionalAction }),
|
|
66
|
+
additionalAction && showClose && separator,
|
|
67
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: showClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
68
|
+
import_styled.StyledCloseButton,
|
|
69
|
+
{
|
|
70
|
+
buttonType: "icon",
|
|
71
|
+
innerRef: closeButtonRef,
|
|
72
|
+
size: "m",
|
|
73
|
+
onClick: onClose,
|
|
74
|
+
"data-testid": "btn-close-slide-panel",
|
|
75
|
+
getOwnerProps,
|
|
76
|
+
getOwnerPropsArguments,
|
|
77
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseSmall, {})
|
|
78
|
+
}
|
|
79
|
+
) })
|
|
80
|
+
] })
|
|
81
|
+
] });
|
|
94
82
|
};
|
|
95
83
|
SidePanelHeader.propTypes = import_react_desc_prop_types.propTypes;
|
|
96
84
|
SidePanelHeader.displayName = "SidePanelHeader";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SidePanelHeader.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback } from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useCallback } from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { noop, omit } from 'lodash';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSSidePanelHeaderT, defaultProps, propTypes } from './react-desc-prop-types.js';\n\nimport { StyledSeparator, StyledTitle, Wrapper, StyledCloseButton } from './styled.js';\nconst SidePanelHeader = (props: DSSidePanelHeaderT.Props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSSidePanelHeaderT.InternalProps>(props, defaultProps);\n\n const globalAttributes = omit(useGetGlobalAttributes(propsWithDefaults), 'cols', 'wrap', 'rows');\n const xStyledProps = useGetXstyledProps(propsWithDefaults);\n\n const getOwnerProps = useCallback(() => propsWithDefaults, [propsWithDefaults]);\n const getOwnerPropsArguments = useCallback(() => ({}), []);\n const { title, additionalAction, onClose = noop, showClose = true, closeButtonRef = undefined } = propsWithDefaults;\n const separator = (\n <Grid height=\"24px\">\n <StyledSeparator getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n </Grid>\n );\n const cols = ['1fr', 'auto', 'auto'];\n return (\n <Wrapper cols={cols} alignItems=\"center\" width=\"100%\" {...globalAttributes} {...xStyledProps}>\n <StyledTitle\n maxWidth=\"100%\"\n alignItems=\"center\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {title}\n </StyledTitle>\n <Grid ml=\"xxs\" alignItems=\"center\" cols={additionalAction ? ['auto', 'auto', 'auto'] : ['auto']}>\n {additionalAction && <Grid>{additionalAction}</Grid>}\n {additionalAction && showClose && separator}\n <Grid>\n {showClose && (\n <StyledCloseButton\n buttonType=\"icon\"\n innerRef={closeButtonRef}\n size=\"m\"\n onClick={onClose}\n data-testid=\"btn-close-slide-panel\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <CloseSmall />\n </StyledCloseButton>\n )}\n </Grid>\n </Grid>\n </Wrapper>\n );\n};\n\nSidePanelHeader.propTypes = propTypes;\nSidePanelHeader.displayName = 'SidePanelHeader';\nconst DSSidePanelHeaderWithSchema = describe(SidePanelHeader);\n\nDSSidePanelHeaderWithSchema.propTypes = propTypes;\n\nexport { SidePanelHeader, DSSidePanelHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBjB;AAxBN,mBAAmC;AACnC,8BAKO;AACP,oBAA2B;AAC3B,sBAA2B;AAC3B,qBAAqB;AACrB,mCAAiE;AAEjE,oBAAyE;AACzE,MAAM,kBAAkB,CAAC,UAAoC;AAC3D,QAAM,wBAAoB,sDAA+D,OAAO,yCAAY;AAE5G,QAAM,uBAAmB,wBAAK,gDAAuB,iBAAiB,GAAG,QAAQ,QAAQ,MAAM;AAC/F,QAAM,mBAAe,4CAAmB,iBAAiB;AAEzD,QAAM,oBAAgB,0BAAY,MAAM,mBAAmB,CAAC,iBAAiB,CAAC;AAC9E,QAAM,6BAAyB,0BAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AACzD,QAAM,EAAE,OAAO,kBAAkB,UAAU,oBAAM,YAAY,MAAM,iBAAiB,OAAU,IAAI;AAClG,QAAM,YACJ,4CAAC,uBAAK,QAAO,QACX,sDAAC,iCAAgB,eAA8B,wBAAgD,GACjG;AAEF,QAAM,OAAO,CAAC,OAAO,QAAQ,MAAM;AACnC,SACE,6CAAC,yBAAQ,MAAY,YAAW,UAAS,OAAM,QAAQ,GAAG,kBAAmB,GAAG,cAC9E;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,YAAW;AAAA,QACX;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,6CAAC,uBAAK,IAAG,OAAM,YAAW,UAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM,GAC3F;AAAA,0BAAoB,4CAAC,uBAAM,4BAAiB;AAAA,MAC5C,oBAAoB,aAAa;AAAA,MAClC,4CAAC,uBACE,uBACC;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,UAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAS;AAAA,UACT,eAAY;AAAA,UACZ;AAAA,UACA;AAAA,UAEA,sDAAC,8BAAW;AAAA;AAAA,MACd,GAEJ;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,kCAA8B,kCAAS,eAAe;AAE5D,4BAA4B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SidePanelHeaderDefinitions.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSSidePanelHeaderName = 'DSSidePanelHeader' as const;\nexport const DSSidePanelHeaderSlots = {\n CLOSE_BUTTON: 'close-button',\n TITLE: 'title',\n SEPARATOR: 'separator',\n};\n\nexport const DSSidePanelHeaderDataTestIds = {\n ...slotObjectToDataTestIds(DSSidePanelHeaderName, DSSidePanelHeaderSlots),\n CLOSE_BUTTON: 'btn-close-slide-panel',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAAA,EACpC,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW;AACb;AAEO,MAAM,+BAA+B;AAAA,EAC1C,OAAG,0CAAwB,uBAAuB,sBAAsB;AAAA,EACxE,cAAc;AAChB;",
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSSidePanelHeaderName = 'DSSidePanelHeader' as const;\nexport const DSSidePanelHeaderSlots = {\n CLOSE_BUTTON: 'close-button',\n TITLE: 'title',\n WRAPPER: 'wrapper',\n SEPARATOR: 'separator',\n};\n\nexport const DSSidePanelHeaderDataTestIds = {\n ...slotObjectToDataTestIds(DSSidePanelHeaderName, DSSidePanelHeaderSlots),\n CLOSE_BUTTON: 'btn-close-slide-panel',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAAA,EACpC,cAAc;AAAA,EACd,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AACb;AAEO,MAAM,+BAA+B;AAAA,EAC1C,OAAG,0CAAwB,uBAAuB,sBAAsB;AAAA,EACxE,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './SidePanelHeader.js';\nexport * from './react-desc-prop-types.js';\nexport * from './SidePanelHeaderDefinitions.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["export * from './SidePanelHeader.js';\nexport * from './react-desc-prop-types.js';\nexport * from './SidePanelHeaderDefinitions.js';\nimport {} from '@xstyled/system';\nimport {} from '@xstyled/util';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,iCAAd;AACA,wBAAc,uCADd;AAEA,wBAAc,4CAFd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,21 +34,24 @@ __export(react_desc_prop_types_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
|
+
var import_ds_props_helpers2 = require("@elliemae/ds-props-helpers");
|
|
37
38
|
const defaultProps = {
|
|
38
39
|
onClose: () => {
|
|
39
40
|
},
|
|
40
41
|
showClose: true
|
|
41
42
|
};
|
|
42
43
|
const propTypes = {
|
|
44
|
+
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
45
|
+
...import_ds_props_helpers.xstyledPropTypes,
|
|
43
46
|
/** Page title */
|
|
44
|
-
title:
|
|
47
|
+
title: import_ds_props_helpers2.PropTypes.string.description("Page title"),
|
|
45
48
|
/** Action button */
|
|
46
|
-
additionalAction:
|
|
49
|
+
additionalAction: import_ds_props_helpers2.PropTypes.element.description("Action button"),
|
|
47
50
|
/** Called when the slide collapse */
|
|
48
|
-
onClose:
|
|
51
|
+
onClose: import_ds_props_helpers2.PropTypes.func.description("Called when the slide collapse").defaultValue(defaultProps.onClose),
|
|
49
52
|
/** Show/Hide close button */
|
|
50
|
-
showClose:
|
|
53
|
+
showClose: import_ds_props_helpers2.PropTypes.bool.description("Show/Hide close button").defaultValue(defaultProps.showClose),
|
|
51
54
|
/** Ref for close button */
|
|
52
|
-
closeButtonRef:
|
|
55
|
+
closeButtonRef: import_ds_props_helpers2.PropTypes.object.description("Ref for close button")
|
|
53
56
|
};
|
|
54
57
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport {\n type GlobalAttributesT,\n type XstyledProps,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSSidePanelHeaderT {\n export interface DefaultProps {\n onClose: () => void;\n showClose: boolean;\n }\n\n export interface OptionalProps {\n title?: string;\n additionalAction?: React.ReactNode;\n closeButtonRef?: React.RefObject<HTMLButtonElement>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n}\n\nexport const defaultProps: DSSidePanelHeaderT.DefaultProps = {\n onClose: () => {},\n showClose: true,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n /** Page title */\n title: PropTypes.string.description('Page title'),\n /** Action button */\n additionalAction: PropTypes.element.description('Action button'),\n /** Called when the slide collapse */\n onClose: PropTypes.func.description('Called when the slide collapse').defaultValue(defaultProps.onClose),\n /** Show/Hide close button */\n showClose: PropTypes.bool.description('Show/Hide close button').defaultValue(defaultProps.showClose),\n /** Ref for close button */\n closeButtonRef: PropTypes.object.description('Ref for close button'),\n} as unknown as WeakValidationMap<DSSidePanelHeaderT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AACP,IAAAA,2BAA0B;AA0BnB,MAAM,eAAgD;AAAA,EAC3D,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,WAAW;AACb;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA;AAAA,EAEH,OAAO,mCAAU,OAAO,YAAY,YAAY;AAAA;AAAA,EAEhD,kBAAkB,mCAAU,QAAQ,YAAY,eAAe;AAAA;AAAA,EAE/D,SAAS,mCAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,aAAa,OAAO;AAAA;AAAA,EAEvG,WAAW,mCAAU,KAAK,YAAY,wBAAwB,EAAE,aAAa,aAAa,SAAS;AAAA;AAAA,EAEnG,gBAAgB,mCAAU,OAAO,YAAY,sBAAsB;AACrE;",
|
|
6
|
+
"names": ["import_ds_props_helpers"]
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -43,22 +43,34 @@ const StyledTitle = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
|
43
43
|
name: import_SidePanelHeaderDefinitions.DSSidePanelHeaderName,
|
|
44
44
|
slot: import_SidePanelHeaderDefinitions.DSSidePanelHeaderSlots.TITLE
|
|
45
45
|
})`
|
|
46
|
+
margin-right: ${(props) => props.theme.space.xs};
|
|
46
47
|
font-size: 18px;
|
|
47
48
|
font-weight: ${(props) => props.theme.fontWeights.regular};
|
|
48
49
|
color: ${(props) => props.theme.colors.neutral["700"]};
|
|
49
50
|
${(0, import_ds_system.truncate)()}
|
|
51
|
+
${import_ds_system.xStyledCommonProps}
|
|
50
52
|
`;
|
|
51
|
-
const Wrapper = (0, import_ds_system.styled)(import_ds_grid.Grid
|
|
53
|
+
const Wrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
|
|
54
|
+
name: import_SidePanelHeaderDefinitions.DSSidePanelHeaderName,
|
|
55
|
+
slot: import_SidePanelHeaderDefinitions.DSSidePanelHeaderSlots.WRAPPER
|
|
56
|
+
})`
|
|
57
|
+
padding-right: ${(props) => props.theme.space.xs};
|
|
58
|
+
padding-left: ${(props) => props.theme.space.xs};
|
|
59
|
+
height: ${(props) => props.theme.space.m};
|
|
52
60
|
border-bottom: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["300"])};
|
|
61
|
+
${import_ds_system.xStyledCommonProps}
|
|
53
62
|
`;
|
|
54
63
|
const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
|
|
55
64
|
name: import_SidePanelHeaderDefinitions.DSSidePanelHeaderName,
|
|
56
65
|
slot: import_SidePanelHeaderDefinitions.DSSidePanelHeaderSlots.CLOSE_BUTTON
|
|
57
|
-
})
|
|
66
|
+
})`
|
|
67
|
+
${import_ds_system.xStyledCommonProps}
|
|
68
|
+
`;
|
|
58
69
|
const StyledSeparator = import_ds_system.styled.div`
|
|
59
70
|
width: 0;
|
|
60
71
|
height: 100%;
|
|
61
72
|
margin: 0 ${(props) => props.theme.space.xxs};
|
|
62
73
|
border-left: ${(props) => `${props.theme.colors.neutral[300]} 1px solid`};
|
|
74
|
+
${import_ds_system.xStyledCommonProps}
|
|
63
75
|
`;
|
|
64
76
|
//# sourceMappingURL=styled.js.map
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, border, truncate } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSidePanelHeaderName, DSSidePanelHeaderSlots } from './SidePanelHeaderDefinitions.js';\nexport const StyledTitle = styled(Grid, {\n name: DSSidePanelHeaderName,\n slot: DSSidePanelHeaderSlots.TITLE,\n})`\n font-size: 18px;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['700']};\n ${truncate()}\n`;\n\nexport const Wrapper = styled(Grid)`\n border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, {\n name: DSSidePanelHeaderName,\n slot: DSSidePanelHeaderSlots.CLOSE_BUTTON,\n})
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { styled, border, truncate, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSidePanelHeaderName, DSSidePanelHeaderSlots } from './SidePanelHeaderDefinitions.js';\nexport const StyledTitle = styled(Grid, {\n name: DSSidePanelHeaderName,\n slot: DSSidePanelHeaderSlots.TITLE,\n})`\n margin-right: ${(props) => props.theme.space.xs};\n font-size: 18px;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['700']};\n ${truncate()}\n ${xStyledCommonProps}\n`;\n\nexport const Wrapper = styled(Grid, {\n name: DSSidePanelHeaderName,\n slot: DSSidePanelHeaderSlots.WRAPPER,\n})`\n padding-right: ${(props) => props.theme.space.xs};\n padding-left: ${(props) => props.theme.space.xs};\n height: ${(props) => props.theme.space.m};\n border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n ${xStyledCommonProps}\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, {\n name: DSSidePanelHeaderName,\n slot: DSSidePanelHeaderSlots.CLOSE_BUTTON,\n})`\n ${xStyledCommonProps}\n`;\n\nexport const StyledSeparator = styled.div`\n width: 0;\n height: 100%;\n margin: 0 ${(props) => props.theme.space.xxs};\n border-left: ${(props) => `${props.theme.colors.neutral[300]} 1px solid`};\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA6D;AAC7D,0BAA2B;AAC3B,qBAAqB;AACrB,wCAA8D;AACvD,MAAM,kBAAc,yBAAO,qBAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,yDAAuB;AAC/B,CAAC;AAAA,kBACiB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,iBAE9B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,QAClD,2BAAS;AAAA,IACT;AAAA;AAGG,MAAM,cAAU,yBAAO,qBAAM;AAAA,EAClC,MAAM;AAAA,EACN,MAAM,yDAAuB;AAC/B,CAAC;AAAA,mBACkB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,kBAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,YACnC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBACtB,CAAC,cAAU,yBAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,IAClE;AAAA;AAGG,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,yDAAuB;AAC/B,CAAC;AAAA,IACG;AAAA;AAGG,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA,cAGxB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC1B,CAAC,UAAU,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,IACzD;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,62 +1,55 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback } from "react";
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
import {
|
|
5
|
+
describe,
|
|
6
|
+
useMemoMergePropsWithDefault,
|
|
7
|
+
useGetGlobalAttributes,
|
|
8
|
+
useGetXstyledProps
|
|
9
|
+
} from "@elliemae/ds-props-helpers";
|
|
10
|
+
import { noop, omit } from "lodash";
|
|
7
11
|
import { CloseSmall } from "@elliemae/ds-icons";
|
|
8
12
|
import { Grid } from "@elliemae/ds-grid";
|
|
9
13
|
import { defaultProps, propTypes } from "./react-desc-prop-types.js";
|
|
10
14
|
import { StyledSeparator, StyledTitle, Wrapper, StyledCloseButton } from "./styled.js";
|
|
11
15
|
const SidePanelHeader = (props) => {
|
|
12
16
|
const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
|
|
17
|
+
const globalAttributes = omit(useGetGlobalAttributes(propsWithDefaults), "cols", "wrap", "rows");
|
|
18
|
+
const xStyledProps = useGetXstyledProps(propsWithDefaults);
|
|
13
19
|
const getOwnerProps = useCallback(() => propsWithDefaults, [propsWithDefaults]);
|
|
14
20
|
const getOwnerPropsArguments = useCallback(() => ({}), []);
|
|
15
21
|
const { title, additionalAction, onClose = noop, showClose = true, closeButtonRef = void 0 } = propsWithDefaults;
|
|
16
|
-
const theme = useTheme();
|
|
17
22
|
const separator = /* @__PURE__ */ jsx(Grid, { height: "24px", children: /* @__PURE__ */ jsx(StyledSeparator, { getOwnerProps, getOwnerPropsArguments }) });
|
|
18
23
|
const cols = ["1fr", "auto", "auto"];
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
/* @__PURE__ */ jsx(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
size: "m",
|
|
49
|
-
onClick: onClose,
|
|
50
|
-
"data-testid": "btn-close-slide-panel",
|
|
51
|
-
getOwnerProps,
|
|
52
|
-
getOwnerPropsArguments,
|
|
53
|
-
children: /* @__PURE__ */ jsx(CloseSmall, {})
|
|
54
|
-
}
|
|
55
|
-
) })
|
|
56
|
-
] })
|
|
57
|
-
]
|
|
58
|
-
}
|
|
59
|
-
);
|
|
24
|
+
return /* @__PURE__ */ jsxs(Wrapper, { cols, alignItems: "center", width: "100%", ...globalAttributes, ...xStyledProps, children: [
|
|
25
|
+
/* @__PURE__ */ jsx(
|
|
26
|
+
StyledTitle,
|
|
27
|
+
{
|
|
28
|
+
maxWidth: "100%",
|
|
29
|
+
alignItems: "center",
|
|
30
|
+
getOwnerProps,
|
|
31
|
+
getOwnerPropsArguments,
|
|
32
|
+
children: title
|
|
33
|
+
}
|
|
34
|
+
),
|
|
35
|
+
/* @__PURE__ */ jsxs(Grid, { ml: "xxs", alignItems: "center", cols: additionalAction ? ["auto", "auto", "auto"] : ["auto"], children: [
|
|
36
|
+
additionalAction && /* @__PURE__ */ jsx(Grid, { children: additionalAction }),
|
|
37
|
+
additionalAction && showClose && separator,
|
|
38
|
+
/* @__PURE__ */ jsx(Grid, { children: showClose && /* @__PURE__ */ jsx(
|
|
39
|
+
StyledCloseButton,
|
|
40
|
+
{
|
|
41
|
+
buttonType: "icon",
|
|
42
|
+
innerRef: closeButtonRef,
|
|
43
|
+
size: "m",
|
|
44
|
+
onClick: onClose,
|
|
45
|
+
"data-testid": "btn-close-slide-panel",
|
|
46
|
+
getOwnerProps,
|
|
47
|
+
getOwnerPropsArguments,
|
|
48
|
+
children: /* @__PURE__ */ jsx(CloseSmall, {})
|
|
49
|
+
}
|
|
50
|
+
) })
|
|
51
|
+
] })
|
|
52
|
+
] });
|
|
60
53
|
};
|
|
61
54
|
SidePanelHeader.propTypes = propTypes;
|
|
62
55
|
SidePanelHeader.displayName = "SidePanelHeader";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/SidePanelHeader.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { noop, omit } from 'lodash';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSSidePanelHeaderT, defaultProps, propTypes } from './react-desc-prop-types.js';\n\nimport { StyledSeparator, StyledTitle, Wrapper, StyledCloseButton } from './styled.js';\nconst SidePanelHeader = (props: DSSidePanelHeaderT.Props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSSidePanelHeaderT.InternalProps>(props, defaultProps);\n\n const globalAttributes = omit(useGetGlobalAttributes(propsWithDefaults), 'cols', 'wrap', 'rows');\n const xStyledProps = useGetXstyledProps(propsWithDefaults);\n\n const getOwnerProps = useCallback(() => propsWithDefaults, [propsWithDefaults]);\n const getOwnerPropsArguments = useCallback(() => ({}), []);\n const { title, additionalAction, onClose = noop, showClose = true, closeButtonRef = undefined } = propsWithDefaults;\n const separator = (\n <Grid height=\"24px\">\n <StyledSeparator getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n </Grid>\n );\n const cols = ['1fr', 'auto', 'auto'];\n return (\n <Wrapper cols={cols} alignItems=\"center\" width=\"100%\" {...globalAttributes} {...xStyledProps}>\n <StyledTitle\n maxWidth=\"100%\"\n alignItems=\"center\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {title}\n </StyledTitle>\n <Grid ml=\"xxs\" alignItems=\"center\" cols={additionalAction ? ['auto', 'auto', 'auto'] : ['auto']}>\n {additionalAction && <Grid>{additionalAction}</Grid>}\n {additionalAction && showClose && separator}\n <Grid>\n {showClose && (\n <StyledCloseButton\n buttonType=\"icon\"\n innerRef={closeButtonRef}\n size=\"m\"\n onClick={onClose}\n data-testid=\"btn-close-slide-panel\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <CloseSmall />\n </StyledCloseButton>\n )}\n </Grid>\n </Grid>\n </Wrapper>\n );\n};\n\nSidePanelHeader.propTypes = propTypes;\nSidePanelHeader.displayName = 'SidePanelHeader';\nconst DSSidePanelHeaderWithSchema = describe(SidePanelHeader);\n\nDSSidePanelHeaderWithSchema.propTypes = propTypes;\n\nexport { SidePanelHeader, DSSidePanelHeaderWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACwBjB,cAcA,YAdA;AAxBN,SAAgB,mBAAmB;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,MAAM,YAAY;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAkC,cAAc,iBAAiB;AAEjE,SAAS,iBAAiB,aAAa,SAAS,yBAAyB;AACzE,MAAM,kBAAkB,CAAC,UAAoC;AAC3D,QAAM,oBAAoB,6BAA+D,OAAO,YAAY;AAE5G,QAAM,mBAAmB,KAAK,uBAAuB,iBAAiB,GAAG,QAAQ,QAAQ,MAAM;AAC/F,QAAM,eAAe,mBAAmB,iBAAiB;AAEzD,QAAM,gBAAgB,YAAY,MAAM,mBAAmB,CAAC,iBAAiB,CAAC;AAC9E,QAAM,yBAAyB,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AACzD,QAAM,EAAE,OAAO,kBAAkB,UAAU,MAAM,YAAY,MAAM,iBAAiB,OAAU,IAAI;AAClG,QAAM,YACJ,oBAAC,QAAK,QAAO,QACX,8BAAC,mBAAgB,eAA8B,wBAAgD,GACjG;AAEF,QAAM,OAAO,CAAC,OAAO,QAAQ,MAAM;AACnC,SACE,qBAAC,WAAQ,MAAY,YAAW,UAAS,OAAM,QAAQ,GAAG,kBAAmB,GAAG,cAC9E;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,YAAW;AAAA,QACX;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,qBAAC,QAAK,IAAG,OAAM,YAAW,UAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM,GAC3F;AAAA,0BAAoB,oBAAC,QAAM,4BAAiB;AAAA,MAC5C,oBAAoB,aAAa;AAAA,MAClC,oBAAC,QACE,uBACC;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,UAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAS;AAAA,UACT,eAAY;AAAA,UACZ;AAAA,UACA;AAAA,UAEA,8BAAC,cAAW;AAAA;AAAA,MACd,GAEJ;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,8BAA8B,SAAS,eAAe;AAE5D,4BAA4B,YAAY;",
|
|
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/SidePanelHeaderDefinitions.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSSidePanelHeaderName = 'DSSidePanelHeader' as const;\nexport const DSSidePanelHeaderSlots = {\n CLOSE_BUTTON: 'close-button',\n TITLE: 'title',\n SEPARATOR: 'separator',\n};\n\nexport const DSSidePanelHeaderDataTestIds = {\n ...slotObjectToDataTestIds(DSSidePanelHeaderName, DSSidePanelHeaderSlots),\n CLOSE_BUTTON: 'btn-close-slide-panel',\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAAA,EACpC,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW;AACb;AAEO,MAAM,+BAA+B;AAAA,EAC1C,GAAG,wBAAwB,uBAAuB,sBAAsB;AAAA,EACxE,cAAc;AAChB;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSSidePanelHeaderName = 'DSSidePanelHeader' as const;\nexport const DSSidePanelHeaderSlots = {\n CLOSE_BUTTON: 'close-button',\n TITLE: 'title',\n WRAPPER: 'wrapper',\n SEPARATOR: 'separator',\n};\n\nexport const DSSidePanelHeaderDataTestIds = {\n ...slotObjectToDataTestIds(DSSidePanelHeaderName, DSSidePanelHeaderSlots),\n CLOSE_BUTTON: 'btn-close-slide-panel',\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAAA,EACpC,cAAc;AAAA,EACd,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AACb;AAEO,MAAM,+BAA+B;AAAA,EAC1C,GAAG,wBAAwB,uBAAuB,sBAAsB;AAAA,EACxE,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './SidePanelHeader.js';\nexport * from './react-desc-prop-types.js';\nexport * from './SidePanelHeaderDefinitions.js';\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './SidePanelHeader.js';\nexport * from './react-desc-prop-types.js';\nexport * from './SidePanelHeaderDefinitions.js';\nimport {} from '@xstyled/system';\nimport {} from '@xstyled/util';\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import {
|
|
3
|
+
globalAttributesPropTypes,
|
|
4
|
+
xstyledPropTypes
|
|
5
|
+
} from "@elliemae/ds-props-helpers";
|
|
2
6
|
import { PropTypes } from "@elliemae/ds-props-helpers";
|
|
3
7
|
const defaultProps = {
|
|
4
8
|
onClose: () => {
|
|
@@ -6,6 +10,8 @@ const defaultProps = {
|
|
|
6
10
|
showClose: true
|
|
7
11
|
};
|
|
8
12
|
const propTypes = {
|
|
13
|
+
...globalAttributesPropTypes,
|
|
14
|
+
...xstyledPropTypes,
|
|
9
15
|
/** Page title */
|
|
10
16
|
title: PropTypes.string.description("Page title"),
|
|
11
17
|
/** Action button */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport {\n type GlobalAttributesT,\n type XstyledProps,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSSidePanelHeaderT {\n export interface DefaultProps {\n onClose: () => void;\n showClose: boolean;\n }\n\n export interface OptionalProps {\n title?: string;\n additionalAction?: React.ReactNode;\n closeButtonRef?: React.RefObject<HTMLButtonElement>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n}\n\nexport const defaultProps: DSSidePanelHeaderT.DefaultProps = {\n onClose: () => {},\n showClose: true,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n /** Page title */\n title: PropTypes.string.description('Page title'),\n /** Action button */\n additionalAction: PropTypes.element.description('Action button'),\n /** Called when the slide collapse */\n onClose: PropTypes.func.description('Called when the slide collapse').defaultValue(defaultProps.onClose),\n /** Show/Hide close button */\n showClose: PropTypes.bool.description('Show/Hide close button').defaultValue(defaultProps.showClose),\n /** Ref for close button */\n closeButtonRef: PropTypes.object.description('Ref for close button'),\n} as unknown as WeakValidationMap<DSSidePanelHeaderT.Props>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AA0BnB,MAAM,eAAgD;AAAA,EAC3D,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,WAAW;AACb;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA;AAAA,EAEH,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA;AAAA,EAEhD,kBAAkB,UAAU,QAAQ,YAAY,eAAe;AAAA;AAAA,EAE/D,SAAS,UAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,aAAa,OAAO;AAAA;AAAA,EAEvG,WAAW,UAAU,KAAK,YAAY,wBAAwB,EAAE,aAAa,aAAa,SAAS;AAAA;AAAA,EAEnG,gBAAgB,UAAU,OAAO,YAAY,sBAAsB;AACrE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled, border, truncate } from "@elliemae/ds-system";
|
|
2
|
+
import { styled, border, truncate, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
3
|
import { DSButtonV2 } from "@elliemae/ds-button-v2";
|
|
4
4
|
import { Grid } from "@elliemae/ds-grid";
|
|
5
5
|
import { DSSidePanelHeaderName, DSSidePanelHeaderSlots } from "./SidePanelHeaderDefinitions.js";
|
|
@@ -7,23 +7,35 @@ const StyledTitle = styled(Grid, {
|
|
|
7
7
|
name: DSSidePanelHeaderName,
|
|
8
8
|
slot: DSSidePanelHeaderSlots.TITLE
|
|
9
9
|
})`
|
|
10
|
+
margin-right: ${(props) => props.theme.space.xs};
|
|
10
11
|
font-size: 18px;
|
|
11
12
|
font-weight: ${(props) => props.theme.fontWeights.regular};
|
|
12
13
|
color: ${(props) => props.theme.colors.neutral["700"]};
|
|
13
14
|
${truncate()}
|
|
15
|
+
${xStyledCommonProps}
|
|
14
16
|
`;
|
|
15
|
-
const Wrapper = styled(Grid
|
|
17
|
+
const Wrapper = styled(Grid, {
|
|
18
|
+
name: DSSidePanelHeaderName,
|
|
19
|
+
slot: DSSidePanelHeaderSlots.WRAPPER
|
|
20
|
+
})`
|
|
21
|
+
padding-right: ${(props) => props.theme.space.xs};
|
|
22
|
+
padding-left: ${(props) => props.theme.space.xs};
|
|
23
|
+
height: ${(props) => props.theme.space.m};
|
|
16
24
|
border-bottom: ${(props) => border(props.theme.colors.neutral["300"])};
|
|
25
|
+
${xStyledCommonProps}
|
|
17
26
|
`;
|
|
18
27
|
const StyledCloseButton = styled(DSButtonV2, {
|
|
19
28
|
name: DSSidePanelHeaderName,
|
|
20
29
|
slot: DSSidePanelHeaderSlots.CLOSE_BUTTON
|
|
21
|
-
})
|
|
30
|
+
})`
|
|
31
|
+
${xStyledCommonProps}
|
|
32
|
+
`;
|
|
22
33
|
const StyledSeparator = styled.div`
|
|
23
34
|
width: 0;
|
|
24
35
|
height: 100%;
|
|
25
36
|
margin: 0 ${(props) => props.theme.space.xxs};
|
|
26
37
|
border-left: ${(props) => `${props.theme.colors.neutral[300]} 1px solid`};
|
|
38
|
+
${xStyledCommonProps}
|
|
27
39
|
`;
|
|
28
40
|
export {
|
|
29
41
|
StyledCloseButton,
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, border, truncate } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSidePanelHeaderName, DSSidePanelHeaderSlots } from './SidePanelHeaderDefinitions.js';\nexport const StyledTitle = styled(Grid, {\n name: DSSidePanelHeaderName,\n slot: DSSidePanelHeaderSlots.TITLE,\n})`\n font-size: 18px;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['700']};\n ${truncate()}\n`;\n\nexport const Wrapper = styled(Grid)`\n border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, {\n name: DSSidePanelHeaderName,\n slot: DSSidePanelHeaderSlots.CLOSE_BUTTON,\n})
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,QAAQ,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, border, truncate, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSidePanelHeaderName, DSSidePanelHeaderSlots } from './SidePanelHeaderDefinitions.js';\nexport const StyledTitle = styled(Grid, {\n name: DSSidePanelHeaderName,\n slot: DSSidePanelHeaderSlots.TITLE,\n})`\n margin-right: ${(props) => props.theme.space.xs};\n font-size: 18px;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['700']};\n ${truncate()}\n ${xStyledCommonProps}\n`;\n\nexport const Wrapper = styled(Grid, {\n name: DSSidePanelHeaderName,\n slot: DSSidePanelHeaderSlots.WRAPPER,\n})`\n padding-right: ${(props) => props.theme.space.xs};\n padding-left: ${(props) => props.theme.space.xs};\n height: ${(props) => props.theme.space.m};\n border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n ${xStyledCommonProps}\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, {\n name: DSSidePanelHeaderName,\n slot: DSSidePanelHeaderSlots.CLOSE_BUTTON,\n})`\n ${xStyledCommonProps}\n`;\n\nexport const StyledSeparator = styled.div`\n width: 0;\n height: 100%;\n margin: 0 ${(props) => props.theme.space.xxs};\n border-left: ${(props) => `${props.theme.colors.neutral[300]} 1px solid`};\n ${xStyledCommonProps}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,QAAQ,UAAU,0BAA0B;AAC7D,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,uBAAuB,8BAA8B;AACvD,MAAM,cAAc,OAAO,MAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAAA,kBACiB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,iBAE9B,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,IAClD,SAAS;AAAA,IACT;AAAA;AAGG,MAAM,UAAU,OAAO,MAAM;AAAA,EAClC,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAAA,mBACkB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,kBAC9B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,YACnC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBACtB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,IAClE;AAAA;AAGG,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAAA,IACG;AAAA;AAGG,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA,cAGxB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBAC1B,CAAC,UAAU,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,IACzD;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { WeakValidationMap } from 'react';
|
|
2
2
|
import type React from 'react';
|
|
3
|
-
import type
|
|
3
|
+
import { type GlobalAttributesT, type XstyledProps } from '@elliemae/ds-props-helpers';
|
|
4
4
|
export declare namespace DSSidePanelHeaderT {
|
|
5
5
|
interface DefaultProps {
|
|
6
6
|
onClose: () => void;
|
package/dist/types/styled.d.ts
CHANGED
|
@@ -4,6 +4,6 @@ export declare const StyledTitle: import("styled-components").StyledComponent<im
|
|
|
4
4
|
} & {
|
|
5
5
|
theme: import("@elliemae/pui-theme").Theme;
|
|
6
6
|
} & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
7
|
-
export declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme,
|
|
8
|
-
export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonT.Props>, import("@elliemae/ds-system").Theme,
|
|
9
|
-
export declare const StyledSeparator: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme,
|
|
7
|
+
export declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").TypographyProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").BackgroundProps & import("@elliemae/ds-system").SpaceProps & import("@xstyled/system").BoxShadowProps<import("@xstyled/system").Theme> & import("@xstyled/system").FlexboxesProps<import("@xstyled/system").Theme> & import("@xstyled/system").LayoutProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").ColorProps & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
8
|
+
export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonT.Props>, import("@elliemae/ds-system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").TypographyProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").BackgroundProps & import("@elliemae/ds-system").SpaceProps & import("@xstyled/system").BoxShadowProps<import("@xstyled/system").Theme> & import("@xstyled/system").FlexboxesProps<import("@xstyled/system").Theme> & import("@xstyled/system").LayoutProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").ColorProps & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
9
|
+
export declare const StyledSeparator: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").TypographyProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").BackgroundProps & import("@elliemae/ds-system").SpaceProps & import("@xstyled/system").BoxShadowProps<import("@xstyled/system").Theme> & import("@xstyled/system").FlexboxesProps<import("@xstyled/system").Theme> & import("@xstyled/system").LayoutProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").ColorProps & import("@elliemae/ds-system").OwnerInterface, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-side-panel-header",
|
|
3
|
-
"version": "3.22.0-next.
|
|
3
|
+
"version": "3.22.0-next.24",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Side Panel Header",
|
|
6
6
|
"files": [
|
|
@@ -57,17 +57,17 @@
|
|
|
57
57
|
"dependencies": {
|
|
58
58
|
"@elliemae/pui-theme": "~2.7.0",
|
|
59
59
|
"jest-axe": "^7.0.1",
|
|
60
|
-
"@elliemae/ds-button-v2": "3.22.0-next.
|
|
61
|
-
"@elliemae/ds-
|
|
62
|
-
"@elliemae/ds-
|
|
63
|
-
"@elliemae/ds-
|
|
64
|
-
"@elliemae/ds-
|
|
65
|
-
"@elliemae/ds-utilities": "3.22.0-next.
|
|
60
|
+
"@elliemae/ds-button-v2": "3.22.0-next.24",
|
|
61
|
+
"@elliemae/ds-grid": "3.22.0-next.24",
|
|
62
|
+
"@elliemae/ds-props-helpers": "3.22.0-next.24",
|
|
63
|
+
"@elliemae/ds-system": "3.22.0-next.24",
|
|
64
|
+
"@elliemae/ds-icons": "3.22.0-next.24",
|
|
65
|
+
"@elliemae/ds-utilities": "3.22.0-next.24"
|
|
66
66
|
},
|
|
67
67
|
"devDependencies": {
|
|
68
68
|
"@elliemae/pui-cli": "~9.0.0-next.22",
|
|
69
69
|
"styled-components": "~5.3.9",
|
|
70
|
-
"@elliemae/ds-monorepo-devops": "3.22.0-next.
|
|
70
|
+
"@elliemae/ds-monorepo-devops": "3.22.0-next.24"
|
|
71
71
|
},
|
|
72
72
|
"peerDependencies": {
|
|
73
73
|
"lodash": "^4.17.21",
|