@bpmn-io/properties-panel 2.2.1 → 3.1.0

package/preact/compat/package.json

@@ -15,5 +15,36 @@
   },
   "peerDependencies": {
     "preact": "^10.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "browser": "./dist/compat.module.js",
+      "umd": "./dist/compat.umd.js",
+      "import": "./dist/compat.mjs",
+      "require": "./dist/compat.js"
+    },
+    "./client": {
+      "import": "./client.mjs",
+      "require": "./client.js"
+    },
+    "./server": {
+      "browser": "./server.browser.js",
+      "import": "./server.mjs",
+      "require": "./server.js"
+    },
+    "./jsx-runtime": {
+      "import": "./jsx-runtime.mjs",
+      "require": "./jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "import": "./jsx-dev-runtime.mjs",
+      "require": "./jsx-dev-runtime.js"
+    },
+    "./scheduler": {
+      "import": "./scheduler.mjs",
+      "require": "./scheduler.js"
+    },
+    "./package.json": "./package.json"
   }
 }

package/preact/compat/scheduler.js

@@ -0,0 +1,15 @@
+// see scheduler.mjs
+
+function unstable_runWithPriority(priority, callback) {
+	return callback();
+}
+
+module.exports = {
+	unstable_ImmediatePriority: 1,
+	unstable_UserBlockingPriority: 2,
+	unstable_NormalPriority: 3,
+	unstable_LowPriority: 4,
+	unstable_IdlePriority: 5,
+	unstable_runWithPriority,
+	unstable_now: performance.now.bind(performance)
+};

package/preact/compat/{src/scheduler.js → scheduler.mjs}

@@ -1,14 +1,16 @@
+/* eslint-disable */
+
 // This file includes experimental React APIs exported from the "scheduler"
 // npm package. Despite being explicitely marked as unstable some libraries
 // already make use of them. This file is not a full replacement for the
 // scheduler package, but includes the necessary shims to make those libraries
 // work with Preact.
 
-export const unstable_ImmediatePriority = 1;
-export const unstable_UserBlockingPriority = 2;
-export const unstable_NormalPriority = 3;
-export const unstable_LowPriority = 4;
-export const unstable_IdlePriority = 5;
+export var unstable_ImmediatePriority = 1;
+export var unstable_UserBlockingPriority = 2;
+export var unstable_NormalPriority = 3;
+export var unstable_LowPriority = 4;
+export var unstable_IdlePriority = 5;
 
 /**
  * @param {number} priority
@@ -18,7 +20,4 @@ export function unstable_runWithPriority(priority, callback) {
 	return callback();
 }
 
-export const unstable_now =
-	typeof performance === 'object' && typeof performance.now === 'function'
-		? performance.now.bind(performance)
-		: () => Date.now();
+export var unstable_now = performance.now.bind(performance);

package/preact/compat/server.browser.js

@@ -0,0 +1,4 @@
+export {
+	renderToString,
+	renderToString as renderToStaticMarkup
+} from 'preact-render-to-string';

package/preact/compat/src/PureComponent.js

@@ -10,6 +10,6 @@ export function PureComponent(p) {
 PureComponent.prototype = new Component();
 // Some third-party libraries check if this property is present
 PureComponent.prototype.isPureReactComponent = true;
-PureComponent.prototype.shouldComponentUpdate = function(props, state) {
+PureComponent.prototype.shouldComponentUpdate = function (props, state) {
 	return shallowDiffers(this.props, props) || shallowDiffers(this.state, state);
 };

package/preact/compat/src/forwardRef.js

@@ -24,17 +24,10 @@ export const REACT_FORWARD_SYMBOL =
  * @returns {import('./internal').FunctionComponent}
  */
 export function forwardRef(fn) {
-	// We always have ref in props.ref, except for
-	// mobx-react. It will call this function directly
-	// and always pass ref as the second argument.
-	function Forwarded(props, ref) {
+	function Forwarded(props) {
 		let clone = assign({}, props);
 		delete clone.ref;
-		ref = props.ref || ref;
-		return fn(
-			clone,
-			!ref || (typeof ref === 'object' && !('current' in ref)) ? null : ref
-		);
+		return fn(clone, props.ref || null);
 	}
 
 	// mobx-react checks for this being present

package/preact/compat/src/index.d.ts

@@ -17,6 +17,7 @@ declare namespace React {
 	export import Inputs = _hooks.Inputs;
 	export import PropRef = _hooks.PropRef;
 	export import Reducer = _hooks.Reducer;
+	export import Dispatch = _hooks.Dispatch;
 	export import Ref = _hooks.Ref;
 	export import StateUpdater = _hooks.StateUpdater;
 	export import useCallback = _hooks.useCallback;
@@ -24,13 +25,25 @@ declare namespace React {
 	export import useDebugValue = _hooks.useDebugValue;
 	export import useEffect = _hooks.useEffect;
 	export import useImperativeHandle = _hooks.useImperativeHandle;
+	export import useId = _hooks.useId;
 	export import useLayoutEffect = _hooks.useLayoutEffect;
 	export import useMemo = _hooks.useMemo;
 	export import useReducer = _hooks.useReducer;
 	export import useRef = _hooks.useRef;
 	export import useState = _hooks.useState;
+	// React 18 hooks
+	export import useInsertionEffect = _hooks.useLayoutEffect;
+	export function useTransition(): [false, typeof startTransition];
+	export function useDeferredValue<T = any>(val: T): T;
+	export function useSyncExternalStore<T>(
+		subscribe: (flush: () => void) => () => void,
+		getSnapshot: () => T
+	): T;
 
 	// Preact Defaults
+	export import Context = preact.Context;
+	export import ContextType = preact.ContextType;
+	export import RefObject = preact.RefObject;
 	export import Component = preact.Component;
 	export import FunctionComponent = preact.FunctionComponent;
 	export import FC = preact.FunctionComponent;
@@ -39,6 +52,7 @@ declare namespace React {
 	export import Fragment = preact.Fragment;
 	export import createElement = preact.createElement;
 	export import cloneElement = preact.cloneElement;
+	export import ComponentProps = preact.ComponentProps;
 
 	// Suspense
 	export import Suspense = _Suspense.Suspense;
@@ -48,10 +62,21 @@ declare namespace React {
 	// Compat
 	export import StrictMode = preact.Fragment;
 	export const version: string;
+	export function startTransition(cb: () => void): void;
+
+	// HTML
+	export import HTMLAttributes = JSXInternal.HTMLAttributes;
+	export import DetailedHTMLProps = JSXInternal.DetailedHTMLProps;
+	export import CSSProperties = JSXInternal.CSSProperties;
+
+	// Events
+	export import TargetedEvent = JSXInternal.TargetedEvent;
+	export import ChangeEvent = JSXInternal.TargetedEvent;
+	export import ChangeEventHandler = JSXInternal.GenericEventHandler;
 
 	export function createPortal(
 		vnode: preact.VNode,
-		container: Element
+		container: Element | DocumentFragment
 	): preact.VNode<any>;
 
 	export function render(
@@ -77,7 +102,9 @@ declare namespace React {
 		...children: preact.ComponentChildren[]
 	) => preact.VNode<any>;
 	export function isValidElement(element: any): boolean;
-	export function findDOMNode(component: preact.Component): Element | null;
+	export function findDOMNode(
+		component: preact.Component | Element
+	): Element | null;
 
 	export abstract class PureComponent<P = {}, S = {}> extends preact.Component<
 		P,
@@ -86,6 +113,11 @@ declare namespace React {
 		isPureReactComponent: boolean;
 	}
 
+	export type MemoExoticComponent<C extends preact.FunctionalComponent<any>> =
+		preact.FunctionComponent<ComponentProps<C>> & {
+			readonly type: C;
+		};
+
 	export function memo<P = {}>(
 		component: preact.FunctionalComponent<P>,
 		comparer?: (prev: P, next: P) => boolean
@@ -98,20 +130,42 @@ declare namespace React {
 		) => boolean
 	): C;
 
+	export interface RefAttributes<R> extends preact.Attributes {
+		ref?: preact.Ref<R> | undefined;
+	}
+
 	export interface ForwardFn<P = {}, T = any> {
-		(props: P, ref: Ref<T>): preact.ComponentChild;
+		(props: P, ref: ForwardedRef<T>): preact.ComponentChild;
 		displayName?: string;
 	}
 
+	export interface ForwardRefExoticComponent<P>
+		extends preact.FunctionComponent<P> {
+		defaultProps?: Partial<P> | undefined;
+	}
+
 	export function forwardRef<R, P = {}>(
 		fn: ForwardFn<P, R>
-	): preact.FunctionalComponent<P>;
+	): preact.FunctionalComponent<Omit<P, 'ref'> & { ref?: preact.Ref<R> }>;
+
+	interface MutableRefObject<T> {
+		current: T;
+	}
+
+	export type ForwardedRef<T> =
+		| ((instance: T | null) => void)
+		| MutableRefObject<T | null>
+		| null;
 
 	export function unstable_batchedUpdates(
 		callback: (arg?: any) => void,
 		arg?: any
 	): void;
 
+	export type PropsWithChildren<P = unknown> = P & {
+		children?: preact.ComponentChild | undefined;
+	};
+
 	export const Children: {
 		map<T extends preact.ComponentChild, R>(
 			children: T | T[],

package/preact/compat/src/index.js

@@ -9,6 +9,7 @@ import {
 } from '../..';
 import {
 	useState,
+	useId,
 	useReducer,
 	useEffect,
 	useLayoutEffect,
@@ -26,15 +27,15 @@ import { Children } from './Children';
 import { Suspense, lazy } from './suspense';
 import { SuspenseList } from './suspense-list';
 import { createPortal } from './portals';
+import { is } from './util';
 import {
 	hydrate,
 	render,
 	REACT_ELEMENT_TYPE,
 	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
 } from './render';
-export * from './scheduler';
 
-const version = '16.8.0'; // trick libraries to think we are react
+const version = '17.0.2'; // trick libraries to think we are react
 
 /**
  * Legacy version of createElement.
@@ -101,12 +102,74 @@ function findDOMNode(component) {
 // eslint-disable-next-line camelcase
 const unstable_batchedUpdates = (callback, arg) => callback(arg);
 
+/**
+ * In React, `flushSync` flushes the entire tree and forces a rerender. It's
+ * implmented here as a no-op.
+ * @template Arg
+ * @template Result
+ * @param {(arg: Arg) => Result} callback function that runs before the flush
+ * @param {Arg} [arg] Optional argument that can be passed to the callback
+ * @returns
+ */
+const flushSync = (callback, arg) => callback(arg);
+
 /**
  * Strict Mode is not implemented in Preact, so we provide a stand-in for it
  * that just renders its children without imposing any restrictions.
  */
 const StrictMode = Fragment;
 
+export function startTransition(cb) {
+	cb();
+}
+
+export function useDeferredValue(val) {
+	return val;
+}
+
+export function useTransition() {
+	return [false, startTransition];
+}
+
+// TODO: in theory this should be done after a VNode is diffed as we want to insert
+// styles/... before it attaches
+export const useInsertionEffect = useLayoutEffect;
+
+/**
+ * This is taken from https://github.com/facebook/react/blob/main/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L84
+ * on a high level this cuts out the warnings, ... and attempts a smaller implementation
+ */
+export function useSyncExternalStore(subscribe, getSnapshot) {
+	const value = getSnapshot();
+
+	const [{ _instance }, forceUpdate] = useState({
+		_instance: { _value: value, _getSnapshot: getSnapshot }
+	});
+
+	useLayoutEffect(() => {
+		_instance._value = value;
+		_instance._getSnapshot = getSnapshot;
+
+		if (!is(_instance._value, getSnapshot())) {
+			forceUpdate({ _instance });
+		}
+	}, [subscribe, value, getSnapshot]);
+
+	useEffect(() => {
+		if (!is(_instance._value, _instance._getSnapshot())) {
+			forceUpdate({ _instance });
+		}
+
+		return subscribe(() => {
+			if (!is(_instance._value, _instance._getSnapshot())) {
+				forceUpdate({ _instance });
+			}
+		});
+	}, [subscribe]);
+
+	return value;
+}
+
 export * from '../../hooks';
 export {
 	version,
@@ -127,6 +190,7 @@ export {
 	PureComponent,
 	memo,
 	forwardRef,
+	flushSync,
 	// eslint-disable-next-line camelcase
 	unstable_batchedUpdates,
 	StrictMode,
@@ -139,9 +203,15 @@ export {
 // React copies the named exports to the default one.
 export default {
 	useState,
+	useId,
 	useReducer,
 	useEffect,
 	useLayoutEffect,
+	useInsertionEffect,
+	useTransition,
+	useDeferredValue,
+	useSyncExternalStore,
+	startTransition,
 	useRef,
 	useImperativeHandle,
 	useMemo,
@@ -166,6 +236,7 @@ export default {
 	PureComponent,
 	memo,
 	forwardRef,
+	flushSync,
 	unstable_batchedUpdates,
 	StrictMode,
 	Suspense,

package/preact/compat/src/portals.js

@@ -19,7 +19,7 @@ function Portal(props) {
 	const _this = this;
 	let container = props._container;
 
-	_this.componentWillUnmount = function() {
+	_this.componentWillUnmount = function () {
 		render(null, _this._temp);
 		_this._temp = null;
 		_this._container = null;
@@ -76,5 +76,7 @@ function Portal(props) {
  * @param {import('./internal').PreactElement} container The DOM node to continue rendering in to.
  */
 export function createPortal(vnode, container) {
-	return createElement(Portal, { _vnode: vnode, _container: container });
+	const el = createElement(Portal, { _vnode: vnode, _container: container });
+	el.containerInfo = container;
+	return el;
 }

package/preact/compat/src/render.js

@@ -10,15 +10,20 @@ export const REACT_ELEMENT_TYPE =
 	(typeof Symbol != 'undefined' && Symbol.for && Symbol.for('react.element')) ||
 	0xeac7;
 
-const CAMEL_PROPS = /^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/;
+const CAMEL_PROPS =
+	/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/;
+const ON_ANI = /^on(Ani|Tra|Tou|BeforeInp|Compo)/;
+const CAMEL_REPLACE = /[A-Z0-9]/g;
+
+const IS_DOM = typeof document !== 'undefined';
 
 // Input types for which onchange should not be converted to oninput.
 // type="file|checkbox|radio", plus "range" in IE11.
 // (IE11 doesn't support Symbol, which we use here to turn `rad` into `ra` which matches "range")
 const onChangeInputType = type =>
 	(typeof Symbol != 'undefined' && typeof Symbol() == 'symbol'
-		? /fil|che|rad/i
-		: /fil|che|ra/i
+		? /fil|che|rad/
+		: /fil|che|ra/
 	).test(type);
 
 // Some libraries like `react-virtualized` explicitly check for this.
@@ -81,6 +86,7 @@ export function hydrate(vnode, parent, callback) {
 let oldEventHook = options.event;
 options.event = e => {
 	if (oldEventHook) e = oldEventHook(e);
+
 	e.persist = empty;
 	e.isPropagationStopped = isPropagationStopped;
 	e.isDefaultPrevented = isDefaultPrevented;
@@ -97,96 +103,125 @@ function isDefaultPrevented() {
 	return this.defaultPrevented;
 }
 
-let classNameDescriptor = {
+const classNameDescriptorNonEnumberable = {
+	enumerable: false,
 	configurable: true,
 	get() {
 		return this.class;
 	}
 };
 
-let oldVNodeHook = options.vnode;
-options.vnode = vnode => {
-	let type = vnode.type;
-	let props = vnode.props;
-	let normalizedProps = props;
-
-	// only normalize props on Element nodes
-	if (typeof type === 'string') {
+function handleDomVNode(vnode) {
+	let props = vnode.props,
+		type = vnode.type,
 		normalizedProps = {};
 
-		for (let i in props) {
-			let value = props[i];
-
-			if (i === 'value' && 'defaultValue' in props && value == null) {
-				// Skip applying value if it is null/undefined and we already set
-				// a default value
-				continue;
-			} else if (
-				i === 'defaultValue' &&
-				'value' in props &&
-				props.value == null
-			) {
-				// `defaultValue` is treated as a fallback `value` when a value prop is present but null/undefined.
-				// `defaultValue` for Elements with no value prop is the same as the DOM defaultValue property.
-				i = 'value';
-			} else if (i === 'download' && value === true) {
-				// Calling `setAttribute` with a truthy value will lead to it being
-				// passed as a stringified value, e.g. `download="true"`. React
-				// converts it to an empty string instead, otherwise the attribute
-				// value will be used as the file name and the file will be called
-				// "true" upon downloading it.
-				value = '';
-			} else if (/ondoubleclick/i.test(i)) {
-				i = 'ondblclick';
-			} else if (
-				/^onchange(textarea|input)/i.test(i + type) &&
-				!onChangeInputType(props.type)
-			) {
-				i = 'oninput';
-			} else if (/^on(Ani|Tra|Tou|BeforeInp)/.test(i)) {
-				i = i.toLowerCase();
-			} else if (CAMEL_PROPS.test(i)) {
-				i = i.replace(/[A-Z0-9]/, '-$&').toLowerCase();
-			} else if (value === null) {
-				value = undefined;
-			}
+	for (let i in props) {
+		let value = props[i];
 
-			normalizedProps[i] = value;
+		if (
+			(i === 'value' && 'defaultValue' in props && value == null) ||
+			// Emulate React's behavior of not rendering the contents of noscript tags on the client.
+			(IS_DOM && i === 'children' && type === 'noscript') ||
+			i === 'class' ||
+			i === 'className'
+		) {
+			// Skip applying value if it is null/undefined and we already set
+			// a default value
+			continue;
 		}
 
-		// Add support for array select values: <select multiple value={[]} />
-		if (
-			type == 'select' &&
-			normalizedProps.multiple &&
-			Array.isArray(normalizedProps.value)
+		let lowerCased = i.toLowerCase();
+		if (i === 'defaultValue' && 'value' in props && props.value == null) {
+			// `defaultValue` is treated as a fallback `value` when a value prop is present but null/undefined.
+			// `defaultValue` for Elements with no value prop is the same as the DOM defaultValue property.
+			i = 'value';
+		} else if (i === 'download' && value === true) {
+			// Calling `setAttribute` with a truthy value will lead to it being
+			// passed as a stringified value, e.g. `download="true"`. React
+			// converts it to an empty string instead, otherwise the attribute
+			// value will be used as the file name and the file will be called
+			// "true" upon downloading it.
+			value = '';
+		} else if (lowerCased === 'ondoubleclick') {
+			i = 'ondblclick';
+		} else if (
+			lowerCased === 'onchange' &&
+			(type === 'input' || type === 'textarea') &&
+			!onChangeInputType(props.type)
 		) {
-			// forEach() always returns undefined, which we abuse here to unset the value prop.
-			normalizedProps.value = toChildArray(props.children).forEach(child => {
-				child.props.selected =
-					normalizedProps.value.indexOf(child.props.value) != -1;
-			});
+			lowerCased = i = 'oninput';
+		} else if (lowerCased === 'onfocus') {
+			i = 'onfocusin';
+		} else if (lowerCased === 'onblur') {
+			i = 'onfocusout';
+		} else if (ON_ANI.test(i)) {
+			i = lowerCased;
+		} else if (type.indexOf('-') === -1 && CAMEL_PROPS.test(i)) {
+			i = i.replace(CAMEL_REPLACE, '-$&').toLowerCase();
+		} else if (value === null) {
+			value = undefined;
 		}
 
-		// Adding support for defaultValue in select tag
-		if (type == 'select' && normalizedProps.defaultValue != null) {
-			normalizedProps.value = toChildArray(props.children).forEach(child => {
-				if (normalizedProps.multiple) {
-					child.props.selected =
-						normalizedProps.defaultValue.indexOf(child.props.value) != -1;
-				} else {
-					child.props.selected =
-						normalizedProps.defaultValue == child.props.value;
-				}
-			});
+		// Add support for onInput and onChange, see #3561
+		// if we have an oninput prop already change it to oninputCapture
+		if (lowerCased === 'oninput') {
+			i = lowerCased;
+			if (normalizedProps[i]) {
+				i = 'oninputCapture';
+			}
 		}
 
-		vnode.props = normalizedProps;
+		normalizedProps[i] = value;
 	}
 
-	if (type && props.class != props.className) {
-		classNameDescriptor.enumerable = 'className' in props;
-		if (props.className != null) normalizedProps.class = props.className;
-		Object.defineProperty(normalizedProps, 'className', classNameDescriptor);
+	// Add support for array select values: <select multiple value={[]} />
+	if (
+		type == 'select' &&
+		normalizedProps.multiple &&
+		Array.isArray(normalizedProps.value)
+	) {
+		// forEach() always returns undefined, which we abuse here to unset the value prop.
+		normalizedProps.value = toChildArray(props.children).forEach(child => {
+			child.props.selected =
+				normalizedProps.value.indexOf(child.props.value) != -1;
+		});
+	}
+
+	// Adding support for defaultValue in select tag
+	if (type == 'select' && normalizedProps.defaultValue != null) {
+		normalizedProps.value = toChildArray(props.children).forEach(child => {
+			if (normalizedProps.multiple) {
+				child.props.selected =
+					normalizedProps.defaultValue.indexOf(child.props.value) != -1;
+			} else {
+				child.props.selected =
+					normalizedProps.defaultValue == child.props.value;
+			}
+		});
+	}
+
+	if (props.class && !props.className) {
+		normalizedProps.class = props.class;
+		Object.defineProperty(
+			normalizedProps,
+			'className',
+			classNameDescriptorNonEnumberable
+		);
+	} else if (props.className && !props.class) {
+		normalizedProps.class = normalizedProps.className = props.className;
+	} else if (props.class && props.className) {
+		normalizedProps.class = normalizedProps.className = props.className;
+	}
+
+	vnode.props = normalizedProps;
+}
+
+let oldVNodeHook = options.vnode;
+options.vnode = vnode => {
+	// only normalize props on Element nodes
+	if (typeof vnode.type === 'string') {
+		handleDomVNode(vnode);
 	}
 
 	vnode.$$typeof = REACT_ELEMENT_TYPE;
@@ -197,13 +232,35 @@ options.vnode = vnode => {
 // Only needed for react-relay
 let currentComponent;
 const oldBeforeRender = options._render;
-options._render = function(vnode) {
+options._render = function (vnode) {
 	if (oldBeforeRender) {
 		oldBeforeRender(vnode);
 	}
 	currentComponent = vnode._component;
 };
 
+const oldDiffed = options.diffed;
+/** @type {(vnode: import('./internal').VNode) => void} */
+options.diffed = function (vnode) {
+	if (oldDiffed) {
+		oldDiffed(vnode);
+	}
+
+	const props = vnode.props;
+	const dom = vnode._dom;
+
+	if (
+		dom != null &&
+		vnode.type === 'textarea' &&
+		'value' in props &&
+		props.value !== dom.value
+	) {
+		dom.value = props.value == null ? '' : props.value;
+	}
+
+	currentComponent = null;
+};
+
 // This is a very very private internal function for React it
 // is used to sort-of do runtime dependency injection. So far
 // only `react-relay` makes use of it. It uses it to read the

package/preact/compat/src/suspense-list.d.ts

@@ -1,11 +1,11 @@
-import { Component, ComponentChild } from '../../src';
+import { Component, ComponentChild, ComponentChildren } from '../../src';
 
 //
 // SuspenseList
 // -----------------------------------
 
 export interface SuspenseListProps {
-	children?: preact.ComponentChildren;
+	children?: ComponentChildren;
 	revealOrder?: 'forwards' | 'backwards' | 'together';
 }