@alphakits/ui 2.3.0 → 2.4.0

package/dist/form/templates/rest-form/form.d.ts

@@ -1,6 +1,5 @@
-import { default as React } from 'react';
 import { FormikProps, FormikValues } from 'formik';
 import { Props } from '.';
 type FormProps<T extends FormikValues> = Props<T> & FormikProps<T>;
-export declare function Form<T extends FormikValues>({ recordId, title, subtitle, headerBottomAddons, initialValues, submitButtonText, customFooter, loading, updating, removing, customValidationFields, validate, save, remove, close, back, t, children, headerAddon, error, softError, ...formProps }: FormProps<T>): React.JSX.Element;
+export declare function Form<T extends FormikValues>({ recordId, title, subtitle, headerBottomAddons, initialValues, submitButtonText, customFooter, loading, updating, removing, customValidationFields, validate, save, remove, close, back, t, children, headerAddon, error, softError, ...formProps }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/form/templates/rest-form/form.js

@@ -1,57 +1,52 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import A, { useContext as V, useState as D, useCallback as v, useEffect as H } from "react";
-import q from "@alphakits/icons/dist/TrashM";
-import { Button as C } from "../../../button/component.js";
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import A from "@alphakits/icons/dist/TrashM";
+import V, { useContext as D, useState as H, useCallback as v, useEffect as q } from "react";
+import { Button as k } from "../../../button/component.js";
 import { Flex as G } from "../../../flex/component.js";
 import { FlexColumns as J } from "../../../flex-columns/component.js";
 import { IconButton as K } from "../../../icon-button/component.js";
 import { ModalContext as L } from "../../../modal/context.js";
 import { Sidepanel as N } from "../../../sidepanel/component.js";
-import { ToastPlate as k } from "../../../toast-plate/component.js";
+import { ToastPlate as x } from "../../../toast-plate/component.js";
 function ie({
-  recordId: x,
-  title: y,
-  subtitle: F,
-  headerBottomAddons: f,
-  initialValues: I,
-  submitButtonText: T,
-  customFooter: w,
-  loading: r,
+  recordId: F,
+  title: I,
+  subtitle: T,
+  headerBottomAddons: u,
+  initialValues: w,
+  submitButtonText: y,
+  customFooter: M,
+  loading: i,
   updating: n,
   removing: s,
   customValidationFields: O,
   validate: Q,
   save: U,
-  remove: u,
-  close: M,
-  back: R,
-  t: i,
-  children: S,
+  remove: a,
+  close: R,
+  back: S,
+  t: r,
+  children: B,
   headerAddon: b,
   error: W,
   softError: d,
-  ...B
+  ...z
 }) {
-  const { setModalDirty: a, currentModalId: z } = V(L), [e] = D(z), {
-    submitCount: l,
-    handleSubmit: P,
-    isValid: m,
-    ...o
-  } = B, h = !!x && !!u, p = v(
+  const { setModalDirty: e, currentModalId: P } = D(L), [o] = H(P), { submitCount: l, handleSubmit: h, isValid: m, ...c } = z, p = !!F && !!a, C = v(
     () => {
-      a(e, !1), P();
+      e(o, !1), h();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [o.dirty, e]
+    [o, e, h]
   ), g = v(() => {
-    a(e, !1), confirm(i("common:deleteConfirm")) && u?.();
-  }, [o.dirty, e]);
-  H(() => {
-    r || a(e, o.dirty);
-  }, [o.dirty, r, e]);
-  const j = h || b ? /* @__PURE__ */ c(A.Fragment, { children: [
+    e(o, !1), confirm(r("common:deleteConfirm")) && a?.();
+  }, [o, r, e, a]);
+  q(() => {
+    i || e(o, c.dirty);
+  }, [c.dirty, i, o, e]);
+  const j = p || b ? /* @__PURE__ */ f(V.Fragment, { children: [
     b,
-    h && /* @__PURE__ */ t(
+    p && /* @__PURE__ */ t(
       K,
       {
         dataTestId: "removeTariffBtn",
@@ -59,7 +54,7 @@ function ie({
         disabled: n,
         loading: s,
         onClick: g,
-        icon: q
+        icon: A
       }
     )
   ] }) : null;
@@ -67,48 +62,48 @@ function ie({
     N,
     {
       headerRightAddons: j,
-      title: y,
-      subtitle: F,
-      loading: n || s || r,
-      headerBottomAddons: (f || !!d || !m && !!l) && /* @__PURE__ */ c(J, { columns: 1, gr: 8, children: [
-        f,
-        !!d && /* @__PURE__ */ t(k, { view: "negative", children: d }),
-        !m && !!l && /* @__PURE__ */ t(k, { view: "negative", children: "Please correct errors before submitting form." })
+      title: I,
+      subtitle: T,
+      loading: n || s || i,
+      headerBottomAddons: (u || !!d || !m && !!l) && /* @__PURE__ */ f(J, { columns: 1, gr: 8, children: [
+        u,
+        !!d && /* @__PURE__ */ t(x, { view: "negative", children: d }),
+        !m && !!l && /* @__PURE__ */ t(x, { view: "negative", children: "Please correct errors before submitting form." })
       ] }),
-      back: R,
-      t: i,
-      bottomAddons: w || /* @__PURE__ */ c(G, { gap: "md", children: [
+      back: S,
+      t: r,
+      bottomAddons: M || /* @__PURE__ */ f(G, { gap: "md", children: [
         /* @__PURE__ */ t(
-          C,
+          k,
           {
             view: "primary",
             size: "s",
             block: !0,
-            loading: r,
+            loading: i,
             disabled: n || s,
             dataTestId: "buttonSave",
-            onClick: () => p(),
-            children: i(T || "save")
+            onClick: () => C(),
+            children: r(y || "save")
           }
         ),
         /* @__PURE__ */ t(
-          C,
+          k,
           {
             block: !0,
             view: "secondary",
             size: "s",
             dataTestId: "buttonCancel",
-            onClick: M,
-            children: i("cancel")
+            onClick: R,
+            children: r("cancel")
           }
         )
       ] }),
-      children: S({
+      children: B({
         submitCount: l,
         isValid: m,
-        handleSubmit: p,
-        initialValues: I,
-        ...o
+        handleSubmit: C,
+        initialValues: w,
+        ...c
       })
     }
   );

package/dist/form/templates/rest-form/index.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
 import { FormikErrors, FormikProps, FormikValues } from 'formik';
+import { default as React } from 'react';
 import { TFunction } from '../../../modal';
 export type Props<T extends FormikValues> = {
     recordId?: number;
@@ -9,7 +9,7 @@ export type Props<T extends FormikValues> = {
     enableReinitialize?: boolean;
     headerBottomAddons?: React.ReactNode;
     initialValues: T;
-    validate?: (values: T) => void | Record<string, unknown> | Promise<FormikErrors<T>>;
+    validate?: (values: T) => undefined | Record<string, unknown> | Promise<FormikErrors<T>>;
     customValidationFields?: Array<keyof T>;
     save: (values: any) => any;
     back?: () => void;
@@ -25,4 +25,4 @@ export type Props<T extends FormikValues> = {
     t: TFunction;
     headerAddon?: React.ReactNode;
 };
-export declare function RestForm<T extends FormikValues>({ enableReinitialize, ...props }: Props<T>): React.JSX.Element;
+export declare function RestForm<T extends FormikValues>({ enableReinitialize, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;

package/dist/form/templates/rest-form/index.js

@@ -1,41 +1,30 @@
 import { jsx as o } from "react/jsx-runtime";
 import { Formik as v } from "formik";
 import { Form as V } from "./form.js";
-function g({ enableReinitialize: a = !0, ...t }) {
-  const {
-    loading: d,
-    error: u,
-    validate: l,
-    customValidationFields: s,
-    initialValues: c,
-    save: m
-  } = t;
+function b({
+  enableReinitialize: a = !0,
+  ...e
+}) {
+  const { loading: d, error: u, validate: l, customValidationFields: m, initialValues: s, save: f } = e;
   if (u) return /* @__PURE__ */ o("div", { children: "Error " });
-  const f = (r) => (e) => r.reduce((i, n) => ((typeof e == "object" ? e : {})[n] || (i[n] = t.t("validationErrors:Required")), i), {});
+  const c = (r) => (t) => r.reduce(
+    (i, n) => ((typeof t == "object" ? t : {})[n] || (i[n] = e.t("validationErrors:Required")), i),
+    {}
+  );
   return /* @__PURE__ */ o(
     v,
     {
-      validate: ((r, e) => {
+      validate: ((r, t) => {
         if (r) return r;
-        if (e) return f(e);
-      })(l, s),
-      initialValues: c,
+        if (t) return c(t);
+      })(l, m),
+      initialValues: s,
       enableReinitialize: a,
-      onSubmit: m,
-      children: (r) => (process.env.REACT_APP_STAGE !== "prod" && console.debug({
-        values: r.values,
-        errors: r.errors
-      }), /* @__PURE__ */ o(
-        V,
-        {
-          loading: d,
-          ...r,
-          ...t
-        }
-      ))
+      onSubmit: f,
+      children: (r) => (process.env.REACT_APP_STAGE, /* @__PURE__ */ o(V, { loading: d, ...r, ...e }))
     }
   );
 }
 export {
-  g as RestForm
+  b as RestForm
 };

package/dist/form/utils/get-default-values.js

@@ -1,9 +1,6 @@
-function c(t, u) {
-  return Object.entries(u).reduce((n, [e, r]) => ({
-    [e]: t[e] || r,
-    ...n
-  }), {});
+function f(r, u) {
+  return Object.entries(u).reduce((e, [t, n]) => (e[t] = r[t] || n, e), {});
 }
 export {
-  c as getDefaultValues
+  f as getDefaultValues
 };

package/dist/form/utils/remove-undefined-from-object.js

@@ -1,7 +1,5 @@
 function t(e) {
-  return Object.fromEntries(
-    Object.entries(e).filter(([, r]) => r !== void 0)
-  );
+  return Object.fromEntries(Object.entries(e).filter(([, r]) => r !== void 0));
 }
 export {
   t as removeUndefinedFromObject

package/dist/form-control/component.js

@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import k from "react";
 import e from "classnames";
+import k from "react";
 import s from "./index.module.css.js";
 const M = k.forwardRef(
   ({

package/dist/formik/index.d.ts

@@ -1,2 +1,2 @@
-export { Formik, Form, Field, FieldArray, FastField, ErrorMessage, useFormik, useFormikContext, useField, connect, withFormik, } from 'formik';
-export type { FormikProps, FormikValues, FormikErrors, FormikTouched, FieldProps, FieldArrayRenderProps, FormikConfig, } from 'formik';
+export type { FieldArrayRenderProps, FieldProps, FormikConfig, FormikErrors, FormikProps, FormikTouched, FormikValues, } from 'formik';
+export { connect, ErrorMessage, FastField, Field, FieldArray, Form, Formik, useField, useFormik, useFormikContext, withFormik, } from 'formik';

package/dist/header-search/component.js

@@ -3,12 +3,7 @@ import a from "@alphakits/icons/dist/CloseS";
 import p from "@alphakits/icons/dist/SearchM";
 import { Button as l } from "../button/component.js";
 import o from "./index.module.css.js";
-const g = ({
-  value: e,
-  placeholder: r,
-  onChange: n,
-  onClear: m
-}) => /* @__PURE__ */ i("div", { className: o.input, children: [
+const g = ({ value: e, placeholder: r, onChange: n, onClear: m }) => /* @__PURE__ */ i("div", { className: o.input, children: [
   /* @__PURE__ */ t(p, {}),
   /* @__PURE__ */ t(
     "input",

package/dist/hooks/index.d.ts

@@ -1,5 +1,5 @@
+export * from './use-crud-form-requests';
+export * from './use-get-one';
 export * from './useClickOutside';
 export * from './useFocus';
 export * from './usePrevious';
-export * from './use-crud-form-requests';
-export * from './use-get-one';

package/dist/hooks/index.js

@@ -1,12 +1,12 @@
-import { useClickOutside as r } from "./useClickOutside/index.js";
-import { useFocus as u } from "./useFocus/index.js";
-import { usePrevious as m } from "./usePrevious/index.js";
-import { useCrudFormRequests as p } from "./use-crud-form-requests/index.js";
-import { useGetOne as i } from "./use-get-one/index.js";
+import { useCrudFormRequests as r } from "./use-crud-form-requests/index.js";
+import { useGetOne as u } from "./use-get-one/index.js";
+import { useClickOutside as m } from "./useClickOutside/index.js";
+import { useFocus as p } from "./useFocus/index.js";
+import { usePrevious as i } from "./usePrevious/index.js";
 export {
-  r as useClickOutside,
-  p as useCrudFormRequests,
-  u as useFocus,
-  i as useGetOne,
-  m as usePrevious
+  m as useClickOutside,
+  r as useCrudFormRequests,
+  p as useFocus,
+  u as useGetOne,
+  i as usePrevious
 };

package/dist/hooks/use-get-one/index.js

@@ -1,24 +1,24 @@
-import { useState as t, useEffect as i } from "react";
-import { getServiceError as m } from "../../utils/get-service-error/index.js";
-const p = (e, c) => {
-  const [a, o] = t(!!e), [l, u] = t({}), [f, s] = t(null), n = async () => {
-    o(!0), s(null);
+import { useState as o, useCallback as g, useEffect as m } from "react";
+import { getServiceError as i } from "../../utils/get-service-error/index.js";
+const p = (e, s) => {
+  const [n, a] = o(!!e), [l, u] = o({}), [f, c] = o(null), r = g(async () => {
+    a(!0), c(null);
     try {
-      const { data: r } = await c(e);
-      u(r);
-    } catch (r) {
-      s(m(r).message);
+      const { data: t } = await s(e);
+      u(t);
+    } catch (t) {
+      c(i(t).message);
     } finally {
-      o(!1);
+      a(!1);
     }
-  };
-  return i(() => {
-    e && n();
-  }, []), {
+  }, [e, s]);
+  return m(() => {
+    e && r();
+  }, [r, e]), {
     record: l,
-    loading: a,
+    loading: n,
     error: f,
-    request: n
+    request: r
   };
 };
 export {

package/dist/icon-button/component.d.ts

@@ -1,4 +1,4 @@
-import { default as React, ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react';
 export type IconButtonProps = {
     icon: any;
     view?: 'secondary' | 'ghost';
@@ -7,11 +7,11 @@ export type IconButtonProps = {
     dataTestId?: string;
     loading?: boolean;
 } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size'>;
-export declare const IconButton: React.ForwardRefExoticComponent<{
+export declare const IconButton: import('react').ForwardRefExoticComponent<{
     icon: any;
     view?: "secondary" | "ghost" | undefined;
     size?: "s" | "m" | "l" | undefined;
     className?: string | undefined;
     dataTestId?: string | undefined;
     loading?: boolean | undefined;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & React.RefAttributes<HTMLButtonElement>>;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/icon-button/component.js

@@ -1,16 +1,10 @@
 import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
 import t from "classnames";
+import { forwardRef as l } from "react";
 import { Button as f } from "../button/component.js";
 import o from "./index.module.css.js";
 const b = l(
-  ({
-    className: i,
-    icon: n,
-    view: e = "ghost",
-    size: m = "s",
-    ...r
-  }, a) => {
+  ({ className: i, icon: n, view: e = "ghost", size: m = "s", ...r }, a) => {
     const { disabled: c, loading: d } = r;
     return /* @__PURE__ */ s(
       f,

package/dist/image/component.js

@@ -1,49 +1,71 @@
-import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
 import o from "classnames";
 import { Skeleton as x } from "../skeleton/component.js";
 import { Typography as y } from "../typography/component.js";
-import { useImageRenderComponent as b } from "./use-image-render-component.js";
 import e from "./index.module.css.js";
+import { useImageRenderComponent as b } from "./use-image-render-component.js";
 const k = ({
-  className: m,
-  src: t,
+  className: t,
+  src: m,
   alt: a,
   hint: c,
-  addon: l,
+  addon: r,
   border: d,
-  size: r = "m",
+  size: l = "m",
   color: p,
   children: h,
   loading: f,
-  view: s = "default",
-  text: N,
-  icon: g,
-  bgColor: u = "secondary"
+  view: n = "default",
+  text: u,
+  icon: N,
+  bgColor: g = "secondary"
 }) => {
   const v = b({
-    size: r,
-    src: t,
+    size: l,
+    src: m,
     color: p,
     alt: a,
-    text: N,
-    icon: g
+    text: u,
+    icon: N
   });
-  return /* @__PURE__ */ n("div", { className: o(e.container, m, e[r]), children: [
-    /* @__PURE__ */ i("div", { className: o(e.component, e[s], e[u], { [e.border]: d }), children: /* @__PURE__ */ n(x, { className: e[r], visible: f, children: [
-      s === "ellipse" && /* @__PURE__ */ i("svg", { className: e.defs, children: /* @__PURE__ */ i("defs", { children: /* @__PURE__ */ i("clipPath", { id: "squircle", clipPathUnits: "objectBoundingBox", children: /* @__PURE__ */ i("path", { d: "M .5 0 C .1 0 0 .1 0 .5 0 .9 .1 1 .5 1 .9 1 1 .9 1 .5 1 .1 .9 0 .5 0 Z", fill: "#f00" }) }) }) }),
-      v,
-      h,
-      !!c && /* @__PURE__ */ i("div", { className: e.hint, children: /* @__PURE__ */ i(
-        y.Text,
-        {
-          className: e.hint_text,
-          view: "caps",
-          weight: "medium",
-          children: c
-        }
-      ) })
-    ] }) }),
-    l && /* @__PURE__ */ i("div", { className: o(e[`addon-${l.color}`], e.addon, { [e.filled]: l.filled }), children: l.icon })
+  return /* @__PURE__ */ s("div", { className: o(e.container, t, e[l]), children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        className: o(e.component, e[n], e[g], {
+          [e.border]: d
+        }),
+        children: /* @__PURE__ */ s(x, { className: e[l], visible: f, children: [
+          n === "ellipse" && /* @__PURE__ */ i("svg", { className: e.defs, "aria-hidden": "true", children: /* @__PURE__ */ i("defs", { children: /* @__PURE__ */ i("clipPath", { id: "squircle", clipPathUnits: "objectBoundingBox", children: /* @__PURE__ */ i(
+            "path",
+            {
+              d: "M .5 0 C .1 0 0 .1 0 .5 0 .9 .1 1 .5 1 .9 1 1 .9 1 .5 1 .1 .9 0 .5 0 Z",
+              fill: "#f00"
+            }
+          ) }) }) }),
+          v,
+          h,
+          !!c && /* @__PURE__ */ i("div", { className: e.hint, children: /* @__PURE__ */ i(
+            y.Text,
+            {
+              className: e.hint_text,
+              view: "caps",
+              weight: "medium",
+              children: c
+            }
+          ) })
+        ] })
+      }
+    ),
+    r && /* @__PURE__ */ i(
+      "div",
+      {
+        className: o(e[`addon-${r.color}`], e.addon, {
+          [e.filled]: r.filled
+        }),
+        children: r.icon
+      }
+    )
   ] });
 };
 export {

package/dist/image/image-base.js

@@ -1,13 +1,7 @@
 import { jsx as p } from "react/jsx-runtime";
 import a from "react";
 import { useImageRenderComponent as c } from "./use-image-render-component.js";
-const u = ({
-  src: r,
-  alt: o,
-  size: m = "m",
-  text: n,
-  icon: t
-}) => {
+const u = ({ src: r, alt: o, size: m = "m", text: n, icon: t }) => {
   const e = c({
     size: m,
     src: r,

package/dist/image/use-image-render-component.d.ts

@@ -8,4 +8,4 @@ export type UseImageRenderComponent = {
     icon?: React.ReactNode;
     color?: ImageProps['color'];
 };
-export declare const useImageRenderComponent: ({ src, size, color, alt, text, icon, }: UseImageRenderComponent) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element;
+export declare const useImageRenderComponent: ({ src, size, color, alt, text, icon, }: UseImageRenderComponent) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;

package/dist/image/use-image-render-component.js

@@ -1,13 +1,13 @@
 import { jsx as r } from "react/jsx-runtime";
-import u, { useRef as g, useEffect as x } from "react";
-import w from "@alphakits/icons/dist/PhotoM";
-import h from "@alphakits/icons/dist/PhotoS";
-import S from "classnames";
+import u from "@alphakits/icons/dist/PhotoM";
+import g from "@alphakits/icons/dist/PhotoS";
+import x from "classnames";
+import w, { useRef as h, useEffect as S } from "react";
 import { Spinner as b } from "../spinner/component.js";
 import { Typography as f } from "../typography/component.js";
+import n from "./index.module.css.js";
 import { textSizes as v } from "./types.js";
 import { getCharsFromText as T } from "./utils.js";
-import n from "./index.module.css.js";
 const y = {
   xs: "300x300",
   s: "300x300",
@@ -16,10 +16,7 @@ const y = {
   xl: "300x300",
   xxl: "640x640",
   auto: "640x640"
-}, C = ({
-  src: t,
-  size: e
-}) => {
+}, C = ({ src: t, size: e }) => {
   if (t?.includes("escapenavigator-images.s3") && e) {
     const s = t.split("amazonaws.com/")[1];
     return `https://d2z3luly8bezbw.cloudfront.net/fit-in/${y[e]}/${s}`;
@@ -33,8 +30,8 @@ const y = {
   text: c,
   icon: l
 }) => {
-  const [m, i] = u.useState("loading"), p = g(0), o = C({ src: t, size: e });
-  return x(() => {
+  const [m, i] = w.useState("loading"), p = h(0), o = C({ src: t, size: e });
+  return S(() => {
     if (!o) {
       i("error");
       return;
@@ -48,10 +45,10 @@ const y = {
         a.src = o;
       }, 500) : i("error");
     };
-  }, [o, e]), l || (m === "loading" ? /* @__PURE__ */ r(b, { className: n.spinner, size: "s", view: "dark" }) : m === "error" && c ? /* @__PURE__ */ r(
+  }, [o]), l || (m === "loading" ? /* @__PURE__ */ r(b, { className: n.spinner, size: "s", view: "dark" }) : m === "error" && c ? /* @__PURE__ */ r(
     f.Text,
     {
-      className: S(n.textContent, n[v[e]]),
+      className: x(n.textContent, n[v[e]]),
       view: "caps",
       color: s,
       weight: "bold",
@@ -65,7 +62,7 @@ const y = {
       view: "caps",
       color: s,
       weight: "bold",
-      children: e === "xs" ? /* @__PURE__ */ r(h, {}) : /* @__PURE__ */ r(w, {})
+      children: e === "xs" ? /* @__PURE__ */ r(g, {}) : /* @__PURE__ */ r(u, {})
     }
   ) : /* @__PURE__ */ r("img", { className: n.image, src: o, alt: d }));
 };