@persona/design-system 0.10.12 → 0.10.14

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+## 0.10.14 (2026-11-06)
+
+### Features
+
+- **modal:** accept a portalContainer for the overlay
+
+### Bug Fixes
+
+- **design-system:** keep SmartTextInput mode in sync with external state
+
+## 0.10.13 (2026-11-06)
+
+### Features
+
+- **design-system:** explain disabled bulk actions with disabledReason ([#546](https://github.com/persona-id/persona-design-system/pull/546))
+- **design-system:** controlled DataTable row selection ([#544](https://github.com/persona-id/persona-design-system/pull/544))
+- ⚠️  **charting:** move chart components to a private @persona/charting package
+- **colorMode:** add useColorMode, scope theme and color-scheme
+
+### Bug Fixes
+
+- **design-system:** keep controlled selection checkboxes across data refreshes ([#545](https://github.com/persona-id/persona-design-system/pull/545))
+- **design-system:** reject SmartTextInput chain syntax errors, keep text after unclosed expressions, match queries case-insensitively
+- **design-system:** match custom function links in validatePath
+- **design-system:** use semantic tokens for SmartTextInput styling
+- **design-system:** keep SmartTextInput function-argument cursor offsets aligned
+- **design-system:** keep SmartTextInput popover styles and listbox semantics
+- **combobox:** report multi-select activation once under React 18 ([#554](https://github.com/persona-id/persona-design-system/pull/554))
+- **colorMode:** print roots and scopes on the light palette
+- **modal:** drop the entrance transform once the modal has risen
+
+### ⚠️  Breaking Changes
+
+- **charting:** move chart components to a private @persona/charting package 
+  @persona/design-system/components/Chart moved to the private @persona/charting package
+
+### 🧱 Updated Dependencies
+
+- Updated design-tokens to 0.4.27
+- Updated icons to 0.1.16
+
 ## 0.10.12 (2026-11-05)
 
 ### Features

package/dist/{CheckboxGroupField-XSVAmESI.d.mts → CheckboxGroupField-tBvP22Bo.d.mts}

@@ -1,5 +1,5 @@
 import { n as CheckboxProps } from "./Checkbox-Clt9mCTk.mjs";
-import { o as ImplementsFormField } from "./inputFields-DnBb3NhK.mjs";
+import { o as ImplementsFormField } from "./inputFields-B7parF2l.mjs";
 import { ReactElement } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { AriaCheckboxGroupProps } from "react-aria";
@@ -22,4 +22,4 @@ declare const CheckboxGroupField: ({
 }: CheckboxGroupFieldProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { CheckboxGroupField as t };
-//# sourceMappingURL=CheckboxGroupField-XSVAmESI.d.mts.map
+//# sourceMappingURL=CheckboxGroupField-tBvP22Bo.d.mts.map

package/dist/CheckboxGroupField.d.mts

@@ -1,2 +1,2 @@
-import { t as CheckboxGroupField } from "./CheckboxGroupField-XSVAmESI.mjs";
+import { t as CheckboxGroupField } from "./CheckboxGroupField-tBvP22Bo.mjs";
 export { CheckboxGroupField as default };

package/dist/{Combobox-BNjYEAmv.mjs → Combobox-DmFQ5cAy.mjs}

@@ -1012,7 +1012,8 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 		return item ? item.label : "";
 	}, []);
 	const getOptionId = useCallback((index) => `${field.inputId}-option-${index}`, [field.inputId]);
-	const { addSelectedItem, getSelectedItemProps, getDropdownProps, removeSelectedItem, reset, setSelectedItems } = useMultipleSelection({
+	const reportValues = useCallback((nextValues) => onValuesChange?.([...new Set(nextValues)]), [onValuesChange]);
+	const { getSelectedItemProps, getDropdownProps, removeSelectedItem, reset } = useMultipleSelection({
 		selectedItems,
 		itemToKey: mode.itemToKey,
 		onStateChange: ({ selectedItems: newSelectedItems, type }) => {
@@ -1023,13 +1024,10 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 				case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
 				case useMultipleSelection.stateChangeTypes.FunctionAddSelectedItem:
 				case useMultipleSelection.stateChangeTypes.FunctionSetSelectedItems:
-					if (onValuesChange && newSelectedItems) {
-						const newValues = newSelectedItems.map((item) => item.value);
-						onValuesChange?.(newValues);
-					}
+					if (newSelectedItems) reportValues(newSelectedItems.map((item) => item.value));
 					break;
 				case useMultipleSelection.stateChangeTypes.FunctionReset:
-					if (onValuesChange) onValuesChange([]);
+					reportValues([]);
 					break;
 				default: break;
 			}
@@ -1053,10 +1051,10 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 	const handleSelectAllToggle = useCallback(() => {
 		if (selectedState.allSelected || selectedState.indeterminate) {
 			const visibleValues = filteredOptions.map((option) => option.value);
-			setSelectedItems(selectedItems.filter((item) => !visibleValues.includes(item.value)));
+			reportValues(selectedItems.filter((item) => !visibleValues.includes(item.value)).map((item) => item.value));
 		} else {
 			const newItems = filteredOptions.filter((option) => !values.includes(option.value));
-			setSelectedItems([...selectedItems, ...newItems]);
+			reportValues([...selectedItems, ...newItems].map((item) => item.value));
 		}
 	}, [
 		selectedState.allSelected,
@@ -1064,7 +1062,20 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 		filteredOptions,
 		selectedItems,
 		values,
-		setSelectedItems
+		reportValues
+	]);
+	const handleOptionToggle = useCallback((option) => {
+		if (option.value === SELECT_ALL_VALUE) {
+			handleSelectAllToggle();
+			return;
+		}
+		const currentValues = selectedItems.map((item) => item.value);
+		reportValues(values.includes(option.value) ? currentValues.filter((value) => value !== option.value) : [...currentValues, option.value]);
+	}, [
+		selectedItems,
+		values,
+		reportValues,
+		handleSelectAllToggle
 	]);
 	const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, getItemProps, highlightedIndex, setHighlightedIndex, closeMenu, openMenu } = useCombobox({
 		items: navigableItems,
@@ -1084,21 +1095,12 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 				if (rowIndex != null) virtualizer.scrollToIndex(rowIndex, { align: "auto" });
 			}
 		},
-		onStateChange({ type, selectedItem: newSelectedItem, inputValue: newInputValue }) {
+		onStateChange({ type, inputValue: newInputValue }) {
 			switch (type) {
 				case useCombobox.stateChangeTypes.InputChange:
 					setInputValue(newInputValue || "");
 					mode.onInputChange?.(newInputValue || "");
 					break;
-				case useCombobox.stateChangeTypes.InputKeyDownEnter:
-				case useCombobox.stateChangeTypes.ItemClick:
-					if (newSelectedItem && newSelectedItem.value === SELECT_ALL_VALUE) {
-						handleSelectAllToggle();
-						break;
-					}
-					if (newSelectedItem) if (values.includes(newSelectedItem.value)) removeSelectedItem(newSelectedItem);
-					else addSelectedItem(newSelectedItem);
-					break;
 				default: break;
 			}
 		},
@@ -1134,7 +1136,8 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 		if (option.value === SELECT_ALL_VALUE) return /* @__PURE__ */ jsx(StyledMenuItem$1, {
 			...getItemProps({
 				item: option,
-				index: currentIndex
+				index: currentIndex,
+				onClick: () => handleOptionToggle(option)
 			}),
 			focused: isHighlighted,
 			selected: false,
@@ -1160,7 +1163,8 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 			...getItemProps({
 				item: option,
 				index: currentIndex,
-				"aria-selected": isSelected
+				"aria-selected": isSelected,
+				onClick: () => handleOptionToggle(option)
 			}),
 			focused: isHighlighted,
 			selected: false,
@@ -1196,7 +1200,8 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 		values,
 		getItemProps,
 		size,
-		selectedState
+		selectedState,
+		handleOptionToggle
 	]);
 	const isMenuOpen = isOpen;
 	const { isFooterHighlighted, footerActionId, showFooterAction, handleFooterKeyDown, clearFooterHighlight } = useComboboxFooterAction({
@@ -1210,8 +1215,21 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 		inputId: field.inputId
 	});
 	const handleKeyDown = useCallback((event) => {
-		if (event.key === "Enter" && !isMenuOpen) openMenu();
-	}, [isMenuOpen, openMenu]);
+		if (event.key === "Enter") {
+			if (!isMenuOpen) openMenu();
+			else if (highlightedIndex >= 0 && navigableItems[highlightedIndex]) {
+				event.preventDefault();
+				Object.assign(event, { preventDownshiftDefault: true });
+				handleOptionToggle(navigableItems[highlightedIndex]);
+			}
+		}
+	}, [
+		isMenuOpen,
+		openMenu,
+		highlightedIndex,
+		navigableItems,
+		handleOptionToggle
+	]);
 	const dropdownPosition = useDropdownPosition(portalContainerRef, isMenuOpen, embedded ? false : portal);
 	useEffect(() => {
 		mode.onMenuOpenChange(isMenuOpen);
@@ -1251,13 +1269,7 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 		}
 		if (e.key === "Enter" && highlightedIndex >= 0 && navigableItems[highlightedIndex]) {
 			e.preventDefault();
-			const selectedItem = navigableItems[highlightedIndex];
-			if (selectedItem.value === SELECT_ALL_VALUE) {
-				handleSelectAllToggle();
-				return;
-			}
-			if (values.includes(selectedItem.value)) removeSelectedItem(selectedItem);
-			else addSelectedItem(selectedItem);
+			handleOptionToggle(navigableItems[highlightedIndex]);
 		}
 		if (e.key === "Escape") {
 			clearFooterHighlight();
@@ -1277,12 +1289,9 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 		handleFooterKeyDown,
 		isFooterHighlighted,
 		clearFooterHighlight,
-		values,
-		addSelectedItem,
-		removeSelectedItem,
 		closeMenu,
 		comboboxInputRef,
-		handleSelectAllToggle
+		handleOptionToggle
 	]);
 	useOutsideClick({
 		ref: comboboxContainerRef,
@@ -1327,21 +1336,24 @@ function ComboboxMultiSelectComponent(componentProps, ref) {
 		ref: comboboxContainerRef,
 		children: [embedded ? null : externalTrigger != null ? externalTrigger : /* @__PURE__ */ jsxs(InputContainer, { children: [
 			/* @__PURE__ */ jsx(MultiSelectComboboxInput, {
-				...getInputProps(getDropdownProps({
-					...props,
-					ref: comboboxInputRef,
-					id: field.inputId,
-					placeholder: selectedItems.length === 0 ? placeholder : "",
-					disabled: field.disabled,
-					"aria-label": ariaLabel,
-					"aria-labelledby": labelId,
-					"aria-describedby": [field.helperTextId, field.hasWarning ? field.warningTextId : null].filter(Boolean).join(" ") || void 0,
-					"aria-errormessage": field.hasError ? field.errorTextId : void 0,
-					"aria-invalid": field.hasError,
-					"aria-required": required || void 0,
-					preventKeyAction: isMenuOpen,
-					onKeyDown: handleKeyDown
-				})),
+				...getInputProps({
+					...getDropdownProps({
+						...props,
+						ref: comboboxInputRef,
+						id: field.inputId,
+						placeholder: selectedItems.length === 0 ? placeholder : "",
+						disabled: field.disabled,
+						"aria-label": ariaLabel,
+						"aria-labelledby": labelId,
+						"aria-describedby": [field.helperTextId, field.hasWarning ? field.warningTextId : null].filter(Boolean).join(" ") || void 0,
+						"aria-errormessage": field.hasError ? field.errorTextId : void 0,
+						"aria-invalid": field.hasError,
+						"aria-required": required || void 0,
+						preventKeyAction: isMenuOpen,
+						onKeyDown: handleKeyDown
+					}),
+					...isMenuOpen ? { onKeyDown: handleKeyDown } : {}
+				}),
 				size,
 				$isOpen: isMenuOpen,
 				hasWarning: field.hasWarning,
@@ -2130,4 +2142,4 @@ const Combobox = forwardRef(ComboboxComponent);
 //#endregion
 export { CaretButton as n, flattenOptions as r, Combobox as t };
 
-//# sourceMappingURL=Combobox-BNjYEAmv.mjs.map
+//# sourceMappingURL=Combobox-DmFQ5cAy.mjs.map