@bitrise/bitkit 10.6.0 → 10.9.0

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

@@ -0,0 +1,52 @@
+import { Children, cloneElement, isValidElement, ReactNode, useEffect, useMemo, useState } from 'react';
+import { chakra } from '@chakra-ui/react';
+import { useDropdownStyles } from '../Dropdown.context';
+import isNodeMatch from '../isNodeMatch';
+import { DropdownGroup } from '../DropdownOption';
+
+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;
+}) {
+  const [searchValue, setSearchValue] = useState('');
+  const searchOnChange = (newValue: string) => {
+    setSearchValue(newValue);
+    onSearch?.();
+  };
+  const options = useMemo(() => {
+    if (!searchValue) {
+      return children;
+    }
+
+    const transform = (node: ReactNode): ReactNode => {
+      if (isValidElement(node) && node.type === DropdownGroup) {
+        const groupChildren = Children.toArray(node.props.children).map(transform).filter(Boolean);
+        if (groupChildren.length === 0) {
+          return null;
+        }
+        return cloneElement(node, {
+          ...node.props,
+          children: groupChildren,
+        });
+      }
+      return isNodeMatch(node, searchValue) ? node : null;
+    };
+
+    const results = Children.toArray(children).map(transform).filter(Boolean);
+
+    return results.length ? results : <NoResultsFound>No results found for `{searchValue}`</NoResultsFound>;
+  }, [children, searchValue]);
+  useEffect(() => setSearchValue(''), [isOpen]);
+
+  return { children: options, searchValue, searchOnChange };
+}
+export { useSimpleSearch, NoResultsFound };

package/src/Components/Dropdown/isNodeMatch.ts

@@ -0,0 +1,39 @@
+import React, { JSXElementConstructor, ReactElement, ReactNode } from 'react';
+
+type SearchableElement = JSXElementConstructor<any> & { searchable: true };
+export function isSearchable(
+  node: string | JSXElementConstructor<any> | SearchableElement,
+): node is (x: any) => ReactElement {
+  return typeof node === 'function' && 'searchable' in node && node.searchable;
+}
+
+function isNodeMatch(node: ReactNode, filter: string): boolean {
+  if (typeof node === 'number' || typeof node === 'boolean' || typeof node === 'undefined' || node === null) {
+    return false;
+  }
+  if (typeof node === 'string') {
+    return node.toLowerCase().includes(filter.toLowerCase());
+  }
+  if (Array.isArray(node)) {
+    return node.some((child) => isNodeMatch(child, filter));
+  }
+  if ('children' in node) {
+    return isNodeMatch(node.children, filter);
+  }
+  if (React.isValidElement(node)) {
+    if (node.type === 'svg') {
+      return false;
+    }
+    const ctor = node.type;
+    if (isSearchable(ctor)) {
+      return isNodeMatch(ctor(node.props), filter);
+    }
+    return isNodeMatch(node.props.children, filter);
+  }
+  if (Symbol.iterator in node) {
+    return isNodeMatch(Array.from(node), filter);
+  }
+  return false;
+}
+
+export default isNodeMatch;

package/src/Components/Icons/16x16/StepstatusNext.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const StepstatusNext = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 1.07026C10.8233 0.389577 9.45715 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 5.97111 15.2447 4.11862 14 2.70835V3V4H13.3338C14.1707 5.11421 14.6667 6.49919 14.6667 8C14.6667 11.6819 11.6819 14.6667 8 14.6667L8 8L8 1.33333C9.50081 1.33333 10.8858 1.82926 12 2.66618V1.07026Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default StepstatusNext;

package/src/Components/Icons/16x16/index.ts

@@ -158,6 +158,7 @@ export { default as StepsTuorqouise } from './StepsTuorqouise';
 export { default as StepsViolet } from './StepsViolet';
 export { default as StepsWhite } from './StepsWhite';
 export { default as Steps } from './Steps';
+export { default as StepstatusNext } from './StepstatusNext';
 export { default as StepstatusSkip } from './StepstatusSkip';
 export { default as StepstatusWarning } from './StepstatusWarning';
 export { default as Stopwatch } from './Stopwatch';

package/src/Components/Icons/24x24/StepstatusNext.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const StepstatusNext = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12V0Zm2 21.8v2.034a11.966 11.966 0 0 0 6.276-3.144l-1.415-1.415A9.974 9.974 0 0 1 14 21.8Zm6.175-4.04 1.432 1.432A11.937 11.937 0 0 0 23.959 13H21.95a9.945 9.945 0 0 1-1.776 4.76ZM21.951 11a9.942 9.942 0 0 0-1.677-4.617l1.436-1.436A11.936 11.936 0 0 1 23.959 11H21.95Zm-1.552-7.57-1.414 1.414A9.977 9.977 0 0 0 14 2.2V.166a11.968 11.968 0 0 1 6.4 3.263Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default StepstatusNext;

package/src/Components/Icons/24x24/index.ts

@@ -158,6 +158,7 @@ export { default as StepsTuorqouise } from './StepsTuorqouise';
 export { default as StepsViolet } from './StepsViolet';
 export { default as StepsWhite } from './StepsWhite';
 export { default as Steps } from './Steps';
+export { default as StepstatusNext } from './StepstatusNext';
 export { default as StepstatusSkip } from './StepstatusSkip';
 export { default as StepstatusWarning } from './StepstatusWarning';
 export { default as Stopwatch } from './Stopwatch';

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

@@ -0,0 +1,19 @@
+import { SystemStyleObject } from '@chakra-ui/react';
+
+const InputTheme = {
+  baseStyle: {
+    field: <SystemStyleObject>{
+      height: '48',
+      borderRadius: '4',
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      boxShadow: 'inner',
+      _focusVisible: {
+        boxShadow: 'outline',
+        outline: 'none',
+      },
+    },
+  },
+};
+
+export default InputTheme;

package/src/Components/Popover/PopoverArrow.tsx

@@ -0,0 +1,7 @@
+import { PopoverArrowProps as ChakraPopoverArrowProps, PopoverArrow as ChakraPopoverArrow } from '@chakra-ui/react';
+
+export type PopoverArrowProps = ChakraPopoverArrowProps;
+
+const PopoverArrow = (props: PopoverArrowProps) => <ChakraPopoverArrow {...props} />;
+
+export default PopoverArrow;

package/src/index.ts

@@ -106,6 +106,9 @@ export { default as PopoverTrigger } from './Components/Popover/PopoverTrigger';
 export type { PopoverContentProps } from './Components/Popover/PopoverContent';
 export { default as PopoverContent } from './Components/Popover/PopoverContent';
 
+export type { PopoverArrowProps } from './Components/Popover/PopoverArrow';
+export { default as PopoverArrow } from './Components/Popover/PopoverArrow';
+
 export type { AvatarProps } from './Components/Avatar/Avatar';
 export { default as Avatar } from './Components/Avatar/Avatar';
 

package/src/theme.ts

@@ -13,6 +13,8 @@ import List from './Components/List/List.theme';
 import Menu from './Components/Menu/Menu.theme';
 import Radio from './Components/Form/Radio/Radio.theme';
 import Select from './Components/Select/Select.theme';
+import Input from './Components/Input/Input.theme';
+import Dropdown from './Components/Dropdown/Dropdown.theme';
 import Tabs from './Components/Tabs/Tabs.theme';
 import Text from './Components/Text/Text.theme';
 import Alert from './Foundations/Themes/Alert.theme';
@@ -79,11 +81,13 @@ const theme = {
     Modal: Dialog,
     Radio,
     Select,
+    Dropdown,
     Tabs,
     Text,
     Tooltip,
     Alert,
     CloseButton,
+    Input,
     Popover,
   },
 };