@univerjs/drawing-ui 1.0.0-alpha.8 → 1.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/cjs/index.js +34 -52
  2. package/lib/es/index.js +35 -53
  3. package/lib/index.js +35 -53
  4. package/lib/umd/index.js +2 -2
  5. package/package.json +9 -9
package/lib/cjs/index.js CHANGED
@@ -272,19 +272,17 @@ function isKnownDrawingUINonRotatableType(drawingType) {
272
272
  return drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_CHART;
273
273
  }
274
274
  function resolveDrawingUIRotateEnabled(drawing, options = {}) {
275
- var _options$isKnownNonRo;
276
275
  return (0, _univerjs_drawing.resolveDrawingRotateEnabled)(drawing, {
277
276
  ...options,
278
- isKnownNonRotatableType: (_options$isKnownNonRo = options.isKnownNonRotatableType) !== null && _options$isKnownNonRo !== void 0 ? _options$isKnownNonRo : isKnownDrawingUINonRotatableType
277
+ isKnownNonRotatableType: options.isKnownNonRotatableType ?? isKnownDrawingUINonRotatableType
279
278
  });
280
279
  }
281
280
 
282
281
  //#endregion
283
282
  //#region src/controllers/utils.ts
284
283
  function getDrawingRenderObject(scene, drawingSearch) {
285
- var _scene$getObjectInclu;
286
284
  const key = (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)(drawingSearch);
287
- return (_scene$getObjectInclu = scene.getObjectIncludeInGroup(key)) !== null && _scene$getObjectInclu !== void 0 ? _scene$getObjectInclu : null;
285
+ return scene.getObjectIncludeInGroup(key) ?? null;
288
286
  }
289
287
  function disposeDrawingRenderObject(scene, drawingSearch) {
290
288
  const object = getDrawingRenderObject(scene, drawingSearch);
@@ -627,7 +625,7 @@ const menuSchema = { [_univerjs_ui.ContextMenuPosition.DRAWING]: { [_univerjs_ui
627
625
  //#endregion
628
626
  //#region package.json
629
627
  var name = "@univerjs/drawing-ui";
630
- var version = "1.0.0-alpha.8";
628
+ var version = "1.0.0-beta.0";
631
629
 
632
630
  //#endregion
633
631
  //#region src/config/config.ts
@@ -727,7 +725,7 @@ function ToolbarGroup(props) {
727
725
  }
728
726
  function ToolbarButton(props) {
729
727
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
730
- title: (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService).t(props.titleKey),
728
+ title: props.title,
731
729
  placement: "bottom",
732
730
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
733
731
  type: "button",
@@ -739,9 +737,8 @@ function ToolbarButton(props) {
739
737
  });
740
738
  }
741
739
  function ToolbarDropdownButton(props) {
742
- var _props$options$find;
743
740
  const [open, setOpen] = (0, react.useState)(false);
744
- const activeOption = (_props$options$find = props.options.find((option) => option.value === props.value)) !== null && _props$options$find !== void 0 ? _props$options$find : props.options[0];
741
+ const activeOption = props.options.find((option) => option.value === props.value) ?? props.options[0];
745
742
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
746
743
  open,
747
744
  onOpenChange: setOpen,
@@ -775,11 +772,11 @@ function ToolbarDropdownButton(props) {
775
772
  });
776
773
  }
777
774
  function DocImageFloatingToolbar(props) {
778
- var _univerInstanceServic, _wrappingStyleOptions, _wrappingStyleOptions2;
775
+ var _wrappingStyleOptions;
779
776
  const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
780
777
  const iconManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.IconManager);
781
778
  const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
782
- const documentDataModel = (_univerInstanceServic = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService).getUnit(props.unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC)) !== null && _univerInstanceServic !== void 0 ? _univerInstanceServic : void 0;
779
+ const documentDataModel = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService).getUnit(props.unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC) ?? void 0;
783
780
  const [wrappingStyle, setWrappingStyle] = (0, react.useState)(() => getWrappingStyle(documentDataModel, props.drawingId));
784
781
  const [hidden, setHidden] = (0, react.useState)(false);
785
782
  const actionItems = props.menuItems.filter((item) => item.type !== "select" && item.icon).sort((a, b) => a.index - b.index);
@@ -837,14 +834,14 @@ function DocImageFloatingToolbar(props) {
837
834
  },
838
835
  className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-items-center univer-rounded univer-bg-white univer-px-1 univer-py-1 univer-shadow-sm dark:!univer-border-gray-700 dark:!univer-bg-gray-900", _univerjs_design.borderClassName),
839
836
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarDropdownButton, {
840
- title: (_wrappingStyleOptions = (_wrappingStyleOptions2 = wrappingStyleOptions.find((option) => option.value === wrappingStyle)) === null || _wrappingStyleOptions2 === void 0 ? void 0 : _wrappingStyleOptions2.label) !== null && _wrappingStyleOptions !== void 0 ? _wrappingStyleOptions : localeService.t("drawing-ui.image-text-wrap.inline"),
837
+ title: ((_wrappingStyleOptions = wrappingStyleOptions.find((option) => option.value === wrappingStyle)) === null || _wrappingStyleOptions === void 0 ? void 0 : _wrappingStyleOptions.label) ?? localeService.t("drawing-ui.image-text-wrap.inline"),
841
838
  value: wrappingStyle,
842
839
  options: wrappingStyleOptions,
843
840
  onChange: updateWrappingStyle
844
841
  }) }), actionItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Separator, { orientation: "vertical" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarGroup, { children: actionItems.map((item) => {
845
842
  const Icon = iconManager.get(item.icon);
846
843
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
847
- titleKey: item.label,
844
+ title: localeService.t(item.label),
848
845
  disabled: item.disable,
849
846
  onClick: () => executeMenuItem(item),
850
847
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {})
@@ -853,14 +850,14 @@ function DocImageFloatingToolbar(props) {
853
850
  });
854
851
  }
855
852
  function DocChartFloatingToolbar(props) {
856
- var _chartTypeItem$option, _ref, _chartTypeItem$value, _chartTypeOptions$;
853
+ var _chartTypeOptions$;
857
854
  const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
858
855
  const iconManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.IconManager);
859
856
  const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
860
857
  const [hidden, setHidden] = (0, react.useState)(false);
861
858
  const chartTypeItem = props.menuItems.find((item) => item.type === "select");
862
859
  const actionItems = props.menuItems.filter((item) => item.type !== "select" && item.icon).sort((a, b) => a.index - b.index);
863
- const chartTypeOptions = ((_chartTypeItem$option = chartTypeItem === null || chartTypeItem === void 0 ? void 0 : chartTypeItem.options) !== null && _chartTypeItem$option !== void 0 ? _chartTypeItem$option : []).map((option) => ({
860
+ const chartTypeOptions = ((chartTypeItem === null || chartTypeItem === void 0 ? void 0 : chartTypeItem.options) ?? []).map((option) => ({
864
861
  label: String(option.label),
865
862
  value: option.value,
866
863
  icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ChartIcon, {})
@@ -880,7 +877,7 @@ function DocChartFloatingToolbar(props) {
880
877
  className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-items-center univer-rounded univer-bg-white univer-px-1 univer-py-1 univer-shadow-sm dark:!univer-border-gray-700 dark:!univer-bg-gray-900", _univerjs_design.borderClassName),
881
878
  children: [chartTypeItem && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarDropdownButton, {
882
879
  title: localeService.t(chartTypeItem.label),
883
- value: (_ref = (_chartTypeItem$value = chartTypeItem.value) !== null && _chartTypeItem$value !== void 0 ? _chartTypeItem$value : (_chartTypeOptions$ = chartTypeOptions[0]) === null || _chartTypeOptions$ === void 0 ? void 0 : _chartTypeOptions$.value) !== null && _ref !== void 0 ? _ref : "",
880
+ value: chartTypeItem.value ?? ((_chartTypeOptions$ = chartTypeOptions[0]) === null || _chartTypeOptions$ === void 0 ? void 0 : _chartTypeOptions$.value) ?? "",
884
881
  options: chartTypeOptions,
885
882
  onChange: (value) => {
886
883
  if (!chartTypeItem.disable) {
@@ -891,7 +888,7 @@ function DocChartFloatingToolbar(props) {
891
888
  }) }), actionItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Separator, { orientation: "vertical" })] }), actionItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarGroup, { children: actionItems.map((item) => {
892
889
  const Icon = iconManager.get(item.icon);
893
890
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
894
- titleKey: item.label,
891
+ title: localeService.t(item.label),
895
892
  disabled: item.disable,
896
893
  onClick: () => executeMenuItem(item),
897
894
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {})
@@ -2536,7 +2533,7 @@ _defineProperty(UniverDrawingUIPlugin, "pluginName", "UNIVER_DRAWING_UI_PLUGIN")
2536
2533
  _defineProperty(UniverDrawingUIPlugin, "packageName", name);
2537
2534
  _defineProperty(UniverDrawingUIPlugin, "version", version);
2538
2535
  UniverDrawingUIPlugin = __decorate([
2539
- (0, _univerjs_core.DependentOn)(_univerjs_drawing.UniverDrawingPlugin, _univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_ui.UniverUIPlugin),
2536
+ (0, _univerjs_core.DependentOn)(_univerjs_drawing.UniverDrawingPlugin, _univerjs_engine_render.UniverRenderEnginePlugin),
2540
2537
  __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
2541
2538
  __decorateParam(2, _univerjs_core.IConfigService)
2542
2539
  ], UniverDrawingUIPlugin);
@@ -2605,21 +2602,17 @@ function normalizeText(value) {
2605
2602
  return value.trim();
2606
2603
  }
2607
2604
  function hasCapability(panelCapabilities, item, key, fallback = true) {
2608
- var _ref, _item$capabilities$ke, _item$capabilities;
2609
- return (_ref = (_item$capabilities$ke = item === null || item === void 0 || (_item$capabilities = item.capabilities) === null || _item$capabilities === void 0 ? void 0 : _item$capabilities[key]) !== null && _item$capabilities$ke !== void 0 ? _item$capabilities$ke : panelCapabilities === null || panelCapabilities === void 0 ? void 0 : panelCapabilities[key]) !== null && _ref !== void 0 ? _ref : fallback;
2605
+ var _item$capabilities;
2606
+ return (item === null || item === void 0 || (_item$capabilities = item.capabilities) === null || _item$capabilities === void 0 ? void 0 : _item$capabilities[key]) ?? (panelCapabilities === null || panelCapabilities === void 0 ? void 0 : panelCapabilities[key]) ?? fallback;
2610
2607
  }
2611
2608
  function ObjectListPanelBase(props) {
2612
- var _selectedItem$canMove, _selectedItem$canMove2, _capabilities$reorder;
2613
2609
  const { items, selectedIds, allObjectIds, focusedId, labels, showHeader = true, capabilities, onSelect, onSetVisible, onCommitName, onCommitDescription, onMoveForward, onMoveBackward, onToggleExpanded, onToggleSelectable, onLocate, onReorder } = props;
2614
2610
  const selectedIdSet = (0, react.useMemo)(() => new Set(selectedIds), [selectedIds]);
2615
2611
  const [draggingId, setDraggingId] = (0, react.useState)(null);
2616
2612
  const [searchQuery, setSearchQuery] = (0, react.useState)("");
2617
2613
  const [filterMode, setFilterMode] = (0, react.useState)("all");
2618
2614
  const [collapsedSectionIds, setCollapsedSectionIds] = (0, react.useState)(() => /* @__PURE__ */ new Set());
2619
- const selectedItem = (0, react.useMemo)(() => {
2620
- var _ref2, _items$find;
2621
- return (_ref2 = (_items$find = items.find((item) => item.id === focusedId)) !== null && _items$find !== void 0 ? _items$find : items.find((item) => selectedIdSet.has(item.id))) !== null && _ref2 !== void 0 ? _ref2 : null;
2622
- }, [
2615
+ const selectedItem = (0, react.useMemo)(() => items.find((item) => item.id === focusedId) ?? items.find((item) => selectedIdSet.has(item.id)) ?? null, [
2623
2616
  focusedId,
2624
2617
  items,
2625
2618
  selectedIdSet
@@ -2627,11 +2620,10 @@ function ObjectListPanelBase(props) {
2627
2620
  const visibleItems = (0, react.useMemo)(() => {
2628
2621
  const normalizedQuery = normalizeText(searchQuery).toLocaleLowerCase();
2629
2622
  return items.filter((item) => {
2630
- var _item$description;
2631
2623
  if (filterMode === "hidden" && item.visible !== false) return false;
2632
2624
  if (filterMode === "locked" && item.selectable !== false) return false;
2633
2625
  if (!normalizedQuery) return true;
2634
- return item.name.toLocaleLowerCase().includes(normalizedQuery) || ((_item$description = item.description) !== null && _item$description !== void 0 ? _item$description : "").toLocaleLowerCase().includes(normalizedQuery);
2626
+ return item.name.toLocaleLowerCase().includes(normalizedQuery) || (item.description ?? "").toLocaleLowerCase().includes(normalizedQuery);
2635
2627
  });
2636
2628
  }, [
2637
2629
  filterMode,
@@ -2641,8 +2633,7 @@ function ObjectListPanelBase(props) {
2641
2633
  const visibleItemSections = (0, react.useMemo)(() => {
2642
2634
  const sectionMap = /* @__PURE__ */ new Map();
2643
2635
  visibleItems.forEach((item) => {
2644
- var _item$sectionId, _item$sectionTitle;
2645
- const sectionId = (_item$sectionId = item.sectionId) !== null && _item$sectionId !== void 0 ? _item$sectionId : "";
2636
+ const sectionId = item.sectionId ?? "";
2646
2637
  const existingSection = sectionMap.get(sectionId);
2647
2638
  if (existingSection) {
2648
2639
  existingSection.items.push(item);
@@ -2650,35 +2641,30 @@ function ObjectListPanelBase(props) {
2650
2641
  }
2651
2642
  sectionMap.set(sectionId, {
2652
2643
  id: sectionId,
2653
- title: (_item$sectionTitle = item.sectionTitle) !== null && _item$sectionTitle !== void 0 ? _item$sectionTitle : "",
2644
+ title: item.sectionTitle ?? "",
2654
2645
  items: [item]
2655
2646
  });
2656
2647
  });
2657
- return [...sectionMap.values()].sort((a, b) => {
2658
- var _sectionOrder$get, _sectionOrder$get2;
2659
- return ((_sectionOrder$get = sectionOrder.get(a.id)) !== null && _sectionOrder$get !== void 0 ? _sectionOrder$get : 3) - ((_sectionOrder$get2 = sectionOrder.get(b.id)) !== null && _sectionOrder$get2 !== void 0 ? _sectionOrder$get2 : 3);
2660
- });
2648
+ return [...sectionMap.values()].sort((a, b) => (sectionOrder.get(a.id) ?? 3) - (sectionOrder.get(b.id) ?? 3));
2661
2649
  }, [visibleItems]);
2662
2650
  const showSectionHeaders = visibleItemSections.length > 1 || visibleItemSections.some((section) => section.id === "floating");
2663
- const allIds = (0, react.useMemo)(() => allObjectIds !== null && allObjectIds !== void 0 ? allObjectIds : items.map((item) => item.id), [allObjectIds, items]);
2651
+ const allIds = (0, react.useMemo)(() => allObjectIds ?? items.map((item) => item.id), [allObjectIds, items]);
2664
2652
  const selectedIndex = selectedItem ? items.findIndex((item) => item.id === selectedItem.id) : -1;
2665
- const canMoveForward = !!selectedItem && !!onMoveForward && !selectedItem.disabled && ((_selectedItem$canMove = selectedItem.canMoveForward) !== null && _selectedItem$canMove !== void 0 ? _selectedItem$canMove : selectedIndex > 0) && hasCapability(capabilities, selectedItem, "arrange");
2666
- const canMoveBackward = !!selectedItem && !!onMoveBackward && !selectedItem.disabled && ((_selectedItem$canMove2 = selectedItem.canMoveBackward) !== null && _selectedItem$canMove2 !== void 0 ? _selectedItem$canMove2 : selectedIndex >= 0 && selectedIndex < items.length - 1) && hasCapability(capabilities, selectedItem, "arrange");
2653
+ const canMoveForward = !!selectedItem && !!onMoveForward && !selectedItem.disabled && (selectedItem.canMoveForward ?? selectedIndex > 0) && hasCapability(capabilities, selectedItem, "arrange");
2654
+ const canMoveBackward = !!selectedItem && !!onMoveBackward && !selectedItem.disabled && (selectedItem.canMoveBackward ?? (selectedIndex >= 0 && selectedIndex < items.length - 1)) && hasCapability(capabilities, selectedItem, "arrange");
2667
2655
  const showArrangeControls = hasCapability(capabilities, selectedItem, "arrange") && (!!onMoveForward || !!onMoveBackward);
2668
2656
  const showLocateControl = !!onLocate && hasCapability(capabilities, selectedItem, "locate");
2669
- const canReorder = !!onReorder && ((_capabilities$reorder = capabilities === null || capabilities === void 0 ? void 0 : capabilities.reorder) !== null && _capabilities$reorder !== void 0 ? _capabilities$reorder : true);
2657
+ const canReorder = !!onReorder && ((capabilities === null || capabilities === void 0 ? void 0 : capabilities.reorder) ?? true);
2670
2658
  const findItem = (objectId) => {
2671
- var _items$find2;
2672
- return objectId ? (_items$find2 = items.find((item) => item.id === objectId)) !== null && _items$find2 !== void 0 ? _items$find2 : null : null;
2659
+ return objectId ? items.find((item) => item.id === objectId) ?? null : null;
2673
2660
  };
2674
2661
  const handleDrop = (targetId) => {
2675
- var _source$parentId, _target$parentId, _source$sectionId, _target$sectionId;
2676
2662
  const source = findItem(draggingId);
2677
2663
  const target = findItem(targetId);
2678
2664
  setDraggingId(null);
2679
2665
  if (!source || !target || source.id === target.id || source.disabled || target.disabled) return;
2680
- if (((_source$parentId = source.parentId) !== null && _source$parentId !== void 0 ? _source$parentId : "") !== ((_target$parentId = target.parentId) !== null && _target$parentId !== void 0 ? _target$parentId : "")) return;
2681
- if (((_source$sectionId = source.sectionId) !== null && _source$sectionId !== void 0 ? _source$sectionId : "") !== ((_target$sectionId = target.sectionId) !== null && _target$sectionId !== void 0 ? _target$sectionId : "")) return;
2666
+ if ((source.parentId ?? "") !== (target.parentId ?? "")) return;
2667
+ if ((source.sectionId ?? "") !== (target.sectionId ?? "")) return;
2682
2668
  if (source.canReorder === false || target.canReorder === false) return;
2683
2669
  onReorder === null || onReorder === void 0 || onReorder(source.id, target.id);
2684
2670
  };
@@ -2836,12 +2822,11 @@ function ObjectListPanelBase(props) {
2836
2822
  });
2837
2823
  }
2838
2824
  function ObjectListRow(props) {
2839
- var _item$level;
2840
2825
  const { item, selected, labels, showLock, showName, showVisible, draggable, dragging, onSelect, onToggleExpanded, onToggleVisible, onToggleSelectable, onCommitName, onDragStart, onDragEnd, onDrop } = props;
2841
2826
  const [draftName, setDraftName] = (0, react.useState)(item.name);
2842
2827
  const skipCommitOnBlurRef = (0, react.useRef)(false);
2843
2828
  const disabled = item.disabled === true;
2844
- const level = (_item$level = item.level) !== null && _item$level !== void 0 ? _item$level : 0;
2829
+ const level = item.level ?? 0;
2845
2830
  const locked = item.selectable === false;
2846
2831
  (0, react.useEffect)(() => {
2847
2832
  setDraftName(item.name);
@@ -2952,15 +2937,13 @@ function ObjectListRow(props) {
2952
2937
  });
2953
2938
  }
2954
2939
  function ObjectDetailsEditor(props) {
2955
- var _item$name, _item$description2;
2956
2940
  const { item, labels, showName, showDescription, onCommitName, onCommitDescription } = props;
2957
- const [draftName, setDraftName] = (0, react.useState)((_item$name = item === null || item === void 0 ? void 0 : item.name) !== null && _item$name !== void 0 ? _item$name : "");
2958
- const [draftDescription, setDraftDescription] = (0, react.useState)((_item$description2 = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description2 !== void 0 ? _item$description2 : "");
2941
+ const [draftName, setDraftName] = (0, react.useState)((item === null || item === void 0 ? void 0 : item.name) ?? "");
2942
+ const [draftDescription, setDraftDescription] = (0, react.useState)((item === null || item === void 0 ? void 0 : item.description) ?? "");
2959
2943
  const disabled = (item === null || item === void 0 ? void 0 : item.disabled) === true;
2960
2944
  (0, react.useEffect)(() => {
2961
- var _item$name2, _item$description3;
2962
- setDraftName((_item$name2 = item === null || item === void 0 ? void 0 : item.name) !== null && _item$name2 !== void 0 ? _item$name2 : "");
2963
- setDraftDescription((_item$description3 = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description3 !== void 0 ? _item$description3 : "");
2945
+ setDraftName((item === null || item === void 0 ? void 0 : item.name) ?? "");
2946
+ setDraftDescription((item === null || item === void 0 ? void 0 : item.description) ?? "");
2964
2947
  }, [
2965
2948
  item === null || item === void 0 ? void 0 : item.description,
2966
2949
  item === null || item === void 0 ? void 0 : item.id,
@@ -3008,8 +2991,7 @@ function ObjectDetailsEditor(props) {
3008
2991
  "aria-label": labels.description,
3009
2992
  onChange: (event) => setDraftDescription(event.currentTarget.value),
3010
2993
  onBlur: () => {
3011
- var _item$description4;
3012
- if (!disabled && normalizeText(draftDescription) !== ((_item$description4 = item.description) !== null && _item$description4 !== void 0 ? _item$description4 : "")) onCommitDescription(draftDescription);
2994
+ if (!disabled && normalizeText(draftDescription) !== (item.description ?? "")) onCommitDescription(draftDescription);
3013
2995
  }
3014
2996
  })]
3015
2997
  })
package/lib/es/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ArrangeTypeEnum, BooleanNumber, CommandType, DependentOn, Disposable, DrawingTypeEnum, ICommandService, IConfigService, IImageIoService, IURLImageService, IUniverInstanceService, ImageSourceType, Inject, Injector, LocaleService, Plugin, PositionedObjectLayoutType, UniverInstanceType, checkIfMove, debounce, generateRandomId, merge, toDisposable } from "@univerjs/core";
2
2
  import { DRAWING_GROUPABLE_TYPES, IDrawingManagerService, SetDrawingSelectedOperation, UniverDrawingPlugin, getDrawingShapeKeyByDrawingSearch, isGroupableDrawingType, resolveDrawingRotateEnabled } from "@univerjs/drawing";
3
3
  import { CURSOR_TYPE, Canvas, DRAWING_OBJECT_LAYER_INDEX, DrawingGroupObject, Group, IRenderManagerService, Image, RENDER_CLASS_TYPE, Rect, Shape, UniverRenderEnginePlugin, Vector2, degToRad, getGroupState, precisionTo, transformObjectOutOfGroup } from "@univerjs/engine-render";
4
- import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IGalleryService, IMenuManagerService, IMessageService, IconManager, MenuItemType, UniverUIPlugin, useDependency, useObservable } from "@univerjs/ui";
4
+ import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IGalleryService, IMenuManagerService, IMessageService, IconManager, MenuItemType, useDependency, useObservable } from "@univerjs/ui";
5
5
  import { BehaviorSubject, Observable, bufferTime, filter, map, merge as merge$1, of, startWith, switchMap } from "rxjs";
6
6
  import { ArrowDownIcon, ArrowUpIcon, AutofillDoubleIcon, BottomIcon, ChartIcon, CreateCopyIcon, CropIcon, DeleteIcon, DocSettingIcon, EyeIcon, EyelashIcon, GroupIcon, LocateFixedIcon, LockIcon, MoreDownIcon, MoreRightIcon, MoveDownIcon, MoveUpIcon, TextWrapShapeIcon, TopmostIcon, UngroupIcon, UnlockIcon } from "@univerjs/icons";
7
7
  import { Button, Checkbox, Dropdown, DropdownMenu, Input, InputNumber, MessageType, Select, Separator, Tooltip, borderClassName, clsx } from "@univerjs/design";
@@ -271,19 +271,17 @@ function isKnownDrawingUINonRotatableType(drawingType) {
271
271
  return drawingType === DrawingTypeEnum.DRAWING_CHART;
272
272
  }
273
273
  function resolveDrawingUIRotateEnabled(drawing, options = {}) {
274
- var _options$isKnownNonRo;
275
274
  return resolveDrawingRotateEnabled(drawing, {
276
275
  ...options,
277
- isKnownNonRotatableType: (_options$isKnownNonRo = options.isKnownNonRotatableType) !== null && _options$isKnownNonRo !== void 0 ? _options$isKnownNonRo : isKnownDrawingUINonRotatableType
276
+ isKnownNonRotatableType: options.isKnownNonRotatableType ?? isKnownDrawingUINonRotatableType
278
277
  });
279
278
  }
280
279
 
281
280
  //#endregion
282
281
  //#region src/controllers/utils.ts
283
282
  function getDrawingRenderObject(scene, drawingSearch) {
284
- var _scene$getObjectInclu;
285
283
  const key = getDrawingShapeKeyByDrawingSearch(drawingSearch);
286
- return (_scene$getObjectInclu = scene.getObjectIncludeInGroup(key)) !== null && _scene$getObjectInclu !== void 0 ? _scene$getObjectInclu : null;
284
+ return scene.getObjectIncludeInGroup(key) ?? null;
287
285
  }
288
286
  function disposeDrawingRenderObject(scene, drawingSearch) {
289
287
  const object = getDrawingRenderObject(scene, drawingSearch);
@@ -626,7 +624,7 @@ const menuSchema = { [ContextMenuPosition.DRAWING]: { [ContextMenuGroup.OTHERS]:
626
624
  //#endregion
627
625
  //#region package.json
628
626
  var name = "@univerjs/drawing-ui";
629
- var version = "1.0.0-alpha.8";
627
+ var version = "1.0.0-beta.0";
630
628
 
631
629
  //#endregion
632
630
  //#region src/config/config.ts
@@ -726,7 +724,7 @@ function ToolbarGroup(props) {
726
724
  }
727
725
  function ToolbarButton(props) {
728
726
  return /* @__PURE__ */ jsx(Tooltip, {
729
- title: useDependency(LocaleService).t(props.titleKey),
727
+ title: props.title,
730
728
  placement: "bottom",
731
729
  children: /* @__PURE__ */ jsx("button", {
732
730
  type: "button",
@@ -738,9 +736,8 @@ function ToolbarButton(props) {
738
736
  });
739
737
  }
740
738
  function ToolbarDropdownButton(props) {
741
- var _props$options$find;
742
739
  const [open, setOpen] = useState(false);
743
- const activeOption = (_props$options$find = props.options.find((option) => option.value === props.value)) !== null && _props$options$find !== void 0 ? _props$options$find : props.options[0];
740
+ const activeOption = props.options.find((option) => option.value === props.value) ?? props.options[0];
744
741
  return /* @__PURE__ */ jsx(Dropdown, {
745
742
  open,
746
743
  onOpenChange: setOpen,
@@ -774,11 +771,11 @@ function ToolbarDropdownButton(props) {
774
771
  });
775
772
  }
776
773
  function DocImageFloatingToolbar(props) {
777
- var _univerInstanceServic, _wrappingStyleOptions, _wrappingStyleOptions2;
774
+ var _wrappingStyleOptions;
778
775
  const commandService = useDependency(ICommandService);
779
776
  const iconManager = useDependency(IconManager);
780
777
  const localeService = useDependency(LocaleService);
781
- const documentDataModel = (_univerInstanceServic = useDependency(IUniverInstanceService).getUnit(props.unitId, UniverInstanceType.UNIVER_DOC)) !== null && _univerInstanceServic !== void 0 ? _univerInstanceServic : void 0;
778
+ const documentDataModel = useDependency(IUniverInstanceService).getUnit(props.unitId, UniverInstanceType.UNIVER_DOC) ?? void 0;
782
779
  const [wrappingStyle, setWrappingStyle] = useState(() => getWrappingStyle(documentDataModel, props.drawingId));
783
780
  const [hidden, setHidden] = useState(false);
784
781
  const actionItems = props.menuItems.filter((item) => item.type !== "select" && item.icon).sort((a, b) => a.index - b.index);
@@ -836,14 +833,14 @@ function DocImageFloatingToolbar(props) {
836
833
  },
837
834
  className: clsx("univer-box-border univer-flex univer-items-center univer-rounded univer-bg-white univer-px-1 univer-py-1 univer-shadow-sm dark:!univer-border-gray-700 dark:!univer-bg-gray-900", borderClassName),
838
835
  children: [/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarDropdownButton, {
839
- title: (_wrappingStyleOptions = (_wrappingStyleOptions2 = wrappingStyleOptions.find((option) => option.value === wrappingStyle)) === null || _wrappingStyleOptions2 === void 0 ? void 0 : _wrappingStyleOptions2.label) !== null && _wrappingStyleOptions !== void 0 ? _wrappingStyleOptions : localeService.t("drawing-ui.image-text-wrap.inline"),
836
+ title: ((_wrappingStyleOptions = wrappingStyleOptions.find((option) => option.value === wrappingStyle)) === null || _wrappingStyleOptions === void 0 ? void 0 : _wrappingStyleOptions.label) ?? localeService.t("drawing-ui.image-text-wrap.inline"),
840
837
  value: wrappingStyle,
841
838
  options: wrappingStyleOptions,
842
839
  onChange: updateWrappingStyle
843
840
  }) }), actionItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, { orientation: "vertical" }), /* @__PURE__ */ jsx(ToolbarGroup, { children: actionItems.map((item) => {
844
841
  const Icon = iconManager.get(item.icon);
845
842
  return /* @__PURE__ */ jsx(ToolbarButton, {
846
- titleKey: item.label,
843
+ title: localeService.t(item.label),
847
844
  disabled: item.disable,
848
845
  onClick: () => executeMenuItem(item),
849
846
  children: /* @__PURE__ */ jsx(Icon, {})
@@ -852,14 +849,14 @@ function DocImageFloatingToolbar(props) {
852
849
  });
853
850
  }
854
851
  function DocChartFloatingToolbar(props) {
855
- var _chartTypeItem$option, _ref, _chartTypeItem$value, _chartTypeOptions$;
852
+ var _chartTypeOptions$;
856
853
  const commandService = useDependency(ICommandService);
857
854
  const iconManager = useDependency(IconManager);
858
855
  const localeService = useDependency(LocaleService);
859
856
  const [hidden, setHidden] = useState(false);
860
857
  const chartTypeItem = props.menuItems.find((item) => item.type === "select");
861
858
  const actionItems = props.menuItems.filter((item) => item.type !== "select" && item.icon).sort((a, b) => a.index - b.index);
862
- const chartTypeOptions = ((_chartTypeItem$option = chartTypeItem === null || chartTypeItem === void 0 ? void 0 : chartTypeItem.options) !== null && _chartTypeItem$option !== void 0 ? _chartTypeItem$option : []).map((option) => ({
859
+ const chartTypeOptions = ((chartTypeItem === null || chartTypeItem === void 0 ? void 0 : chartTypeItem.options) ?? []).map((option) => ({
863
860
  label: String(option.label),
864
861
  value: option.value,
865
862
  icon: /* @__PURE__ */ jsx(ChartIcon, {})
@@ -879,7 +876,7 @@ function DocChartFloatingToolbar(props) {
879
876
  className: clsx("univer-box-border univer-flex univer-items-center univer-rounded univer-bg-white univer-px-1 univer-py-1 univer-shadow-sm dark:!univer-border-gray-700 dark:!univer-bg-gray-900", borderClassName),
880
877
  children: [chartTypeItem && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarDropdownButton, {
881
878
  title: localeService.t(chartTypeItem.label),
882
- value: (_ref = (_chartTypeItem$value = chartTypeItem.value) !== null && _chartTypeItem$value !== void 0 ? _chartTypeItem$value : (_chartTypeOptions$ = chartTypeOptions[0]) === null || _chartTypeOptions$ === void 0 ? void 0 : _chartTypeOptions$.value) !== null && _ref !== void 0 ? _ref : "",
879
+ value: chartTypeItem.value ?? ((_chartTypeOptions$ = chartTypeOptions[0]) === null || _chartTypeOptions$ === void 0 ? void 0 : _chartTypeOptions$.value) ?? "",
883
880
  options: chartTypeOptions,
884
881
  onChange: (value) => {
885
882
  if (!chartTypeItem.disable) {
@@ -890,7 +887,7 @@ function DocChartFloatingToolbar(props) {
890
887
  }) }), actionItems.length > 0 && /* @__PURE__ */ jsx(Separator, { orientation: "vertical" })] }), actionItems.length > 0 && /* @__PURE__ */ jsx(ToolbarGroup, { children: actionItems.map((item) => {
891
888
  const Icon = iconManager.get(item.icon);
892
889
  return /* @__PURE__ */ jsx(ToolbarButton, {
893
- titleKey: item.label,
890
+ title: localeService.t(item.label),
894
891
  disabled: item.disable,
895
892
  onClick: () => executeMenuItem(item),
896
893
  children: /* @__PURE__ */ jsx(Icon, {})
@@ -2535,7 +2532,7 @@ _defineProperty(UniverDrawingUIPlugin, "pluginName", "UNIVER_DRAWING_UI_PLUGIN")
2535
2532
  _defineProperty(UniverDrawingUIPlugin, "packageName", name);
2536
2533
  _defineProperty(UniverDrawingUIPlugin, "version", version);
2537
2534
  UniverDrawingUIPlugin = __decorate([
2538
- DependentOn(UniverDrawingPlugin, UniverRenderEnginePlugin, UniverUIPlugin),
2535
+ DependentOn(UniverDrawingPlugin, UniverRenderEnginePlugin),
2539
2536
  __decorateParam(1, Inject(Injector)),
2540
2537
  __decorateParam(2, IConfigService)
2541
2538
  ], UniverDrawingUIPlugin);
@@ -2604,21 +2601,17 @@ function normalizeText(value) {
2604
2601
  return value.trim();
2605
2602
  }
2606
2603
  function hasCapability(panelCapabilities, item, key, fallback = true) {
2607
- var _ref, _item$capabilities$ke, _item$capabilities;
2608
- return (_ref = (_item$capabilities$ke = item === null || item === void 0 || (_item$capabilities = item.capabilities) === null || _item$capabilities === void 0 ? void 0 : _item$capabilities[key]) !== null && _item$capabilities$ke !== void 0 ? _item$capabilities$ke : panelCapabilities === null || panelCapabilities === void 0 ? void 0 : panelCapabilities[key]) !== null && _ref !== void 0 ? _ref : fallback;
2604
+ var _item$capabilities;
2605
+ return (item === null || item === void 0 || (_item$capabilities = item.capabilities) === null || _item$capabilities === void 0 ? void 0 : _item$capabilities[key]) ?? (panelCapabilities === null || panelCapabilities === void 0 ? void 0 : panelCapabilities[key]) ?? fallback;
2609
2606
  }
2610
2607
  function ObjectListPanelBase(props) {
2611
- var _selectedItem$canMove, _selectedItem$canMove2, _capabilities$reorder;
2612
2608
  const { items, selectedIds, allObjectIds, focusedId, labels, showHeader = true, capabilities, onSelect, onSetVisible, onCommitName, onCommitDescription, onMoveForward, onMoveBackward, onToggleExpanded, onToggleSelectable, onLocate, onReorder } = props;
2613
2609
  const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
2614
2610
  const [draggingId, setDraggingId] = useState(null);
2615
2611
  const [searchQuery, setSearchQuery] = useState("");
2616
2612
  const [filterMode, setFilterMode] = useState("all");
2617
2613
  const [collapsedSectionIds, setCollapsedSectionIds] = useState(() => /* @__PURE__ */ new Set());
2618
- const selectedItem = useMemo(() => {
2619
- var _ref2, _items$find;
2620
- return (_ref2 = (_items$find = items.find((item) => item.id === focusedId)) !== null && _items$find !== void 0 ? _items$find : items.find((item) => selectedIdSet.has(item.id))) !== null && _ref2 !== void 0 ? _ref2 : null;
2621
- }, [
2614
+ const selectedItem = useMemo(() => items.find((item) => item.id === focusedId) ?? items.find((item) => selectedIdSet.has(item.id)) ?? null, [
2622
2615
  focusedId,
2623
2616
  items,
2624
2617
  selectedIdSet
@@ -2626,11 +2619,10 @@ function ObjectListPanelBase(props) {
2626
2619
  const visibleItems = useMemo(() => {
2627
2620
  const normalizedQuery = normalizeText(searchQuery).toLocaleLowerCase();
2628
2621
  return items.filter((item) => {
2629
- var _item$description;
2630
2622
  if (filterMode === "hidden" && item.visible !== false) return false;
2631
2623
  if (filterMode === "locked" && item.selectable !== false) return false;
2632
2624
  if (!normalizedQuery) return true;
2633
- return item.name.toLocaleLowerCase().includes(normalizedQuery) || ((_item$description = item.description) !== null && _item$description !== void 0 ? _item$description : "").toLocaleLowerCase().includes(normalizedQuery);
2625
+ return item.name.toLocaleLowerCase().includes(normalizedQuery) || (item.description ?? "").toLocaleLowerCase().includes(normalizedQuery);
2634
2626
  });
2635
2627
  }, [
2636
2628
  filterMode,
@@ -2640,8 +2632,7 @@ function ObjectListPanelBase(props) {
2640
2632
  const visibleItemSections = useMemo(() => {
2641
2633
  const sectionMap = /* @__PURE__ */ new Map();
2642
2634
  visibleItems.forEach((item) => {
2643
- var _item$sectionId, _item$sectionTitle;
2644
- const sectionId = (_item$sectionId = item.sectionId) !== null && _item$sectionId !== void 0 ? _item$sectionId : "";
2635
+ const sectionId = item.sectionId ?? "";
2645
2636
  const existingSection = sectionMap.get(sectionId);
2646
2637
  if (existingSection) {
2647
2638
  existingSection.items.push(item);
@@ -2649,35 +2640,30 @@ function ObjectListPanelBase(props) {
2649
2640
  }
2650
2641
  sectionMap.set(sectionId, {
2651
2642
  id: sectionId,
2652
- title: (_item$sectionTitle = item.sectionTitle) !== null && _item$sectionTitle !== void 0 ? _item$sectionTitle : "",
2643
+ title: item.sectionTitle ?? "",
2653
2644
  items: [item]
2654
2645
  });
2655
2646
  });
2656
- return [...sectionMap.values()].sort((a, b) => {
2657
- var _sectionOrder$get, _sectionOrder$get2;
2658
- return ((_sectionOrder$get = sectionOrder.get(a.id)) !== null && _sectionOrder$get !== void 0 ? _sectionOrder$get : 3) - ((_sectionOrder$get2 = sectionOrder.get(b.id)) !== null && _sectionOrder$get2 !== void 0 ? _sectionOrder$get2 : 3);
2659
- });
2647
+ return [...sectionMap.values()].sort((a, b) => (sectionOrder.get(a.id) ?? 3) - (sectionOrder.get(b.id) ?? 3));
2660
2648
  }, [visibleItems]);
2661
2649
  const showSectionHeaders = visibleItemSections.length > 1 || visibleItemSections.some((section) => section.id === "floating");
2662
- const allIds = useMemo(() => allObjectIds !== null && allObjectIds !== void 0 ? allObjectIds : items.map((item) => item.id), [allObjectIds, items]);
2650
+ const allIds = useMemo(() => allObjectIds ?? items.map((item) => item.id), [allObjectIds, items]);
2663
2651
  const selectedIndex = selectedItem ? items.findIndex((item) => item.id === selectedItem.id) : -1;
2664
- const canMoveForward = !!selectedItem && !!onMoveForward && !selectedItem.disabled && ((_selectedItem$canMove = selectedItem.canMoveForward) !== null && _selectedItem$canMove !== void 0 ? _selectedItem$canMove : selectedIndex > 0) && hasCapability(capabilities, selectedItem, "arrange");
2665
- const canMoveBackward = !!selectedItem && !!onMoveBackward && !selectedItem.disabled && ((_selectedItem$canMove2 = selectedItem.canMoveBackward) !== null && _selectedItem$canMove2 !== void 0 ? _selectedItem$canMove2 : selectedIndex >= 0 && selectedIndex < items.length - 1) && hasCapability(capabilities, selectedItem, "arrange");
2652
+ const canMoveForward = !!selectedItem && !!onMoveForward && !selectedItem.disabled && (selectedItem.canMoveForward ?? selectedIndex > 0) && hasCapability(capabilities, selectedItem, "arrange");
2653
+ const canMoveBackward = !!selectedItem && !!onMoveBackward && !selectedItem.disabled && (selectedItem.canMoveBackward ?? (selectedIndex >= 0 && selectedIndex < items.length - 1)) && hasCapability(capabilities, selectedItem, "arrange");
2666
2654
  const showArrangeControls = hasCapability(capabilities, selectedItem, "arrange") && (!!onMoveForward || !!onMoveBackward);
2667
2655
  const showLocateControl = !!onLocate && hasCapability(capabilities, selectedItem, "locate");
2668
- const canReorder = !!onReorder && ((_capabilities$reorder = capabilities === null || capabilities === void 0 ? void 0 : capabilities.reorder) !== null && _capabilities$reorder !== void 0 ? _capabilities$reorder : true);
2656
+ const canReorder = !!onReorder && ((capabilities === null || capabilities === void 0 ? void 0 : capabilities.reorder) ?? true);
2669
2657
  const findItem = (objectId) => {
2670
- var _items$find2;
2671
- return objectId ? (_items$find2 = items.find((item) => item.id === objectId)) !== null && _items$find2 !== void 0 ? _items$find2 : null : null;
2658
+ return objectId ? items.find((item) => item.id === objectId) ?? null : null;
2672
2659
  };
2673
2660
  const handleDrop = (targetId) => {
2674
- var _source$parentId, _target$parentId, _source$sectionId, _target$sectionId;
2675
2661
  const source = findItem(draggingId);
2676
2662
  const target = findItem(targetId);
2677
2663
  setDraggingId(null);
2678
2664
  if (!source || !target || source.id === target.id || source.disabled || target.disabled) return;
2679
- if (((_source$parentId = source.parentId) !== null && _source$parentId !== void 0 ? _source$parentId : "") !== ((_target$parentId = target.parentId) !== null && _target$parentId !== void 0 ? _target$parentId : "")) return;
2680
- if (((_source$sectionId = source.sectionId) !== null && _source$sectionId !== void 0 ? _source$sectionId : "") !== ((_target$sectionId = target.sectionId) !== null && _target$sectionId !== void 0 ? _target$sectionId : "")) return;
2665
+ if ((source.parentId ?? "") !== (target.parentId ?? "")) return;
2666
+ if ((source.sectionId ?? "") !== (target.sectionId ?? "")) return;
2681
2667
  if (source.canReorder === false || target.canReorder === false) return;
2682
2668
  onReorder === null || onReorder === void 0 || onReorder(source.id, target.id);
2683
2669
  };
@@ -2835,12 +2821,11 @@ function ObjectListPanelBase(props) {
2835
2821
  });
2836
2822
  }
2837
2823
  function ObjectListRow(props) {
2838
- var _item$level;
2839
2824
  const { item, selected, labels, showLock, showName, showVisible, draggable, dragging, onSelect, onToggleExpanded, onToggleVisible, onToggleSelectable, onCommitName, onDragStart, onDragEnd, onDrop } = props;
2840
2825
  const [draftName, setDraftName] = useState(item.name);
2841
2826
  const skipCommitOnBlurRef = useRef(false);
2842
2827
  const disabled = item.disabled === true;
2843
- const level = (_item$level = item.level) !== null && _item$level !== void 0 ? _item$level : 0;
2828
+ const level = item.level ?? 0;
2844
2829
  const locked = item.selectable === false;
2845
2830
  useEffect(() => {
2846
2831
  setDraftName(item.name);
@@ -2951,15 +2936,13 @@ function ObjectListRow(props) {
2951
2936
  });
2952
2937
  }
2953
2938
  function ObjectDetailsEditor(props) {
2954
- var _item$name, _item$description2;
2955
2939
  const { item, labels, showName, showDescription, onCommitName, onCommitDescription } = props;
2956
- const [draftName, setDraftName] = useState((_item$name = item === null || item === void 0 ? void 0 : item.name) !== null && _item$name !== void 0 ? _item$name : "");
2957
- const [draftDescription, setDraftDescription] = useState((_item$description2 = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description2 !== void 0 ? _item$description2 : "");
2940
+ const [draftName, setDraftName] = useState((item === null || item === void 0 ? void 0 : item.name) ?? "");
2941
+ const [draftDescription, setDraftDescription] = useState((item === null || item === void 0 ? void 0 : item.description) ?? "");
2958
2942
  const disabled = (item === null || item === void 0 ? void 0 : item.disabled) === true;
2959
2943
  useEffect(() => {
2960
- var _item$name2, _item$description3;
2961
- setDraftName((_item$name2 = item === null || item === void 0 ? void 0 : item.name) !== null && _item$name2 !== void 0 ? _item$name2 : "");
2962
- setDraftDescription((_item$description3 = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description3 !== void 0 ? _item$description3 : "");
2944
+ setDraftName((item === null || item === void 0 ? void 0 : item.name) ?? "");
2945
+ setDraftDescription((item === null || item === void 0 ? void 0 : item.description) ?? "");
2963
2946
  }, [
2964
2947
  item === null || item === void 0 ? void 0 : item.description,
2965
2948
  item === null || item === void 0 ? void 0 : item.id,
@@ -3007,8 +2990,7 @@ function ObjectDetailsEditor(props) {
3007
2990
  "aria-label": labels.description,
3008
2991
  onChange: (event) => setDraftDescription(event.currentTarget.value),
3009
2992
  onBlur: () => {
3010
- var _item$description4;
3011
- if (!disabled && normalizeText(draftDescription) !== ((_item$description4 = item.description) !== null && _item$description4 !== void 0 ? _item$description4 : "")) onCommitDescription(draftDescription);
2993
+ if (!disabled && normalizeText(draftDescription) !== (item.description ?? "")) onCommitDescription(draftDescription);
3012
2994
  }
3013
2995
  })]
3014
2996
  })