@backstage/ui 0.7.0-next.1 → 0.7.0-next.2
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
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef,
|
|
2
|
+
import { forwardRef, useState, useMemo, useCallback, useRef, useEffect } from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import '../Icon/context.esm.js';
|
|
5
5
|
import '../Box/Box.esm.js';
|
|
@@ -30,6 +30,7 @@ import '../SearchField/SearchField.esm.js';
|
|
|
30
30
|
import '../Link/Link.esm.js';
|
|
31
31
|
import '../Select/Select.esm.js';
|
|
32
32
|
import '../Switch/Switch.esm.js';
|
|
33
|
+
import { useId } from 'react-aria';
|
|
33
34
|
|
|
34
35
|
const getListboxItemId = (listboxId, optionValue) => `${listboxId}-option-${optionValue}`;
|
|
35
36
|
function ComboboxItem({
|
|
@@ -1 +1 @@
|
|
|
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 useId,\n ChangeEvent,\n KeyboardEvent,\n useRef,\n useEffect,\n} from 'react';\nimport clsx from 'clsx';\nimport { MenuComboboxOption, MenuComboboxProps } from './types';\nimport { Icon } from '../..';\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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"}
|
|
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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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@backstage/ui",
|
|
3
|
-
"version": "0.7.0-next.
|
|
3
|
+
"version": "0.7.0-next.2",
|
|
4
4
|
"backstage": {
|
|
5
5
|
"role": "web-library"
|
|
6
6
|
},
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"react-aria-components": "^1.10.1"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@backstage/cli": "0.
|
|
53
|
+
"@backstage/cli": "0.34.0-next.1",
|
|
54
54
|
"@storybook/addon-essentials": "^8.6.12",
|
|
55
55
|
"@storybook/addon-interactions": "^8.6.12",
|
|
56
56
|
"@storybook/addon-styling-webpack": "^1.0.1",
|