@kazee-ds/react 0.10.0 → 0.10.1

package/README.md

@@ -1,10 +1,10 @@
 # @kazee-ds/react
 
-Workspace additions: full-control Combobox anchoring, bounded popovers, Select-compatible sizing and opt-in focus/nonempty-selection policies. These additions are unpublished; see [Combobox and option-list documentation](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/select-and-combobox.md).
+Unpublished patch **0.10.1** fixes Combobox repeated-focus/toggle text replacement (React) and locks popover width to the control (styles). Verified npm baseline: **0.10.0**. See [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
 
 Accessible Kazee React components, including Toast, built on React Aria Components. Requires React/React DOM 19+ and ESM.
 
-Version **0.10.0** adds Combobox sizing, focus/search and nonempty-selection policies, full-control popovers, and compact and compound Dialog header/footer dividers and builds on controlled selectable Card actions, Avatar/AvatarGroup, expanded Badge, sized/icon Switch, interactive/compact Card, dense controls, input clearing and composable date/time families. Existing compact APIs remain supported. Verify registry availability before installing; use matching local packed artifacts for checkout testing. See [component expansion](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/component-expansion.md) and [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
+Version **0.10.1** adds Combobox sizing, focus/search and nonempty-selection policies, full-control popovers, and compact and compound Dialog header/footer dividers and builds on controlled selectable Card actions, Avatar/AvatarGroup, expanded Badge, sized/icon Switch, interactive/compact Card, dense controls, input clearing and composable date/time families. Existing compact APIs remain supported. Verify registry availability before installing; use matching local packed artifacts for checkout testing. See [component expansion](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/component-expansion.md) and [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
 
 
 Version 0.5.3 ignores Toast shortcut events with missing or non-string keys. Normal shortcuts and scoped Escape dismissal remain available.
@@ -14,7 +14,7 @@ Version 0.5.3 ignores Toast shortcut events with missing or non-string keys. Nor
 Public npm installation requires no read token or login. Preserve the application's package manager and lockfile.
 
 ```sh
-npm install --save-exact @kazee-ds/react@0.10.0 @kazee-ds/styles@0.10.0
+npm install --save-exact @kazee-ds/react@0.10.1 @kazee-ds/styles@0.10.1
 ```
 
 ## Use

package/dist/index.js

@@ -3978,6 +3978,7 @@ function Spinner({ size = "md", color = "current", label, id, className, style,
 //#endregion
 //#region src/combobox-composition.tsx
 var ComboboxPolicyContext = createContext({
+	inputRef: { current: null },
 	disabled: false,
 	selectOnFocus: false,
 	disallowEmptySelection: false,
@@ -3994,10 +3995,12 @@ function useComboState() {
 function ComboboxComposition({ className, onChange, size = "md", variant = "primary", hideLabel, fullWidth = true, selectOnFocus = false, disallowEmptySelection = false, maxHeight, ...props }) {
 	const [local, setLocal] = useState(props.defaultValue ?? null);
 	const resetting = useRef(false);
+	const inputRef = useRef(null);
 	const resetLocal = useCallback(() => setLocal(props.defaultValue ?? null), [props.defaultValue]);
 	const value = props.value !== void 0 ? props.value : local;
 	return /* @__PURE__ */ jsx(ComboboxPolicyContext.Provider, {
 		value: {
+			inputRef,
 			disabled: !!props.isDisabled,
 			selectOnFocus,
 			disallowEmptySelection,
@@ -4044,13 +4047,15 @@ function ComboboxInput({ className, ...props }) {
 	const policy = useContext(ComboboxPolicyContext);
 	const state = useComboState();
 	const inputRef = useRef(null);
+	const focused = useRef(false);
 	const selectClick = useRef(false);
 	const forwardedRef = props.ref;
 	const captureRef = useCallback((node) => {
 		inputRef.current = node;
+		policy.inputRef.current = node;
 		if (typeof forwardedRef === "function") return forwardedRef(node);
 		if (forwardedRef) forwardedRef.current = node;
-	}, [forwardedRef]);
+	}, [forwardedRef, policy.inputRef]);
 	useEffect(() => {
 		const form = inputRef.current?.form;
 		if (!form || !policy.manageReset || !state) return;
@@ -4074,8 +4079,14 @@ function ComboboxInput({ className, ...props }) {
 		ref: captureRef,
 		className: partClass("combobox__input", className),
 		onFocus: (event) => {
+			const wasFocused = focused.current;
+			focused.current = true;
 			props.onFocus?.(event);
-			if (policy.selectOnFocus && !policy.disabled) event.currentTarget.select();
+			if (!wasFocused && policy.selectOnFocus && !policy.disabled) event.currentTarget.select();
+		},
+		onBlur: (event) => {
+			focused.current = false;
+			props.onBlur?.(event);
 		},
 		onPointerDown: (event) => {
 			props.onPointerDown?.(event);
@@ -4095,10 +4106,20 @@ function ComboboxInput({ className, ...props }) {
 	});
 }
 function ComboboxTrigger({ className, children, ...props }) {
+	const policy = useContext(ComboboxPolicyContext);
+	const state = useComboState();
 	return /* @__PURE__ */ jsx(Button$5, {
 		"aria-label": "Buka pilihan",
 		...props,
 		className: partClass("combobox__toggle", className),
+		onPressStart: (event) => {
+			props.onPressStart?.(event);
+			if (event.pointerType !== "touch" && !state?.isOpen && policy.selectOnFocus && !policy.disabled) policy.inputRef.current?.select();
+		},
+		onPress: (event) => {
+			props.onPress?.(event);
+			if (event.pointerType === "touch" && !state?.isOpen && policy.selectOnFocus && !policy.disabled) policy.inputRef.current?.select();
+		},
 		children: children ?? /* @__PURE__ */ jsx(ChevronIcon, { className: "select__icon" })
 	});
 }
@@ -4230,7 +4251,7 @@ function CompactCombobox(props) {
 						},
 						children: /* @__PURE__ */ jsx(CloseIcon, { className: partClass("selection__close-icon", props.classNames?.clearIcon) })
 					}),
-					/* @__PURE__ */ jsx(Button$5, {
+					/* @__PURE__ */ jsx(ComboboxTrigger, {
 						className: partClass("combobox__toggle", props.classNames?.trigger),
 						"aria-label": props.toggleLabel ?? "Buka pilihan",
 						children: /* @__PURE__ */ jsx(ChevronIcon, { className: partClass("select__icon", props.classNames?.indicator) })