@basic-ui/core 0.0.52 → 0.0.53

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>
+    );
+  }
+);

package/src/Accordion/context.ts

@@ -1,37 +1,37 @@
-import type { KeyboardEvent, MouseEvent } from 'react';
-import { useContext, createContext } from 'react';
-
-import type { Scope } from '../hooks/useScope';
-
-// AccordionGroup Component
-export interface AccordionContextProps {
-  childrenHeaderHasFocus: boolean;
-  setChildrenHeaderHasFocus: (value: boolean) => void;
-  scope: Scope<HTMLElement>;
-  expandedIndex: number;
-  onChange?: (
-    e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
-    index: number
-  ) => void;
-}
-
-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);
+import type { KeyboardEvent, MouseEvent } from 'react';
+import { useContext, createContext } from 'react';
+
+import type { Scope } from '../hooks/useScope';
+
+// AccordionGroup Component
+export interface AccordionContextProps {
+  childrenHeaderHasFocus: boolean;
+  setChildrenHeaderHasFocus: (value: boolean) => void;
+  scope: Scope<HTMLElement>;
+  expandedIndex: number;
+  onChange?: (
+    e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
+    index: number
+  ) => void;
+}
+
+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/index.ts

@@ -1,4 +1,4 @@
-export * from './Accordion';
-export * from './AccordionItem';
-export * from './AccordionHeader';
-export * from './AccordionBody';
+export * from './Accordion';
+export * from './AccordionItem';
+export * from './AccordionHeader';
+export * from './AccordionBody';

package/src/Accordion/scopeQuery.ts

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

package/src/Accordion/styles.css

@@ -1,21 +1,21 @@
-[data-accordion-root] {
-  box-sizing: border-box;
-  max-width: 300px;
-  padding: 32px;
-  border: solid 1px #aaa;
-  margin: 32px;
-}
-[data-accordion-root][data-children-has-focus='true'] {
-  border-color: red;
-}
-
-[data-accordion-body]:not([hidden]) {
-  box-sizing: border-box;
-  padding: 16px 0;
-  display: flex;
-  flex-direction: column;
-}
-
-[data-accordion-header] {
-  cursor: pointer;
-}
+[data-accordion-root] {
+  box-sizing: border-box;
+  max-width: 300px;
+  padding: 32px;
+  border: solid 1px #aaa;
+  margin: 32px;
+}
+[data-accordion-root][data-children-has-focus='true'] {
+  border-color: red;
+}
+
+[data-accordion-body]:not([hidden]) {
+  box-sizing: border-box;
+  padding: 16px 0;
+  display: flex;
+  flex-direction: column;
+}
+
+[data-accordion-header] {
+  cursor: pointer;
+}

package/src/CheckBox/CheckBox.tsx

@@ -1,41 +1,41 @@
-import type { ElementType, InputHTMLAttributes, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import { useControlledState } from '../hooks';
-
-export interface CheckBoxProps extends InputHTMLAttributes<HTMLInputElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-}
-
-export const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
-  function CheckBox(props, forwardedRef) {
-    const {
-      as: Comp = 'input',
-      checked: checkedProp,
-      defaultChecked = false,
-      onChange: onChangeProp,
-      ...otherProps
-    } = props;
-    const [checked, onChange] = useControlledState(
-      checkedProp,
-      onChangeProp,
-      defaultChecked,
-      (setValue) => (e) => {
-        setValue(e.target.checked);
-      }
-    );
-
-    return (
-      <Comp
-        ref={forwardedRef}
-        type="checkbox"
-        checked={checked}
-        aria-checked={checked}
-        onChange={onChange}
-        {...otherProps}
-      />
-    );
-  }
-);
+import type { ElementType, InputHTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import { useControlledState } from '../hooks';
+
+export interface CheckBoxProps extends InputHTMLAttributes<HTMLInputElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+}
+
+export const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
+  function CheckBox(props, forwardedRef) {
+    const {
+      as: Comp = 'input',
+      checked: checkedProp,
+      defaultChecked = false,
+      onChange: onChangeProp,
+      ...otherProps
+    } = props;
+    const [checked, onChange] = useControlledState(
+      checkedProp,
+      onChangeProp,
+      defaultChecked,
+      (setValue) => (e) => {
+        setValue(e.target.checked);
+      }
+    );
+
+    return (
+      <Comp
+        ref={forwardedRef}
+        type="checkbox"
+        checked={checked}
+        aria-checked={checked}
+        onChange={onChange}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/CheckBox/index.ts

@@ -1 +1 @@
-export * from './CheckBox';
+export * from './CheckBox';