@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/dist/commonjs/card/lib/Card.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,33 +18,57 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var layout_1 = require("@workday/canvas-kit-react/layout");
-var CardHeading_1 = require("./CardHeading");
-var CardBody_1 = require("./CardBody");
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const CardHeading_1 = require("./CardHeading");
+const CardBody_1 = require("./CardBody");
+/**
+ * `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
+ * {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
+ * replaced using the `as` prop, or a `role` or other `aria-*` attributes can be added to give
+ * `Card` semantic meaning.
+ *
+ * **Note**: Changing the `Card` container to certain semantic elements will put accessibility at
+ * risk. For example, using the `as` prop to change the cards to buttons will flatten the content in
+ * the card. Headings, calls to action, etc. will not function as expected for users with
+ * disabilities. Semantic container elements like `<section>`, or using `<li>` grouped together in a
+ * common `<ul>` can be a useful way to elevate the accessibility of your design.
+ */
 exports.Card = common_1.createComponent('div')({
     displayName: 'Card',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(layout_1.Box, __assign({ ref: ref, as: Element, depth: 1, padding: "l", backgroundColor: "frenchVanilla100", border: "1px solid " + tokens_1.colors.soap500, borderRadius: "l" }, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(layout_1.Box, Object.assign({ ref: ref, as: Element, depth: 1, padding: "l", backgroundColor: "frenchVanilla100", border: `1px solid ${tokens_1.colors.soap500}`, borderRadius: "l" }, elemProps), children));
     },
     subComponents: {
+        /**
+         * `Card.Heading` is an optional subcomponent that is meant to describe the Card. Since `Card`
+         * is a non-semantic presentational component, `Card.Heading` does not automatically have any
+         * semantic meaning. If your use case requires the Heading to label the Card, you must do so
+         * manually.
+         *
+         * For example, {@link Modal} (which uses a `Card`) adds an `aria-labelledby` and a `role` to
+         * the `Card`, as well as an `id` to the `Card.Heading`.
+         *
+         * ```tsx
+         * <Card role="dialog" aria-labelledby="card-heading">
+         *   <Card.Heading id="card-heading">Card Title</Card.Heading>
+         *   <Card.Body>Card Contents</Card.Body>
+         * </Card>
+         * ```
+         *
+         * `Card.Heading` defaults to an `<h3>` element, but it can be changed using the `as` prop.
+         */
         Heading: CardHeading_1.CardHeading,
+        /**
+         * `Card.Body` is a non-semantic subcomponent that contains the body of the card. Attributes may
+         * be added to give `Card.Body` semantic meaning. If `Card.Body` is brief (like in a short
+         * dialog), it may be helpful to add an `aria-describedby` referencing the `id` of the
+         * `Card.Body` to the `Card` container.
+         */
         Body: CardBody_1.CardBody,
     },
 });

package/dist/commonjs/card/lib/CardBody.d.ts

@@ -1,2 +1,2 @@
-export declare const CardBody: import("../../common").ElementComponent<"div", import("../../layout").CommonStyleProps>;
+export declare const CardBody: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps>;
 //# sourceMappingURL=CardBody.d.ts.map

package/dist/commonjs/card/lib/CardBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardBody.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardBody.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,yFASnB,CAAC"}
+{"version":3,"file":"CardBody.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardBody.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,8hCASnB,CAAC"}

package/dist/commonjs/card/lib/CardBody.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,27 +18,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardBody = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var layout_1 = require("@workday/canvas-kit-react/layout");
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
 exports.CardBody = common_1.createComponent('div')({
     displayName: 'Card.Body',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(layout_1.Box, __assign({ ref: ref, as: Element }, tokens_1.type.levels.subtext.large, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(layout_1.Box, Object.assign({ ref: ref, as: Element }, tokens_1.type.levels.subtext.large, elemProps), children));
     },
 });

package/dist/commonjs/card/lib/CardHeading.d.ts

@@ -7,5 +7,5 @@ export interface CardHeadingProps extends BoxProps {
     id?: string;
     children?: React.ReactNode;
 }
-export declare const CardHeading: import("../../common").ElementComponent<"h3", CardHeadingProps>;
+export declare const CardHeading: import("@workday/canvas-kit-react/common").ElementComponent<"h3", CardHeadingProps>;
 //# sourceMappingURL=CardHeading.d.ts.map

package/dist/commonjs/card/lib/CardHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeading.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG1D,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,iEAiBtB,CAAC"}
+{"version":3,"file":"CardHeading.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG1D,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,qFAiBtB,CAAC"}

package/dist/commonjs/card/lib/CardHeading.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,26 +18,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardHeading = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var text_1 = require("@workday/canvas-kit-react/text");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const text_1 = require("@workday/canvas-kit-react/text");
 exports.CardHeading = common_1.createComponent('h3')({
     displayName: 'Card.Heading',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(text_1.Text, __assign({ ref: ref, typeLevel: "body.large", fontWeight: "bold", marginBottom: "m", marginTop: 0, as: Element }, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(text_1.Text, Object.assign({ ref: ref, typeLevel: "body.large", fontWeight: "bold", marginBottom: "m", marginTop: 0, as: Element }, elemProps), children));
     },
 });

package/dist/commonjs/checkbox/lib/Checkbox.d.ts

@@ -13,7 +13,7 @@ export interface CheckboxProps extends Themeable {
     disabled?: boolean;
     /**
      * The HTML `id` of the underlying checkbox input element. This is required if `label` is defined as a non-empty string.
-     * @default A uniquely generated id
+     * @default {useUniqueId}
      */
     id?: string;
     /**
@@ -43,7 +43,7 @@ export interface CheckboxProps extends Themeable {
      */
     variant?: 'inverse' | undefined;
 }
-export declare const Checkbox: import("../../common").ElementComponent<"input", CheckboxProps> & {
+export declare const Checkbox: import("@workday/canvas-kit-react/common").ElementComponent<"input", CheckboxProps> & {
     ErrorType: typeof ErrorType;
 };
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/commonjs/checkbox/lib/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAM1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAqPD,eAAO,MAAM,QAAQ;;CAyEnB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAM1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAqPD,eAAO,MAAM,QAAQ;;CAmEnB,CAAC"}

package/dist/commonjs/checkbox/lib/Checkbox.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,32 +18,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var text_1 = require("@workday/canvas-kit-react/text");
-var checkboxHeight = 18;
-var checkboxTapArea = tokens_1.spaceNumbers.m;
-var checkboxContainerHeight = checkboxTapArea;
-var checkboxLabelDistance = tokens_1.spaceNumbers.xs;
-var checkboxWidth = 18;
-var rippleRadius = (tokens_1.spaceNumbers.l - checkboxWidth) / 2;
-var CheckboxContainer = common_1.styled('div')({
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const text_1 = require("@workday/canvas-kit-react/text");
+const checkboxHeight = 18;
+const checkboxTapArea = tokens_1.spaceNumbers.m;
+const checkboxContainerHeight = checkboxTapArea;
+const checkboxLabelDistance = tokens_1.spaceNumbers.xs;
+const checkboxWidth = 18;
+const rippleRadius = (tokens_1.spaceNumbers.l - checkboxWidth) / 2;
+const CheckboxContainer = common_1.styled('div')({
     display: 'flex',
     alignItems: 'center',
     minHeight: checkboxContainerHeight,
@@ -65,74 +43,94 @@ var CheckboxContainer = common_1.styled('div')({
  * :hover on the checkbox when you hover on it's corresponding label.
  * This stops the ripple from showing when you hover on the label.
  */
-var CheckboxInputWrapper = common_1.styled('div')({
+const CheckboxInputWrapper = common_1.styled('div')({
     display: 'flex',
     height: checkboxHeight,
     minWidth: checkboxWidth,
     marginTop: '3px',
     alignSelf: 'flex-start',
 });
-var CheckboxRipple = common_1.styled('span')({
+const CheckboxRipple = common_1.styled('span')({
     borderRadius: tokens_1.borderRadius.circle,
-    boxShadow: "0 0 0 0 " + tokens_1.colors.soap200,
+    boxShadow: `0 0 0 0 ${tokens_1.colors.soap200}`,
     height: checkboxHeight,
     transition: 'box-shadow 150ms ease-out',
     width: checkboxWidth,
     position: 'absolute',
-    pointerEvents: 'none',
-}, function (_a) {
-    var variant = _a.variant;
-    return ({
-        opacity: variant === 'inverse' ? '0.4' : '1',
-    });
-});
+    pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
+}, ({ variant }) => ({
+    opacity: variant === 'inverse' ? '0.4' : '1',
+}));
 /**
  * Note: `~ div:first-of-type` refers to `CheckboxBackground`
  * and was easier to use than a component selector in this case.
  */
-var CheckboxInput = common_1.styled('input')(function (_a) {
-    var _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline, variant = _a.variant;
-    return (__assign({ borderRadius: tokens_1.borderRadius.s, width: checkboxTapArea, height: checkboxTapArea, margin: 0, marginTop: '-3px', marginLeft: '-3px', position: 'absolute', opacity: 0, '&:not(:disabled)': {
-            cursor: 'pointer',
-        }, 
-        // States
-        '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
-            '~ div:first-of-type': {
-                borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.hoverBorder,
-            },
-        }, '&:checked ~ div:first-of-type': {
-            borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.main,
-            backgroundColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main,
-        }, '&:disabled ~ div:first-of-type': {
-            borderColor: tokens_1.inputColors.disabled.border,
-            backgroundColor: variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.disabled.background,
-            opacity: variant === 'inverse' ? '.4' : '1',
-        }, '&:disabled:checked ~ div:first-of-type': {
-            borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.light,
-            backgroundColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.light,
-        }, 
-        // Focus
-        '&:focus, &:active': {
-            outline: 'none',
-        }, '&:focus ~ div:first-of-type': __assign({ borderColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : themePrimary.main, borderWidth: '2px', boxShadow: 'none' }, common_1.focusRing({
+const CheckboxInput = common_1.styled('input')(({ theme: { canvas: { palette: { primary: themePrimary, common: { focusOutline: themeFocusOutline }, }, }, }, variant, }) => ({
+    borderRadius: tokens_1.borderRadius.s,
+    width: checkboxTapArea,
+    height: checkboxTapArea,
+    margin: 0,
+    marginTop: '-3px',
+    marginLeft: '-3px',
+    position: 'absolute',
+    opacity: 0,
+    '&:not(:disabled)': {
+        cursor: 'pointer',
+    },
+    // States
+    '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
+        '~ div:first-of-type': {
+            borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.hoverBorder,
+        },
+    },
+    '&:checked ~ div:first-of-type': {
+        borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.main,
+        backgroundColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main,
+    },
+    '&:disabled ~ div:first-of-type': {
+        borderColor: tokens_1.inputColors.disabled.border,
+        backgroundColor: variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.disabled.background,
+        opacity: variant === 'inverse' ? '.4' : '1',
+    },
+    '&:disabled:checked ~ div:first-of-type': {
+        borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.light,
+        backgroundColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.light,
+    },
+    // Focus
+    '&:focus, &:active': {
+        outline: 'none',
+    },
+    '&:focus ~ div:first-of-type': {
+        borderColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : themePrimary.main,
+        borderWidth: '2px',
+        boxShadow: 'none',
+        ...common_1.focusRing({
             width: variant === 'inverse' ? 2 : 0,
             separation: 0,
             animate: false,
             innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
             outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : undefined,
-        })), '&:checked:focus ~ div:first-of-type': __assign(__assign({}, common_1.focusRing({
+        }),
+    },
+    '&:checked:focus ~ div:first-of-type': {
+        ...common_1.focusRing({
             width: 2,
             separation: 2,
             animate: false,
             innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
             outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
-        })), { borderColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main, borderWidth: '2px', '& span': {
-                marginLeft: '-7px',
-            } }) }, common_1.mouseFocusBehavior({
+        }),
+        borderColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main,
+        borderWidth: '2px',
+        '& span': {
+            marginLeft: '-7px',
+        },
+    },
+    ...common_1.mouseFocusBehavior({
         '&:focus ~ div:first-of-type': {
             border: variant === 'inverse'
-                ? "1px solid " + tokens_1.colors.soap300
-                : "1px solid " + tokens_1.inputColors.hoverBorder,
+                ? `1px solid ${tokens_1.colors.soap300}`
+                : `1px solid ${tokens_1.inputColors.hoverBorder}`,
             boxShadow: 'none',
             '& span': {
                 marginLeft: '-6px',
@@ -145,41 +143,47 @@ var CheckboxInput = common_1.styled('input')(function (_a) {
             borderColor: themePrimary.light,
             backgroundColor: variant === 'inverse' ? tokens_1.colors.soap300 : themePrimary.light,
         },
-    })));
-}, function (_a) {
-    var disabled = _a.disabled;
-    return ({
-        '&:hover ~ span:first-of-type': {
-            boxShadow: disabled ? undefined : "0 0 0 " + rippleRadius + "px " + tokens_1.colors.soap200,
-        },
-    });
-}, function (_a) {
-    var theme = _a.theme, error = _a.error, variant = _a.variant;
-    var errorColors = common_1.getErrorColors(error, theme);
+    }),
+}), ({ disabled }) => ({
+    '&:hover ~ span:first-of-type': {
+        boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}px ${tokens_1.colors.soap200}`,
+    },
+}), ({ theme, error, variant }) => {
+    const errorColors = common_1.getErrorColors(error, theme);
     if (errorColors.outer === errorColors.inner) {
         errorColors.outer = 'transparent';
     }
-    var errorStyles = {
+    const errorStyles = {
         '& ~ div:first-of-type': {
-            border: variant === 'inverse' ? "1px solid " + tokens_1.colors.soap300 : "1px solid " + errorColors.inner,
-            boxShadow: "0 0 0 1px " + errorColors.inner + ", 0 0 0 2px " + errorColors.outer,
+            border: variant === 'inverse' ? `1px solid ${tokens_1.colors.soap300}` : `1px solid ${errorColors.inner}`,
+            boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
         },
         '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
             '~ div:first-of-type': {
-                borderColor: variant === 'inverse' ? "1px solid " + tokens_1.colors.soap300 : errorColors.inner,
+                borderColor: variant === 'inverse' ? `1px solid ${tokens_1.colors.soap300}` : errorColors.inner,
             },
         },
         '&:checked ~ div:first-of-type': {
             borderColor: variant === 'inverse' ? tokens_1.colors.soap300 : theme.canvas.palette.primary.main,
-            boxShadow: "\n              0 0 0 2px " + tokens_1.colors.frenchVanilla100 + ",\n              0 0 0 4px " + errorColors.inner + ",\n              0 0 0 5px " + errorColors.outer,
+            boxShadow: `
+              0 0 0 2px ${tokens_1.colors.frenchVanilla100},
+              0 0 0 4px ${errorColors.inner},
+              0 0 0 5px ${errorColors.outer}`,
         },
     };
-    return __assign(__assign({}, common_1.mouseFocusBehavior(__assign(__assign({}, errorStyles), { '&:not(:checked):focus ~ div:first-of-type': {
-            border: "1px solid " + errorColors.inner,
-            boxShadow: "0 0 0 1px " + errorColors.inner + ", 0 0 0 2px " + errorColors.outer,
-        } }))), errorStyles);
+    return {
+        // Error rings take precedence over focus
+        ...common_1.mouseFocusBehavior({
+            ...errorStyles,
+            '&:not(:checked):focus ~ div:first-of-type': {
+                border: `1px solid ${errorColors.inner}`,
+                boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
+            },
+        }),
+        ...errorStyles,
+    };
 });
-var CheckboxBackground = common_1.styled('div')({
+const CheckboxBackground = common_1.styled('div')({
     alignItems: 'center',
     backgroundColor: tokens_1.colors.frenchVanilla100,
     borderRadius: tokens_1.borderRadius.s,
@@ -192,13 +196,10 @@ var CheckboxBackground = common_1.styled('div')({
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
     width: checkboxWidth,
-}, function (_a) {
-    var variant = _a.variant;
-    return ({
-        border: "1px solid " + (variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.border),
-    });
-});
-var CheckboxCheck = common_1.styled('div')({
+}, ({ variant }) => ({
+    border: `1px solid ${variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.border}`,
+}));
+const CheckboxCheck = common_1.styled('div')({
     display: 'flex',
     flexDirection: 'column',
     // When using align-items: center on a flex container in the column direction,
@@ -214,44 +215,34 @@ var CheckboxCheck = common_1.styled('div')({
         marginLeft: '-6px',
         transition: 'margin 200ms ease',
     },
-}, function (_a) {
-    var checked = _a.checked;
-    return ({
-        opacity: checked ? 1 : 0,
-        transform: checked ? 'scale(1)' : 'scale(0.5)',
-    });
-});
-var IndeterminateBox = common_1.styled('div')({
+}, ({ checked }) => ({
+    opacity: checked ? 1 : 0,
+    transform: checked ? 'scale(1)' : 'scale(0.5)',
+}));
+const IndeterminateBox = common_1.styled('div')({
     width: '10px',
     height: '2px',
-}, function (_a) {
-    var theme = _a.theme, variant = _a.variant;
-    return ({
-        backgroundColor: variant === 'inverse'
-            ? theme.canvas.palette.primary.main
-            : theme.canvas.palette.primary.contrast,
-    });
-});
+}, ({ theme, variant }) => ({
+    backgroundColor: variant === 'inverse'
+        ? theme.canvas.palette.primary.main
+        : theme.canvas.palette.primary.contrast,
+}));
 exports.Checkbox = common_1.createComponent('input')({
     displayName: 'Checkbox',
-    Component: function (_a, ref, Element) {
-        var _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.label, label = _c === void 0 ? '' : _c, 
-        // TODO: Fix useTheme and make it a real hook
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        _d = _a.theme, 
-        // TODO: Fix useTheme and make it a real hook
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _d === void 0 ? common_1.useTheme() : _d, id = _a.id, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, error = _a.error, indeterminate = _a.indeterminate, variant = _a.variant, elemProps = __rest(_a, ["checked", "label", "theme", "id", "disabled", "onChange", "value", "error", "indeterminate", "variant"]);
-        var inputId = common_1.useUniqueId(id);
+    Component: ({ checked = false, label = '', 
+    // TODO: Fix useTheme and make it a real hook
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    theme = common_1.useTheme(), id, disabled, indeterminate, variant, ...elemProps }, ref, Element) => {
+        const inputId = common_1.useUniqueId(id);
         return (React.createElement(CheckboxContainer, null,
             React.createElement(CheckboxInputWrapper, { disabled: disabled },
-                React.createElement(CheckboxInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, type: "checkbox", value: value, error: error, variant: variant, "aria-checked": indeterminate ? 'mixed' : checked }, elemProps)),
+                React.createElement(CheckboxInput, Object.assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, type: "checkbox", variant: variant, "aria-checked": indeterminate ? 'mixed' : checked }, elemProps)),
                 React.createElement(CheckboxRipple, { variant: variant }),
                 React.createElement(CheckboxBackground, { variant: variant, checked: checked, disabled: disabled },
                     React.createElement(CheckboxCheck, { checked: checked }, indeterminate ? (React.createElement(IndeterminateBox, { variant: variant })) : (React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.checkSmallIcon, color: variant === 'inverse'
                             ? theme.canvas.palette.primary.main
                             : theme.canvas.palette.primary.contrast }))))),
-            label && (React.createElement(text_1.LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingLeft: checkboxLabelDistance }, label))));
+            label && (React.createElement(text_1.LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingInlineStart: checkboxLabelDistance }, label))));
     },
     subComponents: {
         ErrorType: common_1.ErrorType,

package/dist/commonjs/collection/index.d.ts

@@ -8,9 +8,13 @@ export * from './lib/useListRenderItem';
 export * from './lib/useListResetCursorOnBlur';
 export * from './lib/useListItemRovingFocus';
 export * from './lib/useListItemSelect';
+export * from './lib/useListKeyboardHandler';
+export * from './lib/useListLoader';
 export * from './lib/useListModel';
 export * from './lib/useGridModel';
-export { ListBox } from './lib/ListBox';
+export * from './lib/useListActiveDescendant';
+export * from './lib/useListItemAllowChildStrings';
+export { ListBox, ListBoxProps } from './lib/ListBox';
 export { singleSelectionManager, multiSelectionManager, isSelected, } from './lib/useSelectionListModel';
 export { wrappingNavigationManager, navigationManager } from './lib/useCursorListModel';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/collection/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../collection/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,IAAI,EAAC,MAAM,wBAAwB,CAAC;AAC1D,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AACtC,OAAO,EACL,sBAAsB,EACtB,qBAAqB,EACrB,UAAU,GACX,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAC,yBAAyB,EAAE,iBAAiB,EAAC,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../collection/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,IAAI,EAAC,MAAM,wBAAwB,CAAC;AAC1D,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,OAAO,EAAC,OAAO,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AACpD,OAAO,EACL,sBAAsB,EACtB,qBAAqB,EACrB,UAAU,GACX,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAC,yBAAyB,EAAE,iBAAiB,EAAC,MAAM,0BAA0B,CAAC"}

package/dist/commonjs/collection/index.js

@@ -22,8 +22,12 @@ __exportStar(require("./lib/useListRenderItem"), exports);
 __exportStar(require("./lib/useListResetCursorOnBlur"), exports);
 __exportStar(require("./lib/useListItemRovingFocus"), exports);
 __exportStar(require("./lib/useListItemSelect"), exports);
+__exportStar(require("./lib/useListKeyboardHandler"), exports);
+__exportStar(require("./lib/useListLoader"), exports);
 __exportStar(require("./lib/useListModel"), exports);
 __exportStar(require("./lib/useGridModel"), exports);
+__exportStar(require("./lib/useListActiveDescendant"), exports);
+__exportStar(require("./lib/useListItemAllowChildStrings"), exports);
 var ListBox_1 = require("./lib/ListBox");
 Object.defineProperty(exports, "ListBox", { enumerable: true, get: function () { return ListBox_1.ListBox; } });
 var useSelectionListModel_1 = require("./lib/useSelectionListModel");