@xqmsg/ui-core 0.26.1 → 0.27.0

package/dist/ui-core.esm.js

@@ -1,5 +1,5 @@
 import React__default, { memo, forwardRef, createElement, useMemo, useCallback, Children, useEffect, useRef, useState } from 'react';
-import { Box, Button as Button$2, Alert as Alert$1, AlertDescription, Flex, Text as Text$2, Spinner, Checkbox as Checkbox$1, InputGroup, Input as Input$2, RadioGroup, Radio, InputRightElement, Textarea as Textarea$1, useOutsideClick, Switch as Switch$1, FormLabel as FormLabel$1, Popover as Popover$1, PopoverTrigger, PopoverContent, PopoverArrow, PopoverBody, FormControl, FormErrorMessage, FormHelperText, SimpleGrid, Image as Image$1, Select as Select$1, useMediaQuery, Grid, GridItem, IconButton, Collapse, Modal as Modal$2, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, Link as Link$2, Table as Table$1, Tbody, Tr, Td, TableContainer, Thead, Th, Tabs as Tabs$1, TabList, Tab, createMultiStyleConfigHelpers, defineStyle as defineStyle$1, extendTheme, useToast as useToast$1 } from '@chakra-ui/react';
+import { Box, Button as Button$2, Alert as Alert$1, AlertDescription, Flex, Text as Text$2, Spinner, Checkbox as Checkbox$1, InputGroup, Input as Input$2, RadioGroup, Radio, InputRightElement, Textarea as Textarea$1, NumberInput, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, useOutsideClick, Switch as Switch$1, FormLabel as FormLabel$1, Popover as Popover$1, PopoverTrigger, PopoverContent, PopoverArrow, PopoverBody, FormControl, FormErrorMessage, FormHelperText, SimpleGrid, Image as Image$1, Select as Select$1, useMediaQuery, Grid, GridItem, IconButton, Collapse, Modal as Modal$2, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, Link as Link$2, Table as Table$1, Tbody, Tr, Td, TableContainer, Thead, Th, Tabs as Tabs$1, TabList, Tab, createMultiStyleConfigHelpers, defineStyle as defineStyle$1, extendTheme, useToast as useToast$1 } from '@chakra-ui/react';
 import { FormProvider, useWatch, Controller } from 'react-hook-form';
 import { truncate } from 'lodash-es';
 import { QuestionIcon, CloseIcon, HamburgerIcon } from '@chakra-ui/icons';
@@ -812,6 +812,7 @@ var _excluded = ["type", "isRequired", "rightElement", "leftElement", "defaultVa
  * A functional React component utilized to render the `StackedInput` component.
  */
 var StackedInput = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
+  var _props$placeholder;
   var _ref2$type = _ref2.type,
     type = _ref2$type === void 0 ? 'text' : _ref2$type,
     isRequired = _ref2.isRequired,
@@ -824,7 +825,7 @@ var StackedInput = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref)
   var isMobile = variant === 'mobile';
   var placeholder = isMobile && label ? label : undefined;
   return /*#__PURE__*/React__default.createElement(InputGroup, null, leftElement && leftElement, label, /*#__PURE__*/React__default.createElement(Input$2, Object.assign({}, props, {
-    placeholder: placeholder,
+    placeholder: (_props$placeholder = props.placeholder) != null ? _props$placeholder : placeholder,
     type: type,
     isRequired: isRequired,
     ref: _ref,
@@ -1630,6 +1631,69 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   })));
 });
 
+/**
+ * A functional React component that renders Chakra UI's `NumberInput` wrapped
+ * in an `InputGroup`, following the same pattern as `StackedInput`.
+ */
+var StackedNumberInput = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var name = _ref.name,
+    id = _ref.id,
+    placeholder = _ref.placeholder,
+    isRequired = _ref.isRequired,
+    isInvalid = _ref.isInvalid,
+    disabled = _ref.disabled,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    min = _ref.min,
+    max = _ref.max,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    _ref$precision = _ref.precision,
+    precision = _ref$precision === void 0 ? 0 : _ref$precision,
+    _ref$showStepper = _ref.showStepper,
+    showStepper = _ref$showStepper === void 0 ? false : _ref$showStepper,
+    variant = _ref.variant,
+    className = _ref.className,
+    label = _ref.label,
+    leftElement = _ref.leftElement,
+    rightElement = _ref.rightElement,
+    _onChange = _ref.onChange,
+    onBlur = _ref.onBlur;
+  var isMobile = variant === 'mobile';
+  var resolvedPlaceholder = isMobile && label ? label : placeholder;
+  var inputValue = typeof value === 'string' || typeof value === 'number' ? value : undefined;
+  var normalizedValue = precision === 0 && inputValue !== undefined && inputValue !== '' ? Number.isNaN(Number(inputValue)) ? inputValue : String(Math.round(Number(inputValue))) : inputValue;
+  return /*#__PURE__*/React__default.createElement(InputGroup, null, leftElement && leftElement, label && !isMobile && label, /*#__PURE__*/React__default.createElement(NumberInput, {
+    id: id,
+    name: name,
+    isRequired: isRequired,
+    isInvalid: isInvalid,
+    isDisabled: disabled,
+    value: normalizedValue,
+    defaultValue: defaultValue,
+    min: min,
+    max: max,
+    step: step,
+    precision: precision,
+    onChange: function onChange(_, valueAsNumber) {
+      return _onChange == null ? void 0 : _onChange({
+        target: {
+          name: name,
+          value: Number.isNaN(valueAsNumber) ? '' : precision === 0 ? String(Math.round(valueAsNumber)) : String(valueAsNumber)
+        }
+      });
+    },
+    className: className,
+    variant: variant === 'mobile' ? 'mobile' : 'default',
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(NumberInputField, {
+    ref: ref,
+    placeholder: resolvedPlaceholder,
+    onBlur: onBlur
+  }), showStepper && /*#__PURE__*/React__default.createElement(NumberInputStepper, null, /*#__PURE__*/React__default.createElement(NumberIncrementStepper, null), /*#__PURE__*/React__default.createElement(NumberDecrementStepper, null))), rightElement && rightElement);
+});
+StackedNumberInput.displayName = 'StackedNumberInput';
+
 /**
  * A functional React component utilized to render the `StackedPilledInput` component.
  */
@@ -2050,7 +2114,11 @@ function Input(_ref) {
     truncatePillLength = _ref.truncatePillLength,
     searchable = _ref.searchable,
     _ref$overflowMode = _ref.overflowMode,
-    overflowMode = _ref$overflowMode === void 0 ? 'scroll' : _ref$overflowMode;
+    overflowMode = _ref$overflowMode === void 0 ? 'scroll' : _ref$overflowMode,
+    min = _ref.min,
+    max = _ref.max,
+    step = _ref.step,
+    precision = _ref.precision;
   function selectedInputField(onChange, onBlur, ref, value) {
     switch (inputType) {
       case 'text':
@@ -2074,6 +2142,31 @@ function Input(_ref) {
           variant: variant,
           label: label
         });
+      case 'number':
+        return /*#__PURE__*/React__default.createElement(StackedNumberInput, {
+          className: "input-" + inputType + " " + (className != null ? className : ''),
+          "aria-label": ariaLabel,
+          name: name,
+          id: name,
+          placeholder: placeholder,
+          maxLength: maxLength,
+          isRequired: isRequired,
+          isInvalid: isInvalid,
+          onChange: onChange,
+          onBlur: onBlur,
+          ref: ref,
+          rightElement: rightElement,
+          leftElement: leftElement,
+          disabled: disabled,
+          defaultValue: defaultValue,
+          value: value,
+          variant: variant,
+          label: label,
+          min: min,
+          max: max,
+          step: step,
+          precision: precision
+        });
       case 'radio':
         return /*#__PURE__*/React__default.createElement(StackedRadioGroup, {
           className: "input-" + inputType + " " + (className != null ? className : ''),
@@ -5040,6 +5133,7 @@ var customXQChakraTheme = /*#__PURE__*/extendTheme( /*#__PURE__*/_extends$6({
     FormError: FormError,
     FormLabel: FormLabel,
     Input: Input$1,
+    NumberInput: Input$1,
     Link: Link$1,
     Menu: Menu$1,
     Modal: Modal$1,