@workday/canvas-kit-react 6.8.9 → 6.9.0-next.5

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

@@ -1,10 +1,26 @@
-/// <reference types="@emotion/core" />
 /**
  * Adds the necessary props to a `Target` component. Used by the Popup.Target subcomponent.
  */
-export declare const usePopupTarget: <P extends {}, R>(model: import("../../../common").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+export declare const usePopupTarget: <P extends {}, R>(model: {
+    state: {
+        stackRef: import("react").RefObject<HTMLDivElement>;
+        targetRef: import("react").RefObject<HTMLButtonElement>;
+        initialFocusRef: import("react").RefObject<any> | undefined;
+        returnFocusRef: import("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 | import("react").SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+    };
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
     ref: (instance: any) => void;
-    onClick: (event: import("react").MouseEvent<Element, MouseEvent>) => void;
+    onClick: (event: React.MouseEvent) => void;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;
 } : {});

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

@@ -1 +1 @@
-{"version":3,"file":"usePopupTarget.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupTarget.ts"],"names":[],"mappings":";AAGA;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;OAoBzB,CAAC"}
+{"version":3,"file":"usePopupTarget.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupTarget.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;qBAIN,gBAAgB;;;OAgBnC,CAAC"}

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

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopupTarget = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
+var usePopupModel_1 = require("./usePopupModel");
 /**
  * Adds the necessary props to a `Target` component. Used by the Popup.Target subcomponent.
  */
-exports.usePopupTarget = common_1.createHook(function (_a, ref) {
+exports.usePopupTarget = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (_a, ref) {
     var events = _a.events, state = _a.state;
     var elementRef = common_1.useForkRef(ref, state.targetRef);
     return {
@@ -18,10 +20,10 @@ exports.usePopupTarget = common_1.createHook(function (_a, ref) {
                 state.targetRef.current = event.currentTarget;
             }
             if (state.visibility !== 'hidden') {
-                events.hide({ event: event });
+                events.hide(event);
             }
             else {
-                events.show({ event: event });
+                events.show(event);
             }
         },
     };

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

@@ -0,0 +1,27 @@
+/**
+ * Adds the necessary props to a `Target` component. Used by the Popup.Target subcomponent.
+ */
+export declare const usePopupTargetContext: <P extends {}, R>(model: {
+    state: {
+        stackRef: import("react").RefObject<HTMLDivElement>;
+        targetRef: import("react").RefObject<HTMLButtonElement>;
+        initialFocusRef: import("react").RefObject<any> | undefined;
+        returnFocusRef: import("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 | import("react").SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+    };
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+    ref: (instance: any) => void;
+    onContextMenu: (event: React.MouseEvent) => void;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: import("react").Ref<R>;
+} : {});
+//# sourceMappingURL=usePopupTargetContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePopupTargetContext.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupTargetContext.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;2BAIP,gBAAgB;;;OAmBzC,CAAC"}

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopupTargetContext = void 0;
+var common_1 = require("@workday/canvas-kit-react/common");
+var usePopupModel_1 = require("./usePopupModel");
+/**
+ * Adds the necessary props to a `Target` component. Used by the Popup.Target subcomponent.
+ */
+exports.usePopupTargetContext = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (_a, ref) {
+    var events = _a.events, state = _a.state;
+    var elementRef = common_1.useForkRef(ref, state.targetRef);
+    return {
+        ref: elementRef,
+        onContextMenu: function (event) {
+            // If we're wrapping a target component that doesn't handle ref forwarding, update the
+            // `state.targetRef` manually. This ensures that custom target components don't need to handle
+            // ref forwarding since ref forwarding is only really needed to programmatically open popups
+            // around a target _before_ a user clicks. In that rare case, ref forwarding is required.
+            if (!state.targetRef.current) {
+                state.targetRef.current = event.currentTarget;
+            }
+            if (state.visibility !== 'hidden') {
+                events.hide(event);
+            }
+            else {
+                events.show(event);
+            }
+            // Prevent the default context menu from showing to avoid double menus
+            event.preventDefault();
+        },
+    };
+});

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

@@ -1,3 +1,4 @@
+import React from 'react';
 /**
  * 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
@@ -5,5 +6,24 @@
  *
  * This should be used on popup elements that use `useInitialFocus`.
  */
-export declare const useReturnFocus: (model: import("../../../common").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+export declare const useReturnFocus: <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=useReturnFocus.d.ts.map

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":"AAKA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,6IAe1B,CAAC"}
+{"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"}

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

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReturnFocus = void 0;
 var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
+var usePopupModel_1 = require("./usePopupModel");
 /**
  * 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
@@ -12,8 +14,7 @@ var common_1 = require("@workday/canvas-kit-react/common");
  *
  * This should be used on popup elements that use `useInitialFocus`.
  */
-exports.useReturnFocus = function (model, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
+exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
     var visible = model.state.visibility !== 'hidden';
     react_1.default.useLayoutEffect(function () {
         if (!visible) {
@@ -25,5 +26,5 @@ exports.useReturnFocus = function (model, elemProps) {
             common_1.changeFocus(element);
         };
     }, [model.state.returnFocusRef, model.state.targetRef, visible]);
-    return elemProps;
-};
+    return {};
+});

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

@@ -1,3 +1,4 @@
+import React from 'react';
 /**
  * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
  * popup would seem to disappear because the popup container element is not a child of the
@@ -6,5 +7,24 @@
  * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
  * Doing so would open the popup when the intention was to close it.
  */
-export declare const useTransferOnFullscreenEnter: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+export declare const useTransferOnFullscreenEnter: <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=useTransferOnFullscreenEnter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTransferOnFullscreenEnter.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenEnter.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,sIA6BxC,CAAC"}
+{"version":3,"file":"useTransferOnFullscreenEnter.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenEnter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;OA6BvC,CAAC"}

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

@@ -3,9 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTransferOnFullscreenEnter = void 0;
 var react_1 = __importDefault(require("react"));
 var screenfull_1 = __importDefault(require("screenfull"));
 var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
+var common_1 = require("@workday/canvas-kit-react/common");
+var usePopupModel_1 = require("./usePopupModel");
 /**
  * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
  * popup would seem to disappear because the popup container element is not a child of the
@@ -14,8 +17,7 @@ var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
  * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
  * Doing so would open the popup when the intention was to close it.
  */
-exports.useTransferOnFullscreenEnter = function (model, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
+exports.useTransferOnFullscreenEnter = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
     var handler = react_1.default.useCallback(function (event) {
         if (screenfull_1.default.isFullscreen && model.state.stackRef.current) {
             canvas_kit_popup_stack_1.PopupStack.transferToCurrentContext({
@@ -37,5 +39,5 @@ exports.useTransferOnFullscreenEnter = function (model, elemProps) {
         }
         return;
     }, [handler, visible]);
-    return elemProps;
-};
+    return {};
+});

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

@@ -1,3 +1,4 @@
+import React from 'react';
 /**
  * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
  * would not operate correctly with other popups on the screen.
@@ -5,5 +6,24 @@
  * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
  * Doing so would open the popup when the intention was to close it.
  */
-export declare const useTransferOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+export declare const useTransferOnFullscreenExit: <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=useTransferOnFullscreenExit.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTransferOnFullscreenExit.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenExit.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B,sIA6BvC,CAAC"}
+{"version":3,"file":"useTransferOnFullscreenExit.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenExit.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;OA6BtC,CAAC"}

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

@@ -3,9 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTransferOnFullscreenExit = void 0;
 var react_1 = __importDefault(require("react"));
 var screenfull_1 = __importDefault(require("screenfull"));
 var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
+var common_1 = require("@workday/canvas-kit-react/common");
+var usePopupModel_1 = require("./usePopupModel");
 /**
  * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
  * would not operate correctly with other popups on the screen.
@@ -13,8 +16,7 @@ var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
  * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
  * Doing so would open the popup when the intention was to close it.
  */
-exports.useTransferOnFullscreenExit = function (model, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
+exports.useTransferOnFullscreenExit = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
     var handler = react_1.default.useCallback(function (event) {
         if (!screenfull_1.default.isFullscreen && model.state.stackRef.current) {
             canvas_kit_popup_stack_1.PopupStack.transferToCurrentContext({
@@ -36,5 +38,5 @@ exports.useTransferOnFullscreenExit = function (model, elemProps) {
         }
         return;
     }, [handler, visible]);
-    return elemProps;
-};
+    return {};
+});

package/dist/commonjs/radio/index.js

@@ -1,15 +1,23 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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");
-exports.RadioGroup = RadioGroup_1.default;
-__export(require("./lib/Radio"));
-__export(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

@@ -33,6 +33,7 @@ export interface RadioProps extends Themeable {
      * The value of the Radio button.
      */
     value?: string;
+    variant?: 'inverse' | undefined;
 }
 export declare const Radio: import("../../common").ElementComponent<"input", RadioProps>;
 export default Radio;

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;CAChB;AAyLD,eAAO,MAAM,KAAK,8DAqChB,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;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"}

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

@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
     };
     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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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)
@@ -21,14 +40,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 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"));
@@ -64,7 +77,11 @@ var RadioRipple = common_1.styled('span')({
     width: radioWidth,
     position: 'absolute',
     pointerEvents: 'none',
-    zIndex: -1,
+}, function (_a) {
+    var variant = _a.variant;
+    return ({
+        opacity: variant === 'inverse' ? '0.4' : '1',
+    });
 });
 var RadioInput = common_1.styled('input')({
     borderRadius: radioBorderRadius,
@@ -79,7 +96,7 @@ var RadioInput = common_1.styled('input')({
         outline: 'none',
     },
 }, function (_a) {
-    var checked = _a.checked, disabled = _a.disabled, _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline;
+    var checked = _a.checked, disabled = _a.disabled, variant = _a.variant, _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline;
     return (__assign({ cursor: disabled ? undefined : 'pointer', 
         /**
          * These selectors are targetting various sibling elements (~) here because
@@ -98,25 +115,52 @@ var RadioInput = common_1.styled('input')({
         // input (which is visually hidden)
         '&:hover ~ div:first-of-type': {
             backgroundColor: checked
-                ? themePrimary.main
+                ? variant === 'inverse'
+                    ? tokens_1.colors.frenchVanilla100
+                    : themePrimary.main
                 : disabled
                     ? tokens_1.inputColors.disabled.background
                     : 'white',
             borderColor: checked
-                ? themePrimary.main
+                ? variant === 'inverse'
+                    ? tokens_1.colors.soap300
+                    : themePrimary.main
                 : disabled
                     ? tokens_1.inputColors.disabled.border
-                    : tokens_1.inputColors.hoverBorder,
+                    : variant === 'inverse'
+                        ? tokens_1.colors.soap300
+                        : tokens_1.inputColors.hoverBorder,
             borderWidth: '1px',
         }, '&:focus, &focus:hover': {
-            '& ~ div:first-of-type': {
-                borderColor: checked ? themePrimary.main : themeFocusOutline,
-                borderWidth: '2px',
-            },
-        }, '&:checked:focus ~ div:first-of-type': __assign({}, common_1.focusRing({ separation: 2, outerColor: themeFocusOutline })) }, common_1.mouseFocusBehavior({
-        '&:focus ~ div:first-of-type': __assign(__assign({}, common_1.focusRing({ width: 0, outerColor: themeFocusOutline })), { borderWidth: '1px', borderColor: checked ? themePrimary.main : tokens_1.inputColors.border }),
+            '& ~ div:first-of-type': __assign({ borderWidth: '2px', borderColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : themeFocusOutline, 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({
+            separation: 2,
+            width: 2,
+            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' }) }, common_1.mouseFocusBehavior({
+        '&:focus ~ div:first-of-type': __assign(__assign({}, common_1.focusRing({
+            width: 0,
+            outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
+        })), { borderWidth: '1px', borderColor: checked
+                ? variant === 'inverse'
+                    ? tokens_1.colors.soap300
+                    : themePrimary.main
+                : tokens_1.inputColors.border }),
         '&:focus:hover ~ div:first-of-type, &:focus:active ~ div:first-of-type': {
-            borderColor: checked ? themePrimary.main : tokens_1.inputColors.hoverBorder,
+            borderColor: checked
+                ? variant === 'inverse'
+                    ? tokens_1.colors.soap300
+                    : themePrimary.main
+                : variant === 'inverse'
+                    ? tokens_1.colors.soap300
+                    : tokens_1.inputColors.hoverBorder,
         },
     })));
 });
@@ -136,18 +180,25 @@ var RadioBackground = common_1.styled('div')({
     transition: 'border 200ms ease, background 200ms',
     width: radioWidth,
 }, function (_a) {
-    var checked = _a.checked, disabled = _a.disabled, themePrimary = _a.theme.canvas.palette.primary;
+    var checked = _a.checked, disabled = _a.disabled, variant = _a.variant, themePrimary = _a.theme.canvas.palette.primary;
     return ({
         borderColor: checked
-            ? themePrimary.main
+            ? variant === 'inverse'
+                ? tokens_1.colors.soap300
+                : themePrimary.main
             : disabled
                 ? tokens_1.inputColors.disabled.border
-                : tokens_1.inputColors.border,
+                : variant === 'inverse'
+                    ? tokens_1.colors.soap300
+                    : tokens_1.inputColors.border,
         backgroundColor: checked
-            ? themePrimary.main
+            ? variant === 'inverse'
+                ? tokens_1.colors.frenchVanilla100
+                : themePrimary.main
             : disabled
                 ? tokens_1.inputColors.disabled.background
                 : 'white',
+        opacity: disabled && variant === 'inverse' ? '.4' : '1',
     });
 });
 var RadioCheck = common_1.styled('div')({
@@ -159,9 +210,11 @@ var RadioCheck = common_1.styled('div')({
     transition: 'transform 200ms ease, opacity 200ms ease',
     width: radioDot,
 }, function (_a) {
-    var theme = _a.theme;
+    var theme = _a.theme, variant = _a.variant;
     return ({
-        backgroundColor: theme.canvas.palette.primary.contrast,
+        backgroundColor: variant === 'inverse'
+            ? theme.canvas.palette.primary.main
+            : theme.canvas.palette.primary.contrast,
     });
 }, function (_a) {
     var checked = _a.checked;
@@ -171,21 +224,29 @@ var RadioCheck = common_1.styled('div')({
     });
 });
 var RadioLabel = common_1.styled('label')(__assign(__assign({}, tokens_1.default.type.levels.subtext.large), { paddingLeft: radioLabelDistance }), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? { color: tokens_1.inputColors.disabled.text } : { cursor: 'pointer' });
+    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) {
-        var _b = _a.checked, checked = _b === void 0 ? false : _b, id = _a.id, _c = _a.label, label = _c === void 0 ? '' : _c, disabled = _a.disabled, name = _a.name, onChange = _a.onChange, value = _a.value, elemProps = __rest(_a, ["checked", "id", "label", "disabled", "name", "onChange", "value"]);
+        var _b = _a.checked, checked = _b === void 0 ? false : _b, id = _a.id, _c = _a.label, label = _c === void 0 ? '' : _c, disabled = _a.disabled, name = _a.name, onChange = _a.onChange, value = _a.value, variant = _a.variant, elemProps = __rest(_a, ["checked", "id", "label", "disabled", "name", "onChange", "value", "variant"]);
         var inputId = common_1.useUniqueId(id);
         return (React.createElement(RadioContainer, null,
             React.createElement(RadioInputWrapper, { disabled: disabled },
-                React.createElement(RadioInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, name: name, onChange: onChange, type: "radio", value: value, "aria-checked": checked }, elemProps)),
-                React.createElement(RadioRipple, null),
-                React.createElement(RadioBackground, { checked: checked, disabled: disabled },
-                    React.createElement(RadioCheck, { checked: checked }))),
-            label && (React.createElement(RadioLabel, { htmlFor: inputId, disabled: disabled }, label))));
+                React.createElement(RadioInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, name: name, onChange: onChange, type: "radio", value: value, "aria-checked": checked, variant: variant }, elemProps)),
+                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))));
     },
 });
 exports.default = exports.Radio;

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

@@ -3,7 +3,7 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
@@ -23,6 +23,25 @@ var __assign = (this && this.__assign) || function () {
     };
     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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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)
@@ -34,13 +53,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };