box-content-preview 3.106.0 → 3.107.0

package/dist/lib/index.js

@@ -1032,7 +1032,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
 const CLIENT_NAME_KEY = 'box_client_name';
 const CLIENT_VERSION_KEY = 'box_client_version';
-const CLIENT_VERSION = "3.106.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.107.0"; // eslint-disable-line no-undef
 const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
 const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
 const PROMISE_MAP = {};
@@ -6185,6 +6185,14 @@ function devicePixelWidth(widthCssPx) {
   const pixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
   return widthCssPx * pixelRatio;
 }
+
+/** Dragged time while media is still at the pre-drag position. */
+function pinnedPlayheadSec(pin, mediaTimeSec) {
+  if (pin && Math.abs(mediaTimeSec - pin.fromSec) <= 0.001 && Math.abs(mediaTimeSec - pin.sec) > 0.001) {
+    return pin.sec;
+  }
+  return null;
+}
 function WaveformView_prefersReducedMotion() {
   return typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
@@ -6343,9 +6351,9 @@ function WaveformView({
   const containerRef = (0,external_react_.useRef)(null); // WaveSurfer canvas host
   const playheadAnimationRef = (0,external_react_.useRef)(0); // animation frame id while the playhead follows playback
   const playheadRef = (0,external_react_.useRef)(null); // playhead element the camera positions
+  const rangeLayerRef = (0,external_react_.useRef)(null);
   const trackRef = (0,external_react_.useRef)(null); // hover / tap target around the canvas
   const wavesurferRef = (0,external_react_.useRef)(null); // WaveSurfer instance
-  const rangeLayerRef = (0,external_react_.useRef)(null);
 
   // Latest props for WaveSurfer + media listeners that must not re-subscribe each render.
   const cameraModeRef = (0,external_react_.useRef)(cameraMode); // latest tape/desktop; WaveSurfer create() deps stay empty
@@ -6356,10 +6364,10 @@ function WaveformView({
   const isPlayingRef = (0,external_react_.useRef)(isPlaying); // latest isPlaying; tape tap toggles from this
   const mediaElRef = (0,external_react_.useRef)(mediaEl); // latest <audio>/<video>; camera + playhead tick read this
   const onPlayPauseRef = (0,external_react_.useRef)(onPlayPause); // latest play/pause; tape tap must not re-bind
-  const onSeekRef = (0,external_react_.useRef)(onSeek); // latest onSeek; click/scroll handlers must not re-bind
   const onRangeChangeRef = (0,external_react_.useRef)(onRangeChange); // latest range commit; drag-create must not re-bind
   const onRangeClearRef = (0,external_react_.useRef)(onRangeClear); // latest click-outside clear; WaveSurfer click must not re-bind
   const onRangeDragChangeRef = (0,external_react_.useRef)(onRangeDragChange); // latest drag flag; unmount must not re-bind
+  const onSeekRef = (0,external_react_.useRef)(onSeek); // latest onSeek; click/scroll handlers must not re-bind
   const onViewportChangeRef = (0,external_react_.useRef)(onViewportChange); // latest viewport callback; camera commits here
   const peaksRef = (0,external_react_.useRef)(peaks); // latest peaks; WaveSurfer create() + morph read this
 
@@ -6370,9 +6378,12 @@ function WaveformView({
   const bufferProgressRef = (0,external_react_.useRef)(0); // latest buffer fill; zoomed tile tint reads this
   const hideScrubTimeChipTimerRef = (0,external_react_.useRef)(0); // hides the tape scrub time chip after scroll settles
   const hoverProgressRef = (0,external_react_.useRef)(null); // latest hover fill; zoomed tile tint reads this
+  const isPlayheadDraggingRef = (0,external_react_.useRef)(false); // playhead drag owns position until pointerup
   const lastObservedWidthRef = (0,external_react_.useRef)(0); // last ResizeObserver width; skip no-op resizes
   const liveHeightRef = (0,external_react_.useRef)(height); // canvas height last applied to WaveSurfer
   const pinchStartRef = (0,external_react_.useRef)(null); // two-finger distance and zoom at pinch start
+  const playheadDragRef = (0,external_react_.useRef)(null); // active playhead drag; pointerup seeks
+  const playheadPinRef = (0,external_react_.useRef)(null); // dragged time until media/props catch up
   const pointerZoomClearTimerRef = (0,external_react_.useRef)(0); // clears pointerZoomRef after WAVEFORM_ZOOM_DISMISS_MS
   const pointerZoomRef = (0,external_react_.useRef)(false); // pinch/wheel in progress; skip play/pause and tape recenter
   const queuedTapeSeekTimeSecRef = (0,external_react_.useRef)(null); // seek time waiting for the next animation frame
@@ -6385,16 +6396,18 @@ function WaveformView({
   const zoomOriginRef = (0,external_react_.useRef)(null); // pointer+time so zoom keeps that point fixed
 
   cameraModeRef.current = cameraMode;
-  currentTimeRef.current = currentTime;
+  if (!isPlayheadDraggingRef.current && playheadPinRef.current == null) {
+    currentTimeRef.current = currentTime;
+  }
   durationSecRef.current = durationSec;
   interactiveRef.current = interactive;
   isPlayingRef.current = isPlaying;
   mediaElRef.current = mediaEl;
   onPlayPauseRef.current = onPlayPause;
-  onSeekRef.current = onSeek;
   onRangeChangeRef.current = onRangeChange;
   onRangeClearRef.current = onRangeClear;
   onRangeDragChangeRef.current = onRangeDragChange;
+  onSeekRef.current = onSeek;
   onViewportChangeRef.current = onViewportChange;
   peaksRef.current = peaks;
   const [internalZoom, setInternalZoom] = (0,external_react_.useState)(constants/* WAVEFORM_ZOOM_MIN */.LW);
@@ -6406,15 +6419,16 @@ function WaveformView({
   const [previewRange, setPreviewRange] = (0,external_react_.useState)(null);
   const [createRange, setCreateRange] = (0,external_react_.useState)(null);
   const [isRangeDragging, setIsRangeDragging] = (0,external_react_.useState)(false);
-  const isRangeDraggingRef = (0,external_react_.useRef)(false);
-  const rangeRef = (0,external_react_.useRef)(range); // latest committed draft; drag-create must not start on top of an open span
+  const [isPlayheadDragging, setIsPlayheadDragging] = (0,external_react_.useState)(false);
   const createDragRef = (0,external_react_.useRef)(null);
-  const tapeRangeHoldRef = (0,external_react_.useRef)(false); // a tape long-press is waiting to draw; touch must not scroll
+  const isRangeDraggingRef = (0,external_react_.useRef)(false);
+  const lastSetTimeSecRef = (0,external_react_.useRef)(null);
   const rangeDragPointerXRef = (0,external_react_.useRef)(null); // clientX while a handle or create-drag is down
+  const rangeRef = (0,external_react_.useRef)(range); // latest committed draft; drag-create must not start on top of an open span
   const removeCreateDragListenersRef = (0,external_react_.useRef)(null);
   const removeTapeContextMenuRef = (0,external_react_.useRef)(null);
   const skipNextSeekRef = (0,external_react_.useRef)(false); // ignore the click fired when a handle is released
-  const lastSetTimeSecRef = (0,external_react_.useRef)(null);
+  const tapeRangeHoldRef = (0,external_react_.useRef)(false); // a tape long-press is waiting to draw; touch must not scroll
   const [isRangeHovered, setIsRangeHovered] = (0,external_react_.useState)(false);
   const isControlled = typeof zoomLevelProp === 'number';
   const maxZoom = (0,waveform_viewport/* getWaveformZoomMax */.by)({
@@ -6849,7 +6863,17 @@ function WaveformView({
     applyZoomWindow();
   }, [applyZoomWindow]);
   (0,external_react_.useLayoutEffect)(() => {
-    updatePlayheadPosition(mediaEl ? mediaEl.currentTime : currentTime);
+    if (isPlayheadDraggingRef.current) {
+      return;
+    }
+    const mediaTimeSec = mediaEl ? mediaEl.currentTime : currentTime;
+    const draggedTimeSec = pinnedPlayheadSec(playheadPinRef.current, mediaTimeSec);
+    if (draggedTimeSec != null) {
+      updatePlayheadPosition(draggedTimeSec);
+      return;
+    }
+    playheadPinRef.current = null;
+    updatePlayheadPosition(mediaTimeSec);
   }, [currentTime, durationSec, mediaEl, updatePlayheadPosition, viewport]);
   (0,external_react_.useEffect)(() => {
     const media = mediaEl;
@@ -6857,10 +6881,15 @@ function WaveformView({
       return undefined;
     }
     const tick = () => {
-      if (!media.paused) {
-        updatePlayheadPosition(media.currentTime);
-        if (!isRangeDraggingRef.current) {
-          applyPlayheadCamera(media.currentTime, false);
+      if (!media.paused && !isPlayheadDraggingRef.current) {
+        const mediaTimeSec = media.currentTime;
+        const draggedTimeSec = pinnedPlayheadSec(playheadPinRef.current, mediaTimeSec);
+        if (draggedTimeSec == null) {
+          playheadPinRef.current = null;
+        }
+        updatePlayheadPosition(draggedTimeSec ?? mediaTimeSec);
+        if (draggedTimeSec == null && !isRangeDraggingRef.current) {
+          applyPlayheadCamera(mediaTimeSec, false);
         }
       }
       playheadAnimationRef.current = window.requestAnimationFrame(tick);
@@ -6868,7 +6897,7 @@ function WaveformView({
     const startLoop = () => {
       window.cancelAnimationFrame(playheadAnimationRef.current);
       releaseUserPanHold();
-      if (!isRangeDraggingRef.current) {
+      if (!isRangeDraggingRef.current && !isPlayheadDraggingRef.current) {
         applyPlayheadCamera(media.currentTime, true);
       }
       playheadAnimationRef.current = window.requestAnimationFrame(tick);
@@ -6881,9 +6910,15 @@ function WaveformView({
         clearFollowPin();
       }
       syncViewport();
-      updatePlayheadPosition(media.currentTime);
+      if (!isPlayheadDraggingRef.current) {
+        updatePlayheadPosition(media.currentTime);
+      }
     };
     const handleSeeked = () => {
+      if (isPlayheadDraggingRef.current) {
+        return;
+      }
+      playheadPinRef.current = null;
       onPlayheadSeek(media.currentTime);
       if (!isUserPanning() && !isRangeDraggingRef.current) {
         seekTo(media.currentTime);
@@ -6947,15 +6982,19 @@ function WaveformView({
     });
     if (isScrollableWindow) {
       tintZoomedWaveform(wavesurfer, fills);
-      return;
+    } else {
+      wavesurfer.setOptions({
+        progressColor: toCanvasFill(fills.progressColor, devicePixelWidth(canvasWidthPx)),
+        waveColor: toCanvasFill(fills.waveColor, devicePixelWidth(canvasWidthPx))
+      });
     }
-    wavesurfer.setOptions({
-      progressColor: toCanvasFill(fills.progressColor, devicePixelWidth(canvasWidthPx)),
-      waveColor: toCanvasFill(fills.waveColor, devicePixelWidth(canvasWidthPx))
-    });
-    lastSetTimeSecRef.current = currentTimeRef.current;
-    wavesurfer.setTime(currentTimeRef.current);
-  }, [activeRangeProgress, bufferProgress, canvasWidthPx, hoverProgress, isRangeDragging, isScrollableWindow, isTape, isZoomed]);
+    if (!isScrollableWindow || isPlayheadDragging) {
+      // WaveSurfer clips progressColor left of this time.
+      const playedUntilSec = isPlayheadDragging && hoverProgress != null ? hoverProgress * durationSecRef.current : currentTimeRef.current;
+      lastSetTimeSecRef.current = playedUntilSec;
+      wavesurfer.setTime(playedUntilSec);
+    }
+  }, [activeRangeProgress, bufferProgress, canvasWidthPx, hoverProgress, isPlayheadDragging, isRangeDragging, isScrollableWindow, isTape, isZoomed]);
   (0,external_react_.useEffect)(() => {
     const track = trackRef.current;
     if (!track) {
@@ -7068,6 +7107,9 @@ function WaveformView({
     setHoverProgress(Math.min(1, Math.max(0, pointerX / rect.width)));
   }, [durationSec, interactive, isTape]);
   const onHoverLeave = (0,external_react_.useCallback)(() => {
+    if (isPlayheadDraggingRef.current) {
+      return;
+    }
     setHoverProgress(null);
     setIsRangeHovered(false);
   }, []);
@@ -7114,10 +7156,10 @@ function WaveformView({
       hasPreviousFrame = true;
       previousFrameMs = frameMs;
       const pointer = getPointerInTrack();
-      const viewport = viewportRef.current;
+      const currentViewport = viewportRef.current;
       const scrollDeltaPx = pointer ? (0,waveform_viewport/* getRangeEdgeScrollDeltaPx */.CD)({
         elapsedSec,
-        pixelsPerSecond: viewport.pixelsPerSecond,
+        pixelsPerSecond: currentViewport.pixelsPerSecond,
         pointerX: pointer.x,
         widthPx: pointer.width
       }) : null;
@@ -7125,8 +7167,8 @@ function WaveformView({
         pendingScrollPx = 0;
       } else {
         pendingScrollPx += scrollDeltaPx;
-        const nextScroll = Math.min((0,waveform_viewport/* maxScrollLeft */.d0)(viewport), Math.max(0, viewport.scrollLeftPx + pendingScrollPx));
-        const scrolledPx = nextScroll - viewport.scrollLeftPx;
+        const nextScroll = Math.min((0,waveform_viewport/* maxScrollLeft */.d0)(currentViewport), Math.max(0, currentViewport.scrollLeftPx + pendingScrollPx));
+        const scrolledPx = nextScroll - currentViewport.scrollLeftPx;
         pendingScrollPx = scrolledPx === 0 ? 0 : pendingScrollPx - scrolledPx;
         if (scrolledPx !== 0) {
           applyScrollLeft(nextScroll, true);
@@ -7152,6 +7194,9 @@ function WaveformView({
         createDragRef.current = null;
         onRangeDragChangeRef.current?.(false);
       }
+      isPlayheadDraggingRef.current = false;
+      playheadDragRef.current = null;
+      playheadPinRef.current = null;
     };
   }, []);
   (0,external_react_.useLayoutEffect)(() => {
@@ -7251,7 +7296,7 @@ function WaveformView({
     const {
       target
     } = event;
-    if (target instanceof Element && target.closest('.bp-WaveformRange-handle, .bp-WaveformRange-comment')) {
+    if (target instanceof Element && target.closest('.bp-WaveformRange-handle, .bp-WaveformRange-comment, .bp-WaveformView-playhead--draggable')) {
       return;
     }
     const drag = rangeCreateDragFromEvent(event, {
@@ -7350,6 +7395,112 @@ function WaveformView({
   const isOverlayReadOnly = rangeReadOnly && createRange == null;
   const showPlayheadComment = interactive && !isPlaying && !isRangeDragging && (0,waveform_range/* isRangeCollapsed */.BT)(overlayRange) && Boolean(onPlayheadComment);
   const showRangeOverlay = Boolean(overlayRange) && (isRangeDragging || !isPlaying || !(0,waveform_range/* isRangeCollapsed */.BT)(overlayRange));
+  const canDragPlayhead = interactive && !isTape;
+
+  /** Media time under a pointer X on the waveform track. */
+  const mediaTimeFromClientX = clientX => {
+    const track = trackRef.current;
+    if (!track || !(durationSecRef.current > 0) || !Number.isFinite(clientX)) {
+      return null;
+    }
+    const rect = track.getBoundingClientRect();
+    if (!(rect.width > 0)) {
+      return null;
+    }
+    const pointerX = clientX - rect.left;
+    const currentViewport = viewportRef.current;
+    const unclampedTimeSec = currentViewport.pixelsPerSecond > 0 ? (0,waveform_viewport/* timeFromPositionPx */.lZ)(pointerX, currentViewport) : pointerX / rect.width * durationSecRef.current;
+    return Number.isFinite(unclampedTimeSec) ? Math.min(durationSecRef.current, Math.max(0, unclampedTimeSec)) : null;
+  };
+
+  /** CSS playhead + hover fills at timeSec; media seek waits for pointerup. */
+  const showDraggedPlayhead = timeSec => {
+    const playhead = playheadRef.current;
+    if (!playhead) {
+      return;
+    }
+    const drag = playheadDragRef.current;
+    playheadPinRef.current = {
+      fromSec: drag?.fromSec ?? timeSec,
+      sec: timeSec
+    };
+    playhead.style.left = (0,waveform_viewport/* timeLeftPercent */.Mu)(timeSec, durationSecRef.current, viewportRef.current);
+    setHoverProgress(timeSec / durationSecRef.current);
+  };
+  const onPlayheadPointerDown = event => {
+    if (event.target instanceof Element && event.target.closest('.bp-WaveformView-playheadComment')) {
+      return;
+    }
+    if (!canDragPlayhead || event.button > 0 || event.ctrlKey || event.metaKey || isRangeDraggingRef.current) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    try {
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+    } catch {
+      return; // Don't start a drag we cannot track after the pointer leaves.
+    }
+    const fromSec = mediaElRef.current ? mediaElRef.current.currentTime : currentTimeRef.current;
+    playheadDragRef.current = {
+      fromSec,
+      pointerId: event.pointerId
+    };
+    playheadPinRef.current = {
+      fromSec,
+      sec: fromSec
+    };
+    isPlayheadDraggingRef.current = true;
+    setIsPlayheadDragging(true);
+    setHoverProgress(durationSecRef.current > 0 ? fromSec / durationSecRef.current : null);
+    clearFollowPin();
+    cancelJump();
+  };
+  const onPlayheadPointerMove = event => {
+    const drag = playheadDragRef.current;
+    if (!drag || event.pointerId !== drag.pointerId) {
+      return;
+    }
+    const timeSec = mediaTimeFromClientX(event.clientX);
+    if (timeSec == null) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    showDraggedPlayhead(timeSec);
+  };
+  const onPlayheadPointerUp = event => {
+    const drag = playheadDragRef.current;
+    if (!drag || event.pointerId !== drag.pointerId) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const timeSec = mediaTimeFromClientX(event.clientX) ?? playheadPinRef.current?.sec;
+    if (timeSec != null) {
+      playheadPinRef.current = {
+        fromSec: drag.fromSec,
+        sec: timeSec
+      };
+      currentTimeRef.current = timeSec;
+    }
+    playheadDragRef.current = null;
+    isPlayheadDraggingRef.current = false;
+    setIsPlayheadDragging(false);
+    if (event.type !== 'lostpointercapture') {
+      try {
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+      } catch {
+        // Capture was never set or already lost.
+      }
+    }
+    if (timeSec == null) {
+      return;
+    }
+    onPlayheadSeek(timeSec);
+    updatePlayheadPosition(timeSec);
+    onSeekRef.current?.(timeSec);
+  };
   const scrubTimeChip = isTape && scrubPreviewTimeSec != null ? /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-WaveformView-hover bp-WaveformView-hover--tape",
     "data-testid": "bp-waveform-hover"
@@ -7361,6 +7512,7 @@ function WaveformView({
     ref: bindOverlayPortalHost,
     className: classnames_default()('bp-WaveformView', {
       'bp-WaveformView--inert': !interactive,
+      'bp-WaveformView--playheadDragging': isPlayheadDragging,
       'bp-WaveformView--tape': isTape,
       'bp-WaveformView--zoomed': isZoomed
     }),
@@ -7389,8 +7541,16 @@ function WaveformView({
     className: "bp-WaveformView-canvas"
   }), /*#__PURE__*/external_react_["default"].createElement("div", {
     ref: playheadRef,
-    className: "bp-WaveformView-playhead",
-    "data-testid": "bp-waveform-playhead"
+    className: classnames_default()('bp-WaveformView-playhead', {
+      'bp-WaveformView-playhead--draggable': canDragPlayhead
+    }),
+    "data-target-id": canDragPlayhead ? 'Waveform-dragPlayhead' : undefined,
+    "data-testid": "bp-waveform-playhead",
+    onLostPointerCapture: onPlayheadPointerUp,
+    onPointerCancel: onPlayheadPointerUp,
+    onPointerDown: onPlayheadPointerDown,
+    onPointerMove: onPlayheadPointerMove,
+    onPointerUp: onPlayheadPointerUp
   }, showPlayheadComment && /*#__PURE__*/external_react_["default"].createElement("button", {
     className: "bp-WaveformRange-comment bp-WaveformView-playheadComment",
     "data-target-id": "Waveform-commentAtTime",
@@ -25204,7 +25364,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.106.0";
+const CLIENT_VERSION = "3.107.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -45512,14 +45672,14 @@ function GalleryGrid({
   function syncHighRes() {
     const store = highResStoreRef.current;
     const {
-      pageRatio
+      pageRatio: thumbnailPageRatio
     } = thumbnail;
-    if (!store || !pageRatio) return;
+    if (!store || !thumbnailPageRatio) return;
     const width = getNeededThumbWidth();
     if (width === GALLERY_THUMB_MAX_WIDTH) {
-      store.setRetained([], width, pageRatio);
+      store.setRetained([], width, thumbnailPageRatio);
     } else if (!isProcessingRef.current) {
-      store.setRetained(getPagesNearViewport(0.5), width, pageRatio);
+      store.setRetained(getPagesNearViewport(0.5), width, thumbnailPageRatio);
     }
   }
   function getUnloadedNearViewport() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-content-preview",
-    "version": "3.106.0",
+    "version": "3.107.0",
     "description": "Box Content Preview UI Element",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -47,6 +47,7 @@
     },
     "devDependencies": {
         "@babel/core": "^7.18.6",
+        "@babel/eslint-parser": "^7.24.1",
         "@babel/plugin-proposal-class-properties": "^7.18.6",
         "@babel/plugin-proposal-object-rest-spread": "^7.18.6",
         "@babel/plugin-transform-object-assign": "^7.18.6",
@@ -55,7 +56,7 @@
         "@babel/preset-typescript": "^7.18.6",
         "@box/blueprint-web": "^17.11.3",
         "@box/blueprint-web-assets": "^5.10.10",
-        "@box/frontend": "^6.4.0",
+        "@box/frontend": "^11.0.1",
         "@box/languages": "^1.0.0",
         "@box/react-virtualized": "9.22.3-rc-box.2",
         "@commitlint/cli": "^19.8.0",
@@ -70,8 +71,8 @@
         "@types/lodash": "^4.14.149",
         "@types/react": "18.3.1",
         "@types/react-dom": "18.3.1",
-        "@typescript-eslint/eslint-plugin": "^5.60.1",
-        "@typescript-eslint/parser": "^5.60.1",
+        "@typescript-eslint/eslint-plugin": "^7.3.1",
+        "@typescript-eslint/parser": "^7.3.1",
         "autoprefixer": "^10.4.21",
         "axios": "^0.34.0",
         "babel-jest": "^29.7.0",
@@ -87,21 +88,17 @@
         "css-loader": "^6.11.0",
         "css-minimizer-webpack-plugin": "^8.0.0",
         "cypress": "^15.20.1",
-        "eslint": "^8.43.0",
-        "eslint-config-airbnb": "^18.0.1",
-        "eslint-config-prettier": "^6.7.0",
-        "eslint-plugin-babel": "^5.3.0",
+        "eslint": "^8.57.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-chai-friendly": "^0.4.1",
         "eslint-plugin-cypress": "^2.8.1",
-        "eslint-plugin-flowtype": "^8.0.3",
-        "eslint-plugin-formatjs": "^1.5.4",
-        "eslint-plugin-import": "^2.19.1",
-        "eslint-plugin-jest": "^23.1.1",
-        "eslint-plugin-jsx-a11y": "^6.2.3",
-        "eslint-plugin-lodash": "^6.0.0",
-        "eslint-plugin-prettier": "5.2.3",
-        "eslint-plugin-react": "^7.17.0",
-        "eslint-plugin-react-hooks": "^1.7.0",
+        "eslint-plugin-formatjs": "^4.12.2",
+        "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-jsx-a11y": "^6.8.0",
+        "eslint-plugin-lodash": "^7.4.0",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-react-hooks": "^4.6.0",
         "file-loader": "^6.2.0",
         "fscreen": "^1.0.2",
         "husky": "^3.1.0",
@@ -128,9 +125,10 @@
         "sinon": "^9.0.3",
         "style-loader": "^4.0.0",
         "stylelint": "^16.26.1",
+        "stylelint-config-clean-order": "7.0.0",
         "stylelint-config-standard": "^38.0.0",
-        "stylelint-config-standard-scss": "^14.0.0",
-        "stylelint-order": "^6.0.4",
+        "stylelint-config-standard-scss": "^15.0.1",
+        "stylelint-order": "^7.0.0",
         "terser": "^5.31.0",
         "terser-webpack-plugin": "^5.3.14",
         "typescript": "^5.0.4",
@@ -160,8 +158,8 @@
         "cy:wait": "wait-on http-get://127.0.0.1:8000",
         "lint": "npm-run-all lint:*",
         "lint:css": "NODE_ENV=dev yarn stylelint 'src/lib/**/*.scss' 'src/components/**/*.scss' 'src/hooks/**/*.scss'",
-        "lint:js": "NODE_ENV=dev yarn eslint src/lib src/components src/hooks",
-        "lint:ts": "tsc && eslint --ext=.tsx,.ts --max-warnings=0 .",
+        "lint:js": "eslint --max-warnings=0 src cypress.config.ts",
+        "lint:ts": "tsc",
         "release": "yarn setup && yarn clean && yarn build:i18n && yarn lint && yarn test && yarn build:prod",
         "release:major": "./build/release.sh -m",
         "release:minor": "./build/release.sh -n",