@entur/dropdown - npm Package Compare versions

Comparing version 0.5.9 to 0.6.0

CHANGELOG.md

@@ -6,2 +6,15 @@ # Change Log
 
+# [0.6.0](https://bitbucket.org/enturas/design-system/compare/@entur/dropdown@0.5.9...@entur/dropdown@0.6.0) (2020-02-14)
+
+### Bug Fixes
+
+- decrease padding inside dropdown ([63b847f](https://bitbucket.org/enturas/design-system/commits/63b847f74fbbf9d0cb8806b8d1018548ca1d23bd))
+- Remove prop which is not used ([5c4758e](https://bitbucket.org/enturas/design-system/commits/5c4758ef37eeabf86ae6f79a3c5ff53a46003d0a))
+- **dropdown:** Only auto-highlight if the option has been set ([6127c1b](https://bitbucket.org/enturas/design-system/commits/6127c1be48bb16650ec354a592ab85ce59e5e951))
+
+### Features
+
+- **dropdown:** ability to style dropdown list directly ([9449090](https://bitbucket.org/enturas/design-system/commits/94490901e196b78d95d9136d3aaa41b8a993b517))
+- **dropdown:** Add option for auto highlighting the first result ([2833e24](https://bitbucket.org/enturas/design-system/commits/2833e24256eb7f0cf9198eae9fda2d720e8b9fc9))
+
 ## [0.5.9](https://bitbucket.org/enturas/design-system/compare/@entur/dropdown@0.5.8...@entur/dropdown@0.5.9) (2020-02-12)
@@ -8,0 +21,0 @@

dist/BaseDropdown.d.ts

@@ -14,2 +14,5 @@ import React from 'react';
     };
+    listStyle?: {
+        [key: string]: any;
+    };
     [key: string]: any;
@@ -16,0 +19,0 @@ };

dist/DownshiftProvider.d.ts

@@ -9,2 +9,3 @@ import React from 'react';
     initialSelectedItem?: NormalizedDropdownItemType;
+    highlightFirstItemOnOpen?: boolean;
     [key: string]: any;
@@ -11,0 +12,0 @@ };

dist/dropdown.cjs.development.js

@@ -58,3 +58,5 @@ 'use strict';
       onInputValueChange = _ref$onInputValueChan === void 0 ? function () {} : _ref$onInputValueChan,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "onChange", "onInputValueChange"]);
+      _ref$highlightFirstIt = _ref.highlightFirstItemOnOpen,
+      highlightFirstItemOnOpen = _ref$highlightFirstIt === void 0 ? false : _ref$highlightFirstIt,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "onChange", "onInputValueChange", "highlightFirstItemOnOpen"]);
 
@@ -69,2 +71,16 @@ var handleStateChange = function handleStateChange(changes, stateAndHelpers) {
 
+  var stateReducer = function stateReducer(_, changes) {
+    if (highlightFirstItemOnOpen) {
+      var wasJustOpened = 'isOpen' in changes && changes.isOpen;
+
+      if (wasJustOpened) {
+        return _extends({}, changes, {
+          highlightedIndex: 0
+        });
+      }
+    }
+
+    return changes;
+  };
+
   return React.createElement(Downshift, Object.assign({
@@ -74,3 +90,4 @@ itemToString: function itemToString(item) {
     },
-    onStateChange: handleStateChange
+    onStateChange: handleStateChange,
+    stateReducer: stateReducer
   }, rest), function (args) {
@@ -163,4 +180,4 @@ return React.createElement("div", {
       loadingText = _ref$loadingText === void 0 ? 'Loading...' : _ref$loadingText,
-      style = _ref.style,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "items", "loading", "loadingText", "placeholder", "style"]);
+      listStyle = _ref.listStyle,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "items", "loading", "loadingText", "placeholder", "style", "listStyle"]);
 
@@ -178,3 +195,3 @@ return React.createElement("div", {
       top: '100%'
-    }, style)
+    }, listStyle)
   }, rest)));
@@ -191,3 +208,4 @@ };
       openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
-      rest = _objectWithoutPropertiesLoose(_ref, ["disabled", "placeholder", "selectOnTab", "openOnFocus"]);
+      listStyle = _ref.listStyle,
+      rest = _objectWithoutPropertiesLoose(_ref, ["disabled", "placeholder", "selectOnTab", "openOnFocus", "listStyle"]);
 
@@ -201,3 +219,4 @@ var _useDownshift = useDownshift(),
   return React.createElement(BaseDropdown, Object.assign({
-    disabled: disabled
+    disabled: disabled,
+    listStyle: listStyle
   }, rest), React.createElement("button", Object.assign({}, getToggleButtonProps({
@@ -237,3 +256,4 @@ className: 'eds-form-control eds-dropdown__selected-item',
       openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
-      rest = _objectWithoutPropertiesLoose(_ref, ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus"]);
+      listStyle = _ref.listStyle,
+      rest = _objectWithoutPropertiesLoose(_ref, ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus", "listStyle"]);
 
@@ -263,3 +283,4 @@ var _useDownshift = useDownshift(),
     loadingText: loadingText,
-    prepend: prepend
+    prepend: prepend,
+    listStyle: listStyle
   }, React.createElement("input", Object.assign({}, getInputProps(_extends({
@@ -423,3 +444,4 @@ disabled: disabled,
 var Dropdown = function Dropdown(_ref) {
-  var debounceTimeout = _ref.debounceTimeout,
+  var highlightFirstItemOnOpen = _ref.highlightFirstItemOnOpen,
+      debounceTimeout = _ref.debounceTimeout,
       disabled = _ref.disabled,
@@ -442,3 +464,4 @@ feedback = _ref.feedback,
       style = _ref.style,
-      rest = _objectWithoutPropertiesLoose(_ref, ["debounceTimeout", "disabled", "feedback", "items", "label", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "searchable", "selectOnTab", "openOnFocus", "variant", "value", "className", "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"]);
 
@@ -458,3 +481,4 @@ var _useResolvedItems = useResolvedItems(items, debounceTimeout),
     onChange: onChange,
-    value: value
+    value: value,
+    highlightFirstItemOnOpen: highlightFirstItemOnOpen
   }, rest), React.createElement(DropdownInputGroup, {
@@ -475,3 +499,4 @@ className: className,
     selectOnTab: selectOnTab,
-    openOnFocus: openOnFocus
+    openOnFocus: openOnFocus,
+    listStyle: listStyle
   })));
@@ -478,0 +503,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")),a=e(require("downshift")),r=require("@entur/form"),l=e(require("classnames")),o=require("@entur/icons"),i=require("@entur/a11y"),s=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 a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e}).apply(this,arguments)}function d(e,n){if(null==e)return{};var t,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n.indexOf(t=l[a])>=0||(r[t]=e[t]);return r}var u=t.createContext(null),m=function(e){var n=e.children,r=e.onChange,l=void 0===r?function(){}:r,o=e.onInputValueChange,i=void 0===o?function(){}:o,s=d(e,["children","onChange","onInputValueChange"]);return t.createElement(a,Object.assign({itemToString:function(e){return e?e.label:""},onStateChange:function(e,n){"selectedItem"in e?l(e.selectedItem,n):"inputValue"in e&&i(e.inputValue)}},s),(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},b=function(e){var n=e.items,a=d(e,["items"]),r=p(),o=r.highlightedIndex,i=r.isOpen,s=r.selectedItem,u=r.getItemProps,m=r.getMenuProps;return t.createElement("ul",Object.assign({className:l("eds-dropdown-list",{"eds-dropdown-list--open":i})},m(c({},a))),i?n.map((function(e,n){return t.createElement("li",Object.assign({className:l("eds-dropdown-list__item",{"eds-dropdown-list__item--highlighted":o===n,"eds-dropdown-list__item--selected":s===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:l("eds-dropdown__toggle-button",{"eds-dropdown__toggle-button--open":e.isOpen})}),{tabIndex:"-1"}),t.createElement(o.DownArrowIcon,{inline:!0}))},g=function(e){var n=e.children,a=d(e,["className","children"]);return t.createElement("div",Object.assign({className:l("eds-inline-spinner",l)},a),t.createElement("span",{className:"eds-inline-spinner__twirly-part"}),t.createElement(i.VisuallyHidden,null,n))},v=function(e){var n=e.children,a=e.className,l=e.items,o=e.loading,i=e.loadingText,s=void 0===i?"Loading...":i,u=e.style,m=d(e,["children","className","items","loading","loadingText","placeholder","style"]);return t.createElement("div",{className:"eds-dropdown-wrapper"},t.createElement(r.BaseFormControl,Object.assign({append:o?t.createElement(g,null,s):!m.readOnly&&t.createElement(f,null),className:a,dark:!0},m),n),t.createElement(b,Object.assign({items:l,style:c({position:"absolute",top:"100%"},u)},m)))},y=function(e){var n=e.disabled,a=e.placeholder,r=void 0===a?"Vennligst velg":a,l=e.selectOnTab,o=void 0!==l&&l,i=e.openOnFocus,s=void 0!==i&&i,c=d(e,["disabled","placeholder","selectOnTab","openOnFocus"]),u=p(),m=u.getToggleButtonProps,b=u.selectedItem,f=u.selectHighlightedItem,g=u.openMenu;return t.createElement(v,Object.assign({disabled:n},c),t.createElement("button",Object.assign({},m({className:"eds-form-control eds-dropdown__selected-item",style:{textAlign:"left"},disabled:n,type:"button",onKeyDown:function(e){o&&"Tab"===e.key&&f()},onFocus:function(){s&&g()}})),b?b.label:r))},h=function(e){var n=e.disabled,a=void 0!==n&&n,r=e.className,l=e.items,o=e.loading,i=e.loadingText,s=e.readOnly,u=void 0!==s&&s,m=e.prepend,b=e.selectOnTab,f=void 0!==b&&b,g=e.openOnFocus,y=void 0!==g&&g,h=d(e,["disabled","className","items","loading","loadingText","readOnly","prepend","selectOnTab","openOnFocus"]),O=p(),E=O.getInputProps,w=O.inputValue,N=O.selectHighlightedItem,T=O.openMenu,x=t.useMemo((function(){if(!w)return l;var e=new RegExp(w,"i");return l.filter((function(n){return e.test(n.label)}))}),[w,l]);return t.createElement(v,{items:x,disabled:a,readOnly:u,className:r,loading:o,loadingText:i,prepend:m},t.createElement("input",Object.assign({},E(c({disabled:a,readOnly:u,className:"eds-form-control eds-dropdown__input",onKeyDown:function(e){f&&"Tab"===e.key&&N()},onFocus:function(){y&&T()}},h)))))},O=function(e){var n=e.children,a=e.label,l=e.feedback,o=e.variant,i=e.className,c=e.style,d=p();return t.createElement(r.VariantProvider,{variant:o},t.createElement("div",{className:i,style:c},a&&t.createElement(s.Label,Object.assign({},(0,d.getLabelProps)(),{style:{display:"block"}}),a),n,l&&o&&t.createElement(r.FeedbackText,{variant:o},l)))},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,a){void 0===a&&(a=250);var r,l="function"==typeof e,o=t.useMemo((function(){return l?e:function(){return Promise.resolve(e)}}),[e,l]),i=t.useReducer(E,{items:l?[]:e,loading:!1}),s=i[0],d=s.items,u=s.loading,m=i[1],p=(r=t.useRef(!0),t.useEffect((function(){return function(){r.current=!1}}),[]),r.current),b=t.useCallback((function(e){try{return p?(m({type:"request results"}),Promise.resolve(o(e)).then((function(e){p&&m({type:"received results",payload:e})}))):Promise.resolve()}catch(e){return Promise.reject(e)}}),[o,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(){l&&b("")}),[l,b]),{items:f,loading:!!l&&u,fetchItems:n.debounce(b,a)}};n.warnAboutMissingStyles("dropdown","form","a11y"),exports.Dropdown=function(e){var n=e.debounceTimeout,a=e.disabled,r=e.feedback,l=e.items,o=e.label,i=e.loadingText,s=e.onChange,c=void 0===s?function(){}:s,u=e.placeholder,p=e.prepend,b=e.readOnly,f=e.searchable,g=e.selectOnTab,v=e.openOnFocus,E=e.variant,N=e.value,T=e.className,x=e.style,_=d(e,["debounceTimeout","disabled","feedback","items","label","loadingText","onChange","placeholder","prepend","readOnly","searchable","selectOnTab","openOnFocus","variant","value","className","style"]),j=w(l,n),I=j.items,k=j.loading,P=j.fetchItems,C=I.find((function(e){return N===e.value})),F=f?h:y;return t.createElement(m,Object.assign({selectedItem:C,onInputValueChange:P,onChange:c,value:N},_),t.createElement(O,{className:T,label:o,feedback:r,variant:E,style:x},t.createElement(F,{items:I,loading:k,loadingText:i,disabled:a,readOnly:b,placeholder:u,prepend:p,selectOnTab:g,openOnFocus:v})))},exports.NativeDropdown=function(e){var n=e.className,a=e.disabled,l=void 0!==a&&a,i=e.readOnly,s=void 0!==i&&i,c=e.items,u=e.loadingText,m=e.prepend,p=e.style,b=e.label,f=e.variant,v=e.feedback,y=d(e,["className","disabled","readOnly","items","loadingText","prepend","style","label","variant","feedback"]),h=w(c),O=h.items,E=h.loading,N=t.createElement(o.DownArrowIcon,{inline:!0});return l||s?N=null:E&&(N=t.createElement(g,null,u)),t.createElement(r.InputGroup,{label:b,feedback:v,variant:f},t.createElement(r.BaseFormControl,{dark:!0,disabled:l,readOnly:s,prepend:m,append:N,className:n,style:p},t.createElement("select",Object.assign({"aria-invalid":"error"===f,className:"eds-form-control eds-dropdown",disabled:l||s},y),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)},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)})))))};
 //# sourceMappingURL=dropdown.cjs.production.min.js.map

dist/Dropdown.d.ts

@@ -38,2 +38,8 @@ import React from 'react';
     className?: string;
+    /** Marker første valgmulighet automatisk */
+    highlightFirstItemOnOpen?: boolean;
+    /** Styling som sendes ned til Dropdown-lista */
+    listStyle?: {
+        [key: string]: any;
+    };
     /** Alle ekstra props videresendes til Downshift */
@@ -40,0 +46,0 @@ [key: string]: any;

dist/dropdown.esm.js

@@ -52,3 +52,5 @@ import { debounce, warnAboutMissingStyles } from '@entur/utils';
       onInputValueChange = _ref$onInputValueChan === void 0 ? function () {} : _ref$onInputValueChan,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "onChange", "onInputValueChange"]);
+      _ref$highlightFirstIt = _ref.highlightFirstItemOnOpen,
+      highlightFirstItemOnOpen = _ref$highlightFirstIt === void 0 ? false : _ref$highlightFirstIt,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "onChange", "onInputValueChange", "highlightFirstItemOnOpen"]);
 
@@ -63,2 +65,16 @@ var handleStateChange = function handleStateChange(changes, stateAndHelpers) {
 
+  var stateReducer = function stateReducer(_, changes) {
+    if (highlightFirstItemOnOpen) {
+      var wasJustOpened = 'isOpen' in changes && changes.isOpen;
+
+      if (wasJustOpened) {
+        return _extends({}, changes, {
+          highlightedIndex: 0
+        });
+      }
+    }
+
+    return changes;
+  };
+
   return React.createElement(Downshift, Object.assign({
@@ -68,3 +84,4 @@ itemToString: function itemToString(item) {
     },
-    onStateChange: handleStateChange
+    onStateChange: handleStateChange,
+    stateReducer: stateReducer
   }, rest), function (args) {
@@ -157,4 +174,4 @@ return React.createElement("div", {
       loadingText = _ref$loadingText === void 0 ? 'Loading...' : _ref$loadingText,
-      style = _ref.style,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "items", "loading", "loadingText", "placeholder", "style"]);
+      listStyle = _ref.listStyle,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "items", "loading", "loadingText", "placeholder", "style", "listStyle"]);
 
@@ -172,3 +189,3 @@ return React.createElement("div", {
       top: '100%'
-    }, style)
+    }, listStyle)
   }, rest)));
@@ -185,3 +202,4 @@ };
       openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
-      rest = _objectWithoutPropertiesLoose(_ref, ["disabled", "placeholder", "selectOnTab", "openOnFocus"]);
+      listStyle = _ref.listStyle,
+      rest = _objectWithoutPropertiesLoose(_ref, ["disabled", "placeholder", "selectOnTab", "openOnFocus", "listStyle"]);
 
@@ -195,3 +213,4 @@ var _useDownshift = useDownshift(),
   return React.createElement(BaseDropdown, Object.assign({
-    disabled: disabled
+    disabled: disabled,
+    listStyle: listStyle
   }, rest), React.createElement("button", Object.assign({}, getToggleButtonProps({
@@ -231,3 +250,4 @@ className: 'eds-form-control eds-dropdown__selected-item',
       openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
-      rest = _objectWithoutPropertiesLoose(_ref, ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus"]);
+      listStyle = _ref.listStyle,
+      rest = _objectWithoutPropertiesLoose(_ref, ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus", "listStyle"]);
 
@@ -257,3 +277,4 @@ var _useDownshift = useDownshift(),
     loadingText: loadingText,
-    prepend: prepend
+    prepend: prepend,
+    listStyle: listStyle
   }, React.createElement("input", Object.assign({}, getInputProps(_extends({
@@ -417,3 +438,4 @@ disabled: disabled,
 var Dropdown = function Dropdown(_ref) {
-  var debounceTimeout = _ref.debounceTimeout,
+  var highlightFirstItemOnOpen = _ref.highlightFirstItemOnOpen,
+      debounceTimeout = _ref.debounceTimeout,
       disabled = _ref.disabled,
@@ -436,3 +458,4 @@ feedback = _ref.feedback,
       style = _ref.style,
-      rest = _objectWithoutPropertiesLoose(_ref, ["debounceTimeout", "disabled", "feedback", "items", "label", "loadingText", "onChange", "placeholder", "prepend", "readOnly", "searchable", "selectOnTab", "openOnFocus", "variant", "value", "className", "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"]);
 
@@ -452,3 +475,4 @@ var _useResolvedItems = useResolvedItems(items, debounceTimeout),
     onChange: onChange,
-    value: value
+    value: value,
+    highlightFirstItemOnOpen: highlightFirstItemOnOpen
   }, rest), React.createElement(DropdownInputGroup, {
@@ -469,3 +493,4 @@ className: className,
     selectOnTab: selectOnTab,
-    openOnFocus: openOnFocus
+    openOnFocus: openOnFocus,
+    listStyle: listStyle
   })));
@@ -472,0 +497,0 @@ };

dist/RegularDropdown.d.ts

@@ -12,2 +12,5 @@ import React from 'react';
     openOnFocus?: boolean;
+    listStyle?: {
+        [key: string]: any;
+    };
     [key: string]: any;
@@ -14,0 +17,0 @@ };

dist/SearchableDropdown.d.ts

@@ -14,2 +14,5 @@ import React from 'react';
     openOnFocus?: boolean;
+    listStyle?: {
+        [key: string]: any;
+    };
     [key: string]: any;
@@ -16,0 +19,0 @@ };

package.json

 {
   "name": "@entur/dropdown",
-  "version": "0.5.9",
+  "version": "0.6.0",
   "license": "EUPL-1.2",
@@ -30,4 +30,4 @@ "main": "dist/index.js",
   "dependencies": {
-    "@entur/a11y": "^0.2.13",
-    "@entur/form": "^2.3.3",
+    "@entur/a11y": "^0.2.14",
+    "@entur/form": "^2.3.4",
     "@entur/tokens": "^1.2.0",
@@ -38,3 +38,3 @@ "@entur/utils": "^0.2.3",
   },
-  "gitHead": "9f26fade88356576a3fab8b2c1766396b1f9c1a7"
+  "gitHead": "a5971955ffbf0ff3321857549a5d7b37d004cf93"
 }

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

177711

increased by4.93%

Lines of code

1345

increased by5.24%

Dependency changes

• Updated@entur/a11y@^0.2.14

• Updated@entur/form@^2.3.4