@simplybusiness/mobius 5.6.0 → 5.7.0
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 +12 -0
- package/dist/cjs/components/Combobox/Combobox.js +5 -4
- package/dist/cjs/components/Combobox/Combobox.js.map +1 -1
- package/dist/cjs/tsconfig.tsbuildinfo +1 -1
- package/dist/esm/components/Combobox/Combobox.js +5 -4
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Combobox/types.js.map +1 -1
- package/dist/types/components/Combobox/types.d.ts +18 -3
- package/package.json +1 -1
- package/src/components/Combobox/Combobox.tsx +12 -5
- package/src/components/Combobox/types.tsx +24 -6
- package/src/public-whitelist.test.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 5.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 7c9a2d4: Update `Combobox` props to accept either `options` or `asyncOptions`, but never both or neither
|
|
8
|
+
|
|
9
|
+
## 5.6.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- abe595e: Add animation to listbox
|
|
14
|
+
|
|
3
15
|
## 5.6.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
|
@@ -21,7 +21,7 @@ function _interop_require_default(obj) {
|
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
23
|
const Combobox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
|
|
24
|
-
const { defaultValue, options, onSelected, className, placeholder, icon } = props;
|
|
24
|
+
const { defaultValue, options, asyncOptions, onSelected, className, placeholder, icon } = props;
|
|
25
25
|
const fallbackRef = (0, _react.useRef)(null);
|
|
26
26
|
const [inputValue, setInputValue] = (0, _react.useState)(defaultValue || "");
|
|
27
27
|
const [isOpen, setIsOpen] = (0, _react.useState)(false);
|
|
@@ -32,8 +32,8 @@ const Combobox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
|
|
|
32
32
|
const blurTimeoutRef = (0, _react.useRef)(null);
|
|
33
33
|
(0, _react.useEffect)(()=>{
|
|
34
34
|
const fetchOptions = async ()=>{
|
|
35
|
-
if (
|
|
36
|
-
const result = await
|
|
35
|
+
if (asyncOptions) {
|
|
36
|
+
const result = await asyncOptions(inputValue);
|
|
37
37
|
setFilteredOptions(result);
|
|
38
38
|
} else {
|
|
39
39
|
setFilteredOptions((0, _utils.filterOptions)(options, inputValue));
|
|
@@ -42,7 +42,8 @@ const Combobox = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
|
|
|
42
42
|
fetchOptions();
|
|
43
43
|
}, [
|
|
44
44
|
inputValue,
|
|
45
|
-
options
|
|
45
|
+
options,
|
|
46
|
+
asyncOptions
|
|
46
47
|
]);
|
|
47
48
|
const handleFocus = ()=>{
|
|
48
49
|
if (blurTimeoutRef.current) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { forwardRef, useEffect, useId, useRef, useState } from \"react\";\nimport type { ForwardedRefComponent } from \"../../types\";\nimport { TextField } from \"../TextField\";\nimport { Listbox } from \"./Listbox\"; // Import Listbox component\nimport type {\n ComboboxElementType,\n ComboboxOption,\n ComboboxOptions,\n ComboboxProps,\n ComboboxRef,\n} from \"./types\";\nimport { useComboboxHighlight } from \"./useComboboxHighlight\";\nimport { filterOptions, getOptionValue, isOptionGroup } from \"./utils\";\n\nexport const Combobox: ForwardedRefComponent<\n ComboboxProps,\n ComboboxElementType\n> = forwardRef((props: ComboboxProps, ref: ComboboxRef) => {\n const {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { forwardRef, useEffect, useId, useRef, useState } from \"react\";\nimport type { ForwardedRefComponent } from \"../../types\";\nimport { TextField } from \"../TextField\";\nimport { Listbox } from \"./Listbox\"; // Import Listbox component\nimport type {\n ComboboxElementType,\n ComboboxOption,\n ComboboxOptions,\n ComboboxProps,\n ComboboxRef,\n} from \"./types\";\nimport { useComboboxHighlight } from \"./useComboboxHighlight\";\nimport { filterOptions, getOptionValue, isOptionGroup } from \"./utils\";\n\nexport const Combobox: ForwardedRefComponent<\n ComboboxProps,\n ComboboxElementType\n> = forwardRef((props: ComboboxProps, ref: ComboboxRef) => {\n const {\n defaultValue,\n options,\n asyncOptions,\n onSelected,\n className,\n placeholder,\n icon,\n } = props;\n\n const fallbackRef = useRef<HTMLInputElement>(null);\n const [inputValue, setInputValue] = useState(defaultValue || \"\");\n const [isOpen, setIsOpen] = useState(false);\n const [filteredOptions, setFilteredOptions] = useState<ComboboxOptions>([]);\n const {\n highlightedIndex,\n highlightedGroupIndex,\n highlightNextOption,\n highlightPreviousOption,\n highlightFirstOption,\n highlightLastOption,\n clearHighlight,\n } = useComboboxHighlight(filteredOptions);\n\n const inputRef = ref || fallbackRef;\n const listboxId = useId();\n const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n useEffect(() => {\n const fetchOptions = async () => {\n if (asyncOptions) {\n const result = await asyncOptions(inputValue);\n setFilteredOptions(result);\n } else {\n setFilteredOptions(filterOptions(options, inputValue));\n }\n };\n\n fetchOptions();\n }, [inputValue, options, asyncOptions]);\n\n const handleFocus = () => {\n if (blurTimeoutRef.current) {\n clearTimeout(blurTimeoutRef.current);\n blurTimeoutRef.current = null;\n }\n setIsOpen(true);\n };\n\n const handleBlur = () => {\n blurTimeoutRef.current = setTimeout(() => {\n setIsOpen(false);\n }, 150);\n };\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setInputValue(newValue);\n setIsOpen(true);\n clearHighlight();\n };\n\n const handleOptionSelect = (option: ComboboxOption) => {\n const value = getOptionValue(option);\n if (!value) return;\n setIsOpen(false);\n setInputValue(value);\n onSelected?.(value);\n };\n\n function getHighlightedOption() {\n if (highlightedIndex === -1) return undefined;\n\n if (isOptionGroup(filteredOptions)) {\n const group = filteredOptions[highlightedGroupIndex];\n return group?.options[highlightedIndex];\n }\n\n return filteredOptions[highlightedIndex];\n }\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n switch (e.key) {\n case \"ArrowDown\":\n e.preventDefault();\n setIsOpen(true);\n highlightNextOption();\n break;\n case \"ArrowUp\":\n e.preventDefault();\n setIsOpen(true);\n highlightPreviousOption();\n break;\n case \"Home\":\n e.preventDefault();\n setIsOpen(true);\n highlightFirstOption();\n break;\n case \"End\":\n e.preventDefault();\n setIsOpen(true);\n highlightLastOption();\n break;\n case \"Enter\":\n e.preventDefault();\n if (isOpen) {\n handleOptionSelect(getHighlightedOption()!);\n }\n break;\n case \"Escape\":\n e.preventDefault();\n setIsOpen(false);\n clearHighlight();\n break;\n default:\n // Do nothing\n }\n };\n\n const classes = classNames(\n \"mobius mobius-combobox\",\n { expanded: isOpen },\n className,\n );\n\n return (\n <div className={classes}>\n <TextField\n className=\"mobius-combobox__input\"\n role=\"combobox\"\n value={inputValue}\n placeholder={placeholder}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n onChange={handleInputChange}\n autoComplete=\"off\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-controls={listboxId}\n aria-expanded={isOpen}\n aria-activedescendant={\n highlightedIndex === -1\n ? undefined\n : `${listboxId}-option-${highlightedGroupIndex}-${highlightedIndex}`\n }\n prefixInside={icon}\n ref={inputRef}\n />\n {isOpen && (\n <Listbox\n id={listboxId}\n options={filteredOptions}\n highlightedIndex={highlightedIndex}\n highlightedGroupIndex={highlightedGroupIndex}\n onOptionSelect={handleOptionSelect}\n expanded={isOpen}\n />\n )}\n </div>\n );\n});\n"],"names":["Combobox","forwardRef","props","ref","defaultValue","options","asyncOptions","onSelected","className","placeholder","icon","fallbackRef","useRef","inputValue","setInputValue","useState","isOpen","setIsOpen","filteredOptions","setFilteredOptions","highlightedIndex","highlightedGroupIndex","highlightNextOption","highlightPreviousOption","highlightFirstOption","highlightLastOption","clearHighlight","useComboboxHighlight","inputRef","listboxId","useId","blurTimeoutRef","useEffect","fetchOptions","result","filterOptions","handleFocus","current","clearTimeout","handleBlur","setTimeout","handleInputChange","e","newValue","target","value","handleOptionSelect","option","getOptionValue","getHighlightedOption","undefined","isOptionGroup","group","handleKeyDown","key","preventDefault","classes","classNames","expanded","div","TextField","role","onFocus","onBlur","onKeyDown","onChange","autoComplete","aria-autocomplete","aria-haspopup","aria-controls","aria-expanded","aria-activedescendant","prefixInside","Listbox","id","onOptionSelect"],"mappings":"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"}
|