@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.
@@ -7,7 +7,6 @@ interface ComboboxOption {
7
7
  key?: string;
8
8
  label: string;
9
9
  value?: ComboboxValue;
10
- formValue?: ComboboxValue;
11
10
  description?: string;
12
11
  }
13
12
  interface ComboboxProps extends React.InputHTMLAttributes<Omit<HTMLInputElement, 'value' | 'defaultValue'>> {
@@ -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, formValue, selectedValue, matches, matchingOptions, setMatchingOptions, setFormValue, children }: ComboboxProvider): JSX.Element;
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 };
@@ -5,7 +5,6 @@ export type ComboboxValue = Exclude<ListboxValue, number>;
5
5
  interface ComboboxOptionProps extends React.HTMLAttributes<HTMLLIElement> {
6
6
  disabled?: boolean;
7
7
  value?: ComboboxValue;
8
- formValue?: ComboboxValue;
9
8
  description?: ContentNode;
10
9
  children: string;
11
10
  }
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, formValue = _a.formValue, selectedValue = _a.selectedValue, matches = _a.matches, matchingOptions = _a.matchingOptions, setMatchingOptions = _a.setMatchingOptions, setFormValue = _a.setFormValue, children = _a.children;
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, formValue = _a.formValue, props = tslib.__rest(_a, ["className", "children", "disabled", "id", "description", "value", "formValue"]);
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(), selectedValue = _d.selectedValue, matches = _d.matches, setMatchingOptions = _d.setMatchingOptions, setFormValue = _d.setFormValue;
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, name = _a.name, 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", "name", "renderNoResults", "portal"]);
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(''), 2), formValue = _h[0], setFormValue = _h[1];
4386
- var _j = tslib.__read(React.useState(false), 2), open = _j[0], setOpen = _j[1];
4387
- var _k = tslib.__read(React.useState(null), 2), activeDescendant = _k[0], setActiveDescendant = _k[1];
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 a Home keydown event on listbox to ensure the first item is selected
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": undefined },
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, formValue: formValue, selectedValue: selectedValue, matches: !isAutoComplete || defaultAutoCompleteMatches, matchingOptions: matchingOptions, setMatchingOptions: setMatchingOptions, setFormValue: setFormValue }, portal
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deque/cauldron-react",
3
- "version": "5.9.1-canary.00c9b9bc",
3
+ "version": "5.9.1-canary.1a30d467",
4
4
  "license": "MPL-2.0",
5
5
  "description": "Fully accessible react components library for Deque Cauldron",
6
6
  "homepage": "https://cauldron.dequelabs.com/",