primereact 10.5.0 → 10.5.2

package/dropdown/dropdown.d.ts

@@ -93,10 +93,26 @@ export interface DropdownPassThroughOptions {
      * Uses to pass attributes to the item group's DOM element.
      */
     itemGroup?: DropdownPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Used to pass attributes to the item group label's DOM element.
+     */
+    itemGroupLabel?: DropdownPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Uses to pass attributes to the item's DOM element.
      */
     item?: DropdownPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Used to pass attributes to the item label's DOM element.
+     */
+    itemLabel?: DropdownPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to pass attributes to the check icon's DOM element.
+     */
+    checkIcon?: DropdownPassThroughType<React.HTMLAttributes<SVGSVGElement>>;
+    /**
+     * Used to pass attributes to the bank icon's DOM element.
+     */
+    blankIcon?: DropdownPassThroughType<React.HTMLAttributes<SVGSVGElement>>;
     /**
      * Uses to pass attributes to the empty message's DOM element.
      */
@@ -246,6 +262,11 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
      * A property to uniquely match the value in options for better performance.
      */
     dataKey?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false
@@ -260,6 +281,16 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
      * @defaultValue false
      */
     editable?: boolean | undefined;
+    /**
+     *  Whether the selected option will be add highlight class.
+     *  @defaultValue true
+     */
+    highlightOnSelect?: boolean | undefined;
+    /**
+     *  Whether the selected option will be shown with a check mark.
+     *  @defaultValue false
+     */
+    checkmark?: boolean | undefined;
     /**
      * Template to display when filtering does not return any results.
      * @defaultValue No available options
@@ -319,6 +350,16 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
      * Unique identifier of the element.
      */
     id?: string | undefined;
+    /**
+     * When enabled, the focused tab is activated.
+     * @defaultValue false
+     */
+    selectOnFocus?: false;
+    /**
+     * Whether to focus on the first visible or selected element.
+     * @defaultValue false
+     */
+    autoOptionFocus?: false;
     /**
      * Identifier of the focusable input.
      */

package/dropdown/dropdown.esm.js

@@ -14,6 +14,8 @@ import { SearchIcon } from 'primereact/icons/search';
 import { Portal } from 'primereact/portal';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { Ripple } from 'primereact/ripple';
+import { CheckIcon } from 'primereact/icons/check';
+import { IconBase } from 'primereact/iconbase';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -133,6 +135,7 @@ var classes = {
       overlayVisibleState = _ref.overlayVisibleState;
     return classNames('p-dropdown p-component p-inputwrapper', {
       'p-disabled': props.disabled,
+      'p-invalid': props.invalid,
       'p-focus': focusedState,
       'p-dropdown-clearable': props.showClear && !props.disabled,
       'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
@@ -155,6 +158,7 @@ var classes = {
       'p-dropdown-item-empty': !optionGroupLabel || optionGroupLabel.length === 0
     });
   },
+  itemGroupLabel: 'p-dropdown-item-group-label',
   dropdownIcon: 'p-dropdown-trigger-icon p-clickable',
   loadingIcon: 'p-dropdown-trigger-icon p-clickable',
   clearIcon: 'p-dropdown-clear-icon p-clickable',
@@ -183,14 +187,18 @@ var classes = {
       disabled = _ref7.disabled,
       label = _ref7.label,
       index = _ref7.index,
-      focusedOptionIndex = _ref7.focusedOptionIndex;
+      focusedOptionIndex = _ref7.focusedOptionIndex,
+      highlightOnSelect = _ref7.highlightOnSelect;
     return classNames('p-dropdown-item', {
-      'p-highlight': selected,
+      'p-highlight': selected && highlightOnSelect,
       'p-disabled': disabled,
       'p-focus': index === focusedOptionIndex,
       'p-dropdown-item-empty': !label || label.length === 0
     });
   },
+  itemLabel: 'p-dropdown-item-label',
+  checkIcon: 'p-dropdown-check-icon',
+  blankIcon: 'p-dropdown-blank-icon',
   wrapper: 'p-dropdown-items-wrapper',
   header: 'p-dropdown-header',
   footer: 'p-dropdown-footer',
@@ -225,6 +233,8 @@ var DropdownBase = ComponentBase.extend({
     dropdownIcon: null,
     editable: false,
     emptyFilterMessage: null,
+    highlightOnSelect: true,
+    checkmark: false,
     emptyMessage: null,
     filter: false,
     filterBy: null,
@@ -239,6 +249,7 @@ var DropdownBase = ComponentBase.extend({
     id: null,
     inputId: null,
     inputRef: null,
+    invalid: false,
     itemTemplate: null,
     loading: false,
     loadingIcon: null,
@@ -287,6 +298,24 @@ var DropdownBase = ComponentBase.extend({
   }
 });
 
+var BlankIcon = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
+  var pti = IconBase.getPTI(inProps);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    ref: ref,
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, pti), /*#__PURE__*/React.createElement("rect", {
+    width: "1",
+    height: "1",
+    fill: "currentColor",
+    fillOpacity: "0"
+  }));
+}));
+BlankIcon.displayName = 'BlankIcon';
+
 var DropdownItem = /*#__PURE__*/React.memo(function (props) {
   var mergeProps = useMergeProps();
   var ptm = props.ptm,
@@ -296,7 +325,9 @@ var DropdownItem = /*#__PURE__*/React.memo(function (props) {
     option = props.option,
     label = props.label,
     index = props.index,
-    focusedOptionIndex = props.focusedOptionIndex;
+    focusedOptionIndex = props.focusedOptionIndex,
+    checkmark = props.checkmark,
+    highlightOnSelect = props.highlightOnSelect;
   var getPTOptions = function getPTOptions(key) {
     return ptm(key, {
       context: {
@@ -322,7 +353,8 @@ var DropdownItem = /*#__PURE__*/React.memo(function (props) {
       disabled: disabled,
       label: label,
       index: index,
-      focusedOptionIndex: focusedOptionIndex
+      focusedOptionIndex: focusedOptionIndex,
+      highlightOnSelect: highlightOnSelect
     })),
     style: props.style,
     onClick: function onClick(e) {
@@ -334,7 +366,23 @@ var DropdownItem = /*#__PURE__*/React.memo(function (props) {
     'data-p-focused': focusedOptionIndex === index,
     'data-p-disabled': disabled
   }, getPTOptions('item'));
-  return /*#__PURE__*/React.createElement("li", itemProps, content, /*#__PURE__*/React.createElement(Ripple, null));
+  var itemGroupLabelProps = mergeProps({
+    className: cx('itemLabel')
+  }, getPTOptions('itemLabel'));
+  var iconRenderer = function iconRenderer() {
+    if (selected) {
+      var checkIconProps = mergeProps({
+        className: cx('checkIcon')
+      }, getPTOptions('checIcon'));
+      return /*#__PURE__*/React.createElement(CheckIcon, checkIconProps);
+    } else {
+      var blankIconProps = mergeProps({
+        className: cx('blankIcon')
+      }, getPTOptions('blankIcon'));
+      return /*#__PURE__*/React.createElement(BlankIcon, blankIconProps);
+    }
+  };
+  return /*#__PURE__*/React.createElement("li", itemProps, checkmark && iconRenderer(), /*#__PURE__*/React.createElement("span", itemGroupLabelProps, content), /*#__PURE__*/React.createElement(Ripple, null));
 });
 DropdownItem.displayName = 'DropdownItem';
 
@@ -410,10 +458,12 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
         style: style,
         template: props.itemTemplate,
         selected: props.isSelected(option),
+        highlightOnSelect: props.highlightOnSelect,
         disabled: disabled,
         onClick: props.onOptionClick,
         ptm: ptm,
-        cx: cx
+        cx: cx,
+        checkmark: props.checkmark
       });
     });
   };
@@ -442,9 +492,12 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
         style: style,
         'data-p-highlight': props.selected
       }, getPTOptions('itemGroup'));
+      var itemGroupLabelProps = mergeProps({
+        className: cx('itemGroupLabel')
+      }, getPTOptions('itemGroupLabel'));
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: key
-      }, /*#__PURE__*/React.createElement("li", itemGroupProps, groupContent), groupChildrenContent);
+      }, /*#__PURE__*/React.createElement("li", itemGroupProps, /*#__PURE__*/React.createElement("span", itemGroupLabelProps, groupContent)), groupChildrenContent);
     } else {
       var optionLabel = props.getOptionLabel(option);
       var optionKey = index + '_' + props.getOptionRenderKey(option);
@@ -458,10 +511,12 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
         style: style,
         template: props.itemTemplate,
         selected: props.isSelected(option),
+        highlightOnSelect: props.highlightOnSelect,
         disabled: disabled,
         onClick: props.onOptionClick,
         ptm: ptm,
-        cx: cx
+        cx: cx,
+        checkmark: props.checkmark
       });
     }
   };
@@ -621,7 +676,7 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
       nodeRef: ref
     }, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
       ref: ref
-    }, panelProps), filter, content, footer));
+    }, panelProps), props.firstFocusableElement, filter, content, footer, props.lastFocusableElement));
   };
   var element = createElement();
   return /*#__PURE__*/React.createElement(Portal, {
@@ -646,20 +701,17 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     setFilterState = _React$useState2[1];
   var _React$useState3 = React.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    clicked = _React$useState4[0],
-    setClicked = _React$useState4[1];
-  var _React$useState5 = React.useState(false),
+    focusedState = _React$useState4[0],
+    setFocusedState = _React$useState4[1];
+  var _React$useState5 = React.useState(-1),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    focusedState = _React$useState6[0],
-    setFocusedState = _React$useState6[1];
-  var _React$useState7 = React.useState(null),
+    focusedOptionIndex = _React$useState6[0],
+    setFocusedOptionIndex = _React$useState6[1];
+  var _React$useState7 = React.useState(false),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
-    focusedOptionIndex = _React$useState8[0],
-    setFocusedOptionIndex = _React$useState8[1];
-  var _React$useState9 = React.useState(false),
-    _React$useState10 = _slicedToArray(_React$useState9, 2),
-    overlayVisibleState = _React$useState10[0],
-    setOverlayVisibleState = _React$useState10[1];
+    overlayVisibleState = _React$useState8[0],
+    setOverlayVisibleState = _React$useState8[1];
+  var clickedRef = React.useRef(false);
   var elementRef = React.useRef(null);
   var overlayRef = React.useRef(null);
   var firstHiddenFocusableElementOnOverlay = React.useRef(null);
@@ -760,7 +812,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       DomHandler.focus(focusInputRef.current);
       overlayVisibleState ? hide() : show();
     }
-    setClicked(true);
+    clickedRef.current = true;
   };
   var onInputFocus = function onInputFocus(event) {
     if (props.showOnFocus && !overlayVisibleState) {
@@ -858,12 +910,12 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         break;
       default:
         if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
-          !overlayVisibleState && show();
+          !overlayVisibleState && !props.editable && show();
           !props.editable && searchOptions(event, event.key);
         }
         break;
     }
-    setClicked(false);
+    clickedRef.current = false;
   };
   var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
     switch (event.code) {
@@ -984,7 +1036,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       show();
       props.editable && changeFocusedOptionIndex(event, findSelectedOptionIndex());
     } else {
-      var optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : clicked ? findFirstOptionIndex() : findFirstFocusedOptionIndex();
+      var optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : clickedRef.current ? findFirstOptionIndex() : findFirstFocusedOptionIndex();
       changeFocusedOptionIndex(event, optionIndex);
     }
     event.preventDefault();
@@ -998,7 +1050,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       state.overlayVisible && hide();
       event.preventDefault();
     } else {
-      var optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : clicked ? findLastOptionIndex() : findLastFocusedOptionIndex();
+      var optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : clickedRef.current ? findLastOptionIndex() : findLastFocusedOptionIndex();
       changeFocusedOptionIndex(event, optionIndex);
       !overlayVisibleState && show();
       event.preventDefault();
@@ -1061,8 +1113,8 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var onTabKey = function onTabKey(event) {
     var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     if (!pressedInInputText) {
-      if (overlayVisibleState && hasFocusableElements()) {
-        DomHandler.focus($refs.firstHiddenFocusableElementOnOverlay);
+      if (overlayVisibleState && !hasFocusableElements()) {
+        DomHandler.focus(firstHiddenFocusableElementOnOverlay.current);
         event.preventDefault();
       } else {
         if (focusedOptionIndex !== -1) {
@@ -1079,11 +1131,10 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }
   };
   var onEditableInputChange = function onEditableInputChange(event) {
-    !overlayVisibleState && show();
     var searchIndex = null;
     if (event.target.value) {
       searchIndex = visibleOptions.findIndex(function (item) {
-        return item.name.toLocaleLowerCase().startsWith(event.target.value.toLocaleLowerCase());
+        return getOptionLabel(item).toLocaleLowerCase().startsWith(event.target.value.toLocaleLowerCase());
       });
     }
     setFocusedOptionIndex(searchIndex);
@@ -1164,7 +1215,9 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var selectItem = function selectItem(event) {
     if (selectedOption !== event.option) {
       updateEditableLabel(event.option);
+      setFocusedOptionIndex(-1);
       var optionValue = getOptionValue(event.option);
+      var selectedOptionIndex = findOptionIndexInList(event.option, visibleOptions);
       if (props.onChange) {
         props.onChange({
           originalEvent: event.originalEvent,
@@ -1182,6 +1235,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
           }
         });
       }
+      changeFocusedOptionIndex(event.originalEvent, selectedOptionIndex);
     }
   };
   var getSelectedOptionIndex = function getSelectedOptionIndex(options) {
@@ -1221,10 +1275,10 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   };
   var hide = function hide() {
     setOverlayVisibleState(false);
-    setClicked(false);
+    clickedRef.current = false;
   };
   var onFocus = function onFocus() {
-    if (props.editable) {
+    if (props.editable && !overlayVisibleState && clickedRef.current === false) {
       DomHandler.focus(inputRef.current);
     }
   };
@@ -1268,6 +1322,11 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var updateEditableLabel = function updateEditableLabel(option) {
     if (inputRef.current) {
       inputRef.current.value = option ? getOptionLabel(option) : props.value || '';
+
+      // #1413 NVDA screenreader
+      if (focusInputRef.current) {
+        focusInputRef.current.value = inputRef.current.value;
+      }
     }
   };
   var getOptionLabel = function getOptionLabel(option) {
@@ -1302,6 +1361,11 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       var label = selectedOption ? getOptionLabel(selectedOption) : null;
       var value = label || props.value || '';
       inputRef.current.value = value;
+
+      // #1413 NVDA screenreader
+      if (focusInputRef.current) {
+        focusInputRef.current.value = value;
+      }
     }
   };
   var getSelectedOption = function getSelectedOption() {
@@ -1397,12 +1461,17 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     return /*#__PURE__*/React.createElement("div", hiddenSelectedMessageProps, /*#__PURE__*/React.createElement("select", selectProps, /*#__PURE__*/React.createElement("option", optionProps, option.label)));
   };
   var createKeyboardHelper = function createKeyboardHelper() {
+    var value = ObjectUtils.isNotEmpty(selectedOption) ? getOptionLabel(selectedOption) : null;
+    if (props.editable) {
+      value = value || props.value || '';
+    }
     var hiddenSelectedMessageProps = mergeProps({
       className: 'p-hidden-accessible'
     }, ptm('hiddenSelectedMessage'));
     var inputProps = mergeProps(_objectSpread({
       ref: focusInputRef,
       id: props.inputId,
+      defaultValue: value,
       type: 'text',
       readOnly: true,
       'aria-haspopup': 'listbox',
@@ -1410,7 +1479,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       onBlur: onInputBlur,
       onKeyDown: onInputKeyDown,
       disabled: props.disabled,
-      tabIndex: props.tabIndex || 0
+      tabIndex: !props.disabled ? props.tabIndex || 0 : -1
     }, ariaProps), ptm('input'));
     return /*#__PURE__*/React.createElement("div", hiddenSelectedMessageProps, /*#__PURE__*/React.createElement("input", inputProps));
   };
@@ -1432,7 +1501,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         onFocus: onEditableInputFocus,
         onKeyDown: onInputKeyDown,
         onBlur: onInputBlur,
-        tabIndex: !props.disabled ? props.tabIndex : -1,
+        tabIndex: !props.disabled ? props.tabIndex || 0 : -1,
         'aria-haspopup': 'listbox'
       }, ariaProps), ptm('input'));
       return /*#__PURE__*/React.createElement("input", inputProps);
@@ -1548,45 +1617,46 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     'data-p-hidden-accessible': true,
     'data-p-hidden-focusable': true
   }, ptm('hiddenLastFocusableEl'));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React.createElement("span", firstHiddenFocusableElementProps), /*#__PURE__*/React.createElement(DropdownPanel, _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React.createElement(DropdownPanel, _extends({
     hostName: "Dropdown",
     ref: overlayRef,
     visibleOptions: visibleOptions,
     virtualScrollerRef: virtualScrollerRef
   }, props, {
     appendTo: appendTo,
-    onClick: onPanelClick,
-    onOptionClick: onOptionClick,
-    focusedOptionIndex: focusedOptionIndex,
-    setFocusedOptionIndex: setFocusedOptionIndex,
+    cx: cx,
     filterValue: filterState,
-    hasFilter: hasFilter,
-    onFilterClearIconClick: onFilterClearIconClick,
-    resetFilter: resetFilter,
-    onFilterInputKeyDown: onFilterInputKeyDown,
-    onFilterInputChange: onFilterInputChange,
-    getOptionLabel: getOptionLabel,
-    getOptionRenderKey: getOptionRenderKey,
-    isOptionDisabled: isOptionDisabled,
+    focusedOptionIndex: focusedOptionIndex,
     getOptionGroupChildren: getOptionGroupChildren,
     getOptionGroupLabel: getOptionGroupLabel,
     getOptionGroupRenderKey: getOptionGroupRenderKey,
-    isSelected: isSelected,
+    getOptionLabel: getOptionLabel,
+    getOptionRenderKey: getOptionRenderKey,
     getSelectedOptionIndex: getSelectedOptionIndex,
+    hasFilter: hasFilter,
     "in": overlayVisibleState,
+    isOptionDisabled: isOptionDisabled,
+    isSelected: isSelected,
+    onClick: onPanelClick,
     onEnter: onOverlayEnter,
     onEntered: onOverlayEntered,
     onExit: onOverlayExit,
     onExited: onOverlayExited,
+    onFilterClearIconClick: onFilterClearIconClick,
+    onFilterInputChange: onFilterInputChange,
+    onFilterInputKeyDown: onFilterInputKeyDown,
+    onOptionClick: onOptionClick,
     ptm: ptm,
-    cx: cx,
+    resetFilter: resetFilter,
+    setFocusedOptionIndex: setFocusedOptionIndex,
+    firstFocusableElement: /*#__PURE__*/React.createElement("span", firstHiddenFocusableElementProps),
+    lastFocusableElement: /*#__PURE__*/React.createElement("span", lastHiddenFocusableElementProps),
     sx: sx
-  })), /*#__PURE__*/React.createElement("span", lastHiddenFocusableElementProps)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+  }))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
-    content: props.tooltip
-  }, props.tooltipOptions, {
+    content: props.tooltip,
     pt: ptm('tooltip')
-  })));
+  }, props.tooltipOptions)));
 }));
 Dropdown.displayName = 'Dropdown';