@basic-ui/core 0.0.59 → 0.0.61

package/src/Accordion/AccordionHeader.tsx

@@ -1,16 +1,10 @@
-import type {
-  HTMLAttributes,
-  ElementType,
-  ReactNode,
-  MouseEvent,
-  KeyboardEvent,
-  FocusEvent,
-} from 'react';
-import { forwardRef, useRef, useState, useEffect } from 'react';
+import type { HTMLAttributes, ElementType, ReactNode, KeyboardEvent, FocusEvent } from 'react';
+import { forwardRef } from 'react';
 
-import { wrapEvent, assignMultipleRefs, getCircularIndex } from '../utils';
-import { useAccordionContext, useAccordionItemContext } from './context';
-import { headerScopeQuery as scopeQuery } from './scopeQuery';
+import { wrapEvent, getCircularIndex } from '../utils';
+import { useAccordionContext } from './context';
+import { CollapsibleTrigger } from '../Collapsible';
+import { headerScopeQuery } from './scopeQuery';
 
 export interface AccordionHeaderProps extends HTMLAttributes<HTMLDivElement> {
   as?: ElementType<any>;
@@ -23,57 +17,15 @@ export const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
     const {
       as: Comp = 'div',
       onKeyDown,
-      onClick: onClickProp,
       onFocus,
       onBlur,
       ...otherProps
     } = props;
+    
     const accordionContext = useAccordionContext();
-    const accordionItemContext = useAccordionItemContext();
-    const ref = useRef<HTMLDivElement | null>(null);
-    const [index, setIndex] = useState<number | undefined>();
-
-    if (!accordionItemContext) {
-      throw new Error('Missing parent <Accordion /> component');
-    }
-
-    useEffect(() => {
-      if (accordionContext) {
-        const allHeaders =
-          accordionContext.scope.current.queryAllNodes(scopeQuery) || [];
-
-        const index = allHeaders.findIndex((e) => e === ref.current);
-        setIndex(index);
-      }
-    }, [accordionContext]);
-
-    const onClick = wrapEvent(onClickProp, (e: MouseEvent<HTMLDivElement>) => {
-      let index = 0;
-      if (accordionItemContext.expanded) {
-        index = -1;
-      } else if (accordionContext) {
-        const allHeaders =
-          accordionContext.scope.current.queryAllNodes(scopeQuery) || [];
-
-        index = allHeaders.findIndex((e) => e === ref.current);
-        if (index === accordionContext.expandedIndex) {
-          index = -1;
-        }
-        accordionContext.onChange && accordionContext.onChange(e, index);
-      }
-
-      accordionItemContext.onChange &&
-        accordionItemContext.onChange(e, index >= 0);
-    });
 
     const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
       switch (e.key) {
-        case 'Enter':
-        case ' ': {
-          onClick(e as unknown as MouseEvent<HTMLDivElement>);
-          e.preventDefault();
-          break;
-        }
         case 'ArrowUp':
         case 'ArrowDown':
         case 'Home':
@@ -81,85 +33,59 @@ export const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
           if (!accordionContext) {
             return;
           }
-          const allHeaders =
-            accordionContext.scope.current.queryAllNodes(scopeQuery);
-
-          e.preventDefault();
-
+          const allHeaders = accordionContext.scope.current.queryAllNodes(headerScopeQuery);
+          
           if (allHeaders.length === 0) {
             return;
           }
 
-          let nextIndex = allHeaders.findIndex((e) => e === ref.current);
+          e.preventDefault();
+          let nextIndex = allHeaders.findIndex(el => el === e.currentTarget);
+          
           switch (e.key) {
-            case 'ArrowUp':
-              nextIndex += -1;
-              break;
-            case 'ArrowDown':
-              nextIndex += +1;
-              break;
-            case 'Home':
-              nextIndex = 0;
-              break;
-            case 'End':
-              nextIndex = -1;
-              break;
+            case 'ArrowUp': nextIndex -= 1; break;
+            case 'ArrowDown': nextIndex += 1; break;
+            case 'Home': nextIndex = 0; break;
+            case 'End': nextIndex = -1; break;
           }
 
-          // We're sure it will not be null, because we already checked for allHeaders.length > 0 above
           nextIndex = getCircularIndex(nextIndex, allHeaders.length)!;
-          allHeaders[nextIndex] && allHeaders[nextIndex].focus();
+          allHeaders[nextIndex]?.focus();
           break;
         }
-        default:
-          return;
       }
     };
 
     const handleFocus = () => {
-      if (accordionContext) {
-        if (!accordionContext.childrenHeaderHasFocus) {
-          // this is needed to avoid rerendering the parent and
-          // messing up with the internal count for children/parent count
-          accordionContext.setChildrenHeaderHasFocus(true);
-        }
+      if (accordionContext && !accordionContext.childrenHeaderHasFocus) {
+        accordionContext.setChildrenHeaderHasFocus(true);
       }
     };
 
     const handleBlur = (e: FocusEvent<HTMLDivElement>) => {
       if (accordionContext) {
-        const allHeaders =
-          accordionContext.scope.current.queryAllNodes(scopeQuery);
-        const newFocusIsHeader =
-          allHeaders.findIndex((header) => header === e.relatedTarget) >= 0;
-
-        // only remove focus flag if the focus went to some element
-        // that is not an accordion header
+        const allHeaders = accordionContext.scope.current.queryAllNodes(headerScopeQuery);
+        const newFocusIsHeader = allHeaders.findIndex(header => header === e.relatedTarget) >= 0;
+        
         if (!newFocusIsHeader) {
           accordionContext.setChildrenHeaderHasFocus(false);
         }
       }
     };
 
-    const expanded = Boolean(
-      accordionItemContext.expanded ||
-        (accordionContext && accordionContext.expandedIndex === index)
-    );
+    const isNonButton = Comp !== 'button';
 
     return (
-      <Comp
-        ref={assignMultipleRefs(ref, forwardedRef)}
-        {...otherProps}
-        id={accordionItemContext.headerId}
-        aria-controls={accordionItemContext.bodyId}
-        role="button"
+      <CollapsibleTrigger
+        as={Comp}
+        ref={forwardedRef}
         data-accordion-header=""
-        tabIndex="0"
+        role={isNonButton ? 'button' : undefined}
+        tabIndex={isNonButton ? 0 : undefined}
         onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
         onFocus={wrapEvent(onFocus, handleFocus)}
         onBlur={wrapEvent(onBlur, handleBlur)}
-        onClick={onClick}
-        aria-expanded={String(expanded)}
+        {...otherProps}
       />
     );
   }

package/src/Accordion/AccordionItem.tsx

@@ -1,50 +1,61 @@
-import type {
-  HTMLAttributes,
-  ElementType,
-  ReactNode,
-  KeyboardEvent,
-  MouseEvent,
-} from 'react';
-import { Fragment, forwardRef, useId } from 'react';
+import type { HTMLAttributes, ElementType, ReactNode, KeyboardEvent, MouseEvent } from 'react';
+import { forwardRef, useRef, useState, useEffect } from 'react';
 
-import type { AccordionItemContextProps } from './context';
-import { AccordionItemProvider } from './context';
+import { useAccordionContext } from './context';
+import { Collapsible } from '../Collapsible';
+import { assignMultipleRefs } from '../utils';
+import { itemScopeQuery } from './scopeQuery';
 
-export interface AccordionItemProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   as?: ElementType<any>;
   innerAs?: ElementType<any>;
   children?: ReactNode;
   expanded?: boolean;
-  onChange?: (
-    e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
-    value: boolean
-  ) => void;
+  onChange?: (e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>, value: boolean) => void;
 }
 
 export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
   function AccordionItem(props, forwardedRef) {
     const {
-      as: Comp = Fragment,
-      expanded = false,
+      as: Comp = 'div',
+      innerAs,
+      expanded: expandedProp = false,
       onChange,
       ...otherProps
     } = props;
-    const id = useId();
+    
+    const accordionContext = useAccordionContext();
+    const ref = useRef<HTMLDivElement | null>(null);
+    const [index, setIndex] = useState<number | undefined>();
 
-    const headerId = id ? `accordion-header-${id}` : undefined;
-    const bodyId = id ? `accordion-body-${id}` : undefined;
-    const contextValue: AccordionItemContextProps = {
-      headerId,
-      bodyId,
-      expanded,
-      onChange,
+    useEffect(() => {
+      if (accordionContext && ref.current) {
+        const allItems = accordionContext.scope.current.queryAllNodes(itemScopeQuery) || [];
+        setIndex(allItems.findIndex(e => e === ref.current));
+      }
+    }, [accordionContext]);
+
+    const isExpanded = Boolean(
+      expandedProp || (accordionContext && index !== undefined && accordionContext.expandedIndex === index)
+    );
+
+    const handleOpenChange = (e: any, isOpen: boolean) => {
+      onChange?.(e, isOpen);
+      if (accordionContext && index !== undefined) {
+        accordionContext.onChange?.(e, isOpen ? index : -1);
+      }
     };
 
     return (
-      <AccordionItemProvider value={contextValue}>
-        <Comp ref={forwardedRef} {...otherProps} />
-      </AccordionItemProvider>
+      <Collapsible
+        as={Comp}
+        innerAs={innerAs}
+        open={isExpanded}
+        onChange={handleOpenChange}
+        ref={assignMultipleRefs(forwardedRef, ref)}
+        data-accordion-item=""
+        {...otherProps}
+      />
     );
   }
 );

package/src/Accordion/context.ts

@@ -3,7 +3,6 @@ import { useContext, createContext } from 'react';
 
 import type { Scope } from '../hooks/useScope';
 
-// AccordionGroup Component
 export interface AccordionContextProps {
   childrenHeaderHasFocus: boolean;
   setChildrenHeaderHasFocus: (value: boolean) => void;
@@ -18,20 +17,3 @@ export interface AccordionContextProps {
 const accordionContext = createContext<AccordionContextProps | null>(null);
 export const { Provider: AccordionProvider } = accordionContext;
 export const useAccordionContext = () => useContext(accordionContext);
-
-// Accordion Component
-export interface AccordionItemContextProps {
-  headerId: string | undefined;
-  bodyId: string | undefined;
-  expanded: boolean;
-  onChange?: (
-    e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
-    value: boolean
-  ) => void;
-}
-
-const accordionItemContext = createContext<AccordionItemContextProps | null>(
-  null
-);
-export const { Provider: AccordionItemProvider } = accordionItemContext;
-export const useAccordionItemContext = () => useContext(accordionItemContext);

package/src/Accordion/scopeQuery.ts

@@ -5,3 +5,7 @@ export function headerScopeQuery(type: string, props: Record<string, unknown>) {
 export function bodyScopeQuery(type: string, props: Record<string, unknown>) {
   return props['data-accordion-body'] === '';
 }
+
+export function itemScopeQuery(type: string, props: Record<string, unknown>) {
+  return props['data-accordion-item'] === '';
+}

package/src/Collapsible/Collapsible.story.tsx

@@ -0,0 +1,153 @@
+import { useState } from 'react';
+
+import { Collapsible, CollapsibleTrigger, CollapsiblePanel } from './';
+
+export default {
+  title: 'components/Collapsible',
+};
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div
+      style={{
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'flex-start',
+        padding: '24px',
+        width: '100%',
+      }}
+    >
+      <div style={{ width: 300 }}>{children}</div>
+    </div>
+  );
+};
+
+export const Default = () => (
+  <Wrapper>
+    <Collapsible>
+      <CollapsibleTrigger
+        style={{
+          width: '100%',
+          padding: '8px 16px',
+          textAlign: 'left',
+          background: '#f0f0f0',
+          border: '1px solid #ccc',
+          cursor: 'pointer',
+        }}
+      >
+        Toggle Panel
+      </CollapsibleTrigger>
+      <CollapsiblePanel
+        style={{
+          padding: '16px',
+          border: '1px solid #ccc',
+          borderTop: 'none',
+        }}
+      >
+        This is the collapsible panel content. You can put anything here.
+      </CollapsiblePanel>
+    </Collapsible>
+  </Wrapper>
+);
+
+export const Controlled = () => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <Wrapper>
+      <div style={{ marginBottom: 16 }}>
+        <button onClick={() => setOpen(!open)}>Toggle from outside</button>
+      </div>
+      <Collapsible open={open} onChange={(e, isOpen) => setOpen(isOpen)}>
+        <CollapsibleTrigger
+          style={{
+            width: '100%',
+            padding: '8px 16px',
+            textAlign: 'left',
+            background: '#e0e0f0',
+            border: '1px solid #ccc',
+            cursor: 'pointer',
+          }}
+        >
+          Controlled Trigger
+        </CollapsibleTrigger>
+        <CollapsiblePanel
+          style={{
+            padding: '16px',
+            border: '1px solid #ccc',
+            borderTop: 'none',
+          }}
+        >
+          This panel is controlled from outside.
+        </CollapsiblePanel>
+      </Collapsible>
+    </Wrapper>
+  );
+};
+
+export const Animated = () => {
+  return (
+    <Wrapper>
+      <style>{`
+        .AnimatedPanel {
+          overflow: hidden;
+        }
+        .AnimatedPanel[data-state='open'] {
+          animation: slideDown 300ms ease-out forwards;
+        }
+        .AnimatedPanel[data-state='closed'] {
+          animation: slideUp 300ms ease-out forwards;
+        }
+        @keyframes slideDown {
+          from {
+            height: 0;
+            opacity: 0;
+          }
+          to {
+            height: var(--collapsible-panel-height);
+            opacity: 1;
+          }
+        }
+        @keyframes slideUp {
+          from {
+            height: var(--collapsible-panel-height);
+            opacity: 1;
+          }
+          to {
+            height: 0;
+            opacity: 0;
+          }
+        }
+      `}</style>
+      <Collapsible>
+        <CollapsibleTrigger
+          style={{
+            width: '100%',
+            padding: '8px 16px',
+            textAlign: 'left',
+            background: '#e8f0fe',
+            border: '1px solid #c0d0f0',
+            cursor: 'pointer',
+            fontWeight: 'bold',
+          }}
+        >
+          Animated Panel (Click me)
+        </CollapsibleTrigger>
+        <CollapsiblePanel
+          className="AnimatedPanel"
+          style={{
+            background: '#fafafa',
+            border: '1px solid #c0d0f0',
+            borderTop: 'none',
+          }}
+        >
+          <div style={{ padding: '16px' }}>
+            <p style={{ margin: 0 }}>This panel&apos;s height is animated.</p>
+            <p>It uses the <code>--collapsible-panel-height</code> variable exposed by the component.</p>
+            <p>Look at how smoothly it opens and closes!</p>
+          </div>
+        </CollapsiblePanel>
+      </Collapsible>
+    </Wrapper>
+  );
+};

package/src/Collapsible/Collapsible.tsx

@@ -0,0 +1,79 @@
+import type { ElementType, ReactNode, SyntheticEvent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, HTMLAttributes } from 'react';
+import { forwardRef, Fragment, useState, useCallback } from 'react';
+import { CollapsibleProvider } from './context';
+import { useControlledState, useTransitionStatus } from '../hooks';
+
+export type CollapsibleTriggerEvent =
+  | ReactKeyboardEvent<any>
+  | ReactMouseEvent<any>
+  | Event
+  | SyntheticEvent<any>;
+
+export interface CollapsibleProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onChange?: (e: CollapsibleTriggerEvent, isOpen: boolean) => void;
+  disabled?: boolean;
+}
+
+export const Collapsible = forwardRef<HTMLElement, CollapsibleProps>(
+  function Collapsible(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      innerAs,
+      open: openProp,
+      defaultOpen = false,
+      onChange: onChangeProp,
+      disabled = false,
+      ...otherProps
+    } = props;
+
+    const [openState, setOpenState] = useControlledState(
+      openProp,
+      onChangeProp,
+      defaultOpen,
+      (setState) => (e, isOpen) => {
+        setState(isOpen);
+      }
+    );
+
+    const [panelId, setPanelId] = useState<string | undefined>();
+
+    const { mounted, setMounted, transitionStatus } = useTransitionStatus(openState, true, true);
+
+    const onChange = useCallback(
+      (e: CollapsibleTriggerEvent, isOpen: boolean) => {
+        if (!disabled) {
+          setOpenState(e, isOpen);
+        }
+      },
+      [setOpenState, disabled]
+    );
+
+    const contextValue = {
+      open: openState,
+      mounted,
+      transitionStatus,
+      setMounted,
+      panelId,
+      disabled,
+      onChange,
+      setPanelId,
+    };
+
+    return (
+      <CollapsibleProvider value={contextValue}>
+        <Comp
+          {...(Comp !== Fragment ? { as: innerAs, ref: forwardedRef } : {})}
+          data-open={openState ? '' : undefined}
+          data-disabled={disabled ? '' : undefined}
+          data-state={openState ? 'open' : 'closed'}
+          {...otherProps}
+        />
+      </CollapsibleProvider>
+    );
+  }
+);

package/src/Collapsible/CollapsiblePanel.tsx

@@ -0,0 +1,103 @@
+import type { ElementType, ReactNode, HTMLAttributes } from 'react';
+import { forwardRef, Fragment, useEffect, useLayoutEffect, useId, useRef, useState } from 'react';
+import { useCollapsibleContext } from './context';
+import { assignMultipleRefs } from '../utils';
+
+export interface CollapsiblePanelProps extends HTMLAttributes<HTMLElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  id?: string;
+  keepMounted?: boolean;
+}
+
+export const CollapsiblePanel = forwardRef<HTMLElement, CollapsiblePanelProps>(
+  function CollapsiblePanel(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      innerAs,
+      id: idProp,
+      keepMounted = false,
+      style,
+      ...otherProps
+    } = props;
+
+    const { open, mounted, transitionStatus, setMounted, setPanelId, disabled } = useCollapsibleContext();
+    const generatedId = useId();
+    const panelId = idProp ?? generatedId;
+    
+    const panelRef = useRef<HTMLElement>(null);
+    const mergedRef = assignMultipleRefs(panelRef, forwardedRef);
+
+    const [height, setHeight] = useState<number | undefined>();
+    const [width, setWidth] = useState<number | undefined>();
+
+    useEffect(() => {
+      setPanelId(panelId);
+      return () => {
+        setPanelId(undefined);
+      };
+    }, [panelId, setPanelId]);
+
+    useLayoutEffect(() => {
+      const node = panelRef.current;
+      if (!node) return;
+
+      if (open || transitionStatus === 'starting' || transitionStatus === 'ending') {
+        setHeight(node.scrollHeight);
+        setWidth(node.scrollWidth);
+      }
+    }, [open, transitionStatus]);
+
+    useEffect(() => {
+      if (open || !mounted || transitionStatus !== 'ending') return;
+
+      const node = panelRef.current;
+      if (!node) return;
+
+      const handleComplete = (e?: Event) => {
+        if (e && e.target !== node) return; // Ignore bubbled events
+        setMounted(false);
+      };
+
+      node.addEventListener('animationend', handleComplete);
+      node.addEventListener('transitionend', handleComplete);
+
+      const styles = window.getComputedStyle(node);
+      const hasAnimation = styles.animationDuration !== '0s' && styles.animationName !== 'none';
+      const hasTransition = styles.transitionDuration !== '0s' && styles.transitionDuration !== '';
+
+      if (!hasAnimation && !hasTransition) {
+        setMounted(false);
+      }
+
+      return () => {
+        node.removeEventListener('animationend', handleComplete);
+        node.removeEventListener('transitionend', handleComplete);
+      };
+    }, [open, mounted, transitionStatus, setMounted]);
+
+    if (!mounted && !keepMounted) {
+      return null;
+    }
+
+    const hidden = !open && !mounted;
+
+    return (
+      <Comp
+        {...(Comp !== Fragment ? { as: innerAs, ref: mergedRef } : {})}
+        id={panelId}
+        hidden={hidden ? true : undefined}
+        data-open={open ? '' : undefined}
+        data-disabled={disabled ? '' : undefined}
+        data-state={open ? 'open' : 'closed'}
+        style={{
+          ...style,
+          '--collapsible-panel-height': height !== undefined ? `${height}px` : undefined,
+          '--collapsible-panel-width': width !== undefined ? `${width}px` : undefined,
+        } as React.CSSProperties}
+        {...otherProps}
+      />
+    );
+  }
+);