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,184 lines (1,159 loc) • 85.6 kB
JavaScript
'use client';
import * as React from 'react';
import PrimeReact, { PrimeReactContext, localeOption, FilterService } from 'primereact/api';
import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
import { useMergeProps, useUpdateEffect, useMountEffect, useOverlayListener, useUnmountEffect } from 'primereact/hooks';
import { ChevronDownIcon } from 'primereact/icons/chevrondown';
import { SpinnerIcon } from 'primereact/icons/spinner';
import { TimesIcon } from 'primereact/icons/times';
import { TimesCircleIcon } from 'primereact/icons/timescircle';
import { OverlayService } from 'primereact/overlayservice';
import { Tooltip } from 'primereact/tooltip';
import { classNames, ObjectUtils, DomHandler, IconUtils, UniqueComponentId, ZIndexUtils } from 'primereact/utils';
import { CSSTransition } from 'primereact/csstransition';
import { Portal } from 'primereact/portal';
import { VirtualScroller } from 'primereact/virtualscroller';
import { CheckIcon } from 'primereact/icons/check';
import { SearchIcon } from 'primereact/icons/search';
import { InputText } from 'primereact/inputtext';
import { Ripple } from 'primereact/ripple';
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, 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(input, hint) {
if (_typeof(input) !== "object" || input === null) return input;
var prim = input[Symbol.toPrimitive];
if (prim !== undefined) {
var res = prim.call(input, hint || "default");
if (_typeof(res) !== "object") return res;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (hint === "string" ? String : Number)(input);
}
function _toPropertyKey(arg) {
var key = _toPrimitive(arg, "string");
return _typeof(key) === "symbol" ? key : String(key);
}
function _defineProperty(obj, key, value) {
key = _toPropertyKey(key);
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _arrayLikeToArray$1(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _unsupportedIterableToArray$1(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
}
function _readOnlyError(name) {
throw new TypeError("\"" + name + "\" is read-only");
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
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 _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(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
}
var classes$1 = {
root: function root(_ref) {
var props = _ref.props,
context = _ref.context,
focusedState = _ref.focusedState,
overlayVisibleState = _ref.overlayVisibleState;
return classNames('p-multiselect p-component p-inputwrapper', {
'p-multiselect-chip': props.display === 'chip',
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
'p-multiselect-clearable': props.showClear && !props.disabled,
'p-focus': focusedState,
'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
'p-inputwrapper-focus': focusedState || overlayVisibleState
});
},
label: function label(_ref2) {
var props = _ref2.props,
empty = _ref2.empty;
return classNames('p-multiselect-label', {
'p-placeholder': empty && props.placeholder,
'p-multiselect-label-empty': empty && !props.placeholder && !props.selectedItemTemplate,
'p-multiselect-items-label': !empty && props.display !== 'chip' && props.value.length > props.maxSelectedLabels
});
},
panel: function panel(_ref3) {
var props = _ref3.panelProps,
context = _ref3.context,
allowOptionSelect = _ref3.allowOptionSelect;
return classNames('p-multiselect-panel p-component', {
'p-multiselect-inline': props.inline,
'p-multiselect-flex': props.flex,
'p-multiselect-limited': !allowOptionSelect,
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
});
},
list: function list(_ref4) {
var virtualScrollerOptions = _ref4.virtualScrollerOptions;
return virtualScrollerOptions ? 'p-multiselect-items p-component' : 'p-multiselect-items p-component';
},
labelContainer: 'p-multiselect-label-container',
triggerIcon: 'p-multiselect-trigger-icon p-c',
trigger: 'p-multiselect-trigger',
clearIcon: 'p-multiselect-clear-icon',
tokenLabel: 'p-multiselect-token-label',
token: 'p-multiselect-token',
removeTokenIcon: 'p-multiselect-token-icon',
wrapper: 'p-multiselect-items-wrapper',
emptyMessage: 'p-multiselect-empty-message',
itemGroup: 'p-multiselect-item-group',
closeButton: 'p-multiselect-close p-link',
header: 'p-multiselect-header',
closeIcon: 'p-multiselect-close-icon',
headerCheckboxContainer: 'p-multiselect-select-all',
headerCheckboxIcon: 'p-multiselect-select-all p-checkbox-icon p-c',
headerSelectAllLabel: 'p-multiselect-select-all-label',
filterContainer: 'p-multiselect-filter-container',
filterIcon: 'p-multiselect-filter-icon',
item: function item(_ref5) {
var props = _ref5.itemProps;
return classNames('p-multiselect-item', {
'p-highlight': props.selected,
'p-disabled': props.disabled,
'p-focus': props.focusedOptionIndex === props.index
});
},
checkboxContainer: 'p-multiselect-checkbox',
checkboxIcon: 'p-checkbox-icon p-c',
transition: 'p-connected-overlay'
};
var styles = "\n@layer primereact {\n .p-multiselect {\n display: inline-flex;\n user-select: none;\n cursor: pointer;\n }\n \n .p-multiselect-trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n cursor: pointer;\n }\n \n .p-multiselect-label-container {\n overflow: hidden;\n flex: 1 1 auto;\n cursor: pointer;\n }\n \n .p-multiselect-label {\n display: block;\n white-space: nowrap;\n cursor: pointer;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n .p-multiselect-label-empty {\n overflow: hidden;\n visibility: hidden;\n }\n \n .p-multiselect-token {\n cursor: default;\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n }\n \n .p-multiselect-token-icon {\n cursor: pointer;\n }\n \n .p-multiselect .p-multiselect-panel {\n min-width: 100%;\n }\n \n .p-multiselect-inline.p-multiselect-panel {\n border: none;\n position: initial;\n background: none;\n box-shadow: none;\n }\n \n .p-multiselect-inline.p-multiselect-panel .p-multiselect-items {\n padding: 0;\n }\n \n .p-multiselect-flex.p-multiselect-panel .p-multiselect-items {\n display: flex;\n flex-wrap: wrap;\n }\n \n .p-multiselect-items-wrapper {\n overflow: auto;\n }\n \n .p-multiselect-items {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n \n .p-multiselect-item {\n cursor: pointer;\n display: flex;\n align-items: center;\n font-weight: normal;\n white-space: nowrap;\n position: relative;\n overflow: hidden;\n outline: none;\n }\n \n .p-multiselect-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n \n .p-multiselect-select-all-label {\n margin-left: 0.5rem;\n }\n \n .p-multiselect-filter-container {\n position: relative;\n flex: 1 1 auto;\n }\n \n .p-multiselect-filter-icon {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n }\n \n .p-multiselect-filter-container .p-inputtext {\n width: 100%;\n }\n \n .p-multiselect-close {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: hidden;\n position: relative;\n margin-left: auto;\n }\n \n .p-multiselect-clear-icon {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n right: 3rem;\n }\n \n .p-fluid .p-multiselect {\n display: flex;\n }\n}\n";
var inlineStyles = {
root: function root(_ref6) {
var props = _ref6.props;
return props.showClear && !props.disabled && {
position: 'relative'
};
},
itemGroup: function itemGroup(_ref7) {
var scrollerOptions = _ref7.scrollerOptions;
return {
height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
};
}
};
var MultiSelectBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'MultiSelect',
appendTo: null,
ariaLabelledBy: null,
checkboxIcon: null,
className: null,
clearIcon: null,
closeIcon: null,
dataKey: null,
disabled: false,
display: 'comma',
dropdownIcon: null,
emptyFilterMessage: null,
emptyMessage: null,
filter: false,
filterBy: null,
filterInputAutoFocus: true,
filterLocale: undefined,
selectOnFocus: false,
focusOnHover: true,
autoOptionFocus: false,
filterMatchMode: 'contains',
filterPlaceholder: null,
filterTemplate: null,
fixedPlaceholder: false,
flex: false,
id: null,
inline: false,
inputId: null,
inputRef: null,
invalid: false,
variant: null,
itemCheckboxIcon: null,
itemClassName: null,
itemTemplate: null,
loading: false,
loadingIcon: null,
maxSelectedLabels: null,
name: null,
onBlur: null,
onChange: null,
onClick: null,
onFilter: null,
onFocus: null,
onHide: null,
onRemove: null,
onSelectAll: null,
onShow: null,
optionDisabled: null,
optionGroupChildren: null,
optionGroupLabel: null,
optionGroupTemplate: null,
optionLabel: null,
optionValue: null,
options: null,
overlayVisible: false,
panelClassName: null,
panelFooterTemplate: null,
panelHeaderTemplate: null,
panelStyle: null,
placeholder: null,
removeIcon: null,
resetFilterOnHide: false,
scrollHeight: '200px',
selectAll: false,
selectAllLabel: null,
selectedItemTemplate: null,
selectedItemsLabel: '{0} items selected',
selectionLimit: null,
showClear: false,
showSelectAll: true,
style: null,
tabIndex: 0,
tooltip: null,
tooltipOptions: null,
transitionOptions: null,
useOptionAsValue: false,
value: null,
virtualScrollerOptions: null,
children: undefined
},
css: {
classes: classes$1,
styles: styles,
inlineStyles: inlineStyles
}
});
var classes = {
box: 'p-checkbox-box',
input: 'p-checkbox-input',
icon: 'p-checkbox-icon',
root: function root(_ref) {
var props = _ref.props,
checked = _ref.checked,
context = _ref.context;
return classNames('p-checkbox p-component', {
'p-highlight': checked,
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
});
}
};
var CheckboxBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Checkbox',
autoFocus: false,
checked: false,
className: null,
disabled: false,
falseValue: false,
icon: null,
id: null,
inputId: null,
inputRef: null,
invalid: false,
variant: null,
name: null,
onChange: null,
onContextMenu: null,
onMouseDown: null,
readOnly: false,
required: false,
style: null,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
trueValue: true,
value: null,
children: undefined
},
css: {
classes: classes
}
});
function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Checkbox = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = CheckboxBase.getProps(inProps, context);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var _CheckboxBase$setMeta = CheckboxBase.setMetaData({
props: props,
state: {
focused: focusedState
},
context: {
checked: props.checked === props.trueValue,
disabled: props.disabled
}
}),
ptm = _CheckboxBase$setMeta.ptm,
cx = _CheckboxBase$setMeta.cx,
isUnstyled = _CheckboxBase$setMeta.isUnstyled;
useHandleStyle(CheckboxBase.css.styles, isUnstyled, {
name: 'checkbox'
});
var elementRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var isChecked = function isChecked() {
return props.checked === props.trueValue;
};
var _onChange = function onChange(event) {
if (props.disabled || props.readonly) {
return;
}
if (props.onChange) {
var _props$onChange;
var _checked = isChecked();
var value = _checked ? props.falseValue : props.trueValue;
var eventData = {
originalEvent: event,
value: props.value,
checked: value,
stopPropagation: function stopPropagation() {
event === null || event === void 0 || event.stopPropagation();
},
preventDefault: function preventDefault() {
event === null || event === void 0 || event.preventDefault();
},
target: {
type: 'checkbox',
name: props.name,
id: props.id,
value: props.value,
checked: value
}
};
props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, eventData);
// do not continue if the user defined click wants to prevent
if (event.defaultPrevented) {
return;
}
DomHandler.focus(inputRef.current);
}
};
var _onFocus = function onFocus() {
var _props$onFocus;
setFocusedState(true);
props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props);
};
var _onBlur = function onBlur() {
var _props$onBlur;
setFocusedState(false);
props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useUpdateEffect(function () {
inputRef.current.checked = isChecked();
}, [props.checked, props.trueValue]);
useMountEffect(function () {
if (props.autoFocus) {
DomHandler.focus(inputRef.current, props.autoFocus);
}
});
var checked = isChecked();
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = CheckboxBase.getOtherProps(props);
var rootProps = mergeProps({
id: props.id,
className: classNames(props.className, cx('root', {
checked: checked,
context: context
})),
style: props.style,
'data-p-highlight': checked,
'data-p-disabled': props.disabled,
onContextMenu: props.onContextMenu,
onMouseDown: props.onMouseDown
}, otherProps, ptm('root'));
var createInputElement = function createInputElement() {
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var inputProps = mergeProps(_objectSpread$4({
id: props.inputId,
type: 'checkbox',
className: cx('input'),
name: props.name,
tabIndex: props.tabIndex,
onFocus: function onFocus(e) {
return _onFocus();
},
onBlur: function onBlur(e) {
return _onBlur();
},
onChange: function onChange(e) {
return _onChange(e);
},
disabled: props.disabled,
readOnly: props.readOnly,
required: props.required,
'aria-invalid': props.invalid,
checked: checked
}, ariaProps), ptm('input'));
return /*#__PURE__*/React.createElement("input", _extends({
ref: inputRef
}, inputProps));
};
var createBoxElement = function createBoxElement() {
var iconProps = mergeProps({
className: cx('icon')
}, ptm('icon'));
var boxProps = mergeProps({
className: cx('box', {
checked: checked
}),
'data-p-highlight': checked,
'data-p-disabled': props.disabled
}, ptm('box'));
var icon = checked ? props.icon || /*#__PURE__*/React.createElement(CheckIcon, iconProps) : null;
var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread$4({}, iconProps), {
props: props,
checked: checked
});
return /*#__PURE__*/React.createElement("div", boxProps, checkboxIcon);
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: elementRef
}, rootProps), createInputElement(), createBoxElement()), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
target: elementRef,
content: props.tooltip,
pt: ptm('tooltip')
}, props.tooltipOptions)));
}));
Checkbox.displayName = 'Checkbox';
function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var MultiSelectHeader = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx,
isUnstyled = props.isUnstyled;
var filterOptions = {
filter: function filter(e) {
return onFilter(e);
},
reset: function reset() {
return props.resetFilter();
}
};
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, _objectSpread$3({
hostName: props.hostName
}, options));
};
var onFilter = function onFilter(event) {
if (props.onFilter) {
props.onFilter({
originalEvent: event,
query: event.target.value
});
}
};
var onToggleAll = function onToggleAll(event) {
if (props.onSelectAll) {
props.onSelectAll({
originalEvent: event,
checked: props.selectAll
});
} else {
var value = props.isAllSelected() ? [] : props.visibleOptions.filter(function (option) {
return props.isValidOption(option);
}).map(function (option) {
return props.getOptionValue(option);
});
props.updateModel(event, value, value);
}
};
var createFilterElement = function createFilterElement() {
var filterIconProps = mergeProps({
className: cx('filterIcon')
}, getPTOptions('filterIcon'));
var icon = props.filterIcon || /*#__PURE__*/React.createElement(SearchIcon, filterIconProps);
var filterIcon = IconUtils.getJSXIcon(icon, _objectSpread$3({}, filterIconProps), {
props: props
});
if (props.filter) {
var filterContainerProps = mergeProps({
className: cx('filterContainer')
}, getPTOptions('filterContainer'));
var content = /*#__PURE__*/React.createElement("div", filterContainerProps, /*#__PURE__*/React.createElement(InputText, {
ref: props.filterRef,
type: "text",
role: "searchbox",
value: props.filterValue,
onChange: onFilter,
className: "p-multiselect-filter",
placeholder: props.filterPlaceholder,
pt: ptm('filterInput'),
unstyled: props.unstyled,
__parentMetadata: {
parent: props.metaData
}
}), filterIcon);
if (props.filterTemplate) {
var defaultContentOptions = {
className: filterContainerProps.className,
element: content,
filterOptions: filterOptions,
onFilter: onFilter,
filterIconClassName: props.filterIconClassName,
props: props
};
content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
}
return /*#__PURE__*/React.createElement(React.Fragment, null, content);
}
return null;
};
var filterElement = createFilterElement();
var selectAllId = props.id ? props.id + '_selectall' : UniqueComponentId();
var headerSelectAllLabelProps = mergeProps({
htmlFor: selectAllId,
className: cx('headerSelectAllLabel')
}, getPTOptions('headerSelectAllLabel'));
var headerCheckboxIconProps = mergeProps({
className: cx('headerCheckboxIcon')
}, getPTOptions('headerCheckbox.icon'));
var headerCheckboxContainerProps = mergeProps({
className: cx('headerCheckboxContainer')
}, getPTOptions('headerCheckboxContainer'));
var checkedIcon = props.itemCheckboxIcon || /*#__PURE__*/React.createElement(CheckIcon, headerCheckboxIconProps);
var itemCheckboxIcon = IconUtils.getJSXIcon(checkedIcon, _objectSpread$3({}, headerCheckboxIconProps), {
selected: props.selected
});
var checkboxElement = props.showSelectAll && /*#__PURE__*/React.createElement("div", headerCheckboxContainerProps, /*#__PURE__*/React.createElement(Checkbox, {
id: selectAllId,
checked: props.selectAll,
onChange: onToggleAll,
role: "checkbox",
"aria-checked": props.selectAll,
icon: itemCheckboxIcon,
pt: ptm('headerCheckbox'),
unstyled: isUnstyled()
}), !props.filter && /*#__PURE__*/React.createElement("label", headerSelectAllLabelProps, props.selectAllLabel));
var iconProps = mergeProps({
className: cx('closeIcon'),
'aria-hidden': true
}, getPTOptions('closeIcon'));
var icon = props.closeIcon || /*#__PURE__*/React.createElement(TimesIcon, iconProps);
var closeIcon = IconUtils.getJSXIcon(icon, _objectSpread$3({}, iconProps), {
props: props
});
var headerProps = mergeProps({
className: cx('header')
}, getPTOptions('header'));
var closeButtonProps = mergeProps({
type: 'button',
className: cx('closeButton'),
'aria-label': localeOption('close'),
onClick: props.onClose
}, getPTOptions('closeButton'));
var closeElement = /*#__PURE__*/React.createElement("button", closeButtonProps, closeIcon, /*#__PURE__*/React.createElement(Ripple, null));
var element = /*#__PURE__*/React.createElement("div", headerProps, checkboxElement, filterElement, closeElement);
if (props.template) {
var defaultOptions = {
className: 'p-multiselect-header',
checkboxElement: checkboxElement,
checked: props.selectAll,
onChange: onToggleAll,
filterElement: filterElement,
closeElement: closeElement,
closeElementClassName: 'p-multiselect-close p-link',
closeIconClassName: 'p-multiselect-close-icon',
onCloseClick: props.onClose,
element: element,
itemCheckboxIcon: itemCheckboxIcon,
props: props
};
return ObjectUtils.getJSXElement(props.template, defaultOptions);
}
return element;
});
MultiSelectHeader.displayName = 'MultiSelectHeader';
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 MultiSelectItem = /*#__PURE__*/React.memo(function (props) {
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var checkboxRef = React.useRef(null);
var mergeProps = useMergeProps();
var ptm = props.ptm,
cx = props.cx,
isUnstyled = props.isUnstyled;
var getPTOptions = function getPTOptions(key) {
return ptm(key, {
hostName: props.hostName,
context: {
selected: props.selected,
disabled: props.disabled,
focused: focusedState,
focusedIndex: props.focusedIndex,
index: props.index
}
});
};
var onFocus = function onFocus(event) {
var _checkboxRef$current;
setFocusedState(true);
checkboxRef === null || checkboxRef === void 0 || (_checkboxRef$current = checkboxRef.current) === null || _checkboxRef$current === void 0 || _checkboxRef$current.getInput().focus();
};
var onBlur = function onBlur(event) {
setFocusedState(false);
};
var onClick = function onClick(event) {
if (props.onClick) {
props.onClick(event, props.option);
}
event.preventDefault();
event.stopPropagation();
};
var checkboxIconProps = mergeProps({
className: cx('checkboxIcon')
}, getPTOptions('checkbox.icon'));
var icon = props.checkboxIcon || /*#__PURE__*/React.createElement(CheckIcon, checkboxIconProps);
var checkboxIcon = props.selected ? IconUtils.getJSXIcon(icon, _objectSpread$2({}, checkboxIconProps), {
selected: props.selected
}) : null;
var content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
var checkboxContainerProps = mergeProps({
className: cx('checkboxContainer')
}, getPTOptions('checkboxContainer'));
var itemProps = mergeProps({
className: classNames(props.className, props.option.className, cx('item', {
itemProps: props
})),
style: props.style,
onClick: onClick,
onFocus: onFocus,
onBlur: onBlur,
onMouseMove: function onMouseMove(e) {
return props === null || props === void 0 ? void 0 : props.onMouseMove(e, props.index);
},
role: 'option',
'aria-selected': props.selected,
'data-p-highlight': props.selected,
'data-p-disabled': props.disabled
}, getPTOptions('item'));
return /*#__PURE__*/React.createElement("li", _extends({}, itemProps, {
key: props.index + '_multiselectitem'
}), /*#__PURE__*/React.createElement("div", checkboxContainerProps, /*#__PURE__*/React.createElement(Checkbox, {
ref: checkboxRef,
checked: props.selected,
icon: checkboxIcon,
pt: ptm('checkbox'),
unstyled: isUnstyled(),
tabIndex: -1
})), /*#__PURE__*/React.createElement("span", null, content), /*#__PURE__*/React.createElement(Ripple, null));
});
MultiSelectItem.displayName = 'MultiSelectItem';
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 MultiSelectPanel = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
var virtualScrollerRef = React.useRef(null);
var filterInputRef = React.useRef(null);
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var ptm = props.ptm,
cx = props.cx,
sx = props.sx,
isUnstyled = props.isUnstyled;
var getPTOptions = function getPTOptions(key, options) {
return ptm(key, _objectSpread$1({
hostName: props.hostName
}, options));
};
var onEnter = function onEnter() {
props.onEnter(function () {
if (virtualScrollerRef.current) {
var selectedIndex = props.getSelectedOptionIndex();
if (selectedIndex !== -1) {
setTimeout(function () {
return virtualScrollerRef.current.scrollToIndex(selectedIndex);
}, 0);
}
}
});
};
var onEntered = function onEntered() {
props.onEntered(function () {
if (props.filter && props.filterInputAutoFocus && filterInputRef.current) {
DomHandler.focus(filterInputRef.current, false);
}
});
};
var onFilterInputChange = function onFilterInputChange(event) {
if (virtualScrollerRef.current) {
virtualScrollerRef.current.scrollToIndex(0);
}
props.onFilterInputChange && props.onFilterInputChange(event);
};
var isEmptyFilter = function isEmptyFilter() {
return !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
};
var createHeader = function createHeader() {
return /*#__PURE__*/React.createElement(MultiSelectHeader, {
hostName: props.hostName,
id: props.id,
filter: props.filter,
filterRef: filterInputRef,
filterValue: props.filterValue,
filterTemplate: props.filterTemplate,
visibleOptions: props.visibleOptions,
isValidOption: props.isValidOption,
getOptionValue: props.getOptionValue,
updateModel: props.updateModel,
onFilter: onFilterInputChange,
filterPlaceholder: props.filterPlaceholder,
onClose: props.onCloseClick,
showSelectAll: props.showSelectAll,
selectAll: props.isAllSelected(),
selectAllLabel: props.selectAllLabel,
onSelectAll: props.onSelectAll,
template: props.panelHeaderTemplate,
resetFilter: props.resetFilter,
closeIcon: props.closeIcon,
filterIcon: props.filterIcon,
itemCheckboxIcon: props.itemCheckboxIcon,
ptm: ptm,
cx: cx,
isUnstyled: isUnstyled,
metaData: props.metaData
});
};
var createFooter = function createFooter() {
if (props.panelFooterTemplate) {
var content = ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
return /*#__PURE__*/React.createElement("div", {
className: "p-multiselect-footer"
}, 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 createGroupChildren = function createGroupChildren(optionGroup, style) {
var groupChildren = props.getOptionGroupChildren(optionGroup);
return groupChildren.map(function (option, j) {
var optionLabel = props.getOptionLabel(option);
var optionKey = j + '_' + props.getOptionRenderKey(option);
var disabled = props.isOptionDisabled(option);
var selected = props.isSelected(option);
return /*#__PURE__*/React.createElement(MultiSelectItem, {
hostName: props.hostName,
index: j,
key: optionKey,
focusedOptionIndex: props.focusedOptionIndex,
label: optionLabel,
option: option,
style: style,
template: props.itemTemplate,
selected: selected,
onClick: props.onOptionSelect,
onMouseMove: changeFocusedItemOnHover,
disabled: disabled,
className: props.itemClassName,
checkboxIcon: props.checkboxIcon,
isUnstyled: isUnstyled,
ptm: ptm,
cx: cx
});
});
};
var createEmptyFilter = function createEmptyFilter() {
var emptyFilterMessage = ObjectUtils.getJSXElement(props.emptyFilterMessage, props) || localeOption('emptyFilterMessage');
var emptyMessageProps = mergeProps({
className: cx('emptyMessage')
}, getPTOptions('emptyMessage'));
return /*#__PURE__*/React.createElement("li", _extends({}, emptyMessageProps, {
key: "emptyFilterMessage"
}), emptyFilterMessage);
};
var createEmptyContent = function createEmptyContent() {
var emptyMessage = ObjectUtils.getJSXElement(props.emptyMessage, props) || localeOption('emptyMessage');
var emptyMessageProps = mergeProps({
className: cx('emptyMessage')
}, getPTOptions('emptyMessage'));
return /*#__PURE__*/React.createElement("li", _extends({}, emptyMessageProps, {
key: "emptyMessage"
}), emptyMessage);
};
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
};
if (props.optionGroupLabel) {
var groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
var groupChildrenContent = createGroupChildren(option, style);
var key = index + '_' + props.getOptionGroupRenderKey(option);
var itemGroupProps = mergeProps({
className: cx('itemGroup'),
style: sx('itemGroup', {
scrollerOptions: scrollerOptions
})
}, getPTOptions('itemGroup'));
return /*#__PURE__*/React.createElement(React.Fragment, {
key: key
}, /*#__PURE__*/React.createElement("li", _extends({}, itemGroupProps, {
key: key
}), groupContent), groupChildrenContent);
}
var optionLabel = props.getOptionLabel(option);
var optionKey = index + '_' + props.getOptionRenderKey(option);
var disabled = props.isOptionDisabled(option);
var selected = props.isSelected(option);
return /*#__PURE__*/React.createElement(MultiSelectItem, {
hostName: props.hostName,
key: optionKey,
focusedOptionIndex: props.focusedOptionIndex,
label: optionLabel,
option: option,
style: style,
index: index,
template: props.itemTemplate,
selected: selected,
onClick: props.onOptionSelect,
onMouseMove: changeFocusedItemOnHover,
disabled: disabled,
className: props.itemClassName,
checkboxIcon: props.checkboxIcon,
isUnstyled: isUnstyled,
ptm: ptm,
cx: cx
});
};
var createItems = function createItems() {
if (ObjectUtils.isNotEmpty(props.visibleOptions)) {
return props.visibleOptions.map(createItem);
}
return props.hasFilter ? createEmptyFilter() : createEmptyContent();
};
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: classNames('p-multiselect-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 content = isEmptyFilter() ? createEmptyFilter() : options.children;
var listProps = mergeProps({
ref: options.contentRef,
style: options.style,
className: classNames(options.className, cx('list', {
virtualScrollerProps: props.virtualScrollerOptions
})),
role: 'listbox',
'aria-multiselectable': true
}, getPTOptions('list'));
return /*#__PURE__*/React.createElement("ul", listProps, content);
}
});
return /*#__PURE__*/React.createElement(VirtualScroller, _extends({
ref: virtualScrollerRef
}, virtualScrollerProps, {
pt: ptm('virtualScroller'),
__parentMetadata: {
parent: props.metaData
}
}));
}
var items = createItems();
var wrapperProps = mergeProps({
className: cx('wrapper'),
style: {
maxHeight: props.scrollHeight
}
}, getPTOptions('wrapper'));
var listProps = mergeProps({
className: cx('list'),
role: 'listbox',
'aria-multiselectable': true
}, getPTOptions('list'));
return /*#__PURE__*/React.createElement("div", wrapperProps, /*#__PURE__*/React.createElement("ul", listProps, items));
};
var createElement = function createElement() {
var allowOptionSelect = props.allowOptionSelect();
var header = createHeader();
var content = createContent();
var footer = createFooter();
var panelProps = mergeProps({
className: classNames(props.panelClassName, cx('panel', {
panelProps: props,
context: context,
allowOptionSelect: allowOptionSelect
})),
style: props.panelStyle,
onClick: props.onClick
}, getPTOptions('panel'));
if (props.inline) {
return /*#__PURE__*/React.createElement("div", _extends({
ref: ref
}, panelProps), content, footer);
}
var transitionProps = mergeProps({
classNames: cx('transition'),
"in": props["in"],
timeout: {
enter: 120,
exit: 100
},
options: props.transitionOptions,
appear: true,
unmountOnExit: true,
onEnter: onEnter,
onEntered: onEntered,
onExit: props.onExit,
onExited: props.onExited
}, getPTOptions('transition'));
var firstHiddenElementProps = mergeProps({
ref: props.firstHiddenFocusableElementOnOverlay,
role: 'presentation',
'aria-hidden': 'true',
className: 'p-hidden-accessible p-hidden-focusable',
tabIndex: '0',
onFocus: props.onFirstHiddenFocus,
'data-p-hidden-accessible': true,
'data-p-hidden-focusable': true
}, ptm('hiddenFirstFocusableEl'));
var lastHiddenElementProps = mergeProps({
ref: props.lastHiddenFocusableElementOnOverlay,
role: 'presentation',
'aria-hidden': 'true',
className: 'p-hidden-accessible p-hidden-focusable',
tabIndex: '0',
onFocus: props.onLastHiddenFocus,
'data-p-hidden-accessible': true,
'data-p-hidden-focusable': true
}, ptm('hiddenLastFocusableEl'));
return /*#__PURE__*/React.createElement(CSSTransition, _extends({
nodeRef: ref
}, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
ref: ref
}, panelProps), /*#__PURE__*/React.createElement("span", firstHiddenElementProps), header, content, footer, /*#__PURE__*/React.createElement("span", lastHiddenElementProps)));
};
var element = createElement();
if (props.inline) {
return element;
}
return /*#__PURE__*/React.createElement(Portal, {
element: element,
appendTo: props.appendTo
});
}));
MultiSelectPanel.displayName = 'MultiSelectPanel';
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; }
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, 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 normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var MultiSelect = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = MultiSelectBase.getProps(inProps, context);
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedOptionIndex = _React$useState2[0],
setFocusedOptionIndex = _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(''),
_React$useState6 = _slicedToArray(_React$useState5, 2),
filterState = _React$useState6[0],
setFilterState = _React$useState6[1];
var _React$useState7 = React.useState(-1),
_React$useState8 = _slicedToArray(_React$useState7, 2),
startRangeIndex = _React$useState8[0],
setStartRangeIndex = _React$useState8[1];
var _React$useState9 = React.useState(false),
_React$useState10 = _slicedToArray(_React$useState9, 2),
focusedState = _React$useState10[0],
setFocusedState = _React$useState10[1];
var _React$useState11 = React.useState(props.inline),
_React$useState12 = _slicedToArray(_React$useState11, 2),
overlayVisibleState = _React$useState12[0],
setOverlayVisibleState = _React$useState12[1];
var elementRef = React.useRef(null);
var searchValue = React.useRef(null);
var searchTimeout = React.useRef(null);
var firstHiddenFocusableElementOnOverlay = React.useRef(null);
var lastHiddenFocusableElementOnOverlay = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var labelRef = React.useRef(null);
var overlayRef = React.useRef(null);
var hasFilter = filterState && filterState.trim().length > 0;
var empty = ObjectUtils.isEmpty(props.value);
var equalityKey = props.optionValue ? null : props.dataKey;
var metaData = {
props: props,
state: {
filterState: filterState,
focused: focusedState,
overlayVisible: overlayVisibleState
}
};
var _MultiSelectBase$setM = MultiSelectBase.setMetaData(metaData),
ptm = _MultiSelectBase$setM.ptm,
cx = _MultiSelectBase$setM.cx,
sx = _MultiSelectBase$setM.sx,
isUnstyled = _MultiSelectBase$setM.isUnstyled;
useHandleStyle(MultiSelectBase.css.styles, isUnstyled, {
name: 'multiselect'
});
var _useOverlayListener = useOverlayListener({
target: elementRef,
overlay: overlayRef,
listener: function listener(event, _ref) {
var type = _ref.type,
valid = _ref.valid;
if (valid) {
if (type === 'outside') {
!isClearClicked(event) && !isSelectAllClicked(event) && hide();
} else {
hide();
}
}
},
when: overlayVisibleState
}),
_useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
bindOverlayListener = _useOverlayListener2[0],
unbindOverlayListener = _useOverlayListener2[1];
var onFirstHiddenFocus = function onFirstHiddenFocus(event) {
var focusableEl = event.relatedTarget === inputRef.current ? DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : inputRef.current;
DomHandler.focus(focusableEl);
};
var onLastHiddenFocus = function onLastHiddenFocus(event) {
var focusableEl = event.relatedTarget === inputRef.current ? DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : inputRef.current;
DomHandler.focus(focusableEl);
};
var onPanelClick = function onPanelClick(event) {
OverlayService.emit('overlay-click', {
originalEvent: event,
target: elementRef.current
});
};
var allowOptionSelect = function allowOptionSelect() {
return !props.selectionLimit || !props.value || props.value && props.value.length < props.selectionLimit;
};
var findNextSelectedOptionIndex = function findNextSelectedOptionIndex(