design-react-kit 5.0.0-6 → 5.0.0-8

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import { Alert as Alert$1, Button as Button$1, Badge as Badge$1, Breadcrumb as Breadcrumb$1, Card as Card$1, CardBody as CardBody$1, CardTitle as CardTitle$1, CardText as CardText$1, Collapse as Collapse$1, NavbarBrand, Navbar, Container, Row, Col, NavbarToggler, Nav as Nav$1, UncontrolledDropdown, DropdownToggle, DropdownMenu, Modal as Modal$1, ModalBody as ModalBody$1, ModalFooter as ModalFooter$1, FormGroup, Label, Input as Input$1, Dropdown } from 'reactstrap';
 export { BreadcrumbItem, ButtonDropdown, ButtonGroup, ButtonToolbar, CardColumns, CardDeck, CardFooter, CardGroup, CardHeader, CardImg, CardImgOverlay, CardLink, CardSubtitle, Col, Container, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Fade, Form, FormFeedback, FormGroup, FormText, InputGroup, InputGroupText, Label, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, Media, NavItem, NavLink, Navbar, NavbarBrand, NavbarToggler, PaginationItem as PagerItem, PaginationLink as PagerLink, Popover, PopoverBody, PopoverHeader, Row, TabContent, TabPane, Table, Tooltip, UncontrolledAlert, UncontrolledButtonDropdown, UncontrolledCollapse, UncontrolledDropdown, UncontrolledTooltip, Util } from 'reactstrap';
 export { useNavScroll } from 'react-use-navscroll';
-import React__default, { useState, useCallback, useEffect, useLayoutEffect, createContext, useContext, Fragment } from 'react';
+import React__default, { useState, useCallback, useEffect, useLayoutEffect, createContext, useContext, useRef, Fragment } from 'react';
 import classNames from 'classnames';
 import { Transition } from 'react-transition-group';
 import { StickyProvider, Sticky } from 'react-stickup';
@@ -2245,6 +2245,7 @@ const InputContainer = _ref => {
     infoText,
     testId,
     activeClass,
+    extraLabelClass,
     label,
     validationTextClass,
     validationText,
@@ -2254,10 +2255,10 @@ const InputContainer = _ref => {
   return React__default.createElement("div", {
     className: wrapperClass,
     "data-testid": testId
-  }, children, React__default.createElement("label", {
+  }, React__default.createElement("label", {
     htmlFor: id,
-    className: activeClass
-  }, label), infoText && React__default.createElement("small", {
+    className: activeClass + ' ' + extraLabelClass
+  }, label), children, infoText && React__default.createElement("small", {
     id: infoId,
     className: 'form-text'
   }, infoText), React__default.createElement("div", {
@@ -2357,10 +2358,14 @@ function getClasses(className, type, _ref4, cssModule) {
   const activeClass = mapToCssModules(classNames({
     active: isFocused || placeholder || value || ['date', 'time'].includes(type)
   }), cssModule);
+  const extraLabelClass = mapToCssModules(classNames({
+    'input-number-label': ['number', 'currency', 'adaptive', 'percentage'].includes(type)
+  }));
   return {
     wrapperClass,
     inputClasses,
     activeClass,
+    extraLabelClass,
     validationTextClass
   };
 }
@@ -2396,10 +2401,13 @@ const Input = _ref => {
     state,
     tag,
     addon,
+    addonText,
     static: staticInput,
     plaintext,
     innerRef,
     label,
+    incrementLabel,
+    decrementLabel,
     validationText,
     infoText,
     placeholder,
@@ -2426,6 +2434,18 @@ const Input = _ref => {
     setHidden(!isHidden);
     toggleIcon(!hasIcon);
   }, [hasIcon, isHidden]);
+  const divResizeRef = useRef(null);
+  const inputRef = useRef(null);
+  const [width, setWidth] = useState('100');
+  useEffect(() => {
+    if (divResizeRef.current != null && divResizeRef.current.classList.contains('input-number-adaptive')) {
+      if (!value) {
+        setWidth(`calc(70px)`);
+      } else {
+        setWidth(`calc(70px + ${`${value}`.length}ch)`);
+      }
+    }
+  }, [value]);
   let {
     bsSize,
     valid,
@@ -2438,6 +2458,7 @@ const Input = _ref => {
     staticInput,
     type
   });
+  addon = addonText != null ? true : addon;
   const formControlClass = getFormControlClass({
     plaintext,
     staticInput,
@@ -2477,6 +2498,7 @@ const Input = _ref => {
   // Styling
   const {
     activeClass,
+    extraLabelClass,
     validationTextClass,
     inputClasses,
     wrapperClass
@@ -2509,6 +2531,7 @@ const Input = _ref => {
     infoId,
     infoText,
     activeClass,
+    extraLabelClass,
     label,
     validationTextClass,
     validationText,
@@ -2522,6 +2545,61 @@ const Input = _ref => {
       "data-testid": testId
     }));
   }
+  const clickIncrDecr = mode => {
+    var _inputRef$current, _inputRef$current2, _inputRef$current3, _inputRef$current4, _Object$getOwnPropert, _inputRef$current5;
+    var step = parseFloat((_inputRef$current = inputRef.current) != null && _inputRef$current.step ? inputRef.current.step : '1');
+    const min = parseFloat((_inputRef$current2 = inputRef.current) != null && _inputRef$current2.min ? inputRef.current.min : 'Nan');
+    const max = parseFloat((_inputRef$current3 = inputRef.current) != null && _inputRef$current3.max ? inputRef.current.max : 'Nan');
+    step = isNaN(step) ? 1 : step;
+    const newValue = parseFloat((_inputRef$current4 = inputRef.current) != null && _inputRef$current4.value ? inputRef.current.value : '0') + mode * step;
+    if (!isNaN(max) && newValue > max) {
+      return;
+    }
+    if (!isNaN(min) && newValue < min) {
+      return;
+    }
+    const nativeInputValueSetter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')) == null ? void 0 : _Object$getOwnPropert.set;
+    nativeInputValueSetter == null ? void 0 : nativeInputValueSetter.call(inputRef.current, `${newValue}`);
+    var ev2 = new Event('input', {
+      bubbles: true
+    });
+    (_inputRef$current5 = inputRef.current) == null ? void 0 : _inputRef$current5.dispatchEvent(ev2);
+  };
+  if (['currency', 'percentage', 'adaptive', 'number'].includes(type)) {
+    return React__default.createElement(InputContainer, Object.assign({}, containerProps), React__default.createElement("div", {
+      className: classNames({
+        'input-group': true,
+        'input-number': true,
+        disabled: rest.disabled,
+        'input-number-percentage': type == 'percentage',
+        'input-number-currency': type == 'currency',
+        'input-number-adaptive': type == 'adaptive'
+      }),
+      style: {
+        width
+      },
+      ref: divResizeRef
+    }, ['currency', 'percentage'].includes(type) && React__default.createElement("span", {
+      className: 'input-group-text fw-semibold'
+    }, addonText), React__default.createElement(Tag, Object.assign({}, rest, extraAttributes, sharedAttributes, {
+      className: inputClasses,
+      "data-testid": testId,
+      type: 'number',
+      ref: inputRef
+    })), React__default.createElement("span", {
+      className: 'input-group-text align-buttons flex-column'
+    }, React__default.createElement("button", {
+      className: 'input-number-add',
+      onClick: () => clickIncrDecr(1)
+    }, React__default.createElement("span", {
+      className: 'visually-hidden'
+    }, incrementLabel || '')), React__default.createElement("button", {
+      className: 'input-number-sub',
+      onClick: () => clickIncrDecr(-1)
+    }, React__default.createElement("span", {
+      className: 'visually-hidden'
+    }, decrementLabel || '')))));
+  }
   if (placeholder) {
     return React__default.createElement(InputContainer, Object.assign({}, containerProps), React__default.createElement(Tag, Object.assign({}, rest, extraAttributes, sharedAttributes, {
       className: inputClasses,
@@ -2611,6 +2689,7 @@ const TextArea = _ref => {
   // Styling
   const {
     activeClass,
+    extraLabelClass,
     validationTextClass,
     inputClasses,
     wrapperClass
@@ -2640,6 +2719,7 @@ const TextArea = _ref => {
     infoId,
     infoText,
     activeClass,
+    extraLabelClass,
     label,
     validationTextClass,
     validationText,