@leav/ui 0.2.8 → 0.3.0

package/dist/components/AttributePicker/AttributesList/AttributesList.js

@@ -1,38 +1,24 @@
-import {jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment} from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright LEAV Solutions 2017
 // This file is released under LGPL V3
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {PlusOutlined, SearchOutlined} from '@ant-design/icons';
-import {useApolloClient} from '@apollo/client';
-import {localizedTranslation} from '@leav/utils';
-import {Table} from 'antd';
-import {KitButton, KitInput, KitTag} from 'aristid-ds';
-import {useEffect, useRef, useState} from 'react';
+import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
+import { useApolloClient } from '@apollo/client';
+import { localizedTranslation } from '@leav/utils';
+import { Table } from 'antd';
+import { KitButton, KitInput, KitTag } from 'aristid-ds';
+import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-import {
-    defaultPaginationPageSize,
-    PreviewSize,
-    tagColorByAttributeFormat,
-    tagColorByAttributeType
-} from '../../../constants';
-import {useLang} from '../../../hooks';
-import {useSharedTranslation} from '../../../hooks/useSharedTranslation';
-import {
-    AttributeFormat,
-    AttributesSortableFields,
-    AttributeType,
-    PermissionsActions,
-    PermissionTypes,
-    SortOrder,
-    useGetAttributesQuery,
-    useIsAllowedQuery
-} from '../../../_gqlTypes';
-import {getAttributesQuery} from '../../../_queries/attributes/getAttributesQuery';
-import {extractPermissionFromQuery} from '../../../_utils';
-import {EditAttributeModal} from '../../EditAttributeModal';
-import {EntityCard} from '../../EntityCard';
-import {ErrorDisplay} from '../../ErrorDisplay';
-const HeaderWrapper = styled.div`
+import { defaultPaginationPageSize, PreviewSize, tagColorByAttributeFormat, tagColorByAttributeType } from '../../../constants';
+import { useLang } from '../../../hooks';
+import { useSharedTranslation } from '../../../hooks/useSharedTranslation';
+import { AttributeFormat, AttributesSortableFields, AttributeType, PermissionsActions, PermissionTypes, SortOrder, useGetAttributesQuery, useIsAllowedQuery } from '../../../_gqlTypes';
+import { getAttributesQuery } from '../../../_queries/attributes/getAttributesQuery';
+import { extractPermissionFromQuery } from '../../../_utils';
+import { EditAttributeModal } from '../../EditAttributeModal';
+import { EntityCard } from '../../EntityCard';
+import { ErrorDisplay } from '../../ErrorDisplay';
+const HeaderWrapper = styled.div `
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -42,17 +28,17 @@ const HeaderWrapper = styled.div`
         flex-grow: 1;
     }
 `;
-function AttributesList({onSelect, selected = [], multiple = true, showCreateButton = true, baseFilters}) {
+function AttributesList({ onSelect, selected = [], multiple = true, showCreateButton = true, baseFilters }) {
     var _a, _b, _c;
-    const {t} = useSharedTranslation();
-    const {lang} = useLang();
+    const { t } = useSharedTranslation();
+    const { lang } = useLang();
     const inputRef = useRef(null);
     const [pageSize, setPageSize] = useState(defaultPaginationPageSize);
     const [currentPage, setCurrentPage] = useState(1);
     const [sort, setSort] = useState();
     const [filters, setFilters] = useState({});
     const [tableData, setTableData] = useState([]);
-    const {loading, error, data} = useGetAttributesQuery({
+    const { loading, error, data } = useGetAttributesQuery({
         variables: {
             pagination: {
                 limit: pageSize,
@@ -69,29 +55,29 @@ function AttributesList({onSelect, selected = [], multiple = true, showCreateBut
             actions: [PermissionsActions.admin_create_attribute]
         }
     });
-    const canCreate =
-        showCreateButton && extractPermissionFromQuery(isAllowedQueryResult, PermissionsActions.admin_create_attribute);
+    const canCreate = showCreateButton && extractPermissionFromQuery(isAllowedQueryResult, PermissionsActions.admin_create_attribute);
     const [selectedRowKeys, setSelectedRowKeys] = useState(selected);
     const [isNewAttributeModalOpen, setIsNewAttributeModalOpen] = useState(false);
     const client = useApolloClient();
-    const _handleSelectionChange = selection => {
+    const _handleSelectionChange = (selection) => {
         setSelectedRowKeys(selection);
         onSelect(selection);
     };
-    const _handleRowClick = record => {
+    const _handleRowClick = (record) => {
         let newSelection;
         if (selectedRowKeys.indexOf(record.key) === -1) {
             newSelection = multiple ? [...selectedRowKeys, record.key] : [record.key]; // Add to selection
-        } else {
+        }
+        else {
             newSelection = multiple ? selectedRowKeys.filter(key => key !== record.key) : []; // Remove from selection
         }
         setSelectedRowKeys(newSelection);
         onSelect(newSelection);
     };
-    const _handleSearchSubmit = e => {
-        setFilters(Object.assign(Object.assign({}, filters), {label: `%${e.currentTarget.value}%`}));
+    const _handleSearchSubmit = (e) => {
+        setFilters(Object.assign(Object.assign({}, filters), { label: `%${e.currentTarget.value}%` }));
     };
-    const _handleSearchChange = e => {
+    const _handleSearchChange = (e) => {
         // Handle clearing input only. Submitting input is otherwise handled by "onPressEnter"
         if (!e.currentTarget.value) {
             _handleSearchSubmit(e);
@@ -101,15 +87,13 @@ function AttributesList({onSelect, selected = [], multiple = true, showCreateBut
         setIsNewAttributeModalOpen(true);
     };
     const _handleCloseNewAttribute = () => setIsNewAttributeModalOpen(false);
-    const _handlePostCreate = async newAttribute => {
-        const allAttributesData = client.readQuery({query: getAttributesQuery});
+    const _handlePostCreate = async (newAttribute) => {
+        const allAttributesData = client.readQuery({ query: getAttributesQuery });
         if (allAttributesData) {
             client.writeQuery({
                 query: getAttributesQuery,
                 data: {
-                    attributes: Object.assign(Object.assign({}, allAttributesData.attributes), {
-                        list: [newAttribute, ...allAttributesData.attributes.list]
-                    })
+                    attributes: Object.assign(Object.assign({}, allAttributesData.attributes), { list: [newAttribute, ...allAttributesData.attributes.list] })
                 }
             });
         }
@@ -137,16 +121,7 @@ function AttributesList({onSelect, selected = [], multiple = true, showCreateBut
         setFilters(newFilters);
     };
     if (error || isAllowedQueryResult.error) {
-        return _jsx(ErrorDisplay, {
-            message:
-                (error === null || error === void 0 ? void 0 : error.message) ||
-                ((_a =
-                    isAllowedQueryResult === null || isAllowedQueryResult === void 0
-                        ? void 0
-                        : isAllowedQueryResult.error) === null || _a === void 0
-                    ? void 0
-                    : _a.message)
-        });
+        return _jsx(ErrorDisplay, { message: (error === null || error === void 0 ? void 0 : error.message) || ((_a = isAllowedQueryResult === null || isAllowedQueryResult === void 0 ? void 0 : isAllowedQueryResult.error) === null || _a === void 0 ? void 0 : _a.message) });
     }
     const columns = [
         {
@@ -159,7 +134,7 @@ function AttributesList({onSelect, selected = [], multiple = true, showCreateBut
                     preview: null,
                     color: null
                 };
-                return _jsx(EntityCard, {entity: attributeIdentity, size: PreviewSize.small});
+                return _jsx(EntityCard, { entity: attributeIdentity, size: PreviewSize.small });
             }
         },
         {
@@ -167,11 +142,7 @@ function AttributesList({onSelect, selected = [], multiple = true, showCreateBut
             dataIndex: 'type',
             key: 'type',
             width: '150px',
-            render: type =>
-                _jsx(
-                    KitTag,
-                    Object.assign({color: tagColorByAttributeType[type]}, {children: t(`attributes.type_${type}`)})
-                ),
+            render: (type) => (_jsx(KitTag, Object.assign({ color: tagColorByAttributeType[type] }, { children: t(`attributes.type_${type}`) }))),
             filters: Object.values(AttributeType).map(type => ({
                 text: t(`attributes.type_${type}`),
                 value: type
@@ -188,16 +159,7 @@ function AttributesList({onSelect, selected = [], multiple = true, showCreateBut
             dataIndex: 'format',
             key: 'format',
             width: '150px',
-            render: format =>
-                format
-                    ? _jsx(
-                          KitTag,
-                          Object.assign(
-                              {color: tagColorByAttributeFormat[format]},
-                              {children: t(`attributes.format_${format}`)}
-                          )
-                      )
-                    : null,
+            render: (format) => format ? (_jsx(KitTag, Object.assign({ color: tagColorByAttributeFormat[format] }, { children: t(`attributes.format_${format}`) }))) : null,
             filters: Object.values(AttributeFormat).map(format => ({
                 text: t(`attributes.format_${format}`),
                 value: format
@@ -216,17 +178,8 @@ function AttributesList({onSelect, selected = [], multiple = true, showCreateBut
         if (loading || !data) {
             return;
         }
-        const newTableData = (
-            (_a = data === null || data === void 0 ? void 0 : data.attributes) === null || _a === void 0
-                ? void 0
-                : _a.list
-        )
-            ? [...data.attributes.list].map(attribute =>
-                  Object.assign(Object.assign({}, attribute), {
-                      key: attribute.id,
-                      label: localizedTranslation(attribute.label, lang)
-                  })
-              )
+        const newTableData = ((_a = data === null || data === void 0 ? void 0 : data.attributes) === null || _a === void 0 ? void 0 : _a.list)
+            ? [...data.attributes.list].map(attribute => (Object.assign(Object.assign({}, attribute), { key: attribute.id, label: localizedTranslation(attribute.label, lang) })))
             : [];
         setTableData(newTableData);
     }, [loading, data]);
@@ -235,69 +188,22 @@ function AttributesList({onSelect, selected = [], multiple = true, showCreateBut
             inputRef.current.focus();
         }
     }, [inputRef]);
-    const tableHeader = _jsxs(HeaderWrapper, {
-        children: [
-            _jsx(KitInput, {
-                onPressEnter: _handleSearchSubmit,
-                onChange: _handleSearchChange,
-                placeholder: t('global.search') + '...',
-                allowClear: true,
-                suffix: _jsx(SearchOutlined, {}),
+    const tableHeader = (_jsxs(HeaderWrapper, { children: [_jsx(KitInput, { onPressEnter: _handleSearchSubmit, onChange: _handleSearchChange, placeholder: t('global.search') + '...', allowClear: true, suffix: _jsx(SearchOutlined, {}), 
                 // @ts-ignore - ref is a valid prop
-                ref: inputRef
-            }),
-            canCreate &&
-                _jsx(
-                    KitButton,
-                    Object.assign(
-                        {type: 'primary', icon: _jsx(PlusOutlined, {}), onClick: _handleClickNewAttribute},
-                        {children: t('attributes.new_attribute')}
-                    )
-                )
-        ]
-    });
-    return _jsxs(_Fragment, {
-        children: [
-            _jsx(Table, {
-                loading: loading,
-                size: 'middle',
-                rowSelection: {
+                ref: inputRef }), canCreate && (_jsx(KitButton, Object.assign({ type: "primary", icon: _jsx(PlusOutlined, {}), onClick: _handleClickNewAttribute }, { children: t('attributes.new_attribute') })))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Table, { loading: loading, size: "middle", rowSelection: {
                     type: multiple ? 'checkbox' : 'radio',
                     selectedRowKeys,
                     onChange: _handleSelectionChange
-                },
-                columns: columns,
-                dataSource: tableData,
-                bordered: true,
-                pagination: {
+                }, columns: columns, dataSource: tableData, bordered: true, pagination: {
                     position: ['bottomCenter'],
                     pageSize,
                     current: currentPage,
-                    total:
-                        (_c =
-                            (_b = data === null || data === void 0 ? void 0 : data.attributes) === null || _b === void 0
-                                ? void 0
-                                : _b.totalCount) !== null && _c !== void 0
-                            ? _c
-                            : 0,
-                    showTotal: total => t('global.total_count', {total})
-                },
-                scroll: {y: 'calc(95vh - 20rem)'},
-                title: () => tableHeader,
-                onRow: record => ({
+                    total: (_c = (_b = data === null || data === void 0 ? void 0 : data.attributes) === null || _b === void 0 ? void 0 : _b.totalCount) !== null && _c !== void 0 ? _c : 0,
+                    showTotal: total => t('global.total_count', { total })
+                }, scroll: { y: 'calc(95vh - 20rem)' }, title: () => tableHeader, onRow: record => ({
                     onClick: () => _handleRowClick(record)
-                }),
-                onChange: _handleChange
-            }),
-            isNewAttributeModalOpen &&
-                _jsx(EditAttributeModal, {
-                    open: isNewAttributeModalOpen,
-                    onClose: _handleCloseNewAttribute,
-                    onPostCreate: _handlePostCreate,
-                    width: 790
-                })
-        ]
-    });
+                }), onChange: _handleChange }), isNewAttributeModalOpen && (_jsx(EditAttributeModal, { open: isNewAttributeModalOpen, onClose: _handleCloseNewAttribute, onPostCreate: _handlePostCreate, width: 790 }))] }));
 }
 export default AttributesList;
-//# sourceMappingURL=AttributesList.js.map
+//# sourceMappingURL=AttributesList.js.map

package/dist/components/AttributePicker/AttributesList/index.d.ts

@@ -1 +1 @@
-export {default as AttributesList} from './AttributesList';
+export { default as AttributesList } from './AttributesList';

package/dist/components/AttributePicker/AttributesList/index.js

@@ -1,5 +1,5 @@
 // Copyright LEAV Solutions 2017
 // This file is released under LGPL V3
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-export {default as AttributesList} from './AttributesList';
-//# sourceMappingURL=index.js.map
+export { default as AttributesList } from './AttributesList';
+//# sourceMappingURL=index.js.map

package/dist/components/AttributePicker/index.d.ts

@@ -1 +1 @@
-export {default as AttributePicker} from './AttributePicker';
+export { default as AttributePicker } from './AttributePicker';

package/dist/components/AttributePicker/index.js

@@ -1,5 +1,5 @@
 // Copyright LEAV Solutions 2017
 // This file is released under LGPL V3
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-export {default as AttributePicker} from './AttributePicker';
-//# sourceMappingURL=index.js.map
+export { default as AttributePicker } from './AttributePicker';
+//# sourceMappingURL=index.js.map

package/dist/components/AttributesSelectionList/Attribute/Attribute.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import {ICommonAttributeComponentProps} from '../_types';
-declare function Attribute({attribute, path, library, parentAttribute}: ICommonAttributeComponentProps): JSX.Element;
+import { ICommonAttributeComponentProps } from '../_types';
+declare function Attribute({ attribute, path, library, parentAttribute }: ICommonAttributeComponentProps): JSX.Element;
 export default Attribute;

package/dist/components/AttributesSelectionList/Attribute/Attribute.js

@@ -1,17 +1,17 @@
-import {jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright LEAV Solutions 2017
 // This file is released under LGPL V3
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {localizedTranslation} from '@leav/utils';
-import {Checkbox, Radio, Space} from 'antd';
+import { localizedTranslation } from '@leav/utils';
+import { Checkbox, Radio, Space } from 'antd';
 import styled from 'styled-components';
-import {themeVars} from '../../../antdTheme';
-import {useLang} from '../../../hooks';
-import {attributeToSelectedAttribute} from '../helpers/attributeToSelectedAttribute';
-import {AttributesSelectionListActionTypes} from '../reducer/attributesSelectionListReducer';
-import {useAttributesSelectionListState} from '../reducer/attributesSelectionListStateContext';
-import {SmallText, TextAttribute} from '../sharedComponents';
-const Item = styled.div`
+import { themeVars } from '../../../antdTheme';
+import { useLang } from '../../../hooks';
+import { attributeToSelectedAttribute } from '../helpers/attributeToSelectedAttribute';
+import { AttributesSelectionListActionTypes } from '../reducer/attributesSelectionListReducer';
+import { useAttributesSelectionListState } from '../reducer/attributesSelectionListStateContext';
+import { SmallText, TextAttribute } from '../sharedComponents';
+const Item = styled.div `
     padding: 0.5em;
     display: flex;
     justify-content: space-between;
@@ -25,13 +25,13 @@ const Item = styled.div`
         background-color: ${themeVars.activeColor};
     }
 `;
-const CheckboxWrapper = styled.div`
+const CheckboxWrapper = styled.div `
     margin-left: 1em;
 `;
-function Attribute({attribute, path, library, parentAttribute}) {
+function Attribute({ attribute, path, library, parentAttribute }) {
     const attributePath = [path, attribute.id].filter(p => !!p).join('.');
-    const {lang} = useLang();
-    const {state, dispatch} = useAttributesSelectionListState();
+    const { lang } = useLang();
+    const { state, dispatch } = useAttributesSelectionListState();
     const _handleClick = () => {
         dispatch({
             type: AttributesSelectionListActionTypes.TOGGLE_ATTRIBUTE_SELECTION,
@@ -43,29 +43,8 @@ function Attribute({attribute, path, library, parentAttribute}) {
         });
     };
     const label = localizedTranslation(attribute.label, lang);
-    const isSelected =
-        state.selectedAttributes.findIndex(selectedAttribute => selectedAttribute.path === attributePath) !== -1;
-    return _jsxs(
-        Item,
-        Object.assign(
-            {onClick: _handleClick, 'data-testid': 'attribute-in-list'},
-            {
-                children: [
-                    _jsxs(Space, {
-                        children: [
-                            _jsx(TextAttribute, {children: label !== null && label !== void 0 ? label : attribute.id}),
-                            label && _jsx(SmallText, {children: attribute.id})
-                        ]
-                    }),
-                    _jsx(CheckboxWrapper, {
-                        children: state.multiple
-                            ? _jsx(Checkbox, {checked: isSelected})
-                            : _jsx(Radio, {checked: isSelected})
-                    })
-                ]
-            }
-        )
-    );
+    const isSelected = state.selectedAttributes.findIndex(selectedAttribute => selectedAttribute.path === attributePath) !== -1;
+    return (_jsxs(Item, Object.assign({ onClick: _handleClick, "data-testid": "attribute-in-list" }, { children: [_jsxs(Space, { children: [_jsx(TextAttribute, { children: label !== null && label !== void 0 ? label : attribute.id }), label && _jsx(SmallText, { children: attribute.id })] }), _jsx(CheckboxWrapper, { children: state.multiple ? _jsx(Checkbox, { checked: isSelected }) : _jsx(Radio, { checked: isSelected }) })] })));
 }
 export default Attribute;
-//# sourceMappingURL=Attribute.js.map
+//# sourceMappingURL=Attribute.js.map

package/dist/components/AttributesSelectionList/Attribute/index.js

@@ -3,4 +3,4 @@
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
 import Attribute from './Attribute';
 export default Attribute;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/AttributesSelectionList/AttributesSelectionList.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import {ISelectedAttribute} from '../../types/attributes';
+import { ISelectedAttribute } from '../../types/attributes';
 interface IAttributesSelectionListProps {
     library: string;
     multiple?: boolean;
@@ -7,11 +7,5 @@ interface IAttributesSelectionListProps {
     canExpandExtendedAttributes?: boolean;
     onSelectionChange: (selectedAttributes: ISelectedAttribute[]) => void;
 }
-declare function AttributesSelectionList({
-    library,
-    multiple,
-    selectedAttributes,
-    canExpandExtendedAttributes,
-    onSelectionChange
-}: IAttributesSelectionListProps): JSX.Element;
+declare function AttributesSelectionList({ library, multiple, selectedAttributes, canExpandExtendedAttributes, onSelectionChange }: IAttributesSelectionListProps): JSX.Element;
 export default AttributesSelectionList;

package/dist/components/AttributesSelectionList/AttributesSelectionList.js

@@ -1,55 +1,41 @@
-import {jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright LEAV Solutions 2017
 // This file is released under LGPL V3
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {localizedTranslation} from '@leav/utils';
-import {Input, List, Spin} from 'antd';
-import {useEffect, useReducer, useRef, useState} from 'react';
+import { localizedTranslation } from '@leav/utils';
+import { Input, List, Spin } from 'antd';
+import { useEffect, useReducer, useRef, useState } from 'react';
 import styled from 'styled-components';
-import {useLang} from '../../hooks';
-import {useSharedTranslation} from '../../hooks/useSharedTranslation';
-import {useGetAttributesByLibQuery} from '../../_gqlTypes';
-import {ErrorDisplay} from '../ErrorDisplay';
+import { useLang } from '../../hooks';
+import { useSharedTranslation } from '../../hooks/useSharedTranslation';
+import { useGetAttributesByLibQuery } from '../../_gqlTypes';
+import { ErrorDisplay } from '../ErrorDisplay';
 import Attribute from './Attribute';
-import attributeSelectionListReducer, {
-    AttributesSelectionListActionTypes,
-    initialState
-} from './reducer/attributesSelectionListReducer';
-import {AttributesSelectionListStateContext} from './reducer/attributesSelectionListStateContext';
+import attributeSelectionListReducer, { AttributesSelectionListActionTypes, initialState } from './reducer/attributesSelectionListReducer';
+import { AttributesSelectionListStateContext } from './reducer/attributesSelectionListStateContext';
 import SelectedAttributesList from './SelectedAttributesList';
-import {CustomForm} from './sharedComponents';
-const ListWrapper = styled.div`
+import { CustomForm } from './sharedComponents';
+const ListWrapper = styled.div `
     padding: 0.3rem 1rem 0 1rem;
     overflow-y: scroll;
     height: calc(100vh - 15rem);
 `;
-const Wrapper = styled.div`
+const Wrapper = styled.div `
     display: Grid;
     grid-template-columns: repeat(${props => (props.$multiple ? 2 : 1)}, 1fr);
     grid-column-gap: 0.3rem;
 `;
-function AttributesSelectionList({
-    library,
-    multiple = true,
-    selectedAttributes = [],
-    canExpandExtendedAttributes = true,
-    onSelectionChange
-}) {
-    const {t} = useSharedTranslation();
+function AttributesSelectionList({ library, multiple = true, selectedAttributes = [], canExpandExtendedAttributes = true, onSelectionChange }) {
+    const { t } = useSharedTranslation();
     const searchRef = useRef(null);
-    const {lang} = useLang();
+    const { lang } = useLang();
     const [searchValue, setSearchValue] = useState('');
-    const [state, dispatch] = useReducer(
-        attributeSelectionListReducer,
-        Object.assign(Object.assign({}, initialState), {
-            library,
-            multiple,
-            selectedAttributes,
-            canExpandExtendedAttributes
-        })
-    );
+    const [state, dispatch] = useReducer(attributeSelectionListReducer, Object.assign(Object.assign({}, initialState), { library,
+        multiple,
+        selectedAttributes,
+        canExpandExtendedAttributes }));
     // Retrieve attributes list
-    const {loading, error} = useGetAttributesByLibQuery({
+    const { loading, error } = useGetAttributesByLibQuery({
         variables: {
             library
         },
@@ -68,7 +54,7 @@ function AttributesSelectionList({
     if (loading) {
         return _jsx(Spin, {});
     }
-    const _handleSearchChange = search => {
+    const _handleSearchChange = (search) => {
         setSearchValue(search);
     };
     const attributesList = state.attributes.filter(attribute => {
@@ -78,66 +64,7 @@ function AttributesSelectionList({
         const attributeLabel = localizedTranslation(attribute.label, lang).toLowerCase();
         return attributeLabel.indexOf(searchValue) !== -1 || attribute.id.indexOf(searchValue) !== -1;
     });
-    return _jsx(
-        AttributesSelectionListStateContext.Provider,
-        Object.assign(
-            {value: {state, dispatch}},
-            {
-                children: _jsxs(
-                    Wrapper,
-                    Object.assign(
-                        {$multiple: state.multiple},
-                        {
-                            children: [
-                                _jsxs(
-                                    ListWrapper,
-                                    Object.assign(
-                                        {'data-testid': 'attributes-list'},
-                                        {
-                                            children: [
-                                                _jsx(CustomForm, {
-                                                    children: _jsx(Input.Search, {
-                                                        placeholder: t('attributes-list.search'),
-                                                        'aria-label': 'search',
-                                                        ref: searchRef,
-                                                        onChange: event => {
-                                                            var _a;
-                                                            return _handleSearchChange(
-                                                                (_a = event.target.value) !== null && _a !== void 0
-                                                                    ? _a
-                                                                    : ''
-                                                            );
-                                                        }
-                                                    })
-                                                }),
-                                                error
-                                                    ? _jsx(ErrorDisplay, {message: error.message})
-                                                    : _jsx(List, {
-                                                          children: attributesList.map(attribute =>
-                                                              _jsx(
-                                                                  Attribute,
-                                                                  {
-                                                                      attribute: attribute,
-                                                                      depth: 0,
-                                                                      library: library,
-                                                                      path: ''
-                                                                  },
-                                                                  attribute.id
-                                                              )
-                                                          )
-                                                      })
-                                            ]
-                                        }
-                                    )
-                                ),
-                                multiple && _jsx(SelectedAttributesList, {'data-testid': 'selected-attributes-list'})
-                            ]
-                        }
-                    )
-                )
-            }
-        )
-    );
+    return (_jsx(AttributesSelectionListStateContext.Provider, Object.assign({ value: { state, dispatch } }, { children: _jsxs(Wrapper, Object.assign({ "$multiple": state.multiple }, { children: [_jsxs(ListWrapper, Object.assign({ "data-testid": "attributes-list" }, { children: [_jsx(CustomForm, { children: _jsx(Input.Search, { placeholder: t('attributes-list.search'), "aria-label": "search", ref: searchRef, onChange: event => { var _a; return _handleSearchChange((_a = event.target.value) !== null && _a !== void 0 ? _a : ''); } }) }), error ? (_jsx(ErrorDisplay, { message: error.message })) : (_jsx(List, { children: attributesList.map(attribute => (_jsx(Attribute, { attribute: attribute, depth: 0, library: library, path: "" }, attribute.id))) }))] })), multiple && _jsx(SelectedAttributesList, { "data-testid": "selected-attributes-list" })] })) })));
 }
 export default AttributesSelectionList;
-//# sourceMappingURL=AttributesSelectionList.js.map
+//# sourceMappingURL=AttributesSelectionList.js.map

package/dist/components/AttributesSelectionList/SelectedAttributesList/SelectedAttribute/SelectedAttribute.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import {ISelectedAttribute} from '../../../../types/attributes';
+import { ISelectedAttribute } from '../../../../types/attributes';
 interface ISelectedAttributeProps {
     selectedAttribute: ISelectedAttribute;
     handleProps: any;
 }
-declare const SelectedAttribute: ({selectedAttribute, handleProps}: ISelectedAttributeProps) => JSX.Element;
+declare const SelectedAttribute: ({ selectedAttribute, handleProps }: ISelectedAttributeProps) => JSX.Element;
 export default SelectedAttribute;