pixel-react 1.8.4 → 1.8.5

package/src/components/Select/components/Dropdown.scss

@@ -1,61 +1,61 @@
-.ff-select-dropdown-wrapper {
-  max-height: 160px;
-  z-index: 999999;
-  position: absolute;
-  min-width: 50px;
-  border-radius: 4px;
-  border: 1px solid var(--ff-select-option-border-color);
-  margin-top: 4px;
-  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
-  background-color: var(--ff-select-background-color);
-  overflow: hidden auto;
-
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 12px;
-
-    &-thumb {
-      background-color: var(--ff-select-scroll-thumb-color);
-      border-radius: 4px;
-    }
-
-    &-track {
-      background: var(--ff-select-scroll-track-bg);
-      border-radius: 4px;
-    }
-  }
-
-  .ff-select-dropdown-option {
-    box-sizing: border-box;
-    cursor: pointer;
-    padding: 0px 8px;
-    border-radius: 4px;
-    min-height: 32px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-
-    .ff-select-dropdown-icon-container {
-      display: flex;
-      align-items: center;
-
-      &__icon {
-        margin-right: 4px;
-      }
-    }
-
-    &__selected,
-    &:hover {
-      background-color: var(--ff-select-option-hover-color);
-    }
-  }
-
-  .ff-select-no-option {
-    box-sizing: border-box;
-    padding: 0px 8px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    cursor: not-allowed;
-  }
-}
+.ff-select-dropdown-wrapper {
+  max-height: 160px;
+  z-index: 999999;
+  position: absolute;
+  min-width: 50px;
+  border-radius: 4px;
+  border: 1px solid var(--ff-select-option-border-color);
+  margin-top: 4px;
+  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
+  background-color: var(--ff-select-background-color);
+  overflow: hidden auto;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 12px;
+
+    &-thumb {
+      background-color: var(--ff-select-scroll-thumb-color);
+      border-radius: 4px;
+    }
+
+    &-track {
+      background: var(--ff-select-scroll-track-bg);
+      border-radius: 4px;
+    }
+  }
+
+  .ff-select-dropdown-option {
+    box-sizing: border-box;
+    cursor: pointer;
+    padding: 0px 8px;
+    border-radius: 4px;
+    min-height: 32px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    .ff-select-dropdown-icon-container {
+      display: flex;
+      align-items: center;
+
+      &__icon {
+        margin-right: 4px;
+      }
+    }
+
+    &__selected,
+    &:hover {
+      background-color: var(--ff-select-option-hover-color);
+    }
+  }
+
+  .ff-select-no-option {
+    box-sizing: border-box;
+    padding: 0px 8px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    cursor: not-allowed;
+  }
+}

package/src/components/Select/components/Dropdown.tsx

@@ -1,140 +1,148 @@
-import React, { type FC, useContext, useRef } from 'react';
-import { dropdownDefaultCSSData, DropdownProps } from './types';
-import './Dropdown.scss';
-import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
-import Typography from '../../Typography';
-import { ffid } from '../../../utils/ffID/ffid';
-import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
-import classNames from 'classnames';
-import {
-  getLabel,
-  getValue,
-} from '../../../utils/getSelectOptionValue/getSelectOptionValue';
-import useClickOutside from '../../../hooks/useClickOutside';
-import Icon from '../../Icon';
-
-const Dropdown: FC<DropdownProps> = ({
-  options = [],
-  optionZIndex = 10000000,
-  dropdownPosition,
-  labelAccessor,
-  onSelectOptionSelector,
-  onSelectBlur,
-  inputRef,
-  selectArrowRef,
-  heightFromTop,
-  selectedOption,
-  valueAccessor,
-  showIcon = false,
-}) => {
-  const themeContext = useContext(ThemeContext);
-  const currentTheme = themeContext?.currentTheme;
-
-  const optionsWrapperRef = useRef<HTMLDivElement>(null);
-  useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef, selectArrowRef]);
-
-  const { positionX, positionY, fromBottom, width } = dropdownPosition;
-  const { margin, optionHeight, selectInputHeight, dropDownWrapperPadding } =
-    dropdownDefaultCSSData;
-
-  const updateDropdownPosition = () => {
-    let dropdownContainerHeight;
-
-    if (checkEmpty(options)) {
-      dropdownContainerHeight = 32 + 2 * dropDownWrapperPadding;
-    } else if (options?.length > 5) {
-      dropdownContainerHeight = 160;
-    } else {
-      dropdownContainerHeight =
-        options.length * optionHeight + 2 * dropDownWrapperPadding;
-    }
-
-    if (fromBottom > dropdownContainerHeight + margin) {
-      return {
-        left: positionX,
-        top: positionY + heightFromTop,
-        width: showIcon ? width + 56 : width + 30,
-        zIndex: optionZIndex,
-        marginLeft: showIcon ? '-29px' : '-2px',
-      };
-    }
-    return {
-      zIndex: optionZIndex,
-      left: positionX,
-      width: showIcon ? width + 56 : width + 30,
-      top: positionY - selectInputHeight - dropdownContainerHeight + 4 * margin,
-      marginLeft: showIcon ? '-29px' : '-2px',
-    };
-  };
-
-  const getOptionLabel = (label: any, icon: string) => {
-    if (React.isValidElement(label)) {
-      return label;
-    }
-    return (
-      <Typography
-        as="div"
-        lineHeight="30px"
-        color="var(--ff-select-text-color)"
-        className={classNames({
-          'ff-select-dropdown-icon-container': showIcon,
-        })}
-      >
-        {showIcon && (
-          <Icon
-            name={icon}
-            className="ff-select-dropdown-icon-container__icon"
-          />
-        )}
-        {label}
-      </Typography>
-    );
-  };
-
-  return (
-    <div
-      className={classNames('ff-select-dropdown-wrapper', currentTheme)}
-      ref={optionsWrapperRef}
-      style={updateDropdownPosition()}
-    >
-      <div>
-        {!checkEmpty(options) ? (
-          options.map((option) => (
-            <div
-              className={classNames(
-                'ff-select-dropdown-option',
-                {
-                  'ff-select-dropdown-option__selected':
-                    getValue(option, valueAccessor) === selectedOption,
-                },
-                currentTheme
-              )}
-              key={ffid()}
-              onClick={() => {
-                if ('disable' in option && option['disable']) return;
-                onSelectOptionSelector(option);
-              }}
-            >
-              {getOptionLabel(
-                getLabel(option, labelAccessor),
-                'iconName' in option && option['iconName']
-              )}
-            </div>
-          ))
-        ) : (
-          <Typography
-            textAlign="center"
-            as="div"
-            lineHeight="32px"
-            color="var(--ff-select-text-color)"
-            className={classNames('ff-select-no-option', currentTheme)}
-          >
-            No Results found
-          </Typography>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Dropdown;
+import React, { type FC, useContext, useRef } from 'react';
+import { dropdownDefaultCSSData, DropdownProps } from './types';
+import './Dropdown.scss';
+import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
+import Typography from '../../Typography';
+import { ffid } from '../../../utils/ffID/ffid';
+import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
+import classNames from 'classnames';
+import {
+  getLabel,
+  getValue,
+} from '../../../utils/getSelectOptionValue/getSelectOptionValue';
+import useClickOutside from '../../../hooks/useClickOutside';
+import Icon from '../../Icon';
+import Tooltip from '../../Tooltip';
+
+const Dropdown: FC<DropdownProps> = ({
+  options = [],
+  optionZIndex = 10000000,
+  dropdownPosition,
+  labelAccessor,
+  onSelectOptionSelector,
+  onSelectBlur,
+  inputRef,
+  selectArrowRef,
+  heightFromTop,
+  selectedOption,
+  valueAccessor,
+  showIcon = false,
+  showToolTip = false,
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
+
+  const optionsWrapperRef = useRef<HTMLDivElement>(null);
+  useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef, selectArrowRef]);
+
+  const { positionX, positionY, fromBottom, width } = dropdownPosition;
+  const { margin, optionHeight, selectInputHeight, dropDownWrapperPadding } =
+    dropdownDefaultCSSData;
+
+  const updateDropdownPosition = () => {
+    let dropdownContainerHeight;
+
+    if (checkEmpty(options)) {
+      dropdownContainerHeight = 32 + 2 * dropDownWrapperPadding;
+    } else if (options?.length > 5) {
+      dropdownContainerHeight = 160;
+    } else {
+      dropdownContainerHeight =
+        options.length * optionHeight + 2 * dropDownWrapperPadding;
+    }
+
+    if (fromBottom > dropdownContainerHeight + margin) {
+      return {
+        left: positionX,
+        top: positionY + heightFromTop,
+        width: showIcon ? width + 56 : width + 30,
+        zIndex: optionZIndex,
+        marginLeft: showIcon ? '-29px' : '-2px',
+      };
+    }
+    return {
+      zIndex: optionZIndex,
+      left: positionX,
+      width: showIcon ? width + 56 : width + 30,
+      top: positionY - selectInputHeight - dropdownContainerHeight + 4 * margin,
+      marginLeft: showIcon ? '-29px' : '-2px',
+    };
+  };
+
+  const getOptionLabel = (label: any, icon: string) => {
+    if (React.isValidElement(label)) {
+      return label;
+    }
+    return (
+      <Tooltip
+        placement="bottom"
+        title={showToolTip ? label : ''}
+        zIndex={optionZIndex + 1}
+      >
+        <Typography
+          as="div"
+          lineHeight="30px"
+          color="var(--ff-select-text-color)"
+          className={classNames({
+            'ff-select-dropdown-icon-container': showIcon,
+          })}
+        >
+          {showIcon && (
+            <Icon
+              name={icon}
+              className="ff-select-dropdown-icon-container__icon"
+            />
+          )}
+          {label}
+        </Typography>
+      </Tooltip>
+    );
+  };
+
+  return (
+    <div
+      className={classNames('ff-select-dropdown-wrapper', currentTheme)}
+      ref={optionsWrapperRef}
+      style={updateDropdownPosition()}
+    >
+      <div>
+        {!checkEmpty(options) ? (
+          options.map((option) => (
+            <div
+              className={classNames(
+                'ff-select-dropdown-option',
+                {
+                  'ff-select-dropdown-option__selected':
+                    getValue(option, valueAccessor) === selectedOption,
+                },
+                currentTheme
+              )}
+              key={ffid()}
+              onClick={() => {
+                if ('disable' in option && option['disable']) return;
+                onSelectOptionSelector(option);
+              }}
+            >
+              {getOptionLabel(
+                getLabel(option, labelAccessor),
+                'iconName' in option && option['iconName']
+              )}
+            </div>
+          ))
+        ) : (
+          <Typography
+            textAlign="center"
+            as="div"
+            lineHeight="32px"
+            color="var(--ff-select-text-color)"
+            className={classNames('ff-select-no-option', currentTheme)}
+          >
+            No Results found
+          </Typography>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Dropdown;

package/src/components/Select/components/types.ts

@@ -1,24 +1,25 @@
-import { DropdownPosition, Option } from '../types';
-import { RefObject } from 'react';
-
-export interface DropdownProps {
-  options: Option[];
-  dropdownPosition: DropdownPosition;
-  optionZIndex: number;
-  labelAccessor?: string;
-  valueAccessor?: string;
-  onSelectBlur: () => void;
-  onSelectOptionSelector: (option: Option) => void;
-  inputRef?: RefObject<HTMLInputElement>;
-  selectArrowRef?: RefObject<HTMLDivElement>;
-  heightFromTop: number;
-  selectedOption?: Option;
-  showIcon?: boolean;
-}
-
-export const dropdownDefaultCSSData = {
-  margin: 6,
-  optionHeight: 32,
-  selectInputHeight: 38,
-  dropDownWrapperPadding: 0,
-};
+import { DropdownPosition, Option } from '../types';
+import { RefObject } from 'react';
+
+export interface DropdownProps {
+  options: Option[];
+  dropdownPosition: DropdownPosition;
+  optionZIndex: number;
+  labelAccessor?: string;
+  valueAccessor?: string;
+  onSelectBlur: () => void;
+  onSelectOptionSelector: (option: Option) => void;
+  inputRef?: RefObject<HTMLInputElement>;
+  selectArrowRef?: RefObject<HTMLDivElement>;
+  heightFromTop: number;
+  selectedOption?: Option;
+  showIcon?: boolean;
+  showToolTip?: boolean
+}
+
+export const dropdownDefaultCSSData = {
+  margin: 6,
+  optionHeight: 32,
+  selectInputHeight: 38,
+  dropDownWrapperPadding: 0,
+};

package/src/components/Select/index.ts

@@ -1 +1 @@
-export { default } from './Select';
+export { default } from './Select';