@leav/ui 0.2.6 → 0.2.8

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

@@ -1,24 +1,38 @@
-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;
@@ -28,17 +42,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,
@@ -55,29 +69,29 @@ function AttributesList({ onSelect, selected = [], multiple = true, showCreateBu
             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);
@@ -87,13 +101,15 @@ function AttributesList({ onSelect, selected = [], multiple = true, showCreateBu
         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]
+                    })
                 }
             });
         }
@@ -121,7 +137,16 @@ function AttributesList({ onSelect, selected = [], multiple = true, showCreateBu
         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 = [
         {
@@ -134,7 +159,7 @@ function AttributesList({ onSelect, selected = [], multiple = true, showCreateBu
                     preview: null,
                     color: null
                 };
-                return _jsx(EntityCard, { entity: attributeIdentity, size: PreviewSize.small });
+                return _jsx(EntityCard, {entity: attributeIdentity, size: PreviewSize.small});
             }
         },
         {
@@ -142,7 +167,11 @@ function AttributesList({ onSelect, selected = [], multiple = true, showCreateBu
             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
@@ -159,7 +188,16 @@ function AttributesList({ onSelect, selected = [], multiple = true, showCreateBu
             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
@@ -178,8 +216,17 @@ function AttributesList({ onSelect, selected = [], multiple = true, showCreateBu
         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]);
@@ -188,22 +235,69 @@ function AttributesList({ onSelect, selected = [], multiple = true, showCreateBu
             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,8 +43,29 @@ 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,5 +7,11 @@ 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,41 +1,55 @@
-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
         },
@@ -54,7 +68,7 @@ function AttributesSelectionList({ library, multiple = true, selectedAttributes
     if (loading) {
         return _jsx(Spin, {});
     }
-    const _handleSearchChange = (search) => {
+    const _handleSearchChange = search => {
         setSearchValue(search);
     };
     const attributesList = state.attributes.filter(attribute => {
@@ -64,7 +78,66 @@ function AttributesSelectionList({ library, multiple = true, selectedAttributes
         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;