@qoretechnologies/reqore 0.68.1 → 0.68.3

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 (287) hide show
  1. package/dist/components/Bubble/index.d.ts +57 -0
  2. package/dist/components/Bubble/index.d.ts.map +1 -0
  3. package/dist/components/Bubble/index.js +184 -0
  4. package/dist/components/Bubble/index.js.map +1 -0
  5. package/dist/components/DatePicker/index.d.ts.map +1 -1
  6. package/dist/components/DatePicker/index.js +3 -3
  7. package/dist/components/DatePicker/index.js.map +1 -1
  8. package/dist/components/DescriptionList/index.d.ts.map +1 -1
  9. package/dist/components/DescriptionList/index.js +3 -3
  10. package/dist/components/DescriptionList/index.js.map +1 -1
  11. package/dist/components/Drawer/index.js.map +1 -1
  12. package/dist/components/IconPicker/index.d.ts +114 -0
  13. package/dist/components/IconPicker/index.d.ts.map +1 -0
  14. package/dist/components/IconPicker/index.js +223 -0
  15. package/dist/components/IconPicker/index.js.map +1 -0
  16. package/dist/components/Panel/index.d.ts.map +1 -1
  17. package/dist/components/Panel/index.js +10 -2
  18. package/dist/components/Panel/index.js.map +1 -1
  19. package/dist/components/RichTextEditor/index.d.ts +9 -0
  20. package/dist/components/RichTextEditor/index.d.ts.map +1 -1
  21. package/dist/components/RichTextEditor/index.js +2 -2
  22. package/dist/components/RichTextEditor/index.js.map +1 -1
  23. package/dist/index.d.ts +2 -0
  24. package/dist/index.d.ts.map +1 -1
  25. package/dist/index.js +8 -3
  26. package/dist/index.js.map +1 -1
  27. package/package.json +2 -6
  28. package/tests.json +1 -1
  29. package/dist/esm/components/Accordion/index.js +0 -142
  30. package/dist/esm/components/Accordion/index.js.map +0 -1
  31. package/dist/esm/components/Breadcrumbs/index.js +0 -122
  32. package/dist/esm/components/Breadcrumbs/index.js.map +0 -1
  33. package/dist/esm/components/Breadcrumbs/item.js +0 -14
  34. package/dist/esm/components/Breadcrumbs/item.js.map +0 -1
  35. package/dist/esm/components/Button/index.js +0 -315
  36. package/dist/esm/components/Button/index.js.map +0 -1
  37. package/dist/esm/components/Callout/index.js +0 -142
  38. package/dist/esm/components/Callout/index.js.map +0 -1
  39. package/dist/esm/components/Checkbox/index.js +0 -217
  40. package/dist/esm/components/Checkbox/index.js.map +0 -1
  41. package/dist/esm/components/Collection/index.js +0 -298
  42. package/dist/esm/components/Collection/index.js.map +0 -1
  43. package/dist/esm/components/Collection/item.js +0 -157
  44. package/dist/esm/components/Collection/item.js.map +0 -1
  45. package/dist/esm/components/Columns/column.js +0 -14
  46. package/dist/esm/components/Columns/column.js.map +0 -1
  47. package/dist/esm/components/Columns/index.js +0 -17
  48. package/dist/esm/components/Columns/index.js.map +0 -1
  49. package/dist/esm/components/Comment/index.js +0 -63
  50. package/dist/esm/components/Comment/index.js.map +0 -1
  51. package/dist/esm/components/CommentFeed/index.js +0 -17
  52. package/dist/esm/components/CommentFeed/index.js.map +0 -1
  53. package/dist/esm/components/Content/index.js +0 -16
  54. package/dist/esm/components/Content/index.js.map +0 -1
  55. package/dist/esm/components/Content/wrapper.js +0 -14
  56. package/dist/esm/components/Content/wrapper.js.map +0 -1
  57. package/dist/esm/components/ControlGroup/index.js +0 -351
  58. package/dist/esm/components/ControlGroup/index.js.map +0 -1
  59. package/dist/esm/components/DatePicker/MonthYearDropdowns.js +0 -30
  60. package/dist/esm/components/DatePicker/MonthYearDropdowns.js.map +0 -1
  61. package/dist/esm/components/DatePicker/index.js +0 -244
  62. package/dist/esm/components/DatePicker/index.js.map +0 -1
  63. package/dist/esm/components/DescriptionList/index.js +0 -132
  64. package/dist/esm/components/DescriptionList/index.js.map +0 -1
  65. package/dist/esm/components/Drawer/backdrop.js +0 -34
  66. package/dist/esm/components/Drawer/backdrop.js.map +0 -1
  67. package/dist/esm/components/Drawer/index.js +0 -286
  68. package/dist/esm/components/Drawer/index.js.map +0 -1
  69. package/dist/esm/components/Dropdown/index.js +0 -49
  70. package/dist/esm/components/Dropdown/index.js.map +0 -1
  71. package/dist/esm/components/Dropdown/item.js +0 -12
  72. package/dist/esm/components/Dropdown/item.js.map +0 -1
  73. package/dist/esm/components/Dropdown/list.js +0 -320
  74. package/dist/esm/components/Dropdown/list.js.map +0 -1
  75. package/dist/esm/components/Effect/index.js +0 -349
  76. package/dist/esm/components/Effect/index.js.map +0 -1
  77. package/dist/esm/components/EmptyState/index.js +0 -31
  78. package/dist/esm/components/EmptyState/index.js.map +0 -1
  79. package/dist/esm/components/EntityRow/index.js +0 -134
  80. package/dist/esm/components/EntityRow/index.js.map +0 -1
  81. package/dist/esm/components/ErrorBoundary/index.js +0 -57
  82. package/dist/esm/components/ErrorBoundary/index.js.map +0 -1
  83. package/dist/esm/components/ExportModal/index.js +0 -60
  84. package/dist/esm/components/ExportModal/index.js.map +0 -1
  85. package/dist/esm/components/FeatureCard/index.js +0 -139
  86. package/dist/esm/components/FeatureCard/index.js.map +0 -1
  87. package/dist/esm/components/GlobalModalsWrapper/index.js +0 -27
  88. package/dist/esm/components/GlobalModalsWrapper/index.js.map +0 -1
  89. package/dist/esm/components/Header/index.js +0 -55
  90. package/dist/esm/components/Header/index.js.map +0 -1
  91. package/dist/esm/components/Icon/index.js +0 -130
  92. package/dist/esm/components/Icon/index.js.map +0 -1
  93. package/dist/esm/components/Input/index.js +0 -136
  94. package/dist/esm/components/Input/index.js.map +0 -1
  95. package/dist/esm/components/InputClearButton/index.js +0 -32
  96. package/dist/esm/components/InputClearButton/index.js.map +0 -1
  97. package/dist/esm/components/InternalPopover/index.js +0 -244
  98. package/dist/esm/components/InternalPopover/index.js.map +0 -1
  99. package/dist/esm/components/KeyValueTable/index.js +0 -81
  100. package/dist/esm/components/KeyValueTable/index.js.map +0 -1
  101. package/dist/esm/components/Label/index.js +0 -7
  102. package/dist/esm/components/Label/index.js.map +0 -1
  103. package/dist/esm/components/Layout/content.js +0 -12
  104. package/dist/esm/components/Layout/content.js.map +0 -1
  105. package/dist/esm/components/Layout/index.js +0 -28
  106. package/dist/esm/components/Layout/index.js.map +0 -1
  107. package/dist/esm/components/Menu/divider.js +0 -41
  108. package/dist/esm/components/Menu/divider.js.map +0 -1
  109. package/dist/esm/components/Menu/index.js +0 -67
  110. package/dist/esm/components/Menu/index.js.map +0 -1
  111. package/dist/esm/components/Menu/item.js +0 -33
  112. package/dist/esm/components/Menu/item.js.map +0 -1
  113. package/dist/esm/components/Menu/section.js +0 -28
  114. package/dist/esm/components/Menu/section.js.map +0 -1
  115. package/dist/esm/components/Message/index.js +0 -52
  116. package/dist/esm/components/Message/index.js.map +0 -1
  117. package/dist/esm/components/Modal/index.js +0 -40
  118. package/dist/esm/components/Modal/index.js.map +0 -1
  119. package/dist/esm/components/MultiSelect/index.js +0 -146
  120. package/dist/esm/components/MultiSelect/index.js.map +0 -1
  121. package/dist/esm/components/Navbar/divider.js +0 -24
  122. package/dist/esm/components/Navbar/divider.js.map +0 -1
  123. package/dist/esm/components/Navbar/group.js +0 -27
  124. package/dist/esm/components/Navbar/group.js.map +0 -1
  125. package/dist/esm/components/Navbar/index.js +0 -39
  126. package/dist/esm/components/Navbar/index.js.map +0 -1
  127. package/dist/esm/components/Navbar/item.js +0 -51
  128. package/dist/esm/components/Navbar/item.js.map +0 -1
  129. package/dist/esm/components/Notifications/index.js +0 -28
  130. package/dist/esm/components/Notifications/index.js.map +0 -1
  131. package/dist/esm/components/Notifications/notification.js +0 -225
  132. package/dist/esm/components/Notifications/notification.js.map +0 -1
  133. package/dist/esm/components/Paging/index.js +0 -116
  134. package/dist/esm/components/Paging/index.js.map +0 -1
  135. package/dist/esm/components/Panel/LabelEditor.js +0 -33
  136. package/dist/esm/components/Panel/LabelEditor.js.map +0 -1
  137. package/dist/esm/components/Panel/NonResponsiveActions.js +0 -18
  138. package/dist/esm/components/Panel/NonResponsiveActions.js.map +0 -1
  139. package/dist/esm/components/Panel/index.js +0 -564
  140. package/dist/esm/components/Panel/index.js.map +0 -1
  141. package/dist/esm/components/Panel/panel.screenshot.js +0 -15
  142. package/dist/esm/components/Panel/panel.screenshot.js.map +0 -1
  143. package/dist/esm/components/Paragraph/index.js +0 -19
  144. package/dist/esm/components/Paragraph/index.js.map +0 -1
  145. package/dist/esm/components/Popover/index.js +0 -267
  146. package/dist/esm/components/Popover/index.js.map +0 -1
  147. package/dist/esm/components/Progress/index.js +0 -188
  148. package/dist/esm/components/Progress/index.js.map +0 -1
  149. package/dist/esm/components/RadioGroup/index.js +0 -9
  150. package/dist/esm/components/RadioGroup/index.js.map +0 -1
  151. package/dist/esm/components/Rating/index.js +0 -165
  152. package/dist/esm/components/Rating/index.js.map +0 -1
  153. package/dist/esm/components/RichTextEditor/index.js +0 -299
  154. package/dist/esm/components/RichTextEditor/index.js.map +0 -1
  155. package/dist/esm/components/SegmentedControl/index.js +0 -291
  156. package/dist/esm/components/SegmentedControl/index.js.map +0 -1
  157. package/dist/esm/components/SeverityRow/index.js +0 -106
  158. package/dist/esm/components/SeverityRow/index.js.map +0 -1
  159. package/dist/esm/components/Skeleton/index.js +0 -28
  160. package/dist/esm/components/Skeleton/index.js.map +0 -1
  161. package/dist/esm/components/Slider/index.js +0 -176
  162. package/dist/esm/components/Slider/index.js.map +0 -1
  163. package/dist/esm/components/Spacer/index.js +0 -96
  164. package/dist/esm/components/Spacer/index.js.map +0 -1
  165. package/dist/esm/components/Span/index.js +0 -18
  166. package/dist/esm/components/Span/index.js.map +0 -1
  167. package/dist/esm/components/Spinner/index.js +0 -14
  168. package/dist/esm/components/Spinner/index.js.map +0 -1
  169. package/dist/esm/components/Statistic/index.js +0 -166
  170. package/dist/esm/components/Statistic/index.js.map +0 -1
  171. package/dist/esm/components/Table/body.js +0 -72
  172. package/dist/esm/components/Table/body.js.map +0 -1
  173. package/dist/esm/components/Table/cell.js +0 -214
  174. package/dist/esm/components/Table/cell.js.map +0 -1
  175. package/dist/esm/components/Table/header.js +0 -158
  176. package/dist/esm/components/Table/header.js.map +0 -1
  177. package/dist/esm/components/Table/headerCell.js +0 -233
  178. package/dist/esm/components/Table/headerCell.js.map +0 -1
  179. package/dist/esm/components/Table/helpers.js +0 -285
  180. package/dist/esm/components/Table/helpers.js.map +0 -1
  181. package/dist/esm/components/Table/index.js +0 -472
  182. package/dist/esm/components/Table/index.js.map +0 -1
  183. package/dist/esm/components/Table/row.js +0 -176
  184. package/dist/esm/components/Table/row.js.map +0 -1
  185. package/dist/esm/components/Table/value.js +0 -19
  186. package/dist/esm/components/Table/value.js.map +0 -1
  187. package/dist/esm/components/Tabs/content.js +0 -23
  188. package/dist/esm/components/Tabs/content.js.map +0 -1
  189. package/dist/esm/components/Tabs/index.js +0 -44
  190. package/dist/esm/components/Tabs/index.js.map +0 -1
  191. package/dist/esm/components/Tabs/item.js +0 -122
  192. package/dist/esm/components/Tabs/item.js.map +0 -1
  193. package/dist/esm/components/Tabs/list.js +0 -208
  194. package/dist/esm/components/Tabs/list.js.map +0 -1
  195. package/dist/esm/components/Tag/group.js +0 -38
  196. package/dist/esm/components/Tag/group.js.map +0 -1
  197. package/dist/esm/components/Tag/index.js +0 -267
  198. package/dist/esm/components/Tag/index.js.map +0 -1
  199. package/dist/esm/components/Testimonial/index.js +0 -108
  200. package/dist/esm/components/Testimonial/index.js.map +0 -1
  201. package/dist/esm/components/Textarea/index.js +0 -135
  202. package/dist/esm/components/Textarea/index.js.map +0 -1
  203. package/dist/esm/components/Tier/index.js +0 -48
  204. package/dist/esm/components/Tier/index.js.map +0 -1
  205. package/dist/esm/components/TimeAgo/index.js +0 -19
  206. package/dist/esm/components/TimeAgo/index.js.map +0 -1
  207. package/dist/esm/components/Timeline/index.js +0 -271
  208. package/dist/esm/components/Timeline/index.js.map +0 -1
  209. package/dist/esm/components/TooltipComponent/index.js +0 -11
  210. package/dist/esm/components/TooltipComponent/index.js.map +0 -1
  211. package/dist/esm/components/Tree/index.js +0 -266
  212. package/dist/esm/components/Tree/index.js.map +0 -1
  213. package/dist/esm/components/Tree/modal.js +0 -30
  214. package/dist/esm/components/Tree/modal.js.map +0 -1
  215. package/dist/esm/constants/animations.js +0 -9
  216. package/dist/esm/constants/animations.js.map +0 -1
  217. package/dist/esm/constants/colors.js +0 -13
  218. package/dist/esm/constants/colors.js.map +0 -1
  219. package/dist/esm/constants/paging.js +0 -48
  220. package/dist/esm/constants/paging.js.map +0 -1
  221. package/dist/esm/constants/sizes.js +0 -363
  222. package/dist/esm/constants/sizes.js.map +0 -1
  223. package/dist/esm/constants/theme.js +0 -40
  224. package/dist/esm/constants/theme.js.map +0 -1
  225. package/dist/esm/containers/Paging.js +0 -29
  226. package/dist/esm/containers/Paging.js.map +0 -1
  227. package/dist/esm/containers/ReqoreProvider.js +0 -239
  228. package/dist/esm/containers/ReqoreProvider.js.map +0 -1
  229. package/dist/esm/containers/ThemeProvider.js +0 -11
  230. package/dist/esm/containers/ThemeProvider.js.map +0 -1
  231. package/dist/esm/containers/UIProvider.js +0 -53
  232. package/dist/esm/containers/UIProvider.js.map +0 -1
  233. package/dist/esm/context/CustomThemeContext.js +0 -4
  234. package/dist/esm/context/CustomThemeContext.js.map +0 -1
  235. package/dist/esm/context/ReqoreContext.js +0 -22
  236. package/dist/esm/context/ReqoreContext.js.map +0 -1
  237. package/dist/esm/context/ThemeContext.js +0 -4
  238. package/dist/esm/context/ThemeContext.js.map +0 -1
  239. package/dist/esm/helpers/animations.js +0 -13
  240. package/dist/esm/helpers/animations.js.map +0 -1
  241. package/dist/esm/helpers/colors.js +0 -240
  242. package/dist/esm/helpers/colors.js.map +0 -1
  243. package/dist/esm/helpers/dates.js +0 -52
  244. package/dist/esm/helpers/dates.js.map +0 -1
  245. package/dist/esm/helpers/time.js +0 -21
  246. package/dist/esm/helpers/time.js.map +0 -1
  247. package/dist/esm/helpers/utils.js +0 -174
  248. package/dist/esm/helpers/utils.js.map +0 -1
  249. package/dist/esm/hooks/useAutoFocus.js +0 -76
  250. package/dist/esm/hooks/useAutoFocus.js.map +0 -1
  251. package/dist/esm/hooks/useCloneThroughFragments.js +0 -26
  252. package/dist/esm/hooks/useCloneThroughFragments.js.map +0 -1
  253. package/dist/esm/hooks/useCombinedRefs.js +0 -25
  254. package/dist/esm/hooks/useCombinedRefs.js.map +0 -1
  255. package/dist/esm/hooks/useComponentTooltip.js +0 -28
  256. package/dist/esm/hooks/useComponentTooltip.js.map +0 -1
  257. package/dist/esm/hooks/useFocusTrap.js +0 -115
  258. package/dist/esm/hooks/useFocusTrap.js.map +0 -1
  259. package/dist/esm/hooks/useLatestZIndex.js +0 -10
  260. package/dist/esm/hooks/useLatestZIndex.js.map +0 -1
  261. package/dist/esm/hooks/useOutsideClick.js +0 -17
  262. package/dist/esm/hooks/useOutsideClick.js.map +0 -1
  263. package/dist/esm/hooks/usePaging.js +0 -92
  264. package/dist/esm/hooks/usePaging.js.map +0 -1
  265. package/dist/esm/hooks/useQueryWithDelay.js +0 -19
  266. package/dist/esm/hooks/useQueryWithDelay.js.map +0 -1
  267. package/dist/esm/hooks/useReqore.js +0 -10
  268. package/dist/esm/hooks/useReqore.js.map +0 -1
  269. package/dist/esm/hooks/useReqoreContext.js +0 -12
  270. package/dist/esm/hooks/useReqoreContext.js.map +0 -1
  271. package/dist/esm/hooks/useReqoreEffect.js +0 -21
  272. package/dist/esm/hooks/useReqoreEffect.js.map +0 -1
  273. package/dist/esm/hooks/useTextareaAutoSize.js +0 -16
  274. package/dist/esm/hooks/useTextareaAutoSize.js.map +0 -1
  275. package/dist/esm/hooks/useTheme.js +0 -39
  276. package/dist/esm/hooks/useTheme.js.map +0 -1
  277. package/dist/esm/hooks/useWhyDidYouUpdate.js +0 -32
  278. package/dist/esm/hooks/useWhyDidYouUpdate.js.map +0 -1
  279. package/dist/esm/index.js +0 -92
  280. package/dist/esm/index.js.map +0 -1
  281. package/dist/esm/styles.js +0 -122
  282. package/dist/esm/styles.js.map +0 -1
  283. package/dist/esm/types/global.js +0 -2
  284. package/dist/esm/types/global.js.map +0 -1
  285. package/dist/esm/types/icons.js +0 -2
  286. package/dist/esm/types/icons.js.map +0 -1
  287. package/tsconfig.esm.json +0 -11
@@ -1,142 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { rgba } from 'polished';
3
- import { forwardRef, memo, useCallback, useMemo, useState } from 'react';
4
- import styled, { css } from 'styled-components';
5
- import { GAP_FROM_SIZE, PADDING_FROM_SIZE, RADIUS_FROM_SIZE, TEXT_FROM_SIZE, } from '../../constants/sizes';
6
- import { changeDarkness, changeLightness, getMainBackgroundColor, getReadableColor, } from '../../helpers/colors';
7
- import { getOneLessSize } from '../../helpers/utils';
8
- import { useReqoreTheme } from '../../hooks/useTheme';
9
- import { ACTIVE_ICON_SCALE, DisabledElement, INACTIVE_ICON_SCALE } from '../../styles';
10
- import { ButtonBadge } from '../Button';
11
- import { patchPrimaryGradient, StyledEffect } from '../Effect';
12
- import { ReqoreHeading } from '../Header';
13
- import ReqoreIcon, { StyledIconWrapper } from '../Icon';
14
- import { ReqoreSpan } from '../Span';
15
- import { ReqoreTooltipComponent } from '../TooltipComponent';
16
- const StyledAccordionWrapper = styled(StyledEffect) `
17
- display: flex;
18
- flex-direction: column;
19
- width: ${({ $fluid }) => ($fluid ? '100%' : undefined)};
20
- border-radius: ${({ rounded, size }) => (rounded ? RADIUS_FROM_SIZE[size] : 0)}px;
21
- overflow: hidden;
22
- border: ${({ flat, theme }) => flat ? undefined : `1px solid ${changeLightness(getMainBackgroundColor(theme), 0.08)}`};
23
-
24
- ${({ disabled }) => disabled &&
25
- css `
26
- ${DisabledElement};
27
- `}
28
- `;
29
- const StyledAccordionItem = styled.div `
30
- &:not(:first-child) {
31
- border-top: ${({ flat, theme }) => flat ? undefined : `1px solid ${changeLightness(getMainBackgroundColor(theme), 0.08)}`};
32
- }
33
- `;
34
- const StyledAccordionHeader = styled.div `
35
- display: flex;
36
- align-items: center;
37
- gap: ${() => GAP_FROM_SIZE.normal}px;
38
- padding: ${({ size }) => `${PADDING_FROM_SIZE[size] * 1.5}px ${PADDING_FROM_SIZE[size] * 1.5}px`};
39
- cursor: pointer;
40
- user-select: none;
41
- transition: background-color 0.15s ease-out;
42
- background-color: ${({ theme, opacity = 1, minimal, intent }) => {
43
- if (minimal) {
44
- return intent ? rgba(theme.intents[intent], 0.1) : 'transparent';
45
- }
46
- return rgba(changeLightness(getMainBackgroundColor(theme), 0.03), opacity);
47
- }};
48
- color: ${({ theme }) => getReadableColor(theme, undefined, undefined, true)};
49
- font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
50
-
51
- ${StyledIconWrapper} {
52
- transform: scale(${INACTIVE_ICON_SCALE});
53
- transition: transform 0.15s ease-out;
54
- }
55
-
56
- &:hover {
57
- background-color: ${({ theme, opacity = 1, disabled, minimal, intent }) => {
58
- if (disabled)
59
- return undefined;
60
- if (minimal) {
61
- return intent ? rgba(theme.intents[intent], 0.18) : 'transparent';
62
- }
63
- return rgba(changeLightness(getMainBackgroundColor(theme), 0.05), opacity);
64
- }};
65
-
66
- ${StyledIconWrapper} {
67
- transform: scale(${ACTIVE_ICON_SCALE});
68
- }
69
- }
70
-
71
- ${({ disabled }) => disabled &&
72
- css `
73
- ${DisabledElement};
74
- `}
75
- `;
76
- const StyledAccordionChevron = styled(StyledIconWrapper) `
77
- transition: transform 0.2s ease-out !important;
78
- transform: rotate(${({ $isOpen }) => ($isOpen ? '180deg' : '0deg')}) !important;
79
- flex-shrink: 0;
80
- `;
81
- const StyledAccordionContentWrapper = styled.div `
82
- display: grid;
83
- grid-template-rows: ${({ $isOpen }) => ($isOpen ? '1fr' : '0fr')};
84
- transition: grid-template-rows 0.2s ease-in-out;
85
- `;
86
- const StyledAccordionContentInner = styled.div `
87
- overflow: hidden;
88
- `;
89
- const StyledAccordionContentBody = styled.div `
90
- padding: ${({ size }) => `${PADDING_FROM_SIZE[size] * 3}px ${PADDING_FROM_SIZE[size] * 4.6}px`};
91
- font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
92
- color: ${({ theme }) => getReadableColor(theme, undefined, undefined, true)};
93
- background-color: ${({ theme }) => rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), 1)};
94
- border-top: 1px solid ${({ theme }) => changeLightness(getMainBackgroundColor(theme), 0.05)};
95
- `;
96
- const AccordionItemRenderer = memo(({ item, index, isOpen, theme, customTheme, size, intent, flat, rounded, minimal, disabled, effectiveOpacity, isFirst, isLast, onToggle, onKeyDown, }) => {
97
- const itemIntent = item.intent || intent;
98
- const itemTheme = useReqoreTheme('main', customTheme, itemIntent);
99
- const isItemDisabled = item.disabled || disabled;
100
- return (_jsxs(StyledAccordionItem, { theme: theme, size: size, disabled: isItemDisabled, intent: itemIntent, flat: flat, isFirst: isFirst, isLast: isLast, rounded: rounded, opacity: effectiveOpacity, className: 'reqore-accordion-item', children: [_jsxs(StyledAccordionHeader, { theme: itemTheme, size: size, "$isOpen": isOpen, disabled: isItemDisabled, intent: itemIntent, flat: flat, minimal: minimal, opacity: effectiveOpacity, onClick: () => onToggle(index), onKeyDown: (e) => onKeyDown(e, index), tabIndex: isItemDisabled ? undefined : 0, role: 'button', "aria-expanded": isOpen, className: 'reqore-accordion-header', children: [_jsx(StyledAccordionChevron, { as: 'span', "$isOpen": isOpen, children: _jsx(ReqoreIcon, { icon: 'ArrowDownSLine', size: getOneLessSize(size) }) }), item.icon && (_jsx(ReqoreIcon, { icon: item.icon, size: getOneLessSize(size), color: item.iconColor, className: 'reqore-accordion-icon' })), _jsx(ReqoreHeading, { size: getOneLessSize(size), effect: item.labelEffect, className: 'reqore-accordion-title', children: item.label }), (item.badge || item.badge === 0) && _jsx(ButtonBadge, { content: item.badge, size: size })] }), _jsx(StyledAccordionContentWrapper, { theme: theme, size: size, "$isOpen": isOpen, children: _jsx(StyledAccordionContentInner, { theme: theme, size: size, children: _jsx(StyledAccordionContentBody, { theme: theme, size: size, className: 'reqore-accordion-content', children: typeof item.content === 'string' ? (_jsx(ReqoreSpan, { size: size, children: item.content })) : (item.content) }) }) })] }));
101
- });
102
- export const ReqoreAccordion = memo(forwardRef(({ items, allowMultiple = true, size = 'normal', customTheme, inheritCustomTheme, intent, fluid, flat, disabled, tooltip, rounded = true, minimal, effect, opacity, transparent, onItemToggle, className, ...rest }, ref) => {
103
- const theme = useReqoreTheme('main', customTheme, intent, undefined, inheritCustomTheme);
104
- const [openItems, setOpenItems] = useState(() => items.reduce((acc, item, index) => {
105
- if (item.isOpen) {
106
- acc[index] = true;
107
- }
108
- return acc;
109
- }, {}));
110
- const handleToggle = useCallback((index) => {
111
- if (items[index]?.disabled || disabled)
112
- return;
113
- setOpenItems((prev) => {
114
- const isCurrentlyOpen = !!prev[index];
115
- const newState = allowMultiple ? { ...prev } : {};
116
- newState[index] = !isCurrentlyOpen;
117
- return newState;
118
- });
119
- onItemToggle?.(index, !openItems[index]);
120
- }, [allowMultiple, disabled, items, onItemToggle, openItems]);
121
- const handleKeyDown = useCallback((event, index) => {
122
- if (event.key === 'Enter' || event.key === ' ') {
123
- event.preventDefault();
124
- handleToggle(index);
125
- }
126
- }, [handleToggle]);
127
- const transformedEffect = useMemo(() => {
128
- if (!effect)
129
- return undefined;
130
- const newEffect = { ...effect };
131
- if (newEffect.gradient && intent) {
132
- newEffect.gradient = patchPrimaryGradient(newEffect.gradient, {
133
- borderColor: theme.intents[intent],
134
- });
135
- }
136
- return newEffect;
137
- }, [effect, intent, theme]);
138
- const effectiveOpacity = transparent ? 0 : opacity;
139
- return (_jsx(ReqoreTooltipComponent, { ...rest, Component: StyledAccordionWrapper, tooltip: tooltip, ref: ref, theme: theme, size: size, "$fluid": fluid, disabled: disabled, rounded: rounded, flat: flat, intent: intent, opacity: effectiveOpacity, effect: transformedEffect, className: `${className || ''} reqore-accordion`, children: items.map((item, index) => (_jsx(AccordionItemRenderer, { item: item, index: index, isOpen: !!openItems[index], theme: theme, customTheme: customTheme, size: size, intent: intent, flat: flat, rounded: rounded, minimal: minimal, disabled: disabled, effectiveOpacity: effectiveOpacity, isFirst: index === 0, isLast: index === items.length - 1, onToggle: handleToggle, onKeyDown: handleKeyDown }, item.id || index))) }));
140
- }));
141
- export default ReqoreAccordion;
142
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Accordion/index.tsx"],"names":[],"mappings":"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"}
@@ -1,122 +0,0 @@
1
- import { createElement as _createElement } from "react";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { size as count, isArray, last } from 'lodash';
4
- import React, { useMemo } from 'react';
5
- import { useMeasure } from 'react-use';
6
- import styled, { css } from 'styled-components';
7
- import { ReqoreDropdown, ReqoreErrorBoundary } from '../..';
8
- import { CONTROL_ICON_OPACITY } from '../../constants/colors';
9
- import { ICON_FROM_SIZE, MARGIN_FROM_SIZE, PADDING_FROM_SIZE } from '../../constants/sizes';
10
- import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
11
- import { useReqoreTheme } from '../../hooks/useTheme';
12
- import ReqoreIcon from '../Icon';
13
- import { StyledTabListItem } from '../Tabs/item';
14
- import ReqoreTabsList, { StyledReqoreTabsList, getLabelLength, getTabsLength } from '../Tabs/list';
15
- import ReqoreBreadcrumbsItem from './item';
16
- const StyledReqoreBreadcrumbs = styled.div `
17
- ${({ theme, size, flat, padded = true, margin = 'both', responsive }) => css `
18
- width: ${responsive ? '100%' : undefined};
19
- margin-top: ${margin === 'both' || margin === 'top' ? MARGIN_FROM_SIZE[size] : 0}px;
20
- margin-bottom: $ ${margin === 'both' || margin === 'bottom' ? MARGIN_FROM_SIZE[size] : 0}px;
21
- display: flex;
22
- padding: 0 ${padded ? PADDING_FROM_SIZE[size] : 0}px;
23
- justify-content: space-between;
24
- border-bottom: ${flat ? undefined : `1px solid ${changeLightness(theme.main, 0.05)}`};
25
- background-color: ${({ theme }) => theme.breadcrumbs?.main || 'transparent'};
26
-
27
- > div {
28
- height: 100%;
29
- display: flex;
30
- align-items: center;
31
-
32
- > * {
33
- color: ${theme.breadcrumbs?.item?.color ||
34
- (theme.breadcrumbs?.main
35
- ? getReadableColorFrom(theme.breadcrumbs.main, true)
36
- : getReadableColor(theme, undefined, undefined, true))};
37
- }
38
-
39
- ${StyledReqoreTabsList} {
40
- flex: 1;
41
- }
42
-
43
- ${StyledReqoreTabsList}, ${StyledTabListItem} {
44
- border-bottom: 0;
45
- }
46
-
47
- &:first-child {
48
- overflow: hidden;
49
- flex: 1;
50
- }
51
- }
52
- `}
53
- `;
54
- const StyledBreadcrumbsTabsWrapper = styled.div `
55
- display: flex;
56
- align-items: center;
57
- overflow: hidden;
58
- width: 100%;
59
- `;
60
- const arrowSize = 50;
61
- const getBreadcrumbsLength = (items, size) => items.reduce((len, item) => {
62
- if (isArray(item)) {
63
- return len + 120;
64
- }
65
- if (item.withTabs) {
66
- return (len +
67
- PADDING_FROM_SIZE[size] +
68
- arrowSize +
69
- getTabsLength(item.withTabs.tabs, 'width', item.withTabs.activeTab, size));
70
- }
71
- return (len +
72
- PADDING_FROM_SIZE[size] * 2 +
73
- ICON_FROM_SIZE[size] +
74
- getLabelLength(item, undefined, size));
75
- }, 0);
76
- const getTransformedItems = (items, width, size) => {
77
- if (!width) {
78
- return items;
79
- }
80
- let stop = false;
81
- let newItems = [...items];
82
- while (getBreadcrumbsLength(newItems, size) > width && !stop) {
83
- if (isArray(newItems[0])) {
84
- newItems[0].push(newItems[1]);
85
- newItems[1] = undefined;
86
- }
87
- else {
88
- const secondItem = newItems[0];
89
- newItems[0] = [secondItem];
90
- }
91
- newItems = newItems.filter((i) => i);
92
- if (!newItems[1] || newItems[1].withTabs) {
93
- stop = true;
94
- }
95
- }
96
- return newItems;
97
- };
98
- const ReqoreBreadcrumbs = ({ items, rightElement, _testWidth, customTheme, flat, size = 'normal', responsive = true, errorBoundaryOptions, ...rest }) => {
99
- const [ref, { width }] = useMeasure();
100
- const theme = useReqoreTheme('breadcrumbs', customTheme, undefined);
101
- const transformedItems = useMemo(() => (responsive ? getTransformedItems(items, _testWidth || width, size) : items), [items, width, _testWidth, size]);
102
- const renderItem = (itemOrItems, index) => {
103
- if (isArray(itemOrItems) && count(itemOrItems) > 1) {
104
- return (_jsx(React.Fragment, { children: _jsx(ReqoreDropdown, { icon: last(itemOrItems)?.icon, leftIconProps: last(itemOrItems)?.leftIconProps, handler: 'hoverStay', delay: 500, size: size, badge: count(itemOrItems), items: itemOrItems, children: _jsx(ReqoreIcon, { icon: 'MoreLine', effect: {
105
- opacity: CONTROL_ICON_OPACITY,
106
- } }) }, `dropdown-${index}`) }, index));
107
- }
108
- const item = (isArray(itemOrItems) && count(itemOrItems) === 1
109
- ? {
110
- ...itemOrItems[0],
111
- label: _jsx(ReqoreIcon, { icon: 'MoreLine' }),
112
- }
113
- : itemOrItems);
114
- if (item.withTabs) {
115
- return (_jsxs(StyledBreadcrumbsTabsWrapper, { children: [_jsx(ReqoreIcon, { icon: 'ArrowRightSLine', size: size, margin: 'both' }, 'icon' + index), _jsx(ReqoreTabsList, { tabs: item.withTabs.tabs, onTabChange: item.withTabs.onTabChange, activeTab: item.withTabs.activeTab, activeTabIntent: item.withTabs.activeTabIntent, customTheme: customTheme, flat: flat, size: size })] }, index));
116
- }
117
- return (_jsxs(React.Fragment, { children: [index !== 0 && (_jsx(ReqoreIcon, { icon: 'ArrowRightSLine', size: size, margin: 'both' }, 'icon' + index)), _createElement(ReqoreBreadcrumbsItem, { customTheme: customTheme, ...item, key: index, size: size })] }, index));
118
- };
119
- return (_jsx(ReqoreErrorBoundary, { ...errorBoundaryOptions, children: _jsxs(StyledReqoreBreadcrumbs, { ...rest, className: `${rest.className || ''} reqore-breadcrumbs-wrapper`, ref: ref, flat: flat, theme: theme, size: size, responsive: responsive, children: [_jsx("div", { children: transformedItems.map((item, index) => renderItem(item, index)) }, 'reqore-breadcrumbs-left-wrapper'), rightElement && _jsx("div", { children: rightElement })] }) }));
120
- };
121
- export default ReqoreBreadcrumbs;
122
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/index.tsx"],"names":[],"mappings":"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"}
@@ -1,14 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { forwardRef } from 'react';
3
- import { useReqoreTheme } from '../../hooks/useTheme';
4
- import ReqoreButton from '../Button';
5
- const ReqoreBreadcrumbsItem = forwardRef(({ label, props, as, customTheme, ...rest }, ref) => {
6
- const theme = useReqoreTheme('main', customTheme);
7
- return (_jsx(ReqoreButton, { as: as, ref: ref, className: 'reqore-breadcrumbs-item', customTheme: theme, minimal: true, flat: true, ...rest, ...props, onClick: (e) => {
8
- e.persist();
9
- e.stopPropagation();
10
- rest.onClick?.(e);
11
- }, children: label }));
12
- });
13
- export default ReqoreBreadcrumbsItem;
14
- //# sourceMappingURL=item.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/item.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,YAAY,MAAM,WAAW,CAAC;AAWrC,MAAM,qBAAqB,GAAG,UAAU,CACtC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,WAAW,EAAE,GAAG,IAAI,EAA8B,EAAE,GAAG,EAAE,EAAE;IAC9E,MAAM,KAAK,GAAG,cAAc,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAElD,OAAO,CACL,KAAC,YAAY,IACX,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,yBAAyB,EACnC,WAAW,EAAE,KAAK,EAClB,OAAO,QACP,IAAI,WACA,IAAI,KACJ,KAAK,EACT,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,CAAC,CAAC,OAAO,EAAE,CAAC;YACZ,CAAC,CAAC,eAAe,EAAE,CAAC;YAEpB,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACpB,CAAC,YAEA,KAAK,GACO,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
@@ -1,315 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { size } from 'lodash';
3
- import { rgba, saturate, tint } from 'polished';
4
- import { forwardRef, memo, useCallback, useMemo } from 'react';
5
- import styled, { css } from 'styled-components';
6
- import { CONTROL_ICON_OPACITY } from '../../constants/colors';
7
- import { CONTROL_HORIZONTAL_PADDING_FROM_SIZE, CONTROL_TEXT_FROM_SIZE, CONTROL_VERTICAL_PADDING_FROM_SIZE, CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE, ICON_FROM_SIZE, PADDING_FROM_SIZE, PILL_RADIUS_MODIFIER, resolveRadius, SIZE_TO_PX, } from '../../constants/sizes';
8
- import { changeLightness, getGradientMix, getReadableColor, getReadableColorFrom, isAchromatic, } from '../../helpers/colors';
9
- import { alignToFlexAlign, getOneLessSize } from '../../helpers/utils';
10
- import { useReqoreProperty } from '../../hooks/useReqoreContext';
11
- import { useReqoreEffect } from '../../hooks/useReqoreEffect';
12
- import { useReqoreTheme } from '../../hooks/useTheme';
13
- import { ActiveIconScale, DisabledElement, InactiveIconScale, RaisedElement, ReadOnlyElement, ScaleIconOnHover, StyledActiveContent, StyledContent, StyledInActiveContent, StyledInvisibleContent, } from '../../styles';
14
- import { getPrimaryGradient, ReqoreTextEffect, StyledEffect, } from '../Effect';
15
- import ReqoreIcon from '../Icon';
16
- import { ReqoreHorizontalSpacer, ReqoreSpacer } from '../Spacer';
17
- import ReqoreTag from '../Tag';
18
- import ReqoreTagGroup from '../Tag/group';
19
- import { ReqoreTooltipComponent } from '../TooltipComponent';
20
- const getButtonMainColor = (theme, color, effect) => {
21
- const primary = getPrimaryGradient(effect?.gradient);
22
- if (primary) {
23
- return getGradientMix(theme, primary.colors);
24
- }
25
- if (color) {
26
- return color;
27
- }
28
- return theme.main;
29
- };
30
- const getButtonTextColor = ({ minimal, transparent, color, theme }) => minimal || transparent
31
- ? isAchromatic(color)
32
- ? getReadableColorFrom(theme.originalMain, true)
33
- : saturate(1, tint(0.8, color))
34
- : getReadableColorFrom(color, true);
35
- export const StyledAnimatedTextWrapper = styled.span `
36
- min-width: 5px;
37
- overflow: hidden;
38
- position: relative;
39
- text-align: ${({ textAlign }) => textAlign};
40
- display: flex;
41
- flex-flow: column;
42
- align-items: ${({ textAlign }) => alignToFlexAlign(textAlign)};
43
- `;
44
- export const StyledButton = styled(StyledEffect) `
45
- display: flex;
46
- flex-flow: column;
47
- justify-content: center;
48
- font-weight: 570;
49
- position: relative;
50
- overflow: hidden;
51
- vertical-align: middle;
52
- border: ${({ theme, color, flat, effect }) => !flat ? `1px solid ${changeLightness(getButtonMainColor(theme, color, effect), 0.1)}` : 0};
53
- padding: ${({ size, compact, verticalPadding = 'normal' }) => `${CONTROL_VERTICAL_PADDING_FROM_SIZE[size] +
54
- CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE[verticalPadding]}px ${compact
55
- ? CONTROL_VERTICAL_PADDING_FROM_SIZE[size]
56
- : CONTROL_HORIZONTAL_PADDING_FROM_SIZE[size]}px`};
57
- font-size: ${({ size }) => CONTROL_TEXT_FROM_SIZE[size]}px;
58
- outline-offset: -2px;
59
-
60
- min-height: ${({ size, verticalPadding = 'normal' }) => SIZE_TO_PX[size] + CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE[verticalPadding] * 2}px;
61
- min-width: ${({ size }) => SIZE_TO_PX[size]}px;
62
- max-width: ${({ maxWidth, fluid, fixed }) => maxWidth || (fluid && !fixed ? '100%' : undefined)};
63
-
64
- ${({ wrap, description }) => !wrap && !description
65
- ? css `
66
- max-height: ${({ size, verticalPadding = 'normal' }) => SIZE_TO_PX[size] + CONTROL_VERTICAL_PADDING_MODIFIER_FROM_SIZE[verticalPadding] * 2}px;
67
- `
68
- : null}
69
-
70
- flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
71
- flex-shrink: ${({ shrink }) => shrink};
72
- flex-grow: ${({ grow }) => grow};
73
- align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
74
-
75
- border-radius: ${({ size, radiusSize, rounded, pill, circle }) => rounded === false
76
- ? undefined
77
- : circle
78
- ? '9999px'
79
- : `${resolveRadius(size, radiusSize) * (pill ? PILL_RADIUS_MODIFIER : 1)}px`};
80
-
81
- background-color: ${({ minimal, color, theme, transparent, effect }) => {
82
- if (transparent) {
83
- return 'transparent';
84
- }
85
- if (minimal) {
86
- return css `
87
- ${rgba(getButtonMainColor(theme, color, effect), 0.2)}
88
- `;
89
- }
90
- return color;
91
- }};
92
-
93
- color: ${({ color, minimal, transparent, theme, effect }) => {
94
- const finalColor = getButtonMainColor(theme, color, effect);
95
- return getButtonTextColor({ minimal, transparent, color: finalColor, theme });
96
- }};
97
-
98
- ${InactiveIconScale};
99
-
100
- ${({ raised, flat, transparent }) => raised && flat && !transparent && RaisedElement}
101
-
102
- ${({ readOnly, animate, active, theme, color, effect }) => !readOnly && !active
103
- ? css `
104
- &:not(:disabled) {
105
- ${ScaleIconOnHover}
106
-
107
- cursor: pointer;
108
- transition: all 0.2s ease-out;
109
-
110
- &:active {
111
- outline: 3px solid ${changeLightness(getButtonMainColor(theme, color, effect), 0.25)};
112
- outline-offset: -3px;
113
- transition: none;
114
- }
115
-
116
- &:hover:not(:active) {
117
- outline: 2px solid ${changeLightness(getButtonMainColor(theme, color, effect), 0.25)};
118
- transition: none;
119
- }
120
-
121
- &:hover,
122
- &:active {
123
- border-color: ${({ flat, theme, color }) => flat ? undefined : changeLightness(getButtonMainColor(theme, color, effect), 0.25)};
124
- background-color: ${({ theme, color, minimal, transparent }) => minimal || transparent
125
- ? rgba(changeLightness(getButtonMainColor(theme, color, effect), 0.1), transparent ? 0.2 : 0.4)
126
- : changeLightness(getButtonMainColor(theme, color), 0.05)};
127
- color: ${({ theme, color, minimal, transparent, effect }) => {
128
- const finalColor = getButtonMainColor(theme, color, effect);
129
- return minimal || transparent
130
- ? isAchromatic(finalColor)
131
- ? getReadableColorFrom(theme.originalMain)
132
- : saturate(1, tint(0.9, finalColor))
133
- : getReadableColorFrom(finalColor);
134
- }}
135
- ${animate
136
- ? css `
137
- cursor: pointer;
138
-
139
- ${StyledInActiveContent} {
140
- transform: translateY(150%);
141
- filter: blur(10px);
142
- opacity: 0;
143
- }
144
-
145
- ${StyledActiveContent} {
146
- transform: translateY(0px);
147
- filter: blur(0);
148
- opacity: 1;
149
- }
150
- `
151
- : undefined};
152
- }
153
- }
154
- `
155
- : readOnly
156
- ? css `
157
- ${ReadOnlyElement};
158
- `
159
- : undefined};
160
-
161
- ${({ active, flat, theme, color, effect }) => {
162
- if (active) {
163
- return css `
164
- cursor: pointer;
165
- background-color: ${changeLightness(getButtonMainColor(theme, color, effect), 0.1)};
166
- color: ${getReadableColor({ main: changeLightness(getButtonMainColor(theme, color, effect), 0.1) }, undefined, undefined)};
167
- border-color: ${flat
168
- ? undefined
169
- : changeLightness(getButtonMainColor(theme, color, effect), 0.175)};
170
-
171
- &:hover,
172
- &:active,
173
- &:focus {
174
- border-color: ${flat
175
- ? undefined
176
- : changeLightness(getButtonMainColor(theme, color, effect), 0.275)};
177
- }
178
-
179
- ${ActiveIconScale}
180
- `;
181
- }
182
- }};
183
-
184
- &:disabled {
185
- ${DisabledElement};
186
- }
187
-
188
- &:focus,
189
- &:active {
190
- outline: 2px solid
191
- ${({ theme, color, effect }) => changeLightness(getButtonMainColor(theme, color, effect), 0.1)};
192
- border-color: ${({ minimal, theme, color, effect }) => minimal ? undefined : changeLightness(getButtonMainColor(theme, color, effect), 0.1)};
193
- }
194
-
195
- .reqore-button-description {
196
- padding-top: ${({ size }) => PADDING_FROM_SIZE[size] / 2}px;
197
- color: ${({ theme, color, minimal, transparent }) => rgba(getButtonTextColor({ minimal, transparent, color, theme }), 0.7)};
198
- }
199
- `;
200
- export const StyledButtonContent = styled.div `
201
- display: flex;
202
- align-items: center;
203
- width: 100%;
204
- height: 100%;
205
- min-width: ${({ size }) => ICON_FROM_SIZE[size]}px;
206
- flex: 1;
207
- flex-shrink: 0;
208
-
209
- ${({ wrap, description }) => !wrap && !description
210
- ? css `
211
- max-height: ${({ size }) => SIZE_TO_PX[size]}px;
212
- `
213
- : null}
214
- `;
215
- export const ButtonBadge = memo(({ wrapGroup, compact, active, margin = 'left', ...props }) => {
216
- const renderTag = useCallback(({ size, color, theme, content, key }) => (_jsx(ReqoreTag, { size: getOneLessSize(size), asBadge: true, color: color, customTheme: theme, className: 'reqore-button-badge', labelAlign: 'center', minimal: !active && !content?.effect?.gradient, ...(typeof content === 'string' || typeof content === 'number'
217
- ? { label: content }
218
- : content) }, key)), [props]);
219
- const content = Array.isArray(props.content) ? props.content : [props.content];
220
- const leftBadges = useMemo(() => content.filter((badge) => typeof badge === 'string' || typeof badge === 'number' || !badge?.align), [content]);
221
- const rightBadges = useMemo(() => content.filter((badge) => typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'right'), [content]);
222
- const middleBadges = useMemo(() => content.filter((badge) => typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'center'), [content]);
223
- const buildContent = useCallback((badge) => {
224
- if (typeof badge === 'string' || typeof badge === 'number') {
225
- return { label: badge, align: undefined };
226
- }
227
- return { ...badge, align: undefined };
228
- }, []);
229
- return (_jsxs(_Fragment, { children: [margin === 'left' && (_jsx(ReqoreSpacer, { width: props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / (compact ? 2 : 1), height: !props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / 2 })), size(leftBadges) ? (_jsx(ReqoreTagGroup, { wrap: wrapGroup, align: 'left', children: leftBadges.map((badge, index) => renderTag({ ...props, content: buildContent(badge), key: index })) })) : null, size(middleBadges) ? (_jsx(ReqoreTagGroup, { wrap: wrapGroup, fluid: true, align: 'center', children: middleBadges.map((badge, index) => renderTag({ ...props, content: buildContent(badge), key: index })) })) : null, size(rightBadges) ? (_jsx(ReqoreTagGroup, { wrap: wrapGroup, align: 'right', children: rightBadges.map((badge, index) => renderTag({ ...props, content: buildContent(badge), key: index })) })) : null] }));
230
- });
231
- /**
232
- * Primary Reqore button component that supports intents, icons, and badges.
233
- */
234
- const ReqoreButton = memo(forwardRef(({ icon, size = 'normal', minimal, transparent, children, tooltip, className, fluid, fixed, intent, active, flat, rightIcon, customTheme, wrap, readOnly, badge, description, maxWidth, textAlign = 'left', effect, labelEffect, descriptionEffect, leftIconColor, rightIconColor, iconColor, iconsAlign, leftIconProps, rightIconProps, label, compact, as, animated, loading, loadingIconType, ...rest }, ref) => {
235
- const animations = useReqoreProperty('animations');
236
- const theme = useReqoreTheme('main', customTheme, intent);
237
- const fixedEffect = useReqoreEffect('buttons', theme, effect);
238
- // If color or intent was specified, set the color
239
- const customColor = useMemo(() => (intent ? theme.main : changeLightness(theme.main, 0.07)), [intent, theme.main]);
240
- const _flat = minimal ? flat : flat === true;
241
- const _children = useMemo(() => label || children, [label, children]);
242
- const _compact = compact ?? theme.buttons?.compact ?? !children;
243
- const hasLeftIcon = icon || leftIconProps?.image;
244
- const hasRightIcon = rightIcon || rightIconProps?.image;
245
- const hasRightAlignedBadge = useMemo(() => {
246
- if (Array.isArray(badge)) {
247
- return badge.some((badge) => typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'right');
248
- }
249
- return typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'right';
250
- }, [badge]);
251
- const animate = animated === true || (animations.buttons && animated !== false);
252
- const leftIcon = loading
253
- ? `Loader${loadingIconType || ''}Line`
254
- : icon || leftIconProps?.icon;
255
- const memoEffect = useMemo(() => ({
256
- interactive: !readOnly && !rest.disabled,
257
- ...fixedEffect,
258
- gradient: intent ? undefined : fixedEffect?.gradient,
259
- }), [fixedEffect, intent, readOnly, rest.disabled]);
260
- return (_jsxs(ReqoreTooltipComponent, { ...{
261
- ...rest,
262
- effect: memoEffect,
263
- tabIndex: rest.disabled ? -1 : 0,
264
- as: as || 'button',
265
- theme,
266
- fluid,
267
- fixed,
268
- maxWidth,
269
- minimal,
270
- transparent,
271
- size,
272
- intent,
273
- color: customColor,
274
- animate,
275
- flat: _flat,
276
- active,
277
- readOnly: readOnly || loading,
278
- wrap,
279
- description,
280
- className: `${className || ''} reqore-control reqore-button`,
281
- compact: _compact,
282
- tooltip,
283
- }, Component: StyledButton, ref: ref, children: [_jsxs(StyledButtonContent, { size: size, wrap: wrap, description: description, flat: _flat, children: [hasLeftIcon ? (_jsxs(_Fragment, { children: [_jsx(ReqoreIcon, { size: size, color: leftIconColor || iconColor, compact: true, effect: {
284
- opacity: CONTROL_ICON_OPACITY,
285
- }, ...leftIconProps, style: textAlign !== 'left' || iconsAlign === 'center' || !_children
286
- ? {
287
- marginRight: iconsAlign !== 'center' || !_children ? 'auto' : undefined,
288
- marginLeft: iconsAlign === 'center' ||
289
- !_children ||
290
- (textAlign === 'center' && !_children)
291
- ? 'auto'
292
- : undefined,
293
- }
294
- : undefined, animation: loading ? 'spin' : leftIconProps?.animation, icon: leftIcon }), _children || hasRightIcon ? (_jsx(ReqoreSpacer, { width: PADDING_FROM_SIZE[size] / 2 })) : null] })) : _children ? (_jsx(ReqoreHorizontalSpacer, { width: 1, style: textAlign !== 'left' ? { marginRight: 'auto' } : undefined })) : null, _children && (_jsxs(StyledAnimatedTextWrapper, { textAlign: textAlign, style: textAlign === 'center' && iconsAlign !== 'center' ? { margin: 'auto' } : undefined, children: [!animate && (_jsx(StyledContent, { wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content', children: _children })), animate && (_jsx(StyledActiveContent, { wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content reqore-animated reqore-active', children: _children })), animate && (_jsx(StyledInActiveContent, { wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content reqore-animated reqore-inactive', children: _children })), animate && (_jsx(StyledInvisibleContent, { wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content reqore-animated reqore-invisible', children: _children })), (badge || badge === 0) && wrap ? (_jsx(ButtonBadge, { content: badge, size: size, wrap: true, active: active })) : null] })), (badge || badge === 0) && !wrap ? (_jsx(ButtonBadge, { content: badge, size: size, compact: _compact, wrapGroup: false, wrap: false, active: active })) : null, !hasRightIcon ? (_children ? (_jsx(ReqoreHorizontalSpacer, { width: 1, style: textAlign !== 'right' && !hasRightAlignedBadge
295
- ? { marginLeft: 'auto' }
296
- : undefined })) : null) : (_jsxs(_Fragment, { children: [_children || badge ? _jsx(ReqoreSpacer, { width: PADDING_FROM_SIZE[size] / 2 }) : null, _jsx(ReqoreIcon, { icon: rightIcon, size: size, color: rightIconColor || iconColor, effect: {
297
- opacity: CONTROL_ICON_OPACITY,
298
- }, ...rightIconProps, style: textAlign !== 'right' || iconsAlign === 'center'
299
- ? {
300
- marginLeft: !hasRightAlignedBadge && (iconsAlign !== 'center' || !_children)
301
- ? 'auto'
302
- : undefined,
303
- marginRight: iconsAlign === 'center' || (textAlign === 'center' && !_children)
304
- ? 'auto'
305
- : undefined,
306
- }
307
- : undefined })] }))] }), description && (_jsx(ReqoreTextEffect, { className: 'reqore-button-description', effect: {
308
- textSize: getOneLessSize(size),
309
- weight: 'light',
310
- textAlign,
311
- ...descriptionEffect,
312
- }, children: description }))] }));
313
- }));
314
- export default ReqoreButton;
315
- //# sourceMappingURL=index.js.map