@workday/canvas-kit-labs-react 15.0.0-alpha.1303-next.0 → 15.0.0

package/dist/es6/ai-ingress-button/lib/AIIngressButton.js

@@ -1,45 +1,45 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createComponent, focusRing, useUniqueId } from '@workday/canvas-kit-react/common';
 import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
-import { createStencil, handleCsProp, calc } from '@workday/canvas-kit-styling';
-import { system, base } from '@workday/canvas-tokens-web';
+import { createComponent, focusRing, useUniqueId } from '@workday/canvas-kit-react/common';
 import { systemIconStencil } from '@workday/canvas-kit-react/icon';
+import { calc, createStencil, handleCsProp } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
 import { getAIIngressIcon } from './AIIngressIcon';
 /**
  * Icon gradient colors
  */
-const illuminateStopColor1 = base.red200; //'#FFA198'
-const illuminateStopColor2 = base.orange200; //'#FFCAA0'
-const illuminateStopColor3 = base.orange200; //'#FFCA79'
-const illuminateStopColor4 = base.amber200; //'#FDCA44'
-const illuminateStopColor5 = base.amber300; //'#FFB74D';
+const illuminateStopColor1 = base.legacy.red200; //'#FFA198'
+const illuminateStopColor2 = base.legacy.orange200; //'#FFCAA0'
+const illuminateStopColor3 = base.legacy.orange200; //'#FFCA79'
+const illuminateStopColor4 = base.legacy.amber200; //'#FDCA44'
+const illuminateStopColor5 = base.legacy.amber300; //'#FFB74D';
 /**
  * Box shadow glow colors
  */
-const glowEraser = base.magenta200; //'#FFC2FD';
-const glowHighlighter = base.amber100; //'#FFF3A8';
-const glowLunchBreak = base.amber300; //'#FEC10B';
-const glowHappyHour = base.orange400; //'#FD7E00';
-const glowThumbtack = base.coral500; //'#FC5B05';
+const glowEraser = base.legacy.magenta200; //'#FFC2FD';
+const glowHighlighter = base.legacy.amber100; //'#FFF3A8';
+const glowLunchBreak = base.legacy.amber300; //'#FEC10B';
+const glowHappyHour = base.legacy.orange400; //'#FD7E00';
+const glowThumbtack = base.legacy.coral500; //'#FC5B05';
 export const AIIngressButtonStencil = createStencil({
     extends: buttonStencil,
-    base: { name: "1pse06", styles: "box-sizing:border-box;--background-button-85bf0e:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
+    base: { name: "e9xvb", styles: "box-sizing:border-box;--background-button-c26182:var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));height:calc(var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)) + var(--cnvs-base-size-50, 0.25rem));width:calc(var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)) + var(--cnvs-base-size-50, 0.25rem));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200, oklch(0.8339 0.092 28.19 / 1));}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1));}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1));}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
     modifiers: {
         variant: {
-            inverse: { name: "4ff51m", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
+            inverse: { name: "1tpq7e", styles: "--background-button-c26182:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200, oklch(0.8339 0.092 28.19 / 1));}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1));}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1));}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1))) ;}" }
         },
         toggled: {
-            true: { name: "12e2vl", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
-            false: { name: "2bdq00", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
+            true: { name: "2r27a8", styles: "--background-button-c26182:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200, oklch(0.887 0.1029 327.44 / 1)), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100, oklch(0.9567 0.0948 100.22 / 1)), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400, oklch(0.7261 0.1852 52.58 / 1)), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500, oklch(0.6779 0.2096 40.36 / 1)), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200, oklch(0.887 0.1029 327.44 / 1)), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21))) ;}" },
+            false: { name: "4bt68m", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
         }
     },
     compound: [
         {
             modifiers: { toggled: true, variant: 'inverse' },
-            styles: { name: "3lls4c", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
+            styles: { name: "1ipp78", styles: "--background-button-c26182:var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
         }
     ]
-}, "a-i-ingress-button-ea1953");
+}, "a-i-ingress-button-5576f1");
 export const AIIngressButton = createComponent('button')({
     displayName: 'AIIngressButton',
     Component: ({ toggled, variant, ...elemProps }, ref, Element) => {

package/dist/es6/ai-ingress-button/lib/AIIngressIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AIIngressIcon.d.ts","sourceRoot":"","sources":["../../../../ai-ingress-button/lib/AIIngressIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAE/E,eAAO,MAAM,gBAAgB,UAAW,MAAM,KAAG,gBAiBhD,CAAC"}
+{"version":3,"file":"AIIngressIcon.d.ts","sourceRoot":"","sources":["../../../../ai-ingress-button/lib/AIIngressIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE/E,eAAO,MAAM,gBAAgB,UAAW,MAAM,KAAG,gBAiBhD,CAAC"}

package/dist/es6/ai-ingress-button/lib/AIIngressIcon.js

@@ -3,7 +3,7 @@ export const getAIIngressIcon = (svgId) => {
     return {
         name: 'AIIngressButton',
         type: CanvasIconTypes.System,
-        svg: `<svg class="wd-icon-ai-ingress-button" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" >
+        svg: `<svg class="wd-icon-ai-ingress-button wd-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" >
             <linearGradient id="${svgId}" x1="10" y1="0.000195292" x2="10" y2="19.9998" gradientUnits="userSpaceOnUse">
               <stop />
               <stop offset="0.25"/>

package/dist/es6/common/lib/theming/useThemeRTL.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useThemeRTL.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemeRTL.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAI/D,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAc5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,WAAW;6BAMD,aAAa,EAAE;;EAYxC"}
+{"version":3,"file":"useThemeRTL.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemeRTL.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAE/D,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAc5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,WAAW;6BAMD,aAAa,EAAE;;EAYxC"}

package/dist/es6/common/lib/theming/useThemeRTL.js

@@ -1,6 +1,6 @@
-import { useIsRTL, useTheme } from '@workday/canvas-kit-react/common';
 import { useMemo } from 'react';
 import rtlCSSJS from 'rtl-css-js';
+import { useIsRTL, useTheme } from '@workday/canvas-kit-react/common';
 const getDirectionalStyles = (isRTL, ...styles) => {
     return isRTL ? rtlCSSJS(styles) : styles;
 };

package/dist/es6/index.d.ts

@@ -1,5 +1,3 @@
 export * from './ai-ingress-button';
-export * from './combobox';
-export * from './search-form';
 export * from './version';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC"}

package/dist/es6/index.js

@@ -1,4 +1,2 @@
 export * from './ai-ingress-button';
-export * from './combobox';
-export * from './search-form';
 export * from './version';

package/dist/es6/version/lib/version.js

@@ -1 +1 @@
-export const version = '14.0.17';
+export const version = '15.0.0';

package/index.ts

@@ -1,4 +1,2 @@
 export * from './ai-ingress-button';
-export * from './combobox';
-export * from './search-form';
 export * from './version';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "15.0.0-alpha.1303-next.0",
+  "version": "15.0.0",
   "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -10,7 +10,7 @@
   "types": "dist/es6/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/workday/canvas-kit.git",
+    "url": "https://github.com/Workday/canvas-kit.git",
     "directory": "modules/labs-react"
   },
   "files": [
@@ -48,11 +48,11 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^15.0.0-alpha.1303-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.1303-next.0",
-    "@workday/canvas-system-icons-web": "^3.0.36",
-    "@workday/canvas-tokens-web": "^3.1.1",
-    "@workday/design-assets-types": "^0.2.10",
+    "@workday/canvas-kit-react": "^15.0.0",
+    "@workday/canvas-kit-styling": "^15.0.0",
+    "@workday/canvas-system-icons-web": "4.0.2",
+    "@workday/canvas-tokens-web": "4.3.0",
+    "@workday/design-assets-types": "^0.3.0",
     "chroma-js": "^2.2.0",
     "lodash.flatten": "^4.4.0",
     "rtl-css-js": "^1.14.1"
@@ -60,5 +60,5 @@
   "devDependencies": {
     "@types/lodash.flatten": "^4.4.6"
   },
-  "gitHead": "4dc1e2083d2767fd402c2d014bedd8b35a014490"
+  "gitHead": "d7401bd7648fa6dbe66fdf3400e05770b77b030b"
 }

package/combobox/index.ts

@@ -1 +0,0 @@
-export * from './lib/Combobox';

package/combobox/lib/AutocompleteList.tsx

@@ -1,137 +0,0 @@
-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 {ComboBoxMenuItemGroup, getOptionId, listBoxIdPart, getTextFromElement} from './Combobox';
-
-const Autocomplete = styled('ul')({
-  margin: 0,
-  maxHeight: 200,
-  boxSizing: 'border-box',
-  overflowY: 'auto',
-  padding: `${space.xxs} 0`,
-});
-
-const AccessibleHide = styled('span')(accessibleHide);
-
-interface AutocompleteListProps {
-  /**
-   * The autocomplete items of the Combobox. This array of menu items is shown under the text input.
-   */
-  autocompleteItems: React.ReactElement<any>[] | ComboBoxMenuItemGroup[];
-  /**
-   * Index of the active autocomplete item
-   */
-  selectedIndex: number | null;
-  /**
-   * The function called when an autocomplete item is selected
-   */
-  handleAutocompleteClick: (
-    event: React.SyntheticEvent<Element, Event>,
-    menuItemProps: any
-  ) => void;
-  /**
-   * The id of the form field.
-   */
-  labelId: string;
-  /**
-   * The id of the combobox.
-   */
-  comboboxId: string;
-
-  /**
-   * True when group changes via keyboard control
-   */
-  showGroupText: boolean;
-}
-
-/**
- * @deprecated ⚠️ `AutocompleteList` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
- */
-export const AutocompleteList = ({
-  autocompleteItems,
-  comboboxId,
-  selectedIndex,
-  handleAutocompleteClick,
-  labelId,
-  showGroupText,
-}: AutocompleteListProps) => {
-  const [randomComponentId] = useState(generateUniqueId); // https://codesandbox.io/s/p2ndq
-
-  const componentId = comboboxId || randomComponentId;
-
-  const listBoxProps = {
-    role: 'listbox',
-    id: `${componentId}-${listBoxIdPart}`,
-    'aria-labelledby': labelId,
-  };
-
-  const createListItem = (
-    listboxItem: React.ReactElement<any>,
-    itemIndex: number,
-    groupMessage?: string
-  ) => {
-    const children = [
-      <AccessibleHide key={`group-message-${itemIndex}`}>{groupMessage}</AccessibleHide>,
-      ...React.Children.toArray(listboxItem.props.children),
-    ];
-
-    return (
-      <Fragment key={itemIndex}>
-        {React.cloneElement(listboxItem, {
-          children: children,
-          id: getOptionId(componentId, itemIndex),
-          role: 'option',
-          isFocused: selectedIndex === itemIndex,
-          'aria-selected': selectedIndex === itemIndex ? true : undefined,
-          onMouseDown: (event: React.MouseEvent) => {
-            // prevent focus from shifting away from the the combobox
-            event.preventDefault();
-          },
-          onClick: (event: React.MouseEvent) => {
-            event.preventDefault();
-            handleAutocompleteClick(event, listboxItem.props);
-          },
-        })}
-      </Fragment>
-    );
-  };
-
-  if (!autocompleteItems.length) {
-    return null;
-  } else if (autocompleteItems[0].hasOwnProperty('header')) {
-    let itemIndex = 0;
-    return (
-      <Autocomplete {...listBoxProps}>
-        {(autocompleteItems as ComboBoxMenuItemGroup[]).map(({header, items}, groupIndex) => {
-          const groupLabel = `itemGroup-${componentId}-${groupIndex}`;
-          return (
-            <Fragment key={groupLabel}>
-              {React.cloneElement(header, {
-                role: 'presentation',
-                style: {pointerEvents: `none`},
-              })}
-              {items.map((listboxItem: React.ReactElement) => {
-                const headerName = getTextFromElement(header);
-                const groupMessage = showGroupText
-                  ? `Entering group ${headerName}, with ${items.length} options.`
-                  : undefined;
-                const item = createListItem(listboxItem, itemIndex, groupMessage);
-                itemIndex++;
-                return item;
-              })}
-            </Fragment>
-          );
-        })}
-      </Autocomplete>
-    );
-  } else {
-    return (
-      <Autocomplete {...listBoxProps}>
-        {(autocompleteItems as React.ReactElement<any>[]).map(
-          (listboxItem: React.ReactElement, index: number) => createListItem(listboxItem, index)
-        )}
-      </Autocomplete>
-    );
-  }
-};