@elliemae/ds-form-checkbox 3.70.0-next.4 → 3.70.0-next.41
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/TruncatedTooltipText.js +49 -10
- package/dist/cjs/TruncatedTooltipText.js.map +2 -2
- package/dist/cjs/config/useValidateProps.js +2 -2
- package/dist/cjs/config/useValidateProps.js.map +2 -2
- package/dist/cjs/{exported-related → constants}/index.js +9 -4
- package/dist/cjs/constants/index.js.map +7 -0
- package/dist/cjs/index.js +4 -4
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/parts/ControlledCheckBoxContent.js +24 -2
- package/dist/cjs/parts/ControlledCheckBoxContent.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +23 -16
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/typescript-testing/slot-props.js +48 -0
- package/dist/cjs/typescript-testing/slot-props.js.map +7 -0
- package/dist/esm/TruncatedTooltipText.js +49 -10
- package/dist/esm/TruncatedTooltipText.js.map +2 -2
- package/dist/esm/config/useValidateProps.js +1 -1
- package/dist/esm/config/useValidateProps.js.map +1 -1
- package/dist/esm/{exported-related → constants}/index.js +6 -1
- package/dist/esm/constants/index.js.map +7 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/parts/ControlledCheckBoxContent.js +25 -3
- package/dist/esm/parts/ControlledCheckBoxContent.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +13 -6
- package/dist/esm/styles.js.map +2 -2
- package/dist/esm/typescript-testing/slot-props.js +25 -0
- package/dist/esm/typescript-testing/slot-props.js.map +7 -0
- package/dist/types/TruncatedTooltipText.d.ts +3 -1
- package/dist/types/constants/index.d.ts +23 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +17 -1
- package/dist/types/styles.d.ts +1 -1
- package/package.json +9 -7
- package/dist/cjs/exported-related/index.js.map +0 -7
- package/dist/esm/exported-related/index.js.map +0 -7
- package/dist/types/exported-related/index.d.ts +0 -13
- package/dist/types/tests/DSControlledCheckbox.API.test.d.ts +0 -1
- package/dist/types/tests/DSControlledCheckbox.a11y.test.d.ts +0 -1
- package/dist/types/tests/DSControlledCheckbox.keyboard.test.d.ts +0 -1
- package/dist/types/tests/DSControlledCheckbox.test.d.ts +0 -1
- package/dist/types/tests/DSControlledCheckboxMixed.test.d.ts +0 -1
- package/dist/types/tests/DSControllledCheckbox.events.test.d.ts +0 -1
- package/dist/types/tests/axe.test.d.ts +0 -1
- package/dist/types/typescript-testing/typescript-checkbox-valid.d.ts +0 -1
|
@@ -2,34 +2,51 @@ import * as React from "react";
|
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback, useState } from "react";
|
|
4
4
|
import { styled } from "@elliemae/ds-system";
|
|
5
|
+
import { DSTypography } from "@elliemae/ds-typography";
|
|
5
6
|
import {
|
|
6
7
|
useFloatingContext,
|
|
7
8
|
FloatingWrapper,
|
|
8
9
|
PopoverArrow
|
|
9
10
|
} from "@elliemae/ds-floating-context";
|
|
10
|
-
|
|
11
|
+
import { DSCheckboxName, DSCheckboxSlots, DSCheckboxDataTestIds } from "./constants/index.js";
|
|
12
|
+
const TruncatedSpan = styled(DSTypography, {
|
|
13
|
+
name: DSCheckboxName,
|
|
14
|
+
slot: DSCheckboxSlots.TRUNCATED_LABEL
|
|
15
|
+
})`
|
|
11
16
|
text-overflow: ellipsis;
|
|
12
17
|
white-space: nowrap;
|
|
13
18
|
overflow: hidden;
|
|
14
19
|
display: inline-block;
|
|
15
20
|
max-width: 100%;
|
|
16
21
|
`;
|
|
17
|
-
const TooltipContainer = styled
|
|
18
|
-
|
|
22
|
+
const TooltipContainer = styled("div", {
|
|
23
|
+
name: DSCheckboxName,
|
|
24
|
+
slot: DSCheckboxSlots.TOOLTIP_CONTAINER
|
|
25
|
+
})`
|
|
26
|
+
text-align: center;
|
|
19
27
|
min-width: ${({ theme }) => theme.space.l};
|
|
20
28
|
max-width: 250px;
|
|
29
|
+
overflow-wrap: break-word;
|
|
30
|
+
word-break: break-word;
|
|
21
31
|
min-height: 30px;
|
|
22
32
|
display: grid;
|
|
23
33
|
align-items: center;
|
|
24
|
-
padding: ${({ theme }) => `${theme.space.
|
|
34
|
+
padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
|
|
25
35
|
position: relative;
|
|
26
36
|
background-color: white;
|
|
27
37
|
border-radius: 2px;
|
|
28
|
-
font-size: 13px;
|
|
29
|
-
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
30
38
|
pointer-events: none;
|
|
31
39
|
`;
|
|
32
|
-
const
|
|
40
|
+
const StyledTooltipText = styled(DSTypography, {
|
|
41
|
+
name: DSCheckboxName,
|
|
42
|
+
slot: DSCheckboxSlots.TOOLTIP_TEXT
|
|
43
|
+
})``;
|
|
44
|
+
const TruncatedTooltipText = ({
|
|
45
|
+
value = "",
|
|
46
|
+
placement = "top",
|
|
47
|
+
getOwnerProps,
|
|
48
|
+
getOwnerPropsArguments
|
|
49
|
+
}) => {
|
|
33
50
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
34
51
|
const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({
|
|
35
52
|
placement,
|
|
@@ -44,7 +61,20 @@ const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
|
|
|
44
61
|
setShowTooltip(false);
|
|
45
62
|
}, []);
|
|
46
63
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
47
|
-
/* @__PURE__ */ jsx(
|
|
64
|
+
/* @__PURE__ */ jsx(
|
|
65
|
+
TruncatedSpan,
|
|
66
|
+
{
|
|
67
|
+
component: "span",
|
|
68
|
+
variant: "b2",
|
|
69
|
+
"data-testid": DSCheckboxDataTestIds.TRUNCATED_LABEL,
|
|
70
|
+
innerRef: refs.setReference,
|
|
71
|
+
onMouseEnter: handleMouseEnter,
|
|
72
|
+
onMouseLeave: handleMouseLeave,
|
|
73
|
+
getOwnerProps,
|
|
74
|
+
getOwnerPropsArguments,
|
|
75
|
+
children: value
|
|
76
|
+
}
|
|
77
|
+
),
|
|
48
78
|
/* @__PURE__ */ jsx(
|
|
49
79
|
FloatingWrapper,
|
|
50
80
|
{
|
|
@@ -52,8 +82,17 @@ const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
|
|
|
52
82
|
isOpen: showTooltip,
|
|
53
83
|
floatingStyles,
|
|
54
84
|
context,
|
|
55
|
-
children: /* @__PURE__ */ jsxs(TooltipContainer, { children: [
|
|
56
|
-
|
|
85
|
+
children: /* @__PURE__ */ jsxs(TooltipContainer, { getOwnerProps, getOwnerPropsArguments, children: [
|
|
86
|
+
/* @__PURE__ */ jsx(
|
|
87
|
+
StyledTooltipText,
|
|
88
|
+
{
|
|
89
|
+
component: "span",
|
|
90
|
+
variant: "b2-light",
|
|
91
|
+
getOwnerProps,
|
|
92
|
+
getOwnerPropsArguments,
|
|
93
|
+
children: value
|
|
94
|
+
}
|
|
95
|
+
),
|
|
57
96
|
/* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
|
|
58
97
|
] })
|
|
59
98
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/TruncatedTooltipText.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport {\n useFloatingContext,\n FloatingWrapper,\n PopoverArrow,\n type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\n\nconst TruncatedSpan = styled.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n useFloatingContext,\n FloatingWrapper,\n PopoverArrow,\n type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\nimport { DSCheckboxName, DSCheckboxSlots, DSCheckboxDataTestIds } from './constants/index.js';\n\nconst TruncatedSpan = styled(DSTypography, {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.TRUNCATED_LABEL,\n})`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst TooltipContainer = styled('div', {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.TOOLTIP_CONTAINER,\n})`\n text-align: center;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n overflow-wrap: break-word;\n word-break: break-word;\n min-height: 30px;\n display: grid;\n align-items: center;\n padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};\n position: relative;\n background-color: white;\n border-radius: 2px;\n pointer-events: none;\n`;\n\nconst StyledTooltipText = styled(DSTypography, {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.TOOLTIP_TEXT,\n})``;\n\ninterface TruncatedTooltipTextProps {\n value?: string;\n placement?: DSHookFloatingContextT.PopperPlacementsT;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nconst TruncatedTooltipText = ({\n value = '',\n placement = 'top',\n getOwnerProps,\n getOwnerPropsArguments,\n}: TruncatedTooltipTextProps) => {\n const [showTooltip, setShowTooltip] = useState(false);\n\n const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n placement,\n externallyControlledIsOpen: showTooltip,\n withoutAnimation: true,\n });\n\n const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n const el = e.currentTarget;\n setShowTooltip(el.offsetWidth < el.scrollWidth);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setShowTooltip(false);\n }, []);\n\n return (\n <>\n <TruncatedSpan\n component=\"span\"\n variant=\"b2\"\n data-testid={DSCheckboxDataTestIds.TRUNCATED_LABEL}\n innerRef={refs.setReference}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </TruncatedSpan>\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={showTooltip}\n floatingStyles={floatingStyles}\n context={context}\n >\n <TooltipContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledTooltipText\n component=\"span\"\n variant=\"b2-light\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledTooltipText>\n <PopoverArrow {...arrowStyles} />\n </TooltipContainer>\n </FloatingWrapper>\n </>\n );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC8EnB,mBACE,KAkBE,YAnBJ;AA9EJ,SAAgB,aAAa,gBAAgB;AAC7C,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,gBAAgB,iBAAiB,6BAA6B;AAEvE,MAAM,gBAAgB,OAAO,cAAc;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASD,MAAM,mBAAmB,OAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlE,MAAM,oBAAoB,OAAO,cAAc;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AASD,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAiC;AAC/B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,IAAI,mBAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,mBAAmB,YAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,YAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,eAAa,sBAAsB;AAAA,QACnC,UAAU,KAAK;AAAA,QACf,cAAc;AAAA,QACd,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,+BAAC,oBAAiB,eAA8B,wBAC9C;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAQ;AAAA,cACR;AAAA,cACA;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,gBAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
3
|
-
import { DSCheckboxName } from "../
|
|
3
|
+
import { DSCheckboxName } from "../constants/index.js";
|
|
4
4
|
const useValidateProps = (props, propTypes) => {
|
|
5
5
|
useValidateTypescriptPropTypes(props, propTypes, DSCheckboxName);
|
|
6
6
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { DSCheckboxName } from '../
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { DSCheckboxName } from '../constants/index.js';\nimport type { DSControlledCheckboxT } from '../react-desc-prop-types.js';\n\nexport const useValidateProps = (props: DSControlledCheckboxT.Props, propTypes: ValidationMap<unknown>): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSCheckboxName);\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAA0D;AACnE,SAAS,sBAAsB;AAGxB,MAAM,mBAAmB,CAAC,OAAoC,cAA4C;AAE/G,iCAA+B,OAAO,WAAW,cAAc;AACjE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,7 +5,12 @@ const DSCheckboxSlots = {
|
|
|
5
5
|
CONTAINER: "root",
|
|
6
6
|
INPUT: "input",
|
|
7
7
|
INPUT_WRAPPER: "input-wrapper",
|
|
8
|
-
LABEL: "label"
|
|
8
|
+
LABEL: "label",
|
|
9
|
+
LABEL_TYPOGRAPHY: "label-typography",
|
|
10
|
+
READ_ONLY_HELPER: "read-only-helper",
|
|
11
|
+
TRUNCATED_LABEL: "truncated-label",
|
|
12
|
+
TOOLTIP_CONTAINER: "tooltip-container",
|
|
13
|
+
TOOLTIP_TEXT: "tooltip-text"
|
|
9
14
|
};
|
|
10
15
|
const DSCheckboxDataTestIds = {
|
|
11
16
|
...slotObjectToDataTestIds(DSCheckboxName, DSCheckboxSlots),
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCheckboxName = 'DSCheckbox';\n\nexport const DSCheckboxSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n INPUT_WRAPPER: 'input-wrapper',\n LABEL: 'label',\n LABEL_TYPOGRAPHY: 'label-typography',\n READ_ONLY_HELPER: 'read-only-helper',\n TRUNCATED_LABEL: 'truncated-label',\n TOOLTIP_CONTAINER: 'tooltip-container',\n TOOLTIP_TEXT: 'tooltip-text',\n} as const;\n\nexport const DSCheckboxDataTestIds = {\n ...slotObjectToDataTestIds(DSCheckboxName, DSCheckboxSlots),\n // for legacy reasons we have to keep those around and override the slots...\n CONTAINER: 'ds-checkbox-container',\n INPUT: 'ds-checkbox',\n} as const;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,eAAe;AAAA,EACf,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,cAAc;AAChB;AAEO,MAAM,wBAAwB;AAAA,EACnC,GAAG,wBAAwB,gBAAgB,eAAe;AAAA;AAAA,EAE1D,WAAW;AAAA,EACX,OAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { DSControlledCheckbox as Checkbox } from "./ControlledCheckbox.js";
|
|
4
|
-
import { DSCheckboxDataTestIds, DSCheckboxName, DSCheckboxSlots } from "./
|
|
4
|
+
import { DSCheckboxDataTestIds, DSCheckboxName, DSCheckboxSlots } from "./constants/index.js";
|
|
5
5
|
import { DSControlledCheckboxWithSchema } from "./ControlledCheckbox.js";
|
|
6
6
|
const DSControlledCheckbox = ({ ...props }) => /* @__PURE__ */ jsx(Checkbox, { ...props });
|
|
7
7
|
const PresentationalCheckbox = ({ ...props }) => /* @__PURE__ */ jsx(Checkbox, { ...props, visualOnly: true });
|
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';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\n\nexport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nexport { DSCheckboxDataTestIds, DSCheckboxName, DSCheckboxSlots } from './
|
|
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 { DSCheckboxDataTestIds, DSCheckboxName, DSCheckboxSlots } from './constants/index.js';\nexport { DSControlledCheckboxWithSchema } from './ControlledCheckbox.js';\n\nexport const DSControlledCheckbox = ({ ...props }: DSControlledCheckboxT.Props) => <Checkbox {...props} />;\nexport const PresentationalCheckbox = ({ ...props }: DSControlledCheckboxT.Props) => <Checkbox {...props} visualOnly />;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACO4D;AAPnF,SAAS,wBAAwB,gBAAgB;AAIjD,SAAS,uBAAuB,gBAAgB,uBAAuB;AACvE,SAAS,sCAAsC;AAExC,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
|
}
|
|
@@ -3,9 +3,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import React2 from "react";
|
|
4
4
|
import { useOwnerProps } from "@elliemae/ds-props-helpers";
|
|
5
5
|
import { TruncatedTooltipText } from "../TruncatedTooltipText.js";
|
|
6
|
-
import { StyledContainer,
|
|
6
|
+
import { StyledContainer, StyledLabelTypography, StyledLabel, StyledCheckBox, StyledHiddenP } from "../styles.js";
|
|
7
7
|
import { MainInput } from "./MainInput.js";
|
|
8
8
|
import { ControlledCheckBoxContext } from "../ControlledCheckboxCTX.js";
|
|
9
|
+
import { DSCheckboxDataTestIds } from "../constants/index.js";
|
|
9
10
|
const ControlledCheckBoxContent = () => {
|
|
10
11
|
const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } = React2.useContext(ControlledCheckBoxContext);
|
|
11
12
|
const {
|
|
@@ -74,10 +75,31 @@ const ControlledCheckBoxContent = () => {
|
|
|
74
75
|
...!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleLabelClick } : {},
|
|
75
76
|
getOwnerProps,
|
|
76
77
|
getOwnerPropsArguments,
|
|
77
|
-
children: wrapLabel ? /* @__PURE__ */ jsx(
|
|
78
|
+
children: wrapLabel ? /* @__PURE__ */ jsx(
|
|
79
|
+
StyledLabelTypography,
|
|
80
|
+
{
|
|
81
|
+
component: "span",
|
|
82
|
+
variant: "b2",
|
|
83
|
+
getOwnerProps,
|
|
84
|
+
getOwnerPropsArguments,
|
|
85
|
+
children: label
|
|
86
|
+
}
|
|
87
|
+
) : /* @__PURE__ */ jsx(
|
|
88
|
+
TruncatedTooltipText,
|
|
89
|
+
{
|
|
90
|
+
value: label,
|
|
91
|
+
getOwnerProps,
|
|
92
|
+
getOwnerPropsArguments
|
|
93
|
+
}
|
|
94
|
+
)
|
|
78
95
|
}
|
|
79
96
|
),
|
|
80
|
-
readOnly ?
|
|
97
|
+
readOnly ? (
|
|
98
|
+
// READ_ONLY_HELPER is a display:none, SR-only helper — intentionally NOT a getOwnerProps
|
|
99
|
+
// injection point (no consumer use case). The slot/data-testid exist only for naming +
|
|
100
|
+
// QA targeting consistency. Tracked in KNOWN_INTENTIONAL_DEVIATIONS.md.
|
|
101
|
+
/* @__PURE__ */ jsx(StyledHiddenP, { id: `${instanceUid}-read-only-helper-msg`, "data-testid": DSCheckboxDataTestIds.READ_ONLY_HELPER, children: "Read only" })
|
|
102
|
+
) : null
|
|
81
103
|
]
|
|
82
104
|
}
|
|
83
105
|
);
|
|
@@ -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 { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TruncatedTooltipText } from '../TruncatedTooltipText.js';\nimport { StyledContainer,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TruncatedTooltipText } from '../TruncatedTooltipText.js';\nimport { StyledContainer, StyledLabelTypography, StyledLabel, StyledCheckBox, StyledHiddenP } from '../styles.js';\nimport { MainInput } from './MainInput.js';\nimport { ControlledCheckBoxContext } from '../ControlledCheckboxCTX.js';\nimport { DSCheckboxDataTestIds } from '../constants/index.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 const { ariaControls: camelCaseAriaControls } = propsWithDefault;\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\n const handleLabelClick = React.useCallback(\n (\n e:\n | React.ChangeEvent<HTMLInputElement>\n | React.MouseEvent<HTMLLabelElement>\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n ) => {\n handleOnChange(e);\n // if we are in a mixed state, we want to focus the input when the label is clicked\n // this is because the auto-focus work only on the input itself, not a div with role=checkbox\n // so we need to manually focus the input: https://jira.elliemae.io/browse/PUI-15422\n if (canShowMixedState) {\n const input = document.getElementById(instanceUid);\n if (input) {\n input.focus();\n }\n }\n },\n [canShowMixedState, handleOnChange, instanceUid],\n );\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: handleLabelClick } : {})}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {wrapLabel ? (\n <StyledLabelTypography\n component=\"span\"\n variant=\"b2\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {label}\n </StyledLabelTypography>\n ) : (\n <TruncatedTooltipText\n value={label}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </StyledLabel>\n )}\n {readOnly ? (\n // READ_ONLY_HELPER is a display:none, SR-only helper \u2014 intentionally NOT a getOwnerProps\n // injection point (no consumer use case). The slot/data-testid exist only for naming +\n // QA targeting consistency. Tracked in KNOWN_INTENTIONAL_DEVIATIONS.md.\n <StyledHiddenP id={`${instanceUid}-read-only-helper-msg`} data-testid={DSCheckboxDataTestIds.READ_ONLY_HELPER}>\n Read only\n </StyledHiddenP>\n ) : null}\n </StyledContainer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACwDnB,SAoBI,KApBJ;AAxDJ,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,iBAAiB,uBAAuB,aAAa,gBAAgB,qBAAqB;AACnG,SAAS,iBAAiB;AAC1B,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AAE/B,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,QAAM,EAAE,cAAc,sBAAsB,IAAI;AAOhD,QAAM,oBAAoB,gBAAgB;AAE1C,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,CACE,MAKG;AACH,qBAAe,CAAC;AAIhB,UAAI,mBAAmB;AACrB,cAAM,QAAQ,SAAS,eAAe,WAAW;AACjD,YAAI,OAAO;AACT,gBAAM,MAAM;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,gBAAgB,WAAW;AAAA,EACjD;AAEA,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,iBAAiB,IAAI,CAAC;AAAA,YAC1F;AAAA,YACA;AAAA,YAEC,sBACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBAEC;AAAA;AAAA,YACH,IAEA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA,QAEJ;AAAA,QAED;AAAA;AAAA;AAAA;AAAA,UAIC,oBAAC,iBAAc,IAAI,GAAG,WAAW,yBAAyB,eAAa,sBAAsB,kBAAkB,uBAE/G;AAAA,YACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
xstyledPropTypes,
|
|
6
6
|
getPropsPerSlotPropTypes
|
|
7
7
|
} from "@elliemae/ds-props-helpers";
|
|
8
|
-
import { DSCheckboxName, DSCheckboxSlots } from "./
|
|
8
|
+
import { DSCheckboxName, DSCheckboxSlots } from "./constants/index.js";
|
|
9
9
|
import { DEVICE } from "./constants/device.js";
|
|
10
10
|
const defaultProps = {
|
|
11
11
|
wrapLabel: false,
|
|
@@ -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 { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,cAAc;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSCheckboxName, DSCheckboxSlots } from './constants/index.js';\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 type SlotFunctionArguments = {\n dsCheckboxRoot: () => object;\n dsCheckboxInputWrapper: () => object;\n dsCheckboxInput: () => object;\n dsCheckboxLabel: () => object;\n dsCheckboxLabelTypography: () => object;\n dsCheckboxReadOnlyHelper: () => object;\n dsCheckboxTruncatedLabel: () => object;\n dsCheckboxTooltipContainer: () => object;\n dsCheckboxTooltipText: () => object;\n };\n\n export interface RequiredProps {}\n\n export interface DefaultProps {\n checked: boolean | 'mixed';\n tabIndex: TypescriptHelpersT.WCAGTabIndex;\n hasError: boolean;\n wrapLabel: boolean;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n visualOnly: boolean;\n withRelatedBlockLabel: 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 extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSCheckboxName, typeof DSCheckboxSlots> {\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 applyAriaDisabled?: boolean;\n device?: Devices;\n }\n\n export interface StyledLabelT {\n disabled?: boolean;\n applyAriaDisabled?: 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 applyAriaDisabled: false,\n readOnly: false,\n tabIndex: 0,\n onChange: () => {},\n visualOnly: false,\n withRelatedBlockLabel: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n ...getPropsPerSlotPropTypes(DSCheckboxName, DSCheckboxSlots),\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(\n (props: DSControlledCheckboxT.Props) => !props.disabled && !props.readOnly && !props.applyAriaDisabled,\n ),\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 applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .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 withRelatedBlockLabel: PropTypes.bool\n .description('wheter the autogenerated aria-labelledby should also include a reference to the block label')\n .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;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,cAAc;AAoFhB,MAAM,eAAmD;AAAA,EAC9D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,YAAY;AAAA,EACZ,uBAAuB;AACzB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG,yBAAyB,gBAAgB,eAAe;AAAA,EAC3D,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,IACC,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,YAAY,CAAC,MAAM;AAAA,EACvF;AAAA,EACF,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,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,WAAW,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,KAAK;AAAA,EACjG,uBAAuB,UAAU,KAC9B,YAAY,6FAA6F,EACzG,aAAa,KAAK;AAAA,EACrB,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
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { styled, th, css, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
|
+
import { DSTypography } from "@elliemae/ds-typography";
|
|
3
4
|
import { handleBackgroundColor, handleCheckmark } from "./utils/styleHelpers.js";
|
|
4
|
-
import { DSCheckboxName, DSCheckboxSlots } from "./
|
|
5
|
+
import { DSCheckboxName, DSCheckboxSlots } from "./constants/index.js";
|
|
5
6
|
const StyledCheckBox = styled("span", {
|
|
6
7
|
name: DSCheckboxName,
|
|
7
8
|
slot: DSCheckboxSlots.INPUT_WRAPPER
|
|
@@ -121,7 +122,7 @@ const StyledLabel = styled("label", {
|
|
|
121
122
|
word-break: break-word;
|
|
122
123
|
`};
|
|
123
124
|
width: fit-content;
|
|
124
|
-
color: ${({ theme, disabled }) => disabled ? theme.colors.neutral[500] : theme.colors.neutral[
|
|
125
|
+
color: ${({ theme, disabled }) => disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};
|
|
125
126
|
line-height: 1.2307rem;
|
|
126
127
|
@media (max-width: ${th.breakpoint("small")}) {
|
|
127
128
|
line-height: 1rem; /* 13px / 16 */
|
|
@@ -149,13 +150,16 @@ const StyledLabel = styled("label", {
|
|
|
149
150
|
`;
|
|
150
151
|
}}
|
|
151
152
|
display: inherit;
|
|
152
|
-
${({ disabled
|
|
153
|
+
${({ disabled }) => disabled ? `&:hover {
|
|
153
154
|
cursor: not-allowed;
|
|
154
155
|
}` : `&:hover {
|
|
155
156
|
cursor: pointer;
|
|
156
157
|
}`}
|
|
157
158
|
`;
|
|
158
|
-
const
|
|
159
|
+
const StyledLabelTypography = styled(DSTypography, {
|
|
160
|
+
name: DSCheckboxName,
|
|
161
|
+
slot: DSCheckboxSlots.LABEL_TYPOGRAPHY
|
|
162
|
+
})``;
|
|
159
163
|
const StyledContainer = styled("div", {
|
|
160
164
|
name: DSCheckboxName,
|
|
161
165
|
slot: DSCheckboxSlots.CONTAINER
|
|
@@ -191,7 +195,10 @@ const StyledContainer = styled("div", {
|
|
|
191
195
|
align-items: ${({ wrapLabel }) => wrapLabel ? "flex-start" : "center"};
|
|
192
196
|
${xStyledCommonProps}
|
|
193
197
|
`;
|
|
194
|
-
const StyledHiddenP = styled
|
|
198
|
+
const StyledHiddenP = styled("p", {
|
|
199
|
+
name: DSCheckboxName,
|
|
200
|
+
slot: DSCheckboxSlots.READ_ONLY_HELPER
|
|
201
|
+
})`
|
|
195
202
|
display: none;
|
|
196
203
|
`;
|
|
197
204
|
export {
|
|
@@ -201,6 +208,6 @@ export {
|
|
|
201
208
|
StyledInput,
|
|
202
209
|
StyledInputMixed,
|
|
203
210
|
StyledLabel,
|
|
204
|
-
|
|
211
|
+
StyledLabelTypography
|
|
205
212
|
};
|
|
206
213
|
//# sourceMappingURL=styles.js.map
|
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 './
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,IAAI,KAAK,0BAA0B;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, th, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './constants/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, readOnly }) =>\n handleBackgroundColor(theme, disabled, applyAriaDisabled, readOnly)};\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, readOnly }) =>\n !disabled && !applyAriaDisabled && !readOnly ? theme.colors.brand[200] : undefined};\n\n &:after {\n border: 1px solid\n ${({ theme, hasError, disabled, applyAriaDisabled, readOnly }) => {\n if (hasError) return theme.colors.danger[900];\n if (applyAriaDisabled || readOnly) return theme.colors.brand[700];\n if (disabled) return theme.colors.neutral[400];\n return theme.colors.brand[600];\n }};\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: ${({ disabled, theme }) =>\n disabled ? `1px solid ${theme.colors.neutral[400]}` : `2px solid ${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 }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[700])};\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 }) =>\n disabled\n ? `&:hover {\n cursor: not-allowed;\n }`\n : `&:hover {\n cursor: pointer;\n }`}\n`;\n\nexport const StyledLabelTypography = styled(DSTypography, {\n name: DSCheckboxName,\n slot: DSCheckboxSlots.LABEL_TYPOGRAPHY,\n})``;\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 name: DSCheckboxName,\n slot: DSCheckboxSlots.READ_ONLY_HELPER,\n})`\n display: none;\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const SlotPropsAsObject = {
|
|
3
|
+
dsCheckboxRoot: { "aria-label": "just a typescript test" },
|
|
4
|
+
dsCheckboxInputWrapper: { "aria-label": "just a typescript test" },
|
|
5
|
+
dsCheckboxInput: { "aria-label": "just a typescript test" },
|
|
6
|
+
dsCheckboxLabel: { "aria-label": "just a typescript test" },
|
|
7
|
+
dsCheckboxLabelTypography: { "aria-label": "just a typescript test" },
|
|
8
|
+
dsCheckboxReadOnlyHelper: { "aria-label": "just a typescript test" },
|
|
9
|
+
dsCheckboxTruncatedLabel: { "aria-label": "just a typescript test" },
|
|
10
|
+
dsCheckboxTooltipContainer: { "aria-label": "just a typescript test" },
|
|
11
|
+
dsCheckboxTooltipText: { "aria-label": "just a typescript test" }
|
|
12
|
+
};
|
|
13
|
+
const SlotPropsAsFunctions = {
|
|
14
|
+
dsCheckboxRoot: () => ({ "aria-label": "just a typescript test" }),
|
|
15
|
+
dsCheckboxInputWrapper: () => ({ "aria-label": "just a typescript test" }),
|
|
16
|
+
dsCheckboxInput: () => ({ "aria-label": "just a typescript test" }),
|
|
17
|
+
dsCheckboxLabel: () => ({ "aria-label": "just a typescript test" }),
|
|
18
|
+
dsCheckboxLabelTypography: () => ({ "aria-label": "just a typescript test" }),
|
|
19
|
+
dsCheckboxReadOnlyHelper: () => ({ "aria-label": "just a typescript test" }),
|
|
20
|
+
dsCheckboxTruncatedLabel: () => ({ "aria-label": "just a typescript test" }),
|
|
21
|
+
dsCheckboxTooltipContainer: () => ({ "aria-label": "just a typescript test" }),
|
|
22
|
+
dsCheckboxTooltipText: () => ({ "aria-label": "just a typescript test" })
|
|
23
|
+
};
|
|
24
|
+
const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
|
|
25
|
+
//# sourceMappingURL=slot-props.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSControlledCheckboxT } from '../index.js';\nimport type { DSCheckboxName, DSCheckboxSlots } from '../constants/index.js';\n\n// Exhaustiveness contract over DSCheckboxSlots \u2014 every slot must appear in SlotFunctionArguments.\n// NOTE: dsCheckboxReadOnlyHelper is listed here for TYPE exhaustiveness only; at runtime that slot\n// is intentionally NOT a functional getOwnerProps injection point (display:none SR-only helper) \u2014\n// see KNOWN_INTENTIONAL_DEVIATIONS.md.\n//\n// Slot props can be passed in two forms \u2014 object (static) and function (dynamic).\nconst SlotPropsAsObject: Partial<DSControlledCheckboxT.Props> = {\n dsCheckboxRoot: { 'aria-label': 'just a typescript test' },\n dsCheckboxInputWrapper: { 'aria-label': 'just a typescript test' },\n dsCheckboxInput: { 'aria-label': 'just a typescript test' },\n dsCheckboxLabel: { 'aria-label': 'just a typescript test' },\n dsCheckboxLabelTypography: { 'aria-label': 'just a typescript test' },\n dsCheckboxReadOnlyHelper: { 'aria-label': 'just a typescript test' },\n dsCheckboxTruncatedLabel: { 'aria-label': 'just a typescript test' },\n dsCheckboxTooltipContainer: { 'aria-label': 'just a typescript test' },\n dsCheckboxTooltipText: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSControlledCheckboxT.SlotFunctionArguments = {\n dsCheckboxRoot: () => ({ 'aria-label': 'just a typescript test' }),\n dsCheckboxInputWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n dsCheckboxInput: () => ({ 'aria-label': 'just a typescript test' }),\n dsCheckboxLabel: () => ({ 'aria-label': 'just a typescript test' }),\n dsCheckboxLabelTypography: () => ({ 'aria-label': 'just a typescript test' }),\n dsCheckboxReadOnlyHelper: () => ({ 'aria-label': 'just a typescript test' }),\n dsCheckboxTruncatedLabel: () => ({ 'aria-label': 'just a typescript test' }),\n dsCheckboxTooltipContainer: () => ({ 'aria-label': 'just a typescript test' }),\n dsCheckboxTooltipText: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// Exhaustiveness check \u2014 fails compilation if a slot is missing from SlotFunctionArguments.\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n TypescriptHelpersT.PropsForSlots<typeof DSCheckboxName, typeof DSCheckboxSlots>\n> = SlotPropsAsFunctions;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACWvB,MAAM,oBAA0D;AAAA,EAC9D,gBAAgB,EAAE,cAAc,yBAAyB;AAAA,EACzD,wBAAwB,EAAE,cAAc,yBAAyB;AAAA,EACjE,iBAAiB,EAAE,cAAc,yBAAyB;AAAA,EAC1D,iBAAiB,EAAE,cAAc,yBAAyB;AAAA,EAC1D,2BAA2B,EAAE,cAAc,yBAAyB;AAAA,EACpE,0BAA0B,EAAE,cAAc,yBAAyB;AAAA,EACnE,0BAA0B,EAAE,cAAc,yBAAyB;AAAA,EACnE,4BAA4B,EAAE,cAAc,yBAAyB;AAAA,EACrE,uBAAuB,EAAE,cAAc,yBAAyB;AAClE;AAEA,MAAM,uBAAoE;AAAA,EACxE,gBAAgB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAChE,wBAAwB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACxE,iBAAiB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACjE,iBAAiB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACjE,2BAA2B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC3E,0BAA0B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC1E,0BAA0B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC1E,4BAA4B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC5E,uBAAuB,OAAO,EAAE,cAAc,yBAAyB;AACzE;AAGA,MAAM,6CAEF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -2,7 +2,9 @@ import { type DSHookFloatingContextT } from '@elliemae/ds-floating-context';
|
|
|
2
2
|
interface TruncatedTooltipTextProps {
|
|
3
3
|
value?: string;
|
|
4
4
|
placement?: DSHookFloatingContextT.PopperPlacementsT;
|
|
5
|
+
getOwnerProps?: () => object;
|
|
6
|
+
getOwnerPropsArguments?: () => object;
|
|
5
7
|
}
|
|
6
|
-
declare const TruncatedTooltipText: ({ value, placement }: TruncatedTooltipTextProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare const TruncatedTooltipText: ({ value, placement, getOwnerProps, getOwnerPropsArguments, }: TruncatedTooltipTextProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
7
9
|
export { TruncatedTooltipText };
|
|
8
10
|
export default TruncatedTooltipText;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export declare const DSCheckboxName = "DSCheckbox";
|
|
2
|
+
export declare const DSCheckboxSlots: {
|
|
3
|
+
readonly CONTAINER: "root";
|
|
4
|
+
readonly INPUT: "input";
|
|
5
|
+
readonly INPUT_WRAPPER: "input-wrapper";
|
|
6
|
+
readonly LABEL: "label";
|
|
7
|
+
readonly LABEL_TYPOGRAPHY: "label-typography";
|
|
8
|
+
readonly READ_ONLY_HELPER: "read-only-helper";
|
|
9
|
+
readonly TRUNCATED_LABEL: "truncated-label";
|
|
10
|
+
readonly TOOLTIP_CONTAINER: "tooltip-container";
|
|
11
|
+
readonly TOOLTIP_TEXT: "tooltip-text";
|
|
12
|
+
};
|
|
13
|
+
export declare const DSCheckboxDataTestIds: {
|
|
14
|
+
readonly CONTAINER: "ds-checkbox-container";
|
|
15
|
+
readonly INPUT: "ds-checkbox";
|
|
16
|
+
readonly INPUT_WRAPPER: "ds-checkbox-input-wrapper";
|
|
17
|
+
readonly LABEL: "ds-checkbox-label";
|
|
18
|
+
readonly LABEL_TYPOGRAPHY: "ds-checkbox-label-typography";
|
|
19
|
+
readonly READ_ONLY_HELPER: "ds-checkbox-read-only-helper";
|
|
20
|
+
readonly TRUNCATED_LABEL: "ds-checkbox-truncated-label";
|
|
21
|
+
readonly TOOLTIP_CONTAINER: "ds-checkbox-tooltip-container";
|
|
22
|
+
readonly TOOLTIP_TEXT: "ds-checkbox-tooltip-text";
|
|
23
|
+
};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { DSControlledCheckboxT } from './react-desc-prop-types.js';
|
|
2
2
|
export type { DSControlledCheckboxT } from './react-desc-prop-types.js';
|
|
3
|
-
export { DSCheckboxDataTestIds, DSCheckboxName, DSCheckboxSlots } from './
|
|
3
|
+
export { DSCheckboxDataTestIds, DSCheckboxName, DSCheckboxSlots } from './constants/index.js';
|
|
4
4
|
export { DSControlledCheckboxWithSchema } from './ControlledCheckbox.js';
|
|
5
5
|
export declare const DSControlledCheckbox: ({ ...props }: DSControlledCheckboxT.Props) => import("react/jsx-runtime.js").JSX.Element;
|
|
6
6
|
export declare const PresentationalCheckbox: ({ ...props }: DSControlledCheckboxT.Props) => import("react/jsx-runtime.js").JSX.Element;
|
|
@@ -1,11 +1,22 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
2
|
import type { GlobalAttributesT } from '@elliemae/ds-props-helpers';
|
|
3
3
|
import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
|
|
4
|
-
import { DSCheckboxName, DSCheckboxSlots } from './
|
|
4
|
+
import { DSCheckboxName, DSCheckboxSlots } from './constants/index.js';
|
|
5
5
|
import { DEVICE } from './constants/device.js';
|
|
6
6
|
export declare namespace DSControlledCheckboxT {
|
|
7
7
|
type DevicesKeys = keyof typeof DEVICE;
|
|
8
8
|
type Devices = (typeof DEVICE)[DevicesKeys];
|
|
9
|
+
type SlotFunctionArguments = {
|
|
10
|
+
dsCheckboxRoot: () => object;
|
|
11
|
+
dsCheckboxInputWrapper: () => object;
|
|
12
|
+
dsCheckboxInput: () => object;
|
|
13
|
+
dsCheckboxLabel: () => object;
|
|
14
|
+
dsCheckboxLabelTypography: () => object;
|
|
15
|
+
dsCheckboxReadOnlyHelper: () => object;
|
|
16
|
+
dsCheckboxTruncatedLabel: () => object;
|
|
17
|
+
dsCheckboxTooltipContainer: () => object;
|
|
18
|
+
dsCheckboxTooltipText: () => object;
|
|
19
|
+
};
|
|
9
20
|
interface RequiredProps {
|
|
10
21
|
}
|
|
11
22
|
interface DefaultProps {
|
|
@@ -70,6 +81,11 @@ export declare const propTypes: {
|
|
|
70
81
|
dsCheckboxInput: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
71
82
|
dsCheckboxInputWrapper: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
72
83
|
dsCheckboxLabel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
84
|
+
dsCheckboxLabelTypography: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
85
|
+
dsCheckboxReadOnlyHelper: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
86
|
+
dsCheckboxTruncatedLabel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
87
|
+
dsCheckboxTooltipContainer: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
88
|
+
dsCheckboxTooltipText: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
73
89
|
margin: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
74
90
|
m: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
75
91
|
marginTop: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ export declare const StyledCheckBox: import("styled-components").StyledComponent
|
|
|
3
3
|
export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"input">, never>;
|
|
4
4
|
export declare const StyledInputMixed: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
5
5
|
export declare const StyledLabel: import("styled-components").StyledComponent<"label", import("@elliemae/ds-system").Theme, DSControlledCheckboxT.StyledLabelT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"label">, never>;
|
|
6
|
-
export declare const
|
|
6
|
+
export declare const StyledLabelTypography: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
|
|
7
7
|
export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
|
|
8
8
|
device?: "mobile" | "desktop";
|
|
9
9
|
wrapLabel?: boolean;
|