@fluidattacks/design 8.1.0 → 8.2.0

package/dist/components/inputs/fields/input-file/dropzone/index.js

@@ -1,7 +1,220 @@
-import "react/jsx-runtime";
-import "../../../../../vendor-i-lggy4V.mjs";
-import "react";
-import { c9 as m } from "../../../../../components-LCJjFofC.mjs";
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
+import { l as V } from "../../../../../_virtual/lodash.js";
+import { useRef as q, Fragment as G } from "react";
+import { useDrop as H } from "../../../../../node_modules/react-aria/dist/private/dnd/useDrop.js";
+import { StyledDropzoneInputContainer as J, StyledFileStateContainer as K, StyledLinkButton as h } from "../styles.js";
+import { Container as p } from "../../../../container/index.js";
+import { Icon as y } from "../../../../icon/index.js";
+import { IconButton as O } from "../../../../icon-button/index.js";
+import { formatBytes as g, getFileTypesText as P } from "../../../utils.js";
+import { ProgressBar as Q } from "../../../../progress-bar/index.js";
+import { Tag as U } from "../../../../tag/index.js";
+import "../../../../typography/heading/index.js";
+import "../../../../typography/span/index.js";
+import { Text as d } from "../../../../typography/text/index.js";
+const X = (e) => e.split(",").map((t) => t.trim().toLowerCase()), Y = (e, t) => {
+  const r = e.name.toLowerCase(), o = e.type.toLowerCase();
+  return t.some((i) => i ? i.startsWith(".") ? r.endsWith(i) : i.endsWith("/*") ? o.startsWith(i.slice(0, -1)) : o === i : !1);
+}, Z = (e, t, r) => {
+  const o = t ? e.filter((i) => Y(i, X(t))) : [...e];
+  return t && o.length < e.length && console.warn("InputFile: Some files were rejected due to invalid type."), r ? o : o.slice(0, 1);
+}, _ = (e, t) => {
+  const r = e?.current;
+  if (!r || t.length === 0)
+    return;
+  const o = new DataTransfer();
+  t.forEach((i) => o.items.add(i)), r.files = o.files, r.dispatchEvent(new Event("change", { bubbles: !0 }));
+}, fe = ({
+  disabled: e = !1,
+  handleButtonClick: t,
+  errorMsg: r,
+  fileName: o,
+  handleRemoveFile: i,
+  resetField: T,
+  name: C,
+  theme: c,
+  accept: x,
+  value: $,
+  viewMode: f,
+  progressPercentage: a,
+  canReplaceInViewMode: z,
+  multiple: F,
+  maxSize: v,
+  fileSize: w,
+  inputRef: k
+}) => {
+  const D = q(null);
+  function I(s) {
+    i(s), T?.(C ?? "");
+  }
+  const { dropProps: S, isDropTarget: b } = H({
+    ref: D,
+    async onDrop(s) {
+      try {
+        const m = s.items.filter(
+          (u) => u.kind === "file"
+        ), R = await Promise.all(
+          m.map(async (u) => u.getFile())
+        );
+        _(
+          k,
+          Z(R, x, F)
+        );
+      } catch (m) {
+        console.error("Error reading dropped files:", m);
+      }
+    }
+  }), A = /* @__PURE__ */ n(
+    O,
+    {
+      color: c.palette.gray[700],
+      height: "20px",
+      icon: "xmark",
+      iconSize: "64px",
+      iconType: "fa-light",
+      onClick: i,
+      variant: "ghost",
+      width: "20px"
+    }
+  ), B = r ? /* @__PURE__ */ n(
+    y,
+    {
+      icon: "exclamation-circle",
+      iconClass: "error-icon",
+      iconColor: c.palette.error[500],
+      iconSize: "lg"
+    }
+  ) : a || f ? void 0 : /* @__PURE__ */ n(
+    y,
+    {
+      icon: "circle-check",
+      iconClass: "success-icon",
+      iconColor: c.palette.success[500],
+      iconSize: "lg"
+    }
+  ), E = !r && o ? /* @__PURE__ */ l(d, { color: c.palette.gray[400], size: "md", children: [
+    f && w != null ? g(w) : Array.from($).map((s) => g(s.size)).join(", "),
+    a ? ` • ${a}% uploaded` : void 0
+  ] }) : /* @__PURE__ */ n(U, { priority: "low", tagLabel: "Error uploading", variant: "error" }), j = /* @__PURE__ */ n(
+    h,
+    {
+      $variant: "highRelevance",
+      disabled: e,
+      onClick: t,
+      type: "button",
+      children: "click to browse"
+    }
+  ), W = /* @__PURE__ */ n(
+    h,
+    {
+      $variant: "lowRelevance",
+      disabled: e,
+      onClick: I,
+      type: "button",
+      children: "Try again"
+    }
+  ), L = z ? /* @__PURE__ */ n(
+    h,
+    {
+      $variant: "lowRelevance",
+      disabled: e,
+      onClick: t,
+      type: "button",
+      children: "Replace file"
+    }
+  ) : void 0;
+  return /* @__PURE__ */ l(G, { children: [
+    !o && /* @__PURE__ */ l(
+      J,
+      {
+        ...S,
+        className: `${e ? "disabled" : ""} ${r ? "error" : ""} ${b ? "target" : ""} dropzone`,
+        onClick: e ? void 0 : t,
+        children: [
+          o,
+          /* @__PURE__ */ n(
+            y,
+            {
+              icon: "cloud-arrow-up",
+              iconColor: c.palette.gray[800],
+              iconSize: "xl",
+              iconType: "fa-light"
+            }
+          ),
+          /* @__PURE__ */ n(p, { display: "inline-flex", gap: 0.25, children: /* @__PURE__ */ l(
+            d,
+            {
+              color: c.palette.gray[800],
+              size: "md",
+              textAlign: "center",
+              children: [
+                "Drop your file here, or ",
+                j
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ l(
+            d,
+            {
+              color: c.palette.gray[400],
+              size: "sm",
+              textAlign: "center",
+              children: [
+                `${P(x)}`,
+                v ? ` (max. ${g(v)} total limit)` : void 0
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    o && /* @__PURE__ */ l(
+      K,
+      {
+        className: `${r ? "error" : ""} dropzone`,
+        children: [
+          /* @__PURE__ */ l(
+            p,
+            {
+              alignItems: "center",
+              display: "flex",
+              flexDirection: "row",
+              justify: "space-between",
+              children: [
+                /* @__PURE__ */ l(p, { display: "flex", flexDirection: "column", children: [
+                  /* @__PURE__ */ l(
+                    p,
+                    {
+                      alignItems: "center",
+                      display: "inline-flex",
+                      gap: 0.25,
+                      justify: "center",
+                      children: [
+                        B,
+                        /* @__PURE__ */ n(
+                          d,
+                          {
+                            color: c.palette.gray[700],
+                            fontWeight: "bold",
+                            size: "md",
+                            children: o
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ n("div", { children: E })
+                ] }),
+                r ? W : V.isEmpty(o) ? void 0 : f ? L : A
+              ]
+            }
+          ),
+          a ? /* @__PURE__ */ n(Q, { minWidth: "full", percentage: a }) : void 0
+        ]
+      }
+    )
+  ] });
+};
 export {
-  m as DropzoneInputFile
+  fe as DropzoneInputFile
 };

package/dist/components/inputs/fields/input-file/index.js

@@ -1,7 +1,126 @@
-import "react/jsx-runtime";
-import "react";
-import "styled-components";
-import { a3 as m } from "../../../../components-LCJjFofC.mjs";
+import { jsxs as H, jsx as l } from "react/jsx-runtime";
+import { useRef as J, useCallback as p } from "react";
+import { useTheme as K } from "styled-components";
+import { DefaultInputFile as L } from "./default/index.js";
+import { DropzoneInputFile as Q } from "./dropzone/index.js";
+import { FileInput as S } from "./styles.js";
+import { OutlineContainer as U } from "../../outline-container/index.js";
+import { getFileName as W, createEvent as D } from "../../utils.js";
+const oo = ({
+  accept: h,
+  disabled: n = !1,
+  error: E,
+  label: R,
+  helpLink: j,
+  helpText: z,
+  id: s,
+  multiple: u,
+  name: o,
+  onChange: g,
+  required: m,
+  register: N,
+  setValue: e,
+  resetField: P,
+  tooltip: T,
+  watch: y,
+  weight: B,
+  variant: a = "default",
+  viewMode: M,
+  canReplaceInViewMode: O,
+  progressPercentage: d,
+  maxSize: w,
+  fileSize: A
+}) => {
+  const C = K(), c = n ? void 0 : E, f = J(null), r = N?.(o, { required: m }), F = y?.(o), v = W(F), I = p(
+    (i) => {
+      i.stopPropagation();
+      const t = D("change", o, null);
+      e && e(o, void 0), r && r.onChange(t);
+    },
+    [r, o, e]
+  ), G = p(
+    (i) => {
+      const { files: t } = i.currentTarget, x = D(
+        "change",
+        o,
+        t && t.length > 0 ? t : null
+      );
+      t && t.length > 0 && (g?.(
+        x
+      ), e && e(o, t), r && r.onChange(x));
+    },
+    [r, o, g, e]
+  ), k = p(
+    (i) => {
+      i.stopPropagation(), n ? i.preventDefault() : f.current && f.current.click();
+    },
+    [n]
+  );
+  return /* @__PURE__ */ H(
+    U,
+    {
+      error: c,
+      helpLink: j,
+      helpText: z,
+      htmlFor: s ?? o,
+      label: R,
+      required: m,
+      tooltip: T,
+      weight: B,
+      children: [
+        a === "default" && /* @__PURE__ */ l(
+          L,
+          {
+            disabled: n,
+            errorMsg: c,
+            fileName: v,
+            handleButtonClick: k,
+            handleRemoveFile: I,
+            theme: C
+          }
+        ),
+        a === "dropzone" && /* @__PURE__ */ l(
+          Q,
+          {
+            accept: h,
+            canReplaceInViewMode: O,
+            disabled: n,
+            errorMsg: c,
+            fileName: v,
+            fileSize: A,
+            handleButtonClick: k,
+            handleRemoveFile: I,
+            inputRef: f,
+            maxSize: w,
+            multiple: u,
+            name: o,
+            progressPercentage: d,
+            resetField: P,
+            theme: C,
+            value: F,
+            viewMode: M
+          }
+        ),
+        /* @__PURE__ */ l(
+          S,
+          {
+            ...r,
+            accept: h,
+            "aria-label": o,
+            "data-testid": o,
+            disabled: n,
+            id: s ?? o,
+            multiple: u,
+            name: o,
+            onChange: G,
+            ref: f,
+            type: "file"
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  m as InputFile
+  oo as InputFile
 };

package/dist/components/inputs/fields/input-file/styles.js

@@ -0,0 +1,137 @@
+import { styled as o } from "styled-components";
+import { StyledText as a } from "../../../typography/styles.js";
+const l = o(a)`
+  white-space: nowrap;
+  margin-right: ${({ theme: r }) => r.spacing[0.25]};
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 80%;
+`, p = o.div`
+  ${({ theme: r }) => `
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-radius: ${r.spacing[0.5]};
+    border: 1px dashed;
+    border-color: ${r.palette.gray[300]};
+    color: ${r.palette.gray[600]};
+    gap: ${r.spacing[0.625]};
+    height: 100%;
+    padding: ${r.spacing[1.75]} ${r.spacing[1.75]};
+    width: 100%;
+    font-size: ${r.typography.text.md};
+    cursor: pointer;
+
+    font-family: ${r.typography.type.primary};
+
+    &.target {
+      border-color: ${r.palette.primary[300]};
+    }
+
+    &.disabled {
+      background: ${r.palette.gray[100]};
+      border-color: ${r.palette.gray[300]};
+      cursor: not-allowed;
+
+      > * {
+        color: ${r.palette.gray[500]};
+      }
+    }
+
+    &.error:not(.disabled) {
+      border: 1px solid ${r.palette.error[500]};
+    }
+
+    &.success:not(.disabled) {
+      border: 1px solid ${r.palette.success[500]};
+    }
+
+    &:hover:not(:focus-within, .disabled, .error, .success),
+    &.target {
+      background: ${r.palette.gray[50]};
+      border: 1px solid ${r.palette.gray[600]};
+    }
+  `}
+`, d = o.div`
+  ${({ theme: r }) => `
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-radius: ${r.spacing[0.5]};
+    border: 1px solid;
+    border-color: ${r.palette.gray[300]};
+    color: ${r.palette.gray[600]};
+    gap: ${r.spacing[0.625]};
+    height: 100%;
+    padding: ${r.spacing[0.875]};
+    width: 100%;
+    font-size: ${r.typography.text.md};
+
+    font-family: ${r.typography.type.primary};
+
+    span:not(.action) {
+      font-size: ${r.typography.text.md};
+    }
+
+
+    &.target {
+      border-color: ${r.palette.primary[300]};
+    }
+
+    &.disabled {
+      background: ${r.palette.gray[100]};
+      border-color: ${r.palette.gray[300]};
+      cursor: not-allowed;
+
+      > * {
+        color: ${r.palette.gray[500]};
+      }
+    }
+
+    &.error:not(.disabled) {
+      border: 1px solid ${r.palette.error[500]};
+    }
+
+    &.success:not(.disabled) {
+      border: 1px solid ${r.palette.success[500]};
+    }
+  `}
+`, n = o.button`
+  ${({ theme: r, $variant: t }) => `
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+
+  font-size: ${r.typography.text.md};
+  font-family: ${r.typography.type.primary};
+  text-decoration: underline;
+  text-align: left;
+  cursor: pointer;
+
+  color: ${t === "highRelevance" ? r.palette.primary[500] : r.palette.gray[800]};
+
+  &:hover:not(:disabled) {
+    color: ${t === "highRelevance" ? r.palette.primary[200] : r.palette.gray[500]};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    text-decoration: none;
+  }
+`}
+`, s = o.input`
+  opacity: 0;
+  position: absolute;
+  visibility: hidden;
+  width: 0;
+`;
+export {
+  s as FileInput,
+  p as StyledDropzoneInputContainer,
+  d as StyledFileStateContainer,
+  l as StyledInputText,
+  n as StyledLinkButton
+};

package/dist/components/inputs/fields/input-section/index.js

@@ -1,5 +1,31 @@
-import "react/jsx-runtime";
-import { a6 as r } from "../../../../components-LCJjFofC.mjs";
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { Container as o } from "../../../container/index.js";
+import { Icon as c } from "../../../icon/index.js";
+import { Heading as p } from "../../../typography/heading/index.js";
+import "../../../typography/span/index.js";
+import "../../../typography/text/index.js";
+const h = ({
+  title: n,
+  icon: t = "circle-info",
+  children: l,
+  tagElement: r
+}) => /* @__PURE__ */ e(o, { display: "flex", flexDirection: "column", gap: 0.25, children: [
+  /* @__PURE__ */ e(
+    o,
+    {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "row",
+      gap: 0.75,
+      children: [
+        /* @__PURE__ */ i(c, { icon: t, iconSize: "md", iconType: "fa-light" }),
+        /* @__PURE__ */ i(p, { fontWeight: "bold", size: "xs", children: n }),
+        r && /* @__PURE__ */ i(o, { display: "flex", flexDirection: "row", mb: 0.25, children: r })
+      ]
+    }
+  ),
+  /* @__PURE__ */ i(o, { children: l })
+] });
 export {
-  r as InputSection
+  h as InputSection
 };

package/dist/components/inputs/fields/input-tags/field/index.js

@@ -1,7 +1,119 @@
-import "react/jsx-runtime";
-import "react";
-import "styled-components";
-import { ca as t } from "../../../../../components-LCJjFofC.mjs";
+import { jsx as f, jsxs as $ } from "react/jsx-runtime";
+import { useState as F, useMemo as K, useCallback as i } from "react";
+import { useTheme as M } from "styled-components";
+import { OutlineContainer as b } from "../../../outline-container/index.js";
+import { StyledTextInputContainer as z } from "../../../styles.js";
+import { createEvent as L } from "../../../utils.js";
+import { TagInput as N } from "../styles.js";
+import { Icon as X } from "../../../../icon/index.js";
+import { Tag as q } from "../../../../tag/index.js";
+const Z = ({
+  disabled: s = !1,
+  error: v,
+  field: o,
+  helpLink: T,
+  helpLinkText: y,
+  helpText: w,
+  label: C,
+  name: l = "input-tag",
+  onChange: c,
+  onRemove: u,
+  placeholder: x,
+  required: h,
+  tooltip: B,
+  value: D,
+  weight: k
+}) => {
+  const V = M(), p = s ? void 0 : v, [a, g] = F(""), m = c ? D : o?.value, t = K(() => m && typeof m == "string" ? m.split(",").filter(Boolean) : [], [m]), n = i(
+    (e) => {
+      const j = [...new Set(e.filter(Boolean))].join(","), d = L("change", l, j);
+      o && o.onChange(d), c && c(d);
+    },
+    [o, l, c]
+  ), E = i(
+    (e) => {
+      g(e.target.value);
+    },
+    []
+  ), I = i(
+    (e) => {
+      const r = a.trim();
+      r.length && !t.includes(r) && (e.preventDefault(), n([...t, r]), g("")), o && o.onBlur();
+    },
+    [a, o, n, t]
+  ), O = i(
+    (e) => {
+      const r = a.trim();
+      e.key === "Enter" && r.length === 0 && e.preventDefault(), ["Enter", ","].includes(e.key) && r.length > 0 && !t.includes(r) ? (e.preventDefault(), n([...t, r]), g("")) : e.key === "Backspace" && !r.length && t.length && (e.preventDefault(), u?.(t[t.length - 1]), n(t.slice(0, -1)));
+    },
+    [a, u, n, t]
+  ), S = i(
+    (e) => () => {
+      u?.(e), n(t.filter((r) => r !== e));
+    },
+    [u, n, t]
+  );
+  return /* @__PURE__ */ f(
+    b,
+    {
+      error: p,
+      helpLink: T,
+      helpLinkText: y,
+      helpText: w,
+      htmlFor: l,
+      label: C,
+      required: h,
+      tooltip: B,
+      weight: k,
+      children: /* @__PURE__ */ $(
+        z,
+        {
+          $overflowX: "auto",
+          className: `${s ? "disabled" : ""} ${p ? "error" : ""}`,
+          children: [
+            t.map((e) => /* @__PURE__ */ f(
+              q,
+              {
+                disabled: s,
+                onClose: S(e),
+                tagLabel: e
+              },
+              e
+            )),
+            /* @__PURE__ */ f(
+              N,
+              {
+                "aria-hidden": !1,
+                "aria-invalid": p ? "true" : "false",
+                "aria-label": l,
+                "aria-required": h,
+                autoComplete: "off",
+                disabled: s,
+                id: l,
+                onBlur: I,
+                onChange: E,
+                onKeyDown: O,
+                placeholder: t.length === 0 ? x : void 0,
+                ref: o?.ref,
+                type: "text",
+                value: a
+              }
+            ),
+            p ? /* @__PURE__ */ f(
+              X,
+              {
+                icon: "exclamation-circle",
+                iconClass: "error-icon",
+                iconColor: V.palette.error[500],
+                iconSize: "lg"
+              }
+            ) : void 0
+          ]
+        }
+      )
+    }
+  );
+};
 export {
-  t as TagsField
+  Z as TagsField
 };