@elliemae/ds-form-checkbox 3.2.0-rc.4 → 3.2.1-rc.1

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.
Files changed (21) hide show
  1. package/dist/cjs/ControlledCheckbox.js +30 -24
  2. package/dist/cjs/ControlledCheckbox.js.map +2 -2
  3. package/dist/cjs/react-desc-prop-types.js +2 -1
  4. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  5. package/dist/cjs/styles.js +75 -24
  6. package/dist/cjs/styles.js.map +2 -2
  7. package/dist/cjs/utils/styleHelpers.js +56 -29
  8. package/dist/cjs/utils/styleHelpers.js.map +2 -2
  9. package/dist/esm/ControlledCheckbox.js +31 -25
  10. package/dist/esm/ControlledCheckbox.js.map +2 -2
  11. package/dist/esm/react-desc-prop-types.js +2 -1
  12. package/dist/esm/react-desc-prop-types.js.map +2 -2
  13. package/dist/esm/styles.js +75 -24
  14. package/dist/esm/styles.js.map +2 -2
  15. package/dist/esm/utils/styleHelpers.js +56 -29
  16. package/dist/esm/utils/styleHelpers.js.map +2 -2
  17. package/package.json +4 -4
  18. package/dist/cjs/utils/setMultipleRefs.js +0 -38
  19. package/dist/cjs/utils/setMultipleRefs.js.map +0 -7
  20. package/dist/esm/utils/setMultipleRefs.js +0 -16
  21. package/dist/esm/utils/setMultipleRefs.js.map +0 -7
package/dist/cjs/ControlledCheckbox.js CHANGED
@@ -55,18 +55,18 @@ __export(ControlledCheckbox_exports, {
55
55
  module.exports = __toCommonJS(ControlledCheckbox_exports);
56
56
  var React = __toESM(require("react"));
57
57
  var import_react = __toESM(require("react"));
58
+ var import_uid = require("uid");
58
59
  var import_ds_utilities = require("@elliemae/ds-utilities");
59
60
  var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
60
61
  var import_styles = require("./styles");
61
62
  var import_react_desc_prop_types = require("./react-desc-prop-types");
62
- var import_setMultipleRefs = require("./utils/setMultipleRefs");
63
63
  var import_useValidateProps = require("./config/useValidateProps");
64
64
  const DSControlledCheckbox = (props) => {
65
65
  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
66
66
  (0, import_useValidateProps.useValidateProps)(props, import_react_desc_prop_types.propTypes);
67
- const checkboxRef = (0, import_react.useRef)(null);
68
67
  const {
69
68
  checked,
69
+ device,
70
70
  label,
71
71
  hasError,
72
72
  innerRef,
@@ -74,13 +74,15 @@ const DSControlledCheckbox = (props) => {
74
74
  ariaLabel: legacyAriaLabel,
75
75
  ariaControls: legacyAriaControls
76
76
  } = propsWithDefault;
77
- const handleOnKeyDown = (0, import_react.useCallback)((e) => {
78
- if (checkboxRef.current && ["Enter", "Space"].includes(e.code)) {
79
- e.preventDefault();
80
- checkboxRef.current.click();
77
+ const handleMixedCheckboxOnKeyDown = (0, import_react.useCallback)((e) => {
78
+ if (e.code === "Space") {
79
+ const { currentTarget } = e;
80
+ currentTarget.click();
81
81
  }
82
82
  }, []);
83
- const _a = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault, { onKeyDown: handleOnKeyDown }), {
83
+ const _a = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault, {
84
+ onKeyDown: handleMixedCheckboxOnKeyDown
85
+ }), {
84
86
  id,
85
87
  disabled,
86
88
  readOnly,
@@ -89,7 +91,8 @@ const DSControlledCheckbox = (props) => {
89
91
  "aria-controls": ariaControls,
90
92
  className,
91
93
  onChange,
92
- tabIndex
94
+ tabIndex,
95
+ onKeyDown: userOnKeyDown
93
96
  } = _a, restGlobals = __objRest(_a, [
94
97
  "id",
95
98
  "disabled",
@@ -99,48 +102,51 @@ const DSControlledCheckbox = (props) => {
99
102
  "aria-controls",
100
103
  "className",
101
104
  "onChange",
102
- "tabIndex"
105
+ "tabIndex",
106
+ "onKeyDown"
103
107
  ]);
108
+ const instanceUid = (0, import_react.useMemo)(() => id || (0, import_uid.uid)(5), [id]);
104
109
  const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
105
110
  const commonProps = __spreadProps(__spreadValues({
106
- onKeyDown: handleOnKeyDown
111
+ "data-testid": "ds-checkbox"
107
112
  }, restGlobals), {
108
- id,
113
+ id: instanceUid,
109
114
  "aria-label": ariaLabel || legacyAriaLabel || label,
110
- "aria-checked": checked,
111
- "data-testid": "ds-checkbox"
115
+ "aria-checked": checked
112
116
  });
113
117
  return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer, __spreadValues({
118
+ device,
114
119
  "data-testid": "ds-checkbox-container",
115
120
  className
116
121
  }, xstyledProps), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledCheckBox, {
122
+ device,
117
123
  checked,
118
124
  hasError,
119
125
  disabled,
120
126
  readOnly
121
- }, ariaControls || legacyAriaControls ? /* @__PURE__ */ import_react.default.createElement(import_styles.StyledInputMixed, __spreadProps(__spreadValues({
127
+ }, ariaControls || legacyAriaControls ? /* @__PURE__ */ import_react.default.createElement(import_styles.StyledInputMixed, __spreadProps(__spreadValues({}, commonProps), {
122
128
  role: "checkbox",
123
129
  "aria-controls": ariaControls || legacyAriaControls,
124
- disabled
125
- }, commonProps), {
130
+ "aria-disabled": disabled,
126
131
  onClick: !disabled && !readOnly ? onChange : void 0,
132
+ onKeyDown: userOnKeyDown,
127
133
  tabIndex: tabIndex ?? (disabled ? -1 : 0),
128
- ref: (ref) => (0, import_setMultipleRefs.setMultipleRefs)([checkboxRef, innerRef])(ref)
129
- })) : /* @__PURE__ */ import_react.default.createElement(import_styles.StyledInput, __spreadValues({
130
- ref: (ref) => (0, import_setMultipleRefs.setMultipleRefs)([checkboxRef, innerRef])(ref),
134
+ ref: innerRef
135
+ })) : /* @__PURE__ */ import_react.default.createElement(import_styles.StyledInput, __spreadProps(__spreadValues({}, commonProps), {
131
136
  type: "checkbox",
132
137
  checked,
133
138
  onChange,
134
139
  disabled,
135
- tabIndex
136
- }, commonProps))), label && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel, __spreadValues({
137
- htmlFor: id,
140
+ tabIndex,
141
+ ref: innerRef
142
+ }))), label && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel, __spreadValues({
143
+ htmlFor: instanceUid,
138
144
  disabled,
139
145
  readOnly,
140
146
  checked,
141
- disabled,
142
147
  "data-testid": "ds-checkbox-label",
143
- wrapLabel
148
+ wrapLabel,
149
+ device
144
150
  }, !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
151
  value: label
146
152
  })));
package/dist/cjs/ControlledCheckbox.js.map CHANGED
@@ -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, { useRef, useCallback, WeakValidationMap } from 'react';\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 { setMultipleRefs } from './utils/setMultipleRefs';\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 checkboxRef = useRef<HTMLInputElement>(null);\n const {\n checked,\n label,\n hasError,\n innerRef,\n wrapLabel,\n ariaLabel: legacyAriaLabel,\n ariaControls: legacyAriaControls,\n } = propsWithDefault;\n\n const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (checkboxRef.current && ['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n checkboxRef.current.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 ...restGlobals\n } = useGetGlobalAttributes<DSControlledCheckboxT.Props>(propsWithDefault, { onKeyDown: handleOnKeyDown });\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n const commonProps: Partial<DSControlledCheckboxT.Props> = {\n onKeyDown: handleOnKeyDown,\n ...restGlobals,\n id,\n 'aria-label': ariaLabel || legacyAriaLabel || label,\n 'aria-checked': checked,\n 'data-testid': 'ds-checkbox',\n };\n\n return (\n <StyledContainer data-testid=\"ds-checkbox-container\" className={className} {...xstyledProps}>\n <StyledCheckBox checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n {ariaControls || legacyAriaControls ? (\n <StyledInputMixed\n role=\"checkbox\"\n aria-controls={ariaControls || legacyAriaControls}\n disabled={disabled}\n {...commonProps}\n onClick={!disabled && !readOnly ? onChange : undefined}\n tabIndex={tabIndex ?? (disabled ? -1 : 0)}\n ref={(ref) => setMultipleRefs<HTMLInputElement>([checkboxRef, innerRef])(ref)}\n />\n ) : (\n <StyledInput\n ref={(ref) => setMultipleRefs<HTMLInputElement>([checkboxRef, innerRef])(ref)}\n type=\"checkbox\"\n checked={checked}\n onChange={onChange}\n disabled={disabled}\n tabIndex={tabIndex}\n {...commonProps}\n />\n )}\n </StyledCheckBox>\n {label && (\n <StyledLabel\n htmlFor={id}\n disabled={disabled}\n readOnly={readOnly}\n checked={checked}\n disabled={disabled}\n data-testid=\"ds-checkbox-label\"\n wrapLabel={wrapLabel}\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,mBAA8D;AAC9D,0BAKO;AACP,uCAA2C;AAC3C,oBAA6G;AAC7G,mCAA+D;AAC/D,6BAAgC;AAChC,8BAAiC;AAEjC,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,mBAAmB,sDAA6B,OAAO,yCAAY;AACzE,gDAAiB,OAAO,sCAAS;AAEjC,QAAM,cAAc,yBAAyB,IAAI;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,MACZ;AAEJ,QAAM,kBAAkB,8BAAY,CAAC,MAA2B;AAC9D,QAAI,YAAY,WAAW,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAC9D,QAAE,eAAe;AACjB,kBAAY,QAAQ,MAAM;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAWI,qDAAoD,kBAAkB,EAAE,WAAW,gBAAgB,CAAC,GAVtG;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,MAEE,IADC,wBACD,IADC;AAAA,IATH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAAM,eAAe,4CAAmB,gBAAgB;AAExD,QAAM,cAAoD;AAAA,IACxD,WAAW;AAAA,KACR,cAFqD;AAAA,IAGxD;AAAA,IACA,cAAc,aAAa,mBAAmB;AAAA,IAC9C,gBAAgB;AAAA,IAChB,eAAe;AAAA,EACjB;AAEA,SACE,mDAAC;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,KAA0B,eAC7E,mDAAC;AAAA,IAAe;AAAA,IAAkB;AAAA,IAAoB;AAAA,IAAoB;AAAA,KACvE,gBAAgB,qBACf,mDAAC;AAAA,IACC,MAAK;AAAA,IACL,iBAAe,gBAAgB;AAAA,IAC/B;AAAA,KACI,cAJL;AAAA,IAKC,SAAS,CAAC,YAAY,CAAC,WAAW,WAAW;AAAA,IAC7C,UAAU,YAAa,YAAW,KAAK;AAAA,IACvC,KAAK,CAAC,QAAQ,4CAAkC,CAAC,aAAa,QAAQ,CAAC,EAAE,GAAG;AAAA,IAC9E,IAEA,mDAAC;AAAA,IACC,KAAK,CAAC,QAAQ,4CAAkC,CAAC,aAAa,QAAQ,CAAC,EAAE,GAAG;AAAA,IAC5E,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KACI,YACN,CAEJ,GACC,SACC,mDAAC;AAAA,IACC,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ;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;",
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
  }
package/dist/cjs/react-desc-prop-types.js CHANGED
@@ -53,6 +53,7 @@ const propTypes = __spreadProps(__spreadValues({}, import_ds_utilities.globalAtt
53
53
  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
54
  hasError: import_ds_utilities.PropTypes.bool.description("Whether the checkbox has error or not."),
55
55
  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")
56
+ wrapLabel: import_ds_utilities.PropTypes.bool.description("Whether to wrap or truncate the label"),
57
+ device: import_ds_utilities.PropTypes.string.description("Whether to use mobile styling")
57
58
  });
58
59
  //# sourceMappingURL=react-desc-prop-types.js.map
package/dist/cjs/react-desc-prop-types.js.map CHANGED
@@ -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> | React.LegacyRef<HTMLInputElement>;\n }\n\n export interface LegacyAriaProps {\n ariaControls: string;\n ariaLabel: string;\n }\n\n export interface Props extends DefaultProps, OptionalProps, Omit<GlobalAttributesT, 'checked'>, LegacyAriaProps {}\n\n export interface StyledCheckBoxT {\n checked: boolean | 'mixed';\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean | 'mixed';\n wrapLabel: boolean;\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};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAwE;AAoCjE,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;AAC/E;",
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
@@ -32,34 +32,38 @@ var React = __toESM(require("react"));
32
32
  var import_ds_system = require("@elliemae/ds-system");
33
33
  var import_styleHelpers = require("./utils/styleHelpers");
34
34
  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
35
  const StyledCheckBox = (0, import_ds_system.styled)("span")`
48
- width: ${({ theme }) => theme.space.xs};
49
- height: ${({ theme }) => theme.space.xs};
50
- @media (max-width: ${(props) => props.theme.breakpoints.small}) {
51
- width: 24px;
52
- height: 24px;
36
+ ${({ device, theme }) => {
37
+ if (device === "mobile") {
38
+ return `
39
+ width: 24px;
40
+ height: 24px;`;
41
+ }
42
+ if (device === void 0) {
43
+ return `
44
+ @media (max-width: ${theme.breakpoints.small}) {
45
+ width: 24px;
46
+ height: 24px;
47
+ }
48
+ width: ${theme.space.xs};
49
+ height: ${theme.space.xs};
50
+ `;
53
51
  }
52
+ return `
53
+ width: ${theme.space.xs};
54
+ height: ${theme.space.xs};
55
+ `;
56
+ }}
57
+
54
58
  border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
55
59
  border-radius: 2px;
56
60
  position: relative;
57
61
  background: ${({ theme, disabled }) => (0, import_styleHelpers.handleBackgroundColor)(theme, disabled)};
58
- ${({ theme, checked, disabled, readOnly, hasError }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError)}
62
+ ${({ theme, checked, disabled, readOnly, hasError, device }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, false, device)}
59
63
  &:focus-within {
60
64
  ${({ 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
65
  &:hover {
62
- ${({ theme, checked, disabled, readOnly, hasError }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, true)}
66
+ ${({ theme, checked, disabled, readOnly, hasError, device }) => (0, import_styleHelpers.handleCheckmark)(theme, checked, disabled, readOnly, hasError, true, device)}
63
67
  }
64
68
  }
65
69
  &:hover {
@@ -92,7 +96,7 @@ const StyledInputMixed = (0, import_ds_system.styled)("div", {
92
96
  slot: import_exported_related.DSCheckboxSlots.INPUT
93
97
  })`
94
98
  ${checkboxStyles}
95
- ${({ disabled }) => disabled ? `&:hover {
99
+ ${({ "aria-disabled": disabled }) => disabled ? `&:hover {
96
100
  cursor: not-allowed;
97
101
  }` : ""}
98
102
  `;
@@ -105,11 +109,33 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
105
109
  color: ${({ theme, disabled, readOnly }) => disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
106
110
  font-size: 13px;
107
111
  line-height: 13px;
108
- @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
109
- font-size: 16px;
110
- line-height: 16px;
111
- ${({ wrapLabel, theme }) => wrapLabel ? `padding: ${theme.space.xs} 0px ${theme.space.xs} ${theme.space.xs};` : `padding-left: ${theme.space.xs}`};
112
+
113
+ ${({ device, theme, wrapLabel }) => {
114
+ if (device === "mobile") {
115
+ return `
116
+ font-size: 16px;
117
+ line-height: 16px;
118
+ ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
119
+ `;
112
120
  }
121
+ if (device === void 0) {
122
+ return `
123
+ @media (max-width: ${theme.breakpoints.small}) {
124
+ font-size: 16px;
125
+ line-height: 16px;
126
+ ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
127
+ }
128
+
129
+ font-size: 13px;
130
+ line-height: 13px;
131
+ `;
132
+ }
133
+ return `
134
+ font-size: 13px;
135
+ line-height: 13px;
136
+ `;
137
+ }}
138
+
113
139
  display: inherit;
114
140
 
115
141
  ${({ disabled }) => disabled ? `&:hover {
@@ -119,4 +145,29 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
119
145
  }`}
120
146
  `;
121
147
  const StyledWrapLabel = (0, import_ds_system.styled)("span")``;
148
+ const StyledContainer = (0, import_ds_system.styled)("div", {
149
+ name: import_exported_related.DSCheckboxName,
150
+ slot: import_exported_related.DSCheckboxSlots.CONTAINER
151
+ })`
152
+ ${({ device, theme }) => {
153
+ if (device === "mobile") {
154
+ return `
155
+ grid-template-columns: 24px auto;`;
156
+ }
157
+ if (device === void 0) {
158
+ return `
159
+ @media (max-width: ${theme.breakpoints.small}) {
160
+ grid-template-columns: 24px auto;
161
+ }
162
+ grid-template-columns: ${theme.space.xs} auto;
163
+ `;
164
+ }
165
+ return `
166
+ grid-template-columns: ${theme.space.xs} auto;
167
+ `;
168
+ }}
169
+ display: inline-grid;
170
+ grid-template-rows: min-content;
171
+ align-items: center;
172
+ `;
122
173
  //# 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 StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})`\n display: inline-grid;\n grid-template-rows: min-content;\n grid-template-columns: ${({ theme }) => theme.space.xs} auto;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n grid-template-columns: 24px auto;\n }\n align-items: center;\n`;\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n width: ${({ theme }) => theme.space.xs};\n height: ${({ theme }) => theme.space.xs};\n @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: 24px;\n height: 24px;\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 }) => handleCheckmark(theme, checked, disabled, readOnly, hasError)}\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 }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true)}\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 ${({ 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 @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 16px;\n line-height: 16px;\n ${({ wrapLabel, theme }) =>\n wrapLabel\n ? `padding: ${theme.space.xs} 0px ${theme.space.xs} ${theme.space.xs};`\n : `padding-left: ${theme.space.xs}`};\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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAE5B,0BAAuD;AACvD,8BAAgD;AACzC,MAAM,kBAAkB,6BAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA,2BAG0B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,uBAC/B,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAMjD,MAAM,iBAAiB,6BAAO,MAAM;AAAA,WAChC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,YAC1B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,uBAChB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,sBAIpC,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG3F,CAAC,EAAE,OAAO,eAAe,+CAAsB,OAAO,QAAQ;AAAA,IAC1E,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eAAe,yCAAgB,OAAO,SAAS,UAAU,UAAU,QAAQ;AAAA;AAAA,MAEhH,CAAC,EAAE,OAAO,UAAU,eACpB,CAAC,WACG,qBAAqB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM,6BAC5E,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM,UAE3D;AAAA;AAAA,QAEF,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eACvC,yCAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA,kBAIxD,CAAC,EAAE,OAAO,SAAS,eAC/B,CAAC,YAAa,aAAY,WAAW,WAAW,MAAM,OAAO,MAAM,OAAO;AAAA,MAC1E,CAAC,EAAE,OAAO,UAAU,UAAU,eAC9B,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,uBAAuB,MAAM,OAAO,MAAM,SAAS;AAAA;AAAA;AAI/F,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYhB,MAAM,cAAc,6BAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,mBAAmB,6BAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA,IACG;AAAA,IACA,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAGD,MAAM,cAAc,6BAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,wCAAgB;AACxB,CAAC;AAAA,IACG,CAAC,EAAE,WAAW,YAAa,YAAY,8BAA8B,iBAAiB,MAAM,MAAM;AAAA;AAAA,WAE3F,CAAC,EAAE,OAAO,UAAU,eAC3B,YAAY,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,uBAGrD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA,MAGlD,CAAC,EAAE,WAAW,YACd,YACI,YAAY,MAAM,MAAM,UAAU,MAAM,MAAM,MAAM,MAAM,MAAM,QAChE,iBAAiB,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,kBAAkB,6BAAO,MAAM;",
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
  }
package/dist/cjs/utils/styleHelpers.js CHANGED
@@ -38,41 +38,68 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
38
38
  }
39
39
  return colors.brand[500];
40
40
  };
41
- const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false) => {
42
- if (checked === "mixed") {
43
- return `&:before {
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;
41
+ const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false, device = void 0) => {
42
+ const desktopMixedCheckmark = `
43
+ position: absolute;
44
+ content: '';
45
+ top: 6px;
46
+ left: 3px;
47
+ background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
48
+ width: ${theme.space.xxs};
49
+ height: 2px;
50
+ `;
51
+ const normalMixedCheckmark = `
52
+ @media (max-width: ${theme.breakpoints.small}) {
53
+ top:10px;
54
+ left:5px;
55
+ height:2px;
56
+ width:12px;
57
+ }
58
+ ${desktopMixedCheckmark}
59
+ `;
60
+ const mobileMixedCheckmark = `
61
+ ${desktopMixedCheckmark}
62
+ top:10px;
63
+ left:5px;
64
+ height:2px;
65
+ width:12px;
66
+ `;
67
+ const desktopCheckmark = `
68
+ position: absolute;
69
+ content: '';
70
+ top: 3px;
71
+ left: 2px;
72
+ border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
73
+ border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
74
+ height: 5px;
75
+ width: 10px;
76
+ transform: rotate(-45deg);
77
+ `;
78
+ const normalCheckmark = `
51
79
  @media (max-width: ${theme.breakpoints.small}) {
52
- top: 10px;
53
- left: 5px;
54
- height: 2px;
55
- width: 12px;
80
+ top: 5px;
81
+ left: 3px;
82
+ height: 8px;
83
+ width: 17px;
56
84
  }
85
+ ${desktopCheckmark}
86
+ `;
87
+ const mobileCheckmark = `
88
+ ${desktopCheckmark}
89
+ top: 5px;
90
+ left: 3px;
91
+ height: 8px;
92
+ width: 17px;
93
+ `;
94
+ if (checked === "mixed") {
95
+ return `&:before {
96
+ ${device === void 0 ? normalMixedCheckmark : device === "mobile" ? mobileMixedCheckmark : desktopMixedCheckmark}
97
+
57
98
  }`;
58
99
  }
59
100
  if (checked) {
60
101
  return `&:before {
61
- position: absolute;
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
- }
102
+ ${device === void 0 ? normalCheckmark : device === "mobile" ? mobileCheckmark : desktopCheckmark}
76
103
  }`;
77
104
  }
78
105
  return "";
package/dist/cjs/utils/styleHelpers.js.map CHANGED
@@ -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';\n\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): string => {\n if (checked === 'mixed') {\n return `&:before {\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 @media (max-width: ${theme.breakpoints.small}) {\n top: 10px;\n left: 5px;\n height: 2px;\n width: 12px;\n }\n }`;\n }\n if (checked) {\n return `&:before {\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 @media (max-width: ${theme.breakpoints.small}) {\n top: 5px;\n left: 3px;\n height: 8px;\n width: 17px;\n }\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;ADGhB,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,UACF;AACX,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKO,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,aAClF,MAAM,MAAM;AAAA;AAAA,yBAEA,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOzC;AACA,MAAI,SAAS;AACX,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,mCAKwB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,qCAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA,+BAInF,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO/C;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;",
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
  }
package/dist/esm/ControlledCheckbox.js CHANGED
@@ -30,7 +30,8 @@ var __objRest = (source, exclude) => {
30
30
  return target;
31
31
  };
32
32
  import * as React from "react";
33
- import React2, { useRef, useCallback } from "react";
33
+ import React2, { useMemo, useCallback } from "react";
34
+ import { uid } from "uid";
34
35
  import {
35
36
  describe,
36
37
  useGetGlobalAttributes,
@@ -40,14 +41,13 @@ import {
40
41
  import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
41
42
  import { StyledContainer, StyledWrapLabel, StyledInput, StyledLabel, StyledCheckBox, StyledInputMixed } from "./styles";
42
43
  import { propTypes, defaultProps } from "./react-desc-prop-types";
43
- import { setMultipleRefs } from "./utils/setMultipleRefs";
44
44
  import { useValidateProps } from "./config/useValidateProps";
45
45
  const DSControlledCheckbox = (props) => {
46
46
  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
47
47
  useValidateProps(props, propTypes);
48
- const checkboxRef = useRef(null);
49
48
  const {
50
49
  checked,
50
+ device,
51
51
  label,
52
52
  hasError,
53
53
  innerRef,
@@ -55,13 +55,15 @@ const DSControlledCheckbox = (props) => {
55
55
  ariaLabel: legacyAriaLabel,
56
56
  ariaControls: legacyAriaControls
57
57
  } = propsWithDefault;
58
- const handleOnKeyDown = useCallback((e) => {
59
- if (checkboxRef.current && ["Enter", "Space"].includes(e.code)) {
60
- e.preventDefault();
61
- checkboxRef.current.click();
58
+ const handleMixedCheckboxOnKeyDown = useCallback((e) => {
59
+ if (e.code === "Space") {
60
+ const { currentTarget } = e;
61
+ currentTarget.click();
62
62
  }
63
63
  }, []);
64
- const _a = useGetGlobalAttributes(propsWithDefault, { onKeyDown: handleOnKeyDown }), {
64
+ const _a = useGetGlobalAttributes(propsWithDefault, {
65
+ onKeyDown: handleMixedCheckboxOnKeyDown
66
+ }), {
65
67
  id,
66
68
  disabled,
67
69
  readOnly,
@@ -70,7 +72,8 @@ const DSControlledCheckbox = (props) => {
70
72
  "aria-controls": ariaControls,
71
73
  className,
72
74
  onChange,
73
- tabIndex
75
+ tabIndex,
76
+ onKeyDown: userOnKeyDown
74
77
  } = _a, restGlobals = __objRest(_a, [
75
78
  "id",
76
79
  "disabled",
@@ -80,48 +83,51 @@ const DSControlledCheckbox = (props) => {
80
83
  "aria-controls",
81
84
  "className",
82
85
  "onChange",
83
- "tabIndex"
86
+ "tabIndex",
87
+ "onKeyDown"
84
88
  ]);
89
+ const instanceUid = useMemo(() => id || uid(5), [id]);
85
90
  const xstyledProps = useGetXstyledProps(propsWithDefault);
86
91
  const commonProps = __spreadProps(__spreadValues({
87
- onKeyDown: handleOnKeyDown
92
+ "data-testid": "ds-checkbox"
88
93
  }, restGlobals), {
89
- id,
94
+ id: instanceUid,
90
95
  "aria-label": ariaLabel || legacyAriaLabel || label,
91
- "aria-checked": checked,
92
- "data-testid": "ds-checkbox"
96
+ "aria-checked": checked
93
97
  });
94
98
  return /* @__PURE__ */ React2.createElement(StyledContainer, __spreadValues({
99
+ device,
95
100
  "data-testid": "ds-checkbox-container",
96
101
  className
97
102
  }, xstyledProps), /* @__PURE__ */ React2.createElement(StyledCheckBox, {
103
+ device,
98
104
  checked,
99
105
  hasError,
100
106
  disabled,
101
107
  readOnly
102
- }, ariaControls || legacyAriaControls ? /* @__PURE__ */ React2.createElement(StyledInputMixed, __spreadProps(__spreadValues({
108
+ }, ariaControls || legacyAriaControls ? /* @__PURE__ */ React2.createElement(StyledInputMixed, __spreadProps(__spreadValues({}, commonProps), {
103
109
  role: "checkbox",
104
110
  "aria-controls": ariaControls || legacyAriaControls,
105
- disabled
106
- }, commonProps), {
111
+ "aria-disabled": disabled,
107
112
  onClick: !disabled && !readOnly ? onChange : void 0,
113
+ onKeyDown: userOnKeyDown,
108
114
  tabIndex: tabIndex ?? (disabled ? -1 : 0),
109
- ref: (ref) => setMultipleRefs([checkboxRef, innerRef])(ref)
110
- })) : /* @__PURE__ */ React2.createElement(StyledInput, __spreadValues({
111
- ref: (ref) => setMultipleRefs([checkboxRef, innerRef])(ref),
115
+ ref: innerRef
116
+ })) : /* @__PURE__ */ React2.createElement(StyledInput, __spreadProps(__spreadValues({}, commonProps), {
112
117
  type: "checkbox",
113
118
  checked,
114
119
  onChange,
115
120
  disabled,
116
- tabIndex
117
- }, commonProps))), label && /* @__PURE__ */ React2.createElement(StyledLabel, __spreadValues({
118
- htmlFor: id,
121
+ tabIndex,
122
+ ref: innerRef
123
+ }))), label && /* @__PURE__ */ React2.createElement(StyledLabel, __spreadValues({
124
+ htmlFor: instanceUid,
119
125
  disabled,
120
126
  readOnly,
121
127
  checked,
122
- disabled,
123
128
  "data-testid": "ds-checkbox-label",
124
- wrapLabel
129
+ wrapLabel,
130
+ device
125
131
  }, !disabled && (ariaControls || legacyAriaControls) ? { onClick: onChange } : {}), wrapLabel ? /* @__PURE__ */ React2.createElement(StyledWrapLabel, null, label) : /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
126
132
  value: label
127
133
  })));
package/dist/esm/ControlledCheckbox.js.map CHANGED
@@ -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, { useRef, useCallback, WeakValidationMap } from 'react';\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 { setMultipleRefs } from './utils/setMultipleRefs';\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 checkboxRef = useRef<HTMLInputElement>(null);\n const {\n checked,\n label,\n hasError,\n innerRef,\n wrapLabel,\n ariaLabel: legacyAriaLabel,\n ariaControls: legacyAriaControls,\n } = propsWithDefault;\n\n const handleOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (checkboxRef.current && ['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n checkboxRef.current.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 ...restGlobals\n } = useGetGlobalAttributes<DSControlledCheckboxT.Props>(propsWithDefault, { onKeyDown: handleOnKeyDown });\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n const commonProps: Partial<DSControlledCheckboxT.Props> = {\n onKeyDown: handleOnKeyDown,\n ...restGlobals,\n id,\n 'aria-label': ariaLabel || legacyAriaLabel || label,\n 'aria-checked': checked,\n 'data-testid': 'ds-checkbox',\n };\n\n return (\n <StyledContainer data-testid=\"ds-checkbox-container\" className={className} {...xstyledProps}>\n <StyledCheckBox checked={checked} hasError={hasError} disabled={disabled} readOnly={readOnly}>\n {ariaControls || legacyAriaControls ? (\n <StyledInputMixed\n role=\"checkbox\"\n aria-controls={ariaControls || legacyAriaControls}\n disabled={disabled}\n {...commonProps}\n onClick={!disabled && !readOnly ? onChange : undefined}\n tabIndex={tabIndex ?? (disabled ? -1 : 0)}\n ref={(ref) => setMultipleRefs<HTMLInputElement>([checkboxRef, innerRef])(ref)}\n />\n ) : (\n <StyledInput\n ref={(ref) => setMultipleRefs<HTMLInputElement>([checkboxRef, innerRef])(ref)}\n type=\"checkbox\"\n checked={checked}\n onChange={onChange}\n disabled={disabled}\n tabIndex={tabIndex}\n {...commonProps}\n />\n )}\n </StyledCheckBox>\n {label && (\n <StyledLabel\n htmlFor={id}\n disabled={disabled}\n readOnly={readOnly}\n checked={checked}\n disabled={disabled}\n data-testid=\"ds-checkbox-label\"\n wrapLabel={wrapLabel}\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AACA;AAEA,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,mBAAmB,6BAA6B,OAAO,YAAY;AACzE,mBAAiB,OAAO,SAAS;AAEjC,QAAM,cAAc,OAAyB,IAAI;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,MACZ;AAEJ,QAAM,kBAAkB,YAAY,CAAC,MAA2B;AAC9D,QAAI,YAAY,WAAW,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAC9D,QAAE,eAAe;AACjB,kBAAY,QAAQ,MAAM;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAWI,4BAAoD,kBAAkB,EAAE,WAAW,gBAAgB,CAAC,GAVtG;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,MAEE,IADC,wBACD,IADC;AAAA,IATH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,cAAoD;AAAA,IACxD,WAAW;AAAA,KACR,cAFqD;AAAA,IAGxD;AAAA,IACA,cAAc,aAAa,mBAAmB;AAAA,IAC9C,gBAAgB;AAAA,IAChB,eAAe;AAAA,EACjB;AAEA,SACE,qCAAC;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,KAA0B,eAC7E,qCAAC;AAAA,IAAe;AAAA,IAAkB;AAAA,IAAoB;AAAA,IAAoB;AAAA,KACvE,gBAAgB,qBACf,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,iBAAe,gBAAgB;AAAA,IAC/B;AAAA,KACI,cAJL;AAAA,IAKC,SAAS,CAAC,YAAY,CAAC,WAAW,WAAW;AAAA,IAC7C,UAAU,YAAa,YAAW,KAAK;AAAA,IACvC,KAAK,CAAC,QAAQ,gBAAkC,CAAC,aAAa,QAAQ,CAAC,EAAE,GAAG;AAAA,IAC9E,IAEA,qCAAC;AAAA,IACC,KAAK,CAAC,QAAQ,gBAAkC,CAAC,aAAa,QAAQ,CAAC,EAAE,GAAG;AAAA,IAC5E,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KACI,YACN,CAEJ,GACC,SACC,qCAAC;AAAA,IACC,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ;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;",
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
  }
package/dist/esm/react-desc-prop-types.js CHANGED
@@ -29,7 +29,8 @@ const propTypes = __spreadProps(__spreadValues({}, globalAttributesPropTypes), {
29
29
  label: PropTypes.string.description("Checkbox Label property. This label is also going to be used as an aria-label for screen readers."),
30
30
  hasError: PropTypes.bool.description("Whether the checkbox has error or not."),
31
31
  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description("Checkbox input ref."),
32
- wrapLabel: PropTypes.bool.description("Whether to wrap or truncate the label")
32
+ wrapLabel: PropTypes.bool.description("Whether to wrap or truncate the label"),
33
+ device: PropTypes.string.description("Whether to use mobile styling")
33
34
  });
34
35
  export {
35
36
  defaultProps,
package/dist/esm/react-desc-prop-types.js.map CHANGED
@@ -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> | React.LegacyRef<HTMLInputElement>;\n }\n\n export interface LegacyAriaProps {\n ariaControls: string;\n ariaLabel: string;\n }\n\n export interface Props extends DefaultProps, OptionalProps, Omit<GlobalAttributesT, 'checked'>, LegacyAriaProps {}\n\n export interface StyledCheckBoxT {\n checked: boolean | 'mixed';\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean | 'mixed';\n wrapLabel: boolean;\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};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AAoCO,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;AAC/E;",
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
@@ -2,34 +2,38 @@ import * as React from "react";
2
2
  import { styled, css } from "@elliemae/ds-system";
3
3
  import { handleBackgroundColor, handleCheckmark } from "./utils/styleHelpers";
4
4
  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
5
  const StyledCheckBox = styled("span")`
18
- width: ${({ theme }) => theme.space.xs};
19
- height: ${({ theme }) => theme.space.xs};
20
- @media (max-width: ${(props) => props.theme.breakpoints.small}) {
21
- width: 24px;
22
- height: 24px;
6
+ ${({ device, theme }) => {
7
+ if (device === "mobile") {
8
+ return `
9
+ width: 24px;
10
+ height: 24px;`;
11
+ }
12
+ if (device === void 0) {
13
+ return `
14
+ @media (max-width: ${theme.breakpoints.small}) {
15
+ width: 24px;
16
+ height: 24px;
17
+ }
18
+ width: ${theme.space.xs};
19
+ height: ${theme.space.xs};
20
+ `;
23
21
  }
22
+ return `
23
+ width: ${theme.space.xs};
24
+ height: ${theme.space.xs};
25
+ `;
26
+ }}
27
+
24
28
  border: 1px solid ${({ theme, hasError }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
25
29
  border-radius: 2px;
26
30
  position: relative;
27
31
  background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};
28
- ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError)}
32
+ ${({ theme, checked, disabled, readOnly, hasError, device }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, false, device)}
29
33
  &:focus-within {
30
34
  ${({ 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
35
  &:hover {
32
- ${({ theme, checked, disabled, readOnly, hasError }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, true)}
36
+ ${({ theme, checked, disabled, readOnly, hasError, device }) => handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}
33
37
  }
34
38
  }
35
39
  &:hover {
@@ -62,7 +66,7 @@ const StyledInputMixed = styled("div", {
62
66
  slot: DSCheckboxSlots.INPUT
63
67
  })`
64
68
  ${checkboxStyles}
65
- ${({ disabled }) => disabled ? `&:hover {
69
+ ${({ "aria-disabled": disabled }) => disabled ? `&:hover {
66
70
  cursor: not-allowed;
67
71
  }` : ""}
68
72
  `;
@@ -75,11 +79,33 @@ const StyledLabel = styled("label", {
75
79
  color: ${({ theme, disabled, readOnly }) => disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]};
76
80
  font-size: 13px;
77
81
  line-height: 13px;
78
- @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
79
- font-size: 16px;
80
- line-height: 16px;
81
- ${({ wrapLabel, theme }) => wrapLabel ? `padding: ${theme.space.xs} 0px ${theme.space.xs} ${theme.space.xs};` : `padding-left: ${theme.space.xs}`};
82
+
83
+ ${({ device, theme, wrapLabel }) => {
84
+ if (device === "mobile") {
85
+ return `
86
+ font-size: 16px;
87
+ line-height: 16px;
88
+ ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
89
+ `;
82
90
  }
91
+ if (device === void 0) {
92
+ return `
93
+ @media (max-width: ${theme.breakpoints.small}) {
94
+ font-size: 16px;
95
+ line-height: 16px;
96
+ ${wrapLabel ? `padding: 8px 0px 8px 12px;` : `padding-left: ${theme.space.xs}`};
97
+ }
98
+
99
+ font-size: 13px;
100
+ line-height: 13px;
101
+ `;
102
+ }
103
+ return `
104
+ font-size: 13px;
105
+ line-height: 13px;
106
+ `;
107
+ }}
108
+
83
109
  display: inherit;
84
110
 
85
111
  ${({ disabled }) => disabled ? `&:hover {
@@ -89,6 +115,31 @@ const StyledLabel = styled("label", {
89
115
  }`}
90
116
  `;
91
117
  const StyledWrapLabel = styled("span")``;
118
+ const StyledContainer = styled("div", {
119
+ name: DSCheckboxName,
120
+ slot: DSCheckboxSlots.CONTAINER
121
+ })`
122
+ ${({ device, theme }) => {
123
+ if (device === "mobile") {
124
+ return `
125
+ grid-template-columns: 24px auto;`;
126
+ }
127
+ if (device === void 0) {
128
+ return `
129
+ @media (max-width: ${theme.breakpoints.small}) {
130
+ grid-template-columns: 24px auto;
131
+ }
132
+ grid-template-columns: ${theme.space.xs} auto;
133
+ `;
134
+ }
135
+ return `
136
+ grid-template-columns: ${theme.space.xs} auto;
137
+ `;
138
+ }}
139
+ display: inline-grid;
140
+ grid-template-rows: min-content;
141
+ align-items: center;
142
+ `;
92
143
  export {
93
144
  StyledCheckBox,
94
145
  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 StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})`\n display: inline-grid;\n grid-template-rows: min-content;\n grid-template-columns: ${({ theme }) => theme.space.xs} auto;\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n grid-template-columns: 24px auto;\n }\n align-items: center;\n`;\n\nexport const StyledCheckBox = styled('span')<DSControlledCheckboxT.StyledCheckBoxT>`\n width: ${({ theme }) => theme.space.xs};\n height: ${({ theme }) => theme.space.xs};\n @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: 24px;\n height: 24px;\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 }) => handleCheckmark(theme, checked, disabled, readOnly, hasError)}\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 }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true)}\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 ${({ 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 @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 16px;\n line-height: 16px;\n ${({ wrapLabel, theme }) =>\n wrapLabel\n ? `padding: ${theme.space.xs} 0px ${theme.space.xs} ${theme.space.xs};`\n : `padding-left: ${theme.space.xs}`};\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"],
5
- "mappings": "AAAA;ACAA;AAEA;AACA;AACO,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA,2BAG0B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,uBAC/B,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAMjD,MAAM,iBAAiB,OAAO,MAAM;AAAA,WAChC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,YAC1B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,uBAChB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,sBAIpC,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG3F,CAAC,EAAE,OAAO,eAAe,sBAAsB,OAAO,QAAQ;AAAA,IAC1E,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eAAe,gBAAgB,OAAO,SAAS,UAAU,UAAU,QAAQ;AAAA;AAAA,MAEhH,CAAC,EAAE,OAAO,UAAU,eACpB,CAAC,WACG,qBAAqB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM,6BAC5E,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,MAAM,UAE3D;AAAA;AAAA,QAEF,CAAC,EAAE,OAAO,SAAS,UAAU,UAAU,eACvC,gBAAgB,OAAO,SAAS,UAAU,UAAU,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA,kBAIxD,CAAC,EAAE,OAAO,SAAS,eAC/B,CAAC,YAAa,aAAY,WAAW,WAAW,MAAM,OAAO,MAAM,OAAO;AAAA,MAC1E,CAAC,EAAE,OAAO,UAAU,UAAU,eAC9B,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,uBAAuB,MAAM,OAAO,MAAM,SAAS;AAAA;AAAA;AAI/F,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYhB,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG;AAAA,IACA,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAGD,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,IACG,CAAC,EAAE,WAAW,YAAa,YAAY,8BAA8B,iBAAiB,MAAM,MAAM;AAAA;AAAA,WAE3F,CAAC,EAAE,OAAO,UAAU,eAC3B,YAAY,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,uBAGrD,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA,MAGlD,CAAC,EAAE,WAAW,YACd,YACI,YAAY,MAAM,MAAM,UAAU,MAAM,MAAM,MAAM,MAAM,MAAM,QAChE,iBAAiB,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,EAAE,eACH,WACI;AAAA;AAAA,OAGA;AAAA;AAAA;AAAA;AAKD,MAAM,kBAAkB,OAAO,MAAM;",
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
  }
package/dist/esm/utils/styleHelpers.js CHANGED
@@ -11,41 +11,68 @@ const handleCheckMarkColor = ({ colors }, checked, isHovering, disabled, readOnl
11
11
  }
12
12
  return colors.brand[500];
13
13
  };
14
- const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false) => {
15
- if (checked === "mixed") {
16
- return `&:before {
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;
14
+ const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false, device = void 0) => {
15
+ const desktopMixedCheckmark = `
16
+ position: absolute;
17
+ content: '';
18
+ top: 6px;
19
+ left: 3px;
20
+ background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
21
+ width: ${theme.space.xxs};
22
+ height: 2px;
23
+ `;
24
+ const normalMixedCheckmark = `
25
+ @media (max-width: ${theme.breakpoints.small}) {
26
+ top:10px;
27
+ left:5px;
28
+ height:2px;
29
+ width:12px;
30
+ }
31
+ ${desktopMixedCheckmark}
32
+ `;
33
+ const mobileMixedCheckmark = `
34
+ ${desktopMixedCheckmark}
35
+ top:10px;
36
+ left:5px;
37
+ height:2px;
38
+ width:12px;
39
+ `;
40
+ const desktopCheckmark = `
41
+ position: absolute;
42
+ content: '';
43
+ top: 3px;
44
+ left: 2px;
45
+ border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
46
+ border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
47
+ height: 5px;
48
+ width: 10px;
49
+ transform: rotate(-45deg);
50
+ `;
51
+ const normalCheckmark = `
24
52
  @media (max-width: ${theme.breakpoints.small}) {
25
- top: 10px;
26
- left: 5px;
27
- height: 2px;
28
- width: 12px;
53
+ top: 5px;
54
+ left: 3px;
55
+ height: 8px;
56
+ width: 17px;
29
57
  }
58
+ ${desktopCheckmark}
59
+ `;
60
+ const mobileCheckmark = `
61
+ ${desktopCheckmark}
62
+ top: 5px;
63
+ left: 3px;
64
+ height: 8px;
65
+ width: 17px;
66
+ `;
67
+ if (checked === "mixed") {
68
+ return `&:before {
69
+ ${device === void 0 ? normalMixedCheckmark : device === "mobile" ? mobileMixedCheckmark : desktopMixedCheckmark}
70
+
30
71
  }`;
31
72
  }
32
73
  if (checked) {
33
74
  return `&:before {
34
- position: absolute;
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
- }
75
+ ${device === void 0 ? normalCheckmark : device === "mobile" ? mobileCheckmark : desktopCheckmark}
49
76
  }`;
50
77
  }
51
78
  return "";
package/dist/esm/utils/styleHelpers.js.map CHANGED
@@ -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';\n\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): string => {\n if (checked === 'mixed') {\n return `&:before {\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 @media (max-width: ${theme.breakpoints.small}) {\n top: 10px;\n left: 5px;\n height: 2px;\n width: 12px;\n }\n }`;\n }\n if (checked) {\n return `&:before {\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 @media (max-width: ${theme.breakpoints.small}) {\n top: 5px;\n left: 3px;\n height: 8px;\n width: 17px;\n }\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;ACGO,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,UACF;AACX,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKO,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,aAClF,MAAM,MAAM;AAAA;AAAA,yBAEA,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOzC;AACA,MAAI,SAAS;AACX,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,mCAKwB,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA,qCAC3E,qBAAqB,OAAO,SAAS,YAAY,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA,+BAInF,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO/C;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;",
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.0-rc.4",
3
+ "version": "3.2.1-rc.1",
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.0-rc.4",
39
- "@elliemae/ds-truncated-tooltip-text": "3.2.0-rc.4",
40
- "@elliemae/ds-utilities": "3.2.0-rc.4"
38
+ "@elliemae/ds-system": "3.2.1-rc.1",
39
+ "@elliemae/ds-truncated-tooltip-text": "3.2.1-rc.1",
40
+ "@elliemae/ds-utilities": "3.2.1-rc.1"
41
41
  },
42
42
  "devDependencies": {
43
43
  "@elliemae/pui-theme": "~2.6.0",
package/dist/cjs/utils/setMultipleRefs.js DELETED
@@ -1,38 +0,0 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __export = (target, all) => {
8
- for (var name in all)
9
- __defProp(target, name, { get: all[name], enumerable: true });
10
- };
11
- var __copyProps = (to, from, except, desc) => {
12
- if (from && typeof from === "object" || typeof from === "function") {
13
- for (let key of __getOwnPropNames(from))
14
- if (!__hasOwnProp.call(to, key) && key !== except)
15
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
- }
17
- return to;
18
- };
19
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
20
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
21
- var setMultipleRefs_exports = {};
22
- __export(setMultipleRefs_exports, {
23
- setMultipleRefs: () => setMultipleRefs
24
- });
25
- module.exports = __toCommonJS(setMultipleRefs_exports);
26
- var React = __toESM(require("react"));
27
- function setMultipleRefs(refs) {
28
- return (value) => {
29
- refs.forEach((ref) => {
30
- if (typeof ref === "function") {
31
- ref(value);
32
- } else if (ref != null) {
33
- ref.current = value;
34
- }
35
- });
36
- };
37
- }
38
- //# sourceMappingURL=setMultipleRefs.js.map
package/dist/cjs/utils/setMultipleRefs.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/utils/setMultipleRefs.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export function setMultipleRefs<T = unknown>(\n refs: Array<React.RefObject<T> | React.LegacyRef<T>>,\n): React.RefCallback<T> {\n return (value) => {\n refs.forEach((ref) => {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref != null) {\n (ref as React.MutableRefObject<T | null>).current = value;\n }\n });\n };\n}\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,yBACL,MACsB;AACtB,SAAO,CAAC,UAAU;AAChB,SAAK,QAAQ,CAAC,QAAQ;AACpB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,KAAK;AAAA,MACX,WAAW,OAAO,MAAM;AACtB,QAAC,IAAyC,UAAU;AAAA,MACtD;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
6
- "names": []
7
- }
package/dist/esm/utils/setMultipleRefs.js DELETED
@@ -1,16 +0,0 @@
1
- import * as React from "react";
2
- function setMultipleRefs(refs) {
3
- return (value) => {
4
- refs.forEach((ref) => {
5
- if (typeof ref === "function") {
6
- ref(value);
7
- } else if (ref != null) {
8
- ref.current = value;
9
- }
10
- });
11
- };
12
- }
13
- export {
14
- setMultipleRefs
15
- };
16
- //# sourceMappingURL=setMultipleRefs.js.map
package/dist/esm/utils/setMultipleRefs.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/setMultipleRefs.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export function setMultipleRefs<T = unknown>(\n refs: Array<React.RefObject<T> | React.LegacyRef<T>>,\n): React.RefCallback<T> {\n return (value) => {\n refs.forEach((ref) => {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref != null) {\n (ref as React.MutableRefObject<T | null>).current = value;\n }\n });\n };\n}\n"],
5
- "mappings": "AAAA;ACAO,yBACL,MACsB;AACtB,SAAO,CAAC,UAAU;AAChB,SAAK,QAAQ,CAAC,QAAQ;AACpB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,KAAK;AAAA,MACX,WAAW,OAAO,MAAM;AACtB,QAAC,IAAyC,UAAU;AAAA,MACtD;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
6
- "names": []
7
- }