@sisense/sdk-shared-ui 1.27.1 → 1.29.0

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

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