@loja-integrada/admin-components 0.9.4 → 0.9.8

package/dist/Components/Button/Button.d.ts

@@ -15,7 +15,7 @@ export interface ButtonProps extends ButtonAnchorProps {
     /** Button variant
      * @default primary
      * */
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'info' | 'warning' | 'danger' | 'outline';
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'info' | 'warning' | 'danger' | 'outline' | 'onlyText';
     /**
      * Button is loading
      * */

package/dist/Components/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Row } from 'react-table';
-export declare const Table: React.MemoExoticComponent<({ columns: columnsProps, rows: rowsProps, selectable, isLoading, emptyText, onChange, selectedData, disabledRows, }: TableProps) => JSX.Element>;
+export declare const Table: React.MemoExoticComponent<({ columns: columnsProps, rows: rowsProps, selectable, isLoading, emptyText, onChange, selectedData, disabledRows, id, }: TableProps) => JSX.Element>;
 declare type CellWrapperProp = React.ComponentClass<any> | React.FunctionComponent<any>;
 declare type TextAlignProp = 'left' | 'right' | 'center';
 declare type TableRowProp = {
@@ -72,5 +72,10 @@ export interface TableProps {
      * @default []
      */
     disabledRows?: number[];
+    /**
+     * Id of the table.
+     * @default undefined
+     */
+    id?: string;
 }
 export {};

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,5 +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';
+    boxAlign?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
 }

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

@@ -581,7 +581,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",
@@ -589,13 +590,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'],
@@ -604,7 +607,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 = {
@@ -614,7 +618,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",
@@ -687,7 +692,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"
   }));
 };
 
@@ -1632,9 +1637,16 @@ 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' : '');
+  var alignOptions = {
+    start: 'items-start',
+    end: 'items-end',
+    center: 'items-center',
+    baseline: 'items-baseline',
+    stretch: 'items-stretch'
+  };
   return React__default.createElement("label", {
     htmlFor: inputId,
-    className: "inline-flex items-" + boxAlign + " cursor-pointer"
+    className: "inline-flex " + alignOptions[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({
@@ -1705,7 +1717,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__default.useMemo(function () {
     return rowsProps;
   }, [rowsProps]);
@@ -1808,9 +1821,13 @@ var TableComponent = function TableComponent(_ref2) {
   var columnsLength = React__default.useMemo(function () {
     return selectable ? columns.length + 1 : columns.length;
   }, [columns, selectable]);
+  var tableId = React__default.useMemo(function () {
+    return id ? "" + id.charAt(0).toUpperCase() + id.slice(1) : '';
+  }, [id]);
   return React__default.createElement("div", {
     className: "max-w-full overflow-x-auto"
   }, React__default.createElement("table", Object.assign({}, getTableProps(), {
+    id: id,
     className: "w-full bg-base-1 rounded border-separate border border-card-stroke",
     cellSpacing: "0"
   }), React__default.createElement("thead", {
@@ -1833,7 +1850,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,
@@ -1849,10 +1867,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", {
@@ -1877,7 +1897,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,
@@ -1904,19 +1925,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));
 };
@@ -2107,6 +2133,8 @@ var ModalComponent = function ModalComponent(_ref) {
       }, React__default.createElement("span", {
         className: "min-w-0 text-inverted-2 text-xs font-semibold uppercase break-words " + (headerTitle ? 'pb-3' : '')
       }, headerTitle), React__default.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__default.createElement("span", {
@@ -2825,6 +2853,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",
@@ -2894,6 +2923,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,
@@ -2903,6 +2933,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);
@@ -2910,7 +2941,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);
@@ -2920,7 +2952,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);