design-react-kit 5.0.0-5 → 5.0.0-7

package/dist/types/Input/Input.d.ts

@@ -1,6 +1,6 @@
 import React, { InputHTMLAttributes, ElementType, Ref, ReactNode } from 'react';
 import type { CSSModule } from 'reactstrap/types/lib/utils';
-declare type InputType = 'text' | 'email' | 'select' | 'file' | 'radio' | 'checkbox' | 'textarea' | 'button' | 'reset' | 'submit' | 'date' | 'datetime-local' | 'hidden' | 'image' | 'month' | 'number' | 'range' | 'search' | 'tel' | 'url' | 'week' | 'password' | 'datetime' | 'time' | 'color';
+declare type InputType = 'text' | 'email' | 'select' | 'file' | 'radio' | 'checkbox' | 'textarea' | 'button' | 'reset' | 'submit' | 'date' | 'datetime-local' | 'hidden' | 'image' | 'month' | 'number' | 'range' | 'search' | 'tel' | 'url' | 'week' | 'password' | 'datetime' | 'time' | 'color' | 'adaptive' | 'currency' | 'percentage';
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Il tipo specifico di input da utilizzare. Il valore di default è `text`. */
     type?: InputType;
@@ -9,6 +9,10 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     size?: number;
     /** Etichetta del campo Input. */
     label?: string | ReactNode;
+    /** Etichetta del pulsante incremento. */
+    incrementLabel?: string | ReactNode;
+    /** Etichetta del pulsante decremento. */
+    decrementLabel?: string | ReactNode;
     /** Testo di esempio da utilizzare per il campo. */
     placeholder?: string;
     /** Testo di validazione per l'elemento del moduleo form. */
@@ -30,6 +34,8 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     plaintext?: boolean;
     /** Utilizzare per mostrare un elemento addon a fianco (prima o dopo) il campo input all'interno del componente */
     addon?: boolean;
+    /** Utilizzare per mostrare un elemento un simbolo attivando la proprietà addon nel campo input all'interno del componente */
+    addonText?: string;
     /** Oggetto contenente la nuova mappatura per le classi CSS. */
     cssModule?: CSSModule;
     /** Classi aggiuntive da usare per il wrapper del componente Input */
@@ -57,5 +63,5 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     noWrapper?: boolean;
     testId?: string;
 }
-export declare const Input: ({ id, className, cssModule, type, state, tag, addon, static: staticInput, plaintext, innerRef, label, validationText, infoText, placeholder, normalized, value, wrapperClass: originalWrapperClassOld, wrapperClassName: originalWrapperClass, size, testId, noWrapper, ...attributes }: InputProps) => React.JSX.Element;
+export declare const Input: ({ id, className, cssModule, type, state, tag, addon, addonText, static: staticInput, plaintext, innerRef, label, incrementLabel, decrementLabel, validationText, infoText, placeholder, normalized, value, wrapperClass: originalWrapperClassOld, wrapperClassName: originalWrapperClass, size, testId, noWrapper, ...attributes }: InputProps) => React.JSX.Element;
 export {};

package/dist/types/Input/InputContainer.d.ts

@@ -2,6 +2,7 @@ import { FC, HTMLAttributes, ReactNode } from 'react';
 export interface InputContainerProps extends HTMLAttributes<HTMLElement> {
     wrapperClass: string;
     activeClass: string;
+    extraLabelClass: string;
     validationTextClass: string;
     label: string | ReactNode | undefined;
     validationText: string | undefined;

package/dist/types/Input/utils.d.ts

@@ -20,6 +20,7 @@ export declare function getClasses(className: string | undefined, type: string,
     wrapperClass: string;
     inputClasses: string;
     activeClass: string;
+    extraLabelClass: string;
     validationTextClass: string;
 };
 export declare function useFocus<T extends HTMLInputElement | HTMLTextAreaElement>({ onFocus, onBlur }: {

package/dist/types/index.d.ts

@@ -31,6 +31,7 @@ export { CardTagsHeader } from './Card/CardTagsHeader';
 export { CardSignature } from './Card/CardSignature';
 export { CardFooterCTA } from './Card/CardFooterCTA';
 export { CardReadMore } from './Card/CardReadMore';
+export { Collapse } from './Collapse/Collapse';
 export { GridItem, GridItemText, GridItemTextWrapper, GridList, GridRow } from './Grid/index';
 export { Header } from './Header/Header';
 export { Headers } from './Header/Headers';

package/dist/types/index.js

@@ -1766,6 +1766,64 @@ const CardReadMore = _ref => {
   }));
 };
 
+const Collapse = _ref => {
+  let {
+    header = false,
+    className,
+    navbar,
+    megamenu,
+    children,
+    isOpen = false,
+    onOverlayClick,
+    cssModule,
+    testId,
+    ...attributes
+  } = _ref;
+  const newCssModule = {
+    'navbar-collapse': 'navbar-collapsable',
+    ...cssModule
+  };
+  if (megamenu || navbar || header) {
+    const classes = classNames(className, 'navbar-collapse', {
+      expanded: isOpen
+    });
+    const style = {
+      display: isOpen ? 'block' : 'none'
+    };
+    return React__default.createElement(reactstrap.Collapse, Object.assign({
+      className: classes,
+      cssModule: newCssModule,
+      navbar: navbar,
+      style: style,
+      "data-testid": testId
+    }, attributes), React__default.createElement("div", {
+      className: 'overlay',
+      style: style,
+      onClick: onOverlayClick
+    }), React__default.createElement("div", {
+      className: 'close-div visually-hidden'
+    }, React__default.createElement("button", {
+      className: 'btn close-menu',
+      type: 'button'
+    }, React__default.createElement("span", {
+      className: 'it-close'
+    }), "close")), megamenu ? React__default.createElement("div", {
+      className: 'menu-wrapper'
+    }, children) : React__default.createElement(React__default.Fragment, null, children));
+  }
+  const classes = classNames(className, {
+    'link-list-wrapper': header
+  });
+  return React__default.createElement(reactstrap.Collapse, Object.assign({
+    className: classes,
+    cssModule: newCssModule
+  }, attributes, {
+    navbar: navbar,
+    isOpen: isOpen,
+    "data-testid": testId
+  }), children);
+};
+
 const GridItem = _ref => {
   let {
     tag: Tag = 'div',
@@ -2193,6 +2251,7 @@ const InputContainer = _ref => {
     infoText,
     testId,
     activeClass,
+    extraLabelClass,
     label,
     validationTextClass,
     validationText,
@@ -2202,10 +2261,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", {
@@ -2305,10 +2364,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
   };
 }
@@ -2344,10 +2407,13 @@ const Input = _ref => {
     state,
     tag,
     addon,
+    addonText,
     static: staticInput,
     plaintext,
     innerRef,
     label,
+    incrementLabel,
+    decrementLabel,
     validationText,
     infoText,
     placeholder,
@@ -2374,6 +2440,18 @@ const Input = _ref => {
     setHidden(!isHidden);
     toggleIcon(!hasIcon);
   }, [hasIcon, isHidden]);
+  const divResizeRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const [width, setWidth] = React.useState('100');
+  React.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,
@@ -2386,6 +2464,7 @@ const Input = _ref => {
     staticInput,
     type
   });
+  addon = addonText != null ? true : addon;
   const formControlClass = getFormControlClass({
     plaintext,
     staticInput,
@@ -2425,6 +2504,7 @@ const Input = _ref => {
   // Styling
   const {
     activeClass,
+    extraLabelClass,
     validationTextClass,
     inputClasses,
     wrapperClass
@@ -2457,6 +2537,7 @@ const Input = _ref => {
     infoId,
     infoText,
     activeClass,
+    extraLabelClass,
     label,
     validationTextClass,
     validationText,
@@ -2470,6 +2551,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,
@@ -2559,6 +2695,7 @@ const TextArea = _ref => {
   // Styling
   const {
     activeClass,
+    extraLabelClass,
     validationTextClass,
     inputClasses,
     wrapperClass
@@ -2588,6 +2725,7 @@ const TextArea = _ref => {
     infoId,
     infoText,
     activeClass,
+    extraLabelClass,
     label,
     validationTextClass,
     validationText,
@@ -2739,64 +2877,6 @@ const LinkListItem = _ref => {
   }, handlers), children));
 };
 
-const Collapse = _ref => {
-  let {
-    header = false,
-    className,
-    navbar,
-    megamenu,
-    children,
-    isOpen = false,
-    onOverlayClick,
-    cssModule,
-    testId,
-    ...attributes
-  } = _ref;
-  const newCssModule = {
-    'navbar-collapse': 'navbar-collapsable',
-    ...cssModule
-  };
-  if (megamenu || navbar || header) {
-    const classes = classNames(className, 'navbar-collapse', {
-      expanded: isOpen
-    });
-    const style = {
-      display: isOpen ? 'block' : 'none'
-    };
-    return React__default.createElement(reactstrap.Collapse, Object.assign({
-      className: classes,
-      cssModule: newCssModule,
-      navbar: navbar,
-      style: style,
-      "data-testid": testId
-    }, attributes), React__default.createElement("div", {
-      className: 'overlay',
-      style: style,
-      onClick: onOverlayClick
-    }), React__default.createElement("div", {
-      className: 'close-div visually-hidden'
-    }, React__default.createElement("button", {
-      className: 'btn close-menu',
-      type: 'button'
-    }, React__default.createElement("span", {
-      className: 'it-close'
-    }), "close")), megamenu ? React__default.createElement("div", {
-      className: 'menu-wrapper'
-    }, children) : React__default.createElement(React__default.Fragment, null, children));
-  }
-  const classes = classNames(className, {
-    'link-list-wrapper': header
-  });
-  return React__default.createElement(reactstrap.Collapse, Object.assign({
-    className: classes,
-    cssModule: newCssModule
-  }, attributes, {
-    navbar: navbar,
-    isOpen: isOpen,
-    "data-testid": testId
-  }), children);
-};
-
 const Nav = _ref => {
   let {
     className,
@@ -4496,6 +4576,7 @@ exports.CardText = CardText;
 exports.CardTitle = CardTitle;
 exports.Chip = Chip;
 exports.ChipLabel = ChipLabel;
+exports.Collapse = Collapse;
 exports.Dimmer = Dimmer;
 exports.DimmerButtons = DimmerButtons;
 exports.FontLoader = FontLoader;