@plasmicapp/react-web 0.2.201 → 0.2.202

package/skinny/dist/plume/collection-utils.d.ts

@@ -1,191 +1,191 @@
-/**
- * In general, we try not to expose react-aria's Collections API to Plume users.
- * The Collections API is how react-aria users pass data about collections of
- * things using the built-in Item and Section components, which are abstract,
- * metadata-only components that don't render anything but only serve to specify
- * data.  For example, here's how you would use react-spectrum's Picker:
- *
- *   <Picker>
- *     <Section title="Asia">
- *       <Item key="taiwan">Taiwan</Item>
- *       <Item key="japan">Japan</Item>
- *       <Item key="china">China</Item>
- *     </Section>
- *     <Section title="Europe">
- *       <Item key="germany">Germany</Item>
- *       <Item key="france">France</Item>
- *     </Section>
- *   </Picker>
- *
- * You would re-use this same Item/Section components to pass similar things to
- * Menu, Tabs, etc.
- *
- * For Plasmic, this API is too abstract.  The user has explicitly designed components
- * like Select.Option and Select.OptionGroup, and it is weird that they don't actually
- * use these components. It is more natural to do:
- *
- *   <Select>
- *     <Select.OptionGroup title="Asia">
- *       <Select.Option key="taiwan">Taiwan</Select>
- *     </Select.OptionGroup>
- *   </Select>
- *
- * For Plume, we let users directly use the components they designed, both to collect
- * information and to perform actual rendering.  For example, for Plume,
- * you'd use Select.Option instead of Item, and Select.OptionGroup instead of Section.
- * This means that the Select.Option props will collect the same information Item
- * does.
- *
- * A component like Select.Option then serves two purposes:
- *
- * 1. Allow users to specify the collection of data, like in the above example
- *    Here, we're mainly interested in the props in those ReactElements so
- *    we can pass the Item/Section data onto react-aria's APIs.  We are not
- *    actually rendering these elements.
- * 2. Once react-aria's Collections API has gone through them and built
- *    Collection "nodes", we then create cloned versions of these elements
- *    with the corresponding node passed in as a secret prop.  These ReactElements
- *    are then actually used to _render_ the corresponding Option / OptionGroup.
- *
- * This file contains helper functions to help with implementing the above.
- *
- * Note also that most of the collections-based react-aria components expose
- * a parallel API that accepts a list of "items" and a render prop, instead
- * of list of Item/Section elements.  This is for efficiency, but we are opting
- * to only support the composite-component pattern for now for simplicity.
- */
-import { Node } from "@react-types/shared";
-import React from "react";
-export interface PlasmicLoaderProps<T> {
-    component: string;
-    componentProps: T;
-}
-/**
- * Props for a Plume component that corresponds to an Item
- */
-export interface ItemLikeProps {
-    /**
-     * value key corresponding to this item. Not required if you use the
-     * `key` prop instead.
-     */
-    value?: string | null;
-    /**
-     * The text string value corresponding to this item. Used to support
-     * keyboard type-ahead.  If not specified, then will be derived from
-     * `children` if it is a string, or the `value` or `key`.
-     */
-    textValue?: string;
-    /**
-     * aria-label for this item.
-     */
-    "aria-label"?: string;
-    /**
-     * Primary content label for this item.
-     */
-    children?: React.ReactNode;
-    /**
-     * If true, this item will not be selectable.
-     */
-    isDisabled?: boolean;
-}
-type LoaderAwareItemLikeProps = ItemLikeProps | PlasmicLoaderProps<ItemLikeProps>;
-/**
- * Props for a Plume component that corresponds to a Section
- */
-export interface SectionLikeProps {
-    /**
-     * Heading content of the title
-     */
-    title?: React.ReactNode;
-    /**
-     * aria-label for this section
-     */
-    "aria-label"?: string;
-    /**
-     * A list of items that belong in this group
-     */
-    children?: React.ReactNode;
-}
-type LoaderAwareSectionLikeProps = SectionLikeProps | PlasmicLoaderProps<SectionLikeProps>;
-export type ItemJson = LeafItemJson | SectionJson;
-export type LeafItemJson = string | {
-    value: string;
-    label?: string;
-    textValue?: string;
-    isDisabled?: boolean;
-};
-export interface SectionJson {
-    title: string;
-    children: ItemJson[];
-}
-export declare function deriveItemsFromProps(props: any, opts: {
-    itemPlumeType: string;
-    sectionPlumeType?: string;
-    invalidChildError?: string;
-    requireItemValue: boolean;
-    ItemComponent?: React.ComponentType<ItemLikeProps>;
-    SectionComponent?: React.ComponentType<SectionLikeProps>;
-    itemsProp?: string;
-}): {
-    items: JSX.Element[];
-    disabledKeys: string[];
-} | {
-    items: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-    disabledKeys: React.Key[];
-};
-/**
- * Given children of a component like Select or Menu, derive the items
- * that we will pass into the Collections API.  These will be
- * ReactElement<ItemLikeProps|SectionLikeProps>[].
- *
- * Will also assign keys to items by their index in the collection,
- * and collect the keys of disabled items.
- */
-export declare function deriveItemsFromChildren<T extends React.ReactElement>(children: React.ReactNode, opts: {
-    itemPlumeType: string;
-    sectionPlumeType?: string;
-    invalidChildError?: string;
-    requireItemValue: boolean;
-}): {
-    items: T[];
-    disabledKeys: React.Key[];
-};
-export declare function useDerivedItems(props: any, opts: {
-    itemPlumeType: string;
-    sectionPlumeType?: string;
-    invalidChildError?: string;
-    requireItemValue: boolean;
-    ItemComponent?: React.ComponentType<ItemLikeProps>;
-    SectionComponent?: React.ComponentType<SectionLikeProps>;
-    itemsProp?: string;
-}): {
-    items: JSX.Element[];
-    disabledKeys: string[];
-} | {
-    items: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-    disabledKeys: React.Key[];
-};
-export declare function useDerivedItemsFromChildren<T extends React.ReactElement>(children: React.ReactNode, opts: {
-    itemPlumeType: string;
-    sectionPlumeType?: string;
-    invalidChildError?: string;
-    requireItemValue: boolean;
-}): {
-    items: T[];
-    disabledKeys: React.Key[];
-};
-/**
- * Given a Collection node, create the React element that we should use
- * to render it.
- */
-export declare function renderCollectionNode(node: Node<any>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-/**
- * Renders a item-like or section-like Plume component element into an
- * Item or a Section element.
- */
-export declare function renderAsCollectionChild<T extends React.ReactElement<LoaderAwareItemLikeProps | LoaderAwareSectionLikeProps>>(child: T, opts: {
-    itemPlumeType: string;
-    sectionPlumeType?: string;
-}): JSX.Element;
-export declare function getChildProp(child: React.ReactElement, prop: string): any;
-export {};
+/**
+ * In general, we try not to expose react-aria's Collections API to Plume users.
+ * The Collections API is how react-aria users pass data about collections of
+ * things using the built-in Item and Section components, which are abstract,
+ * metadata-only components that don't render anything but only serve to specify
+ * data.  For example, here's how you would use react-spectrum's Picker:
+ *
+ *   <Picker>
+ *     <Section title="Asia">
+ *       <Item key="taiwan">Taiwan</Item>
+ *       <Item key="japan">Japan</Item>
+ *       <Item key="china">China</Item>
+ *     </Section>
+ *     <Section title="Europe">
+ *       <Item key="germany">Germany</Item>
+ *       <Item key="france">France</Item>
+ *     </Section>
+ *   </Picker>
+ *
+ * You would re-use this same Item/Section components to pass similar things to
+ * Menu, Tabs, etc.
+ *
+ * For Plasmic, this API is too abstract.  The user has explicitly designed components
+ * like Select.Option and Select.OptionGroup, and it is weird that they don't actually
+ * use these components. It is more natural to do:
+ *
+ *   <Select>
+ *     <Select.OptionGroup title="Asia">
+ *       <Select.Option key="taiwan">Taiwan</Select>
+ *     </Select.OptionGroup>
+ *   </Select>
+ *
+ * For Plume, we let users directly use the components they designed, both to collect
+ * information and to perform actual rendering.  For example, for Plume,
+ * you'd use Select.Option instead of Item, and Select.OptionGroup instead of Section.
+ * This means that the Select.Option props will collect the same information Item
+ * does.
+ *
+ * A component like Select.Option then serves two purposes:
+ *
+ * 1. Allow users to specify the collection of data, like in the above example
+ *    Here, we're mainly interested in the props in those ReactElements so
+ *    we can pass the Item/Section data onto react-aria's APIs.  We are not
+ *    actually rendering these elements.
+ * 2. Once react-aria's Collections API has gone through them and built
+ *    Collection "nodes", we then create cloned versions of these elements
+ *    with the corresponding node passed in as a secret prop.  These ReactElements
+ *    are then actually used to _render_ the corresponding Option / OptionGroup.
+ *
+ * This file contains helper functions to help with implementing the above.
+ *
+ * Note also that most of the collections-based react-aria components expose
+ * a parallel API that accepts a list of "items" and a render prop, instead
+ * of list of Item/Section elements.  This is for efficiency, but we are opting
+ * to only support the composite-component pattern for now for simplicity.
+ */
+import { Node } from "@react-types/shared";
+import React from "react";
+export interface PlasmicLoaderProps<T> {
+    component: string;
+    componentProps: T;
+}
+/**
+ * Props for a Plume component that corresponds to an Item
+ */
+export interface ItemLikeProps {
+    /**
+     * value key corresponding to this item. Not required if you use the
+     * `key` prop instead.
+     */
+    value?: string | null;
+    /**
+     * The text string value corresponding to this item. Used to support
+     * keyboard type-ahead.  If not specified, then will be derived from
+     * `children` if it is a string, or the `value` or `key`.
+     */
+    textValue?: string;
+    /**
+     * aria-label for this item.
+     */
+    "aria-label"?: string;
+    /**
+     * Primary content label for this item.
+     */
+    children?: React.ReactNode;
+    /**
+     * If true, this item will not be selectable.
+     */
+    isDisabled?: boolean;
+}
+type LoaderAwareItemLikeProps = ItemLikeProps | PlasmicLoaderProps<ItemLikeProps>;
+/**
+ * Props for a Plume component that corresponds to a Section
+ */
+export interface SectionLikeProps {
+    /**
+     * Heading content of the title
+     */
+    title?: React.ReactNode;
+    /**
+     * aria-label for this section
+     */
+    "aria-label"?: string;
+    /**
+     * A list of items that belong in this group
+     */
+    children?: React.ReactNode;
+}
+type LoaderAwareSectionLikeProps = SectionLikeProps | PlasmicLoaderProps<SectionLikeProps>;
+export type ItemJson = LeafItemJson | SectionJson;
+export type LeafItemJson = string | {
+    value: string;
+    label?: string;
+    textValue?: string;
+    isDisabled?: boolean;
+};
+export interface SectionJson {
+    title: string;
+    children: ItemJson[];
+}
+export declare function deriveItemsFromProps(props: any, opts: {
+    itemPlumeType: string;
+    sectionPlumeType?: string;
+    invalidChildError?: string;
+    requireItemValue: boolean;
+    ItemComponent?: React.ComponentType<ItemLikeProps>;
+    SectionComponent?: React.ComponentType<SectionLikeProps>;
+    itemsProp?: string;
+}): {
+    items: JSX.Element[];
+    disabledKeys: string[];
+} | {
+    items: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+    disabledKeys: React.Key[];
+};
+/**
+ * Given children of a component like Select or Menu, derive the items
+ * that we will pass into the Collections API.  These will be
+ * ReactElement<ItemLikeProps|SectionLikeProps>[].
+ *
+ * Will also assign keys to items by their index in the collection,
+ * and collect the keys of disabled items.
+ */
+export declare function deriveItemsFromChildren<T extends React.ReactElement>(children: React.ReactNode, opts: {
+    itemPlumeType: string;
+    sectionPlumeType?: string;
+    invalidChildError?: string;
+    requireItemValue: boolean;
+}): {
+    items: T[];
+    disabledKeys: React.Key[];
+};
+export declare function useDerivedItems(props: any, opts: {
+    itemPlumeType: string;
+    sectionPlumeType?: string;
+    invalidChildError?: string;
+    requireItemValue: boolean;
+    ItemComponent?: React.ComponentType<ItemLikeProps>;
+    SectionComponent?: React.ComponentType<SectionLikeProps>;
+    itemsProp?: string;
+}): {
+    items: JSX.Element[];
+    disabledKeys: string[];
+} | {
+    items: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+    disabledKeys: React.Key[];
+};
+export declare function useDerivedItemsFromChildren<T extends React.ReactElement>(children: React.ReactNode, opts: {
+    itemPlumeType: string;
+    sectionPlumeType?: string;
+    invalidChildError?: string;
+    requireItemValue: boolean;
+}): {
+    items: T[];
+    disabledKeys: React.Key[];
+};
+/**
+ * Given a Collection node, create the React element that we should use
+ * to render it.
+ */
+export declare function renderCollectionNode(node: Node<any>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+/**
+ * Renders a item-like or section-like Plume component element into an
+ * Item or a Section element.
+ */
+export declare function renderAsCollectionChild<T extends React.ReactElement<LoaderAwareItemLikeProps | LoaderAwareSectionLikeProps>>(child: T, opts: {
+    itemPlumeType: string;
+    sectionPlumeType?: string;
+}): JSX.Element;
+export declare function getChildProp(child: React.ReactElement, prop: string): any;
+export {};

package/skinny/dist/plume/collection-utils.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/skinny/dist/plume/menu/context.d.ts

@@ -1,8 +1,8 @@
-import * as React from "react";
-import type { TreeState } from "@react-stately/tree";
-import type { BaseMenuProps } from "./menu";
-export interface MenuContextValue {
-    menuProps: BaseMenuProps;
-    state: TreeState<any>;
-}
-export declare const MenuContext: React.Context<MenuContextValue | undefined>;
+import * as React from "react";
+import type { TreeState } from "@react-stately/tree";
+import type { BaseMenuProps } from "./menu";
+export interface MenuContextValue {
+    menuProps: BaseMenuProps;
+    state: TreeState<any>;
+}
+export declare const MenuContext: React.Context<MenuContextValue | undefined>;

package/skinny/dist/plume/menu/index.d.ts

@@ -1,3 +1,3 @@
-export { BaseMenuProps, MenuRef, MenuRefValue, useMenu } from "./menu";
-export { BaseMenuGroupProps, useMenuGroup } from "./menu-group";
-export { BaseMenuItemProps, useMenuItem } from "./menu-item";
+export { BaseMenuProps, MenuRef, MenuRefValue, useMenu } from "./menu";
+export { BaseMenuGroupProps, useMenuGroup } from "./menu-group";
+export { BaseMenuItemProps, useMenuItem } from "./menu-item";