@commercelayer/app-elements 0.0.36 → 0.0.38

package/dist/ui/resources/RelationshipSelector/FullList.d.ts

@@ -0,0 +1,57 @@
+import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
+export interface SortBy {
+    attribute: string;
+    direction: 'asc' | 'desc';
+}
+export interface FullListProps {
+    /**
+     * Default values to be shown as selected
+     */
+    defaultValues: string[];
+    /**
+     * Resource name from core API to be fetched.
+     * Example: `markets`
+     */
+    resource: ListableResourceType;
+    /**
+     * Attribute from the resource to be used as label for the checkbox
+     * Example: name, sku_code or email
+     */
+    fieldForLabel: string;
+    /**
+     * Attribute from the resource to be used as value for the checkbox
+     * Example: id
+     */
+    fieldForValue: string;
+    /**
+     * Callback invoked on change, it returns the new list of selected values
+     */
+    onChange: (values: string[]) => void;
+    /**
+     * Value to be used as search predicate when SearchBar is used.
+     * If missing the search bar will not be shown.
+     * It must match the format described in the Core APIs documentation.
+     * {@link https://docs.commercelayer.io/core/filtering-data}
+     * Example: name_cont
+     */
+    searchBy?: string;
+    /**
+     * Sorting options
+     *
+     * Example:
+     * ```{ attribute: 'name', direction: 'asc'}```
+     * or
+     * ```{ attribute: 'created_at', direction: 'desc'}```
+     */
+    sortBy: SortBy;
+    /**
+     * Title to be shown as main label.
+     * It will be automatically computed with the number of selected items.
+     */
+    title: string;
+    /**
+     * Total count of pre-fetched items.
+     */
+    totalCount?: number;
+}
+export declare function FullList({ defaultValues, fieldForLabel, fieldForValue, onChange, resource, searchBy, sortBy, title, totalCount }: FullListProps): JSX.Element;

package/dist/ui/resources/RelationshipSelector/index.d.ts

@@ -0,0 +1,13 @@
+import { type FullListProps } from './FullList';
+export interface RelationshipSelectorProps extends Omit<FullListProps, 'totalCount'> {
+    /**
+     * Number of item to be shown in the preview list
+     * @default 5
+     */
+    previewLimit?: number;
+}
+declare function RelationshipSelector({ defaultValues, fieldForLabel, fieldForValue, previewLimit, onChange, resource, searchBy, sortBy, title }: RelationshipSelectorProps): JSX.Element;
+declare namespace RelationshipSelector {
+    var displayName: string;
+}
+export { RelationshipSelector };

package/dist/ui/resources/RelationshipSelector/utils.d.ts

@@ -0,0 +1,20 @@
+export declare function useToggleCheckboxValues(defaultValues: string[]): {
+    values: string[];
+    toggleValue: (value: string) => void;
+    setValues: (values: string[]) => void;
+};
+/**
+ * Simple helper to add the counter for selected options to a label
+ * or just the total of available options when nothing is selected
+ * @param options
+ * @returns string
+ *
+ * @example
+ * "Markets · 2 of 4"
+ * "Markets · 4"
+ */
+export declare function computeLabelWithSelected({ label, selectedCount, totalCount }: {
+    label: string;
+    selectedCount: number;
+    totalCount?: number;
+}): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/app-elements",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "type": "module",
   "files": [
     "dist"
@@ -56,13 +56,15 @@
     "polished": "^4.2.2",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.3.1",
-    "typescript": "^5.0.3",
+    "typescript": "^5.1.3",
     "vite": "^4.2.1",
     "vite-plugin-dts": "^2.2.0",
-    "vitest": "^0.29.8"
+    "vitest": "^0.29.8",
+    "wouter": "^2.11.0"
   },
   "peerDependencies": {
-    "@commercelayer/sdk": "^5.x"
+    "@commercelayer/sdk": "^5.x",
+    "wouter": "^2.x"
   },
   "scripts": {
     "build": "tsc && vite build",