@invoicebox/ui 0.1.0-alpha.305 → 0.1.0-alpha.307

package/dist/components/form/Autocomplete/components/Autocomplete/index.js

@@ -97,7 +97,8 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
       size: size,
       label: label,
       inFocus: inFocus,
-      placeholder: placeholder
+      placeholder: placeholder,
+      required: required
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,

package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.js

@@ -43,7 +43,8 @@ var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_
       size: size,
       label: label,
       inFocus: inFocus,
-      placeholder: ''
+      placeholder: '',
+      required: required
     }),
     modernPlaceholder = _useInputStyles.modernPlaceholder,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,

package/dist/components/form/DateInput/index.js

@@ -86,7 +86,8 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
       label: label,
       inFocus: inFocus,
       placeholder: placeholder,
-      conditionHideModernPlaceholder: isOpen
+      conditionHideModernPlaceholder: isOpen,
+      required: required
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,

package/dist/components/form/DateTimeInput/index.js

@@ -97,7 +97,8 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
       label: label,
       inFocus: inFocus,
       placeholder: placeholder,
-      conditionHideModernPlaceholder: isOpen
+      conditionHideModernPlaceholder: isOpen,
+      required: required
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,

package/dist/components/form/PhoneInput/index.js

@@ -97,7 +97,8 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
       size: size,
       label: label,
       inFocus: inFocus,
-      placeholder: ''
+      placeholder: '',
+      required: required
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,

package/dist/components/form/PureInput/index.js

@@ -61,7 +61,7 @@ var PureInput = exports.PureInput = /*#__PURE__*/_react["default"].forwardRef(fu
     $paddingBottom: paddingBottom,
     $hasError: hasError,
     $inFocus: inFocus,
-    $hasBorder: hasBorder && !useModernStyles,
+    $hasBorder: hasBorder && (!useModernStyles || hasError),
     $palette: palette,
     $borderRadius: borderRadius,
     onChange: handleChange,

package/dist/components/form/SearchInput/index.js

@@ -13,7 +13,7 @@ var _useInputFocus2 = require("../../../hooks/useInputFocus");
 var _SearchIcon = require("./components/SearchIcon");
 var _palette = require("../../../palette");
 var _ResetButton = require("../ResetButton");
-var _constants = require("../constants");
+var _useInputStyles2 = require("../_hooks/useInputStyles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -40,47 +40,33 @@ var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(func
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
   var palette = (0, _palette.useComponentPalette)('searchInput');
+  var _useInputStyles = (0, _useInputStyles2.useInputStyles)({
+      isHaveValue: !!value,
+      useModernStyles: useModernStyles,
+      size: size,
+      label: placeholder,
+      inFocus: inFocus,
+      placeholder: placeholder
+    }),
+    inputLabel = _useInputStyles.inputLabel,
+    paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
+    modernPlaceholder = _useInputStyles.modernPlaceholder;
   var handleInputReset = (0, _react.useCallback)(function () {
     onChange('');
   }, [onChange]);
   var handleInputChange = (0, _react.useCallback)(function (event) {
     onChange(event.target.value);
   }, [onChange]);
-  var inputPlaceholder = (0, _react.useMemo)(function () {
-    if (useModernStyles) {
-      if (!inFocus) {
-        return placeholder;
-      } else {
-        return undefined;
-      }
-    } else {
-      return placeholder;
-    }
-  }, [placeholder, useModernStyles, inFocus]);
-  var inputLabel = (0, _react.useMemo)(function () {
-    if (useModernStyles && (value || inFocus)) {
-      return placeholder;
-    } else {
-      return undefined;
-    }
-  }, [inFocus, placeholder, value, useModernStyles]);
-  var paddingOptions = (0, _react.useMemo)(function () {
-    if ((value || inFocus) && useModernStyles && inputLabel) {
-      return _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size];
-    } else {
-      return _constants.SIZE_PARAMS_MAP[size];
-    }
-  }, [value, inFocus, useModernStyles, size, inputLabel]);
   return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
     useModernStyles: useModernStyles,
     size: size,
-    label: inputLabel
-  }, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+    label: useModernStyles ? inputLabel : undefined
+  }, modernPlaceholder, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     ref: ref,
     paddingRight: 56,
     hasBorder: hasBorder,
     onChange: handleInputChange,
-    placeholder: inputPlaceholder,
+    placeholder: useModernStyles ? undefined : placeholder,
     value: value,
     onFocus: handleFocus,
     onBlur: handleBlur,
@@ -89,12 +75,12 @@ var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(func
     name: name,
     maxLength: maxLength,
     isOnlyNumbers: isOnlyNumbers
-  }, paddingOptions, {
+  }, paddingAndVariantOptions, {
     useModernStyles: useModernStyles
   })), /*#__PURE__*/_react["default"].createElement(S.IconWrapper, {
     $inFocus: inFocus,
     $palette: palette,
-    $wideBottomSpacing: useModernStyles || !!inputLabel
+    $useModernStyles: useModernStyles
   }, value ? /*#__PURE__*/_react["default"].createElement(_ResetButton.ResetButton, {
     onClick: handleInputReset
   }) : /*#__PURE__*/_react["default"].createElement(_SearchIcon.SearchIcon, null)));

package/dist/components/form/SearchInput/styles.d.ts

@@ -3,5 +3,5 @@ import { TSearchInputPalette } from './palette';
 export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $inFocus: boolean;
     $palette: TSearchInputPalette;
-    $wideBottomSpacing: boolean;
+    $useModernStyles: boolean;
 }>> & string;

package/dist/components/form/SearchInput/styles.js

@@ -10,8 +10,8 @@ var IconWrapper = exports.IconWrapper = _styledComponents["default"].span.withCo
   displayName: "styles__IconWrapper",
   componentId: "sc-1cx3n6g-0"
 })(["position:absolute;right:20px;bottom:", ";transform:translateY(50%);display:flex;align-content:center;justify-content:center;opacity:", ";transition:all 0.2s ease-in-out 0s;color:", ";"], function (_ref) {
-  var $wideBottomSpacing = _ref.$wideBottomSpacing;
-  return $wideBottomSpacing ? "calc(50% - 5px)" : '50%';
+  var $useModernStyles = _ref.$useModernStyles;
+  return !$useModernStyles ? "calc(50% - 5px)" : '50%';
 }, function (_ref2) {
   var $inFocus = _ref2.$inFocus;
   return $inFocus ? 1 : 0.5;

package/dist/components/form/Select/components/Input/index.js

@@ -40,7 +40,8 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
       size: size,
       label: label,
       inFocus: inFocus,
-      placeholder: placeholder
+      placeholder: placeholder,
+      required: required
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,

package/dist/components/form/TextInput/index.js

@@ -57,7 +57,8 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
       size: size,
       label: label,
       inFocus: inFocus,
-      placeholder: placeholder
+      placeholder: placeholder,
+      required: required
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,

package/dist/esm/components/form/Autocomplete/components/Autocomplete/index.js

@@ -88,7 +88,8 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
       size: size,
       label: label,
       inFocus: inFocus,
-      placeholder: placeholder
+      placeholder: placeholder,
+      required: required
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,

package/dist/esm/components/form/CurrencyInput/CoreCurrencyInput/index.js

@@ -36,7 +36,8 @@ export var CoreCurrencyInput = function CoreCurrencyInput(_ref) {
       size: size,
       label: label,
       inFocus: inFocus,
-      placeholder: ''
+      placeholder: '',
+      required: required
     }),
     modernPlaceholder = _useInputStyles.modernPlaceholder,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,

package/dist/esm/components/form/DateInput/index.js

@@ -77,7 +77,8 @@ export var DateInput = function DateInput(_ref) {
       label: label,
       inFocus: inFocus,
       placeholder: placeholder,
-      conditionHideModernPlaceholder: isOpen
+      conditionHideModernPlaceholder: isOpen,
+      required: required
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,

package/dist/esm/components/form/DateTimeInput/index.js

@@ -88,7 +88,8 @@ export var DateTimeInput = function DateTimeInput(_ref) {
       label: label,
       inFocus: inFocus,
       placeholder: placeholder,
-      conditionHideModernPlaceholder: isOpen
+      conditionHideModernPlaceholder: isOpen,
+      required: required
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,

package/dist/esm/components/form/PhoneInput/index.js

@@ -87,7 +87,8 @@ export var PhoneInput = function PhoneInput(_ref) {
       size: size,
       label: label,
       inFocus: inFocus,
-      placeholder: ''
+      placeholder: '',
+      required: required
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,

package/dist/esm/components/form/PureInput/index.js

@@ -52,7 +52,7 @@ export var PureInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     $paddingBottom: paddingBottom,
     $hasError: hasError,
     $inFocus: inFocus,
-    $hasBorder: hasBorder && !useModernStyles,
+    $hasBorder: hasBorder && (!useModernStyles || hasError),
     $palette: palette,
     $borderRadius: borderRadius,
     onChange: handleChange,

package/dist/esm/components/form/SearchInput/index.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, forwardRef, useMemo } from 'react';
+import React, { useCallback, forwardRef } from 'react';
 import * as S from './styles';
 import { InputLabel } from '../InputLabel';
 import { PureInput } from '../PureInput';
@@ -7,7 +7,7 @@ import { useInputFocus } from '../../../hooks/useInputFocus';
 import { SearchIcon } from './components/SearchIcon';
 import { useComponentPalette } from '../../../palette';
 import { ResetButton } from '../ResetButton';
-import { MODERN_STYLE_SIZE_PARAMS_MAP, SIZE_PARAMS_MAP } from '../constants';
+import { useInputStyles } from '../_hooks/useInputStyles';
 export var SearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var name = _ref.name,
     onFocus = _ref.onFocus,
@@ -31,47 +31,33 @@ export var SearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
   var palette = useComponentPalette('searchInput');
+  var _useInputStyles = useInputStyles({
+      isHaveValue: !!value,
+      useModernStyles: useModernStyles,
+      size: size,
+      label: placeholder,
+      inFocus: inFocus,
+      placeholder: placeholder
+    }),
+    inputLabel = _useInputStyles.inputLabel,
+    paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,
+    modernPlaceholder = _useInputStyles.modernPlaceholder;
   var handleInputReset = useCallback(function () {
     onChange('');
   }, [onChange]);
   var handleInputChange = useCallback(function (event) {
     onChange(event.target.value);
   }, [onChange]);
-  var inputPlaceholder = useMemo(function () {
-    if (useModernStyles) {
-      if (!inFocus) {
-        return placeholder;
-      } else {
-        return undefined;
-      }
-    } else {
-      return placeholder;
-    }
-  }, [placeholder, useModernStyles, inFocus]);
-  var inputLabel = useMemo(function () {
-    if (useModernStyles && (value || inFocus)) {
-      return placeholder;
-    } else {
-      return undefined;
-    }
-  }, [inFocus, placeholder, value, useModernStyles]);
-  var paddingOptions = useMemo(function () {
-    if ((value || inFocus) && useModernStyles && inputLabel) {
-      return MODERN_STYLE_SIZE_PARAMS_MAP[size];
-    } else {
-      return SIZE_PARAMS_MAP[size];
-    }
-  }, [value, inFocus, useModernStyles, size, inputLabel]);
   return /*#__PURE__*/React.createElement(InputLabel, {
     useModernStyles: useModernStyles,
     size: size,
-    label: inputLabel
-  }, /*#__PURE__*/React.createElement(PureInput, _extends({
+    label: useModernStyles ? inputLabel : undefined
+  }, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
     ref: ref,
     paddingRight: 56,
     hasBorder: hasBorder,
     onChange: handleInputChange,
-    placeholder: inputPlaceholder,
+    placeholder: useModernStyles ? undefined : placeholder,
     value: value,
     onFocus: handleFocus,
     onBlur: handleBlur,
@@ -80,12 +66,12 @@ export var SearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     name: name,
     maxLength: maxLength,
     isOnlyNumbers: isOnlyNumbers
-  }, paddingOptions, {
+  }, paddingAndVariantOptions, {
     useModernStyles: useModernStyles
   })), /*#__PURE__*/React.createElement(S.IconWrapper, {
     $inFocus: inFocus,
     $palette: palette,
-    $wideBottomSpacing: useModernStyles || !!inputLabel
+    $useModernStyles: useModernStyles
   }, value ? /*#__PURE__*/React.createElement(ResetButton, {
     onClick: handleInputReset
   }) : /*#__PURE__*/React.createElement(SearchIcon, null)));

package/dist/esm/components/form/SearchInput/styles.js

@@ -3,8 +3,8 @@ export var IconWrapper = styled.span.withConfig({
   displayName: "styles__IconWrapper",
   componentId: "sc-1cx3n6g-0"
 })(["position:absolute;right:20px;bottom:", ";transform:translateY(50%);display:flex;align-content:center;justify-content:center;opacity:", ";transition:all 0.2s ease-in-out 0s;color:", ";"], function (_ref) {
-  var $wideBottomSpacing = _ref.$wideBottomSpacing;
-  return $wideBottomSpacing ? "calc(50% - 5px)" : '50%';
+  var $useModernStyles = _ref.$useModernStyles;
+  return !$useModernStyles ? "calc(50% - 5px)" : '50%';
 }, function (_ref2) {
   var $inFocus = _ref2.$inFocus;
   return $inFocus ? 1 : 0.5;

package/dist/esm/components/form/Select/components/Input/index.js

@@ -31,7 +31,8 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
       size: size,
       label: label,
       inFocus: inFocus,
-      placeholder: placeholder
+      placeholder: placeholder,
+      required: required
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,

package/dist/esm/components/form/TextInput/index.js

@@ -48,7 +48,8 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       size: size,
       label: label,
       inFocus: inFocus,
-      placeholder: placeholder
+      placeholder: placeholder,
+      required: required
     }),
     inputLabel = _useInputStyles.inputLabel,
     paddingAndVariantOptions = _useInputStyles.paddingAndVariantOptions,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.305",
+    "version": "0.1.0-alpha.307",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {