@frontify/guideline-blocks-settings 0.38.0 → 1.0.0

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

@@ -1,26 +1,26 @@
-import { jsxs as a, Fragment as b, jsx as e } from "react/jsx-runtime";
-import { merge as i, IconColorFan16 as x } from "@frontify/fondue";
-import { useState as m, useEffect as p } from "react";
-import { PageLinks as h } from "./PageLinks.es.js";
-const k = ({
+import { jsxs as i, Fragment as x, jsx as e } from "react/jsx-runtime";
+import { merge as c, IconColorFan16 as p } from "@frontify/fondue";
+import { useState as m, useEffect as h } from "react";
+import { PageLinks as f } from "./PageLinks.es.js";
+const N = ({
   document: t,
   selectedUrl: n,
   onSelectUrl: s,
   itemsToExpandInitially: r,
-  getDocumentSectionsByDocumentPageId: c,
-  getDocumentPagesByDocumentId: d
+  getDocumentSectionsByDocumentPageId: d,
+  getDocumentPagesByDocumentId: l
 }) => {
-  const [o, w] = m(t.id === r.documentId), l = t.permanentLink === n;
-  return p(() => {
+  const [o, w] = m(t.id === r.documentId), b = t.permanentLink === n;
+  return h(() => {
     t.id === r.documentId && w(!0);
-  }, [r, t.id]), /* @__PURE__ */ a(b, { children: [
-    /* @__PURE__ */ a(
+  }, [r, t.id]), /* @__PURE__ */ i(x, { children: [
+    /* @__PURE__ */ i(
       "button",
       {
         "data-test-id": "internal-link-selector-document-link",
-        className: i([
+        className: c([
           "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",
-          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"
+          b ? "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: [
@@ -32,10 +32,11 @@ const k = ({
               "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(!o),
+              onKeyDown: (a) => a.key === "Enter" && a.stopPropagation(),
               children: /* @__PURE__ */ e(
                 "div",
                 {
-                  className: i([
+                  className: c([
                     "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",
                     o ? "tw-rotate-90" : ""
                   ])
@@ -43,26 +44,26 @@ const k = ({
               )
             }
           ),
-          /* @__PURE__ */ e(x, {}),
+          /* @__PURE__ */ e(p, {}),
           /* @__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(
-      h,
+      f,
       {
         documentId: t.id,
         selectedUrl: n,
         onSelectUrl: s,
         itemsToExpandInitially: r,
-        getDocumentSectionsByDocumentPageId: c,
-        getDocumentPagesByDocumentId: d
+        getDocumentSectionsByDocumentPageId: d,
+        getDocumentPagesByDocumentId: l
       }
     )
   ] });
 };
 export {
-  k as DocumentLink
+  N 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 DocumentPage, type DocumentSection } from '@frontify/app-bridge';\nimport { IconColorFan16, merge } from '@frontify/fondue';\nimport { useEffect, useState } from 'react';\n\nimport { type InitiallyExpandedItems } from '../';\n\nimport { PageLinks } from './PageLinks';\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                {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}\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":";;;;AAuBO,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,QAGjD,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;"}
+{"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, type DocumentSection } from '@frontify/app-bridge';\nimport { IconColorFan16, merge } from '@frontify/fondue';\nimport { useEffect, useState } from 'react';\n\nimport { type InitiallyExpandedItems } from '../';\n\nimport { PageLinks } from './PageLinks';\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                {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}\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                    onKeyDown={(event) => event.key === 'Enter' && event.stopPropagation()}\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","event","IconColorFan16","PageLinks"],"mappings":";;;;AAuBO,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,QAGjD,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,cACxC,WAAW,CAACS,MAAUA,EAAM,QAAQ,WAAWA,EAAM,gBAAgB;AAAA,cAErE,UAAA,gBAAAD;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,4BACCU,GAAe,EAAA;AAAA,UACf,gBAAAF,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,MAACG;AAAA,MAAA;AAAA,QACG,YAAYjB,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;"}