@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-BAQBUKDU.js

@@ -0,0 +1,88 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-2EAAWOZ2.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+
+// src/components/data-display/DataViews/data-views-select-all-strip.tsx
+import Checkbox from "@mui/material/Checkbox/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SelectAllStrip({
+  rows,
+  getRowId,
+  selectedIds,
+  onChange,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  if (rows.length === 0) return null;
+  const pageIds = rows.map(getRowId);
+  const selectedHere = pageIds.filter((id) => selectedIds.has(id)).length;
+  const all = selectedHere === pageIds.length;
+  const some = selectedHere > 0 && !all;
+  const toggle = () => {
+    if (all) {
+      const next = new Set(selectedIds);
+      pageIds.forEach((id) => next.delete(id));
+      onChange(next);
+      return;
+    }
+    onChange(/* @__PURE__ */ new Set([...selectedIds, ...pageIds]));
+  };
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      "data-testid": `${testIdPrefix}-select-all-strip`,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        mt: 1.5,
+        px: 1,
+        py: 0.75,
+        borderBottom: 1,
+        borderColor: "divider",
+        bgcolor: "action.hover",
+        borderRadius: 1
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            size: "small",
+            checked: all,
+            indeterminate: some,
+            onChange: toggle,
+            "data-testid": `${testIdPrefix}-select-all-box`,
+            inputProps: { "aria-label": copy.selection.selectAllOnPage },
+            sx: { p: 0.5 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "text",
+            size: "sm",
+            color: "secondary",
+            onClick: toggle,
+            dataTestId: `${testIdPrefix}-select-all-toggle`,
+            children: all ? copy.selection.clearSelection : copy.selection.selectAll
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { ml: "auto", color: "text.disabled", whiteSpace: "nowrap" }, children: copy.selection.onThisPage(rows.length) }) })
+      ]
+    }
+  );
+}
+
+export {
+  SelectAllStrip
+};
+//# sourceMappingURL=chunk-BAQBUKDU.js.map

package/dist/chunk-BJZOBG24.js

@@ -0,0 +1,107 @@
+import {
+  AlertDialog
+} from "./chunk-OG6LYQ7C.js";
+
+// src/components/feedback/ConfirmAction/ConfirmAction.parts.tsx
+import Alert from "@mui/material/Alert/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_TEST_ID = "confirm-action";
+function confirmBody(description, copy, entityName) {
+  if (!entityName) return description ?? copy.irreversible;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontWeight: 600, display: "block" }, children: entityName }),
+    description
+  ] });
+}
+function resolveInitialFocus(tone, initialFocus) {
+  if (initialFocus) return initialFocus;
+  return tone === "destructive" ? "cancel" : "confirm";
+}
+function TypeToConfirmField({
+  expected,
+  label,
+  value,
+  onChange,
+  disabled,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 1, sx: { mt: 2 }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: label ?? copy.typeToConfirm(expected) }),
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        size: "small",
+        value,
+        disabled,
+        onChange: (event) => onChange(event.target.value),
+        inputProps: {
+          "aria-label": label ?? copy.typeToConfirm(expected),
+          "data-testid": `${dataTestId}-type-to-confirm`
+        }
+      }
+    )
+  ] });
+}
+function ConfirmActionDialog({
+  state,
+  title,
+  description,
+  entityName,
+  confirmText,
+  cancelText,
+  typeToConfirm,
+  typeToConfirmLabel,
+  tone = "destructive",
+  initialFocus,
+  dataTestId = DEFAULT_TEST_ID,
+  copy
+}) {
+  const [typed, setTyped] = React.useState("");
+  React.useEffect(() => {
+    if (state.open) setTyped("");
+  }, [state.open]);
+  const gateUnmet = typeToConfirm !== void 0 && typed.trim() !== typeToConfirm;
+  return /* @__PURE__ */ jsxs(
+    AlertDialog,
+    {
+      open: state.open,
+      variant: tone === "destructive" ? "destructive" : "default",
+      title,
+      description: confirmBody(description, copy, entityName),
+      confirmText,
+      cancelText: cancelText ?? copy.cancel,
+      loading: state.pending,
+      confirmDisabled: gateUnmet,
+      initialFocus: resolveInitialFocus(tone, initialFocus),
+      onConfirm: state.confirm,
+      onCancel: state.cancel,
+      onClose: state.cancel,
+      "data-testid": dataTestId,
+      children: [
+        state.error && /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { mt: 1 }, "data-testid": `${dataTestId}-error`, children: state.error }),
+        typeToConfirm !== void 0 && /* @__PURE__ */ jsx(
+          TypeToConfirmField,
+          {
+            expected: typeToConfirm,
+            label: typeToConfirmLabel,
+            value: typed,
+            onChange: setTyped,
+            disabled: state.pending,
+            dataTestId,
+            copy
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  ConfirmActionDialog
+};
+//# sourceMappingURL=chunk-BJZOBG24.js.map

package/dist/chunk-BN742L2M.js

@@ -0,0 +1,270 @@
+import {
+  highlightLabel
+} from "./chunk-XBHQT4BQ.js";
+import {
+  fieldTextFieldStyles
+} from "./chunk-CGO452DC.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Autocomplete/Autocomplete.parts.tsx
+import LinkIcon from "@mui/icons-material/Link";
+import SearchIcon from "@mui/icons-material/Search";
+import Box from "@mui/material/Box/index.js";
+import Chip from "@mui/material/Chip/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import List from "@mui/material/List/index.js";
+import ListItem from "@mui/material/ListItem/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import Popper from "@mui/material/Popper/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { styled, useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledPopper = styled(Popper)(({ theme }) => ({
+  zIndex: theme.zIndex.tooltip,
+  width: "100%",
+  maxHeight: rem(theme, 300),
+  overflow: "auto",
+  // Popper.js writes the computed position (and stamps `data-popper-placement`)
+  // in a layout effect that can land AFTER the first paint. Until it does, the
+  // element would paint once unpositioned — at the offset-parent origin, far
+  // left and full width — then jump under the input, a visible per-keystroke
+  // flash as the list re-renders. Hide that unpositioned first frame; it becomes
+  // visible the instant popper assigns a placement.
+  "&:not([data-popper-placement])": { visibility: "hidden" }
+}));
+var InlineSuggestionDisplay = styled("div")(({ theme }) => ({
+  position: "absolute",
+  pointerEvents: "none",
+  left: rem(theme, 14),
+  // Match TextField padding
+  top: "50%",
+  transform: "translateY(-50%)",
+  fontSize: "inherit",
+  fontFamily: "inherit",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  zIndex: 1
+}));
+var UserTextTwin = styled("span")({
+  visibility: "hidden"
+});
+var GhostText = styled("span")(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  opacity: 0.6
+}));
+var ChipContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: theme.spacing(0.5),
+  marginBottom: theme.spacing(1)
+}));
+function suggestionTypeIcon(type) {
+  const sx = { color: "text.secondary", flexShrink: 0 };
+  if (type === "link") return /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small", sx });
+  if (type === "search") return /* @__PURE__ */ jsx(SearchIcon, { fontSize: "small", sx });
+  return null;
+}
+function GhostOverlay({ inputValue, ghost }) {
+  return /* @__PURE__ */ jsxs(InlineSuggestionDisplay, { children: [
+    /* @__PURE__ */ jsx(UserTextTwin, { children: inputValue }),
+    /* @__PURE__ */ jsx(GhostText, { children: ghost })
+  ] });
+}
+function AutocompleteInput(props) {
+  const theme = useTheme();
+  const showOverlay = Boolean(props.ghost) && props.showGhost && props.isInputFocused;
+  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+    showOverlay && /* @__PURE__ */ jsx(GhostOverlay, { inputValue: props.inputValue, ghost: props.ghost }),
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        ref: props.inputRef,
+        fullWidth: true,
+        sx: fieldTextFieldStyles,
+        value: props.inputValue,
+        onChange: props.onChange,
+        onKeyDown: props.onKeyDown,
+        onFocus: props.onFocus,
+        onBlur: props.onBlur,
+        onCompositionStart: props.onCompositionStart,
+        onCompositionEnd: props.onCompositionEnd,
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        autoFocus: props.autoFocus,
+        className: props.inputClassName,
+        InputProps: {
+          startAdornment: props.startAdornment,
+          endAdornment: props.isLoading ? /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 20) }) : void 0
+        },
+        inputProps: {
+          role: "combobox",
+          "aria-expanded": props.open,
+          "aria-controls": props.open ? props.listId : void 0,
+          "aria-activedescendant": props.activeDescendant,
+          "aria-autocomplete": "list",
+          "aria-label": props.inputAriaLabel,
+          id: props.id
+        }
+      }
+    )
+  ] });
+}
+function ChipList({
+  items,
+  getKey,
+  getLabel,
+  onRemove,
+  chipClassName
+}) {
+  return /* @__PURE__ */ jsx(ChipContainer, { "data-testid": "selected-items-container", children: items.map((item, index) => /* @__PURE__ */ jsx(
+    Chip,
+    {
+      label: getLabel(item),
+      onDelete: () => onRemove(item),
+      size: "small",
+      className: chipClassName,
+      "data-testid": `selected-chip-${index}`
+    },
+    `${getKey(item)}-${index}`
+  )) });
+}
+function DefaultSuggestion({
+  item,
+  state,
+  getLabel,
+  getDescription,
+  getSuggestionType,
+  matchMode
+}) {
+  const label = getLabel(item);
+  const description = getDescription?.(item);
+  const displayLabel = highlightLabel(label, state.query, matchMode);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        width: "100%",
+        // Bold the matched prefix (not a yellow <mark> highlight).
+        "& mark": { backgroundColor: "transparent", color: "inherit", fontWeight: 700 }
+      },
+      children: [
+        suggestionTypeIcon(getSuggestionType(item)),
+        /* @__PURE__ */ jsx(
+          ListItemText,
+          {
+            primary: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: displayLabel } }),
+            secondary: description
+          }
+        )
+      ]
+    }
+  );
+}
+function LoadingRow({ label }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [
+    /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 16) }),
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: label })
+  ] }) });
+}
+function NoResultsRow({ label }) {
+  return /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: label }) });
+}
+var SAME_WIDTH_MODIFIER = {
+  name: "sameWidth",
+  enabled: true,
+  fn: ({ state }) => {
+    if (state.elements.reference && state.styles.popper) {
+      state.styles.popper.width = `${state.rects.reference.width}px`;
+    }
+  },
+  phase: "beforeWrite",
+  requires: ["computeStyles"]
+};
+function SuggestionListBox({
+  copy,
+  open,
+  anchorEl,
+  portal,
+  listRef,
+  listId,
+  optionIdPrefix,
+  items,
+  activeIndex,
+  isLoading,
+  showNoResults,
+  getKey,
+  onSelect,
+  onHover,
+  renderItem,
+  listClassName,
+  itemClassName,
+  activeItemClassName
+}) {
+  return /* @__PURE__ */ jsx(
+    StyledPopper,
+    {
+      open,
+      anchorEl,
+      placement: "bottom-start",
+      disablePortal: !portal,
+      modifiers: [SAME_WIDTH_MODIFIER],
+      children: /* @__PURE__ */ jsx(Paper, { elevation: 8, className: listClassName, "data-testid": "suggestions-dropdown", children: /* @__PURE__ */ jsxs(
+        List,
+        {
+          ref: listRef,
+          role: "listbox",
+          id: listId,
+          dense: true,
+          sx: { maxHeight: sxRem(300), overflow: "auto" },
+          "data-testid": "suggestions-list",
+          children: [
+            items.map((item, index) => /* @__PURE__ */ jsx(
+              ListItem,
+              {
+                id: `${optionIdPrefix}-${index}`,
+                role: "option",
+                component: "div",
+                sx: {
+                  cursor: "pointer",
+                  backgroundColor: index === activeIndex ? "action.hover" : "transparent",
+                  "&:hover": { backgroundColor: "action.hover" }
+                },
+                "aria-selected": index === activeIndex,
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => onSelect(item),
+                onMouseEnter: () => onHover(index),
+                className: `${itemClassName} ${index === activeIndex ? activeItemClassName : ""}`,
+                "data-testid": `suggestion-item-${index}`,
+                children: renderItem(item, index === activeIndex)
+              },
+              getKey(item)
+            )),
+            isLoading && /* @__PURE__ */ jsx(LoadingRow, { label: copy.loading }),
+            showNoResults && /* @__PURE__ */ jsx(NoResultsRow, { label: copy.noResults })
+          ]
+        }
+      ) })
+    }
+  );
+}
+
+export {
+  suggestionTypeIcon,
+  AutocompleteInput,
+  ChipList,
+  DefaultSuggestion,
+  LoadingRow,
+  NoResultsRow,
+  SuggestionListBox
+};
+//# sourceMappingURL=chunk-BN742L2M.js.map

package/dist/chunk-BN742L2M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Autocomplete/Autocomplete.parts.tsx"],"sourcesContent":["import LinkIcon from '@mui/icons-material/Link';\nimport SearchIcon from '@mui/icons-material/Search';\nimport Box from '@mui/material/Box/index.js';\nimport Chip from '@mui/material/Chip/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport List from '@mui/material/List/index.js';\nimport ListItem from '@mui/material/ListItem/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Popper from '@mui/material/Popper/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { highlightLabel, type MatchMode } from './Autocomplete.helpers';\nimport type { SuggestionItemState, SuggestionType } from './Autocomplete.types';\nimport type { AutocompleteCopy } from '../../../copy';\nimport { fieldTextFieldStyles } from '../../../tokens/field-height';\nimport { rem, sxRem } from '../../../tokens/relative';\n\nconst StyledPopper = styled(Popper)(({ theme }) => ({\n  zIndex: theme.zIndex.tooltip,\n  width: '100%',\n  maxHeight: rem(theme, 300),\n  overflow: 'auto',\n  // Popper.js writes the computed position (and stamps `data-popper-placement`)\n  // in a layout effect that can land AFTER the first paint. Until it does, the\n  // element would paint once unpositioned — at the offset-parent origin, far\n  // left and full width — then jump under the input, a visible per-keystroke\n  // flash as the list re-renders. Hide that unpositioned first frame; it becomes\n  // visible the instant popper assigns a placement.\n  '&:not([data-popper-placement])': { visibility: 'hidden' },\n}));\n\nconst InlineSuggestionDisplay = styled('div')(({ theme }) => ({\n  position: 'absolute',\n  pointerEvents: 'none',\n  left: rem(theme, 14), // Match TextField padding\n  top: '50%',\n  transform: 'translateY(-50%)',\n  fontSize: 'inherit',\n  fontFamily: 'inherit',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  zIndex: 1,\n}));\n\nconst UserTextTwin = styled('span')({\n  visibility: 'hidden',\n});\n\nconst GhostText = styled('span')(({ theme }) => ({\n  color: theme.palette.text.secondary,\n  opacity: 0.6,\n}));\n\nconst ChipContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: theme.spacing(0.5),\n  marginBottom: theme.spacing(1),\n}));\n\n/** Leading icon for a typed suggestion (search vs. link); null for untyped items. */\nexport function suggestionTypeIcon(type: SuggestionType | undefined): React.ReactNode {\n  const sx = { color: 'text.secondary', flexShrink: 0 } as const;\n  if (type === 'link') return <LinkIcon fontSize=\"small\" sx={sx} />;\n  if (type === 'search') return <SearchIcon fontSize=\"small\" sx={sx} />;\n  return null;\n}\n\n/** The inline ghost-text overlay: an invisible twin of the typed text + the grey remainder. */\nfunction GhostOverlay({ inputValue, ghost }: { inputValue: string; ghost: string }): React.JSX.Element {\n  return (\n    <InlineSuggestionDisplay>\n      <UserTextTwin>{inputValue}</UserTextTwin>\n      <GhostText>{ghost}</GhostText>\n    </InlineSuggestionDisplay>\n  );\n}\n\nexport interface AutocompleteInputProps {\n  id: string;\n  listId: string;\n  inputRef: React.RefObject<HTMLInputElement | null>;\n  inputValue: string;\n  ghost: string;\n  showGhost: boolean;\n  isInputFocused: boolean;\n  open: boolean;\n  activeDescendant: string | undefined;\n  isLoading: boolean;\n  disabled: boolean;\n  autoFocus: boolean;\n  placeholder: string;\n  startAdornment?: React.ReactNode;\n  inputAriaLabel?: string;\n  inputClassName?: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  onFocus: () => void;\n  onBlur: () => void;\n  onCompositionStart: () => void;\n  onCompositionEnd: () => void;\n}\n\n/** The combobox text field plus its inline ghost-text overlay. */\nexport function AutocompleteInput(props: AutocompleteInputProps): React.JSX.Element {\n  const theme = useTheme();\n  const showOverlay = Boolean(props.ghost) && props.showGhost && props.isInputFocused;\n  return (\n    <Box sx={{ position: 'relative' }}>\n      {showOverlay && <GhostOverlay inputValue={props.inputValue} ghost={props.ghost} />}\n      <TextField\n        ref={props.inputRef}\n        fullWidth\n        sx={fieldTextFieldStyles}\n        value={props.inputValue}\n        onChange={props.onChange}\n        onKeyDown={props.onKeyDown}\n        onFocus={props.onFocus}\n        onBlur={props.onBlur}\n        onCompositionStart={props.onCompositionStart}\n        onCompositionEnd={props.onCompositionEnd}\n        placeholder={props.placeholder}\n        disabled={props.disabled}\n        autoFocus={props.autoFocus}\n        className={props.inputClassName}\n        InputProps={{\n          startAdornment: props.startAdornment,\n          endAdornment: props.isLoading ? <CircularProgress size={rem(theme, 20)} /> : undefined,\n        }}\n        inputProps={{\n          role: 'combobox',\n          'aria-expanded': props.open,\n          'aria-controls': props.open ? props.listId : undefined,\n          'aria-activedescendant': props.activeDescendant,\n          'aria-autocomplete': 'list',\n          'aria-label': props.inputAriaLabel,\n          id: props.id,\n        }}\n      />\n    </Box>\n  );\n}\n\n/** Selected-item chips (multiple mode). */\nexport function ChipList<T>({\n  items,\n  getKey,\n  getLabel,\n  onRemove,\n  chipClassName,\n}: {\n  items: T[];\n  getKey: (item: T) => string;\n  getLabel: (item: T) => string;\n  onRemove: (item: T) => void;\n  chipClassName?: string;\n}): React.JSX.Element {\n  return (\n    <ChipContainer data-testid=\"selected-items-container\">\n      {items.map((item, index) => (\n        <Chip\n          key={`${getKey(item)}-${index}`}\n          label={getLabel(item)}\n          onDelete={() => onRemove(item)}\n          size=\"small\"\n          className={chipClassName}\n          data-testid={`selected-chip-${index}`}\n        />\n      ))}\n    </ChipContainer>\n  );\n}\n\n/** Default suggestion row: per-type icon + highlighted label + optional description. */\nexport function DefaultSuggestion<T>({\n  item,\n  state,\n  getLabel,\n  getDescription,\n  getSuggestionType,\n  matchMode,\n}: {\n  item: T;\n  state: SuggestionItemState;\n  getLabel: (item: T) => string;\n  getDescription?: (item: T) => string | undefined;\n  getSuggestionType: (item: T) => SuggestionType | undefined;\n  matchMode: MatchMode;\n}): React.JSX.Element {\n  const label = getLabel(item);\n  const description = getDescription?.(item);\n  const displayLabel = highlightLabel(label, state.query, matchMode);\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 1,\n        width: '100%',\n        // Bold the matched prefix (not a yellow <mark> highlight).\n        '& mark': { backgroundColor: 'transparent', color: 'inherit', fontWeight: 700 },\n      }}\n    >\n      {suggestionTypeIcon(getSuggestionType(item))}\n      <ListItemText\n        primary={<span dangerouslySetInnerHTML={{ __html: displayLabel }} />}\n        secondary={description}\n      />\n    </Box>\n  );\n}\n\n/** A \"Loading…\" row shown while async suggestions resolve. */\nexport function LoadingRow({ label }: { label: string }): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <ListItem>\n      <Box display=\"flex\" alignItems=\"center\" gap={1}>\n        <CircularProgress size={rem(theme, 16)} />\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {label}\n        </Typography>\n      </Box>\n    </ListItem>\n  );\n}\n\n/** The empty \"No results found\" row. */\nexport function NoResultsRow({ label }: { label: string }): React.JSX.Element {\n  return (\n    <ListItem>\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {label}\n      </Typography>\n    </ListItem>\n  );\n}\n\n/** Keep the Popper the same width as its anchor input. */\nconst SAME_WIDTH_MODIFIER = {\n  name: 'sameWidth',\n  enabled: true,\n  fn: ({ state }: { state: { elements: { reference?: unknown }; styles: { popper?: Record<string, string> }; rects: { reference: { width: number } } } }) => {\n    if (state.elements.reference && state.styles.popper) {\n      state.styles.popper.width = `${state.rects.reference.width}px`;\n    }\n  },\n  phase: 'beforeWrite' as const,\n  requires: ['computeStyles'],\n};\n\nexport interface SuggestionListBoxProps<T> {\n  copy: AutocompleteCopy;\n  open: boolean;\n  anchorEl: HTMLElement | null;\n  portal: boolean | { container?: HTMLElement };\n  listRef: React.RefObject<HTMLUListElement | null>;\n  listId: string;\n  optionIdPrefix: string;\n  items: T[];\n  activeIndex: number;\n  isLoading: boolean;\n  showNoResults: boolean;\n  getKey: (item: T) => string;\n  onSelect: (item: T) => void;\n  onHover: (index: number) => void;\n  renderItem: (item: T, active: boolean) => React.ReactNode;\n  listClassName?: string;\n  itemClassName?: string;\n  activeItemClassName?: string;\n}\n\n/** The suggestions dropdown: a same-width Popper with the option list + loading/empty rows. */\nexport function SuggestionListBox<T>({\n  copy,\n  open,\n  anchorEl,\n  portal,\n  listRef,\n  listId,\n  optionIdPrefix,\n  items,\n  activeIndex,\n  isLoading,\n  showNoResults,\n  getKey,\n  onSelect,\n  onHover,\n  renderItem,\n  listClassName,\n  itemClassName,\n  activeItemClassName,\n}: SuggestionListBoxProps<T>): React.JSX.Element {\n  return (\n    <StyledPopper\n      open={open}\n      anchorEl={anchorEl}\n      placement=\"bottom-start\"\n      disablePortal={!portal}\n      modifiers={[SAME_WIDTH_MODIFIER]}\n    >\n      <Paper elevation={8} className={listClassName} data-testid=\"suggestions-dropdown\">\n        <List\n          ref={listRef}\n          role=\"listbox\"\n          id={listId}\n          dense\n          sx={{ maxHeight: sxRem(300), overflow: 'auto' }}\n          data-testid=\"suggestions-list\"\n        >\n          {items.map((item, index) => (\n            <ListItem\n              key={getKey(item)}\n              id={`${optionIdPrefix}-${index}`}\n              role=\"option\"\n              component=\"div\"\n              sx={{\n                cursor: 'pointer',\n                backgroundColor: index === activeIndex ? 'action.hover' : 'transparent',\n                '&:hover': { backgroundColor: 'action.hover' },\n              }}\n              aria-selected={index === activeIndex}\n              onMouseDown={(e) => e.preventDefault()}\n              onClick={() => onSelect(item)}\n              onMouseEnter={() => onHover(index)}\n              className={`${itemClassName} ${index === activeIndex ? activeItemClassName : ''}`}\n              data-testid={`suggestion-item-${index}`}\n            >\n              {renderItem(item, index === activeIndex)}\n            </ListItem>\n          ))}\n          {isLoading && <LoadingRow label={copy.loading} />}\n          {showNoResults && <NoResultsRow label={copy.noResults} />}\n        </List>\n      </Paper>\n    </StyledPopper>\n  );\n}\n"],"mappings":"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","names":[]}