@charcoal-ui/react 3.6.0 → 3.7.0

package/dist/index.esm.js

@@ -50,7 +50,6 @@ function CharcoalProvider({
 
 // src/components/Button/index.tsx
 import { forwardRef as forwardRef3 } from "react";
-import styled2, { css } from "styled-components";
 
 // src/_lib/index.ts
 function unreachable(value) {
@@ -74,6 +73,45 @@ function countCodePointsInString(string) {
   return Array.from(string).length;
 }
 
+// src/components/Button/lib/variantToFont.tsx
+function variantToFont(variant) {
+  switch (variant) {
+    case "Overlay":
+      return "text5";
+    case "Default":
+      return "text2";
+    case "Primary":
+      return "text5";
+    case "Navigation":
+      return "text5";
+    case "Danger":
+      return "text5";
+    default:
+      return unreachable(variant);
+  }
+}
+
+// src/components/Button/lib/variantToBackground.tsx
+function variantToBackground(variant) {
+  switch (variant) {
+    case "Overlay":
+      return "surface4";
+    case "Default":
+      return "surface3";
+    case "Primary":
+      return "brand";
+    case "Navigation":
+      return "surface6";
+    case "Danger":
+      return "assertive";
+    default:
+      return unreachable(variant);
+  }
+}
+
+// src/components/Button/StyledButton.tsx
+import styled2, { css } from "styled-components";
+
 // src/components/Clickable/index.tsx
 import * as React2 from "react";
 import styled from "styled-components";
@@ -144,31 +182,7 @@ var StyledClickableDiv = styled.div`
   }
 `;
 
-// src/components/Button/index.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Button = forwardRef3(function Button2({
-  children,
-  variant = "Default",
-  size = "M",
-  fullWidth: fixed = false,
-  disabled = false,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ jsx4(
-    StyledButton,
-    {
-      ...rest,
-      disabled,
-      $background: variantToBackground(variant),
-      $color: variantToFont(variant),
-      $size: size,
-      $fullWidth: fixed,
-      ref,
-      children
-    }
-  );
-});
-var Button_default = Button;
+// src/components/Button/StyledButton.tsx
 var horizontalPaddingSmall = css`
   padding-right: 16px;
   padding-left: 16px;
@@ -191,7 +205,6 @@ var StyledButton = styled2(Clickable_default)`
   font-weight: bold;
 
   ${(p) => p.$size === "M" ? horizontalPaddingMedium : horizontalPaddingSmall}
-
   color: var(--charcoal-${(p) => p.$color});
   background-color: var(--charcoal-${(p) => p.$background});
   transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;
@@ -219,42 +232,34 @@ var StyledButton = styled2(Clickable_default)`
   &[aria-disabled]:not([aria-disabled='false']) {
     opacity: 0.32;
   }
-
-  /* よく考えたらheight=32って定義が存在しないな... */
   height: ${(p) => p.$size === "M" ? 40 : 32}px;
 `;
-function variantToBackground(variant) {
-  switch (variant) {
-    case "Overlay":
-      return "surface4";
-    case "Default":
-      return "surface3";
-    case "Primary":
-      return "brand";
-    case "Navigation":
-      return "surface6";
-    case "Danger":
-      return "assertive";
-    default:
-      return unreachable(variant);
-  }
-}
-function variantToFont(variant) {
-  switch (variant) {
-    case "Overlay":
-      return "text5";
-    case "Default":
-      return "text2";
-    case "Primary":
-      return "text5";
-    case "Navigation":
-      return "text5";
-    case "Danger":
-      return "text5";
-    default:
-      return unreachable(variant);
-  }
-}
+
+// src/components/Button/index.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Button = forwardRef3(function Button2({
+  children,
+  variant = "Default",
+  size = "M",
+  fullWidth: fixed = false,
+  disabled = false,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsx4(
+    StyledButton,
+    {
+      ...rest,
+      disabled,
+      $background: variantToBackground(variant),
+      $color: variantToFont(variant),
+      $size: size,
+      $fullWidth: fixed,
+      ref,
+      children
+    }
+  );
+});
+var Button_default = Button;
 
 // src/components/IconButton/index.tsx
 import { forwardRef as forwardRef4 } from "react";
@@ -2179,6 +2184,7 @@ var DropdownButton = styled16.button`
   box-sizing: border-box;
   border: none;
   cursor: pointer;
+  gap: 4px;
 
   ${disabledSelector2} {
     cursor: default;
@@ -2189,7 +2195,7 @@ var DropdownButton = styled16.button`
   background-color: var(--charcoal-surface3);
   border-radius: 4px;
 
-  transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow, 0.2s background-color;
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
@@ -2199,6 +2205,9 @@ var DropdownButton = styled16.button`
       outline: none;
       box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
     }
+    &:hover {
+      background-color: var(--charcoal-surface3-hover);
+    }
   }
 
   ${({ invalid }) => invalid === true && css9`
@@ -2214,20 +2223,9 @@ var DropdownButtonText = styled16.span`
   line-height: 22px;
   display: flow-root;
   color: var(--charcoal-text2);
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 var DropdownButtonIcon = styled16(Icon_default)`
   color: var(--charcoal-text2);
@@ -2395,20 +2393,7 @@ var StyledSpan = styled18.span`
   font-size: 14px;
   line-height: 22px;
   color: var(--charcoal-text2);
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
+  padding: 9px 0;
 
   display: flex;
   align-items: center;
@@ -2449,7 +2434,240 @@ var StyledLi2 = styled19.li`
 
 // src/components/SegmentedControl/index.tsx
 import { forwardRef as forwardRef15, memo as memo6, useMemo as useMemo2, useRef as useRef10 } from "react";
-import { useRadioGroupState } from "react-stately";
+
+// ../../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";
+var $e5be200c675c3b3a$export$aca958c65c314e6c = {
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valueMissing: false,
+  valid: true
+};
+var $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE = {
+  ...$e5be200c675c3b3a$export$aca958c65c314e6c,
+  customError: true,
+  valid: false
+};
+var $e5be200c675c3b3a$export$dad6ae84456c676a = {
+  isInvalid: false,
+  validationDetails: $e5be200c675c3b3a$export$aca958c65c314e6c,
+  validationErrors: []
+};
+var $e5be200c675c3b3a$export$571b5131b7e65c11 = (0, $jcIOw$createContext)({});
+var $e5be200c675c3b3a$export$a763b9476acd3eb = "__formValidationState" + Date.now();
+function $e5be200c675c3b3a$export$fc1a364ae1f3ff10(props) {
+  if (props[$e5be200c675c3b3a$export$a763b9476acd3eb]) {
+    let { realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation } = props[$e5be200c675c3b3a$export$a763b9476acd3eb];
+    return {
+      realtimeValidation,
+      displayValidation,
+      updateValidation,
+      resetValidation,
+      commitValidation
+    };
+  }
+  return $e5be200c675c3b3a$var$useFormValidationStateImpl(props);
+}
+function $e5be200c675c3b3a$var$useFormValidationStateImpl(props) {
+  let { isInvalid, validationState, name, value, builtinValidation, validate, validationBehavior = "aria" } = props;
+  if (validationState)
+    isInvalid || (isInvalid = validationState === "invalid");
+  let controlledError = isInvalid ? {
+    isInvalid: true,
+    validationErrors: [],
+    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
+  } : null;
+  let clientError = (0, $jcIOw$useMemo)(() => $e5be200c675c3b3a$var$getValidationResult($e5be200c675c3b3a$var$runValidate(validate, value)), [
+    validate,
+    value
+  ]);
+  if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid)
+    builtinValidation = null;
+  let serverErrors = (0, $jcIOw$useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
+  let serverErrorMessages = (0, $jcIOw$useMemo)(() => {
+    if (name)
+      return Array.isArray(name) ? name.flatMap((name2) => $e5be200c675c3b3a$var$asArray(serverErrors[name2])) : $e5be200c675c3b3a$var$asArray(serverErrors[name]);
+    return [];
+  }, [
+    serverErrors,
+    name
+  ]);
+  let [lastServerErrors, setLastServerErrors] = (0, $jcIOw$useState)(serverErrors);
+  let [isServerErrorCleared, setServerErrorCleared] = (0, $jcIOw$useState)(false);
+  if (serverErrors !== lastServerErrors) {
+    setLastServerErrors(serverErrors);
+    setServerErrorCleared(false);
+  }
+  let serverError = (0, $jcIOw$useMemo)(() => $e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [
+    isServerErrorCleared,
+    serverErrorMessages
+  ]);
+  let nextValidation = (0, $jcIOw$useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let [currentValidity, setCurrentValidity] = (0, $jcIOw$useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let lastError = (0, $jcIOw$useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let commitValidation = () => {
+    if (!commitQueued)
+      return;
+    setCommitQueued(false);
+    let error = clientError || builtinValidation || nextValidation.current;
+    if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
+      lastError.current = error;
+      setCurrentValidity(error);
+    }
+  };
+  let [commitQueued, setCommitQueued] = (0, $jcIOw$useState)(false);
+  (0, $jcIOw$useEffect)(commitValidation);
+  let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $e5be200c675c3b3a$export$dad6ae84456c676a;
+  let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
+  return {
+    realtimeValidation,
+    displayValidation,
+    updateValidation(value2) {
+      if (validationBehavior === "aria" && !$e5be200c675c3b3a$var$isEqualValidation(currentValidity, value2))
+        setCurrentValidity(value2);
+      else
+        nextValidation.current = value2;
+    },
+    resetValidation() {
+      let error = $e5be200c675c3b3a$export$dad6ae84456c676a;
+      if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
+        lastError.current = error;
+        setCurrentValidity(error);
+      }
+      if (validationBehavior === "native")
+        setCommitQueued(false);
+      setServerErrorCleared(true);
+    },
+    commitValidation() {
+      if (validationBehavior === "native")
+        setCommitQueued(true);
+      setServerErrorCleared(true);
+    }
+  };
+}
+function $e5be200c675c3b3a$var$asArray(v) {
+  if (!v)
+    return [];
+  return Array.isArray(v) ? v : [
+    v
+  ];
+}
+function $e5be200c675c3b3a$var$runValidate(validate, value) {
+  if (typeof validate === "function") {
+    let e = validate(value);
+    if (e && typeof e !== "boolean")
+      return $e5be200c675c3b3a$var$asArray(e);
+  }
+  return [];
+}
+function $e5be200c675c3b3a$var$getValidationResult(errors) {
+  return errors.length ? {
+    isInvalid: true,
+    validationErrors: errors,
+    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
+  } : null;
+}
+function $e5be200c675c3b3a$var$isEqualValidation(a, b) {
+  if (a === b)
+    return true;
+  return a && b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a2, i) => a2 === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
+}
+
+// ../../node_modules/@react-stately/utils/dist/import.mjs
+import { useState as $6imuh$useState, useRef as $6imuh$useRef, useEffect as $6imuh$useEffect, useCallback as $6imuh$useCallback } from "react";
+function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
+  let [stateValue, setStateValue] = (0, $6imuh$useState)(value || defaultValue);
+  let isControlledRef = (0, $6imuh$useRef)(value !== void 0);
+  let isControlled = value !== void 0;
+  (0, $6imuh$useEffect)(() => {
+    let wasControlled = isControlledRef.current;
+    if (wasControlled !== isControlled)
+      console.warn(`WARN: A component changed from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`);
+    isControlledRef.current = isControlled;
+  }, [
+    isControlled
+  ]);
+  let currentValue = isControlled ? value : stateValue;
+  let setValue = (0, $6imuh$useCallback)((value2, ...args) => {
+    let onChangeCaller = (value3, ...onChangeArgs) => {
+      if (onChange) {
+        if (!Object.is(currentValue, value3))
+          onChange(value3, ...onChangeArgs);
+      }
+      if (!isControlled)
+        currentValue = value3;
+    };
+    if (typeof value2 === "function") {
+      console.warn("We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320");
+      let updateFunction = (oldValue, ...functionArgs) => {
+        let interceptedValue = value2(isControlled ? currentValue : oldValue, ...functionArgs);
+        onChangeCaller(interceptedValue, ...args);
+        if (!isControlled)
+          return interceptedValue;
+        return oldValue;
+      };
+      setStateValue(updateFunction);
+    } else {
+      if (!isControlled)
+        setStateValue(value2);
+      onChangeCaller(value2, ...args);
+    }
+  }, [
+    isControlled,
+    currentValue,
+    onChange
+  ]);
+  return [
+    currentValue,
+    setValue
+  ];
+}
+
+// ../../node_modules/@react-stately/radio/dist/import.mjs
+import { useMemo as $fQ2SF$useMemo, useState as $fQ2SF$useState } from "react";
+var $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
+var $a54cdc5c1942b639$var$i = 0;
+function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
+  let name = (0, $fQ2SF$useMemo)(() => props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [
+    props.name
+  ]);
+  var _props_defaultValue;
+  let [selectedValue, setSelected] = (0, $458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
+  let [lastFocusedValue, setLastFocusedValue] = (0, $fQ2SF$useState)(null);
+  let validation = (0, $e5be200c675c3b3a$export$fc1a364ae1f3ff10)({
+    ...props,
+    value: selectedValue
+  });
+  let setSelectedValue = (value) => {
+    if (!props.isReadOnly && !props.isDisabled) {
+      setSelected(value);
+      validation.commitValidation();
+    }
+  };
+  let isInvalid = validation.displayValidation.isInvalid;
+  return {
+    ...validation,
+    name,
+    selectedValue,
+    setSelectedValue,
+    lastFocusedValue,
+    setLastFocusedValue,
+    isDisabled: props.isDisabled || false,
+    isReadOnly: props.isReadOnly || false,
+    isRequired: props.isRequired || false,
+    validationState: props.validationState || (isInvalid ? "invalid" : null),
+    isInvalid
+  };
+}
+
+// src/components/SegmentedControl/index.tsx
 import {
   useRadio,
   useRadioGroup
@@ -2487,7 +2705,7 @@ var SegmentedControl = forwardRef15(
       }),
       [props]
     );
-    const state = useRadioGroupState(ariaRadioGroupProps);
+    const state = $a54cdc5c1942b639$export$bca9d026f8e704eb(ariaRadioGroupProps);
     const { radioGroupProps } = useRadioGroup(ariaRadioGroupProps, state);
     const segmentedControlItems = useMemo2(() => {
       return props.data.map(