@fluidattacks/design 8.1.0 → 8.2.0

package/dist/components/inputs/utils/date-selector/index.js

@@ -1,6 +1,87 @@
-import "react/jsx-runtime";
-import "react";
-import { c3 as m } from "../../../../components-LCJjFofC.mjs";
+import { jsxs as v, jsx as e } from "react/jsx-runtime";
+import { useCallback as h } from "react";
+import { StyledTextInputContainer as y } from "../../styles.js";
+import { Button as C } from "../calendar-button/index.js";
+import { DateField as F } from "../date-time-field/index.js";
+import { formatDate as T, formatDateTime as j } from "../../../../utils/date.js";
+import { normalizeDate as k } from "../../../../utils/normalizers.js";
+const b = ({
+  error: c,
+  buttonProps: u,
+  datePickerRef: D,
+  disabled: a = !1,
+  granularity: i = "day",
+  fieldProps: m,
+  groupProps: d,
+  name: r,
+  onChange: o,
+  register: l,
+  required: x,
+  setValue: n,
+  value: f
+}) => {
+  const p = k(f, i), S = h(
+    (t) => {
+      if (m.onChange && m.onChange(t), t?.year && String(t.year).length >= 4) {
+        const s = i === "day" ? T(String(t)) : j(String(t));
+        n && n(r, s, { shouldDirty: !0 }), o && o(s);
+      }
+    },
+    [m, i, r, n, o]
+  ), g = h(
+    (t) => {
+      o?.(t.currentTarget.value);
+    },
+    [o]
+  );
+  return /* @__PURE__ */ v(
+    y,
+    {
+      ...d,
+      className: `${a ? "disabled" : ""} ${c ? "error" : ""}`,
+      ref: D,
+      children: [
+        /* @__PURE__ */ e(
+          F,
+          {
+            disabled: a,
+            error: c != null,
+            props: {
+              ...m,
+              autoFocus: !1,
+              granularity: i,
+              onChange: S,
+              shouldForceLeadingZeros: !0,
+              ...p && !n ? { value: p } : {}
+            }
+          }
+        ),
+        /* @__PURE__ */ e(
+          C,
+          {
+            disabled: a,
+            icon: i === "minute" ? "calendar-clock" : "calendar",
+            props: u
+          }
+        ),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ...l?.(r, { required: x }),
+            ...o ? { onChange: g } : {},
+            "aria-label": r,
+            className: "date-input",
+            disabled: a,
+            id: r,
+            name: r,
+            type: "text",
+            value: f?.trim() ?? ""
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  m as DateSelector
+  b as DateSelector
 };

package/dist/components/inputs/utils/date-time-field/index.js

@@ -1,9 +1,135 @@
-import "react/jsx-runtime";
-import "../../../../vendor-i-lggy4V.mjs";
-import "react";
-import "styled-components";
-import { c1 as p, c2 as a } from "../../../../components-LCJjFofC.mjs";
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import { createCalendar as x } from "../../../../node_modules/@internationalized/date/dist/private/createCalendar.js";
+import { l as f } from "../../../../_virtual/lodash.js";
+import { useRef as y, useCallback as P, useState as M } from "react";
+import { useDateField as C, useTimeField as D } from "../../../../node_modules/react-aria/dist/private/datepicker/useDateField.js";
+import { useDateSegment as S } from "../../../../node_modules/react-aria/dist/private/datepicker/useDateSegment.js";
+import { useDateFieldState as F } from "../../../../node_modules/react-stately/dist/private/datepicker/useDateFieldState.js";
+import { useTimeFieldState as N } from "../../../../node_modules/react-stately/dist/private/datepicker/useTimeFieldState.js";
+import { useTheme as $ } from "styled-components";
+import { InputDateBox as k, TimeOutlineContainer as v, TimePickerContainer as h, DayPeriodButton as g } from "../styles.js";
+import { Icon as T } from "../../../icon/index.js";
+const b = ({
+  segment: i,
+  state: s
+}) => {
+  const t = $(), o = y(null), e = { ...i, placeholder: {
+    day: "dd",
+    dayPeriod: "(AM/PM)",
+    era: "",
+    hour: "hh",
+    literal: "",
+    minute: "mm",
+    month: "mm",
+    second: "",
+    timeZoneName: "",
+    year: "yyyy"
+  }[i.type] }, { segmentProps: c } = S(e, s, o), d = t.palette.gray[e.isEditable ? 800 : 500];
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ...e.type !== "literal" && {
+        ...c,
+        className: "segment-cell"
+      },
+      ref: o,
+      style: e.type === "literal" ? void 0 : {
+        color: e.isPlaceholder ? t.palette.gray[400] : d
+      },
+      children: e.isPlaceholder ? e.placeholder : e.text
+    }
+  );
+}, z = ({
+  disabled: i,
+  error: s = !1,
+  props: t
+}) => {
+  const o = $(), m = y(null), e = F({
+    ...t,
+    createCalendar: x,
+    locale: "en-US"
+  }), { fieldProps: c } = C(t, e, m), d = P(
+    (l) => {
+      const n = document.getElementsByClassName("segment-cell"), r = l.currentTarget;
+      Object.values(n).some(
+        (p) => p.contains(r)
+      ) || (l.preventDefault(), l.stopPropagation());
+    },
+    []
+  );
+  return /* @__PURE__ */ u(k, { ...c, onClick: d, children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: "flex flex-row",
+        style: { color: o.palette.gray[f.isNil(e.value) ? 400 : 800] },
+        tabIndex: -1,
+        children: e.segments.map((l, n) => {
+          const r = `key_${n}`;
+          return /* @__PURE__ */ a(
+            b,
+            {
+              segment: { ...l, isEditable: !i },
+              state: e
+            },
+            r
+          );
+        })
+      }
+    ),
+    s ? /* @__PURE__ */ a(
+      T,
+      {
+        icon: "exclamation-circle",
+        iconColor: o.palette.error[500],
+        iconSize: "lg"
+      }
+    ) : void 0
+  ] });
+}, L = (i) => {
+  const s = y(null), t = N({
+    ...i,
+    locale: "en-US",
+    shouldForceLeadingZeros: !0
+  }), { timeValue: o } = t, m = !f.isNil(o) && o.hour < 12 ? "AM" : "PM", [e, c] = M(
+    f.isNil(o) ? "AM" : m
+  ), { fieldProps: d } = D(i, t, s), l = P(
+    (n) => {
+      const r = n.currentTarget.name;
+      r !== e && (f.isNil(o) || (r === "AM" ? t.setSegment("dayPeriod", 0) : r === "PM" && t.setSegment("dayPeriod", 12))), c(r);
+    },
+    [e, t, o]
+  );
+  return /* @__PURE__ */ u(v, { children: [
+    /* @__PURE__ */ a(h, { ...d, ref: s, children: t.segments.slice(0, -2).map((n, r) => {
+      const p = `key_${r}`;
+      return /* @__PURE__ */ a(b, { segment: n, state: t }, p);
+    }) }),
+    /* @__PURE__ */ u(h, { children: [
+      /* @__PURE__ */ a(
+        g,
+        {
+          id: e === "AM" ? "active" : "",
+          name: "AM",
+          onClick: l,
+          type: "button",
+          children: "AM"
+        }
+      ),
+      /* @__PURE__ */ a(
+        g,
+        {
+          id: e === "PM" ? "active" : "",
+          name: "PM",
+          onClick: l,
+          type: "button",
+          children: "PM"
+        }
+      )
+    ] })
+  ] });
+};
 export {
-  p as DateField,
-  a as TimeField
+  z as DateField,
+  L as TimeField
 };

package/dist/components/inputs/utils/dialog/index.js

@@ -1,7 +1,14 @@
-import "react/jsx-runtime";
-import "react";
-import "../../../../vendor-i-lggy4V.mjs";
-import { c4 as t } from "../../../../components-LCJjFofC.mjs";
+import { jsx as i } from "react/jsx-runtime";
+import { useRef as f } from "react";
+import { useDialog as m } from "../../../../node_modules/react-aria/dist/private/dialog/useDialog.js";
+import { DialogContainer as s } from "../styles.js";
+const g = ({
+  children: e,
+  ...r
+}) => {
+  const o = f(null), { dialogProps: t } = m(r, o);
+  return /* @__PURE__ */ i(s, { ...t, ref: o, children: e });
+};
 export {
-  t as Dialog
+  g as Dialog
 };

package/dist/components/inputs/utils/number-field/index.js

@@ -1,8 +1,192 @@
-import "react/jsx-runtime";
-import "../../../../vendor-i-lggy4V.mjs";
-import "react";
-import "styled-components";
-import { cc as e } from "../../../../components-LCJjFofC.mjs";
+import { jsxs as x, jsx as n, Fragment as U } from "react/jsx-runtime";
+import S, { l as R } from "../../../../_virtual/lodash.js";
+import { useCallback as f } from "react";
+import { useTheme as B } from "styled-components";
+import { StyledTextInputContainer as O, StyledNumberFieldSeparator as _ } from "../../styles.js";
+import { ActionButton as b } from "../action-button/index.js";
+import { Icon as q } from "../../../icon/index.js";
+import { createEvent as j } from "../../utils.js";
+import { Tooltip as G } from "../../../tooltip/index.js";
+import { normalizeNumber as H } from "../../../../utils/normalizers.js";
+const ir = ({
+  error: C,
+  decimalPlaces: g = 0,
+  disabled: u = !1,
+  id: D,
+  maxLength: M,
+  max: d = 1 / 0,
+  min: i = 0,
+  name: r,
+  onChange: o,
+  onEnter: k,
+  onValueChange: p,
+  placeholder: z,
+  register: A,
+  required: $,
+  setValue: e,
+  tooltipMessage: v,
+  value: E,
+  variant: N = "full",
+  defaultValue: K
+}) => {
+  const m = B(), h = u ? void 0 : C, s = g < 0 ? 0 : g, a = H(E?.toString(), K), I = f(() => {
+    const t = ((a ?? Number(i)) - 10 ** -s).toFixed(s), l = Math.max(Number(i), Number(t));
+    e && e(r, l, { shouldDirty: !0 }), p?.(l);
+    const y = j("change", r, t);
+    o && o(y);
+  }, [
+    a,
+    s,
+    i,
+    e,
+    r,
+    o,
+    p
+  ]), T = f(() => {
+    const t = ((a ?? Number(i)) + 10 ** -s).toFixed(s), l = Math.min(
+      Number(d),
+      Number(t) > Number(i) ? Number(t) : Number(i)
+    );
+    e && e(r, l, { shouldDirty: !0 }), p?.(l);
+    const y = j("change", r, t);
+    o && o(y);
+  }, [
+    a,
+    s,
+    d,
+    i,
+    e,
+    r,
+    o,
+    p
+  ]), w = f(
+    (c) => {
+      const { value: t } = c.target, l = /\d+/u.test(t) && !S.isEmpty(t);
+      e && e(r, l ? t : void 0), o && o(c), p?.(S.isEmpty(t) ? void 0 : Number(t));
+    },
+    [r, o, p, e]
+  ), L = f(
+    (c) => {
+      c.stopPropagation(), c.key === "Enter" && !R.isEmpty(c.currentTarget.value) && k?.(R.toNumber(c.currentTarget.value));
+    },
+    [k]
+  ), F = () => /* @__PURE__ */ n(
+    "input",
+    {
+      "aria-hidden": !1,
+      "aria-invalid": h ? "true" : "false",
+      "aria-label": r,
+      "aria-required": $,
+      autoComplete: "off",
+      disabled: u,
+      id: D ?? r,
+      max: d,
+      min: i,
+      onChange: w,
+      onKeyUp: L,
+      placeholder: z,
+      required: $,
+      step: 10 ** -s,
+      type: "number",
+      value: a ?? "",
+      ...A?.(r, {
+        maxLength: M,
+        max: d,
+        min: i,
+        onChange: w,
+        value: E,
+        valueAsNumber: !0
+      })
+    }
+  );
+  return /* @__PURE__ */ x(
+    O,
+    {
+      $variant: N,
+      className: `${u ? "disabled" : ""} ${h ? "error" : ""}`,
+      children: [
+        N === "compact" && v ? /* @__PURE__ */ n(
+          G,
+          {
+            id: `numberInputTooltip-${r}`,
+            tip: v,
+            width: "100%",
+            children: F()
+          }
+        ) : F(),
+        h && /* @__PURE__ */ n(
+          q,
+          {
+            icon: "exclamation-circle",
+            iconClass: "error-icon",
+            iconColor: m.palette.error[500],
+            iconSize: "lg"
+          }
+        ),
+        N === "compact" ? /* @__PURE__ */ x(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              height: "100%",
+              justifyContent: "center",
+              borderLeft: "inherit"
+            },
+            children: [
+              /* @__PURE__ */ n(
+                b,
+                {
+                  borderRadius: `0 ${m.spacing[0.5]} 0 0`,
+                  disabled: u,
+                  icon: "plus",
+                  onClick: T,
+                  px: 0.25
+                }
+              ),
+              /* @__PURE__ */ n(_, {}),
+              /* @__PURE__ */ n(
+                b,
+                {
+                  borderRadius: `0 0 ${m.spacing[0.5]} 0`,
+                  disabled: u,
+                  icon: "minus",
+                  onClick: I,
+                  px: 0.25
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ x(U, { children: [
+          /* @__PURE__ */ n(
+            b,
+            {
+              borderLeft: "inherit",
+              borderRight: "inherit",
+              disabled: u,
+              icon: "minus",
+              margin: "0 -0.625rem 0 0",
+              onClick: I,
+              px: 0.75,
+              py: 0.75
+            }
+          ),
+          /* @__PURE__ */ n(
+            b,
+            {
+              borderRadius: `0 ${m.spacing[0.5]} ${m.spacing[0.5]} 0`,
+              disabled: u,
+              icon: "plus",
+              onClick: T,
+              px: 0.75,
+              py: 0.75
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 export {
-  e as NumberField
+  ir as NumberField
 };

package/dist/components/inputs/utils/popover/index.js

@@ -1,8 +1,63 @@
-import "react/jsx-runtime";
-import "react";
-import "../../../../vendor-i-lggy4V.mjs";
-import "styled-components";
-import { bV as e } from "../../../../components-LCJjFofC.mjs";
+import { jsx as d } from "react/jsx-runtime";
+import { useRef as h, useState as y, useLayoutEffect as $, useCallback as g } from "react";
+import { Overlay as b } from "../../../../node_modules/react-aria/dist/private/overlays/Overlay.js";
+import { usePopover as w } from "../../../../node_modules/react-aria/dist/private/overlays/usePopover.js";
+import { useTheme as x } from "styled-components";
+const T = ({
+  className: o,
+  children: i,
+  id: s = "popover",
+  isFilter: l = !1,
+  popoverRef: e,
+  state: p,
+  triggerRef: t,
+  ...f
+}) => {
+  const r = x(), n = h(null), [u, c] = y(
+    void 0
+  );
+  $(() => {
+    c(t?.current?.getBoundingClientRect().width);
+  }, [t]);
+  const { popoverProps: a } = w(
+    {
+      ...f,
+      popoverRef: e ?? n,
+      triggerRef: t,
+      isNonModal: e ? !0 : void 0,
+      shouldFlip: o === "dropdown"
+    },
+    p
+  ), v = g(
+    (m) => {
+      m.preventDefault();
+    },
+    []
+  );
+  return /* @__PURE__ */ d(b, { children: /* @__PURE__ */ d(
+    "div",
+    {
+      ...a,
+      className: o,
+      id: s,
+      onPointerDown: l ? v : void 0,
+      ref: e ?? n,
+      style: {
+        ...a.style,
+        maxHeight: 300,
+        overflowY: "auto",
+        scrollbarColor: `${r.palette.gray[600]} ${r.palette.gray[100]}`,
+        scrollPadding: r.spacing[0.5],
+        ...o === "dropdown" ? {
+          display: "flex",
+          justifyContent: "center",
+          width: u
+        } : {}
+      },
+      children: i
+    }
+  ) });
+};
 export {
-  e as Popover
+  T as Popover
 };

package/dist/components/inputs/utils/styles.js

@@ -0,0 +1,113 @@
+import { css as e, styled as i } from "styled-components";
+import { BaseButtonComponent as p } from "../../@core/styles.js";
+const l = i(p)`
+  align-items: center;
+  background-color: inherit;
+  border-color: inherit;
+  display: flex;
+  height: 38px;
+  justify-content: center;
+  width: 40px;
+  margin: ${({ $margin: t = "0" }) => e`
+    ${t}
+  `};
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: ${({ theme: t }) => t.palette.gray[100]};
+    cursor: pointer;
+  }
+`, d = i.div`
+  ${({ theme: t }) => `
+    align-items: flex-start;
+    background: ${t.palette.white};
+    border: 1px solid ${t.palette.gray[200]};
+    border-radius: ${t.spacing[0.5]};
+    box-shadow: ${t.shadows.md};
+    display: inline-flex;
+    flex-direction: column;
+    gap: ${t.spacing[0.25]};
+    height: auto;
+    padding: ${t.spacing[0.25]};
+    width: 292px;
+  `}
+`, g = i.button`
+  ${({ theme: t, $disabled: o, $focus: r, $header: n }) => {
+  const a = r ? "34px" : "40px";
+  return `
+      align-items: center;
+      border-radius: ${n ? `0 ${t.spacing[0.5]} ${t.spacing[0.5]} 0` : "4px"};
+      border-left: inherit;
+      display: flex;
+      height: ${n ? "38px" : a};
+      justify-content: center;
+      outline: none;
+      width: ${n ? "38px" : "40px"};
+
+      &:hover {
+        background-color: ${t.palette.gray[o ? 500 : 100]};
+      }
+    `;
+}}
+`, u = i.div`
+  ${({ theme: t }) => `
+    align-items: center;
+    background: transparent;
+    border-radius: ${t.spacing[0.5]} 0 0 ${t.spacing[0.5]};
+    border-color: inherit;
+    display: flex;
+    height: 100%;
+    justify-content: space-between;
+    width: calc(100% - 40px);
+  `}
+`, $ = i.div`
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  gap: ${({ theme: t }) => t.spacing[0.5]};
+  flex: 1 0 0;
+`, x = i.div`
+  ${({ theme: t }) => `
+    align-items: center;
+    align-self: stretch;
+    background-color: ${t.palette.gray[200]};
+    border-radius: ${t.spacing[0.25]};
+    display: flex;
+    font-family: ${t.typography.type.primary};
+    gap: ${t.spacing[0.25]};
+    line-height: ${t.spacing[1.5]};
+    padding: 2px ${t.spacing[0.25]};
+  `}
+`, y = i.button`
+  ${({ theme: t }) => `
+    align-items: center;
+    background-color: inherit;
+    border: 0.5px solid ${t.palette.gray[200]};
+    border-radius: 7px;
+    color: ${t.palette.gray[800]};
+    cursor: pointer;
+    display: flex;
+    font-weight: ${t.typography.weight.regular};
+    justify-content: center;
+    gap: 10px;
+    padding: 2px 10px;
+
+    &#active {
+      background-color: ${t.palette.white};
+      box-shadow: ${t.shadows.md};
+      font-weight: ${t.typography.weight.bold};
+    }
+  `}
+`;
+export {
+  g as CalendarButtonAction,
+  y as DayPeriodButton,
+  d as DialogContainer,
+  u as InputDateBox,
+  l as StyledButtonAction,
+  $ as TimeOutlineContainer,
+  x as TimePickerContainer
+};

package/dist/components/inputs/utils.js

@@ -0,0 +1,44 @@
+const i = {
+  "vnd.ms-excel": "XLS",
+  "vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX",
+  "vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+  msword: "DOC"
+}, a = (e, t, r) => {
+  const o = new Event(e);
+  return Object.defineProperty(o, "target", {
+    value: { name: t, value: r }
+  }), o;
+}, u = (e) => {
+  const t = e;
+  return t ? Array.from(t).map((r) => r.name).join(", ") : "";
+}, m = (e) => {
+  if (!e)
+    return "All files";
+  const t = e.split(",").map((o) => {
+    const n = o.trim();
+    if (e === "image/*")
+      return "Images";
+    if (e === "video/*")
+      return "Videos";
+    if (e === "audio/*")
+      return "Audio files";
+    if (n.startsWith("."))
+      return n.substring(1).toUpperCase();
+    if (n.includes("/")) {
+      const s = n.split("/")[1];
+      return i[s] ?? s.toUpperCase();
+    }
+    return n.toUpperCase();
+  });
+  return [...new Set(t)].join(", ");
+}, f = (e, t = 2) => {
+  if (e === 0) return "0 Bytes";
+  const r = 1024, o = t < 0 ? 0 : t, n = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], s = Math.floor(Math.log(e) / Math.log(r));
+  return parseFloat((e / Math.pow(r, s)).toFixed(o)) + n[s];
+};
+export {
+  a as createEvent,
+  f as formatBytes,
+  u as getFileName,
+  m as getFileTypesText
+};