@entur/dropdown - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+# [0.7.0](https://bitbucket.org/enturas/design-system/compare/@entur/dropdown@0.6.0...@entur/dropdown@0.7.0) (2020-02-20)
+
+### Features
+
+- add clearable prop for dropdown ([7c048be](https://bitbucket.org/enturas/design-system/commits/7c048be592be8f77ccfe4bfcbc285d18510df41b))
+
 # [0.6.0](https://bitbucket.org/enturas/design-system/compare/@entur/dropdown@0.5.9...@entur/dropdown@0.6.0) (2020-02-14)
@@ -8,0 +14,0 @@

dist/dropdown.cjs.development.js

@@ -154,5 +154,3 @@ 'use strict';
     tabIndex: "-1"
-  }), React.createElement(icons.DownArrowIcon, {
-    inline: true
-  }));
+  }), React.createElement(icons.DownArrowIcon, null));
 };
@@ -175,7 +173,9 @@
       items = _ref.items,
-      loading = _ref.loading,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
       _ref$loadingText = _ref.loadingText,
       loadingText = _ref$loadingText === void 0 ? 'Loading...' : _ref$loadingText,
       listStyle = _ref.listStyle,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "items", "loading", "loadingText", "placeholder", "style", "listStyle"]);
+      clearable = _ref.clearable,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "items", "loading", "loadingText", "placeholder", "style", "listStyle", "clearable"]);
 
@@ -185,3 +185,8 @@ return React.createElement("div", {
   }, React.createElement(form.BaseFormControl, Object.assign({
-    append: loading ? React.createElement(InlineSpinner, null, loadingText) : !rest.readOnly && React.createElement(DropdownToggleButton, null),
+    append: React.createElement(Appendix, {
+      clearable: clearable,
+      loading: loading,
+      loadingText: loadingText,
+      readOnly: rest.readOnly
+    }),
     className: className,
@@ -198,2 +203,38 @@ dark: true
 
+var ClearButton = function ClearButton(_ref2) {
+  var props = _extends({}, _ref2);
+
+  var _useDownshift = useDownshift(),
+      clearSelection = _useDownshift.clearSelection,
+      selectedItem = _useDownshift.selectedItem;
+
+  return React.createElement(React.Fragment, null, selectedItem && React.createElement("button", Object.assign({
+    className: "eds-dropdown__clear-button",
+    type: "button",
+    tabIndex: -1,
+    onClick: function onClick() {
+      return clearSelection();
+    }
+  }, props), React.createElement(icons.CloseIcon, null)), selectedItem && React.createElement("div", {
+    className: "eds-dropdown__divider"
+  }));
+};
+
+var Appendix = function Appendix(_ref3) {
+  var clearable = _ref3.clearable,
+      loading = _ref3.loading,
+      loadingText = _ref3.loadingText,
+      readOnly = _ref3.readOnly;
+
+  if (loading) {
+    return React.createElement(InlineSpinner, null, loadingText);
+  }
+
+  if (readOnly) {
+    return null;
+  }
+
+  return clearable ? React.createElement(React.Fragment, null, React.createElement(ClearButton, null), " ", React.createElement(DropdownToggleButton, null)) : React.createElement(DropdownToggleButton, null);
+};
+
 var RegularDropdown = function RegularDropdown(_ref) {
@@ -254,3 +295,4 @@ var disabled = _ref.disabled,
       listStyle = _ref.listStyle,
-      rest = _objectWithoutPropertiesLoose(_ref, ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus", "listStyle"]);
+      clearable = _ref.clearable,
+      rest = _objectWithoutPropertiesLoose(_ref, ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus", "listStyle", "clearable"]);
 
@@ -281,3 +323,4 @@ var _useDownshift = useDownshift(),
     prepend: prepend,
-    listStyle: listStyle
+    listStyle: listStyle,
+    clearable: clearable
   }, React.createElement("input", Object.assign({}, getInputProps(_extends({
@@ -458,6 +501,8 @@ disabled: disabled,
       value = _ref.value,
+      _ref$clearable = _ref.clearable,
+      clearable = _ref$clearable === void 0 ? false : _ref$clearable,
       className = _ref.className,
       style = _ref.style,
       listStyle = _ref.listStyle,
-      rest = _objectWithoutPropertiesLoose(_ref, ["highlightFirstItemOnOpen", "debounceTimeout", "disabled", "feedback", "items", "label", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "searchable", "selectOnTab", "openOnFocus", "variant", "value", "className", "style", "listStyle"]);
+      rest = _objectWithoutPropertiesLoose(_ref, ["highlightFirstItemOnOpen", "debounceTimeout", "disabled", "feedback", "items", "label", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "searchable", "selectOnTab", "openOnFocus", "variant", "value", "clearable", "className", "style", "listStyle"]);
 
@@ -495,3 +540,4 @@ var _useResolvedItems = useResolvedItems(items, debounceTimeout),
     openOnFocus: openOnFocus,
-    listStyle: listStyle
+    listStyle: listStyle,
+    clearable: clearable
   })));
@@ -498,0 +544,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 n=require("@entur/utils"),t=e(require("react")),l=e(require("downshift")),a=require("@entur/form"),r=e(require("classnames")),i=require("@entur/icons"),s=require("@entur/a11y"),o=require("@entur/typography");function c(){return(c=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var l in t)Object.prototype.hasOwnProperty.call(t,l)&&(e[l]=t[l])}return e}).apply(this,arguments)}function d(e,n){if(null==e)return{};var t,l,a={},r=Object.keys(e);for(l=0;l<r.length;l++)n.indexOf(t=r[l])>=0||(a[t]=e[t]);return a}var u=t.createContext(null),m=function(e){var n=e.children,a=e.onChange,r=void 0===a?function(){}:a,i=e.onInputValueChange,s=void 0===i?function(){}:i,o=e.highlightFirstItemOnOpen,m=void 0!==o&&o,p=d(e,["children","onChange","onInputValueChange","highlightFirstItemOnOpen"]);return t.createElement(l,Object.assign({itemToString:function(e){return e?e.label:""},onStateChange:function(e,n){"selectedItem"in e?r(e.selectedItem,n):"inputValue"in e&&s(e.inputValue)},stateReducer:function(e,n){return m&&"isOpen"in n&&n.isOpen?c({},n,{highlightedIndex:0}):n}},p),(function(e){return t.createElement("div",{className:"eds-input-group"},t.createElement(u.Provider,{value:e},n))}))},p=function(){var e=t.useContext(u);if(!e)throw new Error("You need to wrap your component in a DownshiftProvider");return e},g=function(e){var n=e.items,l=d(e,["items"]),a=p(),i=a.highlightedIndex,s=a.isOpen,o=a.selectedItem,u=a.getItemProps,m=a.getMenuProps;return t.createElement("ul",Object.assign({className:r("eds-dropdown-list",{"eds-dropdown-list--open":s})},m(c({},l))),s?n.map((function(e,n){return t.createElement("li",Object.assign({className:r("eds-dropdown-list__item",{"eds-dropdown-list__item--highlighted":i===n,"eds-dropdown-list__item--selected":o===e})},u({key:e.value,item:e,index:n})),t.createElement("span",null,e.label),e.icons&&t.createElement("span",null,e.icons.map((function(e,n){return t.createElement(e,{key:n,inline:!0,className:"eds-dropdown-list__item-icon"})}))))})):null)},f=function(){var e=p();return t.createElement("button",Object.assign({},(0,e.getToggleButtonProps)({className:r("eds-dropdown__toggle-button",{"eds-dropdown__toggle-button--open":e.isOpen})}),{tabIndex:"-1"}),t.createElement(i.DownArrowIcon,{inline:!0}))},b=function(e){var n=e.children,l=d(e,["className","children"]);return t.createElement("div",Object.assign({className:r("eds-inline-spinner",r)},l),t.createElement("span",{className:"eds-inline-spinner__twirly-part"}),t.createElement(s.VisuallyHidden,null,n))},v=function(e){var n=e.children,l=e.className,r=e.items,i=e.loading,s=e.loadingText,o=void 0===s?"Loading...":s,u=e.listStyle,m=d(e,["children","className","items","loading","loadingText","placeholder","style","listStyle"]);return t.createElement("div",{className:"eds-dropdown-wrapper"},t.createElement(a.BaseFormControl,Object.assign({append:i?t.createElement(b,null,o):!m.readOnly&&t.createElement(f,null),className:l,dark:!0},m),n),t.createElement(g,Object.assign({items:r,style:c({position:"absolute",top:"100%"},u)},m)))},h=function(e){var n=e.disabled,l=e.placeholder,a=void 0===l?"Vennligst velg":l,r=e.selectOnTab,i=void 0!==r&&r,s=e.openOnFocus,o=void 0!==s&&s,c=e.listStyle,u=d(e,["disabled","placeholder","selectOnTab","openOnFocus","listStyle"]),m=p(),g=m.getToggleButtonProps,f=m.selectedItem,b=m.selectHighlightedItem,h=m.openMenu;return t.createElement(v,Object.assign({disabled:n,listStyle:c},u),t.createElement("button",Object.assign({},g({className:"eds-form-control eds-dropdown__selected-item",style:{textAlign:"left"},disabled:n,type:"button",onKeyDown:function(e){i&&"Tab"===e.key&&b()},onFocus:function(){o&&h()}})),f?f.label:a))},y=function(e){var n=e.disabled,l=void 0!==n&&n,a=e.className,r=e.items,i=e.loading,s=e.loadingText,o=e.readOnly,u=void 0!==o&&o,m=e.prepend,g=e.selectOnTab,f=void 0!==g&&g,b=e.openOnFocus,h=void 0!==b&&b,y=e.listStyle,O=d(e,["disabled","className","items","loading","loadingText","readOnly","prepend","selectOnTab","openOnFocus","listStyle"]),E=p(),w=E.getInputProps,N=E.inputValue,I=E.selectHighlightedItem,T=E.openMenu,x=t.useMemo((function(){if(!N)return r;var e=new RegExp(N,"i");return r.filter((function(n){return e.test(n.label)}))}),[N,r]);return t.createElement(v,{items:x,disabled:l,readOnly:u,className:a,loading:i,loadingText:s,prepend:m,listStyle:y},t.createElement("input",Object.assign({},w(c({disabled:l,readOnly:u,className:"eds-form-control eds-dropdown__input",onKeyDown:function(e){f&&"Tab"===e.key&&I()},onFocus:function(){h&&T()}},O)))))},O=function(e){var n=e.children,l=e.label,r=e.feedback,i=e.variant,s=e.className,c=e.style,d=p();return t.createElement(a.VariantProvider,{variant:i},t.createElement("div",{className:s,style:c},l&&t.createElement(o.Label,Object.assign({},(0,d.getLabelProps)(),{style:{display:"block"}}),l),n,r&&i&&t.createElement(a.FeedbackText,{variant:i},r)))},E=function(e,n){switch(n.type){case"request results":return{items:[],loading:!0};case"received results":return{items:n.payload,loading:!1}}},w=function(e,l){void 0===l&&(l=250);var a,r="function"==typeof e,i=t.useMemo((function(){return r?e:function(){return Promise.resolve(e)}}),[e,r]),s=t.useReducer(E,{items:r?[]:e,loading:!1}),o=s[0],d=o.items,u=o.loading,m=s[1],p=(a=t.useRef(!0),t.useEffect((function(){return function(){a.current=!1}}),[]),a.current),g=t.useCallback((function(e){try{return p?(m({type:"request results"}),Promise.resolve(i(e)).then((function(e){p&&m({type:"received results",payload:e})}))):Promise.resolve()}catch(e){return Promise.reject(e)}}),[i,p]),f=function(e){return t.useMemo((function(){return e.map((function(e){return"string"==typeof e?{value:e,label:e}:"value"in e?e:c({},e,{value:e.label})}))}),[e])}(d);return t.useEffect((function(){r&&g("")}),[r,g]),{items:f,loading:!!r&&u,fetchItems:n.debounce(g,l)}};n.warnAboutMissingStyles("dropdown","form","a11y"),exports.Dropdown=function(e){var n=e.highlightFirstItemOnOpen,l=e.debounceTimeout,a=e.disabled,r=e.feedback,i=e.items,s=e.label,o=e.loadingText,c=e.onChange,u=void 0===c?function(){}:c,p=e.placeholder,g=e.prepend,f=e.readOnly,b=e.searchable,v=e.selectOnTab,E=e.openOnFocus,N=e.variant,I=e.value,T=e.className,x=e.style,_=e.listStyle,j=d(e,["highlightFirstItemOnOpen","debounceTimeout","disabled","feedback","items","label","loadingText","onChange","placeholder","prepend","readOnly","searchable","selectOnTab","openOnFocus","variant","value","className","style","listStyle"]),k=w(i,l),F=k.items,P=k.loading,C=k.fetchItems,S=F.find((function(e){return I===e.value})),q=b?y:h;return t.createElement(m,Object.assign({selectedItem:S,onInputValueChange:C,onChange:u,value:I,highlightFirstItemOnOpen:n},j),t.createElement(O,{className:T,label:s,feedback:r,variant:N,style:x},t.createElement(q,{items:F,loading:P,loadingText:o,disabled:a,readOnly:f,placeholder:p,prepend:g,selectOnTab:v,openOnFocus:E,listStyle:_})))},exports.NativeDropdown=function(e){var n=e.className,l=e.disabled,r=void 0!==l&&l,s=e.readOnly,o=void 0!==s&&s,c=e.items,u=e.loadingText,m=e.prepend,p=e.style,g=e.label,f=e.variant,v=e.feedback,h=d(e,["className","disabled","readOnly","items","loadingText","prepend","style","label","variant","feedback"]),y=w(c),O=y.items,E=y.loading,N=t.createElement(i.DownArrowIcon,{inline:!0});return r||o?N=null:E&&(N=t.createElement(b,null,u)),t.createElement(a.InputGroup,{label:g,feedback:v,variant:f},t.createElement(a.BaseFormControl,{dark:!0,disabled:r,readOnly:o,prepend:m,append:N,className:n,style:p},t.createElement("select",Object.assign({"aria-invalid":"error"===f,className:"eds-form-control eds-dropdown",disabled:r||o},h),O.map((function(e){return t.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 n=require("@entur/utils"),t=e(require("react")),l=e(require("downshift")),a=require("@entur/form"),r=e(require("classnames")),i=require("@entur/icons"),s=require("@entur/a11y"),o=require("@entur/typography");function c(){return(c=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var l in t)Object.prototype.hasOwnProperty.call(t,l)&&(e[l]=t[l])}return e}).apply(this,arguments)}function d(e,n){if(null==e)return{};var t,l,a={},r=Object.keys(e);for(l=0;l<r.length;l++)n.indexOf(t=r[l])>=0||(a[t]=e[t]);return a}var u=t.createContext(null),m=function(e){var n=e.children,a=e.onChange,r=void 0===a?function(){}:a,i=e.onInputValueChange,s=void 0===i?function(){}:i,o=e.highlightFirstItemOnOpen,m=void 0!==o&&o,p=d(e,["children","onChange","onInputValueChange","highlightFirstItemOnOpen"]);return t.createElement(l,Object.assign({itemToString:function(e){return e?e.label:""},onStateChange:function(e,n){"selectedItem"in e?r(e.selectedItem,n):"inputValue"in e&&s(e.inputValue)},stateReducer:function(e,n){return m&&"isOpen"in n&&n.isOpen?c({},n,{highlightedIndex:0}):n}},p),(function(e){return t.createElement("div",{className:"eds-input-group"},t.createElement(u.Provider,{value:e},n))}))},p=function(){var e=t.useContext(u);if(!e)throw new Error("You need to wrap your component in a DownshiftProvider");return e},g=function(e){var n=e.items,l=d(e,["items"]),a=p(),i=a.highlightedIndex,s=a.isOpen,o=a.selectedItem,u=a.getItemProps,m=a.getMenuProps;return t.createElement("ul",Object.assign({className:r("eds-dropdown-list",{"eds-dropdown-list--open":s})},m(c({},l))),s?n.map((function(e,n){return t.createElement("li",Object.assign({className:r("eds-dropdown-list__item",{"eds-dropdown-list__item--highlighted":i===n,"eds-dropdown-list__item--selected":o===e})},u({key:e.value,item:e,index:n})),t.createElement("span",null,e.label),e.icons&&t.createElement("span",null,e.icons.map((function(e,n){return t.createElement(e,{key:n,inline:!0,className:"eds-dropdown-list__item-icon"})}))))})):null)},b=function(){var e=p();return t.createElement("button",Object.assign({},(0,e.getToggleButtonProps)({className:r("eds-dropdown__toggle-button",{"eds-dropdown__toggle-button--open":e.isOpen})}),{tabIndex:"-1"}),t.createElement(i.DownArrowIcon,null))},f=function(e){var n=e.children,l=d(e,["className","children"]);return t.createElement("div",Object.assign({className:r("eds-inline-spinner",r)},l),t.createElement("span",{className:"eds-inline-spinner__twirly-part"}),t.createElement(s.VisuallyHidden,null,n))},v=function(e){var n=e.children,l=e.className,r=e.items,i=e.loading,s=void 0!==i&&i,o=e.loadingText,u=void 0===o?"Loading...":o,m=e.listStyle,p=e.clearable,b=d(e,["children","className","items","loading","loadingText","placeholder","style","listStyle","clearable"]);return t.createElement("div",{className:"eds-dropdown-wrapper"},t.createElement(a.BaseFormControl,Object.assign({append:t.createElement(h,{clearable:p,loading:s,loadingText:u,readOnly:b.readOnly}),className:l,dark:!0},b),n),t.createElement(g,Object.assign({items:r,style:c({position:"absolute",top:"100%"},m)},b)))},y=function(e){var n=c({},e),l=p(),a=l.clearSelection,r=l.selectedItem;return t.createElement(t.Fragment,null,r&&t.createElement("button",Object.assign({className:"eds-dropdown__clear-button",type:"button",tabIndex:-1,onClick:function(){return a()}},n),t.createElement(i.CloseIcon,null)),r&&t.createElement("div",{className:"eds-dropdown__divider"}))},h=function(e){var n=e.clearable,l=e.readOnly;return e.loading?t.createElement(f,null,e.loadingText):l?null:n?t.createElement(t.Fragment,null,t.createElement(y,null)," ",t.createElement(b,null)):t.createElement(b,null)},O=function(e){var n=e.disabled,l=e.placeholder,a=void 0===l?"Vennligst velg":l,r=e.selectOnTab,i=void 0!==r&&r,s=e.openOnFocus,o=void 0!==s&&s,c=e.listStyle,u=d(e,["disabled","placeholder","selectOnTab","openOnFocus","listStyle"]),m=p(),g=m.getToggleButtonProps,b=m.selectedItem,f=m.selectHighlightedItem,y=m.openMenu;return t.createElement(v,Object.assign({disabled:n,listStyle:c},u),t.createElement("button",Object.assign({},g({className:"eds-form-control eds-dropdown__selected-item",style:{textAlign:"left"},disabled:n,type:"button",onKeyDown:function(e){i&&"Tab"===e.key&&f()},onFocus:function(){o&&y()}})),b?b.label:a))},E=function(e){var n=e.disabled,l=void 0!==n&&n,a=e.className,r=e.items,i=e.loading,s=e.loadingText,o=e.readOnly,u=void 0!==o&&o,m=e.prepend,g=e.selectOnTab,b=void 0!==g&&g,f=e.openOnFocus,y=void 0!==f&&f,h=e.listStyle,O=e.clearable,E=d(e,["disabled","className","items","loading","loadingText","readOnly","prepend","selectOnTab","openOnFocus","listStyle","clearable"]),w=p(),N=w.getInputProps,I=w.inputValue,T=w.selectHighlightedItem,x=w.openMenu,_=t.useMemo((function(){if(!I)return r;var e=new RegExp(I,"i");return r.filter((function(n){return e.test(n.label)}))}),[I,r]);return t.createElement(v,{items:_,disabled:l,readOnly:u,className:a,loading:i,loadingText:s,prepend:m,listStyle:h,clearable:O},t.createElement("input",Object.assign({},N(c({disabled:l,readOnly:u,className:"eds-form-control eds-dropdown__input",onKeyDown:function(e){b&&"Tab"===e.key&&T()},onFocus:function(){y&&x()}},E)))))},w=function(e){var n=e.children,l=e.label,r=e.feedback,i=e.variant,s=e.className,c=e.style,d=p();return t.createElement(a.VariantProvider,{variant:i},t.createElement("div",{className:s,style:c},l&&t.createElement(o.Label,Object.assign({},(0,d.getLabelProps)(),{style:{display:"block"}}),l),n,r&&i&&t.createElement(a.FeedbackText,{variant:i},r)))},N=function(e,n){switch(n.type){case"request results":return{items:[],loading:!0};case"received results":return{items:n.payload,loading:!1}}},I=function(e,l){void 0===l&&(l=250);var a,r="function"==typeof e,i=t.useMemo((function(){return r?e:function(){return Promise.resolve(e)}}),[e,r]),s=t.useReducer(N,{items:r?[]:e,loading:!1}),o=s[0],d=o.items,u=o.loading,m=s[1],p=(a=t.useRef(!0),t.useEffect((function(){return function(){a.current=!1}}),[]),a.current),g=t.useCallback((function(e){try{return p?(m({type:"request results"}),Promise.resolve(i(e)).then((function(e){p&&m({type:"received results",payload:e})}))):Promise.resolve()}catch(e){return Promise.reject(e)}}),[i,p]),b=function(e){return t.useMemo((function(){return e.map((function(e){return"string"==typeof e?{value:e,label:e}:"value"in e?e:c({},e,{value:e.label})}))}),[e])}(d);return t.useEffect((function(){r&&g("")}),[r,g]),{items:b,loading:!!r&&u,fetchItems:n.debounce(g,l)}};n.warnAboutMissingStyles("dropdown","form","a11y"),exports.Dropdown=function(e){var n=e.highlightFirstItemOnOpen,l=e.debounceTimeout,a=e.disabled,r=e.feedback,i=e.items,s=e.label,o=e.loadingText,c=e.onChange,u=void 0===c?function(){}:c,p=e.placeholder,g=e.prepend,b=e.readOnly,f=e.searchable,v=e.selectOnTab,y=e.openOnFocus,h=e.variant,N=e.value,T=e.clearable,x=void 0!==T&&T,_=e.className,j=e.style,k=e.listStyle,F=d(e,["highlightFirstItemOnOpen","debounceTimeout","disabled","feedback","items","label","loadingText","onChange","placeholder","prepend","readOnly","searchable","selectOnTab","openOnFocus","variant","value","clearable","className","style","listStyle"]),C=I(i,l),P=C.items,S=C.loading,q=C.fetchItems,V=P.find((function(e){return N===e.value})),M=f?E:O;return t.createElement(m,Object.assign({selectedItem:V,onInputValueChange:q,onChange:u,value:N,highlightFirstItemOnOpen:n},F),t.createElement(w,{className:_,label:s,feedback:r,variant:h,style:j},t.createElement(M,{items:P,loading:S,loadingText:o,disabled:a,readOnly:b,placeholder:p,prepend:g,selectOnTab:v,openOnFocus:y,listStyle:k,clearable:x})))},exports.NativeDropdown=function(e){var n=e.className,l=e.disabled,r=void 0!==l&&l,s=e.readOnly,o=void 0!==s&&s,c=e.items,u=e.loadingText,m=e.prepend,p=e.style,g=e.label,b=e.variant,v=e.feedback,y=d(e,["className","disabled","readOnly","items","loadingText","prepend","style","label","variant","feedback"]),h=I(c),O=h.items,E=h.loading,w=t.createElement(i.DownArrowIcon,{inline:!0});return r||o?w=null:E&&(w=t.createElement(f,null,u)),t.createElement(a.InputGroup,{label:g,feedback:v,variant:b},t.createElement(a.BaseFormControl,{dark:!0,disabled:r,readOnly:o,prepend:m,append:w,className:n,style:p},t.createElement("select",Object.assign({"aria-invalid":"error"===b,className:"eds-form-control eds-dropdown",disabled:r||o},y),O.map((function(e){return t.createElement("option",{key:e.value,value:e.value},e.label)})))))};
 //# sourceMappingURL=dropdown.cjs.production.min.js.map

dist/Dropdown.d.ts

@@ -36,2 +36,6 @@ import React from 'react';
     debounceTimeout?: number;
+    /** Om man skal ha muliget for å nullstille Dropdownen
+     * @default false
+     */
+    clearable?: boolean;
     /** Ekstra klassenavn */
@@ -38,0 +42,0 @@ className?: string;

dist/dropdown.esm.js

@@ -6,3 +6,3 @@ import { debounce, warnAboutMissingStyles } from '@entur/utils';
 import classNames from 'classnames';
-import { DownArrowIcon } from '@entur/icons';
+import { DownArrowIcon, CloseIcon } from '@entur/icons';
 import { VisuallyHidden } from '@entur/a11y';
@@ -149,5 +149,3 @@ import { Label } from '@entur/typography';
     tabIndex: "-1"
-  }), React.createElement(DownArrowIcon, {
-    inline: true
-  }));
+  }), React.createElement(DownArrowIcon, null));
 };
@@ -170,7 +168,9 @@
       items = _ref.items,
-      loading = _ref.loading,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
       _ref$loadingText = _ref.loadingText,
       loadingText = _ref$loadingText === void 0 ? 'Loading...' : _ref$loadingText,
       listStyle = _ref.listStyle,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "items", "loading", "loadingText", "placeholder", "style", "listStyle"]);
+      clearable = _ref.clearable,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "items", "loading", "loadingText", "placeholder", "style", "listStyle", "clearable"]);
 
@@ -180,3 +180,8 @@ return React.createElement("div", {
   }, React.createElement(BaseFormControl, Object.assign({
-    append: loading ? React.createElement(InlineSpinner, null, loadingText) : !rest.readOnly && React.createElement(DropdownToggleButton, null),
+    append: React.createElement(Appendix, {
+      clearable: clearable,
+      loading: loading,
+      loadingText: loadingText,
+      readOnly: rest.readOnly
+    }),
     className: className,
@@ -193,2 +198,38 @@ dark: true
 
+var ClearButton = function ClearButton(_ref2) {
+  var props = _extends({}, _ref2);
+
+  var _useDownshift = useDownshift(),
+      clearSelection = _useDownshift.clearSelection,
+      selectedItem = _useDownshift.selectedItem;
+
+  return React.createElement(React.Fragment, null, selectedItem && React.createElement("button", Object.assign({
+    className: "eds-dropdown__clear-button",
+    type: "button",
+    tabIndex: -1,
+    onClick: function onClick() {
+      return clearSelection();
+    }
+  }, props), React.createElement(CloseIcon, null)), selectedItem && React.createElement("div", {
+    className: "eds-dropdown__divider"
+  }));
+};
+
+var Appendix = function Appendix(_ref3) {
+  var clearable = _ref3.clearable,
+      loading = _ref3.loading,
+      loadingText = _ref3.loadingText,
+      readOnly = _ref3.readOnly;
+
+  if (loading) {
+    return React.createElement(InlineSpinner, null, loadingText);
+  }
+
+  if (readOnly) {
+    return null;
+  }
+
+  return clearable ? React.createElement(React.Fragment, null, React.createElement(ClearButton, null), " ", React.createElement(DropdownToggleButton, null)) : React.createElement(DropdownToggleButton, null);
+};
+
 var RegularDropdown = function RegularDropdown(_ref) {
@@ -249,3 +290,4 @@ var disabled = _ref.disabled,
       listStyle = _ref.listStyle,
-      rest = _objectWithoutPropertiesLoose(_ref, ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus", "listStyle"]);
+      clearable = _ref.clearable,
+      rest = _objectWithoutPropertiesLoose(_ref, ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus", "listStyle", "clearable"]);
 
@@ -276,3 +318,4 @@ var _useDownshift = useDownshift(),
     prepend: prepend,
-    listStyle: listStyle
+    listStyle: listStyle,
+    clearable: clearable
   }, React.createElement("input", Object.assign({}, getInputProps(_extends({
@@ -453,6 +496,8 @@ disabled: disabled,
       value = _ref.value,
+      _ref$clearable = _ref.clearable,
+      clearable = _ref$clearable === void 0 ? false : _ref$clearable,
       className = _ref.className,
       style = _ref.style,
       listStyle = _ref.listStyle,
-      rest = _objectWithoutPropertiesLoose(_ref, ["highlightFirstItemOnOpen", "debounceTimeout", "disabled", "feedback", "items", "label", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "searchable", "selectOnTab", "openOnFocus", "variant", "value", "className", "style", "listStyle"]);
+      rest = _objectWithoutPropertiesLoose(_ref, ["highlightFirstItemOnOpen", "debounceTimeout", "disabled", "feedback", "items", "label", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "searchable", "selectOnTab", "openOnFocus", "variant", "value", "clearable", "className", "style", "listStyle"]);
 
@@ -490,3 +535,4 @@ var _useResolvedItems = useResolvedItems(items, debounceTimeout),
     openOnFocus: openOnFocus,
-    listStyle: listStyle
+    listStyle: listStyle,
+    clearable: clearable
   })));
@@ -493,0 +539,0 @@ };

dist/SearchableDropdown.d.ts

@@ -17,2 +17,3 @@ import React from 'react';
     };
+    clearable: boolean;
     [key: string]: any;
@@ -19,0 +20,0 @@ };

package.json

 {
   "name": "@entur/dropdown",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "license": "EUPL-1.2",
@@ -30,5 +30,5 @@ "main": "dist/index.js",
   "dependencies": {
-    "@entur/a11y": "^0.2.14",
-    "@entur/form": "^2.3.4",
-    "@entur/tokens": "^1.2.0",
+    "@entur/a11y": "^0.2.15",
+    "@entur/form": "^2.3.5",
+    "@entur/tokens": "^1.2.1",
     "@entur/utils": "^0.2.3",
@@ -38,3 +38,3 @@ "classnames": "^2.2.6",
   },
-  "gitHead": "a5971955ffbf0ff3321857549a5d7b37d004cf93"
+  "gitHead": "4adf368b06a4aaa92cf4d0f9934ab39179f42eb5"
 }

No alert changes

Improved metrics

Total package byte prevSize

189107

increased by6.41%

Lines of code

1467

increased by9.07%

Dependency changes

• Updated@entur/a11y@^0.2.15

• Updated@entur/form@^2.3.5

• Updated@entur/tokens@^1.2.1