@charcoal-ui/react 3.10.1-beta.0 → 3.10.1

package/dist/index.esm.js

@@ -1089,7 +1089,7 @@ var LoadingSpinnerIcon = forwardRef14(function LoadingSpinnerIcon2({
 });
 
 // src/components/DropdownSelector/index.tsx
-import { useState as useState3, useRef as useRef9, useMemo as useMemo3 } from "react";
+import { useState as useState3, useRef as useRef9, useMemo as useMemo3, useCallback as useCallback6 } from "react";
 import styled16, { css as css9 } from "styled-components";
 import { disabledSelector as disabledSelector2 } from "@charcoal-ui/utils";
 
@@ -1267,7 +1267,10 @@ import { focusVisibleFocusRingCss as focusVisibleFocusRingCss6 } from "@charcoal
 import { useVisuallyHidden as useVisuallyHidden3 } from "@react-aria/visually-hidden";
 import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var defaultRequiredText = "*\u5FC5\u9808";
-function DropdownSelector(props) {
+function DropdownSelector({
+  onChange,
+  ...props
+}) {
   const triggerRef = useRef9(null);
   const [isOpen, setIsOpen] = useState3(false);
   const preview = findPreviewRecursive(props.children, props.value);
@@ -1276,9 +1279,12 @@ function DropdownSelector(props) {
   const {
     visuallyHiddenProps
   } = useVisuallyHidden3();
+  const handleChange = useCallback6((e) => {
+    onChange(e.target.value);
+  }, [onChange]);
   return /* @__PURE__ */ jsxs10(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
     props.showLabel === true && /* @__PURE__ */ jsx20(DropdownFieldLabel, { label: props.label, required: props.required, requiredText: props.requiredText ?? defaultRequiredText, subLabel: props.subLabel }),
-    /* @__PURE__ */ jsx20("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ jsx20("select", { name: props.name, value: props.value, tabIndex: -1, children: propsArray.map((itemProps) => {
+    /* @__PURE__ */ jsx20("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ jsx20("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
       return /* @__PURE__ */ jsx20("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
     }) }) }),
     /* @__PURE__ */ jsxs10(DropdownButton, { invalid: props.invalid, disabled: props.disabled, onClick: () => {
@@ -1290,7 +1296,7 @@ function DropdownSelector(props) {
       /* @__PURE__ */ jsx20(DropdownButtonIcon, { name: "16/Menu" })
     ] }),
     isOpen && /* @__PURE__ */ jsx20(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ jsx20(MenuList, { value: props.value, onChange: (v) => {
-      props.onChange(v);
+      onChange(v);
       setIsOpen(false);
     }, children: props.children }) }),
     props.assistiveText !== void 0 && /* @__PURE__ */ jsx20(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
@@ -1342,7 +1348,7 @@ var ItemDiv = styled17.div.withConfig({
 })(["display:flex;align-items:center;min-height:40px;cursor:pointer;outline:none;padding-right:16px;padding-left:16px;transition:background-color 0.2s;&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}:hover,:focus,:focus-within{&:not(disabled):not([aria-disabled='true']){background-color:var(--charcoal-surface3);}}"]);
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-import { useCallback as useCallback6, useContext as useContext7 } from "react";
+import { useCallback as useCallback7, useContext as useContext7 } from "react";
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1380,11 +1386,11 @@ function useMenuItemHandleKeyDown(value) {
     root,
     propsArray
   } = useContext7(MenuListContext);
-  const setContextValue = useCallback6(() => {
+  const setContextValue = useCallback7(() => {
     if (value !== void 0)
       setValue(value);
   }, [value, setValue]);
-  const handleKeyDown = useCallback6((e) => {
+  const handleKeyDown = useCallback7((e) => {
     if (e.key === "Enter") {
       setContextValue();
     } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {