@charcoal-ui/react 3.8.0 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -18,6 +18,7 @@
     "clean": "rimraf dist .tsbuildinfo"
   },
   "devDependencies": {
+    "@charcoal-ui/esbuild-plugin-styled-components": "^3.9.0",
     "@react-types/switch": "^3.1.2",
     "@storybook/addon-actions": "^7.4.1",
     "@storybook/addon-knobs": "^7.0.2",
@@ -51,10 +52,10 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^3.8.0",
-    "@charcoal-ui/styled": "^3.8.0",
-    "@charcoal-ui/theme": "^3.8.0",
-    "@charcoal-ui/utils": "^3.8.0",
+    "@charcoal-ui/icons": "^3.9.0",
+    "@charcoal-ui/styled": "^3.9.0",
+    "@charcoal-ui/theme": "^3.9.0",
+    "@charcoal-ui/utils": "^3.9.0",
     "@react-aria/button": "^3.9.1",
     "@react-aria/checkbox": "^3.13.0",
     "@react-aria/dialog": "^3.5.10",
@@ -87,5 +88,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "939ab20e11455ff9cba840c38c7dfd33cd739b59"
+  "gitHead": "fe760d136886d2227013d73067544c5a42ff075b"
 }

package/src/components/Checkbox/__snapshots__/index.story.storyshot

@@ -11,13 +11,9 @@ exports[`Storybook Tests Checkbox Invalid 1`] = `
   gap: 4px;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled='false']) {
+  cursor: default;
   opacity: 0.32;
 }
 
@@ -39,6 +35,18 @@ exports[`Storybook Tests Checkbox Invalid 1`] = `
   transition: 0.2s box-shadow,0.2s background-color;
 }
 
+.c2[type='checkbox']:disabled {
+  cursor: default;
+}
+
+.c2[type='checkbox']:-moz-read-only {
+  cursor: default;
+}
+
+.c2[type='checkbox']:read-only {
+  cursor: default;
+}
+
 .c2[type='checkbox']:checked {
   background-color: var(--charcoal-brand);
 }
@@ -140,6 +148,7 @@ exports[`Storybook Tests Checkbox Invalid 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        readOnly={false}
         type="checkbox"
       />
       <div
@@ -173,13 +182,9 @@ exports[`Storybook Tests Checkbox Labelled 1`] = `
   gap: 4px;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled='false']) {
+  cursor: default;
   opacity: 0.32;
 }
 
@@ -201,6 +206,18 @@ exports[`Storybook Tests Checkbox Labelled 1`] = `
   transition: 0.2s box-shadow,0.2s background-color;
 }
 
+.c2[type='checkbox']:disabled {
+  cursor: default;
+}
+
+.c2[type='checkbox']:-moz-read-only {
+  cursor: default;
+}
+
+.c2[type='checkbox']:read-only {
+  cursor: default;
+}
+
 .c2[type='checkbox']:checked {
   background-color: var(--charcoal-brand);
 }
@@ -309,6 +326,7 @@ exports[`Storybook Tests Checkbox Labelled 1`] = `
             onTouchEnd={[Function]}
             onTouchMove={[Function]}
             onTouchStart={[Function]}
+            readOnly={false}
             type="checkbox"
           />
           <div
@@ -357,6 +375,7 @@ exports[`Storybook Tests Checkbox Labelled 1`] = `
             onTouchEnd={[Function]}
             onTouchMove={[Function]}
             onTouchStart={[Function]}
+            readOnly={false}
             type="checkbox"
           />
           <div
@@ -401,13 +420,9 @@ exports[`Storybook Tests Checkbox Unlabelled 1`] = `
   gap: 4px;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled='false']) {
+  cursor: default;
   opacity: 0.32;
 }
 
@@ -429,6 +444,18 @@ exports[`Storybook Tests Checkbox Unlabelled 1`] = `
   transition: 0.2s box-shadow,0.2s background-color;
 }
 
+.c2[type='checkbox']:disabled {
+  cursor: default;
+}
+
+.c2[type='checkbox']:-moz-read-only {
+  cursor: default;
+}
+
+.c2[type='checkbox']:read-only {
+  cursor: default;
+}
+
 .c2[type='checkbox']:checked {
   background-color: var(--charcoal-brand);
 }
@@ -525,6 +552,7 @@ exports[`Storybook Tests Checkbox Unlabelled 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
+          readOnly={false}
           type="checkbox"
         />
         <div

package/src/components/Checkbox/index.tsx

@@ -4,7 +4,6 @@ import styled, { css } from 'styled-components'
 import { useCheckbox } from '@react-aria/checkbox'
 import { useObjectRef } from '@react-aria/utils'
 import { useToggleState } from 'react-stately'
-import { disabledSelector } from '@charcoal-ui/utils'
 
 import type { AriaCheckboxProps } from '@react-types/checkbox'
 import Icon from '../Icon'
@@ -59,7 +58,11 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     return (
       <InputRoot aria-disabled={isDisabled} className={props.className}>
         <CheckboxRoot>
-          <CheckboxInput type="checkbox" {...inputProps} />
+          <CheckboxInput
+            type="checkbox"
+            {...inputProps}
+            readOnly={props.readonly}
+          />
           <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>
             <Icon name="24/Check" unsafeNonGuidelineScale={2 / 3} />
           </CheckboxInputOverlay>
@@ -82,13 +85,11 @@ const InputRoot = styled.label`
   display: flex;
 
   cursor: pointer;
-  ${disabledSelector} {
-    cursor: default;
-  }
 
   gap: 4px;
   &:disabled,
   &[aria-disabled]:not([aria-disabled='false']) {
+    cursor: default;
     opacity: 0.32;
   }
 `
@@ -108,6 +109,13 @@ const CheckboxInput = styled.input`
     border-radius: 4px;
     transition: 0.2s box-shadow, 0.2s background-color;
 
+    &:disabled {
+      cursor: default;
+    }
+    &:read-only {
+      cursor: default;
+    }
+
     &:checked {
       background-color: var(--charcoal-brand);
 

package/src/components/DropdownSelector/__snapshots__/index.story.storyshot

@@ -512,11 +512,13 @@ exports[`Storybook Tests DropdownSelector InModal 1`] = `
 
 .c12:not(:disabled):not([aria-disabled]):hover,
 .c12[aria-disabled='false']:hover {
+  color: var(--charcoal-text3-hover);
   background-color: var(--charcoal-transparent-hover);
 }
 
 .c12:not(:disabled):not([aria-disabled]):active,
 .c12[aria-disabled='false']:active {
+  color: var(--charcoal-text3-press);
   background-color: var(--charcoal-transparent-press);
 }
 
@@ -701,6 +703,7 @@ exports[`Storybook Tests DropdownSelector InModal 1`] = `
     </button>
     <div
       className="c0"
+      onClick={[Function]}
       onPointerDown={[Function]}
       style={
         Object {

package/src/components/IconButton/__snapshots__/index.story.storyshot

@@ -67,11 +67,13 @@ exports[`Storybook Tests IconButton DefaultM 1`] = `
 
 .c1:not(:disabled):not([aria-disabled]):hover,
 .c1[aria-disabled='false']:hover {
+  color: var(--charcoal-text3-hover);
   background-color: var(--charcoal-transparent-hover);
 }
 
 .c1:not(:disabled):not([aria-disabled]):active,
 .c1[aria-disabled='false']:active {
+  color: var(--charcoal-text3-press);
   background-color: var(--charcoal-transparent-press);
 }
 
@@ -177,6 +179,7 @@ exports[`Storybook Tests IconButton IsActive 1`] = `
 
 .c1:not(:disabled):not([aria-disabled]),
 .c1[aria-disabled='false'] {
+  color: var(--charcoal-text3-press);
   background-color: var(--charcoal-transparent-press);
 }
 
@@ -282,11 +285,13 @@ exports[`Storybook Tests IconButton OverlayM 1`] = `
 
 .c1:not(:disabled):not([aria-disabled]):hover,
 .c1[aria-disabled='false']:hover {
+  color: var(--charcoal-text5-hover);
   background-color: var(--charcoal-surface4-hover);
 }
 
 .c1:not(:disabled):not([aria-disabled]):active,
 .c1[aria-disabled='false']:active {
+  color: var(--charcoal-text5-press);
   background-color: var(--charcoal-surface4-press);
 }
 

package/src/components/IconButton/index.tsx

@@ -69,16 +69,19 @@ const StyledIconButton = styled(Clickable).attrs<
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
-    ${({ $isActive, $background }) =>
+    ${({ $isActive, $background, $font }) =>
       $isActive
         ? css`
+            color: var(--charcoal-${$font}-press);
             background-color: var(--charcoal-${$background}-press);
           `
         : css`
             &:hover {
+              color: var(--charcoal-${$font}-hover);
               background-color: var(--charcoal-${$background}-hover);
             }
             &:active {
+              color: var(--charcoal-${$font}-press);
               background-color: var(--charcoal-${$background}-press);
             }
           `}

package/src/components/Modal/__snapshots__/index.story.storyshot

@@ -197,11 +197,13 @@ exports[`Storybook Tests Modal BottomSheet 1`] = `
 
 .c13:not(:disabled):not([aria-disabled]):hover,
 .c13[aria-disabled='false']:hover {
+  color: var(--charcoal-text3-hover);
   background-color: var(--charcoal-transparent-hover);
 }
 
 .c13:not(:disabled):not([aria-disabled]):active,
 .c13[aria-disabled='false']:active {
+  color: var(--charcoal-text3-press);
   background-color: var(--charcoal-transparent-press);
 }
 
@@ -409,6 +411,7 @@ exports[`Storybook Tests Modal BottomSheet 1`] = `
     </button>
     <div
       className="c2"
+      onClick={[Function]}
       onPointerDown={[Function]}
       style={
         Object {
@@ -912,11 +915,13 @@ exports[`Storybook Tests Modal Default 1`] = `
 
 .c27:not(:disabled):not([aria-disabled]):hover,
 .c27[aria-disabled='false']:hover {
+  color: var(--charcoal-text3-hover);
   background-color: var(--charcoal-transparent-hover);
 }
 
 .c27:not(:disabled):not([aria-disabled]):active,
 .c27[aria-disabled='false']:active {
+  color: var(--charcoal-text3-press);
   background-color: var(--charcoal-transparent-press);
 }
 
@@ -1196,6 +1201,7 @@ exports[`Storybook Tests Modal Default 1`] = `
     </button>
     <div
       className="c2"
+      onClick={[Function]}
       onPointerDown={[Function]}
       style={Object {}}
     >
@@ -1295,6 +1301,7 @@ exports[`Storybook Tests Modal Default 1`] = `
                 >
                   <input
                     aria-labelledby="test-id"
+                    autoFocus={true}
                     className="c18"
                     disabled={false}
                     id="test-id"
@@ -1725,11 +1732,13 @@ exports[`Storybook Tests Modal FullBottomSheet 1`] = `
 
 .c22:not(:disabled):not([aria-disabled]):hover,
 .c22[aria-disabled='false']:hover {
+  color: var(--charcoal-text3-hover);
   background-color: var(--charcoal-transparent-hover);
 }
 
 .c22:not(:disabled):not([aria-disabled]):active,
 .c22[aria-disabled='false']:active {
+  color: var(--charcoal-text3-press);
   background-color: var(--charcoal-transparent-press);
 }
 
@@ -2018,6 +2027,7 @@ exports[`Storybook Tests Modal FullBottomSheet 1`] = `
     </button>
     <div
       className="c2"
+      onClick={[Function]}
       onPointerDown={[Function]}
       style={
         Object {
@@ -2485,6 +2495,7 @@ exports[`Storybook Tests Modal InternalScroll 1`] = `
     </button>
     <div
       className="c2"
+      onClick={[Function]}
       onPointerDown={[Function]}
       style={Object {}}
     >
@@ -2864,6 +2875,7 @@ exports[`Storybook Tests Modal NotDismmissableStory 1`] = `
     </button>
     <div
       className="c2"
+      onClick={[Function]}
       onPointerDown={[Function]}
       style={Object {}}
     >

package/src/components/Modal/index.tsx

@@ -1,10 +1,6 @@
 import { useContext, forwardRef, memo } from 'react'
 import * as React from 'react'
-import {
-  AriaModalOverlayProps,
-  Overlay,
-  useModalOverlay,
-} from '@react-aria/overlays'
+import { AriaModalOverlayProps, Overlay } from '@react-aria/overlays'
 import styled, { css, useTheme } from 'styled-components'
 import { AriaDialogProps } from '@react-types/dialog'
 import { maxWidth } from '@charcoal-ui/utils'
@@ -15,6 +11,7 @@ import IconButton from '../IconButton'
 import { useObjectRef } from '@react-aria/utils'
 import { Dialog } from './Dialog'
 import { ModalBackgroundContext } from './ModalBackgroundContext'
+import { useCharcoalModalOverlay } from './useCustomModalOverlay'
 
 export type BottomSheet = boolean | 'full'
 export type Size = 'S' | 'M' | 'L'
@@ -81,27 +78,15 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
 
   const ref = useObjectRef<HTMLDivElement>(external)
 
-  const { modalProps, underlayProps } = useModalOverlay(
+  const { modalProps, underlayProps } = useCharcoalModalOverlay(
     {
       ...props,
       isKeyboardDismissDisabled:
         isDismissable === undefined || isDismissable === false,
     },
-
     {
-      close: onClose,
-      isOpen: isOpen,
-      // these props are not used actually.
-      // https://github.com/adobe/react-spectrum/blob/df14e3fb129b94b310f0397a701b83f006b51dfe/packages/%40react-aria/overlays/src/useModalOverlay.ts
-      open: () => {
-        // nope
-      },
-      setOpen: () => {
-        // nope
-      },
-      toggle: () => {
-        // nope
-      },
+      onClose,
+      isOpen,
     },
     ref
   )
@@ -136,6 +121,15 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
 
   const bgRef = React.useRef<HTMLElement>(null)
 
+  const handleClick = React.useCallback(
+    (e: MouseEvent) => {
+      if (e.currentTarget === e.target) {
+        onClose()
+      }
+    },
+    [onClose]
+  )
+
   return transition(
     ({ backgroundColor, overflow, transform }, item) =>
       item && (
@@ -146,6 +140,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
             {...underlayProps}
             style={transitionEnabled ? { backgroundColor, overflow } : {}}
             $bottomSheet={bottomSheet}
+            onClick={handleClick}
           >
             <ModalBackgroundContext.Provider value={bgRef.current}>
               <Dialog

package/src/components/Modal/useCustomModalOverlay.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import {
+  AriaModalOverlayProps,
+  ModalOverlayAria,
+  ariaHideOutside,
+  useOverlay,
+  useOverlayFocusContain,
+} from '@react-aria/overlays'
+
+/**
+ * We want to enable scrolling on the modal background,
+ * but `useModalOverlay` (specifically, `useOverlay` within it) detects pointer events on the scrollbar.
+ * Therefore, to prevent this issue, we need to override `shouldCloseOnInteractOutside` in `useModalOverlay`.
+ */
+export function useCharcoalModalOverlay(
+  props: AriaModalOverlayProps,
+  state: { isOpen: boolean; onClose: () => void },
+  ref: React.RefObject<HTMLElement>
+): ModalOverlayAria {
+  const { overlayProps, underlayProps } = useOverlay(
+    {
+      ...props,
+      isOpen: state.isOpen,
+      onClose: state.onClose,
+      shouldCloseOnInteractOutside: () => false,
+    },
+    ref
+  )
+
+  useOverlayFocusContain()
+
+  React.useEffect(() => {
+    if (state.isOpen && ref.current) {
+      return ariaHideOutside([ref.current])
+    }
+  }, [state.isOpen, ref])
+
+  return {
+    modalProps: overlayProps,
+    underlayProps,
+  }
+}

package/src/components/Radio/__snapshots__/index.story.storyshot

@@ -12,9 +12,9 @@ exports[`Storybook Tests Radio Basic 1`] = `
   cursor: pointer;
 }
 
-.c2:disabled,
 .c2[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c3[type='radio'] {
@@ -34,6 +34,10 @@ exports[`Storybook Tests Radio Basic 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
+.c3[type='radio']:disabled {
+  cursor: default;
+}
+
 .c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
 .c3[type='radio'][aria-disabled='false']:hover {
   background-color: var(--charcoal-surface1-hover);
@@ -244,9 +248,9 @@ exports[`Storybook Tests Radio Disabled 1`] = `
   cursor: pointer;
 }
 
-.c2:disabled,
 .c2[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c3[type='radio'] {
@@ -266,6 +270,10 @@ exports[`Storybook Tests Radio Disabled 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
+.c3[type='radio']:disabled {
+  cursor: default;
+}
+
 .c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
 .c3[type='radio'][aria-disabled='false']:hover {
   background-color: var(--charcoal-surface1-hover);
@@ -476,9 +484,9 @@ exports[`Storybook Tests Radio Invalid 1`] = `
   cursor: pointer;
 }
 
-.c2:disabled,
 .c2[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c3[type='radio'] {
@@ -498,6 +506,10 @@ exports[`Storybook Tests Radio Invalid 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
+.c3[type='radio']:disabled {
+  cursor: default;
+}
+
 .c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
 .c3[type='radio'][aria-disabled='false']:hover {
   background-color: var(--charcoal-surface1-hover);
@@ -709,9 +721,9 @@ exports[`Storybook Tests Radio PartialDisabled 1`] = `
   cursor: pointer;
 }
 
-.c2:disabled,
 .c2[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c3[type='radio'] {
@@ -731,6 +743,10 @@ exports[`Storybook Tests Radio PartialDisabled 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
+.c3[type='radio']:disabled {
+  cursor: default;
+}
+
 .c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
 .c3[type='radio'][aria-disabled='false']:hover {
   background-color: var(--charcoal-surface1-hover);
@@ -941,9 +957,9 @@ exports[`Storybook Tests Radio Readonly 1`] = `
   cursor: pointer;
 }
 
-.c2:disabled,
 .c2[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c3[type='radio'] {
@@ -963,6 +979,10 @@ exports[`Storybook Tests Radio Readonly 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
+.c3[type='radio']:disabled {
+  cursor: default;
+}
+
 .c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
 .c3[type='radio'][aria-disabled='false']:hover {
   background-color: var(--charcoal-surface1-hover);

package/src/components/Radio/index.tsx

@@ -65,9 +65,9 @@ const RadioRoot = styled.label`
   align-items: center;
   cursor: pointer;
 
-  &:disabled,
   &[aria-disabled]:not([aria-disabled='false']) {
     opacity: 0.32;
+    cursor: default;
   }
 `
 
@@ -88,6 +88,10 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })`
     background-color: var(--charcoal-surface1);
     transition: 0.2s background-color, 0.2s box-shadow;
 
+    :disabled {
+      cursor: default;
+    }
+
     &:not(:disabled):not([aria-disabled]),
     &[aria-disabled='false'] {
       &:hover {

package/src/components/TextArea/index.tsx

@@ -7,6 +7,7 @@ import { countCodePointsInString, mergeRefs } from '../../_lib'
 import { ReactAreaUseTextFieldCompat } from '../../_lib/compat'
 import { AssistiveText, TextFieldLabel } from '../TextField'
 import { useFocusWithClick } from '../TextField/useFocusWithClick'
+import { mergeProps } from '@react-aria/utils'
 
 type DOMProps = Omit<
   React.TextareaHTMLAttributes<HTMLTextAreaElement>,
@@ -55,6 +56,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       maxLength,
       autoHeight = false,
       rows: initialRows = 4,
+      ...restProps
     } = props
 
     const { visuallyHiddenProps } = useVisuallyHidden()
@@ -95,20 +97,24 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       setCount(countCodePointsInString(props.value ?? ''))
     }, [props.value])
 
-    const { inputProps, labelProps, descriptionProps, errorMessageProps } =
-      useTextField(
-        {
-          inputElementType: 'textarea',
-          isDisabled: disabled,
-          isRequired: required,
-          validationState: invalid ? 'invalid' : 'valid',
-          description: !invalid && assistiveText,
-          errorMessage: invalid && assistiveText,
-          onChange: handleChange,
-          ...props,
-        },
-        ariaRef
-      )
+    const {
+      inputProps: ariaInputProps,
+      labelProps,
+      descriptionProps,
+      errorMessageProps,
+    } = useTextField(
+      {
+        inputElementType: 'textarea',
+        isDisabled: disabled,
+        isRequired: required,
+        validationState: invalid ? 'invalid' : 'valid',
+        description: !invalid && assistiveText,
+        errorMessage: invalid && assistiveText,
+        onChange: handleChange,
+        ...props,
+      },
+      ariaRef
+    )
 
     useEffect(() => {
       if (autoHeight && textareaRef.current !== null) {
@@ -120,6 +126,8 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 
     useFocusWithClick(containerRef, ariaRef)
 
+    const inputProps = mergeProps(restProps, ariaInputProps)
+
     return (
       <TextFieldRoot className={className} isDisabled={disabled}>
         <TextFieldLabel