oolib 2.25.6 → 2.26.0

package/dist/components/LoadersAndProgress/SkeletonLoader/index.d.ts

@@ -0,0 +1,3 @@
+export function SkeletonLoader({ style }: {
+    style: any;
+}): any;

package/dist/components/LoadersAndProgress/SkeletonLoader/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonLoader = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_1 = require("./styled");
+var SkeletonLoader = function (_a) {
+    var style = _a.style;
+    return react_1.default.createElement(styled_1.StyledSkeletonLoader, { style: style });
+};
+exports.SkeletonLoader = SkeletonLoader;

package/dist/components/LoadersAndProgress/SkeletonLoader/styled.d.ts

@@ -0,0 +1 @@
+export const StyledSkeletonLoader: any;

package/dist/components/LoadersAndProgress/SkeletonLoader/styled.js

@@ -0,0 +1,36 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledSkeletonLoader = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../../themes");
+var utilsOolib_1 = require("../../../utilsOolib");
+var load = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    from { left: -100%; }\n    to { left: 100%; }\n"], ["\n    from { left: -100%; }\n    to { left: 100%; }\n"])));
+exports.StyledSkeletonLoader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    overflow: hidden;\n    position: relative;\n    background-color: ", ";\n  \n    &::before{\n      content: '';\n      display: block;\n      position: absolute;\n      left: -100%;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(to right, transparent 0%, ", " 50%, transparent 100%);\n      animation: ", " 1s cubic-bezier(0.4, 0.0, 0.2, 1);\n      animation-iteration-count:infinite;\n    }\n"], ["\n    overflow: hidden;\n    position: relative;\n    background-color: ", ";\n  \n    &::before{\n      content: '';\n      display: block;\n      position: absolute;\n      left: -100%;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(to right, transparent 0%, ", " 50%, transparent 100%);\n      animation: ", " 1s cubic-bezier(0.4, 0.0, 0.2, 1);\n      animation-iteration-count:infinite;\n    }\n"])), (0, utilsOolib_1.getPrimaryColor10)(), themes_1.colors.black_opacity05, load);
+var templateObject_1, templateObject_2;

package/dist/components/TextInputs/index.js

@@ -96,7 +96,8 @@ 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, _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 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, forceFocus = props.forceFocus //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
+    ;
     var _b = (0, react_1.useState)(''), inputStatus = _b[0], setInputStatus = _b[1];
     var composition = icon && !eyeIcon ? 'icon+text' : 'textOnly';
     var size = S ? 'S' : 'M';
@@ -129,13 +130,19 @@ var TextInput = function (props) {
             handleValidateOnBlur(e);
         }
     };
+    var inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        forceFocus &&
+            inputRef.current &&
+            inputRef.current.focus();
+    }, [forceFocus]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: className },
             react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(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 },
+                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, onClick: function () { return inputRef.current.focus(); } },
                     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: maxLength || DEPRECATED_maxNumLimiter, onBlur: handleValidateOnBlur, onFocus: onFocus, size: size, autoComplete: 'off' }),
+                    react_1.default.createElement(index_styled_1.InputStyled, { ref: inputRef, 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' } }))),

package/dist/icons/index.d.ts

@@ -41,6 +41,7 @@ export namespace icons {
     export { ArrowsOut };
     export { MapPin };
     export { ArrowDown };
+    export { ArrowUp };
     export { GearSix };
     export { Wrench };
     export { CheckSquare };
@@ -134,6 +135,7 @@ import { ArrowsIn } from "phosphor-react";
 import { ArrowsOut } from "phosphor-react";
 import { MapPin } from "phosphor-react";
 import { ArrowDown } from "phosphor-react";
+import { ArrowUp } from "phosphor-react";
 import { GearSix } from "phosphor-react";
 import { Wrench } from "phosphor-react";
 import { CheckSquare } from "phosphor-react";

package/dist/icons/index.js

@@ -46,6 +46,7 @@ exports.icons = {
     ArrowsOut: phosphor_react_1.ArrowsOut,
     MapPin: phosphor_react_1.MapPin,
     ArrowDown: phosphor_react_1.ArrowDown,
+    ArrowUp: phosphor_react_1.ArrowUp,
     GearSix: phosphor_react_1.GearSix,
     Wrench: phosphor_react_1.Wrench,
     CheckSquare: phosphor_react_1.CheckSquare,

package/dist/index.d.ts

@@ -23,4 +23,5 @@ export { Tooltip } from "./components/Tooltip";
 export { ActionMenu } from "./components/ActionMenu";
 export { PercentCompletedPie } from "./components/PercentCompletedPie";
 export { Divider } from "./components/Divider";
+export { SkeletonLoader } from "./components/LoadersAndProgress/SkeletonLoader";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader } from "./components/LoadersAndProgress";

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Divider = exports.PercentCompletedPie = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -57,5 +57,7 @@ var PercentCompletedPie_1 = require("./components/PercentCompletedPie");
 Object.defineProperty(exports, "PercentCompletedPie", { enumerable: true, get: function () { return PercentCompletedPie_1.PercentCompletedPie; } });
 var Divider_1 = require("./components/Divider");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
+var SkeletonLoader_1 = require("./components/LoadersAndProgress/SkeletonLoader");
+Object.defineProperty(exports, "SkeletonLoader", { enumerable: true, get: function () { return SkeletonLoader_1.SkeletonLoader; } });
 //utility functions
 __exportStar(require("./utils/_EXPORTS"), exports);

package/package.json

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