design-react-kit 5.0.0-1 → 5.0.0-3

package/dist/types/index.js

@@ -12,8 +12,6 @@ var classNames = _interopDefault(require('classnames'));
 var reactTransitionGroup = require('react-transition-group');
 var reactStickup = require('react-stickup');
 var isNumber = _interopDefault(require('is-number'));
-var SelectBase = require('react-select');
-var SelectBase__default = _interopDefault(SelectBase);
 var reactToastify = require('react-toastify');
 
 const defaultProps = {
@@ -370,6 +368,10 @@ const AvatarWrapper = _ref => {
 };
 
 const iconList = {
+  'it-android-square': true,
+  'it-android': true,
+  'it-apple-square': true,
+  'it-apple': true,
   'it-arrow-down-circle': true,
   'it-arrow-down-triangle': true,
   'it-arrow-down': true,
@@ -537,6 +539,22 @@ const iconList = {
 };
 const loadIcon = name => {
   switch (name) {
+    case 'it-android-square':
+      {
+        return new Promise(function (resolve) { resolve(require('./ItAndroidSquare-5b4d7841.js')); });
+      }
+    case 'it-android':
+      {
+        return new Promise(function (resolve) { resolve(require('./ItAndroid-0cd13b98.js')); });
+      }
+    case 'it-apple-square':
+      {
+        return new Promise(function (resolve) { resolve(require('./ItAppleSquare-cef0e636.js')); });
+      }
+    case 'it-apple':
+      {
+        return new Promise(function (resolve) { resolve(require('./ItApple-786323e6.js')); });
+      }
     case 'it-arrow-down-circle':
       {
         return new Promise(function (resolve) { resolve(require('./ItArrowDownCircle-33c31de3.js')); });
@@ -1131,11 +1149,11 @@ const loadIcon = name => {
       }
     case 'it-twitter-square':
       {
-        return new Promise(function (resolve) { resolve(require('./ItTwitterSquare-77589f0c.js')); });
+        return new Promise(function (resolve) { resolve(require('./ItTwitterSquare-79109f7a.js')); });
       }
     case 'it-twitter':
       {
-        return new Promise(function (resolve) { resolve(require('./ItTwitter-1dded12f.js')); });
+        return new Promise(function (resolve) { resolve(require('./ItTwitter-a9d5464e.js')); });
       }
     case 'it-unlocked':
       {
@@ -2230,11 +2248,12 @@ const InputContainer = _ref => {
   let {
     id,
     infoId,
+    infoText,
     testId,
     activeClass,
     label,
-    infoTextClass,
-    infoText,
+    validationTextClass,
+    validationText,
     wrapperClass,
     children
   } = _ref;
@@ -2244,10 +2263,12 @@ const InputContainer = _ref => {
   }, children, React__default.createElement("label", {
     htmlFor: id,
     className: activeClass
-  }, label), React__default.createElement("small", {
+  }, label), infoText && React__default.createElement("small", {
     id: infoId,
-    className: infoTextClass
-  }, infoText));
+    className: 'form-text'
+  }, infoText), React__default.createElement("div", {
+    className: validationTextClass
+  }, validationText));
 };
 
 function getFormControlClassInternal(_ref) {
@@ -2275,7 +2296,7 @@ function getFormControlClassInternal(_ref) {
 function getFormControlClass(props, cssModule) {
   return mapToCssModules(getFormControlClassInternal(props), cssModule);
 }
-function getInfoTextControlClass(_ref2, cssModule) {
+function getValidationTextControlClass(_ref2, cssModule) {
   let {
     invalid
   } = _ref2;
@@ -2302,7 +2323,7 @@ function getTag(_ref3) {
   }
   return 'input';
 }
-function getClasses(className, _ref4, cssModule) {
+function getClasses(className, type, _ref4, cssModule) {
   let {
     isFocused,
     valid,
@@ -2311,14 +2332,14 @@ function getClasses(className, _ref4, cssModule) {
     placeholder,
     value,
     label,
-    infoText,
+    validationText,
     normalized,
     inputPassword,
     formControlClass,
-    infoTextControlClass,
+    validationTextControlClass,
     originalWrapperClass
   } = _ref4;
-  const hasPlainCondition = placeholder || label || infoText;
+  const hasPlainCondition = placeholder || label || validationText;
   const baseCondition = hasPlainCondition && !normalized && !inputPassword;
   const passwordOnlyCondition = inputPassword && !hasPlainCondition && !normalized;
   const normalizedOnlyCondition = normalized && !hasPlainCondition && !inputPassword;
@@ -2328,10 +2349,10 @@ function getClasses(className, _ref4, cssModule) {
     [`form-control-${bsSize}`]: bsSize
   }, formControlClass), cssModule);
   const wrapperClass = mapToCssModules(classNames(className, originalWrapperClass, 'form-group'), cssModule);
-  const infoTextClass = mapToCssModules(classNames({
+  const validationTextClass = mapToCssModules(classNames({
     'valid-feedback': valid,
     'invalid-feedback form-feedback just-validate-error-label': invalid
-  }, infoTextControlClass), cssModule);
+  }, validationTextControlClass), cssModule);
   const inputClasses = mapToCssModules(classNames(classes, !baseCondition && {
     // we can model here only if stylings
     'form-control-plaintext': normalizedOnlyCondition,
@@ -2340,13 +2361,13 @@ function getClasses(className, _ref4, cssModule) {
     'focus--mouse': passwordOnlyCondition || normalizedOnlyCondition
   }), cssModule);
   const activeClass = mapToCssModules(classNames({
-    active: isFocused || placeholder || value
+    active: isFocused || placeholder || value || ['date', 'time'].includes(type)
   }), cssModule);
   return {
     wrapperClass,
     inputClasses,
     activeClass,
-    infoTextClass
+    validationTextClass
   };
 }
 function useFocus(_ref5) {
@@ -2377,7 +2398,7 @@ const Input = _ref => {
     id,
     className,
     cssModule,
-    type,
+    type = 'text',
     state,
     tag,
     addon,
@@ -2385,6 +2406,7 @@ const Input = _ref => {
     plaintext,
     innerRef,
     label,
+    validationText,
     infoText,
     placeholder,
     normalized,
@@ -2429,7 +2451,7 @@ const Input = _ref => {
     addon,
     normalized
   }, cssModule);
-  const infoTextControlClass = getInfoTextControlClass({
+  const validationTextControlClass = getValidationTextControlClass({
     valid,
     invalid
   }, cssModule);
@@ -2457,24 +2479,25 @@ const Input = _ref => {
     delete attributes.children;
   }
   const inputPassword = extraAttributes.type === 'password';
+  const indeterminateCheckboxInput = type === 'checkbox' && (className == null ? void 0 : className.includes('semi-checked'));
   // Styling
   const {
     activeClass,
-    infoTextClass,
+    validationTextClass,
     inputClasses,
     wrapperClass
-  } = getClasses(className, {
+  } = getClasses(className, type, {
     valid,
     invalid,
     bsSize,
     placeholder,
     value,
     label,
-    infoText,
+    validationText,
     normalized: Boolean(normalized),
     inputPassword,
     formControlClass,
-    infoTextControlClass,
+    validationTextControlClass,
     isFocused: isFocused,
     originalWrapperClass: originalWrapperClass || originalWrapperClassOld
   }, cssModule);
@@ -2490,10 +2513,11 @@ const Input = _ref => {
   const containerProps = {
     id,
     infoId,
+    infoText,
     activeClass,
     label,
-    infoTextClass,
-    infoText,
+    validationTextClass,
+    validationText,
     wrapperClass
   };
   if (noWrapper) {
@@ -2511,6 +2535,13 @@ const Input = _ref => {
       "data-testid": testId
     })));
   }
+  if (indeterminateCheckboxInput) {
+    return React__default.createElement(InputContainer, Object.assign({}, containerProps), React__default.createElement(Tag, Object.assign({}, rest, extraAttributes, sharedAttributes, {
+      className: inputClasses,
+      "data-testid": testId,
+      indeterminate: 'true'
+    })));
+  }
   if (inputPassword) {
     return React__default.createElement(InputContainer, Object.assign({}, containerProps), React__default.createElement(Tag, Object.assign({}, rest, extraAttributes, sharedAttributes, {
       type: isHidden ? 'password' : 'text',
@@ -2534,7 +2565,7 @@ const Input = _ref => {
       readOnly: true
     })));
   }
-  if (label || infoText) {
+  if (label || validationText) {
     return React__default.createElement(InputContainer, Object.assign({}, containerProps), React__default.createElement(Tag, Object.assign({}, rest, extraAttributes, sharedAttributes, {
       className: inputClasses,
       "data-testid": testId
@@ -2554,6 +2585,7 @@ const TextArea = _ref => {
     cssModule,
     innerRef,
     label,
+    validationText,
     infoText,
     placeholder,
     normalized,
@@ -2572,7 +2604,7 @@ const TextArea = _ref => {
     onFocus: attributes.onFocus,
     onBlur: attributes.onBlur
   });
-  const infoTextControlClass = getInfoTextControlClass({
+  const validationTextControlClass = getValidationTextControlClass({
     valid,
     invalid
   }, cssModule);
@@ -2585,18 +2617,18 @@ const TextArea = _ref => {
   // Styling
   const {
     activeClass,
-    infoTextClass,
+    validationTextClass,
     inputClasses,
     wrapperClass
-  } = getClasses(className, {
+  } = getClasses(className, 'textarea', {
     valid,
     invalid,
     placeholder,
     value,
     label,
-    infoText,
+    validationText,
     normalized: Boolean(normalized),
-    infoTextControlClass,
+    validationTextControlClass,
     isFocused,
     originalWrapperClass
   }, cssModule);
@@ -2612,10 +2644,11 @@ const TextArea = _ref => {
   const containerProps = {
     id,
     infoId,
+    infoText,
     activeClass,
     label,
-    infoTextClass,
-    infoText,
+    validationTextClass,
+    validationText,
     wrapperClass
   };
   if (placeholder) {
@@ -2632,7 +2665,7 @@ const TextArea = _ref => {
       "data-testid": testId
     })));
   }
-  if (label || infoText) {
+  if (label || validationText) {
     return React__default.createElement(InputContainer, Object.assign({}, containerProps), React__default.createElement("textarea", Object.assign({}, attributes, extraAttributes, sharedAttributes, {
       className: inputClasses,
       "data-testid": testId
@@ -3510,227 +3543,6 @@ const DimmerButtons = _ref => {
   }), children);
 };
 
-const addTime = (value, maxValue) => {
-  const currTime = Number(value);
-  return currTime >= maxValue ? value : (currTime + 1).toString();
-};
-const subtractTime = (value, minValue) => {
-  const currTime = Number(value);
-  return currTime <= minValue ? value : (currTime - 1).toString();
-};
-const formatTime = value => `0${value}`.substr(-2);
-const TimeInputContainer = _ref => {
-  let {
-    wrapperClass,
-    children,
-    label,
-    id,
-    infoText,
-    button,
-    infoTextClass,
-    invalid
-  } = _ref;
-  const infoId = id ? `${id}Description` : undefined;
-  const activeClass = 'active';
-  return React__default.createElement("div", {
-    className: classNames(wrapperClass)
-  }, React__default.createElement("div", {
-    className: 'input-group'
-  }, children, React__default.createElement("label", {
-    htmlFor: id,
-    className: classNames(activeClass, {
-      'error-label': invalid
-    })
-  }, label), React__default.createElement("div", {
-    id: infoId,
-    className: infoTextClass
-  }, infoText), React__default.createElement("div", {
-    className: 'input-group-append'
-  }, button)));
-};
-const TimeInput = _ref2 => {
-  let {
-    dark = false,
-    onBlur = noop,
-    label,
-    controlsLabel,
-    invalid = false,
-    value = '',
-    id,
-    placeholder,
-    srText,
-    hoursLabel,
-    minutesLabel,
-    increaseHoursLabel,
-    increaseMinutesLabel,
-    decreaseHoursLabel,
-    decreaseMinutesLabel,
-    testId,
-    ...attributes
-  } = _ref2;
-  const [initialHours, initialMinutes] = value.split(':');
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [hours, setHours] = React.useState(initialHours || '00');
-  const [minutes, setMinutes] = React.useState(initialMinutes || '00');
-  const [time, setTime] = React.useState(initialHours && initialMinutes ? `${initialHours}:${initialMinutes}` : '');
-  const [isFocused, toggleFocus] = React.useState(false);
-  const button = React__default.createElement("button", {
-    type: 'button',
-    className: 'btn-time',
-    onClick: () => {
-      setIsOpen(!isOpen);
-      if (isOpen) onBlur(time);
-    }
-  }, React__default.createElement(Icon, {
-    icon: 'it-clock'
-  }));
-  const onHoursChange = value => {
-    const formattedValue = formatTime(value);
-    setHours(isNaN(Number(formattedValue)) ? `00` : formattedValue);
-    setTime(`${formattedValue}:${minutes}`);
-  };
-  const onMinutesChange = value => {
-    const formattedValue = formatTime(value);
-    setMinutes(isNaN(Number(formattedValue)) ? `00` : formattedValue);
-    setTime(`${hours}:${formattedValue}`);
-  };
-  const onTimeChange = value => {
-    const [hours, minutes] = value.split(':');
-    onHoursChange(hours == null ? void 0 : hours.trim());
-    onMinutesChange(minutes == null ? void 0 : minutes.trim());
-    setTime(value);
-  };
-  const infoTextControlClass = getInfoTextControlClass(attributes, attributes.cssModule);
-  const {
-    infoTextClass,
-    wrapperClass
-  } = getClasses(attributes.className, {
-    ...attributes,
-    normalized: Boolean(attributes.normalized),
-    inputPassword: false,
-    formControlClass: 'form-control',
-    infoTextControlClass,
-    isFocused,
-    originalWrapperClass: attributes.wrapperClassName || attributes.wrapperClass
-  }, attributes.cssModule);
-  return React__default.createElement("div", {
-    className: classNames('it-timepicker-wrapper', {
-      'theme-dark': dark
-    }),
-    "data-testid": testId
-  }, React__default.createElement("section", {
-    className: 'time-spinner'
-  }, React__default.createElement("div", {
-    className: 'error_container',
-    role: 'alert',
-    "aria-atomic": 'true'
-  }), React__default.createElement("fieldset", null, React__default.createElement("legend", null, React__default.createElement("span", {
-    className: 'visually-hidden'
-  }, srText)), React__default.createElement("div", null, React__default.createElement("div", {
-    className: 'calendar-input-container'
-  }, React__default.createElement(TimeInputContainer, {
-    wrapperClass: wrapperClass,
-    infoTextClass: infoTextClass,
-    label: label,
-    infoText: attributes.infoText,
-    id: id,
-    button: button,
-    invalid: invalid
-  }, React__default.createElement(Input, Object.assign({}, attributes, {
-    type: 'text',
-    label: label,
-    id: id,
-    placeholder: placeholder,
-    value: time,
-    onFocus: () => {
-      setIsOpen(false);
-      toggleFocus(true);
-    },
-    onChange: e => onTimeChange(e.target.value),
-    invalid: invalid,
-    onBlur: () => {
-      toggleFocus(false);
-      onBlur(time);
-    },
-    noWrapper: true
-  })))))), React__default.createElement("div", {
-    className: 'spinner-control',
-    "aria-hidden": 'true',
-    role: 'region',
-    "aria-label": controlsLabel,
-    tabIndex: -1,
-    style: {
-      display: isOpen ? 'block' : 'none'
-    }
-  }, React__default.createElement("div", {
-    className: 'spinner-hour spinner'
-  }, React__default.createElement(Input, {
-    className: 'spinnerHour form-control',
-    "aria-label": hoursLabel,
-    type: 'number',
-    value: hours,
-    role: 'spinbutton',
-    maxLength: 2,
-    "aria-valuenow": Number(hours),
-    "aria-valuemax": 23,
-    "aria-valuemin": 0,
-    onChange: e => onHoursChange(e.target.value)
-  }), React__default.createElement("div", {
-    className: 'button-wrapper'
-  }, React__default.createElement("button", {
-    type: 'button',
-    className: 'button-hour btnHourUp',
-    "aria-label": increaseHoursLabel,
-    "aria-hidden": 'true',
-    tabIndex: -1,
-    onClick: () => onHoursChange(addTime(hours, 23))
-  }, React__default.createElement("span", {
-    className: 'icon-up'
-  })), React__default.createElement("button", {
-    type: 'button',
-    className: 'button-hour btnHourDown',
-    "aria-label": decreaseHoursLabel,
-    "aria-hidden": 'true',
-    tabIndex: -1,
-    onClick: () => onHoursChange(subtractTime(hours, 0))
-  }, React__default.createElement("span", {
-    className: 'icon-down'
-  })))), React__default.createElement("div", {
-    className: 'spinner-min spinner'
-  }, React__default.createElement(Input, {
-    className: 'spinnerMin form-control',
-    "aria-label": minutesLabel,
-    type: 'number',
-    value: minutes,
-    role: 'spinbutton',
-    maxLength: 2,
-    "aria-valuenow": Number(minutes),
-    "aria-valuemax": 59,
-    "aria-valuemin": 0,
-    onChange: e => onMinutesChange(e.target.value)
-  }), React__default.createElement("div", {
-    className: 'button-wrapper'
-  }, React__default.createElement("button", {
-    type: 'button',
-    className: 'btnMinUp button-minute',
-    "aria-label": increaseMinutesLabel,
-    "aria-hidden": 'true',
-    tabIndex: -1,
-    onClick: () => onMinutesChange(addTime(minutes, 59))
-  }, React__default.createElement("span", {
-    className: 'icon-up'
-  })), React__default.createElement("button", {
-    type: 'button',
-    className: 'btnMinDown button-minute',
-    "aria-label": decreaseMinutesLabel,
-    "aria-hidden": 'true',
-    tabIndex: -1,
-    onClick: () => onMinutesChange(subtractTime(minutes, 0))
-  }, React__default.createElement("span", {
-    className: 'icon-down'
-  })))))));
-};
-
 const Timeline = props => {
   const {
     className,
@@ -3789,121 +3601,30 @@ const TimelinePin = _ref => {
   }, rest), pinIcon, pinLabel), children);
 };
 
-const black = '#000';
-const primary = '#06c';
-const primaryDark = '#435a70';
-const primaryDarker = '#17324d';
-// Types here depend of react-select internal emotion dep + more parametric stuff
-// @TODO: fix it this way for now, will review later on
-const styles = {
-  container: provided => ({
-    ...provided,
-    height: '2.5rem'
-  }),
-  control: provided => ({
-    ...provided,
-    height: '2.5rem',
-    borderRadius: '0',
-    borderLeft: 'none',
-    borderRight: 'none',
-    borderTop: 'none',
-    borderBottom: `solid ${primaryDark} 1px`,
-    boxShadow: 'none',
-    '&:hover': {
-      borderBottom: `solid ${primaryDark} 1.25px`
-    } // border style on hover
-  }),
-
-  dropdownIndicator: provided => ({
-    ...provided,
-    fill: primaryDark
-  }),
-  option: (provided, _ref) => {
-    let {
-      isDisabled,
-      isFocused,
-      isSelected
-    } = _ref;
-    return {
-      ...provided,
-      background: 'white',
-      textDecoration: isFocused || isSelected ? 'underline' : 'none',
-      color: isSelected ? primaryDarker : primary,
-      cursor: isDisabled ? 'not-allowed' : 'pointer'
-    };
-  },
-  placeholder: provided => ({
-    ...provided,
-    fill: primaryDark
-  }),
-  singleValue: provided => ({
-    ...provided,
-    color: black,
-    fontWeight: 'bold'
-  }),
-  valueContainer: provided => ({
-    ...provided,
-    height: '2.5rem'
-  })
-};
-
-const DropdownIndicator = props => {
-  return React__default.createElement(SelectBase.components.DropdownIndicator, Object.assign({}, props), React__default.createElement(Icon, {
-    icon: 'it-arrow-down-triangle',
-    "aria-hidden": true
-  }));
-};
-const Option = props => {
-  return React__default.createElement("div", {
-    className: 'select-pill text-primary'
-  }, React__default.createElement(SelectBase.components.Option, Object.assign({}, props)));
-};
-const CustomClearText = _ref => {
+const Select = _ref => {
   let {
-    clearText
+    id,
+    disabled = false,
+    label,
+    children,
+    onChange
   } = _ref;
-  return React__default.createElement(React__default.Fragment, null, clearText);
-};
-const Select = _ref2 => {
-  let {
-    clearText = 'Annulla',
-    icon = false,
-    ...props
-  } = _ref2;
-  // @TODO: move it outside when migrating to hooks
-  const ClearIndicator = clearIndicatorProps => {
-    const {
-      children = React__default.createElement(CustomClearText, {
-        clearText: clearText
-      }),
-      innerProps: {
-        ref,
-        ...restInnerProps
-      }
-    } = clearIndicatorProps;
-    return React__default.createElement("div", Object.assign({
-      className: 'select-pill text-primary'
-    }, restInnerProps, {
-      ref: ref
-    }), React__default.createElement("div", {
-      style: {
-        padding: '0px 5px'
-      }
-    }, children));
+  const handleChange = e => {
+    onChange(e.target.value);
   };
-  const selectComponents = {
-    ...props.components,
-    Option,
-    DropdownIndicator,
-    IndicatorSeparator: null
+  const inputProps = {
+    name: 'select',
+    type: 'select',
+    disabled: disabled,
+    handleChange: handleChange
   };
-  if (props.isClearable) {
-    selectComponents.ClearIndicator = ClearIndicator;
-  }
-  return React__default.createElement(SelectBase__default, Object.assign({}, props, {
-    components: selectComponents,
-    styles: styles
-  }));
+  return React__default.createElement("div", {
+    className: 'select-wrapper'
+  }, id ? React__default.createElement(React__default.Fragment, null, React__default.createElement("label", {
+    htmlFor: id
+  }, label), React__default.createElement(reactstrap.Input, Object.assign({
+    id: id
+  }, inputProps), children)) : React__default.createElement("label", null, label, React__default.createElement(reactstrap.Input, Object.assign({}, inputProps), children)));
 };
 
 const StepperHeader = _ref => {
@@ -4862,7 +4583,6 @@ exports.StepperNav = StepperNav;
 exports.TextArea = TextArea;
 exports.ThumbNav = ThumbNav;
 exports.ThumbNavItem = ThumbNavItem;
-exports.TimeInput = TimeInput;
 exports.Timeline = Timeline;
 exports.TimelinePin = TimelinePin;
 exports.Toggle = Toggle;