@uncinc/uncinc-react-kitchen-sink 2.25.3 → 2.26.1

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

@@ -5,7 +5,7 @@ export interface ApiAutocompleteItem {
     name: string;
     [key: string]: any;
 }
-export interface ApiAutocompleteProps<TSuggestion = ApiAutocompleteItem> extends InputProps<TSuggestion> {
+export interface ApiAutocompleteProps<TSuggestion = ApiAutocompleteItem> extends Omit<InputProps<TSuggestion>, 'value' | 'onChange'> {
     id: string;
     endpoint: string;
     placeholder?: string;
@@ -15,7 +15,8 @@ export interface ApiAutocompleteProps<TSuggestion = ApiAutocompleteItem> extends
     queryParameter?: string;
     getSuggestionValue: GetSuggestionValue<TSuggestion>;
     requestOptions?: RequestInit;
-    suggestProps: Omit<AutosuggestPropsBase<TSuggestion>, 'suggestions' | 'onSuggestionsFetchRequested' | 'onSuggestionsClearRequested' | 'getSuggestionValue' | 'renderSuggestion' | 'onSuggestionSelected' | 'inputProps'>;
+    debounce?: number;
+    suggestProps?: Omit<AutosuggestPropsBase<TSuggestion>, 'suggestions' | 'onSuggestionsFetchRequested' | 'onSuggestionsClearRequested' | 'getSuggestionValue' | 'renderSuggestion' | 'onSuggestionSelected' | 'inputProps'>;
 }
-declare const ApiAutocomplete: React.FC<ApiAutocompleteProps>;
+declare const ApiAutocomplete: <TSuggestion extends object = ApiAutocompleteItem>({ endpoint, placeholder, renderItem, defaultValue, onSelectItem, queryParameter, getSuggestionValue, requestOptions, debounce, suggestProps, ...restProps }: ApiAutocompleteProps<TSuggestion>) => React.JSX.Element;
 export default ApiAutocomplete;

package/dist/components/ApiAutocomplete/index.js

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["endpoint", "placeholder", "renderItem", "defaultValue", "onSelectItem", "queryParameter", "getSuggestionValue", "requestOptions", "suggestProps"];
+var _excluded = ["endpoint", "placeholder", "renderItem", "defaultValue", "onSelectItem", "queryParameter", "getSuggestionValue", "requestOptions", "debounce", "suggestProps"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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; }
@@ -14,11 +14,10 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Autosuggest from 'react-autosuggest';
 import getApiAutoCompleteSuggestions from '../../helpers/apiAutoComplete';
 import './style.scss';
-var currentFetch;
 var ApiAutocomplete = function ApiAutocomplete(_ref) {
   var endpoint = _ref.endpoint,
     placeholder = _ref.placeholder,
@@ -34,6 +33,7 @@ var ApiAutocomplete = function ApiAutocomplete(_ref) {
     } : _ref$getSuggestionVal,
     _ref$requestOptions = _ref.requestOptions,
     requestOptions = _ref$requestOptions === void 0 ? {} : _ref$requestOptions,
+    debounce = _ref.debounce,
     suggestProps = _ref.suggestProps,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(defaultValue || ''),
@@ -44,8 +44,22 @@ var ApiAutocomplete = function ApiAutocomplete(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     results = _useState4[0],
     setResults = _useState4[1];
+  var debounceTimeout = useRef();
+  var abortController = useRef();
+  useEffect(function () {
+    return function () {
+      return clearTimeout(debounceTimeout.current);
+    };
+  }, []);
   var getSuggestionsSetResults = function getSuggestionsSetResults(value) {
-    getApiAutoCompleteSuggestions(endpoint, queryParameter, value, requestOptions, currentFetch).then(function (data) {
+    var _abortController$curr;
+    // Supersede the request that is still in flight, so its response cannot
+    // arrive after the one we are about to make.
+    (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 ? void 0 : _abortController$curr.abort();
+    abortController.current = new AbortController();
+    getApiAutoCompleteSuggestions(endpoint, queryParameter, value, _objectSpread(_objectSpread({}, requestOptions), {}, {
+      signal: abortController.current.signal
+    })).then(function (data) {
       if (data) {
         setResults(data);
       }
@@ -57,9 +71,17 @@ var ApiAutocomplete = function ApiAutocomplete(_ref) {
     suggestions: results,
     onSuggestionsFetchRequested: function onSuggestionsFetchRequested(_ref2) {
       var value = _ref2.value;
-      getSuggestionsSetResults(value);
+      if (!debounce) {
+        getSuggestionsSetResults(value);
+        return;
+      }
+      clearTimeout(debounceTimeout.current);
+      debounceTimeout.current = setTimeout(function () {
+        getSuggestionsSetResults(value);
+      }, debounce);
     },
     onSuggestionsClearRequested: function onSuggestionsClearRequested() {
+      clearTimeout(debounceTimeout.current);
       setResults([]);
     },
     getSuggestionValue: getSuggestionValue,
@@ -75,10 +97,10 @@ var ApiAutocomplete = function ApiAutocomplete(_ref) {
     inputProps: _objectSpread(_objectSpread({}, restProps), {}, {
       placeholder: placeholder,
       value: queryInput,
-      onBlur: function onBlur(_ref5) {
-        var value = _ref5.target;
-        // @ts-ignore
-        if (!value || (value === null || value === void 0 ? void 0 : value.length) === 0) {
+      onBlur: function onBlur(event) {
+        var _ref5 = event.target,
+          value = _ref5.value;
+        if (!value || value.length === 0) {
           onSelectItem(null);
         }
       },

package/dist/helpers/apiAutoComplete.js

@@ -9,14 +9,13 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 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 abortableFetch(request, opts) {
   var controller = new AbortController();
-  var signal = controller.signal;
   return {
     abort: function abort() {
       return controller.abort();
     },
-    ready: fetch(request, _objectSpread(_objectSpread({}, opts), {}, {
-      signal: signal
-    }))
+    ready: fetch(request, _objectSpread({
+      signal: controller.signal
+    }, opts))
   };
 }
 var getApiAutoCompleteSuggestions = /*#__PURE__*/function () {
@@ -29,10 +28,7 @@ var getApiAutoCompleteSuggestions = /*#__PURE__*/function () {
           if (currentFetch) {
             currentFetch.abort();
           }
-
-          // eslint-disable-next-line no-param-reassign
-          currentFetch = abortableFetch(url, requestOptions);
-          return _context.abrupt("return", currentFetch.ready.then(function (response) {
+          return _context.abrupt("return", abortableFetch(url, requestOptions).ready.then(function (response) {
             return response.json();
           }).then(function (response) {
             return (
@@ -46,11 +42,13 @@ var getApiAutoCompleteSuggestions = /*#__PURE__*/function () {
               })
             );
           }).catch(function (e) {
-            console.warn(e);
+            if (e.name !== 'AbortError') {
+              console.warn(e);
+            }
             return null;
             // Catch the error so the browser does not output errors.
           }));
-        case 4:
+        case 3:
         case "end":
           return _context.stop();
       }

package/dist/hooks/useScrollDepth.d.ts

@@ -0,0 +1,25 @@
+/**
+ * useScrollDepth
+ *
+ * Tracks scroll depth and calls `onThreshold` once per threshold per page.
+ *
+ * Why a custom hook instead of relying on third-party scroll tracking?
+ * Most trackers capture `document.scrollHeight` once at initialisation. With
+ * client-side rendering the page height changes as content loads asynchronously,
+ * so that snapshot is too small and all percentages end up wrong.
+ *
+ * How this avoids continuous re-renders:
+ * - All mutable state lives in `useRef` — nothing in `useState`.
+ * - Scroll events are throttled to one check per animation frame via
+ *   `requestAnimationFrame`; the handler is removed on cleanup.
+ * - `ResizeObserver` keeps `documentHeight` in sync as async content renders,
+ *   without triggering React renders.
+ *
+ * @param onThreshold - Called once per threshold per page with the percentage value.
+ * @param resetKey    - Change this value on every navigation (e.g. page title or
+ *                      pathname) to reset the fired thresholds for the new page.
+ * @param thresholds  - Scroll depth percentages (%) to track.
+ *                      Defaults to [25, 50, 75, 90, 100].
+ */
+declare const useScrollDepth: (onThreshold: (threshold: number) => void, resetKey?: unknown, thresholds?: number[]) => void;
+export default useScrollDepth;

package/dist/hooks/useScrollDepth.js

@@ -0,0 +1,104 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * useScrollDepth
+ *
+ * Tracks scroll depth and calls `onThreshold` once per threshold per page.
+ *
+ * Why a custom hook instead of relying on third-party scroll tracking?
+ * Most trackers capture `document.scrollHeight` once at initialisation. With
+ * client-side rendering the page height changes as content loads asynchronously,
+ * so that snapshot is too small and all percentages end up wrong.
+ *
+ * How this avoids continuous re-renders:
+ * - All mutable state lives in `useRef` — nothing in `useState`.
+ * - Scroll events are throttled to one check per animation frame via
+ *   `requestAnimationFrame`; the handler is removed on cleanup.
+ * - `ResizeObserver` keeps `documentHeight` in sync as async content renders,
+ *   without triggering React renders.
+ *
+ * @param onThreshold - Called once per threshold per page with the percentage value.
+ * @param resetKey    - Change this value on every navigation (e.g. page title or
+ *                      pathname) to reset the fired thresholds for the new page.
+ * @param thresholds  - Scroll depth percentages (%) to track.
+ *                      Defaults to [25, 50, 75, 90, 100].
+ */
+var useScrollDepth = function useScrollDepth(onThreshold, resetKey) {
+  var thresholds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [25, 50, 75, 90, 100];
+  // Tracks which thresholds have already fired for the current page.
+  // useRef so mutations never trigger a re-render.
+  var firedThresholds = useRef(new Set());
+  var rafId = useRef(null);
+  var documentHeight = useRef(0);
+  // Keep a ref to onThreshold so the effect never needs to re-run when the
+  // callback identity changes (e.g. inline arrow in parent), while still
+  // always calling the latest version.
+  var onThresholdRef = useRef(onThreshold);
+  onThresholdRef.current = onThreshold;
+  // Keep a ref to thresholds so the effect never needs to re-run when the
+  // array identity changes, while still always reading the latest value.
+  var thresholdsRef = useRef(thresholds);
+  thresholdsRef.current = thresholds;
+
+  // Reset fired thresholds on every page navigation.
+  useEffect(function () {
+    firedThresholds.current.clear();
+  }, [resetKey]);
+  useEffect(function () {
+    if (typeof window === 'undefined') return undefined;
+    var updateDocumentHeight = function updateDocumentHeight() {
+      // Use Math.max to handle cross-browser quirks (body vs documentElement).
+      documentHeight.current = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+    };
+    var checkScrollDepth = function checkScrollDepth() {
+      var scrollTop = window.scrollY;
+      var windowHeight = window.innerHeight;
+      var docHeight = documentHeight.current;
+
+      // Skip pages that fit entirely in the viewport — no meaningful depth to track.
+      if (docHeight <= windowHeight) return;
+
+      // scrollDepth = (scrollTop + viewportHeight) / documentHeight × 100
+      var scrollPercent = Math.round((scrollTop + windowHeight) / docHeight * 100);
+      thresholdsRef.current.forEach(function (threshold) {
+        if (scrollPercent >= threshold && !firedThresholds.current.has(threshold)) {
+          firedThresholds.current.add(threshold);
+          onThresholdRef.current(threshold);
+        }
+      });
+    };
+    var onScroll = function onScroll() {
+      // Gate on an active rAF so we calculate at most once per rendered frame,
+      // regardless of how fast the browser fires scroll events.
+      if (rafId.current !== null) return;
+      rafId.current = requestAnimationFrame(function () {
+        checkScrollDepth();
+        rafId.current = null;
+      });
+    };
+
+    // ResizeObserver re-measures the document whenever content loads in,
+    // keeping the height accurate as async content renders.
+    var resizeObserver = new ResizeObserver(function () {
+      updateDocumentHeight();
+      // Re-evaluate depth after a layout change; lazily-loaded content may
+      // have already scrolled us past a threshold.
+      checkScrollDepth();
+    });
+    updateDocumentHeight();
+    resizeObserver.observe(document.body);
+    window.addEventListener('scroll', onScroll, {
+      passive: true
+    });
+    return function () {
+      window.removeEventListener('scroll', onScroll);
+      resizeObserver.disconnect();
+      if (rafId.current !== null) {
+        cancelAnimationFrame(rafId.current);
+        rafId.current = null;
+      }
+    };
+  }, []); // Listeners are set up once; threshold resets are handled by the resetKey effect.
+};
+
+export default useScrollDepth;

package/dist/hooks/useScrollDepthGTM.d.ts

@@ -0,0 +1,19 @@
+/**
+ * useScrollDepthGTM
+ *
+ * Convenience hook that combines `useScrollDepth` with the GTM data layer.
+ * Pushes a `scroll_depth` event at each threshold — once per page — and
+ * resets on navigation when `resetKey` changes.
+ *
+ * Use this hook when you want GTM scroll-depth tracking out of the box.
+ * Use the underlying `useScrollDepth` directly if you need a different
+ * analytics integration or want full control over the callback.
+ *
+ * @param resetKey   - Change on every navigation (e.g. pathname or page title)
+ *                     to reset the fired thresholds for the new page.
+ * @param thresholds - Scroll depth percentages (%) to track. Defaults to
+ *                     [25, 50, 75, 90, 100], mirroring GTM's built-in Scroll
+ *                     Depth trigger.
+ */
+declare const useScrollDepthGTM: (resetKey?: unknown, thresholds?: number[]) => void;
+export default useScrollDepthGTM;

package/dist/hooks/useScrollDepthGTM.js

@@ -0,0 +1,33 @@
+// gtm.js uses dynamic property assignment that TypeScript cannot infer from
+// the source. The generated dist/helpers/gtm.d.ts contains the correct types,
+// but during tsc compilation we cast to avoid the false-positive TS2339 error.
+import gtmHelper from '../helpers/gtm';
+import useScrollDepth from './useScrollDepth';
+var gtm = gtmHelper;
+
+/**
+ * useScrollDepthGTM
+ *
+ * Convenience hook that combines `useScrollDepth` with the GTM data layer.
+ * Pushes a `scroll_depth` event at each threshold — once per page — and
+ * resets on navigation when `resetKey` changes.
+ *
+ * Use this hook when you want GTM scroll-depth tracking out of the box.
+ * Use the underlying `useScrollDepth` directly if you need a different
+ * analytics integration or want full control over the callback.
+ *
+ * @param resetKey   - Change on every navigation (e.g. pathname or page title)
+ *                     to reset the fired thresholds for the new page.
+ * @param thresholds - Scroll depth percentages (%) to track. Defaults to
+ *                     [25, 50, 75, 90, 100], mirroring GTM's built-in Scroll
+ *                     Depth trigger.
+ */
+var useScrollDepthGTM = function useScrollDepthGTM(resetKey, thresholds) {
+  useScrollDepth(function (threshold) {
+    gtm.push({
+      event: 'scroll_depth',
+      percent_scrolled: threshold
+    });
+  }, resetKey, thresholds);
+};
+export default useScrollDepthGTM;

package/dist/index.d.ts

@@ -77,6 +77,8 @@ export { default as useDialogHelpers } from "./hooks/useDialogHelpers";
 export { default as useEscape } from "./hooks/useEscape";
 export { default as useOnScreen } from "./hooks/useOnScreen";
 export { default as usePrevious } from "./hooks/usePrevious";
+export { default as useScrollDepth } from "./hooks/useScrollDepth";
+export { default as useScrollDepthGTM } from "./hooks/useScrollDepthGTM";
 export { default as useScrollPosition } from "./hooks/useScrollPosition";
 export { default as useWindowDimensions } from "./hooks/useWindowDimensions";
 export { default as useTrapFocus } from "./hooks/useTrapFocus";

package/dist/index.js

@@ -90,6 +90,8 @@ export { default as useDialogHelpers } from './hooks/useDialogHelpers';
 export { default as useEscape } from './hooks/useEscape';
 export { default as useOnScreen } from './hooks/useOnScreen';
 export { default as usePrevious } from './hooks/usePrevious';
+export { default as useScrollDepth } from './hooks/useScrollDepth';
+export { default as useScrollDepthGTM } from './hooks/useScrollDepthGTM';
 export { default as useScrollPosition } from './hooks/useScrollPosition';
 export { default as useWindowDimensions } from './hooks/useWindowDimensions';
 export { default as useTrapFocus } from './hooks/useTrapFocus';

package/package.json

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