@bitrise/bitkit 10.2.1 → 10.2.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.2.1",
+  "version": "10.2.3",
   "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,63 @@ 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/Status/Status500.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMediaQuery } from '../hooks';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Image from '../Image/Image';
+import Image from '../../Components/Image/Image';
 import Text from '../../Components/Text/Text';
 
 export type Props = FlexProps;
@@ -32,7 +32,7 @@ const Status500: React.FunctionComponent<Props> = (props: Props) => {
         Everything is under control, we will be back soon. Until then keep refreshing your browser.
       </Text>
 
-      <Image margin="x16" src="https://bitrise-bitkit.s3.us-east-2.amazonaws.com/assets/Status500.svg" />
+      <Image marginY="64" src="https://bitrise-bitkit.s3.us-east-2.amazonaws.com/assets/Status500.svg" />
     </Flex>
   );
 };

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';
 
@@ -63,24 +57,6 @@ export { default as Logo } from './Old/Logo/Logo';
 export type { Props as NotificationProps } from './Old/Notification/Notification';
 export { default as Notification } from './Old/Notification/Notification';
 
-export type { Props as PlacementProps } from './Old/Placement/Placement';
-export { default as Placement } from './Old/Placement/Placement';
-
-export type { Props as PlacementAreaProps } from './Old/Placement/PlacementArea';
-export { default as PlacementArea } from './Old/Placement/PlacementArea';
-
-export type { Props as PlacementArrowProps } from './Old/Placement/PlacementArrow';
-export { default as PlacementArrow } from './Old/Placement/PlacementArrow';
-
-export type { Props as PlacementManagerProps } from './Old/Placement/PlacementManager';
-export { default as PlacementManager } from './Old/Placement/PlacementManager';
-
-export type { Props as PlacementReferenceProps } from './Old/Placement/PlacementReference';
-export { default as PlacementReference } from './Old/Placement/PlacementReference';
-
-export type { Props as PortalProps } from './Old/Portal/Portal';
-export { default as Portal } from './Old/Portal/Portal';
-
 export type { Props as ProgressBarProps } from './Old/Progress/ProgressBar';
 export { default as ProgressBar } from './Old/Progress/ProgressBar';
 
@@ -90,9 +66,6 @@ export { default as ProgressBitbot } from './Old/Progress/ProgressBitbot';
 export type { Props as ProgressSpinnerProps } from './Old/Progress/ProgressSpinner';
 export { default as ProgressSpinner } from './Old/Progress/ProgressSpinner';
 
-export type { Props as RadioButtonProps } from './Old/RadioButton/RadioButton';
-export { default as RadioButton } from './Old/RadioButton/RadioButton';
-
 export type { Props as RibbonProps } from './Old/Ribbon/Ribbon';
 export { default as Ribbon } from './Old/Ribbon/Ribbon';
 
@@ -102,9 +75,6 @@ export { default as Skeleton } from './Old/Skeleton/Skeleton';
 export type { Props as SkeletonBoxProps } from './Old/Skeleton/SkeletonBox';
 export { default as SkeletonBox } from './Old/Skeleton/SkeletonBox';
 
-export type { Props as Status404Props } from './Old/Status/Status404';
-export { default as Status404 } from './Old/Status/Status404';
-
 export type { Props as Status500Props } from './Old/Status/Status500';
 export { default as Status500 } from './Old/Status/Status500';