@plasmicpkgs/react-aria 0.0.64 → 0.0.66
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 +325 -223
- package/dist/react-aria.esm.js.map +1 -1
- package/dist/react-aria.js +323 -221
- package/dist/react-aria.js.map +1 -1
- package/dist/registerButton.d.ts +1 -1
- package/dist/registerTooltip.d.ts +4 -1
- package/dist/variant-utils.d.ts +16 -0
- package/package.json +2 -2
- package/skinny/registerButton.cjs.js +18 -17
- package/skinny/registerButton.cjs.js.map +1 -1
- package/skinny/registerButton.d.ts +1 -1
- package/skinny/registerButton.esm.js +19 -17
- package/skinny/registerButton.esm.js.map +1 -1
- package/skinny/registerCheckbox.cjs.js +1 -1
- package/skinny/registerCheckbox.esm.js +1 -1
- package/skinny/registerCheckboxGroup.cjs.js +1 -1
- package/skinny/registerCheckboxGroup.esm.js +1 -1
- package/skinny/registerComboBox.cjs.js +1 -1
- package/skinny/registerComboBox.esm.js +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.cjs.js +1 -1
- package/skinny/registerListBox.esm.js +1 -1
- package/skinny/registerListBoxItem.cjs.js +5 -3
- package/skinny/registerListBoxItem.cjs.js.map +1 -1
- package/skinny/registerListBoxItem.esm.js +5 -3
- package/skinny/registerListBoxItem.esm.js.map +1 -1
- package/skinny/registerModal.cjs.js +14 -3
- package/skinny/registerModal.cjs.js.map +1 -1
- package/skinny/registerModal.esm.js +14 -3
- package/skinny/registerModal.esm.js.map +1 -1
- package/skinny/registerRadio.cjs.js +1 -1
- package/skinny/registerRadio.esm.js +1 -1
- package/skinny/registerRadioGroup.cjs.js +1 -1
- package/skinny/registerRadioGroup.esm.js +1 -1
- package/skinny/registerSelect.cjs.js +1 -1
- package/skinny/registerSelect.esm.js +1 -1
- package/skinny/registerSlider.cjs.js +1 -1
- package/skinny/registerSlider.esm.js +1 -1
- package/skinny/registerSliderOutput.cjs.js +1 -1
- package/skinny/registerSliderOutput.esm.js +1 -1
- package/skinny/registerSliderThumb.cjs.js +1 -1
- package/skinny/registerSliderThumb.esm.js +1 -1
- package/skinny/registerSliderTrack.cjs.js +1 -1
- package/skinny/registerSliderTrack.esm.js +1 -1
- package/skinny/registerSwitch.cjs.js +1 -1
- package/skinny/registerSwitch.esm.js +1 -1
- package/skinny/registerTextArea.cjs.js +1 -1
- package/skinny/registerTextArea.esm.js +1 -1
- package/skinny/registerTextField.cjs.js +1 -1
- package/skinny/registerTextField.esm.js +1 -1
- package/skinny/registerTooltip.cjs.js +118 -46
- package/skinny/registerTooltip.cjs.js.map +1 -1
- package/skinny/registerTooltip.d.ts +4 -1
- package/skinny/registerTooltip.esm.js +117 -45
- package/skinny/registerTooltip.esm.js.map +1 -1
- package/skinny/{variant-utils-23360776.esm.js → variant-utils-5f90385f.esm.js} +17 -1
- package/skinny/variant-utils-5f90385f.esm.js.map +1 -0
- package/skinny/{variant-utils-db5b9590.cjs.js → variant-utils-6c6ef452.cjs.js} +17 -1
- package/skinny/variant-utils-6c6ef452.cjs.js.map +1 -0
- package/skinny/variant-utils.d.ts +16 -0
- package/skinny/variant-utils-23360776.esm.js.map +0 -1
- package/skinny/variant-utils-db5b9590.cjs.js.map +0 -1
package/dist/registerButton.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ interface BaseButtonProps extends ButtonProps, WithVariants<typeof BUTTON_VARIAN
|
|
|
8
8
|
resetsForm?: boolean;
|
|
9
9
|
submitsForm?: boolean;
|
|
10
10
|
}
|
|
11
|
-
|
|
11
|
+
declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
12
12
|
export declare const BUTTON_COMPONENT_NAME: string;
|
|
13
13
|
export declare function registerButton(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseButton>): void;
|
|
14
14
|
export {};
|
|
@@ -2,7 +2,9 @@ import React from "react";
|
|
|
2
2
|
import { TooltipProps } from "react-aria-components";
|
|
3
3
|
import { TooltipTriggerProps } from "react-stately";
|
|
4
4
|
import { CodeComponentMetaOverrides, Registerable } from "./utils";
|
|
5
|
-
|
|
5
|
+
import { WithVariants } from "./variant-utils";
|
|
6
|
+
declare const TOOLTIP_VARIANTS: ("placementLeft" | "placementRight" | "placementTop" | "placementBottom")[];
|
|
7
|
+
export interface BaseTooltipProps extends TooltipTriggerProps, TooltipProps, WithVariants<typeof TOOLTIP_VARIANTS> {
|
|
6
8
|
children?: React.ReactElement<HTMLElement>;
|
|
7
9
|
tooltipContent?: React.ReactElement;
|
|
8
10
|
resetClassName?: string;
|
|
@@ -10,3 +12,4 @@ export interface BaseTooltipProps extends TooltipTriggerProps, TooltipProps {
|
|
|
10
12
|
}
|
|
11
13
|
export declare function BaseTooltip(props: BaseTooltipProps): React.JSX.Element;
|
|
12
14
|
export declare function registerTooltip(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseTooltip>): void;
|
|
15
|
+
export {};
|
package/dist/variant-utils.d.ts
CHANGED
|
@@ -37,6 +37,22 @@ declare const ARIA_COMPONENTS_VARIANTS: {
|
|
|
37
37
|
cssSelector: string;
|
|
38
38
|
displayName: string;
|
|
39
39
|
};
|
|
40
|
+
placementLeft: {
|
|
41
|
+
cssSelector: string;
|
|
42
|
+
displayName: string;
|
|
43
|
+
};
|
|
44
|
+
placementRight: {
|
|
45
|
+
cssSelector: string;
|
|
46
|
+
displayName: string;
|
|
47
|
+
};
|
|
48
|
+
placementTop: {
|
|
49
|
+
cssSelector: string;
|
|
50
|
+
displayName: string;
|
|
51
|
+
};
|
|
52
|
+
placementBottom: {
|
|
53
|
+
cssSelector: string;
|
|
54
|
+
displayName: string;
|
|
55
|
+
};
|
|
40
56
|
};
|
|
41
57
|
type AriaVariant = keyof typeof ARIA_COMPONENTS_VARIANTS;
|
|
42
58
|
type CodeComponentVariantsMeta = NonNullable<CodeComponentMeta<unknown>["variants"]>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plasmicpkgs/react-aria",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.66",
|
|
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": "ed5d3b977ba471111c143c1f21da60c489bf4454"
|
|
78
78
|
}
|
|
@@ -4,7 +4,7 @@ var React = require('react');
|
|
|
4
4
|
var reactAriaComponents = require('react-aria-components');
|
|
5
5
|
var common = require('./common-2e984ab4.cjs.js');
|
|
6
6
|
var utils = require('./utils-8dbb4d1f.cjs.js');
|
|
7
|
-
var variantUtils = require('./variant-utils-
|
|
7
|
+
var variantUtils = require('./variant-utils-6c6ef452.cjs.js');
|
|
8
8
|
require('@plasmicapp/host/registerComponent');
|
|
9
9
|
|
|
10
10
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -50,21 +50,23 @@ const BUTTON_VARIANTS = [
|
|
|
50
50
|
"disabled"
|
|
51
51
|
];
|
|
52
52
|
const { variants, withObservedValues } = variantUtils.pickAriaComponentVariants(BUTTON_VARIANTS);
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
53
|
+
const BaseButton = React__default.default.forwardRef(
|
|
54
|
+
(props, ref) => {
|
|
55
|
+
const _a = props, { submitsForm, resetsForm, children, plasmicUpdateVariant } = _a, rest = __objRest(_a, ["submitsForm", "resetsForm", "children", "plasmicUpdateVariant"]);
|
|
56
|
+
const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
|
|
57
|
+
return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues({ type, ref }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues(
|
|
58
|
+
children,
|
|
59
|
+
{
|
|
60
|
+
hovered: isHovered,
|
|
61
|
+
pressed: isPressed,
|
|
62
|
+
focused: isFocused,
|
|
63
|
+
focusVisible: isFocusVisible,
|
|
64
|
+
disabled: isDisabled
|
|
65
|
+
},
|
|
66
|
+
plasmicUpdateVariant
|
|
67
|
+
));
|
|
68
|
+
}
|
|
69
|
+
);
|
|
68
70
|
const BUTTON_COMPONENT_NAME = utils.makeComponentName("button");
|
|
69
71
|
function registerButton(loader, overrides) {
|
|
70
72
|
utils.registerComponentHelper(
|
|
@@ -124,6 +126,5 @@ function registerButton(loader, overrides) {
|
|
|
124
126
|
}
|
|
125
127
|
|
|
126
128
|
exports.BUTTON_COMPONENT_NAME = BUTTON_COMPONENT_NAME;
|
|
127
|
-
exports.BaseButton = BaseButton;
|
|
128
129
|
exports.registerButton = registerButton;
|
|
129
130
|
//# sourceMappingURL=registerButton.cjs.js.map
|
|
@@ -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\
|
|
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\nconst BaseButton = React.forwardRef(\n (props: BaseButtonProps, ref: React.Ref<HTMLButtonElement>) => {\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} ref={ref} {...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);\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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"}
|
|
@@ -8,7 +8,7 @@ interface BaseButtonProps extends ButtonProps, WithVariants<typeof BUTTON_VARIAN
|
|
|
8
8
|
resetsForm?: boolean;
|
|
9
9
|
submitsForm?: boolean;
|
|
10
10
|
}
|
|
11
|
-
|
|
11
|
+
declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
12
12
|
export declare const BUTTON_COMPONENT_NAME: string;
|
|
13
13
|
export declare function registerButton(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseButton>): void;
|
|
14
14
|
export {};
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { Button } from 'react-aria-components';
|
|
3
3
|
import { g as getCommonProps } from './common-0c4336fe.esm.js';
|
|
4
4
|
import { a as makeComponentName, r as registerComponentHelper } from './utils-c7662a47.esm.js';
|
|
5
|
-
import { p as pickAriaComponentVariants } from './variant-utils-
|
|
5
|
+
import { p as pickAriaComponentVariants } from './variant-utils-5f90385f.esm.js';
|
|
6
6
|
import '@plasmicapp/host/registerComponent';
|
|
7
7
|
|
|
8
8
|
var __defProp = Object.defineProperty;
|
|
@@ -44,21 +44,23 @@ const BUTTON_VARIANTS = [
|
|
|
44
44
|
"disabled"
|
|
45
45
|
];
|
|
46
46
|
const { variants, withObservedValues } = pickAriaComponentVariants(BUTTON_VARIANTS);
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
47
|
+
const BaseButton = React.forwardRef(
|
|
48
|
+
(props, ref) => {
|
|
49
|
+
const _a = props, { submitsForm, resetsForm, children, plasmicUpdateVariant } = _a, rest = __objRest(_a, ["submitsForm", "resetsForm", "children", "plasmicUpdateVariant"]);
|
|
50
|
+
const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
|
|
51
|
+
return /* @__PURE__ */ React.createElement(Button, __spreadValues({ type, ref }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues(
|
|
52
|
+
children,
|
|
53
|
+
{
|
|
54
|
+
hovered: isHovered,
|
|
55
|
+
pressed: isPressed,
|
|
56
|
+
focused: isFocused,
|
|
57
|
+
focusVisible: isFocusVisible,
|
|
58
|
+
disabled: isDisabled
|
|
59
|
+
},
|
|
60
|
+
plasmicUpdateVariant
|
|
61
|
+
));
|
|
62
|
+
}
|
|
63
|
+
);
|
|
62
64
|
const BUTTON_COMPONENT_NAME = makeComponentName("button");
|
|
63
65
|
function registerButton(loader, overrides) {
|
|
64
66
|
registerComponentHelper(
|
|
@@ -117,5 +119,5 @@ function registerButton(loader, overrides) {
|
|
|
117
119
|
);
|
|
118
120
|
}
|
|
119
121
|
|
|
120
|
-
export { BUTTON_COMPONENT_NAME,
|
|
122
|
+
export { BUTTON_COMPONENT_NAME, registerButton };
|
|
121
123
|
//# sourceMappingURL=registerButton.esm.js.map
|
|
@@ -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\
|
|
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\nconst BaseButton = React.forwardRef(\n (props: BaseButtonProps, ref: React.Ref<HTMLButtonElement>) => {\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} ref={ref} {...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);\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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"}
|
|
@@ -5,7 +5,7 @@ var reactAriaComponents = require('react-aria-components');
|
|
|
5
5
|
var common = require('./common-2e984ab4.cjs.js');
|
|
6
6
|
var contexts = require('./contexts-baa37b74.cjs.js');
|
|
7
7
|
var utils = require('./utils-8dbb4d1f.cjs.js');
|
|
8
|
-
var variantUtils = require('./variant-utils-
|
|
8
|
+
var variantUtils = require('./variant-utils-6c6ef452.cjs.js');
|
|
9
9
|
require('@plasmicapp/host/registerComponent');
|
|
10
10
|
|
|
11
11
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -3,7 +3,7 @@ import { Checkbox } from 'react-aria-components';
|
|
|
3
3
|
import { g as getCommonProps, h as hasParent } from './common-0c4336fe.esm.js';
|
|
4
4
|
import { P as PlasmicCheckboxGroupContext } from './contexts-081d65a0.esm.js';
|
|
5
5
|
import { r as registerComponentHelper, a as makeComponentName } from './utils-c7662a47.esm.js';
|
|
6
|
-
import { p as pickAriaComponentVariants } from './variant-utils-
|
|
6
|
+
import { p as pickAriaComponentVariants } from './variant-utils-5f90385f.esm.js';
|
|
7
7
|
import '@plasmicapp/host/registerComponent';
|
|
8
8
|
|
|
9
9
|
var __defProp = Object.defineProperty;
|
|
@@ -9,7 +9,7 @@ var registerDescription = require('./registerDescription.cjs.js');
|
|
|
9
9
|
var registerFieldError = require('./registerFieldError.cjs.js');
|
|
10
10
|
var registerLabel = require('./registerLabel.cjs.js');
|
|
11
11
|
var utils = require('./utils-8dbb4d1f.cjs.js');
|
|
12
|
-
var variantUtils = require('./variant-utils-
|
|
12
|
+
var variantUtils = require('./variant-utils-6c6ef452.cjs.js');
|
|
13
13
|
require('./registerText.cjs.js');
|
|
14
14
|
require('@plasmicapp/host/registerComponent');
|
|
15
15
|
|
|
@@ -7,7 +7,7 @@ import { DESCRIPTION_COMPONENT_NAME } from './registerDescription.esm.js';
|
|
|
7
7
|
import { registerFieldError } from './registerFieldError.esm.js';
|
|
8
8
|
import { registerLabel, LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
|
|
9
9
|
import { m as makeChildComponentName, r as registerComponentHelper, a as makeComponentName } from './utils-c7662a47.esm.js';
|
|
10
|
-
import { p as pickAriaComponentVariants } from './variant-utils-
|
|
10
|
+
import { p as pickAriaComponentVariants } from './variant-utils-5f90385f.esm.js';
|
|
11
11
|
import './registerText.esm.js';
|
|
12
12
|
import '@plasmicapp/host/registerComponent';
|
|
13
13
|
|
|
@@ -14,7 +14,7 @@ var utils = require('./utils-8dbb4d1f.cjs.js');
|
|
|
14
14
|
require('./registerListBoxItem.cjs.js');
|
|
15
15
|
require('./registerDescription.cjs.js');
|
|
16
16
|
require('./registerText.cjs.js');
|
|
17
|
-
require('./variant-utils-
|
|
17
|
+
require('./variant-utils-6c6ef452.cjs.js');
|
|
18
18
|
require('./registerSection.cjs.js');
|
|
19
19
|
require('@react-aria/utils');
|
|
20
20
|
require('react-aria');
|
|
@@ -12,7 +12,7 @@ import { r as registerComponentHelper, a as makeComponentName } from './utils-c7
|
|
|
12
12
|
import './registerListBoxItem.esm.js';
|
|
13
13
|
import './registerDescription.esm.js';
|
|
14
14
|
import './registerText.esm.js';
|
|
15
|
-
import './variant-utils-
|
|
15
|
+
import './variant-utils-5f90385f.esm.js';
|
|
16
16
|
import './registerSection.esm.js';
|
|
17
17
|
import '@react-aria/utils';
|
|
18
18
|
import 'react-aria';
|
|
@@ -8,7 +8,7 @@ var registerButton = require('./registerButton.cjs.js');
|
|
|
8
8
|
var registerModal = require('./registerModal.cjs.js');
|
|
9
9
|
var utils = require('./utils-8dbb4d1f.cjs.js');
|
|
10
10
|
require('./common-2e984ab4.cjs.js');
|
|
11
|
-
require('./variant-utils-
|
|
11
|
+
require('./variant-utils-6c6ef452.cjs.js');
|
|
12
12
|
require('react-aria');
|
|
13
13
|
require('./registerHeading.cjs.js');
|
|
14
14
|
require('@plasmicapp/host/registerComponent');
|
|
@@ -6,7 +6,7 @@ import { BUTTON_COMPONENT_NAME } from './registerButton.esm.js';
|
|
|
6
6
|
import { MODAL_COMPONENT_NAME } from './registerModal.esm.js';
|
|
7
7
|
import { r as registerComponentHelper, a as makeComponentName } from './utils-c7662a47.esm.js';
|
|
8
8
|
import './common-0c4336fe.esm.js';
|
|
9
|
-
import './variant-utils-
|
|
9
|
+
import './variant-utils-5f90385f.esm.js';
|
|
10
10
|
import 'react-aria';
|
|
11
11
|
import './registerHeading.esm.js';
|
|
12
12
|
import '@plasmicapp/host/registerComponent';
|
|
@@ -6,7 +6,7 @@ var reactAriaComponents = require('react-aria-components');
|
|
|
6
6
|
var common = require('./common-2e984ab4.cjs.js');
|
|
7
7
|
var contexts = require('./contexts-baa37b74.cjs.js');
|
|
8
8
|
var utils = require('./utils-8dbb4d1f.cjs.js');
|
|
9
|
-
var variantUtils = require('./variant-utils-
|
|
9
|
+
var variantUtils = require('./variant-utils-6c6ef452.cjs.js');
|
|
10
10
|
require('@plasmicapp/host/registerComponent');
|
|
11
11
|
|
|
12
12
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -4,7 +4,7 @@ import { Input } from 'react-aria-components';
|
|
|
4
4
|
import { r as resolveAutoComplete, g as getCommonProps } from './common-0c4336fe.esm.js';
|
|
5
5
|
import { g as PlasmicTextFieldContext, c as PlasmicInputContext } from './contexts-081d65a0.esm.js';
|
|
6
6
|
import { a as makeComponentName, r as registerComponentHelper } from './utils-c7662a47.esm.js';
|
|
7
|
-
import { p as pickAriaComponentVariants } from './variant-utils-
|
|
7
|
+
import { p as pickAriaComponentVariants } from './variant-utils-5f90385f.esm.js';
|
|
8
8
|
import '@plasmicapp/host/registerComponent';
|
|
9
9
|
|
|
10
10
|
var __defProp = Object.defineProperty;
|
|
@@ -10,7 +10,7 @@ require('./utils-8dbb4d1f.cjs.js');
|
|
|
10
10
|
require('./registerDescription.cjs.js');
|
|
11
11
|
require('./registerText.cjs.js');
|
|
12
12
|
require('@plasmicapp/host/registerComponent');
|
|
13
|
-
require('./variant-utils-
|
|
13
|
+
require('./variant-utils-6c6ef452.cjs.js');
|
|
14
14
|
require('@react-aria/utils');
|
|
15
15
|
|
|
16
16
|
|
|
@@ -8,6 +8,6 @@ import './utils-c7662a47.esm.js';
|
|
|
8
8
|
import './registerDescription.esm.js';
|
|
9
9
|
import './registerText.esm.js';
|
|
10
10
|
import '@plasmicapp/host/registerComponent';
|
|
11
|
-
import './variant-utils-
|
|
11
|
+
import './variant-utils-5f90385f.esm.js';
|
|
12
12
|
import '@react-aria/utils';
|
|
13
13
|
//# sourceMappingURL=registerListBox.esm.js.map
|
|
@@ -6,7 +6,7 @@ var contexts = require('./contexts-baa37b74.cjs.js');
|
|
|
6
6
|
var registerDescription = require('./registerDescription.cjs.js');
|
|
7
7
|
var registerText = require('./registerText.cjs.js');
|
|
8
8
|
var utils = require('./utils-8dbb4d1f.cjs.js');
|
|
9
|
-
var variantUtils = require('./variant-utils-
|
|
9
|
+
var variantUtils = require('./variant-utils-6c6ef452.cjs.js');
|
|
10
10
|
require('@plasmicapp/host/registerComponent');
|
|
11
11
|
|
|
12
12
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -159,8 +159,9 @@ function registerListBoxItem(loader, overrides) {
|
|
|
159
159
|
props: {
|
|
160
160
|
id: {
|
|
161
161
|
type: "string",
|
|
162
|
-
description: "
|
|
162
|
+
description: "A unique key for tracking the selected item in state",
|
|
163
163
|
required: true,
|
|
164
|
+
displayName: "Value",
|
|
164
165
|
validator: (_value, _props, ctx) => {
|
|
165
166
|
if (ctx == null ? void 0 : ctx.idError) {
|
|
166
167
|
return ctx.idError;
|
|
@@ -170,7 +171,8 @@ function registerListBoxItem(loader, overrides) {
|
|
|
170
171
|
},
|
|
171
172
|
textValue: {
|
|
172
173
|
type: "string",
|
|
173
|
-
|
|
174
|
+
displayName: "Label",
|
|
175
|
+
description: "A user-friendly text representation of the item's contents, used for features like typeahead."
|
|
174
176
|
},
|
|
175
177
|
children: {
|
|
176
178
|
type: "slot",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerListBoxItem.cjs.js","sources":["../src/registerListBoxItem.tsx"],"sourcesContent":["import { PlasmicElement } from \"@plasmicapp/host\";\nimport React, { useEffect, useState } from \"react\";\nimport { ListBox, ListBoxItem } from \"react-aria-components\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport { DESCRIPTION_COMPONENT_NAME } from \"./registerDescription\";\nimport { TEXT_COMPONENT_NAME } from \"./registerText\";\nimport {\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst LIST_BOX_ITEM_VARIANTS = [\n \"hovered\" as const,\n \"pressed\" as const,\n \"focused\" as const,\n \"focusVisible\" as const,\n \"selected\" as const,\n \"disabled\" as const,\n];\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n LIST_BOX_ITEM_VARIANTS\n);\n\nexport interface BaseListBoxControlContextData {\n idError?: string;\n}\n\nexport interface BaseListBoxItemProps\n extends React.ComponentProps<typeof ListBoxItem>,\n HasControlContextData<BaseListBoxControlContextData>,\n WithVariants<typeof LIST_BOX_ITEM_VARIANTS> {\n id?: string;\n children?: React.ReactNode;\n}\n\nexport function BaseListBoxItem(props: BaseListBoxItemProps) {\n const { children, setControlContextData, plasmicUpdateVariant, id, ...rest } =\n props;\n const listboxContext = React.useContext(PlasmicListBoxContext);\n const isStandalone = !listboxContext;\n /**\n * Ids of each listboxitem inside a listbox have to be unique. Otherwise, the items won't show up in the listbox.\n * This is particularly important to ensure, because the most common use case would be to apply Repeat Element to the listbox item.\n * The ids of each repeated item will initially be the same (until the user changes the id prop of the listboxitem).\n *\n * The registerId, therefore, is the unique id of the listboxitem.\n * It is the id registered with the listbox context, so that it can auto-generate a unique id if it identifies a duplicate.\n */\n const [registeredId, setRegisteredId] = useState<string | undefined>();\n\n useEffect(() => {\n if (!listboxContext) {\n return;\n }\n\n const localId = listboxContext.idManager.register(id);\n setRegisteredId(localId);\n\n return () => {\n listboxContext.idManager.unregister(localId);\n setRegisteredId(undefined);\n };\n }, [id]);\n\n setControlContextData?.({\n idError: (() => {\n if (id === undefined) {\n return \"ID must be defined\";\n }\n if (typeof id !== \"string\") {\n return \"ID must be a string\";\n }\n if (!id.trim()) {\n return \"ID must be defined\";\n }\n if (!isStandalone && id != registeredId) {\n return \"ID must be unique\";\n }\n return undefined;\n })(),\n });\n\n const listboxItem = (\n <ListBoxItem key={registeredId} id={registeredId} {...rest}>\n {({\n isHovered,\n isPressed,\n isFocused,\n isFocusVisible,\n isSelected,\n isDisabled,\n }) =>\n withObservedValues(\n children,\n {\n hovered: isHovered,\n pressed: isPressed,\n focused: isFocused,\n focusVisible: isFocusVisible,\n selected: isSelected,\n disabled: isDisabled,\n },\n plasmicUpdateVariant\n )\n }\n </ListBoxItem>\n );\n\n if (isStandalone) {\n // selection mode needs to be single/multiple to be able to trigger hover state on it.\n return <ListBox selectionMode=\"single\">{listboxItem}</ListBox>;\n }\n\n return listboxItem;\n}\n\nexport const makeDefaultListBoxItemChildren = (\n label: string,\n description?: string\n): PlasmicElement => ({\n type: \"vbox\",\n styles: {\n display: \"flex\",\n alignItems: \"flex-start\",\n gap: \"2px\",\n },\n children: [\n {\n type: \"component\",\n name: TEXT_COMPONENT_NAME,\n props: {\n slot: \"label\",\n children: {\n type: \"text\",\n styles: {\n fontWeight: 500,\n },\n value: label,\n },\n },\n },\n {\n type: \"component\",\n name: DESCRIPTION_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n styles: {\n color: \"#838383\",\n },\n value: description ?? `Some description for ${label}...`,\n },\n },\n },\n ],\n});\n\nexport function registerListBoxItem(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseListBoxItem>\n) {\n return registerComponentHelper(\n loader,\n BaseListBoxItem,\n {\n name: makeComponentName(\"item\"),\n displayName: \"Aria ListBoxItem\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerListBoxItem\",\n importName: \"BaseListBoxItem\",\n variants,\n props: {\n id: {\n type: \"string\",\n description: \"
|
|
1
|
+
{"version":3,"file":"registerListBoxItem.cjs.js","sources":["../src/registerListBoxItem.tsx"],"sourcesContent":["import { PlasmicElement } from \"@plasmicapp/host\";\nimport React, { useEffect, useState } from \"react\";\nimport { ListBox, ListBoxItem } from \"react-aria-components\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport { DESCRIPTION_COMPONENT_NAME } from \"./registerDescription\";\nimport { TEXT_COMPONENT_NAME } from \"./registerText\";\nimport {\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst LIST_BOX_ITEM_VARIANTS = [\n \"hovered\" as const,\n \"pressed\" as const,\n \"focused\" as const,\n \"focusVisible\" as const,\n \"selected\" as const,\n \"disabled\" as const,\n];\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n LIST_BOX_ITEM_VARIANTS\n);\n\nexport interface BaseListBoxControlContextData {\n idError?: string;\n}\n\nexport interface BaseListBoxItemProps\n extends React.ComponentProps<typeof ListBoxItem>,\n HasControlContextData<BaseListBoxControlContextData>,\n WithVariants<typeof LIST_BOX_ITEM_VARIANTS> {\n id?: string;\n children?: React.ReactNode;\n}\n\nexport function BaseListBoxItem(props: BaseListBoxItemProps) {\n const { children, setControlContextData, plasmicUpdateVariant, id, ...rest } =\n props;\n const listboxContext = React.useContext(PlasmicListBoxContext);\n const isStandalone = !listboxContext;\n /**\n * Ids of each listboxitem inside a listbox have to be unique. Otherwise, the items won't show up in the listbox.\n * This is particularly important to ensure, because the most common use case would be to apply Repeat Element to the listbox item.\n * The ids of each repeated item will initially be the same (until the user changes the id prop of the listboxitem).\n *\n * The registerId, therefore, is the unique id of the listboxitem.\n * It is the id registered with the listbox context, so that it can auto-generate a unique id if it identifies a duplicate.\n */\n const [registeredId, setRegisteredId] = useState<string | undefined>();\n\n useEffect(() => {\n if (!listboxContext) {\n return;\n }\n\n const localId = listboxContext.idManager.register(id);\n setRegisteredId(localId);\n\n return () => {\n listboxContext.idManager.unregister(localId);\n setRegisteredId(undefined);\n };\n }, [id]);\n\n setControlContextData?.({\n idError: (() => {\n if (id === undefined) {\n return \"ID must be defined\";\n }\n if (typeof id !== \"string\") {\n return \"ID must be a string\";\n }\n if (!id.trim()) {\n return \"ID must be defined\";\n }\n if (!isStandalone && id != registeredId) {\n return \"ID must be unique\";\n }\n return undefined;\n })(),\n });\n\n const listboxItem = (\n <ListBoxItem key={registeredId} id={registeredId} {...rest}>\n {({\n isHovered,\n isPressed,\n isFocused,\n isFocusVisible,\n isSelected,\n isDisabled,\n }) =>\n withObservedValues(\n children,\n {\n hovered: isHovered,\n pressed: isPressed,\n focused: isFocused,\n focusVisible: isFocusVisible,\n selected: isSelected,\n disabled: isDisabled,\n },\n plasmicUpdateVariant\n )\n }\n </ListBoxItem>\n );\n\n if (isStandalone) {\n // selection mode needs to be single/multiple to be able to trigger hover state on it.\n return <ListBox selectionMode=\"single\">{listboxItem}</ListBox>;\n }\n\n return listboxItem;\n}\n\nexport const makeDefaultListBoxItemChildren = (\n label: string,\n description?: string\n): PlasmicElement => ({\n type: \"vbox\",\n styles: {\n display: \"flex\",\n alignItems: \"flex-start\",\n gap: \"2px\",\n },\n children: [\n {\n type: \"component\",\n name: TEXT_COMPONENT_NAME,\n props: {\n slot: \"label\",\n children: {\n type: \"text\",\n styles: {\n fontWeight: 500,\n },\n value: label,\n },\n },\n },\n {\n type: \"component\",\n name: DESCRIPTION_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n styles: {\n color: \"#838383\",\n },\n value: description ?? `Some description for ${label}...`,\n },\n },\n },\n ],\n});\n\nexport function registerListBoxItem(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseListBoxItem>\n) {\n return registerComponentHelper(\n loader,\n BaseListBoxItem,\n {\n name: makeComponentName(\"item\"),\n displayName: \"Aria ListBoxItem\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerListBoxItem\",\n importName: \"BaseListBoxItem\",\n variants,\n props: {\n id: {\n type: \"string\",\n description: \"A unique key for tracking the selected item in state\",\n required: true,\n displayName: \"Value\",\n validator: (_value, _props, ctx) => {\n if (ctx?.idError) {\n return ctx.idError;\n }\n return true;\n },\n },\n textValue: {\n type: \"string\",\n displayName: \"Label\",\n description:\n \"A user-friendly text representation of the item's contents, used for features like typeahead.\",\n },\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: makeDefaultListBoxItemChildren(\"Item\"),\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["pickAriaComponentVariants","React","PlasmicListBoxContext","useState","useEffect","ListBoxItem","ListBox","TEXT_COMPONENT_NAME","DESCRIPTION_COMPONENT_NAME","registerComponentHelper","makeComponentName"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ import { b as PlasmicListBoxContext } from './contexts-081d65a0.esm.js';
|
|
|
4
4
|
import { DESCRIPTION_COMPONENT_NAME } from './registerDescription.esm.js';
|
|
5
5
|
import { TEXT_COMPONENT_NAME } from './registerText.esm.js';
|
|
6
6
|
import { r as registerComponentHelper, a as makeComponentName } from './utils-c7662a47.esm.js';
|
|
7
|
-
import { p as pickAriaComponentVariants } from './variant-utils-
|
|
7
|
+
import { p as pickAriaComponentVariants } from './variant-utils-5f90385f.esm.js';
|
|
8
8
|
import '@plasmicapp/host/registerComponent';
|
|
9
9
|
|
|
10
10
|
var __defProp = Object.defineProperty;
|
|
@@ -153,8 +153,9 @@ function registerListBoxItem(loader, overrides) {
|
|
|
153
153
|
props: {
|
|
154
154
|
id: {
|
|
155
155
|
type: "string",
|
|
156
|
-
description: "
|
|
156
|
+
description: "A unique key for tracking the selected item in state",
|
|
157
157
|
required: true,
|
|
158
|
+
displayName: "Value",
|
|
158
159
|
validator: (_value, _props, ctx) => {
|
|
159
160
|
if (ctx == null ? void 0 : ctx.idError) {
|
|
160
161
|
return ctx.idError;
|
|
@@ -164,7 +165,8 @@ function registerListBoxItem(loader, overrides) {
|
|
|
164
165
|
},
|
|
165
166
|
textValue: {
|
|
166
167
|
type: "string",
|
|
167
|
-
|
|
168
|
+
displayName: "Label",
|
|
169
|
+
description: "A user-friendly text representation of the item's contents, used for features like typeahead."
|
|
168
170
|
},
|
|
169
171
|
children: {
|
|
170
172
|
type: "slot",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerListBoxItem.esm.js","sources":["../src/registerListBoxItem.tsx"],"sourcesContent":["import { PlasmicElement } from \"@plasmicapp/host\";\nimport React, { useEffect, useState } from \"react\";\nimport { ListBox, ListBoxItem } from \"react-aria-components\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport { DESCRIPTION_COMPONENT_NAME } from \"./registerDescription\";\nimport { TEXT_COMPONENT_NAME } from \"./registerText\";\nimport {\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst LIST_BOX_ITEM_VARIANTS = [\n \"hovered\" as const,\n \"pressed\" as const,\n \"focused\" as const,\n \"focusVisible\" as const,\n \"selected\" as const,\n \"disabled\" as const,\n];\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n LIST_BOX_ITEM_VARIANTS\n);\n\nexport interface BaseListBoxControlContextData {\n idError?: string;\n}\n\nexport interface BaseListBoxItemProps\n extends React.ComponentProps<typeof ListBoxItem>,\n HasControlContextData<BaseListBoxControlContextData>,\n WithVariants<typeof LIST_BOX_ITEM_VARIANTS> {\n id?: string;\n children?: React.ReactNode;\n}\n\nexport function BaseListBoxItem(props: BaseListBoxItemProps) {\n const { children, setControlContextData, plasmicUpdateVariant, id, ...rest } =\n props;\n const listboxContext = React.useContext(PlasmicListBoxContext);\n const isStandalone = !listboxContext;\n /**\n * Ids of each listboxitem inside a listbox have to be unique. Otherwise, the items won't show up in the listbox.\n * This is particularly important to ensure, because the most common use case would be to apply Repeat Element to the listbox item.\n * The ids of each repeated item will initially be the same (until the user changes the id prop of the listboxitem).\n *\n * The registerId, therefore, is the unique id of the listboxitem.\n * It is the id registered with the listbox context, so that it can auto-generate a unique id if it identifies a duplicate.\n */\n const [registeredId, setRegisteredId] = useState<string | undefined>();\n\n useEffect(() => {\n if (!listboxContext) {\n return;\n }\n\n const localId = listboxContext.idManager.register(id);\n setRegisteredId(localId);\n\n return () => {\n listboxContext.idManager.unregister(localId);\n setRegisteredId(undefined);\n };\n }, [id]);\n\n setControlContextData?.({\n idError: (() => {\n if (id === undefined) {\n return \"ID must be defined\";\n }\n if (typeof id !== \"string\") {\n return \"ID must be a string\";\n }\n if (!id.trim()) {\n return \"ID must be defined\";\n }\n if (!isStandalone && id != registeredId) {\n return \"ID must be unique\";\n }\n return undefined;\n })(),\n });\n\n const listboxItem = (\n <ListBoxItem key={registeredId} id={registeredId} {...rest}>\n {({\n isHovered,\n isPressed,\n isFocused,\n isFocusVisible,\n isSelected,\n isDisabled,\n }) =>\n withObservedValues(\n children,\n {\n hovered: isHovered,\n pressed: isPressed,\n focused: isFocused,\n focusVisible: isFocusVisible,\n selected: isSelected,\n disabled: isDisabled,\n },\n plasmicUpdateVariant\n )\n }\n </ListBoxItem>\n );\n\n if (isStandalone) {\n // selection mode needs to be single/multiple to be able to trigger hover state on it.\n return <ListBox selectionMode=\"single\">{listboxItem}</ListBox>;\n }\n\n return listboxItem;\n}\n\nexport const makeDefaultListBoxItemChildren = (\n label: string,\n description?: string\n): PlasmicElement => ({\n type: \"vbox\",\n styles: {\n display: \"flex\",\n alignItems: \"flex-start\",\n gap: \"2px\",\n },\n children: [\n {\n type: \"component\",\n name: TEXT_COMPONENT_NAME,\n props: {\n slot: \"label\",\n children: {\n type: \"text\",\n styles: {\n fontWeight: 500,\n },\n value: label,\n },\n },\n },\n {\n type: \"component\",\n name: DESCRIPTION_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n styles: {\n color: \"#838383\",\n },\n value: description ?? `Some description for ${label}...`,\n },\n },\n },\n ],\n});\n\nexport function registerListBoxItem(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseListBoxItem>\n) {\n return registerComponentHelper(\n loader,\n BaseListBoxItem,\n {\n name: makeComponentName(\"item\"),\n displayName: \"Aria ListBoxItem\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerListBoxItem\",\n importName: \"BaseListBoxItem\",\n variants,\n props: {\n id: {\n type: \"string\",\n description: \"
|
|
1
|
+
{"version":3,"file":"registerListBoxItem.esm.js","sources":["../src/registerListBoxItem.tsx"],"sourcesContent":["import { PlasmicElement } from \"@plasmicapp/host\";\nimport React, { useEffect, useState } from \"react\";\nimport { ListBox, ListBoxItem } from \"react-aria-components\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport { DESCRIPTION_COMPONENT_NAME } from \"./registerDescription\";\nimport { TEXT_COMPONENT_NAME } from \"./registerText\";\nimport {\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst LIST_BOX_ITEM_VARIANTS = [\n \"hovered\" as const,\n \"pressed\" as const,\n \"focused\" as const,\n \"focusVisible\" as const,\n \"selected\" as const,\n \"disabled\" as const,\n];\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n LIST_BOX_ITEM_VARIANTS\n);\n\nexport interface BaseListBoxControlContextData {\n idError?: string;\n}\n\nexport interface BaseListBoxItemProps\n extends React.ComponentProps<typeof ListBoxItem>,\n HasControlContextData<BaseListBoxControlContextData>,\n WithVariants<typeof LIST_BOX_ITEM_VARIANTS> {\n id?: string;\n children?: React.ReactNode;\n}\n\nexport function BaseListBoxItem(props: BaseListBoxItemProps) {\n const { children, setControlContextData, plasmicUpdateVariant, id, ...rest } =\n props;\n const listboxContext = React.useContext(PlasmicListBoxContext);\n const isStandalone = !listboxContext;\n /**\n * Ids of each listboxitem inside a listbox have to be unique. Otherwise, the items won't show up in the listbox.\n * This is particularly important to ensure, because the most common use case would be to apply Repeat Element to the listbox item.\n * The ids of each repeated item will initially be the same (until the user changes the id prop of the listboxitem).\n *\n * The registerId, therefore, is the unique id of the listboxitem.\n * It is the id registered with the listbox context, so that it can auto-generate a unique id if it identifies a duplicate.\n */\n const [registeredId, setRegisteredId] = useState<string | undefined>();\n\n useEffect(() => {\n if (!listboxContext) {\n return;\n }\n\n const localId = listboxContext.idManager.register(id);\n setRegisteredId(localId);\n\n return () => {\n listboxContext.idManager.unregister(localId);\n setRegisteredId(undefined);\n };\n }, [id]);\n\n setControlContextData?.({\n idError: (() => {\n if (id === undefined) {\n return \"ID must be defined\";\n }\n if (typeof id !== \"string\") {\n return \"ID must be a string\";\n }\n if (!id.trim()) {\n return \"ID must be defined\";\n }\n if (!isStandalone && id != registeredId) {\n return \"ID must be unique\";\n }\n return undefined;\n })(),\n });\n\n const listboxItem = (\n <ListBoxItem key={registeredId} id={registeredId} {...rest}>\n {({\n isHovered,\n isPressed,\n isFocused,\n isFocusVisible,\n isSelected,\n isDisabled,\n }) =>\n withObservedValues(\n children,\n {\n hovered: isHovered,\n pressed: isPressed,\n focused: isFocused,\n focusVisible: isFocusVisible,\n selected: isSelected,\n disabled: isDisabled,\n },\n plasmicUpdateVariant\n )\n }\n </ListBoxItem>\n );\n\n if (isStandalone) {\n // selection mode needs to be single/multiple to be able to trigger hover state on it.\n return <ListBox selectionMode=\"single\">{listboxItem}</ListBox>;\n }\n\n return listboxItem;\n}\n\nexport const makeDefaultListBoxItemChildren = (\n label: string,\n description?: string\n): PlasmicElement => ({\n type: \"vbox\",\n styles: {\n display: \"flex\",\n alignItems: \"flex-start\",\n gap: \"2px\",\n },\n children: [\n {\n type: \"component\",\n name: TEXT_COMPONENT_NAME,\n props: {\n slot: \"label\",\n children: {\n type: \"text\",\n styles: {\n fontWeight: 500,\n },\n value: label,\n },\n },\n },\n {\n type: \"component\",\n name: DESCRIPTION_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n styles: {\n color: \"#838383\",\n },\n value: description ?? `Some description for ${label}...`,\n },\n },\n },\n ],\n});\n\nexport function registerListBoxItem(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseListBoxItem>\n) {\n return registerComponentHelper(\n loader,\n BaseListBoxItem,\n {\n name: makeComponentName(\"item\"),\n displayName: \"Aria ListBoxItem\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerListBoxItem\",\n importName: \"BaseListBoxItem\",\n variants,\n props: {\n id: {\n type: \"string\",\n description: \"A unique key for tracking the selected item in state\",\n required: true,\n displayName: \"Value\",\n validator: (_value, _props, ctx) => {\n if (ctx?.idError) {\n return ctx.idError;\n }\n return true;\n },\n },\n textValue: {\n type: \"string\",\n displayName: \"Label\",\n description:\n \"A user-friendly text representation of the item's contents, used for features like typeahead.\",\n },\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: makeDefaultListBoxItemChildren(\"Item\"),\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -57,20 +57,31 @@ const BaseModal = React.forwardRef(
|
|
|
57
57
|
className,
|
|
58
58
|
isOpen,
|
|
59
59
|
resetClassName,
|
|
60
|
-
setControlContextData
|
|
60
|
+
setControlContextData,
|
|
61
|
+
isDismissable
|
|
61
62
|
} = _a, rest = __objRest(_a, [
|
|
62
63
|
"children",
|
|
63
64
|
"modalOverlayClass",
|
|
64
65
|
"className",
|
|
65
66
|
"isOpen",
|
|
66
67
|
"resetClassName",
|
|
67
|
-
"setControlContextData"
|
|
68
|
+
"setControlContextData",
|
|
69
|
+
"isDismissable"
|
|
68
70
|
]);
|
|
69
71
|
const { isSelected } = (_b = host.usePlasmicCanvasComponentInfo(props)) != null ? _b : {};
|
|
70
72
|
const contextProps = React__default.default.useContext(contexts.PlasmicDialogTriggerContext);
|
|
71
73
|
const isStandalone = !contextProps;
|
|
72
74
|
const mergedProps = reactAria.mergeProps(contextProps, rest, {
|
|
73
|
-
isOpen: isStandalone ? isSelected || isOpen : contextProps.isOpen
|
|
75
|
+
isOpen: isStandalone ? isSelected || isOpen : contextProps.isOpen,
|
|
76
|
+
/*
|
|
77
|
+
isDismissable on canvas (non-interactive mode) causes the following two issues:
|
|
78
|
+
1. Clicking anywhere inside the modal dismisses it
|
|
79
|
+
2. If the modal is auto-opened due to selection in outline tab, the modal stays open despite issue #1, but the text elements inside the modal are no longer selectable, and therefore the text or headings inside the modal are not editable.
|
|
80
|
+
|
|
81
|
+
To fix the above issue, we set an interim isDismissable state to false while the modal is auto-open (`isSelected` is true).
|
|
82
|
+
Also note that `isSelected` can only be true in canvas (non-interactive mode), so we can safely (temporarily) set `isDismissable` to false in this case, because it only matters in interactive mode.
|
|
83
|
+
*/
|
|
84
|
+
isDismissable: isSelected ? false : isDismissable
|
|
74
85
|
});
|
|
75
86
|
setControlContextData == null ? void 0 : setControlContextData({
|
|
76
87
|
parent: isStandalone ? void 0 : {}
|