@helpdice/ui 1.6.3 → 1.6.4

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 (11) hide show
  1. package/dist/Placeholder/index.js +2 -2
  2. package/dist/badge/badge.d.ts +1 -1
  3. package/dist/badge/index.js +12 -12
  4. package/dist/index.js +24 -17
  5. package/dist/table/index.js +12 -5
  6. package/esm/Placeholder/empty.js +2 -2
  7. package/esm/badge/badge.d.ts +1 -1
  8. package/esm/badge/badge.js +12 -12
  9. package/esm/table/data-table.js +8 -2
  10. package/esm/table/table-body.js +3 -2
  11. package/package.json +1 -1
package/dist/Placeholder/index.js CHANGED
@@ -149,8 +149,8 @@ function _unsupportedIterableToArray(r, a) {
149
149
  function Empty() {
150
150
  return /*#__PURE__*/React.createElement("svg", {
151
151
  xmlns: "http://www.w3.org/2000/svg",
152
- width: "20em",
153
- height: "20em",
152
+ width: "10em",
153
+ height: "10em",
154
154
  "data-name": "Layer 1",
155
155
  viewBox: "0 0 1009.54 789.93"
156
156
  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
package/dist/badge/badge.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { NormalTypes } from '../utils/prop-types';
3
3
  export type BadgeTypes = NormalTypes;
4
4
  interface Props {
5
- type?: BadgeTypes;
5
+ color?: BadgeTypes;
6
6
  dot?: boolean;
7
7
  className?: string;
8
8
  }
package/dist/badge/index.js CHANGED
@@ -1180,7 +1180,7 @@ var useClasses = function useClasses() {
1180
1180
  return classes.trim();
1181
1181
  };
1182
1182
 
1183
- var _excluded = ["type", "className", "children", "dot"];
1183
+ var _excluded = ["color", "className", "children", "dot"];
1184
1184
  var getBgColor = function getBgColor(type, palette) {
1185
1185
  var colors = {
1186
1186
  "default": palette.foreground,
@@ -1192,8 +1192,8 @@ var getBgColor = function getBgColor(type, palette) {
1192
1192
  return colors[type];
1193
1193
  };
1194
1194
  var BadgeComponent = function BadgeComponent(_ref) {
1195
- var _ref$type = _ref.type,
1196
- type = _ref$type === void 0 ? 'default' : _ref$type,
1195
+ var _ref$color = _ref.color,
1196
+ color = _ref$color === void 0 ? 'default' : _ref$color,
1197
1197
  _ref$className = _ref.className,
1198
1198
  className = _ref$className === void 0 ? '' : _ref$className,
1199
1199
  children = _ref.children,
@@ -1204,21 +1204,21 @@ var BadgeComponent = function BadgeComponent(_ref) {
1204
1204
  var _useScale = useScale(),
1205
1205
  SCALES = _useScale.SCALES;
1206
1206
  var bg = React.useMemo(function () {
1207
- return getBgColor(type, theme.palette);
1208
- }, [type, theme.palette]);
1209
- var color = React.useMemo(function () {
1210
- if (!type || type === 'default') return theme.palette.background;
1207
+ return getBgColor(color, theme.palette);
1208
+ }, [color, theme.palette]);
1209
+ var _color = React.useMemo(function () {
1210
+ if (!color || color === 'default') return theme.palette.background;
1211
1211
  return 'white';
1212
- }, [type, theme.palette.background]);
1212
+ }, [color, theme.palette.background]);
1213
1213
  var classes = useClasses('badge', {
1214
1214
  dot: dot
1215
1215
  }, className);
1216
1216
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
1217
- className: _JSXStyle.dynamic([["427831233", [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
1217
+ className: _JSXStyle.dynamic([["1238256810", [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
1218
1218
  }), !dot && children, /*#__PURE__*/React.createElement(_JSXStyle, {
1219
- id: "427831233",
1220
- dynamic: [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
1221
- }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.4375), " ").concat(SCALES.pb(0.25), " ").concat(SCALES.pl(0.4375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
1219
+ id: "1238256810",
1220
+ dynamic: [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
1221
+ }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(_color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.4375), " ").concat(SCALES.pb(0.25), " ").concat(SCALES.pl(0.4375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
1222
1222
  };
1223
1223
  BadgeComponent.displayName = 'Badge';
1224
1224
  var Badge = withScale(BadgeComponent);
package/dist/index.js CHANGED
@@ -12829,7 +12829,7 @@ var AvatarGroup = withScale(AvatarGroupComponent);
12829
12829
 
12830
12830
  Avatar.Group = AvatarGroup;
12831
12831
 
12832
- var _excluded$1h = ["type", "className", "children", "dot"];
12832
+ var _excluded$1h = ["color", "className", "children", "dot"];
12833
12833
  var getBgColor = function getBgColor(type, palette) {
12834
12834
  var colors = {
12835
12835
  "default": palette.foreground,
@@ -12841,8 +12841,8 @@ var getBgColor = function getBgColor(type, palette) {
12841
12841
  return colors[type];
12842
12842
  };
12843
12843
  var BadgeComponent = function BadgeComponent(_ref) {
12844
- var _ref$type = _ref.type,
12845
- type = _ref$type === void 0 ? 'default' : _ref$type,
12844
+ var _ref$color = _ref.color,
12845
+ color = _ref$color === void 0 ? 'default' : _ref$color,
12846
12846
  _ref$className = _ref.className,
12847
12847
  className = _ref$className === void 0 ? '' : _ref$className,
12848
12848
  children = _ref.children,
@@ -12853,21 +12853,21 @@ var BadgeComponent = function BadgeComponent(_ref) {
12853
12853
  var _useScale = useScale(),
12854
12854
  SCALES = _useScale.SCALES;
12855
12855
  var bg = React$1.useMemo(function () {
12856
- return getBgColor(type, theme.palette);
12857
- }, [type, theme.palette]);
12858
- var color = React$1.useMemo(function () {
12859
- if (!type || type === 'default') return theme.palette.background;
12856
+ return getBgColor(color, theme.palette);
12857
+ }, [color, theme.palette]);
12858
+ var _color = React$1.useMemo(function () {
12859
+ if (!color || color === 'default') return theme.palette.background;
12860
12860
  return 'white';
12861
- }, [type, theme.palette.background]);
12861
+ }, [color, theme.palette.background]);
12862
12862
  var classes = useClasses('badge', {
12863
12863
  dot: dot
12864
12864
  }, className);
12865
12865
  return /*#__PURE__*/React$1.createElement("span", _extends({}, props, {
12866
- className: _JSXStyle.dynamic([["427831233", [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
12866
+ className: _JSXStyle.dynamic([["1238256810", [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
12867
12867
  }), !dot && children, /*#__PURE__*/React$1.createElement(_JSXStyle, {
12868
- id: "427831233",
12869
- dynamic: [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
12870
- }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.4375), " ").concat(SCALES.pb(0.25), " ").concat(SCALES.pl(0.4375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
12868
+ id: "1238256810",
12869
+ dynamic: [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
12870
+ }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(_color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.4375), " ").concat(SCALES.pb(0.25), " ").concat(SCALES.pl(0.4375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
12871
12871
  };
12872
12872
  BadgeComponent.displayName = 'Badge';
12873
12873
  var Badge = withScale(BadgeComponent);
@@ -43737,8 +43737,8 @@ var _ = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
43737
43737
  function Empty() {
43738
43738
  return /*#__PURE__*/React$1.createElement("svg", {
43739
43739
  xmlns: "http://www.w3.org/2000/svg",
43740
- width: "20em",
43741
- height: "20em",
43740
+ width: "10em",
43741
+ height: "10em",
43742
43742
  "data-name": "Layer 1",
43743
43743
  viewBox: "0 0 1009.54 789.93"
43744
43744
  }, /*#__PURE__*/React$1.createElement("defs", null, /*#__PURE__*/React$1.createElement("linearGradient", {
@@ -44527,6 +44527,12 @@ function DataTable(_ref) {
44527
44527
  // }}>Apply</Button></Popover.Item></>
44528
44528
  // )
44529
44529
 
44530
+ var SELECTED = React$1.useMemo(function () {
44531
+ if (selected.length > 0 && onSelected) {
44532
+ return onSelected(selected);
44533
+ }
44534
+ return /*#__PURE__*/React$1.createElement(React$1.Fragment, null);
44535
+ }, [selected]);
44530
44536
  return /*#__PURE__*/React$1.createElement(GridContainer, {
44531
44537
  className: "helpdice-ui-data-table-container",
44532
44538
  direction: "column"
@@ -44563,7 +44569,7 @@ function DataTable(_ref) {
44563
44569
  },
44564
44570
  justify: "flex-end",
44565
44571
  alignContent: "center"
44566
- }, menu, !children && !readOnly ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, selected.length > 0 && onSelected ? onSelected(selected) : null, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React$1.createElement(Tooltip, {
44572
+ }, menu, !children && !readOnly ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, SELECTED, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React$1.createElement(Tooltip, {
44567
44573
  text: "Edit Selected",
44568
44574
  placement: "bottom",
44569
44575
  font: 0.8,
@@ -44775,10 +44781,11 @@ var TableBody = function TableBody(_ref) {
44775
44781
  // };
44776
44782
 
44777
44783
  // Push Selected Rows
44778
- // useEffect(() => {
44784
+ // const SELECTED = useMemo(() => {
44779
44785
  // if (selected.length > 0 && onSelected) {
44780
- // onSelected(selected);
44786
+ // return onSelected(selected);
44781
44787
  // }
44788
+ // return <></>;
44782
44789
  // }, [selected]);
44783
44790
 
44784
44791
  function renderRow(cols, row, index) {
package/dist/table/index.js CHANGED
@@ -20068,8 +20068,8 @@ var _ = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
20068
20068
  function Empty() {
20069
20069
  return /*#__PURE__*/React.createElement("svg", {
20070
20070
  xmlns: "http://www.w3.org/2000/svg",
20071
- width: "20em",
20072
- height: "20em",
20071
+ width: "10em",
20072
+ height: "10em",
20073
20073
  "data-name": "Layer 1",
20074
20074
  viewBox: "0 0 1009.54 789.93"
20075
20075
  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
@@ -31805,6 +31805,12 @@ function DataTable(_ref) {
31805
31805
  // }}>Apply</Button></Popover.Item></>
31806
31806
  // )
31807
31807
 
31808
+ var SELECTED = React.useMemo(function () {
31809
+ if (selected.length > 0 && onSelected) {
31810
+ return onSelected(selected);
31811
+ }
31812
+ return /*#__PURE__*/React.createElement(React.Fragment, null);
31813
+ }, [selected]);
31808
31814
  return /*#__PURE__*/React.createElement(GridContainer, {
31809
31815
  className: "helpdice-ui-data-table-container",
31810
31816
  direction: "column"
@@ -31841,7 +31847,7 @@ function DataTable(_ref) {
31841
31847
  },
31842
31848
  justify: "flex-end",
31843
31849
  alignContent: "center"
31844
- }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, selected.length > 0 && onSelected ? onSelected(selected) : null, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
31850
+ }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, SELECTED, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
31845
31851
  text: "Edit Selected",
31846
31852
  placement: "bottom",
31847
31853
  font: 0.8,
@@ -32053,10 +32059,11 @@ var TableBody = function TableBody(_ref) {
32053
32059
  // };
32054
32060
 
32055
32061
  // Push Selected Rows
32056
- // useEffect(() => {
32062
+ // const SELECTED = useMemo(() => {
32057
32063
  // if (selected.length > 0 && onSelected) {
32058
- // onSelected(selected);
32064
+ // return onSelected(selected);
32059
32065
  // }
32066
+ // return <></>;
32060
32067
  // }, [selected]);
32061
32068
 
32062
32069
  function renderRow(cols, row, index) {
package/esm/Placeholder/empty.js CHANGED
@@ -2,8 +2,8 @@ import React from 'react';
2
2
  function Empty() {
3
3
  return /*#__PURE__*/React.createElement("svg", {
4
4
  xmlns: "http://www.w3.org/2000/svg",
5
- width: "20em",
6
- height: "20em",
5
+ width: "10em",
6
+ height: "10em",
7
7
  "data-name": "Layer 1",
8
8
  viewBox: "0 0 1009.54 789.93"
9
9
  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
package/esm/badge/badge.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { NormalTypes } from '../utils/prop-types';
3
3
  export type BadgeTypes = NormalTypes;
4
4
  interface Props {
5
- type?: BadgeTypes;
5
+ color?: BadgeTypes;
6
6
  dot?: boolean;
7
7
  className?: string;
8
8
  }
package/esm/badge/badge.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
- var _excluded = ["type", "className", "children", "dot"];
3
+ var _excluded = ["color", "className", "children", "dot"];
4
4
  import _JSXStyle from "../styled-jsx.es.js";
5
5
  /* "use client" */
6
6
 
@@ -19,8 +19,8 @@ var getBgColor = function getBgColor(type, palette) {
19
19
  return colors[type];
20
20
  };
21
21
  var BadgeComponent = function BadgeComponent(_ref) {
22
- var _ref$type = _ref.type,
23
- type = _ref$type === void 0 ? 'default' : _ref$type,
22
+ var _ref$color = _ref.color,
23
+ color = _ref$color === void 0 ? 'default' : _ref$color,
24
24
  _ref$className = _ref.className,
25
25
  className = _ref$className === void 0 ? '' : _ref$className,
26
26
  children = _ref.children,
@@ -31,21 +31,21 @@ var BadgeComponent = function BadgeComponent(_ref) {
31
31
  var _useScale = useScale(),
32
32
  SCALES = _useScale.SCALES;
33
33
  var bg = useMemo(function () {
34
- return getBgColor(type, theme.palette);
35
- }, [type, theme.palette]);
36
- var color = useMemo(function () {
37
- if (!type || type === 'default') return theme.palette.background;
34
+ return getBgColor(color, theme.palette);
35
+ }, [color, theme.palette]);
36
+ var _color = useMemo(function () {
37
+ if (!color || color === 'default') return theme.palette.background;
38
38
  return 'white';
39
- }, [type, theme.palette.background]);
39
+ }, [color, theme.palette.background]);
40
40
  var classes = useClasses('badge', {
41
41
  dot: dot
42
42
  }, className);
43
43
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
44
- className: _JSXStyle.dynamic([["427831233", [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
44
+ className: _JSXStyle.dynamic([["1238256810", [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
45
45
  }), !dot && children, /*#__PURE__*/React.createElement(_JSXStyle, {
46
- id: "427831233",
47
- dynamic: [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
48
- }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.4375), " ").concat(SCALES.pb(0.25), " ").concat(SCALES.pl(0.4375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
46
+ id: "1238256810",
47
+ dynamic: [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
48
+ }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(_color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.4375), " ").concat(SCALES.pb(0.25), " ").concat(SCALES.pl(0.4375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
49
49
  };
50
50
  BadgeComponent.displayName = 'Badge';
51
51
  var Badge = withScale(BadgeComponent);
package/esm/table/data-table.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
- import React, { memo, useEffect, useState } from 'react';
3
+ import React, { memo, useEffect, useMemo, useState } from 'react';
4
4
  // import { useDebounce } from 'use-debounce';
5
5
  import { ArrowLeft, Columns, Delete, Edit, Filters, Refresh } from '@helpdice/icons';
6
6
  // import InfiniteScroll from 'react-infinite-scroll-component';
@@ -253,6 +253,12 @@ function DataTable(_ref) {
253
253
  // }}>Apply</Button></Popover.Item></>
254
254
  // )
255
255
 
256
+ var SELECTED = useMemo(function () {
257
+ if (selected.length > 0 && onSelected) {
258
+ return onSelected(selected);
259
+ }
260
+ return /*#__PURE__*/React.createElement(React.Fragment, null);
261
+ }, [selected]);
256
262
  return /*#__PURE__*/React.createElement(Container, {
257
263
  className: "helpdice-ui-data-table-container",
258
264
  direction: "column"
@@ -289,7 +295,7 @@ function DataTable(_ref) {
289
295
  },
290
296
  justify: "flex-end",
291
297
  alignContent: "center"
292
- }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, selected.length > 0 && onSelected ? onSelected(selected) : null, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
298
+ }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, SELECTED, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
293
299
  text: "Edit Selected",
294
300
  placement: "bottom",
295
301
  font: 0.8,
package/esm/table/table-body.js CHANGED
@@ -62,10 +62,11 @@ var TableBody = function TableBody(_ref) {
62
62
  // };
63
63
 
64
64
  // Push Selected Rows
65
- // useEffect(() => {
65
+ // const SELECTED = useMemo(() => {
66
66
  // if (selected.length > 0 && onSelected) {
67
- // onSelected(selected);
67
+ // return onSelected(selected);
68
68
  // }
69
+ // return <></>;
69
70
  // }, [selected]);
70
71
 
71
72
  function renderRow(cols, row, index) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helpdice/ui",
3
- "version": "1.6.3",
3
+ "version": "1.6.4",
4
4
  "main": "dist/index.js",
5
5
  "types": "esm/index.d.ts",
6
6
  "unpkg": "dist/index.min.js",