@workday/canvas-kit-react 5.3.0 → 5.3.4

package/dist/es6/pagination/lib/Pagination/common/utils/space.d.ts

@@ -31,96 +31,96 @@ export interface SpaceProps {
     pl?: Spacing;
 }
 export declare const space: {
-    margin: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    margin: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         margin: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    m: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    m: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         margin: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    marginX: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    marginX: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         marginLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
         marginRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    mx: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    mx: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         marginLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
         marginRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    marginY: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    marginY: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         marginBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
         marginTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    my: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    my: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         marginBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
         marginTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    marginT: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    marginT: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         marginTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    mt: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    mt: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         marginTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    marginR: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    marginR: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         marginRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    mr: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    mr: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         marginRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    marginB: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    marginB: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         marginBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    mb: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    mb: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         marginBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    marginL: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    marginL: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         marginLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    ml: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    ml: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         marginLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    padding: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    padding: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         padding: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    p: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    p: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         padding: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    paddingX: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    paddingX: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         paddingLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
         paddingRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    px: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    px: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         paddingLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
         paddingRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    paddingY: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    paddingY: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         paddingBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
         paddingTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    py: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    py: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         paddingBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
         paddingTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    paddingT: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    paddingT: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         paddingTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    pt: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    pt: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         paddingTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    paddingR: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    paddingR: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         paddingRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    pr: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    pr: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         paddingRight: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    paddingB: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    paddingB: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         paddingBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    pb: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    pb: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         paddingBottom: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    paddingL: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    paddingL: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         paddingLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
-    pl: (value: "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl") => {
+    pl: (value: "s" | "zero" | "m" | "l" | "xxxs" | "xxs" | "xs" | "xl" | "xxl" | "xxxl") => {
         paddingLeft: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
     };
 };

package/dist/es6/popup/lib/PopupCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAOL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAe,UAAU,EAAoB,MAAM,SAAS,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA2CD,eAAO,MAAM,SAAS,gEA0BpB,CAAC"}
+{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAOL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAe,UAAU,EAAoB,MAAM,SAAS,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA0CD,eAAO,MAAM,SAAS,gEA0BpB,CAAC"}

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

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import { keyframes } from '@emotion/core';
 import { Card } from '@workday/canvas-kit-react/card';
-import { space, type } from '@workday/canvas-kit-react/tokens';
+import { space } from '@workday/canvas-kit-react/tokens';
 import { styled, getTranslateFromOrigin, createComponent, useModelContext, } from '@workday/canvas-kit-react/common';
 import { getTransformFromPlacement } from './getTransformFromPlacement';
 import { usePopupCard, PopupModelContext } from './hooks';
@@ -35,7 +35,7 @@ var popupAnimation = function (transformOrigin) {
     var translate = getTranslateFromOrigin(transformOrigin, space.xxs);
     return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "], ["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "])), translate.x, translate.y);
 };
-var StyledPopupCard = styled(Card)(type.levels.subtext.large, {
+var StyledPopupCard = styled(Card)({
     position: 'relative',
     maxWidth: "calc(100vw - " + space.l + ")",
 }, function (_a) {
@@ -66,7 +66,8 @@ export var PopupCard = createComponent('div')({
         var transformOrigin = React.useMemo(function () {
             return getTransformFromPlacement(localModel.state.placement || 'bottom');
         }, [localModel.state.placement]);
-        return (React.createElement(StyledPopupCard, __assign({ as: Element, transformOrigin: transformOrigin, depth: depth, width: width, padding: padding }, props), children));
+        return (React.createElement(StyledPopupCard, __assign({ as: Element, transformOrigin: transformOrigin, depth: depth, width: width, padding: padding }, props),
+            React.createElement(Card.Body, null, children)));
     },
 });
 var templateObject_1;

package/dist/es6/popup/lib/hooks/usePopupCard.d.ts

@@ -1,11 +1,8 @@
-/// <reference types="@emotion/core" />
 /**
  * Adds the necessary props to a `Card` component. Used by the `Popup.Card` subcomponent.
  */
-export declare const usePopupCard: <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 usePopupCard: import("../../../common").BehaviorHook<import("../../../common").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, {
     role: string;
     'aria-labelledby': string;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: import("react").Ref<R>;
-} : {});
+}>;
 //# sourceMappingURL=usePopupCard.d.ts.map

package/dist/es6/popup/lib/hooks/usePopupCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopupCard.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupCard.ts"],"names":[],"mappings":";AAGA;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;OAKvB,CAAC"}
+{"version":3,"file":"usePopupCard.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupCard.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,YAAY;;;EAKvB,CAAC"}

package/dist/es6/popup/lib/hooks/usePopupCloseButton.d.ts

@@ -3,9 +3,7 @@
  * Adds the necessary props to a close button component. Used by the `Popup.CloseButton`
  * subcomponent and `Popup.CloseIcon` subcomponent.
  */
-export declare const usePopupCloseButton: <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 usePopupCloseButton: import("../../../common").BehaviorHook<import("../../../common").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, {
     onClick: (event: import("react").MouseEvent<Element, MouseEvent>) => void;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: import("react").Ref<R>;
-} : {});
+}>;
 //# sourceMappingURL=usePopupCloseButton.d.ts.map

package/dist/es6/popup/lib/hooks/usePopupCloseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopupCloseButton.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupCloseButton.ts"],"names":[],"mappings":";AAGA;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;;OAM9B,CAAC"}
+{"version":3,"file":"usePopupCloseButton.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupCloseButton.ts"],"names":[],"mappings":";AAGA;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;EAM9B,CAAC"}

package/dist/es6/popup/lib/hooks/usePopupHeading.d.ts

@@ -1,10 +1,7 @@
-/// <reference types="@emotion/core" />
 /**
  * Adds the necessary props to the `Heading` component. Used by the `Popup.Heading` subcomponent.
  */
-export declare const usePopupHeading: <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 usePopupHeading: import("../../../common").BehaviorHook<import("../../../common").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, {
     id: string;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: import("react").Ref<R>;
-} : {});
+}>;
 //# sourceMappingURL=usePopupHeading.d.ts.map

package/dist/es6/popup/lib/hooks/usePopupHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopupHeading.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupHeading.ts"],"names":[],"mappings":";AAGA;;GAEG;AACH,eAAO,MAAM,eAAe;;;;OAI1B,CAAC"}
+{"version":3,"file":"usePopupHeading.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupHeading.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,eAAe;;EAI1B,CAAC"}

package/dist/es6/popup/lib/hooks/usePopupPopper.d.ts

@@ -2,12 +2,10 @@ import React from 'react';
 /**
  * Hooks a Popper up to a PopupModel
  */
-export declare const usePopupPopper: <P extends {}, R>(model: import("../../../common").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+export declare const usePopupPopper: import("../../../common").BehaviorHook<import("../../../common").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, {
     open: boolean;
     anchorElement: React.RefObject<HTMLButtonElement>;
     ref: (instance: any) => void;
     onPlacementChange: (placement: import("@popperjs/core").Placement) => void;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
+}>;
 //# sourceMappingURL=usePopupPopper.d.ts.map

package/dist/es6/popup/lib/hooks/usePopupPopper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopupPopper.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupPopper.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;OAkBzB,CAAC"}
+{"version":3,"file":"usePopupPopper.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupPopper.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;EAkBzB,CAAC"}

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

@@ -2,10 +2,8 @@
 /**
  * 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: import("../../../common").BehaviorHook<import("../../../common").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, {
     ref: (instance: any) => void;
     onClick: (event: import("react").MouseEvent<Element, MouseEvent>) => void;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: import("react").Ref<R>;
-} : {});
+}>;
 //# sourceMappingURL=usePopupTarget.d.ts.map

package/dist/es6/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;;;EAoBzB,CAAC"}

package/dist/es6/tabs/index.d.ts

@@ -1,8 +1,3 @@
 export * from './lib/Tabs';
 export * from './lib/useTabsModel';
-export { StyledTabItem, useTabsItem } from './lib/TabsItem';
-export { useTabsList } from './lib/TabsList';
-export { useTabsMenuPopper } from './lib/TabsMenuPopper';
-export { useTabsOverflowButton } from './lib/TabsOverflowButton';
-export { useTabsPanel } from './lib/TabsPanel';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AAEnC,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAC,iBAAiB,EAAC,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAC,qBAAqB,EAAC,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC"}

package/dist/es6/tabs/index.js

@@ -1,7 +1,2 @@
 export * from './lib/Tabs';
 export * from './lib/useTabsModel';
-export { StyledTabItem, useTabsItem } from './lib/TabsItem';
-export { useTabsList } from './lib/TabsList';
-export { useTabsMenuPopper } from './lib/TabsMenuPopper';
-export { useTabsOverflowButton } from './lib/TabsOverflowButton';
-export { useTabsPanel } from './lib/TabsPanel';

package/dist/es6/tabs/lib/Tab.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { TabsModel } from './useTabsModel';
+export interface TabProps {
+    /**
+     * Optionally pass index to tab item. This should be done if `Tabs.Item` components were created
+     * via a `Array::map` function. This index will ensure keyboard navigation works even if items are
+     * inserted out of order.
+     */
+    index?: number;
+    /**
+     * The label text of the Tab.
+     */
+    children: React.ReactNode;
+    /**
+     * The name of the tab. This name will be used in change events and for `initialTab`. Must match
+     * the `name` of the associated tab panel. If this property is not provided, it will default to a
+     * string representation of the the zero-based index of the Tab when it was initialized.
+     */
+    name?: string;
+    /**
+     * Optionally pass a model directly to this component. Default is to implicitly use the same
+     * model as the container component which uses React context. Only use this for advanced use-cases
+     */
+    model?: TabsModel;
+    /**
+     * Optional id. If not set, it will inherit the ID passed to the `Tabs` component and append the
+     * index at the end. Only set this for advanced cases.
+     */
+    id?: string;
+    /**
+     * Part of the ARIA specification for tabs. This attributes links a `role=tab` to a
+     * `role=tabpanel`. This value must be the same as the associated `id` attribute of the tab panel.
+     * This is automatically set by the component and should only be used in advanced cases.
+     */
+    'aria-controls'?: string;
+    /**
+     * Part of the ARIA specification for tabs. Lets screen readers know which tab is active. This
+     * should either be `true` or `undefined` and never `false`. This is automatically set by the
+     * component and should only be used in advanced cases.
+     */
+    'aria-selected'?: boolean;
+    /**
+     * Part of the ARIA specification for tabs. The currently active tab should not have a `tabIndex` set while
+     * all inactive tabs should have a `tabIndex={-1}`
+     */
+    tabIndex?: number;
+}
+export declare const Tab: import("../../common").ElementComponent<"button", TabProps>;
+//# sourceMappingURL=Tab.d.ts.map

package/dist/es6/tabs/lib/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6FD,eAAO,MAAM,GAAG,6DAad,CAAC"}

package/dist/es6/tabs/lib/Tab.js

@@ -0,0 +1,86 @@
+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 * as React from 'react';
+import { colors, space, type, borderRadius } from '@workday/canvas-kit-react/tokens';
+import { createComponent, focusRing, hideMouseFocus, mergeProps, styled, useLocalRef, useModelContext, } from '@workday/canvas-kit-react/common';
+import { TabsModelContext } from './Tabs';
+import { useRegisterItem } from './list';
+import { useRovingFocusItem } from './cursor';
+var StyledButton = styled('button')(__assign(__assign(__assign(__assign({}, type.levels.subtext.large), { fontWeight: type.properties.fontWeights.medium, border: 'none', backgroundColor: 'transparent', flex: '0 0 auto', maxWidth: '280px', padding: space.s, boxSizing: 'border-box', cursor: 'pointer', color: colors.licorice300, position: 'relative', marginLeft: "" + space.xxxs, borderRadius: borderRadius.m + " " + borderRadius.m + " 0px 0px", transition: 'background 150ms ease, color 150ms ease', '&:first-of-type': {
+        marginLeft: 0,
+    } }), hideMouseFocus), { '&:hover, &:focus': {
+        backgroundColor: colors.soap200,
+        color: colors.blackPepper400,
+    }, '&:focus': __assign({ outline: "none" }, focusRing({ inset: 'outer', width: 0, separation: 2 })), '&:disabled': {
+        color: colors.licorice100,
+        '&:hover': {
+            cursor: 'auto',
+            backgroundColor: "transparent",
+        },
+    }, '&[aria-selected=true]': {
+        color: colors.blueberry400,
+        cursor: 'default',
+        '&:after': {
+            position: 'absolute',
+            height: space.xxxs,
+            borderRadius: borderRadius.m + " " + borderRadius.m + " 0px 0px",
+            backgroundColor: colors.blueberry400,
+            bottom: 0,
+            content: "''",
+            left: 0,
+            marginTop: '-2px',
+            width: '100%',
+        },
+        '&:hover, &:focus': {
+            backgroundColor: "transparent",
+            color: colors.blueberry400,
+        },
+    } }));
+var useTab = function (model, elemProps, ref) {
+    if (elemProps === void 0) { elemProps = {}; }
+    var _a = useLocalRef(ref), localRef = _a.localRef, elementRef = _a.elementRef;
+    var name = useRegisterItem(model, localRef, elemProps.name, elemProps.index);
+    var state = model.state, events = model.events;
+    var onSelect = function () {
+        events.activate({ tab: name });
+    };
+    var isSelected = !!name && state.activeTab === name;
+    return mergeProps({
+        id: "tab-" + state.id + "-" + name,
+        tabIndex: !!name && state.cursorId === name ? undefined : -1,
+        'aria-selected': isSelected,
+        'aria-controls': "tabpanel-" + state.id + "-" + name,
+        onClick: onSelect,
+        isSelected: isSelected,
+        ref: elementRef,
+    }, useRovingFocusItem(model, elemProps));
+};
+export var Tab = createComponent('button')({
+    displayName: 'Tabs.Item',
+    Component: function (_a, ref, Element) {
+        var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
+        var localModel = useModelContext(TabsModelContext, model);
+        var props = useTab(localModel, elemProps, ref);
+        return (React.createElement(StyledButton, __assign({ type: "button", role: "tab", as: Element }, props), children));
+    },
+});

package/dist/{commonjs/tabs/lib/TabsPanels.d.ts → es6/tabs/lib/TabList.d.ts}

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { TabsModel } from './useTabsModel';
-export interface TabsPanelsProps<T = unknown> {
+export interface TabListProps {
     /**
      *
      */
-    children: ((item: T) => React.ReactNode) | React.ReactNode;
+    children: React.ReactNode;
     /**
      * Optionally pass a model directly to this component. Default is to implicitly use the same
      * model as the container component which uses React context. Only use this for advanced use-cases.
      */
-    model?: TabsModel<T>;
+    model?: TabsModel;
 }
-export declare const TabsPanels: import("../../common").Component<TabsPanelsProps<unknown>>;
-//# sourceMappingURL=TabsPanels.d.ts.map
+export declare const TabList: import("../../common").ElementComponent<"div", TabListProps>;
+//# sourceMappingURL=TabList.d.ts.map

package/dist/es6/tabs/lib/TabList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAcD,eAAO,MAAM,OAAO,8DAkBlB,CAAC"}

package/dist/es6/tabs/lib/{TabsMenuPopper.js → TabList.js}

@@ -21,16 +21,28 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { createComponent, useModelContext } from '@workday/canvas-kit-react/common';
-import { usePopupPopper, Popper } from '@workday/canvas-kit-react/popup';
+import { space, commonColors } from '@workday/canvas-kit-react/tokens';
+import { composeHooks, createComponent, styled, useModelContext, } from '@workday/canvas-kit-react/common';
+import { useRovingFocusList } from './cursor';
 import { TabsModelContext } from './Tabs';
-export var TabsMenuPopper = createComponent('div')({
-    displayName: 'Tabs.MenuPopper',
-    Component: function (_a, ref) {
+import { useResetCursorOnBlur } from './hooks';
+var TabsListContainer = styled('div')({
+    display: 'inline-block',
+    position: 'relative',
+    width: "100%",
+    borderBottom: "1px solid " + commonColors.divider,
+});
+var TabsListInnerContainer = styled('div')({
+    display: "flex",
+    margin: "0 " + space.m,
+});
+export var TabList = createComponent('div')({
+    displayName: 'Tabs.List',
+    Component: function (_a, ref, Element) {
         var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
         var localModel = useModelContext(TabsModelContext, model);
-        var props = useTabsMenuPopper(localModel.menu, elemProps, ref);
-        return React.createElement(Popper, __assign({}, props), children);
+        var props = composeHooks(useRovingFocusList, useResetCursorOnBlur)(localModel, elemProps, ref);
+        return (React.createElement(TabsListContainer, null,
+            React.createElement(TabsListInnerContainer, __assign({ as: Element, ref: ref, role: "tablist" }, props), children)));
     },
 });
-export var useTabsMenuPopper = usePopupPopper;

package/dist/{commonjs/tabs/lib/TabsPanel.d.ts → es6/tabs/lib/TabPanel.d.ts}

@@ -1,8 +1,7 @@
+/** @jsx jsx */
 import React from 'react';
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Box } from '@workday/canvas-kit-labs-react/common';
 import { TabsModel } from './useTabsModel';
-export interface TabPanelProps<T = unknown> extends ExtractProps<typeof Box, never> {
+export interface TabPanelProps {
     /**
      * The contents of the TabPanel.
      */
@@ -24,16 +23,7 @@ export interface TabPanelProps<T = unknown> extends ExtractProps<typeof Box, nev
      * Optionally pass a model directly to this component. Default is to implicitly use the same
      * model as the container component which uses React context. Only use this for advanced use-cases
      */
-    model?: TabsModel<T>;
+    model?: TabsModel;
 }
-export declare const useTabsPanel: <P extends {}, R>(model: TabsModel<unknown>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
-    role: string;
-    'aria-labelledby': string;
-    hidden: boolean;
-    id: string;
-    tabIndex: number;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
-export declare const TabsPanel: import("../../common").ElementComponent<"div", TabPanelProps<unknown>>;
-//# sourceMappingURL=TabsPanel.d.ts.map
+export declare const TabPanel: import("../../common").ElementComponent<"div", TabPanelProps>;
+//# sourceMappingURL=TabPanel.d.ts.map

package/dist/es6/tabs/lib/TabPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabPanel.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAUD,eAAO,MAAM,QAAQ,+DAiCnB,CAAC"}

package/dist/es6/tabs/lib/TabPanel.js

@@ -0,0 +1,51 @@
+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;
+};
+/** @jsx jsx */
+import React from 'react';
+import { jsx, css } from '@emotion/core';
+import { createComponent, mouseFocusBehavior, useLocalRef, useModelContext, useMountLayout, } from '@workday/canvas-kit-react/common';
+import { TabsModelContext } from './Tabs';
+var styles = css(mouseFocusBehavior({
+    '&:focus': {
+        outline: 'none',
+    },
+}));
+export var TabPanel = createComponent('div')({
+    displayName: 'Tabs.Panel',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, _b = _a.name, name = _b === void 0 ? '' : _b, model = _a.model, elemProps = __rest(_a, ["children", "name", "model"]);
+        var _c = useModelContext(TabsModelContext, model), state = _c.state, events = _c.events;
+        var _d = React.useState(name), tabName = _d[0], setTabName = _d[1];
+        var _e = useLocalRef(ref), localRef = _e.localRef, elementRef = _e.elementRef;
+        useMountLayout(function () {
+            var index = state.panelIndexRef.current;
+            var tabName = name || String(index);
+            events.registerPanel({ item: { id: tabName, ref: localRef } });
+            setTabName(tabName);
+            return function () {
+                events.unregisterPanel({ id: tabName });
+            };
+        });
+        return (jsx(Element, __assign({ ref: elementRef, role: "tabpanel", css: styles, "aria-labelledby": "tab-" + state.id + "-" + tabName, hidden: !!tabName && tabName !== state.activeTab, id: "tabpanel-" + state.id + "-" + tabName, tabIndex: 0 }, elemProps), children));
+    },
+});