@elliemae/ds-hooks-on-overflow-change 3.52.0-rc.25

package/dist/cjs/DSHooksIsOverflowing.js

@@ -0,0 +1,89 @@
+"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 DSHooksIsOverflowing_exports = {};
+__export(DSHooksIsOverflowing_exports, {
+  useOnOverflowChange: () => useOnOverflowChange,
+  useOnOverflowChangeWithSchema: () => useOnOverflowChangeWithSchema
+});
+module.exports = __toCommonJS(DSHooksIsOverflowing_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+const isOverflowing = (node) => node.offsetWidth < node.scrollWidth;
+const useOnOverflowChange = ({
+  onOverflowStateChange
+}) => {
+  const nodeForComparison = (0, import_react.useRef)(null);
+  const resizeObserver = (0, import_react.useRef)(null);
+  const previousOverflowState = (0, import_react.useRef)(null);
+  const onResizeNotifier = (0, import_react.useCallback)(
+    (node) => {
+      const isTruncating = isOverflowing(node);
+      if (previousOverflowState.current !== isTruncating) {
+        onOverflowStateChange(isTruncating);
+        previousOverflowState.current = isTruncating;
+      }
+    },
+    [onOverflowStateChange]
+  );
+  const handleRef = (0, import_react.useCallback)(
+    (node) => {
+      if (node) {
+        onResizeNotifier(node);
+        const didNodeChange = nodeForComparison.current !== node;
+        if (didNodeChange) {
+          if (resizeObserver.current) {
+            resizeObserver.current.disconnect();
+          }
+          resizeObserver.current = new ResizeObserver(() => {
+            onResizeNotifier(node);
+          });
+          resizeObserver.current.observe(node);
+          nodeForComparison.current = node;
+        }
+      }
+    },
+    [onResizeNotifier]
+  );
+  (0, import_react.useEffect)(
+    () => () => {
+      if (resizeObserver.current) {
+        resizeObserver.current.disconnect();
+      }
+    },
+    []
+  );
+  return (0, import_react.useMemo)(() => ({ handleRef }), [handleRef]);
+};
+useOnOverflowChange.displayName = "useOnOverflowChange";
+const useOnOverflowChangeWithSchema = (0, import_ds_props_helpers.describe)(useOnOverflowChange);
+useOnOverflowChangeWithSchema.propTypes = import_react_desc_prop_types.UseOnOverflowChangeTPropTypes;
+useOnOverflowChangeWithSchema.returnType = import_react_desc_prop_types.UseOnOverflowChangeTReturnType;
+//# sourceMappingURL=DSHooksIsOverflowing.js.map

package/dist/cjs/DSHooksIsOverflowing.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DSHooksIsOverflowing.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars\nimport React, { useCallback, useRef, useEffect, useMemo } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport {\n  type DSHooksUseOnOverflowChangeT,\n  UseOnOverflowChangeTPropTypes,\n  UseOnOverflowChangeTReturnType,\n} from './react-desc-prop-types.js';\n\nconst isOverflowing = (node: HTMLElement) => node.offsetWidth < node.scrollWidth;\n\nconst useOnOverflowChange: DSHooksUseOnOverflowChangeT.UseOnOverflowChange & { displayName: string } = ({\n  onOverflowStateChange,\n}) => {\n  const nodeForComparison = useRef<HTMLElement | null>(null);\n  const resizeObserver = useRef<ResizeObserver | null>(null);\n  const previousOverflowState = useRef<boolean | null>(null);\n\n  const onResizeNotifier = useCallback(\n    (node: HTMLElement) => {\n      const isTruncating = isOverflowing(node);\n\n      if (previousOverflowState.current !== isTruncating) {\n        onOverflowStateChange(isTruncating);\n        previousOverflowState.current = isTruncating;\n      }\n    },\n    [onOverflowStateChange],\n  );\n\n  const handleRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (node) {\n        onResizeNotifier(node);\n\n        const didNodeChange = nodeForComparison.current !== node;\n        if (didNodeChange) {\n          if (resizeObserver.current) {\n            resizeObserver.current.disconnect();\n          }\n\n          resizeObserver.current = new ResizeObserver(() => {\n            onResizeNotifier(node);\n          });\n          resizeObserver.current.observe(node);\n\n          nodeForComparison.current = node;\n        }\n      }\n    },\n    [onResizeNotifier],\n  );\n\n  useEffect(\n    () => () => {\n      if (resizeObserver.current) {\n        resizeObserver.current.disconnect();\n      }\n    },\n    [],\n  );\n\n  return useMemo(() => ({ handleRef }), [handleRef]);\n};\n\nuseOnOverflowChange.displayName = 'useOnOverflowChange';\n\nconst useOnOverflowChangeWithSchema = describe(useOnOverflowChange);\n\nuseOnOverflowChangeWithSchema.propTypes = UseOnOverflowChangeTPropTypes;\nuseOnOverflowChangeWithSchema.returnType = UseOnOverflowChangeTReturnType;\n\nexport { useOnOverflowChange, useOnOverflowChangeWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA+D;AAC/D,8BAAyB;AACzB,mCAIO;AAEP,MAAM,gBAAgB,CAAC,SAAsB,KAAK,cAAc,KAAK;AAErE,MAAM,sBAAiG,CAAC;AAAA,EACtG;AACF,MAAM;AACJ,QAAM,wBAAoB,qBAA2B,IAAI;AACzD,QAAM,qBAAiB,qBAA8B,IAAI;AACzD,QAAM,4BAAwB,qBAAuB,IAAI;AAEzD,QAAM,uBAAmB;AAAA,IACvB,CAAC,SAAsB;AACrB,YAAM,eAAe,cAAc,IAAI;AAEvC,UAAI,sBAAsB,YAAY,cAAc;AAClD,8BAAsB,YAAY;AAClC,8BAAsB,UAAU;AAAA,MAClC;AAAA,IACF;AAAA,IACA,CAAC,qBAAqB;AAAA,EACxB;AAEA,QAAM,gBAAY;AAAA,IAChB,CAAC,SAA6B;AAC5B,UAAI,MAAM;AACR,yBAAiB,IAAI;AAErB,cAAM,gBAAgB,kBAAkB,YAAY;AACpD,YAAI,eAAe;AACjB,cAAI,eAAe,SAAS;AAC1B,2BAAe,QAAQ,WAAW;AAAA,UACpC;AAEA,yBAAe,UAAU,IAAI,eAAe,MAAM;AAChD,6BAAiB,IAAI;AAAA,UACvB,CAAC;AACD,yBAAe,QAAQ,QAAQ,IAAI;AAEnC,4BAAkB,UAAU;AAAA,QAC9B;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AAEA;AAAA,IACE,MAAM,MAAM;AACV,UAAI,eAAe,SAAS;AAC1B,uBAAe,QAAQ,WAAW;AAAA,MACpC;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,aAAO,sBAAQ,OAAO,EAAE,UAAU,IAAI,CAAC,SAAS,CAAC;AACnD;AAEA,oBAAoB,cAAc;AAElC,MAAM,oCAAgC,kCAAS,mBAAmB;AAElE,8BAA8B,YAAY;AAC1C,8BAA8B,aAAa;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,37 @@
+"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 index_exports = {};
+__export(index_exports, {
+  useOnOverflowChange: () => import_DSHooksIsOverflowing.useOnOverflowChange,
+  useOnOverflowChangeWithSchema: () => import_DSHooksIsOverflowing.useOnOverflowChangeWithSchema
+});
+module.exports = __toCommonJS(index_exports);
+var React = __toESM(require("react"));
+var import_DSHooksIsOverflowing = require("./DSHooksIsOverflowing.js");
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export { useOnOverflowChange, useOnOverflowChangeWithSchema } from './DSHooksIsOverflowing.js';\nexport { type DSHooksUseOnOverflowChangeT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,kCAAmE;",
+  "names": []
+}

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/cjs/react-desc-prop-types.js

@@ -0,0 +1,47 @@
+"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 react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  UseOnOverflowChangeTPropTypes: () => UseOnOverflowChangeTPropTypes,
+  UseOnOverflowChangeTReturnType: () => UseOnOverflowChangeTReturnType
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+const UseOnOverflowChangeTPropTypes = {
+  onOverflowStateChange: import_ds_props_helpers.PropTypes.func.description(
+    "Callback function triggered when the overflow state changes. Receives a boolean indicating whether the content is overflowing."
+  ).isRequired
+};
+const UseOnOverflowChangeTReturnType = {
+  handleRef: import_ds_props_helpers.PropTypes.func.description(
+    "Function to be passed as a ref to the element being monitored for overflow changes."
+  ).isRequired
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSHooksUseOnOverflowChangeT {\n  export interface Arguments {\n    onOverflowStateChange: (isOverflowing: boolean) => void;\n  }\n\n  export interface ResultType {\n    handleRef: (node: HTMLElement | null) => void;\n  }\n\n  export type UseOnOverflowChange = (args: Arguments) => ResultType;\n}\n\nexport const UseOnOverflowChangeTPropTypes = {\n  onOverflowStateChange: PropTypes.func.description(\n    'Callback function triggered when the overflow state changes. Receives a boolean indicating whether the content is overflowing.',\n  ).isRequired,\n} as WeakValidationMap<unknown>;\n\nexport const UseOnOverflowChangeTReturnType = {\n  handleRef: PropTypes.func.description(\n    'Function to be passed as a ref to the element being monitored for overflow changes.',\n  ).isRequired,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAA0B;AAcnB,MAAM,gCAAgC;AAAA,EAC3C,uBAAuB,kCAAU,KAAK;AAAA,IACpC;AAAA,EACF,EAAE;AACJ;AAEO,MAAM,iCAAiC;AAAA,EAC5C,WAAW,kCAAU,KAAK;AAAA,IACxB;AAAA,EACF,EAAE;AACJ;",
+  "names": []
+}

package/dist/cjs/tests/overflow/DSHooksIsOverflowing.overflow.test.playwright.js

@@ -0,0 +1,66 @@
+"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 __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 React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_experimental_ct_react = require("@playwright/experimental-ct-react");
+var import_DSHooksIsOverflowingTestRenderer = require("./DSHooksIsOverflowingTestRenderer");
+const containerSelector = '[data-testid="container"]';
+const overflowStateSelector = '[data-testid="overflow-state"]';
+import_experimental_ct_react.test.describe("DSHooksIsOverflowingTestRenderer - Overflow Behavior", () => {
+  (0, import_experimental_ct_react.test)("Should detect overflow when content exceeds container width", async ({ mount, page }) => {
+    import_experimental_ct_react.test.setTimeout(2e4);
+    await mount(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSHooksIsOverflowingTestRenderer.DSHooksIsOverflowingTestRenderer, {}));
+    const container = page.locator(containerSelector);
+    await container.waitFor({ state: "attached" });
+    await container.evaluate((node) => {
+      node.style.width = "100px";
+    });
+    await (0, import_experimental_ct_react.expect)(page.locator(overflowStateSelector)).toContainText("Overflowing: true");
+  });
+  (0, import_experimental_ct_react.test)("Should detect no overflow when content fits within container", async ({ mount, page }) => {
+    import_experimental_ct_react.test.setTimeout(2e4);
+    await mount(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSHooksIsOverflowingTestRenderer.DSHooksIsOverflowingTestRenderer, {}));
+    const container = page.locator(containerSelector);
+    await container.waitFor({ state: "attached" });
+    await container.evaluate((node) => {
+      node.style.width = "500px";
+    });
+    await (0, import_experimental_ct_react.expect)(page.locator(overflowStateSelector)).toContainText("Overflowing: false");
+  });
+  (0, import_experimental_ct_react.test)("Should update overflow state dynamically when container size changes", async ({ mount, page }) => {
+    import_experimental_ct_react.test.setTimeout(2e4);
+    await mount(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSHooksIsOverflowingTestRenderer.DSHooksIsOverflowingTestRenderer, {}));
+    const container = page.locator(containerSelector);
+    await container.waitFor({ state: "attached" });
+    await container.evaluate((node) => {
+      node.style.width = "500px";
+    });
+    await (0, import_experimental_ct_react.expect)(page.locator(overflowStateSelector)).toContainText("Overflowing: false");
+    await container.evaluate((node) => {
+      node.style.width = "100px";
+    });
+    await (0, import_experimental_ct_react.expect)(page.locator(overflowStateSelector)).toContainText("Overflowing: true");
+  });
+});
+//# sourceMappingURL=DSHooksIsOverflowing.overflow.test.playwright.js.map

package/dist/cjs/tests/overflow/DSHooksIsOverflowing.overflow.test.playwright.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/tests/overflow/DSHooksIsOverflowing.overflow.test.playwright.jsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { expect, test } from '@playwright/experimental-ct-react';\nimport { DSHooksIsOverflowingTestRenderer } from './DSHooksIsOverflowingTestRenderer';\n\nconst containerSelector = '[data-testid=\"container\"]';\nconst overflowStateSelector = '[data-testid=\"overflow-state\"]';\n\ntest.describe('DSHooksIsOverflowingTestRenderer - Overflow Behavior', () => {\n  test('Should detect overflow when content exceeds container width', async ({ mount, page }) => {\n    test.setTimeout(20000);\n    await mount(<DSHooksIsOverflowingTestRenderer />);\n    const container = page.locator(containerSelector);\n    await container.waitFor({ state: 'attached' });\n\n    await container.evaluate((node) => {\n      node.style.width = '100px';\n    });\n\n    await expect(page.locator(overflowStateSelector)).toContainText('Overflowing: true');\n  });\n\n  test('Should detect no overflow when content fits within container', async ({ mount, page }) => {\n    test.setTimeout(20000);\n    await mount(<DSHooksIsOverflowingTestRenderer />);\n    const container = page.locator(containerSelector);\n    await container.waitFor({ state: 'attached' });\n\n    await container.evaluate((node) => {\n      node.style.width = '500px';\n    });\n\n    await expect(page.locator(overflowStateSelector)).toContainText('Overflowing: false');\n  });\n\n  test('Should update overflow state dynamically when container size changes', async ({ mount, page }) => {\n    test.setTimeout(20000);\n    await mount(<DSHooksIsOverflowingTestRenderer />);\n    const container = page.locator(containerSelector);\n    await container.waitFor({ state: 'attached' });\n\n    await container.evaluate((node) => {\n      node.style.width = '500px';\n    });\n    await expect(page.locator(overflowStateSelector)).toContainText('Overflowing: false');\n\n    await container.evaluate((node) => {\n      node.style.width = '100px';\n    });\n    await expect(page.locator(overflowStateSelector)).toContainText('Overflowing: true');\n  });\n});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACSP;AAThB,mCAA6B;AAC7B,8CAAiD;AAEjD,MAAM,oBAAoB;AAC1B,MAAM,wBAAwB;AAE9B,kCAAK,SAAS,wDAAwD,MAAM;AAC1E,yCAAK,+DAA+D,OAAO,EAAE,OAAO,KAAK,MAAM;AAC7F,sCAAK,WAAW,GAAK;AACrB,UAAM,MAAM,4CAAC,4EAAiC,CAAE;AAChD,UAAM,YAAY,KAAK,QAAQ,iBAAiB;AAChD,UAAM,UAAU,QAAQ,EAAE,OAAO,WAAW,CAAC;AAE7C,UAAM,UAAU,SAAS,CAAC,SAAS;AACjC,WAAK,MAAM,QAAQ;AAAA,IACrB,CAAC;AAED,cAAM,qCAAO,KAAK,QAAQ,qBAAqB,CAAC,EAAE,cAAc,mBAAmB;AAAA,EACrF,CAAC;AAED,yCAAK,gEAAgE,OAAO,EAAE,OAAO,KAAK,MAAM;AAC9F,sCAAK,WAAW,GAAK;AACrB,UAAM,MAAM,4CAAC,4EAAiC,CAAE;AAChD,UAAM,YAAY,KAAK,QAAQ,iBAAiB;AAChD,UAAM,UAAU,QAAQ,EAAE,OAAO,WAAW,CAAC;AAE7C,UAAM,UAAU,SAAS,CAAC,SAAS;AACjC,WAAK,MAAM,QAAQ;AAAA,IACrB,CAAC;AAED,cAAM,qCAAO,KAAK,QAAQ,qBAAqB,CAAC,EAAE,cAAc,oBAAoB;AAAA,EACtF,CAAC;AAED,yCAAK,wEAAwE,OAAO,EAAE,OAAO,KAAK,MAAM;AACtG,sCAAK,WAAW,GAAK;AACrB,UAAM,MAAM,4CAAC,4EAAiC,CAAE;AAChD,UAAM,YAAY,KAAK,QAAQ,iBAAiB;AAChD,UAAM,UAAU,QAAQ,EAAE,OAAO,WAAW,CAAC;AAE7C,UAAM,UAAU,SAAS,CAAC,SAAS;AACjC,WAAK,MAAM,QAAQ;AAAA,IACrB,CAAC;AACD,cAAM,qCAAO,KAAK,QAAQ,qBAAqB,CAAC,EAAE,cAAc,oBAAoB;AAEpF,UAAM,UAAU,SAAS,CAAC,SAAS;AACjC,WAAK,MAAM,QAAQ;AAAA,IACrB,CAAC;AACD,cAAM,qCAAO,KAAK,QAAQ,qBAAqB,CAAC,EAAE,cAAc,mBAAmB;AAAA,EACrF,CAAC;AACH,CAAC;",
+  "names": []
+}

package/dist/cjs/tests/overflow/DSHooksIsOverflowingTestRenderer.js

@@ -0,0 +1,66 @@
+"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 DSHooksIsOverflowingTestRenderer_exports = {};
+__export(DSHooksIsOverflowingTestRenderer_exports, {
+  DSHooksIsOverflowingTestRenderer: () => DSHooksIsOverflowingTestRenderer
+});
+module.exports = __toCommonJS(DSHooksIsOverflowingTestRenderer_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_hooks_on_overflow_change = require("@elliemae/ds-hooks-on-overflow-change");
+var import_ds_system = require("@elliemae/ds-system");
+const DSHooksIsOverflowingTestRenderer = (0, import_ds_system.themeProviderHOC)(() => {
+  const [isOverflowing, setIsOverflowing] = (0, import_react.useState)(false);
+  const { handleRef } = (0, import_ds_hooks_on_overflow_change.useOnOverflowChange)({
+    onOverflowStateChange: setIsOverflowing
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-testid": "overflow-state", children: [
+      "Overflowing: ",
+      isOverflowing ? "true" : "false"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        "data-testid": "container",
+        ref: handleRef,
+        style: {
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          background: "rgba(30, 121, 194, 0.2)",
+          padding: "10px"
+        },
+        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod."
+      }
+    )
+  ] });
+});
+//# sourceMappingURL=DSHooksIsOverflowingTestRenderer.js.map

package/dist/cjs/tests/overflow/DSHooksIsOverflowingTestRenderer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/tests/overflow/DSHooksIsOverflowingTestRenderer.jsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useState } from 'react';\nimport { useOnOverflowChange } from '@elliemae/ds-hooks-on-overflow-change';\nimport { themeProviderHOC } from '@elliemae/ds-system';\n\nexport const DSHooksIsOverflowingTestRenderer = themeProviderHOC(() => {\n  const [isOverflowing, setIsOverflowing] = useState(false);\n\n  const { handleRef } = useOnOverflowChange({\n    onOverflowStateChange: setIsOverflowing,\n  });\n\n  return (\n    <div>\n      <div data-testid=\"overflow-state\">Overflowing: {isOverflowing ? 'true' : 'false'}</div>\n      <div\n        data-testid=\"container\"\n        ref={handleRef}\n        style={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          background: 'rgba(30, 121, 194, 0.2)',\n          padding: '10px',\n        }}\n      >\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.\n      </div>\n    </div>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAbN,mBAAgC;AAChC,yCAAoC;AACpC,uBAAiC;AAE1B,MAAM,uCAAmC,mCAAiB,MAAM;AACrE,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,QAAM,EAAE,UAAU,QAAI,wDAAoB;AAAA,IACxC,uBAAuB;AAAA,EACzB,CAAC;AAED,SACE,6CAAC,SACC;AAAA,iDAAC,SAAI,eAAY,kBAAiB;AAAA;AAAA,MAAc,gBAAgB,SAAS;AAAA,OAAQ;AAAA,IACjF;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,KAAK;AAAA,QACL,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,cAAc;AAAA,UACd,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ,CAAC;",
+  "names": []
+}

package/dist/cjs/typescript-testing/typescript-on-overflow-change.js

@@ -0,0 +1,73 @@
+"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 typescript_on_overflow_change_exports = {};
+__export(typescript_on_overflow_change_exports, {
+  default: () => typescript_on_overflow_change_default
+});
+module.exports = __toCommonJS(typescript_on_overflow_change_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_DSHooksIsOverflowing = require("../DSHooksIsOverflowing");
+const TestComponent = ({ onOverflowStateChange }) => {
+  const { handleRef } = (0, import_DSHooksIsOverflowing.useOnOverflowChange)({ onOverflowStateChange });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-testid": "container",
+      ref: (node) => {
+        if (node) {
+          handleRef(node);
+        }
+      },
+      style: {
+        width: "100px",
+        overflow: "hidden",
+        whiteSpace: "nowrap"
+      },
+      children: "This is long text that should overflow the container."
+    }
+  );
+};
+const testExplicitDefinition = {
+  onOverflowStateChange: (isOverflowing) => console.log(`Overflow state: ${isOverflowing}`)
+};
+const testInferredTypeCompatibility = {
+  onOverflowStateChange: (isOverflowing) => console.log(`Overflow state: ${isOverflowing}`)
+};
+const testDefinitionAsConst = {
+  onOverflowStateChange: (isOverflowing) => console.log(`Overflow state: ${isOverflowing}`)
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TestComponent, { ...testExplicitDefinition }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TestComponent, { ...testInferredTypeCompatibility }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TestComponent, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TestComponent, { onOverflowStateChange: (isOverflowing) => console.log(`Inline overflow state: ${isOverflowing}`) })
+] });
+var typescript_on_overflow_change_default = ExampleUsageComponent;
+//# sourceMappingURL=typescript-on-overflow-change.js.map

package/dist/cjs/typescript-testing/typescript-on-overflow-change.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/typescript-testing/typescript-on-overflow-change.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\n// eslint-disable-next-line local-rules/custom-rule\nimport { useOnOverflowChange } from '../DSHooksIsOverflowing';\n\ntype TestComponentProps = {\n  onOverflowStateChange: (isOverflowing: boolean) => void;\n};\n\nconst TestComponent: React.FC<TestComponentProps> = ({ onOverflowStateChange }) => {\n  const { handleRef } = useOnOverflowChange({ onOverflowStateChange });\n\n  return (\n    <div\n      data-testid=\"container\"\n      ref={(node) => {\n        if (node) {\n          handleRef(node);\n        }\n      }}\n      style={{\n        width: '100px',\n        overflow: 'hidden',\n        whiteSpace: 'nowrap',\n      }}\n    >\n      This is long text that should overflow the container.\n    </div>\n  );\n};\n\nconst testExplicitDefinition: TestComponentProps = {\n  onOverflowStateChange: (isOverflowing) => console.log(`Overflow state: ${isOverflowing}`),\n};\n\nconst testInferredTypeCompatibility = {\n  onOverflowStateChange: (isOverflowing: boolean) => console.log(`Overflow state: ${isOverflowing}`),\n} as TestComponentProps;\n\nconst testDefinitionAsConst = {\n  onOverflowStateChange: (isOverflowing: boolean) => console.log(`Overflow state: ${isOverflowing}`),\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* Works with explicitly casted props */}\n    <TestComponent {...testExplicitDefinition} />\n    <TestComponent {...testInferredTypeCompatibility} />\n    <TestComponent {...testDefinitionAsConst} />\n\n    {/* Inline props test */}\n    <TestComponent onOverflowStateChange={(isOverflowing) => console.log(`Inline overflow state: ${isOverflowing}`)} />\n  </>\n);\n\nexport default ExampleUsageComponent;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYnB;AAVJ,kCAAoC;AAMpC,MAAM,gBAA8C,CAAC,EAAE,sBAAsB,MAAM;AACjF,QAAM,EAAE,UAAU,QAAI,iDAAoB,EAAE,sBAAsB,CAAC;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,KAAK,CAAC,SAAS;AACb,YAAI,MAAM;AACR,oBAAU,IAAI;AAAA,QAChB;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,MACd;AAAA,MACD;AAAA;AAAA,EAED;AAEJ;AAEA,MAAM,yBAA6C;AAAA,EACjD,uBAAuB,CAAC,kBAAkB,QAAQ,IAAI,mBAAmB,aAAa,EAAE;AAC1F;AAEA,MAAM,gCAAgC;AAAA,EACpC,uBAAuB,CAAC,kBAA2B,QAAQ,IAAI,mBAAmB,aAAa,EAAE;AACnG;AAEA,MAAM,wBAAwB;AAAA,EAC5B,uBAAuB,CAAC,kBAA2B,QAAQ,IAAI,mBAAmB,aAAa,EAAE;AACnG;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,iBAAe,GAAG,wBAAwB;AAAA,EAC3C,4CAAC,iBAAe,GAAG,+BAA+B;AAAA,EAClD,4CAAC,iBAAe,GAAG,uBAAuB;AAAA,EAG1C,4CAAC,iBAAc,uBAAuB,CAAC,kBAAkB,QAAQ,IAAI,0BAA0B,aAAa,EAAE,GAAG;AAAA,GACnH;AAGF,IAAO,wCAAQ;",
+  "names": []
+}

package/dist/esm/DSHooksIsOverflowing.js

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { useCallback, useRef, useEffect, useMemo } from "react";
+import { describe } from "@elliemae/ds-props-helpers";
+import {
+  UseOnOverflowChangeTPropTypes,
+  UseOnOverflowChangeTReturnType
+} from "./react-desc-prop-types.js";
+const isOverflowing = (node) => node.offsetWidth < node.scrollWidth;
+const useOnOverflowChange = ({
+  onOverflowStateChange
+}) => {
+  const nodeForComparison = useRef(null);
+  const resizeObserver = useRef(null);
+  const previousOverflowState = useRef(null);
+  const onResizeNotifier = useCallback(
+    (node) => {
+      const isTruncating = isOverflowing(node);
+      if (previousOverflowState.current !== isTruncating) {
+        onOverflowStateChange(isTruncating);
+        previousOverflowState.current = isTruncating;
+      }
+    },
+    [onOverflowStateChange]
+  );
+  const handleRef = useCallback(
+    (node) => {
+      if (node) {
+        onResizeNotifier(node);
+        const didNodeChange = nodeForComparison.current !== node;
+        if (didNodeChange) {
+          if (resizeObserver.current) {
+            resizeObserver.current.disconnect();
+          }
+          resizeObserver.current = new ResizeObserver(() => {
+            onResizeNotifier(node);
+          });
+          resizeObserver.current.observe(node);
+          nodeForComparison.current = node;
+        }
+      }
+    },
+    [onResizeNotifier]
+  );
+  useEffect(
+    () => () => {
+      if (resizeObserver.current) {
+        resizeObserver.current.disconnect();
+      }
+    },
+    []
+  );
+  return useMemo(() => ({ handleRef }), [handleRef]);
+};
+useOnOverflowChange.displayName = "useOnOverflowChange";
+const useOnOverflowChangeWithSchema = describe(useOnOverflowChange);
+useOnOverflowChangeWithSchema.propTypes = UseOnOverflowChangeTPropTypes;
+useOnOverflowChangeWithSchema.returnType = UseOnOverflowChangeTReturnType;
+export {
+  useOnOverflowChange,
+  useOnOverflowChangeWithSchema
+};
+//# sourceMappingURL=DSHooksIsOverflowing.js.map

package/dist/esm/DSHooksIsOverflowing.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSHooksIsOverflowing.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars\nimport React, { useCallback, useRef, useEffect, useMemo } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport {\n  type DSHooksUseOnOverflowChangeT,\n  UseOnOverflowChangeTPropTypes,\n  UseOnOverflowChangeTReturnType,\n} from './react-desc-prop-types.js';\n\nconst isOverflowing = (node: HTMLElement) => node.offsetWidth < node.scrollWidth;\n\nconst useOnOverflowChange: DSHooksUseOnOverflowChangeT.UseOnOverflowChange & { displayName: string } = ({\n  onOverflowStateChange,\n}) => {\n  const nodeForComparison = useRef<HTMLElement | null>(null);\n  const resizeObserver = useRef<ResizeObserver | null>(null);\n  const previousOverflowState = useRef<boolean | null>(null);\n\n  const onResizeNotifier = useCallback(\n    (node: HTMLElement) => {\n      const isTruncating = isOverflowing(node);\n\n      if (previousOverflowState.current !== isTruncating) {\n        onOverflowStateChange(isTruncating);\n        previousOverflowState.current = isTruncating;\n      }\n    },\n    [onOverflowStateChange],\n  );\n\n  const handleRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (node) {\n        onResizeNotifier(node);\n\n        const didNodeChange = nodeForComparison.current !== node;\n        if (didNodeChange) {\n          if (resizeObserver.current) {\n            resizeObserver.current.disconnect();\n          }\n\n          resizeObserver.current = new ResizeObserver(() => {\n            onResizeNotifier(node);\n          });\n          resizeObserver.current.observe(node);\n\n          nodeForComparison.current = node;\n        }\n      }\n    },\n    [onResizeNotifier],\n  );\n\n  useEffect(\n    () => () => {\n      if (resizeObserver.current) {\n        resizeObserver.current.disconnect();\n      }\n    },\n    [],\n  );\n\n  return useMemo(() => ({ handleRef }), [handleRef]);\n};\n\nuseOnOverflowChange.displayName = 'useOnOverflowChange';\n\nconst useOnOverflowChangeWithSchema = describe(useOnOverflowChange);\n\nuseOnOverflowChangeWithSchema.propTypes = UseOnOverflowChangeTPropTypes;\nuseOnOverflowChangeWithSchema.returnType = UseOnOverflowChangeTReturnType;\n\nexport { useOnOverflowChange, useOnOverflowChangeWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAgB,aAAa,QAAQ,WAAW,eAAe;AAC/D,SAAS,gBAAgB;AACzB;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAEP,MAAM,gBAAgB,CAAC,SAAsB,KAAK,cAAc,KAAK;AAErE,MAAM,sBAAiG,CAAC;AAAA,EACtG;AACF,MAAM;AACJ,QAAM,oBAAoB,OAA2B,IAAI;AACzD,QAAM,iBAAiB,OAA8B,IAAI;AACzD,QAAM,wBAAwB,OAAuB,IAAI;AAEzD,QAAM,mBAAmB;AAAA,IACvB,CAAC,SAAsB;AACrB,YAAM,eAAe,cAAc,IAAI;AAEvC,UAAI,sBAAsB,YAAY,cAAc;AAClD,8BAAsB,YAAY;AAClC,8BAAsB,UAAU;AAAA,MAClC;AAAA,IACF;AAAA,IACA,CAAC,qBAAqB;AAAA,EACxB;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,SAA6B;AAC5B,UAAI,MAAM;AACR,yBAAiB,IAAI;AAErB,cAAM,gBAAgB,kBAAkB,YAAY;AACpD,YAAI,eAAe;AACjB,cAAI,eAAe,SAAS;AAC1B,2BAAe,QAAQ,WAAW;AAAA,UACpC;AAEA,yBAAe,UAAU,IAAI,eAAe,MAAM;AAChD,6BAAiB,IAAI;AAAA,UACvB,CAAC;AACD,yBAAe,QAAQ,QAAQ,IAAI;AAEnC,4BAAkB,UAAU;AAAA,QAC9B;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AAEA;AAAA,IACE,MAAM,MAAM;AACV,UAAI,eAAe,SAAS;AAC1B,uBAAe,QAAQ,WAAW;AAAA,MACpC;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO,QAAQ,OAAO,EAAE,UAAU,IAAI,CAAC,SAAS,CAAC;AACnD;AAEA,oBAAoB,cAAc;AAElC,MAAM,gCAAgC,SAAS,mBAAmB;AAElE,8BAA8B,YAAY;AAC1C,8BAA8B,aAAa;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { useOnOverflowChange, useOnOverflowChangeWithSchema } from "./DSHooksIsOverflowing.js";
+export {
+  useOnOverflowChange,
+  useOnOverflowChangeWithSchema
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { useOnOverflowChange, useOnOverflowChangeWithSchema } from './DSHooksIsOverflowing.js';\nexport { type DSHooksUseOnOverflowChangeT } from './react-desc-prop-types.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB,qCAAqC;",
+  "names": []
+}

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/react-desc-prop-types.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { PropTypes } from "@elliemae/ds-props-helpers";
+const UseOnOverflowChangeTPropTypes = {
+  onOverflowStateChange: PropTypes.func.description(
+    "Callback function triggered when the overflow state changes. Receives a boolean indicating whether the content is overflowing."
+  ).isRequired
+};
+const UseOnOverflowChangeTReturnType = {
+  handleRef: PropTypes.func.description(
+    "Function to be passed as a ref to the element being monitored for overflow changes."
+  ).isRequired
+};
+export {
+  UseOnOverflowChangeTPropTypes,
+  UseOnOverflowChangeTReturnType
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSHooksUseOnOverflowChangeT {\n  export interface Arguments {\n    onOverflowStateChange: (isOverflowing: boolean) => void;\n  }\n\n  export interface ResultType {\n    handleRef: (node: HTMLElement | null) => void;\n  }\n\n  export type UseOnOverflowChange = (args: Arguments) => ResultType;\n}\n\nexport const UseOnOverflowChangeTPropTypes = {\n  onOverflowStateChange: PropTypes.func.description(\n    'Callback function triggered when the overflow state changes. Receives a boolean indicating whether the content is overflowing.',\n  ).isRequired,\n} as WeakValidationMap<unknown>;\n\nexport const UseOnOverflowChangeTReturnType = {\n  handleRef: PropTypes.func.description(\n    'Function to be passed as a ref to the element being monitored for overflow changes.',\n  ).isRequired,\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,iBAAiB;AAcnB,MAAM,gCAAgC;AAAA,EAC3C,uBAAuB,UAAU,KAAK;AAAA,IACpC;AAAA,EACF,EAAE;AACJ;AAEO,MAAM,iCAAiC;AAAA,EAC5C,WAAW,UAAU,KAAK;AAAA,IACxB;AAAA,EACF,EAAE;AACJ;",
+  "names": []
+}

package/dist/esm/tests/overflow/DSHooksIsOverflowing.overflow.test.playwright.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { expect, test } from "@playwright/experimental-ct-react";
+import { DSHooksIsOverflowingTestRenderer } from "./DSHooksIsOverflowingTestRenderer";
+const containerSelector = '[data-testid="container"]';
+const overflowStateSelector = '[data-testid="overflow-state"]';
+test.describe("DSHooksIsOverflowingTestRenderer - Overflow Behavior", () => {
+  test("Should detect overflow when content exceeds container width", async ({ mount, page }) => {
+    test.setTimeout(2e4);
+    await mount(/* @__PURE__ */ jsx(DSHooksIsOverflowingTestRenderer, {}));
+    const container = page.locator(containerSelector);
+    await container.waitFor({ state: "attached" });
+    await container.evaluate((node) => {
+      node.style.width = "100px";
+    });
+    await expect(page.locator(overflowStateSelector)).toContainText("Overflowing: true");
+  });
+  test("Should detect no overflow when content fits within container", async ({ mount, page }) => {
+    test.setTimeout(2e4);
+    await mount(/* @__PURE__ */ jsx(DSHooksIsOverflowingTestRenderer, {}));
+    const container = page.locator(containerSelector);
+    await container.waitFor({ state: "attached" });
+    await container.evaluate((node) => {
+      node.style.width = "500px";
+    });
+    await expect(page.locator(overflowStateSelector)).toContainText("Overflowing: false");
+  });
+  test("Should update overflow state dynamically when container size changes", async ({ mount, page }) => {
+    test.setTimeout(2e4);
+    await mount(/* @__PURE__ */ jsx(DSHooksIsOverflowingTestRenderer, {}));
+    const container = page.locator(containerSelector);
+    await container.waitFor({ state: "attached" });
+    await container.evaluate((node) => {
+      node.style.width = "500px";
+    });
+    await expect(page.locator(overflowStateSelector)).toContainText("Overflowing: false");
+    await container.evaluate((node) => {
+      node.style.width = "100px";
+    });
+    await expect(page.locator(overflowStateSelector)).toContainText("Overflowing: true");
+  });
+});
+//# sourceMappingURL=DSHooksIsOverflowing.overflow.test.playwright.js.map

package/dist/esm/tests/overflow/DSHooksIsOverflowing.overflow.test.playwright.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/tests/overflow/DSHooksIsOverflowing.overflow.test.playwright.jsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { expect, test } from '@playwright/experimental-ct-react';\nimport { DSHooksIsOverflowingTestRenderer } from './DSHooksIsOverflowingTestRenderer';\n\nconst containerSelector = '[data-testid=\"container\"]';\nconst overflowStateSelector = '[data-testid=\"overflow-state\"]';\n\ntest.describe('DSHooksIsOverflowingTestRenderer - Overflow Behavior', () => {\n  test('Should detect overflow when content exceeds container width', async ({ mount, page }) => {\n    test.setTimeout(20000);\n    await mount(<DSHooksIsOverflowingTestRenderer />);\n    const container = page.locator(containerSelector);\n    await container.waitFor({ state: 'attached' });\n\n    await container.evaluate((node) => {\n      node.style.width = '100px';\n    });\n\n    await expect(page.locator(overflowStateSelector)).toContainText('Overflowing: true');\n  });\n\n  test('Should detect no overflow when content fits within container', async ({ mount, page }) => {\n    test.setTimeout(20000);\n    await mount(<DSHooksIsOverflowingTestRenderer />);\n    const container = page.locator(containerSelector);\n    await container.waitFor({ state: 'attached' });\n\n    await container.evaluate((node) => {\n      node.style.width = '500px';\n    });\n\n    await expect(page.locator(overflowStateSelector)).toContainText('Overflowing: false');\n  });\n\n  test('Should update overflow state dynamically when container size changes', async ({ mount, page }) => {\n    test.setTimeout(20000);\n    await mount(<DSHooksIsOverflowingTestRenderer />);\n    const container = page.locator(containerSelector);\n    await container.waitFor({ state: 'attached' });\n\n    await container.evaluate((node) => {\n      node.style.width = '500px';\n    });\n    await expect(page.locator(overflowStateSelector)).toContainText('Overflowing: false');\n\n    await container.evaluate((node) => {\n      node.style.width = '100px';\n    });\n    await expect(page.locator(overflowStateSelector)).toContainText('Overflowing: true');\n  });\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACSP;AAThB,SAAS,QAAQ,YAAY;AAC7B,SAAS,wCAAwC;AAEjD,MAAM,oBAAoB;AAC1B,MAAM,wBAAwB;AAE9B,KAAK,SAAS,wDAAwD,MAAM;AAC1E,OAAK,+DAA+D,OAAO,EAAE,OAAO,KAAK,MAAM;AAC7F,SAAK,WAAW,GAAK;AACrB,UAAM,MAAM,oBAAC,oCAAiC,CAAE;AAChD,UAAM,YAAY,KAAK,QAAQ,iBAAiB;AAChD,UAAM,UAAU,QAAQ,EAAE,OAAO,WAAW,CAAC;AAE7C,UAAM,UAAU,SAAS,CAAC,SAAS;AACjC,WAAK,MAAM,QAAQ;AAAA,IACrB,CAAC;AAED,UAAM,OAAO,KAAK,QAAQ,qBAAqB,CAAC,EAAE,cAAc,mBAAmB;AAAA,EACrF,CAAC;AAED,OAAK,gEAAgE,OAAO,EAAE,OAAO,KAAK,MAAM;AAC9F,SAAK,WAAW,GAAK;AACrB,UAAM,MAAM,oBAAC,oCAAiC,CAAE;AAChD,UAAM,YAAY,KAAK,QAAQ,iBAAiB;AAChD,UAAM,UAAU,QAAQ,EAAE,OAAO,WAAW,CAAC;AAE7C,UAAM,UAAU,SAAS,CAAC,SAAS;AACjC,WAAK,MAAM,QAAQ;AAAA,IACrB,CAAC;AAED,UAAM,OAAO,KAAK,QAAQ,qBAAqB,CAAC,EAAE,cAAc,oBAAoB;AAAA,EACtF,CAAC;AAED,OAAK,wEAAwE,OAAO,EAAE,OAAO,KAAK,MAAM;AACtG,SAAK,WAAW,GAAK;AACrB,UAAM,MAAM,oBAAC,oCAAiC,CAAE;AAChD,UAAM,YAAY,KAAK,QAAQ,iBAAiB;AAChD,UAAM,UAAU,QAAQ,EAAE,OAAO,WAAW,CAAC;AAE7C,UAAM,UAAU,SAAS,CAAC,SAAS;AACjC,WAAK,MAAM,QAAQ;AAAA,IACrB,CAAC;AACD,UAAM,OAAO,KAAK,QAAQ,qBAAqB,CAAC,EAAE,cAAc,oBAAoB;AAEpF,UAAM,UAAU,SAAS,CAAC,SAAS;AACjC,WAAK,MAAM,QAAQ;AAAA,IACrB,CAAC;AACD,UAAM,OAAO,KAAK,QAAQ,qBAAqB,CAAC,EAAE,cAAc,mBAAmB;AAAA,EACrF,CAAC;AACH,CAAC;",
+  "names": []
+}

package/dist/esm/tests/overflow/DSHooksIsOverflowingTestRenderer.js

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { useState } from "react";
+import { useOnOverflowChange } from "@elliemae/ds-hooks-on-overflow-change";
+import { themeProviderHOC } from "@elliemae/ds-system";
+const DSHooksIsOverflowingTestRenderer = themeProviderHOC(() => {
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const { handleRef } = useOnOverflowChange({
+    onOverflowStateChange: setIsOverflowing
+  });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { "data-testid": "overflow-state", children: [
+      "Overflowing: ",
+      isOverflowing ? "true" : "false"
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": "container",
+        ref: handleRef,
+        style: {
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          background: "rgba(30, 121, 194, 0.2)",
+          padding: "10px"
+        },
+        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod."
+      }
+    )
+  ] });
+});
+export {
+  DSHooksIsOverflowingTestRenderer
+};
+//# sourceMappingURL=DSHooksIsOverflowingTestRenderer.js.map

package/dist/esm/tests/overflow/DSHooksIsOverflowingTestRenderer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/tests/overflow/DSHooksIsOverflowingTestRenderer.jsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState } from 'react';\nimport { useOnOverflowChange } from '@elliemae/ds-hooks-on-overflow-change';\nimport { themeProviderHOC } from '@elliemae/ds-system';\n\nexport const DSHooksIsOverflowingTestRenderer = themeProviderHOC(() => {\n  const [isOverflowing, setIsOverflowing] = useState(false);\n\n  const { handleRef } = useOnOverflowChange({\n    onOverflowStateChange: setIsOverflowing,\n  });\n\n  return (\n    <div>\n      <div data-testid=\"overflow-state\">Overflowing: {isOverflowing ? 'true' : 'false'}</div>\n      <div\n        data-testid=\"container\"\n        ref={handleRef}\n        style={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          background: 'rgba(30, 121, 194, 0.2)',\n          padding: '10px',\n        }}\n      >\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.\n      </div>\n    </div>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACajB,SACA,KADA;AAbN,OAAOA,UAAS,gBAAgB;AAChC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAE1B,MAAM,mCAAmC,iBAAiB,MAAM;AACrE,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,QAAM,EAAE,UAAU,IAAI,oBAAoB;AAAA,IACxC,uBAAuB;AAAA,EACzB,CAAC;AAED,SACE,qBAAC,SACC;AAAA,yBAAC,SAAI,eAAY,kBAAiB;AAAA;AAAA,MAAc,gBAAgB,SAAS;AAAA,OAAQ;AAAA,IACjF;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,KAAK;AAAA,QACL,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,cAAc;AAAA,UACd,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ,CAAC;",
+  "names": ["React"]
+}

package/dist/esm/typescript-testing/typescript-on-overflow-change.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useOnOverflowChange } from "../DSHooksIsOverflowing";
+const TestComponent = ({ onOverflowStateChange }) => {
+  const { handleRef } = useOnOverflowChange({ onOverflowStateChange });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": "container",
+      ref: (node) => {
+        if (node) {
+          handleRef(node);
+        }
+      },
+      style: {
+        width: "100px",
+        overflow: "hidden",
+        whiteSpace: "nowrap"
+      },
+      children: "This is long text that should overflow the container."
+    }
+  );
+};
+const testExplicitDefinition = {
+  onOverflowStateChange: (isOverflowing) => console.log(`Overflow state: ${isOverflowing}`)
+};
+const testInferredTypeCompatibility = {
+  onOverflowStateChange: (isOverflowing) => console.log(`Overflow state: ${isOverflowing}`)
+};
+const testDefinitionAsConst = {
+  onOverflowStateChange: (isOverflowing) => console.log(`Overflow state: ${isOverflowing}`)
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(TestComponent, { ...testExplicitDefinition }),
+  /* @__PURE__ */ jsx(TestComponent, { ...testInferredTypeCompatibility }),
+  /* @__PURE__ */ jsx(TestComponent, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ jsx(TestComponent, { onOverflowStateChange: (isOverflowing) => console.log(`Inline overflow state: ${isOverflowing}`) })
+] });
+var typescript_on_overflow_change_default = ExampleUsageComponent;
+export {
+  typescript_on_overflow_change_default as default
+};
+//# sourceMappingURL=typescript-on-overflow-change.js.map

package/dist/esm/typescript-testing/typescript-on-overflow-change.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-on-overflow-change.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n// eslint-disable-next-line local-rules/custom-rule\nimport { useOnOverflowChange } from '../DSHooksIsOverflowing';\n\ntype TestComponentProps = {\n  onOverflowStateChange: (isOverflowing: boolean) => void;\n};\n\nconst TestComponent: React.FC<TestComponentProps> = ({ onOverflowStateChange }) => {\n  const { handleRef } = useOnOverflowChange({ onOverflowStateChange });\n\n  return (\n    <div\n      data-testid=\"container\"\n      ref={(node) => {\n        if (node) {\n          handleRef(node);\n        }\n      }}\n      style={{\n        width: '100px',\n        overflow: 'hidden',\n        whiteSpace: 'nowrap',\n      }}\n    >\n      This is long text that should overflow the container.\n    </div>\n  );\n};\n\nconst testExplicitDefinition: TestComponentProps = {\n  onOverflowStateChange: (isOverflowing) => console.log(`Overflow state: ${isOverflowing}`),\n};\n\nconst testInferredTypeCompatibility = {\n  onOverflowStateChange: (isOverflowing: boolean) => console.log(`Overflow state: ${isOverflowing}`),\n} as TestComponentProps;\n\nconst testDefinitionAsConst = {\n  onOverflowStateChange: (isOverflowing: boolean) => console.log(`Overflow state: ${isOverflowing}`),\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* Works with explicitly casted props */}\n    <TestComponent {...testExplicitDefinition} />\n    <TestComponent {...testInferredTypeCompatibility} />\n    <TestComponent {...testDefinitionAsConst} />\n\n    {/* Inline props test */}\n    <TestComponent onOverflowStateChange={(isOverflowing) => console.log(`Inline overflow state: ${isOverflowing}`)} />\n  </>\n);\n\nexport default ExampleUsageComponent;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACYnB,SA+BF,UA/BE,KA+BF,YA/BE;AAVJ,SAAS,2BAA2B;AAMpC,MAAM,gBAA8C,CAAC,EAAE,sBAAsB,MAAM;AACjF,QAAM,EAAE,UAAU,IAAI,oBAAoB,EAAE,sBAAsB,CAAC;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,KAAK,CAAC,SAAS;AACb,YAAI,MAAM;AACR,oBAAU,IAAI;AAAA,QAChB;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,MACd;AAAA,MACD;AAAA;AAAA,EAED;AAEJ;AAEA,MAAM,yBAA6C;AAAA,EACjD,uBAAuB,CAAC,kBAAkB,QAAQ,IAAI,mBAAmB,aAAa,EAAE;AAC1F;AAEA,MAAM,gCAAgC;AAAA,EACpC,uBAAuB,CAAC,kBAA2B,QAAQ,IAAI,mBAAmB,aAAa,EAAE;AACnG;AAEA,MAAM,wBAAwB;AAAA,EAC5B,uBAAuB,CAAC,kBAA2B,QAAQ,IAAI,mBAAmB,aAAa,EAAE;AACnG;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,iBAAe,GAAG,wBAAwB;AAAA,EAC3C,oBAAC,iBAAe,GAAG,+BAA+B;AAAA,EAClD,oBAAC,iBAAe,GAAG,uBAAuB;AAAA,EAG1C,oBAAC,iBAAc,uBAAuB,CAAC,kBAAkB,QAAQ,IAAI,0BAA0B,aAAa,EAAE,GAAG;AAAA,GACnH;AAGF,IAAO,wCAAQ;",
+  "names": []
+}

package/dist/types/DSHooksIsOverflowing.d.ts

@@ -0,0 +1,6 @@
+import { type DSHooksUseOnOverflowChangeT } from './react-desc-prop-types.js';
+declare const useOnOverflowChange: DSHooksUseOnOverflowChangeT.UseOnOverflowChange & {
+    displayName: string;
+};
+declare const useOnOverflowChangeWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSHooksUseOnOverflowChangeT.Arguments>;
+export { useOnOverflowChange, useOnOverflowChangeWithSchema };

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { useOnOverflowChange, useOnOverflowChangeWithSchema } from './DSHooksIsOverflowing.js';
+export { type DSHooksUseOnOverflowChangeT } from './react-desc-prop-types.js';

package/dist/types/react-desc-prop-types.d.ts

@@ -0,0 +1,14 @@
+import type { WeakValidationMap } from 'react';
+export declare namespace DSHooksUseOnOverflowChangeT {
+    interface Arguments {
+        onOverflowStateChange: (isOverflowing: boolean) => void;
+    }
+    interface ResultType {
+        handleRef: (node: HTMLElement | null) => void;
+    }
+    type UseOnOverflowChange = (args: Arguments) => ResultType;
+}
+export declare const UseOnOverflowChangeTPropTypes: WeakValidationMap<unknown>;
+export declare const UseOnOverflowChangeTReturnType: {
+    handleRef: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+};

package/dist/types/tests/overflow/DSHooksIsOverflowing.overflow.test.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/overflow/DSHooksIsOverflowingTestRenderer.d.ts

@@ -0,0 +1,2 @@
+export const DSHooksIsOverflowingTestRenderer: React.FunctionComponent<React.JSX.IntrinsicAttributes>;
+import React from 'react';

package/dist/types/typescript-testing/typescript-on-overflow-change.d.ts

@@ -0,0 +1,2 @@
+declare const ExampleUsageComponent: () => import("react/jsx-runtime").JSX.Element;
+export default ExampleUsageComponent;

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@elliemae/ds-hooks-on-overflow-change",
+  "version": "3.52.0-rc.25",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Hooks Is Overflowing",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "pnpm": ">=9",
+    "node": ">=22"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "@xstyled/styled-components": "~3.7.3",
+    "@elliemae/ds-grid": "3.52.0-rc.25",
+    "@elliemae/ds-hooks-on-blur-out": "3.52.0-rc.25",
+    "@elliemae/ds-props-helpers": "3.52.0-rc.25",
+    "@elliemae/ds-system": "3.52.0-rc.25"
+  },
+  "devDependencies": {
+    "@elliemae/pui-cli": "9.0.0-next.63",
+    "@playwright/experimental-ct-react": "^1.51.1",
+    "jest": "~29.7.0",
+    "styled-components": "~5.3.9",
+    "@elliemae/ds-monorepo-devops": "3.52.0-rc.25",
+    "@elliemae/ds-typescript-helpers": "3.52.0-rc.25"
+  },
+  "peerDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "~14.5.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "~5.3.9"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": true
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "pui-cli test --passWithNoTests --coverage=\"false\" && [ -n \"$CI\" ] || playwright test -c ./playwright.config.mjs",
+    "lint": "node ../../../scripts/lint.mjs --fix",
+    "lint:strict": "node ../../../scripts/lint-strict.mjs",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}