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

package/combobox/README.md

@@ -24,7 +24,7 @@ See here for
 
 ```tsx
 import {Combobox} from '@workday/canvas-kit-labs-react/combobox';
-import {MenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {DeprecatedMenuItem} from '@workday/canvas-kit-preview-react/menu';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 
@@ -32,7 +32,7 @@ const autocompleteCallback = event => console.log('Adjust menu items here')
 
 <FormField id='id-123' label='Example'>
   <Combobox
-    autocompleteItems={[<MenuItem>Item 1</MenuItem>]}
+    autocompleteItems={[<DeprecatedMenuItem>Item 1</DeprecatedMenuItem>]}
     onChange={autocompleteCallback}
     onFocus={() => { console.log('focus') }}
     onBlur={() => { console.log('blur') }}
@@ -84,9 +84,9 @@ Default: `'Reset Search Input'`
 
 ---
 
-#### `autocompleteItems: React.ReactElement<MenuItemProps>[] | ComboBoxMenuItemGroup[]`
+#### `autocompleteItems: React.ReactElement<DeprecatedMenuItemProps>[] | ComboBoxMenuItemGroup[]`
 
-> An array of MenuItems to show under the input. You can also optional group the results.
+> An array of DeprecatedMenuItems to show under the input. You can also optional group the results.
 
 ---
 

package/combobox/index.ts

@@ -1,5 +1 @@
-import Combobox from './lib/Combobox';
-
-export default Combobox;
-export {Combobox};
 export * from './lib/Combobox';

package/combobox/lib/AutocompleteList.tsx

@@ -2,7 +2,6 @@ import React, {Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 import {space} from '@workday/canvas-kit-react/tokens';
 import {accessibleHide, generateUniqueId} from '@workday/canvas-kit-react/common';
-import {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
 import {ComboBoxMenuItemGroup, getOptionId, listBoxIdPart, getTextFromElement} from './Combobox';
 
 const Autocomplete = styled('ul')({
@@ -19,7 +18,7 @@ interface AutocompleteListProps {
   /**
    * The autocomplete items of the Combobox. This array of menu items is shown under the text input.
    */
-  autocompleteItems: React.ReactElement<MenuItemProps>[] | ComboBoxMenuItemGroup[];
+  autocompleteItems: React.ReactElement<any>[] | ComboBoxMenuItemGroup[];
   /**
    * Index of the active autocomplete item
    */
@@ -29,7 +28,7 @@ interface AutocompleteListProps {
    */
   handleAutocompleteClick: (
     event: React.SyntheticEvent<Element, Event>,
-    menuItemProps: MenuItemProps
+    menuItemProps: any
   ) => void;
   /**
    * The id of the form field.
@@ -46,7 +45,7 @@ interface AutocompleteListProps {
   showGroupText: boolean;
 }
 
-const AutocompleteList = ({
+export const AutocompleteList = ({
   autocompleteItems,
   comboboxId,
   selectedIndex,
@@ -65,7 +64,7 @@ const AutocompleteList = ({
   };
 
   const createListItem = (
-    listboxItem: React.ReactElement<MenuItemProps>,
+    listboxItem: React.ReactElement<any>,
     itemIndex: number,
     groupMessage?: string
   ) => {
@@ -127,7 +126,7 @@ const AutocompleteList = ({
     return (
       <Autocomplete {...listBoxProps}>
         {(autocompleteItems as React.ReactElement<
-          MenuItemProps
+          any
         >[]).map((listboxItem: React.ReactElement, index: number) =>
           createListItem(listboxItem, index)
         )}
@@ -135,5 +134,3 @@ const AutocompleteList = ({
     );
   }
 };
-
-export default AutocompleteList;

package/combobox/lib/Combobox.tsx

@@ -8,20 +8,19 @@ import {
   useUniqueId,
 } from '@workday/canvas-kit-react/common';
 import {space, commonColors, borderRadius} from '@workday/canvas-kit-react/tokens';
-import {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
 import {Card} from '@workday/canvas-kit-react/card';
 import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 import {xSmallIcon} from '@workday/canvas-system-icons-web';
 import {TextInputProps} from '@workday/canvas-kit-react/text-input';
 import flatten from 'lodash.flatten';
-import AutocompleteList from './AutocompleteList';
-import Status from './Status';
+import {AutocompleteList} from './AutocompleteList';
+import {Status} from './Status';
 
 export interface ComboBoxMenuItemGroup {
   // A non intractable header that logically separates autocomplete items
-  header: React.ReactElement<MenuItemProps>;
+  header: React.ReactElement<any>;
   // A group of logically distinct autocomplete items
-  items: React.ReactElement<MenuItemProps>[];
+  items: React.ReactElement<any>[];
 }
 
 export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTMLElement> {
@@ -50,7 +49,7 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
   /**
    * The autocomplete items of the Combobox. This array of menu items is shown under the text input.
    */
-  autocompleteItems?: React.ReactElement<MenuItemProps>[] | ComboBoxMenuItemGroup[];
+  autocompleteItems?: React.ReactElement<any>[] | ComboBoxMenuItemGroup[];
   /**
    * The function called when the Combobox text input changes.
    */
@@ -138,7 +137,7 @@ export const getOptionId = (baseId?: string, index?: number) =>
 export const getTextFromElement = (children?: React.ReactNode) => {
   let text = '';
   React.Children.map(children, child => {
-    if (child == null || typeof child === 'boolean' || child === {}) {
+    if (child == null || typeof child === 'boolean') {
       text += '';
     } else if (typeof child === 'string' || typeof child === 'number') {
       text += child.toString();
@@ -161,7 +160,7 @@ const isValidSingleChild = (child: React.ReactNode) => {
   return React.isValidElement(child) && React.Children.only(child);
 };
 
-const Combobox = ({
+export const Combobox = ({
   autocompleteItems,
   children,
   grow,
@@ -182,7 +181,7 @@ const Combobox = ({
   const [showingAutocomplete, setShowingAutocomplete] = useState(false);
   const [selectedAutocompleteIndex, setSelectedAutocompleteIndex] = useState<number | null>(null);
   const [interactiveAutocompleteItems, setInteractiveAutocompleteItems] = useState<
-    React.ReactElement<MenuItemProps>[]
+    React.ReactElement<any>[]
   >([]);
   const [announcementText, setAnnouncementText] = useState('');
 
@@ -263,7 +262,7 @@ const Combobox = ({
   }, [initialValue, setInputValue]);
 
   useEffect(() => {
-    const getInteractiveAutocompleteItems = (): React.ReactElement<MenuItemProps>[] => {
+    const getInteractiveAutocompleteItems = (): React.ReactElement<any>[] => {
       if (
         autocompleteItems &&
         autocompleteItems.length &&
@@ -271,14 +270,14 @@ const Combobox = ({
       ) {
         return flatten((autocompleteItems as ComboBoxMenuItemGroup[]).map(group => group.items));
       }
-      return (autocompleteItems as React.ReactElement<MenuItemProps>[]) || [];
+      return (autocompleteItems as React.ReactElement<any>[]) || [];
     };
     setInteractiveAutocompleteItems(getInteractiveAutocompleteItems());
   }, [autocompleteItems]);
 
   const handleAutocompleteClick = (
     event: React.SyntheticEvent<Element, Event>,
-    menuItemProps: MenuItemProps
+    menuItemProps: any
   ): void => {
     if (menuItemProps.isDisabled) {
       return;
@@ -313,11 +312,8 @@ const Combobox = ({
 
   const handleBlur = (event: React.FocusEvent) => {
     if (comboboxRef.current) {
-      let target: EventTarget | null = event.relatedTarget;
-      if (target === null) {
-        // IE11 swaps related and active target before it fires the blur event
-        target = document.activeElement;
-      }
+      const target: EventTarget | null = event.relatedTarget;
+
       if (target && comboboxRef.current.contains(target as Element)) {
         return;
       }
@@ -415,7 +411,7 @@ const Combobox = ({
   };
 
   const renderChildren = (inputElement: React.ReactElement<TextInputProps>): React.ReactNode => {
-    let cssOverride: CSSObject = {zIndex: 2};
+    let cssOverride: CSSObject = {':focus': {zIndex: 2}};
     if (showClearButton) {
       const paddingDirection = isRTL ? 'paddingLeft' : 'paddingRight';
       cssOverride = {
@@ -491,5 +487,3 @@ const Combobox = ({
     </Container>
   );
 };
-
-export default Combobox;

package/combobox/lib/Status.tsx

@@ -13,7 +13,7 @@ export interface StatusProps {
 
 const Container = styled('div')(accessibleHide);
 
-const Status = ({
+export const Status = ({
   ariaLive = 'polite',
   role = 'status',
   ariaRelevant = 'additions',
@@ -44,5 +44,3 @@ const Status = ({
     </Container>
   );
 };
-
-export default Status;

package/combobox/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/combobox",
   "module": "../dist/es6/combobox",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/combobox"
 }

package/common/index.ts

@@ -1,3 +1 @@
 export * from './lib/theming';
-export {ComponentStatesTable} from './lib/storybook-utils/ComponentStatesTable';
-export {permutateProps} from './lib/storybook-utils/permutateProps';

package/common/lib/theming/index.ts

@@ -1,2 +1 @@
 export * from './useThemeRTL';
-export * from './useThemedRing';

package/common/lib/theming/useThemeRTL.ts

@@ -1,25 +1,26 @@
-import {
-  convertToStaticStates,
-  CanvasTheme,
-  useIsRTL,
-  useTheme,
-} from '@workday/canvas-kit-react/common';
+import {CanvasTheme, useIsRTL, useTheme, StyleRewriteFn} from '@workday/canvas-kit-react/common';
 import {CSSProperties} from '@workday/canvas-kit-react/tokens';
 import {useMemo} from 'react';
 import rtlCSSJS from 'rtl-css-js';
 
 export type ComponentStyles = Record<string, CSSProperties>;
-type ThemeWithStaticStates = CanvasTheme & {_staticStates?: boolean};
+type ThemeWithStaticStates = CanvasTheme & {_styleRewriteFn?: StyleRewriteFn};
 
 const getDirectionalStyles = (isRTL: boolean, ...styles: CSSProperties[]) => {
   return isRTL ? rtlCSSJS(styles) : styles;
 };
 
-const getConvertedStyles = (shouldConvert: boolean, styles: CSSProperties): CSSProperties => {
-  return shouldConvert ? convertToStaticStates(styles) ?? styles : styles;
+const getConvertedStyles = (
+  styles: CSSProperties,
+  convertFunc?: StyleRewriteFn
+): CSSProperties | undefined => {
+  return convertFunc ? convertFunc(styles) : styles;
 };
 
 /**
+ * @deprecated Now that IE11 is no longer supported, we encourage consumers to use [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
+ *
+ *
  * A helpful hook for supporting bidirectional styles.
  * * Read below for more detail or [view the docs](https://github.com/Workday/canvas-kit/blob/master/modules/labs-react/common/README.md#useThemeRTL).
  *
@@ -51,19 +52,19 @@ const getConvertedStyles = (shouldConvert: boolean, styles: CSSProperties): CSSP
 export function useThemeRTL() {
   const theme = useTheme();
   const direction = useIsRTL(theme);
-  const shouldConvert = (theme.canvas as ThemeWithStaticStates)._staticStates ?? false;
+  const convertFunc = (theme.canvas as ThemeWithStaticStates)._styleRewriteFn;
 
   const themeRTL = useMemo(() => {
     return (...cssObject: CSSProperties[]) => {
       const styles = getDirectionalStyles(direction, ...cssObject);
       return styles.reduce((first, second) => {
-        const convertedFirst = shouldConvert ? getConvertedStyles(shouldConvert, first) : first;
-        const convertedSecond = shouldConvert ? getConvertedStyles(shouldConvert, second) : second;
+        const convertedFirst = getConvertedStyles(first, convertFunc);
+        const convertedSecond = getConvertedStyles(second, convertFunc);
 
         return {...convertedFirst, ...convertedSecond};
       }, {});
     };
-  }, [direction, shouldConvert]);
+  }, [direction, convertFunc]);
 
   return {themeRTL, theme};
 }

package/common/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/common",
   "module": "../dist/es6/common",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/common"
 }

package/dist/commonjs/combobox/index.d.ts

@@ -1,5 +1,2 @@
-import Combobox from './lib/Combobox';
-export default Combobox;
-export { Combobox };
 export * from './lib/Combobox';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/combobox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAC,QAAQ,EAAC,CAAC;AAClB,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../combobox/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/commonjs/combobox/index.js

@@ -9,12 +9,5 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 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);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Combobox = void 0;
-var Combobox_1 = __importDefault(require("./lib/Combobox"));
-exports.Combobox = Combobox_1.default;
-exports.default = Combobox_1.default;
 __exportStar(require("./lib/Combobox"), exports);

package/dist/commonjs/combobox/lib/AutocompleteList.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
 import { ComboBoxMenuItemGroup } from './Combobox';
 interface AutocompleteListProps {
     /**
      * The autocomplete items of the Combobox. This array of menu items is shown under the text input.
      */
-    autocompleteItems: React.ReactElement<MenuItemProps>[] | ComboBoxMenuItemGroup[];
+    autocompleteItems: React.ReactElement<any>[] | ComboBoxMenuItemGroup[];
     /**
      * Index of the active autocomplete item
      */
@@ -13,7 +12,7 @@ interface AutocompleteListProps {
     /**
      * The function called when an autocomplete item is selected
      */
-    handleAutocompleteClick: (event: React.SyntheticEvent<Element, Event>, menuItemProps: MenuItemProps) => void;
+    handleAutocompleteClick: (event: React.SyntheticEvent<Element, Event>, menuItemProps: any) => void;
     /**
      * The id of the form field.
      */
@@ -27,6 +26,6 @@ interface AutocompleteListProps {
      */
     showGroupText: boolean;
 }
-declare const AutocompleteList: ({ autocompleteItems, comboboxId, selectedIndex, handleAutocompleteClick, labelId, showGroupText, }: AutocompleteListProps) => JSX.Element | null;
-export default AutocompleteList;
+export declare const AutocompleteList: ({ autocompleteItems, comboboxId, selectedIndex, handleAutocompleteClick, labelId, showGroupText, }: AutocompleteListProps) => JSX.Element | null;
+export {};
 //# sourceMappingURL=AutocompleteList.d.ts.map

package/dist/commonjs/combobox/lib/AutocompleteList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAYjG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACjF;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,aAAa,KACzB,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,uGAOnB,qBAAqB,uBAiFvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAYjG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACvE;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,GAAG,KACf,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,uGAO1B,qBAAqB,uBAiFvB,CAAC"}

package/dist/commonjs/combobox/lib/AutocompleteList.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,54 +18,48 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("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 Combobox_1 = require("./Combobox");
-var Autocomplete = styled_1.default('ul')({
+exports.AutocompleteList = void 0;
+const react_1 = __importStar(require("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 Combobox_1 = require("./Combobox");
+const Autocomplete = styled_1.default('ul')({
     margin: 0,
     maxHeight: 200,
     boxSizing: 'border-box',
     overflowY: 'auto',
-    padding: tokens_1.space.xxs + " 0",
+    padding: `${tokens_1.space.xxs} 0`,
 });
-var AccessibleHide = styled_1.default('span')(common_1.accessibleHide);
-var AutocompleteList = function (_a) {
-    var autocompleteItems = _a.autocompleteItems, comboboxId = _a.comboboxId, selectedIndex = _a.selectedIndex, handleAutocompleteClick = _a.handleAutocompleteClick, labelId = _a.labelId, showGroupText = _a.showGroupText;
-    var randomComponentId = react_1.useState(common_1.generateUniqueId)[0]; // https://codesandbox.io/s/p2ndq
-    var componentId = comboboxId || randomComponentId;
-    var listBoxProps = {
+const AccessibleHide = styled_1.default('span')(common_1.accessibleHide);
+const AutocompleteList = ({ autocompleteItems, comboboxId, selectedIndex, handleAutocompleteClick, labelId, showGroupText, }) => {
+    const [randomComponentId] = react_1.useState(common_1.generateUniqueId); // https://codesandbox.io/s/p2ndq
+    const componentId = comboboxId || randomComponentId;
+    const listBoxProps = {
         role: 'listbox',
-        id: componentId + "-" + Combobox_1.listBoxIdPart,
+        id: `${componentId}-${Combobox_1.listBoxIdPart}`,
         'aria-labelledby': labelId,
     };
-    var createListItem = function (listboxItem, itemIndex, groupMessage) {
-        var children = __spreadArrays([
-            react_1.default.createElement(AccessibleHide, { key: "group-message-" + itemIndex }, groupMessage)
-        ], react_1.default.Children.toArray(listboxItem.props.children));
+    const createListItem = (listboxItem, itemIndex, groupMessage) => {
+        const children = [
+            react_1.default.createElement(AccessibleHide, { key: `group-message-${itemIndex}` }, groupMessage),
+            ...react_1.default.Children.toArray(listboxItem.props.children),
+        ];
         return (react_1.default.createElement(react_1.Fragment, { key: itemIndex }, react_1.default.cloneElement(listboxItem, {
             children: children,
             id: Combobox_1.getOptionId(componentId, itemIndex),
             role: 'option',
             isFocused: selectedIndex === itemIndex,
             'aria-selected': selectedIndex === itemIndex ? true : undefined,
-            onMouseDown: function (event) {
+            onMouseDown: (event) => {
                 // prevent focus from shifting away from the the combobox
                 event.preventDefault();
             },
-            onClick: function (event) {
+            onClick: (event) => {
                 event.preventDefault();
                 handleAutocompleteClick(event, listboxItem.props);
             },
@@ -86,30 +69,27 @@ var AutocompleteList = function (_a) {
         return null;
     }
     else if (autocompleteItems[0].hasOwnProperty('header')) {
-        var itemIndex_1 = 0;
-        return (react_1.default.createElement(Autocomplete, __assign({}, listBoxProps), autocompleteItems.map(function (_a, groupIndex) {
-            var header = _a.header, items = _a.items;
-            var groupLabel = "itemGroup-" + componentId + "-" + groupIndex;
+        let itemIndex = 0;
+        return (react_1.default.createElement(Autocomplete, Object.assign({}, listBoxProps), autocompleteItems.map(({ header, items }, groupIndex) => {
+            const groupLabel = `itemGroup-${componentId}-${groupIndex}`;
             return (react_1.default.createElement(react_1.Fragment, { key: groupLabel },
                 react_1.default.cloneElement(header, {
                     role: 'presentation',
-                    style: { pointerEvents: "none" },
+                    style: { pointerEvents: `none` },
                 }),
-                items.map(function (listboxItem) {
-                    var headerName = Combobox_1.getTextFromElement(header);
-                    var groupMessage = showGroupText
-                        ? "Entering group " + headerName + ", with " + items.length + " options."
+                items.map((listboxItem) => {
+                    const headerName = Combobox_1.getTextFromElement(header);
+                    const groupMessage = showGroupText
+                        ? `Entering group ${headerName}, with ${items.length} options.`
                         : undefined;
-                    var item = createListItem(listboxItem, itemIndex_1, groupMessage);
-                    itemIndex_1++;
+                    const item = createListItem(listboxItem, itemIndex, groupMessage);
+                    itemIndex++;
                     return item;
                 })));
         })));
     }
     else {
-        return (react_1.default.createElement(Autocomplete, __assign({}, listBoxProps), autocompleteItems.map(function (listboxItem, index) {
-            return createListItem(listboxItem, index);
-        })));
+        return (react_1.default.createElement(Autocomplete, Object.assign({}, listBoxProps), autocompleteItems.map((listboxItem, index) => createListItem(listboxItem, index))));
     }
 };
-exports.default = AutocompleteList;
+exports.AutocompleteList = AutocompleteList;

package/dist/commonjs/combobox/lib/Combobox.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
-import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
 import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 import { TextInputProps } from '@workday/canvas-kit-react/text-input';
 export interface ComboBoxMenuItemGroup {
-    header: React.ReactElement<MenuItemProps>;
-    items: React.ReactElement<MenuItemProps>[];
+    header: React.ReactElement<any>;
+    items: React.ReactElement<any>[];
 }
 export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTMLElement> {
     /**
@@ -33,7 +32,7 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
     /**
      * The autocomplete items of the Combobox. This array of menu items is shown under the text input.
      */
-    autocompleteItems?: React.ReactElement<MenuItemProps>[] | ComboBoxMenuItemGroup[];
+    autocompleteItems?: React.ReactElement<any>[] | ComboBoxMenuItemGroup[];
     /**
      * The function called when the Combobox text input changes.
      */
@@ -58,6 +57,5 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
 export declare const listBoxIdPart = "listbox";
 export declare const getOptionId: (baseId?: string | undefined, index?: number | undefined) => string;
 export declare const getTextFromElement: (children?: React.ReactNode) => string;
-declare const Combobox: ({ autocompleteItems, children, grow, initialValue, onChange, onFocus, onBlur, showClearButton, clearButtonVariant, clearButtonAriaLabel, labelId, getStatusText, id, ...elemProps }: ComboboxProps) => JSX.Element;
-export default Combobox;
+export declare const Combobox: ({ autocompleteItems, children, grow, initialValue, onChange, onFocus, onBlur, showClearButton, clearButtonVariant, clearButtonAriaLabel, labelId, getStatusText, id, ...elemProps }: ComboboxProps) => JSX.Element;
 //# sourceMappingURL=Combobox.d.ts.map

package/dist/commonjs/combobox/lib/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAErF,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACpD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA2DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,cAAe,MAAM,SAAS,WAc5D,CAAC;AAYF,QAAA,MAAM,QAAQ,wLAeX,aAAa,gBA0Tf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAKf,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAErF,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAEhC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;CAClC;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACpD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACxE;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA2DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,cAAe,MAAM,SAAS,WAc5D,CAAC;AAYF,eAAO,MAAM,QAAQ,wLAelB,aAAa,gBAuTf,CAAC"}