@prokodo/ui 0.0.43 → 0.0.45

package/dist/components/base-link/BaseLink.view.js

@@ -15,16 +15,26 @@ function BaseLinkView({
   let finalHref = href ?? "#";
   let kind = "local";
   if (href) {
-    if (href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//")) {
+    const hasProtocol = href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//");
+    const isLocalPath = href.startsWith("/") || href.startsWith("#") || href.startsWith("?");
+    const appProto = /^\w+:/.test(href);
+    if (hasProtocol || appProto) {
       kind = "url";
+    } else if (isLocalPath) {
+      kind = "local";
     } else if (emailRE.test(href)) {
       kind = "email";
-      finalHref = `mailto:${href.toLowerCase()}`;
+      finalHref = `mailto:${href}`;
     } else {
-      const digits = href.replace(/[^\d]/g, "");
-      if (digits.length >= 6) {
-        kind = "tel";
-        finalHref = `tel:${digits.startsWith("00") ? `+${digits.slice(2)}` : digits.startsWith("0") ? `+${digits.slice(1)}` : `+${digits}`}`;
+      const phoneLikeRE = /^\+?\d[\d\s().-]*$/;
+      if (phoneLikeRE.test(href)) {
+        const digits = href.replace(/[^\d]/g, "");
+        if (digits.length >= 6) {
+          kind = "tel";
+          finalHref = `tel:+${digits}`;
+        }
+      } else {
+        kind = "local";
       }
     }
   }

package/dist/components/dynamic-list/DynamicList.client.js

@@ -2,7 +2,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
-import { memo, useState, useEffect, useCallback } from "react";
+import { memo, useState, useEffect, useCallback, useMemo } from "react";
 import { isString } from "../../helpers/validations.js";
 import { DynamicListView } from "./DynamicList.view.js";
 function DynamicListClient({
@@ -38,11 +38,32 @@ function DynamicListClient({
     },
     [items, onChange, isSingle]
   );
+  const handleSelectChange = useCallback(
+    (idx, fieldName, v) => {
+      const nextValue = Array.isArray(v) ? String(v[0] ?? "") : v === null ? "" : String(v);
+      const next = items.map((it, i) => {
+        if (i !== idx) return it;
+        if (isSingle) {
+          return nextValue === "" ? "" : nextValue;
+        }
+        const obj = { ...it };
+        if (nextValue === "") {
+          delete obj[fieldName];
+        } else {
+          obj[fieldName] = nextValue;
+        }
+        return obj;
+      });
+      setItems(next);
+      onChange == null ? void 0 : onChange(next);
+    },
+    [items, onChange, isSingle]
+  );
   const handleAdd = useCallback(
     (e) => {
       var _a;
       const empty = isSingle ? "" : fields.reduce((obj, f) => {
-        obj[f.name] = "";
+        obj[(f == null ? void 0 : f.name) ?? ""] = "";
         return obj;
       }, {});
       const next = [...items, empty];
@@ -64,11 +85,40 @@ function DynamicListClient({
     },
     [items, onChange, buttonDeleteProps]
   );
+  const formatedFields = useMemo(
+    () => (fields ?? []).map((f) => {
+      if (f.fieldType === "select") {
+        const { ...rest2 } = f;
+        const onChange2 = /* @__PURE__ */ __name((e, v) => {
+          var _a, _b;
+          const idx = Number(
+            (_b = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.dataset) == null ? void 0 : _b.index
+          );
+          if (!Number.isNaN(idx)) {
+            handleSelectChange(idx, rest2.name ?? "", v);
+          }
+        }, "onChange2");
+        return {
+          fieldType: "select",
+          ...rest2,
+          onChange: onChange2
+        };
+      }
+      const { ...rest } = f;
+      return {
+        fieldType: "input",
+        ...rest,
+        onChange: handleChange
+        // matches InputChangeEventHandler
+      };
+    }),
+    [fields, handleChange, handleSelectChange]
+  );
   return /* @__PURE__ */ jsx(
     DynamicListView,
     {
       ...props,
-      fields,
+      fields: formatedFields,
       value: items,
       buttonAddProps: {
         ...buttonAddProps,
@@ -77,9 +127,6 @@ function DynamicListClient({
       buttonDeleteProps: {
         ...buttonDeleteProps,
         onClick: handleDelete
-      },
-      fieldProps: {
-        onChange: handleChange
       }
     }
   );

package/dist/components/dynamic-list/DynamicList.view.js

@@ -5,6 +5,7 @@ import { create } from "../../helpers/bem.js";
 import { isString } from "../../helpers/validations.js";
 import styles from "./DynamicList.module.scss.js";
 import { Input } from "../input/Input.js";
+import { Select } from "../select/Select.js";
 import { Button } from "../button/Button.js";
 import { Label } from "../label/Label.js";
 const bem = create(styles, "DynamicList");
@@ -18,7 +19,6 @@ function DynamicListView({
   classNameList,
   fields,
   value = [],
-  fieldProps,
   buttonAddProps,
   buttonDeleteProps,
   name = "items",
@@ -57,23 +57,44 @@ function DynamicListView({
             "aria-describedby": errorId ?? helperId,
             className: bem("list", mod, classNameList),
             children: [
-              /* @__PURE__ */ jsx("li", { className: bem("list__item"), children: fields.map((field) => /* @__PURE__ */ jsx(
-                Input,
-                {
-                  fullWidth: true,
-                  ...field,
-                  ...fieldProps,
-                  className: bem("field", mod, field == null ? void 0 : field.className),
-                  "data-field": field == null ? void 0 : field.name,
-                  "data-index": idx,
-                  disabled: disabled ?? (fieldProps == null ? void 0 : fieldProps.disabled) ?? (field == null ? void 0 : field.disabled),
-                  id: `${name}-${idx}-${field.name}`,
-                  required: required ?? (fieldProps == null ? void 0 : fieldProps.required) ?? (field == null ? void 0 : field.required),
-                  value: single ? item : item[field.name],
-                  name: single ? `${name}[${idx}]` : `${name}[${idx}].${field.name}`
-                },
-                field.name
-              )) }),
+              /* @__PURE__ */ jsx("li", { className: bem("list__item"), children: fields.map(({ fieldType, ...field }) => {
+                switch (fieldType) {
+                  case "select":
+                    return /* @__PURE__ */ jsx(
+                      Select,
+                      {
+                        fullWidth: true,
+                        ...field,
+                        className: bem("field", mod, field == null ? void 0 : field.className),
+                        "data-field": field == null ? void 0 : field.name,
+                        "data-index": idx,
+                        disabled: disabled ?? (field == null ? void 0 : field.disabled),
+                        id: `${name}-${idx}-${field.name}`,
+                        name: single ? `${name}[${idx}]` : `${name}[${idx}].${field.name}`,
+                        required: required ?? (field == null ? void 0 : field.required),
+                        value: single ? item : item[(field == null ? void 0 : field.name) ?? ""]
+                      },
+                      field.name
+                    );
+                  default:
+                    return /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        fullWidth: true,
+                        ...field,
+                        className: bem("field", mod, field == null ? void 0 : field.className),
+                        "data-field": field == null ? void 0 : field.name,
+                        "data-index": idx,
+                        disabled: disabled ?? (field == null ? void 0 : field.disabled),
+                        id: `${name}-${idx}-${field.name}`,
+                        required: required ?? (field == null ? void 0 : field.required),
+                        value: single ? item : item[(field == null ? void 0 : field.name) ?? ""],
+                        name: single ? `${name}[${idx}]` : `${name}[${idx}].${field.name}`
+                      },
+                      field.name
+                    );
+                }
+              }) }),
               /* @__PURE__ */ jsx(
                 Button,
                 {

package/dist/components/form/FormField.server.js

@@ -4,11 +4,11 @@ import { jsx } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
 import styles from "./FormField.module.scss.js";
 import { DatePicker } from "../datePicker/DatePicker.js";
-import { Select } from "../select/Select.js";
 import { Slider } from "../slider/Slider.js";
 import { Switch } from "../switch/Switch.js";
 import { GridRow } from "../grid/GridRow.js";
 import { Input } from "../input/Input.js";
+import { Select } from "../select/Select.js";
 const bem = create(styles, "FormField");
 function FormFieldServer({
   fieldType,

package/dist/components/input/Input.view.js

@@ -32,8 +32,9 @@ function InputView({
   type = "text",
   ...rest
 }) {
-  delete rest.onValidate;
-  delete rest.errorTranslations;
+  rest == null ? true : delete rest.onValidate;
+  rest == null ? true : delete rest.errorTranslations;
+  rest == null ? true : delete rest.customRegexPattern;
   const isError = typeof errorText === "string";
   const hasValue = value !== void 0 && value !== "" || Boolean(placeholder);
   const hasHelperText = isString(helperText);

package/dist/components/select/Select.client.js

@@ -8,6 +8,7 @@ function isMulti(v) {
   return Array.isArray(v);
 }
 __name(isMulti, "isMulti");
+const toDatasetKey = /* @__PURE__ */ __name((k) => k.replace(/-([a-z])/g, (_, c) => c.toUpperCase()), "toDatasetKey");
 function mergeValue(oldVal, newVal, multiple = false) {
   return multiple ? (() => {
     const s = new Set(isMulti(oldVal) ? oldVal : []);
@@ -63,10 +64,18 @@ function SelectClient({
       setOpen(true);
     }
   }, "handleKey");
+  const dataset = (() => {
+    const d = {};
+    for (const [k, v] of Object.entries(rest)) {
+      if (k.startsWith("data-")) d[toDatasetKey(k.slice(5))] = v;
+    }
+    return d;
+  })();
   const clickOption = /* @__PURE__ */ __name((opt) => {
     const newVal = opt === null ? Boolean(multiple) ? [] : "" : mergeValue(val, opt, multiple);
+    const syntheticEvt = { target: { dataset } };
     setVal(newVal);
-    onChange == null ? void 0 : onChange(null, newVal);
+    onChange == null ? void 0 : onChange(syntheticEvt, newVal);
     if (!Boolean(multiple)) close();
   }, "clickOption");
   return /* @__PURE__ */ jsx(

package/dist/components/select/Select.module.scss.js

@@ -3,6 +3,7 @@ const gradientMove = "gradientMove";
 const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Select": "prokodo-Select",
+  "prokodo-Select--fullWidth": "prokodo-Select--fullWidth",
   "prokodo-Select__label": "prokodo-Select__label",
   "prokodo-Select__field": "prokodo-Select__field",
   "prokodo-Select__field--expanded": "prokodo-Select__field--expanded",

package/dist/components/select/Select.view.js

@@ -11,6 +11,7 @@ function SelectView({
   disabled,
   name = id,
   label,
+  fullWidth = false,
   hideLabel,
   iconVisible,
   placeholder = "-- Please choose --",
@@ -47,7 +48,9 @@ function SelectView({
       idx < selectedItems.length - 1 && ", "
     ] }, i == null ? void 0 : i.label);
   }) });
-  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, void 0, className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, {
+    fullWidth: Boolean(fullWidth)
+  }, className), children: [
     !Boolean(hideLabel) && /* @__PURE__ */ jsx(
       Label,
       {

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "0.0.43";
+const PROKODO_UI_VERSION = "0.0.45";
 export {
   PROKODO_UI_VERSION
 };