@elliemae/ds-read-more 3.70.0-next.42 → 3.70.0-next.44

package/dist/cjs/DSReadMore.js

@@ -61,7 +61,8 @@ const DSReadMore = (props) => {
   const getOwnerProps = (0, import_react.useCallback)(() => propsWithDefault, [propsWithDefault]);
   const getOwnerPropsArguments = (0, import_react.useCallback)(() => ({ expanded }), [expanded]);
   const readMoreDescribedByText = (0, import_react.useMemo)(() => {
-    if (withTooltip) return "shows the full text for sighted users but the full text is already there for screen readers";
+    if (withTooltip)
+      return "shows the full text for sighted users but the full text is already there for screen readers";
     return `${expanded ? "collapse" : "expand"} the full text for sighted users but the full text is already there for screen readers`;
   }, [expanded, withTooltip]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

package/dist/cjs/DSReadMore.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSReadMore.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { ScreenReaderOnly } from '@elliemae/ds-accessibility';\nimport { describe, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { useCallback, useMemo } from 'react';\nimport { MoreLessButton } from './MoreLessButton.js';\nimport { DSReadMoreDataTestIds, DSReadMoreName } from './constants/index.js';\nimport { DSReadMorePropTypesSchema, defaultProps, type DSReadMoreT } from './react-desc-prop-types.js';\nimport { StyledTextContent, StyledTextWrapper, StyledTooltipWrapper } from './styled.js';\nimport { useReadMoreTruncate } from './useReadMoreTruncate.js';\nimport { IS_SAFARI } from './utils.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 } = 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(() => ({ expanded }), [expanded]);\n\n  const readMoreDescribedByText = useMemo(() => {\n    if (withTooltip) return 'shows the full text for sighted users but the full text is already there for screen readers';\n    return `${expanded ? 'collapse' : 'expand'} the full text for sighted users but the full text is already there for screen readers`;\n  }, [expanded, withTooltip]);\n\n  return (\n    <StyledTextWrapper\n      innerRef={textWrapperRef}\n      lines={lines}\n      expanded={expanded}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      isSafari={IS_SAFARI}\n      {...xstyledProps}\n    >\n      <ScreenReaderOnly>{content}</ScreenReaderOnly>\n      {/**\n       * Hidden from screen readers unless referenced by `aria-describedby`\n       * Ensures the text is only read when associated with a control\n       * Prevents it from being focusable or announced independently\n       */}\n      <ScreenReaderOnly id=\"ds-read_more-text-disclaimer\" aria-hidden>\n        {readMoreDescribedByText}\n      </ScreenReaderOnly>\n\n      <StyledTextContent\n        innerRef={textRef}\n        data-testid=\"ds-read_more-text\"\n        aria-hidden\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        lines={lines}\n        expanded={expanded}\n        isSafari={IS_SAFARI}\n      >\n        {content}\n      </StyledTextContent>\n\n      {showButton && !withTooltip && (\n        <MoreLessButton\n          expanded={expanded}\n          label={expanded ? less : more}\n          onClick={() => toggleExpanded(!expanded)}\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              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;ADqCnB;AArCJ,8BAAiC;AACjC,8BAA2E;AAC3E,2BAA4B;AAC5B,mBAAqC;AACrC,4BAA+B;AAC/B,uBAAsD;AACtD,mCAA0E;AAC1E,oBAA2E;AAC3E,iCAAoC;AACpC,mBAA0B;AAE1B,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,YAAY,QAAI,gDAAoB,gBAAgB;AAE3G,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,EAAE,SAAS,IAAI,CAAC,QAAQ,CAAC;AAE3E,QAAM,8BAA0B,sBAAQ,MAAM;AAC5C,QAAI,YAAa,QAAO;AACxB,WAAO,GAAG,WAAW,aAAa,QAAQ;AAAA,EAC5C,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACT,GAAG;AAAA,MAEJ;AAAA,oDAAC,4CAAkB,mBAAQ;AAAA,QAM3B,4CAAC,4CAAiB,IAAG,gCAA+B,eAAW,MAC5D,mCACH;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAY;AAAA,YACZ,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YAET;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;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;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;",
+  "sourcesContent": ["import { ScreenReaderOnly } from '@elliemae/ds-accessibility';\nimport { describe, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { useCallback, useMemo } from 'react';\nimport { MoreLessButton } from './MoreLessButton.js';\nimport { DSReadMoreDataTestIds, DSReadMoreName } from './constants/index.js';\nimport { DSReadMorePropTypesSchema, defaultProps, type DSReadMoreT } from './react-desc-prop-types.js';\nimport { StyledTextContent, StyledTextWrapper, StyledTooltipWrapper } from './styled.js';\nimport { useReadMoreTruncate } from './useReadMoreTruncate.js';\nimport { IS_SAFARI } from './utils.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 } = 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(() => ({ expanded }), [expanded]);\n\n  const readMoreDescribedByText = useMemo(() => {\n    if (withTooltip)\n      return 'shows the full text for sighted users but the full text is already there for screen readers';\n    return `${expanded ? 'collapse' : 'expand'} the full text for sighted users but the full text is already there for screen readers`;\n  }, [expanded, withTooltip]);\n\n  return (\n    <StyledTextWrapper\n      innerRef={textWrapperRef}\n      lines={lines}\n      expanded={expanded}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      isSafari={IS_SAFARI}\n      {...xstyledProps}\n    >\n      <ScreenReaderOnly>{content}</ScreenReaderOnly>\n      {/**\n       * Hidden from screen readers unless referenced by `aria-describedby`\n       * Ensures the text is only read when associated with a control\n       * Prevents it from being focusable or announced independently\n       */}\n      <ScreenReaderOnly id=\"ds-read_more-text-disclaimer\" aria-hidden>\n        {readMoreDescribedByText}\n      </ScreenReaderOnly>\n\n      <StyledTextContent\n        innerRef={textRef}\n        data-testid=\"ds-read_more-text\"\n        aria-hidden\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        lines={lines}\n        expanded={expanded}\n        isSafari={IS_SAFARI}\n      >\n        {content}\n      </StyledTextContent>\n\n      {showButton && !withTooltip && (\n        <MoreLessButton\n          expanded={expanded}\n          label={expanded ? less : more}\n          onClick={() => toggleExpanded(!expanded)}\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              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;ADsCnB;AAtCJ,8BAAiC;AACjC,8BAA2E;AAC3E,2BAA4B;AAC5B,mBAAqC;AACrC,4BAA+B;AAC/B,uBAAsD;AACtD,mCAA0E;AAC1E,oBAA2E;AAC3E,iCAAoC;AACpC,mBAA0B;AAE1B,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,YAAY,QAAI,gDAAoB,gBAAgB;AAE3G,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,EAAE,SAAS,IAAI,CAAC,QAAQ,CAAC;AAE3E,QAAM,8BAA0B,sBAAQ,MAAM;AAC5C,QAAI;AACF,aAAO;AACT,WAAO,GAAG,WAAW,aAAa,QAAQ;AAAA,EAC5C,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACT,GAAG;AAAA,MAEJ;AAAA,oDAAC,4CAAkB,mBAAQ;AAAA,QAM3B,4CAAC,4CAAiB,IAAG,gCAA+B,eAAW,MAC5D,mCACH;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAY;AAAA,YACZ,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YAET;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;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;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/useReadMoreTruncate.js

@@ -64,7 +64,7 @@ const checkSafariSingleLine = (textEl, wrapperEl, content) => {
 };
 const scheduleBinaryTruncate = (textEl, wrapperEl, content) => {
   const run = () => requestAnimationFrame(() => binSearchTextOverflow(textEl, wrapperEl, content));
-  if ("fonts" in document && document.fonts.ready) {
+  if ("fonts" in document) {
     document.fonts.ready.then(run).catch(() => setTimeout(run, 0));
   } else {
     setTimeout(run, 0);

package/dist/cjs/useReadMoreTruncate.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useReadMoreTruncate.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useLayoutEffect, useRef, useState } from 'react';\nimport { useOnElementResize } from './useOnElementResize.js';\nimport type { DSReadMoreT } from './react-desc-prop-types.js';\nimport { IS_SAFARI } from './utils.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  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      right = mid - 1;\n    } else {\n      textEnd = mid;\n      left = mid + 1;\n    }\n  }\n\n  element.innerText = content.slice(0, textEnd);\n};\n\nconst checkSafariSingleLine = (textEl: HTMLElement, wrapperEl: HTMLElement, content: string): boolean => {\n  const computed = getComputedStyle(textEl);\n  const font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n  if (!ctx) return false;\n  ctx.font = font;\n  return ctx.measureText(content).width > wrapperEl.clientWidth;\n};\n\nconst scheduleBinaryTruncate = (textEl: HTMLElement, wrapperEl: HTMLElement, content: string) => {\n  const run = () => requestAnimationFrame(() => binSearchTextOverflow(textEl, wrapperEl, content));\n  if ('fonts' in document && document.fonts.ready) {\n    document.fonts.ready.then(run).catch(() => setTimeout(run, 0));\n  } else {\n    setTimeout(run, 0);\n  }\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  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    textEl.innerText = content;\n\n    if (lines === 1 && IS_SAFARI) {\n      const truncated = checkSafariSingleLine(textEl, wrapperEl, content);\n      setShowButton(expanded || truncated);\n      return;\n    }\n\n    const isOverflowing = overflows({ offsetHeight: wrapperEl.offsetHeight, scrollHeight: wrapperEl.scrollHeight });\n    setShowButton(expanded || isOverflowing);\n\n    if (!expanded && isOverflowing) {\n      scheduleBinaryTruncate(textEl, wrapperEl, content);\n    }\n  }, [lines, content, expanded, width, height]);\n\n  return { textWrapperRef, textRef, showButton, expanded, setExpanded };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkD;AAClD,gCAAmC;AAEnC,mBAA0B;AAG1B,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;AAEd,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;AACrB,cAAQ,MAAM;AAAA,IAChB,OAAO;AACL,gBAAU;AACV,aAAO,MAAM;AAAA,IACf;AAAA,EACF;AAEA,UAAQ,YAAY,QAAQ,MAAM,GAAG,OAAO;AAC9C;AAEA,MAAM,wBAAwB,CAAC,QAAqB,WAAwB,YAA6B;AACvG,QAAM,WAAW,iBAAiB,MAAM;AACxC,QAAM,OAAO,GAAG,SAAS,UAAU,IAAI,SAAS,QAAQ,IAAI,SAAS,UAAU;AAC/E,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,MAAM,OAAO,WAAW,IAAI;AAClC,MAAI,CAAC,IAAK,QAAO;AACjB,MAAI,OAAO;AACX,SAAO,IAAI,YAAY,OAAO,EAAE,QAAQ,UAAU;AACpD;AAEA,MAAM,yBAAyB,CAAC,QAAqB,WAAwB,YAAoB;AAC/F,QAAM,MAAM,MAAM,sBAAsB,MAAM,sBAAsB,QAAQ,WAAW,OAAO,CAAC;AAC/F,MAAI,WAAW,YAAY,SAAS,MAAM,OAAO;AAC/C,aAAS,MAAM,MAAM,KAAK,GAAG,EAAE,MAAM,MAAM,WAAW,KAAK,CAAC,CAAC;AAAA,EAC/D,OAAO;AACL,eAAW,KAAK,CAAC;AAAA,EACnB;AACF;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;AAElD,QAAM,EAAE,OAAO,OAAO,QAAI,8CAAmB,cAAc;AAE3D,oCAAgB,MAAM;AACpB,UAAM,SAAS,QAAQ;AACvB,UAAM,YAAY,eAAe;AACjC,QAAI,CAAC,UAAU,CAAC,UAAW;AAE3B,WAAO,YAAY;AAEnB,QAAI,UAAU,KAAK,wBAAW;AAC5B,YAAM,YAAY,sBAAsB,QAAQ,WAAW,OAAO;AAClE,oBAAc,YAAY,SAAS;AACnC;AAAA,IACF;AAEA,UAAM,gBAAgB,UAAU,EAAE,cAAc,UAAU,cAAc,cAAc,UAAU,aAAa,CAAC;AAC9G,kBAAc,YAAY,aAAa;AAEvC,QAAI,CAAC,YAAY,eAAe;AAC9B,6BAAuB,QAAQ,WAAW,OAAO;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,UAAU,OAAO,MAAM,CAAC;AAE5C,SAAO,EAAE,gBAAgB,SAAS,YAAY,UAAU,YAAY;AACtE;",
+  "sourcesContent": ["import { useLayoutEffect, useRef, useState } from 'react';\nimport { useOnElementResize } from './useOnElementResize.js';\nimport type { DSReadMoreT } from './react-desc-prop-types.js';\nimport { IS_SAFARI } from './utils.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  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      right = mid - 1;\n    } else {\n      textEnd = mid;\n      left = mid + 1;\n    }\n  }\n\n  element.innerText = content.slice(0, textEnd);\n};\n\nconst checkSafariSingleLine = (textEl: HTMLElement, wrapperEl: HTMLElement, content: string): boolean => {\n  const computed = getComputedStyle(textEl);\n  const font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n  if (!ctx) return false;\n  ctx.font = font;\n  return ctx.measureText(content).width > wrapperEl.clientWidth;\n};\n\nconst scheduleBinaryTruncate = (textEl: HTMLElement, wrapperEl: HTMLElement, content: string) => {\n  const run = () => requestAnimationFrame(() => binSearchTextOverflow(textEl, wrapperEl, content));\n  if ('fonts' in document) {\n    document.fonts.ready.then(run).catch(() => setTimeout(run, 0));\n  } else {\n    setTimeout(run, 0);\n  }\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  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    textEl.innerText = content;\n\n    if (lines === 1 && IS_SAFARI) {\n      const truncated = checkSafariSingleLine(textEl, wrapperEl, content);\n      setShowButton(expanded || truncated);\n      return;\n    }\n\n    const isOverflowing = overflows({ offsetHeight: wrapperEl.offsetHeight, scrollHeight: wrapperEl.scrollHeight });\n    setShowButton(expanded || isOverflowing);\n\n    if (!expanded && isOverflowing) {\n      scheduleBinaryTruncate(textEl, wrapperEl, content);\n    }\n  }, [lines, content, expanded, width, height]);\n\n  return { textWrapperRef, textRef, showButton, expanded, setExpanded };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkD;AAClD,gCAAmC;AAEnC,mBAA0B;AAG1B,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;AAEd,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;AACrB,cAAQ,MAAM;AAAA,IAChB,OAAO;AACL,gBAAU;AACV,aAAO,MAAM;AAAA,IACf;AAAA,EACF;AAEA,UAAQ,YAAY,QAAQ,MAAM,GAAG,OAAO;AAC9C;AAEA,MAAM,wBAAwB,CAAC,QAAqB,WAAwB,YAA6B;AACvG,QAAM,WAAW,iBAAiB,MAAM;AACxC,QAAM,OAAO,GAAG,SAAS,UAAU,IAAI,SAAS,QAAQ,IAAI,SAAS,UAAU;AAC/E,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,MAAM,OAAO,WAAW,IAAI;AAClC,MAAI,CAAC,IAAK,QAAO;AACjB,MAAI,OAAO;AACX,SAAO,IAAI,YAAY,OAAO,EAAE,QAAQ,UAAU;AACpD;AAEA,MAAM,yBAAyB,CAAC,QAAqB,WAAwB,YAAoB;AAC/F,QAAM,MAAM,MAAM,sBAAsB,MAAM,sBAAsB,QAAQ,WAAW,OAAO,CAAC;AAC/F,MAAI,WAAW,UAAU;AACvB,aAAS,MAAM,MAAM,KAAK,GAAG,EAAE,MAAM,MAAM,WAAW,KAAK,CAAC,CAAC;AAAA,EAC/D,OAAO;AACL,eAAW,KAAK,CAAC;AAAA,EACnB;AACF;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;AAElD,QAAM,EAAE,OAAO,OAAO,QAAI,8CAAmB,cAAc;AAE3D,oCAAgB,MAAM;AACpB,UAAM,SAAS,QAAQ;AACvB,UAAM,YAAY,eAAe;AACjC,QAAI,CAAC,UAAU,CAAC,UAAW;AAE3B,WAAO,YAAY;AAEnB,QAAI,UAAU,KAAK,wBAAW;AAC5B,YAAM,YAAY,sBAAsB,QAAQ,WAAW,OAAO;AAClE,oBAAc,YAAY,SAAS;AACnC;AAAA,IACF;AAEA,UAAM,gBAAgB,UAAU,EAAE,cAAc,UAAU,cAAc,cAAc,UAAU,aAAa,CAAC;AAC9G,kBAAc,YAAY,aAAa;AAEvC,QAAI,CAAC,YAAY,eAAe;AAC9B,6BAAuB,QAAQ,WAAW,OAAO;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,UAAU,OAAO,MAAM,CAAC;AAE5C,SAAO,EAAE,gBAAgB,SAAS,YAAY,UAAU,YAAY;AACtE;",
   "names": []
 }

package/dist/esm/DSReadMore.js

@@ -26,7 +26,8 @@ const DSReadMore = (props) => {
   const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);
   const getOwnerPropsArguments = useCallback(() => ({ expanded }), [expanded]);
   const readMoreDescribedByText = useMemo(() => {
-    if (withTooltip) return "shows the full text for sighted users but the full text is already there for screen readers";
+    if (withTooltip)
+      return "shows the full text for sighted users but the full text is already there for screen readers";
     return `${expanded ? "collapse" : "expand"} the full text for sighted users but the full text is already there for screen readers`;
   }, [expanded, withTooltip]);
   return /* @__PURE__ */ jsxs(

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 { ScreenReaderOnly } from '@elliemae/ds-accessibility';\nimport { describe, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { useCallback, useMemo } from 'react';\nimport { MoreLessButton } from './MoreLessButton.js';\nimport { DSReadMoreDataTestIds, DSReadMoreName } from './constants/index.js';\nimport { DSReadMorePropTypesSchema, defaultProps, type DSReadMoreT } from './react-desc-prop-types.js';\nimport { StyledTextContent, StyledTextWrapper, StyledTooltipWrapper } from './styled.js';\nimport { useReadMoreTruncate } from './useReadMoreTruncate.js';\nimport { IS_SAFARI } from './utils.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 } = 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(() => ({ expanded }), [expanded]);\n\n  const readMoreDescribedByText = useMemo(() => {\n    if (withTooltip) return 'shows the full text for sighted users but the full text is already there for screen readers';\n    return `${expanded ? 'collapse' : 'expand'} the full text for sighted users but the full text is already there for screen readers`;\n  }, [expanded, withTooltip]);\n\n  return (\n    <StyledTextWrapper\n      innerRef={textWrapperRef}\n      lines={lines}\n      expanded={expanded}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      isSafari={IS_SAFARI}\n      {...xstyledProps}\n    >\n      <ScreenReaderOnly>{content}</ScreenReaderOnly>\n      {/**\n       * Hidden from screen readers unless referenced by `aria-describedby`\n       * Ensures the text is only read when associated with a control\n       * Prevents it from being focusable or announced independently\n       */}\n      <ScreenReaderOnly id=\"ds-read_more-text-disclaimer\" aria-hidden>\n        {readMoreDescribedByText}\n      </ScreenReaderOnly>\n\n      <StyledTextContent\n        innerRef={textRef}\n        data-testid=\"ds-read_more-text\"\n        aria-hidden\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        lines={lines}\n        expanded={expanded}\n        isSafari={IS_SAFARI}\n      >\n        {content}\n      </StyledTextContent>\n\n      {showButton && !withTooltip && (\n        <MoreLessButton\n          expanded={expanded}\n          label={expanded ? less : more}\n          onClick={() => toggleExpanded(!expanded)}\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              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;ACqCnB,SASE,KATF;AArCJ,SAAS,wBAAwB;AACjC,SAAS,UAAU,oBAAoB,oCAAoC;AAC3E,SAAS,mBAAmB;AAC5B,SAAS,aAAa,eAAe;AACrC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB,sBAAsB;AACtD,SAAS,2BAA2B,oBAAsC;AAC1E,SAAS,mBAAmB,mBAAmB,4BAA4B;AAC3E,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAE1B,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,YAAY,IAAI,oBAAoB,gBAAgB;AAE3G,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,EAAE,SAAS,IAAI,CAAC,QAAQ,CAAC;AAE3E,QAAM,0BAA0B,QAAQ,MAAM;AAC5C,QAAI,YAAa,QAAO;AACxB,WAAO,GAAG,WAAW,aAAa,QAAQ;AAAA,EAC5C,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACT,GAAG;AAAA,MAEJ;AAAA,4BAAC,oBAAkB,mBAAQ;AAAA,QAM3B,oBAAC,oBAAiB,IAAG,gCAA+B,eAAW,MAC5D,mCACH;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAY;AAAA,YACZ,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YAET;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;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;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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { ScreenReaderOnly } from '@elliemae/ds-accessibility';\nimport { describe, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { useCallback, useMemo } from 'react';\nimport { MoreLessButton } from './MoreLessButton.js';\nimport { DSReadMoreDataTestIds, DSReadMoreName } from './constants/index.js';\nimport { DSReadMorePropTypesSchema, defaultProps, type DSReadMoreT } from './react-desc-prop-types.js';\nimport { StyledTextContent, StyledTextWrapper, StyledTooltipWrapper } from './styled.js';\nimport { useReadMoreTruncate } from './useReadMoreTruncate.js';\nimport { IS_SAFARI } from './utils.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 } = 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(() => ({ expanded }), [expanded]);\n\n  const readMoreDescribedByText = useMemo(() => {\n    if (withTooltip)\n      return 'shows the full text for sighted users but the full text is already there for screen readers';\n    return `${expanded ? 'collapse' : 'expand'} the full text for sighted users but the full text is already there for screen readers`;\n  }, [expanded, withTooltip]);\n\n  return (\n    <StyledTextWrapper\n      innerRef={textWrapperRef}\n      lines={lines}\n      expanded={expanded}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      isSafari={IS_SAFARI}\n      {...xstyledProps}\n    >\n      <ScreenReaderOnly>{content}</ScreenReaderOnly>\n      {/**\n       * Hidden from screen readers unless referenced by `aria-describedby`\n       * Ensures the text is only read when associated with a control\n       * Prevents it from being focusable or announced independently\n       */}\n      <ScreenReaderOnly id=\"ds-read_more-text-disclaimer\" aria-hidden>\n        {readMoreDescribedByText}\n      </ScreenReaderOnly>\n\n      <StyledTextContent\n        innerRef={textRef}\n        data-testid=\"ds-read_more-text\"\n        aria-hidden\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        lines={lines}\n        expanded={expanded}\n        isSafari={IS_SAFARI}\n      >\n        {content}\n      </StyledTextContent>\n\n      {showButton && !withTooltip && (\n        <MoreLessButton\n          expanded={expanded}\n          label={expanded ? less : more}\n          onClick={() => toggleExpanded(!expanded)}\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              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;ACsCnB,SASE,KATF;AAtCJ,SAAS,wBAAwB;AACjC,SAAS,UAAU,oBAAoB,oCAAoC;AAC3E,SAAS,mBAAmB;AAC5B,SAAS,aAAa,eAAe;AACrC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB,sBAAsB;AACtD,SAAS,2BAA2B,oBAAsC;AAC1E,SAAS,mBAAmB,mBAAmB,4BAA4B;AAC3E,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAE1B,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,YAAY,IAAI,oBAAoB,gBAAgB;AAE3G,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,EAAE,SAAS,IAAI,CAAC,QAAQ,CAAC;AAE3E,QAAM,0BAA0B,QAAQ,MAAM;AAC5C,QAAI;AACF,aAAO;AACT,WAAO,GAAG,WAAW,aAAa,QAAQ;AAAA,EAC5C,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACT,GAAG;AAAA,MAEJ;AAAA,4BAAC,oBAAkB,mBAAQ;AAAA,QAM3B,oBAAC,oBAAiB,IAAG,gCAA+B,eAAW,MAC5D,mCACH;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAY;AAAA,YACZ,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YAET;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;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;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/useReadMoreTruncate.js

@@ -31,7 +31,7 @@ const checkSafariSingleLine = (textEl, wrapperEl, content) => {
 };
 const scheduleBinaryTruncate = (textEl, wrapperEl, content) => {
   const run = () => requestAnimationFrame(() => binSearchTextOverflow(textEl, wrapperEl, content));
-  if ("fonts" in document && document.fonts.ready) {
+  if ("fonts" in document) {
     document.fonts.ready.then(run).catch(() => setTimeout(run, 0));
   } else {
     setTimeout(run, 0);

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 { useLayoutEffect, useRef, useState } from 'react';\nimport { useOnElementResize } from './useOnElementResize.js';\nimport type { DSReadMoreT } from './react-desc-prop-types.js';\nimport { IS_SAFARI } from './utils.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  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      right = mid - 1;\n    } else {\n      textEnd = mid;\n      left = mid + 1;\n    }\n  }\n\n  element.innerText = content.slice(0, textEnd);\n};\n\nconst checkSafariSingleLine = (textEl: HTMLElement, wrapperEl: HTMLElement, content: string): boolean => {\n  const computed = getComputedStyle(textEl);\n  const font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n  if (!ctx) return false;\n  ctx.font = font;\n  return ctx.measureText(content).width > wrapperEl.clientWidth;\n};\n\nconst scheduleBinaryTruncate = (textEl: HTMLElement, wrapperEl: HTMLElement, content: string) => {\n  const run = () => requestAnimationFrame(() => binSearchTextOverflow(textEl, wrapperEl, content));\n  if ('fonts' in document && document.fonts.ready) {\n    document.fonts.ready.then(run).catch(() => setTimeout(run, 0));\n  } else {\n    setTimeout(run, 0);\n  }\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  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    textEl.innerText = content;\n\n    if (lines === 1 && IS_SAFARI) {\n      const truncated = checkSafariSingleLine(textEl, wrapperEl, content);\n      setShowButton(expanded || truncated);\n      return;\n    }\n\n    const isOverflowing = overflows({ offsetHeight: wrapperEl.offsetHeight, scrollHeight: wrapperEl.scrollHeight });\n    setShowButton(expanded || isOverflowing);\n\n    if (!expanded && isOverflowing) {\n      scheduleBinaryTruncate(textEl, wrapperEl, content);\n    }\n  }, [lines, content, expanded, width, height]);\n\n  return { textWrapperRef, textRef, showButton, expanded, setExpanded };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB,QAAQ,gBAAgB;AAClD,SAAS,0BAA0B;AAEnC,SAAS,iBAAiB;AAG1B,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;AAEd,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;AACrB,cAAQ,MAAM;AAAA,IAChB,OAAO;AACL,gBAAU;AACV,aAAO,MAAM;AAAA,IACf;AAAA,EACF;AAEA,UAAQ,YAAY,QAAQ,MAAM,GAAG,OAAO;AAC9C;AAEA,MAAM,wBAAwB,CAAC,QAAqB,WAAwB,YAA6B;AACvG,QAAM,WAAW,iBAAiB,MAAM;AACxC,QAAM,OAAO,GAAG,SAAS,UAAU,IAAI,SAAS,QAAQ,IAAI,SAAS,UAAU;AAC/E,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,MAAM,OAAO,WAAW,IAAI;AAClC,MAAI,CAAC,IAAK,QAAO;AACjB,MAAI,OAAO;AACX,SAAO,IAAI,YAAY,OAAO,EAAE,QAAQ,UAAU;AACpD;AAEA,MAAM,yBAAyB,CAAC,QAAqB,WAAwB,YAAoB;AAC/F,QAAM,MAAM,MAAM,sBAAsB,MAAM,sBAAsB,QAAQ,WAAW,OAAO,CAAC;AAC/F,MAAI,WAAW,YAAY,SAAS,MAAM,OAAO;AAC/C,aAAS,MAAM,MAAM,KAAK,GAAG,EAAE,MAAM,MAAM,WAAW,KAAK,CAAC,CAAC;AAAA,EAC/D,OAAO;AACL,eAAW,KAAK,CAAC;AAAA,EACnB;AACF;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;AAElD,QAAM,EAAE,OAAO,OAAO,IAAI,mBAAmB,cAAc;AAE3D,kBAAgB,MAAM;AACpB,UAAM,SAAS,QAAQ;AACvB,UAAM,YAAY,eAAe;AACjC,QAAI,CAAC,UAAU,CAAC,UAAW;AAE3B,WAAO,YAAY;AAEnB,QAAI,UAAU,KAAK,WAAW;AAC5B,YAAM,YAAY,sBAAsB,QAAQ,WAAW,OAAO;AAClE,oBAAc,YAAY,SAAS;AACnC;AAAA,IACF;AAEA,UAAM,gBAAgB,UAAU,EAAE,cAAc,UAAU,cAAc,cAAc,UAAU,aAAa,CAAC;AAC9G,kBAAc,YAAY,aAAa;AAEvC,QAAI,CAAC,YAAY,eAAe;AAC9B,6BAAuB,QAAQ,WAAW,OAAO;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,UAAU,OAAO,MAAM,CAAC;AAE5C,SAAO,EAAE,gBAAgB,SAAS,YAAY,UAAU,YAAY;AACtE;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useLayoutEffect, useRef, useState } from 'react';\nimport { useOnElementResize } from './useOnElementResize.js';\nimport type { DSReadMoreT } from './react-desc-prop-types.js';\nimport { IS_SAFARI } from './utils.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  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      right = mid - 1;\n    } else {\n      textEnd = mid;\n      left = mid + 1;\n    }\n  }\n\n  element.innerText = content.slice(0, textEnd);\n};\n\nconst checkSafariSingleLine = (textEl: HTMLElement, wrapperEl: HTMLElement, content: string): boolean => {\n  const computed = getComputedStyle(textEl);\n  const font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n  if (!ctx) return false;\n  ctx.font = font;\n  return ctx.measureText(content).width > wrapperEl.clientWidth;\n};\n\nconst scheduleBinaryTruncate = (textEl: HTMLElement, wrapperEl: HTMLElement, content: string) => {\n  const run = () => requestAnimationFrame(() => binSearchTextOverflow(textEl, wrapperEl, content));\n  if ('fonts' in document) {\n    document.fonts.ready.then(run).catch(() => setTimeout(run, 0));\n  } else {\n    setTimeout(run, 0);\n  }\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  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    textEl.innerText = content;\n\n    if (lines === 1 && IS_SAFARI) {\n      const truncated = checkSafariSingleLine(textEl, wrapperEl, content);\n      setShowButton(expanded || truncated);\n      return;\n    }\n\n    const isOverflowing = overflows({ offsetHeight: wrapperEl.offsetHeight, scrollHeight: wrapperEl.scrollHeight });\n    setShowButton(expanded || isOverflowing);\n\n    if (!expanded && isOverflowing) {\n      scheduleBinaryTruncate(textEl, wrapperEl, content);\n    }\n  }, [lines, content, expanded, width, height]);\n\n  return { textWrapperRef, textRef, showButton, expanded, setExpanded };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB,QAAQ,gBAAgB;AAClD,SAAS,0BAA0B;AAEnC,SAAS,iBAAiB;AAG1B,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;AAEd,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;AACrB,cAAQ,MAAM;AAAA,IAChB,OAAO;AACL,gBAAU;AACV,aAAO,MAAM;AAAA,IACf;AAAA,EACF;AAEA,UAAQ,YAAY,QAAQ,MAAM,GAAG,OAAO;AAC9C;AAEA,MAAM,wBAAwB,CAAC,QAAqB,WAAwB,YAA6B;AACvG,QAAM,WAAW,iBAAiB,MAAM;AACxC,QAAM,OAAO,GAAG,SAAS,UAAU,IAAI,SAAS,QAAQ,IAAI,SAAS,UAAU;AAC/E,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,MAAM,OAAO,WAAW,IAAI;AAClC,MAAI,CAAC,IAAK,QAAO;AACjB,MAAI,OAAO;AACX,SAAO,IAAI,YAAY,OAAO,EAAE,QAAQ,UAAU;AACpD;AAEA,MAAM,yBAAyB,CAAC,QAAqB,WAAwB,YAAoB;AAC/F,QAAM,MAAM,MAAM,sBAAsB,MAAM,sBAAsB,QAAQ,WAAW,OAAO,CAAC;AAC/F,MAAI,WAAW,UAAU;AACvB,aAAS,MAAM,MAAM,KAAK,GAAG,EAAE,MAAM,MAAM,WAAW,KAAK,CAAC,CAAC;AAAA,EAC/D,OAAO;AACL,eAAW,KAAK,CAAC;AAAA,EACnB;AACF;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;AAElD,QAAM,EAAE,OAAO,OAAO,IAAI,mBAAmB,cAAc;AAE3D,kBAAgB,MAAM;AACpB,UAAM,SAAS,QAAQ;AACvB,UAAM,YAAY,eAAe;AACjC,QAAI,CAAC,UAAU,CAAC,UAAW;AAE3B,WAAO,YAAY;AAEnB,QAAI,UAAU,KAAK,WAAW;AAC5B,YAAM,YAAY,sBAAsB,QAAQ,WAAW,OAAO;AAClE,oBAAc,YAAY,SAAS;AACnC;AAAA,IACF;AAEA,UAAM,gBAAgB,UAAU,EAAE,cAAc,UAAU,cAAc,cAAc,UAAU,aAAa,CAAC;AAC9G,kBAAc,YAAY,aAAa;AAEvC,QAAI,CAAC,YAAY,eAAe;AAC9B,6BAAuB,QAAQ,WAAW,OAAO;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,UAAU,OAAO,MAAM,CAAC;AAE5C,SAAO,EAAE,gBAAgB,SAAS,YAAY,UAAU,YAAY;AACtE;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-read-more",
-  "version": "3.70.0-next.42",
+  "version": "3.70.0-next.44",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Read More",
   "files": [
@@ -36,17 +36,17 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-accessibility": "3.70.0-next.42",
-    "@elliemae/ds-button-v2": "3.70.0-next.42",
-    "@elliemae/ds-props-helpers": "3.70.0-next.42",
-    "@elliemae/ds-system": "3.70.0-next.42",
-    "@elliemae/ds-tooltip-v3": "3.70.0-next.42"
+    "@elliemae/ds-accessibility": "3.70.0-next.44",
+    "@elliemae/ds-props-helpers": "3.70.0-next.44",
+    "@elliemae/ds-button-v2": "3.70.0-next.44",
+    "@elliemae/ds-tooltip-v3": "3.70.0-next.44",
+    "@elliemae/ds-system": "3.70.0-next.44"
   },
   "devDependencies": {
     "jest": "^30.0.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-test-utils": "3.70.0-next.42",
-    "@elliemae/ds-monorepo-devops": "3.70.0-next.42"
+    "@elliemae/ds-test-utils": "3.70.0-next.44",
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.44"
   },
   "peerDependencies": {
     "lodash-es": "^4.18.1",