@plasmicapp/react-web 0.2.200 → 0.2.202

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (148) hide show
  1. package/dist/all.d.ts +1926 -1925
  2. package/dist/auth/PlasmicPageGuard.d.ts +11 -11
  3. package/dist/common.d.ts +10 -10
  4. package/dist/data-sources/index.d.ts +1 -1
  5. package/dist/host/index.d.ts +1 -1
  6. package/dist/index-common.d.ts +18 -18
  7. package/dist/index-skinny.d.ts +1 -1
  8. package/dist/index.cjs.js +3495 -3495
  9. package/dist/index.cjs.js.map +1 -1
  10. package/dist/index.d.ts +11 -11
  11. package/dist/plume/button/index.d.ts +36 -36
  12. package/dist/plume/checkbox/index.d.ts +47 -47
  13. package/dist/plume/collection-utils.d.ts +191 -191
  14. package/dist/plume/collection-utils.spec.d.ts +1 -1
  15. package/dist/plume/menu/context.d.ts +8 -8
  16. package/dist/plume/menu/index.d.ts +3 -3
  17. package/dist/plume/menu/menu-group.d.ts +23 -23
  18. package/dist/plume/menu/menu-item.d.ts +23 -23
  19. package/dist/plume/menu/menu.d.ts +39 -39
  20. package/dist/plume/menu-button/DropdownMenu.d.ts +34 -34
  21. package/dist/plume/menu-button/index.d.ts +2 -2
  22. package/dist/plume/menu-button/menu-button.d.ts +72 -72
  23. package/dist/plume/menu-button/menu-trigger.d.ts +21 -21
  24. package/dist/plume/plume-utils.d.ts +41 -41
  25. package/dist/plume/props-utils.d.ts +15 -15
  26. package/dist/plume/select/context.d.ts +3 -3
  27. package/dist/plume/select/index.d.ts +4 -4
  28. package/dist/plume/select/select-option-group.d.ts +23 -23
  29. package/dist/plume/select/select-option.d.ts +23 -23
  30. package/dist/plume/select/select.d.ts +111 -111
  31. package/dist/plume/switch/index.d.ts +39 -39
  32. package/dist/plume/text-input/index.d.ts +36 -36
  33. package/dist/plume/triggered-overlay/context.d.ts +14 -14
  34. package/dist/plume/triggered-overlay/index.d.ts +2 -2
  35. package/dist/plume/triggered-overlay/triggered-overlay.d.ts +24 -24
  36. package/dist/query/index.d.ts +1 -1
  37. package/dist/react-utils.d.ts +21 -21
  38. package/dist/react-utils.spec.d.ts +1 -1
  39. package/dist/react-web.esm.js +3496 -3496
  40. package/dist/react-web.esm.js.map +1 -1
  41. package/dist/render/PlasmicHead/index.d.ts +37 -37
  42. package/dist/render/PlasmicIcon.d.ts +4 -4
  43. package/dist/render/PlasmicImg/index.d.ts +81 -81
  44. package/dist/render/PlasmicLink.d.ts +2 -2
  45. package/dist/render/PlasmicSlot.d.ts +11 -11
  46. package/dist/render/Stack.d.ts +51 -51
  47. package/dist/render/elements.d.ts +74 -74
  48. package/dist/render/global-variants.d.ts +1 -1
  49. package/dist/render/screen-variants.d.ts +5 -5
  50. package/dist/render/ssr.d.ts +21 -21
  51. package/dist/render/translation.d.ts +19 -19
  52. package/dist/render/triggers.d.ts +39 -39
  53. package/dist/states/errors.d.ts +13 -13
  54. package/dist/states/graph.d.ts +25 -25
  55. package/dist/states/helpers.d.ts +43 -43
  56. package/dist/states/index.d.ts +4 -4
  57. package/dist/states/types.d.ts +66 -66
  58. package/dist/states/valtio.d.ts +10 -10
  59. package/dist/states/vanilla.d.ts +3 -3
  60. package/dist/stories/PlasmicImg.stories.d.ts +6 -6
  61. package/dist/stories/UseDollarState.stories.d.ts +78 -78
  62. package/lib/data-sources/index.d.ts +1 -1
  63. package/lib/host/index.d.ts +1 -1
  64. package/lib/query/index.d.ts +1 -1
  65. package/package.json +9 -10
  66. package/skinny/dist/auth/PlasmicPageGuard.d.ts +11 -11
  67. package/skinny/dist/{collection-utils-0967eaf0.js → collection-utils-2f28e4eb.js} +297 -297
  68. package/skinny/dist/{collection-utils-0967eaf0.js.map → collection-utils-2f28e4eb.js.map} +1 -1
  69. package/skinny/dist/{common-9d6d348d.js → common-ed411407.js} +130 -130
  70. package/skinny/dist/{common-9d6d348d.js.map → common-ed411407.js.map} +1 -1
  71. package/skinny/dist/common.d.ts +10 -10
  72. package/skinny/dist/data-sources/index.d.ts +1 -1
  73. package/skinny/dist/host/index.d.ts +1 -1
  74. package/skinny/dist/index-common.d.ts +18 -18
  75. package/skinny/dist/index-skinny.d.ts +1 -1
  76. package/skinny/dist/index.d.ts +11 -11
  77. package/skinny/dist/index.js +1559 -1559
  78. package/skinny/dist/index.js.map +1 -1
  79. package/skinny/dist/plume/button/index.d.ts +36 -36
  80. package/skinny/dist/plume/button/index.js +21 -21
  81. package/skinny/dist/plume/checkbox/index.d.ts +47 -47
  82. package/skinny/dist/plume/checkbox/index.js +64 -64
  83. package/skinny/dist/plume/collection-utils.d.ts +191 -191
  84. package/skinny/dist/plume/collection-utils.spec.d.ts +1 -1
  85. package/skinny/dist/plume/menu/context.d.ts +8 -8
  86. package/skinny/dist/plume/menu/index.d.ts +3 -3
  87. package/skinny/dist/plume/menu/index.js +165 -165
  88. package/skinny/dist/plume/menu/menu-group.d.ts +23 -23
  89. package/skinny/dist/plume/menu/menu-item.d.ts +23 -23
  90. package/skinny/dist/plume/menu/menu.d.ts +39 -39
  91. package/skinny/dist/plume/menu-button/DropdownMenu.d.ts +34 -34
  92. package/skinny/dist/plume/menu-button/index.d.ts +2 -2
  93. package/skinny/dist/plume/menu-button/index.js +125 -125
  94. package/skinny/dist/plume/menu-button/index.js.map +1 -1
  95. package/skinny/dist/plume/menu-button/menu-button.d.ts +72 -72
  96. package/skinny/dist/plume/menu-button/menu-trigger.d.ts +21 -21
  97. package/skinny/dist/plume/plume-utils.d.ts +41 -41
  98. package/skinny/dist/plume/props-utils.d.ts +15 -15
  99. package/skinny/dist/plume/select/context.d.ts +3 -3
  100. package/skinny/dist/plume/select/index.d.ts +4 -4
  101. package/skinny/dist/plume/select/index.js +250 -250
  102. package/skinny/dist/plume/select/index.js.map +1 -1
  103. package/skinny/dist/plume/select/select-option-group.d.ts +23 -23
  104. package/skinny/dist/plume/select/select-option.d.ts +23 -23
  105. package/skinny/dist/plume/select/select.d.ts +111 -111
  106. package/skinny/dist/plume/switch/index.d.ts +39 -39
  107. package/skinny/dist/plume/switch/index.js +61 -61
  108. package/skinny/dist/plume/text-input/index.d.ts +36 -36
  109. package/skinny/dist/plume/text-input/index.js +45 -45
  110. package/skinny/dist/plume/triggered-overlay/context.d.ts +14 -14
  111. package/skinny/dist/plume/triggered-overlay/index.d.ts +2 -2
  112. package/skinny/dist/plume/triggered-overlay/index.js +100 -100
  113. package/skinny/dist/plume/triggered-overlay/index.js.map +1 -1
  114. package/skinny/dist/plume/triggered-overlay/triggered-overlay.d.ts +24 -24
  115. package/skinny/dist/{plume-utils-7d68bcc0.js → plume-utils-e699cd08.js} +30 -30
  116. package/skinny/dist/{plume-utils-7d68bcc0.js.map → plume-utils-e699cd08.js.map} +1 -1
  117. package/skinny/dist/{props-utils-9f9c761a.js → props-utils-9d74371f.js} +4 -4
  118. package/skinny/dist/{props-utils-9f9c761a.js.map → props-utils-9d74371f.js.map} +1 -1
  119. package/skinny/dist/query/index.d.ts +1 -1
  120. package/skinny/dist/{react-utils-ee4e03ba.js → react-utils-5ff031c2.js} +195 -195
  121. package/skinny/dist/{react-utils-ee4e03ba.js.map → react-utils-5ff031c2.js.map} +1 -1
  122. package/skinny/dist/react-utils.d.ts +21 -21
  123. package/skinny/dist/react-utils.spec.d.ts +1 -1
  124. package/skinny/dist/render/PlasmicHead/index.d.ts +37 -37
  125. package/skinny/dist/render/PlasmicHead/index.js +54 -54
  126. package/skinny/dist/render/PlasmicIcon.d.ts +4 -4
  127. package/skinny/dist/render/PlasmicImg/index.d.ts +81 -81
  128. package/skinny/dist/render/PlasmicImg/index.js +297 -297
  129. package/skinny/dist/render/PlasmicLink.d.ts +2 -2
  130. package/skinny/dist/render/PlasmicSlot.d.ts +11 -11
  131. package/skinny/dist/render/Stack.d.ts +51 -51
  132. package/skinny/dist/render/elements.d.ts +74 -74
  133. package/skinny/dist/render/global-variants.d.ts +1 -1
  134. package/skinny/dist/render/screen-variants.d.ts +5 -5
  135. package/skinny/dist/render/ssr.d.ts +21 -21
  136. package/skinny/dist/render/translation.d.ts +19 -19
  137. package/skinny/dist/render/triggers.d.ts +39 -39
  138. package/skinny/dist/{ssr-c9834f50.js → ssr-8625df04.js} +107 -107
  139. package/skinny/dist/{ssr-c9834f50.js.map → ssr-8625df04.js.map} +1 -1
  140. package/skinny/dist/states/errors.d.ts +13 -13
  141. package/skinny/dist/states/graph.d.ts +25 -25
  142. package/skinny/dist/states/helpers.d.ts +43 -43
  143. package/skinny/dist/states/index.d.ts +4 -4
  144. package/skinny/dist/states/types.d.ts +66 -66
  145. package/skinny/dist/states/valtio.d.ts +10 -10
  146. package/skinny/dist/states/vanilla.d.ts +3 -3
  147. package/skinny/dist/stories/PlasmicImg.stories.d.ts +6 -6
  148. package/skinny/dist/stories/UseDollarState.stories.d.ts +78 -78
package/dist/index.d.ts CHANGED
@@ -1,11 +1,11 @@
1
- export * from "./index-common";
2
- export * from "./plume/button";
3
- export * from "./plume/checkbox";
4
- export * from "./plume/menu";
5
- export * from "./plume/menu-button";
6
- export { setPlumeStrictMode } from "./plume/plume-utils";
7
- export { getDataProps } from "./plume/props-utils";
8
- export * from "./plume/select";
9
- export * from "./plume/switch";
10
- export * from "./plume/text-input";
11
- export * from "./plume/triggered-overlay";
1
+ export * from "./index-common";
2
+ export * from "./plume/button";
3
+ export * from "./plume/checkbox";
4
+ export * from "./plume/menu";
5
+ export * from "./plume/menu-button";
6
+ export { setPlumeStrictMode } from "./plume/plume-utils";
7
+ export { getDataProps } from "./plume/props-utils";
8
+ export * from "./plume/select";
9
+ export * from "./plume/switch";
10
+ export * from "./plume/text-input";
11
+ export * from "./plume/triggered-overlay";
@@ -1,36 +1,36 @@
1
- import * as React from "react";
2
- import { AnyPlasmicClass, PlasmicClassArgs, PlasmicClassOverrides, PlasmicClassVariants, VariantDef } from "../plume-utils";
3
- interface CommonProps {
4
- showStartIcon?: boolean;
5
- showEndIcon?: boolean;
6
- startIcon?: React.ReactNode;
7
- endIcon?: React.ReactNode;
8
- children?: React.ReactNode;
9
- isDisabled?: boolean;
10
- }
11
- interface HtmlButtonProps extends Omit<React.ComponentProps<"button">, "ref" | "disabled"> {
12
- }
13
- interface HtmlAnchorProps extends Omit<React.ComponentProps<"a">, "ref" | "href"> {
14
- link?: string;
15
- }
16
- export type BaseButtonProps = CommonProps & HtmlButtonProps & HtmlAnchorProps;
17
- export type HtmlAnchorOnlyProps = Exclude<keyof HtmlAnchorProps, keyof HtmlButtonProps>;
18
- export type HtmlButtonOnlyProps = Exclude<keyof HtmlButtonProps, keyof HtmlAnchorProps>;
19
- export type ButtonRef = React.Ref<HTMLButtonElement | HTMLAnchorElement>;
20
- interface ButtonConfig<C extends AnyPlasmicClass> {
21
- showStartIconVariant: VariantDef<PlasmicClassVariants<C>>;
22
- showEndIconVariant?: VariantDef<PlasmicClassVariants<C>>;
23
- isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;
24
- startIconSlot?: keyof PlasmicClassArgs<C>;
25
- endIconSlot?: keyof PlasmicClassArgs<C>;
26
- contentSlot: keyof PlasmicClassArgs<C>;
27
- root: keyof PlasmicClassOverrides<C>;
28
- }
29
- export declare function useButton<P extends BaseButtonProps, C extends AnyPlasmicClass>(plasmicClass: C, props: P, config: ButtonConfig<C>, ref?: ButtonRef): {
30
- plasmicProps: {
31
- variants: PlasmicClassVariants<C>;
32
- args: PlasmicClassArgs<C>;
33
- overrides: PlasmicClassOverrides<C>;
34
- };
35
- };
36
- export {};
1
+ import * as React from "react";
2
+ import { AnyPlasmicClass, PlasmicClassArgs, PlasmicClassOverrides, PlasmicClassVariants, VariantDef } from "../plume-utils";
3
+ interface CommonProps {
4
+ showStartIcon?: boolean;
5
+ showEndIcon?: boolean;
6
+ startIcon?: React.ReactNode;
7
+ endIcon?: React.ReactNode;
8
+ children?: React.ReactNode;
9
+ isDisabled?: boolean;
10
+ }
11
+ interface HtmlButtonProps extends Omit<React.ComponentProps<"button">, "ref" | "disabled"> {
12
+ }
13
+ interface HtmlAnchorProps extends Omit<React.ComponentProps<"a">, "ref" | "href"> {
14
+ link?: string;
15
+ }
16
+ export type BaseButtonProps = CommonProps & HtmlButtonProps & HtmlAnchorProps;
17
+ export type HtmlAnchorOnlyProps = Exclude<keyof HtmlAnchorProps, keyof HtmlButtonProps>;
18
+ export type HtmlButtonOnlyProps = Exclude<keyof HtmlButtonProps, keyof HtmlAnchorProps>;
19
+ export type ButtonRef = React.Ref<HTMLButtonElement | HTMLAnchorElement>;
20
+ interface ButtonConfig<C extends AnyPlasmicClass> {
21
+ showStartIconVariant: VariantDef<PlasmicClassVariants<C>>;
22
+ showEndIconVariant?: VariantDef<PlasmicClassVariants<C>>;
23
+ isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;
24
+ startIconSlot?: keyof PlasmicClassArgs<C>;
25
+ endIconSlot?: keyof PlasmicClassArgs<C>;
26
+ contentSlot: keyof PlasmicClassArgs<C>;
27
+ root: keyof PlasmicClassOverrides<C>;
28
+ }
29
+ export declare function useButton<P extends BaseButtonProps, C extends AnyPlasmicClass>(plasmicClass: C, props: P, config: ButtonConfig<C>, ref?: ButtonRef): {
30
+ plasmicProps: {
31
+ variants: PlasmicClassVariants<C>;
32
+ args: PlasmicClassArgs<C>;
33
+ overrides: PlasmicClassOverrides<C>;
34
+ };
35
+ };
36
+ export {};
@@ -1,47 +1,47 @@
1
- import { AriaCheckboxProps } from "@react-types/checkbox";
2
- import * as React from "react";
3
- import { AnyPlasmicClass, PlasmicClassArgs, PlasmicClassOverrides, PlasmicClassVariants, VariantDef } from "../plume-utils";
4
- import { StyleProps } from "../props-utils";
5
- export type CheckboxRef = React.Ref<CheckboxRefValue>;
6
- export interface CheckboxRefValue extends CheckboxState {
7
- getRoot: () => HTMLElement | null;
8
- focus: () => void;
9
- blur: () => void;
10
- }
11
- interface CheckboxState {
12
- setChecked: (checked: boolean) => void;
13
- }
14
- export interface CheckboxProps extends Omit<AriaCheckboxProps, "isSelected" | "defaultSelected">, StyleProps {
15
- /**
16
- * Whether the Checkbox is checked or not; controlled
17
- */
18
- isChecked?: boolean;
19
- /**
20
- * Whether the Checkbox is checked by default; uncontrolled
21
- */
22
- defaultChecked?: boolean;
23
- /**
24
- * Whether the Checkbox is in an "indeterminate" state; this usually
25
- * refers to a "check all" that is used to check / uncheck many other
26
- * checkboxes, and is visually indeterminate if some of its controlled
27
- * checkboxes are checked and some are not.
28
- */
29
- isIndeterminate?: boolean;
30
- }
31
- interface CheckboxConfig<C extends AnyPlasmicClass> {
32
- isCheckedVariant: VariantDef<PlasmicClassVariants<C>>;
33
- isIndeterminateVariant?: VariantDef<PlasmicClassVariants<C>>;
34
- isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;
35
- noLabelVariant?: VariantDef<PlasmicClassVariants<C>>;
36
- labelSlot?: keyof PlasmicClassArgs<C>;
37
- root: keyof PlasmicClassOverrides<C>;
38
- }
39
- export declare function useCheckbox<P extends CheckboxProps, C extends AnyPlasmicClass>(plasmicClass: C, props: P, config: CheckboxConfig<C>, ref?: CheckboxRef): {
40
- plasmicProps: {
41
- variants: PlasmicClassVariants<C>;
42
- overrides: PlasmicClassOverrides<C>;
43
- args: PlasmicClassArgs<C>;
44
- };
45
- state: CheckboxState;
46
- };
47
- export {};
1
+ import { AriaCheckboxProps } from "@react-types/checkbox";
2
+ import * as React from "react";
3
+ import { AnyPlasmicClass, PlasmicClassArgs, PlasmicClassOverrides, PlasmicClassVariants, VariantDef } from "../plume-utils";
4
+ import { StyleProps } from "../props-utils";
5
+ export type CheckboxRef = React.Ref<CheckboxRefValue>;
6
+ export interface CheckboxRefValue extends CheckboxState {
7
+ getRoot: () => HTMLElement | null;
8
+ focus: () => void;
9
+ blur: () => void;
10
+ }
11
+ interface CheckboxState {
12
+ setChecked: (checked: boolean) => void;
13
+ }
14
+ export interface CheckboxProps extends Omit<AriaCheckboxProps, "isSelected" | "defaultSelected">, StyleProps {
15
+ /**
16
+ * Whether the Checkbox is checked or not; controlled
17
+ */
18
+ isChecked?: boolean;
19
+ /**
20
+ * Whether the Checkbox is checked by default; uncontrolled
21
+ */
22
+ defaultChecked?: boolean;
23
+ /**
24
+ * Whether the Checkbox is in an "indeterminate" state; this usually
25
+ * refers to a "check all" that is used to check / uncheck many other
26
+ * checkboxes, and is visually indeterminate if some of its controlled
27
+ * checkboxes are checked and some are not.
28
+ */
29
+ isIndeterminate?: boolean;
30
+ }
31
+ interface CheckboxConfig<C extends AnyPlasmicClass> {
32
+ isCheckedVariant: VariantDef<PlasmicClassVariants<C>>;
33
+ isIndeterminateVariant?: VariantDef<PlasmicClassVariants<C>>;
34
+ isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;
35
+ noLabelVariant?: VariantDef<PlasmicClassVariants<C>>;
36
+ labelSlot?: keyof PlasmicClassArgs<C>;
37
+ root: keyof PlasmicClassOverrides<C>;
38
+ }
39
+ export declare function useCheckbox<P extends CheckboxProps, C extends AnyPlasmicClass>(plasmicClass: C, props: P, config: CheckboxConfig<C>, ref?: CheckboxRef): {
40
+ plasmicProps: {
41
+ variants: PlasmicClassVariants<C>;
42
+ overrides: PlasmicClassOverrides<C>;
43
+ args: PlasmicClassArgs<C>;
44
+ };
45
+ state: CheckboxState;
46
+ };
47
+ export {};
@@ -1,191 +1,191 @@
1
- /**
2
- * In general, we try not to expose react-aria's Collections API to Plume users.
3
- * The Collections API is how react-aria users pass data about collections of
4
- * things using the built-in Item and Section components, which are abstract,
5
- * metadata-only components that don't render anything but only serve to specify
6
- * data. For example, here's how you would use react-spectrum's Picker:
7
- *
8
- * <Picker>
9
- * <Section title="Asia">
10
- * <Item key="taiwan">Taiwan</Item>
11
- * <Item key="japan">Japan</Item>
12
- * <Item key="china">China</Item>
13
- * </Section>
14
- * <Section title="Europe">
15
- * <Item key="germany">Germany</Item>
16
- * <Item key="france">France</Item>
17
- * </Section>
18
- * </Picker>
19
- *
20
- * You would re-use this same Item/Section components to pass similar things to
21
- * Menu, Tabs, etc.
22
- *
23
- * For Plasmic, this API is too abstract. The user has explicitly designed components
24
- * like Select.Option and Select.OptionGroup, and it is weird that they don't actually
25
- * use these components. It is more natural to do:
26
- *
27
- * <Select>
28
- * <Select.OptionGroup title="Asia">
29
- * <Select.Option key="taiwan">Taiwan</Select>
30
- * </Select.OptionGroup>
31
- * </Select>
32
- *
33
- * For Plume, we let users directly use the components they designed, both to collect
34
- * information and to perform actual rendering. For example, for Plume,
35
- * you'd use Select.Option instead of Item, and Select.OptionGroup instead of Section.
36
- * This means that the Select.Option props will collect the same information Item
37
- * does.
38
- *
39
- * A component like Select.Option then serves two purposes:
40
- *
41
- * 1. Allow users to specify the collection of data, like in the above example
42
- * Here, we're mainly interested in the props in those ReactElements so
43
- * we can pass the Item/Section data onto react-aria's APIs. We are not
44
- * actually rendering these elements.
45
- * 2. Once react-aria's Collections API has gone through them and built
46
- * Collection "nodes", we then create cloned versions of these elements
47
- * with the corresponding node passed in as a secret prop. These ReactElements
48
- * are then actually used to _render_ the corresponding Option / OptionGroup.
49
- *
50
- * This file contains helper functions to help with implementing the above.
51
- *
52
- * Note also that most of the collections-based react-aria components expose
53
- * a parallel API that accepts a list of "items" and a render prop, instead
54
- * of list of Item/Section elements. This is for efficiency, but we are opting
55
- * to only support the composite-component pattern for now for simplicity.
56
- */
57
- import { Node } from "@react-types/shared";
58
- import React from "react";
59
- export interface PlasmicLoaderProps<T> {
60
- component: string;
61
- componentProps: T;
62
- }
63
- /**
64
- * Props for a Plume component that corresponds to an Item
65
- */
66
- export interface ItemLikeProps {
67
- /**
68
- * value key corresponding to this item. Not required if you use the
69
- * `key` prop instead.
70
- */
71
- value?: string | null;
72
- /**
73
- * The text string value corresponding to this item. Used to support
74
- * keyboard type-ahead. If not specified, then will be derived from
75
- * `children` if it is a string, or the `value` or `key`.
76
- */
77
- textValue?: string;
78
- /**
79
- * aria-label for this item.
80
- */
81
- "aria-label"?: string;
82
- /**
83
- * Primary content label for this item.
84
- */
85
- children?: React.ReactNode;
86
- /**
87
- * If true, this item will not be selectable.
88
- */
89
- isDisabled?: boolean;
90
- }
91
- type LoaderAwareItemLikeProps = ItemLikeProps | PlasmicLoaderProps<ItemLikeProps>;
92
- /**
93
- * Props for a Plume component that corresponds to a Section
94
- */
95
- export interface SectionLikeProps {
96
- /**
97
- * Heading content of the title
98
- */
99
- title?: React.ReactNode;
100
- /**
101
- * aria-label for this section
102
- */
103
- "aria-label"?: string;
104
- /**
105
- * A list of items that belong in this group
106
- */
107
- children?: React.ReactNode;
108
- }
109
- type LoaderAwareSectionLikeProps = SectionLikeProps | PlasmicLoaderProps<SectionLikeProps>;
110
- export type ItemJson = LeafItemJson | SectionJson;
111
- export type LeafItemJson = string | {
112
- value: string;
113
- label?: string;
114
- textValue?: string;
115
- isDisabled?: boolean;
116
- };
117
- export interface SectionJson {
118
- title: string;
119
- children: ItemJson[];
120
- }
121
- export declare function deriveItemsFromProps(props: any, opts: {
122
- itemPlumeType: string;
123
- sectionPlumeType?: string;
124
- invalidChildError?: string;
125
- requireItemValue: boolean;
126
- ItemComponent?: React.ComponentType<ItemLikeProps>;
127
- SectionComponent?: React.ComponentType<SectionLikeProps>;
128
- itemsProp?: string;
129
- }): {
130
- items: JSX.Element[];
131
- disabledKeys: string[];
132
- } | {
133
- items: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
134
- disabledKeys: React.Key[];
135
- };
136
- /**
137
- * Given children of a component like Select or Menu, derive the items
138
- * that we will pass into the Collections API. These will be
139
- * ReactElement<ItemLikeProps|SectionLikeProps>[].
140
- *
141
- * Will also assign keys to items by their index in the collection,
142
- * and collect the keys of disabled items.
143
- */
144
- export declare function deriveItemsFromChildren<T extends React.ReactElement>(children: React.ReactNode, opts: {
145
- itemPlumeType: string;
146
- sectionPlumeType?: string;
147
- invalidChildError?: string;
148
- requireItemValue: boolean;
149
- }): {
150
- items: T[];
151
- disabledKeys: React.Key[];
152
- };
153
- export declare function useDerivedItems(props: any, opts: {
154
- itemPlumeType: string;
155
- sectionPlumeType?: string;
156
- invalidChildError?: string;
157
- requireItemValue: boolean;
158
- ItemComponent?: React.ComponentType<ItemLikeProps>;
159
- SectionComponent?: React.ComponentType<SectionLikeProps>;
160
- itemsProp?: string;
161
- }): {
162
- items: JSX.Element[];
163
- disabledKeys: string[];
164
- } | {
165
- items: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
166
- disabledKeys: React.Key[];
167
- };
168
- export declare function useDerivedItemsFromChildren<T extends React.ReactElement>(children: React.ReactNode, opts: {
169
- itemPlumeType: string;
170
- sectionPlumeType?: string;
171
- invalidChildError?: string;
172
- requireItemValue: boolean;
173
- }): {
174
- items: T[];
175
- disabledKeys: React.Key[];
176
- };
177
- /**
178
- * Given a Collection node, create the React element that we should use
179
- * to render it.
180
- */
181
- export declare function renderCollectionNode(node: Node<any>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
182
- /**
183
- * Renders a item-like or section-like Plume component element into an
184
- * Item or a Section element.
185
- */
186
- export declare function renderAsCollectionChild<T extends React.ReactElement<LoaderAwareItemLikeProps | LoaderAwareSectionLikeProps>>(child: T, opts: {
187
- itemPlumeType: string;
188
- sectionPlumeType?: string;
189
- }): JSX.Element;
190
- export declare function getChildProp(child: React.ReactElement, prop: string): any;
191
- export {};
1
+ /**
2
+ * In general, we try not to expose react-aria's Collections API to Plume users.
3
+ * The Collections API is how react-aria users pass data about collections of
4
+ * things using the built-in Item and Section components, which are abstract,
5
+ * metadata-only components that don't render anything but only serve to specify
6
+ * data. For example, here's how you would use react-spectrum's Picker:
7
+ *
8
+ * <Picker>
9
+ * <Section title="Asia">
10
+ * <Item key="taiwan">Taiwan</Item>
11
+ * <Item key="japan">Japan</Item>
12
+ * <Item key="china">China</Item>
13
+ * </Section>
14
+ * <Section title="Europe">
15
+ * <Item key="germany">Germany</Item>
16
+ * <Item key="france">France</Item>
17
+ * </Section>
18
+ * </Picker>
19
+ *
20
+ * You would re-use this same Item/Section components to pass similar things to
21
+ * Menu, Tabs, etc.
22
+ *
23
+ * For Plasmic, this API is too abstract. The user has explicitly designed components
24
+ * like Select.Option and Select.OptionGroup, and it is weird that they don't actually
25
+ * use these components. It is more natural to do:
26
+ *
27
+ * <Select>
28
+ * <Select.OptionGroup title="Asia">
29
+ * <Select.Option key="taiwan">Taiwan</Select>
30
+ * </Select.OptionGroup>
31
+ * </Select>
32
+ *
33
+ * For Plume, we let users directly use the components they designed, both to collect
34
+ * information and to perform actual rendering. For example, for Plume,
35
+ * you'd use Select.Option instead of Item, and Select.OptionGroup instead of Section.
36
+ * This means that the Select.Option props will collect the same information Item
37
+ * does.
38
+ *
39
+ * A component like Select.Option then serves two purposes:
40
+ *
41
+ * 1. Allow users to specify the collection of data, like in the above example
42
+ * Here, we're mainly interested in the props in those ReactElements so
43
+ * we can pass the Item/Section data onto react-aria's APIs. We are not
44
+ * actually rendering these elements.
45
+ * 2. Once react-aria's Collections API has gone through them and built
46
+ * Collection "nodes", we then create cloned versions of these elements
47
+ * with the corresponding node passed in as a secret prop. These ReactElements
48
+ * are then actually used to _render_ the corresponding Option / OptionGroup.
49
+ *
50
+ * This file contains helper functions to help with implementing the above.
51
+ *
52
+ * Note also that most of the collections-based react-aria components expose
53
+ * a parallel API that accepts a list of "items" and a render prop, instead
54
+ * of list of Item/Section elements. This is for efficiency, but we are opting
55
+ * to only support the composite-component pattern for now for simplicity.
56
+ */
57
+ import { Node } from "@react-types/shared";
58
+ import React from "react";
59
+ export interface PlasmicLoaderProps<T> {
60
+ component: string;
61
+ componentProps: T;
62
+ }
63
+ /**
64
+ * Props for a Plume component that corresponds to an Item
65
+ */
66
+ export interface ItemLikeProps {
67
+ /**
68
+ * value key corresponding to this item. Not required if you use the
69
+ * `key` prop instead.
70
+ */
71
+ value?: string | null;
72
+ /**
73
+ * The text string value corresponding to this item. Used to support
74
+ * keyboard type-ahead. If not specified, then will be derived from
75
+ * `children` if it is a string, or the `value` or `key`.
76
+ */
77
+ textValue?: string;
78
+ /**
79
+ * aria-label for this item.
80
+ */
81
+ "aria-label"?: string;
82
+ /**
83
+ * Primary content label for this item.
84
+ */
85
+ children?: React.ReactNode;
86
+ /**
87
+ * If true, this item will not be selectable.
88
+ */
89
+ isDisabled?: boolean;
90
+ }
91
+ type LoaderAwareItemLikeProps = ItemLikeProps | PlasmicLoaderProps<ItemLikeProps>;
92
+ /**
93
+ * Props for a Plume component that corresponds to a Section
94
+ */
95
+ export interface SectionLikeProps {
96
+ /**
97
+ * Heading content of the title
98
+ */
99
+ title?: React.ReactNode;
100
+ /**
101
+ * aria-label for this section
102
+ */
103
+ "aria-label"?: string;
104
+ /**
105
+ * A list of items that belong in this group
106
+ */
107
+ children?: React.ReactNode;
108
+ }
109
+ type LoaderAwareSectionLikeProps = SectionLikeProps | PlasmicLoaderProps<SectionLikeProps>;
110
+ export type ItemJson = LeafItemJson | SectionJson;
111
+ export type LeafItemJson = string | {
112
+ value: string;
113
+ label?: string;
114
+ textValue?: string;
115
+ isDisabled?: boolean;
116
+ };
117
+ export interface SectionJson {
118
+ title: string;
119
+ children: ItemJson[];
120
+ }
121
+ export declare function deriveItemsFromProps(props: any, opts: {
122
+ itemPlumeType: string;
123
+ sectionPlumeType?: string;
124
+ invalidChildError?: string;
125
+ requireItemValue: boolean;
126
+ ItemComponent?: React.ComponentType<ItemLikeProps>;
127
+ SectionComponent?: React.ComponentType<SectionLikeProps>;
128
+ itemsProp?: string;
129
+ }): {
130
+ items: JSX.Element[];
131
+ disabledKeys: string[];
132
+ } | {
133
+ items: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
134
+ disabledKeys: React.Key[];
135
+ };
136
+ /**
137
+ * Given children of a component like Select or Menu, derive the items
138
+ * that we will pass into the Collections API. These will be
139
+ * ReactElement<ItemLikeProps|SectionLikeProps>[].
140
+ *
141
+ * Will also assign keys to items by their index in the collection,
142
+ * and collect the keys of disabled items.
143
+ */
144
+ export declare function deriveItemsFromChildren<T extends React.ReactElement>(children: React.ReactNode, opts: {
145
+ itemPlumeType: string;
146
+ sectionPlumeType?: string;
147
+ invalidChildError?: string;
148
+ requireItemValue: boolean;
149
+ }): {
150
+ items: T[];
151
+ disabledKeys: React.Key[];
152
+ };
153
+ export declare function useDerivedItems(props: any, opts: {
154
+ itemPlumeType: string;
155
+ sectionPlumeType?: string;
156
+ invalidChildError?: string;
157
+ requireItemValue: boolean;
158
+ ItemComponent?: React.ComponentType<ItemLikeProps>;
159
+ SectionComponent?: React.ComponentType<SectionLikeProps>;
160
+ itemsProp?: string;
161
+ }): {
162
+ items: JSX.Element[];
163
+ disabledKeys: string[];
164
+ } | {
165
+ items: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
166
+ disabledKeys: React.Key[];
167
+ };
168
+ export declare function useDerivedItemsFromChildren<T extends React.ReactElement>(children: React.ReactNode, opts: {
169
+ itemPlumeType: string;
170
+ sectionPlumeType?: string;
171
+ invalidChildError?: string;
172
+ requireItemValue: boolean;
173
+ }): {
174
+ items: T[];
175
+ disabledKeys: React.Key[];
176
+ };
177
+ /**
178
+ * Given a Collection node, create the React element that we should use
179
+ * to render it.
180
+ */
181
+ export declare function renderCollectionNode(node: Node<any>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
182
+ /**
183
+ * Renders a item-like or section-like Plume component element into an
184
+ * Item or a Section element.
185
+ */
186
+ export declare function renderAsCollectionChild<T extends React.ReactElement<LoaderAwareItemLikeProps | LoaderAwareSectionLikeProps>>(child: T, opts: {
187
+ itemPlumeType: string;
188
+ sectionPlumeType?: string;
189
+ }): JSX.Element;
190
+ export declare function getChildProp(child: React.ReactElement, prop: string): any;
191
+ export {};
@@ -1 +1 @@
1
- export {};
1
+ export {};
@@ -1,8 +1,8 @@
1
- import * as React from "react";
2
- import type { TreeState } from "@react-stately/tree";
3
- import type { BaseMenuProps } from "./menu";
4
- export interface MenuContextValue {
5
- menuProps: BaseMenuProps;
6
- state: TreeState<any>;
7
- }
8
- export declare const MenuContext: React.Context<MenuContextValue | undefined>;
1
+ import * as React from "react";
2
+ import type { TreeState } from "@react-stately/tree";
3
+ import type { BaseMenuProps } from "./menu";
4
+ export interface MenuContextValue {
5
+ menuProps: BaseMenuProps;
6
+ state: TreeState<any>;
7
+ }
8
+ export declare const MenuContext: React.Context<MenuContextValue | undefined>;
@@ -1,3 +1,3 @@
1
- export { BaseMenuProps, MenuRef, MenuRefValue, useMenu } from "./menu";
2
- export { BaseMenuGroupProps, useMenuGroup } from "./menu-group";
3
- export { BaseMenuItemProps, useMenuItem } from "./menu-item";
1
+ export { BaseMenuProps, MenuRef, MenuRefValue, useMenu } from "./menu";
2
+ export { BaseMenuGroupProps, useMenuGroup } from "./menu-group";
3
+ export { BaseMenuItemProps, useMenuItem } from "./menu-item";
@@ -1,23 +1,23 @@
1
- import { SectionLikeProps } from "../collection-utils";
2
- import { AnyPlasmicClass, PlasmicClassArgs, PlasmicClassOverrides, PlasmicClassVariants } from "../plume-utils";
3
- import { StyleProps } from "../props-utils";
4
- export interface BaseMenuGroupProps extends SectionLikeProps, StyleProps {
5
- }
6
- interface MenuGroupConfig<C extends AnyPlasmicClass> {
7
- noTitleVariant: PlasmicClassVariants<C>;
8
- isFirstVariant: PlasmicClassVariants<C>;
9
- itemsSlot: keyof PlasmicClassArgs<C>;
10
- titleSlot: keyof PlasmicClassArgs<C>;
11
- root: keyof PlasmicClassOverrides<C>;
12
- separator: keyof PlasmicClassOverrides<C>;
13
- titleContainer: keyof PlasmicClassOverrides<C>;
14
- itemsContainer: keyof PlasmicClassOverrides<C>;
15
- }
16
- export declare function useMenuGroup<P extends BaseMenuGroupProps, C extends AnyPlasmicClass>(plasmicClass: C, props: P, config: MenuGroupConfig<C>): {
17
- plasmicProps: {
18
- variants: PlasmicClassVariants<C>;
19
- args: PlasmicClassArgs<C>;
20
- overrides: PlasmicClassOverrides<C>;
21
- };
22
- };
23
- export {};
1
+ import { SectionLikeProps } from "../collection-utils";
2
+ import { AnyPlasmicClass, PlasmicClassArgs, PlasmicClassOverrides, PlasmicClassVariants } from "../plume-utils";
3
+ import { StyleProps } from "../props-utils";
4
+ export interface BaseMenuGroupProps extends SectionLikeProps, StyleProps {
5
+ }
6
+ interface MenuGroupConfig<C extends AnyPlasmicClass> {
7
+ noTitleVariant: PlasmicClassVariants<C>;
8
+ isFirstVariant: PlasmicClassVariants<C>;
9
+ itemsSlot: keyof PlasmicClassArgs<C>;
10
+ titleSlot: keyof PlasmicClassArgs<C>;
11
+ root: keyof PlasmicClassOverrides<C>;
12
+ separator: keyof PlasmicClassOverrides<C>;
13
+ titleContainer: keyof PlasmicClassOverrides<C>;
14
+ itemsContainer: keyof PlasmicClassOverrides<C>;
15
+ }
16
+ export declare function useMenuGroup<P extends BaseMenuGroupProps, C extends AnyPlasmicClass>(plasmicClass: C, props: P, config: MenuGroupConfig<C>): {
17
+ plasmicProps: {
18
+ variants: PlasmicClassVariants<C>;
19
+ args: PlasmicClassArgs<C>;
20
+ overrides: PlasmicClassOverrides<C>;
21
+ };
22
+ };
23
+ export {};