index.js 11 KB

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