@pushwoosh/smart-components-kit 1.9.1 → 1.11.0

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,6 @@
+import { type PickerSortOrder } from './types';
+/** Every order a picker may offer, in menu order. */
+export declare const PICKER_SORT_ORDERS: readonly PickerSortOrder[];
+/** Orders `popupFormsContents.List` can serve; it has no created date. */
+export declare const POPUP_CONTENTS_SORT_ORDERS: readonly PickerSortOrder[];
+export declare const PICKER_SORT_STORAGE_PREFIX = "picker-sort";

package/PickerSort/constants.js

@@ -0,0 +1,5 @@
+/** Every order a picker may offer, in menu order. */
+export const PICKER_SORT_ORDERS = ['created-desc', 'created-asc', 'updated-desc', 'name-asc', 'name-desc'];
+/** Orders `popupFormsContents.List` can serve; it has no created date. */
+export const POPUP_CONTENTS_SORT_ORDERS = ['updated-desc', 'name-asc', 'name-desc'];
+export const PICKER_SORT_STORAGE_PREFIX = 'picker-sort';

package/PickerSort/helpers.d.ts

@@ -0,0 +1,12 @@
+import { type PickerContentType, type PickerSortAccessors, type PickerSortOrder, type PopupContentsListOrder, type PresetListOrder, type RichMediaListOrder } from './types';
+/** Map a picker order to the `orderBy` / `orderDirection` of the preset `List` RPCs. */
+export declare function toPresetListOrder(order: PickerSortOrder): PresetListOrder;
+/** Map a picker order to the `orderBy` / `orderType` of `richMedia.List`. */
+export declare function toRichMediaListOrder(order: PickerSortOrder): RichMediaListOrder;
+/** Map a picker order to `popupFormsContents.List`; created orders, which it lacks, fall back to the updated date. */
+export declare function toPopupContentsListOrder(order: PickerSortOrder): PopupContentsListOrder;
+/** Sort a list the source returns whole, as the picker order asks; stable, returns a new array. */
+export declare function sortItemsByPickerOrder<T>(items: readonly T[], order: PickerSortOrder, { getName, getCreated, getUpdated }: PickerSortAccessors<T>): T[];
+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,135 @@
+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'
+  }
+};
+const RICH_MEDIA_LIST_ORDERS = {
+  'created-desc': {
+    orderBy: 'CREATED_DATE',
+    orderType: 'DESC'
+  },
+  'created-asc': {
+    orderBy: 'CREATED_DATE',
+    orderType: 'ASC'
+  },
+  'updated-desc': {
+    orderBy: 'UPDATED_DATE',
+    orderType: 'DESC'
+  },
+  'name-asc': {
+    orderBy: 'NAME',
+    orderType: 'ASC'
+  },
+  'name-desc': {
+    orderBy: 'NAME',
+    orderType: 'DESC'
+  }
+};
+const POPUP_CONTENTS_LIST_ORDERS = {
+  'created-desc': {
+    orderBy: 'UPDATED',
+    orderDirection: 'DESC'
+  },
+  'created-asc': {
+    orderBy: 'UPDATED',
+    orderDirection: 'ASC'
+  },
+  'updated-desc': {
+    orderBy: 'UPDATED',
+    orderDirection: 'DESC'
+  },
+  'name-asc': {
+    orderBy: 'NAME',
+    orderDirection: 'ASC'
+  },
+  'name-desc': {
+    orderBy: 'NAME',
+    orderDirection: 'DESC'
+  }
+};
+const nameCollator = new Intl.Collator(undefined, {
+  numeric: true,
+  sensitivity: 'base'
+});
+/** Map a picker order to the `orderBy` / `orderDirection` of the preset `List` RPCs. */
+export function toPresetListOrder(order) {
+  return PRESET_LIST_ORDERS[order];
+}
+/** Map a picker order to the `orderBy` / `orderType` of `richMedia.List`. */
+export function toRichMediaListOrder(order) {
+  return RICH_MEDIA_LIST_ORDERS[order];
+}
+/** Map a picker order to `popupFormsContents.List`; created orders, which it lacks, fall back to the updated date. */
+export function toPopupContentsListOrder(order) {
+  return POPUP_CONTENTS_LIST_ORDERS[order];
+}
+function toTime(date) {
+  if (date === null || date === undefined || date === '') {
+    return undefined;
+  }
+  const time = date instanceof Date ? date.getTime() : new Date(date).getTime();
+  return Number.isNaN(time) ? undefined : time;
+}
+function sortByDate(items, getDate, direction) {
+  if (!getDate) {
+    return [...items];
+  }
+  const dated = items.map(item => ({
+    item,
+    time: toTime(getDate(item))
+  }));
+  return dated.sort((a, b) => {
+    if (a.time === undefined || b.time === undefined) {
+      return Number(a.time === undefined) - Number(b.time === undefined);
+    }
+    return (a.time - b.time) * direction;
+  }).map(({
+    item
+  }) => item);
+}
+/** Sort a list the source returns whole, as the picker order asks; stable, returns a new array. */
+export function sortItemsByPickerOrder(items, order, {
+  getName,
+  getCreated,
+  getUpdated
+}) {
+  switch (order) {
+    case 'name-asc':
+      return [...items].sort((a, b) => nameCollator.compare(getName(a), getName(b)));
+    case 'name-desc':
+      return [...items].sort((a, b) => nameCollator.compare(getName(b), getName(a)));
+    case 'created-desc':
+      return sortByDate(items, getCreated, -1);
+    case 'created-asc':
+      return sortByDate(items, getCreated, 1);
+    case 'updated-desc':
+      return sortByDate(items, getUpdated, -1);
+  }
+}
+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, POPUP_CONTENTS_SORT_ORDERS } from './constants';
+export { sortItemsByPickerOrder, toPopupContentsListOrder, toPresetListOrder, toRichMediaListOrder } from './helpers';
+export { usePagedItems } from './usePagedItems';
+export { usePickerSortOrder } from './usePickerSortOrder';
+export type { PickerSortMenuProps } from './components/PickerSortMenu/types';
+export type { LoadPagedItems, PagedItemsPage, PagedItemsState, PickerContentType, PickerSortAccessors, PickerSortDate, PickerSortOrder, PickerSortOrderState, PopupContentsListOrder, PresetListOrder, RichMediaListOrder, RichMediaListOrderBy, UsePickerSortOrderOptions, } from './types';

package/PickerSort/index.js

@@ -0,0 +1,5 @@
+export { PickerSortMenu } from './components/PickerSortMenu';
+export { PICKER_SORT_ORDERS, POPUP_CONTENTS_SORT_ORDERS } from './constants';
+export { sortItemsByPickerOrder, toPopupContentsListOrder, toPresetListOrder, toRichMediaListOrder } 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,72 @@
+import { type ListPresetsRequest_OrderBy, type ListPresetsRequest_OrderDirection } from '@pushwoosh/rpc-v2-http-api-data/presets';
+import { type ListRequest_OrderBy as PopupContentsListRequestOrderBy, type ListRequest_OrderDirection as PopupContentsListRequestOrderDirection } from '@pushwoosh/rpc-v2-http-api-data/pushwoosh_rpc_popup_forms_contents_v3';
+import { type ListRequest_OrderType as RichMediaListRequestOrderType } from '@pushwoosh/rpc-v2-http-api-data/rich_medias';
+/** 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;
+};
+/** `orderBy` of `richMedia.List`; local until `NAME` reaches the published rpc-v2 types. */
+export type RichMediaListOrderBy = 'CREATED_DATE' | 'UPDATED_DATE' | 'NAME';
+/** `orderBy` / `orderType` pair of `richMedia.List`. */
+export type RichMediaListOrder = {
+    readonly orderBy: RichMediaListOrderBy;
+    readonly orderType: RichMediaListRequestOrderType;
+};
+/** `orderBy` / `orderDirection` pair of `popupFormsContents.List`. */
+export type PopupContentsListOrder = {
+    readonly orderBy: PopupContentsListRequestOrderBy;
+    readonly orderDirection: PopupContentsListRequestOrderDirection;
+};
+/** Date accepted by {@link sortItemsByPickerOrder}; an unparsable or missing one counts as no date. */
+export type PickerSortDate = Date | string | number | null | undefined;
+/** Getters {@link sortItemsByPickerOrder} reads; a date order without its getter keeps the input order. */
+export type PickerSortAccessors<T> = {
+    readonly getName: (item: T) => string;
+    readonly getCreated?: (item: T) => PickerSortDate;
+    readonly getUpdated?: (item: T) => PickerSortDate;
+};
+/** 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/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.1",
+  "version": "1.11.0",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^2.11.3",
+    "@pushwoosh/dumb-components": "^2.11.4",
     "@pushwoosh/kit-constants": "^2.1.1",
     "@pushwoosh/kit-helpers": "^4.14.0",
     "@pushwoosh/kit-icons": "^2.3.10",