@sisense/sdk-shared-ui 1.27.1 → 1.28.0

package/src/lib/DEPRECATED_Icon/DEPRECATED_Icon.test.tsx

@@ -1,105 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-
-import '@testing-library/jest-dom';
-
-import { DEPRECATED_Icon, DEPRECATED_IconProps } from './DEPRECATED_Icon';
-
-describe('DEPRECATED_Icon Component', () => {
-  const defaultProps: DEPRECATED_IconProps = {
-    name: 'test-icon',
-    dataTestId: 'icon',
-  };
-
-  it('should renders without crashing', () => {
-    const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} />);
-
-    expect(getByTestId('icon')).toBeInTheDocument();
-  });
-
-  it('should apply the correct icon name class', () => {
-    const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} />);
-
-    expect(getByTestId('icon')).toHaveClass('app-icon--test-icon');
-  });
-
-  it('should apply hover suffix when hovered', () => {
-    const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} hoverSuffix="-hover" />);
-    const icon = getByTestId('icon');
-
-    fireEvent.mouseEnter(icon);
-
-    expect(icon).toHaveClass('app-icon--test-icon-hover');
-  });
-
-  it('should apply hover suffix when hovered and and remove when hover out', () => {
-    const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} hoverSuffix="-hover" />);
-    const icon = getByTestId('icon');
-
-    fireEvent.mouseEnter(icon);
-    fireEvent.mouseLeave(icon);
-
-    expect(icon).toHaveClass('app-icon--test-icon');
-  });
-
-  it('should not apply hover suffix when disabled', () => {
-    const { getByTestId } = render(
-      <DEPRECATED_Icon {...defaultProps} hoverSuffix="-hover" disabled />,
-    );
-    const icon = getByTestId('icon');
-
-    fireEvent.mouseEnter(icon);
-
-    expect(icon).not.toHaveClass('app-icon--test-icon-hover');
-    expect(icon).toHaveClass('app-icon--test-icon');
-  });
-
-  it('should handles click events when not disabled', () => {
-    const onClick = vi.fn();
-    const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} onClick={onClick} />);
-    const icon = getByTestId('icon');
-
-    fireEvent.click(icon);
-
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it('should not trigger click events when disabled', () => {
-    const onClick = vi.fn();
-    const { getByTestId } = render(
-      <DEPRECATED_Icon {...defaultProps} onClick={onClick} disabled />,
-    );
-    const icon = getByTestId('icon');
-
-    expect(icon.className).toMatch(/disabled/);
-  });
-
-  it('should apply title attribute when title prop is provided and not disabled', () => {
-    const title = 'Icon Title';
-    const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} title={title} />);
-    const icon = getByTestId('icon');
-
-    expect(icon).toHaveAttribute('title', title);
-  });
-
-  // There bug in the code, it should be fixed
-  it('should not apply title attribute when disabled', () => {
-    const title = 'Icon Title';
-    const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} title={title} disabled />);
-    const icon = getByTestId('icon');
-
-    expect(icon).toHaveAttribute('title');
-  });
-
-  it('should render SVG with correct class and href', () => {
-    const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} />);
-    const icon = getByTestId('icon');
-    const svg = icon.querySelector('svg');
-    const useElement = svg?.querySelector('use');
-
-    expect(svg).toBeInTheDocument();
-    expect(svg).toHaveClass('app-icon__svg');
-    expect(useElement).toHaveAttribute('xlink:href', '#test-icon');
-  });
-});

package/src/lib/DEPRECATED_Icon/DEPRECATED_Icon.tsx

@@ -1,91 +0,0 @@
-import React, { MouseEventHandler, useState } from 'react';
-import classNames from 'classnames';
-
-import styles from './DEPRECATED_Icon.module.scss';
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export type DEPRECATED_IconProps = {
-  className?: string;
-  disabled?: boolean;
-  hoverSuffix?: string;
-  name: string;
-  onClick?: MouseEventHandler<HTMLSpanElement>;
-  onMouseEnter?: MouseEventHandler<HTMLSpanElement>;
-  onMouseLeave?: MouseEventHandler<HTMLSpanElement>;
-  spin?: boolean;
-  title?: string;
-  dataTestId?: string;
-} & React.HTMLAttributes<HTMLSpanElement>;
-
-const noop = () => {};
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const DEPRECATED_Icon = (props: DEPRECATED_IconProps) => {
-  const [isHovered, setIsHovered] = useState(false);
-  const {
-    className = '',
-    disabled = false,
-    name,
-    hoverSuffix = '',
-    onClick = noop,
-    onMouseEnter = noop,
-    onMouseLeave = noop,
-    title = '',
-  } = props;
-  const handleMouseEnter = (evt: React.MouseEvent<HTMLSpanElement>) => {
-    if (!isHovered) setIsHovered(true);
-
-    onMouseEnter(evt);
-  };
-  const handleMouseLeave = (evt: React.MouseEvent<HTMLSpanElement>) => {
-    if (isHovered) setIsHovered(false);
-
-    onMouseLeave(evt);
-  };
-
-  const iconStyle = { top: 'auto' };
-  const iconName = !disabled && isHovered && hoverSuffix ? `${name}${hoverSuffix}` : name;
-  const iconClassName = classNames('app-icon', `app-icon--${iconName}`);
-  const svgClassName = classNames('app-icon__svg');
-  const iconClass = classNames(iconClassName, className, {
-    [styles.clickable]: onClick !== noop,
-    [styles.disabled]: disabled,
-  });
-
-  const { dataTestId, ...spanProps } = props;
-  const extraProps = { disabled, onClick, ...spanProps };
-
-  if (title && !disabled) {
-    extraProps.title = title;
-  }
-  delete extraProps.hoverSuffix;
-
-  return (
-    <span
-      {...extraProps}
-      className={iconClass}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      data-testid={dataTestId}
-    >
-      <svg className={svgClassName} style={iconStyle}>
-        <use xlinkHref={`#${iconName}`} />
-        <symbol id="general-arrow-down" viewBox="0 0 24 24">
-          <path
-            fill="currentColor"
-            d="M12 13.84l3.174-2.719a.5.5 0 0 1 .65.76l-3.5 2.998a.5.5 0 0 1-.65 0l-3.5-2.998a.5.5 0 1 1 .65-.76L12 13.841z"
-          ></path>
-        </symbol>
-        <symbol id="general-vi-small-white" viewBox="0 0 24 24">
-          <path
-            fill="currentColor"
-            d="M8.354 11.646l-.708.708 3.418 3.417 5.343-7.48-.814-.582-4.657 6.52z"
-          ></path>
-        </symbol>
-      </svg>
-    </span>
-  );
-};
-
-export default DEPRECATED_Icon;
-export { DEPRECATED_Icon }; // Named export

package/src/lib/DEPRECATED_Icon/index.ts

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

package/src/lib/DEPRECATED_Toggle/DEPRECATED_Toggle.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-
-export type ToggleProps = {
-  checked: boolean;
-  className?: string;
-  disabled?: boolean;
-  inline?: boolean;
-  onChange: (evt: React.ChangeEvent<HTMLInputElement>) => any;
-  text?: string;
-};
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const DEPRECATED_Toggle = ({
-  checked,
-  onChange,
-  className = '',
-  disabled = false,
-  inline = false,
-  text = '',
-}: ToggleProps) => {
-  const inputProps = {
-    checked,
-    disabled,
-    onChange,
-  };
-  const cssPrefix = 'custom-togglebtn';
-  const containerClass = classnames(
-    cssPrefix,
-    {
-      [`${cssPrefix}--inline`]: inline,
-    },
-    className,
-  );
-  const checkboxClass = `${cssPrefix}__icon`;
-
-  return (
-    <div className={containerClass}>
-      <label className={`${cssPrefix}__label`}>
-        <input type="checkbox" className={`${cssPrefix}__input`} {...inputProps} />
-        <span className={checkboxClass} />
-        {text && <span className={`${cssPrefix}__text`}>{text}</span>}
-      </label>
-    </div>
-  );
-};
-
-export default DEPRECATED_Toggle;
-export { DEPRECATED_Toggle };

package/src/lib/DEPRECATED_Toggle/index.ts

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

package/src/lib/DEPRECATED_Tooltip/DEPRECATED_Tooltip.module.scss

@@ -1,115 +0,0 @@
-@use 'sass:math';
-// @import '../style_styleguide_react/base';
-
-: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: red; //$fore;
-    font-size: 14px; //$sizeDefault;
-  }
-
-  .rc-tooltip-arrow {
-    border-width: 0 !important;
-    width: $arrow-size;
-    height: $arrow-size;
-    background-color: #000; //$back;
-    // @include boxShadow;
-    z-index: -1;
-    transform: rotate(45deg);
-  }
-
-  .rc-tooltip-content:before {
-    content: '';
-    position: absolute;
-    width: $arrow-size;
-    height: $arrow-size;
-    background-color: #000; //$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;
-}

package/src/lib/DEPRECATED_Tooltip/DEPRECATED_Tooltip.tsx

@@ -1,68 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import React from 'react';
-import classnames from 'classnames';
-import RcTooltip from 'rc-tooltip';
-import type { TooltipProps } from 'rc-tooltip/lib/Tooltip';
-
-import styles from './DEPRECATED_Tooltip.module.scss';
-import { styleguideConstants } from '../constants/styleguideConstants';
-
-export type DEPRECATED_TooltipProps = {
-  breakingLongWord?: boolean;
-  hideArrow?: boolean;
-  onClick?: (ev: MouseEvent) => void;
-  overlayClassName?: string;
-  zIndex?: number;
-  imgOverlay?: boolean;
-  semanticText?: boolean;
-} & TooltipProps;
-
-const DEPRECATED_Tooltip = (
-  props: React.PropsWithChildren<DEPRECATED_TooltipProps>,
-): JSX.Element => {
-  const {
-    breakingLongWord,
-    hideArrow = false,
-    overlayClassName,
-    overlay,
-    imgOverlay = false,
-    semanticText,
-    ...otherProps
-  } = props;
-
-  const overlayClasses = classnames(
-    overlayClassName,
-    'slf-default',
-    styleguideConstants.SISENSE_NAMESPACE,
-    {
-      'hide-arrow': hideArrow,
-      [styles.breakLongWord]: breakingLongWord,
-      [styles.semanticText]: semanticText,
-      [styles.semanticText]: semanticText,
-    },
-  );
-
-  const getOverlay = () => {
-    if (typeof overlay === 'string') {
-      if (imgOverlay) {
-        return <img src={overlay} />;
-      } else {
-        return <div dangerouslySetInnerHTML={{ __html: overlay }} />;
-      }
-    }
-
-    return overlay;
-  };
-
-  return (
-    <RcTooltip
-      destroyTooltipOnHide
-      overlay={getOverlay()}
-      {...otherProps}
-      overlayClassName={overlayClasses}
-    />
-  );
-};
-
-export default DEPRECATED_Tooltip;
-export { DEPRECATED_Tooltip };

package/src/lib/DEPRECATED_Tooltip/index.ts

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

package/src/lib/Dropdown/Dropdown.module.scss

@@ -1,9 +0,0 @@
-.menu {
-  margin: 0;
-  position: initial;
-  box-shadow: none;
-  li {
-    padding: 0 5px;
-    height: 28px;
-  }
-}

package/src/lib/Dropdown/Dropdown.tsx

@@ -1,150 +0,0 @@
-import React, { forwardRef } from 'react';
-import { ScrollbarProps } from 'react-custom-scrollbars';
-import classNames from 'classnames';
-// import { SLF } from '@sbi/styleguide';
-
-import { Popover } from '../Popover';
-import { Menu, itemTypes } from '../Menu';
-import { DropdownButton } from './DropdownButton';
-
-import { useDropdown } from './hooks';
-import { styleguideConstants } from '../constants/styleguideConstants';
-
-import type { DropdownItem, DropdownInputProps } from './types';
-import type { MenuItemConfig } from '../Menu';
-
-import style from './Dropdown.module.scss';
-
-const noop = () => {};
-
-export type DropdownProps = {
-  bubblePopoverMouseEvents?: boolean;
-  classNameButton?: string;
-  classNameDropdown?: string;
-  classNameSearch?: string;
-  classNameMenu?: string;
-  classNameTooltip?: string;
-  disabled?: boolean;
-  items: DropdownItem[];
-  mask?: boolean;
-  onSelectItem?: (item: MenuItemConfig) => void;
-  popoverOverlayLevel?: number;
-  selectedItemId?: string;
-  selectedShowIcon?: boolean;
-  width?: number;
-  inlineVariant?: boolean;
-  scrollbarProps?: ScrollbarProps;
-  placeholder?: string;
-  placement?: string;
-  zIndex?: number;
-  searchInputProps?: DropdownInputProps;
-  open?: boolean;
-  isLoading?: boolean;
-};
-
-const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
-  (
-    {
-      bubblePopoverMouseEvents = false,
-      items = [],
-      onSelectItem = noop,
-      popoverOverlayLevel = 0,
-      selectedShowIcon = true,
-      mask = true,
-      placeholder = '',
-      placement = 'bottomLeft',
-      disabled = false,
-      selectedItemId,
-      width,
-      scrollbarProps,
-      classNameMenu,
-      inlineVariant,
-      classNameDropdown,
-      classNameButton,
-      classNameSearch,
-      classNameTooltip,
-      zIndex,
-      searchInputProps,
-      open = false,
-      isLoading = false,
-    },
-    ref,
-  ) => {
-    const popoverVerticalOffset = inlineVariant ? 12 : 0;
-    const menuItems = items.map((item) => ({
-      id: item.id,
-      caption: item.caption || item.id,
-      type: itemTypes.ITEM,
-      iconName: item.iconName,
-      iconClass: item.iconClass,
-      selected: item.id === selectedItemId,
-      tooltip: item.tooltip,
-      disabled: item.disabled,
-    }));
-
-    const {
-      isOpen,
-      handlers: { handleOnSelectItem, handleDropdownClick },
-    } = useDropdown(onSelectItem, open, disabled);
-
-    const renderDropdown = () => {
-      const menuClassNames = classNames(
-        style.menu,
-        // SLF.BACK,
-        // SLF.TEXT_PRIMARY,
-        styleguideConstants.SISENSE_NAMESPACE,
-        classNameMenu,
-      );
-
-      return (
-        <Menu
-          items={menuItems}
-          onItemSelected={handleOnSelectItem}
-          className={menuClassNames}
-          width={width}
-          scrollbarProps={scrollbarProps}
-          isLoading={isLoading}
-          classNameTooltip={classNameTooltip}
-        />
-      );
-    };
-
-    return (
-      <div ref={ref} data-testid="popover_container">
-        <Popover
-          zIndex={zIndex}
-          bubbleMouseEvents={bubblePopoverMouseEvents}
-          trigger={['click']}
-          visible={isOpen}
-          placement={placement}
-          overlay={renderDropdown}
-          level={popoverOverlayLevel}
-          onVisibleChange={handleDropdownClick}
-          onRequestClose={handleDropdownClick}
-          align={{ offset: [0, popoverVerticalOffset] }}
-          mask={mask}
-        >
-          <div>
-            <DropdownButton
-              isOpen={isOpen}
-              items={items}
-              selectedShowIcon={selectedShowIcon}
-              placeholder={placeholder}
-              width={width}
-              disabled={disabled}
-              classNameButton={classNameButton}
-              classNameDropdown={classNameDropdown}
-              classNameSearch={classNameSearch}
-              inlineVariant={inlineVariant}
-              searchInputProps={searchInputProps}
-              selectedItemId={selectedItemId}
-            />
-          </div>
-        </Popover>
-      </div>
-    );
-  },
-);
-
-export default Dropdown;
-export { Dropdown };

package/src/lib/Dropdown/DropdownButton/DropdownButton.module.scss

@@ -1,49 +0,0 @@
-@import '../../styles/style_styleguide_react/mixins';
-@import '../../styles/colors.module';
-
-.dropdownButton {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  background: $ATHENS_GRAY;
-  border-radius: 4px;
-  height: 28px;
-  min-width: 192px;
-
-  &.inlineVariant {
-    background: none;
-    height: 18px;
-    border: none;
-    text-indent: 0;
-    min-width: initial;
-    &.open {
-      border: none;
-    }
-  }
-
-  &.open {
-    border: 1px solid $COLOR-TEXT;
-  }
-
-  &.disabled {
-    @include disabled;
-    pointer-events: none;
-  }
-
-  .selectedIcon {
-    flex-shrink: 0;
-  }
-
-  .chosenTitle {
-    margin-left: 12px;
-    flex-grow: 1;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .clickIcon {
-    flex-shrink: 0;
-    margin-right: 2px;
-  }
-}