@soyfri/shared-library 2.0.0-beta.9 → 3.0.0

package/Tab-DycIMXmQ.js

@@ -0,0 +1,138 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Children, isValidElement, useState } from "react";
+import { Box, Tabs as Tabs$1, Tab as Tab$1 } from "@mui/material";
+import { m as mergeSx } from "./mergeSx-BXoNZjB_.js";
+const TAB_DISPLAY_MAP = {
+  horizontal: { display: "flex", flexDirection: "column" },
+  vertical: { display: "flex", flexDirection: "row" }
+};
+const Tabs = ({
+  children,
+  defaultValue,
+  value: controlledValue,
+  onChangeValue,
+  centered = true,
+  orientation = "horizontal",
+  scrollButtons = "auto",
+  variant = "standard",
+  indicatorColor = "primary",
+  labelColor = "primary",
+  className,
+  allowScrollButtonsMobile = true,
+  keepMounted = false,
+  nav = false,
+  sx
+}) => {
+  var _a, _b;
+  const tabs = Children.toArray(children).filter(
+    (child) => {
+      var _a2;
+      return isValidElement(child) && ((_a2 = child.type) == null ? void 0 : _a2.displayName) === "Tab";
+    }
+  );
+  const firstValue = (_a = tabs[0]) == null ? void 0 : _a.props.value;
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = useState(
+    (_b = defaultValue != null ? defaultValue : firstValue) != null ? _b : 0
+  );
+  const currentValue = isControlled ? controlledValue : internalValue;
+  const handleChange = (_event, newValue) => {
+    if (!isControlled && !nav) setInternalValue(newValue);
+    onChangeValue == null ? void 0 : onChangeValue(newValue);
+  };
+  const effectiveCentered = centered && variant !== "scrollable" && variant !== "fullWidth";
+  const hasPanels = tabs.some((tab) => tab.props.children != null);
+  const renderPanels = !nav && hasPanels;
+  const { display, flexDirection } = TAB_DISPLAY_MAP[orientation];
+  return /* @__PURE__ */ jsxs(Box, { sx: { display, flexDirection }, children: [
+    /* @__PURE__ */ jsx(
+      Tabs$1,
+      {
+        value: currentValue,
+        onChange: handleChange,
+        centered: effectiveCentered,
+        indicatorColor,
+        orientation,
+        scrollButtons,
+        variant,
+        className,
+        textColor: labelColor,
+        allowScrollButtonsMobile,
+        sx: mergeSx({}, sx),
+        children: tabs.map((tab, idx) => {
+          const {
+            label,
+            icon,
+            value = idx,
+            disabled,
+            wrapped,
+            iconPosition,
+            className: tabClassName,
+            sx: tabSx,
+            component,
+            to,
+            href,
+            onClick
+          } = tab.props;
+          return /* @__PURE__ */ jsx(
+            Tab$1,
+            __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+              label,
+              icon,
+              value,
+              disabled,
+              wrapped,
+              iconPosition,
+              className: tabClassName,
+              sx: tabSx
+            }, component ? { component } : {}), to ? { to } : {}), href ? { href } : {}), onClick ? { onClick } : {}),
+            value
+          );
+        })
+      }
+    ),
+    renderPanels && /* @__PURE__ */ jsx(Box, { m: 2, sx: { width: "100%" }, children: keepMounted ? tabs.map((tab, idx) => {
+      var _a2;
+      const value = (_a2 = tab.props.value) != null ? _a2 : idx;
+      const isActive = value === currentValue;
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          role: "tabpanel",
+          sx: { display: isActive ? "block" : "none" },
+          "aria-hidden": !isActive,
+          children: tab.props.children
+        },
+        value
+      );
+    }) : tabs.map((tab, idx) => {
+      var _a2;
+      const value = (_a2 = tab.props.value) != null ? _a2 : idx;
+      if (value !== currentValue) return null;
+      return /* @__PURE__ */ jsx(Box, { role: "tabpanel", children: tab.props.children }, value);
+    }) })
+  ] });
+};
+const Tab = (_) => null;
+Tab.displayName = "Tab";
+export {
+  Tabs as T,
+  Tab as a
+};
+//# sourceMappingURL=Tab-DycIMXmQ.js.map

package/Tab-DycIMXmQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab-DycIMXmQ.js","sources":["../src/components/Tabs/_tabUtils.tsx","../src/components/Tabs/Tabs.tsx","../src/components/Tabs/Tab.tsx"],"sourcesContent":["export const TAB_DISPLAY_MAP: Record<\"horizontal\" | \"vertical\", { display: string, flexDirection: string }> = {\n  horizontal: { display: \"flex\", flexDirection: \"column\" },\n  vertical: { display: \"flex\", flexDirection: \"row\" }\n};","import {\n  Children,\n  isValidElement,\n  useState,\n  type FC,\n  type ReactElement,\n  type ReactNode,\n  type SyntheticEvent,\n} from 'react';\nimport {\n  Tabs as MuiTabs,\n  Tab as MuiTab,\n  Box,\n  type TabsProps as MuiTabsProps,\n} from '@mui/material';\n\nimport { TabProps } from './Tab';\nimport { TAB_DISPLAY_MAP } from './_tabUtils';\nimport { mergeSx } from '../_shared/mergeSx';\n\ntype PickTabsProps = Pick<\n  MuiTabsProps,\n  | 'centered'\n  | 'indicatorColor'\n  | 'orientation'\n  | 'scrollButtons'\n  | 'variant'\n  | 'className'\n  | 'sx'\n  | 'visibleScrollbar'\n  | 'allowScrollButtonsMobile'\n>;\n\nexport interface TabsProps extends PickTabsProps {\n  /** Uno o varios `<Tab>`. Children que no sean `<Tab>` se ignoran. */\n  children: ReactNode;\n  /** Valor del tab inicialmente activo. Si no se provee, toma el `value` del primer `<Tab>` o `0`. */\n  defaultValue?: number | string;\n  /**\n   * Valor activo **controlado**. Si se provee, el consumer maneja el estado\n   * (típico en modo `nav`, donde el valor lo dicta la ruta). `false` = ningún\n   * tab activo (ej. ruta que no corresponde a ninguna tab).\n   */\n  value?: number | string | false;\n  /** Callback al cambiar de tab. Recibe el `value` del tab nuevo. */\n  onChangeValue?: (newValue: number | string) => void;\n  labelColor?: 'primary' | 'secondary' | 'inherit';\n  /**\n   * Modo **navegación**: las tabs son enlaces (`<Tab component={Link} to=.. />`),\n   * el `value` activo es controlado externamente (por la ruta) y **no** se\n   * renderizan paneles. `<Tab>` reenvía `component`/`to`/`href`/`onClick`.\n   */\n  nav?: boolean;\n  /**\n   * Cómo se manejan los paneles al cambiar de tab:\n   * - `false` (default): **unmount** — solo se renderiza el panel activo; los\n   *   demás se desmontan. El state interno de los hijos se pierde al navegar.\n   *   Menor uso de memoria.\n   * - `true`: **keep mounted** — renderiza todos los paneles pero oculta los\n   *   no activos con `display: none`. El state se preserva (inputs, scroll,\n   *   timers, subscripciones) al navegar entre tabs.\n   */\n  keepMounted?: boolean;\n}\n\nexport const Tabs: FC<TabsProps> = ({\n  children,\n  defaultValue,\n  value: controlledValue,\n  onChangeValue,\n  centered = true,\n  orientation = 'horizontal',\n  scrollButtons = 'auto',\n  variant = 'standard',\n  indicatorColor = 'primary',\n  labelColor = 'primary',\n  className,\n  allowScrollButtonsMobile = true,\n  keepMounted = false,\n  nav = false,\n  sx,\n}) => {\n  // Filtra a solo <Tab> children — acepta arrays, single child, fragments,\n  // y descarta cualquier otra cosa (strings, null, condicionales falsy).\n  const tabs: ReactElement<TabProps>[] = Children.toArray(children).filter(\n    (child): child is ReactElement<TabProps> =>\n      isValidElement(child) &&\n      (child.type as { displayName?: string })?.displayName === 'Tab',\n  );\n\n  const firstValue = tabs[0]?.props.value;\n  const isControlled = controlledValue !== undefined;\n  const [internalValue, setInternalValue] = useState<string | number>(\n    defaultValue ?? firstValue ?? 0,\n  );\n  const currentValue = isControlled ? controlledValue : internalValue;\n\n  const handleChange = (_event: SyntheticEvent, newValue: number | string) => {\n    // En modo nav (o controlado) el consumer/ruta maneja el valor.\n    if (!isControlled && !nav) setInternalValue(newValue);\n    onChangeValue?.(newValue);\n  };\n\n  // MUI no permite `centered` con variant scrollable/fullWidth.\n  const effectiveCentered =\n    centered && variant !== 'scrollable' && variant !== 'fullWidth';\n\n  // Si ningún `<Tab>` trae contenido (`children`), es una barra controlada y\n  // los paneles los renderiza el consumer aparte — no generamos paneles vacíos.\n  const hasPanels = tabs.some((tab) => tab.props.children != null);\n  const renderPanels = !nav && hasPanels;\n\n  const { display, flexDirection } = TAB_DISPLAY_MAP[orientation];\n\n  return (\n    <Box sx={{ display, flexDirection }}>\n      <MuiTabs\n        value={currentValue}\n        onChange={handleChange}\n        centered={effectiveCentered}\n        indicatorColor={indicatorColor}\n        orientation={orientation}\n        scrollButtons={scrollButtons}\n        variant={variant}\n        className={className}\n        textColor={labelColor}\n        allowScrollButtonsMobile={allowScrollButtonsMobile}\n        sx={mergeSx({}, sx)}\n      >\n        {tabs.map((tab, idx) => {\n          const {\n            label,\n            icon,\n            value = idx,\n            disabled,\n            wrapped,\n            iconPosition,\n            className: tabClassName,\n            sx: tabSx,\n            component,\n            to,\n            href,\n            onClick,\n          } = tab.props;\n          return (\n            <MuiTab\n              key={value}\n              label={label}\n              icon={icon}\n              value={value}\n              disabled={disabled}\n              wrapped={wrapped}\n              iconPosition={iconPosition}\n              className={tabClassName}\n              sx={tabSx}\n              // Modo nav: reenvía props de enlace/click.\n              {...(component ? { component } : {})}\n              {...(to ? { to } : {})}\n              {...(href ? { href } : {})}\n              {...(onClick ? { onClick } : {})}\n            />\n          );\n        })}\n      </MuiTabs>\n\n      {renderPanels && (\n      <Box m={2} sx={{ width: '100%' }}>\n        {keepMounted\n          ? tabs.map((tab, idx) => {\n            const value = tab.props.value ?? idx;\n            const isActive = value === currentValue;\n            return (\n              <Box\n                key={value}\n                role=\"tabpanel\"\n                // `display: none` mantiene el nodo en el DOM — state de los\n                // hijos (inputs, useState, etc.) no se pierde al navegar.\n                sx={{ display: isActive ? 'block' : 'none' }}\n                aria-hidden={!isActive}\n              >\n                {tab.props.children}\n              </Box>\n            );\n          })\n          : tabs.map((tab, idx) => {\n            const value = tab.props.value ?? idx;\n            if (value !== currentValue) return null;\n            return (\n              <Box key={value} role=\"tabpanel\">\n                {tab.props.children}\n              </Box>\n            );\n          })}\n      </Box>\n      )}\n    </Box>\n  );\n};\n\nexport default Tabs;\n","import React from \"react\";\nimport { TabProps as MuiTabProps } from \"@mui/material\";\n\ntype PickMuiTabProps = Pick<\n  MuiTabProps,\n  \"label\" | \"icon\" | \"disabled\" | \"sx\" | \"value\" | \"wrapped\" | \"iconPosition\" | \"className\" | \"disabled\"| 'disableRipple'\n>;\n\nexport interface TabProps extends Omit<PickMuiTabProps, 'value'> {\n  value?: number | string;\n  onChange?: () => void;\n  children?: React.ReactNode;\n  /**\n   * Componente a renderizar (modo `nav`): ej. `Link` de react-router.\n   * Junto con `to`/`href` convierte la tab en un enlace de navegación.\n   */\n  component?: React.ElementType;\n  /** Destino de navegación (react-router `Link`). Solo en modo `nav`. */\n  to?: string;\n  /** Destino de navegación (ancla nativa). Solo en modo `nav`. */\n  href?: string;\n  /** Click handler (ej. para tabs de navegación sin router). */\n  onClick?: () => void;\n}\n\nexport const Tab = (_: TabProps): null => null;\n\nTab.displayName = \"Tab\";\n\nexport default Tab;\n"],"names":["_a","MuiTabs","MuiTab"],"mappings":"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"}