freemium-ui 1.0.114 → 1.0.115

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 (3) hide show
  1. package/lib/index.cjs.js +133 -99
  2. package/lib/index.esm.js +133 -99
  3. package/package.json +1 -1
package/lib/index.cjs.js CHANGED
@@ -2271,6 +2271,24 @@ const SvgWrapper = Ye.div `
2271
2271
  `;
2272
2272
  const Glyph = ({ glyph }) => {
2273
2273
  switch (glyph) {
2274
+ case 'more-vertical':
2275
+ return (React__default.createElement("g", { id: "Icons-\u2705", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
2276
+ React__default.createElement("g", { id: "Icons", transform: "translate(-414.000000, -1597.000000)", fill: "currentColor" },
2277
+ React__default.createElement("g", { id: "icon/more-vertical", transform: "translate(414.000000, 1597.000000)" },
2278
+ React__default.createElement("g", { id: "more-vertical", transform: "translate(0.000000, -1.000000)" },
2279
+ React__default.createElement("path", { d: "M2,4.09 C1.37217632,4.08998693 0.806367712,3.71125041 0.567054909,3.13082647 C0.327742105,2.55040253 0.462196703,1.88294264 0.907569444,1.44044327 C1.35294218,0.997943903 2.02125834,0.867812205 2.60012119,1.11087675 C3.17898404,1.35394129 3.55405048,1.92218939 3.55,2.55 C3.54450225,3.40213354 2.85215128,4.09001773 2,4.09 Z M2,17 C1.14395864,17 0.45,16.3060414 0.45,15.45 C0.45,14.5939586 1.14395864,13.9 2,13.9 C2.85604136,13.9 3.55,14.5939586 3.55,15.45 C3.55,16.3060414 2.85604136,17 2,17 Z M2,10.55 C1.14395864,10.55 0.45,9.85604136 0.45,9 C0.45,8.14395864 1.14395864,7.45 2,7.45 C2.85604136,7.45 3.55,8.14395864 3.55,9 C3.54454443,9.85377138 2.85377138,10.5445444 2,10.55 Z", id: "Combined-Shape" }))))));
2280
+ case 'expand':
2281
+ return (React__default.createElement("g", { id: "Icons-\u2705", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
2282
+ React__default.createElement("g", { id: "Icons", transform: "translate(-245.000000, -2125.000000)", fill: "currentColor" },
2283
+ React__default.createElement("g", { id: "icon/expand", transform: "translate(245.000000, 2125.000000)" },
2284
+ React__default.createElement("g", { id: "expand" },
2285
+ React__default.createElement("path", { d: "M11.3,0 C12.7911688,4.4408921e-16 14,1.20883118 14,2.7 L14,11.3 C14,12.0160845 13.7155365,12.7028401 13.2091883,13.2091883 C12.7028401,13.7155365 12.0160845,14 11.3,14 L2.7,14 C1.98391548,14 1.29715991,13.7155365 0.790811691,13.2091883 C0.284463469,12.7028401 -6.66133815e-16,12.0160845 0,11.3 L0,2.7 C2.22044605e-16,1.20883118 1.20883118,2.22044605e-16 2.7,0 L11.3,0 Z M1.4,11.3 C1.4,12.0179702 1.98202983,12.6 2.7,12.6 L3.41,12.6 L3.41,1.4 L2.7,1.4 C2.35521856,1.4 2.02455848,1.53696389 1.78076118,1.78076118 C1.53696389,2.02455848 1.4,2.35521856 1.4,2.7 L1.4,11.3 Z M12.6,11.3 L12.6,2.7 C12.6,2.35521856 12.4630361,2.02455848 12.2192388,1.78076118 C11.9754415,1.53696389 11.6447814,1.4 11.3,1.4 L4.81,1.4 L4.81,12.6 L11.3,12.6 C12.0179702,12.6 12.6,12.0179702 12.6,11.3 Z M10.1,4.69 C10.2337973,4.81993276 10.3092974,4.99849466 10.3092974,5.185 C10.3092974,5.37150534 10.2337973,5.55006724 10.1,5.68 L8.79,7 L10.1,8.33 C10.2369644,8.46025306 10.3145003,8.64098915 10.3145003,8.83 C10.3145003,9.01901085 10.2369644,9.19974694 10.1,9.33 C9.96913372,9.45822225 9.79321279,9.53002671 9.61,9.53 C9.42412994,9.52849533 9.24563326,9.45709666 9.11,9.33 L7.3,7.51 C7.16303562,7.37974694 7.08549974,7.19901085 7.08549974,7.01 C7.08549974,6.82098915 7.16303562,6.64025306 7.3,6.51 L9.1,4.69 C9.37679776,4.41544444 9.82320224,4.41544444 10.1,4.69 Z", id: "Combined-Shape" }))))));
2286
+ case 'collapse':
2287
+ return (React__default.createElement("g", { id: "Icons-\u2705", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
2288
+ React__default.createElement("g", { id: "Icons", transform: "translate(-245.000000, -2389.000000)", fill: "currentColor" },
2289
+ React__default.createElement("g", { id: "icon/collapse", transform: "translate(245.000000, 2389.000000)" },
2290
+ React__default.createElement("g", { id: "collapse" },
2291
+ React__default.createElement("path", { d: "M11.3,0 C12.7911688,4.4408921e-16 14,1.20883118 14,2.7 L14,11.3 C14,12.0160845 13.7155365,12.7028401 13.2091883,13.2091883 C12.7028401,13.7155365 12.0160845,14 11.3,14 L2.7,14 C1.98391548,14 1.29715991,13.7155365 0.790811691,13.2091883 C0.284463469,12.7028401 -6.66133815e-16,12.0160845 0,11.3 L0,2.7 C2.22044605e-16,1.20883118 1.20883118,2.22044605e-16 2.7,0 L11.3,0 Z M1.4,11.3 C1.4,12.0179702 1.98202983,12.6 2.7,12.6 L9.19,12.6 L9.19,1.4 L2.7,1.4 C2.35521856,1.4 2.02455848,1.53696389 1.78076118,1.78076118 C1.53696389,2.02455848 1.4,2.35521856 1.4,2.7 L1.4,11.3 Z M12.6,11.3 L12.6,2.7 C12.6,2.35521856 12.4630361,2.02455848 12.2192388,1.78076118 C11.9754415,1.53696389 11.6447814,1.4 11.3,1.4 L10.59,1.4 L10.59,12.6 L11.3,12.6 C12.0179702,12.6 12.6,12.0179702 12.6,11.3 Z M4.89,4.69 L6.7,6.5 C6.96923553,6.77896751 6.96923553,7.22103249 6.7,7.5 L4.89,9.32 C4.75436674,9.44709666 4.57587006,9.51849533 4.39,9.52 C4.20678721,9.52002671 4.03086628,9.44822225 3.9,9.32 C3.76303562,9.18974694 3.68549974,9.00901085 3.68549974,8.82 C3.68549974,8.63098915 3.76303562,8.45025306 3.9,8.32 L5.21,7 L3.89,5.69 C3.75303562,5.55974694 3.67549974,5.37901085 3.67549974,5.19 C3.67549974,5.00098915 3.75303562,4.82025306 3.89,4.69 C4.16679776,4.41544444 4.61320224,4.41544444 4.89,4.69 Z", id: "Combined-Shape" }))))));
2274
2292
  case 'close-big':
2275
2293
  return (React__default.createElement("g", { id: "IconsBig-\u2705", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
2276
2294
  React__default.createElement("g", { id: "IconsBig", transform: "translate(-573.000000, -2257.000000)", fill: "currentColor" },
@@ -18458,36 +18476,10 @@ const Cell = Ye.div `
18458
18476
  word-break: break-all;
18459
18477
  `;
18460
18478
 
18461
- // const defaultInitialState = {
18462
- // pageIndex: 0,
18463
- // columnOrder: [],
18464
- // hiddenColumns: [],
18465
- // selectedRowIds: {},
18466
- // pageSize: 5,
18467
- // sortBy: [],
18468
- // }
18469
18479
  const RestTable = (props) => {
18470
- const { columns = [], data = [], stickyHeader = true } = props;
18471
- const [headerPosition, setHeaderPosition] = React__default.useState(0);
18472
- const [filterHeight, setFilterHeight] = React__default.useState(0);
18473
- const processFilterHeight = () => {
18474
- const element = document.getElementById('rest-table-filter');
18475
- const height = element && element.parentElement && element.parentElement.offsetHeight;
18476
- const top = document
18477
- .getElementsByTagName('thead')[0]
18478
- .getBoundingClientRect().top;
18479
- setFilterHeight(height || 0);
18480
- setHeaderPosition(top || 0);
18481
- };
18482
- React__default.useEffect(() => {
18483
- processFilterHeight();
18484
- window.addEventListener('resize', () => {
18485
- processFilterHeight();
18486
- });
18487
- return () => {
18488
- window.removeEventListener('resize', () => { });
18489
- };
18490
- }, []);
18480
+ const { columns = [], data = [], count = 0, offset = 0, limit = 0, next = false, previous = false, showPagination = true, showActions = true, showFilters = true, showOptions = true, rowMenuOptions = [], onRowSelect, onRowClick, onPrevious, onSelectAll, onNext, onMenuOptionSelect, showTableActions = true, } = props;
18481
+ const [showFilterPane, toggleFilterPane] = React__default.useState(showFilters);
18482
+ const [anchorEl, setAnchorEl] = React__default.useState(null);
18491
18483
  const tableInstance = reactTable.useTable({
18492
18484
  columns,
18493
18485
  data,
@@ -18497,94 +18489,119 @@ const RestTable = (props) => {
18497
18489
  id: 'selection',
18498
18490
  disableResizing: true,
18499
18491
  width: 50,
18500
- Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, }) => (React__default.createElement("input", Object.assign({ type: "checkbox" }, getToggleAllRowsSelectedProps(), { onChange: (e) => {
18501
- toggleAllRowsSelected(e.target.checked);
18492
+ Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, }) => showTableActions ? (React__default.createElement("div", null)) : (React__default.createElement(Checkbox, Object.assign({ id: "selectAll", name: "selectAll" }, getToggleAllRowsSelectedProps(), { onChange: (e, v) => {
18493
+ if (onSelectAll)
18494
+ onSelectAll(v);
18495
+ toggleAllRowsSelected(v);
18502
18496
  } }))),
18503
- Cell: ({ row }) => (React__default.createElement("input", Object.assign({ type: "checkbox" }, row.getToggleRowSelectedProps(), { onChange: (e) => {
18504
- row.toggleRowSelected(e.target.checked);
18497
+ Cell: ({ row, column }) => (React__default.createElement(Checkbox, Object.assign({ id: "selectRow", name: "selectRow" }, row.getToggleRowSelectedProps(), { onChange: (e, v) => {
18498
+ row.toggleRowSelected(v);
18499
+ if (onRowSelect)
18500
+ onRowSelect(row, column, v);
18505
18501
  } }))),
18506
18502
  },
18507
18503
  ...c,
18508
18504
  ]);
18509
18505
  });
18510
- // console.log('tableInstance', tableInstance)
18511
- const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance;
18506
+ const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, getToggleAllRowsSelectedProps, } = tableInstance;
18512
18507
  return (React__default.createElement(RestTableWrapper, null,
18513
- React__default.createElement(RestTableHeader, null, "Select"),
18514
- React__default.createElement(RestTableContent, null,
18515
- React__default.createElement(TableWrapper, null,
18508
+ showActions && (React__default.createElement(TableActions, { className: "table-actions" },
18509
+ React__default.createElement("div", { className: "action" },
18510
+ React__default.createElement(Checkbox, Object.assign({ id: "selectAll", name: "selectAll" }, getToggleAllRowsSelectedProps()), "Select All")),
18511
+ React__default.createElement("div", { className: "pagination-actions" },
18512
+ showPagination && (React__default.createElement(React__default.Fragment, null,
18513
+ React__default.createElement("div", { className: "pagination-text" },
18514
+ offset + 1,
18515
+ " - ",
18516
+ offset + limit,
18517
+ " of ",
18518
+ count),
18519
+ React__default.createElement(Button, { type: "secondary", disabled: !previous, onClick: () => onPrevious && onPrevious(previous) },
18520
+ React__default.createElement(Icons, { glyph: "chevron-left", size: 12, viewBox: "0 0 6 8" })),
18521
+ React__default.createElement(Button, { type: "secondary", disabled: !next, onClick: () => onNext && onNext(next) },
18522
+ React__default.createElement(Icons, { glyph: "chevron-right", size: 12, viewBox: "0 0 6 8" })))),
18523
+ showFilters && (React__default.createElement(Button, { type: "secondary", className: "filter-toggle", onClick: () => toggleFilterPane(!showFilterPane) },
18524
+ React__default.createElement(Icons, { glyph: showFilterPane ? 'collapse' : 'expand', size: 12, viewBox: "0 0 14 14" })))))),
18525
+ ' ',
18526
+ React__default.createElement(TableContent, { className: "table-content" },
18527
+ React__default.createElement(TableWrapper, { className: "table-wrapper" },
18516
18528
  React__default.createElement(Table$1, Object.assign({}, getTableProps()),
18517
- React__default.createElement(TableHead$1, { className: `${stickyHeader ? 'stickyHeader' : ''}`.trim(), style: { top: headerPosition } }, headerGroups.map((headerGroup) => {
18529
+ React__default.createElement(TableHead$1, null, headerGroups.map((headerGroup) => {
18518
18530
  const { getHeaderGroupProps, headers } = headerGroup;
18519
- // console.log('headerGroup', headerGroup)
18520
- // console.log('getHeaderGroupProps', getHeaderGroupProps())
18521
- return (React__default.createElement(TableRow$1, Object.assign({}, getHeaderGroupProps(), { className: "header-row" }), headers.map((header) => {
18522
- const { getHeaderProps, render } = header;
18523
- // console.log('header', header)
18524
- // console.log('getHeaderProps', getHeaderProps())
18525
- return (React__default.createElement(TableHeader, Object.assign({}, getHeaderProps()), render('Header')));
18526
- })));
18531
+ return (React__default.createElement(TableRow$1, Object.assign({}, getHeaderGroupProps(), { className: "header-row" }),
18532
+ headers.map((header) => {
18533
+ const { getHeaderProps, render } = header;
18534
+ return (React__default.createElement(TableHeader, Object.assign({}, getHeaderProps()), render('Header')));
18535
+ }),
18536
+ showOptions && React__default.createElement(TableHeader, null)));
18527
18537
  })),
18528
18538
  React__default.createElement(TableBody$1, Object.assign({}, getTableBodyProps()), rows.map((row) => {
18529
18539
  prepareRow(row);
18530
18540
  const { getRowProps, cells } = row;
18531
- // console.log('row', row)
18532
- // console.log('getRowProps', getRowProps())
18533
- return (React__default.createElement(TableRow$1, Object.assign({}, getRowProps(), { className: row.isSelected ? 'selected' : '' }), cells.map((cell) => {
18534
- const { getCellProps, render } = cell;
18535
- // console.log('cell', cell)
18536
- // console.log('getCellProps', getCellProps())
18537
- return (React__default.createElement(TableData, Object.assign({}, getCellProps()), render('Cell')));
18538
- })));
18541
+ return (React__default.createElement(TableRow$1, Object.assign({}, getRowProps(), { className: row.isSelected ? 'selected' : '' }),
18542
+ cells.map((cell) => {
18543
+ const { getCellProps, render } = cell;
18544
+ return (React__default.createElement(TableData, Object.assign({}, getCellProps(), { onClick: () => {
18545
+ if (cell.column.id === 'selection' || !onRowClick)
18546
+ return;
18547
+ onRowClick(cell.row, cell.column);
18548
+ } }), render('Cell')));
18549
+ }),
18550
+ showOptions &&
18551
+ rowMenuOptions &&
18552
+ rowMenuOptions.length > 0 && (React__default.createElement(TableData, null,
18553
+ React__default.createElement(MoreOption, { "aria-describedby": `row-popover-${row.id}`, onClick: (e) => setAnchorEl(e.currentTarget) },
18554
+ React__default.createElement(Icons, { glyph: "more-vertical", size: 12, viewBox: "0 0 4 16" })),
18555
+ React__default.createElement(Popover, { id: `row-popover-${row.id}`, anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: {
18556
+ vertical: 'bottom',
18557
+ horizontal: 'left',
18558
+ }, transformOrigin: {
18559
+ vertical: 'top',
18560
+ horizontal: 'right',
18561
+ } },
18562
+ React__default.createElement(Menu, { options: rowMenuOptions, onSelect: (opt) => {
18563
+ if (onMenuOptionSelect)
18564
+ onMenuOptionSelect(opt.id, row);
18565
+ setAnchorEl(null);
18566
+ }, closeMenuCallback: () => setAnchorEl(null) }))))));
18539
18567
  })))),
18540
- React__default.createElement(Filters, { id: "rest-table-filter", style: { height: filterHeight - 56 } },
18541
- React__default.createElement("div", { className: "title" }, "Filters")))));
18568
+ showFilters && showFilterPane && (React__default.createElement(TableFilters, { className: "table-filters" })))));
18542
18569
  };
18543
- const RestTableWrapper = Ye.div `
18544
- /* position: relative; */
18545
- height: 100%;
18570
+ const TableWrapper = Ye.div `
18571
+ flex: 1;
18572
+ overflow: auto;
18546
18573
  `;
18547
- const Filters = Ye.div `
18548
- width: 310px;
18549
- border-left: 1px solid #cfd7df;
18550
- /* overflow-y: auto; */
18551
- position: fixed;
18552
- right: 0;
18553
- margin-top: 56px;
18574
+ const RestTableWrapper = Ye.div `
18554
18575
  padding: 10px;
18555
- background-color: #f5f7f9;
18556
- .title {
18557
- color: #183247;
18558
- font-size: 12px;
18559
- text-transform: uppercase;
18560
- font-weight: 500;
18561
- letter-spacing: 0.2px;
18562
- padding-bottom: 10px;
18563
- }
18564
- `;
18565
- const RestTableContent = Ye.div `
18566
- /* position: absolute; */
18567
- /* top: 56px; */
18568
- /* padding-top: 56px; */
18569
- height: 100%;
18570
- display: flex;
18571
18576
  `;
18572
- const RestTableHeader = Ye.div `
18573
- position: fixed;
18574
- line-height: 56px;
18577
+ const TableActions = Ye.div `
18575
18578
  padding: 0 16px;
18576
18579
  width: 100%;
18577
18580
  background-color: #f5f7f9;
18578
18581
  height: 56px;
18582
+ margin-bottom: 10px;
18583
+ display: flex;
18584
+ justify-content: space-between;
18585
+ align-items: center;
18579
18586
  border-bottom: 1px #cfd7df solid;
18580
18587
  box-shadow: 0 2px 4px 0 rgb(24 50 71 / 8%);
18581
- `;
18582
- const TableWrapper = Ye.div `
18583
- padding: 10px;
18584
- /* background-color: #ebeff3; */
18585
- width: calc(100% - 310px);
18586
- margin-top: 56px;
18587
- /* flex: 1; */
18588
+ div.pagination-actions {
18589
+ display: flex;
18590
+ align-items: center;
18591
+ div.pagination-text {
18592
+ color: #6f7c87;
18593
+ font-size: 14px;
18594
+ white-space: nowrap;
18595
+ margin-right: 10px;
18596
+ }
18597
+ display: flex;
18598
+ button {
18599
+ padding: 4px 12px 5px;
18600
+ }
18601
+ button.filter-toggle {
18602
+ margin-left: 8px;
18603
+ }
18604
+ }
18588
18605
  `;
18589
18606
  const Table$1 = Ye.table `
18590
18607
  width: 100%;
@@ -18604,12 +18621,6 @@ const TableRow$1 = Ye.tr `
18604
18621
  `;
18605
18622
  const TableHead$1 = Ye.thead `
18606
18623
  background: #f5f7f9;
18607
- &.stickyHeader {
18608
- th {
18609
- }
18610
- position: sticky;
18611
- /* top: 0; */
18612
- }
18613
18624
  `;
18614
18625
  const TableBody$1 = Ye.tbody ``;
18615
18626
  const TableHeader = Ye.th `
@@ -18618,6 +18629,29 @@ const TableHeader = Ye.th `
18618
18629
  const TableData = Ye.td `
18619
18630
  border-bottom: 1px solid #ebeff3;
18620
18631
  padding: 12px 8px;
18632
+ `;
18633
+ const TableContent = Ye.div `
18634
+ width: 100%;
18635
+ display: flex;
18636
+ `;
18637
+ const TableFilters = Ye.div `
18638
+ width: 310px;
18639
+ border-left: 1px solid #cfd7df;
18640
+ right: 0;
18641
+ padding: 10px;
18642
+ background-color: #f5f7f9;
18643
+ .title {
18644
+ color: #183247;
18645
+ font-size: 12px;
18646
+ text-transform: uppercase;
18647
+ font-weight: 500;
18648
+ letter-spacing: 0.2px;
18649
+ padding-bottom: 10px;
18650
+ }
18651
+ `;
18652
+ const MoreOption = Ye.div `
18653
+ padding: 10px;
18654
+ cursor: pointer;
18621
18655
  `;
18622
18656
 
18623
18657
  const Tabs = (props) => {
package/lib/index.esm.js CHANGED
@@ -2262,6 +2262,24 @@ const SvgWrapper = Ye.div `
2262
2262
  `;
2263
2263
  const Glyph = ({ glyph }) => {
2264
2264
  switch (glyph) {
2265
+ case 'more-vertical':
2266
+ return (React__default.createElement("g", { id: "Icons-\u2705", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
2267
+ React__default.createElement("g", { id: "Icons", transform: "translate(-414.000000, -1597.000000)", fill: "currentColor" },
2268
+ React__default.createElement("g", { id: "icon/more-vertical", transform: "translate(414.000000, 1597.000000)" },
2269
+ React__default.createElement("g", { id: "more-vertical", transform: "translate(0.000000, -1.000000)" },
2270
+ React__default.createElement("path", { d: "M2,4.09 C1.37217632,4.08998693 0.806367712,3.71125041 0.567054909,3.13082647 C0.327742105,2.55040253 0.462196703,1.88294264 0.907569444,1.44044327 C1.35294218,0.997943903 2.02125834,0.867812205 2.60012119,1.11087675 C3.17898404,1.35394129 3.55405048,1.92218939 3.55,2.55 C3.54450225,3.40213354 2.85215128,4.09001773 2,4.09 Z M2,17 C1.14395864,17 0.45,16.3060414 0.45,15.45 C0.45,14.5939586 1.14395864,13.9 2,13.9 C2.85604136,13.9 3.55,14.5939586 3.55,15.45 C3.55,16.3060414 2.85604136,17 2,17 Z M2,10.55 C1.14395864,10.55 0.45,9.85604136 0.45,9 C0.45,8.14395864 1.14395864,7.45 2,7.45 C2.85604136,7.45 3.55,8.14395864 3.55,9 C3.54454443,9.85377138 2.85377138,10.5445444 2,10.55 Z", id: "Combined-Shape" }))))));
2271
+ case 'expand':
2272
+ return (React__default.createElement("g", { id: "Icons-\u2705", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
2273
+ React__default.createElement("g", { id: "Icons", transform: "translate(-245.000000, -2125.000000)", fill: "currentColor" },
2274
+ React__default.createElement("g", { id: "icon/expand", transform: "translate(245.000000, 2125.000000)" },
2275
+ React__default.createElement("g", { id: "expand" },
2276
+ React__default.createElement("path", { d: "M11.3,0 C12.7911688,4.4408921e-16 14,1.20883118 14,2.7 L14,11.3 C14,12.0160845 13.7155365,12.7028401 13.2091883,13.2091883 C12.7028401,13.7155365 12.0160845,14 11.3,14 L2.7,14 C1.98391548,14 1.29715991,13.7155365 0.790811691,13.2091883 C0.284463469,12.7028401 -6.66133815e-16,12.0160845 0,11.3 L0,2.7 C2.22044605e-16,1.20883118 1.20883118,2.22044605e-16 2.7,0 L11.3,0 Z M1.4,11.3 C1.4,12.0179702 1.98202983,12.6 2.7,12.6 L3.41,12.6 L3.41,1.4 L2.7,1.4 C2.35521856,1.4 2.02455848,1.53696389 1.78076118,1.78076118 C1.53696389,2.02455848 1.4,2.35521856 1.4,2.7 L1.4,11.3 Z M12.6,11.3 L12.6,2.7 C12.6,2.35521856 12.4630361,2.02455848 12.2192388,1.78076118 C11.9754415,1.53696389 11.6447814,1.4 11.3,1.4 L4.81,1.4 L4.81,12.6 L11.3,12.6 C12.0179702,12.6 12.6,12.0179702 12.6,11.3 Z M10.1,4.69 C10.2337973,4.81993276 10.3092974,4.99849466 10.3092974,5.185 C10.3092974,5.37150534 10.2337973,5.55006724 10.1,5.68 L8.79,7 L10.1,8.33 C10.2369644,8.46025306 10.3145003,8.64098915 10.3145003,8.83 C10.3145003,9.01901085 10.2369644,9.19974694 10.1,9.33 C9.96913372,9.45822225 9.79321279,9.53002671 9.61,9.53 C9.42412994,9.52849533 9.24563326,9.45709666 9.11,9.33 L7.3,7.51 C7.16303562,7.37974694 7.08549974,7.19901085 7.08549974,7.01 C7.08549974,6.82098915 7.16303562,6.64025306 7.3,6.51 L9.1,4.69 C9.37679776,4.41544444 9.82320224,4.41544444 10.1,4.69 Z", id: "Combined-Shape" }))))));
2277
+ case 'collapse':
2278
+ return (React__default.createElement("g", { id: "Icons-\u2705", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
2279
+ React__default.createElement("g", { id: "Icons", transform: "translate(-245.000000, -2389.000000)", fill: "currentColor" },
2280
+ React__default.createElement("g", { id: "icon/collapse", transform: "translate(245.000000, 2389.000000)" },
2281
+ React__default.createElement("g", { id: "collapse" },
2282
+ React__default.createElement("path", { d: "M11.3,0 C12.7911688,4.4408921e-16 14,1.20883118 14,2.7 L14,11.3 C14,12.0160845 13.7155365,12.7028401 13.2091883,13.2091883 C12.7028401,13.7155365 12.0160845,14 11.3,14 L2.7,14 C1.98391548,14 1.29715991,13.7155365 0.790811691,13.2091883 C0.284463469,12.7028401 -6.66133815e-16,12.0160845 0,11.3 L0,2.7 C2.22044605e-16,1.20883118 1.20883118,2.22044605e-16 2.7,0 L11.3,0 Z M1.4,11.3 C1.4,12.0179702 1.98202983,12.6 2.7,12.6 L9.19,12.6 L9.19,1.4 L2.7,1.4 C2.35521856,1.4 2.02455848,1.53696389 1.78076118,1.78076118 C1.53696389,2.02455848 1.4,2.35521856 1.4,2.7 L1.4,11.3 Z M12.6,11.3 L12.6,2.7 C12.6,2.35521856 12.4630361,2.02455848 12.2192388,1.78076118 C11.9754415,1.53696389 11.6447814,1.4 11.3,1.4 L10.59,1.4 L10.59,12.6 L11.3,12.6 C12.0179702,12.6 12.6,12.0179702 12.6,11.3 Z M4.89,4.69 L6.7,6.5 C6.96923553,6.77896751 6.96923553,7.22103249 6.7,7.5 L4.89,9.32 C4.75436674,9.44709666 4.57587006,9.51849533 4.39,9.52 C4.20678721,9.52002671 4.03086628,9.44822225 3.9,9.32 C3.76303562,9.18974694 3.68549974,9.00901085 3.68549974,8.82 C3.68549974,8.63098915 3.76303562,8.45025306 3.9,8.32 L5.21,7 L3.89,5.69 C3.75303562,5.55974694 3.67549974,5.37901085 3.67549974,5.19 C3.67549974,5.00098915 3.75303562,4.82025306 3.89,4.69 C4.16679776,4.41544444 4.61320224,4.41544444 4.89,4.69 Z", id: "Combined-Shape" }))))));
2265
2283
  case 'close-big':
2266
2284
  return (React__default.createElement("g", { id: "IconsBig-\u2705", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
2267
2285
  React__default.createElement("g", { id: "IconsBig", transform: "translate(-573.000000, -2257.000000)", fill: "currentColor" },
@@ -18449,36 +18467,10 @@ const Cell = Ye.div `
18449
18467
  word-break: break-all;
18450
18468
  `;
18451
18469
 
18452
- // const defaultInitialState = {
18453
- // pageIndex: 0,
18454
- // columnOrder: [],
18455
- // hiddenColumns: [],
18456
- // selectedRowIds: {},
18457
- // pageSize: 5,
18458
- // sortBy: [],
18459
- // }
18460
18470
  const RestTable = (props) => {
18461
- const { columns = [], data = [], stickyHeader = true } = props;
18462
- const [headerPosition, setHeaderPosition] = React__default.useState(0);
18463
- const [filterHeight, setFilterHeight] = React__default.useState(0);
18464
- const processFilterHeight = () => {
18465
- const element = document.getElementById('rest-table-filter');
18466
- const height = element && element.parentElement && element.parentElement.offsetHeight;
18467
- const top = document
18468
- .getElementsByTagName('thead')[0]
18469
- .getBoundingClientRect().top;
18470
- setFilterHeight(height || 0);
18471
- setHeaderPosition(top || 0);
18472
- };
18473
- React__default.useEffect(() => {
18474
- processFilterHeight();
18475
- window.addEventListener('resize', () => {
18476
- processFilterHeight();
18477
- });
18478
- return () => {
18479
- window.removeEventListener('resize', () => { });
18480
- };
18481
- }, []);
18471
+ const { columns = [], data = [], count = 0, offset = 0, limit = 0, next = false, previous = false, showPagination = true, showActions = true, showFilters = true, showOptions = true, rowMenuOptions = [], onRowSelect, onRowClick, onPrevious, onSelectAll, onNext, onMenuOptionSelect, showTableActions = true, } = props;
18472
+ const [showFilterPane, toggleFilterPane] = React__default.useState(showFilters);
18473
+ const [anchorEl, setAnchorEl] = React__default.useState(null);
18482
18474
  const tableInstance = useTable({
18483
18475
  columns,
18484
18476
  data,
@@ -18488,94 +18480,119 @@ const RestTable = (props) => {
18488
18480
  id: 'selection',
18489
18481
  disableResizing: true,
18490
18482
  width: 50,
18491
- Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, }) => (React__default.createElement("input", Object.assign({ type: "checkbox" }, getToggleAllRowsSelectedProps(), { onChange: (e) => {
18492
- toggleAllRowsSelected(e.target.checked);
18483
+ Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, }) => showTableActions ? (React__default.createElement("div", null)) : (React__default.createElement(Checkbox, Object.assign({ id: "selectAll", name: "selectAll" }, getToggleAllRowsSelectedProps(), { onChange: (e, v) => {
18484
+ if (onSelectAll)
18485
+ onSelectAll(v);
18486
+ toggleAllRowsSelected(v);
18493
18487
  } }))),
18494
- Cell: ({ row }) => (React__default.createElement("input", Object.assign({ type: "checkbox" }, row.getToggleRowSelectedProps(), { onChange: (e) => {
18495
- row.toggleRowSelected(e.target.checked);
18488
+ Cell: ({ row, column }) => (React__default.createElement(Checkbox, Object.assign({ id: "selectRow", name: "selectRow" }, row.getToggleRowSelectedProps(), { onChange: (e, v) => {
18489
+ row.toggleRowSelected(v);
18490
+ if (onRowSelect)
18491
+ onRowSelect(row, column, v);
18496
18492
  } }))),
18497
18493
  },
18498
18494
  ...c,
18499
18495
  ]);
18500
18496
  });
18501
- // console.log('tableInstance', tableInstance)
18502
- const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance;
18497
+ const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, getToggleAllRowsSelectedProps, } = tableInstance;
18503
18498
  return (React__default.createElement(RestTableWrapper, null,
18504
- React__default.createElement(RestTableHeader, null, "Select"),
18505
- React__default.createElement(RestTableContent, null,
18506
- React__default.createElement(TableWrapper, null,
18499
+ showActions && (React__default.createElement(TableActions, { className: "table-actions" },
18500
+ React__default.createElement("div", { className: "action" },
18501
+ React__default.createElement(Checkbox, Object.assign({ id: "selectAll", name: "selectAll" }, getToggleAllRowsSelectedProps()), "Select All")),
18502
+ React__default.createElement("div", { className: "pagination-actions" },
18503
+ showPagination && (React__default.createElement(React__default.Fragment, null,
18504
+ React__default.createElement("div", { className: "pagination-text" },
18505
+ offset + 1,
18506
+ " - ",
18507
+ offset + limit,
18508
+ " of ",
18509
+ count),
18510
+ React__default.createElement(Button, { type: "secondary", disabled: !previous, onClick: () => onPrevious && onPrevious(previous) },
18511
+ React__default.createElement(Icons, { glyph: "chevron-left", size: 12, viewBox: "0 0 6 8" })),
18512
+ React__default.createElement(Button, { type: "secondary", disabled: !next, onClick: () => onNext && onNext(next) },
18513
+ React__default.createElement(Icons, { glyph: "chevron-right", size: 12, viewBox: "0 0 6 8" })))),
18514
+ showFilters && (React__default.createElement(Button, { type: "secondary", className: "filter-toggle", onClick: () => toggleFilterPane(!showFilterPane) },
18515
+ React__default.createElement(Icons, { glyph: showFilterPane ? 'collapse' : 'expand', size: 12, viewBox: "0 0 14 14" })))))),
18516
+ ' ',
18517
+ React__default.createElement(TableContent, { className: "table-content" },
18518
+ React__default.createElement(TableWrapper, { className: "table-wrapper" },
18507
18519
  React__default.createElement(Table$1, Object.assign({}, getTableProps()),
18508
- React__default.createElement(TableHead$1, { className: `${stickyHeader ? 'stickyHeader' : ''}`.trim(), style: { top: headerPosition } }, headerGroups.map((headerGroup) => {
18520
+ React__default.createElement(TableHead$1, null, headerGroups.map((headerGroup) => {
18509
18521
  const { getHeaderGroupProps, headers } = headerGroup;
18510
- // console.log('headerGroup', headerGroup)
18511
- // console.log('getHeaderGroupProps', getHeaderGroupProps())
18512
- return (React__default.createElement(TableRow$1, Object.assign({}, getHeaderGroupProps(), { className: "header-row" }), headers.map((header) => {
18513
- const { getHeaderProps, render } = header;
18514
- // console.log('header', header)
18515
- // console.log('getHeaderProps', getHeaderProps())
18516
- return (React__default.createElement(TableHeader, Object.assign({}, getHeaderProps()), render('Header')));
18517
- })));
18522
+ return (React__default.createElement(TableRow$1, Object.assign({}, getHeaderGroupProps(), { className: "header-row" }),
18523
+ headers.map((header) => {
18524
+ const { getHeaderProps, render } = header;
18525
+ return (React__default.createElement(TableHeader, Object.assign({}, getHeaderProps()), render('Header')));
18526
+ }),
18527
+ showOptions && React__default.createElement(TableHeader, null)));
18518
18528
  })),
18519
18529
  React__default.createElement(TableBody$1, Object.assign({}, getTableBodyProps()), rows.map((row) => {
18520
18530
  prepareRow(row);
18521
18531
  const { getRowProps, cells } = row;
18522
- // console.log('row', row)
18523
- // console.log('getRowProps', getRowProps())
18524
- return (React__default.createElement(TableRow$1, Object.assign({}, getRowProps(), { className: row.isSelected ? 'selected' : '' }), cells.map((cell) => {
18525
- const { getCellProps, render } = cell;
18526
- // console.log('cell', cell)
18527
- // console.log('getCellProps', getCellProps())
18528
- return (React__default.createElement(TableData, Object.assign({}, getCellProps()), render('Cell')));
18529
- })));
18532
+ return (React__default.createElement(TableRow$1, Object.assign({}, getRowProps(), { className: row.isSelected ? 'selected' : '' }),
18533
+ cells.map((cell) => {
18534
+ const { getCellProps, render } = cell;
18535
+ return (React__default.createElement(TableData, Object.assign({}, getCellProps(), { onClick: () => {
18536
+ if (cell.column.id === 'selection' || !onRowClick)
18537
+ return;
18538
+ onRowClick(cell.row, cell.column);
18539
+ } }), render('Cell')));
18540
+ }),
18541
+ showOptions &&
18542
+ rowMenuOptions &&
18543
+ rowMenuOptions.length > 0 && (React__default.createElement(TableData, null,
18544
+ React__default.createElement(MoreOption, { "aria-describedby": `row-popover-${row.id}`, onClick: (e) => setAnchorEl(e.currentTarget) },
18545
+ React__default.createElement(Icons, { glyph: "more-vertical", size: 12, viewBox: "0 0 4 16" })),
18546
+ React__default.createElement(Popover, { id: `row-popover-${row.id}`, anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: {
18547
+ vertical: 'bottom',
18548
+ horizontal: 'left',
18549
+ }, transformOrigin: {
18550
+ vertical: 'top',
18551
+ horizontal: 'right',
18552
+ } },
18553
+ React__default.createElement(Menu, { options: rowMenuOptions, onSelect: (opt) => {
18554
+ if (onMenuOptionSelect)
18555
+ onMenuOptionSelect(opt.id, row);
18556
+ setAnchorEl(null);
18557
+ }, closeMenuCallback: () => setAnchorEl(null) }))))));
18530
18558
  })))),
18531
- React__default.createElement(Filters, { id: "rest-table-filter", style: { height: filterHeight - 56 } },
18532
- React__default.createElement("div", { className: "title" }, "Filters")))));
18559
+ showFilters && showFilterPane && (React__default.createElement(TableFilters, { className: "table-filters" })))));
18533
18560
  };
18534
- const RestTableWrapper = Ye.div `
18535
- /* position: relative; */
18536
- height: 100%;
18561
+ const TableWrapper = Ye.div `
18562
+ flex: 1;
18563
+ overflow: auto;
18537
18564
  `;
18538
- const Filters = Ye.div `
18539
- width: 310px;
18540
- border-left: 1px solid #cfd7df;
18541
- /* overflow-y: auto; */
18542
- position: fixed;
18543
- right: 0;
18544
- margin-top: 56px;
18565
+ const RestTableWrapper = Ye.div `
18545
18566
  padding: 10px;
18546
- background-color: #f5f7f9;
18547
- .title {
18548
- color: #183247;
18549
- font-size: 12px;
18550
- text-transform: uppercase;
18551
- font-weight: 500;
18552
- letter-spacing: 0.2px;
18553
- padding-bottom: 10px;
18554
- }
18555
- `;
18556
- const RestTableContent = Ye.div `
18557
- /* position: absolute; */
18558
- /* top: 56px; */
18559
- /* padding-top: 56px; */
18560
- height: 100%;
18561
- display: flex;
18562
18567
  `;
18563
- const RestTableHeader = Ye.div `
18564
- position: fixed;
18565
- line-height: 56px;
18568
+ const TableActions = Ye.div `
18566
18569
  padding: 0 16px;
18567
18570
  width: 100%;
18568
18571
  background-color: #f5f7f9;
18569
18572
  height: 56px;
18573
+ margin-bottom: 10px;
18574
+ display: flex;
18575
+ justify-content: space-between;
18576
+ align-items: center;
18570
18577
  border-bottom: 1px #cfd7df solid;
18571
18578
  box-shadow: 0 2px 4px 0 rgb(24 50 71 / 8%);
18572
- `;
18573
- const TableWrapper = Ye.div `
18574
- padding: 10px;
18575
- /* background-color: #ebeff3; */
18576
- width: calc(100% - 310px);
18577
- margin-top: 56px;
18578
- /* flex: 1; */
18579
+ div.pagination-actions {
18580
+ display: flex;
18581
+ align-items: center;
18582
+ div.pagination-text {
18583
+ color: #6f7c87;
18584
+ font-size: 14px;
18585
+ white-space: nowrap;
18586
+ margin-right: 10px;
18587
+ }
18588
+ display: flex;
18589
+ button {
18590
+ padding: 4px 12px 5px;
18591
+ }
18592
+ button.filter-toggle {
18593
+ margin-left: 8px;
18594
+ }
18595
+ }
18579
18596
  `;
18580
18597
  const Table$1 = Ye.table `
18581
18598
  width: 100%;
@@ -18595,12 +18612,6 @@ const TableRow$1 = Ye.tr `
18595
18612
  `;
18596
18613
  const TableHead$1 = Ye.thead `
18597
18614
  background: #f5f7f9;
18598
- &.stickyHeader {
18599
- th {
18600
- }
18601
- position: sticky;
18602
- /* top: 0; */
18603
- }
18604
18615
  `;
18605
18616
  const TableBody$1 = Ye.tbody ``;
18606
18617
  const TableHeader = Ye.th `
@@ -18609,6 +18620,29 @@ const TableHeader = Ye.th `
18609
18620
  const TableData = Ye.td `
18610
18621
  border-bottom: 1px solid #ebeff3;
18611
18622
  padding: 12px 8px;
18623
+ `;
18624
+ const TableContent = Ye.div `
18625
+ width: 100%;
18626
+ display: flex;
18627
+ `;
18628
+ const TableFilters = Ye.div `
18629
+ width: 310px;
18630
+ border-left: 1px solid #cfd7df;
18631
+ right: 0;
18632
+ padding: 10px;
18633
+ background-color: #f5f7f9;
18634
+ .title {
18635
+ color: #183247;
18636
+ font-size: 12px;
18637
+ text-transform: uppercase;
18638
+ font-weight: 500;
18639
+ letter-spacing: 0.2px;
18640
+ padding-bottom: 10px;
18641
+ }
18642
+ `;
18643
+ const MoreOption = Ye.div `
18644
+ padding: 10px;
18645
+ cursor: pointer;
18612
18646
  `;
18613
18647
 
18614
18648
  const Tabs = (props) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "freemium-ui",
3
- "version": "1.0.114",
3
+ "version": "1.0.115",
4
4
  "description": "React Ui Components for Freemium Apps",
5
5
  "main": "lib/index.cjs.js",
6
6
  "module": "lib/index.esm.js",