@backstage/ui 0.0.0-nightly-20251107024121 → 0.0.0-nightly-20251108024037

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +10 -1
  2. package/dist/components/Menu/Menu.module.css.esm.js +1 -1
  3. package/dist/components/SearchField/SearchField.module.css.esm.js +2 -2
  4. package/dist/components/Select/Select.esm.js +14 -52
  5. package/dist/components/Select/Select.esm.js.map +1 -1
  6. package/dist/components/Select/Select.module.css.esm.js +2 -2
  7. package/dist/components/Select/SelectContent.esm.js +55 -0
  8. package/dist/components/Select/SelectContent.esm.js.map +1 -0
  9. package/dist/components/Select/SelectListBox.esm.js +54 -0
  10. package/dist/components/Select/SelectListBox.esm.js.map +1 -0
  11. package/dist/components/Select/SelectTrigger.esm.js +23 -0
  12. package/dist/components/Select/SelectTrigger.esm.js.map +1 -0
  13. package/dist/components/Table/components/Row.esm.js +2 -0
  14. package/dist/components/Table/components/Row.esm.js.map +1 -1
  15. package/dist/index.d.ts +36 -14
  16. package/dist/utils/componentDefinitions.esm.js +11 -4
  17. package/dist/utils/componentDefinitions.esm.js.map +1 -1
  18. package/package.json +2 -3
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @backstage/ui
2
2
 
3
- ## 0.0.0-nightly-20251107024121
3
+ ## 0.0.0-nightly-20251108024037
4
4
 
5
5
  ### Minor Changes
6
6
 
@@ -134,21 +134,30 @@
134
134
  </Disclosure>;
135
135
  ```
136
136
 
137
+ - 816af0f: **BREAKING**: The `SelectProps` interface now accepts a generic type parameter for selection mode.
138
+
139
+ Added searchable and multiple selection support to Select component. The component now accepts `searchable`, `selectionMode`, and `searchPlaceholder` props to enable filtering and multi-selection modes.
140
+
141
+ Migration: If you're using `SelectProps` type directly, update from `SelectProps` to `SelectProps<'single' | 'multiple'>`. Component usage remains backward compatible.
142
+
137
143
  ### Patch Changes
138
144
 
139
145
  - d01de00: Fix broken external links in Backstage UI Header component.
140
146
  - 35a3614: Fixed CSS issues in Select component including popover width constraints, focus outline behavior, and overflow handling.
147
+ - 01476f0: Improved visual consistency of PasswordField, SearchField, and MenuAutocomplete components.
141
148
  - 26c6a78: Fix default text color in Backstage UI
142
149
  - deaa427: Fixed Text component to prevent `truncate` prop from being spread to the underlying DOM element.
143
150
  - 1059f95: Improved the Link component structure in Backstage UI.
144
151
  - 836b0c7: Fixed dialog backdrop appearance in dark mode.
145
152
  - 6874094: Migrated CellProfile component from Base UI Avatar to Backstage UI Avatar component.
146
153
  - 719d772: Avatar components in x-small and small sizes now display only one initial instead of two, improving readability at smaller dimensions.
154
+ - 6d35a6b: Removed `@base-ui-components/react` dependency as all components now use React Aria Components.
147
155
  - dac851f: Fix the default font size in Backstage UI.
148
156
  - 3c0ea67: Fix CSS layer ordering in Backstage UI to make sure component styles are loaded after tokens and base declarations.
149
157
  - 3b18d80: Fixed RadioGroup radio button ellipse distortion by preventing flex shrink and grow.
150
158
  - 4eb455c: Fix font smoothing as default in Backstage UI.
151
159
  - ff9f0c3: Enable tree-shaking of imports other than `*.css`.
160
+ - a00fb88: Fixed Table Row component to properly support opening links in new tabs via right-click or Cmd+Click when using the href prop.
152
161
  - e16ece5: Set the color-scheme property depending on theme
153
162
  - 1ef3ca4: Added new VisuallyHidden component for hiding content visually while keeping it accessible to screen readers.
154
163
  - 00bfb83: Fix default font wight and font family in Backstage UI.
package/dist/components/Menu/Menu.module.css.esm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
2
2
 
3
- 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 .Menu-module_bui-MenuPopover__2_pRD {\n display: flex;\n flex-direction: column;\n border: 1px solid var(--bui-border);\n border-radius: var(--bui-radius-2);\n background: var(--bui-bg-surface-1);\n color: var(--bui-fg-primary);\n outline: none;\n transition: transform 200ms, opacity 200ms;\n /* Let React Aria handle height constraints naturally */\n min-height: 0;\n /* Remove overflow from popover since ScrollArea will handle it */\n overflow: hidden;\n\n &[data-entering],\n &[data-exiting] {\n transform: var(--origin);\n opacity: 0;\n }\n\n &[data-placement='top'] {\n --origin: translateY(8px);\n }\n\n &[data-placement='bottom'] {\n --origin: translateY(-8px);\n }\n\n &[data-placement='right'] {\n --origin: translateX(-8px);\n }\n\n &[data-placement='left'] {\n --origin: translateX(8px);\n }\n }\n\n .Menu-module_bui-MenuContent__3DAPp {\n max-height: inherit;\n box-sizing: border-box;\n overflow: auto;\n min-width: 150px;\n box-sizing: border-box;\n outline: none;\n padding-block: var(--bui-space-1);\n }\n\n .Menu-module_bui-MenuItem__2UbNh {\n padding-inline: var(--bui-space-1);\n display: block;\n\n &[data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-open] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-color='danger'] .Menu-module_bui-MenuItemWrapper__3SEGE {\n color: var(--bui-fg-danger);\n }\n\n &[data-color='danger'][data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-danger);\n color: var(--bui-fg-danger);\n }\n\n &[data-has-submenu] {\n & > .Menu-module_bui-MenuItemWrapper__3SEGE > .Menu-module_bui-MenuItemArrow__2Gdal {\n display: block;\n }\n }\n }\n\n .Menu-module_bui-MenuItemWrapper__3SEGE {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 2rem;\n padding-inline: var(--bui-space-2);\n border-radius: var(--bui-radius-2);\n outline: none;\n cursor: default;\n color: var(--bui-fg-primary);\n font-size: var(--bui-font-size-3);\n gap: var(--bui-space-6);\n }\n\n .Menu-module_bui-MenuItemListBox__3OVkY {\n padding-inline: var(--bui-space-1);\n display: block;\n\n &:hover .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-selected] .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n & > svg {\n opacity: 1;\n color: var(--bui-fg-primary);\n }\n }\n }\n\n .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n\n & > svg {\n opacity: 0;\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuItemContent__2jc-_ {\n display: flex;\n align-items: center;\n gap: var(--bui-space-2);\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuItemArrow__2Gdal {\n display: none;\n width: 1rem;\n height: 1rem;\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuSection__3OeyZ {\n &:first-child .Menu-module_bui-MenuSectionHeader__yFmfK {\n padding-top: 0;\n }\n }\n\n .Menu-module_bui-MenuSectionHeader__yFmfK {\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 .Menu-module_bui-MenuSeparator__-EtU8 {\n height: 1px;\n background: var(--bui-border);\n margin-inline: var(--bui-space-1_5);\n margin-block: var(--bui-space-1);\n }\n\n .Menu-module_bui-MenuSearchField__1sNMj {\n position: relative;\n font-family: var(--bui-font-regular);\n width: 100%;\n flex-shrink: 0;\n\n &[data-empty] {\n .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n display: none;\n }\n }\n }\n\n .Menu-module_bui-MenuSearchFieldInput__2jPs5 {\n display: flex;\n align-items: center;\n padding: 0 var(--bui-space-3);\n border: none;\n border-bottom: 1px solid var(--bui-border);\n background-color: var(--bui-bg-surface-1);\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 width: 100%;\n height: 2rem;\n cursor: inherit;\n outline: none;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n }\n\n .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n position: absolute;\n right: var(--bui-space-2);\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-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\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuEmptyState__wPwuq {\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";
3
+ 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 .Menu-module_bui-MenuPopover__2_pRD {\n display: flex;\n flex-direction: column;\n border: 1px solid var(--bui-border);\n border-radius: var(--bui-radius-2);\n background: var(--bui-bg-surface-1);\n color: var(--bui-fg-primary);\n outline: none;\n transition: transform 200ms, opacity 200ms;\n /* Let React Aria handle height constraints naturally */\n min-height: 0;\n /* Remove overflow from popover since ScrollArea will handle it */\n overflow: hidden;\n\n &[data-entering],\n &[data-exiting] {\n transform: var(--origin);\n opacity: 0;\n }\n\n &[data-placement='top'] {\n --origin: translateY(8px);\n }\n\n &[data-placement='bottom'] {\n --origin: translateY(-8px);\n }\n\n &[data-placement='right'] {\n --origin: translateX(-8px);\n }\n\n &[data-placement='left'] {\n --origin: translateX(8px);\n }\n }\n\n .Menu-module_bui-MenuContent__3DAPp {\n max-height: inherit;\n box-sizing: border-box;\n overflow: auto;\n min-width: 150px;\n box-sizing: border-box;\n outline: none;\n padding-block: var(--bui-space-1);\n }\n\n .Menu-module_bui-MenuItem__2UbNh {\n padding-inline: var(--bui-space-1);\n display: block;\n\n &[data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-open] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-color='danger'] .Menu-module_bui-MenuItemWrapper__3SEGE {\n color: var(--bui-fg-danger);\n }\n\n &[data-color='danger'][data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-danger);\n color: var(--bui-fg-danger);\n }\n\n &[data-has-submenu] {\n & > .Menu-module_bui-MenuItemWrapper__3SEGE > .Menu-module_bui-MenuItemArrow__2Gdal {\n display: block;\n }\n }\n }\n\n .Menu-module_bui-MenuItemWrapper__3SEGE {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 2rem;\n padding-inline: var(--bui-space-2);\n border-radius: var(--bui-radius-2);\n outline: none;\n cursor: default;\n color: var(--bui-fg-primary);\n font-size: var(--bui-font-size-3);\n gap: var(--bui-space-6);\n }\n\n .Menu-module_bui-MenuItemListBox__3OVkY {\n padding-inline: var(--bui-space-1);\n display: block;\n\n &:hover .Menu-module_bui-MenuItemWrapper__3SEGE {\n background: var(--bui-bg-surface-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-selected] .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n & > svg {\n opacity: 1;\n color: var(--bui-fg-primary);\n }\n }\n }\n\n .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n\n & > svg {\n opacity: 0;\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuItemContent__2jc-_ {\n display: flex;\n align-items: center;\n gap: var(--bui-space-2);\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuItemArrow__2Gdal {\n display: none;\n width: 1rem;\n height: 1rem;\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuSection__3OeyZ {\n &:first-child .Menu-module_bui-MenuSectionHeader__yFmfK {\n padding-top: 0;\n }\n }\n\n .Menu-module_bui-MenuSectionHeader__yFmfK {\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 .Menu-module_bui-MenuSeparator__-EtU8 {\n height: 1px;\n background: var(--bui-border);\n margin-inline: var(--bui-space-1_5);\n margin-block: var(--bui-space-1);\n }\n\n .Menu-module_bui-MenuSearchField__1sNMj {\n font-family: var(--bui-font-regular);\n width: 100%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--bui-border);\n background-color: var(--bui-bg-surface-1);\n height: 2rem;\n\n &[data-empty] {\n .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n visibility: hidden;\n }\n }\n }\n\n .Menu-module_bui-MenuSearchFieldInput__2jPs5 {\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0;\n border: none;\n background-color: transparent;\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 width: 100%;\n height: 100%;\n outline: none;\n cursor: inherit;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &:first-child {\n padding-inline: var(--bui-space-3) 0;\n }\n }\n\n .Menu-module_bui-MenuSearchFieldClear__3bwIe {\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: 2rem;\n height: 2rem;\n\n &:hover {\n color: var(--bui-fg-primary);\n }\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu-module_bui-MenuEmptyState__wPwuq {\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";
4
4
  var styles = {"bui-MenuPopover":"Menu-module_bui-MenuPopover__2_pRD","bui-MenuContent":"Menu-module_bui-MenuContent__3DAPp","bui-MenuItem":"Menu-module_bui-MenuItem__2UbNh","bui-MenuItemWrapper":"Menu-module_bui-MenuItemWrapper__3SEGE","bui-MenuItemArrow":"Menu-module_bui-MenuItemArrow__2Gdal","bui-MenuItemListBox":"Menu-module_bui-MenuItemListBox__3OVkY","bui-MenuItemListBoxCheck":"Menu-module_bui-MenuItemListBoxCheck__3flwX","bui-MenuItemContent":"Menu-module_bui-MenuItemContent__2jc-_","bui-MenuSection":"Menu-module_bui-MenuSection__3OeyZ","bui-MenuSectionHeader":"Menu-module_bui-MenuSectionHeader__yFmfK","bui-MenuSeparator":"Menu-module_bui-MenuSeparator__-EtU8","bui-MenuSearchField":"Menu-module_bui-MenuSearchField__1sNMj","bui-MenuSearchFieldClear":"Menu-module_bui-MenuSearchFieldClear__3bwIe","bui-MenuSearchFieldInput":"Menu-module_bui-MenuSearchFieldInput__2jPs5","bui-MenuEmptyState":"Menu-module_bui-MenuEmptyState__wPwuq"};
5
5
  styleInject(css_248z);
6
6
 
package/dist/components/SearchField/SearchField.module.css.esm.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
2
2
 
3
- 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 .SearchField-module_bui-SearchField__2TyT_ {\n display: flex;\n flex-direction: column;\n font-family: var(--bui-font-regular);\n width: 100%;\n flex: 1;\n flex-shrink: 0;\n\n &[data-empty] {\n .SearchField-module_bui-SearchFieldClear__1gJQc {\n display: none;\n }\n }\n\n &[data-startCollapsed='true'] {\n transition: flex-basis 0.3s ease-in-out;\n padding: 0;\n flex: 0 1 auto;\n\n &[data-collapsed='true'] {\n flex-basis: 200px;\n }\n\n &[data-collapsed='false'] {\n cursor: pointer;\n\n &[data-size='medium'] {\n flex-basis: 2.5rem;\n height: 2.5rem;\n }\n\n &[data-size='small'] {\n flex-basis: 2rem;\n height: 2rem;\n }\n\n &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n &::placeholder {\n opacity: 0;\n }\n }\n\n &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n &::placeholder {\n opacity: 0;\n }\n }\n\n .SearchField-module_bui-SearchFieldWrapper__37bMg {\n .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n padding-right: 0px;\n }\n }\n }\n }\n }\n\n .SearchField-module_bui-SearchFieldWrapper__37bMg {\n position: relative;\n\n .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n padding-right: var(--bui-space-6);\n }\n\n &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n height: 2rem;\n }\n\n &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n height: 2.5rem;\n }\n\n &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n padding-left: var(--bui-space-8);\n }\n\n &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n padding-left: var(--bui-space-9);\n }\n }\n\n .SearchField-module_bui-SearchFieldInputIcon__EA0t9 {\n position: absolute;\n display: flex;\n justify-content: center;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-right: var(--bui-space-1);\n color: var(--bui-fg-primary);\n pointer-events: none;\n /* To animate the icon when the input is collapsed */\n transition: left 0.2s ease-in-out;\n\n &[data-size='small'] {\n width: 2rem;\n }\n\n &[data-size='medium'] {\n width: 2.5rem;\n }\n\n &[data-size='small'] svg {\n width: 1rem;\n height: 1rem;\n }\n\n &[data-size='medium'] svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .SearchField-module_bui-SearchFieldInput__3Opoj {\n display: flex;\n align-items: center;\n padding: 0 var(--bui-space-3);\n border-radius: var(--bui-radius-2);\n border: 1px solid var(--bui-border);\n background-color: var(--bui-bg-surface-1);\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 transition: padding 0.3s ease-in-out, border-color 0.2s ease-in-out,\n outline-color 0.2s ease-in-out;\n width: 100%;\n height: 100%;\n cursor: inherit;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &[data-focused] {\n outline-color: var(--bui-border-pressed);\n outline-width: 0px;\n }\n\n &[data-hovered] {\n border-color: var(--bui-border-hover);\n }\n\n &[data-focused] {\n border-color: var(--bui-border-pressed);\n outline-width: 0px;\n }\n\n &[data-invalid] {\n border-color: var(--bui-fg-danger);\n }\n\n &[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n border: 1px solid var(--bui-border-disabled);\n }\n }\n\n .SearchField-module_bui-SearchFieldClear__1gJQc {\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-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\n &:hover {\n color: var(--bui-fg-primary);\n }\n\n &[data-size='small'] {\n width: 2rem;\n height: 2rem;\n }\n\n &[data-size='medium'] {\n width: 2.5rem;\n height: 2.5rem;\n }\n\n & svg {\n width: 1rem;\n height: 1rem;\n }\n }\n}\n";
4
- var styles = {"bui-SearchField":"SearchField-module_bui-SearchField__2TyT_","bui-SearchFieldClear":"SearchField-module_bui-SearchFieldClear__1gJQc","bui-SearchFieldInput":"SearchField-module_bui-SearchFieldInput__3Opoj","bui-SearchFieldWrapper":"SearchField-module_bui-SearchFieldWrapper__37bMg","bui-SearchFieldInputIcon":"SearchField-module_bui-SearchFieldInputIcon__EA0t9"};
3
+ 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 .SearchField-module_bui-SearchField__2TyT_ {\n display: flex;\n flex-direction: column;\n font-family: var(--bui-font-regular);\n width: 100%;\n flex: 1;\n flex-shrink: 0;\n\n &[data-size='small'] {\n --search-field-item-height: 2rem;\n }\n\n &[data-size='medium'] {\n --search-field-item-height: 2.5rem;\n }\n\n &[data-empty] {\n .SearchField-module_bui-SearchFieldClear__1gJQc {\n display: none;\n }\n }\n\n &[data-startCollapsed='true'] {\n transition: flex-basis 0.3s ease-in-out;\n padding: 0;\n flex: 0 1 auto;\n\n &[data-collapsed='true'] {\n flex-basis: 200px;\n }\n\n &[data-collapsed='false'] {\n cursor: pointer;\n\n &[data-size='medium'] {\n flex-basis: 2.5rem;\n height: 2.5rem;\n }\n\n &[data-size='small'] {\n flex-basis: 2rem;\n height: 2rem;\n }\n\n &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n &::placeholder {\n opacity: 0;\n }\n }\n\n &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n &::placeholder {\n opacity: 0;\n }\n }\n\n .SearchField-module_bui-SearchFieldInputWrapper__1JEG8 {\n .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n padding-right: 0px;\n }\n }\n }\n }\n }\n\n .SearchField-module_bui-SearchFieldInputWrapper__1JEG8 {\n display: flex;\n align-items: center;\n border-radius: var(--bui-radius-2);\n border: 1px solid var(--bui-border);\n background-color: var(--bui-bg-surface-1);\n transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n\n &[data-size='small'] {\n height: 2rem;\n }\n\n &[data-size='medium'] {\n height: 2.5rem;\n }\n\n &:focus-within {\n border-color: var(--bui-border-pressed);\n outline-width: 0px;\n }\n\n &:hover {\n border-color: var(--bui-border-hover);\n }\n\n &[data-invalid] {\n border-color: var(--bui-fg-danger);\n }\n\n &[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n border: 1px solid var(--bui-border-disabled);\n }\n }\n\n .SearchField-module_bui-SearchFieldInputIcon__EA0t9 {\n flex: 0 0 auto;\n display: grid;\n place-content: center;\n color: var(--bui-fg-primary);\n pointer-events: none;\n width: var(--search-field-item-height);\n height: var(--search-field-item-height);\n /* To animate the icon when the input is collapsed */\n transition: opacity 0.2s ease-in-out;\n\n & svg {\n .SearchField-module_bui-SearchField__2TyT_[data-size='small'] & {\n width: 1rem;\n height: 1rem;\n }\n\n .SearchField-module_bui-SearchField__2TyT_[data-size='medium'] & {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n }\n\n .SearchField-module_bui-SearchFieldInput__3Opoj {\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0;\n border: none;\n background-color: transparent;\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 transition: padding 0.3s ease-in-out;\n width: 100%;\n height: 100%;\n outline: none;\n cursor: inherit;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n }\n\n &:first-child {\n .SearchField-module_bui-SearchField__2TyT_[data-size='small'] & {\n padding-inline: var(--bui-space-3) 0;\n }\n\n .SearchField-module_bui-SearchField__2TyT_[data-size='medium'] & {\n padding-inline: var(--bui-space-3) 0;\n }\n }\n }\n\n .SearchField-module_bui-SearchFieldClear__1gJQc {\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(--search-field-item-height);\n height: var(--search-field-item-height);\n\n &:hover {\n color: var(--bui-fg-primary);\n }\n\n & svg {\n width: 1rem;\n height: 1rem;\n }\n }\n}\n";
4
+ var styles = {"bui-SearchField":"SearchField-module_bui-SearchField__2TyT_","bui-SearchFieldClear":"SearchField-module_bui-SearchFieldClear__1gJQc","bui-SearchFieldInput":"SearchField-module_bui-SearchFieldInput__3Opoj","bui-SearchFieldInputWrapper":"SearchField-module_bui-SearchFieldInputWrapper__1JEG8","bui-SearchFieldInputIcon":"SearchField-module_bui-SearchFieldInputIcon__EA0t9"};
5
5
  styleInject(css_248z);
6
6
 
7
7
  export { styles as default };
package/dist/components/Select/Select.esm.js CHANGED
@@ -1,13 +1,14 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { forwardRef, useEffect } from 'react';
3
- import { Select as Select$1, Button, SelectValue, Popover, ListBox, ListBoxItem, Text } from 'react-aria-components';
3
+ import { Select as Select$1, Popover } from 'react-aria-components';
4
4
  import clsx from 'clsx';
5
5
  import { useStyles } from '../../hooks/useStyles.esm.js';
6
6
  import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
7
7
  import { FieldError } from '../FieldError/FieldError.esm.js';
8
8
  import styles from './Select.module.css.esm.js';
9
9
  import stylesPopover from '../Popover/Popover.module.css.esm.js';
10
- import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react';
10
+ import { SelectTrigger } from './SelectTrigger.esm.js';
11
+ import { SelectContent } from './SelectContent.esm.js';
11
12
 
12
13
  const Select = forwardRef((props, ref) => {
13
14
  const { classNames: popoverClassNames } = useStyles("Popover");
@@ -21,14 +22,13 @@ const Select = forwardRef((props, ref) => {
21
22
  label,
22
23
  description,
23
24
  options,
24
- placeholder,
25
- size,
26
25
  icon,
26
+ searchable,
27
+ searchPlaceholder,
27
28
  "aria-label": ariaLabel,
28
29
  "aria-labelledby": ariaLabelledBy,
29
30
  isRequired,
30
31
  secondaryLabel,
31
- style,
32
32
  ...rest
33
33
  } = cleanedProps;
34
34
  useEffect(() => {
@@ -57,23 +57,7 @@ const Select = forwardRef((props, ref) => {
57
57
  description
58
58
  }
59
59
  ),
60
- /* @__PURE__ */ jsxs(
61
- Button,
62
- {
63
- className: clsx(classNames.trigger, styles[classNames.trigger]),
64
- "data-size": dataAttributes["data-size"],
65
- children: [
66
- icon,
67
- /* @__PURE__ */ jsx(
68
- SelectValue,
69
- {
70
- className: clsx(classNames.value, styles[classNames.value])
71
- }
72
- ),
73
- /* @__PURE__ */ jsx(RiArrowDownSLine, { "aria-hidden": "true" })
74
- ]
75
- }
76
- ),
60
+ /* @__PURE__ */ jsx(SelectTrigger, { icon }),
77
61
  /* @__PURE__ */ jsx(FieldError, {}),
78
62
  /* @__PURE__ */ jsx(
79
63
  Popover,
@@ -84,37 +68,15 @@ const Select = forwardRef((props, ref) => {
84
68
  classNames.popover,
85
69
  styles[classNames.popover]
86
70
  ),
87
- children: /* @__PURE__ */ jsx(ListBox, { className: clsx(classNames.list, styles[classNames.list]), children: options?.map((option) => /* @__PURE__ */ jsxs(
88
- ListBoxItem,
71
+ ...dataAttributes,
72
+ children: /* @__PURE__ */ jsx(
73
+ SelectContent,
89
74
  {
90
- id: option.value,
91
- className: clsx(classNames.item, styles[classNames.item]),
92
- children: [
93
- /* @__PURE__ */ jsx(
94
- "div",
95
- {
96
- className: clsx(
97
- classNames.itemIndicator,
98
- styles[classNames.itemIndicator]
99
- ),
100
- children: /* @__PURE__ */ jsx(RiCheckLine, {})
101
- }
102
- ),
103
- /* @__PURE__ */ jsx(
104
- Text,
105
- {
106
- slot: "label",
107
- className: clsx(
108
- classNames.itemLabel,
109
- styles[classNames.itemLabel]
110
- ),
111
- children: option.label
112
- }
113
- )
114
- ]
115
- },
116
- option.value
117
- )) })
75
+ searchable,
76
+ searchPlaceholder,
77
+ options
78
+ }
79
+ )
118
80
  }
119
81
  )
120
82
  ]
package/dist/components/Select/Select.esm.js.map CHANGED
@@ -1 +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 {\n Select as AriaSelect,\n SelectValue,\n Button,\n Popover,\n ListBox,\n ListBoxItem,\n Text,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { SelectProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport styles from './Select.module.css';\nimport stylesPopover from '../Popover/Popover.module.css';\nimport { RiArrowDownSLine, RiCheckLine } from '@remixicon/react';\n\n/** @public */\nexport const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {\n const { classNames: popoverClassNames } = useStyles('Popover');\n const { classNames, dataAttributes, cleanedProps } = useStyles('Select', {\n size: 'small',\n placeholder: 'Select an option',\n ...props,\n });\n\n const {\n className,\n label,\n description,\n options,\n placeholder,\n size,\n icon,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n isRequired,\n secondaryLabel,\n style,\n ...rest\n } = cleanedProps;\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 // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);\n\n return (\n <AriaSelect\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...dataAttributes}\n ref={ref}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n {...rest}\n >\n <FieldLabel\n label={label}\n secondaryLabel={secondaryLabelText}\n description={description}\n />\n <Button\n className={clsx(classNames.trigger, styles[classNames.trigger])}\n data-size={dataAttributes['data-size']}\n >\n {icon}\n <SelectValue\n className={clsx(classNames.value, styles[classNames.value])}\n />\n <RiArrowDownSLine aria-hidden=\"true\" />\n </Button>\n <FieldError />\n <Popover\n className={clsx(\n popoverClassNames.root,\n stylesPopover[popoverClassNames.root],\n classNames.popover,\n styles[classNames.popover],\n )}\n >\n <ListBox className={clsx(classNames.list, styles[classNames.list])}>\n {options?.map(option => (\n <ListBoxItem\n key={option.value}\n id={option.value}\n className={clsx(classNames.item, styles[classNames.item])}\n >\n <div\n className={clsx(\n classNames.itemIndicator,\n styles[classNames.itemIndicator],\n )}\n >\n <RiCheckLine />\n </div>\n <Text\n slot=\"label\"\n className={clsx(\n classNames.itemLabel,\n styles[classNames.itemLabel],\n )}\n >\n {option.label}\n </Text>\n </ListBoxItem>\n ))}\n </ListBox>\n </Popover>\n </AriaSelect>\n );\n});\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":"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"}
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 clsx from 'clsx';\nimport { SelectProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport styles from './Select.module.css';\nimport stylesPopover from '../Popover/Popover.module.css';\nimport { SelectTrigger } from './SelectTrigger';\nimport { SelectContent } from './SelectContent';\n\n/** @public */\nexport const Select = forwardRef<\n HTMLDivElement,\n SelectProps<'single' | 'multiple'>\n>((props, ref) => {\n const { classNames: popoverClassNames } = useStyles('Popover');\n const { classNames, dataAttributes, cleanedProps } = useStyles('Select', {\n size: 'small',\n placeholder: 'Select an option',\n ...props,\n });\n\n const {\n className,\n label,\n description,\n options,\n icon,\n searchable,\n searchPlaceholder,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n isRequired,\n secondaryLabel,\n ...rest\n } = cleanedProps;\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={clsx(classNames.root, styles[classNames.root], className)}\n {...dataAttributes}\n ref={ref}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n {...rest}\n >\n <FieldLabel\n label={label}\n secondaryLabel={secondaryLabelText}\n description={description}\n />\n <SelectTrigger icon={icon} />\n <FieldError />\n <Popover\n className={clsx(\n popoverClassNames.root,\n stylesPopover[popoverClassNames.root],\n classNames.popover,\n styles[classNames.popover],\n )}\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":";;;;;;;;;;;;AA6BO,MAAM,MAAA,GAAS,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAA,EAAkB,GAAI,UAAU,SAAS,CAAA;AAC7D,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,IACvE,IAAA,EAAM,OAAA;AAAA,IACN,WAAA,EAAa,kBAAA;AAAA,IACb,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd,iBAAA,EAAmB,cAAA;AAAA,IACnB,UAAA;AAAA,IACA,cAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,YAAA;AAEJ,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,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,cAAA;AAAA,MACJ,GAAA;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ,iBAAA,EAAiB,cAAA;AAAA,MAChB,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,cAAA,EAAgB,kBAAA;AAAA,YAChB;AAAA;AAAA,SACF;AAAA,wBACA,GAAA,CAAC,iBAAc,IAAA,EAAY,CAAA;AAAA,4BAC1B,UAAA,EAAA,EAAW,CAAA;AAAA,wBACZ,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,iBAAA,CAAkB,IAAA;AAAA,cAClB,aAAA,CAAc,kBAAkB,IAAI,CAAA;AAAA,cACpC,UAAA,CAAW,OAAA;AAAA,cACX,MAAA,CAAO,WAAW,OAAO;AAAA,aAC3B;AAAA,YACC,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;;;;"}
package/dist/components/Select/Select.module.css.esm.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
2
2
 
3
- 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-module_bui-SelectPopover__1vFLn {\n min-width: var(--trigger-width);\n }\n\n .Select-module_bui-SelectTrigger__3kJBt {\n box-sizing: border-box;\n border-radius: var(--bui-radius-3);\n border: 1px solid var(--bui-border);\n background-color: var(--bui-bg-surface-1);\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\n & svg {\n flex-shrink: 0;\n color: var(--bui-fg-secondary);\n }\n\n &[data-size='small'] {\n height: 2rem;\n padding-inline: var(--bui-space-3);\n }\n\n &[data-size='medium'] {\n height: 3rem;\n padding-inline: var(--bui-space-4);\n }\n\n &[data-size='small'] svg {\n width: 1rem;\n height: 1rem;\n }\n\n &[data-size='medium'] svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &:hover {\n transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n border-color: var(--bui-border-hover);\n }\n\n &:focus-visible {\n border-color: var(--bui-border-pressed);\n outline: 0;\n }\n\n .Select-module_bui-Select__LDZ15[data-invalid] &,\n &[data-invalid] {\n border-color: var(--bui-fg-danger);\n }\n &[data-invalid]:hover {\n border-width: 2px;\n }\n\n &[data-invalid]:focus-visible {\n border-width: 2px;\n }\n\n &[disabled] {\n cursor: not-allowed;\n border-color: var(--bui-border-disabled);\n color: var(--bui-fg-disabled);\n }\n\n &[disabled] .Select-module_bui-SelectValue__jdoc- {\n color: var(--bui-fg-disabled);\n }\n\n &[data-popup-open] .Select-module_bui-SelectIcon__e97yW {\n transform: rotate(180deg);\n }\n }\n\n .Select-module_bui-SelectValue__jdoc- {\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-module_bui-SelectItemIndicator__1y7zW {\n display: none;\n }\n\n &[disabled] {\n color: var(--bui-fg-disabled);\n }\n }\n\n .Select-module_bui-SelectList__2Cgmr: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 .Select-module_bui-SelectItem__145pz {\n position: relative;\n width: var(--anchor-width);\n display: grid;\n grid-template-areas: 'icon text';\n grid-template-columns: 1rem 1fr;\n align-items: center;\n padding-block: var(--bui-space-2);\n padding-left: var(--bui-space-3);\n padding-right: var(--bui-space-4);\n color: var(--bui-fg-primary);\n border-radius: var(--bui-radius-3);\n cursor: pointer;\n user-select: none;\n font-size: var(--bui-font-size-3);\n gap: var(--bui-space-1);\n outline: none;\n\n &[data-focused] {\n z-index: 0;\n position: relative;\n color: var(--bui-fg-primary);\n }\n\n &[data-focused]::before {\n content: '';\n z-index: -1;\n position: absolute;\n inset-block: 0;\n inset-inline: 0.25rem;\n border-radius: 0.25rem;\n background-color: var(--bui-bg-tint-hover);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: var(--bui-fg-disabled);\n }\n\n &[data-selected] .Select-module_bui-SelectItemIndicator__1y7zW {\n opacity: 1;\n }\n }\n\n .Select-module_bui-SelectItemIndicator__1y7zW {\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-module_bui-SelectItemLabel__1N_y- {\n flex: 1;\n grid-area: text;\n }\n}\n";
4
- var styles = {"bui-SelectPopover":"Select-module_bui-SelectPopover__1vFLn","bui-SelectTrigger":"Select-module_bui-SelectTrigger__3kJBt","bui-Select":"Select-module_bui-Select__LDZ15","bui-SelectValue":"Select-module_bui-SelectValue__jdoc-","bui-SelectIcon":"Select-module_bui-SelectIcon__e97yW","bui-SelectItemIndicator":"Select-module_bui-SelectItemIndicator__1y7zW","bui-SelectList":"Select-module_bui-SelectList__2Cgmr","bui-SelectItem":"Select-module_bui-SelectItem__145pz","bui-SelectItemLabel":"Select-module_bui-SelectItemLabel__1N_y-"};
3
+ 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-module_bui-Select__LDZ15,\n .Select-module_bui-SelectPopover__1vFLn {\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-module_bui-SelectPopover__1vFLn {\n min-width: var(--trigger-width);\n }\n\n .Select-module_bui-SelectTrigger__3kJBt {\n box-sizing: border-box;\n border-radius: var(--bui-radius-3);\n border: 1px solid var(--bui-border);\n background-color: var(--bui-bg-surface-1);\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-module_bui-Select__LDZ15[data-size='small'] & {\n padding-inline: var(--bui-space-3) 0;\n }\n\n .Select-module_bui-Select__LDZ15[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-module_bui-Select__LDZ15[data-size='small'] & {\n width: 1rem;\n height: 1rem;\n }\n\n .Select-module_bui-Select__LDZ15[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 &:hover {\n transition: border-color 0.2s ease-in-out;\n border-color: var(--bui-border-hover);\n }\n\n &:focus-visible {\n border-color: var(--bui-border-pressed);\n outline: 0;\n }\n\n .Select-module_bui-Select__LDZ15[data-invalid] & {\n border-color: var(--bui-fg-danger);\n\n &:focus-visible,\n &:hover {\n outline: 1px solid var(--bui-fg-danger);\n }\n }\n\n &[disabled] {\n cursor: not-allowed;\n border-color: var(--bui-border-disabled);\n color: var(--bui-fg-disabled);\n }\n }\n\n .Select-module_bui-SelectTriggerChevron__1xwt4 {\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-module_bui-SelectValue__jdoc- {\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-module_bui-SelectItemIndicator__1y7zW {\n display: none;\n }\n\n &[disabled] {\n color: var(--bui-fg-disabled);\n }\n }\n\n .Select-module_bui-SelectList__2Cgmr: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 .Select-module_bui-SelectItem__145pz {\n box-sizing: border-box;\n position: relative;\n width: var(--anchor-width);\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\n &[data-focused]::before {\n content: '';\n position: absolute;\n inset-block: 0;\n inset-inline: var(--bui-space-1);\n border-radius: var(--bui-radius-2);\n background: var(--bui-bg-surface-2);\n z-index: -1;\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: var(--bui-fg-disabled);\n }\n\n &[data-selected] .Select-module_bui-SelectItemIndicator__1y7zW {\n opacity: 1;\n }\n }\n\n .Select-module_bui-SelectItemIndicator__1y7zW {\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-module_bui-SelectItemLabel__1N_y- {\n flex: 1;\n grid-area: text;\n }\n\n .Select-module_bui-SelectSearchWrapper__O_TMJ {\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);\n }\n\n .Select-module_bui-SelectSearch__2xqJK {\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-module_bui-SelectSearchClear__F3_5y {\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-module_bui-SelectNoResults__1fMBM {\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";
4
+ var styles = {"bui-Select":"Select-module_bui-Select__LDZ15","bui-SelectPopover":"Select-module_bui-SelectPopover__1vFLn","bui-SelectTrigger":"Select-module_bui-SelectTrigger__3kJBt","bui-SelectTriggerChevron":"Select-module_bui-SelectTriggerChevron__1xwt4","bui-SelectValue":"Select-module_bui-SelectValue__jdoc-","bui-SelectItemIndicator":"Select-module_bui-SelectItemIndicator__1y7zW","bui-SelectList":"Select-module_bui-SelectList__2Cgmr","bui-SelectItem":"Select-module_bui-SelectItem__145pz","bui-SelectItemLabel":"Select-module_bui-SelectItemLabel__1N_y-","bui-SelectSearchWrapper":"Select-module_bui-SelectSearchWrapper__O_TMJ","bui-SelectSearch":"Select-module_bui-SelectSearch__2xqJK","bui-SelectSearchClear":"Select-module_bui-SelectSearchClear__F3_5y","bui-SelectNoResults":"Select-module_bui-SelectNoResults__1fMBM"};
5
5
  styleInject(css_248z);
6
6
 
7
7
  export { styles as default };
package/dist/components/Select/SelectContent.esm.js ADDED
@@ -0,0 +1,55 @@
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
+ import { Autocomplete, SearchField, Input, Button } from 'react-aria-components';
3
+ import { useFilter } from 'react-aria';
4
+ import { RiCloseCircleLine } from '@remixicon/react';
5
+ import clsx from 'clsx';
6
+ import { useStyles } from '../../hooks/useStyles.esm.js';
7
+ import { SelectListBox } from './SelectListBox.esm.js';
8
+ import styles from './Select.module.css.esm.js';
9
+
10
+ function SelectContent({
11
+ searchable,
12
+ searchPlaceholder = "Search...",
13
+ options
14
+ }) {
15
+ const { contains } = useFilter({ sensitivity: "base" });
16
+ const { classNames } = useStyles("Select");
17
+ if (!searchable) {
18
+ return /* @__PURE__ */ jsx(SelectListBox, { options });
19
+ }
20
+ return /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
21
+ /* @__PURE__ */ jsxs(
22
+ SearchField,
23
+ {
24
+ autoFocus: true,
25
+ className: clsx(
26
+ classNames.searchWrapper,
27
+ styles[classNames.searchWrapper]
28
+ ),
29
+ children: [
30
+ /* @__PURE__ */ jsx(
31
+ Input,
32
+ {
33
+ placeholder: searchPlaceholder,
34
+ className: clsx(classNames.search, styles[classNames.search])
35
+ }
36
+ ),
37
+ /* @__PURE__ */ jsx(
38
+ Button,
39
+ {
40
+ className: clsx(
41
+ classNames.searchClear,
42
+ styles[classNames.searchClear]
43
+ ),
44
+ children: /* @__PURE__ */ jsx(RiCloseCircleLine, {})
45
+ }
46
+ )
47
+ ]
48
+ }
49
+ ),
50
+ /* @__PURE__ */ jsx(SelectListBox, { options })
51
+ ] });
52
+ }
53
+
54
+ export { SelectContent };
55
+ //# sourceMappingURL=SelectContent.esm.js.map
package/dist/components/Select/SelectContent.esm.js.map ADDED
@@ -0,0 +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 clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { SelectListBox } from './SelectListBox';\nimport styles from './Select.module.css';\nimport type { Option } from './types';\n\ninterface SelectContentProps {\n searchable?: boolean;\n searchPlaceholder?: string;\n options?: Array<Option>;\n}\n\nexport function SelectContent({\n searchable,\n searchPlaceholder = 'Search...',\n options,\n}: SelectContentProps) {\n const { contains } = useFilter({ sensitivity: 'base' });\n const { classNames } = useStyles('Select');\n\n if (!searchable) {\n return <SelectListBox options={options} />;\n }\n\n return (\n <Autocomplete filter={contains}>\n <SearchField\n autoFocus\n className={clsx(\n classNames.searchWrapper,\n styles[classNames.searchWrapper],\n )}\n >\n <Input\n placeholder={searchPlaceholder}\n className={clsx(classNames.search, styles[classNames.search])}\n />\n <Button\n className={clsx(\n classNames.searchClear,\n styles[classNames.searchClear],\n )}\n >\n <RiCloseCircleLine />\n </Button>\n </SearchField>\n <SelectListBox options={options} />\n </Autocomplete>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;AAoCO,SAAS,aAAA,CAAc;AAAA,EAC5B,UAAA;AAAA,EACA,iBAAA,GAAoB,WAAA;AAAA,EACpB;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,UAAU,EAAE,WAAA,EAAa,QAAQ,CAAA;AACtD,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,QAAQ,CAAA;AAEzC,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,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,aAAA;AAAA,UACX,MAAA,CAAO,WAAW,aAAa;AAAA,SACjC;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAa,iBAAA;AAAA,cACb,WAAW,IAAA,CAAK,UAAA,CAAW,QAAQ,MAAA,CAAO,UAAA,CAAW,MAAM,CAAC;AAAA;AAAA,WAC9D;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,WAAA;AAAA,gBACX,MAAA,CAAO,WAAW,WAAW;AAAA,eAC/B;AAAA,cAEA,8BAAC,iBAAA,EAAA,EAAkB;AAAA;AAAA;AACrB;AAAA;AAAA,KACF;AAAA,oBACA,GAAA,CAAC,iBAAc,OAAA,EAAkB;AAAA,GAAA,EACnC,CAAA;AAEJ;;;;"}
package/dist/components/Select/SelectListBox.esm.js ADDED
@@ -0,0 +1,54 @@
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
+ import { ListBox, ListBoxItem, Text } from 'react-aria-components';
3
+ import { RiCheckLine } from '@remixicon/react';
4
+ import clsx from 'clsx';
5
+ import { useStyles } from '../../hooks/useStyles.esm.js';
6
+ import styles from './Select.module.css.esm.js';
7
+
8
+ const NoResults = () => {
9
+ const { classNames } = useStyles("Select");
10
+ return /* @__PURE__ */ jsx("div", { className: clsx(classNames.noResults, styles[classNames.noResults]), children: "No results found." });
11
+ };
12
+ function SelectListBox({ options, ...props }) {
13
+ const { classNames } = useStyles("Select", props);
14
+ return /* @__PURE__ */ jsx(
15
+ ListBox,
16
+ {
17
+ className: clsx(classNames.list, styles[classNames.list]),
18
+ renderEmptyState: () => /* @__PURE__ */ jsx(NoResults, {}),
19
+ children: options?.map((option) => /* @__PURE__ */ jsxs(
20
+ ListBoxItem,
21
+ {
22
+ id: option.value,
23
+ textValue: option.label,
24
+ className: clsx(classNames.item, styles[classNames.item]),
25
+ isDisabled: option.disabled,
26
+ children: [
27
+ /* @__PURE__ */ jsx(
28
+ "div",
29
+ {
30
+ className: clsx(
31
+ classNames.itemIndicator,
32
+ styles[classNames.itemIndicator]
33
+ ),
34
+ children: /* @__PURE__ */ jsx(RiCheckLine, {})
35
+ }
36
+ ),
37
+ /* @__PURE__ */ jsx(
38
+ Text,
39
+ {
40
+ slot: "label",
41
+ className: clsx(classNames.itemLabel, styles[classNames.itemLabel]),
42
+ children: option.label
43
+ }
44
+ )
45
+ ]
46
+ },
47
+ option.value
48
+ ))
49
+ }
50
+ );
51
+ }
52
+
53
+ export { SelectListBox };
54
+ //# sourceMappingURL=SelectListBox.esm.js.map
package/dist/components/Select/SelectListBox.esm.js.map ADDED
@@ -0,0 +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 { ListBox, ListBoxItem, Text } from 'react-aria-components';\nimport { RiCheckLine } from '@remixicon/react';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Select.module.css';\nimport type { Option } from './types';\n\ninterface SelectListBoxProps {\n options?: Array<Option>;\n}\n\nconst NoResults = () => {\n const { classNames } = useStyles('Select');\n\n return (\n <div className={clsx(classNames.noResults, styles[classNames.noResults])}>\n No results found.\n </div>\n );\n};\n\nexport function SelectListBox({ options, ...props }: SelectListBoxProps) {\n const { classNames } = useStyles('Select', props);\n return (\n <ListBox\n className={clsx(classNames.list, styles[classNames.list])}\n renderEmptyState={() => <NoResults />}\n >\n {options?.map(option => (\n <ListBoxItem\n key={option.value}\n id={option.value}\n textValue={option.label}\n className={clsx(classNames.item, styles[classNames.item])}\n isDisabled={option.disabled}\n >\n <div\n className={clsx(\n classNames.itemIndicator,\n styles[classNames.itemIndicator],\n )}\n >\n <RiCheckLine />\n </div>\n <Text\n slot=\"label\"\n className={clsx(classNames.itemLabel, styles[classNames.itemLabel])}\n >\n {option.label}\n </Text>\n </ListBoxItem>\n ))}\n </ListBox>\n );\n}\n"],"names":[],"mappings":";;;;;;;AA2BA,MAAM,YAAY,MAAM;AACtB,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,QAAQ,CAAA;AAEzC,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,MAAA,CAAO,UAAA,CAAW,SAAS,CAAC,CAAA,EAAG,QAAA,EAAA,mBAAA,EAE1E,CAAA;AAEJ,CAAA;AAEO,SAAS,aAAA,CAAc,EAAE,OAAA,EAAS,GAAG,OAAM,EAAuB;AACvE,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,UAAU,KAAK,CAAA;AAChD,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA;AAAA,MACxD,gBAAA,EAAkB,sBAAM,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA;AAAA,MAElC,QAAA,EAAA,OAAA,EAAS,IAAI,CAAA,MAAA,qBACZ,IAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UAEC,IAAI,MAAA,CAAO,KAAA;AAAA,UACX,WAAW,MAAA,CAAO,KAAA;AAAA,UAClB,WAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA;AAAA,UACxD,YAAY,MAAA,CAAO,QAAA;AAAA,UAEnB,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,aAAA;AAAA,kBACX,MAAA,CAAO,WAAW,aAAa;AAAA,iBACjC;AAAA,gBAEA,8BAAC,WAAA,EAAA,EAAY;AAAA;AAAA,aACf;AAAA,4BACA,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,OAAA;AAAA,gBACL,WAAW,IAAA,CAAK,UAAA,CAAW,WAAW,MAAA,CAAO,UAAA,CAAW,SAAS,CAAC,CAAA;AAAA,gBAEjE,QAAA,EAAA,MAAA,CAAO;AAAA;AAAA;AACV;AAAA,SAAA;AAAA,QAnBK,MAAA,CAAO;AAAA,OAqBf;AAAA;AAAA,GACH;AAEJ;;;;"}
package/dist/components/Select/SelectTrigger.esm.js ADDED
@@ -0,0 +1,23 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { Button, SelectValue } from 'react-aria-components';
3
+ import { RiArrowDownSLine } from '@remixicon/react';
4
+ import clsx from 'clsx';
5
+ import { useStyles } from '../../hooks/useStyles.esm.js';
6
+ import styles from './Select.module.css.esm.js';
7
+
8
+ function SelectTrigger({ icon }) {
9
+ const { classNames } = useStyles("Select");
10
+ return /* @__PURE__ */ jsxs(Button, { className: clsx(classNames.trigger, styles[classNames.trigger]), children: [
11
+ icon,
12
+ /* @__PURE__ */ jsx(
13
+ SelectValue,
14
+ {
15
+ className: clsx(classNames.value, styles[classNames.value])
16
+ }
17
+ ),
18
+ /* @__PURE__ */ jsx("div", { className: clsx(classNames.chevron, styles[classNames.chevron]), children: /* @__PURE__ */ jsx(RiArrowDownSLine, { "aria-hidden": "true" }) })
19
+ ] });
20
+ }
21
+
22
+ export { SelectTrigger };
23
+ //# sourceMappingURL=SelectTrigger.esm.js.map
package/dist/components/Select/SelectTrigger.esm.js.map ADDED
@@ -0,0 +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 clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Select.module.css';\n\ninterface SelectTriggerProps {\n icon?: ReactNode;\n}\n\nexport function SelectTrigger({ icon }: SelectTriggerProps) {\n const { classNames } = useStyles('Select');\n\n return (\n <Button className={clsx(classNames.trigger, styles[classNames.trigger])}>\n {icon}\n <SelectValue\n className={clsx(classNames.value, styles[classNames.value])}\n />\n <div className={clsx(classNames.chevron, styles[classNames.chevron])}>\n <RiArrowDownSLine aria-hidden=\"true\" />\n </div>\n </Button>\n );\n}\n"],"names":[],"mappings":";;;;;;;AA2BO,SAAS,aAAA,CAAc,EAAE,IAAA,EAAK,EAAuB;AAC1D,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,QAAQ,CAAA;AAEzC,EAAA,uBACE,IAAA,CAAC,MAAA,EAAA,EAAO,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA,EACnE,QAAA,EAAA;AAAA,IAAA,IAAA;AAAA,oBACD,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC;AAAA;AAAA,KAC5D;AAAA,oBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,WAAW,OAAA,EAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA,EACjE,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,aAAA,EAAY,QAAO,CAAA,EACvC;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
package/dist/components/Table/components/Row.esm.js CHANGED
@@ -24,6 +24,7 @@ function Row(props) {
24
24
  Row$1,
25
25
  {
26
26
  id,
27
+ href,
27
28
  className: clsx(classNames.row, styles[classNames.row]),
28
29
  ...rest,
29
30
  children: content
@@ -34,6 +35,7 @@ function Row(props) {
34
35
  Row$1,
35
36
  {
36
37
  id,
38
+ href,
37
39
  className: clsx(classNames.row, styles[classNames.row]),
38
40
  "data-react-aria-pressable": "true",
39
41
  ...rest,
package/dist/components/Table/components/Row.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Row.esm.js","sources":["../../../../src/components/Table/components/Row.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 Row as ReactAriaRow,\n RowProps,\n useTableOptions,\n Cell,\n Collection,\n Checkbox,\n RouterProvider,\n} from 'react-aria-components';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { useNavigate } from 'react-router-dom';\nimport { useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../../utils/isExternalLink';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport function Row<T extends object>(props: RowProps<T>) {\n const { classNames, cleanedProps } = useStyles<'Table', RowProps<T>>(\n 'Table',\n props,\n );\n const { id, columns, children, href, ...rest } = cleanedProps;\n const navigate = useNavigate();\n const isExternal = isExternalLink(href);\n\n let { selectionBehavior } = useTableOptions();\n\n const content = (\n <>\n {selectionBehavior === 'toggle' && (\n <Cell>\n <Checkbox slot=\"selection\" />\n </Cell>\n )}\n <Collection items={columns}>{children}</Collection>\n </>\n );\n\n if (isExternal) {\n return (\n <ReactAriaRow\n id={id}\n className={clsx(classNames.row, styles[classNames.row])}\n {...rest}\n >\n {content}\n </ReactAriaRow>\n );\n }\n\n return (\n <RouterProvider navigate={navigate} useHref={useHref}>\n <ReactAriaRow\n id={id}\n className={clsx(classNames.row, styles[classNames.row])}\n data-react-aria-pressable=\"true\"\n {...rest}\n >\n {content}\n </ReactAriaRow>\n </RouterProvider>\n );\n}\n"],"names":["ReactAriaRow"],"mappings":";;;;;;;;AAiCO,SAAS,IAAsB,KAAA,EAAoB;AACxD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA;AAAA,IACnC,OAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,EAAA,EAAI,OAAA,EAAS,UAAU,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AACjD,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,EAAA,IAAI,EAAE,iBAAA,EAAkB,GAAI,eAAA,EAAgB;AAE5C,EAAA,MAAM,0BACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,iBAAA,KAAsB,4BACrB,GAAA,CAAC,IAAA,EAAA,EACC,8BAAC,QAAA,EAAA,EAAS,IAAA,EAAK,aAAY,CAAA,EAC7B,CAAA;AAAA,oBAEF,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS;AAAA,GAAA,EACxC,CAAA;AAGF,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,uBACE,GAAA;AAAA,MAACA,KAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,WAAW,IAAA,CAAK,UAAA,CAAW,KAAK,MAAA,CAAO,UAAA,CAAW,GAAG,CAAC,CAAA;AAAA,QACrD,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,GAAA;AAAA,IAACA,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,WAAW,IAAA,CAAK,UAAA,CAAW,KAAK,MAAA,CAAO,UAAA,CAAW,GAAG,CAAC,CAAA;AAAA,MACtD,2BAAA,EAA0B,MAAA;AAAA,MACzB,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"Row.esm.js","sources":["../../../../src/components/Table/components/Row.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 Row as ReactAriaRow,\n RowProps,\n useTableOptions,\n Cell,\n Collection,\n Checkbox,\n RouterProvider,\n} from 'react-aria-components';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { useNavigate } from 'react-router-dom';\nimport { useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../../utils/isExternalLink';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport function Row<T extends object>(props: RowProps<T>) {\n const { classNames, cleanedProps } = useStyles<'Table', RowProps<T>>(\n 'Table',\n props,\n );\n const { id, columns, children, href, ...rest } = cleanedProps;\n const navigate = useNavigate();\n const isExternal = isExternalLink(href);\n\n let { selectionBehavior } = useTableOptions();\n\n const content = (\n <>\n {selectionBehavior === 'toggle' && (\n <Cell>\n <Checkbox slot=\"selection\" />\n </Cell>\n )}\n <Collection items={columns}>{children}</Collection>\n </>\n );\n\n if (isExternal) {\n return (\n <ReactAriaRow\n id={id}\n href={href}\n className={clsx(classNames.row, styles[classNames.row])}\n {...rest}\n >\n {content}\n </ReactAriaRow>\n );\n }\n\n return (\n <RouterProvider navigate={navigate} useHref={useHref}>\n <ReactAriaRow\n id={id}\n href={href}\n className={clsx(classNames.row, styles[classNames.row])}\n data-react-aria-pressable=\"true\"\n {...rest}\n >\n {content}\n </ReactAriaRow>\n </RouterProvider>\n );\n}\n"],"names":["ReactAriaRow"],"mappings":";;;;;;;;AAiCO,SAAS,IAAsB,KAAA,EAAoB;AACxD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA;AAAA,IACnC,OAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,EAAA,EAAI,OAAA,EAAS,UAAU,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AACjD,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,EAAA,IAAI,EAAE,iBAAA,EAAkB,GAAI,eAAA,EAAgB;AAE5C,EAAA,MAAM,0BACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,iBAAA,KAAsB,4BACrB,GAAA,CAAC,IAAA,EAAA,EACC,8BAAC,QAAA,EAAA,EAAS,IAAA,EAAK,aAAY,CAAA,EAC7B,CAAA;AAAA,oBAEF,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS;AAAA,GAAA,EACxC,CAAA;AAGF,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,uBACE,GAAA;AAAA,MAACA,KAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,IAAA;AAAA,QACA,WAAW,IAAA,CAAK,UAAA,CAAW,KAAK,MAAA,CAAO,UAAA,CAAW,GAAG,CAAC,CAAA;AAAA,QACrD,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,GAAA;AAAA,IAACA,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAW,IAAA,CAAK,UAAA,CAAW,KAAK,MAAA,CAAO,UAAA,CAAW,GAAG,CAAC,CAAA;AAAA,MACtD,2BAAA,EAA0B,MAAA;AAAA,MACzB,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;"}
package/dist/index.d.ts CHANGED
@@ -196,7 +196,10 @@ declare const componentDefinitions: {
196
196
  readonly PasswordField: {
197
197
  readonly classNames: {
198
198
  readonly root: "bui-PasswordField";
199
- readonly inputVisibility: "bui-InputVisibility";
199
+ readonly inputWrapper: "bui-PasswordFieldInputWrapper";
200
+ readonly input: "bui-PasswordFieldInput";
201
+ readonly inputIcon: "bui-PasswordFieldIcon";
202
+ readonly inputVisibility: "bui-PasswordFieldVisibility";
200
203
  };
201
204
  readonly dataAttributes: {
202
205
  readonly size: readonly ["small", "medium"];
@@ -218,7 +221,7 @@ declare const componentDefinitions: {
218
221
  readonly classNames: {
219
222
  readonly root: "bui-SearchField";
220
223
  readonly clear: "bui-SearchFieldClear";
221
- readonly inputWrapper: "bui-SearchFieldWrapper";
224
+ readonly inputWrapper: "bui-SearchFieldInputWrapper";
222
225
  readonly input: "bui-SearchFieldInput";
223
226
  readonly inputIcon: "bui-SearchFieldInputIcon";
224
227
  };
@@ -232,12 +235,16 @@ declare const componentDefinitions: {
232
235
  readonly root: "bui-Select";
233
236
  readonly popover: "bui-SelectPopover";
234
237
  readonly trigger: "bui-SelectTrigger";
238
+ readonly chevron: "bui-SelectTriggerChevron";
235
239
  readonly value: "bui-SelectValue";
236
- readonly icon: "bui-SelectIcon";
237
240
  readonly list: "bui-SelectList";
238
241
  readonly item: "bui-SelectItem";
239
242
  readonly itemIndicator: "bui-SelectItemIndicator";
240
243
  readonly itemLabel: "bui-SelectItemLabel";
244
+ readonly searchWrapper: "bui-SelectSearchWrapper";
245
+ readonly search: "bui-SelectSearch";
246
+ readonly searchClear: "bui-SelectSearchClear";
247
+ readonly noResults: "bui-SelectNoResults";
241
248
  };
242
249
  readonly dataAttributes: {
243
250
  readonly size: readonly ["small", "medium"];
@@ -1257,31 +1264,46 @@ interface LinkProps extends LinkProps$1 {
1257
1264
  declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
1258
1265
 
1259
1266
  /** @public */
1260
- interface SelectProps extends SelectProps$1<{
1261
- name: string;
1267
+ type Option = {
1262
1268
  value: string;
1263
- }>, Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
1269
+ label: string;
1270
+ disabled?: boolean;
1271
+ };
1272
+ /** @public */
1273
+ interface SelectProps<T extends 'single' | 'multiple'> extends SelectProps$1<Option, T>, Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
1264
1274
  /**
1265
1275
  * An icon to render before the input
1266
1276
  */
1267
1277
  icon?: ReactNode;
1268
1278
  /**
1269
1279
  * The size of the select field
1270
- * @defaultValue 'medium'
1280
+ * @defaultValue 'small'
1271
1281
  */
1272
1282
  size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
1273
1283
  /**
1274
1284
  * The options of the select field
1275
1285
  */
1276
- options?: Array<{
1277
- value: string;
1278
- label: string;
1279
- disabled?: boolean;
1280
- }>;
1286
+ options?: Array<Option>;
1287
+ /**
1288
+ * Enable search/filter functionality in the dropdown
1289
+ * @defaultValue false
1290
+ */
1291
+ searchable?: boolean;
1292
+ /**
1293
+ * placeholder text for the search input
1294
+ * only used when searchable is true
1295
+ * @defaultvalue 'search...'
1296
+ */
1297
+ searchPlaceholder?: string;
1298
+ /**
1299
+ * Selection mode, single or multiple
1300
+ * @defaultvalue 'single'
1301
+ */
1302
+ selectionMode?: T;
1281
1303
  }
1282
1304
 
1283
1305
  /** @public */
1284
- declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLDivElement>>;
1306
+ declare const Select: react.ForwardRefExoticComponent<SelectProps<"multiple" | "single"> & react.RefAttributes<HTMLDivElement>>;
1285
1307
 
1286
1308
  /** @public */
1287
1309
  interface SkeletonProps extends ComponentProps<'div'> {
@@ -1331,4 +1353,4 @@ declare const useBreakpoint: () => {
1331
1353
  down: (key: Breakpoint) => boolean;
1332
1354
  };
1333
1355
 
1334
- export { Accordion, AccordionGroup, type AccordionGroupProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AlignItems, Avatar, type AvatarProps, type Border, type BorderRadius, Box, type BoxProps, type Breakpoint, Button, ButtonIcon, type ButtonIconProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Cell, CellProfile, type CellProfileProps, type CellProps, Checkbox, type CheckboxProps, type ClassNamesMap, Column, type ColumnProps, type Columns, type ComponentClassNames, type ComponentDefinition, type ComponentDefinitionName, Container, type ContainerProps, type DataAttributeValues, type DataAttributesMap, Dialog, DialogBody, type DialogBodyProps, DialogFooter, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTrigger, type DialogTriggerProps, type Display, FieldLabel, type FieldLabelProps, Flex, type FlexDirection, type FlexProps, type FlexWrap, Grid, type GridItemProps, type GridProps, Header, HeaderPage, type HeaderPageBreadcrumb, type HeaderPageProps, type HeaderProps, type HeaderTab, type JustifyContent, Link, type LinkProps, Menu, MenuAutocomplete, type MenuAutocompleteListBoxProps, MenuAutocompleteListbox, type MenuAutocompleteProps, MenuItem, type MenuItemProps, MenuListBox, MenuListBoxItem, type MenuListBoxItemProps, type MenuListBoxProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, type MenuTriggerProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Responsive, Row, SearchField, type SearchFieldProps, Select, type SelectProps, Skeleton, type SkeletonProps, type Space, type SpaceProps, SubmenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, type TabMatchStrategy, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, TablePagination, type TablePaginationProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, Text, type TextColorStatus, type TextColors, TextField, type TextFieldProps, type TextOwnProps, type TextProps, type TextVariants, type TextWeights, Tooltip, type TooltipProps, TooltipTrigger, type UseTableConfig, type UseTablePagination, type UseTablePaginationConfig, type UseTableResult, type UtilityProps, VisuallyHidden, type VisuallyHiddenProps, componentDefinitions, useBreakpoint, useTable };
1356
+ export { Accordion, AccordionGroup, type AccordionGroupProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AlignItems, Avatar, type AvatarProps, type Border, type BorderRadius, Box, type BoxProps, type Breakpoint, Button, ButtonIcon, type ButtonIconProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Cell, CellProfile, type CellProfileProps, type CellProps, Checkbox, type CheckboxProps, type ClassNamesMap, Column, type ColumnProps, type Columns, type ComponentClassNames, type ComponentDefinition, type ComponentDefinitionName, Container, type ContainerProps, type DataAttributeValues, type DataAttributesMap, Dialog, DialogBody, type DialogBodyProps, DialogFooter, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTrigger, type DialogTriggerProps, type Display, FieldLabel, type FieldLabelProps, Flex, type FlexDirection, type FlexProps, type FlexWrap, Grid, type GridItemProps, type GridProps, Header, HeaderPage, type HeaderPageBreadcrumb, type HeaderPageProps, type HeaderProps, type HeaderTab, type JustifyContent, Link, type LinkProps, Menu, MenuAutocomplete, type MenuAutocompleteListBoxProps, MenuAutocompleteListbox, type MenuAutocompleteProps, MenuItem, type MenuItemProps, MenuListBox, MenuListBoxItem, type MenuListBoxItemProps, type MenuListBoxProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, type MenuTriggerProps, type Option, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Responsive, Row, SearchField, type SearchFieldProps, Select, type SelectProps, Skeleton, type SkeletonProps, type Space, type SpaceProps, SubmenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, type TabMatchStrategy, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, TablePagination, type TablePaginationProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, Text, type TextColorStatus, type TextColors, TextField, type TextFieldProps, type TextOwnProps, type TextProps, type TextVariants, type TextWeights, Tooltip, type TooltipProps, TooltipTrigger, type UseTableConfig, type UseTablePagination, type UseTablePaginationConfig, type UseTableResult, type UtilityProps, VisuallyHidden, type VisuallyHiddenProps, componentDefinitions, useBreakpoint, useTable };
package/dist/utils/componentDefinitions.esm.js CHANGED
@@ -245,7 +245,10 @@ const componentDefinitions = {
245
245
  PasswordField: {
246
246
  classNames: {
247
247
  root: "bui-PasswordField",
248
- inputVisibility: "bui-InputVisibility"
248
+ inputWrapper: "bui-PasswordFieldInputWrapper",
249
+ input: "bui-PasswordFieldInput",
250
+ inputIcon: "bui-PasswordFieldIcon",
251
+ inputVisibility: "bui-PasswordFieldVisibility"
249
252
  },
250
253
  dataAttributes: {
251
254
  size: ["small", "medium"]
@@ -267,7 +270,7 @@ const componentDefinitions = {
267
270
  classNames: {
268
271
  root: "bui-SearchField",
269
272
  clear: "bui-SearchFieldClear",
270
- inputWrapper: "bui-SearchFieldWrapper",
273
+ inputWrapper: "bui-SearchFieldInputWrapper",
271
274
  input: "bui-SearchFieldInput",
272
275
  inputIcon: "bui-SearchFieldInputIcon"
273
276
  },
@@ -281,12 +284,16 @@ const componentDefinitions = {
281
284
  root: "bui-Select",
282
285
  popover: "bui-SelectPopover",
283
286
  trigger: "bui-SelectTrigger",
287
+ chevron: "bui-SelectTriggerChevron",
284
288
  value: "bui-SelectValue",
285
- icon: "bui-SelectIcon",
286
289
  list: "bui-SelectList",
287
290
  item: "bui-SelectItem",
288
291
  itemIndicator: "bui-SelectItemIndicator",
289
- itemLabel: "bui-SelectItemLabel"
292
+ itemLabel: "bui-SelectItemLabel",
293
+ searchWrapper: "bui-SelectSearchWrapper",
294
+ search: "bui-SelectSearch",
295
+ searchClear: "bui-SelectSearchClear",
296
+ noResults: "bui-SelectNoResults"
290
297
  },
291
298
  dataAttributes: {
292
299
  size: ["small", "medium"]
package/dist/utils/componentDefinitions.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"componentDefinitions.esm.js","sources":["../../src/utils/componentDefinitions.ts"],"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 type { ComponentDefinition } from '../types';\n\n/**\n * Component definitions for the Backstage UI library\n * @public\n */\nexport const componentDefinitions = {\n Avatar: {\n classNames: {\n root: 'bui-AvatarRoot',\n image: 'bui-AvatarImage',\n fallback: 'bui-AvatarFallback',\n },\n dataAttributes: {\n size: ['small', 'medium', 'large'] as const,\n },\n },\n Box: {\n classNames: {\n root: 'bui-Box',\n },\n utilityProps: [\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n 'position',\n 'display',\n 'width',\n 'minWidth',\n 'maxWidth',\n 'height',\n 'minHeight',\n 'maxHeight',\n ],\n },\n Button: {\n classNames: {\n root: 'bui-Button',\n },\n dataAttributes: {\n size: ['small', 'medium', 'large'] as const,\n variant: ['primary', 'secondary', 'tertiary'] as const,\n },\n },\n ButtonIcon: {\n classNames: {\n root: 'bui-ButtonIcon',\n },\n },\n ButtonLink: {\n classNames: {\n root: 'bui-ButtonLink',\n },\n },\n Card: {\n classNames: {\n root: 'bui-Card',\n header: 'bui-CardHeader',\n body: 'bui-CardBody',\n footer: 'bui-CardFooter',\n },\n },\n Checkbox: {\n classNames: {\n root: 'bui-Checkbox',\n indicator: 'bui-CheckboxIndicator',\n },\n dataAttributes: {\n selected: [true, false] as const,\n },\n },\n Container: {\n classNames: {\n root: 'bui-Container',\n },\n utilityProps: ['my', 'mt', 'mb', 'py', 'pt', 'pb', 'display'],\n },\n Dialog: {\n classNames: {\n overlay: 'bui-DialogOverlay',\n dialog: 'bui-Dialog',\n header: 'bui-DialogHeader',\n headerTitle: 'bui-DialogHeaderTitle',\n body: 'bui-DialogBody',\n footer: 'bui-DialogFooter',\n },\n },\n Accordion: {\n classNames: {\n root: 'bui-Accordion',\n trigger: 'bui-AccordionTrigger',\n triggerButton: 'bui-AccordionTriggerButton',\n triggerTitle: 'bui-AccordionTriggerTitle',\n triggerSubtitle: 'bui-AccordionTriggerSubtitle',\n triggerIcon: 'bui-AccordionTriggerIcon',\n panel: 'bui-AccordionPanel',\n group: 'bui-AccordionGroup',\n },\n },\n FieldError: {\n classNames: {\n root: 'bui-FieldError',\n },\n },\n FieldLabel: {\n classNames: {\n root: 'bui-FieldLabelWrapper',\n label: 'bui-FieldLabel',\n secondaryLabel: 'bui-FieldSecondaryLabel',\n description: 'bui-FieldDescription',\n },\n },\n Flex: {\n classNames: {\n root: 'bui-Flex',\n },\n utilityProps: [\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n 'gap',\n 'align',\n 'justify',\n 'direction',\n ],\n },\n Grid: {\n classNames: {\n root: 'bui-Grid',\n },\n utilityProps: [\n 'columns',\n 'gap',\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n ],\n },\n GridItem: {\n classNames: {\n root: 'bui-GridItem',\n },\n utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],\n },\n Header: {\n classNames: {\n toolbar: 'bui-HeaderToolbar',\n toolbarWrapper: 'bui-HeaderToolbarWrapper',\n toolbarContent: 'bui-HeaderToolbarContent',\n toolbarControls: 'bui-HeaderToolbarControls',\n toolbarIcon: 'bui-HeaderToolbarIcon',\n toolbarName: 'bui-HeaderToolbarName',\n tabsWrapper: 'bui-HeaderTabsWrapper',\n },\n },\n HeaderPage: {\n classNames: {\n root: 'bui-HeaderPage',\n content: 'bui-HeaderPageContent',\n breadcrumbs: 'bui-HeaderPageBreadcrumbs',\n tabsWrapper: 'bui-HeaderPageTabsWrapper',\n controls: 'bui-HeaderPageControls',\n },\n },\n Heading: {\n classNames: {\n root: 'bui-Heading',\n },\n dataAttributes: {\n variant: ['title1', 'title2', 'title3', 'subtitle'] as const,\n color: ['primary', 'secondary', 'muted'] as const,\n truncate: [true, false] as const,\n },\n },\n Icon: {\n classNames: {\n root: 'bui-Icon',\n },\n },\n Link: {\n classNames: {\n root: 'bui-Link',\n },\n dataAttributes: {\n variant: ['subtitle', 'body', 'caption', 'label'] as const,\n weight: ['regular', 'bold'] as const,\n color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,\n truncate: [true, false] as const,\n },\n },\n List: {\n classNames: {\n root: 'bui-List',\n row: 'bui-ListRow',\n label: 'bui-ListLabel',\n },\n },\n Menu: {\n classNames: {\n root: 'bui-Menu',\n popover: 'bui-MenuPopover',\n content: 'bui-MenuContent',\n section: 'bui-MenuSection',\n sectionHeader: 'bui-MenuSectionHeader',\n item: 'bui-MenuItem',\n itemListBox: 'bui-MenuItemListBox',\n itemListBoxCheck: 'bui-MenuItemListBoxCheck',\n itemWrapper: 'bui-MenuItemWrapper',\n itemContent: 'bui-MenuItemContent',\n itemArrow: 'bui-MenuItemArrow',\n separator: 'bui-MenuSeparator',\n searchField: 'bui-MenuSearchField',\n searchFieldInput: 'bui-MenuSearchFieldInput',\n searchFieldClear: 'bui-MenuSearchFieldClear',\n emptyState: 'bui-MenuEmptyState',\n },\n },\n PasswordField: {\n classNames: {\n root: 'bui-PasswordField',\n inputVisibility: 'bui-InputVisibility',\n },\n dataAttributes: {\n size: ['small', 'medium'] as const,\n },\n },\n Popover: {\n classNames: {\n root: 'bui-Popover',\n },\n },\n RadioGroup: {\n classNames: {\n root: 'bui-RadioGroup',\n content: 'bui-RadioGroupContent',\n radio: 'bui-Radio',\n },\n },\n SearchField: {\n classNames: {\n root: 'bui-SearchField',\n clear: 'bui-SearchFieldClear',\n inputWrapper: 'bui-SearchFieldWrapper',\n input: 'bui-SearchFieldInput',\n inputIcon: 'bui-SearchFieldInputIcon',\n },\n dataAttributes: {\n startCollapsed: [true, false] as const,\n size: ['small', 'medium'] as const,\n },\n },\n Select: {\n classNames: {\n root: 'bui-Select',\n popover: 'bui-SelectPopover',\n trigger: 'bui-SelectTrigger',\n value: 'bui-SelectValue',\n icon: 'bui-SelectIcon',\n list: 'bui-SelectList',\n item: 'bui-SelectItem',\n itemIndicator: 'bui-SelectItemIndicator',\n itemLabel: 'bui-SelectItemLabel',\n },\n dataAttributes: {\n size: ['small', 'medium'] as const,\n },\n },\n Skeleton: {\n classNames: {\n root: 'bui-Skeleton',\n },\n },\n Switch: {\n classNames: {\n root: 'bui-Switch',\n indicator: 'bui-SwitchIndicator',\n },\n },\n Table: {\n classNames: {\n table: 'bui-Table',\n header: 'bui-TableHeader',\n body: 'bui-TableBody',\n row: 'bui-TableRow',\n head: 'bui-TableHead',\n headContent: 'bui-TableHeadContent',\n headSortButton: 'bui-TableHeadSortButton',\n caption: 'bui-TableCaption',\n cell: 'bui-TableCell',\n cellContentWrapper: 'bui-TableCellContentWrapper',\n cellContent: 'bui-TableCellContent',\n cellIcon: 'bui-TableCellIcon',\n cellProfileAvatar: 'bui-TableCellProfileAvatar',\n cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',\n cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',\n cellProfileName: 'bui-TableCellProfileName',\n cellProfileLink: 'bui-TableCellProfileLink',\n },\n },\n TablePagination: {\n classNames: {\n root: 'bui-TablePagination',\n left: 'bui-TablePaginationLeft',\n right: 'bui-TablePaginationRight',\n select: 'bui-TablePaginationSelect',\n },\n },\n Tabs: {\n classNames: {\n tabs: 'bui-Tabs',\n tabList: 'bui-TabList',\n tabListWrapper: 'bui-TabListWrapper',\n tab: 'bui-Tab',\n tabActive: 'bui-TabActive',\n tabHovered: 'bui-TabHovered',\n panel: 'bui-TabPanel',\n },\n },\n TagGroup: {\n classNames: {\n group: 'bui-TagGroup',\n list: 'bui-TagList',\n tag: 'bui-Tag',\n tagIcon: 'bui-TagIcon',\n tagRemoveButton: 'bui-TagRemoveButton',\n },\n },\n Text: {\n classNames: {\n root: 'bui-Text',\n },\n dataAttributes: {\n variant: ['subtitle', 'body', 'caption', 'label'] as const,\n weight: ['regular', 'bold'] as const,\n color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,\n truncate: [true, false] as const,\n },\n },\n TextField: {\n classNames: {\n root: 'bui-TextField',\n inputWrapper: 'bui-InputWrapper',\n input: 'bui-Input',\n inputIcon: 'bui-InputIcon',\n inputAction: 'bui-InputAction',\n },\n dataAttributes: {\n invalid: [true, false] as const,\n disabled: [true, false] as const,\n size: ['small', 'medium'] as const,\n },\n },\n Tooltip: {\n classNames: {\n tooltip: 'bui-Tooltip',\n arrow: 'bui-TooltipArrow',\n },\n },\n VisuallyHidden: {\n classNames: {\n root: 'bui-VisuallyHidden',\n },\n },\n} as const satisfies Record<string, ComponentDefinition>;\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"componentDefinitions.esm.js","sources":["../../src/utils/componentDefinitions.ts"],"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 type { ComponentDefinition } from '../types';\n\n/**\n * Component definitions for the Backstage UI library\n * @public\n */\nexport const componentDefinitions = {\n Avatar: {\n classNames: {\n root: 'bui-AvatarRoot',\n image: 'bui-AvatarImage',\n fallback: 'bui-AvatarFallback',\n },\n dataAttributes: {\n size: ['small', 'medium', 'large'] as const,\n },\n },\n Box: {\n classNames: {\n root: 'bui-Box',\n },\n utilityProps: [\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n 'position',\n 'display',\n 'width',\n 'minWidth',\n 'maxWidth',\n 'height',\n 'minHeight',\n 'maxHeight',\n ],\n },\n Button: {\n classNames: {\n root: 'bui-Button',\n },\n dataAttributes: {\n size: ['small', 'medium', 'large'] as const,\n variant: ['primary', 'secondary', 'tertiary'] as const,\n },\n },\n ButtonIcon: {\n classNames: {\n root: 'bui-ButtonIcon',\n },\n },\n ButtonLink: {\n classNames: {\n root: 'bui-ButtonLink',\n },\n },\n Card: {\n classNames: {\n root: 'bui-Card',\n header: 'bui-CardHeader',\n body: 'bui-CardBody',\n footer: 'bui-CardFooter',\n },\n },\n Checkbox: {\n classNames: {\n root: 'bui-Checkbox',\n indicator: 'bui-CheckboxIndicator',\n },\n dataAttributes: {\n selected: [true, false] as const,\n },\n },\n Container: {\n classNames: {\n root: 'bui-Container',\n },\n utilityProps: ['my', 'mt', 'mb', 'py', 'pt', 'pb', 'display'],\n },\n Dialog: {\n classNames: {\n overlay: 'bui-DialogOverlay',\n dialog: 'bui-Dialog',\n header: 'bui-DialogHeader',\n headerTitle: 'bui-DialogHeaderTitle',\n body: 'bui-DialogBody',\n footer: 'bui-DialogFooter',\n },\n },\n Accordion: {\n classNames: {\n root: 'bui-Accordion',\n trigger: 'bui-AccordionTrigger',\n triggerButton: 'bui-AccordionTriggerButton',\n triggerTitle: 'bui-AccordionTriggerTitle',\n triggerSubtitle: 'bui-AccordionTriggerSubtitle',\n triggerIcon: 'bui-AccordionTriggerIcon',\n panel: 'bui-AccordionPanel',\n group: 'bui-AccordionGroup',\n },\n },\n FieldError: {\n classNames: {\n root: 'bui-FieldError',\n },\n },\n FieldLabel: {\n classNames: {\n root: 'bui-FieldLabelWrapper',\n label: 'bui-FieldLabel',\n secondaryLabel: 'bui-FieldSecondaryLabel',\n description: 'bui-FieldDescription',\n },\n },\n Flex: {\n classNames: {\n root: 'bui-Flex',\n },\n utilityProps: [\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n 'gap',\n 'align',\n 'justify',\n 'direction',\n ],\n },\n Grid: {\n classNames: {\n root: 'bui-Grid',\n },\n utilityProps: [\n 'columns',\n 'gap',\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n ],\n },\n GridItem: {\n classNames: {\n root: 'bui-GridItem',\n },\n utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],\n },\n Header: {\n classNames: {\n toolbar: 'bui-HeaderToolbar',\n toolbarWrapper: 'bui-HeaderToolbarWrapper',\n toolbarContent: 'bui-HeaderToolbarContent',\n toolbarControls: 'bui-HeaderToolbarControls',\n toolbarIcon: 'bui-HeaderToolbarIcon',\n toolbarName: 'bui-HeaderToolbarName',\n tabsWrapper: 'bui-HeaderTabsWrapper',\n },\n },\n HeaderPage: {\n classNames: {\n root: 'bui-HeaderPage',\n content: 'bui-HeaderPageContent',\n breadcrumbs: 'bui-HeaderPageBreadcrumbs',\n tabsWrapper: 'bui-HeaderPageTabsWrapper',\n controls: 'bui-HeaderPageControls',\n },\n },\n Heading: {\n classNames: {\n root: 'bui-Heading',\n },\n dataAttributes: {\n variant: ['title1', 'title2', 'title3', 'subtitle'] as const,\n color: ['primary', 'secondary', 'muted'] as const,\n truncate: [true, false] as const,\n },\n },\n Icon: {\n classNames: {\n root: 'bui-Icon',\n },\n },\n Link: {\n classNames: {\n root: 'bui-Link',\n },\n dataAttributes: {\n variant: ['subtitle', 'body', 'caption', 'label'] as const,\n weight: ['regular', 'bold'] as const,\n color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,\n truncate: [true, false] as const,\n },\n },\n List: {\n classNames: {\n root: 'bui-List',\n row: 'bui-ListRow',\n label: 'bui-ListLabel',\n },\n },\n Menu: {\n classNames: {\n root: 'bui-Menu',\n popover: 'bui-MenuPopover',\n content: 'bui-MenuContent',\n section: 'bui-MenuSection',\n sectionHeader: 'bui-MenuSectionHeader',\n item: 'bui-MenuItem',\n itemListBox: 'bui-MenuItemListBox',\n itemListBoxCheck: 'bui-MenuItemListBoxCheck',\n itemWrapper: 'bui-MenuItemWrapper',\n itemContent: 'bui-MenuItemContent',\n itemArrow: 'bui-MenuItemArrow',\n separator: 'bui-MenuSeparator',\n searchField: 'bui-MenuSearchField',\n searchFieldInput: 'bui-MenuSearchFieldInput',\n searchFieldClear: 'bui-MenuSearchFieldClear',\n emptyState: 'bui-MenuEmptyState',\n },\n },\n PasswordField: {\n classNames: {\n root: 'bui-PasswordField',\n inputWrapper: 'bui-PasswordFieldInputWrapper',\n input: 'bui-PasswordFieldInput',\n inputIcon: 'bui-PasswordFieldIcon',\n inputVisibility: 'bui-PasswordFieldVisibility',\n },\n dataAttributes: {\n size: ['small', 'medium'] as const,\n },\n },\n Popover: {\n classNames: {\n root: 'bui-Popover',\n },\n },\n RadioGroup: {\n classNames: {\n root: 'bui-RadioGroup',\n content: 'bui-RadioGroupContent',\n radio: 'bui-Radio',\n },\n },\n SearchField: {\n classNames: {\n root: 'bui-SearchField',\n clear: 'bui-SearchFieldClear',\n inputWrapper: 'bui-SearchFieldInputWrapper',\n input: 'bui-SearchFieldInput',\n inputIcon: 'bui-SearchFieldInputIcon',\n },\n dataAttributes: {\n startCollapsed: [true, false] as const,\n size: ['small', 'medium'] as const,\n },\n },\n Select: {\n classNames: {\n root: 'bui-Select',\n popover: 'bui-SelectPopover',\n trigger: 'bui-SelectTrigger',\n chevron: 'bui-SelectTriggerChevron',\n value: 'bui-SelectValue',\n list: 'bui-SelectList',\n item: 'bui-SelectItem',\n itemIndicator: 'bui-SelectItemIndicator',\n itemLabel: 'bui-SelectItemLabel',\n searchWrapper: 'bui-SelectSearchWrapper',\n search: 'bui-SelectSearch',\n searchClear: 'bui-SelectSearchClear',\n noResults: 'bui-SelectNoResults',\n },\n dataAttributes: {\n size: ['small', 'medium'] as const,\n },\n },\n Skeleton: {\n classNames: {\n root: 'bui-Skeleton',\n },\n },\n Switch: {\n classNames: {\n root: 'bui-Switch',\n indicator: 'bui-SwitchIndicator',\n },\n },\n Table: {\n classNames: {\n table: 'bui-Table',\n header: 'bui-TableHeader',\n body: 'bui-TableBody',\n row: 'bui-TableRow',\n head: 'bui-TableHead',\n headContent: 'bui-TableHeadContent',\n headSortButton: 'bui-TableHeadSortButton',\n caption: 'bui-TableCaption',\n cell: 'bui-TableCell',\n cellContentWrapper: 'bui-TableCellContentWrapper',\n cellContent: 'bui-TableCellContent',\n cellIcon: 'bui-TableCellIcon',\n cellProfileAvatar: 'bui-TableCellProfileAvatar',\n cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',\n cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',\n cellProfileName: 'bui-TableCellProfileName',\n cellProfileLink: 'bui-TableCellProfileLink',\n },\n },\n TablePagination: {\n classNames: {\n root: 'bui-TablePagination',\n left: 'bui-TablePaginationLeft',\n right: 'bui-TablePaginationRight',\n select: 'bui-TablePaginationSelect',\n },\n },\n Tabs: {\n classNames: {\n tabs: 'bui-Tabs',\n tabList: 'bui-TabList',\n tabListWrapper: 'bui-TabListWrapper',\n tab: 'bui-Tab',\n tabActive: 'bui-TabActive',\n tabHovered: 'bui-TabHovered',\n panel: 'bui-TabPanel',\n },\n },\n TagGroup: {\n classNames: {\n group: 'bui-TagGroup',\n list: 'bui-TagList',\n tag: 'bui-Tag',\n tagIcon: 'bui-TagIcon',\n tagRemoveButton: 'bui-TagRemoveButton',\n },\n },\n Text: {\n classNames: {\n root: 'bui-Text',\n },\n dataAttributes: {\n variant: ['subtitle', 'body', 'caption', 'label'] as const,\n weight: ['regular', 'bold'] as const,\n color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,\n truncate: [true, false] as const,\n },\n },\n TextField: {\n classNames: {\n root: 'bui-TextField',\n inputWrapper: 'bui-InputWrapper',\n input: 'bui-Input',\n inputIcon: 'bui-InputIcon',\n inputAction: 'bui-InputAction',\n },\n dataAttributes: {\n invalid: [true, false] as const,\n disabled: [true, false] as const,\n size: ['small', 'medium'] as const,\n },\n },\n Tooltip: {\n classNames: {\n tooltip: 'bui-Tooltip',\n arrow: 'bui-TooltipArrow',\n },\n },\n VisuallyHidden: {\n classNames: {\n root: 'bui-VisuallyHidden',\n },\n },\n} as const satisfies Record<string, ComponentDefinition>;\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@backstage/ui",
3
- "version": "0.0.0-nightly-20251107024121",
3
+ "version": "0.0.0-nightly-20251108024037",
4
4
  "backstage": {
5
5
  "role": "web-library"
6
6
  },
@@ -40,14 +40,13 @@
40
40
  "test": "backstage-cli package test"
41
41
  },
42
42
  "dependencies": {
43
- "@base-ui-components/react": "1.0.0-alpha.7",
44
43
  "@remixicon/react": "^4.6.0",
45
44
  "@tanstack/react-table": "^8.21.3",
46
45
  "clsx": "^2.1.1",
47
46
  "react-aria-components": "^1.13.0"
48
47
  },
49
48
  "devDependencies": {
50
- "@backstage/cli": "0.0.0-nightly-20251107024121",
49
+ "@backstage/cli": "0.0.0-nightly-20251108024037",
51
50
  "@types/react": "^18.0.0",
52
51
  "@types/react-dom": "^18.0.0",
53
52
  "chalk": "^5.4.1",