@bitrise/bitkit 10.8.0 → 10.9.2

package/src/Components/Dropdown/Dropdown.tsx

@@ -0,0 +1,345 @@
+import React, {
+  cloneElement,
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  chakra,
+  ChakraProps,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  useControllableState,
+  useMultiStyleConfig,
+} from '@chakra-ui/react';
+import { FloatingFocusManager } from '@floating-ui/react-dom-interactions';
+import Icon from '../Icon/Icon';
+import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
+import { DropdownOption, DropdownGroup, DropdownDetailedOption, DropdownOptionProps } from './DropdownOption';
+import DropdownButton from './DropdownButton';
+import useFloatingDropdown from './hooks/useFloatingDropdown';
+import { useSimpleSearch, NoResultsFound } from './hooks/useSimpleSearch';
+import { isSearchable } from './isNodeMatch';
+
+type DropdownSearchCustomProps = {
+  value: string;
+  onChange: (newValue: string) => void;
+};
+type DropdownSearchProps = { placeholder?: string; reset?: boolean };
+const DropdownSearch = ({
+  placeholder = 'Start typing to filter options',
+  reset = true,
+  ...rest
+}: DropdownSearchProps | (DropdownSearchProps & DropdownSearchCustomProps)) => {
+  const { search } = useDropdownStyles();
+  const { searchValue, searchOnSubmit, searchOnChange, searchRef } = useDropdownContext();
+
+  const { value, onChange } = 'onChange' in rest ? rest : { value: searchValue, onChange: searchOnChange };
+
+  const onChangeCB = useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      onChange(ev.target.value);
+    },
+    [onChange],
+  );
+  useEffect(() => {
+    return () => {
+      if (reset) {
+        onChange('');
+      }
+    };
+  }, [reset]);
+  const onKeyDown = useCallback(
+    (ev: React.KeyboardEvent) => {
+      if (ev.key === 'Enter') {
+        ev.preventDefault();
+        searchOnSubmit();
+      }
+    },
+    [searchOnSubmit],
+  );
+  return (
+    <InputGroup sx={search}>
+      <InputLeftElement pointerEvents="none">
+        <Icon aria-hidden color="neutral.60" size="24" name="Magnifier" />
+      </InputLeftElement>
+      <Input
+        onKeyDown={onKeyDown}
+        ref={searchRef}
+        role="search"
+        aria-label={placeholder}
+        width="100%"
+        placeholder={placeholder}
+        value={value}
+        onChange={onChangeCB}
+      />
+    </InputGroup>
+  );
+};
+export { DropdownOption, DropdownGroup, DropdownSearch, NoResultsFound, DropdownDetailedOption };
+
+type DropdownInstance<T> = { value: T; name?: string };
+type DropdownChangeEventHandler<T> = (ev: { target: DropdownInstance<T> }) => void;
+export interface DropdownProps<T> extends ChakraProps {
+  name?: string;
+  onChange?: DropdownChangeEventHandler<T>;
+  onBlur?: DropdownChangeEventHandler<T>;
+  value?: T;
+  defaultValue?: T;
+  size?: 'small' | 'medium';
+  dropdownMaxHeight?: ChakraProps['maxH'];
+  dropdownMinHeight?: ChakraProps['minH'];
+  readOnly?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  'aria-label'?: string;
+  search?: ReactNode;
+  children?: ReactNode;
+}
+
+function useOptionListWithIndexes({ children }: { children: ReactNode }) {
+  return useMemo(() => {
+    const childList = React.Children.toArray(children);
+    let idx = 0;
+    const transform = (ch: ReactNode): ReactNode => {
+      if (React.isValidElement(ch)) {
+        if (ch.type === DropdownOption || ch.type === DropdownDetailedOption) {
+          const index = idx;
+          idx += 1;
+          return cloneElement(ch, {
+            ...ch.props,
+            index,
+          });
+        }
+        if ('children' in ch.props) {
+          return cloneElement(ch, {
+            ...ch.props,
+            children: React.Children.toArray(ch.props.children).map(transform),
+          });
+        }
+      }
+      return ch;
+    };
+    return childList.map(transform);
+  }, [children]);
+}
+
+type UseDropdownProps<T> = {
+  ref: React.Ref<DropdownInstance<T>>;
+  optionsRef: React.RefObject<HTMLDivElement>;
+};
+
+function findOption<T>(children: ReactNode, value: T): { label: ReactNode; index: number } | null {
+  const list = React.Children.toArray(children);
+  for (let i = 0; i < list.length; i++) {
+    const elem = list[i];
+    if (React.isValidElement(elem)) {
+      const optValue = typeof elem.props.value === 'undefined' ? null : elem.props.value;
+      if (elem.type === DropdownOption && optValue === value) {
+        return { label: elem.props.children, index: elem.props.index };
+      }
+      const ch =
+        findOption(elem.props.children, value) || (isSearchable(elem.type) && findOption(elem.type(elem.props), value));
+      if (ch) {
+        return ch;
+      }
+    }
+  }
+  return null;
+}
+
+function useDropdown<T>({
+  name,
+  onChange,
+  value,
+  optionsRef,
+  defaultValue,
+  ref,
+  children,
+  readOnly,
+  ...rest
+}: DropdownProps<T> & UseDropdownProps<T>) {
+  const searchRef = useRef(null);
+  const {
+    close,
+    isOpen,
+    getReferenceProps,
+    floatingProps,
+    context: floatingContext,
+    activeIndex,
+    setSelectedIndex,
+    setActiveIndex,
+    getItemProps,
+    listRef,
+  } = useFloatingDropdown({ enabled: !readOnly, optionsRef });
+  const [formValue, setFormValue] = useControllableState<T>({
+    onChange: (newValue) => onChange?.({ target: { value: newValue, name } }),
+    defaultValue,
+    value,
+  });
+
+  const [formLabel, setFormLabel] = useState<ReactNode>();
+  useImperativeHandle(ref, () => ({ value: formValue, name }), [formValue, name]);
+  const refdChildren = useOptionListWithIndexes({ children });
+
+  const searchOnSubmit = useCallback(() => {
+    if (activeIndex !== null) {
+      listRef.current[activeIndex]?.click();
+    }
+  }, [activeIndex]);
+  const referenceKeyDown = useCallback(
+    (ev: React.KeyboardEvent) => {
+      if (ev.key === 'Enter') {
+        ev.preventDefault();
+        searchOnSubmit();
+      }
+    },
+    [searchOnSubmit],
+  );
+  const { searchValue, searchOnChange, ...searchResults } = useSimpleSearch({
+    children: refdChildren,
+    onSearch: () => setActiveIndex(null),
+  });
+
+  const onOptionSelected = useCallback(
+    (args: DropdownEventArgs<T>) => {
+      setFormValue(args.value);
+      close();
+    },
+    [close, setFormValue],
+  );
+  const context = useMemo(
+    () => ({
+      formValue,
+      onOptionSelected,
+      getItemProps,
+      activeIndex,
+      searchOnChange,
+      searchValue,
+      searchRef,
+      searchOnSubmit,
+      listRef,
+    }),
+    [
+      listRef,
+      formValue,
+      onOptionSelected,
+      activeIndex,
+      getItemProps,
+      searchOnChange,
+      searchValue,
+      searchRef,
+      searchOnSubmit,
+    ],
+  );
+
+  useEffect(() => {
+    const currentOption = findOption(refdChildren, formValue);
+    if (currentOption) {
+      setFormLabel(currentOption.label);
+      setSelectedIndex(currentOption.index);
+    }
+  }, [refdChildren, formValue]);
+  return {
+    isOpen,
+    referenceProps: getReferenceProps({
+      onKeyDown: referenceKeyDown,
+    }),
+    floatingProps,
+    floatingContext,
+    searchOnSubmit,
+    searchRef,
+    context,
+    formLabel,
+    formValue,
+    ...searchResults,
+    ...rest,
+  };
+}
+
+const Dropdown = forwardRef<DropdownInstance<string | null>, DropdownProps<string | null>>(
+  (
+    { dropdownMaxHeight, dropdownMinHeight, readOnly, onBlur, placeholder, name, search, size = 'medium', ...props },
+    ref,
+  ) => {
+    const optionsRef = useRef(null);
+    const {
+      context: dropdownCtx,
+      floatingContext,
+      isOpen,
+      referenceProps,
+      floatingProps,
+      formValue,
+      formLabel,
+      searchRef,
+      children,
+      ...rest
+    } = useDropdown({
+      name,
+      readOnly,
+      optionsRef,
+      ref,
+      ...props,
+    });
+    const dropdownStyles = useMultiStyleConfig('Dropdown', { disabled: readOnly, size, ...rest });
+
+    const blurHandler = () => {
+      if (!onBlur) {
+        return;
+      }
+      if (!isOpen) {
+        onBlur({ target: { value: formValue, name } });
+      }
+    };
+    const listStyles = useMemo(
+      () => ({
+        ...dropdownStyles.list,
+        '--dropdown-floating-max': dropdownMaxHeight,
+        '--dropdown-floating-min': dropdownMinHeight,
+      }),
+      [dropdownMinHeight, dropdownMaxHeight, dropdownStyles.list],
+    );
+    const searchElement = search === false ? null : search || <DropdownSearch />;
+    return (
+      <>
+        {name && formValue && <input type="hidden" name={name} value={formValue} />}
+        <DropdownProvider context={dropdownCtx} styles={dropdownStyles}>
+          <DropdownButton
+            {...referenceProps}
+            {...props}
+            placeholder={placeholder}
+            size={size}
+            formLabel={formLabel}
+            blurHandler={blurHandler}
+            readOnly={readOnly}
+          />
+          {isOpen && (
+            <FloatingFocusManager initialFocus={searchRef} context={floatingContext}>
+              <chakra.div {...floatingProps} sx={listStyles}>
+                {searchElement}
+                <chakra.div tabIndex={-1} ref={optionsRef} __css={dropdownStyles.options}>
+                  {children}
+                </chakra.div>
+              </chakra.div>
+            </FloatingFocusManager>
+          )}
+        </DropdownProvider>
+      </>
+    );
+  },
+);
+
+export function typedDropdown<T>() {
+  return {
+    Dropdown: Dropdown as React.ForwardRefExoticComponent<DropdownProps<T> & React.RefAttributes<DropdownInstance<T>>>,
+    DropdownOption: DropdownOption as (p: DropdownOptionProps<T>) => JSX.Element,
+  };
+}
+
+export default Dropdown;

package/src/Components/Dropdown/DropdownButton.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, ReactNode } from 'react';
+import { chakra, ChakraProps } from '@chakra-ui/react';
+import Icon from '../Icon/Icon';
+import { useDropdownStyles } from './Dropdown.context';
+
+interface DropdownButtonProps extends ChakraProps {
+  blurHandler: () => void;
+  readOnly?: boolean;
+  placeholder?: string;
+  formLabel?: ReactNode;
+  size: 'medium' | 'small';
+  children?: ReactNode;
+}
+const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
+  ({ size, blurHandler, formLabel, readOnly, placeholder, children, ...rest }, ref) => {
+    const { field, icon } = useDropdownStyles();
+    const iconSize = size === 'medium' ? '24' : '16';
+    return (
+      <chakra.button aria-readonly={readOnly} type="button" ref={ref} onBlur={blurHandler} __css={field} {...rest}>
+        <chakra.span overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" flexGrow={1}>
+          {formLabel || placeholder}
+        </chakra.span>
+        <Icon aria-hidden="true" __css={icon} name="DropdownArrows" fontSize={iconSize} size={iconSize} />
+      </chakra.button>
+    );
+  },
+);
+
+export default DropdownButton;

package/src/Components/Dropdown/DropdownOption.tsx

@@ -0,0 +1,89 @@
+import { ReactNode, useId } from 'react';
+import { chakra } from '@chakra-ui/react';
+import { cx } from '@chakra-ui/utils';
+import Text from '../Text/Text';
+import Divider from '../Divider/Divider';
+import { useDropdownContext, useDropdownStyles } from './Dropdown.context';
+
+export type DropdownOptionProps<T> = {
+  value?: T | null;
+  children?: ReactNode;
+  'aria-label'?: string;
+};
+const DropdownOption = <T = string,>({ value = null, children, ...rest }: DropdownOptionProps<T>) => {
+  const { item } = useDropdownStyles();
+  const ctx = useDropdownContext<T | null>();
+  const { index } = rest as { index?: number };
+  return (
+    <chakra.div
+      role="option"
+      id={useId()}
+      ref={(node) => {
+        if (ctx.listRef.current) {
+          ctx.listRef.current[index!] = node;
+        }
+      }}
+      {...rest}
+      className={cx(
+        value === ctx.formValue && 'bitkit-select__option-active',
+        index === ctx.activeIndex && 'bitkit-select__option-hover',
+      )}
+      __css={item}
+      {...ctx.getItemProps({
+        onClick() {
+          ctx.onOptionSelected({ value, index, label: children });
+        },
+      })}
+    >
+      {children}
+    </chakra.div>
+  );
+};
+
+const DropdownGroup = ({ children, label }: { children: ReactNode; label: string }) => {
+  const { group } = useDropdownStyles();
+  const textId = useId();
+  return (
+    <div role="group" aria-labelledby={textId}>
+      <chakra.div __css={group}>
+        <Text size="1" id={textId} fontWeight="bold" color="neutral.60">
+          {label}
+        </Text>
+        <Divider color="neutral.93" />
+      </chakra.div>
+      {children}
+    </div>
+  );
+};
+
+const DropdownDetailedOption = ({
+  icon,
+  title,
+  subtitle,
+  value,
+  ...rest
+}: {
+  icon: ReactNode;
+  title: string;
+  subtitle: string;
+  value?: string;
+}) => {
+  return (
+    <DropdownOption value={value} {...rest} aria-label={title}>
+      <chakra.div alignItems="center" gap="12" display="flex" flexDir="row">
+        {icon}
+        <chakra.div>
+          <Text size="3" color="purple.10">
+            {title}
+          </Text>
+          <Text size="2" color="neutral.60">
+            {subtitle}
+          </Text>
+        </chakra.div>
+      </chakra.div>
+    </DropdownOption>
+  );
+};
+DropdownDetailedOption.searchable = true;
+
+export { DropdownOption, DropdownGroup, DropdownDetailedOption };

package/src/Components/Dropdown/hooks/useAutoScroll.ts

@@ -0,0 +1,61 @@
+import { useLayoutEffect, useRef } from 'react';
+
+const useAutoScroll = ({
+  optionsRef,
+  listRef,
+  activeIndex,
+  selectedIndex,
+  keyboardControlled,
+}: {
+  optionsRef: React.RefObject<HTMLDivElement>;
+  listRef: React.MutableRefObject<HTMLElement[]>;
+  activeIndex: number | null;
+  selectedIndex: number | null;
+  keyboardControlled: boolean;
+}) => {
+  const prevActiveIndexRef = useRef<number | null>();
+  useLayoutEffect(() => {
+    prevActiveIndexRef.current = activeIndex;
+  }, [activeIndex]);
+  const prevActiveIndex = prevActiveIndexRef.current;
+
+  useLayoutEffect(() => {
+    const options = optionsRef.current;
+
+    if (options && keyboardControlled) {
+      let activeItem = null;
+      if (activeIndex != null) {
+        activeItem = listRef.current[activeIndex];
+      } else if (selectedIndex != null) {
+        activeItem = listRef.current[selectedIndex];
+      }
+      if (activeItem && prevActiveIndex != null) {
+        const activeItemHeight = listRef.current[prevActiveIndex]?.offsetHeight ?? 0;
+
+        const floatingHeight = options.offsetHeight;
+        const top = activeItem.offsetTop;
+        const bottom = top + activeItemHeight;
+
+        if (top < options.scrollTop) {
+          options.scrollTop -= options.scrollTop - top + 5;
+        } else if (bottom > floatingHeight + options.scrollTop) {
+          options.scrollTop += bottom - floatingHeight - options.scrollTop + 5;
+        }
+      }
+    }
+  }, [prevActiveIndex, activeIndex, optionsRef, selectedIndex, keyboardControlled]);
+
+  useLayoutEffect(() => {
+    requestAnimationFrame(() => {
+      const options = optionsRef.current;
+      if (options && options.clientHeight < options.scrollHeight) {
+        const selectedItem = selectedIndex && listRef.current[selectedIndex];
+        if (selectedItem) {
+          options.scrollTop = selectedItem.offsetTop - options.offsetHeight / 2 + selectedItem.offsetHeight / 2;
+        }
+      }
+    });
+  }, [selectedIndex, optionsRef]);
+};
+
+export default useAutoScroll;

package/src/Components/Dropdown/hooks/useFloatingDropdown.ts

@@ -0,0 +1,99 @@
+import { RefObject, useEffect, useRef, useState } from 'react';
+import {
+  autoUpdate,
+  useFloating,
+  useInteractions,
+  size,
+  useClick,
+  useListNavigation,
+  useRole,
+  useDismiss,
+  flip,
+} from '@floating-ui/react-dom-interactions';
+import useAutoScroll from './useAutoScroll';
+
+const useFloatingDropdown = ({ enabled, optionsRef }: { enabled: boolean; optionsRef: RefObject<HTMLDivElement> }) => {
+  const listRef = useRef<HTMLElement[]>([]);
+  const [isOpen, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const [keyboardControlled, setKeyboardControlled] = useState(true);
+  useEffect(() => {
+    setKeyboardControlled(true);
+  }, [isOpen]);
+  const keyboardControlledHandlers = {
+    onPointerEnter() {
+      setKeyboardControlled(false);
+    },
+    onPointerMove() {
+      setKeyboardControlled(false);
+    },
+    onKeyDown() {
+      setKeyboardControlled(true);
+    },
+  };
+
+  const { context, reference, floating, strategy, x, y } = useFloating({
+    open: enabled && isOpen,
+    onOpenChange: setOpen,
+    whileElementsMounted(aRef, aFloat, update) {
+      return autoUpdate(aRef, aFloat, update, { elementResize: false });
+    },
+    middleware: [
+      size({
+        padding: 5,
+        apply({ elements, availableHeight, rects }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`,
+          });
+          elements.floating.style.setProperty('--floating-available-height', `${availableHeight}px`);
+        },
+      }),
+      flip(),
+    ],
+  });
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+    useClick(context, { enabled }),
+    useRole(context, { role: 'listbox' }),
+    useDismiss(context),
+    useListNavigation(context, {
+      enabled,
+      listRef,
+      activeIndex,
+      selectedIndex,
+      virtual: true,
+      loop: true,
+      onNavigate: setActiveIndex,
+    }),
+    {
+      floating: keyboardControlledHandlers,
+    },
+  ]);
+  useAutoScroll({
+    listRef,
+    optionsRef,
+    activeIndex,
+    selectedIndex,
+    keyboardControlled,
+  });
+
+  return {
+    listRef,
+    close: () => setOpen(false),
+    isOpen,
+    getItemProps,
+    activeIndex,
+    setActiveIndex,
+    setSelectedIndex,
+    getReferenceProps(props: React.HTMLProps<Element>) {
+      return getReferenceProps({ ...props, ref: reference });
+    },
+    floatingProps: getFloatingProps({
+      ref: floating,
+      style: { position: strategy, top: y ?? 0, left: x ?? 0 },
+    }),
+    context,
+  };
+};
+
+export default useFloatingDropdown;

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

@@ -0,0 +1,43 @@
+import { Children, cloneElement, isValidElement, ReactNode, 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 }: { children?: ReactNode; onSearch?: () => void }) {
+  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]);
+
+  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;