@invoicebox/ui 0.1.0-alpha.276 → 0.1.0-alpha.278

package/dist/components/common/Drawer/index.d.ts

@@ -1,5 +1,6 @@
 import { FC, ReactNode } from 'react';
-export type TProps = {
+import { SheetProps } from 'react-modal-sheet/src/types';
+export type TProps = Pick<SheetProps, 'onOpenEnd'> & {
     children: ReactNode;
     onClose: () => void;
     title?: string;
@@ -7,5 +8,6 @@ export type TProps = {
     isOpen: boolean;
     isPadding?: boolean;
     borderColor?: string;
+    overflow?: string;
 };
 export declare const Drawer: FC<TProps>;

package/dist/components/common/Drawer/index.js

@@ -26,7 +26,9 @@ var Drawer = exports.Drawer = function Drawer(_ref) {
     onClose = _ref.onClose,
     _ref$isPadding = _ref.isPadding,
     isPadding = _ref$isPadding === void 0 ? true : _ref$isPadding,
-    borderColor = _ref.borderColor;
+    borderColor = _ref.borderColor,
+    overflow = _ref.overflow,
+    onOpenEnd = _ref.onOpenEnd;
   var palette = (0, _palette.useComponentPalette)('drawer');
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -50,16 +52,19 @@ var Drawer = exports.Drawer = function Drawer(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_reactModalSheet.Sheet, {
     detent: "content",
     isOpen: isOpen,
-    onClose: onClose
+    onClose: onClose,
+    onOpenEnd: onOpenEnd
   }, /*#__PURE__*/_react["default"].createElement(S.StyledSheetContainer, {
     $isErrorBorder: isErrorBorder,
     $errorColor: palette.error,
-    $borderColor: borderColor
+    $borderColor: borderColor,
+    $overflow: overflow
   }, /*#__PURE__*/_react["default"].createElement(_reactModalSheet.Sheet.Content, null, /*#__PURE__*/_react["default"].createElement(S.DragIndicatorWrapper, null, /*#__PURE__*/_react["default"].createElement(_reactModalSheet.Sheet.DragIndicator, null)), title && /*#__PURE__*/_react["default"].createElement(S.Title, {
     $bg: palette.titleBg
   }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     variant: "headline4"
   }, title)), /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, {
+    $isBorderRadius: !title,
     $bgColor: palette.bg,
     $isPadding: isPadding
   }, children))), /*#__PURE__*/_react["default"].createElement(S.StyledSheetBackdrop, {

package/dist/components/common/Drawer/index.stories.js

@@ -64,7 +64,8 @@ var commonArgs = {
   isErrorBorder: false,
   onClose: (0, _addonActions.action)('close'),
   isPadding: false,
-  borderColor: undefined
+  borderColor: undefined,
+  overflow: 'hidden'
 };
 var Default = exports.Default = {
   args: commonArgs,

package/dist/components/common/Drawer/styles.d.ts

@@ -8,6 +8,7 @@ export declare const DragIndicatorWrapper: import("styled-components/dist/types"
 export declare const ChildrenWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isPadding: boolean;
     $bgColor: string;
+    $isBorderRadius?: boolean | undefined;
 }>> & string;
 export declare const StyledSheetContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     values?: {
@@ -351,6 +352,7 @@ export declare const StyledSheetContainer: import("styled-components/dist/types"
     $isErrorBorder?: boolean | undefined;
     $errorColor: string;
     $borderColor?: string | undefined;
+    $overflow?: string | undefined;
 }>> & string & Omit<import("react").ForwardRefExoticComponent<{
     values?: {
         [key: string]: import("motion-dom").MotionValue<number> | import("motion-dom").MotionValue<string>;

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

@@ -23,26 +23,32 @@ var DragIndicatorWrapper = exports.DragIndicatorWrapper = _styledComponents["def
 var ChildrenWrapper = exports.ChildrenWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__ChildrenWrapper",
   componentId: "sc-1kysg49-2"
-})(["", ";background-color:", ";"], function (_ref2) {
+})(["", ";background-color:", ";", ""], function (_ref2) {
   var $isPadding = _ref2.$isPadding;
   return $isPadding && 'padding: 32px 16px 36px';
 }, function (_ref3) {
   var $bgColor = _ref3.$bgColor;
   return $bgColor;
+}, function (_ref4) {
+  var $isBorderRadius = _ref4.$isBorderRadius;
+  return $isBorderRadius && (0, _styledComponents.css)(["border-radius:10px 10px 0 0;"]);
 });
 var StyledSheetContainer = exports.StyledSheetContainer = (0, _styledComponents["default"])(_reactModalSheet.Sheet.Container).withConfig({
   displayName: "styles__StyledSheetContainer",
   componentId: "sc-1kysg49-3"
-})(["overflow:hidden;box-shadow:none;border-radius:10px 10px 0 0;", ""], function (_ref4) {
-  var $isErrorBorder = _ref4.$isErrorBorder,
-    $errorColor = _ref4.$errorColor,
-    $borderColor = _ref4.$borderColor;
+})(["box-shadow:none;border-radius:10px 10px 0 0;", " ", ""], function (_ref5) {
+  var $isErrorBorder = _ref5.$isErrorBorder,
+    $errorColor = _ref5.$errorColor,
+    $borderColor = _ref5.$borderColor;
   return ($isErrorBorder || $borderColor) && (0, _styledComponents.css)(["border-top:2px solid ", ";"], $borderColor || $errorColor);
+}, function (_ref6) {
+  var $overflow = _ref6.$overflow;
+  return $overflow === 'visible' && (0, _styledComponents.css)(["overflow:visible;.react-modal-sheet-content-scroller{overflow-y:visible !important;}"]);
 });
 var StyledSheetBackdrop = exports.StyledSheetBackdrop = (0, _styledComponents["default"])(_reactModalSheet.Sheet.Backdrop).withConfig({
   displayName: "styles__StyledSheetBackdrop",
   componentId: "sc-1kysg49-4"
-})(["background-color:", " !important;"], function (_ref5) {
-  var $bgColor = _ref5.$bgColor;
+})(["background-color:", " !important;"], function (_ref7) {
+  var $bgColor = _ref7.$bgColor;
   return $bgColor;
 });

package/dist/components/common/EntityAutocompleteOptionsDrawer/index.d.ts

@@ -1,12 +1,11 @@
 import { ReactNode } from 'react';
+import { TProps as TDrawerProps } from '../Drawer';
 type TOption<TEntity> = {
     value: string;
     entity: TEntity;
     isDisabled?: boolean;
 };
-export type TProps<TEntity> = {
-    isOpen: boolean;
-    onClose: () => void;
+export type TProps<TEntity> = Pick<TDrawerProps, 'onOpenEnd' | 'isOpen' | 'onClose'> & {
     options: Array<TOption<TEntity>>;
     renderOption: (option: TOption<TEntity>) => ReactNode;
     onChange: (value: string, option?: TOption<TEntity>) => void;
@@ -14,5 +13,5 @@ export type TProps<TEntity> = {
     searchInputField: ReactNode;
     promptMessage?: string;
 };
-export declare const EntityAutocompleteOptionsDrawer: <TEntity>({ isOpen, onClose, options, renderOption, onChange, isLoadingOptions, promptMessage, searchInputField, }: TProps<TEntity>) => import("react/jsx-runtime").JSX.Element;
+export declare const EntityAutocompleteOptionsDrawer: <TEntity>({ isOpen, onClose, options, renderOption, onChange, isLoadingOptions, promptMessage, searchInputField, onOpenEnd, }: TProps<TEntity>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/common/EntityAutocompleteOptionsDrawer/index.js

@@ -22,7 +22,8 @@ var EntityAutocompleteOptionsDrawer = exports.EntityAutocompleteOptionsDrawer =
     onChange = _ref.onChange,
     isLoadingOptions = _ref.isLoadingOptions,
     promptMessage = _ref.promptMessage,
-    searchInputField = _ref.searchInputField;
+    searchInputField = _ref.searchInputField,
+    onOpenEnd = _ref.onOpenEnd;
   var palette = (0, _palette.useComponentPalette)('entityAutocompleteOptionsDrawer');
   var handleSelect = (0, _react.useCallback)(function (event) {
     var optionIndex = JSON.parse(event.currentTarget.dataset.index);
@@ -33,7 +34,8 @@ var EntityAutocompleteOptionsDrawer = exports.EntityAutocompleteOptionsDrawer =
   return /*#__PURE__*/_react["default"].createElement(_Drawer.Drawer, {
     isOpen: isOpen,
     onClose: onClose,
-    isPadding: false
+    isPadding: false,
+    onOpenEnd: onOpenEnd
   }, /*#__PURE__*/_react["default"].createElement(S.BodyWrapper, null, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, searchInputField), /*#__PURE__*/_react["default"].createElement(S.ContentWrapper, null, /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
     maxHeight: 380
   }, promptMessage && /*#__PURE__*/_react["default"].createElement(S.Prompt, {

package/package.json

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