@tamagui/tabs 3.0.0-beta.924.1 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Tabs.cjs +28 -35
- package/dist/cjs/Tabs.native.cjs +28 -35
- package/dist/cjs/Tabs.native.js +28 -35
- package/dist/cjs/Tabs.native.js.map +1 -1
- package/dist/esm/Tabs.mjs +28 -35
- package/dist/esm/Tabs.mjs.map +1 -1
- package/dist/esm/Tabs.native.js +28 -35
- package/dist/esm/Tabs.native.js.map +1 -1
- package/dist/jsx/Tabs.mjs +28 -35
- package/dist/jsx/Tabs.mjs.map +1 -1
- package/dist/jsx/Tabs.native.cjs +28 -35
- package/dist/jsx/Tabs.native.js +28 -35
- package/dist/jsx/Tabs.native.js.map +1 -1
- package/package.json +15 -12
- package/src/StyledContext.tsx +0 -2
- package/src/Tabs.tsx +41 -35
- package/types/StyledContext.d.ts +0 -2
- package/types/StyledContext.d.ts.map +1 -1
- package/types/Tabs.d.ts +56 -226
- package/types/Tabs.d.ts.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.native.js","names":[],"sources":["jsx/Tabs.native.js"],"sourcesContent":["\"use strict\";\nvar __create = Object.create;\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __getProtoOf = Object.getPrototypeOf;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n for (var name in all)\n __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(\n // If the importer is in node compatibility mode or this is not an ESM\n // file that has been converted to a CommonJS file using a Babel-\n // compatible transform (i.e. \"__esModule\" has not been set), then set\n // \"default\" to the CommonJS \"module.exports\" for node compatibility.\n isNodeMode || !mod || !mod.__esModule ? __defProp(target, \"default\", { value: mod, enumerable: true }) : target,\n mod\n));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar Tabs_exports = {};\n__export(Tabs_exports, {\n Tabs: () => Tabs2,\n TabsContent: () => TabsContent,\n TabsContentFrame: () => TabsContentFrame,\n TabsFrame: () => TabsFrame,\n TabsList: () => TabsList,\n TabsListFrame: () => TabsListFrame,\n TabsTab: () => TabsTab,\n TabsTabFrame: () => TabsTabFrame\n});\nmodule.exports = __toCommonJS(Tabs_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_compose_refs = require(\"@tamagui/compose-refs\");\nvar import_constants = require(\"@tamagui/constants\");\nvar import_core = require(\"@tamagui/core\");\nvar import_helpers = require(\"@tamagui/helpers\");\nvar import_roving_focus = require(\"@tamagui/roving-focus\");\nvar import_size = require(\"@tamagui/size\");\nvar import_tabs_headless = require(\"@tamagui/tabs-headless\");\nvar import_web = require(\"@tamagui/web\");\nvar React = __toESM(require(\"react\"), 1);\nvar import_StyledContext = require(\"./StyledContext\");\nvar TABS_CONTEXT = \"TabsContext\";\nvar TabsFrame = (0, import_core.styled)(import_core.View, {\n displayName: \"Tabs\",\n context: import_size.SizeContext\n});\nvar TabsListFrame = (0, import_core.styled)(import_core.View, {\n displayName: \"TabsList\",\n context: import_size.SizeContext,\n role: \"tablist\"\n});\nvar TabsTabFrame = (0, import_core.styled)(import_core.View, {\n displayName: \"TabsTrigger\",\n context: import_size.SizeContext,\n role: \"tab\",\n variants: {\n disabled: {\n true: {\n pointerEvents: \"none\"\n }\n }\n }\n});\nvar TabsContentFrame = (0, import_core.styled)(import_core.View, {\n displayName: \"TabsContent\",\n context: import_size.SizeContext\n});\nvar TabsListDisabledContext = /* @__PURE__ */ React.createContext(false);\nvar TabsList = (0, import_core.createStyledHOC)(TabsListFrame, function TabsList2(props, forwardedRef) {\n var { __scopeTabs, loop = true, disabled = false, children, ...listProps } = props;\n var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);\n var { listProps: headlessListProps } = (0, import_tabs_headless.useTabsList)({\n orientation: context.orientation,\n disabled\n });\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsListDisabledContext.Provider, {\n value: disabled,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {\n __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,\n orientation: context.orientation,\n dir: context.dir,\n loop,\n asChild: true,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsListFrame, {\n ...headlessListProps,\n flexDirection: context.orientation === \"vertical\" ? \"column\" : \"row\",\n ref: forwardedRef,\n ...listProps,\n children\n })\n })\n });\n});\nvar TabsTab = (0, import_core.createStyledHOC)(TabsTabFrame, function TabsTab2(props, forwardedRef) {\n var { __scopeTabs, value, disabled: disabledProp, onInteraction, activeStyle, activeTheme, onLayout, onMouseEnter, onMouseLeave, onPress, onKeyDown, onFocus, onBlur, ...triggerProps } = props;\n var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);\n var listDisabled = React.useContext(TabsListDisabledContext);\n var disabled = (disabledProp !== null && disabledProp !== void 0 ? disabledProp : listDisabled) === true;\n var { isSelected, tabProps } = (0, import_tabs_headless.useTab)({\n baseId: context.baseId,\n value,\n selectedValue: context.value,\n disabled,\n activationMode: context.activationMode,\n onChange: context.onChange\n });\n var { onPress: activateOnPress, onKeyDown: activateOnKeyDown, onFocus: activateOnFocus, ...tabA11yProps } = tabProps;\n var [layout, setLayout] = React.useState(null);\n var triggerRef = React.useRef(null);\n var emitInteraction = (0, import_web.useEvent)(function(type, layout2) {\n onInteraction === null || onInteraction === void 0 ? void 0 : onInteraction(type, layout2);\n });\n React.useEffect(function() {\n context.registerTrigger();\n return function() {\n return context.unregisterTrigger();\n };\n }, []);\n React.useEffect(function() {\n if (!triggerRef.current || !import_constants.isWeb) return;\n var element = triggerRef.current;\n function updateTriggerSize() {\n var next = {\n width: element.offsetWidth,\n height: element.offsetHeight,\n x: element.offsetLeft,\n y: element.offsetTop\n };\n setLayout(function(previous) {\n return previous && previous.width === next.width && previous.height === next.height && previous.x === next.x && previous.y === next.y ? previous : next;\n });\n }\n updateTriggerSize();\n var observer = new ResizeObserver(updateTriggerSize);\n observer.observe(element);\n return function() {\n return observer.disconnect();\n };\n }, [\n context.triggersCount\n ]);\n React.useEffect(function() {\n if (isSelected && layout) {\n emitInteraction(\"select\", layout);\n }\n }, [\n emitInteraction,\n isSelected,\n layout\n ]);\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {\n __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,\n asChild: true,\n tabIndex: disabled ? -1 : 0,\n active: isSelected,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsTabFrame, {\n onLayout: import_constants.isWeb ? onLayout : (0, import_helpers.composeEventHandlers)(onLayout, function(event) {\n setLayout(event.nativeEvent.layout);\n }),\n onMouseEnter: (0, import_helpers.composeEventHandlers)(onMouseEnter, function() {\n if (layout) {\n emitInteraction(\"hover\", layout);\n }\n }),\n onMouseLeave: (0, import_helpers.composeEventHandlers)(onMouseLeave, function() {\n emitInteraction(\"hover\", null);\n }),\n ...tabA11yProps,\n theme: isSelected ? activeTheme !== null && activeTheme !== void 0 ? activeTheme : null : null,\n size: context.size,\n ...triggerProps,\n // after triggerProps so active styles beat base styles from styled() skins\n style: [\n triggerProps.style,\n isSelected && activeStyle\n ],\n ref: (0, import_compose_refs.composeRefs)(forwardedRef, triggerRef),\n onPress: (0, import_helpers.composeEventHandlers)(onPress !== null && onPress !== void 0 ? onPress : void 0, activateOnPress),\n ...import_constants.isWeb && {\n onKeyDown: (0, import_helpers.composeEventHandlers)(onKeyDown, activateOnKeyDown),\n // emit the focus interaction before activating, matching the order\n // the indicator animations were built against\n onFocus: (0, import_helpers.composeEventHandlers)(onFocus, (0, import_helpers.composeEventHandlers)(function() {\n if (layout) {\n emitInteraction(\"focus\", layout);\n }\n }, activateOnFocus)),\n onBlur: (0, import_helpers.composeEventHandlers)(onBlur, function() {\n emitInteraction(\"focus\", null);\n })\n }\n })\n });\n});\nvar TabsContent = (0, import_core.createStyledHOC)(TabsContentFrame, function TabsContent2(props, forwardedRef) {\n var { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);\n var { shouldMount, contentProps: headlessContentProps } = (0, import_tabs_headless.useTabContent)({\n baseId: context.baseId,\n value,\n selectedValue: context.value,\n orientation: context.orientation,\n forceMount\n });\n if (!shouldMount) {\n return null;\n }\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContentFrame, {\n // @ts-ignore hidden is a web-only accessibility attribute\n ...headlessContentProps,\n ...contentProps,\n ref: forwardedRef,\n children\n }, value);\n});\nvar TabsComponent = (0, import_core.createStyledHOC)(TabsFrame, function Tabs(props, forwardedRef) {\n var { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = \"horizontal\", dir, activationMode = \"automatic\", size = true, ...tabsProps } = props;\n var { value, setValue, baseId, direction, triggersCount, registerTrigger, unregisterTrigger, tabsProps: headlessTabsProps } = (0, import_tabs_headless.useTabs)({\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation,\n dir,\n activationMode\n });\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_size.SizeContext.Provider, {\n size,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledContext.TabsProvider, {\n scope: __scopeTabs,\n baseId,\n value,\n onChange: setValue,\n orientation,\n dir: direction,\n activationMode,\n size,\n registerTrigger,\n triggersCount,\n unregisterTrigger,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsFrame, {\n direction,\n ...headlessTabsProps,\n ...tabsProps,\n ref: forwardedRef\n })\n })\n });\n});\nvar Tabs2 = (0, import_helpers.withStaticProperties)(TabsComponent, {\n Frame: TabsFrame,\n List: TabsList,\n Tab: TabsTab,\n Content: TabsContent\n});\n//# sourceMappingURL=Tabs.js.map\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tabs.native.js","names":[],"sources":["jsx/Tabs.native.js"],"sourcesContent":["\"use strict\";\nvar __create = Object.create;\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __getProtoOf = Object.getPrototypeOf;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n for (var name in all)\n __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(\n // If the importer is in node compatibility mode or this is not an ESM\n // file that has been converted to a CommonJS file using a Babel-\n // compatible transform (i.e. \"__esModule\" has not been set), then set\n // \"default\" to the CommonJS \"module.exports\" for node compatibility.\n isNodeMode || !mod || !mod.__esModule ? __defProp(target, \"default\", { value: mod, enumerable: true }) : target,\n mod\n));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar Tabs_exports = {};\n__export(Tabs_exports, {\n Tabs: () => Tabs2,\n TabsContent: () => TabsContent,\n TabsContentFrame: () => TabsContentFrame,\n TabsFrame: () => TabsFrame,\n TabsList: () => TabsList,\n TabsListFrame: () => TabsListFrame,\n TabsTab: () => TabsTab,\n TabsTabFrame: () => TabsTabFrame\n});\nmodule.exports = __toCommonJS(Tabs_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_compose_refs = require(\"@tamagui/compose-refs\");\nvar import_constants = require(\"@tamagui/constants\");\nvar import_core = require(\"@tamagui/core\");\nvar import_group = require(\"@tamagui/group\");\nvar import_helpers = require(\"@tamagui/helpers\");\nvar import_roving_focus = require(\"@tamagui/roving-focus\");\nvar import_tabs_headless = require(\"@tamagui/tabs-headless\");\nvar import_web = require(\"@tamagui/web\");\nvar React = __toESM(require(\"react\"), 1);\nvar import_StyledContext = require(\"./StyledContext\");\nvar TABS_CONTEXT = \"TabsContext\";\nvar TabsFrame = (0, import_core.styled)(import_core.View, {\n displayName: \"Tabs\"\n});\nvar TabsListFrame = (0, import_core.styled)(import_group.Group, {\n displayName: \"TabsList\",\n role: \"tablist\"\n});\nvar TabsTabFrame = (0, import_core.styled)(import_core.View, {\n displayName: \"TabsTrigger\",\n role: \"tab\",\n variants: {\n disabled: {\n true: {\n pointerEvents: \"none\"\n }\n }\n }\n});\nvar TabsContentFrame = (0, import_core.styled)(import_core.View, {\n displayName: \"TabsContent\"\n});\nvar TabsListDisabledContext = /* @__PURE__ */ React.createContext(false);\nvar TabsList = (0, import_core.createStyledHOC)(TabsListFrame, function TabsList2(props, forwardedRef) {\n var { __scopeTabs, loop = true, disabled = false, children, ...listProps } = props;\n var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);\n var { listProps: headlessListProps } = (0, import_tabs_headless.useTabsList)({\n orientation: context.orientation,\n disabled\n });\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsListDisabledContext.Provider, {\n value: disabled,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {\n __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,\n orientation: context.orientation,\n dir: context.dir,\n loop,\n asChild: true,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsListFrame, {\n ...headlessListProps,\n orientation: context.orientation,\n ref: forwardedRef,\n ...listProps,\n children\n })\n })\n });\n});\nvar TabsTab = (0, import_core.createStyledHOC)(TabsTabFrame, function TabsTab2(props, forwardedRef) {\n var { __scopeTabs, value, disabled: disabledProp, onInteraction, activeStyle, activeTheme, onLayout, onMouseEnter, onMouseLeave, onPress, onKeyDown, onFocus, onBlur, ...triggerProps } = props;\n var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);\n var listDisabled = React.useContext(TabsListDisabledContext);\n var disabled = (disabledProp !== null && disabledProp !== void 0 ? disabledProp : listDisabled) === true;\n var groupItemProps = (0, import_group.useGroupItem)({\n disabled\n });\n var { isSelected, tabProps } = (0, import_tabs_headless.useTab)({\n baseId: context.baseId,\n value,\n selectedValue: context.value,\n disabled,\n activationMode: context.activationMode,\n onChange: context.onChange\n });\n var { onPress: activateOnPress, onKeyDown: activateOnKeyDown, onFocus: activateOnFocus, ...tabA11yProps } = tabProps;\n var [layout, setLayout] = React.useState(null);\n var triggerRef = React.useRef(null);\n var emitInteraction = (0, import_web.useEvent)(function(type, layout2) {\n onInteraction === null || onInteraction === void 0 ? void 0 : onInteraction(type, layout2);\n });\n React.useEffect(function() {\n context.registerTrigger();\n return function() {\n return context.unregisterTrigger();\n };\n }, []);\n React.useEffect(function() {\n if (!triggerRef.current || !import_constants.isWeb) return;\n var element = triggerRef.current;\n function updateTriggerSize() {\n var next = {\n width: element.offsetWidth,\n height: element.offsetHeight,\n x: element.offsetLeft,\n y: element.offsetTop\n };\n setLayout(function(previous) {\n return previous && previous.width === next.width && previous.height === next.height && previous.x === next.x && previous.y === next.y ? previous : next;\n });\n }\n updateTriggerSize();\n var observer = new ResizeObserver(updateTriggerSize);\n observer.observe(element);\n var offsetParent = element.offsetParent;\n if (offsetParent) {\n observer.observe(offsetParent);\n }\n return function() {\n return observer.disconnect();\n };\n }, [\n context.triggersCount\n ]);\n React.useEffect(function() {\n if (isSelected && layout) {\n emitInteraction(\"select\", layout);\n }\n }, [\n emitInteraction,\n isSelected,\n layout\n ]);\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {\n __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,\n asChild: true,\n tabIndex: disabled ? -1 : 0,\n active: isSelected,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsTabFrame, {\n onLayout: import_constants.isWeb ? onLayout : (0, import_helpers.composeEventHandlers)(onLayout, function(event) {\n setLayout(event.nativeEvent.layout);\n }),\n onMouseEnter: (0, import_helpers.composeEventHandlers)(onMouseEnter, function() {\n if (layout) {\n emitInteraction(\"hover\", layout);\n }\n }),\n onMouseLeave: (0, import_helpers.composeEventHandlers)(onMouseLeave, function() {\n emitInteraction(\"hover\", null);\n }),\n ...tabA11yProps,\n theme: isSelected ? activeTheme !== null && activeTheme !== void 0 ? activeTheme : null : null,\n ...groupItemProps,\n ...triggerProps,\n // after triggerProps so active styles beat base styles from styled() skins\n style: [\n triggerProps.style,\n isSelected && activeStyle\n ],\n ref: (0, import_compose_refs.composeRefs)(forwardedRef, triggerRef),\n onPress: (0, import_helpers.composeEventHandlers)(onPress !== null && onPress !== void 0 ? onPress : void 0, activateOnPress),\n ...import_constants.isWeb && {\n onKeyDown: (0, import_helpers.composeEventHandlers)(onKeyDown, activateOnKeyDown),\n // emit the focus interaction before activating, matching the order\n // the indicator animations were built against\n onFocus: (0, import_helpers.composeEventHandlers)(onFocus, (0, import_helpers.composeEventHandlers)(function() {\n if (layout) {\n emitInteraction(\"focus\", layout);\n }\n }, activateOnFocus)),\n onBlur: (0, import_helpers.composeEventHandlers)(onBlur, function() {\n emitInteraction(\"focus\", null);\n })\n }\n })\n });\n});\nvar TabsContent = (0, import_core.createStyledHOC)(TabsContentFrame, function TabsContent2(props, forwardedRef) {\n var { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n var context = (0, import_StyledContext.useTabsContext)(__scopeTabs);\n var { shouldMount, contentProps: headlessContentProps } = (0, import_tabs_headless.useTabContent)({\n baseId: context.baseId,\n value,\n selectedValue: context.value,\n orientation: context.orientation,\n forceMount\n });\n if (!shouldMount) {\n return null;\n }\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContentFrame, {\n // @ts-ignore hidden is a web-only accessibility attribute\n ...headlessContentProps,\n ...contentProps,\n ref: forwardedRef,\n children\n }, value);\n});\nvar TabsComponent = (0, import_core.createStyledHOC)(TabsFrame, function Tabs(props, forwardedRef) {\n var { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = \"horizontal\", dir, activationMode = \"automatic\", ...tabsProps } = props;\n var { value, setValue, baseId, direction, triggersCount, registerTrigger, unregisterTrigger, tabsProps: headlessTabsProps } = (0, import_tabs_headless.useTabs)({\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation,\n dir,\n activationMode\n });\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StyledContext.TabsProvider, {\n scope: __scopeTabs,\n baseId,\n value,\n onChange: setValue,\n orientation,\n dir: direction,\n activationMode,\n registerTrigger,\n triggersCount,\n unregisterTrigger,\n children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsFrame, {\n direction,\n ...headlessTabsProps,\n ...tabsProps,\n ref: forwardedRef\n })\n });\n});\nvar Tabs2 = (0, import_helpers.withStaticProperties)(TabsComponent, {\n Frame: TabsFrame,\n List: TabsList,\n Tab: TabsTab,\n Content: TabsContent\n});\n//# sourceMappingURL=Tabs.js.map\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/tabs",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.1",
|
|
4
|
+
"license": "MIT",
|
|
4
5
|
"gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
|
|
5
6
|
"source": "src/index.ts",
|
|
6
7
|
"files": [
|
|
@@ -35,19 +36,20 @@
|
|
|
35
36
|
"clean:build": "tamagui-build clean:build"
|
|
36
37
|
},
|
|
37
38
|
"dependencies": {
|
|
38
|
-
"@tamagui/compose-refs": "3.0.
|
|
39
|
-
"@tamagui/constants": "3.0.
|
|
40
|
-
"@tamagui/core": "3.0.
|
|
41
|
-
"@tamagui/
|
|
42
|
-
"@tamagui/
|
|
43
|
-
"@tamagui/
|
|
44
|
-
"@tamagui/
|
|
45
|
-
"@tamagui/
|
|
39
|
+
"@tamagui/compose-refs": "3.0.1",
|
|
40
|
+
"@tamagui/constants": "3.0.1",
|
|
41
|
+
"@tamagui/core": "3.0.1",
|
|
42
|
+
"@tamagui/group": "3.0.1",
|
|
43
|
+
"@tamagui/helpers": "3.0.1",
|
|
44
|
+
"@tamagui/react-native-types": "3.0.1",
|
|
45
|
+
"@tamagui/roving-focus": "3.0.1",
|
|
46
|
+
"@tamagui/tabs-headless": "3.0.1",
|
|
47
|
+
"@tamagui/web": "3.0.1"
|
|
46
48
|
},
|
|
47
49
|
"devDependencies": {
|
|
48
|
-
"@tamagui/build": "3.0.
|
|
50
|
+
"@tamagui/build": "3.0.1",
|
|
49
51
|
"react": "19.2.3",
|
|
50
|
-
"react-native": "0.
|
|
52
|
+
"react-native": "0.87.1"
|
|
51
53
|
},
|
|
52
54
|
"peerDependencies": {
|
|
53
55
|
"react": ">=19"
|
|
@@ -57,5 +59,6 @@
|
|
|
57
59
|
"type": "git",
|
|
58
60
|
"url": "git+https://github.com/tamagui/tamagui.git",
|
|
59
61
|
"directory": "code/ui/tabs"
|
|
60
|
-
}
|
|
62
|
+
},
|
|
63
|
+
"releaseSourceCommit": "c156b7cc55e5a6cc5883ebc8189720850ac32dbd"
|
|
61
64
|
}
|
package/src/StyledContext.tsx
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { createStyledContext } from '@tamagui/core'
|
|
2
|
-
import type { TokenSize } from '@tamagui/size'
|
|
3
2
|
import type { TabsProps } from './Tabs'
|
|
4
3
|
|
|
5
4
|
export type TabsContextValue = {
|
|
@@ -9,7 +8,6 @@ export type TabsContextValue = {
|
|
|
9
8
|
orientation?: TabsProps['orientation']
|
|
10
9
|
dir?: TabsProps['dir']
|
|
11
10
|
activationMode?: TabsProps['activationMode']
|
|
12
|
-
size: TokenSize
|
|
13
11
|
registerTrigger: () => void
|
|
14
12
|
unregisterTrigger: () => void
|
|
15
13
|
triggersCount: number
|
package/src/Tabs.tsx
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
import { composeRefs } from '@tamagui/compose-refs'
|
|
2
2
|
import { isWeb } from '@tamagui/constants'
|
|
3
3
|
import { createStyledHOC, styled, View } from '@tamagui/core'
|
|
4
|
+
import { Group, useGroupItem } from '@tamagui/group'
|
|
4
5
|
import { composeEventHandlers, withStaticProperties } from '@tamagui/helpers'
|
|
5
6
|
import { RovingFocusGroup, type RovingFocusGroupProps } from '@tamagui/roving-focus'
|
|
6
|
-
import { SizeContext, type TokenSize } from '@tamagui/size'
|
|
7
7
|
import { useTab, useTabContent, useTabs, useTabsList } from '@tamagui/tabs-headless'
|
|
8
8
|
import type { GetProps, StylePiece, TamaguiElement } from '@tamagui/web'
|
|
9
9
|
import { useEvent } from '@tamagui/web'
|
|
10
10
|
import * as React from 'react'
|
|
11
|
-
import type { LayoutRectangle } from 'react-native'
|
|
11
|
+
import type { LayoutRectangle } from '@tamagui/react-native-types'
|
|
12
12
|
import { TabsProvider, useTabsContext } from './StyledContext'
|
|
13
13
|
|
|
14
14
|
const TABS_CONTEXT = 'TabsContext'
|
|
15
15
|
|
|
16
16
|
export const TabsFrame = styled(View, {
|
|
17
17
|
displayName: 'Tabs',
|
|
18
|
-
context: SizeContext,
|
|
19
18
|
})
|
|
20
19
|
|
|
21
|
-
|
|
20
|
+
// the list is a Group so the tabs read as one connected control: every tab but
|
|
21
|
+
// the first drops its connecting border and its interior corners, leaving the
|
|
22
|
+
// row rounded only on the outside
|
|
23
|
+
export const TabsListFrame = styled(Group, {
|
|
22
24
|
displayName: 'TabsList',
|
|
23
|
-
context: SizeContext,
|
|
24
25
|
role: 'tablist',
|
|
25
26
|
})
|
|
26
27
|
|
|
27
28
|
export const TabsTabFrame = styled(View, {
|
|
28
29
|
displayName: 'TabsTrigger',
|
|
29
|
-
context: SizeContext,
|
|
30
30
|
role: 'tab',
|
|
31
31
|
|
|
32
32
|
variants: {
|
|
@@ -40,7 +40,6 @@ export const TabsTabFrame = styled(View, {
|
|
|
40
40
|
|
|
41
41
|
export const TabsContentFrame = styled(View, {
|
|
42
42
|
displayName: 'TabsContent',
|
|
43
|
-
context: SizeContext,
|
|
44
43
|
})
|
|
45
44
|
|
|
46
45
|
type TabsScopeProps = {
|
|
@@ -56,8 +55,6 @@ type TabsExtraProps<Tab = string> = TabsScopeProps & {
|
|
|
56
55
|
defaultValue?: Tab
|
|
57
56
|
/** A function called when a new tab is selected */
|
|
58
57
|
onValueChange?: (value: Tab) => void
|
|
59
|
-
/** Coordinates a size value with styled descendants. */
|
|
60
|
-
size?: TokenSize
|
|
61
58
|
/**
|
|
62
59
|
* The orientation the tabs are laid out.
|
|
63
60
|
* Mainly so arrow navigation is done accordingly (left & right vs. up & down).
|
|
@@ -100,7 +97,8 @@ type TabsTabExtraProps = TabsScopeProps & {
|
|
|
100
97
|
activeTheme?: string | null
|
|
101
98
|
}
|
|
102
99
|
|
|
103
|
-
export type TabsTabProps =
|
|
100
|
+
export type TabsTabProps = React.ComponentPropsWithoutRef<typeof TabsTabFrame> &
|
|
101
|
+
TabsTabExtraProps
|
|
104
102
|
|
|
105
103
|
type TabsContentExtraProps = TabsScopeProps & {
|
|
106
104
|
/** The value that selects this content. */
|
|
@@ -134,7 +132,7 @@ export const TabsList = createStyledHOC(
|
|
|
134
132
|
>
|
|
135
133
|
<TabsListFrame
|
|
136
134
|
{...headlessListProps}
|
|
137
|
-
|
|
135
|
+
orientation={context.orientation}
|
|
138
136
|
ref={forwardedRef}
|
|
139
137
|
{...listProps}
|
|
140
138
|
>
|
|
@@ -170,6 +168,9 @@ export const TabsTab = createStyledHOC(
|
|
|
170
168
|
// interaction logic needs one boolean; a conditional flat value (clause
|
|
171
169
|
// string or object) can't drive focus/activation, so only literal true counts
|
|
172
170
|
const disabled = (disabledProp ?? listDisabled) === true
|
|
171
|
+
// the list is a Group, so this drops the connecting border and the interior
|
|
172
|
+
// corners on every tab but the first
|
|
173
|
+
const groupItemProps = useGroupItem({ disabled })
|
|
173
174
|
const { isSelected, tabProps } = useTab({
|
|
174
175
|
baseId: context.baseId,
|
|
175
176
|
value,
|
|
@@ -223,6 +224,15 @@ export const TabsTab = createStyledHOC(
|
|
|
223
224
|
updateTriggerSize()
|
|
224
225
|
const observer = new ResizeObserver(updateTriggerSize)
|
|
225
226
|
observer.observe(element)
|
|
227
|
+
// x and y are offsets within the offsetParent, so they go stale whenever
|
|
228
|
+
// that box changes even though the tab itself never resizes. a window
|
|
229
|
+
// resize that only reflows the list is exactly that case, and it left a
|
|
230
|
+
// roving indicator sitting at the old position until something unrelated
|
|
231
|
+
// happened to resize a tab.
|
|
232
|
+
const offsetParent = element.offsetParent
|
|
233
|
+
if (offsetParent) {
|
|
234
|
+
observer.observe(offsetParent)
|
|
235
|
+
}
|
|
226
236
|
|
|
227
237
|
return () => observer.disconnect()
|
|
228
238
|
}, [context.triggersCount])
|
|
@@ -258,7 +268,7 @@ export const TabsTab = createStyledHOC(
|
|
|
258
268
|
})}
|
|
259
269
|
{...tabA11yProps}
|
|
260
270
|
theme={isSelected ? (activeTheme ?? null) : null}
|
|
261
|
-
|
|
271
|
+
{...groupItemProps}
|
|
262
272
|
{...triggerProps}
|
|
263
273
|
// after triggerProps so active styles beat base styles from styled() skins
|
|
264
274
|
style={[triggerProps.style, isSelected && activeStyle]}
|
|
@@ -328,7 +338,6 @@ const TabsComponent = createStyledHOC(
|
|
|
328
338
|
orientation = 'horizontal',
|
|
329
339
|
dir,
|
|
330
340
|
activationMode = 'automatic',
|
|
331
|
-
size = true,
|
|
332
341
|
...tabsProps
|
|
333
342
|
} = props
|
|
334
343
|
const {
|
|
@@ -350,28 +359,25 @@ const TabsComponent = createStyledHOC(
|
|
|
350
359
|
})
|
|
351
360
|
|
|
352
361
|
return (
|
|
353
|
-
<
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
/>
|
|
373
|
-
</TabsProvider>
|
|
374
|
-
</SizeContext.Provider>
|
|
362
|
+
<TabsProvider
|
|
363
|
+
scope={__scopeTabs}
|
|
364
|
+
baseId={baseId}
|
|
365
|
+
value={value}
|
|
366
|
+
onChange={setValue}
|
|
367
|
+
orientation={orientation}
|
|
368
|
+
dir={direction}
|
|
369
|
+
activationMode={activationMode}
|
|
370
|
+
registerTrigger={registerTrigger}
|
|
371
|
+
triggersCount={triggersCount}
|
|
372
|
+
unregisterTrigger={unregisterTrigger}
|
|
373
|
+
>
|
|
374
|
+
<TabsFrame
|
|
375
|
+
direction={direction}
|
|
376
|
+
{...headlessTabsProps}
|
|
377
|
+
{...tabsProps}
|
|
378
|
+
ref={forwardedRef}
|
|
379
|
+
/>
|
|
380
|
+
</TabsProvider>
|
|
375
381
|
)
|
|
376
382
|
}
|
|
377
383
|
)
|
package/types/StyledContext.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { TokenSize } from '@tamagui/size';
|
|
2
1
|
import type { TabsProps } from './Tabs';
|
|
3
2
|
export type TabsContextValue = {
|
|
4
3
|
baseId: string;
|
|
@@ -7,7 +6,6 @@ export type TabsContextValue = {
|
|
|
7
6
|
orientation?: TabsProps['orientation'];
|
|
8
7
|
dir?: TabsProps['dir'];
|
|
9
8
|
activationMode?: TabsProps['activationMode'];
|
|
10
|
-
size: TokenSize;
|
|
11
9
|
registerTrigger: () => void;
|
|
12
10
|
unregisterTrigger: () => void;
|
|
13
11
|
triggersCount: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyledContext.d.ts","sourceRoot":"","sources":["../src/StyledContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"StyledContext.d.ts","sourceRoot":"","sources":["../src/StyledContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAEvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAA;IACtC,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IACtB,cAAc,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC5C,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAC7B,aAAa,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,eAAO,MAAkB,YAAY;;;IAAoB,cAAc,sCAC9B,CAAA"}
|