@tap-payments/os-micro-frontend-shared 0.1.429 → 0.1.430

package/build/components/ColorPicker/style.d.ts

@@ -24,7 +24,7 @@ export declare const ColorSchemeButton: import("@emotion/styled").StyledComponen
 }, {}, {}>;
 export declare const ColorSchemeList: import("@emotion/styled").StyledComponent<import("@mui/material/MenuList").MenuListOwnProps & import("@mui/material").ListOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
     ref?: ((instance: HTMLUListElement | null) => void) | import("react").RefObject<HTMLUListElement> | null | undefined;
-}, "autoFocus" | "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "variant" | "dense" | "subheader" | "disablePadding" | "autoFocusItem" | "disabledItemsFocusable" | "disableListWrap"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, "autoFocus" | "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "variant" | "dense" | "autoFocusItem" | "disabledItemsFocusable" | "disableListWrap" | "disablePadding" | "subheader"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const StyledInput: import("@emotion/styled").StyledComponent<{
     variant?: import("@mui/material/TextField").TextFieldVariants | undefined;
 } & Omit<import("@mui/material/TextField").FilledTextFieldProps | import("@mui/material/TextField").OutlinedTextFieldProps | import("@mui/material/TextField").StandardTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/RFH/Inputs/MultiSelect/MultiSelect.d.ts

@@ -1,6 +1,14 @@
 import { SelectProps } from '../FormSelect/type';
 interface MultiSelectProps extends SelectProps {
     getOptionLabel?: (option: any) => string;
+    /** When true, shows a search input inside the dropdown to filter options by label */
+    showSearchInput?: boolean;
+    /** Placeholder for the search input */
+    searchPlaceholder?: string;
+    /** When true, shows the checkbox next to each option. Set to false to hide. Defaults to true. */
+    showCheckbox?: boolean;
+    /** When provided, options for which this returns true are disabled */
+    getOptionDisabled?: (option: any) => boolean;
 }
-export default function MultiSelect({ name, helperText, getOptionValue, renderOption, isOptionEqualToValue, ...props }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export default function MultiSelect({ name, helperText, getOptionValue, getOptionLabel, renderOption, isOptionEqualToValue, getOptionDisabled, showSearchInput, searchPlaceholder, showCheckbox, options, ...props }: Readonly<MultiSelectProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/RFH/Inputs/MultiSelect/MultiSelect.js

@@ -10,35 +10,57 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
 import { Box, MenuItem } from '@mui/material';
 import { Controller, useFormContext } from 'react-hook-form';
 import SelectBaseMultiple from '../../../InputBase/SelectBase/SelectBaseMultiple';
-import { CheckboxStyled } from './style';
+import { CheckboxStyled, SearchInputStyled, SearchMenuItemStyled } from './style';
+import { searchIcon } from '../../../../constants/index.js';
 export default function MultiSelect(_a) {
-    var { name, helperText, getOptionValue, renderOption, isOptionEqualToValue } = _a, props = __rest(_a, ["name", "helperText", "getOptionValue", "renderOption", "isOptionEqualToValue"]);
+    var { name, helperText, getOptionValue, getOptionLabel, renderOption, isOptionEqualToValue, getOptionDisabled, showSearchInput = false, searchPlaceholder = 'Search', showCheckbox = true, options } = _a, props = __rest(_a, ["name", "helperText", "getOptionValue", "getOptionLabel", "renderOption", "isOptionEqualToValue", "getOptionDisabled", "showSearchInput", "searchPlaceholder", "showCheckbox", "options"]);
     const { control } = useFormContext();
+    const [searchValue, setSearchValue] = useState('');
+    const filteredOptions = useMemo(() => {
+        if (!showSearchInput || !searchValue.trim())
+            return options !== null && options !== void 0 ? options : [];
+        const query = searchValue.toLowerCase().trim();
+        return (options !== null && options !== void 0 ? options : []).filter((option) => {
+            var _a;
+            const label = (_a = (getOptionLabel ? getOptionLabel(option) : option === null || option === void 0 ? void 0 : option.label)) !== null && _a !== void 0 ? _a : '';
+            return String(label).toLowerCase().includes(query);
+        });
+    }, [options, showSearchInput, searchValue, getOptionLabel]);
     return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => {
-            var _a, _b;
-            return (_jsx(SelectBaseMultiple, Object.assign({}, props, field, { hasError: !!fieldState.error, helperText: helperText !== null && helperText !== void 0 ? helperText : (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message, onChange: (e) => {
+            var _a;
+            return (_jsxs(SelectBaseMultiple, Object.assign({}, props, field, { options: options, getOptionLabel: getOptionLabel, hasError: !!fieldState.error, helperText: helperText !== null && helperText !== void 0 ? helperText : (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message, onChange: (e) => {
                     field.onChange(e);
-                } }, { children: (_b = props.options) === null || _b === void 0 ? void 0 : _b.map((option) => {
-                    var _a, _b, _c;
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    const isSelected = (_a = field.value) === null || _a === void 0 ? void 0 : _a.some((v) => {
-                        if (isOptionEqualToValue) {
-                            return isOptionEqualToValue(v, option);
+                }, MenuProps: Object.assign(Object.assign({}, props.MenuProps), { autoFocus: false, disableEnforceFocus: true }) }, { children: [showSearchInput && (_jsx(SearchMenuItemStyled, Object.assign({ disabled: true, onPointerDown: (e) => e.stopPropagation(), style: { backgroundColor: '#fff' } }, { children: _jsx(Box, Object.assign({ sx: { pointerEvents: 'auto', width: '100%' }, onPointerDown: (e) => e.stopPropagation() }, { children: _jsx(SearchInputStyled, { placeholder: searchPlaceholder, value: searchValue, onChange: (e) => setSearchValue(e.target.value), onKeyDown: (e) => e.stopPropagation(), onKeyUp: (e) => e.stopPropagation(), disableUnderline: true, fullWidth: true, inputProps: { 'aria-label': searchPlaceholder }, endAdornment: _jsx(Box, { component: "img", src: searchIcon, alt: "search", sx: { width: 14, height: 14, flexShrink: 0 } }) }) })) }))), filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map((option) => {
+                        var _a, _b, _c;
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        const isSelected = (_a = field.value) === null || _a === void 0 ? void 0 : _a.some((v) => {
+                            if (isOptionEqualToValue) {
+                                return isOptionEqualToValue(v, option);
+                            }
+                            return (v === null || v === void 0 ? void 0 : v.id) === (option === null || option === void 0 ? void 0 : option.id);
+                        });
+                        const isDisabled = getOptionDisabled ? getOptionDisabled(option) : false;
+                        const optionLabel = getOptionLabel ? getOptionLabel(option) : option.label;
+                        let optionContent;
+                        if (renderOption) {
+                            optionContent = renderOption(option);
                         }
-                        return (v === null || v === void 0 ? void 0 : v.id) === (option === null || option === void 0 ? void 0 : option.id);
-                    });
-                    return (_jsx(MenuItem, Object.assign({ value: (_b = (getOptionValue ? getOptionValue(option) : option === null || option === void 0 ? void 0 : option.id)) !== null && _b !== void 0 ? _b : '', sx: {
-                            fontSize: '12px',
-                            backgroundColor: (theme) => (isSelected ? '#F8F8F8 !important' : theme.palette.common.white),
-                        } }, { children: renderOption ? (renderOption(option)) : (_jsxs(Box, Object.assign({ sx: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                width: '100%',
-                                gap: '8px',
-                            } }, { children: [_jsx(CheckboxStyled, { checked: isSelected }), props.getOptionLabel ? props.getOptionLabel(option) : option.label] }))) }), (_c = (getOptionValue ? getOptionValue(option) : option === null || option === void 0 ? void 0 : option.id)) !== null && _c !== void 0 ? _c : ''));
-                }) })));
+                        else {
+                            optionContent = optionLabel;
+                        }
+                        return (_jsx(MenuItem, Object.assign({ value: (_b = (getOptionValue ? getOptionValue(option) : option === null || option === void 0 ? void 0 : option.id)) !== null && _b !== void 0 ? _b : '', disabled: isDisabled, sx: {
+                                fontSize: '12px',
+                                backgroundColor: (theme) => (isSelected ? '#F8F8F8 !important' : theme.palette.common.white),
+                            } }, { children: showCheckbox ? (_jsxs(Box, Object.assign({ sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    width: '100%',
+                                    gap: '8px',
+                                } }, { children: [_jsx(CheckboxStyled, { checked: isSelected }), optionContent] }))) : (optionContent) }), (_c = (getOptionValue ? getOptionValue(option) : option === null || option === void 0 ? void 0 : option.id)) !== null && _c !== void 0 ? _c : ''));
+                    })] })));
         } }));
 }

package/build/components/RFH/Inputs/MultiSelect/style.d.ts

@@ -1 +1,6 @@
+/// <reference types="react" />
 export declare const CheckboxStyled: import("@emotion/styled").StyledComponent<import("@mui/material").CheckboxProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const SearchInputStyled: import("@emotion/styled").StyledComponent<import("@mui/material/Input").InputProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const SearchMenuItemStyled: import("@emotion/styled").StyledComponent<import("@mui/material/MenuItem").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, "disabled" | "classes" | "autoFocus" | "className" | "style" | "tabIndex" | "children" | "selected" | "sx" | "dense" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/RFH/Inputs/MultiSelect/style.js

@@ -1,4 +1,6 @@
 import Checkbox from '../../../Checkbox';
+import MenuItem from '@mui/material/MenuItem';
+import Input from '@mui/material/Input';
 import { styled } from '@mui/material/styles';
 export const CheckboxStyled = styled(Checkbox)(() => ({
     padding: 0,
@@ -7,3 +9,48 @@ export const CheckboxStyled = styled(Checkbox)(() => ({
         height: 12,
     },
 }));
+export const SearchInputStyled = styled(Input)(({ theme }) => ({
+    width: '100%',
+    height: 36,
+    padding: '8px 8px 8px 12px',
+    borderRadius: 4,
+    backgroundColor: theme.palette.common.white,
+    border: '1px solid #F2F2F2',
+    boxSizing: 'border-box',
+    '&:hover': {
+        borderColor: '#F2F2F2',
+    },
+    '&.Mui-focused': {
+        borderColor: '#F2F2F2',
+        backgroundColor: theme.palette.common.white,
+    },
+    '&:before, &:after': {
+        display: 'none',
+    },
+    '& input': {
+        padding: 0,
+        fontSize: 10,
+    },
+    '& .MuiInputBase-input': {
+        paddingRight: 4,
+    },
+}));
+export const SearchMenuItemStyled = styled(MenuItem)(({ theme }) => ({
+    opacity: 1,
+    paddingTop: 0,
+    paddingBottom: 0,
+    marginBottom: 8,
+    minHeight: 'auto',
+    pointerEvents: 'none',
+    backgroundColor: theme.palette.common.white,
+    '&:hover': {
+        backgroundColor: theme.palette.common.white,
+    },
+    '&.Mui-focusVisible': {
+        backgroundColor: theme.palette.common.white,
+    },
+    '&.Mui-disabled': {
+        backgroundColor: theme.palette.common.white,
+        opacity: 1,
+    },
+}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.429",
+  "version": "0.1.430",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",