@bigmath-ui-library/core 2.0.6 → 2.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigmath-ui-library/core",
-	"version": "2.0.6",
+	"version": "2.0.7",
 	"description": "",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
@@ -8,7 +8,7 @@
 	"type": "module",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
-		"build": "rollup -c rollup.config.js"
+		"build": "rollup -c ./rollup.config.js && node scripts/transpile-es2017.cjs"
 	},
 	"publishConfig": {
 		"access": "public",
@@ -16,21 +16,44 @@
 	},
 	"author": "",
 	"license": "ISC",
+	"devDependencies": {
+		"@emotion/react": "11.8.1",
+		"@emotion/styled": "11.8.1",
+		"@mui/material": "6.4.11",
+		"@mui/types": "^7.2.21",
+		"@rollup/plugin-commonjs": "^29.0.2",
+		"@rollup/plugin-node-resolve": "^16.0.3",
+		"@rollup/plugin-replace": "^6.0.3",
+		"@rollup/plugin-typescript": "^12.3.0",
+		"@types/node": "^25.7.0",
+		"@types/styled-components": "5.1.34",
+		"esbuild": "^0.28.0",
+		"postcss": "^8.5.14",
+		"rollup": "^4.60.3",
+		"rollup-plugin-copy": "^3.5.0",
+		"rollup-plugin-postcss": "^4.0.2",
+		"rollup-plugin-svg": "^2.0.0",
+		"storybook-addon-pseudo-states": "4.0.2",
+		"styled-components": "5.3.11",
+		"tslib": "^2.8.1",
+		"typescript": "^6.0.3"
+	},
 	"dependencies": {
 		"@emotion/react": "11.8.1",
 		"@emotion/styled": "11.8.1",
-		"@mui/icons-material": "^5.18.0",
+		"@mui/icons-material": "^6.4.11",
 		"@mui/material": "6.4.11",
 		"@mui/types": "^7.2.21",
-		"@mui/x-data-grid": "^9.0.2",
-		"@mui/x-date-pickers": "^9.0.2",
+		"@mui/utils": "^5.16.14",
+		"@mui/x-date-pickers": "^7.24.1",
+		"@mui/x-data-grid": "^7.24.1",
+		"@types/highlight.js": "^9.12.4",
+		"@types/leaflet": "^1.9.21",
 		"@types/styled-components": "5.1.34",
 		"highlight.js": "^11.11.1",
 		"leaflet": "^1.9.4",
-		"postcss": "^8.5.10",
-		"react-hook-form": "^7.73.1",
-		"react-leaflet": "^5.0.0",
-		"reselect": "^4.1.8",
+		"react-hook-form": "^7.75.0",
+		"react-leaflet": "^4.2.1",
 		"storybook-addon-pseudo-states": "4.0.2",
 		"styled-components": "5.3.11"
 	},
@@ -38,22 +61,5 @@
 		"react": "17.0.2",
 		"react-dom": "17.0.2"
 	},
-	"gitHead": "85b0ce59577ae80d1f37b33046ee64b451ff5e45",
-	"devDependencies": {
-		"@rollup/plugin-alias": "^6.0.0",
-		"@rollup/plugin-commonjs": "^29.0.2",
-		"@rollup/plugin-node-resolve": "^16.0.3",
-		"@svgr/rollup": "^8.1.0",
-		"@types/highlight.js": "^9.12.4",
-		"@types/leaflet": "^1.9.21",
-		"@types/node": "^25.6.0",
-		"@types/react": "^19.2.14",
-		"@types/react-dom": "^19.2.3",
-		"react": "^19.2.5",
-		"react-dom": "^19.2.5",
-		"rollup": "^4.60.2",
-		"rollup-plugin-postcss": "^4.0.2",
-		"rollup-plugin-typescript2": "^0.37.0",
-		"typescript": "^6.0.3"
-	}
+	"gitHead": "85b0ce59577ae80d1f37b33046ee64b451ff5e45"
 }

package/rollup.config.js

@@ -1,78 +1,67 @@
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import typescript from 'rollup-plugin-typescript2';
-import postcss from 'rollup-plugin-postcss';
-import svgr from '@svgr/rollup';
-import alias from '@rollup/plugin-alias';
-import { createRequire } from 'module';
-import { fileURLToPath } from 'url';
-import { dirname, resolve as pathResolve } from 'path';
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import replace from "@rollup/plugin-replace";
+import typescript from "@rollup/plugin-typescript";
+import svg from "rollup-plugin-svg";
+import postcss from "rollup-plugin-postcss";
+import copy from "rollup-plugin-copy";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const production = !process.env.ROLLUP_WATCH;
 
-const require = createRequire(import.meta.url);
-const pkg = require('./package.json');
-
-const external = [
-  'react',
-  'react-dom',
-  'react/jsx-runtime',
-  /^@mui\//,
-  /^@emotion\//,
-  'styled-components',
-  /^@types\//,
-  'async_hooks',
-  'util', 
-  'crypto',
-  'stream',
-  'reselect',
-];
-
-export default [
-  {
-    input: 'src/index.ts',
-    output: [
-      {
-        file: pkg.main,
-        format: 'cjs',
-        sourcemap: false,
-        exports: 'named',
-        interop: 'auto',
-      },
-      {
-        file: pkg.module,
-        format: 'esm',
-        sourcemap: false,
+export default {
+  input: "src/index.ts",
+  output: [
+    {
+      file: "dist/cjs/index.js",
+      format: "cjs",
+      sourcemap: !production,
+      exports: "named",
+    },
+    {
+      file: "dist/esm/index.js",
+      format: "esm",
+      sourcemap: !production,
+    },
+  ],
+  plugins: [
+    replace({
+      "process.env.NODE_ENV": JSON.stringify(production ? "production" : "development"),
+      preventAssignment: true,
+    }),
+    resolve({
+      extensions: [".js", ".jsx", ".ts", ".tsx", ".css"],
+      alias: {
+        "@coreApp/assets": "src/assets",
+        "@mui/icons-material": "@mui/icons-material",
       },
-    ],
-    external,
-    plugins: [
-      alias({
-        entries: [
-          { find: '@coreApp/assets/icons', replacement: pathResolve(__dirname, 'src/assets/icons') },
-        ],
-      }),
-      svgr({ exportType: 'default', jsxRuntime: 'classic' }),
-      resolve({ extensions: ['.ts', '.tsx', '.js', '.jsx'] }),
-      commonjs(),
-      postcss({
-        extract: 'index.css',
-        minimize: true,
-      }),
-      typescript({
-        tsconfig: './tsconfig.build.json',
-        abortOnError: false,
-        tsconfigOverride: {
-          compilerOptions: {
-            declaration: false,
-            declarationMap: false,
-            noUnusedLocals: false,
-            noUnusedParameters: false,
-            skipLibCheck: true,
-          },
-        },
-      }),
-    ],
+    }),
+    commonjs({
+      include: /node_modules/,
+    }),
+    postcss({
+      extract: false,
+      minimize: production,
+    }),
+    copy({
+      assets: ["src/assets/icons"],
+    }),
+    typescript({
+      tsconfig: "./tsconfig.build.json",
+      exclude: ["**/*.stories.tsx", "**/*.test.tsx"],
+    }),
+    svg(),
+  ],
+  external: [
+    "react",
+    "react-dom",
+    "styled-components",
+    "@emotion/react",
+    "@emotion/styled",
+    "leaflet",
+    "highlight.js",
+  ],
+  onwarn(warning, warn) {
+    if (warning.code === "MODULE_LEVEL_DIRECTIVE") return;
+    warn(warning);
   },
-];
+};

package/scripts/transpile-es2017.cjs

@@ -0,0 +1,17 @@
+const esbuild = require('esbuild');
+const fs = require('fs');
+const path = require('path');
+
+const distDir = path.join(__dirname, '..', 'dist');
+
+['esm/index.js', 'cjs/index.js'].forEach(file => {
+  const filePath = path.join(distDir, file);
+  if (fs.existsSync(filePath)) {
+    const result = esbuild.transformSync(fs.readFileSync(filePath, 'utf8'), {
+      target: 'es2017',
+      minify: false,
+    });
+    fs.writeFileSync(filePath, result.code);
+    console.log('Transformed:', filePath);
+  }
+});

package/src/BMClassnameSetup.ts

@@ -1,3 +1,3 @@
 import { unstable_ClassNameGenerator as ClassNameGenerator } from "@mui/material/className";
 
-ClassNameGenerator.configure((componentName) => `yb-${componentName}`);
+ClassNameGenerator.configure((componentName) => `bm-${componentName}`);

package/src/bma/components/BMInput/BMInput.tsx

@@ -1,4 +1,4 @@
-import { BMInput as BMCoreInput, BMInputProps } from "../../../components/BMInput/BMInput";
+import { BMInput as BMCoreInput, BMInputProps } from "../../..";
 
 export interface BMAInputProps extends Omit<BMInputProps, 'size'> {
     size?: 'large' | 'medium';

package/src/bma/components/BMInput/BMInputField.tsx

@@ -1,5 +1,5 @@
 import { FieldValues } from "react-hook-form";
-import { BMInputField as BMCoreInputField, BMInputFieldProps } from "../../../components/BMInput/BMInputField";
+import { BMInputField as BMCoreInputField, BMInputFieldProps } from "../../..";
 
 
 export const BMInputField = <T extends FieldValues,>(props: BMInputFieldProps<T>) => {

package/src/bma/components/BMInput/BMSearch.tsx

@@ -1,4 +1,4 @@
-import { BMSearch } from "../../../components/BMInput/BMSearch";
+import { BMSearch } from "../../..";
 import { BMAInputProps } from ".";
 
 export const BMSearchInput = (props: BMAInputProps) => {

package/src/bma/theme/BMAutocomplete.ts

@@ -1,4 +1,4 @@
-import { BMAutoComplete } from "../../theme/BMAutoComplete";
+import { BMAutoComplete } from "../../../src/theme/BMAutoComplete";
 
 export const BMAAutoComplete = {
     ...BMAutoComplete,

package/src/bma/theme/theme.ts

@@ -1,6 +1,6 @@
 import { type ThemeOptions, createTheme } from "@mui/material";
 import { deepmerge } from "@mui/utils";
-import { coreTheme } from "../../theme/theme";
+import { coreTheme } from "../../../src/theme/theme";
 import { BMAInput, BMInputLabel } from "./BMInput";
 import { BMAAutoComplete } from "./BMAutocomplete";
 

package/src/components/BMButton/BMSplitButton.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { BMButton, BMButtonProps } from '../BMButton/BMButton';
+import { BMButton, BMButtonProps } from './BMButton';
 import { Menu, MenuItem, MenuProps } from '@mui/material';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 

package/src/components/BMCloudSelect/BMCloudSelect.tsx

@@ -1,3 +1,12 @@
+/*
+ * Created on Tue Apr 08 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 { ReactElement, ReactNode } from "react";
 import { Box, styled, Typography } from "@mui/material";
 import { themeVariables } from "../../theme/variables";

package/src/components/BMCodeBlock/BMCodeBlock.tsx

@@ -17,7 +17,7 @@ import CopyIcon from "../../assets/icons/copy.svg";
 import CaretDownIcon from "../../assets/icons/caret-down.svg";
 
 export interface CodeBlockProps {
-  showCopyButton?: boolean;
+  showCopbmutton?: boolean;
   multiBlock?: boolean;
   codeClassName?: string;
   preClassName?: string;
@@ -64,7 +64,7 @@ const InnerCode = styled("code")(({ theme }) => ({
   margin: 0,
 }));
 
-const InlineCopyButton = styled(Button)(({ theme }) => ({
+const InlineCopbmutton = styled(Button)(({ theme }) => ({
   position: "absolute",
   right: theme.spacing(0.75),
   top: theme.spacing(0.5),
@@ -93,7 +93,7 @@ const HoverableLine = styled("pre")(({ theme }) => ({
 }));
 
 export const BMCodeBlock: FC<CodeBlockProps> = ({
-  showCopyButton,
+  showCopbmutton,
   multiBlock,
   text,
   codeClassName,
@@ -148,7 +148,7 @@ export const BMCodeBlock: FC<CodeBlockProps> = ({
     }
   };
 
-  const copyBlock = () => {
+  const copbmlock = () => {
     const text = preRef.current?.innerText?.replace(
       /\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/g,
       "$'"
@@ -179,14 +179,14 @@ export const BMCodeBlock: FC<CodeBlockProps> = ({
                 <InnerCode className={clsx(codeClassName, syntaxLanguage)}>
                   {val}
                 </InnerCode>
-                {showCopyButton && (
-                  <InlineCopyButton
+                {showCopbmutton && (
+                  <InlineCopbmutton
                     size="small"
                     className="bm-copy-btn"
                     onClick={copyLineBlock}
                   >
                     {copyLabel}
-                  </InlineCopyButton>
+                  </InlineCopbmutton>
                 )}
               </HoverableLine>
             ))
@@ -198,8 +198,8 @@ export const BMCodeBlock: FC<CodeBlockProps> = ({
               >
                 {text}
               </InnerCode>
-              {showCopyButton && (
-                <CopyIconButton onClick={copyBlock}>
+              {showCopbmutton && (
+                <CopyIconButton onClick={copbmlock}>
                   <CopyIcon fontSize="small" />
                 </CopyIconButton>
               )}

package/src/components/BMDatePicker/BMDatePicker.tsx

@@ -98,9 +98,8 @@ export const BMDatePicker: FC<BMDatePickerProps> = ({
         ref={ref}
         onClick={openOnInputClick ? handleInputClick : () => {}}
         data-testid={dataTestid}
-        // @ts-ignore - InputProps is deprecated in MUI v6 but needed for compatibility
         InputProps={{
-          ...(props as any).InputProps,
+          ...props.InputProps,
           readOnly: false,
           endAdornment: (
             <InputAdornment position="end">

package/src/components/BMInput/BMInputEditableCode.tsx

@@ -1,8 +1,7 @@
 import { FC, ReactElement, useRef, useState } from "react";
 import { Box, IconButton, styled } from "@mui/material";
 
-import { BMInput, BMInputProps } from "../BMInput/BMInput";
-import { BMTooltip } from "../BMTooltip/BMTooltip";
+import { BMInput, BMInputProps, BMTooltip } from "../../../src";
 
 import CheckIcon from "../../assets/icons/check.svg";
 import EditIcon from "../../assets/icons/pencil.svg";

package/src/components/BMMaps/BMMapMarker.tsx

@@ -1,41 +1,40 @@
-import React, { FC, useCallback, useState } from "react";
+import { FC, useCallback, useState } from "react";
 import { Marker, Tooltip } from "react-leaflet";
 import { styled } from "@mui/material";
 import { DivIcon, LatLngExpression } from "leaflet";
-import * as ReactDOM from "react-dom";
+import ReactDOMServer from 'react-dom/server';
 import { useGetMapIcons } from "./MapIcons";
-import { MarkerType } from "./markerTypes";
 
-// React 17 API still works at runtime, TypeScript types just don't expose it for React 19
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const renderElement = (ReactDOM as any).render;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const unmountElement = (ReactDOM as any).unmountComponentAtNode;
+import './BMMapMarker.css';
 
-/**
- * Browser-compatible replacement for ReactDOMServer.renderToStaticMarkup
- */
-function renderToStaticMarkup(element: React.ReactElement): string {
-  const container = document.createElement("div");
-  renderElement(element, container);
-  const html = container.innerHTML;
-  unmountElement(container);
-  return html;
-}
+export enum MarkerType {
+    REGION_SELECTED = 'REGION_SELECTED',
+    REGION_NOT_SELECTED = 'REGION_NOT_SELECTED',
+    READ_REPLICA = 'READ_REPLICA',
+    REGION_PREFERRED = 'REGION_PREFERRED',
+    MASTER_PREFERRED = 'MASTER_PREFERRED',
+    GEO_PARTITION = 'GEO_PARTITION',
+};
 
 interface BMMapMarkerProps {
-    icon?: React.ReactElement | null;
-    iconHover?: React.ReactElement | null;
+    icon?: JSX.Element | null;
+    iconHover?: JSX.Element | null;
     position: LatLngExpression;
     iconSize?: [number, number];
     className?: string;
-    tooltip?: React.ReactElement;
+    tooltip?: JSX.Element;
     type?: MarkerType;
 }
 
-const StyledMarker = styled(Marker)();
+const StyledMarker = styled(Marker, {
+    name: 'BMMaps',
+    slot: 'marker'
+})();
 
-const StyledTooltip = styled(Tooltip)<{ type?: string }>();
+const StyledTooltip = styled(Tooltip, {
+    name: 'BMMaps',
+    slot: 'tooltip'
+})<{ type?: string }>();
 
 export const BMMapMarker: FC<BMMapMarkerProps> = ({ position, icon, iconHover, tooltip, className = '', iconSize = [25, 25], type }) => {
 
@@ -46,7 +45,7 @@ export const BMMapMarker: FC<BMMapMarkerProps> = ({ position, icon, iconHover, t
     const getIcon = useCallback((icon, hovered = false) => {
         if (icon === null) return undefined;
         return new DivIcon({
-            html: renderToStaticMarkup(icon),
+            html: ReactDOMServer.renderToStaticMarkup(icon),
             iconSize: hovered ? [iconSize[0] + 10, iconSize[1] + 10] : iconSize,
             className: `svg-icon region-selected-marker ${className}`
         });

package/src/components/BMMaps/BMMaps.tsx

@@ -1,4 +1,4 @@
-import React, { type FC, useEffect, useMemo } from 'react';
+import { type FC, useEffect, useMemo } from 'react';
 import { Box, styled, useTheme } from '@mui/material';
 import { LatLngBounds, LatLngBoundsExpression, LatLngExpression, noConflict } from 'leaflet';
 import { MapContainer, MapContainerProps, TileLayer, useMap } from 'react-leaflet';
@@ -12,7 +12,7 @@ export const MIN_ZOOM_VAL = 0;
 export const MAX_ZOOM_VAL = 5;
 
 export interface BMMapsProps {
-    children: React.JSX.Element[];
+    children: JSX.Element[];
     mapWidth?: number;
     mapHeight: number;
     coordinates: LatLngExpression[];
@@ -21,9 +21,12 @@ export interface BMMapsProps {
     mapContainerProps?: MapContainerProps;
     dataTestId: string;
 }
-type MapBoxProps = { mapHeight: number; mapWidth?: number };
+type MapBoxProps = Pick<BMMapsProps, 'mapHeight' | 'mapWidth'>;
 
-const MapBox = styled('div')<MapBoxProps>(({ theme, mapHeight, mapWidth }) => ({
+const MapBox = styled(Box, {
+    name: 'BMMaps',
+    slot: 'root'
+})<MapBoxProps>(({ theme, mapHeight, mapWidth }) => ({
     borderRadius: theme.spacing(1),
     border: `1px solid ${theme.palette.grey[200]}`,
     width: mapWidth ?? '100%',

package/src/components/BMMaps/MapIcons.tsx

@@ -1,5 +1,12 @@
-import React from 'react';
-import { MarkerType } from './markerTypes';
+/*
+ * 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';
@@ -27,8 +34,8 @@ interface GetMapIconProps {
 }
 
 interface GetMapIconReturnType {
-    normal: React.ReactElement | null;
-    hover: React.ReactElement | null;
+    normal: JSX.Element | null;
+    hover: JSX.Element | null;
 }
 
 export const useGetMapIcons = ({ type }: GetMapIconProps): GetMapIconReturnType => {

package/src/components/BMMaps/index.ts

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

package/src/components/BMMaps/legend/MapLegend.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { styled, Typography } from '@mui/material';
 
 export interface MapLegendProps {
@@ -11,10 +11,10 @@ const IconHolder = styled('div')({
 });
 
 export interface MapLegendItemProps {
-    icon: React.ReactElement;
+    icon: JSX.Element;
     label: string;
     subText?: string;
-    extraProps?: React.ReactElement;
+    extraProps?: JSX.Element;
 }
 
 export const MapLegendItem: FC<MapLegendItemProps> = ({ icon, label, subText, extraProps }) => {

package/src/components/BMRadio/BMRadio.tsx

@@ -89,8 +89,8 @@ export const BMRadio: FC<BMRadioProps> = (props) => {
 		className={props.className}
 		color="default"
 		{...props}
-		checkedIcon={<CheckedIcon />}
-		icon={<Icon />}
+		checkedIcon={<CheckedIcon disabled={props.disabled} />}
+		icon={<Icon disabled={props.disabled} />}
 	/>;
 	if (props.label) {
 		return (