@elliemae/ds-tooltip-v3 3.45.0-rc.0 → 3.45.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -58,6 +58,7 @@ const DSTooltipV3 = (props) => {
58
58
  withoutAnimation,
59
59
  withoutPortal,
60
60
  portalDOMContainer,
61
+ applyTooltipOverflowWrap,
61
62
  ...extraPopperJsProps
62
63
  } = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_defaultProps.defaultProps);
63
64
  const { handlers, arrowStyles, floatingStyles, isOpen, refs, hideTooltip, context } = (0, import_ds_floating_context.useFloatingContext)({
@@ -70,11 +71,12 @@ const DSTooltipV3 = (props) => {
70
71
  portalDOMContainer,
71
72
  animationDuration
72
73
  });
74
+ const { showPopover } = extraPopperJsProps;
73
75
  import_react.default.useEffect(() => {
74
- if (extraPopperJsProps.showPopover === false) {
76
+ if (showPopover === false) {
75
77
  hideTooltip();
76
78
  }
77
- }, [extraPopperJsProps.showPopover, hideTooltip]);
79
+ }, [showPopover, hideTooltip]);
78
80
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
79
81
  import_styles.StyledTriggerWrapper,
80
82
  {
@@ -82,13 +84,31 @@ const DSTooltipV3 = (props) => {
82
84
  innerRef: refs.setReference,
83
85
  "data-testid": `${import_TooltipV3DatatestId.TooltipV3DatatestId.TRIGGER_WRAPPER}${id !== "" ? `_${id}` : ""}`,
84
86
  children: [
85
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_floating_context.FloatingWrapper, { innerRef: refs.setFloating, isOpen, floatingStyles, context, children: [
86
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTooltipContainer, { children: [
87
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTooltipText, { "aria-label": text, textAlign, wrapWords, children: text }),
88
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMouseOverDetectionBox, {})
89
- ] }),
90
- !withoutArrow ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles }) : null
91
- ] }),
87
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
88
+ import_ds_floating_context.FloatingWrapper,
89
+ {
90
+ innerRef: refs.setFloating,
91
+ isOpen: showPopover || isOpen,
92
+ floatingStyles,
93
+ context,
94
+ children: [
95
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTooltipContainer, { children: [
96
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
97
+ import_styles.StyledTooltipText,
98
+ {
99
+ "aria-label": text,
100
+ textAlign,
101
+ wrapWords,
102
+ $applyTooltipOverflowWrap: applyTooltipOverflowWrap,
103
+ children: text
104
+ }
105
+ ),
106
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMouseOverDetectionBox, {})
107
+ ] }),
108
+ !withoutArrow ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles }) : null
109
+ ]
110
+ }
111
+ ),
92
112
  children
93
113
  ]
94
114
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/DSTooltipV3.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { useFloatingContext, PopoverArrow, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { useMemoMergePropsWithDefault, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes } from './react-desc-prop-types.js';\nimport { TooltipV3DatatestId } from './TooltipV3DatatestId.js';\nimport { defaultProps } from './defaultProps.js';\nimport {\n StyledTooltipContainer,\n StyledTooltipText,\n StyledMouseOverDetectionBox,\n StyledTriggerWrapper,\n} from './styles.js';\nimport type { DSTooltipV3T } from './react-desc-prop-types.js';\n\nconst DSTooltipV3: React.ComponentType<DSTooltipV3T.Props> = (props) => {\n const {\n text,\n startPlacementPreference,\n children,\n onOpen,\n onClose,\n id,\n textAlign,\n wrapWords,\n withoutArrow,\n customOffset,\n animationDuration,\n withoutAnimation,\n withoutPortal,\n portalDOMContainer,\n ...extraPopperJsProps\n } = useMemoMergePropsWithDefault<DSTooltipV3T.InternalProps>(props, defaultProps);\n\n const { handlers, arrowStyles, floatingStyles, isOpen, refs, hideTooltip, context } = useFloatingContext({\n placement: startPlacementPreference,\n customOffset,\n onOpen,\n onClose,\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n });\n React.useEffect(() => {\n if (extraPopperJsProps.showPopover === false) {\n hideTooltip();\n }\n }, [extraPopperJsProps.showPopover, hideTooltip]);\n return (\n <StyledTriggerWrapper\n {...handlers}\n innerRef={refs.setReference}\n data-testid={`${TooltipV3DatatestId.TRIGGER_WRAPPER}${id !== '' ? `_${id}` : ''}`}\n >\n <FloatingWrapper innerRef={refs.setFloating} isOpen={isOpen} floatingStyles={floatingStyles} context={context}>\n <StyledTooltipContainer>\n <StyledTooltipText aria-label={text} textAlign={textAlign} wrapWords={wrapWords}>\n {text}\n </StyledTooltipText>\n <StyledMouseOverDetectionBox />\n </StyledTooltipContainer>\n {!withoutArrow ? <PopoverArrow {...arrowStyles} /> : null}\n </FloatingWrapper>\n\n {children}\n </StyledTriggerWrapper>\n );\n};\n\nDSTooltipV3.displayName = 'DSTooltipV3';\nconst DSTooltipV3WithSchema = describe(DSTooltipV3);\nDSTooltipV3WithSchema.propTypes = propTypes;\n\nexport { DSTooltipV3, DSTooltipV3WithSchema };\n\nexport default DSTooltipV3;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwDf;AAvDR,mBAAkB;AAClB,iCAAkE;AAClE,8BAAuD;AACvD,mCAA0B;AAC1B,iCAAoC;AACpC,0BAA6B;AAC7B,oBAKO;AAGP,MAAM,cAAuD,CAAC,UAAU;AACtE,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,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,sDAAyD,OAAO,gCAAY;AAEhF,QAAM,EAAE,UAAU,aAAa,gBAAgB,QAAQ,MAAM,aAAa,QAAQ,QAAI,+CAAmB;AAAA,IACvG,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,mBAAmB,gBAAgB,OAAO;AAC5C,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,mBAAmB,aAAa,WAAW,CAAC;AAChD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,KAAK;AAAA,MACf,eAAa,GAAG,+CAAoB,eAAe,GAAG,OAAO,KAAK,IAAI,EAAE,KAAK,EAAE;AAAA,MAE/E;AAAA,qDAAC,8CAAgB,UAAU,KAAK,aAAa,QAAgB,gBAAgC,SAC3F;AAAA,uDAAC,wCACC;AAAA,wDAAC,mCAAkB,cAAY,MAAM,WAAsB,WACxD,gBACH;AAAA,YACA,4CAAC,6CAA4B;AAAA,aAC/B;AAAA,UACC,CAAC,eAAe,4CAAC,2CAAc,GAAG,aAAa,IAAK;AAAA,WACvD;AAAA,QAEC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,4BAAwB,kCAAS,WAAW;AAClD,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { useFloatingContext, PopoverArrow, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { useMemoMergePropsWithDefault, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes } from './react-desc-prop-types.js';\nimport { TooltipV3DatatestId } from './TooltipV3DatatestId.js';\nimport { defaultProps } from './defaultProps.js';\nimport {\n StyledTooltipContainer,\n StyledTooltipText,\n StyledMouseOverDetectionBox,\n StyledTriggerWrapper,\n} from './styles.js';\nimport type { DSTooltipV3T } from './react-desc-prop-types.js';\n\nconst DSTooltipV3: React.ComponentType<DSTooltipV3T.Props> = (props) => {\n const {\n text,\n startPlacementPreference,\n children,\n onOpen,\n onClose,\n id,\n textAlign,\n wrapWords,\n withoutArrow,\n customOffset,\n animationDuration,\n withoutAnimation,\n withoutPortal,\n portalDOMContainer,\n applyTooltipOverflowWrap,\n ...extraPopperJsProps\n } = useMemoMergePropsWithDefault<DSTooltipV3T.InternalProps>(props, defaultProps);\n\n const { handlers, arrowStyles, floatingStyles, isOpen, refs, hideTooltip, context } = useFloatingContext({\n placement: startPlacementPreference,\n customOffset,\n onOpen,\n onClose,\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n });\n\n const { showPopover } = extraPopperJsProps;\n React.useEffect(() => {\n if (showPopover === false) {\n hideTooltip();\n }\n }, [showPopover, hideTooltip]);\n return (\n <StyledTriggerWrapper\n {...handlers}\n innerRef={refs.setReference}\n data-testid={`${TooltipV3DatatestId.TRIGGER_WRAPPER}${id !== '' ? `_${id}` : ''}`}\n >\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={showPopover || isOpen}\n floatingStyles={floatingStyles}\n context={context}\n >\n <StyledTooltipContainer>\n <StyledTooltipText\n aria-label={text}\n textAlign={textAlign}\n wrapWords={wrapWords}\n $applyTooltipOverflowWrap={applyTooltipOverflowWrap}\n >\n {text}\n </StyledTooltipText>\n <StyledMouseOverDetectionBox />\n </StyledTooltipContainer>\n {!withoutArrow ? <PopoverArrow {...arrowStyles} /> : null}\n </FloatingWrapper>\n\n {children}\n </StyledTriggerWrapper>\n );\n};\n\nDSTooltipV3.displayName = 'DSTooltipV3';\nconst DSTooltipV3WithSchema = describe(DSTooltipV3);\nDSTooltipV3WithSchema.propTypes = propTypes;\n\nexport { DSTooltipV3, DSTooltipV3WithSchema };\n\nexport default DSTooltipV3;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEf;AA/DR,mBAAkB;AAClB,iCAAkE;AAClE,8BAAuD;AACvD,mCAA0B;AAC1B,iCAAoC;AACpC,0BAA6B;AAC7B,oBAKO;AAGP,MAAM,cAAuD,CAAC,UAAU;AACtE,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,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,sDAAyD,OAAO,gCAAY;AAEhF,QAAM,EAAE,UAAU,aAAa,gBAAgB,QAAQ,MAAM,aAAa,QAAQ,QAAI,+CAAmB;AAAA,IACvG,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,YAAY,IAAI;AACxB,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,gBAAgB,OAAO;AACzB,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,aAAa,WAAW,CAAC;AAC7B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,KAAK;AAAA,MACf,eAAa,GAAG,+CAAoB,eAAe,GAAG,OAAO,KAAK,IAAI,EAAE,KAAK,EAAE;AAAA,MAE/E;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf,QAAQ,eAAe;AAAA,YACvB;AAAA,YACA;AAAA,YAEA;AAAA,2DAAC,wCACC;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,cAAY;AAAA,oBACZ;AAAA,oBACA;AAAA,oBACA,2BAA2B;AAAA,oBAE1B;AAAA;AAAA,gBACH;AAAA,gBACA,4CAAC,6CAA4B;AAAA,iBAC/B;AAAA,cACC,CAAC,eAAe,4CAAC,2CAAc,GAAG,aAAa,IAAK;AAAA;AAAA;AAAA,QACvD;AAAA,QAEC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,4BAAwB,kCAAS,WAAW;AAClD,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
6
6
  "names": ["React"]
7
7
  }
@@ -40,6 +40,7 @@ const defaultProps = {
40
40
  id: "",
41
41
  textAlign: "left",
42
42
  wrapWords: false,
43
- startPlacementPreference: "top"
43
+ startPlacementPreference: "top",
44
+ applyTooltipOverflowWrap: false
44
45
  };
45
46
  //# sourceMappingURL=defaultProps.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/defaultProps.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type { DSTooltipV3T } from './react-desc-prop-types.js';\n\nconst noop = () => {};\n\nexport const defaultProps: DSTooltipV3T.DefaultProps = {\n onOpen: noop,\n onClose: noop,\n id: '',\n textAlign: 'left',\n wrapWords: false,\n startPlacementPreference: 'top',\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,MAAM,OAAO,MAAM;AAAC;AAEb,MAAM,eAA0C;AAAA,EACrD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,0BAA0B;AAC5B;",
4
+ "sourcesContent": ["import type { DSTooltipV3T } from './react-desc-prop-types.js';\n\nconst noop = () => {};\n\nexport const defaultProps: DSTooltipV3T.DefaultProps = {\n onOpen: noop,\n onClose: noop,\n id: '',\n textAlign: 'left',\n wrapWords: false,\n startPlacementPreference: 'top',\n applyTooltipOverflowWrap: false,\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,MAAM,OAAO,MAAM;AAAC;AAEb,MAAM,eAA0C;AAAA,EACrD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,0BAA0B;AAAA,EAC1B,0BAA0B;AAC5B;",
6
6
  "names": []
7
7
  }
@@ -37,6 +37,9 @@ var import_constants = require("./constants.js");
37
37
  const propTypes = {
38
38
  text: import_ds_props_helpers.PropTypes.string.description("Tooltip text to be displayed on hover/focus").isRequired,
39
39
  textAlign: import_ds_props_helpers.PropTypes.oneOf(import_constants.TEXT_ALIGNMENT).description("Tooltip text alignment").defaultValue("left"),
40
+ applyTooltipOverflowWrap: import_ds_props_helpers.PropTypes.bool.description(
41
+ "when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap"
42
+ ).defaultValue(false),
40
43
  wrapWords: import_ds_props_helpers.PropTypes.bool.description("Break words into a new line. Useful when words exceed tooltip max-lenght.").defaultValue(false),
41
44
  children: import_ds_props_helpers.PropTypes.node.description("Element to tie the tooltip to, must be a single node").isRequired,
42
45
  withoutPortal: import_ds_props_helpers.PropTypes.bool.description("Whether or not the tooltip content should appear in a DOM portal or not").defaultValue(true),
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { PLACEMENT, TEXT_ALIGNMENT } from './constants.js';\n\nexport declare namespace DSTooltipV3T {\n export type Placement =\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'right-start'\n | 'right'\n | 'right-end'\n | 'bottom-end'\n | 'bottom'\n | 'bottom-start'\n | 'left-end'\n | 'left'\n | 'left-start';\n export type TextAlignment = 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';\n\n export interface DefaultProps {\n onOpen: () => void;\n onClose: () => void;\n id: string;\n textAlign: TextAlignment;\n wrapWords: boolean;\n startPlacementPreference: Placement;\n }\n\n export interface OptionalProps {\n zIndex?: number;\n ariaLabel?: string;\n withoutPortal?: boolean;\n withoutArrow?: boolean;\n withoutAnimation?: boolean;\n boundaryElement?: HTMLElement;\n animationDuration?: number;\n portalDOMContainer?: HTMLElement;\n placementOrderPreference?: Placement[];\n customOffset?: [number, number];\n modifiers?: Record<string, unknown>[];\n showPopover?: boolean;\n }\n\n export interface RequiredProps {\n children: React.ReactNode;\n text: string;\n }\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n // XstyledProps,\n RequiredProps {}\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n // XstyledProps,\n RequiredProps {}\n}\n\nexport const propTypes = {\n text: PropTypes.string.description('Tooltip text to be displayed on hover/focus').isRequired,\n textAlign: PropTypes.oneOf(TEXT_ALIGNMENT as unknown as unknown[])\n .description('Tooltip text alignment')\n .defaultValue('left'),\n wrapWords: PropTypes.bool\n .description('Break words into a new line. Useful when words exceed tooltip max-lenght.')\n .defaultValue(false),\n children: PropTypes.node.description('Element to tie the tooltip to, must be a single node').isRequired,\n withoutPortal: PropTypes.bool\n .description('Whether or not the tooltip content should appear in a DOM portal or not')\n .defaultValue(true),\n withoutArrow: PropTypes.bool.description('Whether or not the tooltip should use the arrow').defaultValue(false),\n boundaryElement: PropTypes.element\n .description(\n 'Bounding element to calculate upon, defaults to \"clippingParents\",' +\n 'which are the scrolling containers that may cause element to be partially or fully cut off',\n )\n .defaultValue(undefined),\n withoutAnimation: PropTypes.bool\n .description('Whether or not the popper context menu should be animated')\n .defaultValue(false),\n animationDuration: PropTypes.number.description('Popper context menus Animation duration in ms').defaultValue(100),\n portalDOMContainer: PropTypes.oneOfType([PropTypes.node, PropTypes.oneOf([null])])\n .description('When using portal, the container in which to append the DOM content, defaults to document body')\n .defaultValue(undefined),\n startPlacementPreference: PropTypes.oneOf(PLACEMENT)\n .description('start placement preferences, as per popperjs placement option')\n .defaultValue(\"'top'\"),\n placementOrderPreference: PropTypes.arrayOf(PropTypes.oneOf(PLACEMENT))\n .description('Array of placement preferences, as per popperjs \"flip\" placement option')\n .defaultValue(\"['top', 'bottom', 'left', 'right']\"),\n zIndex: PropTypes.number.description('popperjs content z-index').defaultValue(1),\n customOffset: PropTypes.arrayOf(PropTypes.number).description('placement offset array').defaultValue([0, 14]),\n modifiers: PropTypes.array\n .description('modifiers array for full-custom tooltip-js override, https://popper.js.org/docs/v2/modifiers/')\n .defaultValue(1),\n id: PropTypes.string.description('Optional id appended to data-testid').defaultValue(''),\n onOpen: PropTypes.func.description('Optional callback to be invoked when the tooltip opens').defaultValue('() => {}'),\n onClose: PropTypes.func\n .description('Optional callback to be invoked when the tooltip closes')\n .defaultValue('() => {}'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAA0B;AAC1B,uBAA0C;AA6DnC,MAAM,YAAY;AAAA,EACvB,MAAM,kCAAU,OAAO,YAAY,6CAA6C,EAAE;AAAA,EAClF,WAAW,kCAAU,MAAM,+BAAsC,EAC9D,YAAY,wBAAwB,EACpC,aAAa,MAAM;AAAA,EACtB,WAAW,kCAAU,KAClB,YAAY,2EAA2E,EACvF,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KAAK,YAAY,sDAAsD,EAAE;AAAA,EAC7F,eAAe,kCAAU,KACtB,YAAY,yEAAyE,EACrF,aAAa,IAAI;AAAA,EACpB,cAAc,kCAAU,KAAK,YAAY,iDAAiD,EAAE,aAAa,KAAK;AAAA,EAC9G,iBAAiB,kCAAU,QACxB;AAAA,IACC;AAAA,EAEF,EACC,aAAa,MAAS;AAAA,EACzB,kBAAkB,kCAAU,KACzB,YAAY,2DAA2D,EACvE,aAAa,KAAK;AAAA,EACrB,mBAAmB,kCAAU,OAAO,YAAY,+CAA+C,EAAE,aAAa,GAAG;AAAA,EACjH,oBAAoB,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAC9E,YAAY,gGAAgG,EAC5G,aAAa,MAAS;AAAA,EACzB,0BAA0B,kCAAU,MAAM,0BAAS,EAChD,YAAY,+DAA+D,EAC3E,aAAa,OAAO;AAAA,EACvB,0BAA0B,kCAAU,QAAQ,kCAAU,MAAM,0BAAS,CAAC,EACnE,YAAY,yEAAyE,EACrF,aAAa,oCAAoC;AAAA,EACpD,QAAQ,kCAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,CAAC;AAAA,EAC/E,cAAc,kCAAU,QAAQ,kCAAU,MAAM,EAAE,YAAY,wBAAwB,EAAE,aAAa,CAAC,GAAG,EAAE,CAAC;AAAA,EAC5G,WAAW,kCAAU,MAClB,YAAY,+FAA+F,EAC3G,aAAa,CAAC;AAAA,EACjB,IAAI,kCAAU,OAAO,YAAY,qCAAqC,EAAE,aAAa,EAAE;AAAA,EACvF,QAAQ,kCAAU,KAAK,YAAY,wDAAwD,EAAE,aAAa,UAAU;AAAA,EACpH,SAAS,kCAAU,KAChB,YAAY,yDAAyD,EACrE,aAAa,UAAU;AAC5B;",
4
+ "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { PLACEMENT, TEXT_ALIGNMENT } from './constants.js';\n\nexport declare namespace DSTooltipV3T {\n export type Placement =\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'right-start'\n | 'right'\n | 'right-end'\n | 'bottom-end'\n | 'bottom'\n | 'bottom-start'\n | 'left-end'\n | 'left'\n | 'left-start';\n export type TextAlignment = 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';\n\n export interface DefaultProps {\n onOpen: () => void;\n onClose: () => void;\n id: string;\n textAlign: TextAlignment;\n wrapWords: boolean;\n startPlacementPreference: Placement;\n applyTooltipOverflowWrap: boolean;\n }\n\n export interface OptionalProps {\n zIndex?: number;\n ariaLabel?: string;\n withoutPortal?: boolean;\n withoutArrow?: boolean;\n withoutAnimation?: boolean;\n boundaryElement?: HTMLElement;\n animationDuration?: number;\n portalDOMContainer?: HTMLElement;\n placementOrderPreference?: Placement[];\n customOffset?: [number, number];\n modifiers?: Record<string, unknown>[];\n showPopover?: boolean;\n }\n\n export interface RequiredProps {\n children: React.ReactNode;\n text: string;\n }\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n // XstyledProps,\n RequiredProps {}\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n // XstyledProps,\n RequiredProps {}\n}\n\nexport const propTypes = {\n text: PropTypes.string.description('Tooltip text to be displayed on hover/focus').isRequired,\n textAlign: PropTypes.oneOf(TEXT_ALIGNMENT as unknown as unknown[])\n .description('Tooltip text alignment')\n .defaultValue('left'),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n wrapWords: PropTypes.bool\n .description('Break words into a new line. Useful when words exceed tooltip max-lenght.')\n .defaultValue(false),\n children: PropTypes.node.description('Element to tie the tooltip to, must be a single node').isRequired,\n withoutPortal: PropTypes.bool\n .description('Whether or not the tooltip content should appear in a DOM portal or not')\n .defaultValue(true),\n withoutArrow: PropTypes.bool.description('Whether or not the tooltip should use the arrow').defaultValue(false),\n boundaryElement: PropTypes.element\n .description(\n 'Bounding element to calculate upon, defaults to \"clippingParents\",' +\n 'which are the scrolling containers that may cause element to be partially or fully cut off',\n )\n .defaultValue(undefined),\n withoutAnimation: PropTypes.bool\n .description('Whether or not the popper context menu should be animated')\n .defaultValue(false),\n animationDuration: PropTypes.number.description('Popper context menus Animation duration in ms').defaultValue(100),\n portalDOMContainer: PropTypes.oneOfType([PropTypes.node, PropTypes.oneOf([null])])\n .description('When using portal, the container in which to append the DOM content, defaults to document body')\n .defaultValue(undefined),\n startPlacementPreference: PropTypes.oneOf(PLACEMENT)\n .description('start placement preferences, as per popperjs placement option')\n .defaultValue(\"'top'\"),\n placementOrderPreference: PropTypes.arrayOf(PropTypes.oneOf(PLACEMENT))\n .description('Array of placement preferences, as per popperjs \"flip\" placement option')\n .defaultValue(\"['top', 'bottom', 'left', 'right']\"),\n zIndex: PropTypes.number.description('popperjs content z-index').defaultValue(1),\n customOffset: PropTypes.arrayOf(PropTypes.number).description('placement offset array').defaultValue([0, 14]),\n modifiers: PropTypes.array\n .description('modifiers array for full-custom tooltip-js override, https://popper.js.org/docs/v2/modifiers/')\n .defaultValue(1),\n id: PropTypes.string.description('Optional id appended to data-testid').defaultValue(''),\n onOpen: PropTypes.func.description('Optional callback to be invoked when the tooltip opens').defaultValue('() => {}'),\n onClose: PropTypes.func\n .description('Optional callback to be invoked when the tooltip closes')\n .defaultValue('() => {}'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAA0B;AAC1B,uBAA0C;AA8DnC,MAAM,YAAY;AAAA,EACvB,MAAM,kCAAU,OAAO,YAAY,6CAA6C,EAAE;AAAA,EAClF,WAAW,kCAAU,MAAM,+BAAsC,EAC9D,YAAY,wBAAwB,EACpC,aAAa,MAAM;AAAA,EACtB,0BAA0B,kCAAU,KACjC;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,WAAW,kCAAU,KAClB,YAAY,2EAA2E,EACvF,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KAAK,YAAY,sDAAsD,EAAE;AAAA,EAC7F,eAAe,kCAAU,KACtB,YAAY,yEAAyE,EACrF,aAAa,IAAI;AAAA,EACpB,cAAc,kCAAU,KAAK,YAAY,iDAAiD,EAAE,aAAa,KAAK;AAAA,EAC9G,iBAAiB,kCAAU,QACxB;AAAA,IACC;AAAA,EAEF,EACC,aAAa,MAAS;AAAA,EACzB,kBAAkB,kCAAU,KACzB,YAAY,2DAA2D,EACvE,aAAa,KAAK;AAAA,EACrB,mBAAmB,kCAAU,OAAO,YAAY,+CAA+C,EAAE,aAAa,GAAG;AAAA,EACjH,oBAAoB,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAC9E,YAAY,gGAAgG,EAC5G,aAAa,MAAS;AAAA,EACzB,0BAA0B,kCAAU,MAAM,0BAAS,EAChD,YAAY,+DAA+D,EAC3E,aAAa,OAAO;AAAA,EACvB,0BAA0B,kCAAU,QAAQ,kCAAU,MAAM,0BAAS,CAAC,EACnE,YAAY,yEAAyE,EACrF,aAAa,oCAAoC;AAAA,EACpD,QAAQ,kCAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,CAAC;AAAA,EAC/E,cAAc,kCAAU,QAAQ,kCAAU,MAAM,EAAE,YAAY,wBAAwB,EAAE,aAAa,CAAC,GAAG,EAAE,CAAC;AAAA,EAC5G,WAAW,kCAAU,MAClB,YAAY,+FAA+F,EAC3G,aAAa,CAAC;AAAA,EACjB,IAAI,kCAAU,OAAO,YAAY,qCAAqC,EAAE,aAAa,EAAE;AAAA,EACvF,QAAQ,kCAAU,KAAK,YAAY,wDAAwD,EAAE,aAAa,UAAU;AAAA,EACpH,SAAS,kCAAU,KAChB,YAAY,yDAAyD,EACrE,aAAa,UAAU;AAC5B;",
6
6
  "names": []
7
7
  }
@@ -53,10 +53,21 @@ const StyledTooltipContainer = import_ds_system.styled.div`
53
53
  const StyledTooltipText = import_ds_system.styled.div`
54
54
  display: inline-block;
55
55
  text-align: ${({ textAlign }) => textAlign};
56
- white-space: ${({ wrapWords }) => wrapWords ? "pre-wrap" : "normal"};
57
- word-break: ${({ wrapWords }) => wrapWords ? "break-all" : "normal"};
58
- word-wrap: break-word;
59
- overflow-wrap: break-word;
56
+
57
+ ${({ wrapWords, $applyTooltipOverflowWrap }) => {
58
+ if ($applyTooltipOverflowWrap) {
59
+ return `overflow-wrap: break-word;
60
+ white-space: pre-wrap;
61
+ min-width: 0px;`;
62
+ }
63
+ if (wrapWords) {
64
+ return `white-space: pre-wrap;
65
+ word-break: break-all;
66
+ overflow-wrap: break-word;`;
67
+ }
68
+ return `white-space: normal;
69
+ overflow-wrap: break-word;`;
70
+ }};
60
71
  `;
61
72
  const StyledMouseOverDetectionBox = import_ds_system.styled.div`
62
73
  position: absolute;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { DSTooltipV3T } from './react-desc-prop-types.js';\n\ninterface StyledTooltipTextT {\n wrapWords: boolean;\n textAlign: DSTooltipV3T.TextAlignment;\n}\n\nexport const StyledTooltipContainer = styled.div`\n text-align: center;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n min-height: 30px;\n display: grid;\n align-items: center;\n padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};\n position: relative;\n background-color: white;\n border-radius: 2px;\n font-size: 13px;\n color: ${({ theme }) => theme.colors.neutral[600]};\n`;\n\nexport const StyledTooltipText = styled.div<StyledTooltipTextT>`\n display: inline-block;\n text-align: ${({ textAlign }) => textAlign};\n white-space: ${({ wrapWords }) => (wrapWords ? 'pre-wrap' : 'normal')};\n word-break: ${({ wrapWords }) => (wrapWords ? 'break-all' : 'normal')};\n word-wrap: break-word;\n overflow-wrap: break-word;\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n position: absolute;\n top: -15px;\n right: -15px;\n width: calc(100% + 30px);\n height: calc(100% + 30px);\n z-index: -1;\n`;\n\nexport const StyledTriggerWrapper = styled.div`\n display: inline-flex;\n width: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAQhB,MAAM,yBAAyB,wBAAO;AAAA;AAAA,eAE9B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAK9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG5C,MAAM,oBAAoB,wBAAO;AAAA;AAAA,gBAExB,CAAC,EAAE,UAAU,MAAM,SAAS;AAAA,iBAC3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa,QAAS;AAAA,gBACvD,CAAC,EAAE,UAAU,MAAO,YAAY,cAAc,QAAS;AAAA;AAAA;AAAA;AAKhE,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3C,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;",
4
+ "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { DSTooltipV3T } from './react-desc-prop-types.js';\n\ninterface StyledTooltipTextT {\n wrapWords: boolean;\n textAlign: DSTooltipV3T.TextAlignment;\n}\n\nexport const StyledTooltipContainer = styled.div`\n text-align: center;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n min-height: 30px;\n display: grid;\n align-items: center;\n padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};\n position: relative;\n background-color: white;\n border-radius: 2px;\n font-size: 13px;\n color: ${({ theme }) => theme.colors.neutral[600]};\n`;\n\nexport const StyledTooltipText = styled.div<StyledTooltipTextT & { $applyTooltipOverflowWrap: boolean }>`\n display: inline-block;\n text-align: ${({ textAlign }) => textAlign};\n\n ${({ wrapWords, $applyTooltipOverflowWrap }) => {\n if ($applyTooltipOverflowWrap) {\n // word-wrap: break-word; // <- this is the legacy \"overflow-wrap\" property, we should not need the legacy declaration\n // min-width: 0px; // <-- min-width:0px is needed because css grid auto-sizing are broken in css and impossible to understand\n return `overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;`;\n }\n if (wrapWords) {\n return `white-space: pre-wrap;\n word-break: break-all;\n overflow-wrap: break-word;`;\n }\n return `white-space: normal;\n overflow-wrap: break-word;`;\n }};\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n position: absolute;\n top: -15px;\n right: -15px;\n width: calc(100% + 30px);\n height: calc(100% + 30px);\n z-index: -1;\n`;\n\nexport const StyledTriggerWrapper = styled.div`\n display: inline-flex;\n width: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAQhB,MAAM,yBAAyB,wBAAO;AAAA;AAAA,eAE9B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAK9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG5C,MAAM,oBAAoB,wBAAO;AAAA;AAAA,gBAExB,CAAC,EAAE,UAAU,MAAM,SAAS;AAAA;AAAA,IAExC,CAAC,EAAE,WAAW,0BAA0B,MAAM;AAC9C,MAAI,2BAA2B;AAG7B,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,MAAI,WAAW;AACb,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,SAAO;AAAA;AAET,CAAC;AAAA;AAGI,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3C,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -24,12 +24,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
24
24
  var React = __toESM(require("react"));
25
25
  var import_jsx_runtime = require("react/jsx-runtime");
26
26
  var import__ = require("../index.js");
27
- const mockChildren = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {});
28
27
  const mockPlacementOrderPreference = ["bottom-start", "bottom", "bottom-end"];
29
28
  const mockCustomOffset = [0, 0];
30
29
  const mockModifiers = [{}];
31
30
  const testRequiredProps = {
32
- children: mockChildren(),
33
31
  text: ""
34
32
  };
35
33
  const testOptionalProps = {
@@ -71,7 +69,8 @@ const testCompleteDefaults = {
71
69
  },
72
70
  textAlign: "center",
73
71
  wrapWords: false,
74
- startPlacementPreference: "bottom"
72
+ startPlacementPreference: "bottom",
73
+ applyTooltipOverflowWrap: false
75
74
  };
76
75
  const testInternalProps = {
77
76
  ...testRequiredProps,
@@ -91,7 +90,7 @@ const testExplicitDefinition = {
91
90
  },
92
91
  textAlign: "center",
93
92
  wrapWords: false,
94
- children: mockChildren(),
93
+ applyTooltipOverflowWrap: false,
95
94
  text: "",
96
95
  zIndex: 1,
97
96
  ariaLabel: "",
@@ -115,7 +114,7 @@ const testInferedTypeCompatibility = {
115
114
  },
116
115
  textAlign: "center",
117
116
  wrapWords: false,
118
- children: mockChildren(),
117
+ applyTooltipOverflowWrap: false,
119
118
  text: "",
120
119
  zIndex: 1,
121
120
  ariaLabel: "",
@@ -139,7 +138,6 @@ const testDefinitionAsConst = {
139
138
  },
140
139
  textAlign: "center",
141
140
  wrapWords: false,
142
- children: mockChildren(),
143
141
  text: "",
144
142
  zIndex: 1,
145
143
  ariaLabel: "",
@@ -156,9 +154,9 @@ const testDefinitionAsConst = {
156
154
  showPopover: true
157
155
  };
158
156
  const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
159
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSTooltipV3, { ...testExplicitDefinition }),
160
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSTooltipV3, { ...testInferedTypeCompatibility }),
161
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSTooltipV3, { ...testDefinitionAsConst }),
157
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSTooltipV3, { ...testExplicitDefinition, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}) }),
158
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSTooltipV3, { ...testInferedTypeCompatibility, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}) }),
159
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSTooltipV3, { ...testDefinitionAsConst, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}) }),
162
160
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
163
161
  import__.DSTooltipV3,
164
162
  {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-tooltip-v3-valid.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSTooltipV3 } from '../index.js';\nimport type { DSTooltipV3T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSTooltipV3T.Props;\ntype ComponentPropsInternals = DSTooltipV3T.InternalProps;\ntype ComponentPropsDefaultProps = DSTooltipV3T.DefaultProps;\ntype ComponentPropsOptionalProps = DSTooltipV3T.OptionalProps;\ntype ComponentPropsRequiredProps = DSTooltipV3T.RequiredProps;\n\nconst mockChildren = () => <div></div>;\n\nconst mockPlacementOrderPreference: DSTooltipV3T.Placement[] = ['bottom-start', 'bottom', 'bottom-end'];\nconst mockCustomOffset: DSTooltipV3T.OptionalProps['customOffset'] = [0, 0];\nconst mockModifiers: DSTooltipV3T.OptionalProps['modifiers'] = [{}];\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n children: mockChildren(),\n text: '',\n};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n zIndex: 1,\n ariaLabel: '',\n withoutPortal: false,\n withoutArrow: false,\n withoutAnimation: false,\n boundaryElement: undefined,\n animationDuration: 1000,\n portalDOMContainer: undefined,\n placementOrderPreference: mockPlacementOrderPreference,\n customOffset: mockCustomOffset,\n modifiers: mockModifiers,\n showPopover: true,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n id: '',\n onOpen: () => {},\n onClose: () => {},\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n id: 'id',\n onOpen: () => {},\n onClose: () => {},\n textAlign: 'center',\n wrapWords: false,\n startPlacementPreference: 'bottom',\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n id: 'id',\n onOpen: () => {},\n onClose: () => {},\n textAlign: 'center',\n wrapWords: false,\n children: mockChildren(),\n text: '',\n zIndex: 1,\n ariaLabel: '',\n withoutPortal: false,\n withoutArrow: false,\n withoutAnimation: false,\n boundaryElement: undefined,\n animationDuration: 1000,\n portalDOMContainer: undefined,\n startPlacementPreference: 'bottom',\n placementOrderPreference: mockPlacementOrderPreference,\n customOffset: mockCustomOffset,\n modifiers: mockModifiers,\n showPopover: true,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n id: 'id',\n onOpen: () => {},\n onClose: () => {},\n textAlign: 'center',\n wrapWords: false,\n children: mockChildren(),\n text: '',\n zIndex: 1,\n ariaLabel: '',\n withoutPortal: false,\n withoutArrow: false,\n withoutAnimation: false,\n boundaryElement: undefined,\n animationDuration: 1000,\n portalDOMContainer: undefined,\n startPlacementPreference: 'bottom',\n placementOrderPreference: mockPlacementOrderPreference,\n customOffset: mockCustomOffset,\n modifiers: mockModifiers,\n showPopover: true,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n id: 'id',\n onOpen: () => {},\n onClose: () => {},\n textAlign: 'center',\n wrapWords: false,\n children: mockChildren(),\n text: '',\n zIndex: 1,\n ariaLabel: '',\n withoutPortal: false,\n withoutArrow: false,\n withoutAnimation: false,\n boundaryElement: undefined,\n animationDuration: 1000,\n portalDOMContainer: undefined,\n startPlacementPreference: 'bottom',\n placementOrderPreference: mockPlacementOrderPreference,\n customOffset: mockCustomOffset,\n modifiers: mockModifiers,\n showPopover: true,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSTooltipV3 {...testExplicitDefinition} />\n <DSTooltipV3 {...testInferedTypeCompatibility} />\n <DSTooltipV3 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSTooltipV3\n id=\"id\"\n onOpen={() => {}}\n onClose={() => {}}\n textAlign=\"center\"\n wrapWords={false}\n text=\"\"\n zIndex={1}\n ariaLabel=\"\"\n withoutPortal={false}\n withoutArrow={false}\n withoutAnimation={false}\n boundaryElement={undefined}\n animationDuration={1000}\n portalDOMContainer={undefined}\n startPlacementPreference=\"bottom\"\n placementOrderPreference={['bottom-start', 'bottom', 'bottom-end']}\n customOffset={[0, 0]}\n modifiers={[]}\n showPopover\n >\n <div />\n </DSTooltipV3>\n </>\n);\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSTooltipV3 } from '../index.js';\nimport type { DSTooltipV3T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSTooltipV3T.Props;\ntype ComponentPropsInternals = DSTooltipV3T.InternalProps;\ntype ComponentPropsDefaultProps = DSTooltipV3T.DefaultProps;\ntype ComponentPropsOptionalProps = DSTooltipV3T.OptionalProps;\ntype ComponentPropsRequiredProps = DSTooltipV3T.RequiredProps;\n\nconst mockPlacementOrderPreference: DSTooltipV3T.Placement[] = ['bottom-start', 'bottom', 'bottom-end'];\nconst mockCustomOffset: DSTooltipV3T.OptionalProps['customOffset'] = [0, 0];\nconst mockModifiers: DSTooltipV3T.OptionalProps['modifiers'] = [{}];\n\n// we omit children because children MUST be passed ALWAYS via the JSX composition react pattern\nconst testRequiredProps: Omit<ComponentPropsRequiredProps, 'children'> = {\n text: '',\n};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n zIndex: 1,\n ariaLabel: '',\n withoutPortal: false,\n withoutArrow: false,\n withoutAnimation: false,\n boundaryElement: undefined,\n animationDuration: 1000,\n portalDOMContainer: undefined,\n placementOrderPreference: mockPlacementOrderPreference,\n customOffset: mockCustomOffset,\n modifiers: mockModifiers,\n showPopover: true,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n id: '',\n onOpen: () => {},\n onClose: () => {},\n};\n\n// we omit children because children MUST be passed ALWAYS via the JSX composition react pattern\nconst testProps: Omit<ComponentPropsForApp, 'children'> = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n id: 'id',\n onOpen: () => {},\n onClose: () => {},\n textAlign: 'center',\n wrapWords: false,\n startPlacementPreference: 'bottom',\n applyTooltipOverflowWrap: false,\n};\n\n// we omit children because children MUST be passed ALWAYS via the JSX composition react pattern\nconst testInternalProps: Omit<ComponentPropsInternals, 'children'> = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// we omit children because children MUST be passed ALWAYS via the JSX composition react pattern\nconst testExplicitDefinition: Omit<ComponentPropsForApp, 'children'> = {\n id: 'id',\n onOpen: () => {},\n onClose: () => {},\n textAlign: 'center',\n wrapWords: false,\n applyTooltipOverflowWrap: false,\n text: '',\n zIndex: 1,\n ariaLabel: '',\n withoutPortal: false,\n withoutArrow: false,\n withoutAnimation: false,\n boundaryElement: undefined,\n animationDuration: 1000,\n portalDOMContainer: undefined,\n startPlacementPreference: 'bottom',\n placementOrderPreference: mockPlacementOrderPreference,\n customOffset: mockCustomOffset,\n modifiers: mockModifiers,\n showPopover: true,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n id: 'id',\n onOpen: () => {},\n onClose: () => {},\n textAlign: 'center',\n wrapWords: false,\n applyTooltipOverflowWrap: false,\n text: '',\n zIndex: 1,\n ariaLabel: '',\n withoutPortal: false,\n withoutArrow: false,\n withoutAnimation: false,\n boundaryElement: undefined,\n animationDuration: 1000,\n portalDOMContainer: undefined,\n startPlacementPreference: 'bottom',\n placementOrderPreference: mockPlacementOrderPreference,\n customOffset: mockCustomOffset,\n modifiers: mockModifiers,\n showPopover: true,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n id: 'id',\n onOpen: () => {},\n onClose: () => {},\n textAlign: 'center',\n wrapWords: false,\n text: '',\n zIndex: 1,\n ariaLabel: '',\n withoutPortal: false,\n withoutArrow: false,\n withoutAnimation: false,\n boundaryElement: undefined,\n animationDuration: 1000,\n portalDOMContainer: undefined,\n startPlacementPreference: 'bottom',\n placementOrderPreference: mockPlacementOrderPreference,\n customOffset: mockCustomOffset,\n modifiers: mockModifiers,\n showPopover: true,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSTooltipV3 {...testExplicitDefinition}>\n <div></div>\n </DSTooltipV3>\n <DSTooltipV3 {...testInferedTypeCompatibility}>\n <div></div>\n </DSTooltipV3>\n <DSTooltipV3 {...testDefinitionAsConst}>\n <div></div>\n </DSTooltipV3>\n {/* works with inline values */}\n <DSTooltipV3\n id=\"id\"\n onOpen={() => {}}\n onClose={() => {}}\n textAlign=\"center\"\n wrapWords={false}\n text=\"\"\n zIndex={1}\n ariaLabel=\"\"\n withoutPortal={false}\n withoutArrow={false}\n withoutAnimation={false}\n boundaryElement={undefined}\n animationDuration={1000}\n portalDOMContainer={undefined}\n startPlacementPreference=\"bottom\"\n placementOrderPreference={['bottom-start', 'bottom', 'bottom-end']}\n customOffset={[0, 0]}\n modifiers={[]}\n showPopover\n >\n <div />\n </DSTooltipV3>\n </>\n);\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -28,6 +28,7 @@ const DSTooltipV3 = (props) => {
28
28
  withoutAnimation,
29
29
  withoutPortal,
30
30
  portalDOMContainer,
31
+ applyTooltipOverflowWrap,
31
32
  ...extraPopperJsProps
32
33
  } = useMemoMergePropsWithDefault(props, defaultProps);
33
34
  const { handlers, arrowStyles, floatingStyles, isOpen, refs, hideTooltip, context } = useFloatingContext({
@@ -40,11 +41,12 @@ const DSTooltipV3 = (props) => {
40
41
  portalDOMContainer,
41
42
  animationDuration
42
43
  });
44
+ const { showPopover } = extraPopperJsProps;
43
45
  React2.useEffect(() => {
44
- if (extraPopperJsProps.showPopover === false) {
46
+ if (showPopover === false) {
45
47
  hideTooltip();
46
48
  }
47
- }, [extraPopperJsProps.showPopover, hideTooltip]);
49
+ }, [showPopover, hideTooltip]);
48
50
  return /* @__PURE__ */ jsxs(
49
51
  StyledTriggerWrapper,
50
52
  {
@@ -52,13 +54,31 @@ const DSTooltipV3 = (props) => {
52
54
  innerRef: refs.setReference,
53
55
  "data-testid": `${TooltipV3DatatestId.TRIGGER_WRAPPER}${id !== "" ? `_${id}` : ""}`,
54
56
  children: [
55
- /* @__PURE__ */ jsxs(FloatingWrapper, { innerRef: refs.setFloating, isOpen, floatingStyles, context, children: [
56
- /* @__PURE__ */ jsxs(StyledTooltipContainer, { children: [
57
- /* @__PURE__ */ jsx(StyledTooltipText, { "aria-label": text, textAlign, wrapWords, children: text }),
58
- /* @__PURE__ */ jsx(StyledMouseOverDetectionBox, {})
59
- ] }),
60
- !withoutArrow ? /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles }) : null
61
- ] }),
57
+ /* @__PURE__ */ jsxs(
58
+ FloatingWrapper,
59
+ {
60
+ innerRef: refs.setFloating,
61
+ isOpen: showPopover || isOpen,
62
+ floatingStyles,
63
+ context,
64
+ children: [
65
+ /* @__PURE__ */ jsxs(StyledTooltipContainer, { children: [
66
+ /* @__PURE__ */ jsx(
67
+ StyledTooltipText,
68
+ {
69
+ "aria-label": text,
70
+ textAlign,
71
+ wrapWords,
72
+ $applyTooltipOverflowWrap: applyTooltipOverflowWrap,
73
+ children: text
74
+ }
75
+ ),
76
+ /* @__PURE__ */ jsx(StyledMouseOverDetectionBox, {})
77
+ ] }),
78
+ !withoutArrow ? /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles }) : null
79
+ ]
80
+ }
81
+ ),
62
82
  children
63
83
  ]
64
84
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSTooltipV3.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { useFloatingContext, PopoverArrow, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { useMemoMergePropsWithDefault, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes } from './react-desc-prop-types.js';\nimport { TooltipV3DatatestId } from './TooltipV3DatatestId.js';\nimport { defaultProps } from './defaultProps.js';\nimport {\n StyledTooltipContainer,\n StyledTooltipText,\n StyledMouseOverDetectionBox,\n StyledTriggerWrapper,\n} from './styles.js';\nimport type { DSTooltipV3T } from './react-desc-prop-types.js';\n\nconst DSTooltipV3: React.ComponentType<DSTooltipV3T.Props> = (props) => {\n const {\n text,\n startPlacementPreference,\n children,\n onOpen,\n onClose,\n id,\n textAlign,\n wrapWords,\n withoutArrow,\n customOffset,\n animationDuration,\n withoutAnimation,\n withoutPortal,\n portalDOMContainer,\n ...extraPopperJsProps\n } = useMemoMergePropsWithDefault<DSTooltipV3T.InternalProps>(props, defaultProps);\n\n const { handlers, arrowStyles, floatingStyles, isOpen, refs, hideTooltip, context } = useFloatingContext({\n placement: startPlacementPreference,\n customOffset,\n onOpen,\n onClose,\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n });\n React.useEffect(() => {\n if (extraPopperJsProps.showPopover === false) {\n hideTooltip();\n }\n }, [extraPopperJsProps.showPopover, hideTooltip]);\n return (\n <StyledTriggerWrapper\n {...handlers}\n innerRef={refs.setReference}\n data-testid={`${TooltipV3DatatestId.TRIGGER_WRAPPER}${id !== '' ? `_${id}` : ''}`}\n >\n <FloatingWrapper innerRef={refs.setFloating} isOpen={isOpen} floatingStyles={floatingStyles} context={context}>\n <StyledTooltipContainer>\n <StyledTooltipText aria-label={text} textAlign={textAlign} wrapWords={wrapWords}>\n {text}\n </StyledTooltipText>\n <StyledMouseOverDetectionBox />\n </StyledTooltipContainer>\n {!withoutArrow ? <PopoverArrow {...arrowStyles} /> : null}\n </FloatingWrapper>\n\n {children}\n </StyledTriggerWrapper>\n );\n};\n\nDSTooltipV3.displayName = 'DSTooltipV3';\nconst DSTooltipV3WithSchema = describe(DSTooltipV3);\nDSTooltipV3WithSchema.propTypes = propTypes;\n\nexport { DSTooltipV3, DSTooltipV3WithSchema };\n\nexport default DSTooltipV3;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACwDf,SACE,KADF;AAvDR,OAAOA,YAAW;AAClB,SAAS,oBAAoB,cAAc,uBAAuB;AAClE,SAAS,8BAA8B,gBAAgB;AACvD,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,MAAM,cAAuD,CAAC,UAAU;AACtE,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,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,6BAAyD,OAAO,YAAY;AAEhF,QAAM,EAAE,UAAU,aAAa,gBAAgB,QAAQ,MAAM,aAAa,QAAQ,IAAI,mBAAmB;AAAA,IACvG,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,mBAAmB,gBAAgB,OAAO;AAC5C,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,mBAAmB,aAAa,WAAW,CAAC;AAChD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,KAAK;AAAA,MACf,eAAa,GAAG,oBAAoB,eAAe,GAAG,OAAO,KAAK,IAAI,EAAE,KAAK,EAAE;AAAA,MAE/E;AAAA,6BAAC,mBAAgB,UAAU,KAAK,aAAa,QAAgB,gBAAgC,SAC3F;AAAA,+BAAC,0BACC;AAAA,gCAAC,qBAAkB,cAAY,MAAM,WAAsB,WACxD,gBACH;AAAA,YACA,oBAAC,+BAA4B;AAAA,aAC/B;AAAA,UACC,CAAC,eAAe,oBAAC,gBAAc,GAAG,aAAa,IAAK;AAAA,WACvD;AAAA,QAEC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { useFloatingContext, PopoverArrow, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { useMemoMergePropsWithDefault, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes } from './react-desc-prop-types.js';\nimport { TooltipV3DatatestId } from './TooltipV3DatatestId.js';\nimport { defaultProps } from './defaultProps.js';\nimport {\n StyledTooltipContainer,\n StyledTooltipText,\n StyledMouseOverDetectionBox,\n StyledTriggerWrapper,\n} from './styles.js';\nimport type { DSTooltipV3T } from './react-desc-prop-types.js';\n\nconst DSTooltipV3: React.ComponentType<DSTooltipV3T.Props> = (props) => {\n const {\n text,\n startPlacementPreference,\n children,\n onOpen,\n onClose,\n id,\n textAlign,\n wrapWords,\n withoutArrow,\n customOffset,\n animationDuration,\n withoutAnimation,\n withoutPortal,\n portalDOMContainer,\n applyTooltipOverflowWrap,\n ...extraPopperJsProps\n } = useMemoMergePropsWithDefault<DSTooltipV3T.InternalProps>(props, defaultProps);\n\n const { handlers, arrowStyles, floatingStyles, isOpen, refs, hideTooltip, context } = useFloatingContext({\n placement: startPlacementPreference,\n customOffset,\n onOpen,\n onClose,\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n });\n\n const { showPopover } = extraPopperJsProps;\n React.useEffect(() => {\n if (showPopover === false) {\n hideTooltip();\n }\n }, [showPopover, hideTooltip]);\n return (\n <StyledTriggerWrapper\n {...handlers}\n innerRef={refs.setReference}\n data-testid={`${TooltipV3DatatestId.TRIGGER_WRAPPER}${id !== '' ? `_${id}` : ''}`}\n >\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={showPopover || isOpen}\n floatingStyles={floatingStyles}\n context={context}\n >\n <StyledTooltipContainer>\n <StyledTooltipText\n aria-label={text}\n textAlign={textAlign}\n wrapWords={wrapWords}\n $applyTooltipOverflowWrap={applyTooltipOverflowWrap}\n >\n {text}\n </StyledTooltipText>\n <StyledMouseOverDetectionBox />\n </StyledTooltipContainer>\n {!withoutArrow ? <PopoverArrow {...arrowStyles} /> : null}\n </FloatingWrapper>\n\n {children}\n </StyledTriggerWrapper>\n );\n};\n\nDSTooltipV3.displayName = 'DSTooltipV3';\nconst DSTooltipV3WithSchema = describe(DSTooltipV3);\nDSTooltipV3WithSchema.propTypes = propTypes;\n\nexport { DSTooltipV3, DSTooltipV3WithSchema };\n\nexport default DSTooltipV3;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACgEf,SACE,KADF;AA/DR,OAAOA,YAAW;AAClB,SAAS,oBAAoB,cAAc,uBAAuB;AAClE,SAAS,8BAA8B,gBAAgB;AACvD,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,MAAM,cAAuD,CAAC,UAAU;AACtE,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,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,6BAAyD,OAAO,YAAY;AAEhF,QAAM,EAAE,UAAU,aAAa,gBAAgB,QAAQ,MAAM,aAAa,QAAQ,IAAI,mBAAmB;AAAA,IACvG,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,YAAY,IAAI;AACxB,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,gBAAgB,OAAO;AACzB,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,aAAa,WAAW,CAAC;AAC7B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,KAAK;AAAA,MACf,eAAa,GAAG,oBAAoB,eAAe,GAAG,OAAO,KAAK,IAAI,EAAE,KAAK,EAAE;AAAA,MAE/E;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf,QAAQ,eAAe;AAAA,YACvB;AAAA,YACA;AAAA,YAEA;AAAA,mCAAC,0BACC;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,cAAY;AAAA,oBACZ;AAAA,oBACA;AAAA,oBACA,2BAA2B;AAAA,oBAE1B;AAAA;AAAA,gBACH;AAAA,gBACA,oBAAC,+BAA4B;AAAA,iBAC/B;AAAA,cACC,CAAC,eAAe,oBAAC,gBAAc,GAAG,aAAa,IAAK;AAAA;AAAA;AAAA,QACvD;AAAA,QAEC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
6
6
  "names": ["React"]
7
7
  }
@@ -7,7 +7,8 @@ const defaultProps = {
7
7
  id: "",
8
8
  textAlign: "left",
9
9
  wrapWords: false,
10
- startPlacementPreference: "top"
10
+ startPlacementPreference: "top",
11
+ applyTooltipOverflowWrap: false
11
12
  };
12
13
  export {
13
14
  defaultProps
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSTooltipV3T } from './react-desc-prop-types.js';\n\nconst noop = () => {};\n\nexport const defaultProps: DSTooltipV3T.DefaultProps = {\n onOpen: noop,\n onClose: noop,\n id: '',\n textAlign: 'left',\n wrapWords: false,\n startPlacementPreference: 'top',\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,OAAO,MAAM;AAAC;AAEb,MAAM,eAA0C;AAAA,EACrD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,0BAA0B;AAC5B;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSTooltipV3T } from './react-desc-prop-types.js';\n\nconst noop = () => {};\n\nexport const defaultProps: DSTooltipV3T.DefaultProps = {\n onOpen: noop,\n onClose: noop,\n id: '',\n textAlign: 'left',\n wrapWords: false,\n startPlacementPreference: 'top',\n applyTooltipOverflowWrap: false,\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,OAAO,MAAM;AAAC;AAEb,MAAM,eAA0C;AAAA,EACrD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,0BAA0B;AAAA,EAC1B,0BAA0B;AAC5B;",
6
6
  "names": []
7
7
  }
@@ -4,6 +4,9 @@ import { PLACEMENT, TEXT_ALIGNMENT } from "./constants.js";
4
4
  const propTypes = {
5
5
  text: PropTypes.string.description("Tooltip text to be displayed on hover/focus").isRequired,
6
6
  textAlign: PropTypes.oneOf(TEXT_ALIGNMENT).description("Tooltip text alignment").defaultValue("left"),
7
+ applyTooltipOverflowWrap: PropTypes.bool.description(
8
+ "when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap"
9
+ ).defaultValue(false),
7
10
  wrapWords: PropTypes.bool.description("Break words into a new line. Useful when words exceed tooltip max-lenght.").defaultValue(false),
8
11
  children: PropTypes.node.description("Element to tie the tooltip to, must be a single node").isRequired,
9
12
  withoutPortal: PropTypes.bool.description("Whether or not the tooltip content should appear in a DOM portal or not").defaultValue(true),
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { PLACEMENT, TEXT_ALIGNMENT } from './constants.js';\n\nexport declare namespace DSTooltipV3T {\n export type Placement =\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'right-start'\n | 'right'\n | 'right-end'\n | 'bottom-end'\n | 'bottom'\n | 'bottom-start'\n | 'left-end'\n | 'left'\n | 'left-start';\n export type TextAlignment = 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';\n\n export interface DefaultProps {\n onOpen: () => void;\n onClose: () => void;\n id: string;\n textAlign: TextAlignment;\n wrapWords: boolean;\n startPlacementPreference: Placement;\n }\n\n export interface OptionalProps {\n zIndex?: number;\n ariaLabel?: string;\n withoutPortal?: boolean;\n withoutArrow?: boolean;\n withoutAnimation?: boolean;\n boundaryElement?: HTMLElement;\n animationDuration?: number;\n portalDOMContainer?: HTMLElement;\n placementOrderPreference?: Placement[];\n customOffset?: [number, number];\n modifiers?: Record<string, unknown>[];\n showPopover?: boolean;\n }\n\n export interface RequiredProps {\n children: React.ReactNode;\n text: string;\n }\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n // XstyledProps,\n RequiredProps {}\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n // XstyledProps,\n RequiredProps {}\n}\n\nexport const propTypes = {\n text: PropTypes.string.description('Tooltip text to be displayed on hover/focus').isRequired,\n textAlign: PropTypes.oneOf(TEXT_ALIGNMENT as unknown as unknown[])\n .description('Tooltip text alignment')\n .defaultValue('left'),\n wrapWords: PropTypes.bool\n .description('Break words into a new line. Useful when words exceed tooltip max-lenght.')\n .defaultValue(false),\n children: PropTypes.node.description('Element to tie the tooltip to, must be a single node').isRequired,\n withoutPortal: PropTypes.bool\n .description('Whether or not the tooltip content should appear in a DOM portal or not')\n .defaultValue(true),\n withoutArrow: PropTypes.bool.description('Whether or not the tooltip should use the arrow').defaultValue(false),\n boundaryElement: PropTypes.element\n .description(\n 'Bounding element to calculate upon, defaults to \"clippingParents\",' +\n 'which are the scrolling containers that may cause element to be partially or fully cut off',\n )\n .defaultValue(undefined),\n withoutAnimation: PropTypes.bool\n .description('Whether or not the popper context menu should be animated')\n .defaultValue(false),\n animationDuration: PropTypes.number.description('Popper context menus Animation duration in ms').defaultValue(100),\n portalDOMContainer: PropTypes.oneOfType([PropTypes.node, PropTypes.oneOf([null])])\n .description('When using portal, the container in which to append the DOM content, defaults to document body')\n .defaultValue(undefined),\n startPlacementPreference: PropTypes.oneOf(PLACEMENT)\n .description('start placement preferences, as per popperjs placement option')\n .defaultValue(\"'top'\"),\n placementOrderPreference: PropTypes.arrayOf(PropTypes.oneOf(PLACEMENT))\n .description('Array of placement preferences, as per popperjs \"flip\" placement option')\n .defaultValue(\"['top', 'bottom', 'left', 'right']\"),\n zIndex: PropTypes.number.description('popperjs content z-index').defaultValue(1),\n customOffset: PropTypes.arrayOf(PropTypes.number).description('placement offset array').defaultValue([0, 14]),\n modifiers: PropTypes.array\n .description('modifiers array for full-custom tooltip-js override, https://popper.js.org/docs/v2/modifiers/')\n .defaultValue(1),\n id: PropTypes.string.description('Optional id appended to data-testid').defaultValue(''),\n onOpen: PropTypes.func.description('Optional callback to be invoked when the tooltip opens').defaultValue('() => {}'),\n onClose: PropTypes.func\n .description('Optional callback to be invoked when the tooltip closes')\n .defaultValue('() => {}'),\n} as WeakValidationMap<unknown>;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,iBAAiB;AAC1B,SAAS,WAAW,sBAAsB;AA6DnC,MAAM,YAAY;AAAA,EACvB,MAAM,UAAU,OAAO,YAAY,6CAA6C,EAAE;AAAA,EAClF,WAAW,UAAU,MAAM,cAAsC,EAC9D,YAAY,wBAAwB,EACpC,aAAa,MAAM;AAAA,EACtB,WAAW,UAAU,KAClB,YAAY,2EAA2E,EACvF,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KAAK,YAAY,sDAAsD,EAAE;AAAA,EAC7F,eAAe,UAAU,KACtB,YAAY,yEAAyE,EACrF,aAAa,IAAI;AAAA,EACpB,cAAc,UAAU,KAAK,YAAY,iDAAiD,EAAE,aAAa,KAAK;AAAA,EAC9G,iBAAiB,UAAU,QACxB;AAAA,IACC;AAAA,EAEF,EACC,aAAa,MAAS;AAAA,EACzB,kBAAkB,UAAU,KACzB,YAAY,2DAA2D,EACvE,aAAa,KAAK;AAAA,EACrB,mBAAmB,UAAU,OAAO,YAAY,+CAA+C,EAAE,aAAa,GAAG;AAAA,EACjH,oBAAoB,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAC9E,YAAY,gGAAgG,EAC5G,aAAa,MAAS;AAAA,EACzB,0BAA0B,UAAU,MAAM,SAAS,EAChD,YAAY,+DAA+D,EAC3E,aAAa,OAAO;AAAA,EACvB,0BAA0B,UAAU,QAAQ,UAAU,MAAM,SAAS,CAAC,EACnE,YAAY,yEAAyE,EACrF,aAAa,oCAAoC;AAAA,EACpD,QAAQ,UAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,CAAC;AAAA,EAC/E,cAAc,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,wBAAwB,EAAE,aAAa,CAAC,GAAG,EAAE,CAAC;AAAA,EAC5G,WAAW,UAAU,MAClB,YAAY,+FAA+F,EAC3G,aAAa,CAAC;AAAA,EACjB,IAAI,UAAU,OAAO,YAAY,qCAAqC,EAAE,aAAa,EAAE;AAAA,EACvF,QAAQ,UAAU,KAAK,YAAY,wDAAwD,EAAE,aAAa,UAAU;AAAA,EACpH,SAAS,UAAU,KAChB,YAAY,yDAAyD,EACrE,aAAa,UAAU;AAC5B;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { PLACEMENT, TEXT_ALIGNMENT } from './constants.js';\n\nexport declare namespace DSTooltipV3T {\n export type Placement =\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'right-start'\n | 'right'\n | 'right-end'\n | 'bottom-end'\n | 'bottom'\n | 'bottom-start'\n | 'left-end'\n | 'left'\n | 'left-start';\n export type TextAlignment = 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';\n\n export interface DefaultProps {\n onOpen: () => void;\n onClose: () => void;\n id: string;\n textAlign: TextAlignment;\n wrapWords: boolean;\n startPlacementPreference: Placement;\n applyTooltipOverflowWrap: boolean;\n }\n\n export interface OptionalProps {\n zIndex?: number;\n ariaLabel?: string;\n withoutPortal?: boolean;\n withoutArrow?: boolean;\n withoutAnimation?: boolean;\n boundaryElement?: HTMLElement;\n animationDuration?: number;\n portalDOMContainer?: HTMLElement;\n placementOrderPreference?: Placement[];\n customOffset?: [number, number];\n modifiers?: Record<string, unknown>[];\n showPopover?: boolean;\n }\n\n export interface RequiredProps {\n children: React.ReactNode;\n text: string;\n }\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n // XstyledProps,\n RequiredProps {}\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n // XstyledProps,\n RequiredProps {}\n}\n\nexport const propTypes = {\n text: PropTypes.string.description('Tooltip text to be displayed on hover/focus').isRequired,\n textAlign: PropTypes.oneOf(TEXT_ALIGNMENT as unknown as unknown[])\n .description('Tooltip text alignment')\n .defaultValue('left'),\n applyTooltipOverflowWrap: PropTypes.bool\n .description(\n 'when a tooltip is present, the tooltip text may be too long to fit in the pill. If true, the tooltip will wrap to the next line using overflow-wrap',\n )\n .defaultValue(false),\n wrapWords: PropTypes.bool\n .description('Break words into a new line. Useful when words exceed tooltip max-lenght.')\n .defaultValue(false),\n children: PropTypes.node.description('Element to tie the tooltip to, must be a single node').isRequired,\n withoutPortal: PropTypes.bool\n .description('Whether or not the tooltip content should appear in a DOM portal or not')\n .defaultValue(true),\n withoutArrow: PropTypes.bool.description('Whether or not the tooltip should use the arrow').defaultValue(false),\n boundaryElement: PropTypes.element\n .description(\n 'Bounding element to calculate upon, defaults to \"clippingParents\",' +\n 'which are the scrolling containers that may cause element to be partially or fully cut off',\n )\n .defaultValue(undefined),\n withoutAnimation: PropTypes.bool\n .description('Whether or not the popper context menu should be animated')\n .defaultValue(false),\n animationDuration: PropTypes.number.description('Popper context menus Animation duration in ms').defaultValue(100),\n portalDOMContainer: PropTypes.oneOfType([PropTypes.node, PropTypes.oneOf([null])])\n .description('When using portal, the container in which to append the DOM content, defaults to document body')\n .defaultValue(undefined),\n startPlacementPreference: PropTypes.oneOf(PLACEMENT)\n .description('start placement preferences, as per popperjs placement option')\n .defaultValue(\"'top'\"),\n placementOrderPreference: PropTypes.arrayOf(PropTypes.oneOf(PLACEMENT))\n .description('Array of placement preferences, as per popperjs \"flip\" placement option')\n .defaultValue(\"['top', 'bottom', 'left', 'right']\"),\n zIndex: PropTypes.number.description('popperjs content z-index').defaultValue(1),\n customOffset: PropTypes.arrayOf(PropTypes.number).description('placement offset array').defaultValue([0, 14]),\n modifiers: PropTypes.array\n .description('modifiers array for full-custom tooltip-js override, https://popper.js.org/docs/v2/modifiers/')\n .defaultValue(1),\n id: PropTypes.string.description('Optional id appended to data-testid').defaultValue(''),\n onOpen: PropTypes.func.description('Optional callback to be invoked when the tooltip opens').defaultValue('() => {}'),\n onClose: PropTypes.func\n .description('Optional callback to be invoked when the tooltip closes')\n .defaultValue('() => {}'),\n} as WeakValidationMap<unknown>;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,iBAAiB;AAC1B,SAAS,WAAW,sBAAsB;AA8DnC,MAAM,YAAY;AAAA,EACvB,MAAM,UAAU,OAAO,YAAY,6CAA6C,EAAE;AAAA,EAClF,WAAW,UAAU,MAAM,cAAsC,EAC9D,YAAY,wBAAwB,EACpC,aAAa,MAAM;AAAA,EACtB,0BAA0B,UAAU,KACjC;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,WAAW,UAAU,KAClB,YAAY,2EAA2E,EACvF,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KAAK,YAAY,sDAAsD,EAAE;AAAA,EAC7F,eAAe,UAAU,KACtB,YAAY,yEAAyE,EACrF,aAAa,IAAI;AAAA,EACpB,cAAc,UAAU,KAAK,YAAY,iDAAiD,EAAE,aAAa,KAAK;AAAA,EAC9G,iBAAiB,UAAU,QACxB;AAAA,IACC;AAAA,EAEF,EACC,aAAa,MAAS;AAAA,EACzB,kBAAkB,UAAU,KACzB,YAAY,2DAA2D,EACvE,aAAa,KAAK;AAAA,EACrB,mBAAmB,UAAU,OAAO,YAAY,+CAA+C,EAAE,aAAa,GAAG;AAAA,EACjH,oBAAoB,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAC9E,YAAY,gGAAgG,EAC5G,aAAa,MAAS;AAAA,EACzB,0BAA0B,UAAU,MAAM,SAAS,EAChD,YAAY,+DAA+D,EAC3E,aAAa,OAAO;AAAA,EACvB,0BAA0B,UAAU,QAAQ,UAAU,MAAM,SAAS,CAAC,EACnE,YAAY,yEAAyE,EACrF,aAAa,oCAAoC;AAAA,EACpD,QAAQ,UAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,CAAC;AAAA,EAC/E,cAAc,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,wBAAwB,EAAE,aAAa,CAAC,GAAG,EAAE,CAAC;AAAA,EAC5G,WAAW,UAAU,MAClB,YAAY,+FAA+F,EAC3G,aAAa,CAAC;AAAA,EACjB,IAAI,UAAU,OAAO,YAAY,qCAAqC,EAAE,aAAa,EAAE;AAAA,EACvF,QAAQ,UAAU,KAAK,YAAY,wDAAwD,EAAE,aAAa,UAAU;AAAA,EACpH,SAAS,UAAU,KAChB,YAAY,yDAAyD,EACrE,aAAa,UAAU;AAC5B;",
6
6
  "names": []
7
7
  }
@@ -17,10 +17,21 @@ const StyledTooltipContainer = styled.div`
17
17
  const StyledTooltipText = styled.div`
18
18
  display: inline-block;
19
19
  text-align: ${({ textAlign }) => textAlign};
20
- white-space: ${({ wrapWords }) => wrapWords ? "pre-wrap" : "normal"};
21
- word-break: ${({ wrapWords }) => wrapWords ? "break-all" : "normal"};
22
- word-wrap: break-word;
23
- overflow-wrap: break-word;
20
+
21
+ ${({ wrapWords, $applyTooltipOverflowWrap }) => {
22
+ if ($applyTooltipOverflowWrap) {
23
+ return `overflow-wrap: break-word;
24
+ white-space: pre-wrap;
25
+ min-width: 0px;`;
26
+ }
27
+ if (wrapWords) {
28
+ return `white-space: pre-wrap;
29
+ word-break: break-all;
30
+ overflow-wrap: break-word;`;
31
+ }
32
+ return `white-space: normal;
33
+ overflow-wrap: break-word;`;
34
+ }};
24
35
  `;
25
36
  const StyledMouseOverDetectionBox = styled.div`
26
37
  position: absolute;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { DSTooltipV3T } from './react-desc-prop-types.js';\n\ninterface StyledTooltipTextT {\n wrapWords: boolean;\n textAlign: DSTooltipV3T.TextAlignment;\n}\n\nexport const StyledTooltipContainer = styled.div`\n text-align: center;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n min-height: 30px;\n display: grid;\n align-items: center;\n padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};\n position: relative;\n background-color: white;\n border-radius: 2px;\n font-size: 13px;\n color: ${({ theme }) => theme.colors.neutral[600]};\n`;\n\nexport const StyledTooltipText = styled.div<StyledTooltipTextT>`\n display: inline-block;\n text-align: ${({ textAlign }) => textAlign};\n white-space: ${({ wrapWords }) => (wrapWords ? 'pre-wrap' : 'normal')};\n word-break: ${({ wrapWords }) => (wrapWords ? 'break-all' : 'normal')};\n word-wrap: break-word;\n overflow-wrap: break-word;\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n position: absolute;\n top: -15px;\n right: -15px;\n width: calc(100% + 30px);\n height: calc(100% + 30px);\n z-index: -1;\n`;\n\nexport const StyledTriggerWrapper = styled.div`\n display: inline-flex;\n width: 100%;\n`;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAQhB,MAAM,yBAAyB,OAAO;AAAA;AAAA,eAE9B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAK9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG5C,MAAM,oBAAoB,OAAO;AAAA;AAAA,gBAExB,CAAC,EAAE,UAAU,MAAM,SAAS;AAAA,iBAC3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa,QAAS;AAAA,gBACvD,CAAC,EAAE,UAAU,MAAO,YAAY,cAAc,QAAS;AAAA;AAAA;AAAA;AAKhE,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3C,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { DSTooltipV3T } from './react-desc-prop-types.js';\n\ninterface StyledTooltipTextT {\n wrapWords: boolean;\n textAlign: DSTooltipV3T.TextAlignment;\n}\n\nexport const StyledTooltipContainer = styled.div`\n text-align: center;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n min-height: 30px;\n display: grid;\n align-items: center;\n padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};\n position: relative;\n background-color: white;\n border-radius: 2px;\n font-size: 13px;\n color: ${({ theme }) => theme.colors.neutral[600]};\n`;\n\nexport const StyledTooltipText = styled.div<StyledTooltipTextT & { $applyTooltipOverflowWrap: boolean }>`\n display: inline-block;\n text-align: ${({ textAlign }) => textAlign};\n\n ${({ wrapWords, $applyTooltipOverflowWrap }) => {\n if ($applyTooltipOverflowWrap) {\n // word-wrap: break-word; // <- this is the legacy \"overflow-wrap\" property, we should not need the legacy declaration\n // min-width: 0px; // <-- min-width:0px is needed because css grid auto-sizing are broken in css and impossible to understand\n return `overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;`;\n }\n if (wrapWords) {\n return `white-space: pre-wrap;\n word-break: break-all;\n overflow-wrap: break-word;`;\n }\n return `white-space: normal;\n overflow-wrap: break-word;`;\n }};\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n position: absolute;\n top: -15px;\n right: -15px;\n width: calc(100% + 30px);\n height: calc(100% + 30px);\n z-index: -1;\n`;\n\nexport const StyledTriggerWrapper = styled.div`\n display: inline-flex;\n width: 100%;\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAQhB,MAAM,yBAAyB,OAAO;AAAA;AAAA,eAE9B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAK9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG5C,MAAM,oBAAoB,OAAO;AAAA;AAAA,gBAExB,CAAC,EAAE,UAAU,MAAM,SAAS;AAAA;AAAA,IAExC,CAAC,EAAE,WAAW,0BAA0B,MAAM;AAC9C,MAAI,2BAA2B;AAG7B,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,MAAI,WAAW;AACb,WAAO;AAAA;AAAA;AAAA,EAGT;AACA,SAAO;AAAA;AAET,CAAC;AAAA;AAGI,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3C,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -1,12 +1,10 @@
1
1
  import * as React from "react";
2
2
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
3
  import { DSTooltipV3 } from "../index.js";
4
- const mockChildren = () => /* @__PURE__ */ jsx("div", {});
5
4
  const mockPlacementOrderPreference = ["bottom-start", "bottom", "bottom-end"];
6
5
  const mockCustomOffset = [0, 0];
7
6
  const mockModifiers = [{}];
8
7
  const testRequiredProps = {
9
- children: mockChildren(),
10
8
  text: ""
11
9
  };
12
10
  const testOptionalProps = {
@@ -48,7 +46,8 @@ const testCompleteDefaults = {
48
46
  },
49
47
  textAlign: "center",
50
48
  wrapWords: false,
51
- startPlacementPreference: "bottom"
49
+ startPlacementPreference: "bottom",
50
+ applyTooltipOverflowWrap: false
52
51
  };
53
52
  const testInternalProps = {
54
53
  ...testRequiredProps,
@@ -68,7 +67,7 @@ const testExplicitDefinition = {
68
67
  },
69
68
  textAlign: "center",
70
69
  wrapWords: false,
71
- children: mockChildren(),
70
+ applyTooltipOverflowWrap: false,
72
71
  text: "",
73
72
  zIndex: 1,
74
73
  ariaLabel: "",
@@ -92,7 +91,7 @@ const testInferedTypeCompatibility = {
92
91
  },
93
92
  textAlign: "center",
94
93
  wrapWords: false,
95
- children: mockChildren(),
94
+ applyTooltipOverflowWrap: false,
96
95
  text: "",
97
96
  zIndex: 1,
98
97
  ariaLabel: "",
@@ -116,7 +115,6 @@ const testDefinitionAsConst = {
116
115
  },
117
116
  textAlign: "center",
118
117
  wrapWords: false,
119
- children: mockChildren(),
120
118
  text: "",
121
119
  zIndex: 1,
122
120
  ariaLabel: "",
@@ -133,9 +131,9 @@ const testDefinitionAsConst = {
133
131
  showPopover: true
134
132
  };
135
133
  const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
136
- /* @__PURE__ */ jsx(DSTooltipV3, { ...testExplicitDefinition }),
137
- /* @__PURE__ */ jsx(DSTooltipV3, { ...testInferedTypeCompatibility }),
138
- /* @__PURE__ */ jsx(DSTooltipV3, { ...testDefinitionAsConst }),
134
+ /* @__PURE__ */ jsx(DSTooltipV3, { ...testExplicitDefinition, children: /* @__PURE__ */ jsx("div", {}) }),
135
+ /* @__PURE__ */ jsx(DSTooltipV3, { ...testInferedTypeCompatibility, children: /* @__PURE__ */ jsx("div", {}) }),
136
+ /* @__PURE__ */ jsx(DSTooltipV3, { ...testDefinitionAsConst, children: /* @__PURE__ */ jsx("div", {}) }),
139
137
  /* @__PURE__ */ jsx(
140
138
  DSTooltipV3,
141
139
  {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-tooltip-v3-valid.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSTooltipV3 } from '../index.js';\nimport type { DSTooltipV3T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSTooltipV3T.Props;\ntype ComponentPropsInternals = DSTooltipV3T.InternalProps;\ntype ComponentPropsDefaultProps = DSTooltipV3T.DefaultProps;\ntype ComponentPropsOptionalProps = DSTooltipV3T.OptionalProps;\ntype ComponentPropsRequiredProps = DSTooltipV3T.RequiredProps;\n\nconst mockChildren = () => <div></div>;\n\nconst mockPlacementOrderPreference: DSTooltipV3T.Placement[] = ['bottom-start', 'bottom', 'bottom-end'];\nconst mockCustomOffset: DSTooltipV3T.OptionalProps['customOffset'] = [0, 0];\nconst mockModifiers: DSTooltipV3T.OptionalProps['modifiers'] = [{}];\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n children: mockChildren(),\n text: '',\n};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n zIndex: 1,\n ariaLabel: '',\n withoutPortal: false,\n withoutArrow: false,\n withoutAnimation: false,\n boundaryElement: undefined,\n animationDuration: 1000,\n portalDOMContainer: undefined,\n placementOrderPreference: mockPlacementOrderPreference,\n customOffset: mockCustomOffset,\n modifiers: mockModifiers,\n showPopover: true,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n id: '',\n onOpen: () => {},\n onClose: () => {},\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n id: 'id',\n onOpen: () => {},\n onClose: () => {},\n textAlign: 'center',\n wrapWords: false,\n startPlacementPreference: 'bottom',\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n id: 'id',\n onOpen: () => {},\n onClose: () => {},\n textAlign: 'center',\n wrapWords: false,\n children: mockChildren(),\n text: '',\n zIndex: 1,\n ariaLabel: '',\n withoutPortal: false,\n withoutArrow: false,\n withoutAnimation: false,\n boundaryElement: undefined,\n animationDuration: 1000,\n portalDOMContainer: undefined,\n startPlacementPreference: 'bottom',\n placementOrderPreference: mockPlacementOrderPreference,\n customOffset: mockCustomOffset,\n modifiers: mockModifiers,\n showPopover: true,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n id: 'id',\n onOpen: () => {},\n onClose: () => {},\n textAlign: 'center',\n wrapWords: false,\n children: mockChildren(),\n text: '',\n zIndex: 1,\n ariaLabel: '',\n withoutPortal: false,\n withoutArrow: false,\n withoutAnimation: false,\n boundaryElement: undefined,\n animationDuration: 1000,\n portalDOMContainer: undefined,\n startPlacementPreference: 'bottom',\n placementOrderPreference: mockPlacementOrderPreference,\n customOffset: mockCustomOffset,\n modifiers: mockModifiers,\n showPopover: true,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n id: 'id',\n onOpen: () => {},\n onClose: () => {},\n textAlign: 'center',\n wrapWords: false,\n children: mockChildren(),\n text: '',\n zIndex: 1,\n ariaLabel: '',\n withoutPortal: false,\n withoutArrow: false,\n withoutAnimation: false,\n boundaryElement: undefined,\n animationDuration: 1000,\n portalDOMContainer: undefined,\n startPlacementPreference: 'bottom',\n placementOrderPreference: mockPlacementOrderPreference,\n customOffset: mockCustomOffset,\n modifiers: mockModifiers,\n showPopover: true,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSTooltipV3 {...testExplicitDefinition} />\n <DSTooltipV3 {...testInferedTypeCompatibility} />\n <DSTooltipV3 {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSTooltipV3\n id=\"id\"\n onOpen={() => {}}\n onClose={() => {}}\n textAlign=\"center\"\n wrapWords={false}\n text=\"\"\n zIndex={1}\n ariaLabel=\"\"\n withoutPortal={false}\n withoutArrow={false}\n withoutAnimation={false}\n boundaryElement={undefined}\n animationDuration={1000}\n portalDOMContainer={undefined}\n startPlacementPreference=\"bottom\"\n placementOrderPreference={['bottom-start', 'bottom', 'bottom-end']}\n customOffset={[0, 0]}\n modifiers={[]}\n showPopover\n >\n <div />\n </DSTooltipV3>\n </>\n);\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSTooltipV3 } from '../index.js';\nimport type { DSTooltipV3T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSTooltipV3T.Props;\ntype ComponentPropsInternals = DSTooltipV3T.InternalProps;\ntype ComponentPropsDefaultProps = DSTooltipV3T.DefaultProps;\ntype ComponentPropsOptionalProps = DSTooltipV3T.OptionalProps;\ntype ComponentPropsRequiredProps = DSTooltipV3T.RequiredProps;\n\nconst mockPlacementOrderPreference: DSTooltipV3T.Placement[] = ['bottom-start', 'bottom', 'bottom-end'];\nconst mockCustomOffset: DSTooltipV3T.OptionalProps['customOffset'] = [0, 0];\nconst mockModifiers: DSTooltipV3T.OptionalProps['modifiers'] = [{}];\n\n// we omit children because children MUST be passed ALWAYS via the JSX composition react pattern\nconst testRequiredProps: Omit<ComponentPropsRequiredProps, 'children'> = {\n text: '',\n};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n zIndex: 1,\n ariaLabel: '',\n withoutPortal: false,\n withoutArrow: false,\n withoutAnimation: false,\n boundaryElement: undefined,\n animationDuration: 1000,\n portalDOMContainer: undefined,\n placementOrderPreference: mockPlacementOrderPreference,\n customOffset: mockCustomOffset,\n modifiers: mockModifiers,\n showPopover: true,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n id: '',\n onOpen: () => {},\n onClose: () => {},\n};\n\n// we omit children because children MUST be passed ALWAYS via the JSX composition react pattern\nconst testProps: Omit<ComponentPropsForApp, 'children'> = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n id: 'id',\n onOpen: () => {},\n onClose: () => {},\n textAlign: 'center',\n wrapWords: false,\n startPlacementPreference: 'bottom',\n applyTooltipOverflowWrap: false,\n};\n\n// we omit children because children MUST be passed ALWAYS via the JSX composition react pattern\nconst testInternalProps: Omit<ComponentPropsInternals, 'children'> = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// we omit children because children MUST be passed ALWAYS via the JSX composition react pattern\nconst testExplicitDefinition: Omit<ComponentPropsForApp, 'children'> = {\n id: 'id',\n onOpen: () => {},\n onClose: () => {},\n textAlign: 'center',\n wrapWords: false,\n applyTooltipOverflowWrap: false,\n text: '',\n zIndex: 1,\n ariaLabel: '',\n withoutPortal: false,\n withoutArrow: false,\n withoutAnimation: false,\n boundaryElement: undefined,\n animationDuration: 1000,\n portalDOMContainer: undefined,\n startPlacementPreference: 'bottom',\n placementOrderPreference: mockPlacementOrderPreference,\n customOffset: mockCustomOffset,\n modifiers: mockModifiers,\n showPopover: true,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n id: 'id',\n onOpen: () => {},\n onClose: () => {},\n textAlign: 'center',\n wrapWords: false,\n applyTooltipOverflowWrap: false,\n text: '',\n zIndex: 1,\n ariaLabel: '',\n withoutPortal: false,\n withoutArrow: false,\n withoutAnimation: false,\n boundaryElement: undefined,\n animationDuration: 1000,\n portalDOMContainer: undefined,\n startPlacementPreference: 'bottom',\n placementOrderPreference: mockPlacementOrderPreference,\n customOffset: mockCustomOffset,\n modifiers: mockModifiers,\n showPopover: true,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n id: 'id',\n onOpen: () => {},\n onClose: () => {},\n textAlign: 'center',\n wrapWords: false,\n text: '',\n zIndex: 1,\n ariaLabel: '',\n withoutPortal: false,\n withoutArrow: false,\n withoutAnimation: false,\n boundaryElement: undefined,\n animationDuration: 1000,\n portalDOMContainer: undefined,\n startPlacementPreference: 'bottom',\n placementOrderPreference: mockPlacementOrderPreference,\n customOffset: mockCustomOffset,\n modifiers: mockModifiers,\n showPopover: true,\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSTooltipV3 {...testExplicitDefinition}>\n <div></div>\n </DSTooltipV3>\n <DSTooltipV3 {...testInferedTypeCompatibility}>\n <div></div>\n </DSTooltipV3>\n <DSTooltipV3 {...testDefinitionAsConst}>\n <div></div>\n </DSTooltipV3>\n {/* works with inline values */}\n <DSTooltipV3\n id=\"id\"\n onOpen={() => {}}\n onClose={() => {}}\n textAlign=\"center\"\n wrapWords={false}\n text=\"\"\n zIndex={1}\n ariaLabel=\"\"\n withoutPortal={false}\n withoutArrow={false}\n withoutAnimation={false}\n boundaryElement={undefined}\n animationDuration={1000}\n portalDOMContainer={undefined}\n startPlacementPreference=\"bottom\"\n placementOrderPreference={['bottom-start', 'bottom', 'bottom-end']}\n customOffset={[0, 0]}\n modifiers={[]}\n showPopover\n >\n <div />\n </DSTooltipV3>\n </>\n);\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -10,6 +10,7 @@ export declare namespace DSTooltipV3T {
10
10
  textAlign: TextAlignment;
11
11
  wrapWords: boolean;
12
12
  startPlacementPreference: Placement;
13
+ applyTooltipOverflowWrap: boolean;
13
14
  }
14
15
  interface OptionalProps {
15
16
  zIndex?: number;
@@ -4,7 +4,9 @@ interface StyledTooltipTextT {
4
4
  textAlign: DSTooltipV3T.TextAlignment;
5
5
  }
6
6
  export declare const StyledTooltipContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
7
- export declare const StyledTooltipText: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledTooltipTextT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
7
+ export declare const StyledTooltipText: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledTooltipTextT & {
8
+ $applyTooltipOverflowWrap: boolean;
9
+ } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
8
10
  export declare const StyledMouseOverDetectionBox: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
9
11
  export declare const StyledTriggerWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
10
12
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-tooltip-v3",
3
- "version": "3.45.0-rc.0",
3
+ "version": "3.45.0-rc.1",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Tooltip V3",
6
6
  "files": [
@@ -96,19 +96,19 @@
96
96
  "indent": 4
97
97
  },
98
98
  "dependencies": {
99
- "@elliemae/ds-button": "3.45.0-rc.0",
100
- "@elliemae/ds-floating-context": "3.45.0-rc.0",
101
- "@elliemae/ds-shared": "3.45.0-rc.0",
102
- "@elliemae/ds-system": "3.45.0-rc.0",
103
- "@elliemae/ds-props-helpers": "3.45.0-rc.0"
99
+ "@elliemae/ds-button": "3.45.0-rc.1",
100
+ "@elliemae/ds-floating-context": "3.45.0-rc.1",
101
+ "@elliemae/ds-shared": "3.45.0-rc.1",
102
+ "@elliemae/ds-props-helpers": "3.45.0-rc.1",
103
+ "@elliemae/ds-system": "3.45.0-rc.1"
104
104
  },
105
105
  "devDependencies": {
106
106
  "@elliemae/pui-cli": "9.0.0-next.50",
107
107
  "react": "^17.0.2",
108
108
  "react-dom": "^17.0.2",
109
109
  "styled-components": "~5.3.9",
110
- "@elliemae/ds-monorepo-devops": "3.45.0-rc.0",
111
- "@elliemae/ds-grid": "3.45.0-rc.0"
110
+ "@elliemae/ds-grid": "3.45.0-rc.1",
111
+ "@elliemae/ds-monorepo-devops": "3.45.0-rc.1"
112
112
  },
113
113
  "peerDependencies": {
114
114
  "react": "^17.0.2",