@sisense/sdk-shared-ui 1.27.1 → 1.28.0

package/src/lib/Menu/MenuItem/MenuItem.tsx

@@ -1,186 +0,0 @@
-import React, { Component } from 'react';
-import classnames from 'classnames';
-
-import { DEPRECATED_Icon } from '../../DEPRECATED_Icon';
-
-import { RadioButton } from '../../RadioButton';
-import { DEPRECATED_Toggle } from '../../DEPRECATED_Toggle';
-import { DEPRECATED_Checkbox } from '../../DEPRECATED_Checkbox';
-import { DEPRECATED_Tooltip } from '../../DEPRECATED_Tooltip';
-
-import styles from '../Menu.module.scss';
-
-import { styleguideConstants } from '../../constants/styleguideConstants';
-
-export type ItemType = 'item' | 'radio' | 'checkbox' | 'toggle' | 'nested';
-
-export const itemTypes: { [key: string]: ItemType } = Object.freeze({
-  ITEM: 'item',
-  RADIO: 'radio',
-  CHECKBOX: 'checkbox',
-  TOGGLE: 'toggle',
-  NESTED: 'nested',
-});
-
-export type MenuItemProps = {
-  checked?: boolean;
-  className?: string;
-  dataTestId?: string;
-  disabled?: boolean;
-  handleClick: () => void;
-  handleOut?: () => void;
-  handleOver?: () => void;
-  iconClass?: string;
-  iconName?: string;
-  isDrill?: boolean;
-  caption: string;
-  subCaption?: string;
-  level?: number;
-  tooltip?: string | React.ReactFragment;
-  classNameTooltip?: string;
-  type: ItemType;
-  selected?: boolean;
-};
-
-export class MenuItem extends Component<MenuItemProps, unknown> {
-  static defaultProps = {
-    className: '',
-  };
-
-  constructor(props: MenuItemProps) {
-    super(props);
-    this.state = { inInlineConfirmation: false };
-  }
-
-  getContent() {
-    const { type, caption, subCaption, checked, selected } = this.props;
-    switch (type) {
-      case itemTypes.RADIO:
-        return (
-          <RadioButton
-            text={caption}
-            name={caption}
-            onChange={() => null}
-            value={caption}
-            checked={Boolean(checked)}
-            preventClick
-          />
-        );
-      case itemTypes.CHECKBOX:
-        return (
-          <DEPRECATED_Checkbox
-            title={caption}
-            text={caption}
-            onChange={() => null}
-            checked={Boolean(checked)}
-            className={styles.itemCheckBox}
-          />
-        );
-      case itemTypes.TOGGLE:
-        return (
-          <div>
-            <span>{caption}</span>
-            <DEPRECATED_Toggle
-              onChange={() => null}
-              className={styles.toggleButtonMenu}
-              checked={Boolean(checked)}
-            />
-          </div>
-        );
-      case itemTypes.NESTED:
-        return (
-          <div className={styles.nestedType}>
-            <div>{caption}</div>
-            <DEPRECATED_Icon className={styles.nestedIcon} name="general-double-arrow-front" />
-            <div>{subCaption}</div>
-          </div>
-        );
-      default:
-        return (
-          <div className={styles.itemType}>
-            {caption}
-            {selected && <DEPRECATED_Icon name="general-vi-small-white" />}
-          </div>
-        );
-    }
-  }
-
-  handleClick(e: React.MouseEvent) {
-    //This line is must-to-have if we update rc-tooltip version to 3.7.3 or upper
-    e.stopPropagation();
-    const { handleClick, disabled } = this.props;
-
-    if (disabled) {
-      return;
-    }
-
-    handleClick();
-  }
-
-  renderRegularMenuItem = () => {
-    const { dataTestId, iconName, iconClass, isDrill } = this.props;
-
-    return (
-      <span className={styles.itemContainer}>
-        {iconName && <DEPRECATED_Icon name={iconName} className={iconClass} />}
-        <span
-          data-testid={dataTestId}
-          className={classnames(styles.menuItemText, styleguideConstants.TEXT_PRIMARY)}
-        >
-          {this.getContent()}
-        </span>
-        {isDrill && <DEPRECATED_Icon name={'general-arrow-right'} />}
-      </span>
-    );
-  };
-
-  renderMenuItem = () => {
-    const { tooltip, classNameTooltip, level } = this.props;
-    const menuItemContent = this.renderRegularMenuItem();
-
-    if (tooltip) {
-      const overlay = <div>{tooltip}</div>;
-
-      return (
-        <DEPRECATED_Tooltip
-          overlay={overlay}
-          placement="right"
-          overlayClassName={classnames(classNameTooltip, styles.menuItemTooltip)}
-          mouseLeaveDelay={0}
-          align={{ offset: [level ? 5 : 10, 0] }}
-        >
-          {menuItemContent}
-        </DEPRECATED_Tooltip>
-      );
-    }
-
-    return menuItemContent;
-  };
-
-  render() {
-    const { checked, className, iconName, handleOver, handleOut, disabled } = this.props;
-    // const { inInlineConfirmation } = this.state;
-    const inInlineConfirmation = false;
-
-    const itemClasses = classnames(className, {
-      [styles.checked]: checked,
-      [styles.noIcon]: !iconName || inInlineConfirmation,
-      [styles.disabled]: disabled,
-      [styleguideConstants.TEXT_PRIMARY]: checked,
-      [styleguideConstants.TEXT_SECONDARY_HOVER]: !checked && !disabled,
-      [styleguideConstants.TEXT_SECONDARY]: disabled,
-    });
-
-    return (
-      <li
-        data-menu-item
-        className={itemClasses}
-        onClick={this.handleClick.bind(this)}
-        onMouseOver={handleOver}
-        onMouseOut={handleOut}
-      >
-        {this.renderMenuItem()}
-      </li>
-    );
-  }
-}

package/src/lib/Menu/utils.ts

@@ -1,13 +0,0 @@
-type Groups<T> = { [group: string]: T[] };
-
-export function groupBy<T>(arr: Array<T>, groupFunc: (val: T) => string): Groups<T> {
-  const initialGroups: Groups<T> = {};
-  return arr.reduce(function (acc, curr) {
-    const key = groupFunc(curr);
-    if (!acc[key]) {
-      acc[key] = [];
-    }
-    acc[key].push(curr);
-    return acc;
-  }, initialGroups);
-}

package/src/lib/Popover/Popover.module.scss

@@ -1,15 +0,0 @@
-.popover {
-  :global {
-    .rc-tooltip-inner {
-      pointer-events: auto;
-      overflow: hidden;
-    }
-  }
-}
-
-.popoverMask {
-  position: absolute;
-  width: 100%;
-  top: 0;
-  bottom: 0;
-}

package/src/lib/Popover/Popover.tsx

@@ -1,92 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-import type { TooltipProps } from 'rc-tooltip/lib/Tooltip';
-
-import { DEPRECATED_Tooltip } from '../DEPRECATED_Tooltip';
-
-import type { PositioningConfig } from './align.interface';
-
-const noop = () => {};
-
-import styles from './Popover.module.scss';
-
-const DEFAULT_Z_INDEX = 1069;
-
-export type PopoverProps = Pick<
-  TooltipProps,
-  'children' | 'onVisibleChange' | 'overlay' | 'placement' | 'trigger' | 'visible' | 'overlayStyle'
-> & {
-  align?: PositioningConfig;
-  level?: number;
-  bubbleMouseEvents?: boolean;
-  mask?: boolean;
-  maskClassName?: string;
-  onRequestClose?: (ev: Event) => void;
-  zIndex?: number;
-  getTooltipContainer?: () => HTMLElement;
-};
-
-const Popover = (props: PopoverProps): JSX.Element => {
-  const {
-    bubbleMouseEvents = false,
-    level = 0,
-    mask: maskVisible = true,
-    onRequestClose = noop,
-    visible = false,
-    zIndex = DEFAULT_Z_INDEX,
-    maskClassName,
-    getTooltipContainer,
-  } = props;
-
-  const getMaskContainer = () => {
-    let container = document.body;
-
-    if (getTooltipContainer) {
-      container = getTooltipContainer();
-    }
-
-    return container;
-  };
-
-  const onClick = (e: Event) => {
-    if (bubbleMouseEvents) {
-      return;
-    }
-
-    e.preventDefault();
-    e.stopPropagation();
-  };
-
-  return (
-    <>
-      {visible && maskVisible && (
-        <PortalFunctionalComponentWrapper portalRootEl={getMaskContainer()}>
-          <div
-            className={classNames(styles.popoverMask, maskClassName)}
-            style={{ zIndex: (zIndex + level).toString() }}
-            onClick={(event) => onRequestClose?.(event.nativeEvent)}
-          />
-        </PortalFunctionalComponentWrapper>
-      )}
-      <DEPRECATED_Tooltip
-        {...props}
-        overlayClassName={styles.popover}
-        hideArrow
-        onClick={onClick}
-        zIndex={zIndex + level + 1}
-        align={props.align}
-      />
-    </>
-  );
-};
-
-const PortalFunctionalComponentWrapper = (props: {
-  children: React.ReactNode;
-  portalRootEl: HTMLElement;
-}) => {
-  return ReactDOM.createPortal(props.children, props.portalRootEl);
-};
-
-export default Popover;
-export { Popover };

package/src/lib/Popover/align.interface.ts

@@ -1,20 +0,0 @@
-export enum AlignPoints {
-  topLeft = 'tl',
-  topCenter = 'tc',
-  topRight = 'tr',
-  centerLeft = 'cl',
-  centerCenter = 'cc',
-  centerRight = 'cr',
-  bottomLeft = 'bl',
-  bottomCenter = 'bc',
-  bottomRight = 'br',
-}
-
-type OffsetType = number | `${number}%`;
-
-export interface PositioningConfig {
-  points?: AlignPoints[];
-  offset?: OffsetType[];
-  targetOffset?: OffsetType[]; // ['30%', '40%'] - the offset targetNode by 30% of targetNode width in x and 40% of targetNode height in y
-  overflow?: { adjustX?: boolean; adjustY?: boolean };
-}

package/src/lib/RadioButton/RadioButton.module.scss

@@ -1,22 +0,0 @@
-.sharedComponentsInputRadioButton {
-  width: 28px;
-  height: 28px;
-  padding: 8px;
-
-  &:hover {
-    background-color: rgba(91, 99, 114, 0.1);
-    border-radius: 50%;
-  }
-}
-
-:global(.sis-scope .custom-radiobtn__text) {
-  padding-left: 4px;
-}
-
-.disabled {
-  pointer-events: none;
-
-  :global(.custom-radiobtn__text) {
-    color: rgba(91, 99, 114, 0.4);
-  }
-}

package/src/lib/RadioButton/RadioButton.tsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-
-import style from './RadioButton.module.scss';
-
-export type RadioButtonProps = {
-  checked: boolean;
-  value: string;
-  text: string;
-  disabled?: boolean;
-  inline?: boolean;
-  name?: string;
-  onChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
-  preventClick?: boolean;
-  title?: string;
-  inputRadioButtonClassName?: string;
-  className?: string;
-  textClassName?: string;
-  dataTestId?: string;
-};
-
-const RadioButton = ({
-  checked,
-  text,
-  disabled = false,
-  inline = false,
-  title = '',
-  name = '',
-  value,
-  onChange,
-  preventClick,
-  inputRadioButtonClassName,
-  className,
-  textClassName,
-  dataTestId = undefined,
-}: RadioButtonProps) => {
-  const inputProps = {
-    disabled,
-    name,
-    value,
-    ...(title && !disabled && { title }),
-  };
-  const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
-    if (preventClick) {
-      evt.preventDefault();
-      evt.stopPropagation();
-      return;
-    }
-
-    onChange(evt);
-  };
-
-  const radioButtonClasses = classnames(
-    'custom-radiobtn',
-    {
-      'custom-radiobtn--inline': inline,
-      [style.disabled]: disabled,
-    },
-    className,
-  );
-
-  return (
-    <div className={radioButtonClasses}>
-      <label className="custom-radiobtn__label">
-        <div
-          className={classnames(
-            style.sharedComponentsInputRadioButton,
-            inputRadioButtonClassName,
-            {},
-          )}
-        >
-          <input
-            className="custom-radiobtn__input"
-            type="radio"
-            onChange={handleChange}
-            checked={checked}
-            data-testid={dataTestId}
-            {...inputProps}
-          />
-          <span className="custom-radiobtn__icon" />
-        </div>
-        <span className={classnames('custom-radiobtn__text', textClassName)}>{text}</span>
-      </label>
-    </div>
-  );
-};
-
-export default RadioButton;
-export { RadioButton };

package/src/lib/RadioButton/index.ts

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

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),
-//     },
-// });