@elliemae/ds-chat-card 3.70.0-next.2 → 3.70.0-next.21

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 (46) hide show
  1. package/dist/cjs/ChatCard.js +72 -15
  2. package/dist/cjs/ChatCard.js.map +2 -2
  3. package/dist/cjs/ChatCardDataTestIds.js +6 -5
  4. package/dist/cjs/ChatCardDataTestIds.js.map +2 -2
  5. package/dist/cjs/TruncatedTooltipText.js +118 -0
  6. package/dist/cjs/TruncatedTooltipText.js.map +7 -0
  7. package/dist/cjs/constants/index.js +66 -0
  8. package/dist/cjs/constants/index.js.map +7 -0
  9. package/dist/cjs/index.js +9 -1
  10. package/dist/cjs/index.js.map +2 -2
  11. package/dist/cjs/react-desc-prop-types.js +10 -4
  12. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  13. package/dist/cjs/styled.js +35 -6
  14. package/dist/cjs/styled.js.map +2 -2
  15. package/dist/cjs/typescript-testing/typescript-chat-card-valid.js +4 -2
  16. package/dist/cjs/typescript-testing/typescript-chat-card-valid.js.map +2 -2
  17. package/dist/esm/ChatCard.js +78 -14
  18. package/dist/esm/ChatCard.js.map +2 -2
  19. package/dist/esm/ChatCardDataTestIds.js +6 -5
  20. package/dist/esm/ChatCardDataTestIds.js.map +2 -2
  21. package/dist/esm/TruncatedTooltipText.js +92 -0
  22. package/dist/esm/TruncatedTooltipText.js.map +7 -0
  23. package/dist/esm/constants/index.js +36 -0
  24. package/dist/esm/constants/index.js.map +7 -0
  25. package/dist/esm/index.js +10 -2
  26. package/dist/esm/index.js.map +2 -2
  27. package/dist/esm/react-desc-prop-types.js +16 -5
  28. package/dist/esm/react-desc-prop-types.js.map +2 -2
  29. package/dist/esm/styled.js +35 -6
  30. package/dist/esm/styled.js.map +2 -2
  31. package/dist/esm/typescript-testing/typescript-chat-card-valid.js +4 -2
  32. package/dist/esm/typescript-testing/typescript-chat-card-valid.js.map +2 -2
  33. package/dist/types/ChatCard.d.ts +3 -1
  34. package/dist/types/TruncatedTooltipText.d.ts +10 -0
  35. package/dist/types/constants/index.d.ts +21 -0
  36. package/dist/types/index.d.ts +3 -1
  37. package/dist/types/react-desc-prop-types.d.ts +18 -9
  38. package/dist/types/tests/DSChatCard.a11y.test.d.ts +1 -0
  39. package/dist/types/tests/DSChatCard.api.test.d.ts +1 -0
  40. package/dist/types/tests/DSChatCard.axe.test.d.ts +1 -0
  41. package/dist/types/tests/DSChatCard.data-testId.test.d.ts +1 -0
  42. package/dist/types/tests/DSChatCard.events.test.d.ts +1 -0
  43. package/dist/types/tests/DSChatCard.exports.test.d.ts +1 -0
  44. package/dist/types/tests/DSChatCard.get-owner-props-arguments.test.d.ts +1 -0
  45. package/dist/types/tests/DSChatCard.keyboard.test.d.ts +1 -0
  46. package/package.json +8 -6
@@ -1,29 +1,93 @@
1
1
  import * as React from "react";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
- import { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
4
- import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
3
+ import {
4
+ describe,
5
+ useValidateTypescriptPropTypes,
6
+ useMemoMergePropsWithDefault,
7
+ useOwnerProps,
8
+ useGetGlobalAttributes,
9
+ useGetXstyledProps
10
+ } from "@elliemae/ds-props-helpers";
11
+ import { TruncatedTooltipText } from "./TruncatedTooltipText.js";
5
12
  import { propTypes, defaultProps } from "./react-desc-prop-types.js";
6
13
  import { Wrapper, MainContent, Title, Content, Time, RightAddon } from "./styled.js";
7
- import { ChatCardDataTestIds } from "./ChatCardDataTestIds.js";
8
- import { DSChatCardName } from "./DSChatCardDefinitions.js";
14
+ import { CHAT_CARD_DATA_TESTID, DSChatCardName } from "./constants/index.js";
9
15
  const ChatCard = (props) => {
10
16
  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
11
17
  useValidateTypescriptPropTypes(propsWithDefault, propTypes, DSChatCardName);
12
- const { title, content, time, rightAddon } = props;
13
- return /* @__PURE__ */ jsxs(Wrapper, { cols: ["1fr", "auto"], "data-testid": ChatCardDataTestIds.CARD_WRAPPER, children: [
14
- /* @__PURE__ */ jsxs(MainContent, { children: [
15
- /* @__PURE__ */ jsx(Title, { "data-testid": ChatCardDataTestIds.CARD_TITLE, children: title }),
16
- /* @__PURE__ */ jsx(Content, { "data-testid": ChatCardDataTestIds.CARD_CONTENT, children: /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: content }) }),
17
- time && /* @__PURE__ */ jsx(Time, { "data-testid": ChatCardDataTestIds.CARD_TIME, children: time })
18
- ] }),
19
- rightAddon && /* @__PURE__ */ jsx(RightAddon, { "data-testid": ChatCardDataTestIds.CARD_RIGHT_ADDON, children: rightAddon })
20
- ] });
18
+ const globalAttrs = useGetGlobalAttributes(propsWithDefault);
19
+ const { wrap: wrapStripped, ...globalProps } = globalAttrs;
20
+ const xstyledProps = useGetXstyledProps(propsWithDefault);
21
+ const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);
22
+ const { title, content, time, rightAddon, wrapText } = propsWithDefault;
23
+ return /* @__PURE__ */ jsxs(
24
+ Wrapper,
25
+ {
26
+ ...globalProps,
27
+ ...xstyledProps,
28
+ cols: ["1fr", "auto"],
29
+ "data-testid": CHAT_CARD_DATA_TESTID.ROOT,
30
+ getOwnerProps,
31
+ getOwnerPropsArguments,
32
+ children: [
33
+ /* @__PURE__ */ jsxs(MainContent, { getOwnerProps, getOwnerPropsArguments, children: [
34
+ /* @__PURE__ */ jsx(
35
+ Title,
36
+ {
37
+ "data-testid": CHAT_CARD_DATA_TESTID.TITLE,
38
+ getOwnerProps,
39
+ getOwnerPropsArguments,
40
+ children: title
41
+ }
42
+ ),
43
+ /* @__PURE__ */ jsx(
44
+ Content,
45
+ {
46
+ "data-testid": CHAT_CARD_DATA_TESTID.CONTENT,
47
+ getOwnerProps,
48
+ getOwnerPropsArguments,
49
+ children: wrapText ? content : /* @__PURE__ */ jsx(
50
+ TruncatedTooltipText,
51
+ {
52
+ value: content,
53
+ getOwnerProps,
54
+ getOwnerPropsArguments
55
+ }
56
+ )
57
+ }
58
+ ),
59
+ time && /* @__PURE__ */ jsx(
60
+ Time,
61
+ {
62
+ "data-testid": CHAT_CARD_DATA_TESTID.TIME,
63
+ getOwnerProps,
64
+ getOwnerPropsArguments,
65
+ children: time
66
+ }
67
+ )
68
+ ] }),
69
+ rightAddon && /* @__PURE__ */ jsx(
70
+ RightAddon,
71
+ {
72
+ "data-testid": CHAT_CARD_DATA_TESTID.RIGHT_ADDON,
73
+ getOwnerProps,
74
+ getOwnerPropsArguments,
75
+ children: rightAddon
76
+ }
77
+ )
78
+ ]
79
+ }
80
+ );
21
81
  };
22
82
  ChatCard.displayName = DSChatCardName;
23
83
  const ChatCardWithSchema = describe(ChatCard);
24
84
  ChatCardWithSchema.propTypes = propTypes;
85
+ const DSChatCard = ChatCard;
86
+ const DSChatCardWithSchema = ChatCardWithSchema;
25
87
  export {
26
88
  ChatCard,
27
- ChatCardWithSchema
89
+ ChatCardWithSchema,
90
+ DSChatCard,
91
+ DSChatCardWithSchema
28
92
  };
29
93
  //# sourceMappingURL=ChatCard.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ChatCard.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport type { DSChatCardT } from './react-desc-prop-types.js';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { Wrapper, MainContent, Title, Content, Time, RightAddon } from './styled.js';\nimport { ChatCardDataTestIds } from './ChatCardDataTestIds.js';\nimport { DSChatCardName } from './DSChatCardDefinitions.js';\n\nconst ChatCard: React.ComponentType<DSChatCardT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatCardT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, propTypes, DSChatCardName);\n\n const { title, content, time, rightAddon } = props;\n return (\n <Wrapper cols={['1fr', 'auto']} data-testid={ChatCardDataTestIds.CARD_WRAPPER}>\n <MainContent>\n <Title data-testid={ChatCardDataTestIds.CARD_TITLE}>{title}</Title>\n <Content data-testid={ChatCardDataTestIds.CARD_CONTENT}>\n <SimpleTruncatedTooltipText value={content} />\n </Content>\n {time && <Time data-testid={ChatCardDataTestIds.CARD_TIME}>{time}</Time>}\n </MainContent>\n {rightAddon && <RightAddon data-testid={ChatCardDataTestIds.CARD_RIGHT_ADDON}>{rightAddon}</RightAddon>}\n </Wrapper>\n );\n};\n\nChatCard.displayName = DSChatCardName;\nconst ChatCardWithSchema = describe(ChatCard);\nChatCardWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { ChatCard, ChatCardWithSchema };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACiBjB,SACE,KADF;AAfN,SAAS,UAAU,gCAAgC,oCAAoC;AACvF,SAAS,kCAAkC;AAE3C,SAAS,WAAW,oBAAoB;AACxC,SAAS,SAAS,aAAa,OAAO,SAAS,MAAM,kBAAkB;AACvE,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAE/B,MAAM,WAAmD,CAAC,UAAU;AAClE,QAAM,mBAAmB,6BAAwD,OAAO,YAAY;AACpG,iCAA+B,kBAAkB,WAAW,cAAc;AAE1E,QAAM,EAAE,OAAO,SAAS,MAAM,WAAW,IAAI;AAC7C,SACE,qBAAC,WAAQ,MAAM,CAAC,OAAO,MAAM,GAAG,eAAa,oBAAoB,cAC/D;AAAA,yBAAC,eACC;AAAA,0BAAC,SAAM,eAAa,oBAAoB,YAAa,iBAAM;AAAA,MAC3D,oBAAC,WAAQ,eAAa,oBAAoB,cACxC,8BAAC,8BAA2B,OAAO,SAAS,GAC9C;AAAA,MACC,QAAQ,oBAAC,QAAK,eAAa,oBAAoB,WAAY,gBAAK;AAAA,OACnE;AAAA,IACC,cAAc,oBAAC,cAAW,eAAa,oBAAoB,kBAAmB,sBAAW;AAAA,KAC5F;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport {\n describe,\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useOwnerProps,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { TruncatedTooltipText } from './TruncatedTooltipText.js';\nimport type { DSChatCardT } from './react-desc-prop-types.js';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { Wrapper, MainContent, Title, Content, Time, RightAddon } from './styled.js';\nimport { CHAT_CARD_DATA_TESTID, DSChatCardName } from './constants/index.js';\n\nconst ChatCard: React.ComponentType<DSChatCardT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatCardT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, propTypes, DSChatCardName);\n\n const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n // strip `wrap` \u2014 Grid uses a strict literal type (`Wrap`) that collides with the generic string from globalAttributes.\n // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars\n const { wrap: wrapStripped, ...globalProps } = globalAttrs as typeof globalAttrs & { wrap?: unknown };\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps<DSChatCardT.Props>(propsWithDefault);\n\n const { title, content, time, rightAddon, wrapText } = propsWithDefault;\n return (\n <Wrapper\n {...globalProps}\n {...xstyledProps}\n cols={['1fr', 'auto']}\n // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n data-testid={CHAT_CARD_DATA_TESTID.ROOT}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <MainContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <Title\n // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n data-testid={CHAT_CARD_DATA_TESTID.TITLE}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {title}\n </Title>\n <Content\n // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n data-testid={CHAT_CARD_DATA_TESTID.CONTENT}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {wrapText ? (\n content\n ) : (\n <TruncatedTooltipText\n value={content}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </Content>\n {time && (\n <Time\n // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n data-testid={CHAT_CARD_DATA_TESTID.TIME}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {time}\n </Time>\n )}\n </MainContent>\n {rightAddon && (\n <RightAddon\n // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n data-testid={CHAT_CARD_DATA_TESTID.RIGHT_ADDON}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {rightAddon}\n </RightAddon>\n )}\n </Wrapper>\n );\n};\n\nChatCard.displayName = DSChatCardName;\nconst ChatCardWithSchema = describe(ChatCard);\nChatCardWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\n// DS-prefixed canonical names (modern Dimsum convention) \u2014 ChatCard kept as alias for backwards compat\nconst DSChatCard = ChatCard;\nconst DSChatCardWithSchema = ChatCardWithSchema;\n\nexport { ChatCard, ChatCardWithSchema, DSChatCard, DSChatCardWithSchema };\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACsCjB,SACE,KADF;AApCN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AAErC,SAAS,WAAW,oBAAoB;AACxC,SAAS,SAAS,aAAa,OAAO,SAAS,MAAM,kBAAkB;AACvE,SAAS,uBAAuB,sBAAsB;AAEtD,MAAM,WAAmD,CAAC,UAAU;AAClE,QAAM,mBAAmB,6BAAwD,OAAO,YAAY;AACpG,iCAA+B,kBAAkB,WAAW,cAAc;AAE1E,QAAM,cAAc,uBAAuB,gBAAgB;AAG3D,QAAM,EAAE,MAAM,cAAc,GAAG,YAAY,IAAI;AAC/C,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAiC,gBAAgB;AAEnG,QAAM,EAAE,OAAO,SAAS,MAAM,YAAY,SAAS,IAAI;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM,CAAC,OAAO,MAAM;AAAA,MAEpB,eAAa,sBAAsB;AAAA,MACnC;AAAA,MACA;AAAA,MAEA;AAAA,6BAAC,eAAY,eAA8B,wBACzC;AAAA;AAAA,YAAC;AAAA;AAAA,cAEC,eAAa,sBAAsB;AAAA,cACnC;AAAA,cACA;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cAEC,eAAa,sBAAsB;AAAA,cACnC;AAAA,cACA;AAAA,cAEC,qBACC,UAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO;AAAA,kBACP;AAAA,kBACA;AAAA;AAAA,cACF;AAAA;AAAA,UAEJ;AAAA,UACC,QACC;AAAA,YAAC;AAAA;AAAA,cAEC,eAAa,sBAAsB;AAAA,cACnC;AAAA,cACA;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,WAEJ;AAAA,QACC,cACC;AAAA,UAAC;AAAA;AAAA,YAEC,eAAa,sBAAsB;AAAA,YACnC;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAG/B,MAAM,aAAa;AACnB,MAAM,uBAAuB;",
6
6
  "names": []
7
7
  }
@@ -1,10 +1,11 @@
1
1
  import * as React from "react";
2
+ import { CHAT_CARD_DATA_TESTID } from "./constants/index.js";
2
3
  const ChatCardDataTestIds = {
3
- CARD_TITLE: "chat-card-title",
4
- CARD_WRAPPER: "chat-card-wrapper",
5
- CARD_TIME: "chat-card-time",
6
- CARD_RIGHT_ADDON: "chat-right-addon",
7
- CARD_CONTENT: "chat-card-content"
4
+ CARD_TITLE: CHAT_CARD_DATA_TESTID.TITLE,
5
+ CARD_WRAPPER: CHAT_CARD_DATA_TESTID.ROOT,
6
+ CARD_TIME: CHAT_CARD_DATA_TESTID.TIME,
7
+ CARD_RIGHT_ADDON: CHAT_CARD_DATA_TESTID.RIGHT_ADDON,
8
+ CARD_CONTENT: CHAT_CARD_DATA_TESTID.CONTENT
8
9
  };
9
10
  export {
10
11
  ChatCardDataTestIds
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ChatCardDataTestIds.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const ChatCardDataTestIds = {\n CARD_TITLE: 'chat-card-title',\n CARD_WRAPPER: 'chat-card-wrapper',\n CARD_TIME: 'chat-card-time',\n CARD_RIGHT_ADDON: 'chat-right-addon',\n CARD_CONTENT: 'chat-card-content',\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,sBAAsB;AAAA,EACjC,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,cAAc;AAChB;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { CHAT_CARD_DATA_TESTID } from './constants/index.js';\n\n// Legacy export \u2014 preserved for backwards compatibility with consumers importing { ChatCardDataTestIds }.\n// New consumers should import { CHAT_CARD_DATA_TESTID } from '@elliemae/ds-chat-card' instead.\nexport const ChatCardDataTestIds = {\n CARD_TITLE: CHAT_CARD_DATA_TESTID.TITLE,\n CARD_WRAPPER: CHAT_CARD_DATA_TESTID.ROOT,\n CARD_TIME: CHAT_CARD_DATA_TESTID.TIME,\n CARD_RIGHT_ADDON: CHAT_CARD_DATA_TESTID.RIGHT_ADDON,\n CARD_CONTENT: CHAT_CARD_DATA_TESTID.CONTENT,\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,6BAA6B;AAI/B,MAAM,sBAAsB;AAAA,EACjC,YAAY,sBAAsB;AAAA,EAClC,cAAc,sBAAsB;AAAA,EACpC,WAAW,sBAAsB;AAAA,EACjC,kBAAkB,sBAAsB;AAAA,EACxC,cAAc,sBAAsB;AACtC;",
6
6
  "names": []
7
7
  }
@@ -0,0 +1,92 @@
1
+ import * as React from "react";
2
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
+ import { useCallback, useState } from "react";
4
+ import { styled } from "@elliemae/ds-system";
5
+ import {
6
+ useFloatingContext,
7
+ FloatingWrapper,
8
+ PopoverArrow
9
+ } from "@elliemae/ds-floating-context";
10
+ import { CHAT_CARD_SLOTS, DSChatCardName } from "./constants/index.js";
11
+ const TruncatedSpan = styled("span", {
12
+ name: DSChatCardName,
13
+ slot: CHAT_CARD_SLOTS.TRUNCATED_SPAN
14
+ })`
15
+ text-overflow: ellipsis;
16
+ white-space: nowrap;
17
+ overflow: hidden;
18
+ display: inline-block;
19
+ max-width: 100%;
20
+ `;
21
+ const TooltipContainer = styled("div", {
22
+ name: DSChatCardName,
23
+ slot: CHAT_CARD_SLOTS.TOOLTIP_CONTAINER
24
+ })`
25
+ text-align: center;
26
+ min-width: ${({ theme }) => theme.space.l};
27
+ max-width: 250px;
28
+ overflow-wrap: break-word;
29
+ word-break: break-word;
30
+ min-height: 30px;
31
+ display: grid;
32
+ align-items: center;
33
+ padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
34
+ position: relative;
35
+ background-color: white;
36
+ border-radius: 2px;
37
+ font-size: 13px;
38
+ color: ${({ theme }) => theme.colors.neutral[600]};
39
+ pointer-events: none;
40
+ `;
41
+ const TruncatedTooltipText = ({
42
+ value = "",
43
+ placement = "top",
44
+ getOwnerProps,
45
+ getOwnerPropsArguments
46
+ }) => {
47
+ const [showTooltip, setShowTooltip] = useState(false);
48
+ const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({
49
+ placement,
50
+ externallyControlledIsOpen: showTooltip,
51
+ withoutAnimation: true
52
+ });
53
+ const handleMouseEnter = useCallback((e) => {
54
+ const el = e.currentTarget;
55
+ setShowTooltip(el.offsetWidth < el.scrollWidth);
56
+ }, []);
57
+ const handleMouseLeave = useCallback(() => {
58
+ setShowTooltip(false);
59
+ }, []);
60
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
61
+ /* @__PURE__ */ jsx(
62
+ TruncatedSpan,
63
+ {
64
+ innerRef: refs.setReference,
65
+ onMouseEnter: handleMouseEnter,
66
+ onMouseLeave: handleMouseLeave,
67
+ getOwnerProps,
68
+ getOwnerPropsArguments,
69
+ children: value
70
+ }
71
+ ),
72
+ /* @__PURE__ */ jsx(
73
+ FloatingWrapper,
74
+ {
75
+ innerRef: refs.setFloating,
76
+ isOpen: showTooltip,
77
+ floatingStyles,
78
+ context,
79
+ children: /* @__PURE__ */ jsxs(TooltipContainer, { getOwnerProps, getOwnerPropsArguments, children: [
80
+ value,
81
+ /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
82
+ ] })
83
+ }
84
+ )
85
+ ] });
86
+ };
87
+ var TruncatedTooltipText_default = TruncatedTooltipText;
88
+ export {
89
+ TruncatedTooltipText,
90
+ TruncatedTooltipText_default as default
91
+ };
92
+ //# sourceMappingURL=TruncatedTooltipText.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/TruncatedTooltipText.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport {\n useFloatingContext,\n FloatingWrapper,\n PopoverArrow,\n type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\nimport { CHAT_CARD_SLOTS, DSChatCardName } from './constants/index.js';\n\nconst TruncatedSpan = styled('span', {\n name: DSChatCardName,\n slot: CHAT_CARD_SLOTS.TRUNCATED_SPAN,\n})`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst TooltipContainer = styled('div', {\n name: DSChatCardName,\n slot: CHAT_CARD_SLOTS.TOOLTIP_CONTAINER,\n})`\n text-align: center;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n overflow-wrap: break-word;\n word-break: break-word;\n min-height: 30px;\n display: grid;\n align-items: center;\n padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};\n position: relative;\n background-color: white;\n border-radius: 2px;\n font-size: 13px;\n color: ${({ theme }) => theme.colors.neutral[600]};\n pointer-events: none;\n`;\n\ninterface TruncatedTooltipTextProps {\n value?: string;\n placement?: DSHookFloatingContextT.PopperPlacementsT;\n // received from the parent ChatCard so the internal styled elements participate in the slot system\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nconst TruncatedTooltipText = ({\n value = '',\n placement = 'top',\n getOwnerProps,\n getOwnerPropsArguments,\n}: TruncatedTooltipTextProps) => {\n const [showTooltip, setShowTooltip] = useState(false);\n\n const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n placement,\n externallyControlledIsOpen: showTooltip,\n withoutAnimation: true,\n });\n\n const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n const el = e.currentTarget;\n setShowTooltip(el.offsetWidth < el.scrollWidth);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setShowTooltip(false);\n }, []);\n\n return (\n <>\n <TruncatedSpan\n innerRef={refs.setReference}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </TruncatedSpan>\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={showTooltip}\n floatingStyles={floatingStyles}\n context={context}\n >\n <TooltipContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {value}\n <PopoverArrow {...arrowStyles} />\n </TooltipContainer>\n </FloatingWrapper>\n </>\n );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC2EnB,mBACE,KAeE,YAhBJ;AA3EJ,SAAgB,aAAa,gBAAgB;AAC7C,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,iBAAiB,sBAAsB;AAEhD,MAAM,gBAAgB,OAAO,QAAQ;AAAA,EACnC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASD,MAAM,mBAAmB,OAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKvD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAYnD,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAiC;AAC/B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,IAAI,mBAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,mBAAmB,YAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,YAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,cAAc;AAAA,QACd,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,+BAAC,oBAAiB,eAA8B,wBAC7C;AAAA;AAAA,UACD,oBAAC,gBAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
6
+ "names": []
7
+ }
@@ -0,0 +1,36 @@
1
+ import * as React from "react";
2
+ import { slotObjectToDataTestIds } from "@elliemae/ds-system";
3
+ const DSChatCardName = "DSChatcard";
4
+ const CHAT_CARD_SLOTS = {
5
+ ROOT: "root",
6
+ MAIN_CONTENT: "main-content",
7
+ TITLE: "title",
8
+ // legacy ones...
9
+ CONTENT: "content",
10
+ // legacy ones...
11
+ TIME: "time",
12
+ // legacy ones...
13
+ RIGHT_ADDON: "right-addon",
14
+ // legacy ones...
15
+ TRUNCATED_SPAN: "truncated-span",
16
+ TOOLTIP_CONTAINER: "tooltip-container"
17
+ };
18
+ const CHAT_CARD_DATA_TESTID = {
19
+ ...slotObjectToDataTestIds(DSChatCardName, CHAT_CARD_SLOTS),
20
+ ROOT: "chat-card-wrapper",
21
+ // legacy value — breaking change if removed
22
+ TITLE: "chat-card-title",
23
+ // legacy value — breaking change if removed
24
+ CONTENT: "chat-card-content",
25
+ // legacy value — breaking change if removed
26
+ TIME: "chat-card-time",
27
+ // legacy value — breaking change if removed
28
+ RIGHT_ADDON: "chat-right-addon"
29
+ // legacy value (missing `-card-` segment) — breaking change if removed
30
+ };
31
+ export {
32
+ CHAT_CARD_DATA_TESTID,
33
+ CHAT_CARD_SLOTS,
34
+ DSChatCardName
35
+ };
36
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSChatCardName = 'DSChatcard';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CHAT_CARD_SLOTS = {\n ROOT: 'root',\n MAIN_CONTENT: 'main-content',\n TITLE: 'title', // legacy ones...\n CONTENT: 'content', // legacy ones...\n TIME: 'time', // legacy ones...\n RIGHT_ADDON: 'right-addon', // legacy ones...\n TRUNCATED_SPAN: 'truncated-span',\n TOOLTIP_CONTAINER: 'tooltip-container',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\n// legacy data-testid values predate the slot naming convention; preserved at three layers (constants + preserveLegacyDataTestId + inline JSX) \u2014 breaking change if removed.\n// Note: RIGHT_ADDON legacy value is `chat-right-addon` (missing the `-card-` middle segment) \u2014 historical quirk, preserved as-is.\nexport const CHAT_CARD_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSChatCardName, CHAT_CARD_SLOTS),\n ROOT: 'chat-card-wrapper', // legacy value \u2014 breaking change if removed\n TITLE: 'chat-card-title', // legacy value \u2014 breaking change if removed\n CONTENT: 'chat-card-content', // legacy value \u2014 breaking change if removed\n TIME: 'chat-card-time', // legacy value \u2014 breaking change if removed\n RIGHT_ADDON: 'chat-right-addon', // legacy value (missing `-card-` segment) \u2014 breaking change if removed\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,iBAAiB;AAGvB,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA;AAAA,EACP,SAAS;AAAA;AAAA,EACT,MAAM;AAAA;AAAA,EACN,aAAa;AAAA;AAAA,EACb,gBAAgB;AAAA,EAChB,mBAAmB;AACrB;AAKO,MAAM,wBAAwB;AAAA,EACnC,GAAG,wBAAwB,gBAAgB,eAAe;AAAA,EAC1D,MAAM;AAAA;AAAA,EACN,OAAO;AAAA;AAAA,EACP,SAAS;AAAA;AAAA,EACT,MAAM;AAAA;AAAA,EACN,aAAa;AAAA;AACf;",
6
+ "names": []
7
+ }
package/dist/esm/index.js CHANGED
@@ -1,9 +1,17 @@
1
1
  import * as React from "react";
2
- import { ChatCard, ChatCardWithSchema } from "./ChatCard.js";
2
+ import { ChatCard, ChatCardWithSchema, DSChatCard, DSChatCardWithSchema } from "./ChatCard.js";
3
3
  import { ChatCardDataTestIds } from "./ChatCardDataTestIds.js";
4
+ import { propTypes } from "./react-desc-prop-types.js";
5
+ import { CHAT_CARD_DATA_TESTID, CHAT_CARD_SLOTS, DSChatCardName } from "./constants/index.js";
4
6
  export {
7
+ CHAT_CARD_DATA_TESTID,
8
+ CHAT_CARD_SLOTS,
5
9
  ChatCard,
6
10
  ChatCardDataTestIds,
7
- ChatCardWithSchema
11
+ ChatCardWithSchema,
12
+ DSChatCard,
13
+ DSChatCardName,
14
+ DSChatCardWithSchema,
15
+ propTypes
8
16
  };
9
17
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatCard, ChatCardWithSchema } from './ChatCard.js';\nexport { ChatCardDataTestIds } from './ChatCardDataTestIds.js';\nexport type { DSChatCardT } from './react-desc-prop-types.js';\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,0BAA0B;AAC7C,SAAS,2BAA2B;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatCard, ChatCardWithSchema, DSChatCard, DSChatCardWithSchema } from './ChatCard.js';\nexport { ChatCardDataTestIds } from './ChatCardDataTestIds.js'; // LEGACY EXPORT\nexport { propTypes } from './react-desc-prop-types.js';\nexport type { DSChatCardT } from './react-desc-prop-types.js';\nexport { CHAT_CARD_DATA_TESTID, CHAT_CARD_SLOTS, DSChatCardName } from './constants/index.js';\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,oBAAoB,YAAY,4BAA4B;AAC/E,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAE1B,SAAS,uBAAuB,iBAAiB,sBAAsB;",
6
6
  "names": []
7
7
  }
@@ -1,14 +1,25 @@
1
1
  import * as React from "react";
2
- import { PropTypes } from "@elliemae/ds-props-helpers";
2
+ import {
3
+ PropTypes,
4
+ getPropsPerSlotPropTypes,
5
+ globalAttributesPropTypes,
6
+ xstyledPropTypes
7
+ } from "@elliemae/ds-props-helpers";
8
+ import { CHAT_CARD_SLOTS, DSChatCardName } from "./constants/index.js";
3
9
  const defaultProps = {
4
10
  content: "",
5
- time: ""
11
+ time: "",
12
+ wrapText: false
6
13
  };
7
14
  const propTypes = {
15
+ ...getPropsPerSlotPropTypes(DSChatCardName, CHAT_CARD_SLOTS),
16
+ ...globalAttributesPropTypes,
17
+ ...xstyledPropTypes,
8
18
  title: PropTypes.string.isRequired.description(`Card's title`),
9
- content: PropTypes.string.description(`Card's content`),
10
- time: PropTypes.string.description("Time"),
11
- rightAddon: PropTypes.element.description("Right addon, badge or icon")
19
+ content: PropTypes.string.description(`Card's content`).defaultValue(defaultProps.content),
20
+ time: PropTypes.string.description("Time").defaultValue(defaultProps.time),
21
+ rightAddon: PropTypes.element.description("Right addon, badge or icon"),
22
+ wrapText: PropTypes.bool.description("When true, content wraps instead of being truncated with an ellipsis + tooltip.").defaultValue(defaultProps.wrapText)
12
23
  };
13
24
  export {
14
25
  defaultProps,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSChatCardT {\n export interface RequiredProps {\n title: string;\n }\n\n export interface DefaultProps {\n content: string;\n time: string;\n }\n\n export interface OptionalProps {\n rightAddon?: JSX.Element;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n\n export interface InternalProps extends DefaultProps, OptionalProps, RequiredProps {}\n}\n\nexport const defaultProps: DSChatCardT.DefaultProps = {\n content: '',\n time: '',\n};\n\nexport const propTypes = {\n title: PropTypes.string.isRequired.description(`Card's title`),\n content: PropTypes.string.description(`Card's content`),\n time: PropTypes.string.description('Time'),\n rightAddon: PropTypes.element.description('Right addon, badge or icon'),\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAqBnB,MAAM,eAAyC;AAAA,EACpD,SAAS;AAAA,EACT,MAAM;AACR;AAEO,MAAM,YAAY;AAAA,EACvB,OAAO,UAAU,OAAO,WAAW,YAAY,cAAc;AAAA,EAC7D,SAAS,UAAU,OAAO,YAAY,gBAAgB;AAAA,EACtD,MAAM,UAAU,OAAO,YAAY,MAAM;AAAA,EACzC,YAAY,UAAU,QAAQ,YAAY,4BAA4B;AACxE;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { CHAT_CARD_SLOTS, DSChatCardName } from './constants/index.js';\n\nexport declare namespace DSChatCardT {\n // hand-written per-slot function argument map \u2014 one entry per slot in CHAT_CARD_SLOTS\n export type SlotFunctionArguments = {\n dsChatcardRoot: () => object;\n dsChatcardMainContent: () => object;\n dsChatcardTitle: () => object;\n dsChatcardContent: () => object;\n dsChatcardTime: () => object;\n dsChatcardRightAddon: () => object;\n dsChatcardTruncatedSpan: () => object;\n dsChatcardTooltipContainer: () => object;\n };\n\n export interface RequiredProps {\n title: string;\n }\n\n export interface DefaultProps {\n content: string;\n time: string;\n wrapText: boolean;\n }\n\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSChatCardName, typeof CHAT_CARD_SLOTS> {\n rightAddon?: JSX.Element;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSChatCardT.DefaultProps = {\n content: '',\n time: '',\n wrapText: false,\n};\n\nexport const propTypes: DSPropTypesSchema<DSChatCardT.Props> = {\n ...getPropsPerSlotPropTypes(DSChatCardName, CHAT_CARD_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n title: PropTypes.string.isRequired.description(`Card's title`),\n content: PropTypes.string.description(`Card's content`).defaultValue(defaultProps.content),\n time: PropTypes.string.description('Time').defaultValue(defaultProps.time),\n rightAddon: PropTypes.element.description('Right addon, badge or icon'),\n wrapText: PropTypes.bool\n .description('When true, content wraps instead of being truncated with an ellipsis + tooltip.')\n .defaultValue(defaultProps.wrapText),\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,iBAAiB,sBAAsB;AA6CzC,MAAM,eAAyC;AAAA,EACpD,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AACZ;AAEO,MAAM,YAAkD;AAAA,EAC7D,GAAG,yBAAyB,gBAAgB,eAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,OAAO,WAAW,YAAY,cAAc;AAAA,EAC7D,SAAS,UAAU,OAAO,YAAY,gBAAgB,EAAE,aAAa,aAAa,OAAO;AAAA,EACzF,MAAM,UAAU,OAAO,YAAY,MAAM,EAAE,aAAa,aAAa,IAAI;AAAA,EACzE,YAAY,UAAU,QAAQ,YAAY,4BAA4B;AAAA,EACtE,UAAU,UAAU,KACjB,YAAY,iFAAiF,EAC7F,aAAa,aAAa,QAAQ;AACvC;",
6
6
  "names": []
7
7
  }
@@ -1,25 +1,49 @@
1
1
  import * as React from "react";
2
2
  import { styled } from "@elliemae/ds-system";
3
3
  import { Grid } from "@elliemae/ds-grid";
4
- const Wrapper = styled(Grid)`
4
+ import { CHAT_CARD_SLOTS, DSChatCardName } from "./constants/index.js";
5
+ const Wrapper = styled(Grid, {
6
+ name: DSChatCardName,
7
+ slot: CHAT_CARD_SLOTS.ROOT,
8
+ // legacy data-testid `chat-card-wrapper` is preserved via inline JSX data-testid
9
+ preserveLegacyDataTestId: true
10
+ })`
5
11
  min-width: 248px;
6
12
  border: 1px;
7
13
  border-bottom: 1px solid #ccc;
8
14
  padding: 12px 12px;
9
15
  `;
10
- const MainContent = styled.div``;
11
- const Title = styled.p`
16
+ const MainContent = styled("div", {
17
+ name: DSChatCardName,
18
+ slot: CHAT_CARD_SLOTS.MAIN_CONTENT
19
+ })``;
20
+ const Title = styled("p", {
21
+ name: DSChatCardName,
22
+ slot: CHAT_CARD_SLOTS.TITLE,
23
+ // legacy data-testid `chat-card-title` is preserved via inline JSX data-testid
24
+ preserveLegacyDataTestId: true
25
+ })`
12
26
  font-size: 16px;
13
27
  font-weight: 600;
14
28
  margin: 0;
15
29
  `;
16
- const Content = styled.p`
30
+ const Content = styled("p", {
31
+ name: DSChatCardName,
32
+ slot: CHAT_CARD_SLOTS.CONTENT,
33
+ // legacy data-testid `chat-card-content` is preserved via inline JSX data-testid
34
+ preserveLegacyDataTestId: true
35
+ })`
17
36
  font-size: 12px;
18
37
  font-weight: 400;
19
38
  line-height: 1;
20
39
  margin: 0;
21
40
  `;
22
- const Time = styled.p`
41
+ const Time = styled("p", {
42
+ name: DSChatCardName,
43
+ slot: CHAT_CARD_SLOTS.TIME,
44
+ // legacy data-testid `chat-card-time` is preserved via inline JSX data-testid
45
+ preserveLegacyDataTestId: true
46
+ })`
23
47
  font-size: 12px;
24
48
  font-weight: 100;
25
49
  margin: 0;
@@ -27,7 +51,12 @@ const Time = styled.p`
27
51
  font-weight: ${(props) => props.theme.fontWeights.regular};
28
52
  color: ${(props) => props.theme.colors.neutral["500"]};
29
53
  `;
30
- const RightAddon = styled.div`
54
+ const RightAddon = styled("div", {
55
+ name: DSChatCardName,
56
+ slot: CHAT_CARD_SLOTS.RIGHT_ADDON,
57
+ // legacy data-testid `chat-right-addon` (missing `-card-` segment) is preserved via inline JSX data-testid
58
+ preserveLegacyDataTestId: true
59
+ })`
31
60
  height: fit-content;
32
61
  margin-left: 12px;
33
62
  `;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const Wrapper = styled(Grid)`\n min-width: 248px;\n border: 1px;\n border-bottom: 1px solid #ccc;\n padding: 12px 12px;\n`;\n\nexport const MainContent = styled.div``;\n\nexport const Title = styled.p`\n font-size: 16px;\n font-weight: 600;\n margin: 0;\n`;\n\nexport const Content = styled.p`\n font-size: 12px;\n font-weight: 400;\n line-height: 1;\n margin: 0;\n`;\n\nexport const Time = styled.p`\n font-size: 12px;\n font-weight: 100;\n margin: 0;\n margin-top: 8px;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['500']};\n`;\n\nexport const RightAddon = styled.div`\n height: fit-content;\n margin-left: 12px;\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AAEd,MAAM,UAAU,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3B,MAAM,cAAc,OAAO;AAE3B,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvB,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKV,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA,WAChD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGhD,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { CHAT_CARD_SLOTS, DSChatCardName } from './constants/index.js';\n\nexport const Wrapper = styled(Grid, {\n name: DSChatCardName,\n slot: CHAT_CARD_SLOTS.ROOT,\n // legacy data-testid `chat-card-wrapper` is preserved via inline JSX data-testid\n preserveLegacyDataTestId: true,\n})`\n min-width: 248px;\n border: 1px;\n border-bottom: 1px solid #ccc;\n padding: 12px 12px;\n`;\n\nexport const MainContent = styled('div', {\n name: DSChatCardName,\n slot: CHAT_CARD_SLOTS.MAIN_CONTENT,\n})``;\n\nexport const Title = styled('p', {\n name: DSChatCardName,\n slot: CHAT_CARD_SLOTS.TITLE,\n // legacy data-testid `chat-card-title` is preserved via inline JSX data-testid\n preserveLegacyDataTestId: true,\n})`\n font-size: 16px;\n font-weight: 600;\n margin: 0;\n`;\n\nexport const Content = styled('p', {\n name: DSChatCardName,\n slot: CHAT_CARD_SLOTS.CONTENT,\n // legacy data-testid `chat-card-content` is preserved via inline JSX data-testid\n preserveLegacyDataTestId: true,\n})`\n font-size: 12px;\n font-weight: 400;\n line-height: 1;\n margin: 0;\n`;\n\nexport const Time = styled('p', {\n name: DSChatCardName,\n slot: CHAT_CARD_SLOTS.TIME,\n // legacy data-testid `chat-card-time` is preserved via inline JSX data-testid\n preserveLegacyDataTestId: true,\n})`\n font-size: 12px;\n font-weight: 100;\n margin: 0;\n margin-top: 8px;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['500']};\n`;\n\nexport const RightAddon = styled('div', {\n name: DSChatCardName,\n slot: CHAT_CARD_SLOTS.RIGHT_ADDON,\n // legacy data-testid `chat-right-addon` (missing `-card-` segment) is preserved via inline JSX data-testid\n preserveLegacyDataTestId: true,\n})`\n height: fit-content;\n margin-left: 12px;\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,iBAAiB,sBAAsB;AAEzC,MAAM,UAAU,OAAO,MAAM;AAAA,EAClC,MAAM;AAAA,EACN,MAAM,gBAAgB;AAAA;AAAA,EAEtB,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,cAAc,OAAO,OAAO;AAAA,EACvC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAEM,MAAM,QAAQ,OAAO,KAAK;AAAA,EAC/B,MAAM;AAAA,EACN,MAAM,gBAAgB;AAAA;AAAA,EAEtB,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,UAAU,OAAO,KAAK;AAAA,EACjC,MAAM;AAAA,EACN,MAAM,gBAAgB;AAAA;AAAA,EAEtB,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,OAAO,OAAO,KAAK;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM,gBAAgB;AAAA;AAAA,EAEtB,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKgB,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA,WAChD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGhD,MAAM,aAAa,OAAO,OAAO;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,gBAAgB;AAAA;AAAA,EAEtB,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -23,7 +23,8 @@ const testPropsAsSyntax = {
23
23
  };
24
24
  const testCompleteDefaults = {
25
25
  content: "",
26
- time: ""
26
+ time: "",
27
+ wrapText: false
27
28
  };
28
29
  const testInternalProps = {
29
30
  ...testRequiredProps,
@@ -39,7 +40,8 @@ const testExplicitDefinition = {
39
40
  title: "",
40
41
  content: "",
41
42
  time: "",
42
- rightAddon: MockAddon()
43
+ rightAddon: MockAddon(),
44
+ wrapText: true
43
45
  };
44
46
  const testInferedTypeCompatibility = {
45
47
  title: "",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-chat-card-valid.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { ChatCard } from '../index.js';\nimport type { DSChatCardT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSChatCardT.Props;\ntype ComponentPropsInternals = DSChatCardT.InternalProps;\ntype ComponentPropsDefaultProps = DSChatCardT.DefaultProps;\ntype ComponentPropsOptionalProps = DSChatCardT.OptionalProps;\ntype ComponentPropsRequiredProps = DSChatCardT.RequiredProps;\n\nconst MockAddon = () => <div></div>;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n title: '',\n};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n rightAddon: MockAddon(),\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n content: '',\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n content: '',\n time: '',\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n title: '',\n content: '',\n time: '',\n rightAddon: MockAddon(),\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n title: '',\n content: '',\n time: '',\n rightAddon: MockAddon(),\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n title: '',\n content: '',\n time: '',\n rightAddon: MockAddon(),\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <ChatCard {...testExplicitDefinition} />\n <ChatCard {...testInferedTypeCompatibility} />\n <ChatCard {...testDefinitionAsConst} />\n {/* works with inline values */}\n <ChatCard title=\"Card Title\" content=\"Card Content\" time=\"00:00 am\" rightAddon={<MockAddon />} />\n </>\n);\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACWC,SAsEtB,UAtEsB,KAsEtB,YAtEsB;AAVxB,SAAS,gBAAgB;AAUzB,MAAM,YAAY,MAAM,oBAAC,SAAI;AAE7B,MAAM,oBAAiD;AAAA,EACrD,OAAO;AACT;AAEA,MAAM,oBAAiD;AAAA,EACrD,YAAY,UAAU;AACxB;AAIA,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AACX;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,SAAS;AAAA,EACT,MAAM;AACR;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,YAAY,UAAU;AACxB;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,YAAY,UAAU;AACxB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,YAAY,UAAU;AACxB;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,YAAU,GAAG,wBAAwB;AAAA,EACtC,oBAAC,YAAU,GAAG,8BAA8B;AAAA,EAC5C,oBAAC,YAAU,GAAG,uBAAuB;AAAA,EAErC,oBAAC,YAAS,OAAM,cAAa,SAAQ,gBAAe,MAAK,YAAW,YAAY,oBAAC,aAAU,GAAI;AAAA,GACjG;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { ChatCard } from '../index.js';\nimport type { DSChatCardT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSChatCardT.Props;\ntype ComponentPropsInternals = DSChatCardT.InternalProps;\ntype ComponentPropsDefaultProps = DSChatCardT.DefaultProps;\ntype ComponentPropsOptionalProps = DSChatCardT.OptionalProps;\ntype ComponentPropsRequiredProps = DSChatCardT.RequiredProps;\n\nconst MockAddon = () => <div></div>;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n title: '',\n};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n rightAddon: MockAddon(),\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n content: '',\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n content: '',\n time: '',\n wrapText: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n title: '',\n content: '',\n time: '',\n rightAddon: MockAddon(),\n wrapText: true,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n title: '',\n content: '',\n time: '',\n rightAddon: MockAddon(),\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n title: '',\n content: '',\n time: '',\n rightAddon: MockAddon(),\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <ChatCard {...testExplicitDefinition} />\n <ChatCard {...testInferedTypeCompatibility} />\n <ChatCard {...testDefinitionAsConst} />\n {/* works with inline values */}\n <ChatCard title=\"Card Title\" content=\"Card Content\" time=\"00:00 am\" rightAddon={<MockAddon />} />\n </>\n);\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACWC,SAwEtB,UAxEsB,KAwEtB,YAxEsB;AAVxB,SAAS,gBAAgB;AAUzB,MAAM,YAAY,MAAM,oBAAC,SAAI;AAE7B,MAAM,oBAAiD;AAAA,EACrD,OAAO;AACT;AAEA,MAAM,oBAAiD;AAAA,EACrD,YAAY,UAAU;AACxB;AAIA,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AACX;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AACZ;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,YAAY,UAAU;AAAA,EACtB,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,YAAY,UAAU;AACxB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,YAAY,UAAU;AACxB;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,YAAU,GAAG,wBAAwB;AAAA,EACtC,oBAAC,YAAU,GAAG,8BAA8B;AAAA,EAC5C,oBAAC,YAAU,GAAG,uBAAuB;AAAA,EAErC,oBAAC,YAAS,OAAM,cAAa,SAAQ,gBAAe,MAAK,YAAW,YAAY,oBAAC,aAAU,GAAI;AAAA,GACjG;",
6
6
  "names": []
7
7
  }
@@ -2,4 +2,6 @@ import React from 'react';
2
2
  import type { DSChatCardT } from './react-desc-prop-types.js';
3
3
  declare const ChatCard: React.ComponentType<DSChatCardT.Props>;
4
4
  declare const ChatCardWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSChatCardT.Props>;
5
- export { ChatCard, ChatCardWithSchema };
5
+ declare const DSChatCard: React.FunctionComponent<DSChatCardT.Props>;
6
+ declare const DSChatCardWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSChatCardT.Props>;
7
+ export { ChatCard, ChatCardWithSchema, DSChatCard, DSChatCardWithSchema };
@@ -0,0 +1,10 @@
1
+ import { type DSHookFloatingContextT } from '@elliemae/ds-floating-context';
2
+ interface TruncatedTooltipTextProps {
3
+ value?: string;
4
+ placement?: DSHookFloatingContextT.PopperPlacementsT;
5
+ getOwnerProps?: () => object;
6
+ getOwnerPropsArguments?: () => object;
7
+ }
8
+ declare const TruncatedTooltipText: ({ value, placement, getOwnerProps, getOwnerPropsArguments, }: TruncatedTooltipTextProps) => import("react/jsx-runtime.js").JSX.Element;
9
+ export { TruncatedTooltipText };
10
+ export default TruncatedTooltipText;
@@ -0,0 +1,21 @@
1
+ export declare const DSChatCardName = "DSChatcard";
2
+ export declare const CHAT_CARD_SLOTS: {
3
+ readonly ROOT: "root";
4
+ readonly MAIN_CONTENT: "main-content";
5
+ readonly TITLE: "title";
6
+ readonly CONTENT: "content";
7
+ readonly TIME: "time";
8
+ readonly RIGHT_ADDON: "right-addon";
9
+ readonly TRUNCATED_SPAN: "truncated-span";
10
+ readonly TOOLTIP_CONTAINER: "tooltip-container";
11
+ };
12
+ export declare const CHAT_CARD_DATA_TESTID: {
13
+ ROOT: string;
14
+ TITLE: string;
15
+ CONTENT: string;
16
+ TIME: string;
17
+ RIGHT_ADDON: string;
18
+ MAIN_CONTENT: "ds-chatcard-main-content";
19
+ TRUNCATED_SPAN: "ds-chatcard-truncated-span";
20
+ TOOLTIP_CONTAINER: "ds-chatcard-tooltip-container";
21
+ };
@@ -1,3 +1,5 @@
1
- export { ChatCard, ChatCardWithSchema } from './ChatCard.js';
1
+ export { ChatCard, ChatCardWithSchema, DSChatCard, DSChatCardWithSchema } from './ChatCard.js';
2
2
  export { ChatCardDataTestIds } from './ChatCardDataTestIds.js';
3
+ export { propTypes } from './react-desc-prop-types.js';
3
4
  export type { DSChatCardT } from './react-desc-prop-types.js';
5
+ export { CHAT_CARD_DATA_TESTID, CHAT_CARD_SLOTS, DSChatCardName } from './constants/index.js';