@workday/canvas-kit-react 7.0.0-alpha.0-next.6 → 7.0.0-alpha.101-next.26

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,4 +1,4 @@
-import { PopupModel } from './usePopupModel';
+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
@@ -6,5 +6,24 @@ import { PopupModel } from './usePopupModel';
  *
  * This should be used on popup elements that use `useInitialFocus`.
  */
-export declare const useReturnFocus: (model: PopupModel, 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":"AAEA,OAAO,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAG3C;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,UAAW,UAAU,uBAe/C,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

@@ -6,6 +6,7 @@ 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
@@ -13,8 +14,7 @@ var common_1 = require("@workday/canvas-kit-react/common");
  *
  * This should be used on popup elements that use `useInitialFocus`.
  */
-var 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) {
@@ -26,6 +26,5 @@ var useReturnFocus = function (model, elemProps) {
             common_1.changeFocus(element);
         };
     }, [model.state.returnFocusRef, model.state.targetRef, visible]);
-    return elemProps;
-};
-exports.useReturnFocus = useReturnFocus;
+    return {};
+});

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

@@ -1,4 +1,4 @@
-import { PopupModel } from './usePopupModel';
+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
@@ -7,5 +7,24 @@ import { PopupModel } from './usePopupModel';
  * 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: PopupModel, 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":"AAGA,OAAO,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAG3C;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,UAAW,UAAU,uBA6B7D,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

@@ -7,6 +7,8 @@ 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
@@ -15,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.
  */
-var 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({
@@ -38,6 +39,5 @@ var useTransferOnFullscreenEnter = function (model, elemProps) {
         }
         return;
     }, [handler, visible]);
-    return elemProps;
-};
-exports.useTransferOnFullscreenEnter = useTransferOnFullscreenEnter;
+    return {};
+});

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

@@ -1,4 +1,4 @@
-import { PopupModel } from './usePopupModel';
+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.
@@ -6,5 +6,24 @@ import { PopupModel } from './usePopupModel';
  * 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: PopupModel, 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":"AAGA,OAAO,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAG3C;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B,UAAW,UAAU,uBA6B5D,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

@@ -7,6 +7,8 @@ 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.
@@ -14,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.
  */
-var 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({
@@ -37,6 +38,5 @@ var useTransferOnFullscreenExit = function (model, elemProps) {
         }
         return;
     }, [handler, visible]);
-    return elemProps;
-};
-exports.useTransferOnFullscreenExit = useTransferOnFullscreenExit;
+    return {};
+});

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

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { SegmentedControlButtonProps } from './SegmentedControlButton';
 export interface SegmentedControlProps {
     /**
-     * The IconButton children of the SegmentedControl (must be at least two).
+     * The Button children of the SegmentedControl (must be at least two).
      * TODO: Add support for text children
      */
-    children: React.ReactElement<IconButtonProps>[];
+    children: React.ReactElement<SegmentedControlButtonProps>[];
     /**
-     * The value or index of the IconButton that the SegmentedControl should be toggled on to.
-     * If a string is provided, the IconButton with the corresponding value will be selected.
-     * If a number is provided, the IconButton with the corresponding index will be selected.
+     * The value or index of the Button that the SegmentedControl should be toggled on to.
+     * If a string is provided, the Button with the corresponding value will be selected.
+     * If a number is provided, the Button with the corresponding index will be selected.
      * @default 0
      */
     value?: string | number;
@@ -20,6 +20,8 @@ export interface SegmentedControlProps {
      */
     onChange?: (value: string | number) => void;
 }
-declare const SegmentedControl: ({ value, children, onChange, ...elemProps }: SegmentedControlProps) => JSX.Element;
+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;AAE/B,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAG7E,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,EAAE,CAAC;IAEhD;;;;;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;AAsED,QAAA,MAAM,gBAAgB,gDAAmD,qBAAqB,gBAsB7F,CAAC;AAEF,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;AAEH,eAAe,gBAAgB,CAAC"}

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

@@ -41,51 +41,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedControl = void 0;
 var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var button_1 = require("@workday/canvas-kit-react/button");
 var common_1 = require("@workday/canvas-kit-react/common");
-var SegmentedControlContainer = common_1.styled('div')({
-    '& button': {
-        borderRadius: tokens_1.borderRadius.zero,
-        border: "1px solid " + tokens_1.colors.soap500,
-        borderLeft: 'none',
-        '&[aria-pressed="true"]': {
-            borderColor: tokens_1.colors.blueberry400,
-            '&:hover, &:focus:hover': {
-                background: tokens_1.colors.blueberry400,
-            },
-        },
-        '&:first-of-type': {
-            borderRadius: tokens_1.borderRadius.m + " 0 0 " + tokens_1.borderRadius.m,
-            borderLeft: "1px solid " + tokens_1.colors.soap500,
-        },
-        '&:last-of-type': {
-            borderRadius: "0 " + tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0",
-        },
-        '&:focus': __assign({ borderRadius: tokens_1.borderRadius.m, zIndex: 1, animation: 'none', transition: 'all 120ms, border-radius 1ms' }, common_1.mouseFocusBehavior({
-            '&': {
-                borderRadius: tokens_1.borderRadius.zero,
-                '&:first-of-type': {
-                    borderRadius: tokens_1.borderRadius.m + " 0 0 " + tokens_1.borderRadius.m,
-                },
-                '&:last-of-type': {
-                    borderRadius: "0 " + tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0",
-                },
-            },
-        })),
-    },
-}, function (_a) {
-    var theme = _a.theme;
-    return ({
-        '& button[aria-pressed="true"]': {
-            borderColor: theme.canvas.palette.primary.main,
-            '&:hover, &:focus:hover': {
-                background: theme.canvas.palette.primary.main,
-            },
-        },
-    });
-});
+var SegmentedControlButton_1 = require("./SegmentedControlButton");
 var onButtonClick = function (existingOnClick, onChange, index, event) {
     if (existingOnClick) {
         existingOnClick(event);
@@ -100,17 +59,22 @@ var onButtonClick = function (existingOnClick, onChange, index, event) {
         }
     }
 };
-var SegmentedControl = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? 0 : _b, children = _a.children, onChange = _a.onChange, elemProps = __rest(_a, ["value", "children", "onChange"]);
-    return (React.createElement(SegmentedControlContainer, __assign({}, elemProps), React.Children.map(children, function (child, index) {
-        if (typeof child.type === typeof button_1.IconButton) {
-            return React.cloneElement(child, {
-                toggled: typeof value === 'number' ? index === value : child.props.value === value,
-                variant: 'squareFilled',
-                onClick: onButtonClick.bind(undefined, child.props.onClick, onChange, index),
-            });
-        }
-        return child;
-    })));
-};
-exports.default = SegmentedControl;
+exports.SegmentedControl = common_1.createComponent('div')({
+    displayName: 'SegmentedControl',
+    Component: function (_a, ref) {
+        var _b = _a.value, value = _b === void 0 ? 0 : _b, children = _a.children, onChange = _a.onChange, elemProps = __rest(_a, ["value", "children", "onChange"]);
+        return (React.createElement("div", __assign({}, elemProps), React.Children.map(children, function (child, index) {
+            if (typeof child.type === typeof SegmentedControlButton_1.SegmentedControlButton) {
+                return React.cloneElement(child, {
+                    toggled: typeof value === 'number' ? index === value : child.props.value === value,
+                    onClick: onButtonClick.bind(undefined, child.props.onClick, onChange, index),
+                });
+            }
+            return child;
+        })));
+    },
+    subComponents: {
+        Button: SegmentedControlButton_1.SegmentedControlButton,
+    },
+});
+exports.default = exports.SegmentedControl;

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,105 @@
+"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 __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedControlButton = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = require("@workday/canvas-kit-react/button");
+var common_1 = require("@workday/canvas-kit-react/common");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var getIconButtonColors = function (toggled) {
+    return {
+        default: {
+            background: toggled ? tokens_1.colors.blueberry400 : tokens_1.colors.soap200,
+            icon: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.licorice200,
+        },
+        hover: {
+            background: toggled ? tokens_1.colors.blueberry400 : tokens_1.colors.soap300,
+            icon: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.licorice500,
+        },
+        active: {
+            background: toggled ? tokens_1.colors.blueberry400 : tokens_1.colors.soap500,
+            icon: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.licorice500,
+        },
+        focus: {
+            background: toggled ? tokens_1.colors.blueberry400 : undefined,
+            icon: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.licorice500,
+        },
+        disabled: {
+            background: toggled ? tokens_1.colors.soap100 : tokens_1.colors.soap100,
+            icon: tokens_1.colors.soap600,
+            opacity: '1',
+        },
+    };
+};
+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,
+    },
+    '&:last-of-type': {
+        borderRadius: "0 " + tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0",
+    },
+    '&[aria-pressed="true"]': {
+        borderColor: tokens_1.colors.blueberry400 + " !important",
+        '&:hover, &:focus:hover': {
+            background: tokens_1.colors.blueberry400,
+        },
+    },
+    '&:focus': __assign({ borderRadius: tokens_1.borderRadius.m, zIndex: 1, animation: 'none', transition: 'all 120ms, border-radius 1ms' }, common_1.mouseFocusBehavior({
+        '&': {
+            borderRadius: tokens_1.borderRadius.zero,
+            '&:first-of-type': {
+                borderRadius: tokens_1.borderRadius.m + " 0 0 " + tokens_1.borderRadius.m,
+            },
+            '&:last-of-type': {
+                borderRadius: "0 " + tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0",
+            },
+        },
+    })),
+}, function (_a) {
+    var theme = _a.theme;
+    return ({
+        '[aria-pressed="true"]': {
+            borderColor: theme.canvas.palette.primary.main,
+            '&:hover, &:focus:hover': {
+                background: theme.canvas.palette.primary.main,
+            },
+        },
+    });
+});
+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 })));
+    },
+});

package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAsB,iBAAiB,EAAC,MAAM,kCAAkC,CAAC;AAIxF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,wBAAwB,CAAC;IAC3C;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,sBAAsB;IAChC,IAAI,IAAA;IACJ,KAAK,IAAA;CACN;AAED,oBAAY,wBAAwB;IAClC,KAAK,IAAA;IACL,WAAW,IAAA;IACX,IAAI,IAAA;CACL;AA2FD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IACpF,MAAM,CAAC,aAAa,gCAA0B;IAC9C,MAAM,CAAC,eAAe,kCAA4B;gBAEtC,KAAK,EAAE,cAAc;IAKjC,KAAK;;MAEH;IAEK,iBAAiB;IAGjB,oBAAoB;IAIpB,MAAM;IA+Cb,OAAO,CAAC,YAAY,CAWlB;IAEF,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,qBAAqB,CAS3B;CACH"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAsB,iBAAiB,EAAC,MAAM,kCAAkC,CAAC;AAIxF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,wBAAwB,CAAC;IAC3C;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,sBAAsB;IAChC,IAAI,IAAA;IACJ,KAAK,IAAA;CACN;AAED,oBAAY,wBAAwB;IAClC,KAAK,IAAA;IACL,WAAW,IAAA;IACX,IAAI,IAAA;CACL;AA6FD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IACpF,MAAM,CAAC,aAAa,gCAA0B;IAC9C,MAAM,CAAC,eAAe,kCAA4B;gBAEtC,KAAK,EAAE,cAAc;IAKjC,KAAK;;MAEH;IAEK,iBAAiB;IAGjB,oBAAoB;IAIpB,MAAM;IA4Cb,OAAO,CAAC,YAAY,CAWlB;IAEF,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,qBAAqB,CAS3B;CACH"}

package/dist/commonjs/side-panel/lib/SidePanel.js

@@ -135,7 +135,7 @@ var ChildrenContainer = styled_1.default('div')({
         width: open ? openWidth : closedWidth,
     });
 });
-var ToggleButton = styled_1.default(button_1.IconButton)({
+var ToggleButton = styled_1.default(button_1.TertiaryButton)({
     position: 'absolute',
     bottom: tokens_1.space.s,
 }, function (_a) {
@@ -203,7 +203,7 @@ var SidePanel = /** @class */ (function (_super) {
             React.createElement(ChildrenContainer, { open: open, openWidth: openWidth },
                 header && open ? React.createElement(Header, null, header) : null,
                 this.props.children),
-            React.createElement(SidePanelFooter, { openWidth: openWidth, open: open }, onToggleClick && (React.createElement(ToggleButton, { openDirection: openDirection, "aria-label": open ? closeNavigationAriaLabel : openNavigationAriaLabel, toggled: false, size: "small", onClick: this.onToggleClick, icon: this.toggleButtonDirection(open, openDirection), variant: "circleFilled" })))));
+            React.createElement(SidePanelFooter, { openWidth: openWidth, open: open }, onToggleClick && (React.createElement(ToggleButton, { openDirection: openDirection, "aria-label": open ? closeNavigationAriaLabel : openNavigationAriaLabel, onClick: this.onToggleClick, icon: this.toggleButtonDirection(open, openDirection) })))));
     };
     SidePanel.OpenDirection = SidePanelOpenDirection;
     SidePanel.BackgroundColor = SidePanelBackgroundColor;