@invoicebox/ui 0.1.0-alpha.301 → 0.1.0-alpha.303

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

@@ -19,6 +19,7 @@ var _Scrollbar = require("../../../../common/Scrollbar");
 var _constants = require("../../../constants");
 var _palette = require("../../../../../palette");
 var _ModernPlaceholder = require("../../../ModernPlaceholder");
+var _constants2 = require("../../../InputLabel/constants");
 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); }
@@ -198,10 +199,10 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     required: required,
     useModernStyles: useModernStyles,
     size: size,
-    left: useModernStyles ? inputPaddingLeft : undefined
+    left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - _constants2.LABEL_PADDING : undefined
   }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, children ? /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
     visible: isModernPlaceholderVisible,
-    paddingLeft: inputPaddingLeft !== null && inputPaddingLeft !== void 0 ? inputPaddingLeft : 20,
+    paddingLeft: typeof inputPaddingLeft === 'number' ? inputPaddingLeft : 20,
     paddingTop: _constants.SIZE_PARAMS_MAP[size].paddingTop,
     size: size,
     required: required

package/dist/components/form/InputLabel/constants.d.ts

@@ -0,0 +1 @@
+export declare const LABEL_PADDING = 10;

package/dist/components/form/InputLabel/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LABEL_PADDING = void 0;
+var LABEL_PADDING = exports.LABEL_PADDING = 10;

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

@@ -34,10 +34,10 @@ var InputLabel = exports.InputLabel = function InputLabel(_ref) {
   }, label && /*#__PURE__*/_react["default"].createElement(S.Label, {
     $palette: palette,
     $inFocus: inFocus,
-    variant: size && useModernStyles ? _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].labelVariant : 'captionRegular',
+    variant: size && useModernStyles ? _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelVariant : 'captionRegular',
     $required: required,
     $useModernStyles: useModernStyles,
-    $paddingTop: size && useModernStyles ? _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].labelPaddingTop : 0,
+    $paddingTop: size && useModernStyles ? _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelPaddingTop : 0,
     $left: left
   }, label), children);
 };

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

@@ -7,23 +7,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.Wrapper = exports.Label = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Typography = require("../../common/Typography");
+var _constants = require("./constants");
 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; }
 var labelFadeIn = (0, _styledComponents.keyframes)(["from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}"]);
 var Label = exports.Label = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__Label",
   componentId: "sc-1prrc3p-0"
-})(["border-radius:10px;position:absolute;top:", ";left:", ";background-color:", ";padding:0 10px;z-index:2;transition:color 0.2s ease-in-out 0s;animation:", " 0.15s ease;color:", ";", ""], function (_ref) {
+})(["border-radius:10px;position:absolute;top:", ";left:", ";background-color:", ";padding:0 ", "px;z-index:2;transition:color 0.2s ease-in-out 0s;animation:", " 0.15s ease;color:", ";", ""], function (_ref) {
   var $paddingTop = _ref.$paddingTop;
   return $paddingTop ? "".concat($paddingTop, "px") : 0;
 }, function (_ref2) {
   var $left = _ref2.$left;
-  return $left ? "".concat($left, "px") : '10px';
+  return typeof $left === 'number' ? "".concat($left, "px") : '10px';
 }, function (_ref3) {
   var $palette = _ref3.$palette,
     $useModernStyles = _ref3.$useModernStyles;
   return $useModernStyles ? $palette.bgModern : $palette.bg;
-}, labelFadeIn, function (_ref4) {
+}, _constants.LABEL_PADDING, labelFadeIn, function (_ref4) {
   var $inFocus = _ref4.$inFocus,
     $palette = _ref4.$palette;
   return $inFocus ? $palette.textHighlight : $palette.text;

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

@@ -34,6 +34,17 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     required = _ref.required,
     _ref$useModernStyles = _ref.useModernStyles,
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+  var inputLabel = (0, _react.useMemo)(function () {
+    if (useModernStyles) {
+      if (value || inFocus) {
+        return label;
+      } else {
+        return undefined;
+      }
+    } else {
+      return label;
+    }
+  }, [inFocus, label, value, useModernStyles]);
   var isShowResetIcon = !!value && !!onReset;
   var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
     return useModernStyles && !isOpen && !value;
@@ -50,7 +61,7 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
   }, [value, isOpen, useModernStyles, size, label]);
   return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
     inFocus: inFocus,
-    label: label,
+    label: inputLabel,
     required: required,
     useModernStyles: useModernStyles,
     size: size

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

@@ -210,22 +210,11 @@ var Select = exports.Select = function Select(_ref) {
     if (!renderValue || !(selectedOption !== null && selectedOption !== void 0 && selectedOption.entity)) return;
     return renderValue(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entity);
   }, [renderValue, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entity]);
-  var inputLabel = (0, _react.useMemo)(function () {
-    if (useModernStyles) {
-      if (selectedOption || isOpen) {
-        return label;
-      } else {
-        return undefined;
-      }
-    } else {
-      return label;
-    }
-  }, [isOpen, label, selectedOption, useModernStyles]);
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
     ref: isDrawerOptions ? undefined : wrapperRef
   }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_Input.Input, {
     ref: inputRef,
-    label: inputLabel,
+    label: label,
     hasError: hasError,
     inFocus: inFocus,
     placeholder: placeholder,

package/dist/components/form/constants.d.ts

@@ -9,6 +9,6 @@ export declare const MODERN_STYLE_SIZE_PARAMS_MAP: Record<TSizes, {
     paddingTop: number;
     paddingBottom: number;
     variant: keyof typeof typography;
-    labelVariant: keyof typeof typography;
-    labelPaddingTop: number;
+    $labelVariant: keyof typeof typography;
+    $labelPaddingTop: number;
 }>;

package/dist/components/form/constants.js

@@ -26,21 +26,21 @@ var MODERN_STYLE_SIZE_PARAMS_MAP = exports.MODERN_STYLE_SIZE_PARAMS_MAP = {
     paddingTop: 20,
     paddingBottom: 12,
     variant: 'bodyMRegular',
-    labelVariant: 'captionRegular',
-    labelPaddingTop: 14
+    $labelVariant: 'captionRegular',
+    $labelPaddingTop: 14
   },
   M: {
     paddingTop: 20,
     paddingBottom: 6,
     variant: 'bodyMRegular',
-    labelVariant: 'captionRegular',
-    labelPaddingTop: 12
+    $labelVariant: 'captionRegular',
+    $labelPaddingTop: 12
   },
   XS: {
     paddingTop: 16,
     paddingBottom: 4,
     variant: 'labelsHintsRegular',
-    labelVariant: 'captionSRegular',
-    labelPaddingTop: 12
+    $labelVariant: 'captionSRegular',
+    $labelPaddingTop: 12
   }
 };

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

@@ -19,6 +19,7 @@ import { Scrollbar } from '../../../../common/Scrollbar';
 import { MODERN_STYLE_SIZE_PARAMS_MAP, SIZE_PARAMS_MAP } from '../../../constants';
 import { useComponentPalette } from '../../../../../palette';
 import { ModernPlaceholder } from '../../../ModernPlaceholder';
+import { LABEL_PADDING } from '../../../InputLabel/constants';
 var DefaultSkeletonItem = function DefaultSkeletonItem() {
   return /*#__PURE__*/React.createElement(S.DefaultSkeletonWrapper, null, /*#__PURE__*/React.createElement(Skeleton, {
     height: "20px"
@@ -189,10 +190,10 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     required: required,
     useModernStyles: useModernStyles,
     size: size,
-    left: useModernStyles ? inputPaddingLeft : undefined
+    left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - LABEL_PADDING : undefined
   }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, children ? /*#__PURE__*/React.createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
     visible: isModernPlaceholderVisible,
-    paddingLeft: inputPaddingLeft !== null && inputPaddingLeft !== void 0 ? inputPaddingLeft : 20,
+    paddingLeft: typeof inputPaddingLeft === 'number' ? inputPaddingLeft : 20,
     paddingTop: SIZE_PARAMS_MAP[size].paddingTop,
     size: size,
     required: required

package/dist/esm/components/form/InputLabel/constants.js

@@ -0,0 +1 @@
+export var LABEL_PADDING = 10;

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

@@ -24,10 +24,10 @@ export var InputLabel = function InputLabel(_ref) {
   }, label && /*#__PURE__*/React.createElement(S.Label, {
     $palette: palette,
     $inFocus: inFocus,
-    variant: size && useModernStyles ? MODERN_STYLE_SIZE_PARAMS_MAP[size].labelVariant : 'captionRegular',
+    variant: size && useModernStyles ? MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelVariant : 'captionRegular',
     $required: required,
     $useModernStyles: useModernStyles,
-    $paddingTop: size && useModernStyles ? MODERN_STYLE_SIZE_PARAMS_MAP[size].labelPaddingTop : 0,
+    $paddingTop: size && useModernStyles ? MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelPaddingTop : 0,
     $left: left
   }, label), children);
 };

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

@@ -1,20 +1,21 @@
 import styled, { css, keyframes } from 'styled-components';
 import { Typography } from '../../common/Typography';
+import { LABEL_PADDING } from './constants';
 var labelFadeIn = keyframes(["from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}"]);
 export var Label = styled(Typography).withConfig({
   displayName: "styles__Label",
   componentId: "sc-1prrc3p-0"
-})(["border-radius:10px;position:absolute;top:", ";left:", ";background-color:", ";padding:0 10px;z-index:2;transition:color 0.2s ease-in-out 0s;animation:", " 0.15s ease;color:", ";", ""], function (_ref) {
+})(["border-radius:10px;position:absolute;top:", ";left:", ";background-color:", ";padding:0 ", "px;z-index:2;transition:color 0.2s ease-in-out 0s;animation:", " 0.15s ease;color:", ";", ""], function (_ref) {
   var $paddingTop = _ref.$paddingTop;
   return $paddingTop ? "".concat($paddingTop, "px") : 0;
 }, function (_ref2) {
   var $left = _ref2.$left;
-  return $left ? "".concat($left, "px") : '10px';
+  return typeof $left === 'number' ? "".concat($left, "px") : '10px';
 }, function (_ref3) {
   var $palette = _ref3.$palette,
     $useModernStyles = _ref3.$useModernStyles;
   return $useModernStyles ? $palette.bgModern : $palette.bg;
-}, labelFadeIn, function (_ref4) {
+}, LABEL_PADDING, labelFadeIn, function (_ref4) {
   var $inFocus = _ref4.$inFocus,
     $palette = _ref4.$palette;
   return $inFocus ? $palette.textHighlight : $palette.text;

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

@@ -25,6 +25,17 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     required = _ref.required,
     _ref$useModernStyles = _ref.useModernStyles,
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+  var inputLabel = useMemo(function () {
+    if (useModernStyles) {
+      if (value || inFocus) {
+        return label;
+      } else {
+        return undefined;
+      }
+    } else {
+      return label;
+    }
+  }, [inFocus, label, value, useModernStyles]);
   var isShowResetIcon = !!value && !!onReset;
   var isModernPlaceholderVisible = useMemo(function () {
     return useModernStyles && !isOpen && !value;
@@ -41,7 +52,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [value, isOpen, useModernStyles, size, label]);
   return /*#__PURE__*/React.createElement(InputLabel, {
     inFocus: inFocus,
-    label: label,
+    label: inputLabel,
     required: required,
     useModernStyles: useModernStyles,
     size: size

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

@@ -200,22 +200,11 @@ export var Select = function Select(_ref) {
     if (!renderValue || !(selectedOption !== null && selectedOption !== void 0 && selectedOption.entity)) return;
     return renderValue(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entity);
   }, [renderValue, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entity]);
-  var inputLabel = useMemo(function () {
-    if (useModernStyles) {
-      if (selectedOption || isOpen) {
-        return label;
-      } else {
-        return undefined;
-      }
-    } else {
-      return label;
-    }
-  }, [isOpen, label, selectedOption, useModernStyles]);
   return /*#__PURE__*/React.createElement(S.Wrapper, {
     ref: isDrawerOptions ? undefined : wrapperRef
   }, /*#__PURE__*/React.createElement(S.InputWrapper, null, /*#__PURE__*/React.createElement(Input, {
     ref: inputRef,
-    label: inputLabel,
+    label: label,
     hasError: hasError,
     inFocus: inFocus,
     placeholder: placeholder,

package/dist/esm/components/form/constants.js

@@ -20,21 +20,21 @@ export var MODERN_STYLE_SIZE_PARAMS_MAP = {
     paddingTop: 20,
     paddingBottom: 12,
     variant: 'bodyMRegular',
-    labelVariant: 'captionRegular',
-    labelPaddingTop: 14
+    $labelVariant: 'captionRegular',
+    $labelPaddingTop: 14
   },
   M: {
     paddingTop: 20,
     paddingBottom: 6,
     variant: 'bodyMRegular',
-    labelVariant: 'captionRegular',
-    labelPaddingTop: 12
+    $labelVariant: 'captionRegular',
+    $labelPaddingTop: 12
   },
   XS: {
     paddingTop: 16,
     paddingBottom: 4,
     variant: 'labelsHintsRegular',
-    labelVariant: 'captionSRegular',
-    labelPaddingTop: 12
+    $labelVariant: 'captionSRegular',
+    $labelPaddingTop: 12
   }
 };

package/package.json

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