index.mjs 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. import $1IHzk$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
  2. import {forwardRef as $1IHzk$forwardRef, createElement as $1IHzk$createElement, useRef as $1IHzk$useRef, useEffect as $1IHzk$useEffect} from "react";
  3. import {composeEventHandlers as $1IHzk$composeEventHandlers} from "@radix-ui/primitive";
  4. import {createContextScope as $1IHzk$createContextScope} from "@radix-ui/react-context";
  5. import {createRovingFocusGroupScope as $1IHzk$createRovingFocusGroupScope, Root as $1IHzk$Root, Item as $1IHzk$Item} from "@radix-ui/react-roving-focus";
  6. import {Presence as $1IHzk$Presence} from "@radix-ui/react-presence";
  7. import {Primitive as $1IHzk$Primitive} from "@radix-ui/react-primitive";
  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";
  11. /* -------------------------------------------------------------------------------------------------
  12. * Tabs
  13. * -----------------------------------------------------------------------------------------------*/ const $69cb30bb0017df05$var$TABS_NAME = 'Tabs';
  14. const [$69cb30bb0017df05$var$createTabsContext, $69cb30bb0017df05$export$355f5bd209d7b13a] = $1IHzk$createContextScope($69cb30bb0017df05$var$TABS_NAME, [
  15. $1IHzk$createRovingFocusGroupScope
  16. ]);
  17. const $69cb30bb0017df05$var$useRovingFocusGroupScope = $1IHzk$createRovingFocusGroupScope();
  18. const [$69cb30bb0017df05$var$TabsProvider, $69cb30bb0017df05$var$useTabsContext] = $69cb30bb0017df05$var$createTabsContext($69cb30bb0017df05$var$TABS_NAME);
  19. const $69cb30bb0017df05$export$b2539bed5023c21c = /*#__PURE__*/ $1IHzk$forwardRef((props, forwardedRef)=>{
  20. const { __scopeTabs: __scopeTabs , value: valueProp , onValueChange: onValueChange , defaultValue: defaultValue , orientation: orientation = 'horizontal' , dir: dir , activationMode: activationMode = 'automatic' , ...tabsProps } = props;
  21. const direction = $1IHzk$useDirection(dir);
  22. const [value, setValue] = $1IHzk$useControllableState({
  23. prop: valueProp,
  24. onChange: onValueChange,
  25. defaultProp: defaultValue
  26. });
  27. return /*#__PURE__*/ $1IHzk$createElement($69cb30bb0017df05$var$TabsProvider, {
  28. scope: __scopeTabs,
  29. baseId: $1IHzk$useId(),
  30. value: value,
  31. onValueChange: setValue,
  32. orientation: orientation,
  33. dir: direction,
  34. activationMode: activationMode
  35. }, /*#__PURE__*/ $1IHzk$createElement($1IHzk$Primitive.div, $1IHzk$babelruntimehelpersesmextends({
  36. dir: direction,
  37. "data-orientation": orientation
  38. }, tabsProps, {
  39. ref: forwardedRef
  40. })));
  41. });
  42. /*#__PURE__*/ Object.assign($69cb30bb0017df05$export$b2539bed5023c21c, {
  43. displayName: $69cb30bb0017df05$var$TABS_NAME
  44. });
  45. /* -------------------------------------------------------------------------------------------------
  46. * TabsList
  47. * -----------------------------------------------------------------------------------------------*/ const $69cb30bb0017df05$var$TAB_LIST_NAME = 'TabsList';
  48. const $69cb30bb0017df05$export$9712d22edc0d78c1 = /*#__PURE__*/ $1IHzk$forwardRef((props, forwardedRef)=>{
  49. const { __scopeTabs: __scopeTabs , loop: loop = true , ...listProps } = props;
  50. const context = $69cb30bb0017df05$var$useTabsContext($69cb30bb0017df05$var$TAB_LIST_NAME, __scopeTabs);
  51. const rovingFocusGroupScope = $69cb30bb0017df05$var$useRovingFocusGroupScope(__scopeTabs);
  52. return /*#__PURE__*/ $1IHzk$createElement($1IHzk$Root, $1IHzk$babelruntimehelpersesmextends({
  53. asChild: true
  54. }, rovingFocusGroupScope, {
  55. orientation: context.orientation,
  56. dir: context.dir,
  57. loop: loop
  58. }), /*#__PURE__*/ $1IHzk$createElement($1IHzk$Primitive.div, $1IHzk$babelruntimehelpersesmextends({
  59. role: "tablist",
  60. "aria-orientation": context.orientation
  61. }, listProps, {
  62. ref: forwardedRef
  63. })));
  64. });
  65. /*#__PURE__*/ Object.assign($69cb30bb0017df05$export$9712d22edc0d78c1, {
  66. displayName: $69cb30bb0017df05$var$TAB_LIST_NAME
  67. });
  68. /* -------------------------------------------------------------------------------------------------
  69. * TabsTrigger
  70. * -----------------------------------------------------------------------------------------------*/ const $69cb30bb0017df05$var$TRIGGER_NAME = 'TabsTrigger';
  71. const $69cb30bb0017df05$export$8114b9fdfdf9f3ba = /*#__PURE__*/ $1IHzk$forwardRef((props, forwardedRef)=>{
  72. const { __scopeTabs: __scopeTabs , value: value , disabled: disabled = false , ...triggerProps } = props;
  73. const context = $69cb30bb0017df05$var$useTabsContext($69cb30bb0017df05$var$TRIGGER_NAME, __scopeTabs);
  74. const rovingFocusGroupScope = $69cb30bb0017df05$var$useRovingFocusGroupScope(__scopeTabs);
  75. const triggerId = $69cb30bb0017df05$var$makeTriggerId(context.baseId, value);
  76. const contentId = $69cb30bb0017df05$var$makeContentId(context.baseId, value);
  77. const isSelected = value === context.value;
  78. return /*#__PURE__*/ $1IHzk$createElement($1IHzk$Item, $1IHzk$babelruntimehelpersesmextends({
  79. asChild: true
  80. }, rovingFocusGroupScope, {
  81. focusable: !disabled,
  82. active: isSelected
  83. }), /*#__PURE__*/ $1IHzk$createElement($1IHzk$Primitive.button, $1IHzk$babelruntimehelpersesmextends({
  84. type: "button",
  85. role: "tab",
  86. "aria-selected": isSelected,
  87. "aria-controls": contentId,
  88. "data-state": isSelected ? 'active' : 'inactive',
  89. "data-disabled": disabled ? '' : undefined,
  90. disabled: disabled,
  91. id: triggerId
  92. }, triggerProps, {
  93. ref: forwardedRef,
  94. onMouseDown: $1IHzk$composeEventHandlers(props.onMouseDown, (event)=>{
  95. // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
  96. // but not when the control key is pressed (avoiding MacOS right click)
  97. if (!disabled && event.button === 0 && event.ctrlKey === false) context.onValueChange(value);
  98. else // prevent focus to avoid accidental activation
  99. event.preventDefault();
  100. }),
  101. onKeyDown: $1IHzk$composeEventHandlers(props.onKeyDown, (event)=>{
  102. if ([
  103. ' ',
  104. 'Enter'
  105. ].includes(event.key)) context.onValueChange(value);
  106. }),
  107. onFocus: $1IHzk$composeEventHandlers(props.onFocus, ()=>{
  108. // handle "automatic" activation if necessary
  109. // ie. activate tab following focus
  110. const isAutomaticActivation = context.activationMode !== 'manual';
  111. if (!isSelected && !disabled && isAutomaticActivation) context.onValueChange(value);
  112. })
  113. })));
  114. });
  115. /*#__PURE__*/ Object.assign($69cb30bb0017df05$export$8114b9fdfdf9f3ba, {
  116. displayName: $69cb30bb0017df05$var$TRIGGER_NAME
  117. });
  118. /* -------------------------------------------------------------------------------------------------
  119. * TabsContent
  120. * -----------------------------------------------------------------------------------------------*/ const $69cb30bb0017df05$var$CONTENT_NAME = 'TabsContent';
  121. const $69cb30bb0017df05$export$bd905d70e8fd2ebb = /*#__PURE__*/ $1IHzk$forwardRef((props, forwardedRef)=>{
  122. const { __scopeTabs: __scopeTabs , value: value , forceMount: forceMount , children: children , ...contentProps } = props;
  123. const context = $69cb30bb0017df05$var$useTabsContext($69cb30bb0017df05$var$CONTENT_NAME, __scopeTabs);
  124. const triggerId = $69cb30bb0017df05$var$makeTriggerId(context.baseId, value);
  125. const contentId = $69cb30bb0017df05$var$makeContentId(context.baseId, value);
  126. const isSelected = value === context.value;
  127. const isMountAnimationPreventedRef = $1IHzk$useRef(isSelected);
  128. $1IHzk$useEffect(()=>{
  129. const rAF = requestAnimationFrame(()=>isMountAnimationPreventedRef.current = false
  130. );
  131. return ()=>cancelAnimationFrame(rAF)
  132. ;
  133. }, []);
  134. return /*#__PURE__*/ $1IHzk$createElement($1IHzk$Presence, {
  135. present: forceMount || isSelected
  136. }, ({ present: present })=>/*#__PURE__*/ $1IHzk$createElement($1IHzk$Primitive.div, $1IHzk$babelruntimehelpersesmextends({
  137. "data-state": isSelected ? 'active' : 'inactive',
  138. "data-orientation": context.orientation,
  139. role: "tabpanel",
  140. "aria-labelledby": triggerId,
  141. hidden: !present,
  142. id: contentId,
  143. tabIndex: 0
  144. }, contentProps, {
  145. ref: forwardedRef,
  146. style: {
  147. ...props.style,
  148. animationDuration: isMountAnimationPreventedRef.current ? '0s' : undefined
  149. }
  150. }), present && children)
  151. );
  152. });
  153. /*#__PURE__*/ Object.assign($69cb30bb0017df05$export$bd905d70e8fd2ebb, {
  154. displayName: $69cb30bb0017df05$var$CONTENT_NAME
  155. });
  156. /* ---------------------------------------------------------------------------------------------- */ function $69cb30bb0017df05$var$makeTriggerId(baseId, value) {
  157. return `${baseId}-trigger-${value}`;
  158. }
  159. function $69cb30bb0017df05$var$makeContentId(baseId, value) {
  160. return `${baseId}-content-${value}`;
  161. }
  162. const $69cb30bb0017df05$export$be92b6f5f03c0fe9 = $69cb30bb0017df05$export$b2539bed5023c21c;
  163. const $69cb30bb0017df05$export$54c2e3dc7acea9f5 = $69cb30bb0017df05$export$9712d22edc0d78c1;
  164. const $69cb30bb0017df05$export$41fb9f06171c75f4 = $69cb30bb0017df05$export$8114b9fdfdf9f3ba;
  165. const $69cb30bb0017df05$export$7c6e2c02157bb7d2 = $69cb30bb0017df05$export$bd905d70e8fd2ebb;
  166. export {$69cb30bb0017df05$export$355f5bd209d7b13a as createTabsScope, $69cb30bb0017df05$export$b2539bed5023c21c as Tabs, $69cb30bb0017df05$export$9712d22edc0d78c1 as TabsList, $69cb30bb0017df05$export$8114b9fdfdf9f3ba as TabsTrigger, $69cb30bb0017df05$export$bd905d70e8fd2ebb as TabsContent, $69cb30bb0017df05$export$be92b6f5f03c0fe9 as Root, $69cb30bb0017df05$export$54c2e3dc7acea9f5 as List, $69cb30bb0017df05$export$41fb9f06171c75f4 as Trigger, $69cb30bb0017df05$export$7c6e2c02157bb7d2 as Content};
  167. //# sourceMappingURL=index.mjs.map