@sisense/sdk-shared-ui 0.1.0 → 1.27.0

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

@@ -0,0 +1,186 @@
+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/MenuItem/index.ts

@@ -0,0 +1,2 @@
+export { MenuItem, itemTypes } from './MenuItem';
+export type { MenuItemProps, ItemType } from './MenuItem';

package/src/lib/Menu/index.ts

@@ -0,0 +1,6 @@
+import Menu from './Menu';
+
+export default Menu;
+export { itemTypes, MenuItem } from './MenuItem';
+export * from './Menu';
+export type { MenuItemProps, ItemType } from './MenuItem';

package/src/lib/Menu/utils.ts

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,15 @@
+.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

@@ -0,0 +1,92 @@
+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

@@ -0,0 +1,20 @@
+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/Popover/index.ts

@@ -0,0 +1,6 @@
+import { AlignPoints } from './align.interface';
+import Popover from './Popover';
+
+export default Popover;
+export * from './Popover';
+export { AlignPoints };

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

@@ -0,0 +1,22 @@
+.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

@@ -0,0 +1,89 @@
+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

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

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

@@ -0,0 +1,87 @@
+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

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

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

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

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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,17 @@
+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),
+//     },
+// });