@dilicorp/ui 0.2.2 → 0.2.4-0.1

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { columns } from '../../../../atoms/col';
+declare type BaseValueProps = string | number;
+declare type BaseOptionType = {
+    label: BaseValueProps;
+    value: BaseValueProps;
+    [name: string]: 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,53 @@
+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, labelName } = field === null || field === void 0 ? void 0 : field.props;
+        const labelValue = labelName && value
+            ? {
+                ...value,
+                label: (value === null || value === void 0 ? void 0 : value[labelName]) || (value === null || value === void 0 ? void 0 : value.label)
+            }
+            : value;
+        const clone = React.cloneElement(field, {
+            key,
+            size,
+            defaultOptions,
+            value: labelValue,
+            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?: ({
+            [name: string]: string | number;
+            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: {
+            [name: string]: string | number;
+            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;
+        labelName?: string | undefined;
+        value?: {
+            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

@@ -0,0 +1,29 @@
+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[];
+    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.js

@@ -0,0 +1,48 @@
+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 { 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) {
+            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", 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, Object.assign({}, 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

@@ -1,19 +1,8 @@
-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 classNames from 'classnames';
 import InputMask from 'react-input-mask';
 export const FilterInput = (props) => {
-    const { name, className, id = name, mask, value, placeholder } = props, elements = __rest(props, ["name", "className", "id", "mask", "value", "placeholder"]);
+    const { label, message, name, className, id = name, mask, value, placeholder, ...elements } = props;
     const validOptions = {
         alt: elements.alt,
         autoComplete: elements.autoComplete,
@@ -25,17 +14,22 @@ export const FilterInput = (props) => {
         required: elements.required
     };
     const classes = classNames(className, 'form-control');
-    const attrs = Object.assign(Object.assign({}, validOptions), { className: classes, name: name, id: id, defaultValue: value, onChange: props.onChange });
+    const attrs = {
+        ...validOptions,
+        className: classes,
+        name: name,
+        id: id,
+        defaultValue: value,
+        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, Object.assign({ 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", Object.assign({}, 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,5 +1,7 @@
+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';
 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,6 @@
+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';
 export { FilterSelectGroup as SelectGroup } from './filter-select-group';
 export { FilterDatepicker as Datepicker } from './filter-datepicker';

package/dist/components/page-list/page-list-config/page-list-config-column-management.js

@@ -16,6 +16,6 @@ export const PageListConfigColumnManagement = ({ columnManagement, onClick }) =>
                 modalActions.open();
             } }),
         React.createElement(Alert, { ref: modal, className: "alert-lg" },
-            React.createElement(ModalConfig, Object.assign({}, columnManagement, { closeFn: modalActions.close, confirmFn: columnManagement.onConfirm })))));
+            React.createElement(ModalConfig, { ...columnManagement, closeFn: modalActions.close, confirmFn: columnManagement.onConfirm }))));
 };
 PageListConfigColumnManagement.displayName = 'PageListConfigColumnManagement';

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

@@ -36,15 +36,27 @@ export const PageListConfigDropdown = ({ children, label, color = 'primary', out
             var _a, _b;
             if (React.isValidElement(child)) {
                 if ((_a = child.props) === null || _a === void 0 ? void 0 : _a.onClick) {
-                    return (Object.assign(Object.assign({}, child), { props: Object.assign(Object.assign({}, child.props), { onClick: () => {
+                    return ({
+                        ...child,
+                        props: {
+                            ...child.props,
+                            onClick: () => {
                                 setToggle(false);
                                 child.props.onClick();
-                            } }) }));
+                            }
+                        }
+                    });
                 }
                 if (((_b = child.type) === null || _b === void 0 ? void 0 : _b.displayName) === 'PageListConfigColumnManagement') {
-                    return (Object.assign(Object.assign({}, child), { props: Object.assign(Object.assign({}, child.props), { onClick: () => {
+                    return ({
+                        ...child,
+                        props: {
+                            ...child.props,
+                            onClick: () => {
                                 setToggle(false);
-                            } }) }));
+                            }
+                        }
+                    });
                 }
             }
             return child;

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

@@ -8,15 +8,22 @@ import { ButtonFilters } from './filter-components/button-filters';
 import { Icon } from '../../atoms/icon';
 import { Button } from '../../atoms/button';
 const setValue = (element, value) => {
-    return Object.assign(Object.assign({}, element), { props: Object.assign(Object.assign({}, element.props), { value: value }) });
+    return {
+        ...element,
+        props: {
+            ...element.props,
+            value: 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];
@@ -27,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: "p-0" },
-                    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 }),
@@ -41,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';