@redocly/openapi-docs 3.12.0 → 3.12.2

package/lib/components/common/Fields/fields-layout.js

@@ -1,19 +1,29 @@
-import{css as i}from"styled-components";import{breakpoints as r}from"@redocly/theme/core/openapi";import{typography as n}from"../../../utils/index.js";import{deprecatedCss as l}from"../mixins.js";import{styled as a}from"../../../styled-components.js";const p=o=>typeof document<"u"?getComputedStyle(document.documentElement).getPropertyValue(o).trim():"",h=a.caption`
+import { css } from 'styled-components';
+import { breakpoints } from '@redocly/theme/core/openapi';
+import { typography } from '../../../utils/index.js';
+import { deprecatedCss } from '../mixins.js';
+import { styled } from '../../../styled-components.js';
+export const getCssVariable = (variable) => typeof document !== 'undefined'
+    ? getComputedStyle(document.documentElement).getPropertyValue(variable).trim()
+    : '';
+export const PropertiesTableCaption = styled.caption `
   text-align: right;
   font-size: 0.9em;
   font-weight: normal;
   color: var(--text-color-secondary);
-`,t=i`
+`;
+const repeatingGradient = css `
   repeating-linear-gradient(0deg,
   var(--schemas-lines-color),
   var(--schemas-lines-color) 3px,
   transparent 3px,
   transparent 5px,
   var(--schemas-lines-color) 5px);
-`,d=a.td`
+`;
+export const PropertyCell = styled.td `
   box-sizing: border-box;
   position: relative;
-  background-image: ${t};
+  background-image: ${repeatingGradient};
   background-repeat: no-repeat;
   background-size: 1px 100%;
   display: block;
@@ -21,7 +31,7 @@ import{css as i}from"styled-components";import{breakpoints as r}from"@redocly/th
   padding: 0 20px;
   margin-bottom: 2px;
 
-  @media screen and (min-width: ${r.small}) {
+  @media screen and (min-width: ${breakpoints.small}) {
     display: table-cell;
     overflow: initial;
     padding: 10px;
@@ -29,17 +39,17 @@ import{css as i}from"styled-components";import{breakpoints as r}from"@redocly/th
   }
 
   tr:first-of-type > & {
-    background-image: ${t};
+    background-image: ${repeatingGradient};
     background-position: 0 10px;
     padding-top: 0;
   }
 
   tr.last > & {
-    background-image: ${t};
+    background-image: ${repeatingGradient};
     padding-bottom: 0;
     background-size: 0.9px 100%;
 
-    @media screen and (min-width: ${r.small}) {
+    @media screen and (min-width: ${breakpoints.small}) {
       background-size: 0.9px 22px;
     }
   }
@@ -49,18 +59,20 @@ import{css as i}from"styled-components";import{breakpoints as r}from"@redocly/th
   }
 
   tr.last:first-child > & {
-    background-image: ${t};
+    background-image: ${repeatingGradient};
     background-size: 0.9px 100%;
     background-position: 0 20px;
 
-    @media screen and (min-width: ${r.small}) {
+    @media screen and (min-width: ${breakpoints.small}) {
       background-size: 0.9px 22px;
       background-position: 0 0;
     }
   }
-`,x=a(d)`
+`;
+export const PropertyCellWithInner = styled(PropertyCell) `
   padding: 0;
-`,u=a(d)`
+`;
+export const PropertyNameCell = styled(PropertyCell) `
   vertical-align: top;
   line-height: 23px;
   white-space: nowrap;
@@ -68,10 +80,11 @@ import{css as i}from"styled-components";import{breakpoints as r}from"@redocly/th
   font-family: var(--field-name-font-family);
 
   &.deprecated {
-    ${l};
+    ${deprecatedCss};
   }
 
-  ${({kind:o})=>o==="patternProperties"&&i`
+  ${({ kind }) => kind === 'patternProperties' &&
+    css `
       span.field-name {
         white-space: break-spaces;
         text-align: left;
@@ -80,24 +93,32 @@ import{css as i}from"styled-components";import{breakpoints as r}from"@redocly/th
       }
     `}
 
-  ${()=>{const o=p("--schema-field-name-word-break");if(["break-all","break-word"].includes(o)){const s=`
+  ${() => {
+    const breakFieldNames = getCssVariable('--schema-field-name-word-break');
+    if (['break-all', 'break-word'].includes(breakFieldNames)) {
+        const wordBreakCSS = `
       && span:last-child {
         white-space: normal;
-        word-break: ${o};
+        word-break: ${breakFieldNames};
         vertical-align: top;
         max-width: calc(100% - 21px);
         display: inline-flex;
       }
-    `;return i`
-        ${n("schemas-property-name")}
-        ${s}
-      `}return n("schemas-property-name")}};
+    `;
+        return css `
+        ${typography('schemas-property-name')}
+        ${wordBreakCSS}
+      `;
+    }
+    return typography('schemas-property-name');
+}};
 
   .field-name {
     display: inline-flex;
     align-items: center;
   }
-`,$=a.td`
+`;
+export const PropertyDetailsCell = styled.td `
   box-sizing: border-box;
   vertical-align: top;
 
@@ -129,12 +150,13 @@ import{css as i}from"styled-components";import{breakpoints as r}from"@redocly/th
   width: var(--schema-default-details-width);
   min-width: 200px;
 
-  @media screen and (min-width: ${r.small}) {
+  @media screen and (min-width: ${breakpoints.small}) {
     border-bottom: 1px solid var(--border-color-primary);
     border-left: none;
     padding: 10px 0;
   }
-`,k=a.span`
+`;
+export const PropertyBullet = styled.span `
   margin-right: 10px;
   color: var(--schemas-lines-color);
   font-family: var(--code-font-family);
@@ -142,7 +164,7 @@ import{css as i}from"styled-components";import{breakpoints as r}from"@redocly/th
   border-left: 1px dashed var(--schemas-lines-color);
   padding: 5px 10px;
 
-  @media screen and (min-width: ${r.small}) {
+  @media screen and (min-width: ${breakpoints.small}) {
     border-left: none;
     padding: 10px;
   }
@@ -155,16 +177,18 @@ import{css as i}from"styled-components";import{breakpoints as r}from"@redocly/th
     height: 1px;
     background: var(--schemas-lines-color);
   }
-`,e=a.div`
+`;
+export const InnerPropertiesWrap = styled.div `
   padding: var(--schema-nested-offset);
-`,v=a.table`
+`;
+export const PropertiesTable = styled.table `
   border-collapse: separate;
   border-radius: var(--border-radius);
   width: 100%;
   font-size: var(--font-size-base);
   display: block;
 
-  @media screen and (min-width: ${r.small}) {
+  @media screen and (min-width: ${breakpoints.small}) {
     display: table;
   }
 
@@ -174,7 +198,7 @@ import{css as i}from"styled-components";import{breakpoints as r}from"@redocly/th
     margin-bottom: 10px;
     border-spacing: 0;
 
-    @media screen and (min-width: ${r.small}) {
+    @media screen and (min-width: ${breakpoints.small}) {
       display: table-row;
       margin-bottom: 0;
       border-spacing: 0 2px;
@@ -185,7 +209,7 @@ import{css as i}from"styled-components";import{breakpoints as r}from"@redocly/th
     vertical-align: middle;
   }
 
-  @media screen and (max-width: ${r.small}) and (-ms-high-contrast: none) {
+  @media screen and (max-width: ${breakpoints.small}) and (-ms-high-contrast: none) {
     td {
       float: left;
       width: 100%;
@@ -193,17 +217,17 @@ import{css as i}from"styled-components";import{breakpoints as r}from"@redocly/th
   }
 
   &
-    ${e},
+    ${InnerPropertiesWrap},
     &
-    ${e}
-    ${e}
-    ${e},
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap},
     &
-    ${e}
-    ${e}
-    ${e}
-    ${e}
-    ${e} {
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap} {
     margin-left: var(--schema-nested-offset);
     margin-bottom: var(--schema-nested-offset);
     background: var(--schema-nested-background-color);
@@ -211,20 +235,21 @@ import{css as i}from"styled-components";import{breakpoints as r}from"@redocly/th
   }
 
   &
-    ${e}
-    ${e},
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap},
     &
-    ${e}
-    ${e}
-    ${e}
-    ${e},
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap},
     &
-    ${e}
-    ${e}
-    ${e}
-    ${e}
-    ${e}
-    ${e} {
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap} {
     background: var(--panel-bg-color, #fff);
   }
-`;export{e as InnerPropertiesWrap,v as PropertiesTable,h as PropertiesTableCaption,k as PropertyBullet,d as PropertyCell,x as PropertyCellWithInner,$ as PropertyDetailsCell,u as PropertyNameCell,p as getCssVariable};
+`;
+//# sourceMappingURL=fields-layout.js.map

package/lib/components/common/Fields/fields.js

@@ -1,28 +1,37 @@
-import{Button as t}from"@redocly/theme/components/Button/Button";import{styled as r}from"../../../styled-components.js";const o=r.span`
+import { Button } from '@redocly/theme/components/Button/Button';
+import { styled } from '../../../styled-components.js';
+export const FieldLabel = styled.span `
   vertical-align: middle;
   line-height: var(--schema-labels-line-height);
   font-size: var(--schema-property-labels-font-size);
   color: var(--schema-labels--text-color);
-`,i=r(o)`
+`;
+export const TypePrefix = styled(FieldLabel) `
   color: var(--schema-type-text-color);
-`,d=r(o)`
+`;
+export const TypeName = styled(FieldLabel) `
   color: var(--schema-type-text-color);
-`,m=r(o)`
+`;
+export const TypeTitle = styled(FieldLabel) `
   color: var(--schema-type-title-text-color);
   word-break: break-word;
-`,c=r(o).attrs({as:"div"})`
+`;
+export const PropertyLabel = styled(FieldLabel).attrs({ as: 'div' }) `
   color: var(--text-color-secondary);
   font-size: var(--schema-labels-font-size);
   line-height: var(--schema-labels-line-height);
   font-weight: normal;
   display: block;
-`,p=r(o)`
+`;
+export const RequiredLabel = styled(FieldLabel) `
   color: var(--schema-property-required-label-text-color);
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
-`,b=r(c)`
+`;
+export const AdditionalPropertiesLabel = styled(PropertyLabel) `
   color: var(--schema-property-additional-label-text-color);
-`,e=r.span.attrs(()=>({className:"tag-grey"}))`
+`;
+export const Tag = styled.span.attrs(() => ({ className: 'tag-grey' })) `
   background: var(--tag-bg-color);
   padding: 0 var(--spacing-xxs);
   font-family: var(--font-family-monospaced);
@@ -32,30 +41,36 @@ import{Button as t}from"@redocly/theme/components/Button/Button";import{styled a
   color: var(--text-color-secondary);
   display: inline-flex;
   word-break: var(--code-word-break);
-`,v=r(e)`
+`;
+export const AccessLabel = styled(Tag) `
   color: var(--schema-property-access-label-text-color);
   background-color: var(--bg-color);
   border: 1px solid var(--border-color-secondary);
-`,a=r(e)`
+`;
+export const FieldValueLabel = styled(Tag) `
   background-color: var(--schema-inline-bg-color);
   border-radius: var(--border-radius);
   border: var(--schema-inline-border);
   padding: 0 var(--spacing-unit);
   width: fit-content;
-`,h=r(e)`
+`;
+export const RecursiveLabel = styled(Tag) `
   background-color: var(--schema-recursive-bg-color);
   border-color: var(--schema-recursive-border-color);
   color: var(--schema-recursive-text-color);
   padding: 0 var(--spacing-xs);
-`,g=r(a)`
+`;
+export const EnumValue = styled(FieldValueLabel) `
   background-color: var(--schema-enum-bg-color);
   border-color: var(--schema-enum-border-color);
   color: var(--schema-enum-text-color);
-`,x=r(e)`
+`;
+export const DefaultValue = styled(Tag) `
   background-color: var(--schema-default-bg-color);
   border-color: var(--schema-default-border-color);
   color: var(--schema-default-text-color);
-`,l=r(e)`
+`;
+export const ExampleValue = styled(Tag) `
   background-color: var(--schema-example-bg-color);
   border-color: var(--schema-example-border-color);
   color: var(--schema-example-text-color);
@@ -75,7 +90,9 @@ import{Button as t}from"@redocly/theme/components/Button/Button";import{styled a
     font-family: var(--schema-inline-code-font-family);
     margin: 0;
   }
-`,f=r(l)``,u=r(a)`
+`;
+export const ExtensionValue = styled(ExampleValue) ``;
+export const ConstraintItem = styled(FieldValueLabel) `
   background-color: var(--schema-constraint-bg-color);
   border-color: var(--schema-constraint-border-color);
   color: var(--schema-constraint-text-color);
@@ -85,8 +102,13 @@ import{Button as t}from"@redocly/theme/components/Button/Button";import{styled a
   & + & {
     margin-left: 0;
   }
-`,y=r(t).attrs(()=>({variant:"link",size:"small"}))`
+`;
+export const ToggleButton = styled(Button).attrs(() => ({
+    variant: 'link',
+    size: 'small',
+})) `
   padding: 0;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
-`;export{v as AccessLabel,b as AdditionalPropertiesLabel,u as ConstraintItem,x as DefaultValue,g as EnumValue,l as ExampleValue,f as ExtensionValue,o as FieldLabel,a as FieldValueLabel,c as PropertyLabel,h as RecursiveLabel,p as RequiredLabel,e as Tag,y as ToggleButton,d as TypeName,i as TypePrefix,m as TypeTitle};
+`;
+//# sourceMappingURL=fields.js.map

package/lib/components/common/Fields/index.js

@@ -1 +1,3 @@
-export*from"./fields.js";export*from"./fields-layout.js";
+export * from './fields.js';
+export * from './fields-layout.js';
+//# sourceMappingURL=index.js.map

package/lib/components/common/LinkToField.js

@@ -1,19 +1,46 @@
-import{jsx as c}from"react/jsx-runtime";import{css as p}from"styled-components";import{useLocation as l}from"react-router-dom";import{LinkIcon as r}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{encodeBackSlashes as m}from"../../utils/string.js";import{constructFieldDeepFragment as d,joinWithSeparator as n}from"../../services/history/helpers.js";import{ShareLink as f}from"./linkify.js";import{styled as h}from"../../styled-components.js";function F(i,s){const o=i.deps.operation,e=d(i,s);if(!o?.id&&!o.isCallback)return"#"+e.toLowerCase();const t=n(o.href,n(o.id,e),"#");return m(t.toLowerCase())}const S=({to:i,className:s})=>{const o=i,e=l(),t=o?.split("#")[1],a=e?e.hash===`#${t}`:!1;return c(k,{ariaLabel:`link  to ${o}`,className:s,isActive:a,to:o,id:t})},k=h(f)`
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css } from 'styled-components';
+import { useLocation } from 'react-router-dom';
+import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
+import { encodeBackSlashes } from '../../utils/string.js';
+import { constructFieldDeepFragment, joinWithSeparator } from '../../services/history/helpers.js';
+import { ShareLink } from './linkify.js';
+import { styled } from '../../styled-components.js';
+export function generateDeepLink(field, activeMimeName) {
+    const operation = field.deps.operation;
+    const fieldFragment = constructFieldDeepFragment(field, activeMimeName);
+    //Models doesnt have operation.id
+    if (!operation?.id && !operation.isCallback) {
+        return '#' + fieldFragment.toLowerCase();
+    }
+    const deepLink = joinWithSeparator(operation.href, joinWithSeparator(operation.id, fieldFragment), '#');
+    return encodeBackSlashes(deepLink.toLowerCase());
+}
+export const LinkToField = ({ to, className, }) => {
+    const deepLink = to;
+    const location = useLocation();
+    const hash = deepLink?.split('#')[1];
+    const isActive = location ? location.hash === `#${hash}` : false;
+    return (_jsx(ShareLinkToField, { ariaLabel: `link  to ${deepLink}`, className: className, isActive: isActive, to: deepLink, id: hash }));
+};
+export const ShareLinkToField = styled(ShareLink) `
   display: flex;
-  ${r} {
+  ${LinkIcon} {
     visibility: hidden;
     cursor: pointer;
     background-color: var(--bg-color);
   }
 
-  ${({isActive:i})=>i&&p`
-      ${r} {
+  ${({ isActive }) => isActive &&
+    css `
+      ${LinkIcon} {
         visibility: visible;
         opacity: 1;
       }
     `}
-  :hover ${r}, :focus ${r} {
+  :hover ${LinkIcon}, :focus ${LinkIcon} {
     visibility: visible;
     opacity: 1;
   }
-`;export{S as LinkToField,k as ShareLinkToField,F as generateDeepLink};
+`;
+//# sourceMappingURL=LinkToField.js.map

package/lib/components/common/OperationItemTitle.js

@@ -1,4 +1,7 @@
-import{LinkIcon as t}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{H2 as e}from"@redocly/theme/components/Typography/H2";import{styled as i}from"../../styled-components.js";const n=i.h4`
+import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
+import { H2 } from '@redocly/theme/components/Typography/H2';
+import { styled } from '../../styled-components.js';
+export const Title = styled.h4 `
   font-size: var(--h4-font-size);
   font-weight: var(--h4-font-weight);
   line-height: var(--h4-line-height);
@@ -11,12 +14,13 @@ import{LinkIcon as t}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{H2 as e
   position: relative;
 
   :hover {
-    ${t} {
+    ${LinkIcon} {
       opacity: 1;
       visibility: visible;
     }
   }
-`,l=i(e)`
+`;
+export const Heading = styled(H2) `
   position: relative;
   display: flex;
   align-items: center;
@@ -25,13 +29,15 @@ import{LinkIcon as t}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{H2 as e
   margin: 0;
 
   :hover {
-    ${t} {
+    ${LinkIcon} {
       opacity: 1;
       visibility: visible;
     }
   }
-`,s=i.div`
+`;
+export const HeadingWrapper = styled.div `
   display: flex;
   align-items: flex-start;
   margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);
-`;export{l as Heading,s as HeadingWrapper,n as Title};
+`;
+//# sourceMappingURL=OperationItemTitle.js.map

package/lib/components/common/SchemaSelection/SchemaSelection.js

@@ -1 +1,51 @@
-import{jsx as m}from"react/jsx-runtime";import{useCallback as E,useEffect as I,useRef as T,useState as g}from"react";import{useAtom as h}from"jotai";import{Segmented as w}from"@redocly/theme/components/Segmented/Segmented";import{isUndefined as x}from"@redocly/theme/core/openapi";import{Dropdown as y}from"../Dropdown/index.js";import{operationStore as A}from"../../../jotai/operation.js";const b=5;function z({options:t,onChange:r,pointer:u,schema:n,defaultOneOfIdx:d}){const[p,c]=h(A(u)),S=p.activeOneOf[n.pointer]??d,o=t[S]?.value,[i,O]=g(!1),s=T(null);I(()=>{if(!s.current)return;const e=()=>{const v=s.current?.querySelectorAll('button[role="tab"]'),a=Array.from(v||[]).some(l=>l.offsetWidth<l.scrollWidth);a!==i&&O(a)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[i,t]);const f=E(({value:e})=>{e!==void 0&&(r?r(e):c({activeExampleName:n.oneOf?.[e]?.title,activeOneOf:{[n.pointer]:e},requestValues:{body:null}}))},[r,n.oneOf,n.pointer,c]);return x(o)?null:t.length>b||i?m(y,{options:t,value:o,onChange:f}):m(w,{ref:s,value:o,onChange:f,options:t,size:"small","data-testid":"segmented-schema"})}const D=z;export{D as SchemaSelection};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useAtom } from 'jotai';
+import { Segmented } from '@redocly/theme/components/Segmented/Segmented';
+import { isUndefined } from '@redocly/theme/core/openapi';
+import { Dropdown } from '../Dropdown/index.js';
+import { operationStore } from '../../../jotai/operation.js';
+const LIMIT_FOR_SEGMENTED = 5;
+function SchemaSelectionComponent({ options, onChange, pointer, schema, defaultOneOfIdx, }) {
+    const [store, setOperationStore] = useAtom(operationStore(pointer));
+    const activeOneOfIdx = store.activeOneOf[schema.pointer] ?? defaultOneOfIdx;
+    const activeValue = options[activeOneOfIdx]?.value;
+    const [isAnyItemTruncated, setIsAnyItemTruncated] = useState(false);
+    const segmentedRef = useRef(null);
+    useEffect(() => {
+        if (!segmentedRef.current)
+            return;
+        const checkTruncation = () => {
+            const items = segmentedRef.current?.querySelectorAll('button[role="tab"]');
+            const isTruncated = Array.from(items || []).some((item) => {
+                return item.offsetWidth < item.scrollWidth;
+            });
+            if (isTruncated !== isAnyItemTruncated) {
+                setIsAnyItemTruncated(isTruncated);
+            }
+        };
+        checkTruncation();
+        window.addEventListener('resize', checkTruncation);
+        return () => window.removeEventListener('resize', checkTruncation);
+    }, [isAnyItemTruncated, options]);
+    const handleSelectedChange = useCallback(({ value }) => {
+        if (value !== undefined) {
+            if (onChange) {
+                onChange(value);
+            }
+            else {
+                setOperationStore({
+                    activeExampleName: schema.oneOf?.[value]?.title,
+                    activeOneOf: { [schema.pointer]: value },
+                    requestValues: { body: null },
+                });
+            }
+        }
+    }, [onChange, schema.oneOf, schema.pointer, setOperationStore]);
+    if (isUndefined(activeValue)) {
+        return null;
+    }
+    return options.length > LIMIT_FOR_SEGMENTED || isAnyItemTruncated ? (_jsx(Dropdown, { options: options, value: activeValue, onChange: handleSelectedChange })) : (_jsx(Segmented, { ref: segmentedRef, value: activeValue, onChange: handleSelectedChange, options: options, size: "small", "data-testid": "segmented-schema" }));
+}
+export const SchemaSelection = SchemaSelectionComponent;
+//# sourceMappingURL=SchemaSelection.js.map

package/lib/components/common/SchemaSelection/index.js

@@ -1 +1,2 @@
-import{SchemaSelection as c}from"./SchemaSelection.js";export{c as SchemaSelection};
+export { SchemaSelection } from './SchemaSelection.js';
+//# sourceMappingURL=index.js.map

package/lib/components/common/Select/Select.js

@@ -1 +1,21 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{memo as b,useMemo as g}from"react";import{ClearButton as j}from"../ClearButton/index.js";import{normalizeText as m}from"../../../utils/index.js";import{Arrow as v}from"./styled.js";function z({options:o,onChange:c,handleClear:p,clearable:u,placeholder:n,value:a="",className:x}){const f=t=>{const{selectedIndex:s}=t.target,l=n||!a?s-1:s;c(o[l])},h=g(()=>o.map(({idx:t,value:s,title:l},C)=>{const d=m(s);return e("option",{value:d,className:"dropdown-option",children:l||d},t||d+C)}),[o]),r=m(a),w=o.find(t=>t.value===a)?.title||r;return i("div",{className:x+" dropdown-wrapper",children:[e(v,{}),u&&r?.length>0&&e(j,{handleClear:p}),i("select",{onChange:f,value:r,className:"dropdown-select","aria-label":"dropdown select",children:[n&&e("option",{disabled:!0,hidden:!0,value:n,children:n}),!r&&!n&&e("option",{disabled:!0}),h]}),e("label",{children:w})]})}const B=b(z);export{B as Select};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { ClearButton } from '../ClearButton/index.js';
+import { normalizeText } from '../../../utils/index.js';
+import { Arrow } from './styled.js';
+function SelectComponent({ options, onChange, handleClear, clearable, placeholder, value = '', className, }) {
+    const handleChange = (event) => {
+        const { selectedIndex } = event.target;
+        const index = placeholder || !value ? selectedIndex - 1 : selectedIndex;
+        onChange(options[index]);
+    };
+    const renderOptions = useMemo(() => options.map(({ idx, value, title }, index) => {
+        const normalizedValue = normalizeText(value);
+        return (_jsx("option", { value: normalizedValue, className: "dropdown-option", children: title || normalizedValue }, idx || normalizedValue + index));
+    }), [options]);
+    const normalizedValue = normalizeText(value);
+    const title = options.find((option) => option.value === value)?.title || normalizedValue;
+    return (_jsxs("div", { className: className + ' dropdown-wrapper', children: [_jsx(Arrow, {}), clearable && normalizedValue?.length > 0 && _jsx(ClearButton, { handleClear: handleClear }), _jsxs("select", { onChange: handleChange, value: normalizedValue, className: "dropdown-select", "aria-label": "dropdown select", children: [placeholder && (_jsx("option", { disabled: true, hidden: true, value: placeholder, children: placeholder })), !normalizedValue && !placeholder && _jsx("option", { disabled: true }), renderOptions] }), _jsx("label", { children: title })] }));
+}
+export const Select = memo(SelectComponent);
+//# sourceMappingURL=Select.js.map

package/lib/components/common/Select/index.js

@@ -1 +1,3 @@
-export*from"./styled.js";export*from"./types.js";
+export * from './styled.js';
+export * from './types.js';
+//# sourceMappingURL=index.js.map

package/lib/components/common/Select/styled.js

@@ -1,4 +1,8 @@
-import{css as n}from"styled-components";import{ChevronDownIcon as t}from"@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon";import{Select as i}from"./Select.js";import{styled as e}from"../../../styled-components.js";const r=n`
+import { css } from 'styled-components';
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+import { Select as SelectComponent } from './Select.js';
+import { styled } from '../../../styled-components.js';
+const darkSelectStyle = css `
   background-color: var(--panel-samples-dropdown-bg-color);
   border: var(--panel-samples-dropdown-border);
   color: var(--panel-samples-dropdown-color);
@@ -8,13 +12,14 @@ import{css as n}from"styled-components";import{ChevronDownIcon as t}from"@redocl
   &:focus-within {
     box-shadow: none;
   }
-`,a=e(i)`
+`;
+export const Select = styled(SelectComponent) `
   box-sizing: border-box;
   outline: none;
   display: inline-block;
   vertical-align: bottom;
   position: relative;
-  width: ${({fullWidth:o})=>o?"100%":"auto"};
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
   cursor: pointer;
   text-transform: none;
 
@@ -28,7 +33,7 @@ import{css as n}from"styled-components";import{ChevronDownIcon as t}from"@redocl
     border-radius: var(--border-radius-md);
     padding: var(--docs-dropdown-padding);
     vertical-align: bottom;
-    width: ${({fullWidth:o})=>o?"100%":"auto"};
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
     text-transform: none;
     line-height: inherit;
     font-size: var(--docs-dropdown-font-size);
@@ -43,7 +48,7 @@ import{css as n}from"styled-components";import{ChevronDownIcon as t}from"@redocl
       box-shadow: none;
     }
 
-    ${({variant:o})=>o==="dark"?r:""};
+    ${({ variant }) => (variant === 'dark' ? darkSelectStyle : '')};
   }
 
   .dropdown-select {
@@ -62,9 +67,10 @@ import{css as n}from"styled-components";import{ChevronDownIcon as t}from"@redocl
     font-size: var(--font-size-base);
     font-family: inherit;
     padding: var(--docs-dropdown-padding);
-    ${({variant:o})=>o==="dark"?r:""};
+    ${({ variant }) => (variant === 'dark' ? darkSelectStyle : '')};
   }
-`,c=e(a)`
+`;
+export const SimpleSelect = styled(Select) `
   svg {
     top: 60%;
     transform: translateY(-60%);
@@ -82,8 +88,10 @@ import{css as n}from"styled-components";import{ChevronDownIcon as t}from"@redocl
       box-shadow: none;
     }
   }
-`,h=e(t)`
+`;
+export const Arrow = styled(ChevronDownIcon) `
   position: absolute;
   right: 10px;
   top: 10px;
-`;export{h as Arrow,a as Select,c as SimpleSelect};
+`;
+//# sourceMappingURL=styled.js.map

package/lib/components/common/Select/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map