@bitrise/bitkit 10.25.3 → 10.26.1

package/src/Old/Dropdown/Dropdown.tsx

@@ -1,101 +0,0 @@
-import * as React from 'react';
-import Text from '../../Components/Text/Text';
-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';
-import DropdownMenuItem from './DropdownMenuItem';
-import DropdownMenu from './DropdownMenu';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type DropdownValue = any;
-interface Option {
-  text: string;
-  value: DropdownValue;
-}
-
-interface OptionGroup {
-  text: string;
-  options: DropdownValue[];
-}
-
-export interface Props extends ButtonProps {
-  /** Handler for the value that is selected */
-  onChange?: (value: DropdownValue) => void;
-  /** Array of options that can be selected */
-  options: (Option | OptionGroup)[];
-  /** Selected value from the options */
-  selected?: DropdownValue;
-  maxHeight?: string;
-  menuClassName?: string;
-}
-
-/**
- * A quick Dropdown component for the most simplest
- * dropdown menu use case. Anything more complicated
- * and custom should be done with Placement.
- */
-const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, options, onChange, selected, maxHeight, menuClassName, ...rest } = props;
-
-  const handleChange = (value: DropdownValue) => {
-    if (onChange) {
-      onChange(value);
-    }
-  };
-
-  const renderOption = ({ text, value }: Option, onClose: () => void) => (
-    <DropdownMenuItem
-      onClick={() => {
-        handleChange(value);
-        onClose();
-      }}
-      selected={selected === value}
-      width="100%"
-    >
-      {text}
-    </DropdownMenuItem>
-  );
-
-  return (
-    <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>
-  );
-};
-
-export default Dropdown;

package/src/Old/Dropdown/DropdownMenu.css

@@ -1,48 +0,0 @@
-.DropdownMenu__content {
-  max-width: 100%;
-  overflow: auto;
-  word-break: break-word;
-}
-
-.DropdownMenu__group-text {
-  display: flex;
-  align-items: center;
-  padding: var(--size--x3) var(--size--x4);
-  text-transform: uppercase;
-  gap: var(--size--x4);
-}
-
-.DropdownMenu__group-text::after {
-  content: '';
-  flex: 1;
-  /* stylelint-disable-next-line unit-disallowed-list */
-  height: 1px;
-  background-color: var(--color-gray--3);
-}
-
-.DropdownMenu__item {
-  padding: var(--size--x3) var(--size--x8) var(--size--x3) var(--size--x1);
-  border: 0;
-  background: transparent;
-  color: inherit;
-  text-align: left;
-  line-height: inherit;
-  cursor: pointer;
-  transition-property: background-color, color;
-  transition-duration: var(--transition-duration--base);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.DropdownMenu__group .DropdownMenu__item {
-  padding-left: var(--size--x4);
-}
-
-.DropdownMenu__item[disabled] {
-  color: var(--color-gray--5);
-  pointer-events: none;
-}
-
-.DropdownMenu__item:hover {
-  background-color: var(--color-grape--1);
-  color: var(--color-grape--3);
-}

package/src/Old/Dropdown/DropdownMenu.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import { Props as BaseProps } from '../Base/Base';
-import Flex from '../Flex/Flex';
-import PlacementArea from '../Placement/PlacementArea';
-import './DropdownMenu.css';
-
-export interface Props extends BaseProps {
-  /** The height the DropdownMenu can go to before it starts to scroll */
-  maxHeight?: string;
-  /** Fixed width of the menu and all of the DropdownMenuItems */
-  width?: number | string;
-}
-
-/**
- * Parent container for DropdownMenuItems
- */
-const DropdownMenu: React.FunctionComponent<Props> = (props: Props) => {
-  const { className, children, maxHeight, width, ...rest } = props;
-
-  const classes = classNames(className, 'DropdownMenu__content');
-
-  return (
-    <PlacementArea {...rest} direction="vertical" paddingVertical="x4">
-      <Flex className={classes} direction="vertical" maxHeight={maxHeight} width={width}>
-        {children}
-      </Flex>
-    </PlacementArea>
-  );
-};
-DropdownMenu.defaultProps = {
-  width: '16rem',
-};
-
-export default DropdownMenu;

package/src/Old/Dropdown/DropdownMenuItem.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Icon, { TypeIconName } from '../../Components/Icon/Icon';
-import Visibility from '../Visibility/Visibility';
-
-export interface Props extends FlexProps {
-  /** Name of the icon that appears to the left of the menu item */
-  icon?: TypeIconName;
-  /** @Ignore */
-  onClick?: () => void;
-  /** Flag if the menu item should be in a selected state */
-  selected?: boolean;
-}
-
-/**
- * Dropdown menu items that are the children to the DropdownMenu
- * component.
- */
-const DropdownMenuItem: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, icon, onClick, selected, textColor, ...rest } = props;
-  const classes = classnames('DropdownMenu__item', {
-    'DropdownMenu__item--selected': selected,
-  });
-
-  const handleClick = (event: React.SyntheticEvent) => {
-    event.nativeEvent.stopImmediatePropagation();
-
-    if (onClick) {
-      onClick();
-    }
-  };
-
-  return (
-    <Flex
-      {...rest}
-      alignChildrenVertical="middle"
-      className={classes}
-      direction="horizontal"
-      gap="x1"
-      onClick={handleClick}
-    >
-      <Visibility Component={Flex} visible={selected || false}>
-        <Icon name="Tick" />
-      </Visibility>
-
-      <Flex direction="horizontal" gap="x4" grow initial="none">
-        {icon && (
-          <Flex>
-            <Icon name={icon} textColor={textColor} />
-          </Flex>
-        )}
-
-        <Flex grow initial="none" textColor={textColor}>
-          {children}
-        </Flex>
-      </Flex>
-    </Flex>
-  );
-};
-
-export default DropdownMenuItem;

package/src/Old/Dropdown/DropdownMenuItemGroup.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Text from '../../Components/Text/Text';
-
-export interface Props extends FlexProps {
-  text: string;
-}
-
-const DropdownMenuItemGroup: React.FunctionComponent<Props> = ({ text, children, className, ...rest }: Props) => (
-  <Flex className={classnames('DropdownMenu__group', className)} {...rest}>
-    <Text className="DropdownMenu__group-text" size="2" color="neutral.50">
-      {text}
-    </Text>
-    {children}
-  </Flex>
-);
-
-export default DropdownMenuItemGroup;

package/src/Old/hooks/useCopyToClipboard.ts

@@ -1,25 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import Clipboard from 'clipboard';
-
-export default (): [(element: Element | null) => void, boolean] => {
-  const clipboard = useRef<Clipboard>();
-  const [node, setNode] = useState<Element | null>(null);
-  const [hasCopied, setHasCopied] = useState(false);
-
-  useEffect(() => {
-    if (node) {
-      clipboard.current = new Clipboard(node);
-      clipboard.current.on('success', () => {
-        setHasCopied(true);
-      });
-    }
-
-    return () => {
-      if (clipboard.current) {
-        clipboard.current.destroy();
-      }
-    };
-  }, [node]);
-
-  return [setNode, hasCopied];
-};