@workday/canvas-kit-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.100-next.25

package/dist/es6/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/es6/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/es6/popup/lib/hooks/usePopupTargetContext.js

@@ -0,0 +1,29 @@
+import { createElemPropsHook, useForkRef } from '@workday/canvas-kit-react/common';
+import { usePopupModel } from './usePopupModel';
+/**
+ * Adds the necessary props to a `Target` component. Used by the Popup.Target subcomponent.
+ */
+export var usePopupTargetContext = createElemPropsHook(usePopupModel)(function (_a, ref) {
+    var events = _a.events, state = _a.state;
+    var elementRef = 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/es6/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/es6/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/es6/popup/lib/hooks/useReturnFocus.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { changeFocus } from '@workday/canvas-kit-react/common';
+import { changeFocus, createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { usePopupModel } from './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
@@ -7,8 +8,7 @@ import { changeFocus } from '@workday/canvas-kit-react/common';
  *
  * This should be used on popup elements that use `useInitialFocus`.
  */
-export var useReturnFocus = function (model, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
+export var useReturnFocus = createElemPropsHook(usePopupModel)(function (model) {
     var visible = model.state.visibility !== 'hidden';
     React.useLayoutEffect(function () {
         if (!visible) {
@@ -20,5 +20,5 @@ export var useReturnFocus = function (model, elemProps) {
             changeFocus(element);
         };
     }, [model.state.returnFocusRef, model.state.targetRef, visible]);
-    return elemProps;
-};
+    return {};
+});

package/dist/es6/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/es6/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/es6/popup/lib/hooks/useTransferOnFullscreenEnter.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import screenfull from 'screenfull';
 import { PopupStack } from '@workday/canvas-kit-popup-stack';
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { usePopupModel } from './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
@@ -9,8 +11,7 @@ import { PopupStack } from '@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.
  */
-export var useTransferOnFullscreenEnter = function (model, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
+export var useTransferOnFullscreenEnter = createElemPropsHook(usePopupModel)(function (model) {
     var handler = React.useCallback(function (event) {
         if (screenfull.isFullscreen && model.state.stackRef.current) {
             PopupStack.transferToCurrentContext({
@@ -32,5 +33,5 @@ export var useTransferOnFullscreenEnter = function (model, elemProps) {
         }
         return;
     }, [handler, visible]);
-    return elemProps;
-};
+    return {};
+});

package/dist/es6/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/es6/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/es6/popup/lib/hooks/useTransferOnFullscreenExit.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import screenfull from 'screenfull';
 import { PopupStack } from '@workday/canvas-kit-popup-stack';
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { usePopupModel } from './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.
@@ -8,8 +10,7 @@ import { PopupStack } from '@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.
  */
-export var useTransferOnFullscreenExit = function (model, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
+export var useTransferOnFullscreenExit = createElemPropsHook(usePopupModel)(function (model) {
     var handler = React.useCallback(function (event) {
         if (!screenfull.isFullscreen && model.state.stackRef.current) {
             PopupStack.transferToCurrentContext({
@@ -31,5 +32,5 @@ export var useTransferOnFullscreenExit = function (model, elemProps) {
         }
         return;
     }, [handler, visible]);
-    return elemProps;
-};
+    return {};
+});

package/dist/es6/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/es6/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/es6/segmented-control/lib/SegmentedControl.js

@@ -21,50 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { borderRadius, colors } from '@workday/canvas-kit-react/tokens';
-import { IconButton } from '@workday/canvas-kit-react/button';
-import { mouseFocusBehavior, styled } from '@workday/canvas-kit-react/common';
-var SegmentedControlContainer = styled('div')({
-    '& button': {
-        borderRadius: borderRadius.zero,
-        border: "1px solid " + colors.soap500,
-        borderLeft: 'none',
-        '&[aria-pressed="true"]': {
-            borderColor: colors.blueberry400,
-            '&:hover, &:focus:hover': {
-                background: colors.blueberry400,
-            },
-        },
-        '&:first-of-type': {
-            borderRadius: borderRadius.m + " 0 0 " + borderRadius.m,
-            borderLeft: "1px solid " + colors.soap500,
-        },
-        '&:last-of-type': {
-            borderRadius: "0 " + borderRadius.m + " " + borderRadius.m + " 0",
-        },
-        '&:focus': __assign({ borderRadius: borderRadius.m, zIndex: 1, animation: 'none', transition: 'all 120ms, border-radius 1ms' }, mouseFocusBehavior({
-            '&': {
-                borderRadius: borderRadius.zero,
-                '&:first-of-type': {
-                    borderRadius: borderRadius.m + " 0 0 " + borderRadius.m,
-                },
-                '&:last-of-type': {
-                    borderRadius: "0 " + borderRadius.m + " " + 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,
-            },
-        },
-    });
-});
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { SegmentedControlButton } from './SegmentedControlButton';
 var onButtonClick = function (existingOnClick, onChange, index, event) {
     if (existingOnClick) {
         existingOnClick(event);
@@ -79,17 +37,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 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;
-    })));
-};
+export var SegmentedControl = 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) {
+                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,
+    },
+});
 export default SegmentedControl;

package/dist/es6/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/es6/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/es6/segmented-control/lib/SegmentedControlButton.js

@@ -0,0 +1,99 @@
+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;
+};
+import React from 'react';
+import { BaseButton } from '@workday/canvas-kit-react/button';
+import { createComponent, mouseFocusBehavior, styled, } from '@workday/canvas-kit-react/common';
+import { colors, borderRadius, space } from '@workday/canvas-kit-react/tokens';
+var getIconButtonColors = function (toggled) {
+    return {
+        default: {
+            background: toggled ? colors.blueberry400 : colors.soap200,
+            icon: toggled ? colors.frenchVanilla100 : colors.licorice200,
+        },
+        hover: {
+            background: toggled ? colors.blueberry400 : colors.soap300,
+            icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+        },
+        active: {
+            background: toggled ? colors.blueberry400 : colors.soap500,
+            icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+        },
+        focus: {
+            background: toggled ? colors.blueberry400 : undefined,
+            icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+        },
+        disabled: {
+            background: toggled ? colors.soap100 : colors.soap100,
+            icon: colors.soap600,
+            opacity: '1',
+        },
+    };
+};
+var StyledButton = styled(BaseButton)({
+    borderRadius: borderRadius.zero,
+    border: "1px solid " + colors.soap500,
+    borderLeft: 'none',
+    minWidth: space.xl,
+    '&:first-of-type': {
+        borderRadius: borderRadius.m + " 0 0 " + borderRadius.m,
+        borderLeft: "1px solid " + colors.soap500,
+    },
+    '&:last-of-type': {
+        borderRadius: "0 " + borderRadius.m + " " + borderRadius.m + " 0",
+    },
+    '&[aria-pressed="true"]': {
+        borderColor: colors.blueberry400 + " !important",
+        '&:hover, &:focus:hover': {
+            background: colors.blueberry400,
+        },
+    },
+    '&:focus': __assign({ borderRadius: borderRadius.m, zIndex: 1, animation: 'none', transition: 'all 120ms, border-radius 1ms' }, mouseFocusBehavior({
+        '&': {
+            borderRadius: borderRadius.zero,
+            '&:first-of-type': {
+                borderRadius: borderRadius.m + " 0 0 " + borderRadius.m,
+            },
+            '&:last-of-type': {
+                borderRadius: "0 " + borderRadius.m + " " + 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,
+            },
+        },
+    });
+});
+export var SegmentedControlButton = 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.createElement(StyledButton, __assign({ as: Element, "aria-pressed": toggled, value: value, colors: getIconButtonColors(toggled), fillIcon: toggled, ref: ref }, props),
+            React.createElement(BaseButton.Icon, { size: "large", icon: icon })));
+    },
+});

package/dist/es6/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/es6/side-panel/lib/SidePanel.js

@@ -37,7 +37,7 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 import throttle from 'lodash/throttle';
 import { colors, space, type } from '@workday/canvas-kit-react/tokens';
-import { IconButton } from '@workday/canvas-kit-react/button';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
 import { chevronLeftIcon, chevronRightIcon } from '@workday/canvas-system-icons-web';
 export var SidePanelOpenDirection;
 (function (SidePanelOpenDirection) {
@@ -110,7 +110,7 @@ var ChildrenContainer = styled('div')({
         width: open ? openWidth : closedWidth,
     });
 });
-var ToggleButton = styled(IconButton)({
+var ToggleButton = styled(TertiaryButton)({
     position: 'absolute',
     bottom: space.s,
 }, function (_a) {
@@ -178,7 +178,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;