@elliemae/ds-indeterminate-progress-indicator 3.80.0-next.38 → 3.80.0-next.39

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.
@@ -81,11 +81,11 @@ const StyledTooltipContainer = (0, import_ds_system.styled)("div", {
81
81
  color: ${({ theme }) => theme.colors.neutral[600]};
82
82
  pointer-events: none;
83
83
  `;
84
- const StyledTooltipText = (0, import_ds_system.styled)(import_ds_typography.DSTypography, {
84
+ const StyledTooltipText = (0, import_ds_system.styled)("span", {
85
85
  name: import_constants.DSIndeterminateProgressIndicatorName,
86
86
  slot: import_constants.INDETERMINATE_PROGRESS_INDICATOR_SLOTS.TOOLTIP_TEXT
87
87
  })`
88
- && {
88
+ && > * {
89
89
  ${inheritedTypography}
90
90
  }
91
91
  `;
@@ -128,16 +128,7 @@ const TruncatedTooltipText = ({
128
128
  floatingStyles,
129
129
  context,
130
130
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledTooltipContainer, { getOwnerProps, getOwnerPropsArguments, children: [
131
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
132
- StyledTooltipText,
133
- {
134
- component: "span",
135
- variant: "b2-light",
136
- getOwnerProps,
137
- getOwnerPropsArguments,
138
- children: value
139
- }
140
- ),
131
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTooltipText, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { component: "span", variant: "b2-light", children: value }) }),
141
132
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
142
133
  ] })
143
134
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/TruncatedTooltipText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useCallback, useState } from 'react';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n useFloatingContext,\n FloatingWrapper,\n PopoverArrow,\n type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\nimport { DSIndeterminateProgressIndicatorName, INDETERMINATE_PROGRESS_INDICATOR_SLOTS } from './constants/index.js';\n\n// ============================================================================================================\n// Typography (PUI-18944)\n// ============================================================================================================\n// The label and the tooltip text render through DSTypography, following the ds-form-radio reference pattern\n// (b2 / b2-light). Two constraints shape how:\n//\n// - The label's DSTypography is nested inside the LABEL slot element rather than being the slot element.\n// Making DSTypography the slot would let the nested-slot mechanism rewrite `data-dimsum-slot` to\n// `dsTypographyRoot` and demote ours to `data-dimsum-parent-slot` (see ds-progress-indicator, PUI-18942).\n// `dsIndeterminateprogressindicatorLabel` shipped on this span until the ds-truncated-tooltip-text\n// deprecation (PUI-17903) silently dropped it, so it is restored here with its original value.\n// - No visual change. Today the label inherits the consumer's typography and the tooltip text inherits the\n// body's, inside a container that pins 13px / neutral-600. DSTypography's own metrics (b2 line-height,\n// font-family, `white-space: pre-wrap`) would change both, so the DSTypography elements inherit everything\n// from their parent. `&&` gives 0-2-0, which beats DSTypography's single class whatever the injection order.\n//\n// Deliberately neutral: adopting the b2 / b2-light metrics is a UX decision, not a side effect of this change.\n// When it is taken, drop `font` / `line-height` / `color` from these blocks and let the variants apply.\nconst inheritedTypography = css`\n font: inherit;\n line-height: inherit;\n color: inherit;\n white-space: inherit;\n overflow-wrap: inherit;\n margin: 0;\n padding: 0;\n`;\n\nconst StyledLabel = styled('span', {\n name: DSIndeterminateProgressIndicatorName,\n slot: INDETERMINATE_PROGRESS_INDICATOR_SLOTS.LABEL,\n})`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;\n && > * {\n ${inheritedTypography}\n }\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst StyledTooltipContainer = styled('div', {\n name: DSIndeterminateProgressIndicatorName,\n slot: INDETERMINATE_PROGRESS_INDICATOR_SLOTS.TOOLTIP_CONTAINER,\n})`\n text-align: center;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n overflow-wrap: break-word;\n word-break: break-word;\n min-height: 30px;\n display: grid;\n align-items: center;\n padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};\n position: relative;\n background-color: white;\n border-radius: 2px;\n font-size: 13px;\n color: ${({ theme }) => theme.colors.neutral[600]};\n pointer-events: none;\n`;\n\nconst StyledTooltipText = styled(DSTypography, {\n name: DSIndeterminateProgressIndicatorName,\n slot: INDETERMINATE_PROGRESS_INDICATOR_SLOTS.TOOLTIP_TEXT,\n})`\n && {\n ${inheritedTypography}\n }\n`;\n\ninterface TruncatedTooltipTextProps {\n value?: string;\n placement?: DSHookFloatingContextT.PopperPlacementsT;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nconst TruncatedTooltipText = ({\n value = '',\n placement = 'top',\n getOwnerProps,\n getOwnerPropsArguments,\n}: TruncatedTooltipTextProps) => {\n const [showTooltip, setShowTooltip] = useState(false);\n\n const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n placement,\n externallyControlledIsOpen: showTooltip,\n withoutAnimation: true,\n });\n\n const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n const el = e.currentTarget;\n setShowTooltip(el.offsetWidth < el.scrollWidth);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setShowTooltip(false);\n }, []);\n\n return (\n <>\n <StyledLabel\n innerRef={refs.setReference}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSTypography component=\"span\" variant=\"b2\">\n {value}\n </DSTypography>\n </StyledLabel>\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={showTooltip}\n floatingStyles={floatingStyles}\n context={context}\n >\n <StyledTooltipContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledTooltipText\n component=\"span\"\n variant=\"b2-light\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledTooltipText>\n <PopoverArrow {...arrowStyles} />\n </StyledTooltipContainer>\n </FloatingWrapper>\n </>\n );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmHnB;AAnHJ,mBAA6C;AAC7C,uBAA4B;AAC5B,2BAA6B;AAC7B,iCAKO;AACP,uBAA6F;AAoB7F,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU5B,MAAM,kBAAc,yBAAO,QAAQ;AAAA,EACjC,MAAM;AAAA,EACN,MAAM,wDAAuC;AAC/C,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOK,mBAAmB;AAAA;AAAA;AAKzB,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,wDAAuC;AAC/C,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKvD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAInD,MAAM,wBAAoB,yBAAO,mCAAc;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,wDAAuC;AAC/C,CAAC;AAAA;AAAA,MAEK,mBAAmB;AAAA;AAAA;AAWzB,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAiC;AAC/B,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,QAAI,+CAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,uBAAmB,0BAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAmB,0BAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,cAAc;AAAA,QACd,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QAEA,sDAAC,qCAAa,WAAU,QAAO,SAAQ,MACpC,iBACH;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,uDAAC,0BAAuB,eAA8B,wBACpD;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAQ;AAAA,cACR;AAAA,cACA;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA,4CAAC,2CAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
4
+ "sourcesContent": ["import React, { useCallback, useState } from 'react';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n useFloatingContext,\n FloatingWrapper,\n PopoverArrow,\n type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\nimport { DSIndeterminateProgressIndicatorName, INDETERMINATE_PROGRESS_INDICATOR_SLOTS } from './constants/index.js';\n\n// ============================================================================================================\n// Typography (PUI-18944)\n// ============================================================================================================\n// The label and the tooltip text render through DSTypography, following the ds-form-radio reference pattern\n// (b2 / b2-light). Three constraints shape how:\n//\n// - Each DSTypography is nested inside its slot element (LABEL, TOOLTIP_TEXT) rather than being the slot.\n// Making DSTypography the slot would let the nested-slot mechanism rewrite `data-dimsum-slot` to\n// `dsTypographyRoot` and demote ours to `data-dimsum-parent-slot` (see ds-progress-indicator, PUI-18942).\n// `dsIndeterminateprogressindicatorLabel` shipped on the label span until the ds-truncated-tooltip-text\n// deprecation (PUI-17903) silently dropped it, so it is restored here with its original value.\n// - No visual change. Today the label inherits the consumer's typography and the tooltip text inherits the\n// body's, inside a container that pins 13px / neutral-600. DSTypography's own metrics (b2 line-height,\n// font-family, `white-space: pre-wrap`) would change both, so the DSTypography elements inherit everything\n// from their slot. `&& > *` gives 0-2-0, which beats DSTypography's single class whatever the injection order.\n// - Slot customization must still reach the text. The theme's `styleOverrides` for a slot are emitted at the end\n// of the slot's own class (0-1-0), so the inherit rules target the child only: a 0-2-0 rule on the slot\n// element itself would silently beat a consumer's `styleOverrides` color or font for that slot.\n//\n// Deliberately neutral: adopting the b2 / b2-light metrics is a UX decision, not a side effect of this change.\n// When it is taken, drop `font` / `line-height` / `color` from these blocks and let the variants apply.\nconst inheritedTypography = css`\n font: inherit;\n line-height: inherit;\n color: inherit;\n white-space: inherit;\n overflow-wrap: inherit;\n margin: 0;\n padding: 0;\n`;\n\nconst StyledLabel = styled('span', {\n name: DSIndeterminateProgressIndicatorName,\n slot: INDETERMINATE_PROGRESS_INDICATOR_SLOTS.LABEL,\n})`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;\n && > * {\n ${inheritedTypography}\n }\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst StyledTooltipContainer = styled('div', {\n name: DSIndeterminateProgressIndicatorName,\n slot: INDETERMINATE_PROGRESS_INDICATOR_SLOTS.TOOLTIP_CONTAINER,\n})`\n text-align: center;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n overflow-wrap: break-word;\n word-break: break-word;\n min-height: 30px;\n display: grid;\n align-items: center;\n padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};\n position: relative;\n background-color: white;\n border-radius: 2px;\n font-size: 13px;\n color: ${({ theme }) => theme.colors.neutral[600]};\n pointer-events: none;\n`;\n\nconst StyledTooltipText = styled('span', {\n name: DSIndeterminateProgressIndicatorName,\n slot: INDETERMINATE_PROGRESS_INDICATOR_SLOTS.TOOLTIP_TEXT,\n})`\n && > * {\n ${inheritedTypography}\n }\n`;\n\ninterface TruncatedTooltipTextProps {\n value?: string;\n placement?: DSHookFloatingContextT.PopperPlacementsT;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nconst TruncatedTooltipText = ({\n value = '',\n placement = 'top',\n getOwnerProps,\n getOwnerPropsArguments,\n}: TruncatedTooltipTextProps) => {\n const [showTooltip, setShowTooltip] = useState(false);\n\n const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n placement,\n externallyControlledIsOpen: showTooltip,\n withoutAnimation: true,\n });\n\n const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n const el = e.currentTarget;\n setShowTooltip(el.offsetWidth < el.scrollWidth);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setShowTooltip(false);\n }, []);\n\n return (\n <>\n <StyledLabel\n innerRef={refs.setReference}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSTypography component=\"span\" variant=\"b2\">\n {value}\n </DSTypography>\n </StyledLabel>\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={showTooltip}\n floatingStyles={floatingStyles}\n context={context}\n >\n <StyledTooltipContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledTooltipText getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <DSTypography component=\"span\" variant=\"b2-light\">\n {value}\n </DSTypography>\n </StyledTooltipText>\n <PopoverArrow {...arrowStyles} />\n </StyledTooltipContainer>\n </FloatingWrapper>\n </>\n );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsHnB;AAtHJ,mBAA6C;AAC7C,uBAA4B;AAC5B,2BAA6B;AAC7B,iCAKO;AACP,uBAA6F;AAuB7F,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU5B,MAAM,kBAAc,yBAAO,QAAQ;AAAA,EACjC,MAAM;AAAA,EACN,MAAM,wDAAuC;AAC/C,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOK,mBAAmB;AAAA;AAAA;AAKzB,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,wDAAuC;AAC/C,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKvD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAInD,MAAM,wBAAoB,yBAAO,QAAQ;AAAA,EACvC,MAAM;AAAA,EACN,MAAM,wDAAuC;AAC/C,CAAC;AAAA;AAAA,MAEK,mBAAmB;AAAA;AAAA;AAWzB,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAiC;AAC/B,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,QAAI,+CAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,uBAAmB,0BAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAmB,0BAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,cAAc;AAAA,QACd,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QAEA,sDAAC,qCAAa,WAAU,QAAO,SAAQ,MACpC,iBACH;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,uDAAC,0BAAuB,eAA8B,wBACpD;AAAA,sDAAC,qBAAkB,eAA8B,wBAC/C,sDAAC,qCAAa,WAAU,QAAO,SAAQ,YACpC,iBACH,GACF;AAAA,UACA,4CAAC,2CAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
6
6
  "names": []
7
7
  }
@@ -51,11 +51,11 @@ const StyledTooltipContainer = styled("div", {
51
51
  color: ${({ theme }) => theme.colors.neutral[600]};
52
52
  pointer-events: none;
53
53
  `;
54
- const StyledTooltipText = styled(DSTypography, {
54
+ const StyledTooltipText = styled("span", {
55
55
  name: DSIndeterminateProgressIndicatorName,
56
56
  slot: INDETERMINATE_PROGRESS_INDICATOR_SLOTS.TOOLTIP_TEXT
57
57
  })`
58
- && {
58
+ && > * {
59
59
  ${inheritedTypography}
60
60
  }
61
61
  `;
@@ -98,16 +98,7 @@ const TruncatedTooltipText = ({
98
98
  floatingStyles,
99
99
  context,
100
100
  children: /* @__PURE__ */ jsxs(StyledTooltipContainer, { getOwnerProps, getOwnerPropsArguments, children: [
101
- /* @__PURE__ */ jsx(
102
- StyledTooltipText,
103
- {
104
- component: "span",
105
- variant: "b2-light",
106
- getOwnerProps,
107
- getOwnerPropsArguments,
108
- children: value
109
- }
110
- ),
101
+ /* @__PURE__ */ jsx(StyledTooltipText, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsx(DSTypography, { component: "span", variant: "b2-light", children: value }) }),
111
102
  /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
112
103
  ] })
113
104
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/TruncatedTooltipText.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useState } from 'react';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n useFloatingContext,\n FloatingWrapper,\n PopoverArrow,\n type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\nimport { DSIndeterminateProgressIndicatorName, INDETERMINATE_PROGRESS_INDICATOR_SLOTS } from './constants/index.js';\n\n// ============================================================================================================\n// Typography (PUI-18944)\n// ============================================================================================================\n// The label and the tooltip text render through DSTypography, following the ds-form-radio reference pattern\n// (b2 / b2-light). Two constraints shape how:\n//\n// - The label's DSTypography is nested inside the LABEL slot element rather than being the slot element.\n// Making DSTypography the slot would let the nested-slot mechanism rewrite `data-dimsum-slot` to\n// `dsTypographyRoot` and demote ours to `data-dimsum-parent-slot` (see ds-progress-indicator, PUI-18942).\n// `dsIndeterminateprogressindicatorLabel` shipped on this span until the ds-truncated-tooltip-text\n// deprecation (PUI-17903) silently dropped it, so it is restored here with its original value.\n// - No visual change. Today the label inherits the consumer's typography and the tooltip text inherits the\n// body's, inside a container that pins 13px / neutral-600. DSTypography's own metrics (b2 line-height,\n// font-family, `white-space: pre-wrap`) would change both, so the DSTypography elements inherit everything\n// from their parent. `&&` gives 0-2-0, which beats DSTypography's single class whatever the injection order.\n//\n// Deliberately neutral: adopting the b2 / b2-light metrics is a UX decision, not a side effect of this change.\n// When it is taken, drop `font` / `line-height` / `color` from these blocks and let the variants apply.\nconst inheritedTypography = css`\n font: inherit;\n line-height: inherit;\n color: inherit;\n white-space: inherit;\n overflow-wrap: inherit;\n margin: 0;\n padding: 0;\n`;\n\nconst StyledLabel = styled('span', {\n name: DSIndeterminateProgressIndicatorName,\n slot: INDETERMINATE_PROGRESS_INDICATOR_SLOTS.LABEL,\n})`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;\n && > * {\n ${inheritedTypography}\n }\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst StyledTooltipContainer = styled('div', {\n name: DSIndeterminateProgressIndicatorName,\n slot: INDETERMINATE_PROGRESS_INDICATOR_SLOTS.TOOLTIP_CONTAINER,\n})`\n text-align: center;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n overflow-wrap: break-word;\n word-break: break-word;\n min-height: 30px;\n display: grid;\n align-items: center;\n padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};\n position: relative;\n background-color: white;\n border-radius: 2px;\n font-size: 13px;\n color: ${({ theme }) => theme.colors.neutral[600]};\n pointer-events: none;\n`;\n\nconst StyledTooltipText = styled(DSTypography, {\n name: DSIndeterminateProgressIndicatorName,\n slot: INDETERMINATE_PROGRESS_INDICATOR_SLOTS.TOOLTIP_TEXT,\n})`\n && {\n ${inheritedTypography}\n }\n`;\n\ninterface TruncatedTooltipTextProps {\n value?: string;\n placement?: DSHookFloatingContextT.PopperPlacementsT;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nconst TruncatedTooltipText = ({\n value = '',\n placement = 'top',\n getOwnerProps,\n getOwnerPropsArguments,\n}: TruncatedTooltipTextProps) => {\n const [showTooltip, setShowTooltip] = useState(false);\n\n const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n placement,\n externallyControlledIsOpen: showTooltip,\n withoutAnimation: true,\n });\n\n const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n const el = e.currentTarget;\n setShowTooltip(el.offsetWidth < el.scrollWidth);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setShowTooltip(false);\n }, []);\n\n return (\n <>\n <StyledLabel\n innerRef={refs.setReference}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSTypography component=\"span\" variant=\"b2\">\n {value}\n </DSTypography>\n </StyledLabel>\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={showTooltip}\n floatingStyles={floatingStyles}\n context={context}\n >\n <StyledTooltipContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledTooltipText\n component=\"span\"\n variant=\"b2-light\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {value}\n </StyledTooltipText>\n <PopoverArrow {...arrowStyles} />\n </StyledTooltipContainer>\n </FloatingWrapper>\n </>\n );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACmHnB,mBAQI,KAUA,YAlBJ;AAnHJ,SAAgB,aAAa,gBAAgB;AAC7C,SAAS,KAAK,cAAc;AAC5B,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,sCAAsC,8CAA8C;AAoB7F,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU5B,MAAM,cAAc,OAAO,QAAQ;AAAA,EACjC,MAAM;AAAA,EACN,MAAM,uCAAuC;AAC/C,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOK,mBAAmB;AAAA;AAAA;AAKzB,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,uCAAuC;AAC/C,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKvD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAInD,MAAM,oBAAoB,OAAO,cAAc;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,uCAAuC;AAC/C,CAAC;AAAA;AAAA,MAEK,mBAAmB;AAAA;AAAA;AAWzB,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAiC;AAC/B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,IAAI,mBAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,mBAAmB,YAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,YAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,cAAc;AAAA,QACd,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QAEA,8BAAC,gBAAa,WAAU,QAAO,SAAQ,MACpC,iBACH;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,+BAAC,0BAAuB,eAA8B,wBACpD;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAQ;AAAA,cACR;AAAA,cACA;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,gBAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useState } from 'react';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport {\n useFloatingContext,\n FloatingWrapper,\n PopoverArrow,\n type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\nimport { DSIndeterminateProgressIndicatorName, INDETERMINATE_PROGRESS_INDICATOR_SLOTS } from './constants/index.js';\n\n// ============================================================================================================\n// Typography (PUI-18944)\n// ============================================================================================================\n// The label and the tooltip text render through DSTypography, following the ds-form-radio reference pattern\n// (b2 / b2-light). Three constraints shape how:\n//\n// - Each DSTypography is nested inside its slot element (LABEL, TOOLTIP_TEXT) rather than being the slot.\n// Making DSTypography the slot would let the nested-slot mechanism rewrite `data-dimsum-slot` to\n// `dsTypographyRoot` and demote ours to `data-dimsum-parent-slot` (see ds-progress-indicator, PUI-18942).\n// `dsIndeterminateprogressindicatorLabel` shipped on the label span until the ds-truncated-tooltip-text\n// deprecation (PUI-17903) silently dropped it, so it is restored here with its original value.\n// - No visual change. Today the label inherits the consumer's typography and the tooltip text inherits the\n// body's, inside a container that pins 13px / neutral-600. DSTypography's own metrics (b2 line-height,\n// font-family, `white-space: pre-wrap`) would change both, so the DSTypography elements inherit everything\n// from their slot. `&& > *` gives 0-2-0, which beats DSTypography's single class whatever the injection order.\n// - Slot customization must still reach the text. The theme's `styleOverrides` for a slot are emitted at the end\n// of the slot's own class (0-1-0), so the inherit rules target the child only: a 0-2-0 rule on the slot\n// element itself would silently beat a consumer's `styleOverrides` color or font for that slot.\n//\n// Deliberately neutral: adopting the b2 / b2-light metrics is a UX decision, not a side effect of this change.\n// When it is taken, drop `font` / `line-height` / `color` from these blocks and let the variants apply.\nconst inheritedTypography = css`\n font: inherit;\n line-height: inherit;\n color: inherit;\n white-space: inherit;\n overflow-wrap: inherit;\n margin: 0;\n padding: 0;\n`;\n\nconst StyledLabel = styled('span', {\n name: DSIndeterminateProgressIndicatorName,\n slot: INDETERMINATE_PROGRESS_INDICATOR_SLOTS.LABEL,\n})`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;\n && > * {\n ${inheritedTypography}\n }\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst StyledTooltipContainer = styled('div', {\n name: DSIndeterminateProgressIndicatorName,\n slot: INDETERMINATE_PROGRESS_INDICATOR_SLOTS.TOOLTIP_CONTAINER,\n})`\n text-align: center;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n overflow-wrap: break-word;\n word-break: break-word;\n min-height: 30px;\n display: grid;\n align-items: center;\n padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};\n position: relative;\n background-color: white;\n border-radius: 2px;\n font-size: 13px;\n color: ${({ theme }) => theme.colors.neutral[600]};\n pointer-events: none;\n`;\n\nconst StyledTooltipText = styled('span', {\n name: DSIndeterminateProgressIndicatorName,\n slot: INDETERMINATE_PROGRESS_INDICATOR_SLOTS.TOOLTIP_TEXT,\n})`\n && > * {\n ${inheritedTypography}\n }\n`;\n\ninterface TruncatedTooltipTextProps {\n value?: string;\n placement?: DSHookFloatingContextT.PopperPlacementsT;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}\n\nconst TruncatedTooltipText = ({\n value = '',\n placement = 'top',\n getOwnerProps,\n getOwnerPropsArguments,\n}: TruncatedTooltipTextProps) => {\n const [showTooltip, setShowTooltip] = useState(false);\n\n const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n placement,\n externallyControlledIsOpen: showTooltip,\n withoutAnimation: true,\n });\n\n const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n const el = e.currentTarget;\n setShowTooltip(el.offsetWidth < el.scrollWidth);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setShowTooltip(false);\n }, []);\n\n return (\n <>\n <StyledLabel\n innerRef={refs.setReference}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSTypography component=\"span\" variant=\"b2\">\n {value}\n </DSTypography>\n </StyledLabel>\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={showTooltip}\n floatingStyles={floatingStyles}\n context={context}\n >\n <StyledTooltipContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledTooltipText getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <DSTypography component=\"span\" variant=\"b2-light\">\n {value}\n </DSTypography>\n </StyledTooltipText>\n <PopoverArrow {...arrowStyles} />\n </StyledTooltipContainer>\n </FloatingWrapper>\n </>\n );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACsHnB,mBAQI,KAUA,YAlBJ;AAtHJ,SAAgB,aAAa,gBAAgB;AAC7C,SAAS,KAAK,cAAc;AAC5B,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,sCAAsC,8CAA8C;AAuB7F,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU5B,MAAM,cAAc,OAAO,QAAQ;AAAA,EACjC,MAAM;AAAA,EACN,MAAM,uCAAuC;AAC/C,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOK,mBAAmB;AAAA;AAAA;AAKzB,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,uCAAuC;AAC/C,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKvD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAInD,MAAM,oBAAoB,OAAO,QAAQ;AAAA,EACvC,MAAM;AAAA,EACN,MAAM,uCAAuC;AAC/C,CAAC;AAAA;AAAA,MAEK,mBAAmB;AAAA;AAAA;AAWzB,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAiC;AAC/B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,IAAI,mBAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,mBAAmB,YAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,YAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,cAAc;AAAA,QACd,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QAEA,8BAAC,gBAAa,WAAU,QAAO,SAAQ,MACpC,iBACH;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,+BAAC,0BAAuB,eAA8B,wBACpD;AAAA,8BAAC,qBAAkB,eAA8B,wBAC/C,8BAAC,gBAAa,WAAU,QAAO,SAAQ,YACpC,iBACH,GACF;AAAA,UACA,oBAAC,gBAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-indeterminate-progress-indicator",
3
- "version": "3.80.0-next.38",
3
+ "version": "3.80.0-next.39",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Indeterminate Progress Indicator",
6
6
  "files": [
@@ -36,14 +36,14 @@
36
36
  "indent": 4
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-floating-context": "3.80.0-next.38",
40
- "@elliemae/ds-props-helpers": "3.80.0-next.38",
41
- "@elliemae/ds-system": "3.80.0-next.38",
42
- "@elliemae/ds-typescript-helpers": "3.80.0-next.38",
43
- "@elliemae/ds-typography": "3.80.0-next.38"
39
+ "@elliemae/ds-floating-context": "3.80.0-next.39",
40
+ "@elliemae/ds-props-helpers": "3.80.0-next.39",
41
+ "@elliemae/ds-system": "3.80.0-next.39",
42
+ "@elliemae/ds-typescript-helpers": "3.80.0-next.39",
43
+ "@elliemae/ds-typography": "3.80.0-next.39"
44
44
  },
45
45
  "devDependencies": {
46
- "@elliemae/ds-monorepo-devops": "3.80.0-next.38",
46
+ "@elliemae/ds-monorepo-devops": "3.80.0-next.39",
47
47
  "jest": "^30.0.0",
48
48
  "styled-components": "~5.3.11"
49
49
  },