@udixio/ui-react 2.10.13 → 2.10.15

package/src/lib/components/TabGroup.tsx

@@ -1,66 +0,0 @@
-import React, { useId, useMemo, useRef, useState } from 'react';
-import { TabGroupContext, TabGroupContextValue } from './TabGroupContext';
-import { TabGroupInterface } from '../interfaces/tab-group.interface';
-import { ReactProps } from '../utils/component';
-
-/**
- * TabGroup provides shared state for Tabs and TabPanels
- * @status beta
- * @parent Tabs
- * @category Navigation
- * @devx
- * - Provides selection + slide direction for Tabs/TabPanels.
- * @limitations
- * - No URL/hash syncing or persistence built in.
- */
-export const TabGroup = ({
-  children,
-  selectedTab: externalSelectedTab,
-  setSelectedTab: externalSetSelectedTab,
-  defaultTab = 0,
-}: ReactProps<TabGroupInterface>) => {
-  const [internalSelectedTab, internalSetSelectedTab] = useState<number | null>(
-    defaultTab,
-  );
-  const previousTabRef = useRef<number | null>(null);
-
-  // Priorité : props externes > état interne
-  const selectedTab =
-    externalSelectedTab !== undefined
-      ? externalSelectedTab
-      : internalSelectedTab;
-
-  const setSelectedTab = externalSetSelectedTab ?? internalSetSelectedTab;
-
-  // Calculer la direction du slide
-  const direction =
-    previousTabRef.current !== null && selectedTab !== null
-      ? selectedTab > previousTabRef.current
-        ? 1
-        : -1
-      : 0;
-
-  // Mettre à jour la référence précédente
-  if (selectedTab !== previousTabRef.current) {
-    previousTabRef.current = selectedTab;
-  }
-
-  const id = useId();
-
-  const contextValue: TabGroupContextValue = useMemo(
-    () => ({
-      selectedTab,
-      setSelectedTab,
-      previousTab: previousTabRef.current,
-      direction,
-      tabsId: id,
-    }),
-    [selectedTab, setSelectedTab, direction, id],
-  );
-
-  return (
-    <TabGroupContext.Provider value={contextValue}>
-      {children}
-    </TabGroupContext.Provider>
-  );
-};

package/src/lib/components/TabGroupContext.tsx

@@ -1,16 +0,0 @@
-import { createContext, Dispatch, SetStateAction } from 'react';
-
-/**
- * Shared state container for Tabs and TabPanels.
- * @parent Tabs
- * @internal
- */
-export interface TabGroupContextValue {
-  selectedTab: number | null;
-  setSelectedTab: Dispatch<SetStateAction<number | null>>;
-  previousTab: number | null;
-  direction: number;
-  tabsId: string;
-}
-
-export const TabGroupContext = createContext<TabGroupContextValue | null>(null);

package/src/lib/components/TabPanel.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { TabPanelInterface } from '../interfaces/tab-panels.interface';
-import { ReactProps } from '../utils/component';
-import { useTabPanelStyle } from '../styles/tab-panels.style';
-
-/**
- * TabPanel contains the content for a single tab
- * Must be used within TabPanels
- * @status beta
- * @parent Tabs
- * @category Navigation
- * @devx
- * - Should be rendered inside `TabPanels` for animations and aria wiring.
- */
-export const TabPanel = ({
-  children,
-  className,
-  isSelected = false,
-}: ReactProps<TabPanelInterface>) => {
-  const styles = useTabPanelStyle({
-    children,
-    className,
-    isSelected,
-  });
-
-  return <div className={styles.tabPanel}>{children}</div>;
-};

package/src/lib/components/TabPanels.tsx

@@ -1,76 +0,0 @@
-import React, { useContext } from 'react';
-import { AnimatePresence, motion } from 'motion/react';
-import { TabGroupContext } from './TabGroupContext';
-import { TabPanelsInterface } from '../interfaces/tab-panels.interface';
-import { ReactProps } from '../utils/component';
-import { useTabPanelsStyle } from '../styles/tab-panels.style';
-import { TabPanel } from './TabPanel';
-
-/**
- * TabPanels renders the content panels with slide animation
- * Must be used within a TabGroup
- * @status beta
- * @parent Tabs
- * @category Navigation
- * @devx
- * - Requires `TabGroup` context; otherwise it renders nothing.
- * @limitations
- * - Only renders the active panel (no offscreen preservation).
- */
-export const TabPanels = ({
-  children,
-  className,
-}: ReactProps<TabPanelsInterface>) => {
-  const context = useContext(TabGroupContext);
-
-  if (!context) {
-    console.warn('TabPanels must be used within a TabGroup');
-    return null;
-  }
-
-  const { selectedTab, direction, tabsId } = context;
-
-  const panelChildren = React.Children.toArray(children).filter(
-    (child) => React.isValidElement(child) && child.type === TabPanel,
-  ) as React.ReactElement[];
-
-  const styles = useTabPanelsStyle({
-    children,
-    className,
-  });
-
-  return (
-    <div className={styles.tabPanels}>
-      <AnimatePresence initial={false} custom={direction} mode="popLayout">
-        {panelChildren.map(
-          (child, index) =>
-            selectedTab === index && (
-              <motion.div
-                key={index}
-                custom={direction}
-                variants={{
-                  enter: (dir: number) => ({
-                    x: dir * 100 + '%',
-                    opacity: 1,
-                  }),
-                  center: { x: 0, opacity: 1 },
-                  exit: (dir: number) => ({
-                    x: dir * -100 + '%',
-                    opacity: 1,
-                  }),
-                }}
-                initial="enter"
-                animate="center"
-                exit="exit"
-                transition={{ type: 'spring', stiffness: 400, damping: 40 }}
-                role="tabpanel"
-                aria-labelledby={`tab-${tabsId}-${index}`}
-              >
-                {React.cloneElement(child, { isSelected: true })}
-              </motion.div>
-            ),
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};

package/src/lib/components/Tabs.tsx

@@ -1,105 +0,0 @@
-import React, { useContext, useMemo, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import { TabsInterface } from '../interfaces/tabs.interface';
-
-import { useTabsStyle } from '../styles/tabs.style';
-import { ReactProps } from '../utils/component';
-import { TabProps } from '../interfaces/tab.interface';
-import { Tab } from './Tab';
-import { TabGroupContext } from './TabGroupContext';
-
-/**
- * Tabs organize content across different screens and views
- * @status beta
- * @category Navigation
- * @devx
- * - Can be controlled via `selectedTab`/`setSelectedTab` or through `TabGroup`.
- * @a11y
- * - No keyboard navigation or roving tabindex.
- */
-export const Tabs = ({
-  variant = 'primary',
-  onTabSelected,
-  children,
-  className,
-  selectedTab: externalSelectedTab,
-  setSelectedTab: externalSetSelectedTab,
-  scrollable = false,
-}: ReactProps<TabsInterface>) => {
-  const tabGroupContext = useContext(TabGroupContext);
-
-  const [internalSelectedTab, internalSetSelectedTab] = useState<number | null>(
-    null,
-  );
-
-  // Priorité : props > context > état interne
-  let selectedTab: number | null;
-  if (externalSelectedTab === 0 || externalSelectedTab != undefined) {
-    selectedTab = externalSelectedTab;
-  } else if (tabGroupContext) {
-    selectedTab = tabGroupContext.selectedTab;
-  } else {
-    selectedTab = internalSelectedTab;
-  }
-
-  const setSelectedTab =
-    externalSetSelectedTab ?? tabGroupContext?.setSelectedTab ?? internalSetSelectedTab;
-
-  const tabChildren = React.Children.toArray(children).filter(
-    (child) => React.isValidElement(child) && child.type === Tab,
-  ) as React.ReactElement<TabProps>[];
-
-  const ref = React.useRef<HTMLDivElement | null>(null);
-
-  const handleOnTabSelected = (
-    args: { index: number } & Pick<TabProps, 'label' | 'icon'> & {
-        ref: React.RefObject<any>;
-      },
-  ) => {
-    onTabSelected?.(args);
-
-    if (scrollable) {
-      const tabs: HTMLElement = ref.current!;
-      const tabSelected: HTMLElement = args.ref.current;
-      if (tabs && tabSelected) {
-        const scrollLeft =
-          tabSelected.offsetLeft +
-          tabSelected.offsetWidth / 2 -
-          tabs.offsetWidth / 2;
-        tabs.scrollTo({ left: scrollLeft, behavior: 'smooth' });
-      }
-    }
-  };
-
-  const tabsId = useMemo(
-    () => tabGroupContext?.tabsId ?? uuidv4(),
-    [tabGroupContext?.tabsId],
-  );
-
-  const styles = useTabsStyle({
-    children,
-    onTabSelected,
-    scrollable,
-    selectedTab,
-    setSelectedTab,
-    className,
-    variant,
-  });
-
-  return (
-    <div ref={ref} role="tablist" className={styles.tabs}>
-      {tabChildren.map((child, index) => {
-        return React.cloneElement(child, {
-          key: index,
-          index,
-          variant: variant,
-          selectedTab,
-          setSelectedTab: setSelectedTab,
-          tabsId: tabsId,
-          onTabSelected: handleOnTabSelected,
-          scrollable,
-        });
-      })}
-    </div>
-  );
-};