@elliemae/ds-form-checkbox 3.50.1-next.9 → 3.51.0-beta.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/parts/ControlledCheckBoxContent.js +2 -1
- package/dist/cjs/parts/ControlledCheckBoxContent.js.map +2 -2
- package/dist/cjs/parts/MainInput.js +6 -4
- package/dist/cjs/parts/MainInput.js.map +2 -2
- package/dist/cjs/styles.js +4 -0
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/parts/ControlledCheckBoxContent.js +3 -2
- package/dist/esm/parts/ControlledCheckBoxContent.js.map +2 -2
- package/dist/esm/parts/MainInput.js +6 -4
- package/dist/esm/parts/MainInput.js.map +2 -2
- package/dist/esm/styles.js +4 -0
- package/dist/esm/styles.js.map +2 -2
- package/dist/types/styles.d.ts +1 -0
- package/package.json +11 -11
|
@@ -95,7 +95,8 @@ const ControlledCheckBoxContent = () => {
|
|
|
95
95
|
getOwnerPropsArguments,
|
|
96
96
|
children: wrapLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledWrapLabel, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: label })
|
|
97
97
|
}
|
|
98
|
-
)
|
|
98
|
+
),
|
|
99
|
+
readOnly ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledHiddenP, { id: `${instanceUid}-read-only-helper-msg`, children: "Read only" }) : null
|
|
99
100
|
]
|
|
100
101
|
}
|
|
101
102
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/ControlledCheckBoxContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from '../styles.js';\nimport { MainInput } from './MainInput.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const ControlledCheckBoxContent = () => {\n const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } =\n React.useContext(ControlledCheckBoxContext);\n const {\n checked,\n device,\n label,\n hasError,\n wrapLabel,\n ariaControls: legacyAriaControls,\n applyAriaDisabled,\n } = propsWithDefault;\n const { disabled, readOnly, 'aria-controls': ariaControls, className } = globalProps;\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n return (\n <StyledContainer\n wrapLabel={wrapLabel}\n device={device}\n data-testid=\"ds-checkbox-container\"\n className={className}\n hasLabel={Boolean(label)}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCheckBox\n device={device}\n checked={checked}\n hasError={hasError}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <MainInput />\n </StyledCheckBox>\n {label && (\n <StyledLabel\n id={`${instanceUid}_label`}\n htmlFor={instanceUid}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n checked={checked}\n data-testid=\"ds-checkbox-label\"\n wrapLabel={wrapLabel}\n device={device}\n {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {})}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n </StyledLabel>\n )}\n </StyledContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBnB;AAxBJ,mBAAkB;AAClB,uCAA2C;AAC3C,8BAA8B;AAC9B,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox, StyledHiddenP } from '../styles.js';\nimport { MainInput } from './MainInput.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const ControlledCheckBoxContent = () => {\n const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } =\n React.useContext(ControlledCheckBoxContext);\n const {\n checked,\n device,\n label,\n hasError,\n wrapLabel,\n ariaControls: legacyAriaControls,\n applyAriaDisabled,\n } = propsWithDefault;\n const { disabled, readOnly, 'aria-controls': ariaControls, className } = globalProps;\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n return (\n <StyledContainer\n wrapLabel={wrapLabel}\n device={device}\n data-testid=\"ds-checkbox-container\"\n className={className}\n hasLabel={Boolean(label)}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCheckBox\n device={device}\n checked={checked}\n hasError={hasError}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <MainInput />\n </StyledCheckBox>\n {label && (\n <StyledLabel\n id={`${instanceUid}_label`}\n htmlFor={instanceUid}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n checked={checked}\n data-testid=\"ds-checkbox-label\"\n wrapLabel={wrapLabel}\n device={device}\n {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {})}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n </StyledLabel>\n )}\n {readOnly ? <StyledHiddenP id={`${instanceUid}-read-only-helper-msg`}>Read only</StyledHiddenP> : null}\n </StyledContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwBnB;AAxBJ,mBAAkB;AAClB,uCAA2C;AAC3C,8BAA8B;AAC9B,oBAA6F;AAC7F,uBAA0B;AAC1B,mCAA0C;AAEnC,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,kBAAkB,aAAa,aAAa,cAAc,eAAe,IAC/E,aAAAA,QAAM,WAAW,sDAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,UAAU,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAEzE,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,gBAAgB;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MACZ;AAAA,MACA,UAAU,QAAQ,KAAK;AAAA,MACtB,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEA,sDAAC,8BAAU;AAAA;AAAA,QACb;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,GAAG,WAAW;AAAA,YAClB,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,eAAe,IAAI,CAAC;AAAA,YACxF;AAAA,YACA;AAAA,YAEC,sBAAY,4CAAC,iCAAiB,iBAAM,IAAqB,4CAAC,+DAA2B,OAAO,OAAO;AAAA;AAAA,QACtG;AAAA,QAED,WAAW,4CAAC,+BAAc,IAAI,GAAG,WAAW,yBAAyB,uBAAS,IAAmB;AAAA;AAAA;AAAA,EACpG;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -76,7 +76,7 @@ const MainInput = () => {
|
|
|
76
76
|
...mainInputProps,
|
|
77
77
|
role: "checkbox",
|
|
78
78
|
"aria-controls": ariaControls || camelCaseAriaControls,
|
|
79
|
-
"aria-disabled": disabled || applyAriaDisabled,
|
|
79
|
+
"aria-disabled": disabled || applyAriaDisabled || readOnly,
|
|
80
80
|
"aria-invalid": hasError,
|
|
81
81
|
onClick: !disabled && !readOnly ? handleOnChange : void 0,
|
|
82
82
|
onKeyDown: handleMixedCheckboxOnKeyDown,
|
|
@@ -85,6 +85,7 @@ const MainInput = () => {
|
|
|
85
85
|
onMouseDown: (e) => {
|
|
86
86
|
if (disabled) e.preventDefault();
|
|
87
87
|
},
|
|
88
|
+
"aria-describedby": readOnly ? `${instanceUid}-read-only-helper-msg` : void 0,
|
|
88
89
|
getOwnerProps,
|
|
89
90
|
getOwnerPropsArguments
|
|
90
91
|
}
|
|
@@ -100,10 +101,11 @@ const MainInput = () => {
|
|
|
100
101
|
disabled,
|
|
101
102
|
tabIndex,
|
|
102
103
|
innerRef,
|
|
103
|
-
getOwnerProps,
|
|
104
|
-
getOwnerPropsArguments,
|
|
105
104
|
"aria-invalid": hasError,
|
|
106
|
-
"aria-disabled": applyAriaDisabled
|
|
105
|
+
"aria-disabled": applyAriaDisabled || readOnly,
|
|
106
|
+
"aria-describedby": readOnly ? `${instanceUid}-read-only-helper-msg` : void 0,
|
|
107
|
+
getOwnerProps,
|
|
108
|
+
getOwnerPropsArguments
|
|
107
109
|
}
|
|
108
110
|
);
|
|
109
111
|
};
|
|
@@ -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 readOnly,\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 { 'aria-controls': ariaControls } = globalProps;\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,\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 ...globalProps, // any props provided by the user will over-ride ours\n };\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}\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 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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsDjB;AArDN,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,IACA;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,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,IAEnB,GAAG;AAAA;AAAA,EACL;AAEA,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;AAAA,
|
|
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 readOnly,\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 { 'aria-controls': ariaControls } = globalProps;\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,\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 ...globalProps, // any props provided by the user will over-ride ours\n };\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;ADsDjB;AArDN,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,IACA;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,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,IAEnB,GAAG;AAAA;AAAA,EACL;AAEA,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/dist/cjs/styles.js
CHANGED
|
@@ -30,6 +30,7 @@ var styles_exports = {};
|
|
|
30
30
|
__export(styles_exports, {
|
|
31
31
|
StyledCheckBox: () => StyledCheckBox,
|
|
32
32
|
StyledContainer: () => StyledContainer,
|
|
33
|
+
StyledHiddenP: () => StyledHiddenP,
|
|
33
34
|
StyledInput: () => StyledInput,
|
|
34
35
|
StyledInputMixed: () => StyledInputMixed,
|
|
35
36
|
StyledLabel: () => StyledLabel,
|
|
@@ -223,4 +224,7 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
|
|
|
223
224
|
align-items: ${({ wrapLabel }) => wrapLabel ? "flex-start" : "center"};
|
|
224
225
|
${import_ds_system.xStyledCommonProps}
|
|
225
226
|
`;
|
|
227
|
+
const StyledHiddenP = import_ds_system.styled.p`
|
|
228
|
+
display: none;
|
|
229
|
+
`;
|
|
226
230
|
//# sourceMappingURL=styles.js.map
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, th, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\n\nexport const StyledCheckBox = styled('span', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT_WRAPPER,\n})<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled, applyAriaDisabled }) => handleBackgroundColor(theme, disabled, applyAriaDisabled)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.5rem; /* 24px / 16 */\n height: 1.5rem; /* 24px / 16 */\n }\n width: 1.846rem; /* 24px / 13 */\n height: 1.846rem; /* 24px / 13 */`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.5rem; /* 24px / 16 */\n height: 1.5rem; /* 24px / 16 */\n }\n width: 1.2307rem;\n height: 1.2307rem;\n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1rem; /* 16px / 16 */\n height: 1rem; /* 16px / 16 */\n }\n width: 1.2307rem; /* 16px / 13 */\n height: 1.2307rem; /* 16px / 13 */\n `;\n }}\n\n ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, false, device)}\n\n &:after {\n content: '';\n border-radius: 2px;\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n }\n &:hover {\n background: ${({ theme, applyAriaDisabled, disabled }) =>\n !disabled && !applyAriaDisabled ? theme.colors.brand[200] : undefined};\n\n &:after {\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.brand[600])};\n }\n }\n &:focus-within {\n &:hover {\n ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, true, device)}\n }\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n &:active {\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n }\n }\n`;\n\nconst checkboxStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ 'aria-disabled': disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n ${({ wrapLabel }) =>\n wrapLabel &&\n `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`};\n width: fit-content;\n color: ${({ theme, disabled, applyAriaDisabled }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n line-height: 1.2307rem;\n @media (max-width: ${th.breakpoint('small')}) {\n line-height: 1rem; /* 13px / 16 */\n }\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n font-size: 1rem; /* 16px / 16 */\n }\n font-size: 1.2307rem; /* 16px / 13 */\n `;\n }\n if (device === undefined) {\n return `\n font-size: 1rem; \n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n font-size: 0.8125rem; /* 13px / 16 */\n }\n\n font-size: 1rem; /* 13px / 13 */\n `;\n }}\n display: inherit;\n ${({ disabled, applyAriaDisabled }) =>\n disabled || applyAriaDisabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop'; wrapLabel?: boolean; hasLabel: boolean }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.5rem auto; /* 24px / 16px */\n }\n grid-template-columns: 1.846rem auto;\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.5rem auto;\n }\n grid-template-columns: 1.23rem auto;\n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1rem auto; /* 16px / 16px */\n }\n grid-template-columns: 1.2307rem auto; /* 16px / 13 */\n\n `;\n }}\n column-gap: ${({ hasLabel }) => (hasLabel ? '8px' : '0px}')};\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: ${({ wrapLabel }) => (wrapLabel ? 'flex-start' : 'center')};\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, th, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\n\nexport const StyledCheckBox = styled('span', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT_WRAPPER,\n})<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled, applyAriaDisabled }) => handleBackgroundColor(theme, disabled, applyAriaDisabled)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.5rem; /* 24px / 16 */\n height: 1.5rem; /* 24px / 16 */\n }\n width: 1.846rem; /* 24px / 13 */\n height: 1.846rem; /* 24px / 13 */`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.5rem; /* 24px / 16 */\n height: 1.5rem; /* 24px / 16 */\n }\n width: 1.2307rem;\n height: 1.2307rem;\n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1rem; /* 16px / 16 */\n height: 1rem; /* 16px / 16 */\n }\n width: 1.2307rem; /* 16px / 13 */\n height: 1.2307rem; /* 16px / 13 */\n `;\n }}\n\n ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, false, device)}\n\n &:after {\n content: '';\n border-radius: 2px;\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n }\n &:hover {\n background: ${({ theme, applyAriaDisabled, disabled }) =>\n !disabled && !applyAriaDisabled ? theme.colors.brand[200] : undefined};\n\n &:after {\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.brand[600])};\n }\n }\n &:focus-within {\n &:hover {\n ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, true, device)}\n }\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n &:active {\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n }\n }\n`;\n\nconst checkboxStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ 'aria-disabled': disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n ${({ wrapLabel }) =>\n wrapLabel &&\n `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`};\n width: fit-content;\n color: ${({ theme, disabled, applyAriaDisabled }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n line-height: 1.2307rem;\n @media (max-width: ${th.breakpoint('small')}) {\n line-height: 1rem; /* 13px / 16 */\n }\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n font-size: 1rem; /* 16px / 16 */\n }\n font-size: 1.2307rem; /* 16px / 13 */\n `;\n }\n if (device === undefined) {\n return `\n font-size: 1rem; \n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n font-size: 0.8125rem; /* 13px / 16 */\n }\n\n font-size: 1rem; /* 13px / 13 */\n `;\n }}\n display: inherit;\n ${({ disabled, applyAriaDisabled }) =>\n disabled || applyAriaDisabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop'; wrapLabel?: boolean; hasLabel: boolean }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.5rem auto; /* 24px / 16px */\n }\n grid-template-columns: 1.846rem auto;\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.5rem auto;\n }\n grid-template-columns: 1.23rem auto;\n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1rem auto; /* 16px / 16px */\n }\n grid-template-columns: 1.2307rem auto; /* 16px / 13 */\n\n `;\n }}\n column-gap: ${({ hasLabel }) => (hasLabel ? '8px' : '0px}')};\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: ${({ wrapLabel }) => (wrapLabel ? 'flex-start' : 'center')};\n ${xStyledCommonProps}\n`;\n\nexport const StyledHiddenP = styled.p`\n display: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import React2 from "react";
|
|
4
4
|
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
5
|
import { useOwnerProps } from "@elliemae/ds-props-helpers";
|
|
6
|
-
import { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from "../styles.js";
|
|
6
|
+
import { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox, StyledHiddenP } from "../styles.js";
|
|
7
7
|
import { MainInput } from "./MainInput.js";
|
|
8
8
|
import { ControlledCheckBoxContext } from "../ControlledCheckboxCTX.js";
|
|
9
9
|
const ControlledCheckBoxContent = () => {
|
|
@@ -62,7 +62,8 @@ const ControlledCheckBoxContent = () => {
|
|
|
62
62
|
getOwnerPropsArguments,
|
|
63
63
|
children: wrapLabel ? /* @__PURE__ */ jsx(StyledWrapLabel, { children: label }) : /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: label })
|
|
64
64
|
}
|
|
65
|
-
)
|
|
65
|
+
),
|
|
66
|
+
readOnly ? /* @__PURE__ */ jsx(StyledHiddenP, { id: `${instanceUid}-read-only-helper-msg`, children: "Read only" }) : null
|
|
66
67
|
]
|
|
67
68
|
}
|
|
68
69
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ControlledCheckBoxContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox } from '../styles.js';\nimport { MainInput } from './MainInput.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const ControlledCheckBoxContent = () => {\n const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } =\n React.useContext(ControlledCheckBoxContext);\n const {\n checked,\n device,\n label,\n hasError,\n wrapLabel,\n ariaControls: legacyAriaControls,\n applyAriaDisabled,\n } = propsWithDefault;\n const { disabled, readOnly, 'aria-controls': ariaControls, className } = globalProps;\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n return (\n <StyledContainer\n wrapLabel={wrapLabel}\n device={device}\n data-testid=\"ds-checkbox-container\"\n className={className}\n hasLabel={Boolean(label)}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCheckBox\n device={device}\n checked={checked}\n hasError={hasError}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <MainInput />\n </StyledCheckBox>\n {label && (\n <StyledLabel\n id={`${instanceUid}_label`}\n htmlFor={instanceUid}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n checked={checked}\n data-testid=\"ds-checkbox-label\"\n wrapLabel={wrapLabel}\n device={device}\n {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {})}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n </StyledLabel>\n )}\n </StyledContainer>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACwBnB,SAoBI,KApBJ;AAxBJ,OAAOA,YAAW;AAClB,SAAS,kCAAkC;AAC3C,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,iBAAiB,aAAa,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledContainer, StyledWrapLabel, StyledLabel, StyledCheckBox, StyledHiddenP } from '../styles.js';\nimport { MainInput } from './MainInput.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\n\nexport const ControlledCheckBoxContent = () => {\n const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } =\n React.useContext(ControlledCheckBoxContext);\n const {\n checked,\n device,\n label,\n hasError,\n wrapLabel,\n ariaControls: legacyAriaControls,\n applyAriaDisabled,\n } = propsWithDefault;\n const { disabled, readOnly, 'aria-controls': ariaControls, className } = globalProps;\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n return (\n <StyledContainer\n wrapLabel={wrapLabel}\n device={device}\n data-testid=\"ds-checkbox-container\"\n className={className}\n hasLabel={Boolean(label)}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCheckBox\n device={device}\n checked={checked}\n hasError={hasError}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <MainInput />\n </StyledCheckBox>\n {label && (\n <StyledLabel\n id={`${instanceUid}_label`}\n htmlFor={instanceUid}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n readOnly={readOnly}\n checked={checked}\n data-testid=\"ds-checkbox-label\"\n wrapLabel={wrapLabel}\n device={device}\n {...(!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleOnChange } : {})}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {wrapLabel ? <StyledWrapLabel>{label}</StyledWrapLabel> : <SimpleTruncatedTooltipText value={label} />}\n </StyledLabel>\n )}\n {readOnly ? <StyledHiddenP id={`${instanceUid}-read-only-helper-msg`}>Read only</StyledHiddenP> : null}\n </StyledContainer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACwBnB,SAoBI,KApBJ;AAxBJ,OAAOA,YAAW;AAClB,SAAS,kCAAkC;AAC3C,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,iBAAiB,aAAa,gBAAgB,qBAAqB;AAC7F,SAAS,iBAAiB;AAC1B,SAAS,iCAAiC;AAEnC,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,kBAAkB,aAAa,aAAa,cAAc,eAAe,IAC/EA,OAAM,WAAW,yBAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,UAAU,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAEzE,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,gBAAgB;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MACZ;AAAA,MACA,UAAU,QAAQ,KAAK;AAAA,MACtB,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEA,8BAAC,aAAU;AAAA;AAAA,QACb;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,GAAG,WAAW;AAAA,YAClB,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,eAAe,IAAI,CAAC;AAAA,YACxF;AAAA,YACA;AAAA,YAEC,sBAAY,oBAAC,mBAAiB,iBAAM,IAAqB,oBAAC,8BAA2B,OAAO,OAAO;AAAA;AAAA,QACtG;AAAA,QAED,WAAW,oBAAC,iBAAc,IAAI,GAAG,WAAW,yBAAyB,uBAAS,IAAmB;AAAA;AAAA;AAAA,EACpG;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -43,7 +43,7 @@ const MainInput = () => {
|
|
|
43
43
|
...mainInputProps,
|
|
44
44
|
role: "checkbox",
|
|
45
45
|
"aria-controls": ariaControls || camelCaseAriaControls,
|
|
46
|
-
"aria-disabled": disabled || applyAriaDisabled,
|
|
46
|
+
"aria-disabled": disabled || applyAriaDisabled || readOnly,
|
|
47
47
|
"aria-invalid": hasError,
|
|
48
48
|
onClick: !disabled && !readOnly ? handleOnChange : void 0,
|
|
49
49
|
onKeyDown: handleMixedCheckboxOnKeyDown,
|
|
@@ -52,6 +52,7 @@ const MainInput = () => {
|
|
|
52
52
|
onMouseDown: (e) => {
|
|
53
53
|
if (disabled) e.preventDefault();
|
|
54
54
|
},
|
|
55
|
+
"aria-describedby": readOnly ? `${instanceUid}-read-only-helper-msg` : void 0,
|
|
55
56
|
getOwnerProps,
|
|
56
57
|
getOwnerPropsArguments
|
|
57
58
|
}
|
|
@@ -67,10 +68,11 @@ const MainInput = () => {
|
|
|
67
68
|
disabled,
|
|
68
69
|
tabIndex,
|
|
69
70
|
innerRef,
|
|
70
|
-
getOwnerProps,
|
|
71
|
-
getOwnerPropsArguments,
|
|
72
71
|
"aria-invalid": hasError,
|
|
73
|
-
"aria-disabled": applyAriaDisabled
|
|
72
|
+
"aria-disabled": applyAriaDisabled || readOnly,
|
|
73
|
+
"aria-describedby": readOnly ? `${instanceUid}-read-only-helper-msg` : void 0,
|
|
74
|
+
getOwnerProps,
|
|
75
|
+
getOwnerPropsArguments
|
|
74
76
|
}
|
|
75
77
|
);
|
|
76
78
|
};
|
|
@@ -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 readOnly,\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 { 'aria-controls': ariaControls } = globalProps;\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,\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 ...globalProps, // any props provided by the user will over-ride ours\n };\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}\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 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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACsDjB;AArDN,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,IACA;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,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,IAEnB,GAAG;AAAA;AAAA,EACL;AAEA,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;AAAA,
|
|
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 readOnly,\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 { 'aria-controls': ariaControls } = globalProps;\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,\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 ...globalProps, // any props provided by the user will over-ride ours\n };\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;ACsDjB;AArDN,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,IACA;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,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,IAEnB,GAAG;AAAA;AAAA,EACL;AAEA,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/dist/esm/styles.js
CHANGED
|
@@ -185,9 +185,13 @@ const StyledContainer = styled("div", {
|
|
|
185
185
|
align-items: ${({ wrapLabel }) => wrapLabel ? "flex-start" : "center"};
|
|
186
186
|
${xStyledCommonProps}
|
|
187
187
|
`;
|
|
188
|
+
const StyledHiddenP = styled.p`
|
|
189
|
+
display: none;
|
|
190
|
+
`;
|
|
188
191
|
export {
|
|
189
192
|
StyledCheckBox,
|
|
190
193
|
StyledContainer,
|
|
194
|
+
StyledHiddenP,
|
|
191
195
|
StyledInput,
|
|
192
196
|
StyledInputMixed,
|
|
193
197
|
StyledLabel,
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, th, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\n\nexport const StyledCheckBox = styled('span', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT_WRAPPER,\n})<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled, applyAriaDisabled }) => handleBackgroundColor(theme, disabled, applyAriaDisabled)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.5rem; /* 24px / 16 */\n height: 1.5rem; /* 24px / 16 */\n }\n width: 1.846rem; /* 24px / 13 */\n height: 1.846rem; /* 24px / 13 */`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.5rem; /* 24px / 16 */\n height: 1.5rem; /* 24px / 16 */\n }\n width: 1.2307rem;\n height: 1.2307rem;\n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1rem; /* 16px / 16 */\n height: 1rem; /* 16px / 16 */\n }\n width: 1.2307rem; /* 16px / 13 */\n height: 1.2307rem; /* 16px / 13 */\n `;\n }}\n\n ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, false, device)}\n\n &:after {\n content: '';\n border-radius: 2px;\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n }\n &:hover {\n background: ${({ theme, applyAriaDisabled, disabled }) =>\n !disabled && !applyAriaDisabled ? theme.colors.brand[200] : undefined};\n\n &:after {\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.brand[600])};\n }\n }\n &:focus-within {\n &:hover {\n ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, true, device)}\n }\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n &:active {\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n }\n }\n`;\n\nconst checkboxStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ 'aria-disabled': disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n ${({ wrapLabel }) =>\n wrapLabel &&\n `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`};\n width: fit-content;\n color: ${({ theme, disabled, applyAriaDisabled }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n line-height: 1.2307rem;\n @media (max-width: ${th.breakpoint('small')}) {\n line-height: 1rem; /* 13px / 16 */\n }\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n font-size: 1rem; /* 16px / 16 */\n }\n font-size: 1.2307rem; /* 16px / 13 */\n `;\n }\n if (device === undefined) {\n return `\n font-size: 1rem; \n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n font-size: 0.8125rem; /* 13px / 16 */\n }\n\n font-size: 1rem; /* 13px / 13 */\n `;\n }}\n display: inherit;\n ${({ disabled, applyAriaDisabled }) =>\n disabled || applyAriaDisabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop'; wrapLabel?: boolean; hasLabel: boolean }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.5rem auto; /* 24px / 16px */\n }\n grid-template-columns: 1.846rem auto;\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.5rem auto;\n }\n grid-template-columns: 1.23rem auto;\n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1rem auto; /* 16px / 16px */\n }\n grid-template-columns: 1.2307rem auto; /* 16px / 13 */\n\n `;\n }}\n column-gap: ${({ hasLabel }) => (hasLabel ? '8px' : '0px}')};\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: ${({ wrapLabel }) => (wrapLabel ? 'flex-start' : 'center')};\n ${xStyledCommonProps}\n`;\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, th, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './exported-related/index.js';\n\nexport const StyledCheckBox = styled('span', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT_WRAPPER,\n})<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled, applyAriaDisabled }) => handleBackgroundColor(theme, disabled, applyAriaDisabled)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.5rem; /* 24px / 16 */\n height: 1.5rem; /* 24px / 16 */\n }\n width: 1.846rem; /* 24px / 13 */\n height: 1.846rem; /* 24px / 13 */`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1.5rem; /* 24px / 16 */\n height: 1.5rem; /* 24px / 16 */\n }\n width: 1.2307rem;\n height: 1.2307rem;\n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 1rem; /* 16px / 16 */\n height: 1rem; /* 16px / 16 */\n }\n width: 1.2307rem; /* 16px / 13 */\n height: 1.2307rem; /* 16px / 13 */\n `;\n }}\n\n ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, false, device)}\n\n &:after {\n content: '';\n border-radius: 2px;\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n }\n &:hover {\n background: ${({ theme, applyAriaDisabled, disabled }) =>\n !disabled && !applyAriaDisabled ? theme.colors.brand[200] : undefined};\n\n &:after {\n border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.brand[600])};\n }\n }\n &:focus-within {\n &:hover {\n ${({ theme, checked, disabled, applyAriaDisabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, applyAriaDisabled, readOnly, hasError, true, device)}\n }\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n }\n &:active {\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[600]};\n }\n }\n`;\n\nconst checkboxStyles = css`\n &:hover {\n cursor: pointer;\n }\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 1;\n`;\n\nexport const StyledInput = styled('input', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n &:disabled {\n cursor: not-allowed;\n }\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledInputMixed = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.INPUT,\n})`\n ${checkboxStyles}\n ${({ 'aria-disabled': disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : ''}\n`;\n\nexport const StyledLabel = styled('label', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL,\n})<DSControlledCheckboxT.StyledLabelT>`\n ${({ wrapLabel }) =>\n wrapLabel &&\n `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`};\n width: fit-content;\n color: ${({ theme, disabled, applyAriaDisabled }) =>\n disabled || applyAriaDisabled ? theme.colors.neutral[500] : theme.colors.neutral[800]};\n line-height: 1.2307rem;\n @media (max-width: ${th.breakpoint('small')}) {\n line-height: 1rem; /* 13px / 16 */\n }\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n font-size: 1rem; /* 16px / 16 */\n }\n font-size: 1.2307rem; /* 16px / 13 */\n `;\n }\n if (device === undefined) {\n return `\n font-size: 1rem; \n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n font-size: 0.8125rem; /* 13px / 16 */\n }\n\n font-size: 1rem; /* 13px / 13 */\n `;\n }}\n display: inherit;\n ${({ disabled, applyAriaDisabled }) =>\n disabled || applyAriaDisabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop'; wrapLabel?: boolean; hasLabel: boolean }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.5rem auto; /* 24px / 16px */\n }\n grid-template-columns: 1.846rem auto;\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1.5rem auto;\n }\n grid-template-columns: 1.23rem auto;\n `;\n }\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 1rem auto; /* 16px / 16px */\n }\n grid-template-columns: 1.2307rem auto; /* 16px / 13 */\n\n `;\n }}\n column-gap: ${({ hasLabel }) => (hasLabel ? '8px' : '0px}')};\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: ${({ wrapLabel }) => (wrapLabel ? 'flex-start' : 'center')};\n ${xStyledCommonProps}\n`;\n\nexport const StyledHiddenP = styled.p`\n display: none;\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -9,3 +9,4 @@ export declare const StyledContainer: import("styled-components").StyledComponen
|
|
|
9
9
|
wrapLabel?: boolean | undefined;
|
|
10
10
|
hasLabel: boolean;
|
|
11
11
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
12
|
+
export declare const StyledHiddenP: import("styled-components").StyledComponent<"p", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"p">, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-checkbox",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.51.0-beta.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Checkbox",
|
|
6
6
|
"files": [
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
26
26
|
},
|
|
27
27
|
"engines": {
|
|
28
|
-
"pnpm": ">=
|
|
29
|
-
"node": ">=
|
|
28
|
+
"pnpm": ">=9",
|
|
29
|
+
"node": ">=22"
|
|
30
30
|
},
|
|
31
31
|
"author": "ICE MT",
|
|
32
32
|
"jestSonar": {
|
|
@@ -37,22 +37,22 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"uid": "~2.0.1",
|
|
40
|
-
"@elliemae/ds-props-helpers": "3.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.51.0-beta.1",
|
|
41
|
+
"@elliemae/ds-system": "3.51.0-beta.1",
|
|
42
|
+
"@elliemae/ds-truncated-tooltip-text": "3.51.0-beta.1",
|
|
43
|
+
"@elliemae/ds-typescript-helpers": "3.51.0-beta.1"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@elliemae/pui-cli": "9.0.0-next.
|
|
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.
|
|
50
|
+
"@elliemae/ds-monorepo-devops": "3.51.0-beta.1"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
53
|
"@elliemae/pui-theme": "~2.10.0",
|
|
54
|
-
"react": "^
|
|
55
|
-
"react-dom": "^
|
|
54
|
+
"react": "^18.3.1",
|
|
55
|
+
"react-dom": "^18.3.1",
|
|
56
56
|
"styled-components": "~5.3.9",
|
|
57
57
|
"styled-system": "^5.1.5"
|
|
58
58
|
},
|