import{jsx as r,jsxs as d,Fragment as u}from"react/jsx-runtime";import v,{useMemo as C,useState as I}from"react";import{Dropdown as j}from"@redocly/theme/components/Dropdown/Dropdown";import{CheckmarkIcon as M}from"@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon";import{DropdownMenu as z}from"@redocly/theme/components/Dropdown/DropdownMenu";import{DropdownMenuItem as T}from"@redocly/theme/components/Dropdown/DropdownMenuItem";import{Button as $}from"@redocly/theme/components/Button/Button";import{SearchIcon as A}from"@redocly/theme/icons/SearchIcon/SearchIcon";import{typedMemo as F}from"@redocly/theme/core/openapi";import{styled as o}from"../../../styled-components.js";import{useTranslate as L}from"../../../hooks/index.js";const R=7;function _({options:n,value:t,onChange:p,className:x,triggerVariant:b="outlined",triggerSize:y="small",fullWidth:l=!1}){const[c,m]=I(""),g=L(),a=n.find(e=>e.value===t),S=n.length>=R,f=C(()=>n.filter(e=>e.label?.toLowerCase().includes(c.toLowerCase())??!1),[n,c]);if(n.length===1)return r(U,{children:a?.element||a?.label});const k=e=>{m(e.target.value)},D=()=>S?d(u,{children:[r(O,{prefix:r(V,{children:r(A,{color:"var(--icon-color-additional)",onClick:e=>e.stopPropagation()})}),content:r(W,{placeholder:g("openapi.discriminator.searchPlaceholder","Search items"),onClick:e=>e.stopPropagation(),onChange:k,value:c})}),r(B,{children:f.length?f.map((e,s)=>d(v.Fragment,{children:[e.divider,r(i,{active:e.value===t,onAction:()=>p(e),suffix:e.value===t&&r(w,{}),children:r(h,{children:e.element||e.label})},e.label)]},s)):r(P,{content:g("openapi.discriminator.searchNoResults","No items found")})})]}):r(u,{children:n.map((e,s)=>d(v.Fragment,{children:[e.divider,r(i,{active:e.value===t,onAction:()=>p(e),suffix:e.value===t&&r(w,{}),children:r(h,{children:e.element||e.label})},e.label)]},s))});return r(N,{className:x,$fullWidth:l,trigger:r(E,{variant:b,size:y,type:"button",$fullWidth:l,children:r(h,{children:a?.element||a?.label})}),withArrow:!0,onClose:()=>m(""),children:r(H,{$fullWidth:l,children:D()})})}const oe=F(_),N=o(j)`
  ${({$fullWidth:n})=>n&&`
    > div {
      min-width: 100%;
      max-width: 100%;
    }
  `}
`,E=o($)`
  ${({$fullWidth:n})=>n&&`
    && {
      width: 100%;
      justify-content: space-between;
      background-color: var(--bg-color);
      padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left);
      color: var(--text-color-primary);

      &:hover {
        background-color: var(--bg-color);
      }

      &:focus {
        background-color: var(--bg-color);
      }
    }
  `}
`,h=o.span`
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`,H=o(z)`
  ${({$fullWidth:n})=>n&&"min-width: 100%;"}
`,w=o(M)`
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex-shrink: 0;
`,i=o(T)`
  --dropdown-menu-item-justify-content: space-between;

  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xxs) var(--spacing-sm);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
`,O=o(i)`
  gap: 0;
  padding: var(--spacing-xxs) var(--spacing-xs);
  &:hover {
    background-color: transparent;
  }
`,P=o(i)`
  height: 66px;
  justify-content: center;
  &:hover,
  &:focus-visible {
    background-color: transparent;
  }
`,B=o.div`
  overflow-y: auto;
  max-height: 300px;
  padding: calc(var(--spacing-unit) / 2);
  margin: calc(var(--spacing-unit) / -2);
`,V=o.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
`,W=o.input`
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-color-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-family: var(--font-family-base);
  padding: 0;
  margin-left: var(--spacing-xxs);
  min-width: 100px;
  &::placeholder {
    color: var(--search-trigger-color);
  }
`,U=o.span`
  margin-right: var(--spacing-unit);
  cursor: default;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-color-primary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
`;export{oe as Dropdown};
