@deque/cauldron-react 5.9.1-canary.00c9b9bc → 5.9.1-canary.1a30d467
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.
|
@@ -3,11 +3,9 @@ import { ComboboxValue } from './ComboboxOption';
|
|
|
3
3
|
type ComboboxContext = {
|
|
4
4
|
autocomplete: 'none' | 'manual' | 'automatic';
|
|
5
5
|
inputValue: ComboboxValue;
|
|
6
|
-
formValue: ComboboxValue;
|
|
7
6
|
selectedValue: ComboboxValue;
|
|
8
7
|
matchingOptions: Map<HTMLElement, ComboboxOptionState>;
|
|
9
8
|
setMatchingOptions: React.Dispatch<React.SetStateAction<Map<HTMLElement, ComboboxOptionState>>>;
|
|
10
|
-
setFormValue: React.Dispatch<React.SetStateAction<ComboboxValue>>;
|
|
11
9
|
matches: (<T extends string = string>(value: T) => boolean) | boolean;
|
|
12
10
|
};
|
|
13
11
|
export type ComboboxOptionState = {
|
|
@@ -19,6 +17,6 @@ type ComboboxProvider = {
|
|
|
19
17
|
matches: ((inputValue: string, value: string) => boolean) | boolean;
|
|
20
18
|
} & Omit<ComboboxContext, 'matches'>;
|
|
21
19
|
declare const ComboboxContext: React.Context<ComboboxContext>;
|
|
22
|
-
declare function ComboboxProvider({ autocomplete, inputValue,
|
|
20
|
+
declare function ComboboxProvider({ autocomplete, inputValue, selectedValue, matches, matchingOptions, setMatchingOptions, children }: ComboboxProvider): JSX.Element;
|
|
23
21
|
declare function useComboboxContext(): ComboboxContext;
|
|
24
22
|
export { ComboboxProvider, useComboboxContext };
|
package/lib/index.js
CHANGED
|
@@ -4188,36 +4188,30 @@ ListboxGroup.displayName = 'ListboxGroup';
|
|
|
4188
4188
|
var ComboboxContext = React.createContext({
|
|
4189
4189
|
autocomplete: 'manual',
|
|
4190
4190
|
inputValue: undefined,
|
|
4191
|
-
formValue: undefined,
|
|
4192
4191
|
selectedValue: undefined,
|
|
4193
4192
|
matches: true,
|
|
4194
4193
|
matchingOptions: new Map(),
|
|
4195
|
-
setMatchingOptions: function () { return null; }
|
|
4196
|
-
setFormValue: function () { return null; }
|
|
4194
|
+
setMatchingOptions: function () { return null; }
|
|
4197
4195
|
});
|
|
4198
4196
|
function ComboboxProvider(_a) {
|
|
4199
|
-
var autocomplete = _a.autocomplete, inputValue = _a.inputValue,
|
|
4197
|
+
var autocomplete = _a.autocomplete, inputValue = _a.inputValue, selectedValue = _a.selectedValue, matches = _a.matches, matchingOptions = _a.matchingOptions, setMatchingOptions = _a.setMatchingOptions, children = _a.children;
|
|
4200
4198
|
var Provider = ComboboxContext.Provider;
|
|
4201
4199
|
var contextValue = React.useMemo(function () { return ({
|
|
4202
4200
|
autocomplete: autocomplete,
|
|
4203
4201
|
inputValue: inputValue,
|
|
4204
|
-
formValue: formValue,
|
|
4205
4202
|
selectedValue: selectedValue,
|
|
4206
4203
|
matches: typeof matches === 'function' && !!inputValue
|
|
4207
4204
|
? function (value) { return matches(inputValue, value); }
|
|
4208
4205
|
: true,
|
|
4209
4206
|
matchingOptions: matchingOptions,
|
|
4210
|
-
setMatchingOptions: setMatchingOptions
|
|
4211
|
-
setFormValue: setFormValue
|
|
4207
|
+
setMatchingOptions: setMatchingOptions
|
|
4212
4208
|
}); }, [
|
|
4213
4209
|
autocomplete,
|
|
4214
4210
|
inputValue,
|
|
4215
|
-
formValue,
|
|
4216
4211
|
selectedValue,
|
|
4217
4212
|
matches,
|
|
4218
4213
|
matchingOptions,
|
|
4219
|
-
setMatchingOptions
|
|
4220
|
-
setFormValue
|
|
4214
|
+
setMatchingOptions
|
|
4221
4215
|
]);
|
|
4222
4216
|
return React__default["default"].createElement(Provider, { value: contextValue }, children);
|
|
4223
4217
|
}
|
|
@@ -4290,10 +4284,10 @@ var ComboboxMatch = function (_a) {
|
|
|
4290
4284
|
React__default["default"].createElement("span", null, matchAfter)));
|
|
4291
4285
|
};
|
|
4292
4286
|
var ComboboxOption = React.forwardRef(function (_a, ref) {
|
|
4293
|
-
var className = _a.className, children = _a.children, disabled = _a.disabled, propId = _a.id, description = _a.description, propValue = _a.value,
|
|
4287
|
+
var className = _a.className, children = _a.children, disabled = _a.disabled, propId = _a.id, description = _a.description, propValue = _a.value, props = tslib.__rest(_a, ["className", "children", "disabled", "id", "description", "value"]);
|
|
4294
4288
|
var _b = tslib.__read(propId ? [propId] : nextId.useId(1, 'combobox-option'), 1), id = _b[0];
|
|
4295
4289
|
var _c = useListboxContext(), selected = _c.selected, active = _c.active;
|
|
4296
|
-
var _d = useComboboxContext(),
|
|
4290
|
+
var _d = useComboboxContext(), matches = _d.matches, setMatchingOptions = _d.setMatchingOptions;
|
|
4297
4291
|
var comboboxOptionRef = useSharedRef(ref);
|
|
4298
4292
|
var intersectionRef = useIntersectionRef(comboboxOptionRef, {
|
|
4299
4293
|
root: null,
|
|
@@ -4321,15 +4315,6 @@ var ComboboxOption = React.forwardRef(function (_a, ref) {
|
|
|
4321
4315
|
});
|
|
4322
4316
|
}
|
|
4323
4317
|
}, [isActive]);
|
|
4324
|
-
React.useEffect(function () {
|
|
4325
|
-
var _a;
|
|
4326
|
-
var comboboxValue = typeof propValue !== 'undefined'
|
|
4327
|
-
? propValue
|
|
4328
|
-
: (_a = comboboxOptionRef.current) === null || _a === void 0 ? void 0 : _a.innerText;
|
|
4329
|
-
if (selectedValue === comboboxValue) {
|
|
4330
|
-
setFormValue(typeof formValue === 'undefined' ? comboboxValue : formValue);
|
|
4331
|
-
}
|
|
4332
|
-
}, [selectedValue, formValue]);
|
|
4333
4318
|
React.useEffect(function () {
|
|
4334
4319
|
if (isMatching) {
|
|
4335
4320
|
setMatchingOptions(function (options) {
|
|
@@ -4378,14 +4363,13 @@ var ComboboxNoResults = function (_a) {
|
|
|
4378
4363
|
return (React__default["default"].createElement("div", { className: "ComboboxListbox__empty", role: "alert", "aria-live": "polite" }, children || 'No results found.'));
|
|
4379
4364
|
};
|
|
4380
4365
|
var Combobox = React.forwardRef(function (_a, ref) {
|
|
4381
|
-
var propId = _a.id, className = _a.className, label = _a.label, children = _a.children, _b = _a.options, options = _b === void 0 ? [] : _b, propValue = _a.value, defaultValue = _a.defaultValue, _c = _a.requiredText, requiredText = _c === void 0 ? 'Required' : _c, error = _a.error, _d = _a.autocomplete, autocomplete = _d === void 0 ? 'manual' : _d, onSelectionChange = _a.onSelectionChange, onActiveChange = _a.onActiveChange, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur,
|
|
4366
|
+
var propId = _a.id, className = _a.className, label = _a.label, children = _a.children, _b = _a.options, options = _b === void 0 ? [] : _b, propValue = _a.value, defaultValue = _a.defaultValue, _c = _a.requiredText, requiredText = _c === void 0 ? 'Required' : _c, error = _a.error, _d = _a.autocomplete, autocomplete = _d === void 0 ? 'manual' : _d, onSelectionChange = _a.onSelectionChange, onActiveChange = _a.onActiveChange, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, renderNoResults = _a.renderNoResults, portal = _a.portal, props = tslib.__rest(_a, ["id", "className", "label", "children", "options", "value", "defaultValue", "requiredText", "error", "autocomplete", "onSelectionChange", "onActiveChange", "onChange", "onKeyDown", "onFocus", "onBlur", "renderNoResults", "portal"]);
|
|
4382
4367
|
var _e = tslib.__read(React.useState(defaultValue || propValue || ''), 2), value = _e[0], setValue = _e[1];
|
|
4383
4368
|
var _f = tslib.__read(React.useState(new Map()), 2), matchingOptions = _f[0], setMatchingOptions = _f[1];
|
|
4384
4369
|
var _g = tslib.__read(React.useState(value || ''), 2), selectedValue = _g[0], setSelectedValue = _g[1];
|
|
4385
|
-
var _h = tslib.__read(React.useState(
|
|
4386
|
-
var _j = tslib.__read(React.useState(
|
|
4387
|
-
var _k = tslib.__read(
|
|
4388
|
-
var _l = tslib.__read(propId ? [propId] : nextId.useId(1, 'combobox'), 1), id = _l[0];
|
|
4370
|
+
var _h = tslib.__read(React.useState(false), 2), open = _h[0], setOpen = _h[1];
|
|
4371
|
+
var _j = tslib.__read(React.useState(null), 2), activeDescendant = _j[0], setActiveDescendant = _j[1];
|
|
4372
|
+
var _k = tslib.__read(propId ? [propId] : nextId.useId(1, 'combobox'), 1), id = _k[0];
|
|
4389
4373
|
var comboboxRef = useSharedRef(ref);
|
|
4390
4374
|
var inputRef = React.useRef(null);
|
|
4391
4375
|
var listboxRef = React.useRef(null);
|
|
@@ -4414,7 +4398,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
|
|
|
4414
4398
|
setActiveDescendant(null);
|
|
4415
4399
|
}
|
|
4416
4400
|
if (open && autocomplete === 'automatic' && !selectedValue) {
|
|
4417
|
-
// Fire
|
|
4401
|
+
// Fire an Home keydown event on listbox to ensure the first item is selected
|
|
4418
4402
|
triggerListboxKeyDown(Home);
|
|
4419
4403
|
}
|
|
4420
4404
|
}, [open]);
|
|
@@ -4555,11 +4539,10 @@ var Combobox = React.forwardRef(function (_a, ref) {
|
|
|
4555
4539
|
var noMatchingOptions = !!(value === null || value === void 0 ? void 0 : value.length) && !matchingOptions.size && (React__default["default"].createElement(NoMatchingOptions, null));
|
|
4556
4540
|
var comboboxListbox = (React__default["default"].createElement(Listbox, { className: classNames__default["default"]('Combobox__listbox', {
|
|
4557
4541
|
'Combobox__listbox--open': open
|
|
4558
|
-
}), role: "listbox", "aria-labelledby": "".concat(id, "-label"), id: "".concat(id, "-listbox"), value: selectedValue, onMouseDown: handleComboboxOptionMouseDown, onClick: handleComboboxOptionClick, onSelectionChange: handleSelectionChange, onActiveChange: handleActiveChange, ref: listboxRef, tabIndex: undefined, "aria-activedescendant":
|
|
4542
|
+
}), role: "listbox", "aria-labelledby": "".concat(id, "-label"), id: "".concat(id, "-listbox"), value: selectedValue, onMouseDown: handleComboboxOptionMouseDown, onClick: handleComboboxOptionClick, onSelectionChange: handleSelectionChange, onActiveChange: handleActiveChange, ref: listboxRef, tabIndex: undefined, "aria-activedescendant": "" },
|
|
4559
4543
|
comboboxOptions,
|
|
4560
4544
|
noMatchingOptions));
|
|
4561
4545
|
return (React__default["default"].createElement("div", { id: id, className: classNames__default["default"]('Combobox', className), ref: comboboxRef },
|
|
4562
|
-
name && React__default["default"].createElement("input", { type: "hidden", name: name, value: formValue }),
|
|
4563
4546
|
React__default["default"].createElement("label", { className: classNames__default["default"]('Field__label', {
|
|
4564
4547
|
'Field__label--is-required': isRequired,
|
|
4565
4548
|
'Field__label--has-error': hasError
|
|
@@ -4574,7 +4557,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
|
|
|
4574
4557
|
onClick: handleInputClick },
|
|
4575
4558
|
React__default["default"].createElement("input", tslib.__assign({ type: "text", id: "".concat(id, "-input"), ref: inputRef, value: value, role: "combobox", "aria-autocomplete": !isAutoComplete ? 'none' : 'list', "aria-controls": "".concat(id, "-listbox"), "aria-expanded": open, "aria-haspopup": "listbox", "aria-activedescendant": open && activeDescendant ? activeDescendant.element.id : undefined }, props, { onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur })),
|
|
4576
4559
|
React__default["default"].createElement("span", { className: "Combobox__arrow" })),
|
|
4577
|
-
React__default["default"].createElement(ComboboxProvider, { autocomplete: autocomplete, inputValue: value,
|
|
4560
|
+
React__default["default"].createElement(ComboboxProvider, { autocomplete: autocomplete, inputValue: value, selectedValue: selectedValue, matches: !isAutoComplete || defaultAutoCompleteMatches, matchingOptions: matchingOptions, setMatchingOptions: setMatchingOptions }, portal
|
|
4578
4561
|
? reactDom.createPortal(comboboxListbox, portal instanceof HTMLElement
|
|
4579
4562
|
? portal
|
|
4580
4563
|
: portal.current ||
|
package/package.json
CHANGED