@radix-ui/react-tabs 0.1.1-rc.4 → 0.1.1-rc.8

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 (6) hide show
  1. package/dist/index.d.ts.map +1 -1
  2. package/dist/index.js +1 -1
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.module.js +1 -1
  5. package/dist/index.module.js.map +1 -1
  6. package/package.json +3 -3
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"A;A;A;A;AA6BA,6BAA6B,MAAM,wBAAwB,CAAC,uBAAuB,CAAC,CAAC;AACrF,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;A;A;A;OAIG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IACnD;A;A;OAGG;IACH,GAAG,CAAC,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAC;IACnC,gFAAgF;IAChF,cAAc,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;CACzC;AAED,OAAA,MAAM,sFA6BJ,CAAC;AAWH,8BAAwB,SAAQ,iBAAiB;IAC/C,IAAI,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;CACtC;AAED,OAAA,MAAM,8FAQJ,CAAC;AAWH,iCAA2B,SAAQ,iBAAiB;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,OAAA,MAAM,oGA4CL,CAAC;AAWF,iCAA2B,SAAQ,iBAAiB;IAClD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,OAAA,MAAM,oGAqBL,CAAC;AAcF,OAAA,MAAM,sFAAW,CAAC;AAClB,OAAA,MAAM,0FAAe,CAAC;AACtB,OAAA,MAAM,gGAAqB,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"],"sourcesContent":[null,null],"names":[],"version":3,"file":"index.d.ts.map"}
1
+ {"mappings":"A;A;A;A;AA6BA,6BAA6B,MAAM,wBAAwB,CAAC,uBAAuB,CAAC,CAAC;AACrF,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;A;A;A;OAIG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IACnD;A;A;OAGG;IACH,GAAG,CAAC,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAC;IACnC,gFAAgF;IAChF,cAAc,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;CACzC;AAED,OAAA,MAAM,sFA6BJ,CAAC;AAWH,8BAAwB,SAAQ,iBAAiB;IAC/C,IAAI,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;CACtC;AAED,OAAA,MAAM,8FAQJ,CAAC;AAWH,iCAA2B,SAAQ,iBAAiB;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,OAAA,MAAM,oGA4CL,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,gGAAqB,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"],"sourcesContent":[null,null],"names":[],"version":3,"file":"index.d.ts.map"}
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- var e,t,a,r=require("@radix-ui/react-id").useId,o=require("@radix-ui/react-roving-focus"),i=o.RovingFocusGroup,n=o.RovingFocusItem,s=require("@radix-ui/react-primitive").Primitive,d=require("@radix-ui/react-use-controllable-state").useControllableState,u=require("@radix-ui/react-use-callback-ref").useCallbackRef,c=require("@radix-ui/react-context").createContext,l=require("@radix-ui/primitive").composeEventHandlers,b=(e={},t=require("react"),Object.keys(t).forEach((function(a){"default"!==a&&"__esModule"!==a&&Object.defineProperty(e,a,{enumerable:!0,get:function(){return t[a]}})})),e),v=(a=require("@babel/runtime/helpers/extends"))&&a.__esModule?a.default:a;const[f,p]=c("Tabs"),x=/*#__PURE__*/b.forwardRef(((e,t)=>{const{value:a,onValueChange:o,defaultValue:i,orientation:n="horizontal",dir:u="ltr",activationMode:c="automatic",...l}=e,[p,x]=d({prop:a,onChange:o,defaultProp:i});/*#__PURE__*/return b.createElement(f,{baseId:r(),value:p,onValueChange:x,orientation:n,dir:u,activationMode:c},/*#__PURE__*/b.createElement(s.div,v({"data-orientation":n},l,{ref:t})))}));exports.Tabs=x;const g=/*#__PURE__*/b.forwardRef(((e,t)=>{const{loop:a=!0,...r}=e,o=p("TabsList");/*#__PURE__*/return b.createElement(i,{asChild:!0,orientation:o.orientation,dir:o.dir,loop:a},/*#__PURE__*/b.createElement(s.div,v({role:"tablist",dir:o.dir},r,{ref:t})))}));exports.TabsList=g;const m=/*#__PURE__*/b.forwardRef(((e,t)=>{const{value:a,disabled:r=!1,...o}=e,i=p("TabsTrigger"),d=T(i.baseId,a),c=h(i.baseId,a),f=a===i.value,x=u((()=>i.onValueChange(a)));/*#__PURE__*/return b.createElement(n,{asChild:!0,focusable:!r,active:f},/*#__PURE__*/b.createElement(s.div,v({role:"tab","aria-selected":f,"aria-controls":c,"aria-disabled":r||void 0,"data-state":f?"active":"inactive","data-disabled":r?"":void 0,id:d},o,{ref:t,onKeyDown:l(e.onKeyDown,(e=>{r||" "!==e.key&&"Enter"!==e.key||x()})),onMouseDown:l(e.onMouseDown,(e=>{r||0!==e.button||!1!==e.ctrlKey||x()})),onFocus:l(e.onFocus,(()=>{const e="manual"!==i.activationMode;f||r||!e||x()}))})))}));exports.TabsTrigger=m;const C=/*#__PURE__*/b.forwardRef(((e,t)=>{const{value:a,...r}=e,o=p("TabsContent"),i=T(o.baseId,a),n=h(o.baseId,a),d=a===o.value;/*#__PURE__*/return b.createElement(s.div,v({"data-state":d?"active":"inactive","data-orientation":o.orientation,role:"tabpanel","aria-labelledby":i,hidden:!d,id:n,tabIndex:0},r,{ref:t}))}));function T(e,t){return`${e}-trigger-${t}`}function h(e,t){return`${e}-content-${t}`}exports.TabsContent=C;const E=x;exports.Root=E;const q=g;exports.List=q;const w=m;exports.Trigger=w;const y=C;exports.Content=y;
1
+ var e,t,r,a=require("@radix-ui/react-id").useId,o=require("@radix-ui/react-roving-focus"),i=o.RovingFocusGroup,n=o.RovingFocusItem,s=require("@radix-ui/react-primitive").Primitive,d=require("@radix-ui/react-use-controllable-state").useControllableState,u=require("@radix-ui/react-use-callback-ref").useCallbackRef,c=require("@radix-ui/react-context").createContext,l=require("@radix-ui/primitive").composeEventHandlers,b=(e={},t=require("react"),Object.keys(t).forEach((function(r){"default"!==r&&"__esModule"!==r&&Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[r]}})})),e),v=(r=require("@babel/runtime/helpers/extends"))&&r.__esModule?r.default:r;const[f,p]=c("Tabs"),x=/*#__PURE__*/b.forwardRef(((e,t)=>{const{value:r,onValueChange:o,defaultValue:i,orientation:n="horizontal",dir:u="ltr",activationMode:c="automatic",...l}=e,[p,x]=d({prop:r,onChange:o,defaultProp:i});/*#__PURE__*/return b.createElement(f,{baseId:a(),value:p,onValueChange:x,orientation:n,dir:u,activationMode:c},/*#__PURE__*/b.createElement(s.div,v({"data-orientation":n},l,{ref:t})))}));exports.Tabs=x;const g=/*#__PURE__*/b.forwardRef(((e,t)=>{const{loop:r=!0,...a}=e,o=p("TabsList");/*#__PURE__*/return b.createElement(i,{asChild:!0,orientation:o.orientation,dir:o.dir,loop:r},/*#__PURE__*/b.createElement(s.div,v({role:"tablist",dir:o.dir},a,{ref:t})))}));exports.TabsList=g;const m=/*#__PURE__*/b.forwardRef(((e,t)=>{const{value:r,disabled:a=!1,...o}=e,i=p("TabsTrigger"),d=h(i.baseId,r),c=T(i.baseId,r),f=r===i.value,x=u((()=>i.onValueChange(r)));/*#__PURE__*/return b.createElement(n,{asChild:!0,focusable:!a,active:f},/*#__PURE__*/b.createElement(s.div,v({role:"tab","aria-selected":f,"aria-controls":c,"aria-disabled":a||void 0,"data-state":f?"active":"inactive","data-disabled":a?"":void 0,id:d},o,{ref:t,onKeyDown:l(e.onKeyDown,(e=>{a||" "!==e.key&&"Enter"!==e.key||x()})),onMouseDown:l(e.onMouseDown,(e=>{a||0!==e.button||!1!==e.ctrlKey||x()})),onFocus:l(e.onFocus,(()=>{const e="manual"!==i.activationMode;f||a||!e||x()}))})))}));exports.TabsTrigger=m;const C=/*#__PURE__*/b.forwardRef(((e,t)=>{const{value:r,children:a,...o}=e,i=p("TabsContent"),n=h(i.baseId,r),d=T(i.baseId,r),u=r===i.value;/*#__PURE__*/return b.createElement(s.div,v({"data-state":u?"active":"inactive","data-orientation":i.orientation,role:"tabpanel","aria-labelledby":n,hidden:!u,id:d,tabIndex:0},o,{ref:t}),u&&a)}));function h(e,t){return`${e}-trigger-${t}`}function T(e,t){return`${e}-content-${t}`}exports.TabsContent=C;const E=x;exports.Root=E;const q=g;exports.List=q;const w=m;exports.Trigger=w;const y=C;exports.Content=y;
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/react/tabs/src/Tabs.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$reexport(e, n, v) {\n Object.defineProperty(e, n, {get: v, enumerable: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n Object.keys(source).forEach(function(key) {\n if (key === 'default' || key === '__esModule') {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function get() {\n return source[key];\n },\n });\n });\n\n return dest;\n}\n\nfunction $parcel$missingModule(name) {\n var err = new Error(\"Cannot find module '\" + name + \"'\");\n err.code = 'MODULE_NOT_FOUND';\n throw err;\n}\n\nvar $parcel$global =\n typeof globalThis !== 'undefined'\n ? globalThis\n : typeof self !== 'undefined'\n ? self\n : typeof window !== 'undefined'\n ? window\n : typeof global !== 'undefined'\n ? global\n : {};\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContext } from '@radix-ui/react-context';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { RovingFocusGroup, RovingFocusItem } from '@radix-ui/react-roving-focus';\nimport { useId } from '@radix-ui/react-id';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs';\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] = createContext<TabsContextValue>(TABS_NAME);\n\ntype TabsElement = React.ElementRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = Radix.ComponentPropsWithoutRef<typeof RovingFocusGroup>;\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 * @defaultValue ltr\n */\n dir?: RovingFocusGroupProps['dir'];\n /** Whether a tab is activated automatically or manually (default: automatic) */\n activationMode?: 'automatic' | 'manual';\n}\n\nconst Tabs = React.forwardRef<TabsElement, TabsProps>((props, forwardedRef) => {\n const {\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir = 'ltr',\n activationMode = 'automatic',\n ...tabsProps\n } = props;\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n return (\n <TabsProvider\n baseId={useId()}\n value={value}\n onValueChange={setValue}\n orientation={orientation}\n dir={dir}\n activationMode={activationMode}\n >\n <Primitive.div data-orientation={orientation} {...tabsProps} ref={forwardedRef} />\n </TabsProvider>\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>((props, forwardedRef) => {\n const { loop = true, ...listProps } = props;\n const context = useTabsContext(TAB_LIST_NAME);\n return (\n <RovingFocusGroup asChild orientation={context.orientation} dir={context.dir} loop={loop}>\n <Primitive.div role=\"tablist\" dir={context.dir} {...listProps} ref={forwardedRef} />\n </RovingFocusGroup>\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.div>;\ninterface TabsTriggerProps extends PrimitiveDivProps {\n value: string;\n disabled?: boolean;\n}\n\nconst TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(\n (props, forwardedRef) => {\n const { value, disabled = false, ...triggerProps } = props;\n const context = useTabsContext(TRIGGER_NAME);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n const handleTabChange = useCallbackRef(() => context.onValueChange(value));\n return (\n <RovingFocusItem asChild focusable={!disabled} active={isSelected}>\n <Primitive.div\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n aria-disabled={disabled || undefined}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n id={triggerId}\n {...triggerProps}\n ref={forwardedRef}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if (!disabled && (event.key === ' ' || event.key === 'Enter')) {\n handleTabChange();\n }\n })}\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 handleTabChange();\n }\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 handleTabChange();\n }\n })}\n />\n </RovingFocusItem>\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, forwardedRef) => {\n const { value, ...contentProps } = props;\n const context = useTabsContext(CONTENT_NAME);\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 );\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 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":["dest","source","a","Object","keys","forEach","key","defineProperty","enumerable","get","__esModule","default","TabsProvider","useTabsContext","createContext","Tabs","React","forwardRef","props","forwardedRef","value","valueProp","onValueChange","defaultValue","orientation","dir","activationMode","tabsProps","setValue","useControllableState","prop","onChange","defaultProp","_react","createElement","$cebddb0c75f42c980c43f093526f6ec6$var$TabsProvider","baseId","useId","Primitive","div","_babelRuntimeHelpersExtends","ref","TabsList","loop","listProps","context","RovingFocusGroup","asChild","role","TabsTrigger","disabled","triggerProps","triggerId","makeTriggerId","contentId","makeContentId","isSelected","handleTabChange","useCallbackRef","RovingFocusItem","focusable","active","undefined","id","onKeyDown","composeEventHandlers","event","onMouseDown","button","ctrlKey","onFocus","isAutomaticActivation","TabsContent","contentProps","hidden","tabIndex","Root","List","Trigger","Content"],"version":3,"file":"index.js.map"}
1
+ {"mappings":"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","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/react/tabs/src/Tabs.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$reexport(e, n, v) {\n Object.defineProperty(e, n, {get: v, enumerable: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n Object.keys(source).forEach(function(key) {\n if (key === 'default' || key === '__esModule') {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function get() {\n return source[key];\n },\n });\n });\n\n return dest;\n}\n\nfunction $parcel$missingModule(name) {\n var err = new Error(\"Cannot find module '\" + name + \"'\");\n err.code = 'MODULE_NOT_FOUND';\n throw err;\n}\n\nvar $parcel$global =\n typeof globalThis !== 'undefined'\n ? globalThis\n : typeof self !== 'undefined'\n ? self\n : typeof window !== 'undefined'\n ? window\n : typeof global !== 'undefined'\n ? global\n : {};\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContext } from '@radix-ui/react-context';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { RovingFocusGroup, RovingFocusItem } from '@radix-ui/react-roving-focus';\nimport { useId } from '@radix-ui/react-id';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs';\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] = createContext<TabsContextValue>(TABS_NAME);\n\ntype TabsElement = React.ElementRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = Radix.ComponentPropsWithoutRef<typeof RovingFocusGroup>;\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 * @defaultValue ltr\n */\n dir?: RovingFocusGroupProps['dir'];\n /** Whether a tab is activated automatically or manually (default: automatic) */\n activationMode?: 'automatic' | 'manual';\n}\n\nconst Tabs = React.forwardRef<TabsElement, TabsProps>((props, forwardedRef) => {\n const {\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir = 'ltr',\n activationMode = 'automatic',\n ...tabsProps\n } = props;\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n return (\n <TabsProvider\n baseId={useId()}\n value={value}\n onValueChange={setValue}\n orientation={orientation}\n dir={dir}\n activationMode={activationMode}\n >\n <Primitive.div data-orientation={orientation} {...tabsProps} ref={forwardedRef} />\n </TabsProvider>\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>((props, forwardedRef) => {\n const { loop = true, ...listProps } = props;\n const context = useTabsContext(TAB_LIST_NAME);\n return (\n <RovingFocusGroup asChild orientation={context.orientation} dir={context.dir} loop={loop}>\n <Primitive.div role=\"tablist\" dir={context.dir} {...listProps} ref={forwardedRef} />\n </RovingFocusGroup>\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.div>;\ninterface TabsTriggerProps extends PrimitiveDivProps {\n value: string;\n disabled?: boolean;\n}\n\nconst TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(\n (props, forwardedRef) => {\n const { value, disabled = false, ...triggerProps } = props;\n const context = useTabsContext(TRIGGER_NAME);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n const handleTabChange = useCallbackRef(() => context.onValueChange(value));\n return (\n <RovingFocusItem asChild focusable={!disabled} active={isSelected}>\n <Primitive.div\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n aria-disabled={disabled || undefined}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n id={triggerId}\n {...triggerProps}\n ref={forwardedRef}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if (!disabled && (event.key === ' ' || event.key === 'Enter')) {\n handleTabChange();\n }\n })}\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 handleTabChange();\n }\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 handleTabChange();\n }\n })}\n />\n </RovingFocusItem>\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, forwardedRef) => {\n const { value, children, ...contentProps } = props;\n const context = useTabsContext(CONTENT_NAME);\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 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":["dest","source","a","Object","keys","forEach","key","defineProperty","enumerable","get","__esModule","default","TabsProvider","useTabsContext","createContext","Tabs","React","forwardRef","props","forwardedRef","value","valueProp","onValueChange","defaultValue","orientation","dir","activationMode","tabsProps","setValue","useControllableState","prop","onChange","defaultProp","_react","createElement","$cebddb0c75f42c980c43f093526f6ec6$var$TabsProvider","baseId","useId","Primitive","div","_babelRuntimeHelpersExtends","ref","TabsList","loop","listProps","context","RovingFocusGroup","asChild","role","TabsTrigger","disabled","triggerProps","triggerId","makeTriggerId","contentId","makeContentId","isSelected","handleTabChange","useCallbackRef","RovingFocusItem","focusable","active","undefined","id","onKeyDown","composeEventHandlers","event","onMouseDown","button","ctrlKey","onFocus","isAutomaticActivation","TabsContent","children","contentProps","hidden","tabIndex","Root","List","Trigger","Content"],"version":3,"file":"index.js.map"}
package/dist/index.module.js CHANGED
@@ -1,2 +1,2 @@
1
- import{useId as e}from"@radix-ui/react-id";import{RovingFocusGroup as t,RovingFocusItem as a}from"@radix-ui/react-roving-focus";import{Primitive as r}from"@radix-ui/react-primitive";import{useControllableState as o}from"@radix-ui/react-use-controllable-state";import{useCallbackRef as i}from"@radix-ui/react-use-callback-ref";import{createContext as n}from"@radix-ui/react-context";import{composeEventHandlers as s}from"@radix-ui/primitive";import*as d from"react";import c from"@babel/runtime/helpers/esm/extends";const[l,u]=n("Tabs");export const Tabs=/*#__PURE__*/d.forwardRef(((t,a)=>{const{value:i,onValueChange:n,defaultValue:s,orientation:u="horizontal",dir:b="ltr",activationMode:m="automatic",...f}=t,[p,v]=o({prop:i,onChange:n,defaultProp:s});/*#__PURE__*/return d.createElement(l,{baseId:e(),value:p,onValueChange:v,orientation:u,dir:b,activationMode:m},/*#__PURE__*/d.createElement(r.div,c({"data-orientation":u},f,{ref:a})))}));/*#__PURE__*/export const TabsList=/*#__PURE__*/d.forwardRef(((e,a)=>{const{loop:o=!0,...i}=e,n=u("TabsList");/*#__PURE__*/return d.createElement(t,{asChild:!0,orientation:n.orientation,dir:n.dir,loop:o},/*#__PURE__*/d.createElement(r.div,c({role:"tablist",dir:n.dir},i,{ref:a})))}));/*#__PURE__*/export const TabsTrigger=/*#__PURE__*/d.forwardRef(((e,t)=>{const{value:o,disabled:n=!1,...l}=e,f=u("TabsTrigger"),p=b(f.baseId,o),v=m(f.baseId,o),x=o===f.value,T=i((()=>f.onValueChange(o)));/*#__PURE__*/return d.createElement(a,{asChild:!0,focusable:!n,active:x},/*#__PURE__*/d.createElement(r.div,c({role:"tab","aria-selected":x,"aria-controls":v,"aria-disabled":n||void 0,"data-state":x?"active":"inactive","data-disabled":n?"":void 0,id:p},l,{ref:t,onKeyDown:s(e.onKeyDown,(e=>{n||" "!==e.key&&"Enter"!==e.key||T()})),onMouseDown:s(e.onMouseDown,(e=>{n||0!==e.button||!1!==e.ctrlKey||T()})),onFocus:s(e.onFocus,(()=>{const e="manual"!==f.activationMode;x||n||!e||T()}))})))}));/*#__PURE__*/export const TabsContent=/*#__PURE__*/d.forwardRef(((e,t)=>{const{value:a,...o}=e,i=u("TabsContent"),n=b(i.baseId,a),s=m(i.baseId,a),l=a===i.value;/*#__PURE__*/return d.createElement(r.div,c({"data-state":l?"active":"inactive","data-orientation":i.orientation,role:"tabpanel","aria-labelledby":n,hidden:!l,id:s,tabIndex:0},o,{ref:t}))}));/*#__PURE__*/function b(e,t){return`${e}-trigger-${t}`}function m(e,t){return`${e}-content-${t}`}export const Root=Tabs;export const List=TabsList;export const Trigger=TabsTrigger;export const Content=TabsContent;
1
+ import{useId as e}from"@radix-ui/react-id";import{RovingFocusGroup as t,RovingFocusItem as a}from"@radix-ui/react-roving-focus";import{Primitive as r}from"@radix-ui/react-primitive";import{useControllableState as o}from"@radix-ui/react-use-controllable-state";import{useCallbackRef as i}from"@radix-ui/react-use-callback-ref";import{createContext as n}from"@radix-ui/react-context";import{composeEventHandlers as s}from"@radix-ui/primitive";import*as d from"react";import c from"@babel/runtime/helpers/esm/extends";const[l,u]=n("Tabs");export const Tabs=/*#__PURE__*/d.forwardRef(((t,a)=>{const{value:i,onValueChange:n,defaultValue:s,orientation:u="horizontal",dir:b="ltr",activationMode:m="automatic",...f}=t,[p,v]=o({prop:i,onChange:n,defaultProp:s});/*#__PURE__*/return d.createElement(l,{baseId:e(),value:p,onValueChange:v,orientation:u,dir:b,activationMode:m},/*#__PURE__*/d.createElement(r.div,c({"data-orientation":u},f,{ref:a})))}));/*#__PURE__*/export const TabsList=/*#__PURE__*/d.forwardRef(((e,a)=>{const{loop:o=!0,...i}=e,n=u("TabsList");/*#__PURE__*/return d.createElement(t,{asChild:!0,orientation:n.orientation,dir:n.dir,loop:o},/*#__PURE__*/d.createElement(r.div,c({role:"tablist",dir:n.dir},i,{ref:a})))}));/*#__PURE__*/export const TabsTrigger=/*#__PURE__*/d.forwardRef(((e,t)=>{const{value:o,disabled:n=!1,...l}=e,f=u("TabsTrigger"),p=b(f.baseId,o),v=m(f.baseId,o),x=o===f.value,T=i((()=>f.onValueChange(o)));/*#__PURE__*/return d.createElement(a,{asChild:!0,focusable:!n,active:x},/*#__PURE__*/d.createElement(r.div,c({role:"tab","aria-selected":x,"aria-controls":v,"aria-disabled":n||void 0,"data-state":x?"active":"inactive","data-disabled":n?"":void 0,id:p},l,{ref:t,onKeyDown:s(e.onKeyDown,(e=>{n||" "!==e.key&&"Enter"!==e.key||T()})),onMouseDown:s(e.onMouseDown,(e=>{n||0!==e.button||!1!==e.ctrlKey||T()})),onFocus:s(e.onFocus,(()=>{const e="manual"!==f.activationMode;x||n||!e||T()}))})))}));/*#__PURE__*/export const TabsContent=/*#__PURE__*/d.forwardRef(((e,t)=>{const{value:a,children:o,...i}=e,n=u("TabsContent"),s=b(n.baseId,a),l=m(n.baseId,a),f=a===n.value;/*#__PURE__*/return d.createElement(r.div,c({"data-state":f?"active":"inactive","data-orientation":n.orientation,role:"tabpanel","aria-labelledby":s,hidden:!f,id:l,tabIndex:0},i,{ref:t}),f&&o)}));/*#__PURE__*/function b(e,t){return`${e}-trigger-${t}`}function m(e,t){return`${e}-content-${t}`}export const Root=Tabs;export const List=TabsList;export const Trigger=TabsTrigger;export const Content=TabsContent;
2
2
  //# sourceMappingURL=index.module.js.map
package/dist/index.module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["./packages/react/tabs/src/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContext } from '@radix-ui/react-context';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { RovingFocusGroup, RovingFocusItem } from '@radix-ui/react-roving-focus';\nimport { useId } from '@radix-ui/react-id';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs';\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] = createContext<TabsContextValue>(TABS_NAME);\n\ntype TabsElement = React.ElementRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = Radix.ComponentPropsWithoutRef<typeof RovingFocusGroup>;\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 * @defaultValue ltr\n */\n dir?: RovingFocusGroupProps['dir'];\n /** Whether a tab is activated automatically or manually (default: automatic) */\n activationMode?: 'automatic' | 'manual';\n}\n\nconst Tabs = React.forwardRef<TabsElement, TabsProps>((props, forwardedRef) => {\n const {\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir = 'ltr',\n activationMode = 'automatic',\n ...tabsProps\n } = props;\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n return (\n <TabsProvider\n baseId={useId()}\n value={value}\n onValueChange={setValue}\n orientation={orientation}\n dir={dir}\n activationMode={activationMode}\n >\n <Primitive.div data-orientation={orientation} {...tabsProps} ref={forwardedRef} />\n </TabsProvider>\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>((props, forwardedRef) => {\n const { loop = true, ...listProps } = props;\n const context = useTabsContext(TAB_LIST_NAME);\n return (\n <RovingFocusGroup asChild orientation={context.orientation} dir={context.dir} loop={loop}>\n <Primitive.div role=\"tablist\" dir={context.dir} {...listProps} ref={forwardedRef} />\n </RovingFocusGroup>\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.div>;\ninterface TabsTriggerProps extends PrimitiveDivProps {\n value: string;\n disabled?: boolean;\n}\n\nconst TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(\n (props, forwardedRef) => {\n const { value, disabled = false, ...triggerProps } = props;\n const context = useTabsContext(TRIGGER_NAME);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n const handleTabChange = useCallbackRef(() => context.onValueChange(value));\n return (\n <RovingFocusItem asChild focusable={!disabled} active={isSelected}>\n <Primitive.div\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n aria-disabled={disabled || undefined}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n id={triggerId}\n {...triggerProps}\n ref={forwardedRef}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if (!disabled && (event.key === ' ' || event.key === 'Enter')) {\n handleTabChange();\n }\n })}\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 handleTabChange();\n }\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 handleTabChange();\n }\n })}\n />\n </RovingFocusItem>\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, forwardedRef) => {\n const { value, ...contentProps } = props;\n const context = useTabsContext(CONTENT_NAME);\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 );\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 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":["TabsProvider","useTabsContext","createContext","Tabs","React","forwardRef","props","forwardedRef","value","valueProp","onValueChange","defaultValue","orientation","dir","activationMode","tabsProps","setValue","useControllableState","prop","onChange","defaultProp","_react","createElement","$b40a02b2d3d1d21ebd9ba3d555116441$var$TabsProvider","baseId","useId","Primitive","div","_babelRuntimeHelpersEsmExtends","ref","TabsList","loop","listProps","context","RovingFocusGroup","asChild","role","TabsTrigger","disabled","triggerProps","triggerId","makeTriggerId","contentId","makeContentId","isSelected","handleTabChange","useCallbackRef","RovingFocusItem","focusable","active","undefined","id","onKeyDown","composeEventHandlers","event","key","onMouseDown","button","ctrlKey","onFocus","isAutomaticActivation","TabsContent","contentProps","hidden","tabIndex","Root","List","Trigger","Content"],"version":3,"file":"index.module.js.map"}
1
+ {"mappings":"mgBAeA,MAWOA,EAAcC,GAAkBC,EAXrB,eAsClB,MAAMC,kBAAOC,EAAMC,YAAmC,CAACC,EAAOC,KAC5D,MACEC,MAAOC,EADHC,cAEJA,EAFIC,aAGJA,EAHIC,YAIJA,EAAc,aAJVC,IAKJA,EAAM,MALFC,eAMJA,EAAiB,eACdC,GACDT,GAEGE,EAAOQ,GAAYC,EAAqB,CAC7CC,KAAMT,EACNU,SAAUT,EACVU,YAAaT,iBAGf,OACEU,EAAAC,cAACC,EAAD,CACEC,OAAQC,IACRjB,MAAOA,EACPE,cAAeM,EACfJ,YAAaA,EACbC,IAAKA,EACLC,eAAgBA,gBAEhBO,EAAAC,cAACI,EAAUC,IAAXC,EAAA,CAAe,mBAAkBhB,GAAiBG,EAAlD,CAA6Dc,IAAKtB,6BAkBxE,MAAMuB,sBAAW1B,EAAMC,YAA2C,CAACC,EAAOC,KACxE,MAAMwB,KAAEA,GAAO,KAASC,GAAc1B,EAChC2B,EAAUhC,EATI,yBAUpB,OACEoB,EAAAC,cAACY,EAAD,CAAkBC,SAAO,EAACvB,YAAaqB,EAAQrB,YAAaC,IAAKoB,EAAQpB,IAAKkB,KAAMA,gBAClFV,EAAAC,cAACI,EAAUC,IAAXC,EAAA,CAAeQ,KAAK,UAAUvB,IAAKoB,EAAQpB,KAASmB,EAApD,CAA+DH,IAAKtB,6BAmB1E,MAAM8B,yBAAcjC,EAAMC,YACxB,CAACC,EAAOC,KACN,MAAMC,MAAEA,EAAF8B,SAASA,GAAW,KAAUC,GAAiBjC,EAC/C2B,EAAUhC,EAXC,eAYXuC,EAAYC,EAAcR,EAAQT,OAAQhB,GAC1CkC,EAAYC,EAAcV,EAAQT,OAAQhB,GAC1CoC,EAAapC,IAAUyB,EAAQzB,MAC/BqC,EAAkBC,GAAe,IAAMb,EAAQvB,cAAcF,kBACnE,OACEa,EAAAC,cAACyB,EAAD,CAAiBZ,SAAO,EAACa,WAAYV,EAAUW,OAAQL,gBACrDvB,EAAAC,cAACI,EAAUC,IAAXC,EAAA,CACEQ,KAAK,MACL,gBAAeQ,EACf,gBAAeF,EACf,gBAAeJ,QAAYY,EAC3B,aAAYN,EAAa,SAAW,WACpC,gBAAeN,EAAW,QAAKY,EAC/BC,GAAIX,GACAD,EARN,CASEV,IAAKtB,EACL6C,UAAWC,EAAqB/C,EAAM8C,WAAYE,IAC3ChB,GAA2B,MAAdgB,EAAMC,KAA6B,UAAdD,EAAMC,KAC3CV,OAGJW,YAAaH,EAAqB/C,EAAMkD,aAAcF,IAG/ChB,GAA6B,IAAjBgB,EAAMG,SAAkC,IAAlBH,EAAMI,SAC3Cb,OAGJc,QAASN,EAAqB/C,EAAMqD,SAAS,KAG3C,MAAMC,EAAmD,WAA3B3B,EAAQnB,eACjC8B,GAAeN,IAAYsB,GAC9Bf,kCAsBd,MAAMgB,yBAAczD,EAAMC,YACxB,CAACC,EAAOC,KACN,MAAMC,MAAEA,EAAFsD,SAASA,KAAaC,GAAiBzD,EACvC2B,EAAUhC,EAVC,eAWXuC,EAAYC,EAAcR,EAAQT,OAAQhB,GAC1CkC,EAAYC,EAAcV,EAAQT,OAAQhB,GAC1CoC,EAAapC,IAAUyB,EAAQzB,mBACrC,OACEa,EAAAC,cAACI,EAAUC,IAAXC,EAAA,CACE,aAAYgB,EAAa,SAAW,WACpC,mBAAkBX,EAAQrB,YAC1BwB,KAAK,WACL,kBAAiBI,EACjBwB,QAASpB,EACTO,GAAIT,EACJuB,SAAU,GACNF,EARN,CASElC,IAAKtB,IAEJqC,GAAckB,mBAUvB,SAASrB,EAAcjB,EAAgBhB,GACrC,MAAQ,GAAEgB,aAAkBhB,IAG9B,SAASmC,EAAcnB,EAAgBhB,GACrC,MAAQ,GAAEgB,aAAkBhB,WAG9B,MAAM0D,KAAO/D,YACb,MAAMgE,KAAOrC,gBACb,MAAMsC,QAAU/B,mBAChB,MAAMgC,QAAUR","sources":["./packages/react/tabs/src/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContext } from '@radix-ui/react-context';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { RovingFocusGroup, RovingFocusItem } from '@radix-ui/react-roving-focus';\nimport { useId } from '@radix-ui/react-id';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs';\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] = createContext<TabsContextValue>(TABS_NAME);\n\ntype TabsElement = React.ElementRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = Radix.ComponentPropsWithoutRef<typeof RovingFocusGroup>;\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 * @defaultValue ltr\n */\n dir?: RovingFocusGroupProps['dir'];\n /** Whether a tab is activated automatically or manually (default: automatic) */\n activationMode?: 'automatic' | 'manual';\n}\n\nconst Tabs = React.forwardRef<TabsElement, TabsProps>((props, forwardedRef) => {\n const {\n value: valueProp,\n onValueChange,\n defaultValue,\n orientation = 'horizontal',\n dir = 'ltr',\n activationMode = 'automatic',\n ...tabsProps\n } = props;\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n return (\n <TabsProvider\n baseId={useId()}\n value={value}\n onValueChange={setValue}\n orientation={orientation}\n dir={dir}\n activationMode={activationMode}\n >\n <Primitive.div data-orientation={orientation} {...tabsProps} ref={forwardedRef} />\n </TabsProvider>\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>((props, forwardedRef) => {\n const { loop = true, ...listProps } = props;\n const context = useTabsContext(TAB_LIST_NAME);\n return (\n <RovingFocusGroup asChild orientation={context.orientation} dir={context.dir} loop={loop}>\n <Primitive.div role=\"tablist\" dir={context.dir} {...listProps} ref={forwardedRef} />\n </RovingFocusGroup>\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.div>;\ninterface TabsTriggerProps extends PrimitiveDivProps {\n value: string;\n disabled?: boolean;\n}\n\nconst TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(\n (props, forwardedRef) => {\n const { value, disabled = false, ...triggerProps } = props;\n const context = useTabsContext(TRIGGER_NAME);\n const triggerId = makeTriggerId(context.baseId, value);\n const contentId = makeContentId(context.baseId, value);\n const isSelected = value === context.value;\n const handleTabChange = useCallbackRef(() => context.onValueChange(value));\n return (\n <RovingFocusItem asChild focusable={!disabled} active={isSelected}>\n <Primitive.div\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={contentId}\n aria-disabled={disabled || undefined}\n data-state={isSelected ? 'active' : 'inactive'}\n data-disabled={disabled ? '' : undefined}\n id={triggerId}\n {...triggerProps}\n ref={forwardedRef}\n onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n if (!disabled && (event.key === ' ' || event.key === 'Enter')) {\n handleTabChange();\n }\n })}\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 handleTabChange();\n }\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 handleTabChange();\n }\n })}\n />\n </RovingFocusItem>\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, forwardedRef) => {\n const { value, children, ...contentProps } = props;\n const context = useTabsContext(CONTENT_NAME);\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 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":["TabsProvider","useTabsContext","createContext","Tabs","React","forwardRef","props","forwardedRef","value","valueProp","onValueChange","defaultValue","orientation","dir","activationMode","tabsProps","setValue","useControllableState","prop","onChange","defaultProp","_react","createElement","$b40a02b2d3d1d21ebd9ba3d555116441$var$TabsProvider","baseId","useId","Primitive","div","_babelRuntimeHelpersEsmExtends","ref","TabsList","loop","listProps","context","RovingFocusGroup","asChild","role","TabsTrigger","disabled","triggerProps","triggerId","makeTriggerId","contentId","makeContentId","isSelected","handleTabChange","useCallbackRef","RovingFocusItem","focusable","active","undefined","id","onKeyDown","composeEventHandlers","event","key","onMouseDown","button","ctrlKey","onFocus","isAutomaticActivation","TabsContent","children","contentProps","hidden","tabIndex","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.1-rc.4",
3
+ "version": "0.1.1-rc.8",
4
4
  "license": "MIT",
5
5
  "source": "src/index.ts",
6
6
  "main": "dist/index.js",
@@ -20,8 +20,8 @@
20
20
  "@radix-ui/primitive": "0.1.0",
21
21
  "@radix-ui/react-context": "0.1.0",
22
22
  "@radix-ui/react-id": "0.1.0",
23
- "@radix-ui/react-primitive": "0.1.1-rc.4",
24
- "@radix-ui/react-roving-focus": "0.1.1-rc.4",
23
+ "@radix-ui/react-primitive": "0.1.1-rc.8",
24
+ "@radix-ui/react-roving-focus": "0.1.1-rc.8",
25
25
  "@radix-ui/react-use-callback-ref": "0.1.0",
26
26
  "@radix-ui/react-use-controllable-state": "0.1.0"
27
27
  },