@backstage/ui 0.0.0-nightly-20250816024305 → 0.0.0-nightly-20250818024926
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.
- package/CHANGELOG.md +2 -1
- package/css/styles.css +182 -121
- package/dist/components/Checkbox/Checkbox.esm.js +1 -2
- package/dist/components/Checkbox/Checkbox.esm.js.map +1 -1
- package/dist/components/Header/Header.esm.js +1 -10
- package/dist/components/Header/Header.esm.js.map +1 -1
- package/dist/components/Header/HeaderToolbar.esm.js +3 -31
- package/dist/components/Header/HeaderToolbar.esm.js.map +1 -1
- package/dist/components/HeaderPage/HeaderPage.esm.js +3 -31
- package/dist/components/HeaderPage/HeaderPage.esm.js.map +1 -1
- package/dist/components/Menu/Menu.esm.js +144 -202
- package/dist/components/Menu/Menu.esm.js.map +1 -1
- package/dist/components/TablePagination/TablePagination.esm.js +1 -2
- package/dist/components/TablePagination/TablePagination.esm.js.map +1 -1
- package/dist/index.d.ts +73 -61
- package/dist/index.esm.js +1 -1
- package/dist/utils/componentDefinitions.esm.js +14 -14
- package/dist/utils/componentDefinitions.esm.js.map +1 -1
- package/package.json +2 -2
- package/dist/components/Menu/Combobox.esm.js +0 -212
- package/dist/components/Menu/Combobox.esm.js.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ReactNode, ReactElement, ElementType, ComponentPropsWithRef,
|
|
2
|
+
import { ReactNode, ReactElement, ElementType, ComponentPropsWithRef, ComponentProps } from 'react';
|
|
3
3
|
import { RemixiconComponentType } from '@remixicon/react';
|
|
4
4
|
import { Avatar as Avatar$1 } from '@base-ui-components/react/avatar';
|
|
5
|
-
import { ButtonProps as ButtonProps$1, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TableProps, TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps as CellProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1 } from 'react-aria-components';
|
|
5
|
+
import { ButtonProps as ButtonProps$1, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TableProps, TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps as CellProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, MenuProps as MenuProps$1, PopoverProps, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1 } from 'react-aria-components';
|
|
6
6
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
7
7
|
import { NavigateOptions } from 'react-router-dom';
|
|
8
8
|
import { Collapsible as Collapsible$1 } from '@base-ui-components/react/collapsible';
|
|
9
|
-
import { Menu as Menu$1 } from '@base-ui-components/react/menu';
|
|
10
9
|
import { ScrollArea as ScrollArea$1 } from '@base-ui-components/react/scroll-area';
|
|
11
10
|
|
|
12
11
|
/** @public */
|
|
@@ -176,21 +175,21 @@ declare const componentDefinitions: {
|
|
|
176
175
|
};
|
|
177
176
|
readonly Menu: {
|
|
178
177
|
readonly classNames: {
|
|
179
|
-
readonly
|
|
180
|
-
readonly
|
|
181
|
-
readonly
|
|
182
|
-
readonly
|
|
183
|
-
readonly
|
|
178
|
+
readonly root: "bui-Menu";
|
|
179
|
+
readonly popover: "bui-MenuPopover";
|
|
180
|
+
readonly content: "bui-MenuContent";
|
|
181
|
+
readonly section: "bui-MenuSection";
|
|
182
|
+
readonly sectionHeader: "bui-MenuSectionHeader";
|
|
184
183
|
readonly item: "bui-MenuItem";
|
|
185
|
-
readonly
|
|
186
|
-
readonly
|
|
187
|
-
readonly
|
|
188
|
-
readonly
|
|
189
|
-
readonly radioItemIndicator: "bui-MenuRadioItemIndicator";
|
|
190
|
-
readonly checkboxItem: "bui-MenuCheckboxItem";
|
|
191
|
-
readonly checkboxItemIndicator: "bui-MenuCheckboxItemIndicator";
|
|
192
|
-
readonly submenuTrigger: "bui-MenuSubmenuTrigger";
|
|
184
|
+
readonly itemListBox: "bui-MenuItemListBox";
|
|
185
|
+
readonly itemListBoxCheck: "bui-MenuItemListBoxCheck";
|
|
186
|
+
readonly itemContent: "bui-MenuItemContent";
|
|
187
|
+
readonly itemArrow: "bui-MenuItemArrow";
|
|
193
188
|
readonly separator: "bui-MenuSeparator";
|
|
189
|
+
readonly searchField: "bui-MenuSearchField";
|
|
190
|
+
readonly searchFieldInput: "bui-MenuSearchFieldInput";
|
|
191
|
+
readonly searchFieldClear: "bui-MenuSearchFieldClear";
|
|
192
|
+
readonly emptyState: "bui-MenuEmptyState";
|
|
194
193
|
};
|
|
195
194
|
};
|
|
196
195
|
readonly Popover: {
|
|
@@ -915,7 +914,6 @@ interface HeaderProps {
|
|
|
915
914
|
title?: string;
|
|
916
915
|
titleLink?: string;
|
|
917
916
|
customActions?: React.ReactNode;
|
|
918
|
-
menuItems?: HeaderMenuItem[];
|
|
919
917
|
tabs?: HeaderTab[];
|
|
920
918
|
onTabSelectionChange?: TabsProps$1['onSelectionChange'];
|
|
921
919
|
}
|
|
@@ -935,16 +933,6 @@ interface HeaderTab {
|
|
|
935
933
|
*/
|
|
936
934
|
matchStrategy?: TabMatchStrategy;
|
|
937
935
|
}
|
|
938
|
-
/**
|
|
939
|
-
* Represents an option item in the header dropdown menu.
|
|
940
|
-
*
|
|
941
|
-
* @public
|
|
942
|
-
*/
|
|
943
|
-
interface HeaderMenuItem {
|
|
944
|
-
label: string;
|
|
945
|
-
value: string;
|
|
946
|
-
onClick?: () => void;
|
|
947
|
-
}
|
|
948
936
|
|
|
949
937
|
declare module 'react-aria-components' {
|
|
950
938
|
interface RouterConfig {
|
|
@@ -966,7 +954,6 @@ declare const Header: (props: HeaderProps) => react_jsx_runtime.JSX.Element;
|
|
|
966
954
|
interface HeaderPageProps {
|
|
967
955
|
title?: string;
|
|
968
956
|
customActions?: React.ReactNode;
|
|
969
|
-
menuItems?: HeaderMenuItem[];
|
|
970
957
|
tabs?: HeaderTab[];
|
|
971
958
|
breadcrumbs?: HeaderPageBreadcrumb[];
|
|
972
959
|
}
|
|
@@ -1236,43 +1223,68 @@ declare const TooltipTrigger: (props: TooltipTriggerComponentProps) => react_jsx
|
|
|
1236
1223
|
declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLDivElement>>;
|
|
1237
1224
|
|
|
1238
1225
|
/** @public */
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
value: string;
|
|
1242
|
-
disabled?: boolean;
|
|
1243
|
-
};
|
|
1226
|
+
interface MenuTriggerProps extends MenuTriggerProps$1 {
|
|
1227
|
+
}
|
|
1244
1228
|
/** @public */
|
|
1245
|
-
interface
|
|
1246
|
-
options: MenuComboboxOption[];
|
|
1247
|
-
value?: string[];
|
|
1248
|
-
onValueChange?: (value: string[]) => void;
|
|
1249
|
-
multiselect?: boolean;
|
|
1250
|
-
closeParentOnEsc?: boolean;
|
|
1229
|
+
interface SubmenuTriggerProps extends SubmenuTriggerProps$1 {
|
|
1251
1230
|
}
|
|
1252
1231
|
/** @public */
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1232
|
+
interface MenuProps<T> extends MenuProps$1<T>, Omit<MenuProps$1<T>, 'children'> {
|
|
1233
|
+
placement?: PopoverProps['placement'];
|
|
1234
|
+
}
|
|
1235
|
+
/** @public */
|
|
1236
|
+
interface MenuListBoxProps<T> extends ListBoxProps<T>, Omit<ListBoxProps<T>, 'children'> {
|
|
1237
|
+
placement?: PopoverProps['placement'];
|
|
1238
|
+
}
|
|
1239
|
+
/** @public */
|
|
1240
|
+
interface MenuAutocompleteProps<T> extends MenuProps$1<T>, Omit<MenuProps$1<T>, 'children'> {
|
|
1241
|
+
placeholder?: string;
|
|
1242
|
+
placement?: PopoverProps['placement'];
|
|
1243
|
+
}
|
|
1244
|
+
/** @public */
|
|
1245
|
+
interface MenuAutocompleteListBoxProps<T> extends ListBoxProps<T>, Omit<ListBoxProps<T>, 'children'> {
|
|
1246
|
+
placeholder?: string;
|
|
1247
|
+
placement?: PopoverProps['placement'];
|
|
1248
|
+
}
|
|
1249
|
+
/** @public */
|
|
1250
|
+
interface MenuItemProps extends MenuItemProps$1, Omit<MenuItemProps$1, 'children'> {
|
|
1251
|
+
iconStart?: React.ReactNode;
|
|
1252
|
+
children: React.ReactNode;
|
|
1253
|
+
color?: 'primary' | 'danger';
|
|
1254
|
+
}
|
|
1255
|
+
/** @public */
|
|
1256
|
+
interface MenuListBoxItemProps extends ListBoxItemProps, Omit<ListBoxItemProps, 'children'> {
|
|
1257
|
+
children: React.ReactNode;
|
|
1258
|
+
}
|
|
1259
|
+
/** @public */
|
|
1260
|
+
interface MenuSectionProps<T> extends MenuSectionProps$1<T>, Omit<MenuSectionProps$1<T>, 'children'> {
|
|
1261
|
+
title: string;
|
|
1262
|
+
children: React.ReactNode;
|
|
1263
|
+
}
|
|
1264
|
+
/** @public */
|
|
1265
|
+
interface MenuSeparatorProps extends SeparatorProps {
|
|
1266
|
+
}
|
|
1273
1267
|
|
|
1274
1268
|
/** @public */
|
|
1275
|
-
declare const
|
|
1269
|
+
declare const MenuTrigger: (props: MenuTriggerProps) => react_jsx_runtime.JSX.Element;
|
|
1270
|
+
/** @public */
|
|
1271
|
+
declare const SubmenuTrigger: (props: SubmenuTriggerProps) => react_jsx_runtime.JSX.Element;
|
|
1272
|
+
/** @public */
|
|
1273
|
+
declare const Menu: (props: MenuProps<object>) => react_jsx_runtime.JSX.Element;
|
|
1274
|
+
/** @public */
|
|
1275
|
+
declare const MenuListBox: (props: MenuListBoxProps<object>) => react_jsx_runtime.JSX.Element;
|
|
1276
|
+
/** @public */
|
|
1277
|
+
declare const MenuAutocomplete: (props: MenuAutocompleteProps<object>) => react_jsx_runtime.JSX.Element;
|
|
1278
|
+
/** @public */
|
|
1279
|
+
declare const MenuAutocompleteListbox: (props: MenuAutocompleteListBoxProps<object>) => react_jsx_runtime.JSX.Element;
|
|
1280
|
+
/** @public */
|
|
1281
|
+
declare const MenuItem: (props: MenuItemProps) => react_jsx_runtime.JSX.Element;
|
|
1282
|
+
/** @public */
|
|
1283
|
+
declare const MenuListBoxItem: (props: MenuListBoxItemProps) => react_jsx_runtime.JSX.Element;
|
|
1284
|
+
/** @public */
|
|
1285
|
+
declare const MenuSection: (props: MenuSectionProps<object>) => react_jsx_runtime.JSX.Element;
|
|
1286
|
+
/** @public */
|
|
1287
|
+
declare const MenuSeparator: (props: MenuSeparatorProps) => react_jsx_runtime.JSX.Element;
|
|
1276
1288
|
|
|
1277
1289
|
/** @public */
|
|
1278
1290
|
declare const ScrollArea: {
|
|
@@ -1482,4 +1494,4 @@ declare const useBreakpoint: () => {
|
|
|
1482
1494
|
down: (key: Breakpoint) => boolean;
|
|
1483
1495
|
};
|
|
1484
1496
|
|
|
1485
|
-
export { type AlignItems, type ArbitraryStylingPropDef, Avatar, type AvatarProps, type BooleanPropDef, type Border, type BorderRadius, Box, type BoxOwnProps, 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, Collapsible, Column, type Columns, type ComponentClassNames, type ComponentDefinition, type ComponentDefinitionName, Container, type ContainerProps, type DataAttributeValues, type DataAttributesMap, type Display, type DisplayProps, type EnumOrStringPropDef, type EnumPropDef, FieldLabel, type FieldLabelProps, Flex, type FlexDirection, type FlexOwnProps, type FlexProps, type FlexWrap, type GapProps, type GetPropDefType, type GetPropDefTypes, Grid, type GridItemOwnProps, type GridItemProps, type GridOwnProps, type GridProps, Header,
|
|
1497
|
+
export { type AlignItems, type ArbitraryStylingPropDef, Avatar, type AvatarProps, type BooleanPropDef, type Border, type BorderRadius, Box, type BoxOwnProps, 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, Collapsible, Column, type Columns, type ComponentClassNames, type ComponentDefinition, type ComponentDefinitionName, Container, type ContainerProps, type DataAttributeValues, type DataAttributesMap, type Display, type DisplayProps, type EnumOrStringPropDef, type EnumPropDef, FieldLabel, type FieldLabelProps, Flex, type FlexDirection, type FlexOwnProps, type FlexProps, type FlexWrap, type GapProps, type GetPropDefType, type GetPropDefTypes, Grid, type GridItemOwnProps, type GridItemProps, type GridOwnProps, type GridProps, Header, HeaderPage, type HeaderPageBreadcrumb, type HeaderPageProps, type HeaderProps, type HeaderTab, type HeightProps, Icon, IconContext, type IconContextProps, type IconMap, type IconNames, type IconProps, IconProvider, type IconProviderProps, type JustifyContent, Link, type LinkProps, type MarginProps, 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 NonStylingPropDef, type PaddingProps, type PositionProps, type PropDef, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type ReactNodePropDef, type RegularPropDef, type Responsive, type ResponsivePropDef, Row, ScrollArea, SearchField, type SearchFieldProps, Select, type SelectProps, Skeleton, type SkeletonProps, type Space, type SpaceProps, type StringPropDef, type StylingPropDef, 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, 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, type WidthProps, boxPropDefs, breakpoints, componentDefinitions, displayPropDefs, flexPropDefs, gapPropDefs, gridItemPropDefs, gridPropDefs, heightPropDefs, icons, marginPropDefs, paddingPropDefs, positionPropDefs, useBreakpoint, useIcons, useTable, widthPropDefs };
|
package/dist/index.esm.js
CHANGED
|
@@ -33,7 +33,7 @@ export { Tab, TabList, TabPanel, Tabs } from './components/Tabs/Tabs.esm.js';
|
|
|
33
33
|
export { Text } from './components/Text/Text.esm.js';
|
|
34
34
|
export { TextField } from './components/TextField/TextField.esm.js';
|
|
35
35
|
export { Tooltip, TooltipTrigger } from './components/Tooltip/Tooltip.esm.js';
|
|
36
|
-
export { Menu } from './components/Menu/Menu.esm.js';
|
|
36
|
+
export { Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, SubmenuTrigger } from './components/Menu/Menu.esm.js';
|
|
37
37
|
export { ScrollArea } from './components/ScrollArea/ScrollArea.esm.js';
|
|
38
38
|
export { SearchField } from './components/SearchField/SearchField.esm.js';
|
|
39
39
|
export { Link } from './components/Link/Link.esm.js';
|
|
@@ -135,21 +135,21 @@ const componentDefinitions = {
|
|
|
135
135
|
},
|
|
136
136
|
Menu: {
|
|
137
137
|
classNames: {
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
138
|
+
root: "bui-Menu",
|
|
139
|
+
popover: "bui-MenuPopover",
|
|
140
|
+
content: "bui-MenuContent",
|
|
141
|
+
section: "bui-MenuSection",
|
|
142
|
+
sectionHeader: "bui-MenuSectionHeader",
|
|
143
143
|
item: "bui-MenuItem",
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
144
|
+
itemListBox: "bui-MenuItemListBox",
|
|
145
|
+
itemListBoxCheck: "bui-MenuItemListBoxCheck",
|
|
146
|
+
itemContent: "bui-MenuItemContent",
|
|
147
|
+
itemArrow: "bui-MenuItemArrow",
|
|
148
|
+
separator: "bui-MenuSeparator",
|
|
149
|
+
searchField: "bui-MenuSearchField",
|
|
150
|
+
searchFieldInput: "bui-MenuSearchFieldInput",
|
|
151
|
+
searchFieldClear: "bui-MenuSearchFieldClear",
|
|
152
|
+
emptyState: "bui-MenuEmptyState"
|
|
153
153
|
}
|
|
154
154
|
},
|
|
155
155
|
Popover: {
|
|
@@ -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 },\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-CheckboxRoot',\n label: 'bui-CheckboxLabel',\n indicator: 'bui-CheckboxIndicator',\n },\n dataAttributes: {\n checked: [true, false] as const,\n },\n },\n Collapsible: {\n classNames: {\n root: 'bui-CollapsibleRoot',\n trigger: 'bui-CollapsibleTrigger',\n panel: 'bui-CollapsiblePanel',\n },\n },\n Container: {\n classNames: {\n root: 'bui-Container',\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 },\n Grid: {\n classNames: {\n root: 'bui-Grid',\n item: 'bui-GridItem',\n },\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 },\n },\n List: {\n classNames: {\n root: 'bui-List',\n row: 'bui-ListRow',\n label: 'bui-ListLabel',\n },\n },\n Menu: {\n classNames: {\n trigger: 'bui-MenuTrigger',\n backdrop: 'bui-MenuBackdrop',\n positioner: 'bui-MenuPositioner',\n popup: 'bui-MenuPopup',\n arrow: 'bui-MenuArrow',\n item: 'bui-MenuItem',\n group: 'bui-MenuGroup',\n groupLabel: 'bui-MenuGroupLabel',\n radioGroup: 'bui-MenuRadioGroup',\n radioItem: 'bui-MenuRadioItem',\n radioItemIndicator: 'bui-MenuRadioItemIndicator',\n checkboxItem: 'bui-MenuCheckboxItem',\n checkboxItemIndicator: 'bui-MenuCheckboxItemIndicator',\n submenuTrigger: 'bui-MenuSubmenuTrigger',\n separator: 'bui-MenuSeparator',\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 ScrollArea: {\n classNames: {\n root: 'bui-ScrollAreaRoot',\n viewport: 'bui-ScrollAreaViewport',\n scrollbar: 'bui-ScrollAreaScrollbar',\n thumb: 'bui-ScrollAreaThumb',\n },\n },\n SearchField: {\n classNames: {\n root: 'bui-SearchField',\n clear: 'bui-InputClear',\n },\n dataAttributes: {\n startCollapsed: [true, false] as const,\n },\n },\n Select: {\n classNames: {\n root: 'bui-Select',\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 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 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 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 },\n dataAttributes: {\n invalid: [true, false] as const,\n disabled: [true, false] as const,\n },\n },\n Tooltip: {\n classNames: {\n tooltip: 'bui-Tooltip',\n arrow: 'bui-TooltipArrow',\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 },\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-CheckboxRoot',\n label: 'bui-CheckboxLabel',\n indicator: 'bui-CheckboxIndicator',\n },\n dataAttributes: {\n checked: [true, false] as const,\n },\n },\n Collapsible: {\n classNames: {\n root: 'bui-CollapsibleRoot',\n trigger: 'bui-CollapsibleTrigger',\n panel: 'bui-CollapsiblePanel',\n },\n },\n Container: {\n classNames: {\n root: 'bui-Container',\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 },\n Grid: {\n classNames: {\n root: 'bui-Grid',\n item: 'bui-GridItem',\n },\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 },\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 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 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 ScrollArea: {\n classNames: {\n root: 'bui-ScrollAreaRoot',\n viewport: 'bui-ScrollAreaViewport',\n scrollbar: 'bui-ScrollAreaScrollbar',\n thumb: 'bui-ScrollAreaThumb',\n },\n },\n SearchField: {\n classNames: {\n root: 'bui-SearchField',\n clear: 'bui-InputClear',\n },\n dataAttributes: {\n startCollapsed: [true, false] as const,\n },\n },\n Select: {\n classNames: {\n root: 'bui-Select',\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 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 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 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 },\n dataAttributes: {\n invalid: [true, false] as const,\n disabled: [true, false] as const,\n },\n },\n Tooltip: {\n classNames: {\n tooltip: 'bui-Tooltip',\n arrow: 'bui-TooltipArrow',\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-
|
|
3
|
+
"version": "0.0.0-nightly-20250818024926",
|
|
4
4
|
"backstage": {
|
|
5
5
|
"role": "web-library"
|
|
6
6
|
},
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"react-aria-components": "^1.10.1"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@backstage/cli": "0.0.0-nightly-
|
|
49
|
+
"@backstage/cli": "0.0.0-nightly-20250818024926",
|
|
50
50
|
"@storybook/react": "^8.6.12",
|
|
51
51
|
"@types/react": "^18.0.0",
|
|
52
52
|
"@types/react-dom": "^18.0.0",
|
|
@@ -1,212 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef, useState, useMemo, useCallback, useRef, useEffect } from 'react';
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import '../Icon/context.esm.js';
|
|
5
|
-
import '../Box/Box.esm.js';
|
|
6
|
-
import '../Grid/Grid.esm.js';
|
|
7
|
-
import '../Flex/Flex.esm.js';
|
|
8
|
-
import '../Container/Container.esm.js';
|
|
9
|
-
import '../Avatar/Avatar.esm.js';
|
|
10
|
-
import '../Button/Button.esm.js';
|
|
11
|
-
import '../Card/Card.esm.js';
|
|
12
|
-
import '../Collapsible/Collapsible.esm.js';
|
|
13
|
-
import '../FieldLabel/FieldLabel.esm.js';
|
|
14
|
-
import 'react-aria-components';
|
|
15
|
-
import '@remixicon/react';
|
|
16
|
-
import '../ButtonIcon/ButtonIcon.esm.js';
|
|
17
|
-
import './Menu.esm.js';
|
|
18
|
-
import '../Text/Text.esm.js';
|
|
19
|
-
import 'react-router-dom';
|
|
20
|
-
import '../Tabs/Tabs.esm.js';
|
|
21
|
-
import '../Link/Link.esm.js';
|
|
22
|
-
import { Icon } from '../Icon/Icon.esm.js';
|
|
23
|
-
import '../ButtonLink/ButtonLink.esm.js';
|
|
24
|
-
import '../Checkbox/Checkbox.esm.js';
|
|
25
|
-
import '../RadioGroup/RadioGroup.esm.js';
|
|
26
|
-
import '../Table/components/Cell.esm.js';
|
|
27
|
-
import '@base-ui-components/react/avatar';
|
|
28
|
-
import '../TextField/TextField.esm.js';
|
|
29
|
-
import '../Tooltip/Tooltip.esm.js';
|
|
30
|
-
import '../ScrollArea/ScrollArea.esm.js';
|
|
31
|
-
import '../SearchField/SearchField.esm.js';
|
|
32
|
-
import '../Select/Select.esm.js';
|
|
33
|
-
import '../Switch/Switch.esm.js';
|
|
34
|
-
import { useId } from 'react-aria';
|
|
35
|
-
|
|
36
|
-
const getListboxItemId = (listboxId, optionValue) => `${listboxId}-option-${optionValue}`;
|
|
37
|
-
function ComboboxItem({
|
|
38
|
-
option,
|
|
39
|
-
optionIndex,
|
|
40
|
-
value,
|
|
41
|
-
activeOptionIndex,
|
|
42
|
-
onItemActive,
|
|
43
|
-
onItemSelect,
|
|
44
|
-
listboxId
|
|
45
|
-
}) {
|
|
46
|
-
const isSelected = value?.includes(option.value) ?? false;
|
|
47
|
-
const isHighlighted = optionIndex === activeOptionIndex;
|
|
48
|
-
const itemId = getListboxItemId(listboxId, option.value);
|
|
49
|
-
const itemRef = useRef(null);
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
if (isHighlighted && itemRef.current) {
|
|
52
|
-
itemRef.current.scrollIntoView({ block: "nearest" });
|
|
53
|
-
}
|
|
54
|
-
}, [isHighlighted]);
|
|
55
|
-
return /* @__PURE__ */ jsxs(
|
|
56
|
-
"div",
|
|
57
|
-
{
|
|
58
|
-
ref: itemRef,
|
|
59
|
-
className: "bui-SubmenuComboboxItem",
|
|
60
|
-
id: itemId,
|
|
61
|
-
role: "option",
|
|
62
|
-
"aria-selected": isSelected,
|
|
63
|
-
"data-highlighted": isHighlighted ? true : void 0,
|
|
64
|
-
"data-selected": isSelected ? true : void 0,
|
|
65
|
-
"data-disabled": option.disabled ? true : void 0,
|
|
66
|
-
onMouseOver: () => !option.disabled && onItemActive(optionIndex),
|
|
67
|
-
onClick: () => !option.disabled && onItemSelect(option.value),
|
|
68
|
-
children: [
|
|
69
|
-
/* @__PURE__ */ jsx("div", { className: "bui-SubmenuComboboxItemCheckbox", children: isSelected && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", name: "check", size: 12 }) }),
|
|
70
|
-
/* @__PURE__ */ jsx("div", { className: "bui-SubmenuComboboxItemLabel", children: option.label })
|
|
71
|
-
]
|
|
72
|
-
}
|
|
73
|
-
);
|
|
74
|
-
}
|
|
75
|
-
const Combobox = forwardRef(
|
|
76
|
-
(props, ref) => {
|
|
77
|
-
const {
|
|
78
|
-
options,
|
|
79
|
-
value,
|
|
80
|
-
onValueChange,
|
|
81
|
-
multiselect = false,
|
|
82
|
-
className,
|
|
83
|
-
...rest
|
|
84
|
-
} = props;
|
|
85
|
-
const triggerId = useId();
|
|
86
|
-
const listboxId = `${triggerId}-listbox`;
|
|
87
|
-
const [filterString, setFilterString] = useState("");
|
|
88
|
-
const [activeOptionIndex, setActiveOptionIndex] = useState(0);
|
|
89
|
-
const filteredOptions = useMemo(() => {
|
|
90
|
-
if (!filterString) return options;
|
|
91
|
-
const lowerFilterString = filterString.toLocaleLowerCase("en-US");
|
|
92
|
-
return options.filter(
|
|
93
|
-
(option) => option.label.toLocaleLowerCase("en-US").includes(lowerFilterString)
|
|
94
|
-
);
|
|
95
|
-
}, [filterString, options]);
|
|
96
|
-
const activeDescendantId = activeOptionIndex >= 0 && filteredOptions.length > 0 ? getListboxItemId(listboxId, filteredOptions[activeOptionIndex].value) : void 0;
|
|
97
|
-
const handleValueChange = useCallback(
|
|
98
|
-
(toggledValue) => {
|
|
99
|
-
let newValue;
|
|
100
|
-
if (multiselect) {
|
|
101
|
-
newValue = value?.includes(toggledValue) ? value.filter((v) => v !== toggledValue) : [...value ?? [], toggledValue];
|
|
102
|
-
} else {
|
|
103
|
-
newValue = value?.includes(toggledValue) ? [] : [toggledValue];
|
|
104
|
-
}
|
|
105
|
-
onValueChange?.(newValue);
|
|
106
|
-
},
|
|
107
|
-
[multiselect, onValueChange, value]
|
|
108
|
-
);
|
|
109
|
-
const handleSearchChange = useCallback(
|
|
110
|
-
(e) => {
|
|
111
|
-
setFilterString(e.target.value);
|
|
112
|
-
setActiveOptionIndex(0);
|
|
113
|
-
e.preventDefault();
|
|
114
|
-
},
|
|
115
|
-
[]
|
|
116
|
-
);
|
|
117
|
-
const handleKeyDown = useCallback(
|
|
118
|
-
(e) => {
|
|
119
|
-
let wasEscapeKey = false;
|
|
120
|
-
switch (e.key) {
|
|
121
|
-
case "ArrowDown":
|
|
122
|
-
e.preventDefault();
|
|
123
|
-
setActiveOptionIndex(
|
|
124
|
-
(prev) => Math.min(prev + 1, filteredOptions.length - 1)
|
|
125
|
-
);
|
|
126
|
-
break;
|
|
127
|
-
case "ArrowUp":
|
|
128
|
-
e.preventDefault();
|
|
129
|
-
setActiveOptionIndex((prev) => Math.max(prev - 1, 0));
|
|
130
|
-
break;
|
|
131
|
-
case "Home":
|
|
132
|
-
e.preventDefault();
|
|
133
|
-
setActiveOptionIndex(0);
|
|
134
|
-
break;
|
|
135
|
-
case "End":
|
|
136
|
-
e.preventDefault();
|
|
137
|
-
setActiveOptionIndex(Math.max(filteredOptions.length - 1, 0));
|
|
138
|
-
break;
|
|
139
|
-
case "Enter":
|
|
140
|
-
e.preventDefault();
|
|
141
|
-
if (activeOptionIndex >= 0 && !filteredOptions[activeOptionIndex].disabled) {
|
|
142
|
-
handleValueChange(filteredOptions[activeOptionIndex].value);
|
|
143
|
-
}
|
|
144
|
-
break;
|
|
145
|
-
case "Escape":
|
|
146
|
-
wasEscapeKey = true;
|
|
147
|
-
break;
|
|
148
|
-
}
|
|
149
|
-
if (!wasEscapeKey) {
|
|
150
|
-
e.stopPropagation();
|
|
151
|
-
}
|
|
152
|
-
},
|
|
153
|
-
[filteredOptions, activeOptionIndex, handleValueChange]
|
|
154
|
-
);
|
|
155
|
-
return /* @__PURE__ */ jsxs(
|
|
156
|
-
"div",
|
|
157
|
-
{
|
|
158
|
-
ref,
|
|
159
|
-
role: "combobox",
|
|
160
|
-
className: clsx("bui-MenuCombobox", className),
|
|
161
|
-
...rest,
|
|
162
|
-
children: [
|
|
163
|
-
/* @__PURE__ */ jsx(
|
|
164
|
-
"input",
|
|
165
|
-
{
|
|
166
|
-
className: "bui-SubmenuComboboxSearch",
|
|
167
|
-
type: "text",
|
|
168
|
-
role: "combobox",
|
|
169
|
-
placeholder: "Filter...",
|
|
170
|
-
"aria-labelledby": triggerId,
|
|
171
|
-
"aria-controls": listboxId,
|
|
172
|
-
"aria-autocomplete": "list",
|
|
173
|
-
"aria-activedescendant": activeDescendantId,
|
|
174
|
-
"aria-expanded": "true",
|
|
175
|
-
"aria-haspopup": "listbox",
|
|
176
|
-
value: filterString,
|
|
177
|
-
onKeyDown: handleKeyDown,
|
|
178
|
-
onChange: handleSearchChange
|
|
179
|
-
}
|
|
180
|
-
),
|
|
181
|
-
/* @__PURE__ */ jsx(
|
|
182
|
-
"div",
|
|
183
|
-
{
|
|
184
|
-
role: "listbox",
|
|
185
|
-
id: listboxId,
|
|
186
|
-
tabIndex: -1,
|
|
187
|
-
"aria-multiselectable": multiselect ? true : void 0,
|
|
188
|
-
className: "bui-SubmenuComboboxItems",
|
|
189
|
-
children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "bui-SubmenuComboboxNoResults", children: "No results found" }) : filteredOptions.map((option, index) => /* @__PURE__ */ jsx(
|
|
190
|
-
ComboboxItem,
|
|
191
|
-
{
|
|
192
|
-
option,
|
|
193
|
-
optionIndex: index,
|
|
194
|
-
value,
|
|
195
|
-
activeOptionIndex,
|
|
196
|
-
onItemActive: setActiveOptionIndex,
|
|
197
|
-
onItemSelect: handleValueChange,
|
|
198
|
-
listboxId
|
|
199
|
-
},
|
|
200
|
-
option.value
|
|
201
|
-
))
|
|
202
|
-
}
|
|
203
|
-
)
|
|
204
|
-
]
|
|
205
|
-
}
|
|
206
|
-
);
|
|
207
|
-
}
|
|
208
|
-
);
|
|
209
|
-
Combobox.displayName = "Combobox";
|
|
210
|
-
|
|
211
|
-
export { Combobox };
|
|
212
|
-
//# sourceMappingURL=Combobox.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.esm.js","sources":["../../../src/components/Menu/Combobox.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 forwardRef,\n useState,\n useMemo,\n useCallback,\n ChangeEvent,\n KeyboardEvent,\n useRef,\n useEffect,\n} from 'react';\nimport clsx from 'clsx';\nimport { MenuComboboxOption, MenuComboboxProps } from './types';\nimport { Icon } from '../..';\nimport { useId } from 'react-aria';\n\nconst getListboxItemId = (listboxId: string, optionValue: string): string =>\n `${listboxId}-option-${optionValue}`;\n\n// Internal component for rendering individual items\nfunction ComboboxItem({\n option,\n optionIndex,\n value,\n activeOptionIndex,\n onItemActive,\n onItemSelect,\n listboxId,\n}: {\n option: MenuComboboxOption;\n optionIndex: number;\n value?: string[];\n activeOptionIndex: number;\n onItemActive: (index: number) => void;\n onItemSelect: (value: string) => void;\n listboxId: string;\n}) {\n const isSelected = value?.includes(option.value) ?? false;\n const isHighlighted = optionIndex === activeOptionIndex;\n const itemId = getListboxItemId(listboxId, option.value);\n\n const itemRef = useRef<HTMLDivElement>(null);\n\n // Scroll the item into view when it becomes highlighted\n useEffect(() => {\n if (isHighlighted && itemRef.current) {\n itemRef.current.scrollIntoView({ block: 'nearest' });\n }\n }, [isHighlighted]);\n\n return (\n <div\n ref={itemRef}\n className=\"bui-SubmenuComboboxItem\"\n id={itemId}\n role=\"option\"\n aria-selected={isSelected}\n data-highlighted={isHighlighted ? true : undefined}\n data-selected={isSelected ? true : undefined}\n data-disabled={option.disabled ? true : undefined}\n onMouseOver={() => !option.disabled && onItemActive(optionIndex)}\n onClick={() => !option.disabled && onItemSelect(option.value)}\n >\n <div className=\"bui-SubmenuComboboxItemCheckbox\">\n {isSelected && <Icon aria-hidden=\"true\" name=\"check\" size={12} />}\n </div>\n <div className=\"bui-SubmenuComboboxItemLabel\">{option.label}</div>\n </div>\n );\n}\n\n/** @public */\nexport const Combobox = forwardRef<HTMLDivElement, MenuComboboxProps>(\n (props, ref) => {\n const {\n options,\n value,\n onValueChange,\n multiselect = false,\n className,\n ...rest\n } = props;\n\n const triggerId = useId();\n const listboxId = `${triggerId}-listbox`;\n\n // State management\n const [filterString, setFilterString] = useState<string>('');\n const [activeOptionIndex, setActiveOptionIndex] = useState<number>(0);\n\n // Filter options based on input\n const filteredOptions = useMemo(() => {\n if (!filterString) return options;\n const lowerFilterString = filterString.toLocaleLowerCase('en-US');\n return options.filter(option =>\n option.label.toLocaleLowerCase('en-US').includes(lowerFilterString),\n );\n }, [filterString, options]);\n\n // Get the active descendant ID for accessibility\n const activeDescendantId =\n activeOptionIndex >= 0 && filteredOptions.length > 0\n ? getListboxItemId(listboxId, filteredOptions[activeOptionIndex].value)\n : undefined;\n\n const handleValueChange = useCallback(\n (toggledValue: string) => {\n let newValue: string[];\n if (multiselect) {\n newValue = value?.includes(toggledValue)\n ? value.filter(v => v !== toggledValue)\n : [...(value ?? []), toggledValue];\n } else {\n newValue = value?.includes(toggledValue) ? [] : [toggledValue];\n }\n\n onValueChange?.(newValue);\n },\n [multiselect, onValueChange, value],\n );\n\n const handleSearchChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n setFilterString(e.target.value);\n setActiveOptionIndex(0);\n e.preventDefault();\n },\n [],\n );\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n let wasEscapeKey = false;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n setActiveOptionIndex(prev =>\n Math.min(prev + 1, filteredOptions.length - 1),\n );\n break;\n case 'ArrowUp':\n e.preventDefault();\n setActiveOptionIndex(prev => Math.max(prev - 1, 0));\n break;\n case 'Home':\n e.preventDefault();\n setActiveOptionIndex(0);\n break;\n case 'End':\n e.preventDefault();\n setActiveOptionIndex(Math.max(filteredOptions.length - 1, 0));\n break;\n case 'Enter':\n e.preventDefault();\n if (\n activeOptionIndex >= 0 &&\n !filteredOptions[activeOptionIndex].disabled\n ) {\n handleValueChange(filteredOptions[activeOptionIndex].value);\n }\n break;\n case 'Escape':\n // The Menu component should handle this\n wasEscapeKey = true;\n break;\n default:\n break;\n }\n\n if (!wasEscapeKey) {\n // Stop propagation so Menu components don't prevent the input from updating\n e.stopPropagation();\n }\n },\n [filteredOptions, activeOptionIndex, handleValueChange],\n );\n\n return (\n <div\n ref={ref}\n role=\"combobox\"\n className={clsx('bui-MenuCombobox', className)}\n {...rest}\n >\n <input\n className=\"bui-SubmenuComboboxSearch\"\n type=\"text\"\n role=\"combobox\"\n placeholder=\"Filter...\"\n aria-labelledby={triggerId}\n aria-controls={listboxId}\n aria-autocomplete=\"list\"\n aria-activedescendant={activeDescendantId}\n aria-expanded=\"true\"\n aria-haspopup=\"listbox\"\n value={filterString}\n onKeyDown={handleKeyDown}\n onChange={handleSearchChange}\n />\n <div\n role=\"listbox\"\n id={listboxId}\n tabIndex={-1}\n aria-multiselectable={multiselect ? true : undefined}\n className=\"bui-SubmenuComboboxItems\"\n >\n {filteredOptions.length === 0 ? (\n <div className=\"bui-SubmenuComboboxNoResults\">No results found</div>\n ) : (\n filteredOptions.map((option, index) => (\n <ComboboxItem\n key={option.value}\n option={option}\n optionIndex={index}\n value={value}\n activeOptionIndex={activeOptionIndex}\n onItemActive={setActiveOptionIndex}\n onItemSelect={handleValueChange}\n listboxId={listboxId}\n />\n ))\n )}\n </div>\n </div>\n );\n },\n);\nCombobox.displayName = 'Combobox';\n"],"names":[],"mappings":"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"}
|