@qoretechnologies/reqore 0.31.2 → 0.32.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (183) hide show
  1. package/.github/workflows/tests.yml +3 -1
  2. package/__tests__/breadcrumbs.test.tsx +46 -28
  3. package/__tests__/button.test.tsx +18 -0
  4. package/__tests__/checkbox.test.tsx +19 -1
  5. package/__tests__/collection.test.tsx +14 -1
  6. package/__tests__/icon.test.tsx +19 -1
  7. package/__tests__/input.test.tsx +435 -24
  8. package/__tests__/messages.test.tsx +16 -0
  9. package/__tests__/modal.test.tsx +4 -4
  10. package/__tests__/multiselect.test.tsx +8 -10
  11. package/__tests__/notifications.test.tsx +6 -6
  12. package/__tests__/panel.test.tsx +19 -1
  13. package/__tests__/textarea.test.tsx +423 -24
  14. package/__tests__/tree.test.tsx +3 -1
  15. package/dist/components/Breadcrumbs/item.d.ts.map +1 -1
  16. package/dist/components/Breadcrumbs/item.js +6 -2
  17. package/dist/components/Breadcrumbs/item.js.map +1 -1
  18. package/dist/components/Button/index.d.ts.map +1 -1
  19. package/dist/components/Button/index.js +18 -4
  20. package/dist/components/Button/index.js.map +1 -1
  21. package/dist/components/Checkbox/index.d.ts.map +1 -1
  22. package/dist/components/Checkbox/index.js +8 -4
  23. package/dist/components/Checkbox/index.js.map +1 -1
  24. package/dist/components/Collection/index.d.ts +4 -2
  25. package/dist/components/Collection/index.d.ts.map +1 -1
  26. package/dist/components/Collection/index.js +19 -13
  27. package/dist/components/Collection/index.js.map +1 -1
  28. package/dist/components/Collection/item.js +2 -2
  29. package/dist/components/Collection/item.js.map +1 -1
  30. package/dist/components/Comment/index.d.ts +0 -1
  31. package/dist/components/Comment/index.d.ts.map +1 -1
  32. package/dist/components/ControlGroup/index.d.ts.map +1 -1
  33. package/dist/components/ControlGroup/index.js +18 -57
  34. package/dist/components/ControlGroup/index.js.map +1 -1
  35. package/dist/components/Drawer/index.d.ts +1 -1
  36. package/dist/components/Drawer/index.d.ts.map +1 -1
  37. package/dist/components/Drawer/index.js +1 -1
  38. package/dist/components/Drawer/index.js.map +1 -1
  39. package/dist/components/Dropdown/item.d.ts +0 -1
  40. package/dist/components/Dropdown/item.d.ts.map +1 -1
  41. package/dist/components/Icon/index.d.ts +2 -0
  42. package/dist/components/Icon/index.d.ts.map +1 -1
  43. package/dist/components/Icon/index.js +17 -8
  44. package/dist/components/Icon/index.js.map +1 -1
  45. package/dist/components/Input/index.d.ts +4 -0
  46. package/dist/components/Input/index.d.ts.map +1 -1
  47. package/dist/components/Input/index.js +19 -7
  48. package/dist/components/Input/index.js.map +1 -1
  49. package/dist/components/InputClearButton/index.d.ts +1 -1
  50. package/dist/components/InputClearButton/index.d.ts.map +1 -1
  51. package/dist/components/InputClearButton/index.js +18 -8
  52. package/dist/components/InputClearButton/index.js.map +1 -1
  53. package/dist/components/InternalPopover/index.d.ts.map +1 -1
  54. package/dist/components/InternalPopover/index.js +2 -1
  55. package/dist/components/InternalPopover/index.js.map +1 -1
  56. package/dist/components/Menu/item.d.ts +1 -1
  57. package/dist/components/Menu/item.d.ts.map +1 -1
  58. package/dist/components/Menu/item.js +3 -6
  59. package/dist/components/Menu/item.js.map +1 -1
  60. package/dist/components/Message/index.d.ts.map +1 -1
  61. package/dist/components/Message/index.js +6 -2
  62. package/dist/components/Message/index.js.map +1 -1
  63. package/dist/components/Modal/index.d.ts +0 -1
  64. package/dist/components/Modal/index.d.ts.map +1 -1
  65. package/dist/components/Panel/index.d.ts +1 -0
  66. package/dist/components/Panel/index.d.ts.map +1 -1
  67. package/dist/components/Panel/index.js +18 -9
  68. package/dist/components/Panel/index.js.map +1 -1
  69. package/dist/components/Panel/panel.screenshot.d.ts +0 -1
  70. package/dist/components/Panel/panel.screenshot.d.ts.map +1 -1
  71. package/dist/components/Sidebar/item.d.ts +0 -1
  72. package/dist/components/Sidebar/item.d.ts.map +1 -1
  73. package/dist/components/Sidebar/item.js +1 -3
  74. package/dist/components/Sidebar/item.js.map +1 -1
  75. package/dist/components/Spinner/index.d.ts +0 -1
  76. package/dist/components/Spinner/index.d.ts.map +1 -1
  77. package/dist/components/Table/header.d.ts +0 -1
  78. package/dist/components/Table/header.d.ts.map +1 -1
  79. package/dist/components/Tag/index.d.ts.map +1 -1
  80. package/dist/components/Tag/index.js +7 -4
  81. package/dist/components/Tag/index.js.map +1 -1
  82. package/dist/components/Textarea/index.d.ts +2 -0
  83. package/dist/components/Textarea/index.d.ts.map +1 -1
  84. package/dist/components/Textarea/index.js +9 -6
  85. package/dist/components/Textarea/index.js.map +1 -1
  86. package/dist/components/Tree/index.d.ts +0 -1
  87. package/dist/components/Tree/index.d.ts.map +1 -1
  88. package/dist/components/Tree/index.js +2 -4
  89. package/dist/components/Tree/index.js.map +1 -1
  90. package/dist/containers/PopoverProvider.d.ts.map +1 -1
  91. package/dist/containers/PopoverProvider.js +2 -2
  92. package/dist/containers/PopoverProvider.js.map +1 -1
  93. package/dist/containers/ReqoreProvider.d.ts.map +1 -1
  94. package/dist/containers/ReqoreProvider.js +4 -0
  95. package/dist/containers/ReqoreProvider.js.map +1 -1
  96. package/dist/containers/ThemeProvider.d.ts +1 -2
  97. package/dist/containers/ThemeProvider.d.ts.map +1 -1
  98. package/dist/containers/ThemeProvider.js +3 -3
  99. package/dist/containers/ThemeProvider.js.map +1 -1
  100. package/dist/context/PopoverContext.d.ts +1 -2
  101. package/dist/context/PopoverContext.d.ts.map +1 -1
  102. package/dist/context/PopoverContext.js +2 -2
  103. package/dist/context/PopoverContext.js.map +1 -1
  104. package/dist/context/ReqoreContext.d.ts +3 -2
  105. package/dist/context/ReqoreContext.d.ts.map +1 -1
  106. package/dist/context/ReqoreContext.js +5 -3
  107. package/dist/context/ReqoreContext.js.map +1 -1
  108. package/dist/context/ThemeContext.d.ts +1 -2
  109. package/dist/context/ThemeContext.d.ts.map +1 -1
  110. package/dist/context/ThemeContext.js +2 -2
  111. package/dist/context/ThemeContext.js.map +1 -1
  112. package/dist/hooks/useAutoFocus.d.ts +11 -0
  113. package/dist/hooks/useAutoFocus.d.ts.map +1 -0
  114. package/dist/hooks/useAutoFocus.js +80 -0
  115. package/dist/hooks/useAutoFocus.js.map +1 -0
  116. package/dist/hooks/useLatestZIndex.d.ts.map +1 -1
  117. package/dist/hooks/useLatestZIndex.js +3 -2
  118. package/dist/hooks/useLatestZIndex.js.map +1 -1
  119. package/dist/hooks/usePopover.d.ts +0 -1
  120. package/dist/hooks/usePopover.d.ts.map +1 -1
  121. package/dist/hooks/usePopover.js +4 -3
  122. package/dist/hooks/usePopover.js.map +1 -1
  123. package/dist/hooks/useReqore.js +2 -2
  124. package/dist/hooks/useReqore.js.map +1 -1
  125. package/dist/hooks/useReqoreContext.d.ts +3 -0
  126. package/dist/hooks/useReqoreContext.d.ts.map +1 -0
  127. package/dist/hooks/useReqoreContext.js +19 -0
  128. package/dist/hooks/useReqoreContext.js.map +1 -0
  129. package/dist/hooks/useReqoreEffect.js +2 -5
  130. package/dist/hooks/useReqoreEffect.js.map +1 -1
  131. package/dist/hooks/useTheme.d.ts.map +1 -1
  132. package/dist/hooks/useTheme.js +20 -20
  133. package/dist/hooks/useTheme.js.map +1 -1
  134. package/dist/index.d.ts +1 -0
  135. package/dist/index.d.ts.map +1 -1
  136. package/dist/index.js +3 -1
  137. package/dist/index.js.map +1 -1
  138. package/dist/styles.d.ts.map +1 -1
  139. package/dist/styles.js +1 -1
  140. package/dist/styles.js.map +1 -1
  141. package/package.json +20 -16
  142. package/src/components/Breadcrumbs/item.tsx +7 -3
  143. package/src/components/Button/index.tsx +26 -7
  144. package/src/components/Checkbox/index.tsx +9 -5
  145. package/src/components/Collection/index.tsx +33 -11
  146. package/src/components/Collection/item.tsx +3 -3
  147. package/src/components/ControlGroup/index.tsx +26 -87
  148. package/src/components/Drawer/index.tsx +4 -4
  149. package/src/components/Icon/index.tsx +27 -9
  150. package/src/components/Input/index.tsx +35 -4
  151. package/src/components/InputClearButton/index.tsx +41 -17
  152. package/src/components/InternalPopover/index.tsx +2 -1
  153. package/src/components/Menu/item.tsx +6 -9
  154. package/src/components/Message/index.tsx +6 -2
  155. package/src/components/Panel/index.tsx +26 -9
  156. package/src/components/Sidebar/item.tsx +2 -4
  157. package/src/components/Tag/index.tsx +9 -6
  158. package/src/components/Textarea/index.tsx +16 -11
  159. package/src/components/Tree/index.tsx +5 -8
  160. package/src/containers/PopoverProvider.tsx +2 -2
  161. package/src/containers/ReqoreProvider.tsx +5 -1
  162. package/src/containers/ThemeProvider.tsx +3 -13
  163. package/src/context/PopoverContext.tsx +1 -1
  164. package/src/context/ReqoreContext.tsx +4 -1
  165. package/src/context/ThemeContext.tsx +1 -1
  166. package/src/hooks/useAutoFocus.ts +104 -0
  167. package/src/hooks/useLatestZIndex.ts +5 -3
  168. package/src/hooks/usePopover.tsx +4 -3
  169. package/src/hooks/useReqore.ts +1 -1
  170. package/src/hooks/useReqoreContext.ts +16 -0
  171. package/src/hooks/useReqoreEffect.ts +3 -3
  172. package/src/hooks/useTheme.ts +21 -17
  173. package/src/index.tsx +1 -0
  174. package/src/stories/Button/Button.stories.tsx +7 -0
  175. package/src/stories/Collection/Collection.stories.tsx +56 -9
  176. package/src/stories/Drawer/Drawer.stories.tsx +4 -3
  177. package/src/stories/Input/Input.stories.tsx +29 -6
  178. package/src/stories/Modal/Modal.stories.tsx +3 -4
  179. package/src/stories/Notifications/Interactive.stories.tsx +3 -4
  180. package/src/stories/Panel/Panel.stories.tsx +4 -2
  181. package/src/stories/TextArea/TextArea.stories.tsx +1 -0
  182. package/src/styles.ts +0 -1
  183. package/tests.json +1 -1
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ exports.__esModule = true;
6
+ exports.useReqoreProperty = void 0;
7
+ var use_context_selector_1 = require("use-context-selector");
8
+ var ReqoreContext_1 = __importDefault(require("../context/ReqoreContext"));
9
+ var useReqoreProperty = function (property) {
10
+ var contextProperty = (0, use_context_selector_1.useContextSelector)(ReqoreContext_1["default"], function (value) {
11
+ if (!(property in value)) {
12
+ throw new Error("Reqore context property ".concat(property, " not found"));
13
+ }
14
+ return value[property];
15
+ });
16
+ return contextProperty;
17
+ };
18
+ exports.useReqoreProperty = useReqoreProperty;
19
+ //# sourceMappingURL=useReqoreContext.js.map
@@ -0,0 +1 @@
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"}
@@ -10,15 +10,12 @@ var __assign = (this && this.__assign) || function () {
10
10
  };
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
- var __importDefault = (this && this.__importDefault) || function (mod) {
14
- return (mod && mod.__esModule) ? mod : { "default": mod };
15
- };
16
13
  exports.__esModule = true;
17
14
  exports.useReqoreEffect = void 0;
18
15
  var react_1 = require("react");
19
- var ThemeContext_1 = __importDefault(require("../context/ThemeContext"));
16
+ var useTheme_1 = require("./useTheme");
20
17
  var useReqoreEffect = function (component, theme, effect) {
21
- var _theme = (0, react_1.useContext)(ThemeContext_1["default"]);
18
+ var _theme = (0, useTheme_1.useReqoreTheme)();
22
19
  // Return the effect if the component is not defined in the theme
23
20
  if (!theme[component]) {
24
21
  return effect;
@@ -1 +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"}
1
+ {"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"}
@@ -1 +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"}
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,YA0BF,CAAC"}
@@ -1,32 +1,32 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
2
  exports.__esModule = true;
6
3
  exports.useReqoreTheme = void 0;
7
4
  var lodash_1 = require("lodash");
8
5
  var react_1 = require("react");
9
- var ThemeContext_1 = __importDefault(require("../context/ThemeContext"));
10
6
  var colors_1 = require("../helpers/colors");
7
+ var useReqoreContext_1 = require("./useReqoreContext");
11
8
  var useReqoreTheme = function (element, customTheme, intent, intentsKey) {
12
- var _a;
13
9
  if (customTheme === void 0) { customTheme = {}; }
14
10
  if (intentsKey === void 0) { intentsKey = 'intents'; }
15
- var theme = (0, react_1.useContext)(ThemeContext_1["default"]);
16
- if (!element) {
17
- return theme;
18
- }
19
- var _customTheme = (0, lodash_1.cloneDeep)(customTheme);
20
- if (_customTheme.main) {
21
- _customTheme.main = (0, colors_1.getColorFromMaybeString)(theme, customTheme.main);
22
- }
23
- if ((_a = _customTheme.text) === null || _a === void 0 ? void 0 : _a.color) {
24
- _customTheme.text.color = (0, colors_1.getColorFromMaybeString)(theme, customTheme.text.color);
25
- }
26
- if (element === 'main' && intent) {
27
- _customTheme.main = theme[intentsKey][intent];
28
- }
29
- return (0, colors_1.mergeThemes)(element, theme, _customTheme);
11
+ var theme = (0, useReqoreContext_1.useReqoreProperty)('theme');
12
+ var finalTheme = (0, react_1.useMemo)(function () {
13
+ var _a;
14
+ if (!element) {
15
+ return theme;
16
+ }
17
+ var _customTheme = (0, lodash_1.cloneDeep)(customTheme);
18
+ if (_customTheme.main) {
19
+ _customTheme.main = (0, colors_1.getColorFromMaybeString)(theme, customTheme.main);
20
+ }
21
+ if ((_a = _customTheme.text) === null || _a === void 0 ? void 0 : _a.color) {
22
+ _customTheme.text.color = (0, colors_1.getColorFromMaybeString)(theme, customTheme.text.color);
23
+ }
24
+ if (element === 'main' && intent) {
25
+ _customTheme.main = theme[intentsKey][intent];
26
+ }
27
+ return (0, colors_1.mergeThemes)(element, theme, _customTheme);
28
+ }, [JSON.stringify(theme), element, JSON.stringify(customTheme), intent, intentsKey]);
29
+ return finalTheme;
30
30
  };
31
31
  exports.useReqoreTheme = useReqoreTheme;
32
32
  //# sourceMappingURL=useTheme.js.map
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -54,5 +54,6 @@ export { default as ReqoreContext } from './context/ReqoreContext';
54
54
  export { default as ReqoreThemeContext } from './context/ThemeContext';
55
55
  export { default as useLatestZIndex } from './hooks/useLatestZIndex';
56
56
  export { useReqore } from './hooks/useReqore';
57
+ export { useReqoreProperty } from './hooks/useReqoreContext';
57
58
  export { useReqoreTheme } from './hooks/useTheme';
58
59
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
package/dist/index.js CHANGED
@@ -12,7 +12,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
12
12
  }));
13
13
  exports.__esModule = true;
14
14
  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;
15
- 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;
15
+ 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;
16
16
  var Breadcrumbs_1 = require("./components/Breadcrumbs");
17
17
  __createBinding(exports, Breadcrumbs_1, "default", "ReqoreBreadcrumbs");
18
18
  var item_1 = require("./components/Breadcrumbs/item");
@@ -137,6 +137,8 @@ var useLatestZIndex_1 = require("./hooks/useLatestZIndex");
137
137
  __createBinding(exports, useLatestZIndex_1, "default", "useLatestZIndex");
138
138
  var useReqore_1 = require("./hooks/useReqore");
139
139
  __createBinding(exports, useReqore_1, "useReqore");
140
+ var useReqoreContext_1 = require("./hooks/useReqoreContext");
141
+ __createBinding(exports, useReqoreContext_1, "useReqoreProperty");
140
142
  var useTheme_1 = require("./hooks/useTheme");
141
143
  __createBinding(exports, useTheme_1, "useReqoreTheme");
142
144
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +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"}
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,6DAA6D;AAApD,kEAAiB;AAC1B,6CAAkD;AAAzC,uDAAc"}
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,OAAO,CAAC;AACxC,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAEnC,eAAO,MAAM,mBAAmB,KAY/B,CAAC;AAEF,eAAO,MAAM,iBAAiB,KAI7B,CAAC;AAEF,eAAO,MAAM,eAAe,KAI3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,KAIhC,CAAC;AAEF,eAAO,MAAM,gBAAgB,KAK5B,CAAC;AAEF,eAAO,MAAM,eAAe,KAI3B,CAAC;AAEF,eAAO,MAAM,eAAe,KAG3B,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,OAAO,CAAC;AACxC,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAEnC,eAAO,MAAM,mBAAmB,KAY/B,CAAC;AAEF,eAAO,MAAM,iBAAiB,KAI7B,CAAC;AAEF,eAAO,MAAM,eAAe,KAI3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,KAIhC,CAAC;AAEF,eAAO,MAAM,gBAAgB,KAK5B,CAAC;AAEF,eAAO,MAAM,eAAe,KAI3B,CAAC;AAEF,eAAO,MAAM,eAAe,KAE3B,CAAC"}
package/dist/styles.js CHANGED
@@ -16,6 +16,6 @@ exports.ActiveIconScale = (0, styled_components_1.css)(templateObject_3 || (temp
16
16
  exports.ChildActiveIconScale = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n > ", " {\n transform: scale(", ");\n }\n"], ["\n > ", " {\n transform: scale(", ");\n }\n"])), Icon_1.StyledIconWrapper, exports.ACTIVE_ICON_SCALE);
17
17
  exports.ScaleIconOnHover = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &:hover,\n &:focus {\n ", "\n }\n"], ["\n &:hover,\n &:focus {\n ", "\n }\n"])), exports.ActiveIconScale);
18
18
  exports.DisabledElement = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n pointer-events: none;\n opacity: 0.5;\n cursor: not-allowed;\n"], ["\n pointer-events: none;\n opacity: 0.5;\n cursor: not-allowed;\n"])));
19
- exports.ReadOnlyElement = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n pointer-events: none;\n cursor: not-allowed;\n"], ["\n pointer-events: none;\n cursor: not-allowed;\n"])));
19
+ exports.ReadOnlyElement = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n cursor: not-allowed;\n"], ["\n cursor: not-allowed;\n"])));
20
20
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
21
21
  //# sourceMappingURL=styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":";;;;;;;AAAA,uDAAwC;AACxC,8CAAiF;AACjF,0CAAsD;AAEzC,QAAA,mBAAmB,GAAG,IAAI,CAAC;AAC3B,QAAA,iBAAiB,GAAG,CAAC,CAAC;AAEtB,QAAA,mBAAmB,OAAG,uBAAG,4PAAA,MAClC,EAAmB,uFAMnB,EAAqB,uFAKxB,KAXG,4BAAmB,EAMnB,8BAAqB,EAKvB;AAEW,QAAA,iBAAiB,OAAG,uBAAG,oHAAA,MAChC,EAAiB,2BACE,EAAmB,WAEzC,KAHG,wBAAiB,EACE,2BAAmB,EAExC;AAEW,QAAA,eAAe,OAAG,uBAAG,oHAAA,MAC9B,EAAiB,2BACE,EAAiB,WAEvC,KAHG,wBAAiB,EACE,yBAAiB,EAEtC;AAEW,QAAA,oBAAoB,OAAG,uBAAG,sHAAA,QACjC,EAAiB,2BACA,EAAiB,WAEvC,KAHK,wBAAiB,EACA,yBAAiB,EAEtC;AAEW,QAAA,gBAAgB,OAAG,uBAAG,gHAAA,iCAG7B,EAAe,SAEpB,KAFK,uBAAe,EAEnB;AAEW,QAAA,eAAe,OAAG,uBAAG,0IAAA,sEAIjC,KAAC;AAEW,QAAA,eAAe,OAAG,uBAAG,yHAAA,qDAGjC,KAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":";;;;;;;AAAA,uDAAwC;AACxC,8CAAiF;AACjF,0CAAsD;AAEzC,QAAA,mBAAmB,GAAG,IAAI,CAAC;AAC3B,QAAA,iBAAiB,GAAG,CAAC,CAAC;AAEtB,QAAA,mBAAmB,OAAG,uBAAG,4PAAA,MAClC,EAAmB,uFAMnB,EAAqB,uFAKxB,KAXG,4BAAmB,EAMnB,8BAAqB,EAKvB;AAEW,QAAA,iBAAiB,OAAG,uBAAG,oHAAA,MAChC,EAAiB,2BACE,EAAmB,WAEzC,KAHG,wBAAiB,EACE,2BAAmB,EAExC;AAEW,QAAA,eAAe,OAAG,uBAAG,oHAAA,MAC9B,EAAiB,2BACE,EAAiB,WAEvC,KAHG,wBAAiB,EACE,yBAAiB,EAEtC;AAEW,QAAA,oBAAoB,OAAG,uBAAG,sHAAA,QACjC,EAAiB,2BACA,EAAiB,WAEvC,KAHK,wBAAiB,EACA,yBAAiB,EAEtC;AAEW,QAAA,gBAAgB,OAAG,uBAAG,gHAAA,iCAG7B,EAAe,SAEpB,KAFK,uBAAe,EAEnB;AAEW,QAAA,eAAe,OAAG,uBAAG,0IAAA,sEAIjC,KAAC;AAEW,QAAA,eAAe,OAAG,uBAAG,gGAAA,4BAEjC,KAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qoretechnologies/reqore",
3
- "version": "0.31.2",
3
+ "version": "0.32.2",
4
4
  "description": "ReQore is a highly theme-able and modular UI library for React",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -10,6 +10,7 @@
10
10
  "test:ci": "./node_modules/.bin/jest --silent --json --outputFile=tests.json",
11
11
  "build": "./node_modules/typescript/bin/tsc --project tsconfig.prod.json",
12
12
  "build:test": "./node_modules/typescript/bin/tsc --noEmit",
13
+ "build:test:prod": "./node_modules/typescript/bin/tsc --project tsconfig.prod.json --noEmit",
13
14
  "storybook": "start-storybook -p 6007 --no-dll",
14
15
  "init-storybook": "yarn test:ci && yarn storybook",
15
16
  "build-storybook": "build-storybook"
@@ -51,12 +52,13 @@
51
52
  "@storybook/manager-webpack5": "^6.5.13",
52
53
  "@storybook/react": "^6.5.13",
53
54
  "@storybook/testing-library": "^0.0.13",
55
+ "@testing-library/jest-dom": "^5.16.5",
54
56
  "@testing-library/react": "^11.2.2",
55
57
  "@types/jest": "^26.0.19",
56
58
  "@types/lodash": "^4.14.166",
57
59
  "@types/node": "^14.14.14",
58
- "@types/react": "^17.0.0",
59
- "@types/react-dom": "^17.0.0",
60
+ "@types/react": "^18.0.28",
61
+ "@types/react-dom": "^18.0.11",
60
62
  "babel-jest": "^26.6.3",
61
63
  "babel-loader": "^8.2.2",
62
64
  "chromatic": "^6.3.3",
@@ -65,12 +67,12 @@
65
67
  "npm-cli-login": "^0.1.1",
66
68
  "playwright": "^1.16.3",
67
69
  "pre-push": "^0.1.4",
68
- "react": "^17.0.2",
69
- "react-dom": "^17.0.2",
70
- "react-test-renderer": "^17.0.2",
70
+ "react": "^18.2.0",
71
+ "react-dom": "^18.2.0",
72
+ "react-intersection-observer": "^9.4.2",
73
+ "react-test-renderer": "^18.2.0",
71
74
  "storybook-addon-outline": "^1.4.2",
72
75
  "storybook-dark-mode": "^1.1.2",
73
- "styled-components": "^5.2.1",
74
76
  "ts-jest": "^26.4.4",
75
77
  "ts-node": "^9.1.1",
76
78
  "typescript": "^4.7.3",
@@ -81,20 +83,22 @@
81
83
  "react-dom": "^18.2.0"
82
84
  },
83
85
  "dependencies": {
84
- "@popperjs/core": "^2.10.2",
85
- "@react-spring/web": "^9.2.4",
86
+ "@popperjs/core": "^2.11.6",
87
+ "@react-spring/web": "^9.6.1",
86
88
  "classnames": "^2.2.6",
87
89
  "epoch-timeago": "^1.1.9",
88
- "lodash": "^4.17.20",
89
- "polished": "^4.1.3",
90
+ "lodash": "^4.17.21",
91
+ "polished": "^4.2.2",
90
92
  "re-resizable": "^6.9.0",
91
- "react-icons": "^4.3.1",
92
- "react-popper": "^2.2.5",
93
+ "react-icons": "^4.7.1",
94
+ "react-popper": "^2.3.0",
93
95
  "react-scrollbar": "^0.5.6",
94
- "react-use": "^15.3.4",
96
+ "react-use": "^17.4.0",
95
97
  "react-window": "^1.8.6",
98
+ "scheduler": "^0.23.0",
96
99
  "shortid": "^2.2.16",
97
- "styled-components": "^5.2.1",
98
- "thenby": "^1.3.4"
100
+ "styled-components": "^5.3.6",
101
+ "thenby": "^1.3.4",
102
+ "use-context-selector": "^1.4.1"
99
103
  }
100
104
  }
@@ -1,4 +1,4 @@
1
- import { forwardRef } from 'react';
1
+ import { forwardRef, useState } from 'react';
2
2
  import styled, { css } from 'styled-components';
3
3
  import { IReqoreBreadcrumbItem } from '.';
4
4
  import { PADDING_FROM_SIZE, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
@@ -124,13 +124,17 @@ const ReqoreBreadcrumbsItem = forwardRef<HTMLDivElement, IReqoreBreadcrumbItemPr
124
124
  ref
125
125
  ) => {
126
126
  const { targetRef } = useCombinedRefs(ref);
127
+ const [itemRef, setItemRef] = useState(undefined);
127
128
  const theme = useReqoreTheme('breadcrumbs', customTheme);
128
129
 
129
- useTooltip(targetRef?.current, tooltip);
130
+ useTooltip(itemRef, tooltip);
130
131
 
131
132
  return (
132
133
  <StyledBreadcrumbItem
133
- ref={targetRef}
134
+ ref={(ref) => {
135
+ targetRef.current = ref;
136
+ setItemRef(ref);
137
+ }}
134
138
  active={active}
135
139
  interactive={interactive || !!props?.onClick}
136
140
  className='reqore-breadcrumbs-item'
@@ -1,5 +1,5 @@
1
1
  import { rgba } from 'polished';
2
- import React, { forwardRef, memo, useCallback, useContext } from 'react';
2
+ import React, { forwardRef, memo, useCallback, useState } from 'react';
3
3
  import styled, { css } from 'styled-components';
4
4
  import {
5
5
  ICON_FROM_SIZE,
@@ -10,10 +10,10 @@ import {
10
10
  TSizes,
11
11
  } from '../../constants/sizes';
12
12
  import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
13
- import ReqoreContext from '../../context/ReqoreContext';
14
13
  import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
15
14
  import { alignToFlexAlign, getOneLessSize } from '../../helpers/utils';
16
15
  import { useCombinedRefs } from '../../hooks/useCombinedRefs';
16
+ import { useReqoreProperty } from '../../hooks/useReqoreContext';
17
17
  import { useReqoreEffect } from '../../hooks/useReqoreEffect';
18
18
  import { useReqoreTheme } from '../../hooks/useTheme';
19
19
  import { useTooltip } from '../../hooks/useTooltip';
@@ -398,12 +398,13 @@ const ReqoreButton = memo(
398
398
  ref
399
399
  ) => {
400
400
  const { targetRef } = useCombinedRefs(ref);
401
- const { animations } = useContext(ReqoreContext);
401
+ const [buttonRef, setButtonRef] = useState<HTMLButtonElement>(undefined);
402
+ const animations = useReqoreProperty('animations');
402
403
  const theme = useReqoreTheme('main', customTheme, intent);
403
404
  const fixedEffect = useReqoreEffect('buttons', theme, effect);
404
405
 
405
406
  /* A custom hook that is used to add a tooltip to the button. */
406
- useTooltip(targetRef.current, tooltip);
407
+ useTooltip(buttonRef, tooltip);
407
408
 
408
409
  // If color or intent was specified, set the color
409
410
  const customColor = intent ? theme.main : changeLightness(theme.main, 0.07);
@@ -425,9 +426,13 @@ const ReqoreButton = memo(
425
426
  ...fixedEffect,
426
427
  }
427
428
  }
429
+ tabindex={rest.disabled ? -1 : 0}
428
430
  as='button'
429
431
  theme={theme}
430
- ref={targetRef}
432
+ ref={(ref) => {
433
+ targetRef.current = ref;
434
+ setButtonRef(ref);
435
+ }}
431
436
  fluid={fluid}
432
437
  fixed={fixed}
433
438
  maxWidth={maxWidth}
@@ -449,7 +454,14 @@ const ReqoreButton = memo(
449
454
  icon={icon}
450
455
  size={size}
451
456
  color={leftIconColor || iconColor}
452
- style={textAlign !== 'left' ? { marginRight: 'auto' } : undefined}
457
+ style={
458
+ textAlign !== 'left'
459
+ ? {
460
+ marginRight: 'auto',
461
+ marginLeft: textAlign === 'center' ? 'auto' : undefined,
462
+ }
463
+ : undefined
464
+ }
453
465
  />
454
466
  {children || badge || rightIcon ? (
455
467
  <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
@@ -496,7 +508,14 @@ const ReqoreButton = memo(
496
508
  <ReqoreIcon
497
509
  icon={rightIcon}
498
510
  size={size}
499
- style={textAlign !== 'right' ? { marginLeft: 'auto' } : undefined}
511
+ style={
512
+ textAlign !== 'right'
513
+ ? {
514
+ marginLeft: 'auto',
515
+ marginRight: textAlign === 'center' ? 'auto' : undefined,
516
+ }
517
+ : undefined
518
+ }
500
519
  color={rightIconColor || iconColor}
501
520
  />
502
521
  </>
@@ -1,5 +1,5 @@
1
1
  import { rgba } from 'polished';
2
- import React, { forwardRef, useMemo } from 'react';
2
+ import React, { forwardRef, useMemo, useState } from 'react';
3
3
  import { useMeasure } from 'react-use';
4
4
  import styled, { css } from 'styled-components';
5
5
  import { PADDING_FROM_SIZE, SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
@@ -8,7 +8,7 @@ import {
8
8
  changeLightness,
9
9
  getNthGradientColor,
10
10
  getReadableColor,
11
- getReadableColorFrom
11
+ getReadableColorFrom,
12
12
  } from '../../helpers/colors';
13
13
  import { getOneLessSize } from '../../helpers/utils';
14
14
  import { useCombinedRefs } from '../../hooks/useCombinedRefs';
@@ -21,7 +21,7 @@ import {
21
21
  IReqoreReadOnly,
22
22
  IWithReqoreCustomTheme,
23
23
  IWithReqoreEffect,
24
- TReqoreTooltipProp
24
+ TReqoreTooltipProp,
25
25
  } from '../../types/global';
26
26
  import { IReqoreIconName } from '../../types/icons';
27
27
  import { IReqoreEffect, ReqoreTextEffect, StyledEffect, StyledTextEffect } from '../Effect';
@@ -196,11 +196,12 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
196
196
  ref
197
197
  ) => {
198
198
  const { targetRef } = useCombinedRefs(ref);
199
+ const [itemRef, setItemRef] = useState<HTMLDivElement>(undefined);
199
200
  const [offRef, { width: offWidth }] = useMeasure();
200
201
  const [onRef, { width: onWidth }] = useMeasure();
201
202
  const theme = useReqoreTheme('main', customTheme, intent);
202
203
 
203
- useTooltip(targetRef.current, tooltip);
204
+ useTooltip(itemRef, tooltip);
204
205
 
205
206
  const width = useMemo(() => {
206
207
  if ((!image && !onText) || !offText) return undefined;
@@ -217,7 +218,10 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
217
218
  return (
218
219
  <StyledCheckbox
219
220
  {...rest}
220
- ref={targetRef}
221
+ ref={(ref) => {
222
+ targetRef.current = ref;
223
+ setItemRef(ref);
224
+ }}
221
225
  theme={theme}
222
226
  size={size}
223
227
  disabled={disabled}
@@ -1,6 +1,6 @@
1
1
  import { size } from 'lodash';
2
2
  import { useMemo, useState } from 'react';
3
- import { useUpdateEffect } from 'react-use';
3
+ import { useDebounce, useUpdateEffect } from 'react-use';
4
4
  import styled, { css } from 'styled-components';
5
5
  import { PADDING_FROM_SIZE } from '../../constants/sizes';
6
6
  import { IReqoreIconName } from '../../types/icons';
@@ -28,6 +28,8 @@ export interface IReqoreCollectionProps
28
28
  | 'minimal'
29
29
  | 'transparent'
30
30
  | 'fluid'
31
+ | 'responsiveActions'
32
+ | 'padded'
31
33
  >,
32
34
  IReqoreColumnsProps {
33
35
  items?: IReqoreCollectionItemProps[];
@@ -44,10 +46,13 @@ export interface IReqoreCollectionProps
44
46
  showAs?: 'list' | 'grid';
45
47
  showSelectedFirst?: boolean;
46
48
  selectedIcon?: IReqoreIconName;
49
+ searchDelay?: number;
47
50
 
48
51
  childrenBefore?: React.ReactNode;
49
52
  childrenAfter?: React.ReactNode;
50
53
 
54
+ onQueryChange?: (query: string) => void;
55
+
51
56
  emptyMessage?: string;
52
57
  sortButtonTooltip?: (sort?: 'asc' | 'desc') => string;
53
58
  displayButtonTooltip?: (display?: 'list' | 'grid') => string;
@@ -86,22 +91,37 @@ export const ReqoreCollection = ({
86
91
  flat = true,
87
92
  minimal,
88
93
  transparent = true,
94
+ onQueryChange,
89
95
  childrenBefore,
90
96
  childrenAfter,
97
+ searchDelay = 300,
91
98
  emptyMessage = 'No data in this collection, try changing your search query or filters',
92
99
  sortButtonTooltip = (sort) => (sort === 'desc' ? 'Sort ascending' : 'Sort descending'),
93
100
  displayButtonTooltip = (display) => (display === 'grid' ? 'Show as list' : 'Show as grid'),
94
- inputPlaceholder = (items) => `Filter ${size(items)} items`,
101
+ inputPlaceholder = (items) => `Search in ${size(items)} items`,
95
102
  ...rest
96
103
  }: IReqoreCollectionProps) => {
97
104
  const [_showAs, setShowAs] = useState<'list' | 'grid'>(showAs);
98
105
  const [sort, setSort] = useState<'asc' | 'desc'>('asc');
99
106
  const [query, setQuery] = useState<string>('');
107
+ const [preQuery, setPreQuery] = useState<string>('');
100
108
 
101
109
  useUpdateEffect(() => {
102
110
  setShowAs(showAs);
103
111
  }, [showAs]);
104
112
 
113
+ useUpdateEffect(() => {
114
+ onQueryChange?.(query);
115
+ }, [query]);
116
+
117
+ useDebounce(
118
+ () => {
119
+ setQuery(preQuery);
120
+ },
121
+ searchDelay,
122
+ [preQuery]
123
+ );
124
+
105
125
  const sortedItems: IReqoreCollectionItemProps[] = useMemo(() => {
106
126
  if (!sortable) {
107
127
  return items;
@@ -132,7 +152,7 @@ export const ReqoreCollection = ({
132
152
  });
133
153
  }, [items, sort]);
134
154
 
135
- const filteredItems: IReqoreCollectionItemProps[] = useMemo(() => {
155
+ const finalItems: IReqoreCollectionItemProps[] = useMemo(() => {
136
156
  if (!filterable || query === '') {
137
157
  return sortedItems;
138
158
  }
@@ -150,11 +170,10 @@ export const ReqoreCollection = ({
150
170
  });
151
171
  }, [items, query, sortedItems]);
152
172
 
153
- const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
154
- setQuery(event.target.value);
173
+ const handlePreQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
174
+ setPreQuery(event.target.value);
155
175
  };
156
176
 
157
- const finalItems = filteredItems;
158
177
  const finalActions: TReqorePanelActions = useMemo(() => {
159
178
  let actions: TReqorePanelActions = rest.actions ? [...rest.actions] : [];
160
179
 
@@ -162,10 +181,11 @@ export const ReqoreCollection = ({
162
181
  responsive: false,
163
182
  group: [
164
183
  {
165
- icon: _showAs === 'grid' ? 'ListOrdered' : 'GridLine',
184
+ icon: _showAs === 'grid' ? 'ListUnordered' : 'GridLine',
166
185
  onClick: () => setShowAs(_showAs === 'grid' ? 'list' : 'grid'),
167
186
  tooltip: displayButtonTooltip(_showAs),
168
187
  disabled: !size(finalItems),
188
+ textAlign: 'center',
169
189
  ...displayButtonProps,
170
190
  },
171
191
  ],
@@ -177,6 +197,7 @@ export const ReqoreCollection = ({
177
197
  onClick: () => setSort(sort === 'desc' ? 'asc' : 'desc'),
178
198
  tooltip: sortButtonTooltip(sort),
179
199
  disabled: !size(finalItems),
200
+ textAlign: 'center',
180
201
  ...sortButtonProps,
181
202
  });
182
203
  }
@@ -187,10 +208,12 @@ export const ReqoreCollection = ({
187
208
  {
188
209
  as: ReqoreInput,
189
210
  props: {
211
+ key: 'search',
212
+ fixed: false,
190
213
  placeholder: inputPlaceholder(finalItems),
191
214
  onClearClick: () => setQuery(''),
192
- onChange: handleQueryChange,
193
- value: query,
215
+ onChange: handlePreQueryChange,
216
+ value: preQuery,
194
217
  icon: 'Search2Line',
195
218
  minimal: false,
196
219
  ...inputProps,
@@ -200,7 +223,7 @@ export const ReqoreCollection = ({
200
223
  }
201
224
 
202
225
  return [...actions, toolbarGroup];
203
- }, [filterable, handleQueryChange, query, rest.actions, _showAs, sort, sortable, finalItems]);
226
+ }, [filterable, preQuery, query, rest.actions, _showAs, sort, sortable, finalItems]);
204
227
 
205
228
  return (
206
229
  <ReqorePanel
@@ -210,7 +233,6 @@ export const ReqoreCollection = ({
210
233
  ...rest.style,
211
234
  }}
212
235
  fill={fill}
213
- padded
214
236
  transparent={transparent}
215
237
  minimal={minimal}
216
238
  flat={flat}
@@ -1,10 +1,10 @@
1
1
  import { map, size } from 'lodash';
2
2
  import { rgba } from 'polished';
3
- import { useContext, useEffect, useRef, useState } from 'react';
3
+ import { useEffect, useRef, useState } from 'react';
4
4
  import { useDebounce, useMeasure } from 'react-use';
5
5
  import styled, { css } from 'styled-components';
6
- import ReqoreContext from '../../context/ReqoreContext';
7
6
  import { changeDarkness, getMainBackgroundColor } from '../../helpers/colors';
7
+ import { useReqoreProperty } from '../../hooks/useReqoreContext';
8
8
  import { useReqoreTheme } from '../../hooks/useTheme';
9
9
  import { StyledBackdrop } from '../Drawer';
10
10
  import {
@@ -84,7 +84,7 @@ export const ReqoreCollectionItem = ({
84
84
  ...rest
85
85
  }: IReqoreCollectionItemProps) => {
86
86
  const [isSelected, setIsSelected] = useState(false);
87
- const { getAndIncreaseZIndex } = useContext(ReqoreContext);
87
+ const getAndIncreaseZIndex = useReqoreProperty('getAndIncreaseZIndex');
88
88
  const ref = useRef<HTMLDivElement>(null);
89
89
  const [contentRef, sizes] = useMeasure();
90
90
  const originalDimensions = useRef(null);