@npm_leadtech/legal-lib-components 7.25.1 → 7.25.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/components/atoms/SearchSelect/SearchSelect.js +7 -1
- package/dist/src/components/atoms/SearchSelect/SearchSelect.tsx +7 -2
- package/dist/src/components/organisms/MenuItems/MenuItems.styled.js +1 -1
- package/dist/src/components/organisms/MenuItems/MenuItems.styled.ts +1 -1
- package/dist/src/components/sections/Header/Header.js +1 -1
- package/dist/src/components/sections/Header/Header.styled.js +0 -1
- package/dist/src/components/sections/Header/Header.styled.ts +0 -1
- package/dist/src/components/sections/Header/Header.tsx +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
2
4
|
import Select from 'react-select';
|
|
3
5
|
import { SearchSelectStyled } from './SearchSelect.styled';
|
|
4
6
|
import classNames from 'classnames';
|
|
@@ -23,6 +25,7 @@ const getSortedItems = (items, isSortAlphabetically = false) => {
|
|
|
23
25
|
};
|
|
24
26
|
const SearchSelect = (props) => {
|
|
25
27
|
const { customClass = '', menuPlacement = MenuPlacement.bottom } = props;
|
|
28
|
+
const [menuPortalTarget, setMenuPortalTarget] = useState();
|
|
26
29
|
const sortedItems = getSortedItems(props.items, props.isSortAlphabetically);
|
|
27
30
|
const defaultValue = props.defaultValue;
|
|
28
31
|
const classnames = classNames({
|
|
@@ -31,6 +34,9 @@ const SearchSelect = (props) => {
|
|
|
31
34
|
[customClass]: props.customClass,
|
|
32
35
|
'--group-invalid': !props.isValidGroup
|
|
33
36
|
});
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
setMenuPortalTarget(document.body);
|
|
39
|
+
}, []);
|
|
34
40
|
const handleChange = (selectedOption) => {
|
|
35
41
|
const selectObject = {
|
|
36
42
|
target: {
|
|
@@ -51,6 +57,6 @@ const SearchSelect = (props) => {
|
|
|
51
57
|
};
|
|
52
58
|
},
|
|
53
59
|
menuPortal: (base) => ({ ...base, zIndex: 9999 })
|
|
54
|
-
}, id: props.name, name: props.name, className: 'legal-selector', defaultValue: defaultValue, onChange: handleChange, isDisabled: props.disabled, isSearchable: props.isSearchable !== false, options: sortedItems, escapeClearsValue: true, isClearable: true, menuPortalTarget:
|
|
60
|
+
}, id: props.name, name: props.name, className: 'legal-selector', defaultValue: defaultValue, onChange: handleChange, isDisabled: props.disabled, isSearchable: props.isSearchable !== false, options: sortedItems, escapeClearsValue: true, isClearable: true, menuPortalTarget: menuPortalTarget, placeholder: props.placeholder, defaultMenuIsOpen: props.defaultMenuIsOpen, menuPlacement: menuPlacement })] })] }));
|
|
55
61
|
};
|
|
56
62
|
export default SearchSelect;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
2
|
|
|
3
|
-
import React, { type FC } from 'react'
|
|
3
|
+
import React, { type FC, useEffect, useState } from 'react'
|
|
4
4
|
import Select from 'react-select'
|
|
5
5
|
|
|
6
6
|
import { type SearchSelectProps } from './SearchSelectProps.types'
|
|
@@ -28,6 +28,7 @@ const getSortedItems = (items: any, isSortAlphabetically: boolean | undefined =
|
|
|
28
28
|
|
|
29
29
|
const SearchSelect: FC<SearchSelectProps> = (props) => {
|
|
30
30
|
const { customClass = '', menuPlacement = MenuPlacement.bottom } = props
|
|
31
|
+
const [menuPortalTarget, setMenuPortalTarget] = useState<HTMLElement | undefined>()
|
|
31
32
|
const sortedItems = getSortedItems(props.items, props.isSortAlphabetically)
|
|
32
33
|
const defaultValue = props.defaultValue as unknown as string
|
|
33
34
|
|
|
@@ -38,6 +39,10 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
|
|
|
38
39
|
'--group-invalid': !props.isValidGroup
|
|
39
40
|
})
|
|
40
41
|
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
setMenuPortalTarget(document.body)
|
|
44
|
+
}, [])
|
|
45
|
+
|
|
41
46
|
const handleChange = (selectedOption): void => {
|
|
42
47
|
const selectObject = {
|
|
43
48
|
target: {
|
|
@@ -90,7 +95,7 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
|
|
|
90
95
|
options={sortedItems}
|
|
91
96
|
escapeClearsValue={true}
|
|
92
97
|
isClearable={true}
|
|
93
|
-
menuPortalTarget={
|
|
98
|
+
menuPortalTarget={menuPortalTarget}
|
|
94
99
|
placeholder={props.placeholder}
|
|
95
100
|
defaultMenuIsOpen={props.defaultMenuIsOpen}
|
|
96
101
|
menuPlacement={menuPlacement}
|
|
@@ -5,7 +5,7 @@ import { HeaderStyled } from './Header.styled';
|
|
|
5
5
|
import { NavMenu } from '../../organisms/NavMenu';
|
|
6
6
|
const Header = forwardRef(({ mainHeaderProps, topBarProps, navMenuProps }, ref) => {
|
|
7
7
|
const { classnames, siteName } = mainHeaderProps;
|
|
8
|
-
return (_jsxs(HeaderStyled, { className: `header ${classnames}`, ref: ref, id: 'header', children: [_jsx(TopBar, { ...topBarProps }), _jsxs("span", { itemScope: true, itemType: 'https://www.schema.org/Brand', className: '
|
|
8
|
+
return (_jsxs(HeaderStyled, { className: `header ${classnames}`, ref: ref, id: 'header', children: [_jsx(TopBar, { ...topBarProps }), _jsxs("span", { itemScope: true, itemType: 'https://www.schema.org/Brand', className: 'flex header__inner', children: [_jsx("a", { "data-qa": 'Header_Logo', className: 'header__logo', href: '/', children: _jsx(Logo, { siteName: siteName, width: '188', height: '32' }) }), _jsx(NavMenu, { ...navMenuProps })] })] }));
|
|
9
9
|
});
|
|
10
10
|
Header.displayName = 'Header';
|
|
11
11
|
export default Header;
|
|
@@ -12,7 +12,7 @@ const Header = forwardRef<HTMLDivElement, HeaderProps>(
|
|
|
12
12
|
return (
|
|
13
13
|
<HeaderStyled className={`header ${classnames}`} ref={ref} id='header'>
|
|
14
14
|
<TopBar {...topBarProps} />
|
|
15
|
-
<span itemScope itemType='https://www.schema.org/Brand' className={'
|
|
15
|
+
<span itemScope itemType='https://www.schema.org/Brand' className={'flex header__inner'}>
|
|
16
16
|
<a data-qa={'Header_Logo'} className='header__logo' href='/'>
|
|
17
17
|
<Logo siteName={siteName} width='188' height='32' />
|
|
18
18
|
</a>
|