@backstage/ui 0.15.1-next.0 → 0.17.0-next.0

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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"}

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

@@ -1,28 +1,61 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { ListBox, ListBoxSection, Header, ListBoxItem, Text } from 'react-aria-components';
-import { RiCheckLine } from '@remixicon/react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ListBox, Collection, ListBoxLoadMoreItem, Text, ListBoxSection, Header } from 'react-aria-components';
+import clsx from 'clsx';
 import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
-import { SelectListBoxDefinition, SelectSectionDefinition, SelectListBoxItemDefinition } from './definition.esm.js';
+import { SelectListBoxDefinition, SelectItemTextDefinition, SelectListBoxItemDefinition, SelectSectionDefinition } from './definition.esm.js';
+import { normalizeOptions } from '../../utils/selectableCollection.esm.js';
+import { SelectItem } from './SelectItem.esm.js';
+import { Skeleton } from '../Skeleton/Skeleton.esm.js';
+import '../Skeleton/Skeleton.module.css.esm.js';
+import { useDelayedVisibility } from '../../hooks/useDelayedVisibility.esm.js';
 
+const loadingRowWidths = ["70%", "55%", "65%"];
+const loadingIndicatorDelayMs = 300;
+function LoadingRows({
+  count,
+  className,
+  rowClassName
+}) {
+  return /* @__PURE__ */ jsx("div", { className, "aria-hidden": "true", children: loadingRowWidths.slice(0, count).map((width) => /* @__PURE__ */ jsx("div", { className: rowClassName, children: /* @__PURE__ */ jsx(Skeleton, { width, height: "0.75rem" }) }, width)) });
+}
 const NoResults = () => {
   const { ownProps } = useDefinition(SelectListBoxDefinition, {});
   const { classes } = ownProps;
   return /* @__PURE__ */ jsx("div", { className: classes.noResults, children: "No results found." });
 };
-function SelectItem({ option }) {
-  const { ownProps } = useDefinition(SelectListBoxItemDefinition, {});
+function PlainOptionItem({ option }) {
+  const { ownProps } = useDefinition(SelectItemTextDefinition, {
+    title: option.label,
+    description: option.description,
+    leadingIcon: option.leadingIcon
+  });
   const { classes } = ownProps;
-  return /* @__PURE__ */ jsxs(
-    ListBoxItem,
+  const {
+    ownProps: { classes: legacyOptionClasses }
+  } = useDefinition(SelectListBoxItemDefinition, {});
+  return /* @__PURE__ */ jsx(
+    SelectItem,
     {
-      id: option.value,
-      textValue: option.label,
+      id: option.id,
+      value: option,
       className: classes.root,
+      textValue: option.label,
       isDisabled: option.disabled,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: classes.indicator, children: /* @__PURE__ */ jsx(RiCheckLine, {}) }),
-        /* @__PURE__ */ jsx(Text, { slot: "label", className: classes.label, children: option.label })
-      ]
+      showSelectionIndicator: true,
+      children: /* @__PURE__ */ jsxs("div", { className: classes.content, children: [
+        option.leadingIcon && /* @__PURE__ */ jsx("div", { className: classes.leadingIcon, children: option.leadingIcon }),
+        /* @__PURE__ */ jsxs("div", { className: classes.text, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              slot: "label",
+              className: clsx(classes.title, legacyOptionClasses.label),
+              children: option.label
+            }
+          ),
+          option.description && /* @__PURE__ */ jsx(Text, { slot: "description", className: classes.description, children: option.description })
+        ] })
+      ] })
     }
   );
 }
@@ -31,15 +64,138 @@ function SelectSectionItems({ section }) {
   const { classes } = ownProps;
   return /* @__PURE__ */ jsxs(ListBoxSection, { className: classes.root, children: [
     /* @__PURE__ */ jsx(Header, { className: classes.header, children: section.title }),
-    section.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { option }, option.value))
+    section.options.map((option) => /* @__PURE__ */ jsx(PlainOptionItem, { option }, option.id))
   ] });
 }
+function renderSelectOption(item) {
+  if ("options" in item) {
+    return /* @__PURE__ */ jsx(SelectSectionItems, { section: item }, item.title);
+  }
+  return /* @__PURE__ */ jsx(PlainOptionItem, { option: item }, item.id);
+}
+function SelectCollection({
+  normalizedOptions,
+  retainedOptions,
+  items,
+  children,
+  dependencies
+}) {
+  if (normalizedOptions) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      normalizedOptions.map(renderSelectOption),
+      Array.from(retainedOptions ?? [], (option) => /* @__PURE__ */ jsx(PlainOptionItem, { option }, option.id))
+    ] });
+  }
+  if (items) {
+    const renderItem = (item) => {
+      if (typeof children === "function") {
+        return children(item);
+      }
+      return /* @__PURE__ */ jsx(PlainOptionItem, { option: item });
+    };
+    return /* @__PURE__ */ jsx(Collection, { items, dependencies, children: renderItem });
+  }
+  return children;
+}
+function SelectEmptyState({
+  isLoading,
+  className,
+  rowClassName
+}) {
+  if (!isLoading) {
+    return /* @__PURE__ */ jsx(NoResults, {});
+  }
+  return /* @__PURE__ */ jsx(LoadingRows, { count: 3, className, rowClassName });
+}
+function SelectLoadMoreIndicator({
+  loading,
+  isCollectionLoading,
+  isIndicatorVisible,
+  className,
+  rowClassName
+}) {
+  if (!loading?.onLoadMore || isCollectionLoading) {
+    return null;
+  }
+  const onLoadMore = loading.state === "loadingMore" ? void 0 : loading.onLoadMore;
+  return /* @__PURE__ */ jsx(
+    ListBoxLoadMoreItem,
+    {
+      isLoading: isIndicatorVisible,
+      onLoadMore,
+      scrollOffset: 0,
+      children: /* @__PURE__ */ jsx(
+        LoadingRows,
+        {
+          count: 1,
+          className,
+          rowClassName
+        }
+      )
+    }
+  );
+}
 function SelectListBox(props) {
   const { ownProps } = useDefinition(SelectListBoxDefinition, props);
-  const { classes, options } = ownProps;
-  return /* @__PURE__ */ jsx(ListBox, { className: classes.root, renderEmptyState: () => /* @__PURE__ */ jsx(NoResults, {}), children: options?.map(
-    (item) => "options" in item ? /* @__PURE__ */ jsx(SelectSectionItems, { section: item }, item.title) : /* @__PURE__ */ jsx(SelectItem, { option: item }, item.value)
-  ) });
+  const {
+    classes,
+    options,
+    items,
+    children,
+    dependencies,
+    loading,
+    isStale,
+    retainedOptions
+  } = ownProps;
+  const normalizedOptions = options && normalizeOptions(options);
+  const isCollectionLoading = loading?.state === "loading" || loading?.state === "filtering" || loading?.state === "sorting";
+  const isBusy = isCollectionLoading || loading?.state === "loadingMore";
+  const showStale = useDelayedVisibility(
+    isStale ?? false,
+    loadingIndicatorDelayMs
+  );
+  const showLoadMoreIndicator = useDelayedVisibility(
+    loading?.state === "loadingMore",
+    loadingIndicatorDelayMs
+  );
+  const listBox = /* @__PURE__ */ jsxs(
+    ListBox,
+    {
+      className: classes.root,
+      "data-stale": showStale || void 0,
+      renderEmptyState: () => /* @__PURE__ */ jsx(
+        SelectEmptyState,
+        {
+          isLoading: isCollectionLoading,
+          className: classes.loading,
+          rowClassName: classes.loadingRow
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectCollection,
+          {
+            normalizedOptions,
+            retainedOptions,
+            items,
+            dependencies,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SelectLoadMoreIndicator,
+          {
+            loading,
+            isCollectionLoading,
+            isIndicatorVisible: showLoadMoreIndicator,
+            className: classes.loading,
+            rowClassName: classes.loadingRow
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx("div", { "aria-busy": isBusy || void 0, children: listBox });
 }
 
 export { SelectListBox };

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

@@ -1 +1 @@
-{"version":3,"file":"SelectListBox.esm.js","sources":["../../../src/components/Select/SelectListBox.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  ListBox,\n  ListBoxItem,\n  ListBoxSection,\n  Header,\n  Text,\n} from 'react-aria-components';\nimport { RiCheckLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  SelectListBoxDefinition,\n  SelectListBoxItemDefinition,\n  SelectSectionDefinition,\n} from './definition';\nimport type { Option, OptionSection, SelectOwnProps } from './types';\n\ninterface SelectListBoxProps {\n  options?: SelectOwnProps['options'];\n}\n\nconst NoResults = () => {\n  const { ownProps } = useDefinition(SelectListBoxDefinition, {});\n  const { classes } = ownProps;\n\n  return <div className={classes.noResults}>No results found.</div>;\n};\n\nfunction SelectItem({ option }: { option: Option }) {\n  const { ownProps } = useDefinition(SelectListBoxItemDefinition, {});\n  const { classes } = ownProps;\n\n  return (\n    <ListBoxItem\n      id={option.value}\n      textValue={option.label}\n      className={classes.root}\n      isDisabled={option.disabled}\n    >\n      <div className={classes.indicator}>\n        <RiCheckLine />\n      </div>\n      <Text slot=\"label\" className={classes.label}>\n        {option.label}\n      </Text>\n    </ListBoxItem>\n  );\n}\n\nfunction SelectSectionItems({ section }: { section: OptionSection }) {\n  const { ownProps } = useDefinition(SelectSectionDefinition, {});\n  const { classes } = ownProps;\n\n  return (\n    <ListBoxSection className={classes.root}>\n      <Header className={classes.header}>{section.title}</Header>\n      {section.options.map(option => (\n        <SelectItem key={option.value} option={option} />\n      ))}\n    </ListBoxSection>\n  );\n}\n\nexport function SelectListBox(props: SelectListBoxProps) {\n  const { ownProps } = useDefinition(SelectListBoxDefinition, props);\n  const { classes, options } = ownProps;\n\n  return (\n    <ListBox className={classes.root} renderEmptyState={() => <NoResults />}>\n      {options?.map(item =>\n        'options' in item ? (\n          <SelectSectionItems key={item.title} section={item} />\n        ) : (\n          <SelectItem key={item.value} option={item} />\n        ),\n      )}\n    </ListBox>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAoCA,MAAM,YAAY,MAAM;AACtB,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,uBAAA,EAAyB,EAAE,CAAA;AAC9D,EAAA,MAAM,EAAE,SAAQ,GAAI,QAAA;AAEpB,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,WAAW,QAAA,EAAA,mBAAA,EAAiB,CAAA;AAC7D,CAAA;AAEA,SAAS,UAAA,CAAW,EAAE,MAAA,EAAO,EAAuB;AAClD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,2BAAA,EAA6B,EAAE,CAAA;AAClE,EAAA,MAAM,EAAE,SAAQ,GAAI,QAAA;AAEpB,EAAA,uBACE,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,IAAI,MAAA,CAAO,KAAA;AAAA,MACX,WAAW,MAAA,CAAO,KAAA;AAAA,MAClB,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,YAAY,MAAA,CAAO,QAAA;AAAA,MAEnB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,OAAA,CAAQ,SAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,eAAY,CAAA,EACf,CAAA;AAAA,wBACA,GAAA,CAAC,QAAK,IAAA,EAAK,OAAA,EAAQ,WAAW,OAAA,CAAQ,KAAA,EACnC,iBAAO,KAAA,EACV;AAAA;AAAA;AAAA,GACF;AAEJ;AAEA,SAAS,kBAAA,CAAmB,EAAE,OAAA,EAAQ,EAA+B;AACnE,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,uBAAA,EAAyB,EAAE,CAAA;AAC9D,EAAA,MAAM,EAAE,SAAQ,GAAI,QAAA;AAEpB,EAAA,uBACE,IAAA,CAAC,cAAA,EAAA,EAAe,SAAA,EAAW,OAAA,CAAQ,IAAA,EACjC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,SAAA,EAAW,OAAA,CAAQ,MAAA,EAAS,kBAAQ,KAAA,EAAM,CAAA;AAAA,IACjD,OAAA,CAAQ,QAAQ,GAAA,CAAI,CAAA,MAAA,yBAClB,UAAA,EAAA,EAA8B,MAAA,EAAA,EAAd,MAAA,CAAO,KAAuB,CAChD;AAAA,GAAA,EACH,CAAA;AAEJ;AAEO,SAAS,cAAc,KAAA,EAA2B;AACvD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,yBAAyB,KAAK,CAAA;AACjE,EAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,QAAA;AAE7B,EAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,OAAA,CAAQ,IAAA,EAAM,kBAAkB,sBAAM,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,EAClE,QAAA,EAAA,OAAA,EAAS,GAAA;AAAA,IAAI,CAAA,IAAA,KACZ,SAAA,IAAa,IAAA,mBACX,GAAA,CAAC,sBAAoC,OAAA,EAAS,IAAA,EAAA,EAArB,IAAA,CAAK,KAAsB,oBAEpD,GAAA,CAAC,UAAA,EAAA,EAA4B,MAAA,EAAQ,IAAA,EAAA,EAApB,KAAK,KAAqB;AAAA,GAE/C,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SelectListBox.esm.js","sources":["../../../src/components/Select/SelectListBox.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  Collection,\n  Header,\n  ListBox,\n  ListBoxLoadMoreItem,\n  ListBoxSection,\n  Text,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  SelectItemTextDefinition,\n  SelectListBoxDefinition,\n  SelectListBoxItemDefinition,\n  SelectSectionDefinition,\n} from './definition';\nimport { normalizeOptions } from '../../utils/selectableCollection';\nimport type {\n  CollectionItem,\n  LoadingConfig,\n  NormalizedOption,\n  NormalizedOptionSection,\n} from '../../types/selectableCollection';\nimport type { SelectListBoxOwnProps } from './types';\nimport { SelectItem } from './SelectItem';\nimport { Skeleton } from '../Skeleton';\nimport { useDelayedVisibility } from '../../hooks/useDelayedVisibility';\n\nconst loadingRowWidths = ['70%', '55%', '65%'];\nconst loadingIndicatorDelayMs = 300;\n\nfunction LoadingRows({\n  count,\n  className,\n  rowClassName,\n}: {\n  count: number;\n  className: string;\n  rowClassName: string;\n}) {\n  return (\n    <div className={className} aria-hidden=\"true\">\n      {loadingRowWidths.slice(0, count).map(width => (\n        <div key={width} className={rowClassName}>\n          <Skeleton width={width} height=\"0.75rem\" />\n        </div>\n      ))}\n    </div>\n  );\n}\n\nconst NoResults = () => {\n  const { ownProps } = useDefinition(SelectListBoxDefinition, {});\n  const { classes } = ownProps;\n\n  return <div className={classes.noResults}>No results found.</div>;\n};\n\nfunction PlainOptionItem({ option }: { option: NormalizedOption }) {\n  const { ownProps } = useDefinition(SelectItemTextDefinition, {\n    title: option.label,\n    description: option.description,\n    leadingIcon: option.leadingIcon,\n  });\n  const { classes } = ownProps;\n  // Keep the original plain-option label class available for existing themes.\n  const {\n    ownProps: { classes: legacyOptionClasses },\n  } = useDefinition(SelectListBoxItemDefinition, {});\n\n  return (\n    <SelectItem\n      id={option.id}\n      value={option}\n      className={classes.root}\n      textValue={option.label}\n      isDisabled={option.disabled}\n      showSelectionIndicator\n    >\n      <div className={classes.content}>\n        {option.leadingIcon && (\n          <div className={classes.leadingIcon}>{option.leadingIcon}</div>\n        )}\n        <div className={classes.text}>\n          <Text\n            slot=\"label\"\n            className={clsx(classes.title, legacyOptionClasses.label)}\n          >\n            {option.label}\n          </Text>\n          {option.description && (\n            <Text slot=\"description\" className={classes.description}>\n              {option.description}\n            </Text>\n          )}\n        </div>\n      </div>\n    </SelectItem>\n  );\n}\n\nfunction SelectSectionItems({ section }: { section: NormalizedOptionSection }) {\n  const { ownProps } = useDefinition(SelectSectionDefinition, {});\n  const { classes } = ownProps;\n\n  return (\n    <ListBoxSection className={classes.root}>\n      <Header className={classes.header}>{section.title}</Header>\n      {section.options.map(option => (\n        <PlainOptionItem key={option.id} option={option} />\n      ))}\n    </ListBoxSection>\n  );\n}\n\nfunction renderSelectOption(item: NormalizedOption | NormalizedOptionSection) {\n  if ('options' in item) {\n    return <SelectSectionItems key={item.title} section={item} />;\n  }\n\n  return <PlainOptionItem key={item.id} option={item} />;\n}\n\nfunction SelectCollection<T extends CollectionItem>({\n  normalizedOptions,\n  retainedOptions,\n  items,\n  children,\n  dependencies,\n}: {\n  normalizedOptions?: Array<NormalizedOption | NormalizedOptionSection>;\n  retainedOptions?: ReadonlyArray<NormalizedOption>;\n  items?: Iterable<T>;\n  children?: React.ReactNode | ((item: T) => React.ReactElement);\n  dependencies?: ReadonlyArray<unknown>;\n}) {\n  if (normalizedOptions) {\n    return (\n      <>\n        {normalizedOptions.map(renderSelectOption)}\n        {Array.from(retainedOptions ?? [], option => (\n          <PlainOptionItem key={option.id} option={option} />\n        ))}\n      </>\n    );\n  }\n\n  if (items) {\n    const renderItem = (item: T) => {\n      if (typeof children === 'function') {\n        return children(item);\n      }\n\n      return <PlainOptionItem option={item as unknown as NormalizedOption} />;\n    };\n\n    return (\n      <Collection items={items} dependencies={dependencies}>\n        {renderItem}\n      </Collection>\n    );\n  }\n\n  return children as React.ReactNode;\n}\n\nfunction SelectEmptyState({\n  isLoading,\n  className,\n  rowClassName,\n}: {\n  isLoading: boolean;\n  className: string;\n  rowClassName: string;\n}) {\n  if (!isLoading) {\n    return <NoResults />;\n  }\n\n  return (\n    <LoadingRows count={3} className={className} rowClassName={rowClassName} />\n  );\n}\n\nfunction SelectLoadMoreIndicator({\n  loading,\n  isCollectionLoading,\n  isIndicatorVisible,\n  className,\n  rowClassName,\n}: {\n  loading?: LoadingConfig;\n  isCollectionLoading: boolean;\n  isIndicatorVisible: boolean;\n  className: string;\n  rowClassName: string;\n}) {\n  if (!loading?.onLoadMore || isCollectionLoading) {\n    return null;\n  }\n\n  const onLoadMore =\n    loading.state === 'loadingMore' ? undefined : loading.onLoadMore;\n\n  return (\n    <ListBoxLoadMoreItem\n      isLoading={isIndicatorVisible}\n      onLoadMore={onLoadMore}\n      scrollOffset={0}\n    >\n      <LoadingRows\n        count={1}\n        className={className}\n        rowClassName={rowClassName}\n      />\n    </ListBoxLoadMoreItem>\n  );\n}\n\nexport function SelectListBox<T extends CollectionItem = NormalizedOption>(\n  props: SelectListBoxOwnProps<T>,\n) {\n  const { ownProps } = useDefinition(SelectListBoxDefinition, props);\n  const {\n    classes,\n    options,\n    items,\n    children,\n    dependencies,\n    loading,\n    isStale,\n    retainedOptions,\n  } = ownProps;\n  const normalizedOptions = options && normalizeOptions(options);\n  const isCollectionLoading =\n    loading?.state === 'loading' ||\n    loading?.state === 'filtering' ||\n    loading?.state === 'sorting';\n  const isBusy = isCollectionLoading || loading?.state === 'loadingMore';\n  const showStale = useDelayedVisibility(\n    isStale ?? false,\n    loadingIndicatorDelayMs,\n  );\n  const showLoadMoreIndicator = useDelayedVisibility(\n    loading?.state === 'loadingMore',\n    loadingIndicatorDelayMs,\n  );\n\n  const listBox = (\n    <ListBox\n      className={classes.root}\n      data-stale={showStale || undefined}\n      renderEmptyState={() => (\n        <SelectEmptyState\n          isLoading={isCollectionLoading}\n          className={classes.loading}\n          rowClassName={classes.loadingRow}\n        />\n      )}\n    >\n      <SelectCollection\n        normalizedOptions={normalizedOptions}\n        retainedOptions={retainedOptions}\n        items={items}\n        dependencies={dependencies}\n      >\n        {children}\n      </SelectCollection>\n      <SelectLoadMoreIndicator\n        loading={loading}\n        isCollectionLoading={isCollectionLoading}\n        isIndicatorVisible={showLoadMoreIndicator}\n        className={classes.loading}\n        rowClassName={classes.loadingRow}\n      />\n    </ListBox>\n  );\n\n  return <div aria-busy={isBusy || undefined}>{listBox}</div>;\n}\n"],"names":[],"mappings":"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"}

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

@@ -12,7 +12,7 @@ function SelectTrigger(props) {
   const { classes, icon } = ownProps;
   return /* @__PURE__ */ jsxs(Button, { className: classes.root, ...dataAttributes, children: [
     icon,
-    /* @__PURE__ */ jsx(SelectValue, { className: classes.value }),
+    /* @__PURE__ */ jsx(SelectValue, { className: classes.value, children: ({ isPlaceholder, selectedText, defaultChildren }) => isPlaceholder ? defaultChildren : selectedText }),
     /* @__PURE__ */ jsx("div", { className: classes.chevron, children: /* @__PURE__ */ jsx(RiArrowDownSLine, { "aria-hidden": "true" }) })
   ] });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger.esm.js","sources":["../../../src/components/Select/SelectTrigger.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 { ReactNode } from 'react';\nimport { Button, SelectValue } from 'react-aria-components';\nimport { RiArrowDownSLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SelectTriggerDefinition } from './definition';\n\ninterface SelectTriggerProps {\n  icon?: ReactNode;\n}\n\nexport function SelectTrigger(props: SelectTriggerProps) {\n  const { ownProps, dataAttributes } = useDefinition(\n    SelectTriggerDefinition,\n    props,\n  );\n  const { classes, icon } = ownProps;\n\n  return (\n    <Button className={classes.root} {...dataAttributes}>\n      {icon}\n      <SelectValue className={classes.value} />\n      <div className={classes.chevron}>\n        <RiArrowDownSLine aria-hidden=\"true\" />\n      </div>\n    </Button>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA0BO,SAAS,cAAc,KAAA,EAA2B;AACvD,EAAA,MAAM,EAAE,QAAA,EAAU,cAAA,EAAe,GAAI,aAAA;AAAA,IACnC,uBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,IAAA,EAAK,GAAI,QAAA;AAE1B,EAAA,4BACG,MAAA,EAAA,EAAO,SAAA,EAAW,OAAA,CAAQ,IAAA,EAAO,GAAG,cAAA,EAClC,QAAA,EAAA;AAAA,IAAA,IAAA;AAAA,oBACD,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAW,OAAA,CAAQ,KAAA,EAAO,CAAA;AAAA,oBACvC,GAAA,CAAC,SAAI,SAAA,EAAW,OAAA,CAAQ,SACtB,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,aAAA,EAAY,MAAA,EAAO,CAAA,EACvC;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SelectTrigger.esm.js","sources":["../../../src/components/Select/SelectTrigger.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 { ReactNode } from 'react';\nimport { Button, SelectValue } from 'react-aria-components';\nimport { RiArrowDownSLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SelectTriggerDefinition } from './definition';\n\ninterface SelectTriggerProps {\n  icon?: ReactNode;\n}\n\nexport function SelectTrigger(props: SelectTriggerProps) {\n  const { ownProps, dataAttributes } = useDefinition(\n    SelectTriggerDefinition,\n    props,\n  );\n  const { classes, icon } = ownProps;\n\n  return (\n    <Button className={classes.root} {...dataAttributes}>\n      {icon}\n      <SelectValue className={classes.value}>\n        {({ isPlaceholder, selectedText, defaultChildren }) =>\n          isPlaceholder ? defaultChildren : selectedText\n        }\n      </SelectValue>\n      <div className={classes.chevron}>\n        <RiArrowDownSLine aria-hidden=\"true\" />\n      </div>\n    </Button>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA0BO,SAAS,cAAc,KAAA,EAA2B;AACvD,EAAA,MAAM,EAAE,QAAA,EAAU,cAAA,EAAe,GAAI,aAAA;AAAA,IACnC,uBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,IAAA,EAAK,GAAI,QAAA;AAE1B,EAAA,4BACG,MAAA,EAAA,EAAO,SAAA,EAAW,OAAA,CAAQ,IAAA,EAAO,GAAG,cAAA,EAClC,QAAA,EAAA;AAAA,IAAA,IAAA;AAAA,oBACD,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAW,OAAA,CAAQ,KAAA,EAC7B,QAAA,EAAA,CAAC,EAAE,aAAA,EAAe,YAAA,EAAc,eAAA,EAAgB,KAC/C,aAAA,GAAgB,kBAAkB,YAAA,EAEtC,CAAA;AAAA,oBACA,GAAA,CAAC,SAAI,SAAA,EAAW,OAAA,CAAQ,SACtB,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,aAAA,EAAY,MAAA,EAAO,CAAA,EACvC;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}