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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js CHANGED
@@ -7,7 +7,6 @@ import fastDeepEqual from 'fast-deep-equal';
7
7
  import useResizeObserver from 'use-resize-observer';
8
8
  import ContentLoader from 'react-content-loader';
9
9
  import InfiniteScroll from 'react-infinite-scroller';
10
- import { Page as Page$1, AnimatePresence as AnimatePresence$1 } from 'framer';
11
10
  import { HexColorPicker } from 'react-colorful';
12
11
  import { EyeDropper } from 'react-eyedrop';
13
12
  import { useDropzone } from 'react-dropzone';
@@ -14000,8 +13999,6 @@ var Sheet = function (_a) {
14000
13999
  var _h = useState(((_b = targetRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0),
14001
14000
  sheetHeight = _h[0],
14002
14001
  setSheetHeight = _h[1];
14003
- console.log(sheetHeight, 'SHEET HEIGHT');
14004
- console.log('TARGET REF INITIAL', targetRef);
14005
14002
  var device = useDeviceSize().device;
14006
14003
  var isMobile = device === 'small' || device === 'xSmall' ? true : false;
14007
14004
  var sheet = useEntities().sheet;
@@ -14084,9 +14081,8 @@ var Sheet = function (_a) {
14084
14081
  return element instanceof HTMLElement;
14085
14082
  };
14086
14083
  useLayoutEffect(function () {
14087
- var _a, _b;
14088
- console.log('TARGET REF in use effect', targetRef, sheetHeight, (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight);
14089
- if (targetRef.current && sheetHeight !== ((_b = targetRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight)) {
14084
+ var _a;
14085
+ if (targetRef.current && sheetHeight !== ((_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight)) {
14090
14086
  setSheetHeight(targetRef.current.offsetHeight);
14091
14087
  }
14092
14088
  if (!targetRef.current) {
@@ -15015,7 +15011,8 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
15015
15011
  pinned = _f === void 0 ? 'center' : _f,
15016
15012
  _g = props.backgroundVariant,
15017
15013
  backgroundVariant = _g === void 0 ? 'solid' : _g,
15018
- rest = __rest(props, ["zIndex", "isOpen", "onClose", "maxWidth", "maxHeight", "bgElementSelector", "isFullScreen", "closeButtonId", "insetOverride", "outsetOverride", "height", "width", "children", "shouldScroll", "borderRadius", "pinned", "backgroundVariant"]);
15014
+ footer = props.footer,
15015
+ rest = __rest(props, ["zIndex", "isOpen", "onClose", "maxWidth", "maxHeight", "bgElementSelector", "isFullScreen", "closeButtonId", "insetOverride", "outsetOverride", "height", "width", "children", "shouldScroll", "borderRadius", "pinned", "backgroundVariant", "footer"]);
15019
15016
  var pinnedRadius = pinned === 'bottom' ? {
15020
15017
  top: borderRadius,
15021
15018
  bottom: 'none'
@@ -15061,7 +15058,11 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
15061
15058
  })) : jsx(React.Fragment, null, children, onClose && jsx(CloseButton, {
15062
15059
  id: closeButtonId,
15063
15060
  onClose: onClose
15064
- })))));
15061
+ })), footer && jsx(Flex, {
15062
+ width: "100%",
15063
+ position: "sticky",
15064
+ bottom: 0
15065
+ }, footer))));
15065
15066
  });
15066
15067
 
15067
15068
  var styles$v = {
@@ -20371,58 +20372,6 @@ var Pill = function (_a) {
20371
20372
  }, title));
20372
20373
  };
20373
20374
 
20374
- var Page = function (_a) {
20375
- var width = _a.width,
20376
- _b = _a.direction,
20377
- direction = _b === void 0 ? 'horizontal' : _b,
20378
- contentWidth = _a.contentWidth,
20379
- contentHeight = _a.contentHeight,
20380
- alignment = _a.alignment,
20381
- currentPage = _a.currentPage,
20382
- gap = _a.gap,
20383
- padding = _a.padding,
20384
- paddingTop = _a.paddingTop,
20385
- paddingRight = _a.paddingRight,
20386
- paddingBottom = _a.paddingBottom,
20387
- paddingLeft = _a.paddingLeft,
20388
- momentum = _a.momentum,
20389
- animationType = _a.animationType,
20390
- directionLock = _a.directionLock,
20391
- dragEnabled = _a.dragEnabled,
20392
- wheelEnabled = _a.wheelEnabled,
20393
- contentOffsetX = _a.contentOffsetX,
20394
- contentOffsetY = _a.contentOffsetY,
20395
- children = _a.children,
20396
- height = _a.height;
20397
- return jsx(Page$1, {
20398
- width: width,
20399
- height: height,
20400
- direction: direction,
20401
- contentWidth: contentWidth,
20402
- contentHeight: contentHeight,
20403
- alignment: alignment,
20404
- currentPage: currentPage,
20405
- gap: gap,
20406
- padding: padding,
20407
- paddingPerSide: true,
20408
- paddingTop: paddingTop,
20409
- paddingRight: paddingBottom,
20410
- paddingBottom: paddingRight,
20411
- paddingLeft: paddingLeft,
20412
- momentum: momentum,
20413
- dragEnabled: dragEnabled,
20414
- defaultEffect: animationType,
20415
- directionLock: directionLock,
20416
- wheelEnabled: wheelEnabled,
20417
- contentOffsetX: contentOffsetX,
20418
- contentOffsetY: contentOffsetY
20419
- }, React.Children.map(children, function (child, index) {
20420
- return jsx(Div, {
20421
- key: index
20422
- }, child);
20423
- }));
20424
- };
20425
-
20426
20375
  var styles$8 = {
20427
20376
  iconContainer: function (hocEntity) {
20428
20377
  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);
@@ -24255,7 +24204,7 @@ var BulkSend = function (_a) {
24255
24204
  xSmall: 2,
24256
24205
  large: 0
24257
24206
  }
24258
- }, jsx(AnimatePresence$1, null, !isConfigurable && jsx(Overlay, {
24207
+ }, jsx(AnimatePresence, null, !isConfigurable && jsx(Overlay, {
24259
24208
  variants: overlayVariants,
24260
24209
  initial: 'closed',
24261
24210
  animate: !isConfigurable ? 'open' : 'closed',
@@ -24267,7 +24216,7 @@ var BulkSend = function (_a) {
24267
24216
  bottom: 'x3'
24268
24217
  },
24269
24218
  position: "relative"
24270
- }, jsx(AnimatePresence$1, null, !isConfigurable && jsx(Flex, {
24219
+ }, jsx(AnimatePresence, null, !isConfigurable && jsx(Flex, {
24271
24220
  position: "absolute",
24272
24221
  top: "-32px",
24273
24222
  initial: {
@@ -24424,7 +24373,7 @@ var PaperTypeModal = function (_a) {
24424
24373
  }
24425
24374
  };
24426
24375
  var isEven = options.length % 2 === 0;
24427
- return jsx(AnimatePresence$1, null, isOpen && jsx(Overlay, {
24376
+ return jsx(AnimatePresence, null, isOpen && jsx(Overlay, {
24428
24377
  variants: overlayVariants,
24429
24378
  animate: isOpen ? 'open' : 'closed',
24430
24379
  initial: 'closed',
@@ -24964,4 +24913,4 @@ var useColorSwatch = function () {
24964
24913
  };
24965
24914
  };
24966
24915
 
24967
- 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 };
24916
+ 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 };
@@ -23,7 +23,6 @@ export * from "../organisms/selectableList/components/selectableCard";
23
23
  export * from "../organisms/confirmDialog/confirmDialog";
24
24
  export * from "../organisms/incrementSetting/incrementSetting";
25
25
  export * from "../organisms/pill/pill";
26
- export * from "../organisms/page/page";
27
26
  export * from "../organisms/zoom/zoom";
28
27
  export * from "../organisms/quantumColorPicker/quantumColorPicker";
29
28
  export * from "../organisms/animatedGrid/animatedGrid";
@@ -11,14 +11,15 @@ export declare type DialogProps = {
11
11
  bgElementSelector?: string;
12
12
  isFullScreen?: boolean;
13
13
  closeButtonId?: string;
14
- insetOverride?: HOCSpacingKeys;
15
- outsetOverride?: HOCSpacingKeys;
14
+ insetOverride?: HOCSpacingKeys | string;
15
+ outsetOverride?: HOCSpacingKeys | string;
16
16
  height?: Height;
17
17
  width?: Width;
18
18
  shouldScroll?: boolean;
19
19
  borderRadius?: BorderRadius;
20
20
  pinned?: PinnedType;
21
21
  backgroundVariant?: 'solid' | 'blur';
22
+ footer?: React.ReactNode;
22
23
  };
23
24
  export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
24
25
  children: React.ReactNode;
@@ -4,3 +4,4 @@ declare const _default: import("@storybook/core/csf").ComponentAnnotations<impor
4
4
  export default _default;
5
5
  export declare const Primary: StoryFn<DialogProps>;
6
6
  export declare const WithStepper: StoryFn<DialogProps>;
7
+ export declare const WithFooter: StoryFn<DialogProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sendoutcards/quantum-design-ui",
3
- "version": "1.8.38-alpha.4",
3
+ "version": "1.8.38",
4
4
  "description": "UI component library for Quantum Design System",
5
5
  "module": "dist/index.es.js",
6
6
  "jsnext:main": "dist/index.es.js",
@@ -52,7 +52,6 @@
52
52
  "@zerollup/ts-transform-paths": "^1.7.18",
53
53
  "color": "^3.1.2",
54
54
  "fast-deep-equal": "^3.1.3",
55
- "framer": "^1.1.7",
56
55
  "framer-motion": "4.1.17",
57
56
  "react-colorful": "^5.3.0",
58
57
  "react-content-loader": "^5.1.1",
@@ -1,30 +0,0 @@
1
- import React from 'react';
2
- import { MotionValue } from 'framer-motion';
3
- export declare type PageEffectType = 'none' | 'cube' | 'coverflow' | 'wheel' | 'pile';
4
- declare type PageContentDimensionType = 'auto' | 'stretch' | number;
5
- declare type PageAlignmentType = 'start' | 'center' | 'end';
6
- export declare type PageProps = {
7
- height: string | number;
8
- width: string | number;
9
- direction: 'horizontal' | 'vertical';
10
- contentWidth: PageContentDimensionType;
11
- contentHeight: PageContentDimensionType;
12
- alignment: PageAlignmentType;
13
- currentPage: number;
14
- gap: number;
15
- padding: number;
16
- momentum: boolean;
17
- animationType: PageEffectType;
18
- paddingTop?: number;
19
- paddingRight?: number;
20
- paddingBottom?: number;
21
- paddingLeft?: number;
22
- directionLock?: boolean;
23
- dragEnabled?: boolean;
24
- wheelEnabled?: boolean;
25
- contentOffsetX?: MotionValue<number> | number;
26
- contentOffsetY?: MotionValue<number> | number;
27
- children?: React.ReactNode;
28
- };
29
- 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;
30
- export {};
@@ -1,3 +0,0 @@
1
- declare const _default: import("@storybook/core/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("@storybook/core/csf").Args>;
2
- export default _default;
3
- export declare const Basic: any;