@elliemae/ds-card-navigation 3.60.0-next.5 → 3.60.0-next.51

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 (25) hide show
  1. package/dist/cjs/DSCardNavigation.js +8 -2
  2. package/dist/cjs/DSCardNavigation.js.map +2 -2
  3. package/dist/cjs/parts/ActionsRegion.js +31 -22
  4. package/dist/cjs/parts/ActionsRegion.js.map +2 -2
  5. package/dist/cjs/parts/style.js +17 -3
  6. package/dist/cjs/parts/style.js.map +2 -2
  7. package/dist/cjs/parts/text-region/IconAndTextsRegion.js +3 -0
  8. package/dist/cjs/parts/text-region/IconAndTextsRegion.js.map +2 -2
  9. package/dist/cjs/parts/text-region/IconAndTextsRegionContent.js +40 -29
  10. package/dist/cjs/parts/text-region/IconAndTextsRegionContent.js.map +2 -2
  11. package/dist/esm/DSCardNavigation.js +8 -2
  12. package/dist/esm/DSCardNavigation.js.map +2 -2
  13. package/dist/esm/parts/ActionsRegion.js +31 -22
  14. package/dist/esm/parts/ActionsRegion.js.map +2 -2
  15. package/dist/esm/parts/style.js +17 -3
  16. package/dist/esm/parts/style.js.map +2 -2
  17. package/dist/esm/parts/text-region/IconAndTextsRegion.js +3 -0
  18. package/dist/esm/parts/text-region/IconAndTextsRegion.js.map +2 -2
  19. package/dist/esm/parts/text-region/IconAndTextsRegionContent.js +40 -29
  20. package/dist/esm/parts/text-region/IconAndTextsRegionContent.js.map +2 -2
  21. package/dist/types/parts/ActionsRegion.d.ts +1 -0
  22. package/dist/types/parts/style.d.ts +10 -2
  23. package/dist/types/parts/text-region/IconAndTextsRegion.d.ts +1 -0
  24. package/dist/types/parts/text-region/IconAndTextsRegionContent.d.ts +1 -0
  25. package/package.json +34 -37
package/dist/cjs/DSCardNavigation.js CHANGED
@@ -35,6 +35,7 @@ module.exports = __toCommonJS(DSCardNavigation_exports);
35
35
  var React = __toESM(require("react"));
36
36
  var import_jsx_runtime = require("react/jsx-runtime");
37
37
  var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
38
+ var import_ds_system = require("@elliemae/ds-system");
38
39
  var import_useCardNavigation = require("./config/useCardNavigation.js");
39
40
  var import_constants = require("./constants/index.js");
40
41
  var import_react_desc_prop_types = require("./react-desc-prop-types.js");
@@ -54,6 +55,8 @@ const DSCardNavigation = (props) => {
54
55
  } = cardNavigationConfig;
55
56
  const { containerProps, title, description, type, Icon, actions, wrapText } = propsWithDefault;
56
57
  const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
58
+ const layoutMode = (0, import_ds_system.useGetLayoutMode)();
59
+ const isSmall = layoutMode === "s" || layoutMode === "xs";
57
60
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
58
61
  import_style.StyledCardNavigationBoxWrapper,
59
62
  {
@@ -63,6 +66,7 @@ const DSCardNavigation = (props) => {
63
66
  getOwnerProps,
64
67
  getOwnerPropsArguments,
65
68
  $isIconAndTextsRegionFocused: iconAndTextsRegionIsFocused,
69
+ $isSmall: isSmall,
66
70
  children: [
67
71
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
68
72
  import_IconAndTextsRegion.IconAndTextsRegion,
@@ -75,7 +79,8 @@ const DSCardNavigation = (props) => {
75
79
  type,
76
80
  Icon,
77
81
  showFocusRingAroundAll,
78
- hideFocusRingAroundAll
82
+ hideFocusRingAroundAll,
83
+ isSmall
79
84
  }
80
85
  ),
81
86
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -84,7 +89,8 @@ const DSCardNavigation = (props) => {
84
89
  getOwnerProps,
85
90
  getOwnerPropsArguments,
86
91
  actions,
87
- instanceUid
92
+ instanceUid,
93
+ isSmall
88
94
  }
89
95
  )
90
96
  ]
package/dist/cjs/DSCardNavigation.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/DSCardNavigation.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useCardNavigation } from './config/useCardNavigation.js';\nimport { DSCardNavigationName } from './constants/index.js';\nimport { type DSCardNavigationT, DSCardNavigationPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledCardNavigationBoxWrapper } from './parts/style.js';\nimport { IconAndTextsRegion } from './parts/text-region/IconAndTextsRegion.js';\nimport { ActionsRegion } from './parts/ActionsRegion.js';\n\nconst DSCardNavigation: React.ComponentType<DSCardNavigationT.Props> = (props) => {\n const cardNavigationConfig = useCardNavigation(props);\n const {\n propsWithDefault,\n xstyledProps,\n globalProps,\n iconAndTextsRegionIsFocused,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n instanceUid,\n } = cardNavigationConfig;\n const { containerProps, title, description, type, Icon, actions, wrapText } = propsWithDefault;\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps<DSCardNavigationT.Props>(propsWithDefault);\n\n return (\n <StyledCardNavigationBoxWrapper\n {...globalProps}\n {...xstyledProps}\n {...containerProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n $isIconAndTextsRegionFocused={iconAndTextsRegionIsFocused}\n >\n <IconAndTextsRegion\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n title={title}\n description={description}\n wrapText={wrapText}\n type={type}\n Icon={Icon}\n showFocusRingAroundAll={showFocusRingAroundAll}\n hideFocusRingAroundAll={hideFocusRingAroundAll}\n />\n <ActionsRegion\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n actions={actions}\n instanceUid={instanceUid}\n />\n </StyledCardNavigationBoxWrapper>\n );\n};\n\nDSCardNavigation.displayName = DSCardNavigationName;\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = DSCardNavigationPropTypesSchema;\n\nexport { DSCardNavigation, DSCardNavigationWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBnB;AAzBJ,8BAAwC;AAExC,+BAAkC;AAClC,uBAAqC;AACrC,mCAAwE;AACxE,mBAA+C;AAC/C,gCAAmC;AACnC,2BAA8B;AAE9B,MAAM,mBAAiE,CAAC,UAAU;AAChF,QAAM,2BAAuB,4CAAkB,KAAK;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,aAAa,MAAM,MAAM,SAAS,SAAS,IAAI;AAE9E,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAuC,gBAAgB;AAEzG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,8BAA8B;AAAA,MAE9B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,MAAM,iCAA6B,kCAAS,gBAAgB;AAC5D,2BAA2B,YAAY;",
4
+ "sourcesContent": ["import { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport React from 'react';\nimport { useCardNavigation } from './config/useCardNavigation.js';\nimport { DSCardNavigationName } from './constants/index.js';\nimport { type DSCardNavigationT, DSCardNavigationPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledCardNavigationBoxWrapper } from './parts/style.js';\nimport { IconAndTextsRegion } from './parts/text-region/IconAndTextsRegion.js';\nimport { ActionsRegion } from './parts/ActionsRegion.js';\n\nconst DSCardNavigation: React.ComponentType<DSCardNavigationT.Props> = (props) => {\n const cardNavigationConfig = useCardNavigation(props);\n const {\n propsWithDefault,\n xstyledProps,\n globalProps,\n iconAndTextsRegionIsFocused,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n instanceUid,\n } = cardNavigationConfig;\n const { containerProps, title, description, type, Icon, actions, wrapText } = propsWithDefault;\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps<DSCardNavigationT.Props>(propsWithDefault);\n const layoutMode = useGetLayoutMode();\n const isSmall = layoutMode === 's' || layoutMode === 'xs';\n\n return (\n <StyledCardNavigationBoxWrapper\n {...globalProps}\n {...xstyledProps}\n {...containerProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n $isIconAndTextsRegionFocused={iconAndTextsRegionIsFocused}\n $isSmall={isSmall}\n >\n <IconAndTextsRegion\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n title={title}\n description={description}\n wrapText={wrapText}\n type={type}\n Icon={Icon}\n showFocusRingAroundAll={showFocusRingAroundAll}\n hideFocusRingAroundAll={hideFocusRingAroundAll}\n isSmall={isSmall}\n />\n <ActionsRegion\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n actions={actions}\n instanceUid={instanceUid}\n isSmall={isSmall}\n />\n </StyledCardNavigationBoxWrapper>\n );\n};\n\nDSCardNavigation.displayName = DSCardNavigationName;\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = DSCardNavigationPropTypesSchema;\n\nexport { DSCardNavigation, DSCardNavigationWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BnB;AA5BJ,8BAAwC;AACxC,uBAAiC;AAEjC,+BAAkC;AAClC,uBAAqC;AACrC,mCAAwE;AACxE,mBAA+C;AAC/C,gCAAmC;AACnC,2BAA8B;AAE9B,MAAM,mBAAiE,CAAC,UAAU;AAChF,QAAM,2BAAuB,4CAAkB,KAAK;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,aAAa,MAAM,MAAM,SAAS,SAAS,IAAI;AAE9E,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAuC,gBAAgB;AACzG,QAAM,iBAAa,mCAAiB;AACpC,QAAM,UAAU,eAAe,OAAO,eAAe;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,8BAA8B;AAAA,MAC9B,UAAU;AAAA,MAEV;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,MAAM,iCAA6B,kCAAS,gBAAgB;AAC5D,2BAA2B,YAAY;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/ActionsRegion.js CHANGED
@@ -39,34 +39,43 @@ var import_style = require("./style.js");
39
39
  const ActionsRegion = ({
40
40
  actions,
41
41
  instanceUid,
42
+ isSmall,
42
43
  getOwnerProps,
43
44
  getOwnerPropsArguments
44
45
  }) => {
45
46
  if (actions.length === 0) return null;
46
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationActions, { getOwnerProps, getOwnerPropsArguments, children: actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {
47
- const defaultIconJSX = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MoreOptionsVert, { "aria-label": "More options" });
48
- const iconJSX = icon ?? defaultIconJSX;
49
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
50
- import_style.StyledCardNavigationButtonWrapper,
51
- {
52
- getOwnerProps,
53
- getOwnerPropsArguments,
54
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
55
- import_style.StyledCardNavigationActionButton,
47
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
48
+ import_style.StyledCardNavigationActions,
49
+ {
50
+ $isSmall: isSmall,
51
+ getOwnerProps,
52
+ getOwnerPropsArguments,
53
+ children: actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {
54
+ const defaultIconJSX = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MoreOptionsVert, { "aria-label": "More options" });
55
+ const iconJSX = icon ?? defaultIconJSX;
56
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
57
+ import_style.StyledCardNavigationButtonWrapper,
56
58
  {
57
- onClick,
58
- "aria-label": "More options",
59
- ...unexpectedButPreviouslySupportedOtherProps,
60
- buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
61
- size: import_ds_button_v2.BUTTON_SIZES.L,
62
59
  getOwnerProps,
63
60
  getOwnerPropsArguments,
64
- children: Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}) : iconJSX
65
- }
66
- )
67
- },
68
- `${instanceUid}-${index}`
69
- );
70
- }) });
61
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
62
+ import_style.StyledCardNavigationActionButton,
63
+ {
64
+ onClick,
65
+ "aria-label": "More options",
66
+ ...unexpectedButPreviouslySupportedOtherProps,
67
+ buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
68
+ size: import_ds_button_v2.BUTTON_SIZES.L,
69
+ getOwnerProps,
70
+ getOwnerPropsArguments,
71
+ children: Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}) : iconJSX
72
+ }
73
+ )
74
+ },
75
+ `${instanceUid}-${index}`
76
+ );
77
+ })
78
+ }
79
+ );
71
80
  };
72
81
  //# sourceMappingURL=ActionsRegion.js.map
package/dist/cjs/parts/ActionsRegion.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/parts/ActionsRegion.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { BUTTON_SIZES, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport React from 'react';\nimport type { DSCardNavigationT } from '../react-desc-prop-types.js';\nimport {\n StyledCardNavigationButtonWrapper,\n StyledCardNavigationActions,\n StyledCardNavigationActionButton,\n} from './style.js';\n\ninterface ActionRegionProps {\n actions: DSCardNavigationT.InternalProps['actions'];\n instanceUid: string;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nexport const ActionsRegion: React.ComponentType<ActionRegionProps> = ({\n actions,\n instanceUid,\n getOwnerProps,\n getOwnerPropsArguments,\n}) => {\n if (actions.length === 0) return null;\n return (\n <StyledCardNavigationActions getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {\n const defaultIconJSX = <MoreOptionsVert aria-label=\"More options\" />;\n const iconJSX = icon ?? defaultIconJSX;\n return (\n <StyledCardNavigationButtonWrapper\n // eslint-disable-next-line react/no-array-index-key\n key={`${instanceUid}-${index}`}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationActionButton\n onClick={onClick}\n aria-label=\"More options\"\n {...unexpectedButPreviouslySupportedOtherProps}\n buttonType={BUTTON_TYPES.ICON}\n size={BUTTON_SIZES.L}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {Icon ? <Icon /> : iconJSX}\n </StyledCardNavigationActionButton>\n </StyledCardNavigationButtonWrapper>\n );\n })}\n </StyledCardNavigationActions>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BQ;AA3B/B,0BAA2C;AAC3C,sBAAgC;AAGhC,mBAIO;AASA,MAAM,gBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE,4CAAC,4CAA4B,eAA8B,wBACxD,kBAAQ,IAAI,CAAC,EAAE,MAAM,MAAM,SAAS,GAAG,2CAA2C,GAAG,UAAU;AAC9F,UAAM,iBAAiB,4CAAC,mCAAgB,cAAW,gBAAe;AAClE,UAAM,UAAU,QAAQ;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QAGC;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAW;AAAA,YACV,GAAG;AAAA,YACJ,YAAY,iCAAa;AAAA,YACzB,MAAM,iCAAa;AAAA,YACnB;AAAA,YACA;AAAA,YAEC,iBAAO,4CAAC,QAAK,IAAK;AAAA;AAAA,QACrB;AAAA;AAAA,MAdK,GAAG,WAAW,IAAI,KAAK;AAAA,IAe9B;AAAA,EAEJ,CAAC,GACH;AAEJ;",
4
+ "sourcesContent": ["import { BUTTON_SIZES, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport React from 'react';\nimport type { DSCardNavigationT } from '../react-desc-prop-types.js';\nimport {\n StyledCardNavigationButtonWrapper,\n StyledCardNavigationActions,\n StyledCardNavigationActionButton,\n} from './style.js';\n\ninterface ActionRegionProps {\n actions: DSCardNavigationT.InternalProps['actions'];\n instanceUid: string;\n isSmall: boolean;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nexport const ActionsRegion: React.ComponentType<ActionRegionProps> = ({\n actions,\n instanceUid,\n isSmall,\n getOwnerProps,\n getOwnerPropsArguments,\n}) => {\n if (actions.length === 0) return null;\n return (\n <StyledCardNavigationActions\n $isSmall={isSmall}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {\n const defaultIconJSX = <MoreOptionsVert aria-label=\"More options\" />;\n const iconJSX = icon ?? defaultIconJSX;\n return (\n <StyledCardNavigationButtonWrapper\n // eslint-disable-next-line react/no-array-index-key\n key={`${instanceUid}-${index}`}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationActionButton\n onClick={onClick}\n aria-label=\"More options\"\n {...unexpectedButPreviouslySupportedOtherProps}\n buttonType={BUTTON_TYPES.ICON}\n size={BUTTON_SIZES.L}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {Icon ? <Icon /> : iconJSX}\n </StyledCardNavigationActionButton>\n </StyledCardNavigationButtonWrapper>\n );\n })}\n </StyledCardNavigationActions>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCQ;AAjC/B,0BAA2C;AAC3C,sBAAgC;AAGhC,mBAIO;AAUA,MAAM,gBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MAEC,kBAAQ,IAAI,CAAC,EAAE,MAAM,MAAM,SAAS,GAAG,2CAA2C,GAAG,UAAU;AAC9F,cAAM,iBAAiB,4CAAC,mCAAgB,cAAW,gBAAe;AAClE,cAAM,UAAU,QAAQ;AACxB,eACE;AAAA,UAAC;AAAA;AAAA,YAGC;AAAA,YACA;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,cAAW;AAAA,gBACV,GAAG;AAAA,gBACJ,YAAY,iCAAa;AAAA,gBACzB,MAAM,iCAAa;AAAA,gBACnB;AAAA,gBACA;AAAA,gBAEC,iBAAO,4CAAC,QAAK,IAAK;AAAA;AAAA,YACrB;AAAA;AAAA,UAdK,GAAG,WAAW,IAAI,KAAK;AAAA,QAe9B;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/style.js CHANGED
@@ -91,12 +91,20 @@ const StyledCardNavigationContent = (0, import_ds_system.styled)("div", {
91
91
  align-items: center;
92
92
  flex: 1;
93
93
  width: 100%;
94
+ ${(props) => props.$isSmall ? import_ds_system.css`
95
+ justify-content: center;
96
+ text-align: center;
97
+ ` : import_ds_system.css``}
94
98
  `;
95
99
  const StyledCardNavigationCentralContent = (0, import_ds_system.styled)(import_ds_grid.Grid, {
96
100
  slot: import_constants.CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,
97
101
  name: import_constants.DSCardNavigationName
98
102
  })`
99
103
  padding: 0 ${(props) => props.theme.space.xs};
104
+ margin: 4px 0;
105
+ ${(props) => props.$isSmall ? import_ds_system.css`
106
+ min-height: 64px;
107
+ ` : import_ds_system.css``}
100
108
  `;
101
109
  const StyledCardNavigationBoxWrapper = (0, import_ds_system.styled)("div", {
102
110
  name: import_constants.DSCardNavigationName,
@@ -106,7 +114,7 @@ const StyledCardNavigationBoxWrapper = (0, import_ds_system.styled)("div", {
106
114
  min-height: 64px;
107
115
  width: 337px;
108
116
  display: flex;
109
- flex-direction: row;
117
+ flex-direction: ${(props) => props.$isSmall ? "column" : "row"};
110
118
  flex-wrap: nowrap;
111
119
  box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);
112
120
  border-radius: 2px;
@@ -137,7 +145,6 @@ const StyledCardNavigationBoxWrapper = (0, import_ds_system.styled)("div", {
137
145
 
138
146
  ${(props) => props.$isIconAndTextsRegionFocused ? import_ds_system.css`
139
147
  outline: 2px solid ${props.theme.colors.brand["700"]};
140
- outline-offset: 2px;
141
148
  ` : import_ds_system.css``}
142
149
  `;
143
150
  const StyledCardNavigationIcon = (0, import_ds_system.styled)("div", {
@@ -165,6 +172,10 @@ const StyledCardNavigationActions = (0, import_ds_system.styled)("div", {
165
172
  flex-direction: row;
166
173
  align-items: center;
167
174
  gap: ${(props) => props.theme.space.xs};
175
+ ${(props) => props.$isSmall ? import_ds_system.css`
176
+ justify-content: center;
177
+ padding-bottom: ${props.theme.space.xs};
178
+ ` : import_ds_system.css``}
168
179
  `;
169
180
  const StyledCardNavigationButtonWrapper = (0, import_ds_system.styled)("div", {
170
181
  name: import_constants.DSCardNavigationName,
@@ -183,10 +194,13 @@ const StyledGridTextContainer = (0, import_ds_system.styled)("div", {
183
194
  })`
184
195
  display: grid;
185
196
  grid-template-columns: max-content auto;
186
- align-items: center;
187
197
  min-width: 0;
188
198
  width: 100%;
189
199
  overflow: hidden;
200
+ ${(props) => props.$isSmall ? import_ds_system.css`
201
+ grid-template-columns: 1fr;
202
+ grid-template-rows: auto auto;
203
+ ` : import_ds_system.css``}
190
204
  &:focus {
191
205
  outline: none;
192
206
  }
package/dist/cjs/parts/style.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/parts/style.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { CARD_NAVIGATION_SLOTS, CardNavigationTypes, DSCardNavigationName } from '../constants/index.js';\n\nexport const StyledCardNavigationContentTitle = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE,\n})``;\n\nexport const StyledTitleTypography = styled(DSTypography, {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE_TYPOGRAPHY,\n preserveLegacyDataTestId: true,\n})`\n color: ${(props) => props.theme.colors.neutral['700']};\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 1.3846rem; // 18px -> 18/13 = 1.3846rem\n\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 1.125rem; // 18px -> 18/16 = 1.125rem\n }\n`;\n\nexport const StyledDescriptionTypography = styled(DSTypography, {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.DESCRIPTION_TEXT,\n preserveLegacyDataTestId: true,\n})`\n color: ${(props) => props.theme.colors.neutral['500']};\n font-size: 0.923rem; // 12px -> 12/13 = 0.923rem\n\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.8775rem; // 12px -> 10.5/12 = 0.8775rem\n }\n`;\n\nexport const StyledCardNavigationContentTitleWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE_WRAPPER,\n})`\n width: 100%;\n`;\n\nexport const StyledCardNavigationContent = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.CONTENT,\n})<{ wrapText?: boolean }>`\n display: flex;\n align-items: center;\n flex: 1;\n width: 100%;\n`;\n\nexport const StyledCardNavigationCentralContent = styled(Grid, {\n slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,\n name: DSCardNavigationName,\n})<{ wrapText?: boolean; AnyOverFlow?: boolean }>`\n padding: 0 ${(props) => props.theme.space.xs};\n`;\ninterface StyledCardNavigationBoxWrapperProps {\n fluid?: boolean;\n}\n\nexport const StyledCardNavigationBoxWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ROOT,\n})<StyledCardNavigationBoxWrapperProps & { $isIconAndTextsRegionFocused?: boolean }>`\n min-width: 240px;\n min-height: 64px;\n width: 337px;\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);\n border-radius: 2px;\n position: relative;\n outline: none;\n\n ${(props) => (props.fluid ? 'width: 100%' : '')};\n @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: ${(props) => (props.fluid ? 'width: 100%' : '414px')};\n }\n\n :after {\n display: block;\n content: '';\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n border: solid ${(props) => props.theme.space.xxs} transparent;\n border-radius: 2px;\n pointer-events: none;\n }\n &:hover {\n box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);\n outline-offset: 2px;\n }\n\n ${(props) =>\n props.$isIconAndTextsRegionFocused\n ? css`\n outline: 2px solid ${props.theme.colors.brand['700']};\n outline-offset: 2px;\n `\n : css``}\n`;\n\ninterface StyledCardNavigationIconProps {\n $type: (typeof CardNavigationTypes)[keyof typeof CardNavigationTypes];\n}\n\nexport const StyledCardNavigationIcon = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TYPE,\n})<StyledCardNavigationIconProps>`\n min-width: 64px;\n min-height: 64px;\n height: 100%;\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n padding: 0 ${(props) => props.theme.space.xs};\n display: flex;\n align-items: center;\n justify-content: center;\n fill: #ffffff;\n background-color: ${({ $type }) =>\n ($type === CardNavigationTypes.BORROWER && '#32aad1') ||\n ($type === CardNavigationTypes.FINANCIAL && '#1ba88d') ||\n ($type === CardNavigationTypes.LOAN && '#8e49b2') ||\n ($type === CardNavigationTypes.REGULATORY && '#db5575') ||\n '#32aad1'};\n`;\n\nexport const StyledCardNavigationActions = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ACTIONS,\n})`\n padding: 0 ${(props) => props.theme.space.xs};\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: ${(props) => props.theme.space.xs};\n`;\n\nexport const StyledCardNavigationButtonWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.BUTTON_WRAPPER,\n})`\n span,\n svg {\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledGridTextContainer = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.INTERACTIVE_ELEMENT_REGION,\n})`\n display: grid;\n grid-template-columns: max-content auto;\n align-items: center;\n min-width: 0;\n width: 100%;\n overflow: hidden;\n &:focus {\n outline: none;\n }\n cursor: pointer;\n`;\n\nexport const StyledCardNavigationActionButton = styled(DSButtonV3, {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ACTION_BUTTON,\n preserveLegacyDataTestId: true,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { CARD_NAVIGATION_SLOTS, CardNavigationTypes, DSCardNavigationName } from '../constants/index.js';\n\nexport const StyledCardNavigationContentTitle = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE,\n})``;\n\nexport const StyledTitleTypography = styled(DSTypography, {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE_TYPOGRAPHY,\n preserveLegacyDataTestId: true,\n})`\n color: ${(props) => props.theme.colors.neutral['700']};\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 1.3846rem; // 18px -> 18/13 = 1.3846rem\n\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 1.125rem; // 18px -> 18/16 = 1.125rem\n }\n`;\n\nexport const StyledDescriptionTypography = styled(DSTypography, {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.DESCRIPTION_TEXT,\n preserveLegacyDataTestId: true,\n})`\n color: ${(props) => props.theme.colors.neutral['500']};\n font-size: 0.923rem; // 12px -> 12/13 = 0.923rem\n\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.8775rem; // 12px -> 10.5/12 = 0.8775rem\n }\n`;\n\nexport const StyledCardNavigationContentTitleWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE_WRAPPER,\n})`\n width: 100%;\n`;\n\nexport const StyledCardNavigationContent = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.CONTENT,\n})<{ wrapText?: boolean; $isSmall?: boolean }>`\n display: flex;\n align-items: center;\n flex: 1;\n width: 100%;\n ${(props) =>\n props.$isSmall\n ? css`\n justify-content: center;\n text-align: center;\n `\n : css``}\n`;\n\nexport const StyledCardNavigationCentralContent = styled(Grid, {\n slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,\n name: DSCardNavigationName,\n})<{ wrapText?: boolean; AnyOverFlow?: boolean; $isSmall?: boolean }>`\n padding: 0 ${(props) => props.theme.space.xs};\n margin: 4px 0;\n ${(props) =>\n props.$isSmall\n ? css`\n min-height: 64px;\n `\n : css``}\n`;\ninterface StyledCardNavigationBoxWrapperProps {\n fluid?: boolean;\n $isSmall?: boolean;\n}\n\nexport const StyledCardNavigationBoxWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ROOT,\n})<StyledCardNavigationBoxWrapperProps & { $isIconAndTextsRegionFocused?: boolean }>`\n min-width: 240px;\n min-height: 64px;\n width: 337px;\n display: flex;\n flex-direction: ${(props) => (props.$isSmall ? 'column' : 'row')};\n flex-wrap: nowrap;\n box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);\n border-radius: 2px;\n position: relative;\n outline: none;\n\n ${(props) => (props.fluid ? 'width: 100%' : '')};\n @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: ${(props) => (props.fluid ? 'width: 100%' : '414px')};\n }\n\n :after {\n display: block;\n content: '';\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n border: solid ${(props) => props.theme.space.xxs} transparent;\n border-radius: 2px;\n pointer-events: none;\n }\n &:hover {\n box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);\n outline-offset: 2px;\n }\n\n ${(props) =>\n props.$isIconAndTextsRegionFocused\n ? css`\n outline: 2px solid ${props.theme.colors.brand['700']};\n `\n : css``}\n`;\n\ninterface StyledCardNavigationIconProps {\n $type: (typeof CardNavigationTypes)[keyof typeof CardNavigationTypes];\n $isSmall?: boolean;\n}\n\nexport const StyledCardNavigationIcon = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TYPE,\n})<StyledCardNavigationIconProps>`\n min-width: 64px;\n min-height: 64px;\n height: 100%;\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n padding: 0 ${(props) => props.theme.space.xs};\n display: flex;\n align-items: center;\n justify-content: center;\n fill: #ffffff;\n background-color: ${({ $type }) =>\n ($type === CardNavigationTypes.BORROWER && '#32aad1') ||\n ($type === CardNavigationTypes.FINANCIAL && '#1ba88d') ||\n ($type === CardNavigationTypes.LOAN && '#8e49b2') ||\n ($type === CardNavigationTypes.REGULATORY && '#db5575') ||\n '#32aad1'};\n`;\n\nexport const StyledCardNavigationActions = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ACTIONS,\n})<{ $isSmall?: boolean }>`\n padding: 0 ${(props) => props.theme.space.xs};\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: ${(props) => props.theme.space.xs};\n ${(props) =>\n props.$isSmall\n ? css`\n justify-content: center;\n padding-bottom: ${props.theme.space.xs};\n `\n : css``}\n`;\n\nexport const StyledCardNavigationButtonWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.BUTTON_WRAPPER,\n})`\n span,\n svg {\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledGridTextContainer = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.INTERACTIVE_ELEMENT_REGION,\n})<{ $isSmall?: boolean }>`\n display: grid;\n grid-template-columns: max-content auto;\n min-width: 0;\n width: 100%;\n overflow: hidden;\n ${(props) =>\n props.$isSmall\n ? css`\n grid-template-columns: 1fr;\n grid-template-rows: auto auto;\n `\n : css``}\n &:focus {\n outline: none;\n }\n cursor: pointer;\n`;\n\nexport const StyledCardNavigationActionButton = styled(DSButtonV3, {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ACTION_BUTTON,\n preserveLegacyDataTestId: true,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/text-region/IconAndTextsRegion.js CHANGED
@@ -51,6 +51,7 @@ const IconAndTextsRegion = ({
51
51
  Icon,
52
52
  showFocusRingAroundAll,
53
53
  hideFocusRingAroundAll,
54
+ isSmall,
54
55
  getOwnerProps,
55
56
  getOwnerPropsArguments
56
57
  }) => {
@@ -83,6 +84,7 @@ const IconAndTextsRegion = ({
83
84
  descriptionHandleRef,
84
85
  showFocusRingAroundAll,
85
86
  hideFocusRingAroundAll,
87
+ isSmall,
86
88
  getOwnerProps,
87
89
  getOwnerPropsArguments
88
90
  }
@@ -99,6 +101,7 @@ const IconAndTextsRegion = ({
99
101
  descriptionHandleRef,
100
102
  showFocusRingAroundAll,
101
103
  hideFocusRingAroundAll,
104
+ isSmall,
102
105
  getOwnerProps,
103
106
  getOwnerPropsArguments
104
107
  }
package/dist/cjs/parts/text-region/IconAndTextsRegion.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/text-region/IconAndTextsRegion.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { useOnOverflowChange } from '@elliemae/ds-hooks-on-overflow-change';\nimport type { DSTooltipV3T } from '@elliemae/ds-tooltip-v3';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { DSTypography, TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport { IconAndTextsRegionContent } from './IconAndTextsRegionContent.js';\n\ntype TooltipTextProps = DSTooltipV3T.CustomInterface<{\n title: string;\n description: string;\n}>;\n\nconst TooltipText: React.ComponentType<TooltipTextProps> = ({ title, description }) => (\n <Grid>\n <DSTypography variant={TYPOGRAPHY_VARIANTS.H5_ARTICLE}>{title}</DSTypography>\n <DSTypography variant={TYPOGRAPHY_VARIANTS.B1}>{description}</DSTypography>\n </Grid>\n);\n\ninterface IconAndTextsRegionProps {\n title: DSCardNavigationT.InternalProps['title'];\n description: DSCardNavigationT.InternalProps['description'];\n wrapText: DSCardNavigationT.InternalProps['wrapText'];\n type: DSCardNavigationT.InternalProps['type'];\n Icon: DSCardNavigationT.InternalProps['Icon'];\n showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nexport const IconAndTextsRegion: React.ComponentType<IconAndTextsRegionProps> = ({\n title,\n description,\n wrapText,\n type,\n Icon,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n getOwnerProps,\n getOwnerPropsArguments,\n}) => {\n const [isTitleTruncating, setIsTitleTruncating] = React.useState(false);\n const [isDescriptionTruncating, setIsDescriptionTruncating] = React.useState(false);\n\n const AnyOverFlow = isTitleTruncating || isDescriptionTruncating;\n\n const { handleRef: titleHandleRef } = useOnOverflowChange({\n onOverflowStateChange: setIsTitleTruncating,\n });\n\n const { handleRef: descriptionHandleRef } = useOnOverflowChange({\n onOverflowStateChange: setIsDescriptionTruncating,\n });\n const TooltipTextProps = React.useMemo(\n () => ({\n title,\n description,\n }),\n [title, description],\n );\n\n if (AnyOverFlow)\n return (\n <DSTooltipV3<TooltipTextProps> Text={TooltipText} textProps={TooltipTextProps}>\n <IconAndTextsRegionContent\n title={title}\n description={description}\n wrapText={wrapText}\n type={type}\n Icon={Icon}\n titleHandleRef={titleHandleRef}\n descriptionHandleRef={descriptionHandleRef}\n showFocusRingAroundAll={showFocusRingAroundAll}\n hideFocusRingAroundAll={hideFocusRingAroundAll}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </DSTooltipV3>\n );\n return (\n <IconAndTextsRegionContent\n title={title}\n description={description}\n wrapText={wrapText}\n type={type}\n Icon={Icon}\n titleHandleRef={titleHandleRef}\n descriptionHandleRef={descriptionHandleRef}\n showFocusRingAroundAll={showFocusRingAroundAll}\n hideFocusRingAroundAll={hideFocusRingAroundAll}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADerB;AAfF,qBAAqB;AACrB,yCAAoC;AAEpC,2BAA4B;AAC5B,2BAAkD;AAClD,mBAAkB;AAElB,uCAA0C;AAO1C,MAAM,cAAqD,CAAC,EAAE,OAAO,YAAY,MAC/E,6CAAC,uBACC;AAAA,8CAAC,qCAAa,SAAS,yCAAoB,YAAa,iBAAM;AAAA,EAC9D,4CAAC,qCAAa,SAAS,yCAAoB,IAAK,uBAAY;AAAA,GAC9D;AAeK,MAAM,qBAAmE,CAAC;AAAA,EAC/E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,aAAAA,QAAM,SAAS,KAAK;AACtE,QAAM,CAAC,yBAAyB,0BAA0B,IAAI,aAAAA,QAAM,SAAS,KAAK;AAElF,QAAM,cAAc,qBAAqB;AAEzC,QAAM,EAAE,WAAW,eAAe,QAAI,wDAAoB;AAAA,IACxD,uBAAuB;AAAA,EACzB,CAAC;AAED,QAAM,EAAE,WAAW,qBAAqB,QAAI,wDAAoB;AAAA,IAC9D,uBAAuB;AAAA,EACzB,CAAC;AACD,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,WAAW;AAAA,EACrB;AAEA,MAAI;AACF,WACE,4CAAC,oCAA8B,MAAM,aAAa,WAAW,kBAC3D;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
4
+ "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { useOnOverflowChange } from '@elliemae/ds-hooks-on-overflow-change';\nimport type { DSTooltipV3T } from '@elliemae/ds-tooltip-v3';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { DSTypography, TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport { IconAndTextsRegionContent } from './IconAndTextsRegionContent.js';\n\ntype TooltipTextProps = DSTooltipV3T.CustomInterface<{\n title: string;\n description: string;\n}>;\n\nconst TooltipText: React.ComponentType<TooltipTextProps> = ({ title, description }) => (\n <Grid>\n <DSTypography variant={TYPOGRAPHY_VARIANTS.H5_ARTICLE}>{title}</DSTypography>\n <DSTypography variant={TYPOGRAPHY_VARIANTS.B1}>{description}</DSTypography>\n </Grid>\n);\n\ninterface IconAndTextsRegionProps {\n title: DSCardNavigationT.InternalProps['title'];\n description: DSCardNavigationT.InternalProps['description'];\n wrapText: DSCardNavigationT.InternalProps['wrapText'];\n type: DSCardNavigationT.InternalProps['type'];\n Icon: DSCardNavigationT.InternalProps['Icon'];\n showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n isSmall: boolean;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nexport const IconAndTextsRegion: React.ComponentType<IconAndTextsRegionProps> = ({\n title,\n description,\n wrapText,\n type,\n Icon,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n isSmall,\n getOwnerProps,\n getOwnerPropsArguments,\n}) => {\n const [isTitleTruncating, setIsTitleTruncating] = React.useState(false);\n const [isDescriptionTruncating, setIsDescriptionTruncating] = React.useState(false);\n\n const AnyOverFlow = isTitleTruncating || isDescriptionTruncating;\n\n const { handleRef: titleHandleRef } = useOnOverflowChange({\n onOverflowStateChange: setIsTitleTruncating,\n });\n\n const { handleRef: descriptionHandleRef } = useOnOverflowChange({\n onOverflowStateChange: setIsDescriptionTruncating,\n });\n const TooltipTextProps = React.useMemo(\n () => ({\n title,\n description,\n }),\n [title, description],\n );\n\n if (AnyOverFlow)\n return (\n <DSTooltipV3<TooltipTextProps> Text={TooltipText} textProps={TooltipTextProps}>\n <IconAndTextsRegionContent\n title={title}\n description={description}\n wrapText={wrapText}\n type={type}\n Icon={Icon}\n titleHandleRef={titleHandleRef}\n descriptionHandleRef={descriptionHandleRef}\n showFocusRingAroundAll={showFocusRingAroundAll}\n hideFocusRingAroundAll={hideFocusRingAroundAll}\n isSmall={isSmall}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </DSTooltipV3>\n );\n return (\n <IconAndTextsRegionContent\n title={title}\n description={description}\n wrapText={wrapText}\n type={type}\n Icon={Icon}\n titleHandleRef={titleHandleRef}\n descriptionHandleRef={descriptionHandleRef}\n showFocusRingAroundAll={showFocusRingAroundAll}\n hideFocusRingAroundAll={hideFocusRingAroundAll}\n isSmall={isSmall}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADerB;AAfF,qBAAqB;AACrB,yCAAoC;AAEpC,2BAA4B;AAC5B,2BAAkD;AAClD,mBAAkB;AAElB,uCAA0C;AAO1C,MAAM,cAAqD,CAAC,EAAE,OAAO,YAAY,MAC/E,6CAAC,uBACC;AAAA,8CAAC,qCAAa,SAAS,yCAAoB,YAAa,iBAAM;AAAA,EAC9D,4CAAC,qCAAa,SAAS,yCAAoB,IAAK,uBAAY;AAAA,GAC9D;AAgBK,MAAM,qBAAmE,CAAC;AAAA,EAC/E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,aAAAA,QAAM,SAAS,KAAK;AACtE,QAAM,CAAC,yBAAyB,0BAA0B,IAAI,aAAAA,QAAM,SAAS,KAAK;AAElF,QAAM,cAAc,qBAAqB;AAEzC,QAAM,EAAE,WAAW,eAAe,QAAI,wDAAoB;AAAA,IACxD,uBAAuB;AAAA,EACzB,CAAC;AAED,QAAM,EAAE,WAAW,qBAAqB,QAAI,wDAAoB;AAAA,IAC9D,uBAAuB;AAAA,EACzB,CAAC;AACD,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,WAAW;AAAA,EACrB;AAEA,MAAI;AACF,WACE,4CAAC,oCAA8B,MAAM,aAAa,WAAW,kBAC3D;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/text-region/IconAndTextsRegionContent.js CHANGED
@@ -48,6 +48,7 @@ const IconAndTextsRegionContent = import_react.default.memo((props) => {
48
48
  descriptionHandleRef,
49
49
  type,
50
50
  Icon,
51
+ isSmall,
51
52
  showFocusRingAroundAll,
52
53
  hideFocusRingAroundAll,
53
54
  getOwnerProps,
@@ -61,6 +62,7 @@ const IconAndTextsRegionContent = import_react.default.memo((props) => {
61
62
  tabIndex: 0,
62
63
  onFocus: showFocusRingAroundAll,
63
64
  onBlur: hideFocusRingAroundAll,
65
+ $isSmall: isSmall,
64
66
  getOwnerProps,
65
67
  getOwnerPropsArguments,
66
68
  children: [
@@ -77,48 +79,57 @@ const IconAndTextsRegionContent = import_react.default.memo((props) => {
77
79
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
78
80
  import_style.StyledCardNavigationCentralContent,
79
81
  {
82
+ $isSmall: isSmall,
80
83
  cols,
81
84
  getOwnerProps,
82
85
  getOwnerPropsArguments,
83
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationContent, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
84
- import_style.StyledCardNavigationContentTitleWrapper,
86
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
87
+ import_style.StyledCardNavigationContent,
85
88
  {
89
+ $isSmall: isSmall,
86
90
  getOwnerProps,
87
91
  getOwnerPropsArguments,
88
- children: [
89
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
90
- import_style.StyledCardNavigationContentTitle,
91
- {
92
- getOwnerProps,
93
- getOwnerPropsArguments,
94
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
95
- import_style.StyledTitleTypography,
92
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
93
+ import_style.StyledCardNavigationContentTitleWrapper,
94
+ {
95
+ getOwnerProps,
96
+ getOwnerPropsArguments,
97
+ children: [
98
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
99
+ import_style.StyledCardNavigationContentTitle,
96
100
  {
97
- innerRef: titleHandleRef,
101
+ getOwnerProps,
102
+ getOwnerPropsArguments,
103
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
104
+ import_style.StyledTitleTypography,
105
+ {
106
+ innerRef: titleHandleRef,
107
+ truncateWithEllipsis: !wrapText,
108
+ variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1,
109
+ getOwnerProps,
110
+ getOwnerPropsArguments,
111
+ children: title
112
+ }
113
+ )
114
+ }
115
+ ),
116
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
117
+ import_style.StyledDescriptionTypography,
118
+ {
119
+ innerRef: descriptionHandleRef,
98
120
  truncateWithEllipsis: !wrapText,
99
121
  variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1,
122
+ "data-testid": import_constants.CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
100
123
  getOwnerProps,
101
124
  getOwnerPropsArguments,
102
- children: title
125
+ children: description
103
126
  }
104
- )
105
- }
106
- ),
107
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
108
- import_style.StyledDescriptionTypography,
109
- {
110
- innerRef: descriptionHandleRef,
111
- truncateWithEllipsis: !wrapText,
112
- variant: import_ds_typography.TYPOGRAPHY_VARIANTS.B1,
113
- "data-testid": import_constants.CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
114
- getOwnerProps,
115
- getOwnerPropsArguments,
116
- children: description
117
- }
118
- ) })
119
- ]
127
+ ) })
128
+ ]
129
+ }
130
+ )
120
131
  }
121
- ) })
132
+ )
122
133
  }
123
134
  )
124
135
  ]
package/dist/cjs/parts/text-region/IconAndTextsRegionContent.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/text-region/IconAndTextsRegionContent.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type { SvgIconT } from '@elliemae/ds-icons';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport { CARD_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport {\n StyledCardNavigationCentralContent,\n StyledCardNavigationContent,\n StyledCardNavigationContentTitle,\n StyledCardNavigationContentTitleWrapper,\n StyledCardNavigationIcon,\n StyledDescriptionTypography,\n StyledGridTextContainer,\n StyledTitleTypography,\n} from '../style.js';\n\nconst mainIconColor = ['neutral', '0'] as SvgIconT.ColorType;\nconst cols = ['1fr'];\n\ninterface IconAndTextsRegionContentProps {\n title: DSCardNavigationT.InternalProps['title'];\n description: DSCardNavigationT.InternalProps['description'];\n wrapText: DSCardNavigationT.InternalProps['wrapText'];\n type: DSCardNavigationT.InternalProps['type'];\n Icon: DSCardNavigationT.InternalProps['Icon'];\n\n titleHandleRef: (node: HTMLElement | null) => void;\n descriptionHandleRef: (node: HTMLElement | null) => void;\n showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nexport const IconAndTextsRegionContent = React.memo((props: IconAndTextsRegionContentProps) => {\n const {\n title,\n description,\n wrapText,\n titleHandleRef,\n descriptionHandleRef,\n type,\n Icon,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n getOwnerProps,\n getOwnerPropsArguments,\n } = props;\n\n return (\n <StyledGridTextContainer\n data-type={type}\n role=\"button\"\n tabIndex={0}\n onFocus={showFocusRingAroundAll}\n onBlur={hideFocusRingAroundAll}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationIcon\n $type={type}\n role=\"presentation\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Icon size=\"l\" color={mainIconColor} />\n </StyledCardNavigationIcon>\n\n <StyledCardNavigationCentralContent\n cols={cols}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledCardNavigationContentTitleWrapper\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationContentTitle\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledTitleTypography\n innerRef={titleHandleRef}\n truncateWithEllipsis={!wrapText}\n variant={TYPOGRAPHY_VARIANTS.B1}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {title}\n </StyledTitleTypography>\n </StyledCardNavigationContentTitle>\n <div>\n <StyledDescriptionTypography\n innerRef={descriptionHandleRef}\n truncateWithEllipsis={!wrapText}\n variant={TYPOGRAPHY_VARIANTS.B1}\n data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {description}\n </StyledDescriptionTypography>\n </div>\n </StyledCardNavigationContentTitleWrapper>\n </StyledCardNavigationContent>\n </StyledCardNavigationCentralContent>\n </StyledGridTextContainer>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiEf;AAhER,2BAAoC;AACpC,mBAAkB;AAClB,uBAA4C;AAE5C,mBASO;AAEP,MAAM,gBAAgB,CAAC,WAAW,GAAG;AACrC,MAAM,OAAO,CAAC,KAAK;AAiBZ,MAAM,4BAA4B,aAAAA,QAAM,KAAK,CAAC,UAA0C;AAC7F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YAEA,sDAAC,QAAK,MAAK,KAAI,OAAO,eAAe;AAAA;AAAA,QACvC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YAEA,sDAAC,4CAA4B,eAA8B,wBACzD;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC;AAAA,sBACA;AAAA,sBAEA;AAAA,wBAAC;AAAA;AAAA,0BACC,UAAU;AAAA,0BACV,sBAAsB,CAAC;AAAA,0BACvB,SAAS,yCAAoB;AAAA,0BAC7B;AAAA,0BACA;AAAA,0BAEC;AAAA;AAAA,sBACH;AAAA;AAAA,kBACF;AAAA,kBACA,4CAAC,SACC;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAU;AAAA,sBACV,sBAAsB,CAAC;AAAA,sBACvB,SAAS,yCAAoB;AAAA,sBAC7B,eAAa,6CAA4B;AAAA,sBACzC;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH,GACF;AAAA;AAAA;AAAA,YACF,GACF;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
4
+ "sourcesContent": ["import type { SvgIconT } from '@elliemae/ds-icons';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport { CARD_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport {\n StyledCardNavigationCentralContent,\n StyledCardNavigationContent,\n StyledCardNavigationContentTitle,\n StyledCardNavigationContentTitleWrapper,\n StyledCardNavigationIcon,\n StyledDescriptionTypography,\n StyledGridTextContainer,\n StyledTitleTypography,\n} from '../style.js';\n\nconst mainIconColor = ['neutral', '0'] as SvgIconT.ColorType;\nconst cols = ['1fr'];\n\ninterface IconAndTextsRegionContentProps {\n title: DSCardNavigationT.InternalProps['title'];\n description: DSCardNavigationT.InternalProps['description'];\n wrapText: DSCardNavigationT.InternalProps['wrapText'];\n type: DSCardNavigationT.InternalProps['type'];\n Icon: DSCardNavigationT.InternalProps['Icon'];\n isSmall: boolean;\n\n titleHandleRef: (node: HTMLElement | null) => void;\n descriptionHandleRef: (node: HTMLElement | null) => void;\n showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nexport const IconAndTextsRegionContent = React.memo((props: IconAndTextsRegionContentProps) => {\n const {\n title,\n description,\n wrapText,\n titleHandleRef,\n descriptionHandleRef,\n type,\n Icon,\n isSmall,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n getOwnerProps,\n getOwnerPropsArguments,\n } = props;\n\n return (\n <StyledGridTextContainer\n data-type={type}\n role=\"button\"\n tabIndex={0}\n onFocus={showFocusRingAroundAll}\n onBlur={hideFocusRingAroundAll}\n $isSmall={isSmall}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationIcon\n $type={type}\n role=\"presentation\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Icon size=\"l\" color={mainIconColor} />\n </StyledCardNavigationIcon>\n\n <StyledCardNavigationCentralContent\n $isSmall={isSmall}\n cols={cols}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationContent\n $isSmall={isSmall}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationContentTitleWrapper\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationContentTitle\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledTitleTypography\n innerRef={titleHandleRef}\n truncateWithEllipsis={!wrapText}\n variant={TYPOGRAPHY_VARIANTS.B1}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {title}\n </StyledTitleTypography>\n </StyledCardNavigationContentTitle>\n <div>\n <StyledDescriptionTypography\n innerRef={descriptionHandleRef}\n truncateWithEllipsis={!wrapText}\n variant={TYPOGRAPHY_VARIANTS.B1}\n data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {description}\n </StyledDescriptionTypography>\n </div>\n </StyledCardNavigationContentTitleWrapper>\n </StyledCardNavigationContent>\n </StyledCardNavigationCentralContent>\n </StyledGridTextContainer>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoEf;AAnER,2BAAoC;AACpC,mBAAkB;AAClB,uBAA4C;AAE5C,mBASO;AAEP,MAAM,gBAAgB,CAAC,WAAW,GAAG;AACrC,MAAM,OAAO,CAAC,KAAK;AAkBZ,MAAM,4BAA4B,aAAAA,QAAM,KAAK,CAAC,UAA0C;AAC7F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YAEA,sDAAC,QAAK,MAAK,KAAI,OAAO,eAAe;AAAA;AAAA,QACvC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA;AAAA,oBAEA;AAAA;AAAA,wBAAC;AAAA;AAAA,0BACC;AAAA,0BACA;AAAA,0BAEA;AAAA,4BAAC;AAAA;AAAA,8BACC,UAAU;AAAA,8BACV,sBAAsB,CAAC;AAAA,8BACvB,SAAS,yCAAoB;AAAA,8BAC7B;AAAA,8BACA;AAAA,8BAEC;AAAA;AAAA,0BACH;AAAA;AAAA,sBACF;AAAA,sBACA,4CAAC,SACC;AAAA,wBAAC;AAAA;AAAA,0BACC,UAAU;AAAA,0BACV,sBAAsB,CAAC;AAAA,0BACvB,SAAS,yCAAoB;AAAA,0BAC7B,eAAa,6CAA4B;AAAA,0BACzC;AAAA,0BACA;AAAA,0BAEC;AAAA;AAAA,sBACH,GACF;AAAA;AAAA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/DSCardNavigation.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as React from "react";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import { describe, useOwnerProps } from "@elliemae/ds-props-helpers";
4
+ import { useGetLayoutMode } from "@elliemae/ds-system";
4
5
  import { useCardNavigation } from "./config/useCardNavigation.js";
5
6
  import { DSCardNavigationName } from "./constants/index.js";
6
7
  import { DSCardNavigationPropTypesSchema } from "./react-desc-prop-types.js";
@@ -20,6 +21,8 @@ const DSCardNavigation = (props) => {
20
21
  } = cardNavigationConfig;
21
22
  const { containerProps, title, description, type, Icon, actions, wrapText } = propsWithDefault;
22
23
  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);
24
+ const layoutMode = useGetLayoutMode();
25
+ const isSmall = layoutMode === "s" || layoutMode === "xs";
23
26
  return /* @__PURE__ */ jsxs(
24
27
  StyledCardNavigationBoxWrapper,
25
28
  {
@@ -29,6 +32,7 @@ const DSCardNavigation = (props) => {
29
32
  getOwnerProps,
30
33
  getOwnerPropsArguments,
31
34
  $isIconAndTextsRegionFocused: iconAndTextsRegionIsFocused,
35
+ $isSmall: isSmall,
32
36
  children: [
33
37
  /* @__PURE__ */ jsx(
34
38
  IconAndTextsRegion,
@@ -41,7 +45,8 @@ const DSCardNavigation = (props) => {
41
45
  type,
42
46
  Icon,
43
47
  showFocusRingAroundAll,
44
- hideFocusRingAroundAll
48
+ hideFocusRingAroundAll,
49
+ isSmall
45
50
  }
46
51
  ),
47
52
  /* @__PURE__ */ jsx(
@@ -50,7 +55,8 @@ const DSCardNavigation = (props) => {
50
55
  getOwnerProps,
51
56
  getOwnerPropsArguments,
52
57
  actions,
53
- instanceUid
58
+ instanceUid,
59
+ isSmall
54
60
  }
55
61
  )
56
62
  ]
package/dist/esm/DSCardNavigation.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSCardNavigation.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useCardNavigation } from './config/useCardNavigation.js';\nimport { DSCardNavigationName } from './constants/index.js';\nimport { type DSCardNavigationT, DSCardNavigationPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledCardNavigationBoxWrapper } from './parts/style.js';\nimport { IconAndTextsRegion } from './parts/text-region/IconAndTextsRegion.js';\nimport { ActionsRegion } from './parts/ActionsRegion.js';\n\nconst DSCardNavigation: React.ComponentType<DSCardNavigationT.Props> = (props) => {\n const cardNavigationConfig = useCardNavigation(props);\n const {\n propsWithDefault,\n xstyledProps,\n globalProps,\n iconAndTextsRegionIsFocused,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n instanceUid,\n } = cardNavigationConfig;\n const { containerProps, title, description, type, Icon, actions, wrapText } = propsWithDefault;\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps<DSCardNavigationT.Props>(propsWithDefault);\n\n return (\n <StyledCardNavigationBoxWrapper\n {...globalProps}\n {...xstyledProps}\n {...containerProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n $isIconAndTextsRegionFocused={iconAndTextsRegionIsFocused}\n >\n <IconAndTextsRegion\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n title={title}\n description={description}\n wrapText={wrapText}\n type={type}\n Icon={Icon}\n showFocusRingAroundAll={showFocusRingAroundAll}\n hideFocusRingAroundAll={hideFocusRingAroundAll}\n />\n <ActionsRegion\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n actions={actions}\n instanceUid={instanceUid}\n />\n </StyledCardNavigationBoxWrapper>\n );\n};\n\nDSCardNavigation.displayName = DSCardNavigationName;\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = DSCardNavigationPropTypesSchema;\n\nexport { DSCardNavigation, DSCardNavigationWithSchema };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACyBnB,SAQE,KARF;AAzBJ,SAAS,UAAU,qBAAqB;AAExC,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAiC,uCAAuC;AACxE,SAAS,sCAAsC;AAC/C,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAE9B,MAAM,mBAAiE,CAAC,UAAU;AAChF,QAAM,uBAAuB,kBAAkB,KAAK;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,aAAa,MAAM,MAAM,SAAS,SAAS,IAAI;AAE9E,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAuC,gBAAgB;AAEzG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,8BAA8B;AAAA,MAE9B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport React from 'react';\nimport { useCardNavigation } from './config/useCardNavigation.js';\nimport { DSCardNavigationName } from './constants/index.js';\nimport { type DSCardNavigationT, DSCardNavigationPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledCardNavigationBoxWrapper } from './parts/style.js';\nimport { IconAndTextsRegion } from './parts/text-region/IconAndTextsRegion.js';\nimport { ActionsRegion } from './parts/ActionsRegion.js';\n\nconst DSCardNavigation: React.ComponentType<DSCardNavigationT.Props> = (props) => {\n const cardNavigationConfig = useCardNavigation(props);\n const {\n propsWithDefault,\n xstyledProps,\n globalProps,\n iconAndTextsRegionIsFocused,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n instanceUid,\n } = cardNavigationConfig;\n const { containerProps, title, description, type, Icon, actions, wrapText } = propsWithDefault;\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps<DSCardNavigationT.Props>(propsWithDefault);\n const layoutMode = useGetLayoutMode();\n const isSmall = layoutMode === 's' || layoutMode === 'xs';\n\n return (\n <StyledCardNavigationBoxWrapper\n {...globalProps}\n {...xstyledProps}\n {...containerProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n $isIconAndTextsRegionFocused={iconAndTextsRegionIsFocused}\n $isSmall={isSmall}\n >\n <IconAndTextsRegion\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n title={title}\n description={description}\n wrapText={wrapText}\n type={type}\n Icon={Icon}\n showFocusRingAroundAll={showFocusRingAroundAll}\n hideFocusRingAroundAll={hideFocusRingAroundAll}\n isSmall={isSmall}\n />\n <ActionsRegion\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n actions={actions}\n instanceUid={instanceUid}\n isSmall={isSmall}\n />\n </StyledCardNavigationBoxWrapper>\n );\n};\n\nDSCardNavigation.displayName = DSCardNavigationName;\nconst DSCardNavigationWithSchema = describe(DSCardNavigation);\nDSCardNavigationWithSchema.propTypes = DSCardNavigationPropTypesSchema;\n\nexport { DSCardNavigation, DSCardNavigationWithSchema };\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC4BnB,SASE,KATF;AA5BJ,SAAS,UAAU,qBAAqB;AACxC,SAAS,wBAAwB;AAEjC,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAiC,uCAAuC;AACxE,SAAS,sCAAsC;AAC/C,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAE9B,MAAM,mBAAiE,CAAC,UAAU;AAChF,QAAM,uBAAuB,kBAAkB,KAAK;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,gBAAgB,OAAO,aAAa,MAAM,MAAM,SAAS,SAAS,IAAI;AAE9E,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAuC,gBAAgB;AACzG,QAAM,aAAa,iBAAiB;AACpC,QAAM,UAAU,eAAe,OAAO,eAAe;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,8BAA8B;AAAA,MAC9B,UAAU;AAAA,MAEV;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/ActionsRegion.js CHANGED
@@ -10,35 +10,44 @@ import {
10
10
  const ActionsRegion = ({
11
11
  actions,
12
12
  instanceUid,
13
+ isSmall,
13
14
  getOwnerProps,
14
15
  getOwnerPropsArguments
15
16
  }) => {
16
17
  if (actions.length === 0) return null;
17
- return /* @__PURE__ */ jsx(StyledCardNavigationActions, { getOwnerProps, getOwnerPropsArguments, children: actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {
18
- const defaultIconJSX = /* @__PURE__ */ jsx(MoreOptionsVert, { "aria-label": "More options" });
19
- const iconJSX = icon ?? defaultIconJSX;
20
- return /* @__PURE__ */ jsx(
21
- StyledCardNavigationButtonWrapper,
22
- {
23
- getOwnerProps,
24
- getOwnerPropsArguments,
25
- children: /* @__PURE__ */ jsx(
26
- StyledCardNavigationActionButton,
18
+ return /* @__PURE__ */ jsx(
19
+ StyledCardNavigationActions,
20
+ {
21
+ $isSmall: isSmall,
22
+ getOwnerProps,
23
+ getOwnerPropsArguments,
24
+ children: actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {
25
+ const defaultIconJSX = /* @__PURE__ */ jsx(MoreOptionsVert, { "aria-label": "More options" });
26
+ const iconJSX = icon ?? defaultIconJSX;
27
+ return /* @__PURE__ */ jsx(
28
+ StyledCardNavigationButtonWrapper,
27
29
  {
28
- onClick,
29
- "aria-label": "More options",
30
- ...unexpectedButPreviouslySupportedOtherProps,
31
- buttonType: BUTTON_TYPES.ICON,
32
- size: BUTTON_SIZES.L,
33
30
  getOwnerProps,
34
31
  getOwnerPropsArguments,
35
- children: Icon ? /* @__PURE__ */ jsx(Icon, {}) : iconJSX
36
- }
37
- )
38
- },
39
- `${instanceUid}-${index}`
40
- );
41
- }) });
32
+ children: /* @__PURE__ */ jsx(
33
+ StyledCardNavigationActionButton,
34
+ {
35
+ onClick,
36
+ "aria-label": "More options",
37
+ ...unexpectedButPreviouslySupportedOtherProps,
38
+ buttonType: BUTTON_TYPES.ICON,
39
+ size: BUTTON_SIZES.L,
40
+ getOwnerProps,
41
+ getOwnerPropsArguments,
42
+ children: Icon ? /* @__PURE__ */ jsx(Icon, {}) : iconJSX
43
+ }
44
+ )
45
+ },
46
+ `${instanceUid}-${index}`
47
+ );
48
+ })
49
+ }
50
+ );
42
51
  };
43
52
  export {
44
53
  ActionsRegion
package/dist/esm/parts/ActionsRegion.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ActionsRegion.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { BUTTON_SIZES, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport React from 'react';\nimport type { DSCardNavigationT } from '../react-desc-prop-types.js';\nimport {\n StyledCardNavigationButtonWrapper,\n StyledCardNavigationActions,\n StyledCardNavigationActionButton,\n} from './style.js';\n\ninterface ActionRegionProps {\n actions: DSCardNavigationT.InternalProps['actions'];\n instanceUid: string;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nexport const ActionsRegion: React.ComponentType<ActionRegionProps> = ({\n actions,\n instanceUid,\n getOwnerProps,\n getOwnerPropsArguments,\n}) => {\n if (actions.length === 0) return null;\n return (\n <StyledCardNavigationActions getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {\n const defaultIconJSX = <MoreOptionsVert aria-label=\"More options\" />;\n const iconJSX = icon ?? defaultIconJSX;\n return (\n <StyledCardNavigationButtonWrapper\n // eslint-disable-next-line react/no-array-index-key\n key={`${instanceUid}-${index}`}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationActionButton\n onClick={onClick}\n aria-label=\"More options\"\n {...unexpectedButPreviouslySupportedOtherProps}\n buttonType={BUTTON_TYPES.ICON}\n size={BUTTON_SIZES.L}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {Icon ? <Icon /> : iconJSX}\n </StyledCardNavigationActionButton>\n </StyledCardNavigationButtonWrapper>\n );\n })}\n </StyledCardNavigationActions>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;AC2BQ;AA3B/B,SAAS,cAAc,oBAAoB;AAC3C,SAAS,uBAAuB;AAGhC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AASA,MAAM,gBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE,oBAAC,+BAA4B,eAA8B,wBACxD,kBAAQ,IAAI,CAAC,EAAE,MAAM,MAAM,SAAS,GAAG,2CAA2C,GAAG,UAAU;AAC9F,UAAM,iBAAiB,oBAAC,mBAAgB,cAAW,gBAAe;AAClE,UAAM,UAAU,QAAQ;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QAGC;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAW;AAAA,YACV,GAAG;AAAA,YACJ,YAAY,aAAa;AAAA,YACzB,MAAM,aAAa;AAAA,YACnB;AAAA,YACA;AAAA,YAEC,iBAAO,oBAAC,QAAK,IAAK;AAAA;AAAA,QACrB;AAAA;AAAA,MAdK,GAAG,WAAW,IAAI,KAAK;AAAA,IAe9B;AAAA,EAEJ,CAAC,GACH;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { BUTTON_SIZES, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport React from 'react';\nimport type { DSCardNavigationT } from '../react-desc-prop-types.js';\nimport {\n StyledCardNavigationButtonWrapper,\n StyledCardNavigationActions,\n StyledCardNavigationActionButton,\n} from './style.js';\n\ninterface ActionRegionProps {\n actions: DSCardNavigationT.InternalProps['actions'];\n instanceUid: string;\n isSmall: boolean;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nexport const ActionsRegion: React.ComponentType<ActionRegionProps> = ({\n actions,\n instanceUid,\n isSmall,\n getOwnerProps,\n getOwnerPropsArguments,\n}) => {\n if (actions.length === 0) return null;\n return (\n <StyledCardNavigationActions\n $isSmall={isSmall}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {actions.map(({ icon, Icon, onClick, ...unexpectedButPreviouslySupportedOtherProps }, index) => {\n const defaultIconJSX = <MoreOptionsVert aria-label=\"More options\" />;\n const iconJSX = icon ?? defaultIconJSX;\n return (\n <StyledCardNavigationButtonWrapper\n // eslint-disable-next-line react/no-array-index-key\n key={`${instanceUid}-${index}`}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationActionButton\n onClick={onClick}\n aria-label=\"More options\"\n {...unexpectedButPreviouslySupportedOtherProps}\n buttonType={BUTTON_TYPES.ICON}\n size={BUTTON_SIZES.L}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {Icon ? <Icon /> : iconJSX}\n </StyledCardNavigationActionButton>\n </StyledCardNavigationButtonWrapper>\n );\n })}\n </StyledCardNavigationActions>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACiCQ;AAjC/B,SAAS,cAAc,oBAAoB;AAC3C,SAAS,uBAAuB;AAGhC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAUA,MAAM,gBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MAEC,kBAAQ,IAAI,CAAC,EAAE,MAAM,MAAM,SAAS,GAAG,2CAA2C,GAAG,UAAU;AAC9F,cAAM,iBAAiB,oBAAC,mBAAgB,cAAW,gBAAe;AAClE,cAAM,UAAU,QAAQ;AACxB,eACE;AAAA,UAAC;AAAA;AAAA,YAGC;AAAA,YACA;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,cAAW;AAAA,gBACV,GAAG;AAAA,gBACJ,YAAY,aAAa;AAAA,gBACzB,MAAM,aAAa;AAAA,gBACnB;AAAA,gBACA;AAAA,gBAEC,iBAAO,oBAAC,QAAK,IAAK;AAAA;AAAA,YACrB;AAAA;AAAA,UAdK,GAAG,WAAW,IAAI,KAAK;AAAA,QAe9B;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/style.js CHANGED
@@ -47,12 +47,20 @@ const StyledCardNavigationContent = styled("div", {
47
47
  align-items: center;
48
48
  flex: 1;
49
49
  width: 100%;
50
+ ${(props) => props.$isSmall ? css`
51
+ justify-content: center;
52
+ text-align: center;
53
+ ` : css``}
50
54
  `;
51
55
  const StyledCardNavigationCentralContent = styled(Grid, {
52
56
  slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,
53
57
  name: DSCardNavigationName
54
58
  })`
55
59
  padding: 0 ${(props) => props.theme.space.xs};
60
+ margin: 4px 0;
61
+ ${(props) => props.$isSmall ? css`
62
+ min-height: 64px;
63
+ ` : css``}
56
64
  `;
57
65
  const StyledCardNavigationBoxWrapper = styled("div", {
58
66
  name: DSCardNavigationName,
@@ -62,7 +70,7 @@ const StyledCardNavigationBoxWrapper = styled("div", {
62
70
  min-height: 64px;
63
71
  width: 337px;
64
72
  display: flex;
65
- flex-direction: row;
73
+ flex-direction: ${(props) => props.$isSmall ? "column" : "row"};
66
74
  flex-wrap: nowrap;
67
75
  box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);
68
76
  border-radius: 2px;
@@ -93,7 +101,6 @@ const StyledCardNavigationBoxWrapper = styled("div", {
93
101
 
94
102
  ${(props) => props.$isIconAndTextsRegionFocused ? css`
95
103
  outline: 2px solid ${props.theme.colors.brand["700"]};
96
- outline-offset: 2px;
97
104
  ` : css``}
98
105
  `;
99
106
  const StyledCardNavigationIcon = styled("div", {
@@ -121,6 +128,10 @@ const StyledCardNavigationActions = styled("div", {
121
128
  flex-direction: row;
122
129
  align-items: center;
123
130
  gap: ${(props) => props.theme.space.xs};
131
+ ${(props) => props.$isSmall ? css`
132
+ justify-content: center;
133
+ padding-bottom: ${props.theme.space.xs};
134
+ ` : css``}
124
135
  `;
125
136
  const StyledCardNavigationButtonWrapper = styled("div", {
126
137
  name: DSCardNavigationName,
@@ -139,10 +150,13 @@ const StyledGridTextContainer = styled("div", {
139
150
  })`
140
151
  display: grid;
141
152
  grid-template-columns: max-content auto;
142
- align-items: center;
143
153
  min-width: 0;
144
154
  width: 100%;
145
155
  overflow: hidden;
156
+ ${(props) => props.$isSmall ? css`
157
+ grid-template-columns: 1fr;
158
+ grid-template-rows: auto auto;
159
+ ` : css``}
146
160
  &:focus {
147
161
  outline: none;
148
162
  }
package/dist/esm/parts/style.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/style.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { CARD_NAVIGATION_SLOTS, CardNavigationTypes, DSCardNavigationName } from '../constants/index.js';\n\nexport const StyledCardNavigationContentTitle = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE,\n})``;\n\nexport const StyledTitleTypography = styled(DSTypography, {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE_TYPOGRAPHY,\n preserveLegacyDataTestId: true,\n})`\n color: ${(props) => props.theme.colors.neutral['700']};\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 1.3846rem; // 18px -> 18/13 = 1.3846rem\n\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 1.125rem; // 18px -> 18/16 = 1.125rem\n }\n`;\n\nexport const StyledDescriptionTypography = styled(DSTypography, {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.DESCRIPTION_TEXT,\n preserveLegacyDataTestId: true,\n})`\n color: ${(props) => props.theme.colors.neutral['500']};\n font-size: 0.923rem; // 12px -> 12/13 = 0.923rem\n\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.8775rem; // 12px -> 10.5/12 = 0.8775rem\n }\n`;\n\nexport const StyledCardNavigationContentTitleWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE_WRAPPER,\n})`\n width: 100%;\n`;\n\nexport const StyledCardNavigationContent = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.CONTENT,\n})<{ wrapText?: boolean }>`\n display: flex;\n align-items: center;\n flex: 1;\n width: 100%;\n`;\n\nexport const StyledCardNavigationCentralContent = styled(Grid, {\n slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,\n name: DSCardNavigationName,\n})<{ wrapText?: boolean; AnyOverFlow?: boolean }>`\n padding: 0 ${(props) => props.theme.space.xs};\n`;\ninterface StyledCardNavigationBoxWrapperProps {\n fluid?: boolean;\n}\n\nexport const StyledCardNavigationBoxWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ROOT,\n})<StyledCardNavigationBoxWrapperProps & { $isIconAndTextsRegionFocused?: boolean }>`\n min-width: 240px;\n min-height: 64px;\n width: 337px;\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);\n border-radius: 2px;\n position: relative;\n outline: none;\n\n ${(props) => (props.fluid ? 'width: 100%' : '')};\n @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: ${(props) => (props.fluid ? 'width: 100%' : '414px')};\n }\n\n :after {\n display: block;\n content: '';\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n border: solid ${(props) => props.theme.space.xxs} transparent;\n border-radius: 2px;\n pointer-events: none;\n }\n &:hover {\n box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);\n outline-offset: 2px;\n }\n\n ${(props) =>\n props.$isIconAndTextsRegionFocused\n ? css`\n outline: 2px solid ${props.theme.colors.brand['700']};\n outline-offset: 2px;\n `\n : css``}\n`;\n\ninterface StyledCardNavigationIconProps {\n $type: (typeof CardNavigationTypes)[keyof typeof CardNavigationTypes];\n}\n\nexport const StyledCardNavigationIcon = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TYPE,\n})<StyledCardNavigationIconProps>`\n min-width: 64px;\n min-height: 64px;\n height: 100%;\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n padding: 0 ${(props) => props.theme.space.xs};\n display: flex;\n align-items: center;\n justify-content: center;\n fill: #ffffff;\n background-color: ${({ $type }) =>\n ($type === CardNavigationTypes.BORROWER && '#32aad1') ||\n ($type === CardNavigationTypes.FINANCIAL && '#1ba88d') ||\n ($type === CardNavigationTypes.LOAN && '#8e49b2') ||\n ($type === CardNavigationTypes.REGULATORY && '#db5575') ||\n '#32aad1'};\n`;\n\nexport const StyledCardNavigationActions = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ACTIONS,\n})`\n padding: 0 ${(props) => props.theme.space.xs};\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: ${(props) => props.theme.space.xs};\n`;\n\nexport const StyledCardNavigationButtonWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.BUTTON_WRAPPER,\n})`\n span,\n svg {\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledGridTextContainer = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.INTERACTIVE_ELEMENT_REGION,\n})`\n display: grid;\n grid-template-columns: max-content auto;\n align-items: center;\n min-width: 0;\n width: 100%;\n overflow: hidden;\n &:focus {\n outline: none;\n }\n cursor: pointer;\n`;\n\nexport const StyledCardNavigationActionButton = styled(DSButtonV3, {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ACTION_BUTTON,\n preserveLegacyDataTestId: true,\n})``;\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { CARD_NAVIGATION_SLOTS, CardNavigationTypes, DSCardNavigationName } from '../constants/index.js';\n\nexport const StyledCardNavigationContentTitle = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE,\n})``;\n\nexport const StyledTitleTypography = styled(DSTypography, {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE_TYPOGRAPHY,\n preserveLegacyDataTestId: true,\n})`\n color: ${(props) => props.theme.colors.neutral['700']};\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 1.3846rem; // 18px -> 18/13 = 1.3846rem\n\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 1.125rem; // 18px -> 18/16 = 1.125rem\n }\n`;\n\nexport const StyledDescriptionTypography = styled(DSTypography, {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.DESCRIPTION_TEXT,\n preserveLegacyDataTestId: true,\n})`\n color: ${(props) => props.theme.colors.neutral['500']};\n font-size: 0.923rem; // 12px -> 12/13 = 0.923rem\n\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.8775rem; // 12px -> 10.5/12 = 0.8775rem\n }\n`;\n\nexport const StyledCardNavigationContentTitleWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE_WRAPPER,\n})`\n width: 100%;\n`;\n\nexport const StyledCardNavigationContent = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.CONTENT,\n})<{ wrapText?: boolean; $isSmall?: boolean }>`\n display: flex;\n align-items: center;\n flex: 1;\n width: 100%;\n ${(props) =>\n props.$isSmall\n ? css`\n justify-content: center;\n text-align: center;\n `\n : css``}\n`;\n\nexport const StyledCardNavigationCentralContent = styled(Grid, {\n slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,\n name: DSCardNavigationName,\n})<{ wrapText?: boolean; AnyOverFlow?: boolean; $isSmall?: boolean }>`\n padding: 0 ${(props) => props.theme.space.xs};\n margin: 4px 0;\n ${(props) =>\n props.$isSmall\n ? css`\n min-height: 64px;\n `\n : css``}\n`;\ninterface StyledCardNavigationBoxWrapperProps {\n fluid?: boolean;\n $isSmall?: boolean;\n}\n\nexport const StyledCardNavigationBoxWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ROOT,\n})<StyledCardNavigationBoxWrapperProps & { $isIconAndTextsRegionFocused?: boolean }>`\n min-width: 240px;\n min-height: 64px;\n width: 337px;\n display: flex;\n flex-direction: ${(props) => (props.$isSmall ? 'column' : 'row')};\n flex-wrap: nowrap;\n box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);\n border-radius: 2px;\n position: relative;\n outline: none;\n\n ${(props) => (props.fluid ? 'width: 100%' : '')};\n @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: ${(props) => (props.fluid ? 'width: 100%' : '414px')};\n }\n\n :after {\n display: block;\n content: '';\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n border: solid ${(props) => props.theme.space.xxs} transparent;\n border-radius: 2px;\n pointer-events: none;\n }\n &:hover {\n box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);\n outline-offset: 2px;\n }\n\n ${(props) =>\n props.$isIconAndTextsRegionFocused\n ? css`\n outline: 2px solid ${props.theme.colors.brand['700']};\n `\n : css``}\n`;\n\ninterface StyledCardNavigationIconProps {\n $type: (typeof CardNavigationTypes)[keyof typeof CardNavigationTypes];\n $isSmall?: boolean;\n}\n\nexport const StyledCardNavigationIcon = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TYPE,\n})<StyledCardNavigationIconProps>`\n min-width: 64px;\n min-height: 64px;\n height: 100%;\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n padding: 0 ${(props) => props.theme.space.xs};\n display: flex;\n align-items: center;\n justify-content: center;\n fill: #ffffff;\n background-color: ${({ $type }) =>\n ($type === CardNavigationTypes.BORROWER && '#32aad1') ||\n ($type === CardNavigationTypes.FINANCIAL && '#1ba88d') ||\n ($type === CardNavigationTypes.LOAN && '#8e49b2') ||\n ($type === CardNavigationTypes.REGULATORY && '#db5575') ||\n '#32aad1'};\n`;\n\nexport const StyledCardNavigationActions = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ACTIONS,\n})<{ $isSmall?: boolean }>`\n padding: 0 ${(props) => props.theme.space.xs};\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: ${(props) => props.theme.space.xs};\n ${(props) =>\n props.$isSmall\n ? css`\n justify-content: center;\n padding-bottom: ${props.theme.space.xs};\n `\n : css``}\n`;\n\nexport const StyledCardNavigationButtonWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.BUTTON_WRAPPER,\n})`\n span,\n svg {\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledGridTextContainer = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.INTERACTIVE_ELEMENT_REGION,\n})<{ $isSmall?: boolean }>`\n display: grid;\n grid-template-columns: max-content auto;\n min-width: 0;\n width: 100%;\n overflow: hidden;\n ${(props) =>\n props.$isSmall\n ? css`\n grid-template-columns: 1fr;\n grid-template-rows: auto auto;\n `\n : css``}\n &:focus {\n outline: none;\n }\n cursor: pointer;\n`;\n\nexport const StyledCardNavigationActionButton = styled(DSButtonV3, {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ACTION_BUTTON,\n preserveLegacyDataTestId: true,\n})``;\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/text-region/IconAndTextsRegion.js CHANGED
@@ -18,6 +18,7 @@ const IconAndTextsRegion = ({
18
18
  Icon,
19
19
  showFocusRingAroundAll,
20
20
  hideFocusRingAroundAll,
21
+ isSmall,
21
22
  getOwnerProps,
22
23
  getOwnerPropsArguments
23
24
  }) => {
@@ -50,6 +51,7 @@ const IconAndTextsRegion = ({
50
51
  descriptionHandleRef,
51
52
  showFocusRingAroundAll,
52
53
  hideFocusRingAroundAll,
54
+ isSmall,
53
55
  getOwnerProps,
54
56
  getOwnerPropsArguments
55
57
  }
@@ -66,6 +68,7 @@ const IconAndTextsRegion = ({
66
68
  descriptionHandleRef,
67
69
  showFocusRingAroundAll,
68
70
  hideFocusRingAroundAll,
71
+ isSmall,
69
72
  getOwnerProps,
70
73
  getOwnerPropsArguments
71
74
  }
package/dist/esm/parts/text-region/IconAndTextsRegion.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/text-region/IconAndTextsRegion.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { useOnOverflowChange } from '@elliemae/ds-hooks-on-overflow-change';\nimport type { DSTooltipV3T } from '@elliemae/ds-tooltip-v3';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { DSTypography, TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport { IconAndTextsRegionContent } from './IconAndTextsRegionContent.js';\n\ntype TooltipTextProps = DSTooltipV3T.CustomInterface<{\n title: string;\n description: string;\n}>;\n\nconst TooltipText: React.ComponentType<TooltipTextProps> = ({ title, description }) => (\n <Grid>\n <DSTypography variant={TYPOGRAPHY_VARIANTS.H5_ARTICLE}>{title}</DSTypography>\n <DSTypography variant={TYPOGRAPHY_VARIANTS.B1}>{description}</DSTypography>\n </Grid>\n);\n\ninterface IconAndTextsRegionProps {\n title: DSCardNavigationT.InternalProps['title'];\n description: DSCardNavigationT.InternalProps['description'];\n wrapText: DSCardNavigationT.InternalProps['wrapText'];\n type: DSCardNavigationT.InternalProps['type'];\n Icon: DSCardNavigationT.InternalProps['Icon'];\n showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nexport const IconAndTextsRegion: React.ComponentType<IconAndTextsRegionProps> = ({\n title,\n description,\n wrapText,\n type,\n Icon,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n getOwnerProps,\n getOwnerPropsArguments,\n}) => {\n const [isTitleTruncating, setIsTitleTruncating] = React.useState(false);\n const [isDescriptionTruncating, setIsDescriptionTruncating] = React.useState(false);\n\n const AnyOverFlow = isTitleTruncating || isDescriptionTruncating;\n\n const { handleRef: titleHandleRef } = useOnOverflowChange({\n onOverflowStateChange: setIsTitleTruncating,\n });\n\n const { handleRef: descriptionHandleRef } = useOnOverflowChange({\n onOverflowStateChange: setIsDescriptionTruncating,\n });\n const TooltipTextProps = React.useMemo(\n () => ({\n title,\n description,\n }),\n [title, description],\n );\n\n if (AnyOverFlow)\n return (\n <DSTooltipV3<TooltipTextProps> Text={TooltipText} textProps={TooltipTextProps}>\n <IconAndTextsRegionContent\n title={title}\n description={description}\n wrapText={wrapText}\n type={type}\n Icon={Icon}\n titleHandleRef={titleHandleRef}\n descriptionHandleRef={descriptionHandleRef}\n showFocusRingAroundAll={showFocusRingAroundAll}\n hideFocusRingAroundAll={hideFocusRingAroundAll}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </DSTooltipV3>\n );\n return (\n <IconAndTextsRegionContent\n title={title}\n description={description}\n wrapText={wrapText}\n type={type}\n Icon={Icon}\n titleHandleRef={titleHandleRef}\n descriptionHandleRef={descriptionHandleRef}\n showFocusRingAroundAll={showFocusRingAroundAll}\n hideFocusRingAroundAll={hideFocusRingAroundAll}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACerB,SACE,KADF;AAfF,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAEpC,SAAS,mBAAmB;AAC5B,SAAS,cAAc,2BAA2B;AAClD,OAAOA,YAAW;AAElB,SAAS,iCAAiC;AAO1C,MAAM,cAAqD,CAAC,EAAE,OAAO,YAAY,MAC/E,qBAAC,QACC;AAAA,sBAAC,gBAAa,SAAS,oBAAoB,YAAa,iBAAM;AAAA,EAC9D,oBAAC,gBAAa,SAAS,oBAAoB,IAAK,uBAAY;AAAA,GAC9D;AAeK,MAAM,qBAAmE,CAAC;AAAA,EAC/E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,mBAAmB,oBAAoB,IAAIA,OAAM,SAAS,KAAK;AACtE,QAAM,CAAC,yBAAyB,0BAA0B,IAAIA,OAAM,SAAS,KAAK;AAElF,QAAM,cAAc,qBAAqB;AAEzC,QAAM,EAAE,WAAW,eAAe,IAAI,oBAAoB;AAAA,IACxD,uBAAuB;AAAA,EACzB,CAAC;AAED,QAAM,EAAE,WAAW,qBAAqB,IAAI,oBAAoB;AAAA,IAC9D,uBAAuB;AAAA,EACzB,CAAC;AACD,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,WAAW;AAAA,EACrB;AAEA,MAAI;AACF,WACE,oBAAC,eAA8B,MAAM,aAAa,WAAW,kBAC3D;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { useOnOverflowChange } from '@elliemae/ds-hooks-on-overflow-change';\nimport type { DSTooltipV3T } from '@elliemae/ds-tooltip-v3';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { DSTypography, TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport { IconAndTextsRegionContent } from './IconAndTextsRegionContent.js';\n\ntype TooltipTextProps = DSTooltipV3T.CustomInterface<{\n title: string;\n description: string;\n}>;\n\nconst TooltipText: React.ComponentType<TooltipTextProps> = ({ title, description }) => (\n <Grid>\n <DSTypography variant={TYPOGRAPHY_VARIANTS.H5_ARTICLE}>{title}</DSTypography>\n <DSTypography variant={TYPOGRAPHY_VARIANTS.B1}>{description}</DSTypography>\n </Grid>\n);\n\ninterface IconAndTextsRegionProps {\n title: DSCardNavigationT.InternalProps['title'];\n description: DSCardNavigationT.InternalProps['description'];\n wrapText: DSCardNavigationT.InternalProps['wrapText'];\n type: DSCardNavigationT.InternalProps['type'];\n Icon: DSCardNavigationT.InternalProps['Icon'];\n showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n isSmall: boolean;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nexport const IconAndTextsRegion: React.ComponentType<IconAndTextsRegionProps> = ({\n title,\n description,\n wrapText,\n type,\n Icon,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n isSmall,\n getOwnerProps,\n getOwnerPropsArguments,\n}) => {\n const [isTitleTruncating, setIsTitleTruncating] = React.useState(false);\n const [isDescriptionTruncating, setIsDescriptionTruncating] = React.useState(false);\n\n const AnyOverFlow = isTitleTruncating || isDescriptionTruncating;\n\n const { handleRef: titleHandleRef } = useOnOverflowChange({\n onOverflowStateChange: setIsTitleTruncating,\n });\n\n const { handleRef: descriptionHandleRef } = useOnOverflowChange({\n onOverflowStateChange: setIsDescriptionTruncating,\n });\n const TooltipTextProps = React.useMemo(\n () => ({\n title,\n description,\n }),\n [title, description],\n );\n\n if (AnyOverFlow)\n return (\n <DSTooltipV3<TooltipTextProps> Text={TooltipText} textProps={TooltipTextProps}>\n <IconAndTextsRegionContent\n title={title}\n description={description}\n wrapText={wrapText}\n type={type}\n Icon={Icon}\n titleHandleRef={titleHandleRef}\n descriptionHandleRef={descriptionHandleRef}\n showFocusRingAroundAll={showFocusRingAroundAll}\n hideFocusRingAroundAll={hideFocusRingAroundAll}\n isSmall={isSmall}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </DSTooltipV3>\n );\n return (\n <IconAndTextsRegionContent\n title={title}\n description={description}\n wrapText={wrapText}\n type={type}\n Icon={Icon}\n titleHandleRef={titleHandleRef}\n descriptionHandleRef={descriptionHandleRef}\n showFocusRingAroundAll={showFocusRingAroundAll}\n hideFocusRingAroundAll={hideFocusRingAroundAll}\n isSmall={isSmall}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACerB,SACE,KADF;AAfF,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAEpC,SAAS,mBAAmB;AAC5B,SAAS,cAAc,2BAA2B;AAClD,OAAOA,YAAW;AAElB,SAAS,iCAAiC;AAO1C,MAAM,cAAqD,CAAC,EAAE,OAAO,YAAY,MAC/E,qBAAC,QACC;AAAA,sBAAC,gBAAa,SAAS,oBAAoB,YAAa,iBAAM;AAAA,EAC9D,oBAAC,gBAAa,SAAS,oBAAoB,IAAK,uBAAY;AAAA,GAC9D;AAgBK,MAAM,qBAAmE,CAAC;AAAA,EAC/E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,mBAAmB,oBAAoB,IAAIA,OAAM,SAAS,KAAK;AACtE,QAAM,CAAC,yBAAyB,0BAA0B,IAAIA,OAAM,SAAS,KAAK;AAElF,QAAM,cAAc,qBAAqB;AAEzC,QAAM,EAAE,WAAW,eAAe,IAAI,oBAAoB;AAAA,IACxD,uBAAuB;AAAA,EACzB,CAAC;AAED,QAAM,EAAE,WAAW,qBAAqB,IAAI,oBAAoB;AAAA,IAC9D,uBAAuB;AAAA,EACzB,CAAC;AACD,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,WAAW;AAAA,EACrB;AAEA,MAAI;AACF,WACE,oBAAC,eAA8B,MAAM,aAAa,WAAW,kBAC3D;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/text-region/IconAndTextsRegionContent.js CHANGED
@@ -24,6 +24,7 @@ const IconAndTextsRegionContent = React2.memo((props) => {
24
24
  descriptionHandleRef,
25
25
  type,
26
26
  Icon,
27
+ isSmall,
27
28
  showFocusRingAroundAll,
28
29
  hideFocusRingAroundAll,
29
30
  getOwnerProps,
@@ -37,6 +38,7 @@ const IconAndTextsRegionContent = React2.memo((props) => {
37
38
  tabIndex: 0,
38
39
  onFocus: showFocusRingAroundAll,
39
40
  onBlur: hideFocusRingAroundAll,
41
+ $isSmall: isSmall,
40
42
  getOwnerProps,
41
43
  getOwnerPropsArguments,
42
44
  children: [
@@ -53,48 +55,57 @@ const IconAndTextsRegionContent = React2.memo((props) => {
53
55
  /* @__PURE__ */ jsx(
54
56
  StyledCardNavigationCentralContent,
55
57
  {
58
+ $isSmall: isSmall,
56
59
  cols,
57
60
  getOwnerProps,
58
61
  getOwnerPropsArguments,
59
- children: /* @__PURE__ */ jsx(StyledCardNavigationContent, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsxs(
60
- StyledCardNavigationContentTitleWrapper,
62
+ children: /* @__PURE__ */ jsx(
63
+ StyledCardNavigationContent,
61
64
  {
65
+ $isSmall: isSmall,
62
66
  getOwnerProps,
63
67
  getOwnerPropsArguments,
64
- children: [
65
- /* @__PURE__ */ jsx(
66
- StyledCardNavigationContentTitle,
67
- {
68
- getOwnerProps,
69
- getOwnerPropsArguments,
70
- children: /* @__PURE__ */ jsx(
71
- StyledTitleTypography,
68
+ children: /* @__PURE__ */ jsxs(
69
+ StyledCardNavigationContentTitleWrapper,
70
+ {
71
+ getOwnerProps,
72
+ getOwnerPropsArguments,
73
+ children: [
74
+ /* @__PURE__ */ jsx(
75
+ StyledCardNavigationContentTitle,
72
76
  {
73
- innerRef: titleHandleRef,
77
+ getOwnerProps,
78
+ getOwnerPropsArguments,
79
+ children: /* @__PURE__ */ jsx(
80
+ StyledTitleTypography,
81
+ {
82
+ innerRef: titleHandleRef,
83
+ truncateWithEllipsis: !wrapText,
84
+ variant: TYPOGRAPHY_VARIANTS.B1,
85
+ getOwnerProps,
86
+ getOwnerPropsArguments,
87
+ children: title
88
+ }
89
+ )
90
+ }
91
+ ),
92
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
93
+ StyledDescriptionTypography,
94
+ {
95
+ innerRef: descriptionHandleRef,
74
96
  truncateWithEllipsis: !wrapText,
75
97
  variant: TYPOGRAPHY_VARIANTS.B1,
98
+ "data-testid": CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
76
99
  getOwnerProps,
77
100
  getOwnerPropsArguments,
78
- children: title
101
+ children: description
79
102
  }
80
- )
81
- }
82
- ),
83
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
84
- StyledDescriptionTypography,
85
- {
86
- innerRef: descriptionHandleRef,
87
- truncateWithEllipsis: !wrapText,
88
- variant: TYPOGRAPHY_VARIANTS.B1,
89
- "data-testid": CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT,
90
- getOwnerProps,
91
- getOwnerPropsArguments,
92
- children: description
93
- }
94
- ) })
95
- ]
103
+ ) })
104
+ ]
105
+ }
106
+ )
96
107
  }
97
- ) })
108
+ )
98
109
  }
99
110
  )
100
111
  ]
package/dist/esm/parts/text-region/IconAndTextsRegionContent.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/text-region/IconAndTextsRegionContent.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { SvgIconT } from '@elliemae/ds-icons';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport { CARD_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport {\n StyledCardNavigationCentralContent,\n StyledCardNavigationContent,\n StyledCardNavigationContentTitle,\n StyledCardNavigationContentTitleWrapper,\n StyledCardNavigationIcon,\n StyledDescriptionTypography,\n StyledGridTextContainer,\n StyledTitleTypography,\n} from '../style.js';\n\nconst mainIconColor = ['neutral', '0'] as SvgIconT.ColorType;\nconst cols = ['1fr'];\n\ninterface IconAndTextsRegionContentProps {\n title: DSCardNavigationT.InternalProps['title'];\n description: DSCardNavigationT.InternalProps['description'];\n wrapText: DSCardNavigationT.InternalProps['wrapText'];\n type: DSCardNavigationT.InternalProps['type'];\n Icon: DSCardNavigationT.InternalProps['Icon'];\n\n titleHandleRef: (node: HTMLElement | null) => void;\n descriptionHandleRef: (node: HTMLElement | null) => void;\n showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nexport const IconAndTextsRegionContent = React.memo((props: IconAndTextsRegionContentProps) => {\n const {\n title,\n description,\n wrapText,\n titleHandleRef,\n descriptionHandleRef,\n type,\n Icon,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n getOwnerProps,\n getOwnerPropsArguments,\n } = props;\n\n return (\n <StyledGridTextContainer\n data-type={type}\n role=\"button\"\n tabIndex={0}\n onFocus={showFocusRingAroundAll}\n onBlur={hideFocusRingAroundAll}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationIcon\n $type={type}\n role=\"presentation\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Icon size=\"l\" color={mainIconColor} />\n </StyledCardNavigationIcon>\n\n <StyledCardNavigationCentralContent\n cols={cols}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledCardNavigationContentTitleWrapper\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationContentTitle\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledTitleTypography\n innerRef={titleHandleRef}\n truncateWithEllipsis={!wrapText}\n variant={TYPOGRAPHY_VARIANTS.B1}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {title}\n </StyledTitleTypography>\n </StyledCardNavigationContentTitle>\n <div>\n <StyledDescriptionTypography\n innerRef={descriptionHandleRef}\n truncateWithEllipsis={!wrapText}\n variant={TYPOGRAPHY_VARIANTS.B1}\n data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {description}\n </StyledDescriptionTypography>\n </div>\n </StyledCardNavigationContentTitleWrapper>\n </StyledCardNavigationContent>\n </StyledCardNavigationCentralContent>\n </StyledGridTextContainer>\n );\n});\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACiEf,cASE,YATF;AAhER,SAAS,2BAA2B;AACpC,OAAOA,YAAW;AAClB,SAAS,mCAAmC;AAE5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,gBAAgB,CAAC,WAAW,GAAG;AACrC,MAAM,OAAO,CAAC,KAAK;AAiBZ,MAAM,4BAA4BA,OAAM,KAAK,CAAC,UAA0C;AAC7F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YAEA,8BAAC,QAAK,MAAK,KAAI,OAAO,eAAe;AAAA;AAAA,QACvC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YAEA,8BAAC,+BAA4B,eAA8B,wBACzD;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC;AAAA,sBACA;AAAA,sBAEA;AAAA,wBAAC;AAAA;AAAA,0BACC,UAAU;AAAA,0BACV,sBAAsB,CAAC;AAAA,0BACvB,SAAS,oBAAoB;AAAA,0BAC7B;AAAA,0BACA;AAAA,0BAEC;AAAA;AAAA,sBACH;AAAA;AAAA,kBACF;AAAA,kBACA,oBAAC,SACC;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAU;AAAA,sBACV,sBAAsB,CAAC;AAAA,sBACvB,SAAS,oBAAoB;AAAA,sBAC7B,eAAa,4BAA4B;AAAA,sBACzC;AAAA,sBACA;AAAA,sBAEC;AAAA;AAAA,kBACH,GACF;AAAA;AAAA;AAAA,YACF,GACF;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { SvgIconT } from '@elliemae/ds-icons';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport { CARD_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport {\n StyledCardNavigationCentralContent,\n StyledCardNavigationContent,\n StyledCardNavigationContentTitle,\n StyledCardNavigationContentTitleWrapper,\n StyledCardNavigationIcon,\n StyledDescriptionTypography,\n StyledGridTextContainer,\n StyledTitleTypography,\n} from '../style.js';\n\nconst mainIconColor = ['neutral', '0'] as SvgIconT.ColorType;\nconst cols = ['1fr'];\n\ninterface IconAndTextsRegionContentProps {\n title: DSCardNavigationT.InternalProps['title'];\n description: DSCardNavigationT.InternalProps['description'];\n wrapText: DSCardNavigationT.InternalProps['wrapText'];\n type: DSCardNavigationT.InternalProps['type'];\n Icon: DSCardNavigationT.InternalProps['Icon'];\n isSmall: boolean;\n\n titleHandleRef: (node: HTMLElement | null) => void;\n descriptionHandleRef: (node: HTMLElement | null) => void;\n showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nexport const IconAndTextsRegionContent = React.memo((props: IconAndTextsRegionContentProps) => {\n const {\n title,\n description,\n wrapText,\n titleHandleRef,\n descriptionHandleRef,\n type,\n Icon,\n isSmall,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n getOwnerProps,\n getOwnerPropsArguments,\n } = props;\n\n return (\n <StyledGridTextContainer\n data-type={type}\n role=\"button\"\n tabIndex={0}\n onFocus={showFocusRingAroundAll}\n onBlur={hideFocusRingAroundAll}\n $isSmall={isSmall}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationIcon\n $type={type}\n role=\"presentation\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Icon size=\"l\" color={mainIconColor} />\n </StyledCardNavigationIcon>\n\n <StyledCardNavigationCentralContent\n $isSmall={isSmall}\n cols={cols}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationContent\n $isSmall={isSmall}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationContentTitleWrapper\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCardNavigationContentTitle\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledTitleTypography\n innerRef={titleHandleRef}\n truncateWithEllipsis={!wrapText}\n variant={TYPOGRAPHY_VARIANTS.B1}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {title}\n </StyledTitleTypography>\n </StyledCardNavigationContentTitle>\n <div>\n <StyledDescriptionTypography\n innerRef={descriptionHandleRef}\n truncateWithEllipsis={!wrapText}\n variant={TYPOGRAPHY_VARIANTS.B1}\n data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {description}\n </StyledDescriptionTypography>\n </div>\n </StyledCardNavigationContentTitleWrapper>\n </StyledCardNavigationContent>\n </StyledCardNavigationCentralContent>\n </StyledGridTextContainer>\n );\n});\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACoEf,cAcE,YAdF;AAnER,SAAS,2BAA2B;AACpC,OAAOA,YAAW;AAClB,SAAS,mCAAmC;AAE5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,gBAAgB,CAAC,WAAW,GAAG;AACrC,MAAM,OAAO,CAAC,KAAK;AAkBZ,MAAM,4BAA4BA,OAAM,KAAK,CAAC,UAA0C;AAC7F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YAEA,8BAAC,QAAK,MAAK,KAAI,OAAO,eAAe;AAAA;AAAA,QACvC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA;AAAA,oBAEA;AAAA;AAAA,wBAAC;AAAA;AAAA,0BACC;AAAA,0BACA;AAAA,0BAEA;AAAA,4BAAC;AAAA;AAAA,8BACC,UAAU;AAAA,8BACV,sBAAsB,CAAC;AAAA,8BACvB,SAAS,oBAAoB;AAAA,8BAC7B;AAAA,8BACA;AAAA,8BAEC;AAAA;AAAA,0BACH;AAAA;AAAA,sBACF;AAAA,sBACA,oBAAC,SACC;AAAA,wBAAC;AAAA;AAAA,0BACC,UAAU;AAAA,0BACV,sBAAsB,CAAC;AAAA,0BACvB,SAAS,oBAAoB;AAAA,0BAC7B,eAAa,4BAA4B;AAAA,0BACzC;AAAA,0BACA;AAAA,0BAEC;AAAA;AAAA,sBACH,GACF;AAAA;AAAA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
6
6
  "names": ["React"]
7
7
  }
package/dist/types/parts/ActionsRegion.d.ts CHANGED
@@ -3,6 +3,7 @@ import type { DSCardNavigationT } from '../react-desc-prop-types.js';
3
3
  interface ActionRegionProps {
4
4
  actions: DSCardNavigationT.InternalProps['actions'];
5
5
  instanceUid: string;
6
+ isSmall: boolean;
6
7
  getOwnerProps?: () => object;
7
8
  getOwnerPropsArguments?: () => object;
8
9
  }
package/dist/types/parts/style.d.ts CHANGED
@@ -5,23 +5,31 @@ export declare const StyledDescriptionTypography: import("styled-components").St
5
5
  export declare const StyledCardNavigationContentTitleWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
6
6
  export declare const StyledCardNavigationContent: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
7
7
  wrapText?: boolean;
8
+ $isSmall?: boolean;
8
9
  } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
9
10
  export declare const StyledCardNavigationCentralContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
10
11
  wrapText?: boolean;
11
12
  AnyOverFlow?: boolean;
13
+ $isSmall?: boolean;
12
14
  } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
13
15
  interface StyledCardNavigationBoxWrapperProps {
14
16
  fluid?: boolean;
17
+ $isSmall?: boolean;
15
18
  }
16
19
  export declare const StyledCardNavigationBoxWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledCardNavigationBoxWrapperProps & {
17
20
  $isIconAndTextsRegionFocused?: boolean;
18
21
  } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
19
22
  interface StyledCardNavigationIconProps {
20
23
  $type: (typeof CardNavigationTypes)[keyof typeof CardNavigationTypes];
24
+ $isSmall?: boolean;
21
25
  }
22
26
  export declare const StyledCardNavigationIcon: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledCardNavigationIconProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
23
- export declare const StyledCardNavigationActions: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
27
+ export declare const StyledCardNavigationActions: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
28
+ $isSmall?: boolean;
29
+ } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
24
30
  export declare const StyledCardNavigationButtonWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
25
- export declare const StyledGridTextContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
31
+ export declare const StyledGridTextContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
32
+ $isSmall?: boolean;
33
+ } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
26
34
  export declare const StyledCardNavigationActionButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>>, never>;
27
35
  export {};
package/dist/types/parts/text-region/IconAndTextsRegion.d.ts CHANGED
@@ -8,6 +8,7 @@ interface IconAndTextsRegionProps {
8
8
  Icon: DSCardNavigationT.InternalProps['Icon'];
9
9
  showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;
10
10
  hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;
11
+ isSmall: boolean;
11
12
  getOwnerProps?: () => object;
12
13
  getOwnerPropsArguments?: () => object;
13
14
  }
package/dist/types/parts/text-region/IconAndTextsRegionContent.d.ts CHANGED
@@ -6,6 +6,7 @@ interface IconAndTextsRegionContentProps {
6
6
  wrapText: DSCardNavigationT.InternalProps['wrapText'];
7
7
  type: DSCardNavigationT.InternalProps['type'];
8
8
  Icon: DSCardNavigationT.InternalProps['Icon'];
9
+ isSmall: boolean;
9
10
  titleHandleRef: (node: HTMLElement | null) => void;
10
11
  descriptionHandleRef: (node: HTMLElement | null) => void;
11
12
  showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-card-navigation",
3
- "version": "3.60.0-next.5",
3
+ "version": "3.60.0-next.51",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Card Navigation",
6
6
  "files": [
@@ -35,49 +35,46 @@
35
35
  "reportFile": "tests.xml",
36
36
  "indent": 4
37
37
  },
38
- "scripts": {
39
- "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
40
- "test": "playwright test -c ./playwright.config.mjs && pui-cli test --passWithNoTests --coverage=\"false\"",
41
- "lint": "node ../../../scripts/lint.mjs --fix",
42
- "lint:strict": "node ../../../scripts/lint-strict.mjs",
43
- "dts": "node ../../../scripts/dts.mjs",
44
- "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
45
- "checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
46
- },
47
38
  "dependencies": {
48
- "@elliemae/ds-button-v2": "3.60.0-next.5",
49
- "@elliemae/ds-grid": "3.60.0-next.5",
50
- "@elliemae/ds-hooks-on-blur-out": "3.60.0-next.5",
51
- "@elliemae/ds-hooks-on-overflow-change": "3.60.0-next.5",
52
- "@elliemae/ds-icons": "3.60.0-next.5",
53
- "@elliemae/ds-props-helpers": "3.60.0-next.5",
54
- "@elliemae/ds-system": "3.60.0-next.5",
55
- "@elliemae/ds-tooltip-v3": "3.60.0-next.5",
56
- "@elliemae/ds-typography": "3.60.0-next.5",
57
- "uid": "catalog:"
39
+ "uid": "^2.0.2",
40
+ "@elliemae/ds-props-helpers": "3.60.0-next.51",
41
+ "@elliemae/ds-hooks-on-overflow-change": "3.60.0-next.51",
42
+ "@elliemae/ds-system": "3.60.0-next.51",
43
+ "@elliemae/ds-grid": "3.60.0-next.51",
44
+ "@elliemae/ds-tooltip-v3": "3.60.0-next.51",
45
+ "@elliemae/ds-icons": "3.60.0-next.51",
46
+ "@elliemae/ds-typography": "3.60.0-next.51",
47
+ "@elliemae/ds-button-v2": "3.60.0-next.51"
58
48
  },
59
49
  "devDependencies": {
60
- "@elliemae/ds-icons": "workspace:*",
61
- "@elliemae/ds-monorepo-devops": "3.60.0-next.5",
62
- "@elliemae/ds-test-utils": "3.60.0-next.5",
63
- "@elliemae/ds-typescript-helpers": "3.60.0-next.5",
64
- "@elliemae/pui-cli": "catalog:",
65
- "@playwright/experimental-ct-react": "catalog:",
66
- "@xstyled/system": "catalog:",
67
- "jest": "catalog:",
68
- "styled-components": "catalog:"
50
+ "@playwright/experimental-ct-react": "^1.51.1",
51
+ "@xstyled/system": "~3.8.1",
52
+ "jest": "^30.0.0",
53
+ "styled-components": "~5.3.9",
54
+ "@elliemae/ds-icons": "3.60.0-next.51",
55
+ "@elliemae/ds-test-utils": "3.60.0-next.51",
56
+ "@elliemae/ds-monorepo-devops": "3.60.0-next.51",
57
+ "@elliemae/ds-typescript-helpers": "3.60.0-next.51"
69
58
  },
70
59
  "peerDependencies": {
71
- "@testing-library/jest-dom": "catalog:",
72
- "@testing-library/react": "catalog:",
73
- "@testing-library/user-event": "catalog:",
74
- "react": "catalog:",
75
- "react-dom": "catalog:",
76
- "styled-components": "catalog:"
60
+ "@testing-library/jest-dom": "^6.6.3",
61
+ "@testing-library/react": "^16.0.1",
62
+ "@testing-library/user-event": "~14.6.1",
63
+ "react": "^18.3.1",
64
+ "react-dom": "^18.3.1",
65
+ "styled-components": "~5.3.9"
77
66
  },
78
67
  "publishConfig": {
79
68
  "access": "public",
80
69
  "typeSafety": true
81
70
  },
82
- "gitHead": "2c3d9fa1d09e130b4e5f43d9f817c96e10709182"
83
- }
71
+ "scripts": {
72
+ "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
73
+ "test": "playwright test -c ./playwright.config.mjs && ds-monorepo-devops test --passWithNoTests --coverage=\"false\"",
74
+ "lint": "node ../../../scripts/lint.mjs --fix",
75
+ "lint:strict": "node ../../../scripts/lint-strict.mjs",
76
+ "dts": "node ../../../scripts/dts.mjs",
77
+ "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
78
+ "checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
79
+ }
80
+ }