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

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import './style.scss';
+export type ContentReadMarkerProps = {
+    title: string;
+    enabled?: boolean;
+    delay?: number;
+    resetKey?: React.Key;
+    event?: string;
+    className?: string;
+};
+/**
+ * ContentReadMarker
+ *
+ * Invisible marker to place after a page's main content. Pushes
+ * `{ event, title }` to the GTM dataLayer once, when the marker has been in
+ * view for `delay` ms.
+ *
+ * @param title    - Sent along with the event.
+ * @param enabled  - Wait for a condition first, e.g. the virtual page view.
+ * @param delay    - Time in ms the marker must stay in view (default 1000),
+ *                   so scrolling past it (e.g. a scroll-to-top) does not count.
+ * @param resetKey - Change per page (e.g. node id) to track again; remounts
+ *                   the marker so a marker still in view does not fire early.
+ * @param event    - Event name, defaults to `content_read`.
+ */
+declare const ContentReadMarker: React.FC<ContentReadMarkerProps>;
+export default ContentReadMarker;

package/dist/components/ContentReadMarker/index.js

@@ -0,0 +1,60 @@
+var _excluded = ["resetKey"];
+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 _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, { useRef } from 'react';
+import c from 'classnames';
+import useInViewOnce from '../../hooks/useInViewOnce';
+import './style.scss';
+var Marker = function Marker(_ref) {
+  var title = _ref.title,
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 1000 : _ref$delay,
+    _ref$event = _ref.event,
+    event = _ref$event === void 0 ? 'content_read' : _ref$event,
+    className = _ref.className;
+  var ref = useRef(null);
+  useInViewOnce(ref, function () {
+    // Pushed directly, so GTM picks it up even if it loads later.
+    var w = window;
+    w.dataLayer = w.dataLayer || [];
+    w.dataLayer.push({
+      event: event,
+      title: title
+    });
+  }, {
+    enabled: enabled,
+    delay: delay
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: c('ContentReadMarker', className),
+    "aria-hidden": "true"
+  });
+};
+
+/**
+ * ContentReadMarker
+ *
+ * Invisible marker to place after a page's main content. Pushes
+ * `{ event, title }` to the GTM dataLayer once, when the marker has been in
+ * view for `delay` ms.
+ *
+ * @param title    - Sent along with the event.
+ * @param enabled  - Wait for a condition first, e.g. the virtual page view.
+ * @param delay    - Time in ms the marker must stay in view (default 1000),
+ *                   so scrolling past it (e.g. a scroll-to-top) does not count.
+ * @param resetKey - Change per page (e.g. node id) to track again; remounts
+ *                   the marker so a marker still in view does not fire early.
+ * @param event    - Event name, defaults to `content_read`.
+ */
+var ContentReadMarker = function ContentReadMarker(_ref2) {
+  var resetKey = _ref2.resetKey,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/React.createElement(Marker, _extends({
+    key: resetKey
+  }, props));
+};
+export default ContentReadMarker;

package/dist/components/ContentReadMarker/style.scss

@@ -0,0 +1,5 @@
+.ContentReadMarker {
+  height: 1px;
+  margin-top: -1px;
+  pointer-events: none;
+}

package/dist/hooks/useInViewOnce.d.ts

@@ -0,0 +1,23 @@
+import { RefObject } from 'react';
+type UseInViewOnceOptions = {
+    enabled?: boolean;
+    delay?: number;
+    observerOptions?: IntersectionObserverInit;
+};
+/**
+ * useInViewOnce
+ *
+ * Calls `callback` once, the first time `ref` is in view while `enabled` is
+ * true, and stays in view for `delay` ms. To fire again (e.g. on the next
+ * page), remount the element with a new `key`; that also restarts the
+ * observer.
+ *
+ * @param ref      - The element to observe.
+ * @param callback - Called once when the element is in view.
+ * @param options  - `enabled` (default true) delays firing until a condition
+ *                   is met. `delay` (default 0) is the time in ms the element
+ *                   must stay in view, so passing through it does not count.
+ *                   `observerOptions` must be a stable reference.
+ */
+declare const useInViewOnce: (ref: RefObject<HTMLElement>, callback: () => void, { enabled, delay, observerOptions }?: UseInViewOnceOptions) => void;
+export default useInViewOnce;

package/dist/hooks/useInViewOnce.js

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react';
+import useOnScreen from './useOnScreen';
+/**
+ * useInViewOnce
+ *
+ * Calls `callback` once, the first time `ref` is in view while `enabled` is
+ * true, and stays in view for `delay` ms. To fire again (e.g. on the next
+ * page), remount the element with a new `key`; that also restarts the
+ * observer.
+ *
+ * @param ref      - The element to observe.
+ * @param callback - Called once when the element is in view.
+ * @param options  - `enabled` (default true) delays firing until a condition
+ *                   is met. `delay` (default 0) is the time in ms the element
+ *                   must stay in view, so passing through it does not count.
+ *                   `observerOptions` must be a stable reference.
+ */
+var useInViewOnce = function useInViewOnce(ref, callback) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 0 : _ref$delay,
+    observerOptions = _ref.observerOptions;
+  var isOnScreen = useOnScreen(ref, observerOptions);
+  var hasFired = useRef(false);
+  var callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useEffect(function () {
+    if (!isOnScreen || !enabled || hasFired.current) return undefined;
+    var fire = function fire() {
+      hasFired.current = true;
+      callbackRef.current();
+    };
+    if (delay <= 0) {
+      fire();
+      return undefined;
+    }
+    var timeout = setTimeout(fire, delay);
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, [isOnScreen, enabled, delay]);
+};
+export default useInViewOnce;

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { default as AccordionItem } from "./components/Accordion/AccordionItem";
 export { default as AccordionItemVariant } from "./components/Accordion/AccordionItemVariant";
 export { default as Button } from "./components/Button";
 export { default as AccessibleLinkDescription } from "./components/AccessibleLinkDescription";
+export { default as ContentReadMarker } from "./components/ContentReadMarker";
 export { default as Hamburger } from "./components/Hamburger";
 export { default as Image } from "./components/Image";
 export { default as Icon } from "./components/Icon";
@@ -75,6 +76,7 @@ export { default as useBoolean } from "./hooks/useBoolean";
 export { default as useDialog } from "./hooks/useDialog";
 export { default as useDialogHelpers } from "./hooks/useDialogHelpers";
 export { default as useEscape } from "./hooks/useEscape";
+export { default as useInViewOnce } from "./hooks/useInViewOnce";
 export { default as useOnScreen } from "./hooks/useOnScreen";
 export { default as usePrevious } from "./hooks/usePrevious";
 export { default as useScrollDepth } from "./hooks/useScrollDepth";

package/dist/index.js

@@ -5,6 +5,7 @@ export { default as AccordionItem } from './components/Accordion/AccordionItem';
 export { default as AccordionItemVariant } from './components/Accordion/AccordionItemVariant';
 export { default as Button } from './components/Button';
 export { default as AccessibleLinkDescription } from './components/AccessibleLinkDescription';
+export { default as ContentReadMarker } from './components/ContentReadMarker';
 export { default as Hamburger } from './components/Hamburger';
 export { default as Image } from './components/Image';
 export { default as Icon } from './components/Icon';
@@ -88,6 +89,7 @@ export { default as useBoolean } from './hooks/useBoolean';
 export { default as useDialog } from './hooks/useDialog';
 export { default as useDialogHelpers } from './hooks/useDialogHelpers';
 export { default as useEscape } from './hooks/useEscape';
+export { default as useInViewOnce } from './hooks/useInViewOnce';
 export { default as useOnScreen } from './hooks/useOnScreen';
 export { default as usePrevious } from './hooks/usePrevious';
 export { default as useScrollDepth } from './hooks/useScrollDepth';

package/package.json

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