@bitrise/bitkit 10.6.0 → 10.9.0

package/src/Components/Dropdown/Dropdown.theme.ts

@@ -0,0 +1,101 @@
+const DropdownTheme = {
+  baseStyle: ({ disabled }: { disabled?: boolean }) => ({
+    field: {
+      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
+      border: '0.0625rem solid',
+      borderColor: 'neutral.90',
+      borderRadius: '4',
+      color: disabled ? 'neutral.70' : 'purple.10',
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      textAlign: 'start',
+      width: '100%',
+      _hover: disabled
+        ? undefined
+        : {
+            bgGradient: 'linear(to-b, neutral.93, neutral.93)',
+          },
+      _active: disabled
+        ? undefined
+        : {
+            bgGradient: 'linear(to-b, neutral.90, neutral.90)',
+            borderColor: 'neutral.80',
+          },
+      pointerEvents: disabled && 'none',
+    },
+    icon: {
+      opacity: disabled && '0.2',
+    },
+    search: {
+      mx: 16,
+      marginTop: '12',
+      width: 'auto',
+    },
+    group: {
+      display: 'flex',
+      flexDir: 'row',
+      gap: '12',
+      paddingY: '8',
+      paddingX: '16',
+      alignItems: 'center',
+    },
+    item: {
+      cursor: 'pointer',
+      userSelect: 'none',
+      color: 'purple.10',
+      paddingY: '8',
+      paddingX: '16',
+      textAlign: 'start',
+      w: '100%',
+      '&.bitkit-select__option-hover': {
+        backgroundColor: 'neutral.95',
+      },
+      '&.bitkit-select__option-active': {
+        backgroundColor: 'purple.95',
+        '&.bitkit-select__option-hover': {
+          backgroundColor: 'purple.93',
+        },
+      },
+    },
+    options: {
+      paddingY: '12',
+      overflowY: 'auto',
+      flexShrink: 1,
+      position: 'relative',
+    },
+    list: {
+      backgroundColor: 'neutral.100',
+      border: '1px solid',
+      borderColor: 'neutral.93',
+      borderRadius: '4',
+      boxShadow: 'large',
+      zIndex: '1',
+      display: 'flex',
+      minH: 0,
+      maxH: 'min(calc(2.5rem * 6 + 1.5rem), var(--floating-available-height))',
+      flexShrink: 1,
+      flexDir: 'column',
+    },
+  }),
+  sizes: {
+    small: {
+      field: {
+        fontSize: '2',
+        height: '32',
+        paddingLeft: '12',
+        paddingRight: '12',
+      },
+    },
+    medium: {
+      field: {
+        fontSize: '3',
+        height: '48',
+        paddingLeft: '16',
+        paddingRight: '16',
+      },
+    },
+  },
+};
+
+export default DropdownTheme;

package/src/Components/Dropdown/Dropdown.tsx

@@ -0,0 +1,306 @@
+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 } from './DropdownOption';
+import DropdownButton from './DropdownButton';
+import useFloatingDropdown from './hooks/useFloatingDropdown';
+import { useSimpleSearch, NoResultsFound } from './hooks/useSimpleSearch';
+import { isSearchable } from './isNodeMatch';
+
+type DropdownSearchProps =
+  | { placeholder?: string }
+  | {
+      placeholder?: string;
+      value: string;
+      onChange: (newValue: string) => void;
+    };
+const DropdownSearch = ({ placeholder = 'Start typing to filter options', ...rest }: DropdownSearchProps) => {
+  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],
+  );
+  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 = { value: string; name?: string };
+type DropdownChangeEventHandler = (ev: { target: DropdownInstance }) => void;
+export interface DropdownProps extends ChakraProps {
+  name?: string;
+  onChange?: DropdownChangeEventHandler;
+  onBlur?: DropdownChangeEventHandler;
+  value?: string;
+  defaultValue?: string;
+  size?: 'small' | 'medium';
+  readOnly?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  'aria-label'?: string;
+  search?: ReactNode;
+  children?: ReactNode;
+}
+
+function useOptionListWithRefs({
+  children,
+  listRef,
+  getItemProps,
+}: {
+  children: ReactNode;
+  listRef: React.MutableRefObject<(HTMLElement | null)[]>;
+  getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+}) {
+  return useMemo(() => {
+    const childList = React.Children.toArray(children);
+    let idx = 0;
+    const transform = (ch: ReactNode): ReactNode => {
+      if (React.isValidElement(ch)) {
+        if (ch.type === DropdownOption) {
+          const index = idx;
+          idx += 1;
+          return cloneElement(ch, {
+            ...getItemProps({
+              ...ch.props,
+              index,
+              ref(node) {
+                listRef.current[index] = node;
+              },
+            }),
+          });
+        }
+        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 = {
+  ref: React.Ref<DropdownInstance>;
+  optionsRef: React.RefObject<HTMLDivElement>;
+};
+
+function findOption(children: ReactNode, value: string): { 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)) {
+      if (elem.type === DropdownOption && (elem.props.value || '') === 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({
+  name,
+  onChange,
+  value,
+  optionsRef,
+  defaultValue,
+  ref,
+  children,
+  readOnly,
+  ...rest
+}: DropdownProps & UseDropdownProps) {
+  const searchRef = useRef(null);
+  const {
+    onClose,
+    isOpen,
+    referenceProps,
+    floatingProps,
+    context: floatingContext,
+    activeIndex,
+    setSelectedIndex,
+    setActiveIndex,
+    getItemProps,
+    listRef,
+  } = useFloatingDropdown({ enabled: !readOnly, optionsRef });
+  const [formValue, setFormValue] = useControllableState({
+    onChange: (newValue) => onChange?.({ target: { value: newValue, name } }),
+    defaultValue,
+    value,
+  });
+
+  const [formLabel, setFormLabel] = useState<ReactNode>();
+  useImperativeHandle(ref, () => ({ value: formValue, name }), [formValue, name]);
+  const refdChildren = useOptionListWithRefs({ children, listRef, getItemProps });
+
+  const searchOnSubmit = useCallback(() => {
+    if (activeIndex !== null) {
+      listRef.current[activeIndex]?.click();
+    }
+  }, [activeIndex]);
+  const { searchValue, searchOnChange, ...searchResults } = useSimpleSearch({
+    children: refdChildren,
+    onSearch: () => setActiveIndex(null),
+    isOpen,
+  });
+
+  const onOptionSelected = useCallback(
+    (args: DropdownEventArgs) => {
+      setFormValue(args.value);
+      onClose();
+    },
+    [onClose, setFormValue],
+  );
+  const context = useMemo(
+    () => ({
+      formValue,
+      onOptionSelected,
+      getItemProps,
+      activeIndex,
+      searchOnChange,
+      searchValue,
+      searchRef,
+      searchOnSubmit,
+    }),
+    [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,
+    floatingProps,
+    floatingContext,
+    searchOnSubmit,
+    searchRef,
+    context,
+    formLabel,
+    formValue,
+    ...searchResults,
+    ...rest,
+  };
+}
+
+const Dropdown = forwardRef<DropdownInstance, DropdownProps>(
+  ({ 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 searchElement = search === false ? null : search || <DropdownSearch />;
+    return (
+      <>
+        {name && formValue && <input type="hidden" name={name} value={formValue} />}
+        <DropdownProvider context={dropdownCtx} styles={dropdownStyles}>
+          <DropdownButton
+            {...referenceProps}
+            aria-label={props['aria-label']}
+            placeholder={placeholder}
+            size={size}
+            formLabel={formLabel}
+            blurHandler={blurHandler}
+            readOnly={readOnly}
+          />
+          {isOpen && (
+            <FloatingFocusManager initialFocus={searchRef} context={floatingContext}>
+              <chakra.div {...floatingProps} sx={dropdownStyles.list}>
+                {searchElement}
+                <chakra.div tabIndex={-1} ref={optionsRef} __css={dropdownStyles.options}>
+                  {children}
+                </chakra.div>
+              </chakra.div>
+            </FloatingFocusManager>
+          )}
+        </DropdownProvider>
+      </>
+    );
+  },
+);
+
+export default Dropdown;

package/src/Components/Dropdown/DropdownButton.tsx

@@ -0,0 +1,27 @@
+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 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,83 @@
+import { forwardRef, 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';
+
+const DropdownOption = forwardRef<
+  HTMLDivElement,
+  { value?: string; children?: ReactNode; index?: number; 'aria-label'?: string }
+>(({ value = '', children, index, ...rest }, ref) => {
+  const { item } = useDropdownStyles();
+  const ctx = useDropdownContext();
+  return (
+    <chakra.div
+      role="option"
+      id={useId()}
+      ref={ref}
+      {...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: 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,
+  index,
+}: {
+  icon: ReactNode;
+  title: string;
+  subtitle: string;
+  value?: string;
+  index?: number;
+}) => {
+  return (
+    <DropdownOption value={value} index={index} 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,92 @@
+import { RefObject, useEffect, useRef, useState } from 'react';
+import {
+  autoUpdate,
+  useFloating,
+  useInteractions,
+  size,
+  useClick,
+  useListNavigation,
+  useRole,
+  useDismiss,
+} 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({
+        apply({ elements, availableHeight, rects }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`,
+          });
+          elements.floating.style.setProperty('--floating-available-height', `${availableHeight - 5}px`);
+        },
+      }),
+    ],
+  });
+  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,
+    }),
+  ]);
+  useAutoScroll({
+    listRef,
+    optionsRef,
+    activeIndex,
+    selectedIndex,
+    keyboardControlled,
+  });
+
+  return {
+    listRef,
+    onClose: () => setOpen(false),
+    isOpen,
+    getItemProps,
+    activeIndex,
+    setActiveIndex,
+    setSelectedIndex,
+    referenceProps: getReferenceProps({ ref: reference }),
+    floatingProps: getFloatingProps({
+      ref: floating,
+      style: { position: strategy, top: y ?? 0, left: x ?? 0 },
+      ...keyboardControlledHandlers,
+    }),
+    context,
+  };
+};
+
+export default useFloatingDropdown;