@elliemae/ds-form-checkbox 3.5.0-rc.9 → 3.6.0-next.0

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 (9) hide show
  1. package/dist/cjs/ControlledCheckbox.js +58 -38
  2. package/dist/cjs/ControlledCheckbox.js.map +3 -3
  3. package/dist/cjs/react-desc-prop-types.js +4 -0
  4. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  5. package/dist/esm/ControlledCheckbox.js +58 -38
  6. package/dist/esm/ControlledCheckbox.js.map +3 -3
  7. package/dist/esm/react-desc-prop-types.js +4 -0
  8. package/dist/esm/react-desc-prop-types.js.map +2 -2
  9. package/package.json +4 -4
package/dist/cjs/ControlledCheckbox.js CHANGED
@@ -29,7 +29,8 @@ __export(ControlledCheckbox_exports, {
29
29
  });
30
30
  module.exports = __toCommonJS(ControlledCheckbox_exports);
31
31
  var React = __toESM(require("react"));
32
- var import_react = __toESM(require("react"));
32
+ var import_jsx_runtime = require("react/jsx-runtime");
33
+ var import_react = require("react");
33
34
  var import_uid = require("uid");
34
35
  var import_ds_utilities = require("@elliemae/ds-utilities");
35
36
  var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
@@ -72,6 +73,17 @@ const DSControlledCheckbox = (props) => {
72
73
  onKeyDown: handleMixedCheckboxOnKeyDown
73
74
  });
74
75
  const instanceUid = (0, import_react.useMemo)(() => id || (0, import_uid.uid)(5), [id]);
76
+ const onChangeValue = (0, import_react.useCallback)(
77
+ (e) => {
78
+ if (checked === "mixed")
79
+ onChange(true, e);
80
+ if (checked === true)
81
+ onChange(false, e);
82
+ if (checked === false)
83
+ onChange(true, e);
84
+ },
85
+ [checked, onChange]
86
+ );
75
87
  const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
76
88
  const commonProps = {
77
89
  "data-testid": "ds-checkbox",
@@ -80,46 +92,54 @@ const DSControlledCheckbox = (props) => {
80
92
  "aria-label": ariaLabel || legacyAriaLabel || label,
81
93
  "aria-checked": checked
82
94
  };
83
- return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer, {
95
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledContainer, {
84
96
  device,
85
97
  "data-testid": "ds-checkbox-container",
86
98
  className,
87
- ...xstyledProps
88
- }, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledCheckBox, {
89
- device,
90
- checked,
91
- hasError,
92
- disabled,
93
- readOnly
94
- }, ariaControls || legacyAriaControls ? /* @__PURE__ */ import_react.default.createElement(import_styles.StyledInputMixed, {
95
- ...commonProps,
96
- role: "checkbox",
97
- "aria-controls": ariaControls || legacyAriaControls,
98
- "aria-disabled": disabled,
99
- onClick: !disabled && !readOnly ? onChange : void 0,
100
- onKeyDown: userOnKeyDown,
101
- tabIndex: tabIndex ?? (disabled ? -1 : 0),
102
- ref: innerRef
103
- }) : /* @__PURE__ */ import_react.default.createElement(import_styles.StyledInput, {
104
- ...commonProps,
105
- type: "checkbox",
106
- checked,
107
- onChange,
108
- disabled,
109
- tabIndex,
110
- ref: innerRef
111
- })), label && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel, {
112
- htmlFor: instanceUid,
113
- disabled,
114
- readOnly,
115
- checked,
116
- "data-testid": "ds-checkbox-label",
117
- wrapLabel,
118
- device,
119
- ...!disabled && (ariaControls || legacyAriaControls) ? { onClick: onChange } : {}
120
- }, wrapLabel ? /* @__PURE__ */ import_react.default.createElement(import_styles.StyledWrapLabel, null, label) : /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
121
- value: label
122
- })));
99
+ ...xstyledProps,
100
+ children: [
101
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCheckBox, {
102
+ device,
103
+ checked,
104
+ hasError,
105
+ disabled,
106
+ readOnly,
107
+ children: ariaControls || legacyAriaControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledInputMixed, {
108
+ ...commonProps,
109
+ role: "checkbox",
110
+ "aria-controls": ariaControls || legacyAriaControls,
111
+ "aria-disabled": disabled,
112
+ onClick: !disabled && !readOnly ? onChangeValue : void 0,
113
+ onKeyDown: userOnKeyDown,
114
+ tabIndex: tabIndex ?? (disabled ? -1 : 0),
115
+ ref: innerRef
116
+ }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledInput, {
117
+ ...commonProps,
118
+ type: "checkbox",
119
+ checked,
120
+ onChange: onChangeValue,
121
+ disabled,
122
+ tabIndex,
123
+ ref: innerRef
124
+ })
125
+ }),
126
+ label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledLabel, {
127
+ htmlFor: instanceUid,
128
+ disabled,
129
+ readOnly,
130
+ checked,
131
+ "data-testid": "ds-checkbox-label",
132
+ wrapLabel,
133
+ device,
134
+ ...!disabled && (ariaControls || legacyAriaControls) ? { onClick: onChangeValue } : {},
135
+ children: wrapLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledWrapLabel, {
136
+ children: label
137
+ }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
138
+ value: label
139
+ })
140
+ })
141
+ ]
142
+ });
123
143
  };
124
144
  DSControlledCheckbox.propTypes = import_react_desc_prop_types.propTypes;
125
145
  DSControlledCheckbox.displayName = "DSControlledCheckbox";
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, { 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 e.preventDefault(); // when selecting a checkbox we don't want to scroll for example\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,uBAAmB,kDAA6B,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,EAChB,IAAI;AAEJ,QAAM,mCAA+B,0BAAY,CAAC,MAA2C;AAC3F,QAAI,EAAE,SAAS,SAAS;AACtB,YAAM,EAAE,cAAc,IAAuC;AAC7D,oBAAc,MAAM;AACpB,QAAE,eAAe;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,OACR;AAAA,EACL,QAAI,4CAAoD,kBAAkB;AAAA,IACxE,WAAW;AAAA,EACb,CAAC;AAED,QAAM,kBAAc,sBAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,QAAM,mBAAe,wCAAmB,gBAAgB;AAExD,QAAM,cAAoD;AAAA,IACxD,eAAe;AAAA,IACf,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,cAAc,aAAa,mBAAmB;AAAA,IAC9C,gBAAgB;AAAA,EAClB;AAEA,SACE,6BAAAA,QAAA,cAAC;AAAA,IAAgB;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,IAAuB,GAAG;AAAA,KAC7F,6BAAAA,QAAA,cAAC;AAAA,IAAe;AAAA,IAAgB;AAAA,IAAkB;AAAA,IAAoB;AAAA,IAAoB;AAAA,KACvF,gBAAgB,qBACf,6BAAAA,QAAA,cAAC;AAAA,IACE,GAAG;AAAA,IACJ,MAAK;AAAA,IACL,iBAAe,gBAAgB;AAAA,IAC/B,iBAAe;AAAA,IACf,SAAS,CAAC,YAAY,CAAC,WAAW,WAAW;AAAA,IAC7C,WAAW;AAAA,IACX,UAAU,aAAa,WAAW,KAAK;AAAA,IACvC,KAAK;AAAA,GACP,IAEA,6BAAAA,QAAA,cAAC;AAAA,IACE,GAAG;AAAA,IACJ,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,GACP,CAEJ,GACC,SACC,6BAAAA,QAAA,cAAC;AAAA,IACC,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,SAAS,IAAI,CAAC;AAAA,KAEjF,YAAY,6BAAAA,QAAA,cAAC,qCAAiB,KAAM,IAAqB,6BAAAA,QAAA,cAAC;AAAA,IAA2B,OAAO;AAAA,GAAO,CACtG,CAEJ;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,qCAAiC,8BAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
6
- "names": ["React"]
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 e.preventDefault(); // when selecting a checkbox we don't want to scroll for example\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 onChangeValue = useCallback(\n (e: Event) => {\n if (checked === 'mixed') onChange(true, e);\n if (checked === true) onChange(false, e);\n if (checked === false) onChange(true, e);\n },\n [checked, onChange],\n );\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 ? onChangeValue : 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={onChangeValue}\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: onChangeValue } : {})}\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;ADAvB;AACA,mBAA+D;AAC/D,iBAAoB;AAEpB,0BAKO;AACP,uCAA2C;AAC3C,oBAA6G;AAC7G,mCAA+D;AAC/D,8BAAiC;AAEjC,MAAM,uBAAyE,CAAC,UAAU;AACxF,QAAM,uBAAmB,kDAA6B,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,EAChB,IAAI;AAEJ,QAAM,mCAA+B,0BAAY,CAAC,MAA2C;AAC3F,QAAI,EAAE,SAAS,SAAS;AACtB,YAAM,EAAE,cAAc,IAAuC;AAC7D,oBAAc,MAAM;AACpB,QAAE,eAAe;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,OACR;AAAA,EACL,QAAI,4CAAoD,kBAAkB;AAAA,IACxE,WAAW;AAAA,EACb,CAAC;AAED,QAAM,kBAAc,sBAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAa;AACZ,UAAI,YAAY;AAAS,iBAAS,MAAM,CAAC;AACzC,UAAI,YAAY;AAAM,iBAAS,OAAO,CAAC;AACvC,UAAI,YAAY;AAAO,iBAAS,MAAM,CAAC;AAAA,IACzC;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEA,QAAM,mBAAe,wCAAmB,gBAAgB;AAExD,QAAM,cAAoD;AAAA,IACxD,eAAe;AAAA,IACf,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,cAAc,aAAa,mBAAmB;AAAA,IAC9C,gBAAgB;AAAA,EAClB;AAEA,SACE,6CAAC;AAAA,IAAgB;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,IAAuB,GAAG;AAAA,IAC7F;AAAA,kDAAC;AAAA,QAAe;AAAA,QAAgB;AAAA,QAAkB;AAAA,QAAoB;AAAA,QAAoB;AAAA,QACvF,0BAAgB,qBACf,4CAAC;AAAA,UACE,GAAG;AAAA,UACJ,MAAK;AAAA,UACL,iBAAe,gBAAgB;AAAA,UAC/B,iBAAe;AAAA,UACf,SAAS,CAAC,YAAY,CAAC,WAAW,gBAAgB;AAAA,UAClD,WAAW;AAAA,UACX,UAAU,aAAa,WAAW,KAAK;AAAA,UACvC,KAAK;AAAA,SACP,IAEA,4CAAC;AAAA,UACE,GAAG;AAAA,UACJ,MAAK;AAAA,UACL;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,KAAK;AAAA,SACP;AAAA,OAEJ;AAAA,MACC,SACC,4CAAC;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,cAAc,IAAI,CAAC;AAAA,QAEtF,sBAAY,4CAAC;AAAA,UAAiB;AAAA,SAAM,IAAqB,4CAAC;AAAA,UAA2B,OAAO;AAAA,SAAO;AAAA,OACtG;AAAA;AAAA,GAEJ;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,qCAAiC,8BAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
6
+ "names": []
7
7
  }
package/dist/cjs/react-desc-prop-types.js CHANGED
@@ -42,8 +42,12 @@ const propTypes = {
42
42
  label: import_ds_utilities.PropTypes.string.description(
43
43
  "Checkbox Label property. This label is also going to be used as an aria-label for screen readers."
44
44
  ),
45
+ checked: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.bool, import_ds_utilities.PropTypes.string]).description(
46
+ "Wheter the checkbox is set as bool or mixed"
47
+ ),
45
48
  hasError: import_ds_utilities.PropTypes.bool.description("Whether the checkbox has error or not."),
46
49
  innerRef: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.func, import_ds_utilities.PropTypes.object]).description("Checkbox input ref."),
50
+ onChange: import_ds_utilities.PropTypes.func.description("function executed when the checkbox changes"),
47
51
  wrapLabel: import_ds_utilities.PropTypes.bool.description("Whether to wrap or truncate the label"),
48
52
  device: import_ds_utilities.PropTypes.string.description("Whether to use mobile styling")
49
53
  };
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>;\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 Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps>,\n LegacyAriaProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps>,\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 onKeyDown: () => null,\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;AAkDjE,MAAM,eAAqD;AAAA,EAChE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW,MAAM;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,OAAO,8BAAU,OAAO;AAAA,IACtB;AAAA,EACF;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;",
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 Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps>,\n LegacyAriaProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps>,\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 onKeyDown: () => null,\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 checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).description(\n 'Wheter the checkbox is set as bool or mixed',\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 onChange: PropTypes.func.description('function executed when the checkbox changes'),\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;AAkDjE,MAAM,eAAqD;AAAA,EAChE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW,MAAM;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,OAAO,8BAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,SAAS,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAAE;AAAA,IAC/D;AAAA,EACF;AAAA,EACA,UAAU,8BAAU,KAAK,YAAY,wCAAwC;AAAA,EAC7E,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,CAAC,EAAE,YAAY,qBAAqB;AAAA,EACnG,UAAU,8BAAU,KAAK,YAAY,6CAA6C;AAAA,EAClF,WAAW,8BAAU,KAAK,YAAY,uCAAuC;AAAA,EAC7E,QAAQ,8BAAU,OAAO,YAAY,+BAA+B;AACtE;",
6
6
  "names": []
7
7
  }
package/dist/esm/ControlledCheckbox.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from "react";
2
- import React2, { useMemo, useCallback } from "react";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { useMemo, useCallback } from "react";
3
4
  import { uid } from "uid";
4
5
  import {
5
6
  describe,
@@ -47,6 +48,17 @@ const DSControlledCheckbox = (props) => {
47
48
  onKeyDown: handleMixedCheckboxOnKeyDown
48
49
  });
49
50
  const instanceUid = useMemo(() => id || uid(5), [id]);
51
+ const onChangeValue = useCallback(
52
+ (e) => {
53
+ if (checked === "mixed")
54
+ onChange(true, e);
55
+ if (checked === true)
56
+ onChange(false, e);
57
+ if (checked === false)
58
+ onChange(true, e);
59
+ },
60
+ [checked, onChange]
61
+ );
50
62
  const xstyledProps = useGetXstyledProps(propsWithDefault);
51
63
  const commonProps = {
52
64
  "data-testid": "ds-checkbox",
@@ -55,46 +67,54 @@ const DSControlledCheckbox = (props) => {
55
67
  "aria-label": ariaLabel || legacyAriaLabel || label,
56
68
  "aria-checked": checked
57
69
  };
58
- return /* @__PURE__ */ React2.createElement(StyledContainer, {
70
+ return /* @__PURE__ */ jsxs(StyledContainer, {
59
71
  device,
60
72
  "data-testid": "ds-checkbox-container",
61
73
  className,
62
- ...xstyledProps
63
- }, /* @__PURE__ */ React2.createElement(StyledCheckBox, {
64
- device,
65
- checked,
66
- hasError,
67
- disabled,
68
- readOnly
69
- }, ariaControls || legacyAriaControls ? /* @__PURE__ */ React2.createElement(StyledInputMixed, {
70
- ...commonProps,
71
- role: "checkbox",
72
- "aria-controls": ariaControls || legacyAriaControls,
73
- "aria-disabled": disabled,
74
- onClick: !disabled && !readOnly ? onChange : void 0,
75
- onKeyDown: userOnKeyDown,
76
- tabIndex: tabIndex ?? (disabled ? -1 : 0),
77
- ref: innerRef
78
- }) : /* @__PURE__ */ React2.createElement(StyledInput, {
79
- ...commonProps,
80
- type: "checkbox",
81
- checked,
82
- onChange,
83
- disabled,
84
- tabIndex,
85
- ref: innerRef
86
- })), label && /* @__PURE__ */ React2.createElement(StyledLabel, {
87
- htmlFor: instanceUid,
88
- disabled,
89
- readOnly,
90
- checked,
91
- "data-testid": "ds-checkbox-label",
92
- wrapLabel,
93
- device,
94
- ...!disabled && (ariaControls || legacyAriaControls) ? { onClick: onChange } : {}
95
- }, wrapLabel ? /* @__PURE__ */ React2.createElement(StyledWrapLabel, null, label) : /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
96
- value: label
97
- })));
74
+ ...xstyledProps,
75
+ children: [
76
+ /* @__PURE__ */ jsx(StyledCheckBox, {
77
+ device,
78
+ checked,
79
+ hasError,
80
+ disabled,
81
+ readOnly,
82
+ children: ariaControls || legacyAriaControls ? /* @__PURE__ */ jsx(StyledInputMixed, {
83
+ ...commonProps,
84
+ role: "checkbox",
85
+ "aria-controls": ariaControls || legacyAriaControls,
86
+ "aria-disabled": disabled,
87
+ onClick: !disabled && !readOnly ? onChangeValue : void 0,
88
+ onKeyDown: userOnKeyDown,
89
+ tabIndex: tabIndex ?? (disabled ? -1 : 0),
90
+ ref: innerRef
91
+ }) : /* @__PURE__ */ jsx(StyledInput, {
92
+ ...commonProps,
93
+ type: "checkbox",
94
+ checked,
95
+ onChange: onChangeValue,
96
+ disabled,
97
+ tabIndex,
98
+ ref: innerRef
99
+ })
100
+ }),
101
+ label && /* @__PURE__ */ jsx(StyledLabel, {
102
+ htmlFor: instanceUid,
103
+ disabled,
104
+ readOnly,
105
+ checked,
106
+ "data-testid": "ds-checkbox-label",
107
+ wrapLabel,
108
+ device,
109
+ ...!disabled && (ariaControls || legacyAriaControls) ? { onClick: onChangeValue } : {},
110
+ children: wrapLabel ? /* @__PURE__ */ jsx(StyledWrapLabel, {
111
+ children: label
112
+ }) : /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, {
113
+ value: label
114
+ })
115
+ })
116
+ ]
117
+ });
98
118
  };
99
119
  DSControlledCheckbox.propTypes = propTypes;
100
120
  DSControlledCheckbox.displayName = "DSControlledCheckbox";
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, { 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 e.preventDefault(); // when selecting a checkbox we don't want to scroll for example\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,YAAY,WAAW;ACCvB,OAAOA,UAAS,SAAS,mBAAsC;AAC/D,SAAS,WAAW;AAEpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB,iBAAiB,aAAa,aAAa,gBAAgB,wBAAwB;AAC7G,SAAgC,WAAW,oBAAoB;AAC/D,SAAS,wBAAwB;AAEjC,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,EAChB,IAAI;AAEJ,QAAM,+BAA+B,YAAY,CAAC,MAA2C;AAC3F,QAAI,EAAE,SAAS,SAAS;AACtB,YAAM,EAAE,cAAc,IAAuC;AAC7D,oBAAc,MAAM;AACpB,QAAE,eAAe;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,OACR;AAAA,EACL,IAAI,uBAAoD,kBAAkB;AAAA,IACxE,WAAW;AAAA,EACb,CAAC;AAED,QAAM,cAAc,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,cAAoD;AAAA,IACxD,eAAe;AAAA,IACf,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,cAAc,aAAa,mBAAmB;AAAA,IAC9C,gBAAgB;AAAA,EAClB;AAEA,SACE,gBAAAA,OAAA,cAAC;AAAA,IAAgB;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,IAAuB,GAAG;AAAA,KAC7F,gBAAAA,OAAA,cAAC;AAAA,IAAe;AAAA,IAAgB;AAAA,IAAkB;AAAA,IAAoB;AAAA,IAAoB;AAAA,KACvF,gBAAgB,qBACf,gBAAAA,OAAA,cAAC;AAAA,IACE,GAAG;AAAA,IACJ,MAAK;AAAA,IACL,iBAAe,gBAAgB;AAAA,IAC/B,iBAAe;AAAA,IACf,SAAS,CAAC,YAAY,CAAC,WAAW,WAAW;AAAA,IAC7C,WAAW;AAAA,IACX,UAAU,aAAa,WAAW,KAAK;AAAA,IACvC,KAAK;AAAA,GACP,IAEA,gBAAAA,OAAA,cAAC;AAAA,IACE,GAAG;AAAA,IACJ,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,GACP,CAEJ,GACC,SACC,gBAAAA,OAAA,cAAC;AAAA,IACC,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,SAAS,IAAI,CAAC;AAAA,KAEjF,YAAY,gBAAAA,OAAA,cAAC,uBAAiB,KAAM,IAAqB,gBAAAA,OAAA,cAAC;AAAA,IAA2B,OAAO;AAAA,GAAO,CACtG,CAEJ;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,SAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
6
- "names": ["React"]
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 e.preventDefault(); // when selecting a checkbox we don't want to scroll for example\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 onChangeValue = useCallback(\n (e: Event) => {\n if (checked === 'mixed') onChange(true, e);\n if (checked === true) onChange(false, e);\n if (checked === false) onChange(true, e);\n },\n [checked, onChange],\n );\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 ? onChangeValue : 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={onChangeValue}\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: onChangeValue } : {})}\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,YAAY,WAAW;ACAvB;AACA,SAAgB,SAAS,mBAAsC;AAC/D,SAAS,WAAW;AAEpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB,iBAAiB,aAAa,aAAa,gBAAgB,wBAAwB;AAC7G,SAAgC,WAAW,oBAAoB;AAC/D,SAAS,wBAAwB;AAEjC,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,EAChB,IAAI;AAEJ,QAAM,+BAA+B,YAAY,CAAC,MAA2C;AAC3F,QAAI,EAAE,SAAS,SAAS;AACtB,YAAM,EAAE,cAAc,IAAuC;AAC7D,oBAAc,MAAM;AACpB,QAAE,eAAe;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,OACR;AAAA,EACL,IAAI,uBAAoD,kBAAkB;AAAA,IACxE,WAAW;AAAA,EACb,CAAC;AAED,QAAM,cAAc,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAa;AACZ,UAAI,YAAY;AAAS,iBAAS,MAAM,CAAC;AACzC,UAAI,YAAY;AAAM,iBAAS,OAAO,CAAC;AACvC,UAAI,YAAY;AAAO,iBAAS,MAAM,CAAC;AAAA,IACzC;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEA,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,cAAoD;AAAA,IACxD,eAAe;AAAA,IACf,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,cAAc,aAAa,mBAAmB;AAAA,IAC9C,gBAAgB;AAAA,EAClB;AAEA,SACE,qBAAC;AAAA,IAAgB;AAAA,IAAgB,eAAY;AAAA,IAAwB;AAAA,IAAuB,GAAG;AAAA,IAC7F;AAAA,0BAAC;AAAA,QAAe;AAAA,QAAgB;AAAA,QAAkB;AAAA,QAAoB;AAAA,QAAoB;AAAA,QACvF,0BAAgB,qBACf,oBAAC;AAAA,UACE,GAAG;AAAA,UACJ,MAAK;AAAA,UACL,iBAAe,gBAAgB;AAAA,UAC/B,iBAAe;AAAA,UACf,SAAS,CAAC,YAAY,CAAC,WAAW,gBAAgB;AAAA,UAClD,WAAW;AAAA,UACX,UAAU,aAAa,WAAW,KAAK;AAAA,UACvC,KAAK;AAAA,SACP,IAEA,oBAAC;AAAA,UACE,GAAG;AAAA,UACJ,MAAK;AAAA,UACL;AAAA,UACA,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,KAAK;AAAA,SACP;AAAA,OAEJ;AAAA,MACC,SACC,oBAAC;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,cAAc,IAAI,CAAC;AAAA,QAEtF,sBAAY,oBAAC;AAAA,UAAiB;AAAA,SAAM,IAAqB,oBAAC;AAAA,UAA2B,OAAO;AAAA,SAAO;AAAA,OACtG;AAAA;AAAA,GAEJ;AAEJ;AAEA,qBAAqB,YAAY;AACjC,qBAAqB,cAAc;AACnC,MAAM,iCAAiC,SAAS,oBAAoB;AACpE,+BAA+B,YAAY;",
6
+ "names": []
7
7
  }
package/dist/esm/react-desc-prop-types.js CHANGED
@@ -12,8 +12,12 @@ const propTypes = {
12
12
  label: PropTypes.string.description(
13
13
  "Checkbox Label property. This label is also going to be used as an aria-label for screen readers."
14
14
  ),
15
+ checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).description(
16
+ "Wheter the checkbox is set as bool or mixed"
17
+ ),
15
18
  hasError: PropTypes.bool.description("Whether the checkbox has error or not."),
16
19
  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description("Checkbox input ref."),
20
+ onChange: PropTypes.func.description("function executed when the checkbox changes"),
17
21
  wrapLabel: PropTypes.bool.description("Whether to wrap or truncate the label"),
18
22
  device: PropTypes.string.description("Whether to use mobile styling")
19
23
  };
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>;\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 Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps>,\n LegacyAriaProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps>,\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 onKeyDown: () => null,\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,YAAY,WAAW;ACCvB,SAA4B,WAAW,iCAAiC;AAkDjE,MAAM,eAAqD;AAAA,EAChE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW,MAAM;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,OAAO,UAAU,OAAO;AAAA,IACtB;AAAA,EACF;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;",
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 Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps>,\n LegacyAriaProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps>,\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 onKeyDown: () => null,\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 checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).description(\n 'Wheter the checkbox is set as bool or mixed',\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 onChange: PropTypes.func.description('function executed when the checkbox changes'),\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,YAAY,WAAW;ACCvB,SAA4B,WAAW,iCAAiC;AAkDjE,MAAM,eAAqD;AAAA,EAChE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW,MAAM;AACnB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,OAAO,UAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,SAAS,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE;AAAA,IAC/D;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,wCAAwC;AAAA,EAC7E,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,qBAAqB;AAAA,EACnG,UAAU,UAAU,KAAK,YAAY,6CAA6C;AAAA,EAClF,WAAW,UAAU,KAAK,YAAY,uCAAuC;AAAA,EAC7E,QAAQ,UAAU,OAAO,YAAY,+BAA+B;AACtE;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-checkbox",
3
- "version": "3.5.0-rc.9",
3
+ "version": "3.6.0-next.0",
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.5.0-rc.9",
39
- "@elliemae/ds-truncated-tooltip-text": "3.5.0-rc.9",
40
- "@elliemae/ds-utilities": "3.5.0-rc.9"
38
+ "@elliemae/ds-system": "3.6.0-next.0",
39
+ "@elliemae/ds-truncated-tooltip-text": "3.6.0-next.0",
40
+ "@elliemae/ds-utilities": "3.6.0-next.0"
41
41
  },
42
42
  "devDependencies": {
43
43
  "@elliemae/pui-theme": "~2.6.0",