@databricks/design-system 1.12.18 → 1.12.19

package/dist/development.js

@@ -1,31 +1,31 @@
-import React__default, { useMemo, forwardRef, useState, useRef, useEffect, useCallback, useImperativeHandle, createContext, useReducer } from 'react';
+import { css, useTheme } from '@emotion/react';
+import React__default, { useMemo, forwardRef, useState, useRef, useEffect, useCallback, useImperativeHandle, createContext, useContext, useReducer } from 'react';
 import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { Z as WarningIcon, Y as DangerIcon, b as DesignSystemEventProviderAnalyticsEventTypes, a as useDesignSystemTheme, c as useDesignSystemEventComponentCallbacks, d as DesignSystemEventProviderComponentTypes, f as useNotifyOnFirstView, B as Button$1, C as CloseIcon, h as addDebugOutlineIfEnabled, q as Typography, as as primitiveColors, l as Root$3, T as Trigger, m as Content, a1 as ChevronLeftIcon, n as ChevronRightIcon, i as useDesignSystemSafexFlags, r as importantify } from './Typography-CTfAhQ8V.js';
-export { au as Form, at as useFormContext } from './Typography-CTfAhQ8V.js';
-import { M as MegaphoneIcon, I as Input, C as ClockIcon } from './index-DSCOuDtB.js';
+import { M as MegaphoneIcon, I as Input, C as ClockIcon, S as SearchIcon } from './index-BikpTrq_.js';
+import { W as WarningIcon, j as DangerIcon, d as DesignSystemEventProviderAnalyticsEventTypes, u as useDesignSystemTheme, f as useDesignSystemEventComponentCallbacks, h as DesignSystemEventProviderComponentTypes, k as DesignSystemEventProviderComponentSubTypeMap, l as useNotifyOnFirstView, B as Button$1, C as CloseIcon, b as addDebugOutlineIfEnabled, T as Typography, p as primitiveColors, R as Root$3, m as Trigger, n as Content, o as ChevronLeftIcon, q as ChevronRightIcon, r as getComboboxOptionItemWrapperStyles, a as useDesignSystemSafexFlags, i as importantify } from './Stepper-BevE-qWg.js';
+export { F as Form, s as RhfForm, S as Stepper, e as useFormContext } from './Stepper-BevE-qWg.js';
 import { startOfToday, startOfYesterday, sub, format, isValid, startOfWeek, endOfToday, endOfYesterday, isAfter, isBefore } from 'date-fns';
 import { DayPicker, useDayRender, Button as Button$2 } from 'react-day-picker';
 import { RadioGroup, RadioGroupItem } from '@radix-ui/react-radio-group';
 import * as Progress$1 from '@radix-ui/react-progress';
-export { S as Stepper } from './Stepper-CHoSvjfT.js';
 import * as RadixToolbar from '@radix-ui/react-toolbar';
 import 'antd';
 import '@radix-ui/react-popover';
-import '@radix-ui/react-tooltip';
+import 'lodash/isUndefined';
 import '@ant-design/icons';
+import 'lodash/memoize';
+import '@radix-ui/react-tooltip';
+import '@floating-ui/react';
 import 'lodash/isNil';
 import 'lodash/endsWith';
 import 'lodash/isBoolean';
 import 'lodash/isNumber';
 import 'lodash/isString';
 import 'lodash/mapValues';
-import 'lodash/memoize';
 import '@emotion/unitless';
 import 'lodash/uniqueId';
-import 'lodash/isUndefined';
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$2() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const {
   Text,
   Paragraph
@@ -33,13 +33,13 @@ const {
 const BANNER_MIN_HEIGHT = 68;
 // Max height will allow 2 lines of description (3 lines total)
 const BANNER_MAX_HEIGHT = 82;
-var _ref = process.env.NODE_ENV === "production" ? {
+var _ref$1 = process.env.NODE_ENV === "production" ? {
   name: "1te1whx",
   styles: "margin-left:auto;display:flex;align-items:center"
 } : {
   name: "13c4h59-rightContainer",
   styles: "margin-left:auto;display:flex;align-items:center;label:rightContainer;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
 const useStyles = (props, theme) => {
   const bannerLevelToBannerColors = {
@@ -107,14 +107,14 @@ const useStyles = (props, theme) => {
     mainContent: /*#__PURE__*/css("flex-direction:column;align-self:", props.description ? 'flex-start' : 'center', ";display:flex;box-sizing:border-box;padding-right:", theme.spacing.sm, "px;padding-top:2px;padding-bottom:2px;min-width:", theme.spacing.lg, "px;width:100%;" + (process.env.NODE_ENV === "production" ? "" : ";label:mainContent;")),
     messageTextBlock: /*#__PURE__*/css("display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;&&{color:", colorScheme.textColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:messageTextBlock;")),
     descriptionBlock: /*#__PURE__*/css("display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;&&{color:", colorScheme.textColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:descriptionBlock;")),
-    rightContainer: _ref,
+    rightContainer: _ref$1,
     closeIconContainer: /*#__PURE__*/css("display:flex;margin-left:", theme.spacing.xs, "px;box-sizing:border-box;line-height:0;" + (process.env.NODE_ENV === "production" ? "" : ";label:closeIconContainer;")),
-    closeButton: /*#__PURE__*/css("cursor:pointer;background:none;border:none;margin:0;&&{height:24px!important;width:24px!important;padding:", theme.spacing.xs, "px!important;}&&:hover{background-color:transparent!important;border-color:", colorScheme.textHoverColor, "!important;color:", colorScheme.closeIconTextHoverColor ? colorScheme.closeIconTextHoverColor : colorScheme.textColor, "!important;background-color:", colorScheme.closeIconBackgroundHoverColor ? colorScheme.closeIconBackgroundHoverColor : colorScheme.backgroundDefaultColor, "!important;}&&:active{border-color:", colorScheme.actionBorderColor, "!important;color:", colorScheme.closeIconTextPressColor ? colorScheme.closeIconTextPressColor : colorScheme.textColor, "!important;background-color:", colorScheme.closeIconBackgroundPressColor ? colorScheme.closeIconBackgroundPressColor : colorScheme.backgroundDefaultColor, "!important;}" + (process.env.NODE_ENV === "production" ? "" : ";label:closeButton;")),
+    closeButton: /*#__PURE__*/css("cursor:pointer;background:none;border:none;margin:0;&&{height:24px!important;width:24px!important;padding:", theme.spacing.xs, "px!important;box-shadow:unset!important;}&&:hover{background-color:transparent!important;border-color:", colorScheme.textHoverColor, "!important;color:", colorScheme.closeIconTextHoverColor ? colorScheme.closeIconTextHoverColor : colorScheme.textColor, "!important;background-color:", colorScheme.closeIconBackgroundHoverColor ? colorScheme.closeIconBackgroundHoverColor : colorScheme.backgroundDefaultColor, "!important;}&&:active{border-color:", colorScheme.actionBorderColor, "!important;color:", colorScheme.closeIconTextPressColor ? colorScheme.closeIconTextPressColor : colorScheme.textColor, "!important;background-color:", colorScheme.closeIconBackgroundPressColor ? colorScheme.closeIconBackgroundPressColor : colorScheme.backgroundDefaultColor, "!important;}" + (process.env.NODE_ENV === "production" ? "" : ";label:closeButton;")),
     closeIcon: /*#__PURE__*/css("color:", colorScheme.closeIconColor ? colorScheme.closeIconColor : colorScheme.textColor, "!important;" + (process.env.NODE_ENV === "production" ? "" : ";label:closeIcon;")),
     actionButtonContainer: /*#__PURE__*/css("margin-right:", theme.spacing.xs, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:actionButtonContainer;")),
     // Override design system colors to show the use the action text color for text and border.
     // Also overrides text for links.
-    actionButton: /*#__PURE__*/css("color:", colorScheme.textColor, "!important;border-color:", colorScheme.actionBorderColor ? colorScheme.actionBorderColor : colorScheme.textColor, "!important;&:focus,&:hover{border-color:", colorScheme.actionButtonBorderHoverColor ? colorScheme.actionButtonBorderHoverColor : colorScheme.textHoverColor, "!important;color:", colorScheme.textColor, "!important;background-color:", colorScheme.actionButtonBackgroundHoverColor, "!important;}&:active{border-color:", colorScheme.actionButtonBorderPressColor ? colorScheme.actionButtonBorderPressColor : colorScheme.actionBorderColor, "!important;color:", colorScheme.textPressColor, "!important;background-color:", colorScheme.actionButtonBackgroundPressColor, "!important;}a{color:", theme.colors.actionPrimaryTextDefault, ";}a:focus,a:hover{color:", colorScheme.textHoverColor, ";text-decoration:none;}a:active{color:", colorScheme.textPressColor, " text-decoration:none;}" + (process.env.NODE_ENV === "production" ? "" : ";label:actionButton;"))
+    actionButton: /*#__PURE__*/css("color:", colorScheme.textColor, "!important;border-color:", colorScheme.actionBorderColor ? colorScheme.actionBorderColor : colorScheme.textColor, "!important;box-shadow:unset!important;&:focus,&:hover{border-color:", colorScheme.actionButtonBorderHoverColor ? colorScheme.actionButtonBorderHoverColor : colorScheme.textHoverColor, "!important;color:", colorScheme.textColor, "!important;background-color:", colorScheme.actionButtonBackgroundHoverColor, "!important;}&:active{border-color:", colorScheme.actionButtonBorderPressColor ? colorScheme.actionButtonBorderPressColor : colorScheme.actionBorderColor, "!important;color:", colorScheme.textPressColor, "!important;background-color:", colorScheme.actionButtonBackgroundPressColor, "!important;}a{color:", theme.colors.actionPrimaryTextDefault, ";}a:focus,a:hover{color:", colorScheme.textHoverColor, ";text-decoration:none;}a:active{color:", colorScheme.textPressColor, " text-decoration:none;}" + (process.env.NODE_ENV === "production" ? "" : ";label:actionButton;"))
   };
 };
 const levelToIconMap = {
@@ -156,6 +156,7 @@ const Banner = props => {
   const eventContext = useDesignSystemEventComponentCallbacks({
     componentType: DesignSystemEventProviderComponentTypes.Banner,
     componentId,
+    componentSubType: DesignSystemEventProviderComponentSubTypeMap[level],
     analyticsEvents: memoizedAnalyticsEvents
   });
   const {
@@ -270,7 +271,7 @@ const generateDatePickerClassNames = prefix => ({
   day_range_middle: `${prefix}-day_range_middle`
 });
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const handleInputKeyDown = (event, setIsVisible) => {
   if (event.key === ' ' || event.key === 'Enter' || event.key === 'Space') {
     event.preventDefault();
@@ -291,11 +292,18 @@ function Day(props) {
       ...dayRender.divProps
     });
   }
+  const ariaLabel = props.date.toLocaleDateString(undefined, {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
   return jsx(Button$2, {
     name: "day",
     ref: buttonRef,
     ...dayRender.buttonProps,
-    role: "button"
+    role: "button",
+    "aria-label": ariaLabel
   });
 }
 const getDatePickerQuickActionBasic = _ref => {
@@ -334,6 +342,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
     allowClear,
     onClear,
     includeTime,
+    includeSeconds,
     defaultTime,
     onOpenChange,
     open,
@@ -350,11 +359,12 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
     onOkPress,
     okButtonLabel,
     showTimeZone,
+    customTimeZoneLabel,
     ...restProps
   } = props;
-  const format$1 = includeTime ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd';
+  const format$1 = includeTime ? includeSeconds ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd';
   const [date, setDate] = useState(value);
-  const [timezone, setTimezone] = useState();
+  const [timezone, setTimezone] = useState(customTimeZoneLabel);
   const [isVisible, setIsVisible] = useState(Boolean(open));
   const inputRef = useRef(null);
   const visibleRef = useRef(isVisible);
@@ -375,13 +385,17 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
     const now = new Date();
     if (showTimeZone) {
       var _Intl$DateTimeFormat$, _Intl$DateTimeFormat$2;
+      if (customTimeZoneLabel) {
+        setTimezone(customTimeZoneLabel);
+        return;
+      }
       setTimezone((_Intl$DateTimeFormat$ = (_Intl$DateTimeFormat$2 = Intl.DateTimeFormat('en-US', {
         timeZoneName: 'short'
       }).formatToParts(now).find(part => part.type === 'timeZoneName')) === null || _Intl$DateTimeFormat$2 === void 0 ? void 0 : _Intl$DateTimeFormat$2.value) !== null && _Intl$DateTimeFormat$ !== void 0 ? _Intl$DateTimeFormat$ : format(now, 'z'));
     } else {
       setTimezone(undefined);
     }
-  }, [showTimeZone]);
+  }, [showTimeZone, customTimeZoneLabel]);
   useEffect(() => {
     if (value) {
       if (value instanceof Date && isValid(value)) {
@@ -416,9 +430,13 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
         const timeSplit = defaultTime.split(':');
         date === null || date === void 0 || date.setHours(+timeSplit[0]);
         date === null || date === void 0 || date.setMinutes(+timeSplit[1]);
+        date.setSeconds(timeSplit.length > 2 ? +timeSplit[2] : 0);
       } else if (prevDate && date && includeTime) {
         date.setHours(prevDate.getHours());
         date.setMinutes(prevDate.getMinutes());
+        if (includeSeconds) {
+          date.setSeconds(prevDate.getSeconds());
+        }
       }
       handleChange === null || handleChange === void 0 || handleChange(date, true);
       return date;
@@ -436,6 +454,9 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
     if (date && updatedDate && includeTime) {
       updatedDate.setHours(updatedDate.getHours());
       updatedDate.setMinutes(updatedDate.getMinutes());
+      if (includeSeconds) {
+        updatedDate.setSeconds(updatedDate.getSeconds());
+      }
     }
     setDate(updatedDate);
     handleChange === null || handleChange === void 0 || handleChange(updatedDate, false);
@@ -451,13 +472,16 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
   const handleTimeUpdate = e => {
     var _e$nativeEvent;
     const newTime = (_e$nativeEvent = e.nativeEvent) === null || _e$nativeEvent === void 0 || (_e$nativeEvent = _e$nativeEvent.target) === null || _e$nativeEvent === void 0 ? void 0 : _e$nativeEvent.value;
-    const time = date && isValid(date) ? format(date, 'HH:mm') : undefined;
+    const time = date && isValid(date) ? format(date, includeSeconds ? 'HH:mm:ss' : 'HH:mm') : undefined;
     if (newTime && newTime !== time) {
       if (date) {
         const updatedDate = new Date(date);
         const timeSplit = newTime.split(':');
         updatedDate.setHours(+timeSplit[0]);
         updatedDate.setMinutes(+timeSplit[1]);
+        if (includeSeconds) {
+          updatedDate.setSeconds(+timeSplit[2]);
+        }
         handleInputUpdate(updatedDate);
       }
     }
@@ -523,7 +547,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
             suffix: showTimeZone ? jsx("span", {
               children: timezone
             }) : undefined,
-            max: includeTime ? '9999-12-31T23:59' : '9999-12-31',
+            max: includeTime ? includeSeconds ? '9999-12-31T23:59:59' : '9999-12-31T23:59' : '9999-12-31',
             ...restProps,
             css: /*#__PURE__*/css({
               '*::-webkit-calendar-picker-indicator': {
@@ -547,6 +571,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
               })
             }, process.env.NODE_ENV === "production" ? "" : ";label:DatePicker;"),
             type: includeTime ? 'datetime-local' : 'date',
+            step: includeTime && includeSeconds ? 1 : undefined,
             onKeyDown: event => handleInputKeyDown(event, setIsVisible),
             onChange: e => handleInputUpdate(new Date(e.target.value)),
             value: date && isValid(date) ? format(date, format$1) : undefined
@@ -596,10 +621,11 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
         }), includeTime && jsx(Input, {
           componentId: "codegen_design-system_src_development_datepicker_datepicker.tsx_306",
           type: "time",
+          step: includeSeconds ? 1 : undefined,
           "aria-label": "Time",
           role: "textbox",
           ...timeInputProps,
-          value: date && isValid(date) ? format(date, 'HH:mm') : undefined,
+          value: date && isValid(date) ? format(date, includeSeconds ? 'HH:mm:ss' : 'HH:mm') : undefined,
           onChange: handleTimeUpdate,
           css: /*#__PURE__*/css({
             '*::-webkit-calendar-picker-indicator': {
@@ -669,7 +695,7 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "p55v8c-RangePicker",
   styles: "*::-webkit-calendar-picker-indicator{display:none;}border-top-right-radius:0;border-bottom-right-radius:0;label:RangePicker;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
 };
 const RangePicker = props => {
   var _startDatePickerProps6, _endDatePickerProps$d5, _range$from;
@@ -679,6 +705,7 @@ const RangePicker = props => {
     startDatePickerProps,
     endDatePickerProps,
     includeTime,
+    includeSeconds,
     allowClear,
     minWidth,
     maxWidth,
@@ -856,6 +883,7 @@ const RangePicker = props => {
       disabled: disabled || (startDatePickerProps === null || startDatePickerProps === void 0 ? void 0 : startDatePickerProps.disabled),
       onChange: e => handleUpdateDate(e, true),
       includeTime: includeTime,
+      includeSeconds: includeSeconds,
       allowClear: allowClear,
       datePickerProps: {
         ...(startDatePickerProps === null || startDatePickerProps === void 0 ? void 0 : startDatePickerProps.datePickerProps),
@@ -897,6 +925,7 @@ const RangePicker = props => {
       disabled: disabled || (endDatePickerProps === null || endDatePickerProps === void 0 ? void 0 : endDatePickerProps.disabled),
       onChange: e => handleUpdateDate(e, false),
       includeTime: includeTime,
+      includeSeconds: includeSeconds,
       open: isToVisible,
       onOpenChange: setIsToVisible,
       allowClear: allowClear,
@@ -935,6 +964,305 @@ const RangePicker = props => {
   });
 };
 
+const ListboxContext = /*#__PURE__*/createContext(null);
+const useListboxContext = () => {
+  const context = useContext(ListboxContext);
+  if (!context) {
+    throw new Error('useListboxContext must be used within a ListboxProvider');
+  }
+  return context;
+};
+const ListboxRoot = _ref => {
+  let {
+    children,
+    className,
+    onSelect,
+    initialSelectedValue,
+    listBoxDivRef
+  } = _ref;
+  const [selectedValue, setSelectedValue] = useState(initialSelectedValue);
+  const [highlightedValue, setHighlightedValue] = useState();
+  const listboxId = useMemo(() => `listbox-${Math.random().toString(36).slice(2)}`, []);
+  const getContentOptions = element => {
+    const options = element === null || element === void 0 ? void 0 : element.querySelectorAll('[role="option"], [role="link"]');
+    return options ? Array.from(options) : undefined;
+  };
+  const handleKeyNavigation = useCallback((event, options) => {
+    const currentIndex = options.findIndex(option => option.value === highlightedValue);
+    let nextIndex = currentIndex;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        nextIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;
+        break;
+      case 'Home':
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case 'End':
+        event.preventDefault();
+        nextIndex = options.length - 1;
+        break;
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        if (highlightedValue !== undefined) {
+          onSelect === null || onSelect === void 0 || onSelect(highlightedValue);
+          if (options[currentIndex].href) {
+            window.open(options[currentIndex].href, '_blank');
+          } else {
+            setSelectedValue(highlightedValue);
+          }
+        }
+        break;
+      default:
+        return;
+    }
+    if (nextIndex !== currentIndex && listBoxDivRef !== null && listBoxDivRef !== void 0 && listBoxDivRef.current) {
+      setHighlightedValue(options[nextIndex].value);
+      const optionsList = getContentOptions(listBoxDivRef === null || listBoxDivRef === void 0 ? void 0 : listBoxDivRef.current);
+      if (optionsList) {
+        var _optionsList$nextInde, _optionsList$nextInde2;
+        (_optionsList$nextInde = optionsList[nextIndex]) === null || _optionsList$nextInde === void 0 || (_optionsList$nextInde2 = _optionsList$nextInde.scrollIntoView) === null || _optionsList$nextInde2 === void 0 || _optionsList$nextInde2.call(_optionsList$nextInde, {
+          block: 'center'
+        });
+      }
+    }
+  }, [highlightedValue, onSelect, listBoxDivRef]);
+  const contextValue = useMemo(() => ({
+    selectedValue,
+    setSelectedValue,
+    highlightedValue,
+    setHighlightedValue,
+    listboxId,
+    handleKeyNavigation
+  }), [selectedValue, highlightedValue, listboxId, handleKeyNavigation]);
+  return jsx(ListboxContext.Provider, {
+    value: contextValue,
+    children: jsx("div", {
+      className: className,
+      children: children
+    })
+  });
+};
+
+const ListboxInput = _ref => {
+  let {
+    value,
+    onChange,
+    placeholder,
+    'aria-controls': ariaControls,
+    'aria-activedescendant': ariaActiveDescendant,
+    className,
+    options
+  } = _ref;
+  const {
+    handleKeyNavigation
+  } = useListboxContext();
+  const designSystemTheme = useDesignSystemTheme();
+  const handleChange = useCallback(event => {
+    onChange(event.target.value);
+  }, [onChange]);
+  const handleKeyDown = useCallback(event => {
+    // Only handle navigation keys if there are options
+    if (options.length > 0 && ['ArrowDown', 'ArrowUp', 'Home', 'End', 'Enter'].includes(event.key)) {
+      handleKeyNavigation(event, options);
+    }
+  }, [handleKeyNavigation, options]);
+  return jsx("div", {
+    css: /*#__PURE__*/css({
+      position: 'sticky',
+      top: 0,
+      background: designSystemTheme.theme.colors.backgroundPrimary,
+      zIndex: designSystemTheme.theme.options.zIndexBase + 1
+    }, process.env.NODE_ENV === "production" ? "" : ";label:ListboxInput;"),
+    children: jsx(Input, {
+      componentId: "listbox-filter-input",
+      role: "combobox",
+      "aria-controls": ariaControls,
+      "aria-activedescendant": ariaActiveDescendant,
+      "aria-expanded": "true",
+      "aria-autocomplete": "list",
+      value: value,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      placeholder: placeholder,
+      prefix: jsx(SearchIcon, {}),
+      className: className,
+      allowClear: true
+    })
+  });
+};
+
+/** @jsxImportSource @emotion/react */
+const ListboxOptions = _ref => {
+  let {
+    options,
+    onSelect,
+    onHighlight,
+    className
+  } = _ref;
+  const theme = useTheme();
+  const {
+    listboxId,
+    selectedValue,
+    setSelectedValue,
+    highlightedValue,
+    handleKeyNavigation
+  } = useListboxContext();
+  const listboxRef = useRef(null);
+  const handleKeyDown = useCallback(event => {
+    handleKeyNavigation(event, options);
+  }, [handleKeyNavigation, options]);
+  const handleClick = useCallback((event, option) => {
+    onSelect === null || onSelect === void 0 || onSelect(option.value);
+    if (option.href) {
+      event.preventDefault();
+      window.open(option.href, '_blank');
+    } else {
+      setSelectedValue(option.value);
+    }
+  }, [setSelectedValue, onSelect]);
+  useEffect(() => {
+    // If no option is highlighted, highlight the first one
+    if (!highlightedValue && options.length > 0) {
+      onHighlight(options[0].value);
+    }
+  }, [highlightedValue, onHighlight, options]);
+  return jsx("div", {
+    ref: listboxRef,
+    role: "listbox",
+    id: listboxId,
+    className: className,
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    "aria-activedescendant": highlightedValue ? `${listboxId}-${highlightedValue}` : undefined,
+    css: /*#__PURE__*/css({
+      outline: 'none',
+      '&:focus-visible': {
+        boxShadow: `0 0 0 2px ${theme.colors.actionDefaultBorderFocus}`,
+        borderRadius: theme.borders.borderRadiusSm
+      }
+    }, process.env.NODE_ENV === "production" ? "" : ";label:ListboxOptions;"),
+    children: options.map(option => (option.renderOption || (additionalProps => jsx("div", {
+      ...additionalProps,
+      children: option.label
+    })))({
+      key: option.value,
+      role: option.href ? 'link' : 'option',
+      id: `${listboxId}-${option.value}`,
+      'aria-selected': option.value === selectedValue,
+      onClick: event => handleClick(event, option),
+      onMouseEnter: () => onHighlight(option.value),
+      'data-highlighted': option.value === highlightedValue,
+      css: getComboboxOptionItemWrapperStyles(theme),
+      href: option.href,
+      tabIndex: -1
+    }))
+  });
+};
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "3w0yoi",
+  styles: "display:flex;flex-direction:column;gap:8px"
+} : {
+  name: "1rdxpq6-ListboxContent",
+  styles: "display:flex;flex-direction:column;gap:8px;label:ListboxContent;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const ListboxContent = _ref2 => {
+  let {
+    options,
+    filterValue,
+    setFilterValue,
+    filterInputPlaceholder,
+    onSelect,
+    ariaLabel,
+    includeFilterInput,
+    filterInputEmptyMessage,
+    listBoxDivRef
+  } = _ref2;
+  const [highlightedValue, setHighlightedValue] = useState();
+  const {
+    listboxId
+  } = useListboxContext();
+  const designSystemTheme = useDesignSystemTheme();
+  const filteredOptions = useMemo(() => {
+    if (!filterValue) return options;
+    const lowerFilter = filterValue.toLowerCase();
+    return options.filter(option => option.value.toLowerCase().includes(lowerFilter) || option.label.toLowerCase().includes(lowerFilter));
+  }, [filterValue, options]);
+  return jsxs("div", {
+    css: _ref,
+    ref: listBoxDivRef,
+    children: [includeFilterInput && jsxs(Fragment, {
+      children: [jsx(ListboxInput, {
+        value: filterValue,
+        onChange: setFilterValue,
+        placeholder: filterInputPlaceholder,
+        "aria-controls": listboxId,
+        "aria-activedescendant": highlightedValue ? `${listboxId}-${highlightedValue}` : undefined,
+        options: filteredOptions
+      }), filteredOptions.length === 0 && filterInputEmptyMessage && jsx("div", {
+        "aria-live": "polite",
+        role: "status",
+        css: /*#__PURE__*/css({
+          color: designSystemTheme.theme.colors.textSecondary,
+          textAlign: 'center',
+          padding: '6px 12px',
+          width: '100%',
+          boxSizing: 'border-box'
+        }, process.env.NODE_ENV === "production" ? "" : ";label:ListboxContent;"),
+        children: filterInputEmptyMessage
+      })]
+    }), jsx(ListboxOptions, {
+      options: filteredOptions,
+      onSelect: onSelect,
+      onHighlight: setHighlightedValue,
+      "aria-label": ariaLabel
+    })]
+  });
+};
+const Listbox = _ref3 => {
+  let {
+    options,
+    onSelect,
+    includeFilterInput,
+    filterInputEmptyMessage,
+    initialSelectedValue,
+    filterInputPlaceholder,
+    'aria-label': ariaLabel,
+    className
+  } = _ref3;
+  const [filterValue, setFilterValue] = useState('');
+  const handleSelect = useCallback(value => {
+    onSelect === null || onSelect === void 0 || onSelect(value);
+  }, [onSelect]);
+  const listBoxDivRef = useRef(null);
+  return jsx(ListboxRoot, {
+    className: className,
+    onSelect: handleSelect,
+    initialSelectedValue: initialSelectedValue,
+    listBoxDivRef: listBoxDivRef,
+    children: jsx(ListboxContent, {
+      options: options,
+      filterValue: filterValue,
+      setFilterValue: setFilterValue,
+      filterInputPlaceholder: filterInputPlaceholder,
+      onSelect: handleSelect,
+      ariaLabel: ariaLabel,
+      includeFilterInput: includeFilterInput,
+      filterInputEmptyMessage: filterInputEmptyMessage,
+      listBoxDivRef: listBoxDivRef
+    })
+  });
+};
+
 const RadioGroupContext = /*#__PURE__*/React__default.createContext('medium');
 const Root$2 = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) => {
   let {
@@ -971,7 +1299,8 @@ const Root$2 = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) => {
       }, process.env.NODE_ENV === "production" ? "" : ";label:Root;"),
       onValueChange: onValueChangeWrapper,
       ...props,
-      ref: forwardedRef
+      ref: forwardedRef,
+      ...eventContext.dataComponentProps
     })
   });
 });
@@ -1029,14 +1358,14 @@ const useRadioGroupItemStyles = (size, iconClass) => {
     paddingInline: '12px',
     fontWeight: theme.typography.typographyRegularFontWeight,
     fontSize: theme.typography.fontSizeBase,
-    borderRadius: theme.spacing.md,
+    borderRadius: theme.borders.borderRadiusFull,
     transition: 'background-color 0.2s ease-in-out, border-color 0.2s ease-in-out',
     [`& > .${iconClass}`]: {
       color: theme.colors.textSecondary,
       ...(size === 'large' ? {
         backgroundColor: theme.colors.tagDefault,
         padding: theme.spacing.sm,
-        borderRadius: theme.spacing.md
+        borderRadius: theme.borders.borderRadiusFull
       } : {})
     },
     '&[data-state="checked"]': {
@@ -1047,7 +1376,7 @@ const useRadioGroupItemStyles = (size, iconClass) => {
       outlineStyle: 'solid',
       outlineWidth: '2px',
       outlineOffset: '0px',
-      outlineColor: theme.isDarkMode ? theme.colors.actionLinkDefault : theme.colors.actionLinkDefault,
+      outlineColor: theme.colors.actionDefaultBorderFocus,
       '&:hover': {
         backgroundColor: theme.colors.actionDefaultBackgroundPress,
         borderColor: theme.colors.actionLinkPress,
@@ -1107,7 +1436,7 @@ const useRadioGroupItemStyles = (size, iconClass) => {
       lineHeight: theme.typography.lineHeightXl,
       paddingInline: theme.spacing.md,
       paddingInlineStart: '6px',
-      borderRadius: theme.spacing.lg
+      borderRadius: theme.borders.borderRadiusFull
     } : {})
   };
 };
@@ -1118,193 +1447,6 @@ var PillControl = /*#__PURE__*/Object.freeze({
   Root: Root$2
 });
 
-const PreviewCard = _ref => {
-  let {
-    icon,
-    title,
-    subtitle,
-    titleActions,
-    children,
-    startActions,
-    endActions,
-    image,
-    onClick,
-    size = 'default',
-    dangerouslyAppendEmotionCSS,
-    componentId,
-    analyticsEvents = [],
-    disabled,
-    selected,
-    ...props
-  } = _ref;
-  const styles = usePreviewCardStyles({
-    onClick,
-    size,
-    disabled
-  });
-  const tabIndex = onClick ? 0 : undefined;
-  const role = onClick ? 'button' : undefined;
-  const showFooter = startActions || endActions;
-  const memoizedAnalyticsEvents = useMemo(() => analyticsEvents, [analyticsEvents]);
-  const eventContext = useDesignSystemEventComponentCallbacks({
-    componentType: DesignSystemEventProviderComponentTypes.PreviewCard,
-    componentId,
-    analyticsEvents: memoizedAnalyticsEvents
-  });
-  const onClickWrapper = useCallback(e => {
-    if (onClick) {
-      eventContext.onClick(e);
-      onClick(e);
-    }
-  }, [eventContext, onClick]);
-  return jsxs("div", {
-    ...addDebugOutlineIfEnabled(),
-    css: [styles['container'], dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:PreviewCard;"],
-    tabIndex: tabIndex,
-    onClick: onClickWrapper,
-    onKeyDown: e => {
-      if (!onClick || disabled) {
-        return;
-      }
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        onClickWrapper(e);
-      }
-    },
-    role: role,
-    "aria-disabled": disabled,
-    "aria-pressed": selected,
-    ...props,
-    children: [image && jsx("div", {
-      css: styles['image'],
-      children: image
-    }), jsxs("div", {
-      css: styles['header'],
-      children: [icon && jsx("div", {
-        children: icon
-      }), jsxs("div", {
-        css: styles['titleWrapper'],
-        children: [title && jsx("div", {
-          css: styles['title'],
-          children: title
-        }), subtitle && jsx("div", {
-          css: styles['subTitle'],
-          children: subtitle
-        })]
-      }), titleActions && jsx("div", {
-        children: titleActions
-      })]
-    }), children && jsx("div", {
-      css: styles['childrenWrapper'],
-      children: children
-    }), showFooter && jsxs("div", {
-      css: styles['footer'],
-      children: [jsx("div", {
-        css: styles['action'],
-        children: startActions
-      }), jsx("div", {
-        css: styles['action'],
-        children: endActions
-      })]
-    })]
-  });
-};
-const usePreviewCardStyles = _ref2 => {
-  let {
-    onClick,
-    size,
-    disabled
-  } = _ref2;
-  const {
-    theme
-  } = useDesignSystemTheme();
-  const {
-    useNewShadows
-  } = useDesignSystemSafexFlags();
-  const isInteractive = onClick !== undefined;
-  return {
-    container: {
-      borderRadius: theme.legacyBorders.borderRadiusLg,
-      border: `1px solid ${theme.colors.border}`,
-      padding: size === 'large' ? theme.spacing.lg : theme.spacing.md,
-      color: theme.colors.textSecondary,
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'space-between',
-      gap: size === 'large' ? theme.spacing.md : theme.spacing.sm,
-      ...(useNewShadows ? {
-        boxShadow: theme.shadows.sm
-      } : {}),
-      cursor: isInteractive ? 'pointer' : 'default',
-      ...(isInteractive && {
-        '&[aria-disabled="true"]': {
-          pointerEvents: 'none',
-          backgroundColor: theme.colors.actionDisabledBackground,
-          borderColor: theme.colors.actionDisabledBorder,
-          color: theme.colors.actionDisabledText
-        },
-        '&:hover, &:focus-within': {
-          boxShadow: useNewShadows ? theme.shadows.md : theme.general.shadowLow
-        },
-        '&:active': {
-          background: theme.colors.actionTertiaryBackgroundPress,
-          borderColor: theme.colors.actionDefaultBorderHover,
-          boxShadow: useNewShadows ? theme.shadows.md : theme.general.shadowLow
-        },
-        '&:focus, &[aria-pressed="true"]': {
-          outlineColor: theme.colors.actionPrimaryBackgroundDefault,
-          outlineWidth: 2,
-          outlineOffset: -2,
-          outlineStyle: 'solid',
-          boxShadow: useNewShadows ? theme.shadows.md : theme.general.shadowLow,
-          borderColor: theme.colors.actionDefaultBorderHover
-        },
-        '&:active:not(:focus):not(:focus-within)': {
-          background: 'transparent',
-          borderColor: theme.colors.border
-        }
-      })
-    },
-    image: {
-      '& > *': {
-        borderRadius: theme.legacyBorders.borderRadiusMd
-      }
-    },
-    header: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: theme.spacing.sm
-    },
-    title: {
-      fontWeight: theme.typography.typographyBoldFontWeight,
-      color: disabled ? theme.colors.actionDisabledText : theme.colors.textPrimary,
-      lineHeight: theme.typography.lineHeightSm
-    },
-    subTitle: {
-      lineHeight: theme.typography.lineHeightSm
-    },
-    titleWrapper: {
-      flexGrow: 1,
-      overflow: 'hidden'
-    },
-    childrenWrapper: {
-      flexGrow: 1
-    },
-    footer: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      flexWrap: 'wrap'
-    },
-    action: {
-      overflow: 'hidden',
-      // to ensure focus ring is rendered
-      margin: theme.spacing.md * -1,
-      padding: theme.spacing.md
-    }
-  };
-};
-
 const progressContextDefaults = {
   progress: 0
 };
@@ -1331,7 +1473,7 @@ const getProgressRootStyles = (theme, _ref) => {
     backgroundColor: theme.colors.progressTrack,
     height: theme.spacing.sm,
     width: '100%',
-    borderRadius: theme.spacing.xs,
+    borderRadius: theme.borders.borderRadiusFull,
     ...(minWidth && {
       minWidth
     }),
@@ -1376,7 +1518,7 @@ const getProgressIndicatorStyles = theme => {
     height: '100%',
     width: '100%',
     transition: 'transform 300ms linear',
-    borderRadius: theme.spacing.xs
+    borderRadius: theme.borders.borderRadiusFull
   };
   return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getProgressIndicatorStyles;");
 };
@@ -1407,7 +1549,7 @@ const getRootStyles = (theme, useNewShadows) => {
     alignItems: 'center',
     backgroundColor: theme.colors.backgroundSecondary,
     border: `1px solid ${theme.colors.borderDecorative}`,
-    borderRadius: theme.legacyBorders.borderRadiusMd,
+    borderRadius: theme.borders.borderRadiusSm,
     boxShadow: useNewShadows ? theme.shadows.lg : theme.general.shadowLow,
     display: 'flex',
     gap: theme.spacing.md,
@@ -1499,21 +1641,6 @@ var Toolbar = /*#__PURE__*/Object.freeze({
   ToggleItem: ToggleItem
 });
 
-const flattenData = function (data, expandedRows) {
-  let depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  let parentId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-  return data.reduce((acc, node) => {
-    acc.push({
-      ...node,
-      depth,
-      parentId
-    });
-    if (node.children && expandedRows[node.id]) {
-      acc.push(...flattenData(node.children, expandedRows, depth + 1, node.id));
-    }
-    return acc;
-  }, []);
-};
 function treeGridReducer(state, action) {
   switch (action.type) {
     case 'TOGGLE_ROW_EXPANDED':
@@ -1524,15 +1651,59 @@ function treeGridReducer(state, action) {
           [action.rowId]: !state.expandedRows[action.rowId]
         }
       };
-    case 'SET_ACTIVE_ROW':
+    case 'SET_ACTIVE_ROW_ID':
       return {
         ...state,
-        activeRowIndex: action.rowIndex
+        activeRowId: action.rowId
       };
     default:
       return state;
   }
 }
+function useDefaultTreeGridState(_ref) {
+  let {
+    initialState = {
+      expandedRows: {}
+    }
+  } = _ref;
+  const [state, dispatch] = useReducer(treeGridReducer, {
+    ...initialState,
+    activeRowId: null
+  });
+  const toggleRowExpanded = useCallback(rowId => {
+    dispatch({
+      type: 'TOGGLE_ROW_EXPANDED',
+      rowId
+    });
+  }, []);
+  const setActiveRowId = useCallback(rowId => {
+    dispatch({
+      type: 'SET_ACTIVE_ROW_ID',
+      rowId
+    });
+  }, []);
+  return {
+    ...state,
+    toggleRowExpanded,
+    setActiveRowId
+  };
+}
+
+const flattenData = function (data, expandedRows) {
+  let depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  let parentId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  return data.reduce((acc, node) => {
+    acc.push({
+      ...node,
+      depth,
+      parentId
+    });
+    if (node.children && expandedRows[node.id]) {
+      acc.push(...flattenData(node.children, expandedRows, depth + 1, node.id));
+    }
+    return acc;
+  }, []);
+};
 const findFocusableElementForCellIndex = (row, cellIndex) => {
   const cell = row.cells[cellIndex];
   return (cell === null || cell === void 0 ? void 0 : cell.querySelector('[tabindex], button, a, input, select, textarea')) || null;
@@ -1564,31 +1735,35 @@ const TreeGrid = _ref => {
     onRowKeyboardSelect,
     onCellKeyboardSelect,
     includeHeader = false,
-    initialState = {
-      expandedRows: {}
-    }
+    state: providedState
   } = _ref;
-  const [state, dispatch] = useReducer(treeGridReducer, {
-    ...initialState,
-    activeRowIndex: 0
+  const defaultState = useDefaultTreeGridState({
+    initialState: providedState && 'initialState' in providedState ? providedState.initialState : undefined
   });
+  const {
+    expandedRows,
+    activeRowId,
+    toggleRowExpanded,
+    setActiveRowId
+  } = providedState && !('initialState' in providedState) ? providedState : defaultState;
   const gridRef = useRef(null);
-  const flattenedData = useMemo(() => flattenData(data, state.expandedRows), [data, state.expandedRows]);
-  const toggleRowExpanded = useCallback(rowId => {
-    dispatch({
-      type: 'TOGGLE_ROW_EXPANDED',
-      rowId
-    });
-  }, []);
-  const focusRow = useCallback(rowIndex => {
+  const flattenedData = useMemo(() => flattenData(data, expandedRows), [data, expandedRows]);
+  const focusRow = useCallback(_ref2 => {
     var _gridRef$current;
+    let {
+      rowId,
+      rowIndex
+    } = _ref2;
     const row = (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.querySelector(`tbody tr:nth-child(${rowIndex + 1})`);
     row === null || row === void 0 || row.focus();
-    dispatch({
-      type: 'SET_ACTIVE_ROW',
-      rowIndex
-    });
-  }, []);
+    setActiveRowId(rowId);
+  }, [setActiveRowId]);
+  const focusElement = useCallback((element, rowIndex) => {
+    if (element) {
+      element.focus();
+      setActiveRowId(flattenedData[rowIndex].id);
+    }
+  }, [setActiveRowId, flattenedData]);
   const handleKeyDown = useCallback((event, rowIndex) => {
     const {
       key
@@ -1648,7 +1823,7 @@ const TreeGrid = _ref => {
         const currentRow = document.activeElement;
         if (direction === 'next') {
           if (flattenedData[rowIndex].children) {
-            if (!state.expandedRows[flattenedData[rowIndex].id]) {
+            if (!expandedRows[flattenedData[rowIndex].id]) {
               toggleRowExpanded(flattenedData[rowIndex].id);
             } else {
               const firstCell = currentRow.cells[0];
@@ -1661,7 +1836,7 @@ const TreeGrid = _ref => {
             }
           }
         } else {
-          if (state.expandedRows[flattenedData[rowIndex].id]) {
+          if (expandedRows[flattenedData[rowIndex].id]) {
             toggleRowExpanded(flattenedData[rowIndex].id);
           } else if (flattenedData[rowIndex].depth && flattenedData[rowIndex].depth > 0) {
             newRowIndex = flattenedData.findIndex(row => row.id === flattenedData[rowIndex].parentId);
@@ -1672,11 +1847,11 @@ const TreeGrid = _ref => {
 
       // If we're at the edge of the row, handle expanding/collapsing or moving to parent/child
       if (direction === 'next') {
-        if (flattenedData[rowIndex].children && !state.expandedRows[flattenedData[rowIndex].id]) {
+        if (flattenedData[rowIndex].children && !expandedRows[flattenedData[rowIndex].id]) {
           toggleRowExpanded(flattenedData[rowIndex].id);
         }
       } else {
-        if (state.expandedRows[flattenedData[rowIndex].id]) {
+        if (expandedRows[flattenedData[rowIndex].id]) {
           toggleRowExpanded(flattenedData[rowIndex].id);
         } else if (flattenedData[rowIndex].depth && flattenedData[rowIndex].depth > 0) {
           newRowIndex = flattenedData.findIndex(row => row.id === flattenedData[rowIndex].parentId);
@@ -1711,43 +1886,37 @@ const TreeGrid = _ref => {
     }
     if (newRowIndex !== rowIndex) {
       event.preventDefault();
-      focusRow(newRowIndex);
-    }
-  }, [state.expandedRows, columns, flattenedData, toggleRowExpanded, onRowKeyboardSelect, onCellKeyboardSelect, focusRow]);
-  const focusElement = (element, rowIndex) => {
-    if (element) {
-      element.focus();
-      dispatch({
-        type: 'SET_ACTIVE_ROW',
-        rowIndex
+      focusRow({
+        rowId: flattenedData[newRowIndex].id,
+        rowIndex: newRowIndex
       });
     }
-  };
-  const defaultRenderRow = useCallback(_ref2 => {
+  }, [expandedRows, columns, flattenedData, toggleRowExpanded, onRowKeyboardSelect, onCellKeyboardSelect, focusRow, focusElement]);
+  const defaultRenderRow = useCallback(_ref3 => {
     let {
       rowProps,
       children
-    } = _ref2;
+    } = _ref3;
     return jsx("tr", {
       ...rowProps,
       children: children
     });
   }, []);
-  const defaultRenderTable = useCallback(_ref3 => {
+  const defaultRenderTable = useCallback(_ref4 => {
     let {
       tableProps,
       children
-    } = _ref3;
+    } = _ref4;
     return jsx("table", {
       ...tableProps,
       children: children
     });
   }, []);
-  const defaultRenderHeader = useCallback(_ref4 => {
+  const defaultRenderHeader = useCallback(_ref5 => {
     let {
       columns,
       headerProps
-    } = _ref4;
+    } = _ref5;
     return jsx("thead", {
       ...headerProps,
       children: jsx("tr", {
@@ -1759,8 +1928,8 @@ const TreeGrid = _ref => {
     });
   }, []);
   const renderRowWrapper = useCallback((row, rowIndex) => {
-    const isExpanded = state.expandedRows[row.id];
-    const isKeyboardActive = rowIndex === state.activeRowIndex;
+    const isExpanded = expandedRows[row.id];
+    const isKeyboardActive = row.id === (activeRowId !== null && activeRowId !== void 0 ? activeRowId : flattenedData[0].id);
     const rowProps = {
       key: row.id,
       'data-id': row.id,
@@ -1797,7 +1966,7 @@ const TreeGrid = _ref => {
       rowProps,
       children
     });
-  }, [state.activeRowIndex, state.expandedRows, handleKeyDown, renderCell, renderRow, defaultRenderRow, toggleRowExpanded, columns]);
+  }, [activeRowId, flattenedData, expandedRows, handleKeyDown, renderCell, renderRow, defaultRenderRow, toggleRowExpanded, columns]);
   return (renderTable || defaultRenderTable)({
     tableProps: {
       role: 'treegrid',
@@ -1814,5 +1983,5 @@ const TreeGrid = _ref => {
   });
 };
 
-export { BANNER_MAX_HEIGHT, BANNER_MIN_HEIGHT, Banner, DatePicker, PillControl, PreviewCard, Progress, RangePicker, Toolbar, TreeGrid, getDatePickerQuickActionBasic, getRangeQuickActionsBasic };
+export { BANNER_MAX_HEIGHT, BANNER_MIN_HEIGHT, Banner, DatePicker, Listbox, PillControl, Progress, RangePicker, Toolbar, TreeGrid, getDatePickerQuickActionBasic, getRangeQuickActionsBasic };
 //# sourceMappingURL=development.js.map