@plasmicpkgs/react-aria 0.0.109 → 0.0.111

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

@@ -1 +1 @@
-{"version":3,"file":"registerSlider.stories.esm.js","sources":["../src/registerSlider.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\nimport React, { useState } from \"react\";\nimport { BaseLabel } from \"./registerLabel\";\nimport { BaseSlider } from \"./registerSlider\";\nimport { BaseSliderOutput } from \"./registerSliderOutput\";\nimport { BaseSliderThumb } from \"./registerSliderThumb\";\nimport { BaseSliderTrack } from \"./registerSliderTrack\";\n\n// Single value slider meta\nconst meta: Meta<typeof BaseSlider<number>> = {\n  title: \"Components/BaseSlider\",\n  component: BaseSlider,\n  args: {\n    onChange: fn(),\n    onChangeEnd: fn(),\n    minValue: 0,\n    maxValue: 100,\n    step: 1,\n    orientation: \"horizontal\" as const,\n  },\n  // TODO: Currently, the BaseSlider's defaultValue prop is not handled correctly inside BaseSliderTrack, i.e. it can't be uncontrolled\n  // The render function below assigns the defaultValue prop to the value prop - its needed to keep the BaseSlider controlled\n  // This render function needs to be removed in the PR that fixes the handling of defaultValue in BaseSliderTrack.\n  render: (args) => {\n    const [value, setValue] = useState(args.defaultValue);\n    return (\n      <BaseSlider\n        {...args}\n        value={value}\n        onChange={(newValue) => {\n          setValue(newValue);\n          args.onChange?.(newValue);\n        }}\n      />\n    );\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BaseSlider<number>>;\n\n// TODO: Currently, BaseSliderTrack does not render any thumbs if there is no value/default value prop\n// The test below needs to be uncommented in the PR that fixes the issue\n// Basic slider with no initial value\n// export const Basic: Story = {\n//     args: {\n//         step: 5,\n//         children: (\n//             <>\n//                 <BaseLabel>Slider label</BaseLabel>\n//                 <BaseSliderOutput>Output</BaseSliderOutput>\n//                 <BaseSliderTrack>\n//                     <BaseSliderThumb autoFocus className={\"thumb-1\"} />\n//                 </BaseSliderTrack>\n//             </>\n//         ),\n//     },\n//     play: async ({ canvasElement, args }) => {\n//         const canvas = within(canvasElement);\n//         const slider = canvas.getByRole(\"group\");\n//         const label = within(slider).getByText(\"Slider label\");\n//         const thumbs = slider.getElementsByTagName(\"input\");\n//         expect(thumbs).toHaveLength(1);\n\n//         await userEvent.click(label); // Focus on the slider thumb\n//         await userEvent.keyboard(\"{ArrowRight}\"); // Move to the right\n\n//         expect(args.onChange).toHaveBeenCalledWith([5]); // defaults to range slider if no value/defaultValue is provided (that's the default react-aria slider component behaviour)\n//         expect(args.onChangeEnd).toHaveBeenCalledOnce();\n//     },\n// };\n\n// Basic slider with no initial value\nexport const WithDefaultValue: Story = {\n  args: {\n    step: 5,\n    defaultValue: 22,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n    expect(thumbs).toHaveLength(1);\n\n    await userEvent.click(label); // Focus on the slider thumb\n    await userEvent.keyboard(\"{ArrowRight}\"); // Move to the right\n\n    expect(args.onChange).toHaveBeenCalledWith(25);\n    expect(args.onChangeEnd).toHaveBeenCalledOnce();\n  },\n};\n\n// // Disabled slider\nexport const Disabled: Story = {\n  args: {\n    step: 5,\n    defaultValue: 22,\n    isDisabled: true,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n    expect(thumbs).toHaveLength(1);\n\n    await userEvent.click(label); // Focus on the slider thumb\n    await userEvent.keyboard(\"{ArrowRight}\"); // Move to the right\n\n    expect(args.onChange).not.toHaveBeenCalled();\n    expect(args.onChangeEnd).not.toHaveBeenCalled();\n  },\n};\n\n// Range slider specific stories\ntype RangeStory = StoryObj<typeof BaseSlider<number[]>>;\n\nexport const RangeSlider: RangeStory = {\n  args: {\n    defaultValue: [20, 80],\n    step: 10,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n          <BaseSliderThumb className={\"thumb-2\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n\n    expect(thumbs).toHaveLength(2);\n\n    expect(slider.querySelector(\".thumb-1\")).toBeInTheDocument();\n    expect(slider.querySelector(\".thumb-2\")).toBeInTheDocument();\n\n    await userEvent.click(label);\n    await userEvent.keyboard(\"{ArrowLeft}\");\n    expect(args.onChange).toHaveBeenCalledWith([10, 80]);\n    await userEvent.tab();\n    await userEvent.keyboard(\"{ArrowRight}\");\n\n    expect(args.onChange).toHaveBeenCalledWith([10, 90]);\n  },\n};\n\nexport const TooFewThumbs: RangeStory = {\n  args: {\n    defaultValue: [20, 47, 80],\n    step: 10,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n          <BaseSliderThumb className={\"thumb-2\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n\n    expect(thumbs).toHaveLength(3);\n\n    expect(slider.querySelectorAll(\".thumb-1\")).toHaveLength(1);\n    expect(slider.querySelectorAll(\".thumb-2\")).toHaveLength(2);\n\n    await userEvent.click(label);\n    await userEvent.keyboard(\"{ArrowLeft}\");\n    expect(args.onChange).toHaveBeenCalledWith([10, 50, 80]); // all values adjusted to the step (47 -> 50)\n\n    await userEvent.tab();\n    await userEvent.keyboard(\"{ArrowRight}\");\n\n    expect(args.onChange).toHaveBeenCalledWith([10, 60, 80]);\n  },\n};\n\nexport const TooManyThumbs: RangeStory = {\n  args: {\n    defaultValue: [20, 80],\n    step: 10,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Range: 20-80</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n          <BaseSliderThumb className={\"thumb-2\"} />\n          <BaseSliderThumb className={\"thumb-3\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n\n    expect(thumbs).toHaveLength(2);\n\n    expect(slider.querySelectorAll(\".thumb-1\")).toHaveLength(1);\n    expect(slider.querySelectorAll(\".thumb-2\")).toHaveLength(1);\n    expect(slider.querySelectorAll(\".thumb-3\")).toHaveLength(0); // unused, because there are 3 thumbs but only 2 values\n\n    await userEvent.click(label);\n    await userEvent.keyboard(\"{ArrowLeft}\");\n    expect(args.onChange).toHaveBeenCalledWith([10, 80]);\n\n    await userEvent.tab();\n    await userEvent.keyboard(\"{ArrowRight}\");\n\n    expect(args.onChange).toHaveBeenCalledWith([10, 90]);\n  },\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"registerSlider.stories.esm.js","sources":["../src/registerSlider.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\nimport React from \"react\";\nimport { BaseLabel } from \"./registerLabel\";\nimport { BaseSlider } from \"./registerSlider\";\nimport { BaseSliderOutput } from \"./registerSliderOutput\";\nimport { BaseSliderThumb } from \"./registerSliderThumb\";\nimport { BaseSliderTrack } from \"./registerSliderTrack\";\n\n// Single value slider meta\nconst meta: Meta<typeof BaseSlider<number>> = {\n  title: \"Components/BaseSlider\",\n  component: BaseSlider,\n  args: {\n    onChange: fn(),\n    onChangeEnd: fn(),\n    minValue: 0,\n    maxValue: 100,\n    step: 1,\n    orientation: \"horizontal\" as const,\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BaseSlider<number>>;\n\n// Basic slider with no initial value\nexport const Basic: Story = {\n  args: {\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb autoFocus className={\"thumb-1\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n    expect(thumbs).toHaveLength(1);\n\n    await userEvent.click(label); // Focus on the slider thumb\n    await userEvent.keyboard(\"{ArrowRight}\"); // Move to the right\n\n    expect(args.onChange).toHaveBeenCalledWith([1]); // defaults to range slider if no value/defaultValue is provided (that's the default react-aria slider component behaviour)\n    expect(args.onChangeEnd).toHaveBeenCalledOnce();\n  },\n};\n\n// Basic slider with no initial value\nexport const WithDefaultValue: Story = {\n  args: {\n    step: 5,\n    defaultValue: 22,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n    expect(thumbs).toHaveLength(1);\n\n    await userEvent.click(label); // Focus on the slider thumb\n    await userEvent.keyboard(\"{ArrowRight}\"); // Move to the right\n\n    expect(args.onChange).toHaveBeenCalledWith(25);\n    expect(args.onChangeEnd).toHaveBeenCalledOnce();\n  },\n};\n\n// // Disabled slider\nexport const Disabled: Story = {\n  args: {\n    step: 5,\n    defaultValue: 22,\n    isDisabled: true,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n    expect(thumbs).toHaveLength(1);\n\n    await userEvent.click(label); // Focus on the slider thumb\n    await userEvent.keyboard(\"{ArrowRight}\"); // Move to the right\n\n    expect(args.onChange).not.toHaveBeenCalled();\n    expect(args.onChangeEnd).not.toHaveBeenCalled();\n  },\n};\n\n// Range slider specific stories\ntype RangeStory = StoryObj<typeof BaseSlider<number[]>>;\n\nexport const RangeSlider: RangeStory = {\n  args: {\n    defaultValue: [20, 80],\n    step: 10,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n          <BaseSliderThumb className={\"thumb-2\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n\n    expect(thumbs).toHaveLength(2);\n\n    expect(slider.querySelector(\".thumb-1\")).toBeInTheDocument();\n    expect(slider.querySelector(\".thumb-2\")).toBeInTheDocument();\n\n    await userEvent.click(label);\n    await userEvent.keyboard(\"{ArrowLeft}\");\n    expect(args.onChange).toHaveBeenCalledWith([10, 80]);\n    await userEvent.tab();\n    await userEvent.keyboard(\"{ArrowRight}\");\n\n    expect(args.onChange).toHaveBeenCalledWith([10, 90]);\n  },\n};\n\nexport const TooFewThumbs: RangeStory = {\n  args: {\n    defaultValue: [20, 47, 80],\n    step: 10,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Output</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n          <BaseSliderThumb className={\"thumb-2\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n\n    expect(thumbs).toHaveLength(3);\n\n    expect(slider.querySelectorAll(\".thumb-1\")).toHaveLength(1);\n    expect(slider.querySelectorAll(\".thumb-2\")).toHaveLength(2);\n\n    await userEvent.click(label);\n    await userEvent.keyboard(\"{ArrowLeft}\");\n    expect(args.onChange).toHaveBeenCalledWith([10, 50, 80]); // all values adjusted to the step (47 -> 50)\n\n    await userEvent.tab();\n    await userEvent.keyboard(\"{ArrowRight}\");\n\n    expect(args.onChange).toHaveBeenCalledWith([10, 60, 80]);\n  },\n};\n\nexport const TooManyThumbs: RangeStory = {\n  args: {\n    defaultValue: [20, 80],\n    step: 10,\n    children: (\n      <>\n        <BaseLabel>Slider label</BaseLabel>\n        <BaseSliderOutput>Range: 20-80</BaseSliderOutput>\n        <BaseSliderTrack>\n          <BaseSliderThumb className={\"thumb-1\"} />\n          <BaseSliderThumb className={\"thumb-2\"} />\n          <BaseSliderThumb className={\"thumb-3\"} />\n        </BaseSliderTrack>\n      </>\n    ),\n  },\n  play: async ({ canvasElement, args }) => {\n    const canvas = within(canvasElement);\n    const slider = canvas.getByRole(\"group\");\n    const label = within(slider).getByText(\"Slider label\");\n    const thumbs = slider.getElementsByTagName(\"input\");\n\n    expect(thumbs).toHaveLength(2);\n\n    expect(slider.querySelectorAll(\".thumb-1\")).toHaveLength(1);\n    expect(slider.querySelectorAll(\".thumb-2\")).toHaveLength(1);\n    expect(slider.querySelectorAll(\".thumb-3\")).toHaveLength(0); // unused, because there are 3 thumbs but only 2 values\n\n    await userEvent.click(label);\n    await userEvent.keyboard(\"{ArrowLeft}\");\n    expect(args.onChange).toHaveBeenCalledWith([10, 80]);\n\n    await userEvent.tab();\n    await userEvent.keyboard(\"{ArrowRight}\");\n\n    expect(args.onChange).toHaveBeenCalledWith([10, 90]);\n  },\n};\n"],"names":[],"mappings":"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"}

package/skinny/registerSliderTrack.cjs.js

@@ -51,10 +51,12 @@ function isMultiValueGuard(value) {
   return Array.isArray(value) && value.length > 1;
 }
 function BaseSliderTrack(props) {
+  var _b;
   const context = React__default.default.useContext(contexts.PlasmicSliderContext);
   const isStandalone = !context;
   const _a = props, { children, progressBar, plasmicUpdateVariant } = _a, rest = __objRest(_a, ["children", "progressBar", "plasmicUpdateVariant"]);
-  const thumbsLength = context && isMultiValueGuard(context.value) ? context.value.length : 1;
+  const value = (_b = context == null ? void 0 : context.value) != null ? _b : context == null ? void 0 : context.defaultValue;
+  const thumbsLength = isMultiValueGuard(value) ? value.length : 1;
   const isMultiValue = thumbsLength > 1;
   const { minIndex, maxIndex } = React.useMemo(() => {
     if (thumbsLength <= 1) {
@@ -64,10 +66,10 @@ function BaseSliderTrack(props) {
   }, [thumbsLength]);
   const thumbs = React.useMemo(() => {
     const thumbNodes = flattenChildren__default.default(children);
-    if (!thumbNodes || thumbNodes.length === 0 || !utils.isDefined(context == null ? void 0 : context.value)) {
+    if (!thumbNodes || thumbNodes.length === 0) {
       return [];
     }
-    const values = utils.isDefined(context) ? Array.isArray(context.value) ? context.value : [context.value] : [];
+    const values = utils.isDefined(context) ? Array.isArray(value) ? value : [value] : [];
     const lastThumb = thumbNodes[thumbNodes.length - 1];
     return values.map((v, i) => {
       const currentThumb = thumbNodes[i];
@@ -85,7 +87,7 @@ function BaseSliderTrack(props) {
         index: i
       });
     });
-  }, [children, context == null ? void 0 : context.value]);
+  }, [children, value]);
   const track = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SliderTrack, __spreadValues({ style: { position: "relative" } }, rest), ({ state, isHovered }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, withObservedValues(
     /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
       "div",

package/skinny/registerSliderTrack.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerSliderTrack.cjs.js","sources":["../src/registerSliderTrack.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React, { useMemo } from \"react\";\nimport { Slider, SliderThumbProps, SliderTrack } from \"react-aria-components\";\nimport flattenChildren from \"react-keyed-flatten-children\";\nimport { COMMON_STYLES } from \"./common\";\nimport { PlasmicSliderContext } from \"./contexts\";\nimport { BaseSliderThumbProps } from \"./registerSliderThumb\";\nimport {\n  CodeComponentMetaOverrides,\n  Registerable,\n  isDefined,\n  makeComponentName,\n  registerComponentHelper,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\nconst SLIDER_TRACK_VARIANTS = [\"hovered\" as const];\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n  SLIDER_TRACK_VARIANTS\n);\n\nexport interface BaseSliderTrackProps\n  extends React.ComponentProps<typeof SliderTrack>,\n    WithVariants<typeof SLIDER_TRACK_VARIANTS> {\n  progressBar?: React.ReactNode;\n  children?: React.ReactNode;\n}\n\nfunction isMultiValueGuard(value?: number | number[]): value is number[] {\n  return Array.isArray(value) && value.length > 1;\n}\n\nexport function BaseSliderTrack(props: BaseSliderTrackProps) {\n  const context = React.useContext(PlasmicSliderContext);\n  const isStandalone = !context;\n  const { children, progressBar, plasmicUpdateVariant, ...rest } = props;\n\n  const thumbsLength =\n    context && isMultiValueGuard(context.value) ? context.value.length : 1;\n  const isMultiValue = thumbsLength > 1;\n\n  const { minIndex, maxIndex } = useMemo(() => {\n    if (thumbsLength <= 1) {\n      return { minIndex: 0, maxIndex: 0 };\n    }\n    return { minIndex: 0, maxIndex: thumbsLength - 1 };\n  }, [thumbsLength]);\n\n  /**\n   * Generates the thumb components based on the number of thumbs\n   * and the number of values in the slider\n   *\n   * If the number of thumbs is less than the number of values, then\n   * the last thumb is repeated for the remaining values\n   *\n   * If the number of thumbs is greater than the number of values, then\n   * the additional thumbs are omitted\n   */\n  const thumbs = useMemo(() => {\n    const thumbNodes = flattenChildren(children);\n    if (!thumbNodes || thumbNodes.length === 0 || !isDefined(context?.value)) {\n      return [];\n    }\n\n    const values = isDefined(context)\n      ? Array.isArray(context.value)\n        ? context.value\n        : [context.value]\n      : [];\n\n    // Last thumb be re-used if the number of thumbs is less than the number of values\n    const lastThumb = thumbNodes[thumbNodes.length - 1];\n\n    return values.map((v, i) => {\n      const currentThumb = thumbNodes[i];\n      // Re-use the last thumb if there are no more thumbs left ( this is for ease of use - the user can just add one more value to the initial-values array and see another thumb right away, without having to explicitly add a new thumb component )\n      if (i >= thumbNodes.length) {\n        if (React.isValidElement(lastThumb)) {\n          return React.cloneElement(lastThumb, {\n            index: i,\n          } as SliderThumbProps);\n        }\n      }\n      if (!React.isValidElement(currentThumb)) {\n        return null;\n      }\n      return React.cloneElement(currentThumb, {\n        index: i,\n      } as SliderThumbProps);\n    });\n  }, [children, context?.value]);\n\n  const track = (\n    <SliderTrack style={{ position: \"relative\" }} {...rest}>\n      {({ state, isHovered }) => (\n        <>\n          {withObservedValues(\n            <>\n              <div\n                style={{\n                  width: `${\n                    (!isMultiValue\n                      ? state.getThumbPercent(minIndex)\n                      : state.getThumbPercent(maxIndex) -\n                        state.getThumbPercent(minIndex)) * 100\n                  }%`,\n                  height: \"100%\",\n                  position: \"absolute\",\n                  top: 0,\n                  left: !isMultiValue\n                    ? 0\n                    : state.getThumbPercent(minIndex) * 100 + \"%\",\n                }}\n              >\n                {progressBar}\n              </div>\n              {thumbs}\n            </>,\n            {\n              hovered: isHovered,\n            },\n            plasmicUpdateVariant\n          )}\n        </>\n      )}\n    </SliderTrack>\n  );\n\n  if (isStandalone) {\n    return (\n      <Slider style={{ height: \"100%\", width: \"100%\", ...COMMON_STYLES }}>\n        {track}\n      </Slider>\n    );\n  }\n\n  return track;\n}\n\nexport const SLIDER_TRACK_COMPONENT_NAME = makeComponentName(\"sliderTrack\");\n\nexport function registerSliderTrack(\n  sliderThumbMeta: CodeComponentMeta<BaseSliderThumbProps>,\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseSliderTrack>\n) {\n  return registerComponentHelper(\n    loader,\n    BaseSliderTrack,\n    {\n      name: SLIDER_TRACK_COMPONENT_NAME,\n      displayName: \"Aria Slider Track\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerSliderTrack\",\n      importName: \"BaseSliderTrack\",\n      variants,\n      defaultStyles: {\n        width: \"stretch\",\n        backgroundColor: \"#aaa\",\n        position: \"relative\",\n        height: \"10px\",\n        padding: 0,\n      },\n      props: {\n        children: {\n          type: \"slot\",\n          /**\n           * NOTE: We don't merge with parent here, because we want to allow the user to select the thumbs without having to first select the slider track.\n           * Also, there can be more than one thumbs (e.g. in a range slider), but `mergeWithParent` only shows prop controls of the slot content if there is only one direct descendant of the slot.\n           * */\n          // mergeWithParent: true,\n          displayName: \"Thumbs\",\n          description:\n            \"The thumbs of the slider. For range slider, you can add more than one thumb.\",\n          allowedComponents: [sliderThumbMeta.name],\n          allowRootWrapper: true,\n          defaultValue: [\n            {\n              type: \"component\",\n              name: sliderThumbMeta.name,\n            },\n          ],\n        },\n        progressBar: {\n          type: \"slot\",\n          mergeWithParent: true,\n          displayName: \"Progress Bar\",\n          defaultValue: [\n            {\n              type: \"box\",\n              styles: {\n                height: \"100%\",\n                width: \"100%\",\n                backgroundColor: \"#ffa6a6\",\n                padding: 0,\n              },\n            },\n          ],\n        },\n        onHoverStart: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"event\", type: \"object\" }],\n        },\n        onHoverEnd: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"event\", type: \"object\" }],\n        },\n        onHoverChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isHovering\", type: \"boolean\" }],\n        },\n      },\n    },\n    overrides\n  );\n}\n"],"names":["pickAriaComponentVariants","React","PlasmicSliderContext","useMemo","flattenChildren","isDefined","SliderTrack","Slider","COMMON_STYLES","makeComponentName","registerComponentHelper"],"mappings":"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"}
+{"version":3,"file":"registerSliderTrack.cjs.js","sources":["../src/registerSliderTrack.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React, { useMemo } from \"react\";\nimport { Slider, SliderThumbProps, SliderTrack } from \"react-aria-components\";\nimport flattenChildren from \"react-keyed-flatten-children\";\nimport { COMMON_STYLES } from \"./common\";\nimport { PlasmicSliderContext } from \"./contexts\";\nimport { BaseSliderThumbProps } from \"./registerSliderThumb\";\nimport {\n  CodeComponentMetaOverrides,\n  Registerable,\n  isDefined,\n  makeComponentName,\n  registerComponentHelper,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\nconst SLIDER_TRACK_VARIANTS = [\"hovered\" as const];\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n  SLIDER_TRACK_VARIANTS\n);\n\nexport interface BaseSliderTrackProps\n  extends React.ComponentProps<typeof SliderTrack>,\n    WithVariants<typeof SLIDER_TRACK_VARIANTS> {\n  progressBar?: React.ReactNode;\n  children?: React.ReactNode;\n}\n\nfunction isMultiValueGuard(value?: number | number[]): value is number[] {\n  return Array.isArray(value) && value.length > 1;\n}\n\nexport function BaseSliderTrack(props: BaseSliderTrackProps) {\n  const context = React.useContext(PlasmicSliderContext);\n  const isStandalone = !context;\n  const { children, progressBar, plasmicUpdateVariant, ...rest } = props;\n  const value = context?.value ?? context?.defaultValue;\n  const thumbsLength = isMultiValueGuard(value) ? value.length : 1;\n\n  const isMultiValue = thumbsLength > 1;\n\n  const { minIndex, maxIndex } = useMemo(() => {\n    if (thumbsLength <= 1) {\n      return { minIndex: 0, maxIndex: 0 };\n    }\n    return { minIndex: 0, maxIndex: thumbsLength - 1 };\n  }, [thumbsLength]);\n\n  /**\n   * Generates the thumb components based on the number of thumbs\n   * and the number of values in the slider\n   *\n   * If the number of thumbs is less than the number of values, then\n   * the last thumb is repeated for the remaining values\n   *\n   * If the number of thumbs is greater than the number of values, then\n   * the additional thumbs are omitted\n   */\n  const thumbs = useMemo(() => {\n    const thumbNodes = flattenChildren(children);\n    if (!thumbNodes || thumbNodes.length === 0) {\n      return [];\n    }\n\n    const values = isDefined(context)\n      ? Array.isArray(value)\n        ? value\n        : [value]\n      : [];\n\n    // Last thumb be re-used if the number of thumbs is less than the number of values\n    const lastThumb = thumbNodes[thumbNodes.length - 1];\n\n    return values.map((v, i) => {\n      const currentThumb = thumbNodes[i];\n      // Re-use the last thumb if there are no more thumbs left ( this is for ease of use - the user can just add one more value to the initial-values array and see another thumb right away, without having to explicitly add a new thumb component )\n      if (i >= thumbNodes.length) {\n        if (React.isValidElement(lastThumb)) {\n          return React.cloneElement(lastThumb, {\n            index: i,\n          } as SliderThumbProps);\n        }\n      }\n      if (!React.isValidElement(currentThumb)) {\n        return null;\n      }\n      return React.cloneElement(currentThumb, {\n        index: i,\n      } as SliderThumbProps);\n    });\n  }, [children, value]);\n\n  const track = (\n    <SliderTrack style={{ position: \"relative\" }} {...rest}>\n      {({ state, isHovered }) => (\n        <>\n          {withObservedValues(\n            <>\n              <div\n                style={{\n                  width: `${\n                    (!isMultiValue\n                      ? state.getThumbPercent(minIndex)\n                      : state.getThumbPercent(maxIndex) -\n                        state.getThumbPercent(minIndex)) * 100\n                  }%`,\n                  height: \"100%\",\n                  position: \"absolute\",\n                  top: 0,\n                  left: !isMultiValue\n                    ? 0\n                    : state.getThumbPercent(minIndex) * 100 + \"%\",\n                }}\n              >\n                {progressBar}\n              </div>\n              {thumbs}\n            </>,\n            {\n              hovered: isHovered,\n            },\n            plasmicUpdateVariant\n          )}\n        </>\n      )}\n    </SliderTrack>\n  );\n\n  if (isStandalone) {\n    return (\n      <Slider style={{ height: \"100%\", width: \"100%\", ...COMMON_STYLES }}>\n        {track}\n      </Slider>\n    );\n  }\n\n  return track;\n}\n\nexport const SLIDER_TRACK_COMPONENT_NAME = makeComponentName(\"sliderTrack\");\n\nexport function registerSliderTrack(\n  sliderThumbMeta: CodeComponentMeta<BaseSliderThumbProps>,\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseSliderTrack>\n) {\n  return registerComponentHelper(\n    loader,\n    BaseSliderTrack,\n    {\n      name: SLIDER_TRACK_COMPONENT_NAME,\n      displayName: \"Aria Slider Track\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerSliderTrack\",\n      importName: \"BaseSliderTrack\",\n      variants,\n      defaultStyles: {\n        width: \"stretch\",\n        backgroundColor: \"#aaa\",\n        position: \"relative\",\n        height: \"10px\",\n        padding: 0,\n      },\n      props: {\n        children: {\n          type: \"slot\",\n          /**\n           * NOTE: We don't merge with parent here, because we want to allow the user to select the thumbs without having to first select the slider track.\n           * Also, there can be more than one thumbs (e.g. in a range slider), but `mergeWithParent` only shows prop controls of the slot content if there is only one direct descendant of the slot.\n           * */\n          // mergeWithParent: true,\n          displayName: \"Thumbs\",\n          description:\n            \"The thumbs of the slider. For range slider, you can add more than one thumb.\",\n          allowedComponents: [sliderThumbMeta.name],\n          allowRootWrapper: true,\n          defaultValue: [\n            {\n              type: \"component\",\n              name: sliderThumbMeta.name,\n            },\n          ],\n        },\n        progressBar: {\n          type: \"slot\",\n          mergeWithParent: true,\n          displayName: \"Progress Bar\",\n          defaultValue: [\n            {\n              type: \"box\",\n              styles: {\n                height: \"100%\",\n                width: \"100%\",\n                backgroundColor: \"#ffa6a6\",\n                padding: 0,\n              },\n            },\n          ],\n        },\n        onHoverStart: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"event\", type: \"object\" }],\n        },\n        onHoverEnd: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"event\", type: \"object\" }],\n        },\n        onHoverChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isHovering\", type: \"boolean\" }],\n        },\n      },\n    },\n    overrides\n  );\n}\n"],"names":["pickAriaComponentVariants","React","PlasmicSliderContext","useMemo","flattenChildren","isDefined","SliderTrack","Slider","COMMON_STYLES","makeComponentName","registerComponentHelper"],"mappings":"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"}

package/skinny/registerSliderTrack.esm.js

@@ -3,7 +3,7 @@ import { SliderTrack, Slider } from 'react-aria-components';
 import flattenChildren from 'react-keyed-flatten-children';
 import { C as COMMON_STYLES } from './common-ceebbaea.esm.js';
 import { f as PlasmicSliderContext } from './contexts-5cb81c2f.esm.js';
-import { i as isDefined, m as makeComponentName, r as registerComponentHelper } from './utils-5d1b4c6b.esm.js';
+import { m as makeComponentName, r as registerComponentHelper, i as isDefined } from './utils-5d1b4c6b.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';
@@ -44,10 +44,12 @@ function isMultiValueGuard(value) {
   return Array.isArray(value) && value.length > 1;
 }
 function BaseSliderTrack(props) {
+  var _b;
   const context = React.useContext(PlasmicSliderContext);
   const isStandalone = !context;
   const _a = props, { children, progressBar, plasmicUpdateVariant } = _a, rest = __objRest(_a, ["children", "progressBar", "plasmicUpdateVariant"]);
-  const thumbsLength = context && isMultiValueGuard(context.value) ? context.value.length : 1;
+  const value = (_b = context == null ? void 0 : context.value) != null ? _b : context == null ? void 0 : context.defaultValue;
+  const thumbsLength = isMultiValueGuard(value) ? value.length : 1;
   const isMultiValue = thumbsLength > 1;
   const { minIndex, maxIndex } = useMemo(() => {
     if (thumbsLength <= 1) {
@@ -57,10 +59,10 @@ function BaseSliderTrack(props) {
   }, [thumbsLength]);
   const thumbs = useMemo(() => {
     const thumbNodes = flattenChildren(children);
-    if (!thumbNodes || thumbNodes.length === 0 || !isDefined(context == null ? void 0 : context.value)) {
+    if (!thumbNodes || thumbNodes.length === 0) {
       return [];
     }
-    const values = isDefined(context) ? Array.isArray(context.value) ? context.value : [context.value] : [];
+    const values = isDefined(context) ? Array.isArray(value) ? value : [value] : [];
     const lastThumb = thumbNodes[thumbNodes.length - 1];
     return values.map((v, i) => {
       const currentThumb = thumbNodes[i];
@@ -78,7 +80,7 @@ function BaseSliderTrack(props) {
         index: i
       });
     });
-  }, [children, context == null ? void 0 : context.value]);
+  }, [children, value]);
   const track = /* @__PURE__ */ React.createElement(SliderTrack, __spreadValues({ style: { position: "relative" } }, rest), ({ state, isHovered }) => /* @__PURE__ */ React.createElement(React.Fragment, null, withObservedValues(
     /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       "div",

package/skinny/registerSliderTrack.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerSliderTrack.esm.js","sources":["../src/registerSliderTrack.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React, { useMemo } from \"react\";\nimport { Slider, SliderThumbProps, SliderTrack } from \"react-aria-components\";\nimport flattenChildren from \"react-keyed-flatten-children\";\nimport { COMMON_STYLES } from \"./common\";\nimport { PlasmicSliderContext } from \"./contexts\";\nimport { BaseSliderThumbProps } from \"./registerSliderThumb\";\nimport {\n  CodeComponentMetaOverrides,\n  Registerable,\n  isDefined,\n  makeComponentName,\n  registerComponentHelper,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\nconst SLIDER_TRACK_VARIANTS = [\"hovered\" as const];\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n  SLIDER_TRACK_VARIANTS\n);\n\nexport interface BaseSliderTrackProps\n  extends React.ComponentProps<typeof SliderTrack>,\n    WithVariants<typeof SLIDER_TRACK_VARIANTS> {\n  progressBar?: React.ReactNode;\n  children?: React.ReactNode;\n}\n\nfunction isMultiValueGuard(value?: number | number[]): value is number[] {\n  return Array.isArray(value) && value.length > 1;\n}\n\nexport function BaseSliderTrack(props: BaseSliderTrackProps) {\n  const context = React.useContext(PlasmicSliderContext);\n  const isStandalone = !context;\n  const { children, progressBar, plasmicUpdateVariant, ...rest } = props;\n\n  const thumbsLength =\n    context && isMultiValueGuard(context.value) ? context.value.length : 1;\n  const isMultiValue = thumbsLength > 1;\n\n  const { minIndex, maxIndex } = useMemo(() => {\n    if (thumbsLength <= 1) {\n      return { minIndex: 0, maxIndex: 0 };\n    }\n    return { minIndex: 0, maxIndex: thumbsLength - 1 };\n  }, [thumbsLength]);\n\n  /**\n   * Generates the thumb components based on the number of thumbs\n   * and the number of values in the slider\n   *\n   * If the number of thumbs is less than the number of values, then\n   * the last thumb is repeated for the remaining values\n   *\n   * If the number of thumbs is greater than the number of values, then\n   * the additional thumbs are omitted\n   */\n  const thumbs = useMemo(() => {\n    const thumbNodes = flattenChildren(children);\n    if (!thumbNodes || thumbNodes.length === 0 || !isDefined(context?.value)) {\n      return [];\n    }\n\n    const values = isDefined(context)\n      ? Array.isArray(context.value)\n        ? context.value\n        : [context.value]\n      : [];\n\n    // Last thumb be re-used if the number of thumbs is less than the number of values\n    const lastThumb = thumbNodes[thumbNodes.length - 1];\n\n    return values.map((v, i) => {\n      const currentThumb = thumbNodes[i];\n      // Re-use the last thumb if there are no more thumbs left ( this is for ease of use - the user can just add one more value to the initial-values array and see another thumb right away, without having to explicitly add a new thumb component )\n      if (i >= thumbNodes.length) {\n        if (React.isValidElement(lastThumb)) {\n          return React.cloneElement(lastThumb, {\n            index: i,\n          } as SliderThumbProps);\n        }\n      }\n      if (!React.isValidElement(currentThumb)) {\n        return null;\n      }\n      return React.cloneElement(currentThumb, {\n        index: i,\n      } as SliderThumbProps);\n    });\n  }, [children, context?.value]);\n\n  const track = (\n    <SliderTrack style={{ position: \"relative\" }} {...rest}>\n      {({ state, isHovered }) => (\n        <>\n          {withObservedValues(\n            <>\n              <div\n                style={{\n                  width: `${\n                    (!isMultiValue\n                      ? state.getThumbPercent(minIndex)\n                      : state.getThumbPercent(maxIndex) -\n                        state.getThumbPercent(minIndex)) * 100\n                  }%`,\n                  height: \"100%\",\n                  position: \"absolute\",\n                  top: 0,\n                  left: !isMultiValue\n                    ? 0\n                    : state.getThumbPercent(minIndex) * 100 + \"%\",\n                }}\n              >\n                {progressBar}\n              </div>\n              {thumbs}\n            </>,\n            {\n              hovered: isHovered,\n            },\n            plasmicUpdateVariant\n          )}\n        </>\n      )}\n    </SliderTrack>\n  );\n\n  if (isStandalone) {\n    return (\n      <Slider style={{ height: \"100%\", width: \"100%\", ...COMMON_STYLES }}>\n        {track}\n      </Slider>\n    );\n  }\n\n  return track;\n}\n\nexport const SLIDER_TRACK_COMPONENT_NAME = makeComponentName(\"sliderTrack\");\n\nexport function registerSliderTrack(\n  sliderThumbMeta: CodeComponentMeta<BaseSliderThumbProps>,\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseSliderTrack>\n) {\n  return registerComponentHelper(\n    loader,\n    BaseSliderTrack,\n    {\n      name: SLIDER_TRACK_COMPONENT_NAME,\n      displayName: \"Aria Slider Track\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerSliderTrack\",\n      importName: \"BaseSliderTrack\",\n      variants,\n      defaultStyles: {\n        width: \"stretch\",\n        backgroundColor: \"#aaa\",\n        position: \"relative\",\n        height: \"10px\",\n        padding: 0,\n      },\n      props: {\n        children: {\n          type: \"slot\",\n          /**\n           * NOTE: We don't merge with parent here, because we want to allow the user to select the thumbs without having to first select the slider track.\n           * Also, there can be more than one thumbs (e.g. in a range slider), but `mergeWithParent` only shows prop controls of the slot content if there is only one direct descendant of the slot.\n           * */\n          // mergeWithParent: true,\n          displayName: \"Thumbs\",\n          description:\n            \"The thumbs of the slider. For range slider, you can add more than one thumb.\",\n          allowedComponents: [sliderThumbMeta.name],\n          allowRootWrapper: true,\n          defaultValue: [\n            {\n              type: \"component\",\n              name: sliderThumbMeta.name,\n            },\n          ],\n        },\n        progressBar: {\n          type: \"slot\",\n          mergeWithParent: true,\n          displayName: \"Progress Bar\",\n          defaultValue: [\n            {\n              type: \"box\",\n              styles: {\n                height: \"100%\",\n                width: \"100%\",\n                backgroundColor: \"#ffa6a6\",\n                padding: 0,\n              },\n            },\n          ],\n        },\n        onHoverStart: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"event\", type: \"object\" }],\n        },\n        onHoverEnd: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"event\", type: \"object\" }],\n        },\n        onHoverChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isHovering\", type: \"boolean\" }],\n        },\n      },\n    },\n    overrides\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"registerSliderTrack.esm.js","sources":["../src/registerSliderTrack.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React, { useMemo } from \"react\";\nimport { Slider, SliderThumbProps, SliderTrack } from \"react-aria-components\";\nimport flattenChildren from \"react-keyed-flatten-children\";\nimport { COMMON_STYLES } from \"./common\";\nimport { PlasmicSliderContext } from \"./contexts\";\nimport { BaseSliderThumbProps } from \"./registerSliderThumb\";\nimport {\n  CodeComponentMetaOverrides,\n  Registerable,\n  isDefined,\n  makeComponentName,\n  registerComponentHelper,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\nconst SLIDER_TRACK_VARIANTS = [\"hovered\" as const];\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n  SLIDER_TRACK_VARIANTS\n);\n\nexport interface BaseSliderTrackProps\n  extends React.ComponentProps<typeof SliderTrack>,\n    WithVariants<typeof SLIDER_TRACK_VARIANTS> {\n  progressBar?: React.ReactNode;\n  children?: React.ReactNode;\n}\n\nfunction isMultiValueGuard(value?: number | number[]): value is number[] {\n  return Array.isArray(value) && value.length > 1;\n}\n\nexport function BaseSliderTrack(props: BaseSliderTrackProps) {\n  const context = React.useContext(PlasmicSliderContext);\n  const isStandalone = !context;\n  const { children, progressBar, plasmicUpdateVariant, ...rest } = props;\n  const value = context?.value ?? context?.defaultValue;\n  const thumbsLength = isMultiValueGuard(value) ? value.length : 1;\n\n  const isMultiValue = thumbsLength > 1;\n\n  const { minIndex, maxIndex } = useMemo(() => {\n    if (thumbsLength <= 1) {\n      return { minIndex: 0, maxIndex: 0 };\n    }\n    return { minIndex: 0, maxIndex: thumbsLength - 1 };\n  }, [thumbsLength]);\n\n  /**\n   * Generates the thumb components based on the number of thumbs\n   * and the number of values in the slider\n   *\n   * If the number of thumbs is less than the number of values, then\n   * the last thumb is repeated for the remaining values\n   *\n   * If the number of thumbs is greater than the number of values, then\n   * the additional thumbs are omitted\n   */\n  const thumbs = useMemo(() => {\n    const thumbNodes = flattenChildren(children);\n    if (!thumbNodes || thumbNodes.length === 0) {\n      return [];\n    }\n\n    const values = isDefined(context)\n      ? Array.isArray(value)\n        ? value\n        : [value]\n      : [];\n\n    // Last thumb be re-used if the number of thumbs is less than the number of values\n    const lastThumb = thumbNodes[thumbNodes.length - 1];\n\n    return values.map((v, i) => {\n      const currentThumb = thumbNodes[i];\n      // Re-use the last thumb if there are no more thumbs left ( this is for ease of use - the user can just add one more value to the initial-values array and see another thumb right away, without having to explicitly add a new thumb component )\n      if (i >= thumbNodes.length) {\n        if (React.isValidElement(lastThumb)) {\n          return React.cloneElement(lastThumb, {\n            index: i,\n          } as SliderThumbProps);\n        }\n      }\n      if (!React.isValidElement(currentThumb)) {\n        return null;\n      }\n      return React.cloneElement(currentThumb, {\n        index: i,\n      } as SliderThumbProps);\n    });\n  }, [children, value]);\n\n  const track = (\n    <SliderTrack style={{ position: \"relative\" }} {...rest}>\n      {({ state, isHovered }) => (\n        <>\n          {withObservedValues(\n            <>\n              <div\n                style={{\n                  width: `${\n                    (!isMultiValue\n                      ? state.getThumbPercent(minIndex)\n                      : state.getThumbPercent(maxIndex) -\n                        state.getThumbPercent(minIndex)) * 100\n                  }%`,\n                  height: \"100%\",\n                  position: \"absolute\",\n                  top: 0,\n                  left: !isMultiValue\n                    ? 0\n                    : state.getThumbPercent(minIndex) * 100 + \"%\",\n                }}\n              >\n                {progressBar}\n              </div>\n              {thumbs}\n            </>,\n            {\n              hovered: isHovered,\n            },\n            plasmicUpdateVariant\n          )}\n        </>\n      )}\n    </SliderTrack>\n  );\n\n  if (isStandalone) {\n    return (\n      <Slider style={{ height: \"100%\", width: \"100%\", ...COMMON_STYLES }}>\n        {track}\n      </Slider>\n    );\n  }\n\n  return track;\n}\n\nexport const SLIDER_TRACK_COMPONENT_NAME = makeComponentName(\"sliderTrack\");\n\nexport function registerSliderTrack(\n  sliderThumbMeta: CodeComponentMeta<BaseSliderThumbProps>,\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseSliderTrack>\n) {\n  return registerComponentHelper(\n    loader,\n    BaseSliderTrack,\n    {\n      name: SLIDER_TRACK_COMPONENT_NAME,\n      displayName: \"Aria Slider Track\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerSliderTrack\",\n      importName: \"BaseSliderTrack\",\n      variants,\n      defaultStyles: {\n        width: \"stretch\",\n        backgroundColor: \"#aaa\",\n        position: \"relative\",\n        height: \"10px\",\n        padding: 0,\n      },\n      props: {\n        children: {\n          type: \"slot\",\n          /**\n           * NOTE: We don't merge with parent here, because we want to allow the user to select the thumbs without having to first select the slider track.\n           * Also, there can be more than one thumbs (e.g. in a range slider), but `mergeWithParent` only shows prop controls of the slot content if there is only one direct descendant of the slot.\n           * */\n          // mergeWithParent: true,\n          displayName: \"Thumbs\",\n          description:\n            \"The thumbs of the slider. For range slider, you can add more than one thumb.\",\n          allowedComponents: [sliderThumbMeta.name],\n          allowRootWrapper: true,\n          defaultValue: [\n            {\n              type: \"component\",\n              name: sliderThumbMeta.name,\n            },\n          ],\n        },\n        progressBar: {\n          type: \"slot\",\n          mergeWithParent: true,\n          displayName: \"Progress Bar\",\n          defaultValue: [\n            {\n              type: \"box\",\n              styles: {\n                height: \"100%\",\n                width: \"100%\",\n                backgroundColor: \"#ffa6a6\",\n                padding: 0,\n              },\n            },\n          ],\n        },\n        onHoverStart: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"event\", type: \"object\" }],\n        },\n        onHoverEnd: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"event\", type: \"object\" }],\n        },\n        onHoverChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isHovering\", type: \"boolean\" }],\n        },\n      },\n    },\n    overrides\n  );\n}\n"],"names":[],"mappings":"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"}

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) {
-  var _a, _b, _c;
+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 = (_c = isAutoOpen || isOpen) != null ? _c : false;
-  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: {

package/skinny/registerTooltip.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerTooltip.cjs.js","sources":["../src/registerTooltip.tsx"],"sourcesContent":["import { usePlasmicCanvasComponentInfo } from \"@plasmicapp/host\";\nimport React from \"react\";\nimport { useFocusable } from \"react-aria\";\nimport { Tooltip, TooltipProps, TooltipTrigger } from \"react-aria-components\";\nimport { TooltipTriggerProps } from \"react-stately\";\nimport { COMMON_STYLES, getCommonOverlayProps } from \"./common\";\nimport {\n  CodeComponentMetaOverrides,\n  Registerable,\n  registerComponentHelper,\n  WithPlasmicCanvasComponentInfo,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\n/*\n  NOTE: Placement should be managed as variants, not just props.\n  When `shouldFlip` is true, the placement prop may not represent the final position\n  (e.g., if placement is set to \"bottom\" but lacks space, the tooltip may flip to \"top\").\n  However, data-selectors will consistently indicate the actual placement of the tooltip.\n*/\nconst TOOLTIP_VARIANTS = [\n  \"placementTop\" as const,\n  \"placementBottom\" as const,\n  \"placementLeft\" as const,\n  \"placementRight\" as const,\n];\n\nexport interface BaseTooltipProps\n  extends TooltipTriggerProps,\n    TooltipProps,\n    WithPlasmicCanvasComponentInfo,\n    WithVariants<typeof TOOLTIP_VARIANTS> {\n  children: React.ReactElement<HTMLElement>;\n  tooltipContent?: React.ReactElement;\n  resetClassName?: string;\n}\n\ninterface TriggerWrapperProps {\n  children: React.ReactElement;\n  className?: string;\n}\n\nconst { variants, withObservedValues } =\n  pickAriaComponentVariants(TOOLTIP_VARIANTS);\n\n/*\n\n  React Aria's TooltipTrigger TooltipTrigger requires a focusable element with ref.\n  To make sure that this requirement is fulfilled, wrap everything in a focusable div.\n  https://react-spectrum.adobe.com/react-aria/Tooltip.html#example\n  (In the example, Aria Button works as a trigger because it uses useFocusable behind the scenes)\n\n  Discussion (React-aria-components TooltipTrigger with custom button):\n  https://github.com/adobe/react-spectrum/discussions/5119#discussioncomment-7084661\n\n  */\nfunction TriggerWrapper({ children, className }: TriggerWrapperProps) {\n  const ref = React.useRef<HTMLDivElement | null>(null);\n  const { focusableProps } = useFocusable({}, ref);\n  return (\n    <div\n      ref={ref}\n      className={className}\n      {...focusableProps}\n      style={COMMON_STYLES}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function BaseTooltip(props: BaseTooltipProps) {\n  const {\n    children,\n    isDisabled,\n    delay,\n    closeDelay,\n    trigger,\n    isOpen,\n    defaultOpen,\n    tooltipContent,\n    resetClassName,\n    placement,\n    offset,\n    crossOffset,\n    shouldFlip,\n    onOpenChange,\n    plasmicUpdateVariant,\n  } = props;\n\n  const { isSelected, selectedSlotName } =\n    usePlasmicCanvasComponentInfo?.(props) ?? {};\n  const isAutoOpen = selectedSlotName !== \"children\" && isSelected;\n  const _isOpen = (isAutoOpen || isOpen) ?? false;\n\n  return (\n    <TooltipTrigger\n      isDisabled={isDisabled}\n      delay={delay}\n      closeDelay={closeDelay}\n      trigger={trigger}\n      isOpen={_isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n    >\n      <TriggerWrapper className={resetClassName}>{children}</TriggerWrapper>\n      <Tooltip\n        isOpen={_isOpen}\n        offset={offset}\n        crossOffset={crossOffset}\n        shouldFlip={shouldFlip}\n        defaultOpen={defaultOpen}\n        className={resetClassName}\n        onOpenChange={onOpenChange}\n        placement={placement}\n      >\n        {({ placement: _placement }) =>\n          withObservedValues(\n            <>{tooltipContent}</>,\n            {\n              placementTop: _placement === \"top\",\n              placementBottom: _placement === \"bottom\",\n              placementLeft: _placement === \"left\",\n              placementRight: _placement === \"right\",\n            },\n            plasmicUpdateVariant\n          )\n        }\n      </Tooltip>\n    </TooltipTrigger>\n  );\n}\n\nexport function registerTooltip(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseTooltip>\n) {\n  registerComponentHelper(\n    loader,\n    BaseTooltip,\n    {\n      name: \"plasmic-react-aria-tooltip\",\n      displayName: \"Aria Tooltip\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerTooltip\",\n      importName: \"BaseTooltip\",\n      isAttachment: true,\n      styleSections: false,\n      variants,\n      props: {\n        children: {\n          type: \"slot\",\n          mergeWithParent: true,\n          displayName: \"Trigger\",\n          defaultValue: {\n            type: \"text\",\n            value: \"Hover me!\",\n            styles: {\n              width: \"hug\",\n            },\n          },\n        },\n        tooltipContent: {\n          type: \"slot\",\n          mergeWithParent: true,\n          displayName: \"Tooltip Content\",\n          // NOTE: This is not applied in attachment\n          defaultValue: {\n            type: \"text\",\n            value: \"Hello from Tooltip!\",\n            styles: {\n              background: \"black\",\n              color: \"white\",\n              padding: \"7px\",\n              borderRadius: \"7px\",\n            },\n          },\n        },\n        resetClassName: {\n          type: \"themeResetClass\",\n        },\n        isDisabled: {\n          type: \"boolean\",\n        },\n        delay: {\n          type: \"number\",\n          // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t opening due to a delay.\n          defaultValue: 0,\n          defaultValueHint: 0,\n          description:\n            \"The delay (in milliseconds) for the tooltip to show up.\",\n        },\n        closeDelay: {\n          type: \"number\",\n          // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t closing due to a delay.\n          defaultValue: 0,\n          defaultValueHint: 0,\n          description: \"The delay (in milliseconds) for the tooltip to close.\",\n        },\n        trigger: {\n          type: \"choice\",\n          options: [\"focus\", \"focus and hover\"],\n          defaultValueHint: \"focus and hover\",\n        },\n        ...getCommonOverlayProps<BaseTooltipProps>(\"popover\", {\n          placement: { defaultValueHint: \"top\" },\n          offset: { defaultValueHint: 0 },\n          containerPadding: { defaultValueHint: 12 },\n          crossOffset: { defaultValueHint: 0 },\n        }),\n        isOpen: {\n          type: \"boolean\",\n          editOnly: true,\n          uncontrolledProp: \"defaultOpen\",\n          description: \"Whether the overlay is open by default\",\n          defaultValueHint: false,\n          hidden: () => true,\n        },\n        onOpenChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n        },\n      },\n      states: {\n        isOpen: {\n          type: \"writable\",\n          valueProp: \"isOpen\",\n          onChangeProp: \"onOpenChange\",\n          variableType: \"boolean\",\n        },\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n"],"names":["pickAriaComponentVariants","React","useFocusable","COMMON_STYLES","usePlasmicCanvasComponentInfo","TooltipTrigger","Tooltip","registerComponentHelper","getCommonOverlayProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,gBAAmB,GAAA;AAAA,EACvB,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AACF,CAAA,CAAA;AAiBA,MAAM,EAAE,QAAA,EAAU,kBAAmB,EAAA,GACnCA,uCAA0B,gBAAgB,CAAA,CAAA;AAa5C,SAAS,cAAe,CAAA,EAAE,QAAU,EAAA,SAAA,EAAkC,EAAA;AACpE,EAAM,MAAA,GAAA,GAAMC,sBAAM,CAAA,MAAA,CAA8B,IAAI,CAAA,CAAA;AACpD,EAAA,MAAM,EAAE,cAAe,EAAA,GAAIC,sBAAa,CAAA,IAAI,GAAG,CAAA,CAAA;AAC/C,EACE,uBAAAD,sBAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA;AAAA,KAAA,EACI,cAHL,CAAA,EAAA;AAAA,MAIC,KAAO,EAAAE,oBAAA;AAAA,KAAA,CAAA;AAAA,IAEN,QAAA;AAAA,GACH,CAAA;AAEJ,CAAA;AAEO,SAAS,YAAY,KAAyB,EAAA;AAvErD,EAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAwEE,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,UAAY,EAAA,gBAAA,MAClB,EAAgC,GAAA,CAAA,EAAA,GAAAC,kCAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,CAAA,KAAhC,YAA0C,EAAC,CAAA;AAC7C,EAAM,MAAA,UAAA,GAAa,qBAAqB,UAAc,IAAA,UAAA,CAAA;AACtD,EAAM,MAAA,OAAA,GAAA,CAAW,EAAc,GAAA,UAAA,IAAA,MAAA,KAAd,IAAyB,GAAA,EAAA,GAAA,KAAA,CAAA;AAE1C,EACE,uBAAAH,sBAAA,CAAA,aAAA;AAAA,IAACI,kCAAA;AAAA,IAAA;AAAA,MACC,UAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAQ,EAAA,OAAA;AAAA,MACR,WAAA;AAAA,MACA,YAAA;AAAA,KAAA;AAAA,oBAECJ,sBAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,SAAW,EAAA,cAAA,EAAA,EAAiB,QAAS,CAAA;AAAA,oBACrDA,sBAAA,CAAA,aAAA;AAAA,MAACK,2BAAA;AAAA,MAAA;AAAA,QACC,MAAQ,EAAA,OAAA;AAAA,QACR,MAAA;AAAA,QACA,WAAA;AAAA,QACA,UAAA;AAAA,QACA,WAAA;AAAA,QACA,SAAW,EAAA,cAAA;AAAA,QACX,YAAA;AAAA,QACA,SAAA;AAAA,OAAA;AAAA,MAEC,CAAC,EAAE,SAAW,EAAA,UAAA,EACb,KAAA,kBAAA;AAAA,oGACK,cAAe,CAAA;AAAA,QAClB;AAAA,UACE,cAAc,UAAe,KAAA,KAAA;AAAA,UAC7B,iBAAiB,UAAe,KAAA,QAAA;AAAA,UAChC,eAAe,UAAe,KAAA,MAAA;AAAA,UAC9B,gBAAgB,UAAe,KAAA,OAAA;AAAA,SACjC;AAAA,QACA,oBAAA;AAAA,OACF;AAAA,KAEJ;AAAA,GACF,CAAA;AAEJ,CAAA;AAEgB,SAAA,eAAA,CACd,QACA,SACA,EAAA;AACA,EAAAC,6BAAA;AAAA,IACE,MAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,MACE,IAAM,EAAA,4BAAA;AAAA,MACN,WAAa,EAAA,cAAA;AAAA,MACb,UAAY,EAAA,gDAAA;AAAA,MACZ,UAAY,EAAA,aAAA;AAAA,MACZ,YAAc,EAAA,IAAA;AAAA,MACd,aAAe,EAAA,KAAA;AAAA,MACf,QAAA;AAAA,MACA,KAAO,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,QACL,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,MAAA;AAAA,UACN,eAAiB,EAAA,IAAA;AAAA,UACjB,WAAa,EAAA,SAAA;AAAA,UACb,YAAc,EAAA;AAAA,YACZ,IAAM,EAAA,MAAA;AAAA,YACN,KAAO,EAAA,WAAA;AAAA,YACP,MAAQ,EAAA;AAAA,cACN,KAAO,EAAA,KAAA;AAAA,aACT;AAAA,WACF;AAAA,SACF;AAAA,QACA,cAAgB,EAAA;AAAA,UACd,IAAM,EAAA,MAAA;AAAA,UACN,eAAiB,EAAA,IAAA;AAAA,UACjB,WAAa,EAAA,iBAAA;AAAA;AAAA,UAEb,YAAc,EAAA;AAAA,YACZ,IAAM,EAAA,MAAA;AAAA,YACN,KAAO,EAAA,qBAAA;AAAA,YACP,MAAQ,EAAA;AAAA,cACN,UAAY,EAAA,OAAA;AAAA,cACZ,KAAO,EAAA,OAAA;AAAA,cACP,OAAS,EAAA,KAAA;AAAA,cACT,YAAc,EAAA,KAAA;AAAA,aAChB;AAAA,WACF;AAAA,SACF;AAAA,QACA,cAAgB,EAAA;AAAA,UACd,IAAM,EAAA,iBAAA;AAAA,SACR;AAAA,QACA,UAAY,EAAA;AAAA,UACV,IAAM,EAAA,SAAA;AAAA,SACR;AAAA,QACA,KAAO,EAAA;AAAA,UACL,IAAM,EAAA,QAAA;AAAA;AAAA,UAEN,YAAc,EAAA,CAAA;AAAA,UACd,gBAAkB,EAAA,CAAA;AAAA,UAClB,WACE,EAAA,yDAAA;AAAA,SACJ;AAAA,QACA,UAAY,EAAA;AAAA,UACV,IAAM,EAAA,QAAA;AAAA;AAAA,UAEN,YAAc,EAAA,CAAA;AAAA,UACd,gBAAkB,EAAA,CAAA;AAAA,UAClB,WAAa,EAAA,uDAAA;AAAA,SACf;AAAA,QACA,OAAS,EAAA;AAAA,UACP,IAAM,EAAA,QAAA;AAAA,UACN,OAAA,EAAS,CAAC,OAAA,EAAS,iBAAiB,CAAA;AAAA,UACpC,gBAAkB,EAAA,iBAAA;AAAA,SACpB;AAAA,OAAA,EACGC,6BAAwC,SAAW,EAAA;AAAA,QACpD,SAAA,EAAW,EAAE,gBAAA,EAAkB,KAAM,EAAA;AAAA,QACrC,MAAA,EAAQ,EAAE,gBAAA,EAAkB,CAAE,EAAA;AAAA,QAC9B,gBAAA,EAAkB,EAAE,gBAAA,EAAkB,EAAG,EAAA;AAAA,QACzC,WAAA,EAAa,EAAE,gBAAA,EAAkB,CAAE,EAAA;AAAA,OACpC,CA5DI,CAAA,EAAA;AAAA,QA6DL,MAAQ,EAAA;AAAA,UACN,IAAM,EAAA,SAAA;AAAA,UACN,QAAU,EAAA,IAAA;AAAA,UACV,gBAAkB,EAAA,aAAA;AAAA,UAClB,WAAa,EAAA,wCAAA;AAAA,UACb,gBAAkB,EAAA,KAAA;AAAA,UAClB,QAAQ,MAAM,IAAA;AAAA,SAChB;AAAA,QACA,YAAc,EAAA;AAAA,UACZ,IAAM,EAAA,cAAA;AAAA,UACN,UAAU,CAAC,EAAE,MAAM,QAAU,EAAA,IAAA,EAAM,WAAW,CAAA;AAAA,SAChD;AAAA,OACF,CAAA;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,MAAQ,EAAA;AAAA,UACN,IAAM,EAAA,UAAA;AAAA,UACN,SAAW,EAAA,QAAA;AAAA,UACX,YAAc,EAAA,cAAA;AAAA,UACd,YAAc,EAAA,SAAA;AAAA,SAChB;AAAA,OACF;AAAA,MACA,UAAY,EAAA,IAAA;AAAA,KACd;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;;"}
+{"version":3,"file":"registerTooltip.cjs.js","sources":["../src/registerTooltip.tsx"],"sourcesContent":["import { usePlasmicCanvasComponentInfo } from \"@plasmicapp/host\";\nimport React, { useCallback, useId, useRef, useState } from \"react\";\nimport { mergeProps, useFocusWithin, useHover } from \"react-aria\";\nimport {\n  Provider,\n  Tooltip,\n  TooltipProps,\n  TooltipTriggerStateContext,\n} from \"react-aria-components\";\nimport { TooltipTriggerProps, useTooltipTriggerState } from \"react-stately\";\nimport { COMMON_STYLES, getCommonOverlayProps } from \"./common\";\nimport {\n  CodeComponentMetaOverrides,\n  Registerable,\n  registerComponentHelper,\n  WithPlasmicCanvasComponentInfo,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\n/*\n  NOTE: Placement should be managed as variants, not just props.\n  When `shouldFlip` is true, the placement prop may not represent the final position\n  (e.g., if placement is set to \"bottom\" but lacks space, the tooltip may flip to \"top\").\n  However, data-selectors will consistently indicate the actual placement of the tooltip.\n*/\nconst TOOLTIP_VARIANTS = [\n  \"placementTop\" as const,\n  \"placementBottom\" as const,\n  \"placementLeft\" as const,\n  \"placementRight\" as const,\n];\n\nconst { variants, withObservedValues } =\n  pickAriaComponentVariants(TOOLTIP_VARIANTS);\n\nexport interface BaseTooltipProps\n  extends Omit<TooltipTriggerProps, \"trigger\">,\n    TooltipProps,\n    WithPlasmicCanvasComponentInfo,\n    WithVariants<typeof TOOLTIP_VARIANTS> {\n  children: React.ReactElement<HTMLElement>;\n  tooltipContent?: React.ReactElement;\n  resetClassName?: string;\n  trigger?: \"focus\" | \"focus and hover\" | undefined;\n  className?: string;\n}\n\n// In Studio, the tooltip is always controlled because isOpen is attached to the code component's state.\n// In Codegen, the user decides whether the tooltip is controlled or not. So we need to handle both cases.\nexport function BaseTooltip(props: BaseTooltipProps) {\n  if (props.isOpen !== undefined) {\n    return <ControlledBaseTooltip {...props} />;\n  } else {\n    return <UncontrolledBaseTooltip {...props} />;\n  }\n}\n\nfunction UncontrolledBaseTooltip({ onOpenChange, ...props }: BaseTooltipProps) {\n  const [open, setOpen] = useState(props.defaultOpen ?? false);\n  const onOpenChangeMerged = useCallback(\n    (newOpen: boolean) => {\n      setOpen(newOpen);\n      onOpenChange?.(newOpen);\n    },\n    [onOpenChange]\n  );\n  return (\n    <ControlledBaseTooltip\n      {...props}\n      isOpen={open}\n      onOpenChange={onOpenChangeMerged}\n    />\n  );\n}\n\nfunction ControlledBaseTooltip(props: BaseTooltipProps) {\n  const {\n    children,\n    isDisabled = false,\n    delay,\n    closeDelay,\n    trigger,\n    isOpen,\n    tooltipContent,\n    resetClassName,\n    placement,\n    offset,\n    crossOffset,\n    shouldFlip,\n    className,\n    onOpenChange = () => {},\n    plasmicUpdateVariant,\n  } = props;\n\n  const { isSelected, selectedSlotName } =\n    usePlasmicCanvasComponentInfo?.(props) ?? {};\n  const isSelectedOnCanvas = selectedSlotName !== \"children\" && isSelected;\n  const _isOpen = isSelectedOnCanvas || isOpen;\n\n  /*\n    The following is a custom implementation of the <TooltipTrigger /> component.\n    The default <TooltipTrigger /> from react-aria-components automatically manages state changes when a useFocusable element (e.g., an Aria Button) is clicked.\n    However, in our custom trigger, <TriggerWrapper>, we use useFocusWithin to explicitly handle state changes, allowing any element—not just an Aria Button—to act as a trigger.\n    However, this results in duplicate state updates when using an Aria Button, as state changes are triggered both by useFocusWithin and useFocusable.\n    Consequently, onOpenChange is called twice.\n\n    This implementation is adapted from:\n    https://github.com/adobe/react-spectrum/blob/988096cf3f1dbd59f274d8c552e9fe7d5dcf4f41/packages/react-aria-components/src/Tooltip.tsx#L89\n    The <FocusableProvider> has been removed, as it handles automatic state updates for the Aria Button.\n\n  */\n  const ref = useRef<any>(null);\n  const tooltipId = useId();\n\n  const state = useTooltipTriggerState({\n    ...props,\n    trigger: trigger === \"focus\" ? trigger : undefined,\n  });\n\n  return (\n    <Provider values={[[TooltipTriggerStateContext, state]]}>\n      <TriggerWrapper\n        ref={ref}\n        className={className}\n        tooltipId={_isOpen ? tooltipId : undefined}\n        isDisabled={isDisabled}\n        onOpenChange={onOpenChange}\n        triggerOnFocusOnly={trigger === \"focus\"}\n      >\n        {children}\n      </TriggerWrapper>\n      <Tooltip\n        triggerRef={ref}\n        // @ts-expect-error <Tooltip> is wrongly typed to not have id prop\n        id={tooltipId}\n        isOpen={_isOpen}\n        offset={offset}\n        delay={delay}\n        closeDelay={closeDelay}\n        crossOffset={crossOffset}\n        shouldFlip={shouldFlip}\n        className={resetClassName}\n        onOpenChange={onOpenChange}\n        placement={placement}\n      >\n        {({ placement: _placement }) =>\n          withObservedValues(\n            <>{tooltipContent}</>,\n            {\n              placementTop: _placement === \"top\",\n              placementBottom: _placement === \"bottom\",\n              placementLeft: _placement === \"left\",\n              placementRight: _placement === \"right\",\n            },\n            plasmicUpdateVariant\n          )\n        }\n      </Tooltip>\n    </Provider>\n  );\n}\n\ninterface TriggerWrapperProps {\n  children: React.ReactElement;\n  onOpenChange: (isOpen: boolean) => void;\n  isDisabled: boolean;\n  triggerOnFocusOnly: boolean;\n  tooltipId?: string;\n  className?: string;\n}\n/*\n\n  React Aria's TooltipTrigger requires a focusable element with ref.\n  To make sure that this requirement is fulfilled, wrap everything in a focusable div.\n  https://react-spectrum.adobe.com/react-aria/Tooltip.html#example\n  (In the example, Aria Button works as a trigger because it uses useFocusable behind the scenes)\n\n  Discussion (React-aria-components TooltipTrigger with custom button):\n  https://github.com/adobe/react-spectrum/discussions/5119#discussioncomment-7084661\n\n  */\nconst TriggerWrapper = React.forwardRef<HTMLDivElement, TriggerWrapperProps>(\n  function TriggerWrapper_(\n    {\n      children,\n      onOpenChange,\n      isDisabled,\n      triggerOnFocusOnly,\n      tooltipId,\n      className,\n    },\n    ref: React.Ref<HTMLDivElement>\n  ) {\n    const { hoverProps } = useHover({\n      isDisabled,\n      onHoverStart: () => !triggerOnFocusOnly && onOpenChange(true),\n      onHoverEnd: () => !triggerOnFocusOnly && onOpenChange(false),\n    });\n\n    // useFocusWithin captures focus events for all nested focusable elements\n    const { focusWithinProps } = useFocusWithin({\n      isDisabled,\n      onFocusWithin: () => {\n        onOpenChange(true);\n      },\n      onBlurWithin: () => {\n        onOpenChange(false);\n      },\n    });\n\n    const mergedProps = mergeProps(hoverProps, focusWithinProps, {\n      \"aria-describedby\": tooltipId,\n      // We expose className to allow user control over the wrapper div's styling.\n      className,\n      ref,\n      style: COMMON_STYLES,\n    });\n\n    return <div {...mergedProps}>{children}</div>;\n  }\n);\n\nexport function registerTooltip(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseTooltip>\n) {\n  registerComponentHelper(\n    loader,\n    BaseTooltip,\n    {\n      name: \"plasmic-react-aria-tooltip\",\n      displayName: \"Aria Tooltip\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerTooltip\",\n      importName: \"BaseTooltip\",\n      isAttachment: true,\n      variants,\n      props: {\n        children: {\n          type: \"slot\",\n          mergeWithParent: true,\n          displayName: \"Trigger\",\n          defaultValue: {\n            type: \"text\",\n            value: \"Hover me!\",\n            styles: {\n              width: \"hug\",\n            },\n          },\n        },\n        tooltipContent: {\n          type: \"slot\",\n          mergeWithParent: true,\n          displayName: \"Tooltip Content\",\n          // NOTE: This is not applied in attachment\n          defaultValue: {\n            type: \"text\",\n            value: \"Hello from Tooltip!\",\n            styles: {\n              background: \"black\",\n              color: \"white\",\n              padding: \"7px\",\n              borderRadius: \"7px\",\n            },\n          },\n        },\n        resetClassName: {\n          type: \"themeResetClass\",\n        },\n        isDisabled: {\n          type: \"boolean\",\n        },\n        delay: {\n          type: \"number\",\n          // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t opening due to a delay.\n          defaultValue: 0,\n          defaultValueHint: 0,\n          description:\n            \"The delay (in milliseconds) for the tooltip to show up.\",\n        },\n        closeDelay: {\n          type: \"number\",\n          // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t closing due to a delay.\n          defaultValue: 0,\n          defaultValueHint: 0,\n          description: \"The delay (in milliseconds) for the tooltip to close.\",\n        },\n        trigger: {\n          type: \"choice\",\n          options: [\"focus\", \"focus and hover\"],\n          defaultValueHint: \"focus and hover\",\n        },\n        ...getCommonOverlayProps<BaseTooltipProps>(\"popover\", {\n          placement: { defaultValueHint: \"top\" },\n          offset: { defaultValueHint: 0 },\n          containerPadding: { defaultValueHint: 12 },\n          crossOffset: { defaultValueHint: 0 },\n        }),\n        isOpen: {\n          type: \"boolean\",\n          editOnly: true,\n          uncontrolledProp: \"defaultOpen\",\n          description: \"Whether the overlay is open by default\",\n          defaultValueHint: false,\n          hidden: () => true,\n        },\n        onOpenChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n        },\n      },\n      states: {\n        isOpen: {\n          type: \"writable\",\n          valueProp: \"isOpen\",\n          onChangeProp: \"onOpenChange\",\n          variableType: \"boolean\",\n        },\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n"],"names":["pickAriaComponentVariants","React","_a","useState","useCallback","usePlasmicCanvasComponentInfo","useRef","useId","useTooltipTriggerState","Provider","TooltipTriggerStateContext","Tooltip","useHover","useFocusWithin","mergeProps","COMMON_STYLES","registerComponentHelper","getCommonOverlayProps"],"mappings":"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"}

package/skinny/registerTooltip.d.ts

@@ -4,10 +4,12 @@ import { TooltipTriggerProps } from "react-stately";
 import { CodeComponentMetaOverrides, Registerable, WithPlasmicCanvasComponentInfo } from "./utils";
 import { WithVariants } from "./variant-utils";
 declare const TOOLTIP_VARIANTS: ("placementLeft" | "placementRight" | "placementTop" | "placementBottom")[];
-export interface BaseTooltipProps extends TooltipTriggerProps, TooltipProps, WithPlasmicCanvasComponentInfo, WithVariants<typeof TOOLTIP_VARIANTS> {
+export interface BaseTooltipProps extends Omit<TooltipTriggerProps, "trigger">, TooltipProps, WithPlasmicCanvasComponentInfo, WithVariants<typeof TOOLTIP_VARIANTS> {
     children: React.ReactElement<HTMLElement>;
     tooltipContent?: React.ReactElement;
     resetClassName?: string;
+    trigger?: "focus" | "focus and hover" | undefined;
+    className?: string;
 }
 export declare function BaseTooltip(props: BaseTooltipProps): React.JSX.Element;
 export declare function registerTooltip(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseTooltip>): void;