pixel-react 1.6.3 → 1.6.5

package/src/components/Drawer/Drawer.tsx

@@ -36,6 +36,9 @@ const Drawer: FC<DrawerProps> = ({
   zIndex = 999,
   secondLayerZIndex = false,
   top,
+  height,
+  width,
+  right = 0,
 }: DrawerProps) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -85,7 +88,7 @@ const Drawer: FC<DrawerProps> = ({
         className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
           'ff-drawer--open': isOpen,
         })}
-        style={{ zIndex, top }}
+        style={{ zIndex, top, height, width, right }}
       >
         {showHeader && (
           <div

package/src/components/Drawer/Types.ts

@@ -141,4 +141,17 @@ export interface DrawerProps {
    * Custom top for the drawer
    */
   top?: string;
+  /**
+   * Height of the drawer
+   */
+  height?: string;
+  /**
+   *
+   * width of the drawer
+   */
+  width?: string;
+  /**
+   * Position from right
+   */
+  right?: string | number;
 }

package/src/components/MiniModal/MiniModal.scss

@@ -35,7 +35,6 @@
     &.popover-arrow-top {
       bottom: 100%;
       left: 30px;
-      border-width: 0 10px 10px 10px;
       padding: 0 3px 0 0;
       border-color: transparent transparent var(--ff-mini-modal-border)
         transparent;
@@ -46,7 +45,6 @@
     }
     &.popover-arrow-left {
       left: -15px; //align the arrow with modal for the right side modal
-      border-width: 10px 10px 10px 0;
       border-color: transparent var(--ff-mini-modal-border) transparent
         transparent;
       filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));
@@ -58,7 +56,6 @@
     &.popover-arrow-bottom {
       top: 100%;
       left: 30px;
-      border-width: 10px 10px 0 10px;
       border-color: var(--ff-mini-modal-border) transparent transparent
         transparent; // Bottom part of the arrow with the correct color
       filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));
@@ -70,7 +67,6 @@
     &.popover-arrow-right {
       right: -10px;
       top: 66px;
-      border-width: 10px 0 10px 10px;
       border-color: transparent transparent transparent
         var(--ff-mini-modal-border);
       filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));

package/src/components/MiniModal/MiniModal.stories.tsx

@@ -55,7 +55,7 @@ const BasicModalComponent = () => {
             isOverlay: true,
             zIndexOverlay: 99,
           }}
-          modalProperties={{ width: 300, height: 180 }}
+          modalProperties={{ width: 300, height: 180, left: 180, top: 250 }}
           headerProps={
             <>
               <Typography as="p">Modal 1</Typography>
@@ -271,7 +271,8 @@ export const CustomModalWithArrow = () => {
             isOverlay: true,
             zIndexOverlay: 99,
           }}
-          modalProperties={{ width: 300, height: 250 }}
+          modalProperties={{ width: 300, height: 250, left: 180 }}
+          arrowProperties={{ left: 270, size: 6 }}
           arrowZIndex={1000}
           headerProps={
             <>

package/src/components/MiniModal/MiniModal.tsx

@@ -31,6 +31,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       extraLeftSpace,
       isIconModel,
       wrapperProperties,
+      arrowProperties,
       arrowZIndex,
       overlay,
       outSideClick,
@@ -43,7 +44,21 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     });
     const [isVisible, setIsVisible] = useState(false);
     const modalRef = useRef<HTMLDivElement>(null);
+    const {
+      width: modalWidth,
+      height: modalHeight,
+      borderRadius: modalBorderRadius = 4,
+      zIndex: modalZIndex = 99,
+      boxShadow: modalBoxShadow,
+      left: modalLeft,
+      top: modalTop,
+    } = modalProperties || {};
 
+    const {
+      left: popOverLeft,
+      top: popOverTop,
+      size: popOverSize = 10,
+    } = arrowProperties || {};
     // Function to calculate available space
     const getAvailableSpace = (rect: Rect): AvailableSpace => {
       const { top, left, bottom, right } = rect;
@@ -196,14 +211,6 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       };
     }, [calculatePosition]);
 
-    const {
-      width: modalWidth,
-      height: modalHeight,
-      borderRadius: modalBorderRadius = 4,
-      zIndex: modalZIndex = 99,
-      boxShadow: modalBoxShadow,
-    } = modalProperties || {};
-
     const {
       width: wrapperWidth = 35,
       zIndex: wrapperZIndex = 101,
@@ -234,8 +241,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
             animatedModal: isAnimated,
           })}
           style={{
-            top: `${calculatedModalTop}px`,
-            left: `${calculatedModalLeft}px`,
+            top: `${modalTop ?? calculatedModalTop}px`,
+            left: `${modalLeft ?? calculatedModalLeft}px`,
           }}
         >
           {isPopOver && (
@@ -251,6 +258,17 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
               } ${getArrowClassName()}`}
               style={{
                 zIndex: `${arrowZIndex}`,
+                top: `${popOverTop && popOverTop}px`,
+                left: `${popOverLeft && popOverLeft}px`,
+                borderWidth: `${
+                  modalPosition === 'right'
+                    ? `${popOverSize}px ${popOverSize}px ${popOverSize}px 0`
+                    : modalPosition === 'top'
+                    ? `${popOverSize}px ${popOverSize}px 0 ${popOverSize}px`
+                    : modalPosition === 'left'
+                    ? `${popOverSize}px 0 ${popOverSize}px ${popOverSize}px`
+                    : `0 ${popOverSize}px ${popOverSize}px ${popOverSize}px`
+                }`,
               }}
             />
           )}

package/src/components/MiniModal/types.ts

@@ -5,6 +5,8 @@ interface ModalDimensions {
   borderRadius?: number;
   zIndex?: number;
   boxShadow?: string;
+  left?: number;
+  top?: number;
 }
 export interface MiniEditModalProps {
   /**
@@ -94,6 +96,11 @@ export interface MiniEditModalProps {
     boxShadow?: string;
   };
   arrowZIndex?: number;
+  arrowProperties?: {
+    left?: number;
+    top?: number;
+    size?: number;
+  };
   overlay?: {
     isOverlay?: boolean;
     zIndexOverlay?: number;

package/src/components/Select/Select.scss

@@ -51,6 +51,10 @@
       }
     }
 
+    .ff-select-input-icon {
+      margin-left: 6px;
+    }
+
     .ff-select-inputField {
       @extend .fontSm;
       width: calc(100% - 8px);
@@ -70,6 +74,11 @@
       &__readonly {
         cursor: pointer;
       }
+
+      &__icon {
+        width: calc(100% - 36px);
+        padding: 4;
+      }
     }
 
     .ff-select-arrows-wrapper {
@@ -99,12 +108,17 @@
       transition: 0.18s ease all;
       border-radius: 4px;
 
+      &__icon {
+        left: 24px;
+      }
+
       &__active {
         transform: translateY(-16px);
         transition: 0.18s ease all;
         background-color: var(--ff-select-background-color);
         padding: 0 2px;
         z-index: 100000;
+        left: 8px;
       }
     }
 
@@ -124,6 +138,7 @@
         padding: 0 2px;
         line-height: 18px;
         z-index: 100000;
+        left: 8px;
       }
 
       .ff-select-arrows-wrapper {
@@ -178,6 +193,7 @@
         background-color: var(--ff-select-background-color);
         padding: 0 2px;
         line-height: 18px;
+        left: 8px;
       }
     }
 

package/src/components/Select/Select.stories.tsx

@@ -3,6 +3,7 @@ import Select from './Select';
 import React,{ useState } from 'react';
 import { Option } from './types';
 import RadioGroup from '../RadioGroup';
+import React from 'react';
 
 const meta: Meta<typeof Select> = {
   title: 'Components/Select',
@@ -303,4 +304,52 @@ export const updateOptionFromOutside: Story = {
   },
 };
 
+export const IconOptionSelection: Story = {
+  render: () => {
+    const optionsList = [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+        iconName: 'local',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+        iconName: 'chrome_icon',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+        iconName: 'mac_icon',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+        iconName: 'web_icon',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: 'fire-flink-LIC3179',
+      value: 'fire-flink-LIC3179',
+      iconName: 'local',
+    });
+
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <Select
+        label="Option"
+        optionsList={optionsList}
+        selectedOption={selectedOption}
+        onChange={handleChange}
+        showIcon={true}
+        width={200}
+      />
+    );
+  },
+};
+
 export default meta;

package/src/components/Select/Select.tsx

@@ -30,11 +30,16 @@ const Select: FC<SelectProps> = ({
   width = '100%',
   onBlur = () => {},
   disableInput = false,
+  showIcon = false,
 }) => {
   const selectWidth = typeof width === 'number' ? `${width}px` : width;
 
   const [showDropdownOptions, setShowDropdownOptions] = useState(false);
-  const [searchedOption, setSearchedOption] = useState<any>('');
+  const [searchedOption, setSearchedOption] = useState<any>({
+    searchedText: '',
+    searchedIcon: '',
+  });
+  const { searchedText, searchedIcon } = searchedOption;
   const [selectOptionList, setSelectOptionList] = useState<Option[] | []>([]);
   const [dropdownPosition, setDropdownPosition] = useState<DrowdownPosition>({
     positionX: 0,
@@ -52,7 +57,10 @@ const Select: FC<SelectProps> = ({
 
   const handleIconClick = () => {
     setShowDropdownOptions(!showDropdownOptions);
-    setSearchedOption(getValue(selectedOption, valueAccessor));
+    setSearchedOption({
+      ...searchedOption,
+      searchedText: getValue(selectedOption, valueAccessor),
+    });
     setSelectOptionList(optionsList);
     if (!showDropdownOptions && inputRef.current) {
       inputRef.current.focus();
@@ -71,7 +79,10 @@ const Select: FC<SelectProps> = ({
     });
 
     setSelectOptionList(filteredOptions);
-    setSearchedOption(value);
+    setSearchedOption({
+      ...searchedOption,
+      searchedText: value,
+    });
   };
 
   const onSelectUpdatePosition = () => {
@@ -105,7 +116,10 @@ const Select: FC<SelectProps> = ({
       fromBottom: 0,
       width: 0,
     });
-    setSearchedOption(getValue(selectedOption, valueAccessor));
+    setSearchedOption({
+      searchedText: getValue(selectedOption, valueAccessor),
+      searchedIcon: selectedOption.iconName,
+    });
     setSelectOptionList(optionsList);
     onBlur();
   };
@@ -113,7 +127,10 @@ const Select: FC<SelectProps> = ({
   const onSelectOptionSelector = (option: Option): void => {
     if (disabled) return;
     onSelectBlur();
-    setSearchedOption(getValue(option, valueAccessor));
+    setSearchedOption({
+      searchedText: getValue(selectedOption, valueAccessor),
+      searchedIcon: selectedOption.iconName,
+    });
     if (onChange) {
       onChange(option);
     }
@@ -142,7 +159,10 @@ const Select: FC<SelectProps> = ({
   }, [showDropdownOptions]);
 
   useEffect(() => {
-    setSearchedOption(getValue(selectedOption, valueAccessor));
+    setSearchedOption({
+      searchedText: getValue(selectedOption, valueAccessor),
+      searchedIcon: selectedOption.iconName,
+    });
   }, [selectedOption]);
 
   useEffect(() => {
@@ -165,6 +185,9 @@ const Select: FC<SelectProps> = ({
           'ff-select__no_border': !showBorder,
         })}
       >
+        {showIcon && (
+          <Icon name={searchedIcon} className="ff-select-input-icon" />
+        )}
         <input
           type="text"
           ref={inputRef}
@@ -172,9 +195,10 @@ const Select: FC<SelectProps> = ({
           className={classNames('ff-select-inputField', {
             'ff-select-inputField__disabled': disabled,
             'ff-select-inputField__readonly': disableInput,
+            'ff-select-inputField__icon': showIcon,
           })}
           onFocus={handleFocus}
-          value={searchedOption}
+          value={searchedText}
           autoCorrect="off"
           autoComplete="off"
           spellCheck="false"
@@ -203,6 +227,7 @@ const Select: FC<SelectProps> = ({
           <Typography
             as="span"
             className={classNames('ff-select-labels', {
+              'ff-select-labels__icon': showIcon,
               'ff-select-labels__active': searchedOption,
             })}
             fontSize={searchedOption || showDropdownOptions ? 8 : 12}
@@ -240,6 +265,7 @@ const Select: FC<SelectProps> = ({
                 onSelectOptionSelector={onSelectOptionSelector}
                 heightFromTop={height}
                 selectedOption={searchedOption}
+                showIcon={showIcon}
               />,
               document.body
             )}

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

@@ -35,6 +35,15 @@
     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);

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

@@ -11,6 +11,7 @@ import {
   getValue,
 } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
 import useClickOutside from '../../../hooks/useClickOutside';
+import Icon from '../../Icon';
 
 const Dropdown: FC<DropdownProps> = ({
   options = [],
@@ -24,6 +25,7 @@ const Dropdown: FC<DropdownProps> = ({
   heightFromTop,
   selectedOption,
   valueAccessor,
+  showIcon = false,
 }) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
@@ -51,21 +53,21 @@ const Dropdown: FC<DropdownProps> = ({
       return {
         left: positionX,
         top: positionY + heightFromTop,
-        width: width + 30,
+        width: showIcon ? width + 56 : width + 30,
         zIndex: optionZIndex,
-        marginLeft: '-2px',
+        marginLeft: showIcon ? '-29px' : '-2px',
       };
     }
     return {
       zIndex: optionZIndex,
       left: positionX,
-      width: width + 30,
+      width: showIcon ? width + 56 : width + 30,
       top: positionY - selectInputHeight - dropdownContainerHeight + 4 * margin,
-      marginLeft: '-2px',
+      marginLeft: showIcon ? '-29px' : '-2px',
     };
   };
 
-  const getOptionLabel = (label: any) => {
+  const getOptionLabel = (label: any, icon: string) => {
     if (React.isValidElement(label)) {
       return label;
     }
@@ -74,7 +76,16 @@ const Dropdown: FC<DropdownProps> = ({
         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>
     );
@@ -104,7 +115,10 @@ const Dropdown: FC<DropdownProps> = ({
                 onSelectOptionSelector(option);
               }}
             >
-              {getOptionLabel(getLabel(option, labelAccessor))}
+              {getOptionLabel(
+                getLabel(option, labelAccessor),
+                'iconName' in option && option['iconName']
+              )}
             </div>
           ))
         ) : (

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

@@ -13,6 +13,7 @@ export interface DropdownProps {
   selectArrowRef?: RefObject<HTMLDivElement>;
   heightFromTop: number;
   selectedOption?: Option;
+  showIcon?: boolean;
 }
 
 export const dropdownDefaultCSSData = {

package/src/components/Select/types.ts

@@ -95,9 +95,19 @@ export interface SelectProps {
   onBlur?: () => void;
 
   /*
-  * Disable the select component input  
-  */
+   * Disable the select component input
+   */
   disableInput?: boolean;
+
+  /*
+   *  Provide the icon for the select
+   */
+  showIcon?: boolean;
+
+  /*
+   *  Provide the icon name for the select
+   */
+  iconName?: string;
 }
 
 export interface DrowdownPosition {

package/src/components/TableTree/TableTree.tsx

@@ -4,7 +4,13 @@ import { prepareData } from '../../utils/TableCell/TableCell';
 import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
 import Checkbox from '../Checkbox';
 import RadioButton from '../RadioButton';
-import { TableBodyProps, TableCellProps, TableHeadProps, TableRowProps, TreeTableProps } from './types';
+import {
+  TableBodyProps,
+  TableCellProps,
+  TableHeadProps,
+  TableRowProps,
+  TreeTableProps,
+} from './types';
 
 // Helper to render spaces for levels
 const renderSpaces = (level: number) =>
@@ -185,7 +191,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
 }) => {
   const handleToggleExpand = useCallback(
     (node: any) => onExpand?.(true, node?.id),
-    [ onExpand]
+    [onExpand]
   );
 
   const handleCheckBoxChange = useCallback(
@@ -193,7 +199,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
       const nodeId = node.id;
 
       if (type === 'radio') {
-        onChange?.([nodeId]);
+        onChange?.('true', [nodeId]);
       } else {
         let updatedSelected = [...selected];
 
@@ -207,7 +213,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
           );
         }
 
-        onChange?.(updatedSelected);
+        onChange?.('true', updatedSelected);
       }
     },
     [selected, treeData, onChange]

package/src/components/TableTree/types.ts

@@ -61,7 +61,7 @@ export interface TreeTableProps {
   columnsData: Column[];
   selected?: string[];
   select?: 'radio' | 'checkbox' | 'none';
-  onChange?: (nodes: string[]) => void;
+  onChange?: (e: any, node: string[]) => void;
   onClick?: (e: React.MouseEvent<HTMLDivElement>, row: TreeNode) => void;
   onExpand?: (_isExpanded: boolean, node: string) => void;
   onPagination?: (_direction: string) => void;

package/src/index.ts

@@ -68,6 +68,7 @@ import VariableDropdown from './components/Editor/VariableDropdown';
 import LineChart from './components/Charts/LineChart';
 import DownloadClient from './components/DownloadClient/DownloadClient';
 import FieldSet from './components/FieldSet';
+import CreateVariableSlider from './components/CreateVariable/CreateVariableSlider';
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
 import {
@@ -168,6 +169,7 @@ export {
   DownloadClient,
   FieldSet,
   PopUpModal,
+  CreateVariableSlider,
 
   // utils exports
   checkEmpty,

package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import StyleGuide from './ColorPalette';
-declare const meta: Meta<typeof StyleGuide>;
-type Story = StoryObj<typeof StyleGuide>;
-export declare const ColorList: Story;
-export default meta;

package/lib/StyleGuide/Typography/Typography.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Typography from './Typography';
-declare const meta: Meta<typeof Typography>;
-type Story = StoryObj<typeof Typography>;
-export declare const AllFonts: Story;
-export default meta;

package/lib/components/Accordion/Accordion.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Accordion from './Accordion';
-declare const meta: Meta<typeof Accordion>;
-type Story = StoryObj<typeof Accordion>;
-export declare const SampleAccordion: Story;
-export default meta;

package/lib/components/AddResourceButton/AddButton.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import AddButton from './AddButton';
-declare const meta: Meta<typeof AddButton>;
-type Story = StoryObj<typeof AddButton>;
-export declare const Default: Story;
-export declare const TwoArrowsButtons: Story;
-export declare const ThreeArrowsButton: Story;
-export default meta;

package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AllProjectsDropdown from './AllProjectsDropdown';
-declare const meta: Meta<typeof AllProjectsDropdown>;
-type Story = StoryObj<typeof AllProjectsDropdown>;
-export declare const Default: Story;
-export declare const PrimaryIconButton: Story;
-export default meta;

package/lib/components/AppHeader/AppHeader.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AppHeader from './AppHeader';
-declare const meta: Meta<typeof AppHeader>;
-type Story = StoryObj<typeof AppHeader>;
-export declare const SampleAppHeader: Story;
-export declare const Controlled: Story;
-export default meta;

package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts

@@ -1,9 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AttachmentButton from './AttachmentButton';
-declare const meta: Meta<typeof AttachmentButton>;
-type Story = StoryObj<typeof AttachmentButton>;
-export declare const Default: Story;
-export declare const SmallFileLimit: Story;
-export declare const LargeFileLimit: Story;
-export declare const DisabledUploader: Story;
-export default meta;

package/lib/components/Avatar/Avatar.stories.d.ts

@@ -1,10 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import Avatar from './Avatar';
-declare const meta: Meta<typeof Avatar>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Small: Story;
-export declare const Medium: Story;
-export declare const Large: Story;
-export declare const CustomAvatarSize: Story;
-export declare const CustomIconSize: Story;