@radix-ui/react-tabs
Advanced tools
Comparing version 1.1.0-rc.2 to 1.1.0-rc.3
"use strict"; | ||
"use client"; | ||
(() => { | ||
var __create = Object.create; | ||
var __defProp = Object.defineProperty; | ||
var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | ||
var __getOwnPropNames = Object.getOwnPropertyNames; | ||
var __getProtoOf = Object.getPrototypeOf; | ||
var __hasOwnProp = Object.prototype.hasOwnProperty; | ||
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { | ||
get: (a, b) => (typeof require !== "undefined" ? require : a)[b] | ||
}) : x)(function(x) { | ||
if (typeof require !== "undefined") return require.apply(this, arguments); | ||
throw Error('Dynamic require of "' + x + '" is not supported'); | ||
}); | ||
var __copyProps = (to, from, except, desc) => { | ||
if (from && typeof from === "object" || typeof from === "function") { | ||
for (let key of __getOwnPropNames(from)) | ||
if (!__hasOwnProp.call(to, key) && key !== except) | ||
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); | ||
} | ||
return to; | ||
}; | ||
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( | ||
// If the importer is in node compatibility mode or this is not an ESM | ||
// file that has been converted to a CommonJS file using a Babel- | ||
// compatible transform (i.e. "__esModule" has not been set), then set | ||
// "default" to the CommonJS "module.exports" for node compatibility. | ||
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, | ||
mod | ||
)); | ||
var __create = Object.create; | ||
var __defProp = Object.defineProperty; | ||
var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | ||
var __getOwnPropNames = Object.getOwnPropertyNames; | ||
var __getProtoOf = Object.getPrototypeOf; | ||
var __hasOwnProp = Object.prototype.hasOwnProperty; | ||
var __export = (target, all) => { | ||
for (var name in all) | ||
__defProp(target, name, { get: all[name], enumerable: true }); | ||
}; | ||
var __copyProps = (to, from, except, desc) => { | ||
if (from && typeof from === "object" || typeof from === "function") { | ||
for (let key of __getOwnPropNames(from)) | ||
if (!__hasOwnProp.call(to, key) && key !== except) | ||
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); | ||
} | ||
return to; | ||
}; | ||
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( | ||
// If the importer is in node compatibility mode or this is not an ESM | ||
// file that has been converted to a CommonJS file using a Babel- | ||
// compatible transform (i.e. "__esModule" has not been set), then set | ||
// "default" to the CommonJS "module.exports" for node compatibility. | ||
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, | ||
mod | ||
)); | ||
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); | ||
// packages/react/tabs/src/Tabs.tsx | ||
var React = __toESM(__require("react")); | ||
var import_primitive = __require("@radix-ui/primitive"); | ||
var import_react_context = __require("@radix-ui/react-context"); | ||
var import_react_roving_focus = __require("@radix-ui/react-roving-focus"); | ||
var import_react_presence = __require("@radix-ui/react-presence"); | ||
var import_react_primitive = __require("@radix-ui/react-primitive"); | ||
var RovingFocusGroup = __toESM(__require("@radix-ui/react-roving-focus")); | ||
var import_react_direction = __require("@radix-ui/react-direction"); | ||
var import_react_use_controllable_state = __require("@radix-ui/react-use-controllable-state"); | ||
var import_react_id = __require("@radix-ui/react-id"); | ||
var import_jsx_runtime = __require("react/jsx-runtime"); | ||
var TABS_NAME = "Tabs"; | ||
var [createTabsContext, createTabsScope] = (0, import_react_context.createContextScope)(TABS_NAME, [ | ||
import_react_roving_focus.createRovingFocusGroupScope | ||
]); | ||
var useRovingFocusGroupScope = (0, import_react_roving_focus.createRovingFocusGroupScope)(); | ||
var [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME); | ||
var Tabs = React.forwardRef( | ||
(props, forwardedRef) => { | ||
const { | ||
__scopeTabs, | ||
value: valueProp, | ||
onValueChange, | ||
defaultValue, | ||
orientation = "horizontal", | ||
dir, | ||
activationMode = "automatic", | ||
...tabsProps | ||
} = props; | ||
const direction = (0, import_react_direction.useDirection)(dir); | ||
const [value, setValue] = (0, import_react_use_controllable_state.useControllableState)({ | ||
prop: valueProp, | ||
onChange: onValueChange, | ||
defaultProp: defaultValue | ||
}); | ||
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
TabsProvider, | ||
{ | ||
scope: __scopeTabs, | ||
baseId: (0, import_react_id.useId)(), | ||
value, | ||
onValueChange: setValue, | ||
orientation, | ||
dir: direction, | ||
activationMode, | ||
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
import_react_primitive.Primitive.div, | ||
{ | ||
dir: direction, | ||
"data-orientation": orientation, | ||
...tabsProps, | ||
ref: forwardedRef | ||
} | ||
) | ||
} | ||
); | ||
} | ||
); | ||
Tabs.displayName = TABS_NAME; | ||
var TAB_LIST_NAME = "TabsList"; | ||
var TabsList = React.forwardRef( | ||
(props, forwardedRef) => { | ||
const { __scopeTabs, loop = true, ...listProps } = props; | ||
const context = useTabsContext(TAB_LIST_NAME, __scopeTabs); | ||
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs); | ||
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
RovingFocusGroup.Root, | ||
{ | ||
asChild: true, | ||
...rovingFocusGroupScope, | ||
orientation: context.orientation, | ||
dir: context.dir, | ||
loop, | ||
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
import_react_primitive.Primitive.div, | ||
{ | ||
role: "tablist", | ||
"aria-orientation": context.orientation, | ||
...listProps, | ||
ref: forwardedRef | ||
} | ||
) | ||
} | ||
); | ||
} | ||
); | ||
TabsList.displayName = TAB_LIST_NAME; | ||
var TRIGGER_NAME = "TabsTrigger"; | ||
var TabsTrigger = React.forwardRef( | ||
(props, forwardedRef) => { | ||
const { __scopeTabs, value, disabled = false, ...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; | ||
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
RovingFocusGroup.Item, | ||
{ | ||
asChild: true, | ||
...rovingFocusGroupScope, | ||
focusable: !disabled, | ||
active: isSelected, | ||
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
import_react_primitive.Primitive.button, | ||
{ | ||
type: "button", | ||
role: "tab", | ||
"aria-selected": isSelected, | ||
"aria-controls": contentId, | ||
"data-state": isSelected ? "active" : "inactive", | ||
"data-disabled": disabled ? "" : void 0, | ||
disabled, | ||
id: triggerId, | ||
...triggerProps, | ||
ref: forwardedRef, | ||
onMouseDown: (0, import_primitive.composeEventHandlers)(props.onMouseDown, (event) => { | ||
if (!disabled && event.button === 0 && event.ctrlKey === false) { | ||
context.onValueChange(value); | ||
} else { | ||
event.preventDefault(); | ||
} | ||
}), | ||
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => { | ||
if ([" ", "Enter"].includes(event.key)) context.onValueChange(value); | ||
}), | ||
onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, () => { | ||
const isAutomaticActivation = context.activationMode !== "manual"; | ||
if (!isSelected && !disabled && isAutomaticActivation) { | ||
context.onValueChange(value); | ||
} | ||
}) | ||
} | ||
) | ||
} | ||
); | ||
} | ||
); | ||
TabsTrigger.displayName = TRIGGER_NAME; | ||
var CONTENT_NAME = "TabsContent"; | ||
var TabsContent = React.forwardRef( | ||
(props, forwardedRef) => { | ||
const { __scopeTabs, value, forceMount, children, ...contentProps } = props; | ||
const context = useTabsContext(CONTENT_NAME, __scopeTabs); | ||
const triggerId = makeTriggerId(context.baseId, value); | ||
const contentId = makeContentId(context.baseId, value); | ||
const isSelected = value === context.value; | ||
const isMountAnimationPreventedRef = React.useRef(isSelected); | ||
React.useEffect(() => { | ||
const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false); | ||
return () => cancelAnimationFrame(rAF); | ||
}, []); | ||
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || isSelected, children: ({ present }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
import_react_primitive.Primitive.div, | ||
{ | ||
"data-state": isSelected ? "active" : "inactive", | ||
"data-orientation": context.orientation, | ||
role: "tabpanel", | ||
"aria-labelledby": triggerId, | ||
hidden: !present, | ||
id: contentId, | ||
tabIndex: 0, | ||
...contentProps, | ||
ref: forwardedRef, | ||
style: { | ||
...props.style, | ||
animationDuration: isMountAnimationPreventedRef.current ? "0s" : void 0 | ||
}, | ||
children: present && children | ||
} | ||
) }); | ||
} | ||
); | ||
TabsContent.displayName = CONTENT_NAME; | ||
function makeTriggerId(baseId, value) { | ||
return `${baseId}-trigger-${value}`; | ||
// packages/react/tabs/src/index.ts | ||
var src_exports = {}; | ||
__export(src_exports, { | ||
Content: () => Content, | ||
List: () => List, | ||
Root: () => Root2, | ||
Tabs: () => Tabs, | ||
TabsContent: () => TabsContent, | ||
TabsList: () => TabsList, | ||
TabsTrigger: () => TabsTrigger, | ||
Trigger: () => Trigger, | ||
createTabsScope: () => createTabsScope | ||
}); | ||
module.exports = __toCommonJS(src_exports); | ||
// packages/react/tabs/src/Tabs.tsx | ||
var React = __toESM(require("react")); | ||
var import_primitive = require("@radix-ui/primitive"); | ||
var import_react_context = require("@radix-ui/react-context"); | ||
var import_react_roving_focus = require("@radix-ui/react-roving-focus"); | ||
var import_react_presence = require("@radix-ui/react-presence"); | ||
var import_react_primitive = require("@radix-ui/react-primitive"); | ||
var RovingFocusGroup = __toESM(require("@radix-ui/react-roving-focus")); | ||
var import_react_direction = require("@radix-ui/react-direction"); | ||
var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state"); | ||
var import_react_id = require("@radix-ui/react-id"); | ||
var import_jsx_runtime = require("react/jsx-runtime"); | ||
var TABS_NAME = "Tabs"; | ||
var [createTabsContext, createTabsScope] = (0, import_react_context.createContextScope)(TABS_NAME, [ | ||
import_react_roving_focus.createRovingFocusGroupScope | ||
]); | ||
var useRovingFocusGroupScope = (0, import_react_roving_focus.createRovingFocusGroupScope)(); | ||
var [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME); | ||
var Tabs = React.forwardRef( | ||
(props, forwardedRef) => { | ||
const { | ||
__scopeTabs, | ||
value: valueProp, | ||
onValueChange, | ||
defaultValue, | ||
orientation = "horizontal", | ||
dir, | ||
activationMode = "automatic", | ||
...tabsProps | ||
} = props; | ||
const direction = (0, import_react_direction.useDirection)(dir); | ||
const [value, setValue] = (0, import_react_use_controllable_state.useControllableState)({ | ||
prop: valueProp, | ||
onChange: onValueChange, | ||
defaultProp: defaultValue | ||
}); | ||
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
TabsProvider, | ||
{ | ||
scope: __scopeTabs, | ||
baseId: (0, import_react_id.useId)(), | ||
value, | ||
onValueChange: setValue, | ||
orientation, | ||
dir: direction, | ||
activationMode, | ||
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
import_react_primitive.Primitive.div, | ||
{ | ||
dir: direction, | ||
"data-orientation": orientation, | ||
...tabsProps, | ||
ref: forwardedRef | ||
} | ||
) | ||
} | ||
); | ||
} | ||
function makeContentId(baseId, value) { | ||
return `${baseId}-content-${value}`; | ||
); | ||
Tabs.displayName = TABS_NAME; | ||
var TAB_LIST_NAME = "TabsList"; | ||
var TabsList = React.forwardRef( | ||
(props, forwardedRef) => { | ||
const { __scopeTabs, loop = true, ...listProps } = props; | ||
const context = useTabsContext(TAB_LIST_NAME, __scopeTabs); | ||
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs); | ||
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
RovingFocusGroup.Root, | ||
{ | ||
asChild: true, | ||
...rovingFocusGroupScope, | ||
orientation: context.orientation, | ||
dir: context.dir, | ||
loop, | ||
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
import_react_primitive.Primitive.div, | ||
{ | ||
role: "tablist", | ||
"aria-orientation": context.orientation, | ||
...listProps, | ||
ref: forwardedRef | ||
} | ||
) | ||
} | ||
); | ||
} | ||
var Root2 = Tabs; | ||
var List = TabsList; | ||
var Trigger = TabsTrigger; | ||
var Content = TabsContent; | ||
})(); | ||
); | ||
TabsList.displayName = TAB_LIST_NAME; | ||
var TRIGGER_NAME = "TabsTrigger"; | ||
var TabsTrigger = React.forwardRef( | ||
(props, forwardedRef) => { | ||
const { __scopeTabs, value, disabled = false, ...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; | ||
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
RovingFocusGroup.Item, | ||
{ | ||
asChild: true, | ||
...rovingFocusGroupScope, | ||
focusable: !disabled, | ||
active: isSelected, | ||
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
import_react_primitive.Primitive.button, | ||
{ | ||
type: "button", | ||
role: "tab", | ||
"aria-selected": isSelected, | ||
"aria-controls": contentId, | ||
"data-state": isSelected ? "active" : "inactive", | ||
"data-disabled": disabled ? "" : void 0, | ||
disabled, | ||
id: triggerId, | ||
...triggerProps, | ||
ref: forwardedRef, | ||
onMouseDown: (0, import_primitive.composeEventHandlers)(props.onMouseDown, (event) => { | ||
if (!disabled && event.button === 0 && event.ctrlKey === false) { | ||
context.onValueChange(value); | ||
} else { | ||
event.preventDefault(); | ||
} | ||
}), | ||
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => { | ||
if ([" ", "Enter"].includes(event.key)) context.onValueChange(value); | ||
}), | ||
onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, () => { | ||
const isAutomaticActivation = context.activationMode !== "manual"; | ||
if (!isSelected && !disabled && isAutomaticActivation) { | ||
context.onValueChange(value); | ||
} | ||
}) | ||
} | ||
) | ||
} | ||
); | ||
} | ||
); | ||
TabsTrigger.displayName = TRIGGER_NAME; | ||
var CONTENT_NAME = "TabsContent"; | ||
var TabsContent = React.forwardRef( | ||
(props, forwardedRef) => { | ||
const { __scopeTabs, value, forceMount, children, ...contentProps } = props; | ||
const context = useTabsContext(CONTENT_NAME, __scopeTabs); | ||
const triggerId = makeTriggerId(context.baseId, value); | ||
const contentId = makeContentId(context.baseId, value); | ||
const isSelected = value === context.value; | ||
const isMountAnimationPreventedRef = React.useRef(isSelected); | ||
React.useEffect(() => { | ||
const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false); | ||
return () => cancelAnimationFrame(rAF); | ||
}, []); | ||
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || isSelected, children: ({ present }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
import_react_primitive.Primitive.div, | ||
{ | ||
"data-state": isSelected ? "active" : "inactive", | ||
"data-orientation": context.orientation, | ||
role: "tabpanel", | ||
"aria-labelledby": triggerId, | ||
hidden: !present, | ||
id: contentId, | ||
tabIndex: 0, | ||
...contentProps, | ||
ref: forwardedRef, | ||
style: { | ||
...props.style, | ||
animationDuration: isMountAnimationPreventedRef.current ? "0s" : void 0 | ||
}, | ||
children: present && children | ||
} | ||
) }); | ||
} | ||
); | ||
TabsContent.displayName = CONTENT_NAME; | ||
function makeTriggerId(baseId, value) { | ||
return `${baseId}-trigger-${value}`; | ||
} | ||
function makeContentId(baseId, value) { | ||
return `${baseId}-content-${value}`; | ||
} | ||
var Root2 = Tabs; | ||
var List = TabsList; | ||
var Trigger = TabsTrigger; | ||
var Content = TabsContent; | ||
//# sourceMappingURL=index.js.map |
{ | ||
"name": "@radix-ui/react-tabs", | ||
"version": "1.1.0-rc.2", | ||
"version": "1.1.0-rc.3", | ||
"license": "MIT", | ||
@@ -31,10 +31,10 @@ "exports": { | ||
"dependencies": { | ||
"@radix-ui/primitive": "1.1.0-rc.2", | ||
"@radix-ui/react-context": "1.1.0-rc.2", | ||
"@radix-ui/react-direction": "1.1.0-rc.2", | ||
"@radix-ui/react-id": "1.1.0-rc.2", | ||
"@radix-ui/react-presence": "1.1.0-rc.2", | ||
"@radix-ui/react-primitive": "1.1.0-rc.2", | ||
"@radix-ui/react-roving-focus": "1.1.0-rc.2", | ||
"@radix-ui/react-use-controllable-state": "1.1.0-rc.2" | ||
"@radix-ui/primitive": "1.1.0-rc.3", | ||
"@radix-ui/react-context": "1.1.0-rc.3", | ||
"@radix-ui/react-direction": "1.1.0-rc.3", | ||
"@radix-ui/react-id": "1.1.0-rc.3", | ||
"@radix-ui/react-presence": "1.1.0-rc.3", | ||
"@radix-ui/react-primitive": "1.1.0-rc.3", | ||
"@radix-ui/react-roving-focus": "1.1.0-rc.3", | ||
"@radix-ui/react-use-controllable-state": "1.1.0-rc.3" | ||
}, | ||
@@ -41,0 +41,0 @@ "peerDependencies": { |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
51028
491
0
+ Added@radix-ui/primitive@1.1.0-rc.3(transitive)
+ Added@radix-ui/react-collection@1.1.0-rc.3(transitive)
+ Added@radix-ui/react-compose-refs@1.1.0-rc.3(transitive)
+ Added@radix-ui/react-context@1.1.0-rc.3(transitive)
+ Added@radix-ui/react-direction@1.1.0-rc.3(transitive)
+ Added@radix-ui/react-id@1.1.0-rc.3(transitive)
+ Added@radix-ui/react-presence@1.1.0-rc.3(transitive)
+ Added@radix-ui/react-primitive@1.1.0-rc.3(transitive)
+ Added@radix-ui/react-roving-focus@1.1.0-rc.3(transitive)
+ Added@radix-ui/react-slot@1.1.0-rc.3(transitive)
+ Added@radix-ui/react-use-callback-ref@1.1.0-rc.3(transitive)
+ Added@radix-ui/react-use-controllable-state@1.1.0-rc.3(transitive)
+ Added@radix-ui/react-use-layout-effect@1.1.0-rc.3(transitive)
- Removed@radix-ui/primitive@1.1.0-rc.2(transitive)
- Removed@radix-ui/react-collection@1.1.0-rc.2(transitive)
- Removed@radix-ui/react-compose-refs@1.1.0-rc.2(transitive)
- Removed@radix-ui/react-context@1.1.0-rc.2(transitive)
- Removed@radix-ui/react-direction@1.1.0-rc.2(transitive)
- Removed@radix-ui/react-id@1.1.0-rc.2(transitive)
- Removed@radix-ui/react-presence@1.1.0-rc.2(transitive)
- Removed@radix-ui/react-primitive@1.1.0-rc.2(transitive)
- Removed@radix-ui/react-roving-focus@1.1.0-rc.2(transitive)
- Removed@radix-ui/react-slot@1.1.0-rc.2(transitive)
- Removed@radix-ui/react-use-callback-ref@1.1.0-rc.2(transitive)
- Removed@radix-ui/react-use-controllable-state@1.1.0-rc.2(transitive)
- Removed@radix-ui/react-use-layout-effect@1.1.0-rc.2(transitive)