@visns-studio/visns-components 6.21.0 → 6.23.0

package/src/components/styles/ZoomPhone.module.scss

@@ -0,0 +1,550 @@
+// ---------------------------------------------------------------------------
+// Zoom Phone presence (components/phone/*)
+// ---------------------------------------------------------------------------
+// The header chip and its popover: every Zoom Phone extension, who is free, who
+// is on a call, and which client that call is with.
+//
+// Every brand value is a CSS custom property with a neutral fallback, exactly
+// as in Sms.module.scss and Vault.module.scss, so the library carries no
+// palette of its own.
+//
+// IMPORTANT — why every control below restates its colour, background, border,
+// font-size AND box size:
+//
+// The popover mounts INSIDE `.hactions > ul`, whose chip rules reach every
+// descendant `a` and `button` and hand it white text, a fixed 36px box and a
+// pill radius. On a white panel that renders as blank boxes.
+// Navigation.module.scss excludes `[data-nav-overlay] *` from those rules,
+// which is the real fix — but a component that survives only because its host
+// is well behaved is a component that breaks the next time it is mounted
+// somewhere new. So nothing here inherits anything it actually needs, and no
+// `!important` was required to do it.
+// ---------------------------------------------------------------------------
+
+@mixin zp-tokens {
+    --zp-primary: var(--primary-color, #00386c);
+    --zp-paragraph: var(--paragraph-color, #2b2b2b);
+    --zp-background: var(--background-color, #fff);
+
+    --zp-line: color-mix(in srgb, var(--zp-paragraph) 18%, transparent);
+    // 76% of the body colour over white lands around #5b5b5b — roughly 6:1,
+    // comfortably past 4.5:1 on the small type this file is full of.
+    --zp-muted: color-mix(in srgb, var(--zp-paragraph) 76%, transparent);
+    --zp-surface: color-mix(
+        in srgb,
+        var(--zp-paragraph) 4%,
+        var(--zp-background)
+    );
+    --zp-hover: color-mix(in srgb, var(--zp-primary) 9%, var(--zp-background));
+
+    // The three states, and only three: free, ringing, talking. Chosen to be
+    // distinguishable without relying on hue alone — every dot is paired with
+    // its word, because a roster read by somebody with deuteranopia has to
+    // work too.
+    --zp-free: rgb(31, 122, 71);
+    --zp-ringing: rgb(163, 106, 20);
+    --zp-busy: rgb(190, 62, 62);
+    --zp-bad: rgb(190, 62, 62);
+    --zp-warn: rgb(163, 106, 20);
+}
+
+@mixin zp-reset {
+    box-sizing: border-box;
+    width: auto;
+    height: auto;
+    min-width: 0;
+    min-height: 0;
+    max-width: none;
+    margin: 0;
+    font-family: inherit;
+    font-weight: 400;
+    line-height: 1.3;
+    letter-spacing: normal;
+    text-transform: none;
+    text-decoration: none;
+    text-align: left;
+    appearance: none;
+    outline: none;
+    transform: none;
+    box-shadow: none;
+    // The host's chip rules transition `all`, which makes a control visibly
+    // resize on hover once its box is no longer fixed.
+    transition:
+        background-color 0.15s ease,
+        color 0.15s ease,
+        border-color 0.15s ease;
+}
+
+@mixin zp-focus {
+    &:focus-visible {
+        outline: 2px solid var(--zp-primary);
+        outline-offset: 2px;
+    }
+}
+
+@keyframes zpSpin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes zpPopIn {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.spin {
+    animation: zpSpin 0.9s linear infinite;
+}
+
+// ---------------------------------------------------------------------------
+// The header chip
+// ---------------------------------------------------------------------------
+
+.zoomPhone {
+    @include zp-tokens;
+
+    position: relative;
+    align-items: center;
+}
+
+// Deliberately the same shape as Notification's, the vault's and the SMS
+// badge's triggers: these sit side by side in the action pill and must read as
+// one row of chips, not four designs. This one DOES inherit the header's
+// colour, which is correct — it is a chip.
+.trigger {
+    @include zp-focus;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 8px;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--paragraph-color, #333);
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background-color: rgba(var(--primary-color-rgb, 0, 86, 179), 0.1);
+        color: var(--primary-color, #0056b3);
+        transform: scale(1.05);
+    }
+
+    &:active {
+        transform: scale(0.95);
+    }
+}
+
+// Matches Notification's and the SMS badge's, down to the offsets: three counts
+// side by side in the header have to sit on the same line as each other.
+.badge {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: 8px;
+    background-color: var(--secondary-color, #c1272d);
+    color: #fff;
+    font-size: 10px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+}
+
+// ---------------------------------------------------------------------------
+// The popover
+// ---------------------------------------------------------------------------
+
+.popoverWrapper {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    z-index: 1100;
+    margin-top: 10px;
+    // The host's chip `li` is a centring flex container. The popover is
+    // absolutely positioned so it escapes the flexbox, but `text-align` is
+    // inherited and would centre every line of prose inside it.
+    text-align: left;
+}
+
+.popover {
+    @include zp-tokens;
+
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 380px;
+    max-width: calc(100vw - 2rem);
+    border: 1px solid var(--zp-line);
+    border-radius: 10px;
+    // Opaque, and stated: the header behind this is a dark brand bar, and a
+    // panel that inherits any of it is unreadable.
+    background: var(--zp-background);
+    color: var(--zp-paragraph);
+    font-size: 0.85rem;
+    text-align: left;
+    box-shadow:
+        0 12px 32px rgba(0, 0, 0, 0.22),
+        0 2px 6px rgba(0, 0, 0, 0.12);
+    overflow: hidden;
+    animation: zpPopIn 0.18s ease-out;
+}
+
+.popoverHead {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.7rem 0.85rem;
+    border-bottom: 1px solid var(--zp-line);
+    background: var(--zp-surface);
+}
+
+.popoverTitle {
+    display: inline-flex;
+    gap: 0.4rem;
+    align-items: center;
+    color: var(--zp-paragraph);
+    font-size: 0.95rem;
+    font-weight: 700;
+
+    svg {
+        color: var(--zp-primary);
+    }
+}
+
+.iconButton {
+    @include zp-reset;
+    @include zp-focus;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 1px solid var(--zp-line);
+    border-radius: 6px;
+    background: var(--zp-background);
+    color: var(--zp-muted);
+    cursor: pointer;
+
+    &:hover {
+        background: var(--zp-hover);
+        color: var(--zp-primary);
+    }
+}
+
+// ---------------------------------------------------------------------------
+// The roster
+// ---------------------------------------------------------------------------
+
+.rows {
+    max-height: 380px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow-y: auto;
+
+    // Two hosts reach in here with bare element selectors: Navigation's
+    // `.hactions > ul li` and the CRM's own `ul { padding-left: … }` in
+    // main.scss. Restated so the list is a list wherever it is mounted.
+    > li {
+        min-width: 0;
+        min-height: 0;
+        margin: 0;
+        padding: 0;
+        position: static;
+        list-style: none;
+    }
+}
+
+// Specificity, deliberately: `.hactions > ul li` is 0,1,2 and no single class
+// can outrank it. This restates the row's BOX at 0,2,0, where it wins. Paint
+// stays in `.row` below; only geometry is repeated.
+.rows > .row {
+    display: grid;
+    grid-template-columns: 30px minmax(0, 1fr) auto;
+    column-gap: 0.6rem;
+    align-items: center;
+    justify-content: normal;
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+    margin: 0;
+    padding: 0.55rem 0.85rem;
+    position: static;
+}
+
+.rows > .row > .rowMain {
+    display: block;
+}
+
+// One extension, one row: avatar, name + what they are doing, status.
+//
+// Three columns, and only the middle one gives way — it is the only part of the
+// row that can be any length. Fixed tracks either side keep a list of mixed
+// rows measured identically, so nothing zig-zags down the edge.
+.row {
+    display: grid;
+    grid-template-columns: 30px minmax(0, 1fr) auto;
+    column-gap: 0.6rem;
+    align-items: center;
+    padding: 0.55rem 0.85rem;
+    border: none;
+    border-bottom: 1px solid color-mix(in srgb, var(--zp-line) 55%, transparent);
+    background: var(--zp-background);
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    &:hover {
+        background: var(--zp-hover);
+    }
+}
+
+.avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--zp-primary) 14%, var(--zp-background));
+    color: var(--zp-primary);
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    // Fixed, so a two-letter avatar and a one-letter one are the same size and
+    // the column of them does not ripple.
+    flex: 0 0 30px;
+}
+
+.rowMain {
+    // `min-width: 0` is the load-bearing declaration: without it a grid item
+    // refuses to shrink below its content and the ellipsis never engages.
+    min-width: 0;
+    justify-self: stretch;
+    overflow: hidden;
+    color: var(--zp-paragraph);
+    line-height: 1.35;
+    text-align: left;
+}
+
+.rowTop {
+    display: flex;
+    gap: 0.4rem;
+    align-items: baseline;
+    min-width: 0;
+}
+
+.rowName {
+    overflow: hidden;
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.extension {
+    flex: 0 0 auto;
+    color: var(--zp-muted);
+    font-size: 0.72rem;
+    font-variant-numeric: tabular-nums;
+}
+
+.idleLine {
+    display: block;
+    color: var(--zp-muted);
+    font-size: 0.76rem;
+}
+
+// The busy line: what they are doing, the number, the queue, the timer. Wraps
+// rather than ellipsing, because every part of it is load bearing and the row
+// is allowed to be two lines tall.
+.callLine {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    align-items: baseline;
+    min-width: 0;
+    font-size: 0.76rem;
+}
+
+.callSummary {
+    overflow: hidden;
+    color: var(--zp-paragraph);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.callNumber {
+    color: var(--zp-muted);
+    font-variant-numeric: tabular-nums;
+}
+
+.queueTag {
+    padding: 0 0.3rem;
+    border-radius: 4px;
+    background: color-mix(in srgb, var(--zp-primary) 10%, var(--zp-background));
+    color: var(--zp-primary);
+    font-size: 0.68rem;
+    font-weight: 600;
+}
+
+// Tabular figures, so a timer counting up does not shuffle the row sideways
+// every time a digit changes width.
+.duration {
+    margin-left: auto;
+    color: var(--zp-muted);
+    font-variant-numeric: tabular-nums;
+}
+
+.clientLine {
+    display: flex;
+    gap: 0.4rem;
+    align-items: baseline;
+    min-width: 0;
+    font-size: 0.76rem;
+}
+
+.clientLink {
+    @include zp-reset;
+    @include zp-focus;
+
+    overflow: hidden;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--zp-primary);
+    font-size: 0.76rem;
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.clientFlat {
+    overflow: hidden;
+    color: var(--zp-primary);
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.clientMeta {
+    flex: 0 0 auto;
+    color: var(--zp-muted);
+}
+
+// The status cell. The dot is never alone — the word beside it is what makes
+// the roster readable without relying on hue.
+.status {
+    display: inline-flex;
+    gap: 0.35rem;
+    align-items: center;
+    flex: 0 0 auto;
+    color: var(--zp-muted);
+    font-size: 0.72rem;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: currentColor;
+}
+
+.status_free {
+    color: var(--zp-free);
+}
+
+.status_ringing {
+    color: var(--zp-ringing);
+}
+
+.status_busy {
+    color: var(--zp-busy);
+}
+
+.status_muted {
+    color: var(--zp-muted);
+}
+
+// ---------------------------------------------------------------------------
+// Empty, notes, footer
+// ---------------------------------------------------------------------------
+
+.empty {
+    padding: 1.4rem 0.85rem;
+    color: var(--zp-muted);
+    text-align: center;
+
+    p {
+        margin: 0;
+    }
+}
+
+.statusNote {
+    display: flex;
+    gap: 0.4rem;
+    align-items: center;
+    margin: 0;
+    padding: 0.5rem 0.85rem;
+    border-top: 1px solid var(--zp-line);
+    background: color-mix(in srgb, var(--zp-warn) 8%, var(--zp-background));
+    color: var(--zp-warn);
+    font-size: 0.75rem;
+
+    svg {
+        flex: 0 0 auto;
+    }
+}
+
+.statusNoteBad {
+    background: color-mix(in srgb, var(--zp-bad) 8%, var(--zp-background));
+    color: var(--zp-bad);
+}
+
+.footer {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.45rem 0.85rem;
+    border-top: 1px solid var(--zp-line);
+    background: var(--zp-surface);
+    color: var(--zp-muted);
+    font-size: 0.72rem;
+}
+
+.footerHint,
+.footerStamp {
+    white-space: nowrap;
+}

package/src/components/styles/global-datagrid.css

@@ -761,6 +761,29 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     background: none !important;
 }
 
+/* The keyboard highlight in a dropdown's option list — declared by the
+   vendored theme, then painted with nothing.
+
+   Arrow keys have always worked in these filters: the combo tracks an active
+   item, scrolls it into view, Enter selects it and Escape closes. But the
+   theme's ONLY rule for that active item is `border: 1px solid transparent`,
+   while hover and selected both get a background — so navigating with the
+   arrows changed nothing on screen and the keys read as dead.
+
+   Colouring the border the theme already reserves is why this cannot shift the
+   list: every item carries that 1px border, active or not. Scoped to the same
+   theme selector the invisible rule uses, so it lands exactly where that rule
+   lands and nowhere else.
+
+   `--primary-color` rather than one of the `--dgx-*` tokens above: those are
+   defined on `.InovuaReactDataGrid`, and the option list is rendered outside
+   the grid element, where they would not resolve. */
+.inovua-react-toolkit-combo-box__list--theme-default-light
+    .inovua-react-toolkit-combo-box__list__item--active {
+    border-color: color-mix(in srgb, var(--primary-color, #1b3933) 55%, transparent) !important;
+    background: color-mix(in srgb, var(--primary-color, #1b3933) 12%, transparent) !important;
+}
+
 /* The native date filter is the odd one out in the row.
    
    Measured on /tickets: every other filter editor is 28px tall with a 6px

package/src/components/vault/VaultAccessLog.jsx

@@ -24,11 +24,34 @@ export const VAULT_ACTIONS = {
     update: 'edited the entry',
     delete: 'deleted the entry',
     restore: 'restored the entry',
+    share_create: 'created a share link',
+    // The user on a `share_view` row is the person who CREATED the link, not
+    // the reader — the reader has no account — so the line is phrased from
+    // their side. The IP beside it is the reader's.
+    share_view: 'had a share link opened',
+    share_revoke: 'revoked a share link',
 };
 
 const describeAction = (action) =>
     VAULT_ACTIONS[action] || String(action || '').replace(/_/g, ' ');
 
+/**
+ * The extra clause a row's `meta` earns, or null.
+ *
+ * Today the only one: where a share link was emailed. Written as "sent to" or
+ * "could not be emailed to" because a link that failed to send still went
+ * somewhere in intent, and an incident asks about the address either way.
+ */
+const describeMeta = (row) => {
+    const address = row?.meta?.recipient_email;
+
+    if (!address) return null;
+
+    return row.meta.emailed === false
+        ? `could not be emailed to ${address}`
+        : `sent to ${address}`;
+};
+
 /**
  * Who took what out of the vault, and when.
  *
@@ -180,6 +203,7 @@ const VaultAccessLog = ({ entry = null, endpoints, isOpen = true, onClose }) =>
                                 )}
                             </div>
                             <div className={styles.logMeta}>
+                                {describeMeta(row) && <span>{describeMeta(row)}</span>}
                                 {row.ip && <span>{row.ip}</span>}
                                 <span
                                     data-tooltip-id="system-tooltip"