Fix events fired by Select

package.json

@@ -85,7 +85,8 @@
     "downshift": "^6.0.6",
     "lodash": "*",
     "tinycolor2": "^1.4.1",
-    "tslib": "^2.0.3"
+    "tslib": "^2.0.3",
+    "use-deep-compare-effect": "^1.4.0"
   },
   "devDependencies": {
     "@actions/core": "^1.1.0",
@@ -119,6 +120,7 @@
     "@types/rimraf": "^2.0.3",
     "@types/storybook__react": "^5.2.1",
     "@types/svgo": "^1.2.1",
+    "@types/yup": "^0.29.9",
     "@typescript-eslint/eslint-plugin": "^4.6.1",
     "@typescript-eslint/parser": "^4.6.1",
     "auto": "^9.53.1",
@@ -133,6 +135,7 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "faker": "^4.1.0",
+    "formik": "^2.2.5",
     "framer-motion": "1.6.8",
     "jest": "^26.5.3",
     "jest-emotion": "^10.0.32",
@@ -155,7 +158,8 @@
     "ts-jest": "^26.4.4",
     "ts-loader": "^8.0.11",
     "ts-node": "^9.0.0",
-    "typescript": "^4.1.1-rc"
+    "typescript": "^4.1.1-rc",
+    "yup": "^0.31.0"
   },
   "peerDependencies": {
     "@emotion/cache": ">10.0.29",

rollup.config.js

@@ -49,27 +49,28 @@ function CJS() {
     external: [
       "@emotion/cache",
       "@emotion/core",
-      "@react-aria/focus",
-      "@react-aria/utils",
-      "@tippyjs/react",
       "@popperjs/core",
       "@popperjs/core/lib/utils/computeAutoPlacement",
       "@popperjs/core/lib/utils/detectOverflow",
       "@popperjs/core/lib/utils/getOppositePlacement",
       "@popperjs/core/lib/utils/getOppositeVariationPlacement",
       "@react-aria/focus",
+      "@react-aria/focus",
       "@react-aria/switch",
       "@react-aria/utils",
+      "@react-aria/utils",
       "@react-aria/visually-hidden",
       "@react-stately/toggle",
+      "@tippyjs/react",
       "classnames",
       "downshift",
       "framer-motion",
-      "prop-types",
       "lodash/omit",
-      "react",
+      "prop-types",
       "react-dom",
+      "react",
       "tinycolor2",
+      "use-deep-compare-effect",
     ],
     output: [
       {

src/Select/Select.spec.tsx

@@ -1,14 +1,17 @@
 import "@testing-library/jest-dom";
 import React from "react";
 import userEvent from "@testing-library/user-event";
-import { act, render, screen, within } from "@testing-library/react";
+import { act, render, screen, within, waitFor } from "@testing-library/react";
 import { Select } from "../Select";
 import { SpaceKitProvider } from "../SpaceKitProvider";
+import { FormikConfig, useFormik } from "formik";
+import * as Yup from "yup";
 
-test("given no `value`, should render `label`", () => {
+test('given no `value`, should render `<option value="" />`', () => {
   render(
     <SpaceKitProvider disableAnimations>
-      <Select value={null} label={<>select an item</>}>
+      <Select initialValue="">
+        <option value="">select an item</option>
         <option value="a">a</option>
         <option value="b">b</option>
       </Select>
@@ -20,7 +23,34 @@ test("given no `value`, should render `label`", () => {
   ).toBeInTheDocument();
 });
 
-test("given a `value`, should render initial value", () => {
+test("label props should be called back", () => {
+  const labelText = "select label";
+  const SelectWithLabel: React.FC = () => {
+    const [labelProps, setLabelProps] = React.useState();
+
+    return (
+      <>
+        <label {...labelProps}>{labelText}</label>
+        <Select initialValue="" labelPropsCallbackRef={setLabelProps}>
+          <option value="">select an item</option>
+          <option value="a">a</option>
+          <option value="b">b</option>
+        </Select>
+      </>
+    );
+  };
+
+  render(
+    <SpaceKitProvider disableAnimations>
+      <SelectWithLabel />
+    </SpaceKitProvider>
+  );
+
+  expect(screen.getByText(labelText)).toBeInTheDocument();
+  expect(screen.getByLabelText(labelText)).toBeInTheDocument();
+});
+
+test("given a controlled `value`, should render controlled value", () => {
   render(
     <SpaceKitProvider disableAnimations>
       <Select value="a">
@@ -97,3 +127,58 @@ test("when clicking a select trigger in a form, form is not submitted", () => {
   expect(screen.getByRole("listbox")).toBeInTheDocument();
   expect(handleSubmit).not.toHaveBeenCalled();
 });
+
+test("works correctly with formik", async () => {
+  const validationSchema = Yup.object({
+    letter: Yup.mixed()
+      .oneOf(["", "a", "b"] as const)
+      .defined(),
+  }).defined();
+  type FormValues = Yup.InferType<typeof validationSchema>;
+
+  const TestComponent: React.FC<{
+    onSubmit: FormikConfig<FormValues>["onSubmit"];
+  }> = ({ onSubmit }) => {
+    const [labelProps, setLabelProps] = React.useState();
+    const { values, handleChange, handleBlur, handleSubmit } = useFormik<
+      FormValues
+    >({
+      initialValues: { letter: "" },
+      validationSchema,
+      onSubmit,
+    });
+
+    return (
+      <SpaceKitProvider disableAnimations>
+        <form onSubmit={handleSubmit}>
+          <label {...labelProps}>input</label>
+          <Select
+            name="letter"
+            onChange={handleChange}
+            onBlur={handleBlur}
+            value={values.letter}
+            labelPropsCallbackRef={setLabelProps}
+          >
+            <option value="">Select an option</option>
+            <option value="a">a</option>
+            <option value="b">b</option>
+          </Select>
+          <button type="submit">submit</button>
+        </form>
+      </SpaceKitProvider>
+    );
+  };
+
+  const onSubmit = jest.fn();
+
+  render(<TestComponent onSubmit={onSubmit} />);
+
+  userEvent.click(screen.getByLabelText("input"));
+  userEvent.click(screen.getByRole("option", { name: /^a$/i }));
+  userEvent.click(screen.getByRole("button", { name: /submit/i }));
+  // Wait for the `onSubmit` to have been called
+  await waitFor(() => {
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+  expect(onSubmit).toHaveBeenCalledWith({ letter: "a" }, expect.anything());
+});