import '../_commonjsHelpers-97e6d7b1.js';
import React, { useState, useRef, useEffect, useCallback } from 'react';
import 'react-dom';
import { c as _slicedToArray, a as _objectSpread2, e as _extends, _ as _defineProperty, j as _toConsumableArray } from '../_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { K as KEY_CODES, P as Portal } from '../key_codes-ff72266d.js';
import useActivify from '../hooks/useActivify.js';
import { T as Tooltip } from '../index-6829ab1f.js';
import space from '@styled-system/space';
import color from '@styled-system/color';
import border from '@styled-system/border';
import variant from '@styled-system/variant';
import typography from '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { I as Icon, S as SearchIcon, A as AngleDownIcon } from '../index-fc484d02.js';
import WithTooltip from '../overlays/withTooltip.js';
import { C as Context } from '../index-155df85b.js';
import Text from '../ui/text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import Box from '../ui/box.js';
import '../index-b65fa23c.js';
import { r as rgba } from '../generic-7099c3ed.js';
import '../useInput-87c61cca.js';
import { Label } from '../ui/label.js';
import { i as inputStyle, T as TextInput } from '../TextInput-23c18ec3.js';
import Text$1 from './text.js';
import { F as Fuse } from '../fuse-b0dfead8.js';
import Checkbox from './checkbox.js';
import '../index-923d986f.js';
import { C as ChipsInput } from '../ChipsInput-cd3ab9b7.js';

// some sensible defaults
var defaultFuseOptions = {
  shouldSort: true,
  threshold: 0.2,
  tokenize: true,
  matchAllTokens: true,
  findAllMatches: true,
  location: 0,
  distance: 50,
  maxPatternLength: 32,
  minMatchCharLength: 1,
  keys: ["text"]
};

/**
 * The useSearch hook handles searching of options
 * It uses fuse.js to implement fuzzy search. Based on the text
 * it filters the options list.
 * @param {String}    text        the text to search
 * @param {Object[]}  options     the array of objects to search
 * @param {String[]}  searchKeys  the array of keys to search (inside the options)
 * @returns
 */
function useSearch(text, options, searchKeys) {
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    searchResults = _useState2[0],
    setSearchResults = _useState2[1];
  var _fuse = useRef();
  var setupSearch = function setupSearch() {
    var fuseOptions = _objectSpread2(_objectSpread2({}, defaultFuseOptions), {}, {
      keys: searchKeys ? searchKeys : defaultFuseOptions.keys
    });
    _fuse.current = new Fuse(options, fuseOptions);
    handleSearch(text);
  };
  var handleSearch = function handleSearch(searchTerm) {
    if (searchTerm.length === 0) {
      setSearchResults(options);
    } else {
      setSearchResults(_fuse.current.search(searchTerm));
    }
  };
  useEffect(function () {
    setupSearch();
  }, [options]);
  useEffect(function () {
    handleSearch(text);
  }, [text]);
  return searchResults;
}

var css_248z = ".Dropdown_dropdown__3k3U0 {\n  position: relative;\n  outline: none; }\n\n.Dropdown_dropdownInput__3_ZM1 {\n  cursor: pointer; }\n  .Dropdown_dropdownInput__3_ZM1.Dropdown_reverse__2SQlO.focused {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 8px;\n    border-bottom-right-radius: 8px; }\n  .Dropdown_dropdownInput__3_ZM1.focused {\n    border-color: #124fa0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0; }\n  .Dropdown_dropdownInputIcon__1c3Xu {\n    min-width: 21px; }\n\n.Dropdown_textHint__3S0b8 {\n  display: block;\n  color: #999;\n  font-size: 13px;\n  font-weight: 400;\n  margin-bottom: 8px;\n  margin-left: 2px;\n  margin-top: -6px;\n  transition: 0.2s ease-out; }\n\n.Dropdown_dropdownInputZeroState__2d1Ps {\n  display: block;\n  padding: 8px;\n  font-size: 14px;\n  opacity: 0.4; }\n\n.Dropdown_dropdownInputSubtext__z5trs {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0 4px;\n  font-size: 12px;\n  position: absolute;\n  bottom: 0;\n  transform: translate3d(0, 100%, 0);\n  padding-top: 4px; }\n\n.Dropdown_dropdownInputSubtextError__1jQ6s {\n  color: #ff0c0c;\n  opacity: 0.8; }\n";
var styles = {"dropdown":"Dropdown_dropdown__3k3U0","dropdownInput":"Dropdown_dropdownInput__3_ZM1","reverse":"Dropdown_reverse__2SQlO","dropdownInputIcon":"Dropdown_dropdownInputIcon__1c3Xu","textHint":"Dropdown_textHint__3S0b8","dropdownInputZeroState":"Dropdown_dropdownInputZeroState__2d1Ps","dropdownInputSubtext":"Dropdown_dropdownInputSubtext__z5trs","dropdownInputSubtextError":"Dropdown_dropdownInputSubtextError__1jQ6s"};
styleInject(css_248z);

var DropdownOptionsMode = variant({
  prop: "mode",
  scale: "dropdownOptionsModes",
  variants: {
    active: {},
    inactive: {}
  }
});
var DropdownOptionsVariant = variant({
  prop: "variant",
  scale: "dropdownOptionsVariant",
  variants: {
    withCheckbox: {}
  }
});

// If Dropdown opens at top when its towards bottom of the screen
var DropdownOptionsPositionVariant = variant({
  prop: "positionVariant",
  scale: "dropdownOptionsPositionVariant",
  variants: {
    top: {},
    "default": {}
  }
});
var DropdownOptionMode = variant({
  prop: "mode",
  scale: "dropdownOptionModes",
  variants: {
    disabled: {}
  }
});
var DropdownOptionSize = variant({
  prop: "size",
  scale: "dropdownOptionSize",
  variants: {
    small: {}
  }
});
var DropdownOptionVariant = variant({
  prop: "variant",
  scale: "dropdownOptionVariant",
  variants: {
    "default": {},
    selected: {}
  }
});
var DropdownWithCheckboxVariant = variant({
  prop: "variant",
  scale: "dropdownWithCheckboxInputVariants",
  variants: {
    disabled: {}
  }
});
var DropdownArrowMode = variant({
  prop: "mode",
  scale: "dropdownArrowModes",
  variants: {
    active: {}
  }
});
var DropdownIconMode = variant({
  prop: "mode",
  scale: "dropdownIconModes",
  variants: {
    withCheckbox: {}
  }
});
var DropdownCheckboxOptionsMode = variant({
  prop: "mode",
  scale: "dropdownCheckboxOptionsModes",
  variants: {
    withoutSearch: {}
  }
});
var DropdownCheckboxSearchWrapperMode = variant({
  prop: "mode",
  scale: "dropdownCheckboxSearchWrapperModes",
  variants: {
    withoutSearch: {}
  }
});

// Non customizable CSS props
var wrapperStyle = {
  position: "relative",
  outline: "none",
  boxSizing: "border-box"
};
var optionsOverlayStyle = {
  position: "absolute",
  zIndex: 1000000000,
  width: "100%",
  height: "100%",
  top: 0,
  left: 0
};
var optionsStyle = function optionsStyle(props) {
  return {
    position: "absolute",
    zIndex: 1000000001,
    maxHeight: "200px",
    overflowY: "auto",
    backgroundColor: "#fff",
    border: "1px solid ".concat(props.theme.colors.blue.haptik, "}"),
    boxSizing: "border-box",
    marginTop: "-1px",
    transition: "transform 0.3s ease, opacity 0.3s ease",
    boxShadow: "0 10px 20px rgba(0, 0, 0, 0.1)"
  };
};
var optionStyle = function optionStyle(props) {
  return {
    padding: "5px 12px",
    height: 30,
    display: "flex",
    alignItems: "center",
    cursor: "pointer",
    transition: "background 0.3s ease",
    "&:hover": {
      background: "".concat(props.theme.colors.blue.pastel, "50")
    }
  };
};
var withCheckboxInputStyle = function withCheckboxInputStyle(props) {
  var inputStyles = _objectSpread2({}, inputStyle(props));
  inputStyles.padding = "7px 38px 7px 8px";
  return _objectSpread2({
    marginTop: 8,
    overflow: "hidden",
    whiteSpace: "nowrap",
    textOverflow: "ellipsis"
  }, inputStyles);
};
var DropdownIconStyle = {
  position: "absolute",
  top: 0,
  height: "100%",
  display: "flex",
  alignItems: "center",
  transition: "transform 0.3s ease"
};
var dropdownArrowStyle = function dropdownArrowStyle(props) {
  return _objectSpread2(_objectSpread2({}, DropdownIconStyle), {}, {
    right: props.theme.space.lg - props.theme.space.xs // 10px
  });
};

var dropdownIconStyle = function dropdownIconStyle(props) {
  return _objectSpread2(_objectSpread2({}, DropdownIconStyle), {}, {
    left: props.theme.space.lg - props.theme.space.xs // 10px
  });
};

var checkboxWrapperStyle = {
  maxHeight: 198,
  overflow: "hidden"
};
var checkboxSearchWrapperStyle = function checkboxSearchWrapperStyle(props) {
  return {
    position: "relative",
    padding: "".concat(props.theme.space.lg - props.theme.space.xs, "px ").concat(props.theme.space.md, "px ").concat(props.theme.space.lg - props.theme.space.xs, "px") // "10px 12px 10px",
  };
};

var checkboxOptionsWrapperStyle = function checkboxOptionsWrapperStyle(props) {
  return {
    position: "relative",
    maxHeight: "calc(100vh - 60px)",
    // Height of the Search Wrapper
    overflowY: "auto",
    padding: "".concat(props.theme.space.sm, "px ").concat(props.theme.space.zero, "px")
  };
};
var dropdownCheckboxSearchStyle = {
  position: "absolute",
  top: 15,
  left: 15,
  zIndex: 1,
  width: 25,
  height: 25,
  ">div": {
    width: "100%",
    height: "100%"
  }
};
var dropdownCreateTextStyle = function dropdownCreateTextStyle(props) {
  return {
    color: props.theme.colors.green.haptik,
    paddingRight: props.theme.space.xs
  };
};
var checkboxItemWrapperStyle = function checkboxItemWrapperStyle(props) {
  return {
    transition: "background 0.3s ease",
    cursor: "pointer",
    ">div:first-child": {
      background: "transparent",
      width: "100%",
      margin: props.theme.space.zero
    },
    "&:hover": {
      background: "".concat(props.theme.colors.blue.pastel, "50")
    }
  };
};
var DropdownWrapper = styled(Box)(wrapperStyle, space, color, border, typography);
var DropdownOptionsWrapper = styled(Box)(space, color, border, typography);
var DropdownOptionsOverlay = styled("div")(optionsOverlayStyle, space, color, border, typography);
var DropdownOptions = styled("div")(optionsStyle, space, color, border, typography, DropdownOptionsMode, DropdownOptionsVariant, DropdownOptionsPositionVariant);
var DropdownOption = styled("div")(optionStyle, space, color, border, typography, DropdownOptionMode, DropdownOptionVariant, DropdownOptionSize);
var DropdownWithCheckboxInput = styled("div")(withCheckboxInputStyle, space, color, border, typography, DropdownWithCheckboxVariant);
var DropdownArrow = styled("div")(dropdownArrowStyle, space, color, border, typography, DropdownArrowMode);
var DropdownIcon = styled(Box)(dropdownIconStyle, space, color, border, typography, DropdownIconMode);
var DropdownCheckboxWrapper = styled(Box)(checkboxWrapperStyle, space, color, border, typography, DropdownWithCheckboxVariant);
var DropdownCheckboxSearchWrapper = styled(Box)(checkboxSearchWrapperStyle, space, color, border, typography, DropdownCheckboxSearchWrapperMode);
var DropdownCheckboxOptionsWrapper = styled(Box)(checkboxOptionsWrapperStyle, space, color, border, typography, DropdownCheckboxOptionsMode);
var DropdownCheckboxItemWrapper = styled(Box)(checkboxItemWrapperStyle, space, color, border, typography);
var DropdownCheckboxSearchIcon = styled("div")(dropdownCheckboxSearchStyle, space, color, border, typography);
var DropdownCreateText = styled("span")(dropdownCreateTextStyle, space, color, border, typography);

// Customizable CSS props
DropdownWrapper.defaultProps = {
  fontFamily: "\"Proxima Nova\", sans-serif",
  padding: "zero",
  flexDirection: "column",
  width: "100%"
};
DropdownIcon.defaultProps = {
  padding: "zero"
};
DropdownOptionsWrapper.defaultProps = {
  fontFamily: "\"Proxima Nova\", sans-serif",
  padding: "zero",
  display: "initial"
};
DropdownCheckboxWrapper.defaultProps = {
  padding: "zero",
  display: "flex",
  flexDirection: "column"
};
DropdownCheckboxSearchWrapper.defaultProps = {
  display: "initial"
};
DropdownCheckboxOptionsWrapper.defaultProps = {
  padding: "zero",
  paddingBottom: "sm",
  display: "initial"
};
DropdownCheckboxItemWrapper.defaultProps = {
  paddingTop: "xs",
  paddingBottom: "xs",
  paddingLeft: "sm",
  paddingRight: "sm"
};
DropdownOptions.defaultProps = {
  mode: "inactive"
};

var css_248z$1 = ".Option_dropdownOption__1rKJw {\n  padding: 8px;\n  font-family: \"Roboto\", sans-serif;\n  border-bottom: 1px solid rgba(221, 221, 221, 0.4); }\n  .Option_dropdownOption__1rKJw:first-child {\n    padding-top: 8px; }\n  .Option_dropdownOption__1rKJw:hover {\n    background-color: #fafafa;\n    cursor: pointer; }\n  .Option_dropdownOption__1rKJw.Option_zeroState__1Z7KT {\n    opacity: 0.5;\n    background-color: transparent !important; }\n    .Option_dropdownOption__1rKJw.Option_zeroState__1Z7KT span {\n      color: #000 !important; }\n  .Option_dropdownOption__1rKJw.Option_isNew__1eOC1 span {\n    font-style: italic; }\n\n.Option_dropdownOptionText__1-Ndm {\n  font-size: 12px;\n  font-weight: 400; }\n";
var styles$1 = {"dropdownOption":"Option_dropdownOption__1rKJw","zeroState":"Option_zeroState__1Z7KT","isNew":"Option_isNew__1eOC1","dropdownOptionText":"Option_dropdownOptionText__1-Ndm"};
styleInject(css_248z$1);

var Option = function Option(_ref) {
  var children = _ref.children,
    onClick = _ref.onClick,
    selected = _ref.selected,
    innerRef = _ref.innerRef,
    className = _ref.className,
    isZeroState = _ref.isZeroState,
    isNew = _ref.isNew,
    themed = _ref.themed,
    noOptionsText = _ref.noOptionsText,
    checkboxSearch = _ref.checkboxSearch,
    size = _ref.size,
    onMouseDown = _ref.onMouseDown;
  var _React$useContext = React.useContext(Context),
    primaryColor = _React$useContext.primaryColor;
  var dropdownOptionSelectedStyle = selected ? {
    backgroundColor: rgba(primaryColor, 0.1)
  } : {};
  var dropdownOptionTextStyle = selected ? {
    color: primaryColor
  } : {};
  var selectedClassName = selected ? "".concat(className, "-selected") : "";
  var zeroStateClassName = isZeroState ? styles$1.zeroState : "";
  var isNewClassName = isNew ? styles$1.isNew : "";
  var optionMode = "default";
  var renderOption = function renderOption() {
    if (themed) {
      if (children === noOptionsText) {
        if (checkboxSearch) {
          optionMode = "disabledWithCheckboxSearch";
        } else {
          optionMode = "disabled";
        }
      }
      return /*#__PURE__*/React.createElement(DropdownOption, {
        ref: innerRef,
        onMouseDown: onMouseDown,
        onClick: !isZeroState ? onClick : null,
        "data-testid": "dropdown-option",
        mode: optionMode,
        size: size,
        variant: selected && children !== noOptionsText ? "selected" : "default"
      }, /*#__PURE__*/React.createElement(Text, {
        variant: "body.md",
        color: children === noOptionsText && "red.haptik"
      }, children));
    }
    return /*#__PURE__*/React.createElement("div", {
      ref: innerRef,
      style: dropdownOptionSelectedStyle,
      className: "".concat(styles$1.dropdownOption, " ").concat(className, " ").concat(selectedClassName, " ").concat(zeroStateClassName, " ").concat(isNewClassName),
      onMouseDown: onMouseDown,
      onClick: !isZeroState ? onClick : null,
      "data-testid": "dropdown-option"
    }, /*#__PURE__*/React.createElement("span", {
      style: dropdownOptionTextStyle,
      className: "".concat(styles$1.dropdownOptionText),
      dangerouslySetInnerHTML: {
        __html: children
      }
    }));
  };
  return renderOption();
};
Option.propTypes = {
  children: PropTypes.string,
  className: PropTypes.string,
  innerRef: PropTypes.func,
  isNew: PropTypes.bool,
  isZeroState: PropTypes.bool,
  onClick: PropTypes.func,
  selected: PropTypes.bool,
  themed: PropTypes.bool,
  noOptionsText: PropTypes.string,
  onMouseDown: PropTypes.func
};
Option.defaultProps = {
  children: "",
  className: "",
  innerRef: function innerRef() {},
  onClick: function onClick() {},
  isNew: false,
  isZeroState: false,
  selected: false,
  themed: false,
  noOptionsText: "",
  onMouseDown: function onMouseDown() {}
};
Option.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Option",
  "props": {
    "children": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "innerRef": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onClick": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "isNew": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "isZeroState": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "selected": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "noOptionsText": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "onMouseDown": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    }
  }
};

/**
 * Handles the keyboard events for selection and navigation
 * of dropdown options. [Up/Down/Enter/Escape]
 * Also attaches/removes the event listener for keydown on the input
 * passed in the configuration
 * Returns the index of the option to be highlighted
 * @param {Object}    config
 * @param {Object[]}  config.options  List of all options
 * @param {function}  config.onEnter  onEnter callback
 * @param {function}  config.onEscape onEscape callback
 * @param {Object}    config.attachTo the dom ref to attach the listeners to
 * @param {boolean}   config.enabled  whether keyboard select is enabled
 * @returns {number}                  the higlight index of the selected option
 */
function useKeyboardSelect(_ref) {
  var options = _ref.options,
    onEnter = _ref.onEnter,
    onEscape = _ref.onEscape,
    attachTo = _ref.attachTo,
    enabled = _ref.enabled;
  /*
    highlightIndex = -1 so that by default no option is highligted
    once you press keydown or keyup first/last option will be highlighted 
  */
  var _useState = useState(-1),
    _useState2 = _slicedToArray(_useState, 2),
    highlightIndex = _useState2[0],
    setHighlightIndex = _useState2[1];
  var changeHighlightIndex = function changeHighlightIndex(newIndex) {
    if (newIndex >= options.length) {
      newIndex = 0;
    } else if (newIndex < 0) {
      newIndex = options.length - 1;
    }
    setHighlightIndex(newIndex);
  };
  var handleKeyDown = function handleKeyDown(e) {
    switch (e.keyCode) {
      case KEY_CODES.DOWN:
        e.preventDefault();
        e.stopPropagation();
        return changeHighlightIndex(highlightIndex + 1);
      case KEY_CODES.UP:
        e.preventDefault();
        e.stopPropagation();
        return changeHighlightIndex(highlightIndex - 1);
      case KEY_CODES.ENTER:
        e.preventDefault();
        e.stopPropagation();
        if (!options[highlightIndex] || options[highlightIndex].isZeroState) return onEscape(false);
        return onEnter(options[highlightIndex].value);
      case KEY_CODES.ESC:
        e.preventDefault();
        e.stopPropagation();
        return onEscape(false);
      default:
        return null;
    }
  };
  useEffect(function () {
    if (!attachTo.current || !enabled) return;
    attachTo.current.addEventListener("keydown", handleKeyDown);
    return function () {
      if (!attachTo.current) return;
      attachTo.current.removeEventListener("keydown", handleKeyDown);
    };
  }, [attachTo.current, highlightIndex, options, enabled]);
  return highlightIndex;
}

var css_248z$2 = ".Options_dropdownOptions__3ilMA {\n  position: absolute;\n  z-index: 1000000001;\n  width: 100px;\n  max-height: 200px;\n  overflow-y: scroll;\n  background-color: #fff;\n  border: 1px solid #ddd;\n  opacity: 0;\n  box-sizing: border-box;\n  margin-top: -1px;\n  border-bottom-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  transition: 0.1s ease-out;\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }\n  .Options_dropdownOptions__3ilMA.Options_active__2zBEj {\n    transform: translateY(0px);\n    opacity: 1; }\n  .Options_dropdownOptions__3ilMA.Options_reverse__Rwqvh {\n    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.1);\n    border-top-right-radius: 8px;\n    border-top-left-radius: 8px;\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0; }\n    .Options_dropdownOptions__3ilMA.Options_reverse__Rwqvh.Options_active__2zBEj {\n      transform: translateY(0px); }\n\n.Options_dropdownOptionsOverlay__14JOX {\n  position: absolute;\n  z-index: 1000000000;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0; }\n\n.Options_checkboxOptions__uTTqu {\n  max-height: inherit;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column; }\n  .Options_checkboxOptionsSearch__1rPDL {\n    width: -webkit-fill-available;\n    font-size: 14px;\n    outline: none;\n    border: 0;\n    border-radius: 0;\n    padding: 4px; }\n    .Options_checkboxOptionsSearchWrapper__3iwLd {\n      display: flex;\n      margin: 12px;\n      border: 1px solid #ddd;\n      padding: 2px;\n      border-radius: 8px; }\n      .Options_checkboxOptionsSearchWrapper__3iwLd.Options_noBorder__tKYPc {\n        border: 0 !important;\n        margin-top: 0;\n        margin-bottom: 4px; }\n      .Options_checkboxOptionsSearchWrapperZeroState__27A2b {\n        padding: 12px;\n        padding-top: 0; }\n    .Options_checkboxOptionsSearchIcon__1u5RG {\n      margin-top: 2px; }\n      .Options_checkboxOptionsSearchIcon__1u5RG.Options_noDisplay__3CatW {\n        display: none; }\n    .Options_checkboxOptionsSearch__1rPDL.Options_hidden__NAqri {\n      opacity: 0 !important;\n      margin: 0 !important;\n      padding: 0 !important;\n      max-height: 2px !important; }\n  .Options_checkboxOptionsWrapper__3ir0c {\n    overflow: auto; }\n  .Options_checkboxOptionsOption__aFmlz {\n    padding: 4px 12px;\n    margin: 0; }\n    .Options_checkboxOptionsOption__aFmlz:hover {\n      background-color: #fafafa;\n      cursor: pointer; }\n";
var styles$2 = {"dropdownOptions":"Options_dropdownOptions__3ilMA","active":"Options_active__2zBEj","reverse":"Options_reverse__Rwqvh","dropdownOptionsOverlay":"Options_dropdownOptionsOverlay__14JOX","checkboxOptions":"Options_checkboxOptions__uTTqu","checkboxOptionsSearch":"Options_checkboxOptionsSearch__1rPDL","checkboxOptionsSearchWrapper":"Options_checkboxOptionsSearchWrapper__3iwLd","noBorder":"Options_noBorder__tKYPc","checkboxOptionsSearchWrapperZeroState":"Options_checkboxOptionsSearchWrapperZeroState__27A2b","checkboxOptionsSearchIcon":"Options_checkboxOptionsSearchIcon__1u5RG","noDisplay":"Options_noDisplay__3CatW","hidden":"Options_hidden__NAqri","checkboxOptionsWrapper":"Options_checkboxOptionsWrapper__3ir0c","checkboxOptionsOption":"Options_checkboxOptionsOption__aFmlz"};
styleInject(css_248z$2);

var Options = function Options(_ref) {
  var options = _ref.options,
    _onChange = _ref.onChange,
    onBlur = _ref.onBlur,
    attachTo = _ref.attachTo,
    focused = _ref.focused,
    inputRef = _ref.inputRef,
    prefixClassName = _ref.prefixClassName,
    isSearchFocused = _ref.isSearchFocused,
    handleOnSearchFocus = _ref.handleOnSearchFocus,
    handleOnSearchBlur = _ref.handleOnSearchBlur,
    handleSearchText = _ref.handleSearchText,
    isReversed = _ref.isReversed,
    withCheckbox = _ref.withCheckbox,
    withMultiple = _ref.withMultiple,
    withSearch = _ref.withSearch,
    onMouseEnter = _ref.onMouseEnter,
    onMouseLeave = _ref.onMouseLeave,
    className = _ref.className,
    themed = _ref.themed,
    noOptionsText = _ref.noOptionsText,
    size = _ref.size,
    onMouseDown = _ref.onMouseDown,
    attachPortalTo = _ref.attachPortalTo;
  var _useActivify = useActivify(focused),
    visible = _useActivify.visible,
    enabled = _useActivify.enabled;
  var _React$useContext = React.useContext(Context),
    primaryColor = _React$useContext.primaryColor;
  var _React$useState = React.useState(0),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    dropdownContainerRect = _React$useState2[0],
    setDropdownContainerRect = _React$useState2[1];

  // A ref to store all the DOM elements for all the options
  var dropdownDOMs = React.useRef();

  // A ref for the options container (the scroll window)
  var scrollContainer = React.useRef();

  // Handles all keyboard selection (up/down/escape/enter)
  // returns the currently selected index
  // (the index of the option that needs to be highlighted)
  var highlightIndex = useKeyboardSelect({
    options: options,
    attachTo: attachTo,
    onEnter: _onChange,
    onEscape: onBlur,
    // only enabled when the options are actually visible
    enabled: visible
  });
  var activeClassName = visible ? styles$2.active : "";
  var focusedStyle = focused ? {
    borderColor: primaryColor
  } : {};
  var focusedSearchStyle = isSearchFocused ? {
    borderColor: primaryColor
  } : {};
  var reverseModeClassName = isReversed ? styles$2.reverse : "";

  // Calculates Rect dimensions of attachTo Ref
  var calcRect = useCallback(function () {
    var rect = attachTo.current && attachTo.current.getBoundingClientRect();
    setDropdownContainerRect(rect);
  }, [attachTo, setDropdownContainerRect]);

  /* Dropdown refs useEffect
   * whenever the options change
   * we create n refs where n is the number of options
   * we store these refs in the dropdownDOMs ref
   */
  React.useEffect(function () {
    dropdownDOMs.current = new Array(options.length).fill(0).map(function () {
      return /*#__PURE__*/React.createRef();
    });

    // Refresh the rect dimensions whenever there are changes in options
    calcRect();
  }, [options.length, options, highlightIndex, calcRect]);

  /* Dropdown options scrollIntoView useEffect
   * whenever the highlightIndex changes
   * if the new option is not visible in the options window
   * we scroll to the new option to ensure visibility
   * it tries to mimic how native dropdowns on the web work
   */
  React.useEffect(function () {
    var optionDOMS = dropdownDOMs.current || [];
    var activeOptionDOM = (optionDOMS[highlightIndex] || {}).current;
    var containerDOM = scrollContainer.current;
    if (!activeOptionDOM || !containerDOM) return;
    var containerHeight = containerDOM.getBoundingClientRect().height;
    var scrollStartPoint = containerDOM.scrollTop;
    var scrollEndPoint = scrollStartPoint + containerHeight;
    var elemOffset = activeOptionDOM.offsetTop;
    var elemHeight = activeOptionDOM.getBoundingClientRect().height;
    if (elemOffset + elemHeight > scrollEndPoint) {
      // if the element is past the visible point
      // then we scroll the dropdown just enouogh so that the element
      // is visible at the bottom of the dropdown
      containerDOM.scrollTop = elemOffset - containerHeight + elemHeight;
    } else if (elemOffset - elemHeight < scrollStartPoint) {
      // if the element is before the visible point
      // then we scroll the dropdown just enouogh so that the element
      // is visible at the top of the dropdown
      containerDOM.scrollTop = elemOffset;
    }
  }, [highlightIndex]);
  var handleScroll = useCallback(function () {
    // Refresh the rect dimensions whenever user scrolls the page
    calcRect();
  }, [calcRect]);
  React.useEffect(function () {
    themed && focused && window.addEventListener("scroll", handleScroll, {
      passive: true
    });
    return function () {
      return window.removeEventListener("scroll", handleScroll);
    };
  }, [themed, focused, handleScroll]);
  if (!enabled) return null;
  var getPosition = function getPosition() {
    var inputRect;
    if (inputRef && inputRef.current && !!inputRef.current.ownerDocument && inputRef.current instanceof inputRef.current.ownerDocument.defaultView.HTMLElement) {
      inputRect = inputRef.current.getBoundingClientRect();
    }
    var attachPortalToRect = attachPortalTo && attachPortalTo.current && attachPortalTo.current.getBoundingClientRect();
    return {
      top: isReversed ? undefined : attachPortalTo && attachPortalTo.current && inputRect ? window.scrollY + inputRect.top - attachPortalToRect.top + inputRect.height : dropdownContainerRect.bottom + window.scrollY,
      bottom: isReversed ? attachPortalTo && attachPortalTo.current && inputRect ? attachPortalToRect.bottom - inputRect.bottom + inputRect.height - 1 : window.innerHeight - dropdownContainerRect.top - window.scrollY - 1 : undefined,
      left: attachPortalTo && attachPortalTo.current && inputRect ? inputRect.left - attachPortalToRect.left : dropdownContainerRect.left,
      width: dropdownContainerRect.width
    };
  };

  // based on if the dropdown options should show above (isReversed) or below
  // the input, we assign positional properties that will be applied to the outermost
  // options div.
  var position = getPosition();
  var checkboxWrapperVariant;
  if (focused) {
    if (isReversed) {
      checkboxWrapperVariant = "dropdownActiveTop";
    } else {
      checkboxWrapperVariant = "dropdownActive";
    }
  }
  var renderWithCheckbox = function renderWithCheckbox() {
    if (themed) {
      return /*#__PURE__*/React.createElement(DropdownCheckboxWrapper, {
        onMouseEnter: onMouseEnter,
        onMouseLeave: onMouseLeave,
        variant: checkboxWrapperVariant
      }, /*#__PURE__*/React.createElement(DropdownCheckboxSearchWrapper, {
        mode: withSearch ? "withSearch" : "withoutSearch"
      }, /*#__PURE__*/React.createElement(DropdownCheckboxSearchIcon, null, /*#__PURE__*/React.createElement(Icon, {
        src: SearchIcon
      })), /*#__PURE__*/React.createElement(Text$1, {
        themed: true,
        innerRef: inputRef,
        placeholder: "Search here",
        onChange: handleSearchText,
        onFocus: handleOnSearchFocus,
        onBlur: handleOnSearchBlur,
        style: {
          paddingLeft: 36
        }
      })), /*#__PURE__*/React.createElement(DropdownCheckboxOptionsWrapper, {
        mode: withSearch ? "default" : "withoutSearch"
      }, options.map(function (option, i) {
        if (option.isZeroState) {
          return /*#__PURE__*/React.createElement(Option, {
            key: "themed-".concat(option.label, "-").concat(i),
            selected: highlightIndex === i,
            innerRef: dropdownDOMs.current[i],
            isZeroState: option.isZeroState,
            themed: true,
            noOptionsText: noOptionsText,
            checkboxSearch: true
          }, option.label);
        }
        // TODO: Add "create mode" as and when required
        return /*#__PURE__*/React.createElement(DropdownCheckboxItemWrapper, null, /*#__PURE__*/React.createElement(Checkbox.Item, {
          themed: true,
          key: "themed-".concat(option.label, "-").concat(i),
          label: option.label,
          value: option.isSelected,
          onChange: function onChange() {
            _onChange(option.value);
          }
        }));
      })));
    }
    return /*#__PURE__*/React.createElement("div", {
      className: styles$2.checkboxOptions,
      onMouseEnter: onMouseEnter,
      onMouseLeave: onMouseLeave
    }, /*#__PURE__*/React.createElement("div", {
      className: "".concat(styles$2.checkboxOptionsSearchWrapper, "  ").concat(!withSearch && styles$2.noBorder),
      style: {
        borderColor: focused ? primaryColor : undefined
      }
    }, /*#__PURE__*/React.createElement(Icon, {
      src: SearchIcon,
      className: "".concat(styles$2.checkboxOptionsSearchIcon, " ").concat(prefixClassName, "-icon  ").concat(!withSearch && styles$2.noDisplay)
    }), /*#__PURE__*/React.createElement("input", {
      ref: inputRef,
      className: "".concat(styles$2.checkboxOptionsSearch, " ").concat(!withSearch && styles$2.hidden),
      style: focusedSearchStyle,
      placeholder: "Search here",
      onChange: function onChange(e) {
        return handleSearchText(e.target.value);
      },
      onFocus: handleOnSearchFocus,
      onBlur: handleOnSearchBlur
    })), /*#__PURE__*/React.createElement("div", {
      className: styles$2.checkboxOptionsWrapper
    }, options.map(function (option, i) {
      if (option.isZeroState) {
        return /*#__PURE__*/React.createElement(Option, {
          key: "".concat(option.label, "-").concat(i),
          selected: highlightIndex === i,
          innerRef: dropdownDOMs.current[i],
          isZeroState: option.isZeroState,
          className: "".concat(prefixClassName, "-option ").concat(styles$2.checkboxOptionsWrapperZeroState)
        }, option.label);
      }
      // TODO: Add "create mode" as and when required
      return /*#__PURE__*/React.createElement(Checkbox.Item, {
        key: "".concat(option.label, "-").concat(i),
        label: option.label,
        value: option.isSelected,
        onChange: function onChange() {
          _onChange(option.value);
        },
        className: "".concat(styles$2.checkboxOptionsOption, " ").concat(prefixClassName, "-option")
      });
    })));
  };
  var renderOptionsInner = function renderOptionsInner() {
    if (withCheckbox && withMultiple) {
      return renderWithCheckbox();
    }
    return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(function (option, i) {
      return /*#__PURE__*/React.createElement(Option, {
        key: "".concat(option.label, "-").concat(i),
        selected: highlightIndex === i,
        innerRef: dropdownDOMs.current[i],
        onClick: function onClick() {
          _onChange(option.value);
        },
        onMouseDown: onMouseDown,
        isZeroState: option.isZeroState,
        isNew: option.isNew,
        className: "".concat(prefixClassName, "-option"),
        themed: themed,
        noOptionsText: noOptionsText,
        size: size
      }, option.label);
    }));
  };
  var renderOptions = function renderOptions() {
    if (themed) {
      var mode = visible ? "active" : "inactive";
      return /*#__PURE__*/React.createElement(DropdownOptionsWrapper, null, /*#__PURE__*/React.createElement(DropdownOptionsOverlay, null), /*#__PURE__*/React.createElement(DropdownOptions, {
        ref: scrollContainer,
        style: _objectSpread2({}, position),
        onBlur: onBlur,
        mode: mode,
        variant: withCheckbox ? "withCheckbox" : "default",
        positionVariant: isReversed ? "top" : "default"
      }, renderOptionsInner()));
    }
    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(styles$2.dropdownOptionsWrapper, "  ").concat(className)
    }, /*#__PURE__*/React.createElement("div", {
      className: styles$2.dropdownOptionsOverlay
    }), /*#__PURE__*/React.createElement("div", {
      ref: scrollContainer,
      style: _objectSpread2(_objectSpread2({}, position), focusedStyle),
      className: "".concat(styles$2.dropdownOptions, " ").concat(activeClassName, " ").concat(reverseModeClassName, " ").concat(prefixClassName, "-options"),
      onBlur: onBlur
    }, renderOptionsInner()));
  };
  return /*#__PURE__*/React.createElement(Portal, {
    node: attachPortalTo && attachPortalTo.current
  }, renderOptions());
};
Options.propTypes = {
  prefixClassName: PropTypes.string,
  className: PropTypes.string,
  focused: PropTypes.bool,
  isReversed: PropTypes.bool,
  withCheckbox: PropTypes.bool,
  withMultiple: PropTypes.bool,
  withSearch: PropTypes.bool,
  onBlur: PropTypes.func,
  onChange: PropTypes.func,
  onMouseEnter: PropTypes.func,
  onMouseLeave: PropTypes.func,
  inputRef: PropTypes.shape({
    current: PropTypes.node
  }),
  attachTo: PropTypes.shape({
    current: PropTypes.node
  }),
  options: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
    value: PropTypes.shape({})
  })),
  isSearchFocused: PropTypes.bool,
  handleOnSearchFocus: PropTypes.func,
  handleOnSearchBlur: PropTypes.func,
  handleSearchText: PropTypes.func,
  themed: PropTypes.bool,
  noOptionsText: PropTypes.string,
  size: PropTypes.string,
  onMouseDown: PropTypes.func,
  attachPortalTo: PropTypes.shape({
    current: PropTypes.node
  })
};
Options.defaultProps = {
  prefixClassName: "",
  className: "",
  focused: false,
  isReversed: false,
  withCheckbox: false,
  withMultiple: false,
  isSearchFocused: false,
  withSearch: false,
  onBlur: function onBlur() {},
  onChange: function onChange() {},
  handleOnSearchFocus: function handleOnSearchFocus() {},
  handleOnSearchBlur: function handleOnSearchBlur() {},
  handleSearchText: function handleSearchText() {},
  options: [],
  attachTo: {},
  themed: false,
  noOptionsText: "",
  size: "",
  onMouseDown: function onMouseDown() {},
  attachPortalTo: null
};
Options.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Options",
  "props": {
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "focused": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "isReversed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "withCheckbox": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "withMultiple": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "isSearchFocused": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "withSearch": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "onBlur": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "handleOnSearchFocus": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "handleOnSearchBlur": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "handleSearchText": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "options": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "label": {
              "name": "string",
              "required": false
            },
            "value": {
              "name": "shape",
              "value": {},
              "required": false
            }
          }
        }
      },
      "required": false,
      "description": ""
    },
    "attachTo": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "type": {
        "name": "shape",
        "value": {
          "current": {
            "name": "node",
            "required": false
          }
        }
      },
      "required": false,
      "description": ""
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "noOptionsText": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "size": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "onMouseDown": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "attachPortalTo": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "shape",
        "value": {
          "current": {
            "name": "node",
            "required": false
          }
        }
      },
      "required": false,
      "description": ""
    },
    "onMouseEnter": {
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onMouseLeave": {
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "inputRef": {
      "type": {
        "name": "shape",
        "value": {
          "current": {
            "name": "node",
            "required": false
          }
        }
      },
      "required": false,
      "description": ""
    }
  }
};

var css_248z$3 = ".Input_input__2jbcF.Input_focused__3kWvf:not(.Input_reversed__2ZoNG) {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0; }\n\n.Input_input__2jbcF.Input_focused__3kWvf.Input_reversed__2ZoNG {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0; }\n";
var styles$3 = {"input":"Input_input__2jbcF","focused":"Input_focused__3kWvf","reversed":"Input_reversed__2ZoNG"};
styleInject(css_248z$3);

var Input = function Input(_ref) {
  var withMultiple = _ref.withMultiple,
    withSearch = _ref.withSearch,
    value = _ref.value,
    onChange = _ref.onChange,
    text = _ref.text,
    onTextChange = _ref.onTextChange,
    innerRef = _ref.innerRef,
    inputRef = _ref.inputRef,
    focused = _ref.focused,
    isReversed = _ref.isReversed,
    placeholder = _ref.placeholder,
    optionKey = _ref.optionKey,
    tooltip = _ref.tooltip,
    prefixClassName = _ref.prefixClassName,
    disabled = _ref.disabled,
    themed = _ref.themed,
    icon = _ref.icon,
    arrowIcon = _ref.arrowIcon,
    size = _ref.size;
  var focusedClassName = focused ? styles$3.focused : "";
  var reversedClassName = isReversed ? styles$3.reversed : "";
  var className = "".concat(styles$3.input, " ").concat(focusedClassName, " ").concat(reversedClassName);
  var dropdownClassName = "".concat(themed && styles$3.dropdownIcon, " ").concat(themed && focused && styles$3.dropdownIconActive);
  var postfixComponent = tooltip ? /*#__PURE__*/React.createElement(WithTooltip, {
    className: "".concat(prefixClassName, "-tooltip"),
    tooltip: tooltip,
    position: "BOTTOM"
  }, /*#__PURE__*/React.createElement(Icon, {
    className: "".concat(prefixClassName, "-icon"),
    src: AngleDownIcon
  })) : /*#__PURE__*/React.createElement(Icon, {
    className: "".concat(prefixClassName, "-icon ").concat(dropdownClassName),
    src: AngleDownIcon
  });
  var themedPostfixComponent = tooltip ? /*#__PURE__*/React.createElement(Tooltip, {
    themed: true,
    tooltip: tooltip,
    position: "BOTTOM"
  }, /*#__PURE__*/React.createElement(DropdownArrow, {
    mode: focused ? "active" : "inactive"
  }, arrowIcon || /*#__PURE__*/React.createElement(Icon, {
    src: AngleDownIcon
  }))) : /*#__PURE__*/React.createElement(DropdownArrow, {
    mode: focused ? "active" : "inactive"
  }, arrowIcon || /*#__PURE__*/React.createElement(Icon, {
    src: AngleDownIcon,
    size: size
  }));
  var prefixComponent = icon && /*#__PURE__*/React.createElement(DropdownIcon, null, /*#__PURE__*/React.createElement(Icon, {
    src: icon,
    size: size
  }));
  var dropdownVariant = "dropdown";
  if (focused) {
    if (isReversed) {
      dropdownVariant = "dropdownActiveTop";
    } else {
      dropdownVariant = "dropdownActive";
    }
  }
  var commonProps = {
    innerRef: innerRef,
    inputRef: inputRef,
    focused: focused,
    placeholder: placeholder,
    className: className,
    prefixClassName: prefixClassName,
    prefixComponent: prefixComponent,
    postfixComponent: themed ? themedPostfixComponent : postfixComponent,
    disabled: disabled,
    themed: themed,
    size: size,
    variant: dropdownVariant
  };

  // if multiple selection is allowed, then we use the chips input
  // which deals with multiple item selections (arrays)
  // TODO: add a size variant
  if (withMultiple) {
    return /*#__PURE__*/React.createElement(ChipsInput, _extends({
      value: value,
      typeValue: text,
      onChange: onChange,
      onType: onTextChange,
      optionKey: optionKey
    }, commonProps));
  }

  // if search is allowed, then we return an editable text input
  if (withSearch) {
    return /*#__PURE__*/React.createElement(TextInput, _extends({
      editable: true,
      value: text,
      onChange: onTextChange
    }, commonProps));
  }

  // otherwise we still return a text input
  // however editing is disabled
  return /*#__PURE__*/React.createElement(TextInput, _extends({
    editable: false,
    value: value[0][optionKey],
    onChange: onTextChange
  }, commonProps));
};
Input.propTypes = {
  disabled: PropTypes.bool,
  focused: PropTypes.bool,
  inputRef: PropTypes.shape({}),
  innerRef: PropTypes.shape({}),
  isReversed: PropTypes.bool,
  onChange: PropTypes.func,
  onTextChange: PropTypes.func,
  optionKey: PropTypes.string,
  placeholder: PropTypes.string,
  prefixClassName: PropTypes.string,
  text: PropTypes.string,
  tooltip: PropTypes.string,
  value: PropTypes.arrayOf(PropTypes.shape({})),
  withMultiple: PropTypes.bool,
  withSearch: PropTypes.bool,
  themed: PropTypes.bool,
  icon: PropTypes.node,
  size: PropTypes.string
};
Input.defaultProps = {
  disabled: false,
  focused: false,
  isReversed: false,
  withMultiple: false,
  withSearch: false,
  onChange: function onChange() {},
  onTextChange: function onTextChange() {},
  optionKey: "",
  placeholder: "",
  prefixClassName: "",
  tooltip: "",
  text: "",
  themed: false,
  size: ""
};
Input.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Input",
  "props": {
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "focused": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "isReversed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "withMultiple": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "withSearch": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onTextChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "optionKey": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "placeholder": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "tooltip": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "text": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "size": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "inputRef": {
      "type": {
        "name": "shape",
        "value": {}
      },
      "required": false,
      "description": ""
    },
    "innerRef": {
      "type": {
        "name": "shape",
        "value": {}
      },
      "required": false,
      "description": ""
    },
    "value": {
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {}
        }
      },
      "required": false,
      "description": ""
    },
    "icon": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    }
  }
};

var css_248z$4 = ".WithCheckboxInput_withCheckboxInput__3T6S_ {\n  display: flex;\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  position: relative;\n  justify-content: space-between;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  transition: 0.2s ease-out;\n  background: #fff; }\n  .WithCheckboxInput_withCheckboxInput__3T6S_.WithCheckboxInput_focused__1X6y0:not(.WithCheckboxInput_reversed__1zACS) {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0; }\n  .WithCheckboxInput_withCheckboxInput__3T6S_.WithCheckboxInput_focused__1X6y0.WithCheckboxInput_reversed__1zACS {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0; }\n  .WithCheckboxInput_withCheckboxInputText__1NdZp {\n    width: 95%;\n    font-size: 14px;\n    padding: 0 8px 0 0;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis; }\n  .WithCheckboxInput_withCheckboxInputIcon__1qJ6f {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    width: 5%; }\n";
var styles$4 = {"withCheckboxInput":"WithCheckboxInput_withCheckboxInput__3T6S_","focused":"WithCheckboxInput_focused__1X6y0","reversed":"WithCheckboxInput_reversed__1zACS","withCheckboxInputText":"WithCheckboxInput_withCheckboxInputText__1NdZp","withCheckboxInputIcon":"WithCheckboxInput_withCheckboxInputIcon__1qJ6f"};
styleInject(css_248z$4);

var WithCheckboxInput = function WithCheckboxInput(_ref) {
  var value = _ref.value,
    innerRef = _ref.innerRef,
    optionKey = _ref.optionKey,
    tooltip = _ref.tooltip,
    focused = _ref.focused,
    isReversed = _ref.isReversed,
    prefixClassName = _ref.prefixClassName,
    themed = _ref.themed,
    icon = _ref.icon;
  var _React$useContext = React.useContext(Context),
    primaryColor = _React$useContext.primaryColor;
  var focusedStyle = focused ? {
    borderColor: primaryColor
  } : {};
  var focusedClassName = focused ? styles$4.focused : "";
  var reversedClassName = isReversed ? styles$4.reversed : "";
  var renderWithCheckboxInput = function renderWithCheckboxInput() {
    if (themed) {
      var dropdownVariant = "dropdown";
      if (focused) {
        if (isReversed) {
          dropdownVariant = "dropdownActiveTop";
        } else {
          dropdownVariant = "dropdownActive";
        }
      }
      return /*#__PURE__*/React.createElement(DropdownWrapper, {
        ref: innerRef,
        "data-testid": "dropdownCheckboxWrapper"
      }, icon && /*#__PURE__*/React.createElement(DropdownIcon, {
        mode: "withCheckbox"
      }, /*#__PURE__*/React.createElement(Icon, {
        src: icon
      })), /*#__PURE__*/React.createElement(DropdownWithCheckboxInput, {
        variant: dropdownVariant
      }, value.map(function (valueObject) {
        return valueObject[optionKey];
      }).join(", ") || "Nothing selected.", tooltip ? /*#__PURE__*/React.createElement(Tooltip, {
        themed: true,
        tooltip: tooltip,
        position: "BOTTOM"
      }, /*#__PURE__*/React.createElement(DropdownArrow, {
        mode: focused ? "active" : "inactive"
      }, /*#__PURE__*/React.createElement(Icon, {
        src: AngleDownIcon
      }))) : /*#__PURE__*/React.createElement(DropdownArrow, {
        mode: focused ? "activeWithCheckbox" : "inactiveWithCheckbox"
      }, /*#__PURE__*/React.createElement(Icon, {
        src: AngleDownIcon
      }))));
    }
    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(styles$4.withCheckboxInput, " ").concat(focusedClassName, " ").concat(reversedClassName),
      style: focusedStyle,
      ref: innerRef,
      "data-testid": "dropdownCheckboxWrapper"
    }, /*#__PURE__*/React.createElement("div", {
      className: styles$4.withCheckboxInputText
    }, value.map(function (valueObject) {
      return valueObject[optionKey];
    }).join(", ")), /*#__PURE__*/React.createElement("div", {
      className: styles$4.withCheckboxInputIcon
    }, tooltip ? /*#__PURE__*/React.createElement(WithTooltip, {
      className: "".concat(prefixClassName, "-tooltip"),
      tooltip: tooltip,
      position: "BOTTOM"
    }, /*#__PURE__*/React.createElement(Icon, {
      className: "".concat(prefixClassName, "-icon"),
      src: AngleDownIcon
    })) : /*#__PURE__*/React.createElement(Icon, {
      className: "".concat(prefixClassName, "-icon"),
      src: AngleDownIcon
    })));
  };
  return renderWithCheckboxInput();
};
WithCheckboxInput.propTypes = {
  value: PropTypes.arrayOf(PropTypes.shape({})),
  innerRef: PropTypes.shape({}),
  optionKey: PropTypes.string,
  tooltip: PropTypes.string,
  prefixClassName: PropTypes.string,
  focused: PropTypes.bool,
  isReversed: PropTypes.bool,
  themed: PropTypes.bool
};
WithCheckboxInput.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "WithCheckboxInput",
  "props": {
    "value": {
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {}
        }
      },
      "required": false,
      "description": ""
    },
    "innerRef": {
      "type": {
        "name": "shape",
        "value": {}
      },
      "required": false,
      "description": ""
    },
    "optionKey": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "tooltip": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "focused": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "isReversed": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "themed": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    }
  }
};

/**
 * getOptions takes some input props and returns
 * the list of options to be rendered by the dropdown component
 * @param {object}    config
 * @param {Object[]}  options         list of options to filter
 * @param {string}    optionKey       the main key for the label. option[optionKey] gives the label
 * @param {string}    noOptionsText   The text to show in case no options are visible
 * @param {string}    createPrefix    In case creation is allowed, then the prefix to append the new text
 * @param {boolean}   withCreate      Whether creation is allowed
 * @param {Object}    value           The currently selected value
 * @param {string}    text            The currently typed value
 * }
 */
function getOptions(_ref) {
  var options = _ref.options,
    optionKey = _ref.optionKey,
    noOptionsText = _ref.noOptionsText,
    createPrefix = _ref.createPrefix,
    withCreate = _ref.withCreate,
    value = _ref.value,
    text = _ref.text,
    _ref$withCheckbox = _ref.withCheckbox,
    withCheckbox = _ref$withCheckbox === void 0 ? false : _ref$withCheckbox,
    _ref$withMultiple = _ref.withMultiple,
    withMultiple = _ref$withMultiple === void 0 ? false : _ref$withMultiple,
    themed = _ref.themed;
  var isUsingCheckbox = withCheckbox && withMultiple;
  // ===first===
  // filter out the already selected options
  // based on the value.
  // ===second===
  // transform the array of objects to a simple array of objects matching
  // the following structure. Each option is an object
  // {
  //   label: text to be displayed
  //   value: the actual value to be returned on change
  //   isNew: is a newly created input
  //   isZeroState: is a zero state option (when no options available)
  // }
  var flatValue = value.map(function (valueItem) {
    return valueItem[optionKey];
  });
  var flatOptions = options.map(function (valueItem) {
    return valueItem[optionKey];
  });
  var filteredOptions = options.filter(function (option) {
    return isUsingCheckbox || !flatValue.includes(option[optionKey]);
  }).map(function (option) {
    return _defineProperty({
      label: option[optionKey],
      value: option
    }, isUsingCheckbox && "isSelected", flatValue.includes(option[optionKey]));
  });

  // if creation is allowed we check if the typed text is the same as an option
  // if not, then we inject an option at the top allowing them to create a value
  if (withCreate && !flatOptions.includes(text) && text.trim()) {
    var _value;
    filteredOptions = [{
      label: !themed ? "".concat(createPrefix, " <strong>").concat(text, "</strong>") : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownCreateText, null, createPrefix), /*#__PURE__*/React.createElement(Text, {
        variant: "h4.semi-bold"
      }, text)),
      value: (_value = {}, _defineProperty(_value, optionKey, text), _defineProperty(_value, "type", "CREATE"), _value),
      isNew: true
    }].concat(_toConsumableArray(filteredOptions));
  }

  // if there are no filtered options then we return a zero state which is an array with just
  // the zero state option
  return filteredOptions.length ? filteredOptions : [{
    label: noOptionsText,
    value: null,
    isZeroState: true
  }];
}

var Dropdown = function Dropdown(_ref) {
  var className = _ref.className,
    prefixClassName = _ref.prefixClassName,
    label = _ref.label,
    noOptionsText = _ref.noOptionsText,
    error = _ref.error,
    optionKey = _ref.optionKey,
    value = _ref.value,
    propOptions = _ref.options,
    onChange = _ref.onChange,
    placeholder = _ref.placeholder,
    createPrefix = _ref.createPrefix,
    searchKeys = _ref.searchKeys,
    onFocus = _ref.onFocus,
    onBlur = _ref.onBlur,
    disabled = _ref.disabled,
    tooltip = _ref.tooltip,
    arrowTooltip = _ref.arrowTooltip,
    withSearch = _ref.withSearch,
    withCreate = _ref.withCreate,
    withMultiple = _ref.withMultiple,
    withCheckbox = _ref.withCheckbox,
    themed = _ref.themed,
    style = _ref.style,
    icon = _ref.icon,
    arrowIcon = _ref.arrowIcon,
    size = _ref.size,
    attachTo = _ref.attachTo;
  // stores the currently typed input (in case of withSearch)
  var _React$useState = React.useState(""),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    text = _React$useState2[0],
    setText = _React$useState2[1];
  var _React$useState3 = React.useState(propOptions),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    options = _React$useState4[0],
    setOptions = _React$useState4[1];

  // updates initial set of options, whenever propOptions changes
  // because on re-render, useState for options doesn't get called, which results in
  // options always using the old value of propOptions.
  React.useEffect(function () {
    setOptions(propOptions);
  }, [propOptions]);
  var _React$useState5 = React.useState(),
    _React$useState6 = _slicedToArray(_React$useState5, 2),
    createdOption = _React$useState6[0],
    setCreatedOption = _React$useState6[1];
  var _React$useState7 = React.useState(false),
    _React$useState8 = _slicedToArray(_React$useState7, 2),
    focused = _React$useState8[0],
    setFocused = _React$useState8[1];
  var _React$useState9 = React.useState(false),
    _React$useState10 = _slicedToArray(_React$useState9, 2),
    isSearchFocused = _React$useState10[0],
    setIsSearchFocused = _React$useState10[1];
  var _React$useState11 = React.useState(false),
    _React$useState12 = _slicedToArray(_React$useState11, 2),
    isMouseOnOptions = _React$useState12[0],
    setIsMouseOnOptions = _React$useState12[1];

  // simple mode is when the options are an array of strings instead of objects
  // and the value and onChange also expect strings.
  var isSimpleInputMode = typeof value === "string";
  var isSimpleOptionsMode = options.length && typeof propOptions[0] === "string";

  // the ref for the input wrapper (used for positioning the dropdown)
  var inputWrapperRef = React.useRef();

  // the ref for blur lock (whether to lock the blur event or not)
  var blurCount = React.useRef(false);

  // the ref for the actual input itself (used for focus/blur of input)
  var inputRef = React.useRef();

  // the ref for the clear timeout
  // [when the typeable input clears]
  var timeoutRef = React.useRef();
  var inputValue = "";
  // if the value is a simple string, convert it to an object
  inputValue = isSimpleInputMode ? _defineProperty({}, optionKey, value) : value;
  // we normalize it to always be an array of objects depending on the useMultiple flag
  inputValue = withMultiple ? inputValue : [inputValue];
  var firstValueLabel = inputValue[0] ? inputValue[0][optionKey] || "" : "";

  // based on the typed text, the options are filtered using the useSearch hook
  // Fuse.js is used for fuzzy searching.
  // searchText is set to empty (show all results if a valid value is already selected)
  // searchKeys determines the array of keys withing the options to search
  var searchInKeys = searchKeys.length ? searchKeys : [optionKey];
  var searchText = text === firstValueLabel ? "" : text;
  var searchResults = useSearch(searchText, options, searchInKeys);

  // we need to normalize the options for display.
  // - It filters out the option that was selected
  // - Injects the zero state in case there are no options
  // - Injects the withCreate option in case creation is allowed
  var dropdownOptions = getOptions({
    options: withSearch || withMultiple ? searchResults : options,
    optionKey: optionKey,
    noOptionsText: noOptionsText,
    withCreate: withCreate,
    createPrefix: createPrefix,
    text: text,
    withCheckbox: withCheckbox,
    withMultiple: withMultiple,
    value: inputValue,
    themed: themed,
    size: size
  });
  var attachToElementHeight = attachTo && attachTo.current && attachTo.current.getBoundingClientRect().height;
  // To determine whether the dropdown options container opens above the dropdown
  // or below.
  // The 200 is the max height of the dropdown. (To account for some space for the dropdown to open)
  var isReversed = inputWrapperRef.current && inputWrapperRef.current.getBoundingClientRect().bottom + 200 > (attachToElementHeight || window.innerHeight);

  // on blurring we clear + blur the input
  var handleBlur = function handleBlur(e) {
    if (disabled) return;
    if (withMultiple && withCheckbox && isMouseOnOptions) {
      handleFocus(e);
      return;
    }
    setFocused(false);
    onBlur(e);
    if (inputRef.current) inputRef.current.blur();

    // increment the blur count
    blurCount.current += 1;
    var target = e.target;

    // clear search if search with useChecbox
    if (withCheckbox && withSearch && withMultiple) {
      setText("");
    }

    // If onClick event fire, we don't need to set value to old value
    // value of blurCount will be incresed to 2 in onMouseDown event
    // otherwise it will reset the text to the old value.
    if (text !== firstValueLabel && target && blurCount.current === 1) {
      var optionIndex = dropdownOptions.map(function (option) {
        return option.label;
      }).indexOf(text);
      if (withMultiple) setText("");else if (optionIndex > -1) onChange(dropdownOptions[optionIndex].value);else setText(firstValueLabel);
    }
  };
  var handleFocus = function handleFocus(e) {
    if (disabled) return;
    setFocused(true);
    onFocus(e);

    // blur count keeps track of how many times the blur event was called
    // this is to ensure that the when the user clicks on the option
    // we can ignore the duplicate blur event
    blurCount.current = 0;

    // sometimes the input isn't immediately available
    // only available on the next tick (hence the timeout is 0)
    setTimeout(function () {
      inputRef.current && inputRef.current.focus();
    }, 0);
    clearTimeout(timeoutRef.current);
  };

  // when user click on the option from dropdown, onMouseDown event will get fire
  // we can ignore the duplicate blur event
  var onMouseDown = function onMouseDown() {
    blurCount.current += 1;
  };
  var handleChange = function handleChange(e) {
    // if it's simple mode, then we return a string value
    onChange(isSimpleOptionsMode ? e[optionKey] : e);
    // we don't blur if multiple options can be selected
    // this is a UX decision.
    if (!withMultiple) {
      handleBlur(e);
    } else if (!withCheckbox) setText("");

    // if we allow creation and the new option selected
    // is a new option (does not exist in the options list)
    // then we set the temp option to store the new option so that it's there in the
    // dropdown
    if (withCreate && !dropdownOptions.map(function (option) {
      return option.label;
    }).includes(e[optionKey])) {
      setCreatedOption(e);
    }
  };
  var handleOptionClick = function handleOptionClick(e) {
    // based on if multiple selection is allowed
    // then we append the new option to the existing value array
    // otherwise we return the value as is

    var newValue;
    if (withCheckbox && withMultiple) {
      var isValueAlreadyPresent = inputValue.filter(function (value) {
        return value[optionKey] === e[optionKey];
      }).length;
      if (isValueAlreadyPresent) {
        newValue = inputValue.filter(function (value) {
          return value[optionKey] !== e[optionKey];
        });
      } else {
        newValue = [].concat(_toConsumableArray(inputValue), [e]);
      }
    } else if (withMultiple) {
      newValue = [].concat(_toConsumableArray(inputValue), [e]);
    } else {
      newValue = e;
    }
    handleChange(newValue);
  };
  var handleOnSearchFocus = function handleOnSearchFocus() {
    setIsSearchFocused(true);
  };
  var handleOnSearchBlur = function handleOnSearchBlur() {
    setIsSearchFocused(false);
  };
  var handleSearchText = function handleSearchText(text) {
    setText(text);
  };
  React.useEffect(function () {
    // we also support an array of strings instead of objects
    // we normalize it to objects with the default optionKey
    // [simple mode]
    var listOfOptionObjects = propOptions;
    if (isSimpleOptionsMode) {
      listOfOptionObjects = propOptions.map(function (option) {
        return _defineProperty({}, optionKey, option);
      });
    }

    // merged options contains the extra created option if available
    var mergedOptions = createdOption && withCreate ? [createdOption].concat(_toConsumableArray(listOfOptionObjects)) : listOfOptionObjects;
    setOptions(mergedOptions);
  }, [propOptions, propOptions.length, createdOption, isSimpleOptionsMode, optionKey, withCreate]);
  React.useEffect(function () {
    // we set the search text for single selection
    // items to the selected value. This is so that
    // the input text shows the selected value
    if (withMultiple) return;
    setText(firstValueLabel || "");
  }, [firstValueLabel, withMultiple]);
  var mouseEnter = function mouseEnter() {
    withCheckbox && withMultiple && setIsMouseOnOptions(true);
  };
  var mouseLeave = function mouseLeave() {
    withCheckbox && withMultiple && setIsMouseOnOptions(false);
  };
  var renderDropdown = function renderDropdown() {
    if (themed) {
      return /*#__PURE__*/React.createElement(DropdownWrapper, {
        "data-testid": "dropdown",
        tabIndex: "0",
        onFocus: handleFocus,
        onBlur: handleBlur,
        style: style
      }, /*#__PURE__*/React.createElement(Text, {
        variant: "h4.semi-bold",
        color: error && "red.haptik"
      }, label, " ", error && " (".concat(error, ")")), withMultiple && withCheckbox ? /*#__PURE__*/React.createElement(WithCheckboxInput, {
        innerRef: inputWrapperRef,
        value: inputValue,
        optionKey: optionKey,
        tooltip: arrowTooltip,
        disabled: disabled,
        focused: focused,
        isReversed: isReversed,
        icon: icon,
        size: size,
        themed: true
      }) : /*#__PURE__*/React.createElement(Input, {
        innerRef: inputWrapperRef,
        inputRef: inputRef,
        value: inputValue,
        text: text,
        onTextChange: setText,
        onChange: handleChange,
        isReversed: isReversed,
        focused: focused,
        tooltip: arrowTooltip,
        placeholder: placeholder,
        withSearch: withSearch,
        withMultiple: withMultiple,
        optionKey: optionKey,
        disabled: disabled,
        icon: icon,
        arrowIcon: arrowIcon,
        size: size,
        themed: true
      }), /*#__PURE__*/React.createElement(Options, {
        attachTo: inputWrapperRef,
        attachPortalTo: attachTo,
        inputRef: inputRef,
        focused: focused,
        options: dropdownOptions,
        onChange: handleOptionClick,
        onMouseDown: onMouseDown,
        handleOnSearchFocus: handleOnSearchFocus,
        handleOnSearchBlur: handleOnSearchBlur,
        handleSearchText: handleSearchText,
        isSearchFocused: isSearchFocused,
        isReversed: isReversed,
        onBlur: handleBlur,
        prefixClassName: prefixClassName,
        withSearch: withSearch,
        withMultiple: withMultiple,
        onMouseEnter: mouseEnter,
        onMouseLeave: mouseLeave,
        withCheckbox: withCheckbox,
        size: size,
        themed: true,
        noOptionsText: noOptionsText
      }));
    }
    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(styles.dropdown, " ").concat(prefixClassName, " ").concat(className),
      "data-testid": "dropdown",
      tabIndex: "0",
      onFocus: handleFocus,
      onBlur: handleBlur
    }, /*#__PURE__*/React.createElement(Label, {
      focused: focused,
      error: error,
      tooltip: tooltip,
      className: "".concat(styles.dropdownLabel, " ").concat(prefixClassName, "-label ").concat(prefixClassName, "-error")
    }, label), withMultiple && withCheckbox ? /*#__PURE__*/React.createElement(WithCheckboxInput, {
      innerRef: inputWrapperRef,
      value: inputValue,
      optionKey: optionKey,
      tooltip: arrowTooltip,
      disabled: disabled,
      focused: focused,
      isReversed: isReversed,
      prefixClassName: "".concat(prefixClassName, "-input")
    }) : /*#__PURE__*/React.createElement(Input, {
      innerRef: inputWrapperRef,
      inputRef: inputRef,
      value: inputValue,
      text: text,
      onTextChange: setText,
      onChange: handleChange,
      isReversed: isReversed,
      focused: focused,
      tooltip: arrowTooltip,
      placeholder: placeholder,
      withSearch: withSearch,
      withMultiple: withMultiple,
      optionKey: optionKey,
      disabled: disabled,
      prefixClassName: "".concat(prefixClassName, "-input")
    }), /*#__PURE__*/React.createElement(Options, {
      attachTo: inputWrapperRef,
      inputRef: inputRef,
      focused: focused,
      options: dropdownOptions,
      onChange: handleOptionClick,
      onMouseDown: onMouseDown,
      handleOnSearchFocus: handleOnSearchFocus,
      handleOnSearchBlur: handleOnSearchBlur,
      handleSearchText: handleSearchText,
      isSearchFocused: isSearchFocused,
      isReversed: isReversed,
      onBlur: handleBlur,
      prefixClassName: prefixClassName,
      withSearch: withSearch,
      withMultiple: withMultiple,
      onMouseEnter: mouseEnter,
      onMouseLeave: mouseLeave,
      withCheckbox: withCheckbox
    }));
  };
  return renderDropdown();
};
Dropdown.propTypes = {
  /** Placeholder Text for the Dropdown */
  placeholder: PropTypes.string,
  /** ClassName for the Dropdown element */
  className: PropTypes.string,
  /** Value of the Dropdown Input */
  value: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.arrayOf(PropTypes.shape({}))]),
  /** Label for the Dropdown */
  label: PropTypes.string,
  /** Text to be shown if there are no options */
  noOptionsText: PropTypes.string,
  /** Error for Dropdown */
  error: PropTypes.string,
  /** Key to sort for option */
  optionKey: PropTypes.string,
  /** onChange Callback */
  onChange: PropTypes.func,
  /** Options for The Dropdown */
  options: PropTypes.array,
  /** PrefixClassName for The Dropdown */
  prefixClassName: PropTypes.string,
  /** Text to prefix for Creating a new option */
  createPrefix: PropTypes.string,
  /** onFocus Callback */
  onFocus: PropTypes.func,
  /** onBlur Callback */
  onBlur: PropTypes.func,
  /** Dropdown with Search Enabled */
  withSearch: PropTypes.bool,
  /**  Dropdown with Creating new Options Enabled */
  withCreate: PropTypes.bool,
  /**  Dropdown with Multiple Inputs Enabled */
  withMultiple: PropTypes.bool,
  /**  Whether the input is disabled or not */
  disabled: PropTypes.bool,
  /** Tooltip any if required (gets attached to the label) */
  tooltip: PropTypes.string,
  /** tooltip any if required (gets attached to the arrow icon) */
  arrowTooltip: PropTypes.string,
  /**  Keys in the options to search for when using withSearch */
  searchKeys: PropTypes.arrayOf(PropTypes.string),
  /** Flag to use checkbox style of dropdown (NOTE: Can be only used withMultiple flag) */
  withCheckbox: PropTypes.bool,
  /** Whether the dropdown will be themed */
  themed: PropTypes.bool,
  /** prefix Icon */
  icon: PropTypes.node,
  /** arrow Icon */
  arrowIcon: PropTypes.node,
  /** attach to */
  attachTo: PropTypes.shape({
    current: PropTypes.node
  })
};
Dropdown.defaultProps = {
  className: "",
  prefixClassName: "",
  label: "",
  noOptionsText: "No options present",
  error: "",
  optionKey: "text",
  value: [],
  options: [],
  onChange: function onChange() {},
  placeholder: "",
  tooltip: "",
  arrowTooltip: "",
  createPrefix: "+ Create",
  searchKeys: [],
  onFocus: function onFocus() {},
  onBlur: function onBlur() {},
  disabled: false,
  withSearch: false,
  withCreate: false,
  withMultiple: false,
  withCheckbox: false,
  themed: false,
  icon: null,
  attachTo: null,
  arrowIcon: null
};
Dropdown.classNames = {
  $prefix: "Prefix ClassName",
  "$prefix-label": "Prefix ClassName applied to the Label",
  "$prefix-input": "Prefix ClassName applied to the input element",
  "$prefix-input-icon": 'Prefix ClassName applied to the "arrow down" icon',
  "$prefix-error": "Prefix ClassName applied in case of error",
  "$prefix-options": "Prefix ClassName applied to the options container",
  "$prefix-option": "Prefix ClassName applied to the individual option"
};
Dropdown.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Dropdown",
  "props": {
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "ClassName for the Dropdown element"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "PrefixClassName for The Dropdown"
    },
    "label": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Label for the Dropdown"
    },
    "noOptionsText": {
      "defaultValue": {
        "value": "\"No options present\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Text to be shown if there are no options"
    },
    "error": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Error for Dropdown"
    },
    "optionKey": {
      "defaultValue": {
        "value": "\"text\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Key to sort for option"
    },
    "value": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "type": {
        "name": "union",
        "value": [{
          "name": "shape",
          "value": {}
        }, {
          "name": "arrayOf",
          "value": {
            "name": "shape",
            "value": {}
          }
        }]
      },
      "required": false,
      "description": "Value of the Dropdown Input"
    },
    "options": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "type": {
        "name": "array"
      },
      "required": false,
      "description": "Options for The Dropdown"
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onChange Callback"
    },
    "placeholder": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Placeholder Text for the Dropdown"
    },
    "tooltip": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Tooltip any if required (gets attached to the label)"
    },
    "arrowTooltip": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "tooltip any if required (gets attached to the arrow icon)"
    },
    "createPrefix": {
      "defaultValue": {
        "value": "\"+ Create\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Text to prefix for Creating a new option"
    },
    "searchKeys": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "string"
        }
      },
      "required": false,
      "description": "Keys in the options to search for when using withSearch"
    },
    "onFocus": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onFocus Callback"
    },
    "onBlur": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onBlur Callback"
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Whether the input is disabled or not"
    },
    "withSearch": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Dropdown with Search Enabled"
    },
    "withCreate": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Dropdown with Creating new Options Enabled"
    },
    "withMultiple": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Dropdown with Multiple Inputs Enabled"
    },
    "withCheckbox": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Flag to use checkbox style of dropdown (NOTE: Can be only used withMultiple flag)"
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Whether the dropdown will be themed"
    },
    "icon": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "prefix Icon"
    },
    "attachTo": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "shape",
        "value": {
          "current": {
            "name": "node",
            "required": false
          }
        }
      },
      "required": false,
      "description": "attach to"
    },
    "arrowIcon": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "arrow Icon"
    }
  }
};

export default Dropdown;
