@fluidattacks/design 8.2.0 → 8.3.1

package/dist/components/modal/columns-modal/index.js

@@ -1,42 +1,43 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
 import { useRef as k, useState as j, useCallback as m } from "react";
 import { createPortal as w } from "react-dom";
 import { useTheme as H } from "styled-components";
-import { ModalWrapper as S, ModalContainer as P } from "../styles.js";
+import { Dialog as S } from "../dialog/index.js";
+import { ModalContainer as D } from "../styles.js";
 import { Button as p } from "../../button/index.js";
 import { Container as c } from "../../container/index.js";
 import { Divider as d } from "../../divider/index.js";
-import { IconButton as T } from "../../icon-button/index.js";
-import { PreviewPanel as z } from "./preview-panel/index.js";
-import { SearchPanel as B } from "./search-panel/index.js";
-import { Heading as D } from "../../typography/heading/index.js";
+import { IconButton as P } from "../../icon-button/index.js";
+import { PreviewPanel as T } from "./preview-panel/index.js";
+import { SearchPanel as z } from "./search-panel/index.js";
+import { Heading as B } from "../../typography/heading/index.js";
 import "../../typography/span/index.js";
 import "../../typography/text/index.js";
-const N = ({
+const U = ({
   _containerId: h = "portals",
   title: y,
   modalRef: e,
   variant: f
 }) => {
   const a = H(), u = k(null), [o, g] = j(void 0), C = m(
-    (t) => {
-      const { checked: n, value: i } = t.target, x = e.columns.map((l) => l.name === i ? (l.toggleVisibility?.(n), { ...l, visible: n }) : l);
+    (i) => {
+      const { checked: n, value: r } = i.target, x = e.columns.map((s) => s.name === r ? (s.toggleVisibility?.(n), { ...s, visible: n }) : s);
       e.setColumns(x);
     },
     [e]
   ), b = m(
-    (t) => {
-      const n = e.columns.map((i) => i.id === t ? (i.toggleVisibility?.(!1), { ...i, visible: !1 }) : i);
+    (i) => {
+      const n = e.columns.map((r) => r.id === i ? (r.toggleVisibility?.(!1), { ...r, visible: !1 }) : r);
       e.setColumns(n);
     },
     [e]
   ), v = m(() => {
-    const t = u.current?.scrollHeight;
-    o !== t && g(t);
+    const i = u.current?.scrollHeight;
+    o !== i && g(i);
   }, [o]);
   return e.isOpen ? w(
-    /* @__PURE__ */ r(S, { "aria-label": e.name, "aria-modal": "true", children: /* @__PURE__ */ s(P, { $size: "md", flexDirection: "column", children: [
-      /* @__PURE__ */ s(
+    /* @__PURE__ */ t(S, { label: e.name, children: /* @__PURE__ */ l(D, { $size: "md", flexDirection: "column", children: [
+      /* @__PURE__ */ l(
         c,
         {
           display: "flex",
@@ -44,9 +45,9 @@ const N = ({
           px: 1.25,
           py: 1.25,
           children: [
-            /* @__PURE__ */ r(D, { size: "sm", children: y }),
-            /* @__PURE__ */ r(
-              T,
+            /* @__PURE__ */ t(B, { size: "sm", children: y }),
+            /* @__PURE__ */ t(
+              P,
               {
                 icon: "close",
                 iconColor: a.palette.gray[400],
@@ -63,8 +64,8 @@ const N = ({
           ]
         }
       ),
-      /* @__PURE__ */ r(d, { mb: 0, mt: 0 }),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ t(d, { mb: 0, mt: 0 }),
+      /* @__PURE__ */ l(
         c,
         {
           display: "flex",
@@ -75,8 +76,8 @@ const N = ({
           scroll: "y",
           width: "100%",
           children: [
-            /* @__PURE__ */ r(
-              B,
+            /* @__PURE__ */ t(
+              z,
               {
                 columns: e.columns,
                 formId: "columns-visibility",
@@ -84,15 +85,15 @@ const N = ({
                 variant: f
               }
             ),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ t(
               c,
               {
                 borderLeft: `2px solid ${a.palette.gray[100]}`,
                 height: o ? `${o}px` : "auto"
               }
             ),
-            /* @__PURE__ */ r(
-              z,
+            /* @__PURE__ */ t(
+              T,
               {
                 description: "Click and drag to reorder the columns",
                 items: e.columns,
@@ -104,8 +105,8 @@ const N = ({
           ]
         }
       ),
-      /* @__PURE__ */ r(d, { mb: 0, mt: 0 }),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ t(d, { mb: 0, mt: 0 }),
+      /* @__PURE__ */ l(
         c,
         {
           display: "flex",
@@ -113,7 +114,7 @@ const N = ({
           px: 1.25,
           py: 1.25,
           children: [
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ t(
               p,
               {
                 disabled: !e.hasChanged,
@@ -126,7 +127,7 @@ const N = ({
                 children: "Reset to default"
               }
             ),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ t(
               p,
               {
                 id: "columns-modal-submit",
@@ -141,8 +142,8 @@ const N = ({
       )
     ] }) }),
     document.getElementById(h) ?? document.body
-  ) : /* @__PURE__ */ r("div", {});
+  ) : /* @__PURE__ */ t("div", {});
 };
 export {
-  N as ColumnsModal
+  U as ColumnsModal
 };

package/dist/components/modal/dialog/index.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { IDialogProps } from '../types';
+declare const Dialog: ({ children, id, label, }: Readonly<PropsWithChildren<IDialogProps>>) => JSX.Element;
+export { Dialog };

package/dist/components/modal/dialog/index.js

@@ -0,0 +1,32 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useRef as f, useState as c } from "react";
+import { trapTabKey as o } from "./utils.js";
+import { ModalWrapper as p } from "../styles.js";
+import { useMountEffect as s } from "../../../hooks/use-mount-effect.js";
+const w = ({
+  children: n = void 0,
+  id: a = void 0,
+  label: i
+}) => {
+  const r = f(null), [t] = c(() => document.activeElement);
+  return s(() => {
+    const e = r.current;
+    return e?.contains(document.activeElement) !== !0 && e?.focus(), e?.addEventListener("keydown", o), () => {
+      e?.removeEventListener("keydown", o), t instanceof HTMLElement && t.focus();
+    };
+  }), /* @__PURE__ */ m(
+    p,
+    {
+      "aria-label": i,
+      "aria-modal": "true",
+      id: a,
+      ref: r,
+      role: "dialog",
+      tabIndex: -1,
+      children: n
+    }
+  );
+};
+export {
+  w as Dialog
+};

package/dist/components/modal/dialog/utils.d.ts

@@ -0,0 +1,2 @@
+declare const trapTabKey: (event: Readonly<KeyboardEvent>) => void;
+export { trapTabKey };

package/dist/components/modal/dialog/utils.js

@@ -0,0 +1,26 @@
+const s = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  "[contenteditable='true']",
+  "[tabindex]:not([tabindex='-1'])"
+].join(", "), c = (t) => Array.from(t.querySelectorAll(s)), d = (t) => {
+  const { currentTarget: n } = t;
+  if (t.key !== "Tab" || !(n instanceof HTMLElement)) return;
+  const e = c(n);
+  if (e.length === 0) {
+    t.preventDefault();
+    return;
+  }
+  const a = e.findIndex(
+    (r) => r === document.activeElement
+  ), o = t.shiftKey && a <= 0, i = !t.shiftKey && a === e.length - 1;
+  (o || i) && (t.preventDefault(), e[o ? e.length - 1 : 0].focus());
+};
+export {
+  d as trapTabKey
+};

package/dist/components/modal/index.js

@@ -1,26 +1,27 @@
-import { jsx as i, jsxs as v } from "react/jsx-runtime";
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
 import o from "../../_virtual/lodash.js";
 import { useState as E, useRef as y, useEffect as F } from "react";
 import { createPortal as $ } from "react-dom";
 import { useTheme as z } from "styled-components";
-import { ModalFooter as k } from "./footer/index.js";
-import { Header as A } from "./header/index.js";
-import { ModalConfirm as mr } from "./modal-confirm/index.js";
-import { ModalWrapper as I, ModalContainer as w, ModalContent as B, ImageContainer as D } from "./styles.js";
+import { Dialog as k } from "./dialog/index.js";
+import { ModalFooter as A } from "./footer/index.js";
+import { Header as D } from "./header/index.js";
+import { ModalConfirm as si } from "./modal-confirm/index.js";
+import { ModalContainer as I, ModalContent as w, ImageContainer as B } from "./styles.js";
 import { CloudImage as N } from "../cloud-image/index.js";
 import { Container as P } from "../container/index.js";
-import { Tabs as W } from "../tabs/index.js";
+import { Tabs as _ } from "../tabs/index.js";
 import "../typography/heading/index.js";
 import "../typography/span/index.js";
-import { Text as _ } from "../typography/text/index.js";
-import { ColumnsModal as ar } from "./columns-modal/index.js";
-const er = ({
+import { Text as q } from "../typography/text/index.js";
+import { ColumnsModal as ai } from "./columns-modal/index.js";
+const oi = ({
   _portal: b = !0,
   alert: C,
   cancelButton: n = void 0,
   children: l = void 0,
   confirmButton: p = void 0,
-  content: r = void 0,
+  content: i = void 0,
   description: M = void 0,
   dismissable: O = !0,
   modalRef: e,
@@ -31,84 +32,76 @@ const er = ({
   size: H,
   id: c = "modal-container"
 }) => {
-  const f = z(), [u, g] = E(void 0), a = y(null), d = y(!1), m = Array.isArray(t) && t.length > 0, S = n ?? p;
+  const f = z(), [g, u] = E(void 0), d = y(null), a = y(!1), m = Array.isArray(t) && t.length > 0, S = n ?? p;
   F(() => {
-    if (m && !d.current && a.current) {
-      const x = a.current.getBoundingClientRect().height;
-      x > 50 && (g(x), d.current = !0);
+    if (m && !a.current && d.current) {
+      const x = d.current.getBoundingClientRect().height;
+      x > 50 && (u(x), a.current = !0);
     }
-    e.isOpen || (g(void 0), d.current = !1);
+    e.isOpen || (u(void 0), a.current = !1);
   }, [m, e.isOpen]);
-  const h = /* @__PURE__ */ i(
+  const h = /* @__PURE__ */ r(k, { id: "modal-wrapper", label: e.name, children: /* @__PURE__ */ v(
     I,
     {
-      "aria-label": e.name,
-      "aria-modal": "true",
-      id: "modal-wrapper",
-      children: /* @__PURE__ */ v(
-        w,
-        {
-          $size: H,
-          "data-testid": c,
-          flexDirection: "column",
-          id: c,
-          ref: m ? a : void 0,
-          style: m && u ? { height: u } : void 0,
-          children: [
-            !o.isEmpty(s) && !o.isNil(s) && /* @__PURE__ */ i(
-              A,
-              {
-                description: M,
-                dismissable: O,
-                modalRef: e,
-                onClose: j,
-                otherActions: T,
-                title: s
-              }
-            ),
-            t && /* @__PURE__ */ i(
-              P,
-              {
-                borderTop: `1px solid ${f.palette.gray[300]}`,
-                display: "block",
-                mb: 1.25,
-                position: "sticky",
-                children: /* @__PURE__ */ i(W, { items: t })
-              }
-            ),
-            (o.isObject(r) || l) && /* @__PURE__ */ v(
-              B,
-              {
-                style: S ? { borderBottom: `1px solid ${f.palette.gray[200]}` } : void 0,
-                children: [
-                  l,
-                  o.isObject(r) && o.isString(r.imageSrc) && /* @__PURE__ */ i(D, { $framed: r.imageFramed, children: /* @__PURE__ */ i(N, { alt: "modal-img", publicId: r.imageSrc }) }),
-                  o.isObject(r) && o.isString(r.imageText) && /* @__PURE__ */ i(_, { size: "md", children: r.imageText })
-                ]
-              }
-            ),
-            /* @__PURE__ */ i(
-              k,
-              {
-                alert: C,
-                cancelButton: n,
-                confirmButton: p,
-                modalRef: e
-              }
-            )
-          ]
-        }
-      )
+      $size: H,
+      "data-testid": c,
+      flexDirection: "column",
+      id: c,
+      ref: m ? d : void 0,
+      style: m && g ? { height: g } : void 0,
+      children: [
+        !o.isEmpty(s) && !o.isNil(s) && /* @__PURE__ */ r(
+          D,
+          {
+            description: M,
+            dismissable: O,
+            modalRef: e,
+            onClose: j,
+            otherActions: T,
+            title: s
+          }
+        ),
+        t && /* @__PURE__ */ r(
+          P,
+          {
+            borderTop: `1px solid ${f.palette.gray[300]}`,
+            display: "block",
+            mb: 1.25,
+            position: "sticky",
+            children: /* @__PURE__ */ r(_, { items: t })
+          }
+        ),
+        (o.isObject(i) || l) && /* @__PURE__ */ v(
+          w,
+          {
+            style: S ? { borderBottom: `1px solid ${f.palette.gray[200]}` } : void 0,
+            children: [
+              l,
+              o.isObject(i) && o.isString(i.imageSrc) && /* @__PURE__ */ r(B, { $framed: i.imageFramed, children: /* @__PURE__ */ r(N, { alt: "modal-img", publicId: i.imageSrc }) }),
+              o.isObject(i) && o.isString(i.imageText) && /* @__PURE__ */ r(q, { size: "md", children: i.imageText })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          A,
+          {
+            alert: C,
+            cancelButton: n,
+            confirmButton: p,
+            modalRef: e
+          }
+        )
+      ]
     }
-  );
+  ) });
   return b && e.isOpen ? $(
     h,
     document.getElementById("portals") ?? document.body
   ) : e.isOpen ? h : null;
 };
 export {
-  ar as ColumnsModal,
-  er as Modal,
-  mr as ModalConfirm,
-  k as ModalFooter
+  ai as ColumnsModal,
+  oi as Modal,
+  si as ModalConfirm,
+  A as ModalFooter
 };

package/dist/components/modal/types.d.ts

@@ -25,6 +25,16 @@ interface IModalContent {
     imageFramed?: boolean;
     imageText?: string;
 }
+/**
+ * Modal dialog props.
+ * @interface IDialogProps
+ * @property { string } [id] - The id of the dialog element.
+ * @property { string } label - The accessible name announced when the dialog takes focus.
+ */
+interface IDialogProps {
+    id?: string;
+    label: string;
+}
 /**
  * Modal header component props.
  * @interface IModalHeaderProps
@@ -92,4 +102,4 @@ interface IModalConfirmProps {
     txtCancel?: string;
     txtConfirm?: React.ReactNode | string;
 }
-export type { IModalProps, IModalContent, IModalConfirmProps, IModalFooterProps, IModalHeaderProps, TSize, };
+export type { IDialogProps, IModalProps, IModalContent, IModalConfirmProps, IModalFooterProps, IModalHeaderProps, TSize, };

package/dist/components/segmented-progress-bar/index.js

@@ -1,49 +1,50 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import { useTheme as f } from "styled-components";
-import { StyledBarContainer as w, StyledSegment as y } from "./styles.js";
-const x = ({
-  segments: a,
-  backgroundColor: l,
+import { StyledBarContainer as w, StyledSegment as S } from "./styles.js";
+const B = ({
+  segments: t,
+  backgroundColor: m,
   height: n = "14px",
   width: $ = "100%",
   margin: p,
   mx: g,
-  my: i,
-  ml: s,
-  mr: c,
-  mt: d,
-  mb: h
+  my: h,
+  ml: i,
+  mr: s,
+  mt: c,
+  mb: d
 }) => {
-  const r = f(), e = [
+  const r = f(), o = [
     r.palette.primary[700],
     r.palette.error[500],
     r.palette.warning[500]
   ], u = r.palette.warning[200];
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ l(
     w,
     {
-      $backgroundColor: l ?? u,
+      $backgroundColor: m ?? u,
       $height: n,
       $margin: p,
-      $mb: h,
-      $ml: s,
-      $mr: c,
-      $mt: d,
+      $mb: d,
+      $ml: i,
+      $mr: s,
+      $mt: c,
       $mx: g,
-      $my: i,
+      $my: h,
       $width: $,
       role: "progressbar",
-      children: a.map((t, o) => /* @__PURE__ */ m(
-        y,
+      children: t.map((a, e) => /* @__PURE__ */ l(
+        S,
         {
-          $color: t.color ?? e[o % e.length],
-          $width: t.value
+          $color: a.color ?? o[e % o.length],
+          $showSeparator: e < t.length - 1,
+          $width: a.value
         },
-        `segment-${o}`
+        `segment-${e}`
       ))
     }
   );
 };
 export {
-  x as SegmentedProgressBar
+  B as SegmentedProgressBar
 };

package/dist/components/segmented-progress-bar/styles.d.ts

@@ -13,6 +13,7 @@ interface IStyledBarContainerProps {
 }
 interface IStyledSegmentProps {
     $color: string;
+    $showSeparator: boolean;
     $width: number;
 }
 declare const StyledBarContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof IStyledBarContainerProps> & IStyledBarContainerProps, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof IStyledBarContainerProps> & IStyledBarContainerProps, never>>> & string;

package/dist/components/segmented-progress-bar/styles.js

@@ -1,17 +1,17 @@
 import { styled as t } from "styled-components";
-import { setMargin as $ } from "../@core/utils.js";
-const c = t.div`
+import { setMargin as a } from "../@core/utils.js";
+const b = t.div`
   ${({
   $backgroundColor: r,
   $height: o,
   $width: e,
   $ml: i,
   $mr: d,
-  $mt: m,
-  $mb: n,
-  $mx: l,
-  $my: a,
-  $margin: h
+  $mt: l,
+  $mb: m,
+  $mx: n,
+  $my: h,
+  $margin: $
 }) => `
     background-color: ${r};
     border-radius: 999px;
@@ -19,17 +19,19 @@ const c = t.div`
     height: ${o};
     overflow: hidden;
     width: ${e};
-    ${$({ margin: h, mb: n, ml: i, mr: d, mt: m, mx: l, my: a })}
+    ${a({ margin: $, mb: m, ml: i, mr: d, mt: l, mx: n, my: h })}
   `}
-`, f = t.div`
-  ${({ $color: r, $width: o }) => `
+`, x = t.div`
+  ${({ $color: r, $showSeparator: o, $width: e, theme: i }) => `
     background-color: ${r};
+    box-sizing: border-box;
     flex-shrink: 0;
     height: 100%;
-    width: ${o}%;
+    width: ${e}%;
+    ${o ? `border-right: 1.5px solid ${i.palette.white};` : ""}
   `}
 `;
 export {
-  c as StyledBarContainer,
-  f as StyledSegment
+  b as StyledBarContainer,
+  x as StyledSegment
 };

package/dist/components/table/table-column-toggle/index.js

@@ -5,6 +5,7 @@ import { Button as f } from "../../button/index.js";
 import "../../../_virtual/lodash.js";
 import "react-dom";
 import "styled-components";
+import { useColumnsModal as b } from "../../../hooks/use-columns-modal.js";
 import "../../container/index.js";
 import "../../icon-button/index.js";
 import "../../typography/heading/index.js";
@@ -14,8 +15,7 @@ import "../../cloud-image/index.js";
 import "react-router";
 import "../../notification-sign/index.js";
 import "../../icon/index.js";
-import { ColumnsModal as b } from "../../modal/columns-modal/index.js";
-import { useColumnsModal as C } from "../../../hooks/use-columns-modal.js";
+import { ColumnsModal as C } from "../../modal/columns-modal/index.js";
 const G = (s) => {
   const { table: t } = s, { meta: m } = t.options, [, n] = t.getHeaderGroups(), a = t.getVisibleLeafColumns().filter((o) => o.id !== "selection").length, i = l(
     () => t.getAllLeafColumns().filter((o) => o.id !== "selection"),
@@ -27,7 +27,7 @@ const G = (s) => {
     name: typeof o.columnDef.header == "string" ? o.columnDef.header : o.columnDef.id ?? "",
     toggleVisibility: o.toggleVisibility,
     visible: o.getIsVisible()
-  })), [i]), e = C({
+  })), [i]), e = b({
     columnOrder: m?.defaultColumnOrder ?? [],
     items: d,
     name: "table-column-management",
@@ -48,7 +48,7 @@ const G = (s) => {
       }
     ),
     /* @__PURE__ */ r(
-      b,
+      C,
       {
         modalRef: e,
         title: "Manage columns",

package/package.json

@@ -135,5 +135,5 @@
     "./dist/index.js"
   ],
   "typings": "./dist/index.d.ts",
-  "version": "8.2.0"
+  "version": "8.3.1"
 }