@bitrise/bitkit 10.2.2 → 10.2.3-alpha-chakra.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.2.2",
+  "version": "10.2.3-alpha-chakra.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Old/Dropdown/Dropdown.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
-import Placement from '../Placement/Placement';
-import PlacementManager from '../Placement/PlacementManager';
-import PlacementReference from '../Placement/PlacementReference';
 import Text from '../../Components/Text/Text';
-import DropdownButton, { Props as DropdownButtonProps } from './DropdownButton';
-import DropdownMenu from './DropdownMenu';
-import DropdownMenuItem from './DropdownMenuItem';
+import Popover from '../../Components/Popover/Popover';
+import PopoverTrigger from '../../Components/Popover/PopoverTrigger';
+import PopoverContent from '../../Components/Popover/PopoverContent';
+import Button, { ButtonProps } from '../../Components/Button/Button';
 import DropdownMenuItemGroup from './DropdownMenuItemGroup';
-
-const { useState } = React;
+import DropdownMenuItem from './DropdownMenuItem';
+import DropdownMenu from './DropdownMenu';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type DropdownValue = any;
@@ -22,7 +20,7 @@ interface OptionGroup {
   options: DropdownValue[];
 }
 
-export interface Props extends DropdownButtonProps {
+export interface Props extends ButtonProps {
   /** Handler for the value that is selected */
   onChange?: (value: DropdownValue) => void;
   /** Array of options that can be selected */
@@ -40,56 +38,64 @@ export interface Props extends DropdownButtonProps {
  */
 const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
   const { children, options, onChange, selected, maxHeight, menuClassName, ...rest } = props;
-  const [visible, setVisible] = useState(false);
 
   const handleChange = (value: DropdownValue) => {
     if (onChange) {
       onChange(value);
     }
-    setVisible(false);
   };
 
-  const renderOption = ({ text, value }: Option) => (
-    <DropdownMenuItem onClick={() => handleChange(value)} selected={selected === value} width="100%">
+  const renderOption = ({ text, value }: Option, onClose: () => void) => (
+    <DropdownMenuItem
+      onClick={() => {
+        handleChange(value);
+        onClose();
+      }}
+      selected={selected === value}
+      width="100%"
+    >
       {text}
     </DropdownMenuItem>
   );
 
   return (
-    <PlacementManager>
-      <PlacementReference>
-        {() => (
-          <DropdownButton
-            {...rest}
-            onClick={() => {
-              setVisible(!visible);
-            }}
-          >
-            <Text hasEllipsis>{children}</Text>
-          </DropdownButton>
-        )}
-      </PlacementReference>
-
-      <Placement onClose={() => setVisible(false)} sameWidth visible={visible}>
-        {() => (
-          <DropdownMenu className={menuClassName} maxHeight={maxHeight} width="100%">
-            {options.map((option) => (
-              <React.Fragment key={option.text}>
-                {'options' in option ? (
-                  <DropdownMenuItemGroup text={option.text}>
-                    {option.options.map((groupOption) => (
-                      <React.Fragment key={groupOption.value}>{renderOption(groupOption)}</React.Fragment>
-                    ))}
-                  </DropdownMenuItemGroup>
-                ) : (
-                  renderOption(option)
-                )}
-              </React.Fragment>
-            ))}
-          </DropdownMenu>
-        )}
-      </Placement>
-    </PlacementManager>
+    <Popover matchWidth>
+      {({ onClose }) => (
+        <>
+          {' '}
+          <PopoverTrigger>
+            <Button
+              width="100%"
+              variant="secondary"
+              rightIconName="ChevronDown"
+              justifyContent="space-between"
+              {...rest}
+            >
+              <Text as="span" hasEllipsis>
+                {children}
+              </Text>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <DropdownMenu className={menuClassName} maxHeight={maxHeight} width="100%">
+              {options.map((option) => (
+                <React.Fragment key={option.text}>
+                  {'options' in option ? (
+                    <DropdownMenuItemGroup text={option.text}>
+                      {option.options.map((groupOption) => (
+                        <React.Fragment key={groupOption.value}>{renderOption(groupOption, onClose)}</React.Fragment>
+                      ))}
+                    </DropdownMenuItemGroup>
+                  ) : (
+                    renderOption(option, onClose)
+                  )}
+                </React.Fragment>
+              ))}
+            </DropdownMenu>
+          </PopoverContent>
+        </>
+      )}
+    </Popover>
   );
 };
 

package/src/old.ts

@@ -18,12 +18,6 @@ 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 DropdownButtonProps } from './Old/Dropdown/DropdownButton';
-export { default as DropdownButton } from './Old/Dropdown/DropdownButton';
-
-export type { Props as DropdownMenusProps } from './Old/Dropdown/DropdownMenus';
-export { default as DropdownMenus } from './Old/Dropdown/DropdownMenus';
-
 export type { Props as DropdownMenuProps } from './Old/Dropdown/DropdownMenu';
 export { default as DropdownMenu } from './Old/Dropdown/DropdownMenu';