@makeswift/runtime 0.13.0 → 0.14.0

package/dist/cjs/components/builtin/Form/Form.js

@@ -0,0 +1,402 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Form_exports = {};
+__export(Form_exports, {
+  default: () => Form_default
+});
+module.exports = __toCommonJS(Form_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_formik = require("formik");
+var import_Check12 = require("../../icons/Check12");
+var import_Input = require("./components/Field/components/Input");
+var import_FormContext = require("./context/FormContext");
+var import_Placeholder = __toESM(require("./components/Placeholder"));
+var import_Field = __toESM(require("./components/Field"));
+var import_Spinner = __toESM(require("./components/Spinner"));
+var import_Button = __toESM(require("../Button"));
+var import_Link = require("../../shared/Link");
+var import_box_model = require("../../../box-model");
+var import_useTableFormFieldRefs = require("../../hooks/useTableFormFieldRefs");
+var import_react2 = require("../../../api/react");
+var import_css = require("@emotion/css");
+var import_responsive_style = require("../../utils/responsive-style");
+var import_use_style = require("../../../runtimes/react/use-style");
+var import_makeswift_api = require("../../../runtimes/react/hooks/makeswift-api");
+const LOCAL_STORAGE_NAMESPACE = "@@makeswift/components/form";
+function getSizeFontSize(size) {
+  switch (size) {
+    case import_FormContext.Sizes.SMALL:
+      return 12;
+    case import_FormContext.Sizes.MEDIUM:
+      return 14;
+    case import_FormContext.Sizes.LARGE:
+      return 18;
+    default:
+      throw new Error(`Invalid form size "${size}"`);
+  }
+}
+const GridForm = (0, import_react.forwardRef)(function GridFrom({ className, size, ...restOfProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "form",
+    {
+      ...restOfProps,
+      ref,
+      className: (0, import_css.cx)(
+        (0, import_use_style.useStyle)({ display: "flex", flexWrap: "wrap", width: "100%" }),
+        (0, import_use_style.useStyle)(
+          (0, import_responsive_style.useResponsiveStyle)([size], ([size2 = import_FormContext.Sizes.MEDIUM]) => ({
+            fontSize: getSizeFontSize(size2)
+          }))
+        ),
+        className
+      )
+    }
+  );
+});
+const GridItem = (0, import_react.forwardRef)(function GridItem2({ className, grid, index, rowGap, columnGap, ...restOfProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...restOfProps,
+      ref,
+      className: (0, import_css.cx)(
+        (0, import_use_style.useStyle)({ alignSelf: "flex-end", flexDirection: "column" }),
+        (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveGridItem)({ grid, index, rowGap, columnGap })),
+        className
+      )
+    }
+  );
+});
+function getAlignmentMargin(alignment) {
+  switch (alignment) {
+    case import_FormContext.Alignments.LEFT:
+      return "0 auto 0 0";
+    case import_FormContext.Alignments.RIGHT:
+      return "0 0 0 auto";
+    default:
+      return "0 auto";
+  }
+}
+function StyledButton({ className, size, alignment, ...restOfProps }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Button.default,
+    {
+      ...restOfProps,
+      as: "button",
+      className: (0, import_css.cx)(
+        (0, import_use_style.useStyle)({ display: "flex", alignItems: "center", justifyContent: "center" }),
+        (0, import_use_style.useStyle)(
+          (0, import_responsive_style.useResponsiveStyle)(
+            [size, alignment],
+            ([size2 = import_FormContext.Sizes.MEDIUM, alignment2 = import_FormContext.Alignments.CENTER]) => ({
+              minHeight: (0, import_Input.getSizeHeight)(size2),
+              maxHeight: (0, import_Input.getSizeHeight)(size2),
+              margin: getAlignmentMargin(alignment2),
+              paddingTop: 0,
+              paddingBottom: 0
+            })
+          )
+        ),
+        className
+      )
+    }
+  );
+}
+function ErrorContainer({ className, ...restOfProps }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...restOfProps,
+      className: (0, import_css.cx)(
+        (0, import_use_style.useStyle)({
+          padding: "8px 16px",
+          backgroundColor: "#f19eb9",
+          borderRadius: 4,
+          marginTop: 16
+        }),
+        className
+      )
+    }
+  );
+}
+function IconContainer({ className, ...restOfProps }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...restOfProps, className: (0, import_css.cx)((0, import_use_style.useStyle)({ fill: "currentColor" }), className) });
+}
+function ErrorMessage({ className, ...restOfProps }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "p",
+    {
+      ...restOfProps,
+      className: (0, import_css.cx)(
+        (0, import_use_style.useStyle)({ fontSize: 12, margin: "8px 0", color: "rgba(127, 0, 0, 0.95)" }),
+        className
+      )
+    }
+  );
+}
+function getTableColumnDefaultValue(tableColumn) {
+  switch (tableColumn.__typename) {
+    case "CheckboxTableColumn":
+      return false;
+    case "MultipleSelectTableColumn":
+      return [];
+    case "SingleLineTextTableColumn":
+    case "LongTextTableColumn":
+    case "SingleSelectTableColumn":
+    case "PhoneNumberTableColumn":
+    case "EmailTableColumn":
+    case "URLTableColumn":
+    case "NumberTableColumn":
+    default:
+      return "";
+  }
+}
+const Form = (0, import_react.forwardRef)(function Form2({
+  id,
+  tableId,
+  fields: fieldsProp,
+  submitLabel = "Submit",
+  submitLink,
+  shape,
+  size,
+  contrast,
+  brandColor,
+  gap,
+  width,
+  margin,
+  submitTextStyle,
+  submitVariant,
+  submitTextColor,
+  submitWidth,
+  submitAlignment,
+  labelTextStyle,
+  labelTextColor
+}, ref) {
+  const fields = (0, import_react.useMemo)(() => fieldsProp?.fields ?? [], [fieldsProp]);
+  const grid = (0, import_react.useMemo)(() => fieldsProp?.grid ?? [], [fieldsProp]);
+  const table = (0, import_makeswift_api.useTable)(tableId ?? null);
+  const client = (0, import_react2.useMakeswiftClient)();
+  const [refEl, setRefEl] = (0, import_react.useState)(null);
+  const [propControllers, setPropControllers] = (0, import_react.useState)(null);
+  const [initialValues, setInitialValues] = (0, import_react.useState)(
+    () => fields.reduce((acc, formField) => {
+      const tableColumn = table && table.columns.find((field) => field.id === formField.tableColumnId);
+      const defaultValue = formField ? formField.defaultValue : null;
+      if (tableColumn) {
+        acc[tableColumn.name] = defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue;
+      }
+      return acc;
+    }, {})
+  );
+  const controller = propControllers?.fields;
+  const { container, items } = (0, import_useTableFormFieldRefs.useTableFormFieldRefs)(controller, { fieldsCount: fields.length });
+  const [isDone, setIsDone] = (0, import_react.useState)(false);
+  const linkRef = (0, import_react.useRef)(null);
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      getDomNode() {
+        return refEl instanceof Element ? refEl : null;
+      },
+      getBoxModel() {
+        return refEl instanceof Element ? (0, import_box_model.getBox)(refEl) : null;
+      },
+      setPropControllers
+    }),
+    [refEl, setPropControllers]
+  );
+  (0, import_react.useEffect)(() => {
+    container(refEl);
+  }, [container, refEl]);
+  (0, import_react.useEffect)(() => {
+    if (!isDone)
+      return;
+    let timeoutId = setTimeout(() => setIsDone(false), 2500);
+    return () => clearTimeout(timeoutId);
+  }, [isDone]);
+  function getTableColumn({ tableColumnId }) {
+    return table && table.columns.find((field) => tableColumnId === field.id);
+  }
+  async function handleSubmit(values, { setSubmitting, resetForm, setStatus }) {
+    if (table) {
+      const columns = [];
+      fields.forEach((field) => {
+        const tableColumn = getTableColumn(field);
+        if (tableColumn) {
+          const data = values[tableColumn.name];
+          if (data) {
+            columns.push({ columnId: field.tableColumnId, data });
+            if (field.autofill) {
+              localStorage.setItem(
+                `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,
+                JSON.stringify(data)
+              );
+            }
+          }
+        }
+      });
+      try {
+        await client.createTableRecord(table.id, columns);
+        setIsDone(true);
+        setInitialValues(
+          (prev) => fields.reduce(
+            (acc, field) => {
+              const tableColumn = getTableColumn(field);
+              if (tableColumn) {
+                const data = values[tableColumn.name];
+                if (data && field.autofill)
+                  return { ...acc, [tableColumn.name]: data };
+              }
+              return acc;
+            },
+            { ...prev }
+          )
+        );
+        resetForm();
+        if (linkRef.current != null)
+          linkRef.current.click();
+      } catch (error) {
+        setStatus({ error: "An unexpected error has occurred, please try again later" });
+      } finally {
+        setSubmitting(false);
+      }
+    }
+  }
+  (0, import_react.useEffect)(() => {
+    setInitialValues(
+      (prev) => fields.reduce(
+        (acc, formField) => {
+          const tableColumn = table && table.columns.find((field) => field.id === formField.tableColumnId);
+          if (tableColumn && formField.autofill) {
+            const storedValue = localStorage.getItem(
+              `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`
+            );
+            if (storedValue) {
+              try {
+                acc[tableColumn.name] = JSON.parse(storedValue);
+              } catch (e) {
+              }
+            }
+          }
+          return acc;
+        },
+        { ...prev }
+      )
+    );
+  }, [fields, table]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_FormContext.Provider,
+    {
+      value: { shape, size, contrast, brandColor, labelTextStyle, labelTextColor },
+      children: tableId == null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Placeholder.default, { ref: setRefEl, width, margin }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_formik.Formik,
+        {
+          onSubmit: handleSubmit,
+          initialValues,
+          initialStatus: { error: null },
+          enableReinitialize: true,
+          children: (formik) => {
+            const error = formik.status && formik.status.error;
+            const errors = fields.map((field) => {
+              const tableColumn = getTableColumn(field);
+              return tableColumn && (0, import_formik.getIn)(formik.touched, tableColumn.name) && (0, import_formik.getIn)(formik.errors, tableColumn.name);
+            }).filter((message) => typeof message === "string");
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                GridForm,
+                {
+                  ref: setRefEl,
+                  id,
+                  className: (0, import_css.cx)(width, margin),
+                  size,
+                  onSubmit: formik.handleSubmit,
+                  onReset: formik.handleReset,
+                  noValidate: true,
+                  children: [
+                    fields.map((field, index) => {
+                      const tableColumn = getTableColumn(field);
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        GridItem,
+                        {
+                          ref: items[index],
+                          grid,
+                          index,
+                          rowGap: gap,
+                          columnGap: gap,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Field.default, { tableColumn, tableFormField: field })
+                        },
+                        field.id
+                      );
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      GridItem,
+                      {
+                        ref: items[fields.length],
+                        grid,
+                        index: fields.length,
+                        rowGap: gap,
+                        columnGap: gap,
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            StyledButton,
+                            {
+                              type: "submit",
+                              disabled: formik.isSubmitting || isDone,
+                              shape,
+                              size,
+                              color: brandColor,
+                              variant: submitVariant,
+                              textColor: submitTextColor,
+                              width: submitWidth,
+                              alignment: submitAlignment,
+                              textStyle: submitTextStyle,
+                              children: formik.isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Spinner.default, {}) : isDone ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Check12.Check12, {}) }) : submitLabel
+                            }
+                          ),
+                          (errors.length > 0 || error) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ErrorContainer, { children: [
+                            errors.map((message) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorMessage, { children: message }, message)),
+                            error != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorMessage, { children: error })
+                          ] })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              submitLink != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Link.Link, { ref: linkRef, hidden: true, link: submitLink })
+            ] });
+          }
+        }
+      ) })
+    }
+  );
+});
+var Form_default = Form;
+//# sourceMappingURL=Form.js.map

package/dist/cjs/components/builtin/Form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Form/Form.tsx"],"sourcesContent":["import {\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n  forwardRef,\n  ComponentPropsWithoutRef,\n  Ref,\n  useImperativeHandle,\n  ForwardedRef,\n} from 'react'\nimport { Formik, getIn } from 'formik'\n\nimport { Check12 } from '../../icons/Check12'\n\nimport { getSizeHeight as getInputSizeHeight } from './components/Field/components/Input'\n\nimport {\n  Size,\n  Sizes,\n  Provider as FormContextProvider,\n  Shape,\n  Contrast,\n  Alignment,\n  Alignments,\n} from './context/FormContext'\nimport Placeholder from './components/Placeholder'\nimport Field from './components/Field'\nimport Spinner from './components/Spinner'\nimport Button from '../Button'\nimport type { TableColumn } from './types'\nimport {\n  ElementIDValue,\n  GapYValue,\n  LinkValue,\n  ResponsiveIconRadioGroupValue,\n  ResponsiveLengthValue,\n  ResponsiveSelectValue,\n  ResponsiveValue,\n  TableFormFieldsDescriptor,\n  TableFormFieldsValue,\n  TableValue,\n  TextInputValue,\n  TextStyleValue,\n} from '../../../prop-controllers/descriptors'\nimport { Link } from '../../shared/Link'\nimport { BoxModelHandle, getBox } from '../../../box-model'\nimport { PropControllersHandle } from '../../../state/modules/prop-controller-handles'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { useTableFormFieldRefs } from '../../hooks/useTableFormFieldRefs'\nimport { useMakeswiftClient } from '../../../api/react'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { cx } from '@emotion/css'\nimport { useResponsiveGridItem, useResponsiveStyle } from '../../utils/responsive-style'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useTable } from '../../../runtimes/react/hooks/makeswift-api'\n\nconst LOCAL_STORAGE_NAMESPACE = '@@makeswift/components/form'\n\nfunction getSizeFontSize(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 12\n\n    case Sizes.MEDIUM:\n      return 14\n\n    case Sizes.LARGE:\n      return 18\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\ntype Props = {\n  id?: ElementIDValue\n  tableId?: TableValue\n  fields?: TableFormFieldsValue\n  submitLink?: LinkValue\n  gap?: GapYValue\n  shape?: ResponsiveIconRadioGroupValue<Shape>\n  size?: ResponsiveIconRadioGroupValue<Size>\n  contrast?: ResponsiveIconRadioGroupValue<Contrast>\n  labelTextStyle?: TextStyleValue\n  labelTextColor?: ResponsiveColor | null\n  submitTextStyle?: TextStyleValue\n  brandColor?: ResponsiveColor | null\n  submitTextColor?: ResponsiveColor | null\n  submitLabel?: TextInputValue\n  submitVariant?: ResponsiveSelectValue<\n    'flat' | 'outline' | 'shadow' | 'clear' | 'blocky' | 'bubbly' | 'skewed'\n  >\n  submitWidth?: ResponsiveLengthValue\n  submitAlignment?: ResponsiveIconRadioGroupValue<Alignment>\n  width?: string\n  margin?: string\n}\n\ntype GridFormBaseProps = { size?: Props['size'] }\n\ntype GridFormProps = GridFormBaseProps &\n  Omit<ComponentPropsWithoutRef<'form'>, keyof GridFormBaseProps>\n\nconst GridForm = forwardRef(function GridFrom(\n  { className, size, ...restOfProps }: GridFormProps,\n  ref: ForwardedRef<HTMLFormElement>,\n) {\n  return (\n    <form\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            fontSize: getSizeFontSize(size),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n})\n\ntype GridItemBaseProps = {\n  grid: ResponsiveValue<{ spans: number[][]; count: number }>\n  index: number\n  rowGap: Props['gap']\n  columnGap: Props['gap']\n}\n\ntype GridItemProps = GridItemBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof GridItemBaseProps>\n\nconst GridItem = forwardRef(function GridItem(\n  { className, grid, index, rowGap, columnGap, ...restOfProps }: GridItemProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ alignSelf: 'flex-end', flexDirection: 'column' }),\n        useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),\n        className,\n      )}\n    />\n  )\n})\n\nfunction getAlignmentMargin(alignment: Alignment): string {\n  switch (alignment) {\n    case Alignments.LEFT:\n      return '0 auto 0 0'\n    case Alignments.RIGHT:\n      return '0 0 0 auto'\n    default:\n      return '0 auto'\n  }\n}\n\ntype StyledButtonBaseProps = { size?: Props['size']; alignment?: Props['submitAlignment'] }\n\ntype StyledButtonProps = StyledButtonBaseProps &\n  Omit<ComponentPropsWithoutRef<typeof Button>, keyof StyledButtonBaseProps>\n\nfunction StyledButton({ className, size, alignment, ...restOfProps }: StyledButtonProps) {\n  return (\n    <Button\n      {...restOfProps}\n      as=\"button\"\n      className={cx(\n        useStyle({ display: 'flex', alignItems: 'center', justifyContent: 'center' }),\n        useStyle(\n          useResponsiveStyle(\n            [size, alignment] as const,\n            ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => ({\n              minHeight: getInputSizeHeight(size),\n              maxHeight: getInputSizeHeight(size),\n              margin: getAlignmentMargin(alignment),\n              paddingTop: 0,\n              paddingBottom: 0,\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\nfunction ErrorContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          padding: '8px 16px',\n          backgroundColor: '#f19eb9',\n          borderRadius: 4,\n          marginTop: 16,\n        }),\n        className,\n      )}\n    />\n  )\n}\n\nfunction IconContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n  return <div {...restOfProps} className={cx(useStyle({ fill: 'currentColor' }), className)} />\n}\n\nfunction ErrorMessage({ className, ...restOfProps }: ComponentPropsWithoutRef<'p'>) {\n  return (\n    <p\n      {...restOfProps}\n      className={cx(\n        useStyle({ fontSize: 12, margin: '8px 0', color: 'rgba(127, 0, 0, 0.95)' }),\n        className,\n      )}\n    />\n  )\n}\n\nfunction getTableColumnDefaultValue(tableColumn: TableColumn) {\n  switch (tableColumn.__typename) {\n    case 'CheckboxTableColumn':\n      return false\n\n    case 'MultipleSelectTableColumn':\n      return []\n\n    case 'SingleLineTextTableColumn':\n    case 'LongTextTableColumn':\n    case 'SingleSelectTableColumn':\n    case 'PhoneNumberTableColumn':\n    case 'EmailTableColumn':\n    case 'URLTableColumn':\n    case 'NumberTableColumn':\n    default:\n      return ''\n  }\n}\n\ntype Column = { columnId: string; data: Record<string, any> }\ntype Fields = Record<string, string | string[] | boolean>\n\ntype Descriptors = { fields?: TableFormFieldsDescriptor }\n\nconst Form = forwardRef(function Form(\n  {\n    id,\n    tableId,\n    fields: fieldsProp,\n    submitLabel = 'Submit',\n    submitLink,\n    shape,\n    size,\n    contrast,\n    brandColor,\n    gap,\n    width,\n    margin,\n    submitTextStyle,\n    submitVariant,\n    submitTextColor,\n    submitWidth,\n    submitAlignment,\n    labelTextStyle,\n    labelTextColor,\n  }: Props,\n  ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n  const fields = useMemo(() => fieldsProp?.fields ?? [], [fieldsProp])\n  const grid = useMemo(() => fieldsProp?.grid ?? [], [fieldsProp])\n  const table = useTable(tableId ?? null)\n  const client = useMakeswiftClient()\n  const [refEl, setRefEl] = useState<HTMLElement | null>(null)\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const [initialValues, setInitialValues] = useState<Fields>(() =>\n    fields.reduce((acc, formField) => {\n      const tableColumn = table && table.columns.find(field => field.id === formField.tableColumnId)\n      const defaultValue = formField ? formField.defaultValue : null\n\n      if (tableColumn) {\n        acc[tableColumn.name] =\n          defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue\n      }\n\n      return acc\n    }, {} as Fields),\n  )\n  const controller = propControllers?.fields\n  const { container, items } = useTableFormFieldRefs(controller, { fieldsCount: fields.length })\n  const [isDone, setIsDone] = useState(false)\n  const linkRef = useRef<HTMLAnchorElement>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return refEl instanceof Element ? refEl : null\n      },\n      getBoxModel() {\n        return refEl instanceof Element ? getBox(refEl) : null\n      },\n      setPropControllers,\n    }),\n    [refEl, setPropControllers],\n  )\n\n  useEffect(() => {\n    container(refEl)\n  }, [container, refEl])\n\n  useEffect(() => {\n    if (!isDone) return\n\n    let timeoutId = setTimeout(() => setIsDone(false), 2500)\n\n    return () => clearTimeout(timeoutId)\n  }, [isDone])\n\n  function getTableColumn({ tableColumnId }: any) {\n    return table && table.columns.find(field => tableColumnId === field.id)\n  }\n\n  async function handleSubmit(values: any, { setSubmitting, resetForm, setStatus }: any) {\n    if (table) {\n      const columns: Column[] = []\n\n      fields.forEach(field => {\n        const tableColumn = getTableColumn(field)\n\n        if (tableColumn) {\n          const data = values[tableColumn.name]\n\n          if (data) {\n            columns.push({ columnId: field.tableColumnId, data })\n\n            if (field.autofill) {\n              localStorage.setItem(\n                `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n                JSON.stringify(data),\n              )\n            }\n          }\n        }\n      })\n\n      try {\n        await client.createTableRecord(table.id, columns)\n        setIsDone(true)\n        setInitialValues(prev =>\n          fields.reduce(\n            (acc, field) => {\n              const tableColumn = getTableColumn(field)\n\n              if (tableColumn) {\n                const data = values[tableColumn.name]\n\n                if (data && field.autofill) return { ...acc, [tableColumn.name]: data }\n              }\n\n              return acc\n            },\n            { ...prev },\n          ),\n        )\n        resetForm()\n\n        if (linkRef.current != null) linkRef.current.click()\n      } catch (error) {\n        setStatus({ error: 'An unexpected error has occurred, please try again later' })\n      } finally {\n        setSubmitting(false)\n      }\n    }\n  }\n\n  useEffect(() => {\n    setInitialValues(prev =>\n      fields.reduce(\n        (acc, formField) => {\n          const tableColumn =\n            table && table.columns.find(field => field.id === formField.tableColumnId)\n\n          if (tableColumn && formField.autofill) {\n            const storedValue = localStorage.getItem(\n              `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n            )\n\n            if (storedValue) {\n              try {\n                acc[tableColumn.name] = JSON.parse(storedValue)\n              } catch (e) {\n                // Ignore\n              }\n            }\n          }\n\n          return acc\n        },\n        { ...prev },\n      ),\n    )\n  }, [fields, table])\n\n  return (\n    <FormContextProvider\n      value={{ shape, size, contrast, brandColor, labelTextStyle, labelTextColor }}\n    >\n      {tableId == null ? (\n        <Placeholder ref={setRefEl} width={width} margin={margin} />\n      ) : (\n        <>\n          <Formik\n            onSubmit={handleSubmit}\n            initialValues={initialValues}\n            initialStatus={{ error: null }}\n            enableReinitialize\n          >\n            {formik => {\n              const error = formik.status && formik.status.error\n              const errors = fields\n                .map(field => {\n                  const tableColumn = getTableColumn(field)\n\n                  return (\n                    tableColumn &&\n                    getIn(formik.touched, tableColumn.name) &&\n                    getIn(formik.errors, tableColumn.name)\n                  )\n                })\n                .filter(message => typeof message === 'string')\n\n              return (\n                <>\n                  <GridForm\n                    ref={setRefEl}\n                    id={id}\n                    className={cx(width, margin)}\n                    size={size}\n                    onSubmit={formik.handleSubmit}\n                    onReset={formik.handleReset}\n                    noValidate\n                  >\n                    {fields.map((field, index) => {\n                      const tableColumn = getTableColumn(field)\n\n                      return (\n                        <GridItem\n                          key={field.id}\n                          ref={items[index]}\n                          grid={grid}\n                          index={index}\n                          rowGap={gap}\n                          columnGap={gap}\n                        >\n                          <Field tableColumn={tableColumn} tableFormField={field} />\n                        </GridItem>\n                      )\n                    })}\n                    <GridItem\n                      ref={items[fields.length]}\n                      grid={grid}\n                      index={fields.length}\n                      rowGap={gap}\n                      columnGap={gap}\n                    >\n                      <StyledButton\n                        type=\"submit\"\n                        // @ts-ignore: `disabled` is in `'button'` but not in `T`.\n                        disabled={formik.isSubmitting || isDone}\n                        shape={shape}\n                        size={size}\n                        color={brandColor}\n                        variant={submitVariant}\n                        textColor={submitTextColor}\n                        width={submitWidth}\n                        alignment={submitAlignment}\n                        textStyle={submitTextStyle}\n                      >\n                        {formik.isSubmitting ? (\n                          <Spinner />\n                        ) : isDone ? (\n                          <IconContainer>\n                            <Check12 />\n                          </IconContainer>\n                        ) : (\n                          submitLabel\n                        )}\n                      </StyledButton>\n                      {(errors.length > 0 || error) && (\n                        <ErrorContainer>\n                          {errors.map(message => (\n                            <ErrorMessage key={message}>{message}</ErrorMessage>\n                          ))}\n                          {error != null && <ErrorMessage>{error}</ErrorMessage>}\n                        </ErrorContainer>\n                      )}\n                    </GridItem>\n                  </GridForm>\n                  {submitLink != null && <Link ref={linkRef} hidden link={submitLink} />}\n                </>\n              )\n            }}\n          </Formik>\n        </>\n      )}\n    </FormContextProvider>\n  )\n})\n\nexport default Form\n"],"mappings":"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","names":["import_react","size","GridItem","Button","alignment","getInputSizeHeight","Form","FormContextProvider","Placeholder","Field","Spinner"]}

package/dist/cjs/components/builtin/Form/components/Field/components/Checkbox/index.js

@@ -0,0 +1,181 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Checkbox_exports = {};
+__export(Checkbox_exports, {
+  default: () => Checkbox_default
+});
+module.exports = __toCommonJS(Checkbox_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_color = __toESM(require("color"));
+var import_Label = require("../Label");
+var import_FormContext = require("../../../../context/FormContext");
+var import_responsiveField = require("../../services/responsiveField");
+var import_colorToString = require("../../../../../../utils/colorToString");
+var import_use_style = require("../../../../../../../runtimes/react/use-style");
+var import_css = require("@emotion/css");
+var import_responsive_style = require("../../../../../../utils/responsive-style");
+function getCheckmarkColor({
+  swatch: { hue: h, saturation: s, lightness: l },
+  alpha: a
+}) {
+  return (0, import_color.default)({ h, s, l }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
+}
+const FAKE_CHECKBOX_CLASS_NAME = "fake-checkbox";
+function FakeCheckbox({ className, style, contrast, error }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style,
+      className: (0, import_css.cx)(
+        FAKE_CHECKBOX_CLASS_NAME,
+        (0, import_use_style.useStyle)({
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          borderStyle: "solid",
+          borderRadius: 4,
+          pointerEvents: "none",
+          borderWidth: 1
+        }),
+        (0, import_use_style.useStyle)(
+          (0, import_responsive_style.useResponsiveStyle)([contrast], ([contrast2 = import_FormContext.Contrasts.LIGHT]) => ({
+            borderColor: (0, import_responsiveField.getContrastBorderColor)(contrast2, error),
+            backgroundColor: (0, import_responsiveField.getContrastBackgroundColor)(contrast2)
+          }))
+        ),
+        className
+      )
+    }
+  );
+}
+const HiddenCheckbox = (0, import_react.forwardRef)(function HiddenCheckbox2({ size, brandColor, contrast, error, className, ...restOfProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "input",
+    {
+      ...restOfProps,
+      ref,
+      className: (0, import_css.cx)(
+        (0, import_use_style.useStyle)({
+          position: "absolute",
+          opacity: 0,
+          width: "100%",
+          height: "100%",
+          cursor: "pointer",
+          "&:disabled": {
+            cursor: "no-drop",
+            [`& ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {
+              opacity: 0.5
+            }
+          },
+          [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {
+            ...(0, import_responsive_style.useResponsiveStyle)(
+              [brandColor],
+              ([{ swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {}]) => ({
+                backgroundColor: (0, import_colorToString.colorToString)({ swatch, alpha })
+              })
+            ),
+            borderColor: "transparent",
+            "&::after": {
+              content: '""',
+              position: "absolute",
+              boxSizing: "content-box",
+              width: "25%",
+              height: "50%",
+              borderStyle: "solid",
+              ...(0, import_responsive_style.useResponsiveStyle)(
+                [size, brandColor],
+                ([
+                  size2 = import_FormContext.Sizes.MEDIUM,
+                  { swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {}
+                ]) => ({
+                  borderWidth: (0, import_Label.getSizeHeight)(size2) * 0.1,
+                  borderLeft: 0,
+                  borderTop: 0,
+                  borderColor: getCheckmarkColor({ swatch, alpha })
+                })
+              ),
+              transform: "rotate(45deg) translate3d(91%, -23%, 0)"
+            }
+          },
+          "&:not(:disabled)": {
+            [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)(
+              [brandColor],
+              ([brandColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({
+                borderColor: (0, import_colorToString.colorToString)(brandColor2)
+              })
+            )
+          },
+          "&:not(:disabled):checked": {
+            [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: (0, import_responsive_style.useResponsiveStyle)(
+              [contrast],
+              ([contrast2 = import_FormContext.Contrasts.LIGHT]) => ({
+                borderColor: (0, import_responsiveField.getContrastBorderColor)(contrast2, error)
+              })
+            )
+          }
+        }),
+        className
+      )
+    }
+  );
+});
+var Checkbox_default = (0, import_react.forwardRef)(function Checkbox({ error, className, style, form, ...restOfProps }, ref) {
+  const { size, contrast, brandColor } = (0, import_FormContext.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_css.cx)(
+        (0, import_use_style.useStyle)({ position: "relative" }),
+        (0, import_use_style.useStyle)(
+          (0, import_responsive_style.useResponsiveStyle)([size], ([size2 = import_FormContext.Sizes.MEDIUM]) => ({
+            height: (0, import_Label.getSizeHeight)(size2),
+            width: (0, import_Label.getSizeHeight)(size2)
+          }))
+        )
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          HiddenCheckbox,
+          {
+            ...restOfProps,
+            type: "checkbox",
+            ref,
+            error,
+            size,
+            contrast,
+            brandColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FakeCheckbox, { className, error, contrast, style })
+      ]
+    }
+  );
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/builtin/Form/components/Field/components/Checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/Checkbox/index.tsx"],"sourcesContent":["import { forwardRef, CSSProperties, ComponentPropsWithoutRef, ForwardedRef } from 'react'\nimport Color from 'color'\n\nimport { getSizeHeight as getSize } from '../Label'\nimport {\n  useFormContext,\n  Value as FormContextValue,\n  Sizes,\n  Contrasts,\n} from '../../../../context/FormContext'\nimport { getContrastBorderColor, getContrastBackgroundColor } from '../../services/responsiveField'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { SwatchValue } from '../../../../../../utils/types'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../../../../../utils/responsive-style'\n\nfunction getCheckmarkColor({\n  swatch: { hue: h, saturation: s, lightness: l },\n  alpha: a,\n}: {\n  swatch: SwatchValue\n  alpha: number\n}) {\n  return Color({ h, s, l }).alpha(a).isLight() ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.95)'\n}\n\ntype FakeCheckboxProps = {\n  className?: string\n  style?: CSSProperties\n  contrast?: FormContextValue['contrast']\n  error?: boolean\n}\n\nconst FAKE_CHECKBOX_CLASS_NAME = 'fake-checkbox'\n\nfunction FakeCheckbox({ className, style, contrast, error }: FakeCheckboxProps) {\n  return (\n    <div\n      style={style}\n      className={cx(\n        FAKE_CHECKBOX_CLASS_NAME,\n        useStyle({\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          borderStyle: 'solid',\n          borderRadius: 4,\n          pointerEvents: 'none',\n          borderWidth: 1,\n        }),\n        useStyle(\n          useResponsiveStyle([contrast] as const, ([contrast = Contrasts.LIGHT]) => ({\n            borderColor: getContrastBorderColor(contrast, error),\n            backgroundColor: getContrastBackgroundColor(contrast),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype HiddenCheckboxBaseProps = Partial<\n  Pick<FormContextValue, 'size' | 'brandColor' | 'contrast'>\n> & {\n  error?: boolean\n}\n\ntype HiddenCheckboxProps = HiddenCheckboxBaseProps &\n  Omit<ComponentPropsWithoutRef<'input'>, keyof HiddenCheckboxBaseProps>\n\nconst HiddenCheckbox = forwardRef(function HiddenCheckbox(\n  { size, brandColor, contrast, error, className, ...restOfProps }: HiddenCheckboxProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  return (\n    <input\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'absolute',\n          opacity: 0,\n          width: '100%',\n          height: '100%',\n          cursor: 'pointer',\n\n          '&:disabled': {\n            cursor: 'no-drop',\n\n            [`& ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {\n              opacity: 0.5,\n            },\n          },\n\n          [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {\n            ...useResponsiveStyle(\n              [brandColor] as const,\n              ([{ swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {}]) => ({\n                backgroundColor: colorToString({ swatch, alpha }),\n              }),\n            ),\n            borderColor: 'transparent',\n\n            '&::after': {\n              content: '\"\"',\n              position: 'absolute',\n              boxSizing: 'content-box',\n              width: '25%',\n              height: '50%',\n              borderStyle: 'solid',\n              ...useResponsiveStyle(\n                [size, brandColor] as const,\n                ([\n                  size = Sizes.MEDIUM,\n                  { swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {},\n                ]) => ({\n                  borderWidth: getSize(size) * 0.1,\n                  borderLeft: 0,\n                  borderTop: 0,\n                  borderColor: getCheckmarkColor({ swatch, alpha }),\n                }),\n              ),\n              transform: 'rotate(45deg) translate3d(91%, -23%, 0)',\n            },\n          },\n\n          '&:not(:disabled)': {\n            [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: useResponsiveStyle(\n              [brandColor] as const,\n              ([brandColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n                borderColor: colorToString(brandColor),\n              }),\n            ),\n          },\n\n          '&:not(:disabled):checked': {\n            [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: useResponsiveStyle(\n              [contrast] as const,\n              ([contrast = Contrasts.LIGHT]) => ({\n                borderColor: getContrastBorderColor(contrast, error),\n              }),\n            ),\n          },\n        }),\n        className,\n      )}\n    />\n  )\n})\n\ntype BaseProps = {\n  error?: boolean\n  className?: string\n  style?: CSSProperties\n  form?: unknown\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<typeof HiddenCheckbox>, keyof BaseProps>\n\nexport default forwardRef<HTMLInputElement, Props>(function Checkbox(\n  { error, className, style, form, ...restOfProps }: Props,\n  ref,\n) {\n  const { size, contrast, brandColor } = useFormContext()\n\n  return (\n    <div\n      className={cx(\n        useStyle({ position: 'relative' }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            height: getSize(size),\n            width: getSize(size),\n          })),\n        ),\n      )}\n    >\n      <HiddenCheckbox\n        {...restOfProps}\n        type=\"checkbox\"\n        ref={ref}\n        error={error}\n        size={size}\n        contrast={contrast}\n        brandColor={brandColor}\n      />\n      <FakeCheckbox className={className} error={error} contrast={contrast} style={style} />\n    </div>\n  )\n})\n"],"mappings":"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","names":["Color","contrast","HiddenCheckbox","size","getSize","brandColor"]}