@moderneinc/neo-styled-components 4.1.2-next.f98de9 → 5.0.0-next.0fa9b3

package/dist/DatePicker/DatePicker.d.ts

@@ -71,11 +71,11 @@ export interface NeoDatePickerProps {
     /**
      * Additional props passed to single DatePicker
      */
-    datePickerProps?: Omit<Partial<DatePickerProps<false>>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
+    datePickerProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
     /**
      * Additional props passed to DateRangePicker
      */
-    dateRangePickerProps?: Omit<Partial<DateRangePickerProps<false>>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
+    dateRangePickerProps?: Omit<Partial<DateRangePickerProps>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
 }
 /**
  * NeoDatePicker - Moderne design system date picker component

package/dist/index.d.ts

@@ -2852,11 +2852,11 @@ interface NeoDatePickerProps {
     /**
      * Additional props passed to single DatePicker
      */
-    datePickerProps?: Omit<Partial<DatePickerProps<false>>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
+    datePickerProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
     /**
      * Additional props passed to DateRangePicker
      */
-    dateRangePickerProps?: Omit<Partial<DateRangePickerProps<false>>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
+    dateRangePickerProps?: Omit<Partial<DateRangePickerProps>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
 }
 /**
  * NeoDatePicker - Moderne design system date picker component

package/dist/index.esm.js

@@ -31,8 +31,8 @@ import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { pickerPopperClasses } from '@mui/x-date-pickers/internals';
+import { pickerDayClasses } from '@mui/x-date-pickers/PickerDay';
 import { pickersCalendarHeaderClasses } from '@mui/x-date-pickers/PickersCalendarHeader';
-import { pickersDayClasses } from '@mui/x-date-pickers/PickersDay';
 import { PickersShortcuts } from '@mui/x-date-pickers/PickersShortcuts';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 import { dateRangePickerDayClasses } from '@mui/x-date-pickers-pro/DateRangePickerDay';
@@ -2785,18 +2785,21 @@ NeoDataGridColumnsButton.displayName = 'NeoDataGridColumnsButton';
 const sizeStyles = {
     small: {
         height: 16,
+        minWidth: 16,
         paddingLeft: spacing.spacing_1_2, // 4px
         paddingRight: spacing.spacing_1_2, // 4px
     },
     medium: {
         height: 18,
+        minWidth: 18,
         paddingLeft: spacing.spacing_3_4, // 6px
         paddingRight: spacing.spacing_3_4, // 6px
     },
     large: {
         height: 20,
-        paddingLeft: spacing.spacing_3_4, // 6px
-        paddingRight: spacing.spacing_3_4, // 6px
+        minWidth: 20,
+        paddingLeft: spacing.spacing_1, // 8px
+        paddingRight: spacing.spacing_1, // 8px
     },
 };
 const outlinedColorStyles = {
@@ -2847,8 +2850,10 @@ const filledColorStyles = {
 };
 const StyledChip$1 = styled(Chip)(({ theme, size, variant, color }) => ({
     padding: 0,
+    boxSizing: 'border-box',
     borderRadius: borderRadius.full,
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
+    lineHeight: 1,
     fontWeight: typography.fontWeight.medium,
     ...(size && sizeStyles[size]),
     [`& .${chipClasses.label}`]: {
@@ -3573,7 +3578,7 @@ const StyledDatePicker = styled(DatePicker)(({ theme }) => ({
         fontWeight: typography.fontWeight.medium,
         color: semanticColors.typography.bodySecondary,
     },
-    [`& .${pickersDayClasses.root}`]: {
+    [`& .${pickerDayClasses.root}`]: {
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         color: semanticColors.typography.bodySecondary,
         borderRadius: borderRadius.l,
@@ -3587,7 +3592,7 @@ const StyledDatePicker = styled(DatePicker)(({ theme }) => ({
                 backgroundColor: colors.grey[800],
             },
         },
-        [`&.${pickersDayClasses.today}`]: {
+        [`&.${pickerDayClasses.today}`]: {
             border: `2px solid ${colors.grey[800]}`,
             backgroundColor: 'transparent',
         },
@@ -3613,8 +3618,6 @@ const StyledDateRangePicker = styled(DateRangePicker)(({ theme }) => ({
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         color: semanticColors.typography.bodySecondary,
         borderRadius: borderRadius.l,
-    },
-    [`& .${dateRangePickerDayClasses.day}`]: {
         '&:hover': {
             backgroundColor: semanticColors.icons.hoverBackground,
         },
@@ -3623,15 +3626,13 @@ const StyledDateRangePicker = styled(DateRangePicker)(({ theme }) => ({
             color: semanticColors.surfaces.white,
         },
     },
-    [`& .${dateRangePickerDayClasses.rangeIntervalDayHighlight}`]: {
+    [`& .${dateRangePickerDayClasses.insideSelection}`]: {
         backgroundColor: semanticColors.icons.hoverBackground,
+        color: semanticColors.typography.input.default,
     },
-    [`& .${dateRangePickerDayClasses.rangeIntervalDayHighlightStart}, & .${dateRangePickerDayClasses.rangeIntervalDayHighlightEnd}`]: {
+    [`& .${dateRangePickerDayClasses.selectionStart}, & .${dateRangePickerDayClasses.selectionEnd}`]: {
         backgroundColor: colors.grey[800],
     },
-    [`& .${dateRangePickerDayClasses.dayInsideRangeInterval}`]: {
-        color: semanticColors.typography.input.default,
-    },
     [`& .${pickersCalendarHeaderClasses.label}`]: {
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         fontWeight: typography.fontWeight.semiBold,
@@ -6554,7 +6555,11 @@ const ItemEndAction = styled('span')({
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4190-30493
  */
 const NeoTreeView = ({ slots, ...props }) => {
-    return (jsx(StyledTreeView, { slots: {
+    return (jsx(StyledTreeView
+    // v9 enables virtualization by default; disabled to preserve current layout behavior
+    , { 
+        // v9 enables virtualization by default; disabled to preserve current layout behavior
+        disableVirtualization: true, slots: {
             item: NeoTreeItem,
             collapseIcon: CollapseIcon,
             expandIcon: ExpandIcon,
@@ -6575,17 +6580,14 @@ const StyledTreeView = styled(RichTreeViewPro)({
     [`& .${treeItemClasses.content}:hover`]: {
         backgroundColor: semanticColors.surfaces.listHover,
     },
-    [`& .${treeItemClasses.content}.Mui-focused`]: {
+    [`& .${treeItemClasses.content}[data-focused]`]: {
         boxShadow: `inset 0 0 0 2px ${semanticColors.border.focus}`,
         backgroundColor: 'transparent',
     },
-    [`& .${treeItemClasses.content}.Mui-selected`]: {
-        backgroundColor: semanticColors.surfaces.listHover,
-    },
-    [`& .${treeItemClasses.content}.Mui-selected:hover`]: {
+    [`& .${treeItemClasses.content}[data-selected]`]: {
         backgroundColor: semanticColors.surfaces.listHover,
     },
-    [`& .${treeItemClasses.content}.Mui-selected.Mui-focused`]: {
+    [`& .${treeItemClasses.content}[data-selected][data-focused]`]: {
         backgroundColor: semanticColors.surfaces.listHover,
         boxShadow: `inset 0 0 0 2px ${semanticColors.border.focus}`,
     },