Merge pull request #150 from csandman/chakra-2-fixes

Chakra 2 Fixes

Author: csandman

.eslintrc

@@ -26,6 +26,7 @@
   },
   "plugins": ["@typescript-eslint"],
   "rules": {
+    "no-console": "error",
     "curly": ["error", "all"],
     "no-underscore-dangle": "off",
     "import/prefer-default-export": "off",

README.md

@@ -738,18 +738,13 @@ See this issue for some discussion about using this package with `react-hook-for
 
 By default, `react-hook-form` uses [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) to reduced input renders however this only works for native HTML inputs. Because chakra-react-select is not a native HTML input, you'll need to use react-hook-form's [`Controller`](https://react-hook-form.com/api/usecontroller/controller) component or [`useController`](https://react-hook-form.com/api/usecontroller) hook in order to keep the value(s) tracked in `react-hook-form`'s state. Here are some examples using each:
 
-- `Controller` multi select with built-in validation
-  - Vanilla JS: https://codesandbox.io/s/chakra-react-select-react-hook-form-controller-v7llc?file=/example.js
-  - TypeScript: https://codesandbox.io/s/chakra-react-select-react-hook-form-controller-typescript-v8ps5?file=/app.tsx
-- `useController` multi select with built-in validation
-  - Vanilla JS: https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-n8wuf?file=/example.js
-  - TypeScript: https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-typescript-qcm23?file=/app.tsx
-- `useController` single select
-  - Vanilla JS: https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-single-select-vanilla-js-11x4zk?file=/example.js
-  - TypeScript: https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-single-select-typescript-vylckh?file=/app.tsx
-- Multi select with `yup` validation (advanced example)
-  - Vanilla JS: https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-tno8v?file=/src/app.js
-  - TypeScript: https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-typescript-n7slhu?file=/app.tsx
+- `Controller` multi select with built-in validation [ [JavaScript](https://codesandbox.io/s/chakra-react-select-react-hook-form-controller-v7llc?file=/example.js) | [TypeScript](https://codesandbox.io/s/chakra-react-select-react-hook-form-controller-typescript-v8ps5?file=/app.tsx) ]
+- `useController` multi select with built-in validation [ [JavaScript](https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-n8wuf?file=/example.js) | [TypeScript](https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-typescript-qcm23?file=/app.tsx) ]
+- `useController` single select [ [JavaScript](https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-single-select-vanilla-js-11x4zk?file=/example.js) | [TypeScript](https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-single-select-typescript-vylckh?file=/app.tsx) ]
+- Multi select with [`yup`](https://github.com/jquense/yup) validation (advanced example) [ [JavaScript](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-tno8v?file=/src/app.js) | [TypeScript](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-typescript-n7slhu?file=/app.tsx) ]
+- Single select with [`yup`](https://github.com/jquense/yup) validation (advanced example) [ [JavaScript](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-yup-validation-y5kjc1?file=/src/app.js) | [TypeScript](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-yup-validation-typescript-phmv0u?file=/app.tsx) ]
+- Multi select with [`zod`](https://github.com/colinhacks/zod) validation (advanced example) [ [JavaScript](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-zod-validation-cu0rku?file=/src/app.js) | [TypeScript](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-zod-validation-typescript-5fyhfh?file=/app.tsx) ]
+- Single select with [`zod`](https://github.com/colinhacks/zod) validation (advanced example) [ [JavaScript](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-zod-validation-jd588n?file=/src/app.js) | [TypeScript](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-zod-validation-typescript-m1dqme?file=/app.tsx) ]
 
 ### [`formik`](https://formik.org/)
 

src/chakra-components/containers.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import type { ReactElement } from "react";
 import { Box } from "@chakra-ui/layout";
 import type { SystemStyleObject } from "@chakra-ui/system";
 import type {
@@ -16,7 +15,7 @@ export const SelectContainer = <
   Group extends GroupBase<Option>
 >(
   props: ContainerProps<Option, IsMulti, Group>
-): ReactElement => {
+) => {
   const {
     children,
     className,
@@ -43,6 +42,7 @@ export const SelectContainer = <
 
   return (
     <Box
+      {...innerProps}
       className={cx(
         {
           "--is-disabled": isDisabled,
@@ -52,7 +52,6 @@ export const SelectContainer = <
         className
       )}
       sx={sx}
-      {...innerProps}
     >
       {children}
     </Box>
@@ -65,13 +64,14 @@ export const ValueContainer = <
   Group extends GroupBase<Option>
 >(
   props: ValueContainerProps<Option, IsMulti, Group>
-): ReactElement => {
+) => {
   const {
     children,
     className,
     cx,
     isMulti,
     hasValue,
+    innerProps,
     selectProps: { size, chakraStyles },
   } = props;
 
@@ -98,6 +98,7 @@ export const ValueContainer = <
 
   return (
     <Box
+      {...innerProps}
       className={cx(
         {
           "value-container": true,
@@ -119,11 +120,12 @@ export const IndicatorsContainer = <
   Group extends GroupBase<Option>
 >(
   props: IndicatorsContainerProps<Option, IsMulti, Group>
-): ReactElement => {
+) => {
   const {
     children,
     className,
     cx,
+    innerProps,
     selectProps: { chakraStyles },
   } = props;
 
@@ -140,6 +142,7 @@ export const IndicatorsContainer = <
 
   return (
     <Box
+      {...innerProps}
       className={cx(
         {
           indicators: true,