From 14a052843b0393bd9482ac108401ad6c4f34f076 Mon Sep 17 00:00:00 2001
From: John Panos <john.panos@appfolio.com>
Date: Thu, 1 Aug 2024 14:32:40 -0700
Subject: [PATCH 1/3] wip

---
 package.json                     |   1 +
 src/components/Select/Select.js  |  73 --------
 src/components/Select/Select.tsx | 117 +++++++++++++
 yarn.lock                        | 281 +++++++++++++++++++++++++++++--
 4 files changed, 383 insertions(+), 89 deletions(-)
 delete mode 100644 src/components/Select/Select.js
 create mode 100644 src/components/Select/Select.tsx

diff --git a/package.json b/package.json
index 9a1abe05a..7717e14f0 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "prop-types": "^15.7.2",
     "react-imask": "^6.2.2",
     "react-resize-detector": "^4.2.3",
+    "react-select": "^5.8.0",
     "react-select-plus": "1.2.0",
     "react-sortable-hoc": "^1.11.0",
     "react-text-mask": "~5.0.2",
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
deleted file mode 100644
index a5c565596..000000000
--- a/src/components/Select/Select.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useState, useRef } from 'react';
-import ReactSelect from 'react-select-plus';
-import Close from '../Button/Close';
-import SelectArrow from './SelectArrow';
-import SelectMultiValue from './SelectMultiValue';
-import Option from './SelectOption.js';
-
-const getSelectArrow = (isOpen, arrowRenderer) => (
-  <SelectArrow isOpen={isOpen} render={arrowRenderer} />
-);
-
-const getCloseButton = () => (
-  <Close className="d-flex" tabIndex={-1} style={{ fontSize: '.5rem' }} />
-);
-
-const Select = ({
-  arrowRenderer,
-  className,
-  defaultValue,
-  inputProps,
-  valueComponent,
-  ...props
-}) => {
-  const [value, setValue] = useState(props.value || defaultValue);
-
-  // Store last props.value and call setValue when it changes.
-  // This is not correct behavior for controlled components but consumers rely on it.
-  const lastPropsValue = useRef(props.value);
-  if (!Object.is(props.value, lastPropsValue.current)) {
-    lastPropsValue.current = props.value;
-    setValue(props.value);
-  }
-
-  const onChange = (newValue) => {
-    setValue(newValue);
-    props.onChange?.(newValue);
-  };
-
-  let SelectElement = ReactSelect;
-  if (props.loadOptions && props.creatable) {
-    SelectElement = ReactSelect.AsyncCreatable;
-  } else if (props.loadOptions) {
-    SelectElement = ReactSelect.Async;
-  } else if (props.creatable) {
-    SelectElement = ReactSelect.Creatable;
-  }
-  const classNames = classnames(className, { 'select-async': props.loadOptions });
-  const valueComponentRenderer = valueComponent || (props.multi ? SelectMultiValue : undefined);
-
-  return (
-    <SelectElement
-      arrowRenderer={({ isOpen }) => getSelectArrow(isOpen, arrowRenderer)}
-      className={classNames}
-      clearRenderer={getCloseButton}
-      inputProps={{ name: props.name, ...inputProps }}
-      optionComponent={Option}
-      valueComponent={valueComponentRenderer}
-      {...props}
-      onChange={onChange}
-      value={props.value || value}
-    />
-  );
-};
-
-Select.propTypes = {
-  defaultValue: PropTypes.any,
-  ...ReactSelect.propTypes,
-};
-Select.displayName = 'Select';
-
-export default Select;
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
new file mode 100644
index 000000000..c23b36c1c
--- /dev/null
+++ b/src/components/Select/Select.tsx
@@ -0,0 +1,117 @@
+import React, { useState, useRef, useEffect } from 'react';
+import ReactSelect, {
+  components as ReactSelectComponents,
+  Props as ReactSelectProps,
+  ActionMeta,
+  SingleValue,
+  MultiValue,
+  ValueContainerProps,
+} from 'react-select';
+import AsyncSelect from 'react-select/async';
+import AsyncCreatableSelect from 'react-select/async-creatable';
+import CreatableSelect from 'react-select/creatable';
+
+export interface Option {
+  label: string;
+  value: any;
+}
+
+interface SelectProps extends Omit<ReactSelectProps<Option, boolean>, 'onChange'> {
+  options?: Option[];
+  defaultValue?: Option | Option[] | null;
+  value?: Option | Option[] | null;
+  onChange?: (value: Option | Option[] | null, action: ActionMeta<Option>) => void;
+  loadOptions?: (inputValue: string, callback: (options: Option[]) => void) => void;
+  creatable?: boolean;
+  multi?: boolean;
+  name?: string;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}
+
+const Select: React.FC<SelectProps> = ({
+                                         options,
+                                         defaultValue,
+                                         value,
+                                         onChange,
+                                         loadOptions,
+                                         creatable,
+                                         multi,
+                                         name,
+                                         inputProps,
+                                         className,
+                                         ...props
+                                       }) => {
+  const [internalValue, setInternalValue] = useState<Option | Option[] | null>(
+    value || defaultValue || null
+  );
+  const selectRef = useRef<any>(null);
+  const isControlled = value !== undefined;
+
+  useEffect(() => {
+    if (isControlled) {
+      setInternalValue(value);
+    }
+  }, [value, isControlled]);
+
+  const handleChange = (
+    newValue: SingleValue<Option> | MultiValue<Option>,
+    action: ActionMeta<Option>
+  ) => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onChange?.(newValue, action);
+  };
+
+  let SelectComponent: any = ReactSelect;
+  if (loadOptions) {
+    SelectComponent = creatable ? AsyncCreatableSelect : AsyncSelect;
+  } else if (creatable) {
+    SelectComponent = CreatableSelect;
+  }
+
+  const selectClassName = `Select ${multi ? 'Select--multi' : 'Select--single'} ${
+    loadOptions ? 'select-async' : ''
+  } ${className || ''}`.trim();
+
+  const CustomValueContainer = ({ children, ...props }: ValueContainerProps<Option, boolean>) => {
+    return (
+      <ReactSelectComponents.ValueContainer {...props}>
+        {children}
+        {name && <input type="hidden" name={name} value={props.getValue()[0]?.value || ''} />}
+      </ReactSelectComponents.ValueContainer>
+    );
+  };
+
+  return (
+    <SelectComponent
+      ref={selectRef}
+      options={options}
+      value={internalValue}
+      onChange={handleChange}
+      loadOptions={loadOptions}
+      isMulti={multi}
+      className={selectClassName}
+      classNamePrefix="Select"
+      {...props}
+      components={{
+        ...ReactSelectComponents,
+        Input: (inputComponentProps: any) => (
+          <ReactSelectComponents.Input
+            {...inputComponentProps}
+            {...inputProps}
+            name={inputProps?.name || name}
+          />
+        ),
+        ValueContainer: CustomValueContainer,
+      }}
+    />
+  );
+};
+
+// For testing purposes
+Select.Async = AsyncSelect;
+Select.AsyncCreatable = AsyncCreatableSelect;
+Select.Creatable = CreatableSelect;
+
+export default Select;
diff --git a/yarn.lock b/yarn.lock
index a9c4b42a9..74668c65e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -153,6 +153,7 @@ __metadata:
     react-dom: ^16.14.0
     react-imask: ^6.2.2
     react-resize-detector: ^4.2.3
+    react-select: ^5.8.0
     react-select-plus: 1.2.0
     react-sortable-hoc: ^1.11.0
     react-text-mask: ~5.0.2
@@ -627,6 +628,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-module-imports@npm:7.24.7"
+  dependencies:
+    "@babel/traverse": ^7.24.7
+    "@babel/types": ^7.24.7
+  checksum: 8ac15d96d262b8940bc469052a048e06430bba1296369be695fabdf6799f201dd0b00151762b56012a218464e706bc033f27c07f6cec20c6f8f5fd6543c67054
+  languageName: node
+  linkType: hard
+
 "@babel/helper-module-imports@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-module-imports@npm:7.18.6"
@@ -645,16 +656,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/helper-module-imports@npm:7.24.7"
-  dependencies:
-    "@babel/traverse": ^7.24.7
-    "@babel/types": ^7.24.7
-  checksum: 8ac15d96d262b8940bc469052a048e06430bba1296369be695fabdf6799f201dd0b00151762b56012a218464e706bc033f27c07f6cec20c6f8f5fd6543c67054
-  languageName: node
-  linkType: hard
-
 "@babel/helper-module-transforms@npm:^7.18.9":
   version: 7.18.9
   resolution: "@babel/helper-module-transforms@npm:7.18.9"
@@ -2990,6 +2991,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.18.3":
+  version: 7.25.0
+  resolution: "@babel/runtime@npm:7.25.0"
+  dependencies:
+    regenerator-runtime: ^0.14.0
+  checksum: 4a2a374a58eb01aaa65c5762606e90b3a1f448e0c637d42278b6cc0b42a9f5399b5f381ba9f237ee087da2860d14dd2d1de7bddcbe18be6a3cafba97e44bed64
+  languageName: node
+  linkType: hard
+
 "@babel/runtime@npm:^7.13.10":
   version: 7.24.6
   resolution: "@babel/runtime@npm:7.24.6"
@@ -3133,6 +3143,100 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/babel-plugin@npm:^11.12.0":
+  version: 11.12.0
+  resolution: "@emotion/babel-plugin@npm:11.12.0"
+  dependencies:
+    "@babel/helper-module-imports": ^7.16.7
+    "@babel/runtime": ^7.18.3
+    "@emotion/hash": ^0.9.2
+    "@emotion/memoize": ^0.9.0
+    "@emotion/serialize": ^1.2.0
+    babel-plugin-macros: ^3.1.0
+    convert-source-map: ^1.5.0
+    escape-string-regexp: ^4.0.0
+    find-root: ^1.1.0
+    source-map: ^0.5.7
+    stylis: 4.2.0
+  checksum: b5d4b3dfe97e6763794a42b5c3a027a560caa1aa6dcaf05c18e5969691368dd08245c077bad7397dcc720b53d29caeaaec1888121e68cfd9ab02ff52f6fef662
+  languageName: node
+  linkType: hard
+
+"@emotion/cache@npm:^11.13.0, @emotion/cache@npm:^11.4.0":
+  version: 11.13.1
+  resolution: "@emotion/cache@npm:11.13.1"
+  dependencies:
+    "@emotion/memoize": ^0.9.0
+    "@emotion/sheet": ^1.4.0
+    "@emotion/utils": ^1.4.0
+    "@emotion/weak-memoize": ^0.4.0
+    stylis: 4.2.0
+  checksum: 94b161786a03a08a1e30257478fad9a9be1ac8585ddca0c6410d7411fd474fc8b0d6d1167d7d15bdb012d1fd8a1220ac2bbc79501ad9b292b83c17da0874d7de
+  languageName: node
+  linkType: hard
+
+"@emotion/hash@npm:^0.9.2":
+  version: 0.9.2
+  resolution: "@emotion/hash@npm:0.9.2"
+  checksum: 379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387
+  languageName: node
+  linkType: hard
+
+"@emotion/memoize@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "@emotion/memoize@npm:0.9.0"
+  checksum: 038132359397348e378c593a773b1148cd0cf0a2285ffd067a0f63447b945f5278860d9de718f906a74c7c940ba1783ac2ca18f1c06a307b01cc0e3944e783b1
+  languageName: node
+  linkType: hard
+
+"@emotion/react@npm:^11.8.1":
+  version: 11.13.0
+  resolution: "@emotion/react@npm:11.13.0"
+  dependencies:
+    "@babel/runtime": ^7.18.3
+    "@emotion/babel-plugin": ^11.12.0
+    "@emotion/cache": ^11.13.0
+    "@emotion/serialize": ^1.3.0
+    "@emotion/use-insertion-effect-with-fallbacks": ^1.1.0
+    "@emotion/utils": ^1.4.0
+    "@emotion/weak-memoize": ^0.4.0
+    hoist-non-react-statics: ^3.3.1
+  peerDependencies:
+    react: ">=16.8.0"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: aa6bff49ac0c15a97cc310a36e89146c4851dcb84ba25bc284d68e19a9b9d5d78235b74915a58404d59cfa369ddaf33dc280d881ca089e4ad70310dce87e0853
+  languageName: node
+  linkType: hard
+
+"@emotion/serialize@npm:^1.2.0, @emotion/serialize@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@emotion/serialize@npm:1.3.0"
+  dependencies:
+    "@emotion/hash": ^0.9.2
+    "@emotion/memoize": ^0.9.0
+    "@emotion/unitless": ^0.9.0
+    "@emotion/utils": ^1.4.0
+    csstype: ^3.0.2
+  checksum: d428da474862dcf9852106fe0d00b341425db47f904fb65ab0fd55a50cd5bb4ef5b8183bb24a4de32640d825fc40d3fd525fc8dd946a0bc74207cd73c2ae0205
+  languageName: node
+  linkType: hard
+
+"@emotion/sheet@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@emotion/sheet@npm:1.4.0"
+  checksum: eeb1212e3289db8e083e72e7e401cd6d1a84deece87e9ce184f7b96b9b5dbd6f070a89057255a6ff14d9865c3ce31f27c39248a053e4cdd875540359042586b4
+  languageName: node
+  linkType: hard
+
+"@emotion/unitless@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "@emotion/unitless@npm:0.9.0"
+  checksum: 0859ee8621dab89dd91754726644abcbea23b849960fe55c1265e5990a5cb5fde2a73e99b230cd7f72898c5468dee5dcb287bcb246e07dc0cb2816628e781498
+  languageName: node
+  linkType: hard
+
 "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1":
   version: 1.0.1
   resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1"
@@ -3142,6 +3246,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/use-insertion-effect-with-fallbacks@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.1.0"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: 63665191773b27de66807c53b90091ef0d10d5161381f62726cfceecfe1d8c944f18594b8021805fc81575b64246fd5ab9c75d60efabec92f940c1c410530949
+  languageName: node
+  linkType: hard
+
+"@emotion/utils@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@emotion/utils@npm:1.4.0"
+  checksum: 212af0b0d6bcaa63c76e1a36e35bee4d3579359316c03bf970faabb5427a4c0aab3e2346a721bac54f0c8e027958e759c5682be78f308755a1d9753e83963621
+  languageName: node
+  linkType: hard
+
+"@emotion/weak-memoize@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "@emotion/weak-memoize@npm:0.4.0"
+  checksum: db5da0e89bd752c78b6bd65a1e56231f0abebe2f71c0bd8fc47dff96408f7065b02e214080f99924f6a3bfe7ee15afc48dad999d76df86b39b16e513f7a94f52
+  languageName: node
+  linkType: hard
+
 "@esbuild/aix-ppc64@npm:0.20.2":
   version: 0.20.2
   resolution: "@esbuild/aix-ppc64@npm:0.20.2"
@@ -3327,6 +3454,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.6.0":
+  version: 1.6.5
+  resolution: "@floating-ui/core@npm:1.6.5"
+  dependencies:
+    "@floating-ui/utils": ^0.2.5
+  checksum: 8e6c62a6e9223fba9afbcaca8afe408788a2bc8ab1b2f5734a26d5b02d4017a2baffc7176a938a610fd243e6a983ada605f259b35c88813e2230dd29906a78fd
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.0.1":
+  version: 1.6.8
+  resolution: "@floating-ui/dom@npm:1.6.8"
+  dependencies:
+    "@floating-ui/core": ^1.6.0
+    "@floating-ui/utils": ^0.2.5
+  checksum: bab6954bdde69afeaf8dbbf335818fe710c6eae1c62856ae1e09fa6abdc056bf5995e053638b76fa6661b8384c363ca2af874ab0448c3f6943808f4f8f77f3ea
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.2.5":
+  version: 0.2.5
+  resolution: "@floating-ui/utils@npm:0.2.5"
+  checksum: 32834fe0fec5ee89187f8defd0b10813d725dab7dc6ed1545ded6655630bac5d438f0c991d019d675585e118846f12391236fc2886a5c73a57576e7de3eca3f9
+  languageName: node
+  linkType: hard
+
 "@fortawesome/fontawesome-common-types@npm:6.2.1":
   version: 6.2.1
   resolution: "@fortawesome/fontawesome-common-types@npm:6.2.1"
@@ -6002,6 +6155,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-transition-group@npm:^4.4.0":
+  version: 4.4.10
+  resolution: "@types/react-transition-group@npm:4.4.10"
+  dependencies:
+    "@types/react": "*"
+  checksum: fe2ea11f70251e9f79f368e198c18fd469b1d4f1e1d44e4365845b44e15974b0ec925100036f449b023b0ca3480a82725c5f0a73040e282ad32ec7b0def9b57c
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:^16.14.26":
   version: 16.14.30
   resolution: "@types/react@npm:16.14.30"
@@ -7064,6 +7226,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-macros@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "babel-plugin-macros@npm:3.1.0"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    cosmiconfig: ^7.0.0
+    resolve: ^1.19.0
+  checksum: 765de4abebd3e4688ebdfbff8571ddc8cd8061f839bb6c3e550b0344a4027b04c60491f843296ce3f3379fb356cc873d57a9ee6694262547eb822c14a25be9a6
+  languageName: node
+  linkType: hard
+
 "babel-plugin-polyfill-corejs2@npm:^0.4.10":
   version: 0.4.11
   resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11"
@@ -7894,6 +8067,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"convert-source-map@npm:^1.5.0":
+  version: 1.9.0
+  resolution: "convert-source-map@npm:1.9.0"
+  checksum: dc55a1f28ddd0e9485ef13565f8f756b342f9a46c4ae18b843fe3c30c675d058d6a4823eff86d472f187b176f0adf51ea7b69ea38be34be4a63cbbf91b0593c8
+  languageName: node
+  linkType: hard
+
 "convert-source-map@npm:^1.7.0":
   version: 1.8.0
   resolution: "convert-source-map@npm:1.8.0"
@@ -7956,7 +8136,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^7.0.1":
+"cosmiconfig@npm:^7.0.0, cosmiconfig@npm:^7.0.1":
   version: 7.1.0
   resolution: "cosmiconfig@npm:7.1.0"
   dependencies:
@@ -9708,6 +9888,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-root@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "find-root@npm:1.1.0"
+  checksum: b2a59fe4b6c932eef36c45a048ae8f93c85640212ebe8363164814990ee20f154197505965f3f4f102efc33bfb1cbc26fd17c4a2fc739ebc51b886b137cbefaf
+  languageName: node
+  linkType: hard
+
 "find-up@npm:^2.1.0":
   version: 2.1.0
   resolution: "find-up@npm:2.1.0"
@@ -10425,6 +10612,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hoist-non-react-statics@npm:^3.3.1":
+  version: 3.3.2
+  resolution: "hoist-non-react-statics@npm:3.3.2"
+  dependencies:
+    react-is: ^16.7.0
+  checksum: b1538270429b13901ee586aa44f4cc3ecd8831c061d06cb8322e50ea17b3f5ce4d0e2e66394761e6c8e152cd8c34fb3b4b690116c6ce2bd45b18c746516cb9e8
+  languageName: node
+  linkType: hard
+
 "hosted-git-info@npm:^2.1.4":
   version: 2.8.9
   resolution: "hosted-git-info@npm:2.8.9"
@@ -12315,6 +12511,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"memoize-one@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "memoize-one@npm:6.0.0"
+  checksum: f185ea69f7cceae5d1cb596266dcffccf545e8e7b4106ec6aa93b71ab9d16460dd118ac8b12982c55f6d6322fcc1485de139df07eacffaae94888b9b3ad7675f
+  languageName: node
+  linkType: hard
+
 "memoizerific@npm:^1.11.3":
   version: 1.11.3
   resolution: "memoizerific@npm:1.11.3"
@@ -13654,7 +13857,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.5.6, prop-types@npm:^15.5.7, prop-types@npm:^15.5.8, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.5.6, prop-types@npm:^15.5.7, prop-types@npm:^15.5.8, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -13988,7 +14191,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.1, react-is@npm:^16.8.6":
+"react-is@npm:^16.13.1, react-is@npm:^16.7.0, react-is@npm:^16.8.6":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f
@@ -14095,6 +14298,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-select@npm:^5.8.0":
+  version: 5.8.0
+  resolution: "react-select@npm:5.8.0"
+  dependencies:
+    "@babel/runtime": ^7.12.0
+    "@emotion/cache": ^11.4.0
+    "@emotion/react": ^11.8.1
+    "@floating-ui/dom": ^1.0.1
+    "@types/react-transition-group": ^4.4.0
+    memoize-one: ^6.0.0
+    prop-types: ^15.6.0
+    react-transition-group: ^4.3.0
+    use-isomorphic-layout-effect: ^1.1.2
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: c8398cc0aefb5ee5438b6176c86676e2d3fed7457c16b0769f423a0da0ae431a7df25c2cadf13b709700882b8ebd80a58b1e557fec3e22ad3cbf60164ca9e745
+  languageName: node
+  linkType: hard
+
 "react-sortable-hoc@npm:^1.11.0":
   version: 1.11.0
   resolution: "react-sortable-hoc@npm:1.11.0"
@@ -14167,7 +14390,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-transition-group@npm:^4.4.2":
+"react-transition-group@npm:^4.3.0, react-transition-group@npm:^4.4.2":
   version: 4.4.5
   resolution: "react-transition-group@npm:4.4.5"
   dependencies:
@@ -14594,7 +14817,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.10.0, resolve@npm:^1.22.1, resolve@npm:^1.22.8":
+"resolve@npm:^1.10.0, resolve@npm:^1.19.0, resolve@npm:^1.22.1, resolve@npm:^1.22.8":
   version: 1.22.8
   resolution: "resolve@npm:1.22.8"
   dependencies:
@@ -14633,7 +14856,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.8#~builtin<compat/resolve>":
+"resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.8#~builtin<compat/resolve>":
   version: 1.22.8
   resolution: "resolve@patch:resolve@npm%3A1.22.8#~builtin<compat/resolve>::version=1.22.8&hash=07638b"
   dependencies:
@@ -15118,6 +15341,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map@npm:^0.5.7":
+  version: 0.5.7
+  resolution: "source-map@npm:0.5.7"
+  checksum: 5dc2043b93d2f194142c7f38f74a24670cd7a0063acdaf4bf01d2964b402257ae843c2a8fa822ad5b71013b5fcafa55af7421383da919752f22ff488bc553f4d
+  languageName: node
+  linkType: hard
+
 "source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
@@ -15490,6 +15720,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:4.2.0":
+  version: 4.2.0
+  resolution: "stylis@npm:4.2.0"
+  checksum: 0eb6cc1b866dc17a6037d0a82ac7fa877eba6a757443e79e7c4f35bacedbf6421fadcab4363b39667b43355cbaaa570a3cde850f776498e5450f32ed2f9b7584
+  languageName: node
+  linkType: hard
+
 "stylis@npm:^4.0.6":
   version: 4.1.1
   resolution: "stylis@npm:4.1.1"
@@ -16275,6 +16512,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-isomorphic-layout-effect@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "use-isomorphic-layout-effect@npm:1.1.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: a6532f7fc9ae222c3725ff0308aaf1f1ddbd3c00d685ef9eee6714fd0684de5cb9741b432fbf51e61a784e2955424864f7ea9f99734a02f237b17ad3e18ea5cb
+  languageName: node
+  linkType: hard
+
 "use-local-storage-state@npm:^4.0.0":
   version: 4.0.0
   resolution: "use-local-storage-state@npm:4.0.0"

From ec24292ad18fddd0e64a0027a390999a8e6d5ed6 Mon Sep 17 00:00:00 2001
From: John Panos <john.panos@appfolio.com>
Date: Thu, 1 Aug 2024 14:35:52 -0700
Subject: [PATCH 2/3] ignore

---
 .tool-versions                   | 6 +++++-
 src/components/Select/Select.tsx | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/.tool-versions b/.tool-versions
index 9e1e7e1e1..a78bf43b5 100644
--- a/.tool-versions
+++ b/.tool-versions
@@ -1 +1,5 @@
-nodejs 20.14.0
\ No newline at end of file
+ruby 3.2.2
+nodejs 18.19.1
+yarn 1.22.18
+golang 1.22.1
+python 3.10.10
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index c23b36c1c..65eabc35f 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,3 +1,4 @@
+// @ts-ignore
 import React, { useState, useRef, useEffect } from 'react';
 import ReactSelect, {
   components as ReactSelectComponents,

From 76b71061195a0b2505cddfb20b757a21f78ef8d9 Mon Sep 17 00:00:00 2001
From: John Panos <john.panos@appfolio.com>
Date: Thu, 1 Aug 2024 14:38:39 -0700
Subject: [PATCH 3/3] ignore

---
 src/components/Select/Select.tsx | 250 ++++++++++++++++++++-----------
 1 file changed, 164 insertions(+), 86 deletions(-)

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 65eabc35f..7e116ef43 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,118 +1,196 @@
-// @ts-ignore
-import React, { useState, useRef, useEffect } from 'react';
+// @ts-nocheck
+import React, { useState, forwardRef, useEffect } from 'react';
 import ReactSelect, {
-  components as ReactSelectComponents,
-  Props as ReactSelectProps,
+  OptionProps,
+  MultiValueProps,
+  IndicatorProps,
+  StylesConfig,
+  Props as SelectProps,
   ActionMeta,
-  SingleValue,
-  MultiValue,
-  ValueContainerProps,
 } from 'react-select';
 import AsyncSelect from 'react-select/async';
 import AsyncCreatableSelect from 'react-select/async-creatable';
 import CreatableSelect from 'react-select/creatable';
+import Badge from '../Badge/Badge';
+import Icon from '../Icon/Icon';
 
-export interface Option {
-  label: string;
-  value: any;
-}
+// Type definitions
+type OptionType = { label: string; value: any; disabled?: boolean };
 
-interface SelectProps extends Omit<ReactSelectProps<Option, boolean>, 'onChange'> {
-  options?: Option[];
-  defaultValue?: Option | Option[] | null;
-  value?: Option | Option[] | null;
-  onChange?: (value: Option | Option[] | null, action: ActionMeta<Option>) => void;
-  loadOptions?: (inputValue: string, callback: (options: Option[]) => void) => void;
+interface CustomSelectProps extends Omit<SelectProps<OptionType, boolean>, 'onChange' | 'isMulti' | 'isDisabled'> {
+  onChange?: (value: any, action?: ActionMeta<OptionType>) => void;
+  arrowRenderer?: (props: { isOpen: boolean }) => React.ReactNode;
+  valueComponent?: React.ComponentType<MultiValueProps<OptionType>>;
+  optionComponent?: React.ComponentType<OptionProps<OptionType>>;
+  loadOptions?: (input: string, callback: (options: OptionType[]) => void) => void;
   creatable?: boolean;
-  multi?: boolean;
-  name?: string;
   inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  multi?: boolean;
+  disabled?: boolean;
+  isValidNewOption?: (inputValue: any) => boolean;
 }
 
-const Select: React.FC<SelectProps> = ({
-                                         options,
-                                         defaultValue,
-                                         value,
-                                         onChange,
-                                         loadOptions,
-                                         creatable,
-                                         multi,
-                                         name,
-                                         inputProps,
-                                         className,
-                                         ...props
-                                       }) => {
-  const [internalValue, setInternalValue] = useState<Option | Option[] | null>(
-    value || defaultValue || null
+// Utility functions
+const getSelectArrow = (isOpen: boolean, arrowRenderer?: (props: { isOpen: boolean }) => React.ReactNode) =>
+  arrowRenderer ? arrowRenderer({ isOpen }) : <Icon name={`caret-${isOpen ? 'up' : 'down'}`} />;
+
+const getCloseButton = () => (
+  <Icon name="xmark" className="ms-1" style={{ opacity: 0.5, fontSize: '.5rem' }} />
+);
+
+// Custom components
+const CustomMultiValue: React.FC<MultiValueProps<OptionType>> = (props) => {
+  const { children, removeProps, ...badgeProps } = props;
+
+  return (
+    <Badge
+      color="light"
+      className="ms-1 fw-normal border d-inline-flex align-items-center text-start"
+      style={{ textTransform: 'none', whiteSpace: 'normal' }}
+      {...badgeProps}
+    >
+      {children}
+      <span {...removeProps}>
+        {getCloseButton()}
+      </span>
+    </Badge>
   );
-  const selectRef = useRef<any>(null);
-  const isControlled = value !== undefined;
+};
+
+const CustomOption: React.FC<OptionProps<OptionType>> = (props) => {
+  const { children, isDisabled, isFocused, isSelected, innerProps, data } = props;
+
+  return (
+    <div
+      className={`
+        dropdown-item
+        ${isSelected && !isFocused ? 'bg-light' : ''}
+        ${isFocused ? 'bg-primary text-white' : ''}
+        ${isDisabled || data.disabled ? 'disabled' : ''}
+      `.trim()}
+      {...innerProps}
+      aria-disabled={isDisabled || data.disabled}
+    >
+      {children}
+    </div>
+  );
+};
+
+const CustomArrow: React.FC<IndicatorProps<OptionType>> = ({ selectProps }) => {
+  const { menuIsOpen, arrowRenderer } = selectProps as CustomSelectProps;
+  return <>{getSelectArrow(!!menuIsOpen, arrowRenderer)}</>;
+};
+
+// Main Select component
+const Select = forwardRef<any, CustomSelectProps>((props, ref) => {
+  const {
+    arrowRenderer,
+    className,
+    defaultValue,
+    inputProps,
+    valueComponent,
+    optionComponent,
+    loadOptions,
+    creatable,
+    onChange,
+    multi,
+    isValidNewOption,
+    value: propsValue,
+    options: propsOptions,
+    disabled,
+    ...restProps
+  } = props;
+
+  const [value, setValue] = useState(propsValue || defaultValue);
+  const [options, setOptions] = useState(propsOptions || []);
+
+  useEffect(() => {
+    if (propsValue !== undefined) {
+      setValue(propsValue);
+    }
+  }, [propsValue]);
 
   useEffect(() => {
-    if (isControlled) {
-      setInternalValue(value);
+    if (propsOptions) {
+      setOptions(propsOptions);
     }
-  }, [value, isControlled]);
-
-  const handleChange = (
-    newValue: SingleValue<Option> | MultiValue<Option>,
-    action: ActionMeta<Option>
-  ) => {
-    if (!isControlled) {
-      setInternalValue(newValue);
+  }, [propsOptions]);
+
+  const handleChange = (newValue: any, action: ActionMeta<OptionType>) => {
+    setValue(newValue);
+    if (onChange) {
+      // For multi-select, always pass an array
+      if (multi) {
+        onChange(newValue || [], action);
+      } else {
+        onChange(newValue, action);
+      }
     }
-    onChange?.(newValue, action);
   };
 
-  let SelectComponent: any = ReactSelect;
-  if (loadOptions) {
-    SelectComponent = creatable ? AsyncCreatableSelect : AsyncSelect;
+  // Handle async options loading
+  const loadOptionsWrapper = loadOptions
+    ? (inputValue: string) =>
+      new Promise<OptionType[]>((resolve) => {
+        loadOptions(inputValue, (result: any) => {
+          resolve(result.options || []);
+        });
+      })
+    : undefined;
+
+  // Determine which Select component to use
+  let SelectElement: typeof ReactSelect | typeof AsyncSelect | typeof CreatableSelect | typeof AsyncCreatableSelect = ReactSelect;
+  if (loadOptionsWrapper && creatable) {
+    SelectElement = AsyncCreatableSelect;
+  } else if (loadOptionsWrapper) {
+    SelectElement = AsyncSelect;
   } else if (creatable) {
-    SelectComponent = CreatableSelect;
+    SelectElement = CreatableSelect;
   }
 
-  const selectClassName = `Select ${multi ? 'Select--multi' : 'Select--single'} ${
-    loadOptions ? 'select-async' : ''
-  } ${className || ''}`.trim();
-
-  const CustomValueContainer = ({ children, ...props }: ValueContainerProps<Option, boolean>) => {
-    return (
-      <ReactSelectComponents.ValueContainer {...props}>
-        {children}
-        {name && <input type="hidden" name={name} value={props.getValue()[0]?.value || ''} />}
-      </ReactSelectComponents.ValueContainer>
-    );
+  // Custom styles
+  const customStyles: StylesConfig<OptionType, boolean> = {
+    control: (base) => {return {
+      ...base,
+      minHeight: '2.35rem',
+    }},
+    option: (base, state) => {return {
+      ...base,
+      backgroundColor: state.isDisabled ? '#f8f9fa' : base.backgroundColor,
+      color: state.isDisabled ? '#6c757d' : base.color,
+      cursor: state.isDisabled ? 'not-allowed' : 'default',
+    }},
   };
 
+  const isValidNewOptionWrapper = isValidNewOption
+    // eslint-disable-next-line no-shadow
+    ? ({ label, value, options }: CreateOptionProps<OptionType>) => isValidNewOption({ label, value })
+    : undefined;
+
   return (
-    <SelectComponent
-      ref={selectRef}
-      options={options}
-      value={internalValue}
-      onChange={handleChange}
-      loadOptions={loadOptions}
-      isMulti={multi}
-      className={selectClassName}
-      classNamePrefix="Select"
-      {...props}
+    <SelectElement
+      ref={ref}
+      className={`${className || ''} ${loadOptionsWrapper ? 'select-async' : ''}`.trim()}
       components={{
-        ...ReactSelectComponents,
-        Input: (inputComponentProps: any) => (
-          <ReactSelectComponents.Input
-            {...inputComponentProps}
-            {...inputProps}
-            name={inputProps?.name || name}
-          />
-        ),
-        ValueContainer: CustomValueContainer,
+        MultiValue: valueComponent || CustomMultiValue,
+        Option: optionComponent || CustomOption,
+        DropdownIndicator: CustomArrow,
       }}
+      styles={customStyles}
+      inputProps={{ name: props.name, ...inputProps }}
+      isMulti={multi}
+      isDisabled={disabled}
+      loadOptions={loadOptionsWrapper}
+      onChange={handleChange}
+      value={value}
+      options={options}
+      isValidNewOption={isValidNewOptionWrapper}
+      isOptionDisabled={(option: OptionType) => !!option.disabled}
+      {...restProps}
     />
   );
-};
+});
 
-// For testing purposes
-Select.Async = AsyncSelect;
-Select.AsyncCreatable = AsyncCreatableSelect;
-Select.Creatable = CreatableSelect;
+Select.displayName = 'Select';
 
 export default Select;