@fluidattacks/design 8.1.0 → 8.2.0

package/dist/components/inputs/fields/date-range/index.js

@@ -1,7 +1,139 @@
-import "react/jsx-runtime";
-import "react";
-import "../../../../vendor-i-lggy4V.mjs";
-import { a1 as m } from "../../../../components-LCJjFofC.mjs";
+import { jsxs as S, jsx as m } from "react/jsx-runtime";
+import { useRef as x, useCallback as A } from "react";
+import { useDateRangePicker as B } from "../../../../node_modules/react-aria/dist/private/datepicker/useDateRangePicker.js";
+import { useDateRangePickerState as G } from "../../../../node_modules/react-stately/dist/private/datepicker/useDateRangePickerState.js";
+import { Calendar as H } from "./calendar/index.js";
+import { DateSelectorOutline as J } from "./styles.js";
+import { OutlineContainer as K } from "../../outline-container/index.js";
+import { DateSelector as k } from "../../utils/date-selector/index.js";
+import { Dialog as L } from "../../utils/dialog/index.js";
+import { Popover as Q } from "../../utils/popover/index.js";
+import { formatDate as O } from "../../../../utils/date.js";
+import { normalizeDate as F } from "../../../../utils/normalizers.js";
+const ne = ({
+  disabled: l = !1,
+  error: i,
+  label: C,
+  name: o,
+  required: j,
+  tooltip: q,
+  onOpenCalendar: w,
+  register: s,
+  setValue: t,
+  propsMax: a,
+  propsMin: n,
+  variant: N = "default",
+  ...h
+}) => {
+  const f = `${o}Max`, c = `${o}Min`, r = x(null), v = F(n?.value), $ = F(a?.value), y = A(
+    (e) => {
+      if (e) {
+        const D = O(String(e.end)), R = O(String(e.start));
+        t && (t(a?.name ?? f, D), t(n?.name ?? c, R)), a?.onChange && a?.onChange(D), n?.onChange && n?.onChange(R);
+      }
+    },
+    [f, c, t, a, n]
+  ), u = G({
+    ...h,
+    endName: a?.name ?? f,
+    startName: n?.name ?? c,
+    onChange(e) {
+      y(e);
+    },
+    onOpenChange(e) {
+      h.onOpenChange?.(e), w?.(e);
+    },
+    ...$ && v && !t ? {
+      value: { start: v, end: $ }
+    } : a?.onChange || n?.onChange ? { value: null } : {}
+  }), { close: z } = u, {
+    groupProps: b,
+    startFieldProps: d,
+    endFieldProps: g,
+    buttonProps: P,
+    dialogProps: E,
+    calendarProps: I
+  } = B(
+    { ...h, "aria-label": C ?? o },
+    u,
+    r
+  );
+  return /* @__PURE__ */ S(
+    K,
+    {
+      error: l ? void 0 : i,
+      htmlFor: o,
+      label: C,
+      required: j,
+      tooltip: q,
+      children: [
+        /* @__PURE__ */ S(
+          J,
+          {
+            $disabled: l,
+            $show: i !== void 0,
+            ref: r,
+            style: {
+              flexDirection: N === "filters" ? "column" : "row"
+            },
+            children: [
+              /* @__PURE__ */ m(
+                k,
+                {
+                  buttonProps: P,
+                  datePickerRef: r,
+                  disabled: l,
+                  error: i,
+                  fieldProps: {
+                    ...d,
+                    "aria-label": `${d["aria-label"]} ${o}`,
+                    validate: (e) => g.value && e > g.value ? "Start date must be less than or equal to end date" : null
+                  },
+                  groupProps: b,
+                  name: n?.name ?? c,
+                  onChange: n?.onChange,
+                  register: s,
+                  setValue: t,
+                  value: n?.value
+                }
+              ),
+              /* @__PURE__ */ m(
+                k,
+                {
+                  buttonProps: P,
+                  datePickerRef: r,
+                  disabled: l,
+                  error: i,
+                  fieldProps: {
+                    ...g,
+                    "aria-label": `${g["aria-label"]} ${o}`,
+                    validate: (e) => d.value && e < d.value ? "End date must be greater than or equal to start date" : null
+                  },
+                  groupProps: b,
+                  name: a?.name ?? f,
+                  onChange: a?.onChange,
+                  register: s,
+                  setValue: t,
+                  value: a?.value
+                }
+              )
+            ]
+          }
+        ),
+        u.isOpen && !l ? /* @__PURE__ */ m(
+          Q,
+          {
+            offset: 8,
+            placement: "bottom start",
+            state: u,
+            triggerRef: r,
+            children: /* @__PURE__ */ m(L, { ...E, children: /* @__PURE__ */ m(H, { onClose: z, props: I }) })
+          }
+        ) : null
+      ]
+    }
+  );
+};
 export {
-  m as InputDateRange
+  ne as InputDateRange
 };

package/dist/components/inputs/fields/date-range/styles.js

@@ -0,0 +1,16 @@
+import { styled as e } from "styled-components";
+const o = e.div`
+  ${({ theme: r, $disabled: t, $show: a }) => `
+    border-color: ${a ? r.palette.error[500] : r.palette.gray[300]};
+    display: flex;
+    gap: ${r.spacing[0.25]};
+    width: 100%;
+
+    ~ div {
+      background: ${t ? r.palette.gray[200] : r.palette.white};
+    }
+  `}
+`;
+export {
+  o as DateSelectorOutline
+};

package/dist/components/inputs/fields/date-time/calendar/index.js

@@ -1,7 +1,51 @@
-import "react/jsx-runtime";
-import "../../../../../vendor-i-lggy4V.mjs";
-import "styled-components";
-import { c6 as a } from "../../../../../components-LCJjFofC.mjs";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { createCalendar as p } from "../../../../../node_modules/@internationalized/date/dist/private/createCalendar.js";
+import { useCalendar as s } from "../../../../../node_modules/react-aria/dist/private/calendar/useCalendar.js";
+import { useLocale as b } from "../../../../../node_modules/react-aria/dist/private/i18n/I18nProvider.js";
+import { useCalendarState as u } from "../../../../../node_modules/react-stately/dist/private/calendar/useCalendarState.js";
+import { useTheme as C } from "styled-components";
+import { TimeOutlineContainer as h, OutlineContainer as $ } from "./styles.js";
+import { TimeField as x } from "../../../utils/date-time-field/index.js";
+import { CalendarGrid as T } from "../../date/calendar/grid/index.js";
+import { Header as g } from "../../date/calendar/header/index.js";
+import { FooterContainer as v } from "../../date/calendar/styles.js";
+import { Button as B } from "../../../../button/index.js";
+import "../../../../typography/heading/index.js";
+import "../../../../typography/span/index.js";
+import { Text as j } from "../../../../typography/text/index.js";
+const A = ({
+  handleTimeChange: a,
+  onClose: i,
+  props: o,
+  timeState: m
+}) => {
+  const n = C(), { locale: l } = b(), r = u({ ...o, createCalendar: p, locale: l }), { prevButtonProps: d, nextButtonProps: c, title: f } = s(o, r);
+  return /* @__PURE__ */ t("div", { className: "calendar", children: [
+    /* @__PURE__ */ e(
+      g,
+      {
+        nextButtonProps: c,
+        prevButtonProps: d,
+        state: r,
+        title: f
+      }
+    ),
+    /* @__PURE__ */ e(T, { state: r }),
+    /* @__PURE__ */ t(h, { children: [
+      /* @__PURE__ */ e(j, { color: n.palette.gray[800], fontWeight: "bold", size: "md", children: "Time" }),
+      /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(
+        x,
+        {
+          hourCycle: 12,
+          label: "time-field",
+          onChange: a,
+          value: m.timeValue
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(B, { onClick: i, variant: "ghost", children: "Cancel" }) })
+  ] });
+};
 export {
-  a as Calendar
+  A as Calendar
 };

package/dist/components/inputs/fields/date-time/calendar/styles.js

@@ -0,0 +1,21 @@
+import { styled as i } from "styled-components";
+const e = i.div`
+  ${({ theme: n }) => `
+    align-items: center;
+    border-top: 1px solid ${n.palette.gray[200]};
+    display: flex;
+    gap: ${n.spacing[1.5]};
+    justify-content: center;
+    padding: ${n.spacing[0.5]} ${n.spacing[1.25]};
+  `}
+`, a = i.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme: n }) => n.spacing[0.5]};
+  justify-content: flex-end;
+  flex: 1 0 0;
+`;
+export {
+  a as OutlineContainer,
+  e as TimeOutlineContainer
+};

package/dist/components/inputs/fields/date-time/index.js

@@ -1,7 +1,109 @@
-import "react/jsx-runtime";
-import "../../../../vendor-i-lggy4V.mjs";
-import "react";
-import { a2 as i } from "../../../../components-LCJjFofC.mjs";
+import { jsxs as R, jsx as s } from "react/jsx-runtime";
+import { parseDateTime as S } from "../../../../node_modules/@internationalized/date/dist/private/string.js";
+import c from "../../../../_virtual/dayjs.min.js";
+import d from "../../../../_virtual/lodash.js";
+import { useRef as j, useCallback as h } from "react";
+import { useDatePicker as w } from "../../../../node_modules/react-aria/dist/private/datepicker/useDatePicker.js";
+import { useDatePickerState as I } from "../../../../node_modules/react-stately/dist/private/datepicker/useDatePickerState.js";
+import { Calendar as O } from "./calendar/index.js";
+import { OutlineContainer as V } from "../../outline-container/index.js";
+import { DateSelector as q } from "../../utils/date-selector/index.js";
+import { Dialog as A } from "../../utils/dialog/index.js";
+import { Popover as H } from "../../utils/popover/index.js";
+import { formatDateTimeInInput as D } from "../../../../utils/date.js";
+const X = (l) => {
+  const {
+    disabled: i = !1,
+    error: f,
+    required: p,
+    label: g,
+    name: t,
+    tooltip: C,
+    register: Y,
+    setValue: a,
+    watch: b
+  } = l, o = b?.(t), u = j(null), e = I({
+    ...l,
+    granularity: "minute",
+    hourCycle: 12,
+    isDisabled: i,
+    isRequired: p,
+    shouldCloseOnSelect: !1,
+    value: d.isNil(o) || d.isEmpty(o) || o === "-" || c(o, "YYYY/MM/DD hh:mm A").isValid() === !1 ? null : S(
+      c(o, "YYYY/MM/DD hh:mm A").format("YYYY-MM-DDTHH:mm:ss")
+    )
+  }), { close: P } = e, { groupProps: $, fieldProps: T, buttonProps: y, dialogProps: x, calendarProps: m } = w(l, e, u), M = h(
+    (r) => {
+      if (m.onChange && m.onChange(r), e.timeValue) {
+        const n = D(
+          r,
+          e.timeValue
+        );
+        a?.(t, n, { shouldDirty: !0 });
+      } else
+        e.setDateValue(r);
+    },
+    [m, t, a, e]
+  ), k = h(
+    (r) => {
+      if (r) {
+        e.setTimeValue(r);
+        const n = e.dateValue;
+        if (n) {
+          const v = D(n, r);
+          a?.(t, v, { shouldDirty: !0 });
+        }
+      }
+    },
+    [e, a, t]
+  );
+  return /* @__PURE__ */ R(
+    V,
+    {
+      error: i ? void 0 : f,
+      htmlFor: t,
+      label: g,
+      required: p,
+      tooltip: C,
+      children: [
+        /* @__PURE__ */ s(
+          q,
+          {
+            buttonProps: y,
+            datePickerRef: u,
+            disabled: i,
+            error: f,
+            fieldProps: T,
+            granularity: "minute",
+            groupProps: $,
+            name: t,
+            register: Y,
+            setValue: a,
+            value: o
+          }
+        ),
+        e.isOpen && !i ? /* @__PURE__ */ s(
+          H,
+          {
+            offset: 8,
+            placement: "bottom start",
+            state: e,
+            triggerRef: u,
+            children: /* @__PURE__ */ s(A, { ...x, children: /* @__PURE__ */ s(
+              O,
+              {
+                handleTimeChange: k,
+                onClose: P,
+                props: { ...m, onChange: M },
+                timeState: e
+              }
+            ) })
+          }
+        ) : null
+      ]
+    }
+  );
+};
 export {
-  i as InputDateTime
+  X as InputDateTime
 };

package/dist/components/inputs/fields/editable/index.js

@@ -1,6 +1,28 @@
-import "react/jsx-runtime";
-import "../../../../vendor-i-lggy4V.mjs";
-import { K as m } from "../../../../components-LCJjFofC.mjs";
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { l as d } from "../../../../_virtual/lodash.js";
+import { Label as f } from "../../label/index.js";
+import { Container as a } from "../../../container/index.js";
+import { Link as c } from "../../../link/index.js";
+import "../../../typography/heading/index.js";
+import "../../../typography/span/index.js";
+import { Text as x } from "../../../typography/text/index.js";
+const w = ({
+  children: m,
+  currentValue: o,
+  externalLink: s,
+  isEditing: e,
+  label: n,
+  name: p,
+  tooltip: l
+}) => {
+  if (e)
+    return /* @__PURE__ */ r("div", { children: m });
+  const t = d.isNil(o) ? "" : o, i = String(s ?? t);
+  return /* @__PURE__ */ h(a, { children: [
+    /* @__PURE__ */ r(f, { htmlFor: p, label: n, tooltip: l, weight: "bold" }),
+    i.startsWith("https://") ? /* @__PURE__ */ r(c, { href: i, children: t }) : /* @__PURE__ */ r(x, { size: "md", children: t })
+  ] });
+};
 export {
-  m as Editable
+  w as Editable
 };

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

@@ -1,6 +1,71 @@
-import "react/jsx-runtime";
-import "react";
-import { c7 as p } from "../../../../../components-LCJjFofC.mjs";
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { useCallback as c } from "react";
+import { TextInput as j } from "../../text-input/index.js";
+import { Button as k } from "../../../../button/index.js";
+import "../../../../layout/categories/buttons/index.js";
+import { Col as d } from "../../../../layout/categories/column/index.js";
+import { Row as w } from "../../../../layout/categories/row/index.js";
+const E = ({
+  addText: l,
+  append: i,
+  disabled: s = !1,
+  fields: a,
+  fieldState: r,
+  initValue: t = "",
+  index: m = 0,
+  required: e,
+  label: h,
+  max: p = 100,
+  name: v,
+  onBlur: g,
+  onChange: u,
+  placeholder: x,
+  tooltip: y,
+  remove: n,
+  value: A
+}) => {
+  const I = c(() => {
+    i?.(t);
+  }, [i, t]), C = c(
+    (T) => () => {
+      n?.(T);
+    },
+    [n]
+  );
+  return /* @__PURE__ */ f(w, { align: "start", children: [
+    /* @__PURE__ */ o(d, { lg: 75, md: 75, sm: 75, children: /* @__PURE__ */ o(
+      j,
+      {
+        disabled: s,
+        error: r ? r.error?.message : void 0,
+        id: "array",
+        indexArray: m,
+        isTouched: r ? r.isTouched : void 0,
+        isValid: r ? !r.invalid : void 0,
+        label: h,
+        name: v,
+        onBlur: g,
+        onChange: u,
+        placeholder: x,
+        removeItemArray: C,
+        required: e,
+        tooltip: y,
+        value: A
+      }
+    ) }),
+    m < p - 1 && m + 1 === a?.length ? /* @__PURE__ */ o(d, { lg: 25, md: 25, sm: 25, children: /* @__PURE__ */ o(
+      k,
+      {
+        disabled: s,
+        icon: "plus",
+        onClick: I,
+        variant: "ghost",
+        width: "max-content",
+        children: l ?? "Add"
+      }
+    ) }) : void 0
+  ] });
+};
 export {
-  p as ArrayField
+  E as ArrayField
 };

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

@@ -1,7 +1,67 @@
-import "react/jsx-runtime";
-import "react";
-import "../../../../vendor-i-lggy4V.mjs";
-import { $ as i } from "../../../../components-LCJjFofC.mjs";
+import { jsx as o } from "react/jsx-runtime";
+import { Fragment as I } from "react";
+import { Controller as f } from "../../../../node_modules/react-hook-form/dist/index.esm.js";
+import { ArrayField as C } from "./field/index.js";
+const E = ({
+  addText: a,
+  append: F,
+  control: t,
+  disabled: u,
+  fields: m,
+  initValue: p = "",
+  required: v,
+  label: y,
+  max: e = void 0,
+  name: g = "array-field",
+  onChange: j,
+  placeholder: A,
+  remove: $,
+  tooltip: B
+}) => t && m ? /* @__PURE__ */ o(I, { children: m.map((c, n) => /* @__PURE__ */ o(
+  f,
+  {
+    control: t,
+    name: `${g}.${n}`,
+    render: ({ field: r, fieldState: h }) => /* @__PURE__ */ o(
+      C,
+      {
+        addText: a,
+        append: F,
+        disabled: u,
+        fieldState: h,
+        fields: m,
+        index: n,
+        initValue: p,
+        label: y,
+        max: e,
+        name: r.name,
+        onBlur: r.onBlur,
+        onChange: j ?? r.onChange,
+        placeholder: A,
+        remove: $,
+        required: v,
+        tooltip: B,
+        value: typeof r.value == "object" ? r.value.value : r.value
+      }
+    ),
+    index: n
+  },
+  c.id
+)) }) : /* @__PURE__ */ o(
+  C,
+  {
+    addText: a,
+    disabled: u,
+    initValue: p,
+    label: y,
+    max: e,
+    name: g,
+    onChange: j,
+    placeholder: A,
+    required: v,
+    tooltip: B
+  }
+);
 export {
-  i as InputArray
+  E as InputArray
 };

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

@@ -1,6 +1,67 @@
-import "react/jsx-runtime";
-import "../../../../../vendor-i-lggy4V.mjs";
-import { c8 as e } from "../../../../../components-LCJjFofC.mjs";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { l as c } from "../../../../../_virtual/lodash.js";
+import { StyledInputText as m } from "../styles.js";
+import { Button as x } from "../../../../button/index.js";
+import { Container as s } from "../../../../container/index.js";
+import { Icon as p } from "../../../../icon/index.js";
+import { IconButton as d } from "../../../../icon-button/index.js";
+import { StyledTextInputContainer as f } from "../../../styles.js";
+const $ = ({
+  disabled: o = !1,
+  handleButtonClick: a,
+  errorMsg: n,
+  fileName: e,
+  handleRemoveFile: l,
+  theme: i
+}) => /* @__PURE__ */ t(
+  f,
+  {
+    className: `${o ? "disabled" : ""} ${n ? "error" : ""}`,
+    children: [
+      /* @__PURE__ */ r(m, { $size: "md", children: e }),
+      /* @__PURE__ */ t(s, { alignItems: "center", display: "flex", gap: 0.625, children: [
+        c.isEmpty(e) || o ? void 0 : /* @__PURE__ */ r(
+          d,
+          {
+            color: i.palette.gray[400],
+            height: "20px",
+            icon: "xmark",
+            iconSize: "64px",
+            iconType: "fa-light",
+            onClick: l,
+            variant: "ghost",
+            width: "20px"
+          }
+        ),
+        n && /* @__PURE__ */ r(
+          p,
+          {
+            icon: "exclamation-circle",
+            iconClass: "error-icon",
+            iconColor: i.palette.error[500],
+            iconSize: "lg"
+          }
+        ),
+        /* @__PURE__ */ t(
+          x,
+          {
+            border: o ? `1px solid ${i.palette.gray[300]} !important` : "",
+            borderRadius: "0px 8px 8px 0px !important",
+            disabled: o,
+            height: "40px",
+            onClick: a,
+            variant: "primary",
+            width: "96px",
+            children: [
+              /* @__PURE__ */ r(p, { icon: "search", iconSize: "xl", mr: 0.5 }),
+              "Add file"
+            ]
+          }
+        )
+      ] })
+    ]
+  }
+);
 export {
-  e as DefaultInputFile
+  $ as DefaultInputFile
 };