@plasmicpkgs/react-aria 0.0.56 → 0.0.57
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.
- package/dist/.tsbuildinfo +1 -1
- package/dist/react-aria.esm.js +14 -5
- package/dist/react-aria.esm.js.map +1 -1
- package/dist/react-aria.js +14 -5
- package/dist/react-aria.js.map +1 -1
- package/package.json +2 -2
- package/skinny/registerButton.cjs.js +2 -2
- package/skinny/registerButton.cjs.js.map +1 -1
- package/skinny/registerButton.esm.js +2 -2
- package/skinny/registerButton.esm.js.map +1 -1
- package/skinny/registerComboBox.cjs.js +7 -0
- package/skinny/registerComboBox.cjs.js.map +1 -1
- package/skinny/registerComboBox.esm.js +7 -0
- package/skinny/registerComboBox.esm.js.map +1 -1
- package/skinny/registerPopover.cjs.js +1 -1
- package/skinny/registerPopover.cjs.js.map +1 -1
- package/skinny/registerPopover.esm.js +1 -1
- package/skinny/registerPopover.esm.js.map +1 -1
- package/skinny/registerSelect.cjs.js +3 -1
- package/skinny/registerSelect.cjs.js.map +1 -1
- package/skinny/registerSelect.esm.js +3 -1
- package/skinny/registerSelect.esm.js.map +1 -1
- package/skinny/registerSliderThumb.cjs.js +1 -1
- package/skinny/registerSliderThumb.cjs.js.map +1 -1
- package/skinny/registerSliderThumb.esm.js +1 -1
- package/skinny/registerSliderThumb.esm.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plasmicpkgs/react-aria",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.57",
|
|
4
4
|
"description": "Plasmic registration calls for react-aria based components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"publishConfig": {
|
|
75
75
|
"access": "public"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "0240071b5ec0d47c816bf16781273f710e758443"
|
|
78
78
|
}
|
|
@@ -100,7 +100,7 @@ function registerButton(loader, overrides) {
|
|
|
100
100
|
type: "boolean",
|
|
101
101
|
displayName: "Submits form?",
|
|
102
102
|
defaultValueHint: false,
|
|
103
|
-
hidden: (
|
|
103
|
+
hidden: (props) => Boolean(props.resetsForm),
|
|
104
104
|
description: "Whether clicking this button should submit the enclosing form.",
|
|
105
105
|
advanced: true
|
|
106
106
|
},
|
|
@@ -108,7 +108,7 @@ function registerButton(loader, overrides) {
|
|
|
108
108
|
type: "boolean",
|
|
109
109
|
displayName: "Resets form?",
|
|
110
110
|
defaultValueHint: false,
|
|
111
|
-
hidden: (
|
|
111
|
+
hidden: (props) => Boolean(props.submitsForm),
|
|
112
112
|
description: "Whether clicking this button should reset the enclosing form.",
|
|
113
113
|
advanced: true
|
|
114
114
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerButton.cjs.js","sources":["../src/registerButton.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ButtonProps } from \"react-aria-components\";\nimport { Button } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport {\n CodeComponentMetaOverrides,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst BUTTON_VARIANTS = [\n \"hovered\" as const,\n \"pressed\" as const,\n \"focused\" as const,\n \"focusVisible\" as const,\n \"disabled\" as const,\n];\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(BUTTON_VARIANTS);\n\ninterface BaseButtonProps\n extends ButtonProps,\n WithVariants<typeof BUTTON_VARIANTS> {\n children: React.ReactNode;\n resetsForm?: boolean;\n submitsForm?: boolean;\n}\n\nexport function BaseButton(props: BaseButtonProps) {\n const { submitsForm, resetsForm, children, plasmicUpdateVariant, ...rest } =\n props;\n\n const type = submitsForm ? \"submit\" : resetsForm ? \"reset\" : \"button\";\n\n return (\n <Button type={type} {...rest}>\n {({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) =>\n withObservedValues(\n children,\n {\n hovered: isHovered,\n pressed: isPressed,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: isDisabled,\n },\n plasmicUpdateVariant\n )\n }\n </Button>\n );\n}\n\nexport const BUTTON_COMPONENT_NAME = makeComponentName(\"button\");\n\nexport function registerButton(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseButton>\n) {\n registerComponentHelper(\n loader,\n BaseButton,\n {\n name: BUTTON_COMPONENT_NAME,\n displayName: \"Aria Button\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerButton\",\n importName: \"BaseButton\",\n variants,\n defaultStyles: {\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n padding: \"2px 10px\",\n cursor: \"pointer\",\n },\n props: {\n ...getCommonProps<BaseButtonProps>(\"button\", [\n \"autoFocus\",\n \"isDisabled\",\n \"aria-label\",\n ]),\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: {\n type: \"text\",\n value: \"Button\",\n },\n },\n submitsForm: {\n type: \"boolean\",\n displayName: \"Submits form?\",\n defaultValueHint: false,\n hidden: (
|
|
1
|
+
{"version":3,"file":"registerButton.cjs.js","sources":["../src/registerButton.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ButtonProps } from \"react-aria-components\";\nimport { Button } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport {\n CodeComponentMetaOverrides,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst BUTTON_VARIANTS = [\n \"hovered\" as const,\n \"pressed\" as const,\n \"focused\" as const,\n \"focusVisible\" as const,\n \"disabled\" as const,\n];\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(BUTTON_VARIANTS);\n\ninterface BaseButtonProps\n extends ButtonProps,\n WithVariants<typeof BUTTON_VARIANTS> {\n children: React.ReactNode;\n resetsForm?: boolean;\n submitsForm?: boolean;\n}\n\nexport function BaseButton(props: BaseButtonProps) {\n const { submitsForm, resetsForm, children, plasmicUpdateVariant, ...rest } =\n props;\n\n const type = submitsForm ? \"submit\" : resetsForm ? \"reset\" : \"button\";\n\n return (\n <Button type={type} {...rest}>\n {({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) =>\n withObservedValues(\n children,\n {\n hovered: isHovered,\n pressed: isPressed,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: isDisabled,\n },\n plasmicUpdateVariant\n )\n }\n </Button>\n );\n}\n\nexport const BUTTON_COMPONENT_NAME = makeComponentName(\"button\");\n\nexport function registerButton(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseButton>\n) {\n registerComponentHelper(\n loader,\n BaseButton,\n {\n name: BUTTON_COMPONENT_NAME,\n displayName: \"Aria Button\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerButton\",\n importName: \"BaseButton\",\n variants,\n defaultStyles: {\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n padding: \"2px 10px\",\n cursor: \"pointer\",\n },\n props: {\n ...getCommonProps<BaseButtonProps>(\"button\", [\n \"autoFocus\",\n \"isDisabled\",\n \"aria-label\",\n ]),\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: {\n type: \"text\",\n value: \"Button\",\n },\n },\n submitsForm: {\n type: \"boolean\",\n displayName: \"Submits form?\",\n defaultValueHint: false,\n hidden: (props) => Boolean(props.resetsForm),\n description:\n \"Whether clicking this button should submit the enclosing form.\",\n advanced: true,\n },\n resetsForm: {\n type: \"boolean\",\n displayName: \"Resets form?\",\n defaultValueHint: false,\n hidden: (props) => Boolean(props.submitsForm),\n description:\n \"Whether clicking this button should reset the enclosing form.\",\n advanced: true,\n },\n onPress: {\n type: \"eventHandler\",\n argTypes: [{ name: \"event\", type: \"object\" }],\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["pickAriaComponentVariants","React","Button","makeComponentName","registerComponentHelper","getCommonProps"],"mappings":"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"}
|
|
@@ -94,7 +94,7 @@ function registerButton(loader, overrides) {
|
|
|
94
94
|
type: "boolean",
|
|
95
95
|
displayName: "Submits form?",
|
|
96
96
|
defaultValueHint: false,
|
|
97
|
-
hidden: (
|
|
97
|
+
hidden: (props) => Boolean(props.resetsForm),
|
|
98
98
|
description: "Whether clicking this button should submit the enclosing form.",
|
|
99
99
|
advanced: true
|
|
100
100
|
},
|
|
@@ -102,7 +102,7 @@ function registerButton(loader, overrides) {
|
|
|
102
102
|
type: "boolean",
|
|
103
103
|
displayName: "Resets form?",
|
|
104
104
|
defaultValueHint: false,
|
|
105
|
-
hidden: (
|
|
105
|
+
hidden: (props) => Boolean(props.submitsForm),
|
|
106
106
|
description: "Whether clicking this button should reset the enclosing form.",
|
|
107
107
|
advanced: true
|
|
108
108
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerButton.esm.js","sources":["../src/registerButton.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ButtonProps } from \"react-aria-components\";\nimport { Button } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport {\n CodeComponentMetaOverrides,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst BUTTON_VARIANTS = [\n \"hovered\" as const,\n \"pressed\" as const,\n \"focused\" as const,\n \"focusVisible\" as const,\n \"disabled\" as const,\n];\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(BUTTON_VARIANTS);\n\ninterface BaseButtonProps\n extends ButtonProps,\n WithVariants<typeof BUTTON_VARIANTS> {\n children: React.ReactNode;\n resetsForm?: boolean;\n submitsForm?: boolean;\n}\n\nexport function BaseButton(props: BaseButtonProps) {\n const { submitsForm, resetsForm, children, plasmicUpdateVariant, ...rest } =\n props;\n\n const type = submitsForm ? \"submit\" : resetsForm ? \"reset\" : \"button\";\n\n return (\n <Button type={type} {...rest}>\n {({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) =>\n withObservedValues(\n children,\n {\n hovered: isHovered,\n pressed: isPressed,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: isDisabled,\n },\n plasmicUpdateVariant\n )\n }\n </Button>\n );\n}\n\nexport const BUTTON_COMPONENT_NAME = makeComponentName(\"button\");\n\nexport function registerButton(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseButton>\n) {\n registerComponentHelper(\n loader,\n BaseButton,\n {\n name: BUTTON_COMPONENT_NAME,\n displayName: \"Aria Button\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerButton\",\n importName: \"BaseButton\",\n variants,\n defaultStyles: {\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n padding: \"2px 10px\",\n cursor: \"pointer\",\n },\n props: {\n ...getCommonProps<BaseButtonProps>(\"button\", [\n \"autoFocus\",\n \"isDisabled\",\n \"aria-label\",\n ]),\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: {\n type: \"text\",\n value: \"Button\",\n },\n },\n submitsForm: {\n type: \"boolean\",\n displayName: \"Submits form?\",\n defaultValueHint: false,\n hidden: (
|
|
1
|
+
{"version":3,"file":"registerButton.esm.js","sources":["../src/registerButton.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ButtonProps } from \"react-aria-components\";\nimport { Button } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport {\n CodeComponentMetaOverrides,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst BUTTON_VARIANTS = [\n \"hovered\" as const,\n \"pressed\" as const,\n \"focused\" as const,\n \"focusVisible\" as const,\n \"disabled\" as const,\n];\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(BUTTON_VARIANTS);\n\ninterface BaseButtonProps\n extends ButtonProps,\n WithVariants<typeof BUTTON_VARIANTS> {\n children: React.ReactNode;\n resetsForm?: boolean;\n submitsForm?: boolean;\n}\n\nexport function BaseButton(props: BaseButtonProps) {\n const { submitsForm, resetsForm, children, plasmicUpdateVariant, ...rest } =\n props;\n\n const type = submitsForm ? \"submit\" : resetsForm ? \"reset\" : \"button\";\n\n return (\n <Button type={type} {...rest}>\n {({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) =>\n withObservedValues(\n children,\n {\n hovered: isHovered,\n pressed: isPressed,\n focused: isFocused,\n focusVisible: isFocusVisible,\n disabled: isDisabled,\n },\n plasmicUpdateVariant\n )\n }\n </Button>\n );\n}\n\nexport const BUTTON_COMPONENT_NAME = makeComponentName(\"button\");\n\nexport function registerButton(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseButton>\n) {\n registerComponentHelper(\n loader,\n BaseButton,\n {\n name: BUTTON_COMPONENT_NAME,\n displayName: \"Aria Button\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerButton\",\n importName: \"BaseButton\",\n variants,\n defaultStyles: {\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n padding: \"2px 10px\",\n cursor: \"pointer\",\n },\n props: {\n ...getCommonProps<BaseButtonProps>(\"button\", [\n \"autoFocus\",\n \"isDisabled\",\n \"aria-label\",\n ]),\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: {\n type: \"text\",\n value: \"Button\",\n },\n },\n submitsForm: {\n type: \"boolean\",\n displayName: \"Submits form?\",\n defaultValueHint: false,\n hidden: (props) => Boolean(props.resetsForm),\n description:\n \"Whether clicking this button should submit the enclosing form.\",\n advanced: true,\n },\n resetsForm: {\n type: \"boolean\",\n displayName: \"Resets form?\",\n defaultValueHint: false,\n hidden: (props) => Boolean(props.submitsForm),\n description:\n \"Whether clicking this button should reset the enclosing form.\",\n advanced: true,\n },\n onPress: {\n type: \"eventHandler\",\n argTypes: [{ name: \"event\", type: \"object\" }],\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -98,6 +98,13 @@ function registerComboBox(loader) {
|
|
|
98
98
|
// React Aria ComboBox do not support multiple comboBoxions yet
|
|
99
99
|
multiSelect: false
|
|
100
100
|
},
|
|
101
|
+
disabledKeys: {
|
|
102
|
+
type: "choice",
|
|
103
|
+
description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
|
|
104
|
+
options: (_props, ctx) => (ctx == null ? void 0 : ctx.itemIds) ? Array.from(ctx.itemIds) : [],
|
|
105
|
+
multiSelect: true,
|
|
106
|
+
advanced: true
|
|
107
|
+
},
|
|
101
108
|
isOpen: {
|
|
102
109
|
type: "boolean",
|
|
103
110
|
defaultValue: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerComboBox.cjs.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { ComboBox, ComboBoxProps } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport { PlasmicListBoxContext, PlasmicPopoverContext } from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { INPUT_COMPONENT_NAME } from \"./registerInput\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nexport interface BaseComboboxControlContextData {\n itemIds: string[];\n}\n\nexport interface BaseComboboxProps\n extends ComboBoxProps<{}>,\n HasControlContextData<BaseComboboxControlContextData> {\n placeholder?: string;\n children?: React.ReactNode;\n isOpen?: boolean;\n}\n\nexport function BaseComboBox(props: BaseComboboxProps) {\n const { children, setControlContextData, isOpen, ...rest } = props;\n\n const idManager = useMemo(() => new ListBoxItemIdManager(), []);\n\n useEffect(() => {\n idManager.subscribe((ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n });\n }, []);\n\n return (\n <ComboBox {...rest}>\n <PlasmicPopoverContext.Provider value={{ isOpen }}>\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {children}\n </PlasmicListBoxContext.Provider>\n </PlasmicPopoverContext.Provider>\n </ComboBox>\n );\n}\n\nexport function registerComboBox(loader?: Registerable) {\n registerComponentHelper(loader, BaseComboBox, {\n name: COMBOBOX_NAME,\n displayName: \"Aria ComboBox\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerComboBox\",\n importName: \"BaseComboBox\",\n props: {\n ...getCommonProps<BaseComboboxProps>(\"ComboBox\", [\n \"name\",\n \"aria-label\",\n \"placeholder\",\n \"isDisabled\",\n ]),\n selectedKey: {\n type: \"choice\",\n description: \"The selected keys of the listbox\",\n editOnly: true,\n uncontrolledProp: \"defaultSelectedKey\",\n displayName: \"Initial selected key\",\n options: (\n _props: BaseComboboxProps,\n ctx: BaseComboboxControlContextData | null\n ) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n // React Aria ComboBox do not support multiple comboBoxions yet\n multiSelect: false,\n },\n isOpen: {\n type: \"boolean\",\n defaultValue: false,\n // It doesn't make sense to make isOpen prop editable (it's controlled by user interaction and always closed by default), so we keep this prop hidden. We have listed the prop here in the meta only so we can expose a writeable state for it.\n hidden: () => true,\n },\n onSelectionChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"selectedKey\", type: \"string\" }],\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"vbox\",\n styles: {\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n width: \"300px\",\n padding: 0,\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"hbox\",\n children: [\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n },\n {\n type: \"component\",\n name: BUTTON_COMPONENT_NAME,\n props: {\n children: {\n type: \"img\",\n // TODO: Replace with the image of an arrow pointing up, like: https://icon-sets.iconify.design/mdi/triangle/\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n width: \"15px\",\n transform: \"rotate(180deg)\",\n },\n },\n },\n },\n ],\n },\n {\n type: \"component\",\n name: POPOVER_COMPONENT_NAME,\n styles: {\n backgroundColor: \"white\",\n padding: \"10px\",\n overflow: \"scroll\",\n },\n props: {\n offset: 0,\n children: [\n {\n type: \"component\",\n name: LIST_BOX_COMPONENT_NAME,\n props: {\n selectionMode: \"single\",\n },\n styles: {\n borderWidth: 0,\n width: \"stretch\",\n },\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n states: {\n selectedKey: {\n type: \"writable\",\n valueProp: \"selectedKey\",\n onChangeProp: \"onSelectionChange\",\n variableType: \"text\",\n },\n isOpen: {\n type: \"writable\",\n valueProp: \"isOpen\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n });\n}\n"],"names":["makeComponentName","useMemo","ListBoxItemIdManager","useEffect","React","ComboBox","PlasmicPopoverContext","PlasmicListBoxContext","registerComponentHelper","getCommonProps","LABEL_COMPONENT_NAME","INPUT_COMPONENT_NAME","BUTTON_COMPONENT_NAME","POPOVER_COMPONENT_NAME","LIST_BOX_COMPONENT_NAME"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"registerComboBox.cjs.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { ComboBox, ComboBoxProps } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport { PlasmicListBoxContext, PlasmicPopoverContext } from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { INPUT_COMPONENT_NAME } from \"./registerInput\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nexport interface BaseComboboxControlContextData {\n itemIds: string[];\n}\n\nexport interface BaseComboboxProps\n extends ComboBoxProps<{}>,\n HasControlContextData<BaseComboboxControlContextData> {\n placeholder?: string;\n children?: React.ReactNode;\n isOpen?: boolean;\n}\n\nexport function BaseComboBox(props: BaseComboboxProps) {\n const { children, setControlContextData, isOpen, ...rest } = props;\n\n const idManager = useMemo(() => new ListBoxItemIdManager(), []);\n\n useEffect(() => {\n idManager.subscribe((ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n });\n }, []);\n\n return (\n <ComboBox {...rest}>\n <PlasmicPopoverContext.Provider value={{ isOpen }}>\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {children}\n </PlasmicListBoxContext.Provider>\n </PlasmicPopoverContext.Provider>\n </ComboBox>\n );\n}\n\nexport function registerComboBox(loader?: Registerable) {\n registerComponentHelper(loader, BaseComboBox, {\n name: COMBOBOX_NAME,\n displayName: \"Aria ComboBox\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerComboBox\",\n importName: \"BaseComboBox\",\n props: {\n ...getCommonProps<BaseComboboxProps>(\"ComboBox\", [\n \"name\",\n \"aria-label\",\n \"placeholder\",\n \"isDisabled\",\n ]),\n selectedKey: {\n type: \"choice\",\n description: \"The selected keys of the listbox\",\n editOnly: true,\n uncontrolledProp: \"defaultSelectedKey\",\n displayName: \"Initial selected key\",\n options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n // React Aria ComboBox do not support multiple comboBoxions yet\n multiSelect: false,\n },\n disabledKeys: {\n type: \"choice\",\n description:\n \"The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.\",\n options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n multiSelect: true,\n advanced: true,\n },\n isOpen: {\n type: \"boolean\",\n defaultValue: false,\n // It doesn't make sense to make isOpen prop editable (it's controlled by user interaction and always closed by default), so we keep this prop hidden. We have listed the prop here in the meta only so we can expose a writeable state for it.\n hidden: () => true,\n },\n onSelectionChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"selectedKey\", type: \"string\" }],\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"vbox\",\n styles: {\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n width: \"300px\",\n padding: 0,\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"hbox\",\n children: [\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n },\n {\n type: \"component\",\n name: BUTTON_COMPONENT_NAME,\n props: {\n children: {\n type: \"img\",\n // TODO: Replace with the image of an arrow pointing up, like: https://icon-sets.iconify.design/mdi/triangle/\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n width: \"15px\",\n transform: \"rotate(180deg)\",\n },\n },\n },\n },\n ],\n },\n {\n type: \"component\",\n name: POPOVER_COMPONENT_NAME,\n styles: {\n backgroundColor: \"white\",\n padding: \"10px\",\n overflow: \"scroll\",\n },\n props: {\n offset: 0,\n children: [\n {\n type: \"component\",\n name: LIST_BOX_COMPONENT_NAME,\n props: {\n selectionMode: \"single\",\n },\n styles: {\n borderWidth: 0,\n width: \"stretch\",\n },\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n states: {\n selectedKey: {\n type: \"writable\",\n valueProp: \"selectedKey\",\n onChangeProp: \"onSelectionChange\",\n variableType: \"text\",\n },\n isOpen: {\n type: \"writable\",\n valueProp: \"isOpen\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n });\n}\n"],"names":["makeComponentName","useMemo","ListBoxItemIdManager","useEffect","React","ComboBox","PlasmicPopoverContext","PlasmicListBoxContext","registerComponentHelper","getCommonProps","LABEL_COMPONENT_NAME","INPUT_COMPONENT_NAME","BUTTON_COMPONENT_NAME","POPOVER_COMPONENT_NAME","LIST_BOX_COMPONENT_NAME"],"mappings":"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"}
|
|
@@ -92,6 +92,13 @@ function registerComboBox(loader) {
|
|
|
92
92
|
// React Aria ComboBox do not support multiple comboBoxions yet
|
|
93
93
|
multiSelect: false
|
|
94
94
|
},
|
|
95
|
+
disabledKeys: {
|
|
96
|
+
type: "choice",
|
|
97
|
+
description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
|
|
98
|
+
options: (_props, ctx) => (ctx == null ? void 0 : ctx.itemIds) ? Array.from(ctx.itemIds) : [],
|
|
99
|
+
multiSelect: true,
|
|
100
|
+
advanced: true
|
|
101
|
+
},
|
|
95
102
|
isOpen: {
|
|
96
103
|
type: "boolean",
|
|
97
104
|
defaultValue: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerComboBox.esm.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { ComboBox, ComboBoxProps } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport { PlasmicListBoxContext, PlasmicPopoverContext } from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { INPUT_COMPONENT_NAME } from \"./registerInput\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nexport interface BaseComboboxControlContextData {\n itemIds: string[];\n}\n\nexport interface BaseComboboxProps\n extends ComboBoxProps<{}>,\n HasControlContextData<BaseComboboxControlContextData> {\n placeholder?: string;\n children?: React.ReactNode;\n isOpen?: boolean;\n}\n\nexport function BaseComboBox(props: BaseComboboxProps) {\n const { children, setControlContextData, isOpen, ...rest } = props;\n\n const idManager = useMemo(() => new ListBoxItemIdManager(), []);\n\n useEffect(() => {\n idManager.subscribe((ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n });\n }, []);\n\n return (\n <ComboBox {...rest}>\n <PlasmicPopoverContext.Provider value={{ isOpen }}>\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {children}\n </PlasmicListBoxContext.Provider>\n </PlasmicPopoverContext.Provider>\n </ComboBox>\n );\n}\n\nexport function registerComboBox(loader?: Registerable) {\n registerComponentHelper(loader, BaseComboBox, {\n name: COMBOBOX_NAME,\n displayName: \"Aria ComboBox\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerComboBox\",\n importName: \"BaseComboBox\",\n props: {\n ...getCommonProps<BaseComboboxProps>(\"ComboBox\", [\n \"name\",\n \"aria-label\",\n \"placeholder\",\n \"isDisabled\",\n ]),\n selectedKey: {\n type: \"choice\",\n description: \"The selected keys of the listbox\",\n editOnly: true,\n uncontrolledProp: \"defaultSelectedKey\",\n displayName: \"Initial selected key\",\n options: (\n _props: BaseComboboxProps,\n ctx: BaseComboboxControlContextData | null\n ) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n // React Aria ComboBox do not support multiple comboBoxions yet\n multiSelect: false,\n },\n isOpen: {\n type: \"boolean\",\n defaultValue: false,\n // It doesn't make sense to make isOpen prop editable (it's controlled by user interaction and always closed by default), so we keep this prop hidden. We have listed the prop here in the meta only so we can expose a writeable state for it.\n hidden: () => true,\n },\n onSelectionChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"selectedKey\", type: \"string\" }],\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"vbox\",\n styles: {\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n width: \"300px\",\n padding: 0,\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"hbox\",\n children: [\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n },\n {\n type: \"component\",\n name: BUTTON_COMPONENT_NAME,\n props: {\n children: {\n type: \"img\",\n // TODO: Replace with the image of an arrow pointing up, like: https://icon-sets.iconify.design/mdi/triangle/\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n width: \"15px\",\n transform: \"rotate(180deg)\",\n },\n },\n },\n },\n ],\n },\n {\n type: \"component\",\n name: POPOVER_COMPONENT_NAME,\n styles: {\n backgroundColor: \"white\",\n padding: \"10px\",\n overflow: \"scroll\",\n },\n props: {\n offset: 0,\n children: [\n {\n type: \"component\",\n name: LIST_BOX_COMPONENT_NAME,\n props: {\n selectionMode: \"single\",\n },\n styles: {\n borderWidth: 0,\n width: \"stretch\",\n },\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n states: {\n selectedKey: {\n type: \"writable\",\n valueProp: \"selectedKey\",\n onChangeProp: \"onSelectionChange\",\n variableType: \"text\",\n },\n isOpen: {\n type: \"writable\",\n valueProp: \"isOpen\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n });\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"registerComboBox.esm.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { ComboBox, ComboBoxProps } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport { PlasmicListBoxContext, PlasmicPopoverContext } from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { INPUT_COMPONENT_NAME } from \"./registerInput\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nexport interface BaseComboboxControlContextData {\n itemIds: string[];\n}\n\nexport interface BaseComboboxProps\n extends ComboBoxProps<{}>,\n HasControlContextData<BaseComboboxControlContextData> {\n placeholder?: string;\n children?: React.ReactNode;\n isOpen?: boolean;\n}\n\nexport function BaseComboBox(props: BaseComboboxProps) {\n const { children, setControlContextData, isOpen, ...rest } = props;\n\n const idManager = useMemo(() => new ListBoxItemIdManager(), []);\n\n useEffect(() => {\n idManager.subscribe((ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n });\n }, []);\n\n return (\n <ComboBox {...rest}>\n <PlasmicPopoverContext.Provider value={{ isOpen }}>\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {children}\n </PlasmicListBoxContext.Provider>\n </PlasmicPopoverContext.Provider>\n </ComboBox>\n );\n}\n\nexport function registerComboBox(loader?: Registerable) {\n registerComponentHelper(loader, BaseComboBox, {\n name: COMBOBOX_NAME,\n displayName: \"Aria ComboBox\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerComboBox\",\n importName: \"BaseComboBox\",\n props: {\n ...getCommonProps<BaseComboboxProps>(\"ComboBox\", [\n \"name\",\n \"aria-label\",\n \"placeholder\",\n \"isDisabled\",\n ]),\n selectedKey: {\n type: \"choice\",\n description: \"The selected keys of the listbox\",\n editOnly: true,\n uncontrolledProp: \"defaultSelectedKey\",\n displayName: \"Initial selected key\",\n options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n // React Aria ComboBox do not support multiple comboBoxions yet\n multiSelect: false,\n },\n disabledKeys: {\n type: \"choice\",\n description:\n \"The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.\",\n options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n multiSelect: true,\n advanced: true,\n },\n isOpen: {\n type: \"boolean\",\n defaultValue: false,\n // It doesn't make sense to make isOpen prop editable (it's controlled by user interaction and always closed by default), so we keep this prop hidden. We have listed the prop here in the meta only so we can expose a writeable state for it.\n hidden: () => true,\n },\n onSelectionChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"selectedKey\", type: \"string\" }],\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"vbox\",\n styles: {\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n width: \"300px\",\n padding: 0,\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"hbox\",\n children: [\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n },\n {\n type: \"component\",\n name: BUTTON_COMPONENT_NAME,\n props: {\n children: {\n type: \"img\",\n // TODO: Replace with the image of an arrow pointing up, like: https://icon-sets.iconify.design/mdi/triangle/\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n width: \"15px\",\n transform: \"rotate(180deg)\",\n },\n },\n },\n },\n ],\n },\n {\n type: \"component\",\n name: POPOVER_COMPONENT_NAME,\n styles: {\n backgroundColor: \"white\",\n padding: \"10px\",\n overflow: \"scroll\",\n },\n props: {\n offset: 0,\n children: [\n {\n type: \"component\",\n name: LIST_BOX_COMPONENT_NAME,\n props: {\n selectionMode: \"single\",\n },\n styles: {\n borderWidth: 0,\n width: \"stretch\",\n },\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n states: {\n selectedKey: {\n type: \"writable\",\n valueProp: \"selectedKey\",\n onChangeProp: \"onSelectionChange\",\n variableType: \"text\",\n },\n isOpen: {\n type: \"writable\",\n valueProp: \"isOpen\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n });\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -143,7 +143,7 @@ function registerPopover(loader, overrides) {
|
|
|
143
143
|
shouldFlip: {
|
|
144
144
|
type: "boolean",
|
|
145
145
|
description: "Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.",
|
|
146
|
-
defaultValueHint: (
|
|
146
|
+
defaultValueHint: (_props, ctx) => {
|
|
147
147
|
var _a;
|
|
148
148
|
return (_a = ctx == null ? void 0 : ctx.defaultShouldFlip) != null ? _a : true;
|
|
149
149
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerPopover.cjs.js","sources":["../src/registerPopover.tsx"],"sourcesContent":["import { PlasmicElement, usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport React from \"react\";\nimport { Popover, PopoverContext, SelectContext } from \"react-aria-components\";\nimport { PlasmicPopoverContext } from \"./contexts\";\nimport {\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface PopoverControlContextData {\n defaultShouldFlip?: boolean;\n}\n\nexport interface BasePopoverProps\n extends React.ComponentProps<typeof Popover>,\n HasControlContextData<PopoverControlContextData> {\n className?: string;\n resetClassName?: string;\n}\n\nexport function BasePopover(props: BasePopoverProps) {\n const { resetClassName, setControlContextData, ...restProps } = props;\n const isStandalone = !React.useContext(PopoverContext);\n const context = React.useContext(PlasmicPopoverContext);\n const isInsideSelect = !!React.useContext(SelectContext);\n const triggerRef = React.useRef<any>(null);\n const isEditMode = !!usePlasmicCanvasContext();\n\n // Select/Combobox popovers should not flip by default\n const defaultShouldFlip = isInsideSelect ? false : true;\n\n const mergedProps = mergeProps(\n { shouldFlip: defaultShouldFlip },\n context,\n /**\n * isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. *\n *\n * Setting isNonModal to true in edit mode (canvas) means that the popover will not prevent the user from interacting with the canvas while the popover is open.\n */\n isEditMode ? { isNonModal: true } : null,\n restProps,\n { className: `${resetClassName}` },\n // Override some props if the popover is standalone\n isStandalone\n ? {\n triggerRef,\n isNonModal: true,\n isOpen: true,\n }\n : null\n );\n\n setControlContextData?.({\n defaultShouldFlip,\n });\n\n return (\n <>\n {isStandalone && <div ref={triggerRef} />}\n <Popover {...mergedProps} />\n </>\n );\n}\n\nexport const POPOVER_COMPONENT_NAME = makeComponentName(\"popover\");\nexport const POPOVER_ARROW_IMG: PlasmicElement = {\n type: \"img\",\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n position: \"absolute\",\n top: \"-14px\",\n // center the arrow horizontally on the popover\n left: \"50%\",\n transform: \"translateX(-50%)\",\n width: \"15px\",\n },\n};\n\nexport function registerPopover(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BasePopover>\n) {\n registerComponentHelper(\n loader,\n BasePopover,\n {\n name: POPOVER_COMPONENT_NAME,\n displayName: \"Aria Popover\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerPopover\",\n importName: \"BasePopover\",\n defaultStyles: {\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n padding: \"20px\",\n width: \"300px\",\n backgroundColor: \"#FDE3C3\",\n },\n props: {\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: [\n POPOVER_ARROW_IMG,\n {\n type: \"vbox\",\n styles: {\n width: \"stretch\",\n padding: 0,\n rowGap: \"10px\",\n },\n children: [\n {\n type: \"text\",\n value: \"This is a Popover!\",\n },\n {\n type: \"text\",\n value: \"You can put anything you can imagine here!\",\n styles: {\n fontWeight: 500,\n },\n },\n {\n type: \"text\",\n value:\n \"Use it in a `Aria Dialog Trigger` component to trigger it on a button click!\",\n },\n ],\n },\n ],\n },\n offset: {\n type: \"number\",\n displayName: \"Offset\",\n description:\n \"Additional offset applied vertically between the popover and its trigger\",\n defaultValueHint: 8,\n },\n shouldFlip: {\n type: \"boolean\",\n description:\n \"Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.\",\n defaultValueHint: (
|
|
1
|
+
{"version":3,"file":"registerPopover.cjs.js","sources":["../src/registerPopover.tsx"],"sourcesContent":["import { PlasmicElement, usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport React from \"react\";\nimport { Popover, PopoverContext, SelectContext } from \"react-aria-components\";\nimport { PlasmicPopoverContext } from \"./contexts\";\nimport {\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface PopoverControlContextData {\n defaultShouldFlip?: boolean;\n}\n\nexport interface BasePopoverProps\n extends React.ComponentProps<typeof Popover>,\n HasControlContextData<PopoverControlContextData> {\n className?: string;\n resetClassName?: string;\n}\n\nexport function BasePopover(props: BasePopoverProps) {\n const { resetClassName, setControlContextData, ...restProps } = props;\n const isStandalone = !React.useContext(PopoverContext);\n const context = React.useContext(PlasmicPopoverContext);\n const isInsideSelect = !!React.useContext(SelectContext);\n const triggerRef = React.useRef<any>(null);\n const isEditMode = !!usePlasmicCanvasContext();\n\n // Select/Combobox popovers should not flip by default\n const defaultShouldFlip = isInsideSelect ? false : true;\n\n const mergedProps = mergeProps(\n { shouldFlip: defaultShouldFlip },\n context,\n /**\n * isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. *\n *\n * Setting isNonModal to true in edit mode (canvas) means that the popover will not prevent the user from interacting with the canvas while the popover is open.\n */\n isEditMode ? { isNonModal: true } : null,\n restProps,\n { className: `${resetClassName}` },\n // Override some props if the popover is standalone\n isStandalone\n ? {\n triggerRef,\n isNonModal: true,\n isOpen: true,\n }\n : null\n );\n\n setControlContextData?.({\n defaultShouldFlip,\n });\n\n return (\n <>\n {isStandalone && <div ref={triggerRef} />}\n <Popover {...mergedProps} />\n </>\n );\n}\n\nexport const POPOVER_COMPONENT_NAME = makeComponentName(\"popover\");\nexport const POPOVER_ARROW_IMG: PlasmicElement = {\n type: \"img\",\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n position: \"absolute\",\n top: \"-14px\",\n // center the arrow horizontally on the popover\n left: \"50%\",\n transform: \"translateX(-50%)\",\n width: \"15px\",\n },\n};\n\nexport function registerPopover(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BasePopover>\n) {\n registerComponentHelper(\n loader,\n BasePopover,\n {\n name: POPOVER_COMPONENT_NAME,\n displayName: \"Aria Popover\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerPopover\",\n importName: \"BasePopover\",\n defaultStyles: {\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n padding: \"20px\",\n width: \"300px\",\n backgroundColor: \"#FDE3C3\",\n },\n props: {\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: [\n POPOVER_ARROW_IMG,\n {\n type: \"vbox\",\n styles: {\n width: \"stretch\",\n padding: 0,\n rowGap: \"10px\",\n },\n children: [\n {\n type: \"text\",\n value: \"This is a Popover!\",\n },\n {\n type: \"text\",\n value: \"You can put anything you can imagine here!\",\n styles: {\n fontWeight: 500,\n },\n },\n {\n type: \"text\",\n value:\n \"Use it in a `Aria Dialog Trigger` component to trigger it on a button click!\",\n },\n ],\n },\n ],\n },\n offset: {\n type: \"number\",\n displayName: \"Offset\",\n description:\n \"Additional offset applied vertically between the popover and its trigger\",\n defaultValueHint: 8,\n },\n shouldFlip: {\n type: \"boolean\",\n description:\n \"Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.\",\n defaultValueHint: (_props, ctx) => ctx?.defaultShouldFlip ?? true,\n },\n placement: {\n type: \"choice\",\n description:\n \"Default placement of the popover relative to the trigger, if there is enough space\",\n defaultValueHint: \"bottom\",\n options: [\n \"bottom\",\n \"bottom left\",\n \"bottom right\",\n \"top\",\n \"top left\",\n \"top right\",\n ],\n },\n resetClassName: {\n type: \"themeResetClass\",\n },\n },\n styleSections: true,\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["React","PopoverContext","PlasmicPopoverContext","SelectContext","usePlasmicCanvasContext","mergeProps","Popover","makeComponentName","registerComponentHelper"],"mappings":"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"}
|
|
@@ -137,7 +137,7 @@ function registerPopover(loader, overrides) {
|
|
|
137
137
|
shouldFlip: {
|
|
138
138
|
type: "boolean",
|
|
139
139
|
description: "Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.",
|
|
140
|
-
defaultValueHint: (
|
|
140
|
+
defaultValueHint: (_props, ctx) => {
|
|
141
141
|
var _a;
|
|
142
142
|
return (_a = ctx == null ? void 0 : ctx.defaultShouldFlip) != null ? _a : true;
|
|
143
143
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerPopover.esm.js","sources":["../src/registerPopover.tsx"],"sourcesContent":["import { PlasmicElement, usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport React from \"react\";\nimport { Popover, PopoverContext, SelectContext } from \"react-aria-components\";\nimport { PlasmicPopoverContext } from \"./contexts\";\nimport {\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface PopoverControlContextData {\n defaultShouldFlip?: boolean;\n}\n\nexport interface BasePopoverProps\n extends React.ComponentProps<typeof Popover>,\n HasControlContextData<PopoverControlContextData> {\n className?: string;\n resetClassName?: string;\n}\n\nexport function BasePopover(props: BasePopoverProps) {\n const { resetClassName, setControlContextData, ...restProps } = props;\n const isStandalone = !React.useContext(PopoverContext);\n const context = React.useContext(PlasmicPopoverContext);\n const isInsideSelect = !!React.useContext(SelectContext);\n const triggerRef = React.useRef<any>(null);\n const isEditMode = !!usePlasmicCanvasContext();\n\n // Select/Combobox popovers should not flip by default\n const defaultShouldFlip = isInsideSelect ? false : true;\n\n const mergedProps = mergeProps(\n { shouldFlip: defaultShouldFlip },\n context,\n /**\n * isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. *\n *\n * Setting isNonModal to true in edit mode (canvas) means that the popover will not prevent the user from interacting with the canvas while the popover is open.\n */\n isEditMode ? { isNonModal: true } : null,\n restProps,\n { className: `${resetClassName}` },\n // Override some props if the popover is standalone\n isStandalone\n ? {\n triggerRef,\n isNonModal: true,\n isOpen: true,\n }\n : null\n );\n\n setControlContextData?.({\n defaultShouldFlip,\n });\n\n return (\n <>\n {isStandalone && <div ref={triggerRef} />}\n <Popover {...mergedProps} />\n </>\n );\n}\n\nexport const POPOVER_COMPONENT_NAME = makeComponentName(\"popover\");\nexport const POPOVER_ARROW_IMG: PlasmicElement = {\n type: \"img\",\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n position: \"absolute\",\n top: \"-14px\",\n // center the arrow horizontally on the popover\n left: \"50%\",\n transform: \"translateX(-50%)\",\n width: \"15px\",\n },\n};\n\nexport function registerPopover(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BasePopover>\n) {\n registerComponentHelper(\n loader,\n BasePopover,\n {\n name: POPOVER_COMPONENT_NAME,\n displayName: \"Aria Popover\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerPopover\",\n importName: \"BasePopover\",\n defaultStyles: {\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n padding: \"20px\",\n width: \"300px\",\n backgroundColor: \"#FDE3C3\",\n },\n props: {\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: [\n POPOVER_ARROW_IMG,\n {\n type: \"vbox\",\n styles: {\n width: \"stretch\",\n padding: 0,\n rowGap: \"10px\",\n },\n children: [\n {\n type: \"text\",\n value: \"This is a Popover!\",\n },\n {\n type: \"text\",\n value: \"You can put anything you can imagine here!\",\n styles: {\n fontWeight: 500,\n },\n },\n {\n type: \"text\",\n value:\n \"Use it in a `Aria Dialog Trigger` component to trigger it on a button click!\",\n },\n ],\n },\n ],\n },\n offset: {\n type: \"number\",\n displayName: \"Offset\",\n description:\n \"Additional offset applied vertically between the popover and its trigger\",\n defaultValueHint: 8,\n },\n shouldFlip: {\n type: \"boolean\",\n description:\n \"Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.\",\n defaultValueHint: (
|
|
1
|
+
{"version":3,"file":"registerPopover.esm.js","sources":["../src/registerPopover.tsx"],"sourcesContent":["import { PlasmicElement, usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport React from \"react\";\nimport { Popover, PopoverContext, SelectContext } from \"react-aria-components\";\nimport { PlasmicPopoverContext } from \"./contexts\";\nimport {\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface PopoverControlContextData {\n defaultShouldFlip?: boolean;\n}\n\nexport interface BasePopoverProps\n extends React.ComponentProps<typeof Popover>,\n HasControlContextData<PopoverControlContextData> {\n className?: string;\n resetClassName?: string;\n}\n\nexport function BasePopover(props: BasePopoverProps) {\n const { resetClassName, setControlContextData, ...restProps } = props;\n const isStandalone = !React.useContext(PopoverContext);\n const context = React.useContext(PlasmicPopoverContext);\n const isInsideSelect = !!React.useContext(SelectContext);\n const triggerRef = React.useRef<any>(null);\n const isEditMode = !!usePlasmicCanvasContext();\n\n // Select/Combobox popovers should not flip by default\n const defaultShouldFlip = isInsideSelect ? false : true;\n\n const mergedProps = mergeProps(\n { shouldFlip: defaultShouldFlip },\n context,\n /**\n * isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. *\n *\n * Setting isNonModal to true in edit mode (canvas) means that the popover will not prevent the user from interacting with the canvas while the popover is open.\n */\n isEditMode ? { isNonModal: true } : null,\n restProps,\n { className: `${resetClassName}` },\n // Override some props if the popover is standalone\n isStandalone\n ? {\n triggerRef,\n isNonModal: true,\n isOpen: true,\n }\n : null\n );\n\n setControlContextData?.({\n defaultShouldFlip,\n });\n\n return (\n <>\n {isStandalone && <div ref={triggerRef} />}\n <Popover {...mergedProps} />\n </>\n );\n}\n\nexport const POPOVER_COMPONENT_NAME = makeComponentName(\"popover\");\nexport const POPOVER_ARROW_IMG: PlasmicElement = {\n type: \"img\",\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n position: \"absolute\",\n top: \"-14px\",\n // center the arrow horizontally on the popover\n left: \"50%\",\n transform: \"translateX(-50%)\",\n width: \"15px\",\n },\n};\n\nexport function registerPopover(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BasePopover>\n) {\n registerComponentHelper(\n loader,\n BasePopover,\n {\n name: POPOVER_COMPONENT_NAME,\n displayName: \"Aria Popover\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerPopover\",\n importName: \"BasePopover\",\n defaultStyles: {\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n padding: \"20px\",\n width: \"300px\",\n backgroundColor: \"#FDE3C3\",\n },\n props: {\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: [\n POPOVER_ARROW_IMG,\n {\n type: \"vbox\",\n styles: {\n width: \"stretch\",\n padding: 0,\n rowGap: \"10px\",\n },\n children: [\n {\n type: \"text\",\n value: \"This is a Popover!\",\n },\n {\n type: \"text\",\n value: \"You can put anything you can imagine here!\",\n styles: {\n fontWeight: 500,\n },\n },\n {\n type: \"text\",\n value:\n \"Use it in a `Aria Dialog Trigger` component to trigger it on a button click!\",\n },\n ],\n },\n ],\n },\n offset: {\n type: \"number\",\n displayName: \"Offset\",\n description:\n \"Additional offset applied vertically between the popover and its trigger\",\n defaultValueHint: 8,\n },\n shouldFlip: {\n type: \"boolean\",\n description:\n \"Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.\",\n defaultValueHint: (_props, ctx) => ctx?.defaultShouldFlip ?? true,\n },\n placement: {\n type: \"choice\",\n description:\n \"Default placement of the popover relative to the trigger, if there is enough space\",\n defaultValueHint: \"bottom\",\n options: [\n \"bottom\",\n \"bottom left\",\n \"bottom right\",\n \"top\",\n \"top left\",\n \"top right\",\n ],\n },\n resetClassName: {\n type: \"themeResetClass\",\n },\n },\n styleSections: true,\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -57,6 +57,7 @@ function BaseSelect(props) {
|
|
|
57
57
|
className,
|
|
58
58
|
style,
|
|
59
59
|
children,
|
|
60
|
+
disabledKeys,
|
|
60
61
|
name,
|
|
61
62
|
isOpen,
|
|
62
63
|
setControlContextData,
|
|
@@ -83,6 +84,7 @@ function BaseSelect(props) {
|
|
|
83
84
|
className,
|
|
84
85
|
style,
|
|
85
86
|
name,
|
|
87
|
+
disabledKeys,
|
|
86
88
|
"aria-label": ariaLabel,
|
|
87
89
|
isOpen: openProp
|
|
88
90
|
}, utils.extractPlasmicDataProps(props)),
|
|
@@ -117,7 +119,7 @@ function registerSelect(loader) {
|
|
|
117
119
|
value: "Selected value..."
|
|
118
120
|
}
|
|
119
121
|
],
|
|
120
|
-
hidden: (
|
|
122
|
+
hidden: (props) => !props.customize
|
|
121
123
|
},
|
|
122
124
|
className: {
|
|
123
125
|
type: "class",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerSelect.cjs.js","sources":["../src/registerSelect.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport React, { useEffect, useMemo } from \"react\";\nimport { Select, SelectProps, SelectValue } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport { PlasmicListBoxContext, PlasmicPopoverContext } from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n extractPlasmicDataProps,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseSelectValueProps\n extends React.ComponentProps<typeof SelectValue> {\n customize?: boolean;\n}\n\nexport const BaseSelectValue = (props: BaseSelectValueProps) => {\n const { children, customize } = props;\n return (\n <SelectValue>\n {({ isPlaceholder, selectedText }) => (\n <>\n {isPlaceholder ? (\n <span>Select an item</span>\n ) : (\n <>\n <span>\n {customize ? (children as React.ReactNode) : selectedText}\n </span>\n </>\n )}\n {}\n </>\n )}\n </SelectValue>\n );\n};\n\nconst SELECT_NAME = makeComponentName(\"select\");\n\nexport interface BaseSelectControlContextData {\n itemIds: string[];\n}\n\nexport interface BaseSelectProps\n extends SelectProps<{}>, // NOTE: We don't need generic type here since we don't use items prop (that needs it). We just need to make the type checker happy\n HasControlContextData<BaseSelectControlContextData> {\n previewOpen?: boolean;\n children?: React.ReactNode;\n}\n\nexport function BaseSelect(props: BaseSelectProps) {\n const {\n selectedKey,\n onSelectionChange,\n placeholder,\n previewOpen,\n onOpenChange,\n isDisabled,\n className,\n style,\n children,\n name,\n isOpen,\n setControlContextData,\n \"aria-label\": ariaLabel,\n } = props;\n\n const isEditMode = !!usePlasmicCanvasContext();\n const openProp = isEditMode && previewOpen ? true : isOpen;\n\n let idManager = useMemo(() => new ListBoxItemIdManager(), []);\n\n useEffect(() => {\n idManager.subscribe((ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n });\n }, []);\n\n return (\n <Select\n placeholder={placeholder}\n selectedKey={selectedKey}\n onSelectionChange={onSelectionChange}\n onOpenChange={onOpenChange}\n isDisabled={isDisabled}\n className={className}\n style={style}\n name={name}\n aria-label={ariaLabel}\n isOpen={openProp}\n {...extractPlasmicDataProps(props)}\n >\n <PlasmicPopoverContext.Provider value={{ isOpen: openProp }}>\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {children}\n </PlasmicListBoxContext.Provider>\n </PlasmicPopoverContext.Provider>\n </Select>\n );\n}\n\nexport function registerSelect(loader?: Registerable) {\n const selectValueMeta = registerComponentHelper(loader, BaseSelectValue, {\n name: makeComponentName(\"select-value\"),\n displayName: \"Aria Selected Value\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n importName: \"BaseSelectValue\",\n parentComponentName: SELECT_NAME,\n props: {\n customize: {\n type: \"boolean\",\n description: \"Whether to customize the selected value display\",\n },\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"text\",\n value: \"Selected value...\",\n },\n ],\n hidden: (ps) => !ps.customize,\n },\n className: {\n type: \"class\",\n selectors: [\n {\n selector: \":self[data-placeholder]\",\n label: \"Placeholder\",\n },\n ],\n },\n },\n trapsFocus: true,\n });\n\n registerComponentHelper(loader, BaseSelect, {\n name: SELECT_NAME,\n displayName: \"Aria Select\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n importName: \"BaseSelect\",\n props: {\n ...getCommonProps<BaseSelectProps>(\"Select\", [\n \"name\",\n \"aria-label\",\n \"placeholder\",\n \"isDisabled\",\n \"autoFocus\",\n ]),\n selectedKey: {\n type: \"choice\",\n description: \"The selected keys of the listbox\",\n editOnly: true,\n uncontrolledProp: \"defaultSelectedKey\",\n displayName: \"Initial selected key\",\n options: (\n _props: BaseSelectProps,\n ctx: BaseSelectControlContextData | null\n ) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n // React Aria Select do not support multiple selections yet\n multiSelect: false,\n },\n onSelectionChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"string\" }],\n },\n disabledKeys: {\n type: \"choice\",\n description:\n \"The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.\",\n options: (\n _props: BaseSelectProps,\n ctx: BaseSelectControlContextData | null\n ) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n multiSelect: true,\n advanced: true,\n },\n previewOpen: {\n type: \"boolean\",\n displayName: \"Preview opened?\",\n description: \"Preview opened state while designing in Plasmic editor\",\n editOnly: true,\n defaultValue: false,\n },\n isOpen: {\n type: \"boolean\",\n defaultValue: false,\n // It doesn't make sense to make isOpen prop editable (it's controlled by user interaction and always closed by default), so we keep this prop hidden. We have listed the prop here in the meta only so we can expose a writeable state for it.\n hidden: () => true,\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: [\n {\n type: \"vbox\",\n styles: {\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n width: \"300px\",\n padding: 0,\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"component\",\n name: BUTTON_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n props: {\n children: {\n type: \"hbox\",\n styles: {\n width: \"stretch\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: \"2px 5px\",\n },\n children: [\n {\n type: \"component\",\n name: selectValueMeta.name,\n },\n {\n type: \"img\",\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n height: \"20px\",\n width: \"20px\",\n transform: \"rotate(180deg)\",\n },\n },\n ],\n },\n },\n },\n {\n type: \"component\",\n name: POPOVER_COMPONENT_NAME,\n styles: {\n backgroundColor: \"white\",\n padding: \"10px\",\n overflow: \"scroll\",\n },\n props: {\n children: [\n {\n type: \"component\",\n name: LIST_BOX_COMPONENT_NAME,\n props: {\n selectionMode: \"single\",\n },\n styles: {\n borderWidth: 0,\n width: \"stretch\",\n },\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n states: {\n selectedKey: {\n type: \"writable\",\n valueProp: \"selectedKey\",\n onChangeProp: \"onSelectionChange\",\n variableType: \"text\",\n },\n isOpen: {\n type: \"writable\",\n valueProp: \"isOpen\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n });\n}\n"],"names":["React","SelectValue","makeComponentName","usePlasmicCanvasContext","useMemo","ListBoxItemIdManager","useEffect","Select","extractPlasmicDataProps","PlasmicPopoverContext","PlasmicListBoxContext","registerComponentHelper","getCommonProps","LABEL_COMPONENT_NAME","BUTTON_COMPONENT_NAME","POPOVER_COMPONENT_NAME","LIST_BOX_COMPONENT_NAME"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"registerSelect.cjs.js","sources":["../src/registerSelect.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport React, { useEffect, useMemo } from \"react\";\nimport { Select, SelectProps, SelectValue } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport { PlasmicListBoxContext, PlasmicPopoverContext } from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n extractPlasmicDataProps,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseSelectValueProps\n extends React.ComponentProps<typeof SelectValue> {\n customize?: boolean;\n}\n\nexport const BaseSelectValue = (props: BaseSelectValueProps) => {\n const { children, customize } = props;\n return (\n <SelectValue>\n {({ isPlaceholder, selectedText }) => (\n <>\n {isPlaceholder ? (\n <span>Select an item</span>\n ) : (\n <>\n <span>\n {customize ? (children as React.ReactNode) : selectedText}\n </span>\n </>\n )}\n {}\n </>\n )}\n </SelectValue>\n );\n};\n\nconst SELECT_NAME = makeComponentName(\"select\");\n\nexport interface BaseSelectControlContextData {\n itemIds: string[];\n}\n\nexport interface BaseSelectProps\n extends SelectProps<{}>, // NOTE: We don't need generic type here since we don't use items prop (that needs it). We just need to make the type checker happy\n HasControlContextData<BaseSelectControlContextData> {\n previewOpen?: boolean;\n children?: React.ReactNode;\n}\n\nexport function BaseSelect(props: BaseSelectProps) {\n const {\n selectedKey,\n onSelectionChange,\n placeholder,\n previewOpen,\n onOpenChange,\n isDisabled,\n className,\n style,\n children,\n disabledKeys,\n name,\n isOpen,\n setControlContextData,\n \"aria-label\": ariaLabel,\n } = props;\n\n const isEditMode = !!usePlasmicCanvasContext();\n const openProp = isEditMode && previewOpen ? true : isOpen;\n\n let idManager = useMemo(() => new ListBoxItemIdManager(), []);\n\n useEffect(() => {\n idManager.subscribe((ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n });\n }, []);\n\n return (\n <Select\n placeholder={placeholder}\n selectedKey={selectedKey}\n onSelectionChange={onSelectionChange}\n onOpenChange={onOpenChange}\n isDisabled={isDisabled}\n className={className}\n style={style}\n name={name}\n disabledKeys={disabledKeys}\n aria-label={ariaLabel}\n isOpen={openProp}\n {...extractPlasmicDataProps(props)}\n >\n <PlasmicPopoverContext.Provider value={{ isOpen: openProp }}>\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {children}\n </PlasmicListBoxContext.Provider>\n </PlasmicPopoverContext.Provider>\n </Select>\n );\n}\n\nexport function registerSelect(loader?: Registerable) {\n const selectValueMeta = registerComponentHelper(loader, BaseSelectValue, {\n name: makeComponentName(\"select-value\"),\n displayName: \"Aria Selected Value\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n importName: \"BaseSelectValue\",\n parentComponentName: SELECT_NAME,\n props: {\n customize: {\n type: \"boolean\",\n description: \"Whether to customize the selected value display\",\n },\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"text\",\n value: \"Selected value...\",\n },\n ],\n hidden: (props) => !props.customize,\n },\n className: {\n type: \"class\",\n selectors: [\n {\n selector: \":self[data-placeholder]\",\n label: \"Placeholder\",\n },\n ],\n },\n },\n trapsFocus: true,\n });\n\n registerComponentHelper(loader, BaseSelect, {\n name: SELECT_NAME,\n displayName: \"Aria Select\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n importName: \"BaseSelect\",\n props: {\n ...getCommonProps<BaseSelectProps>(\"Select\", [\n \"name\",\n \"aria-label\",\n \"placeholder\",\n \"isDisabled\",\n \"autoFocus\",\n ]),\n selectedKey: {\n type: \"choice\",\n description: \"The selected keys of the listbox\",\n editOnly: true,\n uncontrolledProp: \"defaultSelectedKey\",\n displayName: \"Initial selected key\",\n options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n // React Aria Select do not support multiple selections yet\n multiSelect: false,\n },\n onSelectionChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"string\" }],\n },\n disabledKeys: {\n type: \"choice\",\n description:\n \"The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.\",\n options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n multiSelect: true,\n advanced: true,\n },\n previewOpen: {\n type: \"boolean\",\n displayName: \"Preview opened?\",\n description: \"Preview opened state while designing in Plasmic editor\",\n editOnly: true,\n defaultValue: false,\n },\n isOpen: {\n type: \"boolean\",\n defaultValue: false,\n // It doesn't make sense to make isOpen prop editable (it's controlled by user interaction and always closed by default), so we keep this prop hidden. We have listed the prop here in the meta only so we can expose a writeable state for it.\n hidden: () => true,\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: [\n {\n type: \"vbox\",\n styles: {\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n width: \"300px\",\n padding: 0,\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"component\",\n name: BUTTON_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n props: {\n children: {\n type: \"hbox\",\n styles: {\n width: \"stretch\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: \"2px 5px\",\n },\n children: [\n {\n type: \"component\",\n name: selectValueMeta.name,\n },\n {\n type: \"img\",\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n height: \"20px\",\n width: \"20px\",\n transform: \"rotate(180deg)\",\n },\n },\n ],\n },\n },\n },\n {\n type: \"component\",\n name: POPOVER_COMPONENT_NAME,\n styles: {\n backgroundColor: \"white\",\n padding: \"10px\",\n overflow: \"scroll\",\n },\n props: {\n children: [\n {\n type: \"component\",\n name: LIST_BOX_COMPONENT_NAME,\n props: {\n selectionMode: \"single\",\n },\n styles: {\n borderWidth: 0,\n width: \"stretch\",\n },\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n states: {\n selectedKey: {\n type: \"writable\",\n valueProp: \"selectedKey\",\n onChangeProp: \"onSelectionChange\",\n variableType: \"text\",\n },\n isOpen: {\n type: \"writable\",\n valueProp: \"isOpen\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n });\n}\n"],"names":["React","SelectValue","makeComponentName","usePlasmicCanvasContext","useMemo","ListBoxItemIdManager","useEffect","Select","extractPlasmicDataProps","PlasmicPopoverContext","PlasmicListBoxContext","registerComponentHelper","getCommonProps","LABEL_COMPONENT_NAME","BUTTON_COMPONENT_NAME","POPOVER_COMPONENT_NAME","LIST_BOX_COMPONENT_NAME"],"mappings":"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"}
|
|
@@ -51,6 +51,7 @@ function BaseSelect(props) {
|
|
|
51
51
|
className,
|
|
52
52
|
style,
|
|
53
53
|
children,
|
|
54
|
+
disabledKeys,
|
|
54
55
|
name,
|
|
55
56
|
isOpen,
|
|
56
57
|
setControlContextData,
|
|
@@ -77,6 +78,7 @@ function BaseSelect(props) {
|
|
|
77
78
|
className,
|
|
78
79
|
style,
|
|
79
80
|
name,
|
|
81
|
+
disabledKeys,
|
|
80
82
|
"aria-label": ariaLabel,
|
|
81
83
|
isOpen: openProp
|
|
82
84
|
}, extractPlasmicDataProps(props)),
|
|
@@ -111,7 +113,7 @@ function registerSelect(loader) {
|
|
|
111
113
|
value: "Selected value..."
|
|
112
114
|
}
|
|
113
115
|
],
|
|
114
|
-
hidden: (
|
|
116
|
+
hidden: (props) => !props.customize
|
|
115
117
|
},
|
|
116
118
|
className: {
|
|
117
119
|
type: "class",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerSelect.esm.js","sources":["../src/registerSelect.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport React, { useEffect, useMemo } from \"react\";\nimport { Select, SelectProps, SelectValue } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport { PlasmicListBoxContext, PlasmicPopoverContext } from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n extractPlasmicDataProps,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseSelectValueProps\n extends React.ComponentProps<typeof SelectValue> {\n customize?: boolean;\n}\n\nexport const BaseSelectValue = (props: BaseSelectValueProps) => {\n const { children, customize } = props;\n return (\n <SelectValue>\n {({ isPlaceholder, selectedText }) => (\n <>\n {isPlaceholder ? (\n <span>Select an item</span>\n ) : (\n <>\n <span>\n {customize ? (children as React.ReactNode) : selectedText}\n </span>\n </>\n )}\n {}\n </>\n )}\n </SelectValue>\n );\n};\n\nconst SELECT_NAME = makeComponentName(\"select\");\n\nexport interface BaseSelectControlContextData {\n itemIds: string[];\n}\n\nexport interface BaseSelectProps\n extends SelectProps<{}>, // NOTE: We don't need generic type here since we don't use items prop (that needs it). We just need to make the type checker happy\n HasControlContextData<BaseSelectControlContextData> {\n previewOpen?: boolean;\n children?: React.ReactNode;\n}\n\nexport function BaseSelect(props: BaseSelectProps) {\n const {\n selectedKey,\n onSelectionChange,\n placeholder,\n previewOpen,\n onOpenChange,\n isDisabled,\n className,\n style,\n children,\n name,\n isOpen,\n setControlContextData,\n \"aria-label\": ariaLabel,\n } = props;\n\n const isEditMode = !!usePlasmicCanvasContext();\n const openProp = isEditMode && previewOpen ? true : isOpen;\n\n let idManager = useMemo(() => new ListBoxItemIdManager(), []);\n\n useEffect(() => {\n idManager.subscribe((ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n });\n }, []);\n\n return (\n <Select\n placeholder={placeholder}\n selectedKey={selectedKey}\n onSelectionChange={onSelectionChange}\n onOpenChange={onOpenChange}\n isDisabled={isDisabled}\n className={className}\n style={style}\n name={name}\n aria-label={ariaLabel}\n isOpen={openProp}\n {...extractPlasmicDataProps(props)}\n >\n <PlasmicPopoverContext.Provider value={{ isOpen: openProp }}>\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {children}\n </PlasmicListBoxContext.Provider>\n </PlasmicPopoverContext.Provider>\n </Select>\n );\n}\n\nexport function registerSelect(loader?: Registerable) {\n const selectValueMeta = registerComponentHelper(loader, BaseSelectValue, {\n name: makeComponentName(\"select-value\"),\n displayName: \"Aria Selected Value\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n importName: \"BaseSelectValue\",\n parentComponentName: SELECT_NAME,\n props: {\n customize: {\n type: \"boolean\",\n description: \"Whether to customize the selected value display\",\n },\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"text\",\n value: \"Selected value...\",\n },\n ],\n hidden: (ps) => !ps.customize,\n },\n className: {\n type: \"class\",\n selectors: [\n {\n selector: \":self[data-placeholder]\",\n label: \"Placeholder\",\n },\n ],\n },\n },\n trapsFocus: true,\n });\n\n registerComponentHelper(loader, BaseSelect, {\n name: SELECT_NAME,\n displayName: \"Aria Select\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n importName: \"BaseSelect\",\n props: {\n ...getCommonProps<BaseSelectProps>(\"Select\", [\n \"name\",\n \"aria-label\",\n \"placeholder\",\n \"isDisabled\",\n \"autoFocus\",\n ]),\n selectedKey: {\n type: \"choice\",\n description: \"The selected keys of the listbox\",\n editOnly: true,\n uncontrolledProp: \"defaultSelectedKey\",\n displayName: \"Initial selected key\",\n options: (\n _props: BaseSelectProps,\n ctx: BaseSelectControlContextData | null\n ) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n // React Aria Select do not support multiple selections yet\n multiSelect: false,\n },\n onSelectionChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"string\" }],\n },\n disabledKeys: {\n type: \"choice\",\n description:\n \"The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.\",\n options: (\n _props: BaseSelectProps,\n ctx: BaseSelectControlContextData | null\n ) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n multiSelect: true,\n advanced: true,\n },\n previewOpen: {\n type: \"boolean\",\n displayName: \"Preview opened?\",\n description: \"Preview opened state while designing in Plasmic editor\",\n editOnly: true,\n defaultValue: false,\n },\n isOpen: {\n type: \"boolean\",\n defaultValue: false,\n // It doesn't make sense to make isOpen prop editable (it's controlled by user interaction and always closed by default), so we keep this prop hidden. We have listed the prop here in the meta only so we can expose a writeable state for it.\n hidden: () => true,\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: [\n {\n type: \"vbox\",\n styles: {\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n width: \"300px\",\n padding: 0,\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"component\",\n name: BUTTON_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n props: {\n children: {\n type: \"hbox\",\n styles: {\n width: \"stretch\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: \"2px 5px\",\n },\n children: [\n {\n type: \"component\",\n name: selectValueMeta.name,\n },\n {\n type: \"img\",\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n height: \"20px\",\n width: \"20px\",\n transform: \"rotate(180deg)\",\n },\n },\n ],\n },\n },\n },\n {\n type: \"component\",\n name: POPOVER_COMPONENT_NAME,\n styles: {\n backgroundColor: \"white\",\n padding: \"10px\",\n overflow: \"scroll\",\n },\n props: {\n children: [\n {\n type: \"component\",\n name: LIST_BOX_COMPONENT_NAME,\n props: {\n selectionMode: \"single\",\n },\n styles: {\n borderWidth: 0,\n width: \"stretch\",\n },\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n states: {\n selectedKey: {\n type: \"writable\",\n valueProp: \"selectedKey\",\n onChangeProp: \"onSelectionChange\",\n variableType: \"text\",\n },\n isOpen: {\n type: \"writable\",\n valueProp: \"isOpen\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n });\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"registerSelect.esm.js","sources":["../src/registerSelect.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport React, { useEffect, useMemo } from \"react\";\nimport { Select, SelectProps, SelectValue } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport { PlasmicListBoxContext, PlasmicPopoverContext } from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n extractPlasmicDataProps,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseSelectValueProps\n extends React.ComponentProps<typeof SelectValue> {\n customize?: boolean;\n}\n\nexport const BaseSelectValue = (props: BaseSelectValueProps) => {\n const { children, customize } = props;\n return (\n <SelectValue>\n {({ isPlaceholder, selectedText }) => (\n <>\n {isPlaceholder ? (\n <span>Select an item</span>\n ) : (\n <>\n <span>\n {customize ? (children as React.ReactNode) : selectedText}\n </span>\n </>\n )}\n {}\n </>\n )}\n </SelectValue>\n );\n};\n\nconst SELECT_NAME = makeComponentName(\"select\");\n\nexport interface BaseSelectControlContextData {\n itemIds: string[];\n}\n\nexport interface BaseSelectProps\n extends SelectProps<{}>, // NOTE: We don't need generic type here since we don't use items prop (that needs it). We just need to make the type checker happy\n HasControlContextData<BaseSelectControlContextData> {\n previewOpen?: boolean;\n children?: React.ReactNode;\n}\n\nexport function BaseSelect(props: BaseSelectProps) {\n const {\n selectedKey,\n onSelectionChange,\n placeholder,\n previewOpen,\n onOpenChange,\n isDisabled,\n className,\n style,\n children,\n disabledKeys,\n name,\n isOpen,\n setControlContextData,\n \"aria-label\": ariaLabel,\n } = props;\n\n const isEditMode = !!usePlasmicCanvasContext();\n const openProp = isEditMode && previewOpen ? true : isOpen;\n\n let idManager = useMemo(() => new ListBoxItemIdManager(), []);\n\n useEffect(() => {\n idManager.subscribe((ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n });\n }, []);\n\n return (\n <Select\n placeholder={placeholder}\n selectedKey={selectedKey}\n onSelectionChange={onSelectionChange}\n onOpenChange={onOpenChange}\n isDisabled={isDisabled}\n className={className}\n style={style}\n name={name}\n disabledKeys={disabledKeys}\n aria-label={ariaLabel}\n isOpen={openProp}\n {...extractPlasmicDataProps(props)}\n >\n <PlasmicPopoverContext.Provider value={{ isOpen: openProp }}>\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {children}\n </PlasmicListBoxContext.Provider>\n </PlasmicPopoverContext.Provider>\n </Select>\n );\n}\n\nexport function registerSelect(loader?: Registerable) {\n const selectValueMeta = registerComponentHelper(loader, BaseSelectValue, {\n name: makeComponentName(\"select-value\"),\n displayName: \"Aria Selected Value\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n importName: \"BaseSelectValue\",\n parentComponentName: SELECT_NAME,\n props: {\n customize: {\n type: \"boolean\",\n description: \"Whether to customize the selected value display\",\n },\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"text\",\n value: \"Selected value...\",\n },\n ],\n hidden: (props) => !props.customize,\n },\n className: {\n type: \"class\",\n selectors: [\n {\n selector: \":self[data-placeholder]\",\n label: \"Placeholder\",\n },\n ],\n },\n },\n trapsFocus: true,\n });\n\n registerComponentHelper(loader, BaseSelect, {\n name: SELECT_NAME,\n displayName: \"Aria Select\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n importName: \"BaseSelect\",\n props: {\n ...getCommonProps<BaseSelectProps>(\"Select\", [\n \"name\",\n \"aria-label\",\n \"placeholder\",\n \"isDisabled\",\n \"autoFocus\",\n ]),\n selectedKey: {\n type: \"choice\",\n description: \"The selected keys of the listbox\",\n editOnly: true,\n uncontrolledProp: \"defaultSelectedKey\",\n displayName: \"Initial selected key\",\n options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n // React Aria Select do not support multiple selections yet\n multiSelect: false,\n },\n onSelectionChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"string\" }],\n },\n disabledKeys: {\n type: \"choice\",\n description:\n \"The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.\",\n options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n multiSelect: true,\n advanced: true,\n },\n previewOpen: {\n type: \"boolean\",\n displayName: \"Preview opened?\",\n description: \"Preview opened state while designing in Plasmic editor\",\n editOnly: true,\n defaultValue: false,\n },\n isOpen: {\n type: \"boolean\",\n defaultValue: false,\n // It doesn't make sense to make isOpen prop editable (it's controlled by user interaction and always closed by default), so we keep this prop hidden. We have listed the prop here in the meta only so we can expose a writeable state for it.\n hidden: () => true,\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: [\n {\n type: \"vbox\",\n styles: {\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n width: \"300px\",\n padding: 0,\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"component\",\n name: BUTTON_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n props: {\n children: {\n type: \"hbox\",\n styles: {\n width: \"stretch\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: \"2px 5px\",\n },\n children: [\n {\n type: \"component\",\n name: selectValueMeta.name,\n },\n {\n type: \"img\",\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n height: \"20px\",\n width: \"20px\",\n transform: \"rotate(180deg)\",\n },\n },\n ],\n },\n },\n },\n {\n type: \"component\",\n name: POPOVER_COMPONENT_NAME,\n styles: {\n backgroundColor: \"white\",\n padding: \"10px\",\n overflow: \"scroll\",\n },\n props: {\n children: [\n {\n type: \"component\",\n name: LIST_BOX_COMPONENT_NAME,\n props: {\n selectionMode: \"single\",\n },\n styles: {\n borderWidth: 0,\n width: \"stretch\",\n },\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n states: {\n selectedKey: {\n type: \"writable\",\n valueProp: \"selectedKey\",\n onChangeProp: \"onSelectionChange\",\n variableType: \"text\",\n },\n isOpen: {\n type: \"writable\",\n valueProp: \"isOpen\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n });\n}\n"],"names":[],"mappings":"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"}
|