@elliemae/ds-progress-indicator 3.80.0-next.4 → 3.80.0-next.40

package/dist/esm/utils.js

@@ -1,8 +1,20 @@
 import * as React from "react";
+function hasValidRange(min, max) {
+  return typeof min === "number" && typeof max === "number" && Number.isFinite(min) && Number.isFinite(max) && max > min;
+}
+function clamp(value, lower, upper) {
+  if (!Number.isFinite(value)) return lower;
+  return Math.min(upper, Math.max(lower, value));
+}
 function getPercentage(now, min, max) {
-  return (now || min) / max * 100;
+  if (!hasValidRange(min, max)) return 0;
+  return clamp((now || min) / max * 100, 0, 100);
 }
+const defaultCounterRenderer = ({ now, max, min }) => `${min || now} of ${max}`;
 export {
-  getPercentage
+  clamp,
+  defaultCounterRenderer,
+  getPercentage,
+  hasValidRange
 };
 //# sourceMappingURL=utils.js.map

package/dist/esm/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/utils.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export function getPercentage(now: number, min: number, max: number): number {\n  return ((now || min) / max) * 100;\n}\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,SAAS,cAAc,KAAa,KAAa,KAAqB;AAC3E,UAAS,OAAO,OAAO,MAAO;AAChC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSProgressIndicatorT } from './react-desc-prop-types.js';\n\n/**\n * A determinate progress is only meaningful over a real range: `max` must be finite and greater than `min`.\n * The default `max` is `0`, so a consumer who omits it lands here \u2014 as does a legitimately dynamic `max` that\n * starts at zero while data loads. Both used to produce `width: NaN%` and an invalid ARIA range\n * (aria-valuemax equal to aria-valuemin). Callers treat an invalid range as an indeterminate progress. PUI-18672.\n */\nexport function hasValidRange(min: unknown, max: unknown): boolean {\n  // `unknown` on purpose: `max` is optional in the public contract, and a JS consumer can pass anything.\n  return (\n    typeof min === 'number' && typeof max === 'number' && Number.isFinite(min) && Number.isFinite(max) && max > min\n  );\n}\n\nexport function clamp(value: number, lower: number, upper: number): number {\n  if (!Number.isFinite(value)) return lower;\n  return Math.min(upper, Math.max(lower, value));\n}\n\n// The `(now || min) / max` formula is legacy and deliberately untouched: it renders exactly what a valid range\n// always rendered, `min` offsets included. Only two things are new \u2014 an invalid range yields 0 instead of NaN,\n// and the result is clamped so `now > max` can no longer push the fill past 100% of its track.\nexport function getPercentage(now: number, min: number, max: number): number {\n  if (!hasValidRange(min, max)) return 0;\n  return clamp(((now || min) / max) * 100, 0, 100);\n}\n\n// Single source of truth for the counter text. The visible counter renders it, and every progressbar mirrors\n// it through aria-valuetext, so the two can never drift apart. Note `min || now` reads min where it should\n// read now \u2014 a pre-existing defect tracked in KNOWN_INTENTIONAL_DEVIATIONS.md (deviation 4). It is kept here\n// deliberately: aria-valuetext must match what sighted users see, so when the renderer is fixed both update.\nexport const defaultCounterRenderer: DSProgressIndicatorT.DefaultRendererT = ({ now, max, min }) =>\n  `${min || now} of ${max}`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACQhB,SAAS,cAAc,KAAc,KAAuB;AAEjE,SACE,OAAO,QAAQ,YAAY,OAAO,QAAQ,YAAY,OAAO,SAAS,GAAG,KAAK,OAAO,SAAS,GAAG,KAAK,MAAM;AAEhH;AAEO,SAAS,MAAM,OAAe,OAAe,OAAuB;AACzE,MAAI,CAAC,OAAO,SAAS,KAAK,EAAG,QAAO;AACpC,SAAO,KAAK,IAAI,OAAO,KAAK,IAAI,OAAO,KAAK,CAAC;AAC/C;AAKO,SAAS,cAAc,KAAa,KAAa,KAAqB;AAC3E,MAAI,CAAC,cAAc,KAAK,GAAG,EAAG,QAAO;AACrC,SAAO,OAAQ,OAAO,OAAO,MAAO,KAAK,GAAG,GAAG;AACjD;AAMO,MAAM,yBAAgE,CAAC,EAAE,KAAK,KAAK,IAAI,MAC5F,GAAG,OAAO,GAAG,OAAO,GAAG;",
   "names": []
 }

package/dist/types/DSProgressIndicator.d.ts

@@ -1,21 +1,32 @@
 import React from 'react';
-import type { DSProgressIndicatorT } from './react-desc-prop-types.js';
+import { type DSProgressIndicatorT } from './react-desc-prop-types.js';
 declare const DSProgressIndicator: {
-    ({ containerProps, innerRef, title, counterRenderer, now, min, max, disabled, segments, style, }: DSProgressIndicatorT.Props): React.JSX.Element;
+    (props: DSProgressIndicatorT.Props): React.JSX.Element;
     displayName: string;
     ProgressBar: {
-        ({ variant, now, min, max, children: progressSegments, }: {
+        ({ variant, now, min, max, labelledBy, valueTextRenderer, children: progressSegments, getOwnerProps, getOwnerPropsArguments, }: {
             variant?: string;
             now?: number;
             min?: number;
             max?: number;
+            labelledBy?: string;
             children?: React.ReactNode;
+            valueTextRenderer?: DSProgressIndicatorT.DefaultRendererT;
+        } & {
+            getOwnerProps?: () => object;
+            getOwnerPropsArguments?: () => object;
         }): React.JSX.Element;
         Segment: (props: {
             variant: string;
             now?: number;
             min?: number;
             max?: number;
+            labelledBy?: string;
+            label?: string;
+            valueTextRenderer?: DSProgressIndicatorT.DefaultRendererT;
+        } & {
+            getOwnerProps?: () => object;
+            getOwnerPropsArguments?: () => object;
         }) => React.JSX.Element;
     };
 };

package/dist/types/ProgressBar.d.ts

@@ -1,17 +1,27 @@
 import React from 'react';
+import type { DSProgressIndicatorT } from './react-desc-prop-types.js';
+type OwnerPropsPassthrough = {
+    getOwnerProps?: () => object;
+    getOwnerPropsArguments?: () => object;
+};
 declare const ProgressBar: {
-    ({ variant, now, min, max, children: progressSegments, }: {
+    ({ variant, now, min, max, labelledBy, valueTextRenderer, children: progressSegments, getOwnerProps, getOwnerPropsArguments, }: {
         variant?: string;
         now?: number;
         min?: number;
         max?: number;
+        labelledBy?: string;
         children?: React.ReactNode;
-    }): React.JSX.Element;
+        valueTextRenderer?: DSProgressIndicatorT.DefaultRendererT;
+    } & OwnerPropsPassthrough): React.JSX.Element;
     Segment: (props: {
         variant: string;
         now?: number;
         min?: number;
         max?: number;
-    }) => React.JSX.Element;
+        labelledBy?: string;
+        label?: string;
+        valueTextRenderer?: DSProgressIndicatorT.DefaultRendererT;
+    } & OwnerPropsPassthrough) => React.JSX.Element;
 };
 export default ProgressBar;

package/dist/types/ProgressCounter.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { DSProgressIndicatorT } from './react-desc-prop-types.js';
-declare const ProgressCounter: ({ now, max, min, renderer, }: DSProgressIndicatorT.PercentageT & {
+declare const ProgressCounter: ({ now, max, min, renderer, getOwnerProps, getOwnerPropsArguments, }: Partial<DSProgressIndicatorT.PercentageT> & {
     renderer?: DSProgressIndicatorT.DefaultRendererT;
+    getOwnerProps?: () => object;
+    getOwnerPropsArguments?: () => object;
 }) => React.JSX.Element;
 export default ProgressCounter;

package/dist/types/config/useProgressIndicator.d.ts

@@ -0,0 +1,8 @@
+import { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
+import { type DSProgressIndicatorT } from '../react-desc-prop-types.js';
+export interface ProgressIndicatorCTX {
+    propsWithDefault: DSProgressIndicatorT.InternalProps;
+    globalProps: ReturnType<typeof useGetGlobalAttributes>;
+    titleId: string;
+}
+export declare const useProgressIndicator: (propsFromUser: DSProgressIndicatorT.Props) => ProgressIndicatorCTX;

package/dist/types/config/useValidateProps.d.ts

@@ -0,0 +1,3 @@
+import type { ValidationMap } from '@elliemae/ds-props-helpers';
+import { type DSProgressIndicatorT } from '../react-desc-prop-types.js';
+export declare const useValidateProps: (props: DSProgressIndicatorT.InternalProps, propTypes: ValidationMap<unknown>) => void;

package/dist/types/constants/index.d.ts

@@ -0,0 +1,15 @@
+export declare const DSProgressIndicatorName = "DSProgressindicator";
+export declare const PROGRESS_INDICATOR_SLOTS: {
+    readonly ROOT: "root";
+    readonly TITLE: "title";
+    readonly COUNTER: "counter";
+    readonly PROGRESS_BAR: "progress-bar";
+    readonly PROGRESS: "progress";
+};
+export declare const PROGRESS_INDICATOR_DATA_TESTID: {
+    readonly ROOT: "ds-progressindicator-root";
+    readonly TITLE: "ds-progressindicator-title";
+    readonly COUNTER: "ds-progressindicator-counter";
+    readonly PROGRESS_BAR: "ds-progressindicator-progress-bar";
+    readonly PROGRESS: "ds-progressindicator-progress";
+};

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
-export * from './DSProgressIndicator.js';
+export { DSProgressIndicator, ProgressIndicatorWithSchema } from './DSProgressIndicator.js';
 export { type DSProgressIndicatorT } from './react-desc-prop-types.js';
+export { DSProgressIndicatorName, PROGRESS_INDICATOR_SLOTS, PROGRESS_INDICATOR_DATA_TESTID, } from './constants/index.js';

package/dist/types/react-desc-prop-types.d.ts

@@ -1,3 +1,6 @@
+import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap } from '@elliemae/ds-props-helpers';
+import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
+import { DSProgressIndicatorName, PROGRESS_INDICATOR_SLOTS } from './constants/index.js';
 export declare namespace DSProgressIndicatorT {
     type PercentageT = {
         min: number;
@@ -12,6 +15,18 @@ export declare namespace DSProgressIndicatorT {
         max: number;
         now: number;
         variant: VariantT;
+        /**
+         * Accessible name for this specific segment. Without it every segment inherits the same name from the
+         * indicator title, so segments are told apart only by their variant colour. See PUI-18942.
+         */
+        label?: string;
+    };
+    type SlotFunctionArguments = {
+        dsProgressindicatorRoot: () => object;
+        dsProgressindicatorTitle: () => object;
+        dsProgressindicatorCounter: () => object;
+        dsProgressindicatorProgressBar: () => object;
+        dsProgressindicatorProgress: () => object;
     };
     interface DefaultProps {
         title: string;
@@ -22,15 +37,32 @@ export declare namespace DSProgressIndicatorT {
         segments: SegmentsT[] | readonly SegmentsT[];
         style: object;
     }
-    interface OptionalProps {
+    interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSProgressIndicatorName, typeof PROGRESS_INDICATOR_SLOTS> {
         containerProps?: {
             [key: string]: string;
         };
         now?: number;
         max?: number;
+        /**
+         * Colour intent of the fill in single-bar mode. Ignored when `segments` are given — each segment carries its
+         * own `variant`. Colour alone does not convey the intent to every user; say it in `title` or the counter too.
+         */
+        variant?: VariantT;
     }
-    interface Props extends Partial<DefaultProps>, OptionalProps {
+    interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps> {
     }
-    interface InternalProps extends DefaultProps, OptionalProps {
+    interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps> {
     }
 }
+export declare const defaultProps: {
+    containerProps: {};
+    title: string;
+    now: number;
+    min: number;
+    max: number;
+    disabled: boolean;
+    segments: never[];
+    style: {};
+};
+export declare const DSProgressIndicatorPropTypes: DSPropTypesSchema<DSProgressIndicatorT.Props>;
+export declare const DSProgressIndicatorPropTypesSchema: ValidationMap<DSProgressIndicatorT.Props>;

package/dist/types/styled.d.ts

@@ -1 +1,24 @@
-export declare const Title: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
+import type { CSSObject, DefaultTheme } from 'styled-components';
+export declare const legacyRootClassName: (disabled?: boolean, ...consumerClasses: (string | undefined)[]) => string;
+export declare const legacyCounterClassName: (...consumerClasses: (string | undefined)[]) => string;
+export declare const legacyBarClassName: (...consumerClasses: (string | undefined)[]) => string;
+export declare const legacyProgressClassName: (variant?: string, ...consumerClasses: (string | undefined)[]) => string;
+type ThemeWithComponents = DefaultTheme & {
+    components?: Record<string, {
+        styleOverrides?: Record<string, CSSObject>;
+    }>;
+};
+export declare const StyledProgressIndicatorRoot: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const Title: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, {
+    theme: ThemeWithComponents;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
+export declare const StyledProgressIndicatorCounter: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, {
+    theme: ThemeWithComponents;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
+export declare const StyledProgressBar: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
+    theme: ThemeWithComponents;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledProgress: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
+    theme: ThemeWithComponents;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export {};

package/dist/types/utils.d.ts

@@ -1 +1,11 @@
+import type { DSProgressIndicatorT } from './react-desc-prop-types.js';
+/**
+ * A determinate progress is only meaningful over a real range: `max` must be finite and greater than `min`.
+ * The default `max` is `0`, so a consumer who omits it lands here — as does a legitimately dynamic `max` that
+ * starts at zero while data loads. Both used to produce `width: NaN%` and an invalid ARIA range
+ * (aria-valuemax equal to aria-valuemin). Callers treat an invalid range as an indeterminate progress. PUI-18672.
+ */
+export declare function hasValidRange(min: unknown, max: unknown): boolean;
+export declare function clamp(value: number, lower: number, upper: number): number;
 export declare function getPercentage(now: number, min: number, max: number): number;
+export declare const defaultCounterRenderer: DSProgressIndicatorT.DefaultRendererT;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-progress-indicator",
-  "version": "3.80.0-next.4",
+  "version": "3.80.0-next.40",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Progress Indicator",
   "files": [
@@ -36,14 +36,15 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-classnames": "3.80.0-next.4",
-    "@elliemae/ds-system": "3.80.0-next.4",
-    "@elliemae/ds-props-helpers": "3.80.0-next.4"
+    "@elliemae/ds-props-helpers": "3.80.0-next.40",
+    "@elliemae/ds-system": "3.80.0-next.40",
+    "@elliemae/ds-typography": "3.80.0-next.40"
   },
   "devDependencies": {
+    "@elliemae/ds-monorepo-devops": "3.80.0-next.40",
+    "@elliemae/ds-typescript-helpers": "3.80.0-next.40",
     "jest": "^30.0.0",
-    "styled-components": "~5.3.11",
-    "@elliemae/ds-monorepo-devops": "3.80.0-next.4"
+    "styled-components": "~5.3.11"
   },
   "peerDependencies": {
     "react": "^18.3.1",
@@ -51,7 +52,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
+    "typeSafety": true
   },
   "scripts": {
     "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",

package/dist/cjs/classedComponents.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/classedComponents.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { aggregatedClasses } from '@elliemae/ds-classnames';\n\nexport const blockName = 'determinate-progress-indicator';\nconst progressBlockName = 'progress-bar';\n\nexport const Wrapper: React.ForwardRefExoticComponent<\n  React.RefAttributes<unknown> & { children: React.ReactNode; style: object; classProps: object }\n> = aggregatedClasses('div')(blockName, null, ({ disabled }: { disabled: boolean }) => ({\n  disabled,\n}));\n\nexport const ProgressIndicatorCounter: React.ForwardRefExoticComponent<\n  React.RefAttributes<unknown> & { children: React.ReactNode }\n> = aggregatedClasses('span')(blockName, 'counter');\n\nexport const ProgressBarStatusBar: React.ForwardRefExoticComponent<\n  React.RefAttributes<unknown> & { children: React.ReactNode }\n> = aggregatedClasses('div')(progressBlockName);\n\nexport const ProgressBarProgress: React.ForwardRefExoticComponent<\n  React.RefAttributes<unknown> & { classProps: object }\n> = aggregatedClasses('div')(progressBlockName, 'progress', ({ variant }) => ({\n  [variant]: true,\n}));\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAAkC;AAE3B,MAAM,YAAY;AACzB,MAAM,oBAAoB;AAEnB,MAAM,cAET,wCAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,SAAS,OAA8B;AAAA,EACtF;AACF,EAAE;AAEK,MAAM,+BAET,wCAAkB,MAAM,EAAE,WAAW,SAAS;AAE3C,MAAM,2BAET,wCAAkB,KAAK,EAAE,iBAAiB;AAEvC,MAAM,0BAET,wCAAkB,KAAK,EAAE,mBAAmB,YAAY,CAAC,EAAE,QAAQ,OAAO;AAAA,EAC5E,CAAC,OAAO,GAAG;AACb,EAAE;",
-  "names": []
-}

package/dist/esm/classedComponents.js

@@ -1,20 +0,0 @@
-import * as React from "react";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-const blockName = "determinate-progress-indicator";
-const progressBlockName = "progress-bar";
-const Wrapper = aggregatedClasses("div")(blockName, null, ({ disabled }) => ({
-  disabled
-}));
-const ProgressIndicatorCounter = aggregatedClasses("span")(blockName, "counter");
-const ProgressBarStatusBar = aggregatedClasses("div")(progressBlockName);
-const ProgressBarProgress = aggregatedClasses("div")(progressBlockName, "progress", ({ variant }) => ({
-  [variant]: true
-}));
-export {
-  ProgressBarProgress,
-  ProgressBarStatusBar,
-  ProgressIndicatorCounter,
-  Wrapper,
-  blockName
-};
-//# sourceMappingURL=classedComponents.js.map

package/dist/esm/classedComponents.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/classedComponents.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { aggregatedClasses } from '@elliemae/ds-classnames';\n\nexport const blockName = 'determinate-progress-indicator';\nconst progressBlockName = 'progress-bar';\n\nexport const Wrapper: React.ForwardRefExoticComponent<\n  React.RefAttributes<unknown> & { children: React.ReactNode; style: object; classProps: object }\n> = aggregatedClasses('div')(blockName, null, ({ disabled }: { disabled: boolean }) => ({\n  disabled,\n}));\n\nexport const ProgressIndicatorCounter: React.ForwardRefExoticComponent<\n  React.RefAttributes<unknown> & { children: React.ReactNode }\n> = aggregatedClasses('span')(blockName, 'counter');\n\nexport const ProgressBarStatusBar: React.ForwardRefExoticComponent<\n  React.RefAttributes<unknown> & { children: React.ReactNode }\n> = aggregatedClasses('div')(progressBlockName);\n\nexport const ProgressBarProgress: React.ForwardRefExoticComponent<\n  React.RefAttributes<unknown> & { classProps: object }\n> = aggregatedClasses('div')(progressBlockName, 'progress', ({ variant }) => ({\n  [variant]: true,\n}));\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,yBAAyB;AAE3B,MAAM,YAAY;AACzB,MAAM,oBAAoB;AAEnB,MAAM,UAET,kBAAkB,KAAK,EAAE,WAAW,MAAM,CAAC,EAAE,SAAS,OAA8B;AAAA,EACtF;AACF,EAAE;AAEK,MAAM,2BAET,kBAAkB,MAAM,EAAE,WAAW,SAAS;AAE3C,MAAM,uBAET,kBAAkB,KAAK,EAAE,iBAAiB;AAEvC,MAAM,sBAET,kBAAkB,KAAK,EAAE,mBAAmB,YAAY,CAAC,EAAE,QAAQ,OAAO;AAAA,EAC5E,CAAC,OAAO,GAAG;AACb,EAAE;",
-  "names": []
-}

package/dist/types/classedComponents.d.ts

@@ -1,15 +0,0 @@
-export declare const blockName = "determinate-progress-indicator";
-export declare const Wrapper: React.ForwardRefExoticComponent<React.RefAttributes<unknown> & {
-    children: React.ReactNode;
-    style: object;
-    classProps: object;
-}>;
-export declare const ProgressIndicatorCounter: React.ForwardRefExoticComponent<React.RefAttributes<unknown> & {
-    children: React.ReactNode;
-}>;
-export declare const ProgressBarStatusBar: React.ForwardRefExoticComponent<React.RefAttributes<unknown> & {
-    children: React.ReactNode;
-}>;
-export declare const ProgressBarProgress: React.ForwardRefExoticComponent<React.RefAttributes<unknown> & {
-    classProps: object;
-}>;