@sisense/sdk-shared-ui 1.27.1 → 1.29.0

package/src/lib/TablePagination/PaginationActionsComponent/PaginationActionsComponent.tsx

@@ -1,87 +0,0 @@
-import React, { ForwardedRef, useContext } from 'react';
-import Pagination, { type PaginationRenderItemParams } from '@mui/material/Pagination';
-import PaginationItem from '@mui/material/PaginationItem';
-import { TablePaginationActionsProps } from '@mui/material/TablePagination/TablePaginationActions';
-
-import ThemeProvider from '@mui/material/styles/ThemeProvider';
-
-import { Icon } from '../../Icon';
-import { paginationActionsComponentTheme } from './themes';
-import { Typography } from '../../Typography';
-import { siColors } from '../../themes';
-import { TablePaginationContext } from '../TablePaginationContext';
-
-export type PaginationActionsComponentProps = Omit<
-  TablePaginationActionsProps,
-  'onPageChange' | 'color' | 'getItemAriaLabel'
-> & {
-  onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
-};
-
-const PAGE_START_INDEX = 1;
-export const PaginationActionsComponent = React.forwardRef(
-  (
-    // { onPageChange, count, rowsPerPage, page, ...rest }: PaginationActionsComponentProps,
-    { onPageChange, count, rowsPerPage, page }: PaginationActionsComponentProps,
-    ref: ForwardedRef<HTMLElement>,
-  ) => {
-    const context = useContext(TablePaginationContext);
-
-    const handleOnPageChange = (event: React.ChangeEvent<unknown>, page: number) =>
-      onPageChange(null, page);
-
-    return (
-      <ThemeProvider theme={paginationActionsComponentTheme}>
-        <Pagination
-          //{...rest}
-          ref={ref}
-          count={Math.ceil(count / rowsPerPage)}
-          page={Number(page) + PAGE_START_INDEX}
-          siblingCount={context.siblingCount}
-          onChange={handleOnPageChange}
-          showFirstButton={true}
-          showLastButton={true}
-          size={'small'}
-          boundaryCount={PAGE_START_INDEX}
-          renderItem={(item: PaginationRenderItemParams) => (
-            <PaginationItem
-              components={{
-                first: () => (
-                  <Icon
-                    sx={{ color: siColors.StUiColors.additional }}
-                    name={'general-double-arrow-back'}
-                  />
-                ),
-                last: () => (
-                  <Icon
-                    sx={{ color: siColors.StUiColors.additional }}
-                    name={'general-double-arrow-front'}
-                  />
-                ),
-                next: () => (
-                  <Icon
-                    sx={{ color: siColors.StUiColors.additional }}
-                    name={'general-arrow-right'}
-                  />
-                ),
-                previous: () => (
-                  <Icon
-                    sx={{ color: siColors.StUiColors.additional }}
-                    name={'general-arrow-left'}
-                  />
-                ),
-              }}
-              {...item}
-              page={
-                <Typography variant="bodyLabel" dataTestId={`PaginationPage-${item.page}`}>
-                  {item.page}
-                </Typography>
-              }
-            />
-          )}
-          data-testid={'PaginationActionsComponent'}
-        />
-      </ThemeProvider>
-    );
-  },
-);

package/src/lib/TablePagination/PaginationActionsComponent/index.ts

@@ -1,4 +0,0 @@
-export {
-  PaginationActionsComponent,
-  type PaginationActionsComponentProps,
-} from './PaginationActionsComponent';

package/src/lib/TablePagination/PaginationActionsComponent/themes/index.ts

@@ -1,4 +0,0 @@
-export {
-  paginationActionsComponentTheme,
-  type PaginationActionsComponentTheme,
-} from './paginationActionsComponentTheme';

package/src/lib/TablePagination/PaginationActionsComponent/themes/paginationActionsComponentTheme.tsx

@@ -1,70 +0,0 @@
-import createTheme from '@mui/material/styles/createTheme';
-
-// import { injectStylesWithWrapper, themeService } from '@sbi/styleguide';
-
-import { siColors } from '../../../themes';
-// import { calcStyles } from './uiCustomization';
-
-const DEFAULT_HEIGHT = '24px';
-const DEFAULT_WIDTH = '24px';
-
-// injectStylesWithWrapper && injectStylesWithWrapper(calcStyles);
-
-export const paginationActionsComponentTheme = createTheme({
-  components: {
-    MuiPagination: {
-      styleOverrides: {
-        root: {
-          display: 'flex',
-          justifyContent: 'space-around',
-          flexGrow: 1,
-          '.MuiPagination-ul': {
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'center',
-            alignItems: 'center',
-            height: DEFAULT_HEIGHT,
-          },
-        },
-      },
-    },
-    MuiPaginationItem: {
-      styleOverrides: {
-        root: {
-          height: DEFAULT_HEIGHT,
-          minWidth: DEFAULT_WIDTH,
-          margin: '0 2px',
-          '&.Mui-selected': {
-            border: `1px solid ${siColors.StUiColors.default}`,
-            borderRadius: '12px',
-            backgroundColor: 'transparent',
-            '&:hover': {
-              backgroundColor: siColors.StBackgroundColors.themeAgnostic,
-              // color: themeService.getDesignSettings().typography.primaryTextColor,
-            },
-          },
-          '&:hover': {
-            backgroundColor: siColors.StBackgroundColors.themeAgnostic,
-            // color: themeService.getDesignSettings().typography.primaryTextColor,
-          },
-          '&.MuiPaginationItem-ellipsis': {
-            background: 'transparent',
-            fontFamily: 'Open Sans',
-            fontWeight: '400',
-            fontSize: '13px',
-            lineHeight: '18px',
-            paddingTop: '4px',
-          },
-          '&.MuiPaginationItem-firstLast': {
-            display: 'none',
-          },
-          '&.MuiPaginationItem-previousNext': {
-            width: '40px',
-          },
-        },
-      },
-    },
-  },
-});
-
-export type PaginationActionsComponentTheme = typeof paginationActionsComponentTheme;

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

@@ -1,17 +0,0 @@
-export {};
-// import { CalcStyles, DesignSettings, utils } from '@sbi/styleguide';
-//
-// export const calcStyles: CalcStyles = (designSettings: DesignSettings) => ({
-//     '.Mui-selected': {
-//         borderColor: designSettings.typography.secondaryTextColor,
-//     },
-//     '.MuiPaginationItem-previousNext .MuiSvgIcon-root': {
-//         color: utils.makeASlightlyDifferentColor(designSettings.typography.secondaryTextColor, 0.1),
-//         '&:hover': {
-//             backgroundColor: 'transparent',
-//         },
-//     },
-//     '.MuiPaginationItem-ellipsis': {
-//         color: utils.makeASlightlyDifferentColor(designSettings.typography.secondaryTextColor, 0.1),
-//     },
-// });

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;
-}