@dilicorp/ui 0.2.37 → 0.2.39

package/dist/atoms/col.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-declare type columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto' | 'none';
+export declare type columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto' | 'none';
 export declare type ColProps = {
     size?: columns | columns[] | boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 export declare const Col: React.FC<ColProps>;
-export {};
 //# sourceMappingURL=col.d.ts.map

package/dist/components/multi-step/multi-step.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+declare type RenderFooterProps = {
+    prevStep: () => void;
+    nextStep: () => void;
+};
+export declare type StepSchema = {
+    id: number;
+    header: string | React.ReactNode;
+    content: React.ReactNode;
+    renderFooter: ({ prevStep, nextStep }: RenderFooterProps) => React.ReactNode;
+};
+declare type MultiStepProps = {
+    steps: StepSchema[];
+    headerNavigationIsDisabled?: boolean;
+};
+export declare const MultiStep: React.FC<MultiStepProps>;
+export {};
+//# sourceMappingURL=multi-step.d.ts.map

package/dist/components/multi-step/multi-step.js

@@ -0,0 +1,45 @@
+import React, { useCallback, useMemo, useState } from 'react';
+export const MultiStep = ({ steps, headerNavigationIsDisabled }) => {
+    const [currentStep, setCurrentStep] = useState(0);
+    const activeStep = useMemo(() => {
+        return steps[currentStep];
+    }, [steps, currentStep]);
+    const handleNextStep = useCallback(() => {
+        setCurrentStep(prevValue => prevValue + 1);
+    }, []);
+    const handlePrevStep = useCallback(() => {
+        setCurrentStep(prevValue => prevValue - 1);
+    }, []);
+    const handleGoToStep = useCallback((step) => {
+        setCurrentStep(step);
+    }, []);
+    const isFirstStep = useMemo(() => {
+        return currentStep === 0;
+    }, []);
+    const isLastStep = useMemo(() => {
+        return currentStep === steps.length - 1;
+    }, [currentStep]);
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "header" }, steps.map(step => {
+            return (React.createElement(React.Fragment, { key: step.id },
+                step.id > 0
+                    ? (React.createElement("div", { className: `smart-line ${step.id > currentStep ? 'smart-line-next' : 'smart-line-concluded'}` }))
+                    : null,
+                React.createElement("div", { className: `header-item
+                  ${currentStep === step.id ? 'current-item' : null} 
+                  ${currentStep > step.id ? 'complete-item' : null}
+                  ${!headerNavigationIsDisabled ? 'clickable' : null}
+                `, onClick: () => {
+                        if (!headerNavigationIsDisabled) {
+                            handleGoToStep(step.id);
+                        }
+                    } }, typeof step.header === 'string'
+                    ? React.createElement("span", null, step.header)
+                    : step.header)));
+        })),
+        React.createElement("div", { className: "content" }, activeStep.content),
+        activeStep.renderFooter({
+            prevStep: isFirstStep ? () => { } : handlePrevStep,
+            nextStep: isLastStep ? () => { } : handleNextStep
+        })));
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ActionMeta, OnChangeValue } from 'react-select';
+import { columns } from '../../../../atoms/col';
+declare type Option = {
+    label: string | number;
+    value: string | number;
+};
+declare type FilterAsyncSelectProps = {
+    label?: string;
+    message?: string;
+    name?: string;
+    placeholder: string;
+    defaultOptions?: Option[];
+    id?: string;
+    value?: string | Option | Option[];
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    isMulti?: boolean;
+    cacheOptions?: boolean;
+    size?: columns;
+    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-group/filter-async-select.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import AsyncSelect from 'react-select/async';
+export const FilterAsyncSelect = (props) => {
+    const { label, message, defaultOptions = [], name = '', id = name, value = undefined, placeholder, isDisabled = false, isLoading = false, isClearable = false, isSearchable = true, isMulti = false, cacheOptions = false, loadOptions, onChange } = props;
+    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 label-margin" },
+        Boolean(label) && React.createElement("label", { className: "form-label new-label", htmlFor: name }, label),
+        React.createElement(AsyncSelect, { placeholder: placeholder, className: "form-builder-select", classNamePrefix: "form-builder", defaultOptions: defaultOptions, name: name, id: id, defaultValue: value, value: value, isDisabled: isDisabled, isLoading: isLoading, isClearable: isClearable, isSearchable: isSearchable, isMulti: isMulti, cacheOptions: cacheOptions, loadOptions: loadOptions, onChange: handleChange }),
+        Boolean(message) && React.createElement("label", { className: "form-label new-message", htmlFor: name }, message)));
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { columns } from '../../../../atoms/col';
+declare type BaseValueProps = string | number;
+declare type BaseOptionType = {
+    label: BaseValueProps;
+    value: BaseValueProps;
+};
+declare type ValueProps = BaseOptionType | undefined;
+declare type FilterGroupProps = {
+    label?: string;
+    message?: string;
+    name: string;
+    value?: BaseValueProps;
+    defaultOptions?: ValueProps[];
+    children?: React.ReactElement[];
+    size?: columns;
+    onChange?: (selected: ValueProps) => void;
+};
+export declare const FilterGroupSelect: React.FC<FilterGroupProps>;
+export {};
+//# sourceMappingURL=filter-group.d.ts.map

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Col } from '../../../../atoms/col';
+import { Row } from '../../../../atoms/row';
+export const FilterGroupSelect = (props) => {
+    const { label, message, name, value, children, defaultOptions, onChange } = props;
+    const inputRef = React.useRef(null);
+    const [internalValue, setInternalValue] = React.useState(defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(option => (option === null || option === void 0 ? void 0 : option.value) === value));
+    const [internalOptions, setInternalOptions] = React.useState(defaultOptions || []);
+    const prepareFields = React.useCallback(({ key, field, value, defaultOptions }) => {
+        const { size } = field === null || field === void 0 ? void 0 : field.props;
+        const clone = React.cloneElement(field, {
+            key,
+            size,
+            value,
+            defaultOptions,
+            onChange: (newValue) => {
+                var _a, _b;
+                const value = (_a = newValue === null || newValue === void 0 ? void 0 : newValue.target) === null || _a === void 0 ? void 0 : _a.value;
+                (_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.setAttribute('value', value === null || value === void 0 ? void 0 : value.value);
+                setInternalValue(value);
+                setInternalOptions((curr) => [
+                    ...curr === null || curr === void 0 ? void 0 : curr.filter((option) => {
+                        const finalValue = (option === null || option === void 0 ? void 0 : option.value) || option;
+                        return finalValue !== (value === null || value === void 0 ? void 0 : value.value);
+                    }),
+                    value
+                ]);
+                if (onChange)
+                    onChange(value);
+            }
+        });
+        return clone;
+    }, [inputRef]);
+    return (React.createElement("div", { className: "form-input-group label-margin" },
+        Boolean(label) && React.createElement("label", { className: "form-label new-label", htmlFor: name }, label),
+        React.createElement("input", { name: name, type: "text", ref: inputRef, hidden: true }),
+        React.createElement(Row, null, children === null || children === void 0 ? void 0 : children.map((field, index) => {
+            const { size } = field === null || field === void 0 ? void 0 : field.props;
+            return (React.createElement(Col, { size: size || [12, 6, 4, 3], key: `${index}-${name}`, className: "mb-3" }, prepareFields({
+                field,
+                value: internalValue,
+                defaultOptions: internalOptions,
+                key: `${index}-${name}`
+            })));
+        })),
+        Boolean(message) && React.createElement("label", { className: "form-label new-message", htmlFor: name }, message)));
+};

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

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+export declare const Group: {
+    Wrapper: import("react").FC<{
+        label?: string | undefined;
+        message?: string | undefined;
+        name: string;
+        value?: (string | number) | undefined;
+        defaultOptions?: ({
+            label: string | number;
+            value: string | number;
+        } | undefined)[] | undefined;
+        children?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | undefined;
+        size?: import("../../../..").columns | undefined;
+        onChange?: ((selected: {
+            label: string | number;
+            value: string | number;
+        } | undefined) => void) | undefined;
+    }>;
+    Select: import("react").FC<{
+        label?: string | undefined;
+        message?: string | undefined;
+        name?: string | undefined;
+        placeholder: string;
+        defaultOptions?: {
+            label: string | number;
+            value: string | number;
+        }[] | undefined;
+        id?: string | undefined;
+        value?: string | {
+            label: string | number;
+            value: string | number;
+        } | {
+            label: string | number;
+            value: string | number;
+        }[] | undefined;
+        isDisabled?: boolean | undefined;
+        isLoading?: boolean | undefined;
+        isClearable?: boolean | undefined;
+        isSearchable?: boolean | undefined;
+        isMulti?: boolean | undefined;
+        cacheOptions?: boolean | undefined;
+        size?: import("../../../..").columns | undefined;
+        loadOptions?: ((newValue: string) => void) | undefined;
+        onChange?: ((newValue: any, actionMeta: import("react-select").ActionMeta<any>) => void) | undefined;
+    }>;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,6 @@
+import { FilterGroupSelect as Wrapper } from './filter-group';
+import { FilterAsyncSelect as Select } from './filter-async-select';
+export const Group = {
+    Wrapper,
+    Select
+};

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

@@ -1,10 +1,13 @@
 import React from 'react';
 import { ActionMeta, OnChangeValue } from 'react-select';
+import { columns } from '../../../atoms/col';
 declare type Option = {
     label: string | number;
     value: string | number;
 };
 declare type FilterAsyncSelectProps = {
+    label?: string;
+    message?: string;
     name: string;
     placeholder: string;
     options?: Option[];
@@ -17,6 +20,7 @@ declare type FilterAsyncSelectProps = {
     isSearchable?: boolean;
     isMulti?: boolean;
     cacheOptions?: boolean;
+    size?: columns;
     loadOptions?: (newValue: string) => void;
     onChange?: (newValue: OnChangeValue<any, any>, actionMeta: ActionMeta<any>) => void;
 };

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

@@ -25,7 +25,7 @@ const getValue = (value, options) => {
     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 { label, message, 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) {
@@ -41,9 +41,8 @@ export const FilterAsyncSelect = (props) => {
             }, 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 })));
+    return (React.createElement("div", { className: "form-group label-margin" },
+        Boolean(label) && React.createElement("label", { className: "form-label new-label", htmlFor: name }, label),
+        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 }),
+        Boolean(message) && React.createElement("label", { className: "form-label new-message", htmlFor: name }, message)));
 };

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import { SupportedDateFormat, SupportedLanguages } from '../../../atoms/input-datepicker';
+import { columns } from '../../../atoms/col';
 declare type FilterDatepickerProps = {
+    label?: string;
+    message?: string;
     name: string;
     id?: string;
     value?: string;
@@ -12,6 +15,7 @@ declare type FilterDatepickerProps = {
     onChange?: (name: string, value: string) => void;
     onBlur?: (name: string, value: string) => void;
     currentValue?: string;
+    size?: columns;
 };
 export declare const FilterDatepicker: React.FC<FilterDatepickerProps>;
 export {};

package/dist/components/page-list/filters/filter-datepicker.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { InputDatepicker } from '../../../atoms/input-datepicker';
 export const FilterDatepicker = (props) => {
-    const { name, id = name, value = '', placeholder, minDate, maxDate, onChange, onBlur, currentValue } = props;
+    const { label, message, name, id = name, value = '', minDate, maxDate, onChange, onBlur, currentValue } = props;
     const handleChange = (name, value) => {
         if (onChange) {
             onChange(name, value);
@@ -12,9 +12,8 @@ export const FilterDatepicker = (props) => {
             onBlur(name, value);
         }
     };
-    return (React.createElement("div", { className: "form-group" },
-        Boolean(placeholder) && React.createElement("label", { className: "form-label", htmlFor: name },
-            placeholder,
-            ":"),
-        React.createElement(InputDatepicker, { ...props, value: value || currentValue || '', id: id, minDate: minDate, maxDate: maxDate, onChange: handleChange, onBlur: handleBlur })));
+    return (React.createElement("div", { className: "form-group label-margin" },
+        Boolean(label) && React.createElement("label", { className: "form-label new-label", htmlFor: name }, label),
+        React.createElement(InputDatepicker, { ...props, value: value || currentValue || '', id: id, minDate: minDate, maxDate: maxDate, onChange: handleChange, onBlur: handleBlur }),
+        Boolean(message) && React.createElement("label", { className: "form-label new-message", htmlFor: name }, message)));
 };

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

@@ -1,9 +1,13 @@
 import React from 'react';
+import { columns } from '../../../atoms/col';
 declare type FilterInputProps = (React.InputHTMLAttributes<HTMLInputElement>) & {
+    label?: string;
+    message?: string;
     name: string;
     placeholder: string;
     mask?: string | Array<string | RegExp>;
     multiple?: boolean;
+    size?: columns;
 };
 export declare const FilterInput: React.FC<FilterInputProps>;
 export {};

package/dist/components/page-list/filters/filter-input.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import InputMask from 'react-input-mask';
 export const FilterInput = (props) => {
-    const { name, className, id = name, mask, value, placeholder, ...elements } = props;
+    const { label, message, name, className, id = name, mask, value, placeholder, ...elements } = props;
     const validOptions = {
         alt: elements.alt,
         autoComplete: elements.autoComplete,
@@ -23,15 +23,13 @@ export const FilterInput = (props) => {
         onChange: props.onChange
     };
     if (mask) {
-        return (React.createElement("div", { className: "form-group" },
-            Boolean(placeholder) && React.createElement("label", { className: "form-label", htmlFor: name },
-                placeholder,
-                ":"),
-            React.createElement(InputMask, { mask: mask, ...attrs })));
+        return (React.createElement("div", { className: "form-group label-margin" },
+            Boolean(label) && React.createElement("label", { className: "form-label new-label", htmlFor: name }, label),
+            React.createElement(InputMask, { mask: mask, ...attrs }),
+            Boolean(message) && React.createElement("label", { className: "form-label new-message", htmlFor: name }, message)));
     }
-    return (React.createElement("div", { className: "form-group" },
-        Boolean(placeholder) && React.createElement("label", { className: "form-label", htmlFor: name },
-            placeholder,
-            ":"),
-        React.createElement("input", { ...attrs })));
+    return (React.createElement("div", { className: "form-group label-margin" },
+        Boolean(label) && React.createElement("label", { className: "form-label new-label", htmlFor: name }, label),
+        React.createElement("input", { ...attrs }),
+        Boolean(message) && React.createElement("label", { className: "form-label new-message", htmlFor: name }, message)));
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ActionMeta, OnChangeValue } from 'react-select';
+import { columns } from '../../../atoms/col';
 interface Options {
     label: string;
     value: number | string;
@@ -9,6 +10,8 @@ export interface GroupedOptions {
     options: Options[];
 }
 declare type FilterSelectProps = {
+    label?: string;
+    message?: string;
     name: string;
     placeholder: string;
     groupedOptions?: GroupedOptions[];
@@ -19,6 +22,7 @@ declare type FilterSelectProps = {
     isClearable?: boolean;
     isSearchable?: boolean;
     isMulti?: boolean;
+    size?: columns;
     onChange?: (newValue: OnChangeValue<any, any>, actionMeta: ActionMeta<any>) => void;
 };
 export declare const FilterSelectGroup: React.FC<FilterSelectProps>;

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

@@ -27,7 +27,7 @@ const getValue = (value, options) => {
     return getValueInOption(options, (value.value).toString());
 };
 export const FilterSelectGroup = (props) => {
-    const { groupedOptions = [], name, id = name, placeholder, isDisabled = false, isLoading = false, isClearable = false, isSearchable = true, value = undefined, onChange } = props;
+    const { label, message, groupedOptions = [], name, id = name, placeholder, isDisabled = false, isLoading = false, isClearable = false, isSearchable = true, value = undefined, onChange } = props;
     const newValue = getValue(value, groupedOptions);
     const handleChange = React.useCallback((event, action) => {
         if (onChange) {
@@ -43,9 +43,8 @@ export const FilterSelectGroup = (props) => {
             }, action);
         }
     }, []);
-    return (React.createElement("div", { className: "form-group" },
-        Boolean(placeholder) && React.createElement("label", { className: "form-label", htmlFor: name },
-            placeholder,
-            ":"),
-        React.createElement(ReactSelect, { placeholder: placeholder, className: "form-builder-select", classNamePrefix: "form-builder", options: groupedOptions, name: name, id: id, defaultValue: newValue, isDisabled: isDisabled, isLoading: isLoading, isClearable: isClearable, isSearchable: isSearchable, onChange: handleChange })));
+    return (React.createElement("div", { className: "form-group label-margin" },
+        Boolean(label) && React.createElement("label", { className: "form-label new-label", htmlFor: name }, label),
+        React.createElement(ReactSelect, { placeholder: placeholder, className: "form-builder-select", classNamePrefix: "form-builder", options: groupedOptions, name: name, id: id, defaultValue: newValue, isDisabled: isDisabled, isLoading: isLoading, isClearable: isClearable, isSearchable: isSearchable, onChange: handleChange }),
+        Boolean(message) && React.createElement("label", { className: "form-label new-message", htmlFor: name }, message)));
 };

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

@@ -1,10 +1,13 @@
 import React from 'react';
 import { ActionMeta, OnChangeValue } from 'react-select';
+import { columns } from '../../../atoms/col';
 declare type Option = {
     label: string | number;
     value: string | number;
 };
 declare type FilterSelectProps = {
+    label?: string;
+    message?: string;
     name: string;
     placeholder: string;
     options?: Option[];
@@ -15,6 +18,7 @@ declare type FilterSelectProps = {
     isClearable?: boolean;
     isSearchable?: boolean;
     isMulti?: boolean;
+    size?: columns;
     onChange?: (newValue: OnChangeValue<any, any>, actionMeta: ActionMeta<any>) => void;
 };
 export declare const FilterSelect: React.FC<FilterSelectProps>;

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

@@ -25,7 +25,7 @@ const getValue = (value, options) => {
     return getValueInOption(options, (value.value).toString());
 };
 export const FilterSelect = (props) => {
-    const { options = [], name, id = name, value = undefined, placeholder, isDisabled = false, isLoading = false, isClearable = false, isSearchable = true, isMulti = false, onChange } = props;
+    const { label, message, options = [], name, id = name, value = undefined, placeholder, isDisabled = false, isLoading = false, isClearable = false, isSearchable = true, isMulti = false, onChange } = props;
     const newValue = getValue(value, options);
     const handleChange = React.useCallback((event, action) => {
         if (onChange) {
@@ -41,9 +41,8 @@ export const FilterSelect = (props) => {
             }, action);
         }
     }, []);
-    return (React.createElement("div", { className: "form-group" },
-        Boolean(placeholder) && React.createElement("label", { className: "form-label", htmlFor: name },
-            placeholder,
-            ":"),
-        React.createElement(ReactSelect, { placeholder: placeholder, className: "form-builder-select", classNamePrefix: "form-builder", options: options, name: name, id: id, defaultValue: newValue, isDisabled: isDisabled, isLoading: isLoading, isClearable: isClearable, isSearchable: isSearchable, isMulti: isMulti, onChange: handleChange })));
+    return (React.createElement("div", { className: "form-group label-margin" },
+        Boolean(label) && React.createElement("label", { className: "form-label new-label", htmlFor: name }, label),
+        React.createElement(ReactSelect, { placeholder: placeholder, className: "form-builder-select", classNamePrefix: "form-builder", options: options, name: name, id: id, defaultValue: newValue, isDisabled: isDisabled, isLoading: isLoading, isClearable: isClearable, isSearchable: isSearchable, isMulti: isMulti, onChange: handleChange }),
+        Boolean(message) && React.createElement("label", { className: "form-label new-message", htmlFor: name }, message)));
 };

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

@@ -1,3 +1,4 @@
+export { Group as FilterAsyncGroup } from './filter-async-select-group';
 export { FilterInput as Input } from './filter-input';
 export { FilterSelect as Select } from './filter-select';
 export { FilterAsyncSelect as AsyncSelect } from './filter-async-select';

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

@@ -1,3 +1,4 @@
+export { Group as FilterAsyncGroup } from './filter-async-select-group';
 export { FilterInput as Input } from './filter-input';
 export { FilterSelect as Select } from './filter-select';
 export { FilterAsyncSelect as AsyncSelect } from './filter-async-select';

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

@@ -1,10 +1,14 @@
 import React from 'react';
-declare type Props = {
+import { columns } from '../../atoms/col';
+export declare type PageListFiltersProps = {
     children: React.ReactNode;
+    filterSize?: columns;
+    filterClassName?: string;
+    numFiltersVisible?: number;
+    filterLabel?: boolean;
 };
 export declare const PageListFilters: {
-    ({ children }: Props): JSX.Element;
+    ({ children }: PageListFiltersProps): JSX.Element;
     displayName: string;
 };
-export {};
 //# sourceMappingURL=page-list-filters.d.ts.map

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

@@ -1,14 +1,19 @@
 import React from 'react';
+import { columns } from '../../atoms/col';
+import { PageListFiltersProps } from './page-list-filters';
 declare type PageListGetFiltersProps = {
     children?: React.ReactNode;
-    filterList: any;
+    filterList: {
+        props: PageListFiltersProps;
+    };
     search: any;
     filter?: {
         filterLabel?: string;
         submitLabel?: string;
         clearLabel?: string;
+        numFiltersVisible?: number;
+        filterSize?: columns;
     };
-    numFiltersVisible?: number;
 };
 export declare type ConfigItemProps = {
     label: string;

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

@@ -17,12 +17,13 @@ const setValue = (element, value) => {
     };
 };
 export const PageListGetFilters = (props) => {
-    const { children, numFiltersVisible = 2, filterList, search, filter = {
+    const { children, filterList, search, filter = {
         filterLabel: 'Filters',
         submitLabel: 'Filter',
         clearLabel: 'Clear'
     } } = props;
-    const filters = filterList === null || filterList === void 0 ? void 0 : filterList.props.children;
+    const { children: filterChildren, filterLabel, filterSize, filterClassName, numFiltersVisible = 2 } = filterList === null || filterList === void 0 ? void 0 : filterList.props;
+    const filters = filterChildren;
     if (!filterList)
         return null;
     const visible = Array.isArray(filters) ? filters.slice(0, numFiltersVisible) : [filters];
@@ -33,10 +34,13 @@ export const PageListGetFilters = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(FilterForm, { search: search },
             React.createElement(Row, null,
-                visible.map((element, index) => (React.createElement(Col, { size: [12, 6, 4, 3], key: JSON.stringify({ index, props: element === null || element === void 0 ? void 0 : element.props }), className: "mb-3" }, setValue(element, search[element.props.name])))),
-                React.createElement(Col, { className: "" },
-                    React.createElement("div", { className: "form-group", id: "btns-filter" },
-                        React.createElement("label", { className: "form-label", htmlFor: "btns-filter" }, "\u00A0"),
+                visible.map((element, index) => {
+                    var _a, _b;
+                    return (React.createElement(Col, { size: ((_a = element === null || element === void 0 ? void 0 : element.props) === null || _a === void 0 ? void 0 : _a.size) || [12, 6, 4, 3], key: `${index}-${(_b = element === null || element === void 0 ? void 0 : element.props) === null || _b === void 0 ? void 0 : _b.name}`, className: "mb-3" }, setValue(element, search[element.props.name])));
+                }),
+                React.createElement(Col, { className: filterClassName, size: filterSize },
+                    React.createElement("div", { className: "form-group label-margin", id: "btns-filter" },
+                        Boolean(filterLabel) && React.createElement("label", { className: "form-label new-label", htmlFor: "btns-filter" }, "\u00A0"),
                         React.createElement("div", null,
                             React.createElement(ButtonFilter, { submitLabel: filter.submitLabel, className: "me-3" }),
                             React.createElement(ButtonFilterClear, { clearLabel: filter.clearLabel, className: "me-3", search: search }),
@@ -47,8 +51,8 @@ export const PageListGetFilters = (props) => {
                     React.createElement(Button, { color: "primary", onClick: () => setShowFilter(prev => !prev), small: true },
                         React.createElement(Icon, { icon: "fa-delete", pluxee: true }))),
                 React.createElement("div", { className: "content-aside-filter" }, hidden.map((element, index) => {
-                    var _a;
-                    return (React.createElement("div", { key: `visible-child-${JSON.stringify({ index: index + numFiltersVisible, props: element === null || element === void 0 ? void 0 : element.props })}`, className: hidden.length === (index + 1) ? '' : 'mb-3' }, ((_a = element.props) === null || _a === void 0 ? void 0 : _a.name) && setValue(element, search[element.props.name])));
+                    var _a, _b;
+                    return (React.createElement("div", { key: `visible-child-${index + numFiltersVisible}-${(_a = element === null || element === void 0 ? void 0 : element.props) === null || _a === void 0 ? void 0 : _a.name}`, className: hidden.length === (index + 1) ? '' : 'mb-3' }, ((_b = element.props) === null || _b === void 0 ? void 0 : _b.name) && setValue(element, search[element.props.name])));
                 })),
                 React.createElement("div", { className: `pt-3 text-center ${showFilter ? 'd-block' : 'd-none'}` },
                     React.createElement(ButtonFilter, { submitLabel: filter.submitLabel, className: "me-3" }),

package/dist/components/page-list/page-list-header.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare type PageListHeaderProps = {
+    children: React.ReactNode;
+};
+export declare const PageListHeader: {
+    ({ children }: PageListHeaderProps): JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=page-list-header.d.ts.map

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export const PageListHeader = ({ children }) => {
+    return (React.createElement(React.Fragment, null, children));
+};
+PageListHeader.displayName = 'PageListHeader';

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

@@ -16,9 +16,10 @@ export const PageList = (props) => {
     const totalRecords = (meta === null || meta === void 0 ? void 0 : meta.to) ? (meta.to - meta.from) + 1 : 0;
     const history = useLocation();
     const search = uriHelper.parse(history.search);
+    const header = Array.isArray(children) ? children.find(child => { var _a; return typeof child.type !== 'string' && ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'PageListHeader'; }) : null;
     const filterList = Array.isArray(children) ? children.find(child => { var _a; return typeof child.type !== 'string' && ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'PageListFilters'; }) : null;
     const configList = Array.isArray(children) ? children.find(child => { var _a; return typeof child.type !== 'string' && ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'PageListConfigDropdown'; }) : null;
-    const restList = Array.isArray(children) ? children === null || children === void 0 ? void 0 : children.filter(child => child !== filterList && child !== configList) : children;
+    const restList = Array.isArray(children) ? children === null || children === void 0 ? void 0 : children.filter(child => child !== filterList && child !== configList && child !== header) : children;
     if (loading) {
         return (React.createElement("div", { className: "my-5" },
             React.createElement(Spinner, null)));
@@ -41,6 +42,7 @@ export const PageList = (props) => {
                         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(header) && header,
         !!customizeFilter && customizeFilter,
         !customizeFilter && filterList && (React.createElement(PageListGetFilters, { filterList: filterList, search: search, filter: filter, key: JSON.stringify(history) }, configList)),
         React.createElement("div", null, restList),