docusaurus-theme-openapi-docs 4.7.0 → 5.0.0

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

@@ -6,6 +6,7 @@ export interface Props {
     postman: sdk.Request;
     codeSamples: CodeSample[];
     maskCredentials?: boolean;
+    requestBody?: import("docusaurus-plugin-openapi-docs/src/openapi/types").RequestBodyObject;
 }
-declare function CodeSnippets({ postman, codeSamples, maskCredentials: propMaskCredentials, }: Props): React.JSX.Element | null;
+declare function CodeSnippets({ postman, codeSamples, maskCredentials: propMaskCredentials, requestBody, }: Props): React.JSX.Element | null;
 export default CodeSnippets;

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

@@ -79,6 +79,7 @@ const buildPostmanRequest_1 = __importDefault(
   require("@theme/ApiExplorer/buildPostmanRequest")
 );
 const CodeTabs_1 = __importDefault(require("@theme/ApiExplorer/CodeTabs"));
+const useResolvedEncoding_1 = require("@theme/ApiExplorer/EncodingSelection/useResolvedEncoding");
 const hooks_1 = require("@theme/ApiItem/hooks");
 const cloneDeep_1 = __importDefault(require("lodash/cloneDeep"));
 const postman_code_generators_1 = __importDefault(
@@ -97,6 +98,7 @@ function CodeSnippets({
   postman,
   codeSamples,
   maskCredentials: propMaskCredentials,
+  requestBody,
 }) {
   const { siteConfig } = (0, useDocusaurusContext_1.default)();
   const contentType = (0, hooks_1.useTypedSelector)(
@@ -147,6 +149,7 @@ function CodeSnippets({
         };
       })()
     : auth;
+  const encoding = (0, useResolvedEncoding_1.useResolvedEncoding)(requestBody);
   // Create a Postman request object using cleanedAuth or original auth
   const cleanedPostmanRequest = (0, buildPostmanRequest_1.default)(postman, {
     queryParams,
@@ -158,6 +161,7 @@ function CodeSnippets({
     body,
     server,
     auth: cleanedAuth,
+    encoding,
   });
   // User-defined languages array
   // Can override languageSet, change order of langs, override options and variants

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

@@ -231,27 +231,26 @@ function TabContent({ lazy, children, selectedValue }) {
   return react_1.default.createElement(
     "div",
     { className: "margin-top--md openapi-tabs__code-content" },
-    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);
   const { className } = props;
   return react_1.default.createElement(
-    "div",
-    {
-      className: (0, clsx_1.default)(
-        "tabs-container openapi-tabs__code-container",
-        className
-      ),
-    },
-    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: (0, clsx_1.default)(
+          "tabs-container openapi-tabs__code-container",
+          className
+        ),
+      },
+      react_1.default.createElement(TabList, { ...props, ...tabs }),
+      react_1.default.createElement(TabContent, { ...props, ...tabs })
+    )
   );
 }
 function CodeTabs(props) {

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

@@ -16,6 +16,7 @@ const FormItem_1 = __importDefault(require("@theme/ApiExplorer/FormItem"));
 const FormSelect_1 = __importDefault(require("@theme/ApiExplorer/FormSelect"));
 const hooks_1 = require("@theme/ApiItem/hooks");
 const slice_1 = require("./slice");
+const slice_2 = require("@theme/ApiExplorer/EncodingSelection/slice");
 function ContentType() {
   const value = (0, hooks_1.useTypedSelector)(
     (state) => state.contentType.value
@@ -29,11 +30,15 @@ function ContentType() {
   }
   return react_1.default.createElement(
     FormItem_1.default,
-    { label: "Content-Type" },
+    null,
     react_1.default.createElement(FormSelect_1.default, {
+      label: "Content-Type",
       value: value,
       options: options,
-      onChange: (e) => dispatch((0, slice_1.setContentType)(e.target.value)),
+      onChange: (e) => {
+        dispatch((0, slice_1.setContentType)(e.target.value));
+        dispatch((0, slice_2.clearEncodingSelection)());
+      },
     })
   );
 }

package/lib/theme/ApiExplorer/EncodingSelection/slice.d.ts

@@ -0,0 +1,17 @@
+import { PayloadAction } from "@reduxjs/toolkit";
+export type State = Record<string, string>;
+export declare const slice: import("@reduxjs/toolkit").Slice<State, {
+    setFieldEncoding: (state: {
+        [x: string]: string;
+    }, action: PayloadAction<{
+        field: string;
+        contentType: string;
+    }>) => void;
+    clearEncodingSelection: () => State;
+}, "encodingSelection", "encodingSelection", import("@reduxjs/toolkit").SliceSelectors<State>>;
+export declare const setFieldEncoding: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    field: string;
+    contentType: string;
+}, "encodingSelection/setFieldEncoding">, clearEncodingSelection: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"encodingSelection/clearEncodingSelection">;
+declare const _default: import("redux").Reducer<State>;
+export default _default;

package/lib/theme/ApiExplorer/EncodingSelection/slice.js

@@ -0,0 +1,29 @@
+"use strict";
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clearEncodingSelection =
+  exports.setFieldEncoding =
+  exports.slice =
+    void 0;
+const toolkit_1 = require("@reduxjs/toolkit");
+const initialState = {};
+exports.slice = (0, toolkit_1.createSlice)({
+  name: "encodingSelection",
+  initialState,
+  reducers: {
+    setFieldEncoding: (state, action) => {
+      state[action.payload.field] = action.payload.contentType;
+    },
+    clearEncodingSelection: () => initialState,
+  },
+});
+((_a = exports.slice.actions),
+  (exports.setFieldEncoding = _a.setFieldEncoding),
+  (exports.clearEncodingSelection = _a.clearEncodingSelection));
+exports.default = exports.slice.reducer;

package/lib/theme/ApiExplorer/EncodingSelection/useResolvedEncoding.d.ts

@@ -0,0 +1,12 @@
+import type { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
+/**
+ * Merges the spec-declared `encoding` for the active content type with any
+ * per-field content-type selections the user has made in the UI.  User picks
+ * take precedence over the spec default.
+ *
+ * Returns `undefined` when no encoding is declared for the current content
+ * type so callers can skip the encoding path entirely.
+ */
+export declare function useResolvedEncoding(requestBody: RequestBodyObject | undefined): Record<string, {
+    contentType?: string;
+}> | undefined;

package/lib/theme/ApiExplorer/EncodingSelection/useResolvedEncoding.js

@@ -0,0 +1,39 @@
+"use strict";
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResolvedEncoding = useResolvedEncoding;
+const hooks_1 = require("@theme/ApiItem/hooks");
+/**
+ * Merges the spec-declared `encoding` for the active content type with any
+ * per-field content-type selections the user has made in the UI.  User picks
+ * take precedence over the spec default.
+ *
+ * Returns `undefined` when no encoding is declared for the current content
+ * type so callers can skip the encoding path entirely.
+ */
+function useResolvedEncoding(requestBody) {
+  const contentType = (0, hooks_1.useTypedSelector)(
+    (state) => state.contentType.value
+  );
+  const encodingSelection = (0, hooks_1.useTypedSelector)(
+    (state) => state.encodingSelection
+  );
+  const specEncoding = requestBody?.content?.[contentType]?.encoding ?? {};
+  if (!Object.keys(specEncoding).length) {
+    return undefined;
+  }
+  return Object.fromEntries(
+    Object.entries(specEncoding).map(([field, enc]) => [
+      field,
+      {
+        ...enc,
+        contentType: encodingSelection[field] ?? enc.contentType,
+      },
+    ])
+  );
+}

package/lib/theme/ApiExplorer/FormItem/_FormItem.scss

@@ -14,8 +14,3 @@
 .openapi-explorer__form-item-body-container {
   padding: 0;
 }
-
-.openapi-explorer__form-item-label {
-  font-family: var(--ifm-font-family-monospace);
-  font-weight: bold;
-}

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

@@ -1,10 +1,7 @@
 import React from "react";
 export interface Props {
-    label?: string;
-    type?: string;
-    required?: boolean | undefined;
     children?: React.ReactNode;
     className?: string;
 }
-declare function FormItem({ label, type, required, children, className }: Props): React.JSX.Element;
+declare function FormItem({ children, className }: Props): React.JSX.Element;
 export default FormItem;

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

@@ -12,38 +12,14 @@ var __importDefault =
   };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const Translate_1 = require("@docusaurus/Translate");
-const translationIds_1 = require("@theme/translationIds");
 const clsx_1 = __importDefault(require("clsx"));
-function FormItem({ label, type, required, children, className }) {
+function FormItem({ children, className }) {
   return react_1.default.createElement(
     "div",
     {
       className: (0, clsx_1.default)("openapi-explorer__form-item", className),
     },
-    label &&
-      react_1.default.createElement(
-        "label",
-        { className: "openapi-explorer__form-item-label" },
-        label
-      ),
-    type &&
-      react_1.default.createElement(
-        "span",
-        { style: { opacity: 0.6 } },
-        " \u2014 ",
-        type
-      ),
-    required &&
-      react_1.default.createElement(
-        "span",
-        { className: "openapi-schema__required" },
-        (0, Translate_1.translate)({
-          id: translationIds_1.OPENAPI_SCHEMA_ITEM.REQUIRED,
-          message: "required",
-        })
-      ),
-    react_1.default.createElement("div", null, children)
+    children
   );
 }
 exports.default = FormItem;

package/lib/theme/ApiExplorer/FormLabel/_FormLabel.scss

@@ -0,0 +1,4 @@
+.openapi-explorer__form-item-label {
+  font-family: var(--ifm-font-family-monospace);
+  font-weight: bold;
+}

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

@@ -0,0 +1,9 @@
+import React from "react";
+export interface Props {
+    htmlFor?: string;
+    label: string;
+    type?: string;
+    required?: boolean;
+}
+declare function FormLabel({ htmlFor, label, type, required }: Props): React.JSX.Element;
+export default FormLabel;

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

@@ -0,0 +1,50 @@
+"use strict";
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Translate_1 = require("@docusaurus/Translate");
+const translationIds_1 = require("@theme/translationIds");
+function FormLabel({ htmlFor, label, type, required }) {
+  return react_1.default.createElement(
+    react_1.default.Fragment,
+    null,
+    htmlFor
+      ? react_1.default.createElement(
+          "label",
+          { className: "openapi-explorer__form-item-label", htmlFor: htmlFor },
+          label
+        )
+      : react_1.default.createElement(
+          "span",
+          { className: "openapi-explorer__form-item-label" },
+          label
+        ),
+    type &&
+      react_1.default.createElement(
+        "span",
+        { style: { opacity: 0.6 } },
+        " \u2014 ",
+        type
+      ),
+    required &&
+      react_1.default.createElement(
+        "span",
+        { className: "openapi-schema__required" },
+        (0, Translate_1.translate)({
+          id: translationIds_1.OPENAPI_SCHEMA_ITEM.REQUIRED,
+          message: "required",
+        })
+      )
+  );
+}
+exports.default = FormLabel;

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

@@ -4,6 +4,9 @@ export interface Props {
     options: string[];
     onChange?: React.ChangeEventHandler<HTMLSelectElement>;
     showErrors?: boolean;
+    label?: string;
+    type?: string;
+    required?: boolean;
 }
-declare function FormMultiSelect({ value, options, onChange, showErrors }: Props): React.JSX.Element | null;
+declare function FormMultiSelect({ value, options, onChange, showErrors, label, type, required, }: Props): React.JSX.Element | null;
 export default FormMultiSelect;

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

@@ -5,15 +5,81 @@
  * 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) {
     return mod && mod.__esModule ? mod : { default: mod };
   };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
+const FormLabel_1 = __importDefault(require("@theme/ApiExplorer/FormLabel"));
 const clsx_1 = __importDefault(require("clsx"));
-function FormMultiSelect({ value, options, onChange, showErrors }) {
+function FormMultiSelect({
+  value,
+  options,
+  onChange,
+  showErrors,
+  label,
+  type,
+  required,
+}) {
+  const id = (0, react_1.useId)();
   if (options.length === 0) {
     return null;
   }
@@ -28,24 +94,36 @@ function FormMultiSelect({ value, options, onChange, showErrors }) {
       rawHeight + innerMargins + outerMargins + selectPadding + mysteryScroll;
   }
   return react_1.default.createElement(
-    "select",
-    {
-      style: { height: height },
-      className: (0, clsx_1.default)("openapi-explorer__multi-select-input", {
-        error: showErrors,
+    react_1.default.Fragment,
+    null,
+    label &&
+      react_1.default.createElement(FormLabel_1.default, {
+        htmlFor: id,
+        label: label,
+        type: type,
+        required: required,
       }),
-      value: value,
-      onChange: onChange,
-      size: Math.min(6, options.length + 1),
-      multiple: true,
-    },
-    options.map((option) => {
-      return react_1.default.createElement(
-        "option",
-        { key: option, value: option },
-        option
-      );
-    })
+    react_1.default.createElement(
+      "select",
+      {
+        id: label ? id : undefined,
+        style: { height: height },
+        className: (0, clsx_1.default)("openapi-explorer__multi-select-input", {
+          error: showErrors,
+        }),
+        value: value,
+        onChange: onChange,
+        size: Math.min(6, options.length + 1),
+        multiple: true,
+      },
+      options.map((option) => {
+        return react_1.default.createElement(
+          "option",
+          { key: option, value: option },
+          option
+        );
+      })
+    )
   );
 }
 exports.default = FormMultiSelect;

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

@@ -3,6 +3,11 @@ export interface Props {
     value?: string;
     options?: string[];
     onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    label?: string;
+    type?: string;
+    required?: boolean;
+    ariaLabelledBy?: string;
+    ariaLabel?: string;
 }
-declare function FormSelect({ value, options, onChange }: Props): React.JSX.Element | null;
+declare function FormSelect({ value, options, onChange, label, type, required, ariaLabelledBy, ariaLabel, }: Props): React.JSX.Element | null;
 export default FormSelect;

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

@@ -5,31 +5,112 @@
  * 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) {
     return mod && mod.__esModule ? mod : { default: mod };
   };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-function FormSelect({ value, options, onChange }) {
+const react_1 = __importStar(require("react"));
+const FormLabel_1 = __importDefault(require("@theme/ApiExplorer/FormLabel"));
+function FormSelect({
+  value,
+  options,
+  onChange,
+  label,
+  type,
+  required,
+  ariaLabelledBy,
+  ariaLabel,
+}) {
+  const id = (0, react_1.useId)();
   if (!Array.isArray(options) || options.length === 0) {
     return null;
   }
   return react_1.default.createElement(
-    "select",
-    {
-      className: "openapi-explorer__select-input",
-      value: value,
-      onChange: onChange,
-    },
-    options.map((option) => {
-      return react_1.default.createElement(
-        "option",
-        { key: option, value: option },
-        option
-      );
-    })
+    react_1.default.Fragment,
+    null,
+    label &&
+      react_1.default.createElement(FormLabel_1.default, {
+        htmlFor: id,
+        label: label,
+        type: type,
+        required: required,
+      }),
+    react_1.default.createElement(
+      "select",
+      {
+        id: label ? id : undefined,
+        className: "openapi-explorer__select-input",
+        value: value,
+        onChange: onChange,
+        "aria-labelledby": !label ? ariaLabelledBy : undefined,
+        "aria-label": !label && !ariaLabelledBy ? ariaLabel : undefined,
+      },
+      options.map((option) => {
+        return react_1.default.createElement(
+          "option",
+          { key: option, value: option },
+          option
+        );
+      })
+    )
   );
 }
 exports.default = FormSelect;

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

@@ -6,6 +6,9 @@ export interface Props {
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     paramName?: string;
     isRequired?: boolean;
+    label?: string;
+    type?: string;
+    required?: boolean;
 }
-declare function FormTextInput({ isRequired, value, placeholder, password, onChange, paramName, }: Props): React.JSX.Element;
+declare function FormTextInput({ isRequired, value, placeholder, password, onChange, paramName, label, type, required, }: Props): React.JSX.Element;
 export default FormTextInput;