@sisense/sdk-shared-ui 1.27.1 → 1.29.0

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

@@ -1,241 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-
-import { MenuItem, itemTypes } from './MenuItem';
-import styles from '../Menu.module.scss';
-
-import '@testing-library/jest-dom';
-
-describe('MenuItem Component', () => {
-  test('should render a basic menu item', () => {
-    render(
-      <MenuItem
-        handleClick={vi.fn()}
-        caption="Test Item"
-        type={itemTypes.ITEM}
-        dataTestId="menu-item"
-      />,
-    );
-
-    const menuItem = screen.getByTestId('menu-item');
-
-    expect(menuItem).toBeInTheDocument();
-    expect(menuItem).toHaveClass(styles.menuItemText);
-    expect(menuItem).toHaveTextContent('Test Item');
-  });
-
-  test('should trigger handleClick on click', () => {
-    const mockHandleClick = vi.fn();
-    render(
-      <MenuItem
-        handleClick={mockHandleClick}
-        caption="Test Item"
-        type={itemTypes.ITEM}
-        dataTestId="menu-item"
-      />,
-    );
-
-    const menuItem = screen.getByTestId('menu-item');
-    fireEvent.click(menuItem);
-
-    expect(mockHandleClick).toHaveBeenCalledTimes(1);
-  });
-
-  test('should not trigger handleClick when disabled', () => {
-    const mockHandleClick = vi.fn();
-    render(
-      <MenuItem
-        handleClick={mockHandleClick}
-        caption="Test Item"
-        type={itemTypes.ITEM}
-        dataTestId="menu-item"
-        disabled={true}
-      />,
-    );
-
-    const menuItem = screen.getByTestId('menu-item');
-    fireEvent.click(menuItem);
-
-    expect(mockHandleClick).not.toHaveBeenCalled();
-  });
-
-  test('should render a radio button when type is RADIO', () => {
-    render(
-      <MenuItem
-        handleClick={vi.fn()}
-        caption="Test Item"
-        type={itemTypes.RADIO}
-        dataTestId="menu-item"
-        checked={true}
-      />,
-    );
-
-    expect(screen.getByRole('radio')).toBeChecked();
-  });
-
-  test('should render a checkbox when type is CHECKBOX', () => {
-    render(
-      <MenuItem
-        handleClick={vi.fn()}
-        caption="Test Item"
-        type={itemTypes.CHECKBOX}
-        dataTestId="menu-item"
-        checked={true}
-      />,
-    );
-
-    expect(screen.getByRole('checkbox')).toBeChecked();
-  });
-
-  test('should render a toggle when type is TOGGLE', () => {
-    render(
-      <MenuItem
-        handleClick={vi.fn()}
-        caption="Test Item"
-        type={itemTypes.TOGGLE}
-        dataTestId="menu-item"
-        checked={true}
-      />,
-    );
-
-    expect(screen.getByText('Test Item')).toBeInTheDocument();
-  });
-
-  test('should render nested content when type is NESTED', () => {
-    render(
-      <MenuItem
-        handleClick={vi.fn()}
-        caption="Test Item"
-        type={itemTypes.NESTED}
-        dataTestId="menu-item"
-        subCaption="Sub Item"
-      />,
-    );
-
-    expect(screen.getByText('Test Item')).toBeInTheDocument();
-    expect(screen.getByText('Sub Item')).toBeInTheDocument();
-  });
-
-  test('should render icon component when type is NESTED', () => {
-    const { container } = render(
-      <MenuItem
-        handleClick={vi.fn()}
-        caption="Test Item"
-        type={itemTypes.NESTED}
-        dataTestId="menu-item"
-        subCaption="Sub Item"
-      />,
-    );
-
-    const icon = container.querySelector('.app-icon--general-double-arrow-front');
-
-    expect(icon).toBeInTheDocument();
-  });
-
-  test('should render icon component when type is ITEM and selected', () => {
-    const { container } = render(
-      <MenuItem
-        handleClick={vi.fn()}
-        caption="Test Item"
-        type={itemTypes.ITEM}
-        dataTestId="menu-item"
-        selected={true}
-      />,
-    );
-
-    const icon = container.querySelector('.app-icon--general-vi-small-white');
-
-    expect(icon).toBeInTheDocument();
-  });
-
-  test('should render tooltip if provided', () => {
-    render(
-      <MenuItem
-        handleClick={vi.fn()}
-        caption="Test Item"
-        type={itemTypes.ITEM}
-        dataTestId="menu-item"
-        tooltip="Tooltip text"
-      />,
-    );
-
-    const tooltipTrigger = screen.getByTestId('menu-item');
-    fireEvent.mouseOver(tooltipTrigger);
-
-    expect(screen.getByText('Tooltip text')).toBeInTheDocument();
-  });
-
-  test('should apply the correct classes when checked', () => {
-    render(
-      <MenuItem
-        handleClick={vi.fn()}
-        caption="Test Item"
-        type={itemTypes.ITEM}
-        dataTestId="menu-item"
-        checked={true}
-      />,
-    );
-
-    const menuItem = screen.getByRole('listitem');
-
-    expect(menuItem).toHaveClass(styles.checked);
-  });
-
-  test('should apply the correct classes when disabled', () => {
-    render(
-      <MenuItem
-        handleClick={vi.fn()}
-        caption="Test Item"
-        type={itemTypes.ITEM}
-        dataTestId="menu-item"
-        disabled={true}
-      />,
-    );
-
-    const menuItem = screen.getByRole('listitem');
-
-    expect(menuItem).toHaveClass(styles.disabled);
-  });
-
-  test('should call handleOver on hover', () => {
-    const mockHandleOver = vi.fn();
-
-    render(
-      <MenuItem
-        handleClick={vi.fn()}
-        caption="Test Item"
-        type={itemTypes.ITEM}
-        dataTestId="menu-item"
-        disabled={true}
-        handleOver={mockHandleOver}
-      />,
-    );
-
-    const menuItem = screen.getByTestId('menu-item');
-    fireEvent.mouseOver(menuItem);
-
-    expect(mockHandleOver).toHaveBeenCalledTimes(1);
-  });
-
-  test('should call handleOut on hover', () => {
-    const mockHandleOut = vi.fn();
-
-    render(
-      <MenuItem
-        handleClick={vi.fn()}
-        caption="Test Item"
-        type={itemTypes.ITEM}
-        dataTestId="menu-item"
-        disabled={true}
-        handleOver={vi.fn()}
-        handleOut={mockHandleOut}
-      />,
-    );
-
-    const menuItem = screen.getByTestId('menu-item');
-    fireEvent.mouseOver(menuItem);
-    fireEvent.mouseOut(menuItem);
-
-    expect(mockHandleOut).toHaveBeenCalledTimes(1);
-  });
-});

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