@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/dist/commonjs/tokens/lib/type/index.d.ts

@@ -7,7 +7,7 @@ export { fontFamily, monoFontFamily } from './fontFamilies';
 export type { CanvasTypeProperties, CanvasTypeVariants, CanvasTypeHierarchy, };
 /**
  * ### Canvas Type Tokens
- * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+ * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
  *
  * ---
  * Type tokens are separated into three sections:
@@ -19,7 +19,7 @@ export type { CanvasTypeProperties, CanvasTypeVariants, CanvasTypeHierarchy, };
 export declare const type: CanvasType;
 declare type CanvasTypeProperties = {
     /** ### Font Family Tokens
-     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
      *
      * ---
      * There are two font family tokens:
@@ -41,7 +41,7 @@ declare type CanvasTypeProperties = {
      */
     fontFamilies: CanvasFontFamilies;
     /** ### Font Size Tokens
-     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
      *
      * ---
      * There are twelve font size tokens. Here's a quick reference:
@@ -71,7 +71,7 @@ declare type CanvasTypeProperties = {
      */
     fontSizes: CanvasFontSizes;
     /** ### Font Weight Tokens
-     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
      *
      * ---
      * There are three font-weight tokens:
@@ -97,7 +97,7 @@ declare type CanvasTypeProperties = {
 };
 export declare type CanvasType = {
     /** ### Canvas Type Hierarchy
-     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
      *
      * ---
      * The hierarchy is organized into four levels, which correspond to levels defined in Figma.
@@ -128,7 +128,7 @@ export declare type CanvasType = {
      */
     levels: CanvasTypeHierarchy;
     /** ### Canvas Type Properties
-     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
      *
      * ---
      * Type properties are organized in three parts:
@@ -144,7 +144,7 @@ export declare type CanvasType = {
      */
     properties: CanvasTypeProperties;
     /** ### Canvas Type Variants
-     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
      *
      * ---
      * There are three type variants:

package/dist/commonjs/tokens/lib/type/index.js

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.type = exports.monoFontFamily = exports.fontFamily = void 0;
-var fontFamilies_1 = require("./fontFamilies");
-var fontSizes_1 = require("./fontSizes");
-var fontWeights_1 = require("./fontWeights");
-var levels_1 = require("./levels");
-var variants_1 = require("./variants");
+const fontFamilies_1 = require("./fontFamilies");
+const fontSizes_1 = require("./fontSizes");
+const fontWeights_1 = require("./fontWeights");
+const levels_1 = require("./levels");
+const variants_1 = require("./variants");
 var fontFamilies_2 = require("./fontFamilies");
 Object.defineProperty(exports, "fontFamily", { enumerable: true, get: function () { return fontFamilies_2.fontFamily; } });
 Object.defineProperty(exports, "monoFontFamily", { enumerable: true, get: function () { return fontFamilies_2.monoFontFamily; } });
 /** ### Canvas Type Properties
- * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+ * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
  *
  * ---
  * The type properties provide precise control and are only intended to be used when the type hierarchy tokens are not well-suited for the task.
@@ -23,14 +23,14 @@ Object.defineProperty(exports, "monoFontFamily", { enumerable: true, get: functi
  *
  * You can find more detailed information by inspecting individual properties.
  */
-var properties = {
+const properties = {
     fontFamilies: fontFamilies_1.fontFamilies,
     fontSizes: fontSizes_1.fontSizes,
     fontWeights: fontWeights_1.fontWeights,
 };
 /**
  * ### Canvas Type Tokens
- * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
+ * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens--type)
  *
  * ---
  * Type tokens are separated into three sections:
@@ -41,6 +41,6 @@ var properties = {
  * */
 exports.type = {
     levels: levels_1.levels,
-    properties: properties,
+    properties,
     variants: variants_1.variants,
 };

package/dist/commonjs/tokens/lib/type/levels.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.levels = void 0;
-var canvas_colors_web_1 = require("@workday/canvas-colors-web");
-var fontFamilies_1 = require("./fontFamilies");
-var fontSizes_1 = require("./fontSizes");
-var fontWeights_1 = require("./fontWeights");
+const canvas_colors_web_1 = require("@workday/canvas-colors-web");
+const fontFamilies_1 = require("./fontFamilies");
+const fontSizes_1 = require("./fontSizes");
+const fontWeights_1 = require("./fontWeights");
 /** ### Canvas Type Hierarchy
  * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
  *

package/dist/commonjs/tokens/lib/type/variants.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.variants = void 0;
-var canvas_colors_web_1 = require("@workday/canvas-colors-web");
+const canvas_colors_web_1 = require("@workday/canvas-colors-web");
 /** ### Canvas Type Variants
  * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
  *

package/dist/commonjs/tooltip/lib/OverflowTooltip.js

@@ -1,15 +1,4 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,30 +18,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverflowTooltip = exports.findEllipsisElement = exports.findOverflowElement = void 0;
-var React = __importStar(require("react"));
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var common_1 = require("@workday/canvas-kit-react/common");
-var TooltipContainer_1 = require("./TooltipContainer");
-var useTooltip_1 = require("./useTooltip");
+const React = __importStar(require("react"));
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const common_1 = require("@workday/canvas-kit-react/common");
+const TooltipContainer_1 = require("./TooltipContainer");
+const useTooltip_1 = require("./useTooltip");
 /**
  * Look for an element within the tree for an overflow element (auto, scroll, clip, or hidden).
  * This could be the passed element, or a descendant. If no element is found, `null` is returned.
  */
-var findOverflowElement = function (element) {
-    var style = getComputedStyle(element);
+const findOverflowElement = (element) => {
+    const style = getComputedStyle(element);
     if (style.overflow === 'auto' ||
         style.overflow === 'scroll' ||
         style.overflow === 'clip' ||
@@ -60,8 +38,8 @@ var findOverflowElement = function (element) {
         return element;
     }
     else if (element.children) {
-        for (var i = 0; i < element.children.length; i++) {
-            var overflowElement = exports.findOverflowElement(element.children[i]);
+        for (let i = 0; i < element.children.length; i++) {
+            const overflowElement = exports.findOverflowElement(element.children[i]);
             if (overflowElement) {
                 return overflowElement;
             }
@@ -75,14 +53,14 @@ exports.findOverflowElement = findOverflowElement;
  * Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
  * This could be the passed element, or a descendant. If no element is found, `null` is returned.
  */
-var findEllipsisElement = function (element) {
-    var style = getComputedStyle(element);
+const findEllipsisElement = (element) => {
+    const style = getComputedStyle(element);
     if (style.textOverflow === 'ellipsis' || Number(style.webkitLineClamp) > 0) {
         return element;
     }
     else {
-        for (var i = 0; i < element.children.length; i++) {
-            var overflowElement = exports.findEllipsisElement(element.children[i]);
+        for (let i = 0; i < element.children.length; i++) {
+            const overflowElement = exports.findEllipsisElement(element.children[i]);
             if (overflowElement) {
                 return overflowElement;
             }
@@ -91,17 +69,16 @@ var findEllipsisElement = function (element) {
     }
 };
 exports.findEllipsisElement = findEllipsisElement;
-var isOverflowed = function (element) {
-    var overflowElement = exports.findEllipsisElement(element) || exports.findOverflowElement(element);
+const isOverflowed = (element) => {
+    const overflowElement = exports.findEllipsisElement(element) || exports.findOverflowElement(element);
     if (overflowElement) {
         return (overflowElement.scrollWidth > overflowElement.clientWidth ||
             overflowElement.scrollHeight > overflowElement.clientHeight);
     }
     return false;
 };
-function mergeCallbacks(elemProps, componentProps, keys) {
-    if (keys === void 0) { keys = Object.keys(componentProps); }
-    return keys.reduce(function (mergedProps, key) {
+function mergeCallbacks(elemProps, componentProps, keys = Object.keys(componentProps)) {
+    return keys.reduce((mergedProps, key) => {
         if (typeof elemProps[key] === 'function') {
             mergedProps[key] = common_1.mergeCallback(componentProps[key], elemProps[key]);
         }
@@ -111,31 +88,34 @@ function mergeCallbacks(elemProps, componentProps, keys) {
         return mergedProps;
     }, {});
 }
-var OverflowTooltip = function (_a) {
-    var _b = _a.placement, placement = _b === void 0 ? 'top' : _b, children = _a.children, elemProps = __rest(_a, ["placement", "children"]);
-    var _c = React.useState(''), titleText = _c[0], setTitleText = _c[1];
-    var _d = useTooltip_1.useTooltip({ type: 'muted' }), targetProps = _d.targetProps, popperProps = _d.popperProps, tooltipProps = _d.tooltipProps;
-    var onMouseEnter = function (event) {
-        var target = event.currentTarget;
+const OverflowTooltip = ({ placement = 'top', children, ...elemProps }) => {
+    const [titleText, setTitleText] = React.useState('');
+    const { targetProps, popperProps, tooltipProps } = useTooltip_1.useTooltip({ type: 'muted' });
+    const onMouseEnter = (event) => {
+        const target = event.currentTarget;
         setTitleText(target instanceof HTMLElement ? target.innerText : '');
         if (isOverflowed(target)) {
             targetProps.onMouseEnter(event);
         }
     };
-    var onFocus = function (event) {
-        var target = event.currentTarget;
+    const onFocus = (event) => {
+        const target = event.currentTarget;
         setTitleText(target instanceof HTMLElement ? target.innerText : '');
         if (isOverflowed(target)) {
             targetProps.onFocus(event);
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.cloneElement(children, __assign(__assign(__assign({}, targetProps), { onMouseEnter: onMouseEnter,
-            onFocus: onFocus, 'aria-label': undefined }), mergeCallbacks(__assign(__assign({}, targetProps), { onMouseEnter: onMouseEnter, onFocus: onFocus }), children.props))),
-        React.createElement(popup_1.Popper, __assign({ placement: placement }, popperProps), function (_a) {
-            var placement = _a.placement;
-            var transformOrigin = popup_1.getTransformFromPlacement(placement);
-            return (React.createElement(TooltipContainer_1.TooltipContainer, __assign({ transformOrigin: transformOrigin }, tooltipProps, elemProps), titleText));
+        React.cloneElement(children, {
+            ...targetProps,
+            onMouseEnter,
+            onFocus,
+            'aria-label': undefined,
+            ...mergeCallbacks({ ...targetProps, onMouseEnter, onFocus }, children.props),
+        }),
+        React.createElement(popup_1.Popper, Object.assign({ placement: placement }, popperProps), ({ placement }) => {
+            const transformOrigin = popup_1.getTransformFromPlacement(placement);
+            return (React.createElement(TooltipContainer_1.TooltipContainer, Object.assign({ transformOrigin: transformOrigin }, tooltipProps, elemProps), titleText));
         })));
 };
 exports.OverflowTooltip = OverflowTooltip;

package/dist/commonjs/tooltip/lib/Tooltip.d.ts

@@ -46,5 +46,5 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      */
     hideDelay?: number;
 }
-export declare const Tooltip: ({ type, placement, title, children, showDelay, hideDelay, ...elemProps }: TooltipProps) => JSX.Element;
+export declare const Tooltip: import("@workday/canvas-kit-react/common").ElementComponent<"div", TooltipProps>;
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/commonjs/tooltip/lib/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,eAAO,MAAM,OAAO,6EAQjB,YAAY,gBA8Bd,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,eAAO,MAAM,OAAO,kFAyClB,CAAC"}

package/dist/commonjs/tooltip/lib/Tooltip.js

@@ -1,15 +1,4 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,31 +18,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        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.Tooltip = void 0;
-var React = __importStar(require("react"));
-var react_innertext_1 = __importDefault(require("react-innertext"));
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var common_1 = require("@workday/canvas-kit-react/common");
-var TooltipContainer_1 = require("./TooltipContainer");
-var useTooltip_1 = require("./useTooltip");
-function mergeCallbacks(elemProps, componentProps, keys) {
-    if (keys === void 0) { keys = Object.keys(componentProps); }
-    return keys.reduce(function (mergedProps, key) {
+const React = __importStar(require("react"));
+const react_innertext_1 = __importDefault(require("react-innertext"));
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const common_1 = require("@workday/canvas-kit-react/common");
+const TooltipContainer_1 = require("./TooltipContainer");
+const useTooltip_1 = require("./useTooltip");
+function mergeCallbacks(elemProps, componentProps, keys = Object.keys(componentProps)) {
+    return keys.reduce((mergedProps, key) => {
         if (typeof elemProps[key] === 'function') {
             mergedProps[key] = common_1.mergeCallback(componentProps[key], elemProps[key]);
         }
@@ -63,23 +40,27 @@ function mergeCallbacks(elemProps, componentProps, keys) {
         return mergedProps;
     }, {});
 }
-var Tooltip = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? 'label' : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, title = _a.title, children = _a.children, _d = _a.showDelay, showDelay = _d === void 0 ? 300 : _d, _e = _a.hideDelay, hideDelay = _e === void 0 ? 100 : _e, elemProps = __rest(_a, ["type", "placement", "title", "children", "showDelay", "hideDelay"]);
-    var titleText = react_innertext_1.default(title);
-    var _f = useTooltip_1.useTooltip({
-        type: type,
-        titleText: titleText,
-        showDelay: showDelay,
-        hideDelay: hideDelay,
-    }), targetProps = _f.targetProps, popperProps = _f.popperProps, tooltipProps = _f.tooltipProps;
-    return (React.createElement(React.Fragment, null,
-        React.cloneElement(children, __assign(__assign(__assign({}, targetProps), mergeCallbacks(children.props, targetProps)), (type === 'muted' && children.props['aria-label']
-            ? { 'aria-label': children.props['aria-label'] }
-            : {}))),
-        React.createElement(popup_1.Popper, __assign({ placement: placement }, popperProps), function (_a) {
-            var placement = _a.placement;
-            var transformOrigin = popup_1.getTransformFromPlacement(placement);
-            return (React.createElement(TooltipContainer_1.TooltipContainer, __assign({ transformOrigin: transformOrigin }, elemProps, tooltipProps), title));
-        })));
-};
-exports.Tooltip = Tooltip;
+exports.Tooltip = common_1.createComponent('div')({
+    displayName: 'Tooltip',
+    Component({ type = 'label', placement = 'top', title, children, showDelay = 300, hideDelay = 100, ...elemProps }) {
+        const titleText = react_innertext_1.default(title);
+        const { targetProps, popperProps, tooltipProps } = useTooltip_1.useTooltip({
+            type,
+            titleText,
+            showDelay,
+            hideDelay,
+        });
+        return (React.createElement(React.Fragment, null,
+            React.cloneElement(children, {
+                ...targetProps,
+                ...mergeCallbacks(children.props, targetProps),
+                ...(type === 'muted' && children.props['aria-label']
+                    ? { 'aria-label': children.props['aria-label'] }
+                    : {}),
+            }),
+            React.createElement(popup_1.Popper, Object.assign({ placement: placement }, popperProps), ({ placement }) => {
+                const transformOrigin = popup_1.getTransformFromPlacement(placement);
+                return (React.createElement(TooltipContainer_1.TooltipContainer, Object.assign({ transformOrigin: transformOrigin }, elemProps, tooltipProps), title));
+            })));
+    },
+});

package/dist/commonjs/tooltip/lib/TooltipContainer.d.ts

@@ -21,6 +21,6 @@ export interface TooltipContainerProps extends React.HTMLAttributes<HTMLDivEleme
 }
 export declare const TooltipContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: "symbol" | "object" | "s" | "big" | "link" | "small" | "sub" | "sup" | "circle" | "stop" | "path" | "style" | "map" | "filter" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
+    as?: React.ElementType<any> | undefined;
 } & TooltipContainerProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=TooltipContainer.d.ts.map

package/dist/commonjs/tooltip/lib/TooltipContainer.js

@@ -1,40 +1,40 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TooltipContainer = void 0;
-var react_1 = require("@emotion/react");
-var styled_1 = __importDefault(require("@emotion/styled"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var tooltipAnimation = function (transformOrigin) {
-    var translate = common_1.getTranslateFromOrigin(transformOrigin, tokens_1.space.xxxs);
-    return react_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "], ["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "])), translate.x, translate.y);
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const tooltipAnimation = (transformOrigin) => {
+    const translate = common_1.getTranslateFromOrigin(transformOrigin, tokens_1.space.xxxs);
+    return react_1.keyframes `
+    0% {
+      opacity: 0;
+      transform: translate(${translate.x}px, ${translate.y}px);
+    }
+    100% {
+      opacity: 1;
+      transform: translate(0);
+    }
+  `;
 };
-var defaultTransformOrigin = {
+const defaultTransformOrigin = {
     vertical: 'bottom',
     horizontal: 'center',
 };
-exports.TooltipContainer = styled_1.default('div')(__assign(__assign({}, tokens_1.type.levels.subtext.medium), { display: 'inline-flex', position: 'relative', padding: tokens_1.spaceNumbers.xxs + tokens_1.spaceNumbers.xxxs, color: tokens_1.colors.frenchVanilla100, a: {
+exports.TooltipContainer = styled_1.default('div')({
+    ...tokens_1.type.levels.subtext.medium,
+    display: 'inline-flex',
+    position: 'relative',
+    padding: tokens_1.spaceNumbers.xxs + tokens_1.spaceNumbers.xxxs,
+    color: tokens_1.colors.frenchVanilla100,
+    a: {
         color: tokens_1.colors.frenchVanilla100,
         textDecoration: 'underline',
-    }, 
+    },
     // use :before vs margin to increase the tooltip hit-box
     ':before': {
         content: '""',
@@ -47,30 +47,33 @@ exports.TooltipContainer = styled_1.default('div')(__assign(__assign({}, tokens_
         left: 0,
         right: 0,
         bottom: 0,
-    }, 
+    },
     // offset tooltips by 2 pixels when a keyboard focus ring is detected
     '[data-whatinput=keyboard] &': {
         padding: tokens_1.spaceNumbers.xxs + tokens_1.spaceNumbers.xxxs + 2,
         ':before': {
             margin: tokens_1.spaceNumbers.xxxs + 2,
         },
-    }, 
+    },
     // Hide tooltip when the reference element is either clipped or fully hidden
     '[data-popper-reference-hidden] &': {
         visibility: 'hidden',
         pointerEvents: 'none',
-    }, 
+    },
     // Fix offsets based on placement
     '[data-popper-placement="top-start"] &, [data-popper-placement="bottom-start"] &': {
         left: -tokens_1.spaceNumbers.xxxs,
-    }, '[data-popper-placement="top-end"] &, [data-popper-placement="bottom-end"] &': {
+    },
+    '[data-popper-placement="top-end"] &, [data-popper-placement="bottom-end"] &': {
         right: -tokens_1.spaceNumbers.xxxs,
-    }, '[data-popper-placement="left-start"] &, [data-popper-placement="right-start"] &': {
+    },
+    '[data-popper-placement="left-start"] &, [data-popper-placement="right-start"] &': {
         top: -tokens_1.spaceNumbers.xxxs,
-    }, '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
+    },
+    '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
         bottom: -tokens_1.spaceNumbers.xxxs,
-    } }), function (_a) {
-    var _b = _a.transformOrigin, transformOrigin = _b === void 0 ? defaultTransformOrigin : _b;
+    },
+}, ({ transformOrigin = defaultTransformOrigin }) => {
     if (transformOrigin === null) {
         return {};
     }
@@ -79,8 +82,7 @@ exports.TooltipContainer = styled_1.default('div')(__assign(__assign({}, tokens_
         animationDuration: '150ms',
         animationTimingFunction: 'ease-out',
         transformOrigin: transformOrigin
-            ? transformOrigin.vertical + " " + transformOrigin.horizontal
+            ? `${transformOrigin.vertical} ${transformOrigin.horizontal}`
             : 'top center',
     };
 });
-var templateObject_1;

package/dist/commonjs/tooltip/lib/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IA8CF,2EAA2E;;;;8BA5B5C,MAAM,cAAc;;6BAazB,gBAAgB;yBARpB,gBAAgB;;;IAmCtC,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IA+DF,2EAA2E;;;;8BA7C5C,MAAM,cAAc;;6BAazB,gBAAgB;yBARpB,gBAAgB;;;IA0CtC,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}