@kazee-ds/react 0.10.0 → 0.10.2

package/README.md

@@ -1,20 +1,21 @@
 # @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).
+Prepared **0.10.2** compacts DateRangePicker: the visible heading, repeated range summary, calendar-side presets and Today shortcut are removed. Period shortcuts belong in a linked Select. Use React **0.10.2** or Vue **0.10.1** with styles **0.10.3**. These versions are unpublished; see [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
 
+The prepared styles **0.10.3** bundle tokens **0.6.1**, using `#DBDBDB` for light-theme neutral/default and hover borders. Dark theme and focus/error/selected state colors retain their own roles.
 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.
 
 ## Install
 
-Public npm installation requires no read token or login. Preserve the application's package manager and lockfile.
+After the prepared versions are published and verified, public npm installation requires no read token or login. Until then use matching local packed artifacts. 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.2 @kazee-ds/styles@0.10.3
 ```
 
 ## 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) })
@@ -5148,7 +5169,7 @@ function DateRangePickerRoot(props) {
 		"data-readonly": isReadOnly || void 0,
 		children: [
 			/* @__PURE__ */ jsxs("header", {
-				className: partClass("date-range__intro", props.classNames?.intro),
+				className: partClass("date-range__intro temporal__sr-only", props.classNames?.intro),
 				children: [/* @__PURE__ */ jsx("h2", {
 					id: `${id}-title`,
 					className: props.classNames?.title,
@@ -5159,25 +5180,9 @@ function DateRangePickerRoot(props) {
 					children: pending ? labels.incomplete : rangeText(nullableDraft, locale) || labels.incomplete
 				})]
 			}),
-			/* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsx("div", {
 				className: partClass("date-range__body", props.classNames?.body),
-				children: [presets.length > 0 && /* @__PURE__ */ jsx("div", {
-					className: partClass("date-range__presets", props.classNames?.presets),
-					role: "group",
-					"aria-label": labels.presets,
-					children: presets.map((p) => /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: partClass("date-range__preset", props.classNames?.preset),
-						disabled: isDisabled || isReadOnly || !!rangeError(p.value, props),
-						"aria-pressed": !pending && draft.start === p.value.start && draft.end === p.value.end,
-						onClick: () => {
-							replaceDraft({ ...p.value });
-							updateDraft({ ...p.value });
-							setFocused(asDate(p.value.start));
-						},
-						children: p.label
-					}, p.id))
-				}), /* @__PURE__ */ jsxs("div", {
+				children: /* @__PURE__ */ jsxs("div", {
 					className: partClass("date-range__main", props.classNames?.main),
 					children: [
 						showInputs && /* @__PURE__ */ jsx("div", {
@@ -5249,7 +5254,7 @@ function DateRangePickerRoot(props) {
 							})
 						})
 					]
-				})]
+				})
 			}),
 			props.showActions !== false && /* @__PURE__ */ jsxs("footer", {
 				className: partClass("date-range__footer", props.classNames?.footer),
@@ -5259,38 +5264,18 @@ function DateRangePickerRoot(props) {
 					disabled: isDisabled || isReadOnly,
 					onClick: clearDraft,
 					children: labels.clear
-				}), /* @__PURE__ */ jsxs("div", { children: [
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "button button--ghost button--sm",
-						disabled: isDisabled || isReadOnly || !!rangeError({
-							start: currentDate(),
-							end: currentDate()
-						}, props),
-						onClick: () => {
-							const next = {
-								start: currentDate(),
-								end: currentDate()
-							};
-							replaceDraft(next);
-							updateDraft(next);
-						},
-						children: locale.startsWith("id") ? "Hari ini" : "Today"
-					}),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: partClass("button button--secondary button--sm", props.classNames?.cancelButton),
-						onClick: () => changeOpen(false),
-						children: labels.cancel
-					}),
-					props.commitMode !== "immediate" && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: partClass("button button--primary button--sm", props.classNames?.applyButton),
-						disabled: isDisabled || isReadOnly || !!errorCode,
-						onClick: apply,
-						children: labels.apply
-					})
-				] })]
+				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: partClass("button button--secondary button--sm", props.classNames?.cancelButton),
+					onClick: () => changeOpen(false),
+					children: labels.cancel
+				}), props.commitMode !== "immediate" && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: partClass("button button--primary button--sm", props.classNames?.applyButton),
+					disabled: isDisabled || isReadOnly || !!errorCode,
+					onClick: apply,
+					children: labels.apply
+				})] })]
 			})
 		]
 	});