@invoicebox/ui 0.1.0-alpha.231 → 0.1.0-alpha.232

package/dist/components/common/Dropdown/styles.js

@@ -15,7 +15,7 @@ var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
   componentId: "sc-1f1enhf-0"
 })(["padding:", ";overflow:hidden;border-radius:20px;box-shadow:0 10px 17px ", ";background:", ";min-width:", ";width:", ";position:absolute;left:", ";right:", ";z-index:", ";", ";", ";", ";"], function (_ref) {
   var $usePadding = _ref.$usePadding;
-  return $usePadding ? '8px;' : 'none';
+  return $usePadding ? '8px 0;' : 'none';
 }, function (_ref2) {
   var $palette = _ref2.$palette;
   return $palette.shadow;

package/dist/components/form/Autocomplete/components/Autocomplete/index.d.ts

@@ -25,6 +25,7 @@ type TControlProps = {
     size?: TSizes;
     required?: boolean;
     usePadding?: boolean;
+    dropdownWidth?: string;
 };
 export type TProps = TFieldProps & TControlProps;
 export declare const Autocomplete: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "name" | "readOnly" | "autoFocus" | "onFocus" | "onBlur"> & {

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

@@ -32,6 +32,7 @@ var DefaultSkeletonItem = function DefaultSkeletonItem() {
     height: "20px"
   }));
 };
+var MAX_LIST_HEIGHT = 294;
 var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var options = _ref.options,
     value = _ref.value,
@@ -46,7 +47,7 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     children = _ref.children,
     inputPaddingLeft = _ref.inputPaddingLeft,
     _ref$listHeight = _ref.listHeight,
-    listHeight = _ref$listHeight === void 0 ? 294 : _ref$listHeight,
+    listHeight = _ref$listHeight === void 0 ? MAX_LIST_HEIGHT : _ref$listHeight,
     hasError = _ref.hasError,
     isLoading = _ref.isLoading,
     optionsLoader = _ref.optionsLoader,
@@ -60,7 +61,8 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     required = _ref$required === void 0 ? false : _ref$required,
     readOnly = _ref.readOnly,
     _ref$usePadding = _ref.usePadding,
-    usePadding = _ref$usePadding === void 0 ? false : _ref$usePadding;
+    usePadding = _ref$usePadding === void 0 ? false : _ref$usePadding,
+    dropdownWidth = _ref.dropdownWidth;
   var isMobile = (0, _useMedia.useMobile)();
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -120,15 +122,18 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
   }, _constants.SIZE_PARAMS_MAP[size])))), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
     isOpen: isOpen && (!!options.length || !!isLoading),
     isAutoPosition: true,
-    width: "100%",
+    width: dropdownWidth || '100%',
     minWidth: isMobile ? '100%' : '340px',
     usePadding: usePadding
   }, isLoading ? optionsLoader || /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null), /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null), /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null)) : /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
     maxHeight: listHeight
   }, options.map(function (option, index) {
-    return /*#__PURE__*/_react["default"].createElement(S.OptionContainer, {
+    return /*#__PURE__*/_react["default"].createElement(S.OptionWrapperWithPadding, {
+      $usePadding: usePadding,
+      key: "".concat(option.value).concat(index)
+    }, /*#__PURE__*/_react["default"].createElement(S.OptionContainer, {
       $hoverBg: palette.hoverBg,
-      $recalculateWidthAndBorder: usePadding,
+      $usePadding: usePadding,
       key: "".concat(option.value).concat(index)
     }, /*#__PURE__*/_react["default"].createElement(S.OptionWrapper, {
       key: "".concat(option.value).concat(index),
@@ -138,7 +143,7 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
       "data-index": JSON.stringify(index)
     }, renderOption ? renderOption(option) : /*#__PURE__*/_react["default"].createElement(_AutocompleteDefaultOption.AutocompleteDefaultOption, {
       usePadding: usePadding
-    }, option.value)));
+    }, option.value))));
   }))));
 });
 Autocomplete.displayName = 'Autocomplete';

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

@@ -1,9 +1,12 @@
 /// <reference types="react" />
 export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const OptionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $recalculateWidthAndBorder: boolean;
+    $usePadding: boolean;
     $hoverBg: string;
 }>> & string;
+export declare const OptionWrapperWithPadding: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $usePadding: boolean;
+}>> & string;
 export declare const OptionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const ChildrenWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const InputLabelContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.OptionWrapper = exports.OptionContainer = exports.InputLabelContent = exports.DefaultSkeletonWrapper = exports.ChildrenWrapper = void 0;
+exports.Wrapper = exports.OptionWrapperWithPadding = exports.OptionWrapper = exports.OptionContainer = exports.InputLabelContent = exports.DefaultSkeletonWrapper = exports.ChildrenWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
@@ -13,29 +13,33 @@ var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
 var OptionContainer = exports.OptionContainer = _styledComponents["default"].div.withConfig({
   displayName: "styles__OptionContainer",
   componentId: "sc-1fp3ia8-1"
-})(["width:", ";border-radius:", ";&:hover{background-color:", ";}"], function (_ref) {
-  var $recalculateWidthAndBorder = _ref.$recalculateWidthAndBorder;
-  return $recalculateWidthAndBorder ? 'calc(100% - 14px)' : '100%';
+})(["width:100%;border-radius:", ";&:hover{background-color:", ";}"], function (_ref) {
+  var $usePadding = _ref.$usePadding;
+  return $usePadding ? '12px' : 'none';
 }, function (_ref2) {
-  var $recalculateWidthAndBorder = _ref2.$recalculateWidthAndBorder;
-  return $recalculateWidthAndBorder ? '12px' : 'none';
-}, function (_ref3) {
-  var $hoverBg = _ref3.$hoverBg;
+  var $hoverBg = _ref2.$hoverBg;
   return $hoverBg;
 });
+var OptionWrapperWithPadding = exports.OptionWrapperWithPadding = _styledComponents["default"].div.withConfig({
+  displayName: "styles__OptionWrapperWithPadding",
+  componentId: "sc-1fp3ia8-2"
+})(["padding:", ";"], function (_ref3) {
+  var $usePadding = _ref3.$usePadding;
+  return $usePadding ? '0 8px' : 'none';
+});
 var OptionWrapper = exports.OptionWrapper = _styledComponents["default"].button.withConfig({
   displayName: "styles__OptionWrapper",
-  componentId: "sc-1fp3ia8-2"
+  componentId: "sc-1fp3ia8-3"
 })(["width:100%;background:transparent;border:none;cursor:pointer;outline:none;color:inherit;padding:0;"]);
 var ChildrenWrapper = exports.ChildrenWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__ChildrenWrapper",
-  componentId: "sc-1fp3ia8-3"
+  componentId: "sc-1fp3ia8-4"
 })(["position:absolute;height:100%;width:100%;pointer-events:none;display:flex;align-items:center;"]);
 var InputLabelContent = exports.InputLabelContent = _styledComponents["default"].div.withConfig({
   displayName: "styles__InputLabelContent",
-  componentId: "sc-1fp3ia8-4"
+  componentId: "sc-1fp3ia8-5"
 })(["position:relative;"]);
 var DefaultSkeletonWrapper = exports.DefaultSkeletonWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__DefaultSkeletonWrapper",
-  componentId: "sc-1fp3ia8-5"
+  componentId: "sc-1fp3ia8-6"
 })(["padding:6px 12px;"]);

package/dist/components/form/Select/index.d.ts

@@ -28,5 +28,6 @@ export type TProps<TValue> = Pick<TInputProps, 'label' | 'hasError' | 'placehold
     isLoading?: boolean;
     required?: boolean;
     usePadding?: boolean;
+    dropdownWidth?: string;
 };
-export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, name, value, renderValue, onChange, options, groups, isResetButtonEnabled, size, renderOption, dropdownHeader, isDrawerOptions, renderGroup, scrollbarMaxHeight, scrollbarHeader, emptyOptionsLabel, isLoading, onBlur, required, usePadding, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, name, value, renderValue, onChange, options, groups, isResetButtonEnabled, size, renderOption, dropdownHeader, isDrawerOptions, renderGroup, scrollbarMaxHeight, scrollbarHeader, emptyOptionsLabel, isLoading, onBlur, required, usePadding, dropdownWidth, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;

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

@@ -54,7 +54,8 @@ var Select = exports.Select = function Select(_ref) {
     onBlur = _ref.onBlur,
     required = _ref.required,
     _ref$usePadding = _ref.usePadding,
-    usePadding = _ref$usePadding === void 0 ? false : _ref$usePadding;
+    usePadding = _ref$usePadding === void 0 ? false : _ref$usePadding,
+    dropdownWidth = _ref.dropdownWidth;
   var palette = (0, _palette.useComponentPalette)('select');
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
       onBlur: onBlur
@@ -154,13 +155,16 @@ var Select = exports.Select = function Select(_ref) {
     }
     return null;
   };
-  var scrollbarContent = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, scrollbarHeader, optionGroups.map(function (_ref2) {
+  var scrollbarContent = /*#__PURE__*/_react["default"].createElement(S.ScrollbarContent, null, scrollbarHeader, optionGroups.map(function (_ref2) {
     var group = _ref2.group,
       groupOptions = _ref2.options;
     return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
       key: (group === null || group === void 0 ? void 0 : group.id) || null
     }, handleGroupRender(group), groupOptions.map(function (option) {
-      return /*#__PURE__*/_react["default"].createElement(S.Option, {
+      return /*#__PURE__*/_react["default"].createElement(S.OptionWrapper, {
+        $usePadding: usePadding,
+        key: option.value
+      }, /*#__PURE__*/_react["default"].createElement(S.Option, {
         key: option.value,
         $palette: palette,
         variant: "bodyMRegular",
@@ -168,8 +172,8 @@ var Select = exports.Select = function Select(_ref) {
         "data-value": JSON.stringify(option.value),
         "data-option-identifier": OPTION_IDENTIFIER,
         $isGrouped: !!group && !renderOption,
-        $recalculateWidthAndBorder: usePadding
-      }, handleOptionRender(option));
+        $usePadding: usePadding
+      }, handleOptionRender(option)));
     }));
   }));
   var emptyLabel = /*#__PURE__*/_react["default"].createElement(S.DefaultOptionWrapper, null, /*#__PURE__*/_react["default"].createElement(S.EmptyLabel, {
@@ -228,7 +232,7 @@ var Select = exports.Select = function Select(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(S.DrawerContent, null, handleDrawerContentRender())) : /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
     isOpen: isOpen,
     isAutoPosition: true,
-    width: "100%",
+    width: dropdownWidth || '100%',
     usePadding: usePadding
   }, handleDropdownContentRender()));
 };

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

@@ -2,10 +2,13 @@
 import { TSelectPalette } from './palette';
 export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const OptionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $usePadding: boolean;
+}>> & string;
 export declare const Option: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
     $palette: TSelectPalette;
     $isGrouped: boolean;
-    $recalculateWidthAndBorder: boolean;
+    $usePadding: boolean;
 }>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
 export declare const Group: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
 export declare const DefaultOptionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
@@ -16,3 +19,4 @@ export declare const DrawerBottom: import("styled-components/dist/types").IStyle
 export declare const EmptyLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
     $color: string;
 }>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
+export declare const ScrollbarContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.Option = exports.InputWrapper = exports.Group = exports.EmptyLabel = exports.DrawerContent = exports.DrawerBottom = exports.DefaultOptionWrapper = void 0;
+exports.Wrapper = exports.ScrollbarContent = exports.OptionWrapper = exports.Option = exports.InputWrapper = exports.Group = exports.EmptyLabel = exports.DrawerContent = exports.DrawerBottom = exports.DefaultOptionWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Typography = require("../../common/Typography");
 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); }
@@ -17,15 +17,19 @@ var InputWrapper = exports.InputWrapper = _styledComponents["default"].div.withC
   displayName: "styles__InputWrapper",
   componentId: "sc-1x9n0z5-1"
 })(["cursor:pointer;input{cursor:pointer;}"]);
+var OptionWrapper = exports.OptionWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__OptionWrapper",
+  componentId: "sc-1x9n0z5-2"
+})(["padding:", ";"], function (_ref) {
+  var $usePadding = _ref.$usePadding;
+  return $usePadding ? '0 8px' : 'none';
+});
 var Option = exports.Option = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__Option",
-  componentId: "sc-1x9n0z5-2"
-})(["overflow:hidden;width:", ";text-align:left;transition:all 0.2s ease-in-out 0s;box-sizing:border-box;cursor:pointer;border-radius:", ";&:hover{background-color:", ";}", ""], function (_ref) {
-  var $recalculateWidthAndBorder = _ref.$recalculateWidthAndBorder;
-  return $recalculateWidthAndBorder ? 'calc(100% - 14px)' : '100%';
-}, function (_ref2) {
-  var $recalculateWidthAndBorder = _ref2.$recalculateWidthAndBorder;
-  return $recalculateWidthAndBorder ? '12px' : 'none';
+  componentId: "sc-1x9n0z5-3"
+})(["overflow:hidden;width:100%;text-align:left;transition:all 0.2s ease-in-out 0s;box-sizing:border-box;cursor:pointer;border-radius:", ";&:hover{background-color:", ";}", ""], function (_ref2) {
+  var $usePadding = _ref2.$usePadding;
+  return $usePadding ? '12px' : 'none';
 }, function (_ref3) {
   var $palette = _ref3.$palette;
   return $palette.bgHover;
@@ -35,27 +39,31 @@ var Option = exports.Option = (0, _styledComponents["default"])(_Typography.Typo
 });
 var Group = exports.Group = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__Group",
-  componentId: "sc-1x9n0z5-3"
+  componentId: "sc-1x9n0z5-4"
 })(["padding:12px 20px;"]);
 var DefaultOptionWrapper = exports.DefaultOptionWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__DefaultOptionWrapper",
-  componentId: "sc-1x9n0z5-4"
+  componentId: "sc-1x9n0z5-5"
 })(["padding:", ";"], function (_ref5) {
   var $usePadding = _ref5.$usePadding;
   return $usePadding ? '12px' : '12px 20px';
 });
 var DrawerContent = exports.DrawerContent = _styledComponents["default"].div.withConfig({
   displayName: "styles__DrawerContent",
-  componentId: "sc-1x9n0z5-5"
+  componentId: "sc-1x9n0z5-6"
 })(["padding-top:36px;"]);
 var DrawerBottom = exports.DrawerBottom = _styledComponents["default"].div.withConfig({
   displayName: "styles__DrawerBottom",
-  componentId: "sc-1x9n0z5-6"
+  componentId: "sc-1x9n0z5-7"
 })(["height:36px;"]);
 var EmptyLabel = exports.EmptyLabel = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__EmptyLabel",
-  componentId: "sc-1x9n0z5-7"
+  componentId: "sc-1x9n0z5-8"
 })(["color:", ";"], function (_ref6) {
   var $color = _ref6.$color;
   return $color;
-});
+});
+var ScrollbarContent = exports.ScrollbarContent = _styledComponents["default"].div.withConfig({
+  displayName: "styles__ScrollbarContent",
+  componentId: "sc-1x9n0z5-9"
+})([""]);

package/package.json

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