@elliemae/ds-progress-indicator 3.80.0-next.5 → 3.80.0-next.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/dist/cjs/DSProgressIndicator.js +71 -37
  2. package/dist/cjs/DSProgressIndicator.js.map +2 -2
  3. package/dist/cjs/ProgressBar.js +62 -10
  4. package/dist/cjs/ProgressBar.js.map +2 -2
  5. package/dist/cjs/ProgressCounter.js +17 -8
  6. package/dist/cjs/ProgressCounter.js.map +2 -2
  7. package/dist/cjs/config/useProgressIndicator.js +67 -0
  8. package/dist/cjs/config/useProgressIndicator.js.map +7 -0
  9. package/dist/cjs/{classedComponents.js → config/useValidateProps.js} +10 -20
  10. package/dist/cjs/config/useValidateProps.js.map +7 -0
  11. package/dist/cjs/constants/index.js +50 -0
  12. package/dist/cjs/constants/index.js.map +7 -0
  13. package/dist/cjs/index.js +13 -2
  14. package/dist/cjs/index.js.map +2 -2
  15. package/dist/cjs/react-desc-prop-types.js +50 -0
  16. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  17. package/dist/cjs/styled.js +47 -2
  18. package/dist/cjs/styled.js.map +2 -2
  19. package/dist/cjs/typescript-testing/slot-props.js +40 -0
  20. package/dist/cjs/typescript-testing/slot-props.js.map +7 -0
  21. package/dist/cjs/utils.js +14 -2
  22. package/dist/cjs/utils.js.map +2 -2
  23. package/dist/esm/DSProgressIndicator.js +73 -39
  24. package/dist/esm/DSProgressIndicator.js.map +2 -2
  25. package/dist/esm/ProgressBar.js +63 -11
  26. package/dist/esm/ProgressBar.js.map +2 -2
  27. package/dist/esm/ProgressCounter.js +18 -9
  28. package/dist/esm/ProgressCounter.js.map +2 -2
  29. package/dist/esm/config/useProgressIndicator.js +37 -0
  30. package/dist/esm/config/useProgressIndicator.js.map +7 -0
  31. package/dist/esm/config/useValidateProps.js +10 -0
  32. package/dist/esm/config/useValidateProps.js.map +7 -0
  33. package/dist/esm/constants/index.js +20 -0
  34. package/dist/esm/constants/index.js.map +7 -0
  35. package/dist/esm/index.js +13 -1
  36. package/dist/esm/index.js.map +2 -2
  37. package/dist/esm/react-desc-prop-types.js +46 -0
  38. package/dist/esm/react-desc-prop-types.js.map +3 -3
  39. package/dist/esm/styled.js +47 -2
  40. package/dist/esm/styled.js.map +2 -2
  41. package/dist/esm/typescript-testing/slot-props.js +17 -0
  42. package/dist/esm/typescript-testing/slot-props.js.map +7 -0
  43. package/dist/esm/utils.js +14 -2
  44. package/dist/esm/utils.js.map +2 -2
  45. package/dist/types/DSProgressIndicator.d.ts +14 -3
  46. package/dist/types/ProgressBar.d.ts +13 -3
  47. package/dist/types/ProgressCounter.d.ts +3 -1
  48. package/dist/types/config/useProgressIndicator.d.ts +8 -0
  49. package/dist/types/config/useValidateProps.d.ts +3 -0
  50. package/dist/types/constants/index.d.ts +15 -0
  51. package/dist/types/index.d.ts +2 -1
  52. package/dist/types/react-desc-prop-types.d.ts +34 -3
  53. package/dist/types/styled.d.ts +8 -0
  54. package/dist/types/utils.d.ts +10 -0
  55. package/package.json +6 -6
  56. package/dist/cjs/classedComponents.js.map +0 -7
  57. package/dist/esm/classedComponents.js +0 -20
  58. package/dist/esm/classedComponents.js.map +0 -7
  59. package/dist/types/classedComponents.d.ts +0 -15
@@ -5,6 +5,10 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
6
  var __getProtoOf = Object.getPrototypeOf;
7
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
8
12
  var __copyProps = (to, from, except, desc) => {
9
13
  if (from && typeof from === "object" || typeof from === "function") {
10
14
  for (let key of __getOwnPropNames(from))
@@ -23,6 +27,52 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
23
27
  ));
24
28
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
25
29
  var react_desc_prop_types_exports = {};
30
+ __export(react_desc_prop_types_exports, {
31
+ DSProgressIndicatorPropTypes: () => DSProgressIndicatorPropTypes,
32
+ DSProgressIndicatorPropTypesSchema: () => DSProgressIndicatorPropTypesSchema,
33
+ defaultProps: () => defaultProps
34
+ });
26
35
  module.exports = __toCommonJS(react_desc_prop_types_exports);
27
36
  var React = __toESM(require("react"));
37
+ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
38
+ var import_constants = require("./constants/index.js");
39
+ const defaultProps = {
40
+ containerProps: {},
41
+ title: "",
42
+ now: 0,
43
+ min: 0,
44
+ max: 0,
45
+ disabled: false,
46
+ segments: [],
47
+ style: {}
48
+ };
49
+ const variants = ["default", "success", "warning", "info", "error"];
50
+ const DSProgressIndicatorPropTypes = {
51
+ ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSProgressIndicatorName, import_constants.PROGRESS_INDICATOR_SLOTS),
52
+ ...import_ds_props_helpers.globalAttributesPropTypes,
53
+ containerProps: import_ds_props_helpers.PropTypes.object.description("Set of Properties attached to the main container"),
54
+ innerRef: import_ds_props_helpers.PropTypes.object.description("ref to the components container"),
55
+ title: import_ds_props_helpers.PropTypes.string.description("components title"),
56
+ variant: import_ds_props_helpers.PropTypes.oneOf(variants).description("Progress intent variation"),
57
+ now: import_ds_props_helpers.PropTypes.number.description("Total current value"),
58
+ min: import_ds_props_helpers.PropTypes.number.description("min value"),
59
+ max: import_ds_props_helpers.PropTypes.number.description(
60
+ 'max value. Functionally required for a determinate progress: it must be a finite number greater than "min". Without it the progressbar renders as indeterminate and a dev-only warning is logged.'
61
+ ),
62
+ disabled: import_ds_props_helpers.PropTypes.bool.description("Whether the progress indicator disabled or not").defaultValue(false),
63
+ counterRenderer: import_ds_props_helpers.PropTypes.func.description("Render a custom counter"),
64
+ segments: import_ds_props_helpers.PropTypes.arrayOf(
65
+ import_ds_props_helpers.PropTypes.shape({
66
+ min: import_ds_props_helpers.PropTypes.number,
67
+ max: import_ds_props_helpers.PropTypes.number,
68
+ now: import_ds_props_helpers.PropTypes.number,
69
+ variant: import_ds_props_helpers.PropTypes.oneOf(variants),
70
+ label: import_ds_props_helpers.PropTypes.string
71
+ })
72
+ ).description(
73
+ 'An array of multiple progress objects. Give each segment a "label" when its "variant" colour carries meaning \u2014 without one every segment reports the same accessible name and can only be told apart by colour.'
74
+ ),
75
+ style: import_ds_props_helpers.PropTypes.object.description("css inline style")
76
+ };
77
+ const DSProgressIndicatorPropTypesSchema = DSProgressIndicatorPropTypes;
28
78
  //# sourceMappingURL=react-desc-prop-types.js.map
@@ -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": ["export declare namespace DSProgressIndicatorT {\n export type PercentageT = {\n min: number;\n max: number;\n now: number;\n };\n\n export type DefaultRendererT = ({ now, max, min }: DSProgressIndicatorT.PercentageT) => string;\n\n export type VariantT = 'default' | 'success' | 'warning' | 'info' | 'error';\n\n export type SegmentsT = {\n length?: number;\n min: number;\n max: number;\n now: number;\n variant: VariantT;\n };\n\n export interface DefaultProps {\n title: string;\n innerRef: React.MutableRefObject<unknown>;\n counterRenderer: DefaultRendererT;\n min: number;\n disabled: boolean;\n segments: SegmentsT[] | readonly SegmentsT[];\n style: object;\n }\n\n export interface OptionalProps {\n containerProps?: { [key: string]: string };\n now?: number;\n max?: number;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps {}\n\n export interface InternalProps extends DefaultProps, OptionalProps {}\n}\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
4
+ "sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, getPropsPerSlotPropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSProgressIndicatorName, PROGRESS_INDICATOR_SLOTS } from './constants/index.js';\n\nexport declare namespace DSProgressIndicatorT {\n export type PercentageT = {\n min: number;\n max: number;\n now: number;\n };\n\n export type DefaultRendererT = ({ now, max, min }: DSProgressIndicatorT.PercentageT) => string;\n\n export type VariantT = 'default' | 'success' | 'warning' | 'info' | 'error';\n\n export type SegmentsT = {\n length?: number;\n min: number;\n max: number;\n now: number;\n variant: VariantT;\n /**\n * Accessible name for this specific segment. Without it every segment inherits the same name from the\n * indicator title, so segments are told apart only by their variant colour. See PUI-18942.\n */\n label?: string;\n };\n\n export type SlotFunctionArguments = {\n dsProgressindicatorRoot: () => object;\n dsProgressindicatorTitle: () => object;\n dsProgressindicatorCounter: () => object;\n dsProgressindicatorProgressBar: () => object;\n dsProgressindicatorProgress: () => object;\n };\n\n export interface DefaultProps {\n title: string;\n innerRef: React.MutableRefObject<unknown>;\n counterRenderer: DefaultRendererT;\n min: number;\n disabled: boolean;\n segments: SegmentsT[] | readonly SegmentsT[];\n style: object;\n }\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSProgressIndicatorName,\n typeof PROGRESS_INDICATOR_SLOTS\n > {\n // deliberately wide: this has accepted arbitrary keys since PUI-12598 and consumers pass data-* through\n // it. Narrowing it to React.HTMLAttributes rejects data-* in object position \u2014 a breaking type change.\n containerProps?: { [key: string]: string };\n now?: number;\n max?: number;\n }\n\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps> {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps> {}\n}\n\nexport const defaultProps = {\n containerProps: {},\n title: '',\n now: 0,\n min: 0,\n max: 0,\n disabled: false,\n segments: [],\n style: {},\n};\n\nconst variants: DSProgressIndicatorT.VariantT[] = ['default', 'success', 'warning', 'info', 'error'];\n\n// `variant` is documented in the props table but the component neither accepts nor forwards it \u2014 it is absent\n// from `Props` on purpose so the TypeScript surface stays exactly as published. Removing it from the schema\n// would drop a documented prop from the portal; implementing it would change bar colours for anyone already\n// passing it. Both are out of scope here \u2014 tracked in KNOWN_INTENTIONAL_DEVIATIONS.md.\ntype DocumentedPropsSurface = DSProgressIndicatorT.Props & { variant?: DSProgressIndicatorT.VariantT };\n\nexport const DSProgressIndicatorPropTypes: DSPropTypesSchema<DocumentedPropsSurface> = {\n ...getPropsPerSlotPropTypes(DSProgressIndicatorName, PROGRESS_INDICATOR_SLOTS),\n ...globalAttributesPropTypes,\n\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(\n 'max value. Functionally required for a determinate progress: it must be a finite number greater than \"min\". Without it the progressbar renders as indeterminate and a dev-only warning is logged.',\n ),\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.arrayOf(\n PropTypes.shape({\n min: PropTypes.number,\n max: PropTypes.number,\n now: PropTypes.number,\n variant: PropTypes.oneOf(variants),\n label: PropTypes.string,\n }),\n ).description(\n 'An array of multiple progress objects. Give each segment a \"label\" when its \"variant\" colour carries meaning \u2014 without one every segment reports the same accessible name and can only be told apart by colour.',\n ),\n style: PropTypes.object.description('css inline style'),\n};\n\nexport const DSProgressIndicatorPropTypesSchema =\n DSProgressIndicatorPropTypes as unknown as ValidationMap<DSProgressIndicatorT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAA+E;AAE/E,uBAAkE;AAoE3D,MAAM,eAAe;AAAA,EAC1B,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,UAAU;AAAA,EACV,UAAU,CAAC;AAAA,EACX,OAAO,CAAC;AACV;AAEA,MAAM,WAA4C,CAAC,WAAW,WAAW,WAAW,QAAQ,OAAO;AAQ5F,MAAM,+BAA0E;AAAA,EACrF,OAAG,kDAAyB,0CAAyB,yCAAwB;AAAA,EAC7E,GAAG;AAAA,EAEH,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;AAAA,IACpB;AAAA,EACF;AAAA,EACA,UAAU,kCAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EACzG,iBAAiB,kCAAU,KAAK,YAAY,yBAAyB;AAAA,EACrE,UAAU,kCAAU;AAAA,IAClB,kCAAU,MAAM;AAAA,MACd,KAAK,kCAAU;AAAA,MACf,KAAK,kCAAU;AAAA,MACf,KAAK,kCAAU;AAAA,MACf,SAAS,kCAAU,MAAM,QAAQ;AAAA,MACjC,OAAO,kCAAU;AAAA,IACnB,CAAC;AAAA,EACH,EAAE;AAAA,IACA;AAAA,EACF;AAAA,EACA,OAAO,kCAAU,OAAO,YAAY,kBAAkB;AACxD;AAEO,MAAM,qCACX;",
6
6
  "names": []
7
7
  }
@@ -28,12 +28,57 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
28
28
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
29
  var styled_exports = {};
30
30
  __export(styled_exports, {
31
- Title: () => Title
31
+ StyledProgress: () => StyledProgress,
32
+ StyledProgressBar: () => StyledProgressBar,
33
+ StyledProgressIndicatorCounter: () => StyledProgressIndicatorCounter,
34
+ StyledProgressIndicatorRoot: () => StyledProgressIndicatorRoot,
35
+ Title: () => Title,
36
+ legacyBarClassName: () => legacyBarClassName,
37
+ legacyCounterClassName: () => legacyCounterClassName,
38
+ legacyProgressClassName: () => legacyProgressClassName,
39
+ legacyRootClassName: () => legacyRootClassName
32
40
  });
33
41
  module.exports = __toCommonJS(styled_exports);
34
42
  var React = __toESM(require("react"));
35
43
  var import_ds_system = require("@elliemae/ds-system");
36
- const Title = import_ds_system.styled.span`
44
+ var import_constants = require("./constants/index.js");
45
+ const LEGACY_ROOT_BLOCK = "em-ds-determinate-progress-indicator";
46
+ const LEGACY_BAR_BLOCK = "em-ds-progress-bar";
47
+ const joinClasses = (...classes) => [...new Set(classes.filter(Boolean))].join(" ");
48
+ const legacyRootClassName = (disabled, ...consumerClasses) => joinClasses(
49
+ LEGACY_ROOT_BLOCK,
50
+ `${LEGACY_ROOT_BLOCK}--default`,
51
+ disabled && `${LEGACY_ROOT_BLOCK}--disabled`,
52
+ ...consumerClasses
53
+ );
54
+ const legacyCounterClassName = (...consumerClasses) => joinClasses(`${LEGACY_ROOT_BLOCK}__counter`, ...consumerClasses);
55
+ const legacyBarClassName = (...consumerClasses) => joinClasses(LEGACY_BAR_BLOCK, ...consumerClasses);
56
+ const legacyProgressClassName = (variant, ...consumerClasses) => joinClasses(
57
+ `${LEGACY_BAR_BLOCK}__progress`,
58
+ `${LEGACY_BAR_BLOCK}__progress--default`,
59
+ variant && `${LEGACY_BAR_BLOCK}__progress--${variant}`,
60
+ ...consumerClasses
61
+ );
62
+ const StyledProgressIndicatorRoot = (0, import_ds_system.styled)("div", {
63
+ name: import_constants.DSProgressIndicatorName,
64
+ slot: import_constants.PROGRESS_INDICATOR_SLOTS.ROOT
65
+ })``;
66
+ const Title = (0, import_ds_system.styled)("span", {
67
+ name: import_constants.DSProgressIndicatorName,
68
+ slot: import_constants.PROGRESS_INDICATOR_SLOTS.TITLE
69
+ })`
37
70
  grid-area: title;
38
71
  `;
72
+ const StyledProgressIndicatorCounter = (0, import_ds_system.styled)("span", {
73
+ name: import_constants.DSProgressIndicatorName,
74
+ slot: import_constants.PROGRESS_INDICATOR_SLOTS.COUNTER
75
+ })``;
76
+ const StyledProgressBar = (0, import_ds_system.styled)("div", {
77
+ name: import_constants.DSProgressIndicatorName,
78
+ slot: import_constants.PROGRESS_INDICATOR_SLOTS.PROGRESS_BAR
79
+ })``;
80
+ const StyledProgress = (0, import_ds_system.styled)("div", {
81
+ name: import_constants.DSProgressIndicatorName,
82
+ slot: import_constants.PROGRESS_INDICATOR_SLOTS.PROGRESS
83
+ })``;
39
84
  //# sourceMappingURL=styled.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const Title = styled.span`\n grid-area: title;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,QAAQ,wBAAO;AAAA;AAAA;",
4
+ "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSProgressIndicatorName, PROGRESS_INDICATOR_SLOTS } from './constants/index.js';\n\n// ============================================================================================================\n// Legacy BEM class contract\n// ============================================================================================================\n// This component carries no CSS of its own: its entire visual layer is the\n// `em-ds-determinate-progress-indicator` / `em-ds-progress-bar` SCSS compiled into `@elliemae/ds-basic`'s\n// dimsum.css, which is frozen. Consumers may also hold stylesheet overrides and QA selectors against these\n// exact names, so the class strings are a compatibility contract, not an implementation detail.\n//\n// They used to be produced by `aggregatedClasses` from the sunsetted `@elliemae/ds-classnames`. They are\n// reproduced verbatim here so that dependency could be dropped and the slot system put in its place without\n// a visual or breaking change. `DSProgressIndicator.api.test.js` locks the resulting class set per state.\n//\n// `--default` is reproduced deliberately and is not a typo: the legacy layout modifier pipeline emitted a\n// `--default` modifier unconditionally on every element that received `classProps`, which is why the root and\n// the progress fill carry it while the counter and the bar (which received none) do not.\n//\n// These are applied as an explicit `className` prop rather than through `.attrs()`, because `.attrs()` on\n// ds-system's `styled` is silently a no-op \u2014 it calls styled-components' immutable `.attrs()` and discards\n// the new resolver it returns (`styledFunction.tsx:173`). Do not \"simplify\" this back to `.attrs()`.\nconst LEGACY_ROOT_BLOCK = 'em-ds-determinate-progress-indicator';\nconst LEGACY_BAR_BLOCK = 'em-ds-progress-bar';\n\n// `aggregatedClasses` appended any consumer-supplied className after its own, so a className arriving through\n// containerProps adds to the contract rather than replacing it. That ordering is preserved.\nconst joinClasses = (...classes: (string | false | undefined)[]) =>\n [...new Set(classes.filter(Boolean) as string[])].join(' ');\n\nexport const legacyRootClassName = (disabled?: boolean, ...consumerClasses: (string | undefined)[]) =>\n joinClasses(\n LEGACY_ROOT_BLOCK,\n `${LEGACY_ROOT_BLOCK}--default`,\n disabled && `${LEGACY_ROOT_BLOCK}--disabled`,\n ...consumerClasses,\n );\n\nexport const legacyCounterClassName = (...consumerClasses: (string | undefined)[]) =>\n joinClasses(`${LEGACY_ROOT_BLOCK}__counter`, ...consumerClasses);\n\nexport const legacyBarClassName = (...consumerClasses: (string | undefined)[]) =>\n joinClasses(LEGACY_BAR_BLOCK, ...consumerClasses);\n\nexport const legacyProgressClassName = (variant?: string, ...consumerClasses: (string | undefined)[]) =>\n joinClasses(\n `${LEGACY_BAR_BLOCK}__progress`,\n `${LEGACY_BAR_BLOCK}__progress--default`,\n variant && `${LEGACY_BAR_BLOCK}__progress--${variant}`,\n ...consumerClasses,\n );\n\n// ============================================================================================================\n// Slots\n// ============================================================================================================\n\nexport const StyledProgressIndicatorRoot = styled('div', {\n name: DSProgressIndicatorName,\n slot: PROGRESS_INDICATOR_SLOTS.ROOT,\n})``;\n\nexport const Title = styled('span', {\n name: DSProgressIndicatorName,\n slot: PROGRESS_INDICATOR_SLOTS.TITLE,\n})`\n grid-area: title;\n`;\n\nexport const StyledProgressIndicatorCounter = styled('span', {\n name: DSProgressIndicatorName,\n slot: PROGRESS_INDICATOR_SLOTS.COUNTER,\n})``;\n\nexport const StyledProgressBar = styled('div', {\n name: DSProgressIndicatorName,\n slot: PROGRESS_INDICATOR_SLOTS.PROGRESS_BAR,\n})``;\n\nexport const StyledProgress = styled('div', {\n name: DSProgressIndicatorName,\n slot: PROGRESS_INDICATOR_SLOTS.PROGRESS,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAkE;AAqBlE,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AAIzB,MAAM,cAAc,IAAI,YACtB,CAAC,GAAG,IAAI,IAAI,QAAQ,OAAO,OAAO,CAAa,CAAC,EAAE,KAAK,GAAG;AAErD,MAAM,sBAAsB,CAAC,aAAuB,oBACzD;AAAA,EACE;AAAA,EACA,GAAG,iBAAiB;AAAA,EACpB,YAAY,GAAG,iBAAiB;AAAA,EAChC,GAAG;AACL;AAEK,MAAM,yBAAyB,IAAI,oBACxC,YAAY,GAAG,iBAAiB,aAAa,GAAG,eAAe;AAE1D,MAAM,qBAAqB,IAAI,oBACpC,YAAY,kBAAkB,GAAG,eAAe;AAE3C,MAAM,0BAA0B,CAAC,YAAqB,oBAC3D;AAAA,EACE,GAAG,gBAAgB;AAAA,EACnB,GAAG,gBAAgB;AAAA,EACnB,WAAW,GAAG,gBAAgB,eAAe,OAAO;AAAA,EACpD,GAAG;AACL;AAMK,MAAM,kCAA8B,yBAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,0CAAyB;AACjC,CAAC;AAEM,MAAM,YAAQ,yBAAO,QAAQ;AAAA,EAClC,MAAM;AAAA,EACN,MAAM,0CAAyB;AACjC,CAAC;AAAA;AAAA;AAIM,MAAM,qCAAiC,yBAAO,QAAQ;AAAA,EAC3D,MAAM;AAAA,EACN,MAAM,0CAAyB;AACjC,CAAC;AAEM,MAAM,wBAAoB,yBAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,0CAAyB;AACjC,CAAC;AAEM,MAAM,qBAAiB,yBAAO,OAAO;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,0CAAyB;AACjC,CAAC;",
6
6
  "names": []
7
7
  }
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __copyProps = (to, from, except, desc) => {
9
+ if (from && typeof from === "object" || typeof from === "function") {
10
+ for (let key of __getOwnPropNames(from))
11
+ if (!__hasOwnProp.call(to, key) && key !== except)
12
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
13
+ }
14
+ return to;
15
+ };
16
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
17
+ // If the importer is in node compatibility mode or this is not an ESM
18
+ // file that has been converted to a CommonJS file using a Babel-
19
+ // compatible transform (i.e. "__esModule" has not been set), then set
20
+ // "default" to the CommonJS "module.exports" for node compatibility.
21
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
+ mod
23
+ ));
24
+ var React = __toESM(require("react"));
25
+ const SlotPropsAsObject = {
26
+ dsProgressindicatorRoot: { "aria-label": "just a typescript test" },
27
+ dsProgressindicatorTitle: { "aria-label": "just a typescript test" },
28
+ dsProgressindicatorCounter: { "aria-label": "just a typescript test" },
29
+ dsProgressindicatorProgressBar: { "aria-label": "just a typescript test" },
30
+ dsProgressindicatorProgress: { "aria-label": "just a typescript test" }
31
+ };
32
+ const SlotPropsAsFunctions = {
33
+ dsProgressindicatorRoot: () => ({ "aria-label": "just a typescript test" }),
34
+ dsProgressindicatorTitle: () => ({ "aria-label": "just a typescript test" }),
35
+ dsProgressindicatorCounter: () => ({ "aria-label": "just a typescript test" }),
36
+ dsProgressindicatorProgressBar: () => ({ "aria-label": "just a typescript test" }),
37
+ dsProgressindicatorProgress: () => ({ "aria-label": "just a typescript test" })
38
+ };
39
+ const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
40
+ //# sourceMappingURL=slot-props.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSProgressIndicatorName, PROGRESS_INDICATOR_SLOTS } from '../constants/index.js';\nimport type { DSProgressIndicatorT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObject: Partial<DSProgressIndicatorT.Props> = {\n dsProgressindicatorRoot: { 'aria-label': 'just a typescript test' },\n dsProgressindicatorTitle: { 'aria-label': 'just a typescript test' },\n dsProgressindicatorCounter: { 'aria-label': 'just a typescript test' },\n dsProgressindicatorProgressBar: { 'aria-label': 'just a typescript test' },\n dsProgressindicatorProgress: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSProgressIndicatorT.SlotFunctionArguments = {\n dsProgressindicatorRoot: () => ({ 'aria-label': 'just a typescript test' }),\n dsProgressindicatorTitle: () => ({ 'aria-label': 'just a typescript test' }),\n dsProgressindicatorCounter: () => ({ 'aria-label': 'just a typescript test' }),\n dsProgressindicatorProgressBar: () => ({ 'aria-label': 'just a typescript test' }),\n dsProgressindicatorProgress: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// Exhaustiveness check \u2014 fails compilation if a slot is missing from SlotFunctionArguments\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n TypescriptHelpersT.PropsForSlots<typeof DSProgressIndicatorName, typeof PROGRESS_INDICATOR_SLOTS>\n> = SlotPropsAsFunctions;\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACKvB,MAAM,oBAAyD;AAAA,EAC7D,yBAAyB,EAAE,cAAc,yBAAyB;AAAA,EAClE,0BAA0B,EAAE,cAAc,yBAAyB;AAAA,EACnE,4BAA4B,EAAE,cAAc,yBAAyB;AAAA,EACrE,gCAAgC,EAAE,cAAc,yBAAyB;AAAA,EACzE,6BAA6B,EAAE,cAAc,yBAAyB;AACxE;AAEA,MAAM,uBAAmE;AAAA,EACvE,yBAAyB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACzE,0BAA0B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC1E,4BAA4B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC5E,gCAAgC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAChF,6BAA6B,OAAO,EAAE,cAAc,yBAAyB;AAC/E;AAGA,MAAM,6CAEF;",
6
+ "names": []
7
+ }
package/dist/cjs/utils.js CHANGED
@@ -28,11 +28,23 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
28
28
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
29
  var utils_exports = {};
30
30
  __export(utils_exports, {
31
- getPercentage: () => getPercentage
31
+ clamp: () => clamp,
32
+ defaultCounterRenderer: () => defaultCounterRenderer,
33
+ getPercentage: () => getPercentage,
34
+ hasValidRange: () => hasValidRange
32
35
  });
33
36
  module.exports = __toCommonJS(utils_exports);
34
37
  var React = __toESM(require("react"));
38
+ function hasValidRange(min, max) {
39
+ return typeof min === "number" && typeof max === "number" && Number.isFinite(min) && Number.isFinite(max) && max > min;
40
+ }
41
+ function clamp(value, lower, upper) {
42
+ if (!Number.isFinite(value)) return lower;
43
+ return Math.min(upper, Math.max(lower, value));
44
+ }
35
45
  function getPercentage(now, min, max) {
36
- return (now || min) / max * 100;
46
+ if (!hasValidRange(min, max)) return 0;
47
+ return clamp((now || min) / max * 100, 0, 100);
37
48
  }
49
+ const defaultCounterRenderer = ({ now, max, min }) => `${min || now} of ${max}`;
38
50
  //# sourceMappingURL=utils.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export function getPercentage(now: number, min: number, max: number): number {\n return ((now || min) / max) * 100;\n}\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,SAAS,cAAc,KAAa,KAAa,KAAqB;AAC3E,UAAS,OAAO,OAAO,MAAO;AAChC;",
4
+ "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADQhB,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;",
6
6
  "names": []
7
7
  }
@@ -1,52 +1,86 @@
1
1
  import * as React from "react";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import { useMemo } from "react";
4
- import { describe, PropTypes } from "@elliemae/ds-props-helpers";
4
+ import { describe, useOwnerProps } from "@elliemae/ds-props-helpers";
5
5
  import Counter from "./ProgressCounter.js";
6
6
  import ProgressBar from "./ProgressBar.js";
7
- import { Wrapper } from "./classedComponents.js";
8
- import { Title } from "./styled.js";
9
- const DSProgressIndicator = ({
10
- containerProps = {},
11
- innerRef,
12
- title = "",
13
- counterRenderer,
14
- now = 0,
15
- min = 0,
16
- max = 0,
17
- disabled = false,
18
- segments = [],
19
- style = {}
20
- }) => {
7
+ import { useProgressIndicator } from "./config/useProgressIndicator.js";
8
+ import { legacyRootClassName, StyledProgressIndicatorRoot, Title } from "./styled.js";
9
+ import { defaultCounterRenderer } from "./utils.js";
10
+ import { DSProgressIndicatorPropTypesSchema } from "./react-desc-prop-types.js";
11
+ const DSProgressIndicator = (props) => {
12
+ const { propsWithDefault, globalProps, titleId } = useProgressIndicator(props);
13
+ const { containerProps, innerRef, title, counterRenderer, now, min, max, disabled, segments, style } = propsWithDefault;
14
+ const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);
15
+ const labelledBy = title ? titleId : void 0;
16
+ const valueRenderer = counterRenderer ?? defaultCounterRenderer;
21
17
  const renderProgressBar = useMemo(
22
- () => segments.length ? /* @__PURE__ */ jsx(ProgressBar, { children: segments.map(
23
- (segmentProps, i) => !(segmentProps.now < segmentProps.min) && /* @__PURE__ */ jsx(ProgressBar.Segment, { ...segmentProps }, i)
24
- ) }) : /* @__PURE__ */ jsx(ProgressBar, { max, min, now }),
25
- [segments, min, max, now]
18
+ () => segments.length ? /* @__PURE__ */ jsx(
19
+ ProgressBar,
20
+ {
21
+ valueTextRenderer: valueRenderer,
22
+ getOwnerProps,
23
+ getOwnerPropsArguments,
24
+ children: segments.map(
25
+ (segmentProps, i) => !(segmentProps.now < segmentProps.min) && /* @__PURE__ */ jsx(
26
+ ProgressBar.Segment,
27
+ {
28
+ ...segmentProps,
29
+ labelledBy,
30
+ valueTextRenderer: valueRenderer,
31
+ getOwnerProps,
32
+ getOwnerPropsArguments
33
+ },
34
+ i
35
+ )
36
+ )
37
+ }
38
+ ) : /* @__PURE__ */ jsx(
39
+ ProgressBar,
40
+ {
41
+ max,
42
+ min,
43
+ now,
44
+ labelledBy,
45
+ valueTextRenderer: valueRenderer,
46
+ getOwnerProps,
47
+ getOwnerPropsArguments
48
+ }
49
+ ),
50
+ [segments, min, max, now, labelledBy, valueRenderer, getOwnerProps, getOwnerPropsArguments]
51
+ );
52
+ return /* @__PURE__ */ jsxs(
53
+ StyledProgressIndicatorRoot,
54
+ {
55
+ ...globalProps,
56
+ innerRef,
57
+ "aria-disabled": disabled,
58
+ ...containerProps,
59
+ className: legacyRootClassName(disabled, globalProps.className, containerProps?.className),
60
+ style,
61
+ getOwnerProps,
62
+ getOwnerPropsArguments,
63
+ children: [
64
+ /* @__PURE__ */ jsx(Title, { id: titleId, getOwnerProps, getOwnerPropsArguments, children: title }),
65
+ /* @__PURE__ */ jsx(
66
+ Counter,
67
+ {
68
+ max,
69
+ min,
70
+ now,
71
+ renderer: valueRenderer,
72
+ getOwnerProps,
73
+ getOwnerPropsArguments
74
+ }
75
+ ),
76
+ renderProgressBar
77
+ ]
78
+ }
26
79
  );
27
- return /* @__PURE__ */ jsxs(Wrapper, { ref: innerRef, "aria-disabled": disabled, classProps: { disabled }, ...containerProps, style, children: [
28
- /* @__PURE__ */ jsx(Title, { children: title }),
29
- /* @__PURE__ */ jsx(Counter, { max, min, now, renderer: counterRenderer }),
30
- renderProgressBar
31
- ] });
32
- };
33
- const variants = ["default", "success", "warning", "info", "error"];
34
- const progressIndicatorProps = {
35
- containerProps: PropTypes.object.description("Set of Properties attached to the main container"),
36
- innerRef: PropTypes.object.description("ref to the components container"),
37
- title: PropTypes.string.description("components title"),
38
- variant: PropTypes.oneOf(variants).description("Progress intent variation"),
39
- now: PropTypes.number.description("Total current value"),
40
- min: PropTypes.number.description("min value"),
41
- max: PropTypes.number.description("max value"),
42
- disabled: PropTypes.bool.description("Whether the progress indicator disabled or not").defaultValue(false),
43
- counterRenderer: PropTypes.func.description("Render a custom counter"),
44
- segments: PropTypes.array.description("An array of multiple progress objects"),
45
- style: PropTypes.object.description("css inline style")
46
80
  };
47
81
  DSProgressIndicator.displayName = "DSProgressIndicator";
48
82
  const ProgressIndicatorWithSchema = describe(DSProgressIndicator);
49
- ProgressIndicatorWithSchema.propTypes = progressIndicatorProps;
83
+ ProgressIndicatorWithSchema.propTypes = DSProgressIndicatorPropTypesSchema;
50
84
  DSProgressIndicator.ProgressBar = ProgressBar;
51
85
  var DSProgressIndicator_default = DSProgressIndicator;
52
86
  export {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSProgressIndicator.tsx"],
4
- "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 Counter from './ProgressCounter.js';\nimport ProgressBar from './ProgressBar.js';\nimport { Wrapper } from './classedComponents.js';\nimport { Title } from './styled.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>{title}</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"],
5
- "mappings": "AAAA,YAAY,WAAW;AC2BiC,cAUpD,YAVoD;AA1BxD,SAAgB,eAAuC;AACvD,SAAS,UAAU,iBAAiB;AACpC,OAAO,aAAa;AACpB,OAAO,iBAAiB;AACxB,SAAS,eAAe;AACxB,SAAS,aAAa;AAGtB,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,SAAO,iBAAM;AAAA,IACd,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;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-array-index-key */\nimport React, { useMemo } from 'react';\nimport { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport Counter from './ProgressCounter.js';\nimport ProgressBar from './ProgressBar.js';\nimport { useProgressIndicator } from './config/useProgressIndicator.js';\nimport { legacyRootClassName, StyledProgressIndicatorRoot, Title } from './styled.js';\nimport { defaultCounterRenderer } from './utils.js';\nimport { type DSProgressIndicatorT, DSProgressIndicatorPropTypesSchema } from './react-desc-prop-types.js';\n\nconst DSProgressIndicator = (props: DSProgressIndicatorT.Props) => {\n const { propsWithDefault, globalProps, titleId } = useProgressIndicator(props);\n const { containerProps, innerRef, title, counterRenderer, now, min, max, disabled, segments, style } =\n propsWithDefault;\n\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps<DSProgressIndicatorT.Props>(propsWithDefault);\n\n // A titleless progress indicator has nothing to be labelled by, so the fallback aria-label is kept instead.\n const labelledBy = title ? titleId : undefined;\n // Resolved once so the visible counter and every progressbar's aria-valuetext share the exact same text.\n const valueRenderer = counterRenderer ?? defaultCounterRenderer;\n\n const renderProgressBar = useMemo(\n () =>\n segments.length ? (\n <ProgressBar\n valueTextRenderer={valueRenderer}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {segments.map(\n (segmentProps, i) =>\n !(segmentProps.now < segmentProps.min) && (\n <ProgressBar.Segment\n key={i}\n {...segmentProps}\n labelledBy={labelledBy}\n valueTextRenderer={valueRenderer}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n ),\n )}\n </ProgressBar>\n ) : (\n <ProgressBar\n max={max}\n min={min}\n now={now}\n labelledBy={labelledBy}\n valueTextRenderer={valueRenderer}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n ),\n [segments, min, max, now, labelledBy, valueRenderer, getOwnerProps, getOwnerPropsArguments],\n );\n\n return (\n <StyledProgressIndicatorRoot\n {...globalProps}\n // the public innerRef contract is MutableRefObject<unknown>; the styled root is a div. Casting here\n // keeps the published prop type unchanged rather than narrowing it on consumers.\n innerRef={innerRef as React.RefObject<HTMLDivElement>}\n aria-disabled={disabled}\n {...containerProps}\n // after the spreads on purpose: aggregatedClasses used to append a consumer className to the legacy\n // contract rather than let it replace them, and that ordering is part of the compatibility surface\n className={legacyRootClassName(disabled, globalProps.className, containerProps?.className)}\n style={style}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Title id={titleId} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {title}\n </Title>\n <Counter\n max={max}\n min={min}\n now={now}\n renderer={valueRenderer}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n {renderProgressBar}\n </StyledProgressIndicatorRoot>\n );\n};\n\nDSProgressIndicator.displayName = 'DSProgressIndicator';\nconst ProgressIndicatorWithSchema = describe(DSProgressIndicator);\nProgressIndicatorWithSchema.propTypes = DSProgressIndicatorPropTypesSchema;\n\nDSProgressIndicator.ProgressBar = ProgressBar;\n\nexport { DSProgressIndicator, ProgressIndicatorWithSchema };\nexport default DSProgressIndicator;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACiCP,cA0BZ,YA1BY;AAhChB,SAAgB,eAAe;AAC/B,SAAS,UAAU,qBAAqB;AACxC,OAAO,aAAa;AACpB,OAAO,iBAAiB;AACxB,SAAS,4BAA4B;AACrC,SAAS,qBAAqB,6BAA6B,aAAa;AACxE,SAAS,8BAA8B;AACvC,SAAoC,0CAA0C;AAE9E,MAAM,sBAAsB,CAAC,UAAsC;AACjE,QAAM,EAAE,kBAAkB,aAAa,QAAQ,IAAI,qBAAqB,KAAK;AAC7E,QAAM,EAAE,gBAAgB,UAAU,OAAO,iBAAiB,KAAK,KAAK,KAAK,UAAU,UAAU,MAAM,IACjG;AAEF,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAA0C,gBAAgB;AAG5G,QAAM,aAAa,QAAQ,UAAU;AAErC,QAAM,gBAAgB,mBAAmB;AAEzC,QAAM,oBAAoB;AAAA,IACxB,MACE,SAAS,SACP;AAAA,MAAC;AAAA;AAAA,QACC,mBAAmB;AAAA,QACnB;AAAA,QACA;AAAA,QAEC,mBAAS;AAAA,UACR,CAAC,cAAc,MACb,EAAE,aAAa,MAAM,aAAa,QAChC;AAAA,YAAC,YAAY;AAAA,YAAZ;AAAA,cAEE,GAAG;AAAA,cACJ;AAAA,cACA,mBAAmB;AAAA,cACnB;AAAA,cACA;AAAA;AAAA,YALK;AAAA,UAMP;AAAA,QAEN;AAAA;AAAA,IACF,IAEA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,mBAAmB;AAAA,QACnB;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IAEJ,CAAC,UAAU,KAAK,KAAK,KAAK,YAAY,eAAe,eAAe,sBAAsB;AAAA,EAC5F;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MAGJ;AAAA,MACA,iBAAe;AAAA,MACd,GAAG;AAAA,MAGJ,WAAW,oBAAoB,UAAU,YAAY,WAAW,gBAAgB,SAAS;AAAA,MACzF;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,SAAM,IAAI,SAAS,eAA8B,wBAC/C,iBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,oBAAoB,cAAc;AAClC,MAAM,8BAA8B,SAAS,mBAAmB;AAChE,4BAA4B,YAAY;AAExC,oBAAoB,cAAc;AAGlC,IAAO,8BAAQ;",
6
6
  "names": []
7
7
  }
@@ -1,32 +1,84 @@
1
1
  import * as React from "react";
2
2
  import { jsx } from "react/jsx-runtime";
3
- import { ProgressBarProgress, ProgressBarStatusBar } from "./classedComponents.js";
4
- import { getPercentage } from "./utils.js";
5
- function useProgressTrait({ now = 0, min = 0, max = 0 }) {
3
+ import { legacyBarClassName, legacyProgressClassName, StyledProgress, StyledProgressBar } from "./styled.js";
4
+ import { clamp, getPercentage, hasValidRange } from "./utils.js";
5
+ function useProgressTrait({
6
+ now = 0,
7
+ min = 0,
8
+ max = 0,
9
+ labelledBy,
10
+ label,
11
+ valueTextRenderer
12
+ }) {
13
+ const rangeIsValid = hasValidRange(min, max);
6
14
  const percentage = getPercentage(now, min, max);
15
+ const valueText = valueTextRenderer?.({ now, min, max });
16
+ const hasTextualValue = typeof valueText === "string" || typeof valueText === "number";
7
17
  return {
8
18
  role: "progressbar",
9
- "aria-valuenow": now,
10
- "aria-valuemin": min,
11
- "aria-valuemax": max,
12
- "aria-label": "progress bar",
19
+ // An invalid range — `max` omitted, or 0 while data loads — is an indeterminate progress, and WAI-ARIA says an
20
+ // indeterminate progressbar omits aria-valuenow. AT then announces "busy" instead of the invalid "0 of 0"
21
+ // range this used to emit. When the range is valid, aria-valuenow is clamped so it never leaves [min, max].
22
+ ...rangeIsValid ? { "aria-valuenow": clamp(now, min, max), "aria-valuemin": min, "aria-valuemax": max } : {},
23
+ // Mirrors the visible counter so screen readers hear the same formatted value sighted users see, not just
24
+ // the raw number. Uses the same renderer as the counter, applied to this bar's own values — for a segment
25
+ // that is the segment's range, which is what its aria-valuenow describes.
26
+ ...rangeIsValid && hasTextualValue ? { "aria-valuetext": String(valueText) } : {},
27
+ // Precedence: a per-segment label wins, because it is the only thing that tells two segments apart
28
+ // once they share the indicator title. Then the visible title. `aria-label` is the last-resort fallback
29
+ // for a titleless indicator, which would otherwise have no accessible name at all.
30
+ ...label ? { "aria-label": label } : {},
31
+ ...!label && labelledBy ? { "aria-labelledby": labelledBy } : {},
32
+ ...!label && !labelledBy ? { "aria-label": "progress bar" } : {},
13
33
  style: {
14
34
  width: `${percentage}%`
15
35
  }
16
36
  };
17
37
  }
18
38
  const Progress = (props) => {
19
- const { variant = "default" } = props;
39
+ const { variant = "default", getOwnerProps, getOwnerPropsArguments } = props;
20
40
  const progressTraitProps = useProgressTrait(props);
21
- return /* @__PURE__ */ jsx(ProgressBarProgress, { classProps: { variant }, ...progressTraitProps });
41
+ return /* @__PURE__ */ jsx(
42
+ StyledProgress,
43
+ {
44
+ className: legacyProgressClassName(variant),
45
+ getOwnerProps,
46
+ getOwnerPropsArguments,
47
+ ...progressTraitProps
48
+ }
49
+ );
22
50
  };
23
51
  const ProgressBar = ({
24
52
  variant = "default",
25
53
  now = void 0,
26
54
  min = void 0,
27
55
  max = void 0,
28
- children: progressSegments
29
- }) => /* @__PURE__ */ jsx(ProgressBarStatusBar, { children: progressSegments || /* @__PURE__ */ jsx(Progress, { max, min, now, variant }) });
56
+ labelledBy = void 0,
57
+ valueTextRenderer = void 0,
58
+ children: progressSegments,
59
+ getOwnerProps,
60
+ getOwnerPropsArguments
61
+ }) => /* @__PURE__ */ jsx(
62
+ StyledProgressBar,
63
+ {
64
+ className: legacyBarClassName(),
65
+ getOwnerProps,
66
+ getOwnerPropsArguments,
67
+ children: progressSegments || /* @__PURE__ */ jsx(
68
+ Progress,
69
+ {
70
+ max,
71
+ min,
72
+ now,
73
+ variant,
74
+ labelledBy,
75
+ valueTextRenderer,
76
+ getOwnerProps,
77
+ getOwnerPropsArguments
78
+ }
79
+ )
80
+ }
81
+ );
30
82
  ProgressBar.Segment = Progress;
31
83
  var ProgressBar_default = ProgressBar;
32
84
  export {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ProgressBar.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ProgressBarProgress, ProgressBarStatusBar } from './classedComponents.js';\nimport { getPercentage } from './utils.js';\n\nfunction useProgressTrait({ now = 0, min = 0, max = 0 }: { now?: number; min?: number; max?: number }) {\n const percentage = getPercentage(now, min, max);\n return {\n role: 'progressbar',\n 'aria-valuenow': now,\n 'aria-valuemin': min,\n 'aria-valuemax': max,\n 'aria-label': 'progress bar',\n style: {\n width: `${percentage}%`,\n },\n };\n}\n\nconst Progress = (props: { variant: string; now?: number; min?: number; max?: number }) => {\n const { variant = 'default' } = props;\n\n const progressTraitProps = useProgressTrait(props);\n\n return <ProgressBarProgress classProps={{ variant }} {...progressTraitProps} />;\n};\n\nconst ProgressBar = ({\n variant = 'default',\n now = undefined,\n min = undefined,\n max = undefined,\n children: progressSegments,\n}: {\n variant?: string;\n now?: number;\n min?: number;\n max?: number;\n children?: React.ReactNode;\n}) => (\n <ProgressBarStatusBar>\n {progressSegments || <Progress max={max} min={min} now={now} variant={variant} />}\n </ProgressBarStatusBar>\n);\n\nProgressBar.Segment = Progress;\n\nexport default ProgressBar;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACuBd;AAtBT,SAAS,qBAAqB,4BAA4B;AAC1D,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAiD;AACrG,QAAM,aAAa,cAAc,KAAK,KAAK,GAAG;AAC9C,SAAO;AAAA,IACL,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,OAAO;AAAA,MACL,OAAO,GAAG,UAAU;AAAA,IACtB;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,UAAyE;AACzF,QAAM,EAAE,UAAU,UAAU,IAAI;AAEhC,QAAM,qBAAqB,iBAAiB,KAAK;AAEjD,SAAO,oBAAC,uBAAoB,YAAY,EAAE,QAAQ,GAAI,GAAG,oBAAoB;AAC/E;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AACZ,MAOE,oBAAC,wBACE,8BAAoB,oBAAC,YAAS,KAAU,KAAU,KAAU,SAAkB,GACjF;AAGF,YAAY,UAAU;AAEtB,IAAO,sBAAQ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { legacyBarClassName, legacyProgressClassName, StyledProgress, StyledProgressBar } from './styled.js';\nimport { clamp, getPercentage, hasValidRange } from './utils.js';\nimport type { DSProgressIndicatorT } from './react-desc-prop-types.js';\n\ntype OwnerPropsPassthrough = {\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n};\n\nfunction useProgressTrait({\n now = 0,\n min = 0,\n max = 0,\n labelledBy,\n label,\n valueTextRenderer,\n}: {\n now?: number;\n min?: number;\n max?: number;\n labelledBy?: string;\n label?: string;\n valueTextRenderer?: DSProgressIndicatorT.DefaultRendererT;\n}) {\n const rangeIsValid = hasValidRange(min, max);\n const percentage = getPercentage(now, min, max);\n // Only text is a valid aria-valuetext. The renderer type says string, but a JS consumer can return JSX for\n // a styled counter \u2014 React would then set the attribute to \"[object Object]\", which is worse than omitting\n // it and letting AT fall back to the numeric range, exactly as it did before aria-valuetext existed.\n const valueText = valueTextRenderer?.({ now, min, max }) as unknown;\n const hasTextualValue = typeof valueText === 'string' || typeof valueText === 'number';\n return {\n role: 'progressbar',\n // An invalid range \u2014 `max` omitted, or 0 while data loads \u2014 is an indeterminate progress, and WAI-ARIA says an\n // indeterminate progressbar omits aria-valuenow. AT then announces \"busy\" instead of the invalid \"0 of 0\"\n // range this used to emit. When the range is valid, aria-valuenow is clamped so it never leaves [min, max].\n ...(rangeIsValid ? { 'aria-valuenow': clamp(now, min, max), 'aria-valuemin': min, 'aria-valuemax': max } : {}),\n // Mirrors the visible counter so screen readers hear the same formatted value sighted users see, not just\n // the raw number. Uses the same renderer as the counter, applied to this bar's own values \u2014 for a segment\n // that is the segment's range, which is what its aria-valuenow describes.\n ...(rangeIsValid && hasTextualValue ? { 'aria-valuetext': String(valueText) } : {}),\n // Precedence: a per-segment label wins, because it is the only thing that tells two segments apart\n // once they share the indicator title. Then the visible title. `aria-label` is the last-resort fallback\n // for a titleless indicator, which would otherwise have no accessible name at all.\n ...(label ? { 'aria-label': label } : {}),\n ...(!label && labelledBy ? { 'aria-labelledby': labelledBy } : {}),\n ...(!label && !labelledBy ? { 'aria-label': 'progress bar' } : {}),\n style: {\n width: `${percentage}%`,\n },\n };\n}\n\nconst Progress = (\n props: {\n variant: string;\n now?: number;\n min?: number;\n max?: number;\n labelledBy?: string;\n label?: string;\n valueTextRenderer?: DSProgressIndicatorT.DefaultRendererT;\n } & OwnerPropsPassthrough,\n) => {\n const { variant = 'default', getOwnerProps, getOwnerPropsArguments } = props;\n\n const progressTraitProps = useProgressTrait(props);\n\n return (\n <StyledProgress\n className={legacyProgressClassName(variant)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n {...progressTraitProps}\n />\n );\n};\n\nconst ProgressBar = ({\n variant = 'default',\n now = undefined,\n min = undefined,\n max = undefined,\n labelledBy = undefined,\n valueTextRenderer = undefined,\n children: progressSegments,\n getOwnerProps,\n getOwnerPropsArguments,\n}: {\n variant?: string;\n now?: number;\n min?: number;\n max?: number;\n labelledBy?: string;\n children?: React.ReactNode;\n valueTextRenderer?: DSProgressIndicatorT.DefaultRendererT;\n} & OwnerPropsPassthrough) => (\n <StyledProgressBar\n className={legacyBarClassName()}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {progressSegments || (\n <Progress\n max={max}\n min={min}\n now={now}\n variant={variant}\n labelledBy={labelledBy}\n valueTextRenderer={valueTextRenderer}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </StyledProgressBar>\n);\n\nProgressBar.Segment = Progress;\n\nexport default ProgressBar;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACsEnB;AArEJ,SAAS,oBAAoB,yBAAyB,gBAAgB,yBAAyB;AAC/F,SAAS,OAAO,eAAe,qBAAqB;AAQpD,SAAS,iBAAiB;AAAA,EACxB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,eAAe,cAAc,KAAK,GAAG;AAC3C,QAAM,aAAa,cAAc,KAAK,KAAK,GAAG;AAI9C,QAAM,YAAY,oBAAoB,EAAE,KAAK,KAAK,IAAI,CAAC;AACvD,QAAM,kBAAkB,OAAO,cAAc,YAAY,OAAO,cAAc;AAC9E,SAAO;AAAA,IACL,MAAM;AAAA;AAAA;AAAA;AAAA,IAIN,GAAI,eAAe,EAAE,iBAAiB,MAAM,KAAK,KAAK,GAAG,GAAG,iBAAiB,KAAK,iBAAiB,IAAI,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,IAI5G,GAAI,gBAAgB,kBAAkB,EAAE,kBAAkB,OAAO,SAAS,EAAE,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,IAIjF,GAAI,QAAQ,EAAE,cAAc,MAAM,IAAI,CAAC;AAAA,IACvC,GAAI,CAAC,SAAS,aAAa,EAAE,mBAAmB,WAAW,IAAI,CAAC;AAAA,IAChE,GAAI,CAAC,SAAS,CAAC,aAAa,EAAE,cAAc,eAAe,IAAI,CAAC;AAAA,IAChE,OAAO;AAAA,MACL,OAAO,GAAG,UAAU;AAAA,IACtB;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CACf,UASG;AACH,QAAM,EAAE,UAAU,WAAW,eAAe,uBAAuB,IAAI;AAEvE,QAAM,qBAAqB,iBAAiB,KAAK;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,wBAAwB,OAAO;AAAA,MAC1C;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV;AAAA,EACA;AACF,MASE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,mBAAmB;AAAA,IAC9B;AAAA,IACA;AAAA,IAEC,8BACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA;AAEJ;AAGF,YAAY,UAAU;AAEtB,IAAO,sBAAQ;",
6
6
  "names": []
7
7
  }
@@ -1,22 +1,31 @@
1
1
  import * as React from "react";
2
2
  import { jsx } from "react/jsx-runtime";
3
- import { getPercentage } from "./utils.js";
4
- import { ProgressIndicatorCounter } from "./classedComponents.js";
5
- const defaultRenderer = ({ now, max, min }) => `${min || now} of ${max}`;
3
+ import { defaultCounterRenderer, getPercentage } from "./utils.js";
4
+ import { legacyCounterClassName, StyledProgressIndicatorCounter } from "./styled.js";
6
5
  const percentageRenderer = ({ now, max, min }) => {
7
6
  const percentage = getPercentage(now, min, max);
8
7
  return `${percentage}%`;
9
8
  };
10
9
  const renderers = {
11
- default: defaultRenderer,
10
+ default: defaultCounterRenderer,
12
11
  percentage: percentageRenderer
13
12
  };
14
13
  const ProgressCounter = ({
15
- now,
16
- max,
17
- min,
18
- renderer = renderers.default
19
- }) => /* @__PURE__ */ jsx(ProgressIndicatorCounter, { children: renderer({ now, max, min }) });
14
+ now = 0,
15
+ max = 0,
16
+ min = 0,
17
+ renderer = renderers.default,
18
+ getOwnerProps,
19
+ getOwnerPropsArguments
20
+ }) => /* @__PURE__ */ jsx(
21
+ StyledProgressIndicatorCounter,
22
+ {
23
+ className: legacyCounterClassName(),
24
+ getOwnerProps,
25
+ getOwnerPropsArguments,
26
+ children: renderer({ now, max, min })
27
+ }
28
+ );
20
29
  var ProgressCounter_default = ProgressCounter;
21
30
  export {
22
31
  ProgressCounter_default as default
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ProgressCounter.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { getPercentage } from './utils.js';\nimport { ProgressIndicatorCounter } from './classedComponents.js';\nimport type { DSProgressIndicatorT } from './react-desc-prop-types.js';\n\nconst defaultRenderer: DSProgressIndicatorT.DefaultRendererT = ({ now, max, min }) => `${min || now} of ${max}`;\n\nconst percentageRenderer = ({ now, max, min }: DSProgressIndicatorT.PercentageT) => {\n const percentage = getPercentage(now, min, max);\n return `${percentage}%`;\n};\n\nconst renderers = {\n default: defaultRenderer,\n percentage: percentageRenderer,\n};\n\nconst ProgressCounter = ({\n now,\n max,\n min,\n renderer = renderers.default,\n}: DSProgressIndicatorT.PercentageT & { renderer?: DSProgressIndicatorT.DefaultRendererT }) => (\n <ProgressIndicatorCounter>{renderer({ now, max, min })}</ProgressIndicatorCounter>\n);\n\nexport default ProgressCounter;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACuBrB;AAtBF,SAAS,qBAAqB;AAC9B,SAAS,gCAAgC;AAGzC,MAAM,kBAAyD,CAAC,EAAE,KAAK,KAAK,IAAI,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG;AAE7G,MAAM,qBAAqB,CAAC,EAAE,KAAK,KAAK,IAAI,MAAwC;AAClF,QAAM,aAAa,cAAc,KAAK,KAAK,GAAG;AAC9C,SAAO,GAAG,UAAU;AACtB;AAEA,MAAM,YAAY;AAAA,EAChB,SAAS;AAAA,EACT,YAAY;AACd;AAEA,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,UAAU;AACvB,MACE,oBAAC,4BAA0B,mBAAS,EAAE,KAAK,KAAK,IAAI,CAAC,GAAE;AAGzD,IAAO,0BAAQ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { defaultCounterRenderer, getPercentage } from './utils.js';\nimport { legacyCounterClassName, StyledProgressIndicatorCounter } from './styled.js';\nimport type { DSProgressIndicatorT } from './react-desc-prop-types.js';\n\nconst percentageRenderer = ({ now, max, min }: DSProgressIndicatorT.PercentageT) => {\n const percentage = getPercentage(now, min, max);\n return `${percentage}%`;\n};\n\nconst renderers = {\n default: defaultCounterRenderer,\n percentage: percentageRenderer,\n};\n\nconst ProgressCounter = ({\n now = 0,\n max = 0,\n min = 0,\n renderer = renderers.default,\n getOwnerProps,\n getOwnerPropsArguments,\n}: Partial<DSProgressIndicatorT.PercentageT> & {\n renderer?: DSProgressIndicatorT.DefaultRendererT;\n getOwnerProps?: () => object;\n getOwnerPropsArguments?: () => object;\n}) => (\n <StyledProgressIndicatorCounter\n className={legacyCounterClassName()}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {renderer({ now, max, min })}\n </StyledProgressIndicatorCounter>\n);\n\nexport default ProgressCounter;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC2BrB;AA1BF,SAAS,wBAAwB,qBAAqB;AACtD,SAAS,wBAAwB,sCAAsC;AAGvE,MAAM,qBAAqB,CAAC,EAAE,KAAK,KAAK,IAAI,MAAwC;AAClF,QAAM,aAAa,cAAc,KAAK,KAAK,GAAG;AAC9C,SAAO,GAAG,UAAU;AACtB;AAEA,MAAM,YAAY;AAAA,EAChB,SAAS;AAAA,EACT,YAAY;AACd;AAEA,MAAM,kBAAkB,CAAC;AAAA,EACvB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW,UAAU;AAAA,EACrB;AAAA,EACA;AACF,MAKE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,uBAAuB;AAAA,IAClC;AAAA,IACA;AAAA,IAEC,mBAAS,EAAE,KAAK,KAAK,IAAI,CAAC;AAAA;AAC7B;AAGF,IAAO,0BAAQ;",
6
6
  "names": []
7
7
  }