@basic-ui/core 0.0.53 → 0.0.54

package/src/Accordion/Accordion.tsx

@@ -1,59 +1,59 @@
-import type {
-  ElementType,
-  HTMLAttributes,
-  KeyboardEvent,
-  MouseEvent,
-  ReactNode,
-} from 'react';
-import { forwardRef, useRef, useState } from 'react';
-
-import type { AccordionContextProps } from './context';
-import { AccordionProvider } from './context';
-import { useScope } from '../hooks';
-import { assignMultipleRefs } from '../utils';
-
-export interface AccordionProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-  expandedIndex?: number;
-  onChange?: (
-    e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
-    index: number
-  ) => void;
-}
-
-export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
-  function Accordion(props, forwardedRef) {
-    const {
-      as: Comp = 'div',
-      expandedIndex = -1,
-      onChange,
-      ...otherProps
-    } = props;
-    const [childrenHeaderHasFocus, setChildrenHeaderHasFocus] = useState(false);
-    const ref = useRef<HTMLDivElement>();
-
-    const scope = useScope(ref);
-
-    const contextValue: AccordionContextProps = {
-      childrenHeaderHasFocus,
-      setChildrenHeaderHasFocus,
-      scope,
-      expandedIndex,
-      onChange,
-    };
-
-    return (
-      <AccordionProvider value={contextValue}>
-        <Comp
-          ref={assignMultipleRefs(forwardedRef, ref)}
-          {...otherProps}
-          data-accordion-root=""
-          data-children-has-focus={childrenHeaderHasFocus}
-        />
-      </AccordionProvider>
-    );
-  }
-);
+import type {
+  ElementType,
+  HTMLAttributes,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+} from 'react';
+import { forwardRef, useRef, useState } from 'react';
+
+import type { AccordionContextProps } from './context';
+import { AccordionProvider } from './context';
+import { useScope } from '../hooks';
+import { assignMultipleRefs } from '../utils';
+
+export interface AccordionProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  expandedIndex?: number;
+  onChange?: (
+    e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
+    index: number
+  ) => void;
+}
+
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+  function Accordion(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      expandedIndex = -1,
+      onChange,
+      ...otherProps
+    } = props;
+    const [childrenHeaderHasFocus, setChildrenHeaderHasFocus] = useState(false);
+    const ref = useRef<HTMLDivElement>();
+
+    const scope = useScope(ref);
+
+    const contextValue: AccordionContextProps = {
+      childrenHeaderHasFocus,
+      setChildrenHeaderHasFocus,
+      scope,
+      expandedIndex,
+      onChange,
+    };
+
+    return (
+      <AccordionProvider value={contextValue}>
+        <Comp
+          ref={assignMultipleRefs(forwardedRef, ref)}
+          {...otherProps}
+          data-accordion-root=""
+          data-children-has-focus={childrenHeaderHasFocus}
+        />
+      </AccordionProvider>
+    );
+  }
+);

package/src/Accordion/AccordionBody.tsx

@@ -1,52 +1,52 @@
-import type { HTMLAttributes, ElementType } from 'react';
-import { forwardRef, useState, useEffect, useRef } from 'react';
-
-import { useAccordionItemContext, useAccordionContext } from './context';
-import { bodyScopeQuery as scopeQuery } from './scopeQuery';
-import { assignMultipleRefs } from '../utils';
-
-export interface AccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-}
-
-export const AccordionBody = forwardRef<HTMLDivElement, AccordionBodyProps>(
-  function AccordionBody(props, forwardedRef) {
-    const { as: Comp = 'div', ...otherProps } = props;
-    const accordionItemContext = useAccordionItemContext();
-    const accordionContext = useAccordionContext();
-    const ref = useRef<HTMLDivElement>();
-    const [index, setIndex] = useState<number>();
-
-    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 expanded = Boolean(
-      accordionItemContext.expanded ||
-        (accordionContext && accordionContext.expandedIndex === index)
-    );
-
-    return (
-      <Comp
-        ref={assignMultipleRefs(forwardedRef, ref)}
-        {...otherProps}
-        aria-labelledby={accordionItemContext.headerId}
-        id={accordionItemContext.bodyId}
-        role="region"
-        data-accordion-body=""
-        hidden={expanded ? undefined : 'hidden'}
-      />
-    );
-  }
-);
+import type { HTMLAttributes, ElementType } from 'react';
+import { forwardRef, useState, useEffect, useRef } from 'react';
+
+import { useAccordionItemContext, useAccordionContext } from './context';
+import { bodyScopeQuery as scopeQuery } from './scopeQuery';
+import { assignMultipleRefs } from '../utils';
+
+export interface AccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+}
+
+export const AccordionBody = forwardRef<HTMLDivElement, AccordionBodyProps>(
+  function AccordionBody(props, forwardedRef) {
+    const { as: Comp = 'div', ...otherProps } = props;
+    const accordionItemContext = useAccordionItemContext();
+    const accordionContext = useAccordionContext();
+    const ref = useRef<HTMLDivElement>();
+    const [index, setIndex] = useState<number>();
+
+    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 expanded = Boolean(
+      accordionItemContext.expanded ||
+        (accordionContext && accordionContext.expandedIndex === index)
+    );
+
+    return (
+      <Comp
+        ref={assignMultipleRefs(forwardedRef, ref)}
+        {...otherProps}
+        aria-labelledby={accordionItemContext.headerId}
+        id={accordionItemContext.bodyId}
+        role="region"
+        data-accordion-body=""
+        hidden={expanded ? undefined : 'hidden'}
+      />
+    );
+  }
+);

package/src/Accordion/AccordionHeader.tsx

@@ -1,167 +1,167 @@
-import type {
-  HTMLAttributes,
-  ElementType,
-  ReactNode,
-  MouseEvent,
-  KeyboardEvent,
-  FocusEvent,
-} from 'react';
-import { forwardRef, useRef, useState, useEffect } from 'react';
-
-import { wrapEvent, assignMultipleRefs, getCircularIndex } from '../utils';
-import { useAccordionContext, useAccordionItemContext } from './context';
-import { headerScopeQuery as scopeQuery } from './scopeQuery';
-
-export interface AccordionHeaderProps extends HTMLAttributes<HTMLDivElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-}
-
-export const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
-  function AccordionHeader(props, forwardedRef) {
-    const {
-      as: Comp = 'div',
-      onKeyDown,
-      onClick: onClickProp,
-      onFocus,
-      onBlur,
-      ...otherProps
-    } = props;
-    const accordionContext = useAccordionContext();
-    const accordionItemContext = useAccordionItemContext();
-    const ref = useRef<HTMLDivElement>();
-    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':
-        case 'End': {
-          if (!accordionContext) {
-            return;
-          }
-          const allHeaders =
-            accordionContext.scope.current.queryAllNodes(scopeQuery);
-
-          e.preventDefault();
-
-          if (allHeaders.length === 0) {
-            return;
-          }
-
-          let nextIndex = allHeaders.findIndex((e) => e === ref.current);
-          switch (e.key) {
-            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
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          nextIndex = getCircularIndex(nextIndex, allHeaders.length)!;
-          allHeaders[nextIndex] && 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);
-        }
-      }
-    };
-
-    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
-        if (!newFocusIsHeader) {
-          accordionContext.setChildrenHeaderHasFocus(false);
-        }
-      }
-    };
-
-    const expanded = Boolean(
-      accordionItemContext.expanded ||
-        (accordionContext && accordionContext.expandedIndex === index)
-    );
-
-    return (
-      <Comp
-        ref={assignMultipleRefs(ref, forwardedRef)}
-        {...otherProps}
-        id={accordionItemContext.headerId}
-        aria-controls={accordionItemContext.bodyId}
-        role="button"
-        data-accordion-header=""
-        tabIndex="0"
-        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
-        onFocus={wrapEvent(onFocus, handleFocus)}
-        onBlur={wrapEvent(onBlur, handleBlur)}
-        onClick={onClick}
-        aria-expanded={String(expanded)}
-      />
-    );
-  }
-);
+import type {
+  HTMLAttributes,
+  ElementType,
+  ReactNode,
+  MouseEvent,
+  KeyboardEvent,
+  FocusEvent,
+} from 'react';
+import { forwardRef, useRef, useState, useEffect } from 'react';
+
+import { wrapEvent, assignMultipleRefs, getCircularIndex } from '../utils';
+import { useAccordionContext, useAccordionItemContext } from './context';
+import { headerScopeQuery as scopeQuery } from './scopeQuery';
+
+export interface AccordionHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+}
+
+export const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
+  function AccordionHeader(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      onKeyDown,
+      onClick: onClickProp,
+      onFocus,
+      onBlur,
+      ...otherProps
+    } = props;
+    const accordionContext = useAccordionContext();
+    const accordionItemContext = useAccordionItemContext();
+    const ref = useRef<HTMLDivElement>();
+    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':
+        case 'End': {
+          if (!accordionContext) {
+            return;
+          }
+          const allHeaders =
+            accordionContext.scope.current.queryAllNodes(scopeQuery);
+
+          e.preventDefault();
+
+          if (allHeaders.length === 0) {
+            return;
+          }
+
+          let nextIndex = allHeaders.findIndex((e) => e === ref.current);
+          switch (e.key) {
+            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
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          nextIndex = getCircularIndex(nextIndex, allHeaders.length)!;
+          allHeaders[nextIndex] && 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);
+        }
+      }
+    };
+
+    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
+        if (!newFocusIsHeader) {
+          accordionContext.setChildrenHeaderHasFocus(false);
+        }
+      }
+    };
+
+    const expanded = Boolean(
+      accordionItemContext.expanded ||
+        (accordionContext && accordionContext.expandedIndex === index)
+    );
+
+    return (
+      <Comp
+        ref={assignMultipleRefs(ref, forwardedRef)}
+        {...otherProps}
+        id={accordionItemContext.headerId}
+        aria-controls={accordionItemContext.bodyId}
+        role="button"
+        data-accordion-header=""
+        tabIndex="0"
+        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+        onFocus={wrapEvent(onFocus, handleFocus)}
+        onBlur={wrapEvent(onBlur, handleBlur)}
+        onClick={onClick}
+        aria-expanded={String(expanded)}
+      />
+    );
+  }
+);

package/src/Accordion/AccordionItem.tsx

@@ -1,50 +1,50 @@
-import type {
-  HTMLAttributes,
-  ElementType,
-  ReactNode,
-  KeyboardEvent,
-  MouseEvent,
-} from 'react';
-import { Fragment, forwardRef, useId } from 'react';
-
-import type { AccordionItemContextProps } from './context';
-import { AccordionItemProvider } from './context';
-
-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;
-}
-
-export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
-  function AccordionItem(props, forwardedRef) {
-    const {
-      as: Comp = Fragment,
-      expanded = false,
-      onChange,
-      ...otherProps
-    } = props;
-    const id = useId();
-
-    const headerId = id ? `accordion-header-${id}` : undefined;
-    const bodyId = id ? `accordion-body-${id}` : undefined;
-    const contextValue: AccordionItemContextProps = {
-      headerId,
-      bodyId,
-      expanded,
-      onChange,
-    };
-
-    return (
-      <AccordionItemProvider value={contextValue}>
-        <Comp ref={forwardedRef} {...otherProps} />
-      </AccordionItemProvider>
-    );
-  }
-);
+import type {
+  HTMLAttributes,
+  ElementType,
+  ReactNode,
+  KeyboardEvent,
+  MouseEvent,
+} from 'react';
+import { Fragment, forwardRef, useId } from 'react';
+
+import type { AccordionItemContextProps } from './context';
+import { AccordionItemProvider } from './context';
+
+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;
+}
+
+export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
+  function AccordionItem(props, forwardedRef) {
+    const {
+      as: Comp = Fragment,
+      expanded = false,
+      onChange,
+      ...otherProps
+    } = props;
+    const id = useId();
+
+    const headerId = id ? `accordion-header-${id}` : undefined;
+    const bodyId = id ? `accordion-body-${id}` : undefined;
+    const contextValue: AccordionItemContextProps = {
+      headerId,
+      bodyId,
+      expanded,
+      onChange,
+    };
+
+    return (
+      <AccordionItemProvider value={contextValue}>
+        <Comp ref={forwardedRef} {...otherProps} />
+      </AccordionItemProvider>
+    );
+  }
+);