@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 +13 -64
- package/dist/src/exports/organisms.d.ts +0 -1
- package/dist/src/molecules/dialog/dialog.d.ts +3 -2
- package/dist/src/stories/molecules/Dialog.stories.d.ts +1 -0
- package/package.json +1 -2
- package/dist/src/organisms/page/page.d.ts +0 -30
- package/dist/src/stories/organisms/Page.stories.d.ts +0 -3
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
|
|
14088
|
-
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
|
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,
|
|
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
|
|
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 {};
|