@soroush.tech/design-system 2.0.0-rc.1 → 2.0.0-rc.3

package/dist/MenuList-D4imLXAa.cjs

@@ -0,0 +1,223 @@
+const require_src = require("./src-DU81aGy9.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+//#region src/Menu/MenuActivationContext.ts
+/**
+* Set by a `Menu` around its lists: told when any row anywhere in the menu is chosen, with
+* or without a `value`, so the whole menu can close. Internal - not exported from the
+* subpath.
+*/
+const MenuActivationContext = (0, react.createContext)(null);
+//#endregion
+//#region src/Menu/MenuListContext.ts
+/**
+* Present inside a `MenuList`. A `MenuItem` that finds it renders as a menu row
+* (`menuitem`); without it, the row is `Select`'s `option`.
+*/
+const MenuListContext = (0, react.createContext)(null);
+const useMenuListContext = () => (0, react.useContext)(MenuListContext);
+//#endregion
+//#region src/Menu/MenuList/utils/getOwnRows.ts
+const ROW_SELECTOR = "[role=\"menuitem\"], [role=\"menuitemradio\"], [role=\"menuitemcheckbox\"]";
+/**
+* The rows that belong to `list` itself, in document order. A nested submenu is a
+* `role="menu"` of its own inside the list, so a row counts only when its nearest
+* `role="menu"` is `list` - no per-list index state is kept anywhere.
+*/
+function getOwnRows(list) {
+	return Array.from(list.querySelectorAll(ROW_SELECTOR)).filter((row) => row.closest("[role=\"menu\"]") === list);
+}
+/** Whether a row can take focus and be chosen. */
+function isRowEnabled(row) {
+	return row.getAttribute("aria-disabled") !== "true";
+}
+//#endregion
+//#region src/Menu/MenuList/utils/getNextRow.ts
+/**
+* The enabled row a key moves to from `current` (which may be absent from `rows`, as when
+* focus is still on the list itself). Disabled rows are skipped; `shouldWrap` carries
+* `next` past the last row to the first and `previous` before the first to the last.
+*/
+function getNextRow(rows, current, step, shouldWrap) {
+	const enabled = rows.filter(isRowEnabled);
+	if (step === "first") return enabled[0];
+	if (step === "last") return enabled.at(-1);
+	const index = enabled.indexOf(current);
+	if (index === -1) return step === "next" ? enabled[0] : enabled.at(-1);
+	const target = index + (step === "next" ? 1 : -1);
+	if (target >= 0 && target < enabled.length) return enabled[target];
+	if (!shouldWrap) return void 0;
+	return target < 0 ? enabled.at(-1) : enabled[0];
+}
+//#endregion
+//#region src/Menu/MenuList/utils/findRowByText.ts
+/** A row's label text, without its icon, shortcut or note. */
+function getRowText(row) {
+	return (row.querySelector("[data-menu-label]") ?? row).textContent.trim().toLowerCase();
+}
+/**
+* The row type-ahead moves to. One key typed again and again (`r`, `r`, `r`) cycles
+* through the rows starting with it; distinct keys typed together (`re`) build a prefix,
+* matched from the current row onward so typing on stays where it is while it matches.
+*/
+function findRowByText(rows, current, typed) {
+	const enabled = rows.filter(isRowEnabled);
+	const query = typed.toLowerCase();
+	const isRepeating = [...query].every((key) => key === query[0]);
+	const start = enabled.indexOf(current);
+	const from = isRepeating ? start + 1 : Math.max(start, 0);
+	const ordered = [...enabled.slice(from), ...enabled.slice(0, from)];
+	const prefix = isRepeating ? query[0] : query;
+	return ordered.find((row) => getRowText(row).startsWith(prefix));
+}
+//#endregion
+//#region src/Menu/MenuList/MenuList.tsx
+const STEP_BY_KEY = {
+	ArrowDown: "next",
+	ArrowUp: "previous",
+	Home: "first",
+	End: "last"
+};
+const TYPEAHEAD_TIMEOUT = 500;
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props]);
+const layoutWithoutSize = (styleProps) => (0, require_src.src_exports.layout)({
+	...styleProps,
+	size: void 0
+});
+const MenuListRoot = require_src.styled("ul", {
+	name: "MenuList",
+	label: "MenuList",
+	shouldForwardProp,
+	systemProps: [require_src.src_exports.space, layoutWithoutSize]
+})(({ theme }) => ({
+	listStyle: "none",
+	margin: 0,
+	paddingLeft: 0,
+	paddingRight: 0,
+	paddingTop: theme.space[.5],
+	paddingBottom: theme.space[.5],
+	outline: "none",
+	"&:focus-visible": {
+		outline: `${theme.borderWidths.base} solid ${theme.palette[require_themeDefault.themeDefault(theme, "color", "primary")].main}`,
+		outlineOffset: `-${theme.borderWidths.base}`
+	}
+}));
+const isPrintableKey = (event) => event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+/**
+* @description A `role="menu"` list that owns the keyboard: the arrow keys, Home and End
+* move focus between its own rows, skipping disabled ones; typing jumps to a row by its
+* label. Rows are found in the DOM by their nearest `role="menu"`, so a nested submenu's
+* rows are never this list's. Renders in place - `Menu` floats one next to a trigger.
+*/
+function MenuList({ children, onSelect, shouldWrap: shouldWrapProp, shouldAutoFocus = false, color, textColor, size, dense, onKeyDown, ...rest }) {
+	const listRef = (0, react.useRef)(null);
+	const typed = (0, react.useRef)({
+		keys: "",
+		time: 0
+	});
+	const onMenuActivate = (0, react.useContext)(MenuActivationContext);
+	const parent = useMenuListContext();
+	const dp = require_theme.useDefaultProps("MenuList");
+	const shouldWrap = shouldWrapProp ?? dp.shouldWrap ?? true;
+	const rowColor = color ?? parent?.color ?? dp.color;
+	const rowTextColor = textColor ?? parent?.textColor ?? dp.textColor;
+	const rowSize = size ?? parent?.size ?? dp.size;
+	const rowDense = dense ?? parent?.dense ?? dp.dense;
+	(0, react.useEffect)(() => {
+		const list = listRef.current;
+		if (!shouldAutoFocus || !list) return;
+		const rows = getOwnRows(list).filter(isRowEnabled);
+		(rows.find((row) => row.getAttribute("aria-checked") === "true") ?? rows[0] ?? list).focus();
+	}, [shouldAutoFocus]);
+	const context = (0, react.useMemo)(() => ({
+		onActivate: (value, event) => {
+			if (value !== void 0) onSelect?.(value);
+			if (parent) parent.onActivate(value, event);
+			else onMenuActivate?.(value, event);
+		},
+		color: rowColor,
+		textColor: rowTextColor,
+		size: rowSize,
+		dense: rowDense
+	}), [
+		onSelect,
+		onMenuActivate,
+		parent,
+		rowColor,
+		rowTextColor,
+		rowSize,
+		rowDense
+	]);
+	const handleKeyDown = (event) => {
+		const list = event.currentTarget;
+		if (event.target.closest("[role=\"menu\"]") !== list) return;
+		const rows = getOwnRows(list);
+		const current = list.ownerDocument.activeElement;
+		const step = STEP_BY_KEY[event.key];
+		let target;
+		if (step) target = getNextRow(rows, current, step, shouldWrap);
+		else if (isPrintableKey(event)) {
+			const now = Date.now();
+			const isFresh = now - typed.current.time > TYPEAHEAD_TIMEOUT;
+			typed.current = {
+				keys: (isFresh ? "" : typed.current.keys) + event.key,
+				time: now
+			};
+			target = findRowByText(rows, current, typed.current.keys);
+		}
+		if (step || target) event.preventDefault();
+		target?.focus();
+		onKeyDown?.(event);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuListContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuListRoot, {
+			...rest,
+			ref: listRef,
+			role: "menu",
+			tabIndex: -1,
+			onKeyDown: handleKeyDown,
+			children
+		})
+	});
+}
+//#endregion
+Object.defineProperty(exports, "MenuActivationContext", {
+	enumerable: true,
+	get: function() {
+		return MenuActivationContext;
+	}
+});
+Object.defineProperty(exports, "MenuList", {
+	enumerable: true,
+	get: function() {
+		return MenuList;
+	}
+});
+Object.defineProperty(exports, "MenuListContext", {
+	enumerable: true,
+	get: function() {
+		return MenuListContext;
+	}
+});
+Object.defineProperty(exports, "getNextRow", {
+	enumerable: true,
+	get: function() {
+		return getNextRow;
+	}
+});
+Object.defineProperty(exports, "getOwnRows", {
+	enumerable: true,
+	get: function() {
+		return getOwnRows;
+	}
+});
+Object.defineProperty(exports, "useMenuListContext", {
+	enumerable: true,
+	get: function() {
+		return useMenuListContext;
+	}
+});

package/dist/MenuListContext-DKUOhNyw.d.cts

@@ -0,0 +1,21 @@
+import { W as Theme } from "./index-DJ0f69wh.cjs";
+import "./index-DchHf5cF.cjs";
+import { SyntheticEvent } from "react";
+//#region src/Menu/MenuListContext.d.ts
+type MenuItemValue = string | number;
+interface MenuListContextValue {
+  /** Fired when a row is chosen, with its `value` when it has one. */
+  onActivate: (value: MenuItemValue | undefined, event: SyntheticEvent) => void;
+  color?: keyof Theme['palette'];
+  textColor?: keyof Theme['text'];
+  size?: keyof Theme['sizes'];
+  dense?: boolean;
+}
+/**
+ * Present inside a `MenuList`. A `MenuItem` that finds it renders as a menu row
+ * (`menuitem`); without it, the row is `Select`'s `option`.
+ */
+declare const MenuListContext: import("react").Context<MenuListContextValue | null>;
+declare const useMenuListContext: () => MenuListContextValue | null;
+//#endregion
+export { useMenuListContext as i, MenuListContext as n, MenuListContextValue as r, MenuItemValue as t };

package/dist/MenuListContext-x-7lH4CH.d.mts

@@ -0,0 +1,21 @@
+import { W as Theme } from "./index-CJhK7JND.mjs";
+import "./index-h4dYtVrp.mjs";
+import { SyntheticEvent } from "react";
+//#region src/Menu/MenuListContext.d.ts
+type MenuItemValue = string | number;
+interface MenuListContextValue {
+  /** Fired when a row is chosen, with its `value` when it has one. */
+  onActivate: (value: MenuItemValue | undefined, event: SyntheticEvent) => void;
+  color?: keyof Theme['palette'];
+  textColor?: keyof Theme['text'];
+  size?: keyof Theme['sizes'];
+  dense?: boolean;
+}
+/**
+ * Present inside a `MenuList`. A `MenuItem` that finds it renders as a menu row
+ * (`menuitem`); without it, the row is `Select`'s `option`.
+ */
+declare const MenuListContext: import("react").Context<MenuListContextValue | null>;
+declare const useMenuListContext: () => MenuListContextValue | null;
+//#endregion
+export { useMenuListContext as i, MenuListContext as n, MenuListContextValue as r, MenuItemValue as t };

package/dist/Modal.d.cts

@@ -1,2 +1,2 @@
-import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-Belxmt1X.cjs";
+import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-nqUA_6J_.cjs";
 export { ManagedModal, ManagedModalProps, Modal, ModalCloseReason, ModalManager, ModalProps, ModalScroll, UseModalParameters, UseModalReturnValue, exposeToAria, hideFromAria, useModal };

package/dist/Modal.d.mts

@@ -1,2 +1,2 @@
-import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-Wnv6jCR3.mjs";
+import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-Bx0-6yeX.mjs";
 export { ManagedModal, ManagedModalProps, Modal, ModalCloseReason, ModalManager, ModalProps, ModalScroll, UseModalParameters, UseModalReturnValue, exposeToAria, hideFromAria, useModal };

package/dist/NativeSelect.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
-const require_Icon = require("./Icon-CI6q2Eyi.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_Icon = require("./Icon-D-EWsBVg.cjs");
 const require_FormControl = require("./FormControl.cjs");
 const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.cjs");
 require("react");
@@ -24,10 +24,10 @@ const baseStyle = {
 	alignItems: "center",
 	transition: "border-color 0.15s ease"
 };
-const backgroundStyle = ({ theme, textColor = require_themeDefault.themeDefault(theme, "accentTextColor", "primary"), bg = require_themeDefault.themeDefault(theme, "inputBg", "terminal") }) => {
+const backgroundStyle = ({ theme, textColor, color = require_themeDefault.themeDefault(theme, "color", "primary"), bg = require_themeDefault.themeDefault(theme, "inputBg", "terminal") }) => {
 	return {
 		backgroundColor: (0, require_src.src_exports.get)(theme, `background.${bg}`),
-		color: (0, require_src.src_exports.get)(theme, `text.${textColor}`),
+		color: textColor ? (0, require_src.src_exports.get)(theme, `text.${textColor}`) : (0, require_src.src_exports.get)(theme, `palette.${color}.main`),
 		fontFamily: (0, require_src.src_exports.get)(theme, "fonts.body"),
 		fontSize: (0, require_src.src_exports.get)(theme, "fontSizes.1"),
 		lineHeight: (0, require_src.src_exports.get)(theme, "lineHeights.base")
@@ -71,7 +71,7 @@ const NativeSelectRoot = require_src.styled("div", {
 	shouldForwardProp,
 	systemProps: [require_src.src_exports.space, widthStyles]
 })(baseStyle, require_inputVariantStyles.inputVariantStyles, borderRadiusStyle, colorBorder, focusWithinColor, focusVisibleRing, backgroundStyle, layoutStyles);
-const shouldForwardNativeSelectProps = (prop) => prop !== "sizeToken" && prop !== "bg" && prop !== "textColor";
+const shouldForwardNativeSelectProps = (prop) => prop !== "sizeToken" && prop !== "bg" && prop !== "textColor" && prop !== "accent";
 const sizeVariants = ({ theme, sizeToken }) => {
 	const s = theme.sizes[sizeToken];
 	return {
@@ -82,9 +82,9 @@ const sizeVariants = ({ theme, sizeToken }) => {
 		fontSize: theme.fontSizes[s.fontSize]
 	};
 };
-const selectSurface = ({ theme, bg = require_themeDefault.themeDefault(theme, "inputBg", "terminal"), textColor }) => {
+const selectSurface = ({ theme, bg = require_themeDefault.themeDefault(theme, "inputBg", "terminal"), textColor, accent }) => {
 	const backgroundColor = (0, require_src.src_exports.get)(theme, `background.${bg}`);
-	const color = (0, require_src.src_exports.get)(theme, `text.${textColor}`);
+	const color = textColor ? (0, require_src.src_exports.get)(theme, `text.${textColor}`) : (0, require_src.src_exports.get)(theme, `palette.${accent}.main`);
 	return {
 		backgroundColor,
 		color,
@@ -137,7 +137,7 @@ function NativeSelect({ options, value, defaultValue, onChange, placeholder, bor
 	const { id, error, disabled, required, size, fullWidth } = fc;
 	const theme = require_theme.useTheme();
 	const color = fc.color ?? require_themeDefault.themeDefault(theme, "color", "primary");
-	const textColor = fc.textColor ?? require_themeDefault.themeDefault(theme, "accentTextColor", "primary");
+	const textColor = fc.textColor;
 	const variant = variantProp ?? require_themeDefault.themeDefault(theme, "inputVariant", "default");
 	const handleChange = (event) => {
 		const match = options.find((option) => String(option.value) === event.target.value);
@@ -165,6 +165,7 @@ function NativeSelect({ options, value, defaultValue, onChange, placeholder, bor
 			sizeToken: size,
 			bg,
 			textColor,
+			accent: color,
 			value,
 			defaultValue: uncontrolledDefault,
 			onChange: handleChange,

package/dist/NativeSelect.d.cts

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { n as IconProps, r as IconName } from "./index-Ctqajtac.cjs";
+import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { n as IconProps, r as IconName } from "./index-Dv_fk1_F.cjs";
 import { SelectHTMLAttributes } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/NativeSelect/NativeSelect.d.ts
@@ -28,7 +27,7 @@ interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>,
   borderRadius?: keyof Theme['radii'];
   /** Focus/active border color - resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: NativeSelectColor;
-  /** Text color of the selected value - resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  /** Text color of the selected value - resolves against `theme.text`. Default: the accent `color`'s `main`. */
   textColor?: NativeSelectTextColor;
   /** Background color - resolves against `theme.background`. Default: `'terminal'`. */
   bg?: NativeSelectBackgroundToken;

package/dist/NativeSelect.d.mts

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { n as IconProps, r as IconName } from "./index-DO9J-Fla.mjs";
+import { W as Theme } from "./index-CJhK7JND.mjs";
+import { n as IconProps, r as IconName } from "./index-ha1WjSZ5.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { SelectHTMLAttributes } from "react";
 //#region src/NativeSelect/NativeSelect.d.ts
@@ -28,7 +27,7 @@ interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>,
   borderRadius?: keyof Theme['radii'];
   /** Focus/active border color - resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: NativeSelectColor;
-  /** Text color of the selected value - resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  /** Text color of the selected value - resolves against `theme.text`. Default: the accent `color`'s `main`. */
   textColor?: NativeSelectTextColor;
   /** Background color - resolves against `theme.background`. Default: `'terminal'`. */
   bg?: NativeSelectBackgroundToken;

package/dist/NativeSelect.mjs

@@ -1,7 +1,7 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-CDVxig_g.mjs";
-import { t as Icon } from "./Icon-CH3asUJu.mjs";
+import { r as useTheme } from "./theme-Z9_QludW.mjs";
+import { t as Icon } from "./Icon-BihOAP4u.mjs";
 import { useFormControl } from "./FormControl.mjs";
 import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
 import "react";
@@ -22,10 +22,10 @@ const baseStyle = {
 	alignItems: "center",
 	transition: "border-color 0.15s ease"
 };
-const backgroundStyle = ({ theme, textColor = themeDefault(theme, "accentTextColor", "primary"), bg = themeDefault(theme, "inputBg", "terminal") }) => {
+const backgroundStyle = ({ theme, textColor, color = themeDefault(theme, "color", "primary"), bg = themeDefault(theme, "inputBg", "terminal") }) => {
 	return {
 		backgroundColor: (0, src_exports.get)(theme, `background.${bg}`),
-		color: (0, src_exports.get)(theme, `text.${textColor}`),
+		color: textColor ? (0, src_exports.get)(theme, `text.${textColor}`) : (0, src_exports.get)(theme, `palette.${color}.main`),
 		fontFamily: (0, src_exports.get)(theme, "fonts.body"),
 		fontSize: (0, src_exports.get)(theme, "fontSizes.1"),
 		lineHeight: (0, src_exports.get)(theme, "lineHeights.base")
@@ -69,7 +69,7 @@ const NativeSelectRoot = styled("div", {
 	shouldForwardProp,
 	systemProps: [src_exports.space, widthStyles]
 })(baseStyle, inputVariantStyles, borderRadiusStyle, colorBorder, focusWithinColor, focusVisibleRing, backgroundStyle, layoutStyles);
-const shouldForwardNativeSelectProps = (prop) => prop !== "sizeToken" && prop !== "bg" && prop !== "textColor";
+const shouldForwardNativeSelectProps = (prop) => prop !== "sizeToken" && prop !== "bg" && prop !== "textColor" && prop !== "accent";
 const sizeVariants = ({ theme, sizeToken }) => {
 	const s = theme.sizes[sizeToken];
 	return {
@@ -80,9 +80,9 @@ const sizeVariants = ({ theme, sizeToken }) => {
 		fontSize: theme.fontSizes[s.fontSize]
 	};
 };
-const selectSurface = ({ theme, bg = themeDefault(theme, "inputBg", "terminal"), textColor }) => {
+const selectSurface = ({ theme, bg = themeDefault(theme, "inputBg", "terminal"), textColor, accent }) => {
 	const backgroundColor = (0, src_exports.get)(theme, `background.${bg}`);
-	const color = (0, src_exports.get)(theme, `text.${textColor}`);
+	const color = textColor ? (0, src_exports.get)(theme, `text.${textColor}`) : (0, src_exports.get)(theme, `palette.${accent}.main`);
 	return {
 		backgroundColor,
 		color,
@@ -135,7 +135,7 @@ function NativeSelect({ options, value, defaultValue, onChange, placeholder, bor
 	const { id, error, disabled, required, size, fullWidth } = fc;
 	const theme = useTheme();
 	const color = fc.color ?? themeDefault(theme, "color", "primary");
-	const textColor = fc.textColor ?? themeDefault(theme, "accentTextColor", "primary");
+	const textColor = fc.textColor;
 	const variant = variantProp ?? themeDefault(theme, "inputVariant", "default");
 	const handleChange = (event) => {
 		const match = options.find((option) => String(option.value) === event.target.value);
@@ -163,6 +163,7 @@ function NativeSelect({ options, value, defaultValue, onChange, placeholder, bor
 			sizeToken: size,
 			bg,
 			textColor,
+			accent: color,
 			value,
 			defaultValue: uncontrolledDefault,
 			onChange: handleChange,