@loja-integrada/admin-components 0.9.2 → 0.9.6

package/dist/Components/Tabs/Tabs.stories.d.ts

@@ -3,3 +3,4 @@ import { TabsProps } from './Tabs';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Default: Story<TabsProps>;
+export declare const WithTabDisabled: Story<TabsProps>;

package/dist/Components/Tabs/TabsItem.d.ts

@@ -10,5 +10,5 @@ interface TabsItemProps extends TabsItemInterface {
      */
     onChange: (arg0: string) => void;
 }
-export declare const TabsItem: ({ id, title, active, onChange, }: TabsItemProps) => JSX.Element;
+export declare const TabsItem: ({ id, title, active, disabled, onChange, }: TabsItemProps) => JSX.Element;
 export {};

package/dist/Components/Tabs/TabsItem.interface.d.ts

@@ -7,6 +7,10 @@ export interface TabsItemInterface {
      * Item visible title
      */
     title: string;
+    /**
+     * Disabled a specific tab
+     */
+    disabled?: boolean;
     /**
      * Item content
      * @deprecated Not implemented

package/dist/Forms/Checkbox/Checkbox.d.ts

@@ -3,4 +3,5 @@ export declare const Checkbox: React.MemoExoticComponent<React.ForwardRefExoticC
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label?: string | React.ReactNode;
     indeterminate?: boolean;
+    boxAlign?: 'center' | 'baseline';
 }

package/dist/admin-components.cjs.development.js

@@ -687,7 +687,7 @@ var LoadingPlaceholderComponent = function LoadingPlaceholderComponent(_ref) {
   return React__default.createElement("div", {
     className: "animate-pulse flex " + className
   }, React__default.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"
   }));
 };
 
@@ -1596,7 +1596,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__default.useRef(null);
   var inputId = id || name;
@@ -1609,6 +1611,7 @@ var CheckboxComponent = function CheckboxComponent(_ref, ref) {
       isIndeterminate = _React$useState2[0],
       setIsIndeterminate = _React$useState2[1];
 
+  var isCenterBoxAlign = boxAlign === 'center';
   React__default.useEffect(function () {
     setIsChecked(!!checked);
     if (checked) setIsIndeterminate(false);
@@ -1627,11 +1630,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__default.createElement("label", {
     htmlFor: inputId,
-    className: "inline-flex items-center cursor-pointer"
+    className: "inline-flex items-" + boxAlign + " cursor-pointer"
   }, React__default.createElement("span", {
     className: "rounded z-50 flex items-center justify-center focus-within:ring-2 ring-focus"
   }, React__default.createElement("input", Object.assign({
@@ -1846,10 +1849,12 @@ var TableComponent = function TableComponent(_ref2) {
     }));
   })), React__default.createElement("tbody", Object.assign({}, getTableBodyProps(), {
     className: "text-sm text-on-base"
-  }), isLoading ? React__default.createElement("tr", null, React__default.createElement("td", {
-    colSpan: columnsLength || 1,
-    className: "" + TdClasses
-  }, React__default.createElement(TdWrapper, null, React__default.createElement(LoadingPlaceholder, null)))) : !rows || !rows.length ? React__default.createElement("tr", null, React__default.createElement("td", {
+  }), isLoading ? React__default.createElement("tr", null, Array(columnsLength).fill(0).map(function (key) {
+    return React__default.createElement("td", {
+      key: key,
+      className: "" + TdClasses
+    }, React__default.createElement(TdWrapper, null, React__default.createElement(LoadingPlaceholder, null)));
+  })) : !rows || !rows.length ? React__default.createElement("tr", null, React__default.createElement("td", {
     colSpan: columnsLength || 1,
     className: "" + TdClasses
   }, React__default.createElement(TdWrapper, null, React__default.createElement("div", {
@@ -1901,19 +1906,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__default.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__default.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));
 };
@@ -2703,6 +2713,7 @@ var ActionBarComponent = function ActionBarComponent(_ref) {
     className: "lg:hidden"
   }, React__default.Children.map(children, function (_ref3) {
     var props = _ref3.props;
+    if (!props.children) return;
     return React__default.createElement("button", {
       className: 'px-4 py-1 text-base-1' + (props != null && props.loading ? ' pointer-events-none' : ''),
       onClick: props == null ? void 0 : props.onClick
@@ -2821,6 +2832,7 @@ var PaginationInfoComponent = function PaginationInfoComponent(_ref) {
   }, React__default.createElement("div", {
     className: "flex items-center mr-5 text-inverted-2 tracking-4 text-f6"
   }, itemsLengthOptions ? React__default.createElement(Select, {
+    id: "selectItemsPerPage",
     options: itemsLengthOptions,
     withoutStyle: true,
     "aria-label": "Itens por p\xE1gina",
@@ -2890,6 +2902,7 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
   }, React__default.createElement("div", {
     className: "text-inverted-2 text-f6 tracking-4"
   }, React__default.createElement("span", {
+    id: "btnPaginationActualPage",
     className: "pagination-nav-current text-primary font-semibold",
     ref: inputEl,
     contentEditable: true,
@@ -2899,6 +2912,7 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
     onCut: onPreventDefault,
     onPaste: onPreventDefault
   }, currentPage), ' ', "/", ' ', React__default.createElement("button", {
+    id: "btnPaginationLastPage",
     className: "pagination-nav-total focus:outline-none",
     onClick: function onClick() {
       if (currentPage !== maxTotalPages) handleChange(maxTotalPages);
@@ -2906,7 +2920,8 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
   }, maxTotalPages)), React__default.createElement("div", {
     className: "text-inverted-2 ml-5 flex items-center"
   }, React__default.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);
@@ -2916,7 +2931,8 @@ var PaginationNavComponent = function PaginationNavComponent(_ref) {
     block: true,
     size: 4
   })), React__default.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);