@plasmicpkgs/react-aria 0.0.152 → 0.0.154
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 +276 -287
- package/dist/react-aria.esm.js.map +1 -1
- package/dist/react-aria.js +275 -286
- package/dist/react-aria.js.map +1 -1
- package/dist/registerListBox.d.ts +1 -1
- package/dist/variant-utils.d.ts +4 -3
- package/package.json +3 -3
- package/skinny/registerButton.cjs.js +27 -22
- package/skinny/registerButton.cjs.js.map +1 -1
- package/skinny/registerButton.esm.js +27 -22
- package/skinny/registerButton.esm.js.map +1 -1
- package/skinny/registerCheckbox.cjs.js +18 -16
- package/skinny/registerCheckbox.cjs.js.map +1 -1
- package/skinny/registerCheckbox.esm.js +18 -16
- package/skinny/registerCheckbox.esm.js.map +1 -1
- package/skinny/registerCheckboxGroup.cjs.js +12 -12
- package/skinny/registerCheckboxGroup.cjs.js.map +1 -1
- package/skinny/registerCheckboxGroup.esm.js +12 -12
- package/skinny/registerCheckboxGroup.esm.js.map +1 -1
- package/skinny/registerComboBox.cjs.js +11 -16
- package/skinny/registerComboBox.cjs.js.map +1 -1
- package/skinny/registerComboBox.esm.js +11 -16
- package/skinny/registerComboBox.esm.js.map +1 -1
- package/skinny/registerDialogTrigger.cjs.js +1 -1
- package/skinny/registerDialogTrigger.esm.js +1 -1
- package/skinny/registerInput.cjs.js +1 -1
- package/skinny/registerInput.esm.js +1 -1
- package/skinny/{registerListBox-7a50077e.cjs.js → registerListBox-28474381.cjs.js} +24 -32
- package/skinny/registerListBox-28474381.cjs.js.map +1 -0
- package/skinny/{registerListBox-14503b0a.esm.js → registerListBox-7197abae.esm.js} +26 -34
- package/skinny/registerListBox-7197abae.esm.js.map +1 -0
- package/skinny/registerListBox.cjs.js +4 -3
- package/skinny/registerListBox.cjs.js.map +1 -1
- package/skinny/registerListBox.d.ts +1 -1
- package/skinny/registerListBox.esm.js +4 -3
- package/skinny/registerListBox.esm.js.map +1 -1
- package/skinny/registerListBoxItem.cjs.js +20 -17
- package/skinny/registerListBoxItem.cjs.js.map +1 -1
- package/skinny/registerListBoxItem.esm.js +20 -17
- package/skinny/registerListBoxItem.esm.js.map +1 -1
- package/skinny/registerOverlayArrow.cjs.js +12 -12
- package/skinny/registerOverlayArrow.cjs.js.map +1 -1
- package/skinny/registerOverlayArrow.esm.js +12 -12
- package/skinny/registerOverlayArrow.esm.js.map +1 -1
- package/skinny/registerRadio.cjs.js +17 -15
- package/skinny/registerRadio.cjs.js.map +1 -1
- package/skinny/registerRadio.esm.js +17 -15
- package/skinny/registerRadio.esm.js.map +1 -1
- package/skinny/registerRadioGroup.cjs.js +12 -10
- package/skinny/registerRadioGroup.cjs.js.map +1 -1
- package/skinny/registerRadioGroup.esm.js +12 -10
- package/skinny/registerRadioGroup.esm.js.map +1 -1
- package/skinny/registerSection.cjs.js +3 -2
- package/skinny/registerSection.cjs.js.map +1 -1
- package/skinny/registerSection.esm.js +3 -2
- package/skinny/registerSection.esm.js.map +1 -1
- package/skinny/registerSelect.cjs.js +19 -25
- package/skinny/registerSelect.cjs.js.map +1 -1
- package/skinny/registerSelect.esm.js +19 -25
- package/skinny/registerSelect.esm.js.map +1 -1
- package/skinny/registerSlider.cjs.js +10 -8
- package/skinny/registerSlider.cjs.js.map +1 -1
- package/skinny/registerSlider.esm.js +10 -8
- package/skinny/registerSlider.esm.js.map +1 -1
- package/skinny/registerSliderOutput.cjs.js +10 -10
- package/skinny/registerSliderOutput.cjs.js.map +1 -1
- package/skinny/registerSliderOutput.esm.js +10 -10
- package/skinny/registerSliderOutput.esm.js.map +1 -1
- package/skinny/registerSliderThumb.cjs.js +9 -15
- package/skinny/registerSliderThumb.cjs.js.map +1 -1
- package/skinny/registerSliderThumb.esm.js +9 -15
- package/skinny/registerSliderThumb.esm.js.map +1 -1
- package/skinny/registerSliderTrack.cjs.js +20 -20
- package/skinny/registerSliderTrack.cjs.js.map +1 -1
- package/skinny/registerSliderTrack.esm.js +20 -20
- package/skinny/registerSliderTrack.esm.js.map +1 -1
- package/skinny/registerSwitch.cjs.js +16 -14
- package/skinny/registerSwitch.cjs.js.map +1 -1
- package/skinny/registerSwitch.esm.js +16 -14
- package/skinny/registerSwitch.esm.js.map +1 -1
- package/skinny/registerTextArea.cjs.js +1 -1
- package/skinny/registerTextArea.esm.js +1 -1
- package/skinny/registerTextField.cjs.js +11 -9
- package/skinny/registerTextField.cjs.js.map +1 -1
- package/skinny/registerTextField.esm.js +11 -9
- package/skinny/registerTextField.esm.js.map +1 -1
- package/skinny/{variant-utils-0ad70db8.cjs.js → variant-utils-1c84aebb.cjs.js} +5 -9
- package/skinny/variant-utils-1c84aebb.cjs.js.map +1 -0
- package/skinny/{variant-utils-4405ebb0.esm.js → variant-utils-5f356d53.esm.js} +5 -10
- package/skinny/variant-utils-5f356d53.esm.js.map +1 -0
- package/skinny/variant-utils.d.ts +4 -3
- package/skinny/registerListBox-14503b0a.esm.js.map +0 -1
- package/skinny/registerListBox-7a50077e.cjs.js.map +0 -1
- package/skinny/variant-utils-0ad70db8.cjs.js.map +0 -1
- package/skinny/variant-utils-4405ebb0.esm.js.map +0 -1
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var reactAriaComponents = require('react-aria-components');
|
|
5
|
+
var OptionsItemIdManager = require('./OptionsItemIdManager-cb3a2c53.cjs.js');
|
|
5
6
|
var common = require('./common-7f948fa5.cjs.js');
|
|
6
7
|
var contexts = require('./contexts-6d0cb2b1.cjs.js');
|
|
7
|
-
var OptionsItemIdManager = require('./OptionsItemIdManager-cb3a2c53.cjs.js');
|
|
8
8
|
var registerCheckbox = require('./registerCheckbox.cjs.js');
|
|
9
9
|
var registerDescription = require('./registerDescription.cjs.js');
|
|
10
10
|
var registerLabel = require('./registerLabel.cjs.js');
|
|
11
|
-
var variantUtils = require('./variant-utils-
|
|
11
|
+
var variantUtils = require('./variant-utils-1c84aebb.cjs.js');
|
|
12
12
|
require('@plasmicapp/host');
|
|
13
13
|
require('@plasmicapp/host/registerComponent');
|
|
14
14
|
require('./registerText.cjs.js');
|
|
@@ -49,9 +49,7 @@ var __objRest = (source, exclude) => {
|
|
|
49
49
|
return target;
|
|
50
50
|
};
|
|
51
51
|
const CHECKBOX_GROUP_VARIANTS = ["disabled", "readonly"];
|
|
52
|
-
const { variants
|
|
53
|
-
CHECKBOX_GROUP_VARIANTS
|
|
54
|
-
);
|
|
52
|
+
const { variants } = variantUtils.pickAriaComponentVariants(CHECKBOX_GROUP_VARIANTS);
|
|
55
53
|
function BaseCheckboxGroup(props) {
|
|
56
54
|
const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
|
|
57
55
|
const updateIds = React.useCallback(
|
|
@@ -65,14 +63,16 @@ function BaseCheckboxGroup(props) {
|
|
|
65
63
|
const idManager = OptionsItemIdManager.useIdManager(updateIds);
|
|
66
64
|
return (
|
|
67
65
|
// PlasmicCheckboxGroupContext is used by BaseCheckbox
|
|
68
|
-
/* @__PURE__ */ React__default.default.createElement(contexts.PlasmicCheckboxGroupContext.Provider, { value: __spreadProps(__spreadValues({}, rest), { idManager }) }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.CheckboxGroup, __spreadProps(__spreadValues({}, rest), { style: common.COMMON_STYLES }), ({ isDisabled, isReadOnly }) =>
|
|
69
|
-
|
|
66
|
+
/* @__PURE__ */ React__default.default.createElement(contexts.PlasmicCheckboxGroupContext.Provider, { value: __spreadProps(__spreadValues({}, rest), { idManager }) }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.CheckboxGroup, __spreadProps(__spreadValues({}, rest), { style: common.COMMON_STYLES }), ({ isDisabled, isReadOnly }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
|
|
67
|
+
variantUtils.VariantUpdater,
|
|
70
68
|
{
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
69
|
+
changes: {
|
|
70
|
+
disabled: isDisabled,
|
|
71
|
+
readonly: isReadOnly
|
|
72
|
+
},
|
|
73
|
+
updateVariant: plasmicUpdateVariant
|
|
74
|
+
}
|
|
75
|
+
), children)))
|
|
76
76
|
);
|
|
77
77
|
}
|
|
78
78
|
const componentName = common.makeComponentName("checkboxGroup");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerCheckboxGroup.cjs.js","sources":["../src/registerCheckboxGroup.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport type { CheckboxGroupProps } from \"react-aria-components\";\nimport { CheckboxGroup } from \"react-aria-components\";\nimport {\n COMMON_STYLES,\n createAriaLabelProp,\n createDisabledProp,\n createIdProp,\n createNameProp,\n createReadOnlyProp,\n createRequiredProp,\n} from \"./common\";\nimport { PlasmicCheckboxGroupContext } from \"./contexts\";\nimport { useIdManager } from \"./OptionsItemIdManager\";\nimport {\n CHECKBOX_COMPONENT_NAME,\n makeDefaultCheckboxChildren,\n} from \"./registerCheckbox\";\nimport { DESCRIPTION_COMPONENT_NAME } from \"./registerDescription\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport {\n BaseControlContextDataForLists,\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst CHECKBOX_GROUP_VARIANTS = [\"disabled\" as const, \"readonly\" as const];\n\nexport interface BaseCheckboxGroupProps\n extends CheckboxGroupProps,\n HasControlContextData<BaseControlContextDataForLists>,\n WithVariants<typeof CHECKBOX_GROUP_VARIANTS> {\n children?: React.ReactNode;\n}\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n CHECKBOX_GROUP_VARIANTS\n);\n\nexport function BaseCheckboxGroup(props: BaseCheckboxGroupProps) {\n const { children, plasmicUpdateVariant, setControlContextData, ...rest } =\n props;\n\n const updateIds = useCallback(\n (ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n },\n [setControlContextData]\n );\n\n const idManager = useIdManager(updateIds);\n return (\n // PlasmicCheckboxGroupContext is used by BaseCheckbox\n <PlasmicCheckboxGroupContext.Provider value={{ ...rest, idManager }}>\n <CheckboxGroup {...rest} style={COMMON_STYLES}>\n {({ isDisabled, isReadOnly }) =>\n withObservedValues(\n children,\n {\n disabled: isDisabled,\n readonly: isReadOnly,\n },\n plasmicUpdateVariant\n )\n }\n </CheckboxGroup>\n </PlasmicCheckboxGroupContext.Provider>\n );\n}\n\nconst componentName = makeComponentName(\"checkboxGroup\");\n\nexport function registerCheckboxGroup(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseCheckboxGroup>\n) {\n registerComponentHelper(\n loader,\n BaseCheckboxGroup,\n {\n name: componentName,\n displayName: \"Aria Checkbox Group\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerCheckboxGroup\",\n importName: \"BaseCheckboxGroup\",\n variants,\n props: {\n id: createIdProp(\"Checkbox Group\"),\n name: createNameProp(),\n isDisabled: createDisabledProp(\"Checkbox Group\"),\n isReadOnly: createReadOnlyProp(\"Checkbox Group\"),\n isRequired: createRequiredProp(\"Checkbox Group\"),\n \"aria-label\": createAriaLabelProp(\"Checkbox Group\"),\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"vbox\",\n styles: {\n display: \"flex\",\n gap: \"5px\",\n padding: 0,\n alignItems: \"flex-start\",\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Checkbox Group\",\n },\n },\n },\n {\n type: \"component\",\n name: CHECKBOX_COMPONENT_NAME,\n props: {\n children: makeDefaultCheckboxChildren({\n label: \"Checkbox 1\",\n showDocs: false,\n }),\n value: \"checkbox1\",\n },\n },\n {\n type: \"component\",\n name: CHECKBOX_COMPONENT_NAME,\n props: {\n children: makeDefaultCheckboxChildren({\n label: \"Checkbox 2\",\n showDocs: false,\n }),\n value: \"checkbox2\",\n },\n },\n {\n type: \"component\",\n name: CHECKBOX_COMPONENT_NAME,\n props: {\n children: makeDefaultCheckboxChildren({\n label: \"Checkbox 3\",\n showDocs: false,\n }),\n value: \"checkbox3\",\n },\n },\n {\n type: \"component\",\n name: DESCRIPTION_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value:\n \"Use the registered variants to see it in action...\",\n },\n },\n },\n ],\n },\n ],\n },\n value: {\n type: \"choice\",\n editOnly: true,\n uncontrolledProp: \"defaultValue\",\n description: \"The current value\",\n options: (_props, ctx) =>\n ctx?.itemIds ? Array.from(ctx.itemIds) : [],\n multiSelect: true,\n },\n isInvalid: {\n displayName: \"Invalid\",\n type: \"boolean\",\n description: \"Whether the input value is invalid\",\n defaultValueHint: false,\n },\n validationBehavior: {\n type: \"choice\",\n options: [\"native\", \"aria\"],\n description:\n \"Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.\",\n defaultValueHint: \"native\",\n },\n onChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"object\" }],\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"array\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["pickAriaComponentVariants","useCallback","useIdManager","React","PlasmicCheckboxGroupContext","CheckboxGroup","COMMON_STYLES","makeComponentName","registerComponentHelper","createIdProp","createNameProp","createDisabledProp","createReadOnlyProp","createRequiredProp","createAriaLabelProp","LABEL_COMPONENT_NAME","CHECKBOX_COMPONENT_NAME","makeDefaultCheckboxChildren","DESCRIPTION_COMPONENT_NAME"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"registerCheckboxGroup.cjs.js","sources":["../src/registerCheckboxGroup.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport type { CheckboxGroupProps } from \"react-aria-components\";\nimport { CheckboxGroup } from \"react-aria-components\";\nimport { useIdManager } from \"./OptionsItemIdManager\";\nimport {\n COMMON_STYLES,\n createAriaLabelProp,\n createDisabledProp,\n createIdProp,\n createNameProp,\n createReadOnlyProp,\n createRequiredProp,\n} from \"./common\";\nimport { PlasmicCheckboxGroupContext } from \"./contexts\";\nimport {\n CHECKBOX_COMPONENT_NAME,\n makeDefaultCheckboxChildren,\n} from \"./registerCheckbox\";\nimport { DESCRIPTION_COMPONENT_NAME } from \"./registerDescription\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport {\n BaseControlContextDataForLists,\n CodeComponentMetaOverrides,\n HasControlContextData,\n Registerable,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\nimport {\n VariantUpdater,\n WithVariants,\n pickAriaComponentVariants,\n} from \"./variant-utils\";\n\nconst CHECKBOX_GROUP_VARIANTS = [\"disabled\" as const, \"readonly\" as const];\n\nexport interface BaseCheckboxGroupProps\n extends CheckboxGroupProps,\n HasControlContextData<BaseControlContextDataForLists>,\n WithVariants<typeof CHECKBOX_GROUP_VARIANTS> {\n children?: React.ReactNode;\n}\n\nconst { variants } = pickAriaComponentVariants(CHECKBOX_GROUP_VARIANTS);\n\nexport function BaseCheckboxGroup(props: BaseCheckboxGroupProps) {\n const { children, plasmicUpdateVariant, setControlContextData, ...rest } =\n props;\n\n const updateIds = useCallback(\n (ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n },\n [setControlContextData]\n );\n\n const idManager = useIdManager(updateIds);\n return (\n // PlasmicCheckboxGroupContext is used by BaseCheckbox\n <PlasmicCheckboxGroupContext.Provider value={{ ...rest, idManager }}>\n <CheckboxGroup {...rest} style={COMMON_STYLES}>\n {({ isDisabled, isReadOnly }) => (\n <>\n <VariantUpdater\n changes={{\n disabled: isDisabled,\n readonly: isReadOnly,\n }}\n updateVariant={plasmicUpdateVariant}\n />\n {children}\n </>\n )}\n </CheckboxGroup>\n </PlasmicCheckboxGroupContext.Provider>\n );\n}\n\nconst componentName = makeComponentName(\"checkboxGroup\");\n\nexport function registerCheckboxGroup(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseCheckboxGroup>\n) {\n registerComponentHelper(\n loader,\n BaseCheckboxGroup,\n {\n name: componentName,\n displayName: \"Aria Checkbox Group\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerCheckboxGroup\",\n importName: \"BaseCheckboxGroup\",\n variants,\n props: {\n id: createIdProp(\"Checkbox Group\"),\n name: createNameProp(),\n isDisabled: createDisabledProp(\"Checkbox Group\"),\n isReadOnly: createReadOnlyProp(\"Checkbox Group\"),\n isRequired: createRequiredProp(\"Checkbox Group\"),\n \"aria-label\": createAriaLabelProp(\"Checkbox Group\"),\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"vbox\",\n styles: {\n display: \"flex\",\n gap: \"5px\",\n padding: 0,\n alignItems: \"flex-start\",\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Checkbox Group\",\n },\n },\n },\n {\n type: \"component\",\n name: CHECKBOX_COMPONENT_NAME,\n props: {\n children: makeDefaultCheckboxChildren({\n label: \"Checkbox 1\",\n showDocs: false,\n }),\n value: \"checkbox1\",\n },\n },\n {\n type: \"component\",\n name: CHECKBOX_COMPONENT_NAME,\n props: {\n children: makeDefaultCheckboxChildren({\n label: \"Checkbox 2\",\n showDocs: false,\n }),\n value: \"checkbox2\",\n },\n },\n {\n type: \"component\",\n name: CHECKBOX_COMPONENT_NAME,\n props: {\n children: makeDefaultCheckboxChildren({\n label: \"Checkbox 3\",\n showDocs: false,\n }),\n value: \"checkbox3\",\n },\n },\n {\n type: \"component\",\n name: DESCRIPTION_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value:\n \"Use the registered variants to see it in action...\",\n },\n },\n },\n ],\n },\n ],\n },\n value: {\n type: \"choice\",\n editOnly: true,\n uncontrolledProp: \"defaultValue\",\n description: \"The current value\",\n options: (_props, ctx) =>\n ctx?.itemIds ? Array.from(ctx.itemIds) : [],\n multiSelect: true,\n },\n isInvalid: {\n displayName: \"Invalid\",\n type: \"boolean\",\n description: \"Whether the input value is invalid\",\n defaultValueHint: false,\n },\n validationBehavior: {\n type: \"choice\",\n options: [\"native\", \"aria\"],\n description:\n \"Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.\",\n defaultValueHint: \"native\",\n },\n onChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"object\" }],\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"array\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["pickAriaComponentVariants","useCallback","useIdManager","React","PlasmicCheckboxGroupContext","CheckboxGroup","COMMON_STYLES","VariantUpdater","makeComponentName","registerComponentHelper","createIdProp","createNameProp","createDisabledProp","createReadOnlyProp","createRequiredProp","createAriaLabelProp","LABEL_COMPONENT_NAME","CHECKBOX_COMPONENT_NAME","makeDefaultCheckboxChildren","DESCRIPTION_COMPONENT_NAME"],"mappings":"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"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
2
|
import { CheckboxGroup } from 'react-aria-components';
|
|
3
|
+
import { u as useIdManager } from './OptionsItemIdManager-0ce90944.esm.js';
|
|
3
4
|
import { r as registerComponentHelper, C as COMMON_STYLES, c as createIdProp, a as createNameProp, b as createDisabledProp, d as createReadOnlyProp, e as createRequiredProp, f as createAriaLabelProp, m as makeComponentName } from './common-81f08e86.esm.js';
|
|
4
5
|
import { P as PlasmicCheckboxGroupContext } from './contexts-5cb81c2f.esm.js';
|
|
5
|
-
import { u as useIdManager } from './OptionsItemIdManager-0ce90944.esm.js';
|
|
6
6
|
import { CHECKBOX_COMPONENT_NAME, makeDefaultCheckboxChildren } from './registerCheckbox.esm.js';
|
|
7
7
|
import { DESCRIPTION_COMPONENT_NAME } from './registerDescription.esm.js';
|
|
8
8
|
import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
|
|
9
|
-
import { p as pickAriaComponentVariants } from './variant-utils-
|
|
9
|
+
import { p as pickAriaComponentVariants, V as VariantUpdater } from './variant-utils-5f356d53.esm.js';
|
|
10
10
|
import '@plasmicapp/host';
|
|
11
11
|
import '@plasmicapp/host/registerComponent';
|
|
12
12
|
import './registerText.esm.js';
|
|
@@ -43,9 +43,7 @@ var __objRest = (source, exclude) => {
|
|
|
43
43
|
return target;
|
|
44
44
|
};
|
|
45
45
|
const CHECKBOX_GROUP_VARIANTS = ["disabled", "readonly"];
|
|
46
|
-
const { variants
|
|
47
|
-
CHECKBOX_GROUP_VARIANTS
|
|
48
|
-
);
|
|
46
|
+
const { variants } = pickAriaComponentVariants(CHECKBOX_GROUP_VARIANTS);
|
|
49
47
|
function BaseCheckboxGroup(props) {
|
|
50
48
|
const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
|
|
51
49
|
const updateIds = useCallback(
|
|
@@ -59,14 +57,16 @@ function BaseCheckboxGroup(props) {
|
|
|
59
57
|
const idManager = useIdManager(updateIds);
|
|
60
58
|
return (
|
|
61
59
|
// PlasmicCheckboxGroupContext is used by BaseCheckbox
|
|
62
|
-
/* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps(__spreadValues({}, rest), { idManager }) }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadProps(__spreadValues({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) =>
|
|
63
|
-
|
|
60
|
+
/* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps(__spreadValues({}, rest), { idManager }) }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadProps(__spreadValues({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
61
|
+
VariantUpdater,
|
|
64
62
|
{
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
63
|
+
changes: {
|
|
64
|
+
disabled: isDisabled,
|
|
65
|
+
readonly: isReadOnly
|
|
66
|
+
},
|
|
67
|
+
updateVariant: plasmicUpdateVariant
|
|
68
|
+
}
|
|
69
|
+
), children)))
|
|
70
70
|
);
|
|
71
71
|
}
|
|
72
72
|
const componentName = makeComponentName("checkboxGroup");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerCheckboxGroup.esm.js","sources":["../src/registerCheckboxGroup.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport type { CheckboxGroupProps } from \"react-aria-components\";\nimport { CheckboxGroup } from \"react-aria-components\";\nimport {\n COMMON_STYLES,\n createAriaLabelProp,\n createDisabledProp,\n createIdProp,\n createNameProp,\n createReadOnlyProp,\n createRequiredProp,\n} from \"./common\";\nimport { PlasmicCheckboxGroupContext } from \"./contexts\";\nimport { useIdManager } from \"./OptionsItemIdManager\";\nimport {\n CHECKBOX_COMPONENT_NAME,\n makeDefaultCheckboxChildren,\n} from \"./registerCheckbox\";\nimport { DESCRIPTION_COMPONENT_NAME } from \"./registerDescription\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport {\n BaseControlContextDataForLists,\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst CHECKBOX_GROUP_VARIANTS = [\"disabled\" as const, \"readonly\" as const];\n\nexport interface BaseCheckboxGroupProps\n extends CheckboxGroupProps,\n HasControlContextData<BaseControlContextDataForLists>,\n WithVariants<typeof CHECKBOX_GROUP_VARIANTS> {\n children?: React.ReactNode;\n}\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n CHECKBOX_GROUP_VARIANTS\n);\n\nexport function BaseCheckboxGroup(props: BaseCheckboxGroupProps) {\n const { children, plasmicUpdateVariant, setControlContextData, ...rest } =\n props;\n\n const updateIds = useCallback(\n (ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n },\n [setControlContextData]\n );\n\n const idManager = useIdManager(updateIds);\n return (\n // PlasmicCheckboxGroupContext is used by BaseCheckbox\n <PlasmicCheckboxGroupContext.Provider value={{ ...rest, idManager }}>\n <CheckboxGroup {...rest} style={COMMON_STYLES}>\n {({ isDisabled, isReadOnly }) =>\n withObservedValues(\n children,\n {\n disabled: isDisabled,\n readonly: isReadOnly,\n },\n plasmicUpdateVariant\n )\n }\n </CheckboxGroup>\n </PlasmicCheckboxGroupContext.Provider>\n );\n}\n\nconst componentName = makeComponentName(\"checkboxGroup\");\n\nexport function registerCheckboxGroup(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseCheckboxGroup>\n) {\n registerComponentHelper(\n loader,\n BaseCheckboxGroup,\n {\n name: componentName,\n displayName: \"Aria Checkbox Group\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerCheckboxGroup\",\n importName: \"BaseCheckboxGroup\",\n variants,\n props: {\n id: createIdProp(\"Checkbox Group\"),\n name: createNameProp(),\n isDisabled: createDisabledProp(\"Checkbox Group\"),\n isReadOnly: createReadOnlyProp(\"Checkbox Group\"),\n isRequired: createRequiredProp(\"Checkbox Group\"),\n \"aria-label\": createAriaLabelProp(\"Checkbox Group\"),\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"vbox\",\n styles: {\n display: \"flex\",\n gap: \"5px\",\n padding: 0,\n alignItems: \"flex-start\",\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Checkbox Group\",\n },\n },\n },\n {\n type: \"component\",\n name: CHECKBOX_COMPONENT_NAME,\n props: {\n children: makeDefaultCheckboxChildren({\n label: \"Checkbox 1\",\n showDocs: false,\n }),\n value: \"checkbox1\",\n },\n },\n {\n type: \"component\",\n name: CHECKBOX_COMPONENT_NAME,\n props: {\n children: makeDefaultCheckboxChildren({\n label: \"Checkbox 2\",\n showDocs: false,\n }),\n value: \"checkbox2\",\n },\n },\n {\n type: \"component\",\n name: CHECKBOX_COMPONENT_NAME,\n props: {\n children: makeDefaultCheckboxChildren({\n label: \"Checkbox 3\",\n showDocs: false,\n }),\n value: \"checkbox3\",\n },\n },\n {\n type: \"component\",\n name: DESCRIPTION_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value:\n \"Use the registered variants to see it in action...\",\n },\n },\n },\n ],\n },\n ],\n },\n value: {\n type: \"choice\",\n editOnly: true,\n uncontrolledProp: \"defaultValue\",\n description: \"The current value\",\n options: (_props, ctx) =>\n ctx?.itemIds ? Array.from(ctx.itemIds) : [],\n multiSelect: true,\n },\n isInvalid: {\n displayName: \"Invalid\",\n type: \"boolean\",\n description: \"Whether the input value is invalid\",\n defaultValueHint: false,\n },\n validationBehavior: {\n type: \"choice\",\n options: [\"native\", \"aria\"],\n description:\n \"Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.\",\n defaultValueHint: \"native\",\n },\n onChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"object\" }],\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"array\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"registerCheckboxGroup.esm.js","sources":["../src/registerCheckboxGroup.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport type { CheckboxGroupProps } from \"react-aria-components\";\nimport { CheckboxGroup } from \"react-aria-components\";\nimport { useIdManager } from \"./OptionsItemIdManager\";\nimport {\n COMMON_STYLES,\n createAriaLabelProp,\n createDisabledProp,\n createIdProp,\n createNameProp,\n createReadOnlyProp,\n createRequiredProp,\n} from \"./common\";\nimport { PlasmicCheckboxGroupContext } from \"./contexts\";\nimport {\n CHECKBOX_COMPONENT_NAME,\n makeDefaultCheckboxChildren,\n} from \"./registerCheckbox\";\nimport { DESCRIPTION_COMPONENT_NAME } from \"./registerDescription\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport {\n BaseControlContextDataForLists,\n CodeComponentMetaOverrides,\n HasControlContextData,\n Registerable,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\nimport {\n VariantUpdater,\n WithVariants,\n pickAriaComponentVariants,\n} from \"./variant-utils\";\n\nconst CHECKBOX_GROUP_VARIANTS = [\"disabled\" as const, \"readonly\" as const];\n\nexport interface BaseCheckboxGroupProps\n extends CheckboxGroupProps,\n HasControlContextData<BaseControlContextDataForLists>,\n WithVariants<typeof CHECKBOX_GROUP_VARIANTS> {\n children?: React.ReactNode;\n}\n\nconst { variants } = pickAriaComponentVariants(CHECKBOX_GROUP_VARIANTS);\n\nexport function BaseCheckboxGroup(props: BaseCheckboxGroupProps) {\n const { children, plasmicUpdateVariant, setControlContextData, ...rest } =\n props;\n\n const updateIds = useCallback(\n (ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n },\n [setControlContextData]\n );\n\n const idManager = useIdManager(updateIds);\n return (\n // PlasmicCheckboxGroupContext is used by BaseCheckbox\n <PlasmicCheckboxGroupContext.Provider value={{ ...rest, idManager }}>\n <CheckboxGroup {...rest} style={COMMON_STYLES}>\n {({ isDisabled, isReadOnly }) => (\n <>\n <VariantUpdater\n changes={{\n disabled: isDisabled,\n readonly: isReadOnly,\n }}\n updateVariant={plasmicUpdateVariant}\n />\n {children}\n </>\n )}\n </CheckboxGroup>\n </PlasmicCheckboxGroupContext.Provider>\n );\n}\n\nconst componentName = makeComponentName(\"checkboxGroup\");\n\nexport function registerCheckboxGroup(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseCheckboxGroup>\n) {\n registerComponentHelper(\n loader,\n BaseCheckboxGroup,\n {\n name: componentName,\n displayName: \"Aria Checkbox Group\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerCheckboxGroup\",\n importName: \"BaseCheckboxGroup\",\n variants,\n props: {\n id: createIdProp(\"Checkbox Group\"),\n name: createNameProp(),\n isDisabled: createDisabledProp(\"Checkbox Group\"),\n isReadOnly: createReadOnlyProp(\"Checkbox Group\"),\n isRequired: createRequiredProp(\"Checkbox Group\"),\n \"aria-label\": createAriaLabelProp(\"Checkbox Group\"),\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"vbox\",\n styles: {\n display: \"flex\",\n gap: \"5px\",\n padding: 0,\n alignItems: \"flex-start\",\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Checkbox Group\",\n },\n },\n },\n {\n type: \"component\",\n name: CHECKBOX_COMPONENT_NAME,\n props: {\n children: makeDefaultCheckboxChildren({\n label: \"Checkbox 1\",\n showDocs: false,\n }),\n value: \"checkbox1\",\n },\n },\n {\n type: \"component\",\n name: CHECKBOX_COMPONENT_NAME,\n props: {\n children: makeDefaultCheckboxChildren({\n label: \"Checkbox 2\",\n showDocs: false,\n }),\n value: \"checkbox2\",\n },\n },\n {\n type: \"component\",\n name: CHECKBOX_COMPONENT_NAME,\n props: {\n children: makeDefaultCheckboxChildren({\n label: \"Checkbox 3\",\n showDocs: false,\n }),\n value: \"checkbox3\",\n },\n },\n {\n type: \"component\",\n name: DESCRIPTION_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value:\n \"Use the registered variants to see it in action...\",\n },\n },\n },\n ],\n },\n ],\n },\n value: {\n type: \"choice\",\n editOnly: true,\n uncontrolledProp: \"defaultValue\",\n description: \"The current value\",\n options: (_props, ctx) =>\n ctx?.itemIds ? Array.from(ctx.itemIds) : [],\n multiSelect: true,\n },\n isInvalid: {\n displayName: \"Invalid\",\n type: \"boolean\",\n description: \"Whether the input value is invalid\",\n defaultValueHint: false,\n },\n validationBehavior: {\n type: \"choice\",\n options: [\"native\", \"aria\"],\n description:\n \"Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.\",\n defaultValueHint: \"native\",\n },\n onChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"object\" }],\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"array\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var reactAriaComponents = require('react-aria-components');
|
|
5
|
+
var OptionsItemIdManager = require('./OptionsItemIdManager-cb3a2c53.cjs.js');
|
|
5
6
|
var common = require('./common-7f948fa5.cjs.js');
|
|
6
7
|
var contexts = require('./contexts-6d0cb2b1.cjs.js');
|
|
7
|
-
var OptionsItemIdManager = require('./OptionsItemIdManager-cb3a2c53.cjs.js');
|
|
8
8
|
var registerButton = require('./registerButton.cjs.js');
|
|
9
9
|
var registerInput = require('./registerInput.cjs.js');
|
|
10
10
|
var registerLabel = require('./registerLabel.cjs.js');
|
|
11
|
-
var registerSection = require('./registerListBox-
|
|
11
|
+
var registerSection = require('./registerListBox-28474381.cjs.js');
|
|
12
12
|
var registerPopover = require('./registerPopover.cjs.js');
|
|
13
|
-
var variantUtils = require('./variant-utils-
|
|
13
|
+
var variantUtils = require('./variant-utils-1c84aebb.cjs.js');
|
|
14
14
|
require('@plasmicapp/host');
|
|
15
15
|
require('@plasmicapp/host/registerComponent');
|
|
16
16
|
require('react-aria');
|
|
@@ -70,7 +70,6 @@ function BaseComboBox(props) {
|
|
|
70
70
|
plasmicUpdateVariant,
|
|
71
71
|
__plasmic_selection_prop__,
|
|
72
72
|
plasmicNotifyAutoOpenedContent,
|
|
73
|
-
className,
|
|
74
73
|
isOpen: _isOpen
|
|
75
74
|
} = _a, rest = __objRest(_a, [
|
|
76
75
|
"children",
|
|
@@ -78,18 +77,8 @@ function BaseComboBox(props) {
|
|
|
78
77
|
"plasmicUpdateVariant",
|
|
79
78
|
"__plasmic_selection_prop__",
|
|
80
79
|
"plasmicNotifyAutoOpenedContent",
|
|
81
|
-
"className",
|
|
82
80
|
"isOpen"
|
|
83
81
|
]);
|
|
84
|
-
const classNameProp = React.useCallback(
|
|
85
|
-
({ isDisabled }) => {
|
|
86
|
-
plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
|
|
87
|
-
disabled: isDisabled
|
|
88
|
-
});
|
|
89
|
-
return className != null ? className : "";
|
|
90
|
-
},
|
|
91
|
-
[className, plasmicUpdateVariant]
|
|
92
|
-
);
|
|
93
82
|
const updateIds = React.useCallback(
|
|
94
83
|
(ids) => {
|
|
95
84
|
setControlContextData == null ? void 0 : setControlContextData({
|
|
@@ -99,7 +88,13 @@ function BaseComboBox(props) {
|
|
|
99
88
|
[setControlContextData]
|
|
100
89
|
);
|
|
101
90
|
const idManager = OptionsItemIdManager.useIdManager(updateIds);
|
|
102
|
-
return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ComboBox, __spreadProps(__spreadValues({
|
|
91
|
+
return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ComboBox, __spreadProps(__spreadValues({}, rest), { style: common.COMMON_STYLES }), ({ isDisabled }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
|
|
92
|
+
variantUtils.VariantUpdater,
|
|
93
|
+
{
|
|
94
|
+
changes: { disabled: isDisabled },
|
|
95
|
+
updateVariant: plasmicUpdateVariant
|
|
96
|
+
}
|
|
97
|
+
), /* @__PURE__ */ React__default.default.createElement(contexts.PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React__default.default.createElement(
|
|
103
98
|
contexts.PlasmicListBoxContext.Provider,
|
|
104
99
|
{
|
|
105
100
|
value: {
|
|
@@ -113,7 +108,7 @@ function BaseComboBox(props) {
|
|
|
113
108
|
plasmicNotifyAutoOpenedContent
|
|
114
109
|
}
|
|
115
110
|
), children)
|
|
116
|
-
)));
|
|
111
|
+
))));
|
|
117
112
|
}
|
|
118
113
|
function registerComboBox(loader) {
|
|
119
114
|
common.registerComponentHelper(loader, BaseComboBox, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerComboBox.cjs.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport {\n ComboBox,\n ComboBoxProps,\n ComboBoxRenderProps,\n ComboBoxStateContext,\n} from \"react-aria-components\";\nimport {\n arrowDown,\n COMMON_STYLES,\n createAriaLabelProp,\n createDisabledProp,\n createIdProp,\n createNameProp,\n} from \"./common\";\nimport {\n PlasmicInputContext,\n PlasmicListBoxContext,\n PlasmicPopoverTriggerContext,\n} from \"./contexts\";\nimport { useIdManager } from \"./OptionsItemIdManager\";\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 BaseControlContextDataForLists,\n HasControlContextData,\n makeComponentName,\n PlasmicCanvasProps,\n Registerable,\n registerComponentHelper,\n useAutoOpen,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nconst COMBOBOX_VARIANTS = [\"disabled\" as const];\n\nconst { variants: COMBOBOX_VARIANTS_DATA } =\n pickAriaComponentVariants(COMBOBOX_VARIANTS);\n\nexport interface BaseComboboxProps\n extends ComboBoxProps<{}>,\n PlasmicCanvasProps,\n WithVariants<typeof COMBOBOX_VARIANTS>,\n HasControlContextData<BaseControlContextDataForLists> {\n children?: React.ReactNode;\n isOpen?: boolean;\n className?: string;\n}\n\n/*\n This React Hook is used to help with auto-opening the combobox when the canvas component is selected.\n Currently, there is a bug in react-aria combobox (https://github.com/adobe/react-spectrum/issues/7149) where, when the combobox's popover is auto-opened, it is unable to render any listbox items.\n Setting popover's open state to true in not enough unless, unless it has previously been opened via user interaction with combobox.\n Also, <Combobox> does not support an `isOpen` prop either.\n\n So, we use this custom hook to access the combobox's internal state via ComboBoxStateContext and change the `open` state manually via tha available `open` method.\n\n Note: It cannot be used as a hook like useAutoOpen() within the BaseSelect component\n because it needs access to SelectStateContext, which is only created in the BaseSelect component's render function.\n */\nfunction ComboboxAutoOpen(props: PlasmicCanvasProps) {\n const { open, close } = React.useContext(ComboBoxStateContext) ?? {};\n\n useAutoOpen({ props, open, close });\n\n return null;\n}\n\nexport function BaseComboBox(props: BaseComboboxProps) {\n const {\n children,\n setControlContextData,\n plasmicUpdateVariant,\n __plasmic_selection_prop__,\n plasmicNotifyAutoOpenedContent,\n className,\n isOpen: _isOpen, // uncontrolled if not selected in canvas/edit mode\n ...rest\n } = props;\n\n const classNameProp = useCallback(\n ({ isDisabled }: ComboBoxRenderProps) => {\n plasmicUpdateVariant?.({\n disabled: isDisabled,\n });\n return className ?? \"\";\n },\n [className, plasmicUpdateVariant]\n );\n\n const updateIds = useCallback(\n (ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n },\n [setControlContextData]\n );\n\n const idManager = useIdManager(updateIds);\n\n return (\n <ComboBox className={classNameProp} {...rest} style={COMMON_STYLES}>\n {/* PlasmicPopoverTriggerContext is used by BasePopover */}\n <PlasmicPopoverTriggerContext.Provider value={true}>\n {/* PlasmicListBoxContext is used by\n - BaseListBox\n - BaseListBoxItem\n - BaseSection\n */}\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {/* PlasmicInputContext is used by BaseInput */}\n <PlasmicInputContext.Provider value={{ isUncontrolled: true }}>\n <ComboboxAutoOpen\n __plasmic_selection_prop__={__plasmic_selection_prop__}\n plasmicNotifyAutoOpenedContent={plasmicNotifyAutoOpenedContent}\n />\n {children}\n </PlasmicInputContext.Provider>\n </PlasmicListBoxContext.Provider>\n </PlasmicPopoverTriggerContext.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 variants: COMBOBOX_VARIANTS_DATA,\n props: {\n id: createIdProp(\"ComboBox\"),\n name: createNameProp(),\n isDisabled: createDisabledProp(\"ComboBox\"),\n \"aria-label\": createAriaLabelProp(\"ComboBox\"),\n selectedKey: {\n type: \"choice\",\n editOnly: true,\n uncontrolledProp: \"defaultSelectedKey\",\n displayName: \"Initial selected item\",\n options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n // React Aria ComboBox do not support multiple selections yet\n multiSelect: false,\n },\n disabledKeys: {\n type: \"choice\",\n displayName: \"Disabled values\",\n description:\n \"The items 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: \"selectedValue\", 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 styles: {\n padding: 0,\n },\n children: [\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n borderRightWidth: 0,\n },\n },\n {\n type: \"component\",\n name: BUTTON_COMPONENT_NAME,\n props: {\n children: arrowDown,\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 width: \"unset\",\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 selectedValue: {\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","pickAriaComponentVariants","ComboBoxStateContext","useAutoOpen","useCallback","useIdManager","React","ComboBox","COMMON_STYLES","PlasmicPopoverTriggerContext","PlasmicListBoxContext","PlasmicInputContext","registerComponentHelper","createIdProp","createNameProp","createDisabledProp","createAriaLabelProp","LABEL_COMPONENT_NAME","INPUT_COMPONENT_NAME","BUTTON_COMPONENT_NAME","arrowDown","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, { useCallback } from \"react\";\nimport {\n ComboBox,\n ComboBoxProps,\n ComboBoxStateContext,\n} from \"react-aria-components\";\nimport { useIdManager } from \"./OptionsItemIdManager\";\nimport {\n COMMON_STYLES,\n arrowDown,\n createAriaLabelProp,\n createDisabledProp,\n createIdProp,\n createNameProp,\n} from \"./common\";\nimport {\n PlasmicInputContext,\n PlasmicListBoxContext,\n PlasmicPopoverTriggerContext,\n} from \"./contexts\";\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 BaseControlContextDataForLists,\n HasControlContextData,\n PlasmicCanvasProps,\n Registerable,\n makeComponentName,\n registerComponentHelper,\n useAutoOpen,\n} from \"./utils\";\nimport {\n VariantUpdater,\n WithVariants,\n pickAriaComponentVariants,\n} from \"./variant-utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nconst COMBOBOX_VARIANTS = [\"disabled\" as const];\n\nconst { variants: COMBOBOX_VARIANTS_DATA } =\n pickAriaComponentVariants(COMBOBOX_VARIANTS);\n\nexport interface BaseComboboxProps\n extends ComboBoxProps<{}>,\n PlasmicCanvasProps,\n WithVariants<typeof COMBOBOX_VARIANTS>,\n HasControlContextData<BaseControlContextDataForLists> {\n children?: React.ReactNode;\n isOpen?: boolean;\n className?: string;\n}\n\n/*\n This React Hook is used to help with auto-opening the combobox when the canvas component is selected.\n Currently, there is a bug in react-aria combobox (https://github.com/adobe/react-spectrum/issues/7149) where, when the combobox's popover is auto-opened, it is unable to render any listbox items.\n Setting popover's open state to true in not enough unless, unless it has previously been opened via user interaction with combobox.\n Also, <Combobox> does not support an `isOpen` prop either.\n\n So, we use this custom hook to access the combobox's internal state via ComboBoxStateContext and change the `open` state manually via tha available `open` method.\n\n Note: It cannot be used as a hook like useAutoOpen() within the BaseSelect component\n because it needs access to SelectStateContext, which is only created in the BaseSelect component's render function.\n */\nfunction ComboboxAutoOpen(props: PlasmicCanvasProps) {\n const { open, close } = React.useContext(ComboBoxStateContext) ?? {};\n\n useAutoOpen({ props, open, close });\n\n return null;\n}\n\nexport function BaseComboBox(props: BaseComboboxProps) {\n const {\n children,\n setControlContextData,\n plasmicUpdateVariant,\n __plasmic_selection_prop__,\n plasmicNotifyAutoOpenedContent,\n isOpen: _isOpen, // uncontrolled if not selected in canvas/edit mode\n ...rest\n } = props;\n\n const updateIds = useCallback(\n (ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n },\n [setControlContextData]\n );\n\n const idManager = useIdManager(updateIds);\n\n return (\n <ComboBox {...rest} style={COMMON_STYLES}>\n {({ isDisabled }) => (\n <>\n <VariantUpdater\n changes={{ disabled: isDisabled }}\n updateVariant={plasmicUpdateVariant}\n />\n {/* PlasmicPopoverTriggerContext is used by BasePopover */}\n <PlasmicPopoverTriggerContext.Provider value={true}>\n {/* PlasmicListBoxContext is used by\n - BaseListBox\n - BaseListBoxItem\n - BaseSection\n */}\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {/* PlasmicInputContext is used by BaseInput */}\n <PlasmicInputContext.Provider value={{ isUncontrolled: true }}>\n <ComboboxAutoOpen\n __plasmic_selection_prop__={__plasmic_selection_prop__}\n plasmicNotifyAutoOpenedContent={\n plasmicNotifyAutoOpenedContent\n }\n />\n {children}\n </PlasmicInputContext.Provider>\n </PlasmicListBoxContext.Provider>\n </PlasmicPopoverTriggerContext.Provider>\n </>\n )}\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 variants: COMBOBOX_VARIANTS_DATA,\n props: {\n id: createIdProp(\"ComboBox\"),\n name: createNameProp(),\n isDisabled: createDisabledProp(\"ComboBox\"),\n \"aria-label\": createAriaLabelProp(\"ComboBox\"),\n selectedKey: {\n type: \"choice\",\n editOnly: true,\n uncontrolledProp: \"defaultSelectedKey\",\n displayName: \"Initial selected item\",\n options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n // React Aria ComboBox do not support multiple selections yet\n multiSelect: false,\n },\n disabledKeys: {\n type: \"choice\",\n displayName: \"Disabled values\",\n description:\n \"The items 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: \"selectedValue\", 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 styles: {\n padding: 0,\n },\n children: [\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n borderRightWidth: 0,\n },\n },\n {\n type: \"component\",\n name: BUTTON_COMPONENT_NAME,\n props: {\n children: arrowDown,\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 width: \"unset\",\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 selectedValue: {\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","pickAriaComponentVariants","ComboBoxStateContext","useAutoOpen","useCallback","useIdManager","React","ComboBox","COMMON_STYLES","VariantUpdater","PlasmicPopoverTriggerContext","PlasmicListBoxContext","PlasmicInputContext","registerComponentHelper","createIdProp","createNameProp","createDisabledProp","createAriaLabelProp","LABEL_COMPONENT_NAME","INPUT_COMPONENT_NAME","BUTTON_COMPONENT_NAME","arrowDown","POPOVER_COMPONENT_NAME","LIST_BOX_COMPONENT_NAME"],"mappings":"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"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
2
|
import { ComboBox, ComboBoxStateContext } from 'react-aria-components';
|
|
3
|
+
import { u as useIdManager } from './OptionsItemIdManager-0ce90944.esm.js';
|
|
3
4
|
import { r as registerComponentHelper, u as useAutoOpen, C as COMMON_STYLES, c as createIdProp, a as createNameProp, b as createDisabledProp, f as createAriaLabelProp, i as arrowDown, m as makeComponentName } from './common-81f08e86.esm.js';
|
|
4
5
|
import { a as PlasmicPopoverTriggerContext, b as PlasmicListBoxContext, c as PlasmicInputContext } from './contexts-5cb81c2f.esm.js';
|
|
5
|
-
import { u as useIdManager } from './OptionsItemIdManager-0ce90944.esm.js';
|
|
6
6
|
import { BUTTON_COMPONENT_NAME } from './registerButton.esm.js';
|
|
7
7
|
import { INPUT_COMPONENT_NAME } from './registerInput.esm.js';
|
|
8
8
|
import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
|
|
9
|
-
import { L as LIST_BOX_COMPONENT_NAME } from './registerListBox-
|
|
9
|
+
import { L as LIST_BOX_COMPONENT_NAME } from './registerListBox-7197abae.esm.js';
|
|
10
10
|
import { POPOVER_COMPONENT_NAME } from './registerPopover.esm.js';
|
|
11
|
-
import { p as pickAriaComponentVariants } from './variant-utils-
|
|
11
|
+
import { p as pickAriaComponentVariants, V as VariantUpdater } from './variant-utils-5f356d53.esm.js';
|
|
12
12
|
import '@plasmicapp/host';
|
|
13
13
|
import '@plasmicapp/host/registerComponent';
|
|
14
14
|
import 'react-aria';
|
|
@@ -64,7 +64,6 @@ function BaseComboBox(props) {
|
|
|
64
64
|
plasmicUpdateVariant,
|
|
65
65
|
__plasmic_selection_prop__,
|
|
66
66
|
plasmicNotifyAutoOpenedContent,
|
|
67
|
-
className,
|
|
68
67
|
isOpen: _isOpen
|
|
69
68
|
} = _a, rest = __objRest(_a, [
|
|
70
69
|
"children",
|
|
@@ -72,18 +71,8 @@ function BaseComboBox(props) {
|
|
|
72
71
|
"plasmicUpdateVariant",
|
|
73
72
|
"__plasmic_selection_prop__",
|
|
74
73
|
"plasmicNotifyAutoOpenedContent",
|
|
75
|
-
"className",
|
|
76
74
|
"isOpen"
|
|
77
75
|
]);
|
|
78
|
-
const classNameProp = useCallback(
|
|
79
|
-
({ isDisabled }) => {
|
|
80
|
-
plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
|
|
81
|
-
disabled: isDisabled
|
|
82
|
-
});
|
|
83
|
-
return className != null ? className : "";
|
|
84
|
-
},
|
|
85
|
-
[className, plasmicUpdateVariant]
|
|
86
|
-
);
|
|
87
76
|
const updateIds = useCallback(
|
|
88
77
|
(ids) => {
|
|
89
78
|
setControlContextData == null ? void 0 : setControlContextData({
|
|
@@ -93,7 +82,13 @@ function BaseComboBox(props) {
|
|
|
93
82
|
[setControlContextData]
|
|
94
83
|
);
|
|
95
84
|
const idManager = useIdManager(updateIds);
|
|
96
|
-
return /* @__PURE__ */ React.createElement(ComboBox, __spreadProps(__spreadValues({
|
|
85
|
+
return /* @__PURE__ */ React.createElement(ComboBox, __spreadProps(__spreadValues({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
86
|
+
VariantUpdater,
|
|
87
|
+
{
|
|
88
|
+
changes: { disabled: isDisabled },
|
|
89
|
+
updateVariant: plasmicUpdateVariant
|
|
90
|
+
}
|
|
91
|
+
), /* @__PURE__ */ React.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
|
|
97
92
|
PlasmicListBoxContext.Provider,
|
|
98
93
|
{
|
|
99
94
|
value: {
|
|
@@ -107,7 +102,7 @@ function BaseComboBox(props) {
|
|
|
107
102
|
plasmicNotifyAutoOpenedContent
|
|
108
103
|
}
|
|
109
104
|
), children)
|
|
110
|
-
)));
|
|
105
|
+
))));
|
|
111
106
|
}
|
|
112
107
|
function registerComboBox(loader) {
|
|
113
108
|
registerComponentHelper(loader, BaseComboBox, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerComboBox.esm.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport {\n ComboBox,\n ComboBoxProps,\n ComboBoxRenderProps,\n ComboBoxStateContext,\n} from \"react-aria-components\";\nimport {\n arrowDown,\n COMMON_STYLES,\n createAriaLabelProp,\n createDisabledProp,\n createIdProp,\n createNameProp,\n} from \"./common\";\nimport {\n PlasmicInputContext,\n PlasmicListBoxContext,\n PlasmicPopoverTriggerContext,\n} from \"./contexts\";\nimport { useIdManager } from \"./OptionsItemIdManager\";\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 BaseControlContextDataForLists,\n HasControlContextData,\n makeComponentName,\n PlasmicCanvasProps,\n Registerable,\n registerComponentHelper,\n useAutoOpen,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nconst COMBOBOX_VARIANTS = [\"disabled\" as const];\n\nconst { variants: COMBOBOX_VARIANTS_DATA } =\n pickAriaComponentVariants(COMBOBOX_VARIANTS);\n\nexport interface BaseComboboxProps\n extends ComboBoxProps<{}>,\n PlasmicCanvasProps,\n WithVariants<typeof COMBOBOX_VARIANTS>,\n HasControlContextData<BaseControlContextDataForLists> {\n children?: React.ReactNode;\n isOpen?: boolean;\n className?: string;\n}\n\n/*\n This React Hook is used to help with auto-opening the combobox when the canvas component is selected.\n Currently, there is a bug in react-aria combobox (https://github.com/adobe/react-spectrum/issues/7149) where, when the combobox's popover is auto-opened, it is unable to render any listbox items.\n Setting popover's open state to true in not enough unless, unless it has previously been opened via user interaction with combobox.\n Also, <Combobox> does not support an `isOpen` prop either.\n\n So, we use this custom hook to access the combobox's internal state via ComboBoxStateContext and change the `open` state manually via tha available `open` method.\n\n Note: It cannot be used as a hook like useAutoOpen() within the BaseSelect component\n because it needs access to SelectStateContext, which is only created in the BaseSelect component's render function.\n */\nfunction ComboboxAutoOpen(props: PlasmicCanvasProps) {\n const { open, close } = React.useContext(ComboBoxStateContext) ?? {};\n\n useAutoOpen({ props, open, close });\n\n return null;\n}\n\nexport function BaseComboBox(props: BaseComboboxProps) {\n const {\n children,\n setControlContextData,\n plasmicUpdateVariant,\n __plasmic_selection_prop__,\n plasmicNotifyAutoOpenedContent,\n className,\n isOpen: _isOpen, // uncontrolled if not selected in canvas/edit mode\n ...rest\n } = props;\n\n const classNameProp = useCallback(\n ({ isDisabled }: ComboBoxRenderProps) => {\n plasmicUpdateVariant?.({\n disabled: isDisabled,\n });\n return className ?? \"\";\n },\n [className, plasmicUpdateVariant]\n );\n\n const updateIds = useCallback(\n (ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n },\n [setControlContextData]\n );\n\n const idManager = useIdManager(updateIds);\n\n return (\n <ComboBox className={classNameProp} {...rest} style={COMMON_STYLES}>\n {/* PlasmicPopoverTriggerContext is used by BasePopover */}\n <PlasmicPopoverTriggerContext.Provider value={true}>\n {/* PlasmicListBoxContext is used by\n - BaseListBox\n - BaseListBoxItem\n - BaseSection\n */}\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {/* PlasmicInputContext is used by BaseInput */}\n <PlasmicInputContext.Provider value={{ isUncontrolled: true }}>\n <ComboboxAutoOpen\n __plasmic_selection_prop__={__plasmic_selection_prop__}\n plasmicNotifyAutoOpenedContent={plasmicNotifyAutoOpenedContent}\n />\n {children}\n </PlasmicInputContext.Provider>\n </PlasmicListBoxContext.Provider>\n </PlasmicPopoverTriggerContext.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 variants: COMBOBOX_VARIANTS_DATA,\n props: {\n id: createIdProp(\"ComboBox\"),\n name: createNameProp(),\n isDisabled: createDisabledProp(\"ComboBox\"),\n \"aria-label\": createAriaLabelProp(\"ComboBox\"),\n selectedKey: {\n type: \"choice\",\n editOnly: true,\n uncontrolledProp: \"defaultSelectedKey\",\n displayName: \"Initial selected item\",\n options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n // React Aria ComboBox do not support multiple selections yet\n multiSelect: false,\n },\n disabledKeys: {\n type: \"choice\",\n displayName: \"Disabled values\",\n description:\n \"The items 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: \"selectedValue\", 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 styles: {\n padding: 0,\n },\n children: [\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n borderRightWidth: 0,\n },\n },\n {\n type: \"component\",\n name: BUTTON_COMPONENT_NAME,\n props: {\n children: arrowDown,\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 width: \"unset\",\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 selectedValue: {\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, { useCallback } from \"react\";\nimport {\n ComboBox,\n ComboBoxProps,\n ComboBoxStateContext,\n} from \"react-aria-components\";\nimport { useIdManager } from \"./OptionsItemIdManager\";\nimport {\n COMMON_STYLES,\n arrowDown,\n createAriaLabelProp,\n createDisabledProp,\n createIdProp,\n createNameProp,\n} from \"./common\";\nimport {\n PlasmicInputContext,\n PlasmicListBoxContext,\n PlasmicPopoverTriggerContext,\n} from \"./contexts\";\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 BaseControlContextDataForLists,\n HasControlContextData,\n PlasmicCanvasProps,\n Registerable,\n makeComponentName,\n registerComponentHelper,\n useAutoOpen,\n} from \"./utils\";\nimport {\n VariantUpdater,\n WithVariants,\n pickAriaComponentVariants,\n} from \"./variant-utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nconst COMBOBOX_VARIANTS = [\"disabled\" as const];\n\nconst { variants: COMBOBOX_VARIANTS_DATA } =\n pickAriaComponentVariants(COMBOBOX_VARIANTS);\n\nexport interface BaseComboboxProps\n extends ComboBoxProps<{}>,\n PlasmicCanvasProps,\n WithVariants<typeof COMBOBOX_VARIANTS>,\n HasControlContextData<BaseControlContextDataForLists> {\n children?: React.ReactNode;\n isOpen?: boolean;\n className?: string;\n}\n\n/*\n This React Hook is used to help with auto-opening the combobox when the canvas component is selected.\n Currently, there is a bug in react-aria combobox (https://github.com/adobe/react-spectrum/issues/7149) where, when the combobox's popover is auto-opened, it is unable to render any listbox items.\n Setting popover's open state to true in not enough unless, unless it has previously been opened via user interaction with combobox.\n Also, <Combobox> does not support an `isOpen` prop either.\n\n So, we use this custom hook to access the combobox's internal state via ComboBoxStateContext and change the `open` state manually via tha available `open` method.\n\n Note: It cannot be used as a hook like useAutoOpen() within the BaseSelect component\n because it needs access to SelectStateContext, which is only created in the BaseSelect component's render function.\n */\nfunction ComboboxAutoOpen(props: PlasmicCanvasProps) {\n const { open, close } = React.useContext(ComboBoxStateContext) ?? {};\n\n useAutoOpen({ props, open, close });\n\n return null;\n}\n\nexport function BaseComboBox(props: BaseComboboxProps) {\n const {\n children,\n setControlContextData,\n plasmicUpdateVariant,\n __plasmic_selection_prop__,\n plasmicNotifyAutoOpenedContent,\n isOpen: _isOpen, // uncontrolled if not selected in canvas/edit mode\n ...rest\n } = props;\n\n const updateIds = useCallback(\n (ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n },\n [setControlContextData]\n );\n\n const idManager = useIdManager(updateIds);\n\n return (\n <ComboBox {...rest} style={COMMON_STYLES}>\n {({ isDisabled }) => (\n <>\n <VariantUpdater\n changes={{ disabled: isDisabled }}\n updateVariant={plasmicUpdateVariant}\n />\n {/* PlasmicPopoverTriggerContext is used by BasePopover */}\n <PlasmicPopoverTriggerContext.Provider value={true}>\n {/* PlasmicListBoxContext is used by\n - BaseListBox\n - BaseListBoxItem\n - BaseSection\n */}\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {/* PlasmicInputContext is used by BaseInput */}\n <PlasmicInputContext.Provider value={{ isUncontrolled: true }}>\n <ComboboxAutoOpen\n __plasmic_selection_prop__={__plasmic_selection_prop__}\n plasmicNotifyAutoOpenedContent={\n plasmicNotifyAutoOpenedContent\n }\n />\n {children}\n </PlasmicInputContext.Provider>\n </PlasmicListBoxContext.Provider>\n </PlasmicPopoverTriggerContext.Provider>\n </>\n )}\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 variants: COMBOBOX_VARIANTS_DATA,\n props: {\n id: createIdProp(\"ComboBox\"),\n name: createNameProp(),\n isDisabled: createDisabledProp(\"ComboBox\"),\n \"aria-label\": createAriaLabelProp(\"ComboBox\"),\n selectedKey: {\n type: \"choice\",\n editOnly: true,\n uncontrolledProp: \"defaultSelectedKey\",\n displayName: \"Initial selected item\",\n options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n // React Aria ComboBox do not support multiple selections yet\n multiSelect: false,\n },\n disabledKeys: {\n type: \"choice\",\n displayName: \"Disabled values\",\n description:\n \"The items 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: \"selectedValue\", 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 styles: {\n padding: 0,\n },\n children: [\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n borderRightWidth: 0,\n },\n },\n {\n type: \"component\",\n name: BUTTON_COMPONENT_NAME,\n props: {\n children: arrowDown,\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 width: \"unset\",\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 selectedValue: {\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,aAAA,GAAgB,kBAAkB,UAAU,CAAA,CAAA;AAElD,MAAM,iBAAA,GAAoB,CAAC,UAAmB,CAAA,CAAA;AAE9C,MAAM,EAAE,QAAA,EAAU,sBAAuB,EAAA,GACvC,0BAA0B,iBAAiB,CAAA,CAAA;AAuB7C,SAAS,iBAAiB,KAA2B,EAAA;AApErD,EAAA,IAAA,EAAA,CAAA;AAqEE,EAAM,MAAA,EAAE,MAAM,KAAM,EAAA,GAAA,CAAI,WAAM,UAAW,CAAA,oBAAoB,CAArC,KAAA,IAAA,GAAA,EAAA,GAA0C,EAAC,CAAA;AAEnE,EAAA,WAAA,CAAY,EAAE,KAAA,EAAO,IAAM,EAAA,KAAA,EAAO,CAAA,CAAA;AAElC,EAAO,OAAA,IAAA,CAAA;AACT,CAAA;AAEO,SAAS,aAAa,KAA0B,EAAA;AACrD,EAAA,MAQI,EAPF,GAAA,KAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,oBAAA;AAAA,IACA,0BAAA;AAAA,IACA,8BAAA;AAAA,IACA,MAAQ,EAAA,OAAA;AAAA,GAnFZ,GAqFM,EADC,EAAA,IAAA,GAAA,SAAA,CACD,EADC,EAAA;AAAA,IANH,UAAA;AAAA,IACA,uBAAA;AAAA,IACA,sBAAA;AAAA,IACA,4BAAA;AAAA,IACA,gCAAA;AAAA,IACA,QAAA;AAAA,GAAA,CAAA,CAAA;AAIF,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,GAAkB,KAAA;AACjB,MAAwB,qBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,qBAAA,CAAA;AAAA,QACtB,OAAS,EAAA,GAAA;AAAA,OACX,CAAA,CAAA;AAAA,KACF;AAAA,IACA,CAAC,qBAAqB,CAAA;AAAA,GACxB,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,aAAa,SAAS,CAAA,CAAA;AAExC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAa,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAA,IAAA,CAAA,EAAb,EAAmB,KAAA,EAAO,kBACxB,CAAC,EAAE,UAAW,EAAA,qBAEX,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,EAAE,QAAA,EAAU,UAAW,EAAA;AAAA,MAChC,aAAe,EAAA,oBAAA;AAAA,KAAA;AAAA,qBAGhB,KAAA,CAAA,aAAA,CAAA,4BAAA,CAA6B,QAA7B,EAAA,EAAsC,OAAO,IAM5C,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,qBAAsB,CAAA,QAAA;AAAA,IAAtB;AAAA,MACC,KAAO,EAAA;AAAA,QACL,SAAA;AAAA,OACF;AAAA,KAAA;AAAA,oBAGA,KAAA,CAAA,aAAA,CAAC,oBAAoB,QAApB,EAAA,EAA6B,OAAO,EAAE,cAAA,EAAgB,MACrD,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,0BAAA;AAAA,QACA,8BAAA;AAAA,OAAA;AAAA,OAID,QACH,CAAA;AAAA,GAEJ,CACF,CAEJ,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,iBAAiB,MAAuB,EAAA;AACtD,EAAA,uBAAA,CAAwB,QAAQ,YAAc,EAAA;AAAA,IAC5C,IAAM,EAAA,aAAA;AAAA,IACN,WAAa,EAAA,eAAA;AAAA,IACb,UAAY,EAAA,iDAAA;AAAA,IACZ,UAAY,EAAA,cAAA;AAAA,IACZ,QAAU,EAAA,sBAAA;AAAA,IACV,KAAO,EAAA;AAAA,MACL,EAAA,EAAI,aAAa,UAAU,CAAA;AAAA,MAC3B,MAAM,cAAe,EAAA;AAAA,MACrB,UAAA,EAAY,mBAAmB,UAAU,CAAA;AAAA,MACzC,YAAA,EAAc,oBAAoB,UAAU,CAAA;AAAA,MAC5C,WAAa,EAAA;AAAA,QACX,IAAM,EAAA,QAAA;AAAA,QACN,QAAU,EAAA,IAAA;AAAA,QACV,gBAAkB,EAAA,oBAAA;AAAA,QAClB,WAAa,EAAA,uBAAA;AAAA,QACb,OAAA,EAAS,CAAC,MAAA,EAAQ,GAAS,KAAA,CAAA,GAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAK,OAAU,IAAA,KAAA,CAAM,IAAK,CAAA,GAAA,CAAI,OAAO,CAAA,GAAI,EAAC;AAAA;AAAA,QAErE,WAAa,EAAA,KAAA;AAAA,OACf;AAAA,MACA,YAAc,EAAA;AAAA,QACZ,IAAM,EAAA,QAAA;AAAA,QACN,WAAa,EAAA,iBAAA;AAAA,QACb,WACE,EAAA,qGAAA;AAAA,QACF,OAAA,EAAS,CAAC,MAAA,EAAQ,GAAS,KAAA,CAAA,GAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAK,OAAU,IAAA,KAAA,CAAM,IAAK,CAAA,GAAA,CAAI,OAAO,CAAA,GAAI,EAAC;AAAA,QACrE,WAAa,EAAA,IAAA;AAAA,QACb,QAAU,EAAA,IAAA;AAAA,OACZ;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,IAAM,EAAA,SAAA;AAAA,QACN,YAAc,EAAA,KAAA;AAAA;AAAA,QAEd,QAAQ,MAAM,IAAA;AAAA,OAChB;AAAA,MACA,iBAAmB,EAAA;AAAA,QACjB,IAAM,EAAA,cAAA;AAAA,QACN,UAAU,CAAC,EAAE,MAAM,eAAiB,EAAA,IAAA,EAAM,UAAU,CAAA;AAAA,OACtD;AAAA,MACA,YAAc,EAAA;AAAA,QACZ,IAAM,EAAA,cAAA;AAAA,QACN,UAAU,CAAC,EAAE,MAAM,QAAU,EAAA,IAAA,EAAM,WAAW,CAAA;AAAA,OAChD;AAAA,MAEA,QAAU,EAAA;AAAA,QACR,IAAM,EAAA,MAAA;AAAA,QACN,YAAc,EAAA;AAAA,UACZ;AAAA,YACE,IAAM,EAAA,MAAA;AAAA,YACN,MAAQ,EAAA;AAAA,cACN,cAAgB,EAAA,YAAA;AAAA,cAChB,UAAY,EAAA,YAAA;AAAA,cACZ,KAAO,EAAA,OAAA;AAAA,cACP,OAAS,EAAA,CAAA;AAAA,aACX;AAAA,YACA,QAAU,EAAA;AAAA,cACR;AAAA,gBACE,IAAM,EAAA,WAAA;AAAA,gBACN,IAAM,EAAA,oBAAA;AAAA,gBACN,KAAO,EAAA;AAAA,kBACL,QAAU,EAAA;AAAA,oBACR,IAAM,EAAA,MAAA;AAAA,oBACN,KAAO,EAAA,OAAA;AAAA,mBACT;AAAA,iBACF;AAAA,eACF;AAAA,cACA;AAAA,gBACE,IAAM,EAAA,MAAA;AAAA,gBACN,MAAQ,EAAA;AAAA,kBACN,OAAS,EAAA,CAAA;AAAA,iBACX;AAAA,gBACA,QAAU,EAAA;AAAA,kBACR;AAAA,oBACE,IAAM,EAAA,WAAA;AAAA,oBACN,IAAM,EAAA,oBAAA;AAAA,oBACN,MAAQ,EAAA;AAAA,sBACN,KAAO,EAAA,MAAA;AAAA,sBACP,gBAAkB,EAAA,CAAA;AAAA,qBACpB;AAAA,mBACF;AAAA,kBACA;AAAA,oBACE,IAAM,EAAA,WAAA;AAAA,oBACN,IAAM,EAAA,qBAAA;AAAA,oBACN,KAAO,EAAA;AAAA,sBACL,QAAU,EAAA,SAAA;AAAA,qBACZ;AAAA,mBACF;AAAA,iBACF;AAAA,eACF;AAAA,cACA;AAAA,gBACE,IAAM,EAAA,WAAA;AAAA,gBACN,IAAM,EAAA,sBAAA;AAAA,gBACN,MAAQ,EAAA;AAAA,kBACN,eAAiB,EAAA,OAAA;AAAA,kBACjB,OAAS,EAAA,MAAA;AAAA,kBACT,QAAU,EAAA,QAAA;AAAA,kBACV,KAAO,EAAA,OAAA;AAAA,iBACT;AAAA,gBACA,KAAO,EAAA;AAAA,kBACL,MAAQ,EAAA,CAAA;AAAA,kBACR,QAAU,EAAA;AAAA,oBACR;AAAA,sBACE,IAAM,EAAA,WAAA;AAAA,sBACN,IAAM,EAAA,uBAAA;AAAA,sBACN,KAAO,EAAA;AAAA,wBACL,aAAe,EAAA,QAAA;AAAA,uBACjB;AAAA,sBACA,MAAQ,EAAA;AAAA,wBACN,WAAa,EAAA,CAAA;AAAA,wBACb,KAAO,EAAA,SAAA;AAAA,uBACT;AAAA,qBACF;AAAA,mBACF;AAAA,iBACF;AAAA,eACF;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,aAAe,EAAA;AAAA,QACb,IAAM,EAAA,UAAA;AAAA,QACN,SAAW,EAAA,aAAA;AAAA,QACX,YAAc,EAAA,mBAAA;AAAA,QACd,YAAc,EAAA,MAAA;AAAA,OAChB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,IAAM,EAAA,UAAA;AAAA,QACN,SAAW,EAAA,QAAA;AAAA,QACX,YAAc,EAAA,cAAA;AAAA,QACd,YAAc,EAAA,SAAA;AAAA,OAChB;AAAA,KACF;AAAA,IACA,UAAY,EAAA,IAAA;AAAA,GACb,CAAA,CAAA;AACH;;;;"}
|
|
@@ -10,7 +10,7 @@ var registerDialog = require('./registerDialog.cjs.js');
|
|
|
10
10
|
var registerModal = require('./registerModal.cjs.js');
|
|
11
11
|
require('@plasmicapp/host');
|
|
12
12
|
require('@plasmicapp/host/registerComponent');
|
|
13
|
-
require('./variant-utils-
|
|
13
|
+
require('./variant-utils-1c84aebb.cjs.js');
|
|
14
14
|
|
|
15
15
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
16
|
|
|
@@ -8,7 +8,7 @@ import { DIALOG_COMPONENT_NAME } from './registerDialog.esm.js';
|
|
|
8
8
|
import { MODAL_COMPONENT_NAME, MODAL_DEFAULT_SLOT_CONTENT } from './registerModal.esm.js';
|
|
9
9
|
import '@plasmicapp/host';
|
|
10
10
|
import '@plasmicapp/host/registerComponent';
|
|
11
|
-
import './variant-utils-
|
|
11
|
+
import './variant-utils-5f356d53.esm.js';
|
|
12
12
|
|
|
13
13
|
var __defProp = Object.defineProperty;
|
|
14
14
|
var __defProps = Object.defineProperties;
|
|
@@ -5,7 +5,7 @@ var reactAria = require('react-aria');
|
|
|
5
5
|
var reactAriaComponents = require('react-aria-components');
|
|
6
6
|
var common = require('./common-7f948fa5.cjs.js');
|
|
7
7
|
var contexts = require('./contexts-6d0cb2b1.cjs.js');
|
|
8
|
-
var variantUtils = require('./variant-utils-
|
|
8
|
+
var variantUtils = require('./variant-utils-1c84aebb.cjs.js');
|
|
9
9
|
require('@plasmicapp/host');
|
|
10
10
|
require('@plasmicapp/host/registerComponent');
|
|
11
11
|
|
|
@@ -3,7 +3,7 @@ import { useHover, useFocusRing, mergeProps } from 'react-aria';
|
|
|
3
3
|
import { useContextProps, InputContext } from 'react-aria-components';
|
|
4
4
|
import { q as filterHoverProps, C as COMMON_STYLES, p as isDefined, z as resolveAutoComplete, m as makeComponentName, r as registerComponentHelper, s as commonInputEventHandlerProps, c as createIdProp, a as createNameProp, t as createPlaceholderProp, v as createInitialValueProp, A as createInputTypeProp, g as createAutoFocusProp, b as createDisabledProp, d as createReadOnlyProp, e as createRequiredProp, D as createPatternProp, y as createInputModeProp, B as createAutoCompleteProp, w as createMaxLengthProp, x as createMinLengthProp, f as createAriaLabelProp } from './common-81f08e86.esm.js';
|
|
5
5
|
import { g as PlasmicTextFieldContext, c as PlasmicInputContext } from './contexts-5cb81c2f.esm.js';
|
|
6
|
-
import { p as pickAriaComponentVariants } from './variant-utils-
|
|
6
|
+
import { p as pickAriaComponentVariants } from './variant-utils-5f356d53.esm.js';
|
|
7
7
|
import '@plasmicapp/host';
|
|
8
8
|
import '@plasmicapp/host/registerComponent';
|
|
9
9
|
|