primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
1,156 lines (1,134 loc) • 74.3 kB
JavaScript
this.primereact = this.primereact || {};
this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase, hooks, chevrondown, chevronup, spinner, times, overlayservice, tooltip, utils, csstransition, search, portal, virtualscroller, ripple, check, iconbase) {
'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _arrayLikeToArray$1(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _unsupportedIterableToArray$1(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray$1(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray$1(r, e) || _nonIterableRest();
}
function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var classes = {
root: function root(_ref) {
var props = _ref.props,
focusedState = _ref.focusedState,
overlayVisibleState = _ref.overlayVisibleState,
context = _ref.context;
return utils.classNames('p-dropdown p-component p-inputwrapper', {
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-focus': focusedState,
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
'p-dropdown-clearable': props.showClear && !props.disabled,
'p-inputwrapper-filled': utils.ObjectUtils.isNotEmpty(props.value),
'p-inputwrapper-focus': focusedState || overlayVisibleState
});
},
input: function input(_ref2) {
var props = _ref2.props,
label = _ref2.label;
return props.editable ? 'p-dropdown-label p-inputtext' : utils.classNames('p-dropdown-label p-inputtext', {
'p-placeholder': label === null && props.placeholder,
'p-dropdown-label-empty': label === null && !props.placeholder
});
},
trigger: 'p-dropdown-trigger',
emptyMessage: 'p-dropdown-empty-message',
itemGroup: function itemGroup(_ref3) {
var optionGroupLabel = _ref3.optionGroupLabel;
return utils.classNames('p-dropdown-item-group', {
'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',
filterIcon: 'p-dropdown-filter-icon',
filterClearIcon: 'p-dropdown-filter-clear-icon',
filterContainer: function filterContainer(_ref4) {
var clearIcon = _ref4.clearIcon;
return utils.classNames('p-dropdown-filter-container', {
'p-dropdown-clearable-filter': !!clearIcon
});
},
filterInput: function filterInput(_ref5) {
var props = _ref5.props,
context = _ref5.context;
return utils.classNames('p-dropdown-filter p-inputtext p-component', {
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
});
},
list: function list(_ref6) {
var virtualScrollerOptions = _ref6.virtualScrollerOptions;
return virtualScrollerOptions ? 'p-dropdown-items' : 'p-dropdown-items';
},
panel: function panel(_ref7) {
var context = _ref7.context;
return utils.classNames('p-dropdown-panel p-component', {
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact__default["default"].inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact__default["default"].ripple === false
});
},
item: function item(_ref8) {
var selected = _ref8.selected,
disabled = _ref8.disabled,
label = _ref8.label,
index = _ref8.index,
focusedOptionIndex = _ref8.focusedOptionIndex,
highlightOnSelect = _ref8.highlightOnSelect;
return utils.classNames('p-dropdown-item', {
'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',
transition: 'p-connected-overlay'
};
var styles = "\n@layer primereact {\n .p-dropdown {\n display: inline-flex;\n cursor: pointer;\n position: relative;\n user-select: none;\n }\n \n .p-dropdown-trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n \n .p-dropdown-label {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n flex: 1 1 auto;\n width: 1%;\n text-overflow: ellipsis;\n cursor: pointer;\n }\n \n .p-dropdown-label-empty {\n overflow: hidden;\n visibility: hidden;\n }\n \n input.p-dropdown-label {\n cursor: default;\n }\n \n .p-dropdown .p-dropdown-panel {\n min-width: 100%;\n }\n \n .p-dropdown-panel {\n position: absolute;\n top: 0;\n left: 0;\n }\n \n .p-dropdown-items-wrapper {\n overflow: auto;\n }\n \n .p-dropdown-item {\n cursor: pointer;\n font-weight: normal;\n white-space: nowrap;\n position: relative;\n overflow: hidden;\n }\n \n .p-dropdown-items {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n \n .p-dropdown-filter {\n width: 100%;\n }\n \n .p-dropdown-filter-container {\n position: relative;\n }\n \n .p-dropdown-clear-icon,\n .p-dropdown-filter-icon,\n .p-dropdown-filter-clear-icon {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n right: 2rem;\n }\n \n .p-fluid .p-dropdown {\n display: flex;\n }\n \n .p-fluid .p-dropdown .p-dropdown-label {\n width: 1%;\n }\n}\n";
var inlineStyles = {
wrapper: function wrapper(_ref9) {
var props = _ref9.props;
return {
maxHeight: props.scrollHeight || 'auto'
};
},
panel: function panel(_ref10) {
var props = _ref10.props;
return _objectSpread$2({}, props.panelStyle);
}
};
var DropdownBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'Dropdown',
__parentMetadata: null,
appendTo: null,
ariaLabel: null,
ariaLabelledBy: null,
autoFocus: false,
autoOptionFocus: false,
checkmark: false,
children: undefined,
className: null,
clearIcon: null,
collapseIcon: null,
dataKey: null,
disabled: false,
dropdownIcon: null,
editable: false,
emptyFilterMessage: null,
emptyMessage: null,
filter: false,
filterBy: null,
filterClearIcon: null,
filterDelay: 300,
filterIcon: null,
filterInputAutoFocus: false,
filterLocale: undefined,
filterMatchMode: 'contains',
filterPlaceholder: null,
filterTemplate: null,
focusInputRef: null,
focusOnHover: true,
highlightOnSelect: true,
id: null,
inputId: null,
inputRef: null,
invalid: false,
itemTemplate: null,
loading: false,
loadingIcon: null,
maxLength: null,
name: null,
onBlur: null,
onChange: null,
onContextMenu: null,
onFilter: null,
onFocus: null,
onHide: null,
onMouseDown: null,
onShow: null,
optionDisabled: null,
optionGroupChildren: 'items',
optionGroupLabel: null,
optionGroupTemplate: null,
optionLabel: null,
options: null,
optionValue: null,
panelClassName: null,
panelFooterTemplate: null,
panelStyle: null,
placeholder: null,
required: false,
resetFilterOnHide: false,
scrollHeight: '200px',
selectOnFocus: false,
showClear: false,
showFilterClear: false,
showOnFocus: false,
style: null,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
transitionOptions: null,
useOptionAsValue: false,
value: null,
valueTemplate: null,
variant: null,
virtualScrollerOptions: null
},
css: {
classes: classes,
styles: styles,
inlineStyles: inlineStyles
}
});
var BlankIcon = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var pti = iconbase.IconBase.getPTI(inProps);
return /*#__PURE__*/React__namespace.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__namespace.createElement("rect", {
width: "1",
height: "1",
fill: "currentColor",
fillOpacity: "0"
}));
}));
BlankIcon.displayName = 'BlankIcon';
var DropdownItem = /*#__PURE__*/React__namespace.memo(function (props) {
var mergeProps = hooks.useMergeProps();
var ptm = props.ptm,
cx = props.cx,
selected = props.selected,
disabled = props.disabled,
option = props.option,
label = props.label,
index = props.index,
focusedOptionIndex = props.focusedOptionIndex,
ariaSetSize = props.ariaSetSize,
checkmark = props.checkmark,
highlightOnSelect = props.highlightOnSelect,
onInputKeyDown = props.onInputKeyDown;
var getPTOptions = function getPTOptions(key) {
return ptm(key, {
context: {
selected: selected,
disabled: disabled,
focused: index === focusedOptionIndex
}
});
};
var _onClick = function onClick(event, i) {
if (props.onClick) {
props.onClick({
originalEvent: event,
option: option
});
}
};
var content = props.template ? utils.ObjectUtils.getJSXElement(props.template, props.option) : props.label;
var itemProps = mergeProps({
id: "dropdownItem_".concat(index),
role: 'option',
className: utils.classNames(option.className, cx('item', {
selected: selected,
disabled: disabled,
label: label,
index: index,
focusedOptionIndex: focusedOptionIndex,
highlightOnSelect: highlightOnSelect
})),
style: props.style,
tabIndex: 0,
onClick: function onClick(e) {
return _onClick(e);
},
onKeyDown: function onKeyDown(e) {
return onInputKeyDown(e);
},
onMouseMove: function onMouseMove(e) {
return props === null || props === void 0 ? void 0 : props.onMouseMove(e, index);
},
'aria-setsize': ariaSetSize,
'aria-posinset': index + 1,
'aria-label': label,
'aria-selected': selected,
'data-p-highlight': selected,
'data-p-focused': focusedOptionIndex === index,
'data-p-disabled': disabled
}, getPTOptions('item'));
var itemGroupLabelProps = mergeProps({
className: cx('itemLabel')
}, getPTOptions('itemLabel'));
var iconRenderer = function iconRenderer() {
if (selected) {
var checkIconProps = mergeProps({
className: cx('checkIcon')
}, getPTOptions('checkIcon'));
return /*#__PURE__*/React__namespace.createElement(check.CheckIcon, checkIconProps);
}
var blankIconProps = mergeProps({
className: cx('blankIcon')
}, getPTOptions('blankIcon'));
return /*#__PURE__*/React__namespace.createElement(BlankIcon, blankIconProps);
};
return /*#__PURE__*/React__namespace.createElement("li", _extends({
key: props.label
}, itemProps), checkmark && iconRenderer(), /*#__PURE__*/React__namespace.createElement("span", itemGroupLabelProps, content), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
});
DropdownItem.displayName = 'DropdownItem';
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var DropdownPanel = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
var mergeProps = hooks.useMergeProps();
var ptm = props.ptm,
cx = props.cx,
sx = props.sx;
var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
var filterInputRef = React__namespace.useRef(null);
var isEmptyFilter = !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
var ariaSetSize = props.visibleOptions ? props.visibleOptions.length : 0;
var filterOptions = {
filter: function filter(e) {
return onFilterInputChange(e);
},
reset: function reset() {
return props.resetFilter();
}
};
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, _objectSpread$1({
hostName: props.hostName
}, options));
};
var onEnter = function onEnter() {
props.onEnter(function () {
if (props.virtualScrollerRef.current) {
var selectedIndex = props.getSelectedOptionIndex();
if (selectedIndex !== -1) {
setTimeout(function () {
return props.virtualScrollerRef.current.scrollToIndex(selectedIndex);
}, 0);
}
}
});
};
var onEntered = function onEntered() {
props.onEntered(function () {
if (props.filter && props.filterInputAutoFocus) {
utils.DomHandler.focus(filterInputRef.current, false);
}
});
};
var onFilterInputChange = function onFilterInputChange(event) {
props.onFilterInputChange && props.onFilterInputChange(event);
};
var createFooter = function createFooter() {
if (props.panelFooterTemplate) {
var content = utils.ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
var footerProps = mergeProps({
className: cx('footer')
}, getPTOptions('footer'));
return /*#__PURE__*/React__namespace.createElement("div", footerProps, content);
}
return null;
};
var changeFocusedItemOnHover = function changeFocusedItemOnHover(event, index) {
if (props.focusOnHover) {
var _props$changeFocusedO;
props === null || props === void 0 || (_props$changeFocusedO = props.changeFocusedOptionIndex) === null || _props$changeFocusedO === void 0 || _props$changeFocusedO.call(props, event, index);
}
};
var createEmptyMessage = function createEmptyMessage(emptyMessage, isFilter) {
var message = utils.ObjectUtils.getJSXElement(emptyMessage, props) || PrimeReact.localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
var emptyMessageProps = mergeProps({
className: cx('emptyMessage')
}, getPTOptions('emptyMessage'));
return /*#__PURE__*/React__namespace.createElement("li", emptyMessageProps, message);
};
var createItem = function createItem(option, index) {
var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var style = {
height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
};
style = _objectSpread$1(_objectSpread$1({}, style), option.style);
if (option.group && props.optionGroupLabel) {
var optionGroupLabel = props.optionGroupLabel;
var groupContent = props.optionGroupTemplate ? utils.ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
var key = index + '_' + props.getOptionGroupRenderKey(option);
var itemGroupProps = mergeProps({
className: cx('itemGroup', {
optionGroupLabel: optionGroupLabel
}),
style: style,
'data-p-highlight': props.selected
}, getPTOptions('itemGroup'));
var itemGroupLabelProps = mergeProps({
className: cx('itemGroupLabel')
}, getPTOptions('itemGroupLabel'));
return /*#__PURE__*/React__namespace.createElement("li", _extends({
key: key
}, itemGroupProps), /*#__PURE__*/React__namespace.createElement("span", itemGroupLabelProps, groupContent));
}
var optionKey = props.getOptionRenderKey(option) + '_' + index;
var optionLabel = props.getOptionLabel(option);
var disabled = props.isOptionDisabled(option);
return /*#__PURE__*/React__namespace.createElement(DropdownItem, {
key: optionKey,
label: optionLabel,
index: index,
focusedOptionIndex: props.focusedOptionIndex,
option: option,
ariaSetSize: ariaSetSize,
onInputKeyDown: props.onInputKeyDown,
style: style,
template: props.itemTemplate,
selected: props.isSelected(option),
highlightOnSelect: props.highlightOnSelect,
disabled: disabled,
onClick: props.onOptionClick,
onMouseMove: changeFocusedItemOnHover,
ptm: ptm,
cx: cx,
checkmark: props.checkmark
});
};
var createItems = function createItems() {
if (utils.ObjectUtils.isNotEmpty(props.visibleOptions)) {
return props.visibleOptions.map(createItem);
} else if (props.hasFilter) {
return createEmptyMessage(props.emptyFilterMessage, true);
}
return createEmptyMessage(props.emptyMessage);
};
var createFilterClearIcon = function createFilterClearIcon() {
if (props.showFilterClear && props.filterValue) {
var ariaLabelFilterClear = PrimeReact.localeOption('clear');
var clearIconProps = mergeProps({
className: cx('filterClearIcon'),
'aria-label': ariaLabelFilterClear,
onClick: function onClick() {
return props.onFilterClearIconClick(function () {
return utils.DomHandler.focus(filterInputRef.current);
});
}
}, getPTOptions('filterClearIcon'));
var icon = props.filterClearIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, clearIconProps);
var filterClearIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, clearIconProps), {
props: props
});
return filterClearIcon;
}
return null;
};
var createFilter = function createFilter() {
if (props.filter) {
var clearIcon = createFilterClearIcon();
var filterIconProps = mergeProps({
className: cx('filterIcon')
}, getPTOptions('filterIcon'));
var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, filterIconProps);
var filterIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, filterIconProps), {
props: props
});
var filterContainerProps = mergeProps({
className: cx('filterContainer', {
clearIcon: clearIcon
})
}, getPTOptions('filterContainer'));
var filterInputProps = mergeProps({
ref: filterInputRef,
type: 'text',
autoComplete: 'off',
className: cx('filterInput', {
context: context
}),
placeholder: props.filterPlaceholder,
onKeyDown: props.onFilterInputKeyDown,
onChange: function onChange(e) {
return onFilterInputChange(e);
},
value: props.filterValue
}, getPTOptions('filterInput'));
var content = /*#__PURE__*/React__namespace.createElement("div", filterContainerProps, /*#__PURE__*/React__namespace.createElement("input", filterInputProps), clearIcon, filterIcon);
if (props.filterTemplate) {
var defaultContentOptions = {
className: utils.classNames('p-dropdown-filter-container', {
'p-dropdown-clearable-filter': !!clearIcon
}),
element: content,
filterOptions: filterOptions,
filterInputKeyDown: props.onFilterInputKeyDown,
filterInputChange: onFilterInputChange,
filterIconClassName: 'p-dropdown-filter-icon',
clearIcon: clearIcon,
props: props
};
content = utils.ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
}
var headerProps = mergeProps({
className: cx('header')
}, getPTOptions('header'));
return /*#__PURE__*/React__namespace.createElement("div", headerProps, content);
}
return null;
};
var createContent = function createContent() {
if (props.virtualScrollerOptions) {
var virtualScrollerProps = _objectSpread$1(_objectSpread$1({}, props.virtualScrollerOptions), {
style: _objectSpread$1(_objectSpread$1({}, props.virtualScrollerOptions.style), {
height: props.scrollHeight
}),
className: utils.classNames('p-dropdown-items-wrapper', props.virtualScrollerOptions.className),
items: props.visibleOptions,
autoSize: true,
onLazyLoad: function onLazyLoad(event) {
return props.virtualScrollerOptions.onLazyLoad(_objectSpread$1(_objectSpread$1({}, event), {
filter: props.filterValue
}));
},
itemTemplate: function itemTemplate(item, options) {
return item && createItem(item, options.index, options);
},
contentTemplate: function contentTemplate(options) {
var emptyMessage = props.hasFilter ? props.emptyFilterMessage : props.emptyMessage;
var content = isEmptyFilter ? createEmptyMessage(emptyMessage) : options.children;
var listProps = mergeProps({
ref: options.contentRef,
style: options.style,
className: utils.classNames(options.className, cx('list', {
virtualScrollerProps: props.virtualScrollerOptions
})),
role: 'listbox',
'aria-label': PrimeReact.ariaLabel('listLabel')
}, getPTOptions('list'));
return /*#__PURE__*/React__namespace.createElement("ul", listProps, content);
}
});
return /*#__PURE__*/React__namespace.createElement(virtualscroller.VirtualScroller, _extends({
ref: props.virtualScrollerRef
}, virtualScrollerProps, {
pt: ptm('virtualScroller')
}));
}
var items = createItems();
var wrapperProps = mergeProps({
className: cx('wrapper'),
style: sx('wrapper')
}, getPTOptions('wrapper'));
var listProps = mergeProps({
className: cx('list'),
role: 'listbox',
'aria-label': PrimeReact.ariaLabel('listLabel')
}, getPTOptions('list'));
return /*#__PURE__*/React__namespace.createElement("div", wrapperProps, /*#__PURE__*/React__namespace.createElement("ul", listProps, items));
};
var createElement = function createElement() {
var filter = createFilter();
var content = createContent();
var footer = createFooter();
var panelProps = mergeProps({
className: utils.classNames(props.panelClassName, cx('panel', {
context: context
})),
style: sx('panel'),
onClick: props.onClick
}, getPTOptions('panel'));
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": props["in"],
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: props.onExit,
onExited: props.onExited
}, getPTOptions('transition'));
return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
nodeRef: ref
}, transitionProps), /*#__PURE__*/React__namespace.createElement("div", _extends({
ref: ref
}, panelProps), props.firstFocusableElement, filter, content, footer, props.lastFocusableElement));
};
var element = createElement();
return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
element: element,
appendTo: props.appendTo
});
}));
DropdownPanel.displayName = 'DropdownPanel';
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Dropdown = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
var mergeProps = hooks.useMergeProps();
var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
var props = DropdownBase.getProps(inProps, context);
var _useDebounce = hooks.useDebounce('', props.filterDelay || 0),
_useDebounce2 = _slicedToArray(_useDebounce, 3),
filterValue = _useDebounce2[0],
filterState = _useDebounce2[1],
setFilterState = _useDebounce2[2];
var _React$useState = React__namespace.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var _React$useState3 = React__namespace.useState(-1),
_React$useState4 = _slicedToArray(_React$useState3, 2),
focusedOptionIndex = _React$useState4[0],
setFocusedOptionIndex = _React$useState4[1];
var _React$useState5 = React__namespace.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
overlayVisibleState = _React$useState6[0],
setOverlayVisibleState = _React$useState6[1];
var clickedRef = React__namespace.useRef(false);
var elementRef = React__namespace.useRef(null);
var overlayRef = React__namespace.useRef(null);
var firstHiddenFocusableElementOnOverlay = React__namespace.useRef(null);
var lastHiddenFocusableElementOnOverlay = React__namespace.useRef(null);
var inputRef = React__namespace.useRef(props.inputRef);
var focusInputRef = React__namespace.useRef(props.focusInputRef);
var virtualScrollerRef = React__namespace.useRef(null);
var searchTimeout = React__namespace.useRef(null);
var searchValue = React__namespace.useRef(null);
var isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy;
var hasFilter = utils.ObjectUtils.isNotEmpty(filterState);
var appendTo = props.appendTo || context && context.appendTo || PrimeReact__default["default"].appendTo;
var _DropdownBase$setMeta = DropdownBase.setMetaData(_objectSpread(_objectSpread({
props: props
}, props.__parentMetadata), {}, {
state: {
filter: filterState,
focused: focusedState,
overlayVisible: overlayVisibleState
}
})),
ptm = _DropdownBase$setMeta.ptm,
cx = _DropdownBase$setMeta.cx,
sx = _DropdownBase$setMeta.sx,
isUnstyled = _DropdownBase$setMeta.isUnstyled;
componentbase.useHandleStyle(DropdownBase.css.styles, isUnstyled, {
name: 'dropdown'
});
var _useOverlayListener = hooks.useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var type = _ref.type,
valid = _ref.valid;
if (valid) {
if (type === 'outside') {
if (!isClearClicked(event)) {
hide();
}
} else if (context.hideOverlaysOnDocumentScrolling) {
hide();
} else if (!utils.DomHandler.isDocument(event.target)) {
alignOverlay();
}
}
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var flatOptions = function flatOptions(options) {
return (options || []).reduce(function (result, option, index) {
result.push(_objectSpread(_objectSpread({}, option), {}, {
group: true,
index: index
}));
var optionGroupChildren = getOptionGroupChildren(option);
optionGroupChildren && optionGroupChildren.forEach(function (o) {
return result.push(o);
});
return result;
}, []);
};
var getVisibleOptions = function getVisibleOptions() {
var options = props.optionGroupLabel ? flatOptions(props.options) : props.options;
if (hasFilter && !isLazy) {
var _filterValue = filterState.trim().toLocaleLowerCase(props.filterLocale);
var searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
if (props.optionGroupLabel) {
var filteredGroups = [];
var _iterator = _createForOfIteratorHelper(props.options),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var optgroup = _step.value;
var filteredSubOptions = PrimeReact.FilterService.filter(getOptionGroupChildren(optgroup), searchFields, _filterValue, props.filterMatchMode, props.filterLocale);
if (filteredSubOptions && filteredSubOptions.length) {
filteredGroups.push(_objectSpread(_objectSpread({}, optgroup), _defineProperty({}, "".concat(props.optionGroupChildren), filteredSubOptions)));
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return flatOptions(filteredGroups);
}
return PrimeReact.FilterService.filter(options, searchFields, _filterValue, props.filterMatchMode, props.filterLocale);
}
return options;
};
var onFirstHiddenFocus = function onFirstHiddenFocus(event) {
var focusableEl = event.relatedTarget === focusInputRef.current ? utils.DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
utils.DomHandler.focus(focusableEl);
};
var onLastHiddenFocus = function onLastHiddenFocus(event) {
var focusableEl = event.relatedTarget === focusInputRef.current ? utils.DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
utils.DomHandler.focus(focusableEl);
};
var isClearClicked = function isClearClicked(event) {
return utils.DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'clearicon') || utils.DomHandler.isAttributeEquals(event.target.parentElement || event.target, 'data-pc-section', 'filterclearicon');
};
var _onClick = function onClick(event) {
if (props.disabled || props.loading) {
return;
}
props.onClick && props.onClick(event);
// do not continue if the user defined click wants to prevent it
if (event.defaultPrevented) {
return;
}
if (isClearClicked(event) || event.target.tagName === 'INPUT') {
return;
} else if (!overlayRef.current || !(overlayRef.current && overlayRef.current.contains(event.target))) {
utils.DomHandler.focus(focusInputRef.current);
overlayVisibleState ? hide() : show();
}
event.preventDefault();
clickedRef.current = true;
};
var onInputFocus = function onInputFocus(event) {
if (props.showOnFocus && !overlayVisibleState) {
show();
}
setFocusedState(true);
props.onFocus && props.onFocus(event);
};
var onInputBlur = function onInputBlur(event) {
setFocusedState(false);
if (props.onBlur) {
setTimeout(function () {
var currentValue = inputRef.current ? inputRef.current.value : undefined;
props.onBlur({
originalEvent: event.originalEvent,
value: currentValue,
stopPropagation: function stopPropagation() {
event.originalEvent.stopPropagation();
},
preventDefault: function preventDefault() {
event.originalEvent.preventDefault();
},
target: {
name: props.name,
id: props.id,
value: currentValue
}
});
}, 200);
}
};
var onOptionSelect = function onOptionSelect(event, option) {
var isHide = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
selectItem({
originalEvent: event,
option: option
});
if (isHide) {
hide();
utils.DomHandler.focus(focusInputRef.current);
}
};
var onPanelClick = function onPanelClick(event) {
overlayservice.OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
};
var onInputKeyDown = function onInputKeyDown(event) {
if (props.disabled) {
event.preventDefault();
return;
}
var code = utils.DomHandler.isAndroid() ? event.key : event.code;
switch (code) {
case 'ArrowDown':
onArrowDownKey(event);
break;
case 'ArrowUp':
onArrowUpKey(event);
break;
case 'ArrowLeft':
case 'ArrowRight':
onArrowLeftKey(event, props.editable);
break;
case 'Home':
onHomeKey(event);
break;
case 'End':
onEndKey(event);
break;
case 'PageDown':
onPageDownKey(event);
break;
case 'PageUp':
onPageUpKey(event);
break;
case 'Space':
onSpaceKey(event, props.editable);
break;
case 'NumpadEnter':
case 'Enter':
onEnterKey(event);
break;
case 'Escape':
onEscapeKey(event);
break;
case 'Tab':
onTabKey(event);
break;
case 'Backspace':
onBackspaceKey(event, props.editable);
break;
case 'ShiftLeft':
case 'ShiftRight':
//NOOP
break;
default:
var metaKey = event.metaKey || event.ctrlKey || event.altKey;
// Only handle printable characters when no meta keys are pressed
if (!metaKey && utils.ObjectUtils.isPrintableCharacter(event.key)) {
!overlayVisibleState && !props.editable && show();
!props.editable && searchOptions(event, event.key);
}
break;
}
clickedRef.current = false;
};
var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
switch (event.code) {
case 'ArrowDown':
onArrowDownKey(event);
break;
case 'ArrowUp':
onArrowUpKey(event);
break;
case 'ArrowLeft':
case 'ArrowRight':
onArrowLeftKey(event, true);
break;
case 'Enter':
case 'NumpadEnter':
onEnterKey(event);
event.preventDefault();
break;
case 'Escape':
onEscapeKey(event);
break;
}
};
var hasFocusableElements = function hasFocusableElements() {
return utils.DomHandler.getFocusableElements(overlayRef.current, ':not([data-p-hidden-focusable="true"])').length > 0;
};
var isOptionMatched = function isOptionMatched(option) {
var _getOptionLabel;
return isValidOption(option) && ((_getOptionLabel = getOptionLabel(option)) === null || _getOptionLabel === void 0 ? void 0 : _getOptionLabel.toLocaleLowerCase(props.filterLocale).startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale)));
};
var isValidOption = function isValidOption(option) {
return utils.ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option));
};
var hasSelectedOption = function hasSelectedOption() {
return utils.ObjectUtils.isNotEmpty(props.value);
};
var isValidSelectedOption = function isValidSelectedOption(option) {
return isValidOption(option) && isSelected(option);
};
var findSelectedOptionIndex = function findSelectedOptionIndex() {
return hasSelectedOption ? visibleOptions.findIndex(function (option) {
return isValidSelectedOption(option);
}) : -1;
};
var findFirstFocusedOptionIndex = function findFirstFocusedOptionIndex() {
var selectedIndex = findSelectedOptionIndex();
return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex;
};
var searchOptions = function searchOptions(event, _char) {
searchValue.current = (searchValue.current || '') + _char;
var optionIndex = -1;
var matched = false;
if (utils.ObjectUtils.isNotEmpty(searchValue.current)) {
if (focusedOptionIndex !== -1) {
optionIndex = visibleOptions.slice(focusedOptionIndex).findIndex(function (option) {
return isOptionMatched(option);
});
optionIndex = optionIndex === -1 ? visibleOptions.slice(0, focusedOptionIndex).findIndex(function (option) {
return isOptionMatched(option);
}) : optionIndex + focusedOptionIndex;
} else {
optionIndex = visibleOptions.findIndex(function (option) {
return isOptionMatched(option);
});
}
if (optionIndex !== -1) {
matched = true;
}
if (optionIndex === -1 && focusedOptionIndex === -1) {
optionIndex = findFirstFocusedOptionIndex();
}
if (optionIndex !== -1) {
changeFocusedOptionIndex(event, optionIndex);
}
}
if (searchTimeout.current) {
clearTimeout(searchTimeout.current);
}
searchTimeout.current = setTimeout(function () {
searchValue.current = '';
searchTimeout.current = null;
}, 500);
return matched;
};
var findLastFocusedOptionIndex = function findLastFocusedOptionIndex() {
var selectedIndex = findSelectedOptionIndex();
return selectedIndex < 0 ? findLastOptionIndex() : selectedIndex;
};
var findFirstOptionIndex = function findFirstOptionIndex() {
return visibleOptions.findIndex(function (option) {
return isValidOption(option);
});
};
var findLastOptionIndex = function findLastOptionIndex() {
return utils.ObjectUtils.findLastIndex(visibleOptions, function (option) {
return isValidOption(option);
});
};
var findNextOptionIndex = function findNextOptionIndex(index) {
var matchedOptionIndex = index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex(function (option) {
return isValidOption(option);
}) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
};
var findPrevOptionIndex = function findPrevOptionIndex(index) {
var matchedOptionIndex = index > 0 ? utils.ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
return isValidOption(option);
}) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex : index;
};
var changeFocusedOptionIndex = function changeFocusedOptionIndex(event, index) {
if (focusedOptionIndex !== index) {
setFocusedOptionIndex(index);
focusOnItem(index);
if (props.selectOnFocus) {
onOptionSelect(event, visibleOptions[index], false);
}
}
};
var focusOnItem = function focusOnItem(index) {
var focusedItem = utils.DomHandler.findSingle(overlayRef.current, "li[id=\"dropdownItem_".concat(index, "\"]"));
focusedItem && focusedItem.focus();
};
var onArrowDownKey = function onArrowDownKey(event) {
if (!overlayVisibleState) {
show();
props.editable && changeFocusedOptionIndex(event, findSelectedOptionIndex());
} else {
var optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : clickedRef.current ? findFirstOptionIndex() : findFirstFocusedOptionIndex();
changeFocusedOptionIndex(event, optionIndex);
}
event.preventDefault();
};
var onArrowUpKey = function onArrowUpKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (event.altKey && !pressedInInputText) {
if (focusedOptionIndex !== -1) {
onOptionSelect(event, visibleOptions[focusedOptionIndex]);
}
state.overlayVisible && hide();
event.preventDefault();
} else {
var optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : clickedRef.current ? findLastOptionIndex() : findLastFocusedOptionIndex();
changeFocusedOptionIndex(event, optionIndex);
!overlayVisibleState && show();
event.preventDefault();
}
};
var onArrowLeftKey = function onArrowLeftKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
pressedInInputText && setFocusedOptionIndex(-1);
};
var onHomeKey = function onHomeKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (pressedInInputText) {
event.currentTarget.setSelectionRange(0, 0);
setFocusedOptionIndex(-1);
} else {
changeFocusedOptionIndex(event, findFirstOptionIndex());
!overlayVisibleState && show();
}
event.preventDefault();
};
var onEndKey = function onEndKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (pressedInInputText) {
var target = event.currentTarget;
var len = target.value.length;
target.setSelectionRange(len, len);
setFocusedOptionIndex(-1);
} else {
changeFocusedOptionIndex(event, findLastOptionIndex());
!overlayVisibleState && show();
}
event.preventDefault();
};
var onPageUpKey = function onPageUpKey(event) {
event.preventDefault();
};
var onPageDownKey = function onPageDownKey(event) {
event.preventDefault();
};
var onSpaceKey = function onSpaceKey(event) {
var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
!pressedInInputText && onEnterKey(event);
};
var onEnterKey = function onEnterKey(event) {
if (!overlayVisibleState) {
setFocusedOptionIndex(-1);
onArrowDownKey(event);
} else {
if (focusedOptionIndex !== -1) {
onOptionSelect(event, visibleOptions[focusedOptionIndex]);
}
}
event.preventDefault();
};
var onEscapeKey = function onEscapeKey(event) {
overlayVisibleState && hide();
event.preventDefault();
};
var onTabKey = function onTabKey(event) {
var presse