@qoretechnologies/reqore 0.32.0 → 0.32.2

package/dist/hooks/useReqore.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 exports.useReqore = void 0;
-var react_1 = require("react");
+var use_context_selector_1 = require("use-context-selector");
 var ReqoreContext_1 = __importDefault(require("../context/ReqoreContext"));
 var useReqore = function () {
-    var reqore = (0, react_1.useContext)(ReqoreContext_1["default"]);
+    var reqore = (0, use_context_selector_1.useContext)(ReqoreContext_1["default"]);
     if (!reqore) {
         throw new Error('Reqore context is not defined');
     }

package/dist/hooks/useReqore.js.map

@@ -1 +1 @@
-{"version":3,"file":"useReqore.js","sourceRoot":"","sources":["../../src/hooks/useReqore.ts"],"names":[],"mappings":";;;;;;AAAA,+BAAmC;AACnC,2EAAyE;AAElE,IAAM,SAAS,GAAG;IACvB,IAAM,MAAM,GAAG,IAAA,kBAAU,EAAC,0BAAa,CAAC,CAAC;IAEzC,IAAI,CAAC,MAAM,EAAE;QACX,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;KAClD;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AARW,QAAA,SAAS,aAQpB"}
+{"version":3,"file":"useReqore.js","sourceRoot":"","sources":["../../src/hooks/useReqore.ts"],"names":[],"mappings":";;;;;;AAAA,6DAAkD;AAClD,2EAAyE;AAElE,IAAM,SAAS,GAAG;IACvB,IAAM,MAAM,GAAG,IAAA,iCAAU,EAAC,0BAAa,CAAC,CAAC;IAEzC,IAAI,CAAC,MAAM,EAAE;QACX,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;KAClD;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AARW,QAAA,SAAS,aAQpB"}

package/dist/hooks/useReqoreContext.d.ts

@@ -0,0 +1,3 @@
+import { IReqoreContext } from '../context/ReqoreContext';
+export declare const useReqoreProperty: <T extends keyof IReqoreContext>(property: T) => IReqoreContext[T];
+//# sourceMappingURL=useReqoreContext.d.ts.map

package/dist/hooks/useReqoreContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReqoreContext.d.ts","sourceRoot":"","sources":["../../src/hooks/useReqoreContext.ts"],"names":[],"mappings":"AACA,OAAsB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAEzE,eAAO,MAAM,iBAAiB,oEAY7B,CAAC"}

package/dist/hooks/useReqoreContext.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.useReqoreProperty = void 0;
+var use_context_selector_1 = require("use-context-selector");
+var ReqoreContext_1 = __importDefault(require("../context/ReqoreContext"));
+var useReqoreProperty = function (property) {
+    var contextProperty = (0, use_context_selector_1.useContextSelector)(ReqoreContext_1["default"], function (value) {
+        if (!(property in value)) {
+            throw new Error("Reqore context property ".concat(property, " not found"));
+        }
+        return value[property];
+    });
+    return contextProperty;
+};
+exports.useReqoreProperty = useReqoreProperty;
+//# sourceMappingURL=useReqoreContext.js.map

package/dist/hooks/useReqoreContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReqoreContext.js","sourceRoot":"","sources":["../../src/hooks/useReqoreContext.ts"],"names":[],"mappings":";;;;;;AAAA,6DAA0D;AAC1D,2EAAyE;AAElE,IAAM,iBAAiB,GAAG,UAC/B,QAAW;IAEX,IAAM,eAAe,GAAG,IAAA,yCAAkB,EAAC,0BAAa,EAAE,UAAC,KAAK;QAC9D,IAAI,CAAC,CAAC,QAAQ,IAAI,KAAK,CAAC,EAAE;YACxB,MAAM,IAAI,KAAK,CAAC,kCAA2B,QAAQ,eAAY,CAAC,CAAC;SAClE;QAED,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,OAAO,eAAe,CAAC;AACzB,CAAC,CAAC;AAZW,QAAA,iBAAiB,qBAY5B"}

package/dist/hooks/useReqoreEffect.js

@@ -10,15 +10,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 exports.__esModule = true;
 exports.useReqoreEffect = void 0;
 var react_1 = require("react");
-var ThemeContext_1 = __importDefault(require("../context/ThemeContext"));
+var useTheme_1 = require("./useTheme");
 var useReqoreEffect = function (component, theme, effect) {
-    var _theme = (0, react_1.useContext)(ThemeContext_1["default"]);
+    var _theme = (0, useTheme_1.useReqoreTheme)();
     // Return the effect if the component is not defined in the theme
     if (!theme[component]) {
         return effect;

package/dist/hooks/useReqoreEffect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useReqoreEffect.js","sourceRoot":"","sources":["../../src/hooks/useReqoreEffect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+BAA4C;AAO5C,yEAAmD;AAE5C,IAAM,eAAe,GAAG,UAC7B,SAAoB,EACpB,KAAmB,EACnB,MAAsB;IAEtB,IAAI,MAAM,GAAiB,IAAA,kBAAU,EAAe,yBAAY,CAAC,CAAC;IAElE,iEAAiE;IACjE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE;QACrB,OAAO,MAAM,CAAC;KACf;IAED,IAAI,KAAK,EAAE;QACT,2CAA2C;QAC3C,MAAM,GAAG,KAAK,CAAC;KAChB;IAED,IAAM,MAAM,GAAoB,IAAA,eAAO,EAAC;QACtC,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9D,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAErB,IAAM,OAAO,GAA0C,IAAA,eAAO,EAAC;QAC7D,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC;IACnC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAErB,IAAM,OAAO,GAAG,IAAA,eAAO,EAAC;QACtB,6BACK,MAAM,KACT,QAAQ,aACN,MAAM,QAAA,EACN,OAAO,SAAA,IAGJ,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,KAErB;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9B,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAvCW,QAAA,eAAe,mBAuC1B"}
+{"version":3,"file":"useReqoreEffect.js","sourceRoot":"","sources":["../../src/hooks/useReqoreEffect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,+BAAgC;AAOhC,uCAA4C;AAErC,IAAM,eAAe,GAAG,UAC7B,SAAoB,EACpB,KAAmB,EACnB,MAAsB;IAEtB,IAAI,MAAM,GAAiB,IAAA,yBAAc,GAAE,CAAC;IAE5C,iEAAiE;IACjE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE;QACrB,OAAO,MAAM,CAAC;KACf;IAED,IAAI,KAAK,EAAE;QACT,2CAA2C;QAC3C,MAAM,GAAG,KAAK,CAAC;KAChB;IAED,IAAM,MAAM,GAAoB,IAAA,eAAO,EAAC;QACtC,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9D,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAErB,IAAM,OAAO,GAA0C,IAAA,eAAO,EAAC;QAC7D,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC;IACnC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAErB,IAAM,OAAO,GAAG,IAAA,eAAO,EAAC;QACtB,6BACK,MAAM,KACT,QAAQ,aACN,MAAM,QAAA,EACN,OAAO,SAAA,IAGJ,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,KAErB;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9B,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAvCW,QAAA,eAAe,mBAuC1B"}

package/dist/hooks/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIjE,MAAM,WAAW,kBAAmB,SAAQ,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACtF,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,kBAAkB,CAAC;QAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;KACf,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,aACf,MAAM,gBACH,kBAAkB,WACtB,aAAa,eACV,SAAS,GAAG,eAAe,KACtC,YAsBF,CAAC"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIjE,MAAM,WAAW,kBAAmB,SAAQ,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACtF,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,kBAAkB,CAAC;QAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;KACf,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,aACf,MAAM,gBACH,kBAAkB,WACtB,aAAa,eACV,SAAS,GAAG,eAAe,KACtC,YA0BF,CAAC"}

package/dist/hooks/useTheme.js

@@ -1,32 +1,32 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 exports.__esModule = true;
 exports.useReqoreTheme = void 0;
 var lodash_1 = require("lodash");
 var react_1 = require("react");
-var ThemeContext_1 = __importDefault(require("../context/ThemeContext"));
 var colors_1 = require("../helpers/colors");
+var useReqoreContext_1 = require("./useReqoreContext");
 var useReqoreTheme = function (element, customTheme, intent, intentsKey) {
-    var _a;
     if (customTheme === void 0) { customTheme = {}; }
     if (intentsKey === void 0) { intentsKey = 'intents'; }
-    var theme = (0, react_1.useContext)(ThemeContext_1["default"]);
-    if (!element) {
-        return theme;
-    }
-    var _customTheme = (0, lodash_1.cloneDeep)(customTheme);
-    if (_customTheme.main) {
-        _customTheme.main = (0, colors_1.getColorFromMaybeString)(theme, customTheme.main);
-    }
-    if ((_a = _customTheme.text) === null || _a === void 0 ? void 0 : _a.color) {
-        _customTheme.text.color = (0, colors_1.getColorFromMaybeString)(theme, customTheme.text.color);
-    }
-    if (element === 'main' && intent) {
-        _customTheme.main = theme[intentsKey][intent];
-    }
-    return (0, colors_1.mergeThemes)(element, theme, _customTheme);
+    var theme = (0, useReqoreContext_1.useReqoreProperty)('theme');
+    var finalTheme = (0, react_1.useMemo)(function () {
+        var _a;
+        if (!element) {
+            return theme;
+        }
+        var _customTheme = (0, lodash_1.cloneDeep)(customTheme);
+        if (_customTheme.main) {
+            _customTheme.main = (0, colors_1.getColorFromMaybeString)(theme, customTheme.main);
+        }
+        if ((_a = _customTheme.text) === null || _a === void 0 ? void 0 : _a.color) {
+            _customTheme.text.color = (0, colors_1.getColorFromMaybeString)(theme, customTheme.text.color);
+        }
+        if (element === 'main' && intent) {
+            _customTheme.main = theme[intentsKey][intent];
+        }
+        return (0, colors_1.mergeThemes)(element, theme, _customTheme);
+    }, [JSON.stringify(theme), element, JSON.stringify(customTheme), intent, intentsKey]);
+    return finalTheme;
 };
 exports.useReqoreTheme = useReqoreTheme;
 //# sourceMappingURL=useTheme.js.map

package/dist/hooks/useTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":";;;;;;AAAA,iCAAmC;AACnC,+BAAmC;AAGnC,yEAAmD;AACnD,4CAAyE;AAWlE,IAAM,cAAc,GAAG,UAC5B,OAAgB,EAChB,WAAoC,EACpC,MAAsB,EACtB,UAAmD;;IAFnD,4BAAA,EAAA,gBAAoC;IAEpC,2BAAA,EAAA,sBAAmD;IAEnD,IAAM,KAAK,GAAiB,IAAA,kBAAU,EAAe,yBAAY,CAAC,CAAC;IAEnE,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,KAAK,CAAC;KACd;IAED,IAAI,YAAY,GAAuB,IAAA,kBAAS,EAAC,WAAW,CAAC,CAAC;IAE9D,IAAI,YAAY,CAAC,IAAI,EAAE;QACrB,YAAY,CAAC,IAAI,GAAG,IAAA,gCAAuB,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,IAAI,MAAA,YAAY,CAAC,IAAI,0CAAE,KAAK,EAAE;QAC5B,YAAY,CAAC,IAAI,CAAC,KAAK,GAAG,IAAA,gCAAuB,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClF;IAED,IAAI,OAAO,KAAK,MAAM,IAAI,MAAM,EAAE;QAChC,YAAY,CAAC,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;KAC/C;IAED,OAAO,IAAA,oBAAW,EAAC,OAAO,EAAE,KAAK,EAAE,YAAY,CAAiB,CAAC;AACnE,CAAC,CAAC;AA3BW,QAAA,cAAc,kBA2BzB"}
+{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":";;;AAAA,iCAAmC;AACnC,+BAAgC;AAGhC,4CAAyE;AACzE,uDAAuD;AAWhD,IAAM,cAAc,GAAG,UAC5B,OAAgB,EAChB,WAAoC,EACpC,MAAsB,EACtB,UAAmD;IAFnD,4BAAA,EAAA,gBAAoC;IAEpC,2BAAA,EAAA,sBAAmD;IAEnD,IAAM,KAAK,GAAiB,IAAA,oCAAiB,EAAC,OAAO,CAAC,CAAC;IAEvD,IAAM,UAAU,GAAG,IAAA,eAAO,EAAC;;QACzB,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,KAAK,CAAC;SACd;QAED,IAAI,YAAY,GAAuB,IAAA,kBAAS,EAAC,WAAW,CAAC,CAAC;QAE9D,IAAI,YAAY,CAAC,IAAI,EAAE;YACrB,YAAY,CAAC,IAAI,GAAG,IAAA,gCAAuB,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;SACtE;QAED,IAAI,MAAA,YAAY,CAAC,IAAI,0CAAE,KAAK,EAAE;YAC5B,YAAY,CAAC,IAAI,CAAC,KAAK,GAAG,IAAA,gCAAuB,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAClF;QAED,IAAI,OAAO,KAAK,MAAM,IAAI,MAAM,EAAE;YAChC,YAAY,CAAC,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;SAC/C;QAED,OAAO,IAAA,oBAAW,EAAC,OAAO,EAAE,KAAK,EAAE,YAAY,CAAiB,CAAC;IACnE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAEtF,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AA/BW,QAAA,cAAc,kBA+BzB"}

package/dist/index.d.ts

@@ -54,5 +54,6 @@ export { default as ReqoreContext } from './context/ReqoreContext';
 export { default as ReqoreThemeContext } from './context/ThemeContext';
 export { default as useLatestZIndex } from './hooks/useLatestZIndex';
 export { useReqore } from './hooks/useReqore';
+export { useReqoreProperty } from './hooks/useReqoreContext';
 export { useReqoreTheme } from './hooks/useTheme';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,aAAa,GACd,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACjG,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -12,7 +12,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 }));
 exports.__esModule = true;
 exports.ReqoreTable = exports.ReqoreVerticalSpacer = exports.ReqoreSpacer = exports.ReqoreHorizontalSpacer = exports.ReqoreSidebar = exports.ReqoreRadioGroup = exports.ReqorePopover = exports.ReqoreParagraph = exports.ReqoreP = exports.ReqorePanel = exports.ReqoreNotification = exports.ReqoreNotificationsWrapper = exports.ReqoreNavbarItem = exports.ReqoreNavbarGroup = exports.ReqoreNavbarDivider = exports.ReqoreHeader = exports.ReqoreFooter = exports.ReqoreMultiSelect = exports.ReqoreModal = exports.ReqoreMessage = exports.ReqoreMenuItem = exports.ReqoreMenuDivider = exports.ReqoreMenu = exports.ReqoreLayoutContent = exports.ReqoreInput = exports.ReqoreIcon = exports.ReqoreHeading = exports.ReqoreH6 = exports.ReqoreH5 = exports.ReqoreH4 = exports.ReqoreH3 = exports.ReqoreH2 = exports.ReqoreH1 = exports.ReqoreTextEffect = exports.ReqoreEffect = exports.ReqoreDropdownItem = exports.ReqoreDropdownDivider = exports.ReqoreDropdown = exports.ReqoreDrawer = exports.ReqoreControlGroup = exports.ReqoreContent = exports.ReqoreCommentFeed = exports.ReqoreComment = exports.ReqoreColumn = exports.ReqoreColumns = exports.ReqoreCollection = exports.ReqoreCheckbox = exports.ReqoreButton = exports.ReqoreBreadcrumbsItem = exports.ReqoreBreadcrumbs = void 0;
-exports.useReqoreTheme = exports.useReqore = exports.useLatestZIndex = exports.ReqoreThemeContext = exports.ReqoreContext = exports.ReqoreUIProvider = exports.ReqoreNotifications = exports.ReqoreIntents = exports.ReqoreSizes = exports.ReqoreColors = exports.ReqoreTree = exports.ReqoreTimeAgo = exports.ReqoreTextarea = exports.ReqoreTagGroup = exports.ReqoreTag = exports.ReqoreTabsList = exports.ReqoreTabsListItem = exports.ReqoreTabsContent = exports.ReqoreTabs = void 0;
+exports.useReqoreTheme = exports.useReqoreProperty = exports.useReqore = exports.useLatestZIndex = exports.ReqoreThemeContext = exports.ReqoreContext = exports.ReqoreUIProvider = exports.ReqoreNotifications = exports.ReqoreIntents = exports.ReqoreSizes = exports.ReqoreColors = exports.ReqoreTree = exports.ReqoreTimeAgo = exports.ReqoreTextarea = exports.ReqoreTagGroup = exports.ReqoreTag = exports.ReqoreTabsList = exports.ReqoreTabsListItem = exports.ReqoreTabsContent = exports.ReqoreTabs = void 0;
 var Breadcrumbs_1 = require("./components/Breadcrumbs");
 __createBinding(exports, Breadcrumbs_1, "default", "ReqoreBreadcrumbs");
 var item_1 = require("./components/Breadcrumbs/item");
@@ -137,6 +137,8 @@ var useLatestZIndex_1 = require("./hooks/useLatestZIndex");
 __createBinding(exports, useLatestZIndex_1, "default", "useLatestZIndex");
 var useReqore_1 = require("./hooks/useReqore");
 __createBinding(exports, useReqore_1, "useReqore");
+var useReqoreContext_1 = require("./hooks/useReqoreContext");
+__createBinding(exports, useReqoreContext_1, "useReqoreProperty");
 var useTheme_1 = require("./hooks/useTheme");
 __createBinding(exports, useTheme_1, "useReqoreTheme");
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,wDAAwE;AAA/D,wEAA4B;AACrC,sDAAiF;AAAxE,qEAAgC;AACzC,8CAA8D;AAArD,8DAAuB;AAChC,kDAAkE;AAAzD,kEAAyB;AAClC,sDAA2D;AAAlD,2DAAgB;AACzB,gDAAqD;AAA5C,qDAAa;AACtB,sDAA2D;AAAlD,mDAAY;AACrB,gDAAqD;AAA5C,qDAAa;AACtB,wDAA6D;AAApD,6DAAiB;AAC1B,gDAAgE;AAAvD,gEAAwB;AACjC,0DAA0E;AAAjE,0EAA6B;AACtC,8CAAmD;AAA1C,mDAAY;AACrB,kDAAkE;AAAzD,kEAAyB;AAClC,mDAAuF;AAA9E,0DAAqB;AAAE,uDAAkB;AAClD,8CAAqE;AAA5D,mDAAY;AAAE,uDAAgB;AACvC,8CAQ6B;AAP3B,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,oDAAa;AAEf,0CAA0D;AAAjD,0DAAqB;AAC9B,4CAA4D;AAAnD,4DAAsB;AAC/B,uDAA6E;AAApE,sEAA8B;AACvC,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAmE;AAA1D,8DAAyB;AAClC,gDAAgE;AAAvD,gEAAwB;AACjC,4CAAiD;AAAxC,iDAAW;AACpB,wDAA6D;AAApD,6DAAiB;AAC1B,8CAAiE;AAAxD,mDAAY;AAAE,mDAAY;AACnC,uDAA6E;AAApE,sEAA8B;AACvC,mDAAyE;AAAhE,kEAA4B;AACrC,iDAAuE;AAA9D,gEAA2B;AACpC,4DAAmF;AAA1E,mFAAqC;AAC9C,wEAAwF;AAA/E,0EAA6B;AACtC,4CAAiD;AAAxC,iDAAW;AACpB,oDAA6E;AAApE,iDAAO;AAAE,oEAA0B;AAC5C,gDAAgE;AAAvD,gEAAwB;AACjC,sDAAsE;AAA7D,sEAA2B;AACpC,gDAAgE;AAAvD,gEAAwB;AACjC,8CAAiG;AAAxF,6DAAsB;AAAE,mDAAY;AAAE,2DAAoB;AACnE,4CAA4D;AAAnD,4DAAsB;AAC/B,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAuE;AAA9D,kEAA6B;AACtC,+CAAmE;AAA1D,8DAAyB;AAClC,wCAAwD;AAA/C,wDAAoB;AAC7B,gDAAmE;AAA1D,+DAAyB;AAClC,kDAAkE;AAAzD,kEAAyB;AAClC,gDAAgE;AAAvD,gEAAwB;AACjC,0CAA+C;AAAtC,+CAAU;AACnB,6CAA4D;AAAnD,6DAAsB;AAC/B,2CAAgD;AAAvC,iDAAW;AACpB,2CAAkD;AAAzC,mDAAa;AACtB,8DAA6E;AAApE,6EAA8B;AACvC,sDAAsE;AAA7D,sEAA2B;AACpC,yDAAmE;AAA1D,sEAAwB;AACjC,uDAAuE;AAA9D,0EAA6B;AACtC,2DAAqE;AAA5D,0EAA0B;AACnC,+CAA8C;AAArC,mDAAS;AAClB,6CAAkD;AAAzC,uDAAc"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,wDAAwE;AAA/D,wEAA4B;AACrC,sDAAiF;AAAxE,qEAAgC;AACzC,8CAA8D;AAArD,8DAAuB;AAChC,kDAAkE;AAAzD,kEAAyB;AAClC,sDAA2D;AAAlD,2DAAgB;AACzB,gDAAqD;AAA5C,qDAAa;AACtB,sDAA2D;AAAlD,mDAAY;AACrB,gDAAqD;AAA5C,qDAAa;AACtB,wDAA6D;AAApD,6DAAiB;AAC1B,gDAAgE;AAAvD,gEAAwB;AACjC,0DAA0E;AAAjE,0EAA6B;AACtC,8CAAmD;AAA1C,mDAAY;AACrB,kDAAkE;AAAzD,kEAAyB;AAClC,mDAAuF;AAA9E,0DAAqB;AAAE,uDAAkB;AAClD,8CAAqE;AAA5D,mDAAY;AAAE,uDAAgB;AACvC,8CAQ6B;AAP3B,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,oDAAa;AAEf,0CAA0D;AAAjD,0DAAqB;AAC9B,4CAA4D;AAAnD,4DAAsB;AAC/B,uDAA6E;AAApE,sEAA8B;AACvC,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAmE;AAA1D,8DAAyB;AAClC,gDAAgE;AAAvD,gEAAwB;AACjC,4CAAiD;AAAxC,iDAAW;AACpB,wDAA6D;AAApD,6DAAiB;AAC1B,8CAAiE;AAAxD,mDAAY;AAAE,mDAAY;AACnC,uDAA6E;AAApE,sEAA8B;AACvC,mDAAyE;AAAhE,kEAA4B;AACrC,iDAAuE;AAA9D,gEAA2B;AACpC,4DAAmF;AAA1E,mFAAqC;AAC9C,wEAAwF;AAA/E,0EAA6B;AACtC,4CAAiD;AAAxC,iDAAW;AACpB,oDAA6E;AAApE,iDAAO;AAAE,oEAA0B;AAC5C,gDAAgE;AAAvD,gEAAwB;AACjC,sDAAsE;AAA7D,sEAA2B;AACpC,gDAAgE;AAAvD,gEAAwB;AACjC,8CAAiG;AAAxF,6DAAsB;AAAE,mDAAY;AAAE,2DAAoB;AACnE,4CAA4D;AAAnD,4DAAsB;AAC/B,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAuE;AAA9D,kEAA6B;AACtC,+CAAmE;AAA1D,8DAAyB;AAClC,wCAAwD;AAA/C,wDAAoB;AAC7B,gDAAmE;AAA1D,+DAAyB;AAClC,kDAAkE;AAAzD,kEAAyB;AAClC,gDAAgE;AAAvD,gEAAwB;AACjC,0CAA+C;AAAtC,+CAAU;AACnB,6CAA4D;AAAnD,6DAAsB;AAC/B,2CAAgD;AAAvC,iDAAW;AACpB,2CAAkD;AAAzC,mDAAa;AACtB,8DAA6E;AAApE,6EAA8B;AACvC,sDAAsE;AAA7D,sEAA2B;AACpC,yDAAmE;AAA1D,sEAAwB;AACjC,uDAAuE;AAA9D,0EAA6B;AACtC,2DAAqE;AAA5D,0EAA0B;AACnC,+CAA8C;AAArC,mDAAS;AAClB,6DAA6D;AAApD,kEAAiB;AAC1B,6CAAkD;AAAzC,uDAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.32.0",
+  "version": "0.32.2",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,6 +10,7 @@
     "test:ci": "./node_modules/.bin/jest --silent --json --outputFile=tests.json",
     "build": "./node_modules/typescript/bin/tsc --project tsconfig.prod.json",
     "build:test": "./node_modules/typescript/bin/tsc --noEmit",
+    "build:test:prod": "./node_modules/typescript/bin/tsc --project tsconfig.prod.json --noEmit",
     "storybook": "start-storybook -p 6007 --no-dll",
     "init-storybook": "yarn test:ci && yarn storybook",
     "build-storybook": "build-storybook"
@@ -56,8 +57,8 @@
     "@types/jest": "^26.0.19",
     "@types/lodash": "^4.14.166",
     "@types/node": "^14.14.14",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "chromatic": "^6.3.3",
@@ -66,13 +67,12 @@
     "npm-cli-login": "^0.1.1",
     "playwright": "^1.16.3",
     "pre-push": "^0.1.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.4.2",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.2.0",
     "storybook-addon-outline": "^1.4.2",
     "storybook-dark-mode": "^1.1.2",
-    "styled-components": "^5.2.1",
     "ts-jest": "^26.4.4",
     "ts-node": "^9.1.1",
     "typescript": "^4.7.3",
@@ -83,20 +83,22 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@popperjs/core": "^2.10.2",
-    "@react-spring/web": "^9.2.4",
+    "@popperjs/core": "^2.11.6",
+    "@react-spring/web": "^9.6.1",
     "classnames": "^2.2.6",
     "epoch-timeago": "^1.1.9",
-    "lodash": "^4.17.20",
-    "polished": "^4.1.3",
+    "lodash": "^4.17.21",
+    "polished": "^4.2.2",
     "re-resizable": "^6.9.0",
-    "react-icons": "^4.3.1",
-    "react-popper": "^2.2.5",
+    "react-icons": "^4.7.1",
+    "react-popper": "^2.3.0",
     "react-scrollbar": "^0.5.6",
-    "react-use": "^15.3.4",
+    "react-use": "^17.4.0",
     "react-window": "^1.8.6",
+    "scheduler": "^0.23.0",
     "shortid": "^2.2.16",
-    "styled-components": "^5.2.1",
-    "thenby": "^1.3.4"
+    "styled-components": "^5.3.6",
+    "thenby": "^1.3.4",
+    "use-context-selector": "^1.4.1"
   }
 }

package/src/components/Breadcrumbs/item.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { IReqoreBreadcrumbItem } from '.';
 import { PADDING_FROM_SIZE, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
@@ -124,13 +124,17 @@ const ReqoreBreadcrumbsItem = forwardRef<HTMLDivElement, IReqoreBreadcrumbItemPr
     ref
   ) => {
     const { targetRef } = useCombinedRefs(ref);
+    const [itemRef, setItemRef] = useState(undefined);
     const theme = useReqoreTheme('breadcrumbs', customTheme);
 
-    useTooltip(targetRef?.current, tooltip);
+    useTooltip(itemRef, tooltip);
 
     return (
       <StyledBreadcrumbItem
-        ref={targetRef}
+        ref={(ref) => {
+          targetRef.current = ref;
+          setItemRef(ref);
+        }}
         active={active}
         interactive={interactive || !!props?.onClick}
         className='reqore-breadcrumbs-item'

package/src/components/Button/index.tsx

@@ -1,5 +1,5 @@
 import { rgba } from 'polished';
-import React, { forwardRef, memo, useCallback, useContext } from 'react';
+import React, { forwardRef, memo, useCallback, useState } from 'react';
 import styled, { css } from 'styled-components';
 import {
   ICON_FROM_SIZE,
@@ -10,10 +10,10 @@ import {
   TSizes,
 } from '../../constants/sizes';
 import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
-import ReqoreContext from '../../context/ReqoreContext';
 import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
 import { alignToFlexAlign, getOneLessSize } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useReqoreProperty } from '../../hooks/useReqoreContext';
 import { useReqoreEffect } from '../../hooks/useReqoreEffect';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
@@ -398,12 +398,13 @@ const ReqoreButton = memo(
       ref
     ) => {
       const { targetRef } = useCombinedRefs(ref);
-      const { animations } = useContext(ReqoreContext);
+      const [buttonRef, setButtonRef] = useState<HTMLButtonElement>(undefined);
+      const animations = useReqoreProperty('animations');
       const theme = useReqoreTheme('main', customTheme, intent);
       const fixedEffect = useReqoreEffect('buttons', theme, effect);
 
       /* A custom hook that is used to add a tooltip to the button. */
-      useTooltip(targetRef.current, tooltip);
+      useTooltip(buttonRef, tooltip);
 
       // If color or intent was specified, set the color
       const customColor = intent ? theme.main : changeLightness(theme.main, 0.07);
@@ -428,7 +429,10 @@ const ReqoreButton = memo(
           tabindex={rest.disabled ? -1 : 0}
           as='button'
           theme={theme}
-          ref={targetRef}
+          ref={(ref) => {
+            targetRef.current = ref;
+            setButtonRef(ref);
+          }}
           fluid={fluid}
           fixed={fixed}
           maxWidth={maxWidth}
@@ -450,7 +454,14 @@ const ReqoreButton = memo(
                   icon={icon}
                   size={size}
                   color={leftIconColor || iconColor}
-                  style={textAlign !== 'left' ? { marginRight: 'auto' } : undefined}
+                  style={
+                    textAlign !== 'left'
+                      ? {
+                          marginRight: 'auto',
+                          marginLeft: textAlign === 'center' ? 'auto' : undefined,
+                        }
+                      : undefined
+                  }
                 />
                 {children || badge || rightIcon ? (
                   <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
@@ -497,7 +508,14 @@ const ReqoreButton = memo(
                 <ReqoreIcon
                   icon={rightIcon}
                   size={size}
-                  style={textAlign !== 'right' ? { marginLeft: 'auto' } : undefined}
+                  style={
+                    textAlign !== 'right'
+                      ? {
+                          marginLeft: 'auto',
+                          marginRight: textAlign === 'center' ? 'auto' : undefined,
+                        }
+                      : undefined
+                  }
                   color={rightIconColor || iconColor}
                 />
               </>

package/src/components/Checkbox/index.tsx

@@ -1,5 +1,5 @@
 import { rgba } from 'polished';
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useMemo, useState } from 'react';
 import { useMeasure } from 'react-use';
 import styled, { css } from 'styled-components';
 import { PADDING_FROM_SIZE, SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
@@ -8,7 +8,7 @@ import {
   changeLightness,
   getNthGradientColor,
   getReadableColor,
-  getReadableColorFrom
+  getReadableColorFrom,
 } from '../../helpers/colors';
 import { getOneLessSize } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
@@ -21,7 +21,7 @@ import {
   IReqoreReadOnly,
   IWithReqoreCustomTheme,
   IWithReqoreEffect,
-  TReqoreTooltipProp
+  TReqoreTooltipProp,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import { IReqoreEffect, ReqoreTextEffect, StyledEffect, StyledTextEffect } from '../Effect';
@@ -196,11 +196,12 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
     ref
   ) => {
     const { targetRef } = useCombinedRefs(ref);
+    const [itemRef, setItemRef] = useState<HTMLDivElement>(undefined);
     const [offRef, { width: offWidth }] = useMeasure();
     const [onRef, { width: onWidth }] = useMeasure();
     const theme = useReqoreTheme('main', customTheme, intent);
 
-    useTooltip(targetRef.current, tooltip);
+    useTooltip(itemRef, tooltip);
 
     const width = useMemo(() => {
       if ((!image && !onText) || !offText) return undefined;
@@ -217,7 +218,10 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
     return (
       <StyledCheckbox
         {...rest}
-        ref={targetRef}
+        ref={(ref) => {
+          targetRef.current = ref;
+          setItemRef(ref);
+        }}
         theme={theme}
         size={size}
         disabled={disabled}

package/src/components/Collection/index.tsx

@@ -1,6 +1,6 @@
 import { size } from 'lodash';
 import { useMemo, useState } from 'react';
-import { useUpdateEffect } from 'react-use';
+import { useDebounce, useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import { PADDING_FROM_SIZE } from '../../constants/sizes';
 import { IReqoreIconName } from '../../types/icons';
@@ -46,6 +46,7 @@ export interface IReqoreCollectionProps
   showAs?: 'list' | 'grid';
   showSelectedFirst?: boolean;
   selectedIcon?: IReqoreIconName;
+  searchDelay?: number;
 
   childrenBefore?: React.ReactNode;
   childrenAfter?: React.ReactNode;
@@ -93,6 +94,7 @@ export const ReqoreCollection = ({
   onQueryChange,
   childrenBefore,
   childrenAfter,
+  searchDelay = 300,
   emptyMessage = 'No data in this collection, try changing your search query or filters',
   sortButtonTooltip = (sort) => (sort === 'desc' ? 'Sort ascending' : 'Sort descending'),
   displayButtonTooltip = (display) => (display === 'grid' ? 'Show as list' : 'Show as grid'),
@@ -102,6 +104,7 @@ export const ReqoreCollection = ({
   const [_showAs, setShowAs] = useState<'list' | 'grid'>(showAs);
   const [sort, setSort] = useState<'asc' | 'desc'>('asc');
   const [query, setQuery] = useState<string>('');
+  const [preQuery, setPreQuery] = useState<string>('');
 
   useUpdateEffect(() => {
     setShowAs(showAs);
@@ -111,6 +114,14 @@ export const ReqoreCollection = ({
     onQueryChange?.(query);
   }, [query]);
 
+  useDebounce(
+    () => {
+      setQuery(preQuery);
+    },
+    searchDelay,
+    [preQuery]
+  );
+
   const sortedItems: IReqoreCollectionItemProps[] = useMemo(() => {
     if (!sortable) {
       return items;
@@ -141,7 +152,7 @@ export const ReqoreCollection = ({
     });
   }, [items, sort]);
 
-  const filteredItems: IReqoreCollectionItemProps[] = useMemo(() => {
+  const finalItems: IReqoreCollectionItemProps[] = useMemo(() => {
     if (!filterable || query === '') {
       return sortedItems;
     }
@@ -159,11 +170,10 @@ export const ReqoreCollection = ({
     });
   }, [items, query, sortedItems]);
 
-  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setQuery(event.target.value);
+  const handlePreQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPreQuery(event.target.value);
   };
 
-  const finalItems = filteredItems;
   const finalActions: TReqorePanelActions = useMemo(() => {
     let actions: TReqorePanelActions = rest.actions ? [...rest.actions] : [];
 
@@ -171,10 +181,11 @@ export const ReqoreCollection = ({
       responsive: false,
       group: [
         {
-          icon: _showAs === 'grid' ? 'ListOrdered' : 'GridLine',
+          icon: _showAs === 'grid' ? 'ListUnordered' : 'GridLine',
           onClick: () => setShowAs(_showAs === 'grid' ? 'list' : 'grid'),
           tooltip: displayButtonTooltip(_showAs),
           disabled: !size(finalItems),
+          textAlign: 'center',
           ...displayButtonProps,
         },
       ],
@@ -186,6 +197,7 @@ export const ReqoreCollection = ({
         onClick: () => setSort(sort === 'desc' ? 'asc' : 'desc'),
         tooltip: sortButtonTooltip(sort),
         disabled: !size(finalItems),
+        textAlign: 'center',
         ...sortButtonProps,
       });
     }
@@ -200,8 +212,8 @@ export const ReqoreCollection = ({
             fixed: false,
             placeholder: inputPlaceholder(finalItems),
             onClearClick: () => setQuery(''),
-            onChange: handleQueryChange,
-            value: query,
+            onChange: handlePreQueryChange,
+            value: preQuery,
             icon: 'Search2Line',
             minimal: false,
             ...inputProps,
@@ -211,7 +223,7 @@ export const ReqoreCollection = ({
     }
 
     return [...actions, toolbarGroup];
-  }, [filterable, handleQueryChange, query, rest.actions, _showAs, sort, sortable, finalItems]);
+  }, [filterable, preQuery, query, rest.actions, _showAs, sort, sortable, finalItems]);
 
   return (
     <ReqorePanel

package/src/components/Collection/item.tsx

@@ -1,10 +1,10 @@
 import { map, size } from 'lodash';
 import { rgba } from 'polished';
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useDebounce, useMeasure } from 'react-use';
 import styled, { css } from 'styled-components';
-import ReqoreContext from '../../context/ReqoreContext';
 import { changeDarkness, getMainBackgroundColor } from '../../helpers/colors';
+import { useReqoreProperty } from '../../hooks/useReqoreContext';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { StyledBackdrop } from '../Drawer';
 import {
@@ -84,7 +84,7 @@ export const ReqoreCollectionItem = ({
   ...rest
 }: IReqoreCollectionItemProps) => {
   const [isSelected, setIsSelected] = useState(false);
-  const { getAndIncreaseZIndex } = useContext(ReqoreContext);
+  const getAndIncreaseZIndex = useReqoreProperty('getAndIncreaseZIndex');
   const ref = useRef<HTMLDivElement>(null);
   const [contentRef, sizes] = useMeasure();
   const originalDimensions = useRef(null);

package/src/components/ControlGroup/index.tsx

@@ -334,7 +334,7 @@ const ReqoreControlGroup = memo(
 
             let newProps = {
               ...child.props,
-              key: index,
+              key: child.props.reactKey || child.props.key || index,
               minimal:
                 child.props?.minimal || child.props?.minimal === false
                   ? child.props.minimal

package/src/components/Drawer/index.tsx

@@ -1,10 +1,10 @@
 import { animated, useTransition } from '@react-spring/web';
 import { rgba } from 'polished';
 import { Resizable } from 're-resizable';
-import { useContext, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
-import { ReqoreContext } from '../..';
+import { useReqoreProperty } from '../..';
 import { SPRING_CONFIG, SPRING_CONFIG_NO_ANIMATIONS } from '../../constants/animations';
 import { IReqoreTheme } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
@@ -147,7 +147,7 @@ const getSpringConfig = (isModal?: boolean, position?: TPosition, floating?: boo
         leave: { opacity: 0, [position]: '-80px' },
       };
 
-export const ReqoreDrawer = ({
+export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
   children,
   isOpen,
   isHidden,
@@ -173,7 +173,7 @@ export const ReqoreDrawer = ({
   actions = [],
   ...rest
 }: IReqoreDrawerProps) => {
-  const { animations } = useContext(ReqoreContext);
+  const animations = useReqoreProperty('animations');
   const theme = useReqoreTheme('main', customTheme, intent);
   const layout = useMemo(
     () =>