@radix-ui/react-tabs 0.1.6-rc.8 → 0.2.0-rc.2

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.
Files changed (7) hide show
  1. package/dist/index.d.ts +5 -0
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +31 -15
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.module.js +32 -16
  6. package/dist/index.module.js.map +1 -1
  7. package/package.json +10 -8
package/dist/index.d.ts CHANGED
@@ -40,6 +40,11 @@ export interface TabsTriggerProps extends PrimitiveButtonProps {
40
40
  export const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
41
41
  export interface TabsContentProps extends PrimitiveDivProps {
42
42
  value: string;
43
+ /**
44
+ * Used to force mounting when more control is needed. Useful when
45
+ * controlling animation with React animation libraries.
46
+ */
47
+ forceMount?: true;
43
48
  }
44
49
  export const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
45
50
  export const Root: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;AAoBA,OAAA,sFAEE,CAAC;AAeH,6BAA6B,MAAM,wBAAwB,CAAC,OAAO,iBAAiB,IAAI,CAAC,CAAC;AAC1F,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,0BAAoB,SAAQ,iBAAiB;IAC3C,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IACnD;;OAEG;IACH,GAAG,CAAC,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAC;IACnC;;;SAGK;IACL,cAAc,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;CACzC;AAED,OAAA,MAAM,sFAsCL,CAAC;AAWF,8BAAwB,SAAQ,iBAAiB;IAC/C,IAAI,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;CACtC;AAED,OAAA,MAAM,8FAsBL,CAAC;AAWF,4BAA4B,MAAM,wBAAwB,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC;AACpF,iCAA2B,SAAQ,oBAAoB;IACrD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,OAAA,MAAM,uGAmDL,CAAC;AAWF,iCAA2B,SAAQ,iBAAiB;IAClD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,OAAA,MAAM,oGAuBL,CAAC;AAcF,OAAA,MAAM,sFAAW,CAAC;AAClB,OAAA,MAAM,0FAAe,CAAC;AACtB,OAAA,MAAM,mGAAqB,CAAC;AAC5B,OAAA,MAAM,gGAAqB,CAAC","sources":["packages/react/tabs/src/packages/react/tabs/src/Tabs.tsx","packages/react/tabs/src/packages/react/tabs/src/index.ts","packages/react/tabs/src/index.ts"],"sourcesContent":[null,null,"export * from './Tabs';\n"],"names":[],"version":3,"file":"index.d.ts.map"}
1
+ {"mappings":";;;;AAqBA,OAAA,sFAEE,CAAC;AAeH,6BAA6B,MAAM,wBAAwB,CAAC,OAAO,iBAAiB,IAAI,CAAC,CAAC;AAC1F,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,0BAAoB,SAAQ,iBAAiB;IAC3C,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IACnD;;OAEG;IACH,GAAG,CAAC,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAC;IACnC;;;SAGK;IACL,cAAc,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;CACzC;AAED,OAAA,MAAM,sFAsCL,CAAC;AAWF,8BAAwB,SAAQ,iBAAiB;IAC/C,IAAI,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;CACtC;AAED,OAAA,MAAM,8FAsBL,CAAC;AAWF,4BAA4B,MAAM,wBAAwB,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC;AACpF,iCAA2B,SAAQ,oBAAoB;IACrD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,OAAA,MAAM,uGAmDL,CAAC;AAWF,iCAA2B,SAAQ,iBAAiB;IAClD,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAED,OAAA,MAAM,oGAsCL,CAAC;AAcF,OAAA,MAAM,sFAAW,CAAC;AAClB,OAAA,MAAM,0FAAe,CAAC;AACtB,OAAA,MAAM,mGAAqB,CAAC;AAC5B,OAAA,MAAM,gGAAqB,CAAC","sources":["packages/react/tabs/src/packages/react/tabs/src/Tabs.tsx","packages/react/tabs/src/packages/react/tabs/src/index.ts","packages/react/tabs/src/index.ts"],"sourcesContent":[null,null,"export * from './Tabs';\n"],"names":[],"version":3,"file":"index.d.ts.map"}
package/dist/index.js CHANGED
@@ -2,11 +2,12 @@ var $8oLOM$babelruntimehelpersextends = require("@babel/runtime/helpers/extends"
2
2
  var $8oLOM$react = require("react");
3
3
  var $8oLOM$radixuiprimitive = require("@radix-ui/primitive");
4
4
  var $8oLOM$radixuireactcontext = require("@radix-ui/react-context");
5
- var $8oLOM$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state");
6
- var $8oLOM$radixuireactprimitive = require("@radix-ui/react-primitive");
7
5
  var $8oLOM$radixuireactrovingfocus = require("@radix-ui/react-roving-focus");
8
- var $8oLOM$radixuireactid = require("@radix-ui/react-id");
6
+ var $8oLOM$radixuireactpresence = require("@radix-ui/react-presence");
7
+ var $8oLOM$radixuireactprimitive = require("@radix-ui/react-primitive");
9
8
  var $8oLOM$radixuireactdirection = require("@radix-ui/react-direction");
9
+ var $8oLOM$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state");
10
+ var $8oLOM$radixuireactid = require("@radix-ui/react-id");
10
11
 
11
12
  function $parcel$exportWildcard(dest, source) {
12
13
  Object.keys(source).forEach(function(key) {
@@ -51,6 +52,7 @@ $parcel$export($2bbff03427f8eaee$exports, "Content", () => $2bbff03427f8eaee$exp
51
52
 
52
53
 
53
54
 
55
+
54
56
  /* -------------------------------------------------------------------------------------------------
55
57
  * Tabs
56
58
  * -----------------------------------------------------------------------------------------------*/ const $2bbff03427f8eaee$var$TABS_NAME = 'Tabs';
@@ -162,22 +164,36 @@ const $2bbff03427f8eaee$export$8114b9fdfdf9f3ba = /*#__PURE__*/ $8oLOM$react.for
162
164
  * TabsContent
163
165
  * -----------------------------------------------------------------------------------------------*/ const $2bbff03427f8eaee$var$CONTENT_NAME = 'TabsContent';
164
166
  const $2bbff03427f8eaee$export$bd905d70e8fd2ebb = /*#__PURE__*/ $8oLOM$react.forwardRef((props, forwardedRef)=>{
165
- const { __scopeTabs: __scopeTabs , value: value , children: children , ...contentProps } = props;
167
+ const { __scopeTabs: __scopeTabs , value: value , forceMount: forceMount , children: children , ...contentProps } = props;
166
168
  const context = $2bbff03427f8eaee$var$useTabsContext($2bbff03427f8eaee$var$CONTENT_NAME, __scopeTabs);
167
169
  const triggerId = $2bbff03427f8eaee$var$makeTriggerId(context.baseId, value);
168
170
  const contentId = $2bbff03427f8eaee$var$makeContentId(context.baseId, value);
169
171
  const isSelected = value === context.value;
170
- return /*#__PURE__*/ $8oLOM$react.createElement($8oLOM$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($8oLOM$babelruntimehelpersextends))({
171
- "data-state": isSelected ? 'active' : 'inactive',
172
- "data-orientation": context.orientation,
173
- role: "tabpanel",
174
- "aria-labelledby": triggerId,
175
- hidden: !isSelected,
176
- id: contentId,
177
- tabIndex: 0
178
- }, contentProps, {
179
- ref: forwardedRef
180
- }), isSelected && children);
172
+ const isMountAnimationPreventedRef = $8oLOM$react.useRef(isSelected);
173
+ $8oLOM$react.useEffect(()=>{
174
+ const rAF = requestAnimationFrame(()=>isMountAnimationPreventedRef.current = false
175
+ );
176
+ return ()=>cancelAnimationFrame(rAF)
177
+ ;
178
+ }, []);
179
+ return /*#__PURE__*/ $8oLOM$react.createElement($8oLOM$radixuireactpresence.Presence, {
180
+ present: forceMount || isSelected
181
+ }, ({ present: present })=>/*#__PURE__*/ $8oLOM$react.createElement($8oLOM$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($8oLOM$babelruntimehelpersextends))({
182
+ "data-state": isSelected ? 'active' : 'inactive',
183
+ "data-orientation": context.orientation,
184
+ role: "tabpanel",
185
+ "aria-labelledby": triggerId,
186
+ hidden: !present,
187
+ id: contentId,
188
+ tabIndex: 0
189
+ }, contentProps, {
190
+ ref: forwardedRef,
191
+ style: {
192
+ ...props.style,
193
+ animationDuration: isMountAnimationPreventedRef.current ? '0s' : undefined
194
+ }
195
+ }), present && children)
196
+ );
181
197
  });
182
198
  /*#__PURE__*/ Object.assign($2bbff03427f8eaee$export$bd905d70e8fd2ebb, {
183
199
  displayName: $2bbff03427f8eaee$var$CONTENT_NAME
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/react/tabs/src/index.ts","packages/react/tabs/src/Tabs.tsx"],"sourcesContent":["export * from './Tabs';\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { useId } from '@radix-ui/react-id';\nimport { useDirection } from '@radix-ui/react-direction';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs';\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope };\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype TabsContextValue = {\n baseId: string;\n value?: string;\n onValueChange: (value: string) => void;\n orientation?: TabsProps['orientation'];\n dir?: TabsProps['dir'];\n activationMode?: TabsProps['activationMode'];\n};\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME);\n\ntype TabsElement = React.ElementRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = Radix.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface TabsProps extends PrimitiveDivProps {\n /** The value for the selected tab, if controlled */\n value?: string;\n /** The value of the tab to select by default, if uncontrolled */\n defaultValue?: string;\n /** A function called when a new tab is selected */\n onValueChange?: (value: string) => void;\n /**\n * The orientation the tabs are layed out.\n * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n * @defaultValue horizontal\n */\n orientation?: RovingFocusGroupProps['orientation'];\n /**\n * The direction of navigation between toolbar items.\n */\n dir?: RovingFocusGroupProps['dir'];\n /**\n * Whether a tab is activated automatically or manually.\n * @defaultValue automatic\n * */\n activationMode?: 'automatic' | 'manual';\n}\n\nconst Tabs = React.forwardRef<TabsElement, TabsProps>(\n (props: ScopedProps<TabsProps>, forwardedRef) => {\n const {\n __scopeTabs,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir,\n activationMode = 'automatic',\n ...tabsProps\n } = props;\n const direction = useDirection(dir);\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onValueChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n >\n <Primitive.div\n dir={direction}\n data-orientation={orientation}\n {...tabsProps}\n ref={forwardedRef}\n />\n </TabsProvider>\n );\n }\n);\n\nTabs.displayName = TABS_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList';\n\ntype TabsListElement = React.ElementRef<typeof Primitive.div>;\ninterface TabsListProps extends PrimitiveDivProps {\n loop?: RovingFocusGroupProps['loop'];\n}\n\nconst TabsList = React.forwardRef<TabsListElement, TabsListProps>(\n (props: ScopedProps<TabsListProps>, forwardedRef) => {\n const { __scopeTabs, loop = true, ...listProps } = props;\n const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n return (\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={context.orientation}\n dir={context.dir}\n loop={loop}\n >\n <Primitive.div\n role=\"tablist\"\n aria-orientation={context.orientation}\n {...listProps}\n ref={forwardedRef}\n />\n </RovingFocusGroup.Root>\n );\n }\n);\n\nTabsList.displayName = TAB_LIST_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger';\n\ntype TabsTriggerElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface TabsTriggerProps extends PrimitiveButtonProps {\n value: string;\n}\n\nconst TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(\n (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n const { __scopeTabs, value, disabled = false, ...triggerProps } = props;\n const context = useTabsContext(TRIGGER_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n return (\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <Primitive.button\n type=\"button\"\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n {...triggerProps}\n ref={forwardedRef}\n onMouseDown={composeEventHandlers(props.onMouseDown, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n if (!disabled && event.button === 0 && event.ctrlKey === false) {\n context.onValueChange(value);\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault();\n }\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if ([' ', 'Enter'].includes(event.key)) context.onValueChange(value);\n })}\n onFocus={composeEventHandlers(props.onFocus, () => {\n // handle \"automatic\" activation if necessary\n // ie. activate tab following focus\n const isAutomaticActivation = context.activationMode !== 'manual';\n if (!isSelected && !disabled && isAutomaticActivation) {\n context.onValueChange(value);\n }\n })}\n />\n </RovingFocusGroup.Item>\n );\n }\n);\n\nTabsTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent';\n\ntype TabsContentElement = React.ElementRef<typeof Primitive.div>;\ninterface TabsContentProps extends PrimitiveDivProps {\n value: string;\n}\n\nconst TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(\n (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n const { __scopeTabs, value, children, ...contentProps } = props;\n const context = useTabsContext(CONTENT_NAME, __scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n return (\n <Primitive.div\n data-state={isSelected ? 'active' : 'inactive'}\n data-orientation={context.orientation}\n role=\"tabpanel\"\n aria-labelledby={triggerId}\n hidden={!isSelected}\n id={contentId}\n tabIndex={0}\n {...contentProps}\n ref={forwardedRef}\n >\n {isSelected && children}\n </Primitive.div>\n );\n }\n);\n\nTabsContent.displayName = CONTENT_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n return `${baseId}-trigger-${value}`;\n}\n\nfunction makeContentId(baseId: string, value: string) {\n return `${baseId}-content-${value}`;\n}\n\nconst Root = Tabs;\nconst List = TabsList;\nconst Trigger = TabsTrigger;\nconst Content = TabsContent;\n\nexport {\n createTabsScope,\n //\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n //\n Root,\n List,\n Trigger,\n Content,\n};\nexport type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };\n"],"names":["React","composeEventHandlers","createContextScope","useControllableState","Primitive","RovingFocusGroup","createRovingFocusGroupScope","useId","useDirection","TABS_NAME","createTabsContext","createTabsScope","useRovingFocusGroupScope","TabsProvider","useTabsContext","Tabs","forwardRef","props","forwardedRef","__scopeTabs","value","valueProp","onValueChange","defaultValue","orientation","dir","activationMode","tabsProps","direction","setValue","prop","onChange","defaultProp","TAB_LIST_NAME","TabsList","loop","listProps","context","rovingFocusGroupScope","TRIGGER_NAME","TabsTrigger","disabled","triggerProps","triggerId","makeTriggerId","baseId","contentId","makeContentId","isSelected","undefined","onMouseDown","event","button","ctrlKey","preventDefault","onKeyDown","includes","key","onFocus","isAutomaticActivation","CONTENT_NAME","TabsContent","children","contentProps","Root","List","Trigger","Content"],"version":3,"file":"index.js.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;A;;;;;;;;;;;ACcA;;oGAEA,CAEA,MAAMU,+BAAS,GAAG,MAAlB,AAAA;AAGA,MAAM,CAACC,uCAAD,EAAoBC,yCAApB,CAAA,GAAuCV,6CAAkB,CAACQ,+BAAD,EAAY;IACzEP,0DADyE;CAAZ,CAA/D,AAAA;AAGA,MAAMU,8CAAwB,GAAGV,0DAA2B,EAA5D,AAAA;AAWA,MAAM,CAACW,kCAAD,EAAeC,oCAAf,CAAA,GAAiCJ,uCAAiB,CAAmBD,+BAAnB,CAAxD,AAAA;AA6BA,MAAMM,yCAAI,GAAA,aAAGhB,CAAAA,uBAAA,CACX,CAACkB,KAAD,EAAgCC,YAAhC,GAAiD;IAC/C,MAAM,E,aACJC,WADI,CAAA,EAEJC,KAAK,EAAEC,SAFH,CAAA,E,eAGJC,aAHI,CAAA,E,cAIJC,YAJI,CAAA,eAKJC,WAAW,GAAG,YALV,G,KAMJC,GANI,CAAA,kBAOJC,cAAc,GAAG,WAPb,GAQJ,GAAGC,SAAH,EARI,GASFV,KATJ,AAAM;IAUN,MAAMW,SAAS,GAAGtB,yCAAY,CAACmB,GAAD,CAA9B,AAAA;IACA,MAAM,CAACL,KAAD,EAAQS,QAAR,CAAA,GAAoBtB,4DAAoB,CAAC;QAC7CuB,IAAI,EAAET,SADuC;QAE7CU,QAAQ,EAAET,aAFmC;QAG7CU,WAAW,EAAET,YAAbS;KAH4C,CAA9C,AAA+C;IAM/C,OAAA,aACE,CAAA,0BAAA,CAAC,kCAAD,EADF;QAEI,KAAK,EAAEb,WADT;QAEE,MAAM,EAAEX,2BAAK,EAFf;QAGE,KAAK,EAAEY,KAHT;QAIE,aAAa,EAAES,QAJjB;QAKE,WAAW,EAAEL,WALf;QAME,GAAG,EAAEI,SANP;QAOE,cAAc,EAAEF,cAAhB;KAPF,EAAA,aASE,CAAA,0BAAA,CAAC,sCAAD,CAAW,GAAX,EATF,2DAAA,CAAA;QAUI,GAAG,EAAEE,SADP;QAEE,kBAAA,EAAkBJ,WAAlB;KAFF,EAGMG,SAHN,EAAA;QAIE,GAAG,EAAET,YAAL;KAJF,CAAA,CATF,CADF,CAUI;CA7BK,CAAb,AAqCG;AAGH,aAAA,CAAA,MAAA,CAAA,MAAA,CAAA,yCAAA,EAAA;IAAA,WAAA,EAAA,+BAAA;CAAA,CAAA,CAAA;AAEA;;oGAEA,CAEA,MAAMe,mCAAa,GAAG,UAAtB,AAAA;AAOA,MAAMC,yCAAQ,GAAA,aAAGnC,CAAAA,uBAAA,CACf,CAACkB,KAAD,EAAoCC,YAApC,GAAqD;IACnD,MAAM,E,aAAEC,WAAF,CAAA,QAAegB,IAAI,GAAG,IAAtB,GAA4B,GAAGC,SAAH,EAA5B,GAA6CnB,KAAnD,AAAM;IACN,MAAMoB,OAAO,GAAGvB,oCAAc,CAACmB,mCAAD,EAAgBd,WAAhB,CAA9B,AAAA;IACA,MAAMmB,qBAAqB,GAAG1B,8CAAwB,CAACO,WAAD,CAAtD,AAAA;IACA,OAAA,aACE,CAAA,0BAAA,CAAC,mCAAD,EADF,2DAAA,CAAA;QAEI,OAAO,EAAP,IAAA;KADF,EAEMmB,qBAFN,EAAA;QAGE,WAAW,EAAED,OAAO,CAACb,WAHvB;QAIE,GAAG,EAAEa,OAAO,CAACZ,GAJf;QAKE,IAAI,EAAEU,IAAN;KALF,CAAA,EAAA,aAOE,CAAA,0BAAA,CAAC,sCAAD,CAAW,GAAX,EAPF,2DAAA,CAAA;QAQI,IAAI,EAAC,SADP;QAEE,kBAAA,EAAkBE,OAAO,CAACb,WAA1B;KAFF,EAGMY,SAHN,EAAA;QAIE,GAAG,EAAElB,YAAL;KAJF,CAAA,CAPF,CADF,CAQI;CAbS,CAAjB,AAqBG;AAGH,aAAA,CAAA,MAAA,CAAA,MAAA,CAAA,yCAAA,EAAA;IAAA,WAAA,EAAA,mCAAA;CAAA,CAAA,CAAA;AAEA;;oGAEA,CAEA,MAAMqB,kCAAY,GAAG,aAArB,AAAA;AAQA,MAAMC,yCAAW,GAAA,aAAGzC,CAAAA,uBAAA,CAClB,CAACkB,KAAD,EAAuCC,YAAvC,GAAwD;IACtD,MAAM,E,aAAEC,WAAF,CAAA,E,OAAeC,KAAf,CAAA,YAAsBqB,QAAQ,GAAG,KAAjC,GAAwC,GAAGC,YAAH,EAAxC,GAA4DzB,KAAlE,AAAM;IACN,MAAMoB,OAAO,GAAGvB,oCAAc,CAACyB,kCAAD,EAAepB,WAAf,CAA9B,AAAA;IACA,MAAMmB,qBAAqB,GAAG1B,8CAAwB,CAACO,WAAD,CAAtD,AAAA;IACA,MAAMwB,SAAS,GAAGC,mCAAa,CAACP,OAAO,CAACQ,MAAT,EAAiBzB,KAAjB,CAA/B,AAAA;IACA,MAAM0B,SAAS,GAAGC,mCAAa,CAACV,OAAO,CAACQ,MAAT,EAAiBzB,KAAjB,CAA/B,AAAA;IACA,MAAM4B,UAAU,GAAG5B,KAAK,KAAKiB,OAAO,CAACjB,KAArC,AAAA;IACA,OAAA,aACE,CAAA,0BAAA,CAAC,mCAAD,EADF,2DAAA,CAAA;QAEI,OAAO,EAAP,IAAA;KADF,EAEMkB,qBAFN,EAAA;QAGE,SAAS,EAAE,CAACG,QAHd;QAIE,MAAM,EAAEO,UAAR;KAJF,CAAA,EAAA,aAME,CAAA,0BAAA,CAAC,sCAAD,CAAW,MAAX,EANF,2DAAA,CAAA;QAOI,IAAI,EAAC,QADP;QAEE,IAAI,EAAC,KAFP;QAGE,eAAA,EAAeA,UAHjB;QAIE,eAAA,EAAeF,SAJjB;QAKE,YAAA,EAAYE,UAAU,GAAG,QAAH,GAAc,UALtC;QAME,eAAA,EAAeP,QAAQ,GAAG,EAAH,GAAQQ,SANjC;QAOE,QAAQ,EAAER,QAPZ;QAQE,EAAE,EAAEE,SAAJ;KARF,EASMD,YATN,EAAA;QAUE,GAAG,EAAExB,YAVP;QAWE,WAAW,EAAElB,4CAAoB,CAACiB,KAAK,CAACiC,WAAP,EAAqBC,CAAAA,KAAD,GAAW;YAC9D,4FAAA;YACA,uEAAA;YACA,IAAI,CAACV,QAAD,IAAaU,KAAK,CAACC,MAAN,KAAiB,CAA9B,IAAmCD,KAAK,CAACE,OAAN,KAAkB,KAAzD,EACEhB,OAAO,CAACf,aAAR,CAAsBF,KAAtB,CAAAiB,CAAAA;iBAEA,+CAAA;YACAc,KAAK,CAACG,cAAN,EAAAH,CAAAA;SAP6B,CAXnC;QAqBE,SAAS,EAAEnD,4CAAoB,CAACiB,KAAK,CAACsC,SAAP,EAAmBJ,CAAAA,KAAD,GAAW;YAC1D,IAAI;gBAAC,GAAD;gBAAM,OAAN;aAAA,CAAeK,QAAf,CAAwBL,KAAK,CAACM,GAA9B,CAAJ,EAAwCpB,OAAO,CAACf,aAAR,CAAsBF,KAAtB,CAAxC,CAAA;SAD6B,CArBjC;QAwBE,OAAO,EAAEpB,4CAAoB,CAACiB,KAAK,CAACyC,OAAP,EAAgB,IAAM;YACjD,6CAAA;YACA,mCAAA;YACA,MAAMC,qBAAqB,GAAGtB,OAAO,CAACX,cAAR,KAA2B,QAAzD,AAAA;YACA,IAAI,CAACsB,UAAD,IAAe,CAACP,QAAhB,IAA4BkB,qBAAhC,EACEtB,OAAO,CAACf,aAAR,CAAsBF,KAAtB,CAAAiB,CAAAA;SALyB,CAO5B;KA/BH,CAAA,CANF,CADF,CAOI;CAfY,CAApB,AAkDG;AAGH,aAAA,CAAA,MAAA,CAAA,MAAA,CAAA,yCAAA,EAAA;IAAA,WAAA,EAAA,kCAAA;CAAA,CAAA,CAAA;AAEA;;oGAEA,CAEA,MAAMuB,kCAAY,GAAG,aAArB,AAAA;AAaA,MAAMC,yCAAW,GAAA,aAAG9D,CAAAA,uBAAA,CAClB,CAACkB,KAAD,EAAuCC,YAAvC,GAAwD;IACtD,MAAM,E,aAAEC,WAAF,CAAA,E,OAAeC,KAAf,CAAA,E,YAAsB0C,UAAtB,CAAA,E,UAAkCC,QAAlC,CAAA,EAA4C,GAAGC,YAAH,EAA5C,GAAgE/C,KAAtE,AAAM;IACN,MAAMoB,OAAO,GAAGvB,oCAAc,CAAC8C,kCAAD,EAAezC,WAAf,CAA9B,AAAA;IACA,MAAMwB,SAAS,GAAGC,mCAAa,CAACP,OAAO,CAACQ,MAAT,EAAiBzB,KAAjB,CAA/B,AAAA;IACA,MAAM0B,SAAS,GAAGC,mCAAa,CAACV,OAAO,CAACQ,MAAT,EAAiBzB,KAAjB,CAA/B,AAAA;IACA,MAAM4B,UAAU,GAAG5B,KAAK,KAAKiB,OAAO,CAACjB,KAArC,AAAA;IACA,MAAM6C,4BAA4B,GAAGlE,mBAAA,CAAaiD,UAAb,CAArC,AAAA;IAEAjD,sBAAA,CAAgB,IAAM;QACpB,MAAMqE,GAAG,GAAGC,qBAAqB,CAAC,IAAOJ,4BAA4B,CAACK,OAA7B,GAAuC,KAA/C;QAAA,CAAjC,AAAA;QACA,OAAO,IAAMC,oBAAoB,CAACH,GAAD,CAAjC;QAAA,CAAA;KAFF,EAGG,EAHH,CAGC,CAAA;IAED,OAAA,aACE,CAAA,0BAAA,CAAC,oCAAD,EADF;QACY,OAAO,EAAEN,UAAU,IAAId,UAAvB;KAAV,EACG,CAAC,E,SAAEwB,OAAAA,CAAAA,EAAH,GAAA,aACC,CAAA,0BAAA,CAAC,sCAAD,CAAW,GAAX,EADA,2DAAA,CAAA;YAEE,YAAA,EAAYxB,UAAU,GAAG,QAAH,GAAc,UADtC;YAEE,kBAAA,EAAkBX,OAAO,CAACb,WAF5B;YAGE,IAAI,EAAC,UAHP;YAIE,iBAAA,EAAiBmB,SAJnB;YAKE,MAAM,EAAE,CAAC6B,OALX;YAME,EAAE,EAAE1B,SANN;YAOE,QAAQ,EAAE,CAAV;SAPF,EAQMkB,YARN,EAAA;YASE,GAAG,EAAE9C,YATP;YAUE,KAAK,EAAE;gBACL,GAAGD,KAAK,CAACwD,KADJ;gBAELC,iBAAiB,EAAET,4BAA4B,CAACK,OAA7B,GAAuC,IAAvC,GAA8CrB,SAAjEyB;aAFK;SAVT,CAAA,EAeGF,OAAO,IAAIT,QAfd,CAFJ;IAAA,CADF,CAGM;CAjBU,CAApB,AAqCG;AAGH,aAAA,CAAA,MAAA,CAAA,MAAA,CAAA,yCAAA,EAAA;IAAA,WAAA,EAAA,kCAAA;CAAA,CAAA,CAAA;AAEA,oGAAA,CAEA,SAASnB,mCAAT,CAAuBC,MAAvB,EAAuCzB,KAAvC,EAAsD;IACpD,OAAQ,CAAA,EAAEyB,MAAO,CAAA,SAAA,EAAWzB,KAAM,CAAA,CAAlC,CAAA;CACD;AAED,SAAS2B,mCAAT,CAAuBF,MAAvB,EAAuCzB,KAAvC,EAAsD;IACpD,OAAQ,CAAA,EAAEyB,MAAO,CAAA,SAAA,EAAWzB,KAAM,CAAA,CAAlC,CAAA;CACD;AAED,MAAMuD,yCAAI,GAAG5D,yCAAb,AAAA;AACA,MAAM6D,yCAAI,GAAG1C,yCAAb,AAAA;AACA,MAAM2C,yCAAO,GAAGrC,yCAAhB,AAAA;AACA,MAAMsC,yCAAO,GAAGjB,yCAAhB,AAAA;;AD1RA","sources":["packages/react/tabs/src/index.ts","packages/react/tabs/src/Tabs.tsx"],"sourcesContent":["export * from './Tabs';\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useId } from '@radix-ui/react-id';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs';\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope };\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype TabsContextValue = {\n baseId: string;\n value?: string;\n onValueChange: (value: string) => void;\n orientation?: TabsProps['orientation'];\n dir?: TabsProps['dir'];\n activationMode?: TabsProps['activationMode'];\n};\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME);\n\ntype TabsElement = React.ElementRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = Radix.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface TabsProps extends PrimitiveDivProps {\n /** The value for the selected tab, if controlled */\n value?: string;\n /** The value of the tab to select by default, if uncontrolled */\n defaultValue?: string;\n /** A function called when a new tab is selected */\n onValueChange?: (value: string) => void;\n /**\n * The orientation the tabs are layed out.\n * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n * @defaultValue horizontal\n */\n orientation?: RovingFocusGroupProps['orientation'];\n /**\n * The direction of navigation between toolbar items.\n */\n dir?: RovingFocusGroupProps['dir'];\n /**\n * Whether a tab is activated automatically or manually.\n * @defaultValue automatic\n * */\n activationMode?: 'automatic' | 'manual';\n}\n\nconst Tabs = React.forwardRef<TabsElement, TabsProps>(\n (props: ScopedProps<TabsProps>, forwardedRef) => {\n const {\n __scopeTabs,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir,\n activationMode = 'automatic',\n ...tabsProps\n } = props;\n const direction = useDirection(dir);\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onValueChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n >\n <Primitive.div\n dir={direction}\n data-orientation={orientation}\n {...tabsProps}\n ref={forwardedRef}\n />\n </TabsProvider>\n );\n }\n);\n\nTabs.displayName = TABS_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList';\n\ntype TabsListElement = React.ElementRef<typeof Primitive.div>;\ninterface TabsListProps extends PrimitiveDivProps {\n loop?: RovingFocusGroupProps['loop'];\n}\n\nconst TabsList = React.forwardRef<TabsListElement, TabsListProps>(\n (props: ScopedProps<TabsListProps>, forwardedRef) => {\n const { __scopeTabs, loop = true, ...listProps } = props;\n const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n return (\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={context.orientation}\n dir={context.dir}\n loop={loop}\n >\n <Primitive.div\n role=\"tablist\"\n aria-orientation={context.orientation}\n {...listProps}\n ref={forwardedRef}\n />\n </RovingFocusGroup.Root>\n );\n }\n);\n\nTabsList.displayName = TAB_LIST_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger';\n\ntype TabsTriggerElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface TabsTriggerProps extends PrimitiveButtonProps {\n value: string;\n}\n\nconst TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(\n (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n const { __scopeTabs, value, disabled = false, ...triggerProps } = props;\n const context = useTabsContext(TRIGGER_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n return (\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <Primitive.button\n type=\"button\"\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n {...triggerProps}\n ref={forwardedRef}\n onMouseDown={composeEventHandlers(props.onMouseDown, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n if (!disabled && event.button === 0 && event.ctrlKey === false) {\n context.onValueChange(value);\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault();\n }\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if ([' ', 'Enter'].includes(event.key)) context.onValueChange(value);\n })}\n onFocus={composeEventHandlers(props.onFocus, () => {\n // handle \"automatic\" activation if necessary\n // ie. activate tab following focus\n const isAutomaticActivation = context.activationMode !== 'manual';\n if (!isSelected && !disabled && isAutomaticActivation) {\n context.onValueChange(value);\n }\n })}\n />\n </RovingFocusGroup.Item>\n );\n }\n);\n\nTabsTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent';\n\ntype TabsContentElement = React.ElementRef<typeof Primitive.div>;\ninterface TabsContentProps extends PrimitiveDivProps {\n value: string;\n\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(\n (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n const { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n const context = useTabsContext(CONTENT_NAME, __scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n const isMountAnimationPreventedRef = React.useRef(isSelected);\n\n React.useEffect(() => {\n const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));\n return () => cancelAnimationFrame(rAF);\n }, []);\n\n return (\n <Presence present={forceMount || isSelected}>\n {({ present }) => (\n <Primitive.div\n data-state={isSelected ? 'active' : 'inactive'}\n data-orientation={context.orientation}\n role=\"tabpanel\"\n aria-labelledby={triggerId}\n hidden={!present}\n id={contentId}\n tabIndex={0}\n {...contentProps}\n ref={forwardedRef}\n style={{\n ...props.style,\n animationDuration: isMountAnimationPreventedRef.current ? '0s' : undefined,\n }}\n >\n {present && children}\n </Primitive.div>\n )}\n </Presence>\n );\n }\n);\n\nTabsContent.displayName = CONTENT_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n return `${baseId}-trigger-${value}`;\n}\n\nfunction makeContentId(baseId: string, value: string) {\n return `${baseId}-content-${value}`;\n}\n\nconst Root = Tabs;\nconst List = TabsList;\nconst Trigger = TabsTrigger;\nconst Content = TabsContent;\n\nexport {\n createTabsScope,\n //\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n //\n Root,\n List,\n Trigger,\n Content,\n};\nexport type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };\n"],"names":["React","composeEventHandlers","createContextScope","createRovingFocusGroupScope","Presence","Primitive","RovingFocusGroup","useDirection","useControllableState","useId","TABS_NAME","createTabsContext","createTabsScope","useRovingFocusGroupScope","TabsProvider","useTabsContext","Tabs","forwardRef","props","forwardedRef","__scopeTabs","value","valueProp","onValueChange","defaultValue","orientation","dir","activationMode","tabsProps","direction","setValue","prop","onChange","defaultProp","TAB_LIST_NAME","TabsList","loop","listProps","context","rovingFocusGroupScope","TRIGGER_NAME","TabsTrigger","disabled","triggerProps","triggerId","makeTriggerId","baseId","contentId","makeContentId","isSelected","undefined","onMouseDown","event","button","ctrlKey","preventDefault","onKeyDown","includes","key","onFocus","isAutomaticActivation","CONTENT_NAME","TabsContent","forceMount","children","contentProps","isMountAnimationPreventedRef","useRef","useEffect","rAF","requestAnimationFrame","current","cancelAnimationFrame","present","style","animationDuration","Root","List","Trigger","Content"],"version":3,"file":"index.js.map"}
package/dist/index.module.js CHANGED
@@ -1,12 +1,13 @@
1
1
  import $1IHzk$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
2
- import {forwardRef as $1IHzk$forwardRef, createElement as $1IHzk$createElement} from "react";
2
+ import {forwardRef as $1IHzk$forwardRef, createElement as $1IHzk$createElement, useRef as $1IHzk$useRef, useEffect as $1IHzk$useEffect} from "react";
3
3
  import {composeEventHandlers as $1IHzk$composeEventHandlers} from "@radix-ui/primitive";
4
4
  import {createContextScope as $1IHzk$createContextScope} from "@radix-ui/react-context";
5
- import {useControllableState as $1IHzk$useControllableState} from "@radix-ui/react-use-controllable-state";
6
- import {Primitive as $1IHzk$Primitive} from "@radix-ui/react-primitive";
7
5
  import {createRovingFocusGroupScope as $1IHzk$createRovingFocusGroupScope, Root as $1IHzk$Root, Item as $1IHzk$Item} from "@radix-ui/react-roving-focus";
8
- import {useId as $1IHzk$useId} from "@radix-ui/react-id";
6
+ import {Presence as $1IHzk$Presence} from "@radix-ui/react-presence";
7
+ import {Primitive as $1IHzk$Primitive} from "@radix-ui/react-primitive";
9
8
  import {useDirection as $1IHzk$useDirection} from "@radix-ui/react-direction";
9
+ import {useControllableState as $1IHzk$useControllableState} from "@radix-ui/react-use-controllable-state";
10
+ import {useId as $1IHzk$useId} from "@radix-ui/react-id";
10
11
 
11
12
  function $parcel$export(e, n, v, s) {
12
13
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
@@ -32,6 +33,7 @@ $parcel$export($69cb30bb0017df05$exports, "Content", () => $69cb30bb0017df05$exp
32
33
 
33
34
 
34
35
 
36
+
35
37
  /* -------------------------------------------------------------------------------------------------
36
38
  * Tabs
37
39
  * -----------------------------------------------------------------------------------------------*/ const $69cb30bb0017df05$var$TABS_NAME = 'Tabs';
@@ -143,22 +145,36 @@ const $69cb30bb0017df05$export$8114b9fdfdf9f3ba = /*#__PURE__*/ $1IHzk$forwardRe
143
145
  * TabsContent
144
146
  * -----------------------------------------------------------------------------------------------*/ const $69cb30bb0017df05$var$CONTENT_NAME = 'TabsContent';
145
147
  const $69cb30bb0017df05$export$bd905d70e8fd2ebb = /*#__PURE__*/ $1IHzk$forwardRef((props, forwardedRef)=>{
146
- const { __scopeTabs: __scopeTabs , value: value , children: children , ...contentProps } = props;
148
+ const { __scopeTabs: __scopeTabs , value: value , forceMount: forceMount , children: children , ...contentProps } = props;
147
149
  const context = $69cb30bb0017df05$var$useTabsContext($69cb30bb0017df05$var$CONTENT_NAME, __scopeTabs);
148
150
  const triggerId = $69cb30bb0017df05$var$makeTriggerId(context.baseId, value);
149
151
  const contentId = $69cb30bb0017df05$var$makeContentId(context.baseId, value);
150
152
  const isSelected = value === context.value;
151
- return /*#__PURE__*/ $1IHzk$createElement($1IHzk$Primitive.div, $1IHzk$babelruntimehelpersesmextends({
152
- "data-state": isSelected ? 'active' : 'inactive',
153
- "data-orientation": context.orientation,
154
- role: "tabpanel",
155
- "aria-labelledby": triggerId,
156
- hidden: !isSelected,
157
- id: contentId,
158
- tabIndex: 0
159
- }, contentProps, {
160
- ref: forwardedRef
161
- }), isSelected && children);
153
+ const isMountAnimationPreventedRef = $1IHzk$useRef(isSelected);
154
+ $1IHzk$useEffect(()=>{
155
+ const rAF = requestAnimationFrame(()=>isMountAnimationPreventedRef.current = false
156
+ );
157
+ return ()=>cancelAnimationFrame(rAF)
158
+ ;
159
+ }, []);
160
+ return /*#__PURE__*/ $1IHzk$createElement($1IHzk$Presence, {
161
+ present: forceMount || isSelected
162
+ }, ({ present: present })=>/*#__PURE__*/ $1IHzk$createElement($1IHzk$Primitive.div, $1IHzk$babelruntimehelpersesmextends({
163
+ "data-state": isSelected ? 'active' : 'inactive',
164
+ "data-orientation": context.orientation,
165
+ role: "tabpanel",
166
+ "aria-labelledby": triggerId,
167
+ hidden: !present,
168
+ id: contentId,
169
+ tabIndex: 0
170
+ }, contentProps, {
171
+ ref: forwardedRef,
172
+ style: {
173
+ ...props.style,
174
+ animationDuration: isMountAnimationPreventedRef.current ? '0s' : undefined
175
+ }
176
+ }), present && children)
177
+ );
162
178
  });
163
179
  /*#__PURE__*/ Object.assign($69cb30bb0017df05$export$bd905d70e8fd2ebb, {
164
180
  displayName: $69cb30bb0017df05$var$CONTENT_NAME
package/dist/index.module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/react/tabs/src/index.ts","packages/react/tabs/src/Tabs.tsx"],"sourcesContent":["export * from './Tabs';\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { useId } from '@radix-ui/react-id';\nimport { useDirection } from '@radix-ui/react-direction';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs';\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope };\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype TabsContextValue = {\n baseId: string;\n value?: string;\n onValueChange: (value: string) => void;\n orientation?: TabsProps['orientation'];\n dir?: TabsProps['dir'];\n activationMode?: TabsProps['activationMode'];\n};\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME);\n\ntype TabsElement = React.ElementRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = Radix.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface TabsProps extends PrimitiveDivProps {\n /** The value for the selected tab, if controlled */\n value?: string;\n /** The value of the tab to select by default, if uncontrolled */\n defaultValue?: string;\n /** A function called when a new tab is selected */\n onValueChange?: (value: string) => void;\n /**\n * The orientation the tabs are layed out.\n * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n * @defaultValue horizontal\n */\n orientation?: RovingFocusGroupProps['orientation'];\n /**\n * The direction of navigation between toolbar items.\n */\n dir?: RovingFocusGroupProps['dir'];\n /**\n * Whether a tab is activated automatically or manually.\n * @defaultValue automatic\n * */\n activationMode?: 'automatic' | 'manual';\n}\n\nconst Tabs = React.forwardRef<TabsElement, TabsProps>(\n (props: ScopedProps<TabsProps>, forwardedRef) => {\n const {\n __scopeTabs,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir,\n activationMode = 'automatic',\n ...tabsProps\n } = props;\n const direction = useDirection(dir);\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onValueChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n >\n <Primitive.div\n dir={direction}\n data-orientation={orientation}\n {...tabsProps}\n ref={forwardedRef}\n />\n </TabsProvider>\n );\n }\n);\n\nTabs.displayName = TABS_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList';\n\ntype TabsListElement = React.ElementRef<typeof Primitive.div>;\ninterface TabsListProps extends PrimitiveDivProps {\n loop?: RovingFocusGroupProps['loop'];\n}\n\nconst TabsList = React.forwardRef<TabsListElement, TabsListProps>(\n (props: ScopedProps<TabsListProps>, forwardedRef) => {\n const { __scopeTabs, loop = true, ...listProps } = props;\n const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n return (\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={context.orientation}\n dir={context.dir}\n loop={loop}\n >\n <Primitive.div\n role=\"tablist\"\n aria-orientation={context.orientation}\n {...listProps}\n ref={forwardedRef}\n />\n </RovingFocusGroup.Root>\n );\n }\n);\n\nTabsList.displayName = TAB_LIST_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger';\n\ntype TabsTriggerElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface TabsTriggerProps extends PrimitiveButtonProps {\n value: string;\n}\n\nconst TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(\n (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n const { __scopeTabs, value, disabled = false, ...triggerProps } = props;\n const context = useTabsContext(TRIGGER_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n return (\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <Primitive.button\n type=\"button\"\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n {...triggerProps}\n ref={forwardedRef}\n onMouseDown={composeEventHandlers(props.onMouseDown, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n if (!disabled && event.button === 0 && event.ctrlKey === false) {\n context.onValueChange(value);\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault();\n }\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if ([' ', 'Enter'].includes(event.key)) context.onValueChange(value);\n })}\n onFocus={composeEventHandlers(props.onFocus, () => {\n // handle \"automatic\" activation if necessary\n // ie. activate tab following focus\n const isAutomaticActivation = context.activationMode !== 'manual';\n if (!isSelected && !disabled && isAutomaticActivation) {\n context.onValueChange(value);\n }\n })}\n />\n </RovingFocusGroup.Item>\n );\n }\n);\n\nTabsTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent';\n\ntype TabsContentElement = React.ElementRef<typeof Primitive.div>;\ninterface TabsContentProps extends PrimitiveDivProps {\n value: string;\n}\n\nconst TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(\n (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n const { __scopeTabs, value, children, ...contentProps } = props;\n const context = useTabsContext(CONTENT_NAME, __scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n return (\n <Primitive.div\n data-state={isSelected ? 'active' : 'inactive'}\n data-orientation={context.orientation}\n role=\"tabpanel\"\n aria-labelledby={triggerId}\n hidden={!isSelected}\n id={contentId}\n tabIndex={0}\n {...contentProps}\n ref={forwardedRef}\n >\n {isSelected && children}\n </Primitive.div>\n );\n }\n);\n\nTabsContent.displayName = CONTENT_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n return `${baseId}-trigger-${value}`;\n}\n\nfunction makeContentId(baseId: string, value: string) {\n return `${baseId}-content-${value}`;\n}\n\nconst Root = Tabs;\nconst List = TabsList;\nconst Trigger = TabsTrigger;\nconst Content = TabsContent;\n\nexport {\n createTabsScope,\n //\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n //\n Root,\n List,\n Trigger,\n Content,\n};\nexport type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };\n"],"names":["React","composeEventHandlers","createContextScope","useControllableState","Primitive","RovingFocusGroup","createRovingFocusGroupScope","useId","useDirection","TABS_NAME","createTabsContext","createTabsScope","useRovingFocusGroupScope","TabsProvider","useTabsContext","Tabs","forwardRef","props","forwardedRef","__scopeTabs","value","valueProp","onValueChange","defaultValue","orientation","dir","activationMode","tabsProps","direction","setValue","prop","onChange","defaultProp","TAB_LIST_NAME","TabsList","loop","listProps","context","rovingFocusGroupScope","TRIGGER_NAME","TabsTrigger","disabled","triggerProps","triggerId","makeTriggerId","baseId","contentId","makeContentId","isSelected","undefined","onMouseDown","event","button","ctrlKey","preventDefault","onKeyDown","includes","key","onFocus","isAutomaticActivation","CONTENT_NAME","TabsContent","children","contentProps","Root","List","Trigger","Content"],"version":3,"file":"index.module.js.map"}
1
+ {"mappings":"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","sources":["packages/react/tabs/src/index.ts","packages/react/tabs/src/Tabs.tsx"],"sourcesContent":["export * from './Tabs';\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useId } from '@radix-ui/react-id';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs';\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope };\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype TabsContextValue = {\n baseId: string;\n value?: string;\n onValueChange: (value: string) => void;\n orientation?: TabsProps['orientation'];\n dir?: TabsProps['dir'];\n activationMode?: TabsProps['activationMode'];\n};\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME);\n\ntype TabsElement = React.ElementRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = Radix.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface TabsProps extends PrimitiveDivProps {\n /** The value for the selected tab, if controlled */\n value?: string;\n /** The value of the tab to select by default, if uncontrolled */\n defaultValue?: string;\n /** A function called when a new tab is selected */\n onValueChange?: (value: string) => void;\n /**\n * The orientation the tabs are layed out.\n * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n * @defaultValue horizontal\n */\n orientation?: RovingFocusGroupProps['orientation'];\n /**\n * The direction of navigation between toolbar items.\n */\n dir?: RovingFocusGroupProps['dir'];\n /**\n * Whether a tab is activated automatically or manually.\n * @defaultValue automatic\n * */\n activationMode?: 'automatic' | 'manual';\n}\n\nconst Tabs = React.forwardRef<TabsElement, TabsProps>(\n (props: ScopedProps<TabsProps>, forwardedRef) => {\n const {\n __scopeTabs,\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir,\n activationMode = 'automatic',\n ...tabsProps\n } = props;\n const direction = useDirection(dir);\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n return (\n <TabsProvider\n scope={__scopeTabs}\n baseId={useId()}\n value={value}\n onValueChange={setValue}\n orientation={orientation}\n dir={direction}\n activationMode={activationMode}\n >\n <Primitive.div\n dir={direction}\n data-orientation={orientation}\n {...tabsProps}\n ref={forwardedRef}\n />\n </TabsProvider>\n );\n }\n);\n\nTabs.displayName = TABS_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList';\n\ntype TabsListElement = React.ElementRef<typeof Primitive.div>;\ninterface TabsListProps extends PrimitiveDivProps {\n loop?: RovingFocusGroupProps['loop'];\n}\n\nconst TabsList = React.forwardRef<TabsListElement, TabsListProps>(\n (props: ScopedProps<TabsListProps>, forwardedRef) => {\n const { __scopeTabs, loop = true, ...listProps } = props;\n const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n return (\n <RovingFocusGroup.Root\n asChild\n {...rovingFocusGroupScope}\n orientation={context.orientation}\n dir={context.dir}\n loop={loop}\n >\n <Primitive.div\n role=\"tablist\"\n aria-orientation={context.orientation}\n {...listProps}\n ref={forwardedRef}\n />\n </RovingFocusGroup.Root>\n );\n }\n);\n\nTabsList.displayName = TAB_LIST_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger';\n\ntype TabsTriggerElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface TabsTriggerProps extends PrimitiveButtonProps {\n value: string;\n}\n\nconst TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(\n (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n const { __scopeTabs, value, disabled = false, ...triggerProps } = props;\n const context = useTabsContext(TRIGGER_NAME, __scopeTabs);\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n return (\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={isSelected}\n >\n <Primitive.button\n type=\"button\"\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n id={triggerId}\n {...triggerProps}\n ref={forwardedRef}\n onMouseDown={composeEventHandlers(props.onMouseDown, (event) => {\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click)\n if (!disabled && event.button === 0 && event.ctrlKey === false) {\n context.onValueChange(value);\n } else {\n // prevent focus to avoid accidental activation\n event.preventDefault();\n }\n })}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if ([' ', 'Enter'].includes(event.key)) context.onValueChange(value);\n })}\n onFocus={composeEventHandlers(props.onFocus, () => {\n // handle \"automatic\" activation if necessary\n // ie. activate tab following focus\n const isAutomaticActivation = context.activationMode !== 'manual';\n if (!isSelected && !disabled && isAutomaticActivation) {\n context.onValueChange(value);\n }\n })}\n />\n </RovingFocusGroup.Item>\n );\n }\n);\n\nTabsTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent';\n\ntype TabsContentElement = React.ElementRef<typeof Primitive.div>;\ninterface TabsContentProps extends PrimitiveDivProps {\n value: string;\n\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(\n (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n const { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n const context = useTabsContext(CONTENT_NAME, __scopeTabs);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n const isMountAnimationPreventedRef = React.useRef(isSelected);\n\n React.useEffect(() => {\n const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));\n return () => cancelAnimationFrame(rAF);\n }, []);\n\n return (\n <Presence present={forceMount || isSelected}>\n {({ present }) => (\n <Primitive.div\n data-state={isSelected ? 'active' : 'inactive'}\n data-orientation={context.orientation}\n role=\"tabpanel\"\n aria-labelledby={triggerId}\n hidden={!present}\n id={contentId}\n tabIndex={0}\n {...contentProps}\n ref={forwardedRef}\n style={{\n ...props.style,\n animationDuration: isMountAnimationPreventedRef.current ? '0s' : undefined,\n }}\n >\n {present && children}\n </Primitive.div>\n )}\n </Presence>\n );\n }\n);\n\nTabsContent.displayName = CONTENT_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n return `${baseId}-trigger-${value}`;\n}\n\nfunction makeContentId(baseId: string, value: string) {\n return `${baseId}-content-${value}`;\n}\n\nconst Root = Tabs;\nconst List = TabsList;\nconst Trigger = TabsTrigger;\nconst Content = TabsContent;\n\nexport {\n createTabsScope,\n //\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n //\n Root,\n List,\n Trigger,\n Content,\n};\nexport type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };\n"],"names":["React","composeEventHandlers","createContextScope","createRovingFocusGroupScope","Presence","Primitive","RovingFocusGroup","useDirection","useControllableState","useId","TABS_NAME","createTabsContext","createTabsScope","useRovingFocusGroupScope","TabsProvider","useTabsContext","Tabs","forwardRef","props","forwardedRef","__scopeTabs","value","valueProp","onValueChange","defaultValue","orientation","dir","activationMode","tabsProps","direction","setValue","prop","onChange","defaultProp","TAB_LIST_NAME","TabsList","loop","listProps","context","rovingFocusGroupScope","TRIGGER_NAME","TabsTrigger","disabled","triggerProps","triggerId","makeTriggerId","baseId","contentId","makeContentId","isSelected","undefined","onMouseDown","event","button","ctrlKey","preventDefault","onKeyDown","includes","key","onFocus","isAutomaticActivation","CONTENT_NAME","TabsContent","forceMount","children","contentProps","isMountAnimationPreventedRef","useRef","useEffect","rAF","requestAnimationFrame","current","cancelAnimationFrame","present","style","animationDuration","Root","List","Trigger","Content"],"version":3,"file":"index.module.js.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@radix-ui/react-tabs",
3
- "version": "0.1.6-rc.8",
3
+ "version": "0.2.0-rc.2",
4
4
  "license": "MIT",
5
5
  "source": "src/index.ts",
6
6
  "main": "dist/index.js",
@@ -18,15 +18,17 @@
18
18
  "dependencies": {
19
19
  "@babel/runtime": "^7.13.10",
20
20
  "@radix-ui/primitive": "0.1.0",
21
- "@radix-ui/react-context": "0.1.2-rc.5",
22
- "@radix-ui/react-direction": "0.1.0-rc.8",
23
- "@radix-ui/react-id": "0.1.6-rc.5",
24
- "@radix-ui/react-primitive": "0.1.5-rc.5",
25
- "@radix-ui/react-roving-focus": "0.1.6-rc.8",
26
- "@radix-ui/react-use-controllable-state": "0.1.1-rc.5"
21
+ "@radix-ui/react-context": "0.1.2-rc.22",
22
+ "@radix-ui/react-direction": "0.1.0-rc.25",
23
+ "@radix-ui/react-id": "0.1.6-rc.22",
24
+ "@radix-ui/react-presence": "0.1.3-rc.22",
25
+ "@radix-ui/react-primitive": "0.1.5-rc.22",
26
+ "@radix-ui/react-roving-focus": "0.1.6-rc.25",
27
+ "@radix-ui/react-use-controllable-state": "0.1.1-rc.22"
27
28
  },
28
29
  "peerDependencies": {
29
- "react": "^16.8 || ^17.0 || ^18.0"
30
+ "react": "^16.8 || ^17.0 || ^18.0",
31
+ "react-dom": "^16.8 || ^17.0 || ^18.0"
30
32
  },
31
33
  "homepage": "https://radix-ui.com/primitives",
32
34
  "repository": {