@pega/cosmos-react-core 2.0.0-dev.9.4 → 2.0.0-rc.4

package/lib/components/Slider/Slider.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.types.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,CAAC,OAAO,WAAW,WAAY,SAAQ,SAAS;IACpD;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAClC;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"Slider.types.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,CAAC,OAAO,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IACpE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAClC;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf"}

package/lib/components/Slider/Slider.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.types.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"","sourcesContent":["import { BaseProps } from '../../types';\nimport { FormControlProps } from '../FormControl';\n\nexport default interface SliderProps extends BaseProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value: number;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Will automatically focus the thumb on render if true */\n  autoFocus?: boolean;\n  /**\n   * Minimum value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Maximum value.\n   * @default 100\n   */\n  max?: number;\n  /**\n   * Step value.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Slider orientation.\n   * @default 'horizontal'\n   */\n  orientation?: 'vertical' | 'horizontal';\n  /**\n   * Show slider color progress bar.\n   * @default false\n   */\n  showProgress?: boolean;\n  /**\n   * Show current value.\n   * @default false\n   */\n  preview?: boolean;\n  /**\n   * Display input to provide value.\n   * @default true\n   */\n  showInput?: boolean;\n  /**\n   * Display defined ticks.\n   */\n  ticks?: { [key: number]: string };\n  /**\n   * On change callback.\n   * @param value new input value\n   */\n  onChange: (value: number) => void;\n  /**\n   * Called when the user starts dragging the slider thumb.\n   */\n  onDragStart?: () => void;\n  /**\n   * Called when the user stops dragging the slider thumb.\n   */\n  onDragEnd?: () => void;\n}\n\nexport interface TickDefinition {\n  start: number;\n  end: number;\n  value: number;\n  label: string;\n}\n"]}
+{"version":3,"file":"Slider.types.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"","sourcesContent":["import { BaseProps, NoChildrenProp } from '../../types';\nimport { FormControlProps } from '../FormControl';\n\nexport default interface SliderProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value: number;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Will automatically focus the thumb on render if true */\n  autoFocus?: boolean;\n  /**\n   * Minimum value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Maximum value.\n   * @default 100\n   */\n  max?: number;\n  /**\n   * Step value.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Slider orientation.\n   * @default 'horizontal'\n   */\n  orientation?: 'vertical' | 'horizontal';\n  /**\n   * Show slider color progress bar.\n   * @default false\n   */\n  showProgress?: boolean;\n  /**\n   * Show current value.\n   * @default false\n   */\n  preview?: boolean;\n  /**\n   * Display input to provide value.\n   * @default true\n   */\n  showInput?: boolean;\n  /**\n   * Display defined ticks.\n   */\n  ticks?: { [key: number]: string };\n  /**\n   * On change callback.\n   * @param value new input value\n   */\n  onChange: (value: number) => void;\n  /**\n   * Called when the user starts dragging the slider thumb.\n   */\n  onDragStart?: () => void;\n  /**\n   * Called when the user stops dragging the slider thumb.\n   */\n  onDragEnd?: () => void;\n}\n\nexport interface TickDefinition {\n  start: number;\n  end: number;\n  value: number;\n  label: string;\n}\n"]}

package/lib/components/Slider/SliderTicks.d.ts

@@ -4,6 +4,7 @@ interface SliderTicksProps {
     ticks: NonNullable<SliderProps['ticks']>;
     min: number;
     max: number;
+    step: number;
     orientation: NonNullable<SliderProps['orientation']>;
     onClick: (value: number) => void;
 }

package/lib/components/Slider/SliderTicks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SliderTicks.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/SliderTicks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAKpC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAGzC,UAAU,gBAAgB;IACxB,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;IACzC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IACrD,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAuDrC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SliderTicks.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/SliderTicks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAKpC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAGzC,UAAU,gBAAgB;IACxB,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;IACzC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;IACrD,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA2DrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Slider/SliderTicks.js

@@ -3,23 +3,30 @@ import { useMemo } from 'react';
 import Grid from '../Grid';
 import { StyledTickButton, StyledTickItem, StyledTicksContainer } from './Slider.styles';
 import { calculateTicksRegions } from './utils';
-const SliderTicks = ({ ticks, min, max, orientation, onClick }) => {
-    const cellsCount = max - min + 1;
-    const ticksDefinitions = useMemo(() => calculateTicksRegions(ticks, min, max, orientation === 'horizontal'), [ticks, min, max, orientation]);
-    return (_jsx(Grid, Object.assign({ container: orientation === 'horizontal'
-            ? {
-                cols: `minmax(0, 0.5fr) repeat(${cellsCount - 2}, minmax(0, 1fr)) minmax(0, 0.5fr)`
-            }
-            : { rows: `repeat(${cellsCount}, 1em)`, alignContent: 'between' }, as: StyledTicksContainer }, { children: ticksDefinitions.map(tick => {
-            var _a;
-            return (_jsx(StyledTickItem, Object.assign({ item: orientation === 'horizontal'
+const SliderTicks = ({ ticks, min, max, step, orientation, onClick }) => {
+    const cellsCount = (max - min) / step + 1;
+    const ticksDefinitions = useMemo(() => calculateTicksRegions(ticks, min, max, step, orientation === 'horizontal'), [ticks, min, max, orientation]);
+    let repeatCells;
+    let gridContainerConfig;
+    if (orientation === 'horizontal') {
+        repeatCells = cellsCount > 2 ? `repeat(${cellsCount - 2}, minmax(0, 1fr))` : '';
+        gridContainerConfig = {
+            cols: `minmax(0, 0.5fr) ${repeatCells} minmax(0, 0.5fr)`
+        };
+    }
+    else {
+        repeatCells = `repeat(${cellsCount}, 1em)`;
+        gridContainerConfig = { rows: repeatCells, alignContent: 'between' };
+    }
+    return (_jsx(Grid, { container: gridContainerConfig, as: StyledTicksContainer, children: ticksDefinitions.map(tick => {
+            return (_jsx(StyledTickItem, { item: orientation === 'horizontal'
                     ? {
                         colStartEnd: `${tick.start} / ${tick.end}`
                     }
                     : {
                         rowStartEnd: `${-tick.start} / ${-tick.end}`
-                    }, orientation: orientation, lowerBoundaryItem: tick.value === min, upperBoundaryItem: tick.value === max }, { children: _jsx(StyledTickButton, Object.assign({ tabIndex: -1, role: 'button', "aria-hidden": true, onClick: () => onClick(tick.value) }, { children: tick.label }), void 0) }), (_a = tick.label) !== null && _a !== void 0 ? _a : tick.value));
-        }) }), void 0));
+                    }, orientation: orientation, lowerBoundaryItem: tick.value === min, upperBoundaryItem: tick.value === max, children: _jsx(StyledTickButton, { tabIndex: -1, role: 'button', "aria-hidden": true, onClick: () => onClick(tick.value), children: tick.label }, void 0) }, tick.label ?? tick.value));
+        }) }, void 0));
 };
 export default SliderTicks;
 //# sourceMappingURL=SliderTicks.js.map

package/lib/components/Slider/SliderTicks.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderTicks.js","sourceRoot":"","sources":["../../../src/components/Slider/SliderTicks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,OAAO,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEzF,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAUhD,MAAM,WAAW,GAAyB,CAAC,EACzC,KAAK,EACL,GAAG,EACH,GAAG,EACH,WAAW,EACX,OAAO,EACU,EAAE,EAAE;IACrB,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC;IAEjC,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,KAAK,YAAY,CAAC,EAC1E,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,CAAC,CAC/B,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,kBACH,SAAS,EACP,WAAW,KAAK,YAAY;YAC1B,CAAC,CAAC;gBACE,IAAI,EAAE,2BAA2B,UAAU,GAAG,CAAC,oCAAoC;aACpF;YACH,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,UAAU,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EAErE,EAAE,EAAE,oBAAoB,gBAEvB,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;;YAC3B,OAAO,CACL,KAAC,cAAc,kBACb,IAAI,EACF,WAAW,KAAK,YAAY;oBAC1B,CAAC,CAAC;wBACE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,MAAM,IAAI,CAAC,GAAG,EAAE;qBAC3C;oBACH,CAAC,CAAC;wBACE,WAAW,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE;qBAC7C,EAGP,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,GAAG,EACrC,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,GAAG,gBAErC,KAAC,gBAAgB,kBACf,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,uBAEb,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,gBAEjC,IAAI,CAAC,KAAK,YACM,KAZd,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,KAAK,CAad,CAClB,CAAC;QACJ,CAAC,CAAC,YACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC, useMemo } from 'react';\n\nimport Grid from '../Grid';\n\nimport { StyledTickButton, StyledTickItem, StyledTicksContainer } from './Slider.styles';\nimport SliderProps from './Slider.types';\nimport { calculateTicksRegions } from './utils';\n\ninterface SliderTicksProps {\n  ticks: NonNullable<SliderProps['ticks']>;\n  min: number;\n  max: number;\n  orientation: NonNullable<SliderProps['orientation']>;\n  onClick: (value: number) => void;\n}\n\nconst SliderTicks: FC<SliderTicksProps> = ({\n  ticks,\n  min,\n  max,\n  orientation,\n  onClick\n}: SliderTicksProps) => {\n  const cellsCount = max - min + 1;\n\n  const ticksDefinitions = useMemo(\n    () => calculateTicksRegions(ticks, min, max, orientation === 'horizontal'),\n    [ticks, min, max, orientation]\n  );\n\n  return (\n    <Grid\n      container={\n        orientation === 'horizontal'\n          ? {\n              cols: `minmax(0, 0.5fr) repeat(${cellsCount - 2}, minmax(0, 1fr)) minmax(0, 0.5fr)`\n            }\n          : { rows: `repeat(${cellsCount}, 1em)`, alignContent: 'between' }\n      }\n      as={StyledTicksContainer}\n    >\n      {ticksDefinitions.map(tick => {\n        return (\n          <StyledTickItem\n            item={\n              orientation === 'horizontal'\n                ? {\n                    colStartEnd: `${tick.start} / ${tick.end}`\n                  }\n                : {\n                    rowStartEnd: `${-tick.start} / ${-tick.end}`\n                  }\n            }\n            key={tick.label ?? tick.value}\n            orientation={orientation}\n            lowerBoundaryItem={tick.value === min}\n            upperBoundaryItem={tick.value === max}\n          >\n            <StyledTickButton\n              tabIndex={-1}\n              role='button'\n              aria-hidden\n              onClick={() => onClick(tick.value)}\n            >\n              {tick.label}\n            </StyledTickButton>\n          </StyledTickItem>\n        );\n      })}\n    </Grid>\n  );\n};\n\nexport default SliderTicks;\n"]}
+{"version":3,"file":"SliderTicks.js","sourceRoot":"","sources":["../../../src/components/Slider/SliderTicks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,OAAO,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,IAA4B,MAAM,SAAS,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEzF,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAWhD,MAAM,WAAW,GAAyB,CAAC,EACzC,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,WAAW,EACX,OAAO,EACU,EAAE,EAAE;IACrB,MAAM,UAAU,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;IAE1C,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,KAAK,YAAY,CAAC,EAChF,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,CAAC,CAC/B,CAAC;IAEF,IAAI,WAAmB,CAAC;IACxB,IAAI,mBAAuC,CAAC;IAC5C,IAAI,WAAW,KAAK,YAAY,EAAE;QAChC,WAAW,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,UAAU,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;QAChF,mBAAmB,GAAG;YACpB,IAAI,EAAE,oBAAoB,WAAW,mBAAmB;SACzD,CAAC;KACH;SAAM;QACL,WAAW,GAAG,UAAU,UAAU,QAAQ,CAAC;QAC3C,mBAAmB,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;KACtE;IAED,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB,EAAE,EAAE,EAAE,oBAAoB,YAC3D,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC3B,OAAO,CACL,KAAC,cAAc,IACb,IAAI,EACF,WAAW,KAAK,YAAY;oBAC1B,CAAC,CAAC;wBACE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,MAAM,IAAI,CAAC,GAAG,EAAE;qBAC3C;oBACH,CAAC,CAAC;wBACE,WAAW,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE;qBAC7C,EAGP,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,GAAG,EACrC,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,GAAG,YAErC,KAAC,gBAAgB,IACf,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,uBAEb,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,YAEjC,IAAI,CAAC,KAAK,WACM,IAZd,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAad,CAClB,CAAC;QACJ,CAAC,CAAC,WACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC, useMemo } from 'react';\n\nimport Grid, { GridContainerProps } from '../Grid';\n\nimport { StyledTickButton, StyledTickItem, StyledTicksContainer } from './Slider.styles';\nimport SliderProps from './Slider.types';\nimport { calculateTicksRegions } from './utils';\n\ninterface SliderTicksProps {\n  ticks: NonNullable<SliderProps['ticks']>;\n  min: number;\n  max: number;\n  step: number;\n  orientation: NonNullable<SliderProps['orientation']>;\n  onClick: (value: number) => void;\n}\n\nconst SliderTicks: FC<SliderTicksProps> = ({\n  ticks,\n  min,\n  max,\n  step,\n  orientation,\n  onClick\n}: SliderTicksProps) => {\n  const cellsCount = (max - min) / step + 1;\n\n  const ticksDefinitions = useMemo(\n    () => calculateTicksRegions(ticks, min, max, step, orientation === 'horizontal'),\n    [ticks, min, max, orientation]\n  );\n\n  let repeatCells: string;\n  let gridContainerConfig: GridContainerProps;\n  if (orientation === 'horizontal') {\n    repeatCells = cellsCount > 2 ? `repeat(${cellsCount - 2}, minmax(0, 1fr))` : '';\n    gridContainerConfig = {\n      cols: `minmax(0, 0.5fr) ${repeatCells} minmax(0, 0.5fr)`\n    };\n  } else {\n    repeatCells = `repeat(${cellsCount}, 1em)`;\n    gridContainerConfig = { rows: repeatCells, alignContent: 'between' };\n  }\n\n  return (\n    <Grid container={gridContainerConfig} as={StyledTicksContainer}>\n      {ticksDefinitions.map(tick => {\n        return (\n          <StyledTickItem\n            item={\n              orientation === 'horizontal'\n                ? {\n                    colStartEnd: `${tick.start} / ${tick.end}`\n                  }\n                : {\n                    rowStartEnd: `${-tick.start} / ${-tick.end}`\n                  }\n            }\n            key={tick.label ?? tick.value}\n            orientation={orientation}\n            lowerBoundaryItem={tick.value === min}\n            upperBoundaryItem={tick.value === max}\n          >\n            <StyledTickButton\n              tabIndex={-1}\n              role='button'\n              aria-hidden\n              onClick={() => onClick(tick.value)}\n            >\n              {tick.label}\n            </StyledTickButton>\n          </StyledTickItem>\n        );\n      })}\n    </Grid>\n  );\n};\n\nexport default SliderTicks;\n"]}

package/lib/components/Slider/utils.d.ts

@@ -1,14 +1,4 @@
 import SliderProps, { TickDefinition } from './Slider.types';
-/**
- * Generator that returns triple of subsequent values in the given array.
- * @param array source array
- * @returns triple of previous, current and next value on every call
- */
-export declare function triple<T>(array: T[]): Generator<{
-    prev?: T;
-    current: T;
-    next?: T;
-}, undefined, unknown>;
 /**
  * The function accepts ticks map and produces an array of tick definitions. The definition
  * consist of tick value, its label and starting and ending index.
@@ -22,10 +12,11 @@ export declare function triple<T>(array: T[]): Generator<{
  * @param ticksMap ticks configuration to calculate ticks definition from
  * @param min minimum allowed value in the range
  * @param max maximum allowed value in the range
+ * @param step step in the range
  * @param stretch flag indicating the regions should be stretched
  * @returns ticks definitions array
  */
-export declare const calculateTicksRegions: (ticksMap: NonNullable<SliderProps['ticks']>, min: number, max: number, stretch: boolean) => TickDefinition[];
+export declare const calculateTicksRegions: (ticksMap: NonNullable<SliderProps['ticks']>, min: number, max: number, step: number, stretch: boolean) => TickDefinition[];
 /**
  * Function for given input returns nearest discrete value from a series {min, max}
  * @param input the value to look for nearest value
@@ -35,4 +26,12 @@ export declare const calculateTicksRegions: (ticksMap: NonNullable<SliderProps['
  * @returns nearest value as a number
  */
 export declare const getNearestValue: (input: number, min: number, max: number, step: number) => number;
+/**
+ * Function calculates minimum length of the field where any value from the set of possible values will fit in.
+ * @param min minimum value
+ * @param max maximum value
+ * @param step step in range
+ * @returns minimum number of characters the field needs
+ */
+export declare const calculateValueLength: (min: number, max: number, step: number) => number;
 //# sourceMappingURL=utils.d.ts.map

package/lib/components/Slider/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/utils.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,EAAE,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAE7D;;;;GAIG;AACH,wBAAiB,MAAM,CAAC,CAAC,EACvB,KAAK,EAAE,CAAC,EAAE,GACT,SAAS,CAAC;IAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAAC,OAAO,EAAE,CAAC,CAAC;IAAC,IAAI,CAAC,EAAE,CAAC,CAAA;CAAE,EAAE,SAAS,EAAE,OAAO,CAAC,CAKnE;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,qBAAqB,aACtB,YAAY,WAAW,CAAC,OAAO,CAAC,CAAC,OACtC,MAAM,OACN,MAAM,WACF,OAAO,KACf,cAAc,EAkDhB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,UAAW,MAAM,OAAO,MAAM,OAAO,MAAM,QAAQ,MAAM,KAAG,MAKvF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/utils.ts"],"names":[],"mappings":"AAEA,OAAO,WAAW,EAAE,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAE7D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,qBAAqB,aACtB,YAAY,WAAW,CAAC,OAAO,CAAC,CAAC,OACtC,MAAM,OACN,MAAM,QACL,MAAM,WACH,OAAO,KACf,cAAc,EAkDhB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,UAAW,MAAM,OAAO,MAAM,OAAO,MAAM,QAAQ,MAAM,KAAG,MAKvF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,QAAS,MAAM,OAAO,MAAM,QAAQ,MAAM,KAAG,MAW7E,CAAC"}

package/lib/components/Slider/utils.js

@@ -1,14 +1,4 @@
-/**
- * Generator that returns triple of subsequent values in the given array.
- * @param array source array
- * @returns triple of previous, current and next value on every call
- */
-export function* triple(array) {
-    for (let i = 0; i < array.length; i += 1) {
-        yield { prev: array[i - 1], current: array[i], next: array[i + 1] };
-    }
-    return undefined;
-}
+import { triple } from '../../utils';
 /**
  * The function accepts ticks map and produces an array of tick definitions. The definition
  * consist of tick value, its label and starting and ending index.
@@ -22,17 +12,17 @@ export function* triple(array) {
  * @param ticksMap ticks configuration to calculate ticks definition from
  * @param min minimum allowed value in the range
  * @param max maximum allowed value in the range
+ * @param step step in the range
  * @param stretch flag indicating the regions should be stretched
  * @returns ticks definitions array
  */
-export const calculateTicksRegions = (ticksMap, min, max, stretch) => {
-    var _a, _b;
+export const calculateTicksRegions = (ticksMap, min, max, step, stretch) => {
     // calculate initial positions for every tick, the tick segment has the width = 1
     const defs = Object.entries(ticksMap)
         .filter(([tickValue]) => Number(tickValue) >= min && Number(tickValue) <= max)
         .sort(([tickValue1], [tickValue2]) => Number(tickValue1) - Number(tickValue2))
         .map(([tickValue, tickLabel]) => {
-        const cell = Number(tickValue) - min + 1; // shift by 'min' value and increment to always start from 1
+        const cell = (Number(tickValue) - min) / step + 1; // shift by 'min' value, divide by a step and increment, as index starts from 1
         const cellStart = cell;
         const cellEnd = cellStart + 1;
         return {
@@ -44,7 +34,7 @@ export const calculateTicksRegions = (ticksMap, min, max, stretch) => {
     });
     if (!stretch)
         return defs;
-    const maxCell = max - min + 2;
+    const maxCell = (max - min) / step + 2;
     const result = [];
     // extend the tick segments one by one
     // eslint-disable-next-line no-restricted-syntax
@@ -61,7 +51,7 @@ export const calculateTicksRegions = (ticksMap, min, max, stretch) => {
         }
         else {
             // calculate length between current and prev / next tick and choose the smaller value
-            const length = Math.min(start - ((_a = prev === null || prev === void 0 ? void 0 : prev.end) !== null && _a !== void 0 ? _a : 1), ((_b = next === null || next === void 0 ? void 0 : next.start) !== null && _b !== void 0 ? _b : maxCell) - end);
+            const length = Math.min(start - (prev?.end ?? 1), (next?.start ?? maxCell) - end);
             // expand the segment to the left
             start -= Math.floor(length / 2);
             // expand to the right
@@ -85,9 +75,25 @@ export const calculateTicksRegions = (ticksMap, min, max, stretch) => {
  * @returns nearest value as a number
  */
 export const getNearestValue = (input, min, max, step) => {
-    var _a;
     const output = Math.round(input / step) * step;
-    const decimals = (_a = step.toString().split('.')[1]) === null || _a === void 0 ? void 0 : _a.length;
+    const decimals = step.toString().split('.')[1]?.length;
     return Number(output.toFixed(decimals || 0));
 };
+/**
+ * Function calculates minimum length of the field where any value from the set of possible values will fit in.
+ * @param min minimum value
+ * @param max maximum value
+ * @param step step in range
+ * @returns minimum number of characters the field needs
+ */
+export const calculateValueLength = (min, max, step) => {
+    const [minIntegerPart, minDecimalPart = ''] = min.toString().split('.');
+    const [maxIntegerPart, maxDecimalPart = ''] = max.toString().split('.');
+    const stepDecimalPart = step.toString().split('.')[1] ?? '';
+    return (Math.max(minIntegerPart.length, maxIntegerPart.length) +
+        Math.max(maxDecimalPart.length, minDecimalPart.length, stepDecimalPart.length) +
+        (maxDecimalPart || minDecimalPart || stepDecimalPart
+            ? 1 // if there's decimal part, reserve a space for the separator
+            : 0));
+};
 //# sourceMappingURL=utils.js.map

package/lib/components/Slider/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Slider/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import SliderProps, { TickDefinition } from './Slider.types';\n\n/**\n * Generator that returns triple of subsequent values in the given array.\n * @param array source array\n * @returns triple of previous, current and next value on every call\n */\nexport function* triple<T>(\n  array: T[]\n): Generator<{ prev?: T; current: T; next?: T }, undefined, unknown> {\n  for (let i = 0; i < array.length; i += 1) {\n    yield { prev: array[i - 1], current: array[i], next: array[i + 1] };\n  }\n  return undefined;\n}\n\n/**\n * The function accepts ticks map and produces an array of tick definitions. The definition\n * consist of tick value, its label and starting and ending index.\n * Function can stretch the ticks regions to allow more text to fit in the cell.\n * To calculate the stretched regions: {min} and {max} values produce the line which is then\n * divided to equal segments. These segments have indices that correspond to CSS grid cells.\n * Then the indices are optimized in the way that every segment is stretched by the half of length\n * between current tick's index and previous tick's index or next tick's index whichever is smaller.\n * |______________|__________|________________________|\n * 1------^  ^----2----^^----3----^      ^------------4\n * @param ticksMap ticks configuration to calculate ticks definition from\n * @param min minimum allowed value in the range\n * @param max maximum allowed value in the range\n * @param stretch flag indicating the regions should be stretched\n * @returns ticks definitions array\n */\nexport const calculateTicksRegions = (\n  ticksMap: NonNullable<SliderProps['ticks']>,\n  min: number,\n  max: number,\n  stretch: boolean\n): TickDefinition[] => {\n  // calculate initial positions for every tick, the tick segment has the width = 1\n  const defs = Object.entries(ticksMap)\n    .filter(([tickValue]) => Number(tickValue) >= min && Number(tickValue) <= max)\n    .sort(([tickValue1], [tickValue2]) => Number(tickValue1) - Number(tickValue2))\n    .map(([tickValue, tickLabel]) => {\n      const cell = Number(tickValue) - min + 1; // shift by 'min' value and increment to always start from 1\n      const cellStart = cell;\n      const cellEnd = cellStart + 1;\n      return {\n        start: cellStart,\n        end: cellEnd,\n        value: Number(tickValue),\n        label: tickLabel\n      };\n    });\n\n  if (!stretch) return defs;\n\n  const maxCell = max - min + 2;\n\n  const result = [];\n  // extend the tick segments one by one\n  // eslint-disable-next-line no-restricted-syntax\n  for (const { prev, current, next } of triple(defs)) {\n    let start = current.start;\n    let end = current.end;\n    if (start === 1) {\n      // if the tick is marginal (starting) - expand to the 'right'\n      end = next ? Math.floor((next.start - end) / 2) + end : maxCell;\n    } else if (end === maxCell) {\n      // if the tick is marginal (ending) - expand to the 'left'\n      start = prev ? Math.floor((start - prev.end) / 2) + prev.end : 1;\n    } else {\n      // calculate length between current and prev / next tick and choose the smaller value\n      const length = Math.min(start - (prev?.end ?? 1), (next?.start ?? maxCell) - end);\n      // expand the segment to the left\n      start -= Math.floor(length / 2);\n      // expand to the right\n      end += Math.floor(length / 2);\n    }\n    result.push({\n      start,\n      end,\n      value: current.value,\n      label: current.label\n    });\n  }\n\n  return result;\n};\n\n/**\n * Function for given input returns nearest discrete value from a series {min, max}\n * @param input the value to look for nearest value\n * @param step step value determining discrete series\n * @param min minimal value in the series\n * @param max maximum value in the series\n * @returns nearest value as a number\n */\nexport const getNearestValue = (input: number, min: number, max: number, step: number): number => {\n  const output = Math.round(input / step) * step;\n\n  const decimals = step.toString().split('.')[1]?.length;\n  return Number(output.toFixed(decimals || 0));\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Slider/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { triple } from '../../utils';\n\nimport SliderProps, { TickDefinition } from './Slider.types';\n\n/**\n * The function accepts ticks map and produces an array of tick definitions. The definition\n * consist of tick value, its label and starting and ending index.\n * Function can stretch the ticks regions to allow more text to fit in the cell.\n * To calculate the stretched regions: {min} and {max} values produce the line which is then\n * divided to equal segments. These segments have indices that correspond to CSS grid cells.\n * Then the indices are optimized in the way that every segment is stretched by the half of length\n * between current tick's index and previous tick's index or next tick's index whichever is smaller.\n * |______________|__________|________________________|\n * 1------^  ^----2----^^----3----^      ^------------4\n * @param ticksMap ticks configuration to calculate ticks definition from\n * @param min minimum allowed value in the range\n * @param max maximum allowed value in the range\n * @param step step in the range\n * @param stretch flag indicating the regions should be stretched\n * @returns ticks definitions array\n */\nexport const calculateTicksRegions = (\n  ticksMap: NonNullable<SliderProps['ticks']>,\n  min: number,\n  max: number,\n  step: number,\n  stretch: boolean\n): TickDefinition[] => {\n  // calculate initial positions for every tick, the tick segment has the width = 1\n  const defs = Object.entries(ticksMap)\n    .filter(([tickValue]) => Number(tickValue) >= min && Number(tickValue) <= max)\n    .sort(([tickValue1], [tickValue2]) => Number(tickValue1) - Number(tickValue2))\n    .map(([tickValue, tickLabel]) => {\n      const cell = (Number(tickValue) - min) / step + 1; // shift by 'min' value, divide by a step and increment, as index starts from 1\n      const cellStart = cell;\n      const cellEnd = cellStart + 1;\n      return {\n        start: cellStart,\n        end: cellEnd,\n        value: Number(tickValue),\n        label: tickLabel\n      };\n    });\n\n  if (!stretch) return defs;\n\n  const maxCell = (max - min) / step + 2;\n\n  const result = [];\n  // extend the tick segments one by one\n  // eslint-disable-next-line no-restricted-syntax\n  for (const { prev, current, next } of triple(defs)) {\n    let start = current.start;\n    let end = current.end;\n    if (start === 1) {\n      // if the tick is marginal (starting) - expand to the 'right'\n      end = next ? Math.floor((next.start - end) / 2) + end : maxCell;\n    } else if (end === maxCell) {\n      // if the tick is marginal (ending) - expand to the 'left'\n      start = prev ? Math.floor((start - prev.end) / 2) + prev.end : 1;\n    } else {\n      // calculate length between current and prev / next tick and choose the smaller value\n      const length = Math.min(start - (prev?.end ?? 1), (next?.start ?? maxCell) - end);\n      // expand the segment to the left\n      start -= Math.floor(length / 2);\n      // expand to the right\n      end += Math.floor(length / 2);\n    }\n    result.push({\n      start,\n      end,\n      value: current.value,\n      label: current.label\n    });\n  }\n\n  return result;\n};\n\n/**\n * Function for given input returns nearest discrete value from a series {min, max}\n * @param input the value to look for nearest value\n * @param step step value determining discrete series\n * @param min minimal value in the series\n * @param max maximum value in the series\n * @returns nearest value as a number\n */\nexport const getNearestValue = (input: number, min: number, max: number, step: number): number => {\n  const output = Math.round(input / step) * step;\n\n  const decimals = step.toString().split('.')[1]?.length;\n  return Number(output.toFixed(decimals || 0));\n};\n\n/**\n * Function calculates minimum length of the field where any value from the set of possible values will fit in.\n * @param min minimum value\n * @param max maximum value\n * @param step step in range\n * @returns minimum number of characters the field needs\n */\nexport const calculateValueLength = (min: number, max: number, step: number): number => {\n  const [minIntegerPart, minDecimalPart = ''] = min.toString().split('.');\n  const [maxIntegerPart, maxDecimalPart = ''] = max.toString().split('.');\n  const stepDecimalPart = step.toString().split('.')[1] ?? '';\n  return (\n    Math.max(minIntegerPart.length, maxIntegerPart.length) +\n    Math.max(maxDecimalPart.length, minDecimalPart.length, stepDecimalPart.length) +\n    (maxDecimalPart || minDecimalPart || stepDecimalPart\n      ? 1 // if there's decimal part, reserve a space for the separator\n      : 0)\n  );\n};\n"]}

package/lib/components/SummaryItem/SummaryItem.d.ts

@@ -1,9 +1,9 @@
-import { FunctionComponent, ReactNode, Ref } from 'react';
+import { FunctionComponent, ReactNode, Ref, ElementType } from 'react';
 import { GridContainerProps } from '../Grid';
-import { ForwardProps } from '../../types';
-export interface SummaryItemProps {
+import { ForwardProps, NoChildrenProp } from '../../types';
+export interface SummaryItemProps extends NoChildrenProp {
     /** Region for the primary information. */
-    primary: ReactNode;
+    primary: NonNullable<ReactNode>;
     /** Region for displaying supporting metadata. */
     secondary?: ReactNode;
     /** Region for an Avatar, Icon, or other supporting visual. */
@@ -17,7 +17,7 @@ export interface SummaryItemProps {
      */
     overflowStrategy?: 'wrap' | 'ellipsis';
     /** HTML tag to render the SummaryItem's element with. */
-    as?: string;
+    as?: ElementType;
     /** Ref for the SummaryItem. */
     ref?: Ref<HTMLElement>;
 }

package/lib/components/SummaryItem/SummaryItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAA+B,MAAM,OAAO,CAAC;AAGvF,OAAa,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,MAAM,WAAW,gBAAgB;IAC/B,0CAA0C;IAC1C,OAAO,EAAE,SAAS,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACvC,yDAAyD;IACzD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,+BAA+B;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,yGAOxB,CAAC;AAIF,eAAO,MAAM,aAAa;;uBAEL,gBAAgB,CAAC,kBAAkB,CAAC;SAiBvD,CAAC;AAIH,eAAO,MAAM,eAAe;uBACP,gBAAgB,CAAC,kBAAkB,CAAC;SAYvD,CAAC;AAEH,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAgB9C,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAuDnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAA+B,WAAW,EAAE,MAAM,OAAO,CAAC;AAGpG,OAAa,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG3D,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,0CAA0C;IAC1C,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,iDAAiD;IACjD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACvC,yDAAyD;IACzD,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,yGAOxB,CAAC;AAIF,eAAO,MAAM,aAAa;;uBAEL,gBAAgB,CAAC,kBAAkB,CAAC;SAkBvD,CAAC;AAIH,eAAO,MAAM,eAAe;uBACP,gBAAgB,CAAC,kBAAkB,CAAC;SAYvD,CAAC;AAEH,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAgB9C,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAuDnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/SummaryItem/SummaryItem.js

@@ -17,6 +17,7 @@ export const StyledPrimary = styled(Grid)(({ theme, isString, overflowStrategy }
     return css `
     ${overflowStrategy === 'ellipsis'
         ? css `
+          white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
         `
@@ -54,15 +55,12 @@ const getAreas = ({ secondary, visual, actions }) => {
     return `"${visual ? 'visual ' : ''}primary${actions ? ' actions' : ''}"${secondary ? `\n"${visual ? 'visual ' : ''}secondary${actions ? ' actions' : ''}"` : ''}`;
 };
 const SummaryItem = forwardRef(({ visual, primary, secondary, actions, container, overflowStrategy = 'wrap', as, ...restProps }, ref) => {
-    return (_jsxs(Grid, Object.assign({}, restProps, { ref: ref, container: {
+    return (_jsxs(Grid, { ...restProps, ref: ref, container: {
             cols: getColumns({ visual, actions }),
             colGap: 2,
             areas: getAreas({ secondary, visual, actions }),
             ...container
-        }, as: StyledSummaryItem, forwardedAs: as }, { children: [visual && (_jsx(Grid, Object.assign({ as: StyledVisual, item: { area: 'visual', alignSelf: 'center' } }, { children: visual }), void 0)),
-            _jsx(StyledPrimary, Object.assign({ item: { area: 'primary', alignSelf: secondary ? 'end' : 'center' }, isString: typeof primary === 'string', overflowStrategy: overflowStrategy }, { children: primary }), void 0),
-            secondary && (_jsx(StyledSecondary, Object.assign({ item: { area: 'secondary', alignSelf: 'start' }, overflowStrategy: overflowStrategy }, { children: secondary }), void 0)),
-            actions && (_jsx(Grid, Object.assign({ as: StyledSummaryItemActions, item: { area: 'actions', alignSelf: 'center' } }, { children: actions }), void 0))] }), void 0));
+        }, as: StyledSummaryItem, forwardedAs: as, children: [visual && (_jsx(Grid, { as: StyledVisual, item: { area: 'visual', alignSelf: 'center' }, children: visual }, void 0)), _jsx(StyledPrimary, { item: { area: 'primary', alignSelf: secondary ? 'end' : 'center' }, isString: typeof primary === 'string', overflowStrategy: overflowStrategy, children: primary }, void 0), secondary && (_jsx(StyledSecondary, { item: { area: 'secondary', alignSelf: 'start' }, overflowStrategy: overflowStrategy, children: secondary }, void 0)), actions && (_jsx(Grid, { as: StyledSummaryItemActions, item: { area: 'actions', alignSelf: 'center' }, children: actions }, void 0))] }, void 0));
 });
 export default SummaryItem;
 //# sourceMappingURL=SummaryItem.js.map

package/lib/components/SummaryItem/SummaryItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryItem.js","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, Ref, forwardRef, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Grid, { GridContainerProps } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport { StyledProgressRing } from '../Progress';\n\nexport interface SummaryItemProps {\n  /** Region for the primary information. */\n  primary: ReactNode;\n  /** Region for displaying supporting metadata. */\n  secondary?: ReactNode;\n  /** Region for an Avatar, Icon, or other supporting visual. */\n  visual?: ReactNode;\n  /** Region for adding Actions, Buttons, or Links. */\n  actions?: ReactNode;\n  /* Override the default Grid container props on SummaryItem. */\n  container?: GridContainerProps;\n  /**\n   * Determines how the text within primary and secondary fields should handle overflow.\n   * @default \"wrap\"\n   */\n  overflowStrategy?: 'wrap' | 'ellipsis';\n  /** HTML tag to render the SummaryItem's element with. */\n  as?: string;\n  /** Ref for the SummaryItem. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport const StyledVisual = styled.div`\n  > ${StyledProgressRing}, img {\n    display: block;\n    object-fit: cover;\n    width: 2rem;\n    height: 2rem;\n  }\n`;\n\nStyledVisual.defaultProps = defaultThemeProp;\n\nexport const StyledPrimary = styled(Grid)<{\n  isString?: boolean;\n  overflowStrategy?: SummaryItemProps['overflowStrategy'];\n}>(({ theme, isString, overflowStrategy }) => {\n  return css`\n    ${overflowStrategy === 'ellipsis'\n      ? css`\n          overflow: hidden;\n          text-overflow: ellipsis;\n        `\n      : css`\n          word-break: break-word;\n        `}\n\n    ${isString &&\n    css`\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n    `}\n  `;\n});\n\nStyledPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledSecondary = styled(Grid)<{\n  overflowStrategy?: SummaryItemProps['overflowStrategy'];\n}>(({ overflowStrategy }) => {\n  return css`\n    ${overflowStrategy === 'ellipsis'\n      ? css`\n          overflow: hidden;\n          text-overflow: ellipsis;\n        `\n      : css`\n          word-break: break-word;\n        `}\n  `;\n});\n\nexport const StyledSummaryItemActions = styled.div`\n  white-space: nowrap;\n`;\n\nexport const StyledSummaryItem = styled.div``;\n\nconst getColumns = ({ visual, actions }: Pick<SummaryItemProps, 'visual' | 'actions'>) => {\n  return `${visual ? 'auto ' : ''}minmax(0, 1fr)${actions ? ' auto' : ''}`;\n};\n\nconst getAreas = ({\n  secondary,\n  visual,\n  actions\n}: Pick<SummaryItemProps, 'secondary' | 'visual' | 'actions'>) => {\n  return `\"${visual ? 'visual ' : ''}primary${actions ? ' actions' : ''}\"${\n    secondary ? `\\n\"${visual ? 'visual ' : ''}secondary${actions ? ' actions' : ''}\"` : ''\n  }`;\n};\n\nconst SummaryItem: FunctionComponent<SummaryItemProps & ForwardProps> = forwardRef(\n  (\n    {\n      visual,\n      primary,\n      secondary,\n      actions,\n      container,\n      overflowStrategy = 'wrap',\n      as,\n      ...restProps\n    }: PropsWithoutRef<SummaryItemProps>,\n    ref: SummaryItemProps['ref']\n  ) => {\n    return (\n      <Grid\n        {...restProps}\n        ref={ref}\n        container={{\n          cols: getColumns({ visual, actions }),\n          colGap: 2,\n          areas: getAreas({ secondary, visual, actions }),\n          ...container\n        }}\n        as={StyledSummaryItem}\n        forwardedAs={as}\n      >\n        {visual && (\n          <Grid as={StyledVisual} item={{ area: 'visual', alignSelf: 'center' }}>\n            {visual}\n          </Grid>\n        )}\n        <StyledPrimary\n          item={{ area: 'primary', alignSelf: secondary ? 'end' : 'center' }}\n          isString={typeof primary === 'string'}\n          overflowStrategy={overflowStrategy}\n        >\n          {primary}\n        </StyledPrimary>\n        {secondary && (\n          <StyledSecondary\n            item={{ area: 'secondary', alignSelf: 'start' }}\n            overflowStrategy={overflowStrategy}\n          >\n            {secondary}\n          </StyledSecondary>\n        )}\n        {actions && (\n          <Grid as={StyledSummaryItemActions} item={{ area: 'actions', alignSelf: 'center' }}>\n            {actions}\n          </Grid>\n        )}\n      </Grid>\n    );\n  }\n);\n\nexport default SummaryItem;\n"]}
+{"version":3,"file":"SummaryItem.js","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, Ref, forwardRef, PropsWithoutRef, ElementType } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Grid, { GridContainerProps } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps, NoChildrenProp } from '../../types';\nimport { StyledProgressRing } from '../Progress';\n\nexport interface SummaryItemProps extends NoChildrenProp {\n  /** Region for the primary information. */\n  primary: NonNullable<ReactNode>;\n  /** Region for displaying supporting metadata. */\n  secondary?: ReactNode;\n  /** Region for an Avatar, Icon, or other supporting visual. */\n  visual?: ReactNode;\n  /** Region for adding Actions, Buttons, or Links. */\n  actions?: ReactNode;\n  /* Override the default Grid container props on SummaryItem. */\n  container?: GridContainerProps;\n  /**\n   * Determines how the text within primary and secondary fields should handle overflow.\n   * @default \"wrap\"\n   */\n  overflowStrategy?: 'wrap' | 'ellipsis';\n  /** HTML tag to render the SummaryItem's element with. */\n  as?: ElementType;\n  /** Ref for the SummaryItem. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport const StyledVisual = styled.div`\n  > ${StyledProgressRing}, img {\n    display: block;\n    object-fit: cover;\n    width: 2rem;\n    height: 2rem;\n  }\n`;\n\nStyledVisual.defaultProps = defaultThemeProp;\n\nexport const StyledPrimary = styled(Grid)<{\n  isString?: boolean;\n  overflowStrategy?: SummaryItemProps['overflowStrategy'];\n}>(({ theme, isString, overflowStrategy }) => {\n  return css`\n    ${overflowStrategy === 'ellipsis'\n      ? css`\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n        `\n      : css`\n          word-break: break-word;\n        `}\n\n    ${isString &&\n    css`\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n    `}\n  `;\n});\n\nStyledPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledSecondary = styled(Grid)<{\n  overflowStrategy?: SummaryItemProps['overflowStrategy'];\n}>(({ overflowStrategy }) => {\n  return css`\n    ${overflowStrategy === 'ellipsis'\n      ? css`\n          overflow: hidden;\n          text-overflow: ellipsis;\n        `\n      : css`\n          word-break: break-word;\n        `}\n  `;\n});\n\nexport const StyledSummaryItemActions = styled.div`\n  white-space: nowrap;\n`;\n\nexport const StyledSummaryItem = styled.div``;\n\nconst getColumns = ({ visual, actions }: Pick<SummaryItemProps, 'visual' | 'actions'>) => {\n  return `${visual ? 'auto ' : ''}minmax(0, 1fr)${actions ? ' auto' : ''}`;\n};\n\nconst getAreas = ({\n  secondary,\n  visual,\n  actions\n}: Pick<SummaryItemProps, 'secondary' | 'visual' | 'actions'>) => {\n  return `\"${visual ? 'visual ' : ''}primary${actions ? ' actions' : ''}\"${\n    secondary ? `\\n\"${visual ? 'visual ' : ''}secondary${actions ? ' actions' : ''}\"` : ''\n  }`;\n};\n\nconst SummaryItem: FunctionComponent<SummaryItemProps & ForwardProps> = forwardRef(\n  (\n    {\n      visual,\n      primary,\n      secondary,\n      actions,\n      container,\n      overflowStrategy = 'wrap',\n      as,\n      ...restProps\n    }: PropsWithoutRef<SummaryItemProps>,\n    ref: SummaryItemProps['ref']\n  ) => {\n    return (\n      <Grid\n        {...restProps}\n        ref={ref}\n        container={{\n          cols: getColumns({ visual, actions }),\n          colGap: 2,\n          areas: getAreas({ secondary, visual, actions }),\n          ...container\n        }}\n        as={StyledSummaryItem}\n        forwardedAs={as}\n      >\n        {visual && (\n          <Grid as={StyledVisual} item={{ area: 'visual', alignSelf: 'center' }}>\n            {visual}\n          </Grid>\n        )}\n        <StyledPrimary\n          item={{ area: 'primary', alignSelf: secondary ? 'end' : 'center' }}\n          isString={typeof primary === 'string'}\n          overflowStrategy={overflowStrategy}\n        >\n          {primary}\n        </StyledPrimary>\n        {secondary && (\n          <StyledSecondary\n            item={{ area: 'secondary', alignSelf: 'start' }}\n            overflowStrategy={overflowStrategy}\n          >\n            {secondary}\n          </StyledSecondary>\n        )}\n        {actions && (\n          <Grid as={StyledSummaryItemActions} item={{ area: 'actions', alignSelf: 'center' }}>\n            {actions}\n          </Grid>\n        )}\n      </Grid>\n    );\n  }\n);\n\nexport default SummaryItem;\n"]}

package/lib/components/SummaryList/SummaryList.d.ts

@@ -1,7 +1,8 @@
 import { Ref, FC } from 'react';
-import { NoItemsProps } from '../NoItems';
+import { EmptyStateProps } from '../EmptyState';
 import { ForwardProps, NoChildrenProp, OmitStrict, Action } from '../../types';
 import SummaryItem, { SummaryItemProps } from '../SummaryItem';
+import type { ErrorStateProps } from '../ErrorState';
 export interface SummaryListProps extends NoChildrenProp {
     /** Name of the utility to be used as its heading along with associated actions and aria attributes. */
     name?: string;
@@ -18,7 +19,12 @@ export interface SummaryListProps extends NoChildrenProp {
     /** User click initiated callback for when to show view all modal. List lengths less than the count prop will display a "View all" button with this function is bound to. */
     onViewAll?: (callback: Function) => void;
     /** A simple message to display when there are no items. */
-    noItemsText?: NoItemsProps['message'];
+    noItemsText?: EmptyStateProps['message'];
+    /**
+     * Indicate an error occurred while acquiring data for the list.
+     * The default error state may be overridden with custom props.
+     */
+    error?: boolean | ErrorStateProps;
     /** Ref for the SummaryList's root element.  */
     ref?: Ref<HTMLElement>;
 }

package/lib/components/SummaryList/SummaryList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAStE,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAI/E,OAAO,WAAW,EAAE,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAI/D,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,uGAAuG;IACvG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wHAAwH;IACxH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,qKAAqK;IACrK,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,4KAA4K;IAC5K,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACzC,2DAA2D;IAC3D,WAAW,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IACtC,+CAA+C;IAC/C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,YAAY;IAC5F,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,oIAAoI;IACpI,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB;;SAapC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,WAS1C,CAAC;AAIF,eAAO,MAAM,gBAAgB,cAAe,KAAK,gBAAgB,EAAE,OAAO,CAAC,gBAe1E,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CA4DpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAStE,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAI/E,OAAO,WAAW,EAAE,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAI/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,uGAAuG;IACvG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wHAAwH;IACxH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,qKAAqK;IACrK,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,4KAA4K;IAC5K,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACzC,2DAA2D;IAC3D,WAAW,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAClC,+CAA+C;IAC/C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,YAAY;IAC5F,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,oIAAoI;IACpI,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB;;SAapC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,WAS1C,CAAC;AAIF,eAAO,MAAM,gBAAgB,cAAe,KAAK,gBAAgB,EAAE,OAAO,CAAC,gBAe1E,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAiEpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/SummaryList/SummaryList.js

@@ -7,13 +7,14 @@ import Text from '../Text';
 import Count from '../Badges/Count';
 import Icon from '../Icon';
 import Card, { CardHeader, CardContent, CardFooter } from '../Card';
-import NoItems from '../NoItems';
+import EmptyState from '../EmptyState';
 import { omitProps } from '../../styles';
 import { useI18n } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
 import SummaryItem from '../SummaryItem';
 import Progress from '../Progress';
 import Button from '../Button';
+import ErrorState from '../ErrorState';
 export const StyledSummaryListContent = styled(CardContent).withConfig(omitProps('loading'))(({ theme, loading }) => css `
     ${loading &&
     css `
@@ -35,23 +36,21 @@ export const StyledSummaryListItem = styled(SummaryItem)(({ theme }) => css `
 StyledSummaryListItem.defaultProps = defaultThemeProp;
 export const SummaryListItems = ({ items }) => {
     return (_jsx("ul", { children: items.map(({ id, actions: itemActions, ...restItemProps }) => {
-            return (_jsx(StyledSummaryListItem, Object.assign({}, restItemProps, { forwardedAs: 'li', actions: itemActions && _jsx(Actions, { items: itemActions }, void 0) }), id));
+            return (_jsx(StyledSummaryListItem, { ...restItemProps, forwardedAs: 'li', actions: itemActions && _jsx(Actions, { items: itemActions }, void 0) }, id));
         }) }, void 0));
 };
-const SummaryList = forwardRef(({ icon, name, count, actions, items, onViewAll, loading, noItemsText, ...restProps }, ref) => {
+const SummaryList = forwardRef(({ icon, name, count, actions, items, onViewAll, loading, noItemsText, error, ...restProps }, ref) => {
     const t = useI18n();
     const content = useMemo(() => {
         if (loading) {
             return (_jsx(Progress, { placement: 'local', message: typeof loading === 'string' ? loading : undefined }, void 0));
         }
-        return items.length > 0 ? (_jsx(SummaryListItems, { items: items }, void 0)) : (_jsx(NoItems, { message: noItemsText }, void 0));
-    }, [loading, items, noItemsText]);
-    return (_jsxs(Card, Object.assign({ ref: ref }, restProps, { children: [(icon || name || typeof count === 'number' || actions) && (_jsxs(CardHeader, { children: [_jsxs(Flex, Object.assign({ container: { alignItems: 'center', gap: 1 } }, { children: [icon && _jsx(Icon, { name: icon }, void 0),
-                            name && _jsx(Text, Object.assign({ variant: 'h2' }, { children: name }), void 0),
-                            typeof count === 'number' && _jsx(Count, { children: count }, void 0)] }), void 0),
-                    actions && _jsx(Actions, { items: actions }, void 0)] }, void 0)),
-            _jsx(StyledSummaryListContent, Object.assign({ loading: loading }, { children: content }), void 0),
-            typeof count === 'number' && count > items.length && onViewAll && (_jsx(CardFooter, Object.assign({ justify: 'center' }, { children: _jsx(Button, Object.assign({ variant: 'link', "aria-label": name ? t('view_all_noun', name) : t('view_all'), onClick: onViewAll }, { children: t('view_all') }), void 0) }), void 0))] }), void 0));
+        if (error) {
+            return _jsx(ErrorState, { ...(error === true ? {} : error) }, void 0);
+        }
+        return items.length > 0 ? (_jsx(SummaryListItems, { items: items }, void 0)) : (_jsx(EmptyState, { message: noItemsText }, void 0));
+    }, [loading, items, noItemsText, error]);
+    return (_jsxs(Card, { ref: ref, ...restProps, children: [(icon || name || typeof count === 'number' || actions) && (_jsxs(CardHeader, { children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [icon && _jsx(Icon, { name: icon }, void 0), name && _jsx(Text, { variant: 'h2', children: name }, void 0), typeof count === 'number' && _jsx(Count, { children: count }, void 0)] }, void 0), actions && _jsx(Actions, { items: actions }, void 0)] }, void 0)), _jsx(StyledSummaryListContent, { loading: loading, children: content }, void 0), !error && typeof count === 'number' && count > items.length && onViewAll && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', "aria-label": name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all'), onClick: onViewAll, children: t('view_all') }, void 0) }, void 0))] }, void 0));
 });
 export default SummaryList;
 //# sourceMappingURL=SummaryList.js.map

package/lib/components/SummaryList/SummaryList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryList.js","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, FC, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions from '../Actions';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Count from '../Badges/Count';\nimport Icon from '../Icon';\nimport Card, { CardHeader, CardContent, CardFooter } from '../Card';\nimport NoItems, { NoItemsProps } from '../NoItems';\nimport { ForwardProps, NoChildrenProp, OmitStrict, Action } from '../../types';\nimport { omitProps } from '../../styles';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport SummaryItem, { SummaryItemProps } from '../SummaryItem';\nimport Progress from '../Progress';\nimport Button from '../Button';\n\nexport interface SummaryListProps extends NoChildrenProp {\n  /** Name of the utility to be used as its heading along with associated actions and aria attributes. */\n  name?: string;\n  /** Identifier for the icon within Pega icons.  */\n  icon?: string;\n  /** Integer representing the total count of items for a list utility dataset. */\n  count?: number;\n  /** Top level actions for the utility. If more than one action is passed a consolidated ActionMenu will be generated. */\n  actions?: Action[];\n  /** If the utility is in a state of fetching data. */\n  loading?: boolean | string;\n  /** An array of SummaryListItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. */\n  items: SummaryListItem[];\n  /** User click initiated callback for when to show view all modal. List lengths less than the count prop will display a \"View all\" button with this function is bound to. */\n  onViewAll?: (callback: Function) => void;\n  /** A simple message to display when there are no items. */\n  noItemsText?: NoItemsProps['message'];\n  /** Ref for the SummaryList's root element.  */\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface SummaryListItem extends OmitStrict<SummaryItemProps, 'actions'>, ForwardProps {\n  /** A unique id to represent the item. */\n  id: string;\n  /** A set of Actions to render alongside the item. If more than one action is passed a consolidated ActionMenu will be generated. */\n  actions?: Action[];\n}\n\nexport const StyledSummaryListContent = styled(CardContent).withConfig<{ loading?: boolean }>(\n  omitProps('loading')\n)(\n  ({ theme, loading }) => css`\n    ${loading &&\n    css`\n      min-height: 4rem;\n    `}\n\n    &:not(:last-child) > ul > li:last-child {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `\n);\n\nStyledSummaryListContent.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryListItem: typeof SummaryItem = styled(SummaryItem)(\n  ({ theme }) =>\n    css`\n      padding: ${theme.base.spacing} 0;\n\n      &:not(:last-child) {\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      }\n    `\n);\n\nStyledSummaryListItem.defaultProps = defaultThemeProp;\n\nexport const SummaryListItems = ({ items }: Pick<SummaryListProps, 'items'>) => {\n  return (\n    <ul>\n      {items.map(({ id, actions: itemActions, ...restItemProps }) => {\n        return (\n          <StyledSummaryListItem\n            key={id}\n            {...restItemProps}\n            forwardedAs='li'\n            actions={itemActions && <Actions items={itemActions} />}\n          />\n        );\n      })}\n    </ul>\n  );\n};\n\nconst SummaryList: FC<SummaryListProps & ForwardProps> = forwardRef(\n  (\n    {\n      icon,\n      name,\n      count,\n      actions,\n      items,\n      onViewAll,\n      loading,\n      noItemsText,\n      ...restProps\n    }: PropsWithoutRef<SummaryListProps>,\n    ref: SummaryListProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const content = useMemo(() => {\n      if (loading) {\n        return (\n          <Progress placement='local' message={typeof loading === 'string' ? loading : undefined} />\n        );\n      }\n\n      return items.length > 0 ? (\n        <SummaryListItems items={items} />\n      ) : (\n        <NoItems message={noItemsText} />\n      );\n    }, [loading, items, noItemsText]);\n\n    return (\n      <Card ref={ref} {...restProps}>\n        {(icon || name || typeof count === 'number' || actions) && (\n          <CardHeader>\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              {icon && <Icon name={icon} />}\n              {name && <Text variant='h2'>{name}</Text>}\n              {typeof count === 'number' && <Count>{count}</Count>}\n            </Flex>\n            {actions && <Actions items={actions} />}\n          </CardHeader>\n        )}\n\n        <StyledSummaryListContent loading={loading}>{content}</StyledSummaryListContent>\n\n        {typeof count === 'number' && count > items.length && onViewAll && (\n          <CardFooter justify='center'>\n            <Button\n              variant='link'\n              aria-label={name ? t('view_all_noun', name) : t('view_all')}\n              onClick={onViewAll}\n            >\n              {t('view_all')}\n            </Button>\n          </CardFooter>\n        )}\n      </Card>\n    );\n  }\n);\n\nexport default SummaryList;\n"]}
+{"version":3,"file":"SummaryList.js","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, FC, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions from '../Actions';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Count from '../Badges/Count';\nimport Icon from '../Icon';\nimport Card, { CardHeader, CardContent, CardFooter } from '../Card';\nimport EmptyState, { EmptyStateProps } from '../EmptyState';\nimport { ForwardProps, NoChildrenProp, OmitStrict, Action } from '../../types';\nimport { omitProps } from '../../styles';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport SummaryItem, { SummaryItemProps } from '../SummaryItem';\nimport Progress from '../Progress';\nimport Button from '../Button';\nimport ErrorState from '../ErrorState';\nimport type { ErrorStateProps } from '../ErrorState';\n\nexport interface SummaryListProps extends NoChildrenProp {\n  /** Name of the utility to be used as its heading along with associated actions and aria attributes. */\n  name?: string;\n  /** Identifier for the icon within Pega icons.  */\n  icon?: string;\n  /** Integer representing the total count of items for a list utility dataset. */\n  count?: number;\n  /** Top level actions for the utility. If more than one action is passed a consolidated ActionMenu will be generated. */\n  actions?: Action[];\n  /** If the utility is in a state of fetching data. */\n  loading?: boolean | string;\n  /** An array of SummaryListItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. */\n  items: SummaryListItem[];\n  /** User click initiated callback for when to show view all modal. List lengths less than the count prop will display a \"View all\" button with this function is bound to. */\n  onViewAll?: (callback: Function) => void;\n  /** A simple message to display when there are no items. */\n  noItemsText?: EmptyStateProps['message'];\n  /**\n   * Indicate an error occurred while acquiring data for the list.\n   * The default error state may be overridden with custom props.\n   */\n  error?: boolean | ErrorStateProps;\n  /** Ref for the SummaryList's root element.  */\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface SummaryListItem extends OmitStrict<SummaryItemProps, 'actions'>, ForwardProps {\n  /** A unique id to represent the item. */\n  id: string;\n  /** A set of Actions to render alongside the item. If more than one action is passed a consolidated ActionMenu will be generated. */\n  actions?: Action[];\n}\n\nexport const StyledSummaryListContent = styled(CardContent).withConfig<{ loading?: boolean }>(\n  omitProps('loading')\n)(\n  ({ theme, loading }) => css`\n    ${loading &&\n    css`\n      min-height: 4rem;\n    `}\n\n    &:not(:last-child) > ul > li:last-child {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `\n);\n\nStyledSummaryListContent.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryListItem: typeof SummaryItem = styled(SummaryItem)(\n  ({ theme }) =>\n    css`\n      padding: ${theme.base.spacing} 0;\n\n      &:not(:last-child) {\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      }\n    `\n);\n\nStyledSummaryListItem.defaultProps = defaultThemeProp;\n\nexport const SummaryListItems = ({ items }: Pick<SummaryListProps, 'items'>) => {\n  return (\n    <ul>\n      {items.map(({ id, actions: itemActions, ...restItemProps }) => {\n        return (\n          <StyledSummaryListItem\n            key={id}\n            {...restItemProps}\n            forwardedAs='li'\n            actions={itemActions && <Actions items={itemActions} />}\n          />\n        );\n      })}\n    </ul>\n  );\n};\n\nconst SummaryList: FC<SummaryListProps & ForwardProps> = forwardRef(\n  (\n    {\n      icon,\n      name,\n      count,\n      actions,\n      items,\n      onViewAll,\n      loading,\n      noItemsText,\n      error,\n      ...restProps\n    }: PropsWithoutRef<SummaryListProps>,\n    ref: SummaryListProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const content = useMemo(() => {\n      if (loading) {\n        return (\n          <Progress placement='local' message={typeof loading === 'string' ? loading : undefined} />\n        );\n      }\n\n      if (error) {\n        return <ErrorState {...(error === true ? {} : error)} />;\n      }\n\n      return items.length > 0 ? (\n        <SummaryListItems items={items} />\n      ) : (\n        <EmptyState message={noItemsText} />\n      );\n    }, [loading, items, noItemsText, error]);\n\n    return (\n      <Card ref={ref} {...restProps}>\n        {(icon || name || typeof count === 'number' || actions) && (\n          <CardHeader>\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              {icon && <Icon name={icon} />}\n              {name && <Text variant='h2'>{name}</Text>}\n              {typeof count === 'number' && <Count>{count}</Count>}\n            </Flex>\n            {actions && <Actions items={actions} />}\n          </CardHeader>\n        )}\n\n        <StyledSummaryListContent loading={loading}>{content}</StyledSummaryListContent>\n\n        {!error && typeof count === 'number' && count > items.length && onViewAll && (\n          <CardFooter justify='center'>\n            <Button\n              variant='link'\n              aria-label={name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all')}\n              onClick={onViewAll}\n            >\n              {t('view_all')}\n            </Button>\n          </CardFooter>\n        )}\n      </Card>\n    );\n  }\n);\n\nexport default SummaryList;\n"]}

package/lib/components/SummaryList/ViewAll.d.ts

@@ -1,6 +1,6 @@
 import { Ref, FC } from 'react';
 import { SearchInputProps } from '../SearchInput';
-import { ForwardProps } from '../../types';
+import type { ForwardProps } from '../../types';
 import { SummaryListProps } from './SummaryList';
 export interface ViewAllProps extends Pick<SummaryListProps, 'loading' | 'actions' | 'items'> {
     searchInputProps?: SearchInputProps;

package/lib/components/SummaryList/ViewAll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewAll.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/ViewAll.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,GAAG,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK5C,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC3F,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAgBD,eAAO,MAAM,aAAa;aAAoC,YAAY,CAAC,SAAS,CAAC;SASpF,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,GAAG,YAAY,CAiDnD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ViewAll.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/ViewAll.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,GAAG,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAM5C,OAAoB,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAMlF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAoB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC3F,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAoBD,eAAO,MAAM,aAAa;aAAoC,YAAY,CAAC,SAAS,CAAC;SAapF,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,GAAG,YAAY,CAoBnD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/SummaryList/ViewAll.js

@@ -3,12 +3,14 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import Actions from '../Actions';
 import Flex from '../Flex';
-import SearchInput from '../SearchInput';
-import NoItems from '../NoItems';
+import EmptyState from '../EmptyState';
+import SearchInput, { StyledSearchInput } from '../SearchInput';
 import { defaultThemeProp } from '../../theme';
-import SummaryItem from '../SummaryItem';
 import Progress from '../Progress';
+import { StyledCard } from '../Card';
+import { StyledCardContent } from '../Card/CardContent';
 import { omitProps } from '../../styles';
+import SummaryList from './SummaryList';
 const StyledToolbar = styled.div(({ theme: { base } }) => {
     return css `
     position: sticky;
@@ -18,23 +20,25 @@ const StyledToolbar = styled.div(({ theme: { base } }) => {
     margin-bottom: ${base.spacing};
     transform: translateY(calc(-0.5 * ${base.spacing}));
     padding: ${base.spacing} 0;
+
+    ${StyledSearchInput} {
+      flex-grow: 1;
+    }
   `;
 });
 StyledToolbar.defaultProps = defaultThemeProp;
 export const StyledViewAll = styled.div.withConfig(omitProps('loading'))(({ loading }) => css `
+    ${StyledCardContent}:not(${StyledCard} ${StyledCard} > ${StyledCardContent}) {
+      padding: 0;
+    }
+
     ${loading &&
     css `
       min-height: 8rem;
     `}
   `);
 const SearchableList = forwardRef(({ loading, actions, items, searchInputProps, ...restProps }, ref) => {
-    return (_jsxs(StyledViewAll, Object.assign({ ref: ref, loading: loading }, restProps, { children: [!loading && (searchInputProps || actions) && (_jsxs(Flex, Object.assign({ container: { alignItems: 'center', gap: 2 }, as: StyledToolbar }, { children: [searchInputProps && (_jsx(Flex, Object.assign({ item: { grow: 1 } }, { children: _jsx(SearchInput, { onSearchChange: searchInputProps.onSearchChange }, void 0) }), void 0)),
-                    actions && _jsx(Actions, { iconOnly: false, items: actions }, void 0)] }), void 0)),
-            loading && _jsx(Progress, { placement: 'local' }, void 0),
-            !loading &&
-                (items.length ? (_jsx(Flex, Object.assign({ as: 'ul', container: { direction: 'column', gap: 2 } }, { children: items.map(({ primary, secondary, visual, overflowStrategy, id, actions: itemActions, ...restItemProps }) => {
-                        return (_jsx(SummaryItem, Object.assign({}, restItemProps, { visual: visual, primary: primary, secondary: secondary, overflowStrategy: overflowStrategy, actions: itemActions && _jsx(Actions, { items: itemActions }, void 0) }), id));
-                    }) }), void 0)) : (_jsx(NoItems, {}, void 0)))] }), void 0));
+    return (_jsxs(StyledViewAll, { ref: ref, loading: loading, ...restProps, children: [!loading && (searchInputProps || actions) && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 2 }, as: StyledToolbar, children: [searchInputProps && (_jsx(Flex, { container: { alignItems: 'center', gap: 1 }, item: { grow: 1 }, children: _jsx(SearchInput, { onSearchChange: searchInputProps.onSearchChange }, void 0) }, void 0)), actions && _jsx(Actions, { iconOnly: false, items: actions }, void 0)] }, void 0)), loading && _jsx(Progress, { placement: 'local' }, void 0), !loading && (items.length ? _jsx(SummaryList, { items: items }, void 0) : _jsx(EmptyState, {}, void 0))] }, void 0));
 });
 export default SearchableList;
 //# sourceMappingURL=ViewAll.js.map