@charcoal-ui/react 4.0.0-beta.2 → 4.0.0-beta.3

package/dist/index.esm.js

@@ -68,11 +68,12 @@ var Button = forwardRef2(function Button2({
   className,
   as,
   isActive,
+  componentAs,
   ...props
 }, ref) {
   const Component = useMemo2(() => as ?? "button", [as]);
   const classNames = useClassNames("charcoal-button", className);
-  return /* @__PURE__ */ jsx3(Component, { ...props, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
+  return /* @__PURE__ */ jsx3(Component, { ...props, as: componentAs, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
 });
 var Button_default = Button;
 
@@ -1046,7 +1047,7 @@ var LoadingSpinnerIcon = forwardRef14(function LoadingSpinnerIcon2({
 });
 
 // src/components/DropdownSelector/index.tsx
-import { useState as useState3, useRef as useRef9, useMemo as useMemo5 } from "react";
+import { useState as useState3, useRef as useRef9, useMemo as useMemo5, useCallback as useCallback6 } from "react";
 import styled15, { css as css8 } from "styled-components";
 import { disabledSelector as disabledSelector2 } from "@charcoal-ui/utils";
 
@@ -1224,7 +1225,10 @@ import { focusVisibleFocusRingCss as focusVisibleFocusRingCss5 } 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);
@@ -1233,9 +1237,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: () => {
@@ -1247,7 +1254,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 })
@@ -1299,7 +1306,7 @@ var ItemDiv = styled16.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) {
@@ -1337,11 +1344,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") {