@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 __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __defProps = Object.defineProperties;
|
|
@@ -55,18 +56,18 @@ __export(ControlledCheckbox_exports, {
|
|
|
55
56
|
module.exports = __toCommonJS(ControlledCheckbox_exports);
|
|
56
57
|
var React = __toESM(require("react"));
|
|
57
58
|
var import_react = __toESM(require("react"));
|
|
59
|
+
var import_uid = require("uid");
|
|
58
60
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
59
61
|
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
60
62
|
var import_styles = require("./styles");
|
|
61
63
|
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
62
|
-
var import_setMultipleRefs = require("./utils/setMultipleRefs");
|
|
63
64
|
var import_useValidateProps = require("./config/useValidateProps");
|
|
64
65
|
const DSControlledCheckbox = (props) => {
|
|
65
66
|
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
66
67
|
(0, import_useValidateProps.useValidateProps)(props, import_react_desc_prop_types.propTypes);
|
|
67
|
-
const checkboxRef = (0, import_react.useRef)(null);
|
|
68
68
|
const {
|
|
69
69
|
checked,
|
|
70
|
+
device,
|
|
70
71
|
label,
|
|
71
72
|
hasError,
|
|
72
73
|
innerRef,
|
|
@@ -74,13 +75,15 @@ const DSControlledCheckbox = (props) => {
|
|
|
74
75
|
ariaLabel: legacyAriaLabel,
|
|
75
76
|
ariaControls: legacyAriaControls
|
|
76
77
|
} = propsWithDefault;
|
|
77
|
-
const
|
|
78
|
-
if (
|
|
79
|
-
e
|
|
80
|
-
|
|
78
|
+
const handleMixedCheckboxOnKeyDown = (0, import_react.useCallback)((e) => {
|
|
79
|
+
if (e.code === "Space") {
|
|
80
|
+
const { currentTarget } = e;
|
|
81
|
+
currentTarget.click();
|
|
81
82
|
}
|
|
82
83
|
}, []);
|
|
83
|
-
const _a = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault, {
|
|
84
|
+
const _a = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault, {
|
|
85
|
+
onKeyDown: handleMixedCheckboxOnKeyDown
|
|
86
|
+
}), {
|
|
84
87
|
id,
|
|
85
88
|
disabled,
|
|
86
89
|
readOnly,
|
|
@@ -89,7 +92,8 @@ const DSControlledCheckbox = (props) => {
|
|
|
89
92
|
"aria-controls": ariaControls,
|
|
90
93
|
className,
|
|
91
94
|
onChange,
|
|
92
|
-
tabIndex
|
|
95
|
+
tabIndex,
|
|
96
|
+
onKeyDown: userOnKeyDown
|
|
93
97
|
} = _a, restGlobals = __objRest(_a, [
|
|
94
98
|
"id",
|
|
95
99
|
"disabled",
|
|
@@ -99,48 +103,51 @@ const DSControlledCheckbox = (props) => {
|
|
|
99
103
|
"aria-controls",
|
|
100
104
|
"className",
|
|
101
105
|
"onChange",
|
|
102
|
-
"tabIndex"
|
|
106
|
+
"tabIndex",
|
|
107
|
+
"onKeyDown"
|
|
103
108
|
]);
|
|
109
|
+
const instanceUid = (0, import_react.useMemo)(() => id || (0, import_uid.uid)(5), [id]);
|
|
104
110
|
const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
|
|
105
111
|
const commonProps = __spreadProps(__spreadValues({
|
|
106
|
-
|
|
112
|
+
"data-testid": "ds-checkbox"
|
|
107
113
|
}, restGlobals), {
|
|
108
|
-
id,
|
|
114
|
+
id: instanceUid,
|
|
109
115
|
"aria-label": ariaLabel || legacyAriaLabel || label,
|
|
110
|
-
"aria-checked": checked
|
|
111
|
-
"data-testid": "ds-checkbox"
|
|
116
|
+
"aria-checked": checked
|
|
112
117
|
});
|
|
113
118
|
return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer, __spreadValues({
|
|
119
|
+
device,
|
|
114
120
|
"data-testid": "ds-checkbox-container",
|
|
115
121
|
className
|
|
116
122
|
}, xstyledProps), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledCheckBox, {
|
|
123
|
+
device,
|
|
117
124
|
checked,
|
|
118
125
|
hasError,
|
|
119
126
|
disabled,
|
|
120
127
|
readOnly
|
|
121
|
-
}, ariaControls || legacyAriaControls ? /* @__PURE__ */ import_react.default.createElement(import_styles.StyledInputMixed, __spreadProps(__spreadValues({
|
|
128
|
+
}, ariaControls || legacyAriaControls ? /* @__PURE__ */ import_react.default.createElement(import_styles.StyledInputMixed, __spreadProps(__spreadValues({}, commonProps), {
|
|
122
129
|
role: "checkbox",
|
|
123
130
|
"aria-controls": ariaControls || legacyAriaControls,
|
|
124
|
-
disabled
|
|
125
|
-
}, commonProps), {
|
|
131
|
+
"aria-disabled": disabled,
|
|
126
132
|
onClick: !disabled && !readOnly ? onChange : void 0,
|
|
133
|
+
onKeyDown: userOnKeyDown,
|
|
127
134
|
tabIndex: tabIndex ?? (disabled ? -1 : 0),
|
|
128
|
-
ref:
|
|
129
|
-
})) : /* @__PURE__ */ import_react.default.createElement(import_styles.StyledInput, __spreadValues({
|
|
130
|
-
ref: (ref) => (0, import_setMultipleRefs.setMultipleRefs)([checkboxRef, innerRef])(ref),
|
|
135
|
+
ref: innerRef
|
|
136
|
+
})) : /* @__PURE__ */ import_react.default.createElement(import_styles.StyledInput, __spreadProps(__spreadValues({}, commonProps), {
|
|
131
137
|
type: "checkbox",
|
|
132
138
|
checked,
|
|
133
139
|
onChange,
|
|
134
140
|
disabled,
|
|
135
|
-
tabIndex
|
|
136
|
-
|
|
137
|
-
|
|
141
|
+
tabIndex,
|
|
142
|
+
ref: innerRef
|
|
143
|
+
}))), label && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel, __spreadValues({
|
|
144
|
+
htmlFor: instanceUid,
|
|
138
145
|
disabled,
|
|
139
146
|
readOnly,
|
|
140
147
|
checked,
|
|
141
|
-
disabled,
|
|
142
148
|
"data-testid": "ds-checkbox-label",
|
|
143
|
-
wrapLabel
|
|
149
|
+
wrapLabel,
|
|
150
|
+
device
|
|
144
151
|
}, !disabled && (ariaControls || legacyAriaControls) ? { onClick: onChange } : {}), wrapLabel ? /* @__PURE__ */ import_react.default.createElement(import_styles.StyledWrapLabel, null, label) : /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
|
|
145
152
|
value: label
|
|
146
153
|
})));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ControlledCheckbox.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, {
|
|
5
|
-
"mappings": "
|
|
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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,QAYI,qDAAoD,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,0BAAQ,MAAM,MAAM,oBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,QAAM,eAAe,4CAAmB,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,mDAAC;AAAA,IAAgB;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,KAA0B,eAC7F,mDAAC;AAAA,IAAe;AAAA,IAAgB;AAAA,IAAkB;AAAA,IAAoB;AAAA,IAAoB;AAAA,KACvF,gBAAgB,qBACf,mDAAC,iEACK,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,mDAAC,4DACK,cADL;AAAA,IAEC,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACP,CAEJ,GACC,SACC,mDAAC;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,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
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useValidateProps.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["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};", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA+C;AAG/C,MAAM,aAAa,CAAC,YAA0B;AAC5C,QAAM,IAAI,MACR,0BAA0B;AAAA,GAE5B;AACF;AAEO,MAAM,mBAAmB,CAAC,OAAoC,cAA6B;AAChG,0DAA+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": ["../../../src/exported-related/data-test-ids.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const DSCheckboxDataTestIds = {\n CONTAINER: 'ds-checkbox-container',\n INPUT: 'ds-checkbox',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,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": ["../../../src/exported-related/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export * from './data-test-ids';\nexport * from './theming';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,4BAAd;AACA,qCAAc,sBADd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/theming.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const DSCheckboxName = 'DS-Checkbox';\n\nexport const DSCheckboxSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n LABEL: 'label',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export { DSControlledCheckbox, DSControlledCheckboxWithSchema } from './ControlledCheckbox';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gCAAqE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __defProps = Object.defineProperties;
|
|
@@ -53,6 +54,7 @@ const propTypes = __spreadProps(__spreadValues({}, import_ds_utilities.globalAtt
|
|
|
53
54
|
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."),
|
|
54
55
|
hasError: import_ds_utilities.PropTypes.bool.description("Whether the checkbox has error or not."),
|
|
55
56
|
innerRef: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.func, import_ds_utilities.PropTypes.object]).description("Checkbox input ref."),
|
|
56
|
-
wrapLabel: import_ds_utilities.PropTypes.bool.description("Whether to wrap or truncate the label")
|
|
57
|
+
wrapLabel: import_ds_utilities.PropTypes.bool.description("Whether to wrap or truncate the label"),
|
|
58
|
+
device: import_ds_utilities.PropTypes.string.description("Whether to use mobile styling")
|
|
57
59
|
});
|
|
58
60
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
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
|
|
5
|
-
"mappings": "
|
|
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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,iCACpB,gDADoB;AAAA,EAEvB,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
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -32,34 +33,38 @@ var React = __toESM(require("react"));
|
|
|
32
33
|
var import_ds_system = require("@elliemae/ds-system");
|
|
33
34
|
var import_styleHelpers = require("./utils/styleHelpers");
|
|
34
35
|
var import_exported_related = require("./exported-related");
|
|
35
|
-
const StyledContainer = (0, import_ds_system.styled)("div", {
|
|
36
|
-
name: import_exported_related.DSCheckboxName,
|
|
37
|
-
slot: import_exported_related.DSCheckboxSlots.CONTAINER
|
|
38
|
-
})`
|
|
39
|
-
display: inline-grid;
|
|
40
|
-
grid-template-rows: min-content;
|
|
41
|
-
grid-template-columns: ${({ theme }) => theme.space.xs} auto;
|
|
42
|
-
@media (max-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
43
|
-
grid-template-columns: 24px auto;
|
|
44
|
-
}
|
|
45
|
-
align-items: center;
|
|
46
|
-
`;
|
|
47
36
|
const StyledCheckBox = (0, import_ds_system.styled)("span")`
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
37
|
+
${({ device, theme }) => {
|
|
38
|
+
if (device === "mobile") {
|
|
39
|
+
return `
|
|
40
|
+
width: 24px;
|
|
41
|
+
height: 24px;`;
|
|
42
|
+
}
|
|
43
|
+
if (device === void 0) {
|
|
44
|
+
return `
|
|
45
|
+
@media (max-width: ${theme.breakpoints.small}) {
|
|
46
|
+
width: 24px;
|
|
47
|
+
height: 24px;
|
|
48
|
+
}
|
|
49
|
+
width: ${theme.space.xs};
|
|
50
|
+
height: ${theme.space.xs};
|
|
51
|
+
`;
|
|
53
52
|
}
|
|
53
|
+
return `
|
|
54
|
+
width: ${theme.space.xs};
|
|
55
|
+
height: ${theme.space.xs};
|
|
56
|
+
`;
|
|
57
|
+
}}
|
|
58
|
+
|
|
54
59
|
border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
|
|
55
60
|
border-radius: 2px;
|
|
56
61
|
position: relative;
|
|
57
62
|
background: ${({ theme, disabled }) => (0, import_styleHelpers.handleBackgroundColor)(theme, disabled)};
|
|
58
|
-
${({ theme, checked, disabled, readOnly, hasError }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError)}
|
|
63
|
+
${({ theme, checked, disabled, readOnly, hasError, device }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, false, device)}
|
|
59
64
|
&:focus-within {
|
|
60
65
|
${({ 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};
|
|
61
66
|
&:hover {
|
|
62
|
-
${({ theme, checked, disabled, readOnly, hasError }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, true)}
|
|
67
|
+
${({ theme, checked, disabled, readOnly, hasError, device }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, true, device)}
|
|
63
68
|
}
|
|
64
69
|
}
|
|
65
70
|
&:hover {
|
|
@@ -92,7 +97,7 @@ const StyledInputMixed = (0, import_ds_system.styled)("div", {
|
|
|
92
97
|
slot: import_exported_related.DSCheckboxSlots.INPUT
|
|
93
98
|
})`
|
|
94
99
|
${checkboxStyles}
|
|
95
|
-
${({ disabled }) => disabled ? `&:hover {
|
|
100
|
+
${({ "aria-disabled": disabled }) => disabled ? `&:hover {
|
|
96
101
|
cursor: not-allowed;
|
|
97
102
|
}` : ""}
|
|
98
103
|
`;
|
|
@@ -105,11 +110,33 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
|
|
|
105
110
|
color: ${({ theme, disabled, readOnly }) => disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
|
|
106
111
|
font-size: 13px;
|
|
107
112
|
line-height: 13px;
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
113
|
+
|
|
114
|
+
${({ device, theme, wrapLabel }) => {
|
|
115
|
+
if (device === "mobile") {
|
|
116
|
+
return `
|
|
117
|
+
font-size: 16px;
|
|
118
|
+
line-height: 16px;
|
|
119
|
+
${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
|
|
120
|
+
`;
|
|
112
121
|
}
|
|
122
|
+
if (device === void 0) {
|
|
123
|
+
return `
|
|
124
|
+
@media (max-width: ${theme.breakpoints.small}) {
|
|
125
|
+
font-size: 16px;
|
|
126
|
+
line-height: 16px;
|
|
127
|
+
${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
font-size: 13px;
|
|
131
|
+
line-height: 13px;
|
|
132
|
+
`;
|
|
133
|
+
}
|
|
134
|
+
return `
|
|
135
|
+
font-size: 13px;
|
|
136
|
+
line-height: 13px;
|
|
137
|
+
`;
|
|
138
|
+
}}
|
|
139
|
+
|
|
113
140
|
display: inherit;
|
|
114
141
|
|
|
115
142
|
${({ disabled }) => disabled ? `&:hover {
|
|
@@ -119,4 +146,29 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
|
|
|
119
146
|
}`}
|
|
120
147
|
`;
|
|
121
148
|
const StyledWrapLabel = (0, import_ds_system.styled)("span")``;
|
|
149
|
+
const StyledContainer = (0, import_ds_system.styled)("div", {
|
|
150
|
+
name: import_exported_related.DSCheckboxName,
|
|
151
|
+
slot: import_exported_related.DSCheckboxSlots.CONTAINER
|
|
152
|
+
})`
|
|
153
|
+
${({ device, theme }) => {
|
|
154
|
+
if (device === "mobile") {
|
|
155
|
+
return `
|
|
156
|
+
grid-template-columns: 24px auto;`;
|
|
157
|
+
}
|
|
158
|
+
if (device === void 0) {
|
|
159
|
+
return `
|
|
160
|
+
@media (max-width: ${theme.breakpoints.small}) {
|
|
161
|
+
grid-template-columns: 24px auto;
|
|
162
|
+
}
|
|
163
|
+
grid-template-columns: ${theme.space.xs} auto;
|
|
164
|
+
`;
|
|
165
|
+
}
|
|
166
|
+
return `
|
|
167
|
+
grid-template-columns: ${theme.space.xs} auto;
|
|
168
|
+
`;
|
|
169
|
+
}}
|
|
170
|
+
display: inline-grid;
|
|
171
|
+
grid-template-rows: min-content;
|
|
172
|
+
align-items: center;
|
|
173
|
+
`;
|
|
122
174
|
//# sourceMappingURL=styles.js.map
|
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": ["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": "
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -38,41 +39,68 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
|
|
|
38
39
|
}
|
|
39
40
|
return colors.brand[500];
|
|
40
41
|
};
|
|
41
|
-
const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false) => {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
42
|
+
const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false, device = void 0) => {
|
|
43
|
+
const desktopMixedCheckmark = `
|
|
44
|
+
position: absolute;
|
|
45
|
+
content: '';
|
|
46
|
+
top: 6px;
|
|
47
|
+
left: 3px;
|
|
48
|
+
background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
49
|
+
width: ${theme.space.xxs};
|
|
50
|
+
height: 2px;
|
|
51
|
+
`;
|
|
52
|
+
const normalMixedCheckmark = `
|
|
53
|
+
@media (max-width: ${theme.breakpoints.small}) {
|
|
54
|
+
top:10px;
|
|
55
|
+
left:5px;
|
|
56
|
+
height:2px;
|
|
57
|
+
width:12px;
|
|
58
|
+
}
|
|
59
|
+
${desktopMixedCheckmark}
|
|
60
|
+
`;
|
|
61
|
+
const mobileMixedCheckmark = `
|
|
62
|
+
${desktopMixedCheckmark}
|
|
63
|
+
top:10px;
|
|
64
|
+
left:5px;
|
|
65
|
+
height:2px;
|
|
66
|
+
width:12px;
|
|
67
|
+
`;
|
|
68
|
+
const desktopCheckmark = `
|
|
69
|
+
position: absolute;
|
|
70
|
+
content: '';
|
|
71
|
+
top: 3px;
|
|
72
|
+
left: 2px;
|
|
73
|
+
border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
74
|
+
border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
75
|
+
height: 5px;
|
|
76
|
+
width: 10px;
|
|
77
|
+
transform: rotate(-45deg);
|
|
78
|
+
`;
|
|
79
|
+
const normalCheckmark = `
|
|
51
80
|
@media (max-width: ${theme.breakpoints.small}) {
|
|
52
|
-
top:
|
|
53
|
-
left:
|
|
54
|
-
height:
|
|
55
|
-
width:
|
|
81
|
+
top: 5px;
|
|
82
|
+
left: 3px;
|
|
83
|
+
height: 8px;
|
|
84
|
+
width: 17px;
|
|
56
85
|
}
|
|
86
|
+
${desktopCheckmark}
|
|
87
|
+
`;
|
|
88
|
+
const mobileCheckmark = `
|
|
89
|
+
${desktopCheckmark}
|
|
90
|
+
top: 5px;
|
|
91
|
+
left: 3px;
|
|
92
|
+
height: 8px;
|
|
93
|
+
width: 17px;
|
|
94
|
+
`;
|
|
95
|
+
if (checked === "mixed") {
|
|
96
|
+
return `&:before {
|
|
97
|
+
${device === void 0 ? normalMixedCheckmark : device === "mobile" ? mobileMixedCheckmark : desktopMixedCheckmark}
|
|
98
|
+
|
|
57
99
|
}`;
|
|
58
100
|
}
|
|
59
101
|
if (checked) {
|
|
60
102
|
return `&:before {
|
|
61
|
-
|
|
62
|
-
content: '';
|
|
63
|
-
top: 3px;
|
|
64
|
-
left: 2px;
|
|
65
|
-
border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
66
|
-
border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
|
|
67
|
-
height: 5px;
|
|
68
|
-
width: 10px;
|
|
69
|
-
transform: rotate(-45deg);
|
|
70
|
-
@media (max-width: ${theme.breakpoints.small}) {
|
|
71
|
-
top: 5px;
|
|
72
|
-
left: 3px;
|
|
73
|
-
height: 8px;
|
|
74
|
-
width: 17px;
|
|
75
|
-
}
|
|
103
|
+
${device === void 0 ? normalCheckmark : device === "mobile" ? mobileCheckmark : desktopCheckmark}
|
|
76
104
|
}`;
|
|
77
105
|
}
|
|
78
106
|
return "";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/styleHelpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIhB,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
|
}
|