@plasmicpkgs/react-aria 0.0.43 → 0.0.44

package/dist/contexts.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 import type { StrictItemType } from "./option-utils";
 import type { BaseListBoxProps } from "./registerListBox";
+import { BaseSlider } from "./registerSlider";
 export declare const PlasmicTextFieldContext: React.Context<import("./registerTextField").BaseTextFieldProps | undefined>;
 export declare const PlasmicCheckboxGroupContext: React.Context<import("./registerCheckboxGroup").BaseCheckboxGroupProps | undefined>;
 export declare const PlasmicRadioGroupContext: React.Context<import("./registerRadioGroup").BaseRadioGroupProps | undefined>;
 export declare const PlasmicDialogTriggerContext: React.Context<import("./registerDialogTrigger").BaseDialogTriggerProps | undefined>;
-export declare const PlasmicSliderContext: React.Context<import("./registerSlider").BaseSliderProps | undefined>;
+export type PlasmicSliderContextType<T extends number | number[]> = React.ComponentProps<typeof BaseSlider<T>> | undefined;
+export declare const PlasmicSliderContext: React.Context<PlasmicSliderContextType<number | number[]>>;
 export declare const PlasmicLabelContext: React.Context<(import("react-aria-components").LabelProps & React.RefAttributes<HTMLLabelElement>) | undefined>;
 export declare const PlasmicListBoxContext: React.Context<BaseListBoxProps | undefined>;
 export declare const PlasmicItemContext: React.Context<StrictItemType | undefined>;

package/dist/react-aria.esm.js

@@ -1,4 +1,4 @@
-import React, { useEffect, Component, forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { useEffect, Component, forwardRef, useImperativeHandle, useMemo } from 'react';
 import { Button, Checkbox, Text, FieldError, Label, CheckboxGroup, Input, ListBoxItem, ListBox, Header, Section, Collection, PopoverContext, SelectContext, Popover, ComboBox, ComboBoxStateContext, Heading, ModalOverlay, Modal, Dialog, DialogTrigger, Form, Radio, RadioGroup, Select, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField } from 'react-aria-components';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import { useFilter } from '@react-aria/i18n';
@@ -3439,7 +3439,7 @@ function BaseSliderOutput(props) {
 }
 const SLIDER_OUTPUT_COMPONENT_NAME = makeComponentName("sliderOutput");
 function registerSliderOutput(loader, overrides) {
-  registerComponentHelper(
+  return registerComponentHelper(
     loader,
     BaseSliderOutput,
     {
@@ -3531,7 +3531,7 @@ function BaseSliderThumb(_a) {
 }
 const SLIDER_THUMB_COMPONENT_NAME = makeComponentName("sliderThumb");
 function registerSliderThumb(loader, overrides) {
-  registerComponentHelper(
+  return registerComponentHelper(
     loader,
     BaseSliderThumb,
     {
@@ -3603,52 +3603,59 @@ const { interactionVariants: interactionVariants$4, withObservedValues: withObse
   SLIDER_TRACK_INTERACTION_VARIANTS
 );
 function findMinMaxIndices(values) {
-  if (typeof values === "number" || (values == null ? void 0 : values.length) === 0 || !Array.isArray(values)) {
-    return { minIndex: 0, maxIndex: 0 };
-  }
   let minIndex = 0;
   let maxIndex = 0;
-  for (let i = 1; i < values.length; i++) {
-    if (values[i] < values[minIndex]) {
-      minIndex = i;
-    }
-    if (values[i] > values[maxIndex]) {
-      maxIndex = i;
+  if (Array.isArray(values)) {
+    for (let i = 1; i < values.length; i++) {
+      if (values[i] < values[minIndex]) {
+        minIndex = i;
+      }
+      if (values[i] > values[maxIndex]) {
+        maxIndex = i;
+      }
     }
   }
   return { minIndex, maxIndex };
 }
+function isMultiValueGuard(value) {
+  return Array.isArray(value) && value.length > 1;
+}
 function BaseSliderTrack(props) {
   const context = React.useContext(PlasmicSliderContext);
+  const isStandalone = !context;
   const mergedProps = mergeProps(context, props);
-  const _a = mergedProps, {
-    children,
-    progressBar,
-    updateInteractionVariant,
-    isMultiValue
-  } = _a, rest = __objRest$5(_a, [
-    "children",
-    "progressBar",
-    "updateInteractionVariant",
-    "isMultiValue"
-  ]);
-  const { minIndex, maxIndex } = useMemo(
-    () => findMinMaxIndices(mergedProps.value),
-    [mergedProps.value]
-  );
-  const thumbs = useMemo(() => {
-    const rawThumbs = flattenChildren(children);
-    const values = Array.isArray(mergedProps == null ? void 0 : mergedProps.value) ? mergedProps.value : [mergedProps.value].filter((v) => v !== void 0);
-    const difference = values.length - rawThumbs.length;
-    if (!difference) {
-      return rawThumbs;
+  const _a = mergedProps, { children, progressBar, updateInteractionVariant } = _a, rest = __objRest$5(_a, ["children", "progressBar", "updateInteractionVariant"]);
+  const isMultiValue = isMultiValueGuard(mergedProps.value);
+  const { minIndex, maxIndex } = useMemo(() => {
+    if (!context || !Array.isArray(context.value) || context.value.length <= 1) {
+      return { minIndex: 0, maxIndex: 0 };
     }
-    if (difference < 0) {
-      return rawThumbs.slice(0, values.length);
+    return findMinMaxIndices(context.value);
+  }, [context == null ? void 0 : context.value]);
+  const thumbs = useMemo(() => {
+    const thumbNodes = flattenChildren(children);
+    if (!thumbNodes || thumbNodes.length === 0 || !isDefined(context == null ? void 0 : context.value)) {
+      return [];
     }
-    const lastThumb = rawThumbs[rawThumbs.length - 1];
-    return rawThumbs.concat(new Array(difference).fill(lastThumb));
-  }, [children, mergedProps.value]);
+    const values = isDefined(context) ? Array.isArray(context.value) ? context.value : [context.value] : [];
+    const lastThumb = thumbNodes[thumbNodes.length - 1];
+    return values.map((v, i) => {
+      const currentThumb = thumbNodes[i];
+      if (i >= thumbNodes.length) {
+        if (React.isValidElement(lastThumb)) {
+          return React.cloneElement(lastThumb, {
+            index: i
+          });
+        }
+      }
+      if (!React.isValidElement(currentThumb)) {
+        return null;
+      }
+      return React.cloneElement(currentThumb, {
+        index: i
+      });
+    });
+  }, [children, context == null ? void 0 : context.value]);
   const track = /* @__PURE__ */ React.createElement(SliderTrack, __spreadValues$5({ style: { position: "relative" } }, rest), ({ state, isHovered }) => /* @__PURE__ */ React.createElement(React.Fragment, null, withObservedValues$3(
     /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       "div",
@@ -3662,28 +3669,20 @@ function BaseSliderTrack(props) {
         }
       },
       progressBar
-    ), thumbs.map(
-      (thumb, i) => React.isValidElement(thumb) && React.cloneElement(thumb, {
-        // sets the index of the thumb, so that each thumb reflects the correct value
-        index: i
-      })
-    )),
+    ), thumbs),
     {
       hovered: isHovered
     },
     updateInteractionVariant
   )));
-  return /* @__PURE__ */ React.createElement(
-    ErrorBoundary,
-    {
-      fallback: /* @__PURE__ */ React.createElement(Slider, { style: { height: "100%", width: "100%" } }, track)
-    },
-    track
-  );
+  if (isStandalone) {
+    return /* @__PURE__ */ React.createElement(Slider, { style: { height: "100%", width: "100%" } }, track);
+  }
+  return track;
 }
 const SLIDER_TRACK_COMPONENT_NAME = makeComponentName("sliderTrack");
-function registerSliderTrack(loader, overrides) {
-  registerComponentHelper(
+function registerSliderTrack(sliderThumbMeta, loader, overrides) {
+  return registerComponentHelper(
     loader,
     BaseSliderTrack,
     {
@@ -3702,14 +3701,13 @@ function registerSliderTrack(loader, overrides) {
       props: {
         children: {
           type: "slot",
-          description: "The thumbs of the slider",
+          displayName: "Thumbs",
+          description: "The thumbs of the slider. For range slider, you can add more than one thumb.",
+          allowedComponents: [sliderThumbMeta.name],
           defaultValue: [
             {
               type: "component",
-              name: makeChildComponentName(
-                SLIDER_COMPONENT_NAME,
-                SLIDER_THUMB_COMPONENT_NAME
-              )
+              name: sliderThumbMeta.name
             }
           ]
         },
@@ -3779,106 +3777,101 @@ var __objRest$4 = (source, exclude) => {
   return target;
 };
 const SLIDER_COMPONENT_NAME = makeComponentName("slider");
+const RANGE_SLIDER_COMPONENT_NAME = makeComponentName("range-slider");
 const SLIDER_INTERACTION_VARIANTS = ["disabled"];
 const { interactionVariants: interactionVariants$3, withObservedValues: withObservedValues$2 } = pickAriaComponentVariants(
   SLIDER_INTERACTION_VARIANTS
 );
-const sliderHelpers = {
-  states: {
-    range: {
-      onChangeArgsToValue: (value, isMultiValue) => {
-        if (isMultiValue) {
-          return Array.isArray(value) ? value : [value, value + 10];
-        }
-        return void 0;
-      }
-    },
-    value: {
-      onChangeArgsToValue: (value, isMultiValue) => {
-        if (isMultiValue) {
-          return void 0;
-        }
-        return Array.isArray(value) ? value[0] : value;
-      }
-    }
-  }
-};
 function BaseSlider(props) {
-  const _a = props, {
-    range,
-    value,
-    defaultRange,
-    children,
-    updateInteractionVariant,
-    defaultValue,
-    onChange
-  } = _a, rest = __objRest$4(_a, [
-    "range",
-    "value",
-    "defaultRange",
-    "children",
-    "updateInteractionVariant",
-    "defaultValue",
-    "onChange"
-  ]);
-  const isFirstRender = useRef(true);
-  useEffect(() => {
-    var _a2, _b, _c;
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-    if (props.isMultiValue) {
-      const minValue = (_a2 = props.minValue) != null ? _a2 : 0;
-      (_b = props.onChange) == null ? void 0 : _b.call(
-        props,
-        Array.isArray(range) && range.length > 1 ? range : [minValue, minValue + 10],
-        true
-      );
-      return;
-    }
-    (_c = props.onChange) == null ? void 0 : _c.call(props, Array.isArray(value) ? 0 : value != null ? value : 0, false);
-  }, [props.isMultiValue]);
-  const mergedProps = mergeProps(rest, {
-    value: props.isMultiValue ? range : value,
-    defaultValue: props.isMultiValue ? defaultRange : defaultValue
-  });
-  return /* @__PURE__ */ React.createElement(PlasmicSliderContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(
-    Slider,
-    __spreadValues$4({
-      key: props.isMultiValue ? "multi" : "single",
-      onChange: (newValue) => {
-        onChange == null ? void 0 : onChange(newValue, props.isMultiValue);
-      }
-    }, mergedProps),
-    ({ isDisabled }) => withObservedValues$2(
+  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$4(_a, ["children", "updateInteractionVariant"]);
+  return /* @__PURE__ */ React.createElement(
+    PlasmicSliderContext.Provider,
+    {
+      value: __spreadProps$2(__spreadValues$4({}, rest), {
+        // Here's why the type casting is needed here: https://github.com/Microsoft/TypeScript/issues/3410
+        onChange: rest.onChange,
+        onChangeEnd: rest.onChangeEnd
+      })
+    },
+    /* @__PURE__ */ React.createElement(Slider, __spreadValues$4({}, rest), ({ isDisabled }) => withObservedValues$2(
       children,
       {
         disabled: isDisabled
       },
       updateInteractionVariant
-    )
-  ));
+    ))
+  );
+}
+function getCommonSliderProps() {
+  return {
+    orientation: {
+      type: "choice",
+      options: ["horizontal", "vertical"],
+      defaultValueHint: "horizontal",
+      defaultValue: "horizontal"
+    },
+    minValue: {
+      type: "number",
+      description: "The minimum value of the slider",
+      defaultValueHint: 0
+    },
+    maxValue: {
+      type: "number",
+      description: "The maximum value of the slider",
+      defaultValueHint: 100
+    },
+    step: {
+      type: "number",
+      description: "The step value of the slider",
+      defaultValueHint: 1
+    }
+  };
 }
 function registerSlider(loader, overrides) {
+  const sliderOutputMeta = registerSliderOutput(loader, {
+    parentComponentName: SLIDER_COMPONENT_NAME
+  });
+  const sliderThumbMeta = registerSliderThumb(loader, {
+    parentComponentName: SLIDER_COMPONENT_NAME
+  });
+  const sliderTrackMeta = registerSliderTrack(sliderThumbMeta, loader, {
+    parentComponentName: SLIDER_COMPONENT_NAME
+  });
   registerComponentHelper(
     loader,
     BaseSlider,
     {
-      name: SLIDER_COMPONENT_NAME,
-      displayName: "Aria Slider",
+      name: RANGE_SLIDER_COMPONENT_NAME,
+      displayName: "Aria Range Slider",
       importPath: "@plasmicpkgs/react-aria/skinny/registerSlider",
       importName: "BaseSlider",
       interactionVariants: interactionVariants$3,
       defaultStyles: {
         width: "300px"
       },
-      props: __spreadProps$2(__spreadValues$4({}, getCommonProps("slider", [
+      props: __spreadProps$2(__spreadValues$4(__spreadValues$4({}, getCommonProps("slider", [
         "isDisabled",
-        "name",
-        "autoFocus",
         "aria-label"
-      ])), {
+      ])), getCommonSliderProps()), {
+        value: {
+          type: "array",
+          editOnly: true,
+          displayName: "Initial value",
+          uncontrolledProp: "defaultValue",
+          description: "The intial value of the slider",
+          defaultValue: [20, 50],
+          validator: (value) => {
+            if (!Array.isArray(value)) {
+              return "Input must be an array.";
+            }
+            for (let i = 1; i < value.length; i++) {
+              if (value[i] < value[i - 1]) {
+                return "Array elements are not in ascending order.";
+              }
+            }
+            return true;
+          }
+        },
         children: {
           type: "slot",
           defaultValue: [
@@ -3902,10 +3895,7 @@ function registerSlider(loader, overrides) {
                 },
                 {
                   type: "component",
-                  name: makeChildComponentName(
-                    SLIDER_COMPONENT_NAME,
-                    SLIDER_OUTPUT_COMPONENT_NAME
-                  ),
+                  name: sliderOutputMeta.name,
                   props: {
                     children: {
                       type: "text",
@@ -3917,49 +3907,102 @@ function registerSlider(loader, overrides) {
             },
             {
               type: "component",
-              name: makeChildComponentName(
-                SLIDER_COMPONENT_NAME,
-                SLIDER_TRACK_COMPONENT_NAME
-              )
+              name: sliderTrackMeta.name,
+              props: {
+                children: [
+                  {
+                    type: "component",
+                    name: sliderThumbMeta.name
+                  },
+                  {
+                    type: "component",
+                    name: sliderThumbMeta.name,
+                    styles: {
+                      backgroundColor: "blue"
+                    }
+                  }
+                ]
+              }
             }
           ]
         },
-        orientation: {
-          type: "choice",
-          options: ["horizontal", "vertical"],
-          defaultValueHint: "horizontal",
-          defaultValue: "horizontal"
-        },
-        minValue: {
-          type: "number",
-          description: "The minimum value of the slider",
-          defaultValueHint: 0
-        },
-        maxValue: {
-          type: "number",
-          description: "The maximum value of the slider",
-          defaultValueHint: 100
-        },
-        step: {
-          type: "number",
-          description: "The step value of the slider",
-          defaultValueHint: 1
-        },
-        isMultiValue: {
-          type: "boolean",
-          displayName: "Multi-valued",
-          description: "Whether the slider supports range (multiple thumbs)",
-          defaultValue: false,
-          defaultValueHint: false
+        onChange: {
+          type: "eventHandler",
+          argTypes: [{ name: "value", type: "object" }]
         },
-        range: {
-          type: "array",
-          editOnly: true,
-          uncontrolledProp: "defaultRange",
-          description: "The default range of the slider",
-          defaultValueHint: [10, 20],
-          defaultValue: [10, 20],
-          hidden: (ps) => !ps.isMultiValue
+        onChangeEnd: {
+          type: "eventHandler",
+          argTypes: [{ name: "value", type: "object" }]
+        }
+      }),
+      states: {
+        value: {
+          type: "writable",
+          valueProp: "value",
+          onChangeProp: "onChange",
+          variableType: "array"
+        }
+      },
+      trapsFocus: true
+    },
+    {
+      parentComponentName: SLIDER_COMPONENT_NAME
+    }
+  );
+  registerComponentHelper(
+    loader,
+    BaseSlider,
+    {
+      name: SLIDER_COMPONENT_NAME,
+      displayName: "Aria Slider",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerSlider",
+      importName: "BaseSlider",
+      interactionVariants: interactionVariants$3,
+      defaultStyles: {
+        width: "300px"
+      },
+      props: __spreadProps$2(__spreadValues$4(__spreadValues$4({}, getCommonProps("slider", [
+        "isDisabled",
+        "aria-label"
+      ])), getCommonSliderProps()), {
+        children: {
+          type: "slot",
+          defaultValue: [
+            {
+              type: "hbox",
+              styles: {
+                width: "stretch",
+                justifyContent: "space-between",
+                padding: "8px 0px"
+              },
+              children: [
+                {
+                  type: "component",
+                  name: LABEL_COMPONENT_NAME,
+                  props: {
+                    children: {
+                      type: "text",
+                      value: "Label"
+                    }
+                  }
+                },
+                {
+                  type: "component",
+                  name: sliderOutputMeta.name,
+                  props: {
+                    children: {
+                      type: "text",
+                      value: "Output"
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              type: "component",
+              name: sliderTrackMeta.name
+            }
+          ]
         },
         value: {
           type: "number",
@@ -3967,52 +4010,29 @@ function registerSlider(loader, overrides) {
           uncontrolledProp: "defaultValue",
           description: "The default value of the slider",
           defaultValueHint: 0,
-          defaultValue: 0,
-          hidden: (ps) => Boolean(ps.isMultiValue)
+          defaultValue: 0
         },
         onChange: {
           type: "eventHandler",
-          argTypes: [{ name: "value", type: "object" }]
+          argTypes: [{ name: "value", type: "number" }]
         },
         onChangeEnd: {
           type: "eventHandler",
-          argTypes: [{ name: "value", type: "object" }]
+          argTypes: [{ name: "value", type: "number" }]
         }
       }),
       states: {
-        range: __spreadValues$4({
-          type: "writable",
-          valueProp: "range",
-          onChangeProp: "onChange",
-          variableType: "array",
-          hidden: (ps) => !ps.isMultiValue
-        }, sliderHelpers.states.range),
-        value: __spreadValues$4({
+        value: {
           type: "writable",
           valueProp: "value",
           onChangeProp: "onChange",
-          variableType: "number",
-          hidden: (ps) => Boolean(ps.isMultiValue)
-        }, sliderHelpers.states.value)
-      },
-      componentHelpers: {
-        helpers: sliderHelpers,
-        importName: "sliderHelpers",
-        importPath: "@plasmicpkgs/react-aria/skinny/registerSlider"
+          variableType: "number"
+        }
       },
       trapsFocus: true
     },
     overrides
   );
-  registerSliderOutput(loader, {
-    parentComponentName: SLIDER_COMPONENT_NAME
-  });
-  registerSliderThumb(loader, {
-    parentComponentName: SLIDER_COMPONENT_NAME
-  });
-  registerSliderTrack(loader, {
-    parentComponentName: SLIDER_COMPONENT_NAME
-  });
 }
 
 var __defProp$3 = Object.defineProperty;