@sendoutcards/quantum-design-ui 1.8.38-alpha.3 → 1.8.38

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState, useMemo, useRef, useContext, useImperativeHandle } from 'react';
+import React, { useEffect, useCallback, useState, useMemo, useRef, useLayoutEffect, useContext, useImperativeHandle } from 'react';
 import { jsx, ThemeProvider, Global, css, useTheme } from '@emotion/react';
 import Color$1 from 'color';
 import { motion, useMotionValue, useTransform, animate, AnimatePresence, useElementScroll, AnimateSharedLayout, useAnimation } from 'framer-motion';
@@ -7,7 +7,6 @@ import fastDeepEqual from 'fast-deep-equal';
 import useResizeObserver from 'use-resize-observer';
 import ContentLoader from 'react-content-loader';
 import InfiniteScroll from 'react-infinite-scroller';
-import { Page as Page$1, AnimatePresence as AnimatePresence$1 } from 'framer';
 import { HexColorPicker } from 'react-colorful';
 import { EyeDropper } from 'react-eyedrop';
 import { useDropzone } from 'react-dropzone';
@@ -14000,8 +13999,6 @@ var Sheet = function (_a) {
   var _h = useState(((_b = targetRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0),
     sheetHeight = _h[0],
     setSheetHeight = _h[1];
-  console.log(sheetHeight, 'SHEET HEIGHT');
-  console.log('TARGET REF INITIAL', targetRef);
   var device = useDeviceSize().device;
   var isMobile = device === 'small' || device === 'xSmall' ? true : false;
   var sheet = useEntities().sheet;
@@ -14083,10 +14080,9 @@ var Sheet = function (_a) {
   var isHtmlElement = function (element) {
     return element instanceof HTMLElement;
   };
-  useEffect(function () {
-    var _a, _b;
-    console.log('TARGET REF in use effect', targetRef.current, sheetHeight, (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight);
-    if (targetRef.current && sheetHeight !== ((_b = targetRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight)) {
+  useLayoutEffect(function () {
+    var _a;
+    if (targetRef.current && sheetHeight !== ((_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight)) {
       setSheetHeight(targetRef.current.offsetHeight);
     }
     if (!targetRef.current) {
@@ -14321,8 +14317,7 @@ var Sheet = function (_a) {
   }, jsx(Flex, {
     flexDirection: "column",
     width: "100%",
-    inset: inset,
-    height: "100%"
+    inset: inset
   }, children)))));
 };
 
@@ -15016,7 +15011,8 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
     pinned = _f === void 0 ? 'center' : _f,
     _g = props.backgroundVariant,
     backgroundVariant = _g === void 0 ? 'solid' : _g,
-    rest = __rest(props, ["zIndex", "isOpen", "onClose", "maxWidth", "maxHeight", "bgElementSelector", "isFullScreen", "closeButtonId", "insetOverride", "outsetOverride", "height", "width", "children", "shouldScroll", "borderRadius", "pinned", "backgroundVariant"]);
+    footer = props.footer,
+    rest = __rest(props, ["zIndex", "isOpen", "onClose", "maxWidth", "maxHeight", "bgElementSelector", "isFullScreen", "closeButtonId", "insetOverride", "outsetOverride", "height", "width", "children", "shouldScroll", "borderRadius", "pinned", "backgroundVariant", "footer"]);
   var pinnedRadius = pinned === 'bottom' ? {
     top: borderRadius,
     bottom: 'none'
@@ -15062,7 +15058,11 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })) : jsx(React.Fragment, null, children, onClose && jsx(CloseButton, {
     id: closeButtonId,
     onClose: onClose
-  })))));
+  })), footer && jsx(Flex, {
+    width: "100%",
+    position: "sticky",
+    bottom: 0
+  }, footer))));
 });
 
 var styles$v = {
@@ -20372,58 +20372,6 @@ var Pill = function (_a) {
   }, title));
 };
 
-var Page = function (_a) {
-  var width = _a.width,
-    _b = _a.direction,
-    direction = _b === void 0 ? 'horizontal' : _b,
-    contentWidth = _a.contentWidth,
-    contentHeight = _a.contentHeight,
-    alignment = _a.alignment,
-    currentPage = _a.currentPage,
-    gap = _a.gap,
-    padding = _a.padding,
-    paddingTop = _a.paddingTop,
-    paddingRight = _a.paddingRight,
-    paddingBottom = _a.paddingBottom,
-    paddingLeft = _a.paddingLeft,
-    momentum = _a.momentum,
-    animationType = _a.animationType,
-    directionLock = _a.directionLock,
-    dragEnabled = _a.dragEnabled,
-    wheelEnabled = _a.wheelEnabled,
-    contentOffsetX = _a.contentOffsetX,
-    contentOffsetY = _a.contentOffsetY,
-    children = _a.children,
-    height = _a.height;
-  return jsx(Page$1, {
-    width: width,
-    height: height,
-    direction: direction,
-    contentWidth: contentWidth,
-    contentHeight: contentHeight,
-    alignment: alignment,
-    currentPage: currentPage,
-    gap: gap,
-    padding: padding,
-    paddingPerSide: true,
-    paddingTop: paddingTop,
-    paddingRight: paddingBottom,
-    paddingBottom: paddingRight,
-    paddingLeft: paddingLeft,
-    momentum: momentum,
-    dragEnabled: dragEnabled,
-    defaultEffect: animationType,
-    directionLock: directionLock,
-    wheelEnabled: wheelEnabled,
-    contentOffsetX: contentOffsetX,
-    contentOffsetY: contentOffsetY
-  }, React.Children.map(children, function (child, index) {
-    return jsx(Div, {
-      key: index
-    }, child);
-  }));
-};
-
 var styles$8 = {
   iconContainer: function (hocEntity) {
     return /*#__PURE__*/css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n    &:hover {\n      background: ", ";\n    }\n  " + (process.env.NODE_ENV === "production" ? "" : ";label:iconContainer;") + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHaUQiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xyXG5leHBvcnQgZGVmYXVsdCB7XHJcbiAgICBpY29uQ29udGFpbmVyOiBmdW5jdGlvbiAoaG9jRW50aXR5KSB7IHJldHVybiBjc3ModGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgICAmOmhvdmVyIHtcXG4gICAgICBiYWNrZ3JvdW5kOiBcIiwgXCI7XFxuICAgIH1cXG4gIFwiXSwgW1wiXFxuICAgICY6aG92ZXIge1xcbiAgICAgIGJhY2tncm91bmQ6IFwiLCBcIjtcXG4gICAgfVxcbiAgXCJdKSksIGhvY0VudGl0eS5jb2xvcnMuYmFja2dyb3VuZCk7IH0sXHJcbn07XHJcbnZhciB0ZW1wbGF0ZU9iamVjdF8xO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */")], ["\n    &:hover {\n      background: ", ";\n    }\n  " + (process.env.NODE_ENV === "production" ? "" : ";label:iconContainer;") + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHaUQiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xyXG5leHBvcnQgZGVmYXVsdCB7XHJcbiAgICBpY29uQ29udGFpbmVyOiBmdW5jdGlvbiAoaG9jRW50aXR5KSB7IHJldHVybiBjc3ModGVtcGxhdGVPYmplY3RfMSB8fCAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgICAmOmhvdmVyIHtcXG4gICAgICBiYWNrZ3JvdW5kOiBcIiwgXCI7XFxuICAgIH1cXG4gIFwiXSwgW1wiXFxuICAgICY6aG92ZXIge1xcbiAgICAgIGJhY2tncm91bmQ6IFwiLCBcIjtcXG4gICAgfVxcbiAgXCJdKSksIGhvY0VudGl0eS5jb2xvcnMuYmFja2dyb3VuZCk7IH0sXHJcbn07XHJcbnZhciB0ZW1wbGF0ZU9iamVjdF8xO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */")])), hocEntity.colors.background);
@@ -24256,7 +24204,7 @@ var BulkSend = function (_a) {
       xSmall: 2,
       large: 0
     }
-  }, jsx(AnimatePresence$1, null, !isConfigurable && jsx(Overlay, {
+  }, jsx(AnimatePresence, null, !isConfigurable && jsx(Overlay, {
     variants: overlayVariants,
     initial: 'closed',
     animate: !isConfigurable ? 'open' : 'closed',
@@ -24268,7 +24216,7 @@ var BulkSend = function (_a) {
       bottom: 'x3'
     },
     position: "relative"
-  }, jsx(AnimatePresence$1, null, !isConfigurable && jsx(Flex, {
+  }, jsx(AnimatePresence, null, !isConfigurable && jsx(Flex, {
     position: "absolute",
     top: "-32px",
     initial: {
@@ -24425,7 +24373,7 @@ var PaperTypeModal = function (_a) {
     }
   };
   var isEven = options.length % 2 === 0;
-  return jsx(AnimatePresence$1, null, isOpen && jsx(Overlay, {
+  return jsx(AnimatePresence, null, isOpen && jsx(Overlay, {
     variants: overlayVariants,
     animate: isOpen ? 'open' : 'closed',
     initial: 'closed',
@@ -24965,4 +24913,4 @@ var useColorSwatch = function () {
   };
 };
 
-export { Accordion, AccordionBody, AccordionHeading, AccountMenu, AffiliateShareWidget, Anchor, AnimatedCheckMark, AnimatedGrid, AnimatedTiltCard, ArticleCard, Aside, Avatar, AwardCard, AwardGroupLabel, Badge, Banner, Bar, BlockQuote, BulkSend, Button, ButtonWithMenu, Capsule, Card, CardEntryDialog, CardQuantitySlider, Checkbox, Circle, CircleMenu, Clipboard, CloseButton, ColorOption, ColorThumbnail, ComparisonIncludesList, ComparisonItem, ConfigurationCard, ConfirmDialog, Content, ContentPusher, ContextBar, CountdownTimer, Dialog, DisplayCard, Div, DownloadButton, DragBar, DragBox, Drawer, DropDownMenu, ExpandedAwardCard, FeatureAnnouncement, FeatureBadge, Flex, Grid, GridItem, HStack, Icon, IconLink, Image$1 as Image, ImageGrid, ImageThumbnail, ImageUploadWidget, ImageUploader, IncrementSetting, InfiniteScroller, InfoBlock, Input, InviteCard, LinkColumn, List, ListItem, Loader, LoadingSpinner, Logo, MasonryGrid, Menu, MenuItem, MenuSection, Navigation, NavigationPill, Option, OrderCard, Overlay, Page, PaperTypeModal, PhoneInput, Pill, PinInput, PricingTile, Progress, PromotionWidget, QDSChrome, QuantitySlider, QuantumColorPicker, QuantumThemeWrapper, QuickLink, RadioOptionCard, RadioOptionList, ReleaseNote, ReleaseNoteDialog, RevealingContent, RowItem, Scrollable, ScrollingIndicator, Section, Select, SelectableCard, SelectableList, Separator, SettingInput, Sheet, Sidebar, Slider, SnapPoint, Spacer, Span, Sphere, StackedCards, StaticNavigation, Stepper, Stoplight, SubNavigation, SubscriptionUpsaleDialog, Tab, Table, TableRow, Tabs, Text, TitledList, Todo, Toggle, Tooltip, Transition, UploadButton, UpsaleDialog, UpsaleSheet, UserCard, UserCardLoader, VStack, VideoPlayer, Zoom, entities$6 as bellaCadaeuxTheme, entities$5 as blue42Theme, getSize, entities$7 as greenerStillTheme, entities$4 as promptingUTheme, entities as promptingsTheme, entities$1 as sendOutCardsTheme, entities$8 as sendogoTheme, entities$3 as streamMarketingTheme, entities$2 as streamVATheme, useColorSwatch };
+export { Accordion, AccordionBody, AccordionHeading, AccountMenu, AffiliateShareWidget, Anchor, AnimatedCheckMark, AnimatedGrid, AnimatedTiltCard, ArticleCard, Aside, Avatar, AwardCard, AwardGroupLabel, Badge, Banner, Bar, BlockQuote, BulkSend, Button, ButtonWithMenu, Capsule, Card, CardEntryDialog, CardQuantitySlider, Checkbox, Circle, CircleMenu, Clipboard, CloseButton, ColorOption, ColorThumbnail, ComparisonIncludesList, ComparisonItem, ConfigurationCard, ConfirmDialog, Content, ContentPusher, ContextBar, CountdownTimer, Dialog, DisplayCard, Div, DownloadButton, DragBar, DragBox, Drawer, DropDownMenu, ExpandedAwardCard, FeatureAnnouncement, FeatureBadge, Flex, Grid, GridItem, HStack, Icon, IconLink, Image$1 as Image, ImageGrid, ImageThumbnail, ImageUploadWidget, ImageUploader, IncrementSetting, InfiniteScroller, InfoBlock, Input, InviteCard, LinkColumn, List, ListItem, Loader, LoadingSpinner, Logo, MasonryGrid, Menu, MenuItem, MenuSection, Navigation, NavigationPill, Option, OrderCard, Overlay, PaperTypeModal, PhoneInput, Pill, PinInput, PricingTile, Progress, PromotionWidget, QDSChrome, QuantitySlider, QuantumColorPicker, QuantumThemeWrapper, QuickLink, RadioOptionCard, RadioOptionList, ReleaseNote, ReleaseNoteDialog, RevealingContent, RowItem, Scrollable, ScrollingIndicator, Section, Select, SelectableCard, SelectableList, Separator, SettingInput, Sheet, Sidebar, Slider, SnapPoint, Spacer, Span, Sphere, StackedCards, StaticNavigation, Stepper, Stoplight, SubNavigation, SubscriptionUpsaleDialog, Tab, Table, TableRow, Tabs, Text, TitledList, Todo, Toggle, Tooltip, Transition, UploadButton, UpsaleDialog, UpsaleSheet, UserCard, UserCardLoader, VStack, VideoPlayer, Zoom, entities$6 as bellaCadaeuxTheme, entities$5 as blue42Theme, getSize, entities$7 as greenerStillTheme, entities$4 as promptingUTheme, entities as promptingsTheme, entities$1 as sendOutCardsTheme, entities$8 as sendogoTheme, entities$3 as streamMarketingTheme, entities$2 as streamVATheme, useColorSwatch };

package/dist/src/exports/organisms.d.ts

@@ -23,7 +23,6 @@ export * from "../organisms/selectableList/components/selectableCard";
 export * from "../organisms/confirmDialog/confirmDialog";
 export * from "../organisms/incrementSetting/incrementSetting";
 export * from "../organisms/pill/pill";
-export * from "../organisms/page/page";
 export * from "../organisms/zoom/zoom";
 export * from "../organisms/quantumColorPicker/quantumColorPicker";
 export * from "../organisms/animatedGrid/animatedGrid";

package/dist/src/molecules/dialog/dialog.d.ts

@@ -11,14 +11,15 @@ export declare type DialogProps = {
     bgElementSelector?: string;
     isFullScreen?: boolean;
     closeButtonId?: string;
-    insetOverride?: HOCSpacingKeys;
-    outsetOverride?: HOCSpacingKeys;
+    insetOverride?: HOCSpacingKeys | string;
+    outsetOverride?: HOCSpacingKeys | string;
     height?: Height;
     width?: Width;
     shouldScroll?: boolean;
     borderRadius?: BorderRadius;
     pinned?: PinnedType;
     backgroundVariant?: 'solid' | 'blur';
+    footer?: React.ReactNode;
 };
 export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
     children: React.ReactNode;

package/dist/src/stories/molecules/Dialog.stories.d.ts

@@ -4,3 +4,4 @@ declare const _default: import("@storybook/core/csf").ComponentAnnotations<impor
 export default _default;
 export declare const Primary: StoryFn<DialogProps>;
 export declare const WithStepper: StoryFn<DialogProps>;
+export declare const WithFooter: StoryFn<DialogProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendoutcards/quantum-design-ui",
-  "version": "1.8.38-alpha.3",
+  "version": "1.8.38",
   "description": "UI component library for Quantum Design System",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",
@@ -52,7 +52,6 @@
     "@zerollup/ts-transform-paths": "^1.7.18",
     "color": "^3.1.2",
     "fast-deep-equal": "^3.1.3",
-    "framer": "^1.1.7",
     "framer-motion": "4.1.17",
     "react-colorful": "^5.3.0",
     "react-content-loader": "^5.1.1",

package/dist/src/organisms/page/page.d.ts

@@ -1,30 +0,0 @@
-import React from 'react';
-import { MotionValue } from 'framer-motion';
-export declare type PageEffectType = 'none' | 'cube' | 'coverflow' | 'wheel' | 'pile';
-declare type PageContentDimensionType = 'auto' | 'stretch' | number;
-declare type PageAlignmentType = 'start' | 'center' | 'end';
-export declare type PageProps = {
-    height: string | number;
-    width: string | number;
-    direction: 'horizontal' | 'vertical';
-    contentWidth: PageContentDimensionType;
-    contentHeight: PageContentDimensionType;
-    alignment: PageAlignmentType;
-    currentPage: number;
-    gap: number;
-    padding: number;
-    momentum: boolean;
-    animationType: PageEffectType;
-    paddingTop?: number;
-    paddingRight?: number;
-    paddingBottom?: number;
-    paddingLeft?: number;
-    directionLock?: boolean;
-    dragEnabled?: boolean;
-    wheelEnabled?: boolean;
-    contentOffsetX?: MotionValue<number> | number;
-    contentOffsetY?: MotionValue<number> | number;
-    children?: React.ReactNode;
-};
-export declare const Page: ({ width, direction, contentWidth, contentHeight, alignment, currentPage, gap, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, momentum, animationType, directionLock, dragEnabled, wheelEnabled, contentOffsetX, contentOffsetY, children, height, }: PageProps) => React.JSX.Element;
-export {};

package/dist/src/stories/organisms/Page.stories.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import("@storybook/core/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("@storybook/core/csf").Args>;
-export default _default;
-export declare const Basic: any;