@elliemae/ds-chip 3.33.1 → 3.34.0-next.2
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/DSChip.js +15 -4
- package/dist/cjs/DSChip.js.map +2 -2
- package/dist/cjs/config/useConfig.js +3 -1
- package/dist/cjs/config/useConfig.js.map +2 -2
- package/dist/cjs/exported_related/data-test-ids.js +3 -5
- package/dist/cjs/exported_related/data-test-ids.js.map +2 -2
- package/dist/cjs/exported_related/theming.js +3 -2
- package/dist/cjs/exported_related/theming.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -0
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +8 -7
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/DSChip.js +15 -4
- package/dist/esm/DSChip.js.map +2 -2
- package/dist/esm/config/useConfig.js +3 -1
- package/dist/esm/config/useConfig.js.map +2 -2
- package/dist/esm/exported_related/data-test-ids.js +3 -5
- package/dist/esm/exported_related/data-test-ids.js.map +2 -2
- package/dist/esm/exported_related/theming.js +3 -2
- package/dist/esm/exported_related/theming.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +8 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +8 -7
- package/dist/esm/styles.js.map +2 -2
- package/dist/types/config/useConfig.d.ts +11 -2
- package/dist/types/exported_related/data-test-ids.d.ts +1 -5
- package/dist/types/exported_related/theming.d.ts +5 -4
- package/dist/types/react-desc-prop-types.d.ts +3 -1
- package/dist/types/styles.d.ts +0 -1
- package/package.json +7 -6
package/dist/cjs/DSChip.js
CHANGED
|
@@ -40,9 +40,19 @@ var import_styles = require("./styles.js");
|
|
|
40
40
|
var import_constants = require("./constants.js");
|
|
41
41
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
42
42
|
const DSChip = (props) => {
|
|
43
|
-
const {
|
|
43
|
+
const {
|
|
44
|
+
size,
|
|
45
|
+
shape,
|
|
46
|
+
selected,
|
|
47
|
+
innerRef,
|
|
48
|
+
icon: Icon,
|
|
49
|
+
label,
|
|
50
|
+
globalAttrs,
|
|
51
|
+
xStyledAttrs,
|
|
52
|
+
ownerPropsConfig
|
|
53
|
+
} = (0, import_useConfig.useConfig)(props);
|
|
44
54
|
const { disabled, className, ...restGlobals } = globalAttrs;
|
|
45
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledWrapper, { buttonShape: shape, buttonSize: size, className, ...xStyledAttrs, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
55
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledWrapper, { buttonShape: shape, buttonSize: size, className, ...xStyledAttrs, ...ownerPropsConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
46
56
|
import_styles.StyledChip,
|
|
47
57
|
{
|
|
48
58
|
buttonShape: shape,
|
|
@@ -52,9 +62,10 @@ const DSChip = (props) => {
|
|
|
52
62
|
selected,
|
|
53
63
|
role: "button",
|
|
54
64
|
...restGlobals,
|
|
65
|
+
...ownerPropsConfig,
|
|
55
66
|
children: [
|
|
56
|
-
shape === import_constants.CHIP_SHAPES.ROUND ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledRoundShape, { disabled, size, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}),
|
|
57
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledChipLabel, { size, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSpanWithEllipsis, { children: label }) })
|
|
67
|
+
shape === import_constants.CHIP_SHAPES.ROUND ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledRoundShape, { disabled, size, ...ownerPropsConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}),
|
|
68
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledChipLabel, { size, ...ownerPropsConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSpanWithEllipsis, { ...ownerPropsConfig, children: label }) })
|
|
58
69
|
]
|
|
59
70
|
}
|
|
60
71
|
) });
|
package/dist/cjs/DSChip.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSChip.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useConfig } from './config/useConfig.js';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles.js';\nimport { CHIP_SHAPES } from './constants.js';\nimport type { DSChipT } from './react-desc-prop-types.js';\nimport { DSChipPropTypes } from './react-desc-prop-types.js';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useConfig } from './config/useConfig.js';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles.js';\nimport { CHIP_SHAPES } from './constants.js';\nimport type { DSChipT } from './react-desc-prop-types.js';\nimport { DSChipPropTypes } from './react-desc-prop-types.js';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const {\n size,\n shape,\n selected,\n innerRef,\n icon: Icon,\n label,\n globalAttrs,\n xStyledAttrs,\n ownerPropsConfig,\n } = useConfig(props);\n\n const { disabled, className, ...restGlobals } = globalAttrs;\n\n return (\n <StyledWrapper buttonShape={shape} buttonSize={size} className={className} {...xStyledAttrs} {...ownerPropsConfig}>\n <StyledChip\n buttonShape={shape}\n aria-disabled={disabled}\n disabled={disabled}\n innerRef={innerRef}\n selected={selected}\n role=\"button\"\n {...restGlobals}\n {...ownerPropsConfig}\n >\n {shape === CHIP_SHAPES.ROUND ? (\n <StyledRoundShape disabled={disabled} size={size} {...ownerPropsConfig}>\n <Icon />\n </StyledRoundShape>\n ) : (\n <Icon />\n )}\n <StyledChipLabel size={size} {...ownerPropsConfig}>\n <StyledSpanWithEllipsis {...ownerPropsConfig}>{label}</StyledSpanWithEllipsis>\n </StyledChipLabel>\n </StyledChip>\n </StyledWrapper>\n );\n};\n\nDSChip.propTypes = DSChipPropTypes;\nDSChip.displayName = 'DSChip';\nconst DSChipWithSchema = describe(DSChip);\nDSChipWithSchema.propTypes = DSChipPropTypes;\n\nexport { DSChip, DSChipWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBjB;AAxBN,8BAAyB;AACzB,uBAA0B;AAC1B,oBAAqG;AACrG,uBAA4B;AAE5B,mCAAgC;AAEhC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,4BAAU,KAAK;AAEnB,QAAM,EAAE,UAAU,WAAW,GAAG,YAAY,IAAI;AAEhD,SACE,4CAAC,+BAAc,aAAa,OAAO,YAAY,MAAM,WAAuB,GAAG,cAAe,GAAG,kBAC/F;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,kBAAU,6BAAY,QACrB,4CAAC,kCAAiB,UAAoB,MAAa,GAAG,kBACpD,sDAAC,QAAK,GACR,IAEA,4CAAC,QAAK;AAAA,QAER,4CAAC,iCAAgB,MAAa,GAAG,kBAC/B,sDAAC,wCAAwB,GAAG,kBAAmB,iBAAM,GACvD;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,MAAM,uBAAmB,kCAAS,MAAM;AACxC,iBAAiB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,6 +33,7 @@ __export(useConfig_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(useConfig_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
36
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
36
37
|
var import_exported_related = require("../exported_related/index.js");
|
|
37
38
|
var import_react_desc_prop_types = require("../react-desc-prop-types.js");
|
|
38
39
|
const useConfig = (props) => {
|
|
@@ -40,6 +41,7 @@ const useConfig = (props) => {
|
|
|
40
41
|
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSChipPropTypes, import_exported_related.DSChipName);
|
|
41
42
|
const globalAttrs = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
|
|
42
43
|
const xStyledAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
|
|
43
|
-
|
|
44
|
+
const ownerPropsConfig = (0, import_ds_utilities.useOwnerProps)(propsWithDefault, { ...props });
|
|
45
|
+
return { ...propsWithDefault, globalAttrs, xStyledAttrs, ownerPropsConfig };
|
|
44
46
|
};
|
|
45
47
|
//# sourceMappingURL=useConfig.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useConfig.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { DSChipName } from '../exported_related/index.js';\nimport type { DSChipT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSChipPropTypes } from '../react-desc-prop-types.js';\n\nexport const useConfig = (props: DSChipT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSChipT.InternalProps>>(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes, DSChipName);\n const globalAttrs = useGetGlobalAttributes<\n DSChipT.InternalProps,\n HTMLButtonElement,\n { type?: 'button' | 'reset' | 'submit' }\n >(propsWithDefault);\n const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n\n return { ...propsWithDefault, globalAttrs, xStyledAttrs };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAKO;AACP,8BAA2B;AAE3B,mCAA8C;AAEvC,MAAM,YAAY,CAAC,UAAyB;AACjD,QAAM,uBAAmB,sDAA8D,OAAO,yCAAY;AAE1G,8DAA+B,kBAAkB,8CAAiB,kCAAU;AAC5E,QAAM,kBAAc,gDAIlB,gBAAgB;AAClB,QAAM,mBAAe,4CAAmB,gBAAgB;
|
|
4
|
+
"sourcesContent": ["import {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { useOwnerProps } from '@elliemae/ds-utilities';\nimport { DSChipName } from '../exported_related/index.js';\nimport type { DSChipT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSChipPropTypes } from '../react-desc-prop-types.js';\n\nexport const useConfig = (props: DSChipT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSChipT.InternalProps>>(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes, DSChipName);\n const globalAttrs = useGetGlobalAttributes<\n DSChipT.InternalProps,\n HTMLButtonElement,\n { type?: 'button' | 'reset' | 'submit' }\n >(propsWithDefault);\n const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n\n return { ...propsWithDefault, globalAttrs, xStyledAttrs, ownerPropsConfig };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAKO;AACP,0BAA8B;AAC9B,8BAA2B;AAE3B,mCAA8C;AAEvC,MAAM,YAAY,CAAC,UAAyB;AACjD,QAAM,uBAAmB,sDAA8D,OAAO,yCAAY;AAE1G,8DAA+B,kBAAkB,8CAAiB,kCAAU;AAC5E,QAAM,kBAAc,gDAIlB,gBAAgB;AAClB,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,QAAM,uBAAmB,mCAAc,kBAAkB,EAAE,GAAG,MAAM,CAAC;AAErE,SAAO,EAAE,GAAG,kBAAkB,aAAa,cAAc,iBAAiB;AAC5E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,9 +32,7 @@ __export(data_test_ids_exports, {
|
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(data_test_ids_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
ROUND_SHAPE: "ds-chip-round-shape"
|
|
39
|
-
};
|
|
35
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
36
|
+
var import_theming = require("./theming.js");
|
|
37
|
+
const DSChipDataTestIds = (0, import_ds_system.slotObjectToDataTestIds)(import_theming.DSChipName, import_theming.DSChipSlots);
|
|
40
38
|
//# sourceMappingURL=data-test-ids.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported_related/data-test-ids.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSChipName, DSChipSlots } from './theming.js';\n\nexport const DSChipDataTestIds = slotObjectToDataTestIds(DSChipName, DSChipSlots);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AACxC,qBAAwC;AAEjC,MAAM,wBAAoB,0CAAwB,2BAAY,0BAAW;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,9 +35,10 @@ module.exports = __toCommonJS(theming_exports);
|
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
36
|
const DSChipName = "DSChip";
|
|
37
37
|
const DSChipSlots = {
|
|
38
|
-
|
|
38
|
+
ROOT: "root",
|
|
39
|
+
BUTTON: "button",
|
|
39
40
|
LABEL: "label",
|
|
40
41
|
ROUND_SHAPE: "round-shape",
|
|
41
|
-
|
|
42
|
+
ELLIPSIS: "ellipsis"
|
|
42
43
|
};
|
|
43
44
|
//# sourceMappingURL=theming.js.map
|
|
@@ -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 DSChipName = 'DSChip';\n\nexport const DSChipSlots = {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,aAAa;AAEnB,MAAM,cAAc;AAAA,EACzB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,
|
|
4
|
+
"sourcesContent": ["export const DSChipName = 'DSChip';\n\nexport const DSChipSlots = {\n ROOT: 'root',\n BUTTON: 'button',\n LABEL: 'label',\n ROUND_SHAPE: 'round-shape',\n ELLIPSIS: 'ellipsis',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,aAAa;AAEnB,MAAM,cAAc;AAAA,EACzB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AACZ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,11 +35,13 @@ 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
37
|
var import_constants = require("./constants.js");
|
|
38
|
+
var import_theming = require("./exported_related/theming.js");
|
|
38
39
|
const defaultProps = {
|
|
39
40
|
size: import_constants.CHIP_SIZES.L,
|
|
40
41
|
shape: import_constants.CHIP_SHAPES.DEFAULT
|
|
41
42
|
};
|
|
42
43
|
const DSChipPropTypes = {
|
|
44
|
+
...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_theming.DSChipName, import_theming.DSChipSlots),
|
|
43
45
|
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
44
46
|
...import_ds_props_helpers.xstyledPropTypes,
|
|
45
47
|
icon: import_ds_props_helpers.PropTypes.func.isRequired.description("Chip Icon").defaultValue(() => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../../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 { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport {\n CHIP_SIZES,\n CHIP_SHAPES,\n ChipSizesValuesArray,\n ChipSizesValuesString,\n ChipShapesValuesArray,\n ChipShapesValuesString,\n} from './constants.js';\nimport type { ChipSizesT, ChipShapesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/theming.js';\n\nexport const defaultProps: DSChipT.DefaultProps = {\n size: CHIP_SIZES.L,\n shape: CHIP_SHAPES.DEFAULT,\n};\n\nexport declare namespace DSChipT {\n interface DefaultProps {\n size: ChipSizesT;\n shape: ChipShapesT;\n }\n interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSChipName, typeof DSChipSlots> {\n selected?: boolean;\n innerRef?: React.RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n }\n\n interface RequiredProps {\n label: string;\n icon: () => JSX.Element;\n }\n export interface InternalProps extends OptionalProps, Partial<DefaultProps>, RequiredProps {}\n export interface Props\n extends Omit<GlobalAttributesT<HTMLButtonElement>, keyof InternalProps>,\n InternalProps,\n XstyledProps {}\n}\n\nexport const DSChipPropTypes = {\n ...getPropsPerSlotPropTypes(DSChipName, DSChipSlots),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n icon: PropTypes.func.isRequired.description('Chip Icon').defaultValue(() => {}),\n label: PropTypes.string.isRequired.description('Chip Label').defaultValue(''),\n selected: PropTypes.bool.description('Whether chip is selected').defaultValue(''),\n shape: PropTypes.oneOf(ChipShapesValuesArray).description(ChipShapesValuesString).defaultValue(CHIP_SHAPES.DEFAULT),\n size: PropTypes.oneOf(ChipSizesValuesArray).description(ChipSizesValuesString).defaultValue(CHIP_SIZES.L),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,8BAKO;AACP,uBAOO;AAEP,qBAAwC;AAEjC,MAAM,eAAqC;AAAA,EAChD,MAAM,4BAAW;AAAA,EACjB,OAAO,6BAAY;AACrB;AAuBO,MAAM,kBAAkB;AAAA,EAC7B,OAAG,kDAAyB,2BAAY,0BAAW;AAAA,EACnD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,kCAAU,KAAK,WAAW,YAAY,WAAW,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC9E,OAAO,kCAAU,OAAO,WAAW,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EAC5E,UAAU,kCAAU,KAAK,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EAChF,OAAO,kCAAU,MAAM,sCAAqB,EAAE,YAAY,uCAAsB,EAAE,aAAa,6BAAY,OAAO;AAAA,EAClH,MAAM,kCAAU,MAAM,qCAAoB,EAAE,YAAY,sCAAqB,EAAE,aAAa,4BAAW,CAAC;AAAA,EACxG,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAChH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -28,7 +28,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var styles_exports = {};
|
|
30
30
|
__export(styles_exports, {
|
|
31
|
-
StyledChildrenWrapper: () => StyledChildrenWrapper,
|
|
32
31
|
StyledChip: () => StyledChip,
|
|
33
32
|
StyledChipLabel: () => StyledChipLabel,
|
|
34
33
|
StyledRoundShape: () => StyledRoundShape,
|
|
@@ -54,13 +53,19 @@ const StyledChipLabel = (0, import_ds_system.styled)("div", { name: import_expor
|
|
|
54
53
|
align-items: center;
|
|
55
54
|
justify-content: center;
|
|
56
55
|
`;
|
|
57
|
-
const StyledSpanWithEllipsis = import_ds_system.styled
|
|
56
|
+
const StyledSpanWithEllipsis = (0, import_ds_system.styled)("span", {
|
|
57
|
+
name: import_exported_related.DSChipName,
|
|
58
|
+
slot: import_exported_related.DSChipSlots.ELLIPSIS
|
|
59
|
+
})`
|
|
58
60
|
white-space: nowrap;
|
|
59
61
|
overflow: hidden;
|
|
60
62
|
text-overflow: ellipsis;
|
|
61
63
|
max-width: 100%;
|
|
62
64
|
`;
|
|
63
|
-
const StyledWrapper = (0, import_ds_system.styled)("div"
|
|
65
|
+
const StyledWrapper = (0, import_ds_system.styled)("div", {
|
|
66
|
+
name: import_exported_related.DSChipName,
|
|
67
|
+
slot: import_exported_related.DSChipSlots.ROOT
|
|
68
|
+
})`
|
|
64
69
|
display: flex;
|
|
65
70
|
height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};
|
|
66
71
|
width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};
|
|
@@ -86,10 +91,6 @@ const StyledRoundShape = (0, import_ds_system.styled)("div", {
|
|
|
86
91
|
justify-content: center;
|
|
87
92
|
margin-top: ${({ size }) => size === import_constants.CHIP_SIZES.L ? "5px" : "10px"};
|
|
88
93
|
`;
|
|
89
|
-
const StyledChildrenWrapper = (0, import_ds_system.styled)("div", { name: import_exported_related.DSChipName, slot: import_exported_related.DSChipSlots.CHILDREN_WRAPPER })`
|
|
90
|
-
width: 100%;
|
|
91
|
-
height: 100%;
|
|
92
|
-
`;
|
|
93
94
|
const styledChipSelectedCss = import_ds_system.css`
|
|
94
95
|
// TODO: wrap css processor to process new HOC wrapping styled components
|
|
95
96
|
${StyledRoundShape.toString()} {
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/index.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n size: ChipSizesT;\n disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.LABEL })<{ size: ChipSizesT }>`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n text-align: center;\n padding: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')} 6px 6px 6px;\n z-index: 0;\n line-height: 1.27;\n width: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/index.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n size: ChipSizesT;\n disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.LABEL })<{ size: ChipSizesT }>`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n text-align: center;\n padding: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')} 6px 6px 6px;\n z-index: 0;\n line-height: 1.27;\n width: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled('span', {\n name: DSChipName,\n slot: DSChipSlots.ELLIPSIS,\n})`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div', {\n name: DSChipName,\n slot: DSChipSlots.ROOT,\n})<StyledChipPropsT>`\n display: flex;\n height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\n`;\n\nconst disabledRoundShape = css`\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledRoundShape = styled('div', {\n name: DSChipName,\n slot: DSChipSlots.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n background-color: ${({ theme }) => theme.colors.brand[600]};\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: ${({ size }) => (size === CHIP_SIZES.L ? '5px' : '10px')};\n`;\n\nconst styledChipSelectedCss = css`\n // TODO: wrap css processor to process new HOC wrapping styled components\n ${StyledRoundShape.toString()} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n\n .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n\n &:before {\n border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n }\n }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: DSChipSlots.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-top: ${(props) => (props.buttonShape === CHIP_SHAPES.ROUND ? '0' : '10px')};\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n background-color: #fff;\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n\n ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: #fff;\n height: 1.846rem;\n width: 1.846rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\n }\n ${({ disabled }) => disabled && disabledRoundShape}\n }\n &:before {\n content: '';\n position: absolute;\n z-index: 20;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n border: 2px solid transparent;\n pointer-events: none;\n }\n\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n height: 1.846rem;\n width: 1.846rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\n }\n\n & .DSIcon-root {\n height: 1.846rem;\n width: 1.846rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\n }\n\n &:hover,\n &:focus {\n z-index: 10;\n\n ${StyledChipLabel} {\n text-align: left;\n }\n\n ${StyledSpanWithEllipsis} {\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\n }\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:focus {\n &:before {\n border-color: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:disabled {\n color: ${({ theme }) => theme.colors.neutral[500]};\n cursor: not-allowed;\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n\n &:focus,\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: #fff;\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n\n ${StyledChipLabel} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n &:hover .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSChip.js
CHANGED
|
@@ -6,9 +6,19 @@ import { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpa
|
|
|
6
6
|
import { CHIP_SHAPES } from "./constants.js";
|
|
7
7
|
import { DSChipPropTypes } from "./react-desc-prop-types.js";
|
|
8
8
|
const DSChip = (props) => {
|
|
9
|
-
const {
|
|
9
|
+
const {
|
|
10
|
+
size,
|
|
11
|
+
shape,
|
|
12
|
+
selected,
|
|
13
|
+
innerRef,
|
|
14
|
+
icon: Icon,
|
|
15
|
+
label,
|
|
16
|
+
globalAttrs,
|
|
17
|
+
xStyledAttrs,
|
|
18
|
+
ownerPropsConfig
|
|
19
|
+
} = useConfig(props);
|
|
10
20
|
const { disabled, className, ...restGlobals } = globalAttrs;
|
|
11
|
-
return /* @__PURE__ */ jsx(StyledWrapper, { buttonShape: shape, buttonSize: size, className, ...xStyledAttrs, children: /* @__PURE__ */ jsxs(
|
|
21
|
+
return /* @__PURE__ */ jsx(StyledWrapper, { buttonShape: shape, buttonSize: size, className, ...xStyledAttrs, ...ownerPropsConfig, children: /* @__PURE__ */ jsxs(
|
|
12
22
|
StyledChip,
|
|
13
23
|
{
|
|
14
24
|
buttonShape: shape,
|
|
@@ -18,9 +28,10 @@ const DSChip = (props) => {
|
|
|
18
28
|
selected,
|
|
19
29
|
role: "button",
|
|
20
30
|
...restGlobals,
|
|
31
|
+
...ownerPropsConfig,
|
|
21
32
|
children: [
|
|
22
|
-
shape === CHIP_SHAPES.ROUND ? /* @__PURE__ */ jsx(StyledRoundShape, { disabled, size, children: /* @__PURE__ */ jsx(Icon, {}) }) : /* @__PURE__ */ jsx(Icon, {}),
|
|
23
|
-
/* @__PURE__ */ jsx(StyledChipLabel, { size, children: /* @__PURE__ */ jsx(StyledSpanWithEllipsis, { children: label }) })
|
|
33
|
+
shape === CHIP_SHAPES.ROUND ? /* @__PURE__ */ jsx(StyledRoundShape, { disabled, size, ...ownerPropsConfig, children: /* @__PURE__ */ jsx(Icon, {}) }) : /* @__PURE__ */ jsx(Icon, {}),
|
|
34
|
+
/* @__PURE__ */ jsx(StyledChipLabel, { size, ...ownerPropsConfig, children: /* @__PURE__ */ jsx(StyledSpanWithEllipsis, { ...ownerPropsConfig, children: label }) })
|
|
24
35
|
]
|
|
25
36
|
}
|
|
26
37
|
) });
|
package/dist/esm/DSChip.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSChip.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useConfig } from './config/useConfig.js';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles.js';\nimport { CHIP_SHAPES } from './constants.js';\nimport type { DSChipT } from './react-desc-prop-types.js';\nimport { DSChipPropTypes } from './react-desc-prop-types.js';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useConfig } from './config/useConfig.js';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles.js';\nimport { CHIP_SHAPES } from './constants.js';\nimport type { DSChipT } from './react-desc-prop-types.js';\nimport { DSChipPropTypes } from './react-desc-prop-types.js';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n const {\n size,\n shape,\n selected,\n innerRef,\n icon: Icon,\n label,\n globalAttrs,\n xStyledAttrs,\n ownerPropsConfig,\n } = useConfig(props);\n\n const { disabled, className, ...restGlobals } = globalAttrs;\n\n return (\n <StyledWrapper buttonShape={shape} buttonSize={size} className={className} {...xStyledAttrs} {...ownerPropsConfig}>\n <StyledChip\n buttonShape={shape}\n aria-disabled={disabled}\n disabled={disabled}\n innerRef={innerRef}\n selected={selected}\n role=\"button\"\n {...restGlobals}\n {...ownerPropsConfig}\n >\n {shape === CHIP_SHAPES.ROUND ? (\n <StyledRoundShape disabled={disabled} size={size} {...ownerPropsConfig}>\n <Icon />\n </StyledRoundShape>\n ) : (\n <Icon />\n )}\n <StyledChipLabel size={size} {...ownerPropsConfig}>\n <StyledSpanWithEllipsis {...ownerPropsConfig}>{label}</StyledSpanWithEllipsis>\n </StyledChipLabel>\n </StyledChip>\n </StyledWrapper>\n );\n};\n\nDSChip.propTypes = DSChipPropTypes;\nDSChip.displayName = 'DSChip';\nconst DSChipWithSchema = describe(DSChip);\nDSChipWithSchema.propTypes = DSChipPropTypes;\n\nexport { DSChip, DSChipWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyBjB,SAYM,KAZN;AAxBN,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,YAAY,iBAAiB,eAAe,kBAAkB,8BAA8B;AACrG,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAEhC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,UAAU,KAAK;AAEnB,QAAM,EAAE,UAAU,WAAW,GAAG,YAAY,IAAI;AAEhD,SACE,oBAAC,iBAAc,aAAa,OAAO,YAAY,MAAM,WAAuB,GAAG,cAAe,GAAG,kBAC/F;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,kBAAU,YAAY,QACrB,oBAAC,oBAAiB,UAAoB,MAAa,GAAG,kBACpD,8BAAC,QAAK,GACR,IAEA,oBAAC,QAAK;AAAA,QAER,oBAAC,mBAAgB,MAAa,GAAG,kBAC/B,8BAAC,0BAAwB,GAAG,kBAAmB,iBAAM,GACvD;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,MAAM,mBAAmB,SAAS,MAAM;AACxC,iBAAiB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,6 +5,7 @@ import {
|
|
|
5
5
|
useValidateTypescriptPropTypes,
|
|
6
6
|
useGetXstyledProps
|
|
7
7
|
} from "@elliemae/ds-props-helpers";
|
|
8
|
+
import { useOwnerProps } from "@elliemae/ds-utilities";
|
|
8
9
|
import { DSChipName } from "../exported_related/index.js";
|
|
9
10
|
import { defaultProps, DSChipPropTypes } from "../react-desc-prop-types.js";
|
|
10
11
|
const useConfig = (props) => {
|
|
@@ -12,7 +13,8 @@ const useConfig = (props) => {
|
|
|
12
13
|
useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes, DSChipName);
|
|
13
14
|
const globalAttrs = useGetGlobalAttributes(propsWithDefault);
|
|
14
15
|
const xStyledAttrs = useGetXstyledProps(propsWithDefault);
|
|
15
|
-
|
|
16
|
+
const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });
|
|
17
|
+
return { ...propsWithDefault, globalAttrs, xStyledAttrs, ownerPropsConfig };
|
|
16
18
|
};
|
|
17
19
|
export {
|
|
18
20
|
useConfig
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useConfig.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { DSChipName } from '../exported_related/index.js';\nimport type { DSChipT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSChipPropTypes } from '../react-desc-prop-types.js';\n\nexport const useConfig = (props: DSChipT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSChipT.InternalProps>>(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes, DSChipName);\n const globalAttrs = useGetGlobalAttributes<\n DSChipT.InternalProps,\n HTMLButtonElement,\n { type?: 'button' | 'reset' | 'submit' }\n >(propsWithDefault);\n const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n\n return { ...propsWithDefault, globalAttrs, xStyledAttrs };\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAE3B,SAAS,cAAc,uBAAuB;AAEvC,MAAM,YAAY,CAAC,UAAyB;AACjD,QAAM,mBAAmB,6BAA8D,OAAO,YAAY;AAE1G,iCAA+B,kBAAkB,iBAAiB,UAAU;AAC5E,QAAM,cAAc,uBAIlB,gBAAgB;AAClB,QAAM,eAAe,mBAAmB,gBAAgB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { useOwnerProps } from '@elliemae/ds-utilities';\nimport { DSChipName } from '../exported_related/index.js';\nimport type { DSChipT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSChipPropTypes } from '../react-desc-prop-types.js';\n\nexport const useConfig = (props: DSChipT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSChipT.InternalProps>>(props, defaultProps);\n\n useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes, DSChipName);\n const globalAttrs = useGetGlobalAttributes<\n DSChipT.InternalProps,\n HTMLButtonElement,\n { type?: 'button' | 'reset' | 'submit' }\n >(propsWithDefault);\n const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n\n return { ...propsWithDefault, globalAttrs, xStyledAttrs, ownerPropsConfig };\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAE3B,SAAS,cAAc,uBAAuB;AAEvC,MAAM,YAAY,CAAC,UAAyB;AACjD,QAAM,mBAAmB,6BAA8D,OAAO,YAAY;AAE1G,iCAA+B,kBAAkB,iBAAiB,UAAU;AAC5E,QAAM,cAAc,uBAIlB,gBAAgB;AAClB,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,mBAAmB,cAAc,kBAAkB,EAAE,GAAG,MAAM,CAAC;AAErE,SAAO,EAAE,GAAG,kBAAkB,aAAa,cAAc,iBAAiB;AAC5E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
ROUND_SHAPE: "ds-chip-round-shape"
|
|
6
|
-
};
|
|
2
|
+
import { slotObjectToDataTestIds } from "@elliemae/ds-system";
|
|
3
|
+
import { DSChipName, DSChipSlots } from "./theming.js";
|
|
4
|
+
const DSChipDataTestIds = slotObjectToDataTestIds(DSChipName, DSChipSlots);
|
|
7
5
|
export {
|
|
8
6
|
DSChipDataTestIds
|
|
9
7
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported_related/data-test-ids.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSChipName, DSChipSlots } from './theming.js';\n\nexport const DSChipDataTestIds = slotObjectToDataTestIds(DSChipName, DSChipSlots);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,YAAY,mBAAmB;AAEjC,MAAM,oBAAoB,wBAAwB,YAAY,WAAW;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
const DSChipName = "DSChip";
|
|
3
3
|
const DSChipSlots = {
|
|
4
|
-
|
|
4
|
+
ROOT: "root",
|
|
5
|
+
BUTTON: "button",
|
|
5
6
|
LABEL: "label",
|
|
6
7
|
ROUND_SHAPE: "round-shape",
|
|
7
|
-
|
|
8
|
+
ELLIPSIS: "ellipsis"
|
|
8
9
|
};
|
|
9
10
|
export {
|
|
10
11
|
DSChipName,
|
|
@@ -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 DSChipName = 'DSChip';\n\nexport const DSChipSlots = {\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,aAAa;AAEnB,MAAM,cAAc;AAAA,EACzB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSChipName = 'DSChip';\n\nexport const DSChipSlots = {\n ROOT: 'root',\n BUTTON: 'button',\n LABEL: 'label',\n ROUND_SHAPE: 'round-shape',\n ELLIPSIS: 'ellipsis',\n} as const;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,aAAa;AAEnB,MAAM,cAAc;AAAA,EACzB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AACZ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
PropTypes,
|
|
4
|
+
globalAttributesPropTypes,
|
|
5
|
+
xstyledPropTypes,
|
|
6
|
+
getPropsPerSlotPropTypes
|
|
7
|
+
} from "@elliemae/ds-props-helpers";
|
|
3
8
|
import {
|
|
4
9
|
CHIP_SIZES,
|
|
5
10
|
CHIP_SHAPES,
|
|
@@ -8,11 +13,13 @@ import {
|
|
|
8
13
|
ChipShapesValuesArray,
|
|
9
14
|
ChipShapesValuesString
|
|
10
15
|
} from "./constants.js";
|
|
16
|
+
import { DSChipName, DSChipSlots } from "./exported_related/theming.js";
|
|
11
17
|
const defaultProps = {
|
|
12
18
|
size: CHIP_SIZES.L,
|
|
13
19
|
shape: CHIP_SHAPES.DEFAULT
|
|
14
20
|
};
|
|
15
21
|
const DSChipPropTypes = {
|
|
22
|
+
...getPropsPerSlotPropTypes(DSChipName, DSChipSlots),
|
|
16
23
|
...globalAttributesPropTypes,
|
|
17
24
|
...xstyledPropTypes,
|
|
18
25
|
icon: PropTypes.func.isRequired.description("Chip Icon").defaultValue(() => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
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 { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes
|
|
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 type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport {\n CHIP_SIZES,\n CHIP_SHAPES,\n ChipSizesValuesArray,\n ChipSizesValuesString,\n ChipShapesValuesArray,\n ChipShapesValuesString,\n} from './constants.js';\nimport type { ChipSizesT, ChipShapesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/theming.js';\n\nexport const defaultProps: DSChipT.DefaultProps = {\n size: CHIP_SIZES.L,\n shape: CHIP_SHAPES.DEFAULT,\n};\n\nexport declare namespace DSChipT {\n interface DefaultProps {\n size: ChipSizesT;\n shape: ChipShapesT;\n }\n interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSChipName, typeof DSChipSlots> {\n selected?: boolean;\n innerRef?: React.RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n }\n\n interface RequiredProps {\n label: string;\n icon: () => JSX.Element;\n }\n export interface InternalProps extends OptionalProps, Partial<DefaultProps>, RequiredProps {}\n export interface Props\n extends Omit<GlobalAttributesT<HTMLButtonElement>, keyof InternalProps>,\n InternalProps,\n XstyledProps {}\n}\n\nexport const DSChipPropTypes = {\n ...getPropsPerSlotPropTypes(DSChipName, DSChipSlots),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n icon: PropTypes.func.isRequired.description('Chip Icon').defaultValue(() => {}),\n label: PropTypes.string.isRequired.description('Chip Label').defaultValue(''),\n selected: PropTypes.bool.description('Whether chip is selected').defaultValue(''),\n shape: PropTypes.oneOf(ChipShapesValuesArray).description(ChipShapesValuesString).defaultValue(CHIP_SHAPES.DEFAULT),\n size: PropTypes.oneOf(ChipSizesValuesArray).description(ChipSizesValuesString).defaultValue(CHIP_SIZES.L),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACKvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,YAAY,mBAAmB;AAEjC,MAAM,eAAqC;AAAA,EAChD,MAAM,WAAW;AAAA,EACjB,OAAO,YAAY;AACrB;AAuBO,MAAM,kBAAkB;AAAA,EAC7B,GAAG,yBAAyB,YAAY,WAAW;AAAA,EACnD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,UAAU,KAAK,WAAW,YAAY,WAAW,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC9E,OAAO,UAAU,OAAO,WAAW,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EAC5E,UAAU,UAAU,KAAK,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EAChF,OAAO,UAAU,MAAM,qBAAqB,EAAE,YAAY,sBAAsB,EAAE,aAAa,YAAY,OAAO;AAAA,EAClH,MAAM,UAAU,MAAM,oBAAoB,EAAE,YAAY,qBAAqB,EAAE,aAAa,WAAW,CAAC;AAAA,EACxG,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAChH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -16,13 +16,19 @@ const StyledChipLabel = styled("div", { name: DSChipName, slot: DSChipSlots.LABE
|
|
|
16
16
|
align-items: center;
|
|
17
17
|
justify-content: center;
|
|
18
18
|
`;
|
|
19
|
-
const StyledSpanWithEllipsis = styled
|
|
19
|
+
const StyledSpanWithEllipsis = styled("span", {
|
|
20
|
+
name: DSChipName,
|
|
21
|
+
slot: DSChipSlots.ELLIPSIS
|
|
22
|
+
})`
|
|
20
23
|
white-space: nowrap;
|
|
21
24
|
overflow: hidden;
|
|
22
25
|
text-overflow: ellipsis;
|
|
23
26
|
max-width: 100%;
|
|
24
27
|
`;
|
|
25
|
-
const StyledWrapper = styled("div"
|
|
28
|
+
const StyledWrapper = styled("div", {
|
|
29
|
+
name: DSChipName,
|
|
30
|
+
slot: DSChipSlots.ROOT
|
|
31
|
+
})`
|
|
26
32
|
display: flex;
|
|
27
33
|
height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};
|
|
28
34
|
width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};
|
|
@@ -48,10 +54,6 @@ const StyledRoundShape = styled("div", {
|
|
|
48
54
|
justify-content: center;
|
|
49
55
|
margin-top: ${({ size }) => size === CHIP_SIZES.L ? "5px" : "10px"};
|
|
50
56
|
`;
|
|
51
|
-
const StyledChildrenWrapper = styled("div", { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`
|
|
52
|
-
width: 100%;
|
|
53
|
-
height: 100%;
|
|
54
|
-
`;
|
|
55
57
|
const styledChipSelectedCss = css`
|
|
56
58
|
// TODO: wrap css processor to process new HOC wrapping styled components
|
|
57
59
|
${StyledRoundShape.toString()} {
|
|
@@ -200,7 +202,6 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
|
|
|
200
202
|
${({ selected }) => !selected ? "" : styledChipSelectedCss}
|
|
201
203
|
`;
|
|
202
204
|
export {
|
|
203
|
-
StyledChildrenWrapper,
|
|
204
205
|
StyledChip,
|
|
205
206
|
StyledChipLabel,
|
|
206
207
|
StyledRoundShape,
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/index.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n size: ChipSizesT;\n disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.LABEL })<{ size: ChipSizesT }>`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n text-align: center;\n padding: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')} 6px 6px 6px;\n z-index: 0;\n line-height: 1.27;\n width: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,YAAY,YAAY,aAAa,YAAY,iBAAiB,uBAAuB;AAElG,SAAS,YAAY,mBAAmB;AAaxC,MAAM,cAAc,CAAC,UAAwB,UAAU,YAAY,QAAQ,aAAa;AAEjF,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,YAAY,MAAM,YAAY,MAAM,CAAC;AAAA,eAC3E,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA,iBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA,aAGrC,CAAC,EAAE,KAAK,MAAO,SAAS,WAAW,IAAI,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASrD,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/index.js';\n\nexport interface StyledChipPropsT {\n buttonSize: ChipSizesT;\n buttonShape: ChipShapesT;\n selected?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n size: ChipSizesT;\n disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.LABEL })<{ size: ChipSizesT }>`\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n word-wrap: break-word;\n text-align: center;\n padding: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')} 6px 6px 6px;\n z-index: 0;\n line-height: 1.27;\n width: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled('span', {\n name: DSChipName,\n slot: DSChipSlots.ELLIPSIS,\n})`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div', {\n name: DSChipName,\n slot: DSChipSlots.ROOT,\n})<StyledChipPropsT>`\n display: flex;\n height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};\n width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n ${xStyledCommonProps}\n`;\n\nconst disabledRoundShape = css`\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledRoundShape = styled('div', {\n name: DSChipName,\n slot: DSChipSlots.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n background-color: ${({ theme }) => theme.colors.brand[600]};\n width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n border-radius: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: ${({ size }) => (size === CHIP_SIZES.L ? '5px' : '10px')};\n`;\n\nconst styledChipSelectedCss = css`\n // TODO: wrap css processor to process new HOC wrapping styled components\n ${StyledRoundShape.toString()} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n\n .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n\n &:before {\n border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n }\n\n &:focus {\n &:before {\n border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n }\n }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: DSChipSlots.BUTTON })<\n Pick<StyledChipPropsT, 'selected' | 'buttonShape'>\n>`\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0;\n padding-top: ${(props) => (props.buttonShape === CHIP_SHAPES.ROUND ? '0' : '10px')};\n border: none;\n min-height: 100%;\n height: fit-content;\n width: 100%;\n background-color: #fff;\n color: ${({ theme }) => theme.colors.brand[600]};\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n\n ${StyledRoundShape} {\n & .DSIcon-root .DSIcon-svg {\n fill: #fff;\n height: 1.846rem;\n width: 1.846rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\n }\n ${({ disabled }) => disabled && disabledRoundShape}\n }\n &:before {\n content: '';\n position: absolute;\n z-index: 20;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n border: 2px solid transparent;\n pointer-events: none;\n }\n\n & .DSIcon-root .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n height: 1.846rem;\n width: 1.846rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\n }\n\n & .DSIcon-root {\n height: 1.846rem;\n width: 1.846rem;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n height: 1.5rem;\n width: 1.5rem;\n }\n }\n\n &:hover,\n &:focus {\n z-index: 10;\n\n ${StyledChipLabel} {\n text-align: left;\n }\n\n ${StyledSpanWithEllipsis} {\n overflow-wrap: break-word;\n white-space: pre-wrap;\n overflow: visible;\n }\n }\n\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.brand[800]};\n }\n color: ${({ theme }) => theme.colors.brand[800]};\n background-color: ${({ theme }) => theme.colors.brand[200]};\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:focus {\n &:before {\n border-color: ${({ theme }) => theme.colors.brand[800]};\n }\n }\n\n &:disabled {\n color: ${({ theme }) => theme.colors.neutral[500]};\n cursor: not-allowed;\n\n .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n\n &:focus,\n &:hover {\n ${StyledRoundShape} {\n background-color: ${({ theme }) => theme.colors.neutral[200]};\n }\n background-color: #fff;\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n\n ${StyledChipLabel} {\n color: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n &:hover .DSIcon-svg {\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n }\n\n ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,7 +3,8 @@ import type { DSChipT } from '../react-desc-prop-types.js';
|
|
|
3
3
|
export declare const useConfig: (props: DSChipT.Props) => {
|
|
4
4
|
globalAttrs: Partial<Pick<{
|
|
5
5
|
type?: "button" | "reset" | "submit" | undefined;
|
|
6
|
-
}, "label" | "default" | "
|
|
6
|
+
}, "label" | "default" | "shape" | "selected" | "size" | "form" | "list" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap"> & Omit<{
|
|
7
|
+
name?: string | undefined;
|
|
7
8
|
"aria-activedescendant"?: string | undefined;
|
|
8
9
|
"aria-atomic"?: boolean | "true" | "false" | undefined;
|
|
9
10
|
"aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
|
|
@@ -329,7 +330,6 @@ export declare const useConfig: (props: DSChipT.Props) => {
|
|
|
329
330
|
minLength?: number | undefined;
|
|
330
331
|
multiple?: boolean | undefined;
|
|
331
332
|
muted?: boolean | undefined;
|
|
332
|
-
name?: string | undefined;
|
|
333
333
|
noValidate?: boolean | undefined;
|
|
334
334
|
open?: boolean | undefined;
|
|
335
335
|
optimum?: number | undefined;
|
|
@@ -369,8 +369,17 @@ export declare const useConfig: (props: DSChipT.Props) => {
|
|
|
369
369
|
wrap?: string | undefined;
|
|
370
370
|
}, "type">>;
|
|
371
371
|
xStyledAttrs: import("@elliemae/ds-props-helpers").XstyledProps;
|
|
372
|
+
ownerPropsConfig: {
|
|
373
|
+
getOwnerProps: () => Required<DSChipT.InternalProps>;
|
|
374
|
+
getOwnerPropsArguments: () => {};
|
|
375
|
+
};
|
|
372
376
|
selected: boolean;
|
|
373
377
|
innerRef: import("react").RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);
|
|
378
|
+
dsChipRoot: object | ((arg: object) => object);
|
|
379
|
+
dsChipButton: object | ((arg: object) => object);
|
|
380
|
+
dsChipLabel: object | ((arg: object) => object);
|
|
381
|
+
dsChipRoundShape: object | ((arg: object) => object);
|
|
382
|
+
dsChipEllipsis: object | ((arg: object) => object);
|
|
374
383
|
size: import("../sharedTypes.js").ChipSizesT;
|
|
375
384
|
shape: import("../sharedTypes.js").ChipShapesT;
|
|
376
385
|
label: string;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export declare const DSChipName = "DSChip";
|
|
2
2
|
export declare const DSChipSlots: {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
readonly ROOT: "root";
|
|
4
|
+
readonly BUTTON: "button";
|
|
5
|
+
readonly LABEL: "label";
|
|
6
|
+
readonly ROUND_SHAPE: "round-shape";
|
|
7
|
+
readonly ELLIPSIS: "ellipsis";
|
|
7
8
|
};
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import type { WeakValidationMap } from 'react';
|
|
2
2
|
import type React from 'react';
|
|
3
3
|
import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
|
|
4
|
+
import type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
|
|
4
5
|
import type { ChipSizesT, ChipShapesT } from './sharedTypes.js';
|
|
6
|
+
import { DSChipName, DSChipSlots } from './exported_related/theming.js';
|
|
5
7
|
export declare const defaultProps: DSChipT.DefaultProps;
|
|
6
8
|
export declare namespace DSChipT {
|
|
7
9
|
interface DefaultProps {
|
|
8
10
|
size: ChipSizesT;
|
|
9
11
|
shape: ChipShapesT;
|
|
10
12
|
}
|
|
11
|
-
interface OptionalProps {
|
|
13
|
+
interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSChipName, typeof DSChipSlots> {
|
|
12
14
|
selected?: boolean;
|
|
13
15
|
innerRef?: React.RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);
|
|
14
16
|
}
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -14,5 +14,4 @@ export declare const StyledChipLabel: import("styled-components").StyledComponen
|
|
|
14
14
|
export declare const StyledSpanWithEllipsis: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
|
|
15
15
|
export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledChipPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
16
16
|
export declare const StyledRoundShape: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledRoundShapePropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
17
|
-
export declare const StyledChildrenWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
18
17
|
export declare const StyledChip: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, Pick<StyledChipPropsT, "selected" | "buttonShape"> & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-chip",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.34.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Chip",
|
|
6
6
|
"files": [
|
|
@@ -63,15 +63,16 @@
|
|
|
63
63
|
"indent": 4
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
|
-
"@elliemae/ds-props-helpers": "3.
|
|
67
|
-
"@elliemae/ds-
|
|
68
|
-
"@elliemae/ds-
|
|
66
|
+
"@elliemae/ds-props-helpers": "3.34.0-next.2",
|
|
67
|
+
"@elliemae/ds-system": "3.34.0-next.2",
|
|
68
|
+
"@elliemae/ds-typescript-helpers": "3.34.0-next.2",
|
|
69
|
+
"@elliemae/ds-utilities": "3.34.0-next.2"
|
|
69
70
|
},
|
|
70
71
|
"devDependencies": {
|
|
71
72
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
72
73
|
"styled-components": "~5.3.9",
|
|
73
|
-
"@elliemae/ds-icons": "3.
|
|
74
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
74
|
+
"@elliemae/ds-icons": "3.34.0-next.2",
|
|
75
|
+
"@elliemae/ds-monorepo-devops": "3.34.0-next.2"
|
|
75
76
|
},
|
|
76
77
|
"peerDependencies": {
|
|
77
78
|
"lodash": "^4.17.21",
|