feat: add the ability to choose default collection (#3029)

Co-authored-by: Tom Moor <tom@getoutline.com>
Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/components/InputSelect.tsx

@@ -18,12 +18,12 @@ import { MenuAnchorCSS } from "./ContextMenu/MenuItem";
 import { LabelText } from "./Input";
 
 export type Option = {
-  label: string;
+  label: string | JSX.Element;
   value: string;
 };
 
 export type Props = {
-  value?: string;
+  value?: string | null;
   label?: string;
   nude?: boolean;
   ariaLabel: string;
@@ -37,16 +37,13 @@ export type Props = {
   onChange: (value: string | null) => void;
 };
 
-const getOptionFromValue = (
-  options: Option[],
-  value: string | undefined | null
-) => {
+const getOptionFromValue = (options: Option[], value: string | null) => {
   return options.find((option) => option.value === value);
 };
 
 const InputSelect = (props: Props) => {
   const {
-    value,
+    value = null,
     label,
     className,
     labelHidden,
@@ -72,7 +69,7 @@ const InputSelect = (props: Props) => {
     disabled,
   });
 
-  const previousValue = React.useRef<string | undefined | null>(value);
+  const previousValue = React.useRef<string | null>(value);
   const contentRef = React.useRef<HTMLDivElement>(null);
   const selectedRef = React.useRef<HTMLDivElement>(null);
   const buttonRef = React.useRef<HTMLButtonElement>(null);
@@ -82,6 +79,10 @@ const InputSelect = (props: Props) => {
     select.visible,
     select.unstable_disclosureRef
   );
+  const wrappedLabel = <LabelText>{label}</LabelText>;
+  const selectedValueIndex = options.findIndex(
+    (option) => option.value === select.selectedValue
+  );
 
   React.useEffect(() => {
     if (previousValue.current === select.selectedValue) {
@@ -95,10 +96,6 @@ const InputSelect = (props: Props) => {
 
     load();
   }, [onChange, select.selectedValue]);
-  const wrappedLabel = <LabelText>{label}</LabelText>;
-  const selectedValueIndex = options.findIndex(
-    (option) => option.value === select.selectedValue
-  );
 
   // Ensure selected option is visible when opening the input
   React.useEffect(() => {
@@ -182,30 +179,23 @@ const InputSelect = (props: Props) => {
                   }
                 >
                   {select.visible
-                    ? options.map((option) => (
-                        <StyledSelectOption
-                          {...select}
-                          value={option.value}
-                          key={option.value}
-                          ref={
-                            select.selectedValue === option.value
-                              ? selectedRef
-                              : undefined
-                          }
-                        >
-                          {select.selectedValue !== undefined && (
-                            <>
-                              {select.selectedValue === option.value ? (
-                                <CheckmarkIcon color="currentColor" />
-                              ) : (
-                                <Spacer />
-                              )}
-                              &nbsp;
-                            </>
-                          )}
-                          {option.label}
-                        </StyledSelectOption>
-                      ))
+                    ? options.map((option) => {
+                        const isSelected =
+                          select.selectedValue === option.value;
+                        const Icon = isSelected ? CheckmarkIcon : Spacer;
+                        return (
+                          <StyledSelectOption
+                            {...select}
+                            value={option.value}
+                            key={option.value}
+                            ref={isSelected ? selectedRef : undefined}
+                          >
+                            <Icon />
+                            &nbsp;
+                            {option.label}
+                          </StyledSelectOption>
+                        );
+                      })
                     : null}
                 </Background>
               </Positioner>
@@ -261,6 +251,10 @@ const StyledButton = styled(Button)<{ nude?: boolean }>`
 
 export const StyledSelectOption = styled(SelectOption)`
   ${MenuAnchorCSS}
+  /* overriding the styles from MenuAnchorCSS because we use &nbsp; here */
+  svg:not(:last-child) {
+    margin-right: 0px;
+  }
 `;
 
 const Wrapper = styled.label<{ short?: boolean }>`