@luminati-io/uikit 6.3.54 → 6.3.55

package/dist/umd/uikit.development.js

@@ -46561,7 +46561,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   Number: () => (/* binding */ Number)
+/* harmony export */   Number: () => (/* binding */ _Number)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -46578,8 +46578,14 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /*jslint react:true*/
-var _excluded = ["onChange", "onBlur", "value", "step", "minValue", "maxValue", "size", "placeholder", "changeOnBlur", "tabIndex", "readOnly"],
-  _excluded2 = ["onFocus", "onBlur", "onChange", "readOnly"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["onChange", "onBlur", "value", "step", "minValue", "maxValue", "size", "placeholder", "changeOnBlur", "tabIndex", "readOnly", "formatThousands"],
+  _excluded2 = ["onFocus", "onBlur", "onChange", "readOnly", "formatThousands", "value", "step", "onKeyDown"];
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -46597,7 +46603,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
-var Number = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (_ref, ref) {
+var _Number = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
     onBlur = _ref.onBlur,
     value = _ref.value,
@@ -46612,12 +46618,13 @@ var Number = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRe
     changeOnBlur = _ref$changeOnBlur === void 0 ? true : _ref$changeOnBlur,
     tabIndex = _ref.tabIndex,
     readOnly = _ref.readOnly,
+    formatThousands = _ref.formatThousands,
     rest = _objectWithoutProperties(_ref, _excluded);
   var handleChange = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
     var v = e.target.value;
     if (v != '') v = +v;
     onChange === null || onChange === void 0 || onChange(v, e);
-  }, [onChange, minValue, maxValue]);
+  }, [onChange]);
   var handleBlur = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
     onBlur === null || onBlur === void 0 || onBlur(e);
     if (!changeOnBlur) return;
@@ -46636,7 +46643,8 @@ var Number = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRe
       max: maxValue,
       tabIndex: tabIndex,
       readOnly: readOnly,
-      required: rest.required
+      required: rest.required,
+      formatThousands: formatThousands
     },
     Field: NumberField,
     value: value,
@@ -46645,8 +46653,9 @@ var Number = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRe
     placeholder: t(placeholder)
   }));
 });
-Number.displayName = 'Number';
-Number.propTypes = {
+
+_Number.displayName = 'Number';
+_Number.propTypes = {
   value: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_1___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number)]),
   step: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
   minValue: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
@@ -46676,48 +46685,141 @@ Number.propTypes = {
   size: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['xs', 'sm', 'md', 'lg']),
   changeOnBlur: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
   tabIndex: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().number),
-  readOnly: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
+  readOnly: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  formatThousands: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
+};
+var formatNumber = function formatNumber(val) {
+  if (val === '' || val === null || val === undefined || isNaN(val)) return '';
+  return window.Number(val).toLocaleString();
+};
+var unformatNumber = function unformatNumber(val) {
+  if (typeof val == 'string') return val.replace(/,/g, '');
+  return val;
 };
 var NumberField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().forwardRef(function (props, ref) {
   var onFocus = props.onFocus,
     onBlur = props.onBlur,
     onChange = props.onChange,
     readOnly = props.readOnly,
+    _props$formatThousand = props.formatThousands,
+    formatThousands = _props$formatThousand === void 0 ? false : _props$formatThousand,
+    value = props.value,
+    step = props.step,
+    onKeyDown = props.onKeyDown,
     rest = _objectWithoutProperties(props, _excluded2);
   var inputRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(function () {
+      return formatThousands && value != null ? formatNumber(value) : value;
+    }),
     _useState2 = _slicedToArray(_useState, 2),
-    focused = _useState2[0],
-    setFocused = _useState2[1];
+    displayValue = _useState2[0],
+    setDisplayValue = _useState2[1];
+  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var handleChange = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (evt) {
+    var raw = unformatNumber(evt.target.value);
+    if (formatThousands) setDisplayValue(formatNumber(raw));else setDisplayValue(evt.target.value);
+    onChange === null || onChange === void 0 || onChange(_objectSpread(_objectSpread({}, evt), {}, {
+      target: _objectSpread(_objectSpread({}, evt.target), {}, {
+        value: raw
+      })
+    }));
+  }, [onChange]);
   var handleFocus = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (evt) {
     setFocused(true);
     onFocus === null || onFocus === void 0 || onFocus(evt);
-  }, [onFocus]);
+  }, [onFocus, formatThousands, displayValue]);
   var handleBlur = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (evt) {
     setFocused(false);
     onBlur === null || onBlur === void 0 || onBlur(evt);
-  }, [onBlur]);
+  }, [onBlur, formatThousands, displayValue]);
   var stepUp = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
-    inputRef.current.stepUp();
-    onChange === null || onChange === void 0 || onChange({
-      target: inputRef.current
-    });
-  }, [onChange]);
+    if (formatThousands) {
+      var raw = window.Number(unformatNumber(displayValue));
+      var newValue = raw + step;
+      setDisplayValue(formatNumber(newValue));
+      onChange === null || onChange === void 0 || onChange({
+        target: {
+          value: newValue
+        }
+      });
+    } else {
+      inputRef.current.stepUp();
+      handleChange === null || handleChange === void 0 || handleChange({
+        target: inputRef.current
+      });
+    }
+  }, [formatThousands, displayValue, step, handleChange]);
   var stepDown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
-    inputRef.current.stepDown();
-    onChange === null || onChange === void 0 || onChange({
-      target: inputRef.current
-    });
-  }, [onChange]);
+    if (formatThousands) {
+      var raw = window.Number(unformatNumber(displayValue));
+      var newValue = raw - step;
+      setDisplayValue(formatNumber(newValue));
+      onChange === null || onChange === void 0 || onChange({
+        target: {
+          value: newValue
+        }
+      });
+    } else {
+      inputRef.current.stepDown();
+      handleChange === null || handleChange === void 0 || handleChange({
+        target: inputRef.current
+      });
+    }
+  }, [formatThousands, displayValue, step, handleChange]);
   var onMouseDown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (evt) {
     evt.preventDefault();
   }, []);
+  var handleKeyDown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+    if (!formatThousands) {
+      onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+      return;
+    }
+    var allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End'];
+    var isCtrlCmd = e.ctrlKey || e.metaKey;
+    // Allow: Ctrl/Cmd + C/V/X/A
+    if (isCtrlCmd && ['a', 'c', 'v', 'x'].includes(e.key.toLowerCase())) return;
+    var isNumber = /^[0-9]$/.test(e.key);
+    var isComma = e.key == ',';
+    if (!isNumber && !isComma && !allowedKeys.includes(e.key)) e.preventDefault();
+    if (e.key == 'ArrowUp') stepUp();else if (e.key == 'ArrowDown') stepDown();
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+  }, [stepDown, stepUp, formatThousands]);
+  var handlePaste = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+    if (!formatThousands) return;
+    var pasted = e.clipboardData.getData('text');
+    var cleaned = pasted.replace(/[^\d,]/g, '');
+    e.preventDefault();
+    var input = e.target;
+    var start = input.selectionStart;
+    var end = input.selectionEnd;
+    var newValue = input.value.slice(0, start) + cleaned + input.value.slice(end);
+    var newVal = unformatNumber(newValue);
+    setDisplayValue(formatNumber(newVal));
+    onChange === null || onChange === void 0 || onChange({
+      target: {
+        value: newVal
+      }
+    });
+  }, [formatThousands, onChange]);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    if (!focused) {
+      setDisplayValue(formatThousands && value != null ? formatNumber(value) : value);
+    }
+  }, [value, formatThousands, focused]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(NumberFieldWrapper, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(NumberInput, _extends({
     ref: (0,_util__WEBPACK_IMPORTED_MODULE_6__.mergeRefs)(inputRef, ref),
     onFocus: handleFocus,
     onBlur: handleBlur,
-    onChange: onChange,
-    readOnly: readOnly
+    onChange: handleChange,
+    readOnly: readOnly,
+    value: displayValue,
+    $formatThousands: formatThousands,
+    step: step,
+    onKeyDown: handleKeyDown,
+    onPaste: handlePaste
   }, rest)), focused && !readOnly && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Buttons, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "up",
     onClick: stepUp,
@@ -46745,33 +46847,37 @@ var NumberFieldWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2___default(
   displayName: "NumberFieldWrapper",
   componentId: "sc-13mfzjc-0"
 })(["flex-grow:1;display:inline-flex;"]);
-var NumberInput = styled_components__WEBPACK_IMPORTED_MODULE_2___default().input.attrs({
-  type: 'number',
-  pattern: '[0-9.]'
+var NumberInput = styled_components__WEBPACK_IMPORTED_MODULE_2___default().input.attrs(function (_ref2) {
+  var $formatThousands = _ref2.$formatThousands;
+  return {
+    type: $formatThousands ? 'text' : 'number',
+    pattern: '[0-9.]',
+    inputMode: 'numeric'
+  };
 }).withConfig({
   displayName: "NumberInput",
   componentId: "sc-13mfzjc-1"
-})(["padding:0;outline:none;border:0;width:100%;color:inherit;background:inherit;::placeholder{color:", ";}&:focus{margin-right:21px;}appearance:textfield;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;}"], function (_ref2) {
-  var color = _ref2.theme.color;
+})(["padding:0;outline:none;border:0;width:100%;color:inherit;background:inherit;::placeholder{color:", ";}&:focus{margin-right:21px;}appearance:textfield;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;}"], function (_ref3) {
+  var color = _ref3.theme.color;
   return color.text_disabled;
 });
 var Buttons = styled_components__WEBPACK_IMPORTED_MODULE_2___default().div.withConfig({
   displayName: "Buttons",
   componentId: "sc-13mfzjc-2"
-})(["position:absolute;top:0;right:0;display:flex;flex-direction:column;border-top-right-radius:4px;border-bottom-right-radius:4px;height:100%;div[role=\"button\"]{box-sizing:border-box;min-height:0;height:50%;background:", ";border-left:1px solid ", ";padding:2px 4px;display:flex;align-items:center;cursor:pointer;&.up{border-top-right-radius:4px;}&.down{border-bottom-right-radius:4px;border-top:1px solid ", ";}&:hover{background:", ";svg{color:", ";}}}"], function (_ref3) {
-  var color = _ref3.theme.color;
-  return color.bg;
-}, function (_ref4) {
+})(["position:absolute;top:0;right:0;display:flex;flex-direction:column;border-top-right-radius:4px;border-bottom-right-radius:4px;height:100%;div[role=\"button\"]{box-sizing:border-box;min-height:0;height:50%;background:", ";border-left:1px solid ", ";padding:2px 4px;display:flex;align-items:center;cursor:pointer;&.up{border-top-right-radius:4px;}&.down{border-bottom-right-radius:4px;border-top:1px solid ", ";}&:hover{background:", ";svg{color:", ";}}}"], function (_ref4) {
   var color = _ref4.theme.color;
-  return color.border;
+  return color.bg;
 }, function (_ref5) {
   var color = _ref5.theme.color;
   return color.border;
 }, function (_ref6) {
   var color = _ref6.theme.color;
-  return color.bg_fill_secondary;
+  return color.border;
 }, function (_ref7) {
   var color = _ref7.theme.color;
+  return color.bg_fill_secondary;
+}, function (_ref8) {
+  var color = _ref8.theme.color;
   return color.icon_accent;
 });