@dxos/react-list 0.1.13 → 0.1.16

package/dist/lib/browser/index.mjs

@@ -0,0 +1,527 @@
+// packages/apps/patterns/react-list/src/components/List/List.tsx
+import React2, { useCallback as useCallback2 } from "react";
+import { ObjectModel } from "@dxos/object-model";
+import { useSelection, useSpace } from "@dxos/react-client";
+import { Loading } from "@dxos/react-ui";
+import { useTranslation as useTranslation2 } from "@dxos/react-uikit";
+
+// packages/apps/patterns/react-list/src/model.ts
+var LIST_TYPE = "dxos:type/list";
+var LIST_ITEM_TYPE = "dxos:type/list-item";
+
+// packages/apps/patterns/react-list/src/components/ListPrimitive/ListPrimitive.tsx
+import debounce from "lodash.debounce";
+import { Minus, Plus } from "phosphor-react";
+import React, { useCallback, useMemo, useState as useState2 } from "react";
+import { defaultFocus, Input, useTranslation, getSize, Button, randomString as randomString2, defaultGroup, defaultHover, mx } from "@dxos/react-uikit";
+
+// packages/apps/patterns/react-list/src/hooks/usePropStatefully.ts
+import { useEffect, useRef, useState } from "react";
+import { randomString } from "@dxos/react-uikit";
+var isEqual = (a, b) => a === b;
+var usePropStatefully = (propsValue, equivalentPredicate) => {
+  const [value, setValue] = useState(propsValue);
+  const [valueSession, setValueSession] = useState(randomString());
+  const mounted = useRef(false);
+  const predicate = equivalentPredicate != null ? equivalentPredicate : isEqual;
+  useEffect(() => {
+    if (mounted.current && !predicate(propsValue, value)) {
+      setValue(propsValue);
+      setValueSession(randomString());
+    } else {
+      mounted.current = true;
+    }
+  }, [
+    propsValue
+  ]);
+  return [
+    value,
+    setValue,
+    valueSession
+  ];
+};
+
+// packages/apps/patterns/react-list/src/components/ListPrimitive/ListPrimitive.tsx
+function _extends() {
+  _extends = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+var isListItemChangedAction = (o) => "listItemId" in o;
+var isListItemCreatedAction = (o) => "created" in o;
+var isListItemDeletedAction = (o) => "deleted" in o;
+var defaultCreateListItemId = async () => randomString2(8);
+var ListItemPrimitive = ({ id, title: propsTitle, description: propsDescription, annotations: propsAnnotations, updateItem, deleteItem, createItem, updateOrder, orderIndex, isLast, autoFocus }) => {
+  const checkId = `${id}__checkbox`;
+  const labelId = `${id}__title`;
+  const descriptionId = `${id}__description`;
+  const { t } = useTranslation("appkit");
+  const rejectTextUpdatesWhenFocused = useCallback((a, b) => {
+    var _a;
+    return ((_a = document.activeElement) == null ? void 0 : _a.getAttribute("data-itemid")) === id ? true : a === b;
+  }, [
+    id
+  ]);
+  const [title, setTitle, titleSession] = usePropStatefully(propsTitle != null ? propsTitle : "", rejectTextUpdatesWhenFocused);
+  const [description, _setDescription, _descriptionSession] = usePropStatefully(propsDescription != null ? propsDescription : "", rejectTextUpdatesWhenFocused);
+  const [annotations, setAnnotations] = useState2(propsAnnotations != null ? propsAnnotations : {});
+  const isDone = (annotations == null ? void 0 : annotations.state) === "done";
+  const onChangeTitle = useCallback((nextValue) => {
+    setTitle(nextValue);
+    updateItem({
+      id,
+      title: nextValue
+    });
+  }, []);
+  const _onChangeDescription = useCallback((nextValue) => {
+    _setDescription(nextValue);
+    updateItem({
+      id,
+      description: nextValue
+    });
+  }, []);
+  const _onClickMoveUp = useCallback(() => {
+    updateOrder(id, -1);
+  }, [
+    updateOrder,
+    id
+  ]);
+  const _onClickMoveDown = useCallback(() => {
+    updateOrder(id, 1);
+  }, [
+    updateOrder,
+    id
+  ]);
+  const onChangeCheckbox = useCallback(() => {
+    const nextAnnotations = {
+      ...annotations,
+      state: isDone ? "init" : "done"
+    };
+    setAnnotations(nextAnnotations);
+    updateItem({
+      id,
+      annotations: nextAnnotations
+    });
+  }, [
+    annotations,
+    isDone
+  ]);
+  const onClickDelete = useCallback(() => {
+    deleteItem(id);
+  }, [
+    deleteItem,
+    id
+  ]);
+  const onKeyUp = useCallback((e) => {
+    var _a, _b, _c;
+    switch (e.key) {
+      case "Enter":
+        if (!e.shiftKey) {
+          if (isLast) {
+            createItem();
+          } else {
+            (_a = document.querySelector(`input[data-orderindex="${orderIndex + 1}"]`)) == null ? void 0 : _a.focus();
+          }
+        }
+        break;
+      case "PageDown":
+        (_b = document.querySelector(`input[data-orderindex="${orderIndex + 1}"]`)) == null ? void 0 : _b.focus();
+        break;
+      case "PageUp":
+        (_c = document.querySelector(`input[data-orderindex="${orderIndex - 1}"]`)) == null ? void 0 : _c.focus();
+        break;
+    }
+  }, [
+    orderIndex,
+    isLast
+  ]);
+  const inputSlots = useMemo(() => ({
+    root: {
+      className: "m-0"
+    },
+    input: {
+      className: "border-0 rounded",
+      autoFocus: true,
+      "data-orderindex": orderIndex,
+      "data-itemid": id,
+      onKeyUp
+    }
+  }), [
+    orderIndex,
+    id,
+    onKeyUp
+  ]);
+  return /* @__PURE__ */ React.createElement("li", _extends({
+    key: id,
+    className: "flex items-center gap-2 pli-4 mbe-2",
+    "aria-labelledby": labelId
+  }, description && {
+    "aria-describedby": descriptionId
+  }), /* @__PURE__ */ React.createElement("input", _extends({}, {
+    type: "checkbox",
+    id: checkId,
+    ...description && {
+      "aria-describedby": descriptionId
+    },
+    className: mx(getSize(5), "text-primary-600 bg-neutral-50 rounded-full border-neutral-300 dark:bg-neutral-800 dark:border-neutral-600 cursor-pointer", defaultFocus, defaultHover({})),
+    onChange: onChangeCheckbox,
+    checked: isDone
+  })), /* @__PURE__ */ React.createElement("label", {
+    htmlFor: checkId,
+    id: labelId,
+    className: "sr-only"
+  }, title), /* @__PURE__ */ React.createElement("span", {
+    id: descriptionId,
+    className: "sr-only"
+  }, description), /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "grow"
+  }, /* @__PURE__ */ React.createElement(Input, {
+    key: titleSession,
+    label: t("list item title label"),
+    placeholder: t("list item title placeholder"),
+    labelVisuallyHidden: true,
+    initialValue: title,
+    onChange: onChangeTitle,
+    slots: inputSlots
+  })), /* @__PURE__ */ React.createElement(Button, {
+    onClick: onClickDelete,
+    variant: "ghost",
+    className: "p-1 self-stretch"
+  }, /* @__PURE__ */ React.createElement(Minus, {
+    className: getSize(4)
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: "sr-only"
+  }, t("delete list item label"))));
+};
+var itemsEquivalent = (a, b) => {
+  var _a, _b;
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  for (let i = 0; i < aKeys.length; i++) {
+    const key = aKeys[i];
+    if (key !== bKeys[i] || a[key].title !== b[key].title || ((_a = a[key].annotations) == null ? void 0 : _a.state) !== ((_b = b[key].annotations) == null ? void 0 : _b.state)) {
+      return false;
+    }
+  }
+  return true;
+};
+var ListPrimitive = ({ id: listId, title: propsTitle, description: propsDescription, items: propsItems, onAction, createListItemId = defaultCreateListItemId, onChangePeriod = 0, ...divProps }) => {
+  const { t } = useTranslation("appkit");
+  const [creating, setCreating] = useState2(false);
+  const [autoFocus, setAutofocus] = useState2(null);
+  const rejectTextUpdatesWhenFocused = useCallback((a, b) => {
+    var _a;
+    return ((_a = document.activeElement) == null ? void 0 : _a.getAttribute("data-itemid")) === listId ? true : a === b;
+  }, [
+    listId
+  ]);
+  const titleId = `${listId}__title`;
+  const [title, setTitle, titleSession] = usePropStatefully(propsTitle != null ? propsTitle : "", rejectTextUpdatesWhenFocused);
+  const propagateTitle = useCallback((nextValue) => {
+    return onAction == null ? void 0 : onAction({
+      listId,
+      next: {
+        title: nextValue
+      }
+    });
+  }, [
+    onAction
+  ]);
+  const debouncedPropagateTitle = useMemo(() => debounce(propagateTitle, onChangePeriod), [
+    propagateTitle
+  ]);
+  const onChangeTitle = useCallback((nextValue) => {
+    setTitle(nextValue);
+    debouncedPropagateTitle(nextValue);
+  }, [
+    onAction,
+    listId
+  ]);
+  const descriptionId = `${listId}__description`;
+  const [description, setDescription, _descriptionSession] = usePropStatefully(propsDescription != null ? propsDescription : "", rejectTextUpdatesWhenFocused);
+  const propagateDescription = useCallback((nextValue) => onAction == null ? void 0 : onAction({
+    listId,
+    next: {
+      description: nextValue
+    }
+  }), [
+    onAction
+  ]);
+  const debouncedPropagateDescription = useMemo(() => debounce(propagateDescription, onChangePeriod), [
+    propagateDescription
+  ]);
+  const _onChangeDescription = useCallback((nextValue) => {
+    setDescription(nextValue);
+    debouncedPropagateDescription(nextValue);
+  }, [
+    onAction,
+    listId
+  ]);
+  const [items, setItems, itemsSession] = usePropStatefully(propsItems != null ? propsItems : {}, itemsEquivalent);
+  const order = Object.keys(items);
+  const propagateItem = useCallback(({ id, ...next }) => {
+    return onAction == null ? void 0 : onAction({
+      listId,
+      listItemId: id,
+      next
+    });
+  }, [
+    listId,
+    onAction
+  ]);
+  const debouncedPropagateItem = useMemo(() => debounce(propagateItem, onChangePeriod), [
+    propagateItem
+  ]);
+  const updateItem = useCallback(({ id, ...next }) => {
+    setItems(Object.assign(items, {
+      [id]: {
+        ...items[id],
+        ...next
+      }
+    }));
+    "title" in next && debouncedPropagateItem({
+      id,
+      title: next.title
+    });
+    "description" in next && debouncedPropagateItem({
+      id,
+      description: next.description
+    });
+    "annotations" in next && (onAction == null ? void 0 : onAction({
+      listId,
+      listItemId: id,
+      next: {
+        annotations: next.annotations
+      }
+    }));
+  }, [
+    items,
+    listId,
+    onAction
+  ]);
+  const updateOrder = useCallback((id, delta) => {
+    const fromIndex = order.indexOf(id);
+    const toIndex = fromIndex + delta;
+    const nextOrder = Array.from(order);
+    nextOrder.splice(fromIndex, 1);
+    nextOrder.splice(toIndex, 0, id);
+    const nextItems = nextOrder.reduce((acc, listItemId) => {
+      acc[listItemId] = items[listItemId];
+      return acc;
+    }, {});
+    setItems(nextItems);
+    onAction == null ? void 0 : onAction({
+      listId,
+      next: {}
+    });
+  }, [
+    items,
+    onAction
+  ]);
+  const deleteItem = useCallback((id) => {
+    if (items[id]) {
+      const { [id]: deletedItem, ...nextItems } = items;
+      setItems(nextItems);
+      onAction == null ? void 0 : onAction({
+        listId,
+        next: {},
+        deleted: {
+          id,
+          ...deletedItem
+        }
+      });
+    }
+  }, [
+    items,
+    onAction
+  ]);
+  const createItem = useCallback(() => {
+    setCreating(true);
+    return createListItemId().then((id) => {
+      const next = {
+        items: {
+          ...items,
+          [id]: {}
+        }
+      };
+      const created = {
+        id
+      };
+      setItems(next.items);
+      setAutofocus(id);
+      onAction == null ? void 0 : onAction({
+        listId,
+        next: {},
+        created
+      });
+    }).finally(() => setCreating(false));
+  }, [
+    items,
+    createListItemId,
+    onAction
+  ]);
+  const inputSlots = useMemo(() => ({
+    root: {
+      className: "mli-2 mbs-0 mbe-2"
+    },
+    input: {
+      className: "border-0 rounded text-xl font-display font-semibold",
+      "data-itemid": listId
+    }
+  }), [
+    listId
+  ]);
+  return /* @__PURE__ */ React.createElement("div", _extends({
+    role: "group"
+  }, divProps, {
+    className: mx(defaultGroup({
+      elevation: 3,
+      spacing: "pbs-2 pbe-1"
+    }), divProps.className),
+    "aria-labelledby": titleId
+  }, description && {
+    "aria-describedby": descriptionId
+  }), /* @__PURE__ */ React.createElement("span", {
+    id: titleId,
+    className: "sr-only"
+  }, title), description && /* @__PURE__ */ React.createElement("span", {
+    id: descriptionId,
+    className: "sr-only"
+  }, description), /* @__PURE__ */ React.createElement(Input, {
+    key: titleSession,
+    label: t("list title label"),
+    placeholder: t("list title placeholder"),
+    labelVisuallyHidden: true,
+    initialValue: title,
+    onChange: onChangeTitle,
+    slots: inputSlots
+  }), /* @__PURE__ */ React.createElement("ol", {
+    className: "contents"
+  }, order.map((listItemId, index) => {
+    return /* @__PURE__ */ React.createElement(ListItemPrimitive, _extends({
+      key: `${itemsSession}__${listItemId}`,
+      orderIndex: index,
+      isLast: index === order.length - 1
+    }, {
+      id: listItemId,
+      updateItem,
+      updateOrder,
+      deleteItem,
+      createItem
+    }, items[listItemId], {
+      autoFocus: listItemId === autoFocus
+    }));
+  })), /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "mli-4 mlb-4"
+  }, /* @__PURE__ */ React.createElement(Button, {
+    className: "is-full",
+    onClick: createItem,
+    disabled: creating
+  }, /* @__PURE__ */ React.createElement(Plus, {
+    className: getSize(5)
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: "sr-only"
+  }, t("add list item label")))));
+};
+
+// packages/apps/patterns/react-list/src/components/List/List.tsx
+function _extends2() {
+  _extends2 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends2.apply(this, arguments);
+}
+var ListLoaded = ({ space, list, listItems: propsListItems }) => {
+  var _a, _b, _c;
+  const listItems = (_a = useSelection(list == null ? void 0 : list.select().children().filter({
+    type: LIST_ITEM_TYPE
+  }))) != null ? _a : propsListItems;
+  const onAction = useCallback2(async (action) => {
+    if (isListItemDeletedAction(action)) {
+      const subject = space.database.getItem(action.deleted.id);
+      return subject == null ? void 0 : subject.model.set("annotations.deleted", true);
+    } else if (isListItemCreatedAction(action)) {
+    } else if (isListItemChangedAction(action)) {
+      const subject1 = space.database.getItem(action.listItemId);
+      return Promise.all(Object.keys(action.next).map((prop) => {
+        return subject1 == null ? void 0 : subject1.model.set(prop, action.next[prop]);
+      }));
+    } else {
+      return Promise.all(Object.keys(action.next).map((prop) => {
+        return list == null ? void 0 : list.model.set(prop, action.next[prop]);
+      }));
+    }
+  }, [
+    list,
+    listItems
+  ]);
+  const createListItemId = useCallback2(async () => {
+    const listItem = await (space == null ? void 0 : space.database.createItem({
+      model: ObjectModel,
+      type: LIST_ITEM_TYPE,
+      parent: list.id
+    }));
+    return listItem.id;
+  }, [
+    space
+  ]);
+  return /* @__PURE__ */ React2.createElement(ListPrimitive, _extends2({}, {
+    id: list.id,
+    title: (_b = list.model.get("title")) != null ? _b : "",
+    description: (_c = list.model.get("description")) != null ? _c : "",
+    items: (listItems != null ? listItems : []).filter((item) => !item.model.get("annotations.deleted")).reduce((acc, item) => {
+      acc[item.id] = {
+        title: item.model.get("title"),
+        description: item.model.get("description"),
+        annotations: item.model.get("annotations")
+      };
+      return acc;
+    }, {}),
+    onChangePeriod: 640,
+    onAction,
+    createListItemId
+  }));
+};
+var List = ({ spaceKey, itemId }) => {
+  var _a;
+  const { t } = useTranslation2("uikit");
+  const space = useSpace(spaceKey);
+  const list = ((_a = useSelection(space == null ? void 0 : space.database.select({
+    id: itemId
+  }))) != null ? _a : [])[0];
+  const listItems = useSelection(list == null ? void 0 : list.select().children().filter({
+    type: LIST_ITEM_TYPE
+  }));
+  return space && list && listItems ? /* @__PURE__ */ React2.createElement(ListLoaded, _extends2({}, {
+    space,
+    list,
+    listItems
+  })) : /* @__PURE__ */ React2.createElement(Loading, {
+    label: t("generic loading label")
+  });
+};
+export {
+  LIST_ITEM_TYPE,
+  LIST_TYPE,
+  List
+};
+//# sourceMappingURL=index.mjs.map

package/dist/lib/browser/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/List/home/runner/work/dxos/dxos/packages/apps/patterns/react-list/src/components/List/List.tsx", "../../../src/home/runner/work/dxos/dxos/packages/apps/patterns/react-list/src/model.ts", "../../../src/components/ListPrimitive/home/runner/work/dxos/dxos/packages/apps/patterns/react-list/src/components/ListPrimitive/ListPrimitive.tsx", "../../../src/hooks/home/runner/work/dxos/dxos/packages/apps/patterns/react-list/src/hooks/usePropStatefully.ts"],
+  "sourcesContent": ["//\n// Copyright 2022 DXOS.org\n//\n\nimport React, { useCallback } from 'react';\n\nimport { Item, PublicKey, Space } from '@dxos/client';\nimport { ObjectModel } from '@dxos/object-model';\nimport { useSelection, useSpace } from '@dxos/react-client';\nimport { Loading } from '@dxos/react-ui';\nimport { useTranslation } from '@dxos/react-uikit';\n\nimport { LIST_ITEM_TYPE } from '../../model';\nimport {\n  ListPrimitive,\n  ListAction,\n  ListItems,\n  isListItemChangedAction,\n  isListItemDeletedAction,\n  isListItemCreatedAction,\n  ListItemProps,\n  ListPrimitiveProps\n} from '../ListPrimitive';\n\ninterface ListLoadedProps {\n  space: Space;\n  list: Item<ObjectModel>;\n  listItems: Item<ObjectModel>[];\n}\n\nexport interface ListProps {\n  spaceKey: PublicKey;\n  itemId: Item<ObjectModel>['id'];\n}\n\nconst ListLoaded = ({ space, list, listItems: propsListItems }: ListLoadedProps) => {\n  const listItems = useSelection(list?.select().children().filter({ type: LIST_ITEM_TYPE })) ?? propsListItems;\n\n  const onAction = useCallback(\n    async (action: ListAction) => {\n      if (isListItemDeletedAction(action)) {\n        const subject = space.database.getItem(action.deleted.id);\n        // TODO(thure): use Echo’s native deletion\n        return subject?.model.set('annotations.deleted', true);\n      } else if (isListItemCreatedAction(action)) {\n        // do nothing?\n      } else if (isListItemChangedAction(action)) {\n        const subject = space.database.getItem(action.listItemId);\n        return Promise.all(\n          (Object.keys(action.next) as (keyof ListItemProps)[]).map((prop) => {\n            return subject?.model.set(prop, action.next[prop]);\n          })\n        );\n      } else {\n        return Promise.all(\n          (Object.keys(action.next) as (keyof ListPrimitiveProps)[]).map((prop) => {\n            return list?.model.set(prop, action.next[prop]);\n          })\n        );\n      }\n    },\n    [list, listItems]\n  );\n\n  const createListItemId = useCallback(async () => {\n    const listItem = await space?.database.createItem({\n      model: ObjectModel,\n      type: LIST_ITEM_TYPE,\n      parent: list.id\n    });\n    return listItem.id;\n  }, [space]);\n\n  return (\n    <ListPrimitive\n      {...{\n        id: list.id,\n        title: list.model.get('title') ?? '',\n        description: list.model.get('description') ?? '',\n        items: (listItems ?? [])\n          // TODO(thure): use Echo’s native deletion\n          .filter((item) => !item.model.get('annotations.deleted'))\n          .reduce((acc: ListItems, item) => {\n            acc[item.id] = {\n              title: item.model.get('title'),\n              description: item.model.get('description'),\n              annotations: item.model.get('annotations')\n            };\n            return acc;\n          }, {}),\n        onChangePeriod: 640,\n        onAction,\n        createListItemId\n      }}\n    />\n  );\n};\n\nexport const List = ({ spaceKey, itemId }: ListProps) => {\n  const { t } = useTranslation('uikit');\n\n  const space = useSpace(spaceKey);\n  const list = (useSelection(space?.database.select({ id: itemId })) ?? [])[0];\n  const listItems = useSelection(list?.select().children().filter({ type: LIST_ITEM_TYPE }));\n\n  // TODO(thure): this should become `Suspense` when the above hooks support it\n  return space && list && listItems ? (\n    <ListLoaded {...{ space, list, listItems }} />\n  ) : (\n    <Loading label={t('generic loading label')} />\n  );\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nexport const LIST_TYPE = 'dxos:type/list';\nexport const LIST_ITEM_TYPE = 'dxos:type/list-item';\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport debounce from 'lodash.debounce';\nimport { Minus, Plus } from 'phosphor-react';\nimport React, { ComponentProps, useCallback, useMemo, useState, KeyboardEvent } from 'react';\n\nimport {\n  defaultFocus,\n  Input,\n  useTranslation,\n  getSize,\n  Button,\n  randomString,\n  defaultGroup,\n  defaultHover,\n  mx\n} from '@dxos/react-uikit';\n\nimport { usePropStatefully } from '../../hooks';\n\ntype ListId = string;\ntype ListItemId = string;\n\nexport interface ListItemProps {\n  id: ListItemId;\n  title?: string;\n  description?: string;\n  annotations?: Record<string, string | boolean>;\n}\n\nexport type ListItems = Record<ListItemId, Omit<ListItemProps, 'id'>>;\n\ninterface SharedListActionProps {\n  listId: ListId;\n}\n\ninterface SharedListItemActionProps extends SharedListActionProps {\n  listItemId: ListItemId;\n}\n\nexport interface ListItemChangedAction extends SharedListItemActionProps {\n  next: Partial<ListItemProps>;\n}\n\nexport interface ListChangedAction extends SharedListActionProps {\n  next: Partial<ListPrimitiveProps>;\n}\n\nexport interface ListItemCreatedAction extends SharedListActionProps {\n  created: Pick<ListItemProps, 'id'> & Partial<Omit<ListItemProps, 'id'>>;\n}\n\nexport interface ListItemDeletedAction extends SharedListActionProps {\n  deleted: Pick<ListItemProps, 'id'> & Partial<Omit<ListItemProps, 'id'>>;\n}\n\nexport type ListAction = ListItemChangedAction | ListChangedAction | ListItemCreatedAction | ListItemDeletedAction;\n\nexport const isListItemChangedAction = (o: any): o is ListItemChangedAction => 'listItemId' in o;\nexport const isListItemCreatedAction = (o: any): o is ListItemCreatedAction => 'created' in o;\nexport const isListItemDeletedAction = (o: any): o is ListItemDeletedAction => 'deleted' in o;\n\nexport interface ListPrimitiveProps {\n  id: ListId;\n  title?: string;\n  description?: string;\n}\n\nexport interface ListPrimitiveComponentProps extends ListPrimitiveProps, Omit<ComponentProps<'div'>, 'id'> {\n  items: ListItems;\n  onAction?: (action: ListAction) => void;\n  createListItemId?: () => Promise<ListItemId>;\n  onChangePeriod?: number;\n}\n\nexport interface ListItemPrimitiveComponentProps extends ListItemProps, Omit<ComponentProps<'li'>, 'id' | 'title'> {\n  updateItem: (item: ListItemProps) => void;\n  updateOrder: (id: ListItemId, delta: number) => void;\n  deleteItem: (id: ListItemId) => void;\n  createItem: () => void;\n  orderIndex: number;\n  isLast?: boolean;\n  autoFocus?: boolean;\n}\n\nconst defaultCreateListItemId = async () => randomString(8);\n\nconst ListItemPrimitive = ({\n  id,\n  title: propsTitle,\n  description: propsDescription,\n  annotations: propsAnnotations,\n  updateItem,\n  deleteItem,\n  createItem,\n  updateOrder,\n  orderIndex,\n  isLast,\n  autoFocus\n}: ListItemPrimitiveComponentProps) => {\n  const checkId = `${id}__checkbox`;\n  const labelId = `${id}__title`;\n  const descriptionId = `${id}__description`;\n\n  const { t } = useTranslation('appkit');\n\n  const rejectTextUpdatesWhenFocused = useCallback(\n    (a: string, b: string) => {\n      return document.activeElement?.getAttribute('data-itemid') === id ? true : a === b;\n    },\n    [id]\n  );\n\n  const [title, setTitle, titleSession] = usePropStatefully<string>(propsTitle ?? '', rejectTextUpdatesWhenFocused);\n\n  const [description, _setDescription, _descriptionSession] = usePropStatefully<string>(\n    propsDescription ?? '',\n    rejectTextUpdatesWhenFocused\n  );\n\n  const [annotations, setAnnotations] = useState(propsAnnotations ?? {});\n  const isDone = annotations?.state === 'done';\n\n  const onChangeTitle = useCallback((nextValue: string) => {\n    setTitle(nextValue);\n    updateItem({ id, title: nextValue });\n  }, []);\n\n  const _onChangeDescription = useCallback((nextValue: string) => {\n    _setDescription(nextValue);\n    updateItem({ id, description: nextValue });\n  }, []);\n\n  const _onClickMoveUp = useCallback(() => {\n    updateOrder(id, -1);\n  }, [updateOrder, id]);\n  const _onClickMoveDown = useCallback(() => {\n    updateOrder(id, 1);\n  }, [updateOrder, id]);\n\n  const onChangeCheckbox = useCallback(() => {\n    const nextAnnotations = { ...annotations, state: isDone ? 'init' : 'done' };\n    setAnnotations(nextAnnotations);\n    updateItem({ id, annotations: nextAnnotations });\n  }, [annotations, isDone]);\n\n  const onClickDelete = useCallback(() => {\n    deleteItem(id);\n  }, [deleteItem, id]);\n\n  const onKeyUp = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      switch (e.key) {\n        case 'Enter':\n          if (!e.shiftKey) {\n            if (isLast) {\n              createItem();\n            } else {\n              (\n                document.querySelector(`input[data-orderindex=\"${orderIndex + 1}\"]`) as HTMLElement | undefined\n              )?.focus();\n            }\n          }\n          break;\n        case 'PageDown':\n          (document.querySelector(`input[data-orderindex=\"${orderIndex + 1}\"]`) as HTMLElement | undefined)?.focus();\n          break;\n        case 'PageUp':\n          (document.querySelector(`input[data-orderindex=\"${orderIndex - 1}\"]`) as HTMLElement | undefined)?.focus();\n          break;\n      }\n    },\n    [orderIndex, isLast]\n  );\n\n  const inputSlots = useMemo(\n    () => ({\n      root: { className: 'm-0' },\n      input: {\n        className: 'border-0 rounded',\n        autoFocus: true,\n        'data-orderindex': orderIndex,\n        'data-itemid': id,\n        onKeyUp\n      }\n    }),\n    [orderIndex, id, onKeyUp]\n  );\n\n  return (\n    <li\n      key={id}\n      className='flex items-center gap-2 pli-4 mbe-2'\n      aria-labelledby={labelId}\n      {...(description && { 'aria-describedby': descriptionId })}\n    >\n      <input\n        {...{\n          type: 'checkbox',\n          id: checkId,\n          ...(description && {\n            'aria-describedby': descriptionId\n          }),\n          className: mx(\n            getSize(5),\n            'text-primary-600 bg-neutral-50 rounded-full border-neutral-300 dark:bg-neutral-800 dark:border-neutral-600 cursor-pointer',\n            defaultFocus,\n            defaultHover({})\n          ),\n          onChange: onChangeCheckbox,\n          checked: isDone\n        }}\n      />\n      <label htmlFor={checkId} id={labelId} className='sr-only'>\n        {title}\n      </label>\n      <span id={descriptionId} className='sr-only'>\n        {description}\n      </span>\n      <div role='none' className='grow'>\n        <Input\n          key={titleSession}\n          label={t('list item title label')}\n          placeholder={t('list item title placeholder')}\n          labelVisuallyHidden\n          initialValue={title}\n          onChange={onChangeTitle}\n          slots={inputSlots}\n        />\n        {/* TODO(thure): Re-enable this when descriptions become relevant */}\n        {/* <Input */}\n        {/*  key={descriptionSession} */}\n        {/*  label={t('list item description label')} */}\n        {/*  placeholder={t('list item description placeholder')} */}\n        {/*  labelVisuallyHidden */}\n        {/*  initialValue={description} */}\n        {/*  onChange={onChangeDescription} */}\n        {/*  data-itemid={id} */}\n        {/* /> */}\n      </div>\n      {/* TODO(thure): Restore these, or implement drag & drop, when how best to change order in Echo is clarified. */}\n      {/* <ButtonGroup className='flex flex-col items-stretch'> */}\n      {/*  <Button compact rounding='rounded-bs-md border-be-0' disabled={isFirst} onClick={onClickMoveUp}> */}\n      {/*    <CaretUp /> */}\n      {/*    <span className='sr-only'>{t('move list item up label')}</span> */}\n      {/*  </Button> */}\n      {/*  <Button compact rounding='rounded-be-md' disabled={isLast} onClick={onClickMoveDown}> */}\n      {/*    <CaretDown /> */}\n      {/*    <span className='sr-only'>{t('move list item down label')}</span> */}\n      {/*  </Button> */}\n      {/* </ButtonGroup> */}\n      <Button onClick={onClickDelete} variant='ghost' className='p-1 self-stretch'>\n        <Minus className={getSize(4)} />\n        <span className='sr-only'>{t('delete list item label')}</span>\n      </Button>\n    </li>\n  );\n};\n\nconst itemsEquivalent = (a: ListItems, b: ListItems) => {\n  const aKeys = Object.keys(a);\n  const bKeys = Object.keys(b);\n  for (let i = 0; i < aKeys.length; i++) {\n    const key = aKeys[i];\n    if (key !== bKeys[i] || a[key].title !== b[key].title || a[key].annotations?.state !== b[key].annotations?.state) {\n      return false;\n    }\n  }\n  return true;\n};\n\nexport const ListPrimitive = ({\n  id: listId,\n  title: propsTitle,\n  description: propsDescription,\n  items: propsItems,\n  onAction,\n  createListItemId = defaultCreateListItemId,\n  onChangePeriod = 0,\n  ...divProps\n}: ListPrimitiveComponentProps) => {\n  const { t } = useTranslation('appkit');\n\n  const [creating, setCreating] = useState(false);\n  const [autoFocus, setAutofocus] = useState<string | null>(null);\n\n  const rejectTextUpdatesWhenFocused = useCallback(\n    (a: string, b: string) => {\n      return document.activeElement?.getAttribute('data-itemid') === listId ? true : a === b;\n    },\n    [listId]\n  );\n\n  // Title\n\n  const titleId = `${listId}__title`;\n  const [title, setTitle, titleSession] = usePropStatefully(propsTitle ?? '', rejectTextUpdatesWhenFocused);\n  const propagateTitle = useCallback(\n    (nextValue: string) => {\n      return onAction?.({ listId, next: { title: nextValue } });\n    },\n    [onAction]\n  );\n  const debouncedPropagateTitle = useMemo(() => debounce(propagateTitle, onChangePeriod), [propagateTitle]);\n  const onChangeTitle = useCallback(\n    (nextValue: string) => {\n      setTitle(nextValue);\n      debouncedPropagateTitle(nextValue);\n    },\n    [onAction, listId]\n  );\n\n  // Description\n\n  const descriptionId = `${listId}__description`;\n  const [description, setDescription, _descriptionSession] = usePropStatefully(\n    propsDescription ?? '',\n    rejectTextUpdatesWhenFocused\n  );\n  const propagateDescription = useCallback(\n    (nextValue: string) => onAction?.({ listId, next: { description: nextValue } }),\n    [onAction]\n  );\n  const debouncedPropagateDescription = useMemo(\n    () => debounce(propagateDescription, onChangePeriod),\n    [propagateDescription]\n  );\n  const _onChangeDescription = useCallback(\n    (nextValue: string) => {\n      setDescription(nextValue);\n      debouncedPropagateDescription(nextValue);\n    },\n    [onAction, listId]\n  );\n\n  // Items & order\n\n  const [items, setItems, itemsSession] = usePropStatefully(propsItems ?? {}, itemsEquivalent);\n  const order = Object.keys(items);\n\n  const propagateItem = useCallback(\n    ({ id, ...next }: Pick<ListItemProps, 'id'> & Partial<Omit<ListItemProps, 'id'>>) => {\n      return onAction?.({ listId, listItemId: id, next });\n    },\n    [listId, onAction]\n  );\n  const debouncedPropagateItem = useMemo(() => debounce(propagateItem, onChangePeriod), [propagateItem]);\n  const updateItem = useCallback(\n    ({ id, ...next }: Pick<ListItemProps, 'id'> & Partial<Omit<ListItemProps, 'id'>>) => {\n      setItems(Object.assign(items, { [id]: { ...items[id], ...next } }));\n      'title' in next && debouncedPropagateItem({ id, title: next.title });\n      'description' in next && debouncedPropagateItem({ id, description: next.description });\n      'annotations' in next && onAction?.({ listId, listItemId: id, next: { annotations: next.annotations } });\n    },\n    [items, listId, onAction]\n  );\n\n  const updateOrder = useCallback(\n    (id: ListItemId, delta: number) => {\n      const fromIndex = order.indexOf(id);\n      const toIndex = fromIndex + delta;\n      const nextOrder = Array.from(order);\n      nextOrder.splice(fromIndex, 1);\n      nextOrder.splice(toIndex, 0, id);\n      const nextItems = nextOrder.reduce((acc: ListItems, listItemId) => {\n        acc[listItemId] = items[listItemId];\n        return acc;\n      }, {});\n      setItems(nextItems);\n      onAction?.({ listId, next: {} });\n    },\n    [items, onAction]\n  );\n\n  const deleteItem = useCallback(\n    (id: ListItemId) => {\n      if (items[id]) {\n        const { [id]: deletedItem, ...nextItems } = items;\n        setItems(nextItems);\n        onAction?.({ listId, next: {}, deleted: { id, ...deletedItem } });\n      }\n    },\n    [items, onAction]\n  );\n\n  const createItem = useCallback(() => {\n    setCreating(true);\n    return createListItemId()\n      .then((id) => {\n        const next = {\n          items: { ...items, [id]: {} }\n        };\n        const created = { id };\n        setItems(next.items);\n        setAutofocus(id);\n        onAction?.({ listId, next: {}, created });\n      })\n      .finally(() => setCreating(false));\n  }, [items, createListItemId, onAction]);\n\n  // Render\n\n  const inputSlots = useMemo(\n    () => ({\n      root: { className: 'mli-2 mbs-0 mbe-2' },\n      input: {\n        className: 'border-0 rounded text-xl font-display font-semibold',\n        'data-itemid': listId\n      }\n    }),\n    [listId]\n  );\n\n  return (\n    <div\n      role='group'\n      {...divProps}\n      className={mx(defaultGroup({ elevation: 3, spacing: 'pbs-2 pbe-1' }), divProps.className)}\n      aria-labelledby={titleId}\n      {...(description && { 'aria-describedby': descriptionId })}\n    >\n      <span id={titleId} className='sr-only'>\n        {title}\n      </span>\n      {description && (\n        <span id={descriptionId} className='sr-only'>\n          {description}\n        </span>\n      )}\n      <Input\n        key={titleSession}\n        label={t('list title label')}\n        placeholder={t('list title placeholder')}\n        labelVisuallyHidden\n        initialValue={title}\n        onChange={onChangeTitle}\n        slots={inputSlots}\n      />\n      {/* TODO(thure): Re-enable this when relevant */}\n      {/* <Input */}\n      {/*  key={descriptionSession} */}\n      {/*  label={t('list description label')} */}\n      {/*  placeholder={t('list description placeholder')} */}\n      {/*  labelVisuallyHidden */}\n      {/*  initialValue={description} */}\n      {/*  onChange={onChangeDescription} */}\n      {/*  className='mli-4' */}\n      {/*  data-itemid={listId} */}\n      {/* /> */}\n      <ol className='contents'>\n        {order.map((listItemId, index) => {\n          return (\n            <ListItemPrimitive\n              key={`${itemsSession}__${listItemId}`}\n              orderIndex={index}\n              isLast={index === order.length - 1}\n              {...{ id: listItemId, updateItem, updateOrder, deleteItem, createItem }}\n              {...items[listItemId]}\n              autoFocus={listItemId === autoFocus}\n            />\n          );\n        })}\n      </ol>\n      <div role='none' className='mli-4 mlb-4'>\n        <Button className='is-full' onClick={createItem} disabled={creating}>\n          <Plus className={getSize(5)} />\n          <span className='sr-only'>{t('add list item label')}</span>\n        </Button>\n      </div>\n    </div>\n  );\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport { useEffect, useRef, useState, Dispatch, SetStateAction } from 'react';\n\nimport { randomString } from '@dxos/react-uikit';\n\nconst isEqual = <T>(a: T, b: T) => a === b;\n\n/**\n * @deprecated\n */\nexport const usePropStatefully = <T>(\n  propsValue: T,\n  equivalentPredicate?: (a: T, b: T) => boolean\n): [T, Dispatch<SetStateAction<T>>, string] => {\n  const [value, setValue] = useState<T>(propsValue);\n  const [valueSession, setValueSession] = useState(randomString());\n  const mounted = useRef(false);\n  const predicate = equivalentPredicate ?? isEqual<T>;\n\n  useEffect(() => {\n    if (mounted.current && !predicate(propsValue, value)) {\n      setValue(propsValue);\n      setValueSession(randomString());\n    } else {\n      mounted.current = true;\n    }\n  }, [propsValue]);\n\n  return [value, setValue, valueSession];\n};\n"],
+  "mappings": "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",
+  "names": ["React", "useCallback", "ObjectModel", "useSelection", "useSpace", "Loading", "useTranslation", "LIST_TYPE", "LIST_ITEM_TYPE", "debounce", "Minus", "Plus", "React", "useCallback", "useMemo", "useState", "defaultFocus", "Input", "useTranslation", "getSize", "Button", "randomString", "defaultGroup", "defaultHover", "mx", "useEffect", "useRef", "useState", "randomString", "isEqual", "a", "b", "usePropStatefully", "propsValue", "equivalentPredicate", "value", "setValue", "valueSession", "setValueSession", "mounted", "predicate", "current", "isListItemChangedAction", "o", "isListItemCreatedAction", "isListItemDeletedAction", "defaultCreateListItemId", "randomString", "ListItemPrimitive", "id", "title", "propsTitle", "description", "propsDescription", "annotations", "propsAnnotations", "updateItem", "deleteItem", "createItem", "updateOrder", "orderIndex", "isLast", "autoFocus", "checkId", "labelId", "descriptionId", "t", "useTranslation", "rejectTextUpdatesWhenFocused", "useCallback", "a", "b", "document", "activeElement", "getAttribute", "setTitle", "titleSession", "usePropStatefully", "_setDescription", "_descriptionSession", "setAnnotations", "useState", "isDone", "state", "onChangeTitle", "nextValue", "_onChangeDescription", "_onClickMoveUp", "_onClickMoveDown", "onChangeCheckbox", "nextAnnotations", "onClickDelete", "onKeyUp", "e", "key", "shiftKey", "querySelector", "focus", "inputSlots", "useMemo", "root", "className", "input", "li", "aria-labelledby", "type", "mx", "getSize", "defaultFocus", "defaultHover", "onChange", "checked", "label", "htmlFor", "span", "div", "role", "Input", "placeholder", "labelVisuallyHidden", "initialValue", "slots", "Button", "onClick", "variant", "Minus", "itemsEquivalent", "aKeys", "Object", "keys", "bKeys", "i", "length", "ListPrimitive", "listId", "items", "propsItems", "onAction", "createListItemId", "onChangePeriod", "divProps", "creating", "setCreating", "setAutofocus", "titleId", "propagateTitle", "next", "debouncedPropagateTitle", "debounce", "setDescription", "propagateDescription", "debouncedPropagateDescription", "setItems", "itemsSession", "order", "propagateItem", "listItemId", "debouncedPropagateItem", "assign", "delta", "fromIndex", "indexOf", "toIndex", "nextOrder", "Array", "from", "splice", "nextItems", "reduce", "acc", "deletedItem", "deleted", "then", "created", "finally", "defaultGroup", "elevation", "spacing", "ol", "map", "index", "disabled", "Plus", "_extends", "ListLoaded", "space", "list", "listItems", "propsListItems", "useSelection", "select", "children", "filter", "type", "LIST_ITEM_TYPE", "onAction", "useCallback", "action", "isListItemDeletedAction", "subject", "database", "getItem", "deleted", "id", "model", "set", "isListItemCreatedAction", "isListItemChangedAction", "listItemId", "Promise", "all", "Object", "keys", "next", "map", "prop", "createListItemId", "listItem", "createItem", "ObjectModel", "parent", "React", "ListPrimitive", "title", "get", "description", "items", "item", "reduce", "acc", "annotations", "onChangePeriod", "List", "spaceKey", "itemId", "t", "useTranslation", "useSpace", "Loading", "label"]
+}

package/dist/lib/browser/meta.json

@@ -0,0 +1 @@
+{"inputs":{"packages/apps/patterns/react-list/src/model.ts":{"bytes":720,"imports":[]},"packages/apps/patterns/react-list/src/hooks/usePropStatefully.ts":{"bytes":3279,"imports":[]},"packages/apps/patterns/react-list/src/hooks/index.ts":{"bytes":497,"imports":[{"path":"packages/apps/patterns/react-list/src/hooks/usePropStatefully.ts","kind":"import-statement"}]},"packages/apps/patterns/react-list/src/components/ListPrimitive/ListPrimitive.tsx":{"bytes":46433,"imports":[{"path":"packages/apps/patterns/react-list/src/hooks/index.ts","kind":"import-statement"}]},"packages/apps/patterns/react-list/src/components/ListPrimitive/index.ts":{"bytes":513,"imports":[{"path":"packages/apps/patterns/react-list/src/components/ListPrimitive/ListPrimitive.tsx","kind":"import-statement"}]},"packages/apps/patterns/react-list/src/components/List/List.tsx":{"bytes":12472,"imports":[{"path":"packages/apps/patterns/react-list/src/model.ts","kind":"import-statement"},{"path":"packages/apps/patterns/react-list/src/components/ListPrimitive/index.ts","kind":"import-statement"}]},"packages/apps/patterns/react-list/src/components/List/index.ts":{"bytes":476,"imports":[{"path":"packages/apps/patterns/react-list/src/components/List/List.tsx","kind":"import-statement"}]},"packages/apps/patterns/react-list/src/components/index.ts":{"bytes":468,"imports":[{"path":"packages/apps/patterns/react-list/src/components/List/index.ts","kind":"import-statement"}]},"packages/apps/patterns/react-list/src/index.ts":{"bytes":551,"imports":[{"path":"packages/apps/patterns/react-list/src/components/index.ts","kind":"import-statement"},{"path":"packages/apps/patterns/react-list/src/model.ts","kind":"import-statement"}]}},"outputs":{"packages/apps/patterns/react-list/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":33492},"packages/apps/patterns/react-list/dist/lib/browser/index.mjs":{"imports":[],"exports":["LIST_ITEM_TYPE","LIST_TYPE","List"],"entryPoint":"packages/apps/patterns/react-list/src/index.ts","inputs":{"packages/apps/patterns/react-list/src/components/List/List.tsx":{"bytesInOutput":3223},"packages/apps/patterns/react-list/src/model.ts":{"bytesInOutput":78},"packages/apps/patterns/react-list/src/components/ListPrimitive/ListPrimitive.tsx":{"bytesInOutput":12102},"packages/apps/patterns/react-list/src/hooks/usePropStatefully.ts":{"bytesInOutput":716},"packages/apps/patterns/react-list/src/hooks/index.ts":{"bytesInOutput":0},"packages/apps/patterns/react-list/src/components/ListPrimitive/index.ts":{"bytesInOutput":0},"packages/apps/patterns/react-list/src/components/List/index.ts":{"bytesInOutput":0},"packages/apps/patterns/react-list/src/components/index.ts":{"bytesInOutput":0},"packages/apps/patterns/react-list/src/index.ts":{"bytesInOutput":0}},"bytes":16627}}}

package/dist/types/src/components/List/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/List.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAS,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAuBjD,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC;CACjC;AAiED,eAAO,MAAM,IAAI,yBAA0B,SAAS,gBAanD,CAAC"}

package/dist/types/src/components/List/List.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/List.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAIpB,OAAO,EAAsB,SAAS,EAAE,MAAM,cAAc,CAAC;AAU7D,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAC;;;;;;AAKzC,wBAIE;AAsBF,eAAO,MAAM,OAAO;;;EAAqC,CAAC"}

package/dist/types/src/components/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC"}

package/dist/{src → types/src}/components/ListPrimitive/ListPrimitive.d.ts

@@ -1,13 +1,13 @@
 import { ComponentProps } from 'react';
-type ListId = string;
-type ListItemId = string;
+declare type ListId = string;
+declare type ListItemId = string;
 export interface ListItemProps {
     id: ListItemId;
     title?: string;
     description?: string;
     annotations?: Record<string, string | boolean>;
 }
-export type ListItems = Record<ListItemId, Omit<ListItemProps, 'id'>>;
+export declare type ListItems = Record<ListItemId, Omit<ListItemProps, 'id'>>;
 interface SharedListActionProps {
     listId: ListId;
 }
@@ -26,7 +26,7 @@ export interface ListItemCreatedAction extends SharedListActionProps {
 export interface ListItemDeletedAction extends SharedListActionProps {
     deleted: Pick<ListItemProps, 'id'> & Partial<Omit<ListItemProps, 'id'>>;
 }
-export type ListAction = ListItemChangedAction | ListChangedAction | ListItemCreatedAction | ListItemDeletedAction;
+export declare type ListAction = ListItemChangedAction | ListChangedAction | ListItemCreatedAction | ListItemDeletedAction;
 export declare const isListItemChangedAction: (o: any) => o is ListItemChangedAction;
 export declare const isListItemCreatedAction: (o: any) => o is ListItemCreatedAction;
 export declare const isListItemDeletedAction: (o: any) => o is ListItemDeletedAction;