@elliemae/ds-form-checkbox 3.27.0-next.1 → 3.27.0-next.12
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/exported-related/theming.js +1 -0
- package/dist/cjs/exported-related/theming.js.map +2 -2
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +4 -1
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/typescript-testing/typescript-checkbox-valid.js +92 -0
- package/dist/cjs/typescript-testing/typescript-checkbox-valid.js.map +7 -0
- package/dist/esm/exported-related/theming.js +1 -0
- package/dist/esm/exported-related/theming.js.map +2 -2
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +4 -1
- package/dist/esm/styles.js.map +2 -2
- package/dist/esm/typescript-testing/typescript-checkbox-valid.js +69 -0
- package/dist/esm/typescript-testing/typescript-checkbox-valid.js.map +7 -0
- package/dist/types/exported-related/theming.d.ts +1 -0
- package/dist/types/index.d.ts +3 -6
- package/dist/types/react-desc-prop-types.d.ts +3 -1
- package/dist/types/typescript-testing/typescript-checkbox-valid.d.ts +1 -0
- package/package.json +7 -7
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/theming.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const DSCheckboxName = 'DSCheckbox' as const;\n\nexport const DSCheckboxSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n LABEL: 'label',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AACT;",
|
|
4
|
+
"sourcesContent": ["export const DSCheckboxName = 'DSCheckbox' as const;\n\nexport const DSCheckboxSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n INPUT_WRAPPER: 'input-wrapper',\n LABEL: 'label',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,eAAe;AAAA,EACf,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { DSControlledCheckbox as Checkbox } from './ControlledCheckbox.js';\nexport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nexport * from './exported-related/index.js';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { DSControlledCheckbox as Checkbox } from './ControlledCheckbox.js';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\n\nexport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nexport * from './exported-related/index.js';\nexport { DSControlledCheckboxWithSchema } from './ControlledCheckbox.js';\nexport const DSControlledCheckbox = ({ ...props }: DSControlledCheckboxT.Props) => <Checkbox {...props} />;\nexport const PresentationalCheckbox = ({ ...props }: DSControlledCheckboxT.Props) => <Checkbox {...props} visualOnly />;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADM4D;AANnF,gCAAiD;AAIjD,wBAAc,wCAJd;AAKA,IAAAA,6BAA+C;AACxC,MAAM,uBAAuB,CAAC,EAAE,GAAG,MAAM,MAAmC,4CAAC,0BAAAC,sBAAA,EAAU,GAAG,OAAO;AACjG,MAAM,yBAAyB,CAAC,EAAE,GAAG,MAAM,MAAmC,4CAAC,0BAAAA,sBAAA,EAAU,GAAG,OAAO,YAAU,MAAC;",
|
|
6
6
|
"names": ["import_ControlledCheckbox", "Checkbox"]
|
|
7
7
|
}
|
|
@@ -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 type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { DEVICE } from './constants/device.js';\n\nexport declare namespace DSControlledCheckboxT {\n type DevicesKeys = keyof typeof DEVICE;\n type Devices = (typeof DEVICE)[DevicesKeys];\n\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex: WCAGTabIndex;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n readOnly: boolean;\n visualOnly: boolean;\n onChange: (\n newVal: boolean,\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => void;\n }\n\n export interface OptionalProps {\n onKeyDown?: React.KeyboardEventHandler;\n innerRef?: React.MutableRefObject<HTMLInputElement | null> |
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAuE;AACvE,oBAAuB;
|
|
4
|
+
"sourcesContent": ["import type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { DEVICE } from './constants/device.js';\n\nexport declare namespace DSControlledCheckboxT {\n type DevicesKeys = keyof typeof DEVICE;\n type Devices = (typeof DEVICE)[DevicesKeys];\n\n export interface RequiredProps {}\n\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex: WCAGTabIndex;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n readOnly: boolean;\n visualOnly: boolean;\n onChange: (\n newVal: boolean,\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => void;\n }\n\n export interface OptionalProps {\n onKeyDown?: React.KeyboardEventHandler;\n innerRef?: React.MutableRefObject<HTMLInputElement | null> | React.RefCallback<HTMLInputElement>;\n 'data-testid'?: string;\n device?: Devices;\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 | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface StyledCheckBoxT {\n checked: boolean | 'mixed';\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n device?: Devices;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean | 'mixed';\n wrapLabel: boolean;\n device?: Devices;\n }\n}\n\nexport const defaultProps: DSControlledCheckboxT.DefaultProps = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n disabled: false,\n readOnly: false,\n tabIndex: 0,\n onChange: () => {},\n visualOnly: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n .description('Wheter the checkbox is set as bool or mixed')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly)\n .defaultValue(false),\n onChange: PropTypes.func\n .description('function executed when the checkbox changes state')\n .signature('(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly),\n 'aria-controls': PropTypes.string\n .description('a11y required attribute when \"mixed\" state is to be supported')\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props.ariaControls !== 'string',\n ),\n ariaControls: PropTypes.string\n .description('deprecated equivalent of \"aria-controls\", please use \"aria-controls\" instead')\n .deprecated({ version: '3.x', message: 'use \"aria-controls\" instead' })\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props['aria-controls'] !== 'string',\n ),\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.').defaultValue(false),\n disabled: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the checkbox is readOnly or not.').defaultValue(false),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label').defaultValue(false),\n device: PropTypes.oneOf(Object.values(DEVICE)).description(\n 'When not provide will scale via css breakpoint media queries, if provided, breakpoint will be ignored in favor of explicit devide declaration',\n ),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAuE;AACvE,oBAAuB;AAmEhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,YAAY;AACd;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,CAAC,EAC5D,YAAY,6CAA6C,EACzD,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ,EACvF,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KACjB,YAAY,mDAAmD,EAC/D,UAAU,+DAA+D,EACzE,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ;AAAA,EAC1F,iBAAiB,kCAAU,OACxB,YAAY,+DAA+D,EAC3E;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,iBAAiB;AAAA,EACrG;AAAA,EACF,cAAc,kCAAU,OACrB,YAAY,8EAA8E,EAC1F,WAAW,EAAE,SAAS,OAAO,SAAS,8BAA8B,CAAC,EACrE;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,eAAe,MAAM;AAAA,EACzG;AAAA,EACF,OAAO,kCAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,UAAU,kCAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,KAAK;AAAA,EACjG,UAAU,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,UAAU,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,WAAW,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,kCAAU,MAAM,OAAO,OAAO,oBAAM,CAAC,EAAE;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,CAAC,EAAE,YAAY,qBAAqB;AACrG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -40,7 +40,10 @@ var React = __toESM(require("react"));
|
|
|
40
40
|
var import_ds_system = require("@elliemae/ds-system");
|
|
41
41
|
var import_styleHelpers = require("./utils/styleHelpers.js");
|
|
42
42
|
var import_exported_related = require("./exported-related/index.js");
|
|
43
|
-
const StyledCheckBox = (0, import_ds_system.styled)("span"
|
|
43
|
+
const StyledCheckBox = (0, import_ds_system.styled)("span", {
|
|
44
|
+
name: import_exported_related.DSCheckboxName,
|
|
45
|
+
slot: import_exported_related.DSCheckboxSlots.INPUT_WRAPPER
|
|
46
|
+
})`
|
|
44
47
|
position: relative;
|
|
45
48
|
background: ${({ theme, disabled }) => (0, import_styleHelpers.handleBackgroundColor)(theme, disabled)};
|
|
46
49
|
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, css, 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')<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n width: 24px;\n height: 24px;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 24px;\n height: 24px;\n }\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }\n return `\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }}\n\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, 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\n &:hover {\n background: ${({ theme, disabled }) => (!disabled ? 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\n &:focus-within {\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n }\n\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\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`;\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 margin: 2px 0px -2px 8px;\n ${({ wrapLabel, theme }) =>\n wrapLabel\n ? `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`\n : `margin-left: ${theme.space.xxs}`};\n\n color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[800])};\n font-size: 13px;\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return `\n margin: 5px 0px -5px 8px;\n font-size: 16px;\n line-height: 1.2;\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n margin: 5px 0px -5px 8px;\n font-size: 16px;\n line-height: 1.2;\n }\n\n font-size: 13px;\n line-height: 1.1;\n `;\n }\n return `\n font-size: 13px;\n line-height: 1.1;\n `;\n }}\n\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n grid-template-columns: 24px auto;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 24px auto;\n }\n grid-template-columns: ${theme.space.xs} auto;\n `;\n }\n return `\n grid-template-columns: ${theme.space.xs} auto;\n `;\n }}\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: flex-start;\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;AAEhD,0BAAuD;AACvD,8BAAgD;AAEzC,MAAM,qBAAiB,yBAAO,MAAM;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { styled, 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 }) => handleBackgroundColor(theme, disabled)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n width: 24px;\n height: 24px;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 24px;\n height: 24px;\n }\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }\n return `\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }}\n\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, 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\n &:hover {\n background: ${({ theme, disabled }) => (!disabled ? 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\n &:focus-within {\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n }\n\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\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`;\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 margin: 2px 0px -2px 8px;\n ${({ wrapLabel, theme }) =>\n wrapLabel\n ? `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`\n : `margin-left: ${theme.space.xxs}`};\n\n color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[800])};\n font-size: 13px;\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return `\n margin: 5px 0px -5px 8px;\n font-size: 16px;\n line-height: 1.2;\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n margin: 5px 0px -5px 8px;\n font-size: 16px;\n line-height: 1.2;\n }\n\n font-size: 13px;\n line-height: 1.1;\n `;\n }\n return `\n font-size: 13px;\n line-height: 1.1;\n `;\n }}\n\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n grid-template-columns: 24px auto;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 24px auto;\n }\n grid-template-columns: ${theme.space.xs} auto;\n `;\n }\n return `\n grid-template-columns: ${theme.space.xs} auto;\n `;\n }}\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: flex-start;\n ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
12
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
+
}
|
|
14
|
+
return to;
|
|
15
|
+
};
|
|
16
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
18
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
19
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
20
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var React = __toESM(require("react"));
|
|
25
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
+
var import__ = require("../index.js");
|
|
27
|
+
const testRequiredProps = {};
|
|
28
|
+
const testOptionalProps = {
|
|
29
|
+
onKeyDown: () => null,
|
|
30
|
+
innerRef: () => null,
|
|
31
|
+
"data-testid": "hello",
|
|
32
|
+
device: "mobile"
|
|
33
|
+
};
|
|
34
|
+
const testPartialDefaults = {
|
|
35
|
+
checked: "mixed",
|
|
36
|
+
tabIndex: 0,
|
|
37
|
+
readOnly: false
|
|
38
|
+
};
|
|
39
|
+
const testProps = {
|
|
40
|
+
...testRequiredProps,
|
|
41
|
+
...testOptionalProps,
|
|
42
|
+
...testPartialDefaults
|
|
43
|
+
};
|
|
44
|
+
const testPropsAsSyntax = {
|
|
45
|
+
...testRequiredProps,
|
|
46
|
+
...testOptionalProps,
|
|
47
|
+
...testPartialDefaults
|
|
48
|
+
};
|
|
49
|
+
const testCompleteDefaults = {
|
|
50
|
+
wrapLabel: false,
|
|
51
|
+
hasError: false,
|
|
52
|
+
checked: false,
|
|
53
|
+
disabled: false,
|
|
54
|
+
readOnly: false,
|
|
55
|
+
tabIndex: 0,
|
|
56
|
+
onChange: () => {
|
|
57
|
+
},
|
|
58
|
+
visualOnly: false
|
|
59
|
+
};
|
|
60
|
+
const testInternalProps = {
|
|
61
|
+
...testRequiredProps,
|
|
62
|
+
...testOptionalProps,
|
|
63
|
+
...testCompleteDefaults
|
|
64
|
+
};
|
|
65
|
+
const testInternalPropsAsSyntax = {
|
|
66
|
+
...testRequiredProps,
|
|
67
|
+
...testOptionalProps,
|
|
68
|
+
...testCompleteDefaults
|
|
69
|
+
};
|
|
70
|
+
const testExplicitDefinition = {
|
|
71
|
+
onChange: () => null,
|
|
72
|
+
checked: true,
|
|
73
|
+
value: "checkbox1"
|
|
74
|
+
};
|
|
75
|
+
const testInferedTypeCompatibility = {
|
|
76
|
+
onChange: () => null,
|
|
77
|
+
checked: true,
|
|
78
|
+
value: "checkbox1"
|
|
79
|
+
};
|
|
80
|
+
const testDefinitionAsConst = {
|
|
81
|
+
onChange: () => null,
|
|
82
|
+
checked: true,
|
|
83
|
+
value: "checkbox1"
|
|
84
|
+
};
|
|
85
|
+
const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
86
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSControlledCheckbox, { ...testExplicitDefinition }),
|
|
87
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSControlledCheckbox, { ...testInferedTypeCompatibility }),
|
|
88
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSControlledCheckbox, { ...testDefinitionAsConst }),
|
|
89
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSControlledCheckbox, { onChange: (newVal) => newVal, checked: true, value: "checkbox1" }),
|
|
90
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSControlledCheckbox, { onChange: (newVal) => newVal, checked: "mixed", value: "checkbox2" })
|
|
91
|
+
] });
|
|
92
|
+
//# sourceMappingURL=typescript-checkbox-valid.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-checkbox-valid.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSControlledCheckbox } from '../index.js';\nimport type { DSControlledCheckboxT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSControlledCheckboxT.Props;\ntype ComponentPropsInternals = DSControlledCheckboxT.InternalProps;\ntype ComponentPropsDefaultProps = DSControlledCheckboxT.DefaultProps;\ntype ComponentPropsOptionalProps = DSControlledCheckboxT.OptionalProps;\ntype ComponentPropsRequiredProps = DSControlledCheckboxT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n onKeyDown: () => null,\n innerRef: () => null,\n 'data-testid': 'hello',\n device: 'mobile',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n checked: 'mixed',\n tabIndex: 0,\n readOnly: false,\n};\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n disabled: false,\n readOnly: false,\n tabIndex: 0,\n onChange: () => {},\n visualOnly: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n onChange: () => null,\n checked: true,\n value: 'checkbox1',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n onChange: () => null,\n checked: true,\n value: 'checkbox1',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n onChange: () => null,\n checked: true,\n value: 'checkbox1',\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSControlledCheckbox {...testExplicitDefinition} />\n <DSControlledCheckbox {...testInferedTypeCompatibility} />\n <DSControlledCheckbox {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSControlledCheckbox onChange={(newVal) => newVal} checked value=\"checkbox1\" />\n <DSControlledCheckbox onChange={(newVal) => newVal} checked=\"mixed\" value=\"checkbox2\" />\n </>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;AC+ErB;AA9EF,eAAqC;AAUrC,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,WAAW,MAAM;AAAA,EACjB,UAAU,MAAM;AAAA,EAChB,eAAe;AAAA,EACf,QAAQ;AACV;AAIA,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,YAAY;AACd;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,wBAAwB;AAAA,EAC5B,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,iCAAsB,GAAG,wBAAwB;AAAA,EAClD,4CAAC,iCAAsB,GAAG,8BAA8B;AAAA,EACxD,4CAAC,iCAAsB,GAAG,uBAAuB;AAAA,EAEjD,4CAAC,iCAAqB,UAAU,CAAC,WAAW,QAAQ,SAAO,MAAC,OAAM,aAAY;AAAA,EAC9E,4CAAC,iCAAqB,UAAU,CAAC,WAAW,QAAQ,SAAQ,SAAQ,OAAM,aAAY;AAAA,GACxF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSCheckboxName = 'DSCheckbox' as const;\n\nexport const DSCheckboxSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n LABEL: 'label',\n} as const;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AACT;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSCheckboxName = 'DSCheckbox' as const;\n\nexport const DSCheckboxSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n INPUT_WRAPPER: 'input-wrapper',\n LABEL: 'label',\n} as const;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,eAAe;AAAA,EACf,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSControlledCheckbox as Checkbox } from './ControlledCheckbox.js';\nexport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nexport * from './exported-related/index.js';\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSControlledCheckbox as Checkbox } from './ControlledCheckbox.js';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\n\nexport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nexport * from './exported-related/index.js';\nexport { DSControlledCheckboxWithSchema } from './ControlledCheckbox.js';\nexport const DSControlledCheckbox = ({ ...props }: DSControlledCheckboxT.Props) => <Checkbox {...props} />;\nexport const PresentationalCheckbox = ({ ...props }: DSControlledCheckboxT.Props) => <Checkbox {...props} visualOnly />;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACM4D;AANnF,SAAS,wBAAwB,gBAAgB;AAIjD,cAAc;AACd,SAAS,sCAAsC;AACxC,MAAM,uBAAuB,CAAC,EAAE,GAAG,MAAM,MAAmC,oBAAC,YAAU,GAAG,OAAO;AACjG,MAAM,yBAAyB,CAAC,EAAE,GAAG,MAAM,MAAmC,oBAAC,YAAU,GAAG,OAAO,YAAU,MAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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 type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { DEVICE } from './constants/device.js';\n\nexport declare namespace DSControlledCheckboxT {\n type DevicesKeys = keyof typeof DEVICE;\n type Devices = (typeof DEVICE)[DevicesKeys];\n\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex: WCAGTabIndex;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n readOnly: boolean;\n visualOnly: boolean;\n onChange: (\n newVal: boolean,\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => void;\n }\n\n export interface OptionalProps {\n onKeyDown?: React.KeyboardEventHandler;\n innerRef?: React.MutableRefObject<HTMLInputElement | null> |
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,cAAc;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { DEVICE } from './constants/device.js';\n\nexport declare namespace DSControlledCheckboxT {\n type DevicesKeys = keyof typeof DEVICE;\n type Devices = (typeof DEVICE)[DevicesKeys];\n\n export interface RequiredProps {}\n\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex: WCAGTabIndex;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n readOnly: boolean;\n visualOnly: boolean;\n onChange: (\n newVal: boolean,\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => void;\n }\n\n export interface OptionalProps {\n onKeyDown?: React.KeyboardEventHandler;\n innerRef?: React.MutableRefObject<HTMLInputElement | null> | React.RefCallback<HTMLInputElement>;\n 'data-testid'?: string;\n device?: Devices;\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 | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n LegacyAriaProps {}\n\n export interface StyledCheckBoxT {\n checked: boolean | 'mixed';\n readOnly?: boolean;\n hasError?: boolean;\n disabled?: boolean;\n device?: Devices;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n readOnly?: boolean;\n checked: boolean | 'mixed';\n wrapLabel: boolean;\n device?: Devices;\n }\n}\n\nexport const defaultProps: DSControlledCheckboxT.DefaultProps = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n disabled: false,\n readOnly: false,\n tabIndex: 0,\n onChange: () => {},\n visualOnly: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n .description('Wheter the checkbox is set as bool or mixed')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly)\n .defaultValue(false),\n onChange: PropTypes.func\n .description('function executed when the checkbox changes state')\n .signature('(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )')\n .isRequiredIf((props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly),\n 'aria-controls': PropTypes.string\n .description('a11y required attribute when \"mixed\" state is to be supported')\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props.ariaControls !== 'string',\n ),\n ariaControls: PropTypes.string\n .description('deprecated equivalent of \"aria-controls\", please use \"aria-controls\" instead')\n .deprecated({ version: '3.x', message: 'use \"aria-controls\" instead' })\n .isRequiredIf(\n (props: DSControlledCheckboxT.Props) => props.checked === 'mixed' && typeof props['aria-controls'] !== 'string',\n ),\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.').defaultValue(false),\n disabled: PropTypes.bool.description('Whether the checkbox is disabled or not.').defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the checkbox is readOnly or not.').defaultValue(false),\n wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label').defaultValue(false),\n device: PropTypes.oneOf(Object.values(DEVICE)).description(\n 'When not provide will scale via css breakpoint media queries, if provided, breakpoint will be ignored in favor of explicit devide declaration',\n ),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,cAAc;AAmEhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,YAAY;AACd;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAC5D,YAAY,6CAA6C,EACzD,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ,EACvF,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KACjB,YAAY,mDAAmD,EAC/D,UAAU,+DAA+D,EACzE,aAAa,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,QAAQ;AAAA,EAC1F,iBAAiB,UAAU,OACxB,YAAY,+DAA+D,EAC3E;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,iBAAiB;AAAA,EACrG;AAAA,EACF,cAAc,UAAU,OACrB,YAAY,8EAA8E,EAC1F,WAAW,EAAE,SAAS,OAAO,SAAS,8BAA8B,CAAC,EACrE;AAAA,IACC,CAAC,UAAuC,MAAM,YAAY,WAAW,OAAO,MAAM,eAAe,MAAM;AAAA,EACzG;AAAA,EACF,OAAO,UAAU,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,KAAK;AAAA,EACjG,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,WAAW,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,UAAU,MAAM,OAAO,OAAO,MAAM,CAAC,EAAE;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,qBAAqB;AACrG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -2,7 +2,10 @@ import * as React from "react";
|
|
|
2
2
|
import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
3
|
import { handleBackgroundColor, handleCheckmark } from "./utils/styleHelpers.js";
|
|
4
4
|
import { DSCheckboxName, DSCheckboxSlots } from "./exported-related/index.js";
|
|
5
|
-
const StyledCheckBox = styled("span"
|
|
5
|
+
const StyledCheckBox = styled("span", {
|
|
6
|
+
name: DSCheckboxName,
|
|
7
|
+
slot: DSCheckboxSlots.INPUT_WRAPPER
|
|
8
|
+
})`
|
|
6
9
|
position: relative;
|
|
7
10
|
background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};
|
|
8
11
|
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, 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')<DSControlledCheckboxT.StyledCheckBoxT>`\n position: relative;\n background: ${({ theme, disabled }) => handleBackgroundColor(theme, disabled)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n width: 24px;\n height: 24px;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 24px;\n height: 24px;\n }\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }\n return `\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }}\n\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, 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\n &:hover {\n background: ${({ theme, disabled }) => (!disabled ? 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\n &:focus-within {\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n }\n\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\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`;\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 margin: 2px 0px -2px 8px;\n ${({ wrapLabel, theme }) =>\n wrapLabel\n ? `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`\n : `margin-left: ${theme.space.xxs}`};\n\n color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[800])};\n font-size: 13px;\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return `\n margin: 5px 0px -5px 8px;\n font-size: 16px;\n line-height: 1.2;\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n margin: 5px 0px -5px 8px;\n font-size: 16px;\n line-height: 1.2;\n }\n\n font-size: 13px;\n line-height: 1.1;\n `;\n }\n return `\n font-size: 13px;\n line-height: 1.1;\n `;\n }}\n\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n grid-template-columns: 24px auto;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 24px auto;\n }\n grid-template-columns: ${theme.space.xs} auto;\n `;\n }\n return `\n grid-template-columns: ${theme.space.xs} auto;\n `;\n }}\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: flex-start;\n ${xStyledCommonProps}\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,0BAA0B;AAEhD,SAAS,uBAAuB,uBAAuB;AACvD,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,iBAAiB,OAAO,MAAM;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, 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 }) => handleBackgroundColor(theme, disabled)};\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n width: 24px;\n height: 24px;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n width: 24px;\n height: 24px;\n }\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }\n return `\n width: ${theme.space.xs};\n height: ${theme.space.xs};\n `;\n }}\n\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, 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\n &:hover {\n background: ${({ theme, disabled }) => (!disabled ? 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\n &:focus-within {\n &:hover {\n ${({ theme, checked, disabled, readOnly, hasError, device }) =>\n handleCheckmark(theme, checked, disabled, readOnly, hasError, true, device)}\n }\n\n &:after {\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\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`;\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 margin: 2px 0px -2px 8px;\n ${({ wrapLabel, theme }) =>\n wrapLabel\n ? `\n overflow-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n`\n : `margin-left: ${theme.space.xxs}`};\n\n color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[800])};\n font-size: 13px;\n\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return `\n margin: 5px 0px -5px 8px;\n font-size: 16px;\n line-height: 1.2;\n `;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n margin: 5px 0px -5px 8px;\n font-size: 16px;\n line-height: 1.2;\n }\n\n font-size: 13px;\n line-height: 1.1;\n `;\n }\n return `\n font-size: 13px;\n line-height: 1.1;\n `;\n }}\n\n display: inherit;\n\n ${({ disabled }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledWrapLabel = styled('span')``;\n\nexport const StyledContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.CONTAINER,\n})<{ device?: 'mobile' | 'desktop' }>`\n ${({ device, theme }) => {\n if (device === 'mobile') {\n return ` \n grid-template-columns: 24px auto;`;\n }\n if (device === undefined) {\n return `\n @media (max-width: ${theme.breakpoints.small}) {\n grid-template-columns: 24px auto;\n }\n grid-template-columns: ${theme.space.xs} auto;\n `;\n }\n return `\n grid-template-columns: ${theme.space.xs} auto;\n `;\n }}\n display: inline-grid;\n grid-template-rows: min-content;\n align-items: flex-start;\n ${xStyledCommonProps}\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { DSControlledCheckbox } from "../index.js";
|
|
4
|
+
const testRequiredProps = {};
|
|
5
|
+
const testOptionalProps = {
|
|
6
|
+
onKeyDown: () => null,
|
|
7
|
+
innerRef: () => null,
|
|
8
|
+
"data-testid": "hello",
|
|
9
|
+
device: "mobile"
|
|
10
|
+
};
|
|
11
|
+
const testPartialDefaults = {
|
|
12
|
+
checked: "mixed",
|
|
13
|
+
tabIndex: 0,
|
|
14
|
+
readOnly: false
|
|
15
|
+
};
|
|
16
|
+
const testProps = {
|
|
17
|
+
...testRequiredProps,
|
|
18
|
+
...testOptionalProps,
|
|
19
|
+
...testPartialDefaults
|
|
20
|
+
};
|
|
21
|
+
const testPropsAsSyntax = {
|
|
22
|
+
...testRequiredProps,
|
|
23
|
+
...testOptionalProps,
|
|
24
|
+
...testPartialDefaults
|
|
25
|
+
};
|
|
26
|
+
const testCompleteDefaults = {
|
|
27
|
+
wrapLabel: false,
|
|
28
|
+
hasError: false,
|
|
29
|
+
checked: false,
|
|
30
|
+
disabled: false,
|
|
31
|
+
readOnly: false,
|
|
32
|
+
tabIndex: 0,
|
|
33
|
+
onChange: () => {
|
|
34
|
+
},
|
|
35
|
+
visualOnly: false
|
|
36
|
+
};
|
|
37
|
+
const testInternalProps = {
|
|
38
|
+
...testRequiredProps,
|
|
39
|
+
...testOptionalProps,
|
|
40
|
+
...testCompleteDefaults
|
|
41
|
+
};
|
|
42
|
+
const testInternalPropsAsSyntax = {
|
|
43
|
+
...testRequiredProps,
|
|
44
|
+
...testOptionalProps,
|
|
45
|
+
...testCompleteDefaults
|
|
46
|
+
};
|
|
47
|
+
const testExplicitDefinition = {
|
|
48
|
+
onChange: () => null,
|
|
49
|
+
checked: true,
|
|
50
|
+
value: "checkbox1"
|
|
51
|
+
};
|
|
52
|
+
const testInferedTypeCompatibility = {
|
|
53
|
+
onChange: () => null,
|
|
54
|
+
checked: true,
|
|
55
|
+
value: "checkbox1"
|
|
56
|
+
};
|
|
57
|
+
const testDefinitionAsConst = {
|
|
58
|
+
onChange: () => null,
|
|
59
|
+
checked: true,
|
|
60
|
+
value: "checkbox1"
|
|
61
|
+
};
|
|
62
|
+
const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
63
|
+
/* @__PURE__ */ jsx(DSControlledCheckbox, { ...testExplicitDefinition }),
|
|
64
|
+
/* @__PURE__ */ jsx(DSControlledCheckbox, { ...testInferedTypeCompatibility }),
|
|
65
|
+
/* @__PURE__ */ jsx(DSControlledCheckbox, { ...testDefinitionAsConst }),
|
|
66
|
+
/* @__PURE__ */ jsx(DSControlledCheckbox, { onChange: (newVal) => newVal, checked: true, value: "checkbox1" }),
|
|
67
|
+
/* @__PURE__ */ jsx(DSControlledCheckbox, { onChange: (newVal) => newVal, checked: "mixed", value: "checkbox2" })
|
|
68
|
+
] });
|
|
69
|
+
//# sourceMappingURL=typescript-checkbox-valid.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-checkbox-valid.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSControlledCheckbox } from '../index.js';\nimport type { DSControlledCheckboxT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSControlledCheckboxT.Props;\ntype ComponentPropsInternals = DSControlledCheckboxT.InternalProps;\ntype ComponentPropsDefaultProps = DSControlledCheckboxT.DefaultProps;\ntype ComponentPropsOptionalProps = DSControlledCheckboxT.OptionalProps;\ntype ComponentPropsRequiredProps = DSControlledCheckboxT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\nconst testOptionalProps: ComponentPropsOptionalProps = {\n onKeyDown: () => null,\n innerRef: () => null,\n 'data-testid': 'hello',\n device: 'mobile',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n checked: 'mixed',\n tabIndex: 0,\n readOnly: false,\n};\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n wrapLabel: false,\n hasError: false,\n checked: false,\n disabled: false,\n readOnly: false,\n tabIndex: 0,\n onChange: () => {},\n visualOnly: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n onChange: () => null,\n checked: true,\n value: 'checkbox1',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n onChange: () => null,\n checked: true,\n value: 'checkbox1',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n onChange: () => null,\n checked: true,\n value: 'checkbox1',\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSControlledCheckbox {...testExplicitDefinition} />\n <DSControlledCheckbox {...testInferedTypeCompatibility} />\n <DSControlledCheckbox {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSControlledCheckbox onChange={(newVal) => newVal} checked value=\"checkbox1\" />\n <DSControlledCheckbox onChange={(newVal) => newVal} checked=\"mixed\" value=\"checkbox2\" />\n </>\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+ErB,mBAEE,KAFF;AA9EF,SAAS,4BAA4B;AAUrC,MAAM,oBAAiD,CAAC;AACxD,MAAM,oBAAiD;AAAA,EACrD,WAAW,MAAM;AAAA,EACjB,UAAU,MAAM;AAAA,EAChB,eAAe;AAAA,EACf,QAAQ;AACV;AAIA,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,YAAY;AACd;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,wBAAwB;AAAA,EAC5B,UAAU,MAAM;AAAA,EAChB,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,wBAAsB,GAAG,wBAAwB;AAAA,EAClD,oBAAC,wBAAsB,GAAG,8BAA8B;AAAA,EACxD,oBAAC,wBAAsB,GAAG,uBAAuB;AAAA,EAEjD,oBAAC,wBAAqB,UAAU,CAAC,WAAW,QAAQ,SAAO,MAAC,OAAM,aAAY;AAAA,EAC9E,oBAAC,wBAAqB,UAAU,CAAC,WAAW,QAAQ,SAAQ,SAAQ,OAAM,aAAY;AAAA,GACxF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
|
+
import type { DSControlledCheckboxT } from './react-desc-prop-types.js';
|
|
1
2
|
export type { DSControlledCheckboxT } from './react-desc-prop-types.js';
|
|
2
3
|
export * from './exported-related/index.js';
|
|
3
4
|
export { DSControlledCheckboxWithSchema } from './ControlledCheckbox.js';
|
|
4
|
-
export declare const DSControlledCheckbox: ({ ...props }:
|
|
5
|
-
|
|
6
|
-
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
7
|
-
export declare const PresentationalCheckbox: ({ ...props }: {
|
|
8
|
-
[x: string]: any;
|
|
9
|
-
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
5
|
+
export declare const DSControlledCheckbox: ({ ...props }: DSControlledCheckboxT.Props) => import("react/jsx-runtime.js").JSX.Element;
|
|
6
|
+
export declare const PresentationalCheckbox: ({ ...props }: DSControlledCheckboxT.Props) => import("react/jsx-runtime.js").JSX.Element;
|
|
@@ -4,6 +4,8 @@ import { DEVICE } from './constants/device.js';
|
|
|
4
4
|
export declare namespace DSControlledCheckboxT {
|
|
5
5
|
type DevicesKeys = keyof typeof DEVICE;
|
|
6
6
|
type Devices = (typeof DEVICE)[DevicesKeys];
|
|
7
|
+
interface RequiredProps {
|
|
8
|
+
}
|
|
7
9
|
interface DefaultProps {
|
|
8
10
|
checked: boolean | 'mixed';
|
|
9
11
|
tabIndex: WCAGTabIndex;
|
|
@@ -16,7 +18,7 @@ export declare namespace DSControlledCheckboxT {
|
|
|
16
18
|
}
|
|
17
19
|
interface OptionalProps {
|
|
18
20
|
onKeyDown?: React.KeyboardEventHandler;
|
|
19
|
-
innerRef?: React.MutableRefObject<HTMLInputElement | null> |
|
|
21
|
+
innerRef?: React.MutableRefObject<HTMLInputElement | null> | React.RefCallback<HTMLInputElement>;
|
|
20
22
|
'data-testid'?: string;
|
|
21
23
|
device?: Devices;
|
|
22
24
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-checkbox",
|
|
3
|
-
"version": "3.27.0-next.
|
|
3
|
+
"version": "3.27.0-next.12",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Checkbox",
|
|
6
6
|
"files": [
|
|
@@ -36,16 +36,16 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"uid": "~2.0.1",
|
|
39
|
-
"@elliemae/ds-
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-props-helpers": "3.27.0-next.12",
|
|
40
|
+
"@elliemae/ds-truncated-tooltip-text": "3.27.0-next.12",
|
|
41
|
+
"@elliemae/ds-system": "3.27.0-next.12",
|
|
42
|
+
"@elliemae/ds-utilities": "3.27.0-next.12"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
46
46
|
"@elliemae/pui-theme": "~2.7.0",
|
|
47
47
|
"styled-components": "~5.3.9",
|
|
48
|
-
"@elliemae/ds-monorepo-devops": "3.27.0-next.
|
|
48
|
+
"@elliemae/ds-monorepo-devops": "3.27.0-next.12"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"@elliemae/pui-theme": "~2.7.0",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
},
|
|
57
57
|
"publishConfig": {
|
|
58
58
|
"access": "public",
|
|
59
|
-
"typeSafety":
|
|
59
|
+
"typeSafety": true
|
|
60
60
|
},
|
|
61
61
|
"scripts": {
|
|
62
62
|
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
|