@workday/canvas-kit-react 7.1.4 → 7.2.0-427-next.2

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

@@ -32,7 +32,7 @@ import { fontWeights } from './fontWeights';
  * );
  * ```
  */
-export var levels = {
+export const levels = {
     title: {
         large: {
             fontFamily: fontFamilies.default,

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

@@ -25,7 +25,7 @@ import { typeColors, statusColors } from '@workday/canvas-colors-web';
  * );
  * ```
  */
-export var variants = {
+export const variants = {
     error: {
         color: statusColors.error,
     },

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

@@ -1,5 +1,3 @@
-import { Tooltip } from './lib/Tooltip';
-export default Tooltip;
 export * from './lib/Tooltip';
 export * from './lib/OverflowTooltip';
 export * from './lib/TooltipContainer';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AAEtC,eAAe,OAAO,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC"}

package/dist/es6/tooltip/index.js

@@ -1,5 +1,3 @@
-import { Tooltip } from './lib/Tooltip';
-export default Tooltip;
 export * from './lib/Tooltip';
 export * from './lib/OverflowTooltip';
 export * from './lib/TooltipContainer';

package/dist/es6/tooltip/lib/OverflowTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAoBhE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAehE,CAAC;AAcF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAiBD,eAAO,MAAM,eAAe,0CAIzB,oBAAoB,gBAwCtB,CAAC"}
+{"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAmBhE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAahE,CAAC;AAcF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAiBD,eAAO,MAAM,eAAe,0CAIzB,oBAAoB,gBAwCtB,CAAC"}

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

@@ -1,25 +1,3 @@
-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 { getTransformFromPlacement, Popper } from '@workday/canvas-kit-react/popup';
 import { mergeCallback } from '@workday/canvas-kit-react/common';
@@ -29,8 +7,8 @@ import { useTooltip } from './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.
  */
-export var findOverflowElement = function (element) {
-    var style = getComputedStyle(element);
+export const findOverflowElement = (element) => {
+    const style = getComputedStyle(element);
     if (style.overflow === 'auto' ||
         style.overflow === 'scroll' ||
         style.overflow === 'clip' ||
@@ -38,9 +16,8 @@ export var findOverflowElement = function (element) {
         return element;
     }
     else if (element.children) {
-        // `children` is not defined for SVGElement in IE11
-        for (var i = 0; i < element.children.length; i++) {
-            var overflowElement = findOverflowElement(element.children[i]);
+        for (let i = 0; i < element.children.length; i++) {
+            const overflowElement = findOverflowElement(element.children[i]);
             if (overflowElement) {
                 return overflowElement;
             }
@@ -53,34 +30,31 @@ export var findOverflowElement = function (element) {
  * 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.
  */
-export var findEllipsisElement = function (element) {
-    var style = getComputedStyle(element);
+export const findEllipsisElement = (element) => {
+    const style = getComputedStyle(element);
     if (style.textOverflow === 'ellipsis' || Number(style.webkitLineClamp) > 0) {
         return element;
     }
-    else if (element.children) {
-        // `children` is not defined for SVGElement in IE11
-        for (var i = 0; i < element.children.length; i++) {
-            var overflowElement = findEllipsisElement(element.children[i]);
+    else {
+        for (let i = 0; i < element.children.length; i++) {
+            const overflowElement = findEllipsisElement(element.children[i]);
             if (overflowElement) {
                 return overflowElement;
             }
         }
         return null;
     }
-    return null;
 };
-var isOverflowed = function (element) {
-    var overflowElement = findEllipsisElement(element) || findOverflowElement(element);
+const isOverflowed = (element) => {
+    const overflowElement = findEllipsisElement(element) || 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] = mergeCallback(componentProps[key], elemProps[key]);
         }
@@ -90,30 +64,33 @@ function mergeCallbacks(elemProps, componentProps, keys) {
         return mergedProps;
     }, {});
 }
-export 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({ type: 'muted' }), targetProps = _d.targetProps, popperProps = _d.popperProps, tooltipProps = _d.tooltipProps;
-    var onMouseEnter = function (event) {
-        var target = event.currentTarget;
+export const OverflowTooltip = ({ placement = 'top', children, ...elemProps }) => {
+    const [titleText, setTitleText] = React.useState('');
+    const { targetProps, popperProps, tooltipProps } = 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(Popper, __assign({ placement: placement }, popperProps), function (_a) {
-            var placement = _a.placement;
-            var transformOrigin = getTransformFromPlacement(placement);
-            return (React.createElement(TooltipContainer, __assign({ transformOrigin: transformOrigin }, tooltipProps, elemProps), titleText));
+        React.cloneElement(children, {
+            ...targetProps,
+            onMouseEnter,
+            onFocus,
+            'aria-label': undefined,
+            ...mergeCallbacks({ ...targetProps, onMouseEnter, onFocus }, children.props),
+        }),
+        React.createElement(Popper, Object.assign({ placement: placement }, popperProps), ({ placement }) => {
+            const transformOrigin = getTransformFromPlacement(placement);
+            return (React.createElement(TooltipContainer, Object.assign({ transformOrigin: transformOrigin }, tooltipProps, elemProps), titleText));
         })));
 };

package/dist/es6/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/es6/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/es6/tooltip/lib/Tooltip.js

@@ -1,34 +1,11 @@
-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 innerText from 'react-innertext';
 import { getTransformFromPlacement, Popper } from '@workday/canvas-kit-react/popup';
-import { mergeCallback } from '@workday/canvas-kit-react/common';
+import { createComponent, mergeCallback } from '@workday/canvas-kit-react/common';
 import { TooltipContainer } from './TooltipContainer';
 import { useTooltip } from './useTooltip';
-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] = mergeCallback(componentProps[key], elemProps[key]);
         }
@@ -38,22 +15,27 @@ function mergeCallbacks(elemProps, componentProps, keys) {
         return mergedProps;
     }, {});
 }
-export 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 = innerText(title);
-    var _f = 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(Popper, __assign({ placement: placement }, popperProps), function (_a) {
-            var placement = _a.placement;
-            var transformOrigin = getTransformFromPlacement(placement);
-            return (React.createElement(TooltipContainer, __assign({ transformOrigin: transformOrigin }, elemProps, tooltipProps), title));
-        })));
-};
+export const Tooltip = createComponent('div')({
+    displayName: 'Tooltip',
+    Component({ type = 'label', placement = 'top', title, children, showDelay = 300, hideDelay = 100, ...elemProps }) {
+        const titleText = innerText(title);
+        const { targetProps, popperProps, tooltipProps } = 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(Popper, Object.assign({ placement: placement }, popperProps), ({ placement }) => {
+                const transformOrigin = getTransformFromPlacement(placement);
+                return (React.createElement(TooltipContainer, Object.assign({ transformOrigin: transformOrigin }, elemProps, tooltipProps), title));
+            })));
+    },
+});

package/dist/es6/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" | "button" | "meter" | "textarea" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "clipPath" | "filter" | "mask" | "marker" | "big" | "link" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "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" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "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" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "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/es6/tooltip/lib/TooltipContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAyB,MAAM,kCAAkC,CAAC;AAiBzF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QACd,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;KACnC,CAAC;CACH;AAOD,eAAO,MAAM,gBAAgB;;;6GA4D5B,CAAC"}
+{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAyB,MAAM,kCAAkC,CAAC;AAiBzF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QACd,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;KACnC,CAAC;CACH;AAOD,eAAO,MAAM,gBAAgB;;;6GAkE5B,CAAC"}

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

@@ -1,34 +1,34 @@
-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);
-};
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { borderRadius, colors, space, spaceNumbers, type } from '@workday/canvas-kit-react/tokens';
 import { getTranslateFromOrigin } from '@workday/canvas-kit-react/common';
-var tooltipAnimation = function (transformOrigin) {
-    var translate = getTranslateFromOrigin(transformOrigin, space.xxxs);
-    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);
+const tooltipAnimation = (transformOrigin) => {
+    const translate = getTranslateFromOrigin(transformOrigin, space.xxxs);
+    return 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',
 };
-export var TooltipContainer = styled('div')(__assign(__assign({}, type.levels.subtext.medium), { display: 'inline-flex', position: 'relative', padding: spaceNumbers.xxs + spaceNumbers.xxxs, color: colors.frenchVanilla100, a: {
+export const TooltipContainer = styled('div')({
+    ...type.levels.subtext.medium,
+    display: 'inline-flex',
+    position: 'relative',
+    padding: spaceNumbers.xxs + spaceNumbers.xxxs,
+    color: colors.frenchVanilla100,
+    a: {
         color: colors.frenchVanilla100,
         textDecoration: 'underline',
-    }, 
+    },
     // use :before vs margin to increase the tooltip hit-box
     ':before': {
         content: '""',
@@ -41,25 +41,33 @@ export var TooltipContainer = styled('div')(__assign(__assign({}, type.levels.su
         left: 0,
         right: 0,
         bottom: 0,
-    }, 
+    },
     // offset tooltips by 2 pixels when a keyboard focus ring is detected
     '[data-whatinput=keyboard] &': {
         padding: spaceNumbers.xxs + spaceNumbers.xxxs + 2,
         ':before': {
             margin: 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: -spaceNumbers.xxxs,
-    }, '[data-popper-placement="top-end"] &, [data-popper-placement="bottom-end"] &': {
+    },
+    '[data-popper-placement="top-end"] &, [data-popper-placement="bottom-end"] &': {
         right: -spaceNumbers.xxxs,
-    }, '[data-popper-placement="left-start"] &, [data-popper-placement="right-start"] &': {
+    },
+    '[data-popper-placement="left-start"] &, [data-popper-placement="right-start"] &': {
         top: -spaceNumbers.xxxs,
-    }, '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
+    },
+    '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
         bottom: -spaceNumbers.xxxs,
-    } }), function (_a) {
-    var _b = _a.transformOrigin, transformOrigin = _b === void 0 ? defaultTransformOrigin : _b;
+    },
+}, ({ transformOrigin = defaultTransformOrigin }) => {
     if (transformOrigin === null) {
         return {};
     }
@@ -68,8 +76,7 @@ export var TooltipContainer = styled('div')(__assign(__assign({}, type.levels.su
         animationDuration: '150ms',
         animationTimingFunction: 'ease-out',
         transformOrigin: transformOrigin
-            ? transformOrigin.vertical + " " + transformOrigin.horizontal
+            ? `${transformOrigin.vertical} ${transformOrigin.horizontal}`
             : 'top center',
     };
 });
-var templateObject_1;

package/dist/es6/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;AAkD/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;IA6CF,2EAA2E;;;;8BA3B5C,MAAM,cAAc;;6BAazB,gBAAgB;yBARpB,gBAAgB;;;IAkCtC,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"}

package/dist/es6/tooltip/lib/useTooltip.js

@@ -1,30 +1,29 @@
 import * as React from 'react';
-import { useCloseOnEscape, useAlwaysCloseOnOutsideClick, usePopupModel, useCloseOnFullscreenExit, } from '@workday/canvas-kit-react/popup';
+import { useCloseOnEscape, useAlwaysCloseOnOutsideClick, usePopupModel, useCloseOnFullscreenExit, useCloseOnTargetHidden, } from '@workday/canvas-kit-react/popup';
 import { useUniqueId } from '@workday/canvas-kit-react/common';
-var useIntentTimer = function (fn, waitMs) {
-    if (waitMs === void 0) { waitMs = 0; }
-    var timer = React.useRef();
-    var start = function () {
+const useIntentTimer = (fn, waitMs = 0) => {
+    const timer = React.useRef();
+    const start = () => {
         timer.current = window.setTimeout(fn, waitMs);
     };
-    var clear = function () {
+    const clear = () => {
         window.clearTimeout(timer.current);
         timer.current = undefined;
     };
     // be sure to clear our timeout
-    React.useEffect(function () {
-        return function () {
+    React.useEffect(() => {
+        return () => {
             window.clearTimeout(timer.current);
         };
     }, [timer]);
     return {
-        start: start,
-        clear: clear,
+        start,
+        clear,
     };
 };
-var isInteractiveElement = function (element) {
-    var tagName = element.tagName.toLowerCase();
-    var tabIndex = element.getAttribute('tabindex');
+const isInteractiveElement = (element) => {
+    const tagName = element.tagName.toLowerCase();
+    const tabIndex = element.getAttribute('tabindex');
     switch (tagName) {
         case 'button':
         case 'input':
@@ -40,33 +39,32 @@ var isInteractiveElement = function (element) {
  * Convenience hook for creating components with tooltips. It will return an object of properties to mix
  * into a target, popper and tooltip
  */
-export function useTooltip(_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.type, type = _c === void 0 ? 'label' : _c, _d = _b.titleText, titleText = _d === void 0 ? '' : _d, _e = _b.showDelay, showDelay = _e === void 0 ? 300 : _e, _f = _b.hideDelay, hideDelay = _f === void 0 ? 100 : _f;
-    var mouseDownRef = React.useRef(false); // use to prevent newly focused from making tooltip flash
-    var popupModel = usePopupModel();
-    var _g = React.useState(null), anchorElement = _g[0], setAnchorElement = _g[1];
-    var id = useUniqueId();
-    var intentTimerHide = useIntentTimer(popupModel.events.hide, hideDelay);
-    var intentTimerShow = useIntentTimer(popupModel.events.show, showDelay);
-    var onHide = function () {
+export function useTooltip({ type = 'label', titleText = '', showDelay = 300, hideDelay = 100, } = {}) {
+    const mouseDownRef = React.useRef(false); // use to prevent newly focused from making tooltip flash
+    const popupModel = usePopupModel();
+    const [anchorElement, setAnchorElement] = React.useState(null);
+    const id = useUniqueId();
+    const intentTimerHide = useIntentTimer(popupModel.events.hide, hideDelay);
+    const intentTimerShow = useIntentTimer(popupModel.events.show, showDelay);
+    const onHide = () => {
         intentTimerHide.start();
         intentTimerShow.clear();
     };
-    var onOpen = function () {
+    const onOpen = () => {
         intentTimerShow.start();
         intentTimerHide.clear();
     };
-    var onOpenFromTarget = function (event) {
+    const onOpenFromTarget = (event) => {
         setAnchorElement(event.currentTarget);
         onOpen();
     };
-    var onFocus = function (event) {
+    const onFocus = (event) => {
         if (!mouseDownRef.current) {
             onOpenFromTarget(event);
         }
         mouseDownRef.current = false;
     };
-    var onMouseDown = function (event) {
+    const onMouseDown = (event) => {
         mouseDownRef.current = true;
         if (isInteractiveElement(event.currentTarget)) {
             popupModel.events.hide();
@@ -75,24 +73,30 @@ export function useTooltip(_a) {
     useCloseOnEscape(popupModel);
     useAlwaysCloseOnOutsideClick(popupModel);
     useCloseOnFullscreenExit(popupModel);
-    var visible = popupModel.state.visibility !== 'hidden';
+    useCloseOnTargetHidden(popupModel);
+    const visible = popupModel.state.visibility !== 'hidden';
+    const targetProps = {
+        // extra description of the target element for assistive technology
+        'aria-describedby': type === 'describe' && visible ? id : undefined,
+        // This will replace the accessible name of the target element
+        'aria-label': type === 'label' ? titleText : undefined,
+        onMouseEnter: onOpenFromTarget,
+        onMouseLeave: onHide,
+        onMouseDown,
+        onFocus,
+        onBlur: onHide,
+    };
+    // remove `aria-describedby` if undefined to not override what's provided
+    if (targetProps['aria-describedby'] === undefined) {
+        delete targetProps['aria-describedby'];
+    }
     return {
         /** Mix these properties into the target element. **Must be an Element** */
-        targetProps: {
-            // extra description of the target element for assistive technology
-            'aria-describedby': type === 'describe' && visible ? id : undefined,
-            // This will replace the accessible name of the target element
-            'aria-label': type === 'label' ? titleText : undefined,
-            onMouseEnter: onOpenFromTarget,
-            onMouseLeave: onHide,
-            onMouseDown: onMouseDown,
-            onFocus: onFocus,
-            onBlur: onHide,
-        },
+        targetProps,
         /** Mix these properties into the `Popper` component */
         popperProps: {
             open: visible,
-            anchorElement: anchorElement,
+            anchorElement,
             ref: popupModel.state.stackRef,
         },
         /** Mix these properties into the `TooltipContainer` component */

package/form-field/index.ts

@@ -1,9 +1,3 @@
-import FormField from './lib/FormField';
-import Hint from './lib/Hint';
-import Label from './lib/Label';
-
-export default FormField;
-export {FormField, Hint, Label};
 export * from './lib/types';
 export * from './lib/FormField';
 export * from './lib/Hint';

package/form-field/lib/FormField.tsx

@@ -7,8 +7,8 @@ import {
   Themeable,
   generateUniqueId,
 } from '@workday/canvas-kit-react/common';
-import Hint from './Hint';
-import Label from './Label';
+import {Hint} from './Hint';
+import {Label} from './Label';
 import {FormFieldLabelPosition, FormFieldLabelPositionBehavior} from './types';
 
 export interface FormFieldProps
@@ -136,7 +136,7 @@ const FormFieldInputContainer = styled('div')<GrowthBehavior & FormFieldLabelPos
   }
 );
 
-class FormField extends React.Component<FormFieldProps> {
+export class FormField extends React.Component<React.PropsWithChildren<FormFieldProps>> {
   static LabelPosition = FormFieldLabelPosition;
   static ErrorType = ErrorType;
 
@@ -166,6 +166,10 @@ class FormField extends React.Component<FormFieldProps> {
         }
       }
 
+      if (this.props.required) {
+        props.required = true;
+      }
+
       props.id = this.inputId;
 
       return React.cloneElement(child, props);
@@ -237,5 +241,3 @@ class FormField extends React.Component<FormFieldProps> {
 
 FormField.LabelPosition = FormFieldLabelPosition;
 FormField.ErrorType = ErrorType;
-
-export default FormField;