@elliemae/ds-form-checkbox 3.2.1-rc.0 → 3.2.1-rc.3
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 +31 -24
- package/dist/cjs/ControlledCheckbox.js.map +2 -2
- package/dist/cjs/config/useValidateProps.js +1 -0
- package/dist/cjs/config/useValidateProps.js.map +1 -1
- package/dist/cjs/exported-related/data-test-ids.js +1 -0
- package/dist/cjs/exported-related/data-test-ids.js.map +1 -1
- package/dist/cjs/exported-related/index.js +1 -0
- package/dist/cjs/exported-related/index.js.map +1 -1
- package/dist/cjs/exported-related/theming.js +1 -0
- package/dist/cjs/exported-related/theming.js.map +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +3 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +76 -24
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/utils/styleHelpers.js +57 -29
- package/dist/cjs/utils/styleHelpers.js.map +2 -2
- package/dist/esm/ControlledCheckbox.js +32 -25
- package/dist/esm/ControlledCheckbox.js.map +2 -2
- package/dist/esm/config/useValidateProps.js +1 -0
- package/dist/esm/config/useValidateProps.js.map +1 -1
- package/dist/esm/exported-related/data-test-ids.js +1 -0
- package/dist/esm/exported-related/data-test-ids.js.map +1 -1
- package/dist/esm/exported-related/index.js +1 -0
- package/dist/esm/exported-related/index.js.map +1 -1
- package/dist/esm/exported-related/theming.js +1 -0
- package/dist/esm/exported-related/theming.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +3 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +76 -24
- package/dist/esm/styles.js.map +2 -2
- package/dist/esm/utils/styleHelpers.js +57 -29
- package/dist/esm/utils/styleHelpers.js.map +2 -2
- package/package.json +4 -4
- package/dist/cjs/utils/setMultipleRefs.js +0 -38
- package/dist/cjs/utils/setMultipleRefs.js.map +0 -7
- package/dist/esm/utils/setMultipleRefs.js +0 -16
- package/dist/esm/utils/setMultipleRefs.js.map +0 -7
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __defProp = Object.defineProperty;
|
|
2
3
|
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
@@ -30,7 +31,8 @@ var __objRest = (source, exclude) => {
|
|
|
30
31
|
return target;
|
|
31
32
|
};
|
|
32
33
|
import * as React from "react";
|
|
33
|
-
import React2, {
|
|
34
|
+
import React2, { useMemo, useCallback } from "react";
|
|
35
|
+
import { uid } from "uid";
|
|
34
36
|
import {
|
|
35
37
|
describe,
|
|
36
38
|
useGetGlobalAttributes,
|
|
@@ -40,14 +42,13 @@ import {
|
|
|
40
42
|
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
41
43
|
import { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledCheckBox, StyledInputMixed } from "./styles";
|
|
42
44
|
import { propTypes, defaultProps } from "./react-desc-prop-types";
|
|
43
|
-
import { setMultipleRefs } from "./utils/setMultipleRefs";
|
|
44
45
|
import { useValidateProps } from "./config/useValidateProps";
|
|
45
46
|
const DSControlledCheckbox = (props) => {
|
|
46
47
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
47
48
|
useValidateProps(props, propTypes);
|
|
48
|
-
const checkboxRef = useRef(null);
|
|
49
49
|
const {
|
|
50
50
|
checked,
|
|
51
|
+
device,
|
|
51
52
|
label,
|
|
52
53
|
hasError,
|
|
53
54
|
innerRef,
|
|
@@ -55,13 +56,15 @@ const DSControlledCheckbox = (props) => {
|
|
|
55
56
|
ariaLabel: legacyAriaLabel,
|
|
56
57
|
ariaControls: legacyAriaControls
|
|
57
58
|
} = propsWithDefault;
|
|
58
|
-
const
|
|
59
|
-
if (
|
|
60
|
-
e
|
|
61
|
-
|
|
59
|
+
const handleMixedCheckboxOnKeyDown = useCallback((e) => {
|
|
60
|
+
if (e.code === "Space") {
|
|
61
|
+
const { currentTarget } = e;
|
|
62
|
+
currentTarget.click();
|
|
62
63
|
}
|
|
63
64
|
}, []);
|
|
64
|
-
const _a = useGetGlobalAttributes(propsWithDefault, {
|
|
65
|
+
const _a = useGetGlobalAttributes(propsWithDefault, {
|
|
66
|
+
onKeyDown: handleMixedCheckboxOnKeyDown
|
|
67
|
+
}), {
|
|
65
68
|
id,
|
|
66
69
|
disabled,
|
|
67
70
|
readOnly,
|
|
@@ -70,7 +73,8 @@ const DSControlledCheckbox = (props) => {
|
|
|
70
73
|
"aria-controls": ariaControls,
|
|
71
74
|
className,
|
|
72
75
|
onChange,
|
|
73
|
-
tabIndex
|
|
76
|
+
tabIndex,
|
|
77
|
+
onKeyDown: userOnKeyDown
|
|
74
78
|
} = _a, restGlobals = __objRest(_a, [
|
|
75
79
|
"id",
|
|
76
80
|
"disabled",
|
|
@@ -80,48 +84,51 @@ const DSControlledCheckbox = (props) => {
|
|
|
80
84
|
"aria-controls",
|
|
81
85
|
"className",
|
|
82
86
|
"onChange",
|
|
83
|
-
"tabIndex"
|
|
87
|
+
"tabIndex",
|
|
88
|
+
"onKeyDown"
|
|
84
89
|
]);
|
|
90
|
+
const instanceUid = useMemo(() => id || uid(5), [id]);
|
|
85
91
|
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
|
86
92
|
const commonProps = __spreadProps(__spreadValues({
|
|
87
|
-
|
|
93
|
+
"data-testid": "ds-checkbox"
|
|
88
94
|
}, restGlobals), {
|
|
89
|
-
id,
|
|
95
|
+
id: instanceUid,
|
|
90
96
|
"aria-label": ariaLabel || legacyAriaLabel || label,
|
|
91
|
-
"aria-checked": checked
|
|
92
|
-
"data-testid": "ds-checkbox"
|
|
97
|
+
"aria-checked": checked
|
|
93
98
|
});
|
|
94
99
|
return /* @__PURE__ */ React2.createElement(StyledContainer, __spreadValues({
|
|
100
|
+
device,
|
|
95
101
|
"data-testid": "ds-checkbox-container",
|
|
96
102
|
className
|
|
97
103
|
}, xstyledProps), /* @__PURE__ */ React2.createElement(StyledCheckBox, {
|
|
104
|
+
device,
|
|
98
105
|
checked,
|
|
99
106
|
hasError,
|
|
100
107
|
disabled,
|
|
101
108
|
readOnly
|
|
102
|
-
}, ariaControls || legacyAriaControls ? /* @__PURE__ */ React2.createElement(StyledInputMixed, __spreadProps(__spreadValues({
|
|
109
|
+
}, ariaControls || legacyAriaControls ? /* @__PURE__ */ React2.createElement(StyledInputMixed, __spreadProps(__spreadValues({}, commonProps), {
|
|
103
110
|
role: "checkbox",
|
|
104
111
|
"aria-controls": ariaControls || legacyAriaControls,
|
|
105
|
-
disabled
|
|
106
|
-
}, commonProps), {
|
|
112
|
+
"aria-disabled": disabled,
|
|
107
113
|
onClick: !disabled && !readOnly ? onChange : void 0,
|
|
114
|
+
onKeyDown: userOnKeyDown,
|
|
108
115
|
tabIndex: tabIndex ?? (disabled ? -1 : 0),
|
|
109
|
-
ref:
|
|
110
|
-
})) : /* @__PURE__ */ React2.createElement(StyledInput, __spreadValues({
|
|
111
|
-
ref: (ref) => setMultipleRefs([checkboxRef, innerRef])(ref),
|
|
116
|
+
ref: innerRef
|
|
117
|
+
})) : /* @__PURE__ */ React2.createElement(StyledInput, __spreadProps(__spreadValues({}, commonProps), {
|
|
112
118
|
type: "checkbox",
|
|
113
119
|
checked,
|
|
114
120
|
onChange,
|
|
115
121
|
disabled,
|
|
116
|
-
tabIndex
|
|
117
|
-
|
|
118
|
-
|
|
122
|
+
tabIndex,
|
|
123
|
+
ref: innerRef
|
|
124
|
+
}))), label && /* @__PURE__ */ React2.createElement(StyledLabel, __spreadValues({
|
|
125
|
+
htmlFor: instanceUid,
|
|
119
126
|
disabled,
|
|
120
127
|
readOnly,
|
|
121
128
|
checked,
|
|
122
|
-
disabled,
|
|
123
129
|
"data-testid": "ds-checkbox-label",
|
|
124
|
-
wrapLabel
|
|
130
|
+
wrapLabel,
|
|
131
|
+
device
|
|
125
132
|
}, !disabled && (ariaControls || legacyAriaControls) ? { onClick: onChange } : {}), wrapLabel ? /* @__PURE__ */ React2.createElement(StyledWrapLabel, null, label) : /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
|
|
126
133
|
value: label
|
|
127
134
|
})));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledCheckbox.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, {
|
|
5
|
-
"mappings": "
|
|
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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,QAYI,4BAAoD,kBAAkB;AAAA,IACxE,WAAW;AAAA,EACb,CAAC,GAbC;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MAET,IADC,wBACD,IADC;AAAA,IAVH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAMF,QAAM,cAAc,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,cAAoD;AAAA,IACxD,eAAe;AAAA,KACZ,cAFqD;AAAA,IAGxD,IAAI;AAAA,IACJ,cAAc,aAAa,mBAAmB;AAAA,IAC9C,gBAAgB;AAAA,EAClB;AAEA,SACE,qCAAC;AAAA,IAAgB;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,KAA0B,eAC7F,qCAAC;AAAA,IAAe;AAAA,IAAgB;AAAA,IAAkB;AAAA,IAAoB;AAAA,IAAoB;AAAA,KACvF,gBAAgB,qBACf,qCAAC,mDACK,cADL;AAAA,IAEC,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,IACP,IAEA,qCAAC,8CACK,cADL;AAAA,IAEC,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACP,CAEJ,GACC,SACC,qCAAC;AAAA,IACC,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ;AAAA,IACA;AAAA,KACK,CAAC,YAAa,iBAAgB,sBAAsB,EAAE,SAAS,SAAS,IAAI,CAAC,IAEjF,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
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { DSControlledCheckboxT } from '../react-desc-prop-types';\n\nconst throwError = (message: string): void => {\n throw new Error(\n `DSControlledCheckbox:: ${message}\n `,\n );\n};\n\nexport const useValidateProps = (props: DSControlledCheckboxT.Props, propTypes: unknown): void => {\n useValidateTypescriptPropTypes(props, propTypes);\n if (typeof props.label === 'undefined' && typeof props['aria-label'] === 'undefined') {\n throwError(`Please provide a label or ariaLabel property to use this component.`);\n }\n if (props.checked === 'mixed' && typeof props['aria-controls'] === 'undefined') {\n throwError(\n `Please provide an ariaControls property to use a checkbox mixed state. \n This property must be a string containing all the ids that this mixed checkbox is controlling.`,\n );\n }\n};"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAGA,MAAM,aAAa,CAAC,YAA0B;AAC5C,QAAM,IAAI,MACR,0BAA0B;AAAA,GAE5B;AACF;AAEO,MAAM,mBAAmB,CAAC,OAAoC,cAA6B;AAChG,iCAA+B,OAAO,SAAS;AAC/C,MAAI,OAAO,MAAM,UAAU,eAAe,OAAO,MAAM,kBAAkB,aAAa;AACpF,eAAW,qEAAqE;AAAA,EAClF;AACA,MAAI,MAAM,YAAY,WAAW,OAAO,MAAM,qBAAqB,aAAa;AAC9E,eACE;AAAA,qGAEF;AAAA,EACF;AACF;",
|
|
5
|
+
"mappings": ";AAAA;ACAA;AAGA,MAAM,aAAa,CAAC,YAA0B;AAC5C,QAAM,IAAI,MACR,0BAA0B;AAAA,GAE5B;AACF;AAEO,MAAM,mBAAmB,CAAC,OAAoC,cAA6B;AAChG,iCAA+B,OAAO,SAAS;AAC/C,MAAI,OAAO,MAAM,UAAU,eAAe,OAAO,MAAM,kBAAkB,aAAa;AACpF,eAAW,qEAAqE;AAAA,EAClF;AACA,MAAI,MAAM,YAAY,WAAW,OAAO,MAAM,qBAAqB,aAAa;AAC9E,eACE;AAAA,qGAEF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/data-test-ids.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSCheckboxDataTestIds = {\n CONTAINER: 'ds-checkbox-container',\n INPUT: 'ds-checkbox',\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,wBAAwB;AAAA,EACnC,WAAW;AAAA,EACX,OAAO;AACT;",
|
|
5
|
+
"mappings": ";AAAA;ACAO,MAAM,wBAAwB;AAAA,EACnC,WAAW;AAAA,EACX,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './data-test-ids';\nexport * from './theming';\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;",
|
|
5
|
+
"mappings": ";AAAA;ACAA;AACA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSCheckboxName = 'DS-Checkbox';\n\nexport const DSCheckboxSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n LABEL: 'label',\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AACT;",
|
|
5
|
+
"mappings": ";AAAA;ACAO,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSControlledCheckbox, DSControlledCheckboxWithSchema } from './ControlledCheckbox';\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;",
|
|
5
|
+
"mappings": ";AAAA;ACAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __defProp = Object.defineProperty;
|
|
2
3
|
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
@@ -29,7 +30,8 @@ const propTypes = __spreadProps(__spreadValues({}, globalAttributesPropTypes), {
|
|
|
29
30
|
label: PropTypes.string.description("Checkbox Label property. This label is also going to be used as an aria-label for screen readers."),
|
|
30
31
|
hasError: PropTypes.bool.description("Whether the checkbox has error or not."),
|
|
31
32
|
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description("Checkbox input ref."),
|
|
32
|
-
wrapLabel: PropTypes.bool.description("Whether to wrap or truncate the label")
|
|
33
|
+
wrapLabel: PropTypes.bool.description("Whether to wrap or truncate the label"),
|
|
34
|
+
device: PropTypes.string.description("Whether to use mobile styling")
|
|
33
35
|
});
|
|
34
36
|
export {
|
|
35
37
|
defaultProps,
|
|
@@ -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 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
|
|
5
|
-
"mappings": "
|
|
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": ";;;;;;;;;;;;;;;;;;;;AAAA;ACCA;AA4CO,MAAM,eAAqD;AAAA,EAChE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX;AAEO,MAAM,YAAY,iCACpB,4BADoB;AAAA,EAEvB,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/dist/esm/styles.js
CHANGED
|
@@ -1,35 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
import * as React from "react";
|
|
2
3
|
import { styled, css } from "@elliemae/ds-system";
|
|
3
4
|
import { handleBackgroundColor, handleCheckmark } from "./utils/styleHelpers";
|
|
4
5
|
import { DSCheckboxName, DSCheckboxSlots } from "./exported-related";
|
|
5
|
-
const StyledContainer = styled("div", {
|
|
6
|
-
name: DSCheckboxName,
|
|
7
|
-
slot: DSCheckboxSlots.CONTAINER
|
|
8
|
-
})`
|
|
9
|
-
display: inline-grid;
|
|
10
|
-
grid-template-rows: min-content;
|
|
11
|
-
grid-template-columns: ${({ theme }) => theme.space.xs} auto;
|
|
12
|
-
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
13
|
-
grid-template-columns: 24px auto;
|
|
14
|
-
}
|
|
15
|
-
align-items: center;
|
|
16
|
-
`;
|
|
17
6
|
const StyledCheckBox = styled("span")`
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
7
|
+
${({ device, theme }) => {
|
|
8
|
+
if (device === "mobile") {
|
|
9
|
+
return `
|
|
10
|
+
width: 24px;
|
|
11
|
+
height: 24px;`;
|
|
12
|
+
}
|
|
13
|
+
if (device === void 0) {
|
|
14
|
+
return `
|
|
15
|
+
@media (max-width: ${theme.breakpoints.small}) {
|
|
16
|
+
width: 24px;
|
|
17
|
+
height: 24px;
|
|
18
|
+
}
|
|
19
|
+
width: ${theme.space.xs};
|
|
20
|
+
height: ${theme.space.xs};
|
|
21
|
+
`;
|
|
23
22
|
}
|
|
23
|
+
return `
|
|
24
|
+
width: ${theme.space.xs};
|
|
25
|
+
height: ${theme.space.xs};
|
|
26
|
+
`;
|
|
27
|
+
}}
|
|
28
|
+
|
|
24
29
|
border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
|
|
25
30
|
border-radius: 2px;
|
|
26
31
|
position: relative;
|
|
27
32
|
background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};
|
|
28
|
-
${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError)}
|
|
33
|
+
${({ theme, checked, disabled, readOnly, hasError, device }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}
|
|
29
34
|
&:focus-within {
|
|
30
35
|
${({ theme, hasError, disabled }) => !disabled ? `border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]}; outline : 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]} ` : void 0};
|
|
31
36
|
&:hover {
|
|
32
|
-
${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, true)}
|
|
37
|
+
${({ theme, checked, disabled, readOnly, hasError, device }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}
|
|
33
38
|
}
|
|
34
39
|
}
|
|
35
40
|
&:hover {
|
|
@@ -62,7 +67,7 @@ const StyledInputMixed = styled("div", {
|
|
|
62
67
|
slot: DSCheckboxSlots.INPUT
|
|
63
68
|
})`
|
|
64
69
|
${checkboxStyles}
|
|
65
|
-
${({ disabled }) => disabled ? `&:hover {
|
|
70
|
+
${({ "aria-disabled": disabled }) => disabled ? `&:hover {
|
|
66
71
|
cursor: not-allowed;
|
|
67
72
|
}` : ""}
|
|
68
73
|
`;
|
|
@@ -75,11 +80,33 @@ const StyledLabel = styled("label", {
|
|
|
75
80
|
color: ${({ theme, disabled, readOnly }) => disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
|
|
76
81
|
font-size: 13px;
|
|
77
82
|
line-height: 13px;
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
83
|
+
|
|
84
|
+
${({ device, theme, wrapLabel }) => {
|
|
85
|
+
if (device === "mobile") {
|
|
86
|
+
return `
|
|
87
|
+
font-size: 16px;
|
|
88
|
+
line-height: 16px;
|
|
89
|
+
${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
|
|
90
|
+
`;
|
|
82
91
|
}
|
|
92
|
+
if (device === void 0) {
|
|
93
|
+
return `
|
|
94
|
+
@media (max-width: ${theme.breakpoints.small}) {
|
|
95
|
+
font-size: 16px;
|
|
96
|
+
line-height: 16px;
|
|
97
|
+
${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
font-size: 13px;
|
|
101
|
+
line-height: 13px;
|
|
102
|
+
`;
|
|
103
|
+
}
|
|
104
|
+
return `
|
|
105
|
+
font-size: 13px;
|
|
106
|
+
line-height: 13px;
|
|
107
|
+
`;
|
|
108
|
+
}}
|
|
109
|
+
|
|
83
110
|
display: inherit;
|
|
84
111
|
|
|
85
112
|
${({ disabled }) => disabled ? `&:hover {
|
|
@@ -89,6 +116,31 @@ const StyledLabel = styled("label", {
|
|
|
89
116
|
}`}
|
|
90
117
|
`;
|
|
91
118
|
const StyledWrapLabel = styled("span")``;
|
|
119
|
+
const StyledContainer = styled("div", {
|
|
120
|
+
name: DSCheckboxName,
|
|
121
|
+
slot: DSCheckboxSlots.CONTAINER
|
|
122
|
+
})`
|
|
123
|
+
${({ device, theme }) => {
|
|
124
|
+
if (device === "mobile") {
|
|
125
|
+
return `
|
|
126
|
+
grid-template-columns: 24px auto;`;
|
|
127
|
+
}
|
|
128
|
+
if (device === void 0) {
|
|
129
|
+
return `
|
|
130
|
+
@media (max-width: ${theme.breakpoints.small}) {
|
|
131
|
+
grid-template-columns: 24px auto;
|
|
132
|
+
}
|
|
133
|
+
grid-template-columns: ${theme.space.xs} auto;
|
|
134
|
+
`;
|
|
135
|
+
}
|
|
136
|
+
return `
|
|
137
|
+
grid-template-columns: ${theme.space.xs} auto;
|
|
138
|
+
`;
|
|
139
|
+
}}
|
|
140
|
+
display: inline-grid;
|
|
141
|
+
grid-template-rows: min-content;
|
|
142
|
+
align-items: center;
|
|
143
|
+
`;
|
|
92
144
|
export {
|
|
93
145
|
StyledCheckBox,
|
|
94
146
|
StyledContainer,
|
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", "import { styled, css } from '@elliemae/ds-system';\nimport { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\nexport const
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { DSControlledCheckboxT } from './react-desc-prop-types';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related';\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n width: 24px;\n height: 24px;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 24px;\n height: 24px;\n }\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }\n return `\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }}\n\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n border-radius: 2px;\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}\n &:focus-within {\n ${({ theme, hasError, disabled }) =>\n !disabled\n ? `border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.brand[700]}; outline : 1px solid ${\n hasError ? theme.colors.danger[900] : theme.colors.brand[700]\n } `\n : undefined};\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n }\n }\n &:hover {\n background: ${({ theme, checked, disabled }) =>\n !disabled && (checked === 'mixed' || checked) ? theme.colors.brand[200] : undefined};\n ${({ theme, hasError, disabled, readOnly }) =>\n !hasError && !disabled && !readOnly ? ` border: 1px solid ${theme.colors.brand[600]}` : undefined};\n }\n`;\n\nconst checkboxStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ 'aria-disabled': disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n ${({ wrapLabel, theme }) => (wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`)};\n\n color: ${({ theme, disabled, readOnly }) =>\n disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n font-size: 13px;\n line-height: 13px;\n\n ${({ device, theme, wrapLabel }) => {\n if (device === 'mobile') {\n return ` \n font-size: 16px;\n line-height: 16px;\n ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n font-size: 16px;\n line-height: 16px;\n ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};\n }\n\n font-size: 13px;\n line-height: 13px;\n `;\n }\n return `\n font-size: 13px;\n line-height: 13px;\n `;\n }}\n\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n grid-template-columns: 24px auto;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 24px auto;\n }\n grid-template-columns: ${theme.space.xs} auto;\n `;\n }\n return `\n grid-template-columns: ${theme.space.xs} auto;\n `;\n }}\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: center;\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
import * as React from "react";
|
|
2
3
|
const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnly, hasError) => {
|
|
3
4
|
if (hasError) {
|
|
@@ -11,41 +12,68 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
|
|
|
11
12
|
}
|
|
12
13
|
return colors.brand[500];
|
|
13
14
|
};
|
|
14
|
-
const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false) => {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
15
|
+
const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false, device = void 0) => {
|
|
16
|
+
const desktopMixedCheckmark = `
|
|
17
|
+
position: absolute;
|
|
18
|
+
content: '';
|
|
19
|
+
top: 6px;
|
|
20
|
+
left: 3px;
|
|
21
|
+
background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
22
|
+
width: ${theme.space.xxs};
|
|
23
|
+
height: 2px;
|
|
24
|
+
`;
|
|
25
|
+
const normalMixedCheckmark = `
|
|
26
|
+
@media (max-width: ${theme.breakpoints.small}) {
|
|
27
|
+
top:10px;
|
|
28
|
+
left:5px;
|
|
29
|
+
height:2px;
|
|
30
|
+
width:12px;
|
|
31
|
+
}
|
|
32
|
+
${desktopMixedCheckmark}
|
|
33
|
+
`;
|
|
34
|
+
const mobileMixedCheckmark = `
|
|
35
|
+
${desktopMixedCheckmark}
|
|
36
|
+
top:10px;
|
|
37
|
+
left:5px;
|
|
38
|
+
height:2px;
|
|
39
|
+
width:12px;
|
|
40
|
+
`;
|
|
41
|
+
const desktopCheckmark = `
|
|
42
|
+
position: absolute;
|
|
43
|
+
content: '';
|
|
44
|
+
top: 3px;
|
|
45
|
+
left: 2px;
|
|
46
|
+
border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
47
|
+
border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
48
|
+
height: 5px;
|
|
49
|
+
width: 10px;
|
|
50
|
+
transform: rotate(-45deg);
|
|
51
|
+
`;
|
|
52
|
+
const normalCheckmark = `
|
|
24
53
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
25
|
-
top:
|
|
26
|
-
left:
|
|
27
|
-
height:
|
|
28
|
-
width:
|
|
54
|
+
top: 5px;
|
|
55
|
+
left: 3px;
|
|
56
|
+
height: 8px;
|
|
57
|
+
width: 17px;
|
|
29
58
|
}
|
|
59
|
+
${desktopCheckmark}
|
|
60
|
+
`;
|
|
61
|
+
const mobileCheckmark = `
|
|
62
|
+
${desktopCheckmark}
|
|
63
|
+
top: 5px;
|
|
64
|
+
left: 3px;
|
|
65
|
+
height: 8px;
|
|
66
|
+
width: 17px;
|
|
67
|
+
`;
|
|
68
|
+
if (checked === "mixed") {
|
|
69
|
+
return `&:before {
|
|
70
|
+
${device === void 0 ? normalMixedCheckmark : device === "mobile" ? mobileMixedCheckmark : desktopMixedCheckmark}
|
|
71
|
+
|
|
30
72
|
}`;
|
|
31
73
|
}
|
|
32
74
|
if (checked) {
|
|
33
75
|
return `&:before {
|
|
34
|
-
|
|
35
|
-
content: '';
|
|
36
|
-
top: 3px;
|
|
37
|
-
left: 2px;
|
|
38
|
-
border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
39
|
-
border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
40
|
-
height: 5px;
|
|
41
|
-
width: 10px;
|
|
42
|
-
transform: rotate(-45deg);
|
|
43
|
-
@media (max-width: ${theme.breakpoints.small}) {
|
|
44
|
-
top: 5px;
|
|
45
|
-
left: 3px;
|
|
46
|
-
height: 8px;
|
|
47
|
-
width: 17px;
|
|
48
|
-
}
|
|
76
|
+
${device === void 0 ? normalCheckmark : device === "mobile" ? mobileCheckmark : desktopCheckmark}
|
|
49
77
|
}`;
|
|
50
78
|
}
|
|
51
79
|
return "";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\
|
|
5
|
-
"mappings": "AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\n\nimport type { Theme } from '@elliemae/pui-theme';\nexport const handleCheckMarkColor = (\n { colors }: Theme,\n checked: boolean | 'mixed',\n isHovering: boolean,\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n): string => {\n if (hasError) {\n return colors.danger[900];\n }\n if (disabled || readOnly) {\n return colors.neutral[500];\n }\n if (isHovering && checked !== false) {\n return colors.brand[800];\n }\n return colors.brand[500];\n};\n\nexport const handleCheckmark = (\n theme: Theme,\n checked: boolean | 'mixed',\n disabled?: boolean,\n readOnly?: boolean,\n hasError?: boolean,\n isHovering = false,\n device = undefined,\n): string => {\n const desktopMixedCheckmark = `\n position: absolute;\n content: '';\n top: 6px;\n left: 3px;\n background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n width: ${theme.space.xxs};\n height: 2px;\n`;\n\n const normalMixedCheckmark = `\n @media (max-width: ${theme.breakpoints.small}) {\n top:10px;\n left:5px;\n height:2px;\n width:12px;\n }\n ${desktopMixedCheckmark}\n`;\n const mobileMixedCheckmark = `\n ${desktopMixedCheckmark}\n top:10px;\n left:5px;\n height:2px;\n width:12px;\n `;\n const desktopCheckmark = `\n position: absolute;\n content: '';\n top: 3px;\n left: 2px;\n border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};\n height: 5px;\n width: 10px;\n transform: rotate(-45deg);\n`;\n\n const normalCheckmark = `\n @media (max-width: ${theme.breakpoints.small}) {\n top: 5px;\n left: 3px;\n height: 8px;\n width: 17px;\n }\n ${desktopCheckmark}\n`;\n const mobileCheckmark = `\n ${desktopCheckmark}\n top: 5px;\n left: 3px;\n height: 8px;\n width: 17px;\n `;\n\n if (checked === 'mixed') {\n return `&:before {\n ${\n device === undefined ? normalMixedCheckmark : device === 'mobile' ? mobileMixedCheckmark : desktopMixedCheckmark\n }\n\n }`;\n }\n if (checked) {\n return `&:before {\n ${device === undefined ? normalCheckmark : device === 'mobile' ? mobileCheckmark : desktopCheckmark}\n }`;\n }\n return '';\n};\n\nexport const handleBackgroundColor = ({ colors }: Theme, disabled?: boolean): string => {\n if (disabled) {\n return colors.neutral['080'];\n }\n\n return colors.neutral['000'];\n};\n"],
|
|
5
|
+
"mappings": ";AAAA;ACIO,MAAM,uBAAuB,CAClC,EAAE,UACF,SACA,YACA,UACA,UACA,aACW;AACX,MAAI,UAAU;AACZ,WAAO,OAAO,OAAO;AAAA,EACvB;AACA,MAAI,YAAY,UAAU;AACxB,WAAO,OAAO,QAAQ;AAAA,EACxB;AACA,MAAI,cAAc,YAAY,OAAO;AACnC,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,SAAO,OAAO,MAAM;AACtB;AAEO,MAAM,kBAAkB,CAC7B,OACA,SACA,UACA,UACA,UACA,aAAa,OACb,SAAS,WACE;AACX,QAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,WAClF,MAAM,MAAM;AAAA;AAAA;AAIrB,QAAM,uBAAuB;AAAA,yBACN,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,uBAAuB;AAAA,MACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAMJ,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKA,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,6BAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMxG,QAAM,kBAAkB;AAAA,yBACD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMrC;AAAA;AAEJ,QAAM,kBAAkB;AAAA,MACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOJ,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,QAEH,WAAW,SAAY,uBAAuB,WAAW,WAAW,uBAAuB;AAAA;AAAA;AAAA,EAIjG;AACA,MAAI,SAAS;AACX,WAAO;AAAA,UACD,WAAW,SAAY,kBAAkB,WAAW,WAAW,kBAAkB;AAAA;AAAA,EAEzF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,EAAE,UAAiB,aAA+B;AACtF,MAAI,UAAU;AACZ,WAAO,OAAO,QAAQ;AAAA,EACxB;AAEA,SAAO,OAAO,QAAQ;AACxB;",
|
|
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.3",
|
|
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.3",
|
|
39
|
+
"@elliemae/ds-truncated-tooltip-text": "3.2.1-rc.3",
|
|
40
|
+
"@elliemae/ds-utilities": "3.2.1-rc.3"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@elliemae/pui-theme": "~2.6.0",
|