oolib 2.24.0 → 2.24.2

package/dist/components/Buttons/index.js

@@ -41,6 +41,7 @@ var react_router_dom_1 = require("react-router-dom");
 var lodash_1 = require("lodash");
 var Typo_1 = require("../Typo");
 var icons_1 = require("../../icons");
+var themes_1 = require("../../themes");
 var DisplayIcon = function (_a) {
     var icon = _a.icon, size = _a.size, color = _a.color;
     var IconComp = icons_1.icons[icon];
@@ -48,7 +49,7 @@ var DisplayIcon = function (_a) {
 };
 var ButtonStyledWrapper = function (_a) {
     var props = _a.props, variant = _a.variant;
-    var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, iconAfter = props.iconAfter, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, disabled = props.disabled, invert = props.invert, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className, S = props.S, M = props.M, iconSize = props.iconSize, iconColor = props.iconColor, stopPropagation = props.stopPropagation;
+    var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, iconAfter = props.iconAfter, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, disabled = props.disabled, invert = props.invert, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className, S = props.S, M = props.M, iconSize = props.iconSize, _iconColor = props.iconColor, stopPropagation = props.stopPropagation;
     /**
      * WHY WE ARE HAVING TO DO STOP PROPAGATION IN THIS TWISTED WAY:
      *
@@ -89,6 +90,7 @@ var ButtonStyledWrapper = function (_a) {
         var thisSize = iconSize || size;
         return thisSize === 'S' ? 15 : 20;
     };
+    var iconColor = !disabled ? _iconColor : themes_1.colors.greyColor40;
     return (react_1.default.createElement(index_styled_1.ButtonStyled, { id: id, style: style, className: className, variant: variant, size: size, active: active, invert: invert, disabled: disabled, theme: theme, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, type: submit ? "submit" : "button", onClick: function (e) {
             stopPropagation && e.stopPropagation();
             debouncedOnClick && debouncedOnClick(e);

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.js

@@ -32,7 +32,8 @@ var CheckboxInput = function (_a) {
     var SuitableTypo = S ? Typo_1.SANS_2 : Typo_1.SANS_3;
     return inputStyle === 'tagSelect' ? (react_1.default.createElement(Tags_1.TagSelect, __assign({}, { isSelected: isSelected, invert: invert, disabled: disabled }, { onClick: function () { return !disabled && onClick(option, isSelected); }, display: option.display, value: option.value, style: { alignSelf: 'flex-start' } }))) : (react_1.default.createElement(styled_1.StyledOption, __assign({}, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert, S: S }, { onClick: function () { return !rightWrongResult && !disabled && onClick(option, isSelected); } }),
         !rightWrongResult || markingCommand === undefined ?
-            react_1.default.createElement(styled_2.StyledCheckbox, __assign({ className: "btn" }, { isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected && react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16 }))
+            react_1.default.createElement(styled_2.StyledCheckbox, __assign({ className: "btn" }, { isSelected: isSelected, disabled: disabled, invert: invert, S: S }), isSelected &&
+                react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16, style: { flexShrink: 0 } }))
             :
                 ["markCorrect", "revealCorrect"].includes(markingCommand) ?
                     react_1.default.createElement(CheckSquare, { size: S ? 22.5 : 26, color: green, style: {

package/dist/components/RadioAndCheckbox/comps/RadioList/comps/RadioInput/styled.js

@@ -51,7 +51,7 @@ exports.StyledRadioInput = styled_components_1.default.button(templateObject_2 |
             invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColor100)(colors);
     });
 });
-exports.StyledRadioInputFill = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width:", ";\n  height:", ";\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  width:", ";\n  height:", ";\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (_a) {
+exports.StyledRadioInputFill = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width:", ";\n  height:", ";\n  flex-shrink: 0;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  width:", ";\n  height:", ";\n  flex-shrink: 0;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (_a) {
     var S = _a.S;
     return S ? '0.7rem' : '0.8rem';
 }, function (_a) {

package/dist/components/TextInputs/index.js

@@ -96,7 +96,7 @@ var DisplayIcon = function (_a) {
     return (react_1.default.createElement("div", { style: { cursor: onClick ? 'pointer' : '' }, onMouseDown: onClick || null }, IconComp && react_1.default.createElement(IconComp, { size: size, weight: "bold" })));
 };
 var TextInput = function (props) {
-    var id = props.id, invert = props.invert, disabled = props.disabled, icon = props.icon, type = props.type, maxNumLimiter = props.maxNumLimiter, _a = props.placeholder, placeholder = _a === void 0 ? 'Enter Text...' : _a, value = props.value, onChange = props.onChange, onFocus = props.onFocus, readOnly = props.readOnly, iconOnClick = props.iconOnClick, eyeIcon = props.eyeIcon, S = props.S, validateOnBlur = props.validateOnBlur, actionBtn = props.actionBtn, className = props.className;
+    var id = props.id, invert = props.invert, disabled = props.disabled, icon = props.icon, type = props.type, _a = props.placeholder, placeholder = _a === void 0 ? 'Enter Text...' : _a, value = props.value, onChange = props.onChange, onFocus = props.onFocus, readOnly = props.readOnly, iconOnClick = props.iconOnClick, eyeIcon = props.eyeIcon, S = props.S, validateOnBlur = props.validateOnBlur, actionBtn = props.actionBtn, className = props.className, maxLength = props.maxLength, DEPRECATED_maxNumLimiter = props.maxNumLimiter;
     var _b = (0, react_1.useState)(''), inputStatus = _b[0], setInputStatus = _b[1];
     var composition = icon && !eyeIcon ? 'icon+text' : 'textOnly';
     var size = S ? 'S' : 'M';
@@ -135,7 +135,7 @@ var TextInput = function (props) {
             readOnly ? (react_1.default.createElement(Typo_1.SANS_3, { invert: invert }, type === 'password' ? '********' : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(index_styled_1.InputContainerStyled, { invert: invert, type: type, disabled: disabled, status: inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.type, eyeIcon: eyeIcon, composition: composition },
                     icon && (react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20, onClick: iconOnClick || null })),
-                    react_1.default.createElement(index_styled_1.InputStyled, { className: size === 'S' ? 'SANS_2' : 'SANS_3', id: id, type: type, name: type, placeholder: placeholder, value: value, onChange: handleOnChange, maxLength: maxNumLimiter, onBlur: handleValidateOnBlur, onFocus: onFocus, size: size, autoComplete: 'off' }),
+                    react_1.default.createElement(index_styled_1.InputStyled, { className: size === 'S' ? 'SANS_2' : 'SANS_3', id: id, type: type, name: type, placeholder: placeholder, value: value, onChange: handleOnChange, maxLength: maxLength || DEPRECATED_maxNumLimiter, onBlur: handleValidateOnBlur, onFocus: onFocus, size: size, autoComplete: 'off' }),
                     inputStatus === 'loading' && (react_1.default.createElement("div", null,
                         react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true, invert: invert }))),
                     actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimary, { value: actionBtn.text, invert: actionBtn.invert, onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: '-2rem' } }))),
@@ -198,7 +198,7 @@ var PhoneInput = function (props) {
             return { type: 'error', msg: 'Enter a valid phone number' };
         }
     };
-    return (react_1.default.createElement(exports.TextInput, __assign({ type: "tel", placeholder: 'Enter Phone...', validateOnBlur: handleValidation, maxNumLimiter: 10 }, props)));
+    return (react_1.default.createElement(exports.TextInput, __assign({ type: "tel", placeholder: 'Enter Phone...', validateOnBlur: handleValidation, maxLength: 10 }, props)));
 };
 exports.PhoneInput = PhoneInput;
 var URLInput = function (_a) {
@@ -236,7 +236,7 @@ var URLInput = function (_a) {
             }
         });
     }); };
-    return (react_1.default.createElement(exports.TextInput, __assign({}, props, { type: "url", validateOnBlur: handleValidation, placeholder: "Enter a valid url..." })));
+    return (react_1.default.createElement(exports.TextInput, __assign({ type: "url", validateOnBlur: handleValidation, placeholder: "Enter a valid url..." }, props)));
 };
 exports.URLInput = URLInput;
 var NumberInput = function (props) {
@@ -252,8 +252,10 @@ var NumberInput = function (props) {
             return { type: 'error', msg: "Enter value less than ".concat(max) };
         }
     };
-    return (react_1.default.createElement(exports.TextInput, __assign({}, props, { 
+    return (react_1.default.createElement(exports.TextInput
+    // type="number"
+    , __assign({ 
         // type="number"
-        validateOnBlur: handleValidation, placeholder: "Enter Number..." })));
+        validateOnBlur: handleValidation, placeholder: "Enter Number..." }, props)));
 };
 exports.NumberInput = NumberInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.24.0",
+  "version": "2.24.2",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",