@astryxdesign/core 0.0.0-bootstrap.0 → 0.1.0-canary.08d4cf4

package/dist/MultiSelector/MultiSelector.js

@@ -0,0 +1,729 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file MultiSelector.tsx
+ * @input Uses React, StyleX, usePopover, CheckboxInput, Field, Badge, Icon
+ * @output Exports MultiSelector component
+ * @position Core implementation; consumed by index.ts
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/MultiSelector/MultiSelector.doc.mjs
+ * - /packages/core/src/MultiSelector/index.ts
+ * - /packages/cli/templates/blocks/components/MultiSelector/ (showcase blocks)
+ */
+import React, { useCallback, useEffect, useId, useMemo, useOptimistic, useRef, useState, useTransition } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { usePopover } from "../Popover/usePopover.js";
+import { Icon, renderIconSlot } from "../Icon/index.js";
+import { Field, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputWrapperStyles } from "../Field/index.js";
+import { Divider } from "../Divider/index.js";
+import { Spinner } from "../Spinner/index.js";
+import { CheckboxInput } from "../CheckboxInput/index.js";
+import { Badge } from "../Badge/index.js";
+import "../theme/tokens.stylex.js";
+import { colorVars, sizeVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, fontWeightVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
+import { isOptionData, isDivider, isSection, normalizeOption, getSelectableOptions } from "../Selector/utils.js";
+import { useMultiCombobox } from "./hooks.js";
+import { mergeProps } from "../utils/index.js";
+import { useSize } from "../SizeContext/SizeContext.js";
+import { themeProps } from "../utils/themeProps.js";
+
+// Sentinel value for the select-all item in keyboard navigation
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SELECT_ALL_VALUE = '__xds_select_all__';
+const styles = {
+  triggerContainer: {
+    kVAEAm: "x1n2onr6",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "x1qughib",
+    kOIVth: "x1txdalj",
+    kzqmXN: "xh8yej3",
+    k8WAf4: "xce4md1",
+    kg3NbH: "xrrkdod",
+    kMv6JI: "x9ynric",
+    kGuDYH: "xcr08ib",
+    kLWn49: "x1kq96og",
+    kMwMTN: "x1tgivj0",
+    kkrTdU: "x1ypdohk",
+    $$css: true
+  },
+  triggerPlaceholder: {
+    kMwMTN: "xv1l7n4",
+    $$css: true
+  },
+  popover: {
+    k7Eaqz: "xrzjruh",
+    keoZOQ: "xcsaf9d",
+    $$css: true
+  },
+  selectAllWrapper: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kOIVth: "x1txdalj",
+    kkrTdU: "x1ypdohk",
+    $$css: true
+  },
+  sectionDivider: {
+    kqGvvJ: "xsq74q5",
+    $$css: true
+  },
+  divider: {
+    kqGvvJ: "xsq74q5",
+    $$css: true
+  },
+  item: {
+    kB7OPa: "x9f619",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kOIVth: "x1txdalj",
+    kzqmXN: "xh8yej3",
+    kaIpWk: "xh6dtrn",
+    kkrTdU: "x1ypdohk",
+    kWkggS: "xjbqb8w",
+    kI3sdo: "x1a2a7pz",
+    $$css: true
+  },
+  itemHighlighted: {
+    kWkggS: "x1lmrjuc",
+    $$css: true
+  },
+  itemDisabled: {
+    kSiTet: "xbyyjgo",
+    kkrTdU: "x1h6gzvc",
+    $$css: true
+  }
+};
+const sizeStyles = {
+  sm: {
+    kZKoxP: "x6k0iem",
+    $$css: true
+  },
+  md: {
+    kZKoxP: "x1ueg155",
+    $$css: true
+  },
+  lg: {
+    kZKoxP: "xssyfek",
+    $$css: true
+  }
+};
+const itemSizeStyles = {
+  sm: {
+    kmVPX3: "x9epnlk",
+    $$css: true
+  },
+  md: {
+    k8WAf4: "x1vofgu7",
+    kg3NbH: "xf314gf",
+    $$css: true
+  },
+  lg: {
+    kmVPX3: "xlsj2fj",
+    $$css: true
+  }
+};
+const selectAllSizeStyles = {
+  sm: {
+    kg3NbH: "x7a5moj",
+    k8WAf4: "x13f7esw",
+    $$css: true
+  },
+  md: {
+    kg3NbH: "xf314gf",
+    k8WAf4: "xu0wf1k",
+    $$css: true
+  },
+  lg: {
+    kg3NbH: "xf314gf",
+    k8WAf4: "xu0wf1k",
+    $$css: true
+  }
+};
+const STATUS_ICON_MAP = {
+  warning: 'warning',
+  error: 'error',
+  success: 'success'
+};
+const STATUS_ICON_COLOR_MAP = {
+  warning: 'warning',
+  error: 'error',
+  success: 'success'
+};
+/**
+ * A multi-select dropdown component with checkboxes for choosing
+ * multiple items from a list of options.
+ *
+ * @example
+ * ```
+ * <MultiSelector
+ *   label="Columns"
+ *   options={['Name', 'Email', 'Role', 'Status']}
+ *   value={selectedColumns}
+ *   onChange={setSelectedColumns}
+ *   hasSelectAll
+ * />
+ * ```
+ */
+export function MultiSelector({
+  label,
+  isLabelHidden = false,
+  description,
+  isOptional = false,
+  isRequired = false,
+  isDisabled = false,
+  options,
+  value,
+  onChange,
+  changeAction,
+  isLoading = false,
+  placeholder = 'Select...',
+  size: sizeProp,
+  status,
+  labelTooltip,
+  startIcon,
+  hasClear = false,
+  hasSelectAll = false,
+  selectAllLabel = 'Select all',
+  hasSearch = false,
+  searchPlaceholder = 'Search...',
+  triggerDisplay = 'count',
+  maxBadges = 3,
+  renderOption,
+  isDefaultOpen = false,
+  'data-testid': testId,
+  width,
+  xstyle,
+  className,
+  style
+}) {
+  const size = useSize(sizeProp, 'md');
+  const triggerId = useId();
+  const listboxId = useId();
+  const descriptionId = useId();
+  const statusMessageId = useId();
+  const searchId = useId();
+  const triggerRef = useRef(null);
+  const searchRef = useRef(null);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Snapshot of which values were selected when the dropdown opened.
+  // Stored as state (not a ref) so sortedItems recomputes exactly once on open,
+  // then stays frozen until the menu closes.
+  const [selectedAtOpen, setSelectedAtOpen] = useState(null);
+  const [, startTransition] = useTransition();
+  const [optimisticValue, setOptimisticValue] = useOptimistic(value);
+  const isBusy = isLoading || optimisticValue !== value;
+
+  // Build aria-describedby
+  const ariaDescribedBy = [description ? descriptionId : null, status?.message ? statusMessageId : null].filter(Boolean).join(' ') || undefined;
+
+  // Flatten options for keyboard navigation
+  const selectableItems = useMemo(() => getSelectableOptions(options), [options]);
+
+  // Filter items by search query
+  const filteredItems = useMemo(() => {
+    if (!searchQuery) {
+      return selectableItems;
+    }
+    const query = searchQuery.toLowerCase();
+    return selectableItems.filter(item => (item.label ?? item.value).toLowerCase().includes(query));
+  }, [selectableItems, searchQuery]);
+
+  // Single source of truth for item order. Both the hook (keyboard navigation)
+  // and renderOptions (DOM rendering) consume this list — no independent sorting.
+  // Selected-at-open items are placed first within each group/section.
+  const sortedItems = useMemo(() => {
+    const selectedSet = selectedAtOpen ?? new Set();
+    if (searchQuery) {
+      const selected = filteredItems.filter(item => selectedSet.has(item.value));
+      const unselected = filteredItems.filter(item => !selectedSet.has(item.value));
+      const items = [...selected, ...unselected];
+      if (hasSelectAll) {
+        return [{
+          value: SELECT_ALL_VALUE,
+          label: selectAllLabel
+        }, ...items];
+      }
+      return items;
+    }
+    // For non-search mode, flatten options in the same order as renderOptions
+    const result = [];
+    let pendingFlat = [];
+    const flushFlat = () => {
+      if (pendingFlat.length === 0) {
+        return;
+      }
+      const selected = pendingFlat.filter(item => selectedSet.has(item.value));
+      const unselected = pendingFlat.filter(item => !selectedSet.has(item.value));
+      result.push(...selected, ...unselected);
+      pendingFlat = [];
+    };
+    for (const option of options) {
+      if (isDivider(option)) {
+        flushFlat();
+      } else if (isSection(option)) {
+        flushFlat();
+        const sectionOptions = option.options.map(opt => normalizeOption(opt));
+        const selected = sectionOptions.filter(item => selectedSet.has(item.value));
+        const unselected = sectionOptions.filter(item => !selectedSet.has(item.value));
+        result.push(...selected, ...unselected);
+      } else if (isOptionData(option)) {
+        pendingFlat.push(normalizeOption(option));
+      }
+    }
+    flushFlat();
+    if (hasSelectAll) {
+      return [{
+        value: SELECT_ALL_VALUE,
+        label: selectAllLabel
+      }, ...result];
+    }
+    return result;
+  }, [filteredItems, searchQuery, options, selectedAtOpen, hasSelectAll, selectAllLabel]);
+
+  // Layer for dropdown positioning
+  const handleLayerHide = useCallback(() => {
+    setSearchQuery('');
+    setSelectedAtOpen(null);
+    triggerRef.current?.focus();
+  }, []);
+  const popover = usePopover({
+    hasLightDismiss: true,
+    onHide: handleLayerHide,
+    hasCloseButton: false,
+    hasAutoFocus: false,
+    dialogLabel: `${label} options`
+  });
+
+  // Open dropdown on mount when isDefaultOpen is true
+  useEffect(() => {
+    if (isDefaultOpen) {
+      popover.show();
+    }
+    // eslint-disable-next-line @eslint-react/exhaustive-deps -- mount-only: isDefaultOpen is not reactive
+  }, []);
+
+  // Handle toggle
+  // Handle clear button click
+  const handleClear = useCallback(e => {
+    e.stopPropagation(); // Don't open dropdown
+    onChange([]);
+    if (changeAction) {
+      startTransition(async () => {
+        setOptimisticValue([]);
+        await changeAction([]);
+      });
+    }
+  }, [onChange, changeAction, startTransition, setOptimisticValue]);
+  const handleToggle = useCallback(itemValue => {
+    const newValue = optimisticValue.includes(itemValue) ? optimisticValue.filter(v => v !== itemValue) : [...optimisticValue, itemValue];
+    onChange(newValue);
+    if (changeAction) {
+      startTransition(async () => {
+        setOptimisticValue(newValue);
+        await changeAction(newValue);
+      });
+    }
+  }, [optimisticValue, onChange, changeAction, startTransition, setOptimisticValue]);
+
+  // Select-all logic
+  const enabledItems = useMemo(() => filteredItems.filter(item => !item.disabled), [filteredItems]);
+  const allEnabledSelected = useMemo(() => enabledItems.length > 0 && enabledItems.every(item => optimisticValue.includes(item.value)), [enabledItems, optimisticValue]);
+  const someSelected = useMemo(() => enabledItems.some(item => optimisticValue.includes(item.value)), [enabledItems, optimisticValue]);
+  const selectAllState = allEnabledSelected ? true : someSelected ? 'indeterminate' : false;
+  const handleSelectAll = useCallback(() => {
+    let newValue;
+    if (allEnabledSelected) {
+      // Deselect all enabled items, keep disabled items that are selected
+      const enabledValues = new Set(enabledItems.map(item => item.value));
+      newValue = optimisticValue.filter(v => !enabledValues.has(v));
+    } else {
+      // Select all enabled items
+      const currentSet = new Set(optimisticValue);
+      newValue = [...optimisticValue];
+      for (const item of enabledItems) {
+        if (!currentSet.has(item.value)) {
+          newValue.push(item.value);
+        }
+      }
+    }
+    onChange(newValue);
+    if (changeAction) {
+      startTransition(async () => {
+        setOptimisticValue(newValue);
+        await changeAction(newValue);
+      });
+    }
+  }, [allEnabledSelected, enabledItems, optimisticValue, onChange, changeAction, startTransition, setOptimisticValue]);
+
+  // Route toggle: select-all sentinel → handleSelectAll, everything else → handleToggle
+  const handleNavigableToggle = useCallback(itemValue => {
+    if (itemValue === SELECT_ALL_VALUE) {
+      handleSelectAll();
+    } else {
+      handleToggle(itemValue);
+    }
+  }, [handleSelectAll, handleToggle]);
+
+  // Multi-select combobox behavior — index-based, matching useCombobox pattern.
+  // sortedItems is the single source of truth for item order.
+  const {
+    highlightedIndex,
+    getItemId,
+    onTriggerClick,
+    onKeyDown,
+    onItemMouseEnter
+  } = useMultiCombobox({
+    selectableItems: sortedItems,
+    isDisabled,
+    isOpen: popover.isOpen,
+    hasSearch,
+    onOpen: useCallback(() => {
+      // Snapshot which items are selected at open time — sort is frozen until close
+      setSelectedAtOpen(new Set(optimisticValue));
+      popover.show();
+      if (hasSearch) {
+        // Focus search after popover opens
+        requestAnimationFrame(() => {
+          searchRef.current?.focus();
+        });
+      }
+    }, [popover, hasSearch, optimisticValue]),
+    onClose: popover.hide,
+    onToggle: handleNavigableToggle,
+    listboxId
+  });
+
+  // Build trigger display content
+  const selectedLabels = useMemo(() => {
+    return optimisticValue.map(v => {
+      const item = selectableItems.find(i => i.value === v);
+      return item?.label ?? v;
+    });
+  }, [optimisticValue, selectableItems]);
+  const renderTriggerContent = useCallback(() => {
+    if (optimisticValue.length === 0) {
+      return /*#__PURE__*/_jsx("span", {
+        ...{
+          className: "xb3r6kr xlyipyv xuxw1ft"
+        },
+        children: placeholder
+      });
+    }
+    switch (triggerDisplay) {
+      case 'count':
+        return /*#__PURE__*/_jsxs("span", {
+          ...{
+            className: "xb3r6kr xlyipyv xuxw1ft"
+          },
+          children: [optimisticValue.length, " selected"]
+        });
+      case 'labels':
+        {
+          const displayed = selectedLabels.slice(0, 3);
+          const remaining = selectedLabels.length - displayed.length;
+          const text = remaining > 0 ? `${displayed.join(', ')}, +${remaining}` : displayed.join(', ');
+          return /*#__PURE__*/_jsx("span", {
+            ...{
+              className: "xb3r6kr xlyipyv xuxw1ft"
+            },
+            children: text
+          });
+        }
+      case 'badges':
+        {
+          const displayed = selectedLabels.slice(0, maxBadges);
+          const remaining = selectedLabels.length - displayed.length;
+          return /*#__PURE__*/_jsxs("span", {
+            ...{
+              className: "x78zum5 x1a02dak xzye2dw x6s0dn4"
+            },
+            children: [displayed.map(label => /*#__PURE__*/_jsx(Badge, {
+              label: label,
+              variant: "neutral"
+            }, label)), remaining > 0 && /*#__PURE__*/_jsxs("span", {
+              ...{
+                className: "x2lah0s xcr08ib xv1l7n4 x1e4wzip"
+              },
+              children: ["+", remaining]
+            })]
+          });
+        }
+    }
+  }, [optimisticValue, triggerDisplay, selectedLabels, placeholder, maxBadges]);
+
+  // Render search input
+  const renderSearch = useCallback(() => {
+    if (!hasSearch) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx("div", {
+      ...{
+        className: "xf314gf xu0wf1k"
+      },
+      children: /*#__PURE__*/_jsx("input", {
+        ref: searchRef,
+        id: searchId,
+        role: "searchbox",
+        "aria-controls": listboxId,
+        "aria-label": "Search options",
+        type: "text",
+        value: searchQuery,
+        onChange: e => setSearchQuery(e.target.value),
+        onKeyDown: e => {
+          // Let ArrowDown/Up/Escape/Tab propagate to parent handler
+          if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Escape' || e.key === 'Tab') {
+            onKeyDown(e);
+          }
+        },
+        placeholder: searchPlaceholder,
+        ...{
+          className: "x9f619 xh8yej3 xu0wf1k xf314gf x1litavf x1y0btm7 xvy26l8 xh6dtrn x10xzikg x9ynric xcr08ib xdk3u5w x1tgivj0 x1a2a7pz xzeu18z x1wfwxd8"
+        }
+      })
+    });
+  }, [hasSearch, searchId, listboxId, searchQuery, searchPlaceholder, onKeyDown]);
+
+  // Render an individual item (index-based)
+  const renderItem = useCallback((item, flatIndex) => {
+    const isHighlighted = flatIndex === highlightedIndex;
+    const isSelectAll = item.value === SELECT_ALL_VALUE;
+    const isSelected = isSelectAll ? allEnabledSelected : optimisticValue.includes(item.value);
+    const checkboxValue = isSelectAll ? selectAllState : isSelected;
+    return /*#__PURE__*/_jsxs("div", {
+      id: getItemId(flatIndex),
+      role: "option",
+      "aria-selected": isSelected,
+      "aria-disabled": item.disabled,
+      onClick: () => {
+        if (!item.disabled) {
+          handleNavigableToggle(item.value);
+        }
+      },
+      onMouseEnter: () => onItemMouseEnter(item, flatIndex),
+      ...stylex.props(styles.item, isSelectAll ? selectAllSizeStyles[size] : itemSizeStyles[size], isSelectAll && styles.selectAllWrapper, isHighlighted && styles.itemHighlighted, item.disabled && styles.itemDisabled),
+      children: [/*#__PURE__*/_jsx("div", {
+        inert: true,
+        ...{
+          className: "x47corl x78zum5 x2lah0s"
+        },
+        children: /*#__PURE__*/_jsx(CheckboxInput, {
+          label: "",
+          isLabelHidden: true,
+          value: checkboxValue,
+          onChange: () => {},
+          isDisabled: item.disabled,
+          size: size === 'lg' ? 'md' : size
+        })
+      }), renderOption && !isSelectAll ? renderOption(item) : /*#__PURE__*/_jsx("span", {
+        ...{
+          0: {
+            className: "x9ynric xcr08ib x1e4wzip x1tgivj0 xeuugli xb3r6kr xlyipyv xuxw1ft"
+          },
+          1: {
+            className: "x9ynric xcr08ib x1e4wzip xeuugli xb3r6kr xlyipyv xuxw1ft xnbbluu"
+          }
+        }[!!item.disabled << 0],
+        children: item.label ?? item.value
+      })]
+    }, item.value);
+  }, [renderOption, highlightedIndex, optimisticValue, allEnabledSelected, selectAllState, getItemId, handleNavigableToggle, onItemMouseEnter, size]);
+
+  // Render all options. Uses sortedItems as the single source of truth for
+  // item order — no independent sorting here. Structural elements (dividers,
+  // section headers) come from the original options prop.
+  const renderOptions = useCallback(() => {
+    const elements = [];
+    let cursor = 0;
+
+    // Number of real items (excluding the select-all sentinel)
+    const realItemCount = hasSelectAll ? sortedItems.length - 1 : sortedItems.length;
+
+    // Show select-all only when there are real items to select
+    if (hasSelectAll && realItemCount > 0) {
+      elements.push(renderItem(sortedItems[0], 0));
+      elements.push(/*#__PURE__*/_jsx(Divider, {
+        xstyle: styles.divider
+      }, "select-all-divider"));
+      cursor = 1;
+    } else if (hasSelectAll) {
+      // Skip the select-all sentinel when there are no real items
+      cursor = 1;
+    }
+
+    // Empty state — no real items to show
+    if (realItemCount === 0) {
+      elements.push(/*#__PURE__*/_jsx("div", {
+        ...{
+          className: "x1b2ylru x2b8uid xv1l7n4 x9ynric xcr08ib"
+        },
+        children: "No results found"
+      }, "empty"));
+      return elements;
+    }
+    if (searchQuery) {
+      for (let i = cursor; i < sortedItems.length; i++) {
+        elements.push(renderItem(sortedItems[i], i));
+      }
+      return elements;
+    }
+
+    // Non-search: consume items from sortedItems in order, interleaving
+    // structural elements (dividers, section headers) from the options prop.
+    let pendingCount = 0;
+    const flushPending = () => {
+      for (let j = 0; j < pendingCount; j++) {
+        elements.push(renderItem(sortedItems[cursor], cursor));
+        cursor++;
+      }
+      pendingCount = 0;
+    };
+    for (let i = 0; i < options.length; i++) {
+      const option = options[i];
+      if (isDivider(option)) {
+        flushPending();
+        elements.push(/*#__PURE__*/_jsx(Divider, {
+          xstyle: styles.divider
+        }, `divider-${i}`));
+      } else if (isSection(option)) {
+        flushPending();
+        const count = option.options.length;
+        const sectionItems = [];
+        for (let j = 0; j < count; j++) {
+          sectionItems.push(renderItem(sortedItems[cursor], cursor));
+          cursor++;
+        }
+        if (option.title) {
+          elements.push(/*#__PURE__*/_jsx(Divider, {
+            label: option.title,
+            xstyle: styles.sectionDivider
+          }, `section-divider-${i}`));
+        }
+        elements.push(/*#__PURE__*/_jsx("div", {
+          role: "group",
+          "aria-label": option.title,
+          children: sectionItems
+        }, `section-${i}`));
+      } else if (isOptionData(option)) {
+        pendingCount++;
+      }
+    }
+    flushPending();
+    return elements;
+  }, [options, renderItem, sortedItems, searchQuery, hasSelectAll]);
+  return /*#__PURE__*/_jsxs(Field, {
+    label: label,
+    isLabelHidden: isLabelHidden,
+    description: description,
+    inputID: triggerId,
+    descriptionID: description ? descriptionId : undefined,
+    isOptional: isOptional,
+    isRequired: isRequired,
+    isDisabled: isDisabled,
+    status: status ? {
+      type: status.type,
+      message: status.message,
+      messageID: status.message ? statusMessageId : undefined
+    } : undefined,
+    labelTooltip: labelTooltip,
+    width: width,
+    children: [/*#__PURE__*/_jsxs("div", {
+      ref: el => {
+        popover.triggerRef(el);
+      },
+      onClick: onTriggerClick,
+      "data-testid": testId,
+      ...mergeProps(themeProps('multi-selector', {
+        size,
+        status: status?.type ?? null
+      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, optimisticValue.length === 0 && styles.triggerPlaceholder, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], xstyle), className, style),
+      children: [startIcon && renderIconSlot(startIcon, {
+        size: 'sm',
+        color: 'secondary'
+      }), /*#__PURE__*/_jsx("button", {
+        ref: triggerRef,
+        id: triggerId,
+        type: "button",
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": popover.isOpen,
+        "aria-controls": listboxId,
+        "aria-activedescendant": popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
+        "aria-describedby": ariaDescribedBy,
+        "aria-required": isRequired ? 'true' : undefined,
+        "aria-invalid": status?.type === 'error' ? 'true' : undefined,
+        "aria-busy": isBusy || undefined,
+        disabled: isDisabled,
+        onKeyDown: onKeyDown,
+        tabIndex: -1,
+        ...{
+          className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x1a2a7pz x1p25gnr x1wfwxd8 xh6dtrn"
+        },
+        children: /*#__PURE__*/_jsx("span", {
+          ...{
+            className: "x78zum5 x6s0dn4 xzye2dw x1iyjqo2 xs83m0k x1r8uery xeuugli xb3r6kr"
+          },
+          children: renderTriggerContent()
+        })
+      }), isBusy && /*#__PURE__*/_jsx(Spinner, {
+        size: "sm"
+      }), hasClear && value.length > 0 && !isDisabled && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        tabIndex: -1,
+        onClick: handleClear,
+        "aria-label": `Clear all ${label}`,
+        ...{
+          className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "close",
+          size: "sm",
+          color: "secondary"
+        })
+      }), /*#__PURE__*/_jsx("span", {
+        ...{
+          0: {
+            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike"
+          },
+          2: {
+            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike x19jd1h0"
+          },
+          1: {
+            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike xq2gx43"
+          },
+          3: {
+            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike x19jd1h0 xq2gx43"
+          }
+        }[!!(!status && popover.isOpen) << 1 | !!status << 0],
+        children: status ? /*#__PURE__*/_jsx(Icon, {
+          icon: STATUS_ICON_MAP[status.type],
+          size: "sm",
+          color: STATUS_ICON_COLOR_MAP[status.type]
+        }) : /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronDown",
+          size: "sm",
+          color: "inherit"
+        })
+      })]
+    }), popover.render(/*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x9f619 xuyqlj2 x1odjw0f x9epnlk"
+      },
+      children: [renderSearch(), /*#__PURE__*/_jsx("div", {
+        id: listboxId,
+        role: "listbox",
+        "aria-multiselectable": "true",
+        "aria-labelledby": triggerId,
+        children: renderOptions()
+      })]
+    }), {
+      placement: 'below',
+      alignment: 'start',
+      xstyle: styles.popover
+    })]
+  });
+}
+MultiSelector.displayName = 'MultiSelector';