@geneui/components 3.0.0-next-9ffcb93-16102024 → 3.0.0-next-48d0ef7-31102024

package/ExtendedInput/index.js

@@ -1,590 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
-import { c as classnames } from '../index-031ff73c.js';
-import PropTypes from 'prop-types';
-import { i as inputConfig, s as screenTypes } from '../configs-00612ce0.js';
-import { n as noop, s as stopEvent } from '../index-5f37f281.js';
-import useDeviceType from '../hooks/useDeviceType.js';
-import { u as useEllipsisDetection } from '../useEllipsisDetection-c1c9ad94.js';
-import Icon from '../Icon/index.js';
-import SuggestionList from '../SuggestionList/index.js';
-import { T as Tooltip } from '../index-65217440.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../hooks/useWindowSize.js';
-import '../hooks/useDebounce.js';
-import '../hooks/useKeyDown.js';
-import '../hooks/useClickOutside.js';
-import '../config-1053d64d.js';
-import '../Scrollbar/index.js';
-import '../callAfterDelay-7272faca.js';
-import '../tslib.es6-f211516f.js';
-import '../GeneUIProvider/index.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.3\"] .input-holder{--input-message-padding-side:2rem;--input-element-padding-side:0.5rem;--input-element-height:3.6rem;--textarea-height:21.5rem;--number-actions-holder-padding:0 0.5rem;--swap-label-color:inherit;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;max-width:100%;position:relative;transition:opacity .3s;-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.16.3\"] .input-holder.disabled{opacity:.5}[data-gene-ui-version=\"2.16.3\"] .input-holder.read-only{cursor:inherit;-webkit-user-select:text;user-select:text}[data-gene-ui-version=\"2.16.3\"] .input-holder:not(.f-content-size){width:100%}[data-gene-ui-version=\"2.16.3\"] .input-holder.s-big{--input-element-height:4.2rem;--textarea-height:52rem}[data-gene-ui-version=\"2.16.3\"] .input-holder.s-small{--input-element-height:3.2rem;--textarea-height:14.8rem}[data-gene-ui-version=\"2.16.3\"] .input-holder.id-start .validation-icon{margin-inline-end:-.5rem}[data-gene-ui-version=\"2.16.3\"] .input-holder.id-end{--direction:row-reverse}[data-gene-ui-version=\"2.16.3\"] .input-holder.id-end .validation-icon{margin-inline-start:-.5rem}[data-gene-ui-version=\"2.16.3\"] .input-holder.cr-smooth-radius{--input-element-border-radius:0.4rem;--textarea-border-radius:0.4rem}[data-gene-ui-version=\"2.16.3\"] .input-holder .end-add-on{align-items:center;border-radius:0 var(--input-element-border-radius,4.2rem) var(--input-element-border-radius,4.2rem) 0;display:flex;font:600 1.4rem/1.5 var(--font-family);height:var(--input-element-height);justify-content:center;margin:1px 0;margin-inline-end:calc(var(--input-structure-padding, 1.5rem)*-1 + 1px);margin-inline-start:var(--input-structure-padding,1.5rem);padding:0 var(--input-structure-padding,1.5rem);transition:background .3s,border-color .3s,opacity .3s}[data-gene-ui-version=\"2.16.3\"] .input-holder.a-outline{--input-element-border-color:rgba(var(--background-sc-rgb),0.2)}[data-gene-ui-version=\"2.16.3\"] .input-holder.a-outline:not(.t-textarea) .end-add-on{background:rgba(var(--background-sc-rgb),.03);border-inline-start:1px solid var(--input-element-border-color,#0000);height:calc(var(--input-element-height) - .2rem)}[data-gene-ui-version=\"2.16.3\"] .input-holder.a-outline.read-only{--input-element-border-color:rgba(var(--background-sc-rgb),0.05)}[data-gene-ui-version=\"2.16.3\"] .input-holder.a-outline.filled:not(:focus-within){--input-element-border-color:rgba(var(--background-sc-rgb),0.3)}[data-gene-ui-version=\"2.16.3\"] .input-holder.a-outline:not(.read-only):focus-within{--input-element-border-color:var(--hero);--swap-label-color:var(--hero)}[data-gene-ui-version=\"2.16.3\"] .input-holder.a-minimal{--input-element-background:rgba(var(--background-sc-rgb),0.02)}[data-gene-ui-version=\"2.16.3\"] .input-holder.a-minimal.read-only{--input-element-background:rgba(var(--background-sc-rgb),0.01)}[data-gene-ui-version=\"2.16.3\"] .input-holder.a-minimal.filled:not(:focus-within),[data-gene-ui-version=\"2.16.3\"] .input-holder.a-minimal:not(.read-only):focus-within{--input-element-background:rgba(var(--background-sc-rgb),0.03)}[data-gene-ui-version=\"2.16.3\"] .input-holder.a-minimal.s-small{--input-message-padding-side:0.7rem;--input-element-background:rgba(var(--background-sc-rgb),0.03);--input-element-padding-side:0.3rem;--number-actions-holder-padding:0;--input-structure-padding:0.4rem}[data-gene-ui-version=\"2.16.3\"] .input-holder.a-minimal.s-small.read-only{--input-element-background:rgba(var(--background-sc-rgb),0.01)}[data-gene-ui-version=\"2.16.3\"] .input-holder.a-minimal.s-small.filled:not(:focus-within){--input-element-background:rgba(var(--background-sc-rgb),0.03)}[data-gene-ui-version=\"2.16.3\"] .input-holder.a-minimal.s-small:not(.read-only):focus-within{--input-element-background:#0000;--input-element-border-color:var(--hero);--swap-label-color:var(--hero)}[data-gene-ui-version=\"2.16.3\"] .input-holder.a-light:not(.read-only):focus-within{--input-element-background:rgba(var(--background-sc-rgb),0.05)}@media (hover:hover){[data-gene-ui-version=\"2.16.3\"] .input-holder.a-light:hover{--input-element-background:rgba(var(--background-sc-rgb),0.05)}}[data-gene-ui-version=\"2.16.3\"] .input-holder.a-light.popover-opened{--input-element-background:rgba(var(--background-sc-rgb),0.05)}[data-gene-ui-version=\"2.16.3\"] .input-holder.error-color,[data-gene-ui-version=\"2.16.3\"] .input-holder.success-color{--input-element-background:#0000!important}[data-gene-ui-version=\"2.16.3\"] .input-holder.error-color{--input-element-border-color:var(--danger)!important}[data-gene-ui-version=\"2.16.3\"] .input-holder.error-color:not(.read-only):focus-within{--swap-label-color:var(--danger)!important}[data-gene-ui-version=\"2.16.3\"] .input-holder.success-color{--input-element-border-color:var(--confirm)!important}[data-gene-ui-version=\"2.16.3\"] .input-holder.success-color:not(.read-only):focus-within{--swap-label-color:var(--confirm)!important}[data-gene-ui-version=\"2.16.3\"] .input-holder.t-textarea .end-add-on{align-self:flex-end}[data-gene-ui-version=\"2.16.3\"] .input-structure{align-items:center;display:flex;flex-direction:var(--direction,row);padding:0 var(--input-structure-padding,1.5rem);position:relative;width:100%}[data-gene-ui-version=\"2.16.3\"] .input-structure>*{flex-shrink:0}[data-gene-ui-version=\"2.16.3\"] .input-structure>:not(label){position:relative;z-index:1}[data-gene-ui-version=\"2.16.3\"] .input-holder.a-minimal.s-small .input-structure>:not(label){margin:0 .3rem}[data-gene-ui-version=\"2.16.3\"] .input-structure>:not(label).bc-icon-clear{border-radius:100%;transition:background .4s,color .4s}@media (hover:hover){[data-gene-ui-version=\"2.16.3\"] .input-structure>:not(label).bc-icon-clear:hover{background:rgba(var(--background-sc-rgb),.03);color:var(--hero)}}[data-gene-ui-version=\"2.16.3\"] .input-structure>label{cursor:inherit;display:block;flex:auto;overflow:hidden}[data-gene-ui-version=\"2.16.3\"] .input-structure .icon{align-items:center;display:flex;justify-content:center;transition:color .3s,background .3s;z-index:10}[data-gene-ui-version=\"2.16.3\"] .input-structure .icon-holder{order:-1;z-index:2}[data-gene-ui-version=\"2.16.3\"] .input-structure .icon-holder-disabled{pointer-events:none}[data-gene-ui-version=\"2.16.3\"] .input-element-back{background:var(--input-element-background,var(--background));border:1px solid var(--input-element-border-color,#0000);border-radius:var(--input-element-border-radius,4.2rem);bottom:0;height:100%;left:0;position:absolute;right:0;top:0;transition:background .3s,border-color .3s,opacity .3s;width:100%}[data-gene-ui-version=\"2.16.3\"] .t-textarea .input-element-back{border-radius:var(--textarea-border-radius,1rem)}[data-gene-ui-version=\"2.16.3\"] .read-only .input-element-back:empty{opacity:0}[data-gene-ui-version=\"2.16.3\"] .fit-content-hack{height:0;opacity:0;overflow:hidden;pointer-events:none}[data-gene-ui-version=\"2.16.3\"] .input-element-relative{position:relative;width:100%;z-index:1}[data-gene-ui-version=\"2.16.3\"] .input-element{color:rgba(var(--background-sc-rgb),.75);font:600 1.4rem var(--font-family);height:var(--input-element-height);overflow:hidden;padding:0 var(--input-element-padding-side);position:relative;resize:none;text-overflow:ellipsis;transition:opacity .15s;white-space:nowrap;width:100%}[data-gene-ui-version=\"2.16.3\"] .input-element:-webkit-autofill{-webkit-text-fill-color:var(--background-sc);-webkit-background-clip:text;background-clip:text}[data-gene-ui-version=\"2.16.3\"] .input-element:-webkit-autofill::selection{-webkit-text-fill-color:var(--hero)}[data-gene-ui-version=\"2.16.3\"] .input-element.hide{opacity:0}[data-gene-ui-version=\"2.16.3\"] .input-element::input-placeholder{color:rgba(var(--background-sc-rgb),.375);font-size:1.4rem;font-weight:600;transition:color .15s}[data-gene-ui-version=\"2.16.3\"] .input-element:placeholder{color:rgba(var(--background-sc-rgb),.375);font-size:1.4rem;font-weight:600;transition:color .15s}[data-gene-ui-version=\"2.16.3\"] .input-element::placeholder{color:rgba(var(--background-sc-rgb),.375);font-size:1.4rem;font-weight:600;transition:color .15s}[data-gene-ui-version=\"2.16.3\"] .input-element:input-placeholder{color:rgba(var(--background-sc-rgb),.375);font-size:1.4rem;font-weight:600;transition:color .15s}[data-gene-ui-version=\"2.16.3\"] .input-element.read-only:not(.textarea-element){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.16.3\"] .textarea-element,[data-gene-ui-version=\"2.16.3\"] textarea.input-element{border:1px solid #0000;cursor:auto;height:var(--textarea-height);overflow:auto;padding:1rem var(--input-element-padding-side);padding-right:70px!important;text-overflow:unset;white-space:normal}[data-gene-ui-version=\"2.16.3\"] .textarea-element.read-only,[data-gene-ui-version=\"2.16.3\"] textarea.input-element.read-only{height:auto}[data-gene-ui-version=\"2.16.3\"] .textarea-element::-webkit-scrollbar,[data-gene-ui-version=\"2.16.3\"] textarea.input-element::-webkit-scrollbar{height:1.6rem;width:1.6rem}[data-gene-ui-version=\"2.16.3\"] .textarea-element::-webkit-scrollbar-thumb,[data-gene-ui-version=\"2.16.3\"] textarea.input-element::-webkit-scrollbar-thumb{background:rgba(var(--background-sc-rgb),.05);border:.4rem solid var(--background);border-radius:1.6rem}[data-gene-ui-version=\"2.16.3\"] div.input-element{align-items:center;display:flex;justify-content:flex-start}[data-gene-ui-version=\"2.16.3\"] div.input-element:not([readonly]).placeholder{color:rgba(var(--background-sc-rgb),.375)}[data-gene-ui-version=\"2.16.3\"] div.input-element:not([readonly]).placeholder:focus{color:rgba(var(--background-sc-rgb),0)}[data-gene-ui-version=\"2.16.3\"] .input-element[readonly]{cursor:inherit}[data-gene-ui-version=\"2.16.3\"] .input-element[readonly]::selection{background:#0000;color:inherit}[data-gene-ui-version=\"2.16.3\"] .input-element[type=date],[data-gene-ui-version=\"2.16.3\"] .input-element[type=datetime-local],[data-gene-ui-version=\"2.16.3\"] .input-element[type=time]{line-height:var(--input-element-height)}[data-gene-ui-version=\"2.16.3\"] .input-fake-placeholder{align-items:center;color:rgba(var(--background-sc-rgb),.375);display:flex;font:600 1.4rem/1.8rem var(--font-family);height:100%;left:0;padding:0 var(--input-element-padding-side);pointer-events:none;position:absolute;top:0;transition:opacity .15s;-webkit-user-select:none;user-select:none;width:100%}[data-gene-ui-version=\"2.16.3\"] .input-fake-placeholder.hide{opacity:0}[data-gene-ui-version=\"2.16.3\"] .input-swap-label{display:flex;font:600 1rem/1.8rem var(--font-family);left:0;max-width:100%;padding:0 var(--input-message-padding-side);position:absolute;top:-.9rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:5}[data-gene-ui-version=\"2.16.3\"] .input-swap-label .icon{font-size:1.8rem;transition:none}[data-gene-ui-version=\"2.16.3\"] .input-swap{max-width:100%;overflow:hidden}[data-gene-ui-version=\"2.16.3\"] .input-swap-animate{align-items:center;background:var(--background);box-shadow:inset 0 -.8rem 0 var(--input-element-background);color:var(--swap-label-color);display:flex;max-width:100%;padding:0 .4rem;transition:transform .3s,opacity .3s .1s,color .3s}[data-gene-ui-version=\"2.16.3\"] .input-swap-animate>*+*{margin-inline-start:.5rem}[data-gene-ui-version=\"2.16.3\"] .input-swap-animate.hide{opacity:0;transform:translateY(100%)}[data-gene-ui-version=\"2.16.3\"] .number-actions-holder{padding:var(--number-actions-holder-padding)}[data-gene-ui-version=\"2.16.3\"] .number-actions-holder>ul{background:var(--background);border:1px solid rgba(var(--background-sc-rgb),.1);border-radius:.7rem;color:inherit;font-size:1rem;width:1.5rem}[data-gene-ui-version=\"2.16.3\"] .number-actions-holder>ul>li{cursor:pointer;transition:color .3s,background .3s,opacity .3s}[data-gene-ui-version=\"2.16.3\"] .number-actions-holder>ul>li:first-child{border-radius:.7rem .7rem 0 0}[data-gene-ui-version=\"2.16.3\"] .number-actions-holder>ul>li:last-child{border-radius:0 0 .7rem .7rem}[data-gene-ui-version=\"2.16.3\"] .number-actions-holder>ul>li.disabled{opacity:.5;pointer-events:none}@media (hover:hover){[data-gene-ui-version=\"2.16.3\"] .number-actions-holder>ul>li:hover{background:rgba(var(--background-sc-rgb),.03);color:var(--hero)}}[data-gene-ui-version=\"2.16.3\"] .information-message{cursor:default;font:600 1.2rem/1.42 var(--font-family);margin:.6rem 0 0;padding:0 var(--input-message-padding-side);width:100%}[data-gene-ui-version=\"2.16.3\"] .information-message:empty{display:none}[data-gene-ui-version=\"2.16.3\"] .input-description{cursor:default;font:600 1.4rem/2rem var(--font-family);margin:1rem 0 0;max-width:100%;opacity:.7}[data-gene-ui-version=\"2.16.3\"] .input-structure~.input-description{padding:0 1rem}[data-gene-ui-version=\"2.16.3\"] .input-title{align-items:center;cursor:default;display:flex;font:600 1.4rem/2rem var(--font-family);margin:0 0 .4rem;max-width:100%;opacity:.5;padding:0 var(--input-message-padding-side)}[data-gene-ui-version=\"2.16.3\"] .input-title>*+*{margin-inline-start:.5rem}";
-styleInject(css_248z);
-
-function replaceBetween(start, end, initial, what) {
-  return initial.substring(0, start) + what + initial.substring(end);
-}
-function createCustomInputEvent(ref) {
-  let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  const event = new Event('input', {
-    bubbles: true
-  });
-  ref.value = String(value);
-  ref.dispatchEvent(event);
-  return event;
-}
-const ExtendedInput = /*#__PURE__*/forwardRef((props, ref) => {
-  var _textareaRef$current;
-  const {
-    max,
-    min,
-    icon,
-    type,
-    step,
-    value,
-    label,
-    onBlur,
-    onFocus,
-    onClear,
-    isValid,
-    onClick,
-    canClear,
-    disabled,
-    onChange,
-    required,
-    readOnly,
-    className,
-    errorText,
-    inputSize,
-    maxLength,
-    isDropdown,
-    appearance,
-    screenType,
-    placeholder,
-    flexibility,
-    description,
-    onIconClick,
-    withInfoIcon,
-    colorOnValid,
-    defaultValue,
-    cornerRadius,
-    showErrorIcon,
-    clickableIcon,
-    infoIconTitle,
-    writeProtected,
-    showNumberIcon,
-    itemsDirection,
-    showIconOnValid,
-    labelAppearance,
-    colorBorderOnError,
-    showRemainingLength,
-    showErrorWithTooltip,
-    showClickableTooltipOnError,
-    startAdornment,
-    tooltipText,
-    endAdornment,
-    suggestionData,
-    ...restProps
-  } = props;
-  const {
-    isMobile
-  } = useDeviceType(screenType);
-  const inputRef = useRef();
-  const textareaRef = useRef();
-  const iconRef = useRef();
-  const [localValue, setLocalValue] = useState(defaultValue);
-  const [focused, setFocused] = useState(false);
-  const [isBlurInitiatorIcon, setIsBlurInitiatorIcon] = useState(false);
-  const isControlled = 'value' in props && typeof value !== 'undefined';
-  // non strict equality is needed for covering 'undefined' case also
-  const inputValue = isControlled ? value != null ? value : '' : localValue;
-  const [isTextTruncated, setIsTextTruncated] = useState(false);
-  const isTruncated = useEllipsisDetection(inputRef, [inputValue]);
-  useEffect(() => setIsTextTruncated(isTruncated), [isTruncated]);
-  useEffect(() => {
-    isControlled && value && value !== inputValue && setLocalValue(value);
-  }, [value, isControlled, inputValue]);
-  const hasError = !isValid;
-  const showTooltip = tooltipText && isValid ? tooltipText : showErrorWithTooltip && hasError && errorText ? errorText : '';
-  const handleChange = e => {
-    const {
-      value
-    } = e.target;
-    !isControlled && setLocalValue(value);
-    onChange(e);
-  };
-  const handleFocus = useCallback(e => {
-    if (isDropdown && (writeProtected || isMobile)) {
-      var _inputRef$current;
-      stopEvent(e, true);
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
-    } else {
-      setFocused(true);
-      onFocus(e);
-    }
-  }, [onFocus, isTextTruncated, isMobile, value]);
-  const handleIconClick = useCallback(e => {
-    // We will remove this later, when get report who use this
-    if (clickableIcon) {
-      onClick(e);
-      onIconClick(e, isBlurInitiatorIcon);
-      if (isBlurInitiatorIcon) {
-        iconRef.current.blur();
-        setIsBlurInitiatorIcon(false);
-      }
-    }
-  }, [clickableIcon, onClick, onIconClick, isBlurInitiatorIcon]);
-  const handleBlur = useCallback(e => {
-    setFocused(false);
-    setIsBlurInitiatorIcon(iconRef.current === e.relatedTarget);
-    onBlur(e);
-  }, [onBlur]);
-  const handleDropdownIconClick = useCallback(e => {
-    if (isDropdown) {
-      onClick(e);
-      if (!readOnly) {
-        focused ? inputRef.current.blur() : inputRef.current.focus();
-      }
-    }
-  }, [isDropdown, onClick, focused, inputRef.current]);
-  const handleStepUp = e => {
-    const number = Math.floor(inputValue) + step;
-    const nextValue = number < min ? min : number > max ? max : number;
-    const event = createCustomInputEvent(inputRef.current, nextValue);
-    handleChange(event);
-  };
-  const handleStepDown = e => {
-    const number = Math.ceil(inputValue) - step;
-    const nextValue = number < min ? min : number > max ? max : number;
-    const event = createCustomInputEvent(inputRef.current, nextValue);
-    handleChange(event);
-  };
-  const handleClear = () => {
-    const event = createCustomInputEvent(type === 'textarea' ? textareaRef.current : inputRef.current);
-    handleChange(event);
-    onClear(event);
-  };
-  const handleRef = val => {
-    if (ref) {
-      ref.current = val;
-    }
-    if (type !== 'textarea') {
-      inputRef.current = val;
-    } else {
-      textareaRef.current = val;
-    }
-  };
-  const fieldStep = type === 'number' ? {
-    step
-  } : {};
-  const numberedValue = Number(inputValue);
-  const inputLabel = label || placeholder;
-  const asterisk = required ? '* ' : '';
-  const inputPlaceholder = !readOnly && placeholder ? "".concat(asterisk).concat(placeholder) : '';
-  const hasFakePlaceholder = type === 'date' || type === 'time' || type === 'datetime-local';
-  const sharedProps = {
-    onClick,
-    required,
-    ref: handleRef,
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    onChange: handleChange,
-    disabled,
-    maxLength,
-    placeholder: inputPlaceholder,
-    readOnly: readOnly || writeProtected,
-    className: classnames('input-element', {
-      'read-only': readOnly,
-      placeholder: !inputValue,
-      'write-protected': writeProtected,
-      'textarea-element': type === 'textarea',
-      hide: !inputValue && hasFakePlaceholder
-    }),
-    ...restProps
-  };
-  const onChangeSuggestionData = useCallback(_ref => {
-    let {
-      from,
-      to,
-      data
-    } = _ref;
-    const {
-      value
-    } = data;
-    const input = textareaRef.current;
-    const lastValue = input.value;
-    input.value = replaceBetween(from, to, inputValue, value);
-    const event = new Event('input', {
-      bubbles: true
-    });
-    const tracker = input._valueTracker;
-    tracker && tracker.setValue(lastValue);
-    input.dispatchEvent(event);
-  }, [inputValue]);
-  const onAddPlaceholder = useCallback(_ref2 => {
-    let {
-      from,
-      to,
-      data
-    } = _ref2;
-    const {
-      value
-    } = data;
-    textareaRef.current.value = replaceBetween(from, to, inputValue, value);
-  }, [inputValue]);
-  const maxMinValidator = useCallback((num, type) => disabled || (num === null || num === void 0 ? void 0 : num.toString().length) && (Math.ceil(num) === 0 || Math.ceil(num)) && (type === 'max' ? numberedValue >= num : numberedValue <= num), [max, min, numberedValue]);
-  return /*#__PURE__*/React__default.createElement(Tooltip, {
-    position: "bottom",
-    title: showTooltip,
-    isVisible: !!showTooltip
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('input-holder', "a-".concat(appearance), "s-".concat(inputSize), "id-".concat(itemsDirection), "f-".concat(flexibility), "cr-".concat(cornerRadius), "t-".concat(type), className, {
-      disabled,
-      'read-only': readOnly,
-      'error-color': hasError && colorBorderOnError,
-      'success-color': isValid && colorOnValid,
-      filled: inputValue
-    })
-  }, type === 'textarea' && !readOnly && !isDropdown && !isMobile && suggestionData && Array.isArray(suggestionData) && /*#__PURE__*/React__default.createElement(SuggestionList, {
-    elemRef: textareaRef,
-    onChange: onChangeSuggestionData,
-    onHover: onAddPlaceholder,
-    data: suggestionData
-  }), labelAppearance === inputConfig.labelAppearance[1] && /*#__PURE__*/React__default.createElement("div", {
-    className: "input-title ellipsis-text"
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
-    position: "auto",
-    title: "".concat(asterisk, " ").concat(inputLabel)
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: "ellipsis-text"
-  }, asterisk, " ", inputLabel)), withInfoIcon && /*#__PURE__*/React__default.createElement(Tooltip, {
-    position: "auto",
-    title: infoIconTitle
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    type: "bc-icon-info"
-  }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "input-structure"
-  }, startAdornment, icon && /*#__PURE__*/React__default.createElement("span", {
-    ref: iconRef,
-    tabIndex: "0",
-    className: classnames('icon-holder', {
-      'icon-holder-disabled': disabled
-    })
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    type: icon,
-    onClick: handleIconClick,
-    onMouseDown: handleDropdownIconClick
-  })), /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement("div", {
-    className: "input-element-relative"
-  }, readOnly || isDropdown && isMobile ? /*#__PURE__*/React__default.createElement("div", sharedProps, /*#__PURE__*/React__default.createElement("div", {
-    className: type === 'textarea' ? 'textarea-element-content' : 'ellipsis-text'
-  }, typeof inputValue === 'number' ? inputValue : inputValue || inputPlaceholder)) : type !== 'textarea' ? /*#__PURE__*/React__default.createElement("input", _extends({}, sharedProps, fieldStep, {
-    max: max,
-    min: min,
-    type: type,
-    size: flexibility === 'content-size' ? 1 : null,
-    value: inputValue
-  })) : /*#__PURE__*/React__default.createElement("textarea", _extends({}, sharedProps, {
-    value: (_textareaRef$current = textareaRef.current) !== null && _textareaRef$current !== void 0 && _textareaRef$current.isSuggestionListOpen ? textareaRef.current.value : inputValue
-  })), hasFakePlaceholder && /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('input-fake-placeholder', {
-      hide: inputValue
-    })
-  }, inputPlaceholder && /*#__PURE__*/React__default.createElement("div", {
-    className: "ellipsis-text"
-  }, inputPlaceholder))), flexibility === 'content-size' && /*#__PURE__*/React__default.createElement("div", {
-    className: "fit-content-hack"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "input-element"
-  }, asterisk, " ", placeholder.length > "".concat(inputValue).length ? placeholder : inputValue)), /*#__PURE__*/React__default.createElement("div", {
-    className: "input-element-back"
-  }, labelAppearance === inputConfig.labelAppearance[2] && /*#__PURE__*/React__default.createElement("div", {
-    className: "input-swap-label"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "input-swap"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('input-swap-animate ellipsis-text', {
-      hide: !inputValue && inputValue !== 0
-    })
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: "ellipsis-text"
-  }, asterisk, " ", inputLabel), withInfoIcon && /*#__PURE__*/React__default.createElement(Tooltip, {
-    position: "auto",
-    title: infoIconTitle
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    type: "bc-icon-info"
-  }))))))), canClear && !!inputValue && !readOnly && /*#__PURE__*/React__default.createElement(Icon, {
-    type: "bc-icon-clear",
-    disabled: disabled,
-    onClick: handleClear,
-    className: "cursor-pointer"
-  }), isDropdown && /*#__PURE__*/React__default.createElement(Icon, {
-    type: "bc-icon-arrow-down",
-    onMouseDown: handleDropdownIconClick
-  }), type === 'number' && showNumberIcon && !readOnly && /*#__PURE__*/React__default.createElement("div", {
-    className: "number-actions-holder"
-  }, /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", {
-    className: classnames('number-action', 'bc-icon-input-number-up', {
-      disabled: maxMinValidator(max, 'max')
-    }),
-    onClick: handleStepUp
-  }), /*#__PURE__*/React__default.createElement("li", {
-    className: classnames('number-action', 'bc-icon-input-number-down', {
-      disabled: maxMinValidator(min, 'min')
-    }),
-    onClick: handleStepDown
-  }))), hasError && showErrorIcon && /*#__PURE__*/React__default.createElement(Icon, {
-    className: "validation-icon pointer-events-none color-danger",
-    type: "bc-icon-error-info"
-  }), isValid && showIconOnValid && /*#__PURE__*/React__default.createElement(Icon, {
-    className: "validation-icon pointer-events-none color-confirm",
-    type: "bc-icon-validated"
-  }), showRemainingLength && !!maxLength && /*#__PURE__*/React__default.createElement("div", {
-    className: "end-add-on"
-  }, maxLength - "".concat(inputValue).length), endAdornment), !showErrorWithTooltip && hasError && errorText && /*#__PURE__*/React__default.createElement("div", {
-    className: "information-message color-danger"
-  }, errorText), description && /*#__PURE__*/React__default.createElement("div", {
-    className: "input-description"
-  }, description)));
-});
-ExtendedInput.propTypes = {
-  /**
-   * Additional className
-   */
-  className: PropTypes.string,
-  /**
-   * Control ExtendedInput disabled state with this prop
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Borders will be colored on when "isValid" and this props are set to "true"
-   */
-  colorBorderOnError: PropTypes.bool,
-  /**
-   * Shows an icon to clear ExtendedInput's value when set to "true"
-   */
-  showClearIcon: PropTypes.bool,
-  /**
-   * Use this props in combo with "icon" prop. This will fire on icon click when set to "true"
-   */
-  clickableIcon: PropTypes.bool,
-  /**
-   * Shows an error icon when "isValid" is set to "false" and this prop is set to "true"
-   */
-  showErrorIcon: PropTypes.bool,
-  /**
-   * Shows an "Icon" for number inputs, when "type" is set to "number" and this prop is et to "true"
-   */
-  showNumberIcon: PropTypes.bool,
-  /**
-   *.
-   */
-  showClickableTooltipOnError: PropTypes.bool,
-  /**
-   * ExtendedInput borders are colored when "isValid" and this props are set to "true"
-   */
-  colorOnValid: PropTypes.bool,
-  /**
-   * ExtendedInput will display an icon when "isValid" and this props are set to "true"
-   */
-  showIconOnValid: PropTypes.bool,
-  /**
-   * Shows the "errorText" value in "Tooltip" when set to "true"
-   */
-  showErrorWithTooltip: PropTypes.bool,
-  /**
-   * Control ExtendedInput validation. For more info see "ValidatableNumberInput", "ValidatableTextInput"(integrated ExtendedInputs with "Form" organism).
-   */
-  isValid: PropTypes.bool,
-  /**
-   * Use this prop to specify error message. This will be displayed when "isValid" is set to "false"
-   */
-  errorText: PropTypes.string,
-  /**
-   * Use this prop to specify tooltip message.
-   */
-  tooltipText: PropTypes.string,
-  /**
-   * Specify increment or decrement value, when arrow up or down are clicked
-   */
-  step: PropTypes.number,
-  /**
-   * Valid values are same as "Icon" type
-   */
-  icon: PropTypes.string,
-  /**
-   * ExtendedInput placeholder
-   */
-  placeholder: PropTypes.string,
-  /**
-   * Control items direction
-   */
-  itemsDirection: PropTypes.oneOf(inputConfig.itemsDirection),
-  /**
-   * Use this prop to control ExtendedInput state. Note that when you specify this prop, the ExtendedInput will not functionate itself
-   */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * ExtendedInput type
-   */
-  type: PropTypes.oneOf(inputConfig.type).isRequired,
-  /**
-   * ExtendedInput appearance
-   */
-  appearance: PropTypes.oneOf(inputConfig.appearance),
-  /**
-   * ExtendedInput size
-   */
-  inputSize: PropTypes.oneOf(inputConfig.size),
-  /**
-   * ExtendedInput corner radius
-   */
-  cornerRadius: PropTypes.oneOf(inputConfig.cornerRadius),
-  /**
-   * Will make ExtendedInput readonly when set to "true"
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * How to display inscription in relation to it's parent in ExtendedInput
-   */
-  flexibility: PropTypes.oneOf(inputConfig.flexibility),
-  /**
-   * This prop will only applied once as defaultState for "value" when ExtendedInput mounts.
-   * Note that specifying this prop is not mean controlling it.
-   */
-  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Shows an "Icon" to remove ExtendedInput's value
-   */
-  canClear: PropTypes.bool,
-  /**
-   * Fires an event on clear "Icon" click((element: Element) => void)
-   */
-  onClear: PropTypes.func,
-  /**
-   * Fires an event on ExtendedInput change((event: Event) => void)
-   */
-  onChange: PropTypes.func,
-  /**
-   * Specify a label for ExtendedInput
-   */
-  label: PropTypes.string,
-  /**
-   * Specify a "label" appearance
-   */
-  labelAppearance: PropTypes.oneOf(inputConfig.labelAppearance),
-  /**
-   * Will add an additional description field
-   */
-  description: PropTypes.node,
-  /**
-   * Property is needed for "Dropdown" organism usage
-   */
-  isDropdown: PropTypes.bool,
-  /**
-   * Fires an event on ExtendInput <input /> click((event: Event => void))
-   */
-  onClick: PropTypes.func,
-  /**
-   * Typing will be blocked when set to "true". Note design is different from "readonly" prop's design
-   */
-  writeProtected: PropTypes.bool,
-  /**
-   * Input field maximum value
-   */
-  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Input field minimum value
-   */
-  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Callback fires when input is focused
-   */
-  onFocus: PropTypes.func,
-  /**
-   * Callback fires when input loose focus
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Callback fires when clicked the icon </br>
-   * as a first parameter passed native event </br>
-   * as a second parameter passed is blur function </br>
-   * initiated by icon click
-   */
-  onIconClick: PropTypes.func,
-  /**
-   * Define is input required or no.
-   */
-  required: PropTypes.bool,
-  /**
-   * The switch between mobile and desktop version
-   */
-  screenType: PropTypes.oneOf(screenTypes),
-  /**
-   * Define is  need input info icon required.
-   */
-  withInfoIcon: PropTypes.bool,
-  /**
-   * ExtendedInput info icon title.
-   */
-  infoIconTitle: PropTypes.string,
-  /**
-   * Max Length of input Value
-   */
-  maxLength: PropTypes.number,
-  /**
-   * Show Remaining Length of input value, works only with maxLength
-   */
-  showRemainingLength: PropTypes.bool,
-  /**
-   * Decoration that can be added to the inner input field at the start
-   */
-  startAdornment: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.number, PropTypes.node]),
-  /**
-   * Decoration that can be added to the inner input field at the end
-   */
-  endAdornment: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.number, PropTypes.node])
-};
-ExtendedInput.defaultProps = {
-  step: 1,
-  placeholder: '',
-  itemsDirection: inputConfig.itemsDirection[0],
-  type: inputConfig.type[0],
-  appearance: inputConfig.appearance[0],
-  inputSize: inputConfig.size[1],
-  cornerRadius: inputConfig.cornerRadius[0],
-  clickableIcon: false,
-  readOnly: false,
-  flexibility: inputConfig.flexibility[0],
-  colorBorderOnError: true,
-  showErrorIcon: false,
-  showNumberIcon: true,
-  showClickableTooltipOnError: true,
-  showErrorWithTooltip: false,
-  colorOnValid: false,
-  showIconOnValid: false,
-  canClear: false,
-  isValid: true,
-  onChange: noop,
-  onClick: noop,
-  onClear: noop,
-  onFocus: noop,
-  onBlur: noop,
-  onIconClick: noop,
-  withInfoIcon: false,
-  infoIconTitle: '',
-  label: '',
-  labelAppearance: inputConfig.labelAppearance[0],
-  description: '',
-  isDropdown: false,
-  writeProtected: false,
-  defaultValue: '',
-  screenType: screenTypes[0]
-};
-
-export { ExtendedInput as default };