@multiplatform.one/forms 7.66.0 → 7.68.0

package/dist/cjs/fields/Select/shouldInlineChoices.cjs

@@ -23,7 +23,9 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var shouldInlineChoices_exports = {};
 __export(shouldInlineChoices_exports, {
   INLINE_CHOICES_MAX: () => INLINE_CHOICES_MAX,
-  shouldInlineChoices: () => shouldInlineChoices
+  opensBesideTrigger: () => opensBesideTrigger,
+  shouldInlineChoices: () => shouldInlineChoices,
+  shouldPushChoices: () => shouldPushChoices
 });
 module.exports = __toCommonJS(shouldInlineChoices_exports);
 const INLINE_CHOICES_MAX = 5;
@@ -34,4 +36,15 @@ function shouldInlineChoices({
 }) {
   if (!insideOverlay || multiple || !options?.length) return false;
   return options.length <= INLINE_CHOICES_MAX && options.every(option => option.icon != null);
+}
+function shouldPushChoices({
+  inSheet,
+  multiple,
+  options
+}) {
+  if (!inSheet || multiple || !options?.length) return false;
+  return options.length > INLINE_CHOICES_MAX;
+}
+function opensBesideTrigger(optionCount) {
+  return optionCount > 0 && optionCount <= INLINE_CHOICES_MAX;
 }

package/dist/cjs/fields/Select/shouldInlineChoices.native.js

@@ -25,7 +25,9 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var shouldInlineChoices_exports = {};
 __export(shouldInlineChoices_exports, {
   INLINE_CHOICES_MAX: () => INLINE_CHOICES_MAX,
-  shouldInlineChoices: () => shouldInlineChoices
+  opensBesideTrigger: () => opensBesideTrigger,
+  shouldInlineChoices: () => shouldInlineChoices,
+  shouldPushChoices: () => shouldPushChoices
 });
 module.exports = __toCommonJS(shouldInlineChoices_exports);
 var INLINE_CHOICES_MAX = 5;
@@ -40,4 +42,16 @@ function shouldInlineChoices(param) {
     return option.icon != null;
   });
 }
+function shouldPushChoices(param) {
+  var {
+    inSheet,
+    multiple,
+    options
+  } = param;
+  if (!inSheet || multiple || !(options === null || options === void 0 ? void 0 : options.length)) return false;
+  return options.length > INLINE_CHOICES_MAX;
+}
+function opensBesideTrigger(optionCount) {
+  return optionCount > 0 && optionCount <= INLINE_CHOICES_MAX;
+}
 //# sourceMappingURL=shouldInlineChoices.native.js.map

package/dist/cjs/fields/Select/shouldInlineChoices.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","shouldInlineChoices_exports","INLINE_CHOICES_MAX","shouldInlineChoices","module","exports","param","insideOverlay","multiple","options","length","every","option","icon"],"sources":["shouldInlineChoices.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar shouldInlineChoices_exports = {};\n__export(shouldInlineChoices_exports, {\n  INLINE_CHOICES_MAX: () => INLINE_CHOICES_MAX,\n  shouldInlineChoices: () => shouldInlineChoices\n});\nmodule.exports = __toCommonJS(shouldInlineChoices_exports);\nvar INLINE_CHOICES_MAX = 5;\nfunction shouldInlineChoices(param) {\n  var { insideOverlay, multiple, options } = param;\n  if (!insideOverlay || multiple || !(options === null || options === void 0 ? void 0 : options.length)) return false;\n  return options.length <= INLINE_CHOICES_MAX && options.every(function(option) {\n    return option.icon != null;\n  });\n}\n//# sourceMappingURL=shouldInlineChoices.js.map\n"],"mappings":"AAAA,YAAY;;AACZ,IAAIA,SAAS,GAAGC,MAAM,CAACC,cAAc;AACrC,IAAIC,gBAAgB,GAAGF,MAAM,CAACG,wBAAwB;AACtD,IAAIC,iBAAiB,GAAGJ,MAAM,CAACK,mBAAmB;AAClD,IAAIC,YAAY,GAAGN,MAAM,CAACO,SAAS,CAACC,cAAc;AAClD,IAAIC,QAAQ,GAAGA,CAACC,MAAM,EAAEC,GAAG,KAAK;EAC9B,KAAK,IAAIC,IAAI,IAAID,GAAG,EAClBZ,SAAS,CAACW,MAAM,EAAEE,IAAI,EAAE;IAAEC,GAAG,EAAEF,GAAG,CAACC,IAAI,CAAC;IAAEE,UAAU,EAAE;EAAK,CAAC,CAAC;AACjE,CAAC;AACD,IAAIC,WAAW,GAAGA,CAACC,EAAE,EAAEC,IAAI,EAAEC,MAAM,EAAEC,IAAI,KAAK;EAC5C,IAAIF,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,IAAI,OAAOA,IAAI,KAAK,UAAU,EAAE;IAClE,KAAK,IAAIG,GAAG,IAAIhB,iBAAiB,CAACa,IAAI,CAAC,EACrC,IAAI,CAACX,YAAY,CAACe,IAAI,CAACL,EAAE,EAAEI,GAAG,CAAC,IAAIA,GAAG,KAAKF,MAAM,EAC/CnB,SAAS,CAACiB,EAAE,EAAEI,GAAG,EAAE;MAAEP,GAAG,EAAEA,CAAA,KAAMI,IAAI,CAACG,GAAG,CAAC;MAAEN,UAAU,EAAE,EAAEK,IAAI,GAAGjB,gBAAgB,CAACe,IAAI,EAAEG,GAAG,CAAC,CAAC,IAAID,IAAI,CAACL;IAAW,CAAC,CAAC;EACxH;EACA,OAAOE,EAAE;AACX,CAAC;AACD,IAAIM,YAAY,GAAIC,GAAG,IAAKR,WAAW,CAAChB,SAAS,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE;EAAEyB,KAAK,EAAE;AAAK,CAAC,CAAC,EAAED,GAAG,CAAC;AAC1F,IAAIE,2BAA2B,GAAG,CAAC,CAAC;AACpChB,QAAQ,CAACgB,2BAA2B,EAAE;EACpCC,kBAAkB,EAAEA,CAAA,KAAMA,kBAAkB;EAC5CC,mBAAmB,EAAEA,CAAA,KAAMA;AAC7B,CAAC,CAAC;AACFC,MAAM,CAACC,OAAO,GAAGP,YAAY,CAACG,2BAA2B,CAAC;AAC1D,IAAIC,kBAAkB,GAAG,CAAC;AAC1B,SAASC,mBAAmBA,CAACG,KAAK,EAAE;EAClC,IAAI;IAAEC,aAAa;IAAEC,QAAQ;IAAEC;EAAQ,CAAC,GAAGH,KAAK;EAChD,IAAI,CAACC,aAAa,IAAIC,QAAQ,IAAI,EAAEC,OAAO,KAAK,IAAI,IAAIA,OAAO,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,OAAO,CAACC,MAAM,CAAC,EAAE,OAAO,KAAK;EACnH,OAAOD,OAAO,CAACC,MAAM,IAAIR,kBAAkB,IAAIO,OAAO,CAACE,KAAK,CAAC,UAASC,MAAM,EAAE;IAC5E,OAAOA,MAAM,CAACC,IAAI,IAAI,IAAI;EAC5B,CAAC,CAAC;AACJ","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","shouldInlineChoices_exports","INLINE_CHOICES_MAX","opensBesideTrigger","shouldInlineChoices","shouldPushChoices","module","exports","param","insideOverlay","multiple","options","length","every","option","icon","inSheet","optionCount"],"sources":["shouldInlineChoices.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar shouldInlineChoices_exports = {};\n__export(shouldInlineChoices_exports, {\n  INLINE_CHOICES_MAX: () => INLINE_CHOICES_MAX,\n  opensBesideTrigger: () => opensBesideTrigger,\n  shouldInlineChoices: () => shouldInlineChoices,\n  shouldPushChoices: () => shouldPushChoices\n});\nmodule.exports = __toCommonJS(shouldInlineChoices_exports);\nvar INLINE_CHOICES_MAX = 5;\nfunction shouldInlineChoices(param) {\n  var { insideOverlay, multiple, options } = param;\n  if (!insideOverlay || multiple || !(options === null || options === void 0 ? void 0 : options.length)) return false;\n  return options.length <= INLINE_CHOICES_MAX && options.every(function(option) {\n    return option.icon != null;\n  });\n}\nfunction shouldPushChoices(param) {\n  var { inSheet, multiple, options } = param;\n  if (!inSheet || multiple || !(options === null || options === void 0 ? void 0 : options.length)) return false;\n  return options.length > INLINE_CHOICES_MAX;\n}\nfunction opensBesideTrigger(optionCount) {\n  return optionCount > 0 && optionCount <= INLINE_CHOICES_MAX;\n}\n//# sourceMappingURL=shouldInlineChoices.js.map\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/fields/Slider/index.cjs

@@ -36,6 +36,8 @@ var import_theme3 = require("@multiplatform.one/theme");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
+var import_systemControlModules = require("../../shared/systemControlModules.cjs");
+var import_systemControls = require("../../shared/systemControls.cjs");
 var import_t = require("../../shared/t.cjs");
 var import_utils = require("../../shared/utils.cjs");
 var import_jumpMotion = require("./jumpMotion.cjs");
@@ -110,6 +112,74 @@ function valuesEqual(a, b) {
   if (!a || !b || a.length !== b.length) return false;
   return a.every((v, i) => v === b[i]);
 }
+function SystemSliderControl({
+  Component,
+  platform,
+  id,
+  value,
+  min,
+  max,
+  step,
+  disabled,
+  readOnly,
+  hasError,
+  accessibilityLabel,
+  accessibilityHint,
+  height,
+  onChangeValue,
+  onBlur
+}) {
+  const literal = (0, import_systemControls.useThemeLiteral)();
+  const [displayValue, setDisplayValue] = (0, import_react.useState)(value);
+  (0, import_react.useEffect)(() => setDisplayValue(value), [value]);
+  const fill = literal(hasError ? import_colorRamps.formCommonColors.error : import_colorRamps.formSelectedColors.mark);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    height,
+    alignItems: "center",
+    width: "100%",
+    gap: "$3",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      flex: 1,
+      minWidth: 0,
+      justifyContent: "center",
+      ...(readOnly ? {
+        pointerEvents: "none"
+      } : void 0),
+      "data-mp-system-control": "slider",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {
+        id,
+        style: {
+          width: "100%"
+        },
+        value,
+        minimumValue: min,
+        maximumValue: max,
+        step,
+        disabled,
+        minimumTrackTintColor: fill,
+        maximumTrackTintColor: literal(import_colorRamps.formControlColors.background),
+        ...(platform === "android" && {
+          thumbTintColor: fill
+        }),
+        accessibilityLabel,
+        accessibilityHint,
+        onValueChange: next => {
+          setDisplayValue(next);
+          if (disabled || readOnly) return;
+          onChangeValue(next);
+        },
+        onSlidingComplete: () => onBlur?.()
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.Paragraph, {
+      size: "$2",
+      color: import_colorRamps.formCommonColors.text,
+      minWidth: 32,
+      textAlign: "right",
+      "aria-hidden": true,
+      children: formatSliderOutput([displayValue], step)
+    })]
+  });
+}
 function SliderControl({
   id,
   sliderValue,
@@ -504,7 +574,8 @@ function Slider({
   step = 1,
   sliderProps,
   skeleton,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  native = true
 }) {
   const handleValueChange = values => {
     onChange?.(values);
@@ -542,7 +613,28 @@ function Slider({
       })
     });
   }
-  const control = (sliderValue, isControlled, handleChange, handleBlur, hasError) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderControl, {
+  const systemPlatform = native ? (0, import_systemControls.systemControlPlatform)() : null;
+  const SystemSlider = systemPlatform && sliderProps?.orientation !== "vertical" && sliderProps?.dir !== "rtl" ? (0, import_systemControlModules.loadSystemSlider)() : null;
+  const control = (sliderValue, isControlled, handleChange, handleBlur, hasError, errorMessage) => SystemSlider && systemPlatform && sliderValue.length === 1 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(SystemSliderControl, {
+    Component: SystemSlider,
+    platform: systemPlatform,
+    id,
+    value: sliderValue[0] ?? min,
+    min,
+    max,
+    step,
+    disabled,
+    readOnly,
+    hasError,
+    accessibilityLabel: ariaLabel ?? (typeof label === "string" ? label : void 0),
+    accessibilityHint: errorMessage ?? helperText,
+    height: size || knobProps.sizeToken,
+    onChangeValue: next => {
+      handleChange?.([next]);
+      handleValueChange([next]);
+    },
+    onBlur: handleBlur
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderControl, {
     id,
     sliderValue,
     controlled: isControlled,
@@ -580,7 +672,7 @@ function Slider({
       size,
       knobProps,
       disabled,
-      children: control(value ?? defaultValue ?? [min], value !== void 0, void 0, onBlur, !!error)
+      children: control(value ?? defaultValue ?? [min], value !== void 0, void 0, onBlur, !!error, typeof error === "string" && error ? error : void 0)
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
@@ -608,7 +700,7 @@ function Slider({
         // form branch does the same).
         true, values => {
           field.handleChange(values.length > 1 ? values : values[0]);
-        }, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), !!resolvedError)
+        }, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), !!resolvedError, typeof resolvedError === "string" && resolvedError ? resolvedError : void 0)
       });
     }
   });

package/dist/cjs/fields/Slider/index.native.js

@@ -40,6 +40,8 @@ var import_theme3 = require("@multiplatform.one/theme");
 var import_Skeleton = require("../../Skeleton");
 var import_fieldLayout = require("../../fieldLayout.native.js");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
+var import_systemControlModules = require("../../shared/systemControlModules.native.js");
+var import_systemControls = require("../../shared/systemControls.native.js");
 var import_t = require("../../shared/t.native.js");
 var import_utils = require("../../shared/utils.native.js");
 var import_jumpMotion = require("./jumpMotion.native.js");
@@ -139,6 +141,79 @@ function valuesEqual(a, b) {
     return v === b[i];
   });
 }
+function SystemSliderControl(param) {
+  var {
+    Component,
+    platform,
+    id,
+    value,
+    min,
+    max,
+    step,
+    disabled,
+    readOnly,
+    hasError,
+    accessibilityLabel,
+    accessibilityHint,
+    height,
+    onChangeValue,
+    onBlur
+  } = param;
+  var literal = (0, import_systemControls.useThemeLiteral)();
+  var [displayValue, setDisplayValue] = (0, import_react2.useState)(value);
+  (0, import_react2.useEffect)(function () {
+    return setDisplayValue(value);
+  }, [value]);
+  var fill = literal(hasError ? import_colorRamps.formCommonColors.error : import_colorRamps.formSelectedColors.mark);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    height,
+    alignItems: "center",
+    width: "100%",
+    gap: "$3",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      flex: 1,
+      minWidth: 0,
+      justifyContent: "center",
+      ...(readOnly ? {
+        pointerEvents: "none"
+      } : void 0),
+      "data-mp-system-control": "slider",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Component, {
+        id,
+        style: {
+          width: "100%"
+        },
+        value,
+        minimumValue: min,
+        maximumValue: max,
+        step,
+        disabled,
+        minimumTrackTintColor: fill,
+        maximumTrackTintColor: literal(import_colorRamps.formControlColors.background),
+        ...(platform === "android" && {
+          thumbTintColor: fill
+        }),
+        accessibilityLabel,
+        accessibilityHint,
+        onValueChange: function onValueChange(next) {
+          setDisplayValue(next);
+          if (disabled || readOnly) return;
+          onChangeValue(next);
+        },
+        onSlidingComplete: function onSlidingComplete() {
+          return onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        }
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.Paragraph, {
+      size: "$2",
+      color: import_colorRamps.formCommonColors.text,
+      minWidth: 32,
+      textAlign: "right",
+      "aria-hidden": true,
+      children: formatSliderOutput([displayValue], step)
+    })]
+  });
+}
 function SliderControl(param) {
   var {
     id,
@@ -568,7 +643,8 @@ function Slider(param) {
     step = 1,
     sliderProps,
     skeleton,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    native = true
   } = param;
   var handleValueChange = function handleValueChange2(values) {
     onChange === null || onChange === void 0 ? void 0 : onChange(values);
@@ -606,8 +682,30 @@ function Slider(param) {
       })
     });
   }
-  var control = function control2(sliderValue, isControlled, handleChange, handleBlur, hasError) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderControl, {
+  var systemPlatform = native ? (0, import_systemControls.systemControlPlatform)() : null;
+  var SystemSlider = systemPlatform && (sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.orientation) !== "vertical" && (sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.dir) !== "rtl" ? (0, import_systemControlModules.loadSystemSlider)() : null;
+  var control = function control2(sliderValue, isControlled, handleChange, handleBlur, hasError, errorMessage) {
+    var _sliderValue_;
+    return SystemSlider && systemPlatform && sliderValue.length === 1 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(SystemSliderControl, {
+      Component: SystemSlider,
+      platform: systemPlatform,
+      id,
+      value: (_sliderValue_ = sliderValue[0]) !== null && _sliderValue_ !== void 0 ? _sliderValue_ : min,
+      min,
+      max,
+      step,
+      disabled,
+      readOnly,
+      hasError,
+      accessibilityLabel: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : typeof label === "string" ? label : void 0,
+      accessibilityHint: errorMessage !== null && errorMessage !== void 0 ? errorMessage : helperText,
+      height: size || knobProps.sizeToken,
+      onChangeValue: function onChangeValue(next) {
+        handleChange === null || handleChange === void 0 ? void 0 : handleChange([next]);
+        handleValueChange([next]);
+      },
+      onBlur: handleBlur
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderControl, {
       id,
       sliderValue,
       controlled: isControlled,
@@ -647,7 +745,7 @@ function Slider(param) {
       size,
       knobProps,
       disabled,
-      children: control((_ref = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref !== void 0 ? _ref : [min], value !== void 0, void 0, onBlur, !!error)
+      children: control((_ref = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref !== void 0 ? _ref : [min], value !== void 0, void 0, onBlur, !!error, typeof error === "string" && error ? error : void 0)
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
@@ -675,7 +773,7 @@ function Slider(param) {
         // form branch does the same).
         true, function (values) {
           field.handleChange(values.length > 1 ? values : values[0]);
-        }, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), !!resolvedError)
+        }, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), !!resolvedError, typeof resolvedError === "string" && resolvedError ? resolvedError : void 0)
       });
     }
   });