@helpdice/ui 2.5.9 → 2.6.0-beta.1

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.
@@ -1,7 +1,7 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
3
  import _extends from "@babel/runtime/helpers/esm/extends";
4
- var _excluded = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "onEnter", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
4
+ var _excluded = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "onEnter", "autoComplete", "placeholder", "children", "disabled", "fullWidth", "required"];
5
5
  import _JSXStyle from "../styled-jsx.es.js";
6
6
  /* eslint-disable @typescript-eslint/no-unused-vars */
7
7
  /* eslint-disable react/jsx-no-undef */
@@ -61,6 +61,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
61
61
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
62
62
  _ref$fullWidth = _ref.fullWidth,
63
63
  fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
64
+ required = _ref.required,
64
65
  props = _objectWithoutProperties(_ref, _excluded);
65
66
  var theme = useTheme();
66
67
  var _useScale = useScale(),
@@ -89,7 +90,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
89
90
  }, [icon, iconRight]);
90
91
  var _useMemo = useMemo(function () {
91
92
  return getColors(theme.palette, _color);
92
- }, [theme.palette, type]),
93
+ }, [theme.palette, _color]),
93
94
  color = _useMemo.color,
94
95
  borderColor = _useMemo.borderColor,
95
96
  hoverBorder = _useMemo.hoverBorder;
@@ -144,11 +145,13 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
144
145
  var inputProps = _extends({}, props, controlledValue);
145
146
  var defaultWidth = fullWidth ? '100%' : 'initial';
146
147
  return /*#__PURE__*/React.createElement("div", {
147
- className: _JSXStyle.dynamic([["1343268165", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
148
- }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
149
- className: _JSXStyle.dynamic([["1343268165", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-container', className) || "")
148
+ className: _JSXStyle.dynamic([["2371903369", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), theme.palette.foreground, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
149
+ }, children && /*#__PURE__*/React.createElement(InputBlockLabel, {
150
+ required: required
151
+ }, children), /*#__PURE__*/React.createElement("div", {
152
+ className: _JSXStyle.dynamic([["2371903369", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), theme.palette.foreground, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-container', className) || "")
150
153
  }, label && /*#__PURE__*/React.createElement(InputLabel, null, label), /*#__PURE__*/React.createElement("div", {
151
- className: _JSXStyle.dynamic([["1343268165", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-wrapper', {
154
+ className: _JSXStyle.dynamic([["2371903369", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), theme.palette.foreground, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-wrapper', {
152
155
  hover: hover,
153
156
  disabled: disabled
154
157
  }, labelClasses) || "")
@@ -166,7 +169,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
166
169
  autoComplete: autoComplete,
167
170
  onKeyDown: handleKeyDown
168
171
  }, inputProps, {
169
- className: _JSXStyle.dynamic([["1343268165", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses({
172
+ className: _JSXStyle.dynamic([["2371903369", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), theme.palette.foreground, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses({
170
173
  disabled: disabled
171
174
  }, iconClasses) || "")
172
175
  })), clearable && /*#__PURE__*/React.createElement(InputClearIcon, {
@@ -178,7 +181,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
178
181
  }, iconProps))), labelRight && /*#__PURE__*/React.createElement(InputLabel, {
179
182
  isRight: true
180
183
  }, labelRight), /*#__PURE__*/React.createElement("br", {
181
- className: _JSXStyle.dynamic([["1343268165", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]])
184
+ className: _JSXStyle.dynamic([["2371903369", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), theme.palette.foreground, theme.palette.accents_3, theme.palette.background, color]]])
182
185
  })), helperText && /*#__PURE__*/React.createElement(Text, {
183
186
  font: 0.8,
184
187
  style: {
@@ -190,9 +193,9 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
190
193
  },
191
194
  color: error ? "error" : 'default'
192
195
  }, "\xA0", helperText), /*#__PURE__*/React.createElement(_JSXStyle, {
193
- id: "1343268165",
194
- dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
195
- }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(variant === 'normal' ? theme.layout.radius : '', ";").concat(variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
196
+ id: "2371903369",
197
+ dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), theme.palette.foreground, theme.palette.accents_3, theme.palette.background, color]
198
+ }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(variant === 'normal' ? theme.layout.radius : '', ";").concat(variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(theme.palette.foreground, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
196
199
  });
197
200
  InputComponent.displayName = 'Input';
198
201
  var Input = withScale(InputComponent);
@@ -19,6 +19,7 @@ export interface Props {
19
19
  iconClickable?: boolean;
20
20
  className?: string;
21
21
  clearable?: boolean;
22
+ required?: boolean;
22
23
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
23
24
  onClearClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
24
25
  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { CSSProperties } from 'react';
2
2
  import { RowErrorMap, TableDataItemBase, TableOnCellClick, TableOnChange, TableOnRowClick, TableRowClassNameHandler } from './table-types';
3
3
  import { ScaleProps } from '../use-scale';
4
4
  interface Props<TableDataItem extends TableDataItemBase> {
@@ -26,7 +26,7 @@ interface Props<TableDataItem extends TableDataItemBase> {
26
26
  nextCursor?: string;
27
27
  hasMore?: boolean;
28
28
  rowErrors?: RowErrorMap;
29
- containerStyle?: object;
29
+ containerStyle?: CSSProperties;
30
30
  loading?: string;
31
31
  isLoading?: boolean;
32
32
  onNextPage?: (next?: string) => void;
@@ -135,16 +135,16 @@ function TableComponent(tableProps) {
135
135
  borderBottomLeftRadius: '5px',
136
136
  borderBottomRightRadius: '5px'
137
137
  },
138
- className: _JSXStyle.dynamic([["1809040460", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]])
138
+ className: _JSXStyle.dynamic([["638332526", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]])
139
139
  }, /*#__PURE__*/React.createElement("div", {
140
140
  style: _extends({
141
141
  overflow: 'auto'
142
142
  }, containerStyle),
143
- className: _JSXStyle.dynamic([["1809040460", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]])
143
+ className: _JSXStyle.dynamic([["638332526", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]])
144
144
  }, /*#__PURE__*/React.createElement("table", _extends({
145
145
  ref: ref
146
146
  }, props, {
147
- className: _JSXStyle.dynamic([["1809040460", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]]) + " " + (props && props.className != null && props.className || className || "")
147
+ className: _JSXStyle.dynamic([["638332526", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]]) + " " + (props && props.className != null && props.className || className || "")
148
148
  }), /*#__PURE__*/React.createElement(TableHead, {
149
149
  stickyHeader: stickyHeader,
150
150
  onFilters: onFilters,
@@ -165,19 +165,19 @@ function TableComponent(tableProps) {
165
165
  rowDraggable: rowDraggable,
166
166
  readOnly: readOnly,
167
167
  onSelected: onSelected
168
- }), children), loading === "default" && isLoading ? /*#__PURE__*/React.createElement(Loading, null) : data.length == 0 && /*#__PURE__*/React.createElement(Placeholder, {
168
+ }), children), loading === "default" && isLoading ? /*#__PURE__*/React.createElement(Loading, null) : null, data.length == 0 && !isLoading ? /*#__PURE__*/React.createElement(Placeholder, {
169
+ height: "90%",
169
170
  empty: true,
170
171
  textOnly: textPlaceholder,
171
172
  msg: "No Data to show"
172
- })), cursorPagination || viewLength ? /*#__PURE__*/React.createElement("div", {
173
- className: _JSXStyle.dynamic([["1809040460", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]]) + " " + "table-footer"
174
- }, cursorPagination ? /*#__PURE__*/React.createElement("div", {
173
+ }) : null), cursorPagination || viewLength ? /*#__PURE__*/React.createElement("div", {
174
+ className: _JSXStyle.dynamic([["638332526", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]]) + " " + "table-footer"
175
+ }, cursorPagination && /*#__PURE__*/React.createElement("div", {
175
176
  style: {
176
177
  display: 'flex',
177
- gap: 10,
178
- margin: '10px'
178
+ gap: 10
179
179
  },
180
- className: _JSXStyle.dynamic([["1809040460", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]])
180
+ className: _JSXStyle.dynamic([["638332526", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]]])
181
181
  }, /*#__PURE__*/React.createElement(Tooltip.Small, {
182
182
  text: "Previous",
183
183
  type: "dark"
@@ -194,19 +194,21 @@ function TableComponent(tableProps) {
194
194
  text: "Next",
195
195
  type: "dark"
196
196
  }, /*#__PURE__*/React.createElement(Button, {
197
- disabled: !nextCursor,
197
+ disabled: !nextCursor || isLoading,
198
198
  onClick: function onClick() {
199
199
  return onNextPage && onNextPage(nextCursor);
200
200
  },
201
201
  auto: true,
202
202
  px: 0.6,
203
203
  scale: 2 / 3,
204
- iconRight: /*#__PURE__*/React.createElement(ChevronRight, null)
205
- }))) : dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement(Pagination, {
204
+ iconRight: isLoading ? /*#__PURE__*/React.createElement(Loading, {
205
+ width: "20px",
206
+ height: "20px"
207
+ }) : /*#__PURE__*/React.createElement(ChevronRight, null)
208
+ }))), dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement(Pagination, {
206
209
  style: {
207
210
  marginLeft: '10px',
208
- marginRight: '10px',
209
- marginTop: '10px'
211
+ marginRight: '10px'
210
212
  },
211
213
  onChange: function onChange(pageNumber) {
212
214
  // Get the range for the current page
@@ -218,9 +220,9 @@ function TableComponent(tableProps) {
218
220
  limit: 5,
219
221
  count: Number(dataLength / viewLength)
220
222
  }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft, null))) : null) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
221
- id: "1809040460",
223
+ id: "638332526",
222
224
  dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.background]
223
- }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.table-footer.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.background, ";width:100%;bottom:0;}"))));
225
+ }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.table-footer.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:").concat(theme.palette.background, ";width:100%;bottom:0;padding:10px;}"))));
224
226
  }
225
227
  TableComponent.displayName = 'Table';
226
228
  TableComponent.Column = TableColumn;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helpdice/ui",
3
- "version": "2.5.9",
3
+ "version": "2.6.0-beta.1",
4
4
  "main": "dist/index.js",
5
5
  "types": "esm/index.d.ts",
6
6
  "unpkg": "dist/index.min.js",