@charcoal-ui/react 3.7.0 → 3.9.0

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

@@ -1,7 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots TextArea Auto Height 1`] = `
-.c3 {
+exports[`Storybook Tests TextArea AutoHeight 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;
@@ -9,7 +47,7 @@ exports[`Storyshots TextArea Auto Height 1`] = `
   color: var(--charcoal-text1);
 }
 
-.c3::before {
+.c4::before {
   display: block;
   width: 0;
   height: 0;
@@ -17,7 +55,7 @@ exports[`Storyshots TextArea Auto Height 1`] = `
   margin-top: -4px;
 }
 
-.c3::after {
+.c4::after {
   display: block;
   width: 0;
   height: 0;
@@ -25,7 +63,7 @@ exports[`Storyshots TextArea Auto Height 1`] = `
   margin-bottom: -4px;
 }
 
-.c5 {
+.c6 {
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
@@ -34,7 +72,7 @@ exports[`Storyshots TextArea Auto Height 1`] = `
   transition: 0.2s color,0.2s box-shadow;
 }
 
-.c5::before {
+.c6::before {
   display: block;
   width: 0;
   height: 0;
@@ -42,7 +80,7 @@ exports[`Storyshots TextArea Auto Height 1`] = `
   margin-top: -4px;
 }
 
-.c5::after {
+.c6::after {
   display: block;
   width: 0;
   height: 0;
@@ -50,27 +88,27 @@ exports[`Storyshots TextArea Auto Height 1`] = `
   margin-bottom: -4px;
 }
 
-.c5:not(:disabled):not([aria-disabled]):hover,
-.c5[aria-disabled='false']:hover {
+.c6:not(:disabled):not([aria-disabled]):hover,
+.c6[aria-disabled='false']:hover {
   color: var(--charcoal-text3-hover);
 }
 
-.c5:not(:disabled):not([aria-disabled]):active,
-.c5[aria-disabled='false']:active {
+.c6:not(:disabled):not([aria-disabled]):active,
+.c6[aria-disabled='false']:active {
   color: var(--charcoal-text3-press);
 }
 
-.c5:not(:disabled):not([aria-disabled]):active,
-.c5[aria-disabled='false']:active,
-.c5:not(:disabled):not([aria-disabled]):focus,
-.c5[aria-disabled='false']:focus,
-.c5:not(:disabled):not([aria-disabled]):focus-visible,
-.c5[aria-disabled='false']:focus-visible {
+.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);
 }
 
-.c1 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -81,15 +119,15 @@ exports[`Storyshots TextArea Auto Height 1`] = `
   align-items: center;
 }
 
-.c1 > .c4 {
+.c2 > .c5 {
   margin-left: auto;
 }
 
-.c2 {
+.c3 {
   margin-bottom: 8px;
 }
 
-.c0 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -99,7 +137,7 @@ exports[`Storyshots TextArea Auto Height 1`] = `
   flex-direction: column;
 }
 
-.c6 {
+.c8 {
   position: relative;
   overflow: hidden;
   color: var(--charcoal-text2);
@@ -110,17 +148,17 @@ exports[`Storyshots TextArea Auto Height 1`] = `
   height: calc(22px * 4 + 18px);
 }
 
-.c6:not([aria-disabled]):hover,
-.c6 [aria-disabled='false']:hover {
+.c8:not([aria-disabled]):hover,
+.c8 [aria-disabled='false']:hover {
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c6:focus-within {
+.c8:focus-within {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c7 {
+.c9 {
   border: none;
   outline: none;
   resize: none;
@@ -144,22 +182,27 @@ exports[`Storyshots TextArea Auto Height 1`] = `
   background: none;
 }
 
-.c7::-webkit-input-placeholder {
+.c9::-webkit-input-placeholder {
   color: var(--charcoal-text3);
 }
 
-.c7::-moz-placeholder {
+.c9::-moz-placeholder {
   color: var(--charcoal-text3);
 }
 
-.c7:-ms-input-placeholder {
+.c9:-ms-input-placeholder {
   color: var(--charcoal-text3);
 }
 
-.c7::placeholder {
+.c9::placeholder {
   color: var(--charcoal-text3);
 }
 
+.c0 {
+  display: grid;
+  gap: 24px;
+}
+
 <div
   data-dark={false}
 >
@@ -167,57 +210,68 @@ exports[`Storyshots TextArea Auto Height 1`] = `
     className="c0"
   >
     <div
-      className="c1 c2"
-      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",
-        }
-      }
+      className="c1"
     >
-      <label
-        className="c3"
-        htmlFor="test-id"
-        id="test-id"
-      >
-        Label
-      </label>
       <div
-        className="c4 c5"
+        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",
+          }
+        }
       >
-        <span />
+        <label
+          className="c4"
+          htmlFor="test-id"
+          id="test-id"
+        >
+          Label
+        </label>
+        <div
+          className="c5 c6"
+        >
+          <span>
+            <button
+              className="c7"
+              onClick={[Function]}
+            >
+              Text Link
+            </button>
+          </span>
+        </div>
       </div>
-    </div>
-    <div
-      className="c6"
-      rows={4}
-    >
-      <textarea
-        aria-labelledby="test-id"
-        className="c7"
-        disabled={false}
-        id="test-id"
-        onChange={[Function]}
-        placeholder="TextArea"
-        readOnly={false}
-        required={false}
+      <div
+        className="c8"
         rows={4}
-        value=""
-      />
+      >
+        <textarea
+          aria-labelledby="test-id"
+          className="c9"
+          disabled={false}
+          id="test-id"
+          onChange={[Function]}
+          placeholder="Text Area"
+          readOnly={false}
+          required={false}
+          rows={4}
+          value=""
+        />
+      </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`Storyshots TextArea Default 1`] = `
+exports[`Storybook Tests TextArea Default 1`] = `
 .c7 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -488,7 +542,7 @@ exports[`Storyshots TextArea Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots TextArea Has Count 1`] = `
+exports[`Storybook Tests TextArea HasCount 1`] = `
 .c7 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -774,7 +828,7 @@ exports[`Storyshots TextArea Has Count 1`] = `
 </div>
 `;
 
-exports[`Storyshots TextArea Has Label 1`] = `
+exports[`Storybook Tests TextArea HasLabel 1`] = `
 .c9 {
   cursor: pointer;
   -webkit-appearance: none;

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

@@ -1,10 +1,10 @@
 import styled from 'styled-components'
-import { Story } from '../../_lib/compat'
 import Clickable from '../Clickable'
-import TextField, { TextFieldProps } from '.'
+import TextField from '.'
 import { px } from '@charcoal-ui/utils'
 import IconButton from '../IconButton'
 import { useCallback, useState } from 'react'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'TextField',
@@ -12,86 +12,73 @@ export default {
   argTypes: {},
   args: {
     showLabel: false,
-    label: 'Label',
     assistiveText: '',
     disabled: false,
     required: false,
     invalid: false,
+    label: 'Label',
+    requiredText: '*必須',
+    subLabel: <Clickable>Text Link</Clickable>,
+    placeholder: 'TextField',
   },
-}
+  render: function Render(args) {
+    return (
+      <Container>
+        <TextField {...args} />
+      </Container>
+    )
+  },
+} as Meta<typeof TextField>
 
 const Container = styled.div`
   display: grid;
   gap: ${({ theme }) => px(theme.spacing[24])};
 `
 
-const Template: Story<Partial<TextFieldProps>> = (args) => (
-  <Container>
-    <TextField
-      label="Label"
-      requiredText="*必須"
-      subLabel={<Clickable>Text Link</Clickable>}
-      placeholder="TextField"
-      {...args}
-    />
-  </Container>
-)
-
-export const Default = Template.bind({})
+export const Default = {}
 
-export const HasLabel = Template.bind({})
-HasLabel.args = {
-  showLabel: true,
-  assistiveText: 'Assistive text',
-  required: true,
+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 HasCount = Template.bind({})
-HasCount.args = {
-  showCount: true,
-  maxLength: 100,
+export const HasLabel = {
+  args: {
+    showLabel: true,
+    assistiveText: 'Assistive text',
+    required: true,
+  },
 }
 
-export const HasAffix: Story<Partial<TextFieldProps>> = (args) => (
-  <TextField label="Label" placeholder="path/to/your/file" {...args} />
-)
-HasAffix.args = {
-  showCount: true,
-  maxLength: 200,
-  prefix: '/home/john/',
-  suffix: '.png',
+export const HasCount = {
+  args: {
+    showCount: true,
+    maxLength: 100,
+  },
 }
 
-export const PrefixIcon: Story<Partial<TextFieldProps>> = (args) => {
-  const [value, setValue] = useState('')
-  const handleChange = useCallback((value: string) => {
-    setValue(value)
-  }, [])
-  const handleClear = useCallback(() => {
-    setValue('')
-  }, [])
-  return (
-    <TextField
-      {...args}
-      label="Label"
-      placeholder="作品を検索"
-      value={value}
-      onChange={handleChange}
-      prefix={
-        <PrefixIconWrap>
-          <pixiv-icon name="16/Search" />
-        </PrefixIconWrap>
-      }
-      suffix={
-        <IconButton
-          variant="Overlay"
-          icon={'16/Remove'}
-          size="XS"
-          onClick={handleClear}
-        />
-      }
-    />
-  )
+export const HasAffix: StoryObj<typeof TextField> = {
+  args: {
+    showCount: true,
+    maxLength: 200,
+    prefix: '/home/john/',
+    suffix: '.png',
+  },
 }
 
 const PrefixIconWrap = styled.div`
@@ -99,3 +86,37 @@ const PrefixIconWrap = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.color.text3};
 `
+
+export const PrefixIcon: StoryObj<typeof TextField> = {
+  render: function Render(args) {
+    const [value, setValue] = useState('')
+    const handleChange = useCallback((value: string) => {
+      setValue(value)
+    }, [])
+    const handleClear = useCallback(() => {
+      setValue('')
+    }, [])
+    return (
+      <TextField
+        {...args}
+        label="Label"
+        placeholder="作品を検索"
+        value={value}
+        onChange={handleChange}
+        prefix={
+          <PrefixIconWrap>
+            <pixiv-icon name="16/Search" />
+          </PrefixIconWrap>
+        }
+        suffix={
+          <IconButton
+            variant="Overlay"
+            icon={'16/Remove'}
+            size="XS"
+            onClick={handleClear}
+          />
+        }
+      />
+    )
+  },
+}