feedtack 0.2.1 → 0.3.0

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { F as FeedtackAdapter, o as FeedtackUser, n as FeedtackTheme } from '../theme-C-uctIoI.js';
+import { F as FeedtackAdapter, o as FeedtackUser, n as FeedtackTheme, e as FeedbackItem } from '../theme-C-uctIoI.js';
 
 interface FeedtackClasses {
     button?: string;
@@ -24,8 +24,10 @@ interface FeedtackProviderProps {
     sentimentLabels?: FeedtackSentimentLabels;
     onError?: (err: Error) => void;
     disabled?: boolean;
+    /** Render custom content inside a submitted pin marker. Receives the feedback item. */
+    renderPinIcon?: (item: FeedbackItem) => React.ReactNode;
 }
-declare function FeedtackProvider({ children, adapter, currentUser, hotkey, adminOnly, theme, classes, sentimentLabels, onError, disabled, }: FeedtackProviderProps): react_jsx_runtime.JSX.Element;
+declare function FeedtackProvider({ children, adapter, currentUser, hotkey, adminOnly, theme, classes, sentimentLabels, onError, disabled, renderPinIcon, }: FeedtackProviderProps): react_jsx_runtime.JSX.Element;
 
 interface FeedtackContextValue {
     activatePinMode: () => void;

package/dist/react/index.js

@@ -66,17 +66,27 @@ function CommentForm({
       className: cx("feedtack-form", classes.form),
       style: { position: "fixed", ...formPos },
       children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "feedtack-comment", className: "feedtack-sr-only", children: "Feedback comment" }),
         /* @__PURE__ */ jsx(
           "textarea",
           {
+            id: "feedtack-comment",
             className: commentError ? "error" : "",
             placeholder: "What's the issue? (required)",
             value: comment,
             onChange: (e) => onCommentChange(e.target.value),
-            ref: (el) => el?.focus()
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                onSubmit();
+              }
+            },
+            ref: (el) => el?.focus(),
+            "aria-describedby": commentError ? "feedtack-comment-error" : void 0,
+            "aria-invalid": commentError || void 0
           }
         ),
-        commentError && /* @__PURE__ */ jsx("span", { className: "feedtack-error-msg", children: "Comment is required" }),
+        commentError && /* @__PURE__ */ jsx("span", { id: "feedtack-comment-error", className: "feedtack-error-msg", children: "Comment is required" }),
         /* @__PURE__ */ jsxs("div", { className: "feedtack-sentiment", children: [
           /* @__PURE__ */ jsx(
             "button",
@@ -308,6 +318,22 @@ var FEEDTACK_STYLES = `
     pointer-events: all;
   }
 
+  .feedtack-pin-resolved { opacity: 0.6; }
+
+  .feedtack-pin-icon {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: rotate(45deg);
+    font-size: 12px;
+    font-weight: 700;
+    color: #fff;
+    line-height: 1;
+    pointer-events: none;
+  }
+
   .feedtack-pin-badge {
     position: absolute;
     top: -4px;
@@ -455,6 +481,11 @@ var FEEDTACK_STYLES = `
     gap: 10px;
   }
 
+  .feedtack-sr-only {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
+  }
+
   .feedtack-loading {
     position: fixed;
     bottom: 70px;
@@ -772,7 +803,8 @@ function FeedtackProvider({
   classes = {},
   sentimentLabels = {},
   onError,
-  disabled = false
+  disabled = false,
+  renderPinIcon
 }) {
   const state = useFeedtackState({
     adapter,
@@ -809,6 +841,8 @@ function FeedtackProvider({
             ),
             onClick: () => state.isPinModeActive ? state.deactivatePinMode() : state.activatePinMode(),
             title: "Toggle feedback pin mode",
+            "aria-label": "Toggle feedback pin mode",
+            "aria-pressed": state.isPinModeActive,
             children: [
               "Drop Pin [Shift+",
               hotkey.toUpperCase(),
@@ -864,11 +898,15 @@ function FeedtackProvider({
         ),
         !state.loading && state.feedbackItems.filter((item) => item.payload.page.pathname === state.pathname).filter((item) => !state.isArchivedForUser(item)).filter((item) => state.hasValidPins(item)).map((item) => {
           const pin = item.payload.pins[0];
-          return /* @__PURE__ */ jsx3(
+          return /* @__PURE__ */ jsxs3(
             "button",
             {
               type: "button",
-              className: cx("feedtack-pin-marker", classes.pinMarker),
+              className: cx(
+                "feedtack-pin-marker",
+                item.resolutions.length > 0 && "feedtack-pin-resolved",
+                classes.pinMarker
+              ),
               style: {
                 background: pin.color,
                 left: pin.x,
@@ -879,7 +917,18 @@ function FeedtackProvider({
               onClick: () => state.setOpenThreadId(
                 state.openThreadId === item.payload.id ? null : item.payload.id
               ),
-              children: state.hasUnread(item) && /* @__PURE__ */ jsx3("div", { className: "feedtack-pin-badge" })
+              children: [
+                renderPinIcon ? /* @__PURE__ */ jsx3("span", { className: "feedtack-pin-icon", children: renderPinIcon(item) }) : item.resolutions.length > 0 && /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    className: "feedtack-pin-icon",
+                    role: "img",
+                    "aria-label": "Resolved",
+                    children: "\u2713"
+                  }
+                ),
+                state.hasUnread(item) && /* @__PURE__ */ jsx3("div", { className: "feedtack-pin-badge" })
+              ]
             },
             item.payload.id
           );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feedtack",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Click anywhere. Drop a pin. Get a payload a developer can act on.",
   "type": "module",
   "license": "MIT",