@react-fabric/form 1.0.0-beta.0

package/dist/esm/internal/InputWrapper.js

@@ -0,0 +1,113 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { FloatingPortal } from '@floating-ui/react';
+import { Icon, CoreIcons } from '@react-fabric/core';
+import { isString } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { Fragment, jsxs, jsx } from 'react/jsx-runtime';
+import { ErrorIcon } from './ErrorIcon.js';
+import classes from './Field.module.css';
+import { FieldWrapper } from './FieldWrapper.js';
+
+var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "children", "onClear", "noOutline", "noBorder", "textarea", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var InputWrapper = function InputWrapper(_ref) {
+  var _elRef$current;
+  var invalid = _ref.invalid,
+    error = _ref.error,
+    allowClear = _ref.allowClear,
+    showClear = _ref.showClear,
+    decorateStart = _ref.decorateStart,
+    decorateEnd = _ref.decorateEnd,
+    children = _ref.children,
+    onClear = _ref.onClear,
+    noOutline = _ref.noOutline,
+    noBorder = _ref.noBorder,
+    _ref$textarea = _ref.textarea,
+    textarea = _ref$textarea === void 0 ? false : _ref$textarea,
+    isInner = _ref["data-inner"];
+    _ref["data-open"];
+    var floatingExpand = _ref.floatingExpand,
+    wrapperRef = _ref.wrapperRef,
+    width = _ref.width,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var elRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpanded = _useState2[0],
+    setExpanded = _useState2[1];
+  var Wrapper = useMemo(function () {
+    return isInner || !rest.label ? Fragment : FieldWrapper;
+  }, [isInner, rest.label]);
+  var wrapperProps = useMemo(function () {
+    return isInner || !rest.label ? {} : _objectSpread(_objectSpread({}, rest), {}, {
+      width: width
+    });
+  }, [isInner, rest, width]);
+  var handleClear = useCallback(function (e) {
+    var _e$currentTarget$pare;
+    (_e$currentTarget$pare = e.currentTarget.parentElement) === null || _e$currentTarget$pare === void 0 || (_e$currentTarget$pare = _e$currentTarget$pare.querySelector("input,textarea,button")) === null || _e$currentTarget$pare === void 0 || _e$currentTarget$pare.focus();
+    onClear === null || onClear === void 0 || onClear();
+  }, [onClear]);
+  var doFocus = useCallback(function (e) {
+    var _e$currentTarget$pare2;
+    (_e$currentTarget$pare2 = e.currentTarget.parentElement) === null || _e$currentTarget$pare2 === void 0 || (_e$currentTarget$pare2 = _e$currentTarget$pare2.querySelector("input,textarea,button")) === null || _e$currentTarget$pare2 === void 0 || _e$currentTarget$pare2.focus();
+  }, [onClear]);
+  useEffect(function () {
+    isExpanded && setTimeout(function () {
+      var _wrapperRef$current;
+      return wrapperRef === null || wrapperRef === void 0 || (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 || (_wrapperRef$current = _wrapperRef$current.querySelector("textarea")) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.focus();
+    }, 50);
+  }, [isExpanded]);
+  var el = /*#__PURE__*/jsxs("div", {
+    role: "none",
+    ref: wrapperRef,
+    className: classNames(classes.inputWrapper, invalid && classes.invalidWrapper, !noOutline && !noBorder && "bg-[var(--fabric-input)] outline overflow-hidden", "flex flex-nowrap items-center", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-[99]" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto"),
+    onKeyDown: function onKeyDown(e) {
+      return e.key === "Escape" && setExpanded(false);
+    },
+    children: [decorateStart && /*#__PURE__*/jsx("div", {
+      onClickCapture: doFocus,
+      className: classNames(classes.decorate, "text-muted leading-none flex-content", isString(decorateStart) && "px-1"),
+      children: decorateStart
+    }), /*#__PURE__*/jsx(ErrorIcon, {
+      invalid: invalid,
+      error: error
+    }), children, allowClear && showClear && /*#__PURE__*/jsx(Icon, {
+      icon: CoreIcons.close,
+      onClick: handleClear,
+      className: classNames("text-tint-500 hover:text-tint-700 p-1 z-1 flex-content", classes.inputClear, textarea && "self-start mt-1 me-1")
+    }), decorateEnd && /*#__PURE__*/jsx("div", {
+      onClickCapture: doFocus,
+      className: classNames(classes.decorate, "text-muted leading-none flex-content", isString(decorateEnd) && "px-1"),
+      children: decorateEnd
+    }), textarea && /*#__PURE__*/jsx(Icon, {
+      onClick: function onClick() {
+        return setExpanded(!isExpanded);
+      },
+      icon: isExpanded ? CoreIcons.arrowCollapse : CoreIcons.arrowExpand,
+      className: "hidden group-hover:block absolute top-0 end-0 bg-base hover:bg-tint-200 p-1 opacity-65 rounded-capped"
+    })]
+  });
+  return /*#__PURE__*/jsx(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
+    children: /*#__PURE__*/jsxs("div", {
+      ref: elRef,
+      className: "flex-1 relative min-h-8",
+      style: {
+        width: width,
+        flexBasis: width
+      },
+      children: [!isExpanded && el, isExpanded && /*#__PURE__*/jsx(FloatingPortal, {
+        root: (_elRef$current = elRef.current) === null || _elRef$current === void 0 ? void 0 : _elRef$current.closest(".theme-base"),
+        children: el
+      })]
+    })
+  }));
+};
+
+export { InputWrapper };

package/dist/esm/ranger/index.js

@@ -0,0 +1,352 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useIsRtl } from '@react-fabric/core';
+import { useState, useMemo, useRef, useCallback, useEffect } from 'react';
+import { getBoundingClientRect, linearInterpolator, sortNumList } from './utils.js';
+
+var useGetLatest = function useGetLatest(val) {
+  var ref = useRef(val);
+  ref.current = val;
+  return useCallback(function () {
+    return ref.current;
+  }, []);
+};
+var useRanger = function useRanger(opts) {
+  var _opts$tickSize;
+  var tickSize = (_opts$tickSize = opts.tickSize) !== null && _opts$tickSize !== void 0 ? _opts$tickSize : 10;
+  var values = opts.values;
+  var min = opts.min;
+  var max = opts.max;
+  var isVertical = opts.vertical;
+  var controlledTicks = opts.ticks;
+  var steps = "steps" in opts ? opts.steps : undefined;
+  var onChange = opts.onChange;
+  var onDrag = opts.onDrag;
+  var onDragStart = opts.onDragStart;
+  var onDragEnd = opts.onDragEnd;
+  var stepSize = "stepSize" in opts ? opts.stepSize : 1;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeHandleIndex = _useState2[0],
+    setActiveHandleIndex = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    segmentStart = _useState4[0],
+    setSegmentStart = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tempValues = _useState6[0],
+    setTempValues = _useState6[1];
+  var isRtl = useIsRtl();
+  var positionProp = useMemo(function () {
+    return isVertical ? "bottom" : isRtl ? "right" : "left";
+  }, [isVertical, isRtl]);
+  var marginProp = useMemo(function () {
+    return isVertical ? "marginBottom" : isRtl ? "marginRight" : "marginLeft";
+  }, [isVertical, isRtl]);
+  var getLatest = useGetLatest({
+    activeHandleIndex: activeHandleIndex,
+    segmentStart: segmentStart,
+    onChange: onChange,
+    onDrag: onDrag,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd,
+    values: values,
+    tempValues: tempValues
+  });
+  var trackElRef = useRef(null);
+  var segmentElRef = useRef(null);
+  var getValueForClientX = useCallback(function (clientX) {
+    var trackDims = getBoundingClientRect(trackElRef.current);
+    return linearInterpolator.getValueForClientX(clientX, trackDims, min, max, isRtl);
+  }, [max, min, isRtl]);
+  var getValueForClientY = useCallback(function (clientY) {
+    var trackDims = getBoundingClientRect(trackElRef.current);
+    return linearInterpolator.getValueForClientY(clientY, trackDims, min, max);
+  }, [max, min]);
+  var getNextStep = useCallback(function (val, direction) {
+    if (steps) {
+      var currIndex = steps.indexOf(val);
+      var nextIndex = currIndex + direction;
+      if (nextIndex >= 0 && nextIndex < steps.length) {
+        return steps[nextIndex];
+      } else {
+        return val;
+      }
+    } else {
+      if (process.env.NODE_ENV !== "production") {
+        if (typeof stepSize === "undefined") {
+          throw new Error("Warning: The option `stepSize` is expected in `useRanger`, but its value is `undefined`");
+        }
+      }
+      var nextVal = val + stepSize * direction;
+      if (nextVal >= min && nextVal <= max) {
+        return nextVal;
+      } else {
+        return val;
+      }
+    }
+  }, [max, min, stepSize, steps]);
+  var roundToStep = useCallback(function (val) {
+    var left = min;
+    var right = max;
+    if (steps) {
+      steps.forEach(function (step) {
+        if (step <= val && step > left) {
+          left = step;
+        }
+        if (step >= val && step < right) {
+          right = step;
+        }
+      });
+    } else {
+      if (process.env.NODE_ENV !== "production") {
+        if (typeof stepSize === "undefined") {
+          throw new Error("Warning: The option `stepSize` is expected in `useRanger`, but its value is `undefined`");
+        }
+      }
+      while (left < val && left + stepSize < val) {
+        left += stepSize;
+      }
+      right = Math.min(left + stepSize, max);
+    }
+    if (val - left < right - val) {
+      return +left.toFixed(3);
+    }
+    return +right.toFixed(3);
+  }, [max, min, stepSize, steps]);
+  var handleDrag = useCallback(function (e) {
+    var _getLatest = getLatest(),
+      activeHandleIndex = _getLatest.activeHandleIndex,
+      onDrag = _getLatest.onDrag;
+    var clientX =
+    // @ts-expect-error ignore
+    e.type === "touchmove" ? e.changedTouches[0].clientX : e.clientX;
+    var clientY =
+    // @ts-expect-error ignore
+    e.type === "touchmove" ? e.changedTouches[0].clientY : e.clientY;
+    var newValue = isVertical ? getValueForClientY(clientY) : getValueForClientX(clientX);
+    var newRoundedValue = roundToStep(newValue);
+    var newValues = [].concat(_toConsumableArray(values.slice(0, activeHandleIndex)), [newRoundedValue], _toConsumableArray(values.slice(+activeHandleIndex + 1)));
+    onDrag === null || onDrag === void 0 || onDrag(newValues);
+    setTempValues(newValues);
+  }, [getLatest, getValueForClientX, getValueForClientY, roundToStep, values, isVertical]);
+  var handleSegmentDrag = useCallback(function (e) {
+    var _getLatest2 = getLatest(),
+      _getLatest2$segmentSt = _slicedToArray(_getLatest2.segmentStart, 2),
+      segX = _getLatest2$segmentSt[0],
+      segY = _getLatest2$segmentSt[1],
+      tempValues = _getLatest2.tempValues,
+      onDrag = _getLatest2.onDrag;
+    var _getBoundingClientRec = getBoundingClientRect(segmentElRef.current),
+      left = _getBoundingClientRec.left,
+      bottom = _getBoundingClientRec.bottom;
+    var clientX =
+    // @ts-expect-error ignore
+    e.type === "touchmove" ? e.changedTouches[0].clientX : e.clientX;
+    var clientY =
+    // @ts-expect-error ignore
+    e.type === "touchmove" ? e.changedTouches[0].clientY : e.clientY;
+    var start = isVertical ? getValueForClientX(bottom + (clientY - segY)) : getValueForClientX(left + (clientX - segX));
+    var diff = roundToStep(start) - tempValues[0];
+    if (+tempValues[1] + diff > max) diff = 0;
+    var newValues = [+tempValues[0] + diff, +tempValues[1] + diff];
+    if (tempValues[0] !== newValues[0] || tempValues[1] !== newValues[1]) {
+      onDrag === null || onDrag === void 0 || onDrag(newValues);
+      setTempValues(newValues);
+      setSegmentStart([clientX, clientY]);
+    }
+  }, [getLatest, getValueForClientX, getValueForClientY, roundToStep, values, isVertical, max]);
+  var handleKeyDown = useCallback(function (e, i) {
+    var _getLatest3 = getLatest(),
+      values = _getLatest3.values,
+      onChange = _getLatest3.onChange;
+    if (["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"].includes(e.key)) {
+      setActiveHandleIndex(i);
+      var direction = ["ArrowLeft", "ArrowDown"].includes(e.key) ? -1 : 1;
+      var _newValue = +getNextStep(values[i], direction).toFixed(3);
+      var newValues = [].concat(_toConsumableArray(values.slice(0, i)), [_newValue], _toConsumableArray(values.slice(i + 1)));
+      var sortedValues = sortNumList(newValues);
+      onChange === null || onChange === void 0 || onChange(sortedValues);
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }, [getLatest, getNextStep]);
+  var handlePress = useCallback(function (e, i) {
+    var _getLatest4 = getLatest(),
+      onDragStart = _getLatest4.onDragStart,
+      values = _getLatest4.values;
+    if (i === -1) {
+      var clientX = e.type === "touchmove" ?
+      // @ts-expect-error ignore
+      e.nativeEvent.changedTouches[0].clientX :
+      // @ts-expect-error ignore
+      e.nativeEvent.clientX;
+      var clientY = e.type === "touchmove" ?
+      // @ts-expect-error ignore
+      e.nativeEvent.changedTouches[0].clientY :
+      // @ts-expect-error ignore
+      e.nativeEvent.clientY;
+      setTempValues(values);
+      setSegmentStart([clientX, clientY]);
+    } else {
+      setActiveHandleIndex(i);
+    }
+    var handleRelease = function handleRelease(e) {
+      var _getLatest5 = getLatest(),
+        tempValues = _getLatest5.tempValues,
+        onChange = _getLatest5.onChange,
+        onDragEnd = _getLatest5.onDragEnd;
+      document.removeEventListener("mousemove", i === -1 ? handleSegmentDrag : handleDrag);
+      document.removeEventListener("touchmove", i === -1 ? handleSegmentDrag : handleDrag);
+      document.removeEventListener("mouseup", handleRelease, {
+        capture: true
+      });
+      document.removeEventListener("touchend", handleRelease, {
+        capture: true
+      });
+      var sortedValues = sortNumList(tempValues || values);
+      onDragEnd === null || onDragEnd === void 0 || onDragEnd();
+      onChange === null || onChange === void 0 || onChange(sortedValues);
+      setActiveHandleIndex(undefined);
+      setSegmentStart(undefined);
+      setTempValues(undefined);
+    };
+    onDragStart === null || onDragStart === void 0 || onDragStart();
+    document.addEventListener("mousemove", i === -1 ? handleSegmentDrag : handleDrag);
+    document.addEventListener("touchmove", i === -1 ? handleSegmentDrag : handleDrag);
+    document.addEventListener("mouseup", handleRelease, {
+      capture: true
+    });
+    document.addEventListener("touchend", handleRelease, {
+      capture: true
+    });
+  }, [getLatest, handleDrag]);
+  var getPercentageForValue = useCallback(function (val) {
+    return linearInterpolator.getPercentageForValue(val, min, max);
+  }, [max, min]);
+  var trackClicked = useCallback(function (e) {
+    var _getLatest6 = getLatest(),
+      onChange = _getLatest6.onChange,
+      values = _getLatest6.values;
+    var clientX = e.type === "touchmove" ?
+    // @ts-expect-error ignore
+    e.changedTouches[0].clientX :
+    // @ts-expect-error ignore
+    e.clientX;
+    var clientY = e.type === "touchmove" ?
+    // @ts-expect-error ignore
+    e.changedTouches[0].clientY :
+    // @ts-expect-error ignore
+    e.clientY;
+    var newValue = isVertical ? getValueForClientY(clientY) : getValueForClientX(clientX);
+    var newRoundedValue = roundToStep(newValue);
+    var newValues = [newRoundedValue];
+    if (values.length === 2) {
+      if (values[0] > newRoundedValue) newValues = [newRoundedValue, values[1]];else if (values[1] < newRoundedValue) newValues = [values[0], newRoundedValue];else {
+        var diff = (values[1] - values[0]) / 2;
+        if (values[0] + diff >= newRoundedValue) newValues = [newRoundedValue, values[1]];
+        if (values[1] - diff <= newRoundedValue) newValues = [values[0], newRoundedValue];
+      }
+    }
+    onChange(newValues);
+  }, [getLatest, getValueForClientX, getValueForClientY, isVertical]);
+  useEffect(function () {
+    var _trackElRef$current;
+    (_trackElRef$current = trackElRef.current) === null || _trackElRef$current === void 0 || _trackElRef$current.addEventListener("mousedown", trackClicked);
+  }, [trackClicked]);
+  // Build the ticks
+  var ticks = useMemo(function () {
+    var ticks = controlledTicks !== null && controlledTicks !== void 0 ? controlledTicks : steps;
+    if (!ticks) {
+      ticks = [min];
+      var count = tickSize - tickSize % stepSize;
+      while (ticks[ticks.length - 1] < max - count) {
+        ticks.push(ticks[ticks.length - 1] + count);
+      }
+      ticks.push(max);
+    }
+    return ticks.map(function (value, i) {
+      return {
+        key: i,
+        value: value,
+        percentage: getPercentageForValue(value),
+        styles: _defineProperty(_defineProperty({}, positionProp, "".concat(getPercentageForValue(value), "%")), marginProp, "-0.125rem")
+      };
+    });
+  }, [controlledTicks, getPercentageForValue, max, min, steps, tickSize, positionProp, marginProp]);
+  var segments = useMemo(function () {
+    var sortedValues = sortNumList(tempValues !== null && tempValues !== void 0 ? tempValues : values);
+    return [].concat(_toConsumableArray(sortedValues), [max]).map(function (value, i) {
+      var active = i === sortedValues.length - 1;
+      return {
+        key: i,
+        value: value,
+        active: active,
+        props: active ? {
+          ref: segmentElRef,
+          onMouseDownCapture: function onMouseDownCapture(e) {
+            e.stopPropagation();
+            e.persist();
+            handlePress(e, -1);
+          },
+          onTouchStartCapture: function onTouchStartCapture(e) {
+            e.stopPropagation();
+            e.persist();
+            handlePress(e, -1);
+          }
+        } : {},
+        styles: function () {
+          var left = getPercentageForValue(sortedValues[i - 1] ? sortedValues[i - 1] : min);
+          var width = getPercentageForValue(value) - left;
+          return _defineProperty(_defineProperty({}, positionProp, "".concat(left, "%")), isVertical ? "height" : "width", "".concat(width, "%"));
+        }()
+      };
+    });
+  }, [getPercentageForValue, max, min, tempValues, values, positionProp, marginProp]);
+  var handles = useMemo(function () {
+    return (tempValues !== null && tempValues !== void 0 ? tempValues : values).map(function (value, i) {
+      return {
+        key: i,
+        value: value,
+        percentage: getPercentageForValue(value),
+        active: i === activeHandleIndex,
+        props: {
+          role: "slider",
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": value,
+          onKeyDown: function onKeyDown(e) {
+            e.stopPropagation();
+            e.persist();
+            handleKeyDown(e, i);
+          },
+          onMouseDownCapture: function onMouseDownCapture(e) {
+            e.stopPropagation();
+            e.persist();
+            handlePress(e, i);
+          },
+          onTouchStartCapture: function onTouchStartCapture(e) {
+            e.stopPropagation();
+            e.persist();
+            handlePress(e, i);
+          }
+        },
+        styles: _defineProperty(_defineProperty({}, positionProp, "".concat(getPercentageForValue(value), "%")), marginProp, "-0.375rem"),
+        valueStyles: _defineProperty({}, positionProp, "".concat(getPercentageForValue(value), "%"))
+      };
+    });
+  }, [activeHandleIndex, getPercentageForValue, handleKeyDown, handlePress, min, max, tempValues, values, positionProp, marginProp]);
+  return {
+    trackElRef: trackElRef,
+    activeHandleIndex: activeHandleIndex,
+    ticks: ticks,
+    segments: segments,
+    handles: handles
+  };
+};
+
+export { useRanger };

package/dist/esm/ranger/utils.js

@@ -0,0 +1,47 @@
+'use client';
+
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+
+/**
+ * react-ranger
+ * https://github.com/TanStack/ranger
+ */
+
+var getBoundingClientRect = function getBoundingClientRect(element) {
+  var rect = element.getBoundingClientRect();
+  return {
+    top: Math.ceil(rect.top),
+    left: Math.ceil(rect.left),
+    right: Math.ceil(rect.right),
+    width: Math.ceil(rect.width),
+    bottom: Math.ceil(rect.bottom),
+    height: Math.ceil(rect.height)
+  };
+};
+var sortNumList = function sortNumList(arr) {
+  return _toConsumableArray(arr).map(Number).sort(function (a, b) {
+    return a - b;
+  });
+};
+var linearInterpolator = {
+  getPercentageForValue: function getPercentageForValue(val, min, max) {
+    return Math.max(0, Math.min(100, (val - min) / (max - min) * 100));
+  },
+  getValueForClientX: function getValueForClientX(clientX, trackDims, min, max, isRtl) {
+    var left = trackDims.left,
+      right = trackDims.right,
+      width = trackDims.width;
+    var percentageValue = (isRtl ? right - clientX : clientX - left) / width;
+    var value = (max - min) * percentageValue;
+    return value + min;
+  },
+  getValueForClientY: function getValueForClientY(clientY, trackDims, min, max) {
+    var height = trackDims.height,
+      bottom = trackDims.bottom;
+    var percentageValue = (bottom - clientY) / height;
+    var value = (max - min) * percentageValue;
+    return value + min;
+  }
+};
+
+export { getBoundingClientRect, linearInterpolator, sortNumList };