primereact 10.3.3 → 10.5.0

package/chips/chips.esm.js

@@ -139,22 +139,29 @@ var styles = "\n@layer primereact {\n    .p-chips {\n        display: inline-fle
 var classes = {
   removeTokenIcon: 'p-chips-token-icon',
   label: 'p-chips-token-label',
-  token: 'p-chips-token p-highlight',
+  token: function token(_ref) {
+    var focusedIndex = _ref.focusedIndex,
+      index = _ref.index;
+    return classNames('p-chips-token', {
+      'p-focus': focusedIndex === index
+    });
+  },
   inputToken: 'p-chips-input-token',
-  container: function container(_ref) {
-    var props = _ref.props,
-      focusedState = _ref.focusedState;
+  container: function container(_ref2) {
+    var isFilled = _ref2.isFilled;
     return classNames('p-inputtext p-chips-multiple-container', {
-      'p-disabled': props.disabled,
-      'p-focus': focusedState
+      'p-variant-filled': isFilled
     });
   },
-  root: function root(_ref2) {
-    var isFilled = _ref2.isFilled,
-      focusedState = _ref2.focusedState;
+  root: function root(_ref3) {
+    var isFilled = _ref3.isFilled,
+      focusedState = _ref3.focusedState,
+      disabled = _ref3.disabled;
     return classNames('p-chips p-component p-inputwrapper', {
       'p-inputwrapper-filled': isFilled,
-      'p-inputwrapper-focus': focusedState
+      'p-inputwrapper-focus': focusedState,
+      'p-disabled': disabled,
+      'p-focus': focusedState
     });
   }
 };
@@ -207,6 +214,10 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusedState = _React$useState2[0],
     setFocusedState = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    focusedIndex = _React$useState4[0],
+    setFocusedIndex = _React$useState4[1];
   var _ChipsBase$setMetaDat = ChipsBase.setMetaData({
       props: props,
       state: {
@@ -276,26 +287,71 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
   var onWrapperClick = function onWrapperClick() {
     DomHandler.focus(inputRef.current);
   };
+  var onContainerKeyDown = function onContainerKeyDown(event) {
+    switch (event.code) {
+      case 'ArrowLeft':
+        onArrowLeftKeyOn();
+        break;
+      case 'ArrowRight':
+        onArrowRightKeyOn();
+        break;
+      case 'Backspace':
+        onBackspaceKeyOn(event);
+        break;
+    }
+  };
+  var onArrowLeftKeyOn = function onArrowLeftKeyOn() {
+    var focusIndex = focusedIndex;
+    if (inputRef.current.value.length === 0 && props.value && props.value.length > 0) {
+      focusIndex = focusIndex === null ? props.value.length - 1 : focusIndex - 1;
+      if (focusIndex < 0) focusIndex = 0;
+    }
+    setFocusedIndex(focusIndex);
+  };
+  var onArrowRightKeyOn = function onArrowRightKeyOn() {
+    var focusIndex = focusedIndex;
+    if (inputRef.current.value.length === 0 && props.value && props.value.length > 0) {
+      if (focusIndex === props.value.length - 1) {
+        focusIndex = null;
+        inputRef.current.focus();
+      } else {
+        focusIndex++;
+      }
+    }
+    setFocusedIndex(focusIndex);
+  };
+  var onBackspaceKeyOn = function onBackspaceKeyOn(event) {
+    if (focusedIndex !== null) {
+      removeItem(event, focusedIndex);
+    }
+  };
   var _onKeyDown = function onKeyDown(event) {
     var inputValue = event.target.value;
     var values = props.value || [];
     props.onKeyDown && props.onKeyDown(event);
-
-    // do not continue if the user defined keydown wants to prevent
     if (event.defaultPrevented) {
       return;
     }
-    switch (event.key) {
+    switch (event.code) {
       case 'Backspace':
-        if (inputRef.current.value.length === 0 && values.length > 0) {
+        if (inputValue.length === 0 && values.length > 0) {
           removeItem(event, values.length - 1);
         }
         break;
       case 'Enter':
+      case 'NumpadEnter':
         if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) {
           addItem(event, inputValue, true);
         }
         break;
+      case 'ArrowLeft':
+        if (inputValue.length === 0 && values && values.length > 0) {
+          DomHandler.focus(listRef.current);
+        }
+        break;
+      case 'ArrowRight':
+        event.stopPropagation();
+        break;
       default:
         if (props.keyfilter) {
           KeyFilter.onKeyPress(event, props.keyfilter);
@@ -334,13 +390,14 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
   };
   var _onPaste = function onPaste(event) {
     if (props.separator) {
+      var separator = props.separator.replace('\\n', '\n').replace('\\r', '\r').replace('\\t', '\t');
       var pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
       if (props.keyfilter) {
         KeyFilter.onPaste(event, props.keyfilter);
       }
       if (pastedData) {
         var values = props.value || [];
-        var pastedValues = pastedData.split(props.separator);
+        var pastedValues = pastedData.split(separator);
         pastedValues = pastedValues.filter(function (val) {
           return (props.allowDuplicate || values.indexOf(val) === -1) && val.trim().length;
         });
@@ -349,8 +406,16 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
       }
     }
   };
+  var onContainerFocus = function onContainerFocus(event) {
+    setFocusedState(true);
+  };
+  var onContainerBlur = function onContainerBlur() {
+    setFocusedIndex(-1);
+    setFocusedState(false);
+  };
   var _onFocus = function onFocus(event) {
     setFocusedState(true);
+    setFocusedIndex(null);
     props.onFocus && props.onFocus(event);
   };
   var _onBlur = function onBlur(event) {
@@ -400,6 +465,9 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
       DomHandler.focus(inputRef.current, props.autoFocus);
     }
   });
+  var focusedOptionId = function focusedOptionId() {
+    return focusedIndex !== null ? "".concat(props.inputId, "_chips_item_").concat(focusedIndex) : null;
+  };
   var createRemoveIcon = function createRemoveIcon(value, index) {
     var iconProps = mergeProps({
       className: cx('removeTokenIcon'),
@@ -425,9 +493,19 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     var label = /*#__PURE__*/React.createElement("span", labelProps, content);
     var icon = createRemoveIcon(value, index);
     var tokenProps = mergeProps({
-      key: index,
-      className: cx('token'),
-      'data-p-highlight': true
+      key: "".concat(index, "_").concat(value),
+      id: props.inputId + '_chips_item_' + index,
+      role: 'option',
+      'aria-label': value,
+      className: cx('token', {
+        focusedIndex: focusedIndex,
+        index: index
+      }),
+      'aria-selected': true,
+      'aria-setsize': props.value.length,
+      'aria-posinset': index + 1,
+      'data-p-highlight': true,
+      'data-p-focused': focusedIndex === index
     }, ptm('token'));
     return /*#__PURE__*/React.createElement("li", tokenProps, label, icon);
   };
@@ -467,13 +545,24 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     var containerProps = mergeProps({
       ref: listRef,
       className: cx('container', {
-        focusedState: focusedState
+        isFilled: isFilled
       }),
       onClick: function onClick(e) {
         return onWrapperClick();
       },
+      onKeyDown: function onKeyDown(e) {
+        return onContainerKeyDown(e);
+      },
+      tabIndex: -1,
+      role: 'listbox',
+      'aria-orientation': 'horizontal',
+      'aria-labelledby': props.ariaLabelledby,
+      'aria-label': props.ariaLabel,
+      'aria-activedescendant': focusedState ? focusedOptionId() : undefined,
       'data-p-disabled': props.disabled,
-      'data-p-focus': focusedState
+      'data-p-focus': focusedState,
+      onFocus: onContainerFocus,
+      onBlur: onContainerBlur
     }, ptm('container'));
     return /*#__PURE__*/React.createElement("ul", containerProps, items, input);
   };
@@ -486,7 +575,8 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     ref: elementRef,
     className: classNames(props.className, cx('root', {
       isFilled: isFilled,
-      focusedState: focusedState
+      focusedState: focusedState,
+      disabled: props.disabled
     })),
     style: props.style
   }, ptm('root'));

package/chips/chips.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{PrimeReactContext as n}from"primereact/api";import{ComponentBase as t,useHandleStyle as r}from"primereact/componentbase";import{useMergeProps as o,useMountEffect as i}from"primereact/hooks";import{TimesCircleIcon as l}from"primereact/icons/timescircle";import{KeyFilter as a}from"primereact/keyfilter";import{Tooltip as u}from"primereact/tooltip";import{classNames as c,ObjectUtils as p,DomHandler as s,IconUtils as f}from"primereact/utils";function m(){return m=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},m.apply(this,arguments)}function d(e){return d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},d(e)}function y(e,n){if("object"!==d(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==d(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function v(e){var n=y(e,"string");return"symbol"===d(n)?n:String(n)}function h(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function b(e){if(Array.isArray(e))return h(e)}function g(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function O(e,n){if(e){if("string"==typeof e)return h(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?h(e,n):void 0}}function w(){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 k(e){return b(e)||g(e)||O(e)||w()}function x(e){if(Array.isArray(e))return e}function P(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,i,l,a=[],u=!0,c=!1;try{if(i=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;u=!1}else for(;!(u=(r=i.call(t)).done)&&(a.push(r.value),a.length!==n);u=!0);}catch(e){c=!0,o=e}finally{try{if(!u&&null!=t.return&&(l=t.return(),Object(l)!==l))return}finally{if(c)throw o}}return a}}function E(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var S=t.extend({defaultProps:{__TYPE:"Chips",addOnBlur:null,allowDuplicate:!0,ariaLabelledBy:null,autoFocus:!1,className:null,disabled:null,id:null,inputId:null,inputRef:null,itemTemplate:null,keyfilter:null,max:null,name:null,onAdd:null,onBlur:null,onChange:null,onFocus:null,onKeyDown:null,onRemove:null,placeholder:null,readOnly:!1,removable:!0,removeIcon:null,separator:null,style:null,tooltip:null,tooltipOptions:null,value:null,children:void 0},css:{classes:{removeTokenIcon:"p-chips-token-icon",label:"p-chips-token-label",token:"p-chips-token p-highlight",inputToken:"p-chips-input-token",container:function(e){return c("p-inputtext p-chips-multiple-container",{"p-disabled":e.props.disabled,"p-focus":e.focusedState})},root:function(e){return c("p-chips p-component p-inputwrapper",{"p-inputwrapper-filled":e.isFilled,"p-inputwrapper-focus":e.focusedState})}},styles:"\n@layer primereact {\n    .p-chips {\n        display: inline-flex;\n    }\n    \n    .p-chips-multiple-container {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        cursor: text;\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n    }\n    \n    .p-chips-token {\n        cursor: default;\n        display: inline-flex;\n        align-items: center;\n        flex: 0 0 auto;\n    }\n    \n    .p-chips-input-token {\n        flex: 1 1 auto;\n        display: inline-flex;\n    }\n    \n    .p-chips-token-icon {\n        cursor: pointer;\n    }\n    \n    .p-chips-input-token input {\n        border: 0 none;\n        outline: 0 none;\n        background-color: transparent;\n        margin: 0;\n        padding: 0;\n        box-shadow: none;\n        border-radius: 0;\n        width: 100%;\n    }\n    \n    .p-fluid .p-chips {\n        display: flex;\n    }\n    \n    .p-chips-icon-left,\n    .p-chips-icon-right {\n        position: relative;\n        display: inline-block;\n    }\n    \n    .p-chips-icon-left > i,\n    .p-chips-icon-right > i,\n    .p-chips-icon-left > svg,\n    .p-chips-icon-right > svg,\n    .p-chips-icon-left > .p-chips-prefix,\n    .p-chips-icon-right > .p-chips-suffix {\n        position: absolute;\n        top: 50%;\n        margin-top: -0.5rem;\n    }\n    \n    .p-fluid .p-chips-icon-left,\n    .p-fluid .p-chips-icon-right {\n        display: block;\n        width: 100%;\n    }\n}\n"}});function j(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function D(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?j(Object(t),!0).forEach((function(n){var r,o,i;r=e,i=t[n],(o=v(o=n))in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):j(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var I=e.memo(e.forwardRef((function(t,d){var y,v,h=o(),b=e.useContext(n),g=S.getProps(t,b),w=e.useState(!1),j=(v=2,x(y=w)||P(y,v)||O(y,v)||E()),I=j[0],A=j[1],R=S.setMetaData({props:g,state:{focused:I}}),T=R.ptm,N=R.cx;r(S.css.styles,R.isUnstyled,{name:"chips"});var C=e.useRef(null),F=e.useRef(null),B=e.useRef(g.inputRef),K=function(e,n){if(!g.disabled||!g.readOnly){var t=k(g.value),r=t.splice(n,1);Y(r,n)&&(g.onRemove&&g.onRemove({originalEvent:e,value:r}),g.onChange&&g.onChange({originalEvent:e,value:t,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:g.name,id:g.id,value:t}}))}},M=function(e,n,t){if(n&&n.trim().length){var r=g.value?k(g.value):[];if(g.allowDuplicate||-1===r.indexOf(n)){var o=!0;g.onAdd&&(o=g.onAdd({originalEvent:e,value:n})),!1!==o&&r.push(n)}U(e,r,t)}},_=function(e){var n=e.target.value,t=g.value||[];if(g.onKeyDown&&g.onKeyDown(e),!e.defaultPrevented)switch(e.key){case"Backspace":0===B.current.value.length&&t.length>0&&K(e,t.length-1);break;case"Enter":n&&n.trim().length&&(!g.max||g.max>t.length)&&M(e,n,!0);break;default:g.keyfilter&&a.onKeyPress(e,g.keyfilter),L()?e.preventDefault():","===g.separator&&(e.key===g.separator||s.isAndroid()&&229===e.which)&&M(e,n,!0)}},U=function(e,n,t){g.onChange&&g.onChange({originalEvent:e,value:n,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:g.name,id:g.id,value:n}}),B.current.value="",t&&e.preventDefault()},H=function(e){if(g.separator){var n=(e.clipboardData||window.clipboardData).getData("Text");if(g.keyfilter&&a.onPaste(e,g.keyfilter),n){var t=g.value||[],r=n.split(g.separator);r=r.filter((function(e){return(g.allowDuplicate||-1===t.indexOf(e))&&e.trim().length})),t=[].concat(k(t),k(r)),U(e,t,!0)}}},J=function(e){if(g.addOnBlur){var n=e.target.value,t=g.value||[];n&&n.trim().length&&(!g.max||g.max>t.length)&&M(e,n,!0)}A(!1),g.onBlur&&g.onBlur(e)},L=function(){return g.max&&g.value&&g.max===g.value.length},V=B.current&&B.current.value,X=e.useMemo((function(){return p.isNotEmpty(g.value)||p.isNotEmpty(V)}),[g.value,V]),Y=function(e,n){return p.getPropValue(g.removable,{value:e,index:n,props:g})};e.useImperativeHandle(d,(function(){return{props:g,focus:function(){return s.focus(B.current)},getElement:function(){return C.current},getInput:function(){return B.current}}})),e.useEffect((function(){p.combinedRefs(B,g.inputRef)}),[B,g.inputRef]),i((function(){g.autoFocus&&s.focus(B.current,g.autoFocus)}));var $,q,z,G,Q,W=function(n,t){var r=h({className:N("removeTokenIcon"),onClick:function(e){return K(e,t)},"aria-hidden":"true"},T("removeTokenIcon")),o=f.getJSXIcon(g.removeIcon||e.createElement(l,r),D({},r),{props:g});return g.disabled||g.readOnly||!Y(n,t)?null:o},Z=function(n,t){var r=g.itemTemplate?g.itemTemplate(n):n,o=h({className:N("label")},T("label")),i=e.createElement("span",o,r),l=W(n,t),a=h({key:t,className:N("token"),"data-p-highlight":!0},T("token"));return e.createElement("li",a,i,l)},ee=p.isNotEmpty(g.tooltip),ne=S.getOtherProps(g),te=p.reduceKeys(ne,s.ARIA_PROPS),re=(z=g.value?g.value.map(Z):null,$=h({className:N("inputToken")},T("inputToken")),q=h(D({id:g.inputId,ref:B,placeholder:g.placeholder,type:"text",name:g.name,disabled:g.disabled||L(),onKeyDown:function(e){return _(e)},onPaste:function(e){return H(e)},onFocus:function(e){return n=e,A(!0),void(g.onFocus&&g.onFocus(n));var n},onBlur:function(e){return J(e)},readOnly:g.readOnly},te),T("input")),G=e.createElement("li",$,e.createElement("input",q)),Q=h({ref:F,className:N("container",{focusedState:I}),onClick:function(e){s.focus(B.current)},"data-p-disabled":g.disabled,"data-p-focus":I},T("container")),e.createElement("ul",Q,z,G)),oe=h({id:g.id,ref:C,className:c(g.className,N("root",{isFilled:X,focusedState:I})),style:g.style},T("root"));return e.createElement(e.Fragment,null,e.createElement("div",oe,re),ee&&e.createElement(u,m({target:B,content:g.tooltip},g.tooltipOptions,{pt:T("tooltip")})))})));I.displayName="Chips";export{I as Chips};
+import*as e from"react";import{PrimeReactContext as n}from"primereact/api";import{ComponentBase as t,useHandleStyle as r}from"primereact/componentbase";import{useMergeProps as o,useMountEffect as i}from"primereact/hooks";import{TimesCircleIcon as a}from"primereact/icons/timescircle";import{KeyFilter as l}from"primereact/keyfilter";import{Tooltip as u}from"primereact/tooltip";import{classNames as c,ObjectUtils as p,DomHandler as s,IconUtils as f}from"primereact/utils";function d(){return d=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},d.apply(this,arguments)}function m(e){return m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},m(e)}function v(e,n){if("object"!==m(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==m(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function h(e){var n=v(e,"string");return"symbol"===m(n)?n:String(n)}function y(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function b(e){if(Array.isArray(e))return y(e)}function g(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function w(e,n){if(e){if("string"==typeof e)return y(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?y(e,n):void 0}}function k(){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 O(e){return b(e)||g(e)||w(e)||k()}function x(e){if(Array.isArray(e))return e}function P(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,i,a,l=[],u=!0,c=!1;try{if(i=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;u=!1}else for(;!(u=(r=i.call(t)).done)&&(l.push(r.value),l.length!==n);u=!0);}catch(e){c=!0,o=e}finally{try{if(!u&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(c)throw o}}return l}}function E(){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 S(e,n){return x(e)||P(e,n)||w(e,n)||E()}var j=t.extend({defaultProps:{__TYPE:"Chips",addOnBlur:null,allowDuplicate:!0,ariaLabelledBy:null,autoFocus:!1,className:null,disabled:null,id:null,inputId:null,inputRef:null,itemTemplate:null,keyfilter:null,max:null,name:null,onAdd:null,onBlur:null,onChange:null,onFocus:null,onKeyDown:null,onRemove:null,placeholder:null,readOnly:!1,removable:!0,removeIcon:null,separator:null,style:null,tooltip:null,tooltipOptions:null,value:null,children:void 0},css:{classes:{removeTokenIcon:"p-chips-token-icon",label:"p-chips-token-label",token:function(e){return c("p-chips-token",{"p-focus":e.focusedIndex===e.index})},inputToken:"p-chips-input-token",container:function(e){return c("p-inputtext p-chips-multiple-container",{"p-variant-filled":e.isFilled})},root:function(e){var n=e.focusedState;return c("p-chips p-component p-inputwrapper",{"p-inputwrapper-filled":e.isFilled,"p-inputwrapper-focus":n,"p-disabled":e.disabled,"p-focus":n})}},styles:"\n@layer primereact {\n    .p-chips {\n        display: inline-flex;\n    }\n    \n    .p-chips-multiple-container {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        cursor: text;\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n    }\n    \n    .p-chips-token {\n        cursor: default;\n        display: inline-flex;\n        align-items: center;\n        flex: 0 0 auto;\n    }\n    \n    .p-chips-input-token {\n        flex: 1 1 auto;\n        display: inline-flex;\n    }\n    \n    .p-chips-token-icon {\n        cursor: pointer;\n    }\n    \n    .p-chips-input-token input {\n        border: 0 none;\n        outline: 0 none;\n        background-color: transparent;\n        margin: 0;\n        padding: 0;\n        box-shadow: none;\n        border-radius: 0;\n        width: 100%;\n    }\n    \n    .p-fluid .p-chips {\n        display: flex;\n    }\n    \n    .p-chips-icon-left,\n    .p-chips-icon-right {\n        position: relative;\n        display: inline-block;\n    }\n    \n    .p-chips-icon-left > i,\n    .p-chips-icon-right > i,\n    .p-chips-icon-left > svg,\n    .p-chips-icon-right > svg,\n    .p-chips-icon-left > .p-chips-prefix,\n    .p-chips-icon-right > .p-chips-suffix {\n        position: absolute;\n        top: 50%;\n        margin-top: -0.5rem;\n    }\n    \n    .p-fluid .p-chips-icon-left,\n    .p-fluid .p-chips-icon-right {\n        display: block;\n        width: 100%;\n    }\n}\n"}});function D(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function I(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?D(Object(t),!0).forEach((function(n){var r,o,i;r=e,i=t[n],(o=h(o=n))in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):D(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var A=e.memo(e.forwardRef((function(t,m){var v=o(),h=e.useContext(n),y=j.getProps(t,h),b=S(e.useState(!1),2),g=b[0],w=b[1],k=S(e.useState(null),2),x=k[0],P=k[1],E=j.setMetaData({props:y,state:{focused:g}}),D=E.ptm,A=E.cx;r(j.css.styles,E.isUnstyled,{name:"chips"});var R=e.useRef(null),N=e.useRef(null),T=e.useRef(y.inputRef),F=function(e,n){if(!y.disabled||!y.readOnly){var t=O(y.value),r=t.splice(n,1);q(r,n)&&(y.onRemove&&y.onRemove({originalEvent:e,value:r}),y.onChange&&y.onChange({originalEvent:e,value:t,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:y.name,id:y.id,value:t}}))}},C=function(e,n,t){if(n&&n.trim().length){var r=y.value?O(y.value):[];if(y.allowDuplicate||-1===r.indexOf(n)){var o=!0;y.onAdd&&(o=y.onAdd({originalEvent:e,value:n})),!1!==o&&r.push(n)}z(e,r,t)}},B=function(e){switch(e.code){case"ArrowLeft":_();break;case"ArrowRight":K();break;case"Backspace":L(e)}},_=function(){var e=x;0===T.current.value.length&&y.value&&y.value.length>0&&(e=null===e?y.value.length-1:e-1)<0&&(e=0),P(e)},K=function(){var e=x;0===T.current.value.length&&y.value&&y.value.length>0&&(e===y.value.length-1?(e=null,T.current.focus()):e++),P(e)},L=function(e){null!==x&&F(e,x)},M=function(e){var n=e.target.value,t=y.value||[];if(y.onKeyDown&&y.onKeyDown(e),!e.defaultPrevented)switch(e.code){case"Backspace":0===n.length&&t.length>0&&F(e,t.length-1);break;case"Enter":case"NumpadEnter":n&&n.trim().length&&(!y.max||y.max>t.length)&&C(e,n,!0);break;case"ArrowLeft":0===n.length&&t&&t.length>0&&s.focus(N.current);break;case"ArrowRight":e.stopPropagation();break;default:y.keyfilter&&l.onKeyPress(e,y.keyfilter),X()?e.preventDefault():","===y.separator&&(e.key===y.separator||s.isAndroid()&&229===e.which)&&C(e,n,!0)}},z=function(e,n,t){y.onChange&&y.onChange({originalEvent:e,value:n,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:y.name,id:y.id,value:n}}),T.current.value="",t&&e.preventDefault()},U=function(e){if(y.separator){var n=y.separator.replace("\\n","\n").replace("\\r","\r").replace("\\t","\t"),t=(e.clipboardData||window.clipboardData).getData("Text");if(y.keyfilter&&l.onPaste(e,y.keyfilter),t){var r=y.value||[],o=t.split(n);o=o.filter((function(e){return(y.allowDuplicate||-1===r.indexOf(e))&&e.trim().length})),r=[].concat(O(r),O(o)),z(e,r,!0)}}},H=function(e){w(!0)},J=function(){P(-1),w(!1)},V=function(e){if(y.addOnBlur){var n=e.target.value,t=y.value||[];n&&n.trim().length&&(!y.max||y.max>t.length)&&C(e,n,!0)}w(!1),y.onBlur&&y.onBlur(e)},X=function(){return y.max&&y.value&&y.max===y.value.length},Y=T.current&&T.current.value,$=e.useMemo((function(){return p.isNotEmpty(y.value)||p.isNotEmpty(Y)}),[y.value,Y]),q=function(e,n){return p.getPropValue(y.removable,{value:e,index:n,props:y})};e.useImperativeHandle(m,(function(){return{props:y,focus:function(){return s.focus(T.current)},getElement:function(){return R.current},getInput:function(){return T.current}}})),e.useEffect((function(){p.combinedRefs(T,y.inputRef)}),[T,y.inputRef]),i((function(){y.autoFocus&&s.focus(T.current,y.autoFocus)}));var G,Q,W,Z,ee,ne=function(n,t){var r=v({className:A("removeTokenIcon"),onClick:function(e){return F(e,t)},"aria-hidden":"true"},D("removeTokenIcon")),o=f.getJSXIcon(y.removeIcon||e.createElement(a,r),I({},r),{props:y});return y.disabled||y.readOnly||!q(n,t)?null:o},te=function(n,t){var r=y.itemTemplate?y.itemTemplate(n):n,o=v({className:A("label")},D("label")),i=e.createElement("span",o,r),a=ne(n,t),l=v({key:"".concat(t,"_").concat(n),id:y.inputId+"_chips_item_"+t,role:"option","aria-label":n,className:A("token",{focusedIndex:x,index:t}),"aria-selected":!0,"aria-setsize":y.value.length,"aria-posinset":t+1,"data-p-highlight":!0,"data-p-focused":x===t},D("token"));return e.createElement("li",l,i,a)},re=p.isNotEmpty(y.tooltip),oe=j.getOtherProps(y),ie=p.reduceKeys(oe,s.ARIA_PROPS),ae=(W=y.value?y.value.map(te):null,G=v({className:A("inputToken")},D("inputToken")),Q=v(I({id:y.inputId,ref:T,placeholder:y.placeholder,type:"text",name:y.name,disabled:y.disabled||X(),onKeyDown:function(e){return M(e)},onPaste:function(e){return U(e)},onFocus:function(e){return n=e,w(!0),P(null),void(y.onFocus&&y.onFocus(n));var n},onBlur:function(e){return V(e)},readOnly:y.readOnly},ie),D("input")),Z=e.createElement("li",G,e.createElement("input",Q)),ee=v({ref:N,className:A("container",{isFilled:$}),onClick:function(e){s.focus(T.current)},onKeyDown:function(e){return B(e)},tabIndex:-1,role:"listbox","aria-orientation":"horizontal","aria-labelledby":y.ariaLabelledby,"aria-label":y.ariaLabel,"aria-activedescendant":g?null!==x?"".concat(y.inputId,"_chips_item_").concat(x):null:void 0,"data-p-disabled":y.disabled,"data-p-focus":g,onFocus:H,onBlur:J},D("container")),e.createElement("ul",ee,W,Z)),le=v({id:y.id,ref:R,className:c(y.className,A("root",{isFilled:$,focusedState:g,disabled:y.disabled})),style:y.style},D("root"));return e.createElement(e.Fragment,null,e.createElement("div",le,ae),re&&e.createElement(u,d({target:T,content:y.tooltip},y.tooltipOptions,{pt:D("tooltip")})))})));A.displayName="Chips";export{A as Chips};

package/chips/chips.js

@@ -153,22 +153,29 @@ this.primereact.chips = (function (exports, React, api, componentbase, hooks, ti
   var classes = {
     removeTokenIcon: 'p-chips-token-icon',
     label: 'p-chips-token-label',
-    token: 'p-chips-token p-highlight',
+    token: function token(_ref) {
+      var focusedIndex = _ref.focusedIndex,
+        index = _ref.index;
+      return utils.classNames('p-chips-token', {
+        'p-focus': focusedIndex === index
+      });
+    },
     inputToken: 'p-chips-input-token',
-    container: function container(_ref) {
-      var props = _ref.props,
-        focusedState = _ref.focusedState;
+    container: function container(_ref2) {
+      var isFilled = _ref2.isFilled;
       return utils.classNames('p-inputtext p-chips-multiple-container', {
-        'p-disabled': props.disabled,
-        'p-focus': focusedState
+        'p-variant-filled': isFilled
       });
     },
-    root: function root(_ref2) {
-      var isFilled = _ref2.isFilled,
-        focusedState = _ref2.focusedState;
+    root: function root(_ref3) {
+      var isFilled = _ref3.isFilled,
+        focusedState = _ref3.focusedState,
+        disabled = _ref3.disabled;
       return utils.classNames('p-chips p-component p-inputwrapper', {
         'p-inputwrapper-filled': isFilled,
-        'p-inputwrapper-focus': focusedState
+        'p-inputwrapper-focus': focusedState,
+        'p-disabled': disabled,
+        'p-focus': focusedState
       });
     }
   };
@@ -221,6 +228,10 @@ this.primereact.chips = (function (exports, React, api, componentbase, hooks, ti
       _React$useState2 = _slicedToArray(_React$useState, 2),
       focusedState = _React$useState2[0],
       setFocusedState = _React$useState2[1];
+    var _React$useState3 = React__namespace.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      focusedIndex = _React$useState4[0],
+      setFocusedIndex = _React$useState4[1];
     var _ChipsBase$setMetaDat = ChipsBase.setMetaData({
         props: props,
         state: {
@@ -290,26 +301,71 @@ this.primereact.chips = (function (exports, React, api, componentbase, hooks, ti
     var onWrapperClick = function onWrapperClick() {
       utils.DomHandler.focus(inputRef.current);
     };
+    var onContainerKeyDown = function onContainerKeyDown(event) {
+      switch (event.code) {
+        case 'ArrowLeft':
+          onArrowLeftKeyOn();
+          break;
+        case 'ArrowRight':
+          onArrowRightKeyOn();
+          break;
+        case 'Backspace':
+          onBackspaceKeyOn(event);
+          break;
+      }
+    };
+    var onArrowLeftKeyOn = function onArrowLeftKeyOn() {
+      var focusIndex = focusedIndex;
+      if (inputRef.current.value.length === 0 && props.value && props.value.length > 0) {
+        focusIndex = focusIndex === null ? props.value.length - 1 : focusIndex - 1;
+        if (focusIndex < 0) focusIndex = 0;
+      }
+      setFocusedIndex(focusIndex);
+    };
+    var onArrowRightKeyOn = function onArrowRightKeyOn() {
+      var focusIndex = focusedIndex;
+      if (inputRef.current.value.length === 0 && props.value && props.value.length > 0) {
+        if (focusIndex === props.value.length - 1) {
+          focusIndex = null;
+          inputRef.current.focus();
+        } else {
+          focusIndex++;
+        }
+      }
+      setFocusedIndex(focusIndex);
+    };
+    var onBackspaceKeyOn = function onBackspaceKeyOn(event) {
+      if (focusedIndex !== null) {
+        removeItem(event, focusedIndex);
+      }
+    };
     var _onKeyDown = function onKeyDown(event) {
       var inputValue = event.target.value;
       var values = props.value || [];
       props.onKeyDown && props.onKeyDown(event);
-
-      // do not continue if the user defined keydown wants to prevent
       if (event.defaultPrevented) {
         return;
       }
-      switch (event.key) {
+      switch (event.code) {
         case 'Backspace':
-          if (inputRef.current.value.length === 0 && values.length > 0) {
+          if (inputValue.length === 0 && values.length > 0) {
             removeItem(event, values.length - 1);
           }
           break;
         case 'Enter':
+        case 'NumpadEnter':
           if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) {
             addItem(event, inputValue, true);
           }
           break;
+        case 'ArrowLeft':
+          if (inputValue.length === 0 && values && values.length > 0) {
+            utils.DomHandler.focus(listRef.current);
+          }
+          break;
+        case 'ArrowRight':
+          event.stopPropagation();
+          break;
         default:
           if (props.keyfilter) {
             keyfilter.KeyFilter.onKeyPress(event, props.keyfilter);
@@ -348,13 +404,14 @@ this.primereact.chips = (function (exports, React, api, componentbase, hooks, ti
     };
     var _onPaste = function onPaste(event) {
       if (props.separator) {
+        var separator = props.separator.replace('\\n', '\n').replace('\\r', '\r').replace('\\t', '\t');
         var pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
         if (props.keyfilter) {
           keyfilter.KeyFilter.onPaste(event, props.keyfilter);
         }
         if (pastedData) {
           var values = props.value || [];
-          var pastedValues = pastedData.split(props.separator);
+          var pastedValues = pastedData.split(separator);
           pastedValues = pastedValues.filter(function (val) {
             return (props.allowDuplicate || values.indexOf(val) === -1) && val.trim().length;
           });
@@ -363,8 +420,16 @@ this.primereact.chips = (function (exports, React, api, componentbase, hooks, ti
         }
       }
     };
+    var onContainerFocus = function onContainerFocus(event) {
+      setFocusedState(true);
+    };
+    var onContainerBlur = function onContainerBlur() {
+      setFocusedIndex(-1);
+      setFocusedState(false);
+    };
     var _onFocus = function onFocus(event) {
       setFocusedState(true);
+      setFocusedIndex(null);
       props.onFocus && props.onFocus(event);
     };
     var _onBlur = function onBlur(event) {
@@ -414,6 +479,9 @@ this.primereact.chips = (function (exports, React, api, componentbase, hooks, ti
         utils.DomHandler.focus(inputRef.current, props.autoFocus);
       }
     });
+    var focusedOptionId = function focusedOptionId() {
+      return focusedIndex !== null ? "".concat(props.inputId, "_chips_item_").concat(focusedIndex) : null;
+    };
     var createRemoveIcon = function createRemoveIcon(value, index) {
       var iconProps = mergeProps({
         className: cx('removeTokenIcon'),
@@ -439,9 +507,19 @@ this.primereact.chips = (function (exports, React, api, componentbase, hooks, ti
       var label = /*#__PURE__*/React__namespace.createElement("span", labelProps, content);
       var icon = createRemoveIcon(value, index);
       var tokenProps = mergeProps({
-        key: index,
-        className: cx('token'),
-        'data-p-highlight': true
+        key: "".concat(index, "_").concat(value),
+        id: props.inputId + '_chips_item_' + index,
+        role: 'option',
+        'aria-label': value,
+        className: cx('token', {
+          focusedIndex: focusedIndex,
+          index: index
+        }),
+        'aria-selected': true,
+        'aria-setsize': props.value.length,
+        'aria-posinset': index + 1,
+        'data-p-highlight': true,
+        'data-p-focused': focusedIndex === index
       }, ptm('token'));
       return /*#__PURE__*/React__namespace.createElement("li", tokenProps, label, icon);
     };
@@ -481,13 +559,24 @@ this.primereact.chips = (function (exports, React, api, componentbase, hooks, ti
       var containerProps = mergeProps({
         ref: listRef,
         className: cx('container', {
-          focusedState: focusedState
+          isFilled: isFilled
         }),
         onClick: function onClick(e) {
           return onWrapperClick();
         },
+        onKeyDown: function onKeyDown(e) {
+          return onContainerKeyDown(e);
+        },
+        tabIndex: -1,
+        role: 'listbox',
+        'aria-orientation': 'horizontal',
+        'aria-labelledby': props.ariaLabelledby,
+        'aria-label': props.ariaLabel,
+        'aria-activedescendant': focusedState ? focusedOptionId() : undefined,
         'data-p-disabled': props.disabled,
-        'data-p-focus': focusedState
+        'data-p-focus': focusedState,
+        onFocus: onContainerFocus,
+        onBlur: onContainerBlur
       }, ptm('container'));
       return /*#__PURE__*/React__namespace.createElement("ul", containerProps, items, input);
     };
@@ -500,7 +589,8 @@ this.primereact.chips = (function (exports, React, api, componentbase, hooks, ti
       ref: elementRef,
       className: utils.classNames(props.className, cx('root', {
         isFilled: isFilled,
-        focusedState: focusedState
+        focusedState: focusedState,
+        disabled: props.disabled
       })),
       style: props.style
     }, ptm('root'));

package/chips/chips.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.chips=function(e,n,t,r,o,i,l,a,u){"use strict";function c(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var p=c(n);function s(){return s=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},s.apply(this,arguments)}function f(e){return f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},f(e)}function d(e,n){if("object"!==f(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==f(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function m(e){var n=d(e,"string");return"symbol"===f(n)?n:String(n)}function y(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function v(e){if(Array.isArray(e))return y(e)}function h(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function b(e,n){if(e){if("string"==typeof e)return y(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?y(e,n):void 0}}function g(){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 O(e){return v(e)||h(e)||b(e)||g()}function w(e){if(Array.isArray(e))return e}function k(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,i,l,a=[],u=!0,c=!1;try{if(i=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;u=!1}else for(;!(u=(r=i.call(t)).done)&&(a.push(r.value),a.length!==n);u=!0);}catch(e){c=!0,o=e}finally{try{if(!u&&null!=t.return&&(l=t.return(),Object(l)!==l))return}finally{if(c)throw o}}return a}}function j(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var P=r.ComponentBase.extend({defaultProps:{__TYPE:"Chips",addOnBlur:null,allowDuplicate:!0,ariaLabelledBy:null,autoFocus:!1,className:null,disabled:null,id:null,inputId:null,inputRef:null,itemTemplate:null,keyfilter:null,max:null,name:null,onAdd:null,onBlur:null,onChange:null,onFocus:null,onKeyDown:null,onRemove:null,placeholder:null,readOnly:!1,removable:!0,removeIcon:null,separator:null,style:null,tooltip:null,tooltipOptions:null,value:null,children:void 0},css:{classes:{removeTokenIcon:"p-chips-token-icon",label:"p-chips-token-label",token:"p-chips-token p-highlight",inputToken:"p-chips-input-token",container:function(e){return u.classNames("p-inputtext p-chips-multiple-container",{"p-disabled":e.props.disabled,"p-focus":e.focusedState})},root:function(e){return u.classNames("p-chips p-component p-inputwrapper",{"p-inputwrapper-filled":e.isFilled,"p-inputwrapper-focus":e.focusedState})}},styles:"\n@layer primereact {\n    .p-chips {\n        display: inline-flex;\n    }\n    \n    .p-chips-multiple-container {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        cursor: text;\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n    }\n    \n    .p-chips-token {\n        cursor: default;\n        display: inline-flex;\n        align-items: center;\n        flex: 0 0 auto;\n    }\n    \n    .p-chips-input-token {\n        flex: 1 1 auto;\n        display: inline-flex;\n    }\n    \n    .p-chips-token-icon {\n        cursor: pointer;\n    }\n    \n    .p-chips-input-token input {\n        border: 0 none;\n        outline: 0 none;\n        background-color: transparent;\n        margin: 0;\n        padding: 0;\n        box-shadow: none;\n        border-radius: 0;\n        width: 100%;\n    }\n    \n    .p-fluid .p-chips {\n        display: flex;\n    }\n    \n    .p-chips-icon-left,\n    .p-chips-icon-right {\n        position: relative;\n        display: inline-block;\n    }\n    \n    .p-chips-icon-left > i,\n    .p-chips-icon-right > i,\n    .p-chips-icon-left > svg,\n    .p-chips-icon-right > svg,\n    .p-chips-icon-left > .p-chips-prefix,\n    .p-chips-icon-right > .p-chips-suffix {\n        position: absolute;\n        top: 50%;\n        margin-top: -0.5rem;\n    }\n    \n    .p-fluid .p-chips-icon-left,\n    .p-fluid .p-chips-icon-right {\n        display: block;\n        width: 100%;\n    }\n}\n"}});function x(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function D(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?x(Object(t),!0).forEach((function(n){var r,o,i;r=e,i=t[n],(o=m(o=n))in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):x(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var E=p.memo(p.forwardRef((function(e,n){var c,f,d=o.useMergeProps(),m=p.useContext(t.PrimeReactContext),y=P.getProps(e,m),v=p.useState(!1),h=(f=2,w(c=v)||k(c,f)||b(c,f)||j()),g=h[0],x=h[1],E=P.setMetaData({props:y,state:{focused:g}}),S=E.ptm,I=E.cx;r.useHandleStyle(P.css.styles,E.isUnstyled,{name:"chips"});var N=p.useRef(null),R=p.useRef(null),T=p.useRef(y.inputRef),A=function(e,n){if(!y.disabled||!y.readOnly){var t=O(y.value),r=t.splice(n,1);z(r,n)&&(y.onRemove&&y.onRemove({originalEvent:e,value:r}),y.onChange&&y.onChange({originalEvent:e,value:t,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:y.name,id:y.id,value:t}}))}},C=function(e,n,t){if(n&&n.trim().length){var r=y.value?O(y.value):[];if(y.allowDuplicate||-1===r.indexOf(n)){var o=!0;y.onAdd&&(o=y.onAdd({originalEvent:e,value:n})),!1!==o&&r.push(n)}B(e,r,t)}},F=function(e){var n=e.target.value,t=y.value||[];if(y.onKeyDown&&y.onKeyDown(e),!e.defaultPrevented)switch(e.key){case"Backspace":0===T.current.value.length&&t.length>0&&A(e,t.length-1);break;case"Enter":n&&n.trim().length&&(!y.max||y.max>t.length)&&C(e,n,!0);break;default:y.keyfilter&&l.KeyFilter.onKeyPress(e,y.keyfilter),H()?e.preventDefault():","===y.separator&&(e.key===y.separator||u.DomHandler.isAndroid()&&229===e.which)&&C(e,n,!0)}},B=function(e,n,t){y.onChange&&y.onChange({originalEvent:e,value:n,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:y.name,id:y.id,value:n}}),T.current.value="",t&&e.preventDefault()},U=function(e){if(y.separator){var n=(e.clipboardData||window.clipboardData).getData("Text");if(y.keyfilter&&l.KeyFilter.onPaste(e,y.keyfilter),n){var t=y.value||[],r=n.split(y.separator);r=r.filter((function(e){return(y.allowDuplicate||-1===t.indexOf(e))&&e.trim().length})),t=[].concat(O(t),O(r)),B(e,t,!0)}}},K=function(e){if(y.addOnBlur){var n=e.target.value,t=y.value||[];n&&n.trim().length&&(!y.max||y.max>t.length)&&C(e,n,!0)}x(!1),y.onBlur&&y.onBlur(e)},H=function(){return y.max&&y.value&&y.max===y.value.length},M=T.current&&T.current.value,_=p.useMemo((function(){return u.ObjectUtils.isNotEmpty(y.value)||u.ObjectUtils.isNotEmpty(M)}),[y.value,M]),z=function(e,n){return u.ObjectUtils.getPropValue(y.removable,{value:e,index:n,props:y})};p.useImperativeHandle(n,(function(){return{props:y,focus:function(){return u.DomHandler.focus(T.current)},getElement:function(){return N.current},getInput:function(){return T.current}}})),p.useEffect((function(){u.ObjectUtils.combinedRefs(T,y.inputRef)}),[T,y.inputRef]),o.useMountEffect((function(){y.autoFocus&&u.DomHandler.focus(T.current,y.autoFocus)}));var J,L,V,X,Y,$=function(e,n){var t=d({className:I("removeTokenIcon"),onClick:function(e){return A(e,n)},"aria-hidden":"true"},S("removeTokenIcon")),r=u.IconUtils.getJSXIcon(y.removeIcon||p.createElement(i.TimesCircleIcon,t),D({},t),{props:y});return y.disabled||y.readOnly||!z(e,n)?null:r},q=function(e,n){var t=y.itemTemplate?y.itemTemplate(e):e,r=d({className:I("label")},S("label")),o=p.createElement("span",r,t),i=$(e,n),l=d({key:n,className:I("token"),"data-p-highlight":!0},S("token"));return p.createElement("li",l,o,i)},G=u.ObjectUtils.isNotEmpty(y.tooltip),Q=P.getOtherProps(y),W=u.ObjectUtils.reduceKeys(Q,u.DomHandler.ARIA_PROPS),Z=(V=y.value?y.value.map(q):null,J=d({className:I("inputToken")},S("inputToken")),L=d(D({id:y.inputId,ref:T,placeholder:y.placeholder,type:"text",name:y.name,disabled:y.disabled||H(),onKeyDown:function(e){return F(e)},onPaste:function(e){return U(e)},onFocus:function(e){return n=e,x(!0),void(y.onFocus&&y.onFocus(n));var n},onBlur:function(e){return K(e)},readOnly:y.readOnly},W),S("input")),X=p.createElement("li",J,p.createElement("input",L)),Y=d({ref:R,className:I("container",{focusedState:g}),onClick:function(e){u.DomHandler.focus(T.current)},"data-p-disabled":y.disabled,"data-p-focus":g},S("container")),p.createElement("ul",Y,V,X)),ee=d({id:y.id,ref:N,className:u.classNames(y.className,I("root",{isFilled:_,focusedState:g})),style:y.style},S("root"));return p.createElement(p.Fragment,null,p.createElement("div",ee,Z),G&&p.createElement(a.Tooltip,s({target:T,content:y.tooltip},y.tooltipOptions,{pt:S("tooltip")})))})));return E.displayName="Chips",e.Chips=E,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.icons.timescircle,primereact.keyfilter,primereact.tooltip,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.chips=function(e,n,t,r,o,i,a,l,u){"use strict";function c(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var s=c(n);function p(){return p=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},p.apply(this,arguments)}function f(e){return f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},f(e)}function d(e,n){if("object"!==f(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==f(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function m(e){var n=d(e,"string");return"symbol"===f(n)?n:String(n)}function v(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function b(e){if(Array.isArray(e))return v(e)}function y(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function h(e,n){if(e){if("string"==typeof e)return v(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?v(e,n):void 0}}function g(){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 O(e){return b(e)||y(e)||h(e)||g()}function w(e){if(Array.isArray(e))return e}function k(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,i,a,l=[],u=!0,c=!1;try{if(i=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;u=!1}else for(;!(u=(r=i.call(t)).done)&&(l.push(r.value),l.length!==n);u=!0);}catch(e){c=!0,o=e}finally{try{if(!u&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(c)throw o}}return l}}function x(){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 j(e,n){return w(e)||k(e,n)||h(e,n)||x()}var P=r.ComponentBase.extend({defaultProps:{__TYPE:"Chips",addOnBlur:null,allowDuplicate:!0,ariaLabelledBy:null,autoFocus:!1,className:null,disabled:null,id:null,inputId:null,inputRef:null,itemTemplate:null,keyfilter:null,max:null,name:null,onAdd:null,onBlur:null,onChange:null,onFocus:null,onKeyDown:null,onRemove:null,placeholder:null,readOnly:!1,removable:!0,removeIcon:null,separator:null,style:null,tooltip:null,tooltipOptions:null,value:null,children:void 0},css:{classes:{removeTokenIcon:"p-chips-token-icon",label:"p-chips-token-label",token:function(e){return u.classNames("p-chips-token",{"p-focus":e.focusedIndex===e.index})},inputToken:"p-chips-input-token",container:function(e){return u.classNames("p-inputtext p-chips-multiple-container",{"p-variant-filled":e.isFilled})},root:function(e){var n=e.focusedState;return u.classNames("p-chips p-component p-inputwrapper",{"p-inputwrapper-filled":e.isFilled,"p-inputwrapper-focus":n,"p-disabled":e.disabled,"p-focus":n})}},styles:"\n@layer primereact {\n    .p-chips {\n        display: inline-flex;\n    }\n    \n    .p-chips-multiple-container {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        cursor: text;\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n    }\n    \n    .p-chips-token {\n        cursor: default;\n        display: inline-flex;\n        align-items: center;\n        flex: 0 0 auto;\n    }\n    \n    .p-chips-input-token {\n        flex: 1 1 auto;\n        display: inline-flex;\n    }\n    \n    .p-chips-token-icon {\n        cursor: pointer;\n    }\n    \n    .p-chips-input-token input {\n        border: 0 none;\n        outline: 0 none;\n        background-color: transparent;\n        margin: 0;\n        padding: 0;\n        box-shadow: none;\n        border-radius: 0;\n        width: 100%;\n    }\n    \n    .p-fluid .p-chips {\n        display: flex;\n    }\n    \n    .p-chips-icon-left,\n    .p-chips-icon-right {\n        position: relative;\n        display: inline-block;\n    }\n    \n    .p-chips-icon-left > i,\n    .p-chips-icon-right > i,\n    .p-chips-icon-left > svg,\n    .p-chips-icon-right > svg,\n    .p-chips-icon-left > .p-chips-prefix,\n    .p-chips-icon-right > .p-chips-suffix {\n        position: absolute;\n        top: 50%;\n        margin-top: -0.5rem;\n    }\n    \n    .p-fluid .p-chips-icon-left,\n    .p-fluid .p-chips-icon-right {\n        display: block;\n        width: 100%;\n    }\n}\n"}});function D(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function E(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?D(Object(t),!0).forEach((function(n){var r,o,i;r=e,i=t[n],(o=m(o=n))in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):D(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var S=s.memo(s.forwardRef((function(e,n){var c=o.useMergeProps(),f=s.useContext(t.PrimeReactContext),d=P.getProps(e,f),m=j(s.useState(!1),2),v=m[0],b=m[1],y=j(s.useState(null),2),h=y[0],g=y[1],w=P.setMetaData({props:d,state:{focused:v}}),k=w.ptm,x=w.cx;r.useHandleStyle(P.css.styles,w.isUnstyled,{name:"chips"});var D=s.useRef(null),S=s.useRef(null),I=s.useRef(d.inputRef),A=function(e,n){if(!d.disabled||!d.readOnly){var t=O(d.value),r=t.splice(n,1);V(r,n)&&(d.onRemove&&d.onRemove({originalEvent:e,value:r}),d.onChange&&d.onChange({originalEvent:e,value:t,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:d.name,id:d.id,value:t}}))}},N=function(e,n,t){if(n&&n.trim().length){var r=d.value?O(d.value):[];if(d.allowDuplicate||-1===r.indexOf(n)){var o=!0;d.onAdd&&(o=d.onAdd({originalEvent:e,value:n})),!1!==o&&r.push(n)}B(e,r,t)}},R=function(e){switch(e.code){case"ArrowLeft":T();break;case"ArrowRight":C();break;case"Backspace":F(e)}},T=function(){var e=h;0===I.current.value.length&&d.value&&d.value.length>0&&(e=null===e?d.value.length-1:e-1)<0&&(e=0),g(e)},C=function(){var e=h;0===I.current.value.length&&d.value&&d.value.length>0&&(e===d.value.length-1?(e=null,I.current.focus()):e++),g(e)},F=function(e){null!==h&&A(e,h)},_=function(e){var n=e.target.value,t=d.value||[];if(d.onKeyDown&&d.onKeyDown(e),!e.defaultPrevented)switch(e.code){case"Backspace":0===n.length&&t.length>0&&A(e,t.length-1);break;case"Enter":case"NumpadEnter":n&&n.trim().length&&(!d.max||d.max>t.length)&&N(e,n,!0);break;case"ArrowLeft":0===n.length&&t&&t.length>0&&u.DomHandler.focus(S.current);break;case"ArrowRight":e.stopPropagation();break;default:d.keyfilter&&a.KeyFilter.onKeyPress(e,d.keyfilter),L()?e.preventDefault():","===d.separator&&(e.key===d.separator||u.DomHandler.isAndroid()&&229===e.which)&&N(e,n,!0)}},B=function(e,n,t){d.onChange&&d.onChange({originalEvent:e,value:n,stopPropagation:function(){e.stopPropagation()},preventDefault:function(){e.preventDefault()},target:{name:d.name,id:d.id,value:n}}),I.current.value="",t&&e.preventDefault()},K=function(e){if(d.separator){var n=d.separator.replace("\\n","\n").replace("\\r","\r").replace("\\t","\t"),t=(e.clipboardData||window.clipboardData).getData("Text");if(d.keyfilter&&a.KeyFilter.onPaste(e,d.keyfilter),t){var r=d.value||[],o=t.split(n);o=o.filter((function(e){return(d.allowDuplicate||-1===r.indexOf(e))&&e.trim().length})),r=[].concat(O(r),O(o)),B(e,r,!0)}}},U=function(e){b(!0)},H=function(){g(-1),b(!1)},M=function(e){if(d.addOnBlur){var n=e.target.value,t=d.value||[];n&&n.trim().length&&(!d.max||d.max>t.length)&&N(e,n,!0)}b(!1),d.onBlur&&d.onBlur(e)},L=function(){return d.max&&d.value&&d.max===d.value.length},z=I.current&&I.current.value,J=s.useMemo((function(){return u.ObjectUtils.isNotEmpty(d.value)||u.ObjectUtils.isNotEmpty(z)}),[d.value,z]),V=function(e,n){return u.ObjectUtils.getPropValue(d.removable,{value:e,index:n,props:d})};s.useImperativeHandle(n,(function(){return{props:d,focus:function(){return u.DomHandler.focus(I.current)},getElement:function(){return D.current},getInput:function(){return I.current}}})),s.useEffect((function(){u.ObjectUtils.combinedRefs(I,d.inputRef)}),[I,d.inputRef]),o.useMountEffect((function(){d.autoFocus&&u.DomHandler.focus(I.current,d.autoFocus)}));var X,Y,$,q,G,Q=function(e,n){var t=c({className:x("removeTokenIcon"),onClick:function(e){return A(e,n)},"aria-hidden":"true"},k("removeTokenIcon")),r=u.IconUtils.getJSXIcon(d.removeIcon||s.createElement(i.TimesCircleIcon,t),E({},t),{props:d});return d.disabled||d.readOnly||!V(e,n)?null:r},W=function(e,n){var t=d.itemTemplate?d.itemTemplate(e):e,r=c({className:x("label")},k("label")),o=s.createElement("span",r,t),i=Q(e,n),a=c({key:"".concat(n,"_").concat(e),id:d.inputId+"_chips_item_"+n,role:"option","aria-label":e,className:x("token",{focusedIndex:h,index:n}),"aria-selected":!0,"aria-setsize":d.value.length,"aria-posinset":n+1,"data-p-highlight":!0,"data-p-focused":h===n},k("token"));return s.createElement("li",a,o,i)},Z=u.ObjectUtils.isNotEmpty(d.tooltip),ee=P.getOtherProps(d),ne=u.ObjectUtils.reduceKeys(ee,u.DomHandler.ARIA_PROPS),te=($=d.value?d.value.map(W):null,X=c({className:x("inputToken")},k("inputToken")),Y=c(E({id:d.inputId,ref:I,placeholder:d.placeholder,type:"text",name:d.name,disabled:d.disabled||L(),onKeyDown:function(e){return _(e)},onPaste:function(e){return K(e)},onFocus:function(e){return n=e,b(!0),g(null),void(d.onFocus&&d.onFocus(n));var n},onBlur:function(e){return M(e)},readOnly:d.readOnly},ne),k("input")),q=s.createElement("li",X,s.createElement("input",Y)),G=c({ref:S,className:x("container",{isFilled:J}),onClick:function(e){u.DomHandler.focus(I.current)},onKeyDown:function(e){return R(e)},tabIndex:-1,role:"listbox","aria-orientation":"horizontal","aria-labelledby":d.ariaLabelledby,"aria-label":d.ariaLabel,"aria-activedescendant":v?null!==h?"".concat(d.inputId,"_chips_item_").concat(h):null:void 0,"data-p-disabled":d.disabled,"data-p-focus":v,onFocus:U,onBlur:H},k("container")),s.createElement("ul",G,$,q)),re=c({id:d.id,ref:D,className:u.classNames(d.className,x("root",{isFilled:J,focusedState:v,disabled:d.disabled})),style:d.style},k("root"));return s.createElement(s.Fragment,null,s.createElement("div",re,te),Z&&s.createElement(l.Tooltip,p({target:I,content:d.tooltip},d.tooltipOptions,{pt:k("tooltip")})))})));return S.displayName="Chips",e.Chips=S,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.icons.timescircle,primereact.keyfilter,primereact.tooltip,primereact.utils);