@elliemae/ds-form-checkbox 3.2.1-rc.3 → 3.2.1-rc.6
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/ControlledCheckbox.js +22 -57
- package/dist/cjs/ControlledCheckbox.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +3 -19
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/esm/ControlledCheckbox.js +22 -59
- package/dist/esm/ControlledCheckbox.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +3 -21
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/package.json +4 -4
|
@@ -1,39 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __create = Object.create;
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
|
-
var __defProps = Object.defineProperties;
|
|
5
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
10
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
-
var __spreadValues = (a, b) => {
|
|
14
|
-
for (var prop in b || (b = {}))
|
|
15
|
-
if (__hasOwnProp.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
if (__getOwnPropSymbols)
|
|
18
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
-
if (__propIsEnum.call(b, prop))
|
|
20
|
-
__defNormalProp(a, prop, b[prop]);
|
|
21
|
-
}
|
|
22
|
-
return a;
|
|
23
|
-
};
|
|
24
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
-
var __objRest = (source, exclude) => {
|
|
26
|
-
var target = {};
|
|
27
|
-
for (var prop in source)
|
|
28
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
if (source != null && __getOwnPropSymbols)
|
|
31
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
-
target[prop] = source[prop];
|
|
34
|
-
}
|
|
35
|
-
return target;
|
|
36
|
-
};
|
|
37
8
|
var __export = (target, all) => {
|
|
38
9
|
for (var name in all)
|
|
39
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -81,9 +52,7 @@ const DSControlledCheckbox = (props) => {
|
|
|
81
52
|
currentTarget.click();
|
|
82
53
|
}
|
|
83
54
|
}, []);
|
|
84
|
-
const
|
|
85
|
-
onKeyDown: handleMixedCheckboxOnKeyDown
|
|
86
|
-
}), {
|
|
55
|
+
const {
|
|
87
56
|
id,
|
|
88
57
|
disabled,
|
|
89
58
|
readOnly,
|
|
@@ -93,39 +62,33 @@ const DSControlledCheckbox = (props) => {
|
|
|
93
62
|
className,
|
|
94
63
|
onChange,
|
|
95
64
|
tabIndex,
|
|
96
|
-
onKeyDown: userOnKeyDown
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
"label",
|
|
102
|
-
"aria-label",
|
|
103
|
-
"aria-controls",
|
|
104
|
-
"className",
|
|
105
|
-
"onChange",
|
|
106
|
-
"tabIndex",
|
|
107
|
-
"onKeyDown"
|
|
108
|
-
]);
|
|
65
|
+
onKeyDown: userOnKeyDown,
|
|
66
|
+
...restGlobals
|
|
67
|
+
} = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault, {
|
|
68
|
+
onKeyDown: handleMixedCheckboxOnKeyDown
|
|
69
|
+
});
|
|
109
70
|
const instanceUid = (0, import_react.useMemo)(() => id || (0, import_uid.uid)(5), [id]);
|
|
110
71
|
const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
|
|
111
|
-
const commonProps =
|
|
112
|
-
"data-testid": "ds-checkbox"
|
|
113
|
-
|
|
72
|
+
const commonProps = {
|
|
73
|
+
"data-testid": "ds-checkbox",
|
|
74
|
+
...restGlobals,
|
|
114
75
|
id: instanceUid,
|
|
115
76
|
"aria-label": ariaLabel || legacyAriaLabel || label,
|
|
116
77
|
"aria-checked": checked
|
|
117
|
-
}
|
|
118
|
-
return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer,
|
|
78
|
+
};
|
|
79
|
+
return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer, {
|
|
119
80
|
device,
|
|
120
81
|
"data-testid": "ds-checkbox-container",
|
|
121
|
-
className
|
|
122
|
-
|
|
82
|
+
className,
|
|
83
|
+
...xstyledProps
|
|
84
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledCheckBox, {
|
|
123
85
|
device,
|
|
124
86
|
checked,
|
|
125
87
|
hasError,
|
|
126
88
|
disabled,
|
|
127
89
|
readOnly
|
|
128
|
-
}, ariaControls || legacyAriaControls ? /* @__PURE__ */ import_react.default.createElement(import_styles.StyledInputMixed,
|
|
90
|
+
}, ariaControls || legacyAriaControls ? /* @__PURE__ */ import_react.default.createElement(import_styles.StyledInputMixed, {
|
|
91
|
+
...commonProps,
|
|
129
92
|
role: "checkbox",
|
|
130
93
|
"aria-controls": ariaControls || legacyAriaControls,
|
|
131
94
|
"aria-disabled": disabled,
|
|
@@ -133,22 +96,24 @@ const DSControlledCheckbox = (props) => {
|
|
|
133
96
|
onKeyDown: userOnKeyDown,
|
|
134
97
|
tabIndex: tabIndex ?? (disabled ? -1 : 0),
|
|
135
98
|
ref: innerRef
|
|
136
|
-
})
|
|
99
|
+
}) : /* @__PURE__ */ import_react.default.createElement(import_styles.StyledInput, {
|
|
100
|
+
...commonProps,
|
|
137
101
|
type: "checkbox",
|
|
138
102
|
checked,
|
|
139
103
|
onChange,
|
|
140
104
|
disabled,
|
|
141
105
|
tabIndex,
|
|
142
106
|
ref: innerRef
|
|
143
|
-
}))
|
|
107
|
+
})), label && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel, {
|
|
144
108
|
htmlFor: instanceUid,
|
|
145
109
|
disabled,
|
|
146
110
|
readOnly,
|
|
147
111
|
checked,
|
|
148
112
|
"data-testid": "ds-checkbox-label",
|
|
149
113
|
wrapLabel,
|
|
150
|
-
device
|
|
151
|
-
|
|
114
|
+
device,
|
|
115
|
+
...!disabled && (ariaControls || legacyAriaControls) ? { onClick: onChange } : {}
|
|
116
|
+
}, wrapLabel ? /* @__PURE__ */ import_react.default.createElement(import_styles.StyledWrapLabel, null, label) : /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
|
|
152
117
|
value: label
|
|
153
118
|
})));
|
|
154
119
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ControlledCheckbox.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useCallback, WeakValidationMap } from 'react';\nimport { uid } from 'uid';\n\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n} from '@elliemae/ds-utilities';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledCheckBox, StyledInputMixed } from './styles';\nimport { DSControlledCheckboxT, propTypes, defaultProps } from './react-desc-prop-types';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSControlledCheckbox: React.ComponentType<DSControlledCheckboxT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateProps(props, propTypes);\n\n const {\n checked,\n device,\n label,\n hasError,\n innerRef,\n wrapLabel,\n ariaLabel: legacyAriaLabel,\n ariaControls: legacyAriaControls,\n } = propsWithDefault;\n\n const handleMixedCheckboxOnKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.code === 'Space') {\n const { currentTarget }: { currentTarget: HTMLDivElement } = e;\n currentTarget.click();\n }\n }, []);\n\n const {\n id,\n disabled,\n readOnly,\n label: globalLabel,\n 'aria-label': ariaLabel,\n 'aria-controls': ariaControls,\n className,\n onChange,\n tabIndex,\n onKeyDown: userOnKeyDown,\n ...restGlobals\n } = useGetGlobalAttributes<DSControlledCheckboxT.Props>(propsWithDefault, {\n onKeyDown: handleMixedCheckboxOnKeyDown,\n });\n\n const instanceUid = useMemo(() => id || uid(5), [id]);\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n const commonProps: Partial<DSControlledCheckboxT.Props> = {\n 'data-testid': 'ds-checkbox',\n ...restGlobals,\n id: instanceUid,\n 'aria-label': ariaLabel || legacyAriaLabel || label,\n 'aria-checked': checked,\n };\n\n return (\n <StyledContainer device={device} data-testid=\"ds-checkbox-container\" className={className} {...xstyledProps}>\n <StyledCheckBox device={device} checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n {ariaControls || legacyAriaControls ? (\n <StyledInputMixed\n {...commonProps}\n role=\"checkbox\"\n aria-controls={ariaControls || legacyAriaControls}\n aria-disabled={disabled}\n onClick={!disabled && !readOnly ? onChange : undefined}\n onKeyDown={userOnKeyDown}\n tabIndex={tabIndex ?? (disabled ? -1 : 0)}\n ref={innerRef}\n />\n ) : (\n <StyledInput\n {...commonProps}\n type=\"checkbox\"\n checked={checked as boolean | undefined}\n onChange={onChange}\n disabled={disabled}\n tabIndex={tabIndex}\n ref={innerRef}\n />\n )}\n </StyledCheckBox>\n {label && (\n <StyledLabel\n htmlFor={instanceUid}\n disabled={disabled}\n readOnly={readOnly}\n checked={checked}\n data-testid=\"ds-checkbox-label\"\n wrapLabel={wrapLabel}\n device={device}\n {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: onChange } : {})}\n >\n {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n </StyledLabel>\n )}\n </StyledContainer>\n );\n};\n\nDSControlledCheckbox.propTypes = propTypes as WeakValidationMap<unknown>;\nDSControlledCheckbox.displayName = 'DSControlledCheckbox';\nconst DSControlledCheckboxWithSchema = describe(DSControlledCheckbox);\nDSControlledCheckboxWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledCheckbox, DSControlledCheckboxWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA+D;AAC/D,iBAAoB;AAEpB,0BAKO;AACP,uCAA2C;AAC3C,oBAA6G;AAC7G,mCAA+D;AAC/D,8BAAiC;AAEjC,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,mBAAmB,sDAA6B,OAAO,yCAAY;AACzE,gDAAiB,OAAO,sCAAS;AAEjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,MACZ;AAEJ,QAAM,+BAA+B,8BAAY,CAAC,MAA2C;AAC3F,QAAI,EAAE,SAAS,SAAS;AACtB,YAAM,EAAE,kBAAqD;AAC7D,oBAAc,MAAM;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,OACR;AAAA,MACD,gDAAoD,kBAAkB;AAAA,IACxE,WAAW;AAAA,EACb,CAAC;AAED,QAAM,cAAc,0BAAQ,MAAM,MAAM,oBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,QAAM,eAAe,4CAAmB,gBAAgB;AAExD,QAAM,cAAoD;AAAA,IACxD,eAAe;AAAA,IACf,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,cAAc,aAAa,mBAAmB;AAAA,IAC9C,gBAAgB;AAAA,EAClB;AAEA,SACE,mDAAC;AAAA,IAAgB;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,IAAuB,GAAG;AAAA,KAC7F,mDAAC;AAAA,IAAe;AAAA,IAAgB;AAAA,IAAkB;AAAA,IAAoB;AAAA,IAAoB;AAAA,KACvF,gBAAgB,qBACf,mDAAC;AAAA,IACE,GAAG;AAAA,IACJ,MAAK;AAAA,IACL,iBAAe,gBAAgB;AAAA,IAC/B,iBAAe;AAAA,IACf,SAAS,CAAC,YAAY,CAAC,WAAW,WAAW;AAAA,IAC7C,WAAW;AAAA,IACX,UAAU,YAAa,YAAW,KAAK;AAAA,IACvC,KAAK;AAAA,GACP,IAEA,mDAAC;AAAA,IACE,GAAG;AAAA,IACJ,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,GACP,CAEJ,GACC,SACC,mDAAC;AAAA,IACC,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACC,GAAI,CAAC,YAAa,iBAAgB,sBAAsB,EAAE,SAAS,SAAS,IAAI,CAAC;AAAA,KAEjF,YAAY,mDAAC,qCAAiB,KAAM,IAAqB,mDAAC;AAAA,IAA2B,OAAO;AAAA,GAAO,CACtG,CAEJ;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,kCAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,27 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __create = Object.create;
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
|
-
var __defProps = Object.defineProperties;
|
|
5
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
10
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
-
var __spreadValues = (a, b) => {
|
|
14
|
-
for (var prop in b || (b = {}))
|
|
15
|
-
if (__hasOwnProp.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
if (__getOwnPropSymbols)
|
|
18
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
-
if (__propIsEnum.call(b, prop))
|
|
20
|
-
__defNormalProp(a, prop, b[prop]);
|
|
21
|
-
}
|
|
22
|
-
return a;
|
|
23
|
-
};
|
|
24
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
8
|
var __export = (target, all) => {
|
|
26
9
|
for (var name in all)
|
|
27
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -50,11 +33,12 @@ const defaultProps = {
|
|
|
50
33
|
tabIndex: void 0,
|
|
51
34
|
checked: false
|
|
52
35
|
};
|
|
53
|
-
const propTypes =
|
|
36
|
+
const propTypes = {
|
|
37
|
+
...import_ds_utilities.globalAttributesPropTypes,
|
|
54
38
|
label: import_ds_utilities.PropTypes.string.description("Checkbox Label property. This label is also going to be used as an aria-label for screen readers."),
|
|
55
39
|
hasError: import_ds_utilities.PropTypes.bool.description("Whether the checkbox has error or not."),
|
|
56
40
|
innerRef: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.func, import_ds_utilities.PropTypes.object]).description("Checkbox input ref."),
|
|
57
41
|
wrapLabel: import_ds_utilities.PropTypes.bool.description("Whether to wrap or truncate the label"),
|
|
58
42
|
device: import_ds_utilities.PropTypes.string.description("Whether to use mobile styling")
|
|
59
|
-
}
|
|
43
|
+
};
|
|
60
44
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { GlobalAttributesT, PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\nexport declare namespace DSControlledCheckboxT {\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex?: number;\n hasError?: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n }\n\n export interface OptionalProps {\n innerRef: React.RefObject<HTMLInputElement>;\n 'data-testid': string;\n device?: 'mobile' | 'desktop';\n }\n\n export interface LegacyAriaProps {\n ariaControls: string;\n ariaLabel: string;\n }\n\n export interface Props\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, 'disabled' | 'checked'>,\n LegacyAriaProps {}\n\n export interface StyledCheckBoxT {\n checked: boolean | 'mixed';\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n device?: 'mobile' | 'desktop';\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean | 'mixed';\n wrapLabel: boolean;\n device?: 'mobile' | 'desktop';\n }\n}\n\nexport const defaultProps: Partial<DSControlledCheckboxT.Props> = {\n wrapLabel: false,\n hasError: false,\n tabIndex: undefined,\n checked: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n label: PropTypes.string.description(\n 'Checkbox Label property. This label is also going to be used as an aria-label for screen readers.',\n ),\n hasError: PropTypes.bool.description('Whether the checkbox has error or not.'),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label'),\n device: PropTypes.string.description('Whether to use mobile styling'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAwE;AA4CjE,MAAM,eAAqD;AAAA,EAChE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,OAAO,8BAAU,OAAO,YACtB,mGACF;AAAA,EACA,UAAU,8BAAU,KAAK,YAAY,wCAAwC;AAAA,EAC7E,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAAE,YAAY,qBAAqB;AAAA,EACnG,WAAW,8BAAU,KAAK,YAAY,uCAAuC;AAAA,EAC7E,QAAQ,8BAAU,OAAO,YAAY,+BAA+B;AACtE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,35 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
-
var __objRest = (source, exclude) => {
|
|
22
|
-
var target = {};
|
|
23
|
-
for (var prop in source)
|
|
24
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
if (source != null && __getOwnPropSymbols)
|
|
27
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
}
|
|
31
|
-
return target;
|
|
32
|
-
};
|
|
33
2
|
import * as React from "react";
|
|
34
3
|
import React2, { useMemo, useCallback } from "react";
|
|
35
4
|
import { uid } from "uid";
|
|
@@ -62,9 +31,7 @@ const DSControlledCheckbox = (props) => {
|
|
|
62
31
|
currentTarget.click();
|
|
63
32
|
}
|
|
64
33
|
}, []);
|
|
65
|
-
const
|
|
66
|
-
onKeyDown: handleMixedCheckboxOnKeyDown
|
|
67
|
-
}), {
|
|
34
|
+
const {
|
|
68
35
|
id,
|
|
69
36
|
disabled,
|
|
70
37
|
readOnly,
|
|
@@ -74,39 +41,33 @@ const DSControlledCheckbox = (props) => {
|
|
|
74
41
|
className,
|
|
75
42
|
onChange,
|
|
76
43
|
tabIndex,
|
|
77
|
-
onKeyDown: userOnKeyDown
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
"label",
|
|
83
|
-
"aria-label",
|
|
84
|
-
"aria-controls",
|
|
85
|
-
"className",
|
|
86
|
-
"onChange",
|
|
87
|
-
"tabIndex",
|
|
88
|
-
"onKeyDown"
|
|
89
|
-
]);
|
|
44
|
+
onKeyDown: userOnKeyDown,
|
|
45
|
+
...restGlobals
|
|
46
|
+
} = useGetGlobalAttributes(propsWithDefault, {
|
|
47
|
+
onKeyDown: handleMixedCheckboxOnKeyDown
|
|
48
|
+
});
|
|
90
49
|
const instanceUid = useMemo(() => id || uid(5), [id]);
|
|
91
50
|
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
|
92
|
-
const commonProps =
|
|
93
|
-
"data-testid": "ds-checkbox"
|
|
94
|
-
|
|
51
|
+
const commonProps = {
|
|
52
|
+
"data-testid": "ds-checkbox",
|
|
53
|
+
...restGlobals,
|
|
95
54
|
id: instanceUid,
|
|
96
55
|
"aria-label": ariaLabel || legacyAriaLabel || label,
|
|
97
56
|
"aria-checked": checked
|
|
98
|
-
}
|
|
99
|
-
return /* @__PURE__ */ React2.createElement(StyledContainer,
|
|
57
|
+
};
|
|
58
|
+
return /* @__PURE__ */ React2.createElement(StyledContainer, {
|
|
100
59
|
device,
|
|
101
60
|
"data-testid": "ds-checkbox-container",
|
|
102
|
-
className
|
|
103
|
-
|
|
61
|
+
className,
|
|
62
|
+
...xstyledProps
|
|
63
|
+
}, /* @__PURE__ */ React2.createElement(StyledCheckBox, {
|
|
104
64
|
device,
|
|
105
65
|
checked,
|
|
106
66
|
hasError,
|
|
107
67
|
disabled,
|
|
108
68
|
readOnly
|
|
109
|
-
}, ariaControls || legacyAriaControls ? /* @__PURE__ */ React2.createElement(StyledInputMixed,
|
|
69
|
+
}, ariaControls || legacyAriaControls ? /* @__PURE__ */ React2.createElement(StyledInputMixed, {
|
|
70
|
+
...commonProps,
|
|
110
71
|
role: "checkbox",
|
|
111
72
|
"aria-controls": ariaControls || legacyAriaControls,
|
|
112
73
|
"aria-disabled": disabled,
|
|
@@ -114,22 +75,24 @@ const DSControlledCheckbox = (props) => {
|
|
|
114
75
|
onKeyDown: userOnKeyDown,
|
|
115
76
|
tabIndex: tabIndex ?? (disabled ? -1 : 0),
|
|
116
77
|
ref: innerRef
|
|
117
|
-
})
|
|
78
|
+
}) : /* @__PURE__ */ React2.createElement(StyledInput, {
|
|
79
|
+
...commonProps,
|
|
118
80
|
type: "checkbox",
|
|
119
81
|
checked,
|
|
120
82
|
onChange,
|
|
121
83
|
disabled,
|
|
122
84
|
tabIndex,
|
|
123
85
|
ref: innerRef
|
|
124
|
-
}))
|
|
86
|
+
})), label && /* @__PURE__ */ React2.createElement(StyledLabel, {
|
|
125
87
|
htmlFor: instanceUid,
|
|
126
88
|
disabled,
|
|
127
89
|
readOnly,
|
|
128
90
|
checked,
|
|
129
91
|
"data-testid": "ds-checkbox-label",
|
|
130
92
|
wrapLabel,
|
|
131
|
-
device
|
|
132
|
-
|
|
93
|
+
device,
|
|
94
|
+
...!disabled && (ariaControls || legacyAriaControls) ? { onClick: onChange } : {}
|
|
95
|
+
}, wrapLabel ? /* @__PURE__ */ React2.createElement(StyledWrapLabel, null, label) : /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
|
|
133
96
|
value: label
|
|
134
97
|
})));
|
|
135
98
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledCheckbox.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useCallback, WeakValidationMap } from 'react';\nimport { uid } from 'uid';\n\nimport {\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n} from '@elliemae/ds-utilities';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledCheckBox, StyledInputMixed } from './styles';\nimport { DSControlledCheckboxT, propTypes, defaultProps } from './react-desc-prop-types';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst DSControlledCheckbox: React.ComponentType<DSControlledCheckboxT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateProps(props, propTypes);\n\n const {\n checked,\n device,\n label,\n hasError,\n innerRef,\n wrapLabel,\n ariaLabel: legacyAriaLabel,\n ariaControls: legacyAriaControls,\n } = propsWithDefault;\n\n const handleMixedCheckboxOnKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.code === 'Space') {\n const { currentTarget }: { currentTarget: HTMLDivElement } = e;\n currentTarget.click();\n }\n }, []);\n\n const {\n id,\n disabled,\n readOnly,\n label: globalLabel,\n 'aria-label': ariaLabel,\n 'aria-controls': ariaControls,\n className,\n onChange,\n tabIndex,\n onKeyDown: userOnKeyDown,\n ...restGlobals\n } = useGetGlobalAttributes<DSControlledCheckboxT.Props>(propsWithDefault, {\n onKeyDown: handleMixedCheckboxOnKeyDown,\n });\n\n const instanceUid = useMemo(() => id || uid(5), [id]);\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n const commonProps: Partial<DSControlledCheckboxT.Props> = {\n 'data-testid': 'ds-checkbox',\n ...restGlobals,\n id: instanceUid,\n 'aria-label': ariaLabel || legacyAriaLabel || label,\n 'aria-checked': checked,\n };\n\n return (\n <StyledContainer device={device} data-testid=\"ds-checkbox-container\" className={className} {...xstyledProps}>\n <StyledCheckBox device={device} checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n {ariaControls || legacyAriaControls ? (\n <StyledInputMixed\n {...commonProps}\n role=\"checkbox\"\n aria-controls={ariaControls || legacyAriaControls}\n aria-disabled={disabled}\n onClick={!disabled && !readOnly ? onChange : undefined}\n onKeyDown={userOnKeyDown}\n tabIndex={tabIndex ?? (disabled ? -1 : 0)}\n ref={innerRef}\n />\n ) : (\n <StyledInput\n {...commonProps}\n type=\"checkbox\"\n checked={checked as boolean | undefined}\n onChange={onChange}\n disabled={disabled}\n tabIndex={tabIndex}\n ref={innerRef}\n />\n )}\n </StyledCheckBox>\n {label && (\n <StyledLabel\n htmlFor={instanceUid}\n disabled={disabled}\n readOnly={readOnly}\n checked={checked}\n data-testid=\"ds-checkbox-label\"\n wrapLabel={wrapLabel}\n device={device}\n {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: onChange } : {})}\n >\n {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n </StyledLabel>\n )}\n </StyledContainer>\n );\n};\n\nDSControlledCheckbox.propTypes = propTypes as WeakValidationMap<unknown>;\nDSControlledCheckbox.displayName = 'DSControlledCheckbox';\nconst DSControlledCheckboxWithSchema = describe(DSControlledCheckbox);\nDSControlledCheckboxWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSControlledCheckbox, DSControlledCheckboxWithSchema };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAAA;ACCA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AAEA,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,mBAAmB,6BAA6B,OAAO,YAAY;AACzE,mBAAiB,OAAO,SAAS;AAEjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,MACZ;AAEJ,QAAM,+BAA+B,YAAY,CAAC,MAA2C;AAC3F,QAAI,EAAE,SAAS,SAAS;AACtB,YAAM,EAAE,kBAAqD;AAC7D,oBAAc,MAAM;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,OACR;AAAA,MACD,uBAAoD,kBAAkB;AAAA,IACxE,WAAW;AAAA,EACb,CAAC;AAED,QAAM,cAAc,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,cAAoD;AAAA,IACxD,eAAe;AAAA,IACf,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,cAAc,aAAa,mBAAmB;AAAA,IAC9C,gBAAgB;AAAA,EAClB;AAEA,SACE,qCAAC;AAAA,IAAgB;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,IAAuB,GAAG;AAAA,KAC7F,qCAAC;AAAA,IAAe;AAAA,IAAgB;AAAA,IAAkB;AAAA,IAAoB;AAAA,IAAoB;AAAA,KACvF,gBAAgB,qBACf,qCAAC;AAAA,IACE,GAAG;AAAA,IACJ,MAAK;AAAA,IACL,iBAAe,gBAAgB;AAAA,IAC/B,iBAAe;AAAA,IACf,SAAS,CAAC,YAAY,CAAC,WAAW,WAAW;AAAA,IAC7C,WAAW;AAAA,IACX,UAAU,YAAa,YAAW,KAAK;AAAA,IACvC,KAAK;AAAA,GACP,IAEA,qCAAC;AAAA,IACE,GAAG;AAAA,IACJ,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,GACP,CAEJ,GACC,SACC,qCAAC;AAAA,IACC,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACC,GAAI,CAAC,YAAa,iBAAgB,sBAAsB,EAAE,SAAS,SAAS,IAAI,CAAC;AAAA,KAEjF,YAAY,qCAAC,uBAAiB,KAAM,IAAqB,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAO,CACtG,CAEJ;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,SAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,23 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
2
|
import * as React from "react";
|
|
22
3
|
import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-utilities";
|
|
23
4
|
const defaultProps = {
|
|
@@ -26,13 +7,14 @@ const defaultProps = {
|
|
|
26
7
|
tabIndex: void 0,
|
|
27
8
|
checked: false
|
|
28
9
|
};
|
|
29
|
-
const propTypes =
|
|
10
|
+
const propTypes = {
|
|
11
|
+
...globalAttributesPropTypes,
|
|
30
12
|
label: PropTypes.string.description("Checkbox Label property. This label is also going to be used as an aria-label for screen readers."),
|
|
31
13
|
hasError: PropTypes.bool.description("Whether the checkbox has error or not."),
|
|
32
14
|
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description("Checkbox input ref."),
|
|
33
15
|
wrapLabel: PropTypes.bool.description("Whether to wrap or truncate the label"),
|
|
34
16
|
device: PropTypes.string.description("Whether to use mobile styling")
|
|
35
|
-
}
|
|
17
|
+
};
|
|
36
18
|
export {
|
|
37
19
|
defaultProps,
|
|
38
20
|
propTypes
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { GlobalAttributesT, PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\nexport declare namespace DSControlledCheckboxT {\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex?: number;\n hasError?: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n }\n\n export interface OptionalProps {\n innerRef: React.RefObject<HTMLInputElement>;\n 'data-testid': string;\n device?: 'mobile' | 'desktop';\n }\n\n export interface LegacyAriaProps {\n ariaControls: string;\n ariaLabel: string;\n }\n\n export interface Props\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, 'disabled' | 'checked'>,\n LegacyAriaProps {}\n\n export interface StyledCheckBoxT {\n checked: boolean | 'mixed';\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n device?: 'mobile' | 'desktop';\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean | 'mixed';\n wrapLabel: boolean;\n device?: 'mobile' | 'desktop';\n }\n}\n\nexport const defaultProps: Partial<DSControlledCheckboxT.Props> = {\n wrapLabel: false,\n hasError: false,\n tabIndex: undefined,\n checked: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n label: PropTypes.string.description(\n 'Checkbox Label property. This label is also going to be used as an aria-label for screen readers.',\n ),\n hasError: PropTypes.bool.description('Whether the checkbox has error or not.'),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label'),\n device: PropTypes.string.description('Whether to use mobile styling'),\n};\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAAA;ACCA;AA4CO,MAAM,eAAqD;AAAA,EAChE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,OAAO,UAAU,OAAO,YACtB,mGACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,wCAAwC;AAAA,EAC7E,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,qBAAqB;AAAA,EACnG,WAAW,UAAU,KAAK,YAAY,uCAAuC;AAAA,EAC7E,QAAQ,UAAU,OAAO,YAAY,+BAA+B;AACtE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-checkbox",
|
|
3
|
-
"version": "3.2.1-rc.
|
|
3
|
+
"version": "3.2.1-rc.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Checkbox",
|
|
6
6
|
"files": [
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-system": "3.2.1-rc.
|
|
39
|
-
"@elliemae/ds-truncated-tooltip-text": "3.2.1-rc.
|
|
40
|
-
"@elliemae/ds-utilities": "3.2.1-rc.
|
|
38
|
+
"@elliemae/ds-system": "3.2.1-rc.6",
|
|
39
|
+
"@elliemae/ds-truncated-tooltip-text": "3.2.1-rc.6",
|
|
40
|
+
"@elliemae/ds-utilities": "3.2.1-rc.6"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@elliemae/pui-theme": "~2.6.0",
|