@simplybusiness/mobius 5.6.1 → 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 +6 -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
|
@@ -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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"}
|