@availity/mui-spaces 1.0.25 → 1.0.27

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/index.js +65 -57
  3. package/dist/index.mjs +65 -57
  4. package/package.json +1 -1
  5. package/src/lib/SpacesLink/SpacesLink.tsx +18 -15
package/CHANGELOG.md CHANGED
@@ -2,6 +2,15 @@
2
2
 
3
3
  This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
4
4
 
5
+ ## [1.0.27](https://github.com/Availity/element/compare/@availity/mui-spaces@1.0.26...@availity/mui-spaces@1.0.27) (2025-06-25)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * **mui-spaces:** in SpacesLink, fix showUrl logic and TitleTag ([bc7c480](https://github.com/Availity/element/commit/bc7c48094d33d4da2c264fe378114143d73b3a96))
11
+
12
+ ## [1.0.26](https://github.com/Availity/element/compare/@availity/mui-spaces@1.0.25...@availity/mui-spaces@1.0.26) (2025-06-13)
13
+
5
14
  ## [1.0.25](https://github.com/Availity/element/compare/@availity/mui-spaces@1.0.24...@availity/mui-spaces@1.0.25) (2025-06-11)
6
15
 
7
16
  ## [1.0.24](https://github.com/Availity/element/compare/@availity/mui-spaces@1.0.23...@availity/mui-spaces@1.0.24) (2025-06-11)
package/dist/index.js CHANGED
@@ -922,7 +922,7 @@ var useLink = (spaceOrSpaceId, options) => {
922
922
  var import_jsx_runtime6 = require("react/jsx-runtime");
923
923
  var SpacesLinkContainer = (0, import_styles.styled)(import_mui_layout2.Box, { name: "AvSpacesLink", slot: "root" })({});
924
924
  var DateInfo = (0, import_styles.styled)(import_mui_layout2.Grid, { name: "AvSpacesLink", slot: "AvDateInfo" })({});
925
- var SpacesLinkFavoriteHeart = (0, import_styles.styled)(import_mui_layout2.Grid, { name: "AvSpacesLink", slot: "AvFavoriteHeart" })({});
925
+ var SpacesLinkFavoriteHeart = (0, import_styles.styled)(import_mui_favorites.FavoriteHeart, { name: "AvSpacesLink", slot: "AvFavoriteHeart" })({});
926
926
  var IconLink = (0, import_styles.styled)(import_Link.default, { name: "AvSpacesLink", slot: "IconLink" })({});
927
927
  var getDisplayDate = (date) => (0, import_dayjs2.default)(date).format("MM/DD/YYYY");
928
928
  var getContainerTag = (propTag, variant) => {
@@ -933,7 +933,8 @@ var getBodyTag = (propTag, variant) => {
933
933
  if (variant && variant !== "default") return { card: import_mui_card.CardContent, list: "div" }[variant];
934
934
  return propTag || "div";
935
935
  };
936
- var getTitleTag = (propTag, variant) => {
936
+ var getTitleTag = (propTag, variant, showUrl) => {
937
+ if (!showUrl) return import_mui_typography2.Typography;
937
938
  if (variant && variant !== "default") return import_Link.default;
938
939
  return propTag || import_Link.default;
939
940
  };
@@ -1005,20 +1006,20 @@ var SpacesLink = (_a) => {
1005
1006
  const { loading } = useSpacesContext();
1006
1007
  const isLoading = loading || propsLoading;
1007
1008
  const [linkSpace, props] = useLink(propSpace || spaceId, { clientId: propsClientId, linkAttributes });
1008
- const showUrl = !(linkSpace == null ? void 0 : linkSpace.isGhosted) && ((_a2 = linkSpace == null ? void 0 : linkSpace.link) == null ? void 0 : _a2.url);
1009
+ const showUrl = !(linkSpace == null ? void 0 : linkSpace.isGhosted) && !!((_a2 = linkSpace == null ? void 0 : linkSpace.link) == null ? void 0 : _a2.url);
1009
1010
  const favoriteIcon = (0, import_react4.useMemo)(
1010
- () => (linkSpace == null ? void 0 : linkSpace.configurationId) && favorite && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpacesLinkFavoriteHeart, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1011
- import_mui_favorites.FavoriteHeart,
1011
+ () => (linkSpace == null ? void 0 : linkSpace.configurationId) && favorite && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1012
+ SpacesLinkFavoriteHeart,
1012
1013
  {
1013
1014
  id: `${idPrefix}${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1014
1015
  name: linkSpace == null ? void 0 : linkSpace.name,
1015
1016
  onChange: (_, e) => e.stopPropagation()
1016
1017
  }
1017
- ) }),
1018
+ ),
1018
1019
  [favorite, linkSpace == null ? void 0 : linkSpace.configurationId, linkSpace == null ? void 0 : linkSpace.name, idPrefix]
1019
1020
  );
1020
1021
  const dateInfo = (0, import_react4.useMemo)(
1021
- () => (showNew || showDate) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DateInfo, { textAlign: stacked ? "center" : "right", children: [
1022
+ () => (showNew || showDate) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DateInfo, { textAlign: stacked ? "center" : "right", sx: { marginTop: "8px" }, children: [
1022
1023
  showNew && (linkSpace == null ? void 0 : linkSpace.isNew) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_mui_chip.StatusChip, { id: `${idPrefix}app-new-badge-${linkSpace == null ? void 0 : linkSpace.configurationId}`, label: "New!", color: "secondary" }),
1023
1024
  showDate && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1024
1025
  import_mui_typography2.Typography,
@@ -1067,7 +1068,7 @@ var SpacesLink = (_a) => {
1067
1068
  }
1068
1069
  const Tag = getContainerTag(tag, variant);
1069
1070
  const BodyTag = getBodyTag(bodyTag, variant);
1070
- const TitleTag = getTitleTag(titleTag, variant);
1071
+ const TitleTag = getTitleTag(titleTag, variant, showUrl);
1071
1072
  const TextTag = getTextTag(textTag, variant);
1072
1073
  const renderChildren = () => {
1073
1074
  if (children) {
@@ -1092,13 +1093,13 @@ var SpacesLink = (_a) => {
1092
1093
  import_mui_layout2.Grid,
1093
1094
  {
1094
1095
  sx: {
1095
- alignItems: !showDescription || stacked ? "center" : "start",
1096
+ alignItems: "start",
1096
1097
  flexWrap: "nowrap"
1097
1098
  },
1098
1099
  direction: stacked ? "column" : "row",
1099
1100
  container: true,
1100
1101
  children: [
1101
- !stacked && favoriteIcon,
1102
+ !stacked && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { marginRight: "8px" }, children: favoriteIcon }),
1102
1103
  FileIcon && (linkSpace == null ? void 0 : linkSpace.url) && ((_b2 = linkSpace == null ? void 0 : linkSpace.type) == null ? void 0 : _b2.toUpperCase()) === "FILE" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1103
1104
  IconLink,
1104
1105
  {
@@ -1109,54 +1110,61 @@ var SpacesLink = (_a) => {
1109
1110
  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FileIcon, { "data-testid": "icon" })
1110
1111
  }
1111
1112
  ) : null,
1112
- children ? renderChildren() : body && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_mui_layout2.Grid, { id: `${idPrefix}${linkSpace == null ? void 0 : linkSpace.type}-${linkSpace == null ? void 0 : linkSpace.configurationId}`, sx: { flexGrow: 1 }, children: [
1113
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1114
- import_mui_layout2.Box,
1115
- {
1116
- sx: {
1117
- marginBottom: !customBadgeDisplay && (!showDescription || !(linkSpace == null ? void 0 : linkSpace.description)) ? 0 : void 0,
1118
- paddingTop: stacked ? 3 : void 0,
1119
- textAlign: stacked ? "center" : void 0
1120
- },
1121
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1122
- TitleTag,
1123
- __spreadProps(__spreadValues(__spreadValues({
1124
- id: `${idPrefix}app-title-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1125
- className: titleClassName,
1126
- tabIndex: 0,
1113
+ children ? renderChildren() : body && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1114
+ import_mui_layout2.Grid,
1115
+ {
1116
+ id: `${idPrefix}${linkSpace == null ? void 0 : linkSpace.type}-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1117
+ sx: { flexGrow: 1, marginTop: "8px" },
1118
+ children: [
1119
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1120
+ import_mui_layout2.Box,
1121
+ {
1122
+ sx: {
1123
+ marginBottom: !customBadgeDisplay && (!showDescription || !(linkSpace == null ? void 0 : linkSpace.description)) ? 0 : void 0,
1124
+ paddingTop: stacked ? 3 : void 0,
1125
+ textAlign: stacked ? "center" : void 0
1126
+ },
1127
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1128
+ TitleTag,
1129
+ __spreadProps(__spreadValues(__spreadValues({
1130
+ id: `${idPrefix}app-title-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1131
+ className: titleClassName,
1132
+ tabIndex: 0,
1133
+ style: {
1134
+ cursor: showUrl ? "pointer" : "not-allowed"
1135
+ }
1136
+ }, analytics), props), {
1137
+ role: showUrl ? "link" : role,
1138
+ "aria-label": linkSpace == null ? void 0 : linkSpace.name,
1139
+ "aria-describedby": showNew && (linkSpace == null ? void 0 : linkSpace.isNew) ? `${idPrefix}app-new-badge-${linkSpace == null ? void 0 : linkSpace.configurationId}` : void 0,
1140
+ variant: "h5",
1141
+ title: showName ? linkSpace == null ? void 0 : linkSpace.name : void 0,
1142
+ children: showName ? linkSpace == null ? void 0 : linkSpace.name : void 0
1143
+ })
1144
+ )
1145
+ }
1146
+ ),
1147
+ stacked && dateInfo,
1148
+ showDescription && (linkSpace == null ? void 0 : linkSpace.description) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1149
+ TextTag,
1150
+ {
1151
+ component: "div",
1127
1152
  style: {
1128
- cursor: showUrl ? "pointer" : "not-allowed"
1129
- }
1130
- }, analytics), props), {
1131
- role: showUrl ? "link" : role,
1132
- "aria-label": linkSpace == null ? void 0 : linkSpace.name,
1133
- "aria-describedby": showNew && (linkSpace == null ? void 0 : linkSpace.isNew) ? `${idPrefix}app-new-badge-${linkSpace == null ? void 0 : linkSpace.configurationId}` : void 0,
1134
- variant: "h5",
1135
- title: showName ? linkSpace == null ? void 0 : linkSpace.name : void 0,
1136
- children: showName ? linkSpace == null ? void 0 : linkSpace.name : void 0
1137
- })
1138
- )
1139
- }
1140
- ),
1141
- stacked && dateInfo,
1142
- showDescription && (linkSpace == null ? void 0 : linkSpace.description) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1143
- TextTag,
1144
- {
1145
- component: "div",
1146
- style: {
1147
- marginTop: ".5rem",
1148
- textAlign: stacked ? "center" : void 0,
1149
- overflow: "hidden",
1150
- whiteSpace: maxDescriptionWidth ? "nowrap" : void 0,
1151
- width: maxDescriptionWidth,
1152
- textOverflow: "ellipsis"
1153
- },
1154
- id: `${idPrefix}app-description-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1155
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_markdown2.default, { children: linkSpace == null ? void 0 : linkSpace.description })
1156
- }
1157
- ),
1158
- variant === "card" && customBadgeDisplay
1159
- ] }),
1153
+ marginTop: ".5rem",
1154
+ textAlign: stacked ? "center" : void 0,
1155
+ overflow: "hidden",
1156
+ whiteSpace: maxDescriptionWidth ? "nowrap" : void 0,
1157
+ width: maxDescriptionWidth,
1158
+ textOverflow: "ellipsis"
1159
+ },
1160
+ id: `${idPrefix}app-description-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1161
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_markdown2.default, { children: linkSpace == null ? void 0 : linkSpace.description })
1162
+ }
1163
+ ),
1164
+ variant === "card" && customBadgeDisplay
1165
+ ]
1166
+ }
1167
+ ),
1160
1168
  variant !== "card" && customBadgeDisplay,
1161
1169
  !stacked && dateInfo
1162
1170
  ]
package/dist/index.mjs CHANGED
@@ -880,7 +880,7 @@ var useLink = (spaceOrSpaceId, options) => {
880
880
  import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
881
881
  var SpacesLinkContainer = styled(Box2, { name: "AvSpacesLink", slot: "root" })({});
882
882
  var DateInfo = styled(Grid2, { name: "AvSpacesLink", slot: "AvDateInfo" })({});
883
- var SpacesLinkFavoriteHeart = styled(Grid2, { name: "AvSpacesLink", slot: "AvFavoriteHeart" })({});
883
+ var SpacesLinkFavoriteHeart = styled(FavoriteHeart, { name: "AvSpacesLink", slot: "AvFavoriteHeart" })({});
884
884
  var IconLink = styled(Link, { name: "AvSpacesLink", slot: "IconLink" })({});
885
885
  var getDisplayDate = (date) => dayjs2(date).format("MM/DD/YYYY");
886
886
  var getContainerTag = (propTag, variant) => {
@@ -891,7 +891,8 @@ var getBodyTag = (propTag, variant) => {
891
891
  if (variant && variant !== "default") return { card: CardContent, list: "div" }[variant];
892
892
  return propTag || "div";
893
893
  };
894
- var getTitleTag = (propTag, variant) => {
894
+ var getTitleTag = (propTag, variant, showUrl) => {
895
+ if (!showUrl) return Typography2;
895
896
  if (variant && variant !== "default") return Link;
896
897
  return propTag || Link;
897
898
  };
@@ -963,20 +964,20 @@ var SpacesLink = (_a) => {
963
964
  const { loading } = useSpacesContext();
964
965
  const isLoading = loading || propsLoading;
965
966
  const [linkSpace, props] = useLink(propSpace || spaceId, { clientId: propsClientId, linkAttributes });
966
- const showUrl = !(linkSpace == null ? void 0 : linkSpace.isGhosted) && ((_a2 = linkSpace == null ? void 0 : linkSpace.link) == null ? void 0 : _a2.url);
967
+ const showUrl = !(linkSpace == null ? void 0 : linkSpace.isGhosted) && !!((_a2 = linkSpace == null ? void 0 : linkSpace.link) == null ? void 0 : _a2.url);
967
968
  const favoriteIcon = useMemo(
968
- () => (linkSpace == null ? void 0 : linkSpace.configurationId) && favorite && /* @__PURE__ */ jsx6(SpacesLinkFavoriteHeart, { children: /* @__PURE__ */ jsx6(
969
- FavoriteHeart,
969
+ () => (linkSpace == null ? void 0 : linkSpace.configurationId) && favorite && /* @__PURE__ */ jsx6(
970
+ SpacesLinkFavoriteHeart,
970
971
  {
971
972
  id: `${idPrefix}${linkSpace == null ? void 0 : linkSpace.configurationId}`,
972
973
  name: linkSpace == null ? void 0 : linkSpace.name,
973
974
  onChange: (_, e) => e.stopPropagation()
974
975
  }
975
- ) }),
976
+ ),
976
977
  [favorite, linkSpace == null ? void 0 : linkSpace.configurationId, linkSpace == null ? void 0 : linkSpace.name, idPrefix]
977
978
  );
978
979
  const dateInfo = useMemo(
979
- () => (showNew || showDate) && /* @__PURE__ */ jsxs3(DateInfo, { textAlign: stacked ? "center" : "right", children: [
980
+ () => (showNew || showDate) && /* @__PURE__ */ jsxs3(DateInfo, { textAlign: stacked ? "center" : "right", sx: { marginTop: "8px" }, children: [
980
981
  showNew && (linkSpace == null ? void 0 : linkSpace.isNew) && /* @__PURE__ */ jsx6(StatusChip, { id: `${idPrefix}app-new-badge-${linkSpace == null ? void 0 : linkSpace.configurationId}`, label: "New!", color: "secondary" }),
981
982
  showDate && /* @__PURE__ */ jsx6(
982
983
  Typography2,
@@ -1025,7 +1026,7 @@ var SpacesLink = (_a) => {
1025
1026
  }
1026
1027
  const Tag = getContainerTag(tag, variant);
1027
1028
  const BodyTag = getBodyTag(bodyTag, variant);
1028
- const TitleTag = getTitleTag(titleTag, variant);
1029
+ const TitleTag = getTitleTag(titleTag, variant, showUrl);
1029
1030
  const TextTag = getTextTag(textTag, variant);
1030
1031
  const renderChildren = () => {
1031
1032
  if (children) {
@@ -1050,13 +1051,13 @@ var SpacesLink = (_a) => {
1050
1051
  Grid2,
1051
1052
  {
1052
1053
  sx: {
1053
- alignItems: !showDescription || stacked ? "center" : "start",
1054
+ alignItems: "start",
1054
1055
  flexWrap: "nowrap"
1055
1056
  },
1056
1057
  direction: stacked ? "column" : "row",
1057
1058
  container: true,
1058
1059
  children: [
1059
- !stacked && favoriteIcon,
1060
+ !stacked && /* @__PURE__ */ jsx6("div", { style: { marginRight: "8px" }, children: favoriteIcon }),
1060
1061
  FileIcon && (linkSpace == null ? void 0 : linkSpace.url) && ((_b2 = linkSpace == null ? void 0 : linkSpace.type) == null ? void 0 : _b2.toUpperCase()) === "FILE" ? /* @__PURE__ */ jsx6(
1061
1062
  IconLink,
1062
1063
  {
@@ -1067,54 +1068,61 @@ var SpacesLink = (_a) => {
1067
1068
  children: /* @__PURE__ */ jsx6(FileIcon, { "data-testid": "icon" })
1068
1069
  }
1069
1070
  ) : null,
1070
- children ? renderChildren() : body && /* @__PURE__ */ jsxs3(Grid2, { id: `${idPrefix}${linkSpace == null ? void 0 : linkSpace.type}-${linkSpace == null ? void 0 : linkSpace.configurationId}`, sx: { flexGrow: 1 }, children: [
1071
- /* @__PURE__ */ jsx6(
1072
- Box2,
1073
- {
1074
- sx: {
1075
- marginBottom: !customBadgeDisplay && (!showDescription || !(linkSpace == null ? void 0 : linkSpace.description)) ? 0 : void 0,
1076
- paddingTop: stacked ? 3 : void 0,
1077
- textAlign: stacked ? "center" : void 0
1078
- },
1079
- children: /* @__PURE__ */ jsx6(
1080
- TitleTag,
1081
- __spreadProps(__spreadValues(__spreadValues({
1082
- id: `${idPrefix}app-title-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1083
- className: titleClassName,
1084
- tabIndex: 0,
1071
+ children ? renderChildren() : body && /* @__PURE__ */ jsxs3(
1072
+ Grid2,
1073
+ {
1074
+ id: `${idPrefix}${linkSpace == null ? void 0 : linkSpace.type}-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1075
+ sx: { flexGrow: 1, marginTop: "8px" },
1076
+ children: [
1077
+ /* @__PURE__ */ jsx6(
1078
+ Box2,
1079
+ {
1080
+ sx: {
1081
+ marginBottom: !customBadgeDisplay && (!showDescription || !(linkSpace == null ? void 0 : linkSpace.description)) ? 0 : void 0,
1082
+ paddingTop: stacked ? 3 : void 0,
1083
+ textAlign: stacked ? "center" : void 0
1084
+ },
1085
+ children: /* @__PURE__ */ jsx6(
1086
+ TitleTag,
1087
+ __spreadProps(__spreadValues(__spreadValues({
1088
+ id: `${idPrefix}app-title-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1089
+ className: titleClassName,
1090
+ tabIndex: 0,
1091
+ style: {
1092
+ cursor: showUrl ? "pointer" : "not-allowed"
1093
+ }
1094
+ }, analytics), props), {
1095
+ role: showUrl ? "link" : role,
1096
+ "aria-label": linkSpace == null ? void 0 : linkSpace.name,
1097
+ "aria-describedby": showNew && (linkSpace == null ? void 0 : linkSpace.isNew) ? `${idPrefix}app-new-badge-${linkSpace == null ? void 0 : linkSpace.configurationId}` : void 0,
1098
+ variant: "h5",
1099
+ title: showName ? linkSpace == null ? void 0 : linkSpace.name : void 0,
1100
+ children: showName ? linkSpace == null ? void 0 : linkSpace.name : void 0
1101
+ })
1102
+ )
1103
+ }
1104
+ ),
1105
+ stacked && dateInfo,
1106
+ showDescription && (linkSpace == null ? void 0 : linkSpace.description) && /* @__PURE__ */ jsx6(
1107
+ TextTag,
1108
+ {
1109
+ component: "div",
1085
1110
  style: {
1086
- cursor: showUrl ? "pointer" : "not-allowed"
1087
- }
1088
- }, analytics), props), {
1089
- role: showUrl ? "link" : role,
1090
- "aria-label": linkSpace == null ? void 0 : linkSpace.name,
1091
- "aria-describedby": showNew && (linkSpace == null ? void 0 : linkSpace.isNew) ? `${idPrefix}app-new-badge-${linkSpace == null ? void 0 : linkSpace.configurationId}` : void 0,
1092
- variant: "h5",
1093
- title: showName ? linkSpace == null ? void 0 : linkSpace.name : void 0,
1094
- children: showName ? linkSpace == null ? void 0 : linkSpace.name : void 0
1095
- })
1096
- )
1097
- }
1098
- ),
1099
- stacked && dateInfo,
1100
- showDescription && (linkSpace == null ? void 0 : linkSpace.description) && /* @__PURE__ */ jsx6(
1101
- TextTag,
1102
- {
1103
- component: "div",
1104
- style: {
1105
- marginTop: ".5rem",
1106
- textAlign: stacked ? "center" : void 0,
1107
- overflow: "hidden",
1108
- whiteSpace: maxDescriptionWidth ? "nowrap" : void 0,
1109
- width: maxDescriptionWidth,
1110
- textOverflow: "ellipsis"
1111
- },
1112
- id: `${idPrefix}app-description-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1113
- children: /* @__PURE__ */ jsx6(ReactMarkdown2, { children: linkSpace == null ? void 0 : linkSpace.description })
1114
- }
1115
- ),
1116
- variant === "card" && customBadgeDisplay
1117
- ] }),
1111
+ marginTop: ".5rem",
1112
+ textAlign: stacked ? "center" : void 0,
1113
+ overflow: "hidden",
1114
+ whiteSpace: maxDescriptionWidth ? "nowrap" : void 0,
1115
+ width: maxDescriptionWidth,
1116
+ textOverflow: "ellipsis"
1117
+ },
1118
+ id: `${idPrefix}app-description-${linkSpace == null ? void 0 : linkSpace.configurationId}`,
1119
+ children: /* @__PURE__ */ jsx6(ReactMarkdown2, { children: linkSpace == null ? void 0 : linkSpace.description })
1120
+ }
1121
+ ),
1122
+ variant === "card" && customBadgeDisplay
1123
+ ]
1124
+ }
1125
+ ),
1118
1126
  variant !== "card" && customBadgeDisplay,
1119
1127
  !stacked && dateInfo
1120
1128
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@availity/mui-spaces",
3
- "version": "1.0.25",
3
+ "version": "1.0.27",
4
4
  "description": "Availity MUI Spaces Component - part of the @availity/element design system",
5
5
  "keywords": [
6
6
  "react",
package/src/lib/SpacesLink/SpacesLink.tsx CHANGED
@@ -19,7 +19,7 @@ import { isFunction } from '../helpers';
19
19
 
20
20
  const SpacesLinkContainer = styled(Box, { name: 'AvSpacesLink', slot: 'root' })({}) as typeof MuiBox;
21
21
  const DateInfo = styled(Grid, { name: 'AvSpacesLink', slot: 'AvDateInfo' })({});
22
- const SpacesLinkFavoriteHeart = styled(Grid, { name: 'AvSpacesLink', slot: 'AvFavoriteHeart' })({});
22
+ const SpacesLinkFavoriteHeart = styled(FavoriteHeart, { name: 'AvSpacesLink', slot: 'AvFavoriteHeart' })({});
23
23
  const IconLink = styled(Link, { name: 'AvSpacesLink', slot: 'IconLink' })({});
24
24
 
25
25
  const getDisplayDate = (date: string | null | undefined) => dayjs(date).format('MM/DD/YYYY');
@@ -42,8 +42,10 @@ const getBodyTag = (
42
42
 
43
43
  const getTitleTag = (
44
44
  propTag: ElementType<any, keyof JSX.IntrinsicElements> | undefined,
45
- variant: SpacesLinkVariants
45
+ variant: SpacesLinkVariants,
46
+ showUrl?: boolean
46
47
  ) => {
48
+ if (!showUrl) return Typography;
47
49
  if (variant && variant !== 'default') return Link;
48
50
  return propTag || Link;
49
51
  };
@@ -92,19 +94,17 @@ export const SpacesLink = ({
92
94
 
93
95
  const [linkSpace, props] = useLink(propSpace || spaceId, { clientId: propsClientId, linkAttributes });
94
96
 
95
- const showUrl = !linkSpace?.isGhosted && linkSpace?.link?.url;
97
+ const showUrl = !linkSpace?.isGhosted && !!linkSpace?.link?.url;
96
98
 
97
99
  const favoriteIcon = useMemo(
98
100
  () =>
99
101
  linkSpace?.configurationId &&
100
102
  favorite && (
101
- <SpacesLinkFavoriteHeart>
102
- <FavoriteHeart
103
- id={`${idPrefix}${linkSpace?.configurationId}`}
104
- name={linkSpace?.name}
105
- onChange={(_, e) => e.stopPropagation()}
106
- />
107
- </SpacesLinkFavoriteHeart>
103
+ <SpacesLinkFavoriteHeart
104
+ id={`${idPrefix}${linkSpace?.configurationId}`}
105
+ name={linkSpace?.name}
106
+ onChange={(_, e) => e.stopPropagation()}
107
+ />
108
108
  ),
109
109
  [favorite, linkSpace?.configurationId, linkSpace?.name, idPrefix]
110
110
  );
@@ -112,7 +112,7 @@ export const SpacesLink = ({
112
112
  const dateInfo = useMemo(
113
113
  () =>
114
114
  (showNew || showDate) && (
115
- <DateInfo textAlign={stacked ? 'center' : 'right'}>
115
+ <DateInfo textAlign={stacked ? 'center' : 'right'} sx={{ marginTop: '8px' }}>
116
116
  {showNew && linkSpace?.isNew && (
117
117
  <StatusChip id={`${idPrefix}app-new-badge-${linkSpace?.configurationId}`} label="New!" color="secondary" />
118
118
  )}
@@ -165,7 +165,7 @@ export const SpacesLink = ({
165
165
 
166
166
  const Tag = getContainerTag(tag, variant);
167
167
  const BodyTag = getBodyTag(bodyTag, variant);
168
- const TitleTag = getTitleTag(titleTag, variant);
168
+ const TitleTag = getTitleTag(titleTag, variant, showUrl);
169
169
  const TextTag = getTextTag(textTag, variant);
170
170
 
171
171
  const renderChildren = () => {
@@ -199,13 +199,13 @@ export const SpacesLink = ({
199
199
  <BodyTag style={{ width: '100%' }}>
200
200
  <Grid
201
201
  sx={{
202
- alignItems: !showDescription || stacked ? 'center' : 'start',
202
+ alignItems: 'start',
203
203
  flexWrap: 'nowrap',
204
204
  }}
205
205
  direction={stacked ? 'column' : 'row'}
206
206
  container
207
207
  >
208
- {!stacked && favoriteIcon}
208
+ {!stacked && <div style={{ marginRight: '8px' }}>{favoriteIcon}</div>}
209
209
  {FileIcon && linkSpace?.url && linkSpace?.type?.toUpperCase() === 'FILE' ? (
210
210
  <IconLink
211
211
  target="_blank"
@@ -219,7 +219,10 @@ export const SpacesLink = ({
219
219
  {children
220
220
  ? renderChildren()
221
221
  : body && (
222
- <Grid id={`${idPrefix}${linkSpace?.type}-${linkSpace?.configurationId}`} sx={{ flexGrow: 1 }}>
222
+ <Grid
223
+ id={`${idPrefix}${linkSpace?.type}-${linkSpace?.configurationId}`}
224
+ sx={{ flexGrow: 1, marginTop: '8px' }}
225
+ >
223
226
  <Box
224
227
  sx={{
225
228
  marginBottom: