@basic-ui/core 0.0.60 → 0.0.62

package/src/Tree/types.ts

@@ -0,0 +1,161 @@
+import type {
+  ElementType,
+  HTMLAttributes,
+  KeyboardEvent,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+} from 'react';
+
+export type TreeKey = string | number;
+export type TreeSelectionMode = 'none' | 'single' | 'multiple';
+export type TreeSelectionBehavior = 'toggle' | 'replace';
+export type TreeDisabledBehavior = 'all' | 'selection';
+export type TreeSelection = Iterable<TreeKey> | 'all';
+export type TreeExpandedKeys = Iterable<TreeKey> | 'all';
+
+export interface TreeProps
+  extends Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'autoFocus' | 'onChange' | 'onSelect'
+  > {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  selectionMode?: TreeSelectionMode;
+  selectionBehavior?: TreeSelectionBehavior;
+  selectedKeys?: TreeSelection;
+  defaultSelectedKeys?: TreeSelection;
+  onSelectionChange?: (keys: Set<TreeKey>) => void;
+  disallowEmptySelection?: boolean;
+  disabledKeys?: Iterable<TreeKey>;
+  disabledBehavior?: TreeDisabledBehavior;
+  expandedKeys?: TreeExpandedKeys;
+  defaultExpandedKeys?: TreeExpandedKeys;
+  onExpandedChange?: (keys: Set<TreeKey>) => void;
+  autoFocus?: boolean | 'first' | 'last';
+  onAction?: (key: TreeKey) => void;
+  keyboardNavigationBehavior?: 'arrow' | 'tab';
+  escapeKeyBehavior?: 'clearSelection' | 'none';
+  shouldFocusWrap?: boolean;
+  disallowTypeAhead?: boolean;
+  disallowSelectAll?: boolean;
+  direction?: 'ltr' | 'rtl';
+  renderEmptyState?: () => ReactNode;
+  renderLoadingState?: (item: ParsedTreeItem) => ReactNode;
+  renderedRowIndices?: Iterable<number>;
+  onVisibleRowsChange?: (rows: TreeVisibleRow[]) => void;
+  onFocusedKeyChange?: (key: TreeKey | null, rowIndex: number | null) => void;
+  renderRow?: (
+    row: TreeVisibleRow,
+    defaultRow: ReactElement,
+    state: TreeRenderState
+  ) => ReactNode;
+}
+
+export interface TreeItemProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'title' | 'onSelect'> {
+  id?: TreeKey;
+  title?: ReactNode;
+  textValue?: string;
+  isDisabled?: boolean;
+  disabled?: boolean;
+  hasChildItems?: boolean;
+  isLoading?: boolean;
+  onAction?: () => void;
+  children?: ReactNode;
+}
+
+export interface TreeItemContentProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+}
+
+export interface TreeSectionProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+}
+
+export interface TreeHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+}
+
+export interface ParsedTreeItem {
+  type: 'item';
+  key: TreeKey;
+  keyString: string;
+  level: number;
+  index: number;
+  posInSet: number;
+  setSize: number;
+  parentKey: TreeKey | null;
+  content: ReactNode;
+  textValue: string;
+  disabled: boolean;
+  hasChildItems: boolean;
+  childItems: ParsedTreeItem[];
+  props: TreeItemProps;
+}
+
+export interface ParsedTreeSection {
+  type: 'section';
+  key: string;
+  header: ReactNode;
+  headerProps: TreeHeaderProps;
+  sectionProps: TreeSectionProps;
+  items: ParsedTreeItem[];
+}
+
+export type ParsedTreeNode = ParsedTreeItem | ParsedTreeSection;
+
+export interface TreeVisibleItemRow {
+  type: 'item';
+  key: TreeKey;
+  item: ParsedTreeItem;
+}
+
+export interface TreeVisibleSectionRow {
+  type: 'section';
+  key: string;
+  section: ParsedTreeSection;
+}
+
+export interface TreeVisibleLoadingRow {
+  type: 'loading';
+  key: string;
+  item: ParsedTreeItem;
+  level: number;
+}
+
+export type TreeVisibleRow =
+  | TreeVisibleItemRow
+  | TreeVisibleSectionRow
+  | TreeVisibleLoadingRow;
+
+export interface TreeRenderState {
+  allItems: ParsedTreeItem[];
+  visibleItems: ParsedTreeItem[];
+  visibleRows: TreeVisibleRow[];
+  focusedKey: TreeKey | null;
+  expandedKeys: Set<TreeKey>;
+  selectedKeys: Set<TreeKey>;
+  selectionMode: TreeSelectionMode;
+  selectionBehavior: TreeSelectionBehavior;
+}
+
+export interface TreeItemRenderContextValue {
+  item: ParsedTreeItem;
+  rowId: string;
+  isExpanded: boolean;
+  isSelected: boolean;
+  isDisabled: boolean;
+  canSelect: boolean;
+  selectionMode: TreeSelectionMode;
+  selectionBehavior: TreeSelectionBehavior;
+  toggleExpanded: (event: MouseEvent<any> | KeyboardEvent<any>) => void;
+  toggleSelection: (event: MouseEvent<any> | KeyboardEvent<any>) => void;
+}

package/src/hooks/index.ts

@@ -11,3 +11,4 @@ export * from './useThrottle';
 export * from './useMeasure';
 export * from './useGestureHandlers';
 export * from './useScope';
+export * from './useTransitionStatus';

package/src/hooks/useTransitionStatus.ts

@@ -0,0 +1,65 @@
+import { useState, useLayoutEffect } from 'react';
+
+export type TransitionStatus = 'starting' | 'ending' | 'idle' | undefined;
+
+export function useTransitionStatus(
+  open: boolean,
+  enableIdleState: boolean = false,
+  deferEndingState: boolean = false
+) {
+  const [transitionStatus, setTransitionStatus] = useState<TransitionStatus>(
+    open && enableIdleState ? 'idle' : undefined
+  );
+  const [mounted, setMounted] = useState(open);
+
+  if (open && !mounted) {
+    setMounted(true);
+    setTransitionStatus('starting');
+  }
+
+  if (!open && mounted && transitionStatus !== 'ending' && !deferEndingState) {
+    setTransitionStatus('ending');
+  }
+
+  if (!open && !mounted && transitionStatus === 'ending') {
+    setTransitionStatus(undefined);
+  }
+
+  useLayoutEffect(() => {
+    if (!open && mounted && transitionStatus !== 'ending' && deferEndingState) {
+      const frame = requestAnimationFrame(() => {
+        setTransitionStatus('ending');
+      });
+      return () => cancelAnimationFrame(frame);
+    }
+  }, [open, mounted, transitionStatus, deferEndingState]);
+
+  useLayoutEffect(() => {
+    if (!open || enableIdleState) return;
+
+    const frame = requestAnimationFrame(() => {
+      setTransitionStatus(undefined);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [enableIdleState, open]);
+
+  useLayoutEffect(() => {
+    if (!open || !enableIdleState) return;
+
+    if (open && mounted && transitionStatus !== 'idle') {
+      setTransitionStatus('starting');
+    }
+
+    const frame = requestAnimationFrame(() => {
+      setTransitionStatus('idle');
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [enableIdleState, open, mounted, transitionStatus]);
+
+  return {
+    mounted,
+    setMounted,
+    transitionStatus,
+  };
+}

package/src/index.ts

@@ -1,9 +1,11 @@
 // Components
 export * from './Accordion';
+export * from './Collapsible';
 export * from './CheckBox';
 export * from './ComboBox';
 export * from './FocusLock';
 export * from './Menu';
+export * from './MenuBar';
 export * from './Modal';
 export * from './Popper';
 export * from './Portal';
@@ -11,7 +13,10 @@ export * from './RadioButton';
 export * from './Slider';
 export * from './Spinner';
 export * from './Tabs';
+export * from './Toggle';
+export * from './ToggleGroup';
 export * from './Tooltip';
+export * from './Tree';
 
 // General React utilities
 export * from './utils';

package/src/utils/assign-ref.ts

@@ -1,7 +1,7 @@
-import type { MutableRefObject, RefCallback } from 'react';
+import type { RefObject, RefCallback } from 'react';
 
 export function assignRef<T>(
-  ref: MutableRefObject<T> | RefCallback<T> | null | undefined,
+  ref: RefObject<T> | RefCallback<T> | null | undefined,
   value: T
 ) {
   if (ref == null) return;
@@ -10,14 +10,14 @@ export function assignRef<T>(
   } else {
     try {
       ref.current = value;
-    } catch (error) {
+    } catch {
       throw new Error(`Cannot assign value "${value}" to ref "${ref}"`);
     }
   }
 }
 
 export function assignMultipleRefs<T>(
-  ...refs: (MutableRefObject<T> | RefCallback<T> | null | undefined)[]
+  ...refs: (RefObject<T> | RefCallback<T> | null | undefined)[]
 ): RefCallback<T> {
   return (node: T | null) => {
     refs.forEach((ref) => {