@uncinc/uncinc-react-kitchen-sink 2.23.1 → 2.24.0

package/dist/components/Form/Checkbox/index.js

@@ -19,7 +19,8 @@ export var Checkbox = function Checkbox(props) {
     className = props.className,
     wrapperClassName = props.wrapperClassName,
     disabled = props.disabled,
-    id = props.id;
+    id = props.id,
+    descriptionAboveInput = props.descriptionAboveInput;
   var _useExtendedFormikCon = useExtendedFormikContext(),
     values = _useExtendedFormikCon.values,
     errors = _useExtendedFormikCon.errors,
@@ -49,7 +50,8 @@ export var Checkbox = function Checkbox(props) {
     error: error,
     errorId: errorId,
     descriptionId: descriptionId,
-    displayRequiredIndicator: displayRequiredIndicator
+    displayRequiredIndicator: displayRequiredIndicator,
+    descriptionAboveInput: descriptionAboveInput
   }, /*#__PURE__*/React.createElement(Field, {
     required: required,
     name: fieldName,

package/dist/components/Form/Checkboxes/index.js

@@ -125,7 +125,8 @@ var Checkboxes = function Checkboxes(props) {
     otherLabel = props.otherLabel,
     otherPlaceholder = props.otherPlaceholder,
     onChange = props.onChange,
-    includeFieldSet = props.includeFieldSet;
+    includeFieldSet = props.includeFieldSet,
+    descriptionAboveInput = props.descriptionAboveInput;
   var _useExtendedFormikCon = useExtendedFormikContext(),
     errors = _useExtendedFormikCon.errors,
     touched = _useExtendedFormikCon.touched,
@@ -156,7 +157,8 @@ var Checkboxes = function Checkboxes(props) {
     isTouched: isTouched,
     descriptionId: descriptionId,
     displayRequiredIndicator: displayRequiredIndicator,
-    includeFieldSet: includeFieldSet
+    includeFieldSet: includeFieldSet,
+    descriptionAboveInput: descriptionAboveInput
   }, Object.keys(options).map(function (item) {
     var label = _typeof(options[item]) === 'object' ? options[item].label : options[item];
     var value = _typeof(options[item]) === 'object' ? options[item].value : item;

package/dist/components/PDFReader/index.d.ts

@@ -15,6 +15,7 @@ export declare interface PDFReaderProps {
     height?: number;
     dualPageWidthThreshold?: number;
     defaultScale?: number;
+    scrollable?: boolean;
 }
 declare const PDFReader: React.FC<PDFReaderProps>;
 export default PDFReader;

package/dist/components/PDFReader/index.lazy.js

@@ -1,3 +1,9 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -9,6 +15,7 @@ import { Document, Page, pdfjs } from 'react-pdf';
 // @ts-ignore
 import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
 import ControlPanel from './ControlPanel';
+import useScrollablePDF from './useScrollablePDF';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import useWindowDimensions from '../../hooks/useWindowDimensions';
@@ -31,7 +38,10 @@ var PDFReader = function PDFReader(_ref) {
     dualPageWidthThreshold = _ref.dualPageWidthThreshold,
     _ref$defaultScale = _ref.defaultScale,
     defaultScale = _ref$defaultScale === void 0 ? 1.0 : _ref$defaultScale,
-    downloadName = _ref.downloadName;
+    downloadName = _ref.downloadName,
+    _ref$scrollable = _ref.scrollable,
+    scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable;
+  // Common state
   var _useState = useState(defaultScale),
     _useState2 = _slicedToArray(_useState, 2),
     scale = _useState2[0],
@@ -44,18 +54,37 @@ var PDFReader = function PDFReader(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     pageNumber = _useState6[0],
     setPageNumber = _useState6[1];
+  var _useWindowDimensions = useWindowDimensions(),
+    windowWidth = _useWindowDimensions.width;
+
+  // Paginated mode state
   var _useState7 = useState(1),
     _useState8 = _slicedToArray(_useState7, 2),
     renderedPageNumber = _useState8[0],
     setRenderedPageNumber = _useState8[1];
-  var _useWindowDimensions = useWindowDimensions(),
-    windowWidth = _useWindowDimensions.width;
   var isLoading = renderedPageNumber !== pageNumber;
+  var showDualPage = !scrollable && dualPageWidthThreshold ? windowWidth > dualPageWidthThreshold : false;
+
+  // Scrollable mode hook
+  var _useScrollablePDF = useScrollablePDF({
+      scrollable: scrollable,
+      numPages: numPages,
+      scale: scale,
+      width: width,
+      setScale: setScale,
+      setPageNumber: setPageNumber
+    }),
+    scrollContainerRef = _useScrollablePDF.scrollContainerRef,
+    visiblePages = _useScrollablePDF.visiblePages,
+    estimatedPageHeight = _useScrollablePDF.estimatedPageHeight,
+    handleSetScale = _useScrollablePDF.handleSetScale,
+    handleSetPageNumber = _useScrollablePDF.handleSetPageNumber;
   var onDocumentLoadSuccess = function onDocumentLoadSuccess(_ref2) {
     var numPagesTemp = _ref2.numPages;
     setNumPages(numPagesTemp);
   };
-  var showDualPage = dualPageWidthThreshold ? windowWidth > dualPageWidthThreshold : false;
+
+  // Paginated mode: render page with loading transition
   var renderPage = function renderPage(pageNumberToRender, isPageLoading, renderedPageNum) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, isPageLoading && renderedPageNum ? /*#__PURE__*/React.createElement(Page, {
       key: renderedPageNum,
@@ -75,12 +104,56 @@ var PDFReader = function PDFReader(_ref) {
       }
     }));
   };
+
+  // Scrollable mode: render all pages in a scroll container with lazy loading
+  var renderScrollablePages = function renderScrollablePages() {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: scrollContainerRef,
+      className: "PDFReader__scrollContainer",
+      style: {
+        overflow: 'auto',
+        maxHeight: '80vh',
+        width: '100%',
+        WebkitOverflowScrolling: 'touch'
+      }
+    }, Array.from({
+      length: numPages
+    }, function (_, i) {
+      return i + 1;
+    }).map(function (pageNum) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: pageNum,
+        "data-page-number": pageNum,
+        className: "PDFReader__pageWrapper",
+        style: _objectSpread({
+          marginBottom: pageNum < numPages ? '8px' : undefined
+        }, !visiblePages.has(pageNum) ? {
+          height: "".concat(estimatedPageHeight, "px")
+        } : {})
+      }, visiblePages.has(pageNum) && /*#__PURE__*/React.createElement(Page, {
+        pageNumber: pageNum,
+        scale: scale,
+        width: width,
+        height: height
+      }));
+    }));
+  };
+
+  // Paginated mode: render single or dual page view
+  var renderPaginatedPages = function renderPaginatedPages() {
+    if (showDualPage) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "PDFReader__dualPage"
+      }, renderPage(pageNumber, isLoading, renderedPageNumber), pageNumber < numPages && renderPage(pageNumber + 1, isLoading, renderedPageNumber + 1));
+    }
+    return renderPage(pageNumber, isLoading, renderedPageNumber);
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ControlPanel, {
     scale: scale,
-    setScale: setScale,
+    setScale: handleSetScale,
     numPages: numPages,
     pageNumber: pageNumber,
-    setPageNumber: setPageNumber,
+    setPageNumber: handleSetPageNumber,
     file: url,
     goToFirstPageButton: goToFirstPageButton,
     goToPreviousPageButton: goToPreviousPageButton,
@@ -97,8 +170,6 @@ var PDFReader = function PDFReader(_ref) {
     onLoadSuccess: onDocumentLoadSuccess,
     onLoadError: console.error,
     loading: loader
-  }, showDualPage ? /*#__PURE__*/React.createElement("div", {
-    className: "PDFReader__dualPage"
-  }, renderPage(pageNumber, isLoading, renderedPageNumber), pageNumber < numPages && renderPage(pageNumber + 1, isLoading, renderedPageNumber + 1)) : renderPage(pageNumber, isLoading, renderedPageNumber)));
+  }, scrollable ? renderScrollablePages() : renderPaginatedPages()));
 };
 export default PDFReader;

package/dist/components/PDFReader/useScrollablePDF.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+interface UseScrollablePDFOptions {
+    scrollable: boolean;
+    numPages: number;
+    scale: number;
+    width?: number;
+    setScale: (scale: number) => void;
+    setPageNumber: (page: number) => void;
+}
+/**
+ * Encapsulates all scrollable PDF viewer logic:
+ * - IntersectionObserver for lazy page rendering
+ * - Scroll-driven page tracking
+ * - Zoom scroll position preservation
+ * - Scroll-to-page on page input change
+ *
+ * When `scrollable` is false, all handlers are pass-through (no-op wrappers).
+ */
+declare const useScrollablePDF: ({ scrollable, numPages, scale, width, setScale, setPageNumber, }: UseScrollablePDFOptions) => {
+    scrollContainerRef: import("react").RefObject<HTMLDivElement>;
+    visiblePages: Set<number>;
+    estimatedPageHeight: number;
+    handleSetScale: (newScale: number) => void;
+    handleSetPageNumber: (page: number) => void;
+};
+export default useScrollablePDF;

package/dist/components/PDFReader/useScrollablePDF.js

@@ -0,0 +1,157 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useRef, useEffect, useCallback, useMemo, useState } from 'react';
+var A4_RATIO = 297 / 210;
+/**
+ * Encapsulates all scrollable PDF viewer logic:
+ * - IntersectionObserver for lazy page rendering
+ * - Scroll-driven page tracking
+ * - Zoom scroll position preservation
+ * - Scroll-to-page on page input change
+ *
+ * When `scrollable` is false, all handlers are pass-through (no-op wrappers).
+ */
+var useScrollablePDF = function useScrollablePDF(_ref) {
+  var scrollable = _ref.scrollable,
+    numPages = _ref.numPages,
+    scale = _ref.scale,
+    width = _ref.width,
+    setScale = _ref.setScale,
+    setPageNumber = _ref.setPageNumber;
+  var DEFAULT_PAGE_WIDTH = 600;
+  var scrollContainerRef = useRef(null);
+  var observerRef = useRef(null);
+  var _useState = useState(new Set()),
+    _useState2 = _slicedToArray(_useState, 2),
+    visiblePages = _useState2[0],
+    setVisiblePages = _useState2[1];
+  var scrollRatioRef = useRef(0);
+  var isZoomingRef = useRef(false);
+  var isScrollingToPageRef = useRef(false);
+  var rafRef = useRef(0);
+
+  // Estimated page height for placeholders (A4 ratio)
+  var estimatedPageHeight = useMemo(function () {
+    var pageWidth = width || DEFAULT_PAGE_WIDTH;
+    return pageWidth * A4_RATIO;
+  }, [width]);
+
+  // IntersectionObserver: lazy-render pages in/near the viewport
+  useEffect(function () {
+    var _observerRef$current;
+    if (!scrollable || numPages === 0) return undefined;
+    var container = scrollContainerRef.current;
+    if (!container) return undefined;
+    (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 ? void 0 : _observerRef$current.disconnect();
+    var observer = new IntersectionObserver(function (entries) {
+      setVisiblePages(function (prev) {
+        var next = new Set(prev);
+        entries.forEach(function (entry) {
+          var pageNum = Number(entry.target.getAttribute('data-page-number'));
+          if (entry.isIntersecting) {
+            next.add(pageNum);
+          } else {
+            next.delete(pageNum);
+          }
+        });
+        return next;
+      });
+    }, {
+      root: container,
+      rootMargin: '200% 0px',
+      threshold: 0
+    });
+    observerRef.current = observer;
+    container.querySelectorAll('[data-page-number]').forEach(function (el) {
+      observer.observe(el);
+    });
+    return function () {
+      return observer.disconnect();
+    };
+  }, [scrollable, numPages]);
+
+  // Scroll handler: track which page is currently most visible
+  useEffect(function () {
+    if (!scrollable || numPages === 0) return undefined;
+    var container = scrollContainerRef.current;
+    if (!container) return undefined;
+    var handleScroll = function handleScroll() {
+      if (isScrollingToPageRef.current) return;
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(function () {
+        var containerRect = container.getBoundingClientRect();
+        var containerMidY = containerRect.top + containerRect.height / 2;
+        var closestPage = 1;
+        var closestDistance = Infinity;
+        container.querySelectorAll('[data-page-number]').forEach(function (el) {
+          var rect = el.getBoundingClientRect();
+          var pageMidY = rect.top + rect.height / 2;
+          var distance = Math.abs(pageMidY - containerMidY);
+          if (distance < closestDistance) {
+            closestDistance = distance;
+            closestPage = Number(el.getAttribute('data-page-number'));
+          }
+        });
+        setPageNumber(closestPage);
+      });
+    };
+    container.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return function () {
+      container.removeEventListener('scroll', handleScroll);
+      cancelAnimationFrame(rafRef.current);
+    };
+  }, [scrollable, numPages, setPageNumber]);
+
+  // Preserve scroll position after zoom
+  useEffect(function () {
+    if (!scrollable || !isZoomingRef.current) return;
+    var container = scrollContainerRef.current;
+    if (!container) return;
+    requestAnimationFrame(function () {
+      container.scrollTop = scrollRatioRef.current * container.scrollHeight;
+      isZoomingRef.current = false;
+    });
+  }, [scale, scrollable]);
+
+  // Wrapped setScale: saves scroll position before zoom change
+  var handleSetScale = useCallback(function (newScale) {
+    if (scrollable && scrollContainerRef.current) {
+      var container = scrollContainerRef.current;
+      scrollRatioRef.current = container.scrollTop / container.scrollHeight;
+      isZoomingRef.current = true;
+    }
+    setScale(newScale);
+  }, [scrollable, setScale]);
+
+  // Wrapped setPageNumber: scrolls to page in scrollable mode
+  var handleSetPageNumber = useCallback(function (page) {
+    if (scrollable && scrollContainerRef.current) {
+      isScrollingToPageRef.current = true;
+      var target = scrollContainerRef.current.querySelector("[data-page-number=\"".concat(page, "\"]"));
+      target === null || target === void 0 ? void 0 : target.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+
+      // Re-enable scroll tracking after animation completes
+      setTimeout(function () {
+        isScrollingToPageRef.current = false;
+      }, 1000);
+    }
+    setPageNumber(page);
+  }, [scrollable, setPageNumber]);
+  return {
+    scrollContainerRef: scrollContainerRef,
+    visiblePages: visiblePages,
+    estimatedPageHeight: estimatedPageHeight,
+    handleSetScale: handleSetScale,
+    handleSetPageNumber: handleSetPageNumber
+  };
+};
+export default useScrollablePDF;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.23.1",
+  "version": "2.24.0",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",