@bitrise/bitkit 10.9.1 → 10.10.0-alpha-dropdown-release.2

package/src/Components/Dropdown/hooks/useFloatingDropdown.ts

@@ -8,6 +8,7 @@ import {
   useListNavigation,
   useRole,
   useDismiss,
+  flip,
 } from '@floating-ui/react-dom-interactions';
 import useAutoScroll from './useAutoScroll';
 
@@ -40,13 +41,15 @@ const useFloatingDropdown = ({ enabled, optionsRef }: { enabled: boolean; option
     },
     middleware: [
       size({
+        padding: 5,
         apply({ elements, availableHeight, rects }) {
           Object.assign(elements.floating.style, {
             width: `${rects.reference.width}px`,
           });
-          elements.floating.style.setProperty('--floating-available-height', `${availableHeight - 5}px`);
+          elements.floating.style.setProperty('--floating-available-height', `${availableHeight}px`);
         },
       }),
+      flip(),
     ],
   });
   const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
@@ -62,6 +65,9 @@ const useFloatingDropdown = ({ enabled, optionsRef }: { enabled: boolean; option
       loop: true,
       onNavigate: setActiveIndex,
     }),
+    {
+      floating: keyboardControlledHandlers,
+    },
   ]);
   useAutoScroll({
     listRef,
@@ -73,17 +79,18 @@ const useFloatingDropdown = ({ enabled, optionsRef }: { enabled: boolean; option
 
   return {
     listRef,
-    onClose: () => setOpen(false),
+    close: () => setOpen(false),
     isOpen,
     getItemProps,
     activeIndex,
     setActiveIndex,
     setSelectedIndex,
-    referenceProps: getReferenceProps({ ref: reference }),
+    getReferenceProps(props: React.HTMLProps<Element>) {
+      return getReferenceProps({ ...props, ref: reference });
+    },
     floatingProps: getFloatingProps({
       ref: floating,
       style: { position: strategy, top: y ?? 0, left: x ?? 0 },
-      ...keyboardControlledHandlers,
     }),
     context,
   };

package/src/Components/Dropdown/hooks/useSimpleSearch.tsx

@@ -1,4 +1,4 @@
-import { Children, cloneElement, isValidElement, ReactNode, useEffect, useMemo, useState } from 'react';
+import { Children, cloneElement, isValidElement, ReactNode, useMemo, useState } from 'react';
 import { chakra } from '@chakra-ui/react';
 import { useDropdownStyles } from '../Dropdown.context';
 import isNodeMatch from '../isNodeMatch';
@@ -8,15 +8,7 @@ const NoResultsFound = ({ children }: { children: ReactNode }) => {
   const { item } = useDropdownStyles();
   return <chakra.div __css={item}>{children}</chakra.div>;
 };
-function useSimpleSearch({
-  children,
-  onSearch,
-  isOpen,
-}: {
-  children?: ReactNode;
-  onSearch?: () => void;
-  isOpen: boolean;
-}) {
+function useSimpleSearch({ children, onSearch }: { children?: ReactNode; onSearch?: () => void }) {
   const [searchValue, setSearchValue] = useState('');
   const searchOnChange = (newValue: string) => {
     setSearchValue(newValue);
@@ -45,7 +37,6 @@ function useSimpleSearch({
 
     return results.length ? results : <NoResultsFound>No results found for `{searchValue}`</NoResultsFound>;
   }, [children, searchValue]);
-  useEffect(() => setSearchValue(''), [isOpen]);
 
   return { children: options, searchValue, searchOnChange };
 }

package/src/Components/Input/Input.theme.ts

@@ -6,6 +6,7 @@ const InputTheme = {
       height: '48',
       borderRadius: '4',
       borderStyle: 'solid',
+      borderColor: 'neutral.90',
       borderWidth: '1px',
       boxShadow: 'inner',
       _focusVisible: {

package/src/index.ts

@@ -142,4 +142,14 @@ export { default as BreadcrumbLink } from './Components/Breadcrumb/BreadcrumbLin
 export type { RibbonProps } from './Components/Ribbon/Ribbon';
 export { default as Ribbon } from './Components/Ribbon/Ribbon';
 
+export type { DropdownProps } from './Components/Dropdown/Dropdown';
+export {
+  default as Dropdown,
+  DropdownOption,
+  DropdownGroup,
+  DropdownSearch,
+  NoResultsFound as DropdownNoResultsFound,
+  typedDropdown,
+} from './Components/Dropdown/Dropdown';
+
 export { BREAKPOINTS } from './Foundations/Breakpoints/Breakpoints';

package/src/old.ts

@@ -15,9 +15,6 @@ export { default as Base } from './Old/Base/Base';
 export type { Props as DatePickerProps } from './Old/DatePicker/DatePicker';
 export { default as DatePicker } from './Old/DatePicker/DatePicker';
 
-export type { Props as DropdownProps } from './Old/Dropdown/Dropdown';
-export { default as Dropdown } from './Old/Dropdown/Dropdown';
-
 export type { Props as DropdownMenuProps } from './Old/Dropdown/DropdownMenu';
 export { default as DropdownMenu } from './Old/Dropdown/DropdownMenu';