@ynput/ayon-frontend-shared 0.2.23 → 0.2.24

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

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../_virtual/jsx-runtime.cjs.js");
+const React = require("react");
+const LinksManager_styled = require("./LinksManager.styled.cjs.js");
+const lodash = require("lodash");
+require("react-toastify");
+const getEntityId = require("../../util/getEntityId.cjs.js");
+require("../../util/pubsub.cjs.js");
+const useUpdateLinks = require("./hooks/useUpdateLinks.cjs.js");
+const AddNewLinks = require("./AddNewLinks.cjs.js");
+const EntityPickerDialog = require("../../containers/EntityPickerDialog/EntityPickerDialog.cjs.js");
+const LinkManagerItem = require("./LinkManagerItem.cjs.js");
+const LinksManager = ({
+  linkTypeLabel,
+  direction,
+  links = [],
+  projectName,
+  entityId,
+  entityType,
+  linkType,
+  targetEntityType,
+  folderId,
+  selectedEntityIds = [],
+  onClose,
+  onEntityClick
+}) => {
+  const linksUpdater = useUpdateLinks({
+    projectName,
+    direction,
+    entityId,
+    entityType,
+    targetEntityType,
+    linkType
+  });
+  const [searchType, setSearchType] = React.useState(null);
+  const handleRemove = (e, link) => {
+    e.stopPropagation();
+    linksUpdater.remove([
+      {
+        id: link.linkId,
+        target: { entityId: link.entityId, entityType: link.entityType }
+      }
+    ]);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(LinksManager_styled.Container, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(LinksManager_styled.Header, { children: [
+        lodash.upperFirst(linkTypeLabel),
+        " links (",
+        direction,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(LinksManager_styled.LinksList, { children: [
+        links == null ? void 0 : links.map((link) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          LinkManagerItem.LinkManagerItem,
+          {
+            link,
+            isSelected: selectedEntityIds.includes(link.entityId),
+            onEntityClick,
+            onRemove: handleRemove
+          },
+          link.linkId
+        )),
+        links.length === 0 && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(LinksManager_styled.SubHeader, { children: "No links yet" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        AddNewLinks,
+        {
+          targetEntityType,
+          projectName,
+          onClose,
+          onAdd: (id) => linksUpdater.add([{ targetEntityId: id, linkId: getEntityId.getEntityId() }]),
+          onSearchTypeChange: setSearchType
+        }
+      )
+    ] }),
+    searchType === "picker" && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      EntityPickerDialog.EntityPickerDialog,
+      {
+        onClose: () => setSearchType(null),
+        projectName,
+        entityType: targetEntityType,
+        initialSelection: folderId ? { folder: { [folderId]: true } } : void 0,
+        onSubmit: (s) => linksUpdater.add(s.map((id) => ({ targetEntityId: id, linkId: getEntityId.getEntityId() }))),
+        isMultiSelect: true
+      }
+    )
+  ] });
+};
+exports.LinksManager = LinksManager;
+//# sourceMappingURL=LinksManager.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinksManager.cjs.js","sources":["../../../../../src/components/LinksManager/LinksManager.tsx"],"sourcesContent":["import { FC, useState } from 'react'\nimport * as Styled from './LinksManager.styled'\nimport { getEntityId } from '@shared/util'\nimport useUpdateLinks from './hooks/useUpdateLinks'\nimport AddNewLinks, { LinkSearchType } from './AddNewLinks'\nimport { EntityPickerDialog, PickerEntityType } from '@shared/containers/EntityPickerDialog'\nimport { upperFirst } from 'lodash'\nimport { LinkManagerItem } from './LinkManagerItem'\n\nexport type LinkEntity = {\n  linkId: string\n  entityId: string\n  label: string\n  parents: string[]\n  entityType: string\n  icon: string\n}\n\nexport interface LinksManagerProps {\n  linkTypeLabel: string\n  direction?: 'in' | 'out'\n  links: LinkEntity[] // used to display basic info about the links entity\n  projectName: string\n  entityId: string // the entity id of the entity that has these links\n  linkType: string // full link type e.g. workflow|task|task\n  entityType: string // the entity type of the entity that has these links\n  targetEntityType: string // the entity type of the out links\n  folderId?: string | null // the folder selected or the parent folder of the selected (used in EntityPickerDialog)\n  selectedEntityIds?: string[] // list of selected entity IDs to highlight\n  onClose?: () => void\n  onEntityClick?: (entityId: string, entityType: string) => void // a click on an linked entity\n}\n\nexport const LinksManager: FC<LinksManagerProps> = ({\n  linkTypeLabel,\n  direction,\n  links = [],\n  projectName,\n  entityId,\n  entityType,\n  linkType,\n  targetEntityType,\n  folderId,\n  selectedEntityIds = [],\n  onClose,\n  onEntityClick,\n}) => {\n  const linksUpdater = useUpdateLinks({\n    projectName,\n    direction,\n    entityId,\n    entityType,\n    targetEntityType,\n    linkType,\n  })\n\n  const [searchType, setSearchType] = useState<LinkSearchType>(null)\n\n  const handleRemove = (e: React.MouseEvent<HTMLButtonElement>, link: LinkEntity) => {\n    // prevent clicks higher up\n    e.stopPropagation()\n\n    linksUpdater.remove([\n      {\n        id: link.linkId,\n        target: { entityId: link.entityId, entityType: link.entityType },\n      },\n    ])\n  }\n\n  return (\n    <>\n      <Styled.Container>\n        <Styled.Header>\n          {upperFirst(linkTypeLabel)} links ({direction})\n        </Styled.Header>\n        <Styled.LinksList>\n          {links?.map((link) => (\n            <LinkManagerItem\n              key={link.linkId}\n              link={link}\n              isSelected={selectedEntityIds.includes(link.entityId)}\n              onEntityClick={onEntityClick}\n              onRemove={handleRemove}\n            />\n          ))}\n          {links.length === 0 && <Styled.SubHeader>No links yet</Styled.SubHeader>}\n        </Styled.LinksList>\n        <AddNewLinks\n          targetEntityType={targetEntityType}\n          projectName={projectName}\n          onClose={onClose}\n          onAdd={(id) => linksUpdater.add([{ targetEntityId: id, linkId: getEntityId() }])}\n          onSearchTypeChange={setSearchType}\n        />\n      </Styled.Container>\n      {searchType === 'picker' && (\n        <EntityPickerDialog\n          onClose={() => setSearchType(null)}\n          projectName={projectName}\n          entityType={targetEntityType as PickerEntityType} // the type of entity to pick\n          initialSelection={folderId ? { folder: { [folderId]: true } } : undefined} // preselect current folder\n          onSubmit={(s) =>\n            linksUpdater.add(s.map((id) => ({ targetEntityId: id, linkId: getEntityId() })))\n          }\n          isMultiSelect\n        />\n      )}\n    </>\n  )\n}\n"],"names":["useState","jsxs","Fragment","Styled.Container","Styled.Header","upperFirst","Styled.LinksList","jsx","LinkManagerItem","Styled.SubHeader","getEntityId","EntityPickerDialog"],"mappings":";;;;;;;;;;;;;AAiCO,MAAM,eAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA,QAAQ,CAAC;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,eAAe;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,CAAC,YAAY,aAAa,IAAIA,MAAAA,SAAyB,IAAI;AAE3D,QAAA,eAAe,CAAC,GAAwC,SAAqB;AAEjF,MAAE,gBAAgB;AAElB,iBAAa,OAAO;AAAA,MAClB;AAAA,QACE,IAAI,KAAK;AAAA,QACT,QAAQ,EAAE,UAAU,KAAK,UAAU,YAAY,KAAK,WAAW;AAAA,MAAA;AAAA,IACjE,CACD;AAAA,EACH;AAEA,SAEIC,2BAAA,kBAAA,KAAAC,uCAAA,EAAA,UAAA;AAAA,IAACD,kDAAAE,oBAAAA,WAAA,EACC,UAAA;AAAA,MAACF,kDAAAG,oBAAAA,QAAA,EACE,UAAA;AAAA,QAAAC,OAAAA,WAAW,aAAa;AAAA,QAAE;AAAA,QAAS;AAAA,QAAU;AAAA,MAAA,GAChD;AAAA,MACAJ,kDAACK,oBAAAA,WAAA,EACE,UAAA;AAAA,QAAO,+BAAA,IAAI,CAAC,SACXC,2BAAA,kBAAA;AAAA,UAACC,gBAAA;AAAA,UAAA;AAAA,YAEC;AAAA,YACA,YAAY,kBAAkB,SAAS,KAAK,QAAQ;AAAA,YACpD;AAAA,YACA,UAAU;AAAA,UAAA;AAAA,UAJL,KAAK;AAAA,QAAA;AAAA,QAOb,MAAM,WAAW,sDAAMC,oBAAAA,WAAA,EAAiB,UAAY,eAAA,CAAA;AAAA,MAAA,GACvD;AAAA,MACAF,2BAAA,kBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO,CAAC,OAAO,aAAa,IAAI,CAAC,EAAE,gBAAgB,IAAI,QAAQG,YAAY,YAAA,EAAG,CAAA,CAAC;AAAA,UAC/E,oBAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,IACtB,GACF;AAAA,IACC,eAAe,YACdH,2BAAA,kBAAA;AAAA,MAACI,mBAAA;AAAA,MAAA;AAAA,QACC,SAAS,MAAM,cAAc,IAAI;AAAA,QACjC;AAAA,QACA,YAAY;AAAA,QACZ,kBAAkB,WAAW,EAAE,QAAQ,EAAE,CAAC,QAAQ,GAAG,KAAK,EAAA,IAAM;AAAA,QAChE,UAAU,CAAC,MACT,aAAa,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,gBAAgB,IAAI,QAAQD,YAAAA,YAAY,EAAA,EAAI,CAAC;AAAA,QAEjF,eAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EACf,GAEJ;AAEJ;;"}

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

@@ -0,0 +1,92 @@
+import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
+import { useState } from "react";
+import { Container, Header, LinksList, SubHeader } from "./LinksManager.styled.es.js";
+import { upperFirst } from "lodash";
+import "react-toastify";
+import { getEntityId } from "../../util/getEntityId.es.js";
+import "../../util/pubsub.es.js";
+import useUpdateLinks from "./hooks/useUpdateLinks.es.js";
+import AddNewLinks from "./AddNewLinks.es.js";
+import { EntityPickerDialog } from "../../containers/EntityPickerDialog/EntityPickerDialog.es.js";
+import { LinkManagerItem } from "./LinkManagerItem.es.js";
+const LinksManager = ({
+  linkTypeLabel,
+  direction,
+  links = [],
+  projectName,
+  entityId,
+  entityType,
+  linkType,
+  targetEntityType,
+  folderId,
+  selectedEntityIds = [],
+  onClose,
+  onEntityClick
+}) => {
+  const linksUpdater = useUpdateLinks({
+    projectName,
+    direction,
+    entityId,
+    entityType,
+    targetEntityType,
+    linkType
+  });
+  const [searchType, setSearchType] = useState(null);
+  const handleRemove = (e, link) => {
+    e.stopPropagation();
+    linksUpdater.remove([
+      {
+        id: link.linkId,
+        target: { entityId: link.entityId, entityType: link.entityType }
+      }
+    ]);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Header, { children: [
+        upperFirst(linkTypeLabel),
+        " links (",
+        direction,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(LinksList, { children: [
+        links == null ? void 0 : links.map((link) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          LinkManagerItem,
+          {
+            link,
+            isSelected: selectedEntityIds.includes(link.entityId),
+            onEntityClick,
+            onRemove: handleRemove
+          },
+          link.linkId
+        )),
+        links.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(SubHeader, { children: "No links yet" })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        AddNewLinks,
+        {
+          targetEntityType,
+          projectName,
+          onClose,
+          onAdd: (id) => linksUpdater.add([{ targetEntityId: id, linkId: getEntityId() }]),
+          onSearchTypeChange: setSearchType
+        }
+      )
+    ] }),
+    searchType === "picker" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      EntityPickerDialog,
+      {
+        onClose: () => setSearchType(null),
+        projectName,
+        entityType: targetEntityType,
+        initialSelection: folderId ? { folder: { [folderId]: true } } : void 0,
+        onSubmit: (s) => linksUpdater.add(s.map((id) => ({ targetEntityId: id, linkId: getEntityId() }))),
+        isMultiSelect: true
+      }
+    )
+  ] });
+};
+export {
+  LinksManager
+};
+//# sourceMappingURL=LinksManager.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinksManager.es.js","sources":["../../../../../src/components/LinksManager/LinksManager.tsx"],"sourcesContent":["import { FC, useState } from 'react'\nimport * as Styled from './LinksManager.styled'\nimport { getEntityId } from '@shared/util'\nimport useUpdateLinks from './hooks/useUpdateLinks'\nimport AddNewLinks, { LinkSearchType } from './AddNewLinks'\nimport { EntityPickerDialog, PickerEntityType } from '@shared/containers/EntityPickerDialog'\nimport { upperFirst } from 'lodash'\nimport { LinkManagerItem } from './LinkManagerItem'\n\nexport type LinkEntity = {\n  linkId: string\n  entityId: string\n  label: string\n  parents: string[]\n  entityType: string\n  icon: string\n}\n\nexport interface LinksManagerProps {\n  linkTypeLabel: string\n  direction?: 'in' | 'out'\n  links: LinkEntity[] // used to display basic info about the links entity\n  projectName: string\n  entityId: string // the entity id of the entity that has these links\n  linkType: string // full link type e.g. workflow|task|task\n  entityType: string // the entity type of the entity that has these links\n  targetEntityType: string // the entity type of the out links\n  folderId?: string | null // the folder selected or the parent folder of the selected (used in EntityPickerDialog)\n  selectedEntityIds?: string[] // list of selected entity IDs to highlight\n  onClose?: () => void\n  onEntityClick?: (entityId: string, entityType: string) => void // a click on an linked entity\n}\n\nexport const LinksManager: FC<LinksManagerProps> = ({\n  linkTypeLabel,\n  direction,\n  links = [],\n  projectName,\n  entityId,\n  entityType,\n  linkType,\n  targetEntityType,\n  folderId,\n  selectedEntityIds = [],\n  onClose,\n  onEntityClick,\n}) => {\n  const linksUpdater = useUpdateLinks({\n    projectName,\n    direction,\n    entityId,\n    entityType,\n    targetEntityType,\n    linkType,\n  })\n\n  const [searchType, setSearchType] = useState<LinkSearchType>(null)\n\n  const handleRemove = (e: React.MouseEvent<HTMLButtonElement>, link: LinkEntity) => {\n    // prevent clicks higher up\n    e.stopPropagation()\n\n    linksUpdater.remove([\n      {\n        id: link.linkId,\n        target: { entityId: link.entityId, entityType: link.entityType },\n      },\n    ])\n  }\n\n  return (\n    <>\n      <Styled.Container>\n        <Styled.Header>\n          {upperFirst(linkTypeLabel)} links ({direction})\n        </Styled.Header>\n        <Styled.LinksList>\n          {links?.map((link) => (\n            <LinkManagerItem\n              key={link.linkId}\n              link={link}\n              isSelected={selectedEntityIds.includes(link.entityId)}\n              onEntityClick={onEntityClick}\n              onRemove={handleRemove}\n            />\n          ))}\n          {links.length === 0 && <Styled.SubHeader>No links yet</Styled.SubHeader>}\n        </Styled.LinksList>\n        <AddNewLinks\n          targetEntityType={targetEntityType}\n          projectName={projectName}\n          onClose={onClose}\n          onAdd={(id) => linksUpdater.add([{ targetEntityId: id, linkId: getEntityId() }])}\n          onSearchTypeChange={setSearchType}\n        />\n      </Styled.Container>\n      {searchType === 'picker' && (\n        <EntityPickerDialog\n          onClose={() => setSearchType(null)}\n          projectName={projectName}\n          entityType={targetEntityType as PickerEntityType} // the type of entity to pick\n          initialSelection={folderId ? { folder: { [folderId]: true } } : undefined} // preselect current folder\n          onSubmit={(s) =>\n            linksUpdater.add(s.map((id) => ({ targetEntityId: id, linkId: getEntityId() })))\n          }\n          isMultiSelect\n        />\n      )}\n    </>\n  )\n}\n"],"names":["jsxs","Fragment","Styled.Container","Styled.Header","Styled.LinksList","jsx","Styled.SubHeader"],"mappings":";;;;;;;;;;;AAiCO,MAAM,eAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA,QAAQ,CAAC;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,eAAe;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,CAAC,YAAY,aAAa,IAAI,SAAyB,IAAI;AAE3D,QAAA,eAAe,CAAC,GAAwC,SAAqB;AAEjF,MAAE,gBAAgB;AAElB,iBAAa,OAAO;AAAA,MAClB;AAAA,QACE,IAAI,KAAK;AAAA,QACT,QAAQ,EAAE,UAAU,KAAK,UAAU,YAAY,KAAK,WAAW;AAAA,MAAA;AAAA,IACjE,CACD;AAAA,EACH;AAEA,SAEIA,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAACD,uCAAAE,WAAA,EACC,UAAA;AAAA,MAACF,uCAAAG,QAAA,EACE,UAAA;AAAA,QAAA,WAAW,aAAa;AAAA,QAAE;AAAA,QAAS;AAAA,QAAU;AAAA,MAAA,GAChD;AAAA,MACAH,uCAACI,WAAA,EACE,UAAA;AAAA,QAAO,+BAAA,IAAI,CAAC,SACXC,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACA,YAAY,kBAAkB,SAAS,KAAK,QAAQ;AAAA,YACpD;AAAA,YACA,UAAU;AAAA,UAAA;AAAA,UAJL,KAAK;AAAA,QAAA;AAAA,QAOb,MAAM,WAAW,2CAAMC,WAAA,EAAiB,UAAY,eAAA,CAAA;AAAA,MAAA,GACvD;AAAA,MACAD,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO,CAAC,OAAO,aAAa,IAAI,CAAC,EAAE,gBAAgB,IAAI,QAAQ,YAAY,EAAG,CAAA,CAAC;AAAA,UAC/E,oBAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,IACtB,GACF;AAAA,IACC,eAAe,YACdA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,MAAM,cAAc,IAAI;AAAA,QACjC;AAAA,QACA,YAAY;AAAA,QACZ,kBAAkB,WAAW,EAAE,QAAQ,EAAE,CAAC,QAAQ,GAAG,KAAK,EAAA,IAAM;AAAA,QAChE,UAAU,CAAC,MACT,aAAa,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,gBAAgB,IAAI,QAAQ,YAAY,EAAA,EAAI,CAAC;AAAA,QAEjF,eAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EACf,GAEJ;AAEJ;"}

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

@@ -0,0 +1,250 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const styled = require("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(ayonReactComponents.Button)`
+  min-width: 110px;
+  flex: 1;
+  width: 100%;
+`;
+const SearchInput = styled(ayonReactComponents.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);
+  }
+`;
+exports.AddLinksContainer = AddLinksContainer;
+exports.Container = Container;
+exports.Error = Error;
+exports.Header = Header;
+exports.LinkItem = LinkItem;
+exports.LinksList = LinksList;
+exports.PickerButton = PickerButton;
+exports.Search = Search;
+exports.SearchButtons = SearchButtons;
+exports.SearchInput = SearchInput;
+exports.SearchItem = SearchItem;
+exports.SearchItems = SearchItems;
+exports.SubHeader = SubHeader;
+//# sourceMappingURL=LinksManager.styled.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinksManager.styled.cjs.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":["Button","InputText"],"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,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAM5B,MAAA,cAAc,OAAOC,6BAAS;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;;;;;;;;;;;;;;"}