@charcoal-ui/react 3.9.0 → 3.10.0

package/dist/index.esm.js

@@ -879,7 +879,7 @@ var ModalBackgroundContext = React8.createContext(null);
 
 // src/components/Modal/useCustomModalOverlay.tsx
 import * as React9 from "react";
-import { ariaHideOutside, useOverlay, useOverlayFocusContain } from "@react-aria/overlays";
+import { ariaHideOutside, useOverlay, useOverlayFocusContain, usePreventScroll } from "@react-aria/overlays";
 function useCharcoalModalOverlay(props, state, ref) {
   const {
     overlayProps,
@@ -890,6 +890,9 @@ function useCharcoalModalOverlay(props, state, ref) {
     onClose: state.onClose,
     shouldCloseOnInteractOutside: () => false
   }, ref);
+  usePreventScroll({
+    isDisabled: !state.isOpen
+  });
   useOverlayFocusContain();
   React9.useEffect(() => {
     if (state.isOpen && ref.current) {
@@ -1086,7 +1089,7 @@ var LoadingSpinnerIcon = forwardRef14(function LoadingSpinnerIcon2({
 });
 
 // src/components/DropdownSelector/index.tsx
-import { useState as useState3, useRef as useRef9 } from "react";
+import { useState as useState3, useRef as useRef9, useMemo as useMemo3 } from "react";
 import styled16, { css as css9 } from "styled-components";
 import { disabledSelector as disabledSelector2 } from "@charcoal-ui/utils";
 
@@ -1100,7 +1103,7 @@ import styled14 from "styled-components";
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
 import { useEffect as useEffect6 } from "react";
-function usePreventScroll(element, isOpen) {
+function usePreventScroll2(element, isOpen) {
   useEffect6(() => {
     if (isOpen && element) {
       const defaultPaddingRight = element.style.paddingRight;
@@ -1136,7 +1139,7 @@ function Popover(props) {
     toggle: _empty
   });
   const modalBackground = useContext6(ModalBackgroundContext);
-  usePreventScroll(modalBackground, props.isOpen);
+  usePreventScroll2(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
   return /* @__PURE__ */ jsxs9(Overlay2, { portalContainer: document.body, children: [
@@ -1205,7 +1208,7 @@ function findPreviewRecursive(children, value) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-import { useRef as useRef8 } from "react";
+import { useMemo as useMemo2, useRef as useRef8 } from "react";
 import styled15 from "styled-components";
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
@@ -1213,40 +1216,43 @@ import { createContext as createContext6 } from "react";
 var MenuListContext = createContext6({
   root: void 0,
   value: "",
-  values: [],
+  propsArray: [],
   setValue: (_v) => {
   }
 });
 
 // src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
 import * as React12 from "react";
-function getValuesRecursive(children, values = []) {
+function getValuesRecursive(children) {
   const childArray = React12.Children.toArray(children);
+  const propsArray = [];
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
     if (React12.isValidElement(child)) {
       const props = child.props;
       if ("value" in props && typeof props.value === "string") {
-        const childValue = props.value;
-        values.push(childValue);
+        propsArray.push({
+          disabled: props.disabled,
+          value: props.value
+        });
       }
       if ("children" in props && props.children) {
-        getValuesRecursive(props.children, values);
+        propsArray.push(...getValuesRecursive(props.children));
       }
     }
   }
+  return propsArray;
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
 function MenuList(props) {
   const root = useRef8(null);
-  const values = [];
-  getValuesRecursive(props.children, values);
+  const propsArray = useMemo2(() => getValuesRecursive(props.children), [props.children]);
   return /* @__PURE__ */ jsx19(StyledUl, { ref: root, children: /* @__PURE__ */ jsx19(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
-    values,
+    propsArray,
     setValue: (v) => {
       props.onChange?.(v);
     }
@@ -1258,20 +1264,29 @@ var StyledUl = styled15.ul.withConfig({
 
 // src/components/DropdownSelector/index.tsx
 import { focusVisibleFocusRingCss as focusVisibleFocusRingCss6 } from "@charcoal-ui/styled";
+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) {
   const triggerRef = useRef9(null);
   const [isOpen, setIsOpen] = useState3(false);
   const preview = findPreviewRecursive(props.children, props.value);
+  const isPlaceholder = useMemo3(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
+  const propsArray = getValuesRecursive(props.children);
+  const {
+    visuallyHiddenProps
+  } = useVisuallyHidden3();
   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) => {
+      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: () => {
       if (props.disabled === true)
         return;
       setIsOpen(true);
     }, ref: triggerRef, type: "button", $active: isOpen, children: [
-      /* @__PURE__ */ jsx20(DropdownButtonText, { children: props.placeholder !== void 0 && preview === void 0 ? props.placeholder : preview }),
+      /* @__PURE__ */ jsx20(DropdownButtonText, { $isText3: isPlaceholder, children: isPlaceholder ? props.placeholder : preview }),
       /* @__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) => {
@@ -1296,7 +1311,7 @@ var DropdownButton = styled16.button.withConfig({
 }) => invalid === true && css9(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]));
 var DropdownButtonText = styled16.span.withConfig({
   componentId: "ccl__sc-1vnxmc8-3"
-})(["text-align:left;font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+})(["text-align:left;font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-", ");overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], (p) => p.$isText3 ? "text3" : "text2");
 var DropdownButtonIcon = styled16(Icon_default).withConfig({
   componentId: "ccl__sc-1vnxmc8-4"
 })(["color:var(--charcoal-text2);"]);
@@ -1324,7 +1339,7 @@ var StyledLi = styled17.li.withConfig({
 })(["list-style:none;"]);
 var ItemDiv = styled17.div.withConfig({
   componentId: "ccl__sc-p1vs75-1"
-})(["display:flex;align-items:center;min-height:40px;cursor:pointer;outline:none;padding-right:16px;padding-left:16px;&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}:hover,:focus,:focus-within{background-color:var(--charcoal-surface3);}"]);
+})(["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";
@@ -1363,7 +1378,7 @@ function useMenuItemHandleKeyDown(value) {
   const {
     setValue,
     root,
-    values
+    propsArray
   } = useContext7(MenuListContext);
   const setContextValue = useCallback6(() => {
     if (value !== void 0)
@@ -1373,24 +1388,33 @@ function useMenuItemHandleKeyDown(value) {
     if (e.key === "Enter") {
       setContextValue();
     } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      const isForward = e.key === "ArrowDown";
       e.preventDefault();
-      if (!values || value === void 0)
+      if (!propsArray || value === void 0)
         return;
-      const index = values.indexOf(value);
+      const values = propsArray.map((props) => props.value).filter((v) => v);
+      let index = values.indexOf(value);
       if (index === -1)
         return;
-      const focusValue = e.key === "ArrowUp" ? index - 1 < 0 ? values[values.length - 1] : values[index - 1] : index + 1 >= values.length ? values[0] : values[index + 1];
-      const next = root?.current?.querySelector(`[data-key='${focusValue}']`);
-      if (next instanceof HTMLElement) {
-        next.focus({
-          preventScroll: true
-        });
-        if (root?.current?.parentElement) {
-          handleFocusByKeyBoard(next, root.current.parentElement);
+      for (let n = 0; n < values.length; n++) {
+        const focusValue = isForward ? index + 1 >= values.length ? values[0] : values[index + 1] : index - 1 < 0 ? values[values.length - 1] : values[index - 1];
+        const next = root?.current?.querySelector(`[data-key='${focusValue}']`);
+        if (next instanceof HTMLElement) {
+          if (next.ariaDisabled === "true") {
+            index += isForward ? 1 : -1;
+            continue;
+          }
+          next.focus({
+            preventScroll: true
+          });
+          if (root?.current?.parentElement) {
+            handleFocusByKeyBoard(next, root.current.parentElement);
+          }
+          break;
         }
       }
     }
-  }, [setContextValue, value, root, values]);
+  }, [setContextValue, propsArray, value, root]);
   return [handleKeyDown, setContextValue];
 }
 
@@ -1452,7 +1476,7 @@ var StyledLi2 = styled19.li.withConfig({
 })(["display:block;"]);
 
 // src/components/SegmentedControl/index.tsx
-import { forwardRef as forwardRef15, memo as memo6, useMemo as useMemo2, useRef as useRef10 } from "react";
+import { forwardRef as forwardRef15, memo as memo6, useMemo as useMemo4, useRef as useRef10 } from "react";
 
 // ../../node_modules/@react-stately/form/dist/import.mjs
 import { createContext as $jcIOw$createContext, useMemo as $jcIOw$useMemo, useContext as $jcIOw$useContext, useState as $jcIOw$useState, useRef as $jcIOw$useRef, useEffect as $jcIOw$useEffect } from "react";
@@ -1702,7 +1726,7 @@ var useRadioContext = () => {
 // src/components/SegmentedControl/index.tsx
 import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 var SegmentedControl = forwardRef15(function SegmentedControlInner(props, ref) {
-  const ariaRadioGroupProps = useMemo2(() => ({
+  const ariaRadioGroupProps = useMemo4(() => ({
     ...props,
     isDisabled: props.disabled,
     isReadOnly: props.readonly,
@@ -1713,7 +1737,7 @@ var SegmentedControl = forwardRef15(function SegmentedControlInner(props, ref) {
   const {
     radioGroupProps
   } = useRadioGroup(ariaRadioGroupProps, state);
-  const segmentedControlItems = useMemo2(() => {
+  const segmentedControlItems = useMemo4(() => {
     return props.data.map((d) => typeof d === "string" ? {
       value: d,
       label: d
@@ -1725,7 +1749,7 @@ var SegmentedControl_default = memo6(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
   const ref = useRef10(null);
-  const ariaRadioProps = useMemo2(() => ({
+  const ariaRadioProps = useMemo4(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1759,7 +1783,7 @@ var SegmentedLabelInner = styled20.div.withConfig({
 })(["font-size:14px;line-height:22px;display:flow-root;&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
 
 // src/components/Checkbox/index.tsx
-import { forwardRef as forwardRef16, memo as memo7, useMemo as useMemo3 } from "react";
+import { forwardRef as forwardRef16, memo as memo7, useMemo as useMemo5 } from "react";
 import styled21, { css as css11 } from "styled-components";
 import { useCheckbox } from "@react-aria/checkbox";
 import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
@@ -1770,7 +1794,7 @@ var Checkbox = forwardRef16(function CheckboxInner({
   invalid = false,
   ...props
 }, ref) {
-  const ariaCheckboxProps = useMemo3(() => ({
+  const ariaCheckboxProps = useMemo5(() => ({
     ...props,
     isInValid: invalid,
     isSelected: props.checked,
@@ -1814,7 +1838,7 @@ var InputLabel = styled21.div.withConfig({
 })(["color:var(--charcoal-text2);font-size:14px;line-height:20px;"]);
 
 // src/components/TagItem/index.tsx
-import { forwardRef as forwardRef17, memo as memo8, useMemo as useMemo4 } from "react";
+import { forwardRef as forwardRef17, memo as memo8, useMemo as useMemo6 } from "react";
 import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
 import styled22, { css as css12 } from "styled-components";
 import { px as px2 } from "@charcoal-ui/utils";
@@ -1837,7 +1861,7 @@ var TagItem = forwardRef17(function TagItemInner({
   ...props
 }, _ref) {
   const ref = useObjectRef4(_ref);
-  const ariaButtonProps = useMemo4(() => ({
+  const ariaButtonProps = useMemo6(() => ({
     elementType: "a",
     isDisabled: disabled,
     ...props