@uniformdev/canvas-react 19.8.0 → 19.10.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
+import React$1, { Key, ReactNode } from 'react';
 import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, SubscribeToCompositionOptions } from '@uniformdev/canvas';
 export { createUniformApiEnhancer } from '@uniformdev/canvas';
-import React$1, { Key, ReactNode } from 'react';
 
 /**
  * Props passed to a Canvas component implementation.
@@ -37,7 +37,7 @@ type ComponentStore = {
  * To make this work, it needs to be the default returned from the
  * resolveRenderer() function when the component is unknown.
  **/
-declare function DefaultNotImplementedComponent(props: ComponentProps): JSX.Element | null;
+declare function DefaultNotImplementedComponent(props: ComponentProps): React$1.JSX.Element | null;
 
 type UniformComponentProps<TRenderProps = unknown> = {
     /** The data of the component instance */
@@ -72,7 +72,7 @@ declare function useUniformCurrentComponent(): UniformComponentContextValue;
  * Note that the actual rendering happens inside `<UniformSlot />`, this component only provides the services needed to achieve that.
  * This component is used internally by `<UniformComposition />`, which you should use in most cases.
  */
-declare function UniformComponent<TRenderProps = unknown>({ data, resolveRenderer, children, behaviorTracking, }: UniformComponentProps<TRenderProps>): JSX.Element | null;
+declare function UniformComponent<TRenderProps = unknown>({ data, resolveRenderer, children, behaviorTracking, }: UniformComponentProps<TRenderProps>): React$1.JSX.Element | null;
 
 type UseUniformContextualEditingProps = {
     initialCompositionValue?: RootComponentInstance;
@@ -226,7 +226,7 @@ declare function useUniformCurrentComposition(): UniformCompositionContextValue;
  * It renders the full tree of components, and provides some services to the children, such as `useUniformCurrentComposition`.
  * It also takes care of enabling [Contextual Editing](https://docs.uniform.app/capabilities/composition/contextual-editing).
  */
-declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, }: UniformCompositionProps<TRenderProps>): JSX.Element;
+declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, }: UniformCompositionProps<TRenderProps>): React$1.JSX.Element;
 
 type CustomSlotChildRenderFunc = (options: {
     child: ReactNode;
@@ -282,7 +282,33 @@ type UniformTextProps = {
  * Adds inline editing capability to text parameters
  * @deprecated This component is unstable, and not ready for production usage.
  **/
-declare const UniformText: ({ as: Tag, parameterId, isMultiline, placeholder, render, ...props }: UniformTextProps) => JSX.Element | null;
+declare const UniformText: ({ as: Tag, parameterId, isMultiline, placeholder, render, ...props }: UniformTextProps) => React$1.JSX.Element | null;
+
+type GetParameterAttributesProps = {
+    /** The public Id of the parameter */
+    id: string;
+    /** The component object where this parameter is used */
+    component: ComponentInstance;
+    /**
+     * Sets the value to show in Canvas editor when the parameter value is empty.
+     * @default undefined
+     */
+    placeholder?: string;
+};
+/**
+ * Returns the attributes needed to annotate a Uniform parameter for inline editing.
+ * Supports only text parameters at the moment.
+ * @deprecated Unstable, and not ready for production usage.
+ **/
+declare const getParameterAttributes: ({ id, component, placeholder }: GetParameterAttributesProps) => {
+    'data-uniform-component-id': string | undefined;
+    'data-uniform-parameter-id': string;
+    'data-uniform-parameter-value': {};
+    'data-uniform-parameter-type': string | undefined;
+    'data-uniform-placeholder': string | undefined;
+    contentEditable: boolean;
+    suppressContentEditableWarning: boolean;
+};
 
 type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptions>, 'callback'> & {
     enabled: boolean;
@@ -307,4 +333,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { ComponentProps, ComponentStore, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, ComponentStore, DefaultNotImplementedComponent, GetParameterAttributesProps, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.esm.js

@@ -553,7 +553,7 @@ function resolveChildren({
 }
 
 // src/components/UniformText.tsx
-import React7, { useCallback, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import React7, { useCallback, useMemo as useMemo2, useState as useState2 } from "react";
 var UniformText = ({
   as: Tag = "span",
   parameterId,
@@ -564,7 +564,6 @@ var UniformText = ({
 }) => {
   const { data: componentData } = useUniformCurrentComponent();
   const { isContextualEditing } = useUniformCurrentComposition();
-  const elementRef = useRef(null);
   const [isFocused, setIsFocused] = useState2(false);
   const parameter = useMemo2(() => {
     var _a;
@@ -595,7 +594,6 @@ var UniformText = ({
     Tag,
     {
       ...props,
-      ref: elementRef,
       "data-uniform-component-id": componentData == null ? void 0 : componentData._id,
       "data-uniform-parameter-id": parameterId,
       "data-uniform-parameter-value": value != null ? value : "",
@@ -612,6 +610,25 @@ var UniformText = ({
   );
 };
 
+// src/helpers/getParameterAttributes.ts
+var getParameterAttributes = ({ id, component, placeholder }) => {
+  var _a, _b, _c;
+  const componentId = component == null ? void 0 : component._id;
+  const parameter = (_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[id];
+  const value = parameter == null ? void 0 : parameter.value;
+  const type = parameter == null ? void 0 : parameter.type;
+  const isEditable = (_c = (_b = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
+  return {
+    "data-uniform-component-id": componentId,
+    "data-uniform-parameter-id": id,
+    "data-uniform-parameter-value": value != null ? value : "",
+    "data-uniform-parameter-type": type,
+    "data-uniform-placeholder": placeholder,
+    contentEditable: isEditable,
+    suppressContentEditableWarning: true
+  };
+};
+
 // src/hooks/useCompositionEventEffect.ts
 import {
   CANVAS_DRAFT_STATE,
@@ -663,6 +680,7 @@ export {
   createComponentStore,
   createComponentStoreResolver,
   createUniformApiEnhancer,
+  getParameterAttributes,
   registerUniformComponent,
   useCompositionEventEffect,
   useUniformContextualEditing,

package/dist/index.js

@@ -41,6 +41,7 @@ __export(src_exports, {
   createComponentStore: () => createComponentStore,
   createComponentStoreResolver: () => createComponentStoreResolver,
   createUniformApiEnhancer: () => import_canvas3.createUniformApiEnhancer,
+  getParameterAttributes: () => getParameterAttributes,
   registerUniformComponent: () => registerUniformComponent,
   useCompositionEventEffect: () => useCompositionEventEffect,
   useUniformContextualEditing: () => useUniformContextualEditing,
@@ -592,7 +593,6 @@ var UniformText = ({
 }) => {
   const { data: componentData } = useUniformCurrentComponent();
   const { isContextualEditing } = useUniformCurrentComposition();
-  const elementRef = (0, import_react7.useRef)(null);
   const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
   const parameter = (0, import_react7.useMemo)(() => {
     var _a;
@@ -623,7 +623,6 @@ var UniformText = ({
     Tag,
     {
       ...props,
-      ref: elementRef,
       "data-uniform-component-id": componentData == null ? void 0 : componentData._id,
       "data-uniform-parameter-id": parameterId,
       "data-uniform-parameter-value": value != null ? value : "",
@@ -640,6 +639,25 @@ var UniformText = ({
   );
 };
 
+// src/helpers/getParameterAttributes.ts
+var getParameterAttributes = ({ id, component, placeholder }) => {
+  var _a, _b, _c;
+  const componentId = component == null ? void 0 : component._id;
+  const parameter = (_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[id];
+  const value = parameter == null ? void 0 : parameter.value;
+  const type = parameter == null ? void 0 : parameter.type;
+  const isEditable = (_c = (_b = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
+  return {
+    "data-uniform-component-id": componentId,
+    "data-uniform-parameter-id": id,
+    "data-uniform-parameter-value": value != null ? value : "",
+    "data-uniform-parameter-type": type,
+    "data-uniform-placeholder": placeholder,
+    contentEditable: isEditable,
+    suppressContentEditableWarning: true
+  };
+};
+
 // src/hooks/useCompositionEventEffect.ts
 var import_canvas7 = require("@uniformdev/canvas");
 var import_react8 = require("react");
@@ -688,6 +706,7 @@ function useCompositionEventEffect({
   createComponentStore,
   createComponentStoreResolver,
   createUniformApiEnhancer,
+  getParameterAttributes,
   registerUniformComponent,
   useCompositionEventEffect,
   useUniformContextualEditing,

package/dist/index.mjs

@@ -553,7 +553,7 @@ function resolveChildren({
 }
 
 // src/components/UniformText.tsx
-import React7, { useCallback, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import React7, { useCallback, useMemo as useMemo2, useState as useState2 } from "react";
 var UniformText = ({
   as: Tag = "span",
   parameterId,
@@ -564,7 +564,6 @@ var UniformText = ({
 }) => {
   const { data: componentData } = useUniformCurrentComponent();
   const { isContextualEditing } = useUniformCurrentComposition();
-  const elementRef = useRef(null);
   const [isFocused, setIsFocused] = useState2(false);
   const parameter = useMemo2(() => {
     var _a;
@@ -595,7 +594,6 @@ var UniformText = ({
     Tag,
     {
       ...props,
-      ref: elementRef,
       "data-uniform-component-id": componentData == null ? void 0 : componentData._id,
       "data-uniform-parameter-id": parameterId,
       "data-uniform-parameter-value": value != null ? value : "",
@@ -612,6 +610,25 @@ var UniformText = ({
   );
 };
 
+// src/helpers/getParameterAttributes.ts
+var getParameterAttributes = ({ id, component, placeholder }) => {
+  var _a, _b, _c;
+  const componentId = component == null ? void 0 : component._id;
+  const parameter = (_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[id];
+  const value = parameter == null ? void 0 : parameter.value;
+  const type = parameter == null ? void 0 : parameter.type;
+  const isEditable = (_c = (_b = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
+  return {
+    "data-uniform-component-id": componentId,
+    "data-uniform-parameter-id": id,
+    "data-uniform-parameter-value": value != null ? value : "",
+    "data-uniform-parameter-type": type,
+    "data-uniform-placeholder": placeholder,
+    contentEditable: isEditable,
+    suppressContentEditableWarning: true
+  };
+};
+
 // src/hooks/useCompositionEventEffect.ts
 import {
   CANVAS_DRAFT_STATE,
@@ -663,6 +680,7 @@ export {
   createComponentStore,
   createComponentStoreResolver,
   createUniformApiEnhancer,
+  getParameterAttributes,
   registerUniformComponent,
   useCompositionEventEffect,
   useUniformContextualEditing,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "19.8.0",
+  "version": "19.10.0",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,16 +24,16 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.8.0",
-    "@uniformdev/context": "19.8.0",
-    "@uniformdev/context-react": "19.8.0"
+    "@uniformdev/canvas": "19.10.0",
+    "@uniformdev/context": "19.10.0",
+    "@uniformdev/context-react": "19.10.0"
   },
   "peerDependencies": {
     "react": ">= 16 || 17 || 18",
     "react-dom": ">=16"
   },
   "devDependencies": {
-    "@types/react": "18.2.5",
+    "@types/react": "18.2.6",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "70eb9277bbfaee5f9245e1b26b4e77caede22944"
+  "gitHead": "149f942da715ed802545850283f9b99291829a04"
 }