@plasmicpkgs/react-aria 0.0.110 → 0.0.112

package/skinny/registerTextField-common-stories.esm.js

@@ -0,0 +1,185 @@
+import { fn, within, expect, userEvent, waitFor } from '@storybook/test';
+import React, { useState } from 'react';
+import { BaseLabel } from './registerLabel.esm.js';
+import { BaseTextField } from './registerTextField.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 './registerDescription.esm.js';
+import './registerText.esm.js';
+import './registerInput.esm.js';
+import 'react-aria';
+import './variant-utils-4405ebb0.esm.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const Basic = {
+  args: {
+    onFocus: fn(),
+    onBlur: fn(),
+    onFocusChange: fn(),
+    onKeyDown: fn(),
+    onKeyUp: fn(),
+    onBeforeInput: fn(),
+    onInput: fn()
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const textbox = await canvas.findByRole("textbox");
+    const label = await canvas.findByText("Label");
+    expect(textbox).not.toHaveFocus();
+    await userEvent.click(label);
+    await waitFor(() => {
+      expect(textbox).toHaveFocus();
+      expect(args.onFocus).toHaveBeenCalledOnce();
+    });
+    await userEvent.type(textbox, "testuser");
+    expect(textbox).toHaveValue("testuser");
+    await waitFor(() => {
+      expect(args.onChange).toHaveBeenCalledTimes(8);
+      expect(args.onInput).toHaveBeenCalledTimes(8);
+      expect(args.onKeyDown).toHaveBeenCalledTimes(8);
+      expect(args.onKeyUp).toHaveBeenCalledTimes(8);
+    });
+    await userEvent.tab();
+    await waitFor(() => {
+      expect(textbox).not.toHaveFocus();
+      expect(args.onBlur).toHaveBeenCalledOnce();
+      expect(args.onFocusChange).toHaveBeenCalledTimes(2);
+    });
+  }
+};
+const WithInitialValue = {
+  args: {
+    defaultValue: "initial value"
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textbox = await canvas.findByRole("textbox");
+    expect(textbox).toHaveValue("initial value");
+    await userEvent.type(textbox, "++");
+    expect(textbox).toHaveValue("initial value++");
+  }
+};
+const Disabled = {
+  args: {
+    isDisabled: true
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const textbox = await canvas.findByRole("textbox");
+    expect(textbox).toBeDisabled();
+    await userEvent.click(textbox);
+    expect(textbox).not.toHaveFocus();
+    await userEvent.type(textbox, "++");
+    expect(textbox).toHaveValue("");
+    expect(args.onChange).not.toHaveBeenCalled();
+  }
+};
+const ReadOnly = {
+  args: {
+    isReadOnly: true,
+    defaultValue: "Read-only content"
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const textbox = await canvas.findByRole("textbox");
+    expect(textbox).not.toBeDisabled();
+    expect(textbox).toHaveValue("Read-only content");
+    await userEvent.type(textbox, "attempted edit");
+    expect(textbox).toHaveValue("Read-only content");
+    expect(args.onChange).not.toHaveBeenCalled();
+  }
+};
+const AutoFocused = {
+  args: {
+    autoFocus: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textbox = await canvas.findByRole("textbox");
+    expect(textbox).toHaveFocus();
+  }
+};
+const WithAutoComplete = {
+  args: {
+    autoComplete: ["shipping", "street-address"]
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textbox = await canvas.findByRole("textbox");
+    expect(textbox).toHaveAttribute("autocomplete", "shipping street-address");
+  }
+};
+const WithMaxLength = {
+  args: {
+    maxLength: 10
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textbox = await canvas.findByRole("textbox");
+    expect(textbox).toHaveAttribute("maxlength", "10");
+    await userEvent.type(textbox, "abcdefghijklmnopqrstuvwxyz");
+    expect(textbox).toHaveValue("abcdefghij");
+  }
+};
+const Invalid = {
+  args: {
+    isInvalid: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textbox = await canvas.findByRole("textbox");
+    expect(textbox).toHaveAttribute("aria-invalid", "true");
+  }
+};
+const createControlledTextFieldStory = (inputComponent) => ({
+  render: (args) => {
+    var _a;
+    const [value, setValue] = useState((_a = args.defaultValue) != null ? _a : "");
+    return /* @__PURE__ */ React.createElement(
+      BaseTextField,
+      __spreadProps(__spreadValues({}, args), {
+        value,
+        onChange: (e) => {
+          var _a2;
+          setValue(e);
+          (_a2 = args.onChange) == null ? void 0 : _a2.call(args, e);
+        }
+      }),
+      /* @__PURE__ */ React.createElement(BaseLabel, null, "Label"),
+      inputComponent
+    );
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const textbox = await canvas.findByRole("textbox");
+    expect(textbox).toHaveValue("");
+    await userEvent.type(textbox, "testuser");
+    expect(textbox).toHaveValue("testuser");
+    expect(args.onChange).toHaveBeenCalledWith("testuser");
+  }
+});
+
+export { AutoFocused, Basic, Disabled, Invalid, ReadOnly, WithAutoComplete, WithInitialValue, WithMaxLength, createControlledTextFieldStory };
+//# sourceMappingURL=registerTextField-common-stories.esm.js.map

package/skinny/registerTextField-common-stories.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerTextField-common-stories.esm.js","sources":["../src/registerTextField-common-stories.tsx"],"sourcesContent":["import type { StoryObj } from \"@storybook/react\";\nimport { expect, fn, userEvent, waitFor, within } from \"@storybook/test\";\nimport React, { useState } from \"react\";\nimport { BaseLabel } from \"./registerLabel\";\nimport { BaseTextField } from \"./registerTextField\";\n\nexport type Story = StoryObj<typeof BaseTextField>;\n\nexport const Basic: Story = {\n  args: {\n    onFocus: fn(),\n    onBlur: fn(),\n    onFocusChange: fn(),\n    onKeyDown: fn(),\n    onKeyUp: fn(),\n    onBeforeInput: fn(),\n    onInput: fn(),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const textbox = await canvas.findByRole(\"textbox\");\n    const label = await canvas.findByText(\"Label\");\n\n    // Verify initial state\n    expect(textbox).not.toHaveFocus();\n\n    // Test interaction\n    await userEvent.click(label);\n    await waitFor(() => {\n      expect(textbox).toHaveFocus();\n      expect(args.onFocus).toHaveBeenCalledOnce();\n    });\n\n    await userEvent.type(textbox, \"testuser\");\n    expect(textbox).toHaveValue(\"testuser\");\n    await waitFor(() => {\n      expect(args.onChange).toHaveBeenCalledTimes(8);\n      expect(args.onInput).toHaveBeenCalledTimes(8);\n      // onBeforeInput isn't fired by userEvent.type because of an issue in @testing-library/user-event or React: https://github.com/testing-library/user-event/issues/858#issuecomment-1124820366\n      // On actual key presses, it is fired.\n      // expect(args.onBeforeInput).toHaveBeenCalledTimes(8);\n      expect(args.onKeyDown).toHaveBeenCalledTimes(8);\n      expect(args.onKeyUp).toHaveBeenCalledTimes(8);\n    });\n\n    await userEvent.tab();\n    await waitFor(() => {\n      expect(textbox).not.toHaveFocus();\n      expect(args.onBlur).toHaveBeenCalledOnce();\n      expect(args.onFocusChange).toHaveBeenCalledTimes(2);\n    });\n  },\n};\n\n// TextField with initial value\nexport const WithInitialValue: Story = {\n  args: {\n    defaultValue: \"initial value\",\n  },\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const textbox = await canvas.findByRole(\"textbox\");\n\n    // Verify initial value\n    expect(textbox).toHaveValue(\"initial value\");\n    await userEvent.type(textbox, \"++\");\n    expect(textbox).toHaveValue(\"initial value++\");\n  },\n};\n\n// Disabled TextField\nexport const Disabled: Story = {\n  args: {\n    isDisabled: true,\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const textbox = await canvas.findByRole(\"textbox\");\n\n    // Verify disabled state\n    expect(textbox).toBeDisabled();\n\n    // Try to interact and verify nothing happens\n    await userEvent.click(textbox);\n    expect(textbox).not.toHaveFocus(); // not changed\n\n    await userEvent.type(textbox, \"++\");\n    expect(textbox).toHaveValue(\"\"); // not changed\n    expect(args.onChange).not.toHaveBeenCalled();\n  },\n};\n\n// Read-only TextField\nexport const ReadOnly: Story = {\n  args: {\n    isReadOnly: true,\n    defaultValue: \"Read-only content\",\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const textbox = await canvas.findByRole(\"textbox\");\n\n    // Verify read-only state\n    expect(textbox).not.toBeDisabled();\n    expect(textbox).toHaveValue(\"Read-only content\");\n\n    // Verify user can't type in the field\n    await userEvent.type(textbox, \"attempted edit\");\n    expect(textbox).toHaveValue(\"Read-only content\"); // not changed\n    expect(args.onChange).not.toHaveBeenCalled();\n  },\n};\n\nexport const AutoFocused: Story = {\n  args: {\n    autoFocus: true,\n  },\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const textbox = await canvas.findByRole(\"textbox\");\n\n    expect(textbox).toHaveFocus();\n  },\n};\n\n// TextField with custom auto-complete\nexport const WithAutoComplete: Story = {\n  args: {\n    autoComplete: [\"shipping\", \"street-address\"],\n  },\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const textbox = await canvas.findByRole(\"textbox\");\n\n    // Verify autocomplete attribute\n    expect(textbox).toHaveAttribute(\"autocomplete\", \"shipping street-address\");\n  },\n};\n\n// TextField with max length\nexport const WithMaxLength: Story = {\n  args: {\n    maxLength: 10,\n  },\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const textbox = await canvas.findByRole(\"textbox\");\n\n    // Verify maxlength attribute\n    expect(textbox).toHaveAttribute(\"maxlength\", \"10\");\n\n    // Type more than max length and verify truncation\n    await userEvent.type(textbox, \"abcdefghijklmnopqrstuvwxyz\");\n    expect(textbox).toHaveValue(\"abcdefghij\"); // uses the first 10 characters only\n  },\n};\n\n// TextField with invalid state\nexport const Invalid: Story = {\n  args: {\n    isInvalid: true,\n  },\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const textbox = await canvas.findByRole(\"textbox\");\n\n    // Verify aria-invalid attribute\n    expect(textbox).toHaveAttribute(\"aria-invalid\", \"true\");\n  },\n};\n\nexport const createControlledTextFieldStory = (\n  inputComponent: React.ReactElement\n) =>\n  ({\n    render: (args) => {\n      const [value, setValue] = useState(args.defaultValue ?? \"\");\n      return (\n        <BaseTextField\n          {...args}\n          value={value}\n          onChange={(e) => {\n            setValue(e);\n            args.onChange?.(e);\n          }}\n        >\n          <BaseLabel>Label</BaseLabel>\n          {inputComponent}\n        </BaseTextField>\n      );\n    },\n    play: async ({ canvasElement, args }) => {\n      const canvas = within(canvasElement);\n      const textbox = await canvas.findByRole(\"textbox\");\n      expect(textbox).toHaveValue(\"\");\n\n      await userEvent.type(textbox, \"testuser\");\n      expect(textbox).toHaveValue(\"testuser\");\n      expect(args.onChange).toHaveBeenCalledWith(\"testuser\");\n    },\n  } as Story);\n"],"names":["_a"],"mappings":"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"}

package/skinny/registerTextField-input.stories.cjs.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var test = require('@storybook/test');
+var React = require('react');
+var registerInput = require('./registerInput.cjs.js');
+var registerLabel = require('./registerLabel.cjs.js');
+var registerTextField = require('./registerTextField.cjs.js');
+var registerTextFieldCommonStories = require('./registerTextField-common-stories.cjs.js');
+require('react-aria');
+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('./registerDescription.cjs.js');
+require('./registerText.cjs.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const meta = {
+  title: "Components/BaseTextField (BaseInput)",
+  component: registerTextField.BaseTextField,
+  args: {
+    children: /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(registerLabel.BaseLabel, null, "Label"), /* @__PURE__ */ React__default.default.createElement(registerInput.BaseInput, null)),
+    onChange: test.fn()
+  }
+};
+const Basic = registerTextFieldCommonStories.Basic;
+const WithInitialValue = registerTextFieldCommonStories.WithInitialValue;
+const Disabled = registerTextFieldCommonStories.Disabled;
+const ReadOnly = registerTextFieldCommonStories.ReadOnly;
+const AutoFocused = registerTextFieldCommonStories.AutoFocused;
+const WithAutoComplete = registerTextFieldCommonStories.WithAutoComplete;
+const WithMaxLength = registerTextFieldCommonStories.WithMaxLength;
+const Invalid = registerTextFieldCommonStories.Invalid;
+const Controlled = registerTextFieldCommonStories.createControlledTextFieldStory(/* @__PURE__ */ React__default.default.createElement(registerInput.BaseInput, null));
+
+exports.AutoFocused = AutoFocused;
+exports.Basic = Basic;
+exports.Controlled = Controlled;
+exports.Disabled = Disabled;
+exports.Invalid = Invalid;
+exports.ReadOnly = ReadOnly;
+exports.WithAutoComplete = WithAutoComplete;
+exports.WithInitialValue = WithInitialValue;
+exports.WithMaxLength = WithMaxLength;
+exports.default = meta;
+//# sourceMappingURL=registerTextField-input.stories.cjs.js.map

package/skinny/registerTextField-input.stories.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerTextField-input.stories.cjs.js","sources":["../src/registerTextField-input.stories.tsx"],"sourcesContent":["import type { Meta } from \"@storybook/react\";\nimport { fn } from \"@storybook/test\";\nimport React from \"react\";\nimport { BaseInput } from \"./registerInput\";\nimport { BaseLabel } from \"./registerLabel\";\nimport { BaseTextField } from \"./registerTextField\";\nimport {\n  AutoFocused as AutoFocusedStory,\n  Basic as BasicStory,\n  Disabled as DisabledStory,\n  Invalid as InvalidStory,\n  ReadOnly as ReadOnlyStory,\n  Story,\n  WithAutoComplete as WithAutoCompleteStory,\n  WithInitialValue as WithInitialValueStory,\n  WithMaxLength as WithMaxLengthStory,\n  createControlledTextFieldStory,\n} from \"./registerTextField-common-stories\";\n\nconst meta: Meta<typeof BaseTextField> = {\n  title: \"Components/BaseTextField (BaseInput)\",\n  component: BaseTextField,\n  args: {\n    children: (\n      <>\n        <BaseLabel>Label</BaseLabel>\n        <BaseInput />\n      </>\n    ),\n    onChange: fn(),\n  },\n};\n\nexport default meta;\n\nexport const Basic: Story = BasicStory;\n\n// TextField with initial value\nexport const WithInitialValue: Story = WithInitialValueStory;\n\n// Disabled TextField\nexport const Disabled: Story = DisabledStory;\n\n// Read-only TextField\nexport const ReadOnly: Story = ReadOnlyStory;\n\nexport const AutoFocused: Story = AutoFocusedStory;\n\nexport const WithAutoComplete: Story = WithAutoCompleteStory;\n\n// TextField with max length\nexport const WithMaxLength: Story = WithMaxLengthStory;\n\n// TextField with invalid state\nexport const Invalid: Story = InvalidStory;\n\nexport const Controlled: Story = createControlledTextFieldStory(<BaseInput />);\n"],"names":["BaseTextField","React","BaseLabel","BaseInput","fn","BasicStory","WithInitialValueStory","DisabledStory","ReadOnlyStory","AutoFocusedStory","WithAutoCompleteStory","WithMaxLengthStory","InvalidStory","createControlledTextFieldStory"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,IAAmC,GAAA;AAAA,EACvC,KAAO,EAAA,sCAAA;AAAA,EACP,SAAW,EAAAA,+BAAA;AAAA,EACX,IAAM,EAAA;AAAA,IACJ,QAAA,8GAEKC,sBAAA,CAAA,aAAA,CAAAC,uBAAA,EAAA,IAAA,EAAU,OAAK,CAChB,kBAAAD,sBAAA,CAAA,aAAA,CAACE,6BAAU,CACb,CAAA;AAAA,IAEF,UAAUC,OAAG,EAAA;AAAA,GACf;AACF,EAAA;AAIO,MAAM,KAAe,GAAAC,qCAAA;AAGrB,MAAM,gBAA0B,GAAAC,gDAAA;AAGhC,MAAM,QAAkB,GAAAC,wCAAA;AAGxB,MAAM,QAAkB,GAAAC,wCAAA;AAExB,MAAM,WAAqB,GAAAC,2CAAA;AAE3B,MAAM,gBAA0B,GAAAC,gDAAA;AAGhC,MAAM,aAAuB,GAAAC,6CAAA;AAG7B,MAAM,OAAiB,GAAAC,uCAAA;AAEvB,MAAM,UAAoB,GAAAC,6DAAA,iBAAgCZ,sBAAA,CAAA,aAAA,CAAAE,uBAAA,EAAA,IAAU,CAAE;;;;;;;;;;;;;"}

package/skinny/registerTextField-input.stories.esm.js

@@ -0,0 +1,37 @@
+import { fn } from '@storybook/test';
+import React from 'react';
+import { BaseInput } from './registerInput.esm.js';
+import { BaseLabel } from './registerLabel.esm.js';
+import { BaseTextField } from './registerTextField.esm.js';
+import { Basic as Basic$1, WithInitialValue as WithInitialValue$1, Disabled as Disabled$1, ReadOnly as ReadOnly$1, AutoFocused as AutoFocused$1, WithAutoComplete as WithAutoComplete$1, WithMaxLength as WithMaxLength$1, Invalid as Invalid$1, createControlledTextFieldStory } from './registerTextField-common-stories.esm.js';
+import 'react-aria';
+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 './registerDescription.esm.js';
+import './registerText.esm.js';
+
+const meta = {
+  title: "Components/BaseTextField (BaseInput)",
+  component: BaseTextField,
+  args: {
+    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BaseLabel, null, "Label"), /* @__PURE__ */ React.createElement(BaseInput, null)),
+    onChange: fn()
+  }
+};
+const Basic = Basic$1;
+const WithInitialValue = WithInitialValue$1;
+const Disabled = Disabled$1;
+const ReadOnly = ReadOnly$1;
+const AutoFocused = AutoFocused$1;
+const WithAutoComplete = WithAutoComplete$1;
+const WithMaxLength = WithMaxLength$1;
+const Invalid = Invalid$1;
+const Controlled = createControlledTextFieldStory(/* @__PURE__ */ React.createElement(BaseInput, null));
+
+export { AutoFocused, Basic, Controlled, Disabled, Invalid, ReadOnly, WithAutoComplete, WithInitialValue, WithMaxLength, meta as default };
+//# sourceMappingURL=registerTextField-input.stories.esm.js.map

package/skinny/registerTextField-input.stories.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerTextField-input.stories.esm.js","sources":["../src/registerTextField-input.stories.tsx"],"sourcesContent":["import type { Meta } from \"@storybook/react\";\nimport { fn } from \"@storybook/test\";\nimport React from \"react\";\nimport { BaseInput } from \"./registerInput\";\nimport { BaseLabel } from \"./registerLabel\";\nimport { BaseTextField } from \"./registerTextField\";\nimport {\n  AutoFocused as AutoFocusedStory,\n  Basic as BasicStory,\n  Disabled as DisabledStory,\n  Invalid as InvalidStory,\n  ReadOnly as ReadOnlyStory,\n  Story,\n  WithAutoComplete as WithAutoCompleteStory,\n  WithInitialValue as WithInitialValueStory,\n  WithMaxLength as WithMaxLengthStory,\n  createControlledTextFieldStory,\n} from \"./registerTextField-common-stories\";\n\nconst meta: Meta<typeof BaseTextField> = {\n  title: \"Components/BaseTextField (BaseInput)\",\n  component: BaseTextField,\n  args: {\n    children: (\n      <>\n        <BaseLabel>Label</BaseLabel>\n        <BaseInput />\n      </>\n    ),\n    onChange: fn(),\n  },\n};\n\nexport default meta;\n\nexport const Basic: Story = BasicStory;\n\n// TextField with initial value\nexport const WithInitialValue: Story = WithInitialValueStory;\n\n// Disabled TextField\nexport const Disabled: Story = DisabledStory;\n\n// Read-only TextField\nexport const ReadOnly: Story = ReadOnlyStory;\n\nexport const AutoFocused: Story = AutoFocusedStory;\n\nexport const WithAutoComplete: Story = WithAutoCompleteStory;\n\n// TextField with max length\nexport const WithMaxLength: Story = WithMaxLengthStory;\n\n// TextField with invalid state\nexport const Invalid: Story = InvalidStory;\n\nexport const Controlled: Story = createControlledTextFieldStory(<BaseInput />);\n"],"names":["BasicStory","WithInitialValueStory","DisabledStory","ReadOnlyStory","AutoFocusedStory","WithAutoCompleteStory","WithMaxLengthStory","InvalidStory"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,MAAM,IAAmC,GAAA;AAAA,EACvC,KAAO,EAAA,sCAAA;AAAA,EACP,SAAW,EAAA,aAAA;AAAA,EACX,IAAM,EAAA;AAAA,IACJ,QAAA,4EAEK,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,EAAU,OAAK,CAChB,kBAAA,KAAA,CAAA,aAAA,CAAC,eAAU,CACb,CAAA;AAAA,IAEF,UAAU,EAAG,EAAA;AAAA,GACf;AACF,EAAA;AAIO,MAAM,KAAe,GAAAA,QAAA;AAGrB,MAAM,gBAA0B,GAAAC,mBAAA;AAGhC,MAAM,QAAkB,GAAAC,WAAA;AAGxB,MAAM,QAAkB,GAAAC,WAAA;AAExB,MAAM,WAAqB,GAAAC,cAAA;AAE3B,MAAM,gBAA0B,GAAAC,mBAAA;AAGhC,MAAM,aAAuB,GAAAC,gBAAA;AAG7B,MAAM,OAAiB,GAAAC,UAAA;AAEvB,MAAM,UAAoB,GAAA,8BAAA,iBAAgC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAU,CAAE;;;;"}

package/skinny/registerTextField-textarea.stories.cjs.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var test = require('@storybook/test');
+var React = require('react');
+var registerLabel = require('./registerLabel.cjs.js');
+var registerTextArea = require('./registerTextArea.cjs.js');
+var registerTextField = require('./registerTextField.cjs.js');
+var registerTextFieldCommonStories = require('./registerTextField-common-stories.cjs.js');
+require('react-aria-components');
+require('./common-b3b54c72.cjs.js');
+require('./utils-7d000fa4.cjs.js');
+require('@plasmicapp/host');
+require('@plasmicapp/host/registerComponent');
+require('react-aria');
+require('./contexts-6d0cb2b1.cjs.js');
+require('./variant-utils-0ad70db8.cjs.js');
+require('./registerDescription.cjs.js');
+require('./registerText.cjs.js');
+require('./registerInput.cjs.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const meta = {
+  title: "Components/BaseTextField (BaseTextArea)",
+  component: registerTextField.BaseTextField,
+  args: {
+    children: /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(registerLabel.BaseLabel, null, "Label"), /* @__PURE__ */ React__default.default.createElement(registerTextArea.BaseTextArea, null)),
+    onChange: test.fn()
+  }
+};
+const Basic = registerTextFieldCommonStories.Basic;
+const WithInitialValue = registerTextFieldCommonStories.WithInitialValue;
+const Disabled = registerTextFieldCommonStories.Disabled;
+const ReadOnly = registerTextFieldCommonStories.ReadOnly;
+const AutoFocused = registerTextFieldCommonStories.AutoFocused;
+const WithMaxLength = registerTextFieldCommonStories.WithMaxLength;
+const Invalid = registerTextFieldCommonStories.Invalid;
+const Controlled = registerTextFieldCommonStories.createControlledTextFieldStory(
+  /* @__PURE__ */ React__default.default.createElement(registerTextArea.BaseTextArea, null)
+);
+
+exports.AutoFocused = AutoFocused;
+exports.Basic = Basic;
+exports.Controlled = Controlled;
+exports.Disabled = Disabled;
+exports.Invalid = Invalid;
+exports.ReadOnly = ReadOnly;
+exports.WithInitialValue = WithInitialValue;
+exports.WithMaxLength = WithMaxLength;
+exports.default = meta;
+//# sourceMappingURL=registerTextField-textarea.stories.cjs.js.map

package/skinny/registerTextField-textarea.stories.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerTextField-textarea.stories.cjs.js","sources":["../src/registerTextField-textarea.stories.tsx"],"sourcesContent":["import type { Meta } from \"@storybook/react\";\nimport { fn } from \"@storybook/test\";\nimport React from \"react\";\nimport { BaseLabel } from \"./registerLabel\";\nimport { BaseTextArea } from \"./registerTextArea\";\nimport { BaseTextField } from \"./registerTextField\";\nimport {\n  AutoFocused as AutoFocusedStory,\n  Basic as BasicStory,\n  Disabled as DisabledStory,\n  Invalid as InvalidStory,\n  ReadOnly as ReadOnlyStory,\n  Story,\n  WithInitialValue as WithInitialValueStory,\n  WithMaxLength as WithMaxLengthStory,\n  createControlledTextFieldStory,\n} from \"./registerTextField-common-stories\";\n\nconst meta: Meta<typeof BaseTextField> = {\n  title: \"Components/BaseTextField (BaseTextArea)\",\n  component: BaseTextField,\n  args: {\n    children: (\n      <>\n        <BaseLabel>Label</BaseLabel>\n        <BaseTextArea />\n      </>\n    ),\n    onChange: fn(),\n  },\n};\n\nexport default meta;\n\nexport const Basic: Story = BasicStory;\n\n// TextField with initial value\nexport const WithInitialValue: Story = WithInitialValueStory;\n\n// Disabled TextField\nexport const Disabled: Story = DisabledStory;\n\n// Read-only TextField\nexport const ReadOnly: Story = ReadOnlyStory;\n\nexport const AutoFocused: Story = AutoFocusedStory;\n\n// TextField with max length\nexport const WithMaxLength: Story = WithMaxLengthStory;\n\n// TextField with invalid state\nexport const Invalid: Story = InvalidStory;\n\nexport const Controlled: Story = createControlledTextFieldStory(\n  <BaseTextArea />\n);\n"],"names":["BaseTextField","React","BaseLabel","BaseTextArea","fn","BasicStory","WithInitialValueStory","DisabledStory","ReadOnlyStory","AutoFocusedStory","WithMaxLengthStory","InvalidStory","createControlledTextFieldStory"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,IAAmC,GAAA;AAAA,EACvC,KAAO,EAAA,yCAAA;AAAA,EACP,SAAW,EAAAA,+BAAA;AAAA,EACX,IAAM,EAAA;AAAA,IACJ,QAAA,8GAEKC,sBAAA,CAAA,aAAA,CAAAC,uBAAA,EAAA,IAAA,EAAU,OAAK,CAChB,kBAAAD,sBAAA,CAAA,aAAA,CAACE,mCAAa,CAChB,CAAA;AAAA,IAEF,UAAUC,OAAG,EAAA;AAAA,GACf;AACF,EAAA;AAIO,MAAM,KAAe,GAAAC,qCAAA;AAGrB,MAAM,gBAA0B,GAAAC,gDAAA;AAGhC,MAAM,QAAkB,GAAAC,wCAAA;AAGxB,MAAM,QAAkB,GAAAC,wCAAA;AAExB,MAAM,WAAqB,GAAAC,2CAAA;AAG3B,MAAM,aAAuB,GAAAC,6CAAA;AAG7B,MAAM,OAAiB,GAAAC,uCAAA;AAEvB,MAAM,UAAoB,GAAAC,6DAAA;AAAA,uDAC9BT,6BAAa,EAAA,IAAA,CAAA;AAChB;;;;;;;;;;;;"}

package/skinny/registerTextField-textarea.stories.esm.js

@@ -0,0 +1,39 @@
+import { fn } from '@storybook/test';
+import React from 'react';
+import { BaseLabel } from './registerLabel.esm.js';
+import { BaseTextArea } from './registerTextArea.esm.js';
+import { BaseTextField } from './registerTextField.esm.js';
+import { Basic as Basic$1, WithInitialValue as WithInitialValue$1, Disabled as Disabled$1, ReadOnly as ReadOnly$1, AutoFocused as AutoFocused$1, WithMaxLength as WithMaxLength$1, Invalid as Invalid$1, createControlledTextFieldStory } from './registerTextField-common-stories.esm.js';
+import 'react-aria-components';
+import './common-ceebbaea.esm.js';
+import './utils-5d1b4c6b.esm.js';
+import '@plasmicapp/host';
+import '@plasmicapp/host/registerComponent';
+import 'react-aria';
+import './contexts-5cb81c2f.esm.js';
+import './variant-utils-4405ebb0.esm.js';
+import './registerDescription.esm.js';
+import './registerText.esm.js';
+import './registerInput.esm.js';
+
+const meta = {
+  title: "Components/BaseTextField (BaseTextArea)",
+  component: BaseTextField,
+  args: {
+    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BaseLabel, null, "Label"), /* @__PURE__ */ React.createElement(BaseTextArea, null)),
+    onChange: fn()
+  }
+};
+const Basic = Basic$1;
+const WithInitialValue = WithInitialValue$1;
+const Disabled = Disabled$1;
+const ReadOnly = ReadOnly$1;
+const AutoFocused = AutoFocused$1;
+const WithMaxLength = WithMaxLength$1;
+const Invalid = Invalid$1;
+const Controlled = createControlledTextFieldStory(
+  /* @__PURE__ */ React.createElement(BaseTextArea, null)
+);
+
+export { AutoFocused, Basic, Controlled, Disabled, Invalid, ReadOnly, WithInitialValue, WithMaxLength, meta as default };
+//# sourceMappingURL=registerTextField-textarea.stories.esm.js.map

package/skinny/registerTextField-textarea.stories.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerTextField-textarea.stories.esm.js","sources":["../src/registerTextField-textarea.stories.tsx"],"sourcesContent":["import type { Meta } from \"@storybook/react\";\nimport { fn } from \"@storybook/test\";\nimport React from \"react\";\nimport { BaseLabel } from \"./registerLabel\";\nimport { BaseTextArea } from \"./registerTextArea\";\nimport { BaseTextField } from \"./registerTextField\";\nimport {\n  AutoFocused as AutoFocusedStory,\n  Basic as BasicStory,\n  Disabled as DisabledStory,\n  Invalid as InvalidStory,\n  ReadOnly as ReadOnlyStory,\n  Story,\n  WithInitialValue as WithInitialValueStory,\n  WithMaxLength as WithMaxLengthStory,\n  createControlledTextFieldStory,\n} from \"./registerTextField-common-stories\";\n\nconst meta: Meta<typeof BaseTextField> = {\n  title: \"Components/BaseTextField (BaseTextArea)\",\n  component: BaseTextField,\n  args: {\n    children: (\n      <>\n        <BaseLabel>Label</BaseLabel>\n        <BaseTextArea />\n      </>\n    ),\n    onChange: fn(),\n  },\n};\n\nexport default meta;\n\nexport const Basic: Story = BasicStory;\n\n// TextField with initial value\nexport const WithInitialValue: Story = WithInitialValueStory;\n\n// Disabled TextField\nexport const Disabled: Story = DisabledStory;\n\n// Read-only TextField\nexport const ReadOnly: Story = ReadOnlyStory;\n\nexport const AutoFocused: Story = AutoFocusedStory;\n\n// TextField with max length\nexport const WithMaxLength: Story = WithMaxLengthStory;\n\n// TextField with invalid state\nexport const Invalid: Story = InvalidStory;\n\nexport const Controlled: Story = createControlledTextFieldStory(\n  <BaseTextArea />\n);\n"],"names":["BasicStory","WithInitialValueStory","DisabledStory","ReadOnlyStory","AutoFocusedStory","WithMaxLengthStory","InvalidStory"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAM,IAAmC,GAAA;AAAA,EACvC,KAAO,EAAA,yCAAA;AAAA,EACP,SAAW,EAAA,aAAA;AAAA,EACX,IAAM,EAAA;AAAA,IACJ,QAAA,4EAEK,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,EAAU,OAAK,CAChB,kBAAA,KAAA,CAAA,aAAA,CAAC,kBAAa,CAChB,CAAA;AAAA,IAEF,UAAU,EAAG,EAAA;AAAA,GACf;AACF,EAAA;AAIO,MAAM,KAAe,GAAAA,QAAA;AAGrB,MAAM,gBAA0B,GAAAC,mBAAA;AAGhC,MAAM,QAAkB,GAAAC,WAAA;AAGxB,MAAM,QAAkB,GAAAC,WAAA;AAExB,MAAM,WAAqB,GAAAC,cAAA;AAG3B,MAAM,aAAuB,GAAAC,gBAAA;AAG7B,MAAM,OAAiB,GAAAC,UAAA;AAEvB,MAAM,UAAoB,GAAA,8BAAA;AAAA,sCAC9B,YAAa,EAAA,IAAA,CAAA;AAChB;;;;"}

package/skinny/registerTooltip.cjs.js

@@ -4,6 +4,7 @@ var host = require('@plasmicapp/host');
 var React = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
+var reactStately = require('react-stately');
 var common = require('./common-b3b54c72.cjs.js');
 var utils = require('./utils-7d000fa4.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
@@ -32,6 +33,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 const TOOLTIP_VARIANTS = [
   "placementTop",
   "placementBottom",
@@ -39,79 +52,131 @@ const TOOLTIP_VARIANTS = [
   "placementRight"
 ];
 const { variants, withObservedValues } = variantUtils.pickAriaComponentVariants(TOOLTIP_VARIANTS);
-function TriggerWrapper({ children, className }) {
-  const ref = React__default.default.useRef(null);
-  const { focusableProps } = reactAria.useFocusable({}, ref);
+function BaseTooltip(props) {
+  if (props.isOpen !== void 0) {
+    return /* @__PURE__ */ React__default.default.createElement(ControlledBaseTooltip, __spreadValues({}, props));
+  } else {
+    return /* @__PURE__ */ React__default.default.createElement(UncontrolledBaseTooltip, __spreadValues({}, props));
+  }
+}
+function UncontrolledBaseTooltip(_a) {
+  var _b = _a, { onOpenChange } = _b, props = __objRest(_b, ["onOpenChange"]);
+  var _a2;
+  const [open, setOpen] = React.useState((_a2 = props.defaultOpen) != null ? _a2 : false);
+  const onOpenChangeMerged = React.useCallback(
+    (newOpen) => {
+      setOpen(newOpen);
+      onOpenChange == null ? void 0 : onOpenChange(newOpen);
+    },
+    [onOpenChange]
+  );
   return /* @__PURE__ */ React__default.default.createElement(
-    "div",
-    __spreadProps(__spreadValues({
-      ref,
-      className
-    }, focusableProps), {
-      style: common.COMMON_STYLES
-    }),
-    children
+    ControlledBaseTooltip,
+    __spreadProps(__spreadValues({}, props), {
+      isOpen: open,
+      onOpenChange: onOpenChangeMerged
+    })
   );
 }
-function BaseTooltip(props) {
+function ControlledBaseTooltip(props) {
   var _a, _b;
   const {
     children,
-    isDisabled,
+    isDisabled = false,
     delay,
     closeDelay,
     trigger,
     isOpen,
-    defaultOpen,
     tooltipContent,
     resetClassName,
     placement,
     offset,
     crossOffset,
     shouldFlip,
-    onOpenChange,
+    className,
+    onOpenChange = () => {
+    },
     plasmicUpdateVariant
   } = props;
   const { isSelected, selectedSlotName } = (_b = (_a = host.usePlasmicCanvasComponentInfo) == null ? void 0 : _a(props)) != null ? _b : {};
-  const isAutoOpen = selectedSlotName !== "children" && isSelected;
-  const _isOpen = isAutoOpen || isOpen;
-  return /* @__PURE__ */ React__default.default.createElement(
-    reactAriaComponents.TooltipTrigger,
+  const isSelectedOnCanvas = selectedSlotName !== "children" && isSelected;
+  const _isOpen = isSelectedOnCanvas || isOpen;
+  const ref = React.useRef(null);
+  const tooltipId = React.useId();
+  const state = reactStately.useTooltipTriggerState(__spreadProps(__spreadValues({}, props), {
+    trigger: trigger === "focus" ? trigger : void 0
+  }));
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Provider, { values: [[reactAriaComponents.TooltipTriggerStateContext, state]] }, /* @__PURE__ */ React__default.default.createElement(
+    TriggerWrapper,
     {
+      ref,
+      className,
+      tooltipId: _isOpen ? tooltipId : void 0,
       isDisabled,
+      onOpenChange,
+      triggerOnFocusOnly: trigger === "focus"
+    },
+    children
+  ), /* @__PURE__ */ React__default.default.createElement(
+    reactAriaComponents.Tooltip,
+    {
+      triggerRef: ref,
+      id: tooltipId,
+      isOpen: _isOpen,
+      offset,
       delay,
       closeDelay,
-      trigger,
-      isOpen: _isOpen,
-      defaultOpen,
-      onOpenChange
+      crossOffset,
+      shouldFlip,
+      className: resetClassName,
+      onOpenChange,
+      placement
     },
-    /* @__PURE__ */ React__default.default.createElement(TriggerWrapper, { className: resetClassName }, children),
-    /* @__PURE__ */ React__default.default.createElement(
-      reactAriaComponents.Tooltip,
+    ({ placement: _placement }) => withObservedValues(
+      /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, tooltipContent),
       {
-        isOpen: _isOpen,
-        offset,
-        crossOffset,
-        shouldFlip,
-        defaultOpen,
-        className: resetClassName,
-        onOpenChange,
-        placement
+        placementTop: _placement === "top",
+        placementBottom: _placement === "bottom",
+        placementLeft: _placement === "left",
+        placementRight: _placement === "right"
       },
-      ({ placement: _placement }) => withObservedValues(
-        /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, tooltipContent),
-        {
-          placementTop: _placement === "top",
-          placementBottom: _placement === "bottom",
-          placementLeft: _placement === "left",
-          placementRight: _placement === "right"
-        },
-        plasmicUpdateVariant
-      )
+      plasmicUpdateVariant
     )
-  );
+  ));
 }
+const TriggerWrapper = React__default.default.forwardRef(
+  function TriggerWrapper_({
+    children,
+    onOpenChange,
+    isDisabled,
+    triggerOnFocusOnly,
+    tooltipId,
+    className
+  }, ref) {
+    const { hoverProps } = reactAria.useHover({
+      isDisabled,
+      onHoverStart: () => !triggerOnFocusOnly && onOpenChange(true),
+      onHoverEnd: () => !triggerOnFocusOnly && onOpenChange(false)
+    });
+    const { focusWithinProps } = reactAria.useFocusWithin({
+      isDisabled,
+      onFocusWithin: () => {
+        onOpenChange(true);
+      },
+      onBlurWithin: () => {
+        onOpenChange(false);
+      }
+    });
+    const mergedProps = reactAria.mergeProps(hoverProps, focusWithinProps, {
+      "aria-describedby": tooltipId,
+      // We expose className to allow user control over the wrapper div's styling.
+      className,
+      ref,
+      style: common.COMMON_STYLES
+    });
+    return /* @__PURE__ */ React__default.default.createElement("div", __spreadValues({}, mergedProps), children);
+  }
+);
 function registerTooltip(loader, overrides) {
   utils.registerComponentHelper(
     loader,
@@ -122,7 +187,6 @@ function registerTooltip(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerTooltip",
       importName: "BaseTooltip",
       isAttachment: true,
-      styleSections: false,
       variants,
       props: __spreadProps(__spreadValues({
         children: {