@bolio-ui/core 3.0.0-alpha.1 → 3.0.0-alpha.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 (130) hide show
  1. package/dist/ContextMenu/index.js +3 -3
  2. package/dist/CssBaseline/index.js +2 -2
  3. package/dist/DateRangePicker/index.js +2 -2
  4. package/dist/ImageZoom/ImageZoom.d.ts +14 -0
  5. package/dist/ImageZoom/index.d.ts +3 -0
  6. package/dist/ImageZoom/index.js +17 -0
  7. package/dist/Menu/index.js +2 -2
  8. package/dist/Splitter/Splitter.d.ts +14 -0
  9. package/dist/Splitter/SplitterContext.d.ts +6 -0
  10. package/dist/Splitter/SplitterPanel.d.ts +13 -0
  11. package/dist/Splitter/index.d.ts +9 -0
  12. package/dist/Splitter/index.js +14 -0
  13. package/dist/Table/Table.d.ts +11 -1
  14. package/dist/Table/TableBody.d.ts +8 -2
  15. package/dist/Table/TableColumn.d.ts +2 -0
  16. package/dist/Table/TableHead.d.ts +9 -1
  17. package/dist/Table/TableSelectBox.d.ts +9 -0
  18. package/dist/Table/TableTypes.d.ts +8 -0
  19. package/dist/Table/index.d.ts +1 -1
  20. package/dist/Table/index.js +2 -2
  21. package/dist/Tour/Tour.d.ts +26 -0
  22. package/dist/Tour/index.d.ts +3 -0
  23. package/dist/Tour/index.js +23 -0
  24. package/dist/{chunk-AVO2SK2I.js → chunk-3S6G7WGK.js} +2 -2
  25. package/dist/{chunk-GYFW5NLU.js → chunk-BHQRX76X.js} +22 -4
  26. package/dist/chunk-FFEAKF3A.js +220 -0
  27. package/dist/{chunk-XLPOECCE.js → chunk-FL6J36B7.js} +3 -2
  28. package/dist/chunk-REWKR7S3.js +109 -0
  29. package/dist/chunk-STYC6O24.js +232 -0
  30. package/dist/{chunk-TDJGMSGT.js → chunk-WIIDIZYK.js} +3 -1
  31. package/dist/{chunk-TKICX5R6.js → chunk-ZNDN2VPZ.js} +225 -33
  32. package/dist/css/ButtonDropdown-ButtonDropdownItem.css +0 -1
  33. package/dist/css/ButtonGroup.css +0 -1
  34. package/dist/css/Calendar.css +0 -1
  35. package/dist/css/Carousel.css +0 -1
  36. package/dist/css/ColorInput.css +0 -2
  37. package/dist/css/ColorPicker.css +0 -3
  38. package/dist/css/Combobox.css +0 -2
  39. package/dist/css/DatePicker.css +0 -3
  40. package/dist/css/DateRangePicker.css +6 -3
  41. package/dist/css/Dropzone.css +0 -3
  42. package/dist/css/Fieldset-FieldsetGroup.css +0 -1
  43. package/dist/css/ImageZoom.css +93 -0
  44. package/dist/css/Input.css +0 -1
  45. package/dist/css/Menu-MenuList.css +0 -1
  46. package/dist/css/NumberInput.css +0 -1
  47. package/dist/css/PinInput.css +0 -1
  48. package/dist/css/Radio.css +0 -1
  49. package/dist/css/SegmentedControl.css +0 -1
  50. package/dist/css/Select-SelectDropdown.css +0 -1
  51. package/dist/css/Select-SelectOption.css +0 -1
  52. package/dist/css/Select.css +0 -1
  53. package/dist/css/Splitter.css +77 -0
  54. package/dist/css/Table-TableBody.css +10 -0
  55. package/dist/css/Table-TableHead.css +41 -0
  56. package/dist/css/Table-TableSelectBox.css +11 -0
  57. package/dist/css/TagsInput.css +0 -2
  58. package/dist/css/Textarea.css +0 -1
  59. package/dist/css/Toggle.css +0 -1
  60. package/dist/css/Tour.css +81 -0
  61. package/dist/css/use-toasts-toast-item.css +0 -1
  62. package/dist/index.d.ts +7 -1
  63. package/dist/index.js +31 -19
  64. package/dist/styles.css +3227 -2939
  65. package/esm/ContextMenu/index.js +2 -2
  66. package/esm/CssBaseline/index.js +1 -1
  67. package/esm/DateRangePicker/index.js +1 -1
  68. package/esm/ImageZoom/ImageZoom.d.ts +14 -0
  69. package/esm/ImageZoom/index.d.ts +3 -0
  70. package/esm/ImageZoom/index.js +17 -0
  71. package/esm/Menu/index.js +1 -1
  72. package/esm/Splitter/Splitter.d.ts +14 -0
  73. package/esm/Splitter/SplitterContext.d.ts +6 -0
  74. package/esm/Splitter/SplitterPanel.d.ts +13 -0
  75. package/esm/Splitter/index.d.ts +9 -0
  76. package/esm/Splitter/index.js +14 -0
  77. package/esm/Table/Table.d.ts +11 -1
  78. package/esm/Table/TableBody.d.ts +8 -2
  79. package/esm/Table/TableColumn.d.ts +2 -0
  80. package/esm/Table/TableHead.d.ts +9 -1
  81. package/esm/Table/TableSelectBox.d.ts +9 -0
  82. package/esm/Table/TableTypes.d.ts +8 -0
  83. package/esm/Table/index.d.ts +1 -1
  84. package/esm/Table/index.js +1 -1
  85. package/esm/Tour/Tour.d.ts +26 -0
  86. package/esm/Tour/index.d.ts +3 -0
  87. package/esm/Tour/index.js +23 -0
  88. package/esm/{chunk-AVO2SK2I.js → chunk-3S6G7WGK.js} +1 -1
  89. package/esm/{chunk-GYFW5NLU.js → chunk-BHQRX76X.js} +22 -4
  90. package/esm/chunk-FFEAKF3A.js +220 -0
  91. package/esm/{chunk-XLPOECCE.js → chunk-FL6J36B7.js} +3 -2
  92. package/esm/chunk-REWKR7S3.js +109 -0
  93. package/esm/chunk-STYC6O24.js +232 -0
  94. package/esm/{chunk-TDJGMSGT.js → chunk-WIIDIZYK.js} +3 -1
  95. package/esm/chunk-ZNDN2VPZ.js +543 -0
  96. package/esm/css/ButtonDropdown-ButtonDropdownItem.css +0 -1
  97. package/esm/css/ButtonGroup.css +0 -1
  98. package/esm/css/Calendar.css +0 -1
  99. package/esm/css/Carousel.css +0 -1
  100. package/esm/css/ColorInput.css +0 -2
  101. package/esm/css/ColorPicker.css +0 -3
  102. package/esm/css/Combobox.css +0 -2
  103. package/esm/css/DatePicker.css +0 -3
  104. package/esm/css/DateRangePicker.css +6 -3
  105. package/esm/css/Dropzone.css +0 -3
  106. package/esm/css/Fieldset-FieldsetGroup.css +0 -1
  107. package/esm/css/ImageZoom.css +93 -0
  108. package/esm/css/Input.css +0 -1
  109. package/esm/css/Menu-MenuList.css +0 -1
  110. package/esm/css/NumberInput.css +0 -1
  111. package/esm/css/PinInput.css +0 -1
  112. package/esm/css/Radio.css +0 -1
  113. package/esm/css/SegmentedControl.css +0 -1
  114. package/esm/css/Select-SelectDropdown.css +0 -1
  115. package/esm/css/Select-SelectOption.css +0 -1
  116. package/esm/css/Select.css +0 -1
  117. package/esm/css/Splitter.css +77 -0
  118. package/esm/css/Table-TableBody.css +10 -0
  119. package/esm/css/Table-TableHead.css +41 -0
  120. package/esm/css/Table-TableSelectBox.css +11 -0
  121. package/esm/css/TagsInput.css +0 -2
  122. package/esm/css/Textarea.css +0 -1
  123. package/esm/css/Toggle.css +0 -1
  124. package/esm/css/Tour.css +81 -0
  125. package/esm/css/use-toasts-toast-item.css +0 -1
  126. package/esm/index.d.ts +7 -1
  127. package/esm/index.js +36 -24
  128. package/esm/styles.css +2987 -2699
  129. package/package.json +1 -1
  130. package/esm/chunk-TKICX5R6.js +0 -351
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bolio-ui/core",
3
- "version": "3.0.0-alpha.1",
3
+ "version": "3.0.0-alpha.2",
4
4
  "description": "Amazing, modern and creative tools for React UI. 🥷🏼",
5
5
  "keywords": [
6
6
  "bolio",
@@ -1,351 +0,0 @@
1
- import {
2
- Pagination_default
3
- } from "./chunk-E5EDUOQT.js";
4
- import {
5
- use_resize_default
6
- } from "./chunk-JJFOGZ6V.js";
7
- import {
8
- use_real_shape_default
9
- } from "./chunk-HKOESPKZ.js";
10
- import {
11
- log_warning_default
12
- } from "./chunk-AXYDJGTN.js";
13
- import {
14
- use_scale_default,
15
- with_scale_default
16
- } from "./chunk-MAICNLTY.js";
17
- import {
18
- use_theme_default
19
- } from "./chunk-V5I4ORQQ.js";
20
- import {
21
- joinClasses,
22
- use_classes_default
23
- } from "./chunk-5KUROAEP.js";
24
-
25
- // core/Table/Table.tsx
26
- import React4, {
27
- useCallback,
28
- useEffect as useEffect2,
29
- useImperativeHandle,
30
- useMemo as useMemo2,
31
- useRef,
32
- useState
33
- } from "react";
34
-
35
- // core/Table/TableHead.tsx
36
- import { useMemo } from "react";
37
-
38
- // css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Table/TableHead.module.css.bolio-css-module-source
39
- var TableHead_module_css_default = { "thead": "TableHead-module_thead__zMtMt", "th": "TableHead-module_th__GzIce", "theadBox": "TableHead-module_theadBox__6QaBJ" };
40
-
41
- // core/Table/TableHead.tsx
42
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
43
- var makeColgroup = (width, columns) => {
44
- const unsetWidthCount = columns.filter((c) => !c.width).length;
45
- const customWidthTotal = columns.reduce((pre, current) => {
46
- return current.width ? pre + current.width : pre;
47
- }, 0);
48
- const averageWidth = (width - customWidthTotal) / unsetWidthCount;
49
- if (averageWidth <= 0) return /* @__PURE__ */ jsx("colgroup", {});
50
- return /* @__PURE__ */ jsx("colgroup", { children: columns.map((column, index) => /* @__PURE__ */ jsx("col", { width: column.width || averageWidth }, `colgroup-${index}`)) });
51
- };
52
- var TableHead = (props) => {
53
- const theme = use_theme_default();
54
- const { columns, width } = props;
55
- const isScalableWidth = useMemo(
56
- () => columns.find((item) => !!item.width),
57
- [columns]
58
- );
59
- const colgroup = useMemo(() => {
60
- if (!isScalableWidth) return /* @__PURE__ */ jsx("colgroup", {});
61
- return makeColgroup(width, columns);
62
- }, [isScalableWidth, width, columns]);
63
- const theadStyle = {
64
- "--table-head-text-color": theme.palette.accents_5,
65
- "--table-head-bg": theme.palette.accents_1,
66
- "--table-head-border-color": theme.palette.border,
67
- "--table-head-radius": theme.layout.radius
68
- };
69
- return /* @__PURE__ */ jsxs(Fragment, { children: [
70
- colgroup,
71
- /* @__PURE__ */ jsx("thead", { className: TableHead_module_css_default.thead, style: theadStyle, children: /* @__PURE__ */ jsx("tr", { children: columns.map((column, index) => /* @__PURE__ */ jsx(
72
- "th",
73
- {
74
- className: joinClasses(TableHead_module_css_default.th, column.className),
75
- children: /* @__PURE__ */ jsx("div", { className: TableHead_module_css_default.theadBox, children: column.label })
76
- },
77
- `table-th-${String(column.prop)}-${index}`
78
- )) }) })
79
- ] });
80
- };
81
- TableHead.displayName = "BolioUITableHead";
82
- var TableHead_default = TableHead;
83
-
84
- // core/Table/TableCell.tsx
85
- import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
86
- var TableCell = ({
87
- columns,
88
- row,
89
- rowIndex,
90
- emptyText,
91
- onCellClick
92
- }) => {
93
- return /* @__PURE__ */ jsx2(Fragment2, { children: columns.map((column, index) => {
94
- const currentRowValue = row[column.prop];
95
- const cellValue = currentRowValue || emptyText;
96
- const shouldBeRenderElement = column.renderHandler(
97
- currentRowValue,
98
- row,
99
- rowIndex
100
- );
101
- return /* @__PURE__ */ jsx2(
102
- "td",
103
- {
104
- onClick: () => onCellClick && onCellClick(currentRowValue, rowIndex, index),
105
- className: column.className,
106
- children: /* @__PURE__ */ jsx2("div", { className: "cell", children: shouldBeRenderElement ? shouldBeRenderElement : cellValue })
107
- },
108
- `row-td-${index}-${String(column.prop)}`
109
- );
110
- }) });
111
- };
112
- var TableCell_default = TableCell;
113
-
114
- // core/Table/TableContext.ts
115
- import React2 from "react";
116
- var defaultContext = {
117
- columns: [],
118
- updateColumn: () => {
119
- }
120
- };
121
- var TableContext = React2.createContext(defaultContext);
122
- var useTableContext = () => React2.useContext(TableContext);
123
-
124
- // css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Table/TableBody.module.css.bolio-css-module-source
125
- var TableBody_module_css_default = { "tr": "TableBody-module_tr__lTn-M", "hover": "TableBody-module_hover__AjVlq" };
126
-
127
- // core/Table/TableBody.tsx
128
- import { jsx as jsx3 } from "react/jsx-runtime";
129
- var TableBody = ({
130
- data,
131
- hover,
132
- emptyText,
133
- onRow,
134
- onCell,
135
- rowClassName
136
- }) => {
137
- const theme = use_theme_default();
138
- const { columns } = useTableContext();
139
- const rowClickHandler = (row, index) => {
140
- if (onRow) onRow(row, index);
141
- };
142
- const trStyle = {
143
- "--table-body-hover-bg": theme.palette.accents_1,
144
- "--table-body-border-color": theme.palette.border,
145
- "--table-body-text-color": theme.palette.accents_6
146
- };
147
- return /* @__PURE__ */ jsx3("tbody", { children: data.map((row, index) => {
148
- const className = rowClassName(row, index);
149
- return /* @__PURE__ */ jsx3(
150
- "tr",
151
- {
152
- className: joinClasses(
153
- TableBody_module_css_default.tr,
154
- { [TableBody_module_css_default.hover]: hover },
155
- className
156
- ),
157
- onClick: () => rowClickHandler(row, index),
158
- style: trStyle,
159
- children: /* @__PURE__ */ jsx3(
160
- TableCell_default,
161
- {
162
- columns,
163
- row,
164
- rowIndex: index,
165
- emptyText,
166
- onCellClick: onCell
167
- }
168
- )
169
- },
170
- `tbody-row-${index}`
171
- );
172
- }) });
173
- };
174
- TableBody.displayName = "BolioUITableBody";
175
- var TableBody_default = TableBody;
176
-
177
- // core/Table/TableColumn.tsx
178
- import { useEffect } from "react";
179
- var defaultRender = () => {
180
- };
181
- var TableColumn = (columnProps) => {
182
- const {
183
- children,
184
- prop,
185
- label,
186
- width,
187
- className = "",
188
- render: renderHandler = defaultRender
189
- } = columnProps;
190
- const { updateColumn } = useTableContext();
191
- const safeProp = String(prop).trim();
192
- if (!safeProp) {
193
- log_warning_default('The props "prop" is required.', "Table.Column");
194
- }
195
- useEffect(() => {
196
- updateColumn({
197
- label: children || label,
198
- prop: safeProp,
199
- width,
200
- className,
201
- renderHandler
202
- });
203
- }, [children, label, safeProp, width, className, renderHandler, updateColumn]);
204
- return null;
205
- };
206
- TableColumn.displayName = "BolioUITableColumn";
207
- var TableColumn_default = TableColumn;
208
-
209
- // css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Table/Table.module.css.bolio-css-module-source
210
- var Table_module_css_default = { "table": "Table-module_table__H9ZOx", "footer": "Table-module_footer__7eFVi" };
211
-
212
- // core/Table/Table.tsx
213
- import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
214
- var defaultProps = {
215
- hover: true,
216
- initialData: [],
217
- emptyText: "",
218
- className: "",
219
- rowClassName: () => ""
220
- };
221
- function TableComponent(tableProps, forwardedRef) {
222
- var _a, _b;
223
- const {
224
- children,
225
- data: customData,
226
- initialData = defaultProps.initialData,
227
- hover = defaultProps.hover,
228
- emptyText = defaultProps.emptyText,
229
- onRow,
230
- onCell,
231
- onChange,
232
- pagination,
233
- className = defaultProps.className,
234
- rowClassName = defaultProps.rowClassName,
235
- style,
236
- ...props
237
- } = tableProps;
238
- const { SCALES } = use_scale_default();
239
- const tableRef = useRef(null);
240
- useImperativeHandle(forwardedRef, () => tableRef.current);
241
- const [{ width }, updateShape] = use_real_shape_default(tableRef);
242
- const [columns, setColumns] = useState([]);
243
- const [data, setData] = useState(initialData);
244
- const updateColumn = useCallback(
245
- (column) => {
246
- setColumns((last) => {
247
- const hasColumn = last.find((item) => item.prop === column.prop);
248
- if (!hasColumn) return [...last, column];
249
- return last.map((item) => {
250
- if (item.prop !== column.prop) return item;
251
- return column;
252
- });
253
- });
254
- },
255
- []
256
- );
257
- const contextValue = useMemo2(
258
- () => ({
259
- columns,
260
- updateColumn
261
- }),
262
- [columns, updateColumn]
263
- );
264
- useEffect2(() => {
265
- if (typeof customData === "undefined") return;
266
- setData(customData);
267
- }, [customData]);
268
- use_resize_default(() => updateShape());
269
- const [selfPage, setSelfPage] = useState(1);
270
- const pageSize = pagination ? Math.max(1, pagination.pageSize) : 0;
271
- const totalRows = (_a = pagination == null ? void 0 : pagination.total) != null ? _a : data.length;
272
- const pageCount = pagination ? Math.ceil(totalRows / pageSize) : 0;
273
- const page = Math.min((_b = pagination == null ? void 0 : pagination.page) != null ? _b : selfPage, Math.max(pageCount, 1));
274
- const rows = pagination && pagination.total === void 0 ? data.slice((page - 1) * pageSize, page * pageSize) : data;
275
- const pageChangeHandler = (next) => {
276
- if (next === page) return;
277
- setSelfPage(next);
278
- if (pagination == null ? void 0 : pagination.onPageChange) pagination.onPageChange(next);
279
- };
280
- const tableStyle = {
281
- "--table-font-size": SCALES.font(1),
282
- "--table-width": SCALES.width(1, "100%"),
283
- "--table-height": SCALES.height(1, "auto"),
284
- "--table-padding-top": SCALES.pt(0),
285
- "--table-padding-right": SCALES.pr(0),
286
- "--table-padding-bottom": SCALES.pb(0),
287
- "--table-padding-left": SCALES.pl(0),
288
- "--table-margin-top": SCALES.mt(0),
289
- "--table-margin-right": SCALES.mr(0),
290
- "--table-margin-bottom": SCALES.mb(0),
291
- "--table-margin-left": SCALES.ml(0),
292
- ...style
293
- };
294
- return (
295
- // the context is typed for any row: each Table provides its own
296
- /* @__PURE__ */ jsxs2(
297
- TableContext.Provider,
298
- {
299
- value: contextValue,
300
- children: [
301
- /* @__PURE__ */ jsxs2(
302
- "table",
303
- {
304
- ref: tableRef,
305
- className: use_classes_default(Table_module_css_default.table, className),
306
- ...props,
307
- style: tableStyle,
308
- children: [
309
- /* @__PURE__ */ jsx4(TableHead_default, { columns, width }),
310
- /* @__PURE__ */ jsx4(
311
- TableBody_default,
312
- {
313
- data: rows,
314
- hover,
315
- emptyText,
316
- onRow,
317
- onCell,
318
- rowClassName
319
- }
320
- ),
321
- children
322
- ]
323
- }
324
- ),
325
- pageCount > 1 && /* @__PURE__ */ jsx4("div", { className: Table_module_css_default.footer, children: /* @__PURE__ */ jsx4(
326
- Pagination_default,
327
- {
328
- count: pageCount,
329
- page,
330
- onChange: pageChangeHandler
331
- }
332
- ) })
333
- ]
334
- }
335
- )
336
- );
337
- }
338
- TableComponent.displayName = "BolioUITable";
339
- TableComponent.Column = TableColumn_default;
340
- var Table = with_scale_default(
341
- React4.forwardRef(TableComponent)
342
- );
343
- Table.Column = TableColumn_default;
344
- var Table_default = Table;
345
-
346
- // core/Table/index.ts
347
- var Table_default2 = Table_default;
348
-
349
- export {
350
- Table_default2 as Table_default
351
- };