@charcoal-ui/react 4.0.0-beta.5 → 4.0.0-beta.7

package/src/components/TextField/index.css

@@ -0,0 +1,87 @@
+.charcoal-text-field-root {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 4px;
+}
+
+.charcoal-text-field-root[aria-disabled='true'] {
+  opacity: 0.32;
+}
+
+.charcoal-text-field-container {
+  display: flex;
+  height: 40px;
+  transition: 0.2s background-color, 0.2s box-shadow;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+  padding: 0 8px;
+  line-height: 22px;
+  font-size: 14px;
+}
+
+.charcoal-text-field-container[data-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+
+.charcoal-text-field-container:not([aria-disabled='true']):hover {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.charcoal-text-field-container:not([aria-disabled='true']):focus-within {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-text-field-container:not(
+    [aria-disabled='true']
+  )[data-invalid='true']:focus-within {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+
+.charcoal-text-field-prefix {
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+}
+
+.charcoal-text-field-suffix {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 4px;
+}
+
+.charcoal-text-field-input {
+  border: none;
+  box-sizing: border-box;
+  outline: none;
+  font-family: inherit;
+
+  /* Prevent zooming for iOS Safari */
+  transform-origin: top left;
+  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);
+
+  /* Display box-shadow for iOS Safari */
+  appearance: none;
+  background: transparent;
+
+  color: var(--charcoal-text2);
+}
+
+.charcoal-text-field-input::placeholder {
+  color: var(--charcoal-text3);
+}
+
+.charcoal-text-field-line-counter {
+  line-height: 22px;
+  font-size: 14px;
+  color: var(--charcoal-text3);
+}

package/src/components/TextField/index.tsx

@@ -1,11 +1,14 @@
+import './index.css'
+
 import { useVisuallyHidden } from '@react-aria/visually-hidden'
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import * as React from 'react'
-import styled, { css } from 'styled-components'
 import FieldLabel from '../FieldLabel'
 import { countCodePointsInString } from '../../_lib'
 import { useFocusWithClick } from './useFocusWithClick'
 import { mergeRefs, useId } from '@react-aria/utils'
+import { AssistiveText } from './AssistiveText'
+import { useClassNames } from '../../_lib/useClassNames'
 
 export type TextFieldProps = {
   prefix?: ReactNode
@@ -45,6 +48,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
       subLabel,
       suffix = null,
       type = 'text',
+      invalid,
       value,
       getCount = countCodePointsInString,
       ...props
@@ -85,8 +89,10 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
     const showAssistiveText =
       assistiveText != null && assistiveText.length !== 0
 
+    const classNames = useClassNames('charcoal-text-field-root')
+
     return (
-      <TextFieldRoot className={className} isDisabled={disabled}>
+      <div className={classNames} aria-disabled={disabled}>
         <FieldLabel
           htmlFor={inputId}
           id={labelledbyId}
@@ -96,146 +102,47 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
           subLabel={subLabel}
           {...(!showLabel ? visuallyHiddenProps : {})}
         />
-        <StyledInputContainer
+        <div
+          className="charcoal-text-field-container"
           aria-disabled={disabled === true ? true : undefined}
-          hasPrefix={prefix != null}
-          hasSuffix={suffix != null || showCount}
-          invalid={props.invalid === true}
+          data-invalid={invalid === true}
           ref={containerRef}
         >
-          {prefix && <PrefixContainer>{prefix}</PrefixContainer>}
-          <StyledInput
+          {prefix && <div className="charcoal-text-field-prefix">{prefix}</div>}
+          <input
+            className="charcoal-text-field-input"
             aria-describedby={showAssistiveText ? describedbyId : undefined}
-            aria-invalid={props.invalid}
+            aria-invalid={invalid}
             aria-labelledby={labelledbyId}
             id={inputId}
-            invalid={props.invalid === true}
+            data-invalid={invalid === true}
             maxLength={maxLength}
             onChange={handleChange}
-            prefix={props.rdfaPredix}
+            disabled={disabled}
             ref={mergeRefs(forwardRef, inputRef)}
             type={type}
             value={value}
             {...props}
           />
           {(suffix || showCount) && (
-            <SuffixContainer>
+            <div className="charcoal-text-field-suffix">
               {suffix}
               {showCount && (
-                <SingleLineCounter>
+                <span className="charcoal-text-field-line-counter">
                   {maxLength !== undefined ? `${count}/${maxLength}` : count}
-                </SingleLineCounter>
+                </span>
               )}
-            </SuffixContainer>
+            </div>
           )}
-        </StyledInputContainer>
+        </div>
         {showAssistiveText && (
-          <AssistiveText invalid={props.invalid === true} id={describedbyId}>
+          <AssistiveText data-invalid={invalid === true} id={describedbyId}>
             {assistiveText}
           </AssistiveText>
         )}
-      </TextFieldRoot>
+      </div>
     )
   }
 )
 
 export default TextField
-
-const TextFieldRoot = styled.div<{ isDisabled: boolean }>`
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-
-  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
-`
-
-const StyledInputContainer = styled.div<{
-  invalid: boolean
-  hasPrefix: boolean
-  hasSuffix: boolean
-}>`
-  display: grid;
-  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);
-  }
-
-  :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 &&
-    css`
-      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-    `}
-`
-
-const PrefixContainer = styled.div`
-  display: flex;
-  align-items: center;
-`
-
-const SuffixContainer = styled.span`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`
-
-const StyledInput = styled.input<{
-  invalid: boolean
-}>`
-  border: none;
-  box-sizing: border-box;
-  outline: none;
-  font-family: inherit;
-
-  /* Prevent zooming for iOS Safari */
-  transform-origin: top left;
-  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);
-
-  /* Display box-shadow for iOS Safari */
-  appearance: none;
-  background: transparent;
-
-  color: var(--charcoal-text2);
-  &::placeholder {
-    color: var(--charcoal-text3);
-  }
-`
-
-const SingleLineCounter = styled.span`
-  line-height: 22px;
-  font-size: 14px;
-  color: var(--charcoal-text3);
-`
-
-export const AssistiveText = styled.p<{ invalid: boolean }>`
-  font-size: 14px;
-  line-height: 22px;
-  margin: 0;
-  color: ${(p) => `var(--charcoal-${p.invalid ? `assertive` : `text2`})`};
-`

package/src/core/SSRProvider.tsx

@@ -1 +1,12 @@
-export { SSRProvider } from '@react-aria/ssr'
+import { SSRProvider as OriginSSRProvider } from '@react-aria/ssr'
+import { version, Fragment } from 'react'
+
+export function isReactVersionOver(minVersion: number): boolean {
+  // version history on the react side: https://github.com/facebook/react/commits/main/packages/shared/ReactVersion.js
+  const reactMajorVersion = parseInt(version.split('.')[0], 10)
+  return Number.isFinite(reactMajorVersion)
+    ? reactMajorVersion >= minVersion
+    : false
+}
+
+export const SSRProvider = isReactVersionOver(18) ? Fragment : OriginSSRProvider

package/src/index.ts

@@ -31,7 +31,11 @@ export {
 } from './components/TextField'
 export { default as TextArea, type TextAreaProps } from './components/TextArea'
 export { default as Icon, type IconProps } from './components/Icon'
-export { default as Modal, type ModalProps } from './components/Modal'
+export {
+  default as Modal,
+  type ModalProps,
+  ModalCloseButton,
+} from './components/Modal'
 export {
   ModalHeader,
   ModalAlign,