@elliemae/ds-read-more 3.60.0-next.43 → 3.60.0-next.45

package/dist/cjs/DSReadMore.js

@@ -49,27 +49,21 @@ 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;
   const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
-  const { textWrapperRef, textRef, showButton, expanded, setExpanded, textProps, srOnlyText } = (0, import_useReadMoreTruncate.useReadMoreTruncate)(propsWithDefault);
+  const { textWrapperRef, textRef, showButton, expanded, setExpanded } = (0, import_useReadMoreTruncate.useReadMoreTruncate)(propsWithDefault);
   const toggleExpanded = (0, import_react.useCallback)(
     (newExpanded) => {
       setExpanded(newExpanded);
-      if (newExpanded) {
-        onMore();
-      } else {
-        onLess();
-      }
+      if (newExpanded) onMore();
+      else onLess();
     },
     [onMore, onLess, setExpanded]
   );
   const getOwnerProps = (0, import_react.useCallback)(() => propsWithDefault, [propsWithDefault]);
   const getOwnerPropsArguments = (0, import_react.useCallback)(() => ({ expanded }), [expanded]);
-  const getReadMoreDescribedByText = (0, import_react.useCallback)(() => {
-    if (withTooltip) {
-      return "shows the full text for sighted users but the full text is already there for screen readers";
-    }
+  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";
     return `${expanded ? "collapse" : "expand"} the full text for sighted users but the full text is already there for screen readers`;
   }, [expanded, withTooltip]);
-  const isSafariBrowser = (0, import_react.useMemo)(() => (0, import_utils.isSafari)(), []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styled.StyledTextWrapper,
     {
@@ -78,22 +72,22 @@ const DSReadMore = (props) => {
       expanded,
       getOwnerProps,
       getOwnerPropsArguments,
-      isSafari: isSafariBrowser,
+      isSafari: import_utils.IS_SAFARI,
       ...xstyledProps,
       children: [
-        srOnlyText,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_accessibility.ScreenReaderOnly, { id: "ds-read_more-text-disclaimer", "aria-hidden": true, children: getReadMoreDescribedByText() }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_accessibility.ScreenReaderOnly, { children: content }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_accessibility.ScreenReaderOnly, { id: "ds-read_more-text-disclaimer", "aria-hidden": true, children: readMoreDescribedByText }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_styled.StyledTextContent,
           {
             innerRef: textRef,
             "data-testid": "ds-read_more-text",
-            ...textProps,
+            "aria-hidden": true,
             getOwnerProps,
             getOwnerPropsArguments,
             lines,
             expanded,
-            isSafari: isSafariBrowser,
+            isSafari: import_utils.IS_SAFARI,
             children: content
           }
         ),

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 { isSafari } 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, 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(() => ({ expanded }), [expanded]);\n  const getReadMoreDescribedByText = useCallback(() => {\n    if (withTooltip) {\n      return 'shows the full text for sighted users but the full text is already there for screen readers';\n    }\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  const isSafariBrowser = useMemo(() => isSafari(), []);\n\n  return (\n    <StyledTextWrapper\n      innerRef={textWrapperRef}\n      lines={lines}\n      expanded={expanded}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      isSafari={isSafariBrowser}\n      {...xstyledProps}\n    >\n      {srOnlyText}\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        {getReadMoreDescribedByText()}\n      </ScreenReaderOnly>\n\n      <StyledTextContent\n        innerRef={textRef}\n        data-testid=\"ds-read_more-text\"\n        {...textProps}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        lines={lines}\n        expanded={expanded}\n        isSafari={isSafariBrowser}\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;AD4CnB;AA5CJ,8BAAiC;AACjC,8BAA2E;AAC3E,2BAA4B;AAC5B,mBAAqC;AACrC,4BAA+B;AAC/B,uBAAsD;AACtD,mCAA0E;AAC1E,oBAA2E;AAC3E,iCAAoC;AACpC,mBAAyB;AAEzB,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,EAAE,SAAS,IAAI,CAAC,QAAQ,CAAC;AAC3E,QAAM,iCAA6B,0BAAY,MAAM;AACnD,QAAI,aAAa;AACf,aAAO;AAAA,IACT;AACA,WAAO,GAAG,WAAW,aAAa,QAAQ;AAAA,EAC5C,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,QAAM,sBAAkB,sBAAQ,UAAM,uBAAS,GAAG,CAAC,CAAC;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACT,GAAG;AAAA,MAEH;AAAA;AAAA,QAMD,4CAAC,4CAAiB,IAAG,gCAA+B,eAAW,MAC5D,qCAA2B,GAC9B;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAY;AAAA,YACX,GAAG;AAAA,YACJ;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) 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;",
   "names": []
 }

package/dist/cjs/MoreLessButton.js

@@ -55,7 +55,7 @@ const MoreLessButton = (props) => {
             getOwnerProps,
             getOwnerPropsArguments,
             "aria-describedby": "ds-read_more-text-disclaimer",
-            "aria-expanded": expanded ? "true" : "false",
+            "aria-expanded": expanded,
             children: label
           }
         )

package/dist/cjs/MoreLessButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/MoreLessButton.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { StyledButton, StyledButtonWrapper } from './styled.js';\n\ninterface MoreLessButtonProps {\n  expanded: boolean;\n  label: string;\n  onClick?: () => void;\n  ellipsis: string;\n  withTooltip?: boolean;\n  dataTestId: string;\n  getOwnerProps: () => object;\n  getOwnerPropsArguments: () => object;\n}\n\nconst MoreLessButton = (props: MoreLessButtonProps) => {\n  const { expanded, label, onClick, ellipsis, withTooltip, dataTestId, getOwnerProps, getOwnerPropsArguments } = props;\n\n  return (\n    <StyledButtonWrapper\n      expanded={expanded}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <span aria-hidden>{expanded || withTooltip ? ' ' : ellipsis}</span>\n\n      <StyledButton\n        withTooltip={withTooltip}\n        buttonType=\"text\"\n        onClick={onClick}\n        size=\"s\"\n        data-testid={dataTestId}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        aria-describedby=\"ds-read_more-text-disclaimer\"\n        aria-expanded={expanded ? 'true' : 'false'}\n      >\n        {label}\n      </StyledButton>\n    </StyledButtonWrapper>\n  );\n};\n\nexport { MoreLessButton };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAjBJ,oBAAkD;AAalD,MAAM,iBAAiB,CAAC,UAA+B;AACrD,QAAM,EAAE,UAAU,OAAO,SAAS,UAAU,aAAa,YAAY,eAAe,uBAAuB,IAAI;AAE/G,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC,UAAK,eAAW,MAAE,sBAAY,cAAc,MAAM,UAAS;AAAA,QAE5D;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,YAAW;AAAA,YACX;AAAA,YACA,MAAK;AAAA,YACL,eAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA,oBAAiB;AAAA,YACjB,iBAAe,WAAW,SAAS;AAAA,YAElC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { StyledButton, StyledButtonWrapper } from './styled.js';\n\ninterface MoreLessButtonProps {\n  expanded: boolean;\n  label: string;\n  onClick?: () => void;\n  ellipsis: string;\n  withTooltip?: boolean;\n  dataTestId: string;\n  getOwnerProps: () => object;\n  getOwnerPropsArguments: () => object;\n}\n\nconst MoreLessButton = (props: MoreLessButtonProps) => {\n  const { expanded, label, onClick, ellipsis, withTooltip, dataTestId, getOwnerProps, getOwnerPropsArguments } = props;\n\n  return (\n    <StyledButtonWrapper\n      expanded={expanded}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <span aria-hidden>{expanded || withTooltip ? ' ' : ellipsis}</span>\n\n      <StyledButton\n        withTooltip={withTooltip}\n        buttonType=\"text\"\n        onClick={onClick}\n        size=\"s\"\n        data-testid={dataTestId}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        aria-describedby=\"ds-read_more-text-disclaimer\"\n        aria-expanded={expanded}\n      >\n        {label}\n      </StyledButton>\n    </StyledButtonWrapper>\n  );\n};\n\nexport { MoreLessButton };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAjBJ,oBAAkD;AAalD,MAAM,iBAAiB,CAAC,UAA+B;AACrD,QAAM,EAAE,UAAU,OAAO,SAAS,UAAU,aAAa,YAAY,eAAe,uBAAuB,IAAI;AAE/G,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,oDAAC,UAAK,eAAW,MAAE,sBAAY,cAAc,MAAM,UAAS;AAAA,QAE5D;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,YAAW;AAAA,YACX;AAAA,YACA,MAAK;AAAA,YACL,eAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA,oBAAiB;AAAA,YACjB,iBAAe;AAAA,YAEd;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -65,7 +65,7 @@ const DSReadMorePropTypes = {
   content: import_ds_props_helpers.PropTypes.string.description("The text content you want displayed").isRequired,
   /** 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"),
+  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_constants.DSReadMoreDataTestIds)
 };
 const DSReadMorePropTypesSchema = DSReadMorePropTypes;

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  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;",
+  "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,KAAK;AAAA,EACrB,OAAG,wDAA+B,sCAAqB;AACzD;AAEO,MAAM,4BAA4B;",
   "names": []
 }

package/dist/cjs/styled.js

@@ -28,7 +28,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styled_exports = {};
 __export(styled_exports, {
-  ScreenReaderOnly: () => ScreenReaderOnly,
   StyledButton: () => StyledButton,
   StyledButtonWrapper: () => StyledButtonWrapper,
   StyledTextContent: () => StyledTextContent,
@@ -59,12 +58,10 @@ const StyledTextWrapper = (0, import_ds_system.styled)("span", {
           display: flex;
           align-items: baseline;
           white-space: nowrap;
-          overflow: hidden;
         `;
     }
     return `
         display: block;
-        overflow: hidden;
         white-space: pre-wrap;
         line-height: 1.25em;
         max-height: calc(${lines} * 1.25em);
@@ -72,7 +69,6 @@ const StyledTextWrapper = (0, import_ds_system.styled)("span", {
   }
   return `
         display: block;
-        overflow: hidden;
         white-space: pre-wrap;
         line-height: 1.25em;
         max-height: calc(${lines} * 1.25em);
@@ -118,12 +114,4 @@ const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3
     text-decoration: ${({ withTooltip }) => withTooltip ? "" : "underline"};
   }
 `;
-const ScreenReaderOnly = import_ds_system.styled.span`
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 100%;
-  overflow: hidden;
-  position: absolute;
-  width: 100%;
-`;
 //# sourceMappingURL=styled.js.map

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 { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { DSReadMoreName, DSReadMoreSlots } from './constants/index.js';\n\nexport const StyledTextWrapper = styled('span', {\n  name: DSReadMoreName,\n  slot: DSReadMoreSlots.ROOT,\n})<{\n  lines: number;\n  expanded: boolean;\n  isSafari: boolean;\n}>`\n  position: relative;\n\n  ${({ lines, isSafari, expanded }) => {\n    if (expanded) {\n      return `\n        display: block;\n        white-space: pre-wrap;\n      `;\n    }\n\n    if (isSafari) {\n      if (lines === 1) {\n        return `\n          display: flex;\n          align-items: baseline;\n          white-space: nowrap;\n          overflow: hidden;\n        `;\n      }\n\n      return `\n        display: block;\n        overflow: hidden;\n        white-space: pre-wrap;\n        line-height: 1.25em;\n        max-height: calc(${lines} * 1.25em);\n      `;\n    }\n\n    return `\n        display: block;\n        overflow: hidden;\n        white-space: pre-wrap;\n        line-height: 1.25em;\n        max-height: calc(${lines} * 1.25em);\n    `;\n  }}\n\n  -webkit-hyphens: auto;\n  -moz-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n  overflow-wrap: break-word;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledTextContent = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.TEXT_CONTENT })<{\n  lines: number;\n  expanded: boolean;\n  isSafari: boolean;\n}>`\n  ${({ lines, expanded, isSafari }) =>\n    lines === 1 && isSafari && !expanded\n      ? `\n    flex: 1 1 auto;\n    overflow-x: hidden;\n    white-space: nowrap;\n    text-overflow: hidden;\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  expanded: boolean;\n}>`\n  flex: none;\n  display: -webkit-inline-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n`;\n\nexport const StyledButton = styled(DSButtonV3, { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON })<{\n  withTooltip?: boolean;\n}>`\n  padding: ${({ theme }) => `0 ${theme.space.xxxs}`};\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;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA,IAOG,CAAC,EAAE,OAAO,UAAU,SAAS,MAAM;AACnC,MAAI,UAAU;AACZ,WAAO;AAAA;AAAA;AAAA;AAAA,EAIT;AAEA,MAAI,UAAU;AACZ,QAAI,UAAU,GAAG;AACf,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMT;AAEA,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKc,KAAK;AAAA;AAAA,EAE5B;AAEA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKgB,KAAK;AAAA;AAE9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC,mCAAkB;AAAA;AAGf,MAAM,wBAAoB,yBAAO,QAAQ,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,aAAa,CAAC;AAAA,IAKxG,CAAC,EAAE,OAAO,UAAU,SAAS,MAC7B,UAAU,KAAK,YAAY,CAAC,WACxB;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;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,OAAO,CAAC;AAAA,aAGxF,CAAC,EAAE,MAAM,MAAM,KAAK,MAAM,MAAM,IAAI,EAAE;AAAA,WACxC,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 { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { DSReadMoreName, DSReadMoreSlots } from './constants/index.js';\n\nexport const StyledTextWrapper = styled('span', {\n  name: DSReadMoreName,\n  slot: DSReadMoreSlots.ROOT,\n})<{\n  lines: number;\n  expanded: boolean;\n  isSafari: boolean;\n}>`\n  position: relative;\n\n  ${({ lines, isSafari, expanded }) => {\n    if (expanded) {\n      return `\n        display: block;\n        white-space: pre-wrap;\n      `;\n    }\n\n    if (isSafari) {\n      if (lines === 1) {\n        return `\n          display: flex;\n          align-items: baseline;\n          white-space: nowrap;\n        `;\n      }\n\n      return `\n        display: block;\n        white-space: pre-wrap;\n        line-height: 1.25em;\n        max-height: calc(${lines} * 1.25em);\n      `;\n    }\n\n    return `\n        display: block;\n        white-space: pre-wrap;\n        line-height: 1.25em;\n        max-height: calc(${lines} * 1.25em);\n    `;\n  }}\n\n  -webkit-hyphens: auto;\n  -moz-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n  overflow-wrap: break-word;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledTextContent = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.TEXT_CONTENT })<{\n  lines: number;\n  expanded: boolean;\n  isSafari: boolean;\n}>`\n  ${({ lines, expanded, isSafari }) =>\n    lines === 1 && isSafari && !expanded\n      ? `\n    flex: 1 1 auto;\n    overflow-x: hidden;\n    white-space: nowrap;\n    text-overflow: hidden;\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  expanded: boolean;\n}>`\n  flex: none;\n  display: -webkit-inline-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n`;\n\nexport const StyledButton = styled(DSButtonV3, { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON })<{\n  withTooltip?: boolean;\n}>`\n  padding: ${({ theme }) => `0 ${theme.space.xxxs}`};\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,0BAA2B;AAC3B,uBAAgD;AAEzC,MAAM,wBAAoB,yBAAO,QAAQ;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,iCAAgB;AACxB,CAAC;AAAA;AAAA;AAAA,IAOG,CAAC,EAAE,OAAO,UAAU,SAAS,MAAM;AACnC,MAAI,UAAU;AACZ,WAAO;AAAA;AAAA;AAAA;AAAA,EAIT;AAEA,MAAI,UAAU;AACZ,QAAI,UAAU,GAAG;AACf,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT;AAEA,WAAO;AAAA;AAAA;AAAA;AAAA,2BAIc,KAAK;AAAA;AAAA,EAE5B;AAEA,SAAO;AAAA;AAAA;AAAA;AAAA,2BAIgB,KAAK;AAAA;AAE9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC,mCAAkB;AAAA;AAGf,MAAM,wBAAoB,yBAAO,QAAQ,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,aAAa,CAAC;AAAA,IAKxG,CAAC,EAAE,OAAO,UAAU,SAAS,MAC7B,UAAU,KAAK,YAAY,CAAC,WACxB;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;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,iCAAgB,MAAM,iCAAgB,OAAO,CAAC;AAAA,aAGxF,CAAC,EAAE,MAAM,MAAM,KAAK,MAAM,MAAM,IAAI,EAAE;AAAA,WACxC,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;",
   "names": []
 }

package/dist/cjs/useReadMoreTruncate.js

@@ -32,10 +32,8 @@ __export(useReadMoreTruncate_exports, {
 });
 module.exports = __toCommonJS(useReadMoreTruncate_exports);
 var React = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_useOnElementResize = require("./useOnElementResize.js");
-var import_styled = require("./styled.js");
 var import_utils = require("./utils.js");
 const overflows = ({ offsetHeight, scrollHeight }) => offsetHeight + 4 < scrollHeight;
 const binSearchTextOverflow = (element, parent, content) => {
@@ -55,6 +53,23 @@ const binSearchTextOverflow = (element, parent, content) => {
   }
   element.innerText = content.slice(0, textEnd);
 };
+const checkSafariSingleLine = (textEl, wrapperEl, content) => {
+  const computed = getComputedStyle(textEl);
+  const font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return false;
+  ctx.font = font;
+  return ctx.measureText(content).width > wrapperEl.clientWidth;
+};
+const scheduleBinaryTruncate = (textEl, wrapperEl, content) => {
+  const run = () => requestAnimationFrame(() => binSearchTextOverflow(textEl, wrapperEl, content));
+  if ("fonts" in document && document.fonts.ready) {
+    document.fonts.ready.then(run).catch(() => setTimeout(run, 0));
+  } else {
+    setTimeout(run, 0);
+  }
+};
 const useReadMoreTruncate = ({ lines, content }) => {
   const textWrapperRef = (0, import_react.useRef)(null);
   const textRef = (0, import_react.useRef)(null);
@@ -66,53 +81,17 @@ const useReadMoreTruncate = ({ lines, content }) => {
     const wrapperEl = textWrapperRef.current;
     if (!textEl || !wrapperEl) return;
     textEl.innerText = content;
-    if (lines === 1 && (0, import_utils.isSafari)()) {
-      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;
-      }
+    if (lines === 1 && import_utils.IS_SAFARI) {
+      const truncated = checkSafariSingleLine(textEl, wrapperEl, content);
       setShowButton(expanded || truncated);
       return;
     }
-    const isOverflowing = overflows({
-      offsetHeight: wrapperEl.offsetHeight,
-      scrollHeight: wrapperEl.scrollHeight
-    });
+    const isOverflowing = overflows({ offsetHeight: wrapperEl.offsetHeight, scrollHeight: wrapperEl.scrollHeight });
     setShowButton(expanded || isOverflowing);
     if (!expanded && isOverflowing) {
-      const doBinaryTruncate = () => {
-        if (!textEl || !wrapperEl) return;
-        requestAnimationFrame(() => {
-          binSearchTextOverflow(textEl, wrapperEl, content);
-        });
-      };
-      if ("fonts" in document && document.fonts.ready) {
-        document.fonts.ready.then(() => {
-          doBinaryTruncate();
-        }).catch(() => {
-          setTimeout(doBinaryTruncate, 0);
-        });
-      } else {
-        setTimeout(doBinaryTruncate, 0);
-      }
+      scheduleBinaryTruncate(textEl, wrapperEl, content);
     }
   }, [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 }), []);
-  return {
-    textWrapperRef,
-    textRef,
-    showButton,
-    expanded,
-    setExpanded,
-    textProps,
-    srOnlyText
-  };
+  return { textWrapperRef, textRef, showButton, expanded, setExpanded };
 };
 //# sourceMappingURL=useReadMoreTruncate.js.map

package/dist/cjs/useReadMoreTruncate.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useReadMoreTruncate.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "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';\nimport { isSafari } 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  // 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 && isSafari()) {\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        requestAnimationFrame(() => {\n          binSearchTextOverflow(textEl, wrapperEl, content);\n        });\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;ADqHY;AAjHnC,mBAAkE;AAClE,gCAAmC;AAEnC,oBAAiC;AACjC,mBAAyB;AAGzB,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,SAAK,uBAAS,GAAG;AAC7B,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,MAAM;AAC1B,gCAAsB,QAAQ,WAAW,OAAO;AAAA,QAClD,CAAC;AAAA,MACH;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;",
+  "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;",
   "names": []
 }

package/dist/cjs/utils.js

@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var utils_exports = {};
 __export(utils_exports, {
+  IS_SAFARI: () => IS_SAFARI,
   isSafari: () => isSafari
 });
 module.exports = __toCommonJS(utils_exports);
@@ -37,4 +38,5 @@ const isSafari = () => {
   const ua = navigator.userAgent;
   return /safari/i.test(ua) && !/chrome|chromium|android/i.test(ua);
 };
+const IS_SAFARI = isSafari();
 //# sourceMappingURL=utils.js.map

package/dist/cjs/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/**\n * Detects whether the current browser is Safari (excluding Chrome/Chromium and Android browsers).\n *\n * This utility is used to apply Safari-specific layout and styling workarounds.\n * Safari has known differences and bugs around text truncation, line-clamp,\n * and layout measurements (e.g. offsetHeight/scrollHeight), which can affect\n * components that rely on precise DOM sizing.\n *\n * The check is intentionally lightweight and user-agent based, as feature\n * detection is not reliable for these Safari-specific rendering issues.\n *\n * When used inside React components, this function should be evaluated once\n * (e.g. via useMemo) to avoid layout churn and focus instability caused by\n * re-evaluating browser detection on every render.\n */\nexport const isSafari = () => {\n  if (typeof navigator === 'undefined') return false;\n\n  const ua = navigator.userAgent;\n  // Safari but not Chrome/Chromium/Android\n  return /safari/i.test(ua) && !/chrome|chromium|android/i.test(ua);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADehB,MAAM,WAAW,MAAM;AAC5B,MAAI,OAAO,cAAc,YAAa,QAAO;AAE7C,QAAM,KAAK,UAAU;AAErB,SAAO,UAAU,KAAK,EAAE,KAAK,CAAC,2BAA2B,KAAK,EAAE;AAClE;",
+  "sourcesContent": ["/**\n * Detects whether the current browser is Safari (excluding Chrome/Chromium and Android browsers).\n *\n * This utility is used to apply Safari-specific layout and styling workarounds.\n * Safari has known differences and bugs around text truncation, line-clamp,\n * and layout measurements (e.g. offsetHeight/scrollHeight), which can affect\n * components that rely on precise DOM sizing.\n *\n * The check is intentionally lightweight and user-agent based, as feature\n * detection is not reliable for these Safari-specific rendering issues.\n */\nexport const isSafari = () => {\n  if (typeof navigator === 'undefined') return false;\n\n  const ua = navigator.userAgent;\n  // Safari but not Chrome/Chromium/Android\n  return /safari/i.test(ua) && !/chrome|chromium|android/i.test(ua);\n};\n\n/** Evaluated once at module load \u2014 safe for SSR (returns false when navigator is unavailable). */\nexport const IS_SAFARI = isSafari();\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWhB,MAAM,WAAW,MAAM;AAC5B,MAAI,OAAO,cAAc,YAAa,QAAO;AAE7C,QAAM,KAAK,UAAU;AAErB,SAAO,UAAU,KAAK,EAAE,KAAK,CAAC,2BAA2B,KAAK,EAAE;AAClE;AAGO,MAAM,YAAY,SAAS;",
   "names": []
 }

package/dist/esm/DSReadMore.js

@@ -9,32 +9,26 @@ import { DSReadMoreDataTestIds, DSReadMoreName } from "./constants/index.js";
 import { DSReadMorePropTypesSchema, defaultProps } from "./react-desc-prop-types.js";
 import { StyledTextContent, StyledTextWrapper, StyledTooltipWrapper } from "./styled.js";
 import { useReadMoreTruncate } from "./useReadMoreTruncate.js";
-import { isSafari } from "./utils.js";
+import { IS_SAFARI } from "./utils.js";
 const DSReadMore = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   const { lines, more, less, content, withTooltip, ellipsis, onMore, onLess } = propsWithDefault;
   const xstyledProps = useGetXstyledProps(propsWithDefault);
-  const { textWrapperRef, textRef, showButton, expanded, setExpanded, textProps, srOnlyText } = useReadMoreTruncate(propsWithDefault);
+  const { textWrapperRef, textRef, showButton, expanded, setExpanded } = useReadMoreTruncate(propsWithDefault);
   const toggleExpanded = useCallback(
     (newExpanded) => {
       setExpanded(newExpanded);
-      if (newExpanded) {
-        onMore();
-      } else {
-        onLess();
-      }
+      if (newExpanded) onMore();
+      else onLess();
     },
     [onMore, onLess, setExpanded]
   );
   const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);
   const getOwnerPropsArguments = useCallback(() => ({ expanded }), [expanded]);
-  const getReadMoreDescribedByText = useCallback(() => {
-    if (withTooltip) {
-      return "shows the full text for sighted users but the full text is already there for screen readers";
-    }
+  const readMoreDescribedByText = useMemo(() => {
+    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]);
-  const isSafariBrowser = useMemo(() => isSafari(), []);
   return /* @__PURE__ */ jsxs(
     StyledTextWrapper,
     {
@@ -43,22 +37,22 @@ const DSReadMore = (props) => {
       expanded,
       getOwnerProps,
       getOwnerPropsArguments,
-      isSafari: isSafariBrowser,
+      isSafari: IS_SAFARI,
       ...xstyledProps,
       children: [
-        srOnlyText,
-        /* @__PURE__ */ jsx(ScreenReaderOnly, { id: "ds-read_more-text-disclaimer", "aria-hidden": true, children: getReadMoreDescribedByText() }),
+        /* @__PURE__ */ jsx(ScreenReaderOnly, { children: content }),
+        /* @__PURE__ */ jsx(ScreenReaderOnly, { id: "ds-read_more-text-disclaimer", "aria-hidden": true, children: readMoreDescribedByText }),
         /* @__PURE__ */ jsx(
           StyledTextContent,
           {
             innerRef: textRef,
             "data-testid": "ds-read_more-text",
-            ...textProps,
+            "aria-hidden": true,
             getOwnerProps,
             getOwnerPropsArguments,
             lines,
             expanded,
-            isSafari: isSafariBrowser,
+            isSafari: IS_SAFARI,
             children: content
           }
         ),

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 { isSafari } 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, 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(() => ({ expanded }), [expanded]);\n  const getReadMoreDescribedByText = useCallback(() => {\n    if (withTooltip) {\n      return 'shows the full text for sighted users but the full text is already there for screen readers';\n    }\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  const isSafariBrowser = useMemo(() => isSafari(), []);\n\n  return (\n    <StyledTextWrapper\n      innerRef={textWrapperRef}\n      lines={lines}\n      expanded={expanded}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      isSafari={isSafariBrowser}\n      {...xstyledProps}\n    >\n      {srOnlyText}\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        {getReadMoreDescribedByText()}\n      </ScreenReaderOnly>\n\n      <StyledTextContent\n        innerRef={textRef}\n        data-testid=\"ds-read_more-text\"\n        {...textProps}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        lines={lines}\n        expanded={expanded}\n        isSafari={isSafariBrowser}\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;AC4CnB,SAeE,KAfF;AA5CJ,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,gBAAgB;AAEzB,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,EAAE,SAAS,IAAI,CAAC,QAAQ,CAAC;AAC3E,QAAM,6BAA6B,YAAY,MAAM;AACnD,QAAI,aAAa;AACf,aAAO;AAAA,IACT;AACA,WAAO,GAAG,WAAW,aAAa,QAAQ;AAAA,EAC5C,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,QAAM,kBAAkB,QAAQ,MAAM,SAAS,GAAG,CAAC,CAAC;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACT,GAAG;AAAA,MAEH;AAAA;AAAA,QAMD,oBAAC,oBAAiB,IAAG,gCAA+B,eAAW,MAC5D,qCAA2B,GAC9B;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAY;AAAA,YACX,GAAG;AAAA,YACJ;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) 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;",
   "names": []
 }

package/dist/esm/MoreLessButton.js

@@ -22,7 +22,7 @@ const MoreLessButton = (props) => {
             getOwnerProps,
             getOwnerPropsArguments,
             "aria-describedby": "ds-read_more-text-disclaimer",
-            "aria-expanded": expanded ? "true" : "false",
+            "aria-expanded": expanded,
             children: label
           }
         )

package/dist/esm/MoreLessButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/MoreLessButton.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledButton, StyledButtonWrapper } from './styled.js';\n\ninterface MoreLessButtonProps {\n  expanded: boolean;\n  label: string;\n  onClick?: () => void;\n  ellipsis: string;\n  withTooltip?: boolean;\n  dataTestId: string;\n  getOwnerProps: () => object;\n  getOwnerPropsArguments: () => object;\n}\n\nconst MoreLessButton = (props: MoreLessButtonProps) => {\n  const { expanded, label, onClick, ellipsis, withTooltip, dataTestId, getOwnerProps, getOwnerPropsArguments } = props;\n\n  return (\n    <StyledButtonWrapper\n      expanded={expanded}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <span aria-hidden>{expanded || withTooltip ? ' ' : ellipsis}</span>\n\n      <StyledButton\n        withTooltip={withTooltip}\n        buttonType=\"text\"\n        onClick={onClick}\n        size=\"s\"\n        data-testid={dataTestId}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        aria-describedby=\"ds-read_more-text-disclaimer\"\n        aria-expanded={expanded ? 'true' : 'false'}\n      >\n        {label}\n      </StyledButton>\n    </StyledButtonWrapper>\n  );\n};\n\nexport { MoreLessButton };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkBnB,SAKE,KALF;AAjBJ,SAAS,cAAc,2BAA2B;AAalD,MAAM,iBAAiB,CAAC,UAA+B;AACrD,QAAM,EAAE,UAAU,OAAO,SAAS,UAAU,aAAa,YAAY,eAAe,uBAAuB,IAAI;AAE/G,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,UAAK,eAAW,MAAE,sBAAY,cAAc,MAAM,UAAS;AAAA,QAE5D;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,YAAW;AAAA,YACX;AAAA,YACA,MAAK;AAAA,YACL,eAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA,oBAAiB;AAAA,YACjB,iBAAe,WAAW,SAAS;AAAA,YAElC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledButton, StyledButtonWrapper } from './styled.js';\n\ninterface MoreLessButtonProps {\n  expanded: boolean;\n  label: string;\n  onClick?: () => void;\n  ellipsis: string;\n  withTooltip?: boolean;\n  dataTestId: string;\n  getOwnerProps: () => object;\n  getOwnerPropsArguments: () => object;\n}\n\nconst MoreLessButton = (props: MoreLessButtonProps) => {\n  const { expanded, label, onClick, ellipsis, withTooltip, dataTestId, getOwnerProps, getOwnerPropsArguments } = props;\n\n  return (\n    <StyledButtonWrapper\n      expanded={expanded}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <span aria-hidden>{expanded || withTooltip ? ' ' : ellipsis}</span>\n\n      <StyledButton\n        withTooltip={withTooltip}\n        buttonType=\"text\"\n        onClick={onClick}\n        size=\"s\"\n        data-testid={dataTestId}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        aria-describedby=\"ds-read_more-text-disclaimer\"\n        aria-expanded={expanded}\n      >\n        {label}\n      </StyledButton>\n    </StyledButtonWrapper>\n  );\n};\n\nexport { MoreLessButton };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkBnB,SAKE,KALF;AAjBJ,SAAS,cAAc,2BAA2B;AAalD,MAAM,iBAAiB,CAAC,UAA+B;AACrD,QAAM,EAAE,UAAU,OAAO,SAAS,UAAU,aAAa,YAAY,eAAe,uBAAuB,IAAI;AAE/G,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,UAAK,eAAW,MAAE,sBAAY,cAAc,MAAM,UAAS;AAAA,QAE5D;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,YAAW;AAAA,YACX;AAAA,YACA,MAAK;AAAA,YACL,eAAa;AAAA,YACb;AAAA,YACA;AAAA,YACA,oBAAiB;AAAA,YACjB,iBAAe;AAAA,YAEd;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -36,7 +36,7 @@ const DSReadMorePropTypes = {
   content: PropTypes.string.description("The text content you want displayed").isRequired,
   /** The text you want to appear when truncating */
   ellipsis: PropTypes.string.description("The text you want to appear when truncating").defaultValue("..."),
-  withTooltip: PropTypes.bool.description("Whether to show expandable tooltip on ellipsis focus instead of expandable buttons").defaultValue("false"),
+  withTooltip: PropTypes.bool.description("Whether to show expandable tooltip on ellipsis focus instead of expandable buttons").defaultValue(false),
   ...getPropsPerDatatestIdPropTypes(DSReadMoreDataTestIds)
 };
 const DSReadMorePropTypesSchema = DSReadMorePropTypes;

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  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;",
+  "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,KAAK;AAAA,EACrB,GAAG,+BAA+B,qBAAqB;AACzD;AAEO,MAAM,4BAA4B;",
   "names": []
 }

package/dist/esm/styled.js

@@ -21,12 +21,10 @@ const StyledTextWrapper = styled("span", {
           display: flex;
           align-items: baseline;
           white-space: nowrap;
-          overflow: hidden;
         `;
     }
     return `
         display: block;
-        overflow: hidden;
         white-space: pre-wrap;
         line-height: 1.25em;
         max-height: calc(${lines} * 1.25em);
@@ -34,7 +32,6 @@ const StyledTextWrapper = styled("span", {
   }
   return `
         display: block;
-        overflow: hidden;
         white-space: pre-wrap;
         line-height: 1.25em;
         max-height: calc(${lines} * 1.25em);
@@ -80,16 +77,7 @@ const StyledButton = styled(DSButtonV3, { name: DSReadMoreName, slot: DSReadMore
     text-decoration: ${({ withTooltip }) => withTooltip ? "" : "underline"};
   }
 `;
-const ScreenReaderOnly = styled.span`
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 100%;
-  overflow: hidden;
-  position: absolute;
-  width: 100%;
-`;
 export {
-  ScreenReaderOnly,
   StyledButton,
   StyledButtonWrapper,
   StyledTextContent,

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 { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { DSReadMoreName, DSReadMoreSlots } from './constants/index.js';\n\nexport const StyledTextWrapper = styled('span', {\n  name: DSReadMoreName,\n  slot: DSReadMoreSlots.ROOT,\n})<{\n  lines: number;\n  expanded: boolean;\n  isSafari: boolean;\n}>`\n  position: relative;\n\n  ${({ lines, isSafari, expanded }) => {\n    if (expanded) {\n      return `\n        display: block;\n        white-space: pre-wrap;\n      `;\n    }\n\n    if (isSafari) {\n      if (lines === 1) {\n        return `\n          display: flex;\n          align-items: baseline;\n          white-space: nowrap;\n          overflow: hidden;\n        `;\n      }\n\n      return `\n        display: block;\n        overflow: hidden;\n        white-space: pre-wrap;\n        line-height: 1.25em;\n        max-height: calc(${lines} * 1.25em);\n      `;\n    }\n\n    return `\n        display: block;\n        overflow: hidden;\n        white-space: pre-wrap;\n        line-height: 1.25em;\n        max-height: calc(${lines} * 1.25em);\n    `;\n  }}\n\n  -webkit-hyphens: auto;\n  -moz-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n  overflow-wrap: break-word;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledTextContent = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.TEXT_CONTENT })<{\n  lines: number;\n  expanded: boolean;\n  isSafari: boolean;\n}>`\n  ${({ lines, expanded, isSafari }) =>\n    lines === 1 && isSafari && !expanded\n      ? `\n    flex: 1 1 auto;\n    overflow-x: hidden;\n    white-space: nowrap;\n    text-overflow: hidden;\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  expanded: boolean;\n}>`\n  flex: none;\n  display: -webkit-inline-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n`;\n\nexport const StyledButton = styled(DSButtonV3, { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON })<{\n  withTooltip?: boolean;\n}>`\n  padding: ${({ theme }) => `0 ${theme.space.xxxs}`};\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;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA,IAOG,CAAC,EAAE,OAAO,UAAU,SAAS,MAAM;AACnC,MAAI,UAAU;AACZ,WAAO;AAAA;AAAA;AAAA;AAAA,EAIT;AAEA,MAAI,UAAU;AACZ,QAAI,UAAU,GAAG;AACf,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMT;AAEA,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKc,KAAK;AAAA;AAAA,EAE5B;AAEA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKgB,KAAK;AAAA;AAE9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC,kBAAkB;AAAA;AAGf,MAAM,oBAAoB,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,aAAa,CAAC;AAAA,IAKxG,CAAC,EAAE,OAAO,UAAU,SAAS,MAC7B,UAAU,KAAK,YAAY,CAAC,WACxB;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;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,OAAO,CAAC;AAAA,aAGxF,CAAC,EAAE,MAAM,MAAM,KAAK,MAAM,MAAM,IAAI,EAAE;AAAA,WACxC,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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { DSReadMoreName, DSReadMoreSlots } from './constants/index.js';\n\nexport const StyledTextWrapper = styled('span', {\n  name: DSReadMoreName,\n  slot: DSReadMoreSlots.ROOT,\n})<{\n  lines: number;\n  expanded: boolean;\n  isSafari: boolean;\n}>`\n  position: relative;\n\n  ${({ lines, isSafari, expanded }) => {\n    if (expanded) {\n      return `\n        display: block;\n        white-space: pre-wrap;\n      `;\n    }\n\n    if (isSafari) {\n      if (lines === 1) {\n        return `\n          display: flex;\n          align-items: baseline;\n          white-space: nowrap;\n        `;\n      }\n\n      return `\n        display: block;\n        white-space: pre-wrap;\n        line-height: 1.25em;\n        max-height: calc(${lines} * 1.25em);\n      `;\n    }\n\n    return `\n        display: block;\n        white-space: pre-wrap;\n        line-height: 1.25em;\n        max-height: calc(${lines} * 1.25em);\n    `;\n  }}\n\n  -webkit-hyphens: auto;\n  -moz-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n  overflow-wrap: break-word;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledTextContent = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.TEXT_CONTENT })<{\n  lines: number;\n  expanded: boolean;\n  isSafari: boolean;\n}>`\n  ${({ lines, expanded, isSafari }) =>\n    lines === 1 && isSafari && !expanded\n      ? `\n    flex: 1 1 auto;\n    overflow-x: hidden;\n    white-space: nowrap;\n    text-overflow: hidden;\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  expanded: boolean;\n}>`\n  flex: none;\n  display: -webkit-inline-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n`;\n\nexport const StyledButton = styled(DSButtonV3, { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON })<{\n  withTooltip?: boolean;\n}>`\n  padding: ${({ theme }) => `0 ${theme.space.xxxs}`};\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,oBAAoB,OAAO,QAAQ;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA,IAOG,CAAC,EAAE,OAAO,UAAU,SAAS,MAAM;AACnC,MAAI,UAAU;AACZ,WAAO;AAAA;AAAA;AAAA;AAAA,EAIT;AAEA,MAAI,UAAU;AACZ,QAAI,UAAU,GAAG;AACf,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT;AAEA,WAAO;AAAA;AAAA;AAAA;AAAA,2BAIc,KAAK;AAAA;AAAA,EAE5B;AAEA,SAAO;AAAA;AAAA;AAAA;AAAA,2BAIgB,KAAK;AAAA;AAE9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC,kBAAkB;AAAA;AAGf,MAAM,oBAAoB,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,aAAa,CAAC;AAAA,IAKxG,CAAC,EAAE,OAAO,UAAU,SAAS,MAC7B,UAAU,KAAK,YAAY,CAAC,WACxB;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;AAAA;AAAA;AAAA;AAAA;AAAA;AASzG,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,OAAO,CAAC;AAAA,aAGxF,CAAC,EAAE,MAAM,MAAM,KAAK,MAAM,MAAM,IAAI,EAAE;AAAA,WACxC,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;",
   "names": []
 }

package/dist/esm/useReadMoreTruncate.js

@@ -1,9 +1,7 @@
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import { useOnElementResize } from "./useOnElementResize.js";
-import { ScreenReaderOnly } from "./styled.js";
-import { isSafari } from "./utils.js";
+import { IS_SAFARI } from "./utils.js";
 const overflows = ({ offsetHeight, scrollHeight }) => offsetHeight + 4 < scrollHeight;
 const binSearchTextOverflow = (element, parent, content) => {
   let left = 0;
@@ -22,6 +20,23 @@ const binSearchTextOverflow = (element, parent, content) => {
   }
   element.innerText = content.slice(0, textEnd);
 };
+const checkSafariSingleLine = (textEl, wrapperEl, content) => {
+  const computed = getComputedStyle(textEl);
+  const font = `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return false;
+  ctx.font = font;
+  return ctx.measureText(content).width > wrapperEl.clientWidth;
+};
+const scheduleBinaryTruncate = (textEl, wrapperEl, content) => {
+  const run = () => requestAnimationFrame(() => binSearchTextOverflow(textEl, wrapperEl, content));
+  if ("fonts" in document && document.fonts.ready) {
+    document.fonts.ready.then(run).catch(() => setTimeout(run, 0));
+  } else {
+    setTimeout(run, 0);
+  }
+};
 const useReadMoreTruncate = ({ lines, content }) => {
   const textWrapperRef = useRef(null);
   const textRef = useRef(null);
@@ -33,54 +48,18 @@ const useReadMoreTruncate = ({ lines, content }) => {
     const wrapperEl = textWrapperRef.current;
     if (!textEl || !wrapperEl) return;
     textEl.innerText = content;
-    if (lines === 1 && isSafari()) {
-      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;
-      }
+    if (lines === 1 && IS_SAFARI) {
+      const truncated = checkSafariSingleLine(textEl, wrapperEl, content);
       setShowButton(expanded || truncated);
       return;
     }
-    const isOverflowing = overflows({
-      offsetHeight: wrapperEl.offsetHeight,
-      scrollHeight: wrapperEl.scrollHeight
-    });
+    const isOverflowing = overflows({ offsetHeight: wrapperEl.offsetHeight, scrollHeight: wrapperEl.scrollHeight });
     setShowButton(expanded || isOverflowing);
     if (!expanded && isOverflowing) {
-      const doBinaryTruncate = () => {
-        if (!textEl || !wrapperEl) return;
-        requestAnimationFrame(() => {
-          binSearchTextOverflow(textEl, wrapperEl, content);
-        });
-      };
-      if ("fonts" in document && document.fonts.ready) {
-        document.fonts.ready.then(() => {
-          doBinaryTruncate();
-        }).catch(() => {
-          setTimeout(doBinaryTruncate, 0);
-        });
-      } else {
-        setTimeout(doBinaryTruncate, 0);
-      }
+      scheduleBinaryTruncate(textEl, wrapperEl, content);
     }
   }, [lines, content, expanded, width, height]);
-  const srOnlyText = useMemo(() => /* @__PURE__ */ jsx(ScreenReaderOnly, { children: content }), [content]);
-  const textProps = useMemo(() => ({ "aria-hidden": true }), []);
-  return {
-    textWrapperRef,
-    textRef,
-    showButton,
-    expanded,
-    setExpanded,
-    textProps,
-    srOnlyText
-  };
+  return { textWrapperRef, textRef, showButton, expanded, setExpanded };
 };
 export {
   useReadMoreTruncate

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", "/* 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';\nimport { isSafari } 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  // 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 && isSafari()) {\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        requestAnimationFrame(() => {\n          binSearchTextOverflow(textEl, wrapperEl, content);\n        });\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;ACqHY;AAjHnC,SAAgB,iBAAiB,SAAS,QAAQ,gBAAgB;AAClE,SAAS,0BAA0B;AAEnC,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AAGzB,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,KAAK,SAAS,GAAG;AAC7B,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,MAAM;AAC1B,gCAAsB,QAAQ,WAAW,OAAO;AAAA,QAClD,CAAC;AAAA,MACH;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;",
+  "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;",
   "names": []
 }

package/dist/esm/utils.js

@@ -4,7 +4,9 @@ const isSafari = () => {
   const ua = navigator.userAgent;
   return /safari/i.test(ua) && !/chrome|chromium|android/i.test(ua);
 };
+const IS_SAFARI = isSafari();
 export {
+  IS_SAFARI,
   isSafari
 };
 //# sourceMappingURL=utils.js.map

package/dist/esm/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/utils.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/**\n * Detects whether the current browser is Safari (excluding Chrome/Chromium and Android browsers).\n *\n * This utility is used to apply Safari-specific layout and styling workarounds.\n * Safari has known differences and bugs around text truncation, line-clamp,\n * and layout measurements (e.g. offsetHeight/scrollHeight), which can affect\n * components that rely on precise DOM sizing.\n *\n * The check is intentionally lightweight and user-agent based, as feature\n * detection is not reliable for these Safari-specific rendering issues.\n *\n * When used inside React components, this function should be evaluated once\n * (e.g. via useMemo) to avoid layout churn and focus instability caused by\n * re-evaluating browser detection on every render.\n */\nexport const isSafari = () => {\n  if (typeof navigator === 'undefined') return false;\n\n  const ua = navigator.userAgent;\n  // Safari but not Chrome/Chromium/Android\n  return /safari/i.test(ua) && !/chrome|chromium|android/i.test(ua);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACehB,MAAM,WAAW,MAAM;AAC5B,MAAI,OAAO,cAAc,YAAa,QAAO;AAE7C,QAAM,KAAK,UAAU;AAErB,SAAO,UAAU,KAAK,EAAE,KAAK,CAAC,2BAA2B,KAAK,EAAE;AAClE;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/**\n * Detects whether the current browser is Safari (excluding Chrome/Chromium and Android browsers).\n *\n * This utility is used to apply Safari-specific layout and styling workarounds.\n * Safari has known differences and bugs around text truncation, line-clamp,\n * and layout measurements (e.g. offsetHeight/scrollHeight), which can affect\n * components that rely on precise DOM sizing.\n *\n * The check is intentionally lightweight and user-agent based, as feature\n * detection is not reliable for these Safari-specific rendering issues.\n */\nexport const isSafari = () => {\n  if (typeof navigator === 'undefined') return false;\n\n  const ua = navigator.userAgent;\n  // Safari but not Chrome/Chromium/Android\n  return /safari/i.test(ua) && !/chrome|chromium|android/i.test(ua);\n};\n\n/** Evaluated once at module load \u2014 safe for SSR (returns false when navigator is unavailable). */\nexport const IS_SAFARI = isSafari();\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACWhB,MAAM,WAAW,MAAM;AAC5B,MAAI,OAAO,cAAc,YAAa,QAAO;AAE7C,QAAM,KAAK,UAAU;AAErB,SAAO,UAAU,KAAK,EAAE,KAAK,CAAC,2BAA2B,KAAK,EAAE;AAClE;AAGO,MAAM,YAAY,SAAS;",
   "names": []
 }

package/dist/types/styled.d.ts

@@ -15,4 +15,3 @@ export declare const StyledButtonWrapper: import("styled-components").StyledComp
 export declare const StyledButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>, import("@elliemae/ds-system").Theme, {
     withTooltip?: boolean;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>>, never>;
-export declare const ScreenReaderOnly: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;

package/dist/types/useReadMoreTruncate.d.ts

@@ -1,13 +1,8 @@
-import React from 'react';
 import type { DSReadMoreT } from './react-desc-prop-types.js';
 export declare const useReadMoreTruncate: ({ lines, content }: Pick<DSReadMoreT.InternalProps, "lines" | "content">) => {
-    textWrapperRef: React.RefObject<HTMLSpanElement>;
-    textRef: React.RefObject<HTMLSpanElement>;
+    textWrapperRef: import("react").RefObject<HTMLSpanElement>;
+    textRef: import("react").RefObject<HTMLSpanElement>;
     showButton: boolean;
     expanded: boolean;
-    setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
-    textProps: {
-        'aria-hidden': boolean;
-    };
-    srOnlyText: import("react/jsx-runtime.js").JSX.Element;
+    setExpanded: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };

package/dist/types/utils.d.ts

@@ -8,9 +8,7 @@
  *
  * The check is intentionally lightweight and user-agent based, as feature
  * detection is not reliable for these Safari-specific rendering issues.
- *
- * When used inside React components, this function should be evaluated once
- * (e.g. via useMemo) to avoid layout churn and focus instability caused by
- * re-evaluating browser detection on every render.
  */
 export declare const isSafari: () => boolean;
+/** Evaluated once at module load — safe for SSR (returns false when navigator is unavailable). */
+export declare const IS_SAFARI: boolean;

package/package.json

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