pixel-react 1.15.2 → 1.15.3

package/lib/components/variableSuggestionInputDropDown/types.d.ts

@@ -148,6 +148,29 @@ export interface VariableSuggestionInputDropDownProps {
      */
     inputTitle?: string;
     helperTextWidth?: number | string;
+    iconProps?: {
+        /**
+         * Flag to determine if icon should be shown
+         */
+        isShowIcon?: boolean;
+        /**
+         * Function triggered when icon is clicked
+         */
+        onIconClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+        /**
+         * Name of the icon to display
+         */
+        iconName?: string;
+        /**
+         * Tooltip title shown when hovering over icon
+         */
+        iconToolTipTitle?: string;
+        /**
+         * Flag to disable the icon
+         */
+        isIconDisable?: boolean;
+        iconColor?: string;
+    };
 }
 export interface OptionsDropdownProps {
     /**

package/lib/index.cjs

@@ -3434,7 +3434,7 @@ const Checkbox = ({
         color: "var(--primary-icon-color)",
         className: "ff-tick-icon"
       })
-    }), jsxRuntime.jsx(Typography, {
+    }), label && jsxRuntime.jsx(Typography, {
       as: "span",
       fontSize: labelFontSize,
       children: label
@@ -4757,7 +4757,7 @@ const Input$1 = /*#__PURE__*/React.forwardRef(({
   },
   ...props
 }, ref) => {
-  const isValueFilled = !checkEmpty(value) || type === 'password' && value?.length > 0;
+  const isValueFilled = !checkEmpty(value) || type === 'password' && value?.length > 0 || value !== '';
   const isTypeNumber = type === 'number';
   const numericMin = minValue !== undefined ? parseInt(minValue, 10) || 0 : 0;
   const numericMax = maxValue !== undefined ? parseInt(maxValue, 10) || Infinity : Infinity;
@@ -8122,7 +8122,7 @@ const MenuOption = ({
   options = [],
   onClick = () => {},
   onOptionClick = () => {},
-  iconButtonSize = 20,
+  iconButtonSize = 24,
   iconButtonBorderRadius = 7,
   iconSize = 16,
   variant = 'light',
@@ -13290,7 +13290,7 @@ const Table$1 = ({
                     left: isFrozen ? getColumnLeftPosition(index, columns, freezeColumns) : 'auto',
                     zIndex: isFrozen ? 999 : 'auto',
                     width: column.width ? `${column.width}px` : 'auto',
-                    padding: '7px 8px',
+                    padding: '8px 8px',
                     boxSizing: 'border-box',
                     // Remove right padding from frozen columns to prevent overlap
                     paddingRight: isFrozen ? 0 : '8px'
@@ -50288,6 +50288,14 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
   inputTitle = '',
   onBlur,
   helperTextWidth,
+  iconProps = {
+    isShowIcon: false,
+    iconName: '',
+    iconToolTipTitle: '',
+    isIconDisable: false,
+    iconColor: '',
+    onIconClick: () => {}
+  },
   ...props
 }, ref) => {
   const [showDropdown, setShowDropdown] = React.useState(false);
@@ -50300,6 +50308,7 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
   const inputRef = React.useRef(null);
   const containerRef = React.useRef(null);
   const [dropdownWidthPx, setDropdownWidthPx] = React.useState('auto');
+  const showIcon = iconProps?.isShowIcon;
   React.useEffect(() => {
     const inputContainer = containerRef.current?.querySelector('.ff-input-container');
     if (!inputContainer) return;
@@ -50461,7 +50470,9 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
           name: "add_variable",
           ref: inputRef,
           type: type,
-          className: "ff-variable-input-container",
+          className: classNames('ff-variable-input-container', {
+            'ff-variable-input-container--show-icon': showIcon
+          }),
           value: value,
           onChange: onChange,
           onPaste: () => {
@@ -50494,7 +50505,9 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
           })
         })]
       }), !checkEmpty(value) && !isOnlyHash && jsxRuntime.jsx("div", {
-        className: "ff-cancel-icon-container",
+        className: classNames('ff-cancel-icon-container', {
+          'ff-cancel-icon-container--show-icon': showIcon
+        }),
         children: clearIcon && jsxRuntime.jsx(Tooltip, {
           title: "Cancel",
           style: {
@@ -50508,6 +50521,25 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
             hoverEffect: true
           })
         })
+      }), showIcon && jsxRuntime.jsx("div", {
+        className: "ff-info-icon-container",
+        children: jsxRuntime.jsx(Tooltip, {
+          title: showIcon && !iconProps?.isIconDisable ? iconProps?.iconToolTipTitle : '',
+          children: jsxRuntime.jsx(Icon, {
+            name: iconProps?.iconName || '',
+            hoverEffect: false,
+            height: 16,
+            width: 16,
+            color: iconProps?.iconColor || 'var(--text-area-default-color)',
+            onClick: e => {
+              if (iconProps?.onIconClick) {
+                iconProps?.onIconClick(e);
+              }
+            },
+            disabled: iconProps?.isIconDisable,
+            cursorType: "pointer"
+          })
+        })
       })]
     }), result?.showDropdown && isFocused && jsxRuntime.jsx(VariableDropdown, {
       position: "absolute",
@@ -52530,19 +52562,24 @@ const MediaViewerModal = ({
   showControlExpand = false
 }) => {
   const videoRef = React.useRef(null);
+  const sliderRef = React.useRef(null);
   const [currentTime, setCurrentTime] = React.useState(0);
   const [duration, setDuration] = React.useState(0);
   const [isFullscreen] = React.useState(false);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [progress, setProgress] = React.useState(0);
   React.useEffect(() => {
     if (mediaType === 'video' && videoRef.current && !children) {
       isPlaying ? videoRef.current.play() : videoRef.current.pause();
     }
   }, [isPlaying, mediaType, children]);
   const handleTimeUpdate = React.useCallback(() => {
-    if (videoRef.current) {
+    if (videoRef.current && !isDragging) {
+      const current = videoRef.current.currentTime / videoRef.current.duration * 100;
+      setProgress(current || 0);
       setCurrentTime(videoRef.current.currentTime);
     }
-  }, []);
+  }, [isDragging]);
   const handleLoadedMetadata = React.useCallback(() => {
     if (videoRef.current) {
       setDuration(videoRef.current.duration);
@@ -52550,27 +52587,61 @@ const MediaViewerModal = ({
   }, []);
   const handleVideoEnd = React.useCallback(() => {
     setCurrentTime(0);
+    setProgress(0);
     onTogglePlay?.();
   }, [onTogglePlay]);
-  const formatTime = time => {
+  const formatTime = React.useCallback(time => {
     const minutes = Math.floor(time / 60);
     const seconds = Math.floor(time % 60).toString().padStart(2, '0');
     return `${minutes}:${seconds}`;
-  };
-  const handleSliderChange = React.useCallback(newTime => {
+  }, []);
+  const handleSeek = React.useCallback(newProgress => {
     if (videoRef.current) {
-      videoRef.current.currentTime = newTime;
-      setCurrentTime(newTime);
+      const seekTo = newProgress / 100 * videoRef.current.duration;
+      videoRef.current.currentTime = seekTo;
+      setProgress(newProgress);
+      setCurrentTime(seekTo);
     }
   }, []);
   const handleSliderClick = React.useCallback(e => {
-    const rect = e.currentTarget.getBoundingClientRect();
+    if (isDragging || !sliderRef.current) return;
+    const rect = sliderRef.current.getBoundingClientRect();
+    const clickX = e.clientX - rect.left;
+    const width = rect.width;
+    const newProgress = Math.max(0, Math.min(100, clickX / width * 100));
+    handleSeek(newProgress);
+  }, [handleSeek, isDragging]);
+  const handleMouseDown = React.useCallback(e => {
+    if (!sliderRef.current) return;
+    setIsDragging(true);
+    const rect = sliderRef.current.getBoundingClientRect();
     const clickX = e.clientX - rect.left;
     const width = rect.width;
-    const newTime = clickX / width * duration;
-    handleSliderChange(newTime);
-  }, [duration, handleSliderChange]);
-  const progressPercentage = duration ? currentTime / duration * 100 : 0;
+    const newProgress = Math.max(0, Math.min(100, clickX / width * 100));
+    handleSeek(newProgress);
+  }, [handleSeek]);
+  const handleMouseMove = React.useCallback(e => {
+    if (!isDragging || !sliderRef.current || !videoRef.current) return;
+    const rect = sliderRef.current.getBoundingClientRect();
+    const moveX = e.clientX - rect.left;
+    const width = rect.width;
+    const newProgress = Math.max(0, Math.min(100, moveX / width * 100));
+    handleSeek(newProgress);
+  }, [isDragging, handleSeek]);
+  const handleMouseUp = React.useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  React.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+    return undefined;
+  }, [isDragging, handleMouseMove, handleMouseUp]);
   if (!isOpen) return null;
   return jsxRuntime.jsx(OverviewModal, {
     isOpen: isOpen,
@@ -52654,23 +52725,16 @@ const MediaViewerModal = ({
           children: [jsxRuntime.jsx("span", {
             className: "ff-current-time",
             children: formatTime(currentTime)
-          }), jsxRuntime.jsx("div", {
-            className: "ff-custom-slider",
+          }), jsxRuntime.jsx("input", {
+            type: "range",
+            className: "ff-seek-bar",
+            min: 0,
+            max: 100,
+            value: progress,
+            onChange: e => handleSeek(parseFloat(e.target.value)),
             onClick: handleSliderClick,
-            children: jsxRuntime.jsxs("div", {
-              className: "ff-slider-track",
-              children: [jsxRuntime.jsx("div", {
-                className: "ff-slider-progress",
-                style: {
-                  width: `${progressPercentage}%`
-                }
-              }), jsxRuntime.jsx("div", {
-                className: "ff-slider-thumb",
-                style: {
-                  left: `${progressPercentage}%`
-                }
-              })]
-            })
+            onMouseDown: handleMouseDown,
+            ref: sliderRef
           }), jsxRuntime.jsx("span", {
             className: "ff-total-time",
             children: formatTime(duration)