@workday/canvas-kit-preview-react 7.0.0-alpha.0-next.0 → 7.0.0-alpha.0-next.5

package/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx

@@ -1,5 +1,4 @@
-/** @jsx jsx */
-import {css, jsx} from '@emotion/core';
+import React from 'react';
 import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
 import {relatedActionsIcon} from '@workday/canvas-system-icons-web';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
@@ -36,14 +35,12 @@ export const DropdownButton = createComponent(IconButton)({
     Element
   ) => {
     const hasPlainVariant = variant === 'plain';
-    // gives the plain icon variant a little extra space between the chevron separators
-    const customStyles = css(hasPlainVariant ? {margin: '0 1px'} : {});
 
     return (
       <Element
         ref={ref}
         type="button"
-        css={customStyles}
+        style={hasPlainVariant ? {margin: '0 1px'} : {}}
         variant={variant}
         icon={buttonIcon}
         color={colors.licorice200}

package/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import React from 'react';
-import {css, jsx} from '@emotion/core';
 import {styled} from '@workday/canvas-kit-react/common';
 import {
   borderRadius,
@@ -15,6 +13,7 @@ import {
 import {Breadcrumb} from '../types';
 // local components
 import {DropdownMenuItemLink} from './MenuItemLink';
+import {Box, BoxProps} from '@workday/canvas-kit-labs-react/common';
 
 export interface DropdownMenuProps {
   /**
@@ -51,7 +50,7 @@ export interface DropdownMenuProps {
   toggleActiveItemDown: () => void;
 }
 
-const menuStyles = css({
+const StyledDropdownMenu = styled(Box)<BoxProps>({
   ...type.levels.subtext.large,
   ...depth[2],
   backgroundColor: commonColors.background,
@@ -130,7 +129,7 @@ export const DropdownMenu = ({
   };
 
   return (
-    <div css={menuStyles}>
+    <StyledDropdownMenu>
       <MenuList {...elemProps}>
         {dropdownItems.map((item, i) => {
           const {index, link, text, ...elemProps} = item;
@@ -148,6 +147,6 @@ export const DropdownMenu = ({
           );
         })}
       </MenuList>
-    </div>
+    </StyledDropdownMenu>
   );
 };

package/breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx

@@ -1,25 +1,19 @@
-/** @jsx jsx */
 import React from 'react';
-import {css, jsx} from '@emotion/core';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {chevronLeftSmallIcon, chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
 import {colors} from '@workday/canvas-kit-react/tokens';
 
 import {useRTL} from '../hooks';
+import {Flex} from '@workday/canvas-kit-labs-react/layout';
 
 export type ListItemProps = React.HTMLAttributes<HTMLLIElement>;
 
-const breadcrumbItemStyles = css({
-  display: `flex`,
-  alignItems: `center`,
-});
-
 export const BreadcrumbsListItem = ({children, ...props}: ListItemProps) => {
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
 
   return (
-    <li css={breadcrumbItemStyles} {...props}>
+    <Flex as="li" alignItems="center" {...props}>
       {children}
       <SystemIcon
         icon={icon}
@@ -27,6 +21,6 @@ export const BreadcrumbsListItem = ({children, ...props}: ListItemProps) => {
         colorHover={colors.licorice200}
         aria-hidden
       />
-    </li>
+    </Flex>
   );
 };

package/breadcrumbs/lib/Breadcrumbs/List/index.tsx

@@ -1,26 +1,28 @@
-/** @jsx jsx */
-import React, {forwardRef} from 'react';
-import {css, jsx} from '@emotion/core';
-
-const breadcrumbListStyles = css({
-  alignItems: 'center',
-  boxSizing: 'border-box',
-  display: 'inline-flex',
-  // minHeight set to keep the nav from bouncing when the icon button appears / disappears
-  minHeight: 40,
-  listStyle: 'none',
-  margin: 0,
-  padding: 0,
-});
+import React from 'react';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-labs-react/layout';
 
 export type BreadcrumbsListProps = React.HTMLAttributes<HTMLUListElement>;
 
-export const BreadcrumbsList = forwardRef(
-  ({children, ...props}: BreadcrumbsListProps, ref: React.Ref<HTMLUListElement>) => {
+export const BreadcrumbsList = createComponent('ul')({
+  displayName: 'BreadcrumbsList',
+  Component: ({children, ...elemProps}: BreadcrumbsListProps, ref) => {
     return (
-      <ul css={breadcrumbListStyles} role="list" ref={ref} {...props}>
+      <Flex
+        padding="zero"
+        margin="zero"
+        display="inline-flex"
+        alignItems="center"
+        minHeight={40}
+        listStyle="none"
+        style={{boxSizing: 'border-box'}}
+        as="ul"
+        role="list"
+        ref={ref}
+        {...elemProps}
+      >
         {children}
-      </ul>
+      </Flex>
     );
-  }
-);
+  },
+});

package/breadcrumbs/lib/Breadcrumbs/List/styles.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 
 // default max-width for truncating text
 const DEFAULT_MAX_WIDTH = 350;

package/dist/commonjs/breadcrumbs/index.js

@@ -1,9 +1,17 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumbs = void 0;
 var Breadcrumbs_1 = require("./lib/Breadcrumbs");
-exports.Breadcrumbs = Breadcrumbs_1.Breadcrumbs;
+Object.defineProperty(exports, "Breadcrumbs", { enumerable: true, get: function () { return Breadcrumbs_1.Breadcrumbs; } });
 exports.default = Breadcrumbs_1.Breadcrumbs;
-__export(require("./lib/Breadcrumbs"));
+__exportStar(require("./lib/Breadcrumbs"), exports);

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,0KAiCzB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,0KA+BzB,CAAC"}

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.js

@@ -21,9 +21,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-/** @jsx jsx */
-var core_1 = require("@emotion/core");
+exports.DropdownButton = void 0;
+var react_1 = __importDefault(require("react"));
 var button_1 = require("@workday/canvas-kit-react/button");
 var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
@@ -33,8 +36,6 @@ exports.DropdownButton = common_1.createComponent(button_1.IconButton)({
     Component: function (_a, ref, Element) {
         var _b = _a.buttonIcon, buttonIcon = _b === void 0 ? canvas_system_icons_web_1.relatedActionsIcon : _b, toggled = _a.toggled, _c = _a.variant, variant = _c === void 0 ? 'plain' : _c, elemProps = __rest(_a, ["buttonIcon", "toggled", "variant"]);
         var hasPlainVariant = variant === 'plain';
-        // gives the plain icon variant a little extra space between the chevron separators
-        var customStyles = core_1.css(hasPlainVariant ? { margin: '0 1px' } : {});
-        return (core_1.jsx(Element, __assign({ ref: ref, type: "button", css: customStyles, variant: variant, icon: buttonIcon, color: tokens_1.colors.licorice200, toggled: toggled, "aria-pressed": undefined, "aria-expanded": toggled, "aria-haspopup": true, "aria-controls": "menu" }, elemProps)));
+        return (react_1.default.createElement(Element, __assign({ ref: ref, type: "button", style: hasPlainVariant ? { margin: '0 1px' } : {}, variant: variant, icon: buttonIcon, color: tokens_1.colors.licorice200, toggled: toggled, "aria-pressed": undefined, "aria-expanded": toggled, "aria-haspopup": true, "aria-controls": "menu" }, elemProps)));
     },
 });

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import React from 'react';
 import { Breadcrumb } from '../types';
 export interface DropdownMenuProps {

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAIpC,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,kBAAkB,EAAE,UAAU,CAAC;IAC/B;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,EAAE,UAAU,EAAE,CAAC;IAC5B;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;IACxE;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC1D;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B;;OAEG;IACH,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAgCD,eAAO,MAAM,YAAY,6LAqExB,CAAC"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAKpC,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,kBAAkB,EAAE,UAAU,CAAC;IAC/B;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,EAAE,UAAU,EAAE,CAAC;IAC5B;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;IACxE;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC1D;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B;;OAEG;IACH,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAgCD,eAAO,MAAM,YAAY,4JAStB,iBAAiB,gBA4DnB,CAAC"}

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.js

@@ -21,13 +21,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("@emotion/core");
+exports.DropdownMenu = void 0;
+var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 // local components
 var MenuItemLink_1 = require("./MenuItemLink");
-var menuStyles = core_1.css(__assign(__assign(__assign({}, tokens_1.type.levels.subtext.large), tokens_1.depth[2]), { backgroundColor: tokens_1.commonColors.background, border: "1px solid " + tokens_1.colors.soap500, borderRadius: tokens_1.borderRadius.m, boxSizing: 'border-box', display: 'inline-block', marginTop: tokens_1.space.xxxs, maxHeight: 200, outline: 'none', overflowY: 'auto', position: 'relative', width: 'max-content' }));
+var common_2 = require("@workday/canvas-kit-labs-react/common");
+var StyledDropdownMenu = common_1.styled(common_2.Box)(__assign(__assign(__assign({}, tokens_1.type.levels.subtext.large), tokens_1.depth[2]), { backgroundColor: tokens_1.commonColors.background, border: "1px solid " + tokens_1.colors.soap500, borderRadius: tokens_1.borderRadius.m, boxSizing: 'border-box', display: 'inline-block', marginTop: tokens_1.space.xxxs, maxHeight: 200, outline: 'none', overflowY: 'auto', position: 'relative', width: 'max-content' }));
 var StyledMenuList = common_1.styled('ul')({
     boxSizing: 'border-box',
     listStyle: 'none',
@@ -38,9 +43,9 @@ var StyledMenuList = common_1.styled('ul')({
     wordWrap: 'break-word',
 });
 var MenuList = function (elemProps) {
-    return core_1.jsx(StyledMenuList, __assign({ role: "menu" }, elemProps));
+    return react_1.default.createElement(StyledMenuList, __assign({ role: "menu" }, elemProps));
 };
-exports.DropdownMenu = function (_a) {
+var DropdownMenu = function (_a) {
     var activeDropdownItemRef = _a.activeDropdownItemRef, activeDropdownItem = _a.activeDropdownItem, _b = _a.dropdownItems, dropdownItems = _b === void 0 ? [] : _b, resetFocus = _a.resetFocus, setActiveDropdownItem = _a.setActiveDropdownItem, toggleActiveItemDown = _a.toggleActiveItemDown, toggleActiveItemUp = _a.toggleActiveItemUp, elemProps = __rest(_a, ["activeDropdownItemRef", "activeDropdownItem", "dropdownItems", "resetFocus", "setActiveDropdownItem", "toggleActiveItemDown", "toggleActiveItemUp"]);
     var handleItemKeyUp = function (event) {
         switch (event.key) {
@@ -78,11 +83,12 @@ exports.DropdownMenu = function (_a) {
                 break;
         }
     };
-    return (core_1.jsx("div", { css: menuStyles },
-        core_1.jsx(MenuList, __assign({}, elemProps), dropdownItems.map(function (item, i) {
+    return (react_1.default.createElement(StyledDropdownMenu, null,
+        react_1.default.createElement(MenuList, __assign({}, elemProps), dropdownItems.map(function (item, i) {
             var index = item.index, link = item.link, text = item.text, elemProps = __rest(item, ["index", "link", "text"]);
             var isFocused = index === activeDropdownItem.index;
-            return (core_1.jsx("li", { onKeyUp: handleItemKeyUp, onKeyDown: function (e) { return handleItemKeyDown(e, item); }, key: i },
-                core_1.jsx(MenuItemLink_1.DropdownMenuItemLink, __assign({ ref: isFocused ? activeDropdownItemRef : null, href: link }, elemProps), text)));
+            return (react_1.default.createElement("li", { onKeyUp: handleItemKeyUp, onKeyDown: function (e) { return handleItemKeyDown(e, item); }, key: i },
+                react_1.default.createElement(MenuItemLink_1.DropdownMenuItemLink, __assign({ ref: isFocused ? activeDropdownItemRef : null, href: link }, elemProps), text)));
         }))));
 };
+exports.DropdownMenu = DropdownMenu;

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/MenuItemLink.js

@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
     };
     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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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)
@@ -21,14 +40,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenuItemLink = void 0;
 var react_1 = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@emotion/core" />
 import { usePopupPopper } from '@workday/canvas-kit-react/popup';
 import { DropdownButtonProps } from './Button';
 import { DropdownMenuProps } from './Menu';
@@ -9,6 +8,6 @@ interface UseDropdown {
     dropdownMenuProps: DropdownMenuProps;
     popperProps: ReturnType<typeof usePopupPopper>;
 }
-export declare const useDropdown: (activeDropdownItemRef: import("react").RefObject<HTMLAnchorElement>, items: Breadcrumb[], buttonId?: string | undefined) => UseDropdown;
+export declare const useDropdown: (activeDropdownItemRef: React.RefObject<HTMLAnchorElement>, items: Breadcrumb[], buttonId?: string | undefined) => UseDropdown;
 export {};
 //# sourceMappingURL=hooks.d.ts.map

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.ts"],"names":[],"mappings":";AAEA,OAAO,EAML,cAAc,EACf,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAC,mBAAmB,EAAC,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAC,iBAAiB,EAAC,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAEpC,eAAO,MAAM,yBAAyB,sFAQrC,CAAC;AASF,UAAU,WAAW;IACnB,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC,CAAC;IAC7D,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,WAAW,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,WAAW,0IAsEvB,CAAC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.ts"],"names":[],"mappings":"AAEA,OAAO,EAML,cAAc,EACf,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAC,mBAAmB,EAAC,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAC,iBAAiB,EAAC,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAEpC,eAAO,MAAM,yBAAyB,sFAQrC,CAAC;AASF,UAAU,WAAW;IACnB,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC,CAAC;IAC7D,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,WAAW,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,WAAW,0BACC,MAAM,SAAS,CAAC,iBAAiB,CAAC,SAClD,UAAU,EAAE,oCAElB,WAkEF,CAAC"}

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.js

@@ -1,22 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDropdown = exports.useFocusActiveItemElement = void 0;
 var react_1 = require("react");
 var common_1 = require("@workday/canvas-kit-react/common");
 var popup_1 = require("@workday/canvas-kit-react/popup");
-exports.useFocusActiveItemElement = function (activeDropdownItemRef) {
+var useFocusActiveItemElement = function (activeDropdownItemRef) {
     react_1.useLayoutEffect(function () {
         if (activeDropdownItemRef.current) {
             return activeDropdownItemRef.current.focus();
         }
     });
 };
+exports.useFocusActiveItemElement = useFocusActiveItemElement;
 var initialActiveItem = {
     index: 0,
     link: '',
     text: '',
     width: 0,
 };
-exports.useDropdown = function (activeDropdownItemRef, items, buttonId) {
+var useDropdown = function (activeDropdownItemRef, items, buttonId) {
     // state
     var _a = react_1.useState(initialActiveItem), activeDropdownItem = _a[0], setActiveDropdownItem = _a[1];
     // behaviors
@@ -72,3 +74,4 @@ exports.useDropdown = function (activeDropdownItemRef, items, buttonId) {
     var popperProps = popup_1.usePopupPopper(model);
     return { dropdownButtonProps: dropdownButtonProps, dropdownMenuProps: dropdownMenuProps, popperProps: popperProps };
 };
+exports.useDropdown = useDropdown;

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAKpC,OAAO,EAAiB,mBAAmB,EAAC,MAAM,UAAU,CAAC;AAG7D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC;IAC5E,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,wEAuBpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAKpC,OAAO,EAAiB,mBAAmB,EAAC,MAAM,UAAU,CAAC;AAG7D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC;IAC5E,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,2CAA+C,aAAa,gBAuBhF,CAAC"}

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/index.js

@@ -14,13 +14,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
 var react_1 = __importDefault(require("react"));
 var popup_1 = require("@workday/canvas-kit-react/popup");
 var hooks_1 = require("../hooks");
 var hooks_2 = require("./hooks");
 var Button_1 = require("./Button");
 var Menu_1 = require("./Menu");
-exports.Dropdown = function (_a) {
+var Dropdown = function (_a) {
     var buttonAriaLabel = _a.buttonAriaLabel, buttonIcon = _a.buttonIcon, _b = _a.items, items = _b === void 0 ? [] : _b;
     // refs
     var activeDropdownItemRef = react_1.default.useRef(null);
@@ -33,3 +34,4 @@ exports.Dropdown = function (_a) {
         react_1.default.createElement(popup_1.Popper, __assign({ placement: placement }, popperProps),
             react_1.default.createElement(Menu_1.DropdownMenu, __assign({}, dropdownMenuProps)))));
 };
+exports.Dropdown = Dropdown;

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/Collapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAO9C,OAAO,EAAC,mBAAmB,EAAC,MAAM,oBAAoB,CAAC;AASvD,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAC5C,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC;IACzC;;;;OAIG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,sGAkC3B,CAAC"}
+{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAO9C,OAAO,EAAC,mBAAmB,EAAC,MAAM,oBAAoB,CAAC;AASvD,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAC5C,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC;IACzC;;;;OAIG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,kEAMzB,oBAAoB,gBA4BtB,CAAC"}

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/Collapsible.js

@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
     };
     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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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)
@@ -21,14 +40,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleList = void 0;
 var react_1 = __importStar(require("react"));
 // local components
 var Dropdown_1 = require("../Dropdown");
@@ -42,7 +55,7 @@ var parseListItems = function (children) {
     var collapsibleItems = childArray.slice(1, -1);
     return { rootItem: rootItem, collapsibleItems: collapsibleItems, currentItem: currentItem };
 };
-exports.CollapsibleList = function (_a) {
+var CollapsibleList = function (_a) {
     var children = _a.children, buttonIcon = _a.buttonIcon, buttonAriaLabel = _a.buttonAriaLabel, maxWidth = _a.maxWidth, props = __rest(_a, ["children", "buttonIcon", "buttonAriaLabel", "maxWidth"]);
     // refs
     var listRef = react_1.useRef(null);
@@ -62,3 +75,4 @@ exports.CollapsibleList = function (_a) {
         }),
         currentItem));
 };
+exports.CollapsibleList = CollapsibleList;

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CurrentItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/CurrentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC3E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAgBD,eAAO,MAAM,WAAW,yEA8BvB,CAAC"}
+{"version":3,"file":"CurrentItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/CurrentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC3E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAgBD,eAAO,MAAM,WAAW,yCAAwC,gBAAgB,gBA8B/E,CAAC"}

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.js

@@ -25,6 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrentItem = void 0;
 var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
@@ -36,7 +37,7 @@ var ListItem = common_1.styled('li')(__assign({ display: 'flex', alignItems: 'ce
     var maxWidth = _a.maxWidth;
     return (__assign({}, styles_1.truncateStyles(maxWidth)));
 });
-exports.CurrentItem = function (_a) {
+var CurrentItem = function (_a) {
     var children = _a.children, maxWidth = _a.maxWidth, elemProps = __rest(_a, ["children", "maxWidth"]);
     var ref = react_1.default.useRef(null);
     var _b = hooks_1.useTruncateTooltip(ref), isTooltipOpen = _b.isTooltipOpen, openTooltip = _b.openTooltip, closeTooltip = _b.closeTooltip, shouldShowTooltip = _b.shouldShowTooltip, tooltipProps = _b.tooltipProps;
@@ -45,3 +46,4 @@ exports.CurrentItem = function (_a) {
         react_1.default.createElement(popup_1.Popper, { open: isTooltipOpen, anchorElement: ref, placement: "top" },
             react_1.default.createElement(tooltip_1.TooltipContainer, __assign({}, tooltipProps), children))));
 };
+exports.CurrentItem = CurrentItem;

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACxF;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAeD,eAAO,MAAM,cAAc,iGA+C1B,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACxF;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAeD,eAAO,MAAM,cAAc,8DAOxB,mBAAmB,gBAwCrB,CAAC"}

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/Link.js

@@ -25,6 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.BreadcrumbLink = void 0;
 var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var button_1 = require("@workday/canvas-kit-react/button");
@@ -38,7 +39,7 @@ var StyledLink = common_1.styled(button_1.Hyperlink)(__assign({}, subtextLargeSt
     var maxWidth = _a.maxWidth;
     return (__assign({}, styles_1.truncateStyles(maxWidth)));
 });
-exports.BreadcrumbLink = function (_a) {
+var BreadcrumbLink = function (_a) {
     var maxWidth = _a.maxWidth, onAction = _a.onAction, onClick = _a.onClick, href = _a.href, children = _a.children, props = __rest(_a, ["maxWidth", "onAction", "onClick", "href", "children"]);
     var ref = react_1.default.useRef(null);
     var _b = hooks_1.useTruncateTooltip(ref), isTooltipOpen = _b.isTooltipOpen, openTooltip = _b.openTooltip, closeTooltip = _b.closeTooltip, tooltipProps = _b.tooltipProps;
@@ -62,3 +63,4 @@ exports.BreadcrumbLink = function (_a) {
         react_1.default.createElement(popup_1.Popper, { open: isTooltipOpen, anchorElement: ref, placement: "top" },
             react_1.default.createElement(tooltip_1.TooltipContainer, __assign({}, tooltipProps), children))));
 };
+exports.BreadcrumbLink = BreadcrumbLink;

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import React from 'react';
 export declare type ListItemProps = React.HTMLAttributes<HTMLLIElement>;
 export declare const BreadcrumbsListItem: ({ children, ...props }: ListItemProps) => JSX.Element;

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAOhE,eAAO,MAAM,mBAAmB,wDAe/B,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAEhE,eAAO,MAAM,mBAAmB,wDAe/B,CAAC"}

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.js

@@ -21,21 +21,23 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("@emotion/core");
+exports.BreadcrumbsListItem = void 0;
+var react_1 = __importDefault(require("react"));
 var icon_1 = require("@workday/canvas-kit-react/icon");
 var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var hooks_1 = require("../hooks");
-var breadcrumbItemStyles = core_1.css({
-    display: "flex",
-    alignItems: "center",
-});
-exports.BreadcrumbsListItem = function (_a) {
+var layout_1 = require("@workday/canvas-kit-labs-react/layout");
+var BreadcrumbsListItem = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     var shouldUseRTL = hooks_1.useRTL().shouldUseRTL;
     var icon = shouldUseRTL ? canvas_system_icons_web_1.chevronLeftSmallIcon : canvas_system_icons_web_1.chevronRightSmallIcon;
-    return (core_1.jsx("li", __assign({ css: breadcrumbItemStyles }, props),
+    return (react_1.default.createElement(layout_1.Flex, __assign({ as: "li", alignItems: "center" }, props),
         children,
-        core_1.jsx(icon_1.SystemIcon, { icon: icon, color: tokens_1.colors.licorice200, colorHover: tokens_1.colors.licorice200, "aria-hidden": true })));
+        react_1.default.createElement(icon_1.SystemIcon, { icon: icon, color: tokens_1.colors.licorice200, colorHover: tokens_1.colors.licorice200, "aria-hidden": true })));
 };
+exports.BreadcrumbsListItem = BreadcrumbsListItem;

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/hooks.d.ts

@@ -9,7 +9,7 @@ export declare const useBuildCollapsedList: <E extends HTMLElement>(listEl: Reac
 };
 export declare const useTruncateTooltip: (ref?: React.RefObject<HTMLSpanElement> | undefined) => {
     isTooltipOpen: boolean;
-    openTooltip: (event: React.MouseEvent<Element, MouseEvent> | React.FocusEvent<Element, Element>) => void;
+    openTooltip: (event: React.MouseEvent | React.FocusEvent) => void;
     closeTooltip: () => void;
     shouldShowTooltip: boolean;
     tooltipProps: {

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAEpC,eAAO,MAAM,WAAW;;CASvB,CAAC;AA2BF,eAAO,MAAM,qBAAqB;;;CAsCjC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;CAgC9B,CAAC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAEpC,eAAO,MAAM,WAAW;;CASvB,CAAC;AA2BF,eAAO,MAAM,qBAAqB,gEAEtB,MAAM,SAAS,YACf,MAAM;;;CAmCjB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;yBASD,gBAAgB,GAAG,gBAAgB;;;;;;CAuBhE,CAAC"}