@itcase/ui 1.1.6 → 1.1.8

package/dist/cjs/components/InputMask.js

@@ -0,0 +1,233 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+const inputMaskConfig = {
+  state: {},
+  setState: newComponent => {
+    inputMaskConfig.state = newComponent;
+  },
+  appearance: {},
+  setAppearance: newComponent => {
+    inputMaskConfig.appearance = newComponent;
+  }
+};
+const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(props, ref) {
+  const {
+    appearance,
+    state,
+    id,
+    index,
+    dataTestId,
+    type,
+    className,
+    name,
+    placeholder,
+    isDisabled,
+    value,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyDown
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'input_size_',
+    propsKey: 'size'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'input_shape_',
+    propsKey: 'shape'
+  });
+  const textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text_size_',
+    propsKey: 'textSize'
+  });
+  const textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_',
+    propsKey: 'textColor'
+  });
+  const textColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_disabled_',
+    propsKey: 'textColor'
+  });
+  const caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'caret-color_',
+    propsKey: 'caret'
+  });
+  const placeholderTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'placeholder-text-color_',
+    propsKey: 'placeholderTextColor'
+  });
+  const placeholderTextColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'placeholder-text-color_disabled_',
+    propsKey: 'placeholderTextColorDisabled'
+  });
+  const weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-weight_',
+    propsKey: 'textWeight'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderWidthDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_disabled_',
+    propsKey: 'borderWidthDisabled'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_disabled_',
+    propsKey: 'borderColorDisabled'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  return /*#__PURE__*/React__default.default.createElement("input", {
+    className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass || inputMaskConfig.appearance[appearance]?.shape && `input_shape_${inputMaskConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || inputMaskConfig.appearance[appearance]?.textSize && `text_size_${inputMaskConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass || inputMaskConfig.appearance[appearance]?.size && `input_size_${inputMaskConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || inputMaskConfig.appearance[appearance]?.borderColor && `border-color_${inputMaskConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputMaskConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${inputMaskConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputMaskConfig.appearance[appearance]?.textColor && `text-color_${inputMaskConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? borderColorClass || inputMaskConfig.state[state]?.borderColor && `border-color_${inputMaskConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputMaskConfig.state[state]?.borderColor && `border-color_disabled_${inputMaskConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputMaskConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputMaskConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputMaskConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputMaskConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputMaskConfig.state[state]?.textColor && `text-color_${inputMaskConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputMaskConfig.state[state]?.textColor && `text-color_${inputMaskConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    type: type,
+    id: id,
+    index: index,
+    ref: ref,
+    disabled: isDisabled,
+    placeholder: placeholder,
+    "data-test-id": dataTestId || (name ? `${name}Input` : 'input'),
+    value: value,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown
+  });
+});
+Input.propTypes = {
+  id: PropTypes__default.default.string,
+  className: PropTypes__default.default.string,
+  placeholder: PropTypes__default.default.string,
+  value: PropTypes__default.default.string,
+  checked: PropTypes__default.default.bool,
+  isDisabled: PropTypes__default.default.bool,
+  onBlur: PropTypes__default.default.func,
+  onChange: PropTypes__default.default.func,
+  onKeyDown: PropTypes__default.default.func,
+  type: PropTypes__default.default.string
+};
+Input.defaultProps = {
+  size: 'm',
+  type: 'text'
+};
+Input.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Input",
+  "props": {
+    "size": {
+      "defaultValue": {
+        "value": "'m'",
+        "computed": false
+      },
+      "required": false
+    },
+    "type": {
+      "defaultValue": {
+        "value": "'text'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "placeholder": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "value": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "checked": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "isDisabled": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "onBlur": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onChange": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onKeyDown": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Input = Input;
+exports.inputMaskConfig = inputMaskConfig;

package/dist/cjs/components/InputPassword.js

@@ -0,0 +1,255 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var Icon = require('../Icon-UBahY607.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('../Link-BoShjCEw.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('../hooks/useStyles.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('react-inlinesvg');
+require('./Tooltip.js');
+require('../Text-D7Aq1i5R.js');
+require('./Title.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textSize.js');
+require('../constants/componentProps/shape.js');
+require('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+const inputPasswordConfig = {
+  state: {},
+  setState: newComponent => {
+    inputPasswordConfig.state = newComponent;
+  },
+  appearance: {},
+  setAppearance: newComponent => {
+    inputPasswordConfig.appearance = newComponent;
+  }
+};
+function InputMask(props) {
+  const {
+    appearance,
+    state,
+    id,
+    iconFill,
+    iconRevealableHide,
+    iconRevealableShow,
+    iconFillHover,
+    iconShape,
+    iconSize,
+    isRevealable,
+    className,
+    placeholder,
+    disabled,
+    value,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyDown
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'input-password__input_size_',
+    propsKey: 'size'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'input-password__input_shape_',
+    propsKey: 'shape'
+  });
+  const textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text_size_',
+    propsKey: 'textSize'
+  });
+  const textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_',
+    propsKey: 'textColor'
+  });
+  const caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'caret-color_',
+    propsKey: 'caret'
+  });
+  const placeholderTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'placeholder-text-color_',
+    propsKey: 'placeholderTextColor'
+  });
+  const weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-weight_',
+    propsKey: 'textWeight'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const [isRevealed, setIsRevealed] = React.useState(false);
+  const inputType = React.useMemo(() => {
+    return isRevealed ? 'text' : 'password';
+  }, [isRevealed]);
+  const revealeHandler = React.useCallback(e => {
+    e.preventDefault();
+    setIsRevealed(prev => !prev);
+  }, [setIsRevealed]);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: "input-password"
+  }, /*#__PURE__*/React__default.default.createElement("input", {
+    className: clsx__default.default(className, 'input-password__input', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, placeholderTextColorClass, shapeClass || inputPasswordConfig.appearance[appearance]?.shape && `input-password__input_shape_${inputPasswordConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || inputPasswordConfig.appearance[appearance]?.textSize && `text_size_${inputPasswordConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass, borderWidthClass, sizeClass || inputPasswordConfig.appearance[appearance]?.size && `input-password__input_size_${inputPasswordConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || inputPasswordConfig.state[state]?.borderColor && `border-color_${inputPasswordConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() || inputPasswordConfig.appearance[appearance]?.borderColor && `border-color_${inputPasswordConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputPasswordConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputPasswordConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() || inputPasswordConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${inputPasswordConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputPasswordConfig.state[state]?.textColor && `text-color_${inputPasswordConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() || inputPasswordConfig.appearance[appearance]?.textColor && `text-color_${inputPasswordConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    type: inputType,
+    id: id,
+    disabled: disabled,
+    placeholder: placeholder,
+    value: value,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown
+  }), isRevealable && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
+    className: "input-password__icon",
+    iconFill: iconFill,
+    iconFillHover: iconFillHover,
+    SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow,
+    imageSrc: isRevealed ? iconRevealableHide : iconRevealableShow,
+    shape: iconShape,
+    size: iconSize,
+    onClick: revealeHandler
+  }));
+}
+InputMask.propTypes = {
+  id: PropTypes__default.default.string,
+  className: PropTypes__default.default.string,
+  placeholder: PropTypes__default.default.string,
+  value: PropTypes__default.default.string,
+  checked: PropTypes__default.default.bool,
+  disabled: PropTypes__default.default.bool,
+  onBlur: PropTypes__default.default.func,
+  onChange: PropTypes__default.default.func,
+  onKeyDown: PropTypes__default.default.func,
+  type: PropTypes__default.default.string
+};
+InputMask.defaultProps = {
+  size: 'm',
+  type: 'text'
+};
+InputMask.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "InputMask",
+  "props": {
+    "size": {
+      "defaultValue": {
+        "value": "'m'",
+        "computed": false
+      },
+      "required": false
+    },
+    "type": {
+      "defaultValue": {
+        "value": "'text'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "placeholder": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "value": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "checked": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "disabled": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "onBlur": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onChange": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onKeyDown": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.InputMask = InputMask;
+exports.inputPasswordConfig = inputPasswordConfig;