@redradix/components.select - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

Custom.js

@@ -36,2 +36,4 @@ import React from 'react'
   isDisabled: PropTypes.bool,
+  /** Boolean that defines whether the <select> is required */
+  isRequired: PropTypes.bool,
   /** Boolean that specifies whether the <select> field has been modified */
@@ -38,0 +40,0 @@ isTouched: PropTypes.bool,

dist/index.js

@@ -1,2 +0,2 @@
-!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react"),require("classnames"),require("react-select")):"function"==typeof define&&define.amd?define(["react","classnames","react-select"],r):"object"==typeof exports?exports.select=r(require("react"),require("classnames"),require("react-select")):(e.components=e.components||{},e.components.select=r(e.react,e.classnames,e["react-select"]))}(window,function(e,r,n){return function(e){var r={};function n(t){if(r[t])return r[t].exports;var a=r[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=r,n.d=function(e,r,t){n.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,r){if(1&r&&(e=n(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(n.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var a in e)n.d(t,a,function(r){return e[r]}.bind(null,a));return t},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},n.p="",n(n.s=3)}([function(r,n){r.exports=e},function(e,n){e.exports=r},function(e,r){e.exports=n},function(e,r,n){e.exports=n(4)},function(e,r,n){"use strict";n.r(r);var t=n(0),a=n.n(t),o=n(2),i=n.n(o);function l(e,r){if(null==e)return{};var n,t,a=function(e,r){if(null==e)return{};var n,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)n=o[t],r.indexOf(n)>=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)n=o[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function s(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function c(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.forEach(function(r){s(e,r,n[r])})}return e}var u=n(1),d=n.n(u);function p(){return(p=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}var f=a.a.createElement("title",{id:"close-title"},"Close icon"),m=a.a.createElement("desc",{id:"close-description"},"Close icon in svg"),h=a.a.createElement("path",{d:"M12 10.586l5.293-5.293a1 1 0 0 1 1.414 1.414L13.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414L12 13.414l-5.293 5.293a1 1 0 1 1-1.414-1.414L10.586 12 5.293 6.707a1 1 0 0 1 1.414-1.414L12 10.586z"}),v=function(e){return a.a.createElement("svg",p({width:24,height:24,viewBox:"0 0 24 24","aria-labelledby":"close-title close-description",role:"img"},e),f,m,h)},b=function(e){for(var r=arguments.length,n=new Array(r>1?r-1:0),t=1;t<r;t++)n[t-1]=arguments[t];return"function"==typeof e&&e.apply(void 0,n)},x=function(e){return!(e&&Object.keys(e).length)},w=function(e){return"dynamic"===e.componentsProps.behaviour&&x(e.value)},P=function(e){return e.placeholder!==e.componentsProps.label&&w(e)},g={ClearIndicator:function(e){var r=e.innerProps,n=e.selectProps;return b(n.componentsProps.renderClearIcon,c({},r,{className:"".concat("rdx-icon"," rdx-select-field-icon-clear")}))},Control:function(e){var r=e.selectProps,n=e.innerProps,t=e.innerRef,o=e.children;return a.a.createElement("div",Object.assign({"aria-expanded":r.menuIsOpen,className:"rdx-select-field-wrapper",ref:t},n),o,r.componentsProps.label&&a.a.createElement("label",{className:"rdx-select-field-label",htmlFor:r.id},r.componentsProps.label))},DropdownIndicator:function(e){var r=e.selectProps,n=e.innerProps;return b(r.componentsProps.renderDownIcon,c({},n,{className:"".concat("rdx-icon"," rdx-select-field-icon-open")}))},IndicatorsContainer:function(e){var r=e.children;return a.a.createElement("div",{className:"rdx-select-field-icons-wrapper"},r)},IndicatorSeparator:function(){return null},Input:function(e){var r=e.selectProps,n=e.innerRef,t=e.isDisabled,o=l(e,["selectProps","innerRef","isDisabled"]),i=!x(r.value)&&r.componentsProps.searchHint,s=d()("rdx-select-field-select",{"is-hidden":!r.isMulti&&r.value});return a.a.createElement("input",Object.assign({className:s,disabled:t,ref:n},o,{placeholder:i?r.componentsProps.searchHint:void 0}))},Menu:function(e){var r=e.innerRef,n=e.innerProps,t=e.children;return a.a.createElement("div",Object.assign({className:"rdx-select-field-items",ref:r},n),t)},MenuList:function(e){var r=e.innerRef,n=e.children;return a.a.createElement("ul",{"aria-label":"submenu",ref:r},n)},MultiValue:function(e){var r=e.children,n=e.data,t=e.removeProps,o=e.isFocused,i=d()("rdx-select-field-tag",{"is-fixed":n.isFixed,"is-focused":o});return a.a.createElement("button",{className:i,tabIndex:-1},a.a.createElement("p",null,r),!n.isFixed&&a.a.createElement("div",Object.assign({className:"rdx-select-field-icon-close",role:"button"},t),a.a.createElement(v,{className:"rdx-icon rdx-icon-close"})))},Option:function(e){var r=e.data,n=e.selectProps,t=e.isFocused,o=e.innerRef,i=e.innerProps,l=e.label,s=e.value,c=!n.isMulti&&n.value&&s===n.value.value&&!n.isDisabled,u=d()("rdx-select-field-option",{"is-disabled":r.isDisabled,"is-focused":t,"is-selected":c});return a.a.createElement("li",Object.assign({ref:o,className:u,"aria-selected":c,role:"option"},i),r.imgPath&&a.a.createElement("span",{className:"rdx-select-option-icon-wrapper"},a.a.createElement("img",{className:"rdx-select-option-icon",src:r.imgPath,alt:r.imgAlt})),a.a.createElement("span",null,l))},Placeholder:function(e){var r=e.children,n=e.selectProps;return w(n)&&!P(n)?null:a.a.createElement("div",{className:"rdx-select-field-placeholder"},r)},SelectContainer:function(e){var r=e.selectProps,n=e.innerProps,t=e.children,o=e.isFocused,i=d()("rdx-select-field rdx-select-field-".concat(r.componentsProps.appearance," is-custom"),{"has-error":r.componentsProps.hasError,"has-label":r.componentsProps.label,"has-width-fixed":"fixed"===r.componentsProps.widthBehaviour,"has-width-adaptative":"adaptative"===r.componentsProps.widthBehaviour,"has-height-fixed":"fixed"===r.componentsProps.heightBehaviour,"has-height-adaptative":"adaptative"===r.componentsProps.heightBehaviour,"has-width-full":"full"===r.componentsProps.widthBehaviour,"is-disabled":r.isDisabled,"is-dynamic":w(r),"is-fading":P(r),"is-focused":o,"is-multi":r.isMulti,"is-open-down":r.menuIsOpen&&"down"===r.componentsProps.dropDownPos,"is-open-up":r.menuIsOpen&&"up"===r.componentsProps.dropDownPos,"is-searchable":r.isSearchable,"is-touched":r.componentsProps.isTouched});return a.a.createElement("div",Object.assign({className:i},n),t,r.componentsProps.helperText&&!r.componentsProps.errorText?a.a.createElement("div",{className:"rdx-select-field-helper"},r.componentsProps.helperText):null,r.componentsProps.hasError&&!r.isDisabled?a.a.createElement("div",{className:"rdx-select-field-helper"},r.componentsProps.errorText):null)},SingleValue:function(e){var r=e.selectProps,n=e.children;return a.a.createElement(a.a.Fragment,null,r.options.map(function(e){return e.label===n&&e.imgPath?a.a.createElement("span",{className:"rdx-select-option-icon-wrapper"},a.a.createElement("img",{className:"rdx-select-option-icon",src:e.imgPath,alt:e.imgAlt})):null}),a.a.createElement("div",{className:"rdx-select-field-value"},n))},ValueContainer:function(e){return e.children}};function y(){return(y=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}var E=a.a.createElement("title",{id:"chevron-down-title"},"Chevron down icon"),O=a.a.createElement("desc",{id:"chevron-down-description"},"Chevron down icon in svg"),j=a.a.createElement("path",{d:"M19.293 7.293a1 1 0 0 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 1.414-1.414L12 14.586l7.293-7.293z"}),C=function(e){return a.a.createElement("svg",y({width:24,height:24,viewBox:"0 0 24 24","aria-labelledby":"chevron-down-title chevron-down-description",role:"img"},e),E,O,j)};function B(){return(B=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}var D=a.a.createElement("title",{id:"delete-title"},"Delete icon"),N=a.a.createElement("desc",{id:"delete-description"},"Delete icon in svg"),S=a.a.createElement("path",{d:"M20.182 4C21.73 4 23 5.222 23 6.75v10.5c0 1.528-1.27 2.75-2.818 2.75H8.364a1 1 0 0 1-.74-.327l-6.364-7a1 1 0 0 1 0-1.346l6.364-7A1 1 0 0 1 8.364 4h11.818zM8.806 18h11.376c.46 0 .818-.345.818-.75V6.75c0-.405-.358-.75-.818-.75H8.806l-5.455 6 5.455 6zm9.912-3.697a1 1 0 1 1-1.415 1.415L15 13.414l-2.303 2.304a1 1 0 1 1-1.415-1.415L13.586 12l-2.293-2.293a1 1 0 1 1 1.414-1.414L15 10.586l2.293-2.293a1 1 0 0 1 1.414 1.414L16.414 12l2.304 2.303z"}),M=function(e){return a.a.createElement("svg",B({width:24,height:24,viewBox:"0 0 24 24","aria-labelledby":"delete-title delete-description",role:"img"},e),D,N,S)},I=function(e){var r=e.appearance,n=e.ariaLabel,t=e.autoFocus,o=e.behaviour,l=e.defaultIsOpen,s=e.dropDownPos,c=e.errorText,u=e.heightBehaviour,d=e.helperText,p=e.id,f=e.isDisabled,m=e.isMulti,h=e.isSearchable,v=e.isTouched,b=e.label,x=e.name,w=e.onBlur,P=e.onChange,y=e.onClose,E=e.onFocus,O=e.onInputChange,j=e.onKeyDown,C=e.onOpen,B=e.options,D=e.placeholder,N=e.renderClearIcon,S=e.renderDownIcon,M=e.searchHint,I=e.value,F=e.widthBehaviour,T=c&&v;return a.a.createElement(i.a,{id:p,ariaLabel:n||b||p,autoFocus:t,defaultMenuIsOpen:l,placeholder:D,isDisabled:f,isMulti:m,isSearchable:h,name:x,options:B,value:I,isClearable:m&&I&&I.some(function(e){return!e.isFixed}),onBlur:w,onChange:function(e,r){var n=r.action,t=r.removedValue;switch(n){case"remove-value":case"pop-value":if(t.isFixed)return;break;case"clear":e=B.filter(function(e){return e.isFixed})}P(e,{action:n,removedValue:t})},onClose:y,onFocus:E,onInputChange:O,onKeyDown:j,onOpen:C,components:g,componentsProps:{renderClearIcon:N,renderDownIcon:S,label:b,hasError:T,behaviour:o,isTouched:v,heightBehaviour:u,widthBehaviour:F,appearance:r,dropDownPos:s,errorText:c,helperText:d,searchHint:M}})};I.defaultProps={appearance:"box",behaviour:"static",dropDownPos:"down",defaultIsOpen:!1,isSearchable:!0,renderDownIcon:function(e){return a.a.createElement(C,e)},renderClearIcon:function(e){return a.a.createElement(M,e)}};var F=I,T=function(e){return a.a.createElement(F,Object.assign({},e,{isSearchable:!1,isMulti:!0,behaviour:"static"}))};T.defaultProps={appearance:"box",dropDownPos:"down",defaultIsOpen:!1,renderClearIcon:function(){return null}};var L=T,A=function(e){return a.a.createElement(F,Object.assign({},e,{isSearchable:!1,isMulti:!1,behaviour:"static"}))};A.defaultProps={appearance:"box",dropDownPos:"down",defaultIsOpen:!1};var k=A;function V(e){return function(e){if(Array.isArray(e)){for(var r=0,n=new Array(e.length);r<e.length;r++)n[r]=e[r];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var q=function(e){var r=e.ariaLabel,n=e.autoComplete,t=e.autoFocus,o=e.hasError,i=e.id,l=e.isDisabled,s=(e.isTouched,e.name),c=e.onBlur,u=e.onChange,d=e.onFocus,p=e.options,f=e.placeholder,m=e.value,h=f?[{label:f,isDisabled:!0,selected:!0}].concat(V(p)):p;return a.a.createElement("select",{"aria-invalid":o,"aria-label":r,autoComplete:n,autoFocus:t,className:"rdx-select-field-select",disabled:l,id:i,name:s,onBlur:c,onChange:function(e){return u(p.find(function(r){return r.value===e.target.value}))},onFocus:d,value:m&&m.value},h.map(function(e,r){var n=e.value,t=e.label,o=e.isDisabled,i=e.selected;return a.a.createElement("option",{key:r,selected:void 0!==m&&n===m.value||i,value:n,disabled:o},t)}))};q.defaultProps={appearance:"box",autoComplete:"off"};var z=q,H=function(e){var r=e.appearance,n=e.ariaLabel,t=e.autoComplete,o=e.autoFocus,i=e.errorText,l=e.heightBehaviour,s=e.helperText,c=e.id,u=e.isDisabled,p=e.isTouched,f=e.label,m=e.name,h=e.options,v=e.onBlur,x=e.onChange,w=e.onFocus,P=e.placeholder,g=e.renderDownIcon,y=e.value,E=e.widthBehaviour,O=Boolean(i&&p),j="rdx-icon rdx-select-field-icon-open",B=d()("rdx-select-field rdx-select-field-".concat(r," is-native"),{"has-error":O,"has-label":f,"has-width-adaptative":"adaptative"===E,"has-width-fixed":"fixed"===E,"has-width-full":"full"===E,"has-height-adaptative":"adaptative"===l,"has-height-fixed":"fixed"===l,"is-disabled":u,"is-touched":p});return a.a.createElement("div",{className:B},a.a.createElement("div",{className:"rdx-select-field-wrapper"},a.a.createElement(z,{appearance:r,ariaLabel:n||f||m||c,autoComplete:t,autoFocus:o,hasError:O,id:c,isDisabled:u,isTouched:p,name:m,onBlur:v,onChange:x,onFocus:w,options:h,placeholder:P,value:y}),f&&a.a.createElement("label",{className:"rdx-select-field-label",htmlFor:c},f),a.a.createElement("div",{className:"rdx-select-field-icons-wrapper"},b(g,{className:j})||a.a.createElement(C,{className:j}))),s&&!i?a.a.createElement("div",{className:"rdx-select-field-helper"},s):null,O&&!u?a.a.createElement("div",{className:"rdx-select-field-helper"},i):null)};H.defaultProps={appearance:"box",autoComplete:"off"};var R=H,_=function(e){return void 0!==e.useNative?e.useNative:/Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Opera Mobile|Kindle|Windows Phone|PSP|AvantGo|Atomic Web Browser|Blazer|Chrome Mobile|Dolphin|Dolfin|Doris|GO Browser|Jasmine|MicroB|Mobile Firefox|Mobile Safari|Mobile Silk|Motorola Internet Browser|NetFront|NineSky|Nokia Web Browser|Obigo|Openwave Mobile Browser|Palm Pre web browser|Polaris|PS Vita browser|Puffin|QQbrowser|SEMC Browser|Skyfire|Tear|TeaShark|UC Browser|uZard Web|wOSBrowser|Yandex.Browser mobile/i.test(navigator.userAgent)},W=function(e){return _(e)?a.a.createElement(R,e):a.a.createElement(k,e)};n.d(r,"SelectMultiple",function(){return L}),n.d(r,"SelectSimple",function(){return W})}])});
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react"),require("classnames"),require("react-select")):"function"==typeof define&&define.amd?define(["react","classnames","react-select"],r):"object"==typeof exports?exports.select=r(require("react"),require("classnames"),require("react-select")):(e.components=e.components||{},e.components.select=r(e.react,e.classnames,e["react-select"]))}(window,function(e,r,n){return function(e){var r={};function n(t){if(r[t])return r[t].exports;var a=r[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=r,n.d=function(e,r,t){n.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,r){if(1&r&&(e=n(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(n.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var a in e)n.d(t,a,function(r){return e[r]}.bind(null,a));return t},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},n.p="",n(n.s=3)}([function(r,n){r.exports=e},function(e,n){e.exports=r},function(e,r){e.exports=n},function(e,r,n){e.exports=n(4)},function(e,r,n){"use strict";n.r(r);var t=n(0),a=n.n(t),o=n(2),i=n.n(o);function l(e,r){if(null==e)return{};var n,t,a=function(e,r){if(null==e)return{};var n,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)n=o[t],r.indexOf(n)>=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)n=o[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function s(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function c(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.forEach(function(r){s(e,r,n[r])})}return e}var u=n(1),d=n.n(u);function p(){return(p=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}var f=a.a.createElement("title",{id:"close-title"},"Close icon"),m=a.a.createElement("desc",{id:"close-description"},"Close icon in svg"),h=a.a.createElement("path",{d:"M12 10.586l5.293-5.293a1 1 0 0 1 1.414 1.414L13.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414L12 13.414l-5.293 5.293a1 1 0 1 1-1.414-1.414L10.586 12 5.293 6.707a1 1 0 0 1 1.414-1.414L12 10.586z"}),v=function(e){return a.a.createElement("svg",p({width:24,height:24,viewBox:"0 0 24 24","aria-labelledby":"close-title close-description",role:"img"},e),f,m,h)},b=function(e){for(var r=arguments.length,n=new Array(r>1?r-1:0),t=1;t<r;t++)n[t-1]=arguments[t];return"function"==typeof e&&e.apply(void 0,n)},x=function(e){return!(e&&Object.keys(e).length)},P=function(e){return"dynamic"===e.componentsProps.behaviour&&x(e.value)},w=function(e){return e.placeholder!==e.componentsProps.label&&P(e)},g=a.a.createElement("span",{className:"rdx-icon--require"},"*"),y={ClearIndicator:function(e){var r=e.innerProps,n=e.selectProps;return b(n.componentsProps.renderClearIcon,c({},r,{className:"".concat("rdx-icon rdx-select-field-icon"," rdx-select-field-icon-clear")}))},Control:function(e){var r=e.selectProps,n=e.innerProps,t=e.innerRef,o=e.children;return a.a.createElement("div",Object.assign({"aria-expanded":r.menuIsOpen,className:"rdx-select-field-wrapper",ref:t},n),o,r.componentsProps.label&&a.a.createElement("label",{className:"rdx-select-field-label",htmlFor:r.id},r.componentsProps.label,r.componentsProps.isRequired?g:null))},DropdownIndicator:function(e){var r=e.selectProps,n=e.innerProps;return b(r.componentsProps.renderDownIcon,c({},n,{className:"".concat("rdx-icon rdx-select-field-icon"," rdx-select-field-icon-open")}))},IndicatorsContainer:function(e){var r=e.children;return a.a.createElement("div",{className:"rdx-select-field-icons-wrapper"},r)},IndicatorSeparator:function(){return null},Input:function(e){var r=e.selectProps,n=e.innerRef,t=e.isDisabled,o=l(e,["selectProps","innerRef","isDisabled"]),i=!x(r.value)&&r.componentsProps.searchHint,s=d()("rdx-select-field-select",{"is-hidden":!r.isMulti&&r.value});return a.a.createElement("input",Object.assign({className:s,disabled:t,ref:n},o,{placeholder:i?r.componentsProps.searchHint:void 0}))},Menu:function(e){var r=e.innerRef,n=e.innerProps,t=e.children;return a.a.createElement("div",Object.assign({className:"rdx-select-field-items",ref:r},n),t)},MenuList:function(e){var r=e.innerRef,n=e.children;return a.a.createElement("ul",{"aria-label":"submenu",ref:r},n)},MultiValue:function(e){var r=e.children,n=e.data,t=e.removeProps,o=e.isFocused,i=d()("rdx-select-field-tag",{"is-fixed":n.isFixed,"is-focused":o});return a.a.createElement("button",{className:i,tabIndex:-1},a.a.createElement("p",null,r),!n.isFixed&&a.a.createElement("div",Object.assign({className:"rdx-select-field-icon-close",role:"button"},t),a.a.createElement(v,{className:"rdx-icon rdx-icon-close"})))},Option:function(e){var r=e.data,n=e.selectProps,t=e.isFocused,o=e.innerRef,i=e.innerProps,l=e.label,s=e.value,c=(e.onOptionClick,!n.isMulti&&n.value&&s===n.value.value&&!n.isDisabled),u=d()("rdx-select-field-option",{"is-disabled":r.isDisabled,"is-link":r.isLink,"is-focused":t,"is-selected":c});return a.a.createElement("li",Object.assign({ref:o,className:u,"aria-selected":c,role:"option"},i),r.imgPath&&a.a.createElement("span",{className:"rdx-select-option-image-wrapper"},a.a.createElement("img",{className:"rdx-select-option-image",src:r.imgPath,alt:r.imgAlt})),r.iconPath&&a.a.createElement("span",{className:"rdx-select-option-icon-wrapper"},b(r.iconPath,{className:"rdx-select-option-icon"})),a.a.createElement("span",null,l))},Placeholder:function(e){var r=e.children,n=e.selectProps;return P(n)&&!w(n)?null:a.a.createElement("div",{className:"rdx-select-field-placeholder"},r,n.componentsProps.isRequired&&!n.componentsProps.label?g:null)},SelectContainer:function(e){var r=e.selectProps,n=e.innerProps,t=e.children,o=e.isFocused,i=d()("rdx-select-field rdx-select-field-".concat(r.componentsProps.appearance," is-custom"),{"has-error":r.componentsProps.hasError,"has-label":r.componentsProps.label,"has-width-fixed":"fixed"===r.componentsProps.widthBehaviour,"has-width-adaptative":"adaptative"===r.componentsProps.widthBehaviour,"has-height-fixed":"fixed"===r.componentsProps.heightBehaviour,"has-height-adaptative":"adaptative"===r.componentsProps.heightBehaviour,"has-width-full":"full"===r.componentsProps.widthBehaviour,"is-disabled":r.isDisabled,"is-dynamic":P(r),"is-fading":w(r),"is-focused":o,"is-multi":r.isMulti,"is-open-down":r.menuIsOpen&&"down"===r.componentsProps.dropDownPos,"is-open-up":r.menuIsOpen&&"up"===r.componentsProps.dropDownPos,"is-required":r.componentsProps.isRequired,"is-searchable":r.isSearchable,"is-touched":r.componentsProps.isTouched});return a.a.createElement("div",Object.assign({className:i},n),t,r.componentsProps.helperText&&!r.componentsProps.errorText?a.a.createElement("div",{className:"rdx-select-field-helper"},r.componentsProps.helperText):null,r.componentsProps.hasError&&!r.isDisabled?a.a.createElement("div",{className:"rdx-select-field-helper"},r.componentsProps.errorText):null)},SingleValue:function(e){var r=e.selectProps,n=e.children;return a.a.createElement(t.Fragment,null,r.options.map(function(e){return e.label===n?e.imgPath?a.a.createElement("span",{className:"rdx-select-option-image-wrapper",key:e.value},a.a.createElement("img",{className:"rdx-select-option-image",src:e.imgPath,alt:e.imgAlt})):e.iconPath?a.a.createElement("span",{className:"rdx-select-option-icon-wrapper",key:e.value},b(e.iconPath,{className:"rdx-icon rdx-select-option-icon"})):null:null}),a.a.createElement("div",{className:"rdx-select-field-value"},n))},ValueContainer:function(e){return e.children}};function E(){return(E=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}var O=a.a.createElement("title",{id:"chevron-down-title"},"Chevron down icon"),N=a.a.createElement("desc",{id:"chevron-down-description"},"Chevron down icon in svg"),j=a.a.createElement("path",{d:"M19.293 7.293a1 1 0 0 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 1.414-1.414L12 14.586l7.293-7.293z"}),C=function(e){return a.a.createElement("svg",E({width:24,height:24,viewBox:"0 0 24 24","aria-labelledby":"chevron-down-title chevron-down-description",role:"img"},e),O,N,j)};function B(){return(B=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}var D=a.a.createElement("title",{id:"delete-title"},"Delete icon"),S=a.a.createElement("desc",{id:"delete-description"},"Delete icon in svg"),M=a.a.createElement("path",{d:"M20.182 4C21.73 4 23 5.222 23 6.75v10.5c0 1.528-1.27 2.75-2.818 2.75H8.364a1 1 0 0 1-.74-.327l-6.364-7a1 1 0 0 1 0-1.346l6.364-7A1 1 0 0 1 8.364 4h11.818zM8.806 18h11.376c.46 0 .818-.345.818-.75V6.75c0-.405-.358-.75-.818-.75H8.806l-5.455 6 5.455 6zm9.912-3.697a1 1 0 1 1-1.415 1.415L15 13.414l-2.303 2.304a1 1 0 1 1-1.415-1.415L13.586 12l-2.293-2.293a1 1 0 1 1 1.414-1.414L15 10.586l2.293-2.293a1 1 0 0 1 1.414 1.414L16.414 12l2.304 2.303z"}),I=function(e){return a.a.createElement("svg",B({width:24,height:24,viewBox:"0 0 24 24","aria-labelledby":"delete-title delete-description",role:"img"},e),D,S,M)},F=function(e){var r=e.appearance,n=e.ariaLabel,t=e.autoFocus,o=e.behaviour,l=e.defaultIsOpen,s=e.dropDownPos,c=e.errorText,u=e.heightBehaviour,d=e.helperText,p=e.id,f=e.isDisabled,m=e.isMulti,h=e.isRequired,v=e.isSearchable,b=e.isTouched,x=e.label,P=e.name,w=e.onBlur,g=e.onChange,E=e.onClose,O=e.onFocus,N=e.onInputChange,j=e.onKeyDown,C=e.onOpen,B=e.options,D=e.placeholder,S=e.renderClearIcon,M=e.renderDownIcon,I=e.searchHint,F=e.value,T=e.widthBehaviour,q=c&&b;return a.a.createElement(i.a,{id:p,ariaLabel:n||x||p,autoFocus:t,defaultMenuIsOpen:l,placeholder:D,isDisabled:f,isMulti:m,isSearchable:v,name:P,options:B,value:F,isClearable:m&&F&&F.some(function(e){return!e.isFixed}),onBlur:w,onChange:function(e,r){var n=r.action,t=r.removedValue;switch(n){case"remove-value":case"pop-value":if(t.isFixed)return;break;case"clear":e=B.filter(function(e){return e.isFixed})}g(e,{action:n,removedValue:t})},onClose:E,onFocus:O,onInputChange:N,onKeyDown:j,onOpen:C,components:y,componentsProps:{renderClearIcon:S,renderDownIcon:M,label:x,isRequired:h,hasError:q,behaviour:o,isTouched:b,heightBehaviour:u,widthBehaviour:T,appearance:r,dropDownPos:s,errorText:c,helperText:d,searchHint:I}})};F.defaultProps={appearance:"box",behaviour:"static",dropDownPos:"down",defaultIsOpen:!1,isSearchable:!0,renderDownIcon:function(e){return a.a.createElement(C,e)},renderClearIcon:function(e){return a.a.createElement(I,e)}};var T=F,q=function(e){return a.a.createElement(T,Object.assign({},e,{isSearchable:!1,isMulti:!0,behaviour:"static"}))};q.defaultProps={appearance:"box",dropDownPos:"down",defaultIsOpen:!1,renderClearIcon:function(){return null}};var k=q,L=function(e){return a.a.createElement(T,Object.assign({},e,{isSearchable:!1,isMulti:!1,behaviour:"static"}))};L.defaultProps={appearance:"box",dropDownPos:"down",defaultIsOpen:!1};var R=L;function A(e){return function(e){if(Array.isArray(e)){for(var r=0,n=new Array(e.length);r<e.length;r++)n[r]=e[r];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var V=function(e){var r=e.ariaLabel,n=e.autoComplete,t=e.autoFocus,o=e.hasError,i=e.id,l=e.isDisabled,s=e.isRequired,c=e.name,u=e.onBlur,d=e.onChange,p=e.onFocus,f=e.options,m=e.placeholder,h=e.value,v=m?[{label:m,isDisabled:!0,selected:!0}].concat(A(f)):f;return a.a.createElement("select",{"aria-invalid":o,"aria-label":r,autoComplete:n,autoFocus:t,className:"rdx-select-field-select",disabled:l,id:i,name:c,onBlur:u,onChange:function(e){return d(f.find(function(r){return r.value===e.target.value}))},onFocus:p,required:s,value:h&&h.value},v.map(function(e,r){var n=e.value,t=e.label,o=e.isDisabled,i=e.selected;return a.a.createElement("option",{key:r,selected:void 0!==h&&n===h.value||i,value:n,disabled:o},t)}))};V.defaultProps={appearance:"box",autoComplete:"off"};var z=V,H=function(e){var r=e.appearance,n=e.ariaLabel,t=e.autoComplete,o=e.autoFocus,i=e.errorText,l=e.heightBehaviour,s=e.helperText,c=e.id,u=e.isDisabled,p=e.isRequired,f=e.isTouched,m=e.label,h=e.name,v=e.options,x=e.onBlur,P=e.onChange,w=e.onFocus,g=e.placeholder,y=e.renderDownIcon,E=e.value,O=e.widthBehaviour,N=Boolean(i&&f),j="rdx-icon rdx-select-field-icon-open",B=d()("rdx-select-field rdx-select-field-".concat(r," is-native"),{"has-error":N,"has-label":m,"has-width-adaptative":"adaptative"===O,"has-width-fixed":"fixed"===O,"has-width-full":"full"===O,"has-height-adaptative":"adaptative"===l,"has-height-fixed":"fixed"===l,"is-disabled":u,"is-required":p,"is-touched":f});return a.a.createElement("div",{className:B},a.a.createElement("div",{className:"rdx-select-field-wrapper"},a.a.createElement(z,{appearance:r,ariaLabel:n||m||h||c,autoComplete:t,autoFocus:o,hasError:N,id:c,isDisabled:u,isRequired:p,isTouched:f,name:h,onBlur:x,onChange:P,onFocus:w,options:v,placeholder:g,value:E}),m&&a.a.createElement("label",{className:"rdx-select-field-label",htmlFor:c},m),a.a.createElement("div",{className:"rdx-select-field-icons-wrapper"},b(y,{className:j})||a.a.createElement(C,{className:j}))),s&&!i?a.a.createElement("div",{className:"rdx-select-field-helper"},s):null,N&&!u?a.a.createElement("div",{className:"rdx-select-field-helper"},i):null)};H.defaultProps={appearance:"box",autoComplete:"off"};var _=H,W=function(e){return void 0!==e.useNative?e.useNative:/Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Opera Mobile|Kindle|Windows Phone|PSP|AvantGo|Atomic Web Browser|Blazer|Chrome Mobile|Dolphin|Dolfin|Doris|GO Browser|Jasmine|MicroB|Mobile Firefox|Mobile Safari|Mobile Silk|Motorola Internet Browser|NetFront|NineSky|Nokia Web Browser|Obigo|Openwave Mobile Browser|Palm Pre web browser|Polaris|PS Vita browser|Puffin|QQbrowser|SEMC Browser|Skyfire|Tear|TeaShark|UC Browser|uZard Web|wOSBrowser|Yandex.Browser mobile/i.test(navigator.userAgent)},K=function(e){return W(e)?a.a.createElement(_,e):a.a.createElement(R,e)};n.d(r,"SelectMultiple",function(){return k}),n.d(r,"SelectSimple",function(){return K})}])});
 //# sourceMappingURL=index.js.map

Native.js

@@ -18,2 +18,3 @@ import React from 'react'
   isDisabled,
+  isRequired,
   isTouched,
@@ -45,2 +46,3 @@ label,
       'is-disabled': isDisabled,
+      'is-required': isRequired,
       'is-touched': isTouched,
@@ -62,2 +64,3 @@ }
             isDisabled,
+            isRequired,
             isTouched,
@@ -119,3 +122,9 @@ name,
   isDisabled: PropTypes.bool,
+  /** Boolean that defines whether the <select> is required */
+  isRequired: PropTypes.bool,
   /** String that specifies the name of an <select> */
+  isTouched: PropTypes.bool,
+  /** String with the text of <label> related to the <select> */
+  label: PropTypes.string,
+  /** Array of pairs label, value with the options of the <select> */
   name: PropTypes.string,
@@ -129,4 +138,2 @@ /** Function that is triggered when the component loses focus */
   /** Boolean that specifies whether the <select> field has been modified */
-  isTouched: PropTypes.bool,
-  /** Array of pairs label, value with the options of the <select> */
   options: PropTypes.arrayOf(
@@ -139,4 +146,2 @@ PropTypes.shape({
   ),
-  /** String with the text of <label> related to the <select> */
-  label: PropTypes.string,
   /** String with the expected value of the <select> */
@@ -143,0 +148,0 @@ placeholder: PropTypes.string,

NativeInput.js

 import React from 'react'
 import PropTypes from 'prop-types'
-import cx from 'classnames'
 
@@ -12,3 +11,3 @@ const SelectSimpleNative = ({
   isDisabled,
-  isTouched,
+  isRequired,
   name,
@@ -43,2 +42,3 @@ onBlur,
         onFocus,
+        required: isRequired,
         value: value && value.value,
@@ -81,2 +81,4 @@ }}>
   isDisabled: PropTypes.bool,
+  /** Boolean that defines whether the <select> is disabled */
+  isRequired: PropTypes.bool,
   /** String that specifies the name of an <select> */
@@ -83,0 +85,0 @@ name: PropTypes.string,

package.json

 {
   "name": "@redradix/components.select",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "",
@@ -26,3 +26,3 @@ "publishConfig": {
   },
-  "gitHead": "73b72b6aab719072ebe8b5e8382fa04039a20b6d"
+  "gitHead": "c0cf88a736a35f89f74f56c280388e63d0d212e5"
 }

react-select-components.js

@@ -1,2 +0,2 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import cx from 'classnames'
@@ -17,3 +17,4 @@ import { ReactComponent as Remove } from '../../styles/icons/close.svg'
 
-const iconClasses = 'rdx-icon'
+const iconClasses = 'rdx-icon rdx-select-field-icon'
+const requiredIcon = <span className="rdx-icon--require">*</span>
 
@@ -37,2 +38,3 @@ const ClearIndicator = ({ innerProps, selectProps }) =>
           {selectProps.componentsProps.label}
+          {selectProps.componentsProps.isRequired ? requiredIcon : null}
         </label>
@@ -93,3 +95,2 @@ )}
   })
-
   return (
@@ -119,2 +120,3 @@ <button className={classes} tabIndex={-1}>
   value,
+  onOptionClick,
 }) => {
@@ -128,2 +130,3 @@ const singleAndSelected =
     'is-disabled': data.isDisabled,
+    'is-link': data.isLink,
     'is-focused': isFocused,
@@ -141,5 +144,5 @@ 'is-selected': isSelected,
       {data.imgPath && (
-        <span className="rdx-select-option-icon-wrapper">
+        <span className="rdx-select-option-image-wrapper">
           <img
-            className="rdx-select-option-icon"
+            className="rdx-select-option-image"
             src={data.imgPath}
@@ -150,2 +153,9 @@ alt={data.imgAlt}
       )}
+      {data.iconPath && (
+        <span className="rdx-select-option-icon-wrapper">
+          {safelyRender(data.iconPath, {
+            className: 'rdx-select-option-icon',
+          })}
+        </span>
+      )}
 
@@ -184,2 +194,3 @@ <span>{label}</span>
         selectProps.componentsProps.dropDownPos === 'up',
+      'is-required': selectProps.componentsProps.isRequired,
       'is-searchable': selectProps.isSearchable,
@@ -207,21 +218,45 @@ 'is-touched': selectProps.componentsProps.isTouched,
 
-const Placeholder = ({ children, selectProps }) =>
-  isDynamic(selectProps) && !shouldUseFadeAnimation(selectProps) ? null : (
-    <div className="rdx-select-field-placeholder">{children}</div>
+const Placeholder = ({ children, selectProps }) => {
+  return isDynamic(selectProps) &&
+    !shouldUseFadeAnimation(selectProps) ? null : (
+    <div className="rdx-select-field-placeholder">
+      {children}
+      {selectProps.componentsProps.isRequired &&
+      !selectProps.componentsProps.label
+        ? requiredIcon
+        : null}
+    </div>
   )
+}
 
 const SingleValue = ({ selectProps, children }) => {
   return (
-    <>
+    <Fragment>
       {selectProps.options.map(option => {
         if (option.label === children) {
-          return option.imgPath ? (
-            <span className="rdx-select-option-icon-wrapper">
-              <img
-                className="rdx-select-option-icon"
-                src={option.imgPath}
-                alt={option.imgAlt}
-              />
-            </span>
-          ) : null
+          if (option.imgPath) {
+            return (
+              <span
+                className="rdx-select-option-image-wrapper"
+                key={option.value}>
+                <img
+                  className="rdx-select-option-image"
+                  src={option.imgPath}
+                  alt={option.imgAlt}
+                />
+              </span>
+            )
+          }
+          if (option.iconPath) {
+            return (
+              <span
+                className="rdx-select-option-icon-wrapper"
+                key={option.value}>
+                {safelyRender(option.iconPath, {
+                  className: 'rdx-icon rdx-select-option-icon',
+                })}
+              </span>
+            )
+          }
+          return null
         }
@@ -231,3 +266,3 @@ return null
       <div className="rdx-select-field-value">{children}</div>
-    </>
+    </Fragment>
   )
@@ -234,0 +269,0 @@ }

Select.js

@@ -6,3 +6,2 @@ import React from 'react'
 import { ReactComponent as IconDefaultDown } from '../../styles/icons/chevron-down.svg'
-import { ReactComponent as IconDefaultUp } from '../../styles/icons/chevron-up.svg'
 import { ReactComponent as ClearIconDefault } from '../../styles/icons/delete.svg'
@@ -23,2 +22,3 @@
   isMulti,
+  isRequired,
   isSearchable,
@@ -90,2 +90,3 @@ isTouched,
         label,
+        isRequired,
         hasError,
@@ -143,2 +144,4 @@ behaviour,
   /** Boolean that defines whether the <select> is autocomplete */
+  isRequired: PropTypes.bool,
+  /** Boolean that defines whether the <select> is required */
   isSearchable: PropTypes.bool,
@@ -145,0 +148,0 @@ /** Boolean that specifies whether the <select> field has been modified */

SelectMultiple.js

@@ -37,2 +37,4 @@ import React from 'react'
   isDisabled: PropTypes.bool,
+  /** Boolean that defines whether the <select> is required */
+  isRequired: PropTypes.bool,
   /** Boolean that specifies whether the <select> field has been modified */
@@ -39,0 +41,0 @@ isTouched: PropTypes.bool,

SelectSimple.js

@@ -43,2 +43,4 @@ import React from 'react'
   isDisabled: PropTypes.bool,
+  /** Boolean that defines whether the <select> is required */
+  isRequired: PropTypes.bool,
   /** Boolean that specifies whether the <select> field has been modified */
@@ -45,0 +47,0 @@ isTouched: PropTypes.bool,

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

139754

increased by4.17%

Lines of code

1315

increased by5.28%

No dependency changes