@elliemae/ds-read-more 3.53.0-next.3 → 3.53.0-next.5

package/dist/cjs/DSReadMore.js

@@ -42,7 +42,7 @@ var import_MoreLessButton = require("./MoreLessButton.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_styled = require("./styled.js");
 var import_useReadMoreTruncate = require("./useReadMoreTruncate.js");
-var import_DSReadMoreDefinitions = require("./DSReadMoreDefinitions.js");
+var import_constants = require("./constants/index.js");
 const DSReadMore = (props) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
   const { lines, more, less, content, withTooltip, ellipsis, onMore, onLess } = propsWithDefault;
@@ -51,8 +51,11 @@ const DSReadMore = (props) => {
   const toggleExpanded = (0, import_react.useCallback)(
     (newExpanded) => {
       setExpanded(newExpanded);
-      if (newExpanded) onMore();
-      else onLess();
+      if (newExpanded) {
+        onMore();
+      } else {
+        onLess();
+      }
     },
     [onMore, onLess, setExpanded]
   );
@@ -90,7 +93,7 @@ const DSReadMore = (props) => {
             onClick: () => toggleExpanded(!expanded),
             ariaLabel: expanded ? "Read less" : "Read more",
             ellipsis,
-            dataTestId: import_DSReadMoreDefinitions.DSReadMoreDataTestIds.READ_MORE_BUTTON,
+            dataTestId: import_constants.DSReadMoreDataTestIds.READ_MORE_BUTTON,
             getOwnerProps,
             getOwnerPropsArguments
           }
@@ -103,7 +106,7 @@ const DSReadMore = (props) => {
             ariaLabel: expanded ? "Read less" : "Read more",
             ellipsis,
             withTooltip,
-            dataTestId: import_DSReadMoreDefinitions.DSReadMoreDataTestIds.READ_MORE_TOOLTIP_BUTTON,
+            dataTestId: import_constants.DSReadMoreDataTestIds.READ_MORE_TOOLTIP_BUTTON,
             getOwnerProps,
             getOwnerPropsArguments
           }
@@ -112,7 +115,7 @@ const DSReadMore = (props) => {
     }
   );
 };
-DSReadMore.displayName = import_DSReadMoreDefinitions.DSReadMoreName;
+DSReadMore.displayName = import_constants.DSReadMoreName;
 const DSReadMoreWithSchema = (0, import_ds_props_helpers.describe)(DSReadMore);
 DSReadMoreWithSchema.propTypes = import_react_desc_prop_types.DSReadMorePropTypesSchema;
 var DSReadMore_default = DSReadMore;

package/dist/cjs/DSReadMore.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSReadMore.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { describe, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { MoreLessButton } from './MoreLessButton.js';\nimport { type DSReadMoreT, DSReadMorePropTypesSchema, defaultProps } from './react-desc-prop-types.js';\nimport { StyledTextWrapper, StyledTextContent, StyledTooltipWrapper } from './styled.js';\nimport { useReadMoreTruncate } from './useReadMoreTruncate.js';\nimport { DSReadMoreDataTestIds, DSReadMoreName } from './DSReadMoreDefinitions.js';\n\nconst DSReadMore = (props: DSReadMoreT.Props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSReadMoreT.InternalProps>(props, defaultProps);\n  const { lines, more, less, content, withTooltip, ellipsis, onMore, onLess } = propsWithDefault;\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  const { textWrapperRef, textRef, showButton, expanded, setExpanded, textProps, srOnlyText } =\n    useReadMoreTruncate(propsWithDefault);\n\n  const toggleExpanded = useCallback(\n    (newExpanded: boolean) => {\n      setExpanded(newExpanded);\n      if (newExpanded) onMore();\n      else onLess();\n    },\n    [onMore, onLess, setExpanded],\n  );\n\n  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n  return (\n    <StyledTextWrapper\n      innerRef={textWrapperRef}\n      lines={lines}\n      expanded={expanded}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      {...xstyledProps}\n    >\n      {srOnlyText}\n      <StyledTextContent\n        lines={lines}\n        expanded={expanded}\n        innerRef={textRef}\n        data-testid=\"ds-read_more-text\"\n        {...textProps}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {content}\n      </StyledTextContent>\n      {showButton && !withTooltip && (\n        <MoreLessButton\n          expanded={expanded}\n          label={expanded ? less : more}\n          onClick={() => toggleExpanded(!expanded)}\n          ariaLabel={expanded ? 'Read less' : 'Read more'}\n          ellipsis={ellipsis}\n          dataTestId={DSReadMoreDataTestIds.READ_MORE_BUTTON}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n      )}\n      {withTooltip && showButton && (\n        <StyledTooltipWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          <DSTooltipV3 text={content} wrapWords>\n            <MoreLessButton\n              expanded={expanded}\n              label=\"...\"\n              ariaLabel={expanded ? 'Read less' : 'Read more'}\n              ellipsis={ellipsis}\n              withTooltip={withTooltip}\n              dataTestId={DSReadMoreDataTestIds.READ_MORE_TOOLTIP_BUTTON}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            />\n          </DSTooltipV3>\n        </StyledTooltipWrapper>\n      )}\n    </StyledTextWrapper>\n  );\n};\n\nDSReadMore.displayName = DSReadMoreName;\n\nconst DSReadMoreWithSchema = describe(DSReadMore);\n\nDSReadMoreWithSchema.propTypes = DSReadMorePropTypesSchema;\n\nexport { DSReadMore, DSReadMoreWithSchema };\nexport default DSReadMore;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BnB;AA/BJ,mBAAmC;AACnC,8BAA2E;AAC3E,2BAA4B;AAC5B,4BAA+B;AAC/B,mCAA0E;AAC1E,oBAA2E;AAC3E,iCAAoC;AACpC,mCAAsD;AAEtD,MAAM,aAAa,CAAC,UAA6B;AAC/C,QAAM,uBAAmB,sDAAwD,OAAO,yCAAY;AACpG,QAAM,EAAE,OAAO,MAAM,MAAM,SAAS,aAAa,UAAU,QAAQ,OAAO,IAAI;AAE9E,QAAM,mBAAe,4CAAmB,gBAAgB;AAExD,QAAM,EAAE,gBAAgB,SAAS,YAAY,UAAU,aAAa,WAAW,WAAW,QACxF,gDAAoB,gBAAgB;AAEtC,QAAM,qBAAiB;AAAA,IACrB,CAAC,gBAAyB;AACxB,kBAAY,WAAW;AACvB,UAAI,YAAa,QAAO;AAAA,UACnB,QAAO;AAAA,IACd;AAAA,IACA,CAAC,QAAQ,QAAQ,WAAW;AAAA,EAC9B;AAEA,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAC5E,QAAM,6BAAyB,0BAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,eAAY;AAAA,YACX,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,cAAc,CAAC,eACd;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO,WAAW,OAAO;AAAA,YACzB,SAAS,MAAM,eAAe,CAAC,QAAQ;AAAA,YACvC,WAAW,WAAW,cAAc;AAAA,YACpC;AAAA,YACA,YAAY,mDAAsB;AAAA,YAClC;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QAED,eAAe,cACd,4CAAC,sCAAqB,eAA8B,wBAClD,sDAAC,oCAAY,MAAM,SAAS,WAAS,MACnC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAM;AAAA,YACN,WAAW,WAAW,cAAc;AAAA,YACpC;AAAA,YACA;AAAA,YACA,YAAY,mDAAsB;AAAA,YAClC;AAAA,YACA;AAAA;AAAA,QACF,GACF,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,WAAW,cAAc;AAEzB,MAAM,2BAAuB,kCAAS,UAAU;AAEhD,qBAAqB,YAAY;AAGjC,IAAO,qBAAQ;",
+  "sourcesContent": ["// DSReadMore.tsx\nimport React, { useCallback } from 'react';\nimport { describe, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { MoreLessButton } from './MoreLessButton.js';\nimport { type DSReadMoreT, DSReadMorePropTypesSchema, defaultProps } from './react-desc-prop-types.js';\nimport { StyledTextWrapper, StyledTextContent, StyledTooltipWrapper } from './styled.js';\nimport { useReadMoreTruncate } from './useReadMoreTruncate.js';\nimport { DSReadMoreDataTestIds, DSReadMoreName } from './constants/index.js';\n\nconst DSReadMore = (props: DSReadMoreT.Props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSReadMoreT.InternalProps>(props, defaultProps);\n  const { lines, more, less, content, withTooltip, ellipsis, onMore, onLess } = propsWithDefault;\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  const { textWrapperRef, textRef, showButton, expanded, setExpanded, textProps, srOnlyText } =\n    useReadMoreTruncate(propsWithDefault);\n\n  const toggleExpanded = useCallback(\n    (newExpanded: boolean) => {\n      setExpanded(newExpanded);\n      if (newExpanded) {\n        onMore();\n      } else {\n        onLess();\n      }\n    },\n    [onMore, onLess, setExpanded],\n  );\n\n  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n  return (\n    <StyledTextWrapper\n      innerRef={textWrapperRef}\n      lines={lines}\n      expanded={expanded}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      {...xstyledProps}\n    >\n      {srOnlyText}\n\n      <StyledTextContent\n        lines={lines}\n        expanded={expanded}\n        innerRef={textRef}\n        data-testid=\"ds-read_more-text\"\n        {...textProps}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {content}\n      </StyledTextContent>\n\n      {showButton && !withTooltip && (\n        <MoreLessButton\n          expanded={expanded}\n          label={expanded ? less : more}\n          onClick={() => toggleExpanded(!expanded)}\n          ariaLabel={expanded ? 'Read less' : 'Read more'}\n          ellipsis={ellipsis}\n          dataTestId={DSReadMoreDataTestIds.READ_MORE_BUTTON}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n      )}\n\n      {withTooltip && showButton && (\n        <StyledTooltipWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          <DSTooltipV3 text={content} wrapWords>\n            <MoreLessButton\n              expanded={expanded}\n              label=\"...\"\n              ariaLabel={expanded ? 'Read less' : 'Read more'}\n              ellipsis={ellipsis}\n              withTooltip={withTooltip}\n              dataTestId={DSReadMoreDataTestIds.READ_MORE_TOOLTIP_BUTTON}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            />\n          </DSTooltipV3>\n        </StyledTooltipWrapper>\n      )}\n    </StyledTextWrapper>\n  );\n};\n\nDSReadMore.displayName = DSReadMoreName;\nconst DSReadMoreWithSchema = describe(DSReadMore);\nDSReadMoreWithSchema.propTypes = DSReadMorePropTypesSchema;\n\nexport { DSReadMore, DSReadMoreWithSchema };\nexport default DSReadMore;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCnB;AAlCJ,mBAAmC;AACnC,8BAA2E;AAC3E,2BAA4B;AAC5B,4BAA+B;AAC/B,mCAA0E;AAC1E,oBAA2E;AAC3E,iCAAoC;AACpC,uBAAsD;AAEtD,MAAM,aAAa,CAAC,UAA6B;AAC/C,QAAM,uBAAmB,sDAAwD,OAAO,yCAAY;AACpG,QAAM,EAAE,OAAO,MAAM,MAAM,SAAS,aAAa,UAAU,QAAQ,OAAO,IAAI;AAE9E,QAAM,mBAAe,4CAAmB,gBAAgB;AAExD,QAAM,EAAE,gBAAgB,SAAS,YAAY,UAAU,aAAa,WAAW,WAAW,QACxF,gDAAoB,gBAAgB;AAEtC,QAAM,qBAAiB;AAAA,IACrB,CAAC,gBAAyB;AACxB,kBAAY,WAAW;AACvB,UAAI,aAAa;AACf,eAAO;AAAA,MACT,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,QAAQ,WAAW;AAAA,EAC9B;AAEA,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAC5E,QAAM,6BAAyB,0BAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,eAAY;AAAA,YACX,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAEC,cAAc,CAAC,eACd;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO,WAAW,OAAO;AAAA,YACzB,SAAS,MAAM,eAAe,CAAC,QAAQ;AAAA,YACvC,WAAW,WAAW,cAAc;AAAA,YACpC;AAAA,YACA,YAAY,uCAAsB;AAAA,YAClC;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QAGD,eAAe,cACd,4CAAC,sCAAqB,eAA8B,wBAClD,sDAAC,oCAAY,MAAM,SAAS,WAAS,MACnC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAM;AAAA,YACN,WAAW,WAAW,cAAc;AAAA,YACpC;AAAA,YACA;AAAA,YACA,YAAY,uCAAsB;AAAA,YAClC;AAAA,YACA;AAAA;AAAA,QACF,GACF,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAChD,qBAAqB,YAAY;AAGjC,IAAO,qBAAQ;",
   "names": []
 }

package/dist/cjs/{DSReadMoreDefinitions.js → constants/index.js}

@@ -26,27 +26,32 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var DSReadMoreDefinitions_exports = {};
-__export(DSReadMoreDefinitions_exports, {
+var constants_exports = {};
+__export(constants_exports, {
   DSReadMoreDataTestIds: () => DSReadMoreDataTestIds,
   DSReadMoreName: () => DSReadMoreName,
-  DSReadMoreSlots: () => DSReadMoreSlots
+  DSReadMoreSlots: () => DSReadMoreSlots,
+  READ_MORE_DATA_TESTID: () => READ_MORE_DATA_TESTID,
+  READ_MORE_SLOTS: () => READ_MORE_SLOTS
 });
-module.exports = __toCommonJS(DSReadMoreDefinitions_exports);
+module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
 var import_lodash_es = require("lodash-es");
 var import_ds_system = require("@elliemae/ds-system");
 const DSReadMoreName = "DSReadmore";
-const DSReadMoreSlots = {
+const READ_MORE_SLOTS = {
   ROOT: "root",
   TEXT_CONTENT: "text-content",
   TOOLTIP_WRAPPER: "tooltip-wrapper",
   BUTTON_WRAPPER: "button-wrapper",
   BUTTON: "button"
 };
-const DSReadMoreDataTestIds = {
+const DSReadMoreSlots = READ_MORE_SLOTS;
+const READ_MORE_DATA_TESTID = {
   ...(0, import_lodash_es.omit)((0, import_ds_system.slotObjectToDataTestIds)(DSReadMoreName, DSReadMoreSlots), "BUTTON"),
   READ_MORE_BUTTON: "ds-read_more-button",
-  READ_MORE_TOOLTIP_BUTTON: "ds-read_more-tooltip-button"
+  READ_MORE_TOOLTIP_BUTTON: "ds-read_more-tooltip-button",
+  READ_MORE_TEXT: "ds-read_more-text"
 };
-//# sourceMappingURL=DSReadMoreDefinitions.js.map
+const DSReadMoreDataTestIds = READ_MORE_DATA_TESTID;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/constants/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { omit } from 'lodash-es';\nimport { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSReadMoreName = 'DSReadmore';\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const READ_MORE_SLOTS = {\n  ROOT: 'root',\n  TEXT_CONTENT: 'text-content',\n  TOOLTIP_WRAPPER: 'tooltip-wrapper',\n  BUTTON_WRAPPER: 'button-wrapper',\n  BUTTON: 'button',\n} as const;\n\n// keeping legacy code to avoid breaking changes, the code above this is the new convention\nexport const DSReadMoreSlots = READ_MORE_SLOTS;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const READ_MORE_DATA_TESTID = {\n  ...omit(slotObjectToDataTestIds(DSReadMoreName, DSReadMoreSlots), 'BUTTON'),\n  READ_MORE_BUTTON: 'ds-read_more-button',\n  READ_MORE_TOOLTIP_BUTTON: 'ds-read_more-tooltip-button',\n  READ_MORE_TEXT: 'ds-read_more-text',\n};\n\n// keeping legacy code to avoid breaking changes\nexport const DSReadMoreDataTestIds = READ_MORE_DATA_TESTID;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAqB;AACrB,uBAAwC;AAEjC,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,QAAQ;AACV;AAGO,MAAM,kBAAkB;AAGxB,MAAM,wBAAwB;AAAA,EACnC,OAAG,2BAAK,0CAAwB,gBAAgB,eAAe,GAAG,QAAQ;AAAA,EAC1E,kBAAkB;AAAA,EAClB,0BAA0B;AAAA,EAC1B,gBAAgB;AAClB;AAGO,MAAM,wBAAwB;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -29,15 +29,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   DSReadMore: () => import_DSReadMore.DSReadMore,
-  DSReadMoreDataTestIds: () => import_DSReadMoreDefinitions.DSReadMoreDataTestIds,
-  DSReadMoreName: () => import_DSReadMoreDefinitions.DSReadMoreName,
-  DSReadMoreSlots: () => import_DSReadMoreDefinitions.DSReadMoreSlots,
+  DSReadMoreDataTestIds: () => import_constants.DSReadMoreDataTestIds,
+  DSReadMoreName: () => import_constants.DSReadMoreName,
+  DSReadMoreSlots: () => import_constants.DSReadMoreSlots,
   DSReadMoreWithSchema: () => import_DSReadMore.DSReadMoreWithSchema,
+  READ_MORE_DATA_TESTID: () => import_constants.READ_MORE_DATA_TESTID,
+  READ_MORE_SLOTS: () => import_constants.READ_MORE_SLOTS,
   useReadMoreTruncate: () => import_useReadMoreTruncate.useReadMoreTruncate
 });
 module.exports = __toCommonJS(index_exports);
 var React = __toESM(require("react"));
 var import_DSReadMore = require("./DSReadMore.js");
-var import_DSReadMoreDefinitions = require("./DSReadMoreDefinitions.js");
+var import_constants = require("./constants/index.js");
 var import_useReadMoreTruncate = require("./useReadMoreTruncate.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { DSReadMore, DSReadMoreWithSchema } from './DSReadMore.js';\nexport { DSReadMoreName, DSReadMoreSlots, DSReadMoreDataTestIds } from './DSReadMoreDefinitions.js';\nexport type { DSReadMoreT } from './react-desc-prop-types.js';\nexport { useReadMoreTruncate } from './useReadMoreTruncate.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAiD;AACjD,mCAAuE;AAEvE,iCAAoC;",
+  "sourcesContent": ["export { DSReadMore, DSReadMoreWithSchema } from './DSReadMore.js';\nexport {\n  DSReadMoreName,\n  DSReadMoreSlots,\n  READ_MORE_SLOTS,\n  DSReadMoreDataTestIds,\n  READ_MORE_DATA_TESTID,\n} from './constants/index.js';\nexport type { DSReadMoreT } from './react-desc-prop-types.js';\nexport { useReadMoreTruncate } from './useReadMoreTruncate.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAiD;AACjD,uBAMO;AAEP,iCAAoC;",
   "names": []
 }

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

@@ -35,7 +35,7 @@ __export(react_desc_prop_types_exports, {
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_DSReadMoreDefinitions = require("./DSReadMoreDefinitions.js");
+var import_constants = require("./constants/index.js");
 const defaultProps = {
   lines: 2,
   more: "more",
@@ -48,6 +48,7 @@ const defaultProps = {
   withTooltip: false
 };
 const DSReadMorePropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSReadMoreName, import_constants.READ_MORE_SLOTS),
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
   /** Ammount of lines after you want to display an ellipsis + more/less button */
@@ -65,7 +66,7 @@ const DSReadMorePropTypes = {
   /** The text you want to appear when truncating */
   ellipsis: import_ds_props_helpers.PropTypes.string.description("The text you want to appear when truncating").defaultValue("..."),
   withTooltip: import_ds_props_helpers.PropTypes.bool.description("Whether to show expandable tooltip on ellipsis focus instead of expandable buttons").defaultValue("false"),
-  ...(0, import_ds_props_helpers.getPropsPerDatatestIdPropTypes)(import_DSReadMoreDefinitions.DSReadMoreDataTestIds)
+  ...(0, import_ds_props_helpers.getPropsPerDatatestIdPropTypes)(import_constants.DSReadMoreDataTestIds)
 };
 const DSReadMorePropTypesSchema = DSReadMorePropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport {\n  getPropsPerDatatestIdPropTypes,\n  globalAttributesPropTypes,\n  PropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { DSReadMoreDataTestIds } from './DSReadMoreDefinitions.js';\n\nexport namespace DSReadMoreT {\n  type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n  type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n\n  export interface DefaultProps {\n    lines: number;\n    more: string;\n    less: string;\n    onMore: () => void;\n    onLess: () => void;\n    ellipsis: string;\n    withTooltip: boolean;\n  }\n\n  export interface OptionalProps {}\n\n  export interface RequiredProps {\n    content: string;\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLSpanElement>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLSpanElement>;\n}\n\nexport const defaultProps: DSReadMoreT.DefaultProps = {\n  lines: 2,\n  more: 'more',\n  less: 'less',\n  onMore: () => {},\n  onLess: () => {},\n  ellipsis: '...',\n  withTooltip: false,\n};\n\nexport const DSReadMorePropTypes: DSPropTypesSchema<DSReadMoreT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  /** Ammount of lines after you want to display an ellipsis + more/less button */\n  lines: PropTypes.number\n    .description('Ammount of lines after you want to display an ellipsis + more/less button')\n    .defaultValue(2),\n  /** Label which will appear on the 'More' button */\n  more: PropTypes.string.description(\"Label which will appear on the 'More' button\").defaultValue('more'),\n  /** Label which will appear on the 'Less' button */\n  less: PropTypes.string.description(\"Label which will appear on the 'Less' button\").defaultValue('less'),\n  /** Function which will execute when the user click the 'More' button */\n  onMore: PropTypes.func.description(\"Function which will execute when the user click the 'More' button\"),\n  /** Function which will execute when the user click the 'Less' button */\n  onLess: PropTypes.func.description(\"Function which will execute when the user click the 'Less' button\"),\n  /** The text content you want displayed */\n  content: PropTypes.string.description('The text content you want displayed').isRequired,\n\n  /** The text you want to appear when truncating */\n  ellipsis: PropTypes.string.description('The text you want to appear when truncating').defaultValue('...'),\n  withTooltip: PropTypes.bool\n    .description('Whether to show expandable tooltip on ellipsis focus instead of expandable buttons')\n    .defaultValue('false'),\n  ...getPropsPerDatatestIdPropTypes(DSReadMoreDataTestIds),\n};\n\nexport const DSReadMorePropTypesSchema = DSReadMorePropTypes as unknown as WeakValidationMap<DSReadMoreT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAGP,mCAAsC;AA2B/B,MAAM,eAAyC;AAAA,EACpD,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,UAAU;AAAA,EACV,aAAa;AACf;AAEO,MAAM,sBAA4D;AAAA,EACvE,GAAG;AAAA,EACH,GAAG;AAAA;AAAA,EAEH,OAAO,kCAAU,OACd,YAAY,2EAA2E,EACvF,aAAa,CAAC;AAAA;AAAA,EAEjB,MAAM,kCAAU,OAAO,YAAY,8CAA8C,EAAE,aAAa,MAAM;AAAA;AAAA,EAEtG,MAAM,kCAAU,OAAO,YAAY,8CAA8C,EAAE,aAAa,MAAM;AAAA;AAAA,EAEtG,QAAQ,kCAAU,KAAK,YAAY,mEAAmE;AAAA;AAAA,EAEtG,QAAQ,kCAAU,KAAK,YAAY,mEAAmE;AAAA;AAAA,EAEtG,SAAS,kCAAU,OAAO,YAAY,qCAAqC,EAAE;AAAA;AAAA,EAG7E,UAAU,kCAAU,OAAO,YAAY,6CAA6C,EAAE,aAAa,KAAK;AAAA,EACxG,aAAa,kCAAU,KACpB,YAAY,oFAAoF,EAChG,aAAa,OAAO;AAAA,EACvB,OAAG,wDAA+B,kDAAqB;AACzD;AAEO,MAAM,4BAA4B;",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport {\n  getPropsPerDatatestIdPropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  PropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\n\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSReadMoreDataTestIds, DSReadMoreName, READ_MORE_SLOTS } from './constants/index.js';\n\nexport namespace DSReadMoreT {\n  type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n  type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n\n  export interface DefaultProps {\n    lines: number;\n    more: string;\n    less: string;\n    onMore: () => void;\n    onLess: () => void;\n    ellipsis: string;\n    withTooltip: boolean;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSReadMoreName, typeof READ_MORE_SLOTS> {}\n\n  export interface RequiredProps {\n    content: string;\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLSpanElement>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLSpanElement>;\n}\n\nexport const defaultProps: DSReadMoreT.DefaultProps = {\n  lines: 2,\n  more: 'more',\n  less: 'less',\n  onMore: () => {},\n  onLess: () => {},\n  ellipsis: '...',\n  withTooltip: false,\n};\n\nexport const DSReadMorePropTypes: DSPropTypesSchema<DSReadMoreT.Props> = {\n  ...getPropsPerSlotPropTypes(DSReadMoreName, READ_MORE_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  /** Ammount of lines after you want to display an ellipsis + more/less button */\n  lines: PropTypes.number\n    .description('Ammount of lines after you want to display an ellipsis + more/less button')\n    .defaultValue(2),\n  /** Label which will appear on the 'More' button */\n  more: PropTypes.string.description(\"Label which will appear on the 'More' button\").defaultValue('more'),\n  /** Label which will appear on the 'Less' button */\n  less: PropTypes.string.description(\"Label which will appear on the 'Less' button\").defaultValue('less'),\n  /** Function which will execute when the user click the 'More' button */\n  onMore: PropTypes.func.description(\"Function which will execute when the user click the 'More' button\"),\n  /** Function which will execute when the user click the 'Less' button */\n  onLess: PropTypes.func.description(\"Function which will execute when the user click the 'Less' button\"),\n  /** The text content you want displayed */\n  content: PropTypes.string.description('The text content you want displayed').isRequired,\n\n  /** The text you want to appear when truncating */\n  ellipsis: PropTypes.string.description('The text you want to appear when truncating').defaultValue('...'),\n  withTooltip: PropTypes.bool\n    .description('Whether to show expandable tooltip on ellipsis focus instead of expandable buttons')\n    .defaultValue('false'),\n  ...getPropsPerDatatestIdPropTypes(DSReadMoreDataTestIds),\n};\n\nexport const DSReadMorePropTypesSchema = DSReadMorePropTypes as unknown as ValidationMap<DSReadMoreT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAMO;AAIP,uBAAuE;AA4BhE,MAAM,eAAyC;AAAA,EACpD,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,UAAU;AAAA,EACV,aAAa;AACf;AAEO,MAAM,sBAA4D;AAAA,EACvE,OAAG,kDAAyB,iCAAgB,gCAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA;AAAA,EAEH,OAAO,kCAAU,OACd,YAAY,2EAA2E,EACvF,aAAa,CAAC;AAAA;AAAA,EAEjB,MAAM,kCAAU,OAAO,YAAY,8CAA8C,EAAE,aAAa,MAAM;AAAA;AAAA,EAEtG,MAAM,kCAAU,OAAO,YAAY,8CAA8C,EAAE,aAAa,MAAM;AAAA;AAAA,EAEtG,QAAQ,kCAAU,KAAK,YAAY,mEAAmE;AAAA;AAAA,EAEtG,QAAQ,kCAAU,KAAK,YAAY,mEAAmE;AAAA;AAAA,EAEtG,SAAS,kCAAU,OAAO,YAAY,qCAAqC,EAAE;AAAA;AAAA,EAG7E,UAAU,kCAAU,OAAO,YAAY,6CAA6C,EAAE,aAAa,KAAK;AAAA,EACxG,aAAa,kCAAU,KACpB,YAAY,oFAAoF,EAChG,aAAa,OAAO;AAAA,EACvB,OAAG,wDAA+B,sCAAqB;AACzD;AAEO,MAAM,4BAA4B;",
   "names": []
 }

package/dist/cjs/styled.js

@@ -39,8 +39,8 @@ module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
-var import_DSReadMoreDefinitions = require("./DSReadMoreDefinitions.js");
-const StyledTextWrapper = (0, import_ds_system.styled)("span", { name: import_DSReadMoreDefinitions.DSReadMoreName, slot: import_DSReadMoreDefinitions.DSReadMoreSlots.ROOT })`
+var import_constants = require("./constants/index.js");
+const StyledTextWrapper = (0, import_ds_system.styled)("span", { name: import_constants.DSReadMoreName, slot: import_constants.DSReadMoreSlots.ROOT })`
   position: relative;
   /**
  * PUI-16110 - [ReadMore] Autotriggered-Visually broken in safari + Sequoia
@@ -69,7 +69,7 @@ const StyledTextWrapper = (0, import_ds_system.styled)("span", { name: import_DS
   word-break: break-all;
   ${import_ds_system.xStyledCommonProps}
 `;
-const StyledTextContent = (0, import_ds_system.styled)("span", { name: import_DSReadMoreDefinitions.DSReadMoreName, slot: import_DSReadMoreDefinitions.DSReadMoreSlots.TEXT_CONTENT })`
+const StyledTextContent = (0, import_ds_system.styled)("span", { name: import_constants.DSReadMoreName, slot: import_constants.DSReadMoreSlots.TEXT_CONTENT })`
   ${({ lines, expanded }) => lines === 1 && !expanded ? `
     flex: 1 1 auto;
     overflow: hidden;
@@ -77,11 +77,11 @@ const StyledTextContent = (0, import_ds_system.styled)("span", { name: import_DS
     text-overflow: clip;
   ` : ""}
 `;
-const StyledTooltipWrapper = (0, import_ds_system.styled)("div", { name: import_DSReadMoreDefinitions.DSReadMoreName, slot: import_DSReadMoreDefinitions.DSReadMoreSlots.TOOLTIP_WRAPPER })`
+const StyledTooltipWrapper = (0, import_ds_system.styled)("div", { name: import_constants.DSReadMoreName, slot: import_constants.DSReadMoreSlots.TOOLTIP_WRAPPER })`
   display: inline-block;
 `;
-const StyledButtonWrapper = (0, import_ds_system.styled)("span", { name: import_DSReadMoreDefinitions.DSReadMoreName, slot: import_DSReadMoreDefinitions.DSReadMoreSlots.BUTTON_WRAPPER })``;
-const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name: import_DSReadMoreDefinitions.DSReadMoreName, slot: import_DSReadMoreDefinitions.DSReadMoreSlots.BUTTON })`
+const StyledButtonWrapper = (0, import_ds_system.styled)("span", { name: import_constants.DSReadMoreName, slot: import_constants.DSReadMoreSlots.BUTTON_WRAPPER })``;
+const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name: import_constants.DSReadMoreName, slot: import_constants.DSReadMoreSlots.BUTTON })`
   padding: 0;
   color: ${({ withTooltip, theme }) => withTooltip ? "inherit" : `${theme.colors.brand["600"]}`};
   border: 0;

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSReadMoreName, DSReadMoreSlots } from './DSReadMoreDefinitions.js';\n\nexport const StyledTextWrapper = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.ROOT })<{\n  lines: number;\n  expanded: boolean;\n}>`\n  position: relative;\n  /**\n * PUI-16110 - [ReadMore] Autotriggered-Visually broken in safari + Sequoia\n * -----------------------------------\n * In Safari 17.4+ (macOS Sequoia), using scrollHeight or offsetHeight with line-clamp\n * can break the layout and, potentially, trigger infinite loops through ResizeObserver.\n *\n * - Avoids -webkit-line-clamp: 1 which breaks layout and can cause infinite ResizeObserver loops.\n * - Instead, uses flex + white-space + overflow hidden for single-line truncation.\n */\n  ${({ lines, expanded }) =>\n    lines === 1 && !expanded\n      ? `\n    display: flex;\n    align-items: baseline;\n    overflow: hidden;\n    white-space: nowrap;\n  `\n      : `\n    display: -webkit-box;\n    -webkit-line-clamp: ${expanded ? 'unset' : lines};\n    -webkit-box-orient: vertical;\n  `}\n\n  -webkit-hyphens: auto;\n  -moz-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n  word-break: break-all;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledTextContent = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.TEXT_CONTENT })<{\n  lines: number;\n  expanded: boolean;\n}>`\n  ${({ lines, expanded }) =>\n    lines === 1 && !expanded\n      ? `\n    flex: 1 1 auto;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: clip;\n  `\n      : ''}\n`;\n\nexport const StyledTooltipWrapper = styled('div', { name: DSReadMoreName, slot: DSReadMoreSlots.TOOLTIP_WRAPPER })`\n  display: inline-block;\n`;\n\nexport const StyledButtonWrapper = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON_WRAPPER })``;\n\nexport const StyledButton = styled(DSButtonV2, { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON })<{\n  withTooltip?: boolean;\n}>`\n  padding: 0;\n  color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n  border: 0;\n  margin: 0;\n  font-size: 12px;\n  min-width: 0px;\n  height: auto;\n  text-transform: unset;\n  &:hover:not([disabled]) {\n    color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n    background-color: transparent;\n    text-decoration: ${({ withTooltip }) => (withTooltip ? '' : 'underline')};\n  }\n`;\n\nexport const ScreenReaderOnly = styled.span`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 100%;\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,0BAA2B;AAC3B,mCAAgD;AAEzC,MAAM,wBAAoB,yBAAO,QAAQ,EAAE,MAAM,6CAAgB,MAAM,6CAAgB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAchG,CAAC,EAAE,OAAO,SAAS,MACnB,UAAU,KAAK,CAAC,WACZ;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA;AAAA;AAAA,0BAEkB,WAAW,UAAU,KAAK;AAAA;AAAA,GAEjD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC,mCAAkB;AAAA;AAGf,MAAM,wBAAoB,yBAAO,QAAQ,EAAE,MAAM,6CAAgB,MAAM,6CAAgB,aAAa,CAAC;AAAA,IAIxG,CAAC,EAAE,OAAO,SAAS,MACnB,UAAU,KAAK,CAAC,WACZ;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,EAAE;AAAA;AAGH,MAAM,2BAAuB,yBAAO,OAAO,EAAE,MAAM,6CAAgB,MAAM,6CAAgB,gBAAgB,CAAC;AAAA;AAAA;AAI1G,MAAM,0BAAsB,yBAAO,QAAQ,EAAE,MAAM,6CAAgB,MAAM,6CAAgB,eAAe,CAAC;AAEzG,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,6CAAgB,MAAM,6CAAgB,OAAO,CAAC;AAAA;AAAA,WAI1F,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM,KAAK,CAAC,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQpF,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM,KAAK,CAAC,EAAG;AAAA;AAAA,uBAE5E,CAAC,EAAE,YAAY,MAAO,cAAc,KAAK,WAAY;AAAA;AAAA;AAIrE,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSReadMoreName, DSReadMoreSlots } from './constants/index.js';\n\nexport const StyledTextWrapper = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.ROOT })<{\n  lines: number;\n  expanded: boolean;\n}>`\n  position: relative;\n  /**\n * PUI-16110 - [ReadMore] Autotriggered-Visually broken in safari + Sequoia\n * -----------------------------------\n * In Safari 17.4+ (macOS Sequoia), using scrollHeight or offsetHeight with line-clamp\n * can break the layout and, potentially, trigger infinite loops through ResizeObserver.\n *\n * - Avoids -webkit-line-clamp: 1 which breaks layout and can cause infinite ResizeObserver loops.\n * - Instead, uses flex + white-space + overflow hidden for single-line truncation.\n */\n  ${({ lines, expanded }) =>\n    lines === 1 && !expanded\n      ? `\n    display: flex;\n    align-items: baseline;\n    overflow: hidden;\n    white-space: nowrap;\n  `\n      : `\n    display: -webkit-box;\n    -webkit-line-clamp: ${expanded ? 'unset' : lines};\n    -webkit-box-orient: vertical;\n  `}\n\n  -webkit-hyphens: auto;\n  -moz-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n  word-break: break-all;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledTextContent = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.TEXT_CONTENT })<{\n  lines: number;\n  expanded: boolean;\n}>`\n  ${({ lines, expanded }) =>\n    lines === 1 && !expanded\n      ? `\n    flex: 1 1 auto;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: clip;\n  `\n      : ''}\n`;\n\nexport const StyledTooltipWrapper = styled('div', { name: DSReadMoreName, slot: DSReadMoreSlots.TOOLTIP_WRAPPER })`\n  display: inline-block;\n`;\n\nexport const StyledButtonWrapper = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON_WRAPPER })``;\n\nexport const StyledButton = styled(DSButtonV2, { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON })<{\n  withTooltip?: boolean;\n}>`\n  padding: 0;\n  color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n  border: 0;\n  margin: 0;\n  font-size: 12px;\n  min-width: 0px;\n  height: auto;\n  text-transform: unset;\n  &:hover:not([disabled]) {\n    color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n    background-color: transparent;\n    text-decoration: ${({ withTooltip }) => (withTooltip ? '' : 'underline')};\n  }\n`;\n\nexport const ScreenReaderOnly = styled.span`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 100%;\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,0BAA2B;AAC3B,uBAAgD;AAEzC,MAAM,wBAAoB,yBAAO,QAAQ,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAchG,CAAC,EAAE,OAAO,SAAS,MACnB,UAAU,KAAK,CAAC,WACZ;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA;AAAA;AAAA,0BAEkB,WAAW,UAAU,KAAK;AAAA;AAAA,GAEjD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC,mCAAkB;AAAA;AAGf,MAAM,wBAAoB,yBAAO,QAAQ,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,aAAa,CAAC;AAAA,IAIxG,CAAC,EAAE,OAAO,SAAS,MACnB,UAAU,KAAK,CAAC,WACZ;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,EAAE;AAAA;AAGH,MAAM,2BAAuB,yBAAO,OAAO,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,gBAAgB,CAAC;AAAA;AAAA;AAI1G,MAAM,0BAAsB,yBAAO,QAAQ,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,eAAe,CAAC;AAEzG,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,OAAO,CAAC;AAAA;AAAA,WAI1F,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM,KAAK,CAAC,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQpF,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM,KAAK,CAAC,EAAG;AAAA;AAAA,uBAE5E,CAAC,EAAE,YAAY,MAAO,cAAc,KAAK,WAAY;AAAA;AAAA;AAIrE,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/useReadMoreTruncate.js

@@ -43,13 +43,13 @@ const binSearchTextOverflow = (element, parent, content) => {
   let textEnd = 0;
   element.innerText = content;
   while (left <= right) {
-    const middle = Math.floor((left + right) / 2);
-    element.innerText = content.slice(0, middle);
+    const mid = Math.floor((left + right) / 2);
+    element.innerText = content.slice(0, mid);
     if (overflows(parent)) {
-      right = middle - 1;
+      right = mid - 1;
     } else {
-      textEnd = middle;
-      left = middle + 1;
+      textEnd = mid;
+      left = mid + 1;
     }
   }
   element.innerText = content.slice(0, textEnd);
@@ -61,40 +61,47 @@ const useReadMoreTruncate = ({ lines, content }) => {
   const [showButton, setShowButton] = (0, import_react.useState)(false);
   const { width, height } = (0, import_useOnElementResize.useOnElementResize)(textWrapperRef);
   (0, import_react.useLayoutEffect)(() => {
-    const textElement = textRef.current;
-    const parentElement = textWrapperRef.current;
-    if (parentElement && textElement) {
-      textElement.innerText = content;
-      if (lines === 1) {
-        const computed = getComputedStyle(textElement);
-        const font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;
-        const canvas = document.createElement("canvas");
-        const ctx = canvas.getContext("2d");
-        let isTruncated = false;
-        if (ctx) {
-          ctx.font = font;
-          const measuredWidth = ctx.measureText(content).width;
-          isTruncated = measuredWidth > parentElement.clientWidth;
-        }
-        setShowButton(expanded || isTruncated);
-        return;
+    const textEl = textRef.current;
+    const wrapperEl = textWrapperRef.current;
+    if (!textEl || !wrapperEl) return;
+    textEl.innerText = content;
+    if (lines === 1) {
+      const computed = getComputedStyle(textEl);
+      const font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      let truncated = false;
+      if (ctx) {
+        ctx.font = font;
+        const measuredWidth = ctx.measureText(content).width;
+        truncated = measuredWidth > wrapperEl.clientWidth;
       }
-      const isOverflowing = overflows(parentElement);
-      setShowButton(expanded || isOverflowing);
-      if (!expanded && isOverflowing) {
-        setTimeout(() => {
-          binSearchTextOverflow(textElement, parentElement, content);
-        }, 0);
+      setShowButton(expanded || truncated);
+      return;
+    }
+    const isOverflowing = overflows({
+      offsetHeight: wrapperEl.offsetHeight,
+      scrollHeight: wrapperEl.scrollHeight
+    });
+    setShowButton(expanded || isOverflowing);
+    if (!expanded && isOverflowing) {
+      const doBinaryTruncate = () => {
+        if (!textEl || !wrapperEl) return;
+        binSearchTextOverflow(textEl, wrapperEl, content);
+      };
+      if ("fonts" in document && document.fonts.ready) {
+        document.fonts.ready.then(() => {
+          doBinaryTruncate();
+        }).catch(() => {
+          setTimeout(doBinaryTruncate, 0);
+        });
+      } else {
+        setTimeout(doBinaryTruncate, 0);
       }
     }
   }, [lines, content, expanded, width, height]);
   const srOnlyText = (0, import_react.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.ScreenReaderOnly, { children: content }), [content]);
-  const textProps = (0, import_react.useMemo)(
-    () => ({
-      "aria-hidden": true
-    }),
-    []
-  );
+  const textProps = (0, import_react.useMemo)(() => ({ "aria-hidden": true }), []);
   return {
     textWrapperRef,
     textRef,

package/dist/cjs/useReadMoreTruncate.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useReadMoreTruncate.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useOnElementResize } from './useOnElementResize.js';\nimport type { DSReadMoreT } from './react-desc-prop-types.js';\nimport { ScreenReaderOnly } from './styled.js';\n\n// offsetHeight + margin helps account for subpixel differences and the button size\nconst overflows = ({ offsetHeight, scrollHeight }: { offsetHeight: number; scrollHeight: number }) =>\n  offsetHeight + 4 < scrollHeight;\n\nconst binSearchTextOverflow = (element: HTMLElement, parent: HTMLElement, content: string) => {\n  let left = 0;\n  let right = content.length;\n  let textEnd = 0;\n\n  // Reset text to full before starting\n  element.innerText = content;\n\n  while (left <= right) {\n    const middle = Math.floor((left + right) / 2);\n    element.innerText = content.slice(0, middle);\n\n    if (overflows(parent)) {\n      right = middle - 1;\n    } else {\n      textEnd = middle;\n      left = middle + 1;\n    }\n  }\n\n  element.innerText = content.slice(0, textEnd);\n};\n\nexport const useReadMoreTruncate = ({ lines, content }: Pick<DSReadMoreT.InternalProps, 'lines' | 'content'>) => {\n  const textWrapperRef = useRef<HTMLSpanElement>(null);\n  const textRef = useRef<HTMLSpanElement>(null);\n\n  const [expanded, setExpanded] = useState(false);\n\n  const [showButton, setShowButton] = useState(false);\n\n  // We need to re-run the effect when the size of the container changes\n  const { width, height } = useOnElementResize(textWrapperRef);\n\n  useLayoutEffect(() => {\n    const textElement = textRef.current;\n    const parentElement = textWrapperRef.current;\n    if (parentElement && textElement) {\n      textElement.innerText = content;\n      /**\n       * PUI-16110 - [ReadMore] Autotriggered-Visually broken in safari + Sequoia\n       * -----------------------------------\n       * In Safari 17.4+ (macOS Sequoia), using `scrollHeight` or `offsetHeight` with line-clamp\n       * can break the layout and, potentially, trigger infinite loops through ResizeObserver.\n       *\n       * Instead of relying on overflow-based measurements, we calculate the actual pixel width\n       * of the text using a canvas and compare it with the visible width of the wrapper.\n       *\n       * This method is layout-safe, does not force reflow, and works reliably across browsers.\n       */\n      if (lines === 1) {\n        const computed = getComputedStyle(textElement);\n        const font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;\n        const canvas = document.createElement('canvas');\n        const ctx = canvas.getContext('2d');\n        let isTruncated = false;\n        if (ctx) {\n          ctx.font = font;\n          const measuredWidth = ctx.measureText(content).width;\n          isTruncated = measuredWidth > parentElement.clientWidth;\n        }\n        setShowButton(expanded || isTruncated);\n        return;\n      }\n\n      const isOverflowing = overflows(parentElement);\n      setShowButton(expanded || isOverflowing);\n      if (!expanded && isOverflowing) {\n        // we have a strange edge case where when removing the browser cache the text is not\n        // truncated correctly, so we need to wait for the next frame\n        // to make sure the text is truncated correctly\n        // my supposition is that the text is not rendered yet becuase of the font loading\n        setTimeout(() => {\n          binSearchTextOverflow(textElement, parentElement, content);\n        }, 0);\n      }\n    }\n  }, [lines, content, expanded, width, height]);\n\n  const srOnlyText = useMemo(() => <ScreenReaderOnly>{content}</ScreenReaderOnly>, [content]);\n\n  const textProps = useMemo(\n    () => ({\n      'aria-hidden': true,\n    }),\n    [],\n  );\n\n  return {\n    textWrapperRef,\n    textRef,\n    showButton,\n    expanded,\n    setExpanded,\n    textProps,\n    srOnlyText,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwFY;AAxFnC,mBAAkE;AAClE,gCAAmC;AAEnC,oBAAiC;AAGjC,MAAM,YAAY,CAAC,EAAE,cAAc,aAAa,MAC9C,eAAe,IAAI;AAErB,MAAM,wBAAwB,CAAC,SAAsB,QAAqB,YAAoB;AAC5F,MAAI,OAAO;AACX,MAAI,QAAQ,QAAQ;AACpB,MAAI,UAAU;AAGd,UAAQ,YAAY;AAEpB,SAAO,QAAQ,OAAO;AACpB,UAAM,SAAS,KAAK,OAAO,OAAO,SAAS,CAAC;AAC5C,YAAQ,YAAY,QAAQ,MAAM,GAAG,MAAM;AAE3C,QAAI,UAAU,MAAM,GAAG;AACrB,cAAQ,SAAS;AAAA,IACnB,OAAO;AACL,gBAAU;AACV,aAAO,SAAS;AAAA,IAClB;AAAA,EACF;AAEA,UAAQ,YAAY,QAAQ,MAAM,GAAG,OAAO;AAC9C;AAEO,MAAM,sBAAsB,CAAC,EAAE,OAAO,QAAQ,MAA4D;AAC/G,QAAM,qBAAiB,qBAAwB,IAAI;AACnD,QAAM,cAAU,qBAAwB,IAAI;AAE5C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAE9C,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAGlD,QAAM,EAAE,OAAO,OAAO,QAAI,8CAAmB,cAAc;AAE3D,oCAAgB,MAAM;AACpB,UAAM,cAAc,QAAQ;AAC5B,UAAM,gBAAgB,eAAe;AACrC,QAAI,iBAAiB,aAAa;AAChC,kBAAY,YAAY;AAYxB,UAAI,UAAU,GAAG;AACf,cAAM,WAAW,iBAAiB,WAAW;AAC7C,cAAM,OAAO,GAAG,SAAS,UAAU,IAAI,SAAS,QAAQ,IAAI,SAAS,UAAU;AAC/E,cAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,cAAM,MAAM,OAAO,WAAW,IAAI;AAClC,YAAI,cAAc;AAClB,YAAI,KAAK;AACP,cAAI,OAAO;AACX,gBAAM,gBAAgB,IAAI,YAAY,OAAO,EAAE;AAC/C,wBAAc,gBAAgB,cAAc;AAAA,QAC9C;AACA,sBAAc,YAAY,WAAW;AACrC;AAAA,MACF;AAEA,YAAM,gBAAgB,UAAU,aAAa;AAC7C,oBAAc,YAAY,aAAa;AACvC,UAAI,CAAC,YAAY,eAAe;AAK9B,mBAAW,MAAM;AACf,gCAAsB,aAAa,eAAe,OAAO;AAAA,QAC3D,GAAG,CAAC;AAAA,MACN;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,UAAU,OAAO,MAAM,CAAC;AAE5C,QAAM,iBAAa,sBAAQ,MAAM,4CAAC,kCAAkB,mBAAQ,GAAqB,CAAC,OAAO,CAAC;AAE1F,QAAM,gBAAY;AAAA,IAChB,OAAO;AAAA,MACL,eAAe;AAAA,IACjB;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-misused-promises */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\n// useReadMoreTruncate.tsx\nimport React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useOnElementResize } from './useOnElementResize.js';\nimport type { DSReadMoreT } from './react-desc-prop-types.js';\nimport { ScreenReaderOnly } from './styled.js';\n\n// offsetHeight + margin/buffer to avoid subpixel errors\nconst overflows = ({ offsetHeight, scrollHeight }: { offsetHeight: number; scrollHeight: number }) =>\n  offsetHeight + 4 < scrollHeight;\n\n/**\n * binSearchTextOverflow slices the content until there's no overflow.\n * It assumes `element` is the <span> node containing the text, and `parent`\n * is the wrapper with the height/clamp applied.\n */\nconst binSearchTextOverflow = (element: HTMLElement, parent: HTMLElement, content: string) => {\n  let left = 0;\n  let right = content.length;\n  let textEnd = 0;\n\n  // Place the full text before starting\n  element.innerText = content;\n\n  while (left <= right) {\n    const mid = Math.floor((left + right) / 2);\n    element.innerText = content.slice(0, mid);\n\n    if (overflows(parent)) {\n      // Still overflowing \u2192 reduce\n      right = mid - 1;\n    } else {\n      // No overflow \u2192 we can increase\n      textEnd = mid;\n      left = mid + 1;\n    }\n  }\n\n  element.innerText = content.slice(0, textEnd);\n};\n\nexport const useReadMoreTruncate = ({ lines, content }: Pick<DSReadMoreT.InternalProps, 'lines' | 'content'>) => {\n  const textWrapperRef = useRef<HTMLSpanElement>(null);\n  const textRef = useRef<HTMLSpanElement>(null);\n\n  const [expanded, setExpanded] = useState(false);\n  const [showButton, setShowButton] = useState(false);\n\n  // Detect container size changes\n  const { width, height } = useOnElementResize(textWrapperRef);\n\n  useLayoutEffect(() => {\n    const textEl = textRef.current;\n    const wrapperEl = textWrapperRef.current;\n    if (!textEl || !wrapperEl) return;\n\n    // 1) Always reset the text to \"content\"\n    textEl.innerText = content;\n\n    // 2) Case lines === 1: measure with canvas\n    if (lines === 1) {\n      const computed = getComputedStyle(textEl);\n      const font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;\n\n      const canvas = document.createElement('canvas');\n      const ctx = canvas.getContext('2d');\n      let truncated = false;\n\n      if (ctx) {\n        ctx.font = font;\n        const measuredWidth = ctx.measureText(content).width;\n        truncated = measuredWidth > wrapperEl.clientWidth;\n      }\n\n      setShowButton(expanded || truncated);\n      // No need to truncate char by char in single-line: hiding with CSS is enough.\n      return;\n    }\n\n    // 3) For multiline: first check native overflow\n    const isOverflowing = overflows({\n      offsetHeight: wrapperEl.offsetHeight,\n      scrollHeight: wrapperEl.scrollHeight,\n    });\n    setShowButton(expanded || isOverflowing);\n\n    // 4) If not expanded and there is overflow, adjust the slice with binary search\n    if (!expanded && isOverflowing) {\n      // Function that executes binSearchTextOverflow\n      const doBinaryTruncate = () => {\n        if (!textEl || !wrapperEl) return;\n        binSearchTextOverflow(textEl, wrapperEl, content);\n      };\n\n      // If the browser supports document.fonts, wait for them to load.\n      if ('fonts' in document && document.fonts.ready) {\n        document.fonts.ready\n          .then(() => {\n            doBinaryTruncate();\n          })\n          .catch(() => {\n            // If fonts.ready fails, fall back to timeout\n            setTimeout(doBinaryTruncate, 0);\n          });\n      } else {\n        // Fallback for browsers without the Font Loading API\n        setTimeout(doBinaryTruncate, 0);\n      }\n    }\n  }, [lines, content, expanded, width, height]);\n\n  // Hidden text for screen readers (always the full string)\n  const srOnlyText = useMemo(() => <ScreenReaderOnly>{content}</ScreenReaderOnly>, [content]);\n\n  // Mark the visible content as aria-hidden\n  const textProps = useMemo(() => ({ 'aria-hidden': true }), []);\n\n  return {\n    textWrapperRef,\n    textRef,\n    showButton,\n    expanded,\n    setExpanded,\n    textProps,\n    srOnlyText,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkHY;AA9GnC,mBAAkE;AAClE,gCAAmC;AAEnC,oBAAiC;AAGjC,MAAM,YAAY,CAAC,EAAE,cAAc,aAAa,MAC9C,eAAe,IAAI;AAOrB,MAAM,wBAAwB,CAAC,SAAsB,QAAqB,YAAoB;AAC5F,MAAI,OAAO;AACX,MAAI,QAAQ,QAAQ;AACpB,MAAI,UAAU;AAGd,UAAQ,YAAY;AAEpB,SAAO,QAAQ,OAAO;AACpB,UAAM,MAAM,KAAK,OAAO,OAAO,SAAS,CAAC;AACzC,YAAQ,YAAY,QAAQ,MAAM,GAAG,GAAG;AAExC,QAAI,UAAU,MAAM,GAAG;AAErB,cAAQ,MAAM;AAAA,IAChB,OAAO;AAEL,gBAAU;AACV,aAAO,MAAM;AAAA,IACf;AAAA,EACF;AAEA,UAAQ,YAAY,QAAQ,MAAM,GAAG,OAAO;AAC9C;AAEO,MAAM,sBAAsB,CAAC,EAAE,OAAO,QAAQ,MAA4D;AAC/G,QAAM,qBAAiB,qBAAwB,IAAI;AACnD,QAAM,cAAU,qBAAwB,IAAI;AAE5C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAGlD,QAAM,EAAE,OAAO,OAAO,QAAI,8CAAmB,cAAc;AAE3D,oCAAgB,MAAM;AACpB,UAAM,SAAS,QAAQ;AACvB,UAAM,YAAY,eAAe;AACjC,QAAI,CAAC,UAAU,CAAC,UAAW;AAG3B,WAAO,YAAY;AAGnB,QAAI,UAAU,GAAG;AACf,YAAM,WAAW,iBAAiB,MAAM;AACxC,YAAM,OAAO,GAAG,SAAS,UAAU,IAAI,SAAS,QAAQ,IAAI,SAAS,UAAU;AAE/E,YAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,YAAM,MAAM,OAAO,WAAW,IAAI;AAClC,UAAI,YAAY;AAEhB,UAAI,KAAK;AACP,YAAI,OAAO;AACX,cAAM,gBAAgB,IAAI,YAAY,OAAO,EAAE;AAC/C,oBAAY,gBAAgB,UAAU;AAAA,MACxC;AAEA,oBAAc,YAAY,SAAS;AAEnC;AAAA,IACF;AAGA,UAAM,gBAAgB,UAAU;AAAA,MAC9B,cAAc,UAAU;AAAA,MACxB,cAAc,UAAU;AAAA,IAC1B,CAAC;AACD,kBAAc,YAAY,aAAa;AAGvC,QAAI,CAAC,YAAY,eAAe;AAE9B,YAAM,mBAAmB,MAAM;AAC7B,YAAI,CAAC,UAAU,CAAC,UAAW;AAC3B,8BAAsB,QAAQ,WAAW,OAAO;AAAA,MAClD;AAGA,UAAI,WAAW,YAAY,SAAS,MAAM,OAAO;AAC/C,iBAAS,MAAM,MACZ,KAAK,MAAM;AACV,2BAAiB;AAAA,QACnB,CAAC,EACA,MAAM,MAAM;AAEX,qBAAW,kBAAkB,CAAC;AAAA,QAChC,CAAC;AAAA,MACL,OAAO;AAEL,mBAAW,kBAAkB,CAAC;AAAA,MAChC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,UAAU,OAAO,MAAM,CAAC;AAG5C,QAAM,iBAAa,sBAAQ,MAAM,4CAAC,kCAAkB,mBAAQ,GAAqB,CAAC,OAAO,CAAC;AAG1F,QAAM,gBAAY,sBAAQ,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC,CAAC;AAE7D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/DSReadMore.js

@@ -7,7 +7,7 @@ import { MoreLessButton } from "./MoreLessButton.js";
 import { DSReadMorePropTypesSchema, defaultProps } from "./react-desc-prop-types.js";
 import { StyledTextWrapper, StyledTextContent, StyledTooltipWrapper } from "./styled.js";
 import { useReadMoreTruncate } from "./useReadMoreTruncate.js";
-import { DSReadMoreDataTestIds, DSReadMoreName } from "./DSReadMoreDefinitions.js";
+import { DSReadMoreDataTestIds, DSReadMoreName } from "./constants/index.js";
 const DSReadMore = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   const { lines, more, less, content, withTooltip, ellipsis, onMore, onLess } = propsWithDefault;
@@ -16,8 +16,11 @@ const DSReadMore = (props) => {
   const toggleExpanded = useCallback(
     (newExpanded) => {
       setExpanded(newExpanded);
-      if (newExpanded) onMore();
-      else onLess();
+      if (newExpanded) {
+        onMore();
+      } else {
+        onLess();
+      }
     },
     [onMore, onLess, setExpanded]
   );

package/dist/esm/DSReadMore.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSReadMore.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { describe, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { MoreLessButton } from './MoreLessButton.js';\nimport { type DSReadMoreT, DSReadMorePropTypesSchema, defaultProps } from './react-desc-prop-types.js';\nimport { StyledTextWrapper, StyledTextContent, StyledTooltipWrapper } from './styled.js';\nimport { useReadMoreTruncate } from './useReadMoreTruncate.js';\nimport { DSReadMoreDataTestIds, DSReadMoreName } from './DSReadMoreDefinitions.js';\n\nconst DSReadMore = (props: DSReadMoreT.Props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSReadMoreT.InternalProps>(props, defaultProps);\n  const { lines, more, less, content, withTooltip, ellipsis, onMore, onLess } = propsWithDefault;\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  const { textWrapperRef, textRef, showButton, expanded, setExpanded, textProps, srOnlyText } =\n    useReadMoreTruncate(propsWithDefault);\n\n  const toggleExpanded = useCallback(\n    (newExpanded: boolean) => {\n      setExpanded(newExpanded);\n      if (newExpanded) onMore();\n      else onLess();\n    },\n    [onMore, onLess, setExpanded],\n  );\n\n  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n  return (\n    <StyledTextWrapper\n      innerRef={textWrapperRef}\n      lines={lines}\n      expanded={expanded}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      {...xstyledProps}\n    >\n      {srOnlyText}\n      <StyledTextContent\n        lines={lines}\n        expanded={expanded}\n        innerRef={textRef}\n        data-testid=\"ds-read_more-text\"\n        {...textProps}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {content}\n      </StyledTextContent>\n      {showButton && !withTooltip && (\n        <MoreLessButton\n          expanded={expanded}\n          label={expanded ? less : more}\n          onClick={() => toggleExpanded(!expanded)}\n          ariaLabel={expanded ? 'Read less' : 'Read more'}\n          ellipsis={ellipsis}\n          dataTestId={DSReadMoreDataTestIds.READ_MORE_BUTTON}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n      )}\n      {withTooltip && showButton && (\n        <StyledTooltipWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          <DSTooltipV3 text={content} wrapWords>\n            <MoreLessButton\n              expanded={expanded}\n              label=\"...\"\n              ariaLabel={expanded ? 'Read less' : 'Read more'}\n              ellipsis={ellipsis}\n              withTooltip={withTooltip}\n              dataTestId={DSReadMoreDataTestIds.READ_MORE_TOOLTIP_BUTTON}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            />\n          </DSTooltipV3>\n        </StyledTooltipWrapper>\n      )}\n    </StyledTextWrapper>\n  );\n};\n\nDSReadMore.displayName = DSReadMoreName;\n\nconst DSReadMoreWithSchema = describe(DSReadMore);\n\nDSReadMoreWithSchema.propTypes = DSReadMorePropTypesSchema;\n\nexport { DSReadMore, DSReadMoreWithSchema };\nexport default DSReadMore;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+BnB,SASE,KATF;AA/BJ,SAAgB,mBAAmB;AACnC,SAAS,UAAU,oBAAoB,oCAAoC;AAC3E,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAA2B,2BAA2B,oBAAoB;AAC1E,SAAS,mBAAmB,mBAAmB,4BAA4B;AAC3E,SAAS,2BAA2B;AACpC,SAAS,uBAAuB,sBAAsB;AAEtD,MAAM,aAAa,CAAC,UAA6B;AAC/C,QAAM,mBAAmB,6BAAwD,OAAO,YAAY;AACpG,QAAM,EAAE,OAAO,MAAM,MAAM,SAAS,aAAa,UAAU,QAAQ,OAAO,IAAI;AAE9E,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,EAAE,gBAAgB,SAAS,YAAY,UAAU,aAAa,WAAW,WAAW,IACxF,oBAAoB,gBAAgB;AAEtC,QAAM,iBAAiB;AAAA,IACrB,CAAC,gBAAyB;AACxB,kBAAY,WAAW;AACvB,UAAI,YAAa,QAAO;AAAA,UACnB,QAAO;AAAA,IACd;AAAA,IACA,CAAC,QAAQ,QAAQ,WAAW;AAAA,EAC9B;AAEA,QAAM,gBAAgB,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAC5E,QAAM,yBAAyB,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,eAAY;AAAA,YACX,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,cAAc,CAAC,eACd;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO,WAAW,OAAO;AAAA,YACzB,SAAS,MAAM,eAAe,CAAC,QAAQ;AAAA,YACvC,WAAW,WAAW,cAAc;AAAA,YACpC;AAAA,YACA,YAAY,sBAAsB;AAAA,YAClC;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QAED,eAAe,cACd,oBAAC,wBAAqB,eAA8B,wBAClD,8BAAC,eAAY,MAAM,SAAS,WAAS,MACnC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAM;AAAA,YACN,WAAW,WAAW,cAAc;AAAA,YACpC;AAAA,YACA;AAAA,YACA,YAAY,sBAAsB;AAAA,YAClC;AAAA,YACA;AAAA;AAAA,QACF,GACF,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,WAAW,cAAc;AAEzB,MAAM,uBAAuB,SAAS,UAAU;AAEhD,qBAAqB,YAAY;AAGjC,IAAO,qBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// DSReadMore.tsx\nimport React, { useCallback } from 'react';\nimport { describe, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { MoreLessButton } from './MoreLessButton.js';\nimport { type DSReadMoreT, DSReadMorePropTypesSchema, defaultProps } from './react-desc-prop-types.js';\nimport { StyledTextWrapper, StyledTextContent, StyledTooltipWrapper } from './styled.js';\nimport { useReadMoreTruncate } from './useReadMoreTruncate.js';\nimport { DSReadMoreDataTestIds, DSReadMoreName } from './constants/index.js';\n\nconst DSReadMore = (props: DSReadMoreT.Props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSReadMoreT.InternalProps>(props, defaultProps);\n  const { lines, more, less, content, withTooltip, ellipsis, onMore, onLess } = propsWithDefault;\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  const { textWrapperRef, textRef, showButton, expanded, setExpanded, textProps, srOnlyText } =\n    useReadMoreTruncate(propsWithDefault);\n\n  const toggleExpanded = useCallback(\n    (newExpanded: boolean) => {\n      setExpanded(newExpanded);\n      if (newExpanded) {\n        onMore();\n      } else {\n        onLess();\n      }\n    },\n    [onMore, onLess, setExpanded],\n  );\n\n  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n  return (\n    <StyledTextWrapper\n      innerRef={textWrapperRef}\n      lines={lines}\n      expanded={expanded}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      {...xstyledProps}\n    >\n      {srOnlyText}\n\n      <StyledTextContent\n        lines={lines}\n        expanded={expanded}\n        innerRef={textRef}\n        data-testid=\"ds-read_more-text\"\n        {...textProps}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {content}\n      </StyledTextContent>\n\n      {showButton && !withTooltip && (\n        <MoreLessButton\n          expanded={expanded}\n          label={expanded ? less : more}\n          onClick={() => toggleExpanded(!expanded)}\n          ariaLabel={expanded ? 'Read less' : 'Read more'}\n          ellipsis={ellipsis}\n          dataTestId={DSReadMoreDataTestIds.READ_MORE_BUTTON}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n      )}\n\n      {withTooltip && showButton && (\n        <StyledTooltipWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          <DSTooltipV3 text={content} wrapWords>\n            <MoreLessButton\n              expanded={expanded}\n              label=\"...\"\n              ariaLabel={expanded ? 'Read less' : 'Read more'}\n              ellipsis={ellipsis}\n              withTooltip={withTooltip}\n              dataTestId={DSReadMoreDataTestIds.READ_MORE_TOOLTIP_BUTTON}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            />\n          </DSTooltipV3>\n        </StyledTooltipWrapper>\n      )}\n    </StyledTextWrapper>\n  );\n};\n\nDSReadMore.displayName = DSReadMoreName;\nconst DSReadMoreWithSchema = describe(DSReadMore);\nDSReadMoreWithSchema.propTypes = DSReadMorePropTypesSchema;\n\nexport { DSReadMore, DSReadMoreWithSchema };\nexport default DSReadMore;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmCnB,SAUE,KAVF;AAlCJ,SAAgB,mBAAmB;AACnC,SAAS,UAAU,oBAAoB,oCAAoC;AAC3E,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAA2B,2BAA2B,oBAAoB;AAC1E,SAAS,mBAAmB,mBAAmB,4BAA4B;AAC3E,SAAS,2BAA2B;AACpC,SAAS,uBAAuB,sBAAsB;AAEtD,MAAM,aAAa,CAAC,UAA6B;AAC/C,QAAM,mBAAmB,6BAAwD,OAAO,YAAY;AACpG,QAAM,EAAE,OAAO,MAAM,MAAM,SAAS,aAAa,UAAU,QAAQ,OAAO,IAAI;AAE9E,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,EAAE,gBAAgB,SAAS,YAAY,UAAU,aAAa,WAAW,WAAW,IACxF,oBAAoB,gBAAgB;AAEtC,QAAM,iBAAiB;AAAA,IACrB,CAAC,gBAAyB;AACxB,kBAAY,WAAW;AACvB,UAAI,aAAa;AACf,eAAO;AAAA,MACT,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,QAAQ,WAAW;AAAA,EAC9B;AAEA,QAAM,gBAAgB,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAC5E,QAAM,yBAAyB,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,eAAY;AAAA,YACX,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAEC,cAAc,CAAC,eACd;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO,WAAW,OAAO;AAAA,YACzB,SAAS,MAAM,eAAe,CAAC,QAAQ;AAAA,YACvC,WAAW,WAAW,cAAc;AAAA,YACpC;AAAA,YACA,YAAY,sBAAsB;AAAA,YAClC;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QAGD,eAAe,cACd,oBAAC,wBAAqB,eAA8B,wBAClD,8BAAC,eAAY,MAAM,SAAS,WAAS,MACnC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAM;AAAA,YACN,WAAW,WAAW,cAAc;AAAA,YACpC;AAAA,YACA;AAAA,YACA,YAAY,sBAAsB;AAAA,YAClC;AAAA,YACA;AAAA;AAAA,QACF,GACF,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;AAGjC,IAAO,qBAAQ;",
   "names": []
 }

package/dist/esm/{DSReadMoreDefinitions.js → constants/index.js}

@@ -2,21 +2,26 @@ import * as React from "react";
 import { omit } from "lodash-es";
 import { slotObjectToDataTestIds } from "@elliemae/ds-system";
 const DSReadMoreName = "DSReadmore";
-const DSReadMoreSlots = {
+const READ_MORE_SLOTS = {
   ROOT: "root",
   TEXT_CONTENT: "text-content",
   TOOLTIP_WRAPPER: "tooltip-wrapper",
   BUTTON_WRAPPER: "button-wrapper",
   BUTTON: "button"
 };
-const DSReadMoreDataTestIds = {
+const DSReadMoreSlots = READ_MORE_SLOTS;
+const READ_MORE_DATA_TESTID = {
   ...omit(slotObjectToDataTestIds(DSReadMoreName, DSReadMoreSlots), "BUTTON"),
   READ_MORE_BUTTON: "ds-read_more-button",
-  READ_MORE_TOOLTIP_BUTTON: "ds-read_more-tooltip-button"
+  READ_MORE_TOOLTIP_BUTTON: "ds-read_more-tooltip-button",
+  READ_MORE_TEXT: "ds-read_more-text"
 };
+const DSReadMoreDataTestIds = READ_MORE_DATA_TESTID;
 export {
   DSReadMoreDataTestIds,
   DSReadMoreName,
-  DSReadMoreSlots
+  DSReadMoreSlots,
+  READ_MORE_DATA_TESTID,
+  READ_MORE_SLOTS
 };
-//# sourceMappingURL=DSReadMoreDefinitions.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { omit } from 'lodash-es';\nimport { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSReadMoreName = 'DSReadmore';\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const READ_MORE_SLOTS = {\n  ROOT: 'root',\n  TEXT_CONTENT: 'text-content',\n  TOOLTIP_WRAPPER: 'tooltip-wrapper',\n  BUTTON_WRAPPER: 'button-wrapper',\n  BUTTON: 'button',\n} as const;\n\n// keeping legacy code to avoid breaking changes, the code above this is the new convention\nexport const DSReadMoreSlots = READ_MORE_SLOTS;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const READ_MORE_DATA_TESTID = {\n  ...omit(slotObjectToDataTestIds(DSReadMoreName, DSReadMoreSlots), 'BUTTON'),\n  READ_MORE_BUTTON: 'ds-read_more-button',\n  READ_MORE_TOOLTIP_BUTTON: 'ds-read_more-tooltip-button',\n  READ_MORE_TEXT: 'ds-read_more-text',\n};\n\n// keeping legacy code to avoid breaking changes\nexport const DSReadMoreDataTestIds = READ_MORE_DATA_TESTID;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AACrB,SAAS,+BAA+B;AAEjC,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,QAAQ;AACV;AAGO,MAAM,kBAAkB;AAGxB,MAAM,wBAAwB;AAAA,EACnC,GAAG,KAAK,wBAAwB,gBAAgB,eAAe,GAAG,QAAQ;AAAA,EAC1E,kBAAkB;AAAA,EAClB,0BAA0B;AAAA,EAC1B,gBAAgB;AAClB;AAGO,MAAM,wBAAwB;",
+  "names": []
+}

package/dist/esm/index.js

@@ -1,6 +1,12 @@
 import * as React from "react";
 import { DSReadMore, DSReadMoreWithSchema } from "./DSReadMore.js";
-import { DSReadMoreName, DSReadMoreSlots, DSReadMoreDataTestIds } from "./DSReadMoreDefinitions.js";
+import {
+  DSReadMoreName,
+  DSReadMoreSlots,
+  READ_MORE_SLOTS,
+  DSReadMoreDataTestIds,
+  READ_MORE_DATA_TESTID
+} from "./constants/index.js";
 import { useReadMoreTruncate } from "./useReadMoreTruncate.js";
 export {
   DSReadMore,
@@ -8,6 +14,8 @@ export {
   DSReadMoreName,
   DSReadMoreSlots,
   DSReadMoreWithSchema,
+  READ_MORE_DATA_TESTID,
+  READ_MORE_SLOTS,
   useReadMoreTruncate
 };
 //# sourceMappingURL=index.js.map

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 { DSReadMore, DSReadMoreWithSchema } from './DSReadMore.js';\nexport { DSReadMoreName, DSReadMoreSlots, DSReadMoreDataTestIds } from './DSReadMoreDefinitions.js';\nexport type { DSReadMoreT } from './react-desc-prop-types.js';\nexport { useReadMoreTruncate } from './useReadMoreTruncate.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,4BAA4B;AACjD,SAAS,gBAAgB,iBAAiB,6BAA6B;AAEvE,SAAS,2BAA2B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSReadMore, DSReadMoreWithSchema } from './DSReadMore.js';\nexport {\n  DSReadMoreName,\n  DSReadMoreSlots,\n  READ_MORE_SLOTS,\n  DSReadMoreDataTestIds,\n  READ_MORE_DATA_TESTID,\n} from './constants/index.js';\nexport type { DSReadMoreT } from './react-desc-prop-types.js';\nexport { useReadMoreTruncate } from './useReadMoreTruncate.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,4BAA4B;AACjD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,2BAA2B;",
   "names": []
 }

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

@@ -1,11 +1,12 @@
 import * as React from "react";
 import {
   getPropsPerDatatestIdPropTypes,
+  getPropsPerSlotPropTypes,
   globalAttributesPropTypes,
   PropTypes,
   xstyledPropTypes
 } from "@elliemae/ds-props-helpers";
-import { DSReadMoreDataTestIds } from "./DSReadMoreDefinitions.js";
+import { DSReadMoreDataTestIds, DSReadMoreName, READ_MORE_SLOTS } from "./constants/index.js";
 const defaultProps = {
   lines: 2,
   more: "more",
@@ -18,6 +19,7 @@ const defaultProps = {
   withTooltip: false
 };
 const DSReadMorePropTypes = {
+  ...getPropsPerSlotPropTypes(DSReadMoreName, READ_MORE_SLOTS),
   ...globalAttributesPropTypes,
   ...xstyledPropTypes,
   /** Ammount of lines after you want to display an ellipsis + more/less button */

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport {\n  getPropsPerDatatestIdPropTypes,\n  globalAttributesPropTypes,\n  PropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { DSReadMoreDataTestIds } from './DSReadMoreDefinitions.js';\n\nexport namespace DSReadMoreT {\n  type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n  type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n\n  export interface DefaultProps {\n    lines: number;\n    more: string;\n    less: string;\n    onMore: () => void;\n    onLess: () => void;\n    ellipsis: string;\n    withTooltip: boolean;\n  }\n\n  export interface OptionalProps {}\n\n  export interface RequiredProps {\n    content: string;\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLSpanElement>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLSpanElement>;\n}\n\nexport const defaultProps: DSReadMoreT.DefaultProps = {\n  lines: 2,\n  more: 'more',\n  less: 'less',\n  onMore: () => {},\n  onLess: () => {},\n  ellipsis: '...',\n  withTooltip: false,\n};\n\nexport const DSReadMorePropTypes: DSPropTypesSchema<DSReadMoreT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  /** Ammount of lines after you want to display an ellipsis + more/less button */\n  lines: PropTypes.number\n    .description('Ammount of lines after you want to display an ellipsis + more/less button')\n    .defaultValue(2),\n  /** Label which will appear on the 'More' button */\n  more: PropTypes.string.description(\"Label which will appear on the 'More' button\").defaultValue('more'),\n  /** Label which will appear on the 'Less' button */\n  less: PropTypes.string.description(\"Label which will appear on the 'Less' button\").defaultValue('less'),\n  /** Function which will execute when the user click the 'More' button */\n  onMore: PropTypes.func.description(\"Function which will execute when the user click the 'More' button\"),\n  /** Function which will execute when the user click the 'Less' button */\n  onLess: PropTypes.func.description(\"Function which will execute when the user click the 'Less' button\"),\n  /** The text content you want displayed */\n  content: PropTypes.string.description('The text content you want displayed').isRequired,\n\n  /** The text you want to appear when truncating */\n  ellipsis: PropTypes.string.description('The text you want to appear when truncating').defaultValue('...'),\n  withTooltip: PropTypes.bool\n    .description('Whether to show expandable tooltip on ellipsis focus instead of expandable buttons')\n    .defaultValue('false'),\n  ...getPropsPerDatatestIdPropTypes(DSReadMoreDataTestIds),\n};\n\nexport const DSReadMorePropTypesSchema = DSReadMorePropTypes as unknown as WeakValidationMap<DSReadMoreT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,6BAA6B;AA2B/B,MAAM,eAAyC;AAAA,EACpD,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,UAAU;AAAA,EACV,aAAa;AACf;AAEO,MAAM,sBAA4D;AAAA,EACvE,GAAG;AAAA,EACH,GAAG;AAAA;AAAA,EAEH,OAAO,UAAU,OACd,YAAY,2EAA2E,EACvF,aAAa,CAAC;AAAA;AAAA,EAEjB,MAAM,UAAU,OAAO,YAAY,8CAA8C,EAAE,aAAa,MAAM;AAAA;AAAA,EAEtG,MAAM,UAAU,OAAO,YAAY,8CAA8C,EAAE,aAAa,MAAM;AAAA;AAAA,EAEtG,QAAQ,UAAU,KAAK,YAAY,mEAAmE;AAAA;AAAA,EAEtG,QAAQ,UAAU,KAAK,YAAY,mEAAmE;AAAA;AAAA,EAEtG,SAAS,UAAU,OAAO,YAAY,qCAAqC,EAAE;AAAA;AAAA,EAG7E,UAAU,UAAU,OAAO,YAAY,6CAA6C,EAAE,aAAa,KAAK;AAAA,EACxG,aAAa,UAAU,KACpB,YAAY,oFAAoF,EAChG,aAAa,OAAO;AAAA,EACvB,GAAG,+BAA+B,qBAAqB;AACzD;AAEO,MAAM,4BAA4B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport {\n  getPropsPerDatatestIdPropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  PropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\n\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSReadMoreDataTestIds, DSReadMoreName, READ_MORE_SLOTS } from './constants/index.js';\n\nexport namespace DSReadMoreT {\n  type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n  type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n\n  export interface DefaultProps {\n    lines: number;\n    more: string;\n    less: string;\n    onMore: () => void;\n    onLess: () => void;\n    ellipsis: string;\n    withTooltip: boolean;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSReadMoreName, typeof READ_MORE_SLOTS> {}\n\n  export interface RequiredProps {\n    content: string;\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLSpanElement>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLSpanElement>;\n}\n\nexport const defaultProps: DSReadMoreT.DefaultProps = {\n  lines: 2,\n  more: 'more',\n  less: 'less',\n  onMore: () => {},\n  onLess: () => {},\n  ellipsis: '...',\n  withTooltip: false,\n};\n\nexport const DSReadMorePropTypes: DSPropTypesSchema<DSReadMoreT.Props> = {\n  ...getPropsPerSlotPropTypes(DSReadMoreName, READ_MORE_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  /** Ammount of lines after you want to display an ellipsis + more/less button */\n  lines: PropTypes.number\n    .description('Ammount of lines after you want to display an ellipsis + more/less button')\n    .defaultValue(2),\n  /** Label which will appear on the 'More' button */\n  more: PropTypes.string.description(\"Label which will appear on the 'More' button\").defaultValue('more'),\n  /** Label which will appear on the 'Less' button */\n  less: PropTypes.string.description(\"Label which will appear on the 'Less' button\").defaultValue('less'),\n  /** Function which will execute when the user click the 'More' button */\n  onMore: PropTypes.func.description(\"Function which will execute when the user click the 'More' button\"),\n  /** Function which will execute when the user click the 'Less' button */\n  onLess: PropTypes.func.description(\"Function which will execute when the user click the 'Less' button\"),\n  /** The text content you want displayed */\n  content: PropTypes.string.description('The text content you want displayed').isRequired,\n\n  /** The text you want to appear when truncating */\n  ellipsis: PropTypes.string.description('The text you want to appear when truncating').defaultValue('...'),\n  withTooltip: PropTypes.bool\n    .description('Whether to show expandable tooltip on ellipsis focus instead of expandable buttons')\n    .defaultValue('false'),\n  ...getPropsPerDatatestIdPropTypes(DSReadMoreDataTestIds),\n};\n\nexport const DSReadMorePropTypesSchema = DSReadMorePropTypes as unknown as ValidationMap<DSReadMoreT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,SAAS,uBAAuB,gBAAgB,uBAAuB;AA4BhE,MAAM,eAAyC;AAAA,EACpD,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,UAAU;AAAA,EACV,aAAa;AACf;AAEO,MAAM,sBAA4D;AAAA,EACvE,GAAG,yBAAyB,gBAAgB,eAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA;AAAA,EAEH,OAAO,UAAU,OACd,YAAY,2EAA2E,EACvF,aAAa,CAAC;AAAA;AAAA,EAEjB,MAAM,UAAU,OAAO,YAAY,8CAA8C,EAAE,aAAa,MAAM;AAAA;AAAA,EAEtG,MAAM,UAAU,OAAO,YAAY,8CAA8C,EAAE,aAAa,MAAM;AAAA;AAAA,EAEtG,QAAQ,UAAU,KAAK,YAAY,mEAAmE;AAAA;AAAA,EAEtG,QAAQ,UAAU,KAAK,YAAY,mEAAmE;AAAA;AAAA,EAEtG,SAAS,UAAU,OAAO,YAAY,qCAAqC,EAAE;AAAA;AAAA,EAG7E,UAAU,UAAU,OAAO,YAAY,6CAA6C,EAAE,aAAa,KAAK;AAAA,EACxG,aAAa,UAAU,KACpB,YAAY,oFAAoF,EAChG,aAAa,OAAO;AAAA,EACvB,GAAG,+BAA+B,qBAAqB;AACzD;AAEO,MAAM,4BAA4B;",
   "names": []
 }

package/dist/esm/styled.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { styled, xStyledCommonProps } from "@elliemae/ds-system";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
-import { DSReadMoreName, DSReadMoreSlots } from "./DSReadMoreDefinitions.js";
+import { DSReadMoreName, DSReadMoreSlots } from "./constants/index.js";
 const StyledTextWrapper = styled("span", { name: DSReadMoreName, slot: DSReadMoreSlots.ROOT })`
   position: relative;
   /**

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSReadMoreName, DSReadMoreSlots } from './DSReadMoreDefinitions.js';\n\nexport const StyledTextWrapper = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.ROOT })<{\n  lines: number;\n  expanded: boolean;\n}>`\n  position: relative;\n  /**\n * PUI-16110 - [ReadMore] Autotriggered-Visually broken in safari + Sequoia\n * -----------------------------------\n * In Safari 17.4+ (macOS Sequoia), using scrollHeight or offsetHeight with line-clamp\n * can break the layout and, potentially, trigger infinite loops through ResizeObserver.\n *\n * - Avoids -webkit-line-clamp: 1 which breaks layout and can cause infinite ResizeObserver loops.\n * - Instead, uses flex + white-space + overflow hidden for single-line truncation.\n */\n  ${({ lines, expanded }) =>\n    lines === 1 && !expanded\n      ? `\n    display: flex;\n    align-items: baseline;\n    overflow: hidden;\n    white-space: nowrap;\n  `\n      : `\n    display: -webkit-box;\n    -webkit-line-clamp: ${expanded ? 'unset' : lines};\n    -webkit-box-orient: vertical;\n  `}\n\n  -webkit-hyphens: auto;\n  -moz-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n  word-break: break-all;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledTextContent = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.TEXT_CONTENT })<{\n  lines: number;\n  expanded: boolean;\n}>`\n  ${({ lines, expanded }) =>\n    lines === 1 && !expanded\n      ? `\n    flex: 1 1 auto;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: clip;\n  `\n      : ''}\n`;\n\nexport const StyledTooltipWrapper = styled('div', { name: DSReadMoreName, slot: DSReadMoreSlots.TOOLTIP_WRAPPER })`\n  display: inline-block;\n`;\n\nexport const StyledButtonWrapper = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON_WRAPPER })``;\n\nexport const StyledButton = styled(DSButtonV2, { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON })<{\n  withTooltip?: boolean;\n}>`\n  padding: 0;\n  color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n  border: 0;\n  margin: 0;\n  font-size: 12px;\n  min-width: 0px;\n  height: auto;\n  text-transform: unset;\n  &:hover:not([disabled]) {\n    color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n    background-color: transparent;\n    text-decoration: ${({ withTooltip }) => (withTooltip ? '' : 'underline')};\n  }\n`;\n\nexport const ScreenReaderOnly = styled.span`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 100%;\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSReadMoreName, DSReadMoreSlots } from './constants/index.js';\n\nexport const StyledTextWrapper = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.ROOT })<{\n  lines: number;\n  expanded: boolean;\n}>`\n  position: relative;\n  /**\n * PUI-16110 - [ReadMore] Autotriggered-Visually broken in safari + Sequoia\n * -----------------------------------\n * In Safari 17.4+ (macOS Sequoia), using scrollHeight or offsetHeight with line-clamp\n * can break the layout and, potentially, trigger infinite loops through ResizeObserver.\n *\n * - Avoids -webkit-line-clamp: 1 which breaks layout and can cause infinite ResizeObserver loops.\n * - Instead, uses flex + white-space + overflow hidden for single-line truncation.\n */\n  ${({ lines, expanded }) =>\n    lines === 1 && !expanded\n      ? `\n    display: flex;\n    align-items: baseline;\n    overflow: hidden;\n    white-space: nowrap;\n  `\n      : `\n    display: -webkit-box;\n    -webkit-line-clamp: ${expanded ? 'unset' : lines};\n    -webkit-box-orient: vertical;\n  `}\n\n  -webkit-hyphens: auto;\n  -moz-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n  word-break: break-all;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledTextContent = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.TEXT_CONTENT })<{\n  lines: number;\n  expanded: boolean;\n}>`\n  ${({ lines, expanded }) =>\n    lines === 1 && !expanded\n      ? `\n    flex: 1 1 auto;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: clip;\n  `\n      : ''}\n`;\n\nexport const StyledTooltipWrapper = styled('div', { name: DSReadMoreName, slot: DSReadMoreSlots.TOOLTIP_WRAPPER })`\n  display: inline-block;\n`;\n\nexport const StyledButtonWrapper = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON_WRAPPER })``;\n\nexport const StyledButton = styled(DSButtonV2, { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON })<{\n  withTooltip?: boolean;\n}>`\n  padding: 0;\n  color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n  border: 0;\n  margin: 0;\n  font-size: 12px;\n  min-width: 0px;\n  height: auto;\n  text-transform: unset;\n  &:hover:not([disabled]) {\n    color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n    background-color: transparent;\n    text-decoration: ${({ withTooltip }) => (withTooltip ? '' : 'underline')};\n  }\n`;\n\nexport const ScreenReaderOnly = styled.span`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 100%;\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n`;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,oBAAoB,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAchG,CAAC,EAAE,OAAO,SAAS,MACnB,UAAU,KAAK,CAAC,WACZ;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA;AAAA;AAAA,0BAEkB,WAAW,UAAU,KAAK;AAAA;AAAA,GAEjD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC,kBAAkB;AAAA;AAGf,MAAM,oBAAoB,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,aAAa,CAAC;AAAA,IAIxG,CAAC,EAAE,OAAO,SAAS,MACnB,UAAU,KAAK,CAAC,WACZ;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,EAAE;AAAA;AAGH,MAAM,uBAAuB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,gBAAgB,CAAC;AAAA;AAAA;AAI1G,MAAM,sBAAsB,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,eAAe,CAAC;AAEzG,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,OAAO,CAAC;AAAA;AAAA,WAI1F,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM,KAAK,CAAC,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQpF,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM,KAAK,CAAC,EAAG;AAAA;AAAA,uBAE5E,CAAC,EAAE,YAAY,MAAO,cAAc,KAAK,WAAY;AAAA;AAAA;AAIrE,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/useReadMoreTruncate.js

@@ -10,13 +10,13 @@ const binSearchTextOverflow = (element, parent, content) => {
   let textEnd = 0;
   element.innerText = content;
   while (left <= right) {
-    const middle = Math.floor((left + right) / 2);
-    element.innerText = content.slice(0, middle);
+    const mid = Math.floor((left + right) / 2);
+    element.innerText = content.slice(0, mid);
     if (overflows(parent)) {
-      right = middle - 1;
+      right = mid - 1;
     } else {
-      textEnd = middle;
-      left = middle + 1;
+      textEnd = mid;
+      left = mid + 1;
     }
   }
   element.innerText = content.slice(0, textEnd);
@@ -28,40 +28,47 @@ const useReadMoreTruncate = ({ lines, content }) => {
   const [showButton, setShowButton] = useState(false);
   const { width, height } = useOnElementResize(textWrapperRef);
   useLayoutEffect(() => {
-    const textElement = textRef.current;
-    const parentElement = textWrapperRef.current;
-    if (parentElement && textElement) {
-      textElement.innerText = content;
-      if (lines === 1) {
-        const computed = getComputedStyle(textElement);
-        const font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;
-        const canvas = document.createElement("canvas");
-        const ctx = canvas.getContext("2d");
-        let isTruncated = false;
-        if (ctx) {
-          ctx.font = font;
-          const measuredWidth = ctx.measureText(content).width;
-          isTruncated = measuredWidth > parentElement.clientWidth;
-        }
-        setShowButton(expanded || isTruncated);
-        return;
+    const textEl = textRef.current;
+    const wrapperEl = textWrapperRef.current;
+    if (!textEl || !wrapperEl) return;
+    textEl.innerText = content;
+    if (lines === 1) {
+      const computed = getComputedStyle(textEl);
+      const font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      let truncated = false;
+      if (ctx) {
+        ctx.font = font;
+        const measuredWidth = ctx.measureText(content).width;
+        truncated = measuredWidth > wrapperEl.clientWidth;
       }
-      const isOverflowing = overflows(parentElement);
-      setShowButton(expanded || isOverflowing);
-      if (!expanded && isOverflowing) {
-        setTimeout(() => {
-          binSearchTextOverflow(textElement, parentElement, content);
-        }, 0);
+      setShowButton(expanded || truncated);
+      return;
+    }
+    const isOverflowing = overflows({
+      offsetHeight: wrapperEl.offsetHeight,
+      scrollHeight: wrapperEl.scrollHeight
+    });
+    setShowButton(expanded || isOverflowing);
+    if (!expanded && isOverflowing) {
+      const doBinaryTruncate = () => {
+        if (!textEl || !wrapperEl) return;
+        binSearchTextOverflow(textEl, wrapperEl, content);
+      };
+      if ("fonts" in document && document.fonts.ready) {
+        document.fonts.ready.then(() => {
+          doBinaryTruncate();
+        }).catch(() => {
+          setTimeout(doBinaryTruncate, 0);
+        });
+      } else {
+        setTimeout(doBinaryTruncate, 0);
       }
     }
   }, [lines, content, expanded, width, height]);
   const srOnlyText = useMemo(() => /* @__PURE__ */ jsx(ScreenReaderOnly, { children: content }), [content]);
-  const textProps = useMemo(
-    () => ({
-      "aria-hidden": true
-    }),
-    []
-  );
+  const textProps = useMemo(() => ({ "aria-hidden": true }), []);
   return {
     textWrapperRef,
     textRef,

package/dist/esm/useReadMoreTruncate.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/useReadMoreTruncate.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useOnElementResize } from './useOnElementResize.js';\nimport type { DSReadMoreT } from './react-desc-prop-types.js';\nimport { ScreenReaderOnly } from './styled.js';\n\n// offsetHeight + margin helps account for subpixel differences and the button size\nconst overflows = ({ offsetHeight, scrollHeight }: { offsetHeight: number; scrollHeight: number }) =>\n  offsetHeight + 4 < scrollHeight;\n\nconst binSearchTextOverflow = (element: HTMLElement, parent: HTMLElement, content: string) => {\n  let left = 0;\n  let right = content.length;\n  let textEnd = 0;\n\n  // Reset text to full before starting\n  element.innerText = content;\n\n  while (left <= right) {\n    const middle = Math.floor((left + right) / 2);\n    element.innerText = content.slice(0, middle);\n\n    if (overflows(parent)) {\n      right = middle - 1;\n    } else {\n      textEnd = middle;\n      left = middle + 1;\n    }\n  }\n\n  element.innerText = content.slice(0, textEnd);\n};\n\nexport const useReadMoreTruncate = ({ lines, content }: Pick<DSReadMoreT.InternalProps, 'lines' | 'content'>) => {\n  const textWrapperRef = useRef<HTMLSpanElement>(null);\n  const textRef = useRef<HTMLSpanElement>(null);\n\n  const [expanded, setExpanded] = useState(false);\n\n  const [showButton, setShowButton] = useState(false);\n\n  // We need to re-run the effect when the size of the container changes\n  const { width, height } = useOnElementResize(textWrapperRef);\n\n  useLayoutEffect(() => {\n    const textElement = textRef.current;\n    const parentElement = textWrapperRef.current;\n    if (parentElement && textElement) {\n      textElement.innerText = content;\n      /**\n       * PUI-16110 - [ReadMore] Autotriggered-Visually broken in safari + Sequoia\n       * -----------------------------------\n       * In Safari 17.4+ (macOS Sequoia), using `scrollHeight` or `offsetHeight` with line-clamp\n       * can break the layout and, potentially, trigger infinite loops through ResizeObserver.\n       *\n       * Instead of relying on overflow-based measurements, we calculate the actual pixel width\n       * of the text using a canvas and compare it with the visible width of the wrapper.\n       *\n       * This method is layout-safe, does not force reflow, and works reliably across browsers.\n       */\n      if (lines === 1) {\n        const computed = getComputedStyle(textElement);\n        const font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;\n        const canvas = document.createElement('canvas');\n        const ctx = canvas.getContext('2d');\n        let isTruncated = false;\n        if (ctx) {\n          ctx.font = font;\n          const measuredWidth = ctx.measureText(content).width;\n          isTruncated = measuredWidth > parentElement.clientWidth;\n        }\n        setShowButton(expanded || isTruncated);\n        return;\n      }\n\n      const isOverflowing = overflows(parentElement);\n      setShowButton(expanded || isOverflowing);\n      if (!expanded && isOverflowing) {\n        // we have a strange edge case where when removing the browser cache the text is not\n        // truncated correctly, so we need to wait for the next frame\n        // to make sure the text is truncated correctly\n        // my supposition is that the text is not rendered yet becuase of the font loading\n        setTimeout(() => {\n          binSearchTextOverflow(textElement, parentElement, content);\n        }, 0);\n      }\n    }\n  }, [lines, content, expanded, width, height]);\n\n  const srOnlyText = useMemo(() => <ScreenReaderOnly>{content}</ScreenReaderOnly>, [content]);\n\n  const textProps = useMemo(\n    () => ({\n      'aria-hidden': true,\n    }),\n    [],\n  );\n\n  return {\n    textWrapperRef,\n    textRef,\n    showButton,\n    expanded,\n    setExpanded,\n    textProps,\n    srOnlyText,\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACwFY;AAxFnC,SAAgB,iBAAiB,SAAS,QAAQ,gBAAgB;AAClE,SAAS,0BAA0B;AAEnC,SAAS,wBAAwB;AAGjC,MAAM,YAAY,CAAC,EAAE,cAAc,aAAa,MAC9C,eAAe,IAAI;AAErB,MAAM,wBAAwB,CAAC,SAAsB,QAAqB,YAAoB;AAC5F,MAAI,OAAO;AACX,MAAI,QAAQ,QAAQ;AACpB,MAAI,UAAU;AAGd,UAAQ,YAAY;AAEpB,SAAO,QAAQ,OAAO;AACpB,UAAM,SAAS,KAAK,OAAO,OAAO,SAAS,CAAC;AAC5C,YAAQ,YAAY,QAAQ,MAAM,GAAG,MAAM;AAE3C,QAAI,UAAU,MAAM,GAAG;AACrB,cAAQ,SAAS;AAAA,IACnB,OAAO;AACL,gBAAU;AACV,aAAO,SAAS;AAAA,IAClB;AAAA,EACF;AAEA,UAAQ,YAAY,QAAQ,MAAM,GAAG,OAAO;AAC9C;AAEO,MAAM,sBAAsB,CAAC,EAAE,OAAO,QAAQ,MAA4D;AAC/G,QAAM,iBAAiB,OAAwB,IAAI;AACnD,QAAM,UAAU,OAAwB,IAAI;AAE5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAGlD,QAAM,EAAE,OAAO,OAAO,IAAI,mBAAmB,cAAc;AAE3D,kBAAgB,MAAM;AACpB,UAAM,cAAc,QAAQ;AAC5B,UAAM,gBAAgB,eAAe;AACrC,QAAI,iBAAiB,aAAa;AAChC,kBAAY,YAAY;AAYxB,UAAI,UAAU,GAAG;AACf,cAAM,WAAW,iBAAiB,WAAW;AAC7C,cAAM,OAAO,GAAG,SAAS,UAAU,IAAI,SAAS,QAAQ,IAAI,SAAS,UAAU;AAC/E,cAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,cAAM,MAAM,OAAO,WAAW,IAAI;AAClC,YAAI,cAAc;AAClB,YAAI,KAAK;AACP,cAAI,OAAO;AACX,gBAAM,gBAAgB,IAAI,YAAY,OAAO,EAAE;AAC/C,wBAAc,gBAAgB,cAAc;AAAA,QAC9C;AACA,sBAAc,YAAY,WAAW;AACrC;AAAA,MACF;AAEA,YAAM,gBAAgB,UAAU,aAAa;AAC7C,oBAAc,YAAY,aAAa;AACvC,UAAI,CAAC,YAAY,eAAe;AAK9B,mBAAW,MAAM;AACf,gCAAsB,aAAa,eAAe,OAAO;AAAA,QAC3D,GAAG,CAAC;AAAA,MACN;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,UAAU,OAAO,MAAM,CAAC;AAE5C,QAAM,aAAa,QAAQ,MAAM,oBAAC,oBAAkB,mBAAQ,GAAqB,CAAC,OAAO,CAAC;AAE1F,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,MACL,eAAe;AAAA,IACjB;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-misused-promises */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\n// useReadMoreTruncate.tsx\nimport React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useOnElementResize } from './useOnElementResize.js';\nimport type { DSReadMoreT } from './react-desc-prop-types.js';\nimport { ScreenReaderOnly } from './styled.js';\n\n// offsetHeight + margin/buffer to avoid subpixel errors\nconst overflows = ({ offsetHeight, scrollHeight }: { offsetHeight: number; scrollHeight: number }) =>\n  offsetHeight + 4 < scrollHeight;\n\n/**\n * binSearchTextOverflow slices the content until there's no overflow.\n * It assumes `element` is the <span> node containing the text, and `parent`\n * is the wrapper with the height/clamp applied.\n */\nconst binSearchTextOverflow = (element: HTMLElement, parent: HTMLElement, content: string) => {\n  let left = 0;\n  let right = content.length;\n  let textEnd = 0;\n\n  // Place the full text before starting\n  element.innerText = content;\n\n  while (left <= right) {\n    const mid = Math.floor((left + right) / 2);\n    element.innerText = content.slice(0, mid);\n\n    if (overflows(parent)) {\n      // Still overflowing \u2192 reduce\n      right = mid - 1;\n    } else {\n      // No overflow \u2192 we can increase\n      textEnd = mid;\n      left = mid + 1;\n    }\n  }\n\n  element.innerText = content.slice(0, textEnd);\n};\n\nexport const useReadMoreTruncate = ({ lines, content }: Pick<DSReadMoreT.InternalProps, 'lines' | 'content'>) => {\n  const textWrapperRef = useRef<HTMLSpanElement>(null);\n  const textRef = useRef<HTMLSpanElement>(null);\n\n  const [expanded, setExpanded] = useState(false);\n  const [showButton, setShowButton] = useState(false);\n\n  // Detect container size changes\n  const { width, height } = useOnElementResize(textWrapperRef);\n\n  useLayoutEffect(() => {\n    const textEl = textRef.current;\n    const wrapperEl = textWrapperRef.current;\n    if (!textEl || !wrapperEl) return;\n\n    // 1) Always reset the text to \"content\"\n    textEl.innerText = content;\n\n    // 2) Case lines === 1: measure with canvas\n    if (lines === 1) {\n      const computed = getComputedStyle(textEl);\n      const font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;\n\n      const canvas = document.createElement('canvas');\n      const ctx = canvas.getContext('2d');\n      let truncated = false;\n\n      if (ctx) {\n        ctx.font = font;\n        const measuredWidth = ctx.measureText(content).width;\n        truncated = measuredWidth > wrapperEl.clientWidth;\n      }\n\n      setShowButton(expanded || truncated);\n      // No need to truncate char by char in single-line: hiding with CSS is enough.\n      return;\n    }\n\n    // 3) For multiline: first check native overflow\n    const isOverflowing = overflows({\n      offsetHeight: wrapperEl.offsetHeight,\n      scrollHeight: wrapperEl.scrollHeight,\n    });\n    setShowButton(expanded || isOverflowing);\n\n    // 4) If not expanded and there is overflow, adjust the slice with binary search\n    if (!expanded && isOverflowing) {\n      // Function that executes binSearchTextOverflow\n      const doBinaryTruncate = () => {\n        if (!textEl || !wrapperEl) return;\n        binSearchTextOverflow(textEl, wrapperEl, content);\n      };\n\n      // If the browser supports document.fonts, wait for them to load.\n      if ('fonts' in document && document.fonts.ready) {\n        document.fonts.ready\n          .then(() => {\n            doBinaryTruncate();\n          })\n          .catch(() => {\n            // If fonts.ready fails, fall back to timeout\n            setTimeout(doBinaryTruncate, 0);\n          });\n      } else {\n        // Fallback for browsers without the Font Loading API\n        setTimeout(doBinaryTruncate, 0);\n      }\n    }\n  }, [lines, content, expanded, width, height]);\n\n  // Hidden text for screen readers (always the full string)\n  const srOnlyText = useMemo(() => <ScreenReaderOnly>{content}</ScreenReaderOnly>, [content]);\n\n  // Mark the visible content as aria-hidden\n  const textProps = useMemo(() => ({ 'aria-hidden': true }), []);\n\n  return {\n    textWrapperRef,\n    textRef,\n    showButton,\n    expanded,\n    setExpanded,\n    textProps,\n    srOnlyText,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkHY;AA9GnC,SAAgB,iBAAiB,SAAS,QAAQ,gBAAgB;AAClE,SAAS,0BAA0B;AAEnC,SAAS,wBAAwB;AAGjC,MAAM,YAAY,CAAC,EAAE,cAAc,aAAa,MAC9C,eAAe,IAAI;AAOrB,MAAM,wBAAwB,CAAC,SAAsB,QAAqB,YAAoB;AAC5F,MAAI,OAAO;AACX,MAAI,QAAQ,QAAQ;AACpB,MAAI,UAAU;AAGd,UAAQ,YAAY;AAEpB,SAAO,QAAQ,OAAO;AACpB,UAAM,MAAM,KAAK,OAAO,OAAO,SAAS,CAAC;AACzC,YAAQ,YAAY,QAAQ,MAAM,GAAG,GAAG;AAExC,QAAI,UAAU,MAAM,GAAG;AAErB,cAAQ,MAAM;AAAA,IAChB,OAAO;AAEL,gBAAU;AACV,aAAO,MAAM;AAAA,IACf;AAAA,EACF;AAEA,UAAQ,YAAY,QAAQ,MAAM,GAAG,OAAO;AAC9C;AAEO,MAAM,sBAAsB,CAAC,EAAE,OAAO,QAAQ,MAA4D;AAC/G,QAAM,iBAAiB,OAAwB,IAAI;AACnD,QAAM,UAAU,OAAwB,IAAI;AAE5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAGlD,QAAM,EAAE,OAAO,OAAO,IAAI,mBAAmB,cAAc;AAE3D,kBAAgB,MAAM;AACpB,UAAM,SAAS,QAAQ;AACvB,UAAM,YAAY,eAAe;AACjC,QAAI,CAAC,UAAU,CAAC,UAAW;AAG3B,WAAO,YAAY;AAGnB,QAAI,UAAU,GAAG;AACf,YAAM,WAAW,iBAAiB,MAAM;AACxC,YAAM,OAAO,GAAG,SAAS,UAAU,IAAI,SAAS,QAAQ,IAAI,SAAS,UAAU;AAE/E,YAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,YAAM,MAAM,OAAO,WAAW,IAAI;AAClC,UAAI,YAAY;AAEhB,UAAI,KAAK;AACP,YAAI,OAAO;AACX,cAAM,gBAAgB,IAAI,YAAY,OAAO,EAAE;AAC/C,oBAAY,gBAAgB,UAAU;AAAA,MACxC;AAEA,oBAAc,YAAY,SAAS;AAEnC;AAAA,IACF;AAGA,UAAM,gBAAgB,UAAU;AAAA,MAC9B,cAAc,UAAU;AAAA,MACxB,cAAc,UAAU;AAAA,IAC1B,CAAC;AACD,kBAAc,YAAY,aAAa;AAGvC,QAAI,CAAC,YAAY,eAAe;AAE9B,YAAM,mBAAmB,MAAM;AAC7B,YAAI,CAAC,UAAU,CAAC,UAAW;AAC3B,8BAAsB,QAAQ,WAAW,OAAO;AAAA,MAClD;AAGA,UAAI,WAAW,YAAY,SAAS,MAAM,OAAO;AAC/C,iBAAS,MAAM,MACZ,KAAK,MAAM;AACV,2BAAiB;AAAA,QACnB,CAAC,EACA,MAAM,MAAM;AAEX,qBAAW,kBAAkB,CAAC;AAAA,QAChC,CAAC;AAAA,MACL,OAAO;AAEL,mBAAW,kBAAkB,CAAC;AAAA,MAChC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,UAAU,OAAO,MAAM,CAAC;AAG5C,QAAM,aAAa,QAAQ,MAAM,oBAAC,oBAAkB,mBAAQ,GAAqB,CAAC,OAAO,CAAC;AAG1F,QAAM,YAAY,QAAQ,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC,CAAC;AAE7D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -0,0 +1,25 @@
+export declare const DSReadMoreName = "DSReadmore";
+export declare const READ_MORE_SLOTS: {
+    readonly ROOT: "root";
+    readonly TEXT_CONTENT: "text-content";
+    readonly TOOLTIP_WRAPPER: "tooltip-wrapper";
+    readonly BUTTON_WRAPPER: "button-wrapper";
+    readonly BUTTON: "button";
+};
+export declare const DSReadMoreSlots: {
+    readonly ROOT: "root";
+    readonly TEXT_CONTENT: "text-content";
+    readonly TOOLTIP_WRAPPER: "tooltip-wrapper";
+    readonly BUTTON_WRAPPER: "button-wrapper";
+    readonly BUTTON: "button";
+};
+export declare const READ_MORE_DATA_TESTID: {
+    READ_MORE_BUTTON: string;
+    READ_MORE_TOOLTIP_BUTTON: string;
+    READ_MORE_TEXT: string;
+};
+export declare const DSReadMoreDataTestIds: {
+    READ_MORE_BUTTON: string;
+    READ_MORE_TOOLTIP_BUTTON: string;
+    READ_MORE_TEXT: string;
+};

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
 export { DSReadMore, DSReadMoreWithSchema } from './DSReadMore.js';
-export { DSReadMoreName, DSReadMoreSlots, DSReadMoreDataTestIds } from './DSReadMoreDefinitions.js';
+export { DSReadMoreName, DSReadMoreSlots, READ_MORE_SLOTS, DSReadMoreDataTestIds, READ_MORE_DATA_TESTID, } from './constants/index.js';
 export type { DSReadMoreT } from './react-desc-prop-types.js';
 export { useReadMoreTruncate } from './useReadMoreTruncate.js';

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

@@ -1,5 +1,7 @@
-import type { WeakValidationMap } from 'react';
-import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';
+/// <reference types="prop-types" />
+import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';
+import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
+import { DSReadMoreName, READ_MORE_SLOTS } from './constants/index.js';
 export declare namespace DSReadMoreT {
     type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;
     type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;
@@ -12,7 +14,7 @@ export declare namespace DSReadMoreT {
         ellipsis: string;
         withTooltip: boolean;
     }
-    export interface OptionalProps {
+    export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSReadMoreName, typeof READ_MORE_SLOTS> {
     }
     export interface RequiredProps {
         content: string;
@@ -23,4 +25,4 @@ export declare namespace DSReadMoreT {
 }
 export declare const defaultProps: DSReadMoreT.DefaultProps;
 export declare const DSReadMorePropTypes: DSPropTypesSchema<DSReadMoreT.Props>;
-export declare const DSReadMorePropTypesSchema: WeakValidationMap<DSReadMoreT.Props>;
+export declare const DSReadMorePropTypesSchema: ValidationMap<DSReadMoreT.Props>;

package/dist/types/tests/DSReadMore.a11y.test.d.ts

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

package/dist/types/tests/DSReadMore.data-testid.test.d.ts

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

package/dist/types/tests/DSReadMore.default-props.test.d.ts

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

package/dist/types/tests/DSReadMore.events.test.d.ts

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

package/dist/types/tests/DSReadMore.exports.test.d.ts

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

package/dist/types/tests/DSReadMore.keyboard.test.d.ts

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

package/dist/types/tests/playwright/DSReadMore.ControlledTestRenderer.d.ts

@@ -0,0 +1 @@
+export const ControlledTestRenderer: import("react").FunctionComponent<import("react").JSX.IntrinsicAttributes>;

package/dist/types/tests/playwright/DSReadMore.test.playwright.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-read-more",
-  "version": "3.53.0-next.3",
+  "version": "3.53.0-next.5",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Read More",
   "files": [
@@ -36,16 +36,16 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button-v2": "3.53.0-next.3",
-    "@elliemae/ds-props-helpers": "3.53.0-next.3",
-    "@elliemae/ds-system": "3.53.0-next.3",
-    "@elliemae/ds-tooltip-v3": "3.53.0-next.3"
+    "@elliemae/ds-button-v2": "3.53.0-next.5",
+    "@elliemae/ds-props-helpers": "3.53.0-next.5",
+    "@elliemae/ds-system": "3.53.0-next.5",
+    "@elliemae/ds-tooltip-v3": "3.53.0-next.5"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.63",
     "jest": "~29.7.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.53.0-next.3"
+    "@elliemae/ds-monorepo-devops": "3.53.0-next.5"
   },
   "peerDependencies": {
     "lodash-es": "^4.17.21",
@@ -59,7 +59,7 @@
   },
   "scripts": {
     "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
-    "test": "pui-cli test --passWithNoTests --coverage=\"false\"",
+    "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",

package/dist/cjs/DSReadMoreDefinitions.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/DSReadMoreDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { omit } from 'lodash-es';\nimport { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSReadMoreName = 'DSReadmore';\n\nexport const DSReadMoreSlots = {\n  ROOT: 'root',\n  TEXT_CONTENT: 'text-content',\n  TOOLTIP_WRAPPER: 'tooltip-wrapper',\n  BUTTON_WRAPPER: 'button-wrapper',\n  BUTTON: 'button',\n};\n\nexport const DSReadMoreDataTestIds = {\n  ...omit(slotObjectToDataTestIds(DSReadMoreName, DSReadMoreSlots), 'BUTTON'),\n  READ_MORE_BUTTON: 'ds-read_more-button',\n  READ_MORE_TOOLTIP_BUTTON: 'ds-read_more-tooltip-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAqB;AACrB,uBAAwC;AAEjC,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,QAAQ;AACV;AAEO,MAAM,wBAAwB;AAAA,EACnC,OAAG,2BAAK,0CAAwB,gBAAgB,eAAe,GAAG,QAAQ;AAAA,EAC1E,kBAAkB;AAAA,EAClB,0BAA0B;AAC5B;",
-  "names": []
-}

package/dist/esm/DSReadMoreDefinitions.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSReadMoreDefinitions.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { omit } from 'lodash-es';\nimport { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSReadMoreName = 'DSReadmore';\n\nexport const DSReadMoreSlots = {\n  ROOT: 'root',\n  TEXT_CONTENT: 'text-content',\n  TOOLTIP_WRAPPER: 'tooltip-wrapper',\n  BUTTON_WRAPPER: 'button-wrapper',\n  BUTTON: 'button',\n};\n\nexport const DSReadMoreDataTestIds = {\n  ...omit(slotObjectToDataTestIds(DSReadMoreName, DSReadMoreSlots), 'BUTTON'),\n  READ_MORE_BUTTON: 'ds-read_more-button',\n  READ_MORE_TOOLTIP_BUTTON: 'ds-read_more-tooltip-button',\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AACrB,SAAS,+BAA+B;AAEjC,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,QAAQ;AACV;AAEO,MAAM,wBAAwB;AAAA,EACnC,GAAG,KAAK,wBAAwB,gBAAgB,eAAe,GAAG,QAAQ;AAAA,EAC1E,kBAAkB;AAAA,EAClB,0BAA0B;AAC5B;",
-  "names": []
-}

package/dist/types/DSReadMoreDefinitions.d.ts

@@ -1,12 +0,0 @@
-export declare const DSReadMoreName = "DSReadmore";
-export declare const DSReadMoreSlots: {
-    ROOT: string;
-    TEXT_CONTENT: string;
-    TOOLTIP_WRAPPER: string;
-    BUTTON_WRAPPER: string;
-    BUTTON: string;
-};
-export declare const DSReadMoreDataTestIds: {
-    READ_MORE_BUTTON: string;
-    READ_MORE_TOOLTIP_BUTTON: string;
-};