@charcoal-ui/react 3.7.0 → 3.8.0

package/dist/index.esm.js

@@ -183,6 +183,7 @@ var StyledClickableDiv = styled.div`
 `;
 
 // src/components/Button/StyledButton.tsx
+import { focusVisibleFocusRingCss } from "@charcoal-ui/styled";
 var horizontalPaddingSmall = css`
   padding-right: 16px;
   padding-left: 16px;
@@ -211,21 +212,21 @@ var StyledButton = styled2(Clickable_default)`
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
-    &:active,
-    &:focus,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
-
-    &:hover {
-      color: var(--charcoal-${(p) => p.$color}-hover);
-      background-color: var(--charcoal-${(p) => p.$background}-hover);
-    }
-    &:active {
-      color: var(--charcoal-${(p) => p.$color}-press);
-      background-color: var(--charcoal-${(p) => p.$background}-press);
-    }
+    ${focusVisibleFocusRingCss}
+
+    ${({ $isActive: $active, $color, $background }) => $active ? css`
+            color: var(--charcoal-${$color}-press);
+            background-color: var(--charcoal-${$background}-press);
+          ` : css`
+            &:hover {
+              color: var(--charcoal-${$color}-hover);
+              background-color: var(--charcoal-${$background}-hover);
+            }
+            &:active {
+              color: var(--charcoal-${$color}-press);
+              background-color: var(--charcoal-${$background}-press);
+            }
+          `}
   }
 
   &:disabled,
@@ -243,6 +244,7 @@ var Button = forwardRef3(function Button2({
   size = "M",
   fullWidth: fixed = false,
   disabled = false,
+  isActive = false,
   ...rest
 }, ref) {
   return /* @__PURE__ */ jsx4(
@@ -254,6 +256,7 @@ var Button = forwardRef3(function Button2({
       $color: variantToFont(variant),
       $size: size,
       $fullWidth: fixed,
+      $isActive: isActive,
       ref,
       children
     }
@@ -263,12 +266,29 @@ var Button_default = Button;
 
 // src/components/IconButton/index.tsx
 import { forwardRef as forwardRef4 } from "react";
-import styled3 from "styled-components";
+import styled3, { css as css2 } from "styled-components";
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss2 } from "@charcoal-ui/styled";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var IconButton = forwardRef4(
-  function IconButtonInner({ variant = "Default", size = "M", icon, ...rest }, ref) {
+  function IconButtonInner({
+    variant = "Default",
+    size = "M",
+    icon,
+    isActive = false,
+    ...rest
+  }, ref) {
     validateIconSize(size, icon);
-    return /* @__PURE__ */ jsx5(StyledIconButton, { ...rest, ref, $size: size, $variant: variant, children: /* @__PURE__ */ jsx5("pixiv-icon", { name: icon }) });
+    return /* @__PURE__ */ jsx5(
+      StyledIconButton,
+      {
+        ...rest,
+        ref,
+        $size: size,
+        $variant: variant,
+        $isActive: isActive,
+        children: /* @__PURE__ */ jsx5("pixiv-icon", { name: icon })
+      }
+    );
   }
 );
 var IconButton_default = IconButton;
@@ -287,22 +307,17 @@ var StyledIconButton = styled3(Clickable_default).attrs(styledProps)`
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
-    &:hover {
-      background-color: var(
-        ${({ $background }) => `--charcoal-${$background}-hover`}
-      );
-    }
-    &:active {
-      background-color: var(
-        ${({ $background }) => `--charcoal-${$background}-press`}
-      );
-    }
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
+    ${({ $isActive, $background }) => $isActive ? css2`
+            background-color: var(--charcoal-${$background}-press);
+          ` : css2`
+            &:hover {
+              background-color: var(--charcoal-${$background}-hover);
+            }
+            &:active {
+              background-color: var(--charcoal-${$background}-press);
+            }
+          `}
+    ${focusVisibleFocusRingCss2}
   }
 
   &:disabled,
@@ -369,8 +384,9 @@ function validateIconSize(size, icon) {
 // src/components/Radio/index.tsx
 import { memo, forwardRef as forwardRef5, useCallback, useContext as useContext2 } from "react";
 import * as React3 from "react";
-import styled4, { css as css2 } from "styled-components";
+import styled4 from "styled-components";
 import warning from "warning";
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss3 } from "@charcoal-ui/styled";
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var Radio = forwardRef5(function RadioInner({ value, disabled = false, children, className }, ref) {
   const {
@@ -401,7 +417,7 @@ var Radio = forwardRef5(function RadioInner({ value, disabled = false, children,
         name,
         value,
         checked: isSelected,
-        invalid,
+        "aria-invalid": invalid,
         onChange: handleChange,
         disabled: isDisabled || isReadonly,
         ref
@@ -442,21 +458,18 @@ var RadioInput = styled4.input.attrs({ type: "radio" })`
 
     &:not(:disabled):not([aria-disabled]),
     &[aria-disabled='false'] {
-      ${({ invalid = false }) => invalid && css2`
-          box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-        `}
-
       &:hover {
         background-color: var(--charcoal-surface1-hover);
       }
       &:active {
         background-color: var(--charcoal-surface1-press);
       }
-      &:focus,
-      &:active,
-      &:focus-visible {
-        outline: none;
-        box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+      ${focusVisibleFocusRingCss3}
+      &[aria-invalid='true'] {
+        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+        &:focus {
+          box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+        }
       }
     }
 
@@ -600,6 +613,7 @@ var MultiSelectGroupContext = createContext3({
 });
 
 // src/components/MultiSelect/index.tsx
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss4 } from "@charcoal-ui/styled";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var MultiSelect = forwardRef6(
   function MultiSelectInner({
@@ -744,6 +758,8 @@ var MultiSelectInput = styled5.input.attrs({ type: "checkbox" })`
       }
     }
 
+    ${focusVisibleFocusRingCss4}
+
     ${({ invalid, overlay }) => invalid && !overlay && css3`
         &:not(:disabled):not([aria-disabled]),
         &[aria-disabled='false'] {
@@ -829,6 +845,7 @@ import { useMemo, memo as memo3, forwardRef as forwardRef7 } from "react";
 import { useToggleState } from "react-stately";
 import styled6 from "styled-components";
 import { useObjectRef } from "@react-aria/utils";
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss5 } from "@charcoal-ui/styled";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var SwitchCheckbox = forwardRef7(
   function SwitchCheckboxInner(props, external) {
@@ -866,10 +883,6 @@ var Label = styled6.label`
     opacity: 0.32;
     cursor: default;
   }
-
-  :active > input {
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
 `;
 var LabelInner = styled6.div`
   font-size: 14px;
@@ -900,9 +913,7 @@ var SwitchInput = styled6.input.attrs({ type: "checkbox" })`
   :active {
     background-color: var(--charcoal-text4-press);
   }
-  :focus {
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
+  ${focusVisibleFocusRingCss5}
 
   &::after {
     content: '';
@@ -1213,13 +1224,6 @@ var StyledInputContainer = styled8.div`
     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
@@ -2104,6 +2108,7 @@ var StyledUl = styled15.ul`
 `;
 
 // src/components/DropdownSelector/index.tsx
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss6 } from "@charcoal-ui/styled";
 import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var defaultRequiredText = "*\u5FC5\u9808";
 function DropdownSelector(props) {
@@ -2132,6 +2137,7 @@ function DropdownSelector(props) {
         },
         ref: triggerRef,
         type: "button",
+        $active: isOpen,
         children: [
           /* @__PURE__ */ jsx20(DropdownButtonText, { children: props.placeholder !== void 0 && preview === void 0 ? props.placeholder : preview }),
           /* @__PURE__ */ jsx20(DropdownButtonIcon, { name: "16/Menu" })
@@ -2199,15 +2205,17 @@ var DropdownButton = styled16.button`
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
-    &:hover {
-      background-color: var(--charcoal-surface3-hover);
-    }
+    ${focusVisibleFocusRingCss6}
+    ${({ $active }) => $active === true ? css9`
+            background-color: var(--charcoal-surface3-press);
+          ` : css9`
+            &:hover {
+              background-color: var(--charcoal-surface3-hover);
+            }
+            &:active {
+              background-color: var(--charcoal-surface3-press);
+            }
+          `}
   }
 
   ${({ invalid }) => invalid === true && css9`
@@ -2837,6 +2845,7 @@ import { useCheckbox } from "@react-aria/checkbox";
 import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "react-stately";
 import { disabledSelector as disabledSelector3 } from "@charcoal-ui/utils";
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss7 } from "@charcoal-ui/styled";
 import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 var Checkbox = forwardRef16(
   function CheckboxInner({ invalid = false, ...props }, ref) {
@@ -2914,18 +2923,7 @@ var CheckboxInput = styled21.input`
 
     &:not(:disabled):not([aria-disabled]),
     &[aria-disabled='false'] {
-      &:focus,
-      &:active {
-        outline: none;
-        box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-        &:not(:focus-visible) {
-          outline: none;
-        }
-      }
-      &:focus-visible {
-        outline: none;
-        box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-      }
+      ${focusVisibleFocusRingCss7}
       &[aria-invalid='true'] {
         box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
       }
@@ -2965,6 +2963,7 @@ import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
 import styled22, { css as css12 } from "styled-components";
 import { px as px2 } from "@charcoal-ui/utils";
 import { useButton } from "@react-aria/button";
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss8 } from "@charcoal-ui/styled";
 import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var sizeMap = {
   S: 32,
@@ -3048,12 +3047,7 @@ var TagItemRoot = styled22.a`
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
+    ${focusVisibleFocusRingCss8}
   }
 
   &:disabled,