@elliemae/ds-utilities 3.22.0-next.2 → 3.22.0-next.21

package/dist/cjs/hooks/index.js

@@ -44,6 +44,7 @@ __export(hooks_exports, {
   useHoverHandlersDelay: () => import_useHoverHandlersDelay.useHoverHandlersDelay,
   useIsMobile: () => import_useIsMobile.useIsMobile,
   useIsShowingEllipsis: () => import_useIsShowingEllipsis.useIsShowingEllipsis,
+  useLatestValueReferenciallyStable: () => import_useMakeMutable.useLatestValueReferenciallyStable,
   useMakeMutable: () => import_useMakeMutable.useMakeMutable,
   useMeasure: () => import_use_measure.default,
   useNativeIntersectionObserver: () => import_useNativeIntersectionObserver.useNativeIntersectionObserver,
@@ -56,6 +57,7 @@ __export(hooks_exports, {
   usePrevious: () => import_usePrevious.usePrevious,
   useResizeObserver: () => import_useResizeObserver.useResizeObserver,
   useShouldRecalculate: () => import_useShouldRecalculate.useShouldRecalculate,
+  useSideEffectSyntheticEvent: () => import_useSideEffectSyntheticEvent.useSideEffectSyntheticEvent,
   useTrackElement: () => import_useTrackElement.useTrackElement,
   useWindowScrollerList: () => import_useWindowScrollerList.useWindowScrollerList
 });
@@ -85,6 +87,7 @@ var import_useOnSpecificFocus = require("./useOnSpecificFocus.js");
 var import_usePrevious = require("./usePrevious.js");
 var import_useResizeObserver = require("./useResizeObserver.js");
 var import_useShouldRecalculate = require("./useShouldRecalculate.js");
+var import_useSideEffectSyntheticEvent = require("./useSideEffectSyntheticEvent.js");
 var import_useTrackElement = require("./useTrackElement.js");
 var import_useWindowScrollerList = require("./useWindowScrollerList.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/hooks/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { default as useMeasure } from 'use-measure';\nexport { default as useForceUpdate } from 'use-force-update';\nexport { default as useOnClickOutside } from 'use-onclickoutside';\n\nexport { useCallbackAfterRender } from './useCallbackAfterRender.js';\nexport { useCancellableDelayedCallback } from './useCancellableDelayedCallback.js';\nexport { useDerivedStateFromProps } from './useDerivedStateFromProps.js';\nexport { useExecutionTimer } from './useExecutionTimer.js';\nexport { useExpandState } from './useExpandState.js';\nexport { useFocusTrap, UseFocusTrapWithSchema } from './useFocusTrap.js';\nexport { useHeadlessTooltip } from './useHeadlessTooltip.js';\nexport { useHotkeys } from './useHotkeys.js';\nexport { useHoverHandlersDelay } from './useHoverHandlersDelay.js';\nexport { useIsMobile } from './useIsMobile.js';\nexport { useIsShowingEllipsis } from './useIsShowingEllipsis.js';\nexport { useMakeMutable } from './useMakeMutable.js';\nexport { useNativeIntersectionObserver } from './useNativeIntersectionObserver.js';\nexport { useNativeResizeObserver } from './useNativeResizeObserver.js';\nexport { useOnBlurOut, UseOnBlurOutWithSchema } from './useOnBlurOut.js';\nexport { useOnElementResize } from './useOnElementResize.js';\nexport { useOnFirstFocusIn, UseOnFirstFocusInWithSchema } from './useOnFirstFocusIn.js';\nexport { useOnSpecificFocus, UseOnSpecificFocusWithSchema } from './useOnSpecificFocus.js';\nexport { usePrevious } from './usePrevious.js';\nexport { useResizeObserver } from './useResizeObserver.js';\nexport { useShouldRecalculate } from './useShouldRecalculate.js';\nexport { useTrackElement } from './useTrackElement.js';\nexport { useWindowScrollerList } from './useWindowScrollerList.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAsC;AACtC,8BAA0C;AAC1C,gCAA6C;AAE7C,oCAAuC;AACvC,2CAA8C;AAC9C,sCAAyC;AACzC,+BAAkC;AAClC,4BAA+B;AAC/B,0BAAqD;AACrD,gCAAmC;AACnC,wBAA2B;AAC3B,mCAAsC;AACtC,yBAA4B;AAC5B,kCAAqC;AACrC,4BAA+B;AAC/B,2CAA8C;AAC9C,qCAAwC;AACxC,0BAAqD;AACrD,gCAAmC;AACnC,+BAA+D;AAC/D,gCAAiE;AACjE,yBAA4B;AAC5B,+BAAkC;AAClC,kCAAqC;AACrC,6BAAgC;AAChC,mCAAsC;",
+  "sourcesContent": ["export { default as useMeasure } from 'use-measure';\nexport { default as useForceUpdate } from 'use-force-update';\nexport { default as useOnClickOutside } from 'use-onclickoutside';\n\nexport { useCallbackAfterRender } from './useCallbackAfterRender.js';\nexport { useCancellableDelayedCallback } from './useCancellableDelayedCallback.js';\nexport { useDerivedStateFromProps } from './useDerivedStateFromProps.js';\nexport { useExecutionTimer } from './useExecutionTimer.js';\nexport { useExpandState } from './useExpandState.js';\nexport { useFocusTrap, UseFocusTrapWithSchema } from './useFocusTrap.js';\nexport { useHeadlessTooltip } from './useHeadlessTooltip.js';\nexport { useHotkeys } from './useHotkeys.js';\nexport { useHoverHandlersDelay } from './useHoverHandlersDelay.js';\nexport { useIsMobile } from './useIsMobile.js';\nexport { useIsShowingEllipsis } from './useIsShowingEllipsis.js';\nexport { useMakeMutable, useLatestValueReferenciallyStable } from './useMakeMutable.js';\nexport { useNativeIntersectionObserver } from './useNativeIntersectionObserver.js';\nexport { useNativeResizeObserver } from './useNativeResizeObserver.js';\nexport { useOnBlurOut, UseOnBlurOutWithSchema } from './useOnBlurOut.js';\nexport { useOnElementResize } from './useOnElementResize.js';\nexport { useOnFirstFocusIn, UseOnFirstFocusInWithSchema } from './useOnFirstFocusIn.js';\nexport { useOnSpecificFocus, UseOnSpecificFocusWithSchema } from './useOnSpecificFocus.js';\nexport { usePrevious } from './usePrevious.js';\nexport { useResizeObserver } from './useResizeObserver.js';\nexport { useShouldRecalculate } from './useShouldRecalculate.js';\nexport { useSideEffectSyntheticEvent } from './useSideEffectSyntheticEvent.js';\nexport { useTrackElement } from './useTrackElement.js';\nexport { useWindowScrollerList } from './useWindowScrollerList.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAsC;AACtC,8BAA0C;AAC1C,gCAA6C;AAE7C,oCAAuC;AACvC,2CAA8C;AAC9C,sCAAyC;AACzC,+BAAkC;AAClC,4BAA+B;AAC/B,0BAAqD;AACrD,gCAAmC;AACnC,wBAA2B;AAC3B,mCAAsC;AACtC,yBAA4B;AAC5B,kCAAqC;AACrC,4BAAkE;AAClE,2CAA8C;AAC9C,qCAAwC;AACxC,0BAAqD;AACrD,gCAAmC;AACnC,+BAA+D;AAC/D,gCAAiE;AACjE,yBAA4B;AAC5B,+BAAkC;AAClC,kCAAqC;AACrC,yCAA4C;AAC5C,6BAAgC;AAChC,mCAAsC;",
   "names": []
 }

package/dist/cjs/hooks/useMakeMutable.js

@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useMakeMutable_exports = {};
 __export(useMakeMutable_exports, {
+  useLatestValueReferenciallyStable: () => useLatestValueReferenciallyStable,
   useMakeMutable: () => useMakeMutable
 });
 module.exports = __toCommonJS(useMakeMutable_exports);
@@ -40,4 +41,5 @@ const useMakeMutable = (referenceVar) => {
   }, [referenceVar]);
   return mutable;
 };
+const useLatestValueReferenciallyStable = useMakeMutable;
 //# sourceMappingURL=useMakeMutable.js.map

package/dist/cjs/hooks/useMakeMutable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useMakeMutable.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useRef, useEffect } from 'react';\ntype UseMakeMutable = <T>(referenceVar: T) => React.MutableRefObject<T>;\nexport const useMakeMutable: UseMakeMutable = (referenceVar) => {\n  const mutable = useRef(referenceVar);\n  useEffect(() => {\n    mutable.current = referenceVar;\n  }, [referenceVar]);\n  return mutable;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAE3B,MAAM,iBAAiC,CAAC,iBAAiB;AAC9D,QAAM,cAAU,qBAAO,YAAY;AACnC,8BAAU,MAAM;AACd,YAAQ,UAAU;AAAA,EACpB,GAAG,CAAC,YAAY,CAAC;AACjB,SAAO;AACT;",
+  "sourcesContent": ["import type React from 'react';\nimport { useRef, useEffect } from 'react';\ntype UseMakeMutable = <T>(referenceVar: T) => React.MutableRefObject<T>;\n\n/**\n * For specific scenarios we need to be able to read the latest value of a variable at execution time without triggering dependency updates on useEffect/useCallback/useMemo\n * This is a custom hook that allows us to do that, with a performance overhead of a useEffect and a memory overhead of a ref.\n * @param {any} referenceVar - the value to be made \"referentially stable\", this works with primitive values and values by reference\n * @returns {object} - an object with a \"current\" property that holds the latest value of the variable passed as argument\n * @property {any} current - the latest value of the variable passed as argument\n * @example\n * const Comp = ({ value }) => {\n *  const latestValueRef = useMakeMutable(value);\n *  React.useEffect(() => {\n *   console.log(latestValueRef.current); // this will log 'hola' at the time of execution\n *  }, []);\n *  latestValueRef.current = 'hola'; // this will update the latest value of \"value\" at the time of execution\n *  ...\n *  return <div>...</div>\n * }\n */\nexport const useMakeMutable: UseMakeMutable = (referenceVar) => {\n  const mutable = useRef(referenceVar);\n  useEffect(() => {\n    mutable.current = referenceVar;\n  }, [referenceVar]);\n  return mutable;\n};\n\n/**\n * For specific scenarios we need to be able to read the latest value of a variable at execution time without triggering dependency updates on useEffect/useCallback/useMemo\n * This is a custom hook that allows us to do that, with a performance overhead of a useEffect and a memory overhead of a ref.\n * N.B. this is the same as useMakeMutable, but with a more explicit name.\n * @param {any} referenceVar - the value to be made \"referentially stable\", this works with primitive values and values by reference\n * @returns {object} - an object with a \"current\" property that holds the latest value of the variable passed as argument\n * @property {any} current - the latest value of the variable passed as argument\n * @example\n * const Comp = ({ value }) => {\n *  const latestValueRef = useLatestValueReferenciallyStable(value);\n *  React.useEffect(() => {\n *   console.log(latestValueRef.current); // this will log 'hola' at the time of execution\n *  }, []);\n *  latestValueRef.current = 'hola'; // this will update the latest value of \"value\" at the time of execution\n *  ...\n *  return <div>...</div>\n * }\n */\nexport const useLatestValueReferenciallyStable = useMakeMutable;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkC;AAoB3B,MAAM,iBAAiC,CAAC,iBAAiB;AAC9D,QAAM,cAAU,qBAAO,YAAY;AACnC,8BAAU,MAAM;AACd,YAAQ,UAAU;AAAA,EACpB,GAAG,CAAC,YAAY,CAAC;AACjB,SAAO;AACT;AAoBO,MAAM,oCAAoC;",
   "names": []
 }

package/dist/cjs/hooks/useSideEffectSyntheticEvent.js

@@ -0,0 +1,44 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useSideEffectSyntheticEvent_exports = {};
+__export(useSideEffectSyntheticEvent_exports, {
+  useSideEffectSyntheticEvent: () => useSideEffectSyntheticEvent
+});
+module.exports = __toCommonJS(useSideEffectSyntheticEvent_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_useMakeMutable = require("./useMakeMutable.js");
+const useSideEffectSyntheticEvent = (dependency, callback, callbackOpts) => {
+  const refCb = (0, import_useMakeMutable.useLatestValueReferenciallyStable)(callback);
+  const refCbOpts = (0, import_useMakeMutable.useLatestValueReferenciallyStable)(callbackOpts);
+  import_react.default.useEffect(() => {
+    refCb?.current?.(dependency, refCbOpts.current);
+  }, [dependency, refCb, refCbOpts]);
+};
+//# sourceMappingURL=useSideEffectSyntheticEvent.js.map

package/dist/cjs/hooks/useSideEffectSyntheticEvent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useSideEffectSyntheticEvent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { useLatestValueReferenciallyStable } from './useMakeMutable.js';\n/**\n * This is a custom hook that allows us to simulate a synthetic event. This ensure we only trigger a side effect when a specific variable(dependency) changes.\n * @param {any} dependency - the variable that we want to listen to\n * @param {Function} callback - the callback that we want to execute when the dependency changes\n * @param {object} callbackOpts - the options to be passed to the callback function\n * @returns {void}\n * @invoke useLatestValueReferenciallyStable\n */\nexport const useSideEffectSyntheticEvent = <T, CBOpts>(\n  dependency: T,\n  callback: (latestVal: T, opts: CBOpts) => void,\n  callbackOpts: CBOpts,\n) => {\n  const refCb = useLatestValueReferenciallyStable(callback);\n  const refCbOpts = useLatestValueReferenciallyStable(callbackOpts);\n  // this is the useEffect that simulates the event\n  React.useEffect(() => {\n    refCb?.current?.(dependency, refCbOpts.current);\n    // the point of this custom hook is making sure we only listen to the dependency and nothing else\n    //  without violating the rules of hooks/exhaustive-deps rule and making it explicit that we want to simulate an event\n    //  refCb & refCbOpts are forced to be referentially stable, so we can safely put it in the dependency array\n  }, [dependency, refCb, refCbOpts]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,4BAAkD;AAS3C,MAAM,8BAA8B,CACzC,YACA,UACA,iBACG;AACH,QAAM,YAAQ,yDAAkC,QAAQ;AACxD,QAAM,gBAAY,yDAAkC,YAAY;AAEhE,eAAAA,QAAM,UAAU,MAAM;AACpB,WAAO,UAAU,YAAY,UAAU,OAAO;AAAA,EAIhD,GAAG,CAAC,YAAY,OAAO,SAAS,CAAC;AACnC;",
+  "names": ["React"]
+}

package/dist/cjs/index.js

@@ -124,6 +124,7 @@ __export(src_exports, {
   useHoverHandlersDelay: () => import_hooks.useHoverHandlersDelay,
   useIsMobile: () => import_hooks.useIsMobile,
   useIsShowingEllipsis: () => import_hooks.useIsShowingEllipsis,
+  useLatestValueReferenciallyStable: () => import_hooks.useLatestValueReferenciallyStable,
   useMakeMutable: () => import_hooks.useMakeMutable,
   useMeasure: () => import_hooks.useMeasure,
   useNativeIntersectionObserver: () => import_hooks.useNativeIntersectionObserver,
@@ -136,6 +137,7 @@ __export(src_exports, {
   usePrevious: () => import_hooks.usePrevious,
   useResizeObserver: () => import_hooks.useResizeObserver,
   useShouldRecalculate: () => import_hooks.useShouldRecalculate,
+  useSideEffectSyntheticEvent: () => import_hooks.useSideEffectSyntheticEvent,
   useTrackElement: () => import_hooks.useTrackElement,
   useWindowScrollerList: () => import_hooks.useWindowScrollerList,
   validDate: () => import_operators.validDate,

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { default as getComponentFromProps } from './getComponentFromProps.js';\nexport { default as onClickHandlerForNonInteractiveElements } from './onClickHandlerForNonInteractiveElements.js';\nexport { capitalize } from './capitalize.js';\nexport { getObjectValuesToArray, getObjectKeysToArray } from './objectUtilities.js';\nexport {\n  checkEmpty,\n  checkNotEmpty,\n  contains,\n  equal,\n  greaterThan,\n  greaterThanOrEquals,\n  isIn,\n  isNotIn,\n  isNotNull,\n  isNull,\n  lessThanOrEquals,\n  notEqual,\n  startsWith,\n  validDate,\n} from './operators.js';\nexport {\n  addOrRemove,\n  arrayMove,\n  cloneDeep,\n  curry,\n  cx,\n  debounce,\n  differenceBy,\n  differenceWith,\n  filter,\n  findIndex,\n  get,\n  groupBy,\n  hashArray,\n  isBoolean,\n  isEmpty,\n  isEqual,\n  isEqualWith,\n  isFunction,\n  isNaN,\n  isObject,\n  isString,\n  maxBy,\n  meanBy,\n  noop,\n  omit,\n  orderBy,\n  padStart,\n  parseInt,\n  pick,\n  pickBy,\n  property,\n  pull,\n  range,\n  removeUndefinedProperties,\n  runAll,\n  safeCall,\n  set,\n  sortBy,\n  sumBy,\n  throttle,\n  toggleInArray,\n  toggleInObject,\n  transform,\n  uniq,\n  uniqBy,\n  values,\n} from './utils.js';\nexport { setRef, mergeRefs, setMultipleRefs, logger } from './system.js';\nexport {\n  useCallbackAfterRender,\n  useCancellableDelayedCallback,\n  useDerivedStateFromProps,\n  useExecutionTimer,\n  useExpandState,\n  useFocusTrap,\n  UseFocusTrapWithSchema,\n  useForceUpdate,\n  useHeadlessTooltip,\n  useHotkeys,\n  useHoverHandlersDelay,\n  useIsMobile,\n  useIsShowingEllipsis,\n  useMakeMutable,\n  useMeasure,\n  useNativeIntersectionObserver,\n  useNativeResizeObserver,\n  useOnBlurOut,\n  UseOnBlurOutWithSchema,\n  useOnClickOutside,\n  useOnElementResize,\n  useOnFirstFocusIn,\n  UseOnFirstFocusInWithSchema,\n  useOnSpecificFocus,\n  UseOnSpecificFocusWithSchema,\n  usePrevious,\n  useResizeObserver,\n  useShouldRecalculate,\n  useTrackElement,\n  useWindowScrollerList,\n} from './hooks/index.js';\nexport { getVisibleTimeByFormat, addLeadingZeros } from './timeUtils.js';\nexport { compose } from './compose.js';\nexport { DOCUMENT, WINDOW } from './platform.js';\nexport { isDOMTypeElement } from './reactTypesUtility.js';\nexport { isRequired, isGreaterThan, isValidDate } from './validations.js';\nexport { getHighlightedRerendersStyle } from './getHighlightedRerendersStyle.js';\n\nexport { crossTypeSort } from './algorithms/crossTypeSort.js';\nexport { appendComponentIfNotExist } from './addComponentIfNotExists.js';\n// TODO -- REMOVE WHEN READY\nexport * from './deprecated/index.js';\nexport * from './props-helpers/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mCAAiD;AACjD,qDAAmE;AACnE,wBAA2B;AAC3B,6BAA6D;AAC7D,uBAeO;AACP,mBA+CO;AACP,oBAA2D;AAC3D,mBA+BO;AACP,uBAAwD;AACxD,qBAAwB;AACxB,sBAAiC;AACjC,+BAAiC;AACjC,yBAAuD;AACvD,0CAA6C;AAE7C,2BAA8B;AAC9B,qCAA0C;AAE1C,wBAAc,kCA/Gd;AAgHA,wBAAc,qCAhHd;",
+  "sourcesContent": ["export { default as getComponentFromProps } from './getComponentFromProps.js';\nexport { default as onClickHandlerForNonInteractiveElements } from './onClickHandlerForNonInteractiveElements.js';\nexport { capitalize } from './capitalize.js';\nexport { getObjectValuesToArray, getObjectKeysToArray } from './objectUtilities.js';\nexport {\n  checkEmpty,\n  checkNotEmpty,\n  contains,\n  equal,\n  greaterThan,\n  greaterThanOrEquals,\n  isIn,\n  isNotIn,\n  isNotNull,\n  isNull,\n  lessThanOrEquals,\n  notEqual,\n  startsWith,\n  validDate,\n} from './operators.js';\nexport {\n  addOrRemove,\n  arrayMove,\n  cloneDeep,\n  curry,\n  cx,\n  debounce,\n  differenceBy,\n  differenceWith,\n  filter,\n  findIndex,\n  get,\n  groupBy,\n  hashArray,\n  isBoolean,\n  isEmpty,\n  isEqual,\n  isEqualWith,\n  isFunction,\n  isNaN,\n  isObject,\n  isString,\n  maxBy,\n  meanBy,\n  noop,\n  omit,\n  orderBy,\n  padStart,\n  parseInt,\n  pick,\n  pickBy,\n  property,\n  pull,\n  range,\n  removeUndefinedProperties,\n  runAll,\n  safeCall,\n  set,\n  sortBy,\n  sumBy,\n  throttle,\n  toggleInArray,\n  toggleInObject,\n  transform,\n  uniq,\n  uniqBy,\n  values,\n} from './utils.js';\nexport { setRef, mergeRefs, setMultipleRefs, logger } from './system.js';\nexport {\n  useCallbackAfterRender,\n  useCancellableDelayedCallback,\n  useDerivedStateFromProps,\n  useExecutionTimer,\n  useExpandState,\n  useFocusTrap,\n  UseFocusTrapWithSchema,\n  useForceUpdate,\n  useHeadlessTooltip,\n  useHotkeys,\n  useHoverHandlersDelay,\n  useIsMobile,\n  useIsShowingEllipsis,\n  useMakeMutable,\n  useLatestValueReferenciallyStable,\n  useMeasure,\n  useNativeIntersectionObserver,\n  useNativeResizeObserver,\n  useOnBlurOut,\n  UseOnBlurOutWithSchema,\n  useOnClickOutside,\n  useOnElementResize,\n  useOnFirstFocusIn,\n  UseOnFirstFocusInWithSchema,\n  useOnSpecificFocus,\n  UseOnSpecificFocusWithSchema,\n  usePrevious,\n  useResizeObserver,\n  useShouldRecalculate,\n  useSideEffectSyntheticEvent,\n  useTrackElement,\n  useWindowScrollerList,\n} from './hooks/index.js';\nexport { getVisibleTimeByFormat, addLeadingZeros } from './timeUtils.js';\nexport { compose } from './compose.js';\nexport { DOCUMENT, WINDOW } from './platform.js';\nexport { isDOMTypeElement } from './reactTypesUtility.js';\nexport { isRequired, isGreaterThan, isValidDate } from './validations.js';\nexport { getHighlightedRerendersStyle } from './getHighlightedRerendersStyle.js';\n\nexport { crossTypeSort } from './algorithms/crossTypeSort.js';\nexport { appendComponentIfNotExist } from './addComponentIfNotExists.js';\n// TODO -- REMOVE WHEN READY\nexport * from './deprecated/index.js';\nexport * from './props-helpers/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mCAAiD;AACjD,qDAAmE;AACnE,wBAA2B;AAC3B,6BAA6D;AAC7D,uBAeO;AACP,mBA+CO;AACP,oBAA2D;AAC3D,mBAiCO;AACP,uBAAwD;AACxD,qBAAwB;AACxB,sBAAiC;AACjC,+BAAiC;AACjC,yBAAuD;AACvD,0CAA6C;AAE7C,2BAA8B;AAC9B,qCAA0C;AAE1C,wBAAc,kCAjHd;AAkHA,wBAAc,qCAlHd;",
   "names": []
 }

package/dist/esm/hooks/index.js

@@ -13,7 +13,7 @@ import { useHotkeys } from "./useHotkeys.js";
 import { useHoverHandlersDelay } from "./useHoverHandlersDelay.js";
 import { useIsMobile } from "./useIsMobile.js";
 import { useIsShowingEllipsis } from "./useIsShowingEllipsis.js";
-import { useMakeMutable } from "./useMakeMutable.js";
+import { useMakeMutable, useLatestValueReferenciallyStable } from "./useMakeMutable.js";
 import { useNativeIntersectionObserver } from "./useNativeIntersectionObserver.js";
 import { useNativeResizeObserver } from "./useNativeResizeObserver.js";
 import { useOnBlurOut, UseOnBlurOutWithSchema } from "./useOnBlurOut.js";
@@ -23,6 +23,7 @@ import { useOnSpecificFocus, UseOnSpecificFocusWithSchema } from "./useOnSpecifi
 import { usePrevious } from "./usePrevious.js";
 import { useResizeObserver } from "./useResizeObserver.js";
 import { useShouldRecalculate } from "./useShouldRecalculate.js";
+import { useSideEffectSyntheticEvent } from "./useSideEffectSyntheticEvent.js";
 import { useTrackElement } from "./useTrackElement.js";
 import { useWindowScrollerList } from "./useWindowScrollerList.js";
 export {
@@ -42,6 +43,7 @@ export {
   useHoverHandlersDelay,
   useIsMobile,
   useIsShowingEllipsis,
+  useLatestValueReferenciallyStable,
   useMakeMutable,
   default2 as useMeasure,
   useNativeIntersectionObserver,
@@ -54,6 +56,7 @@ export {
   usePrevious,
   useResizeObserver,
   useShouldRecalculate,
+  useSideEffectSyntheticEvent,
   useTrackElement,
   useWindowScrollerList
 };

package/dist/esm/hooks/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default as useMeasure } from 'use-measure';\nexport { default as useForceUpdate } from 'use-force-update';\nexport { default as useOnClickOutside } from 'use-onclickoutside';\n\nexport { useCallbackAfterRender } from './useCallbackAfterRender.js';\nexport { useCancellableDelayedCallback } from './useCancellableDelayedCallback.js';\nexport { useDerivedStateFromProps } from './useDerivedStateFromProps.js';\nexport { useExecutionTimer } from './useExecutionTimer.js';\nexport { useExpandState } from './useExpandState.js';\nexport { useFocusTrap, UseFocusTrapWithSchema } from './useFocusTrap.js';\nexport { useHeadlessTooltip } from './useHeadlessTooltip.js';\nexport { useHotkeys } from './useHotkeys.js';\nexport { useHoverHandlersDelay } from './useHoverHandlersDelay.js';\nexport { useIsMobile } from './useIsMobile.js';\nexport { useIsShowingEllipsis } from './useIsShowingEllipsis.js';\nexport { useMakeMutable } from './useMakeMutable.js';\nexport { useNativeIntersectionObserver } from './useNativeIntersectionObserver.js';\nexport { useNativeResizeObserver } from './useNativeResizeObserver.js';\nexport { useOnBlurOut, UseOnBlurOutWithSchema } from './useOnBlurOut.js';\nexport { useOnElementResize } from './useOnElementResize.js';\nexport { useOnFirstFocusIn, UseOnFirstFocusInWithSchema } from './useOnFirstFocusIn.js';\nexport { useOnSpecificFocus, UseOnSpecificFocusWithSchema } from './useOnSpecificFocus.js';\nexport { usePrevious } from './usePrevious.js';\nexport { useResizeObserver } from './useResizeObserver.js';\nexport { useShouldRecalculate } from './useShouldRecalculate.js';\nexport { useTrackElement } from './useTrackElement.js';\nexport { useWindowScrollerList } from './useWindowScrollerList.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAoB,WAAXA,gBAA6B;AACtC,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAoC;AAE7C,SAAS,8BAA8B;AACvC,SAAS,qCAAqC;AAC9C,SAAS,gCAAgC;AACzC,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,cAAc,8BAA8B;AACrD,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,qCAAqC;AAC9C,SAAS,+BAA+B;AACxC,SAAS,cAAc,8BAA8B;AACrD,SAAS,0BAA0B;AACnC,SAAS,mBAAmB,mCAAmC;AAC/D,SAAS,oBAAoB,oCAAoC;AACjE,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default as useMeasure } from 'use-measure';\nexport { default as useForceUpdate } from 'use-force-update';\nexport { default as useOnClickOutside } from 'use-onclickoutside';\n\nexport { useCallbackAfterRender } from './useCallbackAfterRender.js';\nexport { useCancellableDelayedCallback } from './useCancellableDelayedCallback.js';\nexport { useDerivedStateFromProps } from './useDerivedStateFromProps.js';\nexport { useExecutionTimer } from './useExecutionTimer.js';\nexport { useExpandState } from './useExpandState.js';\nexport { useFocusTrap, UseFocusTrapWithSchema } from './useFocusTrap.js';\nexport { useHeadlessTooltip } from './useHeadlessTooltip.js';\nexport { useHotkeys } from './useHotkeys.js';\nexport { useHoverHandlersDelay } from './useHoverHandlersDelay.js';\nexport { useIsMobile } from './useIsMobile.js';\nexport { useIsShowingEllipsis } from './useIsShowingEllipsis.js';\nexport { useMakeMutable, useLatestValueReferenciallyStable } from './useMakeMutable.js';\nexport { useNativeIntersectionObserver } from './useNativeIntersectionObserver.js';\nexport { useNativeResizeObserver } from './useNativeResizeObserver.js';\nexport { useOnBlurOut, UseOnBlurOutWithSchema } from './useOnBlurOut.js';\nexport { useOnElementResize } from './useOnElementResize.js';\nexport { useOnFirstFocusIn, UseOnFirstFocusInWithSchema } from './useOnFirstFocusIn.js';\nexport { useOnSpecificFocus, UseOnSpecificFocusWithSchema } from './useOnSpecificFocus.js';\nexport { usePrevious } from './usePrevious.js';\nexport { useResizeObserver } from './useResizeObserver.js';\nexport { useShouldRecalculate } from './useShouldRecalculate.js';\nexport { useSideEffectSyntheticEvent } from './useSideEffectSyntheticEvent.js';\nexport { useTrackElement } from './useTrackElement.js';\nexport { useWindowScrollerList } from './useWindowScrollerList.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAoB,WAAXA,gBAA6B;AACtC,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAoC;AAE7C,SAAS,8BAA8B;AACvC,SAAS,qCAAqC;AAC9C,SAAS,gCAAgC;AACzC,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,cAAc,8BAA8B;AACrD,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AACrC,SAAS,gBAAgB,yCAAyC;AAClE,SAAS,qCAAqC;AAC9C,SAAS,+BAA+B;AACxC,SAAS,cAAc,8BAA8B;AACrD,SAAS,0BAA0B;AACnC,SAAS,mBAAmB,mCAAmC;AAC/D,SAAS,oBAAoB,oCAAoC;AACjE,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,mCAAmC;AAC5C,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;",
   "names": ["default"]
 }

package/dist/esm/hooks/useMakeMutable.js

@@ -7,7 +7,9 @@ const useMakeMutable = (referenceVar) => {
   }, [referenceVar]);
   return mutable;
 };
+const useLatestValueReferenciallyStable = useMakeMutable;
 export {
+  useLatestValueReferenciallyStable,
   useMakeMutable
 };
 //# sourceMappingURL=useMakeMutable.js.map

package/dist/esm/hooks/useMakeMutable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useMakeMutable.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useRef, useEffect } from 'react';\ntype UseMakeMutable = <T>(referenceVar: T) => React.MutableRefObject<T>;\nexport const useMakeMutable: UseMakeMutable = (referenceVar) => {\n  const mutable = useRef(referenceVar);\n  useEffect(() => {\n    mutable.current = referenceVar;\n  }, [referenceVar]);\n  return mutable;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,iBAAiB;AAE3B,MAAM,iBAAiC,CAAC,iBAAiB;AAC9D,QAAM,UAAU,OAAO,YAAY;AACnC,YAAU,MAAM;AACd,YAAQ,UAAU;AAAA,EACpB,GAAG,CAAC,YAAY,CAAC;AACjB,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useRef, useEffect } from 'react';\ntype UseMakeMutable = <T>(referenceVar: T) => React.MutableRefObject<T>;\n\n/**\n * For specific scenarios we need to be able to read the latest value of a variable at execution time without triggering dependency updates on useEffect/useCallback/useMemo\n * This is a custom hook that allows us to do that, with a performance overhead of a useEffect and a memory overhead of a ref.\n * @param {any} referenceVar - the value to be made \"referentially stable\", this works with primitive values and values by reference\n * @returns {object} - an object with a \"current\" property that holds the latest value of the variable passed as argument\n * @property {any} current - the latest value of the variable passed as argument\n * @example\n * const Comp = ({ value }) => {\n *  const latestValueRef = useMakeMutable(value);\n *  React.useEffect(() => {\n *   console.log(latestValueRef.current); // this will log 'hola' at the time of execution\n *  }, []);\n *  latestValueRef.current = 'hola'; // this will update the latest value of \"value\" at the time of execution\n *  ...\n *  return <div>...</div>\n * }\n */\nexport const useMakeMutable: UseMakeMutable = (referenceVar) => {\n  const mutable = useRef(referenceVar);\n  useEffect(() => {\n    mutable.current = referenceVar;\n  }, [referenceVar]);\n  return mutable;\n};\n\n/**\n * For specific scenarios we need to be able to read the latest value of a variable at execution time without triggering dependency updates on useEffect/useCallback/useMemo\n * This is a custom hook that allows us to do that, with a performance overhead of a useEffect and a memory overhead of a ref.\n * N.B. this is the same as useMakeMutable, but with a more explicit name.\n * @param {any} referenceVar - the value to be made \"referentially stable\", this works with primitive values and values by reference\n * @returns {object} - an object with a \"current\" property that holds the latest value of the variable passed as argument\n * @property {any} current - the latest value of the variable passed as argument\n * @example\n * const Comp = ({ value }) => {\n *  const latestValueRef = useLatestValueReferenciallyStable(value);\n *  React.useEffect(() => {\n *   console.log(latestValueRef.current); // this will log 'hola' at the time of execution\n *  }, []);\n *  latestValueRef.current = 'hola'; // this will update the latest value of \"value\" at the time of execution\n *  ...\n *  return <div>...</div>\n * }\n */\nexport const useLatestValueReferenciallyStable = useMakeMutable;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,iBAAiB;AAoB3B,MAAM,iBAAiC,CAAC,iBAAiB;AAC9D,QAAM,UAAU,OAAO,YAAY;AACnC,YAAU,MAAM;AACd,YAAQ,UAAU;AAAA,EACpB,GAAG,CAAC,YAAY,CAAC;AACjB,SAAO;AACT;AAoBO,MAAM,oCAAoC;",
   "names": []
 }

package/dist/esm/hooks/useSideEffectSyntheticEvent.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import React2 from "react";
+import { useLatestValueReferenciallyStable } from "./useMakeMutable.js";
+const useSideEffectSyntheticEvent = (dependency, callback, callbackOpts) => {
+  const refCb = useLatestValueReferenciallyStable(callback);
+  const refCbOpts = useLatestValueReferenciallyStable(callbackOpts);
+  React2.useEffect(() => {
+    refCb?.current?.(dependency, refCbOpts.current);
+  }, [dependency, refCb, refCbOpts]);
+};
+export {
+  useSideEffectSyntheticEvent
+};
+//# sourceMappingURL=useSideEffectSyntheticEvent.js.map

package/dist/esm/hooks/useSideEffectSyntheticEvent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useSideEffectSyntheticEvent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useLatestValueReferenciallyStable } from './useMakeMutable.js';\n/**\n * This is a custom hook that allows us to simulate a synthetic event. This ensure we only trigger a side effect when a specific variable(dependency) changes.\n * @param {any} dependency - the variable that we want to listen to\n * @param {Function} callback - the callback that we want to execute when the dependency changes\n * @param {object} callbackOpts - the options to be passed to the callback function\n * @returns {void}\n * @invoke useLatestValueReferenciallyStable\n */\nexport const useSideEffectSyntheticEvent = <T, CBOpts>(\n  dependency: T,\n  callback: (latestVal: T, opts: CBOpts) => void,\n  callbackOpts: CBOpts,\n) => {\n  const refCb = useLatestValueReferenciallyStable(callback);\n  const refCbOpts = useLatestValueReferenciallyStable(callbackOpts);\n  // this is the useEffect that simulates the event\n  React.useEffect(() => {\n    refCb?.current?.(dependency, refCbOpts.current);\n    // the point of this custom hook is making sure we only listen to the dependency and nothing else\n    //  without violating the rules of hooks/exhaustive-deps rule and making it explicit that we want to simulate an event\n    //  refCb & refCbOpts are forced to be referentially stable, so we can safely put it in the dependency array\n  }, [dependency, refCb, refCbOpts]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,yCAAyC;AAS3C,MAAM,8BAA8B,CACzC,YACA,UACA,iBACG;AACH,QAAM,QAAQ,kCAAkC,QAAQ;AACxD,QAAM,YAAY,kCAAkC,YAAY;AAEhE,EAAAA,OAAM,UAAU,MAAM;AACpB,WAAO,UAAU,YAAY,UAAU,OAAO;AAAA,EAIhD,GAAG,CAAC,YAAY,OAAO,SAAS,CAAC;AACnC;",
+  "names": ["React"]
+}

package/dist/esm/index.js

@@ -83,6 +83,7 @@ import {
   useIsMobile,
   useIsShowingEllipsis,
   useMakeMutable,
+  useLatestValueReferenciallyStable,
   useMeasure,
   useNativeIntersectionObserver,
   useNativeResizeObserver,
@@ -97,6 +98,7 @@ import {
   usePrevious,
   useResizeObserver,
   useShouldRecalculate,
+  useSideEffectSyntheticEvent,
   useTrackElement,
   useWindowScrollerList
 } from "./hooks/index.js";
@@ -206,6 +208,7 @@ export {
   useHoverHandlersDelay,
   useIsMobile,
   useIsShowingEllipsis,
+  useLatestValueReferenciallyStable,
   useMakeMutable,
   useMeasure,
   useNativeIntersectionObserver,
@@ -218,6 +221,7 @@ export {
   usePrevious,
   useResizeObserver,
   useShouldRecalculate,
+  useSideEffectSyntheticEvent,
   useTrackElement,
   useWindowScrollerList,
   validDate,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default as getComponentFromProps } from './getComponentFromProps.js';\nexport { default as onClickHandlerForNonInteractiveElements } from './onClickHandlerForNonInteractiveElements.js';\nexport { capitalize } from './capitalize.js';\nexport { getObjectValuesToArray, getObjectKeysToArray } from './objectUtilities.js';\nexport {\n  checkEmpty,\n  checkNotEmpty,\n  contains,\n  equal,\n  greaterThan,\n  greaterThanOrEquals,\n  isIn,\n  isNotIn,\n  isNotNull,\n  isNull,\n  lessThanOrEquals,\n  notEqual,\n  startsWith,\n  validDate,\n} from './operators.js';\nexport {\n  addOrRemove,\n  arrayMove,\n  cloneDeep,\n  curry,\n  cx,\n  debounce,\n  differenceBy,\n  differenceWith,\n  filter,\n  findIndex,\n  get,\n  groupBy,\n  hashArray,\n  isBoolean,\n  isEmpty,\n  isEqual,\n  isEqualWith,\n  isFunction,\n  isNaN,\n  isObject,\n  isString,\n  maxBy,\n  meanBy,\n  noop,\n  omit,\n  orderBy,\n  padStart,\n  parseInt,\n  pick,\n  pickBy,\n  property,\n  pull,\n  range,\n  removeUndefinedProperties,\n  runAll,\n  safeCall,\n  set,\n  sortBy,\n  sumBy,\n  throttle,\n  toggleInArray,\n  toggleInObject,\n  transform,\n  uniq,\n  uniqBy,\n  values,\n} from './utils.js';\nexport { setRef, mergeRefs, setMultipleRefs, logger } from './system.js';\nexport {\n  useCallbackAfterRender,\n  useCancellableDelayedCallback,\n  useDerivedStateFromProps,\n  useExecutionTimer,\n  useExpandState,\n  useFocusTrap,\n  UseFocusTrapWithSchema,\n  useForceUpdate,\n  useHeadlessTooltip,\n  useHotkeys,\n  useHoverHandlersDelay,\n  useIsMobile,\n  useIsShowingEllipsis,\n  useMakeMutable,\n  useMeasure,\n  useNativeIntersectionObserver,\n  useNativeResizeObserver,\n  useOnBlurOut,\n  UseOnBlurOutWithSchema,\n  useOnClickOutside,\n  useOnElementResize,\n  useOnFirstFocusIn,\n  UseOnFirstFocusInWithSchema,\n  useOnSpecificFocus,\n  UseOnSpecificFocusWithSchema,\n  usePrevious,\n  useResizeObserver,\n  useShouldRecalculate,\n  useTrackElement,\n  useWindowScrollerList,\n} from './hooks/index.js';\nexport { getVisibleTimeByFormat, addLeadingZeros } from './timeUtils.js';\nexport { compose } from './compose.js';\nexport { DOCUMENT, WINDOW } from './platform.js';\nexport { isDOMTypeElement } from './reactTypesUtility.js';\nexport { isRequired, isGreaterThan, isValidDate } from './validations.js';\nexport { getHighlightedRerendersStyle } from './getHighlightedRerendersStyle.js';\n\nexport { crossTypeSort } from './algorithms/crossTypeSort.js';\nexport { appendComponentIfNotExist } from './addComponentIfNotExists.js';\n// TODO -- REMOVE WHEN READY\nexport * from './deprecated/index.js';\nexport * from './props-helpers/index.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAoB,WAAXA,gBAAwC;AACjD,SAAoB,WAAXA,gBAA0D;AACnE,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB,4BAA4B;AAC7D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,QAAQ,WAAW,iBAAiB,cAAc;AAC3D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB,uBAAuB;AACxD,SAAS,eAAe;AACxB,SAAS,UAAU,cAAc;AACjC,SAAS,wBAAwB;AACjC,SAAS,YAAY,eAAe,mBAAmB;AACvD,SAAS,oCAAoC;AAE7C,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAE1C,cAAc;AACd,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default as getComponentFromProps } from './getComponentFromProps.js';\nexport { default as onClickHandlerForNonInteractiveElements } from './onClickHandlerForNonInteractiveElements.js';\nexport { capitalize } from './capitalize.js';\nexport { getObjectValuesToArray, getObjectKeysToArray } from './objectUtilities.js';\nexport {\n  checkEmpty,\n  checkNotEmpty,\n  contains,\n  equal,\n  greaterThan,\n  greaterThanOrEquals,\n  isIn,\n  isNotIn,\n  isNotNull,\n  isNull,\n  lessThanOrEquals,\n  notEqual,\n  startsWith,\n  validDate,\n} from './operators.js';\nexport {\n  addOrRemove,\n  arrayMove,\n  cloneDeep,\n  curry,\n  cx,\n  debounce,\n  differenceBy,\n  differenceWith,\n  filter,\n  findIndex,\n  get,\n  groupBy,\n  hashArray,\n  isBoolean,\n  isEmpty,\n  isEqual,\n  isEqualWith,\n  isFunction,\n  isNaN,\n  isObject,\n  isString,\n  maxBy,\n  meanBy,\n  noop,\n  omit,\n  orderBy,\n  padStart,\n  parseInt,\n  pick,\n  pickBy,\n  property,\n  pull,\n  range,\n  removeUndefinedProperties,\n  runAll,\n  safeCall,\n  set,\n  sortBy,\n  sumBy,\n  throttle,\n  toggleInArray,\n  toggleInObject,\n  transform,\n  uniq,\n  uniqBy,\n  values,\n} from './utils.js';\nexport { setRef, mergeRefs, setMultipleRefs, logger } from './system.js';\nexport {\n  useCallbackAfterRender,\n  useCancellableDelayedCallback,\n  useDerivedStateFromProps,\n  useExecutionTimer,\n  useExpandState,\n  useFocusTrap,\n  UseFocusTrapWithSchema,\n  useForceUpdate,\n  useHeadlessTooltip,\n  useHotkeys,\n  useHoverHandlersDelay,\n  useIsMobile,\n  useIsShowingEllipsis,\n  useMakeMutable,\n  useLatestValueReferenciallyStable,\n  useMeasure,\n  useNativeIntersectionObserver,\n  useNativeResizeObserver,\n  useOnBlurOut,\n  UseOnBlurOutWithSchema,\n  useOnClickOutside,\n  useOnElementResize,\n  useOnFirstFocusIn,\n  UseOnFirstFocusInWithSchema,\n  useOnSpecificFocus,\n  UseOnSpecificFocusWithSchema,\n  usePrevious,\n  useResizeObserver,\n  useShouldRecalculate,\n  useSideEffectSyntheticEvent,\n  useTrackElement,\n  useWindowScrollerList,\n} from './hooks/index.js';\nexport { getVisibleTimeByFormat, addLeadingZeros } from './timeUtils.js';\nexport { compose } from './compose.js';\nexport { DOCUMENT, WINDOW } from './platform.js';\nexport { isDOMTypeElement } from './reactTypesUtility.js';\nexport { isRequired, isGreaterThan, isValidDate } from './validations.js';\nexport { getHighlightedRerendersStyle } from './getHighlightedRerendersStyle.js';\n\nexport { crossTypeSort } from './algorithms/crossTypeSort.js';\nexport { appendComponentIfNotExist } from './addComponentIfNotExists.js';\n// TODO -- REMOVE WHEN READY\nexport * from './deprecated/index.js';\nexport * from './props-helpers/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAoB,WAAXA,gBAAwC;AACjD,SAAoB,WAAXA,gBAA0D;AACnE,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB,4BAA4B;AAC7D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,QAAQ,WAAW,iBAAiB,cAAc;AAC3D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB,uBAAuB;AACxD,SAAS,eAAe;AACxB,SAAS,UAAU,cAAc;AACjC,SAAS,wBAAwB;AACjC,SAAS,YAAY,eAAe,mBAAmB;AACvD,SAAS,oCAAoC;AAE7C,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAE1C,cAAc;AACd,cAAc;",
   "names": ["default"]
 }

package/dist/types/hooks/index.d.ts

@@ -12,7 +12,7 @@ export { useHotkeys } from './useHotkeys.js';
 export { useHoverHandlersDelay } from './useHoverHandlersDelay.js';
 export { useIsMobile } from './useIsMobile.js';
 export { useIsShowingEllipsis } from './useIsShowingEllipsis.js';
-export { useMakeMutable } from './useMakeMutable.js';
+export { useMakeMutable, useLatestValueReferenciallyStable } from './useMakeMutable.js';
 export { useNativeIntersectionObserver } from './useNativeIntersectionObserver.js';
 export { useNativeResizeObserver } from './useNativeResizeObserver.js';
 export { useOnBlurOut, UseOnBlurOutWithSchema } from './useOnBlurOut.js';
@@ -22,5 +22,6 @@ export { useOnSpecificFocus, UseOnSpecificFocusWithSchema } from './useOnSpecifi
 export { usePrevious } from './usePrevious.js';
 export { useResizeObserver } from './useResizeObserver.js';
 export { useShouldRecalculate } from './useShouldRecalculate.js';
+export { useSideEffectSyntheticEvent } from './useSideEffectSyntheticEvent.js';
 export { useTrackElement } from './useTrackElement.js';
 export { useWindowScrollerList } from './useWindowScrollerList.js';

package/dist/types/hooks/useMakeMutable.d.ts

@@ -1,4 +1,40 @@
-/// <reference types="react" />
+import type React from 'react';
 type UseMakeMutable = <T>(referenceVar: T) => React.MutableRefObject<T>;
+/**
+ * For specific scenarios we need to be able to read the latest value of a variable at execution time without triggering dependency updates on useEffect/useCallback/useMemo
+ * This is a custom hook that allows us to do that, with a performance overhead of a useEffect and a memory overhead of a ref.
+ * @param {any} referenceVar - the value to be made "referentially stable", this works with primitive values and values by reference
+ * @returns {object} - an object with a "current" property that holds the latest value of the variable passed as argument
+ * @property {any} current - the latest value of the variable passed as argument
+ * @example
+ * const Comp = ({ value }) => {
+ *  const latestValueRef = useMakeMutable(value);
+ *  React.useEffect(() => {
+ *   console.log(latestValueRef.current); // this will log 'hola' at the time of execution
+ *  }, []);
+ *  latestValueRef.current = 'hola'; // this will update the latest value of "value" at the time of execution
+ *  ...
+ *  return <div>...</div>
+ * }
+ */
 export declare const useMakeMutable: UseMakeMutable;
+/**
+ * For specific scenarios we need to be able to read the latest value of a variable at execution time without triggering dependency updates on useEffect/useCallback/useMemo
+ * This is a custom hook that allows us to do that, with a performance overhead of a useEffect and a memory overhead of a ref.
+ * N.B. this is the same as useMakeMutable, but with a more explicit name.
+ * @param {any} referenceVar - the value to be made "referentially stable", this works with primitive values and values by reference
+ * @returns {object} - an object with a "current" property that holds the latest value of the variable passed as argument
+ * @property {any} current - the latest value of the variable passed as argument
+ * @example
+ * const Comp = ({ value }) => {
+ *  const latestValueRef = useLatestValueReferenciallyStable(value);
+ *  React.useEffect(() => {
+ *   console.log(latestValueRef.current); // this will log 'hola' at the time of execution
+ *  }, []);
+ *  latestValueRef.current = 'hola'; // this will update the latest value of "value" at the time of execution
+ *  ...
+ *  return <div>...</div>
+ * }
+ */
+export declare const useLatestValueReferenciallyStable: UseMakeMutable;
 export {};

package/dist/types/hooks/useSideEffectSyntheticEvent.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This is a custom hook that allows us to simulate a synthetic event. This ensure we only trigger a side effect when a specific variable(dependency) changes.
+ * @param {any} dependency - the variable that we want to listen to
+ * @param {Function} callback - the callback that we want to execute when the dependency changes
+ * @param {object} callbackOpts - the options to be passed to the callback function
+ * @returns {void}
+ * @invoke useLatestValueReferenciallyStable
+ */
+export declare const useSideEffectSyntheticEvent: <T, CBOpts>(dependency: T, callback: (latestVal: T, opts: CBOpts) => void, callbackOpts: CBOpts) => void;

package/dist/types/index.d.ts

@@ -5,7 +5,7 @@ export { getObjectValuesToArray, getObjectKeysToArray } from './objectUtilities.
 export { checkEmpty, checkNotEmpty, contains, equal, greaterThan, greaterThanOrEquals, isIn, isNotIn, isNotNull, isNull, lessThanOrEquals, notEqual, startsWith, validDate, } from './operators.js';
 export { addOrRemove, arrayMove, cloneDeep, curry, cx, debounce, differenceBy, differenceWith, filter, findIndex, get, groupBy, hashArray, isBoolean, isEmpty, isEqual, isEqualWith, isFunction, isNaN, isObject, isString, maxBy, meanBy, noop, omit, orderBy, padStart, parseInt, pick, pickBy, property, pull, range, removeUndefinedProperties, runAll, safeCall, set, sortBy, sumBy, throttle, toggleInArray, toggleInObject, transform, uniq, uniqBy, values, } from './utils.js';
 export { setRef, mergeRefs, setMultipleRefs, logger } from './system.js';
-export { useCallbackAfterRender, useCancellableDelayedCallback, useDerivedStateFromProps, useExecutionTimer, useExpandState, useFocusTrap, UseFocusTrapWithSchema, useForceUpdate, useHeadlessTooltip, useHotkeys, useHoverHandlersDelay, useIsMobile, useIsShowingEllipsis, useMakeMutable, useMeasure, useNativeIntersectionObserver, useNativeResizeObserver, useOnBlurOut, UseOnBlurOutWithSchema, useOnClickOutside, useOnElementResize, useOnFirstFocusIn, UseOnFirstFocusInWithSchema, useOnSpecificFocus, UseOnSpecificFocusWithSchema, usePrevious, useResizeObserver, useShouldRecalculate, useTrackElement, useWindowScrollerList, } from './hooks/index.js';
+export { useCallbackAfterRender, useCancellableDelayedCallback, useDerivedStateFromProps, useExecutionTimer, useExpandState, useFocusTrap, UseFocusTrapWithSchema, useForceUpdate, useHeadlessTooltip, useHotkeys, useHoverHandlersDelay, useIsMobile, useIsShowingEllipsis, useMakeMutable, useLatestValueReferenciallyStable, useMeasure, useNativeIntersectionObserver, useNativeResizeObserver, useOnBlurOut, UseOnBlurOutWithSchema, useOnClickOutside, useOnElementResize, useOnFirstFocusIn, UseOnFirstFocusInWithSchema, useOnSpecificFocus, UseOnSpecificFocusWithSchema, usePrevious, useResizeObserver, useShouldRecalculate, useSideEffectSyntheticEvent, useTrackElement, useWindowScrollerList, } from './hooks/index.js';
 export { getVisibleTimeByFormat, addLeadingZeros } from './timeUtils.js';
 export { compose } from './compose.js';
 export { DOCUMENT, WINDOW } from './platform.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-utilities",
-  "version": "3.22.0-next.2",
+  "version": "3.22.0-next.21",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Utilities",
   "files": [
@@ -160,12 +160,14 @@
     "use-force-update": "~1.0.11",
     "use-measure": "~0.3.0",
     "use-onclickoutside": "~0.4.1",
-    "@elliemae/ds-props-helpers": "3.22.0-next.2"
+    "@elliemae/ds-props-helpers": "3.22.0-next.21"
   },
   "devDependencies": {
+    "@elliemae/pui-cli": "~9.0.0-next.22",
     "@testing-library/react": "~12.1.3",
     "@testing-library/react-hooks": "~8.0.1",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "@elliemae/ds-monorepo-devops": "3.22.0-next.21"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
@@ -173,7 +175,7 @@
     "react-dom": "^17.0.2"
   },
   "scripts": {
-    "test": "node ../../scripts/testing/test.mjs",
+    "test": "pui-cli test --passWithNoTests",
     "lint": "node ../../scripts/lint.mjs",
     "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
     "dts": "node ../../scripts/dts.mjs",