@pushwoosh/smart-components-kit 1.0.90 → 1.1.1

package/MediaStore/CreateVariantDrawer.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { Button, Drawer, DrawerBody, DrawerHeader, DrawerTitle, NativeInput, useToast } from '@pushwoosh/dumb-components';
 import { Columns, Vertical } from '@pushwoosh/kit-helpers';
 import { CloseIcon } from '@pushwoosh/kit-icons';
@@ -127,90 +128,138 @@ export const CreateVariantDrawer = ({
       setIsCreating(false);
     }
   };
-  return React.createElement(Drawer, {
+  return _jsxs(Drawer, {
     size: "medium",
     isOpen: isOpen,
-    onClose: onClose
-  }, React.createElement(DrawerHeader, null, React.createElement(DrawerTitle, null, React.createElement("span", null, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.TITLE'
-  })), React.createElement(Button, {
-    view: "ghost",
-    color: "secondary",
-    size: "compact",
-    icon: React.createElement(CloseIcon, {
-      size: "small"
-    }),
-    "aria-label": lang({
-      message: 'SMART.MEDIA_STORE.CREATE_VARIANT.CLOSE'
-    }),
-    onClick: onClose
-  }))), React.createElement(DrawerBody, null, original && React.createElement(Vertical, {
-    "$gap": 20
-  }, React.createElement("div", null, React.createElement(FieldLabel, null, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_LABEL'
-  })), React.createElement(Chips, null, RATIOS.map(item => React.createElement(Chip, {
-    key: item.value,
-    type: "button",
-    "$active": item.value === ratio,
-    onClick: () => setRatio(item.value)
-  }, item.label)))), React.createElement("div", null, React.createElement(FieldLabel, null, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.SIZE_LABEL'
-  })), React.createElement(Columns, {
-    "$sizes": "auto 1fr",
-    "$gap": 8,
-    "$alignItems": "center"
-  }, React.createElement(Segment, null, React.createElement(SegmentItem, {
-    type: "button",
-    "$active": dimension === 'width',
-    onClick: () => setDimension('width')
-  }, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.WIDTH'
-  })), React.createElement(SegmentItem, {
-    type: "button",
-    "$active": dimension === 'height',
-    onClick: () => setDimension('height')
-  }, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.HEIGHT'
-  }))), React.createElement(NativeInput, {
-    type: "number",
-    min: 1,
-    value: size,
-    "$isErrored": !isSizeValid,
-    onChange: event => setSize(event.target.value)
-  }))), React.createElement(Vertical, {
-    "$gap": 6
-  }, React.createElement(PreviewStage, null, React.createElement(PreviewFrame, {
-    "$ratio": selectedRatio.ar
-  }, React.createElement(PreviewImage, {
-    src: original.url,
-    alt: original.filename
-  }))), isSizeValid && React.createElement(Text, null, selectedRatio.label, ' · ', outputWidth, ' × ', outputHeight)), isJpeg && React.createElement("div", null, React.createElement(FieldLabel, null, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.QUALITY_LABEL'
-  })), React.createElement(NativeInput, {
-    type: "number",
-    min: 1,
-    max: 100,
-    value: quality,
-    "$isErrored": !isQualityValid,
-    onChange: event => setQuality(event.target.value)
-  })), ratioExists && React.createElement(Text, null, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_EXISTS'
-  })), React.createElement(Button, {
-    color: "primary",
-    size: "field",
-    isDisabled: !isSizeValid || !isQualityValid || ratioExists,
-    isLoading: isCreating,
-    onClick: () => void handleCreate()
-  }, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.CREATE_BUTTON'
-  })), React.createElement("div", null, React.createElement(FieldLabel, null, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.EXISTING_LABEL'
-  })), existingVariants.length === 0 ? React.createElement(Text, null, lang({
-    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.NO_VARIANTS'
-  })) : React.createElement(VariantStrip, null, existingVariants.map(variant => React.createElement(VariantThumb, {
-    key: variant.uuid
-  }, React.createElement(TileImage, {
-    src: getThumbUrl(variant),
-    alt: variant.filename
-  }), React.createElement(VariantThumbCaption, null, getRatioLabel(variant) || variant.filename))))))));
+    onClose: onClose,
+    children: [_jsx(DrawerHeader, {
+      children: _jsxs(DrawerTitle, {
+        children: [_jsx("span", {
+          children: lang({
+            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.TITLE'
+          })
+        }), _jsx(Button, {
+          view: "ghost",
+          color: "secondary",
+          size: "compact",
+          icon: _jsx(CloseIcon, {
+            size: "small"
+          }),
+          "aria-label": lang({
+            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.CLOSE'
+          }),
+          onClick: onClose
+        })]
+      })
+    }), _jsx(DrawerBody, {
+      children: original && _jsxs(Vertical, {
+        "$gap": 20,
+        children: [_jsxs("div", {
+          children: [_jsx(FieldLabel, {
+            children: lang({
+              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_LABEL'
+            })
+          }), _jsx(Chips, {
+            children: RATIOS.map(item => _jsx(Chip, {
+              type: "button",
+              "$active": item.value === ratio,
+              onClick: () => setRatio(item.value),
+              children: item.label
+            }, item.value))
+          })]
+        }), _jsxs("div", {
+          children: [_jsx(FieldLabel, {
+            children: lang({
+              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.SIZE_LABEL'
+            })
+          }), _jsxs(Columns, {
+            "$sizes": "auto 1fr",
+            "$gap": 8,
+            "$alignItems": "center",
+            children: [_jsxs(Segment, {
+              children: [_jsx(SegmentItem, {
+                type: "button",
+                "$active": dimension === 'width',
+                onClick: () => setDimension('width'),
+                children: lang({
+                  message: 'SMART.MEDIA_STORE.CREATE_VARIANT.WIDTH'
+                })
+              }), _jsx(SegmentItem, {
+                type: "button",
+                "$active": dimension === 'height',
+                onClick: () => setDimension('height'),
+                children: lang({
+                  message: 'SMART.MEDIA_STORE.CREATE_VARIANT.HEIGHT'
+                })
+              })]
+            }), _jsx(NativeInput, {
+              type: "number",
+              min: 1,
+              value: size,
+              "$isErrored": !isSizeValid,
+              onChange: event => setSize(event.target.value)
+            })]
+          })]
+        }), _jsxs(Vertical, {
+          "$gap": 6,
+          children: [_jsx(PreviewStage, {
+            children: _jsx(PreviewFrame, {
+              "$ratio": selectedRatio.ar,
+              children: _jsx(PreviewImage, {
+                src: original.url,
+                alt: original.filename
+              })
+            })
+          }), isSizeValid && _jsxs(Text, {
+            children: [selectedRatio.label, ' · ', outputWidth, ' × ', outputHeight]
+          })]
+        }), isJpeg && _jsxs("div", {
+          children: [_jsx(FieldLabel, {
+            children: lang({
+              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.QUALITY_LABEL'
+            })
+          }), _jsx(NativeInput, {
+            type: "number",
+            min: 1,
+            max: 100,
+            value: quality,
+            "$isErrored": !isQualityValid,
+            onChange: event => setQuality(event.target.value)
+          })]
+        }), ratioExists && _jsx(Text, {
+          children: lang({
+            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_EXISTS'
+          })
+        }), _jsx(Button, {
+          color: "primary",
+          size: "field",
+          isDisabled: !isSizeValid || !isQualityValid || ratioExists,
+          isLoading: isCreating,
+          onClick: () => void handleCreate(),
+          children: lang({
+            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.CREATE_BUTTON'
+          })
+        }), _jsxs("div", {
+          children: [_jsx(FieldLabel, {
+            children: lang({
+              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.EXISTING_LABEL'
+            })
+          }), existingVariants.length === 0 ? _jsx(Text, {
+            children: lang({
+              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.NO_VARIANTS'
+            })
+          }) : _jsx(VariantStrip, {
+            children: existingVariants.map(variant => _jsxs(VariantThumb, {
+              children: [_jsx(TileImage, {
+                src: getThumbUrl(variant),
+                alt: variant.filename
+              }), _jsx(VariantThumbCaption, {
+                children: getRatioLabel(variant) || variant.filename
+              })]
+            }, variant.uuid))
+          })]
+        })]
+      })
+    })]
+  });
 };

package/MediaStore/MediaStore.d.ts

@@ -1,12 +1,8 @@
 import { type FC } from 'react';
-export type MediaStoreProps = {
-    /** Application code whose media files are listed. */
-    application: string;
-    /** Initial page to load (zero-based). Defaults to 0. */
-    page?: number;
-    /** Page size. Defaults to 30. */
-    perPage?: number;
-    /** Called with the chosen file URL (original or variant). */
-    onSelect: (url: string) => void;
-};
+import type { MediaStoreProps } from './types';
+/**
+ * Controlled media gallery: the parent owns the current page (and page size)
+ * and is notified of navigation via `onPageChange`. For a self-contained
+ * variant that keeps the page in internal state, use `MediaStorePaginated`.
+ */
 export declare const MediaStore: FC<MediaStoreProps>;