@wix/design-system 1.204.1 → 1.205.0

package/dist/cjs/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"names":["_defaultTo","_interopRequireDefault","require","_isEqual","_sortBy","_InputWithOptions","_DropdownSt","_propTypes","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","NO_SELECTED_ID","DROPDOWN_DOUBLE_CLICK_THRESHOLD","OPEN_KEYS","Dropdown","InputWithOptions","constructor","props","state","value","selectedId","getNextState","defaultTo","initialSelectedId","isSelectedIdControlled","isOptionsEqual","optionsA","optionsB","isEqual","sortBy","getSelectedId","shouldOpenDropdown","key","includes","_onOpenChange","open","reason","option","options","find","_option","id","valueParser","UNSAFE_componentWillReceiveProps","nextProps","setState","inputClasses","noBorder","allowTextSelection","st","classes","showPointer","dropdownAdditionalProps","tabIndex","withArrow","inputAdditionalProps","disableEditing","readOnly","role","ariaHaspopup","_onSelect","_onChange","event","target","propTypes","PropTypes","oneOfType","string","number","ariaControls","ariaDescribedby","ariaLabel","autoFocus","bool","border","oneOf","className","clearButton","closeOnSelect","dataHook","disabled","dropdownWidth","fixedFooter","node","fixedHeader","focusOnOption","focusOnSelectedOption","forceFocus","forceHover","hasMore","hideStatusSuffix","infiniteScroll","loadMore","func","markedOption","maxHeightPixels","menuArrow","minWidthPixels","name","native","noLeftBorderRadius","noRightBorderRadius","onBlur","onClear","onClose","onChange","onCompositionChange","onEnterPressed","onEscapePressed","onFocus","onInputClicked","onKeyDown","onKeyUp","onManuallyInput","onMouseEnter","onMouseLeave","onOptionMarked","onOptionsHide","onOptionsShow","onSelect","arrayOf","any","overflow","placeholder","popoverProps","shape","appendTo","maxWidth","minWidth","overlay","flip","fixed","transitionSettings","placement","dynamicWidth","prefix","showOptionsIfEmptyInput","size","status","statusMessage","suffix","textOverflow","tooltipPlacement","defaultProps","displayName","_default","exports"],"sources":["../../../src/Dropdown/Dropdown.js"],"sourcesContent":["import defaultTo from 'lodash/defaultTo';\nimport isEqual from 'lodash/isEqual';\nimport sortBy from 'lodash/sortBy';\nimport InputWithOptions from '../InputWithOptions';\nimport { st, classes } from './Dropdown.st.css';\nimport PropTypes from 'prop-types';\n\nconst NO_SELECTED_ID = null;\nconst DROPDOWN_DOUBLE_CLICK_THRESHOLD = 200;\nconst OPEN_KEYS = ['Enter', 'Spacebar', ' ', 'ArrowUp', 'ArrowDown'];\n\nclass Dropdown extends InputWithOptions {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      value: '',\n      selectedId: NO_SELECTED_ID,\n\n      ...Dropdown.getNextState(\n        props,\n        defaultTo(props.selectedId, props.initialSelectedId),\n      ),\n    };\n  }\n\n  isSelectedIdControlled() {\n    return typeof this.props.selectedId !== 'undefined';\n  }\n\n  static isOptionsEqual(optionsA, optionsB) {\n    return isEqual(sortBy(optionsA, 'id'), sortBy(optionsB, 'id'));\n  }\n\n  getSelectedId() {\n    return this.isSelectedIdControlled()\n      ? this.props.selectedId\n      : this.state.selectedId;\n  }\n\n  shouldOpenDropdown(key) {\n    return OPEN_KEYS.includes(key);\n  }\n\n  _onOpenChange(open, reason) {\n    super._onOpenChange(open, reason, DROPDOWN_DOUBLE_CLICK_THRESHOLD);\n  }\n\n  /**\n   * Updates the value by the selectedId.\n   * If selectedId is not found in options, then value is NOT changed.\n   */\n  static getNextState(props, selectedId) {\n    if (typeof selectedId !== 'undefined') {\n      const option = props.options.find(_option => {\n        return _option.id === selectedId;\n      });\n\n      if (option) {\n        const value = props.valueParser(option) || '';\n        return { value, selectedId };\n      }\n    }\n\n    return { value: '', selectedId: NO_SELECTED_ID };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (\n      nextProps.selectedId !== this.props.selectedId ||\n      !Dropdown.isOptionsEqual(this.props.options, nextProps.options)\n    ) {\n      this.setState(\n        Dropdown.getNextState(\n          nextProps,\n          nextProps.selectedId,\n          this.state.selectedId,\n        ),\n      );\n    }\n  }\n\n  inputClasses() {\n    const { noBorder, allowTextSelection } = this.props;\n    return st(classes.showPointer, { noBorder, allowTextSelection });\n  }\n\n  dropdownAdditionalProps() {\n    return {\n      selectedId: this.getSelectedId(),\n      value: this.state.value,\n      tabIndex: -1,\n      withArrow: false,\n    };\n  }\n\n  inputAdditionalProps() {\n    return {\n      disableEditing: true,\n      readOnly: this.props.readOnly,\n      value: this.state.value,\n      role: 'combobox',\n      ariaHaspopup: 'listbox',\n    };\n  }\n\n  _onSelect(option) {\n    if (!this.isSelectedIdControlled()) {\n      this.setState({\n        value: this.props.valueParser(option),\n        selectedId: option.id,\n      });\n    }\n    super._onSelect(option);\n  }\n\n  _onChange(event) {\n    this.setState({ value: event.target.value });\n    super._onChange(event);\n  }\n}\n\nDropdown.propTypes = {\n  /** An initial selected option id. (Implies Uncontrolled mode) */\n  initialSelectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Associate a control with the regions that it controls. */\n  ariaControls: PropTypes.string,\n\n  /** Associate a region with its descriptions. Similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space. */\n  ariaDescribedby: PropTypes.string,\n\n  /** Define a string that labels the current element in case where a text label is not visible on the screen. */\n  ariaLabel: PropTypes.string,\n\n  /** Focus the element on mount (standard React input autoFocus). */\n  autoFocus: PropTypes.bool,\n\n  /** Control the border style of input. */\n  border: PropTypes.oneOf(['standard', 'round', 'bottomLine', 'none']),\n\n  /** Specifies a CSS class name to be appended to the component’s root element.\n   * @internal\n   */\n\n  className: PropTypes.string,\n\n  /** Displays clear button (X) on a non-empty input. */\n  clearButton: PropTypes.bool,\n\n  /** Closes DropdownLayout when option is selected. */\n  closeOnSelect: PropTypes.bool,\n\n  /** Applies a data-hook HTML attribute that can be used in the tests. */\n  dataHook: PropTypes.string,\n\n  /** Specifies whether input should be disabled or not. */\n  disabled: PropTypes.bool,\n\n  /** Sets the width of the dropdown in pixels. */\n  dropdownWidth: PropTypes.string,\n\n  /** Adds a fixed footer container at the bottom of options list in `<DropdownLayout/>`. */\n  fixedFooter: PropTypes.node,\n\n  /** Adds a fixed header container at the top of options list in `<DropdownLayout/>`. */\n  fixedHeader: PropTypes.node,\n\n  /** Highlights and scrolls view to the specified option when dropdown layout is opened. It does not select the specified option. */\n  focusOnOption: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Scrolls view to the selected option when dropdown layout is opened. */\n  focusOnSelectedOption: PropTypes.bool,\n\n  /** USED FOR TESTING. Forces focus state on the input. */\n  forceFocus: PropTypes.bool,\n\n  /** USED FOR TESTING. Forces hover state on the input. */\n  forceHover: PropTypes.bool,\n\n  /** Specifies whether there are more items to be loaded. */\n  hasMore: PropTypes.bool,\n\n  /** Specifies whether status suffix should be hidden. */\n  hideStatusSuffix: PropTypes.bool,\n\n  /** Assigns an unique identifier for the root element. */\n  id: PropTypes.string,\n\n  /** Specifies whether lazy loading of the dropdown layout items is enabled. */\n  infiniteScroll: PropTypes.bool,\n\n  /** Defines a callback function which is called on a request to render more list items. */\n  loadMore: PropTypes.func,\n\n  /** Sets the default hover behavior:\n   *  - `false` - no initially hovered list item\n   *  - `true` - hover first selectable option\n   *  - any `number/string` specify the id of an option to be hovered\n   */\n  markedOption: PropTypes.oneOfType([\n    PropTypes.bool,\n    PropTypes.string,\n    PropTypes.number,\n  ]),\n\n  /** Sets the maximum height of the dropdownLayout in pixels. */\n  maxHeightPixels: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Specifies whether input should have a dropdown menu arrow on the right side. */\n  menuArrow: PropTypes.bool,\n\n  /** Sets the minimum width of dropdownLayout in pixels. */\n  minWidthPixels: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Reference element data when a form is submitted. */\n  name: PropTypes.string,\n\n  /** Render options list via native select element. */\n  native: PropTypes.bool,\n\n  /** Specifies whether input shouldn't have rounded corners on its left. */\n  noLeftBorderRadius: PropTypes.bool,\n\n  /** Controls whether a user can select a text of a selected value. */\n  allowTextSelection: PropTypes.bool,\n\n  /** Specifies whether input shouldn’t have rounded corners on its right. */\n  noRightBorderRadius: PropTypes.bool,\n\n  /** Defines a standard input onBlur callback */\n  onBlur: PropTypes.func,\n\n  /** Displays clear button (X) on a non-empty input and calls a callback function with no arguments. */\n  onClear: PropTypes.func,\n\n  /** Defines a callback function which is called whenever the user presses the escape key. */\n  onClose: PropTypes.func,\n\n  /** Defines a standard input onChange callback. */\n  onChange: PropTypes.func,\n\n  /** Defines a callback function called on compositionstart/compositionend events. */\n  onCompositionChange: PropTypes.func,\n\n  /** Defines a callback handler that is called when user presses -enter-. */\n  onEnterPressed: PropTypes.func,\n\n  /** Defines a callback handler that is called when user presses -escape- */\n  onEscapePressed: PropTypes.func,\n\n  /** Defines a standard input onFocus callback. */\n  onFocus: PropTypes.func,\n\n  /** Defines a standard input onClick callback. */\n  onInputClicked: PropTypes.func,\n\n  /** Defines a standard input onKeyDown callback. */\n  onKeyDown: PropTypes.func,\n\n  /** Defines a standard input onKeyUp callback. */\n  onKeyUp: PropTypes.func,\n\n  /** Defines a callback function which is called when user performs a submit action. Submit action triggers are:\n   * \"Enter\", \"Tab\", [typing any defined delimiters], paste action.\n   * `onManuallyInput(values: Array<string>): void - The array of strings is the result of splitting the input value by the given delimiters */\n  onManuallyInput: PropTypes.func,\n\n  /** Defines a callback function which is called whenever the user enters dropdown layout with the mouse cursor. */\n  onMouseEnter: PropTypes.func,\n\n  /** Defines a callback function which is called whenever the user exits from dropdown layout with a mouse cursor. */\n  onMouseLeave: PropTypes.func,\n\n  /** Defines a callback function which is called whenever an option becomes focused (hovered/active). Receives the relevant option object from the original props.options array. */\n  onOptionMarked: PropTypes.func,\n\n  /** Defines a callback function which is called when options dropdown is hidden. */\n  onOptionsHide: PropTypes.func,\n\n  /** Defines a callback function which is called when options dropdown is shown. */\n  onOptionsShow: PropTypes.func,\n\n  /** Defines a callback function which is called whenever user selects a different option in the list. */\n  onSelect: PropTypes.func,\n\n  /** Array of objects:\n   * - `id <string / number>` *required*: the id of the option, should be unique;\n   * - value `<function / string / node>` *required*: can be a string, react element or a builder function;\n   * - disabled `<bool>` *default value- false*: whether this option is disabled or not;\n   * - disabledDescription `<string>` tooltip description for a disabled item;\n   * - linkTo `<string>`: when provided the option will be an anchor to the given value;\n   * - title `<bool>`  *default value- false*  **deprecated**: please use `listItemSectionBuilder` for rendering a title;\n   * - overrideStyle `<bool>` *default value- false*  **deprecated**: please use `overrideOptionStyle` for override option styles;\n   * - overrideOptionStyle `<bool>` *default value- false* - when set to `true`, the option will be responsible to its own styles. No styles will be applied from the DropdownLayout itself;\n   * - label `<string>`: the string displayed within an input when the option is selected. This is used when using `<DropdownLayout/>` with an `<Input/>`.\n   */\n  options: PropTypes.arrayOf(PropTypes.any),\n\n  /** Handles container overflow. */\n  overflow: PropTypes.string,\n\n  /** Sets a placeholder message to display. */\n  placeholder: PropTypes.string,\n\n  /** Allows to pass all common popover props. */\n  popoverProps: PropTypes.shape({\n    appendTo: PropTypes.oneOf(['window', 'scrollParent', 'parent', 'viewport']),\n    maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    overlay: PropTypes.node,\n    flip: PropTypes.bool,\n    fixed: PropTypes.bool,\n    transitionSettings: PropTypes.any,\n    placement: PropTypes.oneOf([\n      'auto-start',\n      'auto',\n      'auto-end',\n      'top-start',\n      'top',\n      'top-end',\n      'right-start',\n      'right',\n      'right-end',\n      'bottom-end',\n      'bottom',\n      'bottom-start',\n      'left-end',\n      'left',\n      'left-start',\n    ]),\n    dynamicWidth: PropTypes.bool,\n  }),\n\n  /** Pass a component you want to show as the prefix of the input, e.g., text string, icon. */\n  prefix: PropTypes.node,\n\n  /** Specifies whether input is read only. */\n  readOnly: PropTypes.bool,\n\n  /** Specifies selected option by its id. */\n  selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Controls whether to show options if input is empty. */\n  showOptionsIfEmptyInput: PropTypes.bool,\n\n  /** Controls the size of the input */\n  size: PropTypes.oneOf(['small', 'medium', 'large']),\n\n  /** Specify the status of a field. */\n  status: PropTypes.oneOf(['error', 'warning', 'loading']),\n\n  /** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */\n  statusMessage: PropTypes.node,\n\n  /** Pass a component you want to show as the suffix of the input, e.g., text string, icon. */\n  suffix: PropTypes.node,\n\n  /** Indicates that element can be focused and where it participates in sequential keyboard navigation. */\n  tabIndex: PropTypes.number,\n\n  /** Handles text overflow behavior. It can either clip (default) or display ellipsis. */\n  textOverflow: PropTypes.string,\n\n  /** Controls placement of a status tooltip. */\n  tooltipPlacement: PropTypes.string,\n\n  /** Defines a callback function that is triggered when one of the dropdown options are selected. This property should be used together with builders. */\n  valueParser: PropTypes.func,\n};\n\nDropdown.defaultProps = {\n  allowTextSelection: true,\n  ...InputWithOptions.defaultProps,\n};\nDropdown.displayName = 'Dropdown';\n\nexport default Dropdown;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_defaultTo","_interopRequireDefault","require","_isEqual","_sortBy","_InputWithOptions","_DropdownSt","_propTypes","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","NO_SELECTED_ID","DROPDOWN_DOUBLE_CLICK_THRESHOLD","OPEN_KEYS","Dropdown","InputWithOptions","constructor","props","state","value","selectedId","getNextState","defaultTo","initialSelectedId","isSelectedIdControlled","isOptionsEqual","optionsA","optionsB","isEqual","sortBy","getSelectedId","shouldOpenDropdown","key","includes","_onOpenChange","open","reason","option","options","find","_option","id","valueParser","UNSAFE_componentWillReceiveProps","nextProps","setState","inputClasses","noBorder","allowTextSelection","st","classes","showPointer","dropdownAdditionalProps","tabIndex","withArrow","size","inputAdditionalProps","disableEditing","readOnly","role","ariaHaspopup","_onSelect","_onChange","event","target","propTypes","PropTypes","oneOfType","string","number","ariaControls","ariaDescribedby","ariaLabel","autoFocus","bool","border","oneOf","className","clearButton","closeOnSelect","dataHook","disabled","dropdownWidth","fixedFooter","node","fixedHeader","focusOnOption","focusOnSelectedOption","forceFocus","forceHover","hasMore","hideStatusSuffix","infiniteScroll","loadMore","func","markedOption","maxHeightPixels","menuArrow","minWidthPixels","name","native","noLeftBorderRadius","noRightBorderRadius","onBlur","onClear","onClose","onChange","onCompositionChange","onEnterPressed","onEscapePressed","onFocus","onInputClicked","onKeyDown","onKeyUp","onManuallyInput","onMouseEnter","onMouseLeave","onOptionMarked","onOptionsHide","onOptionsShow","onSelect","arrayOf","any","overflow","placeholder","popoverProps","shape","appendTo","maxWidth","minWidth","overlay","flip","fixed","transitionSettings","placement","dynamicWidth","prefix","showOptionsIfEmptyInput","status","statusMessage","suffix","textOverflow","tooltipPlacement","defaultProps","displayName","_default","exports"],"sources":["../../../src/Dropdown/Dropdown.js"],"sourcesContent":["import defaultTo from 'lodash/defaultTo';\nimport isEqual from 'lodash/isEqual';\nimport sortBy from 'lodash/sortBy';\nimport InputWithOptions from '../InputWithOptions';\nimport { st, classes } from './Dropdown.st.css';\nimport PropTypes from 'prop-types';\n\nconst NO_SELECTED_ID = null;\nconst DROPDOWN_DOUBLE_CLICK_THRESHOLD = 200;\nconst OPEN_KEYS = ['Enter', 'Spacebar', ' ', 'ArrowUp', 'ArrowDown'];\n\nclass Dropdown extends InputWithOptions {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      value: '',\n      selectedId: NO_SELECTED_ID,\n\n      ...Dropdown.getNextState(\n        props,\n        defaultTo(props.selectedId, props.initialSelectedId),\n      ),\n    };\n  }\n\n  isSelectedIdControlled() {\n    return typeof this.props.selectedId !== 'undefined';\n  }\n\n  static isOptionsEqual(optionsA, optionsB) {\n    return isEqual(sortBy(optionsA, 'id'), sortBy(optionsB, 'id'));\n  }\n\n  getSelectedId() {\n    return this.isSelectedIdControlled()\n      ? this.props.selectedId\n      : this.state.selectedId;\n  }\n\n  shouldOpenDropdown(key) {\n    return OPEN_KEYS.includes(key);\n  }\n\n  _onOpenChange(open, reason) {\n    super._onOpenChange(open, reason, DROPDOWN_DOUBLE_CLICK_THRESHOLD);\n  }\n\n  /**\n   * Updates the value by the selectedId.\n   * If selectedId is not found in options, then value is NOT changed.\n   */\n  static getNextState(props, selectedId) {\n    if (typeof selectedId !== 'undefined') {\n      const option = props.options.find(_option => {\n        return _option.id === selectedId;\n      });\n\n      if (option) {\n        const value = props.valueParser(option) || '';\n        return { value, selectedId };\n      }\n    }\n\n    return { value: '', selectedId: NO_SELECTED_ID };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (\n      nextProps.selectedId !== this.props.selectedId ||\n      !Dropdown.isOptionsEqual(this.props.options, nextProps.options)\n    ) {\n      this.setState(\n        Dropdown.getNextState(\n          nextProps,\n          nextProps.selectedId,\n          this.state.selectedId,\n        ),\n      );\n    }\n  }\n\n  inputClasses() {\n    const { noBorder, allowTextSelection } = this.props;\n    return st(classes.showPointer, { noBorder, allowTextSelection });\n  }\n\n  dropdownAdditionalProps() {\n    return {\n      selectedId: this.getSelectedId(),\n      value: this.state.value,\n      tabIndex: -1,\n      withArrow: false,\n      size: ['tiny', 'small'].includes(this.props.size) ? 'small' : 'medium',\n    };\n  }\n\n  inputAdditionalProps() {\n    return {\n      disableEditing: true,\n      readOnly: this.props.readOnly,\n      value: this.state.value,\n      role: 'combobox',\n      ariaHaspopup: 'listbox',\n    };\n  }\n\n  _onSelect(option) {\n    if (!this.isSelectedIdControlled()) {\n      this.setState({\n        value: this.props.valueParser(option),\n        selectedId: option.id,\n      });\n    }\n    super._onSelect(option);\n  }\n\n  _onChange(event) {\n    this.setState({ value: event.target.value });\n    super._onChange(event);\n  }\n}\n\nDropdown.propTypes = {\n  /** An initial selected option id. (Implies Uncontrolled mode) */\n  initialSelectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Associate a control with the regions that it controls. */\n  ariaControls: PropTypes.string,\n\n  /** Associate a region with its descriptions. Similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space. */\n  ariaDescribedby: PropTypes.string,\n\n  /** Define a string that labels the current element in case where a text label is not visible on the screen. */\n  ariaLabel: PropTypes.string,\n\n  /** Focus the element on mount (standard React input autoFocus). */\n  autoFocus: PropTypes.bool,\n\n  /** Control the border style of input. */\n  border: PropTypes.oneOf(['standard', 'round', 'bottomLine', 'none']),\n\n  /** Specifies a CSS class name to be appended to the component’s root element.\n   * @internal\n   */\n\n  className: PropTypes.string,\n\n  /** Displays clear button (X) on a non-empty input. */\n  clearButton: PropTypes.bool,\n\n  /** Closes DropdownLayout when option is selected. */\n  closeOnSelect: PropTypes.bool,\n\n  /** Applies a data-hook HTML attribute that can be used in the tests. */\n  dataHook: PropTypes.string,\n\n  /** Specifies whether input should be disabled or not. */\n  disabled: PropTypes.bool,\n\n  /** Sets the width of the dropdown in pixels. */\n  dropdownWidth: PropTypes.string,\n\n  /** Adds a fixed footer container at the bottom of options list in `<DropdownLayout/>`. */\n  fixedFooter: PropTypes.node,\n\n  /** Adds a fixed header container at the top of options list in `<DropdownLayout/>`. */\n  fixedHeader: PropTypes.node,\n\n  /** Highlights and scrolls view to the specified option when dropdown layout is opened. It does not select the specified option. */\n  focusOnOption: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Scrolls view to the selected option when dropdown layout is opened. */\n  focusOnSelectedOption: PropTypes.bool,\n\n  /** USED FOR TESTING. Forces focus state on the input. */\n  forceFocus: PropTypes.bool,\n\n  /** USED FOR TESTING. Forces hover state on the input. */\n  forceHover: PropTypes.bool,\n\n  /** Specifies whether there are more items to be loaded. */\n  hasMore: PropTypes.bool,\n\n  /** Specifies whether status suffix should be hidden. */\n  hideStatusSuffix: PropTypes.bool,\n\n  /** Assigns an unique identifier for the root element. */\n  id: PropTypes.string,\n\n  /** Specifies whether lazy loading of the dropdown layout items is enabled. */\n  infiniteScroll: PropTypes.bool,\n\n  /** Defines a callback function which is called on a request to render more list items. */\n  loadMore: PropTypes.func,\n\n  /** Sets the default hover behavior:\n   *  - `false` - no initially hovered list item\n   *  - `true` - hover first selectable option\n   *  - any `number/string` specify the id of an option to be hovered\n   */\n  markedOption: PropTypes.oneOfType([\n    PropTypes.bool,\n    PropTypes.string,\n    PropTypes.number,\n  ]),\n\n  /** Sets the maximum height of the dropdownLayout in pixels. */\n  maxHeightPixels: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Specifies whether input should have a dropdown menu arrow on the right side. */\n  menuArrow: PropTypes.bool,\n\n  /** Sets the minimum width of dropdownLayout in pixels. */\n  minWidthPixels: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Reference element data when a form is submitted. */\n  name: PropTypes.string,\n\n  /** Render options list via native select element. */\n  native: PropTypes.bool,\n\n  /** Specifies whether input shouldn't have rounded corners on its left. */\n  noLeftBorderRadius: PropTypes.bool,\n\n  /** Controls whether a user can select a text of a selected value. */\n  allowTextSelection: PropTypes.bool,\n\n  /** Specifies whether input shouldn’t have rounded corners on its right. */\n  noRightBorderRadius: PropTypes.bool,\n\n  /** Defines a standard input onBlur callback */\n  onBlur: PropTypes.func,\n\n  /** Displays clear button (X) on a non-empty input and calls a callback function with no arguments. */\n  onClear: PropTypes.func,\n\n  /** Defines a callback function which is called whenever the user presses the escape key. */\n  onClose: PropTypes.func,\n\n  /** Defines a standard input onChange callback. */\n  onChange: PropTypes.func,\n\n  /** Defines a callback function called on compositionstart/compositionend events. */\n  onCompositionChange: PropTypes.func,\n\n  /** Defines a callback handler that is called when user presses -enter-. */\n  onEnterPressed: PropTypes.func,\n\n  /** Defines a callback handler that is called when user presses -escape- */\n  onEscapePressed: PropTypes.func,\n\n  /** Defines a standard input onFocus callback. */\n  onFocus: PropTypes.func,\n\n  /** Defines a standard input onClick callback. */\n  onInputClicked: PropTypes.func,\n\n  /** Defines a standard input onKeyDown callback. */\n  onKeyDown: PropTypes.func,\n\n  /** Defines a standard input onKeyUp callback. */\n  onKeyUp: PropTypes.func,\n\n  /** Defines a callback function which is called when user performs a submit action. Submit action triggers are:\n   * \"Enter\", \"Tab\", [typing any defined delimiters], paste action.\n   * `onManuallyInput(values: Array<string>): void - The array of strings is the result of splitting the input value by the given delimiters */\n  onManuallyInput: PropTypes.func,\n\n  /** Defines a callback function which is called whenever the user enters dropdown layout with the mouse cursor. */\n  onMouseEnter: PropTypes.func,\n\n  /** Defines a callback function which is called whenever the user exits from dropdown layout with a mouse cursor. */\n  onMouseLeave: PropTypes.func,\n\n  /** Defines a callback function which is called whenever an option becomes focused (hovered/active). Receives the relevant option object from the original props.options array. */\n  onOptionMarked: PropTypes.func,\n\n  /** Defines a callback function which is called when options dropdown is hidden. */\n  onOptionsHide: PropTypes.func,\n\n  /** Defines a callback function which is called when options dropdown is shown. */\n  onOptionsShow: PropTypes.func,\n\n  /** Defines a callback function which is called whenever user selects a different option in the list. */\n  onSelect: PropTypes.func,\n\n  /** Array of objects:\n   * - `id <string / number>` *required*: the id of the option, should be unique;\n   * - value `<function / string / node>` *required*: can be a string, react element or a builder function;\n   * - disabled `<bool>` *default value- false*: whether this option is disabled or not;\n   * - disabledDescription `<string>` tooltip description for a disabled item;\n   * - linkTo `<string>`: when provided the option will be an anchor to the given value;\n   * - title `<bool>`  *default value- false*  **deprecated**: please use `listItemSectionBuilder` for rendering a title;\n   * - overrideStyle `<bool>` *default value- false*  **deprecated**: please use `overrideOptionStyle` for override option styles;\n   * - overrideOptionStyle `<bool>` *default value- false* - when set to `true`, the option will be responsible to its own styles. No styles will be applied from the DropdownLayout itself;\n   * - label `<string>`: the string displayed within an input when the option is selected. This is used when using `<DropdownLayout/>` with an `<Input/>`.\n   */\n  options: PropTypes.arrayOf(PropTypes.any),\n\n  /** Handles container overflow. */\n  overflow: PropTypes.string,\n\n  /** Sets a placeholder message to display. */\n  placeholder: PropTypes.string,\n\n  /** Allows to pass all common popover props. */\n  popoverProps: PropTypes.shape({\n    appendTo: PropTypes.oneOf(['window', 'scrollParent', 'parent', 'viewport']),\n    maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    overlay: PropTypes.node,\n    flip: PropTypes.bool,\n    fixed: PropTypes.bool,\n    transitionSettings: PropTypes.any,\n    placement: PropTypes.oneOf([\n      'auto-start',\n      'auto',\n      'auto-end',\n      'top-start',\n      'top',\n      'top-end',\n      'right-start',\n      'right',\n      'right-end',\n      'bottom-end',\n      'bottom',\n      'bottom-start',\n      'left-end',\n      'left',\n      'left-start',\n    ]),\n    dynamicWidth: PropTypes.bool,\n  }),\n\n  /** Pass a component you want to show as the prefix of the input, e.g., text string, icon. */\n  prefix: PropTypes.node,\n\n  /** Specifies whether input is read only. */\n  readOnly: PropTypes.bool,\n\n  /** Specifies selected option by its id. */\n  selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /** Controls whether to show options if input is empty. */\n  showOptionsIfEmptyInput: PropTypes.bool,\n\n  /** Controls the size of the input */\n  size: PropTypes.oneOf(['small', 'medium', 'large']),\n\n  /** Specify the status of a field. */\n  status: PropTypes.oneOf(['error', 'warning', 'loading']),\n\n  /** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */\n  statusMessage: PropTypes.node,\n\n  /** Pass a component you want to show as the suffix of the input, e.g., text string, icon. */\n  suffix: PropTypes.node,\n\n  /** Indicates that element can be focused and where it participates in sequential keyboard navigation. */\n  tabIndex: PropTypes.number,\n\n  /** Handles text overflow behavior. It can either clip (default) or display ellipsis. */\n  textOverflow: PropTypes.string,\n\n  /** Controls placement of a status tooltip. */\n  tooltipPlacement: PropTypes.string,\n\n  /** Defines a callback function that is triggered when one of the dropdown options are selected. This property should be used together with builders. */\n  valueParser: PropTypes.func,\n};\n\nDropdown.defaultProps = {\n  allowTextSelection: true,\n  ...InputWithOptions.defaultProps,\n};\nDropdown.displayName = 'Dropdown';\n\nexport default Dropdown;\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/Dropdown/Dropdown.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_204_1_Dropdown";
+var _namespace_ = "wds_1_205_0_Dropdown";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_204_1_Dropdown__root","input":"wds_1_204_1_Input__input","showPointer":"wds_1_204_1_Dropdown__showPointer"};
+module.exports.classes = {"root":"wds_1_205_0_Dropdown__root","input":"wds_1_205_0_Input__input","showPointer":"wds_1_205_0_Dropdown__showPointer"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/DropdownBase/DropdownBase.st.css.js

@@ -7,7 +7,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_204_1_DropdownBase";
+var _namespace_ = "wds_1_205_0_DropdownBase";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -15,7 +15,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_204_1_DropdownBase__root","list":"wds_1_204_1_DropdownBase__list"};
+module.exports.classes = {"root":"wds_1_205_0_DropdownBase__root","list":"wds_1_205_0_DropdownBase__list"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/DropdownLayout/DropdownLayout.js

@@ -113,12 +113,27 @@ class DropdownLayout extends _react.PureComponent {
       });
     };
     this._onMouseEnter = index => {
-      var options = this.props.options || [];
+      var {
+        options = []
+      } = this.props;
       if (this._isSelectableOption(options[index])) {
+        var _this$props$onOptions, _this$props;
+        var markedOption = options[index];
+        (_this$props$onOptions = (_this$props = this.props).onOptionsNavigate) == null || _this$props$onOptions.call(_this$props, markedOption);
         this._markOption(index);
       }
     };
-    this._onMouseLeave = () => this._markOption(_DropdownLayout2.NOT_HOVERED_INDEX);
+    this._onMouseLeave = () => {
+      this._markOption(_DropdownLayout2.NOT_HOVERED_INDEX);
+    };
+    this._onContainerMouseLeave = e => {
+      var _this$props$onOptions2, _this$props2;
+      (_this$props$onOptions2 = (_this$props2 = this.props).onOptionsNavigate) == null || _this$props$onOptions2.call(_this$props2, null);
+      this._markOption(_DropdownLayout2.NOT_HOVERED_INDEX);
+      if (this.props.onMouseLeave) {
+        this.props.onMouseLeave(e);
+      }
+    };
     this._focusOnOption = () => {
       var {
         focusOnOption
@@ -265,6 +280,8 @@ class DropdownLayout extends _react.PureComponent {
       event.stopPropagation();
     };
     this._onClose = () => {
+      var _this$props$onOptions3, _this$props3;
+      (_this$props$onOptions3 = (_this$props3 = this.props).onOptionsNavigate) == null || _this$props$onOptions3.call(_this$props3, null);
       this._markOption(_DropdownLayout2.NOT_HOVERED_INDEX);
       if (this.props.onClose) {
         this.props.onClose();
@@ -286,7 +303,7 @@ class DropdownLayout extends _react.PureComponent {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 734,
+            lineNumber: 752,
             columnNumber: 11
           }
         }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
@@ -295,14 +312,14 @@ class DropdownLayout extends _react.PureComponent {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 735,
+            lineNumber: 753,
             columnNumber: 13
           }
         })),
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 726,
+          lineNumber: 744,
           columnNumber: 7
         }
       }, scrollableElement);
@@ -455,7 +472,7 @@ class DropdownLayout extends _react.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 284,
+        lineNumber: 285,
         columnNumber: 7
       }
     }) : null;
@@ -497,6 +514,9 @@ class DropdownLayout extends _react.PureComponent {
         title
       } = option,
       rest = (0, _objectWithoutProperties2.default)(option, _excluded);
+    var {
+      size
+    } = this.props;
     return (0, _ListItemAction.listItemActionBuilder)(_objectSpread({
       id: id !== undefined ? id : idx,
       ref: _ref6 => this.children[id] = _ref6,
@@ -504,7 +524,8 @@ class DropdownLayout extends _react.PureComponent {
       disabled,
       disabledDescription,
       title: optionTitle,
-      role: 'menuitem'
+      role: 'menuitem',
+      size
     }, rest));
   }
   _isControlled() {
@@ -559,7 +580,10 @@ class DropdownLayout extends _react.PureComponent {
     return markedIndex === _DropdownLayout2.NOT_HOVERED_INDEX ? undefined : this._getOptionElementId(markedIndex);
   }
   _markNextStep(step) {
-    var options = this.props.options || [];
+    var {
+      onOptionsNavigate,
+      options = []
+    } = this.props;
     if (!options.some(this._isSelectableOption)) {
       return;
     }
@@ -567,6 +591,8 @@ class DropdownLayout extends _react.PureComponent {
     do {
       markedIndex = modulus(Math.max(markedIndex + step, -1), options.length);
     } while (!this._isSelectableOption(options[markedIndex]));
+    var markedOption = options[markedIndex];
+    onOptionsNavigate == null || onOptionsNavigate(markedOption);
     this._markOptionAtIndex(markedIndex);
   }
   _scrollToOption() {
@@ -587,7 +613,7 @@ class DropdownLayout extends _react.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 717,
+        lineNumber: 735,
         columnNumber: 19
       }
     }, node) : null;
@@ -616,7 +642,7 @@ class DropdownLayout extends _react.PureComponent {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 784,
+            lineNumber: 802,
             columnNumber: 11
           }
         }, _value)
@@ -634,7 +660,7 @@ class DropdownLayout extends _react.PureComponent {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 798,
+            lineNumber: 816,
             columnNumber: 11
           }
         }, _value)
@@ -659,7 +685,8 @@ class DropdownLayout extends _react.PureComponent {
     } = this.state;
     var {
       itemHeight,
-      selectedHighlight
+      selectedHighlight,
+      size
     } = this.props;
     return (0, _ListItemSelect.listItemSelectBuilder)({
       id,
@@ -668,12 +695,13 @@ class DropdownLayout extends _react.PureComponent {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 821,
+          lineNumber: 838,
           columnNumber: 9
         }
       }, value),
       disabled,
       disabledDescription,
+      size,
       selected: id === selectedId && selectedHighlight,
       className: (0, _DropdownLayoutSt.st)(_DropdownLayoutSt.classes.selectableOption, {
         itemHeight
@@ -756,7 +784,7 @@ class DropdownLayout extends _react.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 902,
+        lineNumber: 920,
         columnNumber: 7
       }
     }, content) : content;
@@ -822,7 +850,7 @@ class DropdownLayout extends _react.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 988,
+        lineNumber: 1006,
         columnNumber: 7
       }
     }), option == null ? void 0 : option.value(optionState));
@@ -856,7 +884,6 @@ class DropdownLayout extends _react.PureComponent {
       dropDirectionUp,
       tabIndex,
       onMouseEnter,
-      onMouseLeave,
       onMouseDown,
       fixedHeader,
       withArrow,
@@ -890,7 +917,7 @@ class DropdownLayout extends _react.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1120,
+        lineNumber: 1137,
         columnNumber: 9
       }
     }), /*#__PURE__*/_react.default.createElement(OverlayScrollbarContentElement, {
@@ -899,7 +926,7 @@ class DropdownLayout extends _react.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1124,
+        lineNumber: 1141,
         columnNumber: 11
       }
     }, options)) : /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
@@ -909,7 +936,7 @@ class DropdownLayout extends _react.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1135,
+        lineNumber: 1152,
         columnNumber: 9
       }
     }), options);
@@ -925,13 +952,13 @@ class DropdownLayout extends _react.PureComponent {
       tabIndex: tabIndex,
       onKeyDown: this._onSelectListKeyDown,
       onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
+      onMouseLeave: this._onContainerMouseLeave,
       onMouseDown: onMouseDown,
       ref: this.containerRef,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1145,
+        lineNumber: 1162,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, this._getDataAttributes(), {
@@ -944,7 +971,7 @@ class DropdownLayout extends _react.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1167,
+        lineNumber: 1184,
         columnNumber: 9
       }
     }), this._renderNode(fixedHeader), optionsContainer, this._renderNode(fixedFooter)), this._renderTopArrow());
@@ -958,6 +985,7 @@ DropdownLayout.propTypes = {
   onClose: _propTypes.default.any,
   onSelect: _propTypes.default.any,
   onOptionMarked: _propTypes.default.any,
+  onOptionsNavigate: _propTypes.default.any,
   overflow: _propTypes.default.any,
   visible: _propTypes.default.any,
   options: _propTypes.default.any,