@bitrise/bitkit 10.8.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/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/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,
   },
 };