@sisense/sdk-shared-ui 1.27.1 → 1.28.0

package/src/lib/Dropdown/DropdownButton/DropdownButton.tsx

@@ -1,81 +0,0 @@
-import React, { FC, useRef } from 'react';
-import classNames from 'classnames';
-
-import { DropdownButtonSearch } from './DropdownButtonSearch';
-import { DropdownButtonBody } from './DropdownButtonBody';
-import { useDropdownButtonSearch } from './hooks';
-
-import type { DropdownItem, DropdownInputProps } from '../types';
-
-import style from './DropdownButton.module.scss';
-
-export type DropdownButtonProps = {
-  items?: DropdownItem[];
-  selectedShowIcon?: boolean;
-  placeholder?: string;
-  disabled?: boolean;
-  selectedItemId?: string;
-  width?: number;
-  inlineVariant?: boolean;
-  classNameDropdown?: string;
-  classNameButton?: string;
-  classNameSearch?: string;
-  searchInputProps?: DropdownInputProps;
-  isOpen?: boolean;
-};
-
-export const DropdownButton: FC<DropdownButtonProps> = ({
-  items = [],
-  selectedShowIcon = true,
-  placeholder = '',
-  disabled,
-  selectedItemId,
-  width,
-  inlineVariant,
-  classNameDropdown,
-  classNameButton,
-  classNameSearch,
-  searchInputProps,
-  isOpen = false,
-}) => {
-  const selectedItem = items.find((item) => item.id === selectedItemId);
-  const ref = useRef(null);
-
-  const {
-    inputProps,
-    handlers: { handleOnSearchInputClick, handleOnSearchInputChange },
-  } = useDropdownButtonSearch(isOpen, selectedItem, searchInputProps, ref);
-
-  const dropDownButtonClasses = classNames(
-    classNameButton,
-    style.dropdownButton,
-    {
-      [style.disabled]: disabled,
-      [style.open]: isOpen,
-      [style.inlineVariant]: inlineVariant,
-    },
-    classNameDropdown,
-  );
-
-  return (
-    <>
-      {searchInputProps && isOpen && !disabled ? (
-        <DropdownButtonSearch
-          ref={ref}
-          width={width}
-          onClick={handleOnSearchInputClick}
-          inputProps={{ ...inputProps, onChange: handleOnSearchInputChange }}
-          className={classNameSearch}
-        />
-      ) : (
-        <DropdownButtonBody
-          selectedItem={selectedItem}
-          width={width}
-          placeholder={placeholder}
-          selectedShowIcon={selectedShowIcon}
-          dropDownButtonClasses={dropDownButtonClasses}
-        />
-      )}
-    </>
-  );
-};

package/src/lib/Dropdown/DropdownButton/DropdownButtonBody/DropdownButtonBody.test.tsx

@@ -1,121 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-
-import { DropdownButtonBody } from './DropdownButtonBody';
-
-import '@testing-library/jest-dom';
-
-describe('DropdownButtonBody', () => {
-  it('should render with selected item and icon', () => {
-    const selectedItem = {
-      caption: 'Selected Item',
-      iconName: 'check-icon',
-      id: 'selected-item-id',
-    };
-
-    const { container } = render(
-      <DropdownButtonBody
-        selectedItem={selectedItem}
-        selectedShowIcon={true}
-        placeholder="Placeholder"
-      />,
-    );
-
-    expect(screen.getByText('Selected Item')).toBeInTheDocument();
-    expect(screen.queryByText('Placeholder')).toBeNull();
-    const icon = container.querySelector(`.app-icon.app-icon`);
-    expect(icon).toBeInTheDocument();
-  });
-
-  it('should render with placeholder when no selected item', () => {
-    render(
-      <DropdownButtonBody
-        selectedItem={undefined}
-        selectedShowIcon={false}
-        placeholder="No item selected"
-      />,
-    );
-
-    expect(screen.getByText('No item selected')).toBeInTheDocument();
-    expect(screen.queryByText('general-arrow-down')).toBeNull();
-  });
-
-  it('should render the default icon', () => {
-    const selectedItem = {
-      caption: 'Selected Item',
-      iconName: 'check-icon',
-      id: 'selected-item-id',
-    };
-
-    const { container } = render(
-      <DropdownButtonBody selectedItem={selectedItem} selectedShowIcon={true} />,
-    );
-
-    const icon = container.querySelector(`.app-icon.app-icon--general-arrow-down`);
-    expect(icon).toBeInTheDocument();
-  });
-
-  it('should render conditionally the custom icon when selectedShowIcon is true', () => {
-    const selectedItem = {
-      caption: 'Selected Item',
-      iconName: 'check-icon',
-      id: 'selected-item-id',
-    };
-
-    const { container } = render(
-      <DropdownButtonBody selectedItem={selectedItem} selectedShowIcon={true} />,
-    );
-
-    const customIcon = container.querySelector(`.app-icon.app-icon--check-icon`);
-    expect(customIcon).toBeInTheDocument();
-  });
-
-  it('should not render the custom icon when selectedShowIcon is false', () => {
-    const selectedItem = {
-      caption: 'Selected Item',
-      iconName: 'check-icon',
-      id: 'selected-item-id',
-    };
-
-    const { container } = render(
-      <DropdownButtonBody selectedItem={selectedItem} selectedShowIcon={false} />,
-    );
-
-    const customIcon = container.querySelector(`.app-icon.app-icon--check-icon`);
-    expect(customIcon).toBeNull();
-  });
-
-  it('should apply custom dropDownButtonClasses when provided', () => {
-    const selectedItem = {
-      caption: 'Selected Item',
-      iconName: 'check-icon',
-      id: 'selected-item-id',
-    };
-    const { container } = render(
-      <DropdownButtonBody selectedItem={selectedItem} dropDownButtonClasses={'custom-class'} />,
-    );
-
-    const containerDiv = container.querySelector('.custom-class');
-
-    expect(containerDiv).toBeInTheDocument();
-  });
-
-  it('should apply the width style when provided', () => {
-    const selectedItem = {
-      caption: 'Selected Item',
-      iconName: 'check-icon',
-      id: 'selected-item-id',
-    };
-
-    const { container } = render(
-      <DropdownButtonBody
-        dropDownButtonClasses={'custom-class'}
-        selectedItem={selectedItem}
-        width={200}
-      />,
-    );
-    const containerDiv = container.querySelector('.custom-class');
-
-    expect(containerDiv).toHaveStyle('width: 200px');
-  });
-});

package/src/lib/Dropdown/DropdownButton/DropdownButtonBody/DropdownButtonBody.tsx

@@ -1,39 +0,0 @@
-import React, { FC } from 'react';
-
-import { DEPRECATED_Icon } from '../../../DEPRECATED_Icon';
-
-import type { DropdownItem } from '../../types';
-
-import style from '../DropdownButton.module.scss';
-
-export type DropdownButtonBodyProps = {
-  selectedItem?: DropdownItem;
-  width?: number;
-  dropDownButtonClasses?: string;
-  resolvedCaptionClassName?: string;
-  selectedShowIcon?: boolean;
-  placeholder?: string;
-};
-
-export const DropdownButtonBody: FC<DropdownButtonBodyProps> = ({
-  selectedItem,
-  width,
-  dropDownButtonClasses,
-  selectedShowIcon = true,
-  placeholder = '',
-}) => {
-  const { caption, iconName } = selectedItem || {};
-  const styles = width ? { width, minWidth: 'inherit' } : {};
-
-  return (
-    <div className={dropDownButtonClasses} title={caption} style={styles}>
-      {selectedShowIcon && iconName && (
-        <DEPRECATED_Icon className={style.selectedIcon} name={iconName} />
-      )}
-      <div className={style.chosenTitle}>{caption || placeholder}</div>
-      <div className={style.clickIcon}>
-        <DEPRECATED_Icon name={'general-arrow-down'} />
-      </div>
-    </div>
-  );
-};

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

@@ -1,20 +0,0 @@
-@import '../../../styles/colors.module';
-
-.searchInputWrapper {
-  div {
-    background: $ATHENS_GRAY;
-    border-radius: 4px;
-    border: 1px solid $COLOR-TEXT;
-    span {
-      margin-left: -6px;
-      z-index: 1071 !important;
-    }
-    input {
-      position: relative;
-      z-index: 1070;
-      background: transparent;
-      text-indent: 0;
-      border: none !important;
-    }
-  }
-}

package/src/lib/Dropdown/DropdownButton/DropdownButtonSearch/DropdownButtonSearch.tsx

@@ -1,44 +0,0 @@
-import React, { forwardRef, MouseEventHandler } from 'react';
-import classNames from 'classnames';
-
-import { Input } from '../../../Input';
-
-import type { DropdownInputProps } from '../../types';
-import { DEFAULT_SEARCH_WIDTH } from './constants';
-
-import style from './DropdownButtonSearch.module.scss';
-
-const noop = () => {};
-
-export type DropdownButtonSearchProps = {
-  width?: number;
-  onClick?: MouseEventHandler;
-  className?: string;
-  inputProps?: DropdownInputProps;
-};
-
-export const DropdownButtonSearch = forwardRef<HTMLDivElement, DropdownButtonSearchProps>(
-  (
-    {
-      width = DEFAULT_SEARCH_WIDTH,
-      onClick = noop,
-      inputProps = { onChange: noop },
-      className = '',
-    },
-    ref,
-  ) => {
-    const dropdownSearchClass = classNames(className || style.searchInputWrapper);
-    const styles = { width };
-
-    return (
-      <div
-        ref={ref}
-        style={styles}
-        className={dropdownSearchClass}
-        data-testid="search_input_container"
-      >
-        <Input onClicked={onClick} {...inputProps} />
-      </div>
-    );
-  },
-);

package/src/lib/Dropdown/DropdownButton/DropdownButtonSearch/constants.ts

@@ -1 +0,0 @@
-export const DEFAULT_SEARCH_WIDTH = 136;

package/src/lib/Dropdown/DropdownButton/hooks/useDropdownButtonSearch.ts

@@ -1,51 +0,0 @@
-import { RefObject, SyntheticEvent, useEffect, useState, useCallback } from 'react';
-
-import type { DropdownInputProps, DropdownItem } from '../../types';
-
-export const useDropdownButtonSearch = (
-  isOpen: boolean,
-  selectedItem?: DropdownItem,
-  searchInputProps?: DropdownInputProps,
-  ref?: RefObject<HTMLDivElement>,
-) => {
-  const [inputProps, setInputProps] = useState({
-    ...searchInputProps,
-    value: selectedItem?.caption,
-  });
-
-  const handleOnSearchInputClick = (event: SyntheticEvent): void => {
-    event.stopPropagation();
-  };
-
-  const handleOnSearchInputChange = (value: string): void => {
-    searchInputProps?.onChange(value);
-    setInputProps({ ...searchInputProps, value });
-  };
-
-  const selectInputValue = useCallback((): void => {
-    const inputElement = ref?.current?.getElementsByTagName('input')[0];
-    inputElement?.select();
-  }, [ref]);
-
-  useEffect(() => {
-    if (isOpen) {
-      setInputProps({ ...searchInputProps, value: selectedItem?.caption });
-      selectInputValue();
-    } else {
-      searchInputProps?.onChange('');
-    }
-  }, [isOpen, searchInputProps, selectedItem?.caption, selectInputValue]);
-
-  useEffect(() => {
-    if (isOpen && inputProps.value !== searchInputProps?.value) {
-      selectInputValue();
-    }
-  }, [inputProps.value, isOpen, searchInputProps?.value, selectInputValue]);
-
-  const handlers = {
-    handleOnSearchInputClick,
-    handleOnSearchInputChange,
-  };
-
-  return { handlers, inputProps };
-};

package/src/lib/Dropdown/hooks/useDropdown.ts

@@ -1,29 +0,0 @@
-import { useState } from 'react';
-
-import type { MenuItemConfig } from '../../Menu';
-
-export const useDropdown = (
-  onSelectItem: (item: MenuItemConfig) => void,
-  open: boolean,
-  disabled: boolean,
-) => {
-  const [isOpen, setIsOpen] = useState(open);
-
-  const handleDropdownClick = () => {
-    if (!disabled) {
-      setIsOpen(!isOpen);
-    }
-  };
-
-  const handleOnSelectItem = (item: MenuItemConfig) => {
-    onSelectItem(item);
-    handleDropdownClick();
-  };
-
-  const handlers = {
-    handleOnSelectItem,
-    handleDropdownClick,
-  };
-
-  return { handlers, isOpen };
-};

package/src/lib/Dropdown/index.ts

@@ -1,5 +0,0 @@
-import Dropdown from './Dropdown';
-
-export default Dropdown;
-export * from './Dropdown';
-export * from './types';

package/src/lib/Dropdown/types.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import { Input } from '../Input';
-
-export type DropdownInputProps = Pick<
-  React.ComponentProps<typeof Input>,
-  'onChange' | 'value' | 'search' | 'onClicked'
->;
-
-export type DropdownItem = {
-  id: string;
-  caption: string;
-  iconName?: string;
-  iconClass?: string;
-  tooltip?: string | React.ReactFragment;
-  disabled?: boolean;
-};

package/src/lib/Icon/Icon.tsx

@@ -1,118 +0,0 @@
-import React, { type ForwardedRef, forwardRef } from 'react';
-import { IconProps as MuiIconProps } from '@mui/material';
-import ThemeProvider from '@mui/material/styles/ThemeProvider';
-import SvgIcon from '@mui/material/SvgIcon';
-import classNames from 'classnames';
-
-import { iconTheme } from './themes';
-
-export type IconProps = {
-  className?: string;
-  name: string;
-  title?: string;
-  dataTestId?: string;
-  disabled?: boolean;
-} & MuiIconProps &
-  React.HTMLAttributes<HTMLSpanElement>;
-
-const SisenseSvgIcon = (props: IconProps) => {
-  const { name, sx } = props;
-  const svgClassName = classNames('app-icon__svg');
-  return (
-    <SvgIcon classes={{ root: svgClassName }} sx={sx} inheritViewBox={true}>
-      <use xlinkHref={`#${name}`} />
-      <symbol id="general-arrow-big-down" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M7.589 10L7 10.777 11.99 15 17 10.777 16.413 10l-4.422 3.727z"
-        ></path>
-      </symbol>
-      <symbol id="general-arrow-left" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M13.878 9.325a.5.5 0 1 0-.76-.65l-2.998 3.5a.5.5 0 0 0 0 .65l2.999 3.5a.5.5 0 1 0 .76-.65l-2.72-3.175 2.72-3.175z"
-        ></path>
-      </symbol>
-
-      <symbol id="general-arrow-long-right" viewBox="0 0 29 8">
-        <path
-          d="M28.354 4.354a.5.5 0 0 0 0-.708L25.172.464a.5.5 0 1 0-.707.708L27.293 4l-2.828 2.828a.5.5 0 1 0 .707.708l3.182-3.182zM0 4.5h28v-1H0v1z"
-          fill="#3A4356"
-        ></path>
-      </symbol>
-
-      <symbol id="general-arrow-right" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M13.34 12.5l-2.72-3.175a.5.5 0 1 1 .76-.65l2.998 3.5a.5.5 0 0 1 0 .65l-2.998 3.5a.5.5 0 1 1-.76-.65l2.72-3.175z"
-        ></path>
-      </symbol>
-
-      <symbol id="general-arrow-up" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M12 10.16l-3.174 2.719a.5.5 0 0 1-.65-.76l3.5-2.998a.5.5 0 0 1 .65 0l3.5 2.998a.5.5 0 1 1-.65.76L12 10.159z"
-        ></path>
-      </symbol>
-
-      <symbol id="general-arrow-up-down" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M15.646 14.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L12 18.293l3.646-3.647zm0-5.292L12 5.707 8.354 9.354a.5.5 0 1 1-.708-.708l4-4a.5.5 0 0 1 .708 0l4 4a.5.5 0 0 1-.708.708z"
-        ></path>
-      </symbol>
-
-      <symbol id="general-double-arrow-back" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M9.658 12.5l2.72 3.175a.5.5 0 1 1-.76.65l-2.998-3.5a.5.5 0 0 1 0-.65l2.999-3.5a.5.5 0 1 1 .76.65L9.658 12.5zm5.719-3.175l-2.72 3.175 2.72 3.175a.5.5 0 1 1-.76.65l-2.998-3.5a.5.5 0 0 1 0-.65l2.998-3.5a.5.5 0 1 1 .76.65z"
-        ></path>
-      </symbol>
-
-      <symbol id="general-double-arrow-front" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M11.34 12.5L8.62 9.325a.5.5 0 0 1 .76-.65l2.998 3.5a.5.5 0 0 1 0 .65l-2.998 3.5a.5.5 0 1 1-.76-.65l2.72-3.175zm.279-3.175a.5.5 0 0 1 .76-.65l2.998 3.5a.5.5 0 0 1 0 .65l-2.999 3.5a.5.5 0 1 1-.76-.65l2.72-3.175-2.72-3.175z"
-        ></path>
-      </symbol>
-
-      <symbol id="general-double-big-arrow-back" viewBox="0 0 31 31">
-        <g fill="currentColor">
-          <path d="M16 11.825l-3.842 4.297 3.662 4.087a.5.5 0 1 1-.76.65l-3.94-4.412a.5.5 0 0 1 0-.65l4.12-4.622a.5.5 0 1 1 .76.65zm5 0l-3.842 4.297 3.662 4.087a.5.5 0 1 1-.76.65l-3.94-4.412a.5.5 0 0 1 0-.65l4.12-4.622a.5.5 0 1 1 .76.65z"></path>
-          <path d="M10 11.5a.5.5 0 0 1 1 0v9a.5.5 0 0 1-1 0v-9z"></path>
-        </g>
-      </symbol>
-
-      <symbol id="general-double-big-arrow-front" viewBox="0 0 31 31">
-        <g fill="currentColor">
-          <path d="M15 20.175l3.842-4.297-3.662-4.087a.5.5 0 1 1 .76-.65l3.94 4.412a.5.5 0 0 1 0 .65l-4.12 4.622a.5.5 0 1 1-.76-.65zm-5 0l3.842-4.297-3.662-4.087a.5.5 0 1 1 .76-.65l3.94 4.412a.5.5 0 0 1 0 .65l-4.12 4.622a.5.5 0 1 1-.76-.65z"></path>
-          <path d="M21 20.5a.5.5 0 0 1-1 0v-9a.5.5 0 0 1 1 0v9z"></path>
-        </g>
-      </symbol>
-
-      <symbol id="general-x" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M12 12.293L6.854 7.146a.5.5 0 1 0-.708.708L11.293 13l-5.147 5.146a.5.5 0 0 0 .708.708L12 13.707l5.146 5.147a.5.5 0 0 0 .708-.708L12.707 13l5.147-5.146a.5.5 0 0 0-.708-.708L12 12.293z"
-        ></path>
-      </symbol>
-    </SvgIcon>
-  );
-};
-
-const Icon = forwardRef((props: IconProps, ref: ForwardedRef<HTMLSpanElement>) => {
-  const { dataTestId, name, className } = props;
-  const returnedIconComponent = <SisenseSvgIcon {...props} />;
-  const iconClassName = classNames('app-icon', `app-icon--${name}`, className);
-
-  return (
-    <ThemeProvider theme={iconTheme}>
-      <span data-testid={dataTestId} {...props} ref={ref} className={iconClassName}>
-        {returnedIconComponent}
-      </span>
-    </ThemeProvider>
-  );
-});
-
-export default Icon;
-export { Icon };

package/src/lib/Icon/index.ts

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

package/src/lib/Icon/themes/iconTheme.tsx

@@ -1,38 +0,0 @@
-import createTheme from '@mui/material/styles/createTheme';
-// import { injectStylesWithWrapper, themeService, utils } from '@sbi/styleguide';
-
-// import { calcStyles } from './uiCustomization';
-import { siColors } from '../../themes';
-
-// injectStylesWithWrapper && injectStylesWithWrapper(calcStyles);
-
-declare module '@mui/material/Icon' {
-  interface IconPropsVariantOverrides {
-    gray: true;
-  }
-}
-
-export const iconTheme = createTheme({
-  components: {
-    MuiIcon: {
-      styleOverrides: {
-        root: {
-          color: `${siColors.StPrimaryColors.primary}`,
-          top: 0,
-        },
-      },
-    },
-    MuiSvgIcon: {
-      // styleOverrides: {
-      //     root: {
-      //         fill: utils.makeASlightlyDifferentColor(
-      //             themeService.getDesignSettings().typography.primaryTextColor,
-      //             0.9,
-      //         ),
-      //     },
-      // },
-    },
-  },
-});
-
-export type IconTheme = typeof iconTheme;

package/src/lib/Icon/themes/uiCustomization.ts

@@ -1,9 +0,0 @@
-export {};
-// import { CalcStyles, DesignSettings, utils } from '@sbi/styleguide';
-//
-// export const calcStyles: CalcStyles = (designSettings: DesignSettings) => ({
-//     '.MuiSvgIcon-root': {
-//         fill: utils.makeASlightlyDifferentColor(designSettings.typography.secondaryTextColor, 0.1),
-//         color: utils.makeASlightlyDifferentColor(designSettings.typography.secondaryTextColor, 0.1),
-//     },
-// });

package/src/lib/Input/Input.module.scss

@@ -1,97 +0,0 @@
-@import '../styles/style_styleguide_react/_variables';
-
-@mixin component {
-  position: relative;
-  display: flex;
-  align-items: center;
-  // .component .icon conflicts with .sis-scope .app-icon on position
-  .searchIcon.searchIcon {
-    position: absolute;
-    left: 8px;
-    z-index: 1;
-    opacity: 40%;
-    &.large {
-      top: 4px;
-    }
-  }
-  .clearIcon.clearIcon {
-    width: 15px;
-    height: 15px;
-    position: absolute;
-    top: 3px;
-    right: 4px;
-    border-radius: 20px;
-    padding: 4px;
-    &:hover {
-      background-color: $color-gray-2;
-    }
-    &.clearIconHidden {
-      display: none;
-    }
-    &.large {
-      width: 15px;
-      height: 15px;
-      top: 4px;
-      padding: 5px;
-    }
-  }
-  .passwordVisibilityIcon.passwordVisibilityIcon {
-    width: 24px;
-    height: 24px;
-    position: absolute;
-    right: 8px;
-    &.large {
-      width: 24px;
-      height: 24px;
-      top: 5px;
-    }
-  }
-
-  .customIcon {
-    position: absolute;
-    top: 3px;
-    right: 4px;
-
-    &.isLeft {
-      right: 0;
-      left: 8px;
-    }
-    &.large {
-      top: 5px;
-    }
-  }
-
-  .input {
-    border-radius: 4px;
-    outline: none;
-    background: $color-gray-4;
-    line-height: 28px;
-    height: 28px;
-    border: none;
-    text-indent: 8px;
-    width: 100%;
-    &.withLeftIcon {
-      text-indent: 32px;
-    }
-    &::placeholder {
-      color: #b0b5bf;
-    }
-    &:focus {
-      border: 1px solid $color-text;
-    }
-    &.large {
-      height: 34px;
-      line-height: 34px;
-    }
-    &::-ms-reveal {
-      display: none;
-    }
-  }
-}
-
-.component {
-  @include component;
-}
-:global(.sis-scope) .component {
-  @include component;
-}