@kazee-ds/react 0.8.0 → 0.10.0

package/README.md

@@ -1,8 +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).
+
 Accessible Kazee React components, including Toast, built on React Aria Components. Requires React/React DOM 19+ and ESM.
 
-Version **0.8.0** adds controlled selectable Card actions and builds on 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.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.5.3 ignores Toast shortcut events with missing or non-string keys. Normal shortcuts and scoped Escape dismissal remain available.
@@ -12,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.8.0 @kazee-ds/styles@0.8.0
+npm install --save-exact @kazee-ds/react@0.10.0 @kazee-ds/styles@0.10.0
 ```
 
 ## Use

package/dist/index.js

@@ -6,8 +6,8 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ToggleButton as ToggleButton$1 } from "react-aria-components/ToggleButton";
 import { ToggleButtonGroup as ToggleButtonGroup$1 } from "react-aria-components/ToggleButtonGroup";
 import { I18nProvider, useLocale } from "react-aria-components/I18nProvider";
-import { Button as Button$2, Label as Label$1, ListBox as ListBox$1, ListBoxItem, Popover as Popover$1, Select as Select$1, SelectStateContext, SelectValue } from "react-aria-components/Select";
-import { Popover as Popover$2 } from "react-aria-components/Popover";
+import { Popover as Popover$1 } from "react-aria-components/Popover";
+import { Button as Button$2, Label as Label$1, ListBox as ListBox$1, ListBoxItem, Select as Select$1, SelectStateContext, SelectValue } from "react-aria-components/Select";
 import { ListBox as ListBox$2, ListBoxItem as ListBoxItem$1, ListBoxSection } from "react-aria-components/ListBox";
 import { Text } from "react-aria-components/Text";
 import { Header, Header as Header$1 } from "react-aria-components/Header";
@@ -26,7 +26,7 @@ import { Modal, ModalOverlay } from "react-aria-components/Modal";
 import { Tooltip as Tooltip$1, TooltipTrigger } from "react-aria-components/Tooltip";
 import { Menu, MenuItem, MenuSection, MenuTrigger, SubmenuTrigger } from "react-aria-components/Menu";
 import { Separator as Separator$1 } from "react-aria-components/Separator";
-import { Button as Button$5, ComboBox, ComboBoxStateContext, Input as Input$3, Label as Label$6, ListBox as ListBox$3, ListBoxItem as ListBoxItem$2, Popover as Popover$3 } from "react-aria-components/ComboBox";
+import { Button as Button$5, ComboBox, ComboBoxStateContext, Input as Input$3, Label as Label$6, ListBox as ListBox$3, ListBoxItem as ListBoxItem$2 } from "react-aria-components/ComboBox";
 import { CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, RangeCalendar as RangeCalendar$1, RangeCalendarStateContext } from "react-aria-components/RangeCalendar";
 import { CalendarDate, GregorianCalendar, endOfMonth, getLocalTimeZone, now, parseAbsolute, parseDate, parseDateTime, parseTime, parseZonedDateTime, startOfMonth, startOfWeek, toCalendarDateTime, toZoned, today } from "@internationalized/date";
 import { Calendar as Calendar$1, CalendarCell as CalendarCell$1, CalendarGrid as CalendarGrid$1, CalendarGridBody as CalendarGridBody$1, CalendarGridHeader as CalendarGridHeader$1, CalendarHeaderCell as CalendarHeaderCell$1, CalendarStateContext } from "react-aria-components/Calendar";
@@ -188,6 +188,40 @@ function Root$1(props) {
 }
 var ToggleButtonGroup = /* @__PURE__ */ Object.assign(Root$1, { Separator: ButtonGroupSeparator });
 //#endregion
+//#region src/selection-popover.tsx
+/** Positioning must receive the cap: its available-space inline style wins over CSS. */
+function SelectionPopover({ maxHeight, ...props }) {
+	const [remHeight, setRemHeight] = useState(256);
+	useLayoutEffect(() => {
+		if (maxHeight !== void 0 && Number.isFinite(maxHeight) && maxHeight > 0) return;
+		const root = document.documentElement;
+		const update = () => setRemHeight((parseFloat(getComputedStyle(root).fontSize) || 16) * 16);
+		update();
+		const resize = new ResizeObserver(update);
+		resize.observe(root);
+		const mutation = new MutationObserver(update);
+		mutation.observe(root, {
+			attributes: true,
+			attributeFilter: [
+				"style",
+				"class",
+				"data-theme"
+			]
+		});
+		window.addEventListener("resize", update);
+		return () => {
+			resize.disconnect();
+			mutation.disconnect();
+			window.removeEventListener("resize", update);
+		};
+	}, [maxHeight]);
+	const limit = maxHeight !== void 0 && Number.isFinite(maxHeight) && maxHeight > 0 ? maxHeight : remHeight;
+	return /* @__PURE__ */ jsx(Popover$1, {
+		...props,
+		maxHeight: limit
+	});
+}
+//#endregion
 //#region src/label-context.ts
 /** Item labels use Text slots rather than introducing native label elements. */
 var ItemLabelContext = createContext(false);
@@ -424,7 +458,7 @@ function SelectClearButton({ className, children, "aria-label": label = "Hapus p
 }
 function SelectPopover({ className, ...props }) {
 	const { classNames } = useContext(SelectPartsContext);
-	return /* @__PURE__ */ jsx(Popover$2, {
+	return /* @__PURE__ */ jsx(SelectionPopover, {
 		...props,
 		className: partClass(partClass("select__popover", classNames?.popover), className)
 	});
@@ -689,7 +723,8 @@ function SelectCompact(props) {
 					children: /* @__PURE__ */ jsx(CloseIcon, { className: partClass("selection__close-icon", props.classNames?.clearIcon) })
 				})]
 			}),
-			/* @__PURE__ */ jsx(Popover$1, {
+			/* @__PURE__ */ jsx(SelectionPopover, {
+				maxHeight: props.maxHeight,
 				className: partClass("select__popover", props.classNames?.popover),
 				children: /* @__PURE__ */ jsx(ListBox$1, {
 					className: partClass("select__list", props.classNames?.list),
@@ -2728,9 +2763,18 @@ function DialogContent(props) {
 		base: "dialog__content"
 	});
 }
-var OverlayHeader = divPart("overlay__header");
+function dividedPart(base) {
+	return function Part({ divided, className, ...props }) {
+		return /* @__PURE__ */ jsx("div", {
+			...props,
+			className: partClass(base, className),
+			"data-divided": divided || void 0
+		});
+	};
+}
+var OverlayHeader = dividedPart("overlay__header");
 var OverlayBody = divPart("overlay__body");
-var OverlayFooter = divPart("overlay__footer");
+var OverlayFooter = dividedPart("overlay__footer");
 function OverlayHeading({ level = 2, slot = "title", ...props }) {
 	return /* @__PURE__ */ jsx(Heading, {
 		...props,
@@ -2759,7 +2803,7 @@ function DialogCloseButton({ slot = "close", ...props }) {
 	});
 }
 var PopoverTrigger = DialogTriggerPart;
-var PopoverContent = ariaPart(Popover$2, "popover__panel");
+var PopoverContent = ariaPart(Popover$1, "popover__panel");
 function PopoverDialog(props) {
 	return /* @__PURE__ */ jsx(DescribedDialog, {
 		...props,
@@ -2790,7 +2834,7 @@ function DropdownRoot({ open, defaultOpen, ...props }) {
 	});
 }
 var DropdownTrigger = DialogTriggerPart;
-var DropdownPopover = ariaPart(Popover$2, "menu__panel");
+var DropdownPopover = ariaPart(Popover$1, "menu__panel");
 function DropdownList(props) {
 	return /* @__PURE__ */ jsx(Menu, {
 		...props,
@@ -3575,6 +3619,7 @@ function CompactDialog(props) {
 							/* @__PURE__ */ jsxs("div", {
 								className: partClass("overlay__header", classNames?.header),
 								"data-close-button": showCloseButton || void 0,
+								"data-divided": props.dividedHeader || void 0,
 								children: [
 									/* @__PURE__ */ jsx(Heading, {
 										level: 2,
@@ -3601,6 +3646,7 @@ function CompactDialog(props) {
 							}),
 							(footer || showFooterClose) && /* @__PURE__ */ jsxs("div", {
 								className: partClass("overlay__footer", classNames?.footer),
+								"data-divided": props.dividedFooter || void 0,
 								children: [footer, showFooterClose && /* @__PURE__ */ jsx(Button$1, {
 									className: partClass("button button--secondary", classNames?.footerClose),
 									onPress: () => change(false),
@@ -3725,7 +3771,7 @@ function CompactDropdownMenu(props) {
 						shouldCloseOnSelect: closeOnSelect,
 						children: content(item)
 					}, item.id);
-					return item.children?.length ? /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [row, /* @__PURE__ */ jsx(Popover$2, {
+					return item.children?.length ? /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [row, /* @__PURE__ */ jsx(Popover$1, {
 						className: partClass("menu__panel", classNames?.panel),
 						offset: 4,
 						containerPadding: 16,
@@ -3754,7 +3800,7 @@ function CompactDropdownMenu(props) {
 				"aria-label": triggerLabel,
 				isDisabled: isDisabled || !items.length,
 				children: props.triggerContent ?? triggerLabel
-			}), /* @__PURE__ */ jsx(Popover$2, {
+			}), /* @__PURE__ */ jsx(Popover$1, {
 				className: partClass("menu__panel", classNames?.panel),
 				placement: popoverPlacement,
 				offset: 8,
@@ -3794,7 +3840,7 @@ function CompactPopover({ className, style, classNames, triggerLabel, title, des
 				className: partClass("button button--secondary", classNames?.trigger),
 				isDisabled,
 				children: triggerLabel
-			}), /* @__PURE__ */ jsx(Popover$2, {
+			}), /* @__PURE__ */ jsx(Popover$1, {
 				className: partClass(partClass(partClass("popover__panel", classNames?.panel), classNames?.root), className),
 				style,
 				isNonModal: true,
@@ -3931,27 +3977,121 @@ function Spinner({ size = "md", color = "current", label, id, className, style,
 }
 //#endregion
 //#region src/combobox-composition.tsx
-var ComboboxDisabledContext = createContext(false);
-function ComboboxComposition({ className, onChange, ...props }) {
-	return /* @__PURE__ */ jsx(ComboboxDisabledContext.Provider, {
-		value: !!props.isDisabled,
+var ComboboxPolicyContext = createContext({
+	disabled: false,
+	selectOnFocus: false,
+	disallowEmptySelection: false,
+	menuTrigger: "input",
+	maxHeight: void 0,
+	manageReset: false,
+	controlled: false,
+	resetting: { current: false },
+	resetLocal: () => {}
+});
+function useComboState() {
+	return useContext(ComboBoxStateContext);
+}
+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 resetLocal = useCallback(() => setLocal(props.defaultValue ?? null), [props.defaultValue]);
+	const value = props.value !== void 0 ? props.value : local;
+	return /* @__PURE__ */ jsx(ComboboxPolicyContext.Provider, {
+		value: {
+			disabled: !!props.isDisabled,
+			selectOnFocus,
+			disallowEmptySelection,
+			menuTrigger: props.menuTrigger ?? "input",
+			maxHeight,
+			manageReset: props.inputValue === void 0,
+			controlled: props.value !== void 0,
+			resetting,
+			resetLocal
+		},
 		children: /* @__PURE__ */ jsx(ComboBox, {
 			...props,
-			onChange: (key) => onChange?.(key == null ? null : String(key)),
-			className: partClass("select combobox", className)
+			...disallowEmptySelection ? { value } : {},
+			onChange: (key) => {
+				if (resetting.current) return;
+				if (disallowEmptySelection && key == null) return;
+				const next = key == null ? null : String(key);
+				setLocal(next);
+				onChange?.(next);
+			},
+			onInputChange: (text) => {
+				if (!resetting.current) props.onInputChange?.(text);
+			},
+			className: partClass(`select combobox select--${size} select--${variant}${hideLabel ? " select--label-hidden" : ""}${!fullWidth ? " select--fit" : ""}`, className)
 		})
 	});
 }
 function ComboboxInputGroup({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+	const state = useComboState();
+	return /* @__PURE__ */ jsx(Group, {
 		...props,
-		className: partClass("combobox__control", className)
+		className: partClass("combobox__control", className),
+		onKeyDownCapture: (event) => {
+			props.onKeyDownCapture?.(event);
+			if (!event.defaultPrevented && event.key === "Escape" && state?.isOpen && !event.nativeEvent.isComposing) {
+				event.preventDefault();
+				event.stopPropagation();
+				state.revert();
+			}
+		}
 	});
 }
 function ComboboxInput({ className, ...props }) {
+	const policy = useContext(ComboboxPolicyContext);
+	const state = useComboState();
+	const inputRef = useRef(null);
+	const selectClick = useRef(false);
+	const forwardedRef = props.ref;
+	const captureRef = useCallback((node) => {
+		inputRef.current = node;
+		if (typeof forwardedRef === "function") return forwardedRef(node);
+		if (forwardedRef) forwardedRef.current = node;
+	}, [forwardedRef]);
+	useEffect(() => {
+		const form = inputRef.current?.form;
+		if (!form || !policy.manageReset || !state) return;
+		const onReset = (event) => {
+			const value = state.value;
+			const text = state.inputValue;
+			policy.resetting.current = true;
+			queueMicrotask(() => {
+				if (event.defaultPrevented || policy.controlled) {
+					state.setValue(value);
+					state.setInputValue(text);
+				} else policy.resetLocal();
+				policy.resetting.current = false;
+			});
+		};
+		form.addEventListener("reset", onReset, true);
+		return () => form.removeEventListener("reset", onReset, true);
+	}, [policy, state]);
 	return /* @__PURE__ */ jsx(Input$3, {
 		...props,
-		className: partClass("combobox__input", className)
+		ref: captureRef,
+		className: partClass("combobox__input", className),
+		onFocus: (event) => {
+			props.onFocus?.(event);
+			if (policy.selectOnFocus && !policy.disabled) event.currentTarget.select();
+		},
+		onPointerDown: (event) => {
+			props.onPointerDown?.(event);
+			selectClick.current = policy.selectOnFocus && document.activeElement !== event.currentTarget;
+			if (selectClick.current && !event.defaultPrevented && !policy.disabled) {
+				event.preventDefault();
+				event.currentTarget.focus();
+				event.currentTarget.select();
+			}
+		},
+		onClick: (event) => {
+			props.onClick?.(event);
+			if (selectClick.current && !event.defaultPrevented && !policy.disabled) event.currentTarget.select();
+			selectClick.current = false;
+			if (!event.defaultPrevented && !policy.disabled && policy.menuTrigger === "focus" && !state?.isOpen) state?.open(null, "focus");
+		}
 	});
 }
 function ComboboxTrigger({ className, children, ...props }) {
@@ -3963,14 +4103,17 @@ function ComboboxTrigger({ className, children, ...props }) {
 	});
 }
 function ComboboxPopover({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Popover$3, {
+	const policy = useContext(ComboboxPolicyContext);
+	return /* @__PURE__ */ jsx(SelectionPopover, {
+		maxHeight: policy.maxHeight,
 		...props,
 		className: partClass("select__popover combobox__popover", className)
 	});
 }
 function ComboboxClearButton({ className, children, "aria-label": label = "Hapus pilihan", ...props }) {
 	const state = useContext(ComboBoxStateContext);
-	const disabled = useContext(ComboboxDisabledContext);
+	const { disabled, disallowEmptySelection } = useContext(ComboboxPolicyContext);
+	if (disallowEmptySelection) return null;
 	return /* @__PURE__ */ jsx("button", {
 		...props,
 		type: "button",
@@ -4015,16 +4158,27 @@ function CompactCombobox(props) {
 		props.onChange?.(next);
 		setDraft(null);
 	}
-	const content = /* @__PURE__ */ jsxs(ComboBox, {
+	const content = /* @__PURE__ */ jsxs(ComboboxComposition, {
 		className: partClass(partClass("select combobox", props.classNames?.root), props.className),
 		style: props.style,
+		size: props.size,
+		variant: props.variant,
+		hideLabel: props.hideLabel,
+		fullWidth: props.fullWidth,
+		maxHeight: props.maxHeight,
+		menuTrigger: props.menuTrigger,
+		selectOnFocus: props.selectOnFocus,
+		disallowEmptySelection: props.disallowEmptySelection,
+		onOpenChange: (open) => {
+			if (!open) setDraft(null);
+		},
 		value: id,
 		onChange: change,
 		inputValue: text,
 		onInputChange: (text) => {
 			if (resetting.current) return;
 			setDraft(text);
-			if (text === "" && id) {
+			if (text === "" && id && !props.disallowEmptySelection) {
 				setLocal(null);
 				props.onChange?.(null);
 			}
@@ -4046,7 +4200,7 @@ function CompactCombobox(props) {
 					children: [" ", "*"]
 				})]
 			}),
-			/* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsxs(ComboboxInputGroup, {
 				className: partClass("combobox__control", props.classNames?.control),
 				"data-invalid": invalid || void 0,
 				"data-disabled": props.isDisabled || void 0,
@@ -4056,13 +4210,13 @@ function CompactCombobox(props) {
 						"aria-hidden": "true",
 						children: props.startContent
 					}),
-					/* @__PURE__ */ jsx(Input$3, {
+					/* @__PURE__ */ jsx(ComboboxInput, {
 						ref: input,
 						className: partClass("combobox__input", props.classNames?.input),
 						placeholder: props.placeholder,
 						"aria-describedby": describedBy
 					}),
-					props.isClearable && /* @__PURE__ */ jsx("button", {
+					props.isClearable && !props.disallowEmptySelection && /* @__PURE__ */ jsx("button", {
 						type: "button",
 						className: partClass("combobox__clear", props.classNames?.clearButton),
 						"data-empty": !id && !text || void 0,
@@ -4083,7 +4237,7 @@ function CompactCombobox(props) {
 					})
 				]
 			}),
-			/* @__PURE__ */ jsx(Popover$3, {
+			/* @__PURE__ */ jsx(ComboboxPopover, {
 				className: partClass("select__popover combobox__popover", props.classNames?.popover),
 				children: /* @__PURE__ */ jsx(ListBox$3, {
 					className: partClass("select__list", props.classNames?.list),
@@ -4261,7 +4415,7 @@ function DateRangeIndicator({ className, children, ...props }) {
 }
 function DateRangePopover({ className, children, ...props }) {
 	const range = useRange();
-	return /* @__PURE__ */ jsx(Popover$2, {
+	return /* @__PURE__ */ jsx(Popover$1, {
 		placement: "bottom start",
 		offset: 8,
 		dir: range.dir,
@@ -5243,7 +5397,7 @@ function DateRangePickerRoot(props) {
 									children: panel
 								})
 							})
-						}) : /* @__PURE__ */ jsx(Popover$2, {
+						}) : /* @__PURE__ */ jsx(Popover$1, {
 							className: partClass("date-range__panel", props.classNames?.panel),
 							placement: "bottom start",
 							offset: 8,
@@ -6869,7 +7023,7 @@ function TemporalPickerContent({ children, className, ...props }) {
 }
 function TemporalPickerPopover({ children, className, ...props }) {
 	const c = usePicker();
-	return /* @__PURE__ */ jsx(Popover$2, {
+	return /* @__PURE__ */ jsx(Popover$1, {
 		className: partClass("date-range__panel temporal-picker__panel", className),
 		placement: "bottom start",
 		offset: 8,