@charcoal-ui/react 3.8.0 → 3.9.1

package/src/components/Modal/index.story.tsx

@@ -243,4 +243,27 @@ export const NotDismmissableStory: StoryObj<typeof Modal> = {
   },
 }
 
+export const BackgroundScroll: StoryObj<typeof Modal> = {
+  render: function Render(args) {
+    const state = useOverlayTriggerState({})
+    return (
+      <OverlayProvider>
+        <div
+          style={{
+            height: 1024,
+          }}
+        >
+          <Button onClick={() => state.open()}>Open Modal</Button>
+        </div>
+        <M
+          {...args}
+          isDismissable
+          isOpen={state.isOpen}
+          onClose={() => state.close()}
+        />
+      </OverlayProvider>
+    )
+  },
+}
+
 export { InternalScrollStory as InternalScroll } from './__stories__/InternalScrollStory'

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,47 @@
+import * as React from 'react'
+import {
+  AriaModalOverlayProps,
+  ModalOverlayAria,
+  ariaHideOutside,
+  useOverlay,
+  useOverlayFocusContain,
+  usePreventScroll,
+} 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
+  )
+
+  usePreventScroll({
+    isDisabled: !state.isOpen,
+  })
+
+  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

package/src/components/TextField/TextField.story.tsx

@@ -37,6 +37,26 @@ const Container = styled.div`
 
 export const Default = {}
 
+export const Number: StoryObj<typeof TextField> = {
+  render: function Render(args) {
+    const [count, setCount] = useState(0)
+    return (
+      <Container>
+        <TextField
+          {...args}
+          type="number"
+          value={count.toString()}
+          onChange={(value) => setCount(parseInt(value))}
+          onWheel={(e) => {
+            e.currentTarget.blur()
+            e.stopPropagation()
+          }}
+        />
+      </Container>
+    )
+  },
+}
+
 export const HasLabel = {
   args: {
     showLabel: true,

package/src/components/TextField/__snapshots__/TextField.story.storyshot

@@ -1201,6 +1201,281 @@ exports[`Storybook Tests TextField HasLabel 1`] = `
 </div>
 `;
 
+exports[`Storybook Tests TextField Number 1`] = `
+.c7 {
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  color: inherit;
+  text-rendering: inherit;
+  -webkit-letter-spacing: inherit;
+  -moz-letter-spacing: inherit;
+  -ms-letter-spacing: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+
+.c7:disabled,
+.c7[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c7:focus {
+  outline: none;
+}
+
+.c7::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c4 {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  display: flow-root;
+  color: var(--charcoal-text1);
+}
+
+.c4::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c4::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+.c6 {
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text3);
+  -webkit-transition: 0.2s color,0.2s box-shadow;
+  transition: 0.2s color,0.2s box-shadow;
+}
+
+.c6::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c6::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+.c6:not(:disabled):not([aria-disabled]):hover,
+.c6[aria-disabled='false']:hover {
+  color: var(--charcoal-text3-hover);
+}
+
+.c6:not(:disabled):not([aria-disabled]):active,
+.c6[aria-disabled='false']:active {
+  color: var(--charcoal-text3-press);
+}
+
+.c6:not(:disabled):not([aria-disabled]):active,
+.c6[aria-disabled='false']:active,
+.c6:not(:disabled):not([aria-disabled]):focus,
+.c6[aria-disabled='false']:focus,
+.c6:not(:disabled):not([aria-disabled]):focus-visible,
+.c6[aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c2 > .c5 {
+  margin-left: auto;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c3 {
+  margin-bottom: 8px;
+}
+
+.c8 {
+  display: grid;
+  grid-template-columns: 1fr;
+  height: 40px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  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;
+}
+
+.c8:not(:disabled):not([aria-disabled]):hover,
+.c8 [aria-disabled='false']:hover {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.c8:focus-within {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c9 {
+  border: none;
+  box-sizing: border-box;
+  outline: none;
+  font-family: inherit;
+  -webkit-transform-origin: top left;
+  -ms-transform-origin: top left;
+  transform-origin: top left;
+  -webkit-transform: scale(0.875);
+  -ms-transform: scale(0.875);
+  transform: scale(0.875);
+  width: calc(100% / 0.875);
+  height: calc(100% / 0.875);
+  font-size: calc(14px / 0.875);
+  line-height: calc(22px / 0.875);
+  padding-left: 0;
+  padding-right: 0;
+  border-radius: calc(4px / 0.875);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  color: var(--charcoal-text2);
+}
+
+.c9::-webkit-input-placeholder {
+  color: var(--charcoal-text3);
+}
+
+.c9::-moz-placeholder {
+  color: var(--charcoal-text3);
+}
+
+.c9:-ms-input-placeholder {
+  color: var(--charcoal-text3);
+}
+
+.c9::placeholder {
+  color: var(--charcoal-text3);
+}
+
+.c0 {
+  display: grid;
+  gap: 24px;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    className="c0"
+  >
+    <div
+      className="c1"
+    >
+      <div
+        className="c2 c3"
+        style={
+          Object {
+            "border": 0,
+            "clip": "rect(0 0 0 0)",
+            "clipPath": "inset(50%)",
+            "height": "1px",
+            "margin": "-1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": "1px",
+          }
+        }
+      >
+        <label
+          className="c4"
+          htmlFor="test-id"
+          id="test-id"
+        >
+          Label
+        </label>
+        <div
+          className="c5 c6"
+        >
+          <span>
+            <button
+              className="c7"
+            >
+              Text Link
+            </button>
+          </span>
+        </div>
+      </div>
+      <div
+        className="c8"
+      >
+        <input
+          aria-labelledby="test-id"
+          className="c9"
+          disabled={false}
+          id="test-id"
+          onChange={[Function]}
+          onWheel={[Function]}
+          placeholder="TextField"
+          readOnly={false}
+          required={false}
+          type="number"
+          value="0"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storybook Tests TextField PrefixIcon 1`] = `
 .c6 {
   cursor: pointer;
@@ -1352,11 +1627,13 @@ exports[`Storybook Tests TextField PrefixIcon 1`] = `
 
 .c12:not(:disabled):not([aria-disabled]):hover,
 .c12[aria-disabled='false']:hover {
+  color: var(--charcoal-text5-hover);
   background-color: var(--charcoal-surface4-hover);
 }
 
 .c12:not(:disabled):not([aria-disabled]):active,
 .c12[aria-disabled='false']:active {
+  color: var(--charcoal-text5-press);
   background-color: var(--charcoal-surface4-press);
 }