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

package/dist/commonjs/menu/lib/MenuItem.js

@@ -1,28 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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]; } });
@@ -42,30 +18,32 @@ 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 });
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var Item = styled_1.default('li')(__assign(__assign({}, tokens_1.type.levels.subtext.large), { padding: tokens_1.space.xxs + " " + tokens_1.space.s, height: tokens_1.space.xl, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.blackPepper300, display: 'flex', flexDirection: 'row', alignItems: 'center', transition: 'background-color 80ms, color 80ms', '&:focus': {
+exports.DeprecatedMenuItem = void 0;
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const Item = styled_1.default('li')({
+    ...tokens_1.type.levels.subtext.large,
+    padding: `${tokens_1.space.xxs} ${tokens_1.space.s}`,
+    height: tokens_1.space.xl,
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    color: tokens_1.colors.blackPepper300,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    transition: 'background-color 80ms, color 80ms',
+    '&:focus': {
         outline: 'none',
-    } }), function (_a) {
-    var _b;
-    var isFocused = _a.isFocused, isDisabled = _a.isDisabled;
+    },
+}, ({ isHeader }) => {
+    return { pointerEvents: isHeader ? 'none' : 'all' };
+}, ({ isFocused, isDisabled }) => {
     if (!isFocused && !isDisabled) {
         return {
             backgroundColor: 'inherit',
@@ -86,25 +64,26 @@ var Item = styled_1.default('li')(__assign(__assign({}, tokens_1.type.levels.sub
     }
     else {
         // Is focused or focused and disabled
-        return _b = {
-                backgroundColor: isDisabled ? tokens_1.colors.blueberry200 : tokens_1.commonColors.focusBackground,
-                color: tokens_1.typeColors.inverse,
-                'span .wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+        return {
+            backgroundColor: isDisabled ? tokens_1.colors.blueberry200 : tokens_1.commonColors.focusBackground,
+            color: tokens_1.typeColors.inverse,
+            'span .wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+                fill: isDisabled ? tokens_1.iconColors.disabled : tokens_1.iconColors.active,
+            },
+            '&:hover': {
+                'span .wd-icon-fill, span .wd-icon-accent, span .wd-icon-accent2': {
+                    fill: tokens_1.iconColors.inverse,
+                },
+                'span .wd-icon-background ~ .wd-icon-accent, span .wd-icon-background ~ .wd-icon-accent2': {
                     fill: isDisabled ? tokens_1.iconColors.disabled : tokens_1.iconColors.active,
                 },
-                '&:hover': {
-                    'span .wd-icon-fill, span .wd-icon-accent, span .wd-icon-accent2': {
-                        fill: tokens_1.iconColors.inverse,
-                    },
-                    'span .wd-icon-background ~ .wd-icon-accent, span .wd-icon-background ~ .wd-icon-accent2': {
-                        fill: isDisabled ? tokens_1.iconColors.disabled : tokens_1.iconColors.active,
-                    },
-                    'span .wd-icon-background': {
-                        fill: tokens_1.iconColors.inverse,
-                    },
-                }
+                'span .wd-icon-background': {
+                    fill: tokens_1.iconColors.inverse,
+                },
             },
-            _b["[data-whatinput='mouse'] &,\n          [data-whatinput='touch'] &,\n          [data-whatinput='pointer'] &"] = {
+            [`[data-whatinput='mouse'] &,
+          [data-whatinput='touch'] &,
+          [data-whatinput='pointer'] &`]: {
                 backgroundColor: 'inherit',
                 color: tokens_1.colors.blackPepper300,
                 'span .wd-icon-background ~ .wd-icon-accent, span .wd-icon-background ~ .wd-icon-accent2': {
@@ -120,55 +99,67 @@ var Item = styled_1.default('li')(__assign(__assign({}, tokens_1.type.levels.sub
                     fill: tokens_1.iconColors.standard,
                 },
             },
-            _b;
+        };
     }
 });
-var LabelContainer = styled_1.default('span')({
+const LabelContainer = styled_1.default('span')({
     flex: '1 1 auto',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
 });
-var Divider = styled_1.default('hr')({
+const Divider = styled_1.default('hr')({
     display: 'block',
     height: 1,
     border: 0,
-    borderTop: "1px solid " + tokens_1.colors.soap400,
-    margin: tokens_1.space.xxs + " 0",
+    borderTop: `1px solid ${tokens_1.colors.soap400}`,
+    margin: `${tokens_1.space.xxs} 0`,
 });
-var iconSize = 24;
-var iconPadding = 16;
-var StyledSystemIcon = styled_1.default(icon_1.SystemIcon)({
-    minWidth: iconSize + iconPadding,
+const iconSize = 24;
+const iconPadding = 16;
+const StyledSystemIcon = styled_1.default(icon_1.SystemIcon)({
+    minWidth: iconSize + iconPadding, // gives padding between LabelContainer, no matter the direction
 });
-var SecondaryStyledSystemIcon = styled_1.default(icon_1.SystemIcon)({
-    display: "flex",
+const SecondaryStyledSystemIcon = styled_1.default(icon_1.SystemIcon)({
+    display: `flex`,
     minWidth: iconSize + iconPadding,
-    justifyContent: "flex-end",
+    justifyContent: `flex-end`,
 });
-var iconProps = null;
-var secondaryIconProps = null;
-var setIconProps = function (icon, isDisabled, isFocused) {
+let iconProps = null;
+let secondaryIconProps = null;
+const setIconProps = (icon, isDisabled, isFocused) => {
     if (!icon) {
         return null;
     }
-    var props = {
+    let props = {
         icon: icon,
         size: iconSize,
     };
     if (isDisabled) {
-        props = __assign(__assign({}, props), { fill: tokens_1.iconColors.disabled, fillHover: tokens_1.iconColors.disabled, accent: tokens_1.iconColors.disabled, accentHover: tokens_1.iconColors.disabled });
+        props = {
+            ...props,
+            fill: tokens_1.iconColors.disabled,
+            fillHover: tokens_1.iconColors.disabled,
+            accent: tokens_1.iconColors.disabled,
+            accentHover: tokens_1.iconColors.disabled,
+        };
     }
     if (isFocused) {
-        props = __assign(__assign({}, props), { fill: tokens_1.iconColors.inverse, fillHover: tokens_1.iconColors.inverse, accent: tokens_1.iconColors.inverse, accentHover: tokens_1.iconColors.inverse, background: tokens_1.iconColors.inverse });
+        props = {
+            ...props,
+            fill: tokens_1.iconColors.inverse,
+            fillHover: tokens_1.iconColors.inverse,
+            accent: tokens_1.iconColors.inverse,
+            accentHover: tokens_1.iconColors.inverse,
+            background: tokens_1.iconColors.inverse,
+        };
     }
     return props;
 };
-var scrollIntoViewIfNeeded = function (elem, centerIfNeeded) {
-    if (centerIfNeeded === void 0) { centerIfNeeded = true; }
-    var parent = elem.parentElement;
+const scrollIntoViewIfNeeded = (elem, centerIfNeeded = true) => {
+    const parent = elem.parentElement;
     if (elem && parent) {
-        var parentComputedStyle = window.getComputedStyle(parent, null), parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10), parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width'), 10), overTop = elem.offsetTop - parent.offsetTop < parent.scrollTop, overBottom = elem.offsetTop - parent.offsetTop + elem.clientHeight - parentBorderTopWidth >
+        const parentComputedStyle = window.getComputedStyle(parent, null), parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10), parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width'), 10), overTop = elem.offsetTop - parent.offsetTop < parent.scrollTop, overBottom = elem.offsetTop - parent.offsetTop + elem.clientHeight - parentBorderTopWidth >
             parent.scrollTop + parent.clientHeight, overLeft = elem.offsetLeft - parent.offsetLeft < parent.scrollLeft, overRight = elem.offsetLeft - parent.offsetLeft + elem.clientWidth - parentBorderLeftWidth >
             parent.scrollLeft + parent.clientWidth, alignWithTop = overTop && !overBottom;
         if ((overTop || overBottom) && centerIfNeeded) {
@@ -192,41 +183,63 @@ var scrollIntoViewIfNeeded = function (elem, centerIfNeeded) {
         }
     }
 };
-var MenuItem = /** @class */ (function (_super) {
-    __extends(MenuItem, _super);
-    function MenuItem() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.ref = React.createRef();
-        _this.componentDidUpdate = function (prevProps) {
-            if (!prevProps.isFocused && _this.props.isFocused) {
-                if (_this.ref.current) {
-                    scrollIntoViewIfNeeded(_this.ref.current);
+/**
+ * `DeprecatedMenuItem` renders an `<li>` element with the correct attributes to ensure it is
+ * accessible. If you choose to implement your own custom menu items, be sure to use semantic `<li>`
+ * elements with the following attributes:
+ *
+ * - `role="menuitem"`
+ * - `tabindex={-1}`
+ * - `id`s following this pattern: `${MenuId}-${index}`
+ *
+ * As of Canvas Kit v8, Menu is being deprecated.
+ * It will be removed in v10. Please see the [upgrade
+ * guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page) for
+ * more information.
+ *
+ * Undocumented props are spread to the underlying `<li>` element.
+ *
+ * @deprecated
+ */
+class DeprecatedMenuItem extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.ref = React.createRef();
+        this.componentDidUpdate = (prevProps) => {
+            if (!prevProps.isFocused && this.props.isFocused) {
+                if (this.ref.current) {
+                    scrollIntoViewIfNeeded(this.ref.current);
                 }
             }
         };
-        _this.handleClick = function (event) {
-            if (_this.props.isDisabled) {
+        this.handleClick = (event) => {
+            if (this.props.isDisabled) {
                 return;
             }
-            if (_this.props.onClick) {
-                _this.props.onClick(event);
+            if (this.props.onClick) {
+                this.props.onClick(event);
             }
         };
-        return _this;
     }
-    MenuItem.prototype.render = function () {
-        var _a = this.props, onClick = _a.onClick, children = _a.children, id = _a.id, icon = _a.icon, secondaryIcon = _a.secondaryIcon, hasDivider = _a.hasDivider, isDisabled = _a.isDisabled, isFocused = _a.isFocused, role = _a.role, elemProps = __rest(_a, ["onClick", "children", "id", "icon", "secondaryIcon", "hasDivider", "isDisabled", "isFocused", "role"]);
+    componentDidMount() {
+        console.warn(`This component is being deprecated and will be removed in Canvas Kit V9.\n
+      For more information, please see the V8 upgrade guide:\n
+      https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page
+      `);
+    }
+    render() {
+        const { onClick, children, id, icon, secondaryIcon, hasDivider, isDisabled, isFocused, isHeader, role, ...elemProps } = this.props;
         iconProps = setIconProps(icon, isDisabled, isFocused);
         secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
         return (React.createElement(React.Fragment, null,
-            hasDivider && React.createElement(Divider, null),
-            React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: role, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused }, elemProps),
-                icon && iconProps && React.createElement(StyledSystemIcon, __assign({}, iconProps)),
+            hasDivider && React.createElement(Divider, { "aria-hidden": "true" }),
+            React.createElement(Item, Object.assign({ ref: this.ref, tabIndex: -1, id: id, role: isHeader ? 'presentation' : role, "aria-hidden": isHeader ? true : undefined, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused, isHeader: !!isHeader }, elemProps),
+                icon && iconProps && React.createElement(StyledSystemIcon, Object.assign({}, iconProps)),
                 React.createElement(LabelContainer, null, children),
-                secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, __assign({}, secondaryIconProps))))));
-    };
-    return MenuItem;
-}(React.Component));
+                secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, Object.assign({}, secondaryIconProps))))));
+    }
+}
+exports.DeprecatedMenuItem = DeprecatedMenuItem;
 /**
  * If we destructure props, shouldClose will be undefined because the value is only applied for the render method only.
  * We have to use defaultProps so that the value of shouldClose is applied for every method and therefore references in the Menu component.
@@ -234,8 +247,7 @@ var MenuItem = /** @class */ (function (_super) {
  */
 // TODO: Remove this ts-ignore when we convert to a functional component
 // @ts-ignore
-MenuItem.defaultProps = {
+DeprecatedMenuItem.defaultProps = {
     shouldClose: true,
     role: 'menuitem',
 };
-exports.default = MenuItem;

package/dist/commonjs/pill/lib/Pill.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BoxProps } from '@workday/canvas-kit-react/layout';
 export interface PillProps extends BoxProps {
     /**
@@ -7,6 +6,49 @@ export interface PillProps extends BoxProps {
      */
     variant?: 'default' | 'readOnly' | 'removable';
 }
+/**
+ * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
+ * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
+ * (icons or avatars) are intended to be descriptive, helping support the label. They should not
+ * receive focus.
+ *
+ * `Pill` is the container component. It also provides a React context model for its subcomponents.
+ * Based on the `variant` prop this component will render different styled `Pill`s.
+ *
+ * Example of read only:
+ *
+ * ```tsx
+ * <Pill variant="readOnly">This is a read only</Pill>
+ * ```
+ *
+ * Example of interactive:
+ *
+ * ```tsx
+ * <Pill onClick={() => console.log('clicked')}>
+ *   <Pill.Avatar /> Regina Skeltor
+ * </Pill>
+ * ```
+ *
+ * Example of removable:
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   <Pill.Avatar /> Regina Skeltor
+ *   <Pill.IconButton onClick={() => console.log('clicked')} />
+ * </Pill>
+ * ```
+ *
+ * If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
+ * provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more
+ * intentional click target that prevents users from accidentally deleting an item.
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   Shoes
+ *   <Pill.IconButton onClick={() => console.log('handle remove')} />
+ * </Pill>
+ * ```
+ */
 export declare const Pill: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillProps & Partial<{
     maxWidth: string | number;
     disabled: boolean;
@@ -19,7 +61,18 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
     };
     events: {};
 }> & {
-    Context: React.Context<{
+    /**
+     * This component renders an avatar. It supports all props of the `Avatar` component.
+     *
+     * ```tsx
+     * <Pill variant="removable">
+     *   <Pill.Avatar url={avatarUrl} />
+     *   Regina Skeltor
+     *   <Pill.IconButton onClick={() => console.log('handle remove')} />
+     * </Pill>
+     * ```
+     */
+    Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillAvatar").PillAvatarProps, {
         state: {
             id: string;
             maxWidth: string | number;
@@ -27,7 +80,29 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
         };
         events: {};
     }>;
-} & {
+    /**
+     * This component renders its `children` as the count.
+     *
+     * ```tsx
+     * <Pill onClick={() => console.warn('clicked')}>
+     *   Shoes
+     *   <Pill.Count>30</Pill.Count>
+     * </Pill>
+     * ```
+     */
+    Count: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./PillCount").PillCountProps>;
+    /**
+     * This component renders an `icon`. It not be used with the `default` styling – not `readOnly`
+     * or `removable` variants. By default it renders a `plusIcon` but it can be overridden by
+     * providing an icon to the `icon` prop.
+     *
+     * ```tsx
+     * <Pill onClick={() => console.warn('clicked')}>
+     *   <Pill.Icon />
+     *   <Pill.Label>Regina Skeltor</Pill.Label>
+     * </Pill>
+     * ```
+     */
     Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
         state: {
             id: string;
@@ -36,7 +111,19 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
         };
         events: {};
     }>;
-    Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillAvatar").PillAvatarProps, {
+    /**
+     * This component renders a custom icon button. It is only intended to be used with the
+     * `removable` variant. By default, it renders a `xSmallIcon` but can be overridden by providing
+     * an icon to the `icon` prop.
+     *
+     * ```tsx
+     * <Pill variant="removable">
+     *   Pink Shirts
+     *   <Pill.IconButton onClick={() => console.warn('clicked')} />
+     * </Pill>
+     * ```
+     */
+    IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
         state: {
             id: string;
             maxWidth: string | number;
@@ -44,7 +131,16 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
         };
         events: {};
     }>;
-    Count: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./PillCount").PillCountProps>;
+    /**
+     * This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
+     * There's no need to use this component directly since the overflow is handled for you automatically.
+     *
+     * ```tsx
+     * <Pill variant="readOnly">
+     *   <Pill.Label>Read-only</Pill.Label>
+     * </Pill>
+     * ```
+     */
     Label: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillLabel").PillLabelProps, {
         state: {
             id: string;
@@ -53,13 +149,5 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
         };
         events: {};
     }>;
-    IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
-        state: {
-            id: string;
-            maxWidth: string | number;
-            disabled: boolean;
-        };
-        events: {};
-    }>;
 };
 //# sourceMappingURL=Pill.d.ts.map

package/dist/commonjs/pill/lib/Pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAC,QAAQ,EAA4B,MAAM,kCAAkC,CAAC;AAWrF,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAsID,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Df,CAAC"}
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;AAW5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAsID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;CAyDL,CAAC"}