@tap-payments/os-micro-frontend-shared 0.1.241 → 0.1.242

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.
Files changed (6) hide show
  1. package/build/components/SelectDropdown/SelectDropdown.d.ts +3 -1
  2. package/build/components/SelectDropdown/SelectDropdown.js +4 -3
  3. package/build/components/SelectWithSearch/SelectWithSearch.d.ts +1 -1
  4. package/build/components/SelectWithSearch/SelectWithSearch.js +3 -3
  5. package/build/components/SelectWithSearch/type.d.ts +1 -0
  6. package/package.json +1 -1
package/build/components/SelectDropdown/SelectDropdown.d.ts CHANGED
@@ -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;
package/build/components/SelectDropdown/SelectDropdown.js CHANGED
@@ -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
- 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 && (_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' })) }) }))), _jsx(Popover, Object.assign({ open: open, anchorEl: anchorEl, sx: { width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth }, onClose: onClose, anchorOrigin: {
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: {
package/build/components/SelectWithSearch/SelectWithSearch.d.ts CHANGED
@@ -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;
package/build/components/SelectWithSearch/SelectWithSearch.js CHANGED
@@ -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/build/components/SelectWithSearch/type.d.ts CHANGED
@@ -15,4 +15,5 @@ export interface SelectWithSearchProps extends Omit<SelectProps, 'placeholder'>
15
15
  open: boolean;
16
16
  }) => ReactNode;
17
17
  iconUrl?: string;
18
+ onClearValue?: () => void;
18
19
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.1.241",
4
+ "version": "0.1.242",
5
5
  "testVersion": 0,
6
6
  "type": "module",
7
7
  "main": "build/index.js",