@elliemae/ds-progress-indicator 3.70.0-next.3 → 3.70.0-next.4

package/dist/cjs/DSProgressIndicator.js

@@ -37,7 +37,7 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
+var import_TruncatedTooltipText = require("./TruncatedTooltipText.js");
 var import_ProgressCounter = __toESM(require("./ProgressCounter.js"));
 var import_ProgressBar = __toESM(require("./ProgressBar.js"));
 var import_classedComponents = require("./classedComponents.js");
@@ -60,7 +60,7 @@ const DSProgressIndicator = ({
     [segments, min, max, now]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_classedComponents.Wrapper, { ref: innerRef, "aria-disabled": disabled, classProps: { disabled }, ...containerProps, style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.DSTruncatedTooltipText, { containerComponent: import_classedComponents.Title, value: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_classedComponents.Title, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedTooltipText.TruncatedTooltipText, { value: title }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ProgressCounter.default, { max, min, now, renderer: counterRenderer }),
     renderProgressBar
   ] });

package/dist/cjs/DSProgressIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSProgressIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/no-array-index-key */\nimport React, { useMemo, type WeakValidationMap } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { DSTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport Counter from './ProgressCounter.js';\nimport ProgressBar from './ProgressBar.js';\nimport { Title, Wrapper } from './classedComponents.js';\nimport type { DSProgressIndicatorT } from './react-desc-prop-types.js';\n\nconst DSProgressIndicator = ({\n  containerProps = {},\n  innerRef,\n  title = '',\n  counterRenderer,\n  now = 0,\n  min = 0,\n  max = 0,\n  disabled = false,\n  segments = [],\n  style = {},\n}: DSProgressIndicatorT.Props) => {\n  const renderProgressBar = useMemo(\n    () =>\n      segments.length ? (\n        <ProgressBar>\n          {segments.map(\n            (segmentProps, i) =>\n              !(segmentProps.now < segmentProps.min) && <ProgressBar.Segment key={i} {...segmentProps} />,\n          )}\n        </ProgressBar>\n      ) : (\n        <ProgressBar max={max} min={min} now={now} />\n      ),\n    [segments, min, max, now],\n  );\n\n  return (\n    <Wrapper ref={innerRef} aria-disabled={disabled} classProps={{ disabled }} {...containerProps} style={style}>\n      <DSTruncatedTooltipText containerComponent={Title} value={title} />\n      <Counter max={max} min={min} now={now} renderer={counterRenderer} />\n      {renderProgressBar}\n    </Wrapper>\n  );\n};\n\nconst variants = ['default', 'success', 'warning', 'info', 'error'];\n\nconst progressIndicatorProps = {\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n  innerRef: PropTypes.object.description('ref to the components container'),\n  title: PropTypes.string.description('components title'),\n  variant: PropTypes.oneOf(variants).description('Progress intent variation'),\n  now: PropTypes.number.description('Total current value'),\n  min: PropTypes.number.description('min value'),\n  max: PropTypes.number.description('max value'),\n  disabled: PropTypes.bool.description('Whether the progress indicator disabled or not').defaultValue(false),\n  counterRenderer: PropTypes.func.description('Render a custom counter'),\n  segments: PropTypes.array.description('An array of multiple progress objects'),\n  style: PropTypes.object.description('css inline style'),\n} as WeakValidationMap<unknown>;\n\nDSProgressIndicator.displayName = 'DSProgressIndicator';\nconst ProgressIndicatorWithSchema = describe(DSProgressIndicator);\nProgressIndicatorWithSchema.propTypes = progressIndicatorProps;\n\nDSProgressIndicator.ProgressBar = ProgressBar;\n\nexport { DSProgressIndicator, ProgressIndicatorWithSchema };\nexport default DSProgressIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BiC;AA1BxD,mBAAuD;AACvD,8BAAoC;AACpC,uCAAuC;AACvC,6BAAoB;AACpB,yBAAwB;AACxB,+BAA+B;AAG/B,MAAM,sBAAsB,CAAC;AAAA,EAC3B,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW;AAAA,EACX,WAAW,CAAC;AAAA,EACZ,QAAQ,CAAC;AACX,MAAkC;AAChC,QAAM,wBAAoB;AAAA,IACxB,MACE,SAAS,SACP,4CAAC,mBAAAA,SAAA,EACE,mBAAS;AAAA,MACR,CAAC,cAAc,MACb,EAAE,aAAa,MAAM,aAAa,QAAQ,4CAAC,mBAAAA,QAAY,SAAZ,EAA6B,GAAG,gBAAP,CAAqB;AAAA,IAC7F,GACF,IAEA,4CAAC,mBAAAA,SAAA,EAAY,KAAU,KAAU,KAAU;AAAA,IAE/C,CAAC,UAAU,KAAK,KAAK,GAAG;AAAA,EAC1B;AAEA,SACE,6CAAC,oCAAQ,KAAK,UAAU,iBAAe,UAAU,YAAY,EAAE,SAAS,GAAI,GAAG,gBAAgB,OAC7F;AAAA,gDAAC,2DAAuB,oBAAoB,gCAAO,OAAO,OAAO;AAAA,IACjE,4CAAC,uBAAAC,SAAA,EAAQ,KAAU,KAAU,KAAU,UAAU,iBAAiB;AAAA,IACjE;AAAA,KACH;AAEJ;AAEA,MAAM,WAAW,CAAC,WAAW,WAAW,WAAW,QAAQ,OAAO;AAElE,MAAM,yBAAyB;AAAA,EAC7B,gBAAgB,kCAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,UAAU,kCAAU,OAAO,YAAY,iCAAiC;AAAA,EACxE,OAAO,kCAAU,OAAO,YAAY,kBAAkB;AAAA,EACtD,SAAS,kCAAU,MAAM,QAAQ,EAAE,YAAY,2BAA2B;AAAA,EAC1E,KAAK,kCAAU,OAAO,YAAY,qBAAqB;AAAA,EACvD,KAAK,kCAAU,OAAO,YAAY,WAAW;AAAA,EAC7C,KAAK,kCAAU,OAAO,YAAY,WAAW;AAAA,EAC7C,UAAU,kCAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EACzG,iBAAiB,kCAAU,KAAK,YAAY,yBAAyB;AAAA,EACrE,UAAU,kCAAU,MAAM,YAAY,uCAAuC;AAAA,EAC7E,OAAO,kCAAU,OAAO,YAAY,kBAAkB;AACxD;AAEA,oBAAoB,cAAc;AAClC,MAAM,kCAA8B,kCAAS,mBAAmB;AAChE,4BAA4B,YAAY;AAExC,oBAAoB,cAAc,mBAAAD;AAGlC,IAAO,8BAAQ;",
+  "sourcesContent": ["/* eslint-disable react/no-array-index-key */\nimport React, { useMemo, type WeakValidationMap } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { TruncatedTooltipText } from './TruncatedTooltipText.js';\nimport Counter from './ProgressCounter.js';\nimport ProgressBar from './ProgressBar.js';\nimport { Title, Wrapper } from './classedComponents.js';\nimport type { DSProgressIndicatorT } from './react-desc-prop-types.js';\n\nconst DSProgressIndicator = ({\n  containerProps = {},\n  innerRef,\n  title = '',\n  counterRenderer,\n  now = 0,\n  min = 0,\n  max = 0,\n  disabled = false,\n  segments = [],\n  style = {},\n}: DSProgressIndicatorT.Props) => {\n  const renderProgressBar = useMemo(\n    () =>\n      segments.length ? (\n        <ProgressBar>\n          {segments.map(\n            (segmentProps, i) =>\n              !(segmentProps.now < segmentProps.min) && <ProgressBar.Segment key={i} {...segmentProps} />,\n          )}\n        </ProgressBar>\n      ) : (\n        <ProgressBar max={max} min={min} now={now} />\n      ),\n    [segments, min, max, now],\n  );\n\n  return (\n    <Wrapper ref={innerRef} aria-disabled={disabled} classProps={{ disabled }} {...containerProps} style={style}>\n      <Title>\n        <TruncatedTooltipText value={title} />\n      </Title>\n      <Counter max={max} min={min} now={now} renderer={counterRenderer} />\n      {renderProgressBar}\n    </Wrapper>\n  );\n};\n\nconst variants = ['default', 'success', 'warning', 'info', 'error'];\n\nconst progressIndicatorProps = {\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n  innerRef: PropTypes.object.description('ref to the components container'),\n  title: PropTypes.string.description('components title'),\n  variant: PropTypes.oneOf(variants).description('Progress intent variation'),\n  now: PropTypes.number.description('Total current value'),\n  min: PropTypes.number.description('min value'),\n  max: PropTypes.number.description('max value'),\n  disabled: PropTypes.bool.description('Whether the progress indicator disabled or not').defaultValue(false),\n  counterRenderer: PropTypes.func.description('Render a custom counter'),\n  segments: PropTypes.array.description('An array of multiple progress objects'),\n  style: PropTypes.object.description('css inline style'),\n} as WeakValidationMap<unknown>;\n\nDSProgressIndicator.displayName = 'DSProgressIndicator';\nconst ProgressIndicatorWithSchema = describe(DSProgressIndicator);\nProgressIndicatorWithSchema.propTypes = progressIndicatorProps;\n\nDSProgressIndicator.ProgressBar = ProgressBar;\n\nexport { DSProgressIndicator, ProgressIndicatorWithSchema };\nexport default DSProgressIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BiC;AA1BxD,mBAAuD;AACvD,8BAAoC;AACpC,kCAAqC;AACrC,6BAAoB;AACpB,yBAAwB;AACxB,+BAA+B;AAG/B,MAAM,sBAAsB,CAAC;AAAA,EAC3B,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW;AAAA,EACX,WAAW,CAAC;AAAA,EACZ,QAAQ,CAAC;AACX,MAAkC;AAChC,QAAM,wBAAoB;AAAA,IACxB,MACE,SAAS,SACP,4CAAC,mBAAAA,SAAA,EACE,mBAAS;AAAA,MACR,CAAC,cAAc,MACb,EAAE,aAAa,MAAM,aAAa,QAAQ,4CAAC,mBAAAA,QAAY,SAAZ,EAA6B,GAAG,gBAAP,CAAqB;AAAA,IAC7F,GACF,IAEA,4CAAC,mBAAAA,SAAA,EAAY,KAAU,KAAU,KAAU;AAAA,IAE/C,CAAC,UAAU,KAAK,KAAK,GAAG;AAAA,EAC1B;AAEA,SACE,6CAAC,oCAAQ,KAAK,UAAU,iBAAe,UAAU,YAAY,EAAE,SAAS,GAAI,GAAG,gBAAgB,OAC7F;AAAA,gDAAC,kCACC,sDAAC,oDAAqB,OAAO,OAAO,GACtC;AAAA,IACA,4CAAC,uBAAAC,SAAA,EAAQ,KAAU,KAAU,KAAU,UAAU,iBAAiB;AAAA,IACjE;AAAA,KACH;AAEJ;AAEA,MAAM,WAAW,CAAC,WAAW,WAAW,WAAW,QAAQ,OAAO;AAElE,MAAM,yBAAyB;AAAA,EAC7B,gBAAgB,kCAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,UAAU,kCAAU,OAAO,YAAY,iCAAiC;AAAA,EACxE,OAAO,kCAAU,OAAO,YAAY,kBAAkB;AAAA,EACtD,SAAS,kCAAU,MAAM,QAAQ,EAAE,YAAY,2BAA2B;AAAA,EAC1E,KAAK,kCAAU,OAAO,YAAY,qBAAqB;AAAA,EACvD,KAAK,kCAAU,OAAO,YAAY,WAAW;AAAA,EAC7C,KAAK,kCAAU,OAAO,YAAY,WAAW;AAAA,EAC7C,UAAU,kCAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EACzG,iBAAiB,kCAAU,KAAK,YAAY,yBAAyB;AAAA,EACrE,UAAU,kCAAU,MAAM,YAAY,uCAAuC;AAAA,EAC7E,OAAO,kCAAU,OAAO,YAAY,kBAAkB;AACxD;AAEA,oBAAoB,cAAc;AAClC,MAAM,kCAA8B,kCAAS,mBAAmB;AAChE,4BAA4B,YAAY;AAExC,oBAAoB,cAAc,mBAAAD;AAGlC,IAAO,8BAAQ;",
   "names": ["ProgressBar", "Counter"]
 }

package/dist/cjs/TruncatedTooltipText.js

@@ -0,0 +1,94 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TruncatedTooltipText_exports = {};
+__export(TruncatedTooltipText_exports, {
+  TruncatedTooltipText: () => TruncatedTooltipText,
+  default: () => TruncatedTooltipText_default
+});
+module.exports = __toCommonJS(TruncatedTooltipText_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
+const TruncatedSpan = import_ds_system.styled.span`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+  max-width: 100%;
+`;
+const TooltipContainer = import_ds_system.styled.div`
+  text-align: left;
+  min-width: ${({ theme }) => theme.space.l};
+  max-width: 250px;
+  min-height: 30px;
+  display: grid;
+  align-items: center;
+  padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};
+  position: relative;
+  background-color: white;
+  border-radius: 2px;
+  font-size: 13px;
+  color: ${({ theme }) => theme.colors.neutral[600]};
+  pointer-events: none;
+`;
+const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
+  const [showTooltip, setShowTooltip] = (0, import_react.useState)(false);
+  const { refs, floatingStyles, arrowStyles, context } = (0, import_ds_floating_context.useFloatingContext)({
+    placement,
+    externallyControlledIsOpen: showTooltip,
+    withoutAnimation: true
+  });
+  const handleMouseEnter = (0, import_react.useCallback)((e) => {
+    const el = e.currentTarget;
+    setShowTooltip(el.offsetWidth < el.scrollWidth);
+  }, []);
+  const handleMouseLeave = (0, import_react.useCallback)(() => {
+    setShowTooltip(false);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TruncatedSpan, { innerRef: refs.setReference, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: value }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ds_floating_context.FloatingWrapper,
+      {
+        innerRef: refs.setFloating,
+        isOpen: showTooltip,
+        floatingStyles,
+        context,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TooltipContainer, { children: [
+          value,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
+        ] })
+      }
+    )
+  ] });
+};
+var TruncatedTooltipText_default = TruncatedTooltipText;
+//# sourceMappingURL=TruncatedTooltipText.js.map

package/dist/cjs/TruncatedTooltipText.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TruncatedTooltipText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport {\n  useFloatingContext,\n  FloatingWrapper,\n  PopoverArrow,\n  type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\n\nconst TruncatedSpan = styled.span`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  max-width: 100%;\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst TooltipContainer = styled.div`\n  text-align: left;\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  pointer-events: none;\n`;\n\ninterface TruncatedTooltipTextProps {\n  value?: string;\n  placement?: DSHookFloatingContextT.PopperPlacementsT;\n}\n\nconst TruncatedTooltipText = ({ value = '', placement = 'top' }: TruncatedTooltipTextProps) => {\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n    placement,\n    externallyControlledIsOpen: showTooltip,\n    withoutAnimation: true,\n  });\n\n  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n    const el = e.currentTarget;\n    setShowTooltip(el.offsetWidth < el.scrollWidth);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setShowTooltip(false);\n  }, []);\n\n  return (\n    <>\n      <TruncatedSpan innerRef={refs.setReference} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n        {value}\n      </TruncatedSpan>\n      <FloatingWrapper\n        innerRef={refs.setFloating}\n        isOpen={showTooltip}\n        floatingStyles={floatingStyles}\n        context={context}\n      >\n        <TooltipContainer>\n          {value}\n          <PopoverArrow {...arrowStyles} />\n        </TooltipContainer>\n      </FloatingWrapper>\n    </>\n  );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0DnB;AA1DJ,mBAA6C;AAC7C,uBAAuB;AACvB,iCAKO;AAEP,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,mBAAmB,wBAAO;AAAA;AAAA,eAEjB,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;AAAA;AASnD,MAAM,uBAAuB,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAM,MAAiC;AAC7F,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,gDAAC,iBAAc,UAAU,KAAK,cAAc,cAAc,kBAAkB,cAAc,kBACvF,iBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,uDAAC,oBACE;AAAA;AAAA,UACD,4CAAC,2CAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
+  "names": []
+}

package/dist/esm/DSProgressIndicator.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { describe, PropTypes } from "@elliemae/ds-props-helpers";
-import { DSTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
+import { TruncatedTooltipText } from "./TruncatedTooltipText.js";
 import Counter from "./ProgressCounter.js";
 import ProgressBar from "./ProgressBar.js";
 import { Title, Wrapper } from "./classedComponents.js";
@@ -25,7 +25,7 @@ const DSProgressIndicator = ({
     [segments, min, max, now]
   );
   return /* @__PURE__ */ jsxs(Wrapper, { ref: innerRef, "aria-disabled": disabled, classProps: { disabled }, ...containerProps, style, children: [
-    /* @__PURE__ */ jsx(DSTruncatedTooltipText, { containerComponent: Title, value: title }),
+    /* @__PURE__ */ jsx(Title, { children: /* @__PURE__ */ jsx(TruncatedTooltipText, { value: title }) }),
     /* @__PURE__ */ jsx(Counter, { max, min, now, renderer: counterRenderer }),
     renderProgressBar
   ] });

package/dist/esm/DSProgressIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSProgressIndicator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-array-index-key */\nimport React, { useMemo, type WeakValidationMap } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { DSTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport Counter from './ProgressCounter.js';\nimport ProgressBar from './ProgressBar.js';\nimport { Title, Wrapper } from './classedComponents.js';\nimport type { DSProgressIndicatorT } from './react-desc-prop-types.js';\n\nconst DSProgressIndicator = ({\n  containerProps = {},\n  innerRef,\n  title = '',\n  counterRenderer,\n  now = 0,\n  min = 0,\n  max = 0,\n  disabled = false,\n  segments = [],\n  style = {},\n}: DSProgressIndicatorT.Props) => {\n  const renderProgressBar = useMemo(\n    () =>\n      segments.length ? (\n        <ProgressBar>\n          {segments.map(\n            (segmentProps, i) =>\n              !(segmentProps.now < segmentProps.min) && <ProgressBar.Segment key={i} {...segmentProps} />,\n          )}\n        </ProgressBar>\n      ) : (\n        <ProgressBar max={max} min={min} now={now} />\n      ),\n    [segments, min, max, now],\n  );\n\n  return (\n    <Wrapper ref={innerRef} aria-disabled={disabled} classProps={{ disabled }} {...containerProps} style={style}>\n      <DSTruncatedTooltipText containerComponent={Title} value={title} />\n      <Counter max={max} min={min} now={now} renderer={counterRenderer} />\n      {renderProgressBar}\n    </Wrapper>\n  );\n};\n\nconst variants = ['default', 'success', 'warning', 'info', 'error'];\n\nconst progressIndicatorProps = {\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n  innerRef: PropTypes.object.description('ref to the components container'),\n  title: PropTypes.string.description('components title'),\n  variant: PropTypes.oneOf(variants).description('Progress intent variation'),\n  now: PropTypes.number.description('Total current value'),\n  min: PropTypes.number.description('min value'),\n  max: PropTypes.number.description('max value'),\n  disabled: PropTypes.bool.description('Whether the progress indicator disabled or not').defaultValue(false),\n  counterRenderer: PropTypes.func.description('Render a custom counter'),\n  segments: PropTypes.array.description('An array of multiple progress objects'),\n  style: PropTypes.object.description('css inline style'),\n} as WeakValidationMap<unknown>;\n\nDSProgressIndicator.displayName = 'DSProgressIndicator';\nconst ProgressIndicatorWithSchema = describe(DSProgressIndicator);\nProgressIndicatorWithSchema.propTypes = progressIndicatorProps;\n\nDSProgressIndicator.ProgressBar = ProgressBar;\n\nexport { DSProgressIndicator, ProgressIndicatorWithSchema };\nexport default DSProgressIndicator;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2BiC,cAUpD,YAVoD;AA1BxD,SAAgB,eAAuC;AACvD,SAAS,UAAU,iBAAiB;AACpC,SAAS,8BAA8B;AACvC,OAAO,aAAa;AACpB,OAAO,iBAAiB;AACxB,SAAS,OAAO,eAAe;AAG/B,MAAM,sBAAsB,CAAC;AAAA,EAC3B,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW;AAAA,EACX,WAAW,CAAC;AAAA,EACZ,QAAQ,CAAC;AACX,MAAkC;AAChC,QAAM,oBAAoB;AAAA,IACxB,MACE,SAAS,SACP,oBAAC,eACE,mBAAS;AAAA,MACR,CAAC,cAAc,MACb,EAAE,aAAa,MAAM,aAAa,QAAQ,oBAAC,YAAY,SAAZ,EAA6B,GAAG,gBAAP,CAAqB;AAAA,IAC7F,GACF,IAEA,oBAAC,eAAY,KAAU,KAAU,KAAU;AAAA,IAE/C,CAAC,UAAU,KAAK,KAAK,GAAG;AAAA,EAC1B;AAEA,SACE,qBAAC,WAAQ,KAAK,UAAU,iBAAe,UAAU,YAAY,EAAE,SAAS,GAAI,GAAG,gBAAgB,OAC7F;AAAA,wBAAC,0BAAuB,oBAAoB,OAAO,OAAO,OAAO;AAAA,IACjE,oBAAC,WAAQ,KAAU,KAAU,KAAU,UAAU,iBAAiB;AAAA,IACjE;AAAA,KACH;AAEJ;AAEA,MAAM,WAAW,CAAC,WAAW,WAAW,WAAW,QAAQ,OAAO;AAElE,MAAM,yBAAyB;AAAA,EAC7B,gBAAgB,UAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,UAAU,UAAU,OAAO,YAAY,iCAAiC;AAAA,EACxE,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA,EACtD,SAAS,UAAU,MAAM,QAAQ,EAAE,YAAY,2BAA2B;AAAA,EAC1E,KAAK,UAAU,OAAO,YAAY,qBAAqB;AAAA,EACvD,KAAK,UAAU,OAAO,YAAY,WAAW;AAAA,EAC7C,KAAK,UAAU,OAAO,YAAY,WAAW;AAAA,EAC7C,UAAU,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EACzG,iBAAiB,UAAU,KAAK,YAAY,yBAAyB;AAAA,EACrE,UAAU,UAAU,MAAM,YAAY,uCAAuC;AAAA,EAC7E,OAAO,UAAU,OAAO,YAAY,kBAAkB;AACxD;AAEA,oBAAoB,cAAc;AAClC,MAAM,8BAA8B,SAAS,mBAAmB;AAChE,4BAA4B,YAAY;AAExC,oBAAoB,cAAc;AAGlC,IAAO,8BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-array-index-key */\nimport React, { useMemo, type WeakValidationMap } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { TruncatedTooltipText } from './TruncatedTooltipText.js';\nimport Counter from './ProgressCounter.js';\nimport ProgressBar from './ProgressBar.js';\nimport { Title, Wrapper } from './classedComponents.js';\nimport type { DSProgressIndicatorT } from './react-desc-prop-types.js';\n\nconst DSProgressIndicator = ({\n  containerProps = {},\n  innerRef,\n  title = '',\n  counterRenderer,\n  now = 0,\n  min = 0,\n  max = 0,\n  disabled = false,\n  segments = [],\n  style = {},\n}: DSProgressIndicatorT.Props) => {\n  const renderProgressBar = useMemo(\n    () =>\n      segments.length ? (\n        <ProgressBar>\n          {segments.map(\n            (segmentProps, i) =>\n              !(segmentProps.now < segmentProps.min) && <ProgressBar.Segment key={i} {...segmentProps} />,\n          )}\n        </ProgressBar>\n      ) : (\n        <ProgressBar max={max} min={min} now={now} />\n      ),\n    [segments, min, max, now],\n  );\n\n  return (\n    <Wrapper ref={innerRef} aria-disabled={disabled} classProps={{ disabled }} {...containerProps} style={style}>\n      <Title>\n        <TruncatedTooltipText value={title} />\n      </Title>\n      <Counter max={max} min={min} now={now} renderer={counterRenderer} />\n      {renderProgressBar}\n    </Wrapper>\n  );\n};\n\nconst variants = ['default', 'success', 'warning', 'info', 'error'];\n\nconst progressIndicatorProps = {\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n  innerRef: PropTypes.object.description('ref to the components container'),\n  title: PropTypes.string.description('components title'),\n  variant: PropTypes.oneOf(variants).description('Progress intent variation'),\n  now: PropTypes.number.description('Total current value'),\n  min: PropTypes.number.description('min value'),\n  max: PropTypes.number.description('max value'),\n  disabled: PropTypes.bool.description('Whether the progress indicator disabled or not').defaultValue(false),\n  counterRenderer: PropTypes.func.description('Render a custom counter'),\n  segments: PropTypes.array.description('An array of multiple progress objects'),\n  style: PropTypes.object.description('css inline style'),\n} as WeakValidationMap<unknown>;\n\nDSProgressIndicator.displayName = 'DSProgressIndicator';\nconst ProgressIndicatorWithSchema = describe(DSProgressIndicator);\nProgressIndicatorWithSchema.propTypes = progressIndicatorProps;\n\nDSProgressIndicator.ProgressBar = ProgressBar;\n\nexport { DSProgressIndicator, ProgressIndicatorWithSchema };\nexport default DSProgressIndicator;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2BiC,cAUpD,YAVoD;AA1BxD,SAAgB,eAAuC;AACvD,SAAS,UAAU,iBAAiB;AACpC,SAAS,4BAA4B;AACrC,OAAO,aAAa;AACpB,OAAO,iBAAiB;AACxB,SAAS,OAAO,eAAe;AAG/B,MAAM,sBAAsB,CAAC;AAAA,EAC3B,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW;AAAA,EACX,WAAW,CAAC;AAAA,EACZ,QAAQ,CAAC;AACX,MAAkC;AAChC,QAAM,oBAAoB;AAAA,IACxB,MACE,SAAS,SACP,oBAAC,eACE,mBAAS;AAAA,MACR,CAAC,cAAc,MACb,EAAE,aAAa,MAAM,aAAa,QAAQ,oBAAC,YAAY,SAAZ,EAA6B,GAAG,gBAAP,CAAqB;AAAA,IAC7F,GACF,IAEA,oBAAC,eAAY,KAAU,KAAU,KAAU;AAAA,IAE/C,CAAC,UAAU,KAAK,KAAK,GAAG;AAAA,EAC1B;AAEA,SACE,qBAAC,WAAQ,KAAK,UAAU,iBAAe,UAAU,YAAY,EAAE,SAAS,GAAI,GAAG,gBAAgB,OAC7F;AAAA,wBAAC,SACC,8BAAC,wBAAqB,OAAO,OAAO,GACtC;AAAA,IACA,oBAAC,WAAQ,KAAU,KAAU,KAAU,UAAU,iBAAiB;AAAA,IACjE;AAAA,KACH;AAEJ;AAEA,MAAM,WAAW,CAAC,WAAW,WAAW,WAAW,QAAQ,OAAO;AAElE,MAAM,yBAAyB;AAAA,EAC7B,gBAAgB,UAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,UAAU,UAAU,OAAO,YAAY,iCAAiC;AAAA,EACxE,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA,EACtD,SAAS,UAAU,MAAM,QAAQ,EAAE,YAAY,2BAA2B;AAAA,EAC1E,KAAK,UAAU,OAAO,YAAY,qBAAqB;AAAA,EACvD,KAAK,UAAU,OAAO,YAAY,WAAW;AAAA,EAC7C,KAAK,UAAU,OAAO,YAAY,WAAW;AAAA,EAC7C,UAAU,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EACzG,iBAAiB,UAAU,KAAK,YAAY,yBAAyB;AAAA,EACrE,UAAU,UAAU,MAAM,YAAY,uCAAuC;AAAA,EAC7E,OAAO,UAAU,OAAO,YAAY,kBAAkB;AACxD;AAEA,oBAAoB,cAAc;AAClC,MAAM,8BAA8B,SAAS,mBAAmB;AAChE,4BAA4B,YAAY;AAExC,oBAAoB,cAAc;AAGlC,IAAO,8BAAQ;",
   "names": []
 }

package/dist/esm/TruncatedTooltipText.js

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { styled } from "@elliemae/ds-system";
+import {
+  useFloatingContext,
+  FloatingWrapper,
+  PopoverArrow
+} from "@elliemae/ds-floating-context";
+const TruncatedSpan = styled.span`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+  max-width: 100%;
+`;
+const TooltipContainer = styled.div`
+  text-align: left;
+  min-width: ${({ theme }) => theme.space.l};
+  max-width: 250px;
+  min-height: 30px;
+  display: grid;
+  align-items: center;
+  padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};
+  position: relative;
+  background-color: white;
+  border-radius: 2px;
+  font-size: 13px;
+  color: ${({ theme }) => theme.colors.neutral[600]};
+  pointer-events: none;
+`;
+const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({
+    placement,
+    externallyControlledIsOpen: showTooltip,
+    withoutAnimation: true
+  });
+  const handleMouseEnter = useCallback((e) => {
+    const el = e.currentTarget;
+    setShowTooltip(el.offsetWidth < el.scrollWidth);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    setShowTooltip(false);
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TruncatedSpan, { innerRef: refs.setReference, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: value }),
+    /* @__PURE__ */ jsx(
+      FloatingWrapper,
+      {
+        innerRef: refs.setFloating,
+        isOpen: showTooltip,
+        floatingStyles,
+        context,
+        children: /* @__PURE__ */ jsxs(TooltipContainer, { children: [
+          value,
+          /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
+        ] })
+      }
+    )
+  ] });
+};
+var TruncatedTooltipText_default = TruncatedTooltipText;
+export {
+  TruncatedTooltipText,
+  TruncatedTooltipText_default as default
+};
+//# sourceMappingURL=TruncatedTooltipText.js.map

package/dist/esm/TruncatedTooltipText.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/TruncatedTooltipText.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport {\n  useFloatingContext,\n  FloatingWrapper,\n  PopoverArrow,\n  type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\n\nconst TruncatedSpan = styled.span`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  max-width: 100%;\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst TooltipContainer = styled.div`\n  text-align: left;\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  pointer-events: none;\n`;\n\ninterface TruncatedTooltipTextProps {\n  value?: string;\n  placement?: DSHookFloatingContextT.PopperPlacementsT;\n}\n\nconst TruncatedTooltipText = ({ value = '', placement = 'top' }: TruncatedTooltipTextProps) => {\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n    placement,\n    externallyControlledIsOpen: showTooltip,\n    withoutAnimation: true,\n  });\n\n  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n    const el = e.currentTarget;\n    setShowTooltip(el.offsetWidth < el.scrollWidth);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setShowTooltip(false);\n  }, []);\n\n  return (\n    <>\n      <TruncatedSpan innerRef={refs.setReference} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n        {value}\n      </TruncatedSpan>\n      <FloatingWrapper\n        innerRef={refs.setFloating}\n        isOpen={showTooltip}\n        floatingStyles={floatingStyles}\n        context={context}\n      >\n        <TooltipContainer>\n          {value}\n          <PopoverArrow {...arrowStyles} />\n        </TooltipContainer>\n      </FloatingWrapper>\n    </>\n  );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0DnB,mBACE,KASE,YAVJ;AA1DJ,SAAgB,aAAa,gBAAgB;AAC7C,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,mBAAmB,OAAO;AAAA;AAAA,eAEjB,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;AAAA;AASnD,MAAM,uBAAuB,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAM,MAAiC;AAC7F,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,wBAAC,iBAAc,UAAU,KAAK,cAAc,cAAc,kBAAkB,cAAc,kBACvF,iBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,+BAAC,oBACE;AAAA;AAAA,UACD,oBAAC,gBAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
+  "names": []
+}

package/dist/types/TruncatedTooltipText.d.ts

@@ -0,0 +1,8 @@
+import { type DSHookFloatingContextT } from '@elliemae/ds-floating-context';
+interface TruncatedTooltipTextProps {
+    value?: string;
+    placement?: DSHookFloatingContextT.PopperPlacementsT;
+}
+declare const TruncatedTooltipText: ({ value, placement }: TruncatedTooltipTextProps) => import("react/jsx-runtime").JSX.Element;
+export { TruncatedTooltipText };
+export default TruncatedTooltipText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-progress-indicator",
-  "version": "3.70.0-next.3",
+  "version": "3.70.0-next.4",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Progress Indicator",
   "files": [
@@ -36,14 +36,15 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-classnames": "3.70.0-next.3",
-    "@elliemae/ds-props-helpers": "3.70.0-next.3",
-    "@elliemae/ds-truncated-tooltip-text": "3.70.0-next.3"
+    "@elliemae/ds-classnames": "3.70.0-next.4",
+    "@elliemae/ds-floating-context": "3.70.0-next.4",
+    "@elliemae/ds-props-helpers": "3.70.0-next.4",
+    "@elliemae/ds-system": "3.70.0-next.4"
   },
   "devDependencies": {
     "jest": "^30.0.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.70.0-next.3"
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.4"
   },
   "peerDependencies": {
     "react": "^18.3.1",