@entur/dropdown - npm Package Compare versions

Comparing version 1.3.3 to 1.3.4

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+## [1.3.4](https://bitbucket.org/enturas/design-system/compare/@entur/dropdown@1.3.3...@entur/dropdown@1.3.4) (2020-07-22)
+
+### Bug Fixes
+
+- **dropdown:** center dropdown toggle icon ([9865382](https://bitbucket.org/enturas/design-system/commits/9865382689bbcd3b4f79b8d8ac651097607b346e))
+- **multiselect:** rework internal logic, and wrapping of multiple items ([fccfc96](https://bitbucket.org/enturas/design-system/commits/fccfc96f86dfc007f0d69527eac2186b27cceeae))
+
 ## [1.3.3](https://bitbucket.org/enturas/design-system/compare/@entur/dropdown@1.3.2...@entur/dropdown@1.3.3) (2020-07-16)
@@ -8,0 +15,0 @@

dist/dropdown.cjs.development.js

@@ -738,3 +738,5 @@ 'use strict';
       reset: reset,
-      getToggleButtonProps: getToggleButtonProps
+      getToggleButtonProps: getToggleButtonProps,
+      openMenu: openMenu,
+      openOnFocus: openOnFocus
     }
@@ -753,3 +755,9 @@ }, React.createElement("div", {
     })
-  }, React.createElement("div", {
+  }, React.createElement("div", Object.assign({
+    className: "eds-multi-select__input"
+  }, getToggleButtonProps(getDropdownProps({
+    disabled: disabled,
+    type: 'button',
+    role: 'button'
+  }))), areItemsSelected && React.createElement("div", {
     className: "eds-multi-select__selected-items"
@@ -759,3 +767,3 @@ }, selectedItems.map(function (selectedItem, index) {
       className: "eds-multi-select__selected-items-tag",
-      key: "selected-item-" + index,
+      key: "selected-item-" + selectedItem.label + selectedItem.value,
       onClose: function onClose(e) {
@@ -769,16 +777,5 @@ e.stopPropagation();
     })), selectedItem.label);
-  })), React.createElement("button", Object.assign({}, getToggleButtonProps(getDropdownProps({
-    preventKeyAction: isOpen,
-    style: {
-      textAlign: 'left'
-    },
-    disabled: disabled,
-    type: 'button',
-    className: 'eds-form-control eds-dropdown___selectedItem',
-    onFocus: function onFocus() {
-      if (openOnFocus) {
-        openMenu();
-      }
-    }
-  }))), areItemsSelected ? '' : placeholder)), React.createElement("ul", Object.assign({
+  })), !areItemsSelected && React.createElement("span", {
+    className: "eds-multi-select__placeholder"
+  }, placeholder))), React.createElement("ul", Object.assign({
     className: classNames('eds-dropdown-list', {
@@ -852,3 +849,5 @@ 'eds-dropdown-list--open': isOpen
       getToggleButtonProps = _useMultiSelectContex2.getToggleButtonProps,
-      isOpen = _useMultiSelectContex2.isOpen;
+      isOpen = _useMultiSelectContex2.isOpen,
+      openMenu = _useMultiSelectContex2.openMenu,
+      openOnFocus = _useMultiSelectContex2.openOnFocus;
 
@@ -858,6 +857,9 @@ return React.createElement("button", Object.assign({}, getToggleButtonProps({
       'eds-dropdown__toggle-button--open': isOpen
-    })
-  }), {
-    tabIndex: "-1"
-  }), React.createElement(icons.DownArrowIcon, null));
+    }),
+    onFocus: function onFocus() {
+      if (openOnFocus) {
+        openMenu();
+      }
+    }
+  })), React.createElement(icons.DownArrowIcon, null));
 };
@@ -864,0 +866,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))},x=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"]),x=f(),I=x.getInputProps,T=x.inputValue,N=x.selectHighlightedItem,C=x.openMenu,F=n.useMemo((function(){return r.filter((function(e){return w(e,T)}))}),[T,r,w]);return n.createElement(O,{items:F,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&&C()}},_)))))},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)))},T=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(T,{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)}},C=n.createContext(null),F=function(){var e=n.useContext(C);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=F().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=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))};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,T=void 0!==w&&w,C=e.className,F=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?x:_,A=v?{itemFilter:j}:{};return n.createElement(b,Object.assign({selectedItem:V,onInputValueChange:D,onChange:u,value:E,highlightFirstItemOnOpen:t,className:C,style:F},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:T},A))))},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,x=void 0===_?"Loading...":_,I=e.readOnly,T=void 0!==I&&I,F=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,A=P.addSelectedItem,L=N(s,o).items,K=function(){return L.filter((function(e){return D.indexOf(e)<0}))},H=l.useSelect({selectedItem:void 0,items:K(),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&&A(t)}}}),R=H.isOpen,Y=H.openMenu,$=H.selectedItem,G=H.getToggleButtonProps,Q=H.getLabelProps,U=H.getMenuProps,z=H.highlightedIndex,J=H.getItemProps;n.useEffect((function(){E(D)}),[D,E]);var W=0!==D.length;return n.createElement(C.Provider,{value:{isOpen:R,reset:B,getToggleButtonProps:G}},n.createElement("div",{className:r("eds-dropdown-wrapper",a)},t&&n.createElement(c.Label,Object.assign({},Q()),t),n.createElement(i.BaseFormControl,{prepend:F,dark:!0,disabled:b,append:n.createElement(S,{loading:w,loadingText:x,readOnly:T,hasSelected: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-"+t,onClose:function(t){t.stopPropagation(),V(e)}},M({selectedItem:e,index:t})),e.label)}))),n.createElement("button",Object.assign({},G(q({preventKeyAction:R,style:{textAlign:"left"},disabled:b,type:"button",className:"eds-form-control eds-dropdown___selectedItem",onFocus:function(){y&&Y()}}))),W?"":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?K().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(),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)})))))};
 //# sourceMappingURL=dropdown.cjs.production.min.js.map

dist/dropdown.esm.js

@@ -731,3 +731,5 @@ import { debounce, warnAboutMissingStyles } from '@entur/utils';
       reset: reset,
-      getToggleButtonProps: getToggleButtonProps
+      getToggleButtonProps: getToggleButtonProps,
+      openMenu: openMenu,
+      openOnFocus: openOnFocus
     }
@@ -746,3 +748,9 @@ }, React.createElement("div", {
     })
-  }, React.createElement("div", {
+  }, React.createElement("div", Object.assign({
+    className: "eds-multi-select__input"
+  }, getToggleButtonProps(getDropdownProps({
+    disabled: disabled,
+    type: 'button',
+    role: 'button'
+  }))), areItemsSelected && React.createElement("div", {
     className: "eds-multi-select__selected-items"
@@ -752,3 +760,3 @@ }, selectedItems.map(function (selectedItem, index) {
       className: "eds-multi-select__selected-items-tag",
-      key: "selected-item-" + index,
+      key: "selected-item-" + selectedItem.label + selectedItem.value,
       onClose: function onClose(e) {
@@ -762,16 +770,5 @@ e.stopPropagation();
     })), selectedItem.label);
-  })), React.createElement("button", Object.assign({}, getToggleButtonProps(getDropdownProps({
-    preventKeyAction: isOpen,
-    style: {
-      textAlign: 'left'
-    },
-    disabled: disabled,
-    type: 'button',
-    className: 'eds-form-control eds-dropdown___selectedItem',
-    onFocus: function onFocus() {
-      if (openOnFocus) {
-        openMenu();
-      }
-    }
-  }))), areItemsSelected ? '' : placeholder)), React.createElement("ul", Object.assign({
+  })), !areItemsSelected && React.createElement("span", {
+    className: "eds-multi-select__placeholder"
+  }, placeholder))), React.createElement("ul", Object.assign({
     className: classNames('eds-dropdown-list', {
@@ -845,3 +842,5 @@ 'eds-dropdown-list--open': isOpen
       getToggleButtonProps = _useMultiSelectContex2.getToggleButtonProps,
-      isOpen = _useMultiSelectContex2.isOpen;
+      isOpen = _useMultiSelectContex2.isOpen,
+      openMenu = _useMultiSelectContex2.openMenu,
+      openOnFocus = _useMultiSelectContex2.openOnFocus;
 
@@ -851,6 +850,9 @@ return React.createElement("button", Object.assign({}, getToggleButtonProps({
       'eds-dropdown__toggle-button--open': isOpen
-    })
-  }), {
-    tabIndex: "-1"
-  }), React.createElement(DownArrowIcon, null));
+    }),
+    onFocus: function onFocus() {
+      if (openOnFocus) {
+        openMenu();
+      }
+    }
+  })), React.createElement(DownArrowIcon, null));
 };
@@ -857,0 +859,0 @@

package.json

 {
   "name": "@entur/dropdown",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "license": "EUPL-1.2",
@@ -31,7 +31,7 @@ "main": "dist/index.js",
     "@entur/a11y": "^0.2.24",
-    "@entur/chip": "^0.3.20",
-    "@entur/form": "^3.1.3",
-    "@entur/icons": "^1.9.0",
+    "@entur/chip": "^0.3.21",
+    "@entur/form": "^3.2.0",
+    "@entur/icons": "^1.9.1",
     "@entur/tokens": "^1.3.6",
-    "@entur/tooltip": "^2.2.1",
+    "@entur/tooltip": "^2.2.2",
     "@entur/utils": "^0.2.9",
@@ -41,3 +41,3 @@ "classnames": "^2.2.6",
   },
-  "gitHead": "79ce8d1876281a2b4197128ae2d361e73fd52b2a"
+  "gitHead": "0305e941b14a5805011aa769166595fc3ca643ea"
 }

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

277102

increased by0.81%

Lines of code

2079

increased by1.12%

Dependency changes

• Updated@entur/chip@^0.3.21

• Updated@entur/form@^3.2.0

• Updated@entur/icons@^1.9.1

• Updated@entur/tooltip@^2.2.2