@elliemae/ds-read-more 3.35.0 → 3.36.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DSReadMore.js +2 -4
- package/dist/cjs/DSReadMore.js.map +1 -1
- package/dist/cjs/styled.js.map +1 -1
- package/dist/cjs/useReadMoreTruncate.js +1 -2
- package/dist/cjs/useReadMoreTruncate.js.map +1 -1
- package/dist/esm/DSReadMore.js +2 -4
- package/dist/esm/DSReadMore.js.map +1 -1
- package/dist/esm/styled.js.map +1 -1
- package/dist/esm/useReadMoreTruncate.js +1 -2
- package/dist/esm/useReadMoreTruncate.js.map +1 -1
- package/package.json +7 -7
package/dist/cjs/DSReadMore.js
CHANGED
|
@@ -51,10 +51,8 @@ const DSReadMore = (props) => {
|
|
|
51
51
|
const toggleExpanded = (0, import_react.useCallback)(
|
|
52
52
|
(newExpanded) => {
|
|
53
53
|
setExpanded(newExpanded);
|
|
54
|
-
if (newExpanded)
|
|
55
|
-
|
|
56
|
-
else
|
|
57
|
-
onLess();
|
|
54
|
+
if (newExpanded) onMore();
|
|
55
|
+
else onLess();
|
|
58
56
|
},
|
|
59
57
|
[onMore, onLess, setExpanded]
|
|
60
58
|
);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSReadMore.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useCallback } from 'react';\nimport { describe, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { MoreLessButton } from './MoreLessButton.js';\nimport { type DSReadMoreT, DSReadMorePropTypesSchema, defaultProps } from './react-desc-prop-types.js';\nimport { StyledTextWrapper, StyledTextContent, StyledTooltipWrapper } from './styled.js';\nimport { useReadMoreTruncate } from './useReadMoreTruncate.js';\nimport { DSReadMoreDataTestIds, DSReadMoreName } from './DSReadMoreDefinitions.js';\n\nconst DSReadMore = (props: DSReadMoreT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSReadMoreT.InternalProps>(props, defaultProps);\n const { lines, more, less, content, withTooltip, ellipsis, onMore, onLess } = propsWithDefault;\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n const { textWrapperRef, textRef, showButton, expanded, setExpanded, textProps, srOnlyText } =\n useReadMoreTruncate(propsWithDefault);\n\n const toggleExpanded = useCallback(\n (newExpanded: boolean) => {\n setExpanded(newExpanded);\n if (newExpanded) onMore();\n else onLess();\n },\n [onMore, onLess, setExpanded],\n );\n\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n return (\n <StyledTextWrapper\n innerRef={textWrapperRef}\n lines={lines}\n expanded={expanded}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n {...xstyledProps}\n >\n {srOnlyText}\n <StyledTextContent\n innerRef={textRef}\n data-testid=\"ds-read_more-text\"\n {...textProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {content}\n </StyledTextContent>\n {showButton && !withTooltip && (\n <MoreLessButton\n expanded={expanded}\n label={expanded ? less : more}\n onClick={() => toggleExpanded(!expanded)}\n ariaLabel={expanded ? 'Read less' : 'Read more'}\n ellipsis={ellipsis}\n dataTestId={DSReadMoreDataTestIds.READ_MORE_BUTTON}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n {withTooltip && showButton && (\n <StyledTooltipWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <DSTooltipV3 text={content} wrapWords>\n <MoreLessButton\n expanded={expanded}\n label=\"...\"\n ariaLabel={expanded ? 'Read less' : 'Read more'}\n ellipsis={ellipsis}\n withTooltip={withTooltip}\n dataTestId={DSReadMoreDataTestIds.READ_MORE_TOOLTIP_BUTTON}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </DSTooltipV3>\n </StyledTooltipWrapper>\n )}\n </StyledTextWrapper>\n );\n};\n\nDSReadMore.displayName = DSReadMoreName;\n\nconst DSReadMoreWithSchema = describe(DSReadMore);\n\nDSReadMoreWithSchema.propTypes = DSReadMorePropTypesSchema;\n\nexport { DSReadMore, DSReadMoreWithSchema };\nexport default DSReadMore;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BnB;AA/BJ,mBAAmC;AACnC,8BAA2E;AAC3E,wBAA4B;AAC5B,4BAA+B;AAC/B,mCAA0E;AAC1E,oBAA2E;AAC3E,iCAAoC;AACpC,mCAAsD;AAEtD,MAAM,aAAa,CAAC,UAA6B;AAC/C,QAAM,uBAAmB,sDAAwD,OAAO,yCAAY;AACpG,QAAM,EAAE,OAAO,MAAM,MAAM,SAAS,aAAa,UAAU,QAAQ,OAAO,IAAI;AAE9E,QAAM,mBAAe,4CAAmB,gBAAgB;AAExD,QAAM,EAAE,gBAAgB,SAAS,YAAY,UAAU,aAAa,WAAW,WAAW,QACxF,gDAAoB,gBAAgB;AAEtC,QAAM,qBAAiB;AAAA,IACrB,CAAC,gBAAyB;AACxB,kBAAY,WAAW;AACvB,UAAI
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BnB;AA/BJ,mBAAmC;AACnC,8BAA2E;AAC3E,wBAA4B;AAC5B,4BAA+B;AAC/B,mCAA0E;AAC1E,oBAA2E;AAC3E,iCAAoC;AACpC,mCAAsD;AAEtD,MAAM,aAAa,CAAC,UAA6B;AAC/C,QAAM,uBAAmB,sDAAwD,OAAO,yCAAY;AACpG,QAAM,EAAE,OAAO,MAAM,MAAM,SAAS,aAAa,UAAU,QAAQ,OAAO,IAAI;AAE9E,QAAM,mBAAe,4CAAmB,gBAAgB;AAExD,QAAM,EAAE,gBAAgB,SAAS,YAAY,UAAU,aAAa,WAAW,WAAW,QACxF,gDAAoB,gBAAgB;AAEtC,QAAM,qBAAiB;AAAA,IACrB,CAAC,gBAAyB;AACxB,kBAAY,WAAW;AACvB,UAAI,YAAa,QAAO;AAAA,UACnB,QAAO;AAAA,IACd;AAAA,IACA,CAAC,QAAQ,QAAQ,WAAW;AAAA,EAC9B;AAEA,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAC5E,QAAM,6BAAyB,0BAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAY;AAAA,YACX,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,cAAc,CAAC,eACd;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO,WAAW,OAAO;AAAA,YACzB,SAAS,MAAM,eAAe,CAAC,QAAQ;AAAA,YACvC,WAAW,WAAW,cAAc;AAAA,YACpC;AAAA,YACA,YAAY,mDAAsB;AAAA,YAClC;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QAED,eAAe,cACd,4CAAC,sCAAqB,eAA8B,wBAClD,sDAAC,iCAAY,MAAM,SAAS,WAAS,MACnC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAM;AAAA,YACN,WAAW,WAAW,cAAc;AAAA,YACpC;AAAA,YACA;AAAA,YACA,YAAY,mDAAsB;AAAA,YAClC;AAAA,YACA;AAAA;AAAA,QACF,GACF,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,WAAW,cAAc;AAEzB,MAAM,2BAAuB,kCAAS,UAAU;AAEhD,qBAAqB,YAAY;AAGjC,IAAO,qBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSReadMoreName, DSReadMoreSlots } from './DSReadMoreDefinitions.js';\n\nexport const StyledTextWrapper = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.ROOT })<{\n lines: number;\n expanded: boolean;\n}>`\n position: relative;\n display: -webkit-box;\n -webkit-line-clamp: ${({ lines, expanded }) => (expanded ? 'unset' : lines)};\n -webkit-box-orient: vertical;\n -webkit-hyphens: auto;\n -moz-hyphens: auto;\n -ms-hyphens: auto;\n hyphens: auto;\n word-break: break-all;\n ${xStyledCommonProps}\n`;\n\nexport const StyledTextContent = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.TEXT_CONTENT })``;\n\nexport const StyledTooltipWrapper = styled('div', { name: DSReadMoreName, slot: DSReadMoreSlots.TOOLTIP_WRAPPER })`\n display: inline-block;\n`;\n\nexport const StyledButtonWrapper = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON_WRAPPER })``;\n\nexport const StyledButton = styled(DSButtonV2, { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON })<{\n withTooltip?: boolean;\n}>`\n padding: 0;\n color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n border: 0;\n margin: 0;\n font-size: 12px;\n min-width: 0px;\n height: auto;\n text-transform: unset;\n &:hover:not([disabled]) {\n color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n background-color: transparent;\n text-decoration: ${({ withTooltip }) => (withTooltip ? '' : 'underline')};\n }\n`;\n\nexport const ScreenReaderOnly = styled.span`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 100%;\n overflow: hidden;\n position: absolute;\n width: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,0BAA2B;AAC3B,mCAAgD;AAEzC,MAAM,wBAAoB,yBAAO,QAAQ,EAAE,MAAM,6CAAgB,MAAM,6CAAgB,KAAK,CAAC;AAAA;AAAA;AAAA,wBAM5E,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,0BAA2B;AAC3B,mCAAgD;AAEzC,MAAM,wBAAoB,yBAAO,QAAQ,EAAE,MAAM,6CAAgB,MAAM,6CAAgB,KAAK,CAAC;AAAA;AAAA;AAAA,wBAM5E,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,UAAU,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOzE,mCAAkB;AAAA;AAGf,MAAM,wBAAoB,yBAAO,QAAQ,EAAE,MAAM,6CAAgB,MAAM,6CAAgB,aAAa,CAAC;AAErG,MAAM,2BAAuB,yBAAO,OAAO,EAAE,MAAM,6CAAgB,MAAM,6CAAgB,gBAAgB,CAAC;AAAA;AAAA;AAI1G,MAAM,0BAAsB,yBAAO,QAAQ,EAAE,MAAM,6CAAgB,MAAM,6CAAgB,eAAe,CAAC;AAEzG,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,6CAAgB,MAAM,6CAAgB,OAAO,CAAC;AAAA;AAAA,WAI1F,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM,KAAK,CAAC,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQpF,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM,KAAK,CAAC,EAAG;AAAA;AAAA,uBAE5E,CAAC,EAAE,YAAY,MAAO,cAAc,KAAK,WAAY;AAAA;AAAA;AAIrE,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -45,8 +45,7 @@ const binSearchTextOverflow = (element, parent, content) => {
|
|
|
45
45
|
while (left <= right) {
|
|
46
46
|
const middle = (left + right) / 2;
|
|
47
47
|
element.innerText = content.slice(0, middle);
|
|
48
|
-
if (overflows(parent))
|
|
49
|
-
right = middle - 1;
|
|
48
|
+
if (overflows(parent)) right = middle - 1;
|
|
50
49
|
else {
|
|
51
50
|
left = middle + 1;
|
|
52
51
|
textEnd = middle;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/useReadMoreTruncate.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport type { DSReadMoreT } from './react-desc-prop-types.js';\nimport { ScreenReaderOnly } from './styled.js';\n\n// offsetHeight + 2 takes into consideration any size of the button\nconst overflows = ({ offsetHeight, scrollHeight }: { offsetHeight: number; scrollHeight: number }) =>\n offsetHeight + 2 < scrollHeight;\n\n// Searchs the optimum cut on the text to have the button in the same line\nconst binSearchTextOverflow = (element: HTMLElement, parent: HTMLElement, content: string) => {\n const text = element.innerText;\n let left = 1;\n let right = text.length;\n let textEnd = 0;\n while (left <= right) {\n const middle = (left + right) / 2;\n element.innerText = content.slice(0, middle);\n if (overflows(parent)) right = middle - 1;\n else {\n left = middle + 1;\n textEnd = middle;\n }\n }\n element.innerText = content.slice(0, textEnd);\n};\n\nexport const useReadMoreTruncate = ({ lines, content }: Pick<DSReadMoreT.InternalProps, 'lines' | 'content'>) => {\n const textWrapperRef = useRef<HTMLSpanElement>(null);\n const textRef = useRef<HTMLSpanElement>(null);\n\n const [expanded, setExpanded] = useState(false);\n\n const [showButton, setShowButton] = useState(false);\n\n // We need to re-run the effect when the size of the container changes\n const { width, height } = useOnElementResize(textWrapperRef);\n\n useLayoutEffect(() => {\n const textElement = textRef.current;\n const parentElement = textWrapperRef.current;\n if (parentElement && textElement) {\n textElement.innerText = content;\n setShowButton(expanded || overflows(parentElement));\n if (!expanded && overflows(parentElement)) {\n binSearchTextOverflow(textElement, parentElement, content);\n }\n }\n }, [lines, content, expanded, width, height]);\n\n const srOnlyText = useMemo(() => <ScreenReaderOnly>{content}</ScreenReaderOnly>, [content]);\n\n const textProps = useMemo(\n () => ({\n 'aria-hidden': true,\n }),\n [],\n );\n\n return {\n textWrapperRef,\n textRef,\n showButton,\n expanded,\n setExpanded,\n textProps,\n srOnlyText,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkDY;AAlDnC,mBAAkE;AAClE,0BAAmC;AAEnC,oBAAiC;AAGjC,MAAM,YAAY,CAAC,EAAE,cAAc,aAAa,MAC9C,eAAe,IAAI;AAGrB,MAAM,wBAAwB,CAAC,SAAsB,QAAqB,YAAoB;AAC5F,QAAM,OAAO,QAAQ;AACrB,MAAI,OAAO;AACX,MAAI,QAAQ,KAAK;AACjB,MAAI,UAAU;AACd,SAAO,QAAQ,OAAO;AACpB,UAAM,UAAU,OAAO,SAAS;AAChC,YAAQ,YAAY,QAAQ,MAAM,GAAG,MAAM;AAC3C,QAAI,UAAU,MAAM
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkDY;AAlDnC,mBAAkE;AAClE,0BAAmC;AAEnC,oBAAiC;AAGjC,MAAM,YAAY,CAAC,EAAE,cAAc,aAAa,MAC9C,eAAe,IAAI;AAGrB,MAAM,wBAAwB,CAAC,SAAsB,QAAqB,YAAoB;AAC5F,QAAM,OAAO,QAAQ;AACrB,MAAI,OAAO;AACX,MAAI,QAAQ,KAAK;AACjB,MAAI,UAAU;AACd,SAAO,QAAQ,OAAO;AACpB,UAAM,UAAU,OAAO,SAAS;AAChC,YAAQ,YAAY,QAAQ,MAAM,GAAG,MAAM;AAC3C,QAAI,UAAU,MAAM,EAAG,SAAQ,SAAS;AAAA,SACnC;AACH,aAAO,SAAS;AAChB,gBAAU;AAAA,IACZ;AAAA,EACF;AACA,UAAQ,YAAY,QAAQ,MAAM,GAAG,OAAO;AAC9C;AAEO,MAAM,sBAAsB,CAAC,EAAE,OAAO,QAAQ,MAA4D;AAC/G,QAAM,qBAAiB,qBAAwB,IAAI;AACnD,QAAM,cAAU,qBAAwB,IAAI;AAE5C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAE9C,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAGlD,QAAM,EAAE,OAAO,OAAO,QAAI,wCAAmB,cAAc;AAE3D,oCAAgB,MAAM;AACpB,UAAM,cAAc,QAAQ;AAC5B,UAAM,gBAAgB,eAAe;AACrC,QAAI,iBAAiB,aAAa;AAChC,kBAAY,YAAY;AACxB,oBAAc,YAAY,UAAU,aAAa,CAAC;AAClD,UAAI,CAAC,YAAY,UAAU,aAAa,GAAG;AACzC,8BAAsB,aAAa,eAAe,OAAO;AAAA,MAC3D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,UAAU,OAAO,MAAM,CAAC;AAE5C,QAAM,iBAAa,sBAAQ,MAAM,4CAAC,kCAAkB,mBAAQ,GAAqB,CAAC,OAAO,CAAC;AAE1F,QAAM,gBAAY;AAAA,IAChB,OAAO;AAAA,MACL,eAAe;AAAA,IACjB;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSReadMore.js
CHANGED
|
@@ -16,10 +16,8 @@ const DSReadMore = (props) => {
|
|
|
16
16
|
const toggleExpanded = useCallback(
|
|
17
17
|
(newExpanded) => {
|
|
18
18
|
setExpanded(newExpanded);
|
|
19
|
-
if (newExpanded)
|
|
20
|
-
|
|
21
|
-
else
|
|
22
|
-
onLess();
|
|
19
|
+
if (newExpanded) onMore();
|
|
20
|
+
else onLess();
|
|
23
21
|
},
|
|
24
22
|
[onMore, onLess, setExpanded]
|
|
25
23
|
);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSReadMore.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { describe, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { MoreLessButton } from './MoreLessButton.js';\nimport { type DSReadMoreT, DSReadMorePropTypesSchema, defaultProps } from './react-desc-prop-types.js';\nimport { StyledTextWrapper, StyledTextContent, StyledTooltipWrapper } from './styled.js';\nimport { useReadMoreTruncate } from './useReadMoreTruncate.js';\nimport { DSReadMoreDataTestIds, DSReadMoreName } from './DSReadMoreDefinitions.js';\n\nconst DSReadMore = (props: DSReadMoreT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSReadMoreT.InternalProps>(props, defaultProps);\n const { lines, more, less, content, withTooltip, ellipsis, onMore, onLess } = propsWithDefault;\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n const { textWrapperRef, textRef, showButton, expanded, setExpanded, textProps, srOnlyText } =\n useReadMoreTruncate(propsWithDefault);\n\n const toggleExpanded = useCallback(\n (newExpanded: boolean) => {\n setExpanded(newExpanded);\n if (newExpanded) onMore();\n else onLess();\n },\n [onMore, onLess, setExpanded],\n );\n\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n return (\n <StyledTextWrapper\n innerRef={textWrapperRef}\n lines={lines}\n expanded={expanded}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n {...xstyledProps}\n >\n {srOnlyText}\n <StyledTextContent\n innerRef={textRef}\n data-testid=\"ds-read_more-text\"\n {...textProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {content}\n </StyledTextContent>\n {showButton && !withTooltip && (\n <MoreLessButton\n expanded={expanded}\n label={expanded ? less : more}\n onClick={() => toggleExpanded(!expanded)}\n ariaLabel={expanded ? 'Read less' : 'Read more'}\n ellipsis={ellipsis}\n dataTestId={DSReadMoreDataTestIds.READ_MORE_BUTTON}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n {withTooltip && showButton && (\n <StyledTooltipWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <DSTooltipV3 text={content} wrapWords>\n <MoreLessButton\n expanded={expanded}\n label=\"...\"\n ariaLabel={expanded ? 'Read less' : 'Read more'}\n ellipsis={ellipsis}\n withTooltip={withTooltip}\n dataTestId={DSReadMoreDataTestIds.READ_MORE_TOOLTIP_BUTTON}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </DSTooltipV3>\n </StyledTooltipWrapper>\n )}\n </StyledTextWrapper>\n );\n};\n\nDSReadMore.displayName = DSReadMoreName;\n\nconst DSReadMoreWithSchema = describe(DSReadMore);\n\nDSReadMoreWithSchema.propTypes = DSReadMorePropTypesSchema;\n\nexport { DSReadMore, DSReadMoreWithSchema };\nexport default DSReadMore;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC+BnB,SASE,KATF;AA/BJ,SAAgB,mBAAmB;AACnC,SAAS,UAAU,oBAAoB,oCAAoC;AAC3E,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAA2B,2BAA2B,oBAAoB;AAC1E,SAAS,mBAAmB,mBAAmB,4BAA4B;AAC3E,SAAS,2BAA2B;AACpC,SAAS,uBAAuB,sBAAsB;AAEtD,MAAM,aAAa,CAAC,UAA6B;AAC/C,QAAM,mBAAmB,6BAAwD,OAAO,YAAY;AACpG,QAAM,EAAE,OAAO,MAAM,MAAM,SAAS,aAAa,UAAU,QAAQ,OAAO,IAAI;AAE9E,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,EAAE,gBAAgB,SAAS,YAAY,UAAU,aAAa,WAAW,WAAW,IACxF,oBAAoB,gBAAgB;AAEtC,QAAM,iBAAiB;AAAA,IACrB,CAAC,gBAAyB;AACxB,kBAAY,WAAW;AACvB,UAAI
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+BnB,SASE,KATF;AA/BJ,SAAgB,mBAAmB;AACnC,SAAS,UAAU,oBAAoB,oCAAoC;AAC3E,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAA2B,2BAA2B,oBAAoB;AAC1E,SAAS,mBAAmB,mBAAmB,4BAA4B;AAC3E,SAAS,2BAA2B;AACpC,SAAS,uBAAuB,sBAAsB;AAEtD,MAAM,aAAa,CAAC,UAA6B;AAC/C,QAAM,mBAAmB,6BAAwD,OAAO,YAAY;AACpG,QAAM,EAAE,OAAO,MAAM,MAAM,SAAS,aAAa,UAAU,QAAQ,OAAO,IAAI;AAE9E,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,EAAE,gBAAgB,SAAS,YAAY,UAAU,aAAa,WAAW,WAAW,IACxF,oBAAoB,gBAAgB;AAEtC,QAAM,iBAAiB;AAAA,IACrB,CAAC,gBAAyB;AACxB,kBAAY,WAAW;AACvB,UAAI,YAAa,QAAO;AAAA,UACnB,QAAO;AAAA,IACd;AAAA,IACA,CAAC,QAAQ,QAAQ,WAAW;AAAA,EAC9B;AAEA,QAAM,gBAAgB,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAC5E,QAAM,yBAAyB,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,eAAY;AAAA,YACX,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,cAAc,CAAC,eACd;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO,WAAW,OAAO;AAAA,YACzB,SAAS,MAAM,eAAe,CAAC,QAAQ;AAAA,YACvC,WAAW,WAAW,cAAc;AAAA,YACpC;AAAA,YACA,YAAY,sBAAsB;AAAA,YAClC;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QAED,eAAe,cACd,oBAAC,wBAAqB,eAA8B,wBAClD,8BAAC,eAAY,MAAM,SAAS,WAAS,MACnC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAM;AAAA,YACN,WAAW,WAAW,cAAc;AAAA,YACpC;AAAA,YACA;AAAA,YACA,YAAY,sBAAsB;AAAA,YAClC;AAAA,YACA;AAAA;AAAA,QACF,GACF,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,WAAW,cAAc;AAEzB,MAAM,uBAAuB,SAAS,UAAU;AAEhD,qBAAqB,YAAY;AAGjC,IAAO,qBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSReadMoreName, DSReadMoreSlots } from './DSReadMoreDefinitions.js';\n\nexport const StyledTextWrapper = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.ROOT })<{\n lines: number;\n expanded: boolean;\n}>`\n position: relative;\n display: -webkit-box;\n -webkit-line-clamp: ${({ lines, expanded }) => (expanded ? 'unset' : lines)};\n -webkit-box-orient: vertical;\n -webkit-hyphens: auto;\n -moz-hyphens: auto;\n -ms-hyphens: auto;\n hyphens: auto;\n word-break: break-all;\n ${xStyledCommonProps}\n`;\n\nexport const StyledTextContent = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.TEXT_CONTENT })``;\n\nexport const StyledTooltipWrapper = styled('div', { name: DSReadMoreName, slot: DSReadMoreSlots.TOOLTIP_WRAPPER })`\n display: inline-block;\n`;\n\nexport const StyledButtonWrapper = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON_WRAPPER })``;\n\nexport const StyledButton = styled(DSButtonV2, { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON })<{\n withTooltip?: boolean;\n}>`\n padding: 0;\n color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n border: 0;\n margin: 0;\n font-size: 12px;\n min-width: 0px;\n height: auto;\n text-transform: unset;\n &:hover:not([disabled]) {\n color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n background-color: transparent;\n text-decoration: ${({ withTooltip }) => (withTooltip ? '' : 'underline')};\n }\n`;\n\nexport const ScreenReaderOnly = styled.span`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 100%;\n overflow: hidden;\n position: absolute;\n width: 100%;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,oBAAoB,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,KAAK,CAAC;AAAA;AAAA;AAAA,wBAM5E,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,oBAAoB,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,KAAK,CAAC;AAAA;AAAA;AAAA,wBAM5E,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,UAAU,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOzE,kBAAkB;AAAA;AAGf,MAAM,oBAAoB,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,aAAa,CAAC;AAErG,MAAM,uBAAuB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,gBAAgB,CAAC;AAAA;AAAA;AAI1G,MAAM,sBAAsB,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,eAAe,CAAC;AAEzG,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,OAAO,CAAC;AAAA;AAAA,WAI1F,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM,KAAK,CAAC,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQpF,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM,KAAK,CAAC,EAAG;AAAA;AAAA,uBAE5E,CAAC,EAAE,YAAY,MAAO,cAAc,KAAK,WAAY;AAAA;AAAA;AAIrE,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -12,8 +12,7 @@ const binSearchTextOverflow = (element, parent, content) => {
|
|
|
12
12
|
while (left <= right) {
|
|
13
13
|
const middle = (left + right) / 2;
|
|
14
14
|
element.innerText = content.slice(0, middle);
|
|
15
|
-
if (overflows(parent))
|
|
16
|
-
right = middle - 1;
|
|
15
|
+
if (overflows(parent)) right = middle - 1;
|
|
17
16
|
else {
|
|
18
17
|
left = middle + 1;
|
|
19
18
|
textEnd = middle;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/useReadMoreTruncate.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport type { DSReadMoreT } from './react-desc-prop-types.js';\nimport { ScreenReaderOnly } from './styled.js';\n\n// offsetHeight + 2 takes into consideration any size of the button\nconst overflows = ({ offsetHeight, scrollHeight }: { offsetHeight: number; scrollHeight: number }) =>\n offsetHeight + 2 < scrollHeight;\n\n// Searchs the optimum cut on the text to have the button in the same line\nconst binSearchTextOverflow = (element: HTMLElement, parent: HTMLElement, content: string) => {\n const text = element.innerText;\n let left = 1;\n let right = text.length;\n let textEnd = 0;\n while (left <= right) {\n const middle = (left + right) / 2;\n element.innerText = content.slice(0, middle);\n if (overflows(parent)) right = middle - 1;\n else {\n left = middle + 1;\n textEnd = middle;\n }\n }\n element.innerText = content.slice(0, textEnd);\n};\n\nexport const useReadMoreTruncate = ({ lines, content }: Pick<DSReadMoreT.InternalProps, 'lines' | 'content'>) => {\n const textWrapperRef = useRef<HTMLSpanElement>(null);\n const textRef = useRef<HTMLSpanElement>(null);\n\n const [expanded, setExpanded] = useState(false);\n\n const [showButton, setShowButton] = useState(false);\n\n // We need to re-run the effect when the size of the container changes\n const { width, height } = useOnElementResize(textWrapperRef);\n\n useLayoutEffect(() => {\n const textElement = textRef.current;\n const parentElement = textWrapperRef.current;\n if (parentElement && textElement) {\n textElement.innerText = content;\n setShowButton(expanded || overflows(parentElement));\n if (!expanded && overflows(parentElement)) {\n binSearchTextOverflow(textElement, parentElement, content);\n }\n }\n }, [lines, content, expanded, width, height]);\n\n const srOnlyText = useMemo(() => <ScreenReaderOnly>{content}</ScreenReaderOnly>, [content]);\n\n const textProps = useMemo(\n () => ({\n 'aria-hidden': true,\n }),\n [],\n );\n\n return {\n textWrapperRef,\n textRef,\n showButton,\n expanded,\n setExpanded,\n textProps,\n srOnlyText,\n };\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACkDY;AAlDnC,SAAgB,iBAAiB,SAAS,QAAQ,gBAAgB;AAClE,SAAS,0BAA0B;AAEnC,SAAS,wBAAwB;AAGjC,MAAM,YAAY,CAAC,EAAE,cAAc,aAAa,MAC9C,eAAe,IAAI;AAGrB,MAAM,wBAAwB,CAAC,SAAsB,QAAqB,YAAoB;AAC5F,QAAM,OAAO,QAAQ;AACrB,MAAI,OAAO;AACX,MAAI,QAAQ,KAAK;AACjB,MAAI,UAAU;AACd,SAAO,QAAQ,OAAO;AACpB,UAAM,UAAU,OAAO,SAAS;AAChC,YAAQ,YAAY,QAAQ,MAAM,GAAG,MAAM;AAC3C,QAAI,UAAU,MAAM
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkDY;AAlDnC,SAAgB,iBAAiB,SAAS,QAAQ,gBAAgB;AAClE,SAAS,0BAA0B;AAEnC,SAAS,wBAAwB;AAGjC,MAAM,YAAY,CAAC,EAAE,cAAc,aAAa,MAC9C,eAAe,IAAI;AAGrB,MAAM,wBAAwB,CAAC,SAAsB,QAAqB,YAAoB;AAC5F,QAAM,OAAO,QAAQ;AACrB,MAAI,OAAO;AACX,MAAI,QAAQ,KAAK;AACjB,MAAI,UAAU;AACd,SAAO,QAAQ,OAAO;AACpB,UAAM,UAAU,OAAO,SAAS;AAChC,YAAQ,YAAY,QAAQ,MAAM,GAAG,MAAM;AAC3C,QAAI,UAAU,MAAM,EAAG,SAAQ,SAAS;AAAA,SACnC;AACH,aAAO,SAAS;AAChB,gBAAU;AAAA,IACZ;AAAA,EACF;AACA,UAAQ,YAAY,QAAQ,MAAM,GAAG,OAAO;AAC9C;AAEO,MAAM,sBAAsB,CAAC,EAAE,OAAO,QAAQ,MAA4D;AAC/G,QAAM,iBAAiB,OAAwB,IAAI;AACnD,QAAM,UAAU,OAAwB,IAAI;AAE5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAGlD,QAAM,EAAE,OAAO,OAAO,IAAI,mBAAmB,cAAc;AAE3D,kBAAgB,MAAM;AACpB,UAAM,cAAc,QAAQ;AAC5B,UAAM,gBAAgB,eAAe;AACrC,QAAI,iBAAiB,aAAa;AAChC,kBAAY,YAAY;AACxB,oBAAc,YAAY,UAAU,aAAa,CAAC;AAClD,UAAI,CAAC,YAAY,UAAU,aAAa,GAAG;AACzC,8BAAsB,aAAa,eAAe,OAAO;AAAA,MAC3D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,UAAU,OAAO,MAAM,CAAC;AAE5C,QAAM,aAAa,QAAQ,MAAM,oBAAC,oBAAkB,mBAAQ,GAAqB,CAAC,OAAO,CAAC;AAE1F,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,MACL,eAAe;AAAA,IACjB;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-read-more",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.36.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Read More",
|
|
6
6
|
"files": [
|
|
@@ -44,16 +44,16 @@
|
|
|
44
44
|
"indent": 4
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-tooltip": "3.
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-utilities": "3.
|
|
47
|
+
"@elliemae/ds-button-v2": "3.36.0-next.1",
|
|
48
|
+
"@elliemae/ds-props-helpers": "3.36.0-next.1",
|
|
49
|
+
"@elliemae/ds-tooltip": "3.36.0-next.1",
|
|
50
|
+
"@elliemae/ds-system": "3.36.0-next.1",
|
|
51
|
+
"@elliemae/ds-utilities": "3.36.0-next.1"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
55
55
|
"styled-components": "~5.3.9",
|
|
56
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
56
|
+
"@elliemae/ds-monorepo-devops": "3.36.0-next.1"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"lodash": "~4.17.5",
|