@elliemae/ds-spinner 3.5.0-rc.5 → 3.5.0-rc.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -37,49 +37,55 @@ const blockName = "spinner";
37
37
  const SpinnerContainer = (0, import_ds_classnames.aggregatedClasses)("div")(blockName);
38
38
  const SpinnerMessage = (0, import_ds_classnames.aggregatedClasses)("span")(blockName, "message");
39
39
  const Spinner = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "spinner");
40
- const DSSpinner = ({ containerProps = {}, innerRef, message, size, ...otherProps }) => /* @__PURE__ */ import_react.default.createElement(SpinnerContainer, {
41
- ...containerProps,
42
- ref: innerRef,
43
- "aria-busy": true,
44
- "aria-label": message,
45
- "aria-live": "polite",
46
- role: "alert",
47
- ...otherProps
48
- }, /* @__PURE__ */ import_react.default.createElement(Spinner, {
49
- classProps: { size }
50
- }, /* @__PURE__ */ import_react.default.createElement("svg", {
51
- className: `${blockName}-tl`,
52
- viewBox: "0 0 16.6 16.6",
53
- xmlns: "http://www.w3.org/2000/svg"
54
- }, /* @__PURE__ */ import_react.default.createElement("path", {
55
- d: "M16.1.5A15.6,15.6,0,0,0,.5,16.1,15.6,15.6,0,0,0,16.1.5Z",
56
- fill: "#408a90",
57
- stroke: "#fbfbfb"
58
- })), /* @__PURE__ */ import_react.default.createElement("svg", {
59
- className: `${blockName}-tr`,
60
- viewBox: "0 0 16.6 16.6",
61
- xmlns: "http://www.w3.org/2000/svg"
62
- }, /* @__PURE__ */ import_react.default.createElement("path", {
63
- d: "M16.1,16.1A15.6,15.6,0,0,0,.5.5,15.6,15.6,0,0,0,16.1,16.1Z",
64
- fill: "#f7901e",
65
- stroke: "#fbfbfb"
66
- })), /* @__PURE__ */ import_react.default.createElement("svg", {
67
- className: `${blockName}-br`,
68
- viewBox: "0 0 16.6 16.6",
69
- xmlns: "http://www.w3.org/2000/svg"
70
- }, /* @__PURE__ */ import_react.default.createElement("path", {
71
- d: "M.5.5A15.6,15.6,0,0,0,16.1,16.1,15.6,15.6,0,0,0,.5.5Z",
72
- fill: "#0067ab",
73
- stroke: "#fbfbfb"
74
- })), /* @__PURE__ */ import_react.default.createElement("svg", {
75
- className: `${blockName}-bl`,
76
- viewBox: "0 0 16.6 16.6",
77
- xmlns: "http://www.w3.org/2000/svg"
78
- }, /* @__PURE__ */ import_react.default.createElement("path", {
79
- d: "M16.1.5A15.6,15.6,0,0,0,.5,16.1,15.6,15.6,0,0,0,16.1.5Z",
80
- fill: "#00acdc",
81
- stroke: "#fbfbfb"
82
- }))), message && /* @__PURE__ */ import_react.default.createElement(SpinnerMessage, null, message));
40
+ const DSSpinner = ({ containerProps = {}, ariaLabel, spinner, innerRef, message, size, ...otherProps }) => {
41
+ console.log(spinner, "CustomSpinner2");
42
+ return /* @__PURE__ */ import_react.default.createElement(SpinnerContainer, {
43
+ ...containerProps,
44
+ ref: innerRef,
45
+ "aria-busy": "true",
46
+ ...otherProps
47
+ }, spinner && /* @__PURE__ */ import_react.default.createElement(Spinner, {
48
+ classProps: { size }
49
+ }, /* @__PURE__ */ import_react.default.createElement("svg", {
50
+ className: `${blockName}-tl`,
51
+ viewBox: "0 0 16.6 16.6",
52
+ xmlns: "http://www.w3.org/2000/svg"
53
+ }, /* @__PURE__ */ import_react.default.createElement("path", {
54
+ d: "M16.1.5A15.6,15.6,0,0,0,.5,16.1,15.6,15.6,0,0,0,16.1.5Z",
55
+ fill: "#408a90",
56
+ stroke: "#fbfbfb"
57
+ })), /* @__PURE__ */ import_react.default.createElement("svg", {
58
+ className: `${blockName}-tr`,
59
+ viewBox: "0 0 16.6 16.6",
60
+ xmlns: "http://www.w3.org/2000/svg"
61
+ }, /* @__PURE__ */ import_react.default.createElement("path", {
62
+ d: "M16.1,16.1A15.6,15.6,0,0,0,.5.5,15.6,15.6,0,0,0,16.1,16.1Z",
63
+ fill: "#f7901e",
64
+ stroke: "#fbfbfb"
65
+ })), /* @__PURE__ */ import_react.default.createElement("svg", {
66
+ className: `${blockName}-br`,
67
+ viewBox: "0 0 16.6 16.6",
68
+ xmlns: "http://www.w3.org/2000/svg"
69
+ }, /* @__PURE__ */ import_react.default.createElement("path", {
70
+ d: "M.5.5A15.6,15.6,0,0,0,16.1,16.1,15.6,15.6,0,0,0,.5.5Z",
71
+ fill: "#0067ab",
72
+ stroke: "#fbfbfb"
73
+ })), /* @__PURE__ */ import_react.default.createElement("svg", {
74
+ className: `${blockName}-bl`,
75
+ viewBox: "0 0 16.6 16.6",
76
+ xmlns: "http://www.w3.org/2000/svg"
77
+ }, /* @__PURE__ */ import_react.default.createElement("path", {
78
+ d: "M16.1.5A15.6,15.6,0,0,0,.5,16.1,15.6,15.6,0,0,0,16.1.5Z",
79
+ fill: "#00acdc",
80
+ stroke: "#fbfbfb"
81
+ }))), message && /* @__PURE__ */ import_react.default.createElement(SpinnerMessage, {
82
+ ariaHidden: "true"
83
+ }, message), (ariaLabel || message) && /* @__PURE__ */ import_react.default.createElement(SpinnerMessage, {
84
+ role: "alert",
85
+ "aria-live": "polite",
86
+ "aria-label": ariaLabel || message
87
+ }));
88
+ };
83
89
  DSSpinner.defaultProps = {
84
90
  containerProps: {},
85
91
  message: "",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/DSSpinner.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'spinner';\n\nconst SpinnerContainer = aggregatedClasses('div')(blockName);\nconst SpinnerMessage = aggregatedClasses('span')(blockName, 'message');\nconst Spinner = aggregatedClasses('div')(blockName, 'spinner');\n\n// TODO: do we want dynamic position of the text (top, right, bottom, left)?\n\nconst DSSpinner = ({ containerProps = {}, innerRef, message, size, ...otherProps }) => (\n <SpinnerContainer\n {...containerProps}\n ref={innerRef}\n aria-busy\n aria-label={message}\n aria-live=\"polite\"\n role=\"alert\"\n {...otherProps}\n >\n <Spinner classProps={{ size }}>\n <svg className={`${blockName}-tl`} viewBox=\"0 0 16.6 16.6\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.1.5A15.6,15.6,0,0,0,.5,16.1,15.6,15.6,0,0,0,16.1.5Z\" fill=\"#408a90\" stroke=\"#fbfbfb\" />\n </svg>\n <svg className={`${blockName}-tr`} viewBox=\"0 0 16.6 16.6\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.1,16.1A15.6,15.6,0,0,0,.5.5,15.6,15.6,0,0,0,16.1,16.1Z\" fill=\"#f7901e\" stroke=\"#fbfbfb\" />\n </svg>\n <svg className={`${blockName}-br`} viewBox=\"0 0 16.6 16.6\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M.5.5A15.6,15.6,0,0,0,16.1,16.1,15.6,15.6,0,0,0,.5.5Z\" fill=\"#0067ab\" stroke=\"#fbfbfb\" />\n </svg>\n <svg className={`${blockName}-bl`} viewBox=\"0 0 16.6 16.6\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.1.5A15.6,15.6,0,0,0,.5,16.1,15.6,15.6,0,0,0,16.1.5Z\" fill=\"#00acdc\" stroke=\"#fbfbfb\" />\n </svg>\n </Spinner>\n {message && <SpinnerMessage>{message}</SpinnerMessage>}\n </SpinnerContainer>\n);\n\nDSSpinner.defaultProps = {\n containerProps: {},\n message: '',\n size: 'm',\n};\n\nconst spinnerProps = {\n innerRef: PropTypes.object.description('ref to the component s container'),\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n message: PropTypes.string.description('Text below the spinner'),\n size: PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl']).description('Spinner size').defaultValue('m'),\n};\n\nDSSpinner.propTypes = spinnerProps;\nDSSpinner.displayName = 'DSSpinner';\nconst SpinnerWithSchema = describe(DSSpinner);\nSpinnerWithSchema.propTypes = spinnerProps;\n\nexport { DSSpinner, SpinnerWithSchema };\nexport default DSSpinner;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,0BAAoC;AACpC,2BAAkC;AAElC,MAAM,YAAY;AAElB,MAAM,uBAAmB,wCAAkB,KAAK,EAAE,SAAS;AAC3D,MAAM,qBAAiB,wCAAkB,MAAM,EAAE,WAAW,SAAS;AACrE,MAAM,cAAU,wCAAkB,KAAK,EAAE,WAAW,SAAS;AAI7D,MAAM,YAAY,CAAC,EAAE,iBAAiB,CAAC,GAAG,UAAU,SAAS,SAAS,WAAW,MAC/E,6BAAAA,QAAA,cAAC;AAAA,EACE,GAAG;AAAA,EACJ,KAAK;AAAA,EACL,aAAS;AAAA,EACT,cAAY;AAAA,EACZ,aAAU;AAAA,EACV,MAAK;AAAA,EACJ,GAAG;AAAA,GAEJ,6BAAAA,QAAA,cAAC;AAAA,EAAQ,YAAY,EAAE,KAAK;AAAA,GAC1B,6BAAAA,QAAA,cAAC;AAAA,EAAI,WAAW,GAAG;AAAA,EAAgB,SAAQ;AAAA,EAAgB,OAAM;AAAA,GAC/D,6BAAAA,QAAA,cAAC;AAAA,EAAK,GAAE;AAAA,EAA0D,MAAK;AAAA,EAAU,QAAO;AAAA,CAAU,CACpG,GACA,6BAAAA,QAAA,cAAC;AAAA,EAAI,WAAW,GAAG;AAAA,EAAgB,SAAQ;AAAA,EAAgB,OAAM;AAAA,GAC/D,6BAAAA,QAAA,cAAC;AAAA,EAAK,GAAE;AAAA,EAA6D,MAAK;AAAA,EAAU,QAAO;AAAA,CAAU,CACvG,GACA,6BAAAA,QAAA,cAAC;AAAA,EAAI,WAAW,GAAG;AAAA,EAAgB,SAAQ;AAAA,EAAgB,OAAM;AAAA,GAC/D,6BAAAA,QAAA,cAAC;AAAA,EAAK,GAAE;AAAA,EAAwD,MAAK;AAAA,EAAU,QAAO;AAAA,CAAU,CAClG,GACA,6BAAAA,QAAA,cAAC;AAAA,EAAI,WAAW,GAAG;AAAA,EAAgB,SAAQ;AAAA,EAAgB,OAAM;AAAA,GAC/D,6BAAAA,QAAA,cAAC;AAAA,EAAK,GAAE;AAAA,EAA0D,MAAK;AAAA,EAAU,QAAO;AAAA,CAAU,CACpG,CACF,GACC,WAAW,6BAAAA,QAAA,cAAC,sBAAgB,OAAQ,CACvC;AAGF,UAAU,eAAe;AAAA,EACvB,gBAAgB,CAAC;AAAA,EACjB,SAAS;AAAA,EACT,MAAM;AACR;AAEA,MAAM,eAAe;AAAA,EACnB,UAAU,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EACzE,gBAAgB,8BAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,SAAS,8BAAU,OAAO,YAAY,wBAAwB;AAAA,EAC9D,MAAM,8BAAU,MAAM,CAAC,OAAO,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,GAAG;AAC/G;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,wBAAoB,8BAAS,SAAS;AAC5C,kBAAkB,YAAY;AAG9B,IAAO,oBAAQ;",
4
+ "sourcesContent": ["/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'spinner';\n\nconst SpinnerContainer = aggregatedClasses('div')(blockName);\nconst SpinnerMessage = aggregatedClasses('span')(blockName, 'message');\nconst Spinner = aggregatedClasses('div')(blockName, 'spinner');\n\n// TODO: do we want dynamic position of the text (top, right, bottom, left)?\nconst DSSpinner = ({ containerProps = {}, ariaLabel, spinner, innerRef, message, size, ...otherProps }) => {\n console.log(spinner, 'CustomSpinner2');\n return (\n <SpinnerContainer {...containerProps} ref={innerRef} aria-busy=\"true\" {...otherProps}>\n {spinner && (\n <Spinner classProps={{ size }}>\n <svg className={`${blockName}-tl`} viewBox=\"0 0 16.6 16.6\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.1.5A15.6,15.6,0,0,0,.5,16.1,15.6,15.6,0,0,0,16.1.5Z\" fill=\"#408a90\" stroke=\"#fbfbfb\" />\n </svg>\n <svg className={`${blockName}-tr`} viewBox=\"0 0 16.6 16.6\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.1,16.1A15.6,15.6,0,0,0,.5.5,15.6,15.6,0,0,0,16.1,16.1Z\" fill=\"#f7901e\" stroke=\"#fbfbfb\" />\n </svg>\n <svg className={`${blockName}-br`} viewBox=\"0 0 16.6 16.6\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M.5.5A15.6,15.6,0,0,0,16.1,16.1,15.6,15.6,0,0,0,.5.5Z\" fill=\"#0067ab\" stroke=\"#fbfbfb\" />\n </svg>\n <svg className={`${blockName}-bl`} viewBox=\"0 0 16.6 16.6\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.1.5A15.6,15.6,0,0,0,.5,16.1,15.6,15.6,0,0,0,16.1.5Z\" fill=\"#00acdc\" stroke=\"#fbfbfb\" />\n </svg>\n </Spinner>\n )}\n {message && <SpinnerMessage ariaHidden=\"true\">{message}</SpinnerMessage>}\n {(ariaLabel || message) && <SpinnerMessage role=\"alert\" aria-live=\"polite\" aria-label={ariaLabel || message} />}\n </SpinnerContainer>\n );\n};\n\nDSSpinner.defaultProps = {\n containerProps: {},\n message: '',\n size: 'm',\n};\n\nconst spinnerProps = {\n innerRef: PropTypes.object.description('ref to the component s container'),\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n message: PropTypes.string.description('Text below the spinner'),\n size: PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl']).description('Spinner size').defaultValue('m'),\n};\n\nDSSpinner.propTypes = spinnerProps;\nDSSpinner.displayName = 'DSSpinner';\nconst SpinnerWithSchema = describe(DSSpinner);\nSpinnerWithSchema.propTypes = spinnerProps;\n\nexport { DSSpinner, SpinnerWithSchema };\nexport default DSSpinner;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,0BAAoC;AACpC,2BAAkC;AAElC,MAAM,YAAY;AAElB,MAAM,uBAAmB,wCAAkB,KAAK,EAAE,SAAS;AAC3D,MAAM,qBAAiB,wCAAkB,MAAM,EAAE,WAAW,SAAS;AACrE,MAAM,cAAU,wCAAkB,KAAK,EAAE,WAAW,SAAS;AAG7D,MAAM,YAAY,CAAC,EAAE,iBAAiB,CAAC,GAAG,WAAW,SAAS,UAAU,SAAS,SAAS,WAAW,MAAM;AACzG,UAAQ,IAAI,SAAS,gBAAgB;AACrC,SACE,6BAAAA,QAAA,cAAC;AAAA,IAAkB,GAAG;AAAA,IAAgB,KAAK;AAAA,IAAU,aAAU;AAAA,IAAQ,GAAG;AAAA,KACvE,WACC,6BAAAA,QAAA,cAAC;AAAA,IAAQ,YAAY,EAAE,KAAK;AAAA,KAC1B,6BAAAA,QAAA,cAAC;AAAA,IAAI,WAAW,GAAG;AAAA,IAAgB,SAAQ;AAAA,IAAgB,OAAM;AAAA,KAC/D,6BAAAA,QAAA,cAAC;AAAA,IAAK,GAAE;AAAA,IAA0D,MAAK;AAAA,IAAU,QAAO;AAAA,GAAU,CACpG,GACA,6BAAAA,QAAA,cAAC;AAAA,IAAI,WAAW,GAAG;AAAA,IAAgB,SAAQ;AAAA,IAAgB,OAAM;AAAA,KAC/D,6BAAAA,QAAA,cAAC;AAAA,IAAK,GAAE;AAAA,IAA6D,MAAK;AAAA,IAAU,QAAO;AAAA,GAAU,CACvG,GACA,6BAAAA,QAAA,cAAC;AAAA,IAAI,WAAW,GAAG;AAAA,IAAgB,SAAQ;AAAA,IAAgB,OAAM;AAAA,KAC/D,6BAAAA,QAAA,cAAC;AAAA,IAAK,GAAE;AAAA,IAAwD,MAAK;AAAA,IAAU,QAAO;AAAA,GAAU,CAClG,GACA,6BAAAA,QAAA,cAAC;AAAA,IAAI,WAAW,GAAG;AAAA,IAAgB,SAAQ;AAAA,IAAgB,OAAM;AAAA,KAC/D,6BAAAA,QAAA,cAAC;AAAA,IAAK,GAAE;AAAA,IAA0D,MAAK;AAAA,IAAU,QAAO;AAAA,GAAU,CACpG,CACF,GAED,WAAW,6BAAAA,QAAA,cAAC;AAAA,IAAe,YAAW;AAAA,KAAQ,OAAQ,IACrD,aAAa,YAAY,6BAAAA,QAAA,cAAC;AAAA,IAAe,MAAK;AAAA,IAAQ,aAAU;AAAA,IAAS,cAAY,aAAa;AAAA,GAAS,CAC/G;AAEJ;AAEA,UAAU,eAAe;AAAA,EACvB,gBAAgB,CAAC;AAAA,EACjB,SAAS;AAAA,EACT,MAAM;AACR;AAEA,MAAM,eAAe;AAAA,EACnB,UAAU,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EACzE,gBAAgB,8BAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,SAAS,8BAAU,OAAO,YAAY,wBAAwB;AAAA,EAC9D,MAAM,8BAAU,MAAM,CAAC,OAAO,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,GAAG;AAC/G;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,wBAAoB,8BAAS,SAAS;AAC5C,kBAAkB,YAAY;AAG9B,IAAO,oBAAQ;",
6
6
  "names": ["React"]
7
7
  }
@@ -6,49 +6,55 @@ const blockName = "spinner";
6
6
  const SpinnerContainer = aggregatedClasses("div")(blockName);
7
7
  const SpinnerMessage = aggregatedClasses("span")(blockName, "message");
8
8
  const Spinner = aggregatedClasses("div")(blockName, "spinner");
9
- const DSSpinner = ({ containerProps = {}, innerRef, message, size, ...otherProps }) => /* @__PURE__ */ React2.createElement(SpinnerContainer, {
10
- ...containerProps,
11
- ref: innerRef,
12
- "aria-busy": true,
13
- "aria-label": message,
14
- "aria-live": "polite",
15
- role: "alert",
16
- ...otherProps
17
- }, /* @__PURE__ */ React2.createElement(Spinner, {
18
- classProps: { size }
19
- }, /* @__PURE__ */ React2.createElement("svg", {
20
- className: `${blockName}-tl`,
21
- viewBox: "0 0 16.6 16.6",
22
- xmlns: "http://www.w3.org/2000/svg"
23
- }, /* @__PURE__ */ React2.createElement("path", {
24
- d: "M16.1.5A15.6,15.6,0,0,0,.5,16.1,15.6,15.6,0,0,0,16.1.5Z",
25
- fill: "#408a90",
26
- stroke: "#fbfbfb"
27
- })), /* @__PURE__ */ React2.createElement("svg", {
28
- className: `${blockName}-tr`,
29
- viewBox: "0 0 16.6 16.6",
30
- xmlns: "http://www.w3.org/2000/svg"
31
- }, /* @__PURE__ */ React2.createElement("path", {
32
- d: "M16.1,16.1A15.6,15.6,0,0,0,.5.5,15.6,15.6,0,0,0,16.1,16.1Z",
33
- fill: "#f7901e",
34
- stroke: "#fbfbfb"
35
- })), /* @__PURE__ */ React2.createElement("svg", {
36
- className: `${blockName}-br`,
37
- viewBox: "0 0 16.6 16.6",
38
- xmlns: "http://www.w3.org/2000/svg"
39
- }, /* @__PURE__ */ React2.createElement("path", {
40
- d: "M.5.5A15.6,15.6,0,0,0,16.1,16.1,15.6,15.6,0,0,0,.5.5Z",
41
- fill: "#0067ab",
42
- stroke: "#fbfbfb"
43
- })), /* @__PURE__ */ React2.createElement("svg", {
44
- className: `${blockName}-bl`,
45
- viewBox: "0 0 16.6 16.6",
46
- xmlns: "http://www.w3.org/2000/svg"
47
- }, /* @__PURE__ */ React2.createElement("path", {
48
- d: "M16.1.5A15.6,15.6,0,0,0,.5,16.1,15.6,15.6,0,0,0,16.1.5Z",
49
- fill: "#00acdc",
50
- stroke: "#fbfbfb"
51
- }))), message && /* @__PURE__ */ React2.createElement(SpinnerMessage, null, message));
9
+ const DSSpinner = ({ containerProps = {}, ariaLabel, spinner, innerRef, message, size, ...otherProps }) => {
10
+ console.log(spinner, "CustomSpinner2");
11
+ return /* @__PURE__ */ React2.createElement(SpinnerContainer, {
12
+ ...containerProps,
13
+ ref: innerRef,
14
+ "aria-busy": "true",
15
+ ...otherProps
16
+ }, spinner && /* @__PURE__ */ React2.createElement(Spinner, {
17
+ classProps: { size }
18
+ }, /* @__PURE__ */ React2.createElement("svg", {
19
+ className: `${blockName}-tl`,
20
+ viewBox: "0 0 16.6 16.6",
21
+ xmlns: "http://www.w3.org/2000/svg"
22
+ }, /* @__PURE__ */ React2.createElement("path", {
23
+ d: "M16.1.5A15.6,15.6,0,0,0,.5,16.1,15.6,15.6,0,0,0,16.1.5Z",
24
+ fill: "#408a90",
25
+ stroke: "#fbfbfb"
26
+ })), /* @__PURE__ */ React2.createElement("svg", {
27
+ className: `${blockName}-tr`,
28
+ viewBox: "0 0 16.6 16.6",
29
+ xmlns: "http://www.w3.org/2000/svg"
30
+ }, /* @__PURE__ */ React2.createElement("path", {
31
+ d: "M16.1,16.1A15.6,15.6,0,0,0,.5.5,15.6,15.6,0,0,0,16.1,16.1Z",
32
+ fill: "#f7901e",
33
+ stroke: "#fbfbfb"
34
+ })), /* @__PURE__ */ React2.createElement("svg", {
35
+ className: `${blockName}-br`,
36
+ viewBox: "0 0 16.6 16.6",
37
+ xmlns: "http://www.w3.org/2000/svg"
38
+ }, /* @__PURE__ */ React2.createElement("path", {
39
+ d: "M.5.5A15.6,15.6,0,0,0,16.1,16.1,15.6,15.6,0,0,0,.5.5Z",
40
+ fill: "#0067ab",
41
+ stroke: "#fbfbfb"
42
+ })), /* @__PURE__ */ React2.createElement("svg", {
43
+ className: `${blockName}-bl`,
44
+ viewBox: "0 0 16.6 16.6",
45
+ xmlns: "http://www.w3.org/2000/svg"
46
+ }, /* @__PURE__ */ React2.createElement("path", {
47
+ d: "M16.1.5A15.6,15.6,0,0,0,.5,16.1,15.6,15.6,0,0,0,16.1.5Z",
48
+ fill: "#00acdc",
49
+ stroke: "#fbfbfb"
50
+ }))), message && /* @__PURE__ */ React2.createElement(SpinnerMessage, {
51
+ ariaHidden: "true"
52
+ }, message), (ariaLabel || message) && /* @__PURE__ */ React2.createElement(SpinnerMessage, {
53
+ role: "alert",
54
+ "aria-live": "polite",
55
+ "aria-label": ariaLabel || message
56
+ }));
57
+ };
52
58
  DSSpinner.defaultProps = {
53
59
  containerProps: {},
54
60
  message: "",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSSpinner.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'spinner';\n\nconst SpinnerContainer = aggregatedClasses('div')(blockName);\nconst SpinnerMessage = aggregatedClasses('span')(blockName, 'message');\nconst Spinner = aggregatedClasses('div')(blockName, 'spinner');\n\n// TODO: do we want dynamic position of the text (top, right, bottom, left)?\n\nconst DSSpinner = ({ containerProps = {}, innerRef, message, size, ...otherProps }) => (\n <SpinnerContainer\n {...containerProps}\n ref={innerRef}\n aria-busy\n aria-label={message}\n aria-live=\"polite\"\n role=\"alert\"\n {...otherProps}\n >\n <Spinner classProps={{ size }}>\n <svg className={`${blockName}-tl`} viewBox=\"0 0 16.6 16.6\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.1.5A15.6,15.6,0,0,0,.5,16.1,15.6,15.6,0,0,0,16.1.5Z\" fill=\"#408a90\" stroke=\"#fbfbfb\" />\n </svg>\n <svg className={`${blockName}-tr`} viewBox=\"0 0 16.6 16.6\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.1,16.1A15.6,15.6,0,0,0,.5.5,15.6,15.6,0,0,0,16.1,16.1Z\" fill=\"#f7901e\" stroke=\"#fbfbfb\" />\n </svg>\n <svg className={`${blockName}-br`} viewBox=\"0 0 16.6 16.6\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M.5.5A15.6,15.6,0,0,0,16.1,16.1,15.6,15.6,0,0,0,.5.5Z\" fill=\"#0067ab\" stroke=\"#fbfbfb\" />\n </svg>\n <svg className={`${blockName}-bl`} viewBox=\"0 0 16.6 16.6\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.1.5A15.6,15.6,0,0,0,.5,16.1,15.6,15.6,0,0,0,16.1.5Z\" fill=\"#00acdc\" stroke=\"#fbfbfb\" />\n </svg>\n </Spinner>\n {message && <SpinnerMessage>{message}</SpinnerMessage>}\n </SpinnerContainer>\n);\n\nDSSpinner.defaultProps = {\n containerProps: {},\n message: '',\n size: 'm',\n};\n\nconst spinnerProps = {\n innerRef: PropTypes.object.description('ref to the component s container'),\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n message: PropTypes.string.description('Text below the spinner'),\n size: PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl']).description('Spinner size').defaultValue('m'),\n};\n\nDSSpinner.propTypes = spinnerProps;\nDSSpinner.displayName = 'DSSpinner';\nconst SpinnerWithSchema = describe(DSSpinner);\nSpinnerWithSchema.propTypes = spinnerProps;\n\nexport { DSSpinner, SpinnerWithSchema };\nexport default DSSpinner;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACCvB,OAAOA,YAAW;AAClB,SAAS,UAAU,iBAAiB;AACpC,SAAS,yBAAyB;AAElC,MAAM,YAAY;AAElB,MAAM,mBAAmB,kBAAkB,KAAK,EAAE,SAAS;AAC3D,MAAM,iBAAiB,kBAAkB,MAAM,EAAE,WAAW,SAAS;AACrE,MAAM,UAAU,kBAAkB,KAAK,EAAE,WAAW,SAAS;AAI7D,MAAM,YAAY,CAAC,EAAE,iBAAiB,CAAC,GAAG,UAAU,SAAS,SAAS,WAAW,MAC/E,gBAAAA,OAAA,cAAC;AAAA,EACE,GAAG;AAAA,EACJ,KAAK;AAAA,EACL,aAAS;AAAA,EACT,cAAY;AAAA,EACZ,aAAU;AAAA,EACV,MAAK;AAAA,EACJ,GAAG;AAAA,GAEJ,gBAAAA,OAAA,cAAC;AAAA,EAAQ,YAAY,EAAE,KAAK;AAAA,GAC1B,gBAAAA,OAAA,cAAC;AAAA,EAAI,WAAW,GAAG;AAAA,EAAgB,SAAQ;AAAA,EAAgB,OAAM;AAAA,GAC/D,gBAAAA,OAAA,cAAC;AAAA,EAAK,GAAE;AAAA,EAA0D,MAAK;AAAA,EAAU,QAAO;AAAA,CAAU,CACpG,GACA,gBAAAA,OAAA,cAAC;AAAA,EAAI,WAAW,GAAG;AAAA,EAAgB,SAAQ;AAAA,EAAgB,OAAM;AAAA,GAC/D,gBAAAA,OAAA,cAAC;AAAA,EAAK,GAAE;AAAA,EAA6D,MAAK;AAAA,EAAU,QAAO;AAAA,CAAU,CACvG,GACA,gBAAAA,OAAA,cAAC;AAAA,EAAI,WAAW,GAAG;AAAA,EAAgB,SAAQ;AAAA,EAAgB,OAAM;AAAA,GAC/D,gBAAAA,OAAA,cAAC;AAAA,EAAK,GAAE;AAAA,EAAwD,MAAK;AAAA,EAAU,QAAO;AAAA,CAAU,CAClG,GACA,gBAAAA,OAAA,cAAC;AAAA,EAAI,WAAW,GAAG;AAAA,EAAgB,SAAQ;AAAA,EAAgB,OAAM;AAAA,GAC/D,gBAAAA,OAAA,cAAC;AAAA,EAAK,GAAE;AAAA,EAA0D,MAAK;AAAA,EAAU,QAAO;AAAA,CAAU,CACpG,CACF,GACC,WAAW,gBAAAA,OAAA,cAAC,sBAAgB,OAAQ,CACvC;AAGF,UAAU,eAAe;AAAA,EACvB,gBAAgB,CAAC;AAAA,EACjB,SAAS;AAAA,EACT,MAAM;AACR;AAEA,MAAM,eAAe;AAAA,EACnB,UAAU,UAAU,OAAO,YAAY,kCAAkC;AAAA,EACzE,gBAAgB,UAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,SAAS,UAAU,OAAO,YAAY,wBAAwB;AAAA,EAC9D,MAAM,UAAU,MAAM,CAAC,OAAO,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,GAAG;AAC/G;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,oBAAoB,SAAS,SAAS;AAC5C,kBAAkB,YAAY;AAG9B,IAAO,oBAAQ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'spinner';\n\nconst SpinnerContainer = aggregatedClasses('div')(blockName);\nconst SpinnerMessage = aggregatedClasses('span')(blockName, 'message');\nconst Spinner = aggregatedClasses('div')(blockName, 'spinner');\n\n// TODO: do we want dynamic position of the text (top, right, bottom, left)?\nconst DSSpinner = ({ containerProps = {}, ariaLabel, spinner, innerRef, message, size, ...otherProps }) => {\n console.log(spinner, 'CustomSpinner2');\n return (\n <SpinnerContainer {...containerProps} ref={innerRef} aria-busy=\"true\" {...otherProps}>\n {spinner && (\n <Spinner classProps={{ size }}>\n <svg className={`${blockName}-tl`} viewBox=\"0 0 16.6 16.6\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.1.5A15.6,15.6,0,0,0,.5,16.1,15.6,15.6,0,0,0,16.1.5Z\" fill=\"#408a90\" stroke=\"#fbfbfb\" />\n </svg>\n <svg className={`${blockName}-tr`} viewBox=\"0 0 16.6 16.6\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.1,16.1A15.6,15.6,0,0,0,.5.5,15.6,15.6,0,0,0,16.1,16.1Z\" fill=\"#f7901e\" stroke=\"#fbfbfb\" />\n </svg>\n <svg className={`${blockName}-br`} viewBox=\"0 0 16.6 16.6\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M.5.5A15.6,15.6,0,0,0,16.1,16.1,15.6,15.6,0,0,0,.5.5Z\" fill=\"#0067ab\" stroke=\"#fbfbfb\" />\n </svg>\n <svg className={`${blockName}-bl`} viewBox=\"0 0 16.6 16.6\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.1.5A15.6,15.6,0,0,0,.5,16.1,15.6,15.6,0,0,0,16.1.5Z\" fill=\"#00acdc\" stroke=\"#fbfbfb\" />\n </svg>\n </Spinner>\n )}\n {message && <SpinnerMessage ariaHidden=\"true\">{message}</SpinnerMessage>}\n {(ariaLabel || message) && <SpinnerMessage role=\"alert\" aria-live=\"polite\" aria-label={ariaLabel || message} />}\n </SpinnerContainer>\n );\n};\n\nDSSpinner.defaultProps = {\n containerProps: {},\n message: '',\n size: 'm',\n};\n\nconst spinnerProps = {\n innerRef: PropTypes.object.description('ref to the component s container'),\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n message: PropTypes.string.description('Text below the spinner'),\n size: PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl']).description('Spinner size').defaultValue('m'),\n};\n\nDSSpinner.propTypes = spinnerProps;\nDSSpinner.displayName = 'DSSpinner';\nconst SpinnerWithSchema = describe(DSSpinner);\nSpinnerWithSchema.propTypes = spinnerProps;\n\nexport { DSSpinner, SpinnerWithSchema };\nexport default DSSpinner;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB,OAAOA,YAAW;AAClB,SAAS,UAAU,iBAAiB;AACpC,SAAS,yBAAyB;AAElC,MAAM,YAAY;AAElB,MAAM,mBAAmB,kBAAkB,KAAK,EAAE,SAAS;AAC3D,MAAM,iBAAiB,kBAAkB,MAAM,EAAE,WAAW,SAAS;AACrE,MAAM,UAAU,kBAAkB,KAAK,EAAE,WAAW,SAAS;AAG7D,MAAM,YAAY,CAAC,EAAE,iBAAiB,CAAC,GAAG,WAAW,SAAS,UAAU,SAAS,SAAS,WAAW,MAAM;AACzG,UAAQ,IAAI,SAAS,gBAAgB;AACrC,SACE,gBAAAA,OAAA,cAAC;AAAA,IAAkB,GAAG;AAAA,IAAgB,KAAK;AAAA,IAAU,aAAU;AAAA,IAAQ,GAAG;AAAA,KACvE,WACC,gBAAAA,OAAA,cAAC;AAAA,IAAQ,YAAY,EAAE,KAAK;AAAA,KAC1B,gBAAAA,OAAA,cAAC;AAAA,IAAI,WAAW,GAAG;AAAA,IAAgB,SAAQ;AAAA,IAAgB,OAAM;AAAA,KAC/D,gBAAAA,OAAA,cAAC;AAAA,IAAK,GAAE;AAAA,IAA0D,MAAK;AAAA,IAAU,QAAO;AAAA,GAAU,CACpG,GACA,gBAAAA,OAAA,cAAC;AAAA,IAAI,WAAW,GAAG;AAAA,IAAgB,SAAQ;AAAA,IAAgB,OAAM;AAAA,KAC/D,gBAAAA,OAAA,cAAC;AAAA,IAAK,GAAE;AAAA,IAA6D,MAAK;AAAA,IAAU,QAAO;AAAA,GAAU,CACvG,GACA,gBAAAA,OAAA,cAAC;AAAA,IAAI,WAAW,GAAG;AAAA,IAAgB,SAAQ;AAAA,IAAgB,OAAM;AAAA,KAC/D,gBAAAA,OAAA,cAAC;AAAA,IAAK,GAAE;AAAA,IAAwD,MAAK;AAAA,IAAU,QAAO;AAAA,GAAU,CAClG,GACA,gBAAAA,OAAA,cAAC;AAAA,IAAI,WAAW,GAAG;AAAA,IAAgB,SAAQ;AAAA,IAAgB,OAAM;AAAA,KAC/D,gBAAAA,OAAA,cAAC;AAAA,IAAK,GAAE;AAAA,IAA0D,MAAK;AAAA,IAAU,QAAO;AAAA,GAAU,CACpG,CACF,GAED,WAAW,gBAAAA,OAAA,cAAC;AAAA,IAAe,YAAW;AAAA,KAAQ,OAAQ,IACrD,aAAa,YAAY,gBAAAA,OAAA,cAAC;AAAA,IAAe,MAAK;AAAA,IAAQ,aAAU;AAAA,IAAS,cAAY,aAAa;AAAA,GAAS,CAC/G;AAEJ;AAEA,UAAU,eAAe;AAAA,EACvB,gBAAgB,CAAC;AAAA,EACjB,SAAS;AAAA,EACT,MAAM;AACR;AAEA,MAAM,eAAe;AAAA,EACnB,UAAU,UAAU,OAAO,YAAY,kCAAkC;AAAA,EACzE,gBAAgB,UAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,SAAS,UAAU,OAAO,YAAY,wBAAwB;AAAA,EAC9D,MAAM,UAAU,MAAM,CAAC,OAAO,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,cAAc,EAAE,aAAa,GAAG;AAC/G;AAEA,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,MAAM,oBAAoB,SAAS,SAAS;AAC5C,kBAAkB,YAAY;AAG9B,IAAO,oBAAQ;",
6
6
  "names": ["React"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-spinner",
3
- "version": "3.5.0-rc.5",
3
+ "version": "3.5.0-rc.6",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Spinner",
6
6
  "files": [
@@ -39,8 +39,8 @@
39
39
  "indent": 4
40
40
  },
41
41
  "dependencies": {
42
- "@elliemae/ds-classnames": "3.5.0-rc.5",
43
- "@elliemae/ds-utilities": "3.5.0-rc.5"
42
+ "@elliemae/ds-classnames": "3.5.0-rc.6",
43
+ "@elliemae/ds-utilities": "3.5.0-rc.6"
44
44
  },
45
45
  "peerDependencies": {
46
46
  "lodash": "^4.17.21",