UNPKG

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

891 lines (866 loc) 39.1 kB
this.primereact = this.primereact || {}; this.primereact.cascadeselect = (function (exports, React, PrimeReact, componentbase, csstransition, hooks, chevrondown, spinner, overlayservice, portal, utils, angleright, ripple) { '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(); } var classes = { root: function root(_ref) { var props = _ref.props, focusedState = _ref.focusedState, overlayVisibleState = _ref.overlayVisibleState, context = _ref.context; return utils.classNames('p-cascadeselect p-component p-inputwrapper', { 'p-disabled': props.disabled, 'p-invalid': props.invalid, 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled', 'p-focus': focusedState, 'p-inputwrapper-filled': props.value, 'p-inputwrapper-focus': focusedState || overlayVisibleState }); }, label: function label(_ref2) { var props = _ref2.props, _label = _ref2.label; return utils.classNames('p-cascadeselect-label ', { 'p-placeholder': _label === props.placeholder, 'p-cascadeselect-label-empty': !props.value && _label === 'p-emptylabel' }); }, list: 'p-cascadeselect-panel p-cascadeselect-items', sublistWrapper: 'p-cascadeselect-sublist-wrapper', sublist: 'p-cascadeselect-panel p-cascadeselect-items p-cascadeselect-sublist', item: function item(_ref3) { _ref3.option; var isGroup = _ref3.isGroup, isSelected = _ref3.isSelected; return utils.classNames('p-cascadeselect-item', { 'p-cascadeselect-item-group': isGroup, 'p-cascadeselect-item-active p-highlight': isSelected }); }, dropdownIcon: 'p-cascadeselect-trigger-icon', loadingIcon: 'p-cascadeselect-trigger-icon', dropdownButton: 'p-cascadeselect-trigger', loadingButton: 'p-cascadeselect-trigger', wrapper: 'p-cascadeselect-items-wrapper', panel: 'p-cascadeselect-panel p-component', content: 'p-cascadeselect-item-content', optionGroupIcon: 'p-cascadeselect-group-icon', text: 'p-cascadeselect-item-text', transition: 'p-connected-overlay' }; var styles = "\n@layer primereact {\n .p-cascadeselect {\n display: inline-flex;\n cursor: pointer;\n position: relative;\n user-select: none;\n }\n \n .p-cascadeselect-trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n \n .p-cascadeselect-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-cascadeselect-label-empty {\n overflow: hidden;\n visibility: hidden;\n }\n \n .p-cascadeselect .p-cascadeselect-panel {\n min-width: 100%;\n }\n \n .p-cascadeselect-item {\n cursor: pointer;\n font-weight: normal;\n white-space: nowrap;\n }\n \n .p-cascadeselect-item-content {\n display: flex;\n align-items: center;\n overflow: hidden;\n position: relative;\n }\n \n .p-cascadeselect-group-icon {\n margin-left: auto;\n }\n \n .p-cascadeselect-items {\n margin: 0;\n padding: 0;\n list-style-type: none;\n min-width: 100%;\n }\n \n .p-fluid .p-cascadeselect {\n display: flex;\n }\n \n .p-fluid .p-cascadeselect .p-cascadeselect-label {\n width: 1%;\n }\n \n .p-cascadeselect-sublist-wrapper {\n position: absolute;\n min-width: 100%;\n z-index: 1;\n display: none;\n }\n \n .p-cascadeselect-item-active {\n overflow: visible;\n }\n \n .p-cascadeselect-item-active > .p-cascadeselect-sublist-wrapper {\n display: block;\n left: 100%;\n top: 0;\n }\n}\n"; var CascadeSelectBase = componentbase.ComponentBase.extend({ defaultProps: { __TYPE: 'CascadeSelect', appendTo: null, ariaLabelledBy: null, autoFocus: false, breakpoint: undefined, className: null, dataKey: null, disabled: false, loadingIcon: null, dropdownIcon: null, loading: false, id: null, inputId: null, inputRef: null, invalid: false, variant: null, itemTemplate: null, name: null, onBeforeHide: null, onBeforeShow: null, onChange: null, onGroupChange: null, onHide: null, onShow: null, optionGroupChildren: null, optionGroupIcon: null, optionGroupLabel: null, optionLabel: null, optionValue: null, options: null, placeholder: null, scrollHeight: '400px', style: null, tabIndex: null, transitionOptions: null, value: null, children: undefined }, css: { classes: classes, styles: styles } }); 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 CascadeSelectSub = /*#__PURE__*/React__namespace.memo(function (props) { var mergeProps = hooks.useMergeProps(); var _React$useState = React__namespace.useState(null), _React$useState2 = _slicedToArray(_React$useState, 2), activeOptionState = _React$useState2[0], setActiveOptionState = _React$useState2[1]; var elementRef = React__namespace.useRef(null); var context = React__namespace.useContext(PrimeReact.PrimeReactContext); var ptm = props.ptm, cx = props.cx; var getPTOptions = function getPTOptions(key, options) { return ptm(key, { hostName: props.hostName, state: _objectSpread$1({}, options) }); }; var position = function position() { var parentItem = elementRef.current.parentElement.parentElement; var containerOffset = utils.DomHandler.getOffset(parentItem); var viewport = utils.DomHandler.getViewport(); var sublistWidth = elementRef.current.offsetParent ? elementRef.current.offsetWidth : utils.DomHandler.getHiddenElementOuterWidth(element); var itemOuterWidth = utils.DomHandler.getOuterWidth(parentItem.children[0]); if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - utils.DomHandler.calculateScrollbarWidth()) { elementRef.current.parentElement.style.left = '-100%'; } }; var onOptionSelect = function onOptionSelect(event) { props.onOptionSelect && props.onOptionSelect(event); }; var _onKeyDown = function onKeyDown(event, option) { var listItem = event.currentTarget.parentElement; switch (event.key) { case 'Down': case 'ArrowDown': var nextItem = _findNextItem(listItem); if (nextItem) { nextItem.children[0].focus(); } break; case 'Up': case 'ArrowUp': var prevItem = _findPrevItem(listItem); if (prevItem) { prevItem.children[0].focus(); } break; case 'Right': case 'ArrowRight': if (isOptionGroup(option)) { if (activeOptionState === option) { listItem.children[1].children[0].children[0].focus(); } else { setActiveOptionState(option); } } break; case 'Left': case 'ArrowLeft': setActiveOptionState(null); var parentList = event.currentTarget.parentElement.parentElement.previousElementSibling; if (parentList) { parentList.focus(); } break; case 'Enter': onOptionClick(event, option); break; case 'Tab': case 'Escape': if (props.onPanelHide) { props.onPanelHide(); event.preventDefault(); } break; } event.preventDefault(); }; var _findNextItem = function findNextItem(item) { var nextItem = item.nextElementSibling; return nextItem ? utils.DomHandler.hasClass(nextItem, 'p-disabled') || !utils.DomHandler.hasClass(nextItem, 'p-cascadeselect-item') ? _findNextItem(nextItem) : nextItem : null; }; var _findPrevItem = function findPrevItem(item) { var prevItem = item.previousElementSibling; return prevItem ? utils.DomHandler.hasClass(prevItem, 'p-disabled') || !utils.DomHandler.hasClass(prevItem, 'p-cascadeselect-item') ? _findPrevItem(prevItem) : prevItem : null; }; var onOptionClick = function onOptionClick(event, option) { if (isOptionGroup(option)) { setActiveOptionState(function (prevActiveOption) { return prevActiveOption === option ? null : option; }); if (props.onOptionGroupSelect) { props.onOptionGroupSelect({ originalEvent: event, value: option }); } } else if (props.onOptionSelect) { props.onOptionSelect({ originalEvent: event, value: getOptionValue(option) }); } }; var onOptionGroupSelect = function onOptionGroupSelect(event) { props.onOptionGroupSelect && props.onOptionGroupSelect(event); }; var getOptionLabel = function getOptionLabel(option) { return props.optionLabel ? utils.ObjectUtils.resolveFieldData(option, props.optionLabel) : option; }; var getOptionValue = function getOptionValue(option) { return props.optionValue ? utils.ObjectUtils.resolveFieldData(option, props.optionValue) : option; }; var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) { return props.optionGroupLabel ? utils.ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel) : null; }; var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) { return utils.ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren[props.level]); }; var isOptionGroup = function isOptionGroup(option) { return Object.prototype.hasOwnProperty.call(option, props.optionGroupChildren[props.level]); }; var getOptionLabelToRender = function getOptionLabelToRender(option) { return isOptionGroup(option) ? getOptionGroupLabel(option) : getOptionLabel(option); }; hooks.useMountEffect(function () { if (props.selectionPath && props.options && !props.dirty) { var activeOption = props.options.find(function (o) { return props.selectionPath.includes(o); }); activeOption && setActiveOptionState(activeOption); } if (!props.root) { position(); } }); hooks.useUpdateEffect(function () { if (!props.parentActive) { setActiveOptionState(null); } }, [props.parentActive]); var createSubmenu = function createSubmenu(option) { if (isOptionGroup(option) && activeOptionState === option) { var options = getOptionGroupChildren(option); var parentActive = activeOptionState === option; var level = props.level + 1; return /*#__PURE__*/React__namespace.createElement(CascadeSelectSub, { hostName: props.hostName, options: options, className: cx('sublist'), selectionPath: props.selectionPath, optionLabel: props.optionLabel, optionValue: props.optionValue, level: level, onOptionSelect: onOptionSelect, onOptionGroupSelect: onOptionGroupSelect, parentActive: parentActive, optionGroupLabel: props.optionGroupLabel, optionGroupChildren: props.optionGroupChildren, dirty: props.dirty, template: props.template, onPanelHide: props.onPanelHide, ptm: ptm, cx: cx }); } return null; }; var createOption = function createOption(option, index) { var submenu = createSubmenu(option); var textProps = mergeProps({ className: cx('text') }, getPTOptions('text')); var content = props.template ? utils.ObjectUtils.getJSXElement(props.template, getOptionValue(option)) : /*#__PURE__*/React__namespace.createElement("span", textProps, getOptionLabelToRender(option)); var optionGroupIconProps = mergeProps({ className: cx('optionGroupIcon') }, getPTOptions('optionGroupIcon')); var icon = props.optionGroupIcon || /*#__PURE__*/React__namespace.createElement(angleright.AngleRightIcon, optionGroupIconProps); var optionGroup = isOptionGroup(option) && utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, optionGroupIconProps), { props: props }); var key = getOptionLabelToRender(option) + '_' + index; var contentProps = mergeProps({ className: cx('content'), onClick: function onClick(event) { return onOptionClick(event, option); }, tabIndex: 0, onKeyDown: function onKeyDown(event) { return _onKeyDown(event, option); } }, getPTOptions('content')); var isSelected = activeOptionState === option; var isGroup = isOptionGroup(option); var itemProps = mergeProps({ className: utils.classNames(option.className, cx('item', { option: option, isGroup: isGroup, isSelected: isSelected })), style: option.style, role: 'none', 'data-p-item-group': isGroup, 'data-p-highlight': isSelected }, getPTOptions('item', { selected: isSelected, group: isGroup })); return /*#__PURE__*/React__namespace.createElement("li", _extends({ key: key }, itemProps), /*#__PURE__*/React__namespace.createElement("div", contentProps, content, optionGroup, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), submenu); }; var createMenu = function createMenu() { return props.options ? props.options.map(createOption) : null; }; var createList = function createList() { var listProps = mergeProps({ ref: elementRef, className: cx(props.level === 0 ? 'list' : 'sublist', { context: context }), role: 'listbox', 'aria-orientation': 'horizontal' }, props.level === 0 ? getPTOptions('list') : getPTOptions('sublist')); var submenu = createMenu(); return /*#__PURE__*/React__namespace.createElement("ul", listProps, submenu); }; var createElement = function createElement() { var list = createList(); var listWrapperProps = mergeProps({ className: cx('sublistWrapper') }, getPTOptions('sublistWrapper')); return props.level === 0 ? list : /*#__PURE__*/React__namespace.createElement("div", listWrapperProps, list); }; var element = createElement(); return element; }); 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 CascadeSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) { var mergeProps = hooks.useMergeProps(); var context = React__namespace.useContext(PrimeReact.PrimeReactContext); var props = CascadeSelectBase.getProps(inProps, context); 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(false), _React$useState4 = _slicedToArray(_React$useState3, 2), overlayVisibleState = _React$useState4[0], setOverlayVisibleState = _React$useState4[1]; var _React$useState5 = React__namespace.useState(null), _React$useState6 = _slicedToArray(_React$useState5, 2), attributeSelectorState = _React$useState6[0], setAttributeSelectorState = _React$useState6[1]; var _CascadeSelectBase$se = CascadeSelectBase.setMetaData({ props: props, state: { focused: focusedState, overlayVisible: overlayVisibleState, attributeSelector: attributeSelectorState }, context: _objectSpread({}, context) }), ptm = _CascadeSelectBase$se.ptm, cx = _CascadeSelectBase$se.cx, isUnstyled = _CascadeSelectBase$se.isUnstyled; componentbase.useHandleStyle(CascadeSelectBase.css.styles, isUnstyled, { name: 'cascadeselect' }); var elementRef = React__namespace.useRef(null); var overlayRef = React__namespace.useRef(null); var inputRef = React__namespace.useRef(null); var labelRef = React__namespace.useRef(null); var styleElementRef = React__namespace.useRef(null); var dirty = React__namespace.useRef(false); var selectionPath = React__namespace.useRef(null); var _useOverlayListener = hooks.useOverlayListener({ target: elementRef, overlay: overlayRef, listener: function listener(event, _ref) { var valid = _ref.valid, type = _ref.type; if (valid) { if (context.hideOverlaysOnDocumentScrolling || type === 'outside') { hide(); } else if (!utils.DomHandler.isDocument(event.target)) { alignOverlay(); } } }, when: overlayVisibleState }), _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2), bindOverlayListener = _useOverlayListener2[0], unbindOverlayListener = _useOverlayListener2[1]; var cascadeSelectOverlayDisplayOrder = hooks.useDisplayOrder('cascade-select', overlayVisibleState); hooks.useGlobalOnEscapeKey({ callback: function callback() { hide(); }, when: overlayVisibleState && cascadeSelectOverlayDisplayOrder, priority: [hooks.ESC_KEY_HANDLING_PRIORITIES.CASCADE_SELECT, cascadeSelectOverlayDisplayOrder] }); var onOptionSelect = function onOptionSelect(event) { if (props.onChange) { props.onChange({ originalEvent: event, value: event.value }); } updateSelectionPath(); hide(); utils.DomHandler.focus(inputRef.current); }; var onOptionGroupSelect = function onOptionGroupSelect(event) { dirty.current = true; props.onGroupChange && props.onGroupChange(event); }; var getOptionLabel = function getOptionLabel(option) { var label = props.optionLabel ? utils.ObjectUtils.resolveFieldData(option, props.optionLabel) : option; return label || option; }; var getOptionValue = function getOptionValue(option) { return props.optionValue ? utils.ObjectUtils.resolveFieldData(option, props.optionValue) : option; }; var getOptionGroupChildren = function getOptionGroupChildren(optionGroup, level) { return utils.ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren[level]); }; var isOptionGroup = function isOptionGroup(option, level) { return Object.prototype.hasOwnProperty.call(option, props.optionGroupChildren[level]); }; var updateSelectionPath = function updateSelectionPath() { var path; if (props.value != null && props.options) { var _iterator = _createForOfIteratorHelper(props.options), _step; try { for (_iterator.s(); !(_step = _iterator.n()).done;) { var option = _step.value; path = _findModelOptionInGroup(option, 0); if (path) { break; } } } catch (err) { _iterator.e(err); } finally { _iterator.f(); } } selectionPath.current = path; }; var _findModelOptionInGroup = function findModelOptionInGroup(option, level) { if (isOptionGroup(option, level)) { var selectedOption; var _iterator2 = _createForOfIteratorHelper(getOptionGroupChildren(option, level)), _step2; try { for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { var childOption = _step2.value; selectedOption = _findModelOptionInGroup(childOption, level + 1); if (selectedOption) { selectedOption.unshift(option); return selectedOption; } } } catch (err) { _iterator2.e(err); } finally { _iterator2.f(); } } else if (utils.ObjectUtils.equals(props.value, getOptionValue(option), props.dataKey)) { return [option]; } return null; }; var _onClick = function onClick(event) { if (props.disabled || props.loading) { return; } if (!overlayRef.current || !overlayRef.current.contains(event.target)) { utils.DomHandler.focus(inputRef.current); overlayVisibleState ? hide() : show(); } }; var onInputFocus = function onInputFocus() { setFocusedState(true); }; var onInputBlur = function onInputBlur() { setFocusedState(false); }; var onInputKeyDown = function onInputKeyDown(event) { switch (event.which) { //down case 40: if (overlayVisibleState) { utils.DomHandler.findSingle(overlayRef.current, '[data-pc-section="item"]').children[0].focus(); } else if (event.altKey && props.options && props.options.length) { show(); } event.preventDefault(); break; //space case 32: overlayVisibleState ? hide() : show(); event.preventDefault(); break; //tab case 9: hide(); break; } }; var onPanelClick = function onPanelClick(event) { overlayservice.OverlayService.emit('overlay-click', { originalEvent: event, target: elementRef.current }); }; var show = function show() { props.onBeforeShow && props.onBeforeShow(); setOverlayVisibleState(true); }; var hide = function hide() { props.onBeforeHide && props.onBeforeHide(); setOverlayVisibleState(false); utils.DomHandler.focus(inputRef.current); }; var onOverlayEnter = function onOverlayEnter() { utils.ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, context && context.zIndex.overlay || PrimeReact__default["default"].zIndex.overlay); utils.DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' }); alignOverlay(); if (attributeSelectorState && props.breakpoint) { overlayRef.current.setAttribute(attributeSelectorState + '_panel', ''); createStyle(); } }; var onOverlayEntered = function onOverlayEntered() { bindOverlayListener(); props.onShow && props.onShow(); }; var onOverlayExit = function onOverlayExit() { unbindOverlayListener(); dirty.current = false; }; var onOverlayExited = function onOverlayExited() { utils.ZIndexUtils.clear(overlayRef.current); props.onHide && props.onHide(); destroyStyle(); }; var alignOverlay = function alignOverlay() { utils.DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact__default["default"].appendTo); }; var createStyle = function createStyle() { if (!styleElementRef.current) { styleElementRef.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce, context && context.styleContainer); var selector = "".concat(attributeSelectorState, "_panel"); var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-items-wrapper > ul {\n max-height: ").concat(props.scrollHeight, ";\n overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n }\n\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-sublist-wrapper {\n position:relative;\n left:0 !important;\n }\n\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-sublist {\n overflow: hidden !important;\n }\n\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-item-active .p-cascadeselect-sublist {\n left: 0;\n box-shadow: none;\n border-radius: 0;\n padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n }\n\n .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-group-icon:before {\n content: \"\\e930\";\n }\n}\n"); styleElementRef.current.innerHTML = innerHTML; } }; var destroyStyle = function destroyStyle() { styleElementRef.current = utils.DomHandler.removeInlineStyle(styleElementRef.current); }; React__namespace.useImperativeHandle(ref, function () { return { props: props, getElement: function getElement() { return elementRef.current; }, getOverlay: function getOverlay() { return overlayRef.current; }, getInput: function getInput() { return inputRef.current; }, getLabel: function getLabel() { return labelRef.current; }, focus: function focus() { return utils.DomHandler.focus(inputRef.current); } }; }); hooks.useMountEffect(function () { if (props.breakpoint) { !attributeSelectorState && setAttributeSelectorState(utils.UniqueComponentId()); } if (props.autoFocus) { utils.DomHandler.focus(inputRef.current, props.autoFocus); } alignOverlay(); }); React__namespace.useEffect(function () { utils.ObjectUtils.combinedRefs(inputRef, props.inputRef); }, [inputRef, props.inputRef]); hooks.useUpdateEffect(function () { updateSelectionPath(); }, [props.value]); hooks.useUnmountEffect(function () { utils.ZIndexUtils.clear(overlayRef.current); }); var createKeyboardHelper = function createKeyboardHelper() { var value = props.value ? getOptionLabel(props.value) : undefined; var hiddenSelectedMessageProps = mergeProps({ className: 'p-hidden-accessible' }, ptm('hiddenSelectedMessage')); var inputProps = mergeProps(_objectSpread({ ref: inputRef, type: 'text', id: props.inputId, name: props.name, defaultValue: value, readOnly: true, disabled: props.disabled, onFocus: onInputFocus, onBlur: onInputBlur, onKeyDown: function onKeyDown(e) { return onInputKeyDown(e); }, tabIndex: props.tabIndex, 'aria-haspopup': 'listbox' }, ariaProps), ptm('input')); return /*#__PURE__*/React__namespace.createElement("div", hiddenSelectedMessageProps, /*#__PURE__*/React__namespace.createElement("input", inputProps)); }; var createLabel = function createLabel() { var label = props.value ? getOptionLabel(props.value) : props.placeholder || 'p-emptylabel'; var labelProps = mergeProps({ ref: labelRef, className: cx('label', { label: label }) }, ptm('label', { context: _objectSpread({ label: label }, context) })); return /*#__PURE__*/React__namespace.createElement("span", labelProps, label); }; var createLoadingIcon = function createLoadingIcon() { var loadingIconProps = mergeProps({ className: cx('loadingIcon') }, ptm('loadingIcon')); var icon = props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, { spin: true }); var loadingIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, loadingIconProps), { props: props }); var loadingButtonProps = mergeProps({ className: cx('loadingButton'), role: 'button', 'aria-haspopup': 'listbox', 'aria-expanded': overlayVisibleState }, ptm('dropdownButton')); return /*#__PURE__*/React__namespace.createElement("div", loadingButtonProps, loadingIcon); }; var createDropdownIcon = function createDropdownIcon() { var dropdownIconProps = mergeProps({ className: cx('dropdownIcon') }, ptm('dropdownIcon')); var icon = props.dropdownIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, dropdownIconProps); var dropdownIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, dropdownIconProps), { props: props }); var dropdownButtonProps = mergeProps({ className: cx('dropdownButton'), role: 'button', 'aria-haspopup': 'listbox', 'aria-expanded': overlayVisibleState }, ptm('dropdownButton')); return /*#__PURE__*/React__namespace.createElement("div", dropdownButtonProps, dropdownIcon); }; var wrapperProps = mergeProps({ className: cx('wrapper') }, ptm('wrapper')); var panelProps = mergeProps({ ref: overlayRef, className: cx('panel'), onClick: function onClick(e) { return onPanelClick(e); } }, ptm('panel')); var createOverlay = function createOverlay() { var transitionProps = mergeProps({ classNames: cx('transition'), "in": overlayVisibleState, timeout: { enter: 120, exit: 100 }, options: props.transitionOptions, unmountOnExit: true, onEnter: onOverlayEnter, onEntered: onOverlayEntered, onExit: onOverlayExit, onExited: onOverlayExited }, ptm('transition')); var overlay = /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({ nodeRef: overlayRef }, transitionProps), /*#__PURE__*/React__namespace.createElement("div", panelProps, /*#__PURE__*/React__namespace.createElement("div", wrapperProps, /*#__PURE__*/React__namespace.createElement(CascadeSelectSub, { hostName: "CascadeSelect", options: props.options, selectionPath: selectionPath.current, optionGroupIcon: props.optionGroupIcon, optionLabel: props.optionLabel, optionValue: props.optionValue, parentActive: props.value != null, level: 0, optionGroupLabel: props.optionGroupLabel, optionGroupChildren: props.optionGroupChildren, onOptionSelect: onOptionSelect, onOptionGroupSelect: onOptionGroupSelect, root: true, template: props.itemTemplate, onPanelHide: hide, ptm: ptm, cx: cx })))); return /*#__PURE__*/React__namespace.createElement(portal.Portal, { element: overlay, appendTo: props.appendTo }); }; var createElement = function createElement() { var keyboardHelper = createKeyboardHelper(); var labelElement = createLabel(); var dropdownIcon = props.loading ? createLoadingIcon() : createDropdownIcon(); var overlay = createOverlay(); var rootProps = mergeProps({ id: props.id, ref: elementRef, className: utils.classNames(props.className, cx('root', { focusedState: focusedState, overlayVisibleState: overlayVisibleState, context: context })), style: props.style, onClick: function onClick(e) { return _onClick(e); } }, otherProps, ptm('root')); return /*#__PURE__*/React__namespace.createElement("div", rootProps, keyboardHelper, labelElement, dropdownIcon, overlay); }; var otherProps = CascadeSelectBase.getOtherProps(props); utils.ObjectUtils.reduceKeys(otherProps, utils.DomHandler.DATA_PROPS); var ariaProps = utils.ObjectUtils.reduceKeys(otherProps, utils.DomHandler.ARIA_PROPS); var element = createElement(); return element; })); CascadeSelect.displayName = 'CascadeSelect'; exports.CascadeSelect = CascadeSelect; Object.defineProperty(exports, '__esModule', { value: true }); return exports; })({}, React, primereact.api, primereact.componentbase, primereact.csstransition, primereact.hooks, primereact.icons.chevrondown, primereact.icons.spinner, primereact.overlayservice, primereact.portal, primereact.utils, primereact.icons.angleright, primereact.ripple);