@sendoutcards/quantum-design-ui 1.7.66 → 1.7.69

package/dist/index.es.js

@@ -12353,41 +12353,6 @@ var Capsule = function (_a) {
   }));
 };
 
-var ColorThumbnail = function (_a) {
-  var backgroundColor = _a.backgroundColor,
-      isSelected = _a.isSelected,
-      onSelect = _a.onSelect,
-      _b = _a.thumbnailSize,
-      thumbnailSize = _b === void 0 ? '32px' : _b,
-      outset = _a.outset,
-      _c = _a.isRounded,
-      isRounded = _c === void 0 ? false : _c;
-  var selectedThumbnailSize = "calc(" + thumbnailSize + " / 2.75)";
-  return jsx(Flex, {
-    onClick: function () {
-      return onSelect(backgroundColor);
-    },
-    backgroundColor: backgroundColor,
-    whileHover: {
-      scale: 1.2
-    },
-    cursor: "pointer",
-    borderRadius: isRounded ? 'circle' : 'small',
-    width: thumbnailSize,
-    height: thumbnailSize,
-    minWidth: thumbnailSize,
-    outset: outset,
-    justifyContent: "center",
-    alignItems: "center"
-  }, isSelected && jsx(Div, {
-    backgroundColor: "foreground",
-    width: selectedThumbnailSize,
-    height: selectedThumbnailSize,
-    borderRadius: isRounded ? 'circle' : '3px',
-    boxShadow: "mediumLight"
-  }));
-};
-
 var computeButtonSizeProperties = function (size, sizeMap) {
   return mapSizeType(size, sizeMap);
 };
@@ -19711,20 +19676,20 @@ var DropperIcon = function (props) {
 };
 
 var QuantumColorPicker = function (_a) {
+  var _b, _c, _d;
+
   var color = _a.color,
       onChange = _a.onChange,
       convertedColorCallback = _a.convertedColorCallback,
-      _b = _a.convertedColorType,
-      convertedColorType = _b === void 0 ? 'hex' : _b,
-      _c = _a.showEyeDropper,
-      showEyeDropper = _c === void 0 ? false : _c,
-      palettes = _a.palettes,
-      _d = _a.paletteTitle,
-      paletteTitle = _d === void 0 ? 'Presets' : _d;
+      _e = _a.convertedColorType,
+      convertedColorType = _e === void 0 ? 'hex' : _e,
+      _f = _a.showEyeDropper,
+      showEyeDropper = _f === void 0 ? false : _f,
+      palette = _a.palette;
 
-  var _e = useResizeObserver(),
-      ref = _e.ref,
-      width = _e.width;
+  var _g = useResizeObserver(),
+      ref = _g.ref,
+      width = _g.width;
 
   var formattedHexValue = function (value) {
     return value.startsWith('#') ? value : "#" + value;
@@ -19757,6 +19722,7 @@ var QuantumColorPicker = function (_a) {
     }
   };
 
+  var paletteArray = (_b = palette === null || palette === void 0 ? void 0 : palette.colors) !== null && _b !== void 0 ? _b : Array.from(Array((_c = palette === null || palette === void 0 ? void 0 : palette.count) !== null && _c !== void 0 ? _c : 12));
   return jsx(Div, {
     inset: "x2",
     display: "flex",
@@ -19794,11 +19760,11 @@ var QuantumColorPicker = function (_a) {
       return handleOnChange(formattedHexValue(value));
     },
     type: "text"
-  })), palettes && jsx(React.Fragment, null, jsx(Spacer, {
+  })), (palette && palette.colors || (palette === null || palette === void 0 ? void 0 : palette.isLoading)) && jsx(React.Fragment, null, jsx(Spacer, {
     space: "x1"
   }), jsx(Text, {
     type: "caption",
-    content: paletteTitle,
+    content: (_d = palette.title) !== null && _d !== void 0 ? _d : 'Presets',
     color: "primaryBody",
     lineHeight: 1.2,
     inset: {
@@ -19812,13 +19778,17 @@ var QuantumColorPicker = function (_a) {
     width: "100%",
     justifyContent: "flex-start",
     flexWrap: 'wrap',
-    alignItems: "center"
-  }, palettes.map(function (palette, index) {
+    alignItems: "center",
+    inset: {
+      bottom: '6px'
+    }
+  }, paletteArray.map(function (paletteColor, index) {
     return jsx(ColorThumbnail, {
       key: index,
       isRounded: true,
-      backgroundColor: palette,
-      isSelected: palette === color,
+      isLoading: palette.isLoading,
+      backgroundColor: paletteColor,
+      isSelected: paletteColor === color,
       onSelect: function (value) {
         handleOnChange(formattedHexValue(value));
       },
@@ -20915,13 +20885,13 @@ var StaticNavigation = function (_a) {
     onClick: function () {
       return setIsOpen(!isOpen);
     }
-  })), jsx(Logo, {
+  })), !links && !isMobile && jsx("div", null), jsx(Logo, {
     brand: logo.brand,
     href: logo.href,
     onClick: logo.onClick,
     color: logo.color,
     width: isMobile ? '130px' : '200px'
-  }), !isMobile && jsx(Flex, {
+  }), links && !isMobile && jsx(Flex, {
     height: "100%",
     width: "100%",
     alignItems: "center",
@@ -21013,7 +20983,7 @@ var StaticNavigation = function (_a) {
         subLinkColor: column.linkColor ? column.linkColor : 'primaryBody'
       })));
     }));
-  })))), isMobile && jsx(Div, {
+  })))), links && isMobile && jsx(Div, {
     height: "calc(100% - " + drawerOffset + "px)",
     position: "fixed",
     left: "0px",
@@ -22743,6 +22713,67 @@ var UploadButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 var templateObject_1$2, templateObject_2, templateObject_3;
 
+var ColorThumbnailLoader = function (_a) {
+  var diameter = _a.diameter,
+      outset = _a.outset;
+  var radius = diameter / 2;
+  return jsx(Flex, {
+    outset: outset
+  }, jsx(Loader, {
+    width: diameter,
+    height: diameter
+  }, jsx("circle", {
+    cy: radius,
+    cx: radius,
+    r: radius
+  })));
+};
+
+var ColorThumbnail = function (_a) {
+  var backgroundColor = _a.backgroundColor,
+      isSelected = _a.isSelected,
+      onSelect = _a.onSelect,
+      _b = _a.thumbnailSize,
+      thumbnailSize = _b === void 0 ? 32 : _b,
+      outset = _a.outset,
+      _c = _a.isRounded,
+      isRounded = _c === void 0 ? false : _c,
+      _d = _a.isLoading,
+      isLoading = _d === void 0 ? false : _d;
+  var selectedThumbnailSize = "calc(" + thumbnailSize + " / 2.75)";
+
+  if (isLoading) {
+    return jsx(ColorThumbnailLoader, {
+      diameter: thumbnailSize,
+      outset: outset
+    });
+  }
+
+  return jsx(Flex, {
+    onClick: function () {
+      return onSelect(backgroundColor);
+    },
+    backgroundColor: backgroundColor,
+    whileHover: {
+      scale: 1.2
+    },
+    cursor: "pointer",
+    borderRadius: isRounded ? 'circle' : 'small',
+    width: thumbnailSize + "px",
+    height: thumbnailSize + "px",
+    minWidth: thumbnailSize + "px",
+    outset: outset,
+    justifyContent: "center",
+    alignItems: "center"
+  }, isSelected && jsx(Div, {
+    backgroundColor: "foreground",
+    width: selectedThumbnailSize,
+    height: selectedThumbnailSize,
+    borderRadius: isRounded ? 'circle' : '3px',
+    boxShadow: "mediumLight"
+  }));
+};
+
 var _emotionSourceMap$1 = process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHd0IiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcclxuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICAgIHRodW1ibmFpbENvbnRhaW5lcjogY3NzKHRlbXBsYXRlT2JqZWN0XzEgfHwgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcIl0sIFtcIlwiXSkpKSxcclxufTtcclxudmFyIHRlbXBsYXRlT2JqZWN0XzE7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */";
 var styles$1 = {
   thumbnailContainer: /*#__PURE__*/css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject([";label:thumbnailContainer;" + _emotionSourceMap$1], [";label:thumbnailContainer;" + _emotionSourceMap$1])))

package/dist/src/atoms/colorThumbnail/colorThumbnail.d.ts

@@ -4,8 +4,9 @@ export declare type ColorThumbnailProps = {
     backgroundColor: string;
     isSelected: boolean;
     isRounded?: boolean;
-    thumbnailSize?: string;
+    thumbnailSize?: number;
     outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
     onSelect: (fill: string) => void;
+    isLoading?: boolean;
 };
 export declare const ColorThumbnail: FC<ColorThumbnailProps>;

package/dist/src/atoms/colorThumbnail/loaders/colorThumbnailLoader.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { HOCSpacingKeys, SpacingDirection, LiteralUnion } from "../../../helpers/hoc-types/entityValueTypes";
+declare type ColorThumbnailLoaderProps = {
+    diameter: number;
+    outset?: SpacingDirection | LiteralUnion<HOCSpacingKeys>;
+};
+export declare const ColorThumbnailLoader: FC<ColorThumbnailLoaderProps>;
+export {};

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

@@ -10,7 +10,11 @@ export declare type QuantumColorPickerProps = {
     convertedColorCallback?: (color: ConvertedColorType) => void;
     convertedColorType?: 'hex' | 'rgb' | 'hsl';
     showEyeDropper?: boolean;
-    palettes?: QuantumHex[];
-    paletteTitle?: string;
+    palette?: {
+        title?: string;
+        colors?: QuantumHex[];
+        isLoading?: boolean;
+        count?: number;
+    };
 };
 export declare const QuantumColorPicker: FC<QuantumColorPickerProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendoutcards/quantum-design-ui",
-  "version": "1.7.66",
+  "version": "1.7.69",
   "description": "UI component library for Quantum Design System",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",