@tap-payments/os-micro-frontend-shared 0.1.241 → 0.1.243
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/build/components/SelectDropdown/SelectDropdown.d.ts +3 -1
- package/build/components/SelectDropdown/SelectDropdown.js +4 -3
- package/build/components/SelectWithSearch/SelectWithSearch.d.ts +1 -1
- package/build/components/SelectWithSearch/SelectWithSearch.js +3 -3
- package/build/components/SelectWithSearch/type.d.ts +1 -0
- package/build/constants/table/cell/chargeTableCellWidth.d.ts +1 -1
- package/build/constants/table/cell/chargeTableCellWidth.js +1 -1
- package/package.json +1 -1
|
@@ -10,7 +10,9 @@ interface DropdownI {
|
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
listWrapperSx?: SxProps;
|
|
12
12
|
hideArrow?: boolean;
|
|
13
|
+
onClear?: () => void;
|
|
14
|
+
hasValue?: boolean;
|
|
13
15
|
}
|
|
14
|
-
declare function SelectDropdown({ onClose, open, anchorEl, trigger, onOpen, children, disabled, listWrapperSx, hideArrow }: DropdownI): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare function SelectDropdown({ onClose, open, anchorEl, trigger, onOpen, children, disabled, listWrapperSx, hideArrow, onClear, hasValue }: DropdownI): import("react/jsx-runtime").JSX.Element;
|
|
15
17
|
declare const _default: import("react").MemoExoticComponent<typeof SelectDropdown>;
|
|
16
18
|
export default _default;
|
|
@@ -2,10 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { memo } from 'react';
|
|
3
3
|
import Box from '@mui/material/Box';
|
|
4
4
|
import Popover from '@mui/material/Popover';
|
|
5
|
-
import { blueDropdownArrowIcon, downArrowIcon } from '../../constants/index.js';
|
|
5
|
+
import { blueDropdownArrowIcon, closeXIcon, downArrowIcon } from '../../constants/index.js';
|
|
6
6
|
import { HeaderWrapper, ListWrapper } from './style';
|
|
7
|
-
function SelectDropdown({ onClose, open, anchorEl, trigger, onOpen, children, disabled, listWrapperSx, hideArrow }) {
|
|
8
|
-
|
|
7
|
+
function SelectDropdown({ onClose, open, anchorEl, trigger, onOpen, children, disabled, listWrapperSx, hideArrow, onClear, hasValue }) {
|
|
8
|
+
const isClearButtonVisible = onClear && hasValue;
|
|
9
|
+
return (_jsxs(HeaderWrapper, Object.assign({ open: open, onClick: onOpen, "data-testid": "Dropdown", disabled: disabled }, { children: [_jsx(Box, Object.assign({ sx: { flex: 1, cursor: 'pointer' } }, { children: trigger })), !hideArrow && !isClearButtonVisible && (_jsx(Box, Object.assign({ sx: { width: 16, height: 16, display: 'flex', alignItems: 'center', position: 'absolute', right: 8 } }, { children: _jsx(Box, { component: "img", src: open ? blueDropdownArrowIcon : downArrowIcon, alt: "arrow", sx: Object.assign({ width: 16, height: 16 }, (open && { width: 12, height: 12, padding: '2px' })) }) }))), isClearButtonVisible && (_jsx(Box, Object.assign({ sx: { width: 16, height: 16, display: 'flex', alignItems: 'center', position: 'absolute', right: 8, cursor: 'pointer' } }, { children: _jsx(Box, { component: "img", src: closeXIcon, alt: "clear", onClick: onClear }) }))), _jsx(Popover, Object.assign({ open: open, anchorEl: anchorEl, sx: { width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth }, onClose: onClose, anchorOrigin: {
|
|
9
10
|
vertical: 'bottom',
|
|
10
11
|
horizontal: 'left',
|
|
11
12
|
}, slotProps: {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { SelectWithSearchProps } from './type';
|
|
2
|
-
declare function SelectWithSearch({ options, onChangeOption, selectedOption, placeholder, label, isLoading, renderOption, iconUrl, disabled, }: SelectWithSearchProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare function SelectWithSearch({ options, onChangeOption, selectedOption, placeholder, label, isLoading, renderOption, iconUrl, disabled, onClearValue, }: SelectWithSearchProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default SelectWithSearch;
|
|
@@ -6,7 +6,7 @@ import { InputStyled, Container, ItemStyled } from './style';
|
|
|
6
6
|
import { InputBase } from '../InputBase';
|
|
7
7
|
import SelectDropdown from '../SelectDropdown';
|
|
8
8
|
import { CircularProgress } from '@mui/material';
|
|
9
|
-
function SelectWithSearch({ options, onChangeOption, selectedOption, placeholder, label, isLoading, renderOption, iconUrl, disabled, }) {
|
|
9
|
+
function SelectWithSearch({ options, onChangeOption, selectedOption, placeholder, label, isLoading, renderOption, iconUrl, disabled, onClearValue, }) {
|
|
10
10
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
11
11
|
const [searchValue, setSearchValue] = useState('');
|
|
12
12
|
const open = Boolean(anchorEl);
|
|
@@ -32,9 +32,9 @@ function SelectWithSearch({ options, onChangeOption, selectedOption, placeholder
|
|
|
32
32
|
});
|
|
33
33
|
}, [options, searchValue]);
|
|
34
34
|
const startAdornment = useMemo(() => (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', maxWidth: 16 } }, { children: _jsx(Box, { component: "img", src: iconUrl, alt: "icon", sx: { maxWidth: 12, height: 12 } }) }))), [iconUrl]);
|
|
35
|
-
return (_jsx(SelectDropdown, Object.assign({ disabled: disabled, open: open, anchorEl: anchorEl, onOpen: (e) => !disabled && openDropdown(e), onClose: closeDropdown, trigger: _jsx(InputBase, { name: "name", placeholder: "Please Select", hasError: false, label: label, sx: { cursor: 'pointer' }, value: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '', InputLabelProps: {
|
|
35
|
+
return (_jsx(SelectDropdown, Object.assign({ disabled: disabled, open: open, anchorEl: anchorEl, onOpen: (e) => !disabled && openDropdown(e), onClose: closeDropdown, hasValue: !!(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value), onClear: onClearValue, trigger: _jsx(InputBase, { name: "name", placeholder: "Please Select", hasError: false, label: label, sx: { cursor: 'pointer' }, value: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '', InputLabelProps: {
|
|
36
36
|
filled: !!(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label),
|
|
37
|
-
}, InputProps: Object.assign({ disableUnderline: true }, (!!iconUrl && {
|
|
37
|
+
}, disabled: disabled, InputProps: Object.assign({ disableUnderline: true }, (!!iconUrl && {
|
|
38
38
|
startAdornment,
|
|
39
39
|
})) }) }, { children: _jsxs(Container, { children: [_jsx(InputStyled, { placeholder: placeholder || 'Select', endAdornment: endAdornment, onClick: (e) => {
|
|
40
40
|
e.stopPropagation();
|
package/package.json
CHANGED