@basic-ui/core 0.0.53 → 0.0.54

package/src/Tabs/TabPanel.tsx

@@ -1,53 +1,53 @@
-import type { ElementType, HTMLAttributes, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import { useTabsContext } from './context';
-
-export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-  lazy?: boolean;
-}
-
-export const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
-  function TabPanel(props, forwardedRef) {
-    const {
-      as: Comp = 'div',
-      index,
-      lazy = false,
-      children,
-      ...otherProps
-    } = props as TabPanelProps & { index: number };
-    const tabsContext = useTabsContext();
-
-    if (!tabsContext) {
-      throw new Error('Missing <Tabs /> in the component tree.');
-    }
-
-    const isSelected = tabsContext.currentIndex === index;
-
-    return (
-      <Comp
-        ref={forwardedRef}
-        data-tab-panel=""
-        role="tabpanel"
-        id={
-          tabsContext.tabListId !== null
-            ? `tabpanel-${tabsContext.tabListId}-${index}`
-            : undefined
-        }
-        aria-labelledby={
-          tabsContext.tabListId !== null
-            ? `tab-${tabsContext.tabListId}-${index}`
-            : undefined
-        }
-        hidden={isSelected ? undefined : 'hidden'}
-        tabIndex={0}
-        {...otherProps}
-      >
-        {(isSelected || !lazy) && children}
-      </Comp>
-    );
-  }
-);
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import { useTabsContext } from './context';
+
+export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  lazy?: boolean;
+}
+
+export const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
+  function TabPanel(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      index,
+      lazy = false,
+      children,
+      ...otherProps
+    } = props as TabPanelProps & { index: number };
+    const tabsContext = useTabsContext();
+
+    if (!tabsContext) {
+      throw new Error('Missing <Tabs /> in the component tree.');
+    }
+
+    const isSelected = tabsContext.currentIndex === index;
+
+    return (
+      <Comp
+        ref={forwardedRef}
+        data-tab-panel=""
+        role="tabpanel"
+        id={
+          tabsContext.tabListId !== null
+            ? `tabpanel-${tabsContext.tabListId}-${index}`
+            : undefined
+        }
+        aria-labelledby={
+          tabsContext.tabListId !== null
+            ? `tab-${tabsContext.tabListId}-${index}`
+            : undefined
+        }
+        hidden={isSelected ? undefined : 'hidden'}
+        tabIndex={0}
+        {...otherProps}
+      >
+        {(isSelected || !lazy) && children}
+      </Comp>
+    );
+  }
+);

package/src/Tabs/TabPanels.tsx

@@ -1,30 +1,30 @@
-import type { ElementType, ReactNode } from 'react';
-import { forwardRef, Fragment, Children, cloneElement } from 'react';
-
-export interface TabPanelsProps {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  lazy?: boolean;
-  children?: ReactNode;
-}
-
-export const TabPanels = forwardRef<HTMLDivElement, TabPanelsProps>(
-  function TabPanels(props, forwardedRef) {
-    const {
-      as: Comp = Fragment,
-      children: childrenProps,
-      lazy,
-      ...otherProps
-    } = props;
-
-    const children = Children.map(childrenProps, (node, index) =>
-      cloneElement(node as any, { index, lazy })
-    );
-
-    return (
-      <Comp ref={forwardedRef} {...otherProps}>
-        {children}
-      </Comp>
-    );
-  }
-);
+import type { ElementType, ReactNode } from 'react';
+import { forwardRef, Fragment, Children, cloneElement } from 'react';
+
+export interface TabPanelsProps {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  lazy?: boolean;
+  children?: ReactNode;
+}
+
+export const TabPanels = forwardRef<HTMLDivElement, TabPanelsProps>(
+  function TabPanels(props, forwardedRef) {
+    const {
+      as: Comp = Fragment,
+      children: childrenProps,
+      lazy,
+      ...otherProps
+    } = props;
+
+    const children = Children.map(childrenProps, (node, index) =>
+      cloneElement(node as any, { index, lazy })
+    );
+
+    return (
+      <Comp ref={forwardedRef} {...otherProps}>
+        {children}
+      </Comp>
+    );
+  }
+);

package/src/Tabs/Tabs.tsx

@@ -1,46 +1,46 @@
-import type { ElementType, KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import { forwardRef, Fragment, useState } from 'react';
-
-import { TabsProvider } from './context';
-import { useControlledState } from '../hooks';
-
-export interface TabsProps {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-  onChange?: (
-    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>,
-    value: number
-  ) => void;
-  index?: number;
-  defaultIndex?: number;
-}
-
-export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
-  props,
-  forwardedRef
-) {
-  const {
-    as: Comp = Fragment,
-    index: indexProp,
-    onChange: onChangeProp,
-    defaultIndex = 0,
-    ...otherProps
-  } = props;
-  const [index, onChange] = useControlledState(
-    indexProp,
-    onChangeProp,
-    defaultIndex,
-    (setState) => (e, idx) => setState(idx)
-  );
-
-  const [tabListId, setTabListId] = useState<string | null>(null);
-
-  return (
-    <TabsProvider
-      value={{ currentIndex: index || 0, onChange, tabListId, setTabListId }}
-    >
-      <Comp ref={forwardedRef} {...otherProps} />
-    </TabsProvider>
-  );
-});
+import type { ElementType, KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { forwardRef, Fragment, useState } from 'react';
+
+import { TabsProvider } from './context';
+import { useControlledState } from '../hooks';
+
+export interface TabsProps {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  onChange?: (
+    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>,
+    value: number
+  ) => void;
+  index?: number;
+  defaultIndex?: number;
+}
+
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
+  props,
+  forwardedRef
+) {
+  const {
+    as: Comp = Fragment,
+    index: indexProp,
+    onChange: onChangeProp,
+    defaultIndex = 0,
+    ...otherProps
+  } = props;
+  const [index, onChange] = useControlledState(
+    indexProp,
+    onChangeProp,
+    defaultIndex,
+    (setState) => (e, idx) => setState(idx)
+  );
+
+  const [tabListId, setTabListId] = useState<string | null>(null);
+
+  return (
+    <TabsProvider
+      value={{ currentIndex: index || 0, onChange, tabListId, setTabListId }}
+    >
+      <Comp ref={forwardedRef} {...otherProps} />
+    </TabsProvider>
+  );
+});

package/src/Tabs/context.ts

@@ -1,30 +1,30 @@
-import type { KeyboardEvent, MouseEvent } from 'react';
-import { createContext, useContext } from 'react';
-
-import type { Scope } from '../hooks/useScope';
-
-// Tabs Component
-export interface TabsContextProps {
-  currentIndex: number;
-  onChange?: (
-    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>,
-    value: number
-  ) => void;
-  tabListId: string | null;
-  setTabListId: (v: string | null) => void;
-}
-
-const tabsContext = createContext<TabsContextProps | null>(null);
-export const { Provider: TabsProvider } = tabsContext;
-export const useTabsContext = () => useContext(tabsContext);
-
-// TabList Component
-export interface TabListContextProps {
-  tabsScope: Scope<HTMLElement>;
-  manualActivation: boolean;
-  vertical: boolean;
-}
-
-const tablistContext = createContext<TabListContextProps | null>(null);
-export const { Provider: TabListProvider } = tablistContext;
-export const useTabListContext = () => useContext(tablistContext);
+import type { KeyboardEvent, MouseEvent } from 'react';
+import { createContext, useContext } from 'react';
+
+import type { Scope } from '../hooks/useScope';
+
+// Tabs Component
+export interface TabsContextProps {
+  currentIndex: number;
+  onChange?: (
+    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>,
+    value: number
+  ) => void;
+  tabListId: string | null;
+  setTabListId: (v: string | null) => void;
+}
+
+const tabsContext = createContext<TabsContextProps | null>(null);
+export const { Provider: TabsProvider } = tabsContext;
+export const useTabsContext = () => useContext(tabsContext);
+
+// TabList Component
+export interface TabListContextProps {
+  tabsScope: Scope<HTMLElement>;
+  manualActivation: boolean;
+  vertical: boolean;
+}
+
+const tablistContext = createContext<TabListContextProps | null>(null);
+export const { Provider: TabListProvider } = tablistContext;
+export const useTabListContext = () => useContext(tablistContext);

package/src/Tabs/index.tsx

@@ -1,5 +1,5 @@
-export * from './Tabs';
-export * from './Tab';
-export * from './TabList';
-export * from './TabPanels';
-export * from './TabPanel';
+export * from './Tabs';
+export * from './Tab';
+export * from './TabList';
+export * from './TabPanels';
+export * from './TabPanel';

package/src/Tabs/scopeQuery.ts

@@ -1,6 +1,6 @@
-export function scopeQuery(
-  nodeType: string,
-  props: Record<string, unknown>
-): boolean {
-  return props['data-tab'] === '';
-}
+export function scopeQuery(
+  nodeType: string,
+  props: Record<string, unknown>
+): boolean {
+  return props['data-tab'] === '';
+}

package/src/Tooltip/Tooltip.story.tsx

@@ -1,61 +1,61 @@
-import { useRef, forwardRef } from 'react';
-
-import { Tooltip } from './';
-import { Popper } from '../Popper/Popper';
-import type { InjectedTooltipProps } from './useTooltip';
-import './styles.css';
-
-export default {
-  title: 'components/Tooltip',
-};
-
-const StyledTooltip = forwardRef<HTMLDivElement, InjectedTooltipProps>(
-  ({ children, anchorEl, ...props }, ref) => {
-    return (
-      <Popper ref={ref} anchorEl={anchorEl} distance={10}>
-        <div
-          style={{
-            backgroundColor: '#fff',
-            boxShadow: '0 0 4px 1px rgba(187,187,187,0.7)',
-            padding: 8,
-          }}
-          {...props}
-        >
-          {children}
-        </div>
-      </Popper>
-    );
-  }
-);
-
-const Example = () => {
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-  return (
-    <div style={{ margin: 100, display: 'flex' }}>
-      <Tooltip label={'Im groot'} as={StyledTooltip}>
-        <button ref={buttonRef}>Hello</button>
-      </Tooltip>
-      <Tooltip label={'Nice'} as={StyledTooltip}>
-        <button ref={buttonRef}>Hello</button>
-      </Tooltip>
-    </div>
-  );
-};
-
-const ExampleWithHidingButton = () => {
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-  return (
-    <ul style={{ margin: 100 }}>
-      {Array.from({ length: 20 }).map((_, index) => (
-        <li data-hide-child-buttons="" key={index}>
-          <Tooltip label={'Im groot'} as={StyledTooltip}>
-            <button ref={buttonRef}>Hello</button>
-          </Tooltip>
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-export const Controlled = () => <Example />;
-export const WithHidingButton = () => <ExampleWithHidingButton />;
+import { useRef, forwardRef } from 'react';
+
+import { Tooltip } from './';
+import { Popper } from '../Popper/Popper';
+import type { InjectedTooltipProps } from './useTooltip';
+import './styles.css';
+
+export default {
+  title: 'components/Tooltip',
+};
+
+const StyledTooltip = forwardRef<HTMLDivElement, InjectedTooltipProps>(
+  ({ children, anchorEl, ...props }, ref) => {
+    return (
+      <Popper ref={ref} anchorEl={anchorEl} distance={10}>
+        <div
+          style={{
+            backgroundColor: '#fff',
+            boxShadow: '0 0 4px 1px rgba(187,187,187,0.7)',
+            padding: 8,
+          }}
+          {...props}
+        >
+          {children}
+        </div>
+      </Popper>
+    );
+  }
+);
+
+const Example = () => {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  return (
+    <div style={{ margin: 100, display: 'flex' }}>
+      <Tooltip label={'Im groot'} as={StyledTooltip}>
+        <button ref={buttonRef}>Hello</button>
+      </Tooltip>
+      <Tooltip label={'Nice'} as={StyledTooltip}>
+        <button ref={buttonRef}>Hello</button>
+      </Tooltip>
+    </div>
+  );
+};
+
+const ExampleWithHidingButton = () => {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  return (
+    <ul style={{ margin: 100 }}>
+      {Array.from({ length: 20 }).map((_, index) => (
+        <li data-hide-child-buttons="" key={index}>
+          <Tooltip label={'Im groot'} as={StyledTooltip}>
+            <button ref={buttonRef}>Hello</button>
+          </Tooltip>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export const Controlled = () => <Example />;
+export const WithHidingButton = () => <ExampleWithHidingButton />;

package/src/Tooltip/Tooltip.tsx

@@ -1,50 +1,50 @@
-import type {
-  ElementType,
-  HTMLAttributes,
-  ReactElement,
-  ReactNode,
-  RefAttributes,
-} from 'react';
-import { forwardRef, cloneElement, Children } from 'react';
-
-import { useTooltip } from './useTooltip';
-export type { InjectedTooltipProps } from './useTooltip';
-
-export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-  label: ReactNode;
-  disabled?: boolean;
-}
-
-export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
-  function Tooltip(props, forwardedRef) {
-    const {
-      as: Comp = 'div',
-      innerAs,
-      children,
-      disabled = false,
-      ...otherProps
-    } = props;
-    const child: ReactElement & RefAttributes<any> = Children.only(
-      children
-    ) as any;
-    const [childProps, { visible, ...tooltipProps }] = useTooltip(
-      child.props,
-      child.ref,
-      otherProps
-    );
-
-    if (disabled) {
-      return <>{child}</>;
-    }
-
-    return (
-      <>
-        {cloneElement(child, childProps)}
-        {visible && <Comp as={innerAs} ref={forwardedRef} {...tooltipProps} />}
-      </>
-    );
-  }
-);
+import type {
+  ElementType,
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+  RefAttributes,
+} from 'react';
+import { forwardRef, cloneElement, Children } from 'react';
+
+import { useTooltip } from './useTooltip';
+export type { InjectedTooltipProps } from './useTooltip';
+
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  label: ReactNode;
+  disabled?: boolean;
+}
+
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  function Tooltip(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      innerAs,
+      children,
+      disabled = false,
+      ...otherProps
+    } = props;
+    const child: ReactElement & RefAttributes<any> = Children.only(
+      children
+    ) as any;
+    const [childProps, { visible, ...tooltipProps }] = useTooltip(
+      child.props,
+      child.ref,
+      otherProps
+    );
+
+    if (disabled) {
+      return <>{child}</>;
+    }
+
+    return (
+      <>
+        {cloneElement(child, childProps)}
+        {visible && <Comp as={innerAs} ref={forwardedRef} {...tooltipProps} />}
+      </>
+    );
+  }
+);

package/src/Tooltip/index.ts

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