@sisense/sdk-shared-ui 1.27.1 → 1.28.0

package/src/lib/TablePagination/TablePagination.tsx

@@ -1,148 +0,0 @@
-import React, { ForwardedRef } from 'react';
-import MuiTablePagination, {
-  type TablePaginationProps as MuiTablePaginationProps,
-} from '@mui/material/TablePagination';
-import ThemeProvider from '@mui/material/styles/ThemeProvider';
-import { useMeasure } from 'react-use';
-import { UsePaginationProps } from '@mui/material/usePagination/usePagination';
-
-import { TablePaginationContext } from './TablePaginationContext';
-import {
-  getCurrentBreakpoint,
-  RESPONSIVE_TABLE_PAGINATION_CLASS,
-  tablePaginationResponsiveWidth,
-} from './themes/tablePaginationResponsiveDesign';
-import { PaginationActionsComponent } from './PaginationActionsComponent';
-import { Typography } from '../Typography';
-import { Icon, type IconProps } from '../Icon';
-
-import { siColors } from '../themes';
-import { tablePaginationTheme, type TablePaginationTheme } from './themes';
-
-type MuiSelectDisplayProps = React.HTMLAttributes<HTMLDivElement> & {
-  'data-testid'?: string;
-};
-
-export type TablePaginationProps = Omit<
-  MuiTablePaginationProps,
-  'onPageChange' | 'ActionsComponent' | 'labelRowsPerPage' | 'onRowsPerPageChange'
-> & {
-  displayedLabelRows: { conjunction: string; result: string };
-  onRowsPerPageChange: (rowsPerPage: number) => void;
-  onPageChange: (page: number) => void;
-  theme?: TablePaginationTheme;
-  labelRowsPerPage: string;
-  labelRowsPerPageShort?: string;
-  dataTestId?: string;
-};
-
-const PAGE_START_ZERO_BASE_INDEX = 1;
-
-const TablePagination = React.forwardRef(
-  // eslint-disable-next-line max-lines-per-function
-  (
-    {
-      count,
-      page,
-      rowsPerPage,
-      onRowsPerPageChange,
-      displayedLabelRows,
-      onPageChange,
-      labelRowsPerPage,
-      labelRowsPerPageShort = 'Rows',
-      rowsPerPageOptions = [10, 25, 50, 75],
-      theme = tablePaginationTheme,
-      dataTestId,
-      style,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
-      ...rest
-    }: TablePaginationProps,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => {
-    // React sensor hook that tracks dimensions of an HTML element using the Resize Observer API
-    const [measureRef, { width }] = useMeasure<HTMLDivElement>();
-    const breakpointIsLessThanLg = width < tablePaginationResponsiveWidth.lg;
-
-    const handleLabelDisplayedRows = ({
-      from,
-      to,
-      count,
-    }: {
-      from: number;
-      to: number;
-      count: number;
-    }) => {
-      const msg = breakpointIsLessThanLg
-        ? `${from}-${to} / ${count}`
-        : `${from}-${to} ${displayedLabelRows.conjunction} ${count} ${displayedLabelRows.result}`;
-
-      return (
-        <Typography variant={'bodyParagraph'} sx={{ color: siColors.StTextColors.secondary }}>
-          {msg}
-        </Typography>
-      );
-    };
-
-    const handleOnPageChange = (event: React.MouseEvent<HTMLButtonElement> | null, page: number) =>
-      onPageChange(page);
-
-    const handleOnRowsPerPage = (
-      event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
-    ) => onRowsPerPageChange(Number(event.target.value));
-
-    const breakpoint = getCurrentBreakpoint(width);
-    const paginationProps: UsePaginationProps = {
-      siblingCount: breakpointIsLessThanLg ? 0 : 1,
-    };
-
-    return (
-      <ThemeProvider theme={theme}>
-        <TablePaginationContext.Provider value={paginationProps}>
-          <div className={`${RESPONSIVE_TABLE_PAGINATION_CLASS} ${breakpoint}`} ref={measureRef}>
-            <MuiTablePagination
-              ref={ref}
-              component={'div'}
-              count={count}
-              page={page - PAGE_START_ZERO_BASE_INDEX}
-              ActionsComponent={PaginationActionsComponent}
-              onPageChange={handleOnPageChange}
-              onRowsPerPageChange={handleOnRowsPerPage}
-              rowsPerPage={rowsPerPage}
-              rowsPerPageOptions={rowsPerPageOptions}
-              labelDisplayedRows={handleLabelDisplayedRows}
-              slotProps={{
-                select: {
-                  SelectDisplayProps: {
-                    'data-testid': 'TablePaginationSelect',
-                  } as MuiSelectDisplayProps,
-                  IconComponent: (props: IconProps) => (
-                    <Icon {...props} name="general-arrow-big-down" />
-                  ),
-                  renderValue: (value: unknown) => (
-                    <Typography variant={'bodyParagraph'}>{String(value)}</Typography>
-                  ),
-                  MenuProps: {
-                    sx: {
-                      '.MuiPaper-root': {
-                        fontFamily: style?.fontFamily,
-                      },
-                    },
-                  },
-                },
-              }}
-              labelRowsPerPage={
-                <Typography variant={'bodyParagraph'}>
-                  {breakpointIsLessThanLg ? labelRowsPerPageShort : labelRowsPerPage}
-                </Typography>
-              }
-              data-testid={dataTestId}
-            />
-          </div>
-        </TablePaginationContext.Provider>
-      </ThemeProvider>
-    );
-  },
-);
-
-export default TablePagination;
-export { TablePagination };

package/src/lib/TablePagination/TablePaginationContext.ts

@@ -1,4 +0,0 @@
-import { UsePaginationProps } from '@mui/material/usePagination/usePagination';
-import { createContext } from 'react';
-
-export const TablePaginationContext = createContext<UsePaginationProps>({});

package/src/lib/TablePagination/index.ts

@@ -1,4 +0,0 @@
-import TablePagination from './TablePagination';
-
-export default TablePagination;
-export * from './TablePagination';

package/src/lib/TablePagination/themes/tablePaginationResponsiveDesign.ts

@@ -1,33 +0,0 @@
-export const RESPONSIVE_TABLE_PAGINATION_CLASS = 'responsive-table-pagination';
-
-// Each breakpoint (a key) matches with a fixed screen width in px:
-export const tablePaginationResponsiveWidth = {
-  xs: 0,
-  sm: 200,
-  md: 439,
-  lg: 600,
-  xl: 1536,
-};
-
-export const getCurrentBreakpoint = (width: number): string => {
-  if (inRange(tablePaginationResponsiveWidth.xs, tablePaginationResponsiveWidth.sm, width)) {
-    return 'xs';
-  }
-
-  if (inRange(tablePaginationResponsiveWidth.sm, tablePaginationResponsiveWidth.md, width)) {
-    return 'sm';
-  }
-
-  if (inRange(tablePaginationResponsiveWidth.md, tablePaginationResponsiveWidth.lg, width)) {
-    return 'md';
-  }
-
-  if (inRange(tablePaginationResponsiveWidth.lg, tablePaginationResponsiveWidth.xl, width)) {
-    return 'lg';
-  }
-
-  return 'xl';
-};
-
-const inRange = (start: number, end: number, point: number): boolean =>
-  point >= start && point < end;

package/src/lib/TablePagination/themes/tablePaginationTheme.tsx

@@ -1,128 +0,0 @@
-import createTheme from '@mui/material/styles/createTheme';
-
-// import { injectStylesWithWrapper, themeService } from '@sbi/styleguide';
-
-import { siColors, stEffects } from '../../themes';
-// import { calcStyles } from './uiCustomization';
-import { tablePaginationResponsiveWidth } from './tablePaginationResponsiveDesign';
-
-// injectStylesWithWrapper && injectStylesWithWrapper(calcStyles);
-export const tablePaginationTheme = createTheme({
-  breakpoints: {
-    values: tablePaginationResponsiveWidth,
-  },
-  components: {
-    MuiTablePagination: {
-      styleOverrides: {
-        root: {
-          display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          width: '100%',
-        },
-        toolbar: {
-          '&.MuiTablePagination-toolbar': {
-            display: 'flex',
-            flexDirection: 'row',
-            padding: '0px 20px 0 20px',
-            alignItems: 'center',
-            height: '30px',
-            width: '100%',
-          },
-          '.Mui-selected': {
-            margin: 0,
-          },
-        },
-        spacer: {
-          display: 'none',
-        },
-        displayedRows: {
-          whiteSpace: 'nowrap',
-        },
-        selectLabel: {
-          order: 4,
-          paddingLeft: '20px',
-        },
-        input: {
-          order: 5,
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          borderRadius: '4px',
-          marginRight: '0',
-        },
-        select: {
-          '&.MuiTablePagination-select': {
-            background: 'transparent',
-          },
-        },
-        selectIcon: {
-          position: 'absolute',
-          top: '8%',
-        },
-        menuItem: {
-          paddingLeft: '10px',
-          '&.MuiTablePagination-menuItem.Mui-selected': {
-            position: 'relative',
-            background: 'transparent',
-            // '&:hover': {
-            //     backgroundColor:
-            //         themeService.getDesignSettings().typography.primaryTextColor,
-            //     color: themeService.getDesignSettings().typography.primaryTextColor,
-            // },
-            '&:after': {
-              marginLeft: '15px',
-              content: '""',
-              display: 'block',
-              position: 'absolute',
-              width: '24px',
-              height: '24px',
-              top: '3px',
-              backgroundImage:
-                "url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.2604 8.58124L10.9174 16.0615L7 12.1442L7.70711 11.4371L10.7898 14.5197L15.4467 8L16.2604 8.58124Z' fill='%235B6372'/%3E%3C/svg%3E%0A\")",
-            },
-          },
-          '&.MuiTablePagination-menuItem': {
-            fontFamily: 'inherit',
-            fontWeight: '400',
-            fontSize: '13px',
-            lineHeight: '18px',
-            color: siColors.StTextColors.content,
-          },
-          '&:hover': {
-            backgroundColor: siColors.StBackgroundColors.priority,
-          },
-        },
-        actions: {
-          marginLeft: 0,
-        },
-      },
-    },
-    MuiPaper: {
-      styleOverrides: {
-        root: {
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          padding: '4px 0px',
-          gap: '4px',
-          marginTop: '4px',
-          background: siColors.StBackgroundColors.workspace,
-          boxShadow: stEffects.Shadows.level1,
-          borderRadius: '4px',
-        },
-      },
-    },
-    MuiList: {
-      styleOverrides: {
-        root: {
-          padding: 0,
-          width: '100%',
-        },
-      },
-    },
-  },
-});
-
-export type TablePaginationTheme = typeof tablePaginationTheme;

package/src/lib/TablePagination/themes/uiCustomization.ts

@@ -1,50 +0,0 @@
-export {};
-// import { CalcStyles, DesignSettings, utils } from '@sbi/styleguide';
-// import { RESPONSIVE_TABLE_PAGINATION_CLASS } from './tablePaginationResponsiveDesign';
-//
-// const DEFAULT_OPACITY = 0.1;
-//
-// export const calcStyles: CalcStyles = (designSettings: DesignSettings) => ({
-//     [`.${RESPONSIVE_TABLE_PAGINATION_CLASS}`]: {
-//         '&.sm, &.xs': {
-//             '.MuiTablePagination-selectLabel, .MuiTablePagination-displayedRows, .MuiInputBase-root':
-//                 {
-//                     display: 'none',
-//                 },
-//             '.MuiTablePagination-toolbar': {
-//                 padding: 0,
-//             },
-//         },
-//         '&.xs': {
-//             '.MuiPaginationItem-page, .MuiPaginationItem-ellipsis': {
-//                 display: 'none',
-//             },
-//             '.Mui-selected, .MuiPaginationItem-firstLast': {
-//                 display: 'block',
-//                 padding: 0,
-//             },
-//             '.MuiPaginationItem-previousNext': {
-//                 width: '26px',
-//             },
-//         },
-//         width: '100%',
-//     },
-//     '.MuiTablePagination-root': {
-//         backgroundColor: utils.makeASlightlyDifferentColor(
-//             designSettings.general.backgroundColor,
-//             DEFAULT_OPACITY,
-//         ),
-//     },
-//     '.MuiTablePagination-select.MuiTablePagination-select': {
-//         backgroundColor: designSettings.general.backgroundColor,
-//     },
-//     '.MuiTablePagination-select': {
-//         color: designSettings.typography.primaryTextColor,
-//     },
-//     '.MuiTablePagination-selectIcon': {
-//         color: utils.makeASlightlyDifferentColor(
-//             designSettings.typography.secondaryTextColor,
-//             DEFAULT_OPACITY,
-//         ),
-//     },
-// });

package/src/lib/Tooltip/Tooltip.module.scss

@@ -1,125 +0,0 @@
-@use 'sass:math';
-@import '../styles/style_styleguide_react/base';
-
-$tooltip-max-width: 432px;
-
-:global {
-  @import 'rc-tooltip/assets/bootstrap_white';
-
-  $arrow-size: 8px;
-  $arrow-depth: 6px; // Math.ceil(sqrt(2) * $arrow-size / 2)
-
-  .rc-tooltip {
-    padding: 0;
-    background-color: transparent;
-    opacity: 1;
-
-    &.hide-arrow {
-      .rc-tooltip-arrow,
-      .rc-tooltip-content:before {
-        display: none;
-      }
-
-      &.rc-tooltip-placement-top,
-      &.rc-tooltip-placement-bottom,
-      &.rc-tooltip-placement-left,
-      &.rc-tooltip-placement-right {
-        padding: 0;
-      }
-
-      .rc-tooltip-inner {
-        padding: 0;
-      }
-    }
-  }
-
-  .rc-tooltip-content {
-    position: relative;
-  }
-
-  .rc-tooltip-inner {
-    padding: 6px 12px;
-    min-height: 0;
-    border: 0;
-    border-radius: 4px;
-    @include boxShadow;
-    pointer-events: none;
-    color: $fore;
-    font-size: $sizeDefault;
-  }
-
-  .rc-tooltip-arrow {
-    border-width: 0 !important;
-    width: $arrow-size;
-    height: $arrow-size;
-    background-color: $back;
-    @include boxShadow;
-    z-index: -1;
-    transform: rotate(45deg);
-  }
-
-  .rc-tooltip-content:before {
-    content: '';
-    position: absolute;
-    width: $arrow-size;
-    height: $arrow-size;
-    background-color: $back;
-    transform: rotate(45deg);
-  }
-
-  .rc-tooltip-placement-top {
-    padding-bottom: $arrow-depth;
-
-    .rc-tooltip-arrow,
-    .rc-tooltip-content:before {
-      left: 50%;
-      margin-left: math.div(-$arrow-size, 2);
-      bottom: math.div(-$arrow-size, 2);
-    }
-  }
-
-  .rc-tooltip-placement-bottom {
-    padding-top: $arrow-depth;
-
-    .rc-tooltip-arrow,
-    .rc-tooltip-content:before {
-      left: 50%;
-      margin-left: math.div(-$arrow-size, 2);
-      top: math.div(-$arrow-size, 2);
-    }
-  }
-
-  .rc-tooltip-placement-right {
-    padding-left: $arrow-depth;
-
-    .rc-tooltip-arrow,
-    .rc-tooltip-content:before {
-      top: 50%;
-      margin-top: math.div(-$arrow-size, 2);
-      left: math.div(-$arrow-size, 2);
-    }
-  }
-
-  .rc-tooltip-placement-left {
-    padding-right: $arrow-depth;
-
-    .rc-tooltip-arrow,
-    .rc-tooltip-content:before {
-      top: 50%;
-      margin-top: math.div(-$arrow-size, 2);
-      right: math.div(-$arrow-size, 2);
-    }
-  }
-}
-
-.breakLongWord {
-  word-break: break-all;
-}
-
-.semanticText {
-  max-width: $tooltip-max-width;
-}
-
-:global(.sis-scope).tooltip {
-  padding: 12px 16px;
-}

package/src/lib/Tooltip/Tooltip.tsx

@@ -1,34 +0,0 @@
-import React, { forwardRef } from 'react';
-import MuiTooltip, { type TooltipProps as MuiTooltipProps } from '@mui/material/Tooltip';
-import ThemeProvider from '@mui/material/styles/ThemeProvider';
-import classnames from 'classnames';
-
-import { tooltipTheme, type TooltipTheme } from './themes';
-import { styleguideConstants } from '../constants/styleguideConstants';
-import styles from './Tooltip.module.scss';
-
-export type TooltipProps = MuiTooltipProps & { theme?: TooltipTheme };
-
-const Tooltip = forwardRef(
-  ({ title, children, arrow, theme = tooltipTheme, ...rest }: TooltipProps, ref) => {
-    const { classes: customClasses = {} } = rest;
-    const classes = {
-      ...customClasses,
-      tooltip: classnames(
-        styles.tooltip,
-        customClasses.tooltip,
-        styleguideConstants.SISENSE_NAMESPACE,
-      ),
-    };
-    return (
-      <ThemeProvider theme={theme}>
-        <MuiTooltip {...rest} title={title} arrow={arrow} ref={ref} classes={classes}>
-          {children}
-        </MuiTooltip>
-      </ThemeProvider>
-    );
-  },
-);
-
-export default Tooltip;
-export { Tooltip };

package/src/lib/Tooltip/themes/tooltipTheme.ts

@@ -1,30 +0,0 @@
-import createTheme from '@mui/material/styles/createTheme';
-import { siColors } from '../../themes';
-
-export const tooltipTheme = createTheme({
-  components: {
-    MuiTooltip: {
-      styleOverrides: {
-        arrow: {
-          color: siColors.StBackgroundColors.workspace,
-        },
-        tooltip: {
-          color: siColors.StTextColors.content,
-          maxWidth: '432px',
-          borderRadius: '4px',
-          display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'center',
-          alignItems: 'center',
-          padding: '12px 16px',
-          gap: '10px',
-          backgroundColor: siColors.StBackgroundColors.workspace,
-          filter:
-            'drop-shadow(0px 1px 4px rgba(9, 9, 10, 0.1)) drop-shadow(0px 4px 12px rgba(9, 9, 10, 0.2));',
-        },
-      },
-    },
-  },
-});
-
-export type TooltipTheme = typeof tooltipTheme;

package/src/lib/Typography/Typography.tsx

@@ -1,28 +0,0 @@
-import React, { ForwardedRef } from 'react';
-import MuiTypography, {
-  type TypographyProps as MuiTypographyProps,
-} from '@mui/material/Typography';
-import ThemeProvider from '@mui/material/styles/ThemeProvider';
-
-import { typographyTheme, type TypographyTheme } from './themes';
-
-export type TypographyProps = MuiTypographyProps & {
-  theme?: TypographyTheme;
-  dataTestId?: string;
-} & React.HTMLAttributes<HTMLSpanElement>;
-
-const Typography = React.forwardRef(
-  (
-    { children, theme = typographyTheme, dataTestId, ...rest }: TypographyProps,
-    ref: ForwardedRef<HTMLSpanElement>,
-  ) => (
-    <ThemeProvider theme={theme}>
-      <MuiTypography ref={ref} {...rest} data-testid={dataTestId}>
-        {children}
-      </MuiTypography>
-    </ThemeProvider>
-  ),
-);
-
-export default Typography;
-export { Typography };