@comet/cms-admin 9.0.0-beta.3 → 9.0.0-beta.4

package/lib/contentScope/__stories__/ContentScopeSelect.stories.js

@@ -0,0 +1,655 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { AppHeader, AppHeaderMenuButton, CometLogo, FillSpace } from "@comet/admin";
+import { Domain, Language } from "@comet/admin-icons";
+import { ListItemIcon, ListItemText } from "@mui/material";
+import { useState } from "react";
+import { findTextMatches, MarkedMatches } from "../../common/MarkedMatches";
+import { ContentScopeSelect } from "../ContentScopeSelect";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var config = {
+  component: ContentScopeSelect,
+  title: "contentScope/ContentScopeSelect",
+  decorators: [function (Story) {
+    return /*#__PURE__*/_jsxs(AppHeader, {
+      position: "relative",
+      headerHeight: 60,
+      children: [/*#__PURE__*/_jsx(AppHeaderMenuButton, {}), /*#__PURE__*/_jsx(CometLogo, {}), /*#__PURE__*/_jsx(FillSpace, {}), /*#__PURE__*/_jsx(Story, {})]
+    });
+  }]
+};
+export default config;
+export var Basic = {
+  render: function render() {
+    var _useState = useState({
+        domain: "main"
+      }),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          domain: "main"
+        },
+        label: {
+          domain: "Main"
+        }
+      }, {
+        scope: {
+          domain: "secondary"
+        },
+        label: {
+          domain: "Secondary"
+        }
+      }, {
+        scope: {
+          domain: "tertiary"
+        },
+        label: {
+          domain: "Tertiary"
+        }
+      }]
+    });
+  }
+};
+export var MultipleDimensions = {
+  render: function render() {
+    var _useState3 = useState({
+        domain: "main",
+        language: "en"
+      }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      value = _useState4[0],
+      setValue = _useState4[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          domain: "main",
+          language: "en"
+        },
+        label: {
+          domain: "Main",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "main",
+          language: "de"
+        },
+        label: {
+          domain: "Main",
+          language: "German"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "en"
+        },
+        label: {
+          domain: "Secondary",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "de"
+        },
+        label: {
+          domain: "Secondary",
+          language: "German"
+        }
+      }]
+    });
+  },
+  name: "Multiple dimensions"
+};
+export var Searchable = {
+  render: function render() {
+    var _useState5 = useState({
+        domain: "main",
+        language: "en"
+      }),
+      _useState6 = _slicedToArray(_useState5, 2),
+      value = _useState6[0],
+      setValue = _useState6[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          domain: "main",
+          language: "en"
+        },
+        label: {
+          domain: "Main",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "main",
+          language: "de"
+        },
+        label: {
+          domain: "Main",
+          language: "German"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "en"
+        },
+        label: {
+          domain: "Secondary",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "de"
+        },
+        label: {
+          domain: "Secondary",
+          language: "German"
+        }
+      }],
+      searchable: true
+    });
+  }
+};
+export var Groups = {
+  render: function render() {
+    var _useState7 = useState({
+        domain: "main",
+        language: "en"
+      }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      value = _useState8[0],
+      setValue = _useState8[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          domain: "main",
+          language: "en"
+        },
+        label: {
+          domain: "Main",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "main",
+          language: "de"
+        },
+        label: {
+          domain: "Main",
+          language: "German"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "en"
+        },
+        label: {
+          domain: "Secondary",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "de"
+        },
+        label: {
+          domain: "Secondary",
+          language: "German"
+        }
+      }],
+      groupBy: "domain",
+      searchable: true
+    });
+  }
+};
+export var CustomIcon = {
+  render: function render() {
+    var _useState9 = useState({
+        domain: "main",
+        language: "en"
+      }),
+      _useState0 = _slicedToArray(_useState9, 2),
+      value = _useState0[0],
+      setValue = _useState0[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          domain: "main",
+          language: "en"
+        },
+        label: {
+          domain: "Main",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "main",
+          language: "de"
+        },
+        label: {
+          domain: "Main",
+          language: "German"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "en"
+        },
+        label: {
+          domain: "Secondary",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "de"
+        },
+        label: {
+          domain: "Secondary",
+          language: "German"
+        }
+      }],
+      icon: /*#__PURE__*/_jsx(Language, {})
+    });
+  },
+  name: "Custom icon"
+};
+export var CustomRenderOption = {
+  render: function render() {
+    var _useState1 = useState({
+        domain: "main",
+        language: "en"
+      }),
+      _useState10 = _slicedToArray(_useState1, 2),
+      value = _useState10[0],
+      setValue = _useState10[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          domain: "main",
+          language: "en"
+        },
+        label: {
+          domain: "Main",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "main",
+          language: "de"
+        },
+        label: {
+          domain: "Main",
+          language: "German"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "en"
+        },
+        label: {
+          domain: "Secondary",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "de"
+        },
+        label: {
+          domain: "Secondary",
+          language: "German"
+        }
+      }],
+      renderOption: function renderOption(option) {
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(Domain, {})
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            primary: /*#__PURE__*/_jsxs(_Fragment, {
+              children: [option.label.domain, " \u2013 ", option.label.language]
+            })
+          })]
+        });
+      }
+    });
+  },
+  name: "Custom renderOption"
+};
+export var CustomRenderOptionWithSearchHighlighting = {
+  render: function render() {
+    var _useState11 = useState({
+        domain: "main",
+        language: "en"
+      }),
+      _useState12 = _slicedToArray(_useState11, 2),
+      value = _useState12[0],
+      setValue = _useState12[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      searchable: true,
+      onChange: setValue,
+      options: [{
+        scope: {
+          domain: "main",
+          language: "en"
+        },
+        label: {
+          domain: "Main",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "main",
+          language: "de"
+        },
+        label: {
+          domain: "Main",
+          language: "German"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "en"
+        },
+        label: {
+          domain: "Secondary",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "de"
+        },
+        label: {
+          domain: "Secondary",
+          language: "German"
+        }
+      }],
+      renderOption: function renderOption(option, query) {
+        var text = "".concat(option.label.domain, " \u2013 ").concat(option.label.language);
+        var matches = findTextMatches(text, query);
+        return /*#__PURE__*/_jsx(ListItemText, {
+          primary: /*#__PURE__*/_jsx(MarkedMatches, {
+            text: text,
+            matches: matches
+          })
+        });
+      }
+    });
+  },
+  name: "Custom renderOption with search highlighting"
+};
+export var CustomRenderSelectedOption = {
+  render: function render() {
+    var _useState13 = useState({
+        domain: "main",
+        language: "en"
+      }),
+      _useState14 = _slicedToArray(_useState13, 2),
+      value = _useState14[0],
+      setValue = _useState14[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          domain: "main",
+          language: "en"
+        },
+        label: {
+          domain: "Main",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "main",
+          language: "de"
+        },
+        label: {
+          domain: "Main",
+          language: "German"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "en"
+        },
+        label: {
+          domain: "Secondary",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "de"
+        },
+        label: {
+          domain: "Secondary",
+          language: "German"
+        }
+      }],
+      renderSelectedOption: function renderSelectedOption(option) {
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [option.label.domain, ": ", option.label.language]
+        });
+      }
+    });
+  },
+  name: "Custom renderSelectedOption"
+};
+export var ThreeDimensions = {
+  render: function render() {
+    var _useState15 = useState({
+        company: "a-inc",
+        country: "at",
+        language: "de"
+      }),
+      _useState16 = _slicedToArray(_useState15, 2),
+      value = _useState16[0],
+      setValue = _useState16[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          company: "a-inc",
+          country: "at",
+          language: "de"
+        },
+        label: {
+          company: "A Inc.",
+          country: "Austria",
+          language: "German"
+        }
+      }, {
+        scope: {
+          company: "a-inc",
+          country: "at",
+          language: "en"
+        },
+        label: {
+          company: "A Inc.",
+          country: "Austria",
+          language: "English"
+        }
+      }, {
+        scope: {
+          company: "b-inc",
+          country: "at",
+          language: "de"
+        },
+        label: {
+          company: "B Inc.",
+          country: "Austria",
+          language: "German"
+        }
+      }, {
+        scope: {
+          company: "b-inc",
+          country: "at",
+          language: "en"
+        },
+        label: {
+          company: "B Inc.",
+          country: "Austria",
+          language: "English"
+        }
+      }, {
+        scope: {
+          company: "c-inc",
+          country: "ch",
+          language: "de"
+        },
+        label: {
+          company: "C Inc.",
+          country: "Switzerland",
+          language: "German"
+        }
+      }, {
+        scope: {
+          company: "c-inc",
+          country: "ch",
+          language: "en"
+        },
+        label: {
+          company: "C Inc.",
+          country: "Switzerland",
+          language: "English"
+        }
+      }, {
+        scope: {
+          company: "c-inc",
+          country: "ch",
+          language: "fr"
+        },
+        label: {
+          company: "C Inc.",
+          country: "Switzerland",
+          language: "French"
+        }
+      }],
+      groupBy: "company",
+      searchable: true
+    });
+  },
+  name: "Three dimensions"
+};
+export var GroupingWithOptionalScopeParts = {
+  render: function render() {
+    var _useState17 = useState({
+        country: "at"
+      }),
+      _useState18 = _slicedToArray(_useState17, 2),
+      value = _useState18[0],
+      setValue = _useState18[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          country: "at"
+        },
+        label: {
+          country: "AT Overview"
+        }
+      }, {
+        scope: {
+          country: "de"
+        },
+        label: {
+          country: "DE Overview"
+        }
+      }, {
+        scope: {
+          country: "at",
+          company: "a-inc"
+        },
+        label: {
+          country: "Austria",
+          company: "A Inc."
+        }
+      }, {
+        scope: {
+          country: "at",
+          company: "b-inc"
+        },
+        label: {
+          country: "Austria",
+          company: "B Inc."
+        }
+      }, {
+        scope: {
+          country: "de",
+          company: "a-inc"
+        },
+        label: {
+          country: "Germany",
+          company: "A Inc."
+        }
+      }, {
+        scope: {
+          country: "de",
+          company: "b-inc"
+        },
+        label: {
+          country: "Germany",
+          company: "B Inc."
+        }
+      }],
+      groupBy: "country",
+      searchable: true,
+      renderOption: function renderOption(option, query, isSelected) {
+        var text;
+        if (option.scope.company === undefined) {
+          var _option$label$country, _option$label;
+          text = (_option$label$country = (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.country) !== null && _option$label$country !== void 0 ? _option$label$country : option.scope.country;
+        } else {
+          var _option$label$company, _option$label2;
+          text = (_option$label$company = (_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.company) !== null && _option$label$company !== void 0 ? _option$label$company : option.scope.company;
+        }
+        var matches = findTextMatches(text, query);
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(Domain, {})
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            slotProps: {
+              primary: {
+                variant: isSelected ? "subtitle2" : "body2"
+              }
+            },
+            sx: {
+              margin: 0
+            },
+            primary: /*#__PURE__*/_jsx(MarkedMatches, {
+              text: text,
+              matches: matches
+            })
+          })]
+        });
+      }
+    });
+  },
+  name: "Grouping with optional scope parts"
+};

package/lib/contentScope/noContentScopeFallback/__stories__/NoContentScopeFallback.stories.js

@@ -0,0 +1,7 @@
+import { NoContentScopeFallback } from "../NoContentScopeFallback";
+var config = {
+  component: NoContentScopeFallback,
+  title: "contentScope/noContentScopeFallback/NoContentScopeFallback"
+};
+export default config;
+export var Default = {};

package/lib/dam/DamTable.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type GQLDamFileTableFragment, type GQLDamFolderTableFragment } from "./DataGrid/FolderDataGrid";
+import { type DamItemSelectionMap, type GQLDamFileTableFragment, type GQLDamFolderTableFragment } from "./DataGrid/FolderDataGrid";
 import type { RenderDamLabelOptions } from "./DataGrid/label/DamItemLabelColumn";
 export interface DamFilter {
     allowedMimetypes?: string[];
@@ -18,6 +18,10 @@ export interface DamConfig {
         hideSelectiveActions?: boolean;
     };
     additionalToolbarItems?: ReactNode;
+    disableFolderSelection?: boolean;
+    keepNonExistentRowsSelected?: boolean;
+    initialSelection?: DamItemSelectionMap;
+    onSelectionChange?: (next: DamItemSelectionMap) => void;
 }
 type DamTableProps = DamConfig & {
     renderWithFullHeightMainContent?: boolean;

package/lib/dam/DamTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DamTable.d.ts","sourceRoot":"","sources":["../../src/dam/DamTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAMjD,OAAuB,EAEnB,KAAK,uBAAuB,EAG5B,KAAK,yBAAyB,EACjC,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAIjF,MAAM,WAAW,SAAS;IACtB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAwDD,MAAM,WAAW,SAAS;IACtB,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,uBAAuB,GAAG,yBAAyB,EAAE,OAAO,EAAE,qBAAqB,KAAK,SAAS,CAAC;IACzH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE;QACb,oBAAoB,CAAC,EAAE,OAAO,CAAC;KAClC,CAAC;IACF,sBAAsB,CAAC,EAAE,SAAS,CAAC;CACtC;AAED,KAAK,aAAa,GAAG,SAAS,GAAG;IAC7B,+BAA+B,CAAC,EAAE,OAAO,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,wDAAwD,aAAa,4CA6B7F,CAAC"}
+{"version":3,"file":"DamTable.d.ts","sourceRoot":"","sources":["../../src/dam/DamTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAMjD,OAAuB,EAEnB,KAAK,mBAAmB,EACxB,KAAK,uBAAuB,EAG5B,KAAK,yBAAyB,EACjC,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAIjF,MAAM,WAAW,SAAS;IACtB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAwDD,MAAM,WAAW,SAAS;IACtB,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,uBAAuB,GAAG,yBAAyB,EAAE,OAAO,EAAE,qBAAqB,KAAK,SAAS,CAAC;IACzH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE;QACb,oBAAoB,CAAC,EAAE,OAAO,CAAC;KAClC,CAAC;IACF,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACnC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAC3D;AAED,KAAK,aAAa,GAAG,SAAS,GAAG;IAC7B,+BAA+B,CAAC,EAAE,OAAO,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,wDAAwD,aAAa,4CA+B7F,CAAC"}

package/lib/dam/DamTable.js

@@ -99,7 +99,9 @@ export var DamTable = function DamTable(_ref2) {
     hideContextMenu: false,
     hideMultiselect: false,
     hideDamActions: false,
-    hideArchiveFilter: false
+    hideArchiveFilter: false,
+    disableFolderSelection: false,
+    keepNonExistentRowsSelected: false
   }, damConfigProps);
   var filterApi = useTableQueryFilter({});
   return /*#__PURE__*/_jsx(Stack, {
@@ -110,6 +112,8 @@ export var DamTable = function DamTable(_ref2) {
     children: /*#__PURE__*/_jsx(FileUploadContextProvider, {
       children: /*#__PURE__*/_jsx(ManualDuplicatedFilenamesHandlerContextProvider, {
         children: /*#__PURE__*/_jsx(DamSelectionProvider, {
+          initialSelection: damConfigProps.initialSelection,
+          onSelectionChange: damConfigProps.onSelectionChange,
           children: /*#__PURE__*/_jsx(_Folder, _objectSpread(_objectSpread({
             filterApi: filterApi
           }, propsWithDefaultValues), {}, {