@basic-ui/core 0.0.52 → 0.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/core",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -35,5 +35,5 @@
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "fc731d3f336d3dce8bcf3b6589d724883bc66c7a"
+  "gitHead": "7feff13ea6d8ec28acbb8d3007121111d8d92063"
 }

package/src/Accordion/Accordion.story.tsx

@@ -1,74 +1,74 @@
-import { useState } from 'react';
-
-import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from './';
-import './styles.css';
-
-export default {
-  title: 'components/Accordion',
-};
-
-function AccordionControlled() {
-  const [expandedId, setExpandedId] = useState(0);
-
-  return (
-    <Accordion
-      expandedIndex={expandedId}
-      onChange={(e, idx) => setExpandedId(idx)}
-    >
-      <AccordionItem>
-        <AccordionHeader>Personal information</AccordionHeader>
-        <AccordionBody>
-          <input type="text" placeholder="name" />
-          <input type="text" placeholder="email" />
-          <input type="text" placeholder="phone" />
-          <input type="text" placeholder="extension" />
-          <input type="text" placeholder="country" />
-        </AccordionBody>
-      </AccordionItem>
-      <AccordionItem>
-        <AccordionHeader>Billing address</AccordionHeader>
-        <AccordionBody>
-          <input type="text" placeholder="address" />
-          <input type="text" placeholder="address 2" />
-          <input type="text" placeholder="city" />
-          <input type="text" placeholder="state" />
-          <input type="text" placeholder="zip code" />
-        </AccordionBody>
-      </AccordionItem>
-      <AccordionItem>
-        <AccordionHeader>Shipping address</AccordionHeader>
-        <AccordionBody>
-          <input type="text" placeholder="address" />
-          <input type="text" placeholder="address 2" />
-          <input type="text" placeholder="city" />
-          <input type="text" placeholder="state" />
-          <input type="text" placeholder="zip code" />
-        </AccordionBody>
-      </AccordionItem>
-    </Accordion>
-  );
-}
-
-function SingleAccordionItem() {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <AccordionItem
-      expanded={expanded}
-      onChange={(e, value) => setExpanded(value)}
-    >
-      <AccordionHeader>Personal information</AccordionHeader>
-      <AccordionBody>
-        <input type="text" placeholder="name" />
-        <input type="text" placeholder="email" />
-        <input type="text" placeholder="phone" />
-        <input type="text" placeholder="extension" />
-        <input type="text" placeholder="country" />
-      </AccordionBody>
-    </AccordionItem>
-  );
-}
-
-export const Controlled = () => <AccordionControlled />;
-
-export const SingleAccordionControlled = () => <SingleAccordionItem />;
+import { useState } from 'react';
+
+import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from './';
+import './styles.css';
+
+export default {
+  title: 'components/Accordion',
+};
+
+function AccordionControlled() {
+  const [expandedId, setExpandedId] = useState(0);
+
+  return (
+    <Accordion
+      expandedIndex={expandedId}
+      onChange={(e, idx) => setExpandedId(idx)}
+    >
+      <AccordionItem>
+        <AccordionHeader>Personal information</AccordionHeader>
+        <AccordionBody>
+          <input type="text" placeholder="name" />
+          <input type="text" placeholder="email" />
+          <input type="text" placeholder="phone" />
+          <input type="text" placeholder="extension" />
+          <input type="text" placeholder="country" />
+        </AccordionBody>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionHeader>Billing address</AccordionHeader>
+        <AccordionBody>
+          <input type="text" placeholder="address" />
+          <input type="text" placeholder="address 2" />
+          <input type="text" placeholder="city" />
+          <input type="text" placeholder="state" />
+          <input type="text" placeholder="zip code" />
+        </AccordionBody>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionHeader>Shipping address</AccordionHeader>
+        <AccordionBody>
+          <input type="text" placeholder="address" />
+          <input type="text" placeholder="address 2" />
+          <input type="text" placeholder="city" />
+          <input type="text" placeholder="state" />
+          <input type="text" placeholder="zip code" />
+        </AccordionBody>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
+function SingleAccordionItem() {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <AccordionItem
+      expanded={expanded}
+      onChange={(e, value) => setExpanded(value)}
+    >
+      <AccordionHeader>Personal information</AccordionHeader>
+      <AccordionBody>
+        <input type="text" placeholder="name" />
+        <input type="text" placeholder="email" />
+        <input type="text" placeholder="phone" />
+        <input type="text" placeholder="extension" />
+        <input type="text" placeholder="country" />
+      </AccordionBody>
+    </AccordionItem>
+  );
+}
+
+export const Controlled = () => <AccordionControlled />;
+
+export const SingleAccordionControlled = () => <SingleAccordionItem />;

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