@uniformdev/mesh-sdk-react 19.119.0 → 19.121.1-alpha.3

package/LICENSE.txt

@@ -1,2 +1,2 @@
-© 2023 Uniform Systems, Inc. All Rights Reserved.
+© 2024 Uniform Systems, Inc. All Rights Reserved.
 See details of Uniform Systems, Inc. Master Subscription Agreement here: https://uniform.dev/eula

package/dist/index.d.mts

@@ -1359,11 +1359,11 @@ type ObjectSearchListItemProps = SelectedItemProps & {
     isMulti?: boolean;
     /** sets disabled state to the interactive element */
     disabled?: boolean;
-};
+} & React$1.HTMLAttributes<HTMLDivElement>;
 /**
  * @description entry search list item is an opinionated UI component best used for initial retrieved results
  * @example <ObjectSearchListItem  id="my-result-item" title="title" popoverData={<p>some data info</p>}><div>example of uncontrolled content</div></ObjectSearchListItem> */
-declare const ObjectSearchListItem: ({ id, title, contentType, image, imageUrl, popoverData, onSelect, isMulti, disabled, children, }: ObjectSearchListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ObjectSearchListItem: ({ id, title, contentType, image, imageUrl, popoverData, onSelect, isMulti, disabled, children, ...props }: ObjectSearchListItemProps & React$1.HTMLAttributes<HTMLDivElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 /**
  * An opinionated loading skeleton component best used with ObjectSearchListItem
  * @example <ObjectSearchListItemLoadingSkeleton />
@@ -1415,6 +1415,8 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
      * @default 'Selected'
      */
     resultLabelText?: string;
+    /** sets and override react node replacing the whole HTML block for the result label and counter */
+    resultLabelOverride?: ReactNode;
     /** sets the on remove button click action */
     onRemoveAllSelected?: () => void;
     /** sets the remove button text
@@ -1426,9 +1428,9 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
      */
     hideRemoveButton?: boolean;
     /** allows additional buttons to be added to the result title group */
-    additionalButtons?: React.ReactNode;
+    additionalButtons?: React__default.ReactNode;
     /** allows placing child components within the result list area */
-    renderResultComponent?: (value: TRenderComponent) => React.ReactNode;
+    renderResultComponent?: (value: TRenderComponent) => React__default.ReactNode;
     /** disable or enable drag and drop functionality
      * @default false
      */
@@ -1436,7 +1438,7 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
     /** sets the draggable id value */
     multiSelectId?: string;
     /** Rendered when nothing is selected */
-    whenNothingSelected?: React.ReactNode;
+    whenNothingSelected?: React__default.ReactNode;
     /**
      *  Special case for re-parenting the drag and drop container in case of issues with "position: fixed" and "transform:
      * You can read more about this here https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/reparenting.md
@@ -1450,7 +1452,7 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
  * maintain drag and drop functionality
  * @example <ObjectSearchResultList id="my-id" title="title" renderResultComponent={(values) => <CustomComponent {...values} />} />
  */
-declare function ObjectSearchResultList<TRenderComponent extends SelectedItemProps = SelectedItemProps>({ resultLabelText, removeButtonText, onRemoveAllSelected, hideRemoveButton, additionalButtons, renderResultComponent, multiSelectId, disableDnD, getContainerForDnDReparenting, whenNothingSelected, }: ObjectSearchResultListProps<TRenderComponent>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function ObjectSearchResultList<TRenderComponent extends SelectedItemProps = SelectedItemProps>({ resultLabelText, removeButtonText, onRemoveAllSelected, hideRemoveButton, resultLabelOverride, additionalButtons, renderResultComponent, multiSelectId, disableDnD, getContainerForDnDReparenting, whenNothingSelected, }: ObjectSearchResultListProps<TRenderComponent>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type QueryFilterSearchProps = {
     /** sets the count value */

package/dist/index.d.ts

@@ -1359,11 +1359,11 @@ type ObjectSearchListItemProps = SelectedItemProps & {
     isMulti?: boolean;
     /** sets disabled state to the interactive element */
     disabled?: boolean;
-};
+} & React$1.HTMLAttributes<HTMLDivElement>;
 /**
  * @description entry search list item is an opinionated UI component best used for initial retrieved results
  * @example <ObjectSearchListItem  id="my-result-item" title="title" popoverData={<p>some data info</p>}><div>example of uncontrolled content</div></ObjectSearchListItem> */
-declare const ObjectSearchListItem: ({ id, title, contentType, image, imageUrl, popoverData, onSelect, isMulti, disabled, children, }: ObjectSearchListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ObjectSearchListItem: ({ id, title, contentType, image, imageUrl, popoverData, onSelect, isMulti, disabled, children, ...props }: ObjectSearchListItemProps & React$1.HTMLAttributes<HTMLDivElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 /**
  * An opinionated loading skeleton component best used with ObjectSearchListItem
  * @example <ObjectSearchListItemLoadingSkeleton />
@@ -1415,6 +1415,8 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
      * @default 'Selected'
      */
     resultLabelText?: string;
+    /** sets and override react node replacing the whole HTML block for the result label and counter */
+    resultLabelOverride?: ReactNode;
     /** sets the on remove button click action */
     onRemoveAllSelected?: () => void;
     /** sets the remove button text
@@ -1426,9 +1428,9 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
      */
     hideRemoveButton?: boolean;
     /** allows additional buttons to be added to the result title group */
-    additionalButtons?: React.ReactNode;
+    additionalButtons?: React__default.ReactNode;
     /** allows placing child components within the result list area */
-    renderResultComponent?: (value: TRenderComponent) => React.ReactNode;
+    renderResultComponent?: (value: TRenderComponent) => React__default.ReactNode;
     /** disable or enable drag and drop functionality
      * @default false
      */
@@ -1436,7 +1438,7 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
     /** sets the draggable id value */
     multiSelectId?: string;
     /** Rendered when nothing is selected */
-    whenNothingSelected?: React.ReactNode;
+    whenNothingSelected?: React__default.ReactNode;
     /**
      *  Special case for re-parenting the drag and drop container in case of issues with "position: fixed" and "transform:
      * You can read more about this here https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/reparenting.md
@@ -1450,7 +1452,7 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
  * maintain drag and drop functionality
  * @example <ObjectSearchResultList id="my-id" title="title" renderResultComponent={(values) => <CustomComponent {...values} />} />
  */
-declare function ObjectSearchResultList<TRenderComponent extends SelectedItemProps = SelectedItemProps>({ resultLabelText, removeButtonText, onRemoveAllSelected, hideRemoveButton, additionalButtons, renderResultComponent, multiSelectId, disableDnD, getContainerForDnDReparenting, whenNothingSelected, }: ObjectSearchResultListProps<TRenderComponent>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function ObjectSearchResultList<TRenderComponent extends SelectedItemProps = SelectedItemProps>({ resultLabelText, removeButtonText, onRemoveAllSelected, hideRemoveButton, resultLabelOverride, additionalButtons, renderResultComponent, multiSelectId, disableDnD, getContainerForDnDReparenting, whenNothingSelected, }: ObjectSearchResultListProps<TRenderComponent>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type QueryFilterSearchProps = {
     /** sets the count value */

package/dist/index.esm.js

@@ -4076,32 +4076,41 @@ var menuBtn2 = css21`
   transform: translateY(-50%);
 `;
 var input = css21`
+  --input-padding: 12px var(--spacing-base) 12px var(--spacing-sm);
   appearance: none;
   background-color: var(--white);
-  border: 1px solid var(--gray-200);
+  border: 1px solid var(--gray-300);
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
-  padding-block: var(--spacing-base);
-  padding-left: var(--spacing-base);
-  padding-right: var(--spacing-lg);
-  line-height: 1.75;
+  padding: var(--input-padding);
+  min-height: 50px;
   width: 100%;
   position: relative;
   transition: background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out);
+    color var(--duration-fast) var(--timing-ease-out), box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  &::placeholder {
+    color: var(--gray-400);
+  }
+
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
 
+  &[data-focus='true'],
   &:focus,
   &:focus-within {
-    border-color: var(--typography-base);
-    box-shadow: none;
+    border-color: var(--accent-dark-active);
+    box-shadow: var(--elevation-100);
     outline: none;
   }
 
+  &[data-disabled='true'],
   &:disabled,
   &:disabled::placeholder {
     cursor: not-allowed;
-    color: var(--gray-400);
+    color: var(--gray-300);
     border-color: var(--gray-300);
   }
 
@@ -6386,7 +6395,8 @@ var ObjectSearchListItem = ({
   onSelect,
   isMulti,
   disabled,
-  children
+  children,
+  ...props
 }) => {
   const { onSelectItem, selectedListItems, isMulti: globalIsMulti } = useObjectSearchContext();
   const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
@@ -6406,6 +6416,7 @@ var ObjectSearchListItem = ({
       role: "listitem",
       css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
       "data-testid": "list-item",
+      ...props,
       children: [
         /* @__PURE__ */ jsxs34(
           "div",
@@ -6840,6 +6851,7 @@ function ObjectSearchResultList({
   removeButtonText = "Remove all",
   onRemoveAllSelected,
   hideRemoveButton = false,
+  resultLabelOverride,
   additionalButtons,
   renderResultComponent = (value) => /* @__PURE__ */ jsx66(ObjectSearchResultItem, { ...value }),
   multiSelectId,
@@ -6885,11 +6897,11 @@ function ObjectSearchResultList({
   };
   return /* @__PURE__ */ jsxs40(Fragment13, { children: [
     /* @__PURE__ */ jsxs40("div", { role: "group", css: ObjectSearchResultListContainer, children: [
-      /* @__PURE__ */ jsxs40("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
+      !resultLabelOverride ? /* @__PURE__ */ jsxs40("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
         /* @__PURE__ */ jsx66("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
         !selectedListItems.length ? null : /* @__PURE__ */ jsx66(Counter, { count: selectedListItems.length })
-      ] }),
+      ] }) : resultLabelOverride,
       /* @__PURE__ */ jsxs40("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
         hideRemoveButton ? null : /* @__PURE__ */ jsx66(

package/dist/index.js

@@ -4255,32 +4255,41 @@ var menuBtn2 = import_react42.css`
   transform: translateY(-50%);
 `;
 var input = import_react42.css`
+  --input-padding: 12px var(--spacing-base) 12px var(--spacing-sm);
   appearance: none;
   background-color: var(--white);
-  border: 1px solid var(--gray-200);
+  border: 1px solid var(--gray-300);
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
-  padding-block: var(--spacing-base);
-  padding-left: var(--spacing-base);
-  padding-right: var(--spacing-lg);
-  line-height: 1.75;
+  padding: var(--input-padding);
+  min-height: 50px;
   width: 100%;
   position: relative;
   transition: background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out);
+    color var(--duration-fast) var(--timing-ease-out), box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  &::placeholder {
+    color: var(--gray-400);
+  }
+
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
 
+  &[data-focus='true'],
   &:focus,
   &:focus-within {
-    border-color: var(--typography-base);
-    box-shadow: none;
+    border-color: var(--accent-dark-active);
+    box-shadow: var(--elevation-100);
     outline: none;
   }
 
+  &[data-disabled='true'],
   &:disabled,
   &:disabled::placeholder {
     cursor: not-allowed;
-    color: var(--gray-400);
+    color: var(--gray-300);
     border-color: var(--gray-300);
   }
 
@@ -6518,7 +6527,8 @@ var ObjectSearchListItem = ({
   onSelect,
   isMulti,
   disabled,
-  children
+  children,
+  ...props
 }) => {
   const { onSelectItem, selectedListItems, isMulti: globalIsMulti } = useObjectSearchContext();
   const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
@@ -6538,6 +6548,7 @@ var ObjectSearchListItem = ({
       role: "listitem",
       css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
       "data-testid": "list-item",
+      ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
           "div",
@@ -6972,6 +6983,7 @@ function ObjectSearchResultList({
   removeButtonText = "Remove all",
   onRemoveAllSelected,
   hideRemoveButton = false,
+  resultLabelOverride,
   additionalButtons,
   renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ObjectSearchResultItem, { ...value }),
   multiSelectId,
@@ -7017,11 +7029,11 @@ function ObjectSearchResultList({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { role: "group", css: ObjectSearchResultListContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
+      !resultLabelOverride ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
         /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
         !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_design_system39.Counter, { count: selectedListItems.length })
-      ] }),
+      ] }) : resultLabelOverride,
       /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
         hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(

package/dist/index.mjs

@@ -4076,32 +4076,41 @@ var menuBtn2 = css21`
   transform: translateY(-50%);
 `;
 var input = css21`
+  --input-padding: 12px var(--spacing-base) 12px var(--spacing-sm);
   appearance: none;
   background-color: var(--white);
-  border: 1px solid var(--gray-200);
+  border: 1px solid var(--gray-300);
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
-  padding-block: var(--spacing-base);
-  padding-left: var(--spacing-base);
-  padding-right: var(--spacing-lg);
-  line-height: 1.75;
+  padding: var(--input-padding);
+  min-height: 50px;
   width: 100%;
   position: relative;
   transition: background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out);
+    color var(--duration-fast) var(--timing-ease-out), box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  &::placeholder {
+    color: var(--gray-400);
+  }
+
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
 
+  &[data-focus='true'],
   &:focus,
   &:focus-within {
-    border-color: var(--typography-base);
-    box-shadow: none;
+    border-color: var(--accent-dark-active);
+    box-shadow: var(--elevation-100);
     outline: none;
   }
 
+  &[data-disabled='true'],
   &:disabled,
   &:disabled::placeholder {
     cursor: not-allowed;
-    color: var(--gray-400);
+    color: var(--gray-300);
     border-color: var(--gray-300);
   }
 
@@ -6386,7 +6395,8 @@ var ObjectSearchListItem = ({
   onSelect,
   isMulti,
   disabled,
-  children
+  children,
+  ...props
 }) => {
   const { onSelectItem, selectedListItems, isMulti: globalIsMulti } = useObjectSearchContext();
   const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
@@ -6406,6 +6416,7 @@ var ObjectSearchListItem = ({
       role: "listitem",
       css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
       "data-testid": "list-item",
+      ...props,
       children: [
         /* @__PURE__ */ jsxs34(
           "div",
@@ -6840,6 +6851,7 @@ function ObjectSearchResultList({
   removeButtonText = "Remove all",
   onRemoveAllSelected,
   hideRemoveButton = false,
+  resultLabelOverride,
   additionalButtons,
   renderResultComponent = (value) => /* @__PURE__ */ jsx66(ObjectSearchResultItem, { ...value }),
   multiSelectId,
@@ -6885,11 +6897,11 @@ function ObjectSearchResultList({
   };
   return /* @__PURE__ */ jsxs40(Fragment13, { children: [
     /* @__PURE__ */ jsxs40("div", { role: "group", css: ObjectSearchResultListContainer, children: [
-      /* @__PURE__ */ jsxs40("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
+      !resultLabelOverride ? /* @__PURE__ */ jsxs40("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
         /* @__PURE__ */ jsx66("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
         !selectedListItems.length ? null : /* @__PURE__ */ jsx66(Counter, { count: selectedListItems.length })
-      ] }),
+      ] }) : resultLabelOverride,
       /* @__PURE__ */ jsxs40("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
         hideRemoveButton ? null : /* @__PURE__ */ jsx66(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "19.119.0",
+  "version": "19.121.1-alpha.3+7d8c709610",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -50,9 +50,9 @@
     "@lexical/selection": "^0.12.0",
     "@lexical/utils": "^0.12.0",
     "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v4.10.1/react-icons-all-files-4.10.1.tgz",
-    "@uniformdev/canvas": "19.119.0",
-    "@uniformdev/design-system": "19.119.0",
-    "@uniformdev/mesh-sdk": "19.119.0",
+    "@uniformdev/canvas": "19.121.1-alpha.3+7d8c709610",
+    "@uniformdev/design-system": "19.121.1-alpha.3+7d8c709610",
+    "@uniformdev/mesh-sdk": "19.121.1-alpha.3+7d8c709610",
     "dequal": "^2.0.3",
     "lexical": "^0.12.0",
     "mitt": "^3.0.0",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "103e99a2813a021e3a9bc6e3c4fd27474c74c09e"
+  "gitHead": "7d8c70961033e6ec47b7f8874b5e49b224367cf5"
 }