Refactor collection creation UI (#6485)

* Iteration, before functional component

* Use react-hook-form, shared form for new and edit

* Avoid negative margin on input prefix

* Centered now default for modals

app/components/InputSelect.tsx

@@ -48,6 +48,12 @@ export type Props = {
   onChange?: (value: string | null) => void;
 };
 
+export interface InputSelectRef {
+  value: string | null;
+  focus: () => void;
+  blur: () => void;
+}
+
 interface InnerProps extends React.HTMLAttributes<HTMLDivElement> {
   placement: Placement;
 }
@@ -55,7 +61,7 @@ interface InnerProps extends React.HTMLAttributes<HTMLDivElement> {
 const getOptionFromValue = (options: Option[], value: string | null) =>
   options.find((option) => option.value === value);
 
-const InputSelect = (props: Props) => {
+const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
   const {
     value = null,
     label,
@@ -122,6 +128,16 @@ const InputSelect = (props: Props) => {
     { capture: true }
   );
 
+  React.useImperativeHandle(ref, () => ({
+    focus: () => {
+      buttonRef.current?.focus();
+    },
+    blur: () => {
+      buttonRef.current?.blur();
+    },
+    value: select.selectedValue,
+  }));
+
   React.useEffect(() => {
     previousValue.current = value;
     select.setSelectedValue(value);
@@ -306,4 +322,4 @@ export const Positioner = styled(Position)`
   }
 `;
 
-export default InputSelect;
+export default React.forwardRef(InputSelect);