@backstage/ui 0.15.1-next.0 → 0.16.0

package/dist/components/Header/HeaderNav.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNav.esm.js","sources":["../../../src/components/Header/HeaderNav.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useCallback, useMemo, useRef, useState } from 'react';\nimport { useFocusVisible, useHover, useLink } from 'react-aria';\nimport {\n  matchRoutes,\n  resolvePath,\n  useInRouterContext,\n  useLocation,\n  useResolvedPath,\n} from 'react-router-dom';\nimport { Button as RAButton } from 'react-aria-components';\nimport { RiArrowDownSLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  HeaderNavDefinition,\n  HeaderNavItemDefinition,\n  HeaderNavGroupDefinition,\n} from './HeaderNavDefinition';\nimport { HeaderNavIndicators } from './HeaderNavIndicators';\nimport { MenuTrigger, Menu, MenuItem } from '../Menu';\nimport type {\n  HeaderNavLinkProps,\n  HeaderNavTabGroup,\n  HeaderNavTabItem,\n} from './types';\n\nfunction isTabGroup(tab: HeaderNavTabItem): tab is HeaderNavTabGroup {\n  return 'items' in tab;\n}\n\nfunction HeaderNavLink(props: HeaderNavLinkProps) {\n  const { ownProps, analytics } = useDefinition(HeaderNavItemDefinition, props);\n  const { id, label, href, active, registerRef, onHighlight } = ownProps;\n\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  const { linkProps } = useLink({ href }, linkRef);\n  const { hoverProps } = useHover({\n    onHoverStart: () => onHighlight(id),\n    onHoverEnd: () => onHighlight(null),\n  });\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    linkProps.onClick?.(e);\n    analytics.captureEvent('click', label, {\n      attributes: { to: href },\n    });\n  };\n\n  return (\n    <li>\n      <a\n        {...linkProps}\n        {...hoverProps}\n        ref={el => {\n          (\n            linkRef as React.MutableRefObject<HTMLAnchorElement | null>\n          ).current = el;\n          registerRef(id, el);\n        }}\n        href={href}\n        className={ownProps.classes.root}\n        aria-current={active ? 'page' : undefined}\n        onClick={handleClick}\n        onFocus={() => onHighlight(id)}\n        onBlur={() => onHighlight(null)}\n      >\n        {label}\n      </a>\n    </li>\n  );\n}\n\ninterface HeaderNavGroupItemProps {\n  group: HeaderNavTabGroup;\n  active: boolean;\n  activeChildId?: string;\n  registerRef: (key: string, el: HTMLElement | null) => void;\n  onHighlight: (key: string | null) => void;\n}\n\nfunction HeaderNavGroupItem(props: HeaderNavGroupItemProps) {\n  const { group, active, activeChildId, registerRef, onHighlight } = props;\n  const { ownProps } = useDefinition(HeaderNavGroupDefinition, {});\n  const { hoverProps } = useHover({\n    onHoverStart: () => onHighlight(group.id),\n    onHoverEnd: () => onHighlight(null),\n  });\n\n  return (\n    <li>\n      <MenuTrigger>\n        <RAButton\n          ref={el => {\n            registerRef(group.id, el);\n          }}\n          className={ownProps.classes.root}\n          aria-current={active ? 'page' : undefined}\n          {...hoverProps}\n          onFocus={() => onHighlight(group.id)}\n          onBlur={() => onHighlight(null)}\n        >\n          {group.label}\n          <RiArrowDownSLine size={16} />\n        </RAButton>\n        <Menu\n          selectionMode=\"single\"\n          selectedKeys={new Set(activeChildId ? [activeChildId] : [])}\n        >\n          {group.items.map(item => (\n            <MenuItem key={item.id} id={item.id} href={item.href}>\n              {item.label}\n            </MenuItem>\n          ))}\n        </Menu>\n      </MenuTrigger>\n    </li>\n  );\n}\n\ninterface HeaderNavProps {\n  tabs: HeaderNavTabItem[];\n  activeTabId?: string | null;\n}\n\nfunction useAutoActiveTabId(tabs: HeaderNavTabItem[]): string | undefined {\n  const basePath = useResolvedPath('.').pathname;\n  const { pathname } = useLocation();\n\n  return useMemo(() => {\n    const allTabs = tabs.flatMap(tab => (isTabGroup(tab) ? tab.items : [tab]));\n    const routeObjects = allTabs.map(tab => ({\n      path: `${resolvePath(tab.href, basePath).pathname}/*`,\n      id: tab.id,\n    }));\n    const matches = matchRoutes(routeObjects, pathname);\n    return matches?.[0]?.route.id;\n  }, [tabs, basePath, pathname]);\n}\n\nfunction HeaderNavAutoDetect(props: { tabs: HeaderNavTabItem[] }) {\n  const activeTabId = useAutoActiveTabId(props.tabs);\n  return <HeaderNavInner tabs={props.tabs} activeTabId={activeTabId} />;\n}\n\nfunction HeaderNavInner(props: HeaderNavProps) {\n  const { tabs, activeTabId } = props;\n  const { ownProps } = useDefinition(HeaderNavDefinition, {\n    tabs,\n    activeTabId,\n  });\n  const { classes } = ownProps;\n\n  const { isFocusVisible } = useFocusVisible();\n  const navRef = useRef<HTMLElement>(null);\n  const itemRefs = useRef<Map<string, HTMLElement>>(new Map());\n\n  const [highlightedKey, setHighlightedKey] = useState<string | null>(null);\n\n  // Resolve activeTabId to a top-level key (groups own their children's active state)\n  const { activeKey, activeChildId } = useMemo(() => {\n    if (!activeTabId) return { activeKey: undefined, activeChildId: undefined };\n    for (const item of tabs) {\n      if (isTabGroup(item)) {\n        const child = item.items.find(c => c.id === activeTabId);\n        if (child) {\n          return { activeKey: item.id, activeChildId: child.id };\n        }\n      } else if (item.id === activeTabId) {\n        return { activeKey: item.id, activeChildId: undefined };\n      }\n    }\n    return { activeKey: undefined, activeChildId: undefined };\n  }, [activeTabId, tabs]);\n\n  const registerRef = useCallback((key: string, el: HTMLElement | null) => {\n    if (el) {\n      itemRefs.current.set(key, el);\n    } else {\n      itemRefs.current.delete(key);\n    }\n  }, []);\n\n  return (\n    <nav\n      ref={navRef}\n      aria-label=\"Content navigation\"\n      className={classes.root}\n      data-focus-visible={isFocusVisible || undefined}\n    >\n      <ul role=\"list\" className={classes.list}>\n        {tabs.map(item =>\n          isTabGroup(item) ? (\n            <HeaderNavGroupItem\n              key={item.id}\n              group={item}\n              active={activeKey === item.id}\n              activeChildId={activeChildId}\n              registerRef={registerRef}\n              onHighlight={setHighlightedKey}\n            />\n          ) : (\n            <HeaderNavLink\n              key={item.id}\n              id={item.id}\n              label={item.label}\n              href={item.href}\n              active={activeKey === item.id}\n              registerRef={registerRef}\n              onHighlight={setHighlightedKey}\n            />\n          ),\n        )}\n      </ul>\n      <HeaderNavIndicators\n        navRef={navRef}\n        itemRefs={itemRefs}\n        activeKey={activeKey}\n        highlightedKey={highlightedKey}\n        classes={{ active: classes.active, hovered: classes.hovered }}\n      />\n    </nav>\n  );\n}\n\n/** @internal */\nexport function HeaderNav(props: HeaderNavProps) {\n  const inRouter = useInRouterContext();\n\n  if (props.activeTabId === undefined && inRouter) {\n    return <HeaderNavAutoDetect tabs={props.tabs} />;\n  }\n\n  return <HeaderNavInner tabs={props.tabs} activeTabId={props.activeTabId} />;\n}\n"],"names":["RAButton"],"mappings":"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"}
+{"version":3,"file":"HeaderNav.esm.js","sources":["../../../src/components/Header/HeaderNav.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useCallback, useMemo, useRef, useState } from 'react';\nimport { useFocusVisible, useHover, useLink } from 'react-aria';\nimport {\n  matchRoutes,\n  resolvePath,\n  useInRouterContext,\n  useLocation,\n  useResolvedPath,\n} from 'react-router-dom';\nimport { Button as RAButton } from 'react-aria-components';\nimport { RiArrowDownSLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  HeaderNavDefinition,\n  HeaderNavItemDefinition,\n  HeaderNavGroupDefinition,\n} from './HeaderNavDefinition';\nimport { HeaderNavIndicators } from './HeaderNavIndicators';\nimport { MenuTrigger, Menu, MenuItem } from '../Menu';\nimport type {\n  HeaderNavLinkProps,\n  HeaderNavTabGroup,\n  HeaderNavTabItem,\n} from './types';\n\nfunction isTabGroup(tab: HeaderNavTabItem): tab is HeaderNavTabGroup {\n  return 'items' in tab;\n}\n\nfunction HeaderNavLink(props: HeaderNavLinkProps) {\n  const { ownProps, analytics } = useDefinition(HeaderNavItemDefinition, props);\n  const { id, label, href, active, registerRef, onHighlight } = ownProps;\n\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  const { linkProps } = useLink({ href }, linkRef);\n  const { hoverProps } = useHover({\n    onHoverStart: () => onHighlight(id),\n    onHoverEnd: () => onHighlight(null),\n  });\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    linkProps.onClick?.(e);\n    analytics.captureEvent('click', label, {\n      attributes: { to: href },\n    });\n  };\n\n  return (\n    <li>\n      <a\n        {...linkProps}\n        {...hoverProps}\n        ref={el => {\n          (\n            linkRef as React.MutableRefObject<HTMLAnchorElement | null>\n          ).current = el;\n          registerRef(id, el);\n        }}\n        className={ownProps.classes.root}\n        aria-current={active ? 'page' : undefined}\n        onClick={handleClick}\n        onFocus={() => onHighlight(id)}\n        onBlur={() => onHighlight(null)}\n      >\n        {label}\n      </a>\n    </li>\n  );\n}\n\ninterface HeaderNavGroupItemProps {\n  group: HeaderNavTabGroup;\n  active: boolean;\n  activeChildId?: string;\n  registerRef: (key: string, el: HTMLElement | null) => void;\n  onHighlight: (key: string | null) => void;\n}\n\nfunction HeaderNavGroupItem(props: HeaderNavGroupItemProps) {\n  const { group, active, activeChildId, registerRef, onHighlight } = props;\n  const { ownProps } = useDefinition(HeaderNavGroupDefinition, {});\n  const { hoverProps } = useHover({\n    onHoverStart: () => onHighlight(group.id),\n    onHoverEnd: () => onHighlight(null),\n  });\n\n  return (\n    <li>\n      <MenuTrigger>\n        <RAButton\n          ref={el => {\n            registerRef(group.id, el);\n          }}\n          className={ownProps.classes.root}\n          aria-current={active ? 'page' : undefined}\n          {...hoverProps}\n          onFocus={() => onHighlight(group.id)}\n          onBlur={() => onHighlight(null)}\n        >\n          {group.label}\n          <RiArrowDownSLine size={16} />\n        </RAButton>\n        <Menu\n          selectionMode=\"single\"\n          selectedKeys={new Set(activeChildId ? [activeChildId] : [])}\n        >\n          {group.items.map(item => (\n            <MenuItem key={item.id} id={item.id} href={item.href}>\n              {item.label}\n            </MenuItem>\n          ))}\n        </Menu>\n      </MenuTrigger>\n    </li>\n  );\n}\n\ninterface HeaderNavProps {\n  tabs: HeaderNavTabItem[];\n  activeTabId?: string | null;\n}\n\nfunction useAutoActiveTabId(tabs: HeaderNavTabItem[]): string | undefined {\n  const basePath = useResolvedPath('.').pathname;\n  const { pathname } = useLocation();\n\n  return useMemo(() => {\n    const allTabs = tabs.flatMap(tab => (isTabGroup(tab) ? tab.items : [tab]));\n    const routeObjects = allTabs.map(tab => ({\n      path: `${resolvePath(tab.href, basePath).pathname}/*`,\n      id: tab.id,\n    }));\n    const matches = matchRoutes(routeObjects, pathname);\n    return matches?.[0]?.route.id;\n  }, [tabs, basePath, pathname]);\n}\n\nfunction HeaderNavAutoDetect(props: { tabs: HeaderNavTabItem[] }) {\n  const activeTabId = useAutoActiveTabId(props.tabs);\n  return <HeaderNavInner tabs={props.tabs} activeTabId={activeTabId} />;\n}\n\nfunction HeaderNavInner(props: HeaderNavProps) {\n  const { tabs, activeTabId } = props;\n  const { ownProps } = useDefinition(HeaderNavDefinition, {\n    tabs,\n    activeTabId,\n  });\n  const { classes } = ownProps;\n\n  const { isFocusVisible } = useFocusVisible();\n  const navRef = useRef<HTMLElement>(null);\n  const itemRefs = useRef<Map<string, HTMLElement>>(new Map());\n\n  const [highlightedKey, setHighlightedKey] = useState<string | null>(null);\n\n  // Resolve activeTabId to a top-level key (groups own their children's active state)\n  const { activeKey, activeChildId } = useMemo(() => {\n    if (!activeTabId) return { activeKey: undefined, activeChildId: undefined };\n    for (const item of tabs) {\n      if (isTabGroup(item)) {\n        const child = item.items.find(c => c.id === activeTabId);\n        if (child) {\n          return { activeKey: item.id, activeChildId: child.id };\n        }\n      } else if (item.id === activeTabId) {\n        return { activeKey: item.id, activeChildId: undefined };\n      }\n    }\n    return { activeKey: undefined, activeChildId: undefined };\n  }, [activeTabId, tabs]);\n\n  const registerRef = useCallback((key: string, el: HTMLElement | null) => {\n    if (el) {\n      itemRefs.current.set(key, el);\n    } else {\n      itemRefs.current.delete(key);\n    }\n  }, []);\n\n  return (\n    <nav\n      ref={navRef}\n      aria-label=\"Content navigation\"\n      className={classes.root}\n      data-focus-visible={isFocusVisible || undefined}\n    >\n      <ul role=\"list\" className={classes.list}>\n        {tabs.map(item =>\n          isTabGroup(item) ? (\n            <HeaderNavGroupItem\n              key={item.id}\n              group={item}\n              active={activeKey === item.id}\n              activeChildId={activeChildId}\n              registerRef={registerRef}\n              onHighlight={setHighlightedKey}\n            />\n          ) : (\n            <HeaderNavLink\n              key={item.id}\n              id={item.id}\n              label={item.label}\n              href={item.href}\n              active={activeKey === item.id}\n              registerRef={registerRef}\n              onHighlight={setHighlightedKey}\n            />\n          ),\n        )}\n      </ul>\n      <HeaderNavIndicators\n        navRef={navRef}\n        itemRefs={itemRefs}\n        activeKey={activeKey}\n        highlightedKey={highlightedKey}\n        classes={{ active: classes.active, hovered: classes.hovered }}\n      />\n    </nav>\n  );\n}\n\n/** @internal */\nexport function HeaderNav(props: HeaderNavProps) {\n  const inRouter = useInRouterContext();\n\n  if (props.activeTabId === undefined && inRouter) {\n    return <HeaderNavAutoDetect tabs={props.tabs} />;\n  }\n\n  return <HeaderNavInner tabs={props.tabs} activeTabId={props.activeTabId} />;\n}\n"],"names":["RAButton"],"mappings":"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"}

package/dist/components/Select/Select.esm.js

@@ -1,18 +1,52 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useEffect } from 'react';
-import { Select as Select$1, Popover } from 'react-aria-components';
+import { Select as Select$1 } from 'react-aria-components';
 import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import { SelectDefinition } from './definition.esm.js';
-import { PopoverDefinition } from '../Popover/definition.esm.js';
-import clsx from 'clsx';
 import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
 import '../FieldLabel/FieldLabel.module.css.esm.js';
 import { FieldError } from '../FieldError/FieldError.esm.js';
 import '../FieldError/FieldError.module.css.esm.js';
+import { Popover } from '../Popover/Popover.esm.js';
+import '../Popover/Popover.module.css.esm.js';
 import { SelectTrigger } from './SelectTrigger.esm.js';
 import { SelectContent } from './SelectContent.esm.js';
+import { useCollectionAdapter } from '../../hooks/useCollectionAdapter.esm.js';
+import { useTrackedSelectionKeys } from '../../hooks/useTrackedSelectionKeys.esm.js';
+import { resolveCollectionSource, toSelection, getItemKeys } from '../../utils/selectableCollection.esm.js';
 
-const Select = forwardRef((props, ref) => {
+function resolveSelectSearch({
+  search,
+  searchable,
+  searchPlaceholder
+}) {
+  if (search !== void 0) {
+    return search;
+  }
+  if (searchable) {
+    return { placeholder: searchPlaceholder };
+  }
+  return void 0;
+}
+function resolveContentSearch(search, collection) {
+  if (typeof search !== "object") {
+    return search;
+  }
+  return {
+    ...search,
+    inputValue: collection.inputValue,
+    defaultInputValue: collection.defaultInputValue,
+    onInputChange: collection.onInputChange
+  };
+}
+function getRetainedOptions(flatOptions, canonicalItems) {
+  if (!flatOptions) {
+    return void 0;
+  }
+  const sourceIds = getItemKeys(flatOptions);
+  return canonicalItems.filter((item) => !sourceIds.has(item.id));
+}
+function SelectImpl(props, ref) {
   const { ownProps, restProps, dataAttributes } = useDefinition(
     SelectDefinition,
     {
@@ -20,7 +54,6 @@ const Select = forwardRef((props, ref) => {
       ...props
     }
   );
-  const { ownProps: popoverOwnProps } = useDefinition(PopoverDefinition, {});
   const {
     classes,
     label,
@@ -29,6 +62,11 @@ const Select = forwardRef((props, ref) => {
     icon,
     searchable,
     searchPlaceholder,
+    search,
+    loading,
+    items,
+    children,
+    dependencies,
     isRequired,
     secondaryLabel
   } = ownProps;
@@ -42,6 +80,34 @@ const Select = forwardRef((props, ref) => {
     }
   }, [label, ariaLabel, ariaLabelledBy]);
   const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
+  const resolvedSearch = resolveSelectSearch({
+    search,
+    searchable,
+    searchPlaceholder
+  });
+  const collectionSource = resolveCollectionSource({ options, items });
+  const controlledValue = restProps.value !== void 0 ? restProps.value : restProps.selectedKey;
+  const defaultValue = restProps.defaultValue !== void 0 ? restProps.defaultValue : restProps.defaultSelectedKey;
+  const trackedSelection = useTrackedSelectionKeys({
+    selectedKeys: controlledValue === void 0 ? void 0 : toSelection(controlledValue),
+    defaultSelectedKeys: toSelection(defaultValue)
+  });
+  const collection = useCollectionAdapter({
+    items: collectionSource.source,
+    selectedKeys: trackedSelection.selectedKeys,
+    search: resolvedSearch,
+    loading
+  });
+  const retainedOptions = getRetainedOptions(
+    collectionSource.flatOptions,
+    collection.canonicalItems
+  );
+  const renderedItems = collectionSource.rendersItems ? collection.canonicalItems : void 0;
+  const contentSearch = resolveContentSearch(resolvedSearch, collection);
+  const handleChange = (value) => {
+    trackedSelection.onSelectionChange(toSelection(value));
+    restProps.onChange?.(value);
+  };
   return /* @__PURE__ */ jsxs(
     Select$1,
     {
@@ -49,6 +115,8 @@ const Select = forwardRef((props, ref) => {
       ...dataAttributes,
       ref,
       ...restProps,
+      onChange: handleChange,
+      allowsEmptyCollection: true,
       children: [
         /* @__PURE__ */ jsx(
           FieldLabel,
@@ -61,25 +129,25 @@ const Select = forwardRef((props, ref) => {
         ),
         /* @__PURE__ */ jsx(SelectTrigger, { icon }),
         /* @__PURE__ */ jsx(FieldError, {}),
-        /* @__PURE__ */ jsx(
-          Popover,
+        /* @__PURE__ */ jsx(Popover, { className: classes.popover, hideArrow: true, ...dataAttributes, children: /* @__PURE__ */ jsx(
+          SelectContent,
           {
-            className: clsx(popoverOwnProps.classes.root, classes.popover),
-            ...dataAttributes,
-            children: /* @__PURE__ */ jsx(
-              SelectContent,
-              {
-                searchable,
-                searchPlaceholder,
-                options
-              }
-            )
+            search: contentSearch,
+            options: collectionSource.options,
+            items: renderedItems,
+            dependencies,
+            loading: collection.loading,
+            isStale: collection.isStale,
+            visibleIds: collection.visibleIds,
+            retainedOptions,
+            children
           }
-        )
+        ) })
       ]
     }
   );
-});
+}
+const Select = forwardRef(SelectImpl);
 Select.displayName = "Select";
 
 export { Select };

package/dist/components/Select/Select.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.esm.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect } from 'react';\nimport { Select as AriaSelect, Popover } from 'react-aria-components';\nimport { SelectProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SelectDefinition } from './definition';\nimport { PopoverDefinition } from '../Popover/definition';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { SelectTrigger } from './SelectTrigger';\nimport { SelectContent } from './SelectContent';\n\n/**\n * A dropdown picker for selecting one or multiple options from a list, with optional search filtering and inline error display.\n *\n * @public\n */\nexport const Select = forwardRef<\n  HTMLDivElement,\n  SelectProps<'single' | 'multiple'>\n>((props, ref) => {\n  const { ownProps, restProps, dataAttributes } = useDefinition(\n    SelectDefinition,\n    {\n      placeholder: 'Select an option',\n      ...props,\n    },\n  );\n  const { ownProps: popoverOwnProps } = useDefinition(PopoverDefinition, {});\n\n  const {\n    classes,\n    label,\n    description,\n    options,\n    icon,\n    searchable,\n    searchPlaceholder,\n    isRequired,\n    secondaryLabel,\n  } = ownProps;\n\n  const ariaLabel = restProps['aria-label'];\n  const ariaLabelledBy = restProps['aria-labelledby'];\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        'Select requires either a visible label, aria-label, or aria-labelledby for accessibility',\n      );\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);\n\n  return (\n    <AriaSelect\n      className={classes.root}\n      {...dataAttributes}\n      ref={ref}\n      {...restProps}\n    >\n      <FieldLabel\n        label={label}\n        secondaryLabel={secondaryLabelText}\n        description={description}\n        descriptionSlot=\"description\"\n      />\n      <SelectTrigger icon={icon} />\n      <FieldError />\n      <Popover\n        className={clsx(popoverOwnProps.classes.root, classes.popover)}\n        {...dataAttributes}\n      >\n        <SelectContent\n          searchable={searchable}\n          searchPlaceholder={searchPlaceholder}\n          options={options}\n        />\n      </Popover>\n    </AriaSelect>\n  );\n});\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":";;;;;;;;;;;;;;AAiCO,MAAM,MAAA,GAAS,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,IAC9C,gBAAA;AAAA,IACA;AAAA,MACE,WAAA,EAAa,kBAAA;AAAA,MACb,GAAG;AAAA;AACL,GACF;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,eAAA,KAAoB,aAAA,CAAc,iBAAA,EAAmB,EAAE,CAAA;AAEzE,EAAA,MAAM;AAAA,IACJ,OAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,QAAA;AAEJ,EAAA,MAAM,SAAA,GAAY,UAAU,YAAY,CAAA;AACxC,EAAA,MAAM,cAAA,GAAiB,UAAU,iBAAiB,CAAA;AAElD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,MAAA,OAAA,CAAQ,IAAA;AAAA,QACN;AAAA,OACF;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,EAAA,MAAM,kBAAA,GAAqB,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAExE,EAAA,uBACE,IAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAA,CAAQ,IAAA;AAAA,MAClB,GAAG,cAAA;AAAA,MACJ,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,cAAA,EAAgB,kBAAA;AAAA,YAChB,WAAA;AAAA,YACA,eAAA,EAAgB;AAAA;AAAA,SAClB;AAAA,wBACA,GAAA,CAAC,iBAAc,IAAA,EAAY,CAAA;AAAA,4BAC1B,UAAA,EAAA,EAAW,CAAA;AAAA,wBACZ,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,WAAW,IAAA,CAAK,eAAA,CAAgB,OAAA,CAAQ,IAAA,EAAM,QAAQ,OAAO,CAAA;AAAA,YAC5D,GAAG,cAAA;AAAA,YAEJ,QAAA,kBAAA,GAAA;AAAA,cAAC,aAAA;AAAA,cAAA;AAAA,gBACC,UAAA;AAAA,gBACA,iBAAA;AAAA,gBACA;AAAA;AAAA;AACF;AAAA;AACF;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
+{"version":3,"file":"Select.esm.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect } from 'react';\nimport { Select as AriaSelect } from 'react-aria-components';\nimport type {\n  CollectionItem,\n  NormalizedOption,\n} from '../../types/selectableCollection';\nimport type { Key } from 'react-aria-components';\nimport type { ChangeValueType } from 'react-stately/useSelectState';\nimport type { SelectContentOwnProps, SelectProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SelectDefinition } from './definition';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { Popover } from '../Popover';\nimport { SelectTrigger } from './SelectTrigger';\nimport { SelectContent } from './SelectContent';\nimport {\n  useCollectionAdapter,\n  type CollectionAdapterResult,\n} from '../../hooks/useCollectionAdapter';\nimport { useTrackedSelectionKeys } from '../../hooks/useTrackedSelectionKeys';\nimport {\n  getItemKeys,\n  resolveCollectionSource,\n  toSelection,\n} from '../../utils/selectableCollection';\n\nfunction resolveSelectSearch<T extends CollectionItem>({\n  search,\n  searchable,\n  searchPlaceholder,\n}: {\n  search?: SelectContentOwnProps<T>['search'];\n  searchable?: boolean;\n  searchPlaceholder?: string;\n}): SelectContentOwnProps<T>['search'] {\n  if (search !== undefined) {\n    return search;\n  }\n\n  if (searchable) {\n    return { placeholder: searchPlaceholder };\n  }\n\n  return undefined;\n}\n\nfunction resolveContentSearch<T extends CollectionItem>(\n  search: SelectContentOwnProps<T>['search'],\n  collection: CollectionAdapterResult<T>,\n): SelectContentOwnProps<T>['search'] {\n  if (typeof search !== 'object') {\n    return search;\n  }\n\n  return {\n    ...search,\n    inputValue: collection.inputValue,\n    defaultInputValue: collection.defaultInputValue,\n    onInputChange: collection.onInputChange,\n  } as SelectContentOwnProps<T>['search'];\n}\n\nfunction getRetainedOptions<T extends CollectionItem>(\n  flatOptions: NormalizedOption[] | undefined,\n  canonicalItems: T[],\n) {\n  if (!flatOptions) {\n    return undefined;\n  }\n\n  const sourceIds = getItemKeys(flatOptions);\n  return canonicalItems.filter(item => !sourceIds.has(item.id));\n}\n\n/**\n * A dropdown picker for selecting one or multiple options from a list, with optional search filtering and inline error display.\n *\n * @public\n */\nfunction SelectImpl<\n  M extends 'single' | 'multiple' = 'single' | 'multiple',\n  T extends CollectionItem = NormalizedOption,\n>(props: SelectProps<M, T>, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { ownProps, restProps, dataAttributes } = useDefinition(\n    SelectDefinition,\n    {\n      placeholder: 'Select an option',\n      ...props,\n    },\n  );\n\n  const {\n    classes,\n    label,\n    description,\n    options,\n    icon,\n    searchable,\n    searchPlaceholder,\n    search,\n    loading,\n    items,\n    children,\n    dependencies,\n    isRequired,\n    secondaryLabel,\n  } = ownProps;\n\n  const ariaLabel = restProps['aria-label'];\n  const ariaLabelledBy = restProps['aria-labelledby'];\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        'Select requires either a visible label, aria-label, or aria-labelledby for accessibility',\n      );\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);\n  const resolvedSearch = resolveSelectSearch<T>({\n    search: search as SelectContentOwnProps<T>['search'],\n    searchable,\n    searchPlaceholder,\n  });\n  const collectionSource = resolveCollectionSource<T>({ options, items });\n  const controlledValue =\n    restProps.value !== undefined ? restProps.value : restProps.selectedKey;\n  const defaultValue =\n    restProps.defaultValue !== undefined\n      ? restProps.defaultValue\n      : restProps.defaultSelectedKey;\n  const trackedSelection = useTrackedSelectionKeys({\n    selectedKeys:\n      controlledValue === undefined ? undefined : toSelection(controlledValue),\n    defaultSelectedKeys: toSelection(defaultValue),\n  });\n  const collection = useCollectionAdapter({\n    items: collectionSource.source,\n    selectedKeys: trackedSelection.selectedKeys,\n    search: resolvedSearch,\n    loading,\n  });\n  const retainedOptions = getRetainedOptions(\n    collectionSource.flatOptions,\n    collection.canonicalItems,\n  );\n  const renderedItems = collectionSource.rendersItems\n    ? collection.canonicalItems\n    : undefined;\n  const contentSearch = resolveContentSearch(resolvedSearch, collection);\n  const handleChange = (value: ChangeValueType<M>) => {\n    trackedSelection.onSelectionChange(toSelection(value));\n    restProps.onChange?.(value);\n  };\n\n  return (\n    <AriaSelect\n      className={classes.root}\n      {...dataAttributes}\n      ref={ref}\n      {...restProps}\n      onChange={handleChange}\n      allowsEmptyCollection\n    >\n      <FieldLabel\n        label={label}\n        secondaryLabel={secondaryLabelText}\n        description={description}\n        descriptionSlot=\"description\"\n      />\n      <SelectTrigger icon={icon} />\n      <FieldError />\n      <Popover className={classes.popover} hideArrow {...dataAttributes}>\n        <SelectContent\n          search={contentSearch}\n          options={collectionSource.options}\n          items={renderedItems}\n          dependencies={dependencies}\n          loading={collection.loading}\n          isStale={collection.isStale}\n          visibleIds={collection.visibleIds}\n          retainedOptions={\n            retainedOptions as unknown as ReadonlyArray<NormalizedOption>\n          }\n        >\n          {children}\n        </SelectContent>\n      </Popover>\n    </AriaSelect>\n  );\n}\n\n/** @public */\nexport const Select = forwardRef(SelectImpl) as {\n  <\n    M extends 'single' | 'multiple' = 'single' | 'multiple',\n    T extends { id: Key } = NormalizedOption,\n  >(\n    props: SelectProps<M, T> & React.RefAttributes<HTMLDivElement>,\n  ): React.ReactElement | null;\n  displayName?: string;\n};\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":"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"}

package/dist/components/Select/Select.module.css.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Select_bui-Select__2bfd6c12b2,\n  .Select_bui-SelectPopover__2bfd6c12b2 {\n    &[data-size='small'] {\n      --select-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --select-item-height: 2.5rem;\n    }\n  }\n\n  .Select_bui-Select__2bfd6c12b2 {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    flex: 1;\n  }\n\n  .Select_bui-SelectPopover__2bfd6c12b2 {\n    min-width: var(--trigger-width);\n  }\n\n  .Select_bui-SelectTrigger__2bfd6c12b2 {\n    box-sizing: border-box;\n    border-radius: var(--bui-radius-3);\n    border: none;\n    outline: none;\n    background-color: var(--bui-bg-neutral-1);\n    transition: box-shadow 0.2s ease-in-out;\n\n    &[data-on-bg='neutral-1'] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      background-color: var(--bui-bg-neutral-3);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      background-color: var(--bui-bg-neutral-4);\n    }\n\n    .Select_bui-Select__2bfd6c12b2[data-focused] & {\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    gap: var(--bui-space-2);\n    width: 100%;\n    height: var(--select-item-height);\n\n    .Select_bui-Select__2bfd6c12b2[data-size='small'] & {\n      padding-inline: var(--bui-space-3) 0;\n    }\n\n    .Select_bui-Select__2bfd6c12b2[data-size='medium'] & {\n      padding-inline: var(--bui-space-4) 0;\n    }\n\n    & svg {\n      flex-shrink: 0;\n      color: var(--bui-fg-secondary);\n\n      .Select_bui-Select__2bfd6c12b2[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .Select_bui-Select__2bfd6c12b2[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    .Select_bui-Select__2bfd6c12b2[data-invalid] & {\n      box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n    }\n\n    &[disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select_bui-SelectTriggerChevron__2bfd6c12b2 {\n    display: grid;\n    place-content: center;\n    width: var(--select-item-height);\n    height: var(--select-item-height);\n    flex-shrink: 0;\n    flex-grow: 0;\n  }\n\n  .Select_bui-SelectValue__2bfd6c12b2 {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    width: 100%;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    text-align: left;\n\n    & .Select_bui-SelectItemIndicator__2bfd6c12b2 {\n      display: none;\n    }\n\n    &[disabled] {\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select_bui-SelectList__2bfd6c12b2 {\n    overflow: auto;\n    min-height: 0;\n    padding-block: var(--bui-space-1);\n    padding-inline: var(--bui-space-1);\n\n    &[data-focus-visible] {\n      /* Remove default focus-visible outline because React Aria\n       * triggers it on mouse click open of the list for some reason.\n       * On keyboard use, the top item receives the focus style,\n       * so it's not needed anyway. */\n      outline: none;\n    }\n  }\n\n  .Select_bui-SelectItem__2bfd6c12b2 {\n    box-sizing: border-box;\n    position: relative;\n    display: grid;\n    grid-template-areas: 'icon text';\n    grid-template-columns: 1rem 1fr;\n    align-items: center;\n    min-height: var(--select-item-height);\n    padding-block: var(--bui-space-1);\n    padding-left: var(--bui-space-3);\n    padding-right: var(--bui-space-4);\n    color: var(--bui-fg-primary);\n    cursor: pointer;\n    user-select: none;\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-2);\n    outline: none;\n    border-radius: var(--bui-radius-2);\n\n    &[data-focused] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-selected] .Select_bui-SelectItemIndicator__2bfd6c12b2 {\n      opacity: 1;\n    }\n  }\n\n  .Select_bui-SelectItemIndicator__2bfd6c12b2 {\n    grid-area: icon;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  .Select_bui-SelectItemLabel__2bfd6c12b2 {\n    flex: 1;\n    grid-area: text;\n  }\n\n  .Select_bui-SelectSearchWrapper__2bfd6c12b2 {\n    flex-shrink: 0;\n    margin-bottom: var(--bui-space-1);\n    display: flex;\n    align-items: center;\n    padding-inline: var(--bui-space-3) 0;\n    border-bottom: 1px solid var(--bui-border-2);\n  }\n\n  .Select_bui-SelectSearch__2bfd6c12b2 {\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    color: var(--bui-fg-primary);\n    flex: 1;\n    outline: none;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    height: var(--select-item-height);\n    line-height: var(--select-item-height);\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    /* Hide native browser clear button */\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n  }\n\n  .Select_bui-SelectSearchClear__2bfd6c12b2 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n    width: var(--select-item-height);\n    height: var(--select-item-height);\n\n    input:placeholder-shown + & {\n      display: none;\n    }\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Select_bui-SelectSection__2bfd6c12b2 {\n    &:first-child .Select_bui-SelectSectionHeader__2bfd6c12b2 {\n      padding-top: 0;\n    }\n  }\n\n  .Select_bui-SelectSectionHeader__2bfd6c12b2 {\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    padding-top: var(--bui-space-3);\n    padding-left: var(--bui-space-3);\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-1);\n    font-weight: bold;\n    letter-spacing: 0.05rem;\n    text-transform: uppercase;\n  }\n\n  .Select_bui-SelectNoResults__2bfd6c12b2 {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n  }\n}\n";
-var styles = {"bui-Select":"Select_bui-Select__2bfd6c12b2","bui-SelectPopover":"Select_bui-SelectPopover__2bfd6c12b2","bui-SelectTrigger":"Select_bui-SelectTrigger__2bfd6c12b2","bui-SelectTriggerChevron":"Select_bui-SelectTriggerChevron__2bfd6c12b2","bui-SelectValue":"Select_bui-SelectValue__2bfd6c12b2","bui-SelectItemIndicator":"Select_bui-SelectItemIndicator__2bfd6c12b2","bui-SelectList":"Select_bui-SelectList__2bfd6c12b2","bui-SelectItem":"Select_bui-SelectItem__2bfd6c12b2","bui-SelectItemLabel":"Select_bui-SelectItemLabel__2bfd6c12b2","bui-SelectSearchWrapper":"Select_bui-SelectSearchWrapper__2bfd6c12b2","bui-SelectSearch":"Select_bui-SelectSearch__2bfd6c12b2","bui-SelectSearchClear":"Select_bui-SelectSearchClear__2bfd6c12b2","bui-SelectSection":"Select_bui-SelectSection__2bfd6c12b2","bui-SelectSectionHeader":"Select_bui-SelectSectionHeader__2bfd6c12b2","bui-SelectNoResults":"Select_bui-SelectNoResults__2bfd6c12b2"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Select_bui-Select__68de3fad8b,\n  .Select_bui-SelectPopover__68de3fad8b {\n    &[data-size='small'] {\n      --select-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --select-item-height: 2.5rem;\n    }\n  }\n\n  .Select_bui-Select__68de3fad8b {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    flex: 1;\n  }\n\n  .Select_bui-SelectPopover__68de3fad8b {\n    min-width: var(--trigger-width);\n\n    .bui-PopoverContent {\n      padding: 0;\n      display: grid;\n      grid-template-rows: minmax(0, 1fr);\n      overflow: hidden;\n    }\n  }\n\n  .Select_bui-SelectTrigger__68de3fad8b {\n    box-sizing: border-box;\n    border-radius: var(--bui-radius-3);\n    border: none;\n    outline: none;\n    background-color: var(--bui-bg-neutral-1);\n    transition: box-shadow 0.2s ease-in-out;\n\n    &[data-on-bg='neutral-1'] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      background-color: var(--bui-bg-neutral-3);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      background-color: var(--bui-bg-neutral-4);\n    }\n\n    .Select_bui-Select__68de3fad8b[data-focused] & {\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    gap: var(--bui-space-2);\n    width: 100%;\n    height: var(--select-item-height);\n\n    .Select_bui-Select__68de3fad8b[data-size='small'] & {\n      padding-inline: var(--bui-space-3) 0;\n    }\n\n    .Select_bui-Select__68de3fad8b[data-size='medium'] & {\n      padding-inline: var(--bui-space-4) 0;\n    }\n\n    & svg {\n      flex-shrink: 0;\n      color: var(--bui-fg-secondary);\n\n      .Select_bui-Select__68de3fad8b[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .Select_bui-Select__68de3fad8b[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    .Select_bui-Select__68de3fad8b[data-invalid] & {\n      box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n    }\n\n    &[disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select_bui-SelectTriggerChevron__68de3fad8b {\n    display: grid;\n    place-content: center;\n    width: var(--select-item-height);\n    height: var(--select-item-height);\n    flex-shrink: 0;\n    flex-grow: 0;\n  }\n\n  .Select_bui-SelectValue__68de3fad8b {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    width: 100%;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    text-align: left;\n\n    & .Select_bui-SelectItemIndicator__68de3fad8b {\n      display: none;\n    }\n\n    &[disabled] {\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select_bui-SelectList__68de3fad8b {\n    padding-block: var(--bui-space-1);\n    padding-inline: var(--bui-space-1);\n    transition: opacity 0.2s ease-in-out;\n\n    &[data-stale] {\n      opacity: 0.6;\n    }\n\n    &[data-focus-visible] {\n      /* Remove default focus-visible outline because React Aria\n       * triggers it on mouse click open of the list for some reason.\n       * On keyboard use, the top item receives the focus style,\n       * so it's not needed anyway. */\n      outline: none;\n    }\n  }\n\n  .Select_bui-SelectItem__68de3fad8b {\n    box-sizing: border-box;\n    position: relative;\n    display: block;\n    min-height: var(--select-item-height);\n    padding-block: var(--bui-space-1);\n    padding-left: var(--bui-space-3);\n    padding-right: var(--bui-space-4);\n    color: var(--bui-fg-primary);\n    cursor: pointer;\n    user-select: none;\n    font-size: var(--bui-font-size-3);\n    outline: none;\n    border-radius: var(--bui-radius-2);\n\n    &:has(> .Select_bui-SelectItemIndicator__68de3fad8b) {\n      display: grid;\n      grid-template-areas: 'icon text';\n      grid-template-columns: 1rem 1fr;\n      align-items: center;\n      gap: var(--bui-space-2);\n    }\n\n    &[data-focused] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-selected] .Select_bui-SelectItemIndicator__68de3fad8b {\n      opacity: 1;\n    }\n  }\n\n  .Select_bui-SelectItemIndicator__68de3fad8b {\n    grid-area: icon;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  .Select_bui-SelectItemLabel__68de3fad8b {\n    flex: 1;\n    grid-area: text;\n  }\n\n  .Select_bui-SelectItemContent__68de3fad8b {\n    grid-area: text;\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n    min-width: 0;\n  }\n\n  .Select_bui-SelectItemLeadingIcon__68de3fad8b {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n    flex-shrink: 0;\n\n    & > svg {\n      width: 1em;\n      height: 1em;\n    }\n  }\n\n  .Select_bui-SelectItemAvatar__68de3fad8b {\n    flex-shrink: 0;\n  }\n\n  .Select_bui-SelectItemTextContent__68de3fad8b {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  .Select_bui-SelectItemTitle__68de3fad8b,\n  .Select_bui-SelectItemDescription__68de3fad8b {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .Select_bui-SelectItemDescription__68de3fad8b {\n    font-size: var(--bui-font-size-2);\n    color: var(--bui-fg-secondary);\n  }\n\n  .Select_bui-SelectSearchWrapper__68de3fad8b {\n    flex-shrink: 0;\n    margin-bottom: var(--bui-space-1);\n    display: flex;\n    align-items: center;\n    padding-inline: var(--bui-space-3) 0;\n    border-bottom: 1px solid var(--bui-border-2);\n  }\n\n  .Select_bui-SelectContent__68de3fad8b {\n    display: grid;\n    grid-template-rows: auto minmax(0, 1fr);\n    min-height: 0;\n  }\n\n  .Select_bui-SelectResults__68de3fad8b {\n    grid-row: 2;\n    min-height: 0;\n    overflow: auto;\n  }\n\n  .Select_bui-SelectSearch__68de3fad8b {\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    color: var(--bui-fg-primary);\n    flex: 1;\n    outline: none;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    height: var(--select-item-height);\n    line-height: var(--select-item-height);\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    /* Hide native browser clear button */\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n  }\n\n  .Select_bui-SelectSearchClear__68de3fad8b {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n    width: var(--select-item-height);\n    height: var(--select-item-height);\n\n    input:placeholder-shown + & {\n      display: none;\n    }\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Select_bui-SelectSection__68de3fad8b {\n    &:first-child .Select_bui-SelectSectionHeader__68de3fad8b {\n      padding-top: 0;\n    }\n  }\n\n  .Select_bui-SelectSectionHeader__68de3fad8b {\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    padding-top: var(--bui-space-3);\n    padding-left: var(--bui-space-3);\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-1);\n    font-weight: bold;\n    letter-spacing: 0.05rem;\n    text-transform: uppercase;\n  }\n\n  .Select_bui-SelectNoResults__68de3fad8b {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n  }\n\n  .Select_bui-SelectLoading__68de3fad8b {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .Select_bui-SelectLoadingRow__68de3fad8b {\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    min-height: var(--select-item-height);\n    padding-block: var(--bui-space-1);\n    padding-left: calc(var(--bui-space-3) + 1rem + var(--bui-space-2));\n    padding-right: var(--bui-space-4);\n  }\n}\n";
+var styles = {"bui-Select":"Select_bui-Select__68de3fad8b","bui-SelectPopover":"Select_bui-SelectPopover__68de3fad8b","bui-SelectTrigger":"Select_bui-SelectTrigger__68de3fad8b","bui-SelectTriggerChevron":"Select_bui-SelectTriggerChevron__68de3fad8b","bui-SelectValue":"Select_bui-SelectValue__68de3fad8b","bui-SelectItemIndicator":"Select_bui-SelectItemIndicator__68de3fad8b","bui-SelectList":"Select_bui-SelectList__68de3fad8b","bui-SelectItem":"Select_bui-SelectItem__68de3fad8b","bui-SelectItemLabel":"Select_bui-SelectItemLabel__68de3fad8b","bui-SelectItemContent":"Select_bui-SelectItemContent__68de3fad8b","bui-SelectItemLeadingIcon":"Select_bui-SelectItemLeadingIcon__68de3fad8b","bui-SelectItemAvatar":"Select_bui-SelectItemAvatar__68de3fad8b","bui-SelectItemTextContent":"Select_bui-SelectItemTextContent__68de3fad8b","bui-SelectItemTitle":"Select_bui-SelectItemTitle__68de3fad8b","bui-SelectItemDescription":"Select_bui-SelectItemDescription__68de3fad8b","bui-SelectSearchWrapper":"Select_bui-SelectSearchWrapper__68de3fad8b","bui-SelectContent":"Select_bui-SelectContent__68de3fad8b","bui-SelectResults":"Select_bui-SelectResults__68de3fad8b","bui-SelectSearch":"Select_bui-SelectSearch__68de3fad8b","bui-SelectSearchClear":"Select_bui-SelectSearchClear__68de3fad8b","bui-SelectSection":"Select_bui-SelectSection__68de3fad8b","bui-SelectSectionHeader":"Select_bui-SelectSectionHeader__68de3fad8b","bui-SelectNoResults":"Select_bui-SelectNoResults__68de3fad8b","bui-SelectLoading":"Select_bui-SelectLoading__68de3fad8b","bui-SelectLoadingRow":"Select_bui-SelectLoadingRow__68de3fad8b"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/Select/SelectContent.esm.js

@@ -6,28 +6,80 @@ import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import { SelectContentDefinition } from './definition.esm.js';
 import { SelectListBox } from './SelectListBox.esm.js';
 
+function getSearchFilter({
+  visibleIds,
+  filter,
+  contains
+}) {
+  if (visibleIds) {
+    return (_textValue, _inputValue, node) => visibleIds.has(node.key);
+  }
+  if (filter) {
+    return (_textValue, inputValue, node) => filter(node.value, inputValue);
+  }
+  return (textValue, inputValue) => contains(textValue, inputValue);
+}
 function SelectContent(props) {
   const { contains } = useFilter({ sensitivity: "base" });
   const { ownProps } = useDefinition(SelectContentDefinition, props);
-  const { classes, searchable, searchPlaceholder, options } = ownProps;
-  if (!searchable) {
-    return /* @__PURE__ */ jsx(SelectListBox, { options });
+  const {
+    classes,
+    search,
+    options,
+    items,
+    children,
+    dependencies,
+    loading,
+    isStale,
+    visibleIds,
+    retainedOptions
+  } = ownProps;
+  const listBox = /* @__PURE__ */ jsx("div", { className: classes.results, children: /* @__PURE__ */ jsx(
+    SelectListBox,
+    {
+      options,
+      items,
+      dependencies,
+      loading,
+      isStale,
+      retainedOptions,
+      children
+    }
+  ) });
+  if (!search) {
+    return /* @__PURE__ */ jsx("div", { className: classes.root, children: listBox });
   }
-  return /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
-    /* @__PURE__ */ jsxs(
-      SearchField,
-      {
-        autoFocus: true,
-        className: classes.root,
-        "aria-label": searchPlaceholder,
-        children: [
-          /* @__PURE__ */ jsx(Input, { placeholder: searchPlaceholder, className: classes.search }),
-          /* @__PURE__ */ jsx(Button, { className: classes.searchClear, children: /* @__PURE__ */ jsx(RiCloseCircleLine, {}) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(SelectListBox, { options })
-  ] });
+  const searchProps = typeof search === "object" ? search : void 0;
+  const placeholder = searchProps?.placeholder ?? "Search...";
+  const filter = getSearchFilter({
+    visibleIds,
+    filter: searchProps?.filter,
+    contains
+  });
+  return /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      inputValue: searchProps?.inputValue,
+      defaultInputValue: searchProps?.defaultInputValue,
+      onInputChange: searchProps?.onInputChange,
+      filter,
+      children: /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+        /* @__PURE__ */ jsxs(
+          SearchField,
+          {
+            autoFocus: true,
+            className: classes.searchWrapper,
+            "aria-label": placeholder,
+            children: [
+              /* @__PURE__ */ jsx(Input, { placeholder, className: classes.search }),
+              /* @__PURE__ */ jsx(Button, { className: classes.searchClear, children: /* @__PURE__ */ jsx(RiCloseCircleLine, {}) })
+            ]
+          }
+        ),
+        listBox
+      ] })
+    }
+  );
 }
 
 export { SelectContent };

package/dist/components/Select/SelectContent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContent.esm.js","sources":["../../../src/components/Select/SelectContent.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Input,\n  SearchField,\n  Autocomplete,\n  Button,\n} from 'react-aria-components';\nimport { useFilter } from 'react-aria';\nimport { RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SelectContentDefinition } from './definition';\nimport { SelectListBox } from './SelectListBox';\nimport type { SelectOwnProps } from './types';\n\ninterface SelectContentProps {\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  options?: SelectOwnProps['options'];\n}\n\nexport function SelectContent(props: SelectContentProps) {\n  const { contains } = useFilter({ sensitivity: 'base' });\n  const { ownProps } = useDefinition(SelectContentDefinition, props);\n  const { classes, searchable, searchPlaceholder, options } = ownProps;\n\n  if (!searchable) {\n    return <SelectListBox options={options} />;\n  }\n\n  return (\n    <Autocomplete filter={contains}>\n      <SearchField\n        autoFocus\n        className={classes.root}\n        aria-label={searchPlaceholder}\n      >\n        <Input placeholder={searchPlaceholder} className={classes.search} />\n        <Button className={classes.searchClear}>\n          <RiCloseCircleLine />\n        </Button>\n      </SearchField>\n      <SelectListBox options={options} />\n    </Autocomplete>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAmCO,SAAS,cAAc,KAAA,EAA2B;AACvD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,UAAU,EAAE,WAAA,EAAa,QAAQ,CAAA;AACtD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,yBAAyB,KAAK,CAAA;AACjE,EAAA,MAAM,EAAE,OAAA,EAAS,UAAA,EAAY,iBAAA,EAAmB,SAAQ,GAAI,QAAA;AAE5D,EAAA,IAAI,CAAC,UAAA,EAAY;AACf,IAAA,uBAAO,GAAA,CAAC,iBAAc,OAAA,EAAkB,CAAA;AAAA,EAC1C;AAEA,EAAA,uBACE,IAAA,CAAC,YAAA,EAAA,EAAa,MAAA,EAAQ,QAAA,EACpB,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAS,IAAA;AAAA,QACT,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,YAAA,EAAY,iBAAA;AAAA,QAEZ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAM,WAAA,EAAa,iBAAA,EAAmB,SAAA,EAAW,QAAQ,MAAA,EAAQ,CAAA;AAAA,8BACjE,MAAA,EAAA,EAAO,SAAA,EAAW,QAAQ,WAAA,EACzB,QAAA,kBAAA,GAAA,CAAC,qBAAkB,CAAA,EACrB;AAAA;AAAA;AAAA,KACF;AAAA,oBACA,GAAA,CAAC,iBAAc,OAAA,EAAkB;AAAA,GAAA,EACnC,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SelectContent.esm.js","sources":["../../../src/components/Select/SelectContent.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Input,\n  SearchField,\n  Autocomplete,\n  Button,\n  type Key,\n} from 'react-aria-components';\nimport { useFilter } from 'react-aria';\nimport { RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SelectContentDefinition } from './definition';\nimport { SelectListBox } from './SelectListBox';\nimport type {\n  CollectionItem,\n  NormalizedOption,\n} from '../../types/selectableCollection';\nimport type { SelectContentOwnProps } from './types';\nimport type { Node } from '@react-types/shared';\n\ntype SearchFilter<T extends CollectionItem> = (\n  textValue: string,\n  inputValue: string,\n  node: Node<T>,\n) => boolean;\n\nfunction getSearchFilter<T extends CollectionItem>({\n  visibleIds,\n  filter,\n  contains,\n}: {\n  visibleIds?: Set<Key>;\n  filter?: (item: T, query: string) => boolean;\n  contains: (textValue: string, inputValue: string) => boolean;\n}): SearchFilter<T> {\n  if (visibleIds) {\n    return (_textValue, _inputValue, node) => visibleIds.has(node.key);\n  }\n\n  if (filter) {\n    return (_textValue, inputValue, node) =>\n      filter(node.value as T, inputValue);\n  }\n\n  return (textValue, inputValue) => contains(textValue, inputValue);\n}\n\nexport function SelectContent<T extends CollectionItem = NormalizedOption>(\n  props: SelectContentOwnProps<T>,\n) {\n  const { contains } = useFilter({ sensitivity: 'base' });\n  const { ownProps } = useDefinition(SelectContentDefinition, props);\n  const {\n    classes,\n    search,\n    options,\n    items,\n    children,\n    dependencies,\n    loading,\n    isStale,\n    visibleIds,\n    retainedOptions,\n  } = ownProps;\n\n  const listBox = (\n    <div className={classes.results}>\n      <SelectListBox\n        options={options}\n        items={items}\n        dependencies={dependencies}\n        loading={loading}\n        isStale={isStale}\n        retainedOptions={retainedOptions}\n      >\n        {children}\n      </SelectListBox>\n    </div>\n  );\n\n  if (!search) {\n    return <div className={classes.root}>{listBox}</div>;\n  }\n\n  const searchProps = typeof search === 'object' ? search : undefined;\n  const placeholder = searchProps?.placeholder ?? 'Search...';\n  const filter = getSearchFilter({\n    visibleIds,\n    filter: searchProps?.filter,\n    contains,\n  });\n\n  return (\n    <Autocomplete\n      inputValue={searchProps?.inputValue}\n      defaultInputValue={searchProps?.defaultInputValue}\n      onInputChange={searchProps?.onInputChange}\n      filter={filter}\n    >\n      <div className={classes.root}>\n        <SearchField\n          autoFocus\n          className={classes.searchWrapper}\n          aria-label={placeholder}\n        >\n          <Input placeholder={placeholder} className={classes.search} />\n          <Button className={classes.searchClear}>\n            <RiCloseCircleLine />\n          </Button>\n        </SearchField>\n        {listBox}\n      </div>\n    </Autocomplete>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAyCA,SAAS,eAAA,CAA0C;AAAA,EACjD,UAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAIoB;AAClB,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,OAAO,CAAC,UAAA,EAAY,WAAA,EAAa,SAAS,UAAA,CAAW,GAAA,CAAI,KAAK,GAAG,CAAA;AAAA,EACnE;AAEA,EAAA,IAAI,MAAA,EAAQ;AACV,IAAA,OAAO,CAAC,UAAA,EAAY,UAAA,EAAY,SAC9B,MAAA,CAAO,IAAA,CAAK,OAAY,UAAU,CAAA;AAAA,EACtC;AAEA,EAAA,OAAO,CAAC,SAAA,EAAW,UAAA,KAAe,QAAA,CAAS,WAAW,UAAU,CAAA;AAClE;AAEO,SAAS,cACd,KAAA,EACA;AACA,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,UAAU,EAAE,WAAA,EAAa,QAAQ,CAAA;AACtD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,yBAAyB,KAAK,CAAA;AACjE,EAAA,MAAM;AAAA,IACJ,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,QAAA;AAEJ,EAAA,MAAM,OAAA,mBACJ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,OAAA,EACtB,QAAA,kBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,KAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,eAAA;AAAA,MAEC;AAAA;AAAA,GACH,EACF,CAAA;AAGF,EAAA,IAAI,CAAC,MAAA,EAAQ;AACX,IAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,MAAO,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,EAChD;AAEA,EAAA,MAAM,WAAA,GAAc,OAAO,MAAA,KAAW,QAAA,GAAW,MAAA,GAAS,MAAA;AAC1D,EAAA,MAAM,WAAA,GAAc,aAAa,WAAA,IAAe,WAAA;AAChD,EAAA,MAAM,SAAS,eAAA,CAAgB;AAAA,IAC7B,UAAA;AAAA,IACA,QAAQ,WAAA,EAAa,MAAA;AAAA,IACrB;AAAA,GACD,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,YAAY,WAAA,EAAa,UAAA;AAAA,MACzB,mBAAmB,WAAA,EAAa,iBAAA;AAAA,MAChC,eAAe,WAAA,EAAa,aAAA;AAAA,MAC5B,MAAA;AAAA,MAEA,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,IAAA,EACtB,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAS,IAAA;AAAA,YACT,WAAW,OAAA,CAAQ,aAAA;AAAA,YACnB,YAAA,EAAY,WAAA;AAAA,YAEZ,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,KAAA,EAAA,EAAM,WAAA,EAA0B,SAAA,EAAW,OAAA,CAAQ,MAAA,EAAQ,CAAA;AAAA,kCAC3D,MAAA,EAAA,EAAO,SAAA,EAAW,QAAQ,WAAA,EACzB,QAAA,kBAAA,GAAA,CAAC,qBAAkB,CAAA,EACrB;AAAA;AAAA;AAAA,SACF;AAAA,QACC;AAAA,OAAA,EACH;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/Select/SelectItem.esm.js

@@ -0,0 +1,76 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { RiCheckLine } from '@remixicon/react';
+import { ListBoxItem, Text } from 'react-aria-components';
+import { Avatar } from '../Avatar/Avatar.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import '../Avatar/Avatar.module.css.esm.js';
+import { SelectItemDefinition, SelectItemProfileDefinition, SelectItemTextDefinition } from './definition.esm.js';
+
+function SelectItem(props) {
+  const { ownProps, restProps } = useDefinition(SelectItemDefinition, props);
+  const { classes, children, showSelectionIndicator } = ownProps;
+  return /* @__PURE__ */ jsx(ListBoxItem, { className: classes.root, ...restProps, children: (values) => {
+    const content = typeof children === "function" ? children(values) : children;
+    if (!showSelectionIndicator) {
+      return content;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: classes.indicator, children: /* @__PURE__ */ jsx(RiCheckLine, { "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsx("div", { className: classes.content, children: content })
+    ] });
+  } });
+}
+function SelectItemText(props) {
+  const { ownProps, restProps } = useDefinition(
+    SelectItemTextDefinition,
+    props
+  );
+  const { classes, title, description, leadingIcon } = ownProps;
+  return /* @__PURE__ */ jsx(
+    SelectItem,
+    {
+      className: classes.root,
+      textValue: title,
+      showSelectionIndicator: true,
+      ...restProps,
+      children: /* @__PURE__ */ jsxs("div", { className: classes.content, children: [
+        leadingIcon && /* @__PURE__ */ jsx("div", { className: classes.leadingIcon, children: leadingIcon }),
+        /* @__PURE__ */ jsxs("div", { className: classes.text, children: [
+          /* @__PURE__ */ jsx(Text, { slot: "label", className: classes.title, children: title }),
+          description && /* @__PURE__ */ jsx(Text, { slot: "description", className: classes.description, children: description })
+        ] })
+      ] })
+    }
+  );
+}
+function SelectItemProfile(props) {
+  const { ownProps, restProps } = useDefinition(
+    SelectItemProfileDefinition,
+    props
+  );
+  const { classes, name, src } = ownProps;
+  return /* @__PURE__ */ jsx(
+    SelectItem,
+    {
+      className: classes.root,
+      textValue: name,
+      showSelectionIndicator: true,
+      ...restProps,
+      children: /* @__PURE__ */ jsxs("div", { className: classes.content, children: [
+        /* @__PURE__ */ jsx("div", { className: classes.avatar, children: /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            src: src ?? "",
+            name,
+            size: "x-small",
+            purpose: "decoration"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Text, { slot: "label", className: classes.name, children: name })
+      ] })
+    }
+  );
+}
+
+export { SelectItem, SelectItemProfile, SelectItemText };
+//# sourceMappingURL=SelectItem.esm.js.map

package/dist/components/Select/SelectItem.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectItem.esm.js","sources":["../../../src/components/Select/SelectItem.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { RiCheckLine } from '@remixicon/react';\nimport { ListBoxItem, Text } from 'react-aria-components';\nimport { Avatar } from '../Avatar';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  SelectItemDefinition,\n  SelectItemProfileDefinition,\n  SelectItemTextDefinition,\n} from './definition';\nimport type {\n  SelectItemProfileProps,\n  SelectItemProps,\n  SelectItemTextProps,\n} from './types';\n\n/**\n * A low-level Select item wrapper for custom item content.\n *\n * @public\n */\nexport function SelectItem<T extends object = object>(\n  props: SelectItemProps<T>,\n) {\n  const { ownProps, restProps } = useDefinition(SelectItemDefinition, props);\n  const { classes, children, showSelectionIndicator } = ownProps;\n\n  return (\n    <ListBoxItem className={classes.root} {...restProps}>\n      {values => {\n        const content =\n          typeof children === 'function' ? children(values) : children;\n\n        if (!showSelectionIndicator) {\n          return content;\n        }\n\n        return (\n          <>\n            <div className={classes.indicator}>\n              <RiCheckLine aria-hidden=\"true\" />\n            </div>\n            <div className={classes.content}>{content}</div>\n          </>\n        );\n      }}\n    </ListBoxItem>\n  );\n}\n\n/**\n * A Select item preset with a title and optional supporting content.\n *\n * @public\n */\nexport function SelectItemText<T extends object = object>(\n  props: SelectItemTextProps<T>,\n) {\n  const { ownProps, restProps } = useDefinition(\n    SelectItemTextDefinition,\n    props,\n  );\n  const { classes, title, description, leadingIcon } = ownProps;\n\n  return (\n    <SelectItem\n      className={classes.root}\n      textValue={title}\n      showSelectionIndicator\n      {...restProps}\n    >\n      <div className={classes.content}>\n        {leadingIcon && (\n          <div className={classes.leadingIcon}>{leadingIcon}</div>\n        )}\n        <div className={classes.text}>\n          <Text slot=\"label\" className={classes.title}>\n            {title}\n          </Text>\n          {description && (\n            <Text slot=\"description\" className={classes.description}>\n              {description}\n            </Text>\n          )}\n        </div>\n      </div>\n    </SelectItem>\n  );\n}\n\n/**\n * A Select item preset for a person or other named profile.\n *\n * @public\n */\nexport function SelectItemProfile<T extends object = object>(\n  props: SelectItemProfileProps<T>,\n) {\n  const { ownProps, restProps } = useDefinition(\n    SelectItemProfileDefinition,\n    props,\n  );\n  const { classes, name, src } = ownProps;\n\n  return (\n    <SelectItem\n      className={classes.root}\n      textValue={name}\n      showSelectionIndicator\n      {...restProps}\n    >\n      <div className={classes.content}>\n        <div className={classes.avatar}>\n          <Avatar\n            src={src ?? ''}\n            name={name}\n            size=\"x-small\"\n            purpose=\"decoration\"\n          />\n        </div>\n        <Text slot=\"label\" className={classes.name}>\n          {name}\n        </Text>\n      </div>\n    </SelectItem>\n  );\n}\n"],"names":[],"mappings":"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"}