@destyler/combobox 0.2.6 → 0.2.9

package/dist/index.d.mts

@@ -7,7 +7,7 @@ import { FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, Point
 import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, RequiredBy } from "@destyler/types";
 
 //#region src/anatomy.d.ts
-declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "clearTrigger" | "content" | "control" | "input" | "item" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "label" | "list" | "positioner" | "trigger">;
+declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "label" | "control" | "input" | "content" | "trigger" | "clearTrigger" | "item" | "positioner" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "list">;
 //#endregion
 //#region src/collection.d.ts
 declare function collection<T extends CollectionItem$1>(options: CollectionOptions$1<T>): ListCollection<T>;
@@ -59,56 +59,67 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
   /**
    * Whether the combobox is open
    */
-  'open'?: boolean | undefined;
+  open?: boolean | undefined;
   /**
-   * Whether the combobox open state is controlled by the user
+   * The initial open state of the combobox when it is not controlled.
+   * Prefer this over seeding with `open` for uncontrolled usage.
    */
-  'open.controlled'?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
   /**
    * The ids of the elements in the combobox. Useful for composition.
    */
-  'ids'?: ElementIds | undefined;
+  ids?: ElementIds | undefined;
   /**
-   * The current value of the combobox's input
+   * The controlled value of the combobox's input
    */
-  'inputValue': string;
+  inputValue?: string | undefined;
+  /**
+   * The initial value of the combobox's input when it is not controlled.
+   * Prefer this over seeding with `inputValue` for uncontrolled usage.
+   */
+  defaultInputValue?: string | undefined;
   /**
    * The `name` attribute of the combobox's input. Useful for form submission
    */
-  'name'?: string | undefined;
+  name?: string | undefined;
   /**
    * The associate form of the combobox.
    */
-  'form'?: string | undefined;
+  form?: string | undefined;
   /**
    * Whether the combobox is disabled
    */
-  'disabled'?: boolean | undefined;
+  disabled?: boolean | undefined;
   /**
    * Whether the combobox is readonly. This puts the combobox in a "non-editable" mode
    * but the user can still interact with it
    */
-  'readOnly'?: boolean | undefined;
+  readOnly?: boolean | undefined;
   /**
    * Whether the combobox is invalid
    */
-  'invalid'?: boolean | undefined;
+  invalid?: boolean | undefined;
   /**
    * Whether the combobox is required
    */
-  'required'?: boolean | undefined;
+  required?: boolean | undefined;
   /**
    * The placeholder text of the combobox's input
    */
-  'placeholder'?: string | undefined;
+  placeholder?: string | undefined;
   /**
    * The active item's id. Used to set the `aria-activedescendant` attribute
    */
-  'highlightedValue': string | null;
+  highlightedValue: string | null;
+  /**
+   * The controlled keys of the selected items
+   */
+  value?: string[] | undefined;
   /**
-   * The keys of the selected items
+   * The initial keys of the selected items when it is not controlled.
+   * Prefer this over seeding with `value` for uncontrolled usage.
    */
-  'value': string[];
+  defaultValue?: string[] | undefined;
   /**
    * Defines the auto-completion behavior of the combobox.
    *
@@ -117,7 +128,7 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
    *
    * @default "none"
    */
-  'inputBehavior': 'autohighlight' | 'autocomplete' | 'none';
+  inputBehavior: 'autohighlight' | 'autocomplete' | 'none';
   /**
    * The behavior of the combobox input when an item is selected
    *
@@ -127,92 +138,92 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
    *
    * @default "replace"
    */
-  'selectionBehavior': 'clear' | 'replace' | 'preserve';
+  selectionBehavior: 'clear' | 'replace' | 'preserve';
   /**
    * Whether to autofocus the input on mount
    */
-  'autoFocus'?: boolean | undefined;
+  autoFocus?: boolean | undefined;
   /**
    * Whether to open the combobox popup on initial click on the input
    * @default false
    */
-  'openOnClick'?: boolean | undefined;
+  openOnClick?: boolean | undefined;
   /**
    * Whether to show the combobox when the input value changes
    * @default true
    */
-  'openOnChange'?: boolean | ((details: InputValueChangeDetails) => boolean) | undefined;
+  openOnChange?: boolean | ((details: InputValueChangeDetails) => boolean) | undefined;
   /**
    * Whether to allow typing custom values in the input
    */
-  'allowCustomValue'?: boolean | undefined;
+  allowCustomValue?: boolean | undefined;
   /**
    * Whether to loop the keyboard navigation through the items
    * @default true
    */
-  'loopFocus'?: boolean | undefined;
+  loopFocus?: boolean | undefined;
   /**
    * The positioning options to dynamically position the menu
    */
-  'positioning': PositioningOptions;
+  positioning: PositioningOptions;
   /**
    * Function called when the input's value changes
    */
-  'onInputValueChange'?: ((details: InputValueChangeDetails) => void) | undefined;
+  onInputValueChange?: ((details: InputValueChangeDetails) => void) | undefined;
   /**
    * Function called when a new item is selected
    */
-  'onValueChange'?: ((details: ValueChangeDetails<T>) => void) | undefined;
+  onValueChange?: ((details: ValueChangeDetails<T>) => void) | undefined;
   /**
    * Function called when an item is highlighted using the pointer
    * or keyboard navigation.
    */
-  'onHighlightChange'?: ((details: HighlightChangeDetails<T>) => void) | undefined;
+  onHighlightChange?: ((details: HighlightChangeDetails<T>) => void) | undefined;
   /**
    * Function called when the popup is opened
    */
-  'onOpenChange'?: ((details: OpenChangeDetails) => void) | undefined;
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
   /**
    * Specifies the localized strings that identifies the accessibility elements and their states
    */
-  'translations': IntlTranslations;
+  translations: IntlTranslations;
   /**
    * The collection of items
    */
-  'collection': ListCollection<any>;
+  collection: ListCollection<any>;
   /**
    * Whether to allow multiple selection.
    *
    * **Good to know:** When `multiple` is `true`, the `selectionBehavior` is automatically set to `clear`.
    * It is recommended to render the selected items in a separate container.
    */
-  'multiple'?: boolean | undefined;
+  multiple?: boolean | undefined;
   /**
    * Whether to close the combobox when an item is selected.
    */
-  'closeOnSelect'?: boolean | undefined;
+  closeOnSelect?: boolean | undefined;
   /**
    * Whether to open the combobox on arrow key press
    * @default true
    */
-  'openOnKeyPress': boolean;
+  openOnKeyPress: boolean;
   /**
    * Function to scroll to a specific index
    */
-  'scrollToIndexFn'?: ((details: ScrollToIndexDetails) => void) | undefined;
+  scrollToIndexFn?: ((details: ScrollToIndexDetails) => void) | undefined;
   /**
    * Whether the combobox is a composed with other composite widgets like tabs
    * @default true
    */
-  'composite': boolean;
+  composite: boolean;
   /**
    * Whether to disable registering this a dismissable layer
    */
-  'disableLayer'?: boolean | undefined;
+  disableLayer?: boolean | undefined;
   /**
    * Function to navigate to the selected item
    */
-  'navigate': (details: NavigateDetails) => void;
+  navigate: (details: NavigateDetails) => void;
 }
 type UserDefinedContext<T extends CollectionItem = CollectionItem> = RequiredBy<PublicContext<T>, 'id' | 'collection'>;
 type ComputedContext = Readonly<{

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { ariaAttr, clickIfLink, createScope, dataAttr, getEventKey, isAnchorElem
 import { getPlacement, getPlacementStyles } from "@destyler/popper";
 import { ariaHidden } from "@destyler/aria-hidden";
 import { trackDismissableElement } from "@destyler/dismissable";
-import { addOrRemove, compact, isArray, isBoolean, isEqual, match } from "@destyler/utils";
+import { addOrRemove, compact, isArray, isBoolean, isControlled, isEqual, isPropUserProvided, match, resolveControllableOpen, resolveControllableProp, withControllableProvided } from "@destyler/utils";
 
 //#region src/anatomy.ts
 const anatomy = createAnatomy("combobox").parts("root", "clearTrigger", "content", "control", "input", "item", "itemGroup", "itemGroupLabel", "itemIndicator", "itemText", "label", "list", "positioner", "trigger");
@@ -389,7 +389,7 @@ function connect(state, send, normalize) {
 			return normalize.element({
 				...parts.list.attrs,
 				"role": !composite ? "listbox" : void 0,
-				"aria-labelledby": dom.getLabelId(state.context),
+				"aria-labelledby": !composite ? dom.getLabelId(state.context) : void 0,
 				"aria-multiselectable": state.context.multiple && !composite ? true : void 0
 			});
 		},
@@ -488,6 +488,7 @@ function connect(state, send, normalize) {
 			const { id } = props;
 			return normalize.element({
 				...parts.itemGroup.attrs,
+				"role": "group",
 				"dir": state.context.dir,
 				"id": dom.getItemGroupId(state.context, id),
 				"aria-labelledby": dom.getItemGroupLabelId(state.context, id)
@@ -498,8 +499,7 @@ function connect(state, send, normalize) {
 			return normalize.element({
 				...parts.itemGroupLabel.attrs,
 				dir: state.context.dir,
-				id: dom.getItemGroupLabelId(state.context, htmlFor),
-				role: "group"
+				id: dom.getItemGroupLabelId(state.context, htmlFor)
 			});
 		}
 	};
@@ -548,17 +548,32 @@ const invoke = {
 		ctx.onInputValueChange?.({ inputValue: ctx.inputValue });
 	}
 };
+function proposeValueChange(ctx, value) {
+	const prevSelectedItems = ctx.selectedItems;
+	const items = value.map((v) => {
+		const foundItem = prevSelectedItems.find((item) => ctx.collection.getItemValue(item) === v);
+		if (foundItem) return foundItem;
+		return ctx.collection.find(v);
+	});
+	ctx.onValueChange?.({
+		value: Array.from(value),
+		items: Array.from(items)
+	});
+}
 const set = {
 	value: (ctx, value, force = false) => {
 		if (isEqual(ctx.value, value)) return;
 		if (value == null && !force) return;
-		if (value == null && force) {
-			ctx.value = [];
-			invoke.valueChange(ctx);
+		let next;
+		if (value == null) next = [];
+		else if (isArray(value)) next = value;
+		else next = ctx.multiple ? addOrRemove(ctx.value, value) : [value];
+		if (isEqual(ctx.value, next)) return;
+		if (isControlled(ctx, "value")) {
+			proposeValueChange(ctx, next);
 			return;
 		}
-		if (isArray(value)) ctx.value = value;
-		else if (value != null) ctx.value = ctx.multiple ? addOrRemove(ctx.value, value) : [value];
+		ctx.value = next;
 		invoke.valueChange(ctx);
 	},
 	highlightedValue: (ctx, value, force = false) => {
@@ -569,15 +584,36 @@ const set = {
 	},
 	inputValue: (ctx, value) => {
 		if (isEqual(ctx.inputValue, value)) return;
+		if (isControlled(ctx, "inputValue")) {
+			ctx.onInputValueChange?.({ inputValue: value });
+			return;
+		}
 		ctx.inputValue = value;
 		invoke.inputChange(ctx);
 	}
 };
 function machine(userContext) {
-	const ctx = compact(userContext);
+	const ctx = compact(withControllableProvided(userContext, [
+		"open",
+		"value",
+		"inputValue"
+	]));
+	const { initialOpen } = resolveControllableOpen(ctx);
+	const { initial: initialValue } = resolveControllableProp({
+		value: ctx.value,
+		defaultValue: ctx.defaultValue,
+		valueProvided: isPropUserProvided(ctx, "value"),
+		fallback: []
+	});
+	const { initial: initialInputValue } = resolveControllableProp({
+		value: ctx.inputValue,
+		defaultValue: ctx.defaultInputValue,
+		valueProvided: isPropUserProvided(ctx, "inputValue"),
+		fallback: ""
+	});
 	return createMachine({
 		id: "combobox",
-		initial: ctx.open ? "suggesting" : "idle",
+		initial: initialOpen ? "suggesting" : "idle",
 		context: {
 			loopFocus: true,
 			openOnClick: false,
@@ -597,6 +633,8 @@ function machine(userContext) {
 				clickIfLink(node);
 			},
 			...ctx,
+			value: initialValue,
+			inputValue: initialInputValue,
 			highlightedItem: null,
 			selectedItems: [],
 			valueAsString: "",
@@ -1091,7 +1129,7 @@ function machine(userContext) {
 			allowCustomValue: (ctx$1) => !!ctx$1.allowCustomValue,
 			hasHighlightedItem: (ctx$1) => ctx$1.highlightedValue != null,
 			closeOnSelect: (ctx$1) => !!ctx$1.closeOnSelect,
-			isOpenControlled: (ctx$1) => !!ctx$1["open.controlled"],
+			isOpenControlled: (ctx$1) => isControlled(ctx$1, "open"),
 			openOnChange: (ctx$1, evt) => {
 				if (isBoolean(ctx$1.openOnChange)) return ctx$1.openOnChange;
 				return !!ctx$1.openOnChange?.({ inputValue: evt.value });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/combobox",
   "type": "module",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "description": "autocomplete input and command palette with a list of suggestions.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,15 +22,15 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.2.6",
-    "@destyler/aria-hidden": "0.2.6",
-    "@destyler/collection": "0.2.6",
-    "@destyler/dismissable": "0.2.6",
-    "@destyler/dom": "0.2.6",
-    "@destyler/popper": "0.2.6",
-    "@destyler/xstate": "0.2.6",
-    "@destyler/types": "0.2.6",
-    "@destyler/utils": "0.2.6"
+    "@destyler/aria-hidden": "0.2.9",
+    "@destyler/anatomy": "0.2.9",
+    "@destyler/collection": "0.2.9",
+    "@destyler/popper": "0.2.9",
+    "@destyler/types": "0.2.9",
+    "@destyler/dismissable": "0.2.9",
+    "@destyler/utils": "0.2.9",
+    "@destyler/dom": "0.2.9",
+    "@destyler/xstate": "0.2.9"
   },
   "publishConfig": {
     "access": "public"