@x15ventures/x15-ui-library 3.19.0 → 3.20.0

package/dist/esm/package.json

@@ -1,308 +1,6 @@
 {
   "name": "@x15ventures/x15-ui-library",
-  "description": "Collection of UI resources for development",
+  "version": "3.19.0",
   "type": "module",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
-    },
-    "./components": {
-      "types": "./dist/components/index.d.ts",
-      "import": "./dist/esm/components/index.js",
-      "require": "./dist/cjs/components/index.js"
-    },
-    "./components/*": {
-      "types": "./dist/components/*.d.ts",
-      "import": "./dist/esm/components/*.js",
-      "require": "./dist/cjs/components/*.js"
-    },
-    "./constants": {
-      "types": "./dist/constants/index.d.ts",
-      "import": "./dist/esm/constants/index.js",
-      "require": "./dist/cjs/constants/index.js"
-    },
-    "./constants/*": {
-      "types": "./dist/constants/*.d.ts",
-      "import": "./dist/esm/constants/*.js",
-      "require": "./dist/cjs/constants/*.js"
-    },
-    "./interfaces": {
-      "types": "./dist/interfaces/index.d.ts",
-      "import": "./dist/esm/interfaces/index.js",
-      "require": "./dist/cjs/interfaces/index.js"
-    },
-    "./interfaces/*": {
-      "types": "./dist/interfaces/*.d.ts",
-      "import": "./dist/esm/interfaces/*.js",
-      "require": "./dist/cjs/interfaces/*.js"
-    },
-    "./helpers": {
-      "types": "./dist/helpers/index.d.ts",
-      "import": "./dist/esm/helpers/index.js",
-      "require": "./dist/cjs/helpers/index.js"
-    },
-    "./helpers/*": {
-      "types": "./dist/helpers/*.d.ts",
-      "import": "./dist/esm/helpers/*.js",
-      "require": "./dist/cjs/helpers/*.js"
-    },
-    "./hooks": {
-      "types": "./dist/hooks/index.d.ts",
-      "import": "./dist/esm/hooks/index.js",
-      "require": "./dist/cjs/hooks/index.js"
-    },
-    "./hooks/*": {
-      "types": "./dist/hooks/*.d.ts",
-      "import": "./dist/esm/hooks/*.js",
-      "require": "./dist/cjs/hooks/*.js"
-    },
-    "./mocks": {
-      "types": "./dist/mocks/index.d.ts",
-      "import": "./dist/esm/mocks/index.js",
-      "require": "./dist/cjs/mocks/index.js"
-    },
-    "./mocks/*": {
-      "types": "./dist/mocks/*.d.ts",
-      "import": "./dist/esm/mocks/*.js",
-      "require": "./dist/cjs/mocks/*.js"
-    },
-    "./contextProviders": {
-      "types": "./dist/contextProviders/index.d.ts",
-      "import": "./dist/esm/contextProviders/index.js",
-      "require": "./dist/cjs/contextProviders/index.js"
-    },
-    "./contextProviders/*": {
-      "types": "./dist/contextProviders/*.d.ts",
-      "import": "./dist/esm/contextProviders/*.js",
-      "require": "./dist/cjs/contextProviders/*.js"
-    },
-    "./fonts/*": "./dist/fonts/*",
-    "./styles/*": "./dist/styles/*",
-    "./images/*": "./dist/images/*"
-  },
-  "typesVersions": {
-    "*": {
-      "components/*": [
-        "dist/components/*.d.ts"
-      ],
-      "constants/*": [
-        "dist/constants/*.d.ts"
-      ],
-      "interfaces/*": [
-        "dist/interfaces/*.d.ts"
-      ],
-      "helpers/*": [
-        "dist/helpers/*.d.ts"
-      ],
-      "hooks/*": [
-        "dist/hooks/*.d.ts"
-      ],
-      "mocks/*": [
-        "dist/mocks/*.d.ts"
-      ],
-      "contextProviders/*": [
-        "dist/contextProviders/*.d.ts"
-      ],
-      "components": [
-        "dist/components/index.d.ts"
-      ],
-      "constants": [
-        "dist/constants/index.d.ts"
-      ],
-      "interfaces": [
-        "dist/interfaces/index.d.ts"
-      ],
-      "helpers": [
-        "dist/helpers/index.d.ts"
-      ],
-      "hooks": [
-        "dist/hooks/index.d.ts"
-      ],
-      "mocks": [
-        "dist/mocks/index.d.ts"
-      ],
-      "contextProviders": [
-        "dist/contextProviders/index.d.ts"
-      ],
-      "*": [
-        "dist/*.d.ts"
-      ]
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "version": "3.18.0",
-  "devEngines": {
-    "runtime": {
-      "name": "node",
-      "version": "24.15.0",
-      "onFail": "warn"
-    },
-    "packageManager": {
-      "name": "pnpm",
-      "version": "12.4.1",
-      "onFail": "warn"
-    }
-  },
-  "engines": {
-    "node": "24.15.0"
-  },
-  "packageManager": "pnpm@12.4.1",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/x15ventures/x15-ui-library.git"
-  },
-  "scripts": {
-    "watch": "pnpm watch:react && pnpm watch:sass",
-    "watch:react": "nodemon --watch src --ext ts,tsx --exec 'pnpm build:react'",
-    "watch:sass": "nodemon --watch src/styles --ext scss --exec 'pnpm build:sass'",
-    "build": "",
-    "build:cicd": "pnpm build:sass && pnpm build:react && pnpm build:types && pnpm build:sass && pnpm storybook:styles",
-    "build:local": "pnpm build:react && pnpm storybook:build",
-    "build:react": "run-func buildLibrary.js buildLibrary",
-    "build:sass": "run-func sass.utilities.js buildSassFiles",
-    "build:static": "pnpm build:react && pnpm build:sass",
-    "build:types": "npx tsc --build tsconfig.lib.json --force",
-    "build:ai:docs": "run-func aiTools/scripts/componentAIDocExtractor.js generateDocumentation && pnpm storybook:build && mkdir -p ./aiTools/storybookDocs && cp -R ./storybook-static/* ./aiTools/storybookDocs",
-    "build:ai:library": "run-func buildLibrary.js makeAIReferenceFiles",
-    "build:ai:styles": "node aiTools/scripts/componentAICssExtractor.js",
-    "build:ai:styles:reference": "node aiTools/scripts/buildAiStylesReference.js",
-    "build:ai:concat": "node buildLibrary.ai.bundles.js",
-    "precommit": "lefthook run pre-commit",
-    "eslint": "eslint . --config eslint.config.js",
-    "eslint:fix": "eslint . --config eslint.config.js --fix",
-    "test": "cross-env TZ=UTC jest --config=config/jest/jest.config.cjs --runInBand --silent",
-    "storybook": "./start-storybook.sh && pnpm storybook:styles:watch",
-    "storybook:styles": "sass src/styles/storybook/storybook.scss dist/styles/storybook.css --no-source-map",
-    "storybook:styles:watch": "sass --watch src/styles/storybook/storybook.scss:dist/styles/storybook.css --no-source-map",
-    "storybook:dev": "ttab pnpm watch:sass && ttab pnpm storybook",
-    "storybook:debug": "ttab pnpm watch:sass && ttab pnpm storybook --debug-webpack",
-    "storybook:build": "pnpm install --frozen-lockfile && pnpm build:cicd && storybook build --config-dir config/storybook/web --output-dir ./storybook-static"
-  },
-  "dependencies": {
-    "@x15ventures/x15-ui-library-icons": "1.1.3",
-    "babel-plugin-transform-imports": "2.0.0",
-    "html-react-parser": "5.2.17",
-    "jsdom": "26.1.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-helmet": "6.1.0",
-    "run-func": "3.0.0",
-    "storybook": "10.6.1",
-    "use-debounce": "10.1.1"
-  },
-  "peerDependencies": {
-    "core-js": "3.49.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-hook-form": "7.74.0",
-    "storybook": "10.6.1"
-  },
-  "devDependencies": {
-    "@babel/cli": "7.28.6",
-    "@babel/core": "7.29.6",
-    "@babel/eslint-parser": "7.28.6",
-    "@babel/eslint-plugin": "7.27.1",
-    "@babel/plugin-syntax-jsx": "7.28.6",
-    "@babel/plugin-transform-class-properties": "7.28.6",
-    "@babel/plugin-transform-modules-commonjs": "7.28.6",
-    "@babel/plugin-transform-runtime": "7.29.0",
-    "@babel/preset-env": "7.29.2",
-    "@babel/preset-react": "7.28.5",
-    "@babel/preset-typescript": "7.28.5",
-    "@babel/runtime": "7.29.2",
-    "@commitlint/cli": "20.5.2",
-    "@commitlint/config-conventional": "20.5.0",
-    "@eslint/js": "9.39.4",
-    "@jest/globals": "30.5.2",
-    "@jest/types": "30.5.1",
-    "@mdx-js/mdx": "3.1.1",
-    "@mdx-js/react": "3.1.1",
-    "@rollup/plugin-commonjs": "28.0.9",
-    "@rollup/plugin-node-resolve": "16.0.3",
-    "@rollup/plugin-typescript": "12.3.0",
-    "@semantic-release/changelog": "6.0.3",
-    "@semantic-release/commit-analyzer": "13.0.1",
-    "@semantic-release/exec": "7.1.0",
-    "@semantic-release/git": "10.0.1",
-    "@semantic-release/npm": "12.0.2",
-    "@semantic-release/release-notes-generator": "14.1.0",
-    "@storybook/addon-a11y": "10.6.1",
-    "@storybook/addon-docs": "10.6.1",
-    "@storybook/addon-links": "10.6.1",
-    "@storybook/cli": "10.6.1",
-    "@storybook/mdx2-csf": "1.1.0",
-    "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "10.6.1",
-    "@storybook/react-webpack5": "10.6.1",
-    "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "16.3.2",
-    "@testing-library/user-event": "14.6.1",
-    "@types/enzyme": "3.10.19",
-    "@types/enzyme-adapter-react-16": "1.0.9",
-    "@types/jest": "30.0.0",
-    "@types/node": "20.19.39",
-    "@types/react": "18.3.28",
-    "@types/react-dom": "18.3.7",
-    "@types/react-helmet": "6.1.11",
-    "@types/webpack": "5.28.5",
-    "@types/webpack-env": "1.18.8",
-    "@typescript-eslint/eslint-plugin": "8.59.1",
-    "@typescript-eslint/parser": "8.59.1",
-    "@x15stack/aws": "1.7.2",
-    "autoprefixer": "10.5.0",
-    "babel-jest": "30.5.2",
-    "babel-loader": "9.2.1",
-    "babel-plugin-macros": "3.1.0",
-    "chromatic": "11.29.0",
-    "commitlint": "20.5.3",
-    "cross-env": "7.0.3",
-    "css-loader": "7.1.4",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.8",
-    "esbuild": "0.25.12",
-    "esbuild-sass-plugin": "3.7.0",
-    "eslint": "9.39.4",
-    "eslint-import-resolver-typescript": "4.4.5",
-    "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-jest": "28.14.0",
-    "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-storybook": "10.1.10",
-    "file-loader": "6.2.0",
-    "fs": "0.0.1-security",
-    "fs-extra": "11.3.4",
-    "glob": "13.0.6",
-    "globals": "15.15.0",
-    "jest": "30.5.2",
-    "jest-environment-jsdom": "30.5.2",
-    "lefthook": "1.13.6",
-    "minimatch": "9.0.7",
-    "nodemon": "3.1.14",
-    "npm-run-all": "4.1.5",
-    "null-loader": "4.0.1",
-    "postcss": "8.5.23",
-    "postcss-loader": "8.2.1",
-    "raw-loader": "4.0.2",
-    "react-docgen-typescript": "2.4.0",
-    "react-docgen-typescript-loader": "3.7.2",
-    "react-dropzone": "14.4.1",
-    "react-hook-form": "7.74.0",
-    "sass": "1.99.0",
-    "sass-loader": "16.0.7",
-    "semantic-release": "24.2.9",
-    "style-loader": "4.0.0",
-    "ts-jest": "29.4.14",
-    "tsconfig-paths-webpack-plugin": "4.2.0",
-    "ttab": "0.9.0",
-    "typescript": "5.5.4",
-    "url-loader": "4.1.1",
-    "vitest": "4.1.11"
-  }
+  "main": "./index.js"
 }

package/dist/esm/styles/index.css

@@ -267,6 +267,24 @@
   --skeletonCircleSize: 40px;
   --skeletonLastLineWidth: 60%;
   --skeletonAnimationDuration: 2s;
+  --documentBg: #ffffff;
+  --documentFgColor: inherit;
+  --documentMutedFgColor: #516472;
+  --documentBorder: 1px solid #eef2f4;
+  --documentBorderRadius: 5px;
+  --documentSubtleBg: #f6f8fa;
+  --documentFont: var(--bodyFont);
+  --documentHeadingFont: var(--headingFont);
+  --documentFrameMinHeight: 65vh;
+  --documentPadding: 30px;
+  --documentGap: 10px;
+  --documentAddedBg: color-mix(in srgb, var(--statusSuccessColor, #063) 15%, transparent);
+  --documentAddedFgColor: inherit;
+  --documentAddedBorderColor: var(--statusSuccessColor, #063);
+  --documentRemovedBg: color-mix(in srgb, var(--statusAlertColor, #f00) 12%, transparent);
+  --documentRemovedFgColor: inherit;
+  --documentRemovedBorderColor: var(--statusAlertColor, #f00);
+  --documentErrorColor: var(--statusAlertColor, #f00);
 }
 
 :root {

package/dist/esm/styles/variables/cssVars/_designVariables.css

@@ -229,4 +229,22 @@
   --skeletonCircleSize: 40px;
   --skeletonLastLineWidth: 60%;
   --skeletonAnimationDuration: 2s;
+  --documentBg: #ffffff;
+  --documentFgColor: inherit;
+  --documentMutedFgColor: #516472;
+  --documentBorder: 1px solid #eef2f4;
+  --documentBorderRadius: 5px;
+  --documentSubtleBg: #f6f8fa;
+  --documentFont: var(--bodyFont);
+  --documentHeadingFont: var(--headingFont);
+  --documentFrameMinHeight: 65vh;
+  --documentPadding: 30px;
+  --documentGap: 10px;
+  --documentAddedBg: color-mix(in srgb, var(--statusSuccessColor, #063) 15%, transparent);
+  --documentAddedFgColor: inherit;
+  --documentAddedBorderColor: var(--statusSuccessColor, #063);
+  --documentRemovedBg: color-mix(in srgb, var(--statusAlertColor, #f00) 12%, transparent);
+  --documentRemovedFgColor: inherit;
+  --documentRemovedBorderColor: var(--statusAlertColor, #f00);
+  --documentErrorColor: var(--statusAlertColor, #f00);
 }

package/dist/esm/widgets/documentComments/DocumentComments.js

@@ -0,0 +1,298 @@
+'use client';
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { HeaderBar, SimpleButton, Textarea } from '../../components';
+import { dateToShortReadableDate } from '../../helpers/dateHelpers';
+import { getPreferredScrollBehavior } from '../../helpers/interactionsHelper';
+import { ToggleGroup } from '../shared/documents/ToggleGroup';
+import './documentComments.css';
+export const defaultDocumentCommentsLabels = {
+  heading: 'Comments',
+  filter: 'Show comments',
+  open: count => `Open (${count})`,
+  resolved: count => `Resolved (${count})`,
+  newPinnedComment: 'Comment on the selected text',
+  newGeneralComment: 'Comment on the document',
+  post: 'Post comment',
+  cancel: 'Cancel',
+  reply: 'Reply',
+  replyTo: authorName => `Reply to ${authorName}`,
+  sendReply: 'Send reply',
+  resolve: 'Resolve',
+  reopen: 'Reopen',
+  showInDocument: 'Show in document',
+  detached: 'The text this comment was on has changed or been removed.',
+  generalComment: 'General comment',
+  noOpenComments: 'There are no open comments.',
+  noResolvedComments: 'There are no resolved comments.',
+  quoteLabel: 'Commented text'
+};
+const CommentHeader = ({
+  authorName,
+  createdAt,
+  formatDate
+}) => /*#__PURE__*/React.createElement("div", {
+  className: "documentComments__cardHeader"
+}, /*#__PURE__*/React.createElement("span", {
+  className: "documentComments__author"
+}, authorName), /*#__PURE__*/React.createElement("time", {
+  className: "documentComments__date",
+  dateTime: createdAt
+}, formatDate(createdAt) ?? createdAt));
+
+/*
+  DocumentComments lists a document's comment threads and lets people add comments (on selected
+  text or the whole document), reply, and resolve or reopen them. The host application owns the
+  comment data and persistence; this widget renders it and reports actions through callbacks.
+ */
+export const DocumentComments = ({
+  id,
+  comments,
+  headingLevel = 3,
+  selectedCommentId,
+  pendingAnchor = null,
+  detachedCommentIds = [],
+  canComment: canCommentRequested = true,
+  canReply: canReplyRequested = canCommentRequested,
+  canResolve: canResolveRequested = canCommentRequested,
+  allowGeneralComments = true,
+  initialFilter = 'open',
+  formatDate = dateToShortReadableDate,
+  onAddComment,
+  onReply,
+  onToggleResolved,
+  onSelectComment,
+  onCancelPending,
+  headerActions,
+  labels: customLabels,
+  customCssClasses = {}
+}) => {
+  const labels = useMemo(() => ({
+    ...defaultDocumentCommentsLabels,
+    ...customLabels
+  }), [customLabels]);
+  // An action is only offered when the host can act on it; otherwise a submitted draft would be lost.
+  const canComment = canCommentRequested && Boolean(onAddComment);
+  const canReply = canReplyRequested && Boolean(onReply);
+  const canResolve = canResolveRequested && Boolean(onToggleResolved);
+  // Untyped because the library's form fields accept a generic form context.
+  const formMethods = useForm({
+    defaultValues: {
+      newComment: '',
+      reply: ''
+    }
+  });
+  const [filter, setFilter] = useState(initialFilter);
+  const [replyingToId, setReplyingToId] = useState(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const cardRefs = useRef(new Map());
+  const newComment = String(formMethods.watch('newComment') ?? '');
+  const reply = String(formMethods.watch('reply') ?? '');
+  const openComments = comments.filter(comment => !comment.resolved);
+  const resolvedComments = comments.filter(comment => comment.resolved);
+  const displayedComments = filter === 'open' ? openComments : resolvedComments;
+  const showNewCommentForm = canComment && filter === 'open' && (pendingAnchor !== null || allowGeneralComments);
+
+  // A new selection is commented on in the open list, so switch to it.
+  useEffect(() => {
+    if (pendingAnchor) {
+      setFilter('open');
+    }
+  }, [pendingAnchor]);
+
+  // Read through a ref so only a change of selection scrolls the list, not new comments or replies.
+  const commentsRef = useRef(comments);
+  commentsRef.current = comments;
+
+  // Bring the selected thread into view, e.g. after its bubble is chosen in the document.
+  useEffect(() => {
+    const selected = commentsRef.current.find(comment => comment.id === selectedCommentId);
+    if (!selected) {
+      return;
+    }
+    setFilter(selected.resolved ? 'resolved' : 'open');
+    cardRefs.current.get(selected.id)?.scrollIntoView?.({
+      block: 'nearest',
+      behavior: getPreferredScrollBehavior()
+    });
+  }, [selectedCommentId]);
+  const submit = async (action, field) => {
+    setIsSubmitting(true);
+    try {
+      await action();
+      formMethods.setValue(field, '');
+      return true;
+    } catch {
+      // The host's callback reports the failure; the draft is kept so it can be retried.
+      return false;
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handlePost = async () => {
+    const content = newComment.trim();
+    if (!content || !onAddComment) {
+      return;
+    }
+    const posted = await submit(() => onAddComment({
+      content,
+      ...(pendingAnchor ? {
+        anchor: pendingAnchor
+      } : {})
+    }), 'newComment');
+    if (posted && pendingAnchor) {
+      onCancelPending?.();
+    }
+  };
+  const handleCancelPending = () => {
+    formMethods.setValue('newComment', '');
+    onCancelPending?.();
+  };
+  const handleReply = async commentId => {
+    const content = reply.trim();
+    if (content && onReply && (await submit(() => onReply(commentId, content), 'reply'))) {
+      setReplyingToId(null);
+    }
+  };
+  const openReply = commentId => {
+    formMethods.setValue('reply', '');
+    setReplyingToId(commentId);
+  };
+  const renderThread = comment => {
+    const isSelected = comment.id === selectedCommentId;
+    const isDetached = Boolean(comment.anchor) && detachedCommentIds.includes(comment.id);
+    const cardClasses = ['documentComments__card', isSelected ? 'documentComments__card--selected' : '', comment.resolved ? 'documentComments__card--resolved' : '', isDetached ? 'documentComments__card--detached' : '', customCssClasses.card || ''].filter(Boolean).join(' ');
+    return /*#__PURE__*/React.createElement("li", {
+      key: comment.id,
+      ref: element => {
+        if (element) {
+          cardRefs.current.set(comment.id, element);
+        } else {
+          cardRefs.current.delete(comment.id);
+        }
+      },
+      className: cardClasses,
+      "aria-current": isSelected ? 'true' : undefined
+    }, /*#__PURE__*/React.createElement(CommentHeader, {
+      authorName: comment.author.name,
+      createdAt: comment.createdAt,
+      formatDate: formatDate
+    }), comment.anchor ? /*#__PURE__*/React.createElement("blockquote", {
+      className: "documentComments__quote",
+      "aria-label": labels.quoteLabel
+    }, comment.anchor.exact) : /*#__PURE__*/React.createElement("p", {
+      className: "documentComments__general"
+    }, labels.generalComment), isDetached && /*#__PURE__*/React.createElement("p", {
+      className: "documentComments__detached"
+    }, labels.detached), /*#__PURE__*/React.createElement("p", {
+      className: "documentComments__content"
+    }, comment.content), comment.replies?.length ? /*#__PURE__*/React.createElement("ul", {
+      className: "documentComments__replies"
+    }, comment.replies.map(replyItem => /*#__PURE__*/React.createElement("li", {
+      key: replyItem.id,
+      className: "documentComments__reply"
+    }, /*#__PURE__*/React.createElement(CommentHeader, {
+      authorName: replyItem.author.name,
+      createdAt: replyItem.createdAt,
+      formatDate: formatDate
+    }), /*#__PURE__*/React.createElement("p", {
+      className: "documentComments__content"
+    }, replyItem.content)))) : null, replyingToId === comment.id ? /*#__PURE__*/React.createElement("div", {
+      className: "documentComments__replyForm"
+    }, /*#__PURE__*/React.createElement(Textarea, {
+      formContext: formMethods,
+      label: {
+        text: labels.replyTo(comment.author.name)
+      },
+      field: {
+        id: `${id}_reply_${comment.id}`,
+        name: 'reply'
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "documentComments__actions"
+    }, /*#__PURE__*/React.createElement(SimpleButton, {
+      id: `${id}_cancelReply_${comment.id}`,
+      label: labels.cancel,
+      cssClass: "button secondary outline compact",
+      onClickHandler: () => setReplyingToId(null)
+    }), /*#__PURE__*/React.createElement(SimpleButton, {
+      id: `${id}_sendReply_${comment.id}`,
+      label: labels.sendReply,
+      cssClass: "button primary compact",
+      disabled: !reply.trim() || isSubmitting,
+      onClickHandler: () => handleReply(comment.id)
+    }))) : /*#__PURE__*/React.createElement("div", {
+      className: "documentComments__actions"
+    }, comment.anchor && !isDetached && onSelectComment && /*#__PURE__*/React.createElement(SimpleButton, {
+      id: `${id}_show_${comment.id}`,
+      label: labels.showInDocument,
+      cssClass: "button secondary text-only compact",
+      ariaPressed: isSelected,
+      onClickHandler: () => onSelectComment?.(comment.id)
+    }), canReply && !comment.resolved && /*#__PURE__*/React.createElement(SimpleButton, {
+      id: `${id}_reply_${comment.id}`,
+      label: labels.reply,
+      cssClass: "button secondary outline compact",
+      onClickHandler: () => openReply(comment.id)
+    }), canResolve && /*#__PURE__*/React.createElement(SimpleButton, {
+      id: `${id}_resolve_${comment.id}`,
+      label: comment.resolved ? labels.reopen : labels.resolve,
+      cssClass: "button secondary outline compact",
+      onClickHandler: () => onToggleResolved?.(comment.id, !comment.resolved)
+    })));
+  };
+  return /*#__PURE__*/React.createElement("section", {
+    id: id,
+    className: `documentComments ${customCssClasses.wrapper || ''}`.trim(),
+    "aria-label": labels.heading
+  }, /*#__PURE__*/React.createElement(HeaderBar, {
+    text: labels.heading,
+    headingLevel: headingLevel
+  }, headerActions), /*#__PURE__*/React.createElement(ToggleGroup, {
+    id: `${id}_filter`,
+    legend: labels.filter,
+    value: filter,
+    onChange: setFilter,
+    options: [{
+      value: 'open',
+      label: labels.open(openComments.length)
+    }, {
+      value: 'resolved',
+      label: labels.resolved(resolvedComments.length)
+    }]
+  }), showNewCommentForm && /*#__PURE__*/React.createElement("div", {
+    className: `documentComments__form ${customCssClasses.form || ''}`.trim()
+  }, pendingAnchor && /*#__PURE__*/React.createElement("blockquote", {
+    className: "documentComments__quote",
+    "aria-label": labels.quoteLabel
+  }, pendingAnchor.exact), /*#__PURE__*/React.createElement(Textarea, {
+    formContext: formMethods,
+    label: {
+      text: pendingAnchor ? labels.newPinnedComment : labels.newGeneralComment
+    },
+    field: {
+      id: `${id}_newComment`,
+      name: 'newComment'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "documentComments__actions"
+  }, pendingAnchor && /*#__PURE__*/React.createElement(SimpleButton, {
+    id: `${id}_cancelPending`,
+    label: labels.cancel,
+    cssClass: "button secondary outline compact",
+    onClickHandler: handleCancelPending
+  }), /*#__PURE__*/React.createElement(SimpleButton, {
+    id: `${id}_post`,
+    label: labels.post,
+    cssClass: "button primary compact",
+    disabled: !newComment.trim() || isSubmitting,
+    onClickHandler: handlePost
+  }))), displayedComments.length ? /*#__PURE__*/React.createElement("ul", {
+    className: `documentComments__list ${customCssClasses.list || ''}`.trim()
+  }, displayedComments.map(renderThread)) : /*#__PURE__*/React.createElement("p", {
+    className: "documentComments__empty"
+  }, filter === 'open' ? labels.noOpenComments : labels.noResolvedComments));
+};
+export default DocumentComments;
+//# sourceMappingURL=DocumentComments.js.map