@elliemae/ds-form-checkbox 3.5.1-rc.1 → 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.
- package/dist/cjs/ControlledCheckbox.js +14 -3
- package/dist/cjs/ControlledCheckbox.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +4 -0
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/ControlledCheckbox.js +14 -3
- package/dist/esm/ControlledCheckbox.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +4 -0
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/package.json +4 -4
|
@@ -73,6 +73,17 @@ const DSControlledCheckbox = (props) => {
|
|
|
73
73
|
onKeyDown: handleMixedCheckboxOnKeyDown
|
|
74
74
|
});
|
|
75
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
|
+
);
|
|
76
87
|
const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
|
|
77
88
|
const commonProps = {
|
|
78
89
|
"data-testid": "ds-checkbox",
|
|
@@ -98,7 +109,7 @@ const DSControlledCheckbox = (props) => {
|
|
|
98
109
|
role: "checkbox",
|
|
99
110
|
"aria-controls": ariaControls || legacyAriaControls,
|
|
100
111
|
"aria-disabled": disabled,
|
|
101
|
-
onClick: !disabled && !readOnly ?
|
|
112
|
+
onClick: !disabled && !readOnly ? onChangeValue : void 0,
|
|
102
113
|
onKeyDown: userOnKeyDown,
|
|
103
114
|
tabIndex: tabIndex ?? (disabled ? -1 : 0),
|
|
104
115
|
ref: innerRef
|
|
@@ -106,7 +117,7 @@ const DSControlledCheckbox = (props) => {
|
|
|
106
117
|
...commonProps,
|
|
107
118
|
type: "checkbox",
|
|
108
119
|
checked,
|
|
109
|
-
onChange,
|
|
120
|
+
onChange: onChangeValue,
|
|
110
121
|
disabled,
|
|
111
122
|
tabIndex,
|
|
112
123
|
ref: innerRef
|
|
@@ -120,7 +131,7 @@ const DSControlledCheckbox = (props) => {
|
|
|
120
131
|
"data-testid": "ds-checkbox-label",
|
|
121
132
|
wrapLabel,
|
|
122
133
|
device,
|
|
123
|
-
...!disabled && (ariaControls || legacyAriaControls) ? { onClick:
|
|
134
|
+
...!disabled && (ariaControls || legacyAriaControls) ? { onClick: onChangeValue } : {},
|
|
124
135
|
children: wrapLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledWrapLabel, {
|
|
125
136
|
children: label
|
|
126
137
|
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
|
|
@@ -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 ?
|
|
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,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,
|
|
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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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
|
};
|
|
@@ -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
|
}
|
|
@@ -48,6 +48,17 @@ const DSControlledCheckbox = (props) => {
|
|
|
48
48
|
onKeyDown: handleMixedCheckboxOnKeyDown
|
|
49
49
|
});
|
|
50
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
|
+
);
|
|
51
62
|
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
|
52
63
|
const commonProps = {
|
|
53
64
|
"data-testid": "ds-checkbox",
|
|
@@ -73,7 +84,7 @@ const DSControlledCheckbox = (props) => {
|
|
|
73
84
|
role: "checkbox",
|
|
74
85
|
"aria-controls": ariaControls || legacyAriaControls,
|
|
75
86
|
"aria-disabled": disabled,
|
|
76
|
-
onClick: !disabled && !readOnly ?
|
|
87
|
+
onClick: !disabled && !readOnly ? onChangeValue : void 0,
|
|
77
88
|
onKeyDown: userOnKeyDown,
|
|
78
89
|
tabIndex: tabIndex ?? (disabled ? -1 : 0),
|
|
79
90
|
ref: innerRef
|
|
@@ -81,7 +92,7 @@ const DSControlledCheckbox = (props) => {
|
|
|
81
92
|
...commonProps,
|
|
82
93
|
type: "checkbox",
|
|
83
94
|
checked,
|
|
84
|
-
onChange,
|
|
95
|
+
onChange: onChangeValue,
|
|
85
96
|
disabled,
|
|
86
97
|
tabIndex,
|
|
87
98
|
ref: innerRef
|
|
@@ -95,7 +106,7 @@ const DSControlledCheckbox = (props) => {
|
|
|
95
106
|
"data-testid": "ds-checkbox-label",
|
|
96
107
|
wrapLabel,
|
|
97
108
|
device,
|
|
98
|
-
...!disabled && (ariaControls || legacyAriaControls) ? { onClick:
|
|
109
|
+
...!disabled && (ariaControls || legacyAriaControls) ? { onClick: onChangeValue } : {},
|
|
99
110
|
children: wrapLabel ? /* @__PURE__ */ jsx(StyledWrapLabel, {
|
|
100
111
|
children: label
|
|
101
112
|
}) : /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, {
|
|
@@ -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 ?
|
|
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,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,
|
|
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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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
|
};
|
|
@@ -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.
|
|
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.
|
|
39
|
-
"@elliemae/ds-truncated-tooltip-text": "3.
|
|
40
|
-
"@elliemae/ds-utilities": "3.
|
|
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",
|