docusaurus-theme-openapi-docs 4.7.1 → 5.0.0

package/lib/theme/ApiExplorer/Request/makeRequest.js

@@ -89,7 +89,9 @@ async function makeRequest(
   request,
   proxy,
   _body,
-  timeout = DEFAULT_REQUEST_TIMEOUT
+  timeout = DEFAULT_REQUEST_TIMEOUT,
+  credentials,
+  encoding
 ) {
   const headers = request.toJSON().header;
   let myHeaders = new Headers();
@@ -196,12 +198,25 @@ async function makeRequest(
         const members = request.body?.formdata?.members;
         if (Array.isArray(members)) {
           for (const data of members) {
+            const partContentType = encoding?.[data.key]?.contentType
+              ?.split(",")[0]
+              .trim();
             if (data.key && data.value.content) {
-              myBody.append(data.key, data.value.content);
+              const blob = partContentType
+                ? new Blob([data.value.content], { type: partContentType })
+                : data.value.content;
+              myBody.append(data.key, blob);
             }
             // handle generic key-value payload
             if (data.key && typeof data.value === "string") {
-              myBody.append(data.key, data.value);
+              if (partContentType) {
+                myBody.append(
+                  data.key,
+                  new Blob([data.value], { type: partContentType })
+                );
+              } else {
+                myBody.append(data.key, data.value);
+              }
             }
           }
         }
@@ -221,6 +236,7 @@ async function makeRequest(
     method: request.method,
     headers: myHeaders,
     body: myBody,
+    ...(credentials && { credentials }),
   };
   let finalUrl = request.url.toString();
   if (proxy) {

package/lib/theme/ApiExplorer/Response/_Response.scss

@@ -43,6 +43,17 @@
 }
 
 .openapi-explorer__response-clear-btn {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: 0;
+  cursor: pointer;
+  border: 0px solid transparent;
+  background-color: transparent;
+  text-transform: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+
   &:hover {
     cursor: pointer;
   }

package/lib/theme/ApiExplorer/Response/index.js

@@ -5,6 +5,62 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (
+          !desc ||
+          ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
+        ) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o["default"] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  (function () {
+    var ownKeys = function (o) {
+      ownKeys =
+        Object.getOwnPropertyNames ||
+        function (o) {
+          var ar = [];
+          for (var k in o)
+            if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+          return ar;
+        };
+      return ownKeys(o);
+    };
+    return function (mod) {
+      if (mod && mod.__esModule) return mod;
+      var result = {};
+      if (mod != null)
+        for (var k = ownKeys(mod), i = 0; i < k.length; i++)
+          if (k[i] !== "default") __createBinding(result, mod, k[i]);
+      __setModuleDefault(result, mod);
+      return result;
+    };
+  })();
 var __importDefault =
   (this && this.__importDefault) ||
   function (mod) {
@@ -14,7 +70,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const client_1 = require("@docusaurus/plugin-content-docs/client");
 const theme_common_1 = require("@docusaurus/theme-common");
-const Translate_1 = require("@docusaurus/Translate");
+const Translate_1 = __importStar(require("@docusaurus/Translate"));
 const useDocusaurusContext_1 = __importDefault(
   require("@docusaurus/useDocusaurusContext")
 );
@@ -96,8 +152,9 @@ function Response({ item }) {
         })
       ),
       react_1.default.createElement(
-        "span",
+        "button",
         {
+          type: "button",
           className: "openapi-explorer__response-clear-btn",
           onClick: () => {
             dispatch((0, slice_1.clearResponse)());
@@ -157,11 +214,27 @@ function Response({ item }) {
                       className:
                         "openapi-explorer__response-placeholder-message",
                     },
-                    (0, Translate_1.translate)({
-                      id: translationIds_1.OPENAPI_RESPONSE.PLACEHOLDER,
-                      message:
-                        "Click the <code>Send API Request</code> button above and see the response here!",
-                    })
+                    react_1.default.createElement(
+                      Translate_1.default,
+                      {
+                        id: translationIds_1.OPENAPI_RESPONSE.PLACEHOLDER,
+                        values: {
+                          code: react_1.default.createElement(
+                            "code",
+                            null,
+                            react_1.default.createElement(
+                              Translate_1.default,
+                              {
+                                id: translationIds_1.OPENAPI_REQUEST
+                                  .SEND_BUTTON,
+                              },
+                              "Send API Request"
+                            )
+                          ),
+                        },
+                      },
+                      "Click the {code} button above and see the response here!"
+                    )
                   )
               )
             ),
@@ -201,11 +274,24 @@ function Response({ item }) {
           : react_1.default.createElement(
               "p",
               { className: "openapi-explorer__response-placeholder-message" },
-              (0, Translate_1.translate)({
-                id: translationIds_1.OPENAPI_RESPONSE.PLACEHOLDER,
-                message:
-                  "Click the <code>Send API Request</code> button above and see the response here!",
-              })
+              react_1.default.createElement(
+                Translate_1.default,
+                {
+                  id: translationIds_1.OPENAPI_RESPONSE.PLACEHOLDER,
+                  values: {
+                    code: react_1.default.createElement(
+                      "code",
+                      null,
+                      react_1.default.createElement(
+                        Translate_1.default,
+                        { id: translationIds_1.OPENAPI_REQUEST.SEND_BUTTON },
+                        "Send API Request"
+                      )
+                    ),
+                  },
+                },
+                "Click the {code} button above and see the response here!"
+              )
             )
     )
   );

package/lib/theme/ApiExplorer/Server/index.d.ts

@@ -1,3 +1,6 @@
 import React from "react";
-declare function Server(): React.JSX.Element | null;
+interface ServerProps {
+    labelId?: string;
+}
+declare function Server({ labelId }: ServerProps): React.JSX.Element | null;
 export default Server;

package/lib/theme/ApiExplorer/Server/index.js

@@ -80,7 +80,7 @@ const FormTextInput_1 = __importDefault(
 const hooks_1 = require("@theme/ApiItem/hooks");
 const translationIds_1 = require("@theme/translationIds");
 const slice_1 = require("./slice");
-function Server() {
+function Server({ labelId }) {
   const [isEditing, setIsEditing] = (0, react_1.useState)(false);
   const value = (0, hooks_1.useTypedSelector)((state) => state.server.value);
   const options = (0, hooks_1.useTypedSelector)(
@@ -154,6 +154,7 @@ function Server() {
         FormItem_1.default,
         null,
         react_1.default.createElement(FormSelect_1.default, {
+          ariaLabelledBy: labelId,
           options: options.map((s) => s.url),
           onChange: (e) => {
             dispatch(
@@ -177,8 +178,9 @@ function Server() {
           if (value.variables?.[key].enum !== undefined) {
             return react_1.default.createElement(
               FormItem_1.default,
-              { label: key },
+              null,
               react_1.default.createElement(FormSelect_1.default, {
+                label: key,
                 options: value.variables[key].enum,
                 onChange: (e) => {
                   dispatch(
@@ -193,8 +195,9 @@ function Server() {
           }
           return react_1.default.createElement(
             FormItem_1.default,
-            { label: key },
+            null,
             react_1.default.createElement(FormTextInput_1.default, {
+              label: key,
               placeholder: value.variables?.[key].default,
               onChange: (e) => {
                 dispatch(

package/lib/theme/ApiExplorer/buildPostmanRequest.d.ts

@@ -15,6 +15,9 @@ interface Options {
     accept: string;
     body: Body;
     auth: AuthState;
+    encoding?: Record<string, {
+        contentType?: string;
+    }>;
 }
-declare function buildPostmanRequest(postman: sdk.Request, { queryParams, pathParams, cookieParams, contentType, accept, headerParams, body, server, auth, }: Options): sdk.Request;
+declare function buildPostmanRequest(postman: sdk.Request, { queryParams, pathParams, cookieParams, contentType, accept, headerParams, body, server, auth, encoding, }: Options): sdk.Request;
 export default buildPostmanRequest;

package/lib/theme/ApiExplorer/buildPostmanRequest.js

@@ -314,11 +314,30 @@ function tryDecodeJsonParam(value) {
   }
 }
 // TODO: this is all a bit hacky
-function setBody(clonedPostman, body) {
+function setBody(clonedPostman, body, encoding) {
   if (clonedPostman.body === undefined) {
     return;
   }
   if (body.type === "empty") {
+    // When the original request has formdata and encoding is declared, keep the
+    // placeholder params so the code snippet reflects the selected encoding even
+    // before the user has uploaded a file.
+    if (
+      clonedPostman.body?.mode === "formdata" &&
+      encoding &&
+      Object.keys(encoding).length > 0
+    ) {
+      const members = clonedPostman.body.formdata?.members ?? [];
+      members.forEach((param) => {
+        const partContentType = encoding[param.key]?.contentType
+          ?.split(",")[0]
+          .trim();
+        if (partContentType) {
+          param.contentType = partContentType;
+        }
+      });
+      return;
+    }
     clonedPostman.body = undefined;
     return;
   }
@@ -354,14 +373,35 @@ function setBody(clonedPostman, body) {
       Object.entries(body.content)
         .filter((entry) => !!entry[1])
         .forEach(([key, content]) => {
+          const partContentType = encoding?.[key]?.contentType
+            ?.split(",")[0]
+            .trim();
           if (content.type === "file") {
-            params.push(new sdk.FormParam({ key: key, ...content }));
+            params.push(
+              new sdk.FormParam({
+                key: key,
+                ...content,
+                ...(partContentType && { contentType: partContentType }),
+              })
+            );
           } else if (content.type === "file[]") {
             content.value.forEach((file) =>
-              params.push(new sdk.FormParam({ key, value: file }))
+              params.push(
+                new sdk.FormParam({
+                  key,
+                  value: file,
+                  ...(partContentType && { contentType: partContentType }),
+                })
+              )
             );
           } else {
-            params.push(new sdk.FormParam({ key: key, value: content.value }));
+            params.push(
+              new sdk.FormParam({
+                key: key,
+                value: content.value,
+                ...(partContentType && { contentType: partContentType }),
+              })
+            );
           }
         });
       params.forEach((param) => {
@@ -409,6 +449,7 @@ function buildPostmanRequest(
     body,
     server,
     auth,
+    encoding,
   }
 ) {
   const clonedPostman = (0, cloneDeep_1.default)(postman);
@@ -521,7 +562,7 @@ function buildPostmanRequest(
     headerParams,
     otherHeaders
   );
-  setBody(clonedPostman, body);
+  setBody(clonedPostman, body, encoding);
   return clonedPostman;
 }
 exports.default = buildPostmanRequest;

package/lib/theme/ApiExplorer/index.js

@@ -99,6 +99,7 @@ function ApiExplorer({ item, infoPath }) {
         postman: postman,
         codeSamples: item["x-codeSamples"] ?? [],
         maskCredentials: mask_credentials,
+        requestBody: item.requestBody,
       }),
     react_1.default.createElement(Request_1.default, { item: item }),
     react_1.default.createElement(Response_1.default, { item: item })

package/lib/theme/ApiExplorer/persistenceMiddleware.d.ts

@@ -3,6 +3,7 @@ import type { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";
 export declare function createPersistenceMiddleware(options: ThemeConfig["api"]): Middleware<{}, {
     accept: import("./Accept/slice").State;
     contentType: import("./ContentType/slice").State;
+    encodingSelection: import("./EncodingSelection/slice").State;
     response: import("./Response/slice").State;
     server: import("./Server/slice").State;
     body: import("./Body/slice").FormBody | import("./Body/slice").RawBody | import("./Body/slice").EmptyBody;
@@ -12,6 +13,7 @@ export declare function createPersistenceMiddleware(options: ThemeConfig["api"])
 }, import("redux-thunk").ThunkDispatch<{
     accept: import("./Accept/slice").State;
     contentType: import("./ContentType/slice").State;
+    encodingSelection: import("./EncodingSelection/slice").State;
     response: import("./Response/slice").State;
     server: import("./Server/slice").State;
     body: import("./Body/slice").FormBody | import("./Body/slice").RawBody | import("./Body/slice").EmptyBody;

package/lib/theme/ApiItem/hooks.d.ts

@@ -3,6 +3,7 @@ import type { RootState } from "./store";
 export declare const useTypedDispatch: () => import("redux-thunk").ThunkDispatch<{
     accept: import("../ApiExplorer/Accept/slice").State;
     contentType: import("../ApiExplorer/ContentType/slice").State;
+    encodingSelection: import("../ApiExplorer/EncodingSelection/slice").State;
     response: import("../ApiExplorer/Response/slice").State;
     server: import("../ApiExplorer/Server/slice").State;
     body: import("../ApiExplorer/Body/slice").FormBody | import("../ApiExplorer/Body/slice").RawBody | import("../ApiExplorer/Body/slice").EmptyBody;

package/lib/theme/ApiItem/index.js

@@ -100,7 +100,7 @@ function ApiItem(props) {
     api?.parameters?.forEach((param) => {
       const paramType = param.in;
       const paramsArray = params[paramType];
-      paramsArray.push(param);
+      paramsArray?.push(param);
     });
     const auth = (0, slice_1.createAuth)({
       security: api?.security,
@@ -134,6 +134,7 @@ function ApiItem(props) {
         params,
         auth,
         schemaSelection: { selections: {} },
+        encodingSelection: {},
       },
       [persistenceMiddleware]
     );

package/lib/theme/ApiItem/store.d.ts

@@ -1,6 +1,7 @@
 declare const rootReducer: import("redux").Reducer<{
     accept: import("@theme/ApiExplorer/Accept/slice").State;
     contentType: import("@theme/ApiExplorer/ContentType/slice").State;
+    encodingSelection: import("@theme/ApiExplorer/EncodingSelection/slice").State;
     response: import("@theme/ApiExplorer/Response/slice").State;
     server: import("@theme/ApiExplorer/Server/slice").State;
     body: import("@theme/ApiExplorer/Body/slice").FormBody | import("@theme/ApiExplorer/Body/slice").RawBody | import("@theme/ApiExplorer/Body/slice").EmptyBody;
@@ -10,6 +11,7 @@ declare const rootReducer: import("redux").Reducer<{
 }, import("redux").UnknownAction, Partial<{
     accept: import("@theme/ApiExplorer/Accept/slice").State | undefined;
     contentType: import("@theme/ApiExplorer/ContentType/slice").State | undefined;
+    encodingSelection: import("@theme/ApiExplorer/EncodingSelection/slice").State | undefined;
     response: import("@theme/ApiExplorer/Response/slice").State | undefined;
     server: import("@theme/ApiExplorer/Server/slice").State | undefined;
     body: import("@theme/ApiExplorer/Body/slice").FormBody | import("@theme/ApiExplorer/Body/slice").RawBody | import("@theme/ApiExplorer/Body/slice").EmptyBody | undefined;
@@ -21,6 +23,7 @@ export type RootState = ReturnType<typeof rootReducer>;
 export declare const createStoreWithState: (preloadedState: RootState, middlewares: any[]) => import("@reduxjs/toolkit").EnhancedStore<{
     accept: import("@theme/ApiExplorer/Accept/slice").State;
     contentType: import("@theme/ApiExplorer/ContentType/slice").State;
+    encodingSelection: import("@theme/ApiExplorer/EncodingSelection/slice").State;
     response: import("@theme/ApiExplorer/Response/slice").State;
     server: import("@theme/ApiExplorer/Server/slice").State;
     body: import("@theme/ApiExplorer/Body/slice").FormBody | import("@theme/ApiExplorer/Body/slice").RawBody | import("@theme/ApiExplorer/Body/slice").EmptyBody;
@@ -31,6 +34,7 @@ export declare const createStoreWithState: (preloadedState: RootState, middlewar
     dispatch: import("redux-thunk").ThunkDispatch<{
         accept: import("@theme/ApiExplorer/Accept/slice").State;
         contentType: import("@theme/ApiExplorer/ContentType/slice").State;
+        encodingSelection: import("@theme/ApiExplorer/EncodingSelection/slice").State;
         response: import("@theme/ApiExplorer/Response/slice").State;
         server: import("@theme/ApiExplorer/Server/slice").State;
         body: import("@theme/ApiExplorer/Body/slice").FormBody | import("@theme/ApiExplorer/Body/slice").RawBody | import("@theme/ApiExplorer/Body/slice").EmptyBody;
@@ -42,6 +46,7 @@ export declare const createStoreWithState: (preloadedState: RootState, middlewar
 export declare const createStoreWithoutState: (preloadedState: {}, middlewares: any[]) => import("@reduxjs/toolkit").EnhancedStore<{
     accept: import("@theme/ApiExplorer/Accept/slice").State;
     contentType: import("@theme/ApiExplorer/ContentType/slice").State;
+    encodingSelection: import("@theme/ApiExplorer/EncodingSelection/slice").State;
     response: import("@theme/ApiExplorer/Response/slice").State;
     server: import("@theme/ApiExplorer/Server/slice").State;
     body: import("@theme/ApiExplorer/Body/slice").FormBody | import("@theme/ApiExplorer/Body/slice").RawBody | import("@theme/ApiExplorer/Body/slice").EmptyBody;
@@ -52,6 +57,7 @@ export declare const createStoreWithoutState: (preloadedState: {}, middlewares:
     dispatch: import("redux-thunk").ThunkDispatch<{
         accept: import("@theme/ApiExplorer/Accept/slice").State;
         contentType: import("@theme/ApiExplorer/ContentType/slice").State;
+        encodingSelection: import("@theme/ApiExplorer/EncodingSelection/slice").State;
         response: import("@theme/ApiExplorer/Response/slice").State;
         server: import("@theme/ApiExplorer/Server/slice").State;
         body: import("@theme/ApiExplorer/Body/slice").FormBody | import("@theme/ApiExplorer/Body/slice").RawBody | import("@theme/ApiExplorer/Body/slice").EmptyBody;

package/lib/theme/ApiItem/store.js

@@ -22,22 +22,26 @@ const slice_4 = __importDefault(
   require("@theme/ApiExplorer/ContentType/slice")
 );
 const slice_5 = __importDefault(
+  require("@theme/ApiExplorer/EncodingSelection/slice")
+);
+const slice_6 = __importDefault(
   require("@theme/ApiExplorer/ParamOptions/slice")
 );
-const slice_6 = __importDefault(require("@theme/ApiExplorer/Response/slice"));
-const slice_7 = __importDefault(
+const slice_7 = __importDefault(require("@theme/ApiExplorer/Response/slice"));
+const slice_8 = __importDefault(
   require("@theme/ApiExplorer/SchemaSelection/slice")
 );
-const slice_8 = __importDefault(require("@theme/ApiExplorer/Server/slice"));
+const slice_9 = __importDefault(require("@theme/ApiExplorer/Server/slice"));
 const rootReducer = (0, toolkit_1.combineReducers)({
   accept: slice_1.default,
   contentType: slice_4.default,
-  response: slice_6.default,
-  server: slice_8.default,
+  encodingSelection: slice_5.default,
+  response: slice_7.default,
+  server: slice_9.default,
   body: slice_3.default,
-  params: slice_5.default,
+  params: slice_6.default,
   auth: slice_2.default,
-  schemaSelection: slice_7.default,
+  schemaSelection: slice_8.default,
 });
 const createStoreWithState = (preloadedState, middlewares) =>
   (0, toolkit_1.configureStore)({

package/lib/theme/ApiTabs/index.js

@@ -241,21 +241,20 @@ function TabContent({ lazy, children, selectedValue }) {
   return react_1.default.createElement(
     "div",
     { className: "margin-top--md" },
-    childTabs.map((tabItem, i) =>
-      (0, react_1.cloneElement)(tabItem, {
-        key: i,
-        hidden: tabItem.props.value !== selectedValue,
-      })
-    )
+    childTabs
   );
 }
 function TabsComponent(props) {
-  const tabs = (0, internal_1.useTabs)(props);
+  const tabs = (0, internal_1.useTabsContextValue)(props);
   return react_1.default.createElement(
-    "div",
-    { className: "openapi-tabs__container" },
-    react_1.default.createElement(TabList, { ...props, ...tabs }),
-    react_1.default.createElement(TabContent, { ...props, ...tabs })
+    internal_1.TabsProvider,
+    { value: tabs },
+    react_1.default.createElement(
+      "div",
+      { className: "openapi-tabs__container" },
+      react_1.default.createElement(TabList, { ...props, ...tabs }),
+      react_1.default.createElement(TabContent, { ...props, ...tabs })
+    )
   );
 }
 function ApiTabs(props) {

package/lib/theme/DiscriminatorTabs/index.js

@@ -219,21 +219,20 @@ function TabContent({ lazy, children, selectedValue }) {
   return react_1.default.createElement(
     "div",
     { className: "margin-top--md" },
-    childTabs.map((tabItem, i) =>
-      (0, react_1.cloneElement)(tabItem, {
-        key: i,
-        hidden: tabItem.props.value !== selectedValue,
-      })
-    )
+    childTabs
   );
 }
 function TabsComponent(props) {
-  const tabs = (0, internal_1.useTabs)(props);
+  const tabs = (0, internal_1.useTabsContextValue)(props);
   return react_1.default.createElement(
-    "div",
-    { className: "openapi-tabs__container" },
-    react_1.default.createElement(TabList, { ...props, ...tabs }),
-    react_1.default.createElement(TabContent, { ...props, ...tabs })
+    internal_1.TabsProvider,
+    { value: tabs },
+    react_1.default.createElement(
+      "div",
+      { className: "openapi-tabs__container" },
+      react_1.default.createElement(TabList, { ...props, ...tabs }),
+      react_1.default.createElement(TabContent, { ...props, ...tabs })
+    )
   );
 }
 function DiscriminatorTabs(props) {

package/lib/theme/MimeTabs/index.js

@@ -252,21 +252,20 @@ function TabContent({ lazy, children, selectedValue }) {
   return react_1.default.createElement(
     "div",
     { className: "margin-top--md" },
-    childTabs.map((tabItem, i) =>
-      (0, react_1.cloneElement)(tabItem, {
-        key: i,
-        hidden: tabItem.props.value !== selectedValue,
-      })
-    )
+    childTabs
   );
 }
 function TabsComponent(props) {
-  const tabs = (0, internal_1.useTabs)(props);
+  const tabs = (0, internal_1.useTabsContextValue)(props);
   return react_1.default.createElement(
-    "div",
-    { className: "tabs-container" },
-    react_1.default.createElement(TabList, { ...props, ...tabs }),
-    react_1.default.createElement(TabContent, { ...props, ...tabs })
+    internal_1.TabsProvider,
+    { value: tabs },
+    react_1.default.createElement(
+      "div",
+      { className: "tabs-container" },
+      react_1.default.createElement(TabList, { ...props, ...tabs }),
+      react_1.default.createElement(TabContent, { ...props, ...tabs })
+    )
   );
 }
 function MimeTabs(props) {

package/lib/theme/OperationTabs/index.js

@@ -214,21 +214,20 @@ function TabContent({ lazy, children, selectedValue }) {
   return react_1.default.createElement(
     "div",
     { className: "margin-top--md" },
-    childTabs.map((tabItem, i) =>
-      (0, react_1.cloneElement)(tabItem, {
-        key: i,
-        hidden: tabItem.props.value !== selectedValue,
-      })
-    )
+    childTabs
   );
 }
 function TabsComponent(props) {
-  const tabs = (0, internal_1.useTabs)(props);
+  const tabs = (0, internal_1.useTabsContextValue)(props);
   return react_1.default.createElement(
-    "div",
-    { className: "tabs-container" },
-    react_1.default.createElement(TabList, { ...props, ...tabs }),
-    react_1.default.createElement(TabContent, { ...props, ...tabs })
+    internal_1.TabsProvider,
+    { value: tabs },
+    react_1.default.createElement(
+      "div",
+      { className: "tabs-container" },
+      react_1.default.createElement(TabList, { ...props, ...tabs }),
+      react_1.default.createElement(TabContent, { ...props, ...tabs })
+    )
   );
 }
 function OperationTabs(props) {