@sisense/sdk-shared-ui 1.27.1 → 1.28.0

package/src/lib/Input/Input.test.tsx

@@ -1,177 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
-import { vi } from 'vitest';
-
-import { Input } from './Input';
-import styles from './Input.module.scss';
-
-import '@testing-library/jest-dom';
-
-describe('Input Component', () => {
-  it('should render correctly with basic props', () => {
-    render(<Input onChange={vi.fn()} placeholder={'Enter text'} />);
-
-    const input = screen.getByPlaceholderText('Enter text');
-
-    expect(input).toBeInTheDocument();
-  });
-
-  it('should handle onChange and updates input value', () => {
-    const onChange = vi.fn();
-    render(<Input onChange={onChange} placeholder={'Enter text'} />);
-
-    const input = screen.getByPlaceholderText('Enter text');
-    fireEvent.change(input, { target: { value: 'test' } });
-
-    expect(onChange).toHaveBeenCalledWith('test');
-    expect(input).toHaveValue('test');
-  });
-
-  it('should clear input when clearable and clear icon is clicked', () => {
-    const onChange = vi.fn();
-    const { container } = render(
-      <Input onChange={onChange} placeholder={'Enter text'} clearable={true} value={'clear me'} />,
-    );
-
-    const clearIcon = container.querySelector('.app-icon.app-icon--general-x');
-    fireEvent.click(clearIcon as Element);
-
-    expect(onChange).toHaveBeenCalledWith('');
-  });
-
-  it('should render input in password mode', () => {
-    render(
-      <Input
-        onChange={vi.fn()}
-        placeholder={'Enter text'}
-        clearable={true}
-        value={'clear me'}
-        password={true}
-      />,
-    );
-
-    const input = screen.getByPlaceholderText('Enter text');
-
-    expect(input).toHaveAttribute('type', 'password');
-  });
-
-  it('should toggle password visibility', () => {
-    const { container } = render(
-      <Input
-        onChange={vi.fn()}
-        placeholder={'Enter text'}
-        clearable={true}
-        value={'clear me'}
-        password={true}
-      />,
-    );
-
-    const input = screen.getByPlaceholderText('Enter text');
-    const toggleIcon = container.querySelector('.app-icon.app-icon--general-show');
-    fireEvent.click(toggleIcon as Element);
-
-    expect(input).toHaveAttribute('type', 'text');
-  });
-
-  it('should render search icon when `search` is true', () => {
-    const { container } = render(
-      <Input onChange={vi.fn()} placeholder={'Enter text'} search={true} />,
-    );
-    const searchIcon = container.querySelector('.app-icon.app-icon--general-search-small');
-
-    expect(searchIcon).toBeInTheDocument();
-  });
-
-  it('should render custom icon when `icon` prop is passed', () => {
-    const { container } = render(
-      <Input
-        onChange={vi.fn()}
-        placeholder={'Enter text'}
-        search={true}
-        icon={{ placement: 'left', name: 'custom-icon' }}
-      />,
-    );
-
-    const customIcon = container.querySelector('.app-icon.app-icon--custom-icon');
-
-    expect(customIcon).toBeInTheDocument();
-  });
-
-  it('should apply className  correctly', () => {
-    const { container } = render(
-      <Input onChange={vi.fn()} placeholder={'Enter text'} className={'custom-class'} />,
-    );
-
-    const wrapper = container.querySelector('.custom-class');
-
-    expect(wrapper).toHaveClass('custom-class');
-  });
-
-  it('should apply inputClassName correctly', () => {
-    render(
-      <Input onChange={vi.fn()} placeholder={'Enter text'} inputClassName={'custom-input-class'} />,
-    );
-
-    const input = screen.getByPlaceholderText('Enter text');
-
-    expect(input).toHaveClass('custom-input-class');
-  });
-
-  it('should handle disabled state correctly', () => {
-    render(<Input onChange={vi.fn()} placeholder={'Enter text'} disabled={true} />);
-    const input = screen.getByPlaceholderText('Enter text');
-
-    expect(input).toBeDisabled();
-  });
-
-  it('should trim input when trimInput is true', () => {
-    const onChange = vi.fn();
-    render(<Input onChange={onChange} placeholder={'Enter text'} trimInput={true} />);
-    const input = screen.getByPlaceholderText('Enter text');
-    fireEvent.change(input, { target: { value: '  trimmed text  ' } });
-
-    expect(onChange).toHaveBeenCalledWith('trimmed text');
-  });
-
-  it('should prevent default behavior on mouse down for the clear icon', () => {
-    const { container } = render(<Input clearable value="test" onChange={vi.fn()} />);
-    const clearIcon = container.querySelector('.app-icon.app-icon--general-x');
-    const mouseDownEvent = new MouseEvent('mousedown', {
-      bubbles: true,
-      cancelable: true,
-    });
-    const preventDefaultSpy = vi.spyOn(mouseDownEvent, 'preventDefault');
-
-    clearIcon?.dispatchEvent(mouseDownEvent);
-
-    expect(preventDefaultSpy).toHaveBeenCalled();
-  });
-
-  it('should prevent default behavior on mouse down for the password visibility icon', () => {
-    const { container } = render(<Input password value="test" onChange={vi.fn()} />);
-    const passwordIcon = container.querySelector('.app-icon.app-icon--general-show');
-    const mouseDownEvent = new MouseEvent('mousedown', {
-      bubbles: true,
-      cancelable: true,
-    });
-    const preventDefaultSpy = vi.spyOn(mouseDownEvent, 'preventDefault');
-
-    (passwordIcon as Element).dispatchEvent(mouseDownEvent);
-
-    expect(preventDefaultSpy).toHaveBeenCalled();
-  });
-
-  it('should apply "withLeftIcon" class when icon is present and placement is left', () => {
-    render(
-      <Input
-        placeholder={'Enter text'}
-        icon={{ name: 'test-icon', placement: 'left' }}
-        onChange={vi.fn()}
-      />,
-    );
-
-    const input = screen.getByPlaceholderText('Enter text');
-
-    expect(input).toHaveClass(styles.withLeftIcon);
-  });
-});

package/src/lib/Input/Input.tsx

@@ -1,134 +0,0 @@
-import React, { useState, useRef, useEffect, MouseEventHandler } from 'react';
-import classnames from 'classnames';
-
-import { DEPRECATED_Icon } from '../DEPRECATED_Icon';
-
-import styles from './Input.module.scss';
-
-export interface InputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'small' | 'onChange'> {
-  className?: string;
-  inputClassName?: string;
-  onChange: (value: string) => void;
-  onClicked?: MouseEventHandler;
-  onBlur?: () => void;
-  placeholder?: string;
-  search?: boolean;
-  dataTestId?: string;
-  defaultValue?: string;
-  value?: string;
-  autoFocus?: boolean;
-  clearable?: boolean;
-  password?: boolean;
-  disabled?: boolean;
-  size?: 'small' | 'large';
-  icon?: { name: string; placement?: 'right' | 'left' };
-  trimInput?: boolean;
-  ariaLabel?: React.AriaAttributes['aria-label'];
-}
-
-const Input = (props: InputProps): JSX.Element => {
-  const {
-    className,
-    inputClassName,
-    onChange,
-    onClicked,
-    onBlur = () => {},
-    placeholder,
-    search,
-    dataTestId,
-    defaultValue,
-    value,
-    autoFocus,
-    clearable,
-    password,
-    disabled = false,
-    size,
-    icon,
-    trimInput,
-    ariaLabel = 'input',
-  } = props;
-
-  const [inputValue, setInputValue] = useState(defaultValue || value || '');
-  const [passwordIsVisible, setPasswordIsVisible] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const { name: iconName = '', placement: iconPlacement } = icon || {};
-
-  useEffect(() => {
-    setInputValue(value || '');
-  }, [value]);
-
-  return (
-    <div className={classnames(styles.component, className)}>
-      {search && (
-        <DEPRECATED_Icon
-          className={classnames(styles.searchIcon, {
-            [styles.large]: size === 'large',
-          })}
-          name="general-search-small"
-        />
-      )}
-      <input
-        className={classnames(styles.input, inputClassName, {
-          [styles.withLeftIcon]: search || (icon && iconPlacement === 'left'),
-          [styles.large]: size === 'large',
-        })}
-        placeholder={placeholder}
-        disabled={disabled}
-        onChange={(e) => {
-          const value = trimInput ? e.target.value.trim() : e.target.value;
-          onChange(value);
-          setInputValue(e.target.value);
-        }}
-        onClick={onClicked}
-        onBlur={onBlur}
-        data-testid={dataTestId}
-        defaultValue={defaultValue}
-        value={value ?? inputValue}
-        autoFocus={autoFocus}
-        type={password && !passwordIsVisible ? 'password' : 'text'}
-        ref={inputRef}
-        aria-label={ariaLabel}
-      />
-      {clearable && !password && !icon && (
-        <DEPRECATED_Icon
-          className={classnames(styles.clearIcon, {
-            [styles.clearIconHidden]: inputValue === '',
-            [styles.large]: size === 'large',
-          })}
-          name="general-x"
-          onClick={() => {
-            setInputValue('');
-            onChange('');
-          }}
-          onMouseDown={(e) => e.preventDefault()}
-        />
-      )}
-      {password && (
-        <DEPRECATED_Icon
-          className={classnames(styles.passwordVisibilityIcon, {
-            [styles.large]: size === 'large',
-          })}
-          name={passwordIsVisible ? 'general-unhide' : 'general-show'}
-          onClick={() => {
-            setPasswordIsVisible(!passwordIsVisible);
-          }}
-          onMouseDown={(e) => e.preventDefault()}
-        />
-      )}
-      {icon && !clearable && !password && (
-        <DEPRECATED_Icon
-          className={classnames(styles.customIcon, {
-            [styles.large]: size === 'large',
-            [styles.isLeft]: iconPlacement === 'left',
-          })}
-          name={iconName}
-        />
-      )}
-    </div>
-  );
-};
-
-export default Input;
-export { Input };

package/src/lib/Input/index.ts

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

package/src/lib/LazyLoader/LazyLoader.module.scss

@@ -1,18 +0,0 @@
-// @import '~@sbi/styleguide/src/sass/components/_loader-two-dots.scss';
-
-.loader {
-  display: flex;
-  align-content: center;
-  justify-content: center;
-  align-items: center;
-
-  .caption {
-    margin-top: 50%;
-    word-break: break-word;
-    text-align: center;
-
-    span {
-      position: unset;
-    }
-  }
-}

package/src/lib/LazyLoader/LazyLoader.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-import style from './LazyLoader.module.scss';
-
-export type LazyLoaderProps = {
-  className?: string;
-  caption?: string;
-  isLoading?: boolean;
-};
-
-const LazyLoader = (props: LazyLoaderProps): JSX.Element => {
-  const { className = '', caption = '', isLoading = false } = props;
-
-  const hostClasses = classNames(
-    style['loader-two-dots'],
-    {
-      [style['loader-two-dots--inactive']]: !isLoading,
-    },
-    className,
-  );
-
-  const loaderIndicatorClass = classNames(style.loader, style['loader-two-dots-indicator']);
-  const captionClass = classNames(style.caption);
-
-  return (
-    <div className={hostClasses}>
-      {isLoading && (
-        <div data-testid="loader-component" className={loaderIndicatorClass}>
-          {caption && (
-            <div className={captionClass}>
-              <span>{caption}</span>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default LazyLoader;
-export { LazyLoader };

package/src/lib/LazyLoader/index.ts

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

package/src/lib/Menu/Confirmation/Confirmation.module.scss

@@ -1,48 +0,0 @@
-$positiveSign: green;
-$negativeSign: red;
-
-$buttonYes: $positiveSign;
-$buttonNo: $negativeSign;
-
-.container {
-  min-width: 245px;
-  max-width: 350px;
-  padding: 12px 18px;
-  font-size: 13px;
-  user-select: none;
-}
-
-.message {
-  margin-top: 10px;
-  overflow: hidden;
-  white-space: pre-line;
-  text-overflow: ellipsis;
-}
-
-.buttons {
-  margin-top: 19px;
-  width: 100%;
-  text-align: right;
-}
-
-.button {
-  height: 25px;
-  width: auto;
-  background: transparent;
-  outline: none;
-  cursor: pointer;
-  border: none;
-
-  &:hover {
-    opacity: 0.7;
-  }
-}
-
-.confirm {
-  color: $buttonYes;
-  margin-right: 20px;
-}
-
-.cancel {
-  color: $buttonNo;
-}

package/src/lib/Menu/Confirmation/Confirmation.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import ClassNames from 'classnames';
-// todo: add translations support
-// import { FormattedMessage } from 'react-intl';
-
-import { styleguideConstants } from '../../constants/styleguideConstants';
-
-import styles from './Confirmation.module.scss';
-// import messages from './translation';
-
-export const Confirmation = ({
-  message,
-  title,
-  onCancel,
-  onConfirm,
-}: {
-  message: string;
-  title: string;
-  onCancel: () => void;
-  onConfirm: () => void;
-}) => {
-  const confirmClasses = ClassNames(styles.button, styles.confirm);
-  const cancelClasses = ClassNames(styles.button, styles.cancel);
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.title}>{title}</div>
-      <div className={ClassNames(styles.message, styleguideConstants.TEXT_SECONDARY)}>
-        {message}
-      </div>
-      <div className={styles.buttons}>
-        <button className={confirmClasses} onClick={onConfirm}>
-          {/* eslint-disable-next-line i18next/no-literal-string */}
-          {/*<FormattedMessage {...messages.yes} />*/}
-          Yes
-        </button>
-        <button className={cancelClasses} onClick={onCancel}>
-          {/* eslint-disable-next-line i18next/no-literal-string */}
-          {/* <FormattedMessage {...messages.no} /> */}
-          No
-        </button>
-      </div>
-    </div>
-  );
-};

package/src/lib/Menu/Confirmation/translation.ts

@@ -1,17 +0,0 @@
-// import { defineMessages } from 'react-intl';
-
-// export default defineMessages({
-//     yes: {
-//         id: 'app.confirmation.yes',
-//         defaultMessage: 'Yes',
-//     },
-//     no: {
-//         id: 'app.confirmation.no',
-//         defaultMessage: 'No',
-//     },
-//     areYouSure: {
-//         id: 'app.confirmation.inline.areYouSure',
-//         defaultMessage: 'Are You Sure?',
-//     },
-// });
-export {};

package/src/lib/Menu/Menu.module.scss

@@ -1,178 +0,0 @@
-@use 'sass:math';
-@import '../styles/sisenseStyleguideReactColors.scss';
-
-$line-height: 18px;
-$item-space: 12px;
-$icon-size: 22px;
-$vertical-diff: math.div($icon-size - $line-height, 2);
-$item-vertical-padding: (math.div($item-space, 2) - $vertical-diff);
-$disabledMenuItemColor: $stepCaption;
-
-.container {
-  min-width: 128px;
-  position: absolute;
-  cursor: pointer;
-  padding: 0px;
-  background: $back;
-  box-shadow: 0px 0px 5px rgba(58, 67, 86, 0.2);
-  border-radius: 4px;
-
-  li {
-    list-style-type: none;
-    line-height: $icon-size;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    padding: $item-vertical-padding 5px;
-    position: relative;
-    transition: background-color 0.3s eaSe;
-    cursor: pointer;
-
-    &.disabled {
-      opacity: 0.5;
-      cursor: default;
-    }
-
-    &.groupHeader {
-      pointer-events: none;
-      font-style: italic;
-      font-weight: 600;
-    }
-
-    &.isDrill {
-      &:hover,
-      &:global(.fakeHover) {
-        background-color: $highlightListItem;
-      }
-    }
-
-    &:hover:not(.disabled) {
-      background-color: $highlightListItem;
-
-      &:after {
-        opacity: 1;
-      }
-    }
-
-    &.separator {
-      border-top: 1px solid #e1e1e1;
-    }
-
-    &.noIcon {
-      padding-left: 16px;
-      padding-right: 16px;
-    }
-
-    &.item.checked {
-      &:after {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 2px;
-        background-color: $foreHover;
-      }
-    }
-
-    &.radio {
-      padding-left: 8px;
-      padding-right: 0;
-      line-height: $icon-size;
-      align-items: stretch;
-    }
-
-    &.checkbox {
-      padding-left: 0;
-      padding-right: 0;
-      line-height: $icon-size;
-      align-items: stretch;
-    }
-
-    .icon {
-      margin: 0 10px 0 7px;
-    }
-
-    .itemType {
-      display: flex;
-      width: 100%;
-      margin-right: 1px;
-      white-space: nowrap;
-      // Space icon to end of line
-      :last-child {
-        margin-left: auto;
-      }
-    }
-
-    .nestedType {
-      display: flex;
-      width: 100%;
-
-      .nestedIcon {
-        position: static !important;
-      }
-    }
-
-    .menuItemText {
-      flex-grow: 1;
-      display: flex;
-      align-items: center;
-    }
-  }
-}
-
-.separateGroup {
-  min-width: fit-content;
-}
-
-.itemCheckBox {
-  padding: 0 5px 0 16px;
-  width: 100%;
-}
-
-.itemRadioButton {
-  padding: 0 5px 0 8px;
-  width: 100%;
-}
-
-.scrollbar {
-  cursor: default;
-  > div:first-child {
-    position: relative !important;
-  }
-}
-
-.itemContainer {
-  display: flex;
-  flex-grow: 1;
-}
-
-.inlineConfirmation {
-  font-weight: 600;
-}
-
-.menuItemTooltip {
-  max-width: 180px;
-  overflow-wrap: break-word;
-
-  &:global(.rc-tooltip-placement-left) {
-    max-width: 195px;
-    padding-right: 15px;
-  }
-}
-
-.toggleButtonMenu {
-  pointer-events: none;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  right: 10px;
-}
-
-.loader {
-  height: 25px;
-  position: relative;
-  margin: 0 auto;
-  width: 90%;
-}