@trackunit/react-widgets 2.9.21 → 2.9.25

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.
package/index.cjs.js CHANGED
@@ -66,9 +66,9 @@ var img$3 = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200
66
66
  * @param {WidgetErrorProps} props - The props for the WidgetErrorProps component
67
67
  * @returns {ReactNode} WidgetMissingConfiguration component
68
68
  */
69
- const WidgetError = ({ description }) => {
69
+ const WidgetError = ({ description, ref }) => {
70
70
  const [t] = useTranslation();
71
- return (jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: jsxRuntime.jsx(reactComponents.EmptyState, { customImageSrc: img$3, description: description || t("widget.emptystate.error") }) }));
71
+ return (jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", ref: ref, children: jsxRuntime.jsx(reactComponents.EmptyState, { customImageSrc: img$3, description: description || t("widget.emptystate.error") }) }));
72
72
  };
73
73
 
74
74
  var img$2 = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 180C144.183 180 180 144.183 180 100C180 55.8172 144.183 20 100 20C55.8172 20 20 55.8172 20 100C20 144.183 55.8172 180 100 180Z' fill='%23F1F5F9'/%3e%3cpath d='M100.296 165.188C118.685 165.188 133.592 163.325 133.592 161.026C133.592 158.728 118.685 156.864 100.296 156.864C81.9071 156.864 67 158.728 67 161.026C67 163.325 81.9071 165.188 100.296 165.188Z' fill='%23E2E8F0'/%3e%3cpath d='M147.348 63H53.2C49.7758 63 47 65.7758 47 69.2V136.494C47 139.918 49.7758 142.694 53.2 142.694H147.348C150.772 142.694 153.548 139.918 153.548 136.494V69.2C153.548 65.7758 150.772 63 147.348 63Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M123.038 107.578H119.01C118.523 105.078 117.538 102.701 116.113 100.59L118.964 97.7352C119.239 97.4593 119.394 97.0853 119.394 96.6954C119.394 96.3054 119.239 95.9314 118.964 95.6556L115.844 92.5414C115.708 92.4045 115.546 92.2958 115.368 92.2217C115.189 92.1475 114.998 92.1093 114.805 92.1093C114.612 92.1093 114.421 92.1475 114.242 92.2217C114.064 92.2958 113.902 92.4045 113.766 92.5414L110.916 95.3906C108.804 93.9684 106.428 92.9852 103.928 92.4995V88.466C103.928 88.0772 103.773 87.7043 103.499 87.4294C103.224 87.1545 102.851 87 102.462 87H98.0473C97.6585 87 97.2856 87.1545 97.0107 87.4294C96.7357 87.7043 96.5813 88.0772 96.5813 88.466V92.4995C94.0812 92.9863 91.7046 93.9709 89.5928 95.3948L86.7383 92.5414C86.6021 92.4045 86.4401 92.2958 86.2618 92.2217C86.0834 92.1475 85.8922 92.1093 85.699 92.1093C85.5059 92.1093 85.3146 92.1475 85.1363 92.2217C84.9579 92.2958 84.796 92.4045 84.6597 92.5414L81.5414 95.6597C81.4043 95.796 81.2955 95.958 81.2213 96.1364C81.147 96.3149 81.1088 96.5063 81.1088 96.6995C81.1088 96.8928 81.147 97.0842 81.2213 97.2626C81.2955 97.4411 81.4043 97.6031 81.5414 97.7393L84.3906 100.589C82.9669 102.701 81.982 105.078 81.4943 107.578H77.466C77.0772 107.578 76.7043 107.733 76.4294 108.008C76.1545 108.282 76 108.655 76 109.044V113.455C76 113.843 76.1545 114.216 76.4294 114.491C76.7043 114.766 77.0772 114.921 77.466 114.921H81.4943C81.9821 117.421 82.967 119.797 84.3906 121.909L81.5414 124.758C81.4045 124.895 81.2958 125.057 81.2217 125.235C81.1475 125.413 81.1093 125.604 81.1093 125.798C81.1093 125.991 81.1475 126.182 81.2217 126.36C81.2958 126.539 81.4045 126.701 81.5414 126.837L84.6597 129.956C84.796 130.093 84.9579 130.202 85.1363 130.276C85.3146 130.35 85.5059 130.388 85.699 130.388C85.8922 130.388 86.0834 130.35 86.2618 130.276C86.4401 130.202 86.6021 130.093 86.7383 129.956L89.5886 127.106C91.7004 128.53 94.077 129.515 96.5771 130.002V134.031C96.5771 134.223 96.615 134.414 96.6887 134.592C96.7624 134.77 96.8703 134.931 97.0065 135.067C97.1426 135.203 97.3042 135.311 97.4821 135.385C97.6599 135.459 97.8506 135.497 98.0431 135.497H102.458C102.65 135.497 102.841 135.459 103.019 135.385C103.197 135.311 103.358 135.203 103.494 135.067C103.631 134.931 103.738 134.77 103.812 134.592C103.886 134.414 103.924 134.223 103.924 134.031V130.01C106.424 129.522 108.8 128.537 110.912 127.113L113.762 129.964C113.898 130.101 114.06 130.209 114.238 130.283C114.416 130.358 114.608 130.396 114.801 130.396C114.994 130.396 115.185 130.358 115.364 130.283C115.542 130.209 115.704 130.101 115.84 129.964L118.964 126.845C119.101 126.709 119.209 126.547 119.283 126.369C119.358 126.19 119.396 125.999 119.396 125.806C119.396 125.613 119.358 125.422 119.283 125.243C119.209 125.065 119.101 124.903 118.964 124.767L116.113 121.918C117.538 119.806 118.523 117.429 119.01 114.929H123.038C123.427 114.929 123.8 114.775 124.075 114.5C124.35 114.225 124.504 113.852 124.504 113.463V109.044C124.504 108.655 124.35 108.282 124.075 108.008C123.8 107.733 123.427 107.578 123.038 107.578ZM100.253 122.278C98.0718 122.278 95.9399 121.632 94.1264 120.421C92.3129 119.21 90.8993 117.488 90.0643 115.474C89.2294 113.459 89.0106 111.242 89.4356 109.104C89.8607 106.965 90.9105 105 92.4523 103.458C93.994 101.915 95.9585 100.865 98.0973 100.439C100.236 100.014 102.453 100.232 104.468 101.066C106.483 101.901 108.205 103.314 109.416 105.127C110.628 106.94 111.275 109.072 111.275 111.253C111.274 114.176 110.113 116.98 108.046 119.047C105.979 121.115 103.176 122.277 100.253 122.278Z' fill='white'/%3e%3cpath d='M100.253 122.278C98.0722 122.279 95.9403 121.632 94.1268 120.421C92.3133 119.21 90.8997 117.489 90.0648 115.474C89.2298 113.46 89.011 111.243 89.4361 109.104C89.8611 106.965 90.9109 105 92.4527 103.458C93.9945 101.916 95.959 100.865 98.0978 100.44C100.237 100.014 102.453 100.232 104.468 101.066C106.483 101.901 108.205 103.314 109.417 105.127C110.628 106.94 111.275 109.072 111.275 111.253C111.275 114.176 110.114 116.98 108.047 119.047C105.98 121.115 103.176 122.277 100.253 122.278Z' stroke='%23334155' stroke-width='2.236' stroke-miterlimit='10'/%3e%3cpath d='M123.038 107.578H119.01C118.523 105.078 117.538 102.701 116.113 100.59L118.964 97.7352C119.239 97.4593 119.394 97.0853 119.394 96.6954C119.394 96.3054 119.239 95.9314 118.964 95.6556L115.844 92.5414C115.708 92.4045 115.546 92.2958 115.368 92.2217C115.189 92.1475 114.998 92.1093 114.805 92.1093C114.612 92.1093 114.421 92.1475 114.242 92.2217C114.064 92.2958 113.902 92.4045 113.766 92.5414L110.916 95.3906C108.804 93.9684 106.428 92.9852 103.928 92.4995V88.466C103.928 88.0772 103.773 87.7043 103.499 87.4294C103.224 87.1545 102.851 87 102.462 87H98.0473C97.6585 87 97.2856 87.1545 97.0107 87.4294C96.7357 87.7043 96.5813 88.0772 96.5813 88.466V92.4995C94.0812 92.9863 91.7046 93.9709 89.5928 95.3948L86.7383 92.5414C86.6021 92.4045 86.4401 92.2958 86.2618 92.2217C86.0834 92.1475 85.8922 92.1093 85.699 92.1093C85.5059 92.1093 85.3146 92.1475 85.1363 92.2217C84.9579 92.2958 84.796 92.4045 84.6597 92.5414L81.5414 95.6597C81.4043 95.796 81.2955 95.958 81.2213 96.1364C81.147 96.3149 81.1088 96.5063 81.1088 96.6995C81.1088 96.8928 81.147 97.0842 81.2213 97.2626C81.2955 97.4411 81.4043 97.6031 81.5414 97.7393L84.3906 100.589C82.9669 102.701 81.982 105.078 81.4943 107.578H77.466C77.0772 107.578 76.7043 107.733 76.4294 108.008C76.1545 108.282 76 108.655 76 109.044V113.455C76 113.843 76.1545 114.216 76.4294 114.491C76.7043 114.766 77.0772 114.921 77.466 114.921H81.4943C81.9821 117.421 82.967 119.797 84.3906 121.909L81.5414 124.758C81.4045 124.895 81.2958 125.057 81.2217 125.235C81.1475 125.413 81.1093 125.604 81.1093 125.798C81.1093 125.991 81.1475 126.182 81.2217 126.36C81.2958 126.539 81.4045 126.701 81.5414 126.837L84.6597 129.956C84.796 130.093 84.9579 130.202 85.1363 130.276C85.3146 130.35 85.5059 130.388 85.699 130.388C85.8922 130.388 86.0834 130.35 86.2618 130.276C86.4401 130.202 86.6021 130.093 86.7383 129.956L89.5886 127.106C91.7004 128.53 94.077 129.515 96.5771 130.002V134.031C96.5771 134.223 96.615 134.414 96.6887 134.592C96.7624 134.77 96.8704 134.931 97.0065 135.067C97.1426 135.203 97.3042 135.311 97.4821 135.385C97.6599 135.459 97.8506 135.497 98.0431 135.497H102.458C102.65 135.497 102.841 135.459 103.019 135.385C103.197 135.311 103.358 135.203 103.494 135.067C103.631 134.931 103.738 134.77 103.812 134.592C103.886 134.414 103.924 134.223 103.924 134.031V130.01C106.424 129.522 108.8 128.537 110.912 127.113L113.762 129.964C113.898 130.101 114.06 130.209 114.238 130.283C114.416 130.358 114.608 130.396 114.801 130.396C114.994 130.396 115.185 130.358 115.364 130.283C115.542 130.209 115.704 130.101 115.84 129.964L118.964 126.845C119.101 126.709 119.209 126.547 119.283 126.369C119.358 126.19 119.396 125.999 119.396 125.806C119.396 125.613 119.358 125.422 119.283 125.243C119.209 125.065 119.101 124.903 118.964 124.767L116.113 121.918C117.538 119.806 118.523 117.429 119.01 114.929H123.038C123.427 114.929 123.8 114.775 124.075 114.5C124.35 114.225 124.504 113.852 124.504 113.463V109.044C124.504 108.655 124.35 108.282 124.075 108.008C123.8 107.733 123.427 107.578 123.038 107.578ZM100.253 122.278C98.0718 122.278 95.9399 121.632 94.1264 120.421C92.3129 119.21 90.8993 117.488 90.0643 115.474C89.2294 113.459 89.0106 111.242 89.4356 109.104C89.8607 106.965 90.9105 105 92.4523 103.458C93.9941 101.915 95.9585 100.865 98.0973 100.439C100.236 100.014 102.453 100.232 104.468 101.066C106.483 101.901 108.205 103.314 109.416 105.127C110.628 106.94 111.275 109.072 111.275 111.253C111.274 114.176 110.113 116.98 108.046 119.047C105.979 121.115 103.176 122.277 100.253 122.278Z' stroke='%23334155' stroke-width='2.236' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M147.348 63H53.2078C51.5635 63 49.9865 63.6532 48.8238 64.8159C47.661 65.9787 47.0078 67.5557 47.0078 69.2V77.75H153.548V69.2C153.548 67.5557 152.895 65.9787 151.732 64.8159C150.569 63.6532 148.992 63 147.348 63Z' fill='white' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M56.3002 73.4363C58.0123 73.4363 59.4002 72.0484 59.4002 70.3363C59.4002 68.6242 58.0123 67.2363 56.3002 67.2363C54.5881 67.2363 53.2002 68.6242 53.2002 70.3363C53.2002 72.0484 54.5881 73.4363 56.3002 73.4363Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linejoin='round'/%3e%3c/svg%3e";
@@ -80,9 +80,9 @@ var img$2 = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200
80
80
  *
81
81
  * @returns {ReactNode} WidgetMissingConfiguration component
82
82
  */
83
- const WidgetMissingConfiguration = () => {
83
+ const WidgetMissingConfiguration = ({ ref }) => {
84
84
  const [t] = useTranslation();
85
- return (jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: jsxRuntime.jsx(reactComponents.EmptyState, { customImageSrc: img$2, description: t("widget.emptystate.missingdata"), secondaryAction: { title: t("widget.emptystate.configure"), onClick: () => irisAppRuntimeCore.WidgetConfigRuntime.openEditMode() } }) }));
85
+ return (jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", ref: ref, children: jsxRuntime.jsx(reactComponents.EmptyState, { customImageSrc: img$2, description: t("widget.emptystate.missingdata"), secondaryAction: { title: t("widget.emptystate.configure"), onClick: () => irisAppRuntimeCore.WidgetConfigRuntime.openEditMode() } }) }));
86
86
  };
87
87
 
88
88
  var img$1 = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 180C144.183 180 180 144.183 180 100C180 55.8172 144.183 20 100 20C55.8172 20 20 55.8172 20 100C20 144.183 55.8172 180 100 180Z' fill='%23F1F5F9'/%3e%3cpath d='M100.296 165.188C118.685 165.188 133.592 163.325 133.592 161.026C133.592 158.728 118.685 156.864 100.296 156.864C81.9071 156.864 67 158.728 67 161.026C67 163.325 81.9071 165.188 100.296 165.188Z' fill='%23E2E8F0'/%3e%3cpath d='M147.348 63H53.2C49.7758 63 47 65.7758 47 69.2V136.494C47 139.918 49.7758 142.694 53.2 142.694H147.348C150.772 142.694 153.548 139.918 153.548 136.494V69.2C153.548 65.7758 150.772 63 147.348 63Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M147.348 63H53.2078C51.5635 63 49.9865 63.6532 48.8238 64.8159C47.661 65.9787 47.0078 67.5557 47.0078 69.2V77.75H153.548V69.2C153.548 67.5557 152.895 65.9787 151.732 64.8159C150.569 63.6532 148.992 63 147.348 63Z' fill='white' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M56.3002 73.4363C58.0123 73.4363 59.4002 72.0484 59.4002 70.3363C59.4002 68.6242 58.0123 67.2363 56.3002 67.2363C54.5881 67.2363 53.2002 68.6242 53.2002 70.3363C53.2002 72.0484 54.5881 73.4363 56.3002 73.4363Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linejoin='round'/%3e%3cpath d='M95.4118 126C94.7838 126.001 94.1618 125.879 93.5817 125.641C93.0015 125.404 92.4745 125.055 92.031 124.615L82.4616 115.156C82.0044 114.72 81.6398 114.198 81.3888 113.621C81.1379 113.044 81.0058 112.423 81.0002 111.795C80.9946 111.167 81.1155 110.544 81.3561 109.962C81.5966 109.381 81.9518 108.853 82.4011 108.409C82.8503 107.964 83.3845 107.613 83.9726 107.375C84.5606 107.138 85.1907 107.018 85.826 107.024C86.4613 107.029 87.0891 107.16 87.6727 107.408C88.2564 107.656 88.7843 108.016 89.2255 108.468L95.4141 114.587L114.897 95.3243C115.8 94.4639 117.008 93.9884 118.262 94.0002C119.516 94.012 120.715 94.5102 121.601 95.3875C122.487 96.2649 122.99 97.4511 123 98.6909C123.01 99.9308 122.528 101.125 121.656 102.017L98.7995 124.615C98.3548 125.055 97.8267 125.404 97.2453 125.642C96.664 125.879 96.0409 126.001 95.4118 126Z' fill='white' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
@@ -95,8 +95,8 @@ var img = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 2
95
95
  * @param {WidgetNoDataProps} props - The props for the WidgetMissingConfiguration component
96
96
  * @returns {ReactNode} WidgetMissingConfiguration component
97
97
  */
98
- const WidgetNoData = ({ type = "Neutral", description }) => {
99
- return (jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: jsxRuntime.jsx(reactComponents.EmptyState, { customImageSrc: type === "Good" ? img$1 : img, description: description }) }));
98
+ const WidgetNoData = ({ type = "Neutral", description, ref }) => {
99
+ return (jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", ref: ref, children: jsxRuntime.jsx(reactComponents.EmptyState, { customImageSrc: type === "Good" ? img$1 : img, description: description }) }));
100
100
  };
101
101
 
102
102
  const cvaWidgetContent = cssClassVarianceUtilities.cvaMerge(["@container", "overflow-hidden", "h-full", "w-full", "bg-white", "grid"], {
@@ -186,8 +186,8 @@ const cvaWidgetContent = cssClassVarianceUtilities.cvaMerge(["@container", "over
186
186
  * @param {WidgetContentProps} props - The props for the WidgetContent component
187
187
  * @returns {ReactNode} WidgetContent component
188
188
  */
189
- const WidgetContent = ({ children, "data-testid": dataTestId, layout = "none", padding = "none", gap = "none", className, centering = "none", }) => {
190
- return (jsxRuntime.jsx("div", { className: cvaWidgetContent({ layout, padding, gap, className, centering }), "data-testid": dataTestId, children: children }));
189
+ const WidgetContent = ({ children, "data-testid": dataTestId, layout = "none", padding = "none", gap = "none", className, centering = "none", ref, }) => {
190
+ return (jsxRuntime.jsx("div", { className: cvaWidgetContent({ layout, padding, gap, className, centering }), "data-testid": dataTestId, ref: ref, children: children }));
191
191
  };
192
192
 
193
193
  const cvaWidgetEditBodyContainer = cssClassVarianceUtilities.cvaMerge(["absolute", "left-1/2", "top-1/2", "flex", "origin-center", "-translate-x-1/2", "-translate-y-1/2", "w-96"], {
@@ -212,10 +212,10 @@ const cvaWidgetEditBodyContainer = cssClassVarianceUtilities.cvaMerge(["absolute
212
212
  * @param {WidgetEditBodyProps} props - The props for the WidgetEditBody component
213
213
  * @returns {ReactNode} WidgetEditBody component
214
214
  */
215
- const WidgetEditBody = ({ children, "data-testid": dataTestId, className, onCancel, onSave, saveEditModeDisabled = false, title, }) => {
215
+ const WidgetEditBody = ({ children, "data-testid": dataTestId, className, onCancel, onSave, saveEditModeDisabled = false, title, ref, }) => {
216
216
  const [t] = useTranslation();
217
217
  const [saving, setSaving] = react.useState(false);
218
- return (jsxRuntime.jsxs(reactComponents.Card, { className: cvaWidgetEditBodyContainer({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.CardHeader, { heading: title || t("widget.edit.title"), onClickClose: onCancel }), jsxRuntime.jsx(reactComponents.CardBody, { children: children }), jsxRuntime.jsxs(reactComponents.CardFooter, { children: [jsxRuntime.jsx(reactComponents.Button, { onClick: onCancel, variant: "ghost-neutral", children: t("widget.edit.cancel") }), jsxRuntime.jsx(reactComponents.Button, { disabled: saveEditModeDisabled || saving, loading: saving, onClick: async () => {
218
+ return (jsxRuntime.jsxs(reactComponents.Card, { className: cvaWidgetEditBodyContainer({ className }), "data-testid": dataTestId, ref: ref, children: [jsxRuntime.jsx(reactComponents.CardHeader, { heading: title || t("widget.edit.title"), onClickClose: onCancel }), jsxRuntime.jsx(reactComponents.CardBody, { children: children }), jsxRuntime.jsxs(reactComponents.CardFooter, { children: [jsxRuntime.jsx(reactComponents.Button, { onClick: onCancel, variant: "ghost-neutral", children: t("widget.edit.cancel") }), jsxRuntime.jsx(reactComponents.Button, { disabled: saveEditModeDisabled || saving, loading: saving, onClick: async () => {
219
219
  setSaving(true);
220
220
  try {
221
221
  await onSave();
@@ -293,8 +293,8 @@ cssClassVarianceUtilities.cvaMerge([
293
293
  * @param {WidgetKPIProps} props - The props for the WidgetKPI component
294
294
  * @returns {ReactElement} WidgetKPI component
295
295
  */
296
- const WidgetKPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, trends, iconName = undefined, iconColor = "info", notice, ...rest }) => {
297
- return (jsxRuntime.jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ?? undefined, ...rest, children: loading ? (jsxRuntime.jsx("div", { className: "flex flex-col gap-2 pt-6", "data-testid": dataTestId ? `${dataTestId}-loading` : "WidgetKPI-loading", children: trends ? (jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: [
296
+ const WidgetKPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, trends, iconName = undefined, iconColor = "info", notice, ref, ...rest }) => {
297
+ return (jsxRuntime.jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ?? undefined, ref: ref, ...rest, children: loading ? (jsxRuntime.jsx("div", { className: "flex flex-col gap-2 pt-6", "data-testid": dataTestId ? `${dataTestId}-loading` : "WidgetKPI-loading", children: trends ? (jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: [
298
298
  { textSize: "text-sm", width: 100 },
299
299
  { textSize: "text-lg", width: 40 },
300
300
  { textSize: "text-sm", width: 60 },
package/index.esm.js CHANGED
@@ -64,9 +64,9 @@ var img$3 = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200
64
64
  * @param {WidgetErrorProps} props - The props for the WidgetErrorProps component
65
65
  * @returns {ReactNode} WidgetMissingConfiguration component
66
66
  */
67
- const WidgetError = ({ description }) => {
67
+ const WidgetError = ({ description, ref }) => {
68
68
  const [t] = useTranslation();
69
- return (jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: jsx(EmptyState, { customImageSrc: img$3, description: description || t("widget.emptystate.error") }) }));
69
+ return (jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", ref: ref, children: jsx(EmptyState, { customImageSrc: img$3, description: description || t("widget.emptystate.error") }) }));
70
70
  };
71
71
 
72
72
  var img$2 = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 180C144.183 180 180 144.183 180 100C180 55.8172 144.183 20 100 20C55.8172 20 20 55.8172 20 100C20 144.183 55.8172 180 100 180Z' fill='%23F1F5F9'/%3e%3cpath d='M100.296 165.188C118.685 165.188 133.592 163.325 133.592 161.026C133.592 158.728 118.685 156.864 100.296 156.864C81.9071 156.864 67 158.728 67 161.026C67 163.325 81.9071 165.188 100.296 165.188Z' fill='%23E2E8F0'/%3e%3cpath d='M147.348 63H53.2C49.7758 63 47 65.7758 47 69.2V136.494C47 139.918 49.7758 142.694 53.2 142.694H147.348C150.772 142.694 153.548 139.918 153.548 136.494V69.2C153.548 65.7758 150.772 63 147.348 63Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M123.038 107.578H119.01C118.523 105.078 117.538 102.701 116.113 100.59L118.964 97.7352C119.239 97.4593 119.394 97.0853 119.394 96.6954C119.394 96.3054 119.239 95.9314 118.964 95.6556L115.844 92.5414C115.708 92.4045 115.546 92.2958 115.368 92.2217C115.189 92.1475 114.998 92.1093 114.805 92.1093C114.612 92.1093 114.421 92.1475 114.242 92.2217C114.064 92.2958 113.902 92.4045 113.766 92.5414L110.916 95.3906C108.804 93.9684 106.428 92.9852 103.928 92.4995V88.466C103.928 88.0772 103.773 87.7043 103.499 87.4294C103.224 87.1545 102.851 87 102.462 87H98.0473C97.6585 87 97.2856 87.1545 97.0107 87.4294C96.7357 87.7043 96.5813 88.0772 96.5813 88.466V92.4995C94.0812 92.9863 91.7046 93.9709 89.5928 95.3948L86.7383 92.5414C86.6021 92.4045 86.4401 92.2958 86.2618 92.2217C86.0834 92.1475 85.8922 92.1093 85.699 92.1093C85.5059 92.1093 85.3146 92.1475 85.1363 92.2217C84.9579 92.2958 84.796 92.4045 84.6597 92.5414L81.5414 95.6597C81.4043 95.796 81.2955 95.958 81.2213 96.1364C81.147 96.3149 81.1088 96.5063 81.1088 96.6995C81.1088 96.8928 81.147 97.0842 81.2213 97.2626C81.2955 97.4411 81.4043 97.6031 81.5414 97.7393L84.3906 100.589C82.9669 102.701 81.982 105.078 81.4943 107.578H77.466C77.0772 107.578 76.7043 107.733 76.4294 108.008C76.1545 108.282 76 108.655 76 109.044V113.455C76 113.843 76.1545 114.216 76.4294 114.491C76.7043 114.766 77.0772 114.921 77.466 114.921H81.4943C81.9821 117.421 82.967 119.797 84.3906 121.909L81.5414 124.758C81.4045 124.895 81.2958 125.057 81.2217 125.235C81.1475 125.413 81.1093 125.604 81.1093 125.798C81.1093 125.991 81.1475 126.182 81.2217 126.36C81.2958 126.539 81.4045 126.701 81.5414 126.837L84.6597 129.956C84.796 130.093 84.9579 130.202 85.1363 130.276C85.3146 130.35 85.5059 130.388 85.699 130.388C85.8922 130.388 86.0834 130.35 86.2618 130.276C86.4401 130.202 86.6021 130.093 86.7383 129.956L89.5886 127.106C91.7004 128.53 94.077 129.515 96.5771 130.002V134.031C96.5771 134.223 96.615 134.414 96.6887 134.592C96.7624 134.77 96.8703 134.931 97.0065 135.067C97.1426 135.203 97.3042 135.311 97.4821 135.385C97.6599 135.459 97.8506 135.497 98.0431 135.497H102.458C102.65 135.497 102.841 135.459 103.019 135.385C103.197 135.311 103.358 135.203 103.494 135.067C103.631 134.931 103.738 134.77 103.812 134.592C103.886 134.414 103.924 134.223 103.924 134.031V130.01C106.424 129.522 108.8 128.537 110.912 127.113L113.762 129.964C113.898 130.101 114.06 130.209 114.238 130.283C114.416 130.358 114.608 130.396 114.801 130.396C114.994 130.396 115.185 130.358 115.364 130.283C115.542 130.209 115.704 130.101 115.84 129.964L118.964 126.845C119.101 126.709 119.209 126.547 119.283 126.369C119.358 126.19 119.396 125.999 119.396 125.806C119.396 125.613 119.358 125.422 119.283 125.243C119.209 125.065 119.101 124.903 118.964 124.767L116.113 121.918C117.538 119.806 118.523 117.429 119.01 114.929H123.038C123.427 114.929 123.8 114.775 124.075 114.5C124.35 114.225 124.504 113.852 124.504 113.463V109.044C124.504 108.655 124.35 108.282 124.075 108.008C123.8 107.733 123.427 107.578 123.038 107.578ZM100.253 122.278C98.0718 122.278 95.9399 121.632 94.1264 120.421C92.3129 119.21 90.8993 117.488 90.0643 115.474C89.2294 113.459 89.0106 111.242 89.4356 109.104C89.8607 106.965 90.9105 105 92.4523 103.458C93.994 101.915 95.9585 100.865 98.0973 100.439C100.236 100.014 102.453 100.232 104.468 101.066C106.483 101.901 108.205 103.314 109.416 105.127C110.628 106.94 111.275 109.072 111.275 111.253C111.274 114.176 110.113 116.98 108.046 119.047C105.979 121.115 103.176 122.277 100.253 122.278Z' fill='white'/%3e%3cpath d='M100.253 122.278C98.0722 122.279 95.9403 121.632 94.1268 120.421C92.3133 119.21 90.8997 117.489 90.0648 115.474C89.2298 113.46 89.011 111.243 89.4361 109.104C89.8611 106.965 90.9109 105 92.4527 103.458C93.9945 101.916 95.959 100.865 98.0978 100.44C100.237 100.014 102.453 100.232 104.468 101.066C106.483 101.901 108.205 103.314 109.417 105.127C110.628 106.94 111.275 109.072 111.275 111.253C111.275 114.176 110.114 116.98 108.047 119.047C105.98 121.115 103.176 122.277 100.253 122.278Z' stroke='%23334155' stroke-width='2.236' stroke-miterlimit='10'/%3e%3cpath d='M123.038 107.578H119.01C118.523 105.078 117.538 102.701 116.113 100.59L118.964 97.7352C119.239 97.4593 119.394 97.0853 119.394 96.6954C119.394 96.3054 119.239 95.9314 118.964 95.6556L115.844 92.5414C115.708 92.4045 115.546 92.2958 115.368 92.2217C115.189 92.1475 114.998 92.1093 114.805 92.1093C114.612 92.1093 114.421 92.1475 114.242 92.2217C114.064 92.2958 113.902 92.4045 113.766 92.5414L110.916 95.3906C108.804 93.9684 106.428 92.9852 103.928 92.4995V88.466C103.928 88.0772 103.773 87.7043 103.499 87.4294C103.224 87.1545 102.851 87 102.462 87H98.0473C97.6585 87 97.2856 87.1545 97.0107 87.4294C96.7357 87.7043 96.5813 88.0772 96.5813 88.466V92.4995C94.0812 92.9863 91.7046 93.9709 89.5928 95.3948L86.7383 92.5414C86.6021 92.4045 86.4401 92.2958 86.2618 92.2217C86.0834 92.1475 85.8922 92.1093 85.699 92.1093C85.5059 92.1093 85.3146 92.1475 85.1363 92.2217C84.9579 92.2958 84.796 92.4045 84.6597 92.5414L81.5414 95.6597C81.4043 95.796 81.2955 95.958 81.2213 96.1364C81.147 96.3149 81.1088 96.5063 81.1088 96.6995C81.1088 96.8928 81.147 97.0842 81.2213 97.2626C81.2955 97.4411 81.4043 97.6031 81.5414 97.7393L84.3906 100.589C82.9669 102.701 81.982 105.078 81.4943 107.578H77.466C77.0772 107.578 76.7043 107.733 76.4294 108.008C76.1545 108.282 76 108.655 76 109.044V113.455C76 113.843 76.1545 114.216 76.4294 114.491C76.7043 114.766 77.0772 114.921 77.466 114.921H81.4943C81.9821 117.421 82.967 119.797 84.3906 121.909L81.5414 124.758C81.4045 124.895 81.2958 125.057 81.2217 125.235C81.1475 125.413 81.1093 125.604 81.1093 125.798C81.1093 125.991 81.1475 126.182 81.2217 126.36C81.2958 126.539 81.4045 126.701 81.5414 126.837L84.6597 129.956C84.796 130.093 84.9579 130.202 85.1363 130.276C85.3146 130.35 85.5059 130.388 85.699 130.388C85.8922 130.388 86.0834 130.35 86.2618 130.276C86.4401 130.202 86.6021 130.093 86.7383 129.956L89.5886 127.106C91.7004 128.53 94.077 129.515 96.5771 130.002V134.031C96.5771 134.223 96.615 134.414 96.6887 134.592C96.7624 134.77 96.8704 134.931 97.0065 135.067C97.1426 135.203 97.3042 135.311 97.4821 135.385C97.6599 135.459 97.8506 135.497 98.0431 135.497H102.458C102.65 135.497 102.841 135.459 103.019 135.385C103.197 135.311 103.358 135.203 103.494 135.067C103.631 134.931 103.738 134.77 103.812 134.592C103.886 134.414 103.924 134.223 103.924 134.031V130.01C106.424 129.522 108.8 128.537 110.912 127.113L113.762 129.964C113.898 130.101 114.06 130.209 114.238 130.283C114.416 130.358 114.608 130.396 114.801 130.396C114.994 130.396 115.185 130.358 115.364 130.283C115.542 130.209 115.704 130.101 115.84 129.964L118.964 126.845C119.101 126.709 119.209 126.547 119.283 126.369C119.358 126.19 119.396 125.999 119.396 125.806C119.396 125.613 119.358 125.422 119.283 125.243C119.209 125.065 119.101 124.903 118.964 124.767L116.113 121.918C117.538 119.806 118.523 117.429 119.01 114.929H123.038C123.427 114.929 123.8 114.775 124.075 114.5C124.35 114.225 124.504 113.852 124.504 113.463V109.044C124.504 108.655 124.35 108.282 124.075 108.008C123.8 107.733 123.427 107.578 123.038 107.578ZM100.253 122.278C98.0718 122.278 95.9399 121.632 94.1264 120.421C92.3129 119.21 90.8993 117.488 90.0643 115.474C89.2294 113.459 89.0106 111.242 89.4356 109.104C89.8607 106.965 90.9105 105 92.4523 103.458C93.9941 101.915 95.9585 100.865 98.0973 100.439C100.236 100.014 102.453 100.232 104.468 101.066C106.483 101.901 108.205 103.314 109.416 105.127C110.628 106.94 111.275 109.072 111.275 111.253C111.274 114.176 110.113 116.98 108.046 119.047C105.979 121.115 103.176 122.277 100.253 122.278Z' stroke='%23334155' stroke-width='2.236' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M147.348 63H53.2078C51.5635 63 49.9865 63.6532 48.8238 64.8159C47.661 65.9787 47.0078 67.5557 47.0078 69.2V77.75H153.548V69.2C153.548 67.5557 152.895 65.9787 151.732 64.8159C150.569 63.6532 148.992 63 147.348 63Z' fill='white' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M56.3002 73.4363C58.0123 73.4363 59.4002 72.0484 59.4002 70.3363C59.4002 68.6242 58.0123 67.2363 56.3002 67.2363C54.5881 67.2363 53.2002 68.6242 53.2002 70.3363C53.2002 72.0484 54.5881 73.4363 56.3002 73.4363Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linejoin='round'/%3e%3c/svg%3e";
@@ -78,9 +78,9 @@ var img$2 = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200
78
78
  *
79
79
  * @returns {ReactNode} WidgetMissingConfiguration component
80
80
  */
81
- const WidgetMissingConfiguration = () => {
81
+ const WidgetMissingConfiguration = ({ ref }) => {
82
82
  const [t] = useTranslation();
83
- return (jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: jsx(EmptyState, { customImageSrc: img$2, description: t("widget.emptystate.missingdata"), secondaryAction: { title: t("widget.emptystate.configure"), onClick: () => WidgetConfigRuntime.openEditMode() } }) }));
83
+ return (jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", ref: ref, children: jsx(EmptyState, { customImageSrc: img$2, description: t("widget.emptystate.missingdata"), secondaryAction: { title: t("widget.emptystate.configure"), onClick: () => WidgetConfigRuntime.openEditMode() } }) }));
84
84
  };
85
85
 
86
86
  var img$1 = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 180C144.183 180 180 144.183 180 100C180 55.8172 144.183 20 100 20C55.8172 20 20 55.8172 20 100C20 144.183 55.8172 180 100 180Z' fill='%23F1F5F9'/%3e%3cpath d='M100.296 165.188C118.685 165.188 133.592 163.325 133.592 161.026C133.592 158.728 118.685 156.864 100.296 156.864C81.9071 156.864 67 158.728 67 161.026C67 163.325 81.9071 165.188 100.296 165.188Z' fill='%23E2E8F0'/%3e%3cpath d='M147.348 63H53.2C49.7758 63 47 65.7758 47 69.2V136.494C47 139.918 49.7758 142.694 53.2 142.694H147.348C150.772 142.694 153.548 139.918 153.548 136.494V69.2C153.548 65.7758 150.772 63 147.348 63Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M147.348 63H53.2078C51.5635 63 49.9865 63.6532 48.8238 64.8159C47.661 65.9787 47.0078 67.5557 47.0078 69.2V77.75H153.548V69.2C153.548 67.5557 152.895 65.9787 151.732 64.8159C150.569 63.6532 148.992 63 147.348 63Z' fill='white' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M56.3002 73.4363C58.0123 73.4363 59.4002 72.0484 59.4002 70.3363C59.4002 68.6242 58.0123 67.2363 56.3002 67.2363C54.5881 67.2363 53.2002 68.6242 53.2002 70.3363C53.2002 72.0484 54.5881 73.4363 56.3002 73.4363Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linejoin='round'/%3e%3cpath d='M95.4118 126C94.7838 126.001 94.1618 125.879 93.5817 125.641C93.0015 125.404 92.4745 125.055 92.031 124.615L82.4616 115.156C82.0044 114.72 81.6398 114.198 81.3888 113.621C81.1379 113.044 81.0058 112.423 81.0002 111.795C80.9946 111.167 81.1155 110.544 81.3561 109.962C81.5966 109.381 81.9518 108.853 82.4011 108.409C82.8503 107.964 83.3845 107.613 83.9726 107.375C84.5606 107.138 85.1907 107.018 85.826 107.024C86.4613 107.029 87.0891 107.16 87.6727 107.408C88.2564 107.656 88.7843 108.016 89.2255 108.468L95.4141 114.587L114.897 95.3243C115.8 94.4639 117.008 93.9884 118.262 94.0002C119.516 94.012 120.715 94.5102 121.601 95.3875C122.487 96.2649 122.99 97.4511 123 98.6909C123.01 99.9308 122.528 101.125 121.656 102.017L98.7995 124.615C98.3548 125.055 97.8267 125.404 97.2453 125.642C96.664 125.879 96.0409 126.001 95.4118 126Z' fill='white' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
@@ -93,8 +93,8 @@ var img = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 2
93
93
  * @param {WidgetNoDataProps} props - The props for the WidgetMissingConfiguration component
94
94
  * @returns {ReactNode} WidgetMissingConfiguration component
95
95
  */
96
- const WidgetNoData = ({ type = "Neutral", description }) => {
97
- return (jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: jsx(EmptyState, { customImageSrc: type === "Good" ? img$1 : img, description: description }) }));
96
+ const WidgetNoData = ({ type = "Neutral", description, ref }) => {
97
+ return (jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", ref: ref, children: jsx(EmptyState, { customImageSrc: type === "Good" ? img$1 : img, description: description }) }));
98
98
  };
99
99
 
100
100
  const cvaWidgetContent = cvaMerge(["@container", "overflow-hidden", "h-full", "w-full", "bg-white", "grid"], {
@@ -184,8 +184,8 @@ const cvaWidgetContent = cvaMerge(["@container", "overflow-hidden", "h-full", "w
184
184
  * @param {WidgetContentProps} props - The props for the WidgetContent component
185
185
  * @returns {ReactNode} WidgetContent component
186
186
  */
187
- const WidgetContent = ({ children, "data-testid": dataTestId, layout = "none", padding = "none", gap = "none", className, centering = "none", }) => {
188
- return (jsx("div", { className: cvaWidgetContent({ layout, padding, gap, className, centering }), "data-testid": dataTestId, children: children }));
187
+ const WidgetContent = ({ children, "data-testid": dataTestId, layout = "none", padding = "none", gap = "none", className, centering = "none", ref, }) => {
188
+ return (jsx("div", { className: cvaWidgetContent({ layout, padding, gap, className, centering }), "data-testid": dataTestId, ref: ref, children: children }));
189
189
  };
190
190
 
191
191
  const cvaWidgetEditBodyContainer = cvaMerge(["absolute", "left-1/2", "top-1/2", "flex", "origin-center", "-translate-x-1/2", "-translate-y-1/2", "w-96"], {
@@ -210,10 +210,10 @@ const cvaWidgetEditBodyContainer = cvaMerge(["absolute", "left-1/2", "top-1/2",
210
210
  * @param {WidgetEditBodyProps} props - The props for the WidgetEditBody component
211
211
  * @returns {ReactNode} WidgetEditBody component
212
212
  */
213
- const WidgetEditBody = ({ children, "data-testid": dataTestId, className, onCancel, onSave, saveEditModeDisabled = false, title, }) => {
213
+ const WidgetEditBody = ({ children, "data-testid": dataTestId, className, onCancel, onSave, saveEditModeDisabled = false, title, ref, }) => {
214
214
  const [t] = useTranslation();
215
215
  const [saving, setSaving] = useState(false);
216
- return (jsxs(Card, { className: cvaWidgetEditBodyContainer({ className }), "data-testid": dataTestId, children: [jsx(CardHeader, { heading: title || t("widget.edit.title"), onClickClose: onCancel }), jsx(CardBody, { children: children }), jsxs(CardFooter, { children: [jsx(Button, { onClick: onCancel, variant: "ghost-neutral", children: t("widget.edit.cancel") }), jsx(Button, { disabled: saveEditModeDisabled || saving, loading: saving, onClick: async () => {
216
+ return (jsxs(Card, { className: cvaWidgetEditBodyContainer({ className }), "data-testid": dataTestId, ref: ref, children: [jsx(CardHeader, { heading: title || t("widget.edit.title"), onClickClose: onCancel }), jsx(CardBody, { children: children }), jsxs(CardFooter, { children: [jsx(Button, { onClick: onCancel, variant: "ghost-neutral", children: t("widget.edit.cancel") }), jsx(Button, { disabled: saveEditModeDisabled || saving, loading: saving, onClick: async () => {
217
217
  setSaving(true);
218
218
  try {
219
219
  await onSave();
@@ -291,8 +291,8 @@ cvaMerge([
291
291
  * @param {WidgetKPIProps} props - The props for the WidgetKPI component
292
292
  * @returns {ReactElement} WidgetKPI component
293
293
  */
294
- const WidgetKPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, trends, iconName = undefined, iconColor = "info", notice, ...rest }) => {
295
- return (jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ?? undefined, ...rest, children: loading ? (jsx("div", { className: "flex flex-col gap-2 pt-6", "data-testid": dataTestId ? `${dataTestId}-loading` : "WidgetKPI-loading", children: trends ? (jsx(SkeletonLines, { lines: [
294
+ const WidgetKPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, trends, iconName = undefined, iconColor = "info", notice, ref, ...rest }) => {
295
+ return (jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ?? undefined, ref: ref, ...rest, children: loading ? (jsx("div", { className: "flex flex-col gap-2 pt-6", "data-testid": dataTestId ? `${dataTestId}-loading` : "WidgetKPI-loading", children: trends ? (jsx(SkeletonLines, { lines: [
296
296
  { textSize: "text-sm", width: 100 },
297
297
  { textSize: "text-lg", width: 40 },
298
298
  { textSize: "text-sm", width: 60 },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-widgets",
3
- "version": "2.9.21",
3
+ "version": "2.9.25",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -8,12 +8,12 @@
8
8
  },
9
9
  "dependencies": {
10
10
  "react": "19.0.0",
11
- "@trackunit/react-components": "1.17.16",
12
- "@trackunit/iris-app-runtime-core": "1.13.25",
13
- "@trackunit/css-class-variance-utilities": "1.11.42",
14
- "@trackunit/ui-design-tokens": "1.11.42",
15
- "@trackunit/ui-icons": "1.11.41",
16
- "@trackunit/i18n-library-translation": "1.12.26"
11
+ "@trackunit/react-components": "1.17.20",
12
+ "@trackunit/iris-app-runtime-core": "1.13.26",
13
+ "@trackunit/css-class-variance-utilities": "1.11.43",
14
+ "@trackunit/ui-design-tokens": "1.11.43",
15
+ "@trackunit/ui-icons": "1.11.42",
16
+ "@trackunit/i18n-library-translation": "1.12.27"
17
17
  },
18
18
  "module": "./index.esm.js",
19
19
  "main": "./index.cjs.js",
@@ -1,4 +1,5 @@
1
- export interface WidgetErrorProps {
1
+ import { Refable } from "@trackunit/react-components";
2
+ export interface WidgetErrorProps extends Refable<HTMLDivElement> {
2
3
  /**
3
4
  * Custom error message to display. If not provided, a default
4
5
  * localized error message will be shown.
@@ -11,4 +12,4 @@ export interface WidgetErrorProps {
11
12
  * @param {WidgetErrorProps} props - The props for the WidgetErrorProps component
12
13
  * @returns {ReactNode} WidgetMissingConfiguration component
13
14
  */
14
- export declare const WidgetError: ({ description }: WidgetErrorProps) => import("react/jsx-runtime").JSX.Element;
15
+ export declare const WidgetError: ({ description, ref }: WidgetErrorProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,3 +1,5 @@
1
+ import { Refable } from "@trackunit/react-components";
2
+ export type WidgetMissingConfigurationProps = Refable<HTMLDivElement>;
1
3
  /**
2
4
  * Use when you want to show a missing configuration state of a widget.
3
5
  *
@@ -5,4 +7,4 @@
5
7
  *
6
8
  * @returns {ReactNode} WidgetMissingConfiguration component
7
9
  */
8
- export declare const WidgetMissingConfiguration: () => import("react/jsx-runtime").JSX.Element;
10
+ export declare const WidgetMissingConfiguration: ({ ref }: WidgetMissingConfigurationProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,5 +1,6 @@
1
+ import { Refable } from "@trackunit/react-components";
1
2
  export type NoDataType = "Good" | "Neutral";
2
- export interface WidgetNoDataProps {
3
+ export interface WidgetNoDataProps extends Refable<HTMLDivElement> {
3
4
  /**
4
5
  * The type of no data state to show.
5
6
  *
@@ -17,4 +18,4 @@ export interface WidgetNoDataProps {
17
18
  * @param {WidgetNoDataProps} props - The props for the WidgetMissingConfiguration component
18
19
  * @returns {ReactNode} WidgetMissingConfiguration component
19
20
  */
20
- export declare const WidgetNoData: ({ type, description }: WidgetNoDataProps) => import("react/jsx-runtime").JSX.Element;
21
+ export declare const WidgetNoData: ({ type, description, ref }: WidgetNoDataProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,9 +1,9 @@
1
1
  import { VariantProps } from "@trackunit/css-class-variance-utilities";
2
- import { CommonProps } from "@trackunit/react-components";
2
+ import { CommonProps, Refable } from "@trackunit/react-components";
3
3
  import { ReactElement, ReactNode } from "react";
4
4
  import { cvaWidgetContent } from "./WidgetContent.variants";
5
5
  export type WidgetContentVariants = NonNullable<VariantProps<typeof cvaWidgetContent>>;
6
- export interface WidgetContentProps extends CommonProps {
6
+ export interface WidgetContentProps extends CommonProps, Refable<HTMLDivElement> {
7
7
  /**
8
8
  * Child elements to render in the body
9
9
  */
@@ -41,4 +41,4 @@ export interface WidgetContentProps extends CommonProps {
41
41
  * @param {WidgetContentProps} props - The props for the WidgetContent component
42
42
  * @returns {ReactNode} WidgetContent component
43
43
  */
44
- export declare const WidgetContent: ({ children, "data-testid": dataTestId, layout, padding, gap, className, centering, }: WidgetContentProps) => ReactElement;
44
+ export declare const WidgetContent: ({ children, "data-testid": dataTestId, layout, padding, gap, className, centering, ref, }: WidgetContentProps) => ReactElement;
@@ -1,6 +1,6 @@
1
- import { CommonProps } from "@trackunit/react-components";
1
+ import { CommonProps, Refable } from "@trackunit/react-components";
2
2
  import { ReactElement, ReactNode } from "react";
3
- export interface WidgetEditBodyProps extends CommonProps {
3
+ export interface WidgetEditBodyProps extends CommonProps, Refable<HTMLDivElement> {
4
4
  /**
5
5
  * Child elements to render in the body
6
6
  */
@@ -30,4 +30,4 @@ export interface WidgetEditBodyProps extends CommonProps {
30
30
  * @param {WidgetEditBodyProps} props - The props for the WidgetEditBody component
31
31
  * @returns {ReactNode} WidgetEditBody component
32
32
  */
33
- export declare const WidgetEditBody: ({ children, "data-testid": dataTestId, className, onCancel, onSave, saveEditModeDisabled, title, }: WidgetEditBodyProps) => ReactElement;
33
+ export declare const WidgetEditBody: ({ children, "data-testid": dataTestId, className, onCancel, onSave, saveEditModeDisabled, title, ref, }: WidgetEditBodyProps) => ReactElement;
@@ -1,8 +1,8 @@
1
- import { CommonProps, NoticeProps, TrendIndicatorProps } from "@trackunit/react-components";
1
+ import { CommonProps, NoticeProps, Refable, TrendIndicatorProps } from "@trackunit/react-components";
2
2
  import { ActivityColors, CriticalityColors, IntentColors } from "@trackunit/ui-design-tokens";
3
3
  import { IconName } from "@trackunit/ui-icons";
4
4
  import { ReactElement } from "react";
5
- export interface WidgetKPIProps extends CommonProps {
5
+ export interface WidgetKPIProps extends CommonProps, Refable<HTMLDivElement> {
6
6
  /**
7
7
  * The title of the WidgetKPI Card
8
8
  */
@@ -48,4 +48,4 @@ export interface WidgetKPIProps extends CommonProps {
48
48
  * @param {WidgetKPIProps} props - The props for the WidgetKPI component
49
49
  * @returns {ReactElement} WidgetKPI component
50
50
  */
51
- export declare const WidgetKPI: ({ title, value, loading, unit, className, "data-testid": dataTestId, tooltipLabel, trends, iconName, iconColor, notice, ...rest }: WidgetKPIProps) => ReactElement;
51
+ export declare const WidgetKPI: ({ title, value, loading, unit, className, "data-testid": dataTestId, tooltipLabel, trends, iconName, iconColor, notice, ref, ...rest }: WidgetKPIProps) => ReactElement;