@loja-integrada/admin-components 0.9.5 → 0.9.9

package/dist/admin-components.esm.js

@@ -342,6 +342,14 @@ var InfoCircle = function InfoCircle() {
   });
 };
 
+var Link = function Link() {
+  return React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.5645 7.44624c-.301-.301-.78701-.301-1.08701 0-.301.301-.301.787 0 1.088l.74501.747c.34.34.526.79196.526 1.27096-.001.482-.189.933-.53 1.271l-3.82701 3.811c-1.106 1.103-2.91 1.102-4.016 0-.54-.539-.838-1.256-.838-2.02 0-.765.298-1.482.838-2.022l2.038-2.03096c.3-.3.302-.786.002-1.088-.299-.301-.786-.301-1.087-.002l-2.038 2.03196c-.833.83-1.29 1.933-1.29 3.111 0 1.177.457 2.281 1.29 3.112.854.849 1.973 1.274 3.093 1.274 1.12-.001 2.24-.425 3.093-1.273l3.82701-3.812c.632-.63.982-1.468.983-2.361.001-.89096-.346-1.72996-.977-2.36196l-.745-.746Zm6.154.057-2.31 2.314c-.301.30096-.787.30096-1.088 0-.3-.301-.3-.788 0-1.089l2.311-2.313c1.111-1.112 1.111-2.922 0-4.033-1.121-1.122-2.926-1.122-4.038-.01l-3.83001 3.835c-.7.701-.7 1.84 0 2.54l.75.752c.301.3.301.78696 0 1.08796-.149.15-.345.225-.543.225-.197 0-.393-.075-.544-.225l-.75-.75196c-1.299-1.3-1.299-3.416 0-4.716l3.83001-3.835c1.71-1.712 4.493-1.712 6.203 0 1.719 1.722 1.719 4.508.009 6.219Z"
+  });
+};
+
 var Loading = function Loading() {
   return React.createElement("path", {
     fillRule: "evenodd",
@@ -519,6 +527,7 @@ var icons = {
   plusCircle: PlusCircle,
   print: Print,
   infoCircle: InfoCircle,
+  link: Link,
   loading: Loading,
   pix: Pix,
   search: Search,
@@ -573,7 +582,8 @@ var listOfStylesHover = {
   info: "hover:bg-secondary-bold",
   warning: "hover:bg-warning-dark",
   danger: "hover:bg-danger-dark",
-  outline: "hover:bg-primary-light"
+  outline: "hover:bg-primary-light",
+  onlyText: "hover:bg-base-2"
 };
 var listOfStylesActive = {
   primary: "active:bg-primary-bold",
@@ -581,13 +591,15 @@ var listOfStylesActive = {
   tertiary: "active:bg-tertiary-bold",
   warning: "active:bg-warning-bold",
   danger: "hover:bg-danger-bold",
-  outline: "active:shadow-inner active:bg-base-1"
+  outline: "active:shadow-inner active:bg-base-1",
+  onlyText: "active:bg-base-1"
 };
 var listOfStylesFocus = {
   primary: "focus:ring-1 focus:ring-primary-dark focus:ring-opacity-50",
   secondary: "focus:ring focus:ring-focus",
   danger: "focus:ring-1 focus:ring-danger-dark",
-  outline: "focus:ring-2 focus:ring-focus focus:ring-offset-1"
+  outline: "focus:ring-2 focus:ring-focus focus:ring-offset-1",
+  onlyText: "focus:bg-base-1"
 };
 var listOfStyles = {
   primary: "bg-primary text-base-1 " + listOfStylesHover['primary'] + " " + listOfStylesActive['primary'] + " " + listOfStylesFocus['primary'],
@@ -596,7 +608,8 @@ var listOfStyles = {
   info: "bg-secondary-dark text-base-1 " + listOfStylesHover['info'],
   warning: "bg-warning text-on-base " + listOfStylesHover['warning'] + " " + listOfStylesActive['warning'],
   danger: "bg-danger text-base-1 " + listOfStylesHover['danger'] + " " + listOfStylesActive['danger'] + " " + listOfStylesFocus['danger'],
-  outline: "bg-transparent text-inverted-2 border border-inverted-2 " + listOfStylesHover['outline'] + " " + listOfStylesActive['outline'] + " " + listOfStylesFocus['outline']
+  outline: "bg-transparent text-inverted-2 border border-inverted-2 " + listOfStylesHover['outline'] + " " + listOfStylesActive['outline'] + " " + listOfStylesFocus['outline'],
+  onlyText: "bg-transparent border-transparent text-inverted-2 px-0 " + listOfStylesHover['onlyText'] + " " + listOfStylesActive['onlyText'] + " " + listOfStylesFocus['onlyText']
 };
 var defaultDisabledStyle = "bg-base-3 cursor-default text-on-base-2 shadow-none ring-0 border-0 hover:bg-base-3 hover:text-on-base-2 ";
 var listOfStylesDisabled = {
@@ -606,7 +619,8 @@ var listOfStylesDisabled = {
   info: defaultDisabledStyle,
   warning: defaultDisabledStyle,
   danger: defaultDisabledStyle,
-  outline: defaultDisabledStyle
+  outline: defaultDisabledStyle,
+  onlyText: "bg-transparent text-on-base-3 shadow-none ring-0 border-0"
 };
 var listOfSizes = {
   small: "text-f7 h-8",
@@ -1581,16 +1595,23 @@ var DropdownWithFowardRef = /*#__PURE__*/React.forwardRef(DropdownComponent);
 var Dropdown = /*#__PURE__*/React.memo(DropdownWithFowardRef);
 
 var CheckboxComponent = function CheckboxComponent(_ref, ref) {
-  var label = _ref.label,
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      label = _ref.label,
       id = _ref.id,
       name = _ref.name,
       onChange = _ref.onChange,
       checked = _ref.checked,
       disabled = _ref.disabled,
-      indeterminate = _ref.indeterminate,
+      _ref$indeterminate = _ref.indeterminate,
+      indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
       _ref$boxAlign = _ref.boxAlign,
       boxAlign = _ref$boxAlign === void 0 ? 'center' : _ref$boxAlign,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "id", "name", "onChange", "checked", "disabled", "indeterminate", "boxAlign"]);
+      helpText = _ref.helpText,
+      _ref$hasError = _ref.hasError,
+      hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+      errorMessage = _ref.errorMessage,
+      props = _objectWithoutPropertiesLoose(_ref, ["className", "label", "id", "name", "onChange", "checked", "disabled", "indeterminate", "boxAlign", "helpText", "hasError", "errorMessage"]);
 
   var inputRef = React.useRef(null);
   var inputId = id || name;
@@ -1604,6 +1625,7 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
       setIsIndeterminate = _React$useState2[1];
 
   var isCenterBoxAlign = boxAlign === 'center';
+  var hasErrorState = hasError || !!errorMessage;
   React.useEffect(function () {
     setIsChecked(!!checked);
     if (checked) setIsIndeterminate(false);
@@ -1623,10 +1645,24 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
 
   var checkboxIconClasses = "transition duration-200 ease-in-out " + (isChecked || isIndeterminate ? 'scale-100' : 'scale-0');
   var checkboxIconContainerClasses = "border border-card-stroke transition duration-200 ease-in-out\n    " + (disabled ? 'bg-base-4' : isChecked || isIndeterminate ? 'bg-primary border-primary' : 'bg-base-1') + "\n    " + (isCenterBoxAlign ? 'items-center' : '') + "\n    rounded w-4 h-4 flex justify-center m-px\n  ";
-  var checkboxLabelClasses = "ml-1 input-label text-f6 tracking-4 leading-6 " + (disabled ? 'text-inverted-2' : '');
-  return React.createElement("label", {
+  var checkboxLabelClasses = "ml-1 input-label text-f6 tracking-4 leading-6 " + (hasErrorState ? 'text-danger' : disabled ? 'text-inverted-2' : '');
+  var alignOptions = {
+    start: 'items-start',
+    end: 'items-end',
+    center: 'items-center',
+    baseline: 'items-baseline',
+    stretch: 'items-stretch'
+  };
+  var HelpTextComponent = React.createElement(InputHelpText, {
+    helpText: errorMessage || helpText,
+    hasError: hasErrorState,
+    className: "mt-2"
+  });
+  return React.createElement("div", {
+    className: "inline-block " + className
+  }, React.createElement("label", {
     htmlFor: inputId,
-    className: "inline-flex items-" + boxAlign + " cursor-pointer"
+    className: "inline-flex " + alignOptions[boxAlign] + " cursor-pointer"
   }, React.createElement("span", {
     className: "rounded z-50 flex items-center justify-center focus-within:ring-2 ring-focus"
   }, React.createElement("input", Object.assign({
@@ -1658,7 +1694,7 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
     fill: "white"
   })))), React.createElement("span", {
     className: checkboxLabelClasses
-  }, label));
+  }, label)), HelpTextComponent);
 };
 
 var CheckboxWithFowardRef = /*#__PURE__*/React.forwardRef(CheckboxComponent);
@@ -1697,7 +1733,8 @@ var TableComponent = function TableComponent(_ref2) {
       onChange = _ref2.onChange,
       selectedData = _ref2.selectedData,
       _ref2$disabledRows = _ref2.disabledRows,
-      disabledRows = _ref2$disabledRows === void 0 ? [] : _ref2$disabledRows;
+      disabledRows = _ref2$disabledRows === void 0 ? [] : _ref2$disabledRows,
+      id = _ref2.id;
   var rowsPropsMemoized = React.useMemo(function () {
     return rowsProps;
   }, [rowsProps]);
@@ -1800,9 +1837,13 @@ var TableComponent = function TableComponent(_ref2) {
   var columnsLength = React.useMemo(function () {
     return selectable ? columns.length + 1 : columns.length;
   }, [columns, selectable]);
+  var tableId = React.useMemo(function () {
+    return id ? "" + id.charAt(0).toUpperCase() + id.slice(1) : '';
+  }, [id]);
   return React.createElement("div", {
     className: "max-w-full overflow-x-auto"
   }, React.createElement("table", Object.assign({}, getTableProps(), {
+    id: id,
     className: "w-full bg-base-1 rounded border-separate border border-card-stroke",
     cellSpacing: "0"
   }), React.createElement("thead", {
@@ -1825,7 +1866,8 @@ var TableComponent = function TableComponent(_ref2) {
       },
       checked: isHeaderSelectChecked,
       indeterminate: isHeaderSelectedIndeterminate,
-      disabled: isHeaderSelectDisabled
+      disabled: isHeaderSelectDisabled,
+      id: "checkboxSelectAllRows" + tableId
     })), headerGroup.headers.map(function (column) {
       var _column$getHeaderProp = column.getHeaderProps(),
           key = _column$getHeaderProp.key,
@@ -1841,7 +1883,7 @@ var TableComponent = function TableComponent(_ref2) {
     }));
   })), React.createElement("tbody", Object.assign({}, getTableBodyProps(), {
     className: "text-sm text-on-base"
-  }), isLoading ? React.createElement("tr", null, Array(columnsLength).fill(0).map(function (key) {
+  }), isLoading ? React.createElement("tr", null, Array(columnsLength).fill(0).map(function (_, key) {
     return React.createElement("td", {
       key: key,
       className: "" + TdClasses
@@ -1871,7 +1913,8 @@ var TableComponent = function TableComponent(_ref2) {
         return handleSelectRow(index, e);
       },
       checked: isRowChecked,
-      disabled: isRowDisabled
+      disabled: isRowDisabled,
+      id: "checkboxRow" + index + tableId
     })), row.cells.map(function (cell) {
       var _cell$getCellProps = cell.getCellProps(),
           key = _cell$getCellProps.key,
@@ -1898,20 +1941,24 @@ var activeStyles = function activeStyles(active) {
 
 
 var boldFixStyle = "before:content-[attr(data-title)] before:block before:font-semibold before:h-0 before:overflow-hidden before:visibility-hidden";
+var disabledStyle = 'text-inverted-2 cursor-not-allowed';
 var TabsItem = function TabsItem(_ref) {
   var id = _ref.id,
       title = _ref.title,
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       onChange = _ref.onChange;
   return React.createElement("button", {
     id: "btnTab" + id,
-    className: "tabs-item " + (active ? 'tabs-item-active' : '') + " group min-w-0 flex-shrink-0 overflow-x-hidden px-2 last:-mr-2 first:-ml-2",
+    className: "tabs-item " + (active ? 'tabs-item-active' : '') + " group min-w-0 flex-shrink-0 overflow-x-hidden px-2 last:-mr-2 first:-ml-2 " + (disabled ? disabledStyle : ''),
     onClick: function onClick() {
       return onChange(id);
-    }
+    },
+    disabled: disabled
   }, React.createElement("span", {
-    className: "block text-f6 tracking-4 text-sm py-4 border-b-4 break-words group-hover:font-semibold " + activeStyles(active) + " " + boldFixStyle,
+    className: "block tracking-4 text-f6 text-sm py-4 border-b-4 break-words " + (disabled ? '' : 'group-hover:font-semibold') + " " + activeStyles(active) + " " + boldFixStyle,
     "data-title": title
   }, title));
 };
@@ -2102,6 +2149,8 @@ var ModalComponent = function ModalComponent(_ref) {
       }, React.createElement("span", {
         className: "min-w-0 text-inverted-2 text-xs font-semibold uppercase break-words " + (headerTitle ? 'pb-3' : '')
       }, headerTitle), React.createElement("button", {
+        type: "button",
+        id: "btnCloseModal",
         className: (preventClose ? 'hidden' : 'flex') + " items-center p-2 pb-1 -mr-2 -mt-3 text-sm font-semibold text-inverted-2 hover:text-inverted-1",
         onClick: handleRequestCloseFunc
       }, headerClose !== false && React.createElement("span", {