@powered-by-array/ui 1.76.0 → 1.77.0
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/components/DescriptionCard/DescriptionCard.js +6 -1
- package/dist/components/DescriptionCard/DescriptionCard.js.map +1 -1
- package/dist/components/DescriptionCard/DescriptionCard.variants.d.ts +1 -2
- package/dist/components/DescriptionCard/DescriptionCard.variants.d.ts.map +1 -1
- package/dist/components/DescriptionCard/DescriptionCard.variants.js +1 -2
- package/dist/components/DescriptionCard/DescriptionCard.variants.js.map +1 -1
- package/package.json +1 -1
|
@@ -17,11 +17,16 @@ export function DescriptionCard(props) {
|
|
|
17
17
|
* component or the skeleton (two distinct component types), so toggling
|
|
18
18
|
* `loading` mounts/unmounts rather than changing the hook count of one render.
|
|
19
19
|
*/
|
|
20
|
+
const COLLAPSED_CHARACTER_LIMIT = 400;
|
|
20
21
|
function DescriptionCardContent({ label = "Description", description, expanded, defaultExpanded = false, onExpandedChange, onEdit, ref, ...rest }) {
|
|
21
22
|
const [uncontrolledExpanded, setUncontrolledExpanded] = React.useState(defaultExpanded);
|
|
22
23
|
const isControlled = expanded !== undefined;
|
|
23
24
|
const isExpanded = isControlled ? expanded : uncontrolledExpanded;
|
|
24
25
|
const characterCount = description.length;
|
|
26
|
+
const isTruncatable = characterCount > COLLAPSED_CHARACTER_LIMIT;
|
|
27
|
+
const visibleDescription = isTruncatable && !isExpanded
|
|
28
|
+
? `${description.slice(0, COLLAPSED_CHARACTER_LIMIT)}…`
|
|
29
|
+
: description;
|
|
25
30
|
const toggleExpanded = () => {
|
|
26
31
|
const next = !isExpanded;
|
|
27
32
|
if (!isControlled) {
|
|
@@ -29,6 +34,6 @@ function DescriptionCardContent({ label = "Description", description, expanded,
|
|
|
29
34
|
}
|
|
30
35
|
onExpandedChange?.(next);
|
|
31
36
|
};
|
|
32
|
-
return (_jsx(CardContainer, { variant: "outline", asChild: true, children: _jsxs("section", { ref: ref, "data-slot": "description-card", "data-state": isExpanded ? "expanded" : "collapsed", className: cn(descriptionCardVariants.root), ...rest, children: [_jsxs("div", { "data-slot": "description-card-header", className: cn(descriptionCardVariants.header), children: [_jsx("span", { "data-slot": "description-card-label", className: cn(descriptionCardVariants.label), children: label }), onEdit ? (_jsx("button", { type: "button", "data-slot": "description-card-edit", className: cn(descriptionCardVariants.edit), onClick: onEdit, children: "Edit" })) : null] }), _jsx("p", { "data-slot": "description-card-body", className: cn(descriptionCardVariants.body
|
|
37
|
+
return (_jsx(CardContainer, { variant: "outline", asChild: true, children: _jsxs("section", { ref: ref, "data-slot": "description-card", "data-state": isExpanded ? "expanded" : "collapsed", className: cn(descriptionCardVariants.root), ...rest, children: [_jsxs("div", { "data-slot": "description-card-header", className: cn(descriptionCardVariants.header), children: [_jsx("span", { "data-slot": "description-card-label", className: cn(descriptionCardVariants.label), children: label }), onEdit ? (_jsx("button", { type: "button", "data-slot": "description-card-edit", className: cn(descriptionCardVariants.edit), onClick: onEdit, children: "Edit" })) : null] }), _jsx("p", { "data-slot": "description-card-body", className: cn(descriptionCardVariants.body), children: visibleDescription }), isTruncatable ? (_jsxs("div", { "data-slot": "description-card-footer", className: cn(descriptionCardVariants.footer), children: [_jsx("button", { type: "button", "data-slot": "description-card-toggle", "aria-expanded": isExpanded, className: cn(descriptionCardVariants.toggle), onClick: toggleExpanded, children: isExpanded ? "View less" : "View more" }), _jsx("span", { "aria-hidden": "true", "data-slot": "description-card-separator", className: cn(descriptionCardVariants.separator), children: "\u00B7" }), _jsxs("span", { "data-slot": "description-card-count", className: cn(descriptionCardVariants.count), children: [characterCount, " characters"] })] })) : null] }) }));
|
|
33
38
|
}
|
|
34
39
|
//# sourceMappingURL=DescriptionCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DescriptionCard.js","sourceRoot":"","sources":["../../../src/components/DescriptionCard/DescriptionCard.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAMxE,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,OAAO,KAAC,uBAAuB,KAAG,CAAC;IACrC,CAAC;IAED,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC7C,OAAO,KAAC,sBAAsB,OAAK,IAAI,GAAI,CAAC;AAC9C,CAAC;AAED;;;;;GAKG;AACH,SAAS,sBAAsB,CAAC,EAC9B,KAAK,GAAG,aAAa,EACrB,WAAW,EACX,QAAQ,EACR,eAAe,GAAG,KAAK,EACvB,gBAAgB,EAChB,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACqB;IAC5B,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GACnD,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;IAClC,MAAM,YAAY,GAAG,QAAQ,KAAK,SAAS,CAAC;IAC5C,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC;IAClE,MAAM,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"DescriptionCard.js","sourceRoot":"","sources":["../../../src/components/DescriptionCard/DescriptionCard.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAMxE,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,OAAO,KAAC,uBAAuB,KAAG,CAAC;IACrC,CAAC;IAED,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC7C,OAAO,KAAC,sBAAsB,OAAK,IAAI,GAAI,CAAC;AAC9C,CAAC;AAED;;;;;GAKG;AACH,MAAM,yBAAyB,GAAG,GAAG,CAAC;AAEtC,SAAS,sBAAsB,CAAC,EAC9B,KAAK,GAAG,aAAa,EACrB,WAAW,EACX,QAAQ,EACR,eAAe,GAAG,KAAK,EACvB,gBAAgB,EAChB,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACqB;IAC5B,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GACnD,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;IAClC,MAAM,YAAY,GAAG,QAAQ,KAAK,SAAS,CAAC;IAC5C,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC;IAClE,MAAM,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC;IAC1C,MAAM,aAAa,GAAG,cAAc,GAAG,yBAAyB,CAAC;IACjE,MAAM,kBAAkB,GACtB,aAAa,IAAI,CAAC,UAAU;QAC1B,CAAC,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,yBAAyB,CAAC,GAAG;QACvD,CAAC,CAAC,WAAW,CAAC;IAElB,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,MAAM,IAAI,GAAG,CAAC,UAAU,CAAC;QACzB,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC;QACD,gBAAgB,EAAE,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,kBACtC,mBACE,GAAG,EAAE,GAAG,eACE,kBAAkB,gBAChB,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,EACjD,SAAS,EAAE,EAAE,CAAC,uBAAuB,CAAC,IAAI,CAAC,KACvC,IAAI,aAER,4BACY,yBAAyB,EACnC,SAAS,EAAE,EAAE,CAAC,uBAAuB,CAAC,MAAM,CAAC,aAE7C,4BACY,wBAAwB,EAClC,SAAS,EAAE,EAAE,CAAC,uBAAuB,CAAC,KAAK,CAAC,YAE3C,KAAK,GACD,EACN,MAAM,CAAC,CAAC,CAAC,CACR,iBACE,IAAI,EAAC,QAAQ,eACH,uBAAuB,EACjC,SAAS,EAAE,EAAE,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAC3C,OAAO,EAAE,MAAM,qBAGR,CACV,CAAC,CAAC,CAAC,IAAI,IACJ,EAEN,yBACY,uBAAuB,EACjC,SAAS,EAAE,EAAE,CAAC,uBAAuB,CAAC,IAAI,CAAC,YAE1C,kBAAkB,GACjB,EAEH,aAAa,CAAC,CAAC,CAAC,CACf,4BACY,yBAAyB,EACnC,SAAS,EAAE,EAAE,CAAC,uBAAuB,CAAC,MAAM,CAAC,aAE7C,iBACE,IAAI,EAAC,QAAQ,eACH,yBAAyB,mBACpB,UAAU,EACzB,SAAS,EAAE,EAAE,CAAC,uBAAuB,CAAC,MAAM,CAAC,EAC7C,OAAO,EAAE,cAAc,YAEtB,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,GAChC,EACT,8BACc,MAAM,eACR,4BAA4B,EACtC,SAAS,EAAE,EAAE,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAG3C,EACP,6BACY,wBAAwB,EAClC,SAAS,EAAE,EAAE,CAAC,uBAAuB,CAAC,KAAK,CAAC,aAE3C,cAAc,mBACV,IACH,CACP,CAAC,CAAC,CAAC,IAAI,IACA,GACI,CACjB,CAAC;AACJ,CAAC"}
|
|
@@ -3,8 +3,7 @@ export declare const descriptionCardVariants: {
|
|
|
3
3
|
readonly header: "flex items-center justify-between gap-3";
|
|
4
4
|
readonly label: readonly ["text-xs font-medium uppercase tracking-[0.0667em]", "text-[var(--color-semantic-description-card-label)]"];
|
|
5
5
|
readonly edit: readonly ["shrink-0 cursor-pointer rounded-sm text-xs font-medium", "text-[var(--color-semantic-description-card-action)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-semantic-description-card-action)]"];
|
|
6
|
-
readonly body: readonly ["text-base font-normal leading-normal", "text-[var(--color-semantic-description-card-body)]"];
|
|
7
|
-
readonly bodyCollapsed: "line-clamp-4";
|
|
6
|
+
readonly body: readonly ["text-base font-normal leading-normal whitespace-pre-wrap break-words", "text-[var(--color-semantic-description-card-body)]"];
|
|
8
7
|
readonly footer: readonly ["flex items-center gap-2 text-[13px]"];
|
|
9
8
|
readonly toggle: readonly ["cursor-pointer rounded-sm font-medium", "text-[var(--color-semantic-description-card-action)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-semantic-description-card-action)]"];
|
|
10
9
|
readonly separator: readonly ["font-medium", "text-[var(--color-semantic-description-card-meta)]"];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DescriptionCard.variants.d.ts","sourceRoot":"","sources":["../../../src/components/DescriptionCard/DescriptionCard.variants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB
|
|
1
|
+
{"version":3,"file":"DescriptionCard.variants.d.ts","sourceRoot":"","sources":["../../../src/components/DescriptionCard/DescriptionCard.variants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;CAmC1B,CAAC"}
|
|
@@ -13,10 +13,9 @@ export const descriptionCardVariants = {
|
|
|
13
13
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-semantic-description-card-action)]",
|
|
14
14
|
],
|
|
15
15
|
body: [
|
|
16
|
-
"text-base font-normal leading-normal",
|
|
16
|
+
"text-base font-normal leading-normal whitespace-pre-wrap break-words",
|
|
17
17
|
"text-[var(--color-semantic-description-card-body)]",
|
|
18
18
|
],
|
|
19
|
-
bodyCollapsed: "line-clamp-4",
|
|
20
19
|
footer: ["flex items-center gap-2 text-[13px]"],
|
|
21
20
|
toggle: [
|
|
22
21
|
"cursor-pointer rounded-sm font-medium",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DescriptionCard.variants.js","sourceRoot":"","sources":["../../../src/components/DescriptionCard/DescriptionCard.variants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,6EAA6E;IAC7E,gDAAgD;IAChD,IAAI,EAAE,CAAC,uBAAuB,CAAC;IAC/B,MAAM,EAAE,yCAAyC;IACjD,KAAK,EAAE;QACL,mDAAmD;QACnD,qDAAqD;KACtD;IACD,IAAI,EAAE;QACJ,wDAAwD;QACxD,sDAAsD;QACtD,oHAAoH;KACrH;IACD,IAAI,EAAE;QACJ,
|
|
1
|
+
{"version":3,"file":"DescriptionCard.variants.js","sourceRoot":"","sources":["../../../src/components/DescriptionCard/DescriptionCard.variants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,6EAA6E;IAC7E,gDAAgD;IAChD,IAAI,EAAE,CAAC,uBAAuB,CAAC;IAC/B,MAAM,EAAE,yCAAyC;IACjD,KAAK,EAAE;QACL,mDAAmD;QACnD,qDAAqD;KACtD;IACD,IAAI,EAAE;QACJ,wDAAwD;QACxD,sDAAsD;QACtD,oHAAoH;KACrH;IACD,IAAI,EAAE;QACJ,sEAAsE;QACtE,oDAAoD;KACrD;IACD,MAAM,EAAE,CAAC,qCAAqC,CAAC;IAC/C,MAAM,EAAE;QACN,uCAAuC;QACvC,sDAAsD;QACtD,oHAAoH;KACrH;IACD,SAAS,EAAE,CAAC,aAAa,EAAE,oDAAoD,CAAC;IAChF,KAAK,EAAE,CAAC,aAAa,EAAE,oDAAoD,CAAC;IAC5E,QAAQ,EAAE;QACR,IAAI,EAAE,uBAAuB;QAC7B,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,qBAAqB;QAC3B,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,WAAW;QACzB,MAAM,EAAE,UAAU;QAClB,KAAK,EAAE,UAAU;KAClB;CACO,CAAC"}
|