@loja-integrada/admin-components 0.9.2 → 0.9.6

package/dist/admin-components.esm.js

@@ -679,7 +679,7 @@ var LoadingPlaceholderComponent = function LoadingPlaceholderComponent(_ref) {
   return React.createElement("div", {
     className: "animate-pulse flex " + className
   }, React.createElement("div", {
-    className: "h-4 bg-inverted-2 bg-opacity-20 rounded w-80 max-w-full"
+    className: "h-4 bg-inverted-2 bg-opacity-20 rounded w-full max-w-full"
   }));
 };
 
@@ -1588,7 +1588,9 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
       checked = _ref.checked,
       disabled = _ref.disabled,
       indeterminate = _ref.indeterminate,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "id", "name", "onChange", "checked", "disabled", "indeterminate"]);
+      _ref$boxAlign = _ref.boxAlign,
+      boxAlign = _ref$boxAlign === void 0 ? 'center' : _ref$boxAlign,
+      props = _objectWithoutPropertiesLoose(_ref, ["label", "id", "name", "onChange", "checked", "disabled", "indeterminate", "boxAlign"]);
 
   var inputRef = React.useRef(null);
   var inputId = id || name;
@@ -1601,6 +1603,7 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
       isIndeterminate = _React$useState2[0],
       setIsIndeterminate = _React$useState2[1];
 
+  var isCenterBoxAlign = boxAlign === 'center';
   React.useEffect(function () {
     setIsChecked(!!checked);
     if (checked) setIsIndeterminate(false);
@@ -1619,11 +1622,11 @@ 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 " + (disabled ? 'bg-base-4' : isChecked || isIndeterminate ? 'bg-primary border-primary' : 'bg-base-1') + "  rounded w-4 h-4 flex justify-center items-center m-px";
+  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", {
     htmlFor: inputId,
-    className: "inline-flex items-center cursor-pointer"
+    className: "inline-flex items-" + 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({
@@ -1838,10 +1841,12 @@ var TableComponent = function TableComponent(_ref2) {
     }));
   })), React.createElement("tbody", Object.assign({}, getTableBodyProps(), {
     className: "text-sm text-on-base"
-  }), isLoading ? React.createElement("tr", null, React.createElement("td", {
-    colSpan: columnsLength || 1,
-    className: "" + TdClasses
-  }, React.createElement(TdWrapper, null, React.createElement(LoadingPlaceholder, null)))) : !rows || !rows.length ? React.createElement("tr", null, React.createElement("td", {
+  }), isLoading ? React.createElement("tr", null, Array(columnsLength).fill(0).map(function (key) {
+    return React.createElement("td", {
+      key: key,
+      className: "" + TdClasses
+    }, React.createElement(TdWrapper, null, React.createElement(LoadingPlaceholder, null)));
+  })) : !rows || !rows.length ? React.createElement("tr", null, React.createElement("td", {
     colSpan: columnsLength || 1,
     className: "" + TdClasses
   }, React.createElement(TdWrapper, null, React.createElement("div", {
@@ -1893,19 +1898,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", {
-    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",
+    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 " + (disabled ? disabledStyle : ''),
     onClick: function onClick() {
       return onChange(id);
-    }
+    },
+    disabled: disabled
   }, React.createElement("span", {
-    className: "block text-f6 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));
 };
@@ -2695,6 +2705,7 @@ var ActionBarComponent = function ActionBarComponent(_ref) {
     className: "lg:hidden"
   }, React.Children.map(children, function (_ref3) {
     var props = _ref3.props;
+    if (!props.children) return;
     return React.createElement("button", {
       className: 'px-4 py-1 text-base-1' + (props != null && props.loading ? ' pointer-events-none' : ''),
       onClick: props == null ? void 0 : props.onClick
@@ -2813,6 +2824,7 @@ var PaginationInfoComponent = function PaginationInfoComponent(_ref) {
   }, React.createElement("div", {
     className: "flex items-center mr-5 text-inverted-2 tracking-4 text-f6"
   }, itemsLengthOptions ? React.createElement(Select, {
+    id: "selectItemsPerPage",
     options: itemsLengthOptions,
     withoutStyle: true,
     "aria-label": "Itens por p\xE1gina",
@@ -2882,6 +2894,7 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
   }, React.createElement("div", {
     className: "text-inverted-2 text-f6 tracking-4"
   }, React.createElement("span", {
+    id: "btnPaginationActualPage",
     className: "pagination-nav-current text-primary font-semibold",
     ref: inputEl,
     contentEditable: true,
@@ -2891,6 +2904,7 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
     onCut: onPreventDefault,
     onPaste: onPreventDefault
   }, currentPage), ' ', "/", ' ', React.createElement("button", {
+    id: "btnPaginationLastPage",
     className: "pagination-nav-total focus:outline-none",
     onClick: function onClick() {
       if (currentPage !== maxTotalPages) handleChange(maxTotalPages);
@@ -2898,7 +2912,8 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
   }, maxTotalPages)), React.createElement("div", {
     className: "text-inverted-2 ml-5 flex items-center"
   }, React.createElement("button", {
-    className: "pagination-nav-previous mr-3 duration-200 focus:outline-none " + (hasPrev ? 'hover:text-inverted-1' : ''),
+    id: "btnPaginationPrev",
+    className: "pagination-nav-previous mr-3 duration-200 outline-none " + (hasPrev ? 'hover:text-inverted-1' : ''),
     "aria-label": "Ir para p\xE1gina anterior",
     onClick: function onClick() {
       if (hasPrev) handleChange(currentPage - 1);
@@ -2908,7 +2923,8 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
     block: true,
     size: 4
   })), React.createElement("button", {
-    className: "pagination-nav-next duration-200 focus:outline-none " + (hasNext ? 'hover:text-inverted-1' : ''),
+    id: "btnPaginationNext",
+    className: "pagination-nav-next duration-200 outline-none " + (hasNext ? 'hover:text-inverted-1' : ''),
     "aria-label": "Ir para pr\xF3xima p\xE1gina",
     onClick: function onClick() {
       if (hasNext) handleChange(currentPage + 1);