@elliemae/ds-utilities 3.17.0-next.1 → 3.17.0-next.11

package/dist/cjs/getHighlightedRerendersStyle.js

@@ -0,0 +1,63 @@
+"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 getHighlightedRerendersStyle_exports = {};
+__export(getHighlightedRerendersStyle_exports, {
+  getHighlightedRerendersStyle: () => getHighlightedRerendersStyle
+});
+module.exports = __toCommonJS(getHighlightedRerendersStyle_exports);
+var React = __toESM(require("react"));
+const getRandomColor = () => {
+  const r = Math.floor(Math.random() * 256);
+  const g = Math.floor(Math.random() * 256);
+  const b = Math.floor(Math.random() * 256);
+  return `rgb(${r}, ${g}, ${b})`;
+};
+const getReadableColor = (rgbColorString) => {
+  if (!rgbColorString.match(/^rgb\(\d+, \d+, \d+\)$/)) {
+    throw new Error(
+      `The input color string "${rgbColorString}" is not in the correct format. The correct format is "rgb(r, g, b)" where r, g, and b are integers between 0 and 255.`
+    );
+  }
+  const [r, g, b] = rgbColorString.match(/\d+/g)?.map((numStr) => parseInt(numStr)) ?? [0, 0, 0];
+  const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+  const blackLuminance = 0;
+  const whiteLuminance = 1;
+  const luminanceDiffBlack = Math.abs(luminance - blackLuminance);
+  const luminanceDiffWhite = Math.abs(luminance - whiteLuminance);
+  const textColor = luminanceDiffBlack > luminanceDiffWhite ? "rgb(0, 0, 0)" : "rgb(255, 255, 255)";
+  return textColor;
+};
+const getHighlightedRerendersStyle = () => {
+  const randColor = getRandomColor();
+  return {
+    backgroundColor: randColor,
+    color: getReadableColor(randColor)
+  };
+};
+//# sourceMappingURL=getHighlightedRerendersStyle.js.map

package/dist/cjs/getHighlightedRerendersStyle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/getHighlightedRerendersStyle.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type React from 'react';\n\n// a strict type definition for rgb color strings\ntype RGBColorString = `rgb(${number}, ${number}, ${number})`;\n\n/**\n * This function returns a random color string in the format \"rgb(r, g, b)\"\n * This is meant to be used in conjunction with the getHighlightedRerendersStyle function.\n * This is not meant to be used in production, just a development tool.\n *\n * @returns {string} the random color string\n * @example\n * const color = getRandomColor(); // returns 'rgb(255, 255, 255)'\n * const color = getRandomColor(); // returns 'rgb(0, 0, 0)'\n * const color = getRandomColor(); // returns 'rgb(255, 0, 0)'\n * const color = getRandomColor(); // returns 'rgb(0, 255, 0)'\n * // etc...\n */\n\nconst getRandomColor = (): RGBColorString => {\n  // generate random values for r, g, and b between 0 and 255\n  const r = Math.floor(Math.random() * 256);\n  const g = Math.floor(Math.random() * 256);\n  const b = Math.floor(Math.random() * 256);\n\n  // return the color string in the format \"rgb(r, g, b)\"\n  return `rgb(${r}, ${g}, ${b})`;\n};\n\n// type definition for getReadableColor\n\ntype GetReadableColor = (rgbColorString: RGBColorString) => RGBColorString;\n/**\n * This function returns a readable color for the input color string.\n * This is meant to be used in conjunction with the getHighlightedRerendersStyle function.\n * This is not meant to be used in production, just a development tool.\n *\n * @param {RGBColorString} rgbColorString the rgb color string to get a readable color for\n * @returns {RGBColorString} the readable color string\n * @example\n * const textColor = getReadableColor('rgb(255, 255, 255)'); // returns 'rgb(0, 0, 0)'\n * const textColor = getReadableColor('rgb(0, 0, 0)'); // returns 'rgb(255, 255, 255)'\n * const textColor = getReadableColor('rgb(255, 0, 0)'); // returns 'rgb(255, 255, 255)'\n * const textColor = getReadableColor('rgb(0, 255, 0)'); // returns 'rgb(0, 0, 0)'\n * // etc...\n */\nconst getReadableColor: GetReadableColor = (rgbColorString) => {\n  // if the input color string is not in the correct format, throw an error\n  if (!rgbColorString.match(/^rgb\\(\\d+, \\d+, \\d+\\)$/)) {\n    throw new Error(\n      `The input color string \"${rgbColorString}\" is not in the correct format. The correct format is \"rgb(r, g, b)\" where r, g, and b are integers between 0 and 255.`,\n    );\n  }\n  // extract the r, g, and b values from the string\n  const [r, g, b] = rgbColorString.match(/\\d+/g)?.map((numStr) => parseInt(numStr)) ?? [0, 0, 0];\n\n  // calculate the relative luminance of the input color using the sRGB color space\n  const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;\n\n  // calculate the luminance of black and white colors\n  const blackLuminance = 0;\n  const whiteLuminance = 1;\n\n  // calculate the luminance differences between the input color and black and white\n  const luminanceDiffBlack = Math.abs(luminance - blackLuminance);\n  const luminanceDiffWhite = Math.abs(luminance - whiteLuminance);\n\n  // determine whether the input color is closer to black or white\n  const textColor =\n    luminanceDiffBlack > luminanceDiffWhite\n      ? 'rgb(0, 0, 0)' // use white text for lighter colors\n      : 'rgb(255, 255, 255)'; // use black text for darker colors\n\n  // return the text color string\n  return textColor;\n};\n// type definition for getHighlightedRerendersStyle\n// this function returns an object with the style properties for the highlighted rerenders\n\ntype GetHighlightedRerendersStyle = () => Partial<React.CSSProperties>;\n/**\n * This function returns an object with the style properties for highlighting rerenders.\n * this is meant to be invoked each time a component rerenders to get a new color combination\n * this is not meant to be used in production, just a development tool.\n *\n * @returns {Partial<React.CSSProperties>} an object with the style properties for the highlighted rerenders\n */\nexport const getHighlightedRerendersStyle: GetHighlightedRerendersStyle = () => {\n  const randColor = getRandomColor();\n  return {\n    backgroundColor: randColor,\n    color: getReadableColor(randColor),\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBvB,MAAM,iBAAiB,MAAsB;AAE3C,QAAM,IAAI,KAAK,MAAM,KAAK,OAAO,IAAI,GAAG;AACxC,QAAM,IAAI,KAAK,MAAM,KAAK,OAAO,IAAI,GAAG;AACxC,QAAM,IAAI,KAAK,MAAM,KAAK,OAAO,IAAI,GAAG;AAGxC,SAAO,OAAO,MAAM,MAAM;AAC5B;AAmBA,MAAM,mBAAqC,CAAC,mBAAmB;AAE7D,MAAI,CAAC,eAAe,MAAM,wBAAwB,GAAG;AACnD,UAAM,IAAI;AAAA,MACR,2BAA2B;AAAA,IAC7B;AAAA,EACF;AAEA,QAAM,CAAC,GAAG,GAAG,CAAC,IAAI,eAAe,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,SAAS,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;AAG7F,QAAM,aAAa,SAAS,IAAI,SAAS,IAAI,SAAS,KAAK;AAG3D,QAAM,iBAAiB;AACvB,QAAM,iBAAiB;AAGvB,QAAM,qBAAqB,KAAK,IAAI,YAAY,cAAc;AAC9D,QAAM,qBAAqB,KAAK,IAAI,YAAY,cAAc;AAG9D,QAAM,YACJ,qBAAqB,qBACjB,iBACA;AAGN,SAAO;AACT;AAYO,MAAM,+BAA6D,MAAM;AAC9E,QAAM,YAAY,eAAe;AACjC,SAAO;AAAA,IACL,iBAAiB;AAAA,IACjB,OAAO,iBAAiB,SAAS;AAAA,EACnC;AACF;",
+  "names": []
+}

package/dist/cjs/hooks/index.js

@@ -46,6 +46,7 @@ __export(hooks_exports, {
   useIsShowingEllipsis: () => import_useIsShowingEllipsis.useIsShowingEllipsis,
   useMakeMutable: () => import_useMakeMutable.useMakeMutable,
   useMeasure: () => import_use_measure.default,
+  useNativeResizeObserver: () => import_useNativeResizeObserver.useNativeResizeObserver,
   useOnBlurOut: () => import_useOnBlurOut.useOnBlurOut,
   useOnClickOutside: () => import_use_onclickoutside.default,
   useOnElementResize: () => import_useOnElementResize.useOnElementResize,
@@ -73,6 +74,7 @@ var import_useHoverHandlersDelay = require("./useHoverHandlersDelay.js");
 var import_useIsMobile = require("./useIsMobile.js");
 var import_useIsShowingEllipsis = require("./useIsShowingEllipsis.js");
 var import_useMakeMutable = require("./useMakeMutable.js");
+var import_useNativeResizeObserver = require("./useNativeResizeObserver.js");
 var import_useOnBlurOut = require("./useOnBlurOut.js");
 var import_useOnElementResize = require("./useOnElementResize.js");
 var import_useOnFirstFocusIn = require("./useOnFirstFocusIn.js");

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 { 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 { 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;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,0BAAqD;AACrD,gCAAmC;AACnC,+BAA+D;AAC/D,gCAAiE;AACjE,yBAA4B;AAC5B,+BAAkC;AAClC,kCAAqC;AACrC,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 } from './useMakeMutable.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 { 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;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,qCAAwC;AACxC,0BAAqD;AACrD,gCAAmC;AACnC,+BAA+D;AAC/D,gCAAiE;AACjE,yBAA4B;AAC5B,+BAAkC;AAClC,kCAAqC;AACrC,mCAAsC;",
   "names": []
 }

package/dist/cjs/index.js

@@ -55,6 +55,7 @@ __export(src_exports, {
   findIndex: () => import_utils.findIndex,
   get: () => import_utils.get,
   getComponentFromProps: () => import_getComponentFromProps.default,
+  getHighlightedRerendersStyle: () => import_getHighlightedRerendersStyle.getHighlightedRerendersStyle,
   getObjectKeysToArray: () => import_objectUtilities.getObjectKeysToArray,
   getObjectValuesToArray: () => import_objectUtilities.getObjectValuesToArray,
   getVisibleTimeByFormat: () => import_timeUtils.getVisibleTimeByFormat,
@@ -124,6 +125,7 @@ __export(src_exports, {
   useIsShowingEllipsis: () => import_hooks.useIsShowingEllipsis,
   useMakeMutable: () => import_hooks.useMakeMutable,
   useMeasure: () => import_hooks.useMeasure,
+  useNativeResizeObserver: () => import_hooks.useNativeResizeObserver,
   useOnBlurOut: () => import_hooks.useOnBlurOut,
   useOnClickOutside: () => import_hooks.useOnClickOutside,
   useOnElementResize: () => import_hooks.useOnElementResize,
@@ -151,6 +153,7 @@ var import_compose = require("./compose.js");
 var import_platform = require("./platform.js");
 var import_reactTypesUtility = require("./reactTypesUtility.js");
 var import_validations = require("./validations.js");
+var import_getHighlightedRerendersStyle = require("./getHighlightedRerendersStyle.js");
 var import_crossTypeSort = require("./algorithms/crossTypeSort.js");
 __reExport(src_exports, require("./deprecated/index.js"), module.exports);
 __reExport(src_exports, require("./props-helpers/index.js"), module.exports);

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  checkNotEmpty,\n  checkEmpty,\n  greaterThan,\n  validDate,\n  equal,\n  notEqual,\n  isNull,\n  isNotNull,\n  isIn,\n  isNotIn,\n  greaterThanOrEquals,\n  lessThanOrEquals,\n  startsWith,\n  contains,\n} from './operators.js';\nexport {\n  cx,\n  runAll,\n  hashArray,\n  safeCall,\n  removeUndefinedProperties,\n  isObject,\n  curry,\n  arrayMove,\n  uniq,\n  filter,\n  uniqBy,\n  groupBy,\n  property,\n  get,\n  set,\n  cloneDeep,\n  debounce,\n  findIndex,\n  isEmpty,\n  isString,\n  isEqual,\n  maxBy,\n  meanBy,\n  noop,\n  omit,\n  orderBy,\n  pull,\n  sortBy,\n  sumBy,\n  transform,\n  isFunction,\n  range,\n  parseInt,\n  padStart,\n  isNaN,\n  values,\n  throttle,\n  toggleInObject,\n  toggleInArray,\n  pick,\n  pickBy,\n  differenceBy,\n  differenceWith,\n  addOrRemove,\n  isEqualWith,\n  isBoolean,\n} from './utils.js';\nexport { setRef, mergeRefs, setMultipleRefs, logger } from './system.js';\nexport {\n  useMeasure,\n  useForceUpdate,\n  useOnClickOutside,\n  useExecutionTimer,\n  useExpandState,\n  useHotkeys,\n  useHoverHandlersDelay,\n  useResizeObserver,\n  useShouldRecalculate,\n  useWindowScrollerList,\n  usePrevious,\n  useCancellableDelayedCallback,\n  useDerivedStateFromProps,\n  useOnElementResize,\n  useIsShowingEllipsis,\n  useMakeMutable,\n  useCallbackAfterRender,\n  useFocusTrap,\n  UseFocusTrapWithSchema,\n  useIsMobile,\n  useOnBlurOut,\n  UseOnBlurOutWithSchema,\n  useOnFirstFocusIn,\n  UseOnFirstFocusInWithSchema,\n  useOnSpecificFocus,\n  UseOnSpecificFocusWithSchema,\n  useHeadlessTooltip,\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';\n\nexport { crossTypeSort } from './algorithms/crossTypeSort.js';\n\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;ACAA,YAAuB;ADAvB,mCAAiD;AACjD,qDAAmE;AACnE,wBAA2B;AAC3B,6BAA6D;AAC7D,uBAeO;AACP,mBA+CO;AACP,oBAA2D;AAC3D,mBA4BO;AACP,uBAAwD;AACxD,qBAAwB;AACxB,sBAAiC;AACjC,+BAAiC;AACjC,yBAAuD;AAEvD,2BAA8B;AAG9B,wBAAc,kCA3Gd;AA4GA,wBAAc,qCA5Gd;",
+  "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  checkNotEmpty,\n  checkEmpty,\n  greaterThan,\n  validDate,\n  equal,\n  notEqual,\n  isNull,\n  isNotNull,\n  isIn,\n  isNotIn,\n  greaterThanOrEquals,\n  lessThanOrEquals,\n  startsWith,\n  contains,\n} from './operators.js';\nexport {\n  cx,\n  runAll,\n  hashArray,\n  safeCall,\n  removeUndefinedProperties,\n  isObject,\n  curry,\n  arrayMove,\n  uniq,\n  filter,\n  uniqBy,\n  groupBy,\n  property,\n  get,\n  set,\n  cloneDeep,\n  debounce,\n  findIndex,\n  isEmpty,\n  isString,\n  isEqual,\n  maxBy,\n  meanBy,\n  noop,\n  omit,\n  orderBy,\n  pull,\n  sortBy,\n  sumBy,\n  transform,\n  isFunction,\n  range,\n  parseInt,\n  padStart,\n  isNaN,\n  values,\n  throttle,\n  toggleInObject,\n  toggleInArray,\n  pick,\n  pickBy,\n  differenceBy,\n  differenceWith,\n  addOrRemove,\n  isEqualWith,\n  isBoolean,\n} from './utils.js';\nexport { setRef, mergeRefs, setMultipleRefs, logger } from './system.js';\nexport {\n  useMeasure,\n  useForceUpdate,\n  useOnClickOutside,\n  useExecutionTimer,\n  useExpandState,\n  useHotkeys,\n  useHoverHandlersDelay,\n  useResizeObserver,\n  useShouldRecalculate,\n  useWindowScrollerList,\n  usePrevious,\n  useCancellableDelayedCallback,\n  useDerivedStateFromProps,\n  useOnElementResize,\n  useIsShowingEllipsis,\n  useNativeResizeObserver,\n  useMakeMutable,\n  useCallbackAfterRender,\n  useFocusTrap,\n  UseFocusTrapWithSchema,\n  useIsMobile,\n  useOnBlurOut,\n  UseOnBlurOutWithSchema,\n  useOnFirstFocusIn,\n  UseOnFirstFocusInWithSchema,\n  useOnSpecificFocus,\n  UseOnSpecificFocusWithSchema,\n  useHeadlessTooltip,\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';\n\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;ACAA,YAAuB;ADAvB,mCAAiD;AACjD,qDAAmE;AACnE,wBAA2B;AAC3B,6BAA6D;AAC7D,uBAeO;AACP,mBA+CO;AACP,oBAA2D;AAC3D,mBA6BO;AACP,uBAAwD;AACxD,qBAAwB;AACxB,sBAAiC;AACjC,+BAAiC;AACjC,yBAAuD;AACvD,0CAA6C;AAE7C,2BAA8B;AAG9B,wBAAc,kCA7Gd;AA8GA,wBAAc,qCA9Gd;",
   "names": []
 }

package/dist/esm/getHighlightedRerendersStyle.js

@@ -0,0 +1,33 @@
+import * as React from "react";
+const getRandomColor = () => {
+  const r = Math.floor(Math.random() * 256);
+  const g = Math.floor(Math.random() * 256);
+  const b = Math.floor(Math.random() * 256);
+  return `rgb(${r}, ${g}, ${b})`;
+};
+const getReadableColor = (rgbColorString) => {
+  if (!rgbColorString.match(/^rgb\(\d+, \d+, \d+\)$/)) {
+    throw new Error(
+      `The input color string "${rgbColorString}" is not in the correct format. The correct format is "rgb(r, g, b)" where r, g, and b are integers between 0 and 255.`
+    );
+  }
+  const [r, g, b] = rgbColorString.match(/\d+/g)?.map((numStr) => parseInt(numStr)) ?? [0, 0, 0];
+  const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+  const blackLuminance = 0;
+  const whiteLuminance = 1;
+  const luminanceDiffBlack = Math.abs(luminance - blackLuminance);
+  const luminanceDiffWhite = Math.abs(luminance - whiteLuminance);
+  const textColor = luminanceDiffBlack > luminanceDiffWhite ? "rgb(0, 0, 0)" : "rgb(255, 255, 255)";
+  return textColor;
+};
+const getHighlightedRerendersStyle = () => {
+  const randColor = getRandomColor();
+  return {
+    backgroundColor: randColor,
+    color: getReadableColor(randColor)
+  };
+};
+export {
+  getHighlightedRerendersStyle
+};
+//# sourceMappingURL=getHighlightedRerendersStyle.js.map

package/dist/esm/getHighlightedRerendersStyle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/getHighlightedRerendersStyle.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\n\n// a strict type definition for rgb color strings\ntype RGBColorString = `rgb(${number}, ${number}, ${number})`;\n\n/**\n * This function returns a random color string in the format \"rgb(r, g, b)\"\n * This is meant to be used in conjunction with the getHighlightedRerendersStyle function.\n * This is not meant to be used in production, just a development tool.\n *\n * @returns {string} the random color string\n * @example\n * const color = getRandomColor(); // returns 'rgb(255, 255, 255)'\n * const color = getRandomColor(); // returns 'rgb(0, 0, 0)'\n * const color = getRandomColor(); // returns 'rgb(255, 0, 0)'\n * const color = getRandomColor(); // returns 'rgb(0, 255, 0)'\n * // etc...\n */\n\nconst getRandomColor = (): RGBColorString => {\n  // generate random values for r, g, and b between 0 and 255\n  const r = Math.floor(Math.random() * 256);\n  const g = Math.floor(Math.random() * 256);\n  const b = Math.floor(Math.random() * 256);\n\n  // return the color string in the format \"rgb(r, g, b)\"\n  return `rgb(${r}, ${g}, ${b})`;\n};\n\n// type definition for getReadableColor\n\ntype GetReadableColor = (rgbColorString: RGBColorString) => RGBColorString;\n/**\n * This function returns a readable color for the input color string.\n * This is meant to be used in conjunction with the getHighlightedRerendersStyle function.\n * This is not meant to be used in production, just a development tool.\n *\n * @param {RGBColorString} rgbColorString the rgb color string to get a readable color for\n * @returns {RGBColorString} the readable color string\n * @example\n * const textColor = getReadableColor('rgb(255, 255, 255)'); // returns 'rgb(0, 0, 0)'\n * const textColor = getReadableColor('rgb(0, 0, 0)'); // returns 'rgb(255, 255, 255)'\n * const textColor = getReadableColor('rgb(255, 0, 0)'); // returns 'rgb(255, 255, 255)'\n * const textColor = getReadableColor('rgb(0, 255, 0)'); // returns 'rgb(0, 0, 0)'\n * // etc...\n */\nconst getReadableColor: GetReadableColor = (rgbColorString) => {\n  // if the input color string is not in the correct format, throw an error\n  if (!rgbColorString.match(/^rgb\\(\\d+, \\d+, \\d+\\)$/)) {\n    throw new Error(\n      `The input color string \"${rgbColorString}\" is not in the correct format. The correct format is \"rgb(r, g, b)\" where r, g, and b are integers between 0 and 255.`,\n    );\n  }\n  // extract the r, g, and b values from the string\n  const [r, g, b] = rgbColorString.match(/\\d+/g)?.map((numStr) => parseInt(numStr)) ?? [0, 0, 0];\n\n  // calculate the relative luminance of the input color using the sRGB color space\n  const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;\n\n  // calculate the luminance of black and white colors\n  const blackLuminance = 0;\n  const whiteLuminance = 1;\n\n  // calculate the luminance differences between the input color and black and white\n  const luminanceDiffBlack = Math.abs(luminance - blackLuminance);\n  const luminanceDiffWhite = Math.abs(luminance - whiteLuminance);\n\n  // determine whether the input color is closer to black or white\n  const textColor =\n    luminanceDiffBlack > luminanceDiffWhite\n      ? 'rgb(0, 0, 0)' // use white text for lighter colors\n      : 'rgb(255, 255, 255)'; // use black text for darker colors\n\n  // return the text color string\n  return textColor;\n};\n// type definition for getHighlightedRerendersStyle\n// this function returns an object with the style properties for the highlighted rerenders\n\ntype GetHighlightedRerendersStyle = () => Partial<React.CSSProperties>;\n/**\n * This function returns an object with the style properties for highlighting rerenders.\n * this is meant to be invoked each time a component rerenders to get a new color combination\n * this is not meant to be used in production, just a development tool.\n *\n * @returns {Partial<React.CSSProperties>} an object with the style properties for the highlighted rerenders\n */\nexport const getHighlightedRerendersStyle: GetHighlightedRerendersStyle = () => {\n  const randColor = getRandomColor();\n  return {\n    backgroundColor: randColor,\n    color: getReadableColor(randColor),\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmBvB,MAAM,iBAAiB,MAAsB;AAE3C,QAAM,IAAI,KAAK,MAAM,KAAK,OAAO,IAAI,GAAG;AACxC,QAAM,IAAI,KAAK,MAAM,KAAK,OAAO,IAAI,GAAG;AACxC,QAAM,IAAI,KAAK,MAAM,KAAK,OAAO,IAAI,GAAG;AAGxC,SAAO,OAAO,MAAM,MAAM;AAC5B;AAmBA,MAAM,mBAAqC,CAAC,mBAAmB;AAE7D,MAAI,CAAC,eAAe,MAAM,wBAAwB,GAAG;AACnD,UAAM,IAAI;AAAA,MACR,2BAA2B;AAAA,IAC7B;AAAA,EACF;AAEA,QAAM,CAAC,GAAG,GAAG,CAAC,IAAI,eAAe,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,SAAS,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;AAG7F,QAAM,aAAa,SAAS,IAAI,SAAS,IAAI,SAAS,KAAK;AAG3D,QAAM,iBAAiB;AACvB,QAAM,iBAAiB;AAGvB,QAAM,qBAAqB,KAAK,IAAI,YAAY,cAAc;AAC9D,QAAM,qBAAqB,KAAK,IAAI,YAAY,cAAc;AAG9D,QAAM,YACJ,qBAAqB,qBACjB,iBACA;AAGN,SAAO;AACT;AAYO,MAAM,+BAA6D,MAAM;AAC9E,QAAM,YAAY,eAAe;AACjC,SAAO;AAAA,IACL,iBAAiB;AAAA,IACjB,OAAO,iBAAiB,SAAS;AAAA,EACnC;AACF;",
+  "names": []
+}

package/dist/esm/hooks/index.js

@@ -14,6 +14,7 @@ import { useHoverHandlersDelay } from "./useHoverHandlersDelay.js";
 import { useIsMobile } from "./useIsMobile.js";
 import { useIsShowingEllipsis } from "./useIsShowingEllipsis.js";
 import { useMakeMutable } from "./useMakeMutable.js";
+import { useNativeResizeObserver } from "./useNativeResizeObserver.js";
 import { useOnBlurOut, UseOnBlurOutWithSchema } from "./useOnBlurOut.js";
 import { useOnElementResize } from "./useOnElementResize.js";
 import { useOnFirstFocusIn, UseOnFirstFocusInWithSchema } from "./useOnFirstFocusIn.js";
@@ -41,6 +42,7 @@ export {
   useIsShowingEllipsis,
   useMakeMutable,
   default2 as useMeasure,
+  useNativeResizeObserver,
   useOnBlurOut,
   default4 as useOnClickOutside,
   useOnElementResize,

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 { 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 { 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,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,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 } from './useMakeMutable.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 { 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,+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,6BAA6B;",
   "names": ["default"]
 }

package/dist/esm/index.js

@@ -84,6 +84,7 @@ import {
   useDerivedStateFromProps,
   useOnElementResize,
   useIsShowingEllipsis,
+  useNativeResizeObserver,
   useMakeMutable,
   useCallbackAfterRender,
   useFocusTrap,
@@ -102,6 +103,7 @@ import { compose } from "./compose.js";
 import { DOCUMENT, WINDOW } from "./platform.js";
 import { isDOMTypeElement } from "./reactTypesUtility.js";
 import { isRequired, isGreaterThan, isValidDate } from "./validations.js";
+import { getHighlightedRerendersStyle } from "./getHighlightedRerendersStyle.js";
 import { crossTypeSort } from "./algorithms/crossTypeSort.js";
 export * from "./deprecated/index.js";
 export * from "./props-helpers/index.js";
@@ -132,6 +134,7 @@ export {
   findIndex,
   get,
   default2 as getComponentFromProps,
+  getHighlightedRerendersStyle,
   getObjectKeysToArray,
   getObjectValuesToArray,
   getVisibleTimeByFormat,
@@ -201,6 +204,7 @@ export {
   useIsShowingEllipsis,
   useMakeMutable,
   useMeasure,
+  useNativeResizeObserver,
   useOnBlurOut,
   useOnClickOutside,
   useOnElementResize,

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  checkNotEmpty,\n  checkEmpty,\n  greaterThan,\n  validDate,\n  equal,\n  notEqual,\n  isNull,\n  isNotNull,\n  isIn,\n  isNotIn,\n  greaterThanOrEquals,\n  lessThanOrEquals,\n  startsWith,\n  contains,\n} from './operators.js';\nexport {\n  cx,\n  runAll,\n  hashArray,\n  safeCall,\n  removeUndefinedProperties,\n  isObject,\n  curry,\n  arrayMove,\n  uniq,\n  filter,\n  uniqBy,\n  groupBy,\n  property,\n  get,\n  set,\n  cloneDeep,\n  debounce,\n  findIndex,\n  isEmpty,\n  isString,\n  isEqual,\n  maxBy,\n  meanBy,\n  noop,\n  omit,\n  orderBy,\n  pull,\n  sortBy,\n  sumBy,\n  transform,\n  isFunction,\n  range,\n  parseInt,\n  padStart,\n  isNaN,\n  values,\n  throttle,\n  toggleInObject,\n  toggleInArray,\n  pick,\n  pickBy,\n  differenceBy,\n  differenceWith,\n  addOrRemove,\n  isEqualWith,\n  isBoolean,\n} from './utils.js';\nexport { setRef, mergeRefs, setMultipleRefs, logger } from './system.js';\nexport {\n  useMeasure,\n  useForceUpdate,\n  useOnClickOutside,\n  useExecutionTimer,\n  useExpandState,\n  useHotkeys,\n  useHoverHandlersDelay,\n  useResizeObserver,\n  useShouldRecalculate,\n  useWindowScrollerList,\n  usePrevious,\n  useCancellableDelayedCallback,\n  useDerivedStateFromProps,\n  useOnElementResize,\n  useIsShowingEllipsis,\n  useMakeMutable,\n  useCallbackAfterRender,\n  useFocusTrap,\n  UseFocusTrapWithSchema,\n  useIsMobile,\n  useOnBlurOut,\n  UseOnBlurOutWithSchema,\n  useOnFirstFocusIn,\n  UseOnFirstFocusInWithSchema,\n  useOnSpecificFocus,\n  UseOnSpecificFocusWithSchema,\n  useHeadlessTooltip,\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';\n\nexport { crossTypeSort } from './algorithms/crossTypeSort.js';\n\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,OACK;AACP,SAAS,wBAAwB,uBAAuB;AACxD,SAAS,eAAe;AACxB,SAAS,UAAU,cAAc;AACjC,SAAS,wBAAwB;AACjC,SAAS,YAAY,eAAe,mBAAmB;AAEvD,SAAS,qBAAqB;AAG9B,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  checkNotEmpty,\n  checkEmpty,\n  greaterThan,\n  validDate,\n  equal,\n  notEqual,\n  isNull,\n  isNotNull,\n  isIn,\n  isNotIn,\n  greaterThanOrEquals,\n  lessThanOrEquals,\n  startsWith,\n  contains,\n} from './operators.js';\nexport {\n  cx,\n  runAll,\n  hashArray,\n  safeCall,\n  removeUndefinedProperties,\n  isObject,\n  curry,\n  arrayMove,\n  uniq,\n  filter,\n  uniqBy,\n  groupBy,\n  property,\n  get,\n  set,\n  cloneDeep,\n  debounce,\n  findIndex,\n  isEmpty,\n  isString,\n  isEqual,\n  maxBy,\n  meanBy,\n  noop,\n  omit,\n  orderBy,\n  pull,\n  sortBy,\n  sumBy,\n  transform,\n  isFunction,\n  range,\n  parseInt,\n  padStart,\n  isNaN,\n  values,\n  throttle,\n  toggleInObject,\n  toggleInArray,\n  pick,\n  pickBy,\n  differenceBy,\n  differenceWith,\n  addOrRemove,\n  isEqualWith,\n  isBoolean,\n} from './utils.js';\nexport { setRef, mergeRefs, setMultipleRefs, logger } from './system.js';\nexport {\n  useMeasure,\n  useForceUpdate,\n  useOnClickOutside,\n  useExecutionTimer,\n  useExpandState,\n  useHotkeys,\n  useHoverHandlersDelay,\n  useResizeObserver,\n  useShouldRecalculate,\n  useWindowScrollerList,\n  usePrevious,\n  useCancellableDelayedCallback,\n  useDerivedStateFromProps,\n  useOnElementResize,\n  useIsShowingEllipsis,\n  useNativeResizeObserver,\n  useMakeMutable,\n  useCallbackAfterRender,\n  useFocusTrap,\n  UseFocusTrapWithSchema,\n  useIsMobile,\n  useOnBlurOut,\n  UseOnBlurOutWithSchema,\n  useOnFirstFocusIn,\n  UseOnFirstFocusInWithSchema,\n  useOnSpecificFocus,\n  UseOnSpecificFocusWithSchema,\n  useHeadlessTooltip,\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';\n\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,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;AAG9B,cAAc;AACd,cAAc;",
   "names": ["default"]
 }

package/dist/types/getHighlightedRerendersStyle.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+type GetHighlightedRerendersStyle = () => Partial<React.CSSProperties>;
+/**
+ * This function returns an object with the style properties for highlighting rerenders.
+ * this is meant to be invoked each time a component rerenders to get a new color combination
+ * this is not meant to be used in production, just a development tool.
+ *
+ * @returns {Partial<React.CSSProperties>} an object with the style properties for the highlighted rerenders
+ */
+export declare const getHighlightedRerendersStyle: GetHighlightedRerendersStyle;
+export {};

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

@@ -13,6 +13,7 @@ export { useHoverHandlersDelay } from './useHoverHandlersDelay.js';
 export { useIsMobile } from './useIsMobile.js';
 export { useIsShowingEllipsis } from './useIsShowingEllipsis.js';
 export { useMakeMutable } from './useMakeMutable.js';
+export { useNativeResizeObserver } from './useNativeResizeObserver.js';
 export { useOnBlurOut, UseOnBlurOutWithSchema } from './useOnBlurOut.js';
 export { useOnElementResize } from './useOnElementResize.js';
 export { useOnFirstFocusIn, UseOnFirstFocusInWithSchema } from './useOnFirstFocusIn.js';

package/dist/types/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-utilities",
-  "version": "3.17.0-next.1",
+  "version": "3.17.0-next.11",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Utilities",
   "files": [
@@ -152,18 +152,18 @@
   },
   "dependencies": {
     "@elliemae/pui-theme": "~2.7.0",
-    "hotkeys-js": "~3.10.1",
+    "hotkeys-js": "~3.10.2",
     "raf": "~3.4.1",
     "resize-observer-polyfill": "~1.5.1",
     "uncontrollable": "~7.2.1",
     "use-force-update": "~1.0.11",
     "use-measure": "~0.3.0",
     "use-onclickoutside": "~0.4.1",
-    "@elliemae/ds-props-helpers": "3.17.0-next.1"
+    "@elliemae/ds-props-helpers": "3.17.0-next.11"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.16.5",
-    "@testing-library/react": "~12.1.3"
+    "@testing-library/react": "~12.1.3",
+    "@testing-library/react-hooks": "~8.0.1"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",