@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
|
@@ -36,30 +36,47 @@ var React = __toESM(require("react"));
|
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
37
|
var import_react = require("react");
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
|
+
var import_ds_typography = require("@elliemae/ds-typography");
|
|
39
40
|
var import_ds_floating_context = require("@elliemae/ds-floating-context");
|
|
40
|
-
|
|
41
|
+
var import_constants = require("./constants/index.js");
|
|
42
|
+
const TruncatedSpan = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
|
|
43
|
+
name: import_constants.DSCheckboxName,
|
|
44
|
+
slot: import_constants.DSCheckboxSlots.TRUNCATED_LABEL
|
|
45
|
+
})`
|
|
41
46
|
text-overflow: ellipsis;
|
|
42
47
|
white-space: nowrap;
|
|
43
48
|
overflow: hidden;
|
|
44
49
|
display: inline-block;
|
|
45
50
|
max-width: 100%;
|
|
46
51
|
`;
|
|
47
|
-
const TooltipContainer = import_ds_system.styled
|
|
48
|
-
|
|
52
|
+
const TooltipContainer = (0, import_ds_system.styled)("div", {
|
|
53
|
+
name: import_constants.DSCheckboxName,
|
|
54
|
+
slot: import_constants.DSCheckboxSlots.TOOLTIP_CONTAINER
|
|
55
|
+
})`
|
|
56
|
+
text-align: center;
|
|
49
57
|
min-width: ${({ theme }) => theme.space.l};
|
|
50
58
|
max-width: 250px;
|
|
59
|
+
overflow-wrap: break-word;
|
|
60
|
+
word-break: break-word;
|
|
51
61
|
min-height: 30px;
|
|
52
62
|
display: grid;
|
|
53
63
|
align-items: center;
|
|
54
|
-
padding: ${({ theme }) => `${theme.space.
|
|
64
|
+
padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
|
|
55
65
|
position: relative;
|
|
56
66
|
background-color: white;
|
|
57
67
|
border-radius: 2px;
|
|
58
|
-
font-size: 13px;
|
|
59
|
-
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
60
68
|
pointer-events: none;
|
|
61
69
|
`;
|
|
62
|
-
const
|
|
70
|
+
const StyledTooltipText = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
|
|
71
|
+
name: import_constants.DSCheckboxName,
|
|
72
|
+
slot: import_constants.DSCheckboxSlots.TOOLTIP_TEXT
|
|
73
|
+
})``;
|
|
74
|
+
const TruncatedTooltipText = ({
|
|
75
|
+
value = "",
|
|
76
|
+
placement = "top",
|
|
77
|
+
getOwnerProps,
|
|
78
|
+
getOwnerPropsArguments
|
|
79
|
+
}) => {
|
|
63
80
|
const [showTooltip, setShowTooltip] = (0, import_react.useState)(false);
|
|
64
81
|
const { refs, floatingStyles, arrowStyles, context } = (0, import_ds_floating_context.useFloatingContext)({
|
|
65
82
|
placement,
|
|
@@ -74,7 +91,20 @@ const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
|
|
|
74
91
|
setShowTooltip(false);
|
|
75
92
|
}, []);
|
|
76
93
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
77
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
94
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
95
|
+
TruncatedSpan,
|
|
96
|
+
{
|
|
97
|
+
component: "span",
|
|
98
|
+
variant: "b2",
|
|
99
|
+
"data-testid": import_constants.DSCheckboxDataTestIds.TRUNCATED_LABEL,
|
|
100
|
+
innerRef: refs.setReference,
|
|
101
|
+
onMouseEnter: handleMouseEnter,
|
|
102
|
+
onMouseLeave: handleMouseLeave,
|
|
103
|
+
getOwnerProps,
|
|
104
|
+
getOwnerPropsArguments,
|
|
105
|
+
children: value
|
|
106
|
+
}
|
|
107
|
+
),
|
|
78
108
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
79
109
|
import_ds_floating_context.FloatingWrapper,
|
|
80
110
|
{
|
|
@@ -82,8 +112,17 @@ const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
|
|
|
82
112
|
isOpen: showTooltip,
|
|
83
113
|
floatingStyles,
|
|
84
114
|
context,
|
|
85
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TooltipContainer, { children: [
|
|
86
|
-
|
|
115
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TooltipContainer, { getOwnerProps, getOwnerPropsArguments, children: [
|
|
116
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
117
|
+
StyledTooltipText,
|
|
118
|
+
{
|
|
119
|
+
component: "span",
|
|
120
|
+
variant: "b2-light",
|
|
121
|
+
getOwnerProps,
|
|
122
|
+
getOwnerPropsArguments,
|
|
123
|
+
children: value
|
|
124
|
+
}
|
|
125
|
+
),
|
|
87
126
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
|
|
88
127
|
] })
|
|
89
128
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TruncatedTooltipText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8EnB;AA9EJ,mBAA6C;AAC7C,uBAAuB;AACvB,2BAA6B;AAC7B,iCAKO;AACP,uBAAuE;AAEvE,MAAM,oBAAgB,yBAAO,mCAAc;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASD,MAAM,uBAAmB,yBAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,iCAAgB;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,wBAAoB,yBAAO,mCAAc;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AASD,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAiC;AAC/B,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,QAAI,+CAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,uBAAmB,0BAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAmB,0BAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,eAAa,uCAAsB;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,uDAAC,oBAAiB,eAA8B,wBAC9C;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAQ;AAAA,cACR;AAAA,cACA;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA,4CAAC,2CAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,8 +33,8 @@ __export(useValidateProps_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(useValidateProps_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
36
|
-
var
|
|
36
|
+
var import_constants = require("../constants/index.js");
|
|
37
37
|
const useValidateProps = (props, propTypes) => {
|
|
38
|
-
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, propTypes,
|
|
38
|
+
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, propTypes, import_constants.DSCheckboxName);
|
|
39
39
|
};
|
|
40
40
|
//# sourceMappingURL=useValidateProps.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useValidateProps.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { DSCheckboxName } from '../
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAmE;AACnE,
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAmE;AACnE,uBAA+B;AAGxB,MAAM,mBAAmB,CAAC,OAAoC,cAA4C;AAE/G,8DAA+B,OAAO,WAAW,+BAAc;AACjE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -26,13 +26,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
26
26
|
mod
|
|
27
27
|
));
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var
|
|
30
|
-
__export(
|
|
29
|
+
var constants_exports = {};
|
|
30
|
+
__export(constants_exports, {
|
|
31
31
|
DSCheckboxDataTestIds: () => DSCheckboxDataTestIds,
|
|
32
32
|
DSCheckboxName: () => DSCheckboxName,
|
|
33
33
|
DSCheckboxSlots: () => DSCheckboxSlots
|
|
34
34
|
});
|
|
35
|
-
module.exports = __toCommonJS(
|
|
35
|
+
module.exports = __toCommonJS(constants_exports);
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
38
|
const DSCheckboxName = "DSCheckbox";
|
|
@@ -40,7 +40,12 @@ const DSCheckboxSlots = {
|
|
|
40
40
|
CONTAINER: "root",
|
|
41
41
|
INPUT: "input",
|
|
42
42
|
INPUT_WRAPPER: "input-wrapper",
|
|
43
|
-
LABEL: "label"
|
|
43
|
+
LABEL: "label",
|
|
44
|
+
LABEL_TYPOGRAPHY: "label-typography",
|
|
45
|
+
READ_ONLY_HELPER: "read-only-helper",
|
|
46
|
+
TRUNCATED_LABEL: "truncated-label",
|
|
47
|
+
TOOLTIP_CONTAINER: "tooltip-container",
|
|
48
|
+
TOOLTIP_TEXT: "tooltip-text"
|
|
44
49
|
};
|
|
45
50
|
const DSCheckboxDataTestIds = {
|
|
46
51
|
...(0, import_ds_system.slotObjectToDataTestIds)(DSCheckboxName, DSCheckboxSlots),
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;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,OAAG,0CAAwB,gBAAgB,eAAe;AAAA;AAAA,EAE1D,WAAW;AAAA,EACX,OAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -28,9 +28,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var index_exports = {};
|
|
30
30
|
__export(index_exports, {
|
|
31
|
-
DSCheckboxDataTestIds: () =>
|
|
32
|
-
DSCheckboxName: () =>
|
|
33
|
-
DSCheckboxSlots: () =>
|
|
31
|
+
DSCheckboxDataTestIds: () => import_constants.DSCheckboxDataTestIds,
|
|
32
|
+
DSCheckboxName: () => import_constants.DSCheckboxName,
|
|
33
|
+
DSCheckboxSlots: () => import_constants.DSCheckboxSlots,
|
|
34
34
|
DSControlledCheckbox: () => DSControlledCheckbox,
|
|
35
35
|
DSControlledCheckboxWithSchema: () => import_ControlledCheckbox2.DSControlledCheckboxWithSchema,
|
|
36
36
|
PresentationalCheckbox: () => PresentationalCheckbox
|
|
@@ -39,7 +39,7 @@ module.exports = __toCommonJS(index_exports);
|
|
|
39
39
|
var React = __toESM(require("react"));
|
|
40
40
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
41
41
|
var import_ControlledCheckbox = require("./ControlledCheckbox.js");
|
|
42
|
-
var
|
|
42
|
+
var import_constants = require("./constants/index.js");
|
|
43
43
|
var import_ControlledCheckbox2 = require("./ControlledCheckbox.js");
|
|
44
44
|
const DSControlledCheckbox = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlledCheckbox.DSControlledCheckbox, { ...props });
|
|
45
45
|
const PresentationalCheckbox = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ControlledCheckbox.DSControlledCheckbox, { ...props, visualOnly: true });
|
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';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\n\nexport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nexport { DSCheckboxDataTestIds, DSCheckboxName, DSCheckboxSlots } from './
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADO4D;AAPnF,gCAAiD;AAIjD,
|
|
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 { 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADO4D;AAPnF,gCAAiD;AAIjD,uBAAuE;AACvE,IAAAA,6BAA+C;AAExC,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
|
}
|
|
@@ -39,6 +39,7 @@ var import_TruncatedTooltipText = require("../TruncatedTooltipText.js");
|
|
|
39
39
|
var import_styles = require("../styles.js");
|
|
40
40
|
var import_MainInput = require("./MainInput.js");
|
|
41
41
|
var import_ControlledCheckboxCTX = require("../ControlledCheckboxCTX.js");
|
|
42
|
+
var import_constants = require("../constants/index.js");
|
|
42
43
|
const ControlledCheckBoxContent = () => {
|
|
43
44
|
const { propsWithDefault, globalProps, instanceUid, xstyledProps, handleOnChange } = import_react.default.useContext(import_ControlledCheckboxCTX.ControlledCheckBoxContext);
|
|
44
45
|
const {
|
|
@@ -107,10 +108,31 @@ const ControlledCheckBoxContent = () => {
|
|
|
107
108
|
...!disabled && (ariaControls || legacyAriaControls) ? { onClick: handleLabelClick } : {},
|
|
108
109
|
getOwnerProps,
|
|
109
110
|
getOwnerPropsArguments,
|
|
110
|
-
children: wrapLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
111
|
+
children: wrapLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
112
|
+
import_styles.StyledLabelTypography,
|
|
113
|
+
{
|
|
114
|
+
component: "span",
|
|
115
|
+
variant: "b2",
|
|
116
|
+
getOwnerProps,
|
|
117
|
+
getOwnerPropsArguments,
|
|
118
|
+
children: label
|
|
119
|
+
}
|
|
120
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
121
|
+
import_TruncatedTooltipText.TruncatedTooltipText,
|
|
122
|
+
{
|
|
123
|
+
value: label,
|
|
124
|
+
getOwnerProps,
|
|
125
|
+
getOwnerPropsArguments
|
|
126
|
+
}
|
|
127
|
+
)
|
|
111
128
|
}
|
|
112
129
|
),
|
|
113
|
-
readOnly ?
|
|
130
|
+
readOnly ? (
|
|
131
|
+
// READ_ONLY_HELPER is a display:none, SR-only helper — intentionally NOT a getOwnerProps
|
|
132
|
+
// injection point (no consumer use case). The slot/data-testid exist only for naming +
|
|
133
|
+
// QA targeting consistency. Tracked in KNOWN_INTENTIONAL_DEVIATIONS.md.
|
|
134
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledHiddenP, { id: `${instanceUid}-read-only-helper-msg`, "data-testid": import_constants.DSCheckboxDataTestIds.READ_ONLY_HELPER, children: "Read only" })
|
|
135
|
+
) : null
|
|
114
136
|
]
|
|
115
137
|
}
|
|
116
138
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/ControlledCheckBoxContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TruncatedTooltipText } from '../TruncatedTooltipText.js';\nimport { StyledContainer,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwDnB;AAxDJ,mBAAkB;AAClB,8BAA8B;AAC9B,kCAAqC;AACrC,oBAAmG;AACnG,uBAA0B;AAC1B,mCAA0C;AAC1C,uBAAsC;AAE/B,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,kBAAkB,aAAa,aAAa,cAAc,eAAe,IAC/E,aAAAA,QAAM,WAAW,sDAAyB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,UAAU,UAAU,iBAAiB,cAAc,UAAU,IAAI;AAEzE,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,gBAAgB;AAEhF,QAAM,EAAE,cAAc,sBAAsB,IAAI;AAOhD,QAAM,oBAAoB,gBAAgB;AAE1C,QAAM,mBAAmB,aAAAA,QAAM;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,sDAAC,8BAAU;AAAA;AAAA,QACb;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,GAAG,WAAW;AAAA,YAClB,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACC,GAAI,CAAC,aAAa,gBAAgB,sBAAsB,EAAE,SAAS,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,4CAAC,+BAAc,IAAI,GAAG,WAAW,yBAAyB,eAAa,uCAAsB,kBAAkB,uBAE/G;AAAA,YACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -34,7 +34,7 @@ __export(react_desc_prop_types_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
|
-
var
|
|
37
|
+
var import_constants = require("./constants/index.js");
|
|
38
38
|
var import_device = require("./constants/device.js");
|
|
39
39
|
const defaultProps = {
|
|
40
40
|
wrapLabel: false,
|
|
@@ -52,7 +52,7 @@ const defaultProps = {
|
|
|
52
52
|
const propTypes = {
|
|
53
53
|
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
54
54
|
...import_ds_props_helpers.xstyledPropTypes,
|
|
55
|
-
...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(
|
|
55
|
+
...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSCheckboxName, import_constants.DSCheckboxSlots),
|
|
56
56
|
checked: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.bool, import_ds_props_helpers.PropTypes.string]).description("Wheter the checkbox is set as bool or mixed").isRequiredIf((props) => !props.disabled && !props.readOnly).defaultValue(false),
|
|
57
57
|
onChange: import_ds_props_helpers.PropTypes.func.description("function executed when the checkbox changes state").signature("(( newIsChecked: boolean, e: React.SyntheticEvent ) => void )").isRequiredIf(
|
|
58
58
|
(props) => !props.disabled && !props.readOnly && !props.applyAriaDisabled
|
|
@@ -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 { 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;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,uBAAgD;AAChD,oBAAuB;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,OAAG,kDAAyB,iCAAgB,gCAAe;AAAA,EAC3D,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,IACC,CAAC,UAAuC,CAAC,MAAM,YAAY,CAAC,MAAM,YAAY,CAAC,MAAM;AAAA,EACvF;AAAA,EACF,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,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,WAAW,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,KAAK;AAAA,EACjG,uBAAuB,kCAAU,KAC9B,YAAY,6FAA6F,EACzG,aAAa,KAAK;AAAA,EACrB,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
|
@@ -34,16 +34,17 @@ __export(styles_exports, {
|
|
|
34
34
|
StyledInput: () => StyledInput,
|
|
35
35
|
StyledInputMixed: () => StyledInputMixed,
|
|
36
36
|
StyledLabel: () => StyledLabel,
|
|
37
|
-
|
|
37
|
+
StyledLabelTypography: () => StyledLabelTypography
|
|
38
38
|
});
|
|
39
39
|
module.exports = __toCommonJS(styles_exports);
|
|
40
40
|
var React = __toESM(require("react"));
|
|
41
41
|
var import_ds_system = require("@elliemae/ds-system");
|
|
42
|
+
var import_ds_typography = require("@elliemae/ds-typography");
|
|
42
43
|
var import_styleHelpers = require("./utils/styleHelpers.js");
|
|
43
|
-
var
|
|
44
|
+
var import_constants = require("./constants/index.js");
|
|
44
45
|
const StyledCheckBox = (0, import_ds_system.styled)("span", {
|
|
45
|
-
name:
|
|
46
|
-
slot:
|
|
46
|
+
name: import_constants.DSCheckboxName,
|
|
47
|
+
slot: import_constants.DSCheckboxSlots.INPUT_WRAPPER
|
|
47
48
|
})`
|
|
48
49
|
position: relative;
|
|
49
50
|
background: ${({ theme, disabled, applyAriaDisabled, readOnly }) => (0, import_styleHelpers.handleBackgroundColor)(theme, disabled, applyAriaDisabled, readOnly)};
|
|
@@ -130,8 +131,8 @@ const checkboxStyles = import_ds_system.css`
|
|
|
130
131
|
z-index: 1;
|
|
131
132
|
`;
|
|
132
133
|
const StyledInput = (0, import_ds_system.styled)("input", {
|
|
133
|
-
name:
|
|
134
|
-
slot:
|
|
134
|
+
name: import_constants.DSCheckboxName,
|
|
135
|
+
slot: import_constants.DSCheckboxSlots.INPUT
|
|
135
136
|
})`
|
|
136
137
|
${checkboxStyles}
|
|
137
138
|
&:disabled {
|
|
@@ -142,8 +143,8 @@ const StyledInput = (0, import_ds_system.styled)("input", {
|
|
|
142
143
|
}
|
|
143
144
|
`;
|
|
144
145
|
const StyledInputMixed = (0, import_ds_system.styled)("div", {
|
|
145
|
-
name:
|
|
146
|
-
slot:
|
|
146
|
+
name: import_constants.DSCheckboxName,
|
|
147
|
+
slot: import_constants.DSCheckboxSlots.INPUT
|
|
147
148
|
})`
|
|
148
149
|
${checkboxStyles}
|
|
149
150
|
${({ "aria-disabled": disabled }) => disabled ? `&:hover {
|
|
@@ -151,8 +152,8 @@ const StyledInputMixed = (0, import_ds_system.styled)("div", {
|
|
|
151
152
|
}` : ""}
|
|
152
153
|
`;
|
|
153
154
|
const StyledLabel = (0, import_ds_system.styled)("label", {
|
|
154
|
-
name:
|
|
155
|
-
slot:
|
|
155
|
+
name: import_constants.DSCheckboxName,
|
|
156
|
+
slot: import_constants.DSCheckboxSlots.LABEL
|
|
156
157
|
})`
|
|
157
158
|
${({ wrapLabel }) => wrapLabel && `
|
|
158
159
|
overflow-wrap: break-word;
|
|
@@ -160,7 +161,7 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
|
|
|
160
161
|
word-break: break-word;
|
|
161
162
|
`};
|
|
162
163
|
width: fit-content;
|
|
163
|
-
color: ${({ theme, disabled }) => disabled ? theme.colors.neutral[500] : theme.colors.neutral[
|
|
164
|
+
color: ${({ theme, disabled }) => disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};
|
|
164
165
|
line-height: 1.2307rem;
|
|
165
166
|
@media (max-width: ${import_ds_system.th.breakpoint("small")}) {
|
|
166
167
|
line-height: 1rem; /* 13px / 16 */
|
|
@@ -188,16 +189,19 @@ const StyledLabel = (0, import_ds_system.styled)("label", {
|
|
|
188
189
|
`;
|
|
189
190
|
}}
|
|
190
191
|
display: inherit;
|
|
191
|
-
${({ disabled
|
|
192
|
+
${({ disabled }) => disabled ? `&:hover {
|
|
192
193
|
cursor: not-allowed;
|
|
193
194
|
}` : `&:hover {
|
|
194
195
|
cursor: pointer;
|
|
195
196
|
}`}
|
|
196
197
|
`;
|
|
197
|
-
const
|
|
198
|
+
const StyledLabelTypography = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
|
|
199
|
+
name: import_constants.DSCheckboxName,
|
|
200
|
+
slot: import_constants.DSCheckboxSlots.LABEL_TYPOGRAPHY
|
|
201
|
+
})``;
|
|
198
202
|
const StyledContainer = (0, import_ds_system.styled)("div", {
|
|
199
|
-
name:
|
|
200
|
-
slot:
|
|
203
|
+
name: import_constants.DSCheckboxName,
|
|
204
|
+
slot: import_constants.DSCheckboxSlots.CONTAINER
|
|
201
205
|
})`
|
|
202
206
|
${({ device, theme }) => {
|
|
203
207
|
if (device === "mobile") {
|
|
@@ -230,7 +234,10 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
|
|
|
230
234
|
align-items: ${({ wrapLabel }) => wrapLabel ? "flex-start" : "center"};
|
|
231
235
|
${import_ds_system.xStyledCommonProps}
|
|
232
236
|
`;
|
|
233
|
-
const StyledHiddenP = import_ds_system.styled
|
|
237
|
+
const StyledHiddenP = (0, import_ds_system.styled)("p", {
|
|
238
|
+
name: import_constants.DSCheckboxName,
|
|
239
|
+
slot: import_constants.DSCheckboxSlots.READ_ONLY_HELPER
|
|
240
|
+
})`
|
|
234
241
|
display: none;
|
|
235
242
|
`;
|
|
236
243
|
//# sourceMappingURL=styles.js.map
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, th, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { DSControlledCheckboxT } from './react-desc-prop-types.js';\nimport { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';\nimport { DSCheckboxName, DSCheckboxSlots } from './
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAoD;
|
|
4
|
+
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,48 @@
|
|
|
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
|
+
const SlotPropsAsObject = {
|
|
26
|
+
dsCheckboxRoot: { "aria-label": "just a typescript test" },
|
|
27
|
+
dsCheckboxInputWrapper: { "aria-label": "just a typescript test" },
|
|
28
|
+
dsCheckboxInput: { "aria-label": "just a typescript test" },
|
|
29
|
+
dsCheckboxLabel: { "aria-label": "just a typescript test" },
|
|
30
|
+
dsCheckboxLabelTypography: { "aria-label": "just a typescript test" },
|
|
31
|
+
dsCheckboxReadOnlyHelper: { "aria-label": "just a typescript test" },
|
|
32
|
+
dsCheckboxTruncatedLabel: { "aria-label": "just a typescript test" },
|
|
33
|
+
dsCheckboxTooltipContainer: { "aria-label": "just a typescript test" },
|
|
34
|
+
dsCheckboxTooltipText: { "aria-label": "just a typescript test" }
|
|
35
|
+
};
|
|
36
|
+
const SlotPropsAsFunctions = {
|
|
37
|
+
dsCheckboxRoot: () => ({ "aria-label": "just a typescript test" }),
|
|
38
|
+
dsCheckboxInputWrapper: () => ({ "aria-label": "just a typescript test" }),
|
|
39
|
+
dsCheckboxInput: () => ({ "aria-label": "just a typescript test" }),
|
|
40
|
+
dsCheckboxLabel: () => ({ "aria-label": "just a typescript test" }),
|
|
41
|
+
dsCheckboxLabelTypography: () => ({ "aria-label": "just a typescript test" }),
|
|
42
|
+
dsCheckboxReadOnlyHelper: () => ({ "aria-label": "just a typescript test" }),
|
|
43
|
+
dsCheckboxTruncatedLabel: () => ({ "aria-label": "just a typescript test" }),
|
|
44
|
+
dsCheckboxTooltipContainer: () => ({ "aria-label": "just a typescript test" }),
|
|
45
|
+
dsCheckboxTooltipText: () => ({ "aria-label": "just a typescript test" })
|
|
46
|
+
};
|
|
47
|
+
const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
|
|
48
|
+
//# 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,YAAuB;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
|
+
}
|