@spscommerce/ds-shared 3.12.2 → 3.15.3

package/lib/button.d.ts

@@ -12,7 +12,6 @@ declare enum ButtonKindLink {
 }
 export declare type DropdownKind = StdButtonKind | ButtonKindIcon;
 export declare const DropdownKind: Readonly<{
-    [x: number]: string;
     ICON: ButtonKindIcon.ICON;
     DEFAULT: StdButtonKind.DEFAULT;
     CONFIRM: StdButtonKind.CONFIRM;
@@ -21,7 +20,6 @@ export declare const DropdownKind: Readonly<{
 }>;
 export declare type ButtonKind = StdButtonKind | ButtonKindIcon | ButtonKindLink;
 export declare const ButtonKind: Readonly<{
-    [x: number]: string;
     LINK: ButtonKindLink.LINK;
     ICON: ButtonKindIcon.ICON;
     DEFAULT: StdButtonKind.DEFAULT;

package/lib/datetime.d.ts

@@ -1,4 +1,4 @@
-import { Duration, Moment } from "moment-timezone";
+import { Duration, Moment } from 'moment-timezone';
 export interface MomentRange {
     start: Moment;
     end: Moment;

package/lib/examples.d.ts

@@ -1,5 +1,19 @@
+import { ReactElement } from 'react';
+export declare type ExtraExampleRendererArgs = {
+    naviagateTo: (selection: string) => void;
+    NavigateTo: (props: {
+        to: string;
+        children: ReactElement | string;
+        slugPrefix?: string;
+    }) => ReactElement;
+    Link: (props: {
+        to: string;
+        children: ReactElement | string;
+    }) => ReactElement;
+};
+declare type ReactChildOrRenderer = ReactElement | string | ((args: ExtraExampleRendererArgs) => ReactElement | string);
 export interface DSExampleBase {
-    description?: string;
+    description?: ReactChildOrRenderer;
 }
 export interface DSReactExampleJSX {
     jsx: string;
@@ -8,17 +22,14 @@ export interface DSReactExampleComponent {
     react: string;
 }
 export declare type DSReactExample = DSExampleBase & (DSReactExampleComponent | DSReactExampleJSX);
-export interface DSAngularExample extends DSExampleBase {
-    template: string;
-    class?: string;
-}
-export declare type DSExample = DSReactExample | DSAngularExample;
+export declare type DSExample = DSReactExample;
 export declare function exampleIsReactComponentExample(example: DSExample): example is DSReactExampleComponent;
 export declare function exampleIsReactJSXExample(example: DSExample): example is DSReactExampleJSX;
 export interface DSExamplesTab<T extends DSExample = DSExample> {
-    label?: string;
-    description?: string;
-    examples: {
+    label?: ReactChildOrRenderer;
+    description?: ReactChildOrRenderer;
+    customSection?: ReactChildOrRenderer;
+    examples?: {
         [key: string]: T;
     };
 }
@@ -26,4 +37,11 @@ export interface DSExamples<T extends DSExample = DSExample> {
     [key: string]: DSExamplesTab<T>;
 }
 export declare type DSReactExamples = DSExamples<DSReactExample>;
-export declare type DSAngularExamples = DSExamples<DSAngularExample>;
+export interface ComponentManifest {
+    [key: string]: {
+        description?: ReactChildOrRenderer;
+        components: Array<any>;
+        examples: DSReactExamples;
+    };
+}
+export {};

package/lib/feedback.d.ts

@@ -1,4 +1,4 @@
-import { SpsIcon } from "./icon";
+import { SpsIcon } from './icon';
 export declare enum FeedbackBlockKind {
     TIP = "tip",
     SUCCESS = "success",
@@ -7,9 +7,9 @@ export declare enum FeedbackBlockKind {
     INFO = "info"
 }
 export declare const FeedbackBlockIcons: Readonly<{
-    [FeedbackBlockKind.TIP]: SpsIcon;
-    [FeedbackBlockKind.ERROR]: SpsIcon;
-    [FeedbackBlockKind.INFO]: SpsIcon;
-    [FeedbackBlockKind.SUCCESS]: SpsIcon;
-    [FeedbackBlockKind.WARNING]: SpsIcon;
+    tip: SpsIcon;
+    error: SpsIcon;
+    info: SpsIcon;
+    success: SpsIcon;
+    warning: SpsIcon;
 }>;

package/lib/growler.d.ts

@@ -1,4 +1,4 @@
-import { SpsIcon } from "./icon";
+import { SpsIcon } from './icon';
 export declare const GROWLER_VISIBLE_DURATION_MS = 7000;
 export declare const GROWLER_FADEOUT_DURATION_MS = 2000;
 export declare enum GrowlerKind {

package/lib/index.cjs.js

@@ -45,8 +45,10 @@ var ButtonKindLink;
 (function (ButtonKindLink) {
     ButtonKindLink["LINK"] = "link";
 })(ButtonKindLink || (ButtonKindLink = {}));
-var DropdownKind = Object.freeze(__assign({}, exports.StdButtonKind, ButtonKindIcon));
-var ButtonKind = Object.freeze(__assign({}, exports.StdButtonKind, ButtonKindIcon, ButtonKindLink));
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+var DropdownKind = Object.freeze(__assign(__assign({}, exports.StdButtonKind), ButtonKindIcon));
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+var ButtonKind = Object.freeze(__assign(__assign(__assign({}, exports.StdButtonKind), ButtonKindIcon), ButtonKindLink));
 exports.ButtonType = void 0;
 (function (ButtonType) {
     ButtonType["BUTTON"] = "button";
@@ -66,10 +68,10 @@ exports.ClickableTagKind = void 0;
 })(exports.ClickableTagKind || (exports.ClickableTagKind = {}));
 
 function exampleIsReactComponentExample(example) {
-    return example.hasOwnProperty("react");
+    return Object.prototype.hasOwnProperty.call(example, 'react');
 }
 function exampleIsReactJSXExample(example) {
-    return example.hasOwnProperty("jsx");
+    return Object.prototype.hasOwnProperty.call(example, 'jsx');
 }
 
 exports.SpsIconSize = void 0;
@@ -294,14 +296,14 @@ var GrowlerIcon = new Map([
     [exports.GrowlerKind.INFO, exports.SpsIcon.INFO_CIRCLE],
     [exports.GrowlerKind.WARNING, exports.SpsIcon.EXCLAMATION_TRIANGLE],
     [exports.GrowlerKind.ERROR, exports.SpsIcon.EXCLAMATION_CIRCLE],
-    [exports.GrowlerKind.SUCCESS, exports.SpsIcon.CHECKMARK]
+    [exports.GrowlerKind.SUCCESS, exports.SpsIcon.CHECKMARK],
 ]);
 
-var translations = { "advancedSearch": { "clear": "Clear", "search": "Search" }, "button": { "spinningTitle": "Loading…" }, "columnChooser": { "removeButton": "Remove {{elementName}}" }, "contentRow": { "collapse": "Collapse", "expand": "Expand" }, "datepicker": { "calendar": { "prevMonth": "View Previous Month", "nextMonth": "View Next Month" }, "preset": { "custom": "Custom", "today": "Today", "sevenDays": "Last 7 days", "thirtyDays": "Last 30 days", "sixtyDays": "Last 60 days", "ninetyDays": "Last 90 days", "oneYear": "Last year" }, "presetsLabel": "Ranges" }, "fileUpload": { "acceptedTypes": "{{fileTypes}} format accepted", "acceptedTypes_plural": "{{fileTypes}} formats accepted", "cancelled": "File Upload Failed", "cancelled_plural": "File Upload(s) Failed", "close": "Close", "instructions": "Drag and drop your file here or |browse for a file| on your desktop.", "instructions_plural": "Drag and drop your files here or |browse for files| on your desktop.", "maximumSize": "{{size}} maximum", "processing": "Processing Upload…", "title": "Upload Your {{description}}" }, "focusedTask": { "close": "Close" }, "growler": { "dismiss": "Dismiss" }, "insightCard": { "all": "ALL", "partnerCount": "{{count}} |of| {{total}}", "partners": "PARTNERS" }, "label": { "errors": { "dateConstraint": { "max": "Please enter a date on or prior to {{context.maxExceeded}}.", "min": "Please enter a date on or after {{context.minExceeded}}." }, "dateFormat": "Please enter a date in the format {{context}}.", "dateRangeOrder": "End date cannot be before start date.", "dateValidity": "Please enter a valid date.", "max": "Please enter a value no greater than {{context}}.", "maxLength": "Please enter no more than {{context}} characters.", "min": "Please enter a value no less than {{context}}.", "minLength": "Please enter at least {{context}} characters.", "required": "This field is required." }, "stronglySuggested": "This field is strongly suggested." }, "listActionBar": { "clearSelected": "Clear Selected", "itemsSelected": "Items Selected" }, "listToolbar": { "advancedSearchToggle": "Advanced Search" }, "modal": { "defaultButtonLabel": "Okay", "defaultTitle": { "general": "Action", "info": "Info", "success": "Success", "warning": "Warning", "serious-warning": "Warning" } }, "pagination": { "nextPage": "Next Page", "ofMany": "of many", "ofPageCount": "of {{pageCount}}", "page": "Page", "prevPage": "Previous Page" }, "progressBar": { "closeButtonTitle": "Close progress bar" }, "searchResultsBar": { "clear": "Clear", "count": "{{count}} of {{total}}", "matchingResults": "Matching results" }, "select": { "defaultPlaceholder": "Select one…" }, "slackLink": { "label": "Chat" }, "spinner": { "defaultAltText": "Loading…" }, "taskQueue": { "clearCompleted": "Clear Completed", "newTask": "You have a new task in your queue.", "noTasks": "There are currently no tasks in your queue." } };
+var translations = { "advancedSearch": { "clear": "Clear", "search": "Search" }, "button": { "spinningTitle": "Loading…" }, "columnChooser": { "removeButton": "Remove {{elementName}}" }, "contentRow": { "collapse": "Collapse", "expand": "Expand" }, "datepicker": { "calendar": { "prevMonth": "View Previous Month", "nextMonth": "View Next Month" }, "preset": { "custom": "Custom", "today": "Today", "sevenDays": "Last 7 days", "thirtyDays": "Last 30 days", "sixtyDays": "Last 60 days", "ninetyDays": "Last 90 days", "oneYear": "Last year" }, "presetsLabel": "Ranges" }, "fileUpload": { "acceptedTypes": "{{fileTypes}} format accepted", "acceptedTypes_plural": "{{fileTypes}} formats accepted", "cancelled": "File Upload Failed", "cancelled_plural": "File Upload(s) Failed", "close": "Close", "instructions": "Drag and drop your file here or |browse for a file| on your desktop.", "instructions_plural": "Drag and drop your files here or |browse for files| on your desktop.", "maximumSize": "{{size}} maximum", "processing": "Processing Upload…", "title": "Upload Your {{description}}" }, "focusedTask": { "close": "Close" }, "growler": { "dismiss": "Dismiss" }, "insightCard": { "all": "ALL", "partnerCount": "{{count}} |of| {{total}}", "partners": "PARTNERS" }, "label": { "errors": { "dateConstraint": { "max": "Please enter a date on or prior to {{context.maxExceeded}}.", "min": "Please enter a date on or after {{context.minExceeded}}." }, "dateFormat": "Please enter a date in the format {{context}}.", "dateRangeOrder": "End date cannot be before start date.", "dateValidity": "Please enter a valid date.", "max": "Please enter a value no greater than {{context}}.", "maxLength": "Please enter no more than {{context}} characters.", "min": "Please enter a value no less than {{context}}.", "minLength": "Please enter at least {{context}} characters.", "required": "This field is required." }, "stronglySuggested": "This field is strongly suggested." }, "listActionBar": { "clearSelected": "Clear Selected", "itemsSelected": "Items Selected" }, "listToolbar": { "advancedSearchToggle": "Advanced Search" }, "modal": { "close": "Close modal", "defaultButtonLabel": "Okay", "defaultTitle": { "general": "Action", "info": "Info", "success": "Success", "warning": "Warning", "serious-warning": "Warning" } }, "pagination": { "nextPage": "Next Page", "ofMany": "of many", "ofPageCount": "of {{pageCount}}", "page": "Page", "prevPage": "Previous Page" }, "progressBar": { "closeButtonTitle": "Close progress bar" }, "searchResultsBar": { "clear": "Clear", "count": "{{count}} of {{total}}", "matchingResults": "Matching results" }, "select": { "defaultPlaceholder": "Select one…" }, "slackLink": { "label": "Chat" }, "spinner": { "defaultAltText": "Loading…" }, "taskQueue": { "clearCompleted": "Clear Completed", "newTask": "You have a new task in your queue.", "noTasks": "There are currently no tasks in your queue." } };
 
 var noI18nI18n = {
     t: function (key, interpolations) {
-        var text = utils.getPath(translations, key.replace(/^design-system:/, ""));
+        var text = utils.getPath(translations, key.replace(/^design-system:/, ''));
         return interpolations ? utils.template(text)(interpolations) : text;
     },
 };
@@ -356,73 +358,74 @@ var SpsOptionListOption = /** @class */ (function () {
     }
     Object.defineProperty(SpsOptionListOption.prototype, "text", {
         get: function () {
-            if (this._text) {
-                return this._text;
+            if (this.textInternal) {
+                return this.textInternal;
             }
             if (!this.value) {
-                return "";
+                return '';
             }
             return this.textKey ? this.value[this.textKey] : this.value.toString();
         },
         set: function (value) {
-            this._text = value;
+            this.textInternal = value;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(SpsOptionListOption.prototype, "caption", {
         get: function () {
-            if (this._caption) {
-                return this._caption;
+            if (this.captionInternal) {
+                return this.captionInternal;
             }
             if (!this.value) {
-                return "";
+                return '';
             }
-            return this.captionKey ? this.value[this.captionKey] : "";
+            return this.captionKey ? this.value[this.captionKey] : '';
         },
         set: function (value) {
-            this._caption = value;
+            this.captionInternal = value;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(SpsOptionListOption.prototype, "href", {
         get: function () {
             if (this.value) {
-                return this.value["isLink"] && typeof this.value === "function"
+                return this.value.isLink && typeof this.value === 'function'
                     ? this.value()
-                    : this.value["href"];
+                    : this.value.href;
             }
+            return null;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(SpsOptionListOption.prototype, "disabled", {
         get: function () {
-            if (typeof this._disabled !== "undefined") {
-                return this._disabled;
+            if (typeof this.disabledInternal !== 'undefined') {
+                return this.disabledInternal;
             }
-            return this.value ? this.value["disabled"] : false;
+            return this.value ? this.value.disabled : false;
         },
         set: function (value) {
-            this._disabled = value;
+            this.disabledInternal = value;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(SpsOptionListOption.prototype, "bold", {
         get: function () {
-            if (typeof this._bold !== "undefined") {
-                return this._bold;
+            if (typeof this.boldInternal !== 'undefined') {
+                return this.boldInternal;
             }
-            return this.value ? this.value["bold"] && this.value["bold"] === true : false;
+            return this.value ? this.value.bold && this.value.bold === true : false;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     SpsOptionListOption.prototype.getHtml = function (patternToUnderline) {
         if (patternToUnderline) {
-            return this.text.replace(patternToUnderline, "<u>$&</u>");
+            return this.text.replace(patternToUnderline, '<u>$&</u>');
         }
         return this.text;
     };
@@ -496,11 +499,11 @@ exports.TooltipKind = void 0;
 })(exports.TooltipKind || (exports.TooltipKind = {}));
 
 var SPS_ACTION_DEFAULTS = {
-    icon: "",
-    label: "",
-    caption: "",
+    icon: '',
+    label: '',
+    caption: '',
     disabled: false,
-    isLink: false
+    isLink: false,
 };
 /** Attaches metadata to the decorated method, designating it as an "action"
  * that can be passed in to components such as modal and select. For example,
@@ -508,9 +511,7 @@ var SPS_ACTION_DEFAULTS = {
  * specified label, icon, etc, and clicking that button will call the method.
 */
 function SpsAction(actionDescriptor) {
-    return function (target, key, descriptor) {
-        return utils.simpleMetadataDecoratorApplicator(actionDescriptor, SPS_ACTION_DEFAULTS, target, key, descriptor);
-    };
+    return function (target, key, descriptor) { return utils.simpleMetadataDecoratorApplicator(actionDescriptor, SPS_ACTION_DEFAULTS, target, key, descriptor); };
 }
 
 var _a;
@@ -526,7 +527,7 @@ var SpsTaskStatusIcons = Object.freeze((_a = {},
     _a[exports.SpsTaskStatus.COMPLETED] = exports.SpsIcon.STATUS_OK,
     _a[exports.SpsTaskStatus.ERRORED] = exports.SpsIcon.STATUS_ERROR,
     _a[exports.SpsTaskStatus.WARNING] = exports.SpsIcon.STATUS_WARNING,
-    _a[exports.SpsTaskStatus.IN_PROGRESS] = "sps-spinner sps-spinner--small",
+    _a[exports.SpsTaskStatus.IN_PROGRESS] = 'sps-spinner sps-spinner--small',
     _a));
 var TASK_QUEUE_NOTIFICATION_DURATION_MS = 5000;
 

package/lib/index.d.ts

@@ -1,25 +1,25 @@
-export * from "./button";
-export * from "./datetime";
-export * from "./clickable-tag";
-export * from "./examples";
-export * from "./feedback";
-export * from "./growler";
-export * from "./grid";
-export * from "./i18n";
-export * from "./icon";
-export * from "./insight-card";
-export * from "./modal";
-export * from "./multi-select";
-export * from "./option-list";
-export * from "./pagination";
-export * from "./positioning";
-export * from "./ring-size";
-export * from "./spinner";
-export * from "./table";
-export * from "./tabs";
-export * from "./tag";
-export * from "./tooltip";
-export * from "./sps-action";
-export * from "./task-queue";
-export * from "./wizard-substep-condition";
-export * from "./z-strata";
+export * from './button';
+export * from './datetime';
+export * from './clickable-tag';
+export * from './examples';
+export * from './feedback';
+export * from './growler';
+export * from './grid';
+export * from './i18n';
+export * from './icon';
+export * from './insight-card';
+export * from './modal';
+export * from './multi-select';
+export * from './option-list';
+export * from './pagination';
+export * from './positioning';
+export * from './ring-size';
+export * from './spinner';
+export * from './table';
+export * from './tabs';
+export * from './tag';
+export * from './tooltip';
+export * from './sps-action';
+export * from './task-queue';
+export * from './wizard-substep-condition';
+export * from './z-strata';

package/lib/index.esm.js

@@ -41,8 +41,10 @@ var ButtonKindLink;
 (function (ButtonKindLink) {
     ButtonKindLink["LINK"] = "link";
 })(ButtonKindLink || (ButtonKindLink = {}));
-var DropdownKind = Object.freeze(__assign({}, StdButtonKind, ButtonKindIcon));
-var ButtonKind = Object.freeze(__assign({}, StdButtonKind, ButtonKindIcon, ButtonKindLink));
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+var DropdownKind = Object.freeze(__assign(__assign({}, StdButtonKind), ButtonKindIcon));
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+var ButtonKind = Object.freeze(__assign(__assign(__assign({}, StdButtonKind), ButtonKindIcon), ButtonKindLink));
 var ButtonType;
 (function (ButtonType) {
     ButtonType["BUTTON"] = "button";
@@ -62,10 +64,10 @@ var ClickableTagKind;
 })(ClickableTagKind || (ClickableTagKind = {}));
 
 function exampleIsReactComponentExample(example) {
-    return example.hasOwnProperty("react");
+    return Object.prototype.hasOwnProperty.call(example, 'react');
 }
 function exampleIsReactJSXExample(example) {
-    return example.hasOwnProperty("jsx");
+    return Object.prototype.hasOwnProperty.call(example, 'jsx');
 }
 
 var SpsIconSize;
@@ -290,14 +292,14 @@ var GrowlerIcon = new Map([
     [GrowlerKind.INFO, SpsIcon.INFO_CIRCLE],
     [GrowlerKind.WARNING, SpsIcon.EXCLAMATION_TRIANGLE],
     [GrowlerKind.ERROR, SpsIcon.EXCLAMATION_CIRCLE],
-    [GrowlerKind.SUCCESS, SpsIcon.CHECKMARK]
+    [GrowlerKind.SUCCESS, SpsIcon.CHECKMARK],
 ]);
 
-var translations = { "advancedSearch": { "clear": "Clear", "search": "Search" }, "button": { "spinningTitle": "Loading…" }, "columnChooser": { "removeButton": "Remove {{elementName}}" }, "contentRow": { "collapse": "Collapse", "expand": "Expand" }, "datepicker": { "calendar": { "prevMonth": "View Previous Month", "nextMonth": "View Next Month" }, "preset": { "custom": "Custom", "today": "Today", "sevenDays": "Last 7 days", "thirtyDays": "Last 30 days", "sixtyDays": "Last 60 days", "ninetyDays": "Last 90 days", "oneYear": "Last year" }, "presetsLabel": "Ranges" }, "fileUpload": { "acceptedTypes": "{{fileTypes}} format accepted", "acceptedTypes_plural": "{{fileTypes}} formats accepted", "cancelled": "File Upload Failed", "cancelled_plural": "File Upload(s) Failed", "close": "Close", "instructions": "Drag and drop your file here or |browse for a file| on your desktop.", "instructions_plural": "Drag and drop your files here or |browse for files| on your desktop.", "maximumSize": "{{size}} maximum", "processing": "Processing Upload…", "title": "Upload Your {{description}}" }, "focusedTask": { "close": "Close" }, "growler": { "dismiss": "Dismiss" }, "insightCard": { "all": "ALL", "partnerCount": "{{count}} |of| {{total}}", "partners": "PARTNERS" }, "label": { "errors": { "dateConstraint": { "max": "Please enter a date on or prior to {{context.maxExceeded}}.", "min": "Please enter a date on or after {{context.minExceeded}}." }, "dateFormat": "Please enter a date in the format {{context}}.", "dateRangeOrder": "End date cannot be before start date.", "dateValidity": "Please enter a valid date.", "max": "Please enter a value no greater than {{context}}.", "maxLength": "Please enter no more than {{context}} characters.", "min": "Please enter a value no less than {{context}}.", "minLength": "Please enter at least {{context}} characters.", "required": "This field is required." }, "stronglySuggested": "This field is strongly suggested." }, "listActionBar": { "clearSelected": "Clear Selected", "itemsSelected": "Items Selected" }, "listToolbar": { "advancedSearchToggle": "Advanced Search" }, "modal": { "defaultButtonLabel": "Okay", "defaultTitle": { "general": "Action", "info": "Info", "success": "Success", "warning": "Warning", "serious-warning": "Warning" } }, "pagination": { "nextPage": "Next Page", "ofMany": "of many", "ofPageCount": "of {{pageCount}}", "page": "Page", "prevPage": "Previous Page" }, "progressBar": { "closeButtonTitle": "Close progress bar" }, "searchResultsBar": { "clear": "Clear", "count": "{{count}} of {{total}}", "matchingResults": "Matching results" }, "select": { "defaultPlaceholder": "Select one…" }, "slackLink": { "label": "Chat" }, "spinner": { "defaultAltText": "Loading…" }, "taskQueue": { "clearCompleted": "Clear Completed", "newTask": "You have a new task in your queue.", "noTasks": "There are currently no tasks in your queue." } };
+var translations = { "advancedSearch": { "clear": "Clear", "search": "Search" }, "button": { "spinningTitle": "Loading…" }, "columnChooser": { "removeButton": "Remove {{elementName}}" }, "contentRow": { "collapse": "Collapse", "expand": "Expand" }, "datepicker": { "calendar": { "prevMonth": "View Previous Month", "nextMonth": "View Next Month" }, "preset": { "custom": "Custom", "today": "Today", "sevenDays": "Last 7 days", "thirtyDays": "Last 30 days", "sixtyDays": "Last 60 days", "ninetyDays": "Last 90 days", "oneYear": "Last year" }, "presetsLabel": "Ranges" }, "fileUpload": { "acceptedTypes": "{{fileTypes}} format accepted", "acceptedTypes_plural": "{{fileTypes}} formats accepted", "cancelled": "File Upload Failed", "cancelled_plural": "File Upload(s) Failed", "close": "Close", "instructions": "Drag and drop your file here or |browse for a file| on your desktop.", "instructions_plural": "Drag and drop your files here or |browse for files| on your desktop.", "maximumSize": "{{size}} maximum", "processing": "Processing Upload…", "title": "Upload Your {{description}}" }, "focusedTask": { "close": "Close" }, "growler": { "dismiss": "Dismiss" }, "insightCard": { "all": "ALL", "partnerCount": "{{count}} |of| {{total}}", "partners": "PARTNERS" }, "label": { "errors": { "dateConstraint": { "max": "Please enter a date on or prior to {{context.maxExceeded}}.", "min": "Please enter a date on or after {{context.minExceeded}}." }, "dateFormat": "Please enter a date in the format {{context}}.", "dateRangeOrder": "End date cannot be before start date.", "dateValidity": "Please enter a valid date.", "max": "Please enter a value no greater than {{context}}.", "maxLength": "Please enter no more than {{context}} characters.", "min": "Please enter a value no less than {{context}}.", "minLength": "Please enter at least {{context}} characters.", "required": "This field is required." }, "stronglySuggested": "This field is strongly suggested." }, "listActionBar": { "clearSelected": "Clear Selected", "itemsSelected": "Items Selected" }, "listToolbar": { "advancedSearchToggle": "Advanced Search" }, "modal": { "close": "Close modal", "defaultButtonLabel": "Okay", "defaultTitle": { "general": "Action", "info": "Info", "success": "Success", "warning": "Warning", "serious-warning": "Warning" } }, "pagination": { "nextPage": "Next Page", "ofMany": "of many", "ofPageCount": "of {{pageCount}}", "page": "Page", "prevPage": "Previous Page" }, "progressBar": { "closeButtonTitle": "Close progress bar" }, "searchResultsBar": { "clear": "Clear", "count": "{{count}} of {{total}}", "matchingResults": "Matching results" }, "select": { "defaultPlaceholder": "Select one…" }, "slackLink": { "label": "Chat" }, "spinner": { "defaultAltText": "Loading…" }, "taskQueue": { "clearCompleted": "Clear Completed", "newTask": "You have a new task in your queue.", "noTasks": "There are currently no tasks in your queue." } };
 
 var noI18nI18n = {
     t: function (key, interpolations) {
-        var text = getPath(translations, key.replace(/^design-system:/, ""));
+        var text = getPath(translations, key.replace(/^design-system:/, ''));
         return interpolations ? template(text)(interpolations) : text;
     },
 };
@@ -352,73 +354,74 @@ var SpsOptionListOption = /** @class */ (function () {
     }
     Object.defineProperty(SpsOptionListOption.prototype, "text", {
         get: function () {
-            if (this._text) {
-                return this._text;
+            if (this.textInternal) {
+                return this.textInternal;
             }
             if (!this.value) {
-                return "";
+                return '';
             }
             return this.textKey ? this.value[this.textKey] : this.value.toString();
         },
         set: function (value) {
-            this._text = value;
+            this.textInternal = value;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(SpsOptionListOption.prototype, "caption", {
         get: function () {
-            if (this._caption) {
-                return this._caption;
+            if (this.captionInternal) {
+                return this.captionInternal;
             }
             if (!this.value) {
-                return "";
+                return '';
             }
-            return this.captionKey ? this.value[this.captionKey] : "";
+            return this.captionKey ? this.value[this.captionKey] : '';
         },
         set: function (value) {
-            this._caption = value;
+            this.captionInternal = value;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(SpsOptionListOption.prototype, "href", {
         get: function () {
             if (this.value) {
-                return this.value["isLink"] && typeof this.value === "function"
+                return this.value.isLink && typeof this.value === 'function'
                     ? this.value()
-                    : this.value["href"];
+                    : this.value.href;
             }
+            return null;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(SpsOptionListOption.prototype, "disabled", {
         get: function () {
-            if (typeof this._disabled !== "undefined") {
-                return this._disabled;
+            if (typeof this.disabledInternal !== 'undefined') {
+                return this.disabledInternal;
             }
-            return this.value ? this.value["disabled"] : false;
+            return this.value ? this.value.disabled : false;
         },
         set: function (value) {
-            this._disabled = value;
+            this.disabledInternal = value;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(SpsOptionListOption.prototype, "bold", {
         get: function () {
-            if (typeof this._bold !== "undefined") {
-                return this._bold;
+            if (typeof this.boldInternal !== 'undefined') {
+                return this.boldInternal;
             }
-            return this.value ? this.value["bold"] && this.value["bold"] === true : false;
+            return this.value ? this.value.bold && this.value.bold === true : false;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     SpsOptionListOption.prototype.getHtml = function (patternToUnderline) {
         if (patternToUnderline) {
-            return this.text.replace(patternToUnderline, "<u>$&</u>");
+            return this.text.replace(patternToUnderline, '<u>$&</u>');
         }
         return this.text;
     };
@@ -492,11 +495,11 @@ var TooltipKind;
 })(TooltipKind || (TooltipKind = {}));
 
 var SPS_ACTION_DEFAULTS = {
-    icon: "",
-    label: "",
-    caption: "",
+    icon: '',
+    label: '',
+    caption: '',
     disabled: false,
-    isLink: false
+    isLink: false,
 };
 /** Attaches metadata to the decorated method, designating it as an "action"
  * that can be passed in to components such as modal and select. For example,
@@ -504,9 +507,7 @@ var SPS_ACTION_DEFAULTS = {
  * specified label, icon, etc, and clicking that button will call the method.
 */
 function SpsAction(actionDescriptor) {
-    return function (target, key, descriptor) {
-        return simpleMetadataDecoratorApplicator(actionDescriptor, SPS_ACTION_DEFAULTS, target, key, descriptor);
-    };
+    return function (target, key, descriptor) { return simpleMetadataDecoratorApplicator(actionDescriptor, SPS_ACTION_DEFAULTS, target, key, descriptor); };
 }
 
 var _a;
@@ -522,7 +523,7 @@ var SpsTaskStatusIcons = Object.freeze((_a = {},
     _a[SpsTaskStatus.COMPLETED] = SpsIcon.STATUS_OK,
     _a[SpsTaskStatus.ERRORED] = SpsIcon.STATUS_ERROR,
     _a[SpsTaskStatus.WARNING] = SpsIcon.STATUS_WARNING,
-    _a[SpsTaskStatus.IN_PROGRESS] = "sps-spinner sps-spinner--small",
+    _a[SpsTaskStatus.IN_PROGRESS] = 'sps-spinner sps-spinner--small',
     _a));
 var TASK_QUEUE_NOTIFICATION_DURATION_MS = 5000;
 

package/lib/insight-card.d.ts

@@ -1,4 +1,4 @@
-import { SpsIcon } from "./icon";
+import { SpsIcon } from './icon';
 export declare enum SpsInsightCardKind {
     GENERAL = "general",
     SUCCESS = "success",
@@ -7,9 +7,9 @@ export declare enum SpsInsightCardKind {
     PROCESSING = "processing"
 }
 export declare const SpsInsightCardIcons: Readonly<{
-    [SpsInsightCardKind.GENERAL]: SpsIcon;
-    [SpsInsightCardKind.SUCCESS]: SpsIcon;
-    [SpsInsightCardKind.ERROR]: SpsIcon;
-    [SpsInsightCardKind.WARNING]: SpsIcon;
-    [SpsInsightCardKind.PROCESSING]: SpsIcon;
+    general: SpsIcon;
+    success: SpsIcon;
+    error: SpsIcon;
+    warning: SpsIcon;
+    processing: SpsIcon;
 }>;

package/lib/option-list.d.ts

@@ -13,16 +13,19 @@ export interface SpsOptionListOptionConfig {
 export declare class SpsOptionListOption<T> {
     value: T;
     constructor(value: T, config?: SpsOptionListOptionConfig);
-    text: string;
-    caption: string;
-    readonly href: any;
-    disabled: boolean;
-    readonly bold: boolean;
+    get text(): string;
+    set text(value: string);
+    get caption(): string;
+    set caption(value: string);
+    get href(): any;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get bold(): boolean;
     textKey: string;
     captionKey: string;
-    private _text;
-    private _caption;
-    private _disabled;
-    private _bold;
+    private textInternal;
+    private captionInternal;
+    private disabledInternal;
+    private boldInternal;
     getHtml(patternToUnderline?: RegExp): string;
 }

package/lib/sps-action.d.ts

@@ -1,4 +1,4 @@
-import { MetadataProperty } from "@spscommerce/utils";
+import { MetadataProperty } from '@spscommerce/utils';
 /** Metadata describing an "action" that can be passed in
  * to components such as modal and select.
  */

package/lib/tabs.d.ts

@@ -1,4 +1,4 @@
-import { SpsIcon } from "./icon";
+import { SpsIcon } from './icon';
 export interface SpsTab {
     /** id of the tab itself. */
     id?: string;

package/lib/task-queue.d.ts

@@ -1,5 +1,5 @@
-import { SpsIcon } from "./icon";
-import { SpsActionMethod } from "./sps-action";
+import { SpsIcon } from './icon';
+import { SpsActionMethod } from './sps-action';
 /** The possible statuses for a task in the Task Queue. */
 export declare enum SpsTaskStatus {
     COMPLETED = "completed",
@@ -8,10 +8,10 @@ export declare enum SpsTaskStatus {
     IN_PROGRESS = "in_progress"
 }
 export declare const SpsTaskStatusIcons: Readonly<{
-    [SpsTaskStatus.COMPLETED]: SpsIcon;
-    [SpsTaskStatus.ERRORED]: SpsIcon;
-    [SpsTaskStatus.WARNING]: SpsIcon;
-    [SpsTaskStatus.IN_PROGRESS]: string;
+    completed: SpsIcon;
+    errored: SpsIcon;
+    warning: SpsIcon;
+    in_progress: string;
 }>;
 /** Represents a task in the Task Queue. */
 export interface SpsTask {

package/lib/translations.d.ts

@@ -1,119 +1,120 @@
 declare const _default: {
-    "advancedSearch": {
-        "clear": string;
-        "search": string;
+    advancedSearch: {
+        clear: string;
+        search: string;
     };
-    "button": {
-        "spinningTitle": string;
+    button: {
+        spinningTitle: string;
     };
-    "columnChooser": {
-        "removeButton": string;
+    columnChooser: {
+        removeButton: string;
     };
-    "contentRow": {
-        "collapse": string;
-        "expand": string;
+    contentRow: {
+        collapse: string;
+        expand: string;
     };
-    "datepicker": {
-        "calendar": {
-            "prevMonth": string;
-            "nextMonth": string;
+    datepicker: {
+        calendar: {
+            prevMonth: string;
+            nextMonth: string;
         };
-        "preset": {
-            "custom": string;
-            "today": string;
-            "sevenDays": string;
-            "thirtyDays": string;
-            "sixtyDays": string;
-            "ninetyDays": string;
-            "oneYear": string;
+        preset: {
+            custom: string;
+            today: string;
+            sevenDays: string;
+            thirtyDays: string;
+            sixtyDays: string;
+            ninetyDays: string;
+            oneYear: string;
         };
-        "presetsLabel": string;
-    };
-    "fileUpload": {
-        "acceptedTypes": string;
-        "acceptedTypes_plural": string;
-        "cancelled": string;
-        "cancelled_plural": string;
-        "close": string;
-        "instructions": string;
-        "instructions_plural": string;
-        "maximumSize": string;
-        "processing": string;
-        "title": string;
-    };
-    "focusedTask": {
-        "close": string;
-    };
-    "growler": {
-        "dismiss": string;
-    };
-    "insightCard": {
-        "all": string;
-        "partnerCount": string;
-        "partners": string;
-    };
-    "label": {
-        "errors": {
-            "dateConstraint": {
-                "max": string;
-                "min": string;
+        presetsLabel: string;
+    };
+    fileUpload: {
+        acceptedTypes: string;
+        acceptedTypes_plural: string;
+        cancelled: string;
+        cancelled_plural: string;
+        close: string;
+        instructions: string;
+        instructions_plural: string;
+        maximumSize: string;
+        processing: string;
+        title: string;
+    };
+    focusedTask: {
+        close: string;
+    };
+    growler: {
+        dismiss: string;
+    };
+    insightCard: {
+        all: string;
+        partnerCount: string;
+        partners: string;
+    };
+    label: {
+        errors: {
+            dateConstraint: {
+                max: string;
+                min: string;
             };
-            "dateFormat": string;
-            "dateRangeOrder": string;
-            "dateValidity": string;
-            "max": string;
-            "maxLength": string;
-            "min": string;
-            "minLength": string;
-            "required": string;
+            dateFormat: string;
+            dateRangeOrder: string;
+            dateValidity: string;
+            max: string;
+            maxLength: string;
+            min: string;
+            minLength: string;
+            required: string;
         };
-        "stronglySuggested": string;
-    };
-    "listActionBar": {
-        "clearSelected": string;
-        "itemsSelected": string;
-    };
-    "listToolbar": {
-        "advancedSearchToggle": string;
-    };
-    "modal": {
-        "defaultButtonLabel": string;
-        "defaultTitle": {
-            "general": string;
-            "info": string;
-            "success": string;
-            "warning": string;
+        stronglySuggested: string;
+    };
+    listActionBar: {
+        clearSelected: string;
+        itemsSelected: string;
+    };
+    listToolbar: {
+        advancedSearchToggle: string;
+    };
+    modal: {
+        close: string;
+        defaultButtonLabel: string;
+        defaultTitle: {
+            general: string;
+            info: string;
+            success: string;
+            warning: string;
             "serious-warning": string;
         };
     };
-    "pagination": {
-        "nextPage": string;
-        "ofMany": string;
-        "ofPageCount": string;
-        "page": string;
-        "prevPage": string;
+    pagination: {
+        nextPage: string;
+        ofMany: string;
+        ofPageCount: string;
+        page: string;
+        prevPage: string;
     };
-    "progressBar": {
-        "closeButtonTitle": string;
+    progressBar: {
+        closeButtonTitle: string;
     };
-    "searchResultsBar": {
-        "clear": string;
-        "count": string;
-        "matchingResults": string;
+    searchResultsBar: {
+        clear: string;
+        count: string;
+        matchingResults: string;
     };
-    "select": {
-        "defaultPlaceholder": string;
+    select: {
+        defaultPlaceholder: string;
     };
-    "slackLink": {
-        "label": string;
+    slackLink: {
+        label: string;
     };
-    "spinner": {
-        "defaultAltText": string;
+    spinner: {
+        defaultAltText: string;
     };
-    "taskQueue": {
-        "clearCompleted": string;
-        "newTask": string;
-        "noTasks": string;
+    taskQueue: {
+        clearCompleted: string;
+        newTask: string;
+        noTasks: string;
     };
 };
 export default _default;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@spscommerce/ds-shared",
   "description": "Package for sharing code and types between DS Angular and DS React.",
-  "version": "3.12.2",
+  "version": "3.15.3",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-shared",
   "homepage": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-shared#readme",
   "scripts": {
     "build": "yarn run build:copy-translations && yarn run build:rollup",
-    "build:rollup": "npx rollup -c rollup.config.ts",
+    "build:rollup": "npx rollup -c rollup.config.js",
     "clean": "git clean -fdX",
     "pub": "node ../../../scripts/publish-package.js",
     "build:copy-translations": "echo \"export default \"$(cat ../i18n/locales/en-US/design-system.json)\";\" > src/translations.ts"
@@ -20,12 +20,13 @@
   "module": "./lib/index.esm.js",
   "types": "./lib/index.d.ts",
   "peerDependencies": {
-    "@spscommerce/utils": "^3.12.2",
+    "@spscommerce/utils": "^3.15.3",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28"
   },
   "devDependencies": {
-    "@spscommerce/utils": "^3.12.2",
+    "@types/react": "^16.8.8",
+    "@spscommerce/utils": "^3.15.3",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28"
   }

package/rollup.config.js

@@ -0,0 +1,24 @@
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import typescript from "rollup-plugin-typescript2";
+import pkg from "./package.json";
+
+export default {
+  input: "src/index.ts",
+  output: [
+    {
+      file: pkg.main,
+      format: "cjs",
+    },
+    {
+      file: pkg.module,
+      format: "es",
+    },
+  ],
+  external: Object.keys(pkg.peerDependencies || {}),
+  plugins: [
+    resolve(),
+    commonjs(),
+    typescript(),
+  ],
+};