@elliemae/ds-form-checkbox 3.51.0-rc.7 → 3.51.0-rc.9
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.
|
@@ -41,7 +41,6 @@ const MainInput = () => {
|
|
|
41
41
|
const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } = import_react.default.useContext(import_ControlledCheckboxCTX.ControlledCheckBoxContext);
|
|
42
42
|
const {
|
|
43
43
|
disabled,
|
|
44
|
-
readOnly,
|
|
45
44
|
// label,
|
|
46
45
|
tabIndex,
|
|
47
46
|
innerRef,
|
|
@@ -54,7 +53,8 @@ const MainInput = () => {
|
|
|
54
53
|
hasError,
|
|
55
54
|
applyAriaDisabled
|
|
56
55
|
} = propsWithDefault;
|
|
57
|
-
const {
|
|
56
|
+
const { readOnly, ...restProps } = globalProps;
|
|
57
|
+
const { "aria-controls": ariaControls } = restProps;
|
|
58
58
|
const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
|
|
59
59
|
const canShowMixedState = ariaControls || camelCaseAriaControls;
|
|
60
60
|
const outOfTheBoxAriaLabelledBy = !globalProps["aria-label"] ? `${instanceUid}_label${withRelatedBlockLabel ? ` ${instanceUid}_block_label` : ""}` : void 0;
|
|
@@ -64,10 +64,14 @@ const MainInput = () => {
|
|
|
64
64
|
"aria-checked": checked,
|
|
65
65
|
// if user doesn't provide aria-checked, we make this the same as the actual value
|
|
66
66
|
"aria-labelledby": outOfTheBoxAriaLabelledBy,
|
|
67
|
+
// if the user provides an aria-readonly we still do print it anyway, so this should work for both internal scenarios and final integrations
|
|
67
68
|
// if the user provides an aria-labelledby we still do print it anyway, so this should work for both internal scenarios and final integrations
|
|
68
|
-
...
|
|
69
|
+
...restProps
|
|
69
70
|
// any props provided by the user will over-ride ours
|
|
70
71
|
};
|
|
72
|
+
if (readOnly) {
|
|
73
|
+
mainInputProps["aria-readonly"] = "true";
|
|
74
|
+
}
|
|
71
75
|
if (visualOnly) return null;
|
|
72
76
|
if (canShowMixedState)
|
|
73
77
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/MainInput.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledInput, StyledInputMixed } from '../styles.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const MainInput = () => {\n const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } =\n React.useContext(ControlledCheckBoxContext);\n const {\n disabled,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledInput, StyledInputMixed } from '../styles.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const MainInput = () => {\n const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } =\n React.useContext(ControlledCheckBoxContext);\n const {\n disabled,\n // label,\n tabIndex,\n innerRef,\n checked,\n visualOnly,\n ariaControls: camelCaseAriaControls,\n withRelatedBlockLabel,\n // ariaLabel: camelCaseAriaLabel,\n // externalLabel,\n hasError,\n applyAriaDisabled,\n } = propsWithDefault;\n const { readOnly, ...restProps } = globalProps;\n const { 'aria-controls': ariaControls } = restProps;\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n // if components doesn't define 'aria-controls' it would be \"a11y invalid\" to allow 'mixed' state\n // so\n // if they are NOT provided we use <input type='checkbox' /> that has no 'mixed' state support in html5\n // if they ARE provided we use <input /> (no type checkbox) in which we super-charge the 'mixed' state via css\n // props slightly differ because of this\n // also, because of this, \"onChange\" may be an onClick (or keyboard activation) or the native \"onChange\"\n const canShowMixedState = ariaControls || camelCaseAriaControls;\n // if aria-label is provided we are probably printing a 'label-less' checkbox (like data-table, or mixed parent in a group)\n // in such scenarios having the aria-labelledby may results in 'referencing a non-existing element' error\n const outOfTheBoxAriaLabelledBy = !globalProps['aria-label']\n ? `${instanceUid}_label${withRelatedBlockLabel ? ` ${instanceUid}_block_label` : ''}`\n : undefined;\n\n const mainInputProps = {\n id: instanceUid,\n 'data-testid': 'ds-checkbox',\n 'aria-checked': checked, // if user doesn't provide aria-checked, we make this the same as the actual value\n 'aria-labelledby': outOfTheBoxAriaLabelledBy, // if the user provides an aria-readonly we still do print it anyway, so this should work for both internal scenarios and final integrations\n // if the user provides an aria-labelledby we still do print it anyway, so this should work for both internal scenarios and final integrations\n ...restProps, // any props provided by the user will over-ride ours\n };\n\n if (readOnly) {\n mainInputProps['aria-readonly'] = 'true';\n }\n if (visualOnly) return null;\n\n if (canShowMixedState)\n return (\n <StyledInputMixed\n {...mainInputProps}\n role=\"checkbox\"\n aria-controls={ariaControls || camelCaseAriaControls}\n aria-disabled={disabled || applyAriaDisabled || readOnly}\n aria-invalid={hasError}\n onClick={!disabled && !readOnly ? handleOnChange : undefined}\n onKeyDown={handleMixedCheckboxOnKeyDown}\n tabIndex={disabled ? -1 : tabIndex}\n innerRef={innerRef}\n onMouseDown={(e: React.MouseEvent) => {\n if (disabled) e.preventDefault();\n }}\n aria-describedby={readOnly ? `${instanceUid}-read-only-helper-msg` : undefined}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n );\n return (\n <StyledInput\n {...mainInputProps}\n type=\"checkbox\"\n checked={checked as boolean | undefined}\n onChange={handleOnChange}\n onKeyDown={handleMixedCheckboxOnKeyDown}\n disabled={disabled}\n tabIndex={tabIndex}\n innerRef={innerRef}\n aria-invalid={hasError}\n aria-disabled={applyAriaDisabled || readOnly}\n aria-describedby={readOnly ? `${instanceUid}-read-only-helper-msg` : undefined}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDjB;AAxDN,mBAAkB;AAClB,8BAA8B;AAC9B,oBAA8C;AAC9C,mCAA0C;AAEnC,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,kBAAkB,aAAa,aAAa,gBAAgB,6BAA6B,IAC/F,aAAAA,QAAM,WAAW,sDAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,UAAU,GAAG,UAAU,IAAI;AACnC,QAAM,EAAE,iBAAiB,aAAa,IAAI;AAE1C,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,gBAAgB;AAQhF,QAAM,oBAAoB,gBAAgB;AAG1C,QAAM,4BAA4B,CAAC,YAAY,YAAY,IACvD,GAAG,WAAW,SAAS,wBAAwB,IAAI,WAAW,iBAAiB,EAAE,KACjF;AAEJ,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA;AAAA,IAChB,mBAAmB;AAAA;AAAA;AAAA,IAEnB,GAAG;AAAA;AAAA,EACL;AAEA,MAAI,UAAU;AACZ,mBAAe,eAAe,IAAI;AAAA,EACpC;AACA,MAAI,WAAY,QAAO;AAEvB,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,iBAAe,gBAAgB;AAAA,QAC/B,iBAAe,YAAY,qBAAqB;AAAA,QAChD,gBAAc;AAAA,QACd,SAAS,CAAC,YAAY,CAAC,WAAW,iBAAiB;AAAA,QACnD,WAAW;AAAA,QACX,UAAU,WAAW,KAAK;AAAA,QAC1B;AAAA,QACA,aAAa,CAAC,MAAwB;AACpC,cAAI,SAAU,GAAE,eAAe;AAAA,QACjC;AAAA,QACA,oBAAkB,WAAW,GAAG,WAAW,0BAA0B;AAAA,QACrE;AAAA,QACA;AAAA;AAAA,IACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAc;AAAA,MACd,iBAAe,qBAAqB;AAAA,MACpC,oBAAkB,WAAW,GAAG,WAAW,0BAA0B;AAAA,MACrE;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -8,7 +8,6 @@ const MainInput = () => {
|
|
|
8
8
|
const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } = React2.useContext(ControlledCheckBoxContext);
|
|
9
9
|
const {
|
|
10
10
|
disabled,
|
|
11
|
-
readOnly,
|
|
12
11
|
// label,
|
|
13
12
|
tabIndex,
|
|
14
13
|
innerRef,
|
|
@@ -21,7 +20,8 @@ const MainInput = () => {
|
|
|
21
20
|
hasError,
|
|
22
21
|
applyAriaDisabled
|
|
23
22
|
} = propsWithDefault;
|
|
24
|
-
const {
|
|
23
|
+
const { readOnly, ...restProps } = globalProps;
|
|
24
|
+
const { "aria-controls": ariaControls } = restProps;
|
|
25
25
|
const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);
|
|
26
26
|
const canShowMixedState = ariaControls || camelCaseAriaControls;
|
|
27
27
|
const outOfTheBoxAriaLabelledBy = !globalProps["aria-label"] ? `${instanceUid}_label${withRelatedBlockLabel ? ` ${instanceUid}_block_label` : ""}` : void 0;
|
|
@@ -31,10 +31,14 @@ const MainInput = () => {
|
|
|
31
31
|
"aria-checked": checked,
|
|
32
32
|
// if user doesn't provide aria-checked, we make this the same as the actual value
|
|
33
33
|
"aria-labelledby": outOfTheBoxAriaLabelledBy,
|
|
34
|
+
// if the user provides an aria-readonly we still do print it anyway, so this should work for both internal scenarios and final integrations
|
|
34
35
|
// if the user provides an aria-labelledby we still do print it anyway, so this should work for both internal scenarios and final integrations
|
|
35
|
-
...
|
|
36
|
+
...restProps
|
|
36
37
|
// any props provided by the user will over-ride ours
|
|
37
38
|
};
|
|
39
|
+
if (readOnly) {
|
|
40
|
+
mainInputProps["aria-readonly"] = "true";
|
|
41
|
+
}
|
|
38
42
|
if (visualOnly) return null;
|
|
39
43
|
if (canShowMixedState)
|
|
40
44
|
return /* @__PURE__ */ jsx(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MainInput.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledInput, StyledInputMixed } from '../styles.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const MainInput = () => {\n const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } =\n React.useContext(ControlledCheckBoxContext);\n const {\n disabled,\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledInput, StyledInputMixed } from '../styles.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const MainInput = () => {\n const { propsWithDefault, globalProps, instanceUid, handleOnChange, handleMixedCheckboxOnKeyDown } =\n React.useContext(ControlledCheckBoxContext);\n const {\n disabled,\n // label,\n tabIndex,\n innerRef,\n checked,\n visualOnly,\n ariaControls: camelCaseAriaControls,\n withRelatedBlockLabel,\n // ariaLabel: camelCaseAriaLabel,\n // externalLabel,\n hasError,\n applyAriaDisabled,\n } = propsWithDefault;\n const { readOnly, ...restProps } = globalProps;\n const { 'aria-controls': ariaControls } = restProps;\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n // if components doesn't define 'aria-controls' it would be \"a11y invalid\" to allow 'mixed' state\n // so\n // if they are NOT provided we use <input type='checkbox' /> that has no 'mixed' state support in html5\n // if they ARE provided we use <input /> (no type checkbox) in which we super-charge the 'mixed' state via css\n // props slightly differ because of this\n // also, because of this, \"onChange\" may be an onClick (or keyboard activation) or the native \"onChange\"\n const canShowMixedState = ariaControls || camelCaseAriaControls;\n // if aria-label is provided we are probably printing a 'label-less' checkbox (like data-table, or mixed parent in a group)\n // in such scenarios having the aria-labelledby may results in 'referencing a non-existing element' error\n const outOfTheBoxAriaLabelledBy = !globalProps['aria-label']\n ? `${instanceUid}_label${withRelatedBlockLabel ? ` ${instanceUid}_block_label` : ''}`\n : undefined;\n\n const mainInputProps = {\n id: instanceUid,\n 'data-testid': 'ds-checkbox',\n 'aria-checked': checked, // if user doesn't provide aria-checked, we make this the same as the actual value\n 'aria-labelledby': outOfTheBoxAriaLabelledBy, // if the user provides an aria-readonly we still do print it anyway, so this should work for both internal scenarios and final integrations\n // if the user provides an aria-labelledby we still do print it anyway, so this should work for both internal scenarios and final integrations\n ...restProps, // any props provided by the user will over-ride ours\n };\n\n if (readOnly) {\n mainInputProps['aria-readonly'] = 'true';\n }\n if (visualOnly) return null;\n\n if (canShowMixedState)\n return (\n <StyledInputMixed\n {...mainInputProps}\n role=\"checkbox\"\n aria-controls={ariaControls || camelCaseAriaControls}\n aria-disabled={disabled || applyAriaDisabled || readOnly}\n aria-invalid={hasError}\n onClick={!disabled && !readOnly ? handleOnChange : undefined}\n onKeyDown={handleMixedCheckboxOnKeyDown}\n tabIndex={disabled ? -1 : tabIndex}\n innerRef={innerRef}\n onMouseDown={(e: React.MouseEvent) => {\n if (disabled) e.preventDefault();\n }}\n aria-describedby={readOnly ? `${instanceUid}-read-only-helper-msg` : undefined}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n );\n return (\n <StyledInput\n {...mainInputProps}\n type=\"checkbox\"\n checked={checked as boolean | undefined}\n onChange={handleOnChange}\n onKeyDown={handleMixedCheckboxOnKeyDown}\n disabled={disabled}\n tabIndex={tabIndex}\n innerRef={innerRef}\n aria-invalid={hasError}\n aria-disabled={applyAriaDisabled || readOnly}\n aria-describedby={readOnly ? `${instanceUid}-read-only-helper-msg` : undefined}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyDjB;AAxDN,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,aAAa,wBAAwB;AAC9C,SAAS,iCAAiC;AAEnC,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,kBAAkB,aAAa,aAAa,gBAAgB,6BAA6B,IAC/FA,OAAM,WAAW,yBAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,UAAU,GAAG,UAAU,IAAI;AACnC,QAAM,EAAE,iBAAiB,aAAa,IAAI;AAE1C,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,gBAAgB;AAQhF,QAAM,oBAAoB,gBAAgB;AAG1C,QAAM,4BAA4B,CAAC,YAAY,YAAY,IACvD,GAAG,WAAW,SAAS,wBAAwB,IAAI,WAAW,iBAAiB,EAAE,KACjF;AAEJ,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA;AAAA,IAChB,mBAAmB;AAAA;AAAA;AAAA,IAEnB,GAAG;AAAA;AAAA,EACL;AAEA,MAAI,UAAU;AACZ,mBAAe,eAAe,IAAI;AAAA,EACpC;AACA,MAAI,WAAY,QAAO;AAEvB,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,iBAAe,gBAAgB;AAAA,QAC/B,iBAAe,YAAY,qBAAqB;AAAA,QAChD,gBAAc;AAAA,QACd,SAAS,CAAC,YAAY,CAAC,WAAW,iBAAiB;AAAA,QACnD,WAAW;AAAA,QACX,UAAU,WAAW,KAAK;AAAA,QAC1B;AAAA,QACA,aAAa,CAAC,MAAwB;AACpC,cAAI,SAAU,GAAE,eAAe;AAAA,QACjC;AAAA,QACA,oBAAkB,WAAW,GAAG,WAAW,0BAA0B;AAAA,QACrE;AAAA,QACA;AAAA;AAAA,IACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAc;AAAA,MACd,iBAAe,qBAAqB;AAAA,MACpC,oBAAkB,WAAW,GAAG,WAAW,0BAA0B;AAAA,MACrE;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-checkbox",
|
|
3
|
-
"version": "3.51.0-rc.
|
|
3
|
+
"version": "3.51.0-rc.9",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Checkbox",
|
|
6
6
|
"files": [
|
|
@@ -37,17 +37,17 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"uid": "~2.0.1",
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-typescript-helpers": "3.51.0-rc.
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.51.0-rc.9",
|
|
41
|
+
"@elliemae/ds-system": "3.51.0-rc.9",
|
|
42
|
+
"@elliemae/ds-truncated-tooltip-text": "3.51.0-rc.9",
|
|
43
|
+
"@elliemae/ds-typescript-helpers": "3.51.0-rc.9"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@elliemae/pui-cli": "9.0.0-next.55",
|
|
47
47
|
"@elliemae/pui-theme": "~2.10.0",
|
|
48
48
|
"jest": "~29.7.0",
|
|
49
49
|
"styled-components": "~5.3.9",
|
|
50
|
-
"@elliemae/ds-monorepo-devops": "3.51.0-rc.
|
|
50
|
+
"@elliemae/ds-monorepo-devops": "3.51.0-rc.9"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
53
|
"@elliemae/pui-theme": "~2.10.0",
|