@charcoal-ui/react 2.0.0-alpha.9 → 2.0.0-rc.1

package/src/components/SegmentedControl/index.tsx

@@ -0,0 +1,157 @@
+import React, { forwardRef, memo, useMemo, useRef } from 'react'
+import { useRadioGroupState } from 'react-stately'
+import {
+  AriaRadioGroupProps,
+  AriaRadioProps,
+  useRadio,
+  useRadioGroup,
+} from '@react-aria/radio'
+import styled from 'styled-components'
+import { disabledSelector } from '@charcoal-ui/utils'
+
+import { RadioProvider, useRadioContext } from './RadioGroupContext'
+import { theme } from '../../styled'
+
+type SegmentedControlItem = {
+  label: React.ReactNode
+  value: string
+  disabled?: boolean
+}
+
+export type SegmentedControlProps = {
+  readonly id?: string
+  readonly name?: string
+  readonly disabled?: boolean
+  readonly readonly?: boolean
+  readonly required?: boolean
+
+  readonly value?: string
+  readonly defaultValue?: string
+
+  readonly data: string[] | SegmentedControlItem[]
+
+  readonly onChange?: (value: string) => void
+}
+
+const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
+  function SegmentedControlInner(props, ref) {
+    const ariaRadioGroupProps = useMemo<AriaRadioGroupProps>(
+      () => ({
+        ...props,
+        isDisabled: props.disabled,
+        isReadOnly: props.readonly,
+        isRequired: props.required,
+      }),
+      [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
+      )
+    }, [props.data])
+
+    return (
+      <SegmentedControlRoot ref={ref} {...radioGroupProps}>
+        <RadioProvider value={state}>
+          {segmentedControlItems.map((item) => (
+            <Segmented
+              key={item.value}
+              value={item.value}
+              disabled={item.disabled}
+            >
+              {item.label}
+            </Segmented>
+          ))}
+        </RadioProvider>
+      </SegmentedControlRoot>
+    )
+  }
+)
+
+export default memo(SegmentedControl)
+
+type RadioProps = {
+  value: string
+  disabled?: boolean
+}
+
+const Segmented: React.FC<RadioProps> = ({ children, ...props }) => {
+  const state = useRadioContext()
+  const ref = useRef<HTMLInputElement>(null)
+  const ariaRadioProps = useMemo<AriaRadioProps>(
+    () => ({ ...props, isDisabled: props.disabled }),
+    [props]
+  )
+
+  const { inputProps, isDisabled, isSelected } = useRadio(
+    ariaRadioProps,
+    state,
+    ref
+  )
+
+  return (
+    <SegmentedRoot
+      aria-disabled={isDisabled || state.isReadOnly}
+      checked={isSelected}
+    >
+      <SegmentedInput {...inputProps} ref={ref} />
+      <RadioLabel>
+        <SegmentedLabelInner>{children}</SegmentedLabelInner>
+      </RadioLabel>
+    </SegmentedRoot>
+  )
+}
+
+const SegmentedControlRoot = styled.div`
+  display: inline-flex;
+  align-items: center;
+
+  ${theme((o) => [o.bg.surface3, o.borderRadius(16)])}
+`
+
+const SegmentedRoot = styled.label<{ checked?: boolean }>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: 32px;
+
+  ${disabledSelector} {
+    cursor: default;
+  }
+
+  ${({ checked }) =>
+    theme((o) => [
+      o.padding.horizontal(16),
+      o.borderRadius(16),
+      o.disabled,
+      checked === true && o.bg.brand,
+      checked === true ? o.font.text5 : o.font.text2,
+    ])}
+`
+const SegmentedInput = styled.input`
+  position: absolute;
+
+  height: 0px;
+  width: 0px;
+  padding: 0;
+  margin: 0;
+
+  appearance: none;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  opacity: 0;
+`
+
+const RadioLabel = styled.div`
+  background: transparent;
+  display: flex;
+  align-items: center;
+  height: 22px;
+`
+const SegmentedLabelInner = styled.div`
+  ${theme((o) => [o.typography(14)])}
+`

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

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions'
 import React from 'react'
-import { css } from 'styled-components'
+import styled from 'styled-components'
 import { Story } from '../../_lib/compat'
 import Clickable from '../Clickable'
 import TextField, {
@@ -9,6 +9,7 @@ import TextField, {
   TextFieldProps,
 } from '.'
 import { px } from '@charcoal-ui/utils'
+import IconButton from '../IconButton'
 
 export default {
   title: 'TextField',
@@ -24,23 +25,20 @@ export default {
   },
 }
 
+const Container = styled.div`
+  display: grid;
+  gap: ${({ theme }) => px(theme.spacing[24])};
+`
+
 const Template: Story<Partial<TextFieldProps>> = (args) => (
-  <div
-    css={css`
-      display: grid;
-      gap: ${({ theme }) => px(theme.spacing[24])};
-    `}
-  >
+  <Container>
     <TextField
       label="Label"
       requiredText="*必須"
       subLabel={
-        <Clickable to="#" onClick={action('click')}>
-          Text Link
-        </Clickable>
+        <Clickable onClick={action('label-click')}>Text Link</Clickable>
       }
       placeholder="Single Line"
-      onChange={action('change')}
       {...(args as Partial<SingleLineTextFieldProps>)}
       multiline={false}
     />
@@ -48,16 +46,13 @@ const Template: Story<Partial<TextFieldProps>> = (args) => (
       label="Label"
       requiredText="*必須"
       subLabel={
-        <Clickable to="#" onClick={action('click')}>
-          Text Link
-        </Clickable>
+        <Clickable onClick={action('label-click')}>Text Link</Clickable>
       }
       placeholder="Multi Line"
-      onChange={action('change')}
       {...(args as Partial<MultiLineTextFieldProps>)}
       multiline
     />
-  </div>
+  </Container>
 )
 
 export const Default = Template.bind({})
@@ -91,3 +86,23 @@ export const AutoHeight: Story<Partial<MultiLineTextFieldProps>> = (args) => (
 AutoHeight.args = {
   autoHeight: true,
 }
+
+export const PrefixIcon: Story<Partial<SingleLineTextFieldProps>> = (args) => (
+  <TextField
+    label="Label"
+    placeholder="Icon prefix"
+    prefix={
+      <PrefixIconWrap>
+        <pixiv-icon name="16/Search" />
+      </PrefixIconWrap>
+    }
+    suffix={<IconButton variant="Overlay" icon={'16/Remove'} size="XS" />}
+    {...args}
+  />
+)
+
+const PrefixIconWrap = styled.div`
+  color: ${({ theme }) => theme.color.text4};
+  margin-top: 2px;
+  margin-right: 4px;
+`

package/src/components/TextField/index.tsx

@@ -1,9 +1,15 @@
 import { useTextField } from '@react-aria/textfield'
 import { useVisuallyHidden } from '@react-aria/visually-hidden'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import styled, { css } from 'styled-components'
 import FieldLabel, { FieldLabelProps } from '../FieldLabel'
-import createTheme from '@charcoal-ui/styled'
+import { createTheme } from '@charcoal-ui/styled'
 
 const theme = createTheme(styled)
 
@@ -13,6 +19,9 @@ interface TextFieldBaseProps
   readonly defaultValue?: string
   readonly value?: string
   readonly onChange?: (value: string) => void
+  readonly onKeyDown?: (event: React.KeyboardEvent<Element>) => void
+  readonly onFocus?: (event: React.FocusEvent<Element>) => void
+  readonly onBlur?: (event: React.FocusEvent<Element>) => void
   readonly showCount?: boolean
   readonly showLabel?: boolean
   readonly placeholder?: string
@@ -32,8 +41,8 @@ export interface SingleLineTextFieldProps extends TextFieldBaseProps {
   readonly multiline?: false
   readonly rows?: never
   readonly type?: string
-  readonly prefix?: string
-  readonly suffix?: string
+  readonly prefix?: ReactNode
+  readonly suffix?: ReactNode
 }
 
 export interface MultiLineTextFieldProps extends TextFieldBaseProps {
@@ -94,8 +103,8 @@ const SingleLineTextField = React.forwardRef<
     invalid = false,
     assistiveText,
     maxLength,
-    prefix = '',
-    suffix = '',
+    prefix = null,
+    suffix = null,
   } = props
 
   const { visuallyHiddenProps } = useVisuallyHidden()
@@ -184,9 +193,9 @@ const SingleLineTextField = React.forwardRef<
         />
         <SuffixContainer ref={suffixRef}>
           <Affix>{suffix}</Affix>
-          {showCount && maxLength && (
+          {showCount && (
             <SingleLineCounter>
-              {count}/{maxLength}
+              {maxLength !== undefined ? `${count}/${maxLength}` : count}
             </SingleLineCounter>
           )}
         </SuffixContainer>
@@ -231,10 +240,8 @@ const MultiLineTextField = React.forwardRef<
 
   const syncHeight = useCallback(
     (textarea: HTMLTextAreaElement) => {
-      const rows = `${textarea.value}\n`.match(/\n/gu)?.length ?? 1
-      if (initialRows <= rows) {
-        setRows(rows)
-      }
+      const rows = (`${textarea.value}\n`.match(/\n/gu)?.length ?? 0) || 1
+      setRows(initialRows <= rows ? rows : initialRows)
     },
     [initialRows]
   )
@@ -290,16 +297,23 @@ const MultiLineTextField = React.forwardRef<
         required={required}
         subLabel={subLabel}
         {...labelProps}
-        {...(showLabel ? visuallyHiddenProps : {})}
+        {...(!showLabel ? visuallyHiddenProps : {})}
       />
-      <StyledTextareaContainer rows={rows}>
+      <StyledTextareaContainer
+        invalid={invalid}
+        rows={showCount ? rows + 1 : rows}
+      >
         <StyledTextarea
           ref={mergeRefs(textareaRef, forwardRef, ariaRef)}
-          invalid={invalid}
           rows={rows}
+          noBottomPadding={showCount}
           {...inputProps}
         />
-        {showCount && <MultiLineCounter>{count}</MultiLineCounter>}
+        {showCount && (
+          <MultiLineCounter>
+            {maxLength !== undefined ? `${count}/${maxLength}` : count}
+          </MultiLineCounter>
+        )}
       </StyledTextareaContainer>
       {assistiveText != null && assistiveText.length !== 0 && (
         <AssistiveText
@@ -370,8 +384,6 @@ const StyledInput = styled.input<{
   height: calc(100% / 0.875);
   font-size: calc(14px / 0.875);
   line-height: calc(22px / 0.875);
-  padding-top: calc(9px / 0.875);
-  padding-bottom: calc(9px / 0.875);
   padding-left: calc((8px + ${(p) => p.extraLeftPadding}px) / 0.875);
   padding-right: calc((8px + ${(p) => p.extraRightPadding}px) / 0.875);
   border-radius: calc(4px / 0.875);
@@ -392,21 +404,35 @@ const StyledInput = styled.input<{
   }
 `
 
-const StyledTextareaContainer = styled.div<{ rows: number }>`
-  display: grid;
+const StyledTextareaContainer = styled.div<{ rows: number; invalid: boolean }>`
   position: relative;
+  overflow: hidden;
+  padding: 0 8px;
+
+  ${(p) =>
+    theme((o) => [
+      o.bg.surface3.hover,
+      p.invalid && o.outline.assertive,
+      o.font.text2,
+      o.borderRadius(4),
+    ])}
+
+  &:focus-within {
+    ${(p) =>
+      theme((o) => (p.invalid ? o.outline.assertive : o.outline.default))}
+  }
 
   ${({ rows }) => css`
-    max-height: calc(22px * ${rows} + 18px);
+    height: calc(22px * ${rows} + 18px);
   `};
 `
 
-const StyledTextarea = styled.textarea<{ invalid: boolean }>`
+const StyledTextarea = styled.textarea<{ noBottomPadding: boolean }>`
   border: none;
-  box-sizing: border-box;
   outline: none;
   resize: none;
   font-family: inherit;
+  color: inherit;
 
   /* Prevent zooming for iOS Safari */
   transform-origin: top left;
@@ -414,23 +440,16 @@ const StyledTextarea = styled.textarea<{ invalid: boolean }>`
   width: calc(100% / 0.875);
   font-size: calc(14px / 0.875);
   line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  border-radius: calc(4px / 0.875);
+  padding: calc(9px / 0.875) 0 ${(p) => (p.noBottomPadding ? 0 : '')};
 
-  ${({ rows }) => css`
-    height: calc(22px / 0.875 * ${rows} + 18px / 0.875);
+  ${({ rows = 1 }) => css`
+    height: calc(22px / 0.875 * ${rows});
   `};
 
   /* Display box-shadow for iOS Safari */
   appearance: none;
 
-  ${(p) =>
-    theme((o) => [
-      o.bg.surface3.hover,
-      o.outline.default.focus,
-      p.invalid && o.outline.assertive,
-      o.font.text2,
-    ])}
+  background: none;
 
   &::placeholder {
     ${theme((o) => o.font.text3)}

package/src/components/a11y.test.tsx

@@ -63,6 +63,17 @@ beforeEach(() => {
       return null
     },
   }))
+
+  global.matchMedia = jest.fn().mockImplementation(() => ({
+    matches: true,
+    media: '(max-width: 600px)',
+    addEventListener() {
+      // Do Nothing
+    },
+    removeEventListener() {
+      // Do Nothing
+    },
+  }))
 })
 
 describe.each(themes)('using %s theme', (_name, theme) => {

package/src/core/SSRProvider.tsx

@@ -0,0 +1 @@
+export { SSRProvider } from '@react-aria/ssr'

package/src/index.ts

@@ -3,6 +3,7 @@ export {
   useComponentAbstraction,
   type LinkProps,
 } from './core/ComponentAbstraction'
+export { SSRProvider } from './core/SSRProvider'
 export { default as Button, type ButtonProps } from './components/Button'
 export {
   default as Clickable,
@@ -20,14 +21,30 @@ export {
   type RadioGroupProps,
 } from './components/Radio'
 export {
-  default as Select,
-  type SelectProps,
-  SelectGroup,
-  type SelectGroupProps,
-} from './components/Select'
+  default as MultiSelect,
+  type MultiSelectProps,
+  MultiSelectGroup,
+  type MultiSelectGroupProps,
+} from './components/MultiSelect'
 export { default as Switch, type SwitchProps } from './components/Switch'
 export {
   default as TextField,
   type TextFieldProps,
+  type SingleLineTextFieldProps,
+  type MultiLineTextFieldProps,
 } from './components/TextField'
 export { default as Icon, type IconProps } from './components/Icon'
+export { default as Modal, type ModalProps } from './components/Modal'
+export {
+  default as LoadingSpinner,
+  LoadingSpinnerIcon,
+} from './components/LoadingSpinner'
+export {
+  default as DropdownSelector,
+  DropdownSelectorItem,
+} from './components/DropdownSelector'
+export {
+  default as SegmentedControl,
+  type SegmentedControlProps,
+} from './components/SegmentedControl'
+export { default as Checkbox } from './components/Checkbox'

package/src/styled.ts

@@ -1,3 +1,3 @@
 import styled from 'styled-components'
-import createTheme from '@charcoal-ui/styled'
+import { createTheme } from '@charcoal-ui/styled'
 export const theme = createTheme(styled)

package/dist/components/Select/context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/Select/context.ts"],"names":[],"mappings":"AAEA,aAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;CAC9E,CAAA;AAED,eAAO,MAAM,kBAAkB,6CAW7B,CAAA"}

package/dist/components/Select/index.d.ts

@@ -1,24 +0,0 @@
-import React from 'react';
-export declare type SelectProps = React.PropsWithChildren<{
-    value: string;
-    forceChecked?: boolean;
-    disabled?: boolean;
-    variant?: 'default' | 'overlay';
-    onChange?: (payload: {
-        value: string;
-        selected: boolean;
-    }) => void;
-}>;
-export default function Select({ value, forceChecked, disabled, onChange, variant, children, }: SelectProps): JSX.Element;
-export declare type SelectGroupProps = React.PropsWithChildren<{
-    className?: string;
-    name: string;
-    ariaLabel: string;
-    selected: string[];
-    onChange: (selected: string[]) => void;
-    disabled?: boolean;
-    readonly?: boolean;
-    hasError?: boolean;
-}>;
-export declare function SelectGroup({ className, name, ariaLabel, selected, onChange, disabled, readonly, hasError, children, }: SelectGroupProps): JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Select/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAQnE,oBAAY,WAAW,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAChD,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;CACnE,CAAC,CAAA;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,KAAK,EACL,YAAoB,EACpB,QAAgB,EAChB,QAAQ,EACR,OAAmB,EACnB,QAAQ,GACT,EAAE,WAAW,eAsDb;AAyED,oBAAY,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,QAAQ,GACT,EAAE,gBAAgB,eAsClB"}

package/dist/components/Select/index.story.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzC,OAAO,EAAe,OAAO,IAAI,MAAM,EAAE,MAAM,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAElD,wBA8CC;AAED,aAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,uBAAuB,EAAE,OAAO,CAAA;IAChC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAChC,CAAA;AA8CD,eAAO,MAAM,OAAO;;CAAoB,CAAA;AAcxC,aAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CAY7C,CAAA"}

package/dist/components/Select/index.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.test.tsx"],"names":[],"mappings":""}