RubyGems - playbook_ui - Versions diffs - 7.11.0.pre.alpha1 → 7.13.0 - Mend

playbook_ui 7.11.0.pre.alpha1 → 7.13.0

Files changed (329) hide show

data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.jsx CHANGED

@@ -6,7 +6,7 @@ import {
   Title,
 } from '../..'
-const PopoverScrollHeightDark = () => {
+const PopoverScrollHeightDark = (props) => {
   const [showPopover, setShowPopover] = useState(false)
   const handleTogglePopover = () => {
@@ -36,15 +36,18 @@ const PopoverScrollHeightDark = () => {
         reference={popoverTrigger}
         shouldClosePopover={handleShouldClosePopover}
         show={showPopover}
+        {...props}
     >
       <Body
           marginBottom="sm"
           text=" Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this."
+          {...props}
       />
       <Title
           dark
           size={4}
           text="- Abraham Lincoln"
+          {...props}
       />
     </PbReactPopover>

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx CHANGED

@@ -5,7 +5,7 @@ import {
   PbReactPopover,
 } from '../..'
-const PopoverZIndex = () => {
+const PopoverZIndex = (props) => {
   const [showPopover, setShowPopover] = useState(false)
   const handleTogglePopover = () => {
@@ -30,6 +30,7 @@ const PopoverZIndex = () => {
         <Body
             marginBottom="md"
             text="I've got a z-index of 2"
+            {...props}
         />
       </div>
       <PbReactPopover
@@ -40,6 +41,7 @@ const PopoverZIndex = () => {
           shouldClosePopover={handleShouldClosePopover}
           show={showPopover}
           zIndex={3}
+          {...props}
       >
         {'I have a custom z-index of 3'}
       </PbReactPopover>

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.jsx CHANGED

@@ -5,7 +5,7 @@ import {
   PbReactPopover,
 } from '../..'
-const PopoverZIndexDark = () => {
+const PopoverZIndexDark = (props) => {
   const [showPopover, setShowPopover] = useState(false)
   const handleTogglePopover = () => {
@@ -32,6 +32,7 @@ const PopoverZIndexDark = () => {
             dark
             marginBottom="md"
             text="I've got a z-index of 2"
+            {...props}
         />
       </div>
       <PbReactPopover
@@ -42,6 +43,7 @@ const PopoverZIndexDark = () => {
           shouldClosePopover={handleShouldClosePopover}
           show={showPopover}
           zIndex={3}
+          {...props}
       >
         {'I have a custom z-index of 3'}
       </PbReactPopover>

data/app/pb_kits/playbook/pb_radio/_radio.jsx CHANGED

@@ -1,7 +1,7 @@
 /* @flow */
 /*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
-import React from 'react'
+import React, { forwardRef } from 'react'
 import Body from '../pb_body/_body.jsx'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -37,7 +37,7 @@ const Radio = ({
   value = 'radio_text',
   onChange = () => {},
   ...props
-}: RadioProps) => {
+}: RadioProps, ref) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), className)
@@ -57,6 +57,7 @@ const Radio = ({
             id={id}
             name={name}
             onChange={onChange}
+            ref={ref}
             text={text}
             type="radio"
             value={value}
@@ -72,4 +73,4 @@ const Radio = ({
   )
 }
-export default Radio
+export default forwardRef(Radio)

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom.jsx CHANGED

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Radio } from '../../'
-const RadioCustom = () => {
+const RadioCustom = (props) => {
   const [choice, setChoice] = useState('power')
   const handleOnChange = ({ target }) => {
@@ -18,6 +18,7 @@ const RadioCustom = () => {
       <Radio
           className="my_custom_class"
           label="Custom Power"
+          {...props}
       >
         <input
             checked={choice === 'power'}
@@ -25,12 +26,14 @@ const RadioCustom = () => {
             onChange={handleOnChange}
             type="radio"
             value="power"
+            {...props}
         />
       </Radio>
       <br />
       <Radio
           className="my_custom_class"
           label="Custom Nitro"
+          {...props}
       >
         <input
             checked={choice === 'nitro'}
@@ -38,12 +41,14 @@ const RadioCustom = () => {
             onChange={handleOnChange}
             type="radio"
             value="nitro"
+            {...props}
         />
       </Radio>
       <br />
       <Radio
           className="my_custom_class"
           label="Custom Google"
+          {...props}
       >
         <input
             checked={choice === 'google'}
@@ -51,6 +56,7 @@ const RadioCustom = () => {
             onChange={handleOnChange}
             type="radio"
             value="google"
+            {...props}
         />
       </Radio>
     </div>

data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx CHANGED

@@ -2,12 +2,15 @@ import React from 'react'
 import { Radio } from '../../'
 const RadioDefault = () => {
+  const ref = React.createRef()
   return (
     <div>
       <Radio
           defaultChecked
           label="Power"
           name="Group2"
+          ref={ref}
           value="Power"
       />
       <br />

data/app/pb_kits/playbook/pb_radio/docs/index.js CHANGED

@@ -1,2 +1,3 @@
 export { default as RadioDefault } from './_radio_default.jsx'
 export { default as RadioCustom } from './_radio_custom.jsx'
+export { default as RadioError } from './_radio_error.jsx'

data/app/pb_kits/playbook/pb_radio/radio.test.js ADDED

@@ -0,0 +1,71 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import Radio from './_radio'
+const testId = 'radio1',
+  kitClass = 'pb_radio_kit'
+test('returns namespaced class name', () => {
+  render(
+    <Radio
+        data={{ testid: testId }}
+        defaultChecked
+        label="Power"
+        name="Group2"
+        value="Power"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(kitClass)
+})
+test('returns dark class name', () => {
+  render(
+    <Radio
+        dark
+        data={{ testid: testId }}
+        defaultChecked
+        label="Power"
+        name="Group2"
+        value="Power"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} dark`)
+})
+test('returns error class name', () => {
+  render(
+    <Radio
+        data={{ testid: testId }}
+        defaultChecked
+        error
+        label="Power"
+        name="Group2"
+        value="Power"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} error`)
+})
+test('returns dark + error class name', () => {
+  render(
+    <Radio
+        dark
+        data={{ testid: testId }}
+        defaultChecked
+        error
+        label="Power"
+        name="Group2"
+        value="Power"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} dark error`)
+})

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx CHANGED

@@ -1,9 +1,11 @@
 import React from 'react'
 import { RichTextEditor } from '../../'
-const RichTextEditorDefault = () => (
+const RichTextEditorDefault = (props) => (
   <div>
-    <RichTextEditor />
+    <RichTextEditor
+        {...props}
+    />
   </div>
 )

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx CHANGED

@@ -1,11 +1,17 @@
 import React from 'react'
 import { RichTextEditor } from '../../'
-const RichTextEditorFocus = () => (
+const RichTextEditorFocus = (props) => (
   <>
-    <RichTextEditor focus />
+    <RichTextEditor
+        focus
+        {...props}
+    />
     <br />
-    <RichTextEditor focus />
+    <RichTextEditor
+        focus
+        {...props}
+    />
   </>
 )
 export default RichTextEditorFocus

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb ADDED

@@ -0,0 +1,25 @@
+<%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
+<div id="card-obfuscation" style="display:none">
+  <%= pb_rails("card", props: { margin_top: "md" }) do %>
+   <div id="content-preview" class="trix-content">
+   </div>
+  <% end %>
+</div>
+<%= pb_rails("button", props: { id: "preview-button", variant: "secondary", margin_top: "md" }) do %>
+  <span>Preview Output</span>
+<% end %>
+<script>
+  // Button event handler
+  const button = document.getElementById('preview-button');
+  button.addEventListener('click', function() {
+    const content = document.getElementById('content-preview-editor');
+    const previewArea = document.getElementById('content-preview');
+    const cardDiv = document.getElementById('card-obfuscation');
+    previewArea.innerHTML = content.value;
+    cardDiv.classList.add('mt_md');
+    cardDiv.style.display = 'block';
+  });
+</script>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx ADDED

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Card,
+  RichTextEditor,
+} from '../../'
+const RichTextEditorPreview = () => {
+  const [showPreview, setShowPreview] = useState(false)
+  const [previewText, setPreviewText] = useState(<div />)
+  const handleChange = (event) => setPreviewText(event)
+  const handleClick = () => {
+    setShowPreview(true)
+  }
+  return (
+    <div>
+      <RichTextEditor
+          id="content-preview-editor"
+          onChange={handleChange}
+      />
+      <If condition={showPreview}>
+        <Card marginTop="md">
+          <div
+              className="trix-content"
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: previewText }}
+              id="preview-content"
+          />
+        </Card>
+        <Else />
+        <div />
+      </If>
+      <Button
+          id="preview-button"
+          marginTop="md"
+          onClick={handleClick}
+          text="Preview Output"
+          variant="secondary"
+      />
+    </div>
+  )
+}
+export default RichTextEditorPreview

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx CHANGED

@@ -1,9 +1,12 @@
 import React from 'react'
 import { RichTextEditor } from '../../'
-const RichTextEditorSimple = () => (
+const RichTextEditorSimple = (props) => (
   <div>
-    <RichTextEditor simple />
+    <RichTextEditor
+        simple
+        {...props}
+    />
   </div>
 )

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx CHANGED

@@ -1,12 +1,13 @@
 import React from 'react'
 import { RichTextEditor } from '../../'
-const RichTextEditorSticky = () => (
+const RichTextEditorSticky = (props) => (
   <div>
     <RichTextEditor
         id="sticky"
         sticky
         value="In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page. Dummy text to enable scroll.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis."
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx CHANGED

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { RichTextEditor, Select } from '../../'
 import { changelog, release } from './templates.js'
-const RichTextEditorTemplates = () => {
+const RichTextEditorTemplates = (props) => {
   const [editorContent, setEditorContent] = useState('')
   const handleChange = (event) => {
@@ -27,10 +27,12 @@ const RichTextEditorTemplates = () => {
           label="Template"
           onChange={handleChange}
           options={options}
+          {...props}
       />
       <RichTextEditor
           id="template"
           template={editorContent}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml CHANGED

@@ -1,11 +1,12 @@
 examples:
   rails:
   - rich_text_editor_default: Default
   - rich_text_editor_simple: Simple
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
+  - rich_text_editor_preview: Preview
   react:
   - rich_text_editor_default: Default
@@ -13,3 +14,4 @@ examples:
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
+  - rich_text_editor_preview: Preview

data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js CHANGED

@@ -3,3 +3,4 @@ export { default as RichTextEditorSimple } from './_rich_text_editor_simple.jsx'
 export { default as RichTextEditorFocus } from './_rich_text_editor_focus.jsx'
 export { default as RichTextEditorSticky } from './_rich_text_editor_sticky.jsx'
 export { default as RichTextEditorTemplates } from './_rich_text_editor_templates.jsx'
+export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'

data/app/pb_kits/playbook/pb_select/_select.jsx CHANGED

@@ -1,6 +1,6 @@
 /* @flow */
-import React from 'react'
+import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 import {
   Body,
@@ -69,7 +69,7 @@ const Select = ({
   required = false,
   value,
   ...props
-}: SelectProps) => {
+}: SelectProps, ref: React.ElementRef<"select">) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)
@@ -107,6 +107,7 @@ const Select = ({
               multiple={multiple}
               name={name}
               onChange={onChange}
+              ref={ref}
               required={required}
               value={value}
           >
@@ -132,4 +133,4 @@ const Select = ({
   )
 }
-export default Select
+export default forwardRef(Select)