@ynput/ayon-frontend-shared 0.2.23 → 0.2.24

package/dist/shared/src/components/LinksManager/LinksManager.styled.es.js

@@ -0,0 +1,250 @@
+import { Button, InputText } from "@ynput/ayon-react-components";
+import styled from "styled-components";
+const Container = styled.div`
+  padding: var(--padding-m);
+  background-color: var(--md-sys-color-surface-container-high);
+  border-radius: var(--border-radius-l);
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* Use height instead of max-height to enforce constraints */
+  overflow: hidden;
+  flex-grow: 1;
+  min-height: 0; /* Allow flex child to shrink below content size */
+`;
+const Header = styled.h4`
+  margin: 0;
+  padding: 0;
+  padding-bottom: var(--padding-s);
+  flex-shrink: 0;
+`;
+const SubHeader = styled.h5`
+  margin: 0;
+  padding: 0;
+  padding-bottom: var(--padding-s);
+  flex-shrink: 0;
+
+  color: var(--md-sys-color-outline);
+`;
+const LinksList = styled.ul`
+  /* reset any defaults */
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-small);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+`;
+const LinkItem = styled.li`
+  /* reset any defaults */
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-small);
+
+  /* card styling */
+  background-color: var(--md-sys-color-surface-container-high);
+  border-radius: var(--border-radius-m);
+  padding: 4px 4px;
+
+  &.clickable {
+    cursor: pointer;
+    &:hover {
+      background-color: var(--md-sys-color-surface-container-high-hover);
+    }
+  }
+
+  &.selected {
+    background-color: var(--md-sys-color-primary-container);
+    &:hover {
+      background-color: var(--md-sys-color-primary-container-hover);
+    }
+  }
+
+  .title {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--base-gap-small);
+    flex: 1;
+  }
+
+  .path {
+    color: var(--md-sys-color-outline);
+  }
+
+  .label {
+    font-weight: bold;
+  }
+
+  .remove {
+    padding: 2px;
+
+    .icon:not(:hover) {
+      color: var(--md-sys-color-outline);
+    }
+  }
+`;
+const AddLinksContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  /* hack for search border cutoff */
+  padding: 2px;
+  margin: -2px;
+  padding-top: var(--padding-m);
+  flex-shrink: 0; /* Don't shrink this section */
+  min-height: 0; /* Allow internal scrolling */
+  overflow: hidden; /* Prevent this section from expanding beyond bounds */
+
+  /* Set a reasonable max-height that allows for search functionality */
+  max-height: 250px;
+`;
+const SearchButtons = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--base-gap-small);
+`;
+const Search = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-small);
+  padding-top: var(--padding-s);
+
+  .input-search {
+    position: absolute;
+    left: 4px;
+  }
+`;
+const PickerButton = styled(Button)`
+  min-width: 110px;
+  flex: 1;
+  width: 100%;
+`;
+const SearchInput = styled(InputText)`
+  flex: 1;
+  border: none;
+  background-color: var(--md-sys-color-surface-container);
+  padding-left: 28px;
+  width: 100%;
+  min-width: 224px;
+`;
+const Error = styled.div`
+  color: var(--md-sys-color-error);
+  margin-top: var(--base-gap-small);
+`;
+const SearchItems = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
+  padding: var(--padding-m) 0;
+  flex: 1; /* Take available space instead of height: 100% */
+  min-height: 0; /* Allow shrinking */
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-small);
+`;
+const SearchItem = styled.li`
+  padding: var(--padding-s);
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-small);
+  border-radius: var(--border-radius-m);
+  cursor: pointer;
+  overflow: hidden;
+  min-height: min-content;
+
+  &:hover,
+  &:focus,
+  &.selected {
+    background-color: var(--md-sys-color-surface-container-high-hover);
+  }
+
+  &.loading {
+    cursor: default;
+    opacity: 0.6;
+
+    .icon,
+    .label,
+    .type {
+      background-color: var(--md-sys-color-outline);
+      color: transparent;
+      border-radius: var(--border-radius-s);
+      animation: shimmer 1.5s infinite;
+    }
+
+    .icon {
+      width: 16px;
+      height: 16px;
+    }
+
+    .label {
+      height: 16px;
+      flex: 1;
+    }
+
+    .type {
+      width: 60px;
+      height: 14px;
+    }
+  }
+
+  @keyframes shimmer {
+    0% {
+      opacity: 0.6;
+    }
+    50% {
+      opacity: 0.3;
+    }
+    100% {
+      opacity: 0.6;
+    }
+  }
+
+  .icon {
+    flex-shrink: 0;
+  }
+
+  .label {
+    flex: 1;
+    display: flex;
+    column-gap: var(--base-gap-small);
+    flex-wrap: wrap;
+
+    & > * {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .type {
+    margin-left: 8px;
+    color: var(--md-sys-color-outline);
+  }
+`;
+export {
+  AddLinksContainer,
+  Container,
+  Error,
+  Header,
+  LinkItem,
+  LinksList,
+  PickerButton,
+  Search,
+  SearchButtons,
+  SearchInput,
+  SearchItem,
+  SearchItems,
+  SubHeader
+};
+//# sourceMappingURL=LinksManager.styled.es.js.map

package/dist/shared/src/components/LinksManager/LinksManager.styled.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinksManager.styled.es.js","sources":["../../../../../src/components/LinksManager/LinksManager.styled.ts"],"sourcesContent":["import { Button, InputText } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const Container = styled.div`\n  padding: var(--padding-m);\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-l);\n  display: flex;\n  flex-direction: column;\n  height: 100%; /* Use height instead of max-height to enforce constraints */\n  overflow: hidden;\n  flex-grow: 1;\n  min-height: 0; /* Allow flex child to shrink below content size */\n`\n\nexport const Header = styled.h4`\n  margin: 0;\n  padding: 0;\n  padding-bottom: var(--padding-s);\n  flex-shrink: 0;\n`\n\nexport const SubHeader = styled.h5`\n  margin: 0;\n  padding: 0;\n  padding-bottom: var(--padding-s);\n  flex-shrink: 0;\n\n  color: var(--md-sys-color-outline);\n`\n\nexport const LinksList = styled.ul`\n  /* reset any defaults */\n  list-style: none;\n  padding: 0;\n  margin: 0;\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n`\n\nexport const LinkItem = styled.li`\n  /* reset any defaults */\n  list-style: none;\n  padding: 0;\n  margin: 0;\n\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  /* card styling */\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  padding: 4px 4px;\n\n  &.clickable {\n    cursor: pointer;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-high-hover);\n    }\n  }\n\n  &.selected {\n    background-color: var(--md-sys-color-primary-container);\n    &:hover {\n      background-color: var(--md-sys-color-primary-container-hover);\n    }\n  }\n\n  .title {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--base-gap-small);\n    flex: 1;\n  }\n\n  .path {\n    color: var(--md-sys-color-outline);\n  }\n\n  .label {\n    font-weight: bold;\n  }\n\n  .remove {\n    padding: 2px;\n\n    .icon:not(:hover) {\n      color: var(--md-sys-color-outline);\n    }\n  }\n`\n\nexport const AddLinksContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  /* hack for search border cutoff */\n  padding: 2px;\n  margin: -2px;\n  padding-top: var(--padding-m);\n  flex-shrink: 0; /* Don't shrink this section */\n  min-height: 0; /* Allow internal scrolling */\n  overflow: hidden; /* Prevent this section from expanding beyond bounds */\n\n  /* Set a reasonable max-height that allows for search functionality */\n  max-height: 250px;\n`\n\n// wraps the picker and search input\nexport const SearchButtons = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--base-gap-small);\n`\n\nexport const Search = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  padding-top: var(--padding-s);\n\n  .input-search {\n    position: absolute;\n    left: 4px;\n  }\n`\n\nexport const PickerButton = styled(Button)`\n  min-width: 110px;\n  flex: 1;\n  width: 100%;\n`\n\nexport const SearchInput = styled(InputText)`\n  flex: 1;\n  border: none;\n  background-color: var(--md-sys-color-surface-container);\n  padding-left: 28px;\n  width: 100%;\n  min-width: 224px;\n`\n\nexport const Error = styled.div`\n  color: var(--md-sys-color-error);\n  margin-top: var(--base-gap-small);\n`\n\nexport const SearchItems = styled.ul`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  overflow-y: auto;\n  padding: var(--padding-m) 0;\n  flex: 1; /* Take available space instead of height: 100% */\n  min-height: 0; /* Allow shrinking */\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n`\n\nexport const SearchItem = styled.li`\n  padding: var(--padding-s);\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  border-radius: var(--border-radius-m);\n  cursor: pointer;\n  overflow: hidden;\n  min-height: min-content;\n\n  &:hover,\n  &:focus,\n  &.selected {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  &.loading {\n    cursor: default;\n    opacity: 0.6;\n\n    .icon,\n    .label,\n    .type {\n      background-color: var(--md-sys-color-outline);\n      color: transparent;\n      border-radius: var(--border-radius-s);\n      animation: shimmer 1.5s infinite;\n    }\n\n    .icon {\n      width: 16px;\n      height: 16px;\n    }\n\n    .label {\n      height: 16px;\n      flex: 1;\n    }\n\n    .type {\n      width: 60px;\n      height: 14px;\n    }\n  }\n\n  @keyframes shimmer {\n    0% {\n      opacity: 0.6;\n    }\n    50% {\n      opacity: 0.3;\n    }\n    100% {\n      opacity: 0.6;\n    }\n  }\n\n  .icon {\n    flex-shrink: 0;\n  }\n\n  .label {\n    flex: 1;\n    display: flex;\n    column-gap: var(--base-gap-small);\n    flex-wrap: wrap;\n\n    & > * {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  .type {\n    margin-left: 8px;\n    color: var(--md-sys-color-outline);\n  }\n`\n"],"names":[],"mappings":";;AAGO,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYzB,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtB,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzB,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAczB,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsDxB,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBjC,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO7B,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAchB,MAAA,eAAe,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAM5B,MAAA,cAAc,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASpC,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAKrB,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3B,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/shared/src/components/LinksManager/LinksManagerDialog.cjs.js

@@ -0,0 +1,229 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../_virtual/jsx-runtime.cjs.js");
+const React = require("react");
+const styled = require("styled-components");
+const LinksManager = require("./LinksManager.cjs.js");
+require("@ynput/ayon-react-components");
+require("lodash");
+require("react-toastify");
+require("uuid");
+require("../../util/pubsub.cjs.js");
+require("../../api/base/client.cjs.js");
+require("../../api/generated/graphql.cjs.js");
+require("../../api/generated/graphqlLinks.cjs.js");
+require("../../api/generated/access.cjs.js");
+require("../../api/generated/actions.cjs.js");
+require("../../api/generated/activityFeed.cjs.js");
+require("../../api/generated/addons.cjs.js");
+require("../../api/generated/anatomy.cjs.js");
+require("../../api/generated/attributes.cjs.js");
+require("../../api/generated/authentication.cjs.js");
+require("../../api/generated/bundles.cjs.js");
+require("../../api/generated/configuration.cjs.js");
+require("../../api/generated/desktop.cjs.js");
+require("../../api/generated/entityLists.cjs.js");
+require("../../api/generated/events.cjs.js");
+require("../../api/generated/files.cjs.js");
+require("../../api/generated/folders.cjs.js");
+require("../../api/generated/inbox.cjs.js");
+require("../../api/generated/links.cjs.js");
+require("../../api/generated/market.cjs.js");
+require("../../api/generated/onboarding.cjs.js");
+require("../../api/generated/operations.cjs.js");
+require("../../api/generated/products.cjs.js");
+require("../../api/generated/projectDashboard.cjs.js");
+require("../../api/generated/projects.cjs.js");
+require("../../api/generated/reviewables.cjs.js");
+require("../../api/generated/services.cjs.js");
+require("../../api/generated/system.cjs.js");
+require("../../api/generated/tasks.cjs.js");
+require("../../api/generated/teams.cjs.js");
+require("../../api/generated/thumbnails.cjs.js");
+require("../../api/generated/uRIs.cjs.js");
+require("../../api/generated/users.cjs.js");
+require("../../api/generated/versions.cjs.js");
+require("../../api/generated/workfiles.cjs.js");
+require("../../api/generated/ynputCloud.cjs.js");
+require("../../api/generated/grouping.cjs.js");
+require("../../api/generated/views.cjs.js");
+require("../../api/queries/actions/getActions.cjs.js");
+require("../../api/queries/activities/getActivities.cjs.js");
+require("../../api/queries/activities/updateActivities.cjs.js");
+require("../../api/queries/activities/updateReaction.cjs.js");
+require("../../api/queries/activities/getMentions.cjs.js");
+require("../../api/queries/addons/getAddons.cjs.js");
+require("../../api/queries/addons/updateAddons.cjs.js");
+require("../../api/queries/attributes/getAttributes.cjs.js");
+require("../../api/queries/attributes/updateAttributes.cjs.js");
+require("../../api/queries/authentication/getAuthentication.cjs.js");
+require("../../api/queries/cloud/cloud.cjs.js");
+require("../../api/queries/entities/getEntity.cjs.js");
+require("../../api/queries/entities/getEntityPanel.cjs.js");
+require("../../api/queries/entities/updateEntity.cjs.js");
+require("../../api/queries/entityLists/getLists.cjs.js");
+require("../../api/queries/entityLists/updateLists.cjs.js");
+require("../../api/queries/entityLists/getListsAttributes.cjs.js");
+require("../../api/queries/entityLists/updateListsAttributes.cjs.js");
+require("../../api/queries/folders/getFolders.cjs.js");
+require("../../api/queries/grouping/getGrouping.cjs.js");
+require("../../api/queries/links/updateLinks.cjs.js");
+require("../../api/queries/links/getLinks.cjs.js");
+require("../../api/queries/links/getEntityLinks.cjs.js");
+require("../../api/queries/overview/getOverview.cjs.js");
+require("../../api/queries/overview/updateOverview.cjs.js");
+require("../../api/queries/permissions/getPermissions.cjs.js");
+require("../../api/queries/products/createProduct.cjs.js");
+require("../../api/queries/project/getProject.cjs.js");
+require("../../api/queries/project/updateProject.cjs.js");
+require("../../api/queries/review/getReview.cjs.js");
+require("../../api/queries/review/updateReview.cjs.js");
+require("../../api/queries/share/share.cjs.js");
+require("../../api/queries/system/getSystem.cjs.js");
+require("../../api/queries/userDashboard/getUserDashboard.cjs.js");
+require("../../api/queries/users/getUsers.cjs.js");
+require("../../api/queries/users/updateUsers.cjs.js");
+require("../../api/queries/versions/updateVersions.cjs.js");
+require("../../api/queries/views/getViews.cjs.js");
+require("../../api/queries/views/updateViews.cjs.js");
+require("../../api/queries/watchers/getWatchers.cjs.js");
+const LinksManager_styled = require("./LinksManager.styled.cjs.js");
+require("clsx");
+const StyledPopUp = styled.div`
+  position: fixed;
+  z-index: 310;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+`;
+const LinksManagerDialog = ({
+  disabled,
+  isEditing,
+  anchorId,
+  onClose,
+  ...props
+}) => {
+  const popupRef = React.useRef(null);
+  const [position, setPosition] = React.useState(null);
+  const [maxWidth, setMaxWidth] = React.useState(void 0);
+  const [maxHeight, setMaxHeight] = React.useState(void 0);
+  const anchorElement = document.getElementById(anchorId);
+  const tableContainer = anchorElement == null ? void 0 : anchorElement.closest(".table-container");
+  const updatePosition = () => {
+    if (!isEditing) return;
+    if (!anchorElement || !tableContainer) {
+      setPosition({
+        top: window.innerHeight / 2,
+        left: window.innerWidth / 2,
+        showAbove: false
+      });
+      setMaxWidth(void 0);
+      setMaxHeight(void 0);
+      return;
+    }
+    const cellRect = anchorElement.getBoundingClientRect();
+    const containerRect = tableContainer.getBoundingClientRect();
+    const containerRight = containerRect.right;
+    const containerToRightOfScreen = window.innerWidth - containerRect.right;
+    const screenPadding = 24;
+    const minHeightThreshold = 250;
+    const minWidthThreshold = 400;
+    const maxMaxHeight = 600;
+    const screenWidth = window.innerWidth;
+    const screenHeight = window.innerHeight;
+    const spaceToRight = containerRight - cellRect.left;
+    let position2 = {};
+    let dialogWidth = minWidthThreshold;
+    if (spaceToRight < minWidthThreshold) {
+      const spaceToLeft = cellRect.right - screenPadding;
+      if (spaceToLeft >= minWidthThreshold) {
+        position2.right = Math.max(
+          screenWidth - cellRect.right,
+          screenPadding + containerToRightOfScreen
+        );
+      } else {
+        position2.left = screenPadding;
+        dialogWidth = screenWidth - 2 * screenPadding;
+      }
+    } else {
+      position2.left = cellRect.left;
+      dialogWidth = Math.max(minWidthThreshold, spaceToRight);
+    }
+    setMaxWidth(dialogWidth);
+    const spaceBelow = screenHeight - cellRect.bottom - screenPadding;
+    const spaceAbove = cellRect.top - screenPadding;
+    let top;
+    let showAbove = false;
+    let availableHeight;
+    if (spaceBelow < minHeightThreshold && spaceAbove > spaceBelow) {
+      showAbove = true;
+      top = cellRect.top - 4;
+      availableHeight = spaceAbove - 4;
+    } else {
+      top = cellRect.bottom + 4;
+      availableHeight = spaceBelow - 4;
+    }
+    setMaxHeight(Math.min(Math.max(200, availableHeight), maxMaxHeight));
+    setPosition({
+      top,
+      ...position2,
+      showAbove
+    });
+  };
+  React.useLayoutEffect(() => {
+    updatePosition();
+  }, [isEditing, anchorElement]);
+  React.useLayoutEffect(() => {
+    if (tableContainer) {
+      const resizeObserver = new ResizeObserver(() => {
+        updatePosition();
+      });
+      resizeObserver.observe(tableContainer);
+      return () => resizeObserver.disconnect();
+    }
+  }, [tableContainer, anchorElement]);
+  React.useLayoutEffect(() => {
+    const handleClickOutside = (event) => {
+      if (popupRef.current && !popupRef.current.contains(event.target) && anchorElement && !anchorElement.contains(event.target) && // check we are not clicking inside the EntityPickerDialog
+      !event.target.closest(".entity-picker-dialog") && // check we are not clicking on the dialog backdrop
+      !event.target.querySelector(".entity-picker-dialog")) {
+        onClose == null ? void 0 : onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [onClose, anchorElement]);
+  if (!isEditing) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    StyledPopUp,
+    {
+      ref: popupRef,
+      style: {
+        top: position == null ? void 0 : position.top,
+        left: position == null ? void 0 : position.left,
+        right: position == null ? void 0 : position.right,
+        ...(position == null ? void 0 : position.showAbove) && { transform: "translateY(-100%)" },
+        visibility: position ? "visible" : "hidden",
+        maxWidth: maxWidth ? `${maxWidth}px` : "none",
+        maxHeight: maxHeight ? `${maxHeight}px` : "none"
+      },
+      className: "links-widget-popup",
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          onClose == null ? void 0 : onClose();
+        }
+      },
+      children: disabled ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        LinksManager_styled.Container,
+        {
+          style: { color: "var(--md-sys-color-outline)" },
+          children: `${props.linkTypeLabel} ${props.direction} link is not of type ${props.entityType}`
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(LinksManager.LinksManager, { ...props, onClose })
+    }
+  );
+};
+exports.LinksManagerDialog = LinksManagerDialog;
+//# sourceMappingURL=LinksManagerDialog.cjs.js.map

package/dist/shared/src/components/LinksManager/LinksManagerDialog.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinksManagerDialog.cjs.js","sources":["../../../../../src/components/LinksManager/LinksManagerDialog.tsx"],"sourcesContent":["import { FC, useRef, useLayoutEffect, useState } from 'react'\nimport styled from 'styled-components'\nimport { LinksManager, LinksManagerProps } from '.'\nimport { Container } from './LinksManager.styled'\n\nconst StyledPopUp = styled.div`\n  position: fixed;\n  z-index: 310;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n`\n\ntype Position = {\n  top: number\n  left?: number\n  right?: number\n  showAbove?: boolean\n}\n\nexport interface LinksManagerDialogProps extends LinksManagerProps {\n  disabled?: boolean\n  isEditing: boolean\n  anchorId: string\n  onClose?: () => void\n}\n\nexport const LinksManagerDialog: FC<LinksManagerDialogProps> = ({\n  disabled,\n  isEditing,\n  anchorId,\n  onClose,\n  ...props\n}) => {\n  const popupRef = useRef<HTMLDivElement>(null)\n\n  const [position, setPosition] = useState<Position | null>(null)\n  const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined)\n  const [maxHeight, setMaxHeight] = useState<number | undefined>(undefined)\n\n  // get the cell element based on the cellId\n  const anchorElement = document.getElementById(anchorId)\n  const tableContainer = anchorElement?.closest('.table-container')\n\n  const updatePosition = () => {\n    if (!isEditing) return\n\n    if (!anchorElement || !tableContainer) {\n      // if the anchor element is not found, position in the center of the screen\n      setPosition({\n        top: window.innerHeight / 2,\n        left: window.innerWidth / 2,\n        showAbove: false,\n      })\n      setMaxWidth(undefined)\n      setMaxHeight(undefined)\n      return\n    }\n\n    const cellRect = anchorElement.getBoundingClientRect()\n\n    const containerRect = tableContainer.getBoundingClientRect()\n    const containerRight = containerRect.right\n    const containerToRightOfScreen = window.innerWidth - containerRect.right\n\n    const screenPadding = 24\n    const minHeightThreshold = 250\n    const minWidthThreshold = 400\n    const maxMaxHeight = 600\n    const screenWidth = window.innerWidth\n    const screenHeight = window.innerHeight\n\n    // Check if we have enough space to the right of the cell\n    const spaceToRight = containerRight - cellRect.left\n    let position: { left?: number; right?: number } = {}\n    let dialogWidth = minWidthThreshold\n\n    if (spaceToRight < minWidthThreshold) {\n      // Not enough space to the right, anchor to the right side of the cell\n      const spaceToLeft = cellRect.right - screenPadding\n      if (spaceToLeft >= minWidthThreshold) {\n        // Anchor to the right side of the cell\n        position.right = Math.max(\n          screenWidth - cellRect.right,\n          screenPadding + containerToRightOfScreen,\n        )\n      } else {\n        // Not enough space on either side, center and use available width\n        position.left = screenPadding\n        dialogWidth = screenWidth - 2 * screenPadding\n      }\n    } else {\n      // Enough space to the right, position normally\n      position.left = cellRect.left\n      dialogWidth = Math.max(minWidthThreshold, spaceToRight)\n    }\n\n    setMaxWidth(dialogWidth)\n\n    const spaceBelow = screenHeight - cellRect.bottom - screenPadding\n    const spaceAbove = cellRect.top - screenPadding\n    let top: number\n    let showAbove = false\n    let availableHeight: number\n\n    if (spaceBelow < minHeightThreshold && spaceAbove > spaceBelow) {\n      showAbove = true\n      top = cellRect.top - 4\n      availableHeight = spaceAbove - 4\n    } else {\n      top = cellRect.bottom + 4\n      availableHeight = spaceBelow - 4\n    }\n\n    // Set max height to prevent dialog from going off screen\n    setMaxHeight(Math.min(Math.max(200, availableHeight), maxMaxHeight)) // Minimum 200px height\n\n    setPosition({\n      top,\n      ...position,\n      showAbove,\n    })\n  }\n\n  useLayoutEffect(() => {\n    updatePosition()\n  }, [isEditing, anchorElement])\n\n  // watch for when the tableContainer width changes\n  useLayoutEffect(() => {\n    if (tableContainer) {\n      const resizeObserver = new ResizeObserver(() => {\n        updatePosition()\n      })\n      resizeObserver.observe(tableContainer)\n      return () => resizeObserver.disconnect()\n    }\n  }, [tableContainer, anchorElement])\n\n  // close the dialog when clicking outside of it\n  useLayoutEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        popupRef.current &&\n        !popupRef.current.contains(event.target as Node) &&\n        anchorElement &&\n        !anchorElement.contains(event.target as Node) &&\n        // check we are not clicking inside the EntityPickerDialog\n        !(event.target as HTMLElement).closest('.entity-picker-dialog') &&\n        // check we are not clicking on the dialog backdrop\n        !(event.target as HTMLElement).querySelector('.entity-picker-dialog')\n      ) {\n        onClose?.()\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [onClose, anchorElement])\n\n  if (!isEditing) return null\n  return (\n    <StyledPopUp\n      ref={popupRef}\n      style={{\n        top: position?.top,\n        left: position?.left,\n        right: position?.right,\n        ...(position?.showAbove && { transform: 'translateY(-100%)' }),\n        visibility: position ? 'visible' : 'hidden',\n        maxWidth: maxWidth ? `${maxWidth}px` : 'none',\n        maxHeight: maxHeight ? `${maxHeight}px` : 'none',\n      }}\n      className=\"links-widget-popup\"\n      onKeyDown={(e) => {\n        if (e.key === 'Escape') {\n          onClose?.()\n        }\n      }}\n    >\n      {disabled ? (\n        <Container\n          style={{ color: 'var(--md-sys-color-outline)' }}\n        >{`${props.linkTypeLabel} ${props.direction} link is not of type ${props.entityType}`}</Container>\n      ) : (\n        <LinksManager {...props} onClose={onClose} />\n      )}\n    </StyledPopUp>\n  )\n}\n"],"names":["useRef","useState","position","useLayoutEffect","jsx","Container","LinksManager"],"mappings":"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"}