@dilicorp/ui 0.2.29 → 0.2.31

package/dist/atoms/icon.d.ts

@@ -6,7 +6,6 @@ export declare type IconProps = {
     className?: string;
     id?: string;
     size?: 'lg' | 'md' | 'sm';
-    title?: string;
 };
-export declare const Icon: ({ pluxee, icon, brand, className, id, size, ...props }: IconProps) => JSX.Element;
+export declare const Icon: ({ icon, brand, pluxee, className, id, size }: IconProps) => JSX.Element;
 //# sourceMappingURL=icon.d.ts.map

package/dist/atoms/icon.js

@@ -1,26 +1,14 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as fab from '@fortawesome/free-brands-svg-icons';
 import * as fa from '@fortawesome/free-solid-svg-icons';
 import stringHelper from '../utils/string-helper';
 import React from 'react';
 import { PluxeeIcon } from './pluxee-icon/pluxee-icon';
-export const Icon = (_a) => {
-    var { pluxee, icon, brand, className = '', id, size } = _a, props = __rest(_a, ["pluxee", "icon", "brand", "className", "id", "size"]);
+export const Icon = ({ icon, brand, pluxee, className = '', id, size }) => {
     if (pluxee) {
-        return (React.createElement(PluxeeIcon, Object.assign({ icon: icon, size: size }, props)));
+        return React.createElement(PluxeeIcon, { icon: icon, size: size });
     }
     const sanitize = stringHelper.toCamelCase(icon);
     const ico = brand ? fab[sanitize] : fa[sanitize];
-    return (React.createElement(FontAwesomeIcon, Object.assign({ id: id, icon: ico, className: className }, props)));
+    return React.createElement(FontAwesomeIcon, { id: id, icon: ico, className: className });
 };

package/dist/atoms/input-datepicker.d.ts

@@ -13,7 +13,6 @@ export declare type InputDatepickerProps = {
     minDate?: Date | null;
     maxDate?: Date | null;
     currentValue?: string;
-    disabled?: boolean;
 };
 export declare const InputDatepicker: (props: InputDatepickerProps) => JSX.Element;
 //# sourceMappingURL=input-datepicker.d.ts.map

package/dist/atoms/input-datepicker.js

@@ -11,7 +11,7 @@ registerLocale('es-CO', es);
 registerLocale('en-US', en);
 // example use https://reactdatepicker.com
 export const InputDatepicker = (props) => {
-    const { name, id = name, value, onChange, onBlur, locale = 'pt-BR', dateFormat = 'dd/MM/yyyy', placeholder = 'DD/MM/YYYY', minDate, maxDate, currentValue, disabled } = props;
+    const { name, id = name, value, onChange, onBlur, locale = 'pt-BR', dateFormat = 'dd/MM/yyyy', placeholder = 'DD/MM/YYYY', minDate, maxDate, currentValue } = props;
     const [date, setDate] = React.useState(dateHelper.stringToDate(currentValue || value));
     const handleDateSelect = (currentDate) => {
         if (onChange) {
@@ -29,5 +29,5 @@ export const InputDatepicker = (props) => {
     return (React.createElement(ReactDatePicker, { name: name, id: id, "data-testid": id, locale: locale, dateFormat: dateFormat, className: "form-control", selected: date, onChange: handleDateSelect, placeholderText: placeholder, autoComplete: "off", 
         // showMonthDropdown
         // useShortMonthInDropdown
-        minDate: minDate, maxDate: maxDate, showYearDropdown: true, yearDropdownItemNumber: 5, scrollableYearDropdown: true, tabIndex: 2, onBlur: handleBlur, customInput: React.createElement(MaskedTextInput, { type: "text", mask: mask }), disabled: disabled }));
+        minDate: minDate, maxDate: maxDate, showYearDropdown: true, yearDropdownItemNumber: 5, scrollableYearDropdown: true, tabIndex: 2, onBlur: handleBlur, customInput: React.createElement(MaskedTextInput, { type: "text", mask: mask }) }));
 };

package/dist/atoms/pluxee-icon/base-icon.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import uuidHelper from '../../utils/uuid-helper';
 const sizeInfo = {
     lg: 32,
     md: 24,
@@ -6,5 +7,10 @@ const sizeInfo = {
 };
 export const BaseIcon = ({ children, size }) => {
     const sizeNumber = sizeInfo[size];
-    return (React.createElement("svg", { style: { color: 'inherit' }, width: sizeNumber, height: sizeNumber, viewBox: '0 0 32 32', fill: "none", xmlns: "http://www.w3.org/2000/svg" }, children));
+    const id = uuidHelper.generateUUID();
+    return (React.createElement("svg", { style: { color: 'inherit' }, width: sizeNumber, height: sizeNumber, viewBox: '0 0 32 32', fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("g", { clipPath: `url(#${id})` }, children),
+        React.createElement("defs", null,
+            React.createElement("clipPath", { id: id },
+                React.createElement("rect", { width: "32", height: "32", fill: "white" })))));
 };

package/dist/atoms/pluxee-icon/icon-download.js

@@ -1,7 +1,7 @@
 import React from 'react';
 export const IconDownload = () => {
     return (React.createElement(React.Fragment, null,
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 19V30H30V19H27V27H5V19H2Z", fill: "currentColor" }),
-        React.createElement("path", { d: "M17.5 17.2576L17.5 3H14.5L14.5 17.2576L10.1212 12.8788L7.9999 15.0001L16 23.0002L24.0001 15.0001L21.8788 12.8788L17.5 17.2576Z", fill: "currentColor" })));
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.0625 19V30H30.0625V19H27.0625V27H5.0625V19H2.0625Z", fill: "currentColor" }),
+        React.createElement("path", { d: "M16.0625 1.99976L24.0626 9.99986L21.9413 12.1212L17.5625 7.74238L17.5625 23H14.5625L14.5625 7.74241L10.1837 12.1212L8.0624 9.99986L16.0625 1.99976Z", fill: "currentColor" })));
 };
 IconDownload.displayName = 'IconDownload';

package/dist/atoms/pluxee-icon/pluxee-icon.d.ts

@@ -1,16 +1,9 @@
 /// <reference types="react" />
-export declare const IconsList: {
-    key: string;
-    Element: {
-        (): JSX.Element;
-        displayName: string;
-    };
-}[];
 export declare type PluxeeIconColors = 'primary' | 'primary-contrast' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'white';
 declare type PluxeeIconProps = {
     icon: string;
     size?: 'lg' | 'md' | 'sm';
 };
-export declare const PluxeeIcon: ({ icon, size }: PluxeeIconProps) => JSX.Element;
+export declare const PluxeeIcon: ({ icon, size }: PluxeeIconProps) => JSX.Element | null;
 export {};
 //# sourceMappingURL=pluxee-icon.d.ts.map

package/dist/atoms/pluxee-icon/pluxee-icon.js

@@ -27,18 +27,7 @@ import { IconSearch } from './icon-search';
 import { IconPlus } from './icon-plus';
 import { Iconlogout } from './icon-logout';
 import { IconChevronDown } from './icon-chevron-down';
-import { IconCardSlashed } from './icon-card-slashed';
-import { IconClock } from './icon-clock';
-import { IconUpdateLimit } from './icon-update-limit';
-import { IconUserGroup } from './icon-user-group';
-import { IconEyeClosedOutline } from './icon-eye-closed-outline';
-import { IconNegotiation } from './icon-negotiation';
-import { IconQrcode } from './icon-qrcode';
-import { IconIdentification } from './icon-identification';
-import { Icon } from '../icon';
-import { IconPlay } from './icon-play';
-import { IconCircle } from './icon-circle';
-export const IconsList = [
+const IconsList = [
     { key: 'fa-double-chevron-left', Element: IconDoubleChevronLeft },
     { key: 'fa-double-chevron-right', Element: IconDoubleChevronRight },
     { key: 'fa-home', Element: IconHome },
@@ -70,7 +59,6 @@ export const IconsList = [
     { key: 'fa-pen', Element: IconPen },
     { key: 'fa-pencil-alt', Element: IconPen },
     { key: 'fa-eye-open-outline', Element: IconEyeOpenOutline },
-    { key: 'fa-eye-closed-outline', Element: IconEyeClosedOutline },
     { key: 'fa-eye', Element: IconEyeOpenOutline },
     { key: 'fa-lock', Element: IconLock },
     { key: 'fa-unlock', Element: IconUnlock },
@@ -81,21 +69,12 @@ export const IconsList = [
     { key: 'fa-search', Element: IconSearch },
     { key: 'fa-plus', Element: IconPlus },
     { key: 'fa-logout', Element: Iconlogout },
-    { key: 'fa-chevron-down', Element: IconChevronDown },
-    { key: 'fa-card-slashed', Element: IconCardSlashed },
-    { key: 'fa-clock-circle', Element: IconClock },
-    { key: 'fa-update-limit', Element: IconUpdateLimit },
-    { key: 'fa-user-group', Element: IconUserGroup },
-    { key: 'fa-negotiation', Element: IconNegotiation },
-    { key: 'fa-qrcode', Element: IconQrcode },
-    { key: 'fa-identification', Element: IconIdentification },
-    { key: 'fa-play', Element: IconPlay },
-    { key: 'fa-circle', Element: IconCircle }
+    { key: 'fa-chevron-down', Element: IconChevronDown }
 ];
 export const PluxeeIcon = ({ icon, size = 'md' }) => {
     const item = IconsList.find(item => item.key === icon);
     if (!item)
-        return React.createElement(Icon, { size: size, icon: icon });
+        return null;
     const { Element } = item;
     return (React.createElement(BaseIcon, { size: size },
         React.createElement(Element, null)));

package/dist/components/alert-template/alert-provider.js

@@ -14,7 +14,7 @@ import { positions, Provider } from 'react-alert';
 import { AlertTemplate } from './alert-template';
 const options = {
     position: positions.MIDDLE,
-    timeout: 10000
+    timeout: 5000
 };
 export const AlertProvider = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);

package/dist/components/form-builder/components/button.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormikProps } from 'formik';
-declare type Props = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+declare type Props = React.HTMLAttributes<HTMLButtonElement> & {
     type?: 'submit' | 'reset' | 'button';
     actions: FormikProps<any>;
     color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';

package/dist/components/form-builder/components/button.js

@@ -12,10 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { Button } from '../../../atoms/button';
 export default function Input(props) {
-    var _a;
     const { type = 'button', actions, color = 'primary', label, labelLoading = label, className, id } = props, elements = __rest(props, ["type", "actions", "color", "label", "labelLoading", "className", "id"]);
     return (React.createElement("div", null,
-        React.createElement(Button, Object.assign({}, elements, { className: className, type: type, color: color, disabled: actions.isSubmitting ? true : (_a = elements.disabled) !== null && _a !== void 0 ? _a : false }, (id && { 'data-testid': id })), actions.isSubmitting
+        React.createElement(Button, Object.assign({}, elements, { className: className, type: type, color: color }, (id && { 'data-testid': id })), actions.isSubmitting
             ? labelLoading
             : label)));
 }

package/dist/components/form-builder/components/checkbox.d.ts

@@ -9,7 +9,6 @@ declare type Props = React.InputHTMLAttributes<HTMLInputElement> & {
     actions: FormikProps<any>;
     value?: string;
     options: Option[];
-    fastField?: boolean;
 };
 export default function Checkbox(props: Props): JSX.Element[] | null;
 export {};

package/dist/components/form-builder/components/checkbox.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { FastField, Field } from 'formik';
+import { FastField } from 'formik';
 export default function Checkbox(props) {
-    const { name, actions, value = [], options, id = name, tabIndex = 0, disabled, fastField = true } = props;
+    const { name, actions, value = [], options, id = name, tabIndex = 0, disabled } = props;
     if (!options.length)
         return null;
     const curValue = actions.values[name] || value || [];
@@ -21,8 +21,7 @@ export default function Checkbox(props) {
                 : [...values, value]);
         }
     };
-    const Tag = fastField ? FastField : Field;
     return options.map((option, index) => (React.createElement("div", { className: "form-check", key: `${name}-${index}` },
-        React.createElement(Tag, Object.assign({ value: option.value, name: name, id: `${id}-${index}`, "data-testid": `${id}-${index}`, checked: isChecked(option) }, { disabled }, { className: "form-check-input", type: "checkbox", tabIndex: tabIndex, onChange: handleChange })),
+        React.createElement(FastField, Object.assign({ value: option.value, name: name, id: `${id}-${index}`, "data-testid": `${id}-${index}`, checked: isChecked(option) }, { disabled }, { className: "form-check-input", type: "checkbox", tabIndex: tabIndex, onChange: handleChange })),
         React.createElement("label", { className: "form-check-label", htmlFor: `${id}-${index}` }, option.label))));
 }

package/dist/components/form-builder/components/input-currency.js

@@ -1,15 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { FastField, Field } from 'formik';
+import { FastField } from 'formik';
 import React from 'react';
 import numberHelper from '../../../utils/number-helper';
 export const InputCurrency = ({ attrs, handleChange, currency, name }) => {
@@ -24,7 +13,5 @@ export const InputCurrency = ({ attrs, handleChange, currency, name }) => {
             }
         });
     };
-    const { fastField = true } = attrs, restAttrs = __rest(attrs, ["fastField"]);
-    const Tag = fastField ? FastField : Field;
-    return (React.createElement(Tag, { name: name }, ({ field }) => React.createElement("input", Object.assign({}, field, restAttrs, { onChange: handleChangeCurrency, min: "0", maxLength: maxLength }))));
+    return (React.createElement(FastField, { name: name }, ({ field }) => React.createElement("input", Object.assign({}, field, attrs, { onChange: handleChangeCurrency, min: "0", maxLength: maxLength }))));
 };

package/dist/components/form-builder/components/input-mask.js

@@ -1,19 +1,6 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { FastField, Field } from 'formik';
+import { FastField } from 'formik';
 import React from 'react';
 import ReactInputMask from 'react-input-mask';
 export const InputMask = ({ attrs, mask, name }) => {
-    const { fastField = true } = attrs, restAttrs = __rest(attrs, ["fastField"]);
-    const Tag = fastField ? FastField : Field;
-    return (React.createElement(Tag, { name: name }, ({ field }) => React.createElement(ReactInputMask, Object.assign({}, field, restAttrs, { mask: mask }))));
+    return (React.createElement(FastField, { name: name }, ({ field }) => React.createElement(ReactInputMask, Object.assign({}, field, attrs, { mask: mask }))));
 };

package/dist/components/form-builder/components/input-prefix-suffix.js

@@ -1,23 +1,10 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from 'react';
-import { FastField, Field } from 'formik';
+import { FastField } from 'formik';
 export const InputPrefixSuffix = ({ attrs, suffix, prefix }) => {
     var _a;
-    const { fastField = true } = attrs, restAttrs = __rest(attrs, ["fastField"]);
-    const Tag = fastField ? FastField : Field;
     return (React.createElement("div", { className: "position-relative" },
         prefix && React.createElement("div", { className: "input-prefix" }, typeof prefix === 'string' ? React.createElement("span", null, prefix) : prefix),
-        React.createElement(Tag, Object.assign({}, restAttrs, { readOnly: true, onFocus: (event) => {
+        React.createElement(FastField, Object.assign({}, attrs, { readOnly: true, onFocus: (event) => {
                 event.currentTarget.readOnly = false;
             } }, ((prefix && typeof prefix === 'string') && {
             style: {

package/dist/components/form-builder/components/input.d.ts

@@ -12,7 +12,6 @@ export interface FormBuildItemInput extends Omit<FormBuilderBasicsItem, 'prefix'
     };
     suffix?: string | React.ReactNode;
     prefix?: string | React.ReactNode;
-    fastField?: boolean;
 }
 declare type Props = Omit<FormBuildItemInput, 'component'> & {
     actions: FormikProps<any>;

package/dist/components/form-builder/components/input.js

@@ -10,13 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { FastField, Field } from 'formik';
+import { FastField } from 'formik';
 import classNames from 'classnames';
 import { InputCurrency } from './input-currency';
 import { InputMask } from './input-mask';
 import { InputPrefixSuffix } from './input-prefix-suffix';
 export default function Input(props) {
-    const { name, id = name, type = 'text', tabIndex = 0, actions, mask, multiple = false, currency, className, prefix, suffix, fastField = true } = props, elements = __rest(props, ["name", "id", "type", "tabIndex", "actions", "mask", "multiple", "currency", "className", "prefix", "suffix", "fastField"]);
+    const { name, id = name, type = 'text', tabIndex = 0, actions, mask, multiple = false, currency, className, prefix, suffix } = props, elements = __rest(props, ["name", "id", "type", "tabIndex", "actions", "mask", "multiple", "currency", "className", "prefix", "suffix"]);
     const validOptions = {
         alt: elements.alt,
         autoComplete: elements.autoComplete,
@@ -57,17 +57,15 @@ export default function Input(props) {
     };
     const curValue = actions.values[name];
     const classes = classNames(className, 'form-control');
-    const attrsInput = Object.assign(Object.assign({}, validOptions), { value: curValue, className: classes, name,
+    const attrs = Object.assign(Object.assign({}, validOptions), { value: curValue, className: classes, name,
         id, 'data-testid': id, type: type === 'number' ? 'text' : type, tabIndex, autoComplete: 'none', onChange: handleChange });
-    const attrs = Object.assign(Object.assign({}, attrsInput), { fastField });
     if (currency)
         return React.createElement(InputCurrency, Object.assign({}, { name, attrs, currency, handleChange }));
     if (mask)
         return React.createElement(InputMask, Object.assign({}, { name, attrs, mask }));
     if (prefix || suffix)
         return React.createElement(InputPrefixSuffix, Object.assign({}, { attrs, suffix, prefix }));
-    const Tag = fastField ? FastField : Field;
-    return (React.createElement(Tag, Object.assign({}, attrsInput, { as: multiple ? 'textarea' : 'input', readOnly: true, onFocus: (event) => {
+    return (React.createElement(FastField, Object.assign({}, attrs, { as: multiple ? 'textarea' : 'input', readOnly: true, onFocus: (event) => {
             event.currentTarget.readOnly = false;
         } })));
 }

package/dist/components/form-builder/components/radio.d.ts

@@ -9,7 +9,6 @@ declare type Props = React.InputHTMLAttributes<HTMLInputElement> & {
     actions: FormikProps<any>;
     value?: string;
     options: Option[];
-    fastField?: boolean;
 };
 export default function Radio(props: Props): JSX.Element[] | null;
 export {};

package/dist/components/form-builder/components/radio.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { FastField, Field } from 'formik';
+import { FastField } from 'formik';
 export default function Radio(props) {
-    const { name, actions, value, options, id = name, tabIndex = 0, disabled, fastField = true } = props;
+    const { name, actions, value, options, id = name, tabIndex = 0, disabled } = props;
     if (!options.length)
         return null;
     const curValue = actions.values[name] || value;
@@ -18,8 +18,7 @@ export default function Radio(props) {
             actions.setFieldValue(name, event.currentTarget.value);
         }
     };
-    const Tag = fastField ? FastField : Field;
     return options.map((option, index) => (React.createElement("div", { className: "form-check", key: `${name}-${index}` },
-        React.createElement(Tag, Object.assign({ value: option.value, name: name, id: `${id}-${index}`, "data-testid": `${id}-${index}` }, isChecked(option), { disabled }, { type: "radio", tabIndex: tabIndex, className: "form-check-input", onChange: handleChange })),
+        React.createElement(FastField, Object.assign({ value: option.value, name: name, id: `${id}-${index}`, "data-testid": `${id}-${index}` }, isChecked(option), { disabled }, { type: "radio", tabIndex: tabIndex, className: "form-check-input", onChange: handleChange })),
         React.createElement("label", { className: "form-check-label", htmlFor: `${id}-${index}` }, option.label))));
 }

package/dist/components/layout/authenticated-layout/authenticated-layout.d.ts

@@ -6,10 +6,6 @@ declare type Props = {
     menuItems: SideNavigationBarItemProps[];
     navItems?: React.ReactNode[];
     dropdown: DropdownProps;
-    logout?: {
-        href: string;
-        label: string;
-    };
 };
 export declare const AuthenticatedLayout: React.FC<Props>;
 export {};

package/dist/components/layout/authenticated-layout/authenticated-layout.js

@@ -2,10 +2,7 @@ import React from 'react';
 import { SideNavigationBar } from '../../side-navigation-bar/side-navigation-bar';
 import { Navbar } from '../../navbar/navbar';
 import { PluxeeLogo } from '../pluxee-logo/pluxee-logo';
-export const AuthenticatedLayout = ({ children, menuItems, navItems, dropdown, logout = {
-    label: 'logout',
-    href: '/logout'
-} }) => {
+export const AuthenticatedLayout = ({ children, menuItems, navItems, dropdown }) => {
     return (React.createElement("div", { className: "hv-md-100" },
         React.createElement("header", { className: "main-header" },
             React.createElement("div", { className: "logo-container" },
@@ -20,8 +17,11 @@ export const AuthenticatedLayout = ({ children, menuItems, navItems, dropdown, l
             React.createElement("div", { className: "nav-container" },
                 React.createElement(Navbar, { showUserIcon: false, dropdown: dropdown, items: navItems }))),
         React.createElement("main", { className: "d-flex" },
-            React.createElement("div", { style: { minHeight: '100%' } },
-                React.createElement(SideNavigationBar, { active: false, items: menuItems, logout: logout })),
+            React.createElement("div", null,
+                React.createElement(SideNavigationBar, { active: false, items: menuItems, logout: {
+                        label: 'logout',
+                        href: '/logout'
+                    } })),
             React.createElement("div", { className: "w-100 overflow-y-auto" }, children))));
 };
 AuthenticatedLayout.displayName = 'AuthenticatedLayout';

package/dist/components/layout/layout.d.ts

@@ -5,10 +5,6 @@ export declare const Layout: {
         menuItems: import("../side-navigation-bar/side-navigation-bar-item").SideNavigationBarItemProps[];
         navItems?: import("react").ReactNode[] | undefined;
         dropdown: import("../..").DropdownProps;
-        logout?: {
-            href: string;
-            label: string;
-        } | undefined;
     }>;
     Content: {
         ({ children }: {

package/dist/components/page-create/page-create.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormBuilderGroup } from '../form-builder/form-builder.types';
 import { DropdownItemProps } from '../../molecules/dropdown/dropdown-item';
-import { ModalProps } from '../../molecules/modal/modal';
+import { ModalProps } from '../modal/modal';
 import { FormikHelpers } from 'formik';
 declare type ExtraButtons = {
     label: string;

package/dist/components/page-create/page-create.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal } from '../../molecules/modal/modal';
+import { Modal } from '../modal/modal';
 import { Button, Col, Dropdown, FormBuilder, Icon, Link, Row, Typography } from '../../';
 export const PageCreate = (props) => {
     const { title, extraButtons = [], cancelButton, onSubmit, data, modal } = props;

package/dist/components/page-list/filters/filter-async-select.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ActionMeta, OnChangeValue } from 'react-select';
+declare type Option = {
+    label: string | number;
+    value: string | number;
+};
+declare type FilterAsyncSelectProps = {
+    name: string;
+    placeholder: string;
+    options?: Option[];
+    defaultOptions?: Option[];
+    id?: string;
+    value?: string | Option | Option[];
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    isMulti?: boolean;
+    cacheOptions?: boolean;
+    loadOptions?: (newValue: string) => void;
+    onChange?: (newValue: OnChangeValue<any, any>, actionMeta: ActionMeta<any>) => void;
+};
+export declare const FilterAsyncSelect: React.FC<FilterAsyncSelectProps>;
+export {};
+//# sourceMappingURL=filter-async-select.d.ts.map

package/dist/components/page-list/filters/filter-async-select.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import AsyncSelect from 'react-select/async';
+const getValueInOption = (options, value) => {
+    return options.find(({ value: currValue }) => typeof currValue === 'number'
+        ? currValue === Number(value)
+        : currValue === value);
+};
+const getValue = (value, options) => {
+    if (!value)
+        return undefined;
+    const isArray = typeof value === 'object' && Array.isArray(value);
+    const isObject = !isArray && typeof value === 'object';
+    if (!isObject && !isObject) {
+        return getValueInOption(options, (value).toString());
+    }
+    if (isArray) {
+        const selected = [];
+        value.forEach(val => {
+            const data = getValueInOption(options, (val.value).toString());
+            if (data)
+                selected.push(data);
+        });
+        return selected;
+    }
+    return getValueInOption(options, (value.value).toString());
+};
+export const FilterAsyncSelect = (props) => {
+    const { options = [], defaultOptions = [], name, id = name, value = undefined, placeholder, isDisabled = false, isLoading = false, isClearable = false, isSearchable = true, isMulti = false, cacheOptions = false, loadOptions, onChange } = props;
+    const newValue = getValue(value, options);
+    const handleChange = React.useCallback((event, action) => {
+        if (onChange) {
+            onChange({
+                target: {
+                    name,
+                    value: event
+                },
+                currentTarget: {
+                    name,
+                    value: JSON.stringify(event)
+                }
+            }, action);
+        }
+    }, []);
+    return (React.createElement("div", { className: "form-group" },
+        Boolean(placeholder) && React.createElement("label", { className: "form-label", htmlFor: name },
+            placeholder,
+            ":"),
+        React.createElement(AsyncSelect, { placeholder: placeholder, className: "form-builder-select", classNamePrefix: "form-builder", options: options, defaultOptions: defaultOptions, name: name, id: id, defaultValue: newValue, isDisabled: isDisabled, isLoading: isLoading, isClearable: isClearable, isSearchable: isSearchable, isMulti: isMulti, cacheOptions: cacheOptions, loadOptions: loadOptions, onChange: handleChange })));
+};

package/dist/components/page-list/filters/index.d.ts

@@ -1,5 +1,6 @@
 export { FilterInput as Input } from './filter-input';
 export { FilterSelect as Select } from './filter-select';
+export { FilterAsyncSelect as AsyncSelect } from './filter-async-select';
 export { FilterSelectGroup as SelectGroup } from './filter-select-group';
 export { FilterDatepicker as Datepicker } from './filter-datepicker';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/page-list/filters/index.js

@@ -1,4 +1,5 @@
 export { FilterInput as Input } from './filter-input';
 export { FilterSelect as Select } from './filter-select';
+export { FilterAsyncSelect as AsyncSelect } from './filter-async-select';
 export { FilterSelectGroup as SelectGroup } from './filter-select-group';
 export { FilterDatepicker as Datepicker } from './filter-datepicker';

package/dist/components/page-list/page-list.js

@@ -23,12 +23,8 @@ export const PageList = (props) => {
         return (React.createElement("div", { className: "my-5" },
             React.createElement(Spinner, null)));
     }
-    const showTitleContainer = Boolean(title) ||
-        Boolean(extraButtonsInline.length) ||
-        Boolean(addButton) ||
-        Boolean((Array.isArray(extraButtons) ? extraButtons : extraButtons.items).length);
     return (React.createElement(React.Fragment, null,
-        showTitleContainer && (React.createElement(Row, { className: "page-title-container mb-3" },
+        React.createElement(Row, { className: "page-title-container mb-3" },
             title && (React.createElement(Col, { className: "d-flex align-items-center" },
                 React.createElement(Typography, { className: "mb-0", variant: "h4", tag: "h1" }, title))),
             React.createElement(Col, { className: "ms-auto" },
@@ -40,7 +36,7 @@ export const PageList = (props) => {
                     Boolean(addButton) && (React.createElement(Button, { tag: Link, href: addButton === null || addButton === void 0 ? void 0 : addButton.uri }, addButton === null || addButton === void 0 ? void 0 :
                         addButton.label,
                         React.createElement(Icon, { icon: "fa-plus", pluxee: true, className: "ms-1" }))),
-                    Boolean((Array.isArray(extraButtons) ? extraButtons : extraButtons.items).length) && (React.createElement(Dropdown, { outline: true, color: "primary", align: "right", label: Array.isArray(extraButtons) ? React.createElement(Icon, { icon: "faEllipsisH" }) : extraButtons.label, items: Array.isArray(extraButtons) ? extraButtons : extraButtons.items })))))),
+                    Boolean((Array.isArray(extraButtons) ? extraButtons : extraButtons.items).length) && (React.createElement(Dropdown, { outline: true, color: "primary", align: "right", label: Array.isArray(extraButtons) ? React.createElement(Icon, { icon: "faEllipsisH" }) : extraButtons.label, items: Array.isArray(extraButtons) ? extraButtons : extraButtons.items }))))),
         !!customizeFilter && customizeFilter,
         !customizeFilter && filterList && (React.createElement(PageListGetFilters, { filterList: filterList, search: search, filter: filter, key: JSON.stringify(history) }, configList)),
         React.createElement("div", null, restList),

package/dist/components/side-navigation-bar/side-navigation-bar-item.d.ts

@@ -8,7 +8,6 @@ export declare type SideNavigationBarItemProps = LinkProps & {
     items?: SideNavigationBarItemProps[];
     dataLink?: boolean;
     pathname?: string;
-    iconSize?: 'lg' | 'md' | 'sm';
 };
 export declare const SideNavigationBarItem: React.FC<SideNavigationBarItemProps>;
 //# sourceMappingURL=side-navigation-bar-item.d.ts.map