@pushwoosh/smart-components-kit 1.9.0 → 1.10.0

package/ExportCSV/ExportCsvBanner/ExportCsvBanner.js

@@ -132,7 +132,7 @@ export const ExportCsvBanner = ({
       rightSlot: _jsx(Text, {
         "$color": Color.WARNING,
         "$variant": "h5",
-        "$uppercase": true,
+        "$textTransform": "uppercase",
         children: lang({
           message: 'SMART.EXPORT_CSV.KEEP_PAGE_OPEN'
         })

package/OpenActions/components/OpenActionsSummary/OpenActionsSummary.js

@@ -77,7 +77,7 @@ export const OpenActionsSummary = ({
         }), _jsxs(Text, {
           "$variant": "h4",
           "$color": Color.LOCKED,
-          "$uppercase": true,
+          "$textTransform": "uppercase",
           children: [labelText, ' ', label]
         })]
       }), _jsx(LinkRow, {

package/PickerSort/components/PickerSortMenu/PickerSortMenu.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import { type PickerSortMenuProps } from './types';
+/** Compact "⇅ <order> ▾" button that lets the user pick the order of a picker list. */
+export declare const PickerSortMenu: FC<PickerSortMenuProps>;

package/PickerSort/components/PickerSortMenu/PickerSortMenu.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DropdownMenuButton, DropdownMenuItem, DropdownMenuSection } from '@pushwoosh/dumb-components';
+import { DropdownIcon, SortIcon } from '@pushwoosh/kit-icons';
+import { PICKER_SORT_ORDERS } from '../../constants';
+import { ORDER_MESSAGES, useLang } from '../../polyglot';
+/** Compact "⇅ <order> ▾" button that lets the user pick the order of a picker list. */
+export const PickerSortMenu = ({
+  value,
+  onChange,
+  orders = PICKER_SORT_ORDERS,
+  isDisabled
+}) => {
+  const lang = useLang();
+  return _jsx(DropdownMenuButton, {
+    color: "secondary",
+    view: "ghost",
+    size: "compact",
+    icon: _jsx(SortIcon, {
+      size: "small",
+      type: "not-sorted"
+    }),
+    rightIcon: _jsx(DropdownIcon, {
+      direction: "down",
+      size: "small"
+    }),
+    label: lang({
+      message: ORDER_MESSAGES[value]
+    }),
+    isDisabled: isDisabled,
+    menuPlacement: "bottom-end",
+    children: _jsx(DropdownMenuSection, {
+      title: lang({
+        message: 'SMART.PICKER_SORT.TITLE'
+      }),
+      children: orders.map(order => _jsx(DropdownMenuItem, {
+        isActive: order === value,
+        onClick: () => onChange(order),
+        children: lang({
+          message: ORDER_MESSAGES[order]
+        })
+      }, order))
+    })
+  });
+};

package/PickerSort/components/PickerSortMenu/index.d.ts

@@ -0,0 +1 @@
+export { PickerSortMenu } from './PickerSortMenu';

package/PickerSort/components/PickerSortMenu/index.js

@@ -0,0 +1 @@
+export { PickerSortMenu } from './PickerSortMenu';

package/PickerSort/components/PickerSortMenu/types.d.ts

@@ -0,0 +1,12 @@
+import { type PickerSortOrder } from '../../types';
+/** Props of {@link PickerSortMenu}. */
+export type PickerSortMenuProps = {
+    /** Current order. */
+    readonly value: PickerSortOrder;
+    /** Fires with the order the user picked. */
+    readonly onChange: (order: PickerSortOrder) => void;
+    /** Orders to offer; defaults to all of them. */
+    readonly orders?: readonly PickerSortOrder[];
+    /** Disable the trigger. */
+    readonly isDisabled?: boolean;
+};

package/PickerSort/components/PickerSortMenu/types.js

@@ -0,0 +1 @@
+export {};

package/PickerSort/constants.d.ts

@@ -0,0 +1,4 @@
+import { type PickerSortOrder } from './types';
+/** Every order a picker may offer, in menu order. */
+export declare const PICKER_SORT_ORDERS: readonly PickerSortOrder[];
+export declare const PICKER_SORT_STORAGE_PREFIX = "picker-sort";

package/PickerSort/constants.js

@@ -0,0 +1,3 @@
+/** Every order a picker may offer, in menu order. */
+export const PICKER_SORT_ORDERS = ['created-desc', 'created-asc', 'updated-desc', 'name-asc', 'name-desc'];
+export const PICKER_SORT_STORAGE_PREFIX = 'picker-sort';

package/PickerSort/helpers.d.ts

@@ -0,0 +1,6 @@
+import { type PickerContentType, type PickerSortOrder, type PresetListOrder } from './types';
+/** Map a picker order to the `orderBy` / `orderDirection` of the preset `List` RPCs. */
+export declare function toPresetListOrder(order: PickerSortOrder): PresetListOrder;
+export declare function isPickerSortOrder(value: unknown): value is PickerSortOrder;
+export declare function resolvePickerSortOrder(stored: unknown, defaultOrder: PickerSortOrder, supportedOrders: readonly PickerSortOrder[]): PickerSortOrder;
+export declare function pickerSortStorageKey(userEmail: string, contentType: PickerContentType): string;

package/PickerSort/helpers.js

@@ -0,0 +1,36 @@
+import { PICKER_SORT_ORDERS, PICKER_SORT_STORAGE_PREFIX } from './constants';
+const PRESET_LIST_ORDERS = {
+  'created-desc': {
+    orderBy: 'CREATED',
+    orderDirection: 'DESC'
+  },
+  'created-asc': {
+    orderBy: 'CREATED',
+    orderDirection: 'ASC'
+  },
+  'updated-desc': {
+    orderBy: 'UPDATED',
+    orderDirection: 'DESC'
+  },
+  'name-asc': {
+    orderBy: 'NAME',
+    orderDirection: 'ASC'
+  },
+  'name-desc': {
+    orderBy: 'NAME',
+    orderDirection: 'DESC'
+  }
+};
+/** Map a picker order to the `orderBy` / `orderDirection` of the preset `List` RPCs. */
+export function toPresetListOrder(order) {
+  return PRESET_LIST_ORDERS[order];
+}
+export function isPickerSortOrder(value) {
+  return typeof value === 'string' && PICKER_SORT_ORDERS.includes(value);
+}
+export function resolvePickerSortOrder(stored, defaultOrder, supportedOrders) {
+  return isPickerSortOrder(stored) && supportedOrders.includes(stored) ? stored : defaultOrder;
+}
+export function pickerSortStorageKey(userEmail, contentType) {
+  return `${PICKER_SORT_STORAGE_PREFIX}:${userEmail}:${contentType}`;
+}

package/PickerSort/index.d.ts

@@ -0,0 +1,7 @@
+export { PickerSortMenu } from './components/PickerSortMenu';
+export { PICKER_SORT_ORDERS } from './constants';
+export { toPresetListOrder } from './helpers';
+export { usePagedItems } from './usePagedItems';
+export { usePickerSortOrder } from './usePickerSortOrder';
+export type { PickerSortMenuProps } from './components/PickerSortMenu/types';
+export type { LoadPagedItems, PagedItemsPage, PagedItemsState, PickerContentType, PickerSortOrder, PickerSortOrderState, PresetListOrder, UsePickerSortOrderOptions, } from './types';

package/PickerSort/index.js

@@ -0,0 +1,5 @@
+export { PickerSortMenu } from './components/PickerSortMenu';
+export { PICKER_SORT_ORDERS } from './constants';
+export { toPresetListOrder } from './helpers';
+export { usePagedItems } from './usePagedItems';
+export { usePickerSortOrder } from './usePickerSortOrder';

package/PickerSort/polyglot/index.d.ts

@@ -0,0 +1,4 @@
+import { type PickerSortOrder } from '../types';
+import { type PickerSortMessages } from './types';
+export declare const Lang: import("react").FC<import("@pushwoosh/dumb-components/polyglot").LangProps<PickerSortMessages>>, useLang: () => (props: import("@pushwoosh/dumb-components/polyglot").LangProps<PickerSortMessages>) => string;
+export declare const ORDER_MESSAGES: Record<PickerSortOrder, keyof PickerSortMessages>;

package/PickerSort/polyglot/index.js

@@ -0,0 +1,41 @@
+import { createLang } from '@pushwoosh/dumb-components/polyglot';
+import { messages as ar } from './messages_ar';
+import { messages as bn } from './messages_bn';
+import { messages as de } from './messages_de';
+import { messages as en } from './messages_en';
+import { messages as es } from './messages_es';
+import { messages as fr } from './messages_fr';
+import { messages as he } from './messages_he';
+import { messages as hi } from './messages_hi';
+import { messages as ja } from './messages_ja';
+import { messages as ko } from './messages_ko';
+import { messages as pt } from './messages_pt';
+import { messages as ru } from './messages_ru';
+import { messages as th } from './messages_th';
+import { messages as zh } from './messages_zh';
+export const {
+  Lang,
+  useLang
+} = createLang({
+  ar,
+  bn,
+  de,
+  en,
+  es,
+  fr,
+  he,
+  hi,
+  ja,
+  ko,
+  pt,
+  ru,
+  th,
+  zh
+});
+export const ORDER_MESSAGES = {
+  'created-desc': 'SMART.PICKER_SORT.ORDER.CREATED_DESC',
+  'created-asc': 'SMART.PICKER_SORT.ORDER.CREATED_ASC',
+  'updated-desc': 'SMART.PICKER_SORT.ORDER.UPDATED_DESC',
+  'name-asc': 'SMART.PICKER_SORT.ORDER.NAME_ASC',
+  'name-desc': 'SMART.PICKER_SORT.ORDER.NAME_DESC'
+};

package/PickerSort/polyglot/messages_ar.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type PickerSortMessages } from './types';
+export declare const messages: LangMessages<PickerSortMessages>;

package/PickerSort/polyglot/messages_ar.js

@@ -0,0 +1,8 @@
+export const messages = {
+  'SMART.PICKER_SORT.TITLE': 'ترتيب حسب',
+  'SMART.PICKER_SORT.ORDER.CREATED_DESC': 'الأحدث أولاً',
+  'SMART.PICKER_SORT.ORDER.CREATED_ASC': 'الأقدم أولاً',
+  'SMART.PICKER_SORT.ORDER.UPDATED_DESC': 'المحدّثة مؤخرًا',
+  'SMART.PICKER_SORT.ORDER.NAME_ASC': 'الاسم أ→ي',
+  'SMART.PICKER_SORT.ORDER.NAME_DESC': 'الاسم ي→أ'
+};

package/PickerSort/polyglot/messages_bn.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type PickerSortMessages } from './types';
+export declare const messages: LangMessages<PickerSortMessages>;

package/PickerSort/polyglot/messages_bn.js

@@ -0,0 +1,8 @@
+export const messages = {
+  'SMART.PICKER_SORT.TITLE': 'সাজান',
+  'SMART.PICKER_SORT.ORDER.CREATED_DESC': 'নতুন আগে',
+  'SMART.PICKER_SORT.ORDER.CREATED_ASC': 'পুরনো আগে',
+  'SMART.PICKER_SORT.ORDER.UPDATED_DESC': 'সম্প্রতি আপডেট করা',
+  'SMART.PICKER_SORT.ORDER.NAME_ASC': 'নাম A→Z',
+  'SMART.PICKER_SORT.ORDER.NAME_DESC': 'নাম Z→A'
+};

package/PickerSort/polyglot/messages_de.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type PickerSortMessages } from './types';
+export declare const messages: LangMessages<PickerSortMessages>;

package/PickerSort/polyglot/messages_de.js

@@ -0,0 +1,8 @@
+export const messages = {
+  'SMART.PICKER_SORT.TITLE': 'Sortieren nach',
+  'SMART.PICKER_SORT.ORDER.CREATED_DESC': 'Neueste zuerst',
+  'SMART.PICKER_SORT.ORDER.CREATED_ASC': 'Älteste zuerst',
+  'SMART.PICKER_SORT.ORDER.UPDATED_DESC': 'Zuletzt aktualisiert',
+  'SMART.PICKER_SORT.ORDER.NAME_ASC': 'Name A→Z',
+  'SMART.PICKER_SORT.ORDER.NAME_DESC': 'Name Z→A'
+};

package/PickerSort/polyglot/messages_en.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type PickerSortMessages } from './types';
+export declare const messages: LangMessages<PickerSortMessages>;

package/PickerSort/polyglot/messages_en.js

@@ -0,0 +1,8 @@
+export const messages = {
+  'SMART.PICKER_SORT.TITLE': 'Sort by',
+  'SMART.PICKER_SORT.ORDER.CREATED_DESC': 'Newest first',
+  'SMART.PICKER_SORT.ORDER.CREATED_ASC': 'Oldest first',
+  'SMART.PICKER_SORT.ORDER.UPDATED_DESC': 'Recently updated',
+  'SMART.PICKER_SORT.ORDER.NAME_ASC': 'Name A→Z',
+  'SMART.PICKER_SORT.ORDER.NAME_DESC': 'Name Z→A'
+};

package/PickerSort/polyglot/messages_es.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type PickerSortMessages } from './types';
+export declare const messages: LangMessages<PickerSortMessages>;

package/PickerSort/polyglot/messages_es.js

@@ -0,0 +1,8 @@
+export const messages = {
+  'SMART.PICKER_SORT.TITLE': 'Ordenar por',
+  'SMART.PICKER_SORT.ORDER.CREATED_DESC': 'Más recientes primero',
+  'SMART.PICKER_SORT.ORDER.CREATED_ASC': 'Más antiguos primero',
+  'SMART.PICKER_SORT.ORDER.UPDATED_DESC': 'Actualizados recientemente',
+  'SMART.PICKER_SORT.ORDER.NAME_ASC': 'Nombre A→Z',
+  'SMART.PICKER_SORT.ORDER.NAME_DESC': 'Nombre Z→A'
+};

package/PickerSort/polyglot/messages_fr.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type PickerSortMessages } from './types';
+export declare const messages: LangMessages<PickerSortMessages>;

package/PickerSort/polyglot/messages_fr.js

@@ -0,0 +1,8 @@
+export const messages = {
+  'SMART.PICKER_SORT.TITLE': 'Trier par',
+  'SMART.PICKER_SORT.ORDER.CREATED_DESC': 'Plus récents d’abord',
+  'SMART.PICKER_SORT.ORDER.CREATED_ASC': 'Plus anciens d’abord',
+  'SMART.PICKER_SORT.ORDER.UPDATED_DESC': 'Modifiés récemment',
+  'SMART.PICKER_SORT.ORDER.NAME_ASC': 'Nom A→Z',
+  'SMART.PICKER_SORT.ORDER.NAME_DESC': 'Nom Z→A'
+};

package/PickerSort/polyglot/messages_he.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type PickerSortMessages } from './types';
+export declare const messages: LangMessages<PickerSortMessages>;

package/PickerSort/polyglot/messages_he.js

@@ -0,0 +1,8 @@
+export const messages = {
+  'SMART.PICKER_SORT.TITLE': 'מיון לפי',
+  'SMART.PICKER_SORT.ORDER.CREATED_DESC': 'החדשים קודם',
+  'SMART.PICKER_SORT.ORDER.CREATED_ASC': 'הישנים קודם',
+  'SMART.PICKER_SORT.ORDER.UPDATED_DESC': 'עודכנו לאחרונה',
+  'SMART.PICKER_SORT.ORDER.NAME_ASC': 'שם א→ת',
+  'SMART.PICKER_SORT.ORDER.NAME_DESC': 'שם ת→א'
+};

package/PickerSort/polyglot/messages_hi.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type PickerSortMessages } from './types';
+export declare const messages: LangMessages<PickerSortMessages>;

package/PickerSort/polyglot/messages_hi.js

@@ -0,0 +1,8 @@
+export const messages = {
+  'SMART.PICKER_SORT.TITLE': 'क्रमबद्ध करें',
+  'SMART.PICKER_SORT.ORDER.CREATED_DESC': 'नए पहले',
+  'SMART.PICKER_SORT.ORDER.CREATED_ASC': 'पुराने पहले',
+  'SMART.PICKER_SORT.ORDER.UPDATED_DESC': 'हाल ही में अपडेट किए गए',
+  'SMART.PICKER_SORT.ORDER.NAME_ASC': 'नाम A→Z',
+  'SMART.PICKER_SORT.ORDER.NAME_DESC': 'नाम Z→A'
+};

package/PickerSort/polyglot/messages_ja.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type PickerSortMessages } from './types';
+export declare const messages: LangMessages<PickerSortMessages>;

package/PickerSort/polyglot/messages_ja.js

@@ -0,0 +1,8 @@
+export const messages = {
+  'SMART.PICKER_SORT.TITLE': '並べ替え',
+  'SMART.PICKER_SORT.ORDER.CREATED_DESC': '新しい順',
+  'SMART.PICKER_SORT.ORDER.CREATED_ASC': '古い順',
+  'SMART.PICKER_SORT.ORDER.UPDATED_DESC': '最近更新した順',
+  'SMART.PICKER_SORT.ORDER.NAME_ASC': '名前 A→Z',
+  'SMART.PICKER_SORT.ORDER.NAME_DESC': '名前 Z→A'
+};

package/PickerSort/polyglot/messages_ko.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type PickerSortMessages } from './types';
+export declare const messages: LangMessages<PickerSortMessages>;

package/PickerSort/polyglot/messages_ko.js

@@ -0,0 +1,8 @@
+export const messages = {
+  'SMART.PICKER_SORT.TITLE': '정렬',
+  'SMART.PICKER_SORT.ORDER.CREATED_DESC': '최신순',
+  'SMART.PICKER_SORT.ORDER.CREATED_ASC': '오래된순',
+  'SMART.PICKER_SORT.ORDER.UPDATED_DESC': '최근 업데이트순',
+  'SMART.PICKER_SORT.ORDER.NAME_ASC': '이름 A→Z',
+  'SMART.PICKER_SORT.ORDER.NAME_DESC': '이름 Z→A'
+};

package/PickerSort/polyglot/messages_pt.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type PickerSortMessages } from './types';
+export declare const messages: LangMessages<PickerSortMessages>;

package/PickerSort/polyglot/messages_pt.js

@@ -0,0 +1,8 @@
+export const messages = {
+  'SMART.PICKER_SORT.TITLE': 'Ordenar por',
+  'SMART.PICKER_SORT.ORDER.CREATED_DESC': 'Mais recentes primeiro',
+  'SMART.PICKER_SORT.ORDER.CREATED_ASC': 'Mais antigos primeiro',
+  'SMART.PICKER_SORT.ORDER.UPDATED_DESC': 'Atualizados recentemente',
+  'SMART.PICKER_SORT.ORDER.NAME_ASC': 'Nome A→Z',
+  'SMART.PICKER_SORT.ORDER.NAME_DESC': 'Nome Z→A'
+};

package/PickerSort/polyglot/messages_ru.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type PickerSortMessages } from './types';
+export declare const messages: LangMessages<PickerSortMessages>;

package/PickerSort/polyglot/messages_ru.js

@@ -0,0 +1,8 @@
+export const messages = {
+  'SMART.PICKER_SORT.TITLE': 'Сортировка',
+  'SMART.PICKER_SORT.ORDER.CREATED_DESC': 'Сначала новые',
+  'SMART.PICKER_SORT.ORDER.CREATED_ASC': 'Сначала старые',
+  'SMART.PICKER_SORT.ORDER.UPDATED_DESC': 'Недавно изменённые',
+  'SMART.PICKER_SORT.ORDER.NAME_ASC': 'Название А→Я',
+  'SMART.PICKER_SORT.ORDER.NAME_DESC': 'Название Я→А'
+};

package/PickerSort/polyglot/messages_th.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type PickerSortMessages } from './types';
+export declare const messages: LangMessages<PickerSortMessages>;

package/PickerSort/polyglot/messages_th.js

@@ -0,0 +1,8 @@
+export const messages = {
+  'SMART.PICKER_SORT.TITLE': 'เรียงตาม',
+  'SMART.PICKER_SORT.ORDER.CREATED_DESC': 'ใหม่สุดก่อน',
+  'SMART.PICKER_SORT.ORDER.CREATED_ASC': 'เก่าสุดก่อน',
+  'SMART.PICKER_SORT.ORDER.UPDATED_DESC': 'อัปเดตล่าสุด',
+  'SMART.PICKER_SORT.ORDER.NAME_ASC': 'ชื่อ A→Z',
+  'SMART.PICKER_SORT.ORDER.NAME_DESC': 'ชื่อ Z→A'
+};

package/PickerSort/polyglot/messages_zh.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type PickerSortMessages } from './types';
+export declare const messages: LangMessages<PickerSortMessages>;

package/PickerSort/polyglot/messages_zh.js

@@ -0,0 +1,8 @@
+export const messages = {
+  'SMART.PICKER_SORT.TITLE': '排序方式',
+  'SMART.PICKER_SORT.ORDER.CREATED_DESC': '最新优先',
+  'SMART.PICKER_SORT.ORDER.CREATED_ASC': '最早优先',
+  'SMART.PICKER_SORT.ORDER.UPDATED_DESC': '最近更新',
+  'SMART.PICKER_SORT.ORDER.NAME_ASC': '名称 A→Z',
+  'SMART.PICKER_SORT.ORDER.NAME_DESC': '名称 Z→A'
+};

package/PickerSort/polyglot/types.d.ts

@@ -0,0 +1,9 @@
+import type { NoParams } from '@pushwoosh/dumb-components/polyglot';
+export type PickerSortMessages = {
+    'SMART.PICKER_SORT.TITLE': NoParams;
+    'SMART.PICKER_SORT.ORDER.CREATED_DESC': NoParams;
+    'SMART.PICKER_SORT.ORDER.CREATED_ASC': NoParams;
+    'SMART.PICKER_SORT.ORDER.UPDATED_DESC': NoParams;
+    'SMART.PICKER_SORT.ORDER.NAME_ASC': NoParams;
+    'SMART.PICKER_SORT.ORDER.NAME_DESC': NoParams;
+};

package/PickerSort/polyglot/types.js

@@ -0,0 +1 @@
+export {};

package/PickerSort/types.d.ts

@@ -0,0 +1,50 @@
+import { type ListPresetsRequest_OrderBy, type ListPresetsRequest_OrderDirection } from '@pushwoosh/rpc-v2-http-api-data/presets';
+/** Order a picker can list its items in. */
+export type PickerSortOrder = 'created-desc' | 'created-asc' | 'updated-desc' | 'name-asc' | 'name-desc';
+/** Content kind a picker lists; the chosen order is remembered per user and per kind. */
+export type PickerContentType = 'push' | 'sms' | 'email' | 'line' | 'kakao' | 'inbox' | 'whatsapp' | 'viber' | 'richmedia' | 'popup';
+/** `orderBy` / `orderDirection` pair of `presets.List`; `smsPresets`, `linePresets`, `kakaoPresets` and `appInboxPresets` share the same enums. */
+export type PresetListOrder = {
+    readonly orderBy: ListPresetsRequest_OrderBy;
+    readonly orderDirection: ListPresetsRequest_OrderDirection;
+};
+/** Options of {@link usePickerSortOrder}. */
+export type UsePickerSortOrderOptions = {
+    /** Content kind the picker lists. */
+    readonly contentType: PickerContentType;
+    /** Order shown until the user picks one, and whenever the stored one is not supported here. */
+    readonly defaultOrder: PickerSortOrder;
+    /** Orders this picker can request; defaults to all of them. */
+    readonly supportedOrders?: readonly PickerSortOrder[];
+};
+/** Result of {@link usePickerSortOrder}. */
+export type PickerSortOrderState = {
+    /** Order to request. */
+    readonly order: PickerSortOrder;
+    /** Remember a new order for this user and content kind. */
+    readonly setOrder: (order: PickerSortOrder) => void;
+    /** `false` until the stored choice is read; load the first page only after that to avoid a double request. */
+    readonly isReady: boolean;
+};
+/** One page returned by a {@link usePagedItems} loader. */
+export type PagedItemsPage<T> = {
+    /** Items of the requested page. */
+    readonly items: T[];
+    /** Whether a next page exists. */
+    readonly hasMore: boolean;
+};
+/** Loads one zero-based page. */
+export type LoadPagedItems<T> = (page: number) => Promise<PagedItemsPage<T>>;
+/** Result of {@link usePagedItems}. */
+export type PagedItemsState<T> = {
+    /** Items of all pages loaded so far. */
+    readonly items: T[];
+    /** A page is being loaded. */
+    readonly isLoading: boolean;
+    /** A next page exists. */
+    readonly hasMore: boolean;
+    /** The last page request failed; `loadMore` retries it. */
+    readonly isError: boolean;
+    /** Load the next page; no-op while loading or when there is nothing more. Wire it to `onMenuScrollToBottom`. */
+    readonly loadMore: () => void;
+};

package/PickerSort/types.js

@@ -0,0 +1 @@
+export {};

package/PickerSort/usePagedItems.d.ts

@@ -0,0 +1,3 @@
+import { type LoadPagedItems, type PagedItemsState } from './types';
+/** Accumulates pages of a server-sorted list for infinite scroll; a new `resetKey` restarts from page 0. */
+export declare function usePagedItems<T>(loadPage: LoadPagedItems<T>, resetKey: string, enabled?: boolean): PagedItemsState<T>;

package/PickerSort/usePagedItems.js

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { usePersistentFunction } from '@pushwoosh/kit-helpers';
+/** Accumulates pages of a server-sorted list for infinite scroll; a new `resetKey` restarts from page 0. */
+export function usePagedItems(loadPage, resetKey, enabled = true) {
+  const [state, setState] = useState({
+    items: [],
+    hasMore: true,
+    isLoading: enabled,
+    isError: false
+  });
+  const load = usePersistentFunction(loadPage);
+  const runRef = useRef(0);
+  const cursorRef = useRef({
+    next: 0,
+    hasMore: true,
+    isFetching: false
+  });
+  const fetchPage = useCallback(page => {
+    const run = runRef.current;
+    cursorRef.current.isFetching = true;
+    setState(prev => ({
+      ...prev,
+      isLoading: true,
+      isError: false
+    }));
+    load(page).then(({
+      items,
+      hasMore
+    }) => {
+      if (run !== runRef.current) {
+        return;
+      }
+      cursorRef.current = {
+        next: page + 1,
+        hasMore,
+        isFetching: false
+      };
+      setState(prev => ({
+        items: page === 0 ? items : [...prev.items, ...items],
+        hasMore,
+        isLoading: false,
+        isError: false
+      }));
+    }).catch(() => {
+      if (run === runRef.current) {
+        cursorRef.current.isFetching = false;
+        setState(prev => ({
+          ...prev,
+          isLoading: false,
+          isError: true
+        }));
+      }
+    });
+  }, [load]);
+  useEffect(() => {
+    cursorRef.current = {
+      next: 0,
+      hasMore: true,
+      isFetching: false
+    };
+    setState({
+      items: [],
+      hasMore: true,
+      isLoading: enabled,
+      isError: false
+    });
+    if (enabled) {
+      fetchPage(0);
+    }
+    return () => {
+      runRef.current += 1;
+    };
+  }, [resetKey, enabled, fetchPage]);
+  const loadMore = useCallback(() => {
+    const {
+      next,
+      hasMore,
+      isFetching
+    } = cursorRef.current;
+    if (enabled && hasMore && !isFetching) {
+      fetchPage(next);
+    }
+  }, [enabled, fetchPage]);
+  return {
+    items: state.items,
+    isLoading: state.isLoading,
+    hasMore: state.hasMore,
+    isError: state.isError,
+    loadMore
+  };
+}

package/PickerSort/usePickerSortOrder.d.ts

@@ -0,0 +1,3 @@
+import { type PickerSortOrderState, type UsePickerSortOrderOptions } from './types';
+/** Order the user chose for pickers of one content kind, kept in the shell key-value storage. */
+export declare function usePickerSortOrder({ contentType, defaultOrder, supportedOrders, }: UsePickerSortOrderOptions): PickerSortOrderState;

package/PickerSort/usePickerSortOrder.js

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useSession, useSPAContext } from '@pushwoosh/spa-context';
+import { PICKER_SORT_ORDERS } from './constants';
+import { pickerSortStorageKey, resolvePickerSortOrder } from './helpers';
+/** Order the user chose for pickers of one content kind, kept in the shell key-value storage. */
+export function usePickerSortOrder({
+  contentType,
+  defaultOrder,
+  supportedOrders = PICKER_SORT_ORDERS
+}) {
+  const {
+    keyValueStorage
+  } = useSPAContext();
+  const {
+    user
+  } = useSession();
+  const storageKey = pickerSortStorageKey(user.email, contentType);
+  const [stored, setStored] = useState(null);
+  useEffect(() => {
+    let isActive = true;
+    let isChanged = false;
+    const unsubscribe = keyValueStorage.subscribe(storageKey, change => {
+      isChanged = true;
+      setStored({
+        key: storageKey,
+        value: change.value
+      });
+    });
+    keyValueStorage.get(storageKey).catch(() => undefined).then(value => {
+      if (isActive && !isChanged) {
+        setStored({
+          key: storageKey,
+          value
+        });
+      }
+    });
+    return () => {
+      isActive = false;
+      unsubscribe();
+    };
+  }, [keyValueStorage, storageKey]);
+  const setOrder = useCallback(order => {
+    keyValueStorage.set(storageKey, order).catch(() => undefined);
+  }, [keyValueStorage, storageKey]);
+  const isReady = stored?.key === storageKey;
+  return {
+    order: resolvePickerSortOrder(isReady ? stored.value : undefined, defaultOrder, supportedOrders),
+    setOrder,
+    isReady
+  };
+}

package/ProductUpdates/ProductUpdateCard.js

@@ -46,7 +46,7 @@ export function ProductUpdateCard({
           children: [_jsx(Text, {
             "$variant": "footnote",
             "$color": Color.LOCKED,
-            "$uppercase": true,
+            "$textTransform": "uppercase",
             children: formatUpdateDate(update.created, language)
           }), update.status === ALERT_STATUS_UNREAD && _jsx(Badge, {
             color: "sky",

package/ProductUpdates/styles.d.ts

@@ -8,7 +8,8 @@ export declare const List: import("styled-components/dist/types").IStyledCompone
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
     $color?: string;
-    $uppercase?: boolean;
+    $textAlign?: import("react").CSSProperties["textAlign"];
+    $textTransform?: import("react").CSSProperties["textTransform"];
     $ellipsis?: boolean;
     $variant?: import("@pushwoosh/kit-typography").TypographyVariant;
 }>, "as" | "forwardedAs"> & {
@@ -26,7 +27,8 @@ export declare const List: import("styled-components/dist/types").IStyledCompone
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
     $color?: string;
-    $uppercase?: boolean;
+    $textAlign?: import("react").CSSProperties["textAlign"];
+    $textTransform?: import("react").CSSProperties["textTransform"];
     $ellipsis?: boolean;
     $variant?: import("@pushwoosh/kit-typography").TypographyVariant;
 }>, "as" | "forwardedAs"> & {

package/index.d.ts

@@ -15,6 +15,7 @@ export * from './ResendModal';
 export * from './RichMessageEditorSmart';
 export * from './Table';
 export * from './OpenActions';
+export * from './PickerSort';
 export * from './SystemParcel';
 export * from './ModalCloningJourney';
 export * from './types';

package/index.js

@@ -15,6 +15,7 @@ export * from './ResendModal';
 export * from './RichMessageEditorSmart';
 export * from './Table';
 export * from './OpenActions';
+export * from './PickerSort';
 export * from './SystemParcel';
 export * from './ModalCloningJourney';
 export * from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/smart-components-kit",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",
@@ -17,11 +17,11 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^2.11.0",
+    "@pushwoosh/dumb-components": "^2.11.4",
     "@pushwoosh/kit-constants": "^2.1.1",
     "@pushwoosh/kit-helpers": "^4.14.0",
     "@pushwoosh/kit-icons": "^2.3.10",
-    "@pushwoosh/kit-typography": "^1.10.0",
+    "@pushwoosh/kit-typography": "^1.11.0",
     "@pushwoosh/rpc-v2-http-api-data": "^0.2.389",
     "@pushwoosh/spa-context": "^3.0.0",
     "idb-keyval": "^6.2.2",
@@ -30,7 +30,7 @@
     "react-router-dom": "^5.3.4"
   },
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^3.1.4",
+    "@pushwoosh/frontend-builder-engine": "^3.1.6",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^24.19.1",
     "@types/react": "^18.3.31",