@onewelcome/react-lib-components 0.3.0 → 1.0.0

package/src/Form/FormGroup/FormGroup.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 .form-group {
   position: relative;
 }

package/src/Form/FormGroup/FormGroup.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { FormGroup, Props } from "./FormGroup";
 import { render } from "@testing-library/react";

package/src/Form/FormGroup/FormGroup.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 /** The empty className property on FormHelperText is on purpose! We want to basically "filter" out the className from helperProps because we're adding this to the surrounding div. This makes it so also the errormessage receives this styling. */
 
 import React, { ComponentPropsWithRef, ReactChild } from "react";
@@ -52,7 +68,7 @@ export const FormGroup = React.forwardRef<HTMLDivElement, Props>(
               helperProps?.className ? helperProps.className : ""
             }`}
           >
-            {helperText && !error && (
+            {((helperText && !error) || (helperText && error && !errorMessage)) && (
               <FormHelperText {...helperProps} className={""} id={helperId}>
                 {(helperProps && helperProps.children) || helperText}
               </FormHelperText>

package/src/Form/FormHelperText/FormHelperText.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 .form-helper-text {
   margin: 0;
   color: var(--greyed-out);

package/src/Form/FormHelperText/FormHelperText.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { FormHelperText, Props } from "./FormHelperText";
 import { render } from "@testing-library/react";

package/src/Form/FormHelperText/FormHelperText.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, ReactNode } from "react";
 import classes from "./FormHelperText.module.scss";
 import { Typography } from "../../Typography/Typography";

package/src/Form/FormSelectorWrapper/FormSelectorWrapper.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 .error {
   color: var(--error);
 }

package/src/Form/FormSelectorWrapper/FormSelectorWrapper.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useRef, useEffect } from "react";
 import { FormSelectorWrapper, Props } from "./FormSelectorWrapper";
 import { render } from "@testing-library/react";

package/src/Form/FormSelectorWrapper/FormSelectorWrapper.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, createRef, ReactNode } from "react";
 import { Icon, Icons } from "../../Icon/Icon";
 import { KeyValuePair } from "../../interfaces";

package/src/Form/Input/Input.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 @import "../../mixins.module.scss";
 
 .input-wrapper {
@@ -11,6 +27,43 @@
   padding: 0 1.25rem;
   transition: all 0.2s ease-in-out;
 
+  // General autofill styles
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    transition: background-color 5000s ease-in-out 0s !important;
+
+    ~ .outline {
+      &:after {
+        content: "";
+        position: absolute;
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: var(--input-border-radius);
+      }
+    }
+
+    // Chrome specific color
+    @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
+      ~ .outline {
+        &:after {
+          background-color: rgb(232, 240, 254);
+        }
+      }
+    }
+
+    // Safari specific color
+    @media not all and (min-resolution: 0.001dpcm) {
+      ~ .outline {
+        &:after {
+          background-color: rgb(250, 255, 189);
+        }
+      }
+    }
+  }
+
   @include outlineStates;
 }
 
@@ -20,17 +73,26 @@
   color: var(--greyed-out);
   font-size: var(--font-size);
   font-family: var(--font-family);
-  width: 100%;
   box-sizing: border-box;
   border: 0;
   border-radius: var(--input-border-radius);
   transition: all 0.2s ease-in-out;
+  background-color: transparent;
+  z-index: 1;
+
+  &:not(.shrink-width-for-date-icon) {
+    width: 100%;
+  }
 
   &:disabled {
     background-color: var(--disabled);
     cursor: not-allowed;
   }
 
+  &.shrink-width-for-date-icon {
+    width: auto;
+  }
+
   @include browserOutlineDisabled;
 }
 
@@ -56,14 +118,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 2;
 
   &:before {
     height: 1.3125rem;
   }
-
-  &.extra-indent {
-    right: 3.75rem;
-  }
 }
 
 .input-wrapper [data-prefix],

package/src/Form/Input/Input.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef, useState, Fragment } from "react";
 import { Input, Props, Type } from "./Input";
 import { fireEvent, render } from "@testing-library/react";

package/src/Form/Input/Input.tsx

@@ -1,10 +1,26 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, Ref, useEffect, useRef, useState } from "react";
 import classes from "./Input.module.scss";
 import readyclasses from "../../readyclasses.module.scss";
 import { Icon, Icons } from "../../Icon/Icon";
 import { FormElement } from "../form.interfaces";
 
-const dateTypes = ["date", "time", "datetime-local"] as const;
+export const dateTypes = ["date", "time", "datetime-local"] as const;
 
 export type Type =
   | "text"
@@ -26,44 +42,6 @@ export interface Props extends ComponentPropsWithRef<"input">, FormElement {
   prefix?: string;
 }
 
-const useErrorOffset = (
-  suffix: React.RefObject<HTMLDivElement>,
-  errorIcon: React.RefObject<HTMLDivElement>,
-  inputWrapper: React.RefObject<HTMLDivElement>,
-  error: boolean,
-  type: Type,
-  suffixContent: string = ""
-) => {
-  const [errorOffset, setErrorOffset] = useState({});
-  const [defaultErrorOffset, setDefaultErrorOffset] = useState<number | null>(null);
-
-  const getErrorIconOffset = () => parseFloat(getComputedStyle(errorIcon.current!).right);
-  const getInputPaddingRight = (input: HTMLDivElement) =>
-    (dateTypes as ReadonlyArray<string>).includes(type)
-      ? 0
-      : parseFloat(getComputedStyle(input).paddingRight);
-
-  useEffect(() => {
-    if (errorIcon.current && inputWrapper.current) {
-      let defaultOffset = defaultErrorOffset;
-      if (!defaultOffset) {
-        defaultOffset = getErrorIconOffset();
-        setDefaultErrorOffset(defaultOffset);
-      }
-
-      if (suffix.current && suffixContent) {
-        const inputPaddingRight = getInputPaddingRight(inputWrapper.current);
-        const prefixDifference = suffix.current.offsetWidth + inputPaddingRight + defaultOffset;
-        setErrorOffset({ right: `${prefixDifference}px` });
-      } else {
-        setErrorOffset({ right: `${defaultOffset}px` });
-      }
-    }
-  }, [suffix.current, errorIcon.current, inputWrapper.current, error, type, suffixContent]);
-
-  return { errorOffset };
-};
-
 export const Input = React.forwardRef(
   (
     {
@@ -87,14 +65,6 @@ export const Input = React.forwardRef(
     const inputWrapperRef = useRef<HTMLDivElement>(null);
     const errorIconRef = useRef<HTMLDivElement>(null);
     const suffixRef = useRef<HTMLDivElement>(null);
-    const { errorOffset } = useErrorOffset(
-      suffixRef,
-      errorIconRef,
-      inputWrapperRef,
-      error,
-      type,
-      suffix
-    );
 
     useEffect(() => {
       if (name === undefined) {
@@ -105,13 +75,10 @@ export const Input = React.forwardRef(
     const inputClassNames = [classes["input"]];
 
     (dateTypes as ReadonlyArray<string>).includes(type) &&
-      inputClassNames.push(classes["remove-extra-indent"]);
+      inputClassNames.push(classes["shrink-width-for-date-icon"]);
     className && inputClassNames.push(className);
 
     const iconClassNames = [classes["warning"]];
-    (dateTypes as ReadonlyArray<string>).includes(type) &&
-      iconClassNames.push(classes["extra-indent"]);
-
     const wrapperClasses = [classes["input-wrapper"]];
     const outlineClasses = [classes["outline"]];
 
@@ -160,12 +127,7 @@ export const Input = React.forwardRef(
           </div>
         )}
         {error && (
-          <Icon
-            style={errorOffset}
-            ref={errorIconRef}
-            className={iconClassNames.join(" ")}
-            icon={Icons.Error}
-          />
+          <Icon ref={errorIconRef} className={iconClassNames.join(" ")} icon={Icons.Error} />
         )}
         <span className={outlineClasses.join(" ")}></span>
       </div>

package/src/Form/Label/Label.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 .label {
   cursor: text;
   color: var(--greyed-out);

package/src/Form/Label/Label.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { Label } from "./Label";
 import { render } from "@testing-library/react";

package/src/Form/Label/Label.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, ReactNode } from "react";
 import classes from "./Label.module.scss";
 import readyclasses from "../../readyclasses.module.scss";

package/src/Form/Radio/Radio.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 .radio-wrapper {
   position: relative;
 
@@ -35,6 +51,7 @@
     margin-left: 0.5rem;
     user-select: none;
     font-size: var(--font-size);
+    font-family: var(--font-family);
 
     .disabled & {
       cursor: not-allowed;
@@ -61,11 +78,8 @@
   width: 1.75rem;
   height: 1.75rem;
 
-  &:not(.error):not(:disabled):focus,
-  &:not(.error):not(:disabled):active {
-    + * {
-      color: var(--color-primary);
-    }
+  &:checked + * {
+    color: var(--color-primary);
   }
 
   &:disabled {
@@ -75,7 +89,7 @@
   &:focus-visible {
     + * {
       border-radius: 2px;
-      outline: 1px solid var(--color-primary);
+      outline: 1px solid var(--color-focus);
       outline-offset: 1px;
     }
   }

package/src/Form/Radio/Radio.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { Radio, Props } from "./Radio";
 import { render } from "@testing-library/react";

package/src/Form/Radio/Radio.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef } from "react";
 import { Icon, Icons } from "../../Icon/Icon";
 import { Props as HelperProps } from "../FormHelperText/FormHelperText";

package/src/Form/Select/Option.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { Option } from "./Option";
 import { render } from "@testing-library/react";

package/src/Form/Select/Option.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, createRef, RefObject, useEffect } from "react";
 import classes from "./Select.module.scss";
 

package/src/Form/Select/Select.interfaces.ts

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+export type Position = {
+  top: 0 | "initial";
+  bottom: 0 | "initial";
+};
+
+export interface UseArrowNavigationParams {
+  expanded: boolean;
+  setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+  isSearching: boolean;
+  setIsSearching: React.Dispatch<React.SetStateAction<boolean>>;
+  setFocusedSelectItem: React.Dispatch<React.SetStateAction<number>>;
+  childrenCount: number;
+  customSelectButtonRef: React.RefObject<HTMLButtonElement>;
+  setShouldClick: React.Dispatch<React.SetStateAction<boolean>>;
+  searchInputRef: React.RefObject<HTMLInputElement>;
+  renderSearchCondition: number;
+}
+
+export interface UseSelectPositionListParams {
+  expanded: boolean;
+  optionListReference: React.RefObject<HTMLDivElement>;
+  containerReference: React.RefObject<HTMLDivElement>;
+}