@workday/canvas-kit-react 8.0.0 → 8.0.1

package/dist/commonjs/popup/lib/PopupCard.js

@@ -58,21 +58,29 @@ var popupAnimation = function (transformOrigin) {
     var translate = common_1.getTranslateFromOrigin(transformOrigin, tokens_1.space.xxs);
     return react_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "], ["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "])), translate.x, translate.y);
 };
-var StyledPopupCard = common_1.styled(card_1.Card)(tokens_1.type.levels.subtext.large, function (_a) {
-    var transformOrigin = _a.transformOrigin;
+var StyledPopupCard = common_1.styled(card_1.Card)(function (_a) {
+    var _b;
+    var transformOrigin = _a.transformOrigin, theme = _a.theme;
     if (transformOrigin == null) {
         return {};
     }
-    return {
-        animation: popupAnimation(transformOrigin),
-        animationDuration: '150ms',
-        animationTimingFunction: 'ease-out',
-        transformOrigin: transformOrigin.vertical + " " + transformOrigin.horizontal,
+    return _b = {
+            animation: popupAnimation(transformOrigin),
+            animationDuration: '150ms',
+            animationTimingFunction: 'ease-out',
+            transformOrigin: transformOrigin.vertical + " " + transformOrigin.horizontal
+        },
+        _b[theme.canvas.breakpoints.down('s')] = {
+            animation: popupAnimation({ vertical: 'bottom', horizontal: 'center' }),
+            animationDuration: '150ms',
+            animationTimingFunction: 'ease-out',
+            transformOrigin: 'bottom center',
+        },
         // Allow overriding of animation in special cases
-        '.wd-no-animation &': {
+        _b['.wd-no-animation &'] = {
             animation: 'none',
         },
-    };
+        _b;
 });
 exports.PopupCard = common_1.createSubcomponent('div')({
     displayName: 'Popup.Card',
@@ -83,9 +91,8 @@ exports.PopupCard = common_1.createSubcomponent('div')({
     var transformOrigin = React.useMemo(function () {
         return getTransformFromPlacement_1.getTransformFromPlacement(model.state.placement || 'bottom');
     }, [model.state.placement]);
-    // As is a Stack that will render an element of `Element`
-    var As = common_1.useConstant(function () { return layout_1.Stack.as(Element); });
-    return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 5, maxWidth: "calc(100vw - " + tokens_1.space.l + ")", spacing: 0, flexDirection: "column", minHeight: 0, maxHeight: "calc(100vh - " + (elemProps.margin ? tokens_1.space[elemProps.margin] || elemProps.margin : tokens_1.space.xl) + " * 2)", overflowY: "auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
-     }, elemProps), children));
+    // As is a Flex that will render an element of `Element`
+    var As = common_1.useConstant(function () { return layout_1.Flex.as(Element); });
+    return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", depth: 5, maxWidth: "calc(100vw - " + tokens_1.space.l + ")", flexDirection: "column", minHeight: 0, padding: "m", maxHeight: "calc(100vh - " + (elemProps.margin ? tokens_1.space[elemProps.margin] || elemProps.margin : tokens_1.space.xl) + " * 2)", overflowY: "auto" }, tokens_1.type.levels.subtext.large, elemProps), children));
 });
 var templateObject_1;

package/dist/commonjs/popup/lib/PopupCloseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupCloseButton.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCloseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;EAM3B,CAAC"}
+{"version":3,"file":"PopupCloseButton.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCloseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;EAU3B,CAAC"}

package/dist/commonjs/popup/lib/PopupCloseButton.js

@@ -52,5 +52,5 @@ exports.PopupCloseButton = common_1.createSubcomponent(button_1.SecondaryButton)
     elemPropsHook: hooks_1.usePopupCloseButton,
 })(function (_a, Element) {
     var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return React.createElement(Element, __assign({}, elemProps), children);
+    return (React.createElement(Element, __assign({ type: "button" }, elemProps), children));
 });

package/dist/commonjs/popup/lib/PopupCloseIcon.js

@@ -43,5 +43,5 @@ exports.PopupCloseIcon = common_1.createSubcomponent('button')({
     elemPropsHook: hooks_1.usePopupCloseButton,
 })(function (_a, Element) {
     var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return react_1.default.createElement(StyledCloseIcon, __assign({ as: Element, size: "medium", icon: canvas_system_icons_web_1.xIcon }, elemProps));
+    return react_1.default.createElement(StyledCloseIcon, __assign({ as: Element, size: "medium", icon: canvas_system_icons_web_1.xIcon, type: "button" }, elemProps));
 });

package/dist/commonjs/popup/lib/PopupHeading.js

@@ -52,5 +52,5 @@ exports.PopupHeading = common_1.createSubcomponent('h2')({
     elemPropsHook: hooks_1.usePopupHeading,
 })(function (_a, Element) {
     var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return (React.createElement(card_1.Card.Heading, __assign({ as: Element, marginBottom: "s" }, elemProps), children));
+    return (React.createElement(card_1.Card.Heading, __assign({ as: Element, marginBottom: "xxs", padding: "xxs" }, elemProps), children));
 });

package/dist/commonjs/popup/lib/PopupPopper.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Placement, PopperOptions } from './Popper';
-export interface PopupPopperProps {
+import { Placement, PopperOptions, PopperProps } from './Popper';
+export interface PopupPopperProps extends PopperProps {
     /**
      * The placement of the `Popper` contents relative to the `anchorElement`. Accepts `auto`, `top`,
      * `right`, `bottom`, or `left`. Each placement can also be modified using any of the following
@@ -12,7 +12,6 @@ export interface PopupPopperProps {
      * The additional options passed to the Popper's `popper.js` instance.
      */
     popperOptions?: Partial<PopperOptions>;
-    children?: React.ReactNode;
 }
 export declare const PopupPopper: import("../../common").ElementComponentM<"div", PopupPopperProps, {
     state: {

package/dist/commonjs/popup/lib/PopupPopper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,EAAS,MAAM,UAAU,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;EAMtB,CAAC"}
+{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,EAAU,WAAW,EAAC,MAAM,UAAU,CAAC;AAEvE,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;EAMtB,CAAC"}

package/dist/commonjs/popup/lib/hooks/index.d.ts

@@ -4,6 +4,7 @@ export * from './useBringToTopOnClick';
 export * from './useCloseOnEscape';
 export * from './useCloseOnFullscreenExit';
 export * from './useCloseOnOutsideClick';
+export * from './useCloseOnTargetHidden';
 export * from './useDisableBodyScroll';
 export * from './useFocusRedirect';
 export * from './useFocusTrap';

package/dist/commonjs/popup/lib/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC"}

package/dist/commonjs/popup/lib/hooks/index.js

@@ -16,6 +16,7 @@ __exportStar(require("./useBringToTopOnClick"), exports);
 __exportStar(require("./useCloseOnEscape"), exports);
 __exportStar(require("./useCloseOnFullscreenExit"), exports);
 __exportStar(require("./useCloseOnOutsideClick"), exports);
+__exportStar(require("./useCloseOnTargetHidden"), exports);
 __exportStar(require("./useDisableBodyScroll"), exports);
 __exportStar(require("./useFocusRedirect"), exports);
 __exportStar(require("./useFocusTrap"), exports);

package/dist/commonjs/popup/lib/hooks/useCloseOnTargetHidden.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+/**
+ * Sets up an
+ * [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * for the target element. When the target is detected as being less than 50% visible, the popup
+ * will close. Most likely, this will happen if the user scrolls an overflowed content area of the
+ * page and the target is no longer visible.
+ *
+ * This should be used with popup elements that are transitory like Tooltips and dropdown menus.
+ */
+export declare const useCloseOnTargetHidden: <P extends {}, R>(model: {
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../..").Visibility;
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    };
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
+//# sourceMappingURL=useCloseOnTargetHidden.d.ts.map

package/dist/commonjs/popup/lib/hooks/useCloseOnTargetHidden.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCloseOnTargetHidden.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnTargetHidden.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuB1B;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;OAiCjC,CAAC"}

package/dist/commonjs/popup/lib/hooks/useCloseOnTargetHidden.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCloseOnTargetHidden = void 0;
+var react_1 = __importDefault(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var popup_1 = require("@workday/canvas-kit-react/popup");
+function getScrollParent(element) {
+    if (element === document.body || !element.parentElement) {
+        return element;
+    }
+    var styles = getComputedStyle(element);
+    if (styles.overflowY === 'scroll' ||
+        styles.overflowY === 'auto' ||
+        styles.overflowX === 'scroll' ||
+        styles.overflowX === 'auto') {
+        return element;
+    }
+    return getScrollParent(element.parentElement);
+}
+/**
+ * Sets up an
+ * [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * for the target element. When the target is detected as being less than 50% visible, the popup
+ * will close. Most likely, this will happen if the user scrolls an overflowed content area of the
+ * page and the target is no longer visible.
+ *
+ * This should be used with popup elements that are transitory like Tooltips and dropdown menus.
+ */
+exports.useCloseOnTargetHidden = common_1.createElemPropsHook(popup_1.usePopupModel)(function (model) {
+    var visible = model.state.visibility !== 'hidden';
+    var callback = react_1.default.useCallback(function (entries) {
+        if (entries[0].intersectionRatio < 0.5) {
+            model.events.hide();
+        }
+    }, [model.events]);
+    react_1.default.useLayoutEffect(function () {
+        if (!visible || !model.state.targetRef.current) {
+            return;
+        }
+        var target = model.state.targetRef.current;
+        var scrollParent = getScrollParent(target);
+        // eslint-disable-next-line compat/compat
+        var observer = new IntersectionObserver(callback, {
+            root: scrollParent,
+            threshold: 0.5,
+        });
+        observer.observe(model.state.targetRef.current);
+        return function () {
+            observer.disconnect();
+        };
+    }, [callback, model.state.targetRef, visible]);
+    return {};
+});

package/dist/commonjs/popup/lib/hooks/useReturnFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;OAezB,CAAC"}
+{"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiC1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;OAgGzB,CAAC"}

package/dist/commonjs/popup/lib/hooks/useReturnFocus.js

@@ -7,6 +7,29 @@ exports.useReturnFocus = void 0;
 var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var usePopupModel_1 = require("./usePopupModel");
+var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
+function getScrollParent(element) {
+    if (element === document.body || !element.parentElement) {
+        return element;
+    }
+    var styles = getComputedStyle(element);
+    if (styles.overflowY === 'scroll' || styles.overflowY === 'auto') {
+        return element;
+    }
+    return getScrollParent(element.parentElement);
+}
+/**
+ * Get a focusable element in an element's tree
+ */
+function getFocusableElement(element) {
+    if (element === null || element === document.body || !element.parentElement) {
+        return null;
+    }
+    else if (common_1.isFocusable(element)) {
+        return element;
+    }
+    return getFocusableElement(element.parentElement);
+}
 /**
  * Returns focus to the target element when the popup is hidden. This works well with
  * `useInitialFocus`. This should be used with `useFocusRedirect` or `useFocusTrap` for a complete
@@ -16,15 +39,86 @@ var usePopupModel_1 = require("./usePopupModel");
  */
 exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
     var visible = model.state.visibility !== 'hidden';
+    var elementRef = react_1.default.useRef(null);
+    // This boolean tracks keyboard-driven focus changes. This is required for `useFocusRedirect` as
+    // focus redirection needs synchronous focus management and everything else needs asynchronous
+    // focus management.
+    var requiresFocusChangeRef = react_1.default.useRef(false);
+    var onKeyDown = react_1.default.useCallback(function (event) {
+        // The tab key changes focus
+        if (event.key === 'Tab') {
+            requiresFocusChangeRef.current = true;
+        }
+    }, []);
+    // track mousedown events to determine if the mouse target is a focusable element. If it is, we
+    // should not return focus
+    var onMouseDown = react_1.default.useCallback(function (event) {
+        if (model.state.stackRef.current && event.target instanceof HTMLElement) {
+            if (!canvas_kit_popup_stack_1.PopupStack.contains(model.state.stackRef.current, event.target)) {
+                elementRef.current = event.target;
+            }
+        }
+    }, [model.state.stackRef]);
+    // We use `useLayoutEffect` because the callback will be called _before_ the browser changes
+    // focus. This allows the browser to change focus as normal. For example, if the popup closes
+    // because the user hits the tab key when focused on the last focusable element,
+    // `useFocusRedirect` will cause the popup to close before the browser is finished processing the
+    // `keydown`. The browser's default action of a keydown of a tab key is to advance focus to the
+    // next focusable element. This means that the `useFocusRedirect` will change focus back to the
+    // target, then the tab key is processed by the browser to focus on the next item after the target
+    // without us having to use a focus manager to guess what the next focusable element is.
+    //
+    // But because we're using `useLayoutEffect` instead of `useEffect`, we cannot use
+    // `document.activeElement` (because the focus hasn't changed yet because the browser hasn't
+    // triggered a default action yet) to determine if a user clicked on something that can accept
+    // focus itself. If we don't short-circuit return focus, the user will intend to click on an
+    // `input` element only to get focus changed back. This is annoying to users and unintuitive. Instead,
+    // we'll use `mousedown` and `mouseup` to determine if we're closing because of a mouse click.
     react_1.default.useLayoutEffect(function () {
         if (!visible) {
             return;
         }
         // capture the element here. The refs will be null by the time the cleanup function is called
-        var element = (model.state.returnFocusRef || model.state.targetRef).current;
+        var element = (model.state.returnFocusRef || model.state.targetRef)
+            .current;
+        document.addEventListener('mousedown', onMouseDown, true);
+        document.addEventListener('keydown', onKeyDown, true);
         return function () {
-            common_1.changeFocus(element);
+            document.removeEventListener('mousedown', onMouseDown, true);
+            document.removeEventListener('keydown', onKeyDown, true);
+            if (!element) {
+                return;
+            }
+            var scrollParent = getScrollParent(element);
+            var scrollParentRect = scrollParent.getBoundingClientRect();
+            var elementRect = element.getBoundingClientRect();
+            // Don't change focus if user focused on a different element like a `input` or the target
+            // element isn't on at least halfway rendered on the screen.
+            if ((elementRef.current && getFocusableElement(elementRef.current)) || // did the user click on a focusable element?
+                elementRect.top + elementRect.height / 2 < scrollParentRect.top || // is the top half of the target element visible?
+                elementRect.bottom - elementRect.height / 2 > scrollParentRect.bottom || // is the bottom half of the target element visible?
+                elementRect.left + elementRect.width / 2 < scrollParentRect.left || // is the left half of the target element visible?
+                elementRect.right - elementRect.width / 2 > scrollParentRect.right // is the right half of the target element visible?
+            ) {
+                // reset the focus element and bail early
+                elementRef.current = null;
+                return;
+            }
+            if (requiresFocusChangeRef.current) {
+                // We need to change focus _before_ the browser process the default action of picking a new
+                // focus target. Doing this immediately prevents the `focus` event from firing on `element`,
+                // but that's okay because the browser will change focus anyways.
+                common_1.changeFocus(element);
+            }
+            else {
+                // We wait a frame for the current event to process, allowing the browser to fire default
+                // actions. This delay allows the focus change to trigger a `focus` event on `element`.
+                requestAnimationFrame(function () {
+                    common_1.changeFocus(element);
+                });
+            }
+            elementRef.current = null;
         };
-    }, [model.state.returnFocusRef, model.state.targetRef, visible]);
+    }, [model.state.returnFocusRef, model.state.targetRef, visible, onMouseDown, onKeyDown]);
     return {};
 });

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

@@ -1,7 +1,3 @@
-import Radio from './lib/Radio';
-export default Radio;
-export { Radio };
-export { default as RadioGroup } from './lib/RadioGroup';
 export * from './lib/Radio';
 export * from './lib/RadioGroup';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,aAAa,CAAC;AAEhC,eAAe,KAAK,CAAC;AACrB,OAAO,EAAC,KAAK,EAAC,CAAC;AACf,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,kBAAkB,CAAC;AACvD,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../radio/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}

package/dist/commonjs/radio/index.js

@@ -9,15 +9,6 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioGroup = exports.Radio = void 0;
-var Radio_1 = __importDefault(require("./lib/Radio"));
-exports.Radio = Radio_1.default;
-exports.default = Radio_1.default;
-var RadioGroup_1 = require("./lib/RadioGroup");
-Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return __importDefault(RadioGroup_1).default; } });
 __exportStar(require("./lib/Radio"), exports);
 __exportStar(require("./lib/RadioGroup"), exports);

package/dist/commonjs/radio/lib/Radio.d.ts

@@ -36,5 +36,4 @@ export interface RadioProps extends Themeable {
     variant?: 'inverse' | undefined;
 }
 export declare const Radio: import("../../common").ElementComponent<"input", RadioProps>;
-export default Radio;
 //# sourceMappingURL=Radio.d.ts.map

package/dist/commonjs/radio/lib/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../radio/lib/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAML,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAQ1C,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C;;;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,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;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,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAkPD,eAAO,MAAM,KAAK,8DAgDhB,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../radio/lib/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAML,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAI1C,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C;;;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,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;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,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAmOD,eAAO,MAAM,KAAK,8DAqDhB,CAAC"}

package/dist/commonjs/radio/lib/Radio.js

@@ -44,7 +44,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
 var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = __importStar(require("@workday/canvas-kit-react/tokens"));
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var text_1 = require("@workday/canvas-kit-react/text");
 var radioBorderRadius = 9;
 var radioDot = 8;
 var radioHeight = 18;
@@ -223,18 +224,6 @@ var RadioCheck = common_1.styled('div')({
         transform: checked ? 'scale(1)' : 'scale(0.5)',
     });
 });
-var RadioLabel = common_1.styled('label')(__assign(__assign({}, tokens_1.default.type.levels.subtext.large), { paddingLeft: radioLabelDistance }), function (_a) {
-    var variant = _a.variant;
-    return (variant === 'inverse' ? { color: tokens_1.colors.frenchVanilla100 } : undefined);
-}, function (_a) {
-    var disabled = _a.disabled, variant = _a.variant;
-    return disabled
-        ? {
-            color: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : tokens_1.inputColors.disabled.text,
-            opacity: variant === 'inverse' ? '.4' : '1',
-        }
-        : { cursor: 'pointer' };
-});
 exports.Radio = common_1.createComponent('input')({
     displayName: 'Radio',
     Component: function (_a, ref, Element) {
@@ -246,7 +235,6 @@ exports.Radio = common_1.createComponent('input')({
                 React.createElement(RadioRipple, { variant: variant }),
                 React.createElement(RadioBackground, { checked: checked, disabled: disabled, variant: variant },
                     React.createElement(RadioCheck, { checked: checked, variant: variant }))),
-            label && (React.createElement(RadioLabel, { htmlFor: inputId, disabled: disabled, variant: variant }, label))));
+            label && (React.createElement(text_1.LabelText, { paddingLeft: radioLabelDistance, htmlFor: inputId, disabled: disabled, variant: variant }, label))));
     },
 });
-exports.default = exports.Radio;

package/dist/commonjs/radio/lib/RadioGroup.d.ts

@@ -30,5 +30,5 @@ declare class RadioGroup extends React.Component<RadioGroupProps> {
     private renderChild;
     private onRadioChange;
 }
-export default RadioGroup;
+export { RadioGroup };
 //# sourceMappingURL=RadioGroup.d.ts.map

package/dist/commonjs/radio/lib/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAc,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AAE1C,OAAO,EACL,SAAS,EACT,cAAc,EAGd,SAAS,EACV,MAAM,kCAAkC,CAAC;AAE1C,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;IAC3C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC7C;AAoCD,cAAM,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACvD,MAAM,CAAC,SAAS,mBAAa;IAE7B,MAAM,IAAI,KAAK,CAAC,SAAS;IASzB,OAAO,CAAC,WAAW,CAkBjB;IAEF,OAAO,CAAC,aAAa,CAiBnB;CACH;AAID,eAAe,UAAU,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAQ,UAAU,EAAC,MAAM,SAAS,CAAC;AAE1C,OAAO,EACL,SAAS,EACT,cAAc,EAGd,SAAS,EACV,MAAM,kCAAkC,CAAC;AAE1C,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;IAC3C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC7C;AAoCD,cAAM,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACvD,MAAM,CAAC,SAAS,mBAAa;IAE7B,MAAM,IAAI,KAAK,CAAC,SAAS;IASzB,OAAO,CAAC,WAAW,CAkBjB;IAEF,OAAO,CAAC,aAAa,CAiBnB;CACH;AAID,OAAO,EAAC,UAAU,EAAC,CAAC"}

package/dist/commonjs/radio/lib/RadioGroup.js

@@ -53,12 +53,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
 var React = __importStar(require("react"));
-var Radio_1 = __importDefault(require("./Radio"));
+var Radio_1 = require("./Radio");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var common_1 = require("@workday/canvas-kit-react/common");
 var Container = common_1.styled('div')({
@@ -98,7 +96,7 @@ var RadioGroup = /** @class */ (function (_super) {
     function RadioGroup() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.renderChild = function (child, index, value) {
-            if (typeof child.type === typeof Radio_1.default) {
+            if (typeof child.type === typeof Radio_1.Radio) {
                 var childProps = child.props;
                 var checked = typeof value === 'number' ? index === value : childProps.value === value;
                 var name_1 = _this.props.name ? _this.props.name : childProps.name;
@@ -134,5 +132,5 @@ var RadioGroup = /** @class */ (function (_super) {
     RadioGroup.ErrorType = common_1.ErrorType;
     return RadioGroup;
 }(React.Component));
+exports.RadioGroup = RadioGroup;
 RadioGroup.ErrorType = common_1.ErrorType;
-exports.default = RadioGroup;

package/dist/commonjs/segmented-control/index.d.ts

@@ -1,5 +1,2 @@
-import SegmentedControl from './lib/SegmentedControl';
-export default SegmentedControl;
-export { SegmentedControl };
 export * from './lib/SegmentedControl';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/segmented-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../segmented-control/index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,wBAAwB,CAAC;AAEtD,eAAe,gBAAgB,CAAC;AAChC,OAAO,EAAC,gBAAgB,EAAC,CAAC;AAC1B,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../segmented-control/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/dist/commonjs/segmented-control/index.js

@@ -9,12 +9,5 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SegmentedControl = void 0;
-var SegmentedControl_1 = __importDefault(require("./lib/SegmentedControl"));
-exports.SegmentedControl = SegmentedControl_1.default;
-exports.default = SegmentedControl_1.default;
 __exportStar(require("./lib/SegmentedControl"), exports);

package/dist/commonjs/segmented-control/lib/SegmentedControl.d.ts

@@ -23,5 +23,4 @@ export interface SegmentedControlProps {
 export declare const SegmentedControl: import("../../common").ElementComponent<"div", SegmentedControlProps> & {
     Button: import("../../common").ElementComponent<"button", SegmentedControlButtonProps>;
 };
-export default SegmentedControl;
 //# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/commonjs/segmented-control/lib/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAyB,2BAA2B,EAAC,MAAM,0BAA0B,CAAC;AAE7F,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,2BAA2B,CAAC,EAAE,CAAC;IAE5D;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC7C;AAsBD,eAAO,MAAM,gBAAgB;;CA+B3B,CAAC;AAEH,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAyB,2BAA2B,EAAC,MAAM,0BAA0B,CAAC;AAE7F,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,2BAA2B,CAAC,EAAE,CAAC;IAE5D;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC7C;AAsBD,eAAO,MAAM,gBAAgB;;CA+B3B,CAAC"}

package/dist/commonjs/segmented-control/lib/SegmentedControl.js

@@ -77,4 +77,3 @@ exports.SegmentedControl = common_1.createComponent('div')({
         Button: SegmentedControlButton_1.SegmentedControlButton,
     },
 });
-exports.default = exports.SegmentedControl;

package/dist/commonjs/segmented-control/lib/SegmentedControlButton.d.ts

@@ -1,8 +1,10 @@
+import { ButtonContainerProps } from '@workday/canvas-kit-react/button';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-export interface SegmentedControlButtonProps {
+export interface SegmentedControlButtonProps extends ButtonContainerProps {
     toggled?: boolean;
     icon: CanvasSystemIcon;
     value?: string | number;
+    size?: 'small' | 'medium' | 'large';
 }
 export declare const SegmentedControlButton: import("../../common").ElementComponent<"button", SegmentedControlButtonProps>;
 //# sourceMappingURL=SegmentedControlButton.d.ts.map

package/dist/commonjs/segmented-control/lib/SegmentedControlButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlButton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AA4E9D,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,sBAAsB,gFAiBjC,CAAC"}
+{"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,oBAAoB,EACrB,MAAM,kCAAkC,CAAC;AAO1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAyF9D,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,sBAAsB,gFAiBjC,CAAC"}

package/dist/commonjs/segmented-control/lib/SegmentedControlButton.js

@@ -55,11 +55,17 @@ var getIconButtonColors = function (toggled) {
         },
     };
 };
+var getSizeStyles = function (size) {
+    var sizeValue = size === 'large' ? "calc(" + tokens_1.space.xl + " + " + tokens_1.space.xxs + ")" : size === 'small' ? tokens_1.space.l : tokens_1.space.xl;
+    return {
+        width: sizeValue,
+        height: sizeValue,
+    };
+};
 var StyledButton = common_1.styled(button_1.BaseButton)({
     borderRadius: tokens_1.borderRadius.zero,
     border: "1px solid " + tokens_1.colors.soap500,
     borderLeft: 'none',
-    minWidth: tokens_1.space.xl,
     '&:first-of-type': {
         borderRadius: tokens_1.borderRadius.m + " 0 0 " + tokens_1.borderRadius.m,
         borderLeft: "1px solid " + tokens_1.colors.soap500,
@@ -94,12 +100,15 @@ var StyledButton = common_1.styled(button_1.BaseButton)({
             },
         },
     });
+}, function (_a) {
+    var size = _a.size;
+    return (__assign({}, getSizeStyles(size)));
 });
 exports.SegmentedControlButton = common_1.createComponent('button')({
     displayName: 'Button',
     Component: function (_a, ref, Element) {
         var value = _a.value, icon = _a.icon, toggled = _a.toggled, props = __rest(_a, ["value", "icon", "toggled"]);
         return (react_1.default.createElement(StyledButton, __assign({ as: Element, "aria-pressed": toggled, value: value, colors: getIconButtonColors(toggled), fillIcon: toggled, ref: ref }, props),
-            react_1.default.createElement(button_1.BaseButton.Icon, { size: "large", icon: icon })));
+            react_1.default.createElement(button_1.BaseButton.Icon, { size: props.size || 'large', icon: icon })));
     },
 });

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

@@ -1,7 +1,3 @@
-import Select from './lib/Select';
-export default Select;
-export { Select };
-export { default as SelectOption } from './lib/SelectOption';
 export * from './lib/Select';
 export * from './lib/SelectOption';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../select/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAC3D,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../select/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC"}

package/dist/commonjs/select/index.js

@@ -9,15 +9,6 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectOption = exports.Select = void 0;
-var Select_1 = __importDefault(require("./lib/Select"));
-exports.Select = Select_1.default;
-exports.default = Select_1.default;
-var SelectOption_1 = require("./lib/SelectOption");
-Object.defineProperty(exports, "SelectOption", { enumerable: true, get: function () { return __importDefault(SelectOption_1).default; } });
 __exportStar(require("./lib/Select"), exports);
 __exportStar(require("./lib/SelectOption"), exports);