remove the "empty" property exposed on the Select.tsx component's forwarded ref (redundant/extraneous) - breaking change

Author: based-ghost

__stories__/helpers/components/Checkbox.tsx

@@ -14,7 +14,7 @@ const CHECK_BORDER_COLOR = hexToRgba(CHECK_COLOR, 0.83);
 
 const Label = styled.span`
   user-select: none;
-  margin-left: 1.45rem;
+  margin-left: 1.4rem;
 `;
 
 const Input = styled.input`

__stories__/helpers/constants/markup.ts

@@ -23,6 +23,7 @@ export const CLASS_NAME_HTML =
           type="text"
           class="${AUTOSIZE_INPUT_CLS}"
         />
+        ::after
       </div>
     </div>
     <div>

__stories__/helpers/styled/index.ts

@@ -291,7 +291,7 @@ export const CardBody = styled.div<{ multiComponents?: boolean }>`
     multiComponents &&
     css`
       > div {
-        margin-bottom: 1.5rem;
+        margin-bottom: 3rem;
 
         :first-of-type > label {
           margin-top: 0;
@@ -350,8 +350,8 @@ const SPIN_KEYFRAMES = keyframes`
 const SPIN_ANIMATION_CSS = css`animation: ${SPIN_KEYFRAMES} infinite 8s linear;`;
 
 export const ReactSvg = styled.svg<{ isDisabled?: boolean }>`
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   color: #1ea7fd;
   fill: currentColor;
   display: inline-block;

__stories__/index.stories.tsx

@@ -552,8 +552,8 @@ export const Methods = () => {
       <Title>Methods {'&'} Properties</Title>
       <Hr />
       <ListWrapper>
-        <strong>5</strong> methods and <strong>2</strong> properties are exposed
-        to wrapping components and are accessible via a forwarded <code>ref</code>.
+        <strong>5</strong> methods and <strong>1</strong> property are exposed to
+        wrapping components and are accessible via a forwarded <code>ref</code>.
         <List>
           <Li>
             <TextHeader>blur() {'=>'} void</TextHeader> - blur the control
@@ -575,12 +575,8 @@ export const Methods = () => {
             <TextHeader>setValue(option?: any) {'=>'} void</TextHeader> - set the
             value programatically <em>(option will be validated)</em>
           </Li>
-          <Hr />
           <Li>
-            <TextHeader>empty: boolean</TextHeader> - Whether the select has a value
-          </Li>
-          <Li>
-            <TextHeader>menuOpen: boolean</TextHeader> - Whether or not the menu is open
+            <TextHeader>menuOpen: boolean</TextHeader> - Open state of the menu
           </Li>
         </List>
       </ListWrapper>
@@ -703,11 +699,10 @@ export const Filtering = () => {
 };
 
 export const Virtualization = () => {
+  const optionCountList = useMemo<number[]>(() => [100, 1000, 10000, 25000, 50000, 100000], []);
   const selectRef = useRef<SelectRef | null>(null);
   const [options, setOptions] = useState<Option[]>([]);
-  const [optionsCount, setOptionsCount] = useState(100);
-
-  const optionCountList = [100, 1000, 10000, 25000, 50000, 100000];
+  const [optionsCount, setOptionsCount] = useState(optionCountList[0]);
 
   useUpdateEffect(() => {
     selectRef.current?.clearValue();
@@ -767,7 +762,7 @@ export const Virtualization = () => {
       <Hr />
       <Card>
         <CardHeader>
-          <Label>Number of Options</Label>
+          <Label>Options Count</Label>
           <Buttons>
             {optionCountList.map((count) => (
               <OptionsCountButton

src/Select.tsx

@@ -380,7 +380,6 @@ const Select = forwardRef<SelectRef, SelectProps>((
   useImperativeHandle(
     ref,
     () => ({
-      empty: !hasSelectedOptions,
       menuOpen: menuOpenRef.current,
       blur: blurInput,
       focus: focusInput,
@@ -401,7 +400,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
         }
       }
     }),
-    [hasSelectedOptions, getOptionValueFn, getOptionLabelFn, openMenuAndFocusOption]
+    [getOptionValueFn, getOptionLabelFn, openMenuAndFocusOption]
   );
 
   /**
@@ -412,16 +411,6 @@ const Select = forwardRef<SelectRef, SelectProps>((
     autoFocus && focusInput();
   });
 
-  /**
-   * useEffect
-   * If control recieves focus & openMenuOnFocus = true, open menu
-   */
-  useEffect(() => {
-    if (isFocused && openMenuOnFocus) {
-      openMenuAndFocusOption(OptionIndexEnum.FIRST);
-    }
-  }, [isFocused, openMenuOnFocus, openMenuAndFocusOption]);
-
   /**
    * useEffect
    * If 'onSearchChange' function is defined, run as callback when the stateful debouncedInputValue
@@ -653,18 +642,21 @@ const Select = forwardRef<SelectRef, SelectProps>((
     if (isNotInput) e.preventDefault();
   };
 
-  const handleOnInputFocus = (e: FocusEvent<HTMLInputElement>): void => {
-    onInputFocus?.(e);
-    setIsFocused(true);
-  };
-
   const handleOnInputBlur = (e: FocusEvent<HTMLInputElement>): void => {
     onInputBlur?.(e);
     setIsFocused(false);
     setMenuOpen(false);
     setInputValue('');
   };
 
+  const handleOnInputFocus = (e: FocusEvent<HTMLInputElement>): void => {
+    onInputFocus?.(e);
+    setIsFocused(true);
+    if (openMenuOnFocus) {
+      openMenuAndFocusOption(OptionIndexEnum.FIRST);
+    }
+  };
+
   const handleOnInputChange = (e: FormEvent<HTMLInputElement>): void => {
     onChangeEvtValue.current = true;
     onInputChange?.(e.currentTarget.value);
@@ -683,10 +675,9 @@ const Select = forwardRef<SelectRef, SelectProps>((
   }, []);
 
   const handleOnCaretMouseDown = useCallback((e: MouseOrTouchEvent<HTMLElement>): void => {
-    if (!isDisabled && !openMenuOnClick) {
-      handleOnMouseDown(e);
-      menuOpenRef.current ? setMenuOpen(false) : openMenuAndFocusOption(OptionIndexEnum.FIRST);
-    }
+    if (isDisabled || openMenuOnClick) return;
+    handleOnMouseDown(e);
+    menuOpenRef.current ? setMenuOpen(false) : openMenuAndFocusOption(OptionIndexEnum.FIRST);
   }, [isDisabled, openMenuOnClick, openMenuAndFocusOption]);
 
   const showClear = !!isClearable && !isDisabled && hasSelectedOptions;

src/components/AutosizeInput/index.tsx

@@ -45,7 +45,7 @@ const InputWrapper = styled.div`
   }
 `;
 
-const Input = styled.input.attrs(AUTOSIZE_INPUT_ATTRS) <InputProps>`
+const Input = styled.input.attrs(AUTOSIZE_INPUT_ATTRS)<InputProps>`
   width: 100%;
   background: 0;
   color: inherit;

src/types.ts

@@ -60,7 +60,6 @@ export type MenuOption = Readonly<{
 }>;
 
 export type SelectRef = Readonly<{
-  empty: boolean;
   menuOpen: boolean;
   blur: () => void;
   focus: () => void;