@pushwoosh/smart-components-kit 1.0.54 → 1.0.56

package/SystemParcel/SystemParcel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type SystemParcelProps = {
+    importPath: string;
+    methodName?: string;
+    mountRootParcel: any;
+    Parcel: React.ComponentType<any>;
+} & Record<string, unknown>;
+export declare function SystemParcel({ importPath, mountRootParcel, methodName, Parcel, ...restProps }: SystemParcelProps): React.JSX.Element;
+export {};

package/SystemParcel/SystemParcel.js

@@ -0,0 +1,46 @@
+import React, { useMemo } from 'react';
+import { useSPAContext } from '../context';
+export function SystemParcel({
+  importPath,
+  mountRootParcel,
+  methodName = 'parcel',
+  Parcel,
+  ...restProps
+}) {
+  const spaContext = useSPAContext();
+  const parcelConfig = useMemo(() => createSystemParcelConfig(importPath, methodName), [importPath, methodName]);
+  return React.createElement(Parcel, {
+    config: parcelConfig,
+    spaContext: spaContext,
+    mountParcel: mountRootParcel,
+    ...restProps
+  });
+}
+function createSystemParcelConfig(importPath, methodName) {
+  let parcel;
+  return {
+    bootstrap({
+      domElement
+    }) {
+      return System.import(importPath).then(module => {
+        const factory = module[methodName];
+        if (typeof factory !== 'function') {
+          throw new Error(`Method "${methodName}" is not a function in module "${importPath}"`);
+        }
+        parcel = factory(domElement);
+      });
+    },
+    mount(props) {
+      parcel.render(props);
+      return Promise.resolve();
+    },
+    unmount() {
+      parcel.unmount();
+      return Promise.resolve();
+    },
+    update(props) {
+      parcel.render(props);
+      return Promise.resolve();
+    }
+  };
+}

package/SystemParcel/helpers.d.ts

@@ -0,0 +1,7 @@
+import { type ReactElement } from 'react';
+type ParcelResult<T> = {
+    render: (props: T) => void;
+    unmount: () => void;
+};
+export declare function createParcelFunction<T>(render: (props: T) => ReactElement): (container: HTMLElement) => ParcelResult<T>;
+export {};

package/SystemParcel/helpers.js

@@ -0,0 +1,14 @@
+import { createRoot } from 'react-dom/client';
+export function createParcelFunction(render) {
+  return container => {
+    const root = createRoot(container);
+    return {
+      render(props) {
+        root.render(render(props));
+      },
+      unmount() {
+        root.unmount();
+      }
+    };
+  };
+}

package/SystemParcel/index.d.ts

@@ -0,0 +1,2 @@
+export { SystemParcel } from './SystemParcel';
+export { createParcelFunction } from './helpers';

package/SystemParcel/index.js

@@ -0,0 +1,2 @@
+export { SystemParcel } from './SystemParcel';
+export { createParcelFunction } from './helpers';

package/Table/components/DataTable/DataTable.js

@@ -13,11 +13,14 @@ export function DataTable(props) {
   const {
     columns,
     width,
+    bgColor,
     isBordered = true,
     paginationPadding,
     context,
+    allLimits,
     renderTableTop,
     renderAfter,
+    onClearRequest,
     hidePagination,
     hidePageSizeSelector
   } = props;
@@ -26,16 +29,27 @@ export function DataTable(props) {
     params
   } = context;
   const isFiltered = ((_data$value = data.value) === null || _data$value === void 0 ? void 0 : _data$value.isFiltered) || params.search;
+  const onClearRequestDefault = () => {
+    const keys = ['perPage', 'order', 'direction'];
+    context.onChangeParams(keys.reduce((acc, key) => ({
+      ...acc,
+      [key]: context.params[key]
+    }), {
+      page: 1,
+      search: ''
+    }));
+  };
   return React.createElement(DataTableContext.Provider, {
     value: context
   }, React.createElement(Table, {
     columns: columns,
     width: width,
-    isBordered: isBordered
+    isBordered: isBordered,
+    "$bgColor": bgColor
   }, renderTableTop === null || renderTableTop === void 0 ? void 0 : renderTableTop(context), 'renderHead' in props && props.renderHead(), 'renderList' in props ? props.renderList(context) : React.createElement(DataTableList, {
     renderItem: props.renderItem
   }), !hidePagination && React.createElement(DataTablePagination, {
-    allLimits: [10, 20, 50, 100],
+    allLimits: allLimits ?? [10, 20, 50, 100],
     padding: paginationPadding,
     hidePageSizeSelector: hidePageSizeSelector
   }, data.loading && React.createElement(Horizontal, {
@@ -58,23 +72,14 @@ export function DataTable(props) {
     "$gap": 4
   }, "Result:", React.createElement(LockedText, null, `${(_data$value3 = data.value) === null || _data$value3 === void 0 ? void 0 : _data$value3.total} item${(((_data$value4 = data.value) === null || _data$value4 === void 0 ? void 0 : _data$value4.total) ?? 0) > 1 ? 's' : ''}`)), !data.loading && !data.error && (((_data$value5 = data.value) === null || _data$value5 === void 0 ? void 0 : _data$value5.total) ?? 0) === 0 && !isFiltered && React.createElement(Horizontal, {
     "$placeItems": "center"
-  }, React.createElement(LockedText, null, "No items yet")), !data.loading && (((_data$value6 = data.value) === null || _data$value6 === void 0 || (_data$value6 = _data$value6.items) === null || _data$value6 === void 0 ? void 0 : _data$value6.length) ?? 0) === 0 && isFiltered && React.createElement(Horizontal, {
+  }, React.createElement(LockedText, null, "No items yet")), !data.loading && isFiltered && React.createElement(Horizontal, {
     "$gap": 16
-  }, !data.error && React.createElement(Horizontal, {
+  }, !data.error && (((_data$value6 = data.value) === null || _data$value6 === void 0 || (_data$value6 = _data$value6.items) === null || _data$value6 === void 0 ? void 0 : _data$value6.length) ?? 0) === 0 && React.createElement(Horizontal, {
     "$placeItems": "center",
     "$gap": 4
   }, "Result:", React.createElement(LockedText, null, "No match found")), React.createElement(Button, {
     color: "primary",
     view: "ghost",
-    onClick: () => {
-      const keys = ['perPage', 'order', 'direction'];
-      context.onChangeParams(keys.reduce((acc, key) => ({
-        ...acc,
-        [key]: context.params[key]
-      }), {
-        page: 1,
-        search: ''
-      }));
-    }
+    onClick: onClearRequest ?? onClearRequestDefault
   }, "Clear request")))), renderAfter === null || renderAfter === void 0 ? void 0 : renderAfter(context));
 }

package/Table/components/DataTable/types.d.ts

@@ -4,25 +4,31 @@ export type DataTableListProps<I, P extends DataTableParams> = {
     columns: string;
     width?: string | number;
     isBordered?: boolean;
+    bgColor?: string;
     context: DataTableContextType<I, P>;
     hidePagination?: boolean;
     hidePageSizeSelector?: boolean;
     paginationPadding?: string;
+    allLimits?: number[];
     renderTableTop?: (ctxValue: DataTableContextType<I, P>) => ReactNode;
     renderList: (ctxValue: DataTableContextType<I, P>) => ReactNode;
     renderAfter?: (ctxValue: DataTableContextType<I, P>) => ReactNode;
+    onClearRequest?: () => void;
 };
 export type DataTableItemProps<I, P extends DataTableParams> = {
     columns: string;
     width?: string | number;
     isBordered?: boolean;
+    bgColor?: string;
     context: DataTableContextType<I, P>;
     hidePagination?: boolean;
     hidePageSizeSelector?: boolean;
     paginationPadding?: string;
+    allLimits?: number[];
     renderTableTop?: (ctxValue: DataTableContextType<I, P>) => ReactNode;
     renderHead: () => ReactNode;
     renderItem: (item: I) => ReactNode;
     renderAfter?: (ctxValue: DataTableContextType<I, P>) => ReactNode;
+    onClearRequest?: () => void;
 };
 export type DataTableProps<I, P extends DataTableParams> = DataTableListProps<I, P> | DataTableItemProps<I, P>;

package/Table/hooks/useDataTableGetParams.js

@@ -39,7 +39,7 @@ export function useDataTableGetParams({
     const searchParams = new URLSearchParams(locationSearch);
     const paramsWithPrefix = mapKeys(params, key => `${prefix}${key}`);
     for (const [key, value] of Object.entries(paramsWithPrefix)) {
-      if (value === undefined || value === null || value === '') {
+      if (value === undefined || value === null || value === '' || Array.isArray(value) && value.length === 0) {
         searchParams.delete(key);
       } else {
         searchParams.set(key, String(value));

package/Table/styles.d.ts

@@ -3,6 +3,7 @@ export type TableProps = {
     columns: string;
     width?: string | number;
     isBordered?: boolean;
+    $bgColor?: string;
 };
 export declare const Table: import("styled-components").StyledComponent<"div", any, {
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;

package/Table/styles.js

@@ -8,7 +8,9 @@ export const Table = styled(Vertical).withConfig({
   columns
 }) => columns, ({
   isBordered
-}) => isBordered ? `1px solid ${Color.DIVIDER}` : 'none', ShapeRadius.SECTION, Color.CLEAR, ({
+}) => isBordered ? `1px solid ${Color.DIVIDER}` : 'none', ShapeRadius.SECTION, ({
+  $bgColor
+}) => $bgColor ?? Color.CLEAR, ({
   width
 }) => width ? `width: ${toCssValue(width)};` : '', Color.DIVIDER);
 export const Td = styled(GridContainer).attrs({

package/index.d.ts

@@ -10,3 +10,4 @@ export * from './LanguagesSelector';
 export * from './RichMessageEditorSmart';
 export * from './Table';
 export * from './OpenActions';
+export * from './SystemParcel';

package/index.js

@@ -9,4 +9,5 @@ export * from './PlatformsConfigurationDrawer';
 export * from './LanguagesSelector';
 export * from './RichMessageEditorSmart';
 export * from './Table';
-export * from './OpenActions';
+export * from './OpenActions';
+export * from './SystemParcel';

package/package.json

@@ -52,5 +52,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.0.54"
+  "version": "1.0.56"
 }