@elliemae/ds-utilities 3.16.4-rc.2 → 3.16.4

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/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,
@@ -151,6 +152,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  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;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;AACvD,0CAA6C;AAE7C,2BAA8B;AAG9B,wBAAc,kCA5Gd;AA6GA,wBAAc,qCA7Gd;",
   "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/index.js

@@ -102,6 +102,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 +133,7 @@ export {
   findIndex,
   get,
   default2 as getComponentFromProps,
+  getHighlightedRerendersStyle,
   getObjectKeysToArray,
   getObjectValuesToArray,
   getVisibleTimeByFormat,

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  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,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/index.d.ts

@@ -11,6 +11,7 @@ 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.16.4-rc.2",
+  "version": "3.16.4",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Utilities",
   "files": [
@@ -159,7 +159,7 @@
     "use-force-update": "~1.0.11",
     "use-measure": "~0.3.0",
     "use-onclickoutside": "~0.4.1",
-    "@elliemae/ds-props-helpers": "3.16.4-rc.2"
+    "@elliemae/ds-props-helpers": "3.16.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "~5.16.5",