@frontify/guideline-blocks-settings 0.31.5 → 0.32.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @frontify/guideline-blocks-settings
 
+## 0.32.0
+
+### Minor Changes
+
+- [#736](https://github.com/Frontify/brand-sdk/pull/736) [`2f7f30f`](https://github.com/Frontify/brand-sdk/commit/2f7f30f902f3c8ed3bacf5fa378014e148bb20aa) Thanks [@ragi96](https://github.com/ragi96)! - refactor(LinkSelector): Removed `appBridge` prop in favor of directly passing document handling functions: `getAllDocuments`, `getDocumentPagesByDocumentId`, and `getDocumentSectionsByDocumentPageId` for clearer API and enhanced modularity
+
+  Replace this:
+
+  ```jsx
+  <LinkSelector
+    url={url}
+    appBridge={appBridge}
+    onUrlChange={onUrlChange}
+    buttonSize={buttonSize ?? ButtonSize.Medium}
+  />
+  ```
+
+  with:
+
+  ```jsx
+  <LinkSelector
+    url={url}
+    onUrlChange={onUrlChange}
+    buttonSize={buttonSize ?? ButtonSize.Medium}
+    getAllDocuments={() => appBridge.getAllDocuments()}
+    getDocumentPagesByDocumentId={(documentId) =>
+      appBridge.getDocumentPagesByDocumentId(documentId)
+    }
+    getDocumentSectionsByDocumentPageId={(documentPageId) =>
+      appBridge.getDocumentSectionsByDocumentPageId(documentPageId)
+    }
+  />
+  ```
+
 ## 0.31.5
 
 ### Patch Changes

package/dist/components/Link/LinkInput.es.js

@@ -1,61 +1,63 @@
-import { jsxs as b, jsx as t } from "react/jsx-runtime";
-import { CheckboxState as l, FormControl as w, TooltipPosition as C, TextInput as S, ButtonSize as f, Checkbox as L } from "@frontify/fondue";
-import { isValidUrlOrEmpty as N } from "./utils/url.es.js";
-import { LinkSelector as O } from "./LinkSelector/LinkSelector.es.js";
-const z = ({
-  onUrlChange: i,
+import { jsxs as k, jsx as t } from "react/jsx-runtime";
+import { CheckboxState as m, FormControl as b, TooltipPosition as w, TextInput as S, ButtonSize as I, Checkbox as P } from "@frontify/fondue";
+import { isValidUrlOrEmpty as y } from "./utils/url.es.js";
+import { LinkSelector as C } from "./LinkSelector/LinkSelector.es.js";
+const O = ({
+  onUrlChange: c,
   onToggleTab: a,
-  isValidUrlOrEmpty: o,
-  appBridge: r,
-  clearable: c,
+  isValidUrlOrEmpty: i,
+  appBridge: o,
+  clearable: s,
   placeholder: d,
-  newTab: s,
-  openInNewTab: m,
+  newTab: r,
+  openInNewTab: u,
   url: e = "",
-  required: p,
-  info: n,
-  label: h,
-  buttonSize: u,
+  required: h,
+  info: l,
+  label: p,
+  buttonSize: g,
   hideInternalLinkButton: x
 }) => {
-  const v = o ? o(e) : N(e), k = s ?? (m ? l.Checked : l.Unchecked);
-  return /* @__PURE__ */ b("div", { "data-test-id": "link-input", children: [
+  const D = i ? i(e) : y(e), v = r ?? (u ? m.Checked : m.Unchecked);
+  return /* @__PURE__ */ k("div", { "data-test-id": "link-input", children: [
     /* @__PURE__ */ t(
-      w,
+      b,
       {
         label: {
-          children: h,
+          children: p,
           htmlFor: "url",
-          required: p,
-          tooltip: n ? { content: n, position: C.Top } : void 0
+          required: h,
+          tooltip: l ? { content: l, position: w.Top } : void 0
         },
         children: /* @__PURE__ */ t(
           S,
           {
             id: "url",
             value: e,
-            clearable: c,
-            onChange: i,
+            clearable: s,
+            onChange: c,
             placeholder: d ?? "https://example.com",
             focusOnMount: !0
           }
         )
       }
     ),
-    !v && /* @__PURE__ */ t("div", { className: "tw-text-text-negative tw-mt-1 tw-text-s", children: "Please enter a valid URL." }),
+    !D && /* @__PURE__ */ t("div", { className: "tw-text-text-negative tw-mt-1 tw-text-s", children: "Please enter a valid URL." }),
     !x && /* @__PURE__ */ t("div", { className: "tw-mt-3", children: /* @__PURE__ */ t(
-      O,
+      C,
       {
         url: e,
-        appBridge: r,
-        onUrlChange: i,
-        buttonSize: u ?? f.Medium
+        onUrlChange: c,
+        buttonSize: g ?? I.Medium,
+        getAllDocuments: () => o.getAllDocuments(),
+        getDocumentPagesByDocumentId: (n) => o.getDocumentPagesByDocumentId(n),
+        getDocumentSectionsByDocumentPageId: (n) => o.getDocumentSectionsByDocumentPageId(n)
       }
     ) }),
-    /* @__PURE__ */ t("div", { className: "tw-mt-3", children: /* @__PURE__ */ t(L, { value: "new-tab", label: "Open in new tab", state: k, onChange: a }) })
+    /* @__PURE__ */ t("div", { className: "tw-mt-3", children: /* @__PURE__ */ t(P, { value: "new-tab", label: "Open in new tab", state: v, onChange: a }) })
   ] });
 };
 export {
-  z as LinkInput
+  O as LinkInput
 };
 //# sourceMappingURL=LinkInput.es.js.map

package/dist/components/Link/LinkInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkInput.es.js","sources":["../../../src/components/Link/LinkInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { AppBridgeBlock, AppBridgeTheme } from '@frontify/app-bridge';\nimport { ButtonSize, Checkbox, CheckboxState, FormControl, TextInput, TooltipPosition } from '@frontify/fondue';\nimport { LinkSelector } from './LinkSelector';\nimport { isValidUrlOrEmpty as internalIsValidUrlOrEmpty } from './utils';\n\ntype LinkInputProps = {\n    url?: string;\n    info?: string;\n    label?: string;\n    required?: boolean;\n    newTab?: CheckboxState;\n    openInNewTab?: boolean;\n    onUrlChange?: (value: string) => void;\n    onToggleTab?: (checked: boolean) => void;\n    isValidUrlOrEmpty?: (url: string) => boolean;\n    appBridge: AppBridgeBlock | AppBridgeTheme;\n    clearable?: boolean;\n    placeholder?: string;\n    buttonSize?: ButtonSize;\n    hideInternalLinkButton?: boolean;\n};\n\nexport const LinkInput = ({\n    onUrlChange,\n    onToggleTab,\n    isValidUrlOrEmpty,\n    appBridge,\n    clearable,\n    placeholder,\n    newTab,\n    openInNewTab,\n    url = '',\n    required,\n    info,\n    label,\n    buttonSize,\n    hideInternalLinkButton,\n}: LinkInputProps) => {\n    const isUrlValid = isValidUrlOrEmpty ? isValidUrlOrEmpty(url) : internalIsValidUrlOrEmpty(url);\n    const checkedState = newTab ?? (openInNewTab ? CheckboxState.Checked : CheckboxState.Unchecked);\n    return (\n        <div data-test-id=\"link-input\">\n            <FormControl\n                label={{\n                    children: label,\n                    htmlFor: 'url',\n                    required,\n                    tooltip: info ? { content: info, position: TooltipPosition.Top } : undefined,\n                }}\n            >\n                <TextInput\n                    id=\"url\"\n                    value={url}\n                    clearable={clearable}\n                    onChange={onUrlChange}\n                    placeholder={placeholder ?? 'https://example.com'}\n                    focusOnMount\n                />\n            </FormControl>\n            {!isUrlValid && <div className=\"tw-text-text-negative tw-mt-1 tw-text-s\">Please enter a valid URL.</div>}\n\n            {!hideInternalLinkButton && (\n                <div className=\"tw-mt-3\">\n                    <LinkSelector\n                        url={url}\n                        appBridge={appBridge}\n                        onUrlChange={onUrlChange}\n                        buttonSize={buttonSize ?? ButtonSize.Medium}\n                    />\n                </div>\n            )}\n\n            <div className=\"tw-mt-3\">\n                <Checkbox value=\"new-tab\" label=\"Open in new tab\" state={checkedState} onChange={onToggleTab} />\n            </div>\n        </div>\n    );\n};\n"],"names":["LinkInput","onUrlChange","onToggleTab","isValidUrlOrEmpty","appBridge","clearable","placeholder","newTab","openInNewTab","url","required","info","label","buttonSize","hideInternalLinkButton","isUrlValid","internalIsValidUrlOrEmpty","checkedState","CheckboxState","jsxs","jsx","FormControl","TooltipPosition","TextInput","LinkSelector","ButtonSize","Checkbox"],"mappings":";;;;AAwBO,MAAMA,IAAY,CAAC;AAAA,EACtB,aAAAC;AAAA,EACA,aAAAC;AAAA,EAAA,mBACAC;AAAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,wBAAAC;AACJ,MAAsB;AAClB,QAAMC,IAAaZ,IAAoBA,EAAkBM,CAAG,IAAIO,EAA0BP,CAAG,GACvFQ,IAAeV,MAAWC,IAAeU,EAAc,UAAUA,EAAc;AAEjF,SAAA,gBAAAC,EAAC,OAAI,EAAA,gBAAa,cACd,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,OAAO;AAAA,UACH,UAAUT;AAAA,UACV,SAAS;AAAA,UACT,UAAAF;AAAA,UACA,SAASC,IAAO,EAAE,SAASA,GAAM,UAAUW,EAAgB,IAAQ,IAAA;AAAA,QACvE;AAAA,QAEA,UAAA,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,IAAG;AAAA,YACH,OAAOd;AAAA,YACP,WAAAJ;AAAA,YACA,UAAUJ;AAAA,YACV,aAAaK,KAAe;AAAA,YAC5B,cAAY;AAAA,UAAA;AAAA,QAChB;AAAA,MAAA;AAAA,IACJ;AAAA,IACC,CAACS,KAAc,gBAAAK,EAAC,OAAI,EAAA,WAAU,2CAA0C,UAAyB,6BAAA;AAAA,IAEjG,CAACN,KACG,gBAAAM,EAAA,OAAA,EAAI,WAAU,WACX,UAAA,gBAAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,KAAAf;AAAA,QACA,WAAAL;AAAA,QACA,aAAAH;AAAA,QACA,YAAYY,KAAcY,EAAW;AAAA,MAAA;AAAA,IAAA,GAE7C;AAAA,IAGH,gBAAAL,EAAA,OAAA,EAAI,WAAU,WACX,4BAACM,GAAS,EAAA,OAAM,WAAU,OAAM,mBAAkB,OAAOT,GAAc,UAAUf,EAAa,CAAA,GAClG;AAAA,EACJ,EAAA,CAAA;AAER;"}
+{"version":3,"file":"LinkInput.es.js","sources":["../../../src/components/Link/LinkInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { AppBridgeBlock, AppBridgeTheme } from '@frontify/app-bridge';\nimport { ButtonSize, Checkbox, CheckboxState, FormControl, TextInput, TooltipPosition } from '@frontify/fondue';\nimport { LinkSelector } from './LinkSelector';\nimport { isValidUrlOrEmpty as internalIsValidUrlOrEmpty } from './utils';\n\ntype LinkInputProps = {\n    url?: string;\n    info?: string;\n    label?: string;\n    required?: boolean;\n    newTab?: CheckboxState;\n    openInNewTab?: boolean;\n    onUrlChange?: (value: string) => void;\n    onToggleTab?: (checked: boolean) => void;\n    isValidUrlOrEmpty?: (url: string) => boolean;\n    appBridge: AppBridgeBlock | AppBridgeTheme;\n    clearable?: boolean;\n    placeholder?: string;\n    buttonSize?: ButtonSize;\n    hideInternalLinkButton?: boolean;\n};\n\nexport const LinkInput = ({\n    onUrlChange,\n    onToggleTab,\n    isValidUrlOrEmpty,\n    appBridge,\n    clearable,\n    placeholder,\n    newTab,\n    openInNewTab,\n    url = '',\n    required,\n    info,\n    label,\n    buttonSize,\n    hideInternalLinkButton,\n}: LinkInputProps) => {\n    const isUrlValid = isValidUrlOrEmpty ? isValidUrlOrEmpty(url) : internalIsValidUrlOrEmpty(url);\n    const checkedState = newTab ?? (openInNewTab ? CheckboxState.Checked : CheckboxState.Unchecked);\n    return (\n        <div data-test-id=\"link-input\">\n            <FormControl\n                label={{\n                    children: label,\n                    htmlFor: 'url',\n                    required,\n                    tooltip: info ? { content: info, position: TooltipPosition.Top } : undefined,\n                }}\n            >\n                <TextInput\n                    id=\"url\"\n                    value={url}\n                    clearable={clearable}\n                    onChange={onUrlChange}\n                    placeholder={placeholder ?? 'https://example.com'}\n                    focusOnMount\n                />\n            </FormControl>\n            {!isUrlValid && <div className=\"tw-text-text-negative tw-mt-1 tw-text-s\">Please enter a valid URL.</div>}\n\n            {!hideInternalLinkButton && (\n                <div className=\"tw-mt-3\">\n                    <LinkSelector\n                        url={url}\n                        onUrlChange={onUrlChange}\n                        buttonSize={buttonSize ?? ButtonSize.Medium}\n                        getAllDocuments={() => appBridge.getAllDocuments()}\n                        getDocumentPagesByDocumentId={(documentId) =>\n                            appBridge.getDocumentPagesByDocumentId(documentId)\n                        }\n                        getDocumentSectionsByDocumentPageId={(documentPageId) =>\n                            appBridge.getDocumentSectionsByDocumentPageId(documentPageId)\n                        }\n                    />\n                </div>\n            )}\n\n            <div className=\"tw-mt-3\">\n                <Checkbox value=\"new-tab\" label=\"Open in new tab\" state={checkedState} onChange={onToggleTab} />\n            </div>\n        </div>\n    );\n};\n"],"names":["LinkInput","onUrlChange","onToggleTab","isValidUrlOrEmpty","appBridge","clearable","placeholder","newTab","openInNewTab","url","required","info","label","buttonSize","hideInternalLinkButton","isUrlValid","internalIsValidUrlOrEmpty","checkedState","CheckboxState","jsxs","jsx","FormControl","TooltipPosition","TextInput","LinkSelector","ButtonSize","documentId","documentPageId","Checkbox"],"mappings":";;;;AAwBO,MAAMA,IAAY,CAAC;AAAA,EACtB,aAAAC;AAAA,EACA,aAAAC;AAAA,EAAA,mBACAC;AAAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,wBAAAC;AACJ,MAAsB;AAClB,QAAMC,IAAaZ,IAAoBA,EAAkBM,CAAG,IAAIO,EAA0BP,CAAG,GACvFQ,IAAeV,MAAWC,IAAeU,EAAc,UAAUA,EAAc;AAEjF,SAAA,gBAAAC,EAAC,OAAI,EAAA,gBAAa,cACd,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,OAAO;AAAA,UACH,UAAUT;AAAA,UACV,SAAS;AAAA,UACT,UAAAF;AAAA,UACA,SAASC,IAAO,EAAE,SAASA,GAAM,UAAUW,EAAgB,IAAQ,IAAA;AAAA,QACvE;AAAA,QAEA,UAAA,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,IAAG;AAAA,YACH,OAAOd;AAAA,YACP,WAAAJ;AAAA,YACA,UAAUJ;AAAA,YACV,aAAaK,KAAe;AAAA,YAC5B,cAAY;AAAA,UAAA;AAAA,QAChB;AAAA,MAAA;AAAA,IACJ;AAAA,IACC,CAACS,KAAc,gBAAAK,EAAC,OAAI,EAAA,WAAU,2CAA0C,UAAyB,6BAAA;AAAA,IAEjG,CAACN,KACG,gBAAAM,EAAA,OAAA,EAAI,WAAU,WACX,UAAA,gBAAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,KAAAf;AAAA,QACA,aAAAR;AAAA,QACA,YAAYY,KAAcY,EAAW;AAAA,QACrC,iBAAiB,MAAMrB,EAAU,gBAAgB;AAAA,QACjD,8BAA8B,CAACsB,MAC3BtB,EAAU,6BAA6BsB,CAAU;AAAA,QAErD,qCAAqC,CAACC,MAClCvB,EAAU,oCAAoCuB,CAAc;AAAA,MAAA;AAAA,IAAA,GAGxE;AAAA,IAGH,gBAAAP,EAAA,OAAA,EAAI,WAAU,WACX,4BAACQ,GAAS,EAAA,OAAM,WAAU,OAAM,mBAAkB,OAAOX,GAAc,UAAUf,EAAa,CAAA,GAClG;AAAA,EACJ,EAAA,CAAA;AAER;"}

package/dist/components/Link/LinkSelector/DocumentLink.es.js

@@ -1,25 +1,26 @@
-import { jsxs as a, Fragment as l, jsx as e } from "react/jsx-runtime";
-import { useState as b, useEffect as x } from "react";
-import { PageLinks as m } from "./PageLinks.es.js";
-import { merge as i, IconColorFan16 as p } from "@frontify/fondue";
-const u = ({
+import { jsxs as a, Fragment as b, jsx as e } from "react/jsx-runtime";
+import { useState as x, useEffect as m } from "react";
+import { PageLinks as p } from "./PageLinks.es.js";
+import { merge as i, IconColorFan16 as h } from "@frontify/fondue";
+const k = ({
   document: t,
-  appBridge: c,
   selectedUrl: n,
   onSelectUrl: s,
-  itemsToExpandInitially: r
+  itemsToExpandInitially: r,
+  getDocumentSectionsByDocumentPageId: c,
+  getDocumentPagesByDocumentId: d
 }) => {
-  const [o, w] = b(t.id === r.documentId), d = t.permanentLink === n;
-  return x(() => {
+  const [o, w] = x(t.id === r.documentId), l = t.permanentLink === n;
+  return m(() => {
     t.id === r.documentId && w(!0);
-  }, [r, t.id]), /* @__PURE__ */ a(l, { children: [
+  }, [r, t.id]), /* @__PURE__ */ a(b, { children: [
     /* @__PURE__ */ a(
       "button",
       {
         "data-test-id": "internal-link-selector-document-link",
         className: i([
           "tw-flex tw-flex-1 tw-space-x-2 tw-items-center tw-py-2 tw-pr-2.5 tw-leading-5 tw-cursor-pointer tw-w-full",
-          d ? "tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover:hover hover:tw-text-box-selected-strong-inverse-hover:hover" : "hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover"
+          l ? "tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover:hover hover:tw-text-box-selected-strong-inverse-hover:hover" : "hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover"
         ]),
         onClick: () => s(t.permanentLink),
         children: [
@@ -42,25 +43,26 @@ const u = ({
               )
             }
           ),
-          /* @__PURE__ */ e(p, {}),
+          /* @__PURE__ */ e(h, {}),
           /* @__PURE__ */ e("span", { className: "tw-text-s", children: t.title }),
           /* @__PURE__ */ e("span", { className: "tw-flex-auto tw-font-sans tw-text-xs tw-text-right", children: "Document" })
         ]
       }
     ),
     o && /* @__PURE__ */ e(
-      m,
+      p,
       {
-        appBridge: c,
         documentId: t.id,
         selectedUrl: n,
         onSelectUrl: s,
-        itemsToExpandInitially: r
+        itemsToExpandInitially: r,
+        getDocumentSectionsByDocumentPageId: c,
+        getDocumentPagesByDocumentId: d
       }
     )
   ] });
 };
 export {
-  u as DocumentLink
+  k as DocumentLink
 };
 //# sourceMappingURL=DocumentLink.es.js.map

package/dist/components/Link/LinkSelector/DocumentLink.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentLink.es.js","sources":["../../../../src/components/Link/LinkSelector/DocumentLink.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { AppBridgeBlock, AppBridgeTheme } from '@frontify/app-bridge';\nimport { useEffect, useState } from 'react';\nimport { PageLinks } from './PageLinks';\nimport { IconColorFan16, merge } from '@frontify/fondue';\nimport { InitiallyExpandedItems } from '../';\n\ntype DocumentLinkProps = {\n    document: {\n        id: number;\n        title: string;\n        permanentLink: string;\n    };\n    appBridge: AppBridgeBlock | AppBridgeTheme;\n    selectedUrl: string;\n    onSelectUrl: (url: string) => void;\n    itemsToExpandInitially: InitiallyExpandedItems;\n};\n\nexport const DocumentLink = ({\n    document,\n    appBridge,\n    selectedUrl,\n    onSelectUrl,\n    itemsToExpandInitially,\n}: DocumentLinkProps) => {\n    const [isExpanded, setIsExpanded] = useState(document.id === itemsToExpandInitially.documentId);\n    const isActive = document.permanentLink === selectedUrl;\n\n    useEffect(() => {\n        if (document.id === itemsToExpandInitially.documentId) {\n            setIsExpanded(true);\n        }\n    }, [itemsToExpandInitially, document.id]);\n\n    return (\n        <>\n            <button\n                data-test-id=\"internal-link-selector-document-link\"\n                className={merge([\n                    'tw-flex tw-flex-1 tw-space-x-2 tw-items-center tw-py-2 tw-pr-2.5 tw-leading-5 tw-cursor-pointer tw-w-full',\n                    isActive\n                        ? 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover:hover hover:tw-text-box-selected-strong-inverse-hover:hover'\n                        : 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n                ])}\n                onClick={() => onSelectUrl(document.permanentLink)}\n            >\n                <button\n                    role=\"button\"\n                    tabIndex={0}\n                    data-test-id=\"tree-item-toggle\"\n                    className=\"tw-flex tw-items-center tw-justify-center -tw-mr-2 tw-pr-3.5 tw-pt-1.5 tw-pb-1.5 tw-pl-3.5 tw-cursor-pointer\"\n                    onClick={() => setIsExpanded(!isExpanded)}\n                >\n                    <div\n                        className={merge([\n                            'tw-transition-transform tw-w-0 tw-h-0 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n                            isExpanded ? 'tw-rotate-90' : '',\n                        ])}\n                    ></div>\n                </button>\n                <IconColorFan16 />\n                <span className=\"tw-text-s\">{document.title}</span>\n                <span className=\"tw-flex-auto tw-font-sans tw-text-xs tw-text-right\">Document</span>\n            </button>\n            {isExpanded && (\n                <PageLinks\n                    appBridge={appBridge}\n                    documentId={document.id}\n                    selectedUrl={selectedUrl}\n                    onSelectUrl={onSelectUrl}\n                    itemsToExpandInitially={itemsToExpandInitially}\n                />\n            )}\n        </>\n    );\n};\n"],"names":["DocumentLink","document","appBridge","selectedUrl","onSelectUrl","itemsToExpandInitially","isExpanded","setIsExpanded","useState","isActive","useEffect","jsxs","Fragment","merge","jsx","IconColorFan16","PageLinks"],"mappings":";;;;AAoBO,MAAMA,IAAe,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,wBAAAC;AACJ,MAAyB;AACf,QAAA,CAACC,GAAYC,CAAa,IAAIC,EAASP,EAAS,OAAOI,EAAuB,UAAU,GACxFI,IAAWR,EAAS,kBAAkBE;AAE5C,SAAAO,EAAU,MAAM;AACR,IAAAT,EAAS,OAAOI,EAAuB,cACvCE,EAAc,EAAI;AAAA,EAEvB,GAAA,CAACF,GAAwBJ,EAAS,EAAE,CAAC,GAIhC,gBAAAU,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,WAAWE,EAAM;AAAA,UACb;AAAA,UACAJ,IACM,oKACA;AAAA,QAAA,CACT;AAAA,QACD,SAAS,MAAML,EAAYH,EAAS,aAAa;AAAA,QAEjD,UAAA;AAAA,UAAA,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,UAAU;AAAA,cACV,gBAAa;AAAA,cACb,WAAU;AAAA,cACV,SAAS,MAAMP,EAAc,CAACD,CAAU;AAAA,cAExC,UAAA,gBAAAQ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,WAAWD,EAAM;AAAA,oBACb;AAAA,oBACAP,IAAa,iBAAiB;AAAA,kBAAA,CACjC;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UACL;AAAA,4BACCS,GAAe,EAAA;AAAA,UACf,gBAAAD,EAAA,QAAA,EAAK,WAAU,aAAa,YAAS,OAAM;AAAA,UAC3C,gBAAAA,EAAA,QAAA,EAAK,WAAU,sDAAqD,UAAQ,YAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACjF;AAAA,IACCR,KACG,gBAAAQ;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,WAAAd;AAAA,QACA,YAAYD,EAAS;AAAA,QACrB,aAAAE;AAAA,QACA,aAAAC;AAAA,QACA,wBAAAC;AAAA,MAAA;AAAA,IACJ;AAAA,EAER,EAAA,CAAA;AAER;"}
+{"version":3,"file":"DocumentLink.es.js","sources":["../../../../src/components/Link/LinkSelector/DocumentLink.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { DocumentPage, DocumentSection } from '@frontify/app-bridge';\nimport { useEffect, useState } from 'react';\nimport { PageLinks } from './PageLinks';\nimport { IconColorFan16, merge } from '@frontify/fondue';\nimport { InitiallyExpandedItems } from '../';\n\ntype DocumentLinkProps = {\n    document: {\n        id: number;\n        title: string;\n        permanentLink: string;\n    };\n    selectedUrl: string;\n    onSelectUrl: (url: string) => void;\n    itemsToExpandInitially: InitiallyExpandedItems;\n    getDocumentSectionsByDocumentPageId: (documentPageId: number) => Promise<DocumentSection[]>;\n    getDocumentPagesByDocumentId: (documentId: number) => Promise<DocumentPage[]>;\n};\n\nexport const DocumentLink = ({\n    document,\n    selectedUrl,\n    onSelectUrl,\n    itemsToExpandInitially,\n    getDocumentSectionsByDocumentPageId,\n    getDocumentPagesByDocumentId,\n}: DocumentLinkProps) => {\n    const [isExpanded, setIsExpanded] = useState(document.id === itemsToExpandInitially.documentId);\n    const isActive = document.permanentLink === selectedUrl;\n\n    useEffect(() => {\n        if (document.id === itemsToExpandInitially.documentId) {\n            setIsExpanded(true);\n        }\n    }, [itemsToExpandInitially, document.id]);\n\n    return (\n        <>\n            <button\n                data-test-id=\"internal-link-selector-document-link\"\n                className={merge([\n                    'tw-flex tw-flex-1 tw-space-x-2 tw-items-center tw-py-2 tw-pr-2.5 tw-leading-5 tw-cursor-pointer tw-w-full',\n                    isActive\n                        ? 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover:hover hover:tw-text-box-selected-strong-inverse-hover:hover'\n                        : 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n                ])}\n                onClick={() => onSelectUrl(document.permanentLink)}\n            >\n                <button\n                    role=\"button\"\n                    tabIndex={0}\n                    data-test-id=\"tree-item-toggle\"\n                    className=\"tw-flex tw-items-center tw-justify-center -tw-mr-2 tw-pr-3.5 tw-pt-1.5 tw-pb-1.5 tw-pl-3.5 tw-cursor-pointer\"\n                    onClick={() => setIsExpanded(!isExpanded)}\n                >\n                    <div\n                        className={merge([\n                            'tw-transition-transform tw-w-0 tw-h-0 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n                            isExpanded ? 'tw-rotate-90' : '',\n                        ])}\n                    ></div>\n                </button>\n                <IconColorFan16 />\n                <span className=\"tw-text-s\">{document.title}</span>\n                <span className=\"tw-flex-auto tw-font-sans tw-text-xs tw-text-right\">Document</span>\n            </button>\n            {isExpanded && (\n                <PageLinks\n                    documentId={document.id}\n                    selectedUrl={selectedUrl}\n                    onSelectUrl={onSelectUrl}\n                    itemsToExpandInitially={itemsToExpandInitially}\n                    getDocumentSectionsByDocumentPageId={getDocumentSectionsByDocumentPageId}\n                    getDocumentPagesByDocumentId={getDocumentPagesByDocumentId}\n                />\n            )}\n        </>\n    );\n};\n"],"names":["DocumentLink","document","selectedUrl","onSelectUrl","itemsToExpandInitially","getDocumentSectionsByDocumentPageId","getDocumentPagesByDocumentId","isExpanded","setIsExpanded","useState","isActive","useEffect","jsxs","Fragment","merge","jsx","IconColorFan16","PageLinks"],"mappings":";;;;AAqBO,MAAMA,IAAe,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,qCAAAC;AAAA,EACA,8BAAAC;AACJ,MAAyB;AACf,QAAA,CAACC,GAAYC,CAAa,IAAIC,EAASR,EAAS,OAAOG,EAAuB,UAAU,GACxFM,IAAWT,EAAS,kBAAkBC;AAE5C,SAAAS,EAAU,MAAM;AACR,IAAAV,EAAS,OAAOG,EAAuB,cACvCI,EAAc,EAAI;AAAA,EAEvB,GAAA,CAACJ,GAAwBH,EAAS,EAAE,CAAC,GAIhC,gBAAAW,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,WAAWE,EAAM;AAAA,UACb;AAAA,UACAJ,IACM,oKACA;AAAA,QAAA,CACT;AAAA,QACD,SAAS,MAAMP,EAAYF,EAAS,aAAa;AAAA,QAEjD,UAAA;AAAA,UAAA,gBAAAc;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,UAAU;AAAA,cACV,gBAAa;AAAA,cACb,WAAU;AAAA,cACV,SAAS,MAAMP,EAAc,CAACD,CAAU;AAAA,cAExC,UAAA,gBAAAQ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,WAAWD,EAAM;AAAA,oBACb;AAAA,oBACAP,IAAa,iBAAiB;AAAA,kBAAA,CACjC;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UACL;AAAA,4BACCS,GAAe,EAAA;AAAA,UACf,gBAAAD,EAAA,QAAA,EAAK,WAAU,aAAa,YAAS,OAAM;AAAA,UAC3C,gBAAAA,EAAA,QAAA,EAAK,WAAU,sDAAqD,UAAQ,YAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACjF;AAAA,IACCR,KACG,gBAAAQ;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,YAAYhB,EAAS;AAAA,QACrB,aAAAC;AAAA,QACA,aAAAC;AAAA,QACA,wBAAAC;AAAA,QACA,qCAAAC;AAAA,QACA,8BAAAC;AAAA,MAAA;AAAA,IACJ;AAAA,EAER,EAAA,CAAA;AAER;"}

package/dist/components/Link/LinkSelector/DocumentLinks.es.js

@@ -1,55 +1,60 @@
-import { jsx as i, Fragment as v } from "react/jsx-runtime";
-import { useState as r, useEffect as d } from "react";
-import { DocumentLink as A } from "./DocumentLink.es.js";
-import { LoadingIndicator as h } from "./LoadingIndicator.es.js";
-const F = ({ appBridge: n, selectedUrl: e, onSelectUrl: m }) => {
-  const [u, l] = r(!0), [f, I] = r([]), [g, D] = r({
+import { jsx as i, Fragment as k } from "react/jsx-runtime";
+import { useState as r, useEffect as m } from "react";
+import { DocumentLink as x } from "./DocumentLink.es.js";
+import { LoadingIndicator as A } from "./LoadingIndicator.es.js";
+const q = ({
+  selectedUrl: t,
+  onSelectUrl: f,
+  getAllDocuments: l,
+  getDocumentPagesByDocumentId: a,
+  getDocumentSectionsByDocumentPageId: c
+}) => {
+  const [p, u] = r(!0), [I, g] = r([]), [L, v] = r({
     documentId: void 0,
     pageId: void 0
-  }), o = [...f.values()];
-  d(() => {
-    e && o.length > 0 && p().then((t) => {
-      D(t);
+  }), e = [...I.values()];
+  m(() => {
+    t && e.length > 0 && y().then((n) => {
+      v(n);
     });
-  }, [o.length]), d(() => {
-    n.getAllDocuments().then((t) => {
-      I(t);
+  }, [e.length]), m(() => {
+    l().then((n) => {
+      g(n);
     }).finally(() => {
-      l(!1);
+      u(!1);
     });
   }, []);
-  const p = async () => {
-    const t = {
+  const y = async () => {
+    const n = {
       documentId: void 0,
       pageId: void 0
     };
-    if (o.find((s) => s.permanentLink === e))
-      return t;
-    for (const s of o) {
-      const y = await n.getDocumentPagesByDocumentId(s.id);
-      n.getAllDocuments();
-      const a = [...y.values()];
-      if (!!a.find((c) => c.permanentLink === e))
-        return t.documentId = s.id, t;
-      for (const c of a)
-        if (!![...(await n.getDocumentSectionsByDocumentPageId(c.id)).values()].find((L) => L.permanentLink === e))
-          return t.documentId = s.id, t.pageId = c.id, t;
+    if (e.find((o) => o.permanentLink === t))
+      return n;
+    for (const o of e) {
+      const d = [...(await a(o.id)).values()];
+      if (!!d.find((s) => s.permanentLink === t))
+        return n.documentId = o.id, n;
+      for (const s of d)
+        if (!![...(await c(s.id)).values()].find((h) => h.permanentLink === t))
+          return n.documentId = o.id, n.pageId = s.id, n;
     }
-    return t;
+    return n;
   };
-  return u ? /* @__PURE__ */ i(h, {}) : /* @__PURE__ */ i(v, { children: o.map((t) => /* @__PURE__ */ i(
-    A,
+  return p ? /* @__PURE__ */ i(A, {}) : /* @__PURE__ */ i(k, { children: e.map((n) => /* @__PURE__ */ i(
+    x,
     {
-      document: t,
-      appBridge: n,
-      selectedUrl: e,
-      onSelectUrl: m,
-      itemsToExpandInitially: g
+      document: n,
+      selectedUrl: t,
+      onSelectUrl: f,
+      itemsToExpandInitially: L,
+      getDocumentSectionsByDocumentPageId: c,
+      getDocumentPagesByDocumentId: a
     },
-    t.id
+    n.id
   )) });
 };
 export {
-  F as DocumentLinks
+  q as DocumentLinks
 };
 //# sourceMappingURL=DocumentLinks.es.js.map

package/dist/components/Link/LinkSelector/DocumentLinks.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentLinks.es.js","sources":["../../../../src/components/Link/LinkSelector/DocumentLinks.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { AppBridgeBlock, AppBridgeTheme, Document } from '@frontify/app-bridge';\nimport { ReactElement, useEffect, useState } from 'react';\nimport { DocumentLink } from './DocumentLink';\nimport { LoadingIndicator } from './LoadingIndicator';\nimport { InitiallyExpandedItems } from '../';\n\ntype DocumentLinksProps = {\n    appBridge: AppBridgeBlock | AppBridgeTheme;\n    selectedUrl: string;\n    onSelectUrl: (url: string) => void;\n};\n\nexport const DocumentLinks = ({ appBridge, selectedUrl, onSelectUrl }: DocumentLinksProps): ReactElement => {\n    const [isLoading, setIsLoading] = useState(true);\n    const [documents, setDocuments] = useState<Document[]>([]);\n    const [itemsToExpandInitially, setItemsToExpandInitially] = useState<InitiallyExpandedItems>({\n        documentId: undefined,\n        pageId: undefined,\n    });\n\n    const documentArray = [...documents.values()];\n\n    useEffect(() => {\n        if (selectedUrl && documentArray.length > 0) {\n            findLocationOfSelectedUrl().then((items) => {\n                setItemsToExpandInitially(items);\n            });\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [documentArray.length]);\n\n    useEffect(() => {\n        appBridge\n            .getAllDocuments()\n            .then((_documents) => {\n                setDocuments(_documents);\n            })\n            .finally(() => {\n                setIsLoading(false);\n            });\n    }, []);\n\n    const findLocationOfSelectedUrl = async () => {\n        const itemsToExpand: InitiallyExpandedItems = {\n            documentId: undefined,\n            pageId: undefined,\n        };\n        const selectedUrlIsDocument = documentArray.find((document) => document.permanentLink === selectedUrl);\n        if (selectedUrlIsDocument) {\n            return itemsToExpand;\n        }\n        for (const document of documentArray) {\n            const pages = await appBridge.getDocumentPagesByDocumentId(document.id);\n            appBridge.getAllDocuments();\n            const pagesArray = [...pages.values()];\n            const selectedUrlIsPage = !!pagesArray.find((page) => page.permanentLink === selectedUrl);\n            if (selectedUrlIsPage) {\n                itemsToExpand.documentId = document.id;\n                return itemsToExpand;\n            }\n            for (const page of pagesArray) {\n                const sections = await appBridge.getDocumentSectionsByDocumentPageId(page.id);\n                const sectionsArray = [...sections.values()];\n                const selectedUrlIsSection = !!sectionsArray.find((section) => section.permanentLink === selectedUrl);\n                if (selectedUrlIsSection) {\n                    itemsToExpand.documentId = document.id;\n                    itemsToExpand.pageId = page.id;\n                    return itemsToExpand;\n                }\n            }\n        }\n        return itemsToExpand;\n    };\n\n    return isLoading ? (\n        <LoadingIndicator />\n    ) : (\n        <>\n            {documentArray.map((document) => {\n                return (\n                    <DocumentLink\n                        key={document.id}\n                        document={document}\n                        appBridge={appBridge}\n                        selectedUrl={selectedUrl}\n                        onSelectUrl={onSelectUrl}\n                        itemsToExpandInitially={itemsToExpandInitially}\n                    />\n                );\n            })}\n        </>\n    );\n};\n"],"names":["DocumentLinks","appBridge","selectedUrl","onSelectUrl","isLoading","setIsLoading","useState","documents","setDocuments","itemsToExpandInitially","setItemsToExpandInitially","documentArray","useEffect","findLocationOfSelectedUrl","items","_documents","itemsToExpand","document","pages","pagesArray","page","section","LoadingIndicator","jsx","DocumentLink"],"mappings":";;;;AAcO,MAAMA,IAAgB,CAAC,EAAE,WAAAC,GAAW,aAAAC,GAAa,aAAAC,QAAoD;AACxG,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAI,GACzC,CAACC,GAAWC,CAAY,IAAIF,EAAqB,CAAE,CAAA,GACnD,CAACG,GAAwBC,CAAyB,IAAIJ,EAAiC;AAAA,IACzF,YAAY;AAAA,IACZ,QAAQ;AAAA,EAAA,CACX,GAEKK,IAAgB,CAAC,GAAGJ,EAAU,OAAQ,CAAA;AAE5C,EAAAK,EAAU,MAAM;AACR,IAAAV,KAAeS,EAAc,SAAS,KACZE,EAAA,EAAE,KAAK,CAACC,MAAU;AACxC,MAAAJ,EAA0BI,CAAK;AAAA,IAAA,CAClC;AAAA,EACL,GAED,CAACH,EAAc,MAAM,CAAC,GAEzBC,EAAU,MAAM;AACZ,IAAAX,EACK,gBAAgB,EAChB,KAAK,CAACc,MAAe;AAClB,MAAAP,EAAaO,CAAU;AAAA,IAAA,CAC1B,EACA,QAAQ,MAAM;AACX,MAAAV,EAAa,EAAK;AAAA,IAAA,CACrB;AAAA,EACT,GAAG,CAAE,CAAA;AAEL,QAAMQ,IAA4B,YAAY;AAC1C,UAAMG,IAAwC;AAAA,MAC1C,YAAY;AAAA,MACZ,QAAQ;AAAA,IAAA;AAGZ,QAD8BL,EAAc,KAAK,CAACM,MAAaA,EAAS,kBAAkBf,CAAW;AAE1F,aAAAc;AAEX,eAAWC,KAAYN,GAAe;AAClC,YAAMO,IAAQ,MAAMjB,EAAU,6BAA6BgB,EAAS,EAAE;AACtE,MAAAhB,EAAU,gBAAgB;AAC1B,YAAMkB,IAAa,CAAC,GAAGD,EAAM,OAAQ,CAAA;AAErC,UAD0B,CAAC,CAACC,EAAW,KAAK,CAACC,MAASA,EAAK,kBAAkBlB,CAAW;AAEpF,eAAAc,EAAc,aAAaC,EAAS,IAC7BD;AAEX,iBAAWI,KAAQD;AAIf,YAD6B,CAAC,CADR,CAAC,IADN,MAAMlB,EAAU,oCAAoCmB,EAAK,EAAE,GACzC,OAAQ,CAAA,EACE,KAAK,CAACC,MAAYA,EAAQ,kBAAkBnB,CAAW;AAEhG,iBAAAc,EAAc,aAAaC,EAAS,IACpCD,EAAc,SAASI,EAAK,IACrBJ;AAAA,IAGnB;AACO,WAAAA;AAAA,EAAA;AAGJ,SAAAZ,sBACFkB,GAAiB,CAAA,CAAA,2BAGb,UAAcX,EAAA,IAAI,CAACM,MAEZ,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MAEG,UAAAP;AAAA,MACA,WAAAhB;AAAA,MACA,aAAAC;AAAA,MACA,aAAAC;AAAA,MACA,wBAAAM;AAAA,IAAA;AAAA,IALKQ,EAAS;AAAA,EAAA,CAQzB,EACL,CAAA;AAER;"}
+{"version":3,"file":"DocumentLinks.es.js","sources":["../../../../src/components/Link/LinkSelector/DocumentLinks.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { Document, DocumentPage, DocumentSection } from '@frontify/app-bridge';\nimport { ReactElement, useEffect, useState } from 'react';\nimport { DocumentLink } from './DocumentLink';\nimport { LoadingIndicator } from './LoadingIndicator';\nimport { InitiallyExpandedItems } from '../';\n\ntype DocumentLinksProps = {\n    selectedUrl: string;\n    onSelectUrl: (url: string) => void;\n    getAllDocuments: () => Promise<Document[]>;\n    getDocumentSectionsByDocumentPageId: (documentPageId: number) => Promise<DocumentSection[]>;\n    getDocumentPagesByDocumentId: (documentId: number) => Promise<DocumentPage[]>;\n};\n\nexport const DocumentLinks = ({\n    selectedUrl,\n    onSelectUrl,\n    getAllDocuments,\n    getDocumentPagesByDocumentId,\n    getDocumentSectionsByDocumentPageId,\n}: DocumentLinksProps): ReactElement => {\n    const [isLoading, setIsLoading] = useState(true);\n    const [documents, setDocuments] = useState<Document[]>([]);\n    const [itemsToExpandInitially, setItemsToExpandInitially] = useState<InitiallyExpandedItems>({\n        documentId: undefined,\n        pageId: undefined,\n    });\n\n    const documentArray = [...documents.values()];\n\n    useEffect(() => {\n        if (selectedUrl && documentArray.length > 0) {\n            findLocationOfSelectedUrl().then((items) => {\n                setItemsToExpandInitially(items);\n            });\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [documentArray.length]);\n\n    useEffect(() => {\n        getAllDocuments()\n            .then((_documents) => {\n                setDocuments(_documents);\n            })\n            .finally(() => {\n                setIsLoading(false);\n            });\n    }, []);\n\n    const findLocationOfSelectedUrl = async () => {\n        const itemsToExpand: InitiallyExpandedItems = {\n            documentId: undefined,\n            pageId: undefined,\n        };\n        const selectedUrlIsDocument = documentArray.find((document) => document.permanentLink === selectedUrl);\n        if (selectedUrlIsDocument) {\n            return itemsToExpand;\n        }\n        for (const document of documentArray) {\n            const pages = await getDocumentPagesByDocumentId(document.id);\n            const pagesArray = [...pages.values()];\n            const selectedUrlIsPage = !!pagesArray.find((page) => page.permanentLink === selectedUrl);\n            if (selectedUrlIsPage) {\n                itemsToExpand.documentId = document.id;\n                return itemsToExpand;\n            }\n            for (const page of pagesArray) {\n                const sections = await getDocumentSectionsByDocumentPageId(page.id);\n                const sectionsArray = [...sections.values()];\n                const selectedUrlIsSection = !!sectionsArray.find((section) => section.permanentLink === selectedUrl);\n                if (selectedUrlIsSection) {\n                    itemsToExpand.documentId = document.id;\n                    itemsToExpand.pageId = page.id;\n                    return itemsToExpand;\n                }\n            }\n        }\n        return itemsToExpand;\n    };\n\n    return isLoading ? (\n        <LoadingIndicator />\n    ) : (\n        <>\n            {documentArray.map((document) => {\n                return (\n                    <DocumentLink\n                        key={document.id}\n                        document={document}\n                        selectedUrl={selectedUrl}\n                        onSelectUrl={onSelectUrl}\n                        itemsToExpandInitially={itemsToExpandInitially}\n                        getDocumentSectionsByDocumentPageId={getDocumentSectionsByDocumentPageId}\n                        getDocumentPagesByDocumentId={getDocumentPagesByDocumentId}\n                    />\n                );\n            })}\n        </>\n    );\n};\n"],"names":["DocumentLinks","selectedUrl","onSelectUrl","getAllDocuments","getDocumentPagesByDocumentId","getDocumentSectionsByDocumentPageId","isLoading","setIsLoading","useState","documents","setDocuments","itemsToExpandInitially","setItemsToExpandInitially","documentArray","useEffect","findLocationOfSelectedUrl","items","_documents","itemsToExpand","document","pagesArray","page","section","LoadingIndicator","jsx","DocumentLink"],"mappings":";;;;AAgBO,MAAMA,IAAgB,CAAC;AAAA,EAC1B,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,8BAAAC;AAAA,EACA,qCAAAC;AACJ,MAAwC;AACpC,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAI,GACzC,CAACC,GAAWC,CAAY,IAAIF,EAAqB,CAAE,CAAA,GACnD,CAACG,GAAwBC,CAAyB,IAAIJ,EAAiC;AAAA,IACzF,YAAY;AAAA,IACZ,QAAQ;AAAA,EAAA,CACX,GAEKK,IAAgB,CAAC,GAAGJ,EAAU,OAAQ,CAAA;AAE5C,EAAAK,EAAU,MAAM;AACR,IAAAb,KAAeY,EAAc,SAAS,KACZE,EAAA,EAAE,KAAK,CAACC,MAAU;AACxC,MAAAJ,EAA0BI,CAAK;AAAA,IAAA,CAClC;AAAA,EACL,GAED,CAACH,EAAc,MAAM,CAAC,GAEzBC,EAAU,MAAM;AACI,IAAAX,EAAA,EACX,KAAK,CAACc,MAAe;AAClB,MAAAP,EAAaO,CAAU;AAAA,IAAA,CAC1B,EACA,QAAQ,MAAM;AACX,MAAAV,EAAa,EAAK;AAAA,IAAA,CACrB;AAAA,EACT,GAAG,CAAE,CAAA;AAEL,QAAMQ,IAA4B,YAAY;AAC1C,UAAMG,IAAwC;AAAA,MAC1C,YAAY;AAAA,MACZ,QAAQ;AAAA,IAAA;AAGZ,QAD8BL,EAAc,KAAK,CAACM,MAAaA,EAAS,kBAAkBlB,CAAW;AAE1F,aAAAiB;AAEX,eAAWC,KAAYN,GAAe;AAElC,YAAMO,IAAa,CAAC,IADN,MAAMhB,EAA6Be,EAAS,EAAE,GAC/B,OAAQ,CAAA;AAErC,UAD0B,CAAC,CAACC,EAAW,KAAK,CAACC,MAASA,EAAK,kBAAkBpB,CAAW;AAEpF,eAAAiB,EAAc,aAAaC,EAAS,IAC7BD;AAEX,iBAAWG,KAAQD;AAIf,YAD6B,CAAC,CADR,CAAC,IADN,MAAMf,EAAoCgB,EAAK,EAAE,GAC/B,OAAQ,CAAA,EACE,KAAK,CAACC,MAAYA,EAAQ,kBAAkBrB,CAAW;AAEhG,iBAAAiB,EAAc,aAAaC,EAAS,IACpCD,EAAc,SAASG,EAAK,IACrBH;AAAA,IAGnB;AACO,WAAAA;AAAA,EAAA;AAGJ,SAAAZ,sBACFiB,GAAiB,CAAA,CAAA,2BAGb,UAAcV,EAAA,IAAI,CAACM,MAEZ,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MAEG,UAAAN;AAAA,MACA,aAAAlB;AAAA,MACA,aAAAC;AAAA,MACA,wBAAAS;AAAA,MACA,qCAAAN;AAAA,MACA,8BAAAD;AAAA,IAAA;AAAA,IANKe,EAAS;AAAA,EAAA,CASzB,EACL,CAAA;AAER;"}

package/dist/components/Link/LinkSelector/LinkSelector.es.js

@@ -1,41 +1,52 @@
 import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { Button as S, IconLink as h, ButtonType as B, ButtonStyle as r, ButtonEmphasis as c, Modal as o, ButtonSize as L } from "@frontify/fondue";
-import { useOverlayTriggerState as T } from "@react-stately/overlays";
-import { useState as x, useEffect as E } from "react";
-import { DocumentLinks as O } from "./DocumentLinks.es.js";
-const M = ({
-  appBridge: m,
+import { Button as B, IconLink as L, ButtonType as T, ButtonStyle as r, ButtonEmphasis as c, Modal as o, ButtonSize as x } from "@frontify/fondue";
+import { useOverlayTriggerState as E } from "@react-stately/overlays";
+import { useState as O, useEffect as b } from "react";
+import { DocumentLinks as z } from "./DocumentLinks.es.js";
+const F = ({
   url: n,
   onUrlChange: s,
-  buttonSize: u = L.Medium
+  buttonSize: m = x.Medium,
+  getAllDocuments: u,
+  getDocumentPagesByDocumentId: f,
+  getDocumentSectionsByDocumentPageId: k
 }) => {
-  const { open: f, isOpen: k, close: l } = T({}), [i, a] = x(n), y = (e) => {
+  const { open: y, isOpen: D, close: l } = E({}), [i, a] = O(n), S = (e) => {
     a(e);
-  }, D = (e) => {
+  }, h = (e) => {
     e.key === "Enter" && d();
   };
-  E(() => {
+  b(() => {
     n && !i && a(n);
   }, [n, i]);
   const d = () => {
     s == null || s(i), l();
   };
-  return /* @__PURE__ */ p("div", { "data-test-id": "internal-link-selector", onKeyDown: D, children: [
+  return /* @__PURE__ */ p("div", { "data-test-id": "internal-link-selector", onKeyDown: h, children: [
     /* @__PURE__ */ t(
-      S,
+      B,
       {
-        icon: /* @__PURE__ */ t(h, {}),
-        size: u,
-        type: B.Button,
+        icon: /* @__PURE__ */ t(L, {}),
+        size: m,
+        type: T.Button,
         style: r.Default,
         emphasis: c.Default,
-        onClick: () => f(),
+        onClick: () => y(),
         children: "Internal link"
       }
     ),
-    /* @__PURE__ */ p(o, { zIndex: 1001, onClose: () => l(), isOpen: k, isDismissable: !0, children: [
+    /* @__PURE__ */ p(o, { zIndex: 1001, onClose: () => l(), isOpen: D, isDismissable: !0, children: [
       /* @__PURE__ */ t(o.Header, { title: "Select internal link" }),
-      /* @__PURE__ */ t(o.Body, { children: /* @__PURE__ */ t(O, { appBridge: m, selectedUrl: i, onSelectUrl: y }) }),
+      /* @__PURE__ */ t(o.Body, { children: /* @__PURE__ */ t(
+        z,
+        {
+          selectedUrl: i,
+          onSelectUrl: S,
+          getAllDocuments: u,
+          getDocumentPagesByDocumentId: f,
+          getDocumentSectionsByDocumentPageId: k
+        }
+      ) }),
       /* @__PURE__ */ t(
         o.Footer,
         {
@@ -62,6 +73,6 @@ const M = ({
   ] });
 };
 export {
-  M as LinkSelector
+  F as LinkSelector
 };
 //# sourceMappingURL=LinkSelector.es.js.map

package/dist/components/Link/LinkSelector/LinkSelector.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkSelector.es.js","sources":["../../../../src/components/Link/LinkSelector/LinkSelector.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { AppBridgeBlock, AppBridgeTheme } from '@frontify/app-bridge';\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle, ButtonType, IconLink, Modal } from '@frontify/fondue';\nimport { useOverlayTriggerState } from '@react-stately/overlays';\nimport { KeyboardEvent, ReactElement, useEffect, useState } from 'react';\nimport { DocumentLinks } from './DocumentLinks';\n\ntype LinkSelectorProps = {\n    appBridge: AppBridgeBlock | AppBridgeTheme;\n    url: string;\n    onUrlChange?: (value: string) => void;\n    buttonSize?: ButtonSize;\n};\n\nexport const LinkSelector = ({\n    appBridge,\n    url,\n    onUrlChange,\n    buttonSize = ButtonSize.Medium,\n}: LinkSelectorProps): ReactElement => {\n    const { open: openLinkTree, isOpen: isLinkTreeOpen, close: closeLinkTree } = useOverlayTriggerState({});\n    const [selectedUrl, setSelectedUrl] = useState<string>(url);\n\n    const onSelectUrl = (url: string) => {\n        setSelectedUrl(url);\n    };\n\n    const onPressEnter = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            saveLink();\n        }\n    };\n\n    useEffect(() => {\n        if (url && !selectedUrl) {\n            setSelectedUrl(url);\n        }\n    }, [url, selectedUrl]);\n\n    const saveLink = () => {\n        onUrlChange?.(selectedUrl);\n        closeLinkTree();\n    };\n\n    return (\n        <div data-test-id=\"internal-link-selector\" onKeyDown={onPressEnter}>\n            <Button\n                icon={<IconLink />}\n                size={buttonSize}\n                type={ButtonType.Button}\n                style={ButtonStyle.Default}\n                emphasis={ButtonEmphasis.Default}\n                onClick={() => openLinkTree()}\n            >\n                Internal link\n            </Button>\n            <Modal zIndex={1001} onClose={() => closeLinkTree()} isOpen={isLinkTreeOpen} isDismissable>\n                <Modal.Header title=\"Select internal link\" />\n                <Modal.Body>\n                    <DocumentLinks appBridge={appBridge} selectedUrl={selectedUrl} onSelectUrl={onSelectUrl} />\n                </Modal.Body>\n                <Modal.Footer\n                    buttons={[\n                        {\n                            children: 'Cancel',\n                            onClick: () => closeLinkTree(),\n                            style: ButtonStyle.Default,\n                            emphasis: ButtonEmphasis.Default,\n                        },\n                        {\n                            children: 'Choose',\n                            onClick: (event) => {\n                                event?.preventDefault();\n                                saveLink();\n                            },\n                            style: ButtonStyle.Default,\n                            emphasis: ButtonEmphasis.Strong,\n                            disabled: !selectedUrl,\n                        },\n                    ]}\n                />\n            </Modal>\n        </div>\n    );\n};\n"],"names":["LinkSelector","appBridge","url","onUrlChange","buttonSize","ButtonSize","openLinkTree","isLinkTreeOpen","closeLinkTree","useOverlayTriggerState","selectedUrl","setSelectedUrl","useState","onSelectUrl","onPressEnter","event","saveLink","useEffect","jsxs","jsx","Button","IconLink","ButtonType","ButtonStyle","ButtonEmphasis","Modal","DocumentLinks"],"mappings":";;;;;AAeO,MAAMA,IAAe,CAAC;AAAA,EACzB,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAaC,EAAW;AAC5B,MAAuC;AAC7B,QAAA,EAAE,MAAMC,GAAc,QAAQC,GAAgB,OAAOC,EAAc,IAAIC,EAAuB,CAAA,CAAE,GAChG,CAACC,GAAaC,CAAc,IAAIC,EAAiBV,CAAG,GAEpDW,IAAc,CAACX,MAAgB;AACjC,IAAAS,EAAeT,CAAG;AAAA,EAAA,GAGhBY,IAAe,CAACC,MAA2C;AACzD,IAAAA,EAAM,QAAQ,WACLC;EACb;AAGJ,EAAAC,EAAU,MAAM;AACR,IAAAf,KAAO,CAACQ,KACRC,EAAeT,CAAG;AAAA,EACtB,GACD,CAACA,GAAKQ,CAAW,CAAC;AAErB,QAAMM,IAAW,MAAM;AACnB,IAAAb,KAAA,QAAAA,EAAcO,IACAF;EAAA;AAGlB,SACK,gBAAAU,EAAA,OAAA,EAAI,gBAAa,0BAAyB,WAAWJ,GAClD,UAAA;AAAA,IAAA,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,wBAAOC,GAAS,EAAA;AAAA,QAChB,MAAMjB;AAAA,QACN,MAAMkB,EAAW;AAAA,QACjB,OAAOC,EAAY;AAAA,QACnB,UAAUC,EAAe;AAAA,QACzB,SAAS,MAAMlB,EAAa;AAAA,QAC/B,UAAA;AAAA,MAAA;AAAA,IAED;AAAA,IACA,gBAAAY,EAACO,GAAM,EAAA,QAAQ,MAAM,SAAS,MAAMjB,EAAiB,GAAA,QAAQD,GAAgB,eAAa,IACtF,UAAA;AAAA,MAAA,gBAAAY,EAACM,EAAM,QAAN,EAAa,OAAM,uBAAuB,CAAA;AAAA,MAC3C,gBAAAN,EAACM,EAAM,MAAN,EACG,4BAACC,GAAc,EAAA,WAAAzB,GAAsB,aAAAS,GAA0B,aAAAG,EAAA,CAA0B,EAC7F,CAAA;AAAA,MACA,gBAAAM;AAAA,QAACM,EAAM;AAAA,QAAN;AAAA,UACG,SAAS;AAAA,YACL;AAAA,cACI,UAAU;AAAA,cACV,SAAS,MAAMjB,EAAc;AAAA,cAC7B,OAAOe,EAAY;AAAA,cACnB,UAAUC,EAAe;AAAA,YAC7B;AAAA,YACA;AAAA,cACI,UAAU;AAAA,cACV,SAAS,CAACT,MAAU;AAChB,gBAAAA,KAAA,QAAAA,EAAO,kBACEC;cACb;AAAA,cACA,OAAOO,EAAY;AAAA,cACnB,UAAUC,EAAe;AAAA,cACzB,UAAU,CAACd;AAAA,YACf;AAAA,UACJ;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA,GACJ;AAAA,EACJ,EAAA,CAAA;AAER;"}
+{"version":3,"file":"LinkSelector.es.js","sources":["../../../../src/components/Link/LinkSelector/LinkSelector.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { Document, DocumentPage, DocumentSection } from '@frontify/app-bridge';\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle, ButtonType, IconLink, Modal } from '@frontify/fondue';\nimport { useOverlayTriggerState } from '@react-stately/overlays';\nimport { KeyboardEvent, ReactElement, useEffect, useState } from 'react';\nimport { DocumentLinks } from './DocumentLinks';\n\ntype LinkSelectorProps = {\n    url: string;\n    onUrlChange?: (value: string) => void;\n    buttonSize?: ButtonSize;\n    getAllDocuments: () => Promise<Document[]>;\n    getDocumentSectionsByDocumentPageId: (documentPageId: number) => Promise<DocumentSection[]>;\n    getDocumentPagesByDocumentId: (documentId: number) => Promise<DocumentPage[]>;\n};\n\nexport const LinkSelector = ({\n    url,\n    onUrlChange,\n    buttonSize = ButtonSize.Medium,\n    getAllDocuments,\n    getDocumentPagesByDocumentId,\n    getDocumentSectionsByDocumentPageId,\n}: LinkSelectorProps): ReactElement => {\n    const { open: openLinkTree, isOpen: isLinkTreeOpen, close: closeLinkTree } = useOverlayTriggerState({});\n    const [selectedUrl, setSelectedUrl] = useState<string>(url);\n\n    const onSelectUrl = (url: string) => {\n        setSelectedUrl(url);\n    };\n\n    const onPressEnter = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            saveLink();\n        }\n    };\n\n    useEffect(() => {\n        if (url && !selectedUrl) {\n            setSelectedUrl(url);\n        }\n    }, [url, selectedUrl]);\n\n    const saveLink = () => {\n        onUrlChange?.(selectedUrl);\n        closeLinkTree();\n    };\n\n    return (\n        <div data-test-id=\"internal-link-selector\" onKeyDown={onPressEnter}>\n            <Button\n                icon={<IconLink />}\n                size={buttonSize}\n                type={ButtonType.Button}\n                style={ButtonStyle.Default}\n                emphasis={ButtonEmphasis.Default}\n                onClick={() => openLinkTree()}\n            >\n                Internal link\n            </Button>\n            <Modal zIndex={1001} onClose={() => closeLinkTree()} isOpen={isLinkTreeOpen} isDismissable>\n                <Modal.Header title=\"Select internal link\" />\n                <Modal.Body>\n                    <DocumentLinks\n                        selectedUrl={selectedUrl}\n                        onSelectUrl={onSelectUrl}\n                        getAllDocuments={getAllDocuments}\n                        getDocumentPagesByDocumentId={getDocumentPagesByDocumentId}\n                        getDocumentSectionsByDocumentPageId={getDocumentSectionsByDocumentPageId}\n                    />\n                </Modal.Body>\n                <Modal.Footer\n                    buttons={[\n                        {\n                            children: 'Cancel',\n                            onClick: () => closeLinkTree(),\n                            style: ButtonStyle.Default,\n                            emphasis: ButtonEmphasis.Default,\n                        },\n                        {\n                            children: 'Choose',\n                            onClick: (event) => {\n                                event?.preventDefault();\n                                saveLink();\n                            },\n                            style: ButtonStyle.Default,\n                            emphasis: ButtonEmphasis.Strong,\n                            disabled: !selectedUrl,\n                        },\n                    ]}\n                />\n            </Modal>\n        </div>\n    );\n};\n"],"names":["LinkSelector","url","onUrlChange","buttonSize","ButtonSize","getAllDocuments","getDocumentPagesByDocumentId","getDocumentSectionsByDocumentPageId","openLinkTree","isLinkTreeOpen","closeLinkTree","useOverlayTriggerState","selectedUrl","setSelectedUrl","useState","onSelectUrl","onPressEnter","event","saveLink","useEffect","jsxs","jsx","Button","IconLink","ButtonType","ButtonStyle","ButtonEmphasis","Modal","DocumentLinks"],"mappings":";;;;;AAiBO,MAAMA,IAAe,CAAC;AAAA,EACzB,KAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAaC,EAAW;AAAA,EACxB,iBAAAC;AAAA,EACA,8BAAAC;AAAA,EACA,qCAAAC;AACJ,MAAuC;AAC7B,QAAA,EAAE,MAAMC,GAAc,QAAQC,GAAgB,OAAOC,EAAc,IAAIC,EAAuB,CAAA,CAAE,GAChG,CAACC,GAAaC,CAAc,IAAIC,EAAiBb,CAAG,GAEpDc,IAAc,CAACd,MAAgB;AACjC,IAAAY,EAAeZ,CAAG;AAAA,EAAA,GAGhBe,IAAe,CAACC,MAA2C;AACzD,IAAAA,EAAM,QAAQ,WACLC;EACb;AAGJ,EAAAC,EAAU,MAAM;AACR,IAAAlB,KAAO,CAACW,KACRC,EAAeZ,CAAG;AAAA,EACtB,GACD,CAACA,GAAKW,CAAW,CAAC;AAErB,QAAMM,IAAW,MAAM;AACnB,IAAAhB,KAAA,QAAAA,EAAcU,IACAF;EAAA;AAGlB,SACK,gBAAAU,EAAA,OAAA,EAAI,gBAAa,0BAAyB,WAAWJ,GAClD,UAAA;AAAA,IAAA,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,wBAAOC,GAAS,EAAA;AAAA,QAChB,MAAMpB;AAAA,QACN,MAAMqB,EAAW;AAAA,QACjB,OAAOC,EAAY;AAAA,QACnB,UAAUC,EAAe;AAAA,QACzB,SAAS,MAAMlB,EAAa;AAAA,QAC/B,UAAA;AAAA,MAAA;AAAA,IAED;AAAA,IACA,gBAAAY,EAACO,GAAM,EAAA,QAAQ,MAAM,SAAS,MAAMjB,EAAiB,GAAA,QAAQD,GAAgB,eAAa,IACtF,UAAA;AAAA,MAAA,gBAAAY,EAACM,EAAM,QAAN,EAAa,OAAM,uBAAuB,CAAA;AAAA,MAC3C,gBAAAN,EAACM,EAAM,MAAN,EACG,UAAA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACG,aAAAhB;AAAA,UACA,aAAAG;AAAA,UACA,iBAAAV;AAAA,UACA,8BAAAC;AAAA,UACA,qCAAAC;AAAA,QAAA;AAAA,MAAA,GAER;AAAA,MACA,gBAAAc;AAAA,QAACM,EAAM;AAAA,QAAN;AAAA,UACG,SAAS;AAAA,YACL;AAAA,cACI,UAAU;AAAA,cACV,SAAS,MAAMjB,EAAc;AAAA,cAC7B,OAAOe,EAAY;AAAA,cACnB,UAAUC,EAAe;AAAA,YAC7B;AAAA,YACA;AAAA,cACI,UAAU;AAAA,cACV,SAAS,CAACT,MAAU;AAChB,gBAAAA,KAAA,QAAAA,EAAO,kBACEC;cACb;AAAA,cACA,OAAOO,EAAY;AAAA,cACnB,UAAUC,EAAe;AAAA,cACzB,UAAU,CAACd;AAAA,YACf;AAAA,UACJ;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA,GACJ;AAAA,EACJ,EAAA,CAAA;AAER;"}

package/dist/components/Link/LinkSelector/PageLink.es.js

@@ -1,34 +1,46 @@
-import { jsxs as l, Fragment as b, jsx as e } from "react/jsx-runtime";
-import { useDocumentSection as p } from "@frontify/app-bridge";
-import { merge as d } from "@frontify/fondue";
-import { useState as u, useEffect as f } from "react";
-import { SectionLink as v } from "./SectionLink.es.js";
-const j = ({ page: t, selectedUrl: s, onSelectUrl: i, itemsToExpandInitially: r, appBridge: m }) => {
-  const [n, w] = u(t.id === r.documentId), x = t.permanentLink === s, { documentSections: h } = p(m, t.id), o = [...h.values()], c = o.length > 0;
-  return f(() => {
-    t.id === r.pageId && w(!0);
-  }, [r, t.id]), /* @__PURE__ */ l(b, { children: [
+import { jsxs as d, Fragment as v, jsx as e } from "react/jsx-runtime";
+import { merge as m } from "@frontify/fondue";
+import { useState as h, useEffect as x } from "react";
+import { SectionLink as g } from "./SectionLink.es.js";
+const j = ({
+  page: t,
+  selectedUrl: i,
+  onSelectUrl: w,
+  itemsToExpandInitially: r,
+  getDocumentSectionsByDocumentPageId: c
+}) => {
+  const [n, a] = h(t.id === r.documentId), [b, f] = h([]), u = t.permanentLink === i;
+  x(() => {
+    (async () => {
+      const p = await c(t.id);
+      f(p);
+    })();
+  }, [t.id, c]), x(() => {
+    t.id === r.pageId && a(!0);
+  }, [r, t.id]);
+  const s = [...b.values()], l = s.length > 0;
+  return /* @__PURE__ */ d(v, { children: [
     /* @__PURE__ */ e(
       "button",
       {
         "data-test-id": "internal-link-selector-page-link",
-        className: d([
+        className: m([
           "tw-py-2 tw-pr-2.5 tw-leading-5 tw-cursor-pointer tw-flex tw-w-full",
-          c ? "tw-pl-7" : "tw-pl-12",
-          x ? "tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover:hover hover:tw-text-box-selected-strong-inverse-hover:hover" : "hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover"
+          l ? "tw-pl-7" : "tw-pl-12",
+          u ? "tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover:hover hover:tw-text-box-selected-strong-inverse-hover:hover" : "hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover"
         ]),
-        onClick: () => i(t.permanentLink),
-        children: /* @__PURE__ */ l("div", { className: "tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-6", children: [
-          c && /* @__PURE__ */ e(
+        onClick: () => w(t.permanentLink),
+        children: /* @__PURE__ */ d("div", { className: "tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-6", children: [
+          l && /* @__PURE__ */ e(
             "button",
             {
               "data-test-id": "tree-item-toggle",
               className: "tw-flex tw-items-center tw-justify-center -tw-mr-2 tw-pr-3.5 tw-pt-1.5 tw-pb-1.5 tw-pl-3.5 tw-cursor-pointer",
-              onClick: () => w(!n),
+              onClick: () => a(!n),
               children: /* @__PURE__ */ e(
                 "div",
                 {
-                  className: d([
+                  className: m([
                     "tw-transition-transform tw-w-0 tw-h-0 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong",
                     n ? "tw-rotate-90" : ""
                   ])
@@ -41,14 +53,14 @@ const j = ({ page: t, selectedUrl: s, onSelectUrl: i, itemsToExpandInitially: r,
         ] }, t.id)
       }
     ),
-    n && o.length > 0 && o.map((a) => /* @__PURE__ */ e(
-      v,
+    n && s.length > 0 && s.map((o) => /* @__PURE__ */ e(
+      g,
       {
-        section: a,
-        selectedUrl: s,
-        onSelectUrl: i
+        section: o,
+        selectedUrl: i,
+        onSelectUrl: w
       },
-      a.id
+      o.id
     ))
   ] });
 };

package/dist/components/Link/LinkSelector/PageLink.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLink.es.js","sources":["../../../../src/components/Link/LinkSelector/PageLink.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AppBridgeBlock, AppBridgeTheme, useDocumentSection } from '@frontify/app-bridge';\nimport { merge } from '@frontify/fondue';\nimport { useEffect, useState } from 'react';\nimport { InitiallyExpandedItems } from '../';\nimport { SectionLink } from './SectionLink';\n\ntype DocumentLinkProps = {\n    page: {\n        id: number;\n        title: string;\n        permanentLink: string;\n    };\n    selectedUrl: string;\n    onSelectUrl: (url: string) => void;\n    appBridge: AppBridgeBlock | AppBridgeTheme;\n    itemsToExpandInitially: InitiallyExpandedItems;\n};\n\nexport const PageLink = ({ page, selectedUrl, onSelectUrl, itemsToExpandInitially, appBridge }: DocumentLinkProps) => {\n    const [isExpanded, setIsExpanded] = useState(page.id === itemsToExpandInitially.documentId);\n    const isActive = page.permanentLink === selectedUrl;\n    const { documentSections } = useDocumentSection(appBridge, page.id);\n    const sectionsArray = [...documentSections.values()];\n    const hasSections = sectionsArray.length > 0;\n\n    useEffect(() => {\n        if (page.id === itemsToExpandInitially.pageId) {\n            setIsExpanded(true);\n        }\n    }, [itemsToExpandInitially, page.id]);\n\n    return (\n        <>\n            <button\n                data-test-id=\"internal-link-selector-page-link\"\n                className={merge([\n                    'tw-py-2 tw-pr-2.5 tw-leading-5 tw-cursor-pointer tw-flex tw-w-full',\n                    hasSections ? 'tw-pl-7' : 'tw-pl-12',\n                    isActive\n                        ? 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover:hover hover:tw-text-box-selected-strong-inverse-hover:hover'\n                        : 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n                ])}\n                onClick={() => onSelectUrl(page.permanentLink)}\n            >\n                <div key={page.id} className=\"tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-6\">\n                    {hasSections && (\n                        <button\n                            data-test-id=\"tree-item-toggle\"\n                            className=\"tw-flex tw-items-center tw-justify-center -tw-mr-2 tw-pr-3.5 tw-pt-1.5 tw-pb-1.5 tw-pl-3.5 tw-cursor-pointer\"\n                            onClick={() => setIsExpanded(!isExpanded)}\n                        >\n                            <div\n                                className={merge([\n                                    'tw-transition-transform tw-w-0 tw-h-0 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n                                    isExpanded ? 'tw-rotate-90' : '',\n                                ])}\n                            ></div>\n                        </button>\n                    )}\n                    <span className=\"tw-text-s\">{page.title}</span>\n                    <span className=\"tw-flex-auto tw-font-sans tw-text-xs tw-text-right\">Page</span>\n                </div>\n            </button>\n            {isExpanded &&\n                sectionsArray.length > 0 &&\n                sectionsArray.map((section) => {\n                    return (\n                        <SectionLink\n                            key={section.id}\n                            section={section}\n                            selectedUrl={selectedUrl}\n                            onSelectUrl={onSelectUrl}\n                        />\n                    );\n                })}\n        </>\n    );\n};\n"],"names":["PageLink","page","selectedUrl","onSelectUrl","itemsToExpandInitially","appBridge","isExpanded","setIsExpanded","useState","isActive","documentSections","useDocumentSection","sectionsArray","hasSections","useEffect","jsxs","Fragment","jsx","merge","section","SectionLink"],"mappings":";;;;;AAoBa,MAAAA,IAAW,CAAC,EAAE,MAAAC,GAAM,aAAAC,GAAa,aAAAC,GAAa,wBAAAC,GAAwB,WAAAC,QAAmC;AAC5G,QAAA,CAACC,GAAYC,CAAa,IAAIC,EAASP,EAAK,OAAOG,EAAuB,UAAU,GACpFK,IAAWR,EAAK,kBAAkBC,GAClC,EAAE,kBAAAQ,EAAiB,IAAIC,EAAmBN,GAAWJ,EAAK,EAAE,GAC5DW,IAAgB,CAAC,GAAGF,EAAiB,OAAQ,CAAA,GAC7CG,IAAcD,EAAc,SAAS;AAE3C,SAAAE,EAAU,MAAM;AACR,IAAAb,EAAK,OAAOG,EAAuB,UACnCG,EAAc,EAAI;AAAA,EAEvB,GAAA,CAACH,GAAwBH,EAAK,EAAE,CAAC,GAI5B,gBAAAc,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,WAAWC,EAAM;AAAA,UACb;AAAA,UACAL,IAAc,YAAY;AAAA,UAC1BJ,IACM,oKACA;AAAA,QAAA,CACT;AAAA,QACD,SAAS,MAAMN,EAAYF,EAAK,aAAa;AAAA,QAE7C,UAAA,gBAAAc,EAAC,OAAkB,EAAA,WAAU,yDACxB,UAAA;AAAA,UACGF,KAAA,gBAAAI;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,gBAAa;AAAA,cACb,WAAU;AAAA,cACV,SAAS,MAAMV,EAAc,CAACD,CAAU;AAAA,cAExC,UAAA,gBAAAW;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,WAAWC,EAAM;AAAA,oBACb;AAAA,oBACAZ,IAAa,iBAAiB;AAAA,kBAAA,CACjC;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UACL;AAAA,UAEH,gBAAAW,EAAA,QAAA,EAAK,WAAU,aAAa,YAAK,OAAM;AAAA,UACvC,gBAAAA,EAAA,QAAA,EAAK,WAAU,sDAAqD,UAAI,QAAA;AAAA,QAAA,EAAA,GAhBnEhB,EAAK,EAiBf;AAAA,MAAA;AAAA,IACJ;AAAA,IACCK,KACGM,EAAc,SAAS,KACvBA,EAAc,IAAI,CAACO,MAEX,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QAEG,SAAAD;AAAA,QACA,aAAAjB;AAAA,QACA,aAAAC;AAAA,MAAA;AAAA,MAHKgB,EAAQ;AAAA,IAAA,CAMxB;AAAA,EACT,EAAA,CAAA;AAER;"}
+{"version":3,"file":"PageLink.es.js","sources":["../../../../src/components/Link/LinkSelector/PageLink.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type DocumentSection } from '@frontify/app-bridge';\nimport { merge } from '@frontify/fondue';\nimport { useEffect, useState } from 'react';\nimport { InitiallyExpandedItems } from '../';\nimport { SectionLink } from './SectionLink';\n\ntype PageLinkProps = {\n    page: {\n        id: number;\n        title: string;\n        permanentLink: string;\n    };\n    selectedUrl: string;\n    onSelectUrl: (url: string) => void;\n    itemsToExpandInitially: InitiallyExpandedItems;\n    getDocumentSectionsByDocumentPageId: (documentPageId: number) => Promise<DocumentSection[]>;\n};\n\nexport const PageLink = ({\n    page,\n    selectedUrl,\n    onSelectUrl,\n    itemsToExpandInitially,\n    getDocumentSectionsByDocumentPageId,\n}: PageLinkProps) => {\n    const [isExpanded, setIsExpanded] = useState(page.id === itemsToExpandInitially.documentId);\n    const [documentSections, setDocumentSections] = useState<DocumentSection[]>([]);\n    const isActive = page.permanentLink === selectedUrl;\n\n    useEffect(() => {\n        const fetchDocumentSections = async () => {\n            const sections = await getDocumentSectionsByDocumentPageId(page.id);\n            setDocumentSections(sections);\n        };\n\n        fetchDocumentSections();\n    }, [page.id, getDocumentSectionsByDocumentPageId]);\n\n    useEffect(() => {\n        if (page.id === itemsToExpandInitially.pageId) {\n            setIsExpanded(true);\n        }\n    }, [itemsToExpandInitially, page.id]);\n\n    const sectionsArray = [...documentSections.values()];\n    const hasSections = sectionsArray.length > 0;\n\n    return (\n        <>\n            <button\n                data-test-id=\"internal-link-selector-page-link\"\n                className={merge([\n                    'tw-py-2 tw-pr-2.5 tw-leading-5 tw-cursor-pointer tw-flex tw-w-full',\n                    hasSections ? 'tw-pl-7' : 'tw-pl-12',\n                    isActive\n                        ? 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover:hover hover:tw-text-box-selected-strong-inverse-hover:hover'\n                        : 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n                ])}\n                onClick={() => onSelectUrl(page.permanentLink)}\n            >\n                <div key={page.id} className=\"tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-6\">\n                    {hasSections && (\n                        <button\n                            data-test-id=\"tree-item-toggle\"\n                            className=\"tw-flex tw-items-center tw-justify-center -tw-mr-2 tw-pr-3.5 tw-pt-1.5 tw-pb-1.5 tw-pl-3.5 tw-cursor-pointer\"\n                            onClick={() => setIsExpanded(!isExpanded)}\n                        >\n                            <div\n                                className={merge([\n                                    'tw-transition-transform tw-w-0 tw-h-0 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n                                    isExpanded ? 'tw-rotate-90' : '',\n                                ])}\n                            ></div>\n                        </button>\n                    )}\n                    <span className=\"tw-text-s\">{page.title}</span>\n                    <span className=\"tw-flex-auto tw-font-sans tw-text-xs tw-text-right\">Page</span>\n                </div>\n            </button>\n            {isExpanded &&\n                sectionsArray.length > 0 &&\n                sectionsArray.map((section) => {\n                    return (\n                        <SectionLink\n                            key={section.id}\n                            section={section}\n                            selectedUrl={selectedUrl}\n                            onSelectUrl={onSelectUrl}\n                        />\n                    );\n                })}\n        </>\n    );\n};\n"],"names":["PageLink","page","selectedUrl","onSelectUrl","itemsToExpandInitially","getDocumentSectionsByDocumentPageId","isExpanded","setIsExpanded","useState","documentSections","setDocumentSections","isActive","useEffect","sections","sectionsArray","hasSections","jsxs","Fragment","jsx","merge","section","SectionLink"],"mappings":";;;;AAoBO,MAAMA,IAAW,CAAC;AAAA,EACrB,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,qCAAAC;AACJ,MAAqB;AACX,QAAA,CAACC,GAAYC,CAAa,IAAIC,EAASP,EAAK,OAAOG,EAAuB,UAAU,GACpF,CAACK,GAAkBC,CAAmB,IAAIF,EAA4B,CAAE,CAAA,GACxEG,IAAWV,EAAK,kBAAkBC;AAExC,EAAAU,EAAU,MAAM;AAMU,KALQ,YAAY;AACtC,YAAMC,IAAW,MAAMR,EAAoCJ,EAAK,EAAE;AAClE,MAAAS,EAAoBG,CAAQ;AAAA,IAAA;EAIjC,GAAA,CAACZ,EAAK,IAAII,CAAmC,CAAC,GAEjDO,EAAU,MAAM;AACR,IAAAX,EAAK,OAAOG,EAAuB,UACnCG,EAAc,EAAI;AAAA,EAEvB,GAAA,CAACH,GAAwBH,EAAK,EAAE,CAAC;AAEpC,QAAMa,IAAgB,CAAC,GAAGL,EAAiB,OAAQ,CAAA,GAC7CM,IAAcD,EAAc,SAAS;AAE3C,SAEQ,gBAAAE,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,WAAWC,EAAM;AAAA,UACb;AAAA,UACAJ,IAAc,YAAY;AAAA,UAC1BJ,IACM,oKACA;AAAA,QAAA,CACT;AAAA,QACD,SAAS,MAAMR,EAAYF,EAAK,aAAa;AAAA,QAE7C,UAAA,gBAAAe,EAAC,OAAkB,EAAA,WAAU,yDACxB,UAAA;AAAA,UACGD,KAAA,gBAAAG;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,gBAAa;AAAA,cACb,WAAU;AAAA,cACV,SAAS,MAAMX,EAAc,CAACD,CAAU;AAAA,cAExC,UAAA,gBAAAY;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,WAAWC,EAAM;AAAA,oBACb;AAAA,oBACAb,IAAa,iBAAiB;AAAA,kBAAA,CACjC;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UACL;AAAA,UAEH,gBAAAY,EAAA,QAAA,EAAK,WAAU,aAAa,YAAK,OAAM;AAAA,UACvC,gBAAAA,EAAA,QAAA,EAAK,WAAU,sDAAqD,UAAI,QAAA;AAAA,QAAA,EAAA,GAhBnEjB,EAAK,EAiBf;AAAA,MAAA;AAAA,IACJ;AAAA,IACCK,KACGQ,EAAc,SAAS,KACvBA,EAAc,IAAI,CAACM,MAEX,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QAEG,SAAAD;AAAA,QACA,aAAAlB;AAAA,QACA,aAAAC;AAAA,MAAA;AAAA,MAHKiB,EAAQ;AAAA,IAAA,CAMxB;AAAA,EACT,EAAA,CAAA;AAER;"}