@sisense/sdk-shared-ui 0.1.0 → 1.26.0

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

@@ -0,0 +1,121 @@
+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

@@ -0,0 +1,39 @@
+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/DropdownButtonBody/index.ts

@@ -0,0 +1,2 @@
+export { DropdownButtonBody } from './DropdownButtonBody';
+export type { DropdownButtonBodyProps } from './DropdownButtonBody';

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

@@ -0,0 +1,20 @@
+@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

@@ -0,0 +1,44 @@
+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

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

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

@@ -0,0 +1,2 @@
+export { DropdownButtonSearch } from './DropdownButtonSearch';
+export type { DropdownButtonSearchProps } from './DropdownButtonSearch';

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

@@ -0,0 +1 @@
+export { useDropdownButtonSearch } from './useDropdownButtonSearch';

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

@@ -0,0 +1,51 @@
+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/DropdownButton/index.ts

@@ -0,0 +1 @@
+export { DropdownButton } from './DropdownButton';

package/src/lib/Dropdown/hooks/index.tsx

@@ -0,0 +1 @@
+export { useDropdown } from './useDropdown';

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

@@ -0,0 +1,29 @@
+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

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

package/src/lib/Dropdown/types.ts

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,118 @@
+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

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

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

@@ -0,0 +1,38 @@
+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/index.ts

@@ -0,0 +1 @@
+export { iconTheme, type IconTheme } from './iconTheme';

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,97 @@
+@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;
+}