@bigmath-ui-library/core 2.0.5 → 2.0.7

package/.rollup.cache/home/bigmath/code_bm/core-2.0.4/package/dist/src/components/BMMaps/BMMapMarker.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Marker, Tooltip } from "react-leaflet";
+import { styled } from "@mui/material";
+import { DivIcon } from "leaflet";
+import ReactDOMServer from 'react-dom/server';
+import { useGetMapIcons } from "./MapIcons";
+import './BMMapMarker.css';
+export var MarkerType;
+(function (MarkerType) {
+    MarkerType["REGION_SELECTED"] = "REGION_SELECTED";
+    MarkerType["REGION_NOT_SELECTED"] = "REGION_NOT_SELECTED";
+    MarkerType["READ_REPLICA"] = "READ_REPLICA";
+    MarkerType["REGION_PREFERRED"] = "REGION_PREFERRED";
+    MarkerType["MASTER_PREFERRED"] = "MASTER_PREFERRED";
+    MarkerType["GEO_PARTITION"] = "GEO_PARTITION";
+})(MarkerType || (MarkerType = {}));
+;
+const StyledMarker = styled(Marker, {
+    name: 'BMMaps',
+    slot: 'marker'
+})();
+const StyledTooltip = styled(Tooltip, {
+    name: 'BMMaps',
+    slot: 'tooltip'
+})();
+export const BMMapMarker = ({ position, icon, iconHover, tooltip, className = '', iconSize = [25, 25], type }) => {
+    const standardIcon = useGetMapIcons({ type });
+    const iconToDisplay = standardIcon.normal || icon;
+    const iconHoverToDisplay = standardIcon.hover || iconHover;
+    const getIcon = useCallback((icon, hovered = false) => {
+        if (icon === null)
+            return undefined;
+        return new DivIcon({
+            html: ReactDOMServer.renderToStaticMarkup(icon),
+            iconSize: hovered ? [iconSize[0] + 10, iconSize[1] + 10] : iconSize,
+            className: `svg-icon region-selected-marker ${className}`
+        });
+    }, []);
+    const [markerIcon, setMarkerIcon] = useState(getIcon(iconToDisplay));
+    const [currentIconState, setCurrentIconState] = useState('NORMAL');
+    return _jsx(StyledMarker, { position: position, icon: markerIcon, eventHandlers: {
+            mouseover: () => {
+                if (iconHoverToDisplay && currentIconState === 'NORMAL') {
+                    setMarkerIcon(getIcon(iconHoverToDisplay, true));
+                    setCurrentIconState('HOVERED');
+                }
+            },
+            mouseout: () => {
+                if (iconToDisplay && currentIconState === 'HOVERED') {
+                    setMarkerIcon(getIcon(iconToDisplay));
+                    setCurrentIconState('NORMAL');
+                }
+            }
+        }, children: tooltip && (_jsx(StyledTooltip, { type: type, className: "bm-map-tooltip", direction: "top", offset: [5, -15], children: tooltip })) });
+};

package/.rollup.cache/home/bigmath/code_bm/core-2.0.4/package/dist/src/components/BMMaps/BMMaps.d.ts

@@ -0,0 +1,18 @@
+import { type FC } from 'react';
+import { LatLngBoundsExpression, LatLngExpression } from 'leaflet';
+import { MapContainerProps } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+export declare const MAX_WIDTH_FOR_ZOOM = 600;
+export declare const MIN_ZOOM_VAL = 0;
+export declare const MAX_ZOOM_VAL = 5;
+export interface BMMapsProps {
+    children: JSX.Element[];
+    mapWidth?: number;
+    mapHeight: number;
+    coordinates: LatLngExpression[];
+    initialBounds: LatLngBoundsExpression | undefined;
+    defaultZoom?: number;
+    mapContainerProps?: MapContainerProps;
+    dataTestId: string;
+}
+export declare const BMMaps: FC<BMMapsProps>;

package/.rollup.cache/home/bigmath/code_bm/core-2.0.4/package/dist/src/components/BMMaps/BMMaps.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { Box, styled, useTheme } from '@mui/material';
+import { LatLngBounds, noConflict } from 'leaflet';
+import { MapContainer, TileLayer, useMap } from 'react-leaflet';
+import { Add, CropFree, Remove } from '@mui/icons-material';
+import 'leaflet/dist/leaflet.css';
+window.L = noConflict();
+export const MAX_WIDTH_FOR_ZOOM = 600;
+export const MIN_ZOOM_VAL = 0;
+export const MAX_ZOOM_VAL = 5;
+const MapBox = styled(Box, {
+    name: 'BMMaps',
+    slot: 'root'
+})(({ theme, mapHeight, mapWidth }) => ({
+    borderRadius: theme.spacing(1),
+    border: `1px solid ${theme.palette.grey[200]}`,
+    width: mapWidth ?? '100%',
+    '& .leaflet-container': {
+        width: mapWidth ?? '100%',
+        height: `${mapHeight}px`,
+    },
+    overflow: 'hidden'
+}));
+export const BMMaps = (props) => {
+    const { mapWidth = 0, coordinates, children, defaultZoom, mapContainerProps = {} } = props;
+    const bounds = useMemo(() => {
+        return new LatLngBounds(coordinates[0], coordinates[1]);
+    }, [coordinates]);
+    const minZoom = mapWidth > MAX_WIDTH_FOR_ZOOM ? MIN_ZOOM_VAL + 1 : MIN_ZOOM_VAL;
+    return (_jsx(MapBox, { mapHeight: props.mapHeight, mapWidth: props.mapWidth, "data-testid": props.dataTestId, children: _jsxs(MapContainer, { bounds: bounds, scrollWheelZoom: true, minZoom: minZoom, maxZoom: MAX_ZOOM_VAL, zoomControl: false, zoom: defaultZoom, ...mapContainerProps, children: [_jsx(TileLayer, { url: "https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png", attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a>' }), _jsx(FocusControl, {}), _jsx(MoveToBounds, { bounds: bounds }), children] }) }));
+};
+const ZoomControls = styled('div')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '28px',
+    alignItems: 'flex-start',
+}));
+const Control = styled('div')(({ theme }) => ({
+    backgroundColor: theme.palette.common.white,
+    borderRadius: '4px',
+    border: `1px solid ${theme.palette.grey[200]}`,
+    boxShadow: `0px 2px 4px -2px rgba(24, 39, 75, 0.12), 0px 4px 4px -2px rgba(24, 39, 75, 0.08)`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    padding: '8px 2px',
+    width: '38px'
+}));
+const FocusControl = () => {
+    const map = useMap();
+    const theme = useTheme();
+    return _jsx(ZoomControls, { className: "leaflet-bottom leaflet-right", sx: { marginRight: '18px', marginBottom: '8px' }, children: _jsxs(Box, { className: "leaflet-control", children: [_jsxs(Control, { children: [_jsx(Add, { sx: { cursor: 'pointer' }, onClick: () => {
+                                map.zoomIn();
+                            } }), _jsx("div", { style: {
+                                width: '24px',
+                                height: '1px',
+                                background: theme.palette.grey[200],
+                                margin: '8px 0'
+                            } }), _jsx(Remove, { sx: { cursor: 'pointer' }, onClick: () => {
+                                map.zoomOut();
+                            } })] }), _jsx(Control, { sx: { marginTop: '8px' }, children: _jsx(CropFree, { sx: { cursor: 'pointer' }, onClick: () => {
+                            map.setZoom(8);
+                        } }) })] }) });
+};
+const MoveToBounds = ({ bounds }) => {
+    const map = useMap();
+    useEffect(() => {
+        map.flyToBounds(bounds, { padding: [5, 5], maxZoom: map.getZoom() });
+        // console.log(map.getZoom());
+    }, [bounds]);
+    return null;
+};

package/.rollup.cache/home/bigmath/code_bm/core-2.0.4/package/dist/src/components/BMMaps/MapIcons.d.ts

@@ -0,0 +1,10 @@
+import { MarkerType } from './BMMapMarker';
+interface GetMapIconProps {
+    type?: MarkerType;
+}
+interface GetMapIconReturnType {
+    normal: JSX.Element | null;
+    hover: JSX.Element | null;
+}
+export declare const useGetMapIcons: ({ type }: GetMapIconProps) => GetMapIconReturnType;
+export {};

package/.rollup.cache/home/bigmath/code_bm/core-2.0.4/package/dist/src/components/BMMaps/MapIcons.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Created on Mon Feb 17 2025
+ *
+ * Copyright 2021 BigMath, Inc. and Contributors
+ * Licensed under the Polyform Free Trial License 1.0.0 (the "License")
+ * You may not use this file except in compliance with the License. You may obtain a copy of the License at
+ * http://github.com/BigMath/brightdb/blob/master/licenses/POLYFORM-FREE-TRIAL-LICENSE-1.0.0.txt
+ */
+import { MarkerType } from './BMMapMarker';
+import RegionSelected from './icons/RegionSelected.svg';
+import RegionSelectedHover from './icons/RegionSelectedHover.svg';
+import RegionNotSelected from './icons/RegionNotSelected.svg';
+import RegionNotSelectedHover from './icons/RegionNotSelectedHover.svg';
+import ReadReplica from './icons/ReadReplica.svg';
+import ReadReplicaHover from './icons/ReadReplicaHover.svg';
+import RegionPreferred from './icons/RegionPreferred.svg';
+import RegionPreferredHover from './icons/RegionPreferredHover.svg';
+import MasterPreferred from './icons/MasterPreferred.svg';
+import MasterPreferredHover from './icons/MasterPreferredHover.svg';
+import GeoPartition from './icons/GeoPartition.svg';
+import GeoPartitionHover from './icons/GeoPartitionHover.svg';
+export const useGetMapIcons = ({ type }) => {
+    let icon = {
+        normal: null,
+        hover: null,
+    };
+    switch (type) {
+        case MarkerType.REGION_SELECTED:
+            icon = {
+                normal: _jsx(RegionSelected, {}),
+                hover: _jsx(RegionSelectedHover, {}),
+            };
+            break;
+        case MarkerType.REGION_NOT_SELECTED:
+            icon = {
+                normal: _jsx(RegionNotSelected, {}),
+                hover: _jsx(RegionNotSelectedHover, {}),
+            };
+            break;
+        case MarkerType.READ_REPLICA:
+            icon = {
+                normal: _jsx(ReadReplica, {}),
+                hover: _jsx(ReadReplicaHover, {}),
+            };
+            break;
+        case MarkerType.REGION_PREFERRED:
+            icon = {
+                normal: _jsx(RegionPreferred, {}),
+                hover: _jsx(RegionPreferredHover, {}),
+            };
+            break;
+        case MarkerType.MASTER_PREFERRED:
+            icon = {
+                normal: _jsx(MasterPreferred, {}),
+                hover: _jsx(MasterPreferredHover, {}),
+            };
+            break;
+        case MarkerType.GEO_PARTITION:
+            icon = {
+                normal: _jsx(GeoPartition, {}),
+                hover: _jsx(GeoPartitionHover, {}),
+            };
+            break;
+        default:
+            break;
+    }
+    return icon;
+};

package/.rollup.cache/home/bigmath/code_bm/core-2.0.4/package/dist/src/components/BMMaps/index.d.ts

@@ -0,0 +1,4 @@
+export * from './BMMaps';
+export * from './BMMapMarker';
+export * from './legend/MapLegend';
+export * from './MapIcons';

package/.rollup.cache/home/bigmath/code_bm/core-2.0.4/package/dist/src/components/BMMaps/index.js

@@ -0,0 +1,4 @@
+export * from './BMMaps';
+export * from './BMMapMarker';
+export * from './legend/MapLegend';
+export * from './MapIcons';

package/.rollup.cache/home/bigmath/code_bm/core-2.0.4/package/dist/src/components/BMMaps/legend/MapLegend.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+export interface MapLegendProps {
+    mapLegendItems: Array<React.ReactElement<MapLegendItemProps>>;
+}
+export interface MapLegendItemProps {
+    icon: JSX.Element;
+    label: string;
+    subText?: string;
+    extraProps?: JSX.Element;
+}
+export declare const MapLegendItem: FC<MapLegendItemProps>;
+export declare const MapLegend: FC<MapLegendProps>;

package/.rollup.cache/home/bigmath/code_bm/core-2.0.4/package/dist/src/components/BMMaps/legend/MapLegend.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled, Typography } from '@mui/material';
+const IconHolder = styled('div')({
+    width: '16px',
+    height: '16px',
+});
+export const MapLegendItem = ({ icon, label, subText, extraProps }) => {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            gap: '4px'
+        }, children: [_jsx(IconHolder, { children: icon }), _jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    flexDirection: 'column',
+                    fontSize: '11.5px',
+                    fontWeight: 500,
+                    lineHeight: '16px',
+                    color: '#4E5F6D',
+                }, children: [label, subText && _jsx(Typography, { variant: "subtitle1", style: {
+                            color: '#6D7C88',
+                            fontSize: '11px',
+                            fontWeight: 500,
+                            lineHeight: '16px'
+                        }, children: subText }), extraProps] })] }));
+};
+export const MapLegend = ({ mapLegendItems }) => {
+    return _jsx("div", { className: "leaflet-bottom leaflet-left", style: {
+            marginBottom: '8px',
+            marginLeft: '18px',
+            borderRadius: '4px',
+            padding: '6px 8px',
+            border: `1px solid #E9EEF2`,
+            background: '#fff',
+            boxShadow: `0px 2px 4px -2px rgba(24, 39, 75, 0.12)`,
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '8px',
+            maxWidth: '50%',
+            flexWrap: 'wrap'
+        }, children: mapLegendItems.map((Item) => (Item)) });
+};

package/.rollup.cache/home/bigmath/code_bm/core-2.0.4/package/dist/src/components/BMModal/BMModal.d.ts

@@ -0,0 +1,39 @@
+import { type DialogContentProps, type DialogProps } from "@mui/material";
+import type { TransitionProps } from "@mui/material/transitions";
+import React, { type FC, type ReactElement } from "react";
+import { type BMButtonProps } from "../BMButton";
+export interface OverrideButtonProps {
+    primary?: BMButtonProps;
+    secondary?: BMButtonProps;
+}
+export interface BMModalProps extends DialogProps {
+    title?: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    overrideHeight?: string | number;
+    overrideWidth?: string | number;
+    isSidePanel?: boolean;
+    titleSeparator?: boolean;
+    titleIcon?: React.ReactNode;
+    actionsInfo?: React.ReactNode;
+    onClose?: () => void;
+    onSubmit?: () => void;
+    enableBackdropDismiss?: boolean;
+    submitLabel?: string;
+    submitButtonTooltip?: string | ReactElement;
+    submitTestId?: string;
+    customSubmitButton?: React.ReactNode;
+    cancelLabel?: React.ReactNode;
+    cancelButtonTooltip?: string;
+    cancelTestId?: string;
+    buttonProps?: OverrideButtonProps;
+    customTitle?: React.ReactNode;
+    hideCloseBtn?: boolean;
+    dialogContentProps?: DialogContentProps;
+    gradientTag?: string;
+}
+export declare const SlideTransition: React.ForwardRefExoticComponent<TransitionProps & {
+    children: React.ReactElement<unknown>;
+} & React.RefAttributes<unknown>>;
+export declare const BMModal: FC<BMModalProps>;
+export type BMSidePanelProps = Omit<BMModalProps, "isSidePanel">;
+export declare const BMSidePanel: FC<BMSidePanelProps>;

package/.rollup.cache/home/bigmath/code_bm/core-2.0.4/package/dist/src/components/BMModal/BMModal.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogActions, DialogContent, DialogTitle, Slide, Typography, dialogClasses, styled, } from "@mui/material";
+import React from "react";
+import { BMButton } from "../BMButton";
+import CloseIcon from "../../assets/icons/Close.svg";
+import { BMTooltip } from "../BMTooltip";
+export const SlideTransition = React.forwardRef((props, ref) => {
+    return _jsx(Slide, { direction: "left", ref: ref, ...props });
+});
+SlideTransition.displayName = "SlideTransition";
+const ModalSizes = {
+    xs: { width: 480, height: 272 },
+    sm: { width: 608, height: 400 },
+    md: { width: 800, height: 600 },
+    lg: { width: 1024, height: 768 },
+    xl: { width: 800, height: 800 },
+};
+const BMDialog = styled(Dialog)(({ isSidePanel, overrideWidth, overrideHeight, size = "md" }) => {
+    const modalSize = ModalSizes[size];
+    return {
+        [`& .${dialogClasses.paper}`]: {
+            ...modalSize,
+            width: overrideWidth ?? modalSize.width,
+            height: overrideHeight ?? modalSize.height,
+            ...(isSidePanel && {
+                width: 736,
+                height: "100%",
+                maxHeight: "100%",
+                margin: "0 0 0 auto",
+                borderRadius: "0 !important",
+                overflowY: "unset",
+            }),
+        },
+    };
+});
+const ModalDialogTitle = styled(DialogTitle)(({ theme, titleSeparator, size }) => ({
+    padding: size === 'xs' ? theme.spacing(1.5, 1.5, 1.5, 2) : theme.spacing(2, 1.5, 2, 2),
+    fontSize: theme.typography.body1.fontSize,
+    fontWeight: 400,
+    ...(titleSeparator && {
+        borderBottom: `1px solid ${theme.palette.grey[200]}`,
+    }),
+}));
+const BMForm = styled("form") `
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    min-height: 100%;
+`;
+const ModalTitle = styled("div")(() => ({
+    display: "flex",
+    alignItems: "center",
+}));
+const Title = styled(Typography) `
+    display: flex;
+    align-items: center;
+`;
+const Text = styled("span") `
+    margin-left: 8px;
+    whitespace: nowrap;
+`;
+const StyledDialogContent = styled(DialogContent) `
+padding: 8px 16px !important;
+font-weight: 400;
+`;
+const BMDialogActions = styled(DialogActions)(({ theme }) => ({
+    padding: theme.spacing(2),
+    background: theme.palette.grey[200],
+    border: `1px solid ${theme.palette.grey[200]}`
+}));
+const CloseButton = styled("span")(({ theme }) => ({
+    background: theme.palette.grey[100],
+    padding: theme.spacing(0.5),
+    height: theme.spacing(4),
+    borderRadius: "50%",
+    float: "right",
+    margin: "auto 0 auto auto",
+    cursor: "pointer",
+}));
+export const BMModal = (props) => {
+    const { title, titleSeparator, titleIcon, actionsInfo, onClose, onSubmit, children, cancelLabel, cancelTestId, submitLabel, submitTestId, enableBackdropDismiss, size, isSidePanel, buttonProps, customTitle, hideCloseBtn, customSubmitButton, submitButtonTooltip, cancelButtonTooltip, dialogContentProps = {}, gradientTag, ...dialogProps } = props;
+    const handleClose = () => {
+        if (onClose) {
+            onClose();
+        }
+    };
+    const handleSubmitBtnClick = (event) => {
+        if (onSubmit) {
+            onSubmit();
+            // Prevent event propagation to avoid unintended page refresh
+            event.preventDefault();
+        }
+    };
+    const showDialogActions = !!cancelLabel || !!submitLabel || !!customSubmitButton;
+    if (isSidePanel) {
+        dialogProps.TransitionComponent = SlideTransition;
+    }
+    const submitBtnProps = buttonProps?.primary ?? {};
+    const cancelBtnProps = buttonProps?.secondary ?? {};
+    const getCancelButton = () => {
+        const returnComponent = cancelLabel ? (_jsx(BMButton, { variant: "secondary", onClick: handleClose, ...cancelBtnProps, dataTestId: cancelTestId ?? 'modal-cancel-button', children: cancelLabel })) : undefined;
+        if (cancelButtonTooltip) {
+            return (_jsx(BMTooltip, { title: cancelButtonTooltip, children: _jsx("span", { children: returnComponent }) }));
+        }
+        return returnComponent;
+    };
+    const getSubmitButton = () => {
+        if (customSubmitButton)
+            return customSubmitButton;
+        const returnComponent = submitLabel ? (_jsx(BMButton, { variant: "primary", onClick: handleSubmitBtnClick, ...submitBtnProps, type: "submit", autoFocus: true, dataTestId: submitTestId ?? 'modal-submit-button', children: submitLabel })) : undefined;
+        if (submitButtonTooltip) {
+            return (_jsx(BMTooltip, { title: submitButtonTooltip, children: _jsx("span", { children: returnComponent }) }));
+        }
+        return returnComponent;
+    };
+    return (_jsx(BMDialog, { "aria-labelledby": "form-dialog-title", size: size, ...dialogProps, fullWidth: true, maxWidth: size, onClose: enableBackdropDismiss ? handleClose : undefined, isSidePanel: isSidePanel, disableEnforceFocus: true, children: _jsxs(BMForm, { children: [customTitle ? (_jsx(ModalDialogTitle, { open: props.open, titleSeparator: props.titleSeparator, typography: { variant: "h4" }, size: size, children: customTitle })) : (title && (_jsx(ModalDialogTitle, { id: "form-dialog-title", open: props.open, titleSeparator: props.titleSeparator, size: size, children: _jsxs(Title, { variant: "h4", children: [titleIcon ? (_jsxs(ModalTitle, { children: [titleIcon, _jsx(Text, { children: title })] })) : (_jsx(ModalTitle, { children: title })), !hideCloseBtn && (_jsx(CloseButton, { children: _jsx(CloseIcon, { "data-testid": cancelTestId ? `${cancelTestId}Header` : "", onClick: handleClose }) }))] }) }))), _jsx(StyledDialogContent, { ...dialogContentProps, children: children }), showDialogActions && (_jsxs(BMDialogActions, { open: props.open, children: [actionsInfo && _jsx("div", { style: { marginRight: "auto" }, children: actionsInfo }), getCancelButton(), getSubmitButton()] }))] }) }));
+};
+export const BMSidePanel = (props) => (_jsx(BMModal, { ...props, isSidePanel: true }));

package/.rollup.cache/home/bigmath/code_bm/core-2.0.4/package/dist/src/components/BMModal/index.d.ts

@@ -0,0 +1 @@
+export * from "./BMModal";

package/.rollup.cache/home/bigmath/code_bm/core-2.0.4/package/dist/src/components/BMModal/index.js

@@ -0,0 +1 @@
+export * from "./BMModal";

package/.rollup.cache/home/bigmath/code_bm/core-2.0.4/package/dist/src/components/BMMultiEntry/BMMultiEntry.d.ts

@@ -0,0 +1,22 @@
+import { FC, ReactElement } from "react";
+import type { FieldError } from "react-hook-form";
+export interface BMMultiEntryProps {
+    error?: boolean | FieldError;
+    disabled?: boolean;
+    tooltipFn?: (entry: string) => string | null;
+    label?: string;
+    helperText?: string;
+    onChange?: (value: string[]) => void;
+    chipIcon?: ReactElement | ((entry: string) => ReactElement | undefined);
+    placeholderText?: string;
+    value?: string[] | string;
+    overrideHeight?: string | number;
+    overrideWidth?: string | number;
+    dataTestId?: string;
+    checkWarning?: (entry: string) => boolean;
+    lowercaseEntry?: boolean;
+    subLabel?: ReactElement;
+    removeInvalidEntriesMsg?: ReactElement;
+    multiEntryHitEnterMsg?: ReactElement;
+}
+export declare const BMMultiEntry: FC<BMMultiEntryProps>;

package/.rollup.cache/home/bigmath/code_bm/core-2.0.4/package/dist/src/components/BMMultiEntry/BMMultiEntry.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState, } from "react";
+import { Box, Chip, FormHelperText, InputBase, Paper, styled, Typography, } from "@mui/material";
+import { throttle } from "lodash";
+import { BMTooltip } from "../BMTooltip/BMTooltip";
+import ErrorIcon from "@coreApp/assets/icons/failed-solid.svg";
+import CloseIcon from "@coreApp/assets/icons/close-basic.svg";
+// Styled Components
+const Label = styled(Typography)(({ theme }) => ({
+    fontSize: "13px",
+    fontWeight: 500,
+    color: theme.palette.grey[600],
+    marginBottom: theme.spacing(0.4),
+    marginTop: theme.spacing(0.4),
+}));
+const EntryWrapper = styled(Paper, {
+    shouldForwardProp: (prop) => prop !== "focus" && prop !== "overrideHeight" && prop !== "overrideWidth",
+})(({ theme, overrideHeight, overrideWidth }) => ({
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "flex-start",
+    alignContent: "flex-start",
+    gap: theme.spacing(0.5),
+    padding: theme.spacing(0.5, 0.5, 0, 0.875),
+    minHeight: 40,
+    height: overrideHeight ?? "auto",
+    width: overrideWidth ?? "100%",
+    overflowY: "auto",
+    overflowX: "hidden",
+    cursor: "text",
+    border: `1px solid ${theme.palette.grey[300]}`,
+}));
+const StyledChip = styled(Chip)(({ theme }) => ({
+    backgroundColor: theme.palette.primary[200],
+    borderRadius: 6,
+    height: theme.spacing(3),
+    marginRight: theme.spacing(0.5),
+    marginBottom: theme.spacing(0.5),
+    maxWidth: 250,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    "&:hover": {
+        backgroundColor: theme.palette.primary[200],
+    },
+    "& .MuiChip-deleteIcon": {
+        width: theme.spacing(2),
+        height: theme.spacing(2),
+    },
+    fontSize: "11.5px",
+    fontWeight: 400,
+}));
+const WarningChip = styled(StyledChip)(({ theme }) => ({
+    backgroundColor: theme.palette.warning[100],
+    "& .MuiChip-icon": {
+        color: theme.palette.warning[700],
+    },
+}));
+const TextInput = styled(InputBase)(({ theme }) => ({
+    flexShrink: 0,
+    minWidth: 120,
+    height: "24px",
+    fontSize: "13px",
+    fontWeight: 400,
+    marginBottom: theme.spacing(0.5),
+    "& input": {
+        padding: 0,
+        width: "100%",
+        boxSizing: "border-box",
+    },
+}));
+const CloseIconStyled = styled(CloseIcon)(({ theme }) => ({
+    position: "relative",
+    top: "1px",
+    color: theme.palette.grey[600],
+}));
+const ErrorIconStyled = styled(ErrorIcon)(({ theme }) => ({
+    width: 16,
+    height: 16,
+    [`& g path:nth-of-type(2)`]: {
+        fill: theme.palette.error[500],
+    },
+}));
+export const BMMultiEntry = ({ tooltipFn, onChange, checkWarning, label, placeholderText, value, error, helperText, chipIcon, dataTestId, disabled, lowercaseEntry = false, overrideHeight, overrideWidth, subLabel, removeInvalidEntriesMsg, multiEntryHitEnterMsg, }) => {
+    const textInputRef = useRef(null);
+    const [fieldInFocus, setFieldInFocus] = useState(false);
+    const errorArr = Array.isArray(error) ? error : [];
+    const entries = Array.isArray(value)
+        ? value.map((item) => (lowercaseEntry ? item.toLowerCase() : item))
+        : (value ?? "")
+            .split(/[ ,]+/)
+            .map((item) => (lowercaseEntry ? item.toLowerCase() : item));
+    const updateEntries = (items) => {
+        const updated = items.map((item) => lowercaseEntry ? item.toLowerCase() : item);
+        onChange?.(updated);
+    };
+    const handleDelete = (entry) => {
+        updateEntries(entries.filter((e) => e !== entry));
+    };
+    const handleClick = (entry) => {
+        handleDelete(entry);
+        if (textInputRef.current) {
+            textInputRef.current.value = entry;
+        }
+    };
+    const handleBlur = (e) => {
+        setFieldInFocus(false);
+        const input = e.target.value.trim();
+        if (input) {
+            const items = input.split(/[ ,]+/).filter(Boolean);
+            updateEntries(Array.from(new Set([...entries, ...items])));
+            e.target.value = "";
+        }
+    };
+    const handleKeyUp = throttle((e) => {
+        const input = e.target;
+        const value = input.value;
+        const lastChar = value[value.length - 1];
+        if (lastChar === "," || lastChar === " " || e.key === "Enter") {
+            const items = value.split(/[ ,]+/).filter(Boolean);
+            updateEntries(Array.from(new Set([...entries, ...items])));
+            input.value = "";
+            e.preventDefault();
+        }
+    }, 200);
+    const handleBackspace = throttle((e) => {
+        const input = e.target;
+        if (input.value.length === 0 && entries.length > 0) {
+            updateEntries(entries.slice(0, -1));
+        }
+    }, 200);
+    const getChipIcon = (entry, invalid) => {
+        if (invalid)
+            return _jsx(ErrorIconStyled, {});
+        if (chipIcon) {
+            return typeof chipIcon === "function" ? chipIcon(entry) : chipIcon;
+        }
+        return undefined;
+    };
+    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsxs(EntryWrapper, { onClick: () => {
+                    setFieldInFocus(true);
+                    textInputRef.current?.focus();
+                }, "data-testid": dataTestId, focus: fieldInFocus, overrideHeight: overrideHeight, overrideWidth: overrideWidth, children: [entries.map((entry, index) => {
+                        const invalid = errorArr[index];
+                        const tooltip = invalid?.message ?? tooltipFn?.(entry) ?? undefined;
+                        const warning = checkWarning?.(entry) ?? false;
+                        const ChipComp = warning ? WarningChip : StyledChip;
+                        return (_jsx(BMTooltip, { title: tooltip ?? "", children: _jsx(ChipComp, { label: entry, icon: getChipIcon(entry, invalid), deleteIcon: _jsx(CloseIconStyled, {}), onDelete: () => handleDelete(entry), clickable: true, onClick: () => handleClick(entry) }) }, `${entry}-tooltip`));
+                    }), _jsx(TextInput, { inputRef: textInputRef, placeholder: placeholderText, disabled: disabled, onKeyDown: (e) => {
+                            if (e.key === "Backspace")
+                                handleBackspace(e);
+                            else if (e.key === "Enter")
+                                handleBlur(e);
+                        }, onKeyUp: handleKeyUp, onBlur: handleBlur })] }), subLabel && (_jsx(Box, { sx: {
+                    mt: 1,
+                    color: "grey.700",
+                    fontSize: "11.5px",
+                    fontWeight: 400,
+                }, children: subLabel })), error &&
+                (textInputRef.current?.value?.length ?? 0) === 0 &&
+                helperText && (_jsx(FormHelperText, { error: true, sx: {
+                    mt: 1,
+                    fontSize: "11.5px",
+                    fontWeight: 400,
+                }, children: helperText })), Array.isArray(error) && error.length > 0 && removeInvalidEntriesMsg && (_jsx(FormHelperText, { sx: {
+                    mt: 1,
+                    fontSize: "11.5px",
+                    fontWeight: 400,
+                }, error: true, children: removeInvalidEntriesMsg })), error &&
+                (textInputRef.current?.value?.length ?? 0) > 0 &&
+                multiEntryHitEnterMsg && (_jsx(FormHelperText, { error: true, sx: {
+                    mt: 1,
+                    fontSize: "11.5px",
+                    fontWeight: 400,
+                }, children: multiEntryHitEnterMsg }))] }));
+};