@cord-sdk/react - npm Package Compare versions

Comparing version 0.0.45 to 0.0.46

dist/cjs/index.js

@@ -9,4 +9,2 @@ 'use strict';
 var cx = require('classnames');
-require('./common/ui/atomicClasses/fonts.css.ts.vanilla.css');
-require('./components/ThreadedComments.css.ts.vanilla.css');
 
@@ -180,3 +178,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
                 navigate,
-                react_package_version: "0.0.45",
+                react_package_version: "0.0.46",
                 thread_options: threadOptions
@@ -678,3 +676,4 @@ ? {
 function Message(props) {
-    return (React__namespace.createElement("cord-message", { id: props.id, class: props.className, style: props.style, ...propsToAttributes$2(props) }));
+    var _a;
+    return (React__namespace.createElement("cord-message", { id: props.id, class: props.className, style: props.style, "use-shadow-root": (_a = props.useShadowRoot) !== null && _a !== void 0 ? _a : false, ...propsToAttributes$2(props) }));
 }
@@ -1082,8 +1081,9 @@
 
+// Removed css;
 var fontSmall = 'cord-font-small';
 
+// Removed css;
 var avatar = 'cord-avatar';
 var comments = 'cord-threaded-comments';
 var commentsThread = 'cord-threaded-comments-thread';
-var composer = 'cord-composer';
 var firstThreadMessage = 'cord-first-thread-message';
@@ -1093,3 +1093,2 @@ var hr = 'cord-hr';
 var replyMessages = 'cord-reply-messages';
-var reverseOrder = 'cord-reverse-order';
 var threadActionButtonWithReplies = 'cord-thread-action-button-with-replies';
@@ -1107,11 +1106,17 @@ var threadList = 'cord-thread-list';
     });
-    return (React__namespace.createElement("div", { className: cx__default["default"](comments, {
-            [reverseOrder]: composerPosition === 'bottom',
-        }) },
-        React__namespace.createElement(Composer, { location: location, showExpanded: composerExpanded }),
-        React__namespace.createElement("div", { className: cx__default["default"](threadList, {
-                [reverseOrder]: messageOrder === 'newest_on_bottom',
-            }) },
-            threads.map((oneThread) => (React__namespace.createElement(CommentsThread, { key: oneThread.id, threadId: oneThread.id }))),
-            hasMore && (React__namespace.createElement("button", { className: cx__default["default"](messageActionButton, fontSmall, hr), onClick: () => fetchMore(5) }, 'Fetch more')))));
+    const renderedThreads = threads.map((oneThread) => (React__namespace.createElement(CommentsThread, { key: oneThread.id, threadId: oneThread.id })));
+    const newestOnTop = messageOrder === 'newest_on_top';
+    if (!newestOnTop) {
+        renderedThreads.reverse();
+    }
+    const fetchMoreButton = hasMore && (React__namespace.createElement("button", { className: cx__default["default"](messageActionButton, fontSmall, hr), onClick: () => fetchMore(5) }, 'Fetch more'));
+    const composerOnTop = composerPosition === 'top';
+    const composer = (React__namespace.createElement(Composer, { location: location, showExpanded: composerExpanded }));
+    return (React__namespace.createElement("div", { className: comments },
+        composerOnTop && composer,
+        React__namespace.createElement("div", { className: threadList },
+            !newestOnTop && fetchMoreButton,
+            renderedThreads,
+            newestOnTop && fetchMoreButton),
+        !composerOnTop && composer));
 }
@@ -1164,3 +1169,3 @@ function CommentsThread({ threadId }) {
         userId && React__namespace.createElement(Avatar, { userId: userId, className: avatar }),
-        React__namespace.createElement(Composer, { threadId: threadId, className: composer, showCloseButton: true, onClose: () => setShowingReplyComposer(false), size: 'small' })));
+        React__namespace.createElement(Composer, { threadId: threadId, showCloseButton: true, onClose: () => setShowingReplyComposer(false), size: 'small' })));
 }
@@ -1167,0 +1172,0 @@ function ReplyButton({ onClick }) {

dist/mjs/common/ui/modifiers.d.ts

@@ -12,2 +12,3 @@ export declare const MODIFIERS: {
     highlighted: string;
+    error: string;
     extraLarge: string;
@@ -14,0 +15,0 @@ large: string;

dist/mjs/components/Message.d.ts

@@ -1,6 +0,6 @@
-import type { ReactPropsWithStandardHTMLAttributes } from '../types';
-export type MessageReactComponentProps = {
+import type { PropsWithFlags, ReactPropsWithStandardHTMLAttributes } from '../types';
+export type MessageReactComponentProps = PropsWithFlags<{
     threadId: string;
     messageId?: string;
-};
+}>;
 export declare function Message(props: ReactPropsWithStandardHTMLAttributes<MessageReactComponentProps>): JSX.Element;

dist/mjs/components/ThreadedComments.css.d.ts

 export declare const comments: string;
 export declare const threadList: string;
-export declare const reverseOrder: string;
 export declare const commentsThread: string;
@@ -12,4 +11,3 @@ export declare const hr: string;
 export declare const messageActionButton: string;
-export declare const composer: string;
 export declare const viewerAvatarWithComposer: string;
 export declare const avatar: string;

dist/mjs/index.js

@@ -6,4 +6,2 @@ import * as React from 'react';
 import cx from 'classnames';
-import './common/ui/atomicClasses/fonts.css.ts.vanilla.css';
-import './components/ThreadedComments.css.ts.vanilla.css';
 
@@ -154,3 +152,3 @@ // This function determines if X has property Y and does so in a
                 navigate,
-                react_package_version: "0.0.45",
+                react_package_version: "0.0.46",
                 thread_options: threadOptions
@@ -652,3 +650,4 @@ ? {
 function Message(props) {
-    return (React.createElement("cord-message", { id: props.id, class: props.className, style: props.style, ...propsToAttributes$2(props) }));
+    var _a;
+    return (React.createElement("cord-message", { id: props.id, class: props.className, style: props.style, "use-shadow-root": (_a = props.useShadowRoot) !== null && _a !== void 0 ? _a : false, ...propsToAttributes$2(props) }));
 }
@@ -1056,8 +1055,9 @@
 
+// Removed css;
 var fontSmall = 'cord-font-small';
 
+// Removed css;
 var avatar = 'cord-avatar';
 var comments = 'cord-threaded-comments';
 var commentsThread = 'cord-threaded-comments-thread';
-var composer = 'cord-composer';
 var firstThreadMessage = 'cord-first-thread-message';
@@ -1067,3 +1067,2 @@ var hr = 'cord-hr';
 var replyMessages = 'cord-reply-messages';
-var reverseOrder = 'cord-reverse-order';
 var threadActionButtonWithReplies = 'cord-thread-action-button-with-replies';
@@ -1081,11 +1080,17 @@ var threadList = 'cord-thread-list';
     });
-    return (React.createElement("div", { className: cx(comments, {
-            [reverseOrder]: composerPosition === 'bottom',
-        }) },
-        React.createElement(Composer, { location: location, showExpanded: composerExpanded }),
-        React.createElement("div", { className: cx(threadList, {
-                [reverseOrder]: messageOrder === 'newest_on_bottom',
-            }) },
-            threads.map((oneThread) => (React.createElement(CommentsThread, { key: oneThread.id, threadId: oneThread.id }))),
-            hasMore && (React.createElement("button", { className: cx(messageActionButton, fontSmall, hr), onClick: () => fetchMore(5) }, 'Fetch more')))));
+    const renderedThreads = threads.map((oneThread) => (React.createElement(CommentsThread, { key: oneThread.id, threadId: oneThread.id })));
+    const newestOnTop = messageOrder === 'newest_on_top';
+    if (!newestOnTop) {
+        renderedThreads.reverse();
+    }
+    const fetchMoreButton = hasMore && (React.createElement("button", { className: cx(messageActionButton, fontSmall, hr), onClick: () => fetchMore(5) }, 'Fetch more'));
+    const composerOnTop = composerPosition === 'top';
+    const composer = (React.createElement(Composer, { location: location, showExpanded: composerExpanded }));
+    return (React.createElement("div", { className: comments },
+        composerOnTop && composer,
+        React.createElement("div", { className: threadList },
+            !newestOnTop && fetchMoreButton,
+            renderedThreads,
+            newestOnTop && fetchMoreButton),
+        !composerOnTop && composer));
 }
@@ -1138,3 +1143,3 @@ function CommentsThread({ threadId }) {
         userId && React.createElement(Avatar, { userId: userId, className: avatar }),
-        React.createElement(Composer, { threadId: threadId, className: composer, showCloseButton: true, onClose: () => setShowingReplyComposer(false), size: 'small' })));
+        React.createElement(Composer, { threadId: threadId, showCloseButton: true, onClose: () => setShowingReplyComposer(false), size: 'small' })));
 }
@@ -1141,0 +1146,0 @@ function ReplyButton({ onClick }) {

package.json

 {
   "name": "@cord-sdk/react",
   "description": "React components for Cord",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "homepage": "https://docs.cord.com/",
@@ -22,4 +22,4 @@ "license": "MIT",
   "dependencies": {
-    "@cord-sdk/components": "0.0.45",
-    "@cord-sdk/types": "0.0.45",
+    "@cord-sdk/components": "0.0.46",
+    "@cord-sdk/types": "0.0.46",
     "classnames": "^2.3.1"
@@ -31,3 +31,3 @@ },
   "devDependencies": {
-    "@cord-sdk/jsx": "0.0.45",
+    "@cord-sdk/jsx": "0.0.46",
     "@types/react": "^17.0.43",
@@ -34,0 +34,0 @@ "@vanilla-extract/css": "^1.10.0",

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

179289

decreased by-4.55%

Number of package files

60

decreased by-6.25%

Lines of code

3667

decreased by-7.02%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@cord-sdk/components@0.0.46(transitive)

• + Added@cord-sdk/types@0.0.46(transitive)

• - Removed@cord-sdk/components@0.0.45(transitive)

• - Removed@cord-sdk/types@0.0.45(transitive)

• Updated@cord-sdk/components@0.0.46

• Updated@cord-sdk/types@0.0.46