@moderneinc/neo-styled-components 4.1.1 → 4.1.2-next.190f9a

package/dist/DataGridColumnsPanel/DataGridColumnsPanel.d.ts

@@ -28,6 +28,6 @@ export interface NeoDataGridColumnsPanelProps extends GridColumnsPanelProps {
     showSearch?: boolean;
 }
 export declare const NeoDataGridColumnsPanel: {
-    ({ showSearch, ...props }: NeoDataGridColumnsPanelProps): import("react/jsx-runtime").JSX.Element;
+    ({ showSearch, sx: _sx, theme: _theme, ...props }: NeoDataGridColumnsPanelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/Toolbar/Toolbar.d.ts

@@ -1,4 +1,4 @@
-import { type ToolbarProps } from '@mui/x-data-grid-pro';
+import { type ToolbarProps } from '@mui/x-data-grid';
 import type { ReactNode } from 'react';
 export interface NeoToolbarProps extends ToolbarProps {
     /**

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { ReactNode, ElementType, HTMLAttributes, ComponentType, ComponentPropsWithoutRef } from 'react';
-import { GridDensity, GridFilterPanel } from '@mui/x-data-grid';
+import { GridDensity, GridFilterPanel, ToolbarProps } from '@mui/x-data-grid';
 import Chip, { ChipProps } from '@mui/material/Chip';
 import { AlertProps } from '@mui/material/Alert';
 import { LinkProps } from '@mui/material/Link';
@@ -11,7 +11,7 @@ import * as _mui_material_ToggleButton from '@mui/material/ToggleButton';
 import { ToggleButtonProps } from '@mui/material/ToggleButton';
 import { ToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
 import { CheckboxProps } from '@mui/material/Checkbox';
-import { GridDensity as GridDensity$1, DataGridProProps, GridSlots, ToolbarProps, GridColumnsPanelProps } from '@mui/x-data-grid-pro';
+import { GridDensity as GridDensity$1, DataGridProProps, GridSlots, GridColumnsPanelProps } from '@mui/x-data-grid-pro';
 import * as _mui_material_styles from '@mui/material/styles';
 import { SxProps, Theme, Breakpoint } from '@mui/material/styles';
 import { DividerProps } from '@mui/material/Divider';
@@ -2771,7 +2771,7 @@ interface NeoDataGridColumnsPanelProps extends GridColumnsPanelProps {
     showSearch?: boolean;
 }
 declare const NeoDataGridColumnsPanel: {
-    ({ showSearch, ...props }: NeoDataGridColumnsPanelProps): react_jsx_runtime.JSX.Element;
+    ({ showSearch, sx: _sx, theme: _theme, ...props }: NeoDataGridColumnsPanelProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.esm.js

@@ -16,7 +16,8 @@ import MuiToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton
 import MuiToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
 import MuiCard from '@mui/material/Card';
 import Checkbox, { checkboxClasses } from '@mui/material/Checkbox';
-import { useGridApiContext, useGridSelector, gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, GridPanelWrapper, useGridApiRef, gridClasses as gridClasses$1, DataGridPro, ColumnsPanelTrigger, ToolbarButton, gridFilterModelSelector, FilterPanelTrigger, Toolbar } from '@mui/x-data-grid-pro';
+import { useGridApiContext, useGridSelector, gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, GridFilterPanel, gridClasses, ColumnsPanelTrigger, ToolbarButton, gridFilterModelSelector, FilterPanelTrigger, gridPaginationModelSelector, gridRowCountSelector, gridRowSelectionCountSelector, QuickFilter, QuickFilterControl, QuickFilterClear, Toolbar } from '@mui/x-data-grid';
+import { useGridApiRef, DataGridPro } from '@mui/x-data-grid-pro';
 import Button, { buttonClasses } from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
 import InputAdornment, { inputAdornmentClasses } from '@mui/material/InputAdornment';
@@ -25,7 +26,6 @@ import TextField from '@mui/material/TextField';
 import { formLabelClasses } from '@mui/material/FormLabel';
 import InputLabel, { inputLabelClasses } from '@mui/material/InputLabel';
 import MuiSelect, { selectClasses } from '@mui/material/Select';
-import { GridFilterPanel, gridClasses, useGridApiContext as useGridApiContext$1, useGridSelector as useGridSelector$1, gridPaginationModelSelector, gridRowCountSelector, gridRowSelectionCountSelector, QuickFilter, QuickFilterControl, QuickFilterClear } from '@mui/x-data-grid';
 import MenuItem, { menuItemClasses } from '@mui/material/MenuItem';
 import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';
@@ -2008,6 +2008,13 @@ const NeoCodeSnippet = ({ variant = 'outlined', size = 'small', endIcon, childre
 };
 NeoCodeSnippet.displayName = 'NeoCodeSnippet';
 
+// PanelWrapper was removed from @mui/x-data-grid-pro public API in v8.28.2
+const PanelWrapper = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    '&:focus': { outline: 0 },
+});
 const PanelContent = styled(Box)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
@@ -2114,7 +2121,10 @@ const ResetButton = styled(Button)(({ theme }) => ({
         color: colors.grey['400'],
     },
 }));
-const NeoDataGridColumnsPanel = ({ showSearch = false, ...props }) => {
+const NeoDataGridColumnsPanel = ({ showSearch = false, 
+// Strip MUI-specific props to avoid dual-module Theme type conflict between
+// @mui/x-data-grid-pro (CJS) and @mui/x-data-grid (ESM) declarations
+sx: _sx, theme: _theme, ...props }) => {
     const apiRef = useGridApiContext();
     const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
     const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
@@ -2149,7 +2159,7 @@ const NeoDataGridColumnsPanel = ({ showSearch = false, ...props }) => {
     };
     // Check if current state differs from initial/default state
     const hasChanges = Object.keys(columnVisibilityModel).length > 0;
-    return (jsx(GridPanelWrapper, { ...props, children: jsxs(PanelContent, { sx: { width: 320 }, children: [showSearch && (jsx(StyledSearchField, { placeholder: "Search", variant: "standard", value: searchText, onChange: e => setSearchText(e.target.value), slotProps: {
+    return (jsx(PanelWrapper, { ...props, children: jsxs(PanelContent, { sx: { width: 320 }, children: [showSearch && (jsx(StyledSearchField, { placeholder: "Search", variant: "standard", value: searchText, onChange: e => setSearchText(e.target.value), slotProps: {
                         input: {
                             startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(Search, {}) })),
                             disableUnderline: true,
@@ -2710,17 +2720,17 @@ function NeoDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
         // Fix for MUI X 8.15.0+ scroll shadow issue - backgroundColor must be on main, not root
         // See: https://github.com/mui/mui-x/issues/20107
         // This must be set to prevent scroll shadow artifacts
-        [`& .${gridClasses$1.main}`]: {
+        [`& .${gridClasses.main}`]: {
             backgroundColor: semanticColors.surfaces.white,
         },
         // White background for empty/loading overlays
-        [`& .${gridClasses$1.overlay}`]: {
+        [`& .${gridClasses.overlay}`]: {
             backgroundColor: semanticColors.surfaces.white,
         },
         ...getDataGridHeaderStyles(),
         border: `1px solid ${semanticColors.border.secondary}`,
         // Style row selection checkboxes to match header (16px, proper spacing)
-        [`& .${gridClasses$1.cellCheckbox}`]: {
+        [`& .${gridClasses.cellCheckbox}`]: {
             [`& .${checkboxClasses.root}`]: {
                 padding: `${spacing.spacing_1}px`,
                 [`& .${svgIconClasses.root}`]: {
@@ -2730,7 +2740,7 @@ function NeoDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
             },
         },
         // Ensure cells are vertically centered
-        [`& .${gridClasses$1.cell}`]: {
+        [`& .${gridClasses.cell}`]: {
             minHeight: density === 'compact' ? 36 : density === 'comfortable' ? 52 : 44,
             paddingLeft: `${spacing.spacing_3}px`,
             paddingRight: `${spacing.spacing_3}px`,
@@ -4207,11 +4217,11 @@ const PaginationText = styled('p')(({ theme }) => ({
  * />
  */
 const NeoFooter = ({ variant = 'pagination', showShadow = false, loading = false, resultCount, onLoadMore, hasMore = true, paginationInfo, onPreviousPage, onNextPage, hasPreviousPage, hasNextPage, showSelected = true, children, }) => {
-    const apiRef = useGridApiContext$1();
+    const apiRef = useGridApiContext();
     // Use selectors to reactively subscribe to pagination state changes
-    const paginationModel = useGridSelector$1(apiRef, gridPaginationModelSelector);
-    const rowCount = useGridSelector$1(apiRef, gridRowCountSelector);
-    const selectedCount = useGridSelector$1(apiRef, gridRowSelectionCountSelector);
+    const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
+    const rowCount = useGridSelector(apiRef, gridRowCountSelector);
+    const selectedCount = useGridSelector(apiRef, gridRowSelectionCountSelector);
     // For pagination variant, try to derive info from DataGrid if not provided
     const derivePaginationInfo = () => {
         if (paginationInfo) {
@@ -4347,7 +4357,7 @@ function NeoInfiniteScrollGrid({ onLoadMore, hasNextPage = true, loadMoreAtScrol
         }
         const unsubscribe = apiRef.current?.subscribeEvent?.('scrollPositionChange', (e) => {
             if (!scrollerRef.current) {
-                const elem = document.querySelector(`.${gridClasses$1.virtualScroller}`);
+                const elem = document.querySelector(`.${gridClasses.virtualScroller}`);
                 if (elem) {
                     scrollerRef.current = elem;
                 }
@@ -4401,7 +4411,7 @@ function NeoInfiniteScrollGrid({ onLoadMore, hasNextPage = true, loadMoreAtScrol
             },
         }, sx: {
             // Add border at bottom of rows section (above footer)
-            [`& .${gridClasses$1.virtualScrollerContent}`]: {
+            [`& .${gridClasses.virtualScrollerContent}`]: {
                 borderBottom: `1px solid ${semanticColors.border.primary}`,
             },
             ...userSx,
@@ -4564,7 +4574,7 @@ const StyledFormHelperText = styled(FormHelperText, {
 const NeoInputField = ({ size = 'medium', destructive = false, label, required = false, infoIcon, helperText, errorMessage, startIcon, endIcon, disabled, id, ...props }) => {
     const inputId = id || `neo-input-${Math.random().toString(36).substring(7)}`;
     const helperTextId = helperText || errorMessage ? `${inputId}-helper-text` : undefined;
-    return (jsxs(StyledFormControl, { size: size, error: destructive, disabled: disabled, children: [label && (jsxs(StyledInputLabel, { htmlFor: inputId, size: size, infoIcon: !!infoIcon, disabled: disabled, error: destructive, children: [label, required && jsx("span", { "aria-hidden": "true", children: "*" }), infoIcon && jsx(InfoIconWrapper, { children: infoIcon })] })), jsx(StyledInputBase, { id: inputId, size: size, destructive: destructive, disabled: disabled, error: destructive, "aria-describedby": helperTextId, startAdornment: startIcon ? (jsx(InputAdornment, { position: "start", style: { paddingLeft: size === 'small' ? spacing.spacing_1_1_2 : spacing.spacing_2 }, children: startIcon })) : undefined, endAdornment: destructive ? (jsx(InputAdornment, { position: "end", style: { paddingRight: spacing.spacing_1_1_2 }, children: jsx(CircleAlert, { size: 20 }) })) : endIcon ? (jsx(InputAdornment, { position: "end", style: { paddingRight: spacing.spacing_1_1_2 }, children: endIcon })) : undefined, ...props }), (helperText || errorMessage) && (jsx(StyledFormHelperText, { id: helperTextId, error: destructive, disabled: disabled, children: destructive ? errorMessage : helperText }))] }));
+    return (jsxs(StyledFormControl, { size: size, error: destructive, disabled: disabled, children: [label && (jsxs(StyledInputLabel, { htmlFor: inputId, size: size, infoIcon: !!infoIcon, disabled: disabled, error: destructive, shrink: true, children: [label, required && jsx("span", { "aria-hidden": "true", children: "*" }), infoIcon && jsx(InfoIconWrapper, { children: infoIcon })] })), jsx(StyledInputBase, { id: inputId, size: size, destructive: destructive, disabled: disabled, error: destructive, "aria-describedby": helperTextId, startAdornment: startIcon ? (jsx(InputAdornment, { position: "start", style: { paddingLeft: size === 'small' ? spacing.spacing_1_1_2 : spacing.spacing_2 }, children: startIcon })) : undefined, endAdornment: destructive ? (jsx(InputAdornment, { position: "end", style: { paddingRight: spacing.spacing_1_1_2 }, children: jsx(CircleAlert, { size: 20 }) })) : endIcon ? (jsx(InputAdornment, { position: "end", style: { paddingRight: spacing.spacing_1_1_2 }, children: endIcon })) : undefined, ...props }), (helperText || errorMessage) && (jsx(StyledFormHelperText, { id: helperTextId, error: destructive, disabled: disabled, children: destructive ? errorMessage : helperText }))] }));
 };
 NeoInputField.displayName = 'NeoInputField';