@agility/plenum-ui 1.3.38 → 1.3.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/coverage/base.css +224 -0
  2. package/coverage/block-navigation.js +87 -0
  3. package/coverage/components/Button/Button.tsx.html +739 -0
  4. package/coverage/components/Button/index.html +116 -0
  5. package/coverage/components/Forms/BaseField/BaseField.tsx.html +415 -0
  6. package/coverage/components/Forms/BaseField/index.html +116 -0
  7. package/coverage/components/Forms/Checkbox/Checkbox.tsx.html +346 -0
  8. package/coverage/components/Forms/Checkbox/index.html +116 -0
  9. package/coverage/components/Forms/InputCounter/InputCounter.tsx.html +139 -0
  10. package/coverage/components/Forms/InputCounter/index.html +116 -0
  11. package/coverage/components/Forms/InputLabel/InputLabel.tsx.html +211 -0
  12. package/coverage/components/Forms/InputLabel/index.html +131 -0
  13. package/coverage/components/Forms/InputLabel/index.ts.html +94 -0
  14. package/coverage/components/Forms/Radio/Radio.tsx.html +364 -0
  15. package/coverage/components/Forms/Radio/index.html +116 -0
  16. package/coverage/components/Forms/Select/Select.tsx.html +394 -0
  17. package/coverage/components/Forms/Select/index.html +116 -0
  18. package/coverage/components/Forms/TextInputAddon/InputCta/InputCta.tsx.html +271 -0
  19. package/coverage/components/Forms/TextInputAddon/InputCta/index.html +116 -0
  20. package/coverage/components/Forms/TextInputSelect/InputSelect/InputSelect.tsx.html +259 -0
  21. package/coverage/components/Forms/TextInputSelect/InputSelect/index.html +116 -0
  22. package/coverage/components/Switch/Switch.tsx.html +253 -0
  23. package/coverage/components/Switch/index.html +116 -0
  24. package/coverage/components/ToggleSwitch/ToggleSwitch.tsx.html +424 -0
  25. package/coverage/components/ToggleSwitch/index.html +116 -0
  26. package/coverage/coverage-final.json +14 -0
  27. package/coverage/favicon.png +0 -0
  28. package/coverage/index.html +251 -0
  29. package/coverage/prettify.css +1 -0
  30. package/coverage/prettify.js +2 -0
  31. package/coverage/sort-arrow-sprite.png +0 -0
  32. package/coverage/sorter.js +196 -0
  33. package/coverage/util/DynamicIcons.tsx.html +151 -0
  34. package/coverage/util/Loader.tsx.html +139 -0
  35. package/coverage/util/index.html +146 -0
  36. package/coverage/util/useID.ts.html +133 -0
  37. package/lib/components/Button/Button.d.ts +1 -1
  38. package/lib/components/ToggleSwitch/ToggleSwitch.d.ts +11 -12
  39. package/lib/components/ToggleSwitch/ToggleSwitch.stories.d.ts +15 -3
  40. package/lib/index.esm.js +33 -23
  41. package/lib/index.esm.js.map +1 -1
  42. package/lib/index.js +33 -23
  43. package/lib/index.js.map +1 -1
  44. package/lib/tailwind.css +24 -0
  45. package/lib/util/Loader.d.ts +2 -2
  46. package/package.json +1 -1
package/coverage/util/useID.ts.html ADDED
@@ -0,0 +1,133 @@
1
+
2
+ <!doctype html>
3
+ <html lang="en">
4
+
5
+ <head>
6
+ <title>Code coverage report for util/useID.ts</title>
7
+ <meta charset="utf-8" />
8
+ <link rel="stylesheet" href="../prettify.css" />
9
+ <link rel="stylesheet" href="../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
12
+ <style type='text/css'>
13
+ .coverage-summary .sorter {
14
+ background-image: url(../sort-arrow-sprite.png);
15
+ }
16
+ </style>
17
+ </head>
18
+
19
+ <body>
20
+ <div class='wrapper'>
21
+ <div class='pad1'>
22
+ <h1><a href="../index.html">All files</a> / <a href="index.html">util</a> useID.ts</h1>
23
+ <div class='clearfix'>
24
+
25
+ <div class='fl pad1y space-right2'>
26
+ <span class="strong">91.66% </span>
27
+ <span class="quiet">Statements</span>
28
+ <span class='fraction'>11/12</span>
29
+ </div>
30
+
31
+
32
+ <div class='fl pad1y space-right2'>
33
+ <span class="strong">33.33% </span>
34
+ <span class="quiet">Branches</span>
35
+ <span class='fraction'>1/3</span>
36
+ </div>
37
+
38
+
39
+ <div class='fl pad1y space-right2'>
40
+ <span class="strong">100% </span>
41
+ <span class="quiet">Functions</span>
42
+ <span class='fraction'>3/3</span>
43
+ </div>
44
+
45
+
46
+ <div class='fl pad1y space-right2'>
47
+ <span class="strong">100% </span>
48
+ <span class="quiet">Lines</span>
49
+ <span class='fraction'>8/8</span>
50
+ </div>
51
+
52
+
53
+ </div>
54
+ <p class="quiet">
55
+ Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
+ </p>
57
+ <template id="filterTemplate">
58
+ <div class="quiet">
59
+ Filter:
60
+ <input oninput="onInput()" type="search" id="fileSearch">
61
+ </div>
62
+ </template>
63
+ </div>
64
+ <div class='status-line high'></div>
65
+ <pre><table class="coverage">
66
+ <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
+ <a name='L2'></a><a href='#L2'>2</a>
68
+ <a name='L3'></a><a href='#L3'>3</a>
69
+ <a name='L4'></a><a href='#L4'>4</a>
70
+ <a name='L5'></a><a href='#L5'>5</a>
71
+ <a name='L6'></a><a href='#L6'>6</a>
72
+ <a name='L7'></a><a href='#L7'>7</a>
73
+ <a name='L8'></a><a href='#L8'>8</a>
74
+ <a name='L9'></a><a href='#L9'>9</a>
75
+ <a name='L10'></a><a href='#L10'>10</a>
76
+ <a name='L11'></a><a href='#L11'>11</a>
77
+ <a name='L12'></a><a href='#L12'>12</a>
78
+ <a name='L13'></a><a href='#L13'>13</a>
79
+ <a name='L14'></a><a href='#L14'>14</a>
80
+ <a name='L15'></a><a href='#L15'>15</a>
81
+ <a name='L16'></a><a href='#L16'>16</a>
82
+ <a name='L17'></a><a href='#L17'>17</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">3x</span>
83
+ <span class="cline-any cline-neutral">&nbsp;</span>
84
+ <span class="cline-any cline-yes">3x</span>
85
+ <span class="cline-any cline-neutral">&nbsp;</span>
86
+ <span class="cline-any cline-yes">33x</span>
87
+ <span class="cline-any cline-neutral">&nbsp;</span>
88
+ <span class="cline-any cline-neutral">&nbsp;</span>
89
+ <span class="cline-any cline-yes">3x</span>
90
+ <span class="cline-any cline-neutral">&nbsp;</span>
91
+ <span class="cline-any cline-yes">45x</span>
92
+ <span class="cline-any cline-neutral">&nbsp;</span>
93
+ <span class="cline-any cline-yes">45x</span>
94
+ <span class="cline-any cline-yes">1x</span>
95
+ <span class="cline-any cline-neutral">&nbsp;</span>
96
+ <span class="cline-any cline-neutral">&nbsp;</span>
97
+ <span class="cline-any cline-yes">45x</span>
98
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { useLayoutEffect, useState } from "react"
99
+ &nbsp;
100
+ let id = 0
101
+ function generateId() {
102
+ return ++id
103
+ }
104
+ &nbsp;
105
+ export const useId = () =&gt; {
106
+ &nbsp;
107
+ const [id, setId] = useState(generateId)
108
+ &nbsp;
109
+ useLayoutEffect(() =&gt; {
110
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (id === null) <span class="cstat-no" title="statement not covered" >setId(generateId())</span>
111
+ }, [id])
112
+ &nbsp;
113
+ return id != null ? '' + id : <span class="branch-1 cbranch-no" title="branch not covered" >undefined</span>
114
+ }</pre></td></tr></table></pre>
115
+
116
+ <div class='push'></div><!-- for sticky footer -->
117
+ </div><!-- /wrapper -->
118
+ <div class='footer quiet pad2 space-top1 center small'>
119
+ Code coverage generated by
120
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
121
+ at Wed Nov 02 2022 14:37:03 GMT-0400 (Eastern Daylight Time)
122
+ </div>
123
+ <script src="../prettify.js"></script>
124
+ <script>
125
+ window.onload = function () {
126
+ prettyPrint();
127
+ };
128
+ </script>
129
+ <script src="../sorter.js"></script>
130
+ <script src="../block-navigation.js"></script>
131
+ </body>
132
+ </html>
133
+
package/lib/components/Button/Button.d.ts CHANGED
@@ -35,7 +35,7 @@ export interface ButtonProps {
35
35
  isSubmit?: boolean;
36
36
  isWidthFull?: boolean;
37
37
  /**
38
- * Add on className
38
+ * Add on classes
39
39
  */
40
40
  className?: string;
41
41
  iconObj?: React.ReactNode;
package/lib/components/ToggleSwitch/ToggleSwitch.d.ts CHANGED
@@ -1,27 +1,26 @@
1
1
  import { FC } from "react";
2
2
  export interface IToggleSwitchProps {
3
- /** size state */
3
+ /** size of the toggle - default value is "md" */
4
4
  size?: "sm" | "md" | "lg";
5
5
  /** Toggle Switch label */
6
6
  label?: string | null;
7
- /** A Classname string to be used for the label*/
7
+ /** A Classname to be used for the label*/
8
8
  labelStyles?: string;
9
- /** A Classname string to style the Switch Group*/
9
+ /** A Classname to style the Switch Group*/
10
10
  groupStyles?: string;
11
- /** Toggle Switch ID */
12
- id?: string;
13
- /** Disabled state */
11
+ /** Toggle Switch ID*/
12
+ id: string;
13
+ /** Disabled state - default value is false*/
14
14
  isDisabled?: boolean;
15
- /** The value used when using this component inside a form, if it is checked.*/
16
- value: "on" | "off";
17
15
  /** Whether or not the switch is checked. */
18
16
  isChecked: boolean;
19
- /** If field is required */
17
+ /**A function to update isChecked State*/
18
+ onChangeHandler: (state: boolean, value: string) => void;
19
+ /** If field is required - default value is false */
20
20
  isRequired?: boolean;
21
- /** Error state */
21
+ /** Error state - default value is false*/
22
+ isError?: boolean;
22
23
  /** Message or description */
23
- /** The function to call when the switch is toggled. */
24
- onChange?: (value: string) => void;
25
24
  /** The name used when using this component inside a form.*/
26
25
  name: string;
27
26
  }
package/lib/components/ToggleSwitch/ToggleSwitch.stories.d.ts CHANGED
@@ -4,6 +4,18 @@ import { IToggleSwitchProps } from "./ToggleSwitch";
4
4
  declare const _default: Meta<import("@storybook/react").Args>;
5
5
  export default _default;
6
6
  export declare const AllVariations: Story<IToggleSwitchProps>;
7
- export declare const ToggleSwitchComponentSm: Story<IToggleSwitchProps>;
8
- export declare const ToggleSwitchComponentMd: Story<IToggleSwitchProps>;
9
- export declare const ToggleSwitchComponentLg: Story<IToggleSwitchProps>;
7
+ export declare const ToggleSwitchComponentSmDisabled: Story<IToggleSwitchProps>;
8
+ export declare const ToggleSwitchComponentSmChecked: Story<IToggleSwitchProps>;
9
+ export declare const ToggleSwitchComponentSmUnchecked: Story<IToggleSwitchProps>;
10
+ export declare const ToggleSwitchComponentSmError: Story<IToggleSwitchProps>;
11
+ export declare const ToggleSwitchComponentSmRequired: Story<IToggleSwitchProps>;
12
+ export declare const ToggleSwitchComponentMdDisabled: Story<IToggleSwitchProps>;
13
+ export declare const ToggleSwitchComponentMdChecked: Story<IToggleSwitchProps>;
14
+ export declare const ToggleSwitchComponentMdUnchecked: Story<IToggleSwitchProps>;
15
+ export declare const ToggleSwitchComponentMdError: Story<IToggleSwitchProps>;
16
+ export declare const ToggleSwitchComponentMdRequired: Story<IToggleSwitchProps>;
17
+ export declare const ToggleSwitchComponentLgDisabled: Story<IToggleSwitchProps>;
18
+ export declare const ToggleSwitchComponentLgChecked: Story<IToggleSwitchProps>;
19
+ export declare const ToggleSwitchComponentLgUnchecked: Story<IToggleSwitchProps>;
20
+ export declare const ToggleSwitchComponentLgError: Story<IToggleSwitchProps>;
21
+ export declare const ToggleSwitchComponentLgRequired: Story<IToggleSwitchProps>;
package/lib/index.esm.js CHANGED
@@ -7009,8 +7009,10 @@ var DynamicIcons = function (_a) {
7009
7009
  };
7010
7010
 
7011
7011
  function Loader(_a) {
7012
- var className = _a.className;
7013
- var outerLoaderStyles = cn("rounded-full border-purple-700 inline-block border-r-gray-200 animate-spin", className ? className : "w-16 h-16 border-8 m-auto");
7012
+ var classes = _a.classes;
7013
+ var outerLoaderStyles = cn('rounded-full border-purple-700 inline-block border-r-gray-200 animate-spin m-auto', classes, {
7014
+ 'w-16 h-16 border-8': !classes
7015
+ });
7014
7016
  return React__default.createElement("div", { className: outerLoaderStyles, role: "status" });
7015
7017
  }
7016
7018
 
@@ -7035,10 +7037,10 @@ var Button = function (_a, ref) {
7035
7037
  : function () {
7036
7038
  }, disabled: isDisabled, "aria-disabled": isDisabled },
7037
7039
  iconObj &&
7038
- (isLoading ? (React__default.createElement(Loader, { className: "h-5 w-5 border-2" })) : (React__default.createElement(React__default.Fragment, null, iconObj))),
7040
+ (isLoading ? (React__default.createElement(Loader, { classes: "h-5 w-5 border-2 m-0" })) : (React__default.createElement(React__default.Fragment, null, iconObj))),
7039
7041
  icon &&
7040
- (isLoading ? (React__default.createElement(Loader, { className: "h-5 w-5 border-2" })) : (React__default.createElement(DynamicIcons, { icon: icon, className: iconStyles, outline: false }))),
7041
- !icon && !iconObj && isLoading && (React__default.createElement(Loader, { className: "h-5 w-5 border-2" })),
7042
+ (isLoading ? (React__default.createElement(Loader, { classes: "h-5 w-5 border-2 m-0" })) : (React__default.createElement(DynamicIcons, { icon: icon, className: iconStyles, outline: false }))),
7043
+ !icon && !iconObj && isLoading && (React__default.createElement(Loader, { classes: "h-5 w-5 border-2 m-0" })),
7042
7044
  label && React__default.createElement("span", null, label))) : (React__default.createElement("a", { type: isSubmit ? "submit" : "button", title: asLink.title || title, href: asLink.href, target: asLink.target, className: cn("inline-flex items-center justify-center space-x-2 rounded border transition-all", { "w-full": isWidthFull === true }, { "px-4 py-2 text-sm": size === "sm" }, { "px-5 py-2 text-base": size === "base" }, { "px-5 py-2 text-lg": size === "lg" }, {
7043
7045
  "cursor-auto opacity-50": isDisabled
7044
7046
  }, {
@@ -7051,10 +7053,10 @@ var Button = function (_a, ref) {
7051
7053
  "border-red-300 bg-red-600 text-white hover:bg-red-700 hover:text-white": type === "danger"
7052
7054
  }, className), "aria-disabled": isDisabled },
7053
7055
  iconObj &&
7054
- (isLoading ? (React__default.createElement(Loader, { className: "h-5 w-5 border-2" })) : (React__default.createElement(React__default.Fragment, null, iconObj))),
7056
+ (isLoading ? (React__default.createElement(Loader, { classes: "h-5 w-5 border-2" })) : (React__default.createElement(React__default.Fragment, null, iconObj))),
7055
7057
  icon &&
7056
- (isLoading ? (React__default.createElement(Loader, { className: "h-5 w-5 border-2" })) : (React__default.createElement(DynamicIcons, { icon: icon, className: iconStyles, outline: false }))),
7057
- !icon && !iconObj && isLoading && (React__default.createElement(Loader, { className: "h-5 w-5 border-2" })),
7058
+ (isLoading ? (React__default.createElement(Loader, { classes: "h-5 w-5 border-2" })) : (React__default.createElement(DynamicIcons, { icon: icon, className: iconStyles, outline: false }))),
7059
+ !icon && !iconObj && isLoading && (React__default.createElement(Loader, { classes: "h-5 w-5 border-2" })),
7058
7060
  label && React__default.createElement("span", null, label)));
7059
7061
  };
7060
7062
  var _Button = forwardRef(Button);
@@ -7310,30 +7312,38 @@ var ButtonDropDown = function (_a) {
7310
7312
 
7311
7313
  /** Comment */
7312
7314
  var ToggleSwitch = function (_a) {
7313
- var _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.label, label = _c === void 0 ? "Label" : _c, labelStyles = _a.labelStyles, groupStyles = _a.groupStyles, isDisabled = _a.isDisabled, _d = _a.value, value = _d === void 0 ? "off" : _d, _e = _a.isChecked, isChecked = _e === void 0 ? false : _e, _f = _a.id, id = _f === void 0 ? "" : _f, name = _a.name, onChange = _a.onChange;
7314
- var _g = useState(isChecked), t_isChecked = _g[0], T_setIsChecked = _g[1];
7315
- var _h = useState(t_isChecked ? "on" : "off"), toggleValue = _h[0], setToggleValue = _h[1];
7315
+ var _b = _a.size, size = _b === void 0 ? "md" : _b, label = _a.label, labelStyles = _a.labelStyles, groupStyles = _a.groupStyles, isDisabled = _a.isDisabled, isChecked = _a.isChecked, onChangeHandler = _a.onChangeHandler, id = _a.id, name = _a.name, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, _d = _a.isError
7316
+ // onChange
7317
+ , isError = _d === void 0 ? false : _d
7318
+ // onChange
7319
+ ;
7320
+ var _e = useState(isChecked), toggleChecked = _e[0], setToggleChecked = _e[1];
7321
+ var toggleValue = useState(toggleChecked ? "on" : "off")[0];
7322
+ useEffect(function () { return setToggleChecked(isChecked); }, [isChecked]);
7323
+ //Styles for the switch input/button
7324
+ var switchStyles = cn("relative inline-flex flex-shrink-0 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-opacity-75 focus-within:ring-2 focus-within:ring-purple-500 focus-within:ring-opacity-75 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75", { "bg-purple-600": toggleChecked }, { "bg-gray-200": !toggleChecked }, { "h-[38px] w-[74px]": size === "lg" }, { "h-[28px] w-[64px]": size === "md" }, { "h-[18px] w-[34px]": size === "sm" }, {
7325
+ "focus-visible:ring-red-600 focus-within:ring-red-600 focus:ring-red-600 !bg-red-400": isError
7326
+ }, { "opacity-75 !bg-purple-300": isDisabled });
7327
+ // Styles for the circular button inside the switch
7328
+ var toggleStyles = cn("pointer-events-none inline-block rounded-full bg-white", " transform ring-0 transition ease-in-out duration-200", { "translate-x-9": toggleChecked }, { "translate-x-0": !toggleChecked }, { "h-[34px] w-[34px]": size === "lg" }, { "h-[24px] w-[24px]": size === "md" }, { "h-[14px] w-[14px] translate-x-4": size === "sm" && toggleChecked }, { "h-[14px] w-[14px] translate-x-0": size === "sm" && !toggleChecked });
7316
7329
  var handleToggleChange = function (v) {
7317
7330
  if (v === null)
7318
7331
  return;
7319
- T_setIsChecked(v);
7320
- setToggleValue(!v ? "off" : "on");
7321
- onChange && onChange(toggleValue);
7332
+ console.log(v);
7333
+ setToggleChecked(v);
7334
+ onChangeHandler && onChangeHandler(v, toggleValue);
7322
7335
  };
7323
- var switchStyles = cn("relative inline-flex flex-shrink-0", "border-2 border-transparent rounded-full cursor-pointer", "transition-colors ease-in-out duration-200 focus:outline-none", "focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-opacity-75", "focus-within:ring-2 focus-within:ring-purple-500 focus-within:ring-opacity-75", "focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75", { "bg-purple-600": t_isChecked }, { "bg-gray-200": !t_isChecked }, { "h-[38px] w-[74px]": size === "lg" }, { "h-[28px] w-[64px]": size === "md" }, { "h-[18px] w-[34px]": size === "sm" }, isDisabled && "opacity-75 !bg-purple-300");
7324
- // the circular button inside the switch
7325
- var toggleStyles = cn("pointer-events-none inline-block rounded-full bg-white", " transform ring-0 transition ease-in-out duration-200", { "translate-x-9": t_isChecked }, { "translate-x-0": !t_isChecked }, { "h-[34px] w-[34px]": size === "lg" }, { "h-[24px] w-[24px]": size === "md" }, { "h-[14px] w-[14px] translate-x-4": size === "sm" && t_isChecked }, { "h-[14px] w-[14px] translate-x-0": size === "sm" && !t_isChecked });
7326
7336
  return (React__default.createElement(ue.Group, null,
7327
7337
  React__default.createElement("div", { className: cn("flex items-center justify-between text-center", groupStyles && groupStyles) },
7328
- label && (React__default.createElement(ue.Label, { className: cn("mr-2", labelStyles && labelStyles
7329
- // isDisabled && "opacity-50"
7330
- ) }, label)),
7331
- React__default.createElement(ue, { checked: t_isChecked || toggleValue === "on" || value === "on", name: name, value: toggleValue, id: id, className: switchStyles, onChange: isDisabled
7338
+ label && (React__default.createElement(ue.Label, { className: cn("mr-2", labelStyles && labelStyles) },
7339
+ label,
7340
+ isRequired && (React__default.createElement("span", { className: "text-red-500" }, "\u00A0*")))),
7341
+ React__default.createElement(ue, { checked: toggleChecked, name: name, value: toggleValue, id: id, className: switchStyles, onChange: isDisabled
7332
7342
  ? function () { return handleToggleChange(null); }
7333
- : function () { return handleToggleChange(!t_isChecked); }, "aria-disabled": isDisabled },
7343
+ : function (v) { return handleToggleChange(v); }, "aria-disabled": isDisabled },
7334
7344
  React__default.createElement("span", { className: "sr-only" },
7335
7345
  "Use space to toggle ",
7336
- toggleValue,
7346
+ toggleChecked ? "on" : "off",
7337
7347
  "."),
7338
7348
  React__default.createElement("span", { "aria-hidden": "true", className: toggleStyles })))));
7339
7349
  };