@charcoal-ui/react 3.4.0 → 3.5.0

package/dist/index.esm.js

@@ -789,9 +789,9 @@ var SwitchInput = styled7.input.attrs({
 // src/components/TextField/index.tsx
 import { useTextField } from "@react-aria/textfield";
 import { useVisuallyHidden } from "@react-aria/visually-hidden";
-import { useCallback as useCallback3, useEffect, useRef, useState } from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useRef, useState } from "react";
 import * as React5 from "react";
-import styled9 from "styled-components";
+import styled9, { css as css2 } from "styled-components";
 
 // src/components/FieldLabel/index.tsx
 import * as React4 from "react";
@@ -843,6 +843,25 @@ var FieldLabelWrapper = styled8.div`
   }
 `;
 
+// src/components/TextField/useFocusWithClick.tsx
+import { useEffect } from "react";
+function useFocusWithClick(containerRef, inputRef) {
+  useEffect(() => {
+    const el = containerRef.current;
+    if (el) {
+      const handleDown = (e) => {
+        if (e.target !== inputRef.current) {
+          inputRef.current?.focus();
+        }
+      };
+      el.addEventListener("click", handleDown);
+      return () => {
+        el.removeEventListener("click", handleDown);
+      };
+    }
+  });
+}
+
 // src/components/TextField/index.tsx
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var TextField = React5.forwardRef(
@@ -864,13 +883,9 @@ var TextField = React5.forwardRef(
     } = props;
     const { visuallyHiddenProps } = useVisuallyHidden();
     const ariaRef = useRef(null);
-    const prefixRef = useRef(null);
-    const suffixRef = useRef(null);
     const [count, setCount] = useState(
       countCodePointsInString(props.value ?? "")
     );
-    const [prefixWidth, setPrefixWidth] = useState(0);
-    const [suffixWidth, setSuffixWidth] = useState(0);
     const nonControlled = props.value === void 0;
     const handleChange = useCallback3(
       (value) => {
@@ -885,7 +900,7 @@ var TextField = React5.forwardRef(
       },
       [maxLength, nonControlled, onChange]
     );
-    useEffect(() => {
+    useEffect2(() => {
       setCount(countCodePointsInString(props.value ?? ""));
     }, [props.value]);
     const { inputProps, labelProps, descriptionProps, errorMessageProps } = useTextField(
@@ -901,24 +916,8 @@ var TextField = React5.forwardRef(
       },
       ariaRef
     );
-    useEffect(() => {
-      const prefixObserver = new ResizeObserver((entries) => {
-        setPrefixWidth(entries[0].contentRect.width);
-      });
-      const suffixObserver = new ResizeObserver((entries) => {
-        setSuffixWidth(entries[0].contentRect.width);
-      });
-      if (prefixRef.current !== null) {
-        prefixObserver.observe(prefixRef.current);
-      }
-      if (suffixRef.current !== null) {
-        suffixObserver.observe(suffixRef.current);
-      }
-      return () => {
-        suffixObserver.disconnect();
-        prefixObserver.disconnect();
-      };
-    }, []);
+    const containerRef = useRef(null);
+    useFocusWithClick(containerRef, ariaRef);
     return /* @__PURE__ */ jsxs6(TextFieldRoot, { className, isDisabled: disabled, children: [
       /* @__PURE__ */ jsx10(
         TextFieldLabel,
@@ -931,23 +930,31 @@ var TextField = React5.forwardRef(
           ...!showLabel ? visuallyHiddenProps : {}
         }
       ),
-      /* @__PURE__ */ jsxs6(StyledInputContainer, { children: [
-        /* @__PURE__ */ jsx10(PrefixContainer, { ref: prefixRef, children: /* @__PURE__ */ jsx10(Affix, { children: prefix }) }),
-        /* @__PURE__ */ jsx10(
-          StyledInput,
-          {
-            ref: mergeRefs(forwardRef18, ariaRef),
-            invalid,
-            extraLeftPadding: prefixWidth,
-            extraRightPadding: suffixWidth,
-            ...inputProps
-          }
-        ),
-        /* @__PURE__ */ jsxs6(SuffixContainer, { ref: suffixRef, children: [
-          /* @__PURE__ */ jsx10(Affix, { children: suffix }),
-          showCount && /* @__PURE__ */ jsx10(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
-        ] })
-      ] }),
+      /* @__PURE__ */ jsxs6(
+        StyledInputContainer,
+        {
+          ref: containerRef,
+          invalid,
+          "aria-disabled": disabled === true ? true : void 0,
+          hasPrefix: prefix != null,
+          hasSuffix: suffix != null || showCount,
+          children: [
+            prefix && /* @__PURE__ */ jsx10(PrefixContainer, { children: prefix }),
+            /* @__PURE__ */ jsx10(
+              StyledInput,
+              {
+                ref: mergeRefs(forwardRef18, ariaRef),
+                invalid,
+                ...inputProps
+              }
+            ),
+            (suffix || showCount) && /* @__PURE__ */ jsxs6(SuffixContainer, { children: [
+              suffix,
+              showCount && /* @__PURE__ */ jsx10(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+            ] })
+          ]
+        }
+      ),
       assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx10(
         AssistiveText,
         {
@@ -967,34 +974,53 @@ var TextFieldRoot = styled9.div`
   ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
 `;
 var TextFieldLabel = styled9(FieldLabel_default)`
-  ${theme((o) => o.margin.bottom(8))}
+  margin-bottom: 8px;
 `;
 var StyledInputContainer = styled9.div`
-  height: 40px;
   display: grid;
-  position: relative;
+  grid-template-columns: ${(p) => [p.hasPrefix && "auto", "1fr", p.hasSuffix && "auto"].filter(Boolean).join(" ")};
+  height: 40px;
+  transition: 0.2s background-color, 0.2s box-shadow;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+  gap: 4px;
+  padding: 0 8px;
+  line-height: 22px;
+  font-size: 14px;
+
+  :not(:disabled):not([aria-disabled]):hover,
+  [aria-disabled='false']:hover {
+    background-color: var(--charcoal-surface3-hover);
+  }
+
+  :not(:disabled):not([aria-disabled]):active,
+  [aria-disabled='false']:active {
+    outline: none;
+    box-shadow: 0 0 0 4px
+      ${(p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`};
+  }
+
+  :focus-within {
+    outline: none;
+    box-shadow: 0 0 0 4px
+      ${(p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`};
+  }
+
+  ${(p) => p.invalid && css2`
+      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+    `}
 `;
-var PrefixContainer = styled9.span`
-  position: absolute;
-  top: 50%;
-  left: 8px;
-  transform: translateY(-50%);
-  z-index: 1;
+var PrefixContainer = styled9.div`
+  display: flex;
+  padding-left: 8px;
+  align-items: center;
 `;
 var SuffixContainer = styled9.span`
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  transform: translateY(-50%);
-
   display: flex;
+  align-items: center;
   gap: 8px;
 `;
-var Affix = styled9.span`
-  user-select: none;
-
-  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text2])}
-`;
 var StyledInput = styled9.input`
   border: none;
   box-sizing: border-box;
@@ -1008,41 +1034,37 @@ var StyledInput = styled9.input`
   height: calc(100% / 0.875);
   font-size: calc(14px / 0.875);
   line-height: calc(22px / 0.875);
-  padding-left: calc((8px + ${(p) => p.extraLeftPadding}px) / 0.875);
-  padding-right: calc((8px + ${(p) => p.extraRightPadding}px) / 0.875);
+  padding-left: 0;
+  padding-right: 0;
   border-radius: calc(4px / 0.875);
 
   /* Display box-shadow for iOS Safari */
   appearance: none;
+  background: transparent;
 
-  ${(p) => theme((o) => [
-  o.bg.surface3.hover,
-  o.outline.default.focus,
-  p.invalid && o.outline.assertive,
-  o.font.text2
-])}
-
+  color: var(--charcoal-text2);
   &::placeholder {
-    ${theme((o) => o.font.text3)}
+    color: var(--charcoal-text3);
   }
 `;
 var SingleLineCounter = styled9.span`
-  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
+  line-height: 22px;
+  font-size: 14px;
+  color: var(--charcoal-text3);
 `;
 var AssistiveText = styled9.p`
-  ${(p) => theme((o) => [
-  o.typography(14),
-  o.margin.top(8),
-  o.margin.bottom(0),
-  o.font[p.invalid ? "assertive" : "text1"]
-])}
+  font-size: 14px;
+  line-height: 22px;
+  margin-top: 4px;
+  margin-bottom: -4px;
+  color: ${(p) => `var(--charcoal-${p.invalid ? `assertive` : `text2`})`};
 `;
 
 // src/components/TextArea/index.tsx
 import { useTextField as useTextField2 } from "@react-aria/textfield";
 import { useVisuallyHidden as useVisuallyHidden2 } from "@react-aria/visually-hidden";
-import { forwardRef as forwardRef10, useCallback as useCallback4, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
-import styled10, { css as css2 } from "styled-components";
+import { forwardRef as forwardRef10, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import styled10, { css as css3 } from "styled-components";
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var TextArea = forwardRef10(
   function TextAreaInner({ onChange, ...props }, forwardRef18) {
@@ -1093,7 +1115,7 @@ var TextArea = forwardRef10(
       },
       [autoHeight, maxLength, nonControlled, onChange, syncHeight]
     );
-    useEffect2(() => {
+    useEffect3(() => {
       setCount(countCodePointsInString(props.value ?? ""));
     }, [props.value]);
     const { inputProps, labelProps, descriptionProps, errorMessageProps } = useTextField2(
@@ -1109,14 +1131,16 @@ var TextArea = forwardRef10(
       },
       ariaRef
     );
-    useEffect2(() => {
+    useEffect3(() => {
       if (autoHeight && textareaRef.current !== null) {
         syncHeight(textareaRef.current);
       }
     }, [autoHeight, syncHeight]);
+    const containerRef = useRef2(null);
+    useFocusWithClick(containerRef, ariaRef);
     return /* @__PURE__ */ jsxs7(TextFieldRoot2, { className, isDisabled: disabled, children: [
       /* @__PURE__ */ jsx11(
-        TextFieldLabel2,
+        TextFieldLabel,
         {
           label,
           requiredText,
@@ -1129,8 +1153,10 @@ var TextArea = forwardRef10(
       /* @__PURE__ */ jsxs7(
         StyledTextareaContainer,
         {
+          ref: containerRef,
           invalid,
           rows: showCount ? rows + 1 : rows,
+          "aria-disabled": disabled === true ? "true" : void 0,
           children: [
             /* @__PURE__ */ jsx11(
               StyledTextarea,
@@ -1146,7 +1172,7 @@ var TextArea = forwardRef10(
         }
       ),
       assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx11(
-        AssistiveText2,
+        AssistiveText,
         {
           invalid,
           ...invalid ? errorMessageProps : descriptionProps,
@@ -1163,29 +1189,32 @@ var TextFieldRoot2 = styled10.div`
 
   ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
 `;
-var TextFieldLabel2 = styled10(FieldLabel_default)`
-  ${theme((o) => o.margin.bottom(8))}
-`;
 var StyledTextareaContainer = styled10.div`
   position: relative;
   overflow: hidden;
-  padding: 0 8px;
 
-  ${(p) => theme((o) => [
-  o.bg.surface3.hover,
-  o.outline.default.focus,
-  p.invalid && o.outline.assertive,
-  o.font.text2,
-  o.borderRadius(4)
-])}
-
-  &:focus-within {
-    ${(p) => theme((o) => p.invalid ? o.outline.assertive : o.outline.default)}
-  }
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+  transition: 0.2s background-color, 0.2s box-shadow;
 
-  ${({ rows }) => css2`
+  ${({ rows }) => css3`
     height: calc(22px * ${rows} + 18px);
   `};
+
+  :not([aria-disabled]):hover,
+  [aria-disabled='false']:hover {
+    background-color: var(--charcoal-surface3-hover);
+  }
+  :focus-within {
+    outline: none;
+    box-shadow: 0 0 0 4px
+      ${(p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`};
+  }
+
+  ${(p) => p.invalid && css3`
+      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+    `}
 `;
 var StyledTextarea = styled10.textarea`
   border: none;
@@ -1193,6 +1222,7 @@ var StyledTextarea = styled10.textarea`
   resize: none;
   font-family: inherit;
   color: inherit;
+  box-sizing: border-box;
 
   /* Prevent zooming for iOS Safari */
   transform-origin: top left;
@@ -1200,10 +1230,11 @@ var StyledTextarea = styled10.textarea`
   width: calc(100% / 0.875);
   font-size: calc(14px / 0.875);
   line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) 0 ${(p) => p.noBottomPadding ? 0 : ""};
+  padding: calc(9px / 0.875) calc(8px / 0.875)
+    ${(p) => p.noBottomPadding ? 0 : ""};
 
-  ${({ rows = 1 }) => css2`
-    height: calc(22px / 0.875 * ${rows});
+  ${({ rows = 1, noBottomPadding }) => css3`
+    height: calc(22px / 0.875 * ${rows} + ${noBottomPadding ? 9 : 20}px);
   `};
 
   /* Display box-shadow for iOS Safari */
@@ -1212,31 +1243,17 @@ var StyledTextarea = styled10.textarea`
   background: none;
 
   &::placeholder {
-    ${theme((o) => o.font.text3)}
+    color: var(--charcoal-text3);
   }
-
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  /* Hide scrollbar for IE, Edge and Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
 `;
 var MultiLineCounter = styled10.span`
   position: absolute;
   bottom: 9px;
   right: 8px;
 
-  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
-`;
-var AssistiveText2 = styled10.p`
-  ${(p) => theme((o) => [
-  o.typography(14),
-  o.margin.top(8),
-  o.margin.bottom(0),
-  o.font[p.invalid ? "assertive" : "text1"]
-])}
+  line-height: 22px;
+  font-size: 14px;
+  color: var(--charcoal-text3);
 `;
 
 // src/components/Icon/index.tsx
@@ -1265,7 +1282,7 @@ import {
   Overlay,
   useModalOverlay
 } from "@react-aria/overlays";
-import styled12, { css as css4, useTheme } from "styled-components";
+import styled12, { css as css5, useTheme } from "styled-components";
 import { maxWidth as maxWidth2 } from "@charcoal-ui/utils";
 import { useMedia } from "@charcoal-ui/styled";
 import { animated as animated2, useTransition, easings } from "react-spring";
@@ -1273,7 +1290,7 @@ import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
 
 // src/components/Modal/Dialog/index.tsx
 import { forwardRef as forwardRef12 } from "react";
-import styled11, { css as css3 } from "styled-components";
+import styled11, { css as css4 } from "styled-components";
 import { useDialog } from "@react-aria/dialog";
 
 // ../foundation/src/grid.ts
@@ -1352,12 +1369,12 @@ var AnimatedStyledDialogDiv = animated(styled11.div`
   @media ${({ theme: theme3 }) => maxWidth(theme3.breakpoint.screen1)} {
     max-width: 440px;
     width: calc(100% - 48px);
-    ${(p) => p.bottomSheet !== false && css3`
+    ${(p) => p.bottomSheet !== false && css4`
         max-width: unset;
         width: 100%;
         border-radius: 0;
         margin: auto 0 0 0;
-        ${p.bottomSheet === "full" && css3`
+        ${p.bottomSheet === "full" && css4`
           min-height: 100%;
         `}
       `}
@@ -1498,7 +1515,7 @@ var ModalBackground = animated2(styled12.div`
   background-color: ${({ theme: theme3 }) => theme3.color.surface4};
 
   @media ${({ theme: theme3 }) => maxWidth2(theme3.breakpoint.screen1)} {
-    ${(p) => p.$bottomSheet !== false && css4`
+    ${(p) => p.$bottomSheet !== false && css5`
         padding: 0;
       `}
   }
@@ -1521,7 +1538,7 @@ var ModalHeading = styled12.h3`
 `;
 
 // src/components/Modal/ModalPlumbing.tsx
-import styled13, { css as css5 } from "styled-components";
+import styled13, { css as css6 } from "styled-components";
 import { useContext as useContext5 } from "react";
 import { maxWidth as maxWidth3 } from "@charcoal-ui/utils";
 import { jsx as jsx15 } from "react/jsx-runtime";
@@ -1535,7 +1552,7 @@ var ModalHeaderRoot = styled13.div`
   align-content: center;
   justify-content: center;
   @media ${({ theme: theme3 }) => maxWidth3(theme3.breakpoint.screen1)} {
-    ${(p) => p.$bottomSheet !== false && css5`
+    ${(p) => p.$bottomSheet !== false && css6`
         height: 48px;
       `}
   }
@@ -1637,7 +1654,7 @@ import styled17 from "styled-components";
 import { disabledSelector as disabledSelector4 } from "@charcoal-ui/utils";
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-import { useEffect as useEffect5, useRef as useRef7 } from "react";
+import { useEffect as useEffect6, useRef as useRef7 } from "react";
 
 // src/components/DropdownSelector/Popover/index.tsx
 import { useContext as useContext6, useRef as useRef6 } from "react";
@@ -1645,9 +1662,9 @@ import { DismissButton, Overlay as Overlay2, usePopover } from "@react-aria/over
 import styled15 from "styled-components";
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 function usePreventScroll(element, isOpen) {
-  useEffect4(() => {
+  useEffect5(() => {
     if (isOpen && element) {
       const defaultPaddingRight = element.style.paddingRight;
       const defaultOverflow = element.style.overflow;
@@ -1722,12 +1739,12 @@ var DropdownPopoverDiv = styled15.div`
 import { jsx as jsx18 } from "react/jsx-runtime";
 function DropdownPopover({ children, ...props }) {
   const ref = useRef7(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (props.isOpen && ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
     }
   }, [props.triggerRef, props.isOpen]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (props.isOpen && props.value !== void 0) {
       const windowScrollY = window.scrollY;
       const windowScrollX = window.scrollX;
@@ -2263,7 +2280,7 @@ var SegmentedLabelInner = styled21.div`
 
 // src/components/Checkbox/index.tsx
 import { forwardRef as forwardRef16, memo as memo7, useMemo as useMemo3 } from "react";
-import styled22, { css as css6 } from "styled-components";
+import styled22, { css as css7 } from "styled-components";
 import { useCheckbox } from "@react-aria/checkbox";
 import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "react-stately";
@@ -2296,7 +2313,7 @@ var Checkbox = forwardRef16(
   }
 );
 var Checkbox_default = memo7(Checkbox);
-var hiddenCss = css6`
+var hiddenCss = css7`
   visibility: hidden;
 `;
 var InputRoot = styled22.label`
@@ -2362,7 +2379,7 @@ var InputLabel = styled22.div`
 // src/components/TagItem/index.tsx
 import { forwardRef as forwardRef17, memo as memo8, useMemo as useMemo4 } from "react";
 import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
-import styled23, { css as css7 } from "styled-components";
+import styled23, { css as css8 } from "styled-components";
 import { disabledSelector as disabledSelector7, px as px4 } from "@charcoal-ui/utils";
 import { useButton } from "@react-aria/button";
 import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -2452,7 +2469,7 @@ var Background = styled23.div`
   background-color: ${({ bgColor }) => bgColor};
   ${({ status }) => status === "inactive" && theme((o) => o.bg.surface3)}
 
-  ${({ bgImage }) => bgImage !== void 0 && css7`
+  ${({ bgImage }) => bgImage !== void 0 && css8`
       ${theme((o) => [o.bg.surface4])}
       &::before {
         content: '';
@@ -2474,10 +2491,10 @@ var Inner = styled23.div`
   align-items: center;
   z-index: 2;
 `;
-var labelCSS = css7`
+var labelCSS = css8`
   ${theme((o) => [o.typography(14).bold])}
 `;
-var translateLabelCSS = css7`
+var translateLabelCSS = css8`
   display: flex;
   align-items: center;
   flex-direction: column;