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,189 lines (1,158 loc) • 306 kB
JavaScript
'use client';
import * as React from 'react';
import React__default from 'react';
import PrimeReact$1, { FilterMatchMode as FilterMatchMode$1, PrimeReactContext, ariaLabel as ariaLabel$1, localeOption, FilterOperator, FilterService } from 'primereact/api';
import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
import { ObjectUtils, classNames, DomHandler, IconUtils, UniqueComponentId, ZIndexUtils } from 'primereact/utils';
import { useMergeProps, useUpdateEffect, useMountEffect, useEventListener, useUnmountEffect, useStyle, useOverlayListener, usePrevious } from 'primereact/hooks';
import { ArrowDownIcon } from 'primereact/icons/arrowdown';
import { ArrowUpIcon } from 'primereact/icons/arrowup';
import { SpinnerIcon } from 'primereact/icons/spinner';
import { Paginator } from 'primereact/paginator';
import { VirtualScroller } from 'primereact/virtualscroller';
import { BarsIcon } from 'primereact/icons/bars';
import { CheckIcon } from 'primereact/icons/check';
import { ChevronDownIcon } from 'primereact/icons/chevrondown';
import { ChevronRightIcon } from 'primereact/icons/chevronright';
import { PencilIcon } from 'primereact/icons/pencil';
import { TimesIcon } from 'primereact/icons/times';
import { OverlayService } from 'primereact/overlayservice';
import { Ripple } from 'primereact/ripple';
import { Tooltip } from 'primereact/tooltip';
import { Button } from 'primereact/button';
import { CSSTransition } from 'primereact/csstransition';
import { Dropdown } from 'primereact/dropdown';
import { FilterIcon } from 'primereact/icons/filter';
import { FilterSlashIcon } from 'primereact/icons/filterslash';
import { PlusIcon } from 'primereact/icons/plus';
import { TrashIcon } from 'primereact/icons/trash';
import { InputText } from 'primereact/inputtext';
import { Portal } from 'primereact/portal';
import { SortAltIcon } from 'primereact/icons/sortalt';
import { SortAmountDownIcon } from 'primereact/icons/sortamountdown';
import { SortAmountUpAltIcon } from 'primereact/icons/sortamountupalt';
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 _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 getStorage = function getStorage(stateStorageProp) {
switch (stateStorageProp) {
case 'local':
return window.localStorage;
case 'session':
return window.sessionStorage;
case 'custom':
return null;
default:
throw new Error(stateStorageProp + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
}
};
var ColumnBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Column',
align: null,
alignFrozen: 'left',
alignHeader: null,
body: null,
bodyClassName: null,
bodyStyle: null,
cellEditValidateOnClose: false,
cellEditValidator: null,
cellEditValidatorEvent: 'click',
className: null,
colSpan: null,
columnKey: null,
dataType: 'text',
editor: null,
excludeGlobalFilter: false,
expander: false,
exportField: null,
exportable: true,
field: null,
filter: false,
filterApply: null,
filterClear: null,
filterElement: null,
filterField: null,
filterFooter: null,
filterFunction: null,
filterHeader: null,
filterHeaderClassName: null,
filterHeaderStyle: null,
filterMatchMode: null,
filterMatchModeOptions: null,
filterMaxLength: null,
filterMenuClassName: null,
filterMenuStyle: null,
filterPlaceholder: null,
filterType: 'text',
footer: null,
footerClassName: null,
footerStyle: null,
frozen: false,
header: null,
headerClassName: null,
headerStyle: null,
headerTooltip: null,
headerTooltipOptions: null,
hidden: false,
maxConstraints: 2,
onBeforeCellEditHide: null,
onBeforeCellEditShow: null,
onCellEditCancel: null,
onCellEditComplete: null,
onCellEditInit: null,
onFilterApplyClick: null,
onFilterClear: null,
onFilterConstraintAdd: null,
onFilterConstraintRemove: null,
onFilterMatchModeChange: null,
onFilterOperatorChange: null,
reorderable: true,
resizeable: true,
rowEditor: false,
rowReorder: false,
rowReorderIcon: null,
rowSpan: null,
selectionMode: null,
showAddButton: true,
showApplyButton: true,
showClearButton: true,
showFilterMatchModes: true,
showFilterMenu: true,
showFilterMenuOptions: true,
showFilterOperator: true,
sortField: null,
sortFunction: null,
sortable: false,
sortableDisabled: false,
style: null,
children: undefined
},
getCProp: function getCProp(column, name) {
return ObjectUtils.getComponentProp(column, name, ColumnBase.defaultProps);
},
getCProps: function getCProps(column) {
return ObjectUtils.getComponentProps(column, ColumnBase.defaultProps);
},
getCOtherProps: function getCOtherProps(column) {
return ObjectUtils.getComponentDiffProps(column, ColumnBase.defaultProps);
}
});
function ownKeys$e(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var styles$1 = "\n@layer primereact {\n .p-datatable {\n position: relative;\n }\n\n .p-datatable > .p-datatable-wrapper {\n overflow: auto;\n }\n\n .p-datatable-table {\n border-spacing: 0px;\n width: 100%;\n }\n\n .p-datatable .p-sortable-disabled {\n cursor: auto;\n }\n\n .p-datatable .p-sortable-column {\n cursor: pointer;\n user-select: none;\n }\n\n .p-datatable .p-sortable-column .p-column-title,\n .p-datatable .p-sortable-column .p-sortable-column-icon,\n .p-datatable .p-sortable-column .p-sortable-column-badge {\n vertical-align: middle;\n }\n\n .p-datatable .p-sortable-column .p-sortable-column-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .p-datatable-selectable .p-selectable-row,\n .p-datatable-selectable-cell .p-selectable-cell {\n cursor: pointer;\n }\n\n .p-datatable-drag-selection-helper {\n position: absolute;\n z-index: 99999999;\n }\n\n /* Scrollable */\n .p-datatable-scrollable > .p-datatable-wrapper {\n position: relative;\n }\n\n .p-datatable-scrollable-table > .p-datatable-thead {\n position: sticky;\n top: 0;\n z-index: 2;\n }\n\n .p-datatable.p-datatable-gridlines .p-datatable-scrollable-table > .p-datatable-thead {\n top: -1px;\n }\n\n .p-datatable-scrollable-table > .p-datatable-frozen-tbody {\n position: sticky;\n z-index: 1;\n }\n\n .p-datatable-scrollable-table > .p-datatable-tfoot {\n position: sticky;\n bottom: 0;\n z-index: 1;\n }\n\n .p-datatable-scrollable .p-frozen-column {\n position: sticky;\n background: inherit;\n }\n\n .p-datatable-scrollable th.p-frozen-column {\n z-index: 1;\n }\n\n .p-datatable-flex-scrollable {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .p-datatable-flex-scrollable > .p-datatable-wrapper {\n display: flex;\n flex-direction: column;\n flex: 1;\n height: 100%;\n }\n\n .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {\n position: sticky;\n z-index: 1;\n }\n\n /* Resizable */\n .p-datatable-resizable-table > .p-datatable-thead > tr > th,\n .p-datatable-resizable-table > .p-datatable-tfoot > tr > td,\n .p-datatable-resizable-table > .p-datatable-tbody > tr > td {\n overflow: hidden;\n white-space: nowrap;\n }\n\n .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {\n background-clip: padding-box;\n position: relative;\n }\n\n .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {\n display: none;\n }\n\n .p-datatable .p-column-resizer {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n margin: 0;\n width: 0.5rem;\n height: 100%;\n padding: 0px;\n cursor: col-resize;\n border: 1px solid transparent;\n }\n\n .p-datatable .p-column-header-content {\n display: flex;\n align-items: center;\n }\n\n .p-datatable .p-column-resizer-helper {\n width: 1px;\n position: absolute;\n z-index: 10;\n display: none;\n }\n\n .p-datatable .p-row-editor-init,\n .p-datatable .p-row-editor-save,\n .p-datatable .p-row-editor-cancel {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n\n /* Expand */\n .p-datatable .p-row-toggler {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n\n /* Reorder */\n .p-datatable-reorder-indicator-up,\n .p-datatable-reorder-indicator-down {\n position: absolute;\n display: none;\n }\n\n .p-reorderable-column,\n .p-datatable-reorderablerow-handle {\n cursor: move;\n }\n\n /* Loader */\n .p-datatable .p-datatable-loading-overlay {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n }\n\n /* Filter */\n .p-column-filter-row {\n display: flex;\n align-items: center;\n width: 100%;\n }\n\n .p-column-filter-menu {\n display: inline-flex;\n margin-left: auto;\n }\n\n .p-column-filter-row .p-column-filter-element {\n flex: 1 1 auto;\n width: 1%;\n }\n\n .p-column-filter-menu-button,\n .p-column-filter-clear-button {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n }\n\n .p-column-filter-overlay {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n .p-column-filter-row-items {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .p-column-filter-row-item {\n cursor: pointer;\n }\n\n .p-column-filter-add-button,\n .p-column-filter-remove-button {\n justify-content: center;\n }\n\n .p-column-filter-add-button .p-button-label,\n .p-column-filter-remove-button .p-button-label {\n flex-grow: 0;\n }\n\n .p-column-filter-buttonbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {\n width: auto;\n }\n\n /* Responsive */\n .p-datatable .p-datatable-tbody > tr > td > .p-column-title {\n display: none;\n }\n\n /* VirtualScroller */\n .p-datatable-virtualscroller-spacer {\n display: flex;\n }\n\n .p-datatable .p-virtualscroller .p-virtualscroller-loading {\n transform: none;\n min-height: 0;\n position: sticky;\n top: 0;\n left: 0;\n }\n\n /* Alignment */\n .p-datatable .p-datatable-thead > tr > th.p-align-left > .p-column-header-content,\n .p-datatable .p-datatable-tbody > tr > td.p-align-left,\n .p-datatable .p-datatable-tfoot > tr > td.p-align-left {\n text-align: left;\n justify-content: flex-start;\n }\n\n .p-datatable .p-datatable-thead > tr > th.p-align-right > .p-column-header-content,\n .p-datatable .p-datatable-tbody > tr > td.p-align-right,\n .p-datatable .p-datatable-tfoot > tr > td.p-align-right {\n text-align: right;\n justify-content: flex-end;\n }\n\n .p-datatable .p-datatable-thead > tr > th.p-align-center > .p-column-header-content,\n .p-datatable .p-datatable-tbody > tr > td.p-align-center,\n .p-datatable .p-datatable-tfoot > tr > td.p-align-center {\n text-align: center;\n justify-content: center;\n }\n}\n";
var classes$2 = {
root: function root(_ref) {
var props = _ref.props,
selectable = _ref.selectable;
return classNames('p-datatable p-component', {
'p-datatable-hoverable-rows': props.rowHover,
'p-datatable-selectable': selectable && !props.cellSelection,
'p-datatable-selectable-cell': selectable && props.cellSelection,
'p-datatable-resizable': props.resizableColumns,
'p-datatable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
'p-datatable-scrollable': props.scrollable,
'p-datatable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
'p-datatable-responsive-stack': props.responsiveLayout === 'stack',
'p-datatable-responsive-scroll': props.responsiveLayout === 'scroll',
'p-datatable-striped': props.stripedRows,
'p-datatable-gridlines': props.showGridlines,
'p-datatable-grouped-header': props.headerColumnGroup != null,
'p-datatable-grouped-footer': props.footerColumnGroup != null,
'p-datatable-sm': props.size === 'small',
'p-datatable-lg': props.size === 'large'
});
},
loadingIcon: 'p-datatable-loading-icon',
loadingOverlay: 'p-datatable-loading-overlay p-component-overlay',
header: 'p-datatable-header',
wrapper: 'p-datatable-wrapper',
table: function table(_ref2) {
var props = _ref2.props;
return classNames('p-datatable-table', {
'p-datatable-scrollable-table': props.scrollable,
'p-datatable-resizable-table': props.resizableColumns,
'p-datatable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
});
},
thead: 'p-datatable-thead',
tfoot: 'p-datatable-tfoot',
footer: 'p-datatable-footer',
checkIcon: 'p-checkbox-icon',
resizeHelper: 'p-column-resizer-helper',
reorderIndicatorUp: 'p-datatable-reorder-indicator-up',
reorderIndicatorDown: 'p-datatable-reorder-indicator-down',
paginator: function paginator(_ref3) {
var position = _ref3.position;
return classNames('p-paginator-' + position);
},
bodyCell: function bodyCell(_ref4) {
var selectionMode = _ref4.selectionMode,
editor = _ref4.editor,
editingState = _ref4.editingState,
frozen = _ref4.frozen,
cellSelected = _ref4.cellSelected,
align = _ref4.align,
props = _ref4.bodyProps,
getCellParams = _ref4.getCellParams;
return classNames(_defineProperty({
'p-selection-column': selectionMode !== null,
'p-editable-column': editor,
'p-cell-editing': editor && editingState,
'p-frozen-column': frozen,
'p-selectable-cell': props.allowCellSelection && props.isSelectable({
data: getCellParams(),
index: props.rowIndex
}),
'p-highlight': cellSelected
}, "p-align-".concat(align), !!align));
},
columnTitle: 'p-column-title',
bodyRow: function bodyRow(_ref5) {
var props = _ref5.rowProps;
return classNames({
'p-highlight': !props.allowCellSelection && props.selected || props.contextMenuSelected,
'p-highlight-contextmenu': props.contextMenuSelected,
'p-selectable-row': props.allowRowSelection && props.isSelectable({
data: props.rowData,
index: props.rowIndex
}),
'p-row-odd': props.rowIndex % 2 !== 0
});
},
rowGroupTogglerIcon: 'p-row-toggler-icon',
rowGroupToggler: 'p-row-toggler p-link',
rowGroupHeader: 'p-rowgroup-header',
rowGroupHeaderName: 'p-rowgroup-header-name',
rowGroupFooter: 'p-rowgroup-footer',
rowReorderIcon: 'p-datatable-reorderablerow-handle',
rowTogglerIcon: 'p-row-toggler-icon',
rowToggler: 'p-row-toggler p-link',
rowEditorSaveIcon: 'p-row-editor-save-icon',
rowEditorSaveButton: 'p-row-editor-save p-link',
rowEditorCancelIcon: 'p-row-editor-cancel-icon',
rowEditorCancelButton: 'p-row-editor-cancel p-link',
rowEditorInitIcon: 'p-row-editor-init-icon',
rowEditorInitButton: 'p-row-editor-init p-link',
rowExpansion: 'p-datatable-row-expansion',
virtualScrollerSpacer: function virtualScrollerSpacer(_ref6) {
var className = _ref6.className;
return className;
},
tbody: function tbody(_ref7) {
var className = _ref7.className;
return className;
},
filterInput: 'p-fluid p-column-filter-element',
filterMenuButton: function filterMenuButton(_ref8) {
var overlayVisibleState = _ref8.overlayVisibleState,
hasFilter = _ref8.hasFilter;
return classNames('p-column-filter-menu-button p-link', {
'p-column-filter-menu-button-open': overlayVisibleState,
'p-column-filter-menu-button-active': hasFilter()
});
},
headerFilterClearButton: function headerFilterClearButton(_ref9) {
var hasRowFilter = _ref9.hasRowFilter;
return classNames('p-column-filter-clear-button p-link', {
'p-hidden-space': !hasRowFilter()
});
},
filterSeparator: 'p-column-filter-separator',
filterRowItem: function filterRowItem(_ref10) {
var isRowMatchModeSelected = _ref10.isRowMatchModeSelected,
isShowMatchModes = _ref10.isShowMatchModes,
value = _ref10.value;
return isShowMatchModes() ? classNames('p-column-filter-row-item', {
'p-highlight': value && isRowMatchModeSelected(value)
}) : undefined;
},
filterRowItems: 'p-column-filter-row-items',
filterOperator: 'p-column-filter-operator',
filterConstraints: 'p-column-filter-constraints',
filterConstraint: 'p-column-filter-constraint',
filterAddRule: 'p-column-filter-add-rule',
filterButtonBar: 'p-column-filter-buttonbar',
filterOverlay: function filterOverlay(_ref11) {
var props = _ref11.columnFilterProps,
context = _ref11.context,
getColumnProp = _ref11.getColumnProp;
return classNames('p-column-filter-overlay p-component p-fluid', getColumnProp('filterMenuClassName'), {
'p-column-filter-overlay-menu': props.display === 'menu',
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact$1.inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact$1.ripple === false
});
},
columnFilter: function columnFilter(_ref12) {
var props = _ref12.columnFilterProps;
return classNames('p-column-filter p-fluid', {
'p-column-filter-row': props.display === 'row',
'p-column-filter-menu': props.display === 'menu'
});
},
columnResizer: 'p-column-resizer',
emptyMessage: 'p-datatable-emptymessage',
sortBadge: 'p-sortable-column-badge',
sortIcon: 'p-sortable-column-icon',
headerTitle: 'p-column-title',
headerContent: 'p-column-header-content',
headerCell: function headerCell(_ref13) {
var props = _ref13.headerProps,
frozen = _ref13.frozen,
sortMeta = _ref13.sortMeta,
align = _ref13.align,
_isSortableDisabled = _ref13._isSortableDisabled,
getColumnProp = _ref13.getColumnProp;
return ObjectUtils.isEmpty(props) ? classNames('p-filter-column', {
'p-frozen-column': frozen
}) : classNames(_defineProperty({
'p-filter-column': !props.headerColumnGroup && props.filterDisplay === 'row',
'p-sortable-column': getColumnProp('sortable'),
'p-resizable-column': props.resizableColumns && getColumnProp('resizeable'),
'p-highlight': sortMeta.sorted,
'p-frozen-column': frozen,
'p-selection-column': getColumnProp('selectionMode'),
'p-sortable-disabled': getColumnProp('sortable') && _isSortableDisabled,
'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable') && !frozen
}, "p-align-".concat(align), !!align));
},
footerCell: function footerCell(_ref14) {
var getColumnProp = _ref14.getColumnProp,
align = _ref14.align;
return classNames(_defineProperty({
'p-frozen-column': getColumnProp('frozen')
}, "p-align-".concat(align), !!align));
},
transition: 'p-connected-overlay'
};
var inlineStyles = {
wrapper: {
overflow: 'auto'
},
resizeHelper: {
display: 'none'
},
reorderIndicatorUp: function reorderIndicatorUp(_ref15) {
var style = _ref15.style;
return _objectSpread$e({}, style);
},
reorderIndicatorDown: function reorderIndicatorDown(_ref16) {
var style = _ref16.style;
return _objectSpread$e({}, style);
}
};
var DataTableBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'DataTable',
alwaysShowPaginator: true,
breakpoint: '960px',
cellClassName: null,
cellSelection: false,
checkIcon: null,
className: null,
collapsedRowIcon: null,
columnResizeMode: 'fit',
compareSelectionBy: 'deepEquals',
contextMenuSelection: null,
csvSeparator: ',',
currentPageReportTemplate: '({currentPage} of {totalPages})',
customRestoreState: null,
customSaveState: null,
dataKey: null,
defaultSortOrder: 1,
dragSelection: false,
editMode: null,
editingRows: null,
emptyMessage: null,
expandableRowGroups: false,
expandedRowIcon: null,
expandedRows: null,
exportFilename: 'download',
exportFunction: null,
filterClearIcon: null,
filterDelay: 300,
filterDisplay: 'menu',
filterIcon: null,
filterLocale: undefined,
filters: null,
first: 0,
footer: null,
footerColumnGroup: null,
frozenRow: false,
frozenValue: null,
frozenWidth: null,
globalFilter: null,
globalFilterFields: null,
globalFilterMatchMode: FilterMatchMode$1.CONTAINS,
groupRowsBy: null,
header: null,
headerColumnGroup: null,
id: null,
isDataSelectable: null,
lazy: false,
loading: false,
loadingIcon: null,
metaKeySelection: false,
multiSortMeta: null,
onAllRowsSelect: null,
onAllRowsUnselect: null,
onCellClick: null,
onCellSelect: null,
onCellUnselect: null,
onColReorder: null,
onColumnResizeEnd: null,
onColumnResizerClick: null,
onColumnResizerDoubleClick: null,
onContextMenu: null,
onContextMenuSelectionChange: null,
onFilter: null,
onPage: null,
onRowClick: null,
onRowCollapse: null,
onRowDoubleClick: null,
onRowEditCancel: null,
onRowEditChange: null,
onRowEditComplete: null,
onRowEditInit: null,
onRowEditSave: null,
onRowExpand: null,
onRowMouseEnter: null,
onRowMouseLeave: null,
onRowPointerDown: null,
onRowPointerUp: null,
onRowReorder: null,
onRowSelect: null,
onRowToggle: null,
onRowUnselect: null,
onSelectAllChange: null,
onSelectionChange: null,
onSort: null,
onStateRestore: null,
onStateSave: null,
onValueChange: null,
pageLinkSize: 5,
paginator: false,
paginatorClassName: null,
paginatorDropdownAppendTo: null,
paginatorLeft: null,
paginatorPosition: 'bottom',
paginatorRight: null,
paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
removableSort: false,
reorderIndicatorDownIcon: null,
reorderIndicatorUpIcon: null,
reorderableColumns: false,
reorderableRows: false,
resizableColumns: false,
responsiveLayout: 'scroll',
rowClassName: null,
rowEditValidator: null,
rowEditorCancelIcon: null,
rowEditorInitIcon: null,
rowEditorSaveIcon: null,
rowExpansionTemplate: null,
rowGroupFooterTemplate: null,
rowGroupHeaderTemplate: null,
rowGroupMode: null,
rowHover: false,
rows: null,
rowsPerPageOptions: null,
scrollHeight: null,
scrollable: false,
selectAll: false,
selectOnEdit: true,
selection: null,
selectionAriaLabel: null,
selectionAutoFocus: true,
selectionMode: null,
selectionPageOnly: false,
showGridlines: false,
showHeaders: true,
showRowReorderElement: null,
showSelectAll: true,
showSelectionElement: null,
size: 'normal',
sortField: null,
sortIcon: null,
sortMode: 'single',
sortOrder: null,
stateKey: null,
stateStorage: 'session',
stripedRows: false,
style: null,
tabIndex: 0,
tableClassName: null,
tableStyle: null,
totalRecords: null,
value: null,
virtualScrollerOptions: null,
children: undefined
},
css: {
styles: styles$1,
classes: classes$2,
inlineStyles: inlineStyles
}
});
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
var classes$1 = {
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$1
}
});
function ownKeys$d(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$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(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$d({
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$d({}, 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$c(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$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var getColumnProps = function getColumnProps() {
return ColumnBase.getCProps(props.column);
};
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx;
var getColumnPTOptions = function getColumnPTOptions(key) {
var columnMetaData = {
props: getColumnProps(),
parent: props.metaData,
hostName: props.hostName,
state: {},
context: {
index: props.tabIndex,
checked: props.checked,
disabled: props.disabled
}
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetaData
}), ptm("column.".concat(key), columnMetaData), ptmo(getColumnProps(), key, columnMetaData));
};
var onChange = function onChange(event) {
if (!props.disabled) {
props.onChange(event);
}
};
var checkboxIconProps = mergeProps({
className: cx('checkIcon')
}, getColumnPTOptions('rowCheckbox.icon'));
var icon = props.checked ? props.checkIcon || /*#__PURE__*/React.createElement(CheckIcon, checkboxIconProps) : null;
var checkIcon = IconUtils.getJSXIcon(icon, _objectSpread$c({}, checkboxIconProps), {
props: props
});
var tabIndex = props.disabled ? null : '0';
var checkboxProps = {
role: 'checkbox',
'aria-checked': props.checked,
tabIndex: tabIndex,
onChange: onChange,
'aria-label': props.ariaLabel,
checked: props.checked,
icon: checkIcon,
disabled: props.disabled,
unstyled: props.unstyled,
pt: getColumnPTOptions('rowCheckbox')
};
return /*#__PURE__*/React.createElement(Checkbox, checkboxProps);
});
RowCheckbox.displayName = 'RowCheckbox';
var classes = {
root: function root(_ref) {
var props = _ref.props,
context = _ref.context;
return classNames('p-radiobutton p-component', {
'p-highlight': props.checked,
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
});
},
box: 'p-radiobutton-box',
input: 'p-radiobutton-input',
icon: 'p-radiobutton-icon'
};
var RadioButtonBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'RadioButton',
autoFocus: false,
checked: false,
className: null,
disabled: false,
id: null,
inputId: null,
inputRef: null,
invalid: false,
variant: null,
name: null,
onChange: null,
onClick: null,
required: false,
style: null,
tabIndex: null,
tooltip: null,
tooltipOptions: null,
value: null,
children: undefined
},
css: {
classes: classes
}
});
function ownKeys$b(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$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var RadioButton = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
var mergeProps = useMergeProps();
var context = React.useContext(PrimeReactContext);
var props = RadioButtonBase.getProps(inProps, context);
var elementRef = React.useRef(null);
var inputRef = React.useRef(props.inputRef);
var _RadioButtonBase$setM = RadioButtonBase.setMetaData({
props: props
}),
ptm = _RadioButtonBase$setM.ptm,
cx = _RadioButtonBase$setM.cx,
isUnstyled = _RadioButtonBase$setM.isUnstyled;
useHandleStyle(RadioButtonBase.css.styles, isUnstyled, {
name: 'radiobutton'
});
var select = function select(event) {
onChange(event);
};
var onChange = function onChange(event) {
if (props.disabled || props.readonly) {
return;
}
if (props.onChange) {
var checked = props.checked;
var radioClicked = event.target instanceof HTMLDivElement;
var inputClicked = event.target === inputRef.current;
var isInputToggled = inputClicked && event.target.checked !== checked;
var isRadioToggled = radioClicked && (DomHandler.hasClass(elementRef.current, 'p-radiobutton-checked') === checked ? !checked : false);
var value = !checked;
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: 'radio',
name: props.name,
id: props.id,
value: props.value,
checked: value
}
};
if (isInputToggled || isRadioToggled) {
var _props$onChange;
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;
}
if (isRadioToggled) {
inputRef.current.checked = value;
}
}
DomHandler.focus(inputRef.current);
}
};
var onFocus = function onFocus(event) {
var _props$onFocus;
props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
};
var onBlur = function onBlur(event) {
var _props$onBlur;
props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, event);
};
React.useImperativeHandle(ref, function () {
return {
props: props,
select: select,
focus: function focus() {
return DomHandler.focus(inputRef.current);
},
getElement: function getElement() {
return elementRef.current;
},
getInput: function getInput() {
return inputRef.current;
}
};
});
React.useEffect(function () {
if (inputRef.current) {
inputRef.current.checked = props.checked;
}
}, [props.checked]);
React.useEffect(function () {
ObjectUtils.combinedRefs(inputRef, props.inputRef);
}, [inputRef, props.inputRef]);
useMountEffect(function () {
if (props.autoFocus) {
DomHandler.focus(inputRef.current, props.autoFocus);
}
});
var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
var otherProps = RadioButtonBase.getOtherProps(props);
var rootProps = mergeProps({
id: props.id,
className: classNames(props.className, cx('root', {
context: context
})),
style: props.style,
'data-p-checked': props.checked
}, otherProps, ptm('root'));
delete rootProps.input;
delete rootProps.box;
delete rootProps.icon;
var createInputElement = function createInputElement() {
var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
var inputProps = mergeProps(_objectSpread$b({
id: props.inputId,
type: 'radio',
name: props.name,
defaultChecked: props.checked,
onFocus: onFocus,
onBlur: onBlur,
onChange: onChange,
disabled: props.disabled,
readOnly: props.readonly,
required: props.required,
tabIndex: props.tabIndex,
className: cx('input')
}, ariaProps), inProps.input, ptm('input'));
return /*#__PURE__*/React.createElement("input", _extends({
ref: inputRef
}, inputProps));
};
var createBoxElement = function createBoxElement() {
var boxProps = mergeProps({
className: cx('box')
}, inProps.box, ptm('box'));
var iconProps = mergeProps({
className: cx('icon')
}, inProps.icon, ptm('icon'));
return /*#__PURE__*/React.createElement("div", boxProps, /*#__PURE__*/React.createElement("div", iconProps));
};
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)));
}));
RadioButton.displayName = 'RadioButton';
var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var getColumnProps = function getColumnProps() {
return ColumnBase.getCProps(props.column);
};
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo;
var getColumnPTOptions = function getColumnPTOptions(key) {
var columnMetaData = {
props: getColumnProps(),
parent: props.metaData,
hostName: props.hostName,
state: {},
context: {
index: props.tabIndex,
checked: props.checked,
disabled: props.disabled
}
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetaData
}), ptm("column.".concat(key), columnMetaData), ptmo(getColumnProps(), key, columnMetaData));
};
var onChange = function onChange(event) {
if (!props.disabled) {
props.onChange(event);
}
};
var radioButtonProps = {
role: 'radio',
'aria-checked': props.checked,
checked: props.checked,
disabled: props.disabled,
name: "".concat(props.tableSelector, "_dt_radio"),
onChange: onChange,
unstyled: props.unstyled,
pt: getColumnPTOptions('rowRadioButton')
};
return /*#__PURE__*/React.createElement(RadioButton, radioButtonProps);
});
RowRadioButton.displayName = 'RowRadioButton';
function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BodyCell = /*#__PURE__*/React.memo(function (props) {
var mergeProps = useMergeProps();
var _React$useState = React.useState(props.editing),
_React$useState2 = _slicedToArray(_React$useState, 2),
editingState = _React$useState2[0],
setEditingState = _React$useState2[1];
var _React$useState3 = React.useState(props.rowData),
_React$useState4 = _slicedToArray(_React$useState3, 2),
editingRowDataState = _React$useState4[0],
setEditingRowDataState = _React$useState4[1];
var _React$useState5 = React.useState({}),
_React$useState6 = _slicedToArray(_React$useState5, 2),
styleObjectState = _React$useState6[0],
setStyleObjectState = _React$useState6[1];
var elementRef = React.useRef(null);
var keyHelperRef = React.useRef(null);
var overlayEventListener = React.useRef(null);
var selfClick = React.useRef(false);
var initFocusTimeout = React.useRef(null);