@primer/react 38.30.1-rc.0d136c1b7 → 38.30.1-rc.34724960c

package/dist/SelectPanel/SelectPanel.js

@@ -1,885 +1,649 @@
-import { SearchIcon, XIcon, TriangleDownIcon } from '@primer/octicons-react';
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { FilteredActionList } from '../FilteredActionList/index.js';
-import { SelectPanelMessage } from './SelectPanelMessage.js';
-import { IconButton } from '../Button/IconButton.js';
-import { LinkButton } from '../Button/LinkButton.js';
-import { ButtonComponent } from '../Button/Button.js';
-import { useId } from '../hooks/useId.js';
-import { useProvidedStateOrCreate } from '../hooks/useProvidedStateOrCreate.js';
-import useSafeTimeout from '../hooks/useSafeTimeout.js';
-import '../FilteredActionList/FilteredActionListLoaders.js';
-import { announceFromElement, announce } from '@primer/live-region-element';
-import classes from './SelectPanel.module.css.js';
-import { clsx } from 'clsx';
-import { debounce } from '@github/mini-throttle';
-import { useResponsiveValue } from '../hooks/useResponsiveValue.js';
-import { Banner } from '../Banner/index.js';
-import { isAlphabetKey } from '../hooks/useMnemonics.js';
-import { useFormControlContext } from '../FormControl/_FormControlContext.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
-import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
-import { AnchoredOverlay } from '../AnchoredOverlay/AnchoredOverlay.js';
-import Heading from '../Heading/Heading.js';
-import { FilteredActionListLoadingTypes } from '../FilteredActionList/constants.js';
-
+import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
+import { useProvidedStateOrCreate } from "../hooks/useProvidedStateOrCreate.js";
+import { isAlphabetKey } from "../hooks/useMnemonics.js";
+import { useId as useId$1 } from "../hooks/useId.js";
+import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
+import useSafeTimeout from "../hooks/useSafeTimeout.js";
+import { IconButton } from "../Button/IconButton.js";
+import { LinkButton } from "../Button/LinkButton.js";
+import { ButtonComponent } from "../Button/Button.js";
+import { useResponsiveValue } from "../hooks/useResponsiveValue.js";
+import Heading from "../Heading/Heading.js";
+import { AnchoredOverlay } from "../AnchoredOverlay/AnchoredOverlay.js";
+import { Banner } from "../Banner/index.js";
+import { useFormControlContext } from "../FormControl/_FormControlContext.js";
+import { FilteredActionListLoadingTypes } from "../FilteredActionList/constants.js";
+import { FilteredActionList } from "../FilteredActionList/index.js";
+import SelectPanel_module_css_default from "./SelectPanel.module.css.js";
+import { SelectPanelMessage } from "./SelectPanelMessage.js";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { announce, announceFromElement } from "@primer/live-region-element";
+import { SearchIcon, TriangleDownIcon, XIcon } from "@primer/octicons-react";
+import { debounce } from "@github/mini-throttle";
+//#region src/SelectPanel/SelectPanel.tsx
 const SHORT_DELAY_MS = 500;
-const LONG_DELAY_MS = 1000;
+const LONG_DELAY_MS = 1e3;
 const EMPTY_MESSAGE = {
-  title: 'No items available',
-  description: ''
+	title: "No items available",
+	description: ""
 };
-const DefaultEmptyMessage = /*#__PURE__*/jsx(SelectPanelMessage, {
-  variant: "empty",
-  title: EMPTY_MESSAGE.title,
-  children: EMPTY_MESSAGE.description
+const DefaultEmptyMessage = /*#__PURE__*/ jsx(SelectPanelMessage, {
+	variant: "empty",
+	title: EMPTY_MESSAGE.title,
+	children: EMPTY_MESSAGE.description
 }, "empty-message");
 async function announceText(text, delayMs = SHORT_DELAY_MS) {
-  const liveRegion = document.querySelector('live-region');
-  liveRegion === null || liveRegion === void 0 ? void 0 : liveRegion.clear(); // clear previous announcements
-
-  await announce(text, {
-    delayMs,
-    from: liveRegion ? liveRegion : undefined // announce will create a liveRegion if it doesn't find one
-  });
+	const liveRegion = document.querySelector("live-region");
+	liveRegion === null || liveRegion === void 0 || liveRegion.clear();
+	await announce(text, {
+		delayMs,
+		from: liveRegion ? liveRegion : void 0
+	});
 }
 async function announceLoading() {
-  await announceText('Loading.');
+	await announceText("Loading.");
 }
-
-// onCancel is optional with variant=anchored, but required with variant=modal
-
 function isMultiSelectVariant(selected) {
-  return Array.isArray(selected);
+	return Array.isArray(selected);
 }
-const focusZoneSettings = {
-  // Let FilteredActionList handle focus zone
-  disabled: true
-};
-const closeButtonProps = {
-  'aria-label': 'Cancel and close'
-};
+const focusZoneSettings = { disabled: true };
+const closeButtonProps = { "aria-label": "Cancel and close" };
 const areItemsEqual = (itemA, itemB) => {
-  // prefer checking equivality by item.id
-  if (typeof itemA.id !== 'undefined') return itemA.id === itemB.id;else return itemA === itemB;
+	if (typeof itemA.id !== "undefined") return itemA.id === itemB.id;
+	else return itemA === itemB;
 };
 const doesItemsIncludeItem = (items, item) => {
-  return items.some(i => areItemsEqual(i, item));
+	return items.some((i) => areItemsEqual(i, item));
 };
-const defaultRenderAnchor = props => {
-  const {
-    children,
-    ...rest
-  } = props;
-  return /*#__PURE__*/jsx(ButtonComponent, {
-    trailingAction: TriangleDownIcon,
-    ...rest,
-    children: children
-  });
+const defaultRenderAnchor = (props) => {
+	const { children, ...rest } = props;
+	return /*#__PURE__*/ jsx(ButtonComponent, {
+		trailingAction: TriangleDownIcon,
+		...rest,
+		children
+	});
 };
 defaultRenderAnchor.displayName = "defaultRenderAnchor";
-function Panel({
-  open,
-  onOpenChange,
-  renderAnchor = defaultRenderAnchor,
-  anchorRef: externalAnchorRef,
-  placeholder,
-  placeholderText = 'Filter items',
-  inputLabel = placeholderText,
-  selected,
-  title = isMultiSelectVariant(selected) ? 'Select items' : 'Select an item',
-  subtitle,
-  onSelectedChange,
-  filterValue: externalFilterValue,
-  onFilterChange: externalOnFilterChange,
-  items,
-  footer,
-  textInputProps,
-  overlayProps,
-  loading,
-  initialLoadingType = 'spinner',
-  className,
-  height,
-  width,
-  id,
-  message,
-  notice,
-  onCancel,
-  variant = 'anchored',
-  secondaryAction,
-  showSelectedOptionsFirst = true,
-  disableFullscreenOnNarrow,
-  align,
-  showSelectAll = false,
-  focusPrependedElements,
-  virtualized,
-  displayInViewport,
-  cssAnchorPositioningSettings,
-  ...listProps
-}) {
-  var _listProps$groupMetad;
-  const titleId = useId();
-  const subtitleId = useId();
-  const [dataLoadedOnce, setDataLoadedOnce] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '');
-  const {
-    safeSetTimeout,
-    safeClearTimeout
-  } = useSafeTimeout();
-  const loadingDelayTimeoutId = useRef(null);
-  const loadingManagedInternally = loading === undefined;
-  const loadingManagedExternally = !loadingManagedInternally;
-  const [inputRef, setInputRef] = React.useState(null);
-  const [listContainerElement, setListContainerElement] = useState(null);
-  const [needsNoItemsAnnouncement, setNeedsNoItemsAnnouncement] = useState(false);
-  const isNarrowScreenSize = useResponsiveValue({
-    narrow: true,
-    regular: false,
-    wide: false
-  }, false);
-  const [selectedOnSort, setSelectedOnSort] = useState([]);
-  const initialHeightRef = useRef(0);
-  const initialScaleRef = useRef(1);
-  const noticeRef = useRef(null);
-  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
-  const [availablePanelHeight, setAvailablePanelHeight] = useState(undefined);
-  const KEYBOARD_VISIBILITY_THRESHOLD = 10;
-  const featureFlagFullScreenOnNarrow = useFeatureFlag('primer_react_select_panel_fullscreen_on_narrow');
-  const usingFullScreenOnNarrow = disableFullscreenOnNarrow ? false : featureFlagFullScreenOnNarrow;
-  const shouldOrderSelectedFirst = useFeatureFlag('primer_react_select_panel_order_selected_at_top') && showSelectedOptionsFirst;
-  const {
-    isReferenced,
-    labelId
-  } = useFormControlContext();
-  const selectedValueId = id ? `${id}-selected-value` : undefined;
-
-  // Single select modals work differently, they have an intermediate state where the user has selected an item but
-  // has not yet confirmed the selection. This is the only time the user can cancel the selection.
-  const isSingleSelectModal = variant === 'modal' && !isMultiSelectVariant(selected);
-  const [intermediateSelected, setIntermediateSelected] = useState(isSingleSelectModal ? selected : undefined);
-
-  // Reset the intermediate selected item when the panel is open/closed
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect, react-you-might-not-need-an-effect/no-derived-state
-    setIntermediateSelected(isSingleSelectModal ? selected : undefined);
-  }, [isSingleSelectModal, open, selected]);
-  const onListContainerRefChanged = useCallback(node => {
-    setListContainerElement(node);
-    if (!node && needsNoItemsAnnouncement) {
-      setNeedsNoItemsAnnouncement(false);
-    }
-  }, [needsNoItemsAnnouncement]);
-  const onInputRefChanged = useCallback(ref => {
-    setInputRef(ref);
-  }, [setInputRef]);
-  const resetSort = useCallback(() => {
-    if (isMultiSelectVariant(selected)) {
-      setSelectedOnSort(selected);
-    } else if (selected) {
-      setSelectedOnSort([selected]);
-    } else {
-      setSelectedOnSort([]);
-    }
-  }, [selected]);
-  const onFilterChange = useCallback((value, e) => {
-    if (loadingManagedInternally) {
-      if (loadingDelayTimeoutId.current) {
-        safeClearTimeout(loadingDelayTimeoutId.current);
-      }
-      if (dataLoadedOnce) {
-        // If data has already been loaded once, delay the spinner a bit. This also helps
-        // not show and then immediately hide the spinner if items are loaded quickly, i.e.
-        // not async.
-
-        loadingDelayTimeoutId.current = safeSetTimeout(() => {
-          setIsLoading(true);
-          announceLoading();
-        }, LONG_DELAY_MS);
-      } else {
-        // If this is the first data load and there are no items, show the loading spinner
-        // immediately
-
-        if (items.length === 0) {
-          setIsLoading(true);
-        }
-
-        // We still want to announce if loading is taking too long
-        loadingDelayTimeoutId.current = safeSetTimeout(() => {
-          announceLoading();
-        }, LONG_DELAY_MS);
-      }
-    }
-    externalOnFilterChange(value, e);
-    setInternalFilterValue(value);
-    if (!value) {
-      resetSort();
-    }
-  }, [loadingManagedInternally, externalOnFilterChange, setInternalFilterValue, dataLoadedOnce, safeSetTimeout, safeClearTimeout, items.length, resetSort]);
-
-  // Pre-compute a Set of item IDs in the current filtered view for O(1) lookups
-  const itemsInViewSet = useMemo(() => {
-    const set = new Set();
-    for (const item of items) {
-      if (item.id !== undefined) {
-        set.add(item.id);
-      } else {
-        set.add(item);
-      }
-    }
-    return set;
-  }, [items]);
-  const handleSelectAllChange = useCallback(checked => {
-    // Exit early if not in multi-select mode
-    if (!isMultiSelectVariant(selected)) {
-      return;
-    }
-    const multiSelectOnChange = onSelectedChange;
-    const selectedArray = selected;
-
-    // Use Set for O(1) lookup instead of O(n) items.some()
-    const selectedItemsNotInFilteredView = selectedArray.filter(selectedItem => {
-      if (selectedItem.id !== undefined) {
-        return !itemsInViewSet.has(selectedItem.id);
-      }
-      return !itemsInViewSet.has(selectedItem);
-    });
-    if (checked) {
-      multiSelectOnChange([...selectedItemsNotInFilteredView, ...items]);
-    } else {
-      multiSelectOnChange(selectedItemsNotInFilteredView);
-    }
-  }, [items, itemsInViewSet, onSelectedChange, selected]);
-
-  // disable body scroll when the panel is open in modal mode or on narrow screens
-  useEffect(() => {
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if (open && (variant === 'modal' || isNarrowScreenSize && usingFullScreenOnNarrow)) {
-      const bodyOverflowStyle = document.body.style.overflow || '';
-      // If the body is already set to overflow: hidden, it likely means
-      // that there is already a modal open. In that case, we should bail
-      // so we don't re-enable scroll after the second dialog is closed.
-      if (bodyOverflowStyle === 'hidden') {
-        return;
-      }
-      document.body.style.overflow = 'hidden';
-      return () => {
-        document.body.style.overflow = bodyOverflowStyle;
-      };
-    }
-  }, [isNarrowScreenSize, open, usingFullScreenOnNarrow, variant]);
-  useEffect(() => {
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if (open) {
-      // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-      if (items.length === 0 && !(isLoading || loading)) {
-        // we need to wait for the listContainerElement to disappear before announcing no items, otherwise it will be interrupted
-        // eslint-disable-next-line react-hooks/set-state-in-effect, react-you-might-not-need-an-effect/no-adjust-state-on-prop-change
-        setNeedsNoItemsAnnouncement(true);
-      }
-    }
-
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if (loadingManagedExternally) {
-      // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-      if (items.length > 0) {
-        // eslint-disable-next-line react-you-might-not-need-an-effect/no-adjust-state-on-prop-change
-        setDataLoadedOnce(true);
-      }
-      return;
-    }
-
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if (isLoading || items.length > 0) {
-      // eslint-disable-next-line react-you-might-not-need-an-effect/no-adjust-state-on-prop-change
-      setIsLoading(false);
-      // eslint-disable-next-line react-you-might-not-need-an-effect/no-adjust-state-on-prop-change
-      setDataLoadedOnce(true);
-    }
-    if (loadingDelayTimeoutId.current) {
-      safeClearTimeout(loadingDelayTimeoutId.current);
-    }
-
-    // Only fire this effect if items have changed
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items]);
-  useEffect(() => {
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
-      const ref = inputRef.current;
-
-      // We would normally expect AnchoredOverlay's focus trap to automatically focus the input,
-      // but for some reason the ref isn't populated until _after_ the panel is open, which is
-      // too late. So, we focus manually here.
-      // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-      if (open) {
-        ref.focus();
-      }
-    }
-  }, [inputRef, open]);
-
-  // Manage loading announcements when loadingManagedExternally
-  useEffect(() => {
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if (loadingManagedExternally) {
-      if (isLoading) {
-        // Delay the announcement a bit, just in case the loading is quick
-        loadingDelayTimeoutId.current = safeSetTimeout(() => {
-          announceLoading();
-        }, LONG_DELAY_MS);
-      } else {
-        // If loading is done, we can clear the loading announcement
-        if (loadingDelayTimeoutId.current) {
-          safeClearTimeout(loadingDelayTimeoutId.current);
-        }
-      }
-    }
-  }, [isLoading, loadingManagedExternally, safeSetTimeout, safeClearTimeout]);
-
-  // Populate panel with items on first open
-  useEffect(() => {
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if (loadingManagedExternally) return;
-
-    // If data was already loaded once, do nothing
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if (dataLoadedOnce) return;
-
-    // Only load data when the panel is open
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if (open) {
-      // Only trigger filter change event if there are no items
-      // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-      if (items.length === 0) {
-        // Trigger filter event to populate panel on first open
-        // eslint-disable-next-line react-hooks/set-state-in-effect
-        onFilterChange(filterValue, null);
-      }
-    }
-  }, [open, dataLoadedOnce, onFilterChange, filterValue, items, loadingManagedExternally, listContainerElement]);
-  useEffect(() => {
-    if (!window.visualViewport || !open || !isNarrowScreenSize) {
-      return;
-    }
-    initialHeightRef.current = window.visualViewport.height;
-    initialScaleRef.current = window.visualViewport.scale;
-    const handleViewportChange = debounce(() => {
-      if (window.visualViewport) {
-        const currentScale = window.visualViewport.scale;
-        const isZooming = currentScale !== initialScaleRef.current;
-        if (!isZooming) {
-          const currentHeight = window.visualViewport.height;
-          const keyboardVisible = initialHeightRef.current - currentHeight > KEYBOARD_VISIBILITY_THRESHOLD;
-          setIsKeyboardVisible(keyboardVisible);
-          setAvailablePanelHeight(keyboardVisible ? currentHeight : undefined);
-        }
-      }
-    }, 100);
-
-    // keeping this check to satisfy typescript but need eslint to ignore redundancy rule
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (window.visualViewport) {
-      // Using visualViewport to more reliably detect viewport changes across different browsers, which specifically requires these listeners
-      // eslint-disable-next-line github/prefer-observers
-      window.visualViewport.addEventListener('resize', handleViewportChange);
-      // eslint-disable-next-line github/prefer-observers
-      window.visualViewport.addEventListener('scroll', handleViewportChange);
-    }
-    return () => {
-      if (window.visualViewport) {
-        window.visualViewport.removeEventListener('resize', handleViewportChange);
-        window.visualViewport.removeEventListener('scroll', handleViewportChange);
-      }
-      handleViewportChange.cancel();
-    };
-  }, [open, isNarrowScreenSize]);
-  useEffect(() => {
-    const announceNotice = async () => {
-      if (!noticeRef.current) return;
-      const liveRegion = document.querySelector('live-region');
-      liveRegion === null || liveRegion === void 0 ? void 0 : liveRegion.clear();
-      await announceFromElement(noticeRef.current, {
-        from: liveRegion ? liveRegion : undefined
-      });
-    };
-
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if (open && notice) {
-      announceNotice();
-    }
-  }, [notice, open]);
-  const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
-  const onOpen = useCallback(gesture => onOpenChange(true, gesture), [onOpenChange]);
-  const onCancelRequested = useCallback(() => {
-    onOpenChange(false, 'cancel');
-  }, [onOpenChange]);
-  const onClose = useCallback(gesture => {
-    // Clicking outside should cancel the selection only on modals
-    if (variant === 'modal' && gesture === 'click-outside') {
-      onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-    }
-    if (gesture === 'close') {
-      onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-      onCancelRequested();
-    } else {
-      onOpenChange(false, gesture);
-    }
-  }, [onOpenChange, variant, onCancel, onCancelRequested]);
-  const renderMenuAnchor = useMemo(() => {
-    if (renderAnchor === null) {
-      return null;
-    }
-    const selectedItems = Array.isArray(selected) ? selected : [...(selected ? [selected] : [])];
-    const selectedValueText = selectedItems.length ? selectedItems.map(item => item.text).join(', ') : placeholder;
-    const shouldAutoWireLabel = isReferenced === false && Boolean(labelId) && Boolean(selectedValueId);
-    return props => {
-      return renderAnchor({
-        ...props,
-        ...(shouldAutoWireLabel ? {
-          'aria-labelledby': [labelId, selectedValueId].filter(Boolean).join(' ')
-        } : {}),
-        children: shouldAutoWireLabel ? /*#__PURE__*/jsx("span", {
-          id: selectedValueId,
-          children: selectedValueText
-        }) : selectedValueText
-      });
-    };
-  }, [placeholder, renderAnchor, selected, isReferenced, labelId, selectedValueId]);
-
-  // Pre-compute a Set of selected item IDs/references for O(1) lookups
-  // This optimizes isItemCurrentlySelected from O(m) to O(1) per call
-  const selectedItemsSet = useMemo(() => {
-    const set = new Set();
-    if (isMultiSelectVariant(selected)) {
-      for (const item of selected) {
-        if (item.id !== undefined) {
-          set.add(item.id);
-        } else {
-          set.add(item);
-        }
-      }
-    }
-    return set;
-  }, [selected]);
-  const isItemCurrentlySelected = useCallback(item => {
-    // For multi-select, use the pre-computed Set for O(1) lookup
-    if (isMultiSelectVariant(selected)) {
-      if (item.id !== undefined) {
-        return selectedItemsSet.has(item.id);
-      }
-      return selectedItemsSet.has(item);
-    }
-
-    // For single-select modal, there is an intermediate state when the user has selected
-    // an item but has not yet saved the selection. We need to check for this state.
-    if (isSingleSelectModal) {
-      return (intermediateSelected === null || intermediateSelected === void 0 ? void 0 : intermediateSelected.id) !== undefined ? intermediateSelected.id === item.id : intermediateSelected === item;
-    }
-
-    // For single-select anchored, we just need to check if the item is the selected item
-    return (selected === null || selected === void 0 ? void 0 : selected.id) !== undefined ? selected.id === item.id : selected === item;
-  }, [selected, selectedItemsSet, intermediateSelected, isSingleSelectModal]);
-  const itemsToRender = useMemo(() => {
-    // Pre-compute a Set of selected item IDs/references for O(1) lookups during sorting
-    // This avoids O(m * k) work per comparison in the sort function
-    const selectedOnSortSet = new Set();
-    for (const item of selectedOnSort) {
-      if (item.id !== undefined) {
-        selectedOnSortSet.add(item.id);
-      } else {
-        selectedOnSortSet.add(item);
-      }
-    }
-    const isSelectedForSort = item => {
-      if (item.id !== undefined) {
-        return selectedOnSortSet.has(item.id);
-      }
-      return selectedOnSortSet.has(item);
-    };
-    return items.map(item => {
-      return {
-        ...item,
-        role: 'option',
-        id: item.id,
-        selected: 'selected' in item && item.selected === undefined ? undefined : isItemCurrentlySelected(item),
-        onAction: (itemFromAction, event) => {
-          var _item$onAction;
-          (_item$onAction = item.onAction) === null || _item$onAction === void 0 ? void 0 : _item$onAction.call(item, itemFromAction, event);
-          if (event.defaultPrevented) {
-            return;
-          }
-          if (isMultiSelectVariant(selected)) {
-            const otherSelectedItems = selected.filter(selectedItem => !areItemsEqual(selectedItem, item));
-            const newSelectedItems = doesItemsIncludeItem(selected, item) ? otherSelectedItems : [...otherSelectedItems, item];
-            const multiSelectOnChange = onSelectedChange;
-            multiSelectOnChange(newSelectedItems);
-            return;
-          }
-          if (isSingleSelectModal) {
-            if ((intermediateSelected === null || intermediateSelected === void 0 ? void 0 : intermediateSelected.id) === item.id) {
-              // if the item is already selected, we need to unselect it
-              setIntermediateSelected(undefined);
-            } else {
-              setIntermediateSelected(item);
-            }
-            return;
-          }
-          // single select anchored, direct save on click
-          const singleSelectOnChange = onSelectedChange;
-          singleSelectOnChange(item === selected ? undefined : item);
-          onClose('selection');
-        }
-      };
-    }).sort((itemA, itemB) => {
-      if (shouldOrderSelectedFirst) {
-        const itemASelected = isSelectedForSort(itemA);
-        const itemBSelected = isSelectedForSort(itemB);
-
-        // order selected items first
-        if (itemASelected && !itemBSelected) {
-          return -1;
-        } else if (!itemASelected && itemBSelected) {
-          return 1;
-        }
-      }
-      return 0;
-    });
-  }, [onClose, onSelectedChange, items, selected, isItemCurrentlySelected, isSingleSelectModal, intermediateSelected, shouldOrderSelectedFirst, selectedOnSort]);
-
-  // Track previous items and reset sort when items first load
-  const prevItemsRef = useRef(items);
-  useEffect(() => {
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if (prevItemsRef.current !== items) {
-      // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-      if (prevItemsRef.current.length === 0 && items.length > 0) {
-        resetSort();
-      }
-      prevItemsRef.current = items;
-    }
-  }, [items, resetSort]);
-
-  // Reset sort when panel opens
-  const prevOpenRef = useRef(open);
-  useEffect(() => {
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if (prevOpenRef.current !== open) {
-      resetSort();
-      prevOpenRef.current = open;
-    }
-  }, [open, resetSort]);
-  const focusTrapSettings = useMemo(() => ({
-    initialFocusRef: inputRef || undefined
-  }), [inputRef]);
-  const extendedTextInputProps = useMemo(() => {
-    return {
-      className: classes.TextInput,
-      contrast: true,
-      leadingVisual: SearchIcon,
-      'aria-label': inputLabel,
-      ...textInputProps
-    };
-  }, [inputLabel, textInputProps]);
-  const loadingType = () => {
-    if (dataLoadedOnce) {
-      return FilteredActionListLoadingTypes.input;
-    } else {
-      if (initialLoadingType === 'spinner') {
-        return FilteredActionListLoadingTypes.bodySpinner;
-      } else {
-        return FilteredActionListLoadingTypes.bodySkeleton;
-      }
-    }
-  };
-  function getMessage() {
-    if (items.length === 0 && !message) {
-      return DefaultEmptyMessage;
-    } else if (message) {
-      return /*#__PURE__*/jsx(SelectPanelMessage, {
-        title: message.title,
-        variant: message.variant,
-        icon: message.icon,
-        action: message.action,
-        children: message.body
-      });
-    }
-  }
-
-  // We add permanent save and cancel buttons on:
-  // - modals
-  const showPermanentCancelSaveButtons = variant === 'modal';
-
-  // The next two could be collapsed, left them separate for readability
-
-  // We add a responsive save and cancel button on:
-  // - anchored panels with multi select if there is onCancel
-  const showResponsiveCancelSaveButtons = variant !== 'modal' && usingFullScreenOnNarrow && isMultiSelectVariant(selected) && onCancel !== undefined;
-
-  // The responsive save and close button is only covering a very specific case:
-  // - anchored panel with multi select if there is no onCancel.
-  // This variant should disappear in the future, once onCancel is required,
-  // but for now we need to support it so there is a user friendly way to close the panel.
-  const showResponsiveSaveAndCloseButton = variant !== 'modal' && usingFullScreenOnNarrow && isMultiSelectVariant(selected) && onCancel === undefined;
-
-  // If there is any element in the footer, we render it.
-  const renderFooter = secondaryAction !== undefined || showPermanentCancelSaveButtons || showResponsiveSaveAndCloseButton || showResponsiveCancelSaveButtons;
-
-  // If there's any permanent elements in the footer, we show it always.
-  // The save button is only shown on small screens.
-  const displayFooter = secondaryAction !== undefined || showPermanentCancelSaveButtons ? 'always' : showResponsiveSaveAndCloseButton || showResponsiveCancelSaveButtons ? 'only-small' : undefined;
-  const stretchSecondaryAction = showResponsiveSaveAndCloseButton || showResponsiveCancelSaveButtons ? 'only-big' : showPermanentCancelSaveButtons ? 'never' : 'always';
-  const stretchSaveButton = showResponsiveSaveAndCloseButton && secondaryAction === undefined ? 'only-small' : 'never';
-
-  /*
-   * SelectPanel uses two close button implementations for different use cases:
-   *
-   * 1. AnchoredOverlay close button - Enabled on narrow screens (showXCloseIcon logic)
-   *
-   * 2. SelectPanel modal close button - Used for modal variant on wider screens
-   *    (variant === 'modal' && !isNarrowScreenSize logic below)
-   *
-   * The dual approach handles different responsive behaviors: AnchoredOverlay manages
-   * close functionality for narrow fullscreen, while SelectPanel handles modal close on desktop.
-   */
-  const showXCloseIcon = (onCancel !== undefined || !isMultiSelectVariant(selected)) && usingFullScreenOnNarrow;
-  const currentResponsiveVariant = useResponsiveValue(usingFullScreenOnNarrow ? {
-    regular: 'anchored',
-    narrow: 'fullscreen'
-  } : undefined, 'anchored');
-  const preventBubbling = useCallback(event => {
-    var _overlayProps$onKeyDo;
-    overlayProps === null || overlayProps === void 0 ? void 0 : (_overlayProps$onKeyDo = overlayProps.onKeyDown) === null || _overlayProps$onKeyDo === void 0 ? void 0 : _overlayProps$onKeyDo.call(overlayProps, event);
-
-    // skip if a TextInput has focus
-    const activeElement = document.activeElement;
-    if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') return;
-
-    // skip if used with modifier to preserve shortcuts like ⌘ + F
-    const hasModifier = event.ctrlKey || event.altKey || event.metaKey;
-    if (hasModifier) return;
-
-    // skip if it's not the forward slash or an alphabet key
-    if (event.key !== '/' && !isAlphabetKey(event.nativeEvent)) {
-      return;
-    }
-
-    // if this is a typeahead event, don't propagate outside of menu
-    event.stopPropagation();
-  }, [overlayProps]);
-  const mergedOverlayProps = useMemo(() => ({
-    role: 'dialog',
-    'aria-labelledby': titleId,
-    'aria-describedby': subtitle ? subtitleId : undefined,
-    ...overlayProps,
-    ...(variant === 'modal' ? {
-      top: '50vh',
-      left: '50vw',
-      anchorSide: undefined
-    } : {}),
-    style: {
-      transform: variant === 'modal' ? 'translate(-50%, -50%)' : undefined,
-      ...(isKeyboardVisible ? {
-        maxHeight: availablePanelHeight !== undefined ? `${availablePanelHeight}px` : 'auto'
-      } : {})
-    },
-    onKeyDown: preventBubbling
-  }), [titleId, subtitle, subtitleId, overlayProps, variant, isKeyboardVisible, availablePanelHeight, preventBubbling]);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(AnchoredOverlay, {
-      renderAnchor: renderMenuAnchor,
-      anchorRef: anchorRef,
-      align: align,
-      open: open,
-      onOpen: onOpen,
-      onClose: onClose,
-      overlayProps: mergedOverlayProps,
-      focusTrapSettings: focusTrapSettings,
-      focusZoneSettings: focusZoneSettings,
-      height: height,
-      width: width,
-      anchorId: id,
-      variant: usingFullScreenOnNarrow ? {
-        regular: 'anchored',
-        narrow: 'fullscreen'
-      } : undefined,
-      pinPosition: !height,
-      className: classes.Overlay,
-      displayCloseButton: showXCloseIcon,
-      closeButtonProps: closeButtonProps,
-      displayInViewport: displayInViewport
-      // Modal variant is positioned manually so native CSS anchor positioning must not be used
-      // Other cssAnchorPositioningSettings (e.g. fallbackStrategy) may be passed in and are forwarded here
-      ,
-      cssAnchorPositioningSettings: {
-        ...cssAnchorPositioningSettings,
-        disable: variant === 'modal' || (cssAnchorPositioningSettings === null || cssAnchorPositioningSettings === void 0 ? void 0 : cssAnchorPositioningSettings.disable)
-      },
-      children: /*#__PURE__*/jsxs("div", {
-        className: classes.Wrapper,
-        "data-variant": variant,
-        "data-component": "SelectPanel",
-        children: [/*#__PURE__*/jsxs("div", {
-          className: classes.Header,
-          "data-variant": currentResponsiveVariant,
-          "data-component": "SelectPanel.Header",
-          children: [/*#__PURE__*/jsxs("div", {
-            children: [/*#__PURE__*/jsx(Heading, {
-              as: "h1",
-              id: titleId,
-              className: classes.Title,
-              "data-component": "SelectPanel.Title",
-              children: title
-            }), subtitle ? /*#__PURE__*/jsx("div", {
-              id: subtitleId,
-              className: classes.Subtitle,
-              "data-component": "SelectPanel.Subtitle",
-              children: subtitle
-            }) : null]
-          }), variant === 'modal' && !isNarrowScreenSize ? /*#__PURE__*/jsx(IconButton, {
-            type: "button",
-            variant: "invisible",
-            icon: XIcon,
-            "aria-label": "Cancel and close",
-            className: classes.ResponsiveCloseButton,
-            "data-component": "SelectPanel.CloseButton",
-            onClick: () => {
-              onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-              onCancelRequested();
-            }
-          }) : null]
-        }), notice && /*#__PURE__*/jsx("div", {
-          ref: noticeRef,
-          "data-component": "SelectPanel.Notice",
-          children: /*#__PURE__*/jsx(Banner, {
-            variant: notice.variant === 'error' ? 'critical' : notice.variant,
-            description: notice.text,
-            title: "Notice",
-            hideTitle: true,
-            className: classes.Notice,
-            layout: "compact"
-          })
-        }), /*#__PURE__*/jsx(FilteredActionList, {
-          filterValue: filterValue,
-          onFilterChange: onFilterChange,
-          onListContainerRefChanged: onListContainerRefChanged
-          // @ts-expect-error it needs a non nullable ref
-          ,
-          onInputRefChanged: onInputRefChanged,
-          placeholderText: placeholderText,
-          ...listProps,
-          variant: (_listProps$groupMetad = listProps.groupMetadata) !== null && _listProps$groupMetad !== void 0 && _listProps$groupMetad.length ? 'horizontal-inset' : 'inset',
-          role: "listbox"
-          // browsers give aria-labelledby precedence over aria-label so we need to make sure
-          // we don't accidentally override props.aria-label
-          ,
-          "aria-labelledby": listProps['aria-label'] ? undefined : titleId,
-          "aria-multiselectable": isMultiSelectVariant(selected) ? 'true' : 'false',
-          selectionVariant: isSingleSelectModal ? 'radio' : isMultiSelectVariant(selected) ? 'multiple' : 'single',
-          items: itemsToRender,
-          textInputProps: extendedTextInputProps,
-          loading: loading || isLoading && !message,
-          loadingType: loadingType(),
-          onSelectAllChange: showSelectAll ? handleSelectAllChange : undefined
-          // hack because the deprecated ActionList does not support this prop
-          ,
-          message: getMessage(),
-          messageText: {
-            title: (message === null || message === void 0 ? void 0 : message.title) || EMPTY_MESSAGE.title,
-            description: typeof (message === null || message === void 0 ? void 0 : message.body) === 'string' ? message.body : EMPTY_MESSAGE.description
-          },
-          fullScreenOnNarrow: usingFullScreenOnNarrow,
-          className: clsx(className, classes.FilteredActionList),
-          focusPrependedElements: focusPrependedElements,
-          virtualized: virtualized
-        }), footer ? /*#__PURE__*/jsx("div", {
-          className: classes.Footer,
-          "data-component": "SelectPanel.Footer",
-          children: footer
-        }) : renderFooter ? /*#__PURE__*/jsxs("div", {
-          "data-display-footer": displayFooter,
-          "data-stretch-secondary-action": stretchSecondaryAction,
-          "data-stretch-save-button": stretchSaveButton,
-          className: clsx(classes.Footer, classes.ResponsiveFooter),
-          "data-component": "SelectPanel.Footer",
-          children: [/*#__PURE__*/jsx("div", {
-            "data-stretch-secondary-action": stretchSecondaryAction,
-            className: classes.SecondaryAction,
-            "data-component": "SelectPanel.SecondaryAction",
-            children: secondaryAction
-          }), showPermanentCancelSaveButtons || showResponsiveCancelSaveButtons ? /*#__PURE__*/jsxs("div", {
-            "data-stretch-save-button": stretchSaveButton,
-            className: clsx(classes.CancelSaveButtons, {
-              [classes.ResponsiveSaveButton]: showResponsiveCancelSaveButtons
-            }),
-            children: [/*#__PURE__*/jsx(ButtonComponent, {
-              size: "medium",
-              "data-component": "SelectPanel.CancelButton",
-              onClick: () => {
-                onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-                onCancelRequested();
-              },
-              children: "Cancel"
-            }), /*#__PURE__*/jsx(ButtonComponent, {
-              block: onCancel === undefined,
-              variant: "primary",
-              size: "medium",
-              "data-component": "SelectPanel.SaveButton",
-              onClick: () => {
-                if (isSingleSelectModal) {
-                  const singleSelectOnChange = onSelectedChange;
-                  singleSelectOnChange(intermediateSelected);
-                }
-                onClose(variant === 'modal' ? 'selection' : 'click-outside');
-              },
-              children: "Save"
-            })]
-          }) : null, showResponsiveSaveAndCloseButton ? /*#__PURE__*/jsx("div", {
-            className: classes.ResponsiveSaveButton,
-            "data-stretch-save-button": stretchSaveButton,
-            children: /*#__PURE__*/jsx(ButtonComponent, {
-              block: true,
-              variant: "primary",
-              size: "medium",
-              "data-component": "SelectPanel.SaveAndCloseButton",
-              onClick: () => {
-                onClose('click-outside');
-              },
-              children: "Save and close"
-            })
-          }) : null]
-        }) : null]
-      })
-    }), variant === 'modal' && open ? /*#__PURE__*/jsx("div", {
-      className: classes.Backdrop,
-      "data-component": "SelectPanel.Backdrop"
-    }) : null]
-  });
+function Panel({ open, onOpenChange, renderAnchor = defaultRenderAnchor, anchorRef: externalAnchorRef, placeholder, placeholderText = "Filter items", inputLabel = placeholderText, selected, title = isMultiSelectVariant(selected) ? "Select items" : "Select an item", subtitle, onSelectedChange, filterValue: externalFilterValue, onFilterChange: externalOnFilterChange, items, footer, textInputProps, overlayProps, loading, initialLoadingType = "spinner", className, height, width, id, message, notice, onCancel, variant = "anchored", secondaryAction, showSelectedOptionsFirst = true, disableFullscreenOnNarrow, align, showSelectAll = false, focusPrependedElements, virtualized, displayInViewport, cssAnchorPositioningSettings, ...listProps }) {
+	var _listProps$groupMetad;
+	const titleId = useId$1();
+	const subtitleId = useId$1();
+	const [dataLoadedOnce, setDataLoadedOnce] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
+	const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, void 0, "");
+	const { safeSetTimeout, safeClearTimeout } = useSafeTimeout();
+	const loadingDelayTimeoutId = useRef(null);
+	const loadingManagedInternally = loading === void 0;
+	const loadingManagedExternally = !loadingManagedInternally;
+	const [inputRef, setInputRef] = React.useState(null);
+	const [listContainerElement, setListContainerElement] = useState(null);
+	const [needsNoItemsAnnouncement, setNeedsNoItemsAnnouncement] = useState(false);
+	const isNarrowScreenSize = useResponsiveValue({
+		narrow: true,
+		regular: false,
+		wide: false
+	}, false);
+	const [selectedOnSort, setSelectedOnSort] = useState([]);
+	const initialHeightRef = useRef(0);
+	const initialScaleRef = useRef(1);
+	const noticeRef = useRef(null);
+	const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
+	const [availablePanelHeight, setAvailablePanelHeight] = useState(void 0);
+	const KEYBOARD_VISIBILITY_THRESHOLD = 10;
+	const featureFlagFullScreenOnNarrow = useFeatureFlag("primer_react_select_panel_fullscreen_on_narrow");
+	const usingFullScreenOnNarrow = disableFullscreenOnNarrow ? false : featureFlagFullScreenOnNarrow;
+	const shouldOrderSelectedFirst = useFeatureFlag("primer_react_select_panel_order_selected_at_top") && showSelectedOptionsFirst;
+	const { isReferenced, labelId } = useFormControlContext();
+	const selectedValueId = id ? `${id}-selected-value` : void 0;
+	const isSingleSelectModal = variant === "modal" && !isMultiSelectVariant(selected);
+	const [intermediateSelected, setIntermediateSelected] = useState(isSingleSelectModal ? selected : void 0);
+	useEffect(() => {
+		setIntermediateSelected(isSingleSelectModal ? selected : void 0);
+	}, [
+		isSingleSelectModal,
+		open,
+		selected
+	]);
+	const onListContainerRefChanged = useCallback((node) => {
+		setListContainerElement(node);
+		if (!node && needsNoItemsAnnouncement) setNeedsNoItemsAnnouncement(false);
+	}, [needsNoItemsAnnouncement]);
+	const onInputRefChanged = useCallback((ref) => {
+		setInputRef(ref);
+	}, [setInputRef]);
+	const resetSort = useCallback(() => {
+		if (isMultiSelectVariant(selected)) setSelectedOnSort(selected);
+		else if (selected) setSelectedOnSort([selected]);
+		else setSelectedOnSort([]);
+	}, [selected]);
+	const onFilterChange = useCallback((value, e) => {
+		if (loadingManagedInternally) {
+			if (loadingDelayTimeoutId.current) safeClearTimeout(loadingDelayTimeoutId.current);
+			if (dataLoadedOnce) loadingDelayTimeoutId.current = safeSetTimeout(() => {
+				setIsLoading(true);
+				announceLoading();
+			}, LONG_DELAY_MS);
+			else {
+				if (items.length === 0) setIsLoading(true);
+				loadingDelayTimeoutId.current = safeSetTimeout(() => {
+					announceLoading();
+				}, LONG_DELAY_MS);
+			}
+		}
+		externalOnFilterChange(value, e);
+		setInternalFilterValue(value);
+		if (!value) resetSort();
+	}, [
+		loadingManagedInternally,
+		externalOnFilterChange,
+		setInternalFilterValue,
+		dataLoadedOnce,
+		safeSetTimeout,
+		safeClearTimeout,
+		items.length,
+		resetSort
+	]);
+	const itemsInViewSet = useMemo(() => {
+		const set = /* @__PURE__ */ new Set();
+		for (const item of items) if (item.id !== void 0) set.add(item.id);
+		else set.add(item);
+		return set;
+	}, [items]);
+	const handleSelectAllChange = useCallback((checked) => {
+		if (!isMultiSelectVariant(selected)) return;
+		const multiSelectOnChange = onSelectedChange;
+		const selectedItemsNotInFilteredView = selected.filter((selectedItem) => {
+			if (selectedItem.id !== void 0) return !itemsInViewSet.has(selectedItem.id);
+			return !itemsInViewSet.has(selectedItem);
+		});
+		if (checked) multiSelectOnChange([...selectedItemsNotInFilteredView, ...items]);
+		else multiSelectOnChange(selectedItemsNotInFilteredView);
+	}, [
+		items,
+		itemsInViewSet,
+		onSelectedChange,
+		selected
+	]);
+	useEffect(() => {
+		if (open && (variant === "modal" || isNarrowScreenSize && usingFullScreenOnNarrow)) {
+			const bodyOverflowStyle = document.body.style.overflow || "";
+			if (bodyOverflowStyle === "hidden") return;
+			document.body.style.overflow = "hidden";
+			return () => {
+				document.body.style.overflow = bodyOverflowStyle;
+			};
+		}
+	}, [
+		isNarrowScreenSize,
+		open,
+		usingFullScreenOnNarrow,
+		variant
+	]);
+	useEffect(() => {
+		if (open) {
+			if (items.length === 0 && !(isLoading || loading)) setNeedsNoItemsAnnouncement(true);
+		}
+		if (loadingManagedExternally) {
+			if (items.length > 0) setDataLoadedOnce(true);
+			return;
+		}
+		if (isLoading || items.length > 0) {
+			setIsLoading(false);
+			setDataLoadedOnce(true);
+		}
+		if (loadingDelayTimeoutId.current) safeClearTimeout(loadingDelayTimeoutId.current);
+	}, [items]);
+	useEffect(() => {
+		if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
+			const ref = inputRef.current;
+			if (open) ref.focus();
+		}
+	}, [inputRef, open]);
+	useEffect(() => {
+		if (loadingManagedExternally) {
+			if (isLoading) loadingDelayTimeoutId.current = safeSetTimeout(() => {
+				announceLoading();
+			}, LONG_DELAY_MS);
+			else if (loadingDelayTimeoutId.current) safeClearTimeout(loadingDelayTimeoutId.current);
+		}
+	}, [
+		isLoading,
+		loadingManagedExternally,
+		safeSetTimeout,
+		safeClearTimeout
+	]);
+	useEffect(() => {
+		if (loadingManagedExternally) return;
+		if (dataLoadedOnce) return;
+		if (open) {
+			if (items.length === 0) onFilterChange(filterValue, null);
+		}
+	}, [
+		open,
+		dataLoadedOnce,
+		onFilterChange,
+		filterValue,
+		items,
+		loadingManagedExternally,
+		listContainerElement
+	]);
+	useEffect(() => {
+		if (!window.visualViewport || !open || !isNarrowScreenSize) return;
+		initialHeightRef.current = window.visualViewport.height;
+		initialScaleRef.current = window.visualViewport.scale;
+		const handleViewportChange = debounce(() => {
+			if (window.visualViewport) {
+				if (!(window.visualViewport.scale !== initialScaleRef.current)) {
+					const currentHeight = window.visualViewport.height;
+					const keyboardVisible = initialHeightRef.current - currentHeight > KEYBOARD_VISIBILITY_THRESHOLD;
+					setIsKeyboardVisible(keyboardVisible);
+					setAvailablePanelHeight(keyboardVisible ? currentHeight : void 0);
+				}
+			}
+		}, 100);
+		if (window.visualViewport) {
+			window.visualViewport.addEventListener("resize", handleViewportChange);
+			window.visualViewport.addEventListener("scroll", handleViewportChange);
+		}
+		return () => {
+			if (window.visualViewport) {
+				window.visualViewport.removeEventListener("resize", handleViewportChange);
+				window.visualViewport.removeEventListener("scroll", handleViewportChange);
+			}
+			handleViewportChange.cancel();
+		};
+	}, [open, isNarrowScreenSize]);
+	useEffect(() => {
+		const announceNotice = async () => {
+			if (!noticeRef.current) return;
+			const liveRegion = document.querySelector("live-region");
+			liveRegion === null || liveRegion === void 0 || liveRegion.clear();
+			await announceFromElement(noticeRef.current, { from: liveRegion ? liveRegion : void 0 });
+		};
+		if (open && notice) announceNotice();
+	}, [notice, open]);
+	const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
+	const onOpen = useCallback((gesture) => onOpenChange(true, gesture), [onOpenChange]);
+	const onCancelRequested = useCallback(() => {
+		onOpenChange(false, "cancel");
+	}, [onOpenChange]);
+	const onClose = useCallback((gesture) => {
+		if (variant === "modal" && gesture === "click-outside") onCancel === null || onCancel === void 0 || onCancel();
+		if (gesture === "close") {
+			onCancel === null || onCancel === void 0 || onCancel();
+			onCancelRequested();
+		} else onOpenChange(false, gesture);
+	}, [
+		onOpenChange,
+		variant,
+		onCancel,
+		onCancelRequested
+	]);
+	const renderMenuAnchor = useMemo(() => {
+		if (renderAnchor === null) return null;
+		const selectedItems = Array.isArray(selected) ? selected : [...selected ? [selected] : []];
+		const selectedValueText = selectedItems.length ? selectedItems.map((item) => item.text).join(", ") : placeholder;
+		const shouldAutoWireLabel = isReferenced === false && Boolean(labelId) && Boolean(selectedValueId);
+		return (props) => {
+			return renderAnchor({
+				...props,
+				...shouldAutoWireLabel ? { "aria-labelledby": [labelId, selectedValueId].filter(Boolean).join(" ") } : {},
+				children: shouldAutoWireLabel ? /*#__PURE__*/ jsx("span", {
+					id: selectedValueId,
+					children: selectedValueText
+				}) : selectedValueText
+			});
+		};
+	}, [
+		placeholder,
+		renderAnchor,
+		selected,
+		isReferenced,
+		labelId,
+		selectedValueId
+	]);
+	const selectedItemsSet = useMemo(() => {
+		const set = /* @__PURE__ */ new Set();
+		if (isMultiSelectVariant(selected)) for (const item of selected) if (item.id !== void 0) set.add(item.id);
+		else set.add(item);
+		return set;
+	}, [selected]);
+	const isItemCurrentlySelected = useCallback((item) => {
+		if (isMultiSelectVariant(selected)) {
+			if (item.id !== void 0) return selectedItemsSet.has(item.id);
+			return selectedItemsSet.has(item);
+		}
+		if (isSingleSelectModal) return (intermediateSelected === null || intermediateSelected === void 0 ? void 0 : intermediateSelected.id) !== void 0 ? intermediateSelected.id === item.id : intermediateSelected === item;
+		return (selected === null || selected === void 0 ? void 0 : selected.id) !== void 0 ? selected.id === item.id : selected === item;
+	}, [
+		selected,
+		selectedItemsSet,
+		intermediateSelected,
+		isSingleSelectModal
+	]);
+	const itemsToRender = useMemo(() => {
+		const selectedOnSortSet = /* @__PURE__ */ new Set();
+		for (const item of selectedOnSort) if (item.id !== void 0) selectedOnSortSet.add(item.id);
+		else selectedOnSortSet.add(item);
+		const isSelectedForSort = (item) => {
+			if (item.id !== void 0) return selectedOnSortSet.has(item.id);
+			return selectedOnSortSet.has(item);
+		};
+		return items.map((item) => {
+			return {
+				...item,
+				role: "option",
+				id: item.id,
+				selected: "selected" in item && item.selected === void 0 ? void 0 : isItemCurrentlySelected(item),
+				onAction: (itemFromAction, event) => {
+					var _item$onAction;
+					(_item$onAction = item.onAction) === null || _item$onAction === void 0 || _item$onAction.call(item, itemFromAction, event);
+					if (event.defaultPrevented) return;
+					if (isMultiSelectVariant(selected)) {
+						const otherSelectedItems = selected.filter((selectedItem) => !areItemsEqual(selectedItem, item));
+						onSelectedChange(doesItemsIncludeItem(selected, item) ? otherSelectedItems : [...otherSelectedItems, item]);
+						return;
+					}
+					if (isSingleSelectModal) {
+						if ((intermediateSelected === null || intermediateSelected === void 0 ? void 0 : intermediateSelected.id) === item.id) setIntermediateSelected(void 0);
+						else setIntermediateSelected(item);
+						return;
+					}
+					onSelectedChange(item === selected ? void 0 : item);
+					onClose("selection");
+				}
+			};
+		}).sort((itemA, itemB) => {
+			if (shouldOrderSelectedFirst) {
+				const itemASelected = isSelectedForSort(itemA);
+				const itemBSelected = isSelectedForSort(itemB);
+				if (itemASelected && !itemBSelected) return -1;
+				else if (!itemASelected && itemBSelected) return 1;
+			}
+			return 0;
+		});
+	}, [
+		onClose,
+		onSelectedChange,
+		items,
+		selected,
+		isItemCurrentlySelected,
+		isSingleSelectModal,
+		intermediateSelected,
+		shouldOrderSelectedFirst,
+		selectedOnSort
+	]);
+	const prevItemsRef = useRef(items);
+	useEffect(() => {
+		if (prevItemsRef.current !== items) {
+			if (prevItemsRef.current.length === 0 && items.length > 0) resetSort();
+			prevItemsRef.current = items;
+		}
+	}, [items, resetSort]);
+	const prevOpenRef = useRef(open);
+	useEffect(() => {
+		if (prevOpenRef.current !== open) {
+			resetSort();
+			prevOpenRef.current = open;
+		}
+	}, [open, resetSort]);
+	const focusTrapSettings = useMemo(() => ({ initialFocusRef: inputRef || void 0 }), [inputRef]);
+	const extendedTextInputProps = useMemo(() => {
+		return {
+			className: SelectPanel_module_css_default.TextInput,
+			contrast: true,
+			leadingVisual: SearchIcon,
+			"aria-label": inputLabel,
+			...textInputProps
+		};
+	}, [inputLabel, textInputProps]);
+	const loadingType = () => {
+		if (dataLoadedOnce) return FilteredActionListLoadingTypes.input;
+		else if (initialLoadingType === "spinner") return FilteredActionListLoadingTypes.bodySpinner;
+		else return FilteredActionListLoadingTypes.bodySkeleton;
+	};
+	function getMessage() {
+		if (items.length === 0 && !message) return DefaultEmptyMessage;
+		else if (message) return /*#__PURE__*/ jsx(SelectPanelMessage, {
+			title: message.title,
+			variant: message.variant,
+			icon: message.icon,
+			action: message.action,
+			children: message.body
+		});
+	}
+	const showPermanentCancelSaveButtons = variant === "modal";
+	const showResponsiveCancelSaveButtons = variant !== "modal" && usingFullScreenOnNarrow && isMultiSelectVariant(selected) && onCancel !== void 0;
+	const showResponsiveSaveAndCloseButton = variant !== "modal" && usingFullScreenOnNarrow && isMultiSelectVariant(selected) && onCancel === void 0;
+	const renderFooter = secondaryAction !== void 0 || showPermanentCancelSaveButtons || showResponsiveSaveAndCloseButton || showResponsiveCancelSaveButtons;
+	const displayFooter = secondaryAction !== void 0 || showPermanentCancelSaveButtons ? "always" : showResponsiveSaveAndCloseButton || showResponsiveCancelSaveButtons ? "only-small" : void 0;
+	const stretchSecondaryAction = showResponsiveSaveAndCloseButton || showResponsiveCancelSaveButtons ? "only-big" : showPermanentCancelSaveButtons ? "never" : "always";
+	const stretchSaveButton = showResponsiveSaveAndCloseButton && secondaryAction === void 0 ? "only-small" : "never";
+	const showXCloseIcon = (onCancel !== void 0 || !isMultiSelectVariant(selected)) && usingFullScreenOnNarrow;
+	const currentResponsiveVariant = useResponsiveValue(usingFullScreenOnNarrow ? {
+		regular: "anchored",
+		narrow: "fullscreen"
+	} : void 0, "anchored");
+	const preventBubbling = useCallback((event) => {
+		var _overlayProps$onKeyDo;
+		overlayProps === null || overlayProps === void 0 || (_overlayProps$onKeyDo = overlayProps.onKeyDown) == null || _overlayProps$onKeyDo.call(overlayProps, event);
+		const activeElement = document.activeElement;
+		if (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA") return;
+		if (event.ctrlKey || event.altKey || event.metaKey) return;
+		if (event.key !== "/" && !isAlphabetKey(event.nativeEvent)) return;
+		event.stopPropagation();
+	}, [overlayProps]);
+	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(AnchoredOverlay, {
+		renderAnchor: renderMenuAnchor,
+		anchorRef,
+		align,
+		open,
+		onOpen,
+		onClose,
+		overlayProps: useMemo(() => ({
+			role: "dialog",
+			"aria-labelledby": titleId,
+			"aria-describedby": subtitle ? subtitleId : void 0,
+			...overlayProps,
+			...variant === "modal" ? {
+				top: "50vh",
+				left: "50vw",
+				anchorSide: void 0
+			} : {},
+			style: {
+				transform: variant === "modal" ? "translate(-50%, -50%)" : void 0,
+				...isKeyboardVisible ? { maxHeight: availablePanelHeight !== void 0 ? `${availablePanelHeight}px` : "auto" } : {}
+			},
+			onKeyDown: preventBubbling
+		}), [
+			titleId,
+			subtitle,
+			subtitleId,
+			overlayProps,
+			variant,
+			isKeyboardVisible,
+			availablePanelHeight,
+			preventBubbling
+		]),
+		focusTrapSettings,
+		focusZoneSettings,
+		height,
+		width,
+		anchorId: id,
+		variant: usingFullScreenOnNarrow ? {
+			regular: "anchored",
+			narrow: "fullscreen"
+		} : void 0,
+		pinPosition: !height,
+		className: SelectPanel_module_css_default.Overlay,
+		displayCloseButton: showXCloseIcon,
+		closeButtonProps,
+		displayInViewport,
+		cssAnchorPositioningSettings: {
+			...cssAnchorPositioningSettings,
+			disable: variant === "modal" || (cssAnchorPositioningSettings === null || cssAnchorPositioningSettings === void 0 ? void 0 : cssAnchorPositioningSettings.disable)
+		},
+		children: /*#__PURE__*/ jsxs("div", {
+			className: SelectPanel_module_css_default.Wrapper,
+			"data-variant": variant,
+			"data-component": "SelectPanel",
+			children: [
+				/*#__PURE__*/ jsxs("div", {
+					className: SelectPanel_module_css_default.Header,
+					"data-variant": currentResponsiveVariant,
+					"data-component": "SelectPanel.Header",
+					children: [/*#__PURE__*/ jsxs("div", { children: [/*#__PURE__*/ jsx(Heading, {
+						as: "h1",
+						id: titleId,
+						className: SelectPanel_module_css_default.Title,
+						"data-component": "SelectPanel.Title",
+						children: title
+					}), subtitle ? /*#__PURE__*/ jsx("div", {
+						id: subtitleId,
+						className: SelectPanel_module_css_default.Subtitle,
+						"data-component": "SelectPanel.Subtitle",
+						children: subtitle
+					}) : null] }), variant === "modal" && !isNarrowScreenSize ? /*#__PURE__*/ jsx(IconButton, {
+						type: "button",
+						variant: "invisible",
+						icon: XIcon,
+						"aria-label": "Cancel and close",
+						className: SelectPanel_module_css_default.ResponsiveCloseButton,
+						"data-component": "SelectPanel.CloseButton",
+						onClick: () => {
+							onCancel === null || onCancel === void 0 || onCancel();
+							onCancelRequested();
+						}
+					}) : null]
+				}),
+				notice && /*#__PURE__*/ jsx("div", {
+					ref: noticeRef,
+					"data-component": "SelectPanel.Notice",
+					children: /*#__PURE__*/ jsx(Banner, {
+						variant: notice.variant === "error" ? "critical" : notice.variant,
+						description: notice.text,
+						title: "Notice",
+						hideTitle: true,
+						className: SelectPanel_module_css_default.Notice,
+						layout: "compact"
+					})
+				}),
+				/*#__PURE__*/ jsx(FilteredActionList, {
+					filterValue,
+					onFilterChange,
+					onListContainerRefChanged,
+					onInputRefChanged,
+					placeholderText,
+					...listProps,
+					variant: (_listProps$groupMetad = listProps.groupMetadata) !== null && _listProps$groupMetad !== void 0 && _listProps$groupMetad.length ? "horizontal-inset" : "inset",
+					role: "listbox",
+					"aria-labelledby": listProps["aria-label"] ? void 0 : titleId,
+					"aria-multiselectable": isMultiSelectVariant(selected) ? "true" : "false",
+					selectionVariant: isSingleSelectModal ? "radio" : isMultiSelectVariant(selected) ? "multiple" : "single",
+					items: itemsToRender,
+					textInputProps: extendedTextInputProps,
+					loading: loading || isLoading && !message,
+					loadingType: loadingType(),
+					onSelectAllChange: showSelectAll ? handleSelectAllChange : void 0,
+					message: getMessage(),
+					messageText: {
+						title: (message === null || message === void 0 ? void 0 : message.title) || EMPTY_MESSAGE.title,
+						description: typeof (message === null || message === void 0 ? void 0 : message.body) === "string" ? message.body : EMPTY_MESSAGE.description || EMPTY_MESSAGE.description
+					},
+					fullScreenOnNarrow: usingFullScreenOnNarrow,
+					className: clsx(className, SelectPanel_module_css_default.FilteredActionList),
+					focusPrependedElements,
+					virtualized
+				}),
+				footer ? /*#__PURE__*/ jsx("div", {
+					className: SelectPanel_module_css_default.Footer,
+					"data-component": "SelectPanel.Footer",
+					children: footer
+				}) : renderFooter ? /*#__PURE__*/ jsxs("div", {
+					"data-display-footer": displayFooter,
+					"data-stretch-secondary-action": stretchSecondaryAction,
+					"data-stretch-save-button": stretchSaveButton,
+					className: clsx(SelectPanel_module_css_default.Footer, SelectPanel_module_css_default.ResponsiveFooter),
+					"data-component": "SelectPanel.Footer",
+					children: [
+						/*#__PURE__*/ jsx("div", {
+							"data-stretch-secondary-action": stretchSecondaryAction,
+							className: SelectPanel_module_css_default.SecondaryAction,
+							"data-component": "SelectPanel.SecondaryAction",
+							children: secondaryAction
+						}),
+						showPermanentCancelSaveButtons || showResponsiveCancelSaveButtons ? /*#__PURE__*/ jsxs("div", {
+							"data-stretch-save-button": stretchSaveButton,
+							className: clsx(SelectPanel_module_css_default.CancelSaveButtons, { [SelectPanel_module_css_default.ResponsiveSaveButton]: showResponsiveCancelSaveButtons }),
+							children: [/*#__PURE__*/ jsx(ButtonComponent, {
+								size: "medium",
+								"data-component": "SelectPanel.CancelButton",
+								onClick: () => {
+									onCancel === null || onCancel === void 0 || onCancel();
+									onCancelRequested();
+								},
+								children: "Cancel"
+							}), /*#__PURE__*/ jsx(ButtonComponent, {
+								block: onCancel === void 0,
+								variant: "primary",
+								size: "medium",
+								"data-component": "SelectPanel.SaveButton",
+								onClick: () => {
+									if (isSingleSelectModal) onSelectedChange(intermediateSelected);
+									onClose(variant === "modal" ? "selection" : "click-outside");
+								},
+								children: "Save"
+							})]
+						}) : null,
+						showResponsiveSaveAndCloseButton ? /*#__PURE__*/ jsx("div", {
+							className: SelectPanel_module_css_default.ResponsiveSaveButton,
+							"data-stretch-save-button": stretchSaveButton,
+							children: /*#__PURE__*/ jsx(ButtonComponent, {
+								block: true,
+								variant: "primary",
+								size: "medium",
+								"data-component": "SelectPanel.SaveAndCloseButton",
+								onClick: () => {
+									onClose("click-outside");
+								},
+								children: "Save and close"
+							})
+						}) : null
+					]
+				}) : null
+			]
+		})
+	}), variant === "modal" && open ? /*#__PURE__*/ jsx("div", {
+		className: SelectPanel_module_css_default.Backdrop,
+		"data-component": "SelectPanel.Backdrop"
+	}) : null] });
 }
-const SecondaryButton = props => {
-  return /*#__PURE__*/jsx(ButtonComponent, {
-    block: true,
-    "data-component": "SelectPanel.SecondaryActionButton",
-    ...props,
-    children: props.children
-  });
+const SecondaryButton = (props) => {
+	return /*#__PURE__*/ jsx(ButtonComponent, {
+		block: true,
+		"data-component": "SelectPanel.SecondaryActionButton",
+		...props,
+		children: props.children
+	});
 };
 SecondaryButton.displayName = "SecondaryButton";
-const SecondaryLink = props => {
-  return /*#__PURE__*/jsx(LinkButton, {
-    ...props,
-    variant: "invisible",
-    block: true,
-    "data-component": "SelectPanel.SecondaryActionLink",
-    children: props.children
-  });
+const SecondaryLink = (props) => {
+	return /*#__PURE__*/ jsx(LinkButton, {
+		...props,
+		variant: "invisible",
+		block: true,
+		"data-component": "SelectPanel.SecondaryActionLink",
+		children: props.children
+	});
 };
 SecondaryLink.displayName = "SecondaryLink";
 const SelectPanel = Object.assign(Panel, {
-  __SLOT__: Symbol('SelectPanel'),
-  SecondaryActionButton: SecondaryButton,
-  SecondaryActionLink: SecondaryLink,
-  Message: SelectPanelMessage
+	__SLOT__: Symbol("SelectPanel"),
+	SecondaryActionButton: SecondaryButton,
+	SecondaryActionLink: SecondaryLink,
+	Message: SelectPanelMessage
 });
-
+//#endregion
 export { SelectPanel };