@tamagui/tabs 1.27.1 → 1.27.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/tabs",
-  "version": "1.27.1",
+  "version": "1.27.3",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -25,21 +25,21 @@
     }
   },
   "dependencies": {
-    "@tamagui/create-context": "1.27.1",
-    "@tamagui/get-button-sized": "1.27.1",
-    "@tamagui/group": "1.27.1",
-    "@tamagui/roving-focus": "1.27.1",
-    "@tamagui/stacks": "1.27.1",
-    "@tamagui/use-controllable-state": "1.27.1",
-    "@tamagui/use-direction": "1.27.1",
-    "@tamagui/web": "1.27.1"
+    "@tamagui/create-context": "1.27.3",
+    "@tamagui/get-button-sized": "1.27.3",
+    "@tamagui/group": "1.27.3",
+    "@tamagui/roving-focus": "1.27.3",
+    "@tamagui/stacks": "1.27.3",
+    "@tamagui/use-controllable-state": "1.27.3",
+    "@tamagui/use-direction": "1.27.3",
+    "@tamagui/web": "1.27.3"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.27.1",
+    "@tamagui/build": "1.27.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/dist/esm/Tabs.mjs

@@ -1,331 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { createContextScope } from "@tamagui/create-context";
-import { getButtonSized } from "@tamagui/get-button-sized";
-import { Group, useGroupItem } from "@tamagui/group";
-import { RovingFocusGroup, createRovingFocusGroupScope } from "@tamagui/roving-focus";
-import { SizableStack, ThemeableStack } from "@tamagui/stacks";
-import { useControllableState } from "@tamagui/use-controllable-state";
-import { useDirection } from "@tamagui/use-direction";
-import {
-  Theme,
-  composeEventHandlers,
-  composeRefs,
-  isWeb,
-  styled,
-  useEvent,
-  withStaticProperties
-} from "@tamagui/web";
-import * as React from "react";
-const TAB_LIST_NAME = "TabsList";
-const TabsListFrame = styled(Group, {
-  name: TAB_LIST_NAME,
-  focusable: true
-});
-const TabsList = TabsListFrame.extractable(
-  React.forwardRef(
-    (props, forwardedRef) => {
-      const { __scopeTabs, loop = true, children, ...listProps } = props;
-      const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
-      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
-      return /* @__PURE__ */ jsx(
-        RovingFocusGroup,
-        {
-          asChild: true,
-          orientation: context.orientation,
-          dir: context.dir,
-          loop,
-          ...rovingFocusGroupScope,
-          children: /* @__PURE__ */ jsx(
-            TabsListFrame,
-            {
-              role: "tablist",
-              "aria-orientation": context.orientation,
-              ref: forwardedRef,
-              axis: context.orientation,
-              ...listProps,
-              children
-            }
-          )
-        }
-      );
-    }
-  )
-);
-TabsList.displayName = TAB_LIST_NAME;
-const TRIGGER_NAME = "TabsTrigger";
-const TabsTriggerFrame = styled(ThemeableStack, {
-  name: TRIGGER_NAME,
-  justifyContent: "center",
-  alignItems: "center",
-  flexWrap: "nowrap",
-  flexDirection: "row",
-  cursor: "pointer",
-  focusable: true,
-  variants: {
-    size: {
-      "...size": getButtonSized
-    },
-    disabled: {
-      true: {
-        pointerEvents: "none"
-      }
-    },
-    unstyled: {
-      false: {
-        backgroundColor: "$background",
-        pressStyle: {
-          backgroundColor: "$backgroundPress"
-        },
-        hoverStyle: {
-          backgroundColor: "$backgroundHover"
-        },
-        focusStyle: {
-          backgroundColor: "$backgroundFocus"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: false
-  }
-});
-const TabsTrigger = TabsTriggerFrame.extractable(
-  React.forwardRef(
-    (props, forwardedRef) => {
-      const {
-        __scopeTabs,
-        value,
-        disabled = false,
-        onInteraction,
-        ...triggerProps
-      } = props;
-      const context = useTabsContext(TRIGGER_NAME, __scopeTabs);
-      const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
-      const triggerId = makeTriggerId(context.baseId, value);
-      const contentId = makeContentId(context.baseId, value);
-      const isSelected = value === context.value;
-      const [layout, setLayout] = React.useState(null);
-      const triggerRef = React.useRef(null);
-      const groupItemProps = useGroupItem({ disabled });
-      React.useEffect(() => {
-        context.registerTrigger();
-        return () => context.unregisterTrigger();
-      }, []);
-      React.useEffect(() => {
-        if (!triggerRef.current || !isWeb)
-          return;
-        function getTriggerSize() {
-          if (!triggerRef.current)
-            return;
-          setLayout({
-            width: triggerRef.current.offsetWidth,
-            height: triggerRef.current.offsetHeight,
-            x: triggerRef.current.offsetLeft,
-            y: triggerRef.current.offsetTop
-          });
-        }
-        getTriggerSize();
-        const observer = new ResizeObserver(getTriggerSize);
-        observer.observe(triggerRef.current);
-        return () => {
-          if (!triggerRef.current)
-            return;
-          observer.unobserve(triggerRef.current);
-        };
-      }, [context.triggersCount]);
-      React.useEffect(() => {
-        if (isSelected && layout) {
-          onInteraction == null ? void 0 : onInteraction("select", layout);
-        }
-      }, [isSelected, value, layout]);
-      return /* @__PURE__ */ jsx(Theme, { name: isSelected ? "active" : null, children: /* @__PURE__ */ jsx(
-        RovingFocusGroup.Item,
-        {
-          asChild: true,
-          ...rovingFocusGroupScope,
-          focusable: !disabled,
-          active: isSelected,
-          children: /* @__PURE__ */ jsx(
-            TabsTriggerFrame,
-            {
-              onLayout: (event) => {
-                if (!isWeb) {
-                  setLayout(event.nativeEvent.layout);
-                }
-              },
-              onHoverIn: composeEventHandlers(props.onHoverIn, () => {
-                if (layout) {
-                  onInteraction == null ? void 0 : onInteraction("hover", layout);
-                }
-              }),
-              onHoverOut: composeEventHandlers(props.onHoverOut, () => {
-                onInteraction == null ? void 0 : onInteraction("hover", null);
-              }),
-              role: "tab",
-              "aria-selected": isSelected,
-              "aria-controls": contentId,
-              "data-state": isSelected ? "active" : "inactive",
-              "data-disabled": disabled ? "" : void 0,
-              disabled,
-              id: triggerId,
-              size: context.size,
-              ...triggerProps,
-              ref: composeRefs(forwardedRef, triggerRef),
-              onPress: composeEventHandlers(props.onPress ?? void 0, (event) => {
-                const webChecks = !isWeb || event.button === 0 && event.ctrlKey === false;
-                if (!disabled && !isSelected && webChecks) {
-                  context.onChange(value);
-                } else {
-                  event.preventDefault();
-                }
-              }),
-              ...isWeb && {
-                type: "button",
-                onKeyDown: composeEventHandlers(
-                  props.onKeyDown,
-                  (event) => {
-                    if ([" ", "Enter"].includes(event.key)) {
-                      context.onChange(value);
-                      event.preventDefault();
-                    }
-                  }
-                ),
-                onFocus: composeEventHandlers(props.onFocus, (event) => {
-                  if (layout) {
-                    onInteraction == null ? void 0 : onInteraction("focus", layout);
-                  }
-                  const isAutomaticActivation = context.activationMode !== "manual";
-                  if (!isSelected && !disabled && isAutomaticActivation) {
-                    context.onChange(value);
-                  }
-                }),
-                onBlur: composeEventHandlers(props.onFocus, () => {
-                  onInteraction == null ? void 0 : onInteraction("focus", null);
-                })
-              },
-              ...groupItemProps
-            }
-          )
-        }
-      ) });
-    }
-  )
-);
-TabsTrigger.displayName = TRIGGER_NAME;
-const CONTENT_NAME = "TabsContent";
-const TabsContentFrame = styled(ThemeableStack, {
-  name: CONTENT_NAME
-});
-const TabsContent = TabsContentFrame.extractable(
-  React.forwardRef(
-    (props, forwardedRef) => {
-      const { __scopeTabs, value, forceMount, children, ...contentProps } = props;
-      const context = useTabsContext(CONTENT_NAME, __scopeTabs);
-      const isSelected = value === context.value;
-      const show = forceMount || isSelected;
-      const triggerId = makeTriggerId(context.baseId, value);
-      const contentId = makeContentId(context.baseId, value);
-      if (!show)
-        return null;
-      return /* @__PURE__ */ jsx(
-        TabsContentFrame,
-        {
-          "data-state": isSelected ? "active" : "inactive",
-          "data-orientation": context.orientation,
-          role: "tabpanel",
-          "aria-labelledby": triggerId,
-          hidden: !show,
-          id: contentId,
-          tabIndex: 0,
-          ...contentProps,
-          ref: forwardedRef,
-          children
-        },
-        value
-      );
-    }
-  )
-);
-TabsContent.displayName = CONTENT_NAME;
-const TABS_NAME = "Tabs";
-const [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [
-  createRovingFocusGroupScope
-]);
-const useRovingFocusGroupScope = createRovingFocusGroupScope();
-const [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME);
-const TabsFrame = styled(SizableStack, {
-  name: TABS_NAME
-});
-const Tabs = withStaticProperties(
-  TabsFrame.extractable(
-    React.forwardRef(
-      (props, forwardedRef) => {
-        const {
-          __scopeTabs,
-          value: valueProp,
-          onValueChange,
-          defaultValue,
-          orientation = "horizontal",
-          dir,
-          activationMode = "automatic",
-          size = "$true",
-          ...tabsProps
-        } = props;
-        const direction = useDirection(dir);
-        const [value, setValue] = useControllableState({
-          prop: valueProp,
-          onChange: onValueChange,
-          defaultProp: defaultValue ?? ""
-        });
-        const [triggersCount, setTriggersCount] = React.useState(0);
-        const registerTrigger = useEvent(() => setTriggersCount((v) => v + 1));
-        const unregisterTrigger = useEvent(() => setTriggersCount((v) => v - 1));
-        return /* @__PURE__ */ jsx(
-          TabsProvider,
-          {
-            scope: __scopeTabs,
-            baseId: React.useId(),
-            value,
-            onChange: setValue,
-            orientation,
-            dir: direction,
-            activationMode,
-            size,
-            registerTrigger,
-            triggersCount,
-            unregisterTrigger,
-            children: /* @__PURE__ */ jsx(
-              TabsFrame,
-              {
-                direction,
-                "data-orientation": orientation,
-                ...tabsProps,
-                ref: forwardedRef
-              }
-            )
-          }
-        );
-      }
-    )
-  ),
-  {
-    List: TabsList,
-    /**
-     * @deprecated Use Tabs.Tab instead
-     */
-    Trigger: TabsTrigger,
-    Tab: TabsTrigger,
-    Content: TabsContent
-  }
-);
-Tabs.displayName = TABS_NAME;
-function makeTriggerId(baseId, value) {
-  return `${baseId}-trigger-${value}`;
-}
-function makeContentId(baseId, value) {
-  return `${baseId}-content-${value}`;
-}
-export {
-  Tabs
-};
-//# sourceMappingURL=Tabs.mjs.map

package/dist/esm/index.mjs

@@ -1,2 +0,0 @@
-export * from "./Tabs";
-//# sourceMappingURL=index.mjs.map