add autoid

Author: SaraVieira

packages/components/package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "@codesandbox/common": "^1.0.8",
     "@codesandbox/template-icons": "^1.1.0",
+    "@reach/auto-id": "^0.7.1",
     "@reach/visually-hidden": "^0.7.0",
     "@styled-system/css": "^5.1.4",
     "add": "^2.0.6",

packages/components/src/components/Input/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import css from '@styled-system/css';
 import VisuallyHidden from '@reach/visually-hidden';
-import { uniqueId } from 'lodash-es';
+import { useId } from '@reach/auto-id';
 import { Text } from '../Text';
 
 const placeholderStyles = {
@@ -35,7 +35,7 @@ export const Input: React.FC<IInputProps> = ({
   label,
   ...props
 }) => {
-  const id = props.id || uniqueId('input_');
+  const id = useId(props.id);
   return (
     <>
       {props.placeholder && !label ? (

packages/components/src/components/SearchInput/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import css from '@styled-system/css';
 import VisuallyHidden from '@reach/visually-hidden';
-import { uniqueId } from 'lodash-es';
+import { useId } from '@reach/auto-id';
 import { Text } from '../Text';
 import { InputComponent } from '../Input';
 import { Element } from '../Element';
@@ -51,7 +51,7 @@ interface ISearchProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 
 export const SearchInput: React.FC<ISearchProps> = ({ label, ...props }) => {
-  const id = props.id || uniqueId('SearchInput_');
+  const id = useId(props.id);
 
   return (
     <>

packages/components/src/components/Select/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import styled from 'styled-components';
 import css from '@styled-system/css';
 import VisuallyHidden from '@reach/visually-hidden';
-import { uniqueId } from 'lodash-es';
+import { useId } from '@reach/auto-id';
 import { Text } from '../Text';
 import { Element } from '../Element';
 
@@ -74,7 +74,7 @@ export const Select: React.FC<ISelectProps> = ({
     [icon]
   );
 
-  const id = props.id || uniqueId('select_');
+  const id = useId(props.id);
 
   return (
     <>

packages/components/src/components/Textarea/index.tsx

@@ -1,11 +1,11 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback } from 'react';
 import styled, {
   StyledComponent,
   StyledComponentInnerOtherProps,
 } from 'styled-components';
 import css from '@styled-system/css';
 import VisuallyHidden from '@reach/visually-hidden';
-import { uniqueId } from 'lodash-es';
+import { useId } from '@reach/auto-id';
 import { Text } from '../Text';
 import { Stack } from '../Stack';
 import { InputComponent } from '../Input';
@@ -55,11 +55,7 @@ export const Textarea: React.FC<ITextareaProps> = ({
 }) => {
   const [wordCount, setWordCount] = useState(0);
   const [value, setValue] = useState('');
-  const [id, setID] = useState('textarea_0');
-
-  useEffect(() => {
-    setID(uniqueId('textarea_'));
-  }, []);
+  const id = useId(props.id);
 
   const Wrapper = useCallback(
     ({ children }) =>

yarn.lock

@@ -3850,6 +3850,11 @@
     hey-listen "^1.0.8"
     style-value-types "^3.1.6"
 
+"@reach/auto-id@^0.7.1":
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.7.1.tgz#68ff4345b12c5ead6d0374a574480090b18a1b31"
+  integrity sha512-7bE/tCFc6KBMKkSfquJFpeZic+OHe+RAE2OHCN66felnleVwm6hr128d2UAp5vb1H12F6fm1kCUV9s3xNqSwMQ==
+
 "@reach/router@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e"