@plasmicpkgs/react-aria 0.0.103 → 0.0.105

package/skinny/registerButton.stories.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerButton.stories.esm.js","sources":["../src/registerButton.stories.tsx"],"sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, fn, userEvent, waitFor, within } from \"@storybook/test\";\nimport React from \"react\";\nimport { Form, Input } from \"react-aria-components\";\nimport { BaseButton } from \"./registerButton\";\n\nexport default {\n  title: \"Components/BaseButton\",\n  component: BaseButton,\n  args: {\n    children: \"Click Me\",\n    onPress: fn(),\n    onFocus: fn(),\n  },\n  parameters: {\n    onSubmit: fn(),\n    onReset: fn(),\n  },\n} satisfies Meta<typeof BaseButton>;\n\ntype Story = StoryObj<typeof BaseButton>;\n\n// Reusable test form wrapper\nconst TestForm: React.FC<{\n  children: React.ReactNode;\n  onSubmit?: (e: React.FormEvent) => void;\n  onReset?: (e: React.FormEvent) => void;\n}> = ({ children, onSubmit, onReset }) => (\n  <Form onSubmit={onSubmit} onReset={onReset}>\n    <Input role=\"input\" name=\"test-input\" aria-label=\"Test input\" />\n    {children}\n  </Form>\n);\n\nexport const Basic: Story = {\n  play: async ({ args, canvasElement }) => {\n    const canvas = within(canvasElement);\n    const button = canvas.getByText(\"Click Me\");\n\n    await userEvent.click(button);\n\n    expect(button).toHaveFocus();\n    expect(args.onPress).toHaveBeenCalledOnce();\n    expect(args.onFocus).toHaveBeenCalledOnce();\n  },\n};\n\nexport const AutoFocusedButton: Story = {\n  args: {\n    autoFocus: true,\n  },\n  render: (args) => (\n    <TestForm>\n      <BaseButton {...args} />\n    </TestForm>\n  ),\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    await waitFor(() => {\n      expect(canvas.getByText(\"Click Me\")).toHaveFocus();\n    });\n  },\n};\n\nexport const DisabledButton: Story = {\n  args: {\n    isDisabled: true,\n  },\n  render: (args) => (\n    <TestForm>\n      <BaseButton {...args} />\n    </TestForm>\n  ),\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const button = canvas.getByText(\"Click Me\");\n\n    await userEvent.click(button);\n    expect(button).not.toHaveFocus();\n    expect(button).toBeDisabled();\n  },\n};\n\nexport const SubmitButton: Story = {\n  args: {\n    children: \"Submit\",\n    submitsForm: true,\n  },\n  render: (args, { parameters }) => {\n    return (\n      <TestForm\n        onSubmit={(e) => {\n          e.preventDefault();\n          parameters.onSubmit(e);\n        }}\n      >\n        <BaseButton {...args} />\n      </TestForm>\n    );\n  },\n  play: async ({ canvasElement, parameters }) => {\n    const canvas = within(canvasElement);\n    const button = canvas.getByText(\"Submit\");\n    await userEvent.click(button);\n    expect(parameters.onSubmit).toHaveBeenCalledOnce();\n    expect(parameters.onReset).not.toHaveBeenCalled();\n  },\n};\n\nexport const ResetButton: Story = {\n  args: {\n    children: \"Reset\",\n    resetsForm: true,\n  },\n  render: (args, { parameters }) => (\n    <TestForm\n      onSubmit={(e) => {\n        e.preventDefault();\n        parameters.onSubmit(e);\n      }}\n      onReset={parameters.onReset}\n    >\n      <BaseButton {...args} />\n    </TestForm>\n  ),\n  play: async ({ canvasElement, parameters }) => {\n    const canvas = within(canvasElement);\n    const form = canvasElement.getElementsByTagName(\"form\")[0];\n    const input = canvasElement.getElementsByTagName(\"input\")[0];\n    await userEvent.type(input, \"Hello World\");\n    expect(form).toHaveFormValues({ \"test-input\": \"Hello World\" });\n    const button = canvas.getByText(\"Reset\");\n    expect(button).toHaveAttribute(\"type\", \"reset\");\n    await userEvent.click(button);\n    expect(form).toHaveFormValues({});\n    expect(parameters.onReset).toHaveBeenCalledOnce();\n    expect(parameters.onSubmit).not.toHaveBeenCalled();\n  },\n};\n\nexport const LinkButton: Story = {\n  args: {\n    children: \"Go to Google\",\n    href: \"https://www.google.com\",\n    target: \"_blank\",\n  },\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const link = canvas.getByText(\"Go to Google\");\n\n    expect(link.tagName).toBe(\"A\");\n    expect(link).toHaveAttribute(\"href\", \"https://www.google.com\");\n    expect(link).toHaveAttribute(\"target\", \"_blank\");\n    await userEvent.click(link);\n  },\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,6BAAe;AAAA,EACb,KAAO,EAAA,uBAAA;AAAA,EACP,SAAW,EAAA,UAAA;AAAA,EACX,IAAM,EAAA;AAAA,IACJ,QAAU,EAAA,UAAA;AAAA,IACV,SAAS,EAAG,EAAA;AAAA,IACZ,SAAS,EAAG,EAAA;AAAA,GACd;AAAA,EACA,UAAY,EAAA;AAAA,IACV,UAAU,EAAG,EAAA;AAAA,IACb,SAAS,EAAG,EAAA;AAAA,GACd;AACF,CAAA,CAAA;AAKA,MAAM,QAAA,GAID,CAAC,EAAE,QAAA,EAAU,UAAU,OAAQ,EAAA,yCACjC,IAAK,EAAA,EAAA,QAAA,EAAoB,2BACvB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,MAAK,OAAQ,EAAA,IAAA,EAAK,cAAa,YAAW,EAAA,YAAA,EAAa,GAC7D,QACH,CAAA,CAAA;AAGK,MAAM,KAAe,GAAA;AAAA,EAC1B,IAAM,EAAA,OAAO,EAAE,IAAA,EAAM,eAAoB,KAAA;AACvC,IAAM,MAAA,MAAA,GAAS,OAAO,aAAa,CAAA,CAAA;AACnC,IAAM,MAAA,MAAA,GAAS,MAAO,CAAA,SAAA,CAAU,UAAU,CAAA,CAAA;AAE1C,IAAM,MAAA,SAAA,CAAU,MAAM,MAAM,CAAA,CAAA;AAE5B,IAAO,MAAA,CAAA,MAAM,EAAE,WAAY,EAAA,CAAA;AAC3B,IAAO,MAAA,CAAA,IAAA,CAAK,OAAO,CAAA,CAAE,oBAAqB,EAAA,CAAA;AAC1C,IAAO,MAAA,CAAA,IAAA,CAAK,OAAO,CAAA,CAAE,oBAAqB,EAAA,CAAA;AAAA,GAC5C;AACF,EAAA;AAEO,MAAM,iBAA2B,GAAA;AAAA,EACtC,IAAM,EAAA;AAAA,IACJ,SAAW,EAAA,IAAA;AAAA,GACb;AAAA,EACA,MAAA,EAAQ,CAAC,IACP,qBAAA,KAAA,CAAA,aAAA,CAAC,gCACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,cAAA,CAAA,EAAA,EAAe,KAAM,CACxB,CAAA;AAAA,EAEF,IAAM,EAAA,OAAO,EAAE,aAAA,EAAoB,KAAA;AACjC,IAAM,MAAA,MAAA,GAAS,OAAO,aAAa,CAAA,CAAA;AACnC,IAAA,MAAM,QAAQ,MAAM;AAClB,MAAA,MAAA,CAAO,MAAO,CAAA,SAAA,CAAU,UAAU,CAAC,EAAE,WAAY,EAAA,CAAA;AAAA,KAClD,CAAA,CAAA;AAAA,GACH;AACF,EAAA;AAEO,MAAM,cAAwB,GAAA;AAAA,EACnC,IAAM,EAAA;AAAA,IACJ,UAAY,EAAA,IAAA;AAAA,GACd;AAAA,EACA,MAAA,EAAQ,CAAC,IACP,qBAAA,KAAA,CAAA,aAAA,CAAC,gCACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,cAAA,CAAA,EAAA,EAAe,KAAM,CACxB,CAAA;AAAA,EAEF,IAAM,EAAA,OAAO,EAAE,aAAA,EAAoB,KAAA;AACjC,IAAM,MAAA,MAAA,GAAS,OAAO,aAAa,CAAA,CAAA;AACnC,IAAM,MAAA,MAAA,GAAS,MAAO,CAAA,SAAA,CAAU,UAAU,CAAA,CAAA;AAE1C,IAAM,MAAA,SAAA,CAAU,MAAM,MAAM,CAAA,CAAA;AAC5B,IAAO,MAAA,CAAA,MAAM,CAAE,CAAA,GAAA,CAAI,WAAY,EAAA,CAAA;AAC/B,IAAO,MAAA,CAAA,MAAM,EAAE,YAAa,EAAA,CAAA;AAAA,GAC9B;AACF,EAAA;AAEO,MAAM,YAAsB,GAAA;AAAA,EACjC,IAAM,EAAA;AAAA,IACJ,QAAU,EAAA,QAAA;AAAA,IACV,WAAa,EAAA,IAAA;AAAA,GACf;AAAA,EACA,MAAQ,EAAA,CAAC,IAAM,EAAA,EAAE,YAAiB,KAAA;AAChC,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAU,CAAC,CAAM,KAAA;AACf,UAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,UAAA,UAAA,CAAW,SAAS,CAAC,CAAA,CAAA;AAAA,SACvB;AAAA,OAAA;AAAA,sBAEA,KAAA,CAAA,aAAA,CAAC,+BAAe,IAAM,CAAA,CAAA;AAAA,KACxB,CAAA;AAAA,GAEJ;AAAA,EACA,IAAM,EAAA,OAAO,EAAE,aAAA,EAAe,YAAiB,KAAA;AAC7C,IAAM,MAAA,MAAA,GAAS,OAAO,aAAa,CAAA,CAAA;AACnC,IAAM,MAAA,MAAA,GAAS,MAAO,CAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AACxC,IAAM,MAAA,SAAA,CAAU,MAAM,MAAM,CAAA,CAAA;AAC5B,IAAO,MAAA,CAAA,UAAA,CAAW,QAAQ,CAAA,CAAE,oBAAqB,EAAA,CAAA;AACjD,IAAA,MAAA,CAAO,UAAW,CAAA,OAAO,CAAE,CAAA,GAAA,CAAI,gBAAiB,EAAA,CAAA;AAAA,GAClD;AACF,EAAA;AAEO,MAAM,WAAqB,GAAA;AAAA,EAChC,IAAM,EAAA;AAAA,IACJ,QAAU,EAAA,OAAA;AAAA,IACV,UAAY,EAAA,IAAA;AAAA,GACd;AAAA,EACA,MAAQ,EAAA,CAAC,IAAM,EAAA,EAAE,YACf,qBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,CAAC,CAAM,KAAA;AACf,QAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,QAAA,UAAA,CAAW,SAAS,CAAC,CAAA,CAAA;AAAA,OACvB;AAAA,MACA,SAAS,UAAW,CAAA,OAAA;AAAA,KAAA;AAAA,oBAEpB,KAAA,CAAA,aAAA,CAAC,+BAAe,IAAM,CAAA,CAAA;AAAA,GACxB;AAAA,EAEF,IAAM,EAAA,OAAO,EAAE,aAAA,EAAe,YAAiB,KAAA;AAC7C,IAAM,MAAA,MAAA,GAAS,OAAO,aAAa,CAAA,CAAA;AACnC,IAAA,MAAM,IAAO,GAAA,aAAA,CAAc,oBAAqB,CAAA,MAAM,EAAE,CAAC,CAAA,CAAA;AACzD,IAAA,MAAM,KAAQ,GAAA,aAAA,CAAc,oBAAqB,CAAA,OAAO,EAAE,CAAC,CAAA,CAAA;AAC3D,IAAM,MAAA,SAAA,CAAU,IAAK,CAAA,KAAA,EAAO,aAAa,CAAA,CAAA;AACzC,IAAA,MAAA,CAAO,IAAI,CAAE,CAAA,gBAAA,CAAiB,EAAE,YAAA,EAAc,eAAe,CAAA,CAAA;AAC7D,IAAM,MAAA,MAAA,GAAS,MAAO,CAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AACvC,IAAA,MAAA,CAAO,MAAM,CAAA,CAAE,eAAgB,CAAA,MAAA,EAAQ,OAAO,CAAA,CAAA;AAC9C,IAAM,MAAA,SAAA,CAAU,MAAM,MAAM,CAAA,CAAA;AAC5B,IAAA,MAAA,CAAO,IAAI,CAAA,CAAE,gBAAiB,CAAA,EAAE,CAAA,CAAA;AAChC,IAAO,MAAA,CAAA,UAAA,CAAW,OAAO,CAAA,CAAE,oBAAqB,EAAA,CAAA;AAChD,IAAA,MAAA,CAAO,UAAW,CAAA,QAAQ,CAAE,CAAA,GAAA,CAAI,gBAAiB,EAAA,CAAA;AAAA,GACnD;AACF,EAAA;AAEO,MAAM,UAAoB,GAAA;AAAA,EAC/B,IAAM,EAAA;AAAA,IACJ,QAAU,EAAA,cAAA;AAAA,IACV,IAAM,EAAA,wBAAA;AAAA,IACN,MAAQ,EAAA,QAAA;AAAA,GACV;AAAA,EACA,IAAM,EAAA,OAAO,EAAE,aAAA,EAAoB,KAAA;AACjC,IAAM,MAAA,MAAA,GAAS,OAAO,aAAa,CAAA,CAAA;AACnC,IAAM,MAAA,IAAA,GAAO,MAAO,CAAA,SAAA,CAAU,cAAc,CAAA,CAAA;AAE5C,IAAA,MAAA,CAAO,IAAK,CAAA,OAAO,CAAE,CAAA,IAAA,CAAK,GAAG,CAAA,CAAA;AAC7B,IAAA,MAAA,CAAO,IAAI,CAAA,CAAE,eAAgB,CAAA,MAAA,EAAQ,wBAAwB,CAAA,CAAA;AAC7D,IAAA,MAAA,CAAO,IAAI,CAAA,CAAE,eAAgB,CAAA,QAAA,EAAU,QAAQ,CAAA,CAAA;AAC/C,IAAM,MAAA,SAAA,CAAU,MAAM,IAAI,CAAA,CAAA;AAAA,GAC5B;AACF;;;;"}

package/skinny/registerCheckboxGroup.stories.cjs.js

@@ -0,0 +1,121 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var test = require('@storybook/test');
+var React = require('react');
+var registerCheckbox = require('./registerCheckbox.cjs.js');
+var registerCheckboxGroup = require('./registerCheckboxGroup.cjs.js');
+require('react-aria-components');
+require('./common-b3b54c72.cjs.js');
+require('./utils-7d000fa4.cjs.js');
+require('@plasmicapp/host');
+require('@plasmicapp/host/registerComponent');
+require('./contexts-6d0cb2b1.cjs.js');
+require('./variant-utils-0ad70db8.cjs.js');
+require('./OptionsItemIdManager-a89a28b9.cjs.js');
+require('./registerDescription.cjs.js');
+require('./registerText.cjs.js');
+require('./registerLabel.cjs.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const meta = {
+  title: "Components/BaseCheckboxGroup",
+  component: registerCheckboxGroup.BaseCheckboxGroup,
+  args: {
+    onChange: test.fn()
+  }
+};
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+const beforeEach = async () => {
+  await sleep(100);
+};
+const createCheckboxItems = (count) => {
+  return Array.from({ length: count }, (_, i) => ({
+    value: `checkbox${i + 1}`,
+    label: `Checkbox ${i + 1}`
+  }));
+};
+const Basic = {
+  args: {
+    children: createCheckboxItems(3).map((item) => /* @__PURE__ */ React__default.default.createElement(registerCheckbox.BaseCheckbox, { value: item.value }, item.label))
+  },
+  play: async ({ canvasElement, args }) => {
+    await beforeEach();
+    const canvas = test.within(canvasElement);
+    const checkboxes = await canvas.findAllByRole("checkbox");
+    test.expect(checkboxes).toHaveLength(3);
+    checkboxes.forEach((checkbox) => {
+      test.expect(checkbox).not.toBeChecked();
+    });
+    await test.userEvent.click(checkboxes[1]);
+    test.expect(checkboxes[1]).toBeChecked();
+    test.expect(args.onChange).toHaveBeenCalledWith(["checkbox2"]);
+  }
+};
+const WithDefaultSelection = {
+  args: {
+    defaultValue: ["checkbox1", "checkbox3"],
+    children: /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, createCheckboxItems(3).map((item) => /* @__PURE__ */ React__default.default.createElement(registerCheckbox.BaseCheckbox, { value: item.value }, item.label)), /* @__PURE__ */ React__default.default.createElement(registerCheckbox.BaseCheckbox, { defaultSelected: true, value: "Item 4" }, "checkbox4"))
+  },
+  play: async ({ canvasElement, args }) => {
+    await beforeEach();
+    const canvas = test.within(canvasElement);
+    const checkboxes = await canvas.findAllByRole("checkbox");
+    test.expect(checkboxes[0]).toBeChecked();
+    test.expect(checkboxes[1]).not.toBeChecked();
+    test.expect(checkboxes[2]).toBeChecked();
+    test.expect(checkboxes[3]).not.toBeChecked();
+    await test.userEvent.click(checkboxes[0]);
+    test.expect(checkboxes[0]).not.toBeChecked();
+    test.expect(checkboxes[1]).not.toBeChecked();
+    test.expect(checkboxes[2]).toBeChecked();
+    test.expect(args.onChange).toHaveBeenCalledWith(["checkbox3"]);
+  }
+};
+const Disabled = {
+  args: {
+    isDisabled: true,
+    defaultValue: ["checkbox1"],
+    children: createCheckboxItems(3).map((item) => /* @__PURE__ */ React__default.default.createElement(registerCheckbox.BaseCheckbox, { key: item.value, value: item.value }, item.label))
+  },
+  play: async ({ canvasElement, args }) => {
+    await beforeEach();
+    const canvas = test.within(canvasElement);
+    const checkboxes = await canvas.findAllByRole("checkbox");
+    checkboxes.forEach((checkbox) => {
+      test.expect(checkbox).toBeDisabled();
+    });
+    await test.userEvent.click(checkboxes[1]);
+    test.expect(args.onChange).not.toHaveBeenCalled();
+    test.expect(checkboxes[1]).not.toBeChecked();
+  }
+};
+const ReadOnly = {
+  args: {
+    isReadOnly: true,
+    defaultValue: ["checkbox1", "checkbox2"],
+    children: createCheckboxItems(3).map((item) => /* @__PURE__ */ React__default.default.createElement(registerCheckbox.BaseCheckbox, { key: item.value, value: item.value }, item.label))
+  },
+  play: async ({ canvasElement, args }) => {
+    await beforeEach();
+    const canvas = test.within(canvasElement);
+    const checkboxes = await canvas.findAllByRole("checkbox");
+    checkboxes.forEach((checkbox) => {
+      test.expect(checkbox).toHaveAttribute("aria-readonly", "true");
+    });
+    await test.userEvent.click(checkboxes[2]);
+    test.expect(args.onChange).not.toHaveBeenCalled();
+    test.expect(checkboxes[2]).not.toBeChecked();
+  }
+};
+
+exports.Basic = Basic;
+exports.Disabled = Disabled;
+exports.ReadOnly = ReadOnly;
+exports.WithDefaultSelection = WithDefaultSelection;
+exports.default = meta;
+//# sourceMappingURL=registerCheckboxGroup.stories.cjs.js.map

package/skinny/registerCheckboxGroup.stories.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerCheckboxGroup.stories.cjs.js","sources":["../src/registerCheckboxGroup.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\nimport React from \"react\";\nimport { BaseCheckbox } from \"./registerCheckbox\";\nimport { BaseCheckboxGroup } from \"./registerCheckboxGroup\";\n\nconst meta: Meta<typeof BaseCheckboxGroup> = {\n  title: \"Components/BaseCheckboxGroup\",\n  component: BaseCheckboxGroup,\n  args: {\n    onChange: fn(),\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BaseCheckboxGroup>;\n\n// TODO: Assertions may be flaky because the registeredId is set inside useEffect, so in the first render, the id is randomly generated by react-aria itself.\n// We use sleep to wait for the id to be set before asserting.\n// This is marked todo because the sleep needs to be removed in a separate PR that fixes this issue\nconst sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));\n\nconst beforeEach = async () => {\n  await sleep(100);\n};\n\n// Helper function to create checkbox items\nconst createCheckboxItems = (count: number) => {\n  return Array.from({ length: count }, (_, i) => ({\n    value: `checkbox${i + 1}`,\n    label: `Checkbox ${i + 1}`,\n  }));\n};\n\n// Basic CheckboxGroup with no initial selection\nexport const Basic: Story = {\n  args: {\n    children: createCheckboxItems(3).map((item) => (\n      <BaseCheckbox value={item.value}>{item.label}</BaseCheckbox>\n    )),\n  },\n  play: async ({ canvasElement, args }) => {\n    await beforeEach();\n    const canvas = within(canvasElement);\n\n    const checkboxes = await canvas.findAllByRole(\"checkbox\");\n    expect(checkboxes).toHaveLength(3);\n\n    // Verify initial state\n    checkboxes.forEach((checkbox) => {\n      expect(checkbox).not.toBeChecked();\n    });\n\n    // Test selection\n    await userEvent.click(checkboxes[1]);\n    expect(checkboxes[1]).toBeChecked();\n    expect(args.onChange).toHaveBeenCalledWith([\"checkbox2\"]);\n  },\n};\n\n// CheckboxGroup with pre-selected values\nexport const WithDefaultSelection: Story = {\n  args: {\n    defaultValue: [\"checkbox1\", \"checkbox3\"],\n    children: (\n      <>\n        {createCheckboxItems(3).map((item) => (\n          <BaseCheckbox value={item.value}>{item.label}</BaseCheckbox>\n        ))}\n        <BaseCheckbox defaultSelected value={\"Item 4\"}>\n          checkbox4\n        </BaseCheckbox>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    await beforeEach();\n\n    const canvas = within(canvasElement);\n    const checkboxes = await canvas.findAllByRole(\"checkbox\");\n\n    // Verify initial state\n    expect(checkboxes[0]).toBeChecked(); // via defaultValue prop passed to the group\n    expect(checkboxes[1]).not.toBeChecked();\n    expect(checkboxes[2]).toBeChecked(); // via defaultValue prop passed to the group\n    expect(checkboxes[3]).not.toBeChecked(); // defaultSelected prop passed directly has no effect within group\n\n    // Test deselection\n    await userEvent.click(checkboxes[0]);\n    expect(checkboxes[0]).not.toBeChecked(); //changed\n    expect(checkboxes[1]).not.toBeChecked();\n    expect(checkboxes[2]).toBeChecked();\n    expect(args.onChange).toHaveBeenCalledWith([\"checkbox3\"]);\n  },\n};\n\n// Disabled CheckboxGroup\nexport const Disabled: Story = {\n  args: {\n    isDisabled: true,\n    defaultValue: [\"checkbox1\"],\n    children: createCheckboxItems(3).map((item) => (\n      <BaseCheckbox key={item.value} value={item.value}>\n        {item.label}\n      </BaseCheckbox>\n    )),\n  },\n  play: async ({ canvasElement, args }) => {\n    await beforeEach();\n    const canvas = within(canvasElement);\n    const checkboxes = await canvas.findAllByRole(\"checkbox\");\n\n    // Verify disabled state\n    checkboxes.forEach((checkbox) => {\n      expect(checkbox).toBeDisabled();\n    });\n\n    // Verify clicks don't trigger changes\n    await userEvent.click(checkboxes[1]);\n    expect(args.onChange).not.toHaveBeenCalled();\n    expect(checkboxes[1]).not.toBeChecked();\n  },\n};\n\n// ReadOnly CheckboxGroup\nexport const ReadOnly: Story = {\n  args: {\n    isReadOnly: true,\n    defaultValue: [\"checkbox1\", \"checkbox2\"],\n    children: createCheckboxItems(3).map((item) => (\n      <BaseCheckbox key={item.value} value={item.value}>\n        {item.label}\n      </BaseCheckbox>\n    )),\n  },\n  play: async ({ canvasElement, args }) => {\n    await beforeEach();\n    const canvas = within(canvasElement);\n    const checkboxes = await canvas.findAllByRole(\"checkbox\");\n\n    // Verify readonly state\n    checkboxes.forEach((checkbox) => {\n      expect(checkbox).toHaveAttribute(\"aria-readonly\", \"true\");\n    });\n\n    // Verify clicks don't trigger changes\n    await userEvent.click(checkboxes[2]);\n    expect(args.onChange).not.toHaveBeenCalled();\n    expect(checkboxes[2]).not.toBeChecked();\n  },\n};\n"],"names":["BaseCheckboxGroup","fn","React","BaseCheckbox","within","expect","userEvent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,IAAuC,GAAA;AAAA,EAC3C,KAAO,EAAA,8BAAA;AAAA,EACP,SAAW,EAAAA,uCAAA;AAAA,EACX,IAAM,EAAA;AAAA,IACJ,UAAUC,OAAG,EAAA;AAAA,GACf;AACF,EAAA;AAQA,MAAM,KAAA,GAAQ,CAAC,EAAA,KAAe,IAAI,OAAA,CAAQ,CAAC,OAAY,KAAA,UAAA,CAAW,OAAS,EAAA,EAAE,CAAC,CAAA,CAAA;AAE9E,MAAM,aAAa,YAAY;AAC7B,EAAA,MAAM,MAAM,GAAG,CAAA,CAAA;AACjB,CAAA,CAAA;AAGA,MAAM,mBAAA,GAAsB,CAAC,KAAkB,KAAA;AAC7C,EAAO,OAAA,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,OAAS,EAAA,CAAC,GAAG,CAAO,MAAA;AAAA,IAC9C,KAAA,EAAO,WAAW,CAAI,GAAA,CAAA,CAAA,CAAA;AAAA,IACtB,KAAA,EAAO,YAAY,CAAI,GAAA,CAAA,CAAA,CAAA;AAAA,GACvB,CAAA,CAAA,CAAA;AACJ,CAAA,CAAA;AAGO,MAAM,KAAe,GAAA;AAAA,EAC1B,IAAM,EAAA;AAAA,IACJ,QAAU,EAAA,mBAAA,CAAoB,CAAC,CAAA,CAAE,IAAI,CAAC,IAAA,qBACnCC,sBAAA,CAAA,aAAA,CAAAC,6BAAA,EAAA,EAAa,KAAO,EAAA,IAAA,CAAK,KAAQ,EAAA,EAAA,IAAA,CAAK,KAAM,CAC9C,CAAA;AAAA,GACH;AAAA,EACA,IAAM,EAAA,OAAO,EAAE,aAAA,EAAe,MAAW,KAAA;AACvC,IAAA,MAAM,UAAW,EAAA,CAAA;AACjB,IAAM,MAAA,MAAA,GAASC,YAAO,aAAa,CAAA,CAAA;AAEnC,IAAA,MAAM,UAAa,GAAA,MAAM,MAAO,CAAA,aAAA,CAAc,UAAU,CAAA,CAAA;AACxD,IAAOC,WAAA,CAAA,UAAU,CAAE,CAAA,YAAA,CAAa,CAAC,CAAA,CAAA;AAGjC,IAAW,UAAA,CAAA,OAAA,CAAQ,CAAC,QAAa,KAAA;AAC/B,MAAOA,WAAA,CAAA,QAAQ,CAAE,CAAA,GAAA,CAAI,WAAY,EAAA,CAAA;AAAA,KAClC,CAAA,CAAA;AAGD,IAAA,MAAMC,cAAU,CAAA,KAAA,CAAM,UAAW,CAAA,CAAC,CAAC,CAAA,CAAA;AACnC,IAAAD,WAAA,CAAO,UAAW,CAAA,CAAC,CAAC,CAAA,CAAE,WAAY,EAAA,CAAA;AAClC,IAAAA,WAAA,CAAO,KAAK,QAAQ,CAAA,CAAE,oBAAqB,CAAA,CAAC,WAAW,CAAC,CAAA,CAAA;AAAA,GAC1D;AACF,EAAA;AAGO,MAAM,oBAA8B,GAAA;AAAA,EACzC,IAAM,EAAA;AAAA,IACJ,YAAA,EAAc,CAAC,WAAA,EAAa,WAAW,CAAA;AAAA,IACvC,QAAA,kBAEKH,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA,EAAA,mBAAA,CAAoB,CAAC,CAAA,CAAE,IAAI,CAAC,IAAA,qBAC1BA,sBAAA,CAAA,aAAA,CAAAC,6BAAA,EAAA,EAAa,KAAO,EAAA,IAAA,CAAK,SAAQ,IAAK,CAAA,KAAM,CAC9C,CAAA,kBACAD,sBAAA,CAAA,aAAA,CAAAC,6BAAA,EAAA,EAAa,iBAAe,IAAC,EAAA,KAAA,EAAO,QAAU,EAAA,EAAA,WAE/C,CACF,CAAA;AAAA,GAEJ;AAAA,EACA,IAAM,EAAA,OAAO,EAAE,aAAA,EAAe,MAAW,KAAA;AACvC,IAAA,MAAM,UAAW,EAAA,CAAA;AAEjB,IAAM,MAAA,MAAA,GAASC,YAAO,aAAa,CAAA,CAAA;AACnC,IAAA,MAAM,UAAa,GAAA,MAAM,MAAO,CAAA,aAAA,CAAc,UAAU,CAAA,CAAA;AAGxD,IAAAC,WAAA,CAAO,UAAW,CAAA,CAAC,CAAC,CAAA,CAAE,WAAY,EAAA,CAAA;AAClC,IAAAA,WAAA,CAAO,UAAW,CAAA,CAAC,CAAC,CAAA,CAAE,IAAI,WAAY,EAAA,CAAA;AACtC,IAAAA,WAAA,CAAO,UAAW,CAAA,CAAC,CAAC,CAAA,CAAE,WAAY,EAAA,CAAA;AAClC,IAAAA,WAAA,CAAO,UAAW,CAAA,CAAC,CAAC,CAAA,CAAE,IAAI,WAAY,EAAA,CAAA;AAGtC,IAAA,MAAMC,cAAU,CAAA,KAAA,CAAM,UAAW,CAAA,CAAC,CAAC,CAAA,CAAA;AACnC,IAAAD,WAAA,CAAO,UAAW,CAAA,CAAC,CAAC,CAAA,CAAE,IAAI,WAAY,EAAA,CAAA;AACtC,IAAAA,WAAA,CAAO,UAAW,CAAA,CAAC,CAAC,CAAA,CAAE,IAAI,WAAY,EAAA,CAAA;AACtC,IAAAA,WAAA,CAAO,UAAW,CAAA,CAAC,CAAC,CAAA,CAAE,WAAY,EAAA,CAAA;AAClC,IAAAA,WAAA,CAAO,KAAK,QAAQ,CAAA,CAAE,oBAAqB,CAAA,CAAC,WAAW,CAAC,CAAA,CAAA;AAAA,GAC1D;AACF,EAAA;AAGO,MAAM,QAAkB,GAAA;AAAA,EAC7B,IAAM,EAAA;AAAA,IACJ,UAAY,EAAA,IAAA;AAAA,IACZ,YAAA,EAAc,CAAC,WAAW,CAAA;AAAA,IAC1B,UAAU,mBAAoB,CAAA,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,IACpC,qBAAAH,sBAAA,CAAA,aAAA,CAACC,6BAAa,EAAA,EAAA,GAAA,EAAK,KAAK,KAAO,EAAA,KAAA,EAAO,KAAK,KACxC,EAAA,EAAA,IAAA,CAAK,KACR,CACD,CAAA;AAAA,GACH;AAAA,EACA,IAAM,EAAA,OAAO,EAAE,aAAA,EAAe,MAAW,KAAA;AACvC,IAAA,MAAM,UAAW,EAAA,CAAA;AACjB,IAAM,MAAA,MAAA,GAASC,YAAO,aAAa,CAAA,CAAA;AACnC,IAAA,MAAM,UAAa,GAAA,MAAM,MAAO,CAAA,aAAA,CAAc,UAAU,CAAA,CAAA;AAGxD,IAAW,UAAA,CAAA,OAAA,CAAQ,CAAC,QAAa,KAAA;AAC/B,MAAOC,WAAA,CAAA,QAAQ,EAAE,YAAa,EAAA,CAAA;AAAA,KAC/B,CAAA,CAAA;AAGD,IAAA,MAAMC,cAAU,CAAA,KAAA,CAAM,UAAW,CAAA,CAAC,CAAC,CAAA,CAAA;AACnC,IAAAD,WAAA,CAAO,IAAK,CAAA,QAAQ,CAAE,CAAA,GAAA,CAAI,gBAAiB,EAAA,CAAA;AAC3C,IAAAA,WAAA,CAAO,UAAW,CAAA,CAAC,CAAC,CAAA,CAAE,IAAI,WAAY,EAAA,CAAA;AAAA,GACxC;AACF,EAAA;AAGO,MAAM,QAAkB,GAAA;AAAA,EAC7B,IAAM,EAAA;AAAA,IACJ,UAAY,EAAA,IAAA;AAAA,IACZ,YAAA,EAAc,CAAC,WAAA,EAAa,WAAW,CAAA;AAAA,IACvC,UAAU,mBAAoB,CAAA,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,IACpC,qBAAAH,sBAAA,CAAA,aAAA,CAACC,6BAAa,EAAA,EAAA,GAAA,EAAK,KAAK,KAAO,EAAA,KAAA,EAAO,KAAK,KACxC,EAAA,EAAA,IAAA,CAAK,KACR,CACD,CAAA;AAAA,GACH;AAAA,EACA,IAAM,EAAA,OAAO,EAAE,aAAA,EAAe,MAAW,KAAA;AACvC,IAAA,MAAM,UAAW,EAAA,CAAA;AACjB,IAAM,MAAA,MAAA,GAASC,YAAO,aAAa,CAAA,CAAA;AACnC,IAAA,MAAM,UAAa,GAAA,MAAM,MAAO,CAAA,aAAA,CAAc,UAAU,CAAA,CAAA;AAGxD,IAAW,UAAA,CAAA,OAAA,CAAQ,CAAC,QAAa,KAAA;AAC/B,MAAAC,WAAA,CAAO,QAAQ,CAAA,CAAE,eAAgB,CAAA,eAAA,EAAiB,MAAM,CAAA,CAAA;AAAA,KACzD,CAAA,CAAA;AAGD,IAAA,MAAMC,cAAU,CAAA,KAAA,CAAM,UAAW,CAAA,CAAC,CAAC,CAAA,CAAA;AACnC,IAAAD,WAAA,CAAO,IAAK,CAAA,QAAQ,CAAE,CAAA,GAAA,CAAI,gBAAiB,EAAA,CAAA;AAC3C,IAAAA,WAAA,CAAO,UAAW,CAAA,CAAC,CAAC,CAAA,CAAE,IAAI,WAAY,EAAA,CAAA;AAAA,GACxC;AACF;;;;;;;;"}

package/skinny/registerCheckboxGroup.stories.esm.js

@@ -0,0 +1,109 @@
+import { fn, within, expect, userEvent } from '@storybook/test';
+import React from 'react';
+import { BaseCheckbox } from './registerCheckbox.esm.js';
+import { BaseCheckboxGroup } from './registerCheckboxGroup.esm.js';
+import 'react-aria-components';
+import './common-ceebbaea.esm.js';
+import './utils-5d1b4c6b.esm.js';
+import '@plasmicapp/host';
+import '@plasmicapp/host/registerComponent';
+import './contexts-5cb81c2f.esm.js';
+import './variant-utils-4405ebb0.esm.js';
+import './OptionsItemIdManager-832b8cfe.esm.js';
+import './registerDescription.esm.js';
+import './registerText.esm.js';
+import './registerLabel.esm.js';
+
+const meta = {
+  title: "Components/BaseCheckboxGroup",
+  component: BaseCheckboxGroup,
+  args: {
+    onChange: fn()
+  }
+};
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+const beforeEach = async () => {
+  await sleep(100);
+};
+const createCheckboxItems = (count) => {
+  return Array.from({ length: count }, (_, i) => ({
+    value: `checkbox${i + 1}`,
+    label: `Checkbox ${i + 1}`
+  }));
+};
+const Basic = {
+  args: {
+    children: createCheckboxItems(3).map((item) => /* @__PURE__ */ React.createElement(BaseCheckbox, { value: item.value }, item.label))
+  },
+  play: async ({ canvasElement, args }) => {
+    await beforeEach();
+    const canvas = within(canvasElement);
+    const checkboxes = await canvas.findAllByRole("checkbox");
+    expect(checkboxes).toHaveLength(3);
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox).not.toBeChecked();
+    });
+    await userEvent.click(checkboxes[1]);
+    expect(checkboxes[1]).toBeChecked();
+    expect(args.onChange).toHaveBeenCalledWith(["checkbox2"]);
+  }
+};
+const WithDefaultSelection = {
+  args: {
+    defaultValue: ["checkbox1", "checkbox3"],
+    children: /* @__PURE__ */ React.createElement(React.Fragment, null, createCheckboxItems(3).map((item) => /* @__PURE__ */ React.createElement(BaseCheckbox, { value: item.value }, item.label)), /* @__PURE__ */ React.createElement(BaseCheckbox, { defaultSelected: true, value: "Item 4" }, "checkbox4"))
+  },
+  play: async ({ canvasElement, args }) => {
+    await beforeEach();
+    const canvas = within(canvasElement);
+    const checkboxes = await canvas.findAllByRole("checkbox");
+    expect(checkboxes[0]).toBeChecked();
+    expect(checkboxes[1]).not.toBeChecked();
+    expect(checkboxes[2]).toBeChecked();
+    expect(checkboxes[3]).not.toBeChecked();
+    await userEvent.click(checkboxes[0]);
+    expect(checkboxes[0]).not.toBeChecked();
+    expect(checkboxes[1]).not.toBeChecked();
+    expect(checkboxes[2]).toBeChecked();
+    expect(args.onChange).toHaveBeenCalledWith(["checkbox3"]);
+  }
+};
+const Disabled = {
+  args: {
+    isDisabled: true,
+    defaultValue: ["checkbox1"],
+    children: createCheckboxItems(3).map((item) => /* @__PURE__ */ React.createElement(BaseCheckbox, { key: item.value, value: item.value }, item.label))
+  },
+  play: async ({ canvasElement, args }) => {
+    await beforeEach();
+    const canvas = within(canvasElement);
+    const checkboxes = await canvas.findAllByRole("checkbox");
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox).toBeDisabled();
+    });
+    await userEvent.click(checkboxes[1]);
+    expect(args.onChange).not.toHaveBeenCalled();
+    expect(checkboxes[1]).not.toBeChecked();
+  }
+};
+const ReadOnly = {
+  args: {
+    isReadOnly: true,
+    defaultValue: ["checkbox1", "checkbox2"],
+    children: createCheckboxItems(3).map((item) => /* @__PURE__ */ React.createElement(BaseCheckbox, { key: item.value, value: item.value }, item.label))
+  },
+  play: async ({ canvasElement, args }) => {
+    await beforeEach();
+    const canvas = within(canvasElement);
+    const checkboxes = await canvas.findAllByRole("checkbox");
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox).toHaveAttribute("aria-readonly", "true");
+    });
+    await userEvent.click(checkboxes[2]);
+    expect(args.onChange).not.toHaveBeenCalled();
+    expect(checkboxes[2]).not.toBeChecked();
+  }
+};
+
+export { Basic, Disabled, ReadOnly, WithDefaultSelection, meta as default };
+//# sourceMappingURL=registerCheckboxGroup.stories.esm.js.map

package/skinny/registerCheckboxGroup.stories.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerCheckboxGroup.stories.esm.js","sources":["../src/registerCheckboxGroup.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\nimport React from \"react\";\nimport { BaseCheckbox } from \"./registerCheckbox\";\nimport { BaseCheckboxGroup } from \"./registerCheckboxGroup\";\n\nconst meta: Meta<typeof BaseCheckboxGroup> = {\n  title: \"Components/BaseCheckboxGroup\",\n  component: BaseCheckboxGroup,\n  args: {\n    onChange: fn(),\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BaseCheckboxGroup>;\n\n// TODO: Assertions may be flaky because the registeredId is set inside useEffect, so in the first render, the id is randomly generated by react-aria itself.\n// We use sleep to wait for the id to be set before asserting.\n// This is marked todo because the sleep needs to be removed in a separate PR that fixes this issue\nconst sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));\n\nconst beforeEach = async () => {\n  await sleep(100);\n};\n\n// Helper function to create checkbox items\nconst createCheckboxItems = (count: number) => {\n  return Array.from({ length: count }, (_, i) => ({\n    value: `checkbox${i + 1}`,\n    label: `Checkbox ${i + 1}`,\n  }));\n};\n\n// Basic CheckboxGroup with no initial selection\nexport const Basic: Story = {\n  args: {\n    children: createCheckboxItems(3).map((item) => (\n      <BaseCheckbox value={item.value}>{item.label}</BaseCheckbox>\n    )),\n  },\n  play: async ({ canvasElement, args }) => {\n    await beforeEach();\n    const canvas = within(canvasElement);\n\n    const checkboxes = await canvas.findAllByRole(\"checkbox\");\n    expect(checkboxes).toHaveLength(3);\n\n    // Verify initial state\n    checkboxes.forEach((checkbox) => {\n      expect(checkbox).not.toBeChecked();\n    });\n\n    // Test selection\n    await userEvent.click(checkboxes[1]);\n    expect(checkboxes[1]).toBeChecked();\n    expect(args.onChange).toHaveBeenCalledWith([\"checkbox2\"]);\n  },\n};\n\n// CheckboxGroup with pre-selected values\nexport const WithDefaultSelection: Story = {\n  args: {\n    defaultValue: [\"checkbox1\", \"checkbox3\"],\n    children: (\n      <>\n        {createCheckboxItems(3).map((item) => (\n          <BaseCheckbox value={item.value}>{item.label}</BaseCheckbox>\n        ))}\n        <BaseCheckbox defaultSelected value={\"Item 4\"}>\n          checkbox4\n        </BaseCheckbox>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    await beforeEach();\n\n    const canvas = within(canvasElement);\n    const checkboxes = await canvas.findAllByRole(\"checkbox\");\n\n    // Verify initial state\n    expect(checkboxes[0]).toBeChecked(); // via defaultValue prop passed to the group\n    expect(checkboxes[1]).not.toBeChecked();\n    expect(checkboxes[2]).toBeChecked(); // via defaultValue prop passed to the group\n    expect(checkboxes[3]).not.toBeChecked(); // defaultSelected prop passed directly has no effect within group\n\n    // Test deselection\n    await userEvent.click(checkboxes[0]);\n    expect(checkboxes[0]).not.toBeChecked(); //changed\n    expect(checkboxes[1]).not.toBeChecked();\n    expect(checkboxes[2]).toBeChecked();\n    expect(args.onChange).toHaveBeenCalledWith([\"checkbox3\"]);\n  },\n};\n\n// Disabled CheckboxGroup\nexport const Disabled: Story = {\n  args: {\n    isDisabled: true,\n    defaultValue: [\"checkbox1\"],\n    children: createCheckboxItems(3).map((item) => (\n      <BaseCheckbox key={item.value} value={item.value}>\n        {item.label}\n      </BaseCheckbox>\n    )),\n  },\n  play: async ({ canvasElement, args }) => {\n    await beforeEach();\n    const canvas = within(canvasElement);\n    const checkboxes = await canvas.findAllByRole(\"checkbox\");\n\n    // Verify disabled state\n    checkboxes.forEach((checkbox) => {\n      expect(checkbox).toBeDisabled();\n    });\n\n    // Verify clicks don't trigger changes\n    await userEvent.click(checkboxes[1]);\n    expect(args.onChange).not.toHaveBeenCalled();\n    expect(checkboxes[1]).not.toBeChecked();\n  },\n};\n\n// ReadOnly CheckboxGroup\nexport const ReadOnly: Story = {\n  args: {\n    isReadOnly: true,\n    defaultValue: [\"checkbox1\", \"checkbox2\"],\n    children: createCheckboxItems(3).map((item) => (\n      <BaseCheckbox key={item.value} value={item.value}>\n        {item.label}\n      </BaseCheckbox>\n    )),\n  },\n  play: async ({ canvasElement, args }) => {\n    await beforeEach();\n    const canvas = within(canvasElement);\n    const checkboxes = await canvas.findAllByRole(\"checkbox\");\n\n    // Verify readonly state\n    checkboxes.forEach((checkbox) => {\n      expect(checkbox).toHaveAttribute(\"aria-readonly\", \"true\");\n    });\n\n    // Verify clicks don't trigger changes\n    await userEvent.click(checkboxes[2]);\n    expect(args.onChange).not.toHaveBeenCalled();\n    expect(checkboxes[2]).not.toBeChecked();\n  },\n};\n"],"names":[],"mappings":"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"}

package/skinny/registerComboBox.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerComboBox.cjs.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport {\n  ComboBox,\n  ComboBoxProps,\n  ComboBoxRenderProps,\n  ComboBoxStateContext,\n} from \"react-aria-components\";\nimport { arrowDown, COMMON_STYLES, getCommonProps } from \"./common\";\nimport {\n  PlasmicInputContext,\n  PlasmicListBoxContext,\n  PlasmicPopoverTriggerContext,\n} from \"./contexts\";\nimport { OptionsItemIdManager } 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  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n  useAutoOpen,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nexport interface BaseComboboxControlContextData {\n  itemIds: string[];\n}\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    WithVariants<typeof COMBOBOX_VARIANTS>,\n    HasControlContextData<BaseComboboxControlContextData> {\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: any) {\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    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 idManager = useMemo(() => new OptionsItemIdManager(), []);\n\n  useEffect(() => {\n    idManager.subscribe((ids: string[]) => {\n      setControlContextData?.({\n        itemIds: ids,\n      });\n    });\n  }, []);\n\n  return (\n    <ComboBox className={classNameProp} {...rest} style={COMMON_STYLES}>\n      <PlasmicPopoverTriggerContext.Provider value={true}>\n        <PlasmicListBoxContext.Provider\n          value={{\n            idManager,\n          }}\n        >\n          <PlasmicInputContext.Provider value={{ isUncontrolled: true }}>\n            <ComboboxAutoOpen {...props} />\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      ...getCommonProps<BaseComboboxProps>(\"ComboBox\", [\n        \"name\",\n        \"aria-label\",\n        \"isDisabled\",\n      ]),\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","useMemo","OptionsItemIdManager","useEffect","React","ComboBox","COMMON_STYLES","PlasmicPopoverTriggerContext","PlasmicListBoxContext","PlasmicInputContext","registerComponentHelper","getCommonProps","LABEL_COMPONENT_NAME","INPUT_COMPONENT_NAME","BUTTON_COMPONENT_NAME","arrowDown","POPOVER_COMPONENT_NAME","LIST_BOX_COMPONENT_NAME"],"mappings":"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"}
+{"version":3,"file":"registerComboBox.cjs.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport {\n  ComboBox,\n  ComboBoxProps,\n  ComboBoxRenderProps,\n  ComboBoxStateContext,\n} from \"react-aria-components\";\nimport { arrowDown, COMMON_STYLES, getCommonProps } from \"./common\";\nimport {\n  PlasmicInputContext,\n  PlasmicListBoxContext,\n  PlasmicPopoverTriggerContext,\n} from \"./contexts\";\nimport { OptionsItemIdManager } 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  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n  useAutoOpen,\n  WithPlasmicCanvasComponentInfo,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nexport interface BaseComboboxControlContextData {\n  itemIds: string[];\n}\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    WithPlasmicCanvasComponentInfo,\n    WithVariants<typeof COMBOBOX_VARIANTS>,\n    HasControlContextData<BaseComboboxControlContextData> {\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: any) {\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    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 idManager = useMemo(() => new OptionsItemIdManager(), []);\n\n  useEffect(() => {\n    idManager.subscribe((ids: string[]) => {\n      setControlContextData?.({\n        itemIds: ids,\n      });\n    });\n  }, []);\n\n  return (\n    <ComboBox className={classNameProp} {...rest} style={COMMON_STYLES}>\n      <PlasmicPopoverTriggerContext.Provider value={true}>\n        <PlasmicListBoxContext.Provider\n          value={{\n            idManager,\n          }}\n        >\n          <PlasmicInputContext.Provider value={{ isUncontrolled: true }}>\n            <ComboboxAutoOpen {...props} />\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      ...getCommonProps<BaseComboboxProps>(\"ComboBox\", [\n        \"name\",\n        \"aria-label\",\n        \"isDisabled\",\n      ]),\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","useMemo","OptionsItemIdManager","useEffect","React","ComboBox","COMMON_STYLES","PlasmicPopoverTriggerContext","PlasmicListBoxContext","PlasmicInputContext","registerComponentHelper","getCommonProps","LABEL_COMPONENT_NAME","INPUT_COMPONENT_NAME","BUTTON_COMPONENT_NAME","arrowDown","POPOVER_COMPONENT_NAME","LIST_BOX_COMPONENT_NAME"],"mappings":"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"}

package/skinny/registerComboBox.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import { ComboBoxProps } from "react-aria-components";
-import { HasControlContextData, Registerable } from "./utils";
+import { HasControlContextData, Registerable, WithPlasmicCanvasComponentInfo } from "./utils";
 import { WithVariants } from "./variant-utils";
 export interface BaseComboboxControlContextData {
     itemIds: string[];
 }
 declare const COMBOBOX_VARIANTS: "disabled"[];
-export interface BaseComboboxProps extends ComboBoxProps<{}>, WithVariants<typeof COMBOBOX_VARIANTS>, HasControlContextData<BaseComboboxControlContextData> {
+export interface BaseComboboxProps extends ComboBoxProps<{}>, WithPlasmicCanvasComponentInfo, WithVariants<typeof COMBOBOX_VARIANTS>, HasControlContextData<BaseComboboxControlContextData> {
     children?: React.ReactNode;
     isOpen?: boolean;
     className?: string;

package/skinny/registerComboBox.esm.js

@@ -6,7 +6,7 @@ import { O as OptionsItemIdManager } from './OptionsItemIdManager-832b8cfe.esm.j
 import { BUTTON_COMPONENT_NAME } from './registerButton.esm.js';
 import { INPUT_COMPONENT_NAME } from './registerInput.esm.js';
 import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
-import { L as LIST_BOX_COMPONENT_NAME } from './registerListBox-40846430.esm.js';
+import { L as LIST_BOX_COMPONENT_NAME } from './registerListBox-49626f55.esm.js';
 import { POPOVER_COMPONENT_NAME } from './registerPopover.esm.js';
 import { r as registerComponentHelper, m as makeComponentName, u as useAutoOpen } from './utils-5d1b4c6b.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';

package/skinny/registerComboBox.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerComboBox.esm.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport {\n  ComboBox,\n  ComboBoxProps,\n  ComboBoxRenderProps,\n  ComboBoxStateContext,\n} from \"react-aria-components\";\nimport { arrowDown, COMMON_STYLES, getCommonProps } from \"./common\";\nimport {\n  PlasmicInputContext,\n  PlasmicListBoxContext,\n  PlasmicPopoverTriggerContext,\n} from \"./contexts\";\nimport { OptionsItemIdManager } 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  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n  useAutoOpen,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nexport interface BaseComboboxControlContextData {\n  itemIds: string[];\n}\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    WithVariants<typeof COMBOBOX_VARIANTS>,\n    HasControlContextData<BaseComboboxControlContextData> {\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: any) {\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    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 idManager = useMemo(() => new OptionsItemIdManager(), []);\n\n  useEffect(() => {\n    idManager.subscribe((ids: string[]) => {\n      setControlContextData?.({\n        itemIds: ids,\n      });\n    });\n  }, []);\n\n  return (\n    <ComboBox className={classNameProp} {...rest} style={COMMON_STYLES}>\n      <PlasmicPopoverTriggerContext.Provider value={true}>\n        <PlasmicListBoxContext.Provider\n          value={{\n            idManager,\n          }}\n        >\n          <PlasmicInputContext.Provider value={{ isUncontrolled: true }}>\n            <ComboboxAutoOpen {...props} />\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      ...getCommonProps<BaseComboboxProps>(\"ComboBox\", [\n        \"name\",\n        \"aria-label\",\n        \"isDisabled\",\n      ]),\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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"}
+{"version":3,"file":"registerComboBox.esm.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport {\n  ComboBox,\n  ComboBoxProps,\n  ComboBoxRenderProps,\n  ComboBoxStateContext,\n} from \"react-aria-components\";\nimport { arrowDown, COMMON_STYLES, getCommonProps } from \"./common\";\nimport {\n  PlasmicInputContext,\n  PlasmicListBoxContext,\n  PlasmicPopoverTriggerContext,\n} from \"./contexts\";\nimport { OptionsItemIdManager } 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  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n  useAutoOpen,\n  WithPlasmicCanvasComponentInfo,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nexport interface BaseComboboxControlContextData {\n  itemIds: string[];\n}\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    WithPlasmicCanvasComponentInfo,\n    WithVariants<typeof COMBOBOX_VARIANTS>,\n    HasControlContextData<BaseComboboxControlContextData> {\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: any) {\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    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 idManager = useMemo(() => new OptionsItemIdManager(), []);\n\n  useEffect(() => {\n    idManager.subscribe((ids: string[]) => {\n      setControlContextData?.({\n        itemIds: ids,\n      });\n    });\n  }, []);\n\n  return (\n    <ComboBox className={classNameProp} {...rest} style={COMMON_STYLES}>\n      <PlasmicPopoverTriggerContext.Provider value={true}>\n        <PlasmicListBoxContext.Provider\n          value={{\n            idManager,\n          }}\n        >\n          <PlasmicInputContext.Provider value={{ isUncontrolled: true }}>\n            <ComboboxAutoOpen {...props} />\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      ...getCommonProps<BaseComboboxProps>(\"ComboBox\", [\n        \"name\",\n        \"aria-label\",\n        \"isDisabled\",\n      ]),\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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"}