@entur/dropdown - npm Package Compare versions

Comparing version 1.3.4 to 1.3.5

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+## [1.3.5](https://bitbucket.org/enturas/design-system/compare/@entur/dropdown@1.3.4...@entur/dropdown@1.3.5) (2020-07-24)
+
+### Bug Fixes
+
+- **multiselect:** improve internal filtering for selected item ([ad706e4](https://bitbucket.org/enturas/design-system/commits/ad706e4afdb8a137aed30873735a95d8acb8d713))
+
 ## [1.3.4](https://bitbucket.org/enturas/design-system/compare/@entur/dropdown@1.3.3...@entur/dropdown@1.3.4) (2020-07-22)
@@ -8,0 +14,0 @@

dist/dropdown.cjs.development.js

@@ -52,5 +52,3 @@ 'use strict';
 
-var DownshiftContext =
-/*#__PURE__*/
-React.createContext(null);
+var DownshiftContext = /*#__PURE__*/React.createContext(null);
 var DownshiftProvider = function DownshiftProvider(_ref) {
@@ -649,5 +647,3 @@ var children = _ref.children,
 
-var MultiSelectContext =
-/*#__PURE__*/
-React.createContext(null);
+var MultiSelectContext = /*#__PURE__*/React.createContext(null);
 
@@ -700,3 +696,5 @@ var useMultiSelectContext = function useMultiSelectContext() {
     return items.filter(function (item) {
-      return selectedItems.indexOf(item) < 0;
+      return !selectedItems.some(function (el) {
+        return el.label === item.label && el.value === item.value;
+      });
     });
@@ -703,0 +701,0 @@ };

dist/dropdown.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@entur/utils"),n=e(require("react")),l=require("downshift"),a=e(l),r=e(require("classnames")),i=require("@entur/form"),o=require("@entur/icons"),s=require("@entur/a11y"),c=require("@entur/typography"),d=require("@entur/tooltip"),u=require("@entur/chip");function m(){return(m=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e}).apply(this,arguments)}function p(e,t){if(null==e)return{};var n,l,a={},r=Object.keys(e);for(l=0;l<r.length;l++)t.indexOf(n=r[l])>=0||(a[n]=e[n]);return a}var g=n.createContext(null),b=function(e){var t=e.children,l=e.onChange,i=void 0===l?function(){}:l,o=e.onInputValueChange,s=void 0===o?function(){}:o,c=e.highlightFirstItemOnOpen,d=void 0!==c&&c,u=e.className,b=e.style,f=p(e,["children","onChange","onInputValueChange","highlightFirstItemOnOpen","className","style"]);return n.createElement(a,Object.assign({itemToString:function(e){return e?e.label:""},onStateChange:function(e,t){e.type!==a.stateChangeTypes.controlledPropUpdatedSelectedItem&&("selectedItem"in e?i(e.selectedItem,t):"inputValue"in e&&s(e.inputValue))},stateReducer:function(e,t){return d&&"isOpen"in t&&t.isOpen?m({},t,{highlightedIndex:0}):t}},f),(function(e){return n.createElement("div",{className:r("eds-input-group",u),style:b},n.createElement(g.Provider,{value:e},t))}))},f=function(){var e=n.useContext(g);if(!e)throw new Error("You need to wrap your component in a DownshiftProvider");return e},v=function(e){var t=e.items,l=p(e,["items"]),a=f(),i=a.highlightedIndex,o=a.isOpen,s=a.selectedItem,c=a.getItemProps,d=a.getMenuProps;return n.createElement("ul",Object.assign({className:r("eds-dropdown-list",{"eds-dropdown-list--open":o})},d(m({},l))),o?t.map((function(e,t){return n.createElement("li",Object.assign({className:r("eds-dropdown-list__item",{"eds-dropdown-list__item--highlighted":i===t,"eds-dropdown-list__item--selected":s===e})},c({key:""+t+e.value,item:e,index:t})),n.createElement("span",null,e.label),e.icons&&n.createElement("span",null,e.icons.map((function(e,t){return n.createElement(e,{key:t,inline:!0,className:"eds-dropdown-list__item-icon"})}))))})):null)},h=function(){var e=f();return n.createElement("button",Object.assign({},(0,e.getToggleButtonProps)({className:r("eds-dropdown__toggle-button",{"eds-dropdown__toggle-button--open":e.isOpen})}),{tabIndex:"-1"}),n.createElement(o.DownArrowIcon,null))},y=function(e){var t=e.children,l=p(e,["className","children"]);return n.createElement("div",Object.assign({className:r("eds-inline-spinner",r)},l),n.createElement("span",{className:"eds-inline-spinner__twirly-part"}),n.createElement(s.VisuallyHidden,null,t))},O=function(e){var t=e.children,l=e.className,a=e.items,r=e.loading,o=void 0!==r&&r,s=e.loadingText,c=void 0===s?"Loading...":s,d=e.listStyle,u=e.clearable,g=p(e,["children","className","items","loading","loadingText","placeholder","style","listStyle","clearable"]);return n.createElement("div",{className:"eds-dropdown-wrapper"},n.createElement(i.BaseFormControl,Object.assign({append:n.createElement(w,{clearable:u,loading:o,loadingText:c,readOnly:g.readOnly}),className:l,dark:!0},g),t),n.createElement(v,Object.assign({items:a,style:m({position:"absolute",top:"100%"},d)},g)))},E=function(e){var t=m({},e),l=f(),a=l.clearSelection,r=l.selectedItem;return n.createElement(n.Fragment,null,r&&n.createElement("button",Object.assign({className:"eds-dropdown__clear-button",type:"button",tabIndex:-1,onClick:function(){return a()}},t),n.createElement(o.CloseIcon,null)),r&&n.createElement("div",{className:"eds-dropdown__divider"}))},w=function(e){var t=e.clearable,l=e.readOnly;return e.loading?n.createElement(y,null,e.loadingText):l?null:t?n.createElement(n.Fragment,null,n.createElement(E,null)," ",n.createElement(h,null)):n.createElement(h,null)},_=function(e){var t=e.disabled,l=e.placeholder,a=void 0===l?"Vennligst velg":l,r=e.selectOnTab,i=void 0!==r&&r,o=e.openOnFocus,s=void 0!==o&&o,c=e.listStyle,d=e.items,u=p(e,["disabled","placeholder","selectOnTab","openOnFocus","listStyle","items"]),g=f(),b=g.getToggleButtonProps,v=g.selectedItem,h=g.selectHighlightedItem,y=g.openMenu,E=g.isOpen,w=g.highlightedIndex,_=g.setHighlightedIndex;return n.createElement(O,Object.assign({disabled:t,listStyle:c,items:d},u),n.createElement("button",Object.assign({},b({className:"eds-form-control eds-dropdown__selected-item",style:{textAlign:"left"},disabled:t,type:"button",onKeyDown:function(e){if(i&&"Tab"===e.key&&h(),E){var t=e.key,n=d.map((function(e,t){return m({},e,{index:t})})).filter((function(e){return e.label.trim().charAt(0).toLowerCase()===t})),l=n.find((function(e){return e.index>(null!=w?w:0)}));l?_(l.index):n.length>0&&_(n[0].index)}},onFocus:function(){s&&y()}})),v?v.label:a))},T=function(e){var t=e.disabled,l=void 0!==t&&t,a=e.className,r=e.items,i=e.loading,o=e.loadingText,s=e.readOnly,c=void 0!==s&&s,d=e.prepend,u=e.selectOnTab,g=void 0!==u&&u,b=e.openOnFocus,v=void 0!==b&&b,h=e.listStyle,y=e.clearable,E=e.itemFilter,w=void 0===E?function(e,t){return function(e,t){if(!t)return!0;var n=t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&");return new RegExp(n,"i").test(e.label)}(e,t)}:E,_=p(e,["disabled","className","items","loading","loadingText","readOnly","prepend","selectOnTab","openOnFocus","listStyle","clearable","itemFilter"]),T=f(),x=T.getInputProps,I=T.inputValue,N=T.selectHighlightedItem,F=T.openMenu,C=n.useMemo((function(){return r.filter((function(e){return w(e,I)}))}),[I,r,w]);return n.createElement(O,{items:C,disabled:l,readOnly:c,className:a,loading:i,loadingText:o,prepend:d,listStyle:h,clearable:y},n.createElement("input",Object.assign({},x(m({disabled:l,readOnly:c,className:"eds-form-control eds-dropdown__input",onKeyDown:function(e){g&&"Tab"===e.key&&N()},onFocus:function(){v&&F()}},_)))))},x=function(e){var t=e.children,l=e.label,a=e.labelTooltip,r=e.feedback,s=e.variant,u=e.className,m=e.style,p=f();return n.createElement(i.VariantProvider,{variant:s},n.createElement("div",{className:u,style:m},l&&n.createElement(c.Label,Object.assign({},(0,p.getLabelProps)(),{style:{display:"flex"}}),l,a&&n.createElement(d.Tooltip,{content:a,placement:"right"},n.createElement("span",{className:"eds-input-group__label-tooltip-icon"},n.createElement(o.QuestionIcon,null)))),t,r&&s&&n.createElement(i.FeedbackText,{variant:s},r)))},I=function(e,t){switch(t.type){case"request results":return{items:[],loading:!0};case"received results":return{items:t.payload,loading:!1}}},N=function(e,l){void 0===l&&(l=250);var a,r="function"==typeof e,i=n.useMemo((function(){return r?e:function(){return Promise.resolve(e)}}),[e,r]),o=n.useReducer(I,{items:r?[]:e,loading:!1}),s=o[0],c=s.items,d=s.loading,u=o[1],p=(a=n.useRef(!0),n.useEffect((function(){return function(){a.current=!1}}),[]),a.current),g=n.useCallback((function(e){try{return p?(u({type:"request results"}),Promise.resolve(i(e)).then((function(e){p&&u({type:"received results",payload:e})}))):Promise.resolve()}catch(e){return Promise.reject(e)}}),[i,p]),b=function(e){return n.useMemo((function(){return e.map((function(e){return"string"==typeof e?{value:e,label:e}:"value"in e?e:m({},e,{value:e.label})}))}),[e])}(c);return n.useEffect((function(){r&&g("")}),[r,g]),{items:b,loading:!!r&&d,fetchItems:t.debounce(g,l)}},F=n.createContext(null),C=function(){var e=n.useContext(F);if(!e)throw new Error("You need to wrap your component in a DownshiftProvider");return e},S=function(e){var t=e.readOnly,l=e.hasSelected;return e.loading?n.createElement(y,null,e.loadingText):t?null:l?n.createElement(n.Fragment,null,n.createElement(j,null),n.createElement(k,null)):n.createElement(k,null)},j=function(e){var t=m({},e),l=C().reset;return n.createElement(n.Fragment,null,n.createElement("button",Object.assign({className:"eds-dropdown__clear-button",type:"button",tabIndex:-1,onClick:function(){return l()}},t),n.createElement(o.CloseIcon,null)),n.createElement("div",{className:"eds-dropdown__divider"}))},k=function(){var e=C(),t=e.openMenu,l=e.openOnFocus;return n.createElement("button",Object.assign({},(0,e.getToggleButtonProps)({className:r("eds-dropdown__toggle-button",{"eds-dropdown__toggle-button--open":e.isOpen}),onFocus:function(){l&&t()}})),n.createElement(o.DownArrowIcon,null))};t.warnAboutMissingStyles("dropdown","form","a11y","chip"),exports.Dropdown=function(e){var t=e.highlightFirstItemOnOpen,l=e.debounceTimeout,a=e.disabled,r=e.feedback,i=e.items,o=e.label,s=e.labelTooltip,c=e.loadingText,d=e.onChange,u=void 0===d?function(){}:d,m=e.placeholder,g=e.prepend,f=e.readOnly,v=e.searchable,h=e.selectOnTab,y=e.openOnFocus,O=e.variant,E=e.value,w=e.clearable,I=void 0!==w&&w,F=e.className,C=e.style,S=e.listStyle,j=e.itemFilter,k=p(e,["highlightFirstItemOnOpen","debounceTimeout","disabled","feedback","items","label","labelTooltip","loadingText","onChange","placeholder","prepend","readOnly","searchable","selectOnTab","openOnFocus","variant","value","clearable","className","style","listStyle","itemFilter"]),P=N(i,l),M=P.items,q=P.loading,D=P.fetchItems,V=void 0===E?void 0:M.find((function(e){return E===e.value}))||null,B=v?T:_,L=v?{itemFilter:j}:{};return n.createElement(b,Object.assign({selectedItem:V,onInputValueChange:D,onChange:u,value:E,highlightFirstItemOnOpen:t,className:F,style:C},k),n.createElement(x,{label:o,labelTooltip:s,feedback:r,variant:O},n.createElement(B,Object.assign({items:M,loading:q,loadingText:c,disabled:a,readOnly:f,placeholder:m,prepend:g,selectOnTab:h,openOnFocus:y,listStyle:S,clearable:I},L))))},exports.MultiSelect=function(e){var t=e.label,a=e.className,o=e.debounceTimeout,s=e.items,d=e.feedback,g=e.variant,b=e.disabled,f=e.placeholder,v=void 0===f?"Vennligst velg":f,h=e.openOnFocus,y=void 0!==h&&h,O=e.onChange,E=void 0===O?function(){}:O,w=e.loading,_=e.loadingText,T=void 0===_?"Loading...":_,x=e.readOnly,I=void 0!==x&&x,C=e.prepend,j=e.listStyle,k=p(e,["label","className","debounceTimeout","items","feedback","variant","disabled","placeholder","selectOnTab","openOnFocus","onChange","loading","loadingText","readOnly","prepend","listStyle"]),P=l.useMultipleSelection(m({},k)),M=P.getSelectedItemProps,q=P.getDropdownProps,D=P.selectedItems,V=P.removeSelectedItem,B=P.reset,L=P.addSelectedItem,A=N(s,o).items,H=function(){return A.filter((function(e){return D.indexOf(e)<0}))},K=l.useSelect({selectedItem:void 0,items:H(),onStateChange:function(e){var t=e.selectedItem;switch(e.type){case l.useSelect.stateChangeTypes.MenuKeyDownEnter:case l.useSelect.stateChangeTypes.MenuKeyDownSpaceButton:case l.useSelect.stateChangeTypes.ItemClick:t&&L(t)}}}),R=K.isOpen,Y=K.openMenu,$=K.selectedItem,G=K.getToggleButtonProps,Q=K.getLabelProps,U=K.getMenuProps,z=K.highlightedIndex,J=K.getItemProps;n.useEffect((function(){E(D)}),[D,E]);var W=0!==D.length;return n.createElement(F.Provider,{value:{isOpen:R,reset:B,getToggleButtonProps:G,openMenu:Y,openOnFocus:y}},n.createElement("div",{className:r("eds-dropdown-wrapper",a)},t&&n.createElement(c.Label,Object.assign({},Q()),t),n.createElement(i.BaseFormControl,{prepend:C,dark:!0,disabled:b,append:n.createElement(S,{loading:w,loadingText:T,readOnly:I,hasSelected:W})},n.createElement("div",Object.assign({className:"eds-multi-select__input"},G(q({disabled:b,type:"button",role:"button"}))),W&&n.createElement("div",{className:"eds-multi-select__selected-items"},D.map((function(e,t){return n.createElement(u.TagChip,Object.assign({className:"eds-multi-select__selected-items-tag",key:"selected-item-"+e.label+e.value,onClose:function(t){t.stopPropagation(),V(e)}},M({selectedItem:e,index:t})),e.label)}))),!W&&n.createElement("span",{className:"eds-multi-select__placeholder"},v))),n.createElement("ul",Object.assign({className:r("eds-dropdown-list",{"eds-dropdown-list--open":R})},U({style:m({position:"absolute",top:"100%"},j)})),R?H().map((function(e,t){return n.createElement("li",Object.assign({className:r("eds-dropdown-list__item",{"eds-dropdown-list__item--highlighted":z===t,"eds-dropdown-list__item--selected":$===e})},J({key:""+t+e.value,item:e,index:t}),j),n.createElement("span",null,e.label),e.icons&&n.createElement("span",null,e.icons.map((function(e,t){return n.createElement(e,{key:t,inline:!0,className:"eds-dropdown-list__item-icon"})}))))})):null),d&&g&&n.createElement(i.FeedbackText,{variant:g},d)))},exports.NativeDropdown=function(e){var t=e.className,l=e.disabled,a=void 0!==l&&l,r=e.readOnly,s=void 0!==r&&r,c=e.items,d=e.loadingText,u=e.prepend,m=e.style,g=e.label,b=e.variant,f=e.feedback,v=p(e,["className","disabled","readOnly","items","loadingText","prepend","style","label","variant","feedback"]),h=N(c),O=h.items,E=h.loading,w=n.createElement(o.DownArrowIcon,{inline:!0});return a||s?w=null:E&&(w=n.createElement(y,null,d)),n.createElement(i.InputGroup,{label:g,feedback:f,variant:b},n.createElement(i.BaseFormControl,{dark:!0,disabled:a,readOnly:s,prepend:u,append:w,className:t,style:m},n.createElement("select",Object.assign({"aria-invalid":"error"===b,className:"eds-form-control eds-dropdown",disabled:a||s},v),O.map((function(e){return n.createElement("option",{key:e.value,value:e.value},e.label)})))))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@entur/utils"),n=e(require("react")),l=require("downshift"),a=e(l),r=e(require("classnames")),i=require("@entur/form"),o=require("@entur/icons"),s=require("@entur/a11y"),c=require("@entur/typography"),d=require("@entur/tooltip"),u=require("@entur/chip");function m(){return(m=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e}).apply(this,arguments)}function p(e,t){if(null==e)return{};var n,l,a={},r=Object.keys(e);for(l=0;l<r.length;l++)t.indexOf(n=r[l])>=0||(a[n]=e[n]);return a}var g=n.createContext(null),b=function(e){var t=e.children,l=e.onChange,i=void 0===l?function(){}:l,o=e.onInputValueChange,s=void 0===o?function(){}:o,c=e.highlightFirstItemOnOpen,d=void 0!==c&&c,u=e.className,b=e.style,f=p(e,["children","onChange","onInputValueChange","highlightFirstItemOnOpen","className","style"]);return n.createElement(a,Object.assign({itemToString:function(e){return e?e.label:""},onStateChange:function(e,t){e.type!==a.stateChangeTypes.controlledPropUpdatedSelectedItem&&("selectedItem"in e?i(e.selectedItem,t):"inputValue"in e&&s(e.inputValue))},stateReducer:function(e,t){return d&&"isOpen"in t&&t.isOpen?m({},t,{highlightedIndex:0}):t}},f),(function(e){return n.createElement("div",{className:r("eds-input-group",u),style:b},n.createElement(g.Provider,{value:e},t))}))},f=function(){var e=n.useContext(g);if(!e)throw new Error("You need to wrap your component in a DownshiftProvider");return e},v=function(e){var t=e.items,l=p(e,["items"]),a=f(),i=a.highlightedIndex,o=a.isOpen,s=a.selectedItem,c=a.getItemProps,d=a.getMenuProps;return n.createElement("ul",Object.assign({className:r("eds-dropdown-list",{"eds-dropdown-list--open":o})},d(m({},l))),o?t.map((function(e,t){return n.createElement("li",Object.assign({className:r("eds-dropdown-list__item",{"eds-dropdown-list__item--highlighted":i===t,"eds-dropdown-list__item--selected":s===e})},c({key:""+t+e.value,item:e,index:t})),n.createElement("span",null,e.label),e.icons&&n.createElement("span",null,e.icons.map((function(e,t){return n.createElement(e,{key:t,inline:!0,className:"eds-dropdown-list__item-icon"})}))))})):null)},h=function(){var e=f();return n.createElement("button",Object.assign({},(0,e.getToggleButtonProps)({className:r("eds-dropdown__toggle-button",{"eds-dropdown__toggle-button--open":e.isOpen})}),{tabIndex:"-1"}),n.createElement(o.DownArrowIcon,null))},y=function(e){var t=e.children,l=p(e,["className","children"]);return n.createElement("div",Object.assign({className:r("eds-inline-spinner",r)},l),n.createElement("span",{className:"eds-inline-spinner__twirly-part"}),n.createElement(s.VisuallyHidden,null,t))},O=function(e){var t=e.children,l=e.className,a=e.items,r=e.loading,o=void 0!==r&&r,s=e.loadingText,c=void 0===s?"Loading...":s,d=e.listStyle,u=e.clearable,g=p(e,["children","className","items","loading","loadingText","placeholder","style","listStyle","clearable"]);return n.createElement("div",{className:"eds-dropdown-wrapper"},n.createElement(i.BaseFormControl,Object.assign({append:n.createElement(w,{clearable:u,loading:o,loadingText:c,readOnly:g.readOnly}),className:l,dark:!0},g),t),n.createElement(v,Object.assign({items:a,style:m({position:"absolute",top:"100%"},d)},g)))},E=function(e){var t=m({},e),l=f(),a=l.clearSelection,r=l.selectedItem;return n.createElement(n.Fragment,null,r&&n.createElement("button",Object.assign({className:"eds-dropdown__clear-button",type:"button",tabIndex:-1,onClick:function(){return a()}},t),n.createElement(o.CloseIcon,null)),r&&n.createElement("div",{className:"eds-dropdown__divider"}))},w=function(e){var t=e.clearable,l=e.readOnly;return e.loading?n.createElement(y,null,e.loadingText):l?null:t?n.createElement(n.Fragment,null,n.createElement(E,null)," ",n.createElement(h,null)):n.createElement(h,null)},_=function(e){var t=e.disabled,l=e.placeholder,a=void 0===l?"Vennligst velg":l,r=e.selectOnTab,i=void 0!==r&&r,o=e.openOnFocus,s=void 0!==o&&o,c=e.listStyle,d=e.items,u=p(e,["disabled","placeholder","selectOnTab","openOnFocus","listStyle","items"]),g=f(),b=g.getToggleButtonProps,v=g.selectedItem,h=g.selectHighlightedItem,y=g.openMenu,E=g.isOpen,w=g.highlightedIndex,_=g.setHighlightedIndex;return n.createElement(O,Object.assign({disabled:t,listStyle:c,items:d},u),n.createElement("button",Object.assign({},b({className:"eds-form-control eds-dropdown__selected-item",style:{textAlign:"left"},disabled:t,type:"button",onKeyDown:function(e){if(i&&"Tab"===e.key&&h(),E){var t=e.key,n=d.map((function(e,t){return m({},e,{index:t})})).filter((function(e){return e.label.trim().charAt(0).toLowerCase()===t})),l=n.find((function(e){return e.index>(null!=w?w:0)}));l?_(l.index):n.length>0&&_(n[0].index)}},onFocus:function(){s&&y()}})),v?v.label:a))},T=function(e){var t=e.disabled,l=void 0!==t&&t,a=e.className,r=e.items,i=e.loading,o=e.loadingText,s=e.readOnly,c=void 0!==s&&s,d=e.prepend,u=e.selectOnTab,g=void 0!==u&&u,b=e.openOnFocus,v=void 0!==b&&b,h=e.listStyle,y=e.clearable,E=e.itemFilter,w=void 0===E?function(e,t){return function(e,t){if(!t)return!0;var n=t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&");return new RegExp(n,"i").test(e.label)}(e,t)}:E,_=p(e,["disabled","className","items","loading","loadingText","readOnly","prepend","selectOnTab","openOnFocus","listStyle","clearable","itemFilter"]),T=f(),I=T.getInputProps,x=T.inputValue,N=T.selectHighlightedItem,F=T.openMenu,C=n.useMemo((function(){return r.filter((function(e){return w(e,x)}))}),[x,r,w]);return n.createElement(O,{items:C,disabled:l,readOnly:c,className:a,loading:i,loadingText:o,prepend:d,listStyle:h,clearable:y},n.createElement("input",Object.assign({},I(m({disabled:l,readOnly:c,className:"eds-form-control eds-dropdown__input",onKeyDown:function(e){g&&"Tab"===e.key&&N()},onFocus:function(){v&&F()}},_)))))},I=function(e){var t=e.children,l=e.label,a=e.labelTooltip,r=e.feedback,s=e.variant,u=e.className,m=e.style,p=f();return n.createElement(i.VariantProvider,{variant:s},n.createElement("div",{className:u,style:m},l&&n.createElement(c.Label,Object.assign({},(0,p.getLabelProps)(),{style:{display:"flex"}}),l,a&&n.createElement(d.Tooltip,{content:a,placement:"right"},n.createElement("span",{className:"eds-input-group__label-tooltip-icon"},n.createElement(o.QuestionIcon,null)))),t,r&&s&&n.createElement(i.FeedbackText,{variant:s},r)))},x=function(e,t){switch(t.type){case"request results":return{items:[],loading:!0};case"received results":return{items:t.payload,loading:!1}}},N=function(e,l){void 0===l&&(l=250);var a,r="function"==typeof e,i=n.useMemo((function(){return r?e:function(){return Promise.resolve(e)}}),[e,r]),o=n.useReducer(x,{items:r?[]:e,loading:!1}),s=o[0],c=s.items,d=s.loading,u=o[1],p=(a=n.useRef(!0),n.useEffect((function(){return function(){a.current=!1}}),[]),a.current),g=n.useCallback((function(e){try{return p?(u({type:"request results"}),Promise.resolve(i(e)).then((function(e){p&&u({type:"received results",payload:e})}))):Promise.resolve()}catch(e){return Promise.reject(e)}}),[i,p]),b=function(e){return n.useMemo((function(){return e.map((function(e){return"string"==typeof e?{value:e,label:e}:"value"in e?e:m({},e,{value:e.label})}))}),[e])}(c);return n.useEffect((function(){r&&g("")}),[r,g]),{items:b,loading:!!r&&d,fetchItems:t.debounce(g,l)}},F=n.createContext(null),C=function(){var e=n.useContext(F);if(!e)throw new Error("You need to wrap your component in a DownshiftProvider");return e},S=function(e){var t=e.readOnly,l=e.hasSelected;return e.loading?n.createElement(y,null,e.loadingText):t?null:l?n.createElement(n.Fragment,null,n.createElement(j,null),n.createElement(k,null)):n.createElement(k,null)},j=function(e){var t=m({},e),l=C().reset;return n.createElement(n.Fragment,null,n.createElement("button",Object.assign({className:"eds-dropdown__clear-button",type:"button",tabIndex:-1,onClick:function(){return l()}},t),n.createElement(o.CloseIcon,null)),n.createElement("div",{className:"eds-dropdown__divider"}))},k=function(){var e=C(),t=e.openMenu,l=e.openOnFocus;return n.createElement("button",Object.assign({},(0,e.getToggleButtonProps)({className:r("eds-dropdown__toggle-button",{"eds-dropdown__toggle-button--open":e.isOpen}),onFocus:function(){l&&t()}})),n.createElement(o.DownArrowIcon,null))};t.warnAboutMissingStyles("dropdown","form","a11y","chip"),exports.Dropdown=function(e){var t=e.highlightFirstItemOnOpen,l=e.debounceTimeout,a=e.disabled,r=e.feedback,i=e.items,o=e.label,s=e.labelTooltip,c=e.loadingText,d=e.onChange,u=void 0===d?function(){}:d,m=e.placeholder,g=e.prepend,f=e.readOnly,v=e.searchable,h=e.selectOnTab,y=e.openOnFocus,O=e.variant,E=e.value,w=e.clearable,x=void 0!==w&&w,F=e.className,C=e.style,S=e.listStyle,j=e.itemFilter,k=p(e,["highlightFirstItemOnOpen","debounceTimeout","disabled","feedback","items","label","labelTooltip","loadingText","onChange","placeholder","prepend","readOnly","searchable","selectOnTab","openOnFocus","variant","value","clearable","className","style","listStyle","itemFilter"]),P=N(i,l),M=P.items,q=P.loading,D=P.fetchItems,V=void 0===E?void 0:M.find((function(e){return E===e.value}))||null,B=v?T:_,L=v?{itemFilter:j}:{};return n.createElement(b,Object.assign({selectedItem:V,onInputValueChange:D,onChange:u,value:E,highlightFirstItemOnOpen:t,className:F,style:C},k),n.createElement(I,{label:o,labelTooltip:s,feedback:r,variant:O},n.createElement(B,Object.assign({items:M,loading:q,loadingText:c,disabled:a,readOnly:f,placeholder:m,prepend:g,selectOnTab:h,openOnFocus:y,listStyle:S,clearable:x},L))))},exports.MultiSelect=function(e){var t=e.label,a=e.className,o=e.debounceTimeout,s=e.items,d=e.feedback,g=e.variant,b=e.disabled,f=e.placeholder,v=void 0===f?"Vennligst velg":f,h=e.openOnFocus,y=void 0!==h&&h,O=e.onChange,E=void 0===O?function(){}:O,w=e.loading,_=e.loadingText,T=void 0===_?"Loading...":_,I=e.readOnly,x=void 0!==I&&I,C=e.prepend,j=e.listStyle,k=p(e,["label","className","debounceTimeout","items","feedback","variant","disabled","placeholder","selectOnTab","openOnFocus","onChange","loading","loadingText","readOnly","prepend","listStyle"]),P=l.useMultipleSelection(m({},k)),M=P.getSelectedItemProps,q=P.getDropdownProps,D=P.selectedItems,V=P.removeSelectedItem,B=P.reset,L=P.addSelectedItem,A=N(s,o).items,H=function(){return A.filter((function(e){return!D.some((function(t){return t.label===e.label&&t.value===e.value}))}))},K=l.useSelect({selectedItem:void 0,items:H(),onStateChange:function(e){var t=e.selectedItem;switch(e.type){case l.useSelect.stateChangeTypes.MenuKeyDownEnter:case l.useSelect.stateChangeTypes.MenuKeyDownSpaceButton:case l.useSelect.stateChangeTypes.ItemClick:t&&L(t)}}}),R=K.isOpen,Y=K.openMenu,$=K.selectedItem,G=K.getToggleButtonProps,Q=K.getLabelProps,U=K.getMenuProps,z=K.highlightedIndex,J=K.getItemProps;n.useEffect((function(){E(D)}),[D,E]);var W=0!==D.length;return n.createElement(F.Provider,{value:{isOpen:R,reset:B,getToggleButtonProps:G,openMenu:Y,openOnFocus:y}},n.createElement("div",{className:r("eds-dropdown-wrapper",a)},t&&n.createElement(c.Label,Object.assign({},Q()),t),n.createElement(i.BaseFormControl,{prepend:C,dark:!0,disabled:b,append:n.createElement(S,{loading:w,loadingText:T,readOnly:x,hasSelected:W})},n.createElement("div",Object.assign({className:"eds-multi-select__input"},G(q({disabled:b,type:"button",role:"button"}))),W&&n.createElement("div",{className:"eds-multi-select__selected-items"},D.map((function(e,t){return n.createElement(u.TagChip,Object.assign({className:"eds-multi-select__selected-items-tag",key:"selected-item-"+e.label+e.value,onClose:function(t){t.stopPropagation(),V(e)}},M({selectedItem:e,index:t})),e.label)}))),!W&&n.createElement("span",{className:"eds-multi-select__placeholder"},v))),n.createElement("ul",Object.assign({className:r("eds-dropdown-list",{"eds-dropdown-list--open":R})},U({style:m({position:"absolute",top:"100%"},j)})),R?H().map((function(e,t){return n.createElement("li",Object.assign({className:r("eds-dropdown-list__item",{"eds-dropdown-list__item--highlighted":z===t,"eds-dropdown-list__item--selected":$===e})},J({key:""+t+e.value,item:e,index:t}),j),n.createElement("span",null,e.label),e.icons&&n.createElement("span",null,e.icons.map((function(e,t){return n.createElement(e,{key:t,inline:!0,className:"eds-dropdown-list__item-icon"})}))))})):null),d&&g&&n.createElement(i.FeedbackText,{variant:g},d)))},exports.NativeDropdown=function(e){var t=e.className,l=e.disabled,a=void 0!==l&&l,r=e.readOnly,s=void 0!==r&&r,c=e.items,d=e.loadingText,u=e.prepend,m=e.style,g=e.label,b=e.variant,f=e.feedback,v=p(e,["className","disabled","readOnly","items","loadingText","prepend","style","label","variant","feedback"]),h=N(c),O=h.items,E=h.loading,w=n.createElement(o.DownArrowIcon,{inline:!0});return a||s?w=null:E&&(w=n.createElement(y,null,d)),n.createElement(i.InputGroup,{label:g,feedback:f,variant:b},n.createElement(i.BaseFormControl,{dark:!0,disabled:a,readOnly:s,prepend:u,append:w,className:t,style:m},n.createElement("select",Object.assign({"aria-invalid":"error"===b,className:"eds-form-control eds-dropdown",disabled:a||s},v),O.map((function(e){return n.createElement("option",{key:e.value,value:e.value},e.label)})))))};
 //# sourceMappingURL=dropdown.cjs.production.min.js.map

dist/dropdown.esm.js

@@ -45,5 +45,3 @@ import { debounce, warnAboutMissingStyles } from '@entur/utils';
 
-var DownshiftContext =
-/*#__PURE__*/
-React.createContext(null);
+var DownshiftContext = /*#__PURE__*/React.createContext(null);
 var DownshiftProvider = function DownshiftProvider(_ref) {
@@ -642,5 +640,3 @@ var children = _ref.children,
 
-var MultiSelectContext =
-/*#__PURE__*/
-React.createContext(null);
+var MultiSelectContext = /*#__PURE__*/React.createContext(null);
 
@@ -693,3 +689,5 @@ var useMultiSelectContext = function useMultiSelectContext() {
     return items.filter(function (item) {
-      return selectedItems.indexOf(item) < 0;
+      return !selectedItems.some(function (el) {
+        return el.label === item.label && el.value === item.value;
+      });
     });
@@ -696,0 +694,0 @@ };

package.json

 {
   "name": "@entur/dropdown",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "license": "EUPL-1.2",
@@ -31,7 +31,7 @@ "main": "dist/index.js",
     "@entur/a11y": "^0.2.24",
-    "@entur/chip": "^0.3.21",
-    "@entur/form": "^3.2.0",
+    "@entur/chip": "^0.3.22",
+    "@entur/form": "^3.2.1",
     "@entur/icons": "^1.9.1",
     "@entur/tokens": "^1.3.6",
-    "@entur/tooltip": "^2.2.2",
+    "@entur/tooltip": "^2.2.3",
     "@entur/utils": "^0.2.9",
@@ -41,3 +41,3 @@ "classnames": "^2.2.6",
   },
-  "gitHead": "0305e941b14a5805011aa769166595fc3ca643ea"
+  "gitHead": "5bd815e773f09a8c8fb37233dd078107051bbcea"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

278165

increased by0.38%

Number of versions

246

increased by0.41%

Published versions last months

4

increased by33.33%

Published versions last two months

8

increased by14.29%

Published versions last week

1

increased byInfinity%

Published versions last year

66

increased by1.54%

Worsened metrics

Lines of code

2075

decreased by-0.19%

Dependency changes

• Updated@entur/chip@^0.3.22

• Updated@entur/form@^3.2.1

• Updated@entur/tooltip@^2.2.3