@plasmicapp/react-web 1.0.37 → 1.0.38

package/README.internal

@@ -3,34 +3,18 @@ and type definitions used by generated blackbox presentational code.
 
 If you want to use this for yourself, then first build the output:
 
-  yarn build
+  pnpm --filter @plasmicapp/react-web build
 
-There are two ways to use this package.
+For fast local iteration in a pnpm consumer, use the workspace's link scripts:
 
+  pnpm local-link:setup @plasmicapp/react-web ~/path/to/consumer
+  pnpm local-link:build @plasmicapp/react-web
 
-Usage 1 - via yarn link
-=======================
+Restart the consumer after rebuilding. When finished, restore registry
+dependencies before deleting its `node_modules`:
 
-Then create a link to this:
+  pnpm local-link:teardown ~/path/to/consumer
 
-  yarn link
-
-Then, from the package where you want to use this package, do:
-
-  yarn link @plasmicapp/react-web
-
-This basically symlinks a folder in your consumer node_modules folder that links back
-to the output from `yarn build`.  If you update any file here, be sure to run `yarn build`
-again so your updates are reflected in consuming packages.
-
-Usage 2 - via package.json
-==========================
-
-Then create a link to this:
-
-  yarn add link:<path to @plasmicapp/react-web directory>
-
-This avoids the problem of multiple `yarn link` that may conflict with each other.
-
-plasmic/wab uses this approach. So you don't have to do anything except for `yarn build` to
-use the latest @plasmicapp/react-web package for plasmic/wab.
+Avoid raw package-manager links: they can resolve React and other peer dependencies
+from this monorepo instead of the consumer. See the root `CONTRIBUTING.md` for the
+full local-link and Verdaccio workflows.

package/dist/all.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
 import * as React$1 from 'react';
-import React__default, { AriaAttributes, DOMAttributes as DOMAttributes$1, AriaRole, CSSProperties as CSSProperties$1, ReactNode, ReactElement, FocusEvent, KeyboardEvent as KeyboardEvent$1, SyntheticEvent } from 'react';
-import { AriaCheckboxProps } from '@react-types/checkbox';
-import { AriaSwitchProps } from '@react-types/switch';
+import React__default, { AriaAttributes, DOMAttributes as DOMAttributes$1, AriaRole, CSSProperties as CSSProperties$1, ReactNode, ReactElement, FocusEvent, KeyboardEvent as KeyboardEvent$1, MouseEvent, SyntheticEvent } from 'react';
 
 declare global {
     interface Window {
@@ -13975,6 +13973,34 @@ declare function Trans({ transKey, children }: TransProps): React__default.React
 
 
 
+type ValidationState = 'valid' | 'invalid';
+
+type ValidationError = string | string[];
+
+interface Validation<T = unknown> {
+  /** Whether user input is required on the input before form submission. */
+  isRequired?: boolean;
+  /** Whether the input value is invalid. */
+  isInvalid?: boolean;
+  /** @deprecated Use `isInvalid` instead. */
+  validationState?: ValidationState;
+  /**
+   * Whether to use native HTML form validation to prevent form submission
+   * when the value is missing or invalid, or mark the field as required
+   * or invalid via ARIA.
+   *
+   * @default 'aria'
+   */
+  validationBehavior?: 'aria' | 'native';
+  /**
+   * A function that returns an error message if a given value is invalid.
+   * Validation errors are displayed to the user when the form is submitted
+   * if `validationBehavior="native"`. For realtime validation, use the `isInvalid`
+   * prop instead.
+   */
+  validate?: (value: T) => ValidationError | true | null | undefined;
+}
+
 interface InputBase {
   /** Whether the input is disabled. */
   isDisabled?: boolean;
@@ -14019,6 +14045,14 @@ interface AriaLabelingProps {
   'aria-details'?: string;
 }
 
+interface AriaValidationProps {
+  // https://www.w3.org/TR/wai-aria-1.2/#aria-errormessage
+  /**
+   * Identifies the element that provides an error message for the object.
+   */
+  'aria-errormessage'?: string;
+}
+
 // A set of common DOM props that are allowed on any component
 // Ensure this is synced with DOMPropNames in filterDOMProps
 interface DOMProps {
@@ -14039,6 +14073,20 @@ interface FocusableDOMProps extends DOMProps {
   excludeFromTabOrder?: boolean;
 }
 
+interface InputDOMProps {
+  /**
+   * The name of the input element, used when submitting an HTML form. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
+   */
+  name?: string;
+  /**
+   * The `<form>` element to associate the input with.
+   * The value of this attribute must be the id of a `<form>` in the same document.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
+   */
+  form?: string;
+}
+
 /** Any focusable element, including both HTML and SVG elements. */
 interface FocusableElement extends Element, HTMLOrSVGElement {}
 
@@ -14277,6 +14325,31 @@ interface FocusEvents<Target = Element> {
   onFocusChange?: (isFocused: boolean) => void;
 }
 
+interface PressEvents {
+  /** Handler that is called when the press is released over the target. */
+  onPress?: (e: PressEvent) => void;
+  /** Handler that is called when a press interaction starts. */
+  onPressStart?: (e: PressEvent) => void;
+  /**
+   * Handler that is called when a press interaction ends, either
+   * over the target or when the pointer leaves the target.
+   */
+  onPressEnd?: (e: PressEvent) => void;
+  /** Handler that is called when the press state changes. */
+  onPressChange?: (isPressed: boolean) => void;
+  /**
+   * Handler that is called when a press is released over the target, regardless of
+   * whether it started on the target or not.
+   */
+  onPressUp?: (e: PressEvent) => void;
+  /**
+   * **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress`
+   * provided for compatibility with other libraries. `onPress` provides
+   * additional event details for non-mouse interactions.
+   */
+  onClick?: (e: MouseEvent<FocusableElement>) => void;
+}
+
 interface FocusableProps<Target = Element> extends FocusEvents<Target>, KeyboardEvents {
   /** Whether the element should receive focus on render. */
   autoFocus?: boolean;
@@ -14437,6 +14510,50 @@ declare function useButton<P extends PlumeButtonProps, C extends AnyPlasmicClass
     };
 };
 
+interface ToggleStateOptions extends InputBase {
+    /**
+     * Whether the element should be selected (uncontrolled).
+     */
+    defaultSelected?: boolean;
+    /**
+     * Whether the element should be selected (controlled).
+     */
+    isSelected?: boolean;
+    /**
+     * Handler that is called when the element's selection state changes.
+     */
+    onChange?: (isSelected: boolean) => void;
+}
+interface ToggleProps extends ToggleStateOptions, Validation<boolean>, FocusableProps {
+    /**
+     * The label for the element.
+     */
+    children?: ReactNode;
+    /**
+     * The value of the input element, used when submitting an HTML form. See
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).
+     */
+    value?: string;
+}
+
+interface AriaToggleProps extends ToggleProps, FocusableDOMProps, AriaLabelingProps, AriaValidationProps, InputDOMProps, PressEvents {
+    /**
+     * Identifies the element (or elements) whose contents or presence are controlled by the current
+     * element.
+     */
+    'aria-controls'?: string;
+}
+
+interface CheckboxProps$1 extends ToggleProps {
+    /**
+     * Indeterminism is presentational only.
+     * The indeterminate visual representation remains regardless of user interaction.
+     */
+    isIndeterminate?: boolean;
+}
+interface AriaCheckboxProps extends CheckboxProps$1, InputDOMProps, AriaToggleProps {
+}
+
 interface StyleProps {
     className?: string;
     style?: React$1.CSSProperties;
@@ -15156,6 +15273,16 @@ interface ListState<T> {
 
 declare const SelectContext: React$1.Context<ListState<any> | undefined>;
 
+interface SwitchProps$1 extends ToggleProps {
+}
+interface AriaSwitchProps extends SwitchProps$1, InputDOMProps, AriaToggleProps {
+    /**
+     * Identifies the element (or elements) whose contents or presence are controlled by the current
+     * element.
+     */
+    'aria-controls'?: string;
+}
+
 type SwitchRef = React$1.Ref<SwitchRefValue>;
 interface SwitchRefValue extends SwitchState {
     getRoot: () => HTMLElement | null;

package/dist/index.cjs.js

@@ -3243,10 +3243,10 @@ function useCheckbox(plasmicClass, props, config, ref) {
             props: mergeProps(getStyleProps(props), {
                 ref: rootRef,
             }),
-            wrapChildren: function (children) { return (React__namespace.createElement(React__namespace.Fragment, null,
+            wrapChildren: function (renderedChildren) { return (React__namespace.createElement(React__namespace.Fragment, null,
                 React__namespace.createElement(visuallyHidden.VisuallyHidden, null,
                     React__namespace.createElement("input", __assign({}, inputProps, { ref: inputRef }))),
-                children)); },
+                renderedChildren)); },
         },
         _a);
     var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps), false))), (config.labelSlot ? (_b = {}, _b[config.labelSlot] = children, _b) : {}));
@@ -3596,10 +3596,7 @@ function useMenu(plasmicClass, props, config, ref) {
     var state = tree.useTreeState(ariaProps);
     var menuListRef = React__namespace.useRef(null);
     var menuProps = menu.useMenu(__assign(__assign({}, ariaProps), { autoFocus: triggerContext === null || triggerContext === void 0 ? void 0 : triggerContext.autoFocus }), state, menuListRef).menuProps;
-    var contextValue = React__namespace.useMemo(function () { return ({ state: state, menuProps: props }); }, [
-        state,
-        props,
-    ]);
+    var contextValue = React__namespace.useMemo(function () { return ({ state: state, menuProps: props }); }, [state, props]);
     var variants = __assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalVariantProps), false)));
     var overrides = (_a = {},
         _a[config.root] = {
@@ -4150,10 +4147,10 @@ function useSwitch(plasmicClass, props, config, ref) {
             props: mergeProps(getStyleProps(props), {
                 ref: rootRef,
             }),
-            wrapChildren: function (children) { return (React__namespace.createElement(React__namespace.Fragment, null,
+            wrapChildren: function (renderedChildren) { return (React__namespace.createElement(React__namespace.Fragment, null,
                 React__namespace.createElement(visuallyHidden.VisuallyHidden, null,
                     React__namespace.createElement("input", __assign({}, inputProps, { ref: inputRef }))),
-                children)); },
+                renderedChildren)); },
         },
         _a);
     var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps), false))), (config.labelSlot ? (_b = {}, _b[config.labelSlot] = children, _b) : {}));