@shopify/app-bridge - npm Package Compare versions

Comparing version 3.2.6-alpha.1 to 3.2.6

actions/Picker/index.d.ts

@@ -12,3 +12,36 @@ import { ClientApplication } from '../../client';
 }
+export declare type BadgeProgress = 'incomplete' | 'partiallyComplete' | 'complete';
+export declare type BadgeStatus = 'success' | 'info' | 'attention' | 'critical' | 'warning' | 'new';
+export declare type MediaKind = 'Avatar' | 'Thumbnail';
+export declare type VerticalAlignment = 'leading' | 'trailing' | 'center';
 /**
+ * To be used on validator as matchEnum(...). Make sure as new values are added to update
+ * the items below
+ *
+ * Note: Intentionally not using an `enum type` directly as this would cause a dependency
+ * of the same enum on the consumer API rather than just the string values.
+ */
+export declare const ALL_BADGE_PROGRESSES: BadgeProgress[];
+export declare const ALL_BADGE_STATUSES: BadgeStatus[];
+export declare const ALL_MEDIA_KINDS: MediaKind[];
+export declare const ALL_RESOURCE_VERTICAL_ALIGNMENT: VerticalAlignment[];
+export interface AvatarProps {
+    kind: MediaKind;
+    accessibilityLabel: string;
+    name: string;
+    initials: string;
+    source: string;
+}
+export interface ThumbnailProps {
+    kind: MediaKind;
+    source: string;
+    alt: string;
+}
+export interface Badge {
+    id: string;
+    content: string;
+    progress: BadgeProgress;
+    status: BadgeStatus;
+}
+/**
  * @internal
@@ -19,5 +52,19 @@ *
 export interface Resource {
+    /** Resource's accessibility label */
+    accessibilityLabel?: string;
+    /** Indicators to display info in list item */
+    badges?: Badge[];
+    /** Wether the checkbox on a selectable item is disabled */
+    disabled?: boolean;
     /** in GraphQL id format, ie 'gid://shopify/Product/1' */
     id: string;
+    /** Whether the item should appear as a loading resource item or not */
+    loading?: boolean;
+    /** Content for the media area at the left of the item */
+    media?: AvatarProps | ThumbnailProps;
+    /** Individual item name used by various text labels */
     name: string;
+    /** Display checkboxes next to items */
+    /** @default true */
+    selectable?: boolean;
 }
@@ -43,15 +90,2 @@ /**
 }
-export interface Payload {
-    readonly id?: string;
-    items?: BaseResource[];
-    selectedItems?: BaseResource[];
-    maxSelectable?: number;
-    title?: string;
-    loading?: boolean;
-    searchQueryPlaceholder?: string;
-    searchQuery?: string;
-    primaryActionLabel?: string;
-    secondaryActionLabel?: string;
-    emptySearchLabel?: EmptySearchLabel;
-}
 export interface SelectPayload {
@@ -69,13 +103,34 @@ readonly id?: string;
 export interface Options {
+    /** Whether the picker can load more items on the list */
+    canLoadMore?: boolean;
+    /** An object that describes the interface of the picker when there is no item to display. */
+    emptySearchLabel?: EmptySearchLabel;
+    /** The list of items to display. */
     items: BaseResource[];
-    selectedItems?: BaseResource[];
+    /** Indicates if the Picker should be in a loading state. */
+    loading?: boolean;
+    /** Indicates if the Picker is currently loading more items. */
+    loadingMore?: boolean;
+    /** Limits the total number of selections to a maximum of the passed value, or 0 for no limit. */
     maxSelectable?: number;
-    title?: string;
-    loading?: boolean;
+    /** Limits the total number of selections to a maximum of the passed value, or 0 for no limit. */
+    primaryActionLabel?: string;
+    /** Text content of the search box when first loaded */
+    searchQuery?: string;
+    /** Used as the placeholder in the search input. */
     searchQueryPlaceholder?: string;
-    searchQuery?: string;
-    primaryActionLabel?: string;
+    /** Label to be used on the secondary action button. */
     secondaryActionLabel?: string;
-    emptySearchLabel?: EmptySearchLabel;
+    /** The items which are selected. */
+    selectedItems?: BaseResource[];
+    /** Used as the title of the modal. */
+    title?: string;
+    /** Adjust vertical alignment of elements */
+    /** @default 'center' */
+    verticalAlignment?: VerticalAlignment;
 }
+export interface Payload extends Omit<Partial<Options>, 'items'> {
+    readonly id?: string;
+    items: Options['items'];
+}
 export interface ActionBase extends MetaAction {
@@ -117,25 +172,45 @@ readonly group: typeof Group.unstable_Picker;
 export declare class unstable_Picker extends ActionSet implements ActionSetProps<Options, Payload> {
-    items: BaseResource[];
-    maxSelectable?: number;
-    selectedItems: BaseResource[];
-    title?: string;
-    loading?: boolean;
-    searchQuery?: string;
-    searchQueryPlaceholder?: string;
-    primaryActionLabel?: string;
-    secondaryActionLabel?: string;
-    emptySearchLabel?: EmptySearchLabel;
+    items: Options['items'];
+    maxSelectable?: Options['maxSelectable'];
+    selectedItems: Options['selectedItems'];
+    title?: Options['title'];
+    loading?: Options['loading'];
+    searchQuery?: Options['searchQuery'];
+    searchQueryPlaceholder?: Options['searchQueryPlaceholder'];
+    primaryActionLabel?: Options['primaryActionLabel'];
+    secondaryActionLabel?: Options['secondaryActionLabel'];
+    emptySearchLabel?: Options['emptySearchLabel'];
+    canLoadMore?: Options['canLoadMore'];
+    loadingMore?: Options['loadingMore'];
+    verticalAlignment?: Options['verticalAlignment'];
     constructor(app: ClientApplication, options: Options);
     get payload(): {
         id: string;
+        /** Whether the picker can load more items on the list */
+        canLoadMore?: boolean | undefined;
+        /** An object that describes the interface of the picker when there is no item to display. */
+        emptySearchLabel?: EmptySearchLabel | undefined;
+        /** The list of items to display. */
         items: BaseResource[];
-        selectedItems?: BaseResource[] | undefined;
+        /** Indicates if the Picker should be in a loading state. */
+        loading?: boolean | undefined;
+        /** Indicates if the Picker is currently loading more items. */
+        loadingMore?: boolean | undefined;
+        /** Limits the total number of selections to a maximum of the passed value, or 0 for no limit. */
         maxSelectable?: number | undefined;
-        title?: string | undefined;
-        loading?: boolean | undefined;
+        /** Limits the total number of selections to a maximum of the passed value, or 0 for no limit. */
+        primaryActionLabel?: string | undefined;
+        /** Text content of the search box when first loaded */
+        searchQuery?: string | undefined;
+        /** Used as the placeholder in the search input. */
         searchQueryPlaceholder?: string | undefined;
-        searchQuery?: string | undefined;
-        primaryActionLabel?: string | undefined;
+        /** Label to be used on the secondary action button. */
         secondaryActionLabel?: string | undefined;
-        emptySearchLabel?: EmptySearchLabel | undefined;
+        /** The items which are selected. */
+        selectedItems?: BaseResource[] | undefined;
+        /** Used as the title of the modal. */
+        title?: string | undefined;
+        /** Adjust vertical alignment of elements */
+        /** @default 'center' */
+        verticalAlignment?: VerticalAlignment | undefined;
     };
@@ -142,0 +217,0 @@ get options(): Options;

actions/Picker/index.js

@@ -29,3 +29,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.create = exports.unstable_Picker = exports.loadMore = exports.search = exports.update = exports.cancel = exports.open = exports.select = exports.Action = void 0;
+exports.create = exports.unstable_Picker = exports.loadMore = exports.search = exports.update = exports.cancel = exports.open = exports.select = exports.ALL_RESOURCE_VERTICAL_ALIGNMENT = exports.ALL_MEDIA_KINDS = exports.ALL_BADGE_STATUSES = exports.ALL_BADGE_PROGRESSES = exports.Action = void 0;
 var helper_1 = require("../helper");
@@ -43,2 +43,28 @@ var ActionSet_1 = require("../ActionSet");
 })(Action = exports.Action || (exports.Action = {}));
+/**
+ * To be used on validator as matchEnum(...). Make sure as new values are added to update
+ * the items below
+ *
+ * Note: Intentionally not using an `enum type` directly as this would cause a dependency
+ * of the same enum on the consumer API rather than just the string values.
+ */
+exports.ALL_BADGE_PROGRESSES = [
+    'incomplete',
+    'partiallyComplete',
+    'complete',
+];
+exports.ALL_BADGE_STATUSES = [
+    'success',
+    'info',
+    'attention',
+    'critical',
+    'warning',
+    'new',
+];
+exports.ALL_MEDIA_KINDS = ['Avatar', 'Thumbnail'];
+exports.ALL_RESOURCE_VERTICAL_ALIGNMENT = [
+    'leading',
+    'trailing',
+    'center',
+];
 function select(payload) {
@@ -124,2 +150,5 @@ return helper_1.actionWrapper({
                 emptySearchLabel: this.emptySearchLabel,
+                canLoadMore: this.canLoadMore,
+                loadingMore: this.loadingMore,
+                verticalAlignment: this.verticalAlignment,
             };
@@ -133,3 +162,3 @@ },
         var mergedOptions = helper_1.getMergedProps(this.options, options);
-        var _a = mergedOptions.selectedItems, selectedItems = _a === void 0 ? [] : _a, _b = mergedOptions.maxSelectable, maxSelectable = _b === void 0 ? 0 : _b, _c = mergedOptions.items, items = _c === void 0 ? [] : _c, _d = mergedOptions.loading, loading = _d === void 0 ? false : _d, title = mergedOptions.title, searchQuery = mergedOptions.searchQuery, searchQueryPlaceholder = mergedOptions.searchQueryPlaceholder, primaryActionLabel = mergedOptions.primaryActionLabel, secondaryActionLabel = mergedOptions.secondaryActionLabel, emptySearchLabel = mergedOptions.emptySearchLabel;
+        var _a = mergedOptions.selectedItems, selectedItems = _a === void 0 ? [] : _a, _b = mergedOptions.maxSelectable, maxSelectable = _b === void 0 ? 0 : _b, _c = mergedOptions.items, items = _c === void 0 ? [] : _c, _d = mergedOptions.loading, loading = _d === void 0 ? false : _d, title = mergedOptions.title, searchQuery = mergedOptions.searchQuery, searchQueryPlaceholder = mergedOptions.searchQueryPlaceholder, primaryActionLabel = mergedOptions.primaryActionLabel, secondaryActionLabel = mergedOptions.secondaryActionLabel, emptySearchLabel = mergedOptions.emptySearchLabel, _e = mergedOptions.canLoadMore, canLoadMore = _e === void 0 ? false : _e, _f = mergedOptions.loadingMore, loadingMore = _f === void 0 ? false : _f, verticalAlignment = mergedOptions.verticalAlignment;
         this.title = title;
@@ -145,2 +174,5 @@ this.items = items;
         this.emptySearchLabel = emptySearchLabel;
+        this.canLoadMore = canLoadMore;
+        this.loadingMore = loadingMore;
+        this.verticalAlignment = verticalAlignment;
         if (shouldUpdate) {
@@ -147,0 +179,0 @@ this.update();

package.json

 {
   "name": "@shopify/app-bridge",
-  "version": "3.2.6-alpha.1",
+  "version": "3.2.6",
   "types": "index.d.ts",
@@ -57,3 +57,3 @@ "main": "index.js",
   },
-  "gitHead": "8aa65aee3ce37c9432182c4be45f9e54d4f25c7c"
+  "gitHead": "92e1339756bb20f56c06a48617cea67b4241a17b"
 }

validate/actions/picker.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -8,23 +19,49 @@ exports.Action = exports.validateAction = exports.validateProps = void 0;
 var utils_1 = require("../utils");
-var resourceSelectionSchema = type_validate_1.matchesArray(type_validate_1.matchesObject({
+var resourceBadge = type_validate_1.matchesObject({
+    content: type_validate_1.matchesString(),
     id: type_validate_1.matchesString(),
-}));
+    progress: type_validate_1.matchesEnum(Picker_1.ALL_BADGE_PROGRESSES),
+    status: type_validate_1.matchesEnum(Picker_1.ALL_BADGE_STATUSES),
+});
+var resourceMedia = type_validate_1.matchesObject({
+    accessibilityLabel: type_validate_1.makeOptional(type_validate_1.matchesString()),
+    alt: type_validate_1.makeOptional(type_validate_1.matchesString()),
+    initials: type_validate_1.makeOptional(type_validate_1.matchesString()),
+    kind: type_validate_1.makeOptional(type_validate_1.matchesEnum(Picker_1.ALL_MEDIA_KINDS)),
+    name: type_validate_1.makeOptional(type_validate_1.matchesString()),
+    source: type_validate_1.matchesString(),
+});
+var sharedResourceSchema = {
+    accessibilityLabel: type_validate_1.makeOptional(type_validate_1.matchesString()),
+    badges: type_validate_1.makeOptional(type_validate_1.matchesArray(resourceBadge)),
+    disabled: type_validate_1.makeOptional(type_validate_1.matchesBoolean()),
+    id: type_validate_1.matchesString(),
+    loading: type_validate_1.makeOptional(type_validate_1.matchesBoolean()),
+    media: type_validate_1.makeOptional(resourceMedia),
+    name: type_validate_1.makeOptional(type_validate_1.matchesString()),
+    selectable: type_validate_1.makeOptional(type_validate_1.matchesBoolean()),
+};
+var resourceOption = type_validate_1.matchesObject(__assign({}, sharedResourceSchema));
+var resourceSelectionSchema = type_validate_1.matchesArray(type_validate_1.matchesObject(__assign(__assign({}, sharedResourceSchema), { options: type_validate_1.makeOptional(type_validate_1.matchesArray(resourceOption)) })));
 var pickerOptions = type_validate_1.matchesObject({
+    canLoadMore: type_validate_1.makeOptional(type_validate_1.matchesBoolean()),
+    emptySearchLabel: type_validate_1.makeOptional(type_validate_1.matchesObject({
+        title: type_validate_1.matchesString(),
+        description: type_validate_1.matchesString(),
+        withIllustration: type_validate_1.matchesBoolean(),
+    })),
     items: type_validate_1.makeOptional(resourceSelectionSchema),
-    selectedItems: type_validate_1.makeOptional(resourceSelectionSchema),
+    loading: type_validate_1.makeOptional(type_validate_1.matchesBoolean()),
+    loadingMore: type_validate_1.makeOptional(type_validate_1.matchesBoolean()),
     maxSelectable: type_validate_1.makeOptional(type_validate_1.matchesPositiveInteger()),
-    loading: type_validate_1.makeOptional(type_validate_1.matchesBoolean()),
+    primaryActionLabel: type_validate_1.makeOptional(type_validate_1.matchesString()),
     searchQuery: type_validate_1.makeOptional(type_validate_1.matchesString()),
     searchQueryPlaceholder: type_validate_1.makeOptional(type_validate_1.matchesString()),
-    primaryActionLabel: type_validate_1.makeOptional(type_validate_1.matchesString()),
     secondaryActionLabel: type_validate_1.makeOptional(type_validate_1.matchesString()),
+    selectedItems: type_validate_1.makeOptional(type_validate_1.matchesArray(type_validate_1.matchesObject(sharedResourceSchema))),
     title: type_validate_1.makeOptional(type_validate_1.matchesString()),
-    emptySearchLabel: type_validate_1.makeOptional(type_validate_1.matchesObject({
-        title: type_validate_1.matchesString(),
-        description: type_validate_1.matchesString(),
-        withIllustration: type_validate_1.matchesBoolean(),
-    })),
+    verticalAlignment: type_validate_1.makeOptional(type_validate_1.matchesEnum(Picker_1.ALL_RESOURCE_VERTICAL_ALIGNMENT)),
 });
 var pickerActionSchema = type_validate_1.matchesObject({
-    options: type_validate_1.makeOptional(pickerOptions),
+    options: type_validate_1.makeOptional(resourceSelectionSchema),
 });
@@ -31,0 +68,0 @@ var selectionSchema = type_validate_1.matchesObject({

validate/type-validate.d.ts

@@ -19,5 +19,5 @@ export interface Indexable {
 }
-export interface Schema {
-    [key: string]: Validator;
-}
+export declare type Schema<TMap extends Object = {}> = {
+    [key in keyof TMap]-?: Validator;
+};
 export declare function matchesBoolean(options?: Options): Validator;
@@ -34,3 +34,3 @@ export declare function matchesString(options?: Options): Validator;
 export declare function matchesArray(validator?: Validator, options?: Options): Validator;
-export declare function matchesObject(schema: Schema, options?: Options): Validator;
+export declare function matchesObject<TSchema extends Object = any>(schema: Schema<TSchema>, options?: Options): Validator;
 export declare function oneOf(...validators: Validator[]): Validator;
@@ -37,0 +37,0 @@ export declare function makeOptional(validator: Validator): (value: any) => ValidationError[] | undefined;

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

963610

increased by1.26%

Lines of code

19900

increased by1.12%

Number of low quality alerts

0

decreased by-100%

No dependency changes