fix: remove dropdown-aria and use native select (#1954)

package.json

@@ -7,8 +7,7 @@
     "url": "git://github.com/Redocly/redoc"
   },
   "browserslist": [
-    "defaults",
-    "ie 11"
+    "defaults"
   ],
   "engines": {
     "node": ">=6.9",
@@ -140,7 +139,6 @@
   },
   "dependencies": {
     "@redocly/openapi-core": "^1.0.0-beta.88",
-    "@redocly/react-dropdown-aria": "^2.0.11",
     "classnames": "^2.3.1",
     "decko": "^1.2.0",
     "dompurify": "^2.2.8",

src/common-elements/Dropdown/Dropdown.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import styled from '../../styled-components';
+import { ArrowIconProps, DropdownProps, DropdownOption } from './types';
+
+const ArrowSvg = ({ className, style }: ArrowIconProps): JSX.Element => (
+  <svg
+    className={className}
+    style={style}
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="6 9 12 15 18 9" />
+  </svg>
+);
+
+const ArrowIcon = styled(ArrowSvg)`
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 8px;
+  margin: auto;
+  text-align: center;
+  polyline {
+    color: ${props => props.variant === 'dark' && 'white'};
+  }
+`;
+
+const DropdownComponent = (props: DropdownProps): JSX.Element => {
+  const { options, onChange, placeholder, value = '', variant, className } = props;
+
+  const handleOnChange = event => {
+    const { selectedIndex } = event.target;
+    const index = placeholder ? selectedIndex - 1 : selectedIndex;
+    onChange(options[index]);
+  };
+
+  return (
+    <div className={className}>
+      <ArrowIcon variant={variant} />
+      <select onChange={handleOnChange} value={value} className="dropdown-select">
+        {placeholder && (
+          <option disabled hidden value={placeholder}>
+            {placeholder}
+          </option>
+        )}
+        {options.map(({ idx, value, title }: DropdownOption, index) => (
+          <option key={idx || value + index} value={value}>
+            {title || value}
+          </option>
+        ))}
+      </select>
+      <label>{value}</label>
+    </div>
+  );
+};
+
+export const Dropdown = React.memo<DropdownProps>(DropdownComponent);

src/common-elements/Dropdown/index.ts

@@ -0,0 +1,2 @@
+export * from './styled';
+export * from './types';

src/common-elements/Dropdown/styled.ts

@@ -0,0 +1,94 @@
+import styled from 'styled-components';
+
+import { Dropdown as DropdownComponent } from './Dropdown';
+
+export const Dropdown = styled(DropdownComponent)<{
+  fullWidth?: boolean;
+}>`
+  label {
+    box-sizing: border-box;
+    min-width: 100px;
+    outline: none;
+    display: inline-block;
+    font-family: ${props => props.theme.typography.headings.fontFamily};
+    color: ${({ theme }) => theme.colors.text.primary};
+    vertical-align: bottom;
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+    text-transform: none;
+    padding: 0 8px 0 4px;
+
+    font-size: 0.929em;
+    line-height: 1.5em;
+    font-family: inherit;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .dropdown-select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    border: none;
+    appearance: none;
+    cursor: pointer;
+
+    color: ${({ theme }) => theme.colors.text.primary};
+    line-height: inherit;
+    font-family: inherit;
+  }
+  box-sizing: border-box;
+  min-width: 100px;
+  outline: none;
+  display: inline-block;
+  border-radius: 2px;
+  border: 1px solid rgba(38, 50, 56, 0.5);
+  vertical-align: bottom;
+  padding: 2px 0px 2px 6px;
+  position: relative;
+  width: auto;
+  background: white;
+  color: #263238;
+  font-family: ${props => props.theme.typography.headings.fontFamily};
+  font-size: 0.929em;
+  line-height: 1.5em;
+  cursor: pointer;
+  transition: border 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
+
+  &:hover,
+  &:focus-within {
+    border: 1px solid ${props => props.theme.colors.primary.main};
+    color: ${props => props.theme.colors.primary.main};
+    box-shadow: 0px 0px 0px 1px ${props => props.theme.colors.primary.main};
+  }
+`;
+
+export const SimpleDropdown = styled(Dropdown)`
+  margin-left: 10px;
+  text-transform: none;
+  font-size: 0.969em;
+
+  font-size: 1em;
+  border: none;
+  padding: 0 1.2em 0 0;
+  background: transparent;
+
+  &:hover,
+  &:focus-within {
+    border: none;
+    box-shadow: none;
+    label {
+      color: ${props => props.theme.colors.primary.main};
+      text-shadow: 0px 0px 0px ${props => props.theme.colors.primary.main};
+    }
+  }
+`;
+
+export const MimeLabel = styled.span`
+  margin-left: 10px;
+  text-transform: none;
+  font-size: 0.929em;
+  color: black;
+`;

src/common-elements/Dropdown/types.ts

@@ -0,0 +1,25 @@
+export interface DropdownOption {
+  idx?: number;
+  value: string;
+  title?: string;
+  serverUrl?: string;
+  label?: string;
+}
+
+export interface DropdownProps {
+  options: DropdownOption[];
+  onChange: (option: DropdownOption) => void;
+  ariaLabel?: string;
+  className?: string;
+  placeholder?: string;
+  value?: string;
+  dense?: boolean;
+  fullWidth?: boolean;
+  variant?: 'dark' | 'light';
+}
+
+export interface ArrowIconProps {
+  className?: string;
+  variant?: 'light' | 'dark';
+  style?: React.CSSProperties;
+}

src/common-elements/index.ts

@@ -4,8 +4,8 @@ export * from './linkify';
 export * from './shelfs';
 export * from './fields-layout';
 export * from './schema';
-export * from './dropdown';
 export * from './mixins';
 export * from './tabs';
 export * from './samples';
 export * from './perfect-scrollbar';
+export * from './Dropdown';

src/components/CallbackSamples/CallbackSamples.tsx

@@ -21,7 +21,14 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
   context: RedocNormalizedOptions;
 
   private renderDropdown = props => {
-    return <DropdownOrLabel Label={MimeLabel} Dropdown={InvertedSimpleDropdown} {...props} />;
+    return (
+      <DropdownOrLabel
+        Label={MimeLabel}
+        Dropdown={InvertedSimpleDropdown}
+        {...props}
+        variant="dark"
+      />
+    );
   };
 
   render() {

src/components/DropdownOrLabel/DropdownOrLabel.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { DropdownProps, MimeLabel, SimpleDropdown } from '../../common-elements/dropdown';
+import { DropdownProps, MimeLabel, SimpleDropdown } from '../../common-elements/Dropdown';
 
 export interface DropdownOrLabelProps extends DropdownProps {
   Label?: React.ComponentClass;
@@ -12,5 +12,5 @@ export function DropdownOrLabel(props: DropdownOrLabelProps): JSX.Element {
   if (props.options.length === 1) {
     return <Label>{props.options[0].value}</Label>;
   }
-  return <Dropdown {...props} searchable={false} />;
+  return <Dropdown {...props} />;
 }