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

package/src/components/Radio/index.tsx

@@ -16,7 +16,7 @@ export type RadioProps = React.PropsWithChildren<{
 
 const Radio = forwardRef<HTMLInputElement, RadioProps>(function RadioInner(
   { value, disabled = false, children, ...props },
-  ref
+  ref,
 ) {
   const {
     name,
@@ -32,7 +32,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(function RadioInner(
   warning(
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     name !== undefined,
-    `"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`
+    `"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`,
   )
 
   const isSelected = value === selected

package/src/components/SegmentedControl/index.tsx

@@ -38,7 +38,7 @@ const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
   function SegmentedControlInner(props, ref) {
     const className = useClassNames(
       'charcoal-segmented-control',
-      props.className
+      props.className,
     )
 
     const ariaRadioGroupProps = useMemo<AriaRadioGroupProps>(
@@ -49,13 +49,13 @@ const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
         isRequired: props.required,
         'aria-label': props.name,
       }),
-      [props]
+      [props],
     )
     const state = useRadioGroupState(ariaRadioGroupProps)
     const { radioGroupProps } = useRadioGroup(ariaRadioGroupProps, state)
     const segmentedControlItems = useMemo<SegmentedControlItem[]>(() => {
       return props.data.map((d) =>
-        typeof d === 'string' ? { value: d, label: d } : d
+        typeof d === 'string' ? { value: d, label: d } : d,
       )
     }, [props.data])
 
@@ -74,7 +74,7 @@ const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
         </RadioProvider>
       </div>
     )
-  }
+  },
 )
 
 export default memo(SegmentedControl)
@@ -94,13 +94,13 @@ const Segmented = (props: RadioProps) => {
       isDisabled: props.disabled,
       children: props.children,
     }),
-    [props]
+    [props],
   )
 
   const { inputProps, isDisabled, isSelected } = useRadio(
     ariaRadioProps,
     state,
-    ref
+    ref,
   )
 
   return (

package/src/components/Switch/SwitchInput/index.tsx

@@ -21,7 +21,7 @@ const SwitchInput = forwardRef<
       const el = e.currentTarget
       onChange?.(el.checked)
     },
-    [onChange]
+    [onChange],
   )
 
   const classNames = useClassNames('charcoal-switch-input', className)

package/src/components/Switch/index.tsx

@@ -9,7 +9,7 @@ export type SwitchProps = SwitchInputProps
 
 const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
   { children, onChange, disabled, className, id, ...props },
-  ref
+  ref,
 ) {
   const htmlId = useId(id)
   const noChildren = children === undefined

package/src/components/TagItem/index.tsx

@@ -36,7 +36,7 @@ const TagItem = forwardRef<HTMLButtonElement, TagItemProps>(
       status = 'default',
       ...props
     }: TagItemProps<T>,
-    _ref: ForwardedRef<HTMLButtonElement>
+    _ref: ForwardedRef<HTMLButtonElement>,
   ) {
     const ref = useObjectRef(_ref)
 
@@ -45,7 +45,7 @@ const TagItem = forwardRef<HTMLButtonElement, TagItemProps>(
     const className = useClassNames(
       'charcoal-tag-item',
       'charcoal-tag-item__bg',
-      props.className
+      props.className,
     )
 
     const bgVariant =
@@ -83,7 +83,7 @@ const TagItem = forwardRef<HTMLButtonElement, TagItemProps>(
         {status === 'active' && <Icon name="16/Remove" />}
       </Component>
     )
-  }
+  },
 ) as <T extends React.ElementType = 'button'>(p: TagItemProps<T>) => JSX.Element
 
 export default memo(TagItem)

package/src/components/TextArea/index.css

@@ -15,7 +15,9 @@
   color: var(--charcoal-text2);
   background-color: var(--charcoal-surface3);
   border-radius: 4px;
-  transition: 0.2s background-color, 0.2s box-shadow;
+  transition:
+    0.2s background-color,
+    0.2s box-shadow;
   height: calc(22px * var(--charcoal-text-area-rows) + 18px);
 }
 

package/src/components/TextArea/index.tsx

@@ -48,7 +48,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       getCount = countCodePointsInString,
       ...props
     },
-    forwardRef
+    forwardRef,
   ) {
     const { visuallyHiddenProps } = useVisuallyHidden()
     const textareaRef = useRef<HTMLTextAreaElement>(null)
@@ -60,7 +60,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         const rows = (`${textarea.value}\n`.match(/\n/gu)?.length ?? 0) || 1
         setRows(initialRows <= rows ? rows : initialRows)
       },
-      [initialRows]
+      [initialRows],
     )
 
     const nonControlled = value === undefined
@@ -79,7 +79,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         }
         onChange?.(value)
       },
-      [autoHeight, getCount, maxLength, nonControlled, onChange, syncHeight]
+      [autoHeight, getCount, maxLength, nonControlled, onChange, syncHeight],
     )
 
     useEffect(() => {
@@ -153,7 +153,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         )}
       </div>
     )
-  }
+  },
 )
 
 export default TextArea

package/src/components/TextField/AssistiveText/index.tsx

@@ -2,5 +2,5 @@ import { createDivComponent } from '../../../_lib/createDivComponent'
 import './index.css'
 
 export const AssistiveText = createDivComponent(
-  'charcoal-text-field-assistive-text'
+  'charcoal-text-field-assistive-text',
 )

package/src/components/TextField/index.css

@@ -11,7 +11,9 @@
 .charcoal-text-field-container {
   display: flex;
   height: 40px;
-  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;

package/src/components/TextField/index.tsx

@@ -53,7 +53,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
       getCount = countCodePointsInString,
       ...props
     },
-    forwardRef
+    forwardRef,
   ) {
     const inputRef = useRef<HTMLInputElement>(null)
 
@@ -71,7 +71,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
         setCount(count)
         onChange?.(value)
       },
-      [getCount, maxLength, onChange]
+      [getCount, maxLength, onChange],
     )
 
     useEffect(() => {
@@ -142,7 +142,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
         )}
       </div>
     )
-  }
+  },
 )
 
 export default TextField

package/src/components/TextField/text-field.test.tsx

@@ -27,7 +27,7 @@ describe('TextField component', () => {
       const { container } = render(<TextField prefix={prefixValue} />)
       const prefixElement = container.querySelector('.charcoal-text-prefix')
       expect(prefixElement).toBeNull()
-    }
+    },
   )
 
   test.each([
@@ -40,13 +40,13 @@ describe('TextField component', () => {
     'should not render suffix when value is falsy (%s: %s) and showCount is false',
     (suffixValue, _desc) => {
       const { container } = render(
-        <TextField suffix={suffixValue} showCount={false} />
+        <TextField suffix={suffixValue} showCount={false} />,
       )
       const suffixElement = container.querySelector(
-        '.charcoal-text-field-suffix'
+        '.charcoal-text-field-suffix',
       )
       expect(suffixElement).toBeNull()
-    }
+    },
   )
 
   it('should render prefix and suffix when provided as truthy values', () => {
@@ -56,7 +56,7 @@ describe('TextField component', () => {
       <TextField
         prefix={<span>{prefixContent}</span>}
         suffix={<span>{suffixContent}</span>}
-      />
+      />,
     )
 
     const prefixElement = container.querySelector('.charcoal-text-field-prefix')

package/src/components/TextField/useFocusWithClick.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 
 export function useFocusWithClick(
   containerRef: React.RefObject<HTMLDivElement | null>,
-  inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>
+  inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>,
 ) {
   useEffect(() => {
     const el = containerRef.current

package/src/core/themeHelper.ts

@@ -34,7 +34,7 @@ export const themeSetter =
  */
 export function themeSelector<
   T extends string,
-  S extends string = typeof DEFAULT_ROOT_ATTRIBUTE
+  S extends string = typeof DEFAULT_ROOT_ATTRIBUTE,
 >(theme: T, attr?: S) {
   return `:root[data-${attr ?? DEFAULT_ROOT_ATTRIBUTE}='${theme}']` as const
 }
@@ -83,7 +83,7 @@ export const useTheme = (localStorageKey: string = LOCAL_STORAGE_KEY) => {
   const media = isDark !== undefined ? (isDark ? 'dark' : 'light') : undefined
   const [local, setTheme, ready] =
     useLocalStorage<typeof media>(localStorageKey)
-  const theme = !ready || media === undefined ? undefined : local ?? media
+  const theme = !ready || media === undefined ? undefined : (local ?? media)
   const system = local === undefined
   return [theme, setTheme, system] as const
 }