@xqmsg/ui-core 0.26.2 → 0.28.1

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';
@@ -195,7 +195,9 @@ var Banner = function Banner(_ref) {
     buttonText = _ref.buttonText,
     onClick = _ref.onClick,
     _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'expanded' : _ref$type;
+    type = _ref$type === void 0 ? 'expanded' : _ref$type,
+    _ref$centered = _ref.centered,
+    centered = _ref$centered === void 0 ? false : _ref$centered;
   var Icon = useMemo(function () {
     switch (variant) {
       case 'error':
@@ -220,16 +222,20 @@ var Banner = function Banner(_ref) {
   }, [variant]);
   return /*#__PURE__*/React__default.createElement(Alert$1, {
     variant: variant,
-    borderRadius: "4px"
+    borderRadius: "4px",
+    justifyContent: centered ? 'center' : undefined
   }, /*#__PURE__*/React__default.createElement(AlertDescription, null, /*#__PURE__*/React__default.createElement(Flex, {
-    flexDirection: type === 'condensed' ? 'row' : 'column',
-    alignItems: type === 'condensed' ? 'center' : '',
+    flexDirection: centered || type === 'condensed' ? 'row' : 'column',
+    alignItems: centered || type === 'condensed' ? 'center' : '',
+    justifyContent: centered ? 'center' : undefined,
     minHeight: "26px"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    pr: "8px"
+    pr: "8px",
+    pt: !centered && type !== 'condensed' ? '8px' : 0
   }, Icon), /*#__PURE__*/React__default.createElement(Box, {
-    flexGrow: "1",
-    pt: type === 'condensed' ? 0 : '8px'
+    flexGrow: centered ? undefined : '1',
+    pt: !centered && type !== 'condensed' ? '8px' : 0,
+    textAlign: centered ? 'center' : 'left'
   }, message), onClick && buttonText && /*#__PURE__*/React__default.createElement(Flex, {
     ml: type === 'condensed' ? 'auto' : '',
     pt: type === 'condensed' ? 0 : '8px',
@@ -1464,7 +1470,8 @@ var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     });
     setLocalOptions(function (prevLocalOptions) {
       return [].concat(prevLocalOptions, [option]).sort(function (a, b) {
-        return a.sortValue - b.sortValue;
+        var _a$sortValue, _b$sortValue;
+        return ((_a$sortValue = a.sortValue) != null ? _a$sortValue : 0) - ((_b$sortValue = b.sortValue) != null ? _b$sortValue : 0);
       });
     });
     setLocalValues(function (prevLocalValues) {
@@ -1631,6 +1638,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.
  */
@@ -2051,7 +2121,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':
@@ -2075,6 +2149,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 : ''),
@@ -5041,6 +5140,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,