@visns-studio/visns-components 6.24.4 → 6.25.0

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 (43) hide show
  1. package/package.json +4 -2
  2. package/src/components/Autocomplete.jsx +189 -119
  3. package/src/components/DataGrid.jsx +472 -31
  4. package/src/components/Navigation.jsx +475 -51
  5. package/src/components/auth/ClientAuthFrame.jsx +5 -0
  6. package/src/components/auth/ClientAuthScreen.jsx +29 -0
  7. package/src/components/columns/ColumnRenderers.jsx +3 -46
  8. package/src/components/columns/StackedRow.jsx +186 -0
  9. package/src/components/controls/DataGridSearch.jsx +110 -2
  10. package/src/components/controls/DataGridSortSheet.jsx +155 -0
  11. package/src/components/generic/GenericAuth.jsx +50 -18
  12. package/src/components/generic/GenericDashboard.jsx +20 -1
  13. package/src/components/generic/GenericDetail.jsx +446 -259
  14. package/src/components/mapboxSearchBox.js +640 -0
  15. package/src/components/navBadges.js +63 -1
  16. package/src/components/navDrawer.js +147 -0
  17. package/src/components/sms/SmsThreadPanel.jsx +34 -6
  18. package/src/components/sms/smsHelpers.js +15 -0
  19. package/src/components/styles/ClientAuth.module.scss +39 -0
  20. package/src/components/styles/DataGrid.module.scss +158 -5
  21. package/src/components/styles/Field.module.scss +52 -1
  22. package/src/components/styles/Form.module.scss +82 -0
  23. package/src/components/styles/GenericClientPortal.module.scss +72 -20
  24. package/src/components/styles/GenericDashboard.module.scss +50 -0
  25. package/src/components/styles/GenericDetail.module.scss +63 -1
  26. package/src/components/styles/GenericDynamic.module.scss +23 -0
  27. package/src/components/styles/GenericFormBuilder.module.scss +11 -0
  28. package/src/components/styles/GenericIndex.module.scss +6 -1
  29. package/src/components/styles/Navigation.module.scss +460 -7
  30. package/src/components/styles/Sms.module.scss +92 -0
  31. package/src/components/styles/StackedRow.module.scss +182 -0
  32. package/src/components/styles/TicketConversation.module.scss +76 -0
  33. package/src/components/styles/Vault.module.scss +192 -0
  34. package/src/components/styles/density.css +10 -0
  35. package/src/components/styles/global-datagrid.css +163 -0
  36. package/src/components/styles/global.css +20 -0
  37. package/src/components/tickets/TicketConversation.jsx +13 -8
  38. package/src/components/utils/ConfirmDialog.js +22 -3
  39. package/src/components/utils/cardLayout.js +666 -0
  40. package/src/components/utils/contactChannels.js +130 -0
  41. package/src/components/utils/editPlacement.js +95 -0
  42. package/src/components/utils/useDensity.js +303 -7
  43. package/src/index.js +32 -0
package/src/components/generic/GenericAuth.jsx CHANGED
@@ -21,6 +21,10 @@ import Verify from '../auth/Verify';
21
21
  import TwoFactorAuth from '../auth/TwoFactorAuth';
22
22
  import ClientLogin from '../auth/ClientLogin';
23
23
  import ClientOTPVerify from '../auth/ClientOTPVerify';
24
+ // Both client steps are route elements here, so they own the page and have to
25
+ // say so: the split layout is sized by a parent that, on a bare route, has no
26
+ // height to give. See ClientAuthScreen.
27
+ import ClientAuthScreen from '../auth/ClientAuthScreen';
24
28
  import {
25
29
  resolveAuthEndpoints,
26
30
  resolveClientPaths,
@@ -100,6 +104,14 @@ const GenericAuth = ({
100
104
  clientPortalConfig = null, // Configuration for client portal with component and URLs
101
105
  config = {}, // Configuration object for auth features
102
106
  density = 'default', // 'default' | 'large' — app-wide display density
107
+ // Whether every DataGrid in this app draws stacked card rows below 640px
108
+ // instead of a table that scrolls sideways. Opt-in per APPLICATION, not
109
+ // per library version: the mapping that decides what a card says is a
110
+ // heuristic over a view's columns, and three apps consume this library —
111
+ // a title picked badly on a screen nobody has looked at is worse than the
112
+ // sideways table it replaced. A single view can still opt itself in with
113
+ // `tableSetting.cardLayout`, and out with `cardLayout: false`.
114
+ cardRows = false,
103
115
  // Every URL the auth journey talks to, merged over the 6.6.3 literals.
104
116
  // Threaded from here into each screen so one object configures the lot.
105
117
  // See auth/authEndpoints.js for the keys and their defaults.
@@ -154,6 +166,22 @@ const GenericAuth = ({
154
166
  };
155
167
  }, [density]);
156
168
 
169
+ // Same mechanism, same node, same reasoning: `useCardRowsEnabled` in
170
+ // utils/useDensity.js reads this attribute off <html>, so an app opts its
171
+ // grids in from one place and every grid — including one mounted inside a
172
+ // modal on a detail tab — sees it without a prop being threaded to it.
173
+ // Absent means absent: an app that never passes the prop writes no
174
+ // attribute and nothing in the DataGrid changes.
175
+ useInsertionEffect(() => {
176
+ if (typeof document === 'undefined' || !cardRows) {
177
+ return undefined;
178
+ }
179
+ document.documentElement.setAttribute('data-card-rows', 'on');
180
+ return () => {
181
+ document.documentElement.removeAttribute('data-card-rows');
182
+ };
183
+ }, [cardRows]);
184
+
157
185
  const updateAuthStatus = async () => {
158
186
  // The loading curtain covers two moments and stays down for neither
159
187
  // more nor less: the first profile check of a page load (no usable
@@ -539,15 +567,17 @@ const ClientLoginComponent = React.memo(
539
567
  paths,
540
568
  options,
541
569
  }) => (
542
- <ClientLogin
543
- loginBg={loginBg}
544
- logo={logo}
545
- setSystemAuth={setIsAuthenticated}
546
- setUserProfile={setUserProfile}
547
- urls={urls}
548
- paths={paths}
549
- {...(options || {})}
550
- />
570
+ <ClientAuthScreen>
571
+ <ClientLogin
572
+ loginBg={loginBg}
573
+ logo={logo}
574
+ setSystemAuth={setIsAuthenticated}
575
+ setUserProfile={setUserProfile}
576
+ urls={urls}
577
+ paths={paths}
578
+ {...(options || {})}
579
+ />
580
+ </ClientAuthScreen>
551
581
  )
552
582
  );
553
583
 
@@ -561,15 +591,17 @@ const ClientOTPVerifyComponent = React.memo(
561
591
  paths,
562
592
  options,
563
593
  }) => (
564
- <ClientOTPVerify
565
- loginBg={loginBg}
566
- logo={logo}
567
- setSystemAuth={setIsAuthenticated}
568
- setUserProfile={setUserProfile}
569
- urls={urls}
570
- paths={paths}
571
- {...(options || {})}
572
- />
594
+ <ClientAuthScreen>
595
+ <ClientOTPVerify
596
+ loginBg={loginBg}
597
+ logo={logo}
598
+ setSystemAuth={setIsAuthenticated}
599
+ setUserProfile={setUserProfile}
600
+ urls={urls}
601
+ paths={paths}
602
+ {...(options || {})}
603
+ />
604
+ </ClientAuthScreen>
573
605
  )
574
606
  );
575
607
 
package/src/components/generic/GenericDashboard.jsx CHANGED
@@ -1297,7 +1297,26 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
1297
1297
  };
1298
1298
 
1299
1299
  const renderWidget = (widget) => {
1300
- const widgetData = data[widget.id] || [];
1300
+ const rawWidgetData = data[widget.id];
1301
+ /*
1302
+ * `??` FOR A COUNTER, AND THAT IS THE WHOLE OF A LONG-STANDING BUG.
1303
+ *
1304
+ * A counter's value is a scalar and ZERO IS A PERFECTLY GOOD ONE —
1305
+ * no unassigned tickets, no support hours left. `|| []` swapped that
1306
+ * zero for an empty array, and the `typeof` gate on the value below
1307
+ * (number or string, or else `&nbsp;`) then rejected the array and
1308
+ * drew a blank. So the two cards reporting the best possible news
1309
+ * were the two that rendered as an empty box with a button under it,
1310
+ * at every width, while the card reporting one open ticket worked.
1311
+ *
1312
+ * Everything else keeps the `|| []` it has always had: a chart handed
1313
+ * a falsy scalar where it expects rows throws inside the chart
1314
+ * library, and `[]` is the shape those widgets already fall back to.
1315
+ */
1316
+ const widgetData =
1317
+ widget.type === 'counter'
1318
+ ? rawWidgetData ?? []
1319
+ : rawWidgetData || [];
1301
1320
 
1302
1321
  // More detailed check for valid data
1303
1322
  const hasData =