@helpdice/ui 2.5.9 → 2.6.0-beta.0

package/esm/input/input-block-label.js

@@ -1,15 +1,22 @@
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
 import { useTheme } from '@helpdice/theme';
+import useScale from '../use-scale';
 var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required;
   var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
   return /*#__PURE__*/React.createElement("label", {
-    className: _JSXStyle.dynamic([["1278828862", [theme.palette.accents_6]]])
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1278828862",
-    dynamic: [theme.palette.accents_6]
-  }, "label.__jsx-style-dynamic-selector{display:block;font-weight:normal;color:".concat(theme.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
+    className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme.palette.accents_6, theme.palette.errorDark, SCALES.font(1.2)]]])
+  }, children, required && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["588038827", [typeof children === "string" ? 'block' : 'flex', theme.palette.accents_6, theme.palette.errorDark, SCALES.font(1.2)]]]) + " " + "mark-error"
+  }, "*"), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "588038827",
+    dynamic: [typeof children === "string" ? 'block' : 'flex', theme.palette.accents_6, theme.palette.errorDark, SCALES.font(1.2)]
+  }, "label.__jsx-style-dynamic-selector{display:".concat(typeof children === "string" ? 'block' : 'flex', ";font-weight:normal;color:").concat(theme.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector .mark-error.__jsx-style-dynamic-selector{color:").concat(theme.palette.errorDark, ";margin:0px 3px;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;font-size:").concat(SCALES.font(1.2), ";}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
 };
 InputBlockLabelComponent.displayName = 'InputBlockLabel';
 var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);

package/esm/input/input-field.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
+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"];
 import _JSXStyle from "../styled-jsx.es.js";
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react/jsx-no-undef */
@@ -61,6 +61,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$fullWidth = _ref.fullWidth,
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    required = _ref.required,
     props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
   var _useScale = useScale(),
@@ -145,7 +146,9 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var defaultWidth = fullWidth ? '100%' : 'initial';
   return /*#__PURE__*/React.createElement("div", {
     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"
-  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
+  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, {
+    required: required
+  }, children), /*#__PURE__*/React.createElement("div", {
     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) || "")
   }, label && /*#__PURE__*/React.createElement(InputLabel, null, label), /*#__PURE__*/React.createElement("div", {
     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', {

package/esm/input/input-props.d.ts

@@ -19,6 +19,7 @@ export interface Props {
     iconClickable?: boolean;
     className?: string;
     clearable?: boolean;
+    required?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onClearClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;

package/esm/table/table.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { RowErrorMap, TableDataItemBase, TableOnCellClick, TableOnChange, TableOnRowClick, TableRowClassNameHandler } from './table-types';
 import { ScaleProps } from '../use-scale';
 interface Props<TableDataItem extends TableDataItemBase> {
@@ -26,7 +26,7 @@ interface Props<TableDataItem extends TableDataItemBase> {
     nextCursor?: string;
     hasMore?: boolean;
     rowErrors?: RowErrorMap;
-    containerStyle?: object;
+    containerStyle?: CSSProperties;
     loading?: string;
     isLoading?: boolean;
     onNextPage?: (next?: string) => void;

package/esm/table/table.js

@@ -135,16 +135,16 @@ function TableComponent(tableProps) {
       borderBottomLeftRadius: '5px',
       borderBottomRightRadius: '5px'
     },
-    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]]])
+    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]]])
   }, /*#__PURE__*/React.createElement("div", {
     style: _extends({
       overflow: 'auto'
     }, containerStyle),
-    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]]])
+    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]]])
   }, /*#__PURE__*/React.createElement("table", _extends({
     ref: ref
   }, props, {
-    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 || "")
+    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 || "")
   }), /*#__PURE__*/React.createElement(TableHead, {
     stickyHeader: stickyHeader,
     onFilters: onFilters,
@@ -165,19 +165,19 @@ function TableComponent(tableProps) {
     rowDraggable: rowDraggable,
     readOnly: readOnly,
     onSelected: onSelected
-  }), children), loading === "default" && isLoading ? /*#__PURE__*/React.createElement(Loading, null) : data.length == 0 && /*#__PURE__*/React.createElement(Placeholder, {
+  }), children), loading === "default" && isLoading ? /*#__PURE__*/React.createElement(Loading, null) : null, data.length == 0 && !isLoading ? /*#__PURE__*/React.createElement(Placeholder, {
+    height: "90%",
     empty: true,
     textOnly: textPlaceholder,
     msg: "No Data to show"
-  })), cursorPagination || viewLength ? /*#__PURE__*/React.createElement("div", {
-    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"
-  }, cursorPagination ? /*#__PURE__*/React.createElement("div", {
+  }) : null), cursorPagination || viewLength ? /*#__PURE__*/React.createElement("div", {
+    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"
+  }, cursorPagination && /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
-      gap: 10,
-      margin: '10px'
+      gap: 10
     },
-    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]]])
+    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]]])
   }, /*#__PURE__*/React.createElement(Tooltip.Small, {
     text: "Previous",
     type: "dark"
@@ -194,19 +194,21 @@ function TableComponent(tableProps) {
     text: "Next",
     type: "dark"
   }, /*#__PURE__*/React.createElement(Button, {
-    disabled: !nextCursor,
+    disabled: !nextCursor || isLoading,
     onClick: function onClick() {
       return onNextPage && onNextPage(nextCursor);
     },
     auto: true,
     px: 0.6,
     scale: 2 / 3,
-    iconRight: /*#__PURE__*/React.createElement(ChevronRight, null)
-  }))) : dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement(Pagination, {
+    iconRight: isLoading ? /*#__PURE__*/React.createElement(Loading, {
+      width: "20px",
+      height: "20px"
+    }) : /*#__PURE__*/React.createElement(ChevronRight, null)
+  }))), dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement(Pagination, {
     style: {
       marginLeft: '10px',
-      marginRight: '10px',
-      marginTop: '10px'
+      marginRight: '10px'
     },
     onChange: function onChange(pageNumber) {
       // Get the range for the current page
@@ -218,9 +220,9 @@ function TableComponent(tableProps) {
     limit: 5,
     count: Number(dataLength / viewLength)
   }, /*#__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, {
-    id: "1809040460",
+    id: "638332526",
     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]
-  }, "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;}"))));
+  }, "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;}"))));
 }
 TableComponent.displayName = 'Table';
 TableComponent.Column = TableColumn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "2.5.9",
+  "version": "2.6.0-beta.0",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",