@plasmicpkgs/react-aria 0.0.151 → 0.0.152

package/skinny/common-81f08e86.esm.js

@@ -0,0 +1,621 @@
+import { usePlasmicCanvasContext, usePlasmicCanvasComponentInfo } from '@plasmicapp/host';
+import registerComponent from '@plasmicapp/host/registerComponent';
+import React, { useEffect } from 'react';
+
+var __defProp$1 = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const isBrowser = typeof window !== "undefined";
+const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
+function useIsOpen({
+  triggerSlotName,
+  isOpen,
+  props
+}) {
+  var _a, _b;
+  const { __plasmic_selection_prop__, plasmicNotifyAutoOpenedContent } = props;
+  const canvasContext = usePlasmicCanvasContext();
+  const { isSelected, selectedSlotName } = (_b = (_a = usePlasmicCanvasComponentInfo) == null ? void 0 : _a({ __plasmic_selection_prop__ })) != null ? _b : {};
+  if (!canvasContext) {
+    return isOpen;
+  }
+  const isTriggerSlotSelected = isDefined(selectedSlotName) && selectedSlotName === triggerSlotName;
+  const isAutoOpenedBySelection = isSelected && !isTriggerSlotSelected;
+  if (isAutoOpenedBySelection && !isOpen) {
+    plasmicNotifyAutoOpenedContent == null ? void 0 : plasmicNotifyAutoOpenedContent();
+  }
+  return Boolean(isAutoOpenedBySelection || isOpen);
+}
+function useAutoOpen({
+  props,
+  open,
+  close
+}) {
+  var _a, _b, _c;
+  const inPlasmicCanvas = !!usePlasmicCanvasContext();
+  const isSelected = (_c = (_b = (_a = usePlasmicCanvasComponentInfo) == null ? void 0 : _a(props)) == null ? void 0 : _b.isSelected) != null ? _c : false;
+  const { plasmicNotifyAutoOpenedContent } = props;
+  useEffect(() => {
+    if (!inPlasmicCanvas) {
+      return;
+    }
+    if (isSelected) {
+      open == null ? void 0 : open();
+      plasmicNotifyAutoOpenedContent == null ? void 0 : plasmicNotifyAutoOpenedContent();
+    } else {
+      close == null ? void 0 : close();
+    }
+  }, [
+    isSelected,
+    inPlasmicCanvas,
+    plasmicNotifyAutoOpenedContent,
+    open,
+    close
+  ]);
+}
+function registerComponentHelper(loader, component, meta, overrides) {
+  if (overrides) {
+    meta = __spreadProps(__spreadValues$1(__spreadValues$1({}, meta), overrides), {
+      props: __spreadValues$1(__spreadValues$1({}, meta.props), overrides.props)
+    });
+    if (overrides.parentComponentName) {
+      meta.name = makeChildComponentName(
+        overrides.parentComponentName,
+        meta.name
+      );
+    }
+  }
+  if (loader) {
+    loader.registerComponent(component, meta);
+  } else {
+    registerComponent(component, meta);
+  }
+  return meta;
+}
+function makeComponentName(name) {
+  return `plasmic-react-aria-${name}`;
+}
+function makeChildComponentName(fullParentName, fullChildName) {
+  if (!fullParentName) {
+    return fullChildName;
+  }
+  return `${fullParentName}-${fullChildName.replace(
+    "plasmic-react-aria-",
+    ""
+  )}`;
+}
+function extractPlasmicDataProps(props) {
+  return Object.fromEntries(
+    Object.entries(props).filter(([key]) => key.startsWith("data-plasmic-"))
+  );
+}
+function isDefined(thing) {
+  return thing !== void 0 && thing !== null;
+}
+function filterHoverProps(props) {
+  const _a = props, otherProps = __objRest(_a, [
+    "onHoverStart",
+    "onHoverChange",
+    "onHoverEnd"
+  ]);
+  return otherProps;
+}
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+function hasParent(_props, ctx) {
+  return isDefined(ctx == null ? void 0 : ctx.parent) === true;
+}
+function isParentReadOnly(_props, ctx) {
+  var _a;
+  return ((_a = ctx == null ? void 0 : ctx.parent) == null ? void 0 : _a.isReadOnly) === true;
+}
+function isParentDisabled(_props, ctx) {
+  var _a;
+  return ((_a = ctx == null ? void 0 : ctx.parent) == null ? void 0 : _a.isDisabled) === true;
+}
+function resolveAutoComplete(autoCompleteProp) {
+  if (typeof autoCompleteProp === "string") {
+    return autoCompleteProp;
+  }
+  if (!autoCompleteProp || !Array.isArray(autoCompleteProp) || autoCompleteProp.includes("off")) {
+    return void 0;
+  }
+  if (autoCompleteProp.includes("off")) {
+    return "off";
+  }
+  if (autoCompleteProp.includes("on") && autoCompleteProp.length === 1) {
+    return "on";
+  }
+  return autoCompleteProp.filter((x) => x !== "on").join(" ");
+}
+function createIdProp(componentName) {
+  return {
+    type: "string",
+    description: `Sets the HTML id attribute on the root element of the ${componentName}.`,
+    advanced: true
+  };
+}
+function createNameProp() {
+  return {
+    type: "string",
+    description: "Name for this field if it is part of a form",
+    displayName: "Form field key",
+    hidden: hasParent,
+    advanced: true
+  };
+}
+function createDisabledProp(componentName) {
+  return {
+    displayName: "Disabled",
+    type: "boolean",
+    description: `Whether the ${componentName} is read-only and unfocusable`,
+    defaultValueHint: false,
+    hidden: isParentDisabled
+  };
+}
+function createReadOnlyProp(componentName) {
+  return {
+    displayName: "Read only",
+    type: "boolean",
+    description: `Whether the value of this ${componentName} can be changed by the user. Unlike disabled, read-only does not prevent the user from interacting with the component (such as focus).`,
+    defaultValueHint: false,
+    advanced: true,
+    hidden: isParentReadOnly
+  };
+}
+function createRequiredProp(componentName) {
+  return {
+    displayName: "Required",
+    type: "boolean",
+    description: `Whether user input is required on the ${componentName} before form submission.`,
+    defaultValueHint: false,
+    advanced: true,
+    // hidden: hasParent,
+    hidden: () => true
+    // hiding required prop until the release of Aria Forms
+  };
+}
+function createAutoFocusProp(componentName) {
+  return {
+    type: "boolean",
+    description: `Whether the ${componentName} should be focused when rendered`,
+    defaultValueHint: false,
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createAriaLabelProp(componentName) {
+  return {
+    type: "string",
+    displayName: "ARIA label",
+    description: `Assistive technology uses this if there is no visible label for this ${componentName}`,
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createInitialValueProp(componentName) {
+  return {
+    type: "string",
+    editOnly: true,
+    displayName: "Initial value",
+    uncontrolledProp: "defaultValue",
+    description: `The default value of the ${componentName}`,
+    hidden: hasParent
+  };
+}
+function createMaxLengthProp() {
+  return {
+    type: "number",
+    description: "The maximum number of characters supported by the input",
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createMinLengthProp() {
+  return {
+    type: "number",
+    description: "The minimum number of characters supported by the input",
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createPatternProp() {
+  return {
+    type: "string",
+    description: "Regex pattern that the value of the input must match to be valid",
+    helpText: "For more information about writing Regular Expressions (regex), visit [Regexr](https://regexr.com/)",
+    validator: (value) => {
+      try {
+        new RegExp(value);
+        return true;
+      } catch (_err) {
+        return "Invalid Regex";
+      }
+    },
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createInputTypeProp() {
+  return {
+    type: "choice",
+    defaultValueHint: "text",
+    options: ["text", "search", "url", "tel", "email", "password"],
+    description: "The type of data that an input field is expected to handle. It influences the input's behavior, validation, and the kind of interface provided to the user.",
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createInputModeProp() {
+  return {
+    type: "choice",
+    description: "hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.",
+    options: [
+      "none",
+      "text",
+      "tel",
+      "url",
+      "email",
+      "numeric",
+      "decimal",
+      "search"
+    ],
+    hidden: hasParent
+  };
+}
+function createAutoCompleteProp() {
+  return {
+    type: "choice",
+    advanced: true,
+    multiSelect: true,
+    hidden: hasParent,
+    description: "Guidance as to the type of data expected in the field",
+    helpText: "Learn more about the available options on the [MDN guide](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)",
+    options: [
+      "on",
+      "off",
+      "name",
+      "honorific-prefix",
+      "given-name",
+      "additional-name",
+      "family-name",
+      "honorific-suffix",
+      "nickname",
+      "email",
+      "username",
+      "new-password",
+      "current-password",
+      "one-time-code",
+      "organization-title",
+      "organization",
+      "street-address",
+      "shipping",
+      "billing",
+      "address-line1",
+      "address-line2",
+      "address-line3",
+      "address-level4",
+      "address-level3",
+      "address-level2",
+      "address-level1",
+      "country",
+      "country-name",
+      "postal-code",
+      "cc-name",
+      "cc-given-name",
+      "cc-additional-name",
+      "cc-family-name",
+      "cc-number",
+      "cc-exp",
+      "cc-exp-month",
+      "cc-exp-year",
+      "cc-csc",
+      "cc-type",
+      "transaction-currency",
+      "transaction-amount",
+      "language",
+      "bday",
+      "bday-day",
+      "bday-month",
+      "bday-year",
+      "sex",
+      "tel",
+      "tel-country-code",
+      "tel-national",
+      "tel-area-code",
+      "tel-local",
+      "tel-local-suffix",
+      "tel-local-prefix",
+      "tel-extension",
+      "impp",
+      "url",
+      "photo",
+      "webauthn"
+    ]
+  };
+}
+function createValidationBehaviorProp() {
+  return {
+    type: "choice",
+    options: ["native", "aria"],
+    description: "Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.",
+    defaultValueHint: "native",
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnChangeProp(argType = "string") {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "value", type: argType }],
+    hidden: hasParent
+  };
+}
+function createOnFocusProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "focusEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnBlurProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "focusEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnFocusChangeProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "isFocused", type: "boolean" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnKeyDownProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "keyboardEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnKeyUpProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "keyboardEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnCopyProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "clipbordEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnCutProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "clipbordEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnPasteProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "clipbordEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnCompositionStartProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "compositionEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnCompositionEndProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "compositionEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnCompositionUpdateProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "compositionEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnSelectProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "selectionEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnBeforeInputProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "inputEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnInputProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "inputEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createPlaceholderProp() {
+  return {
+    type: "string"
+  };
+}
+function createPlacementProp(componentName, overrides) {
+  return __spreadValues({
+    type: "choice",
+    description: `Default placement of the ${componentName} relative to the trigger, if there is enough space`,
+    options: [
+      "bottom",
+      "bottom left",
+      "bottom right",
+      "bottom start",
+      "bottom end",
+      "top",
+      "top left",
+      "top right",
+      "top start",
+      "top end",
+      "left",
+      "left top",
+      "left bottom",
+      "start",
+      "start top",
+      "start bottom",
+      "right",
+      "right top",
+      "right bottom",
+      "end",
+      "end top",
+      "end bottom"
+    ]
+  }, overrides != null ? overrides : {});
+}
+function createOffsetProp(componentName, overrides) {
+  return __spreadValues({
+    type: "number",
+    displayName: "Offset",
+    description: `Additional offset applied along the main axis between the ${componentName} and its trigger`,
+    advanced: true
+  }, overrides != null ? overrides : {});
+}
+function createContainerPaddingProp(componentName, overrides) {
+  return __spreadValues({
+    type: "number",
+    description: `The padding that should be applied between the ${componentName} and its surrounding container. This affects the positioning breakpoints that determine when it will attempt to flip.`,
+    advanced: true
+  }, overrides != null ? overrides : {});
+}
+function createCrossOffsetProp(componentName, overrides) {
+  return __spreadValues({
+    type: "number",
+    description: `The additional offset applied along the cross axis between the ${componentName} and its anchor element.`,
+    advanced: true
+  }, overrides != null ? overrides : {});
+}
+function getCommonOverlayProps(componentName, overrides) {
+  const commonProps = {
+    placement: createPlacementProp(componentName, overrides["placement"]),
+    offset: createOffsetProp(componentName, overrides["offset"]),
+    containerPadding: createContainerPaddingProp(
+      componentName,
+      overrides["containerPadding"]
+    ),
+    crossOffset: createCrossOffsetProp(
+      componentName,
+      overrides["crossOffset"]
+    )
+  };
+  return commonProps;
+}
+const arrowDown = {
+  type: "hbox",
+  children: [],
+  styles: {
+    width: 0,
+    height: 0,
+    padding: 0,
+    borderLeftWidth: "5px",
+    borderRightWidth: "5px",
+    borderTopWidth: "5px",
+    borderLeftStyle: "solid",
+    borderRightStyle: "solid",
+    borderTopStyle: "solid",
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent",
+    borderTopColor: "black"
+  }
+};
+const COMMON_STYLES = { boxSizing: "border-box" };
+function commonInputEventHandlerProps() {
+  return {
+    // Events supported uniformly by all three
+    onChange: createOnChangeProp("string"),
+    onFocus: createOnFocusProp(),
+    onBlur: createOnBlurProp(),
+    onKeyDown: createOnKeyDownProp(),
+    onKeyUp: createOnKeyUpProp(),
+    onCopy: createOnCopyProp(),
+    onCut: createOnCutProp(),
+    onPaste: createOnPasteProp(),
+    onCompositionStart: createOnCompositionStartProp(),
+    onCompositionEnd: createOnCompositionEndProp(),
+    onCompositionUpdate: createOnCompositionUpdateProp(),
+    onSelect: createOnSelectProp(),
+    onBeforeInput: createOnBeforeInputProp(),
+    onInput: createOnInputProp()
+  };
+}
+
+export { createInputTypeProp as A, createAutoCompleteProp as B, COMMON_STYLES as C, createPatternProp as D, createValidationBehaviorProp as E, createOnFocusChangeProp as F, createNameProp as a, createDisabledProp as b, createIdProp as c, createReadOnlyProp as d, createRequiredProp as e, createAriaLabelProp as f, createAutoFocusProp as g, hasParent as h, arrowDown as i, useIsOpen as j, makeChildComponentName as k, extractPlasmicDataProps as l, makeComponentName as m, getCommonOverlayProps as n, useIsomorphicLayoutEffect as o, isDefined as p, filterHoverProps as q, registerComponentHelper as r, commonInputEventHandlerProps as s, createPlaceholderProp as t, useAutoOpen as u, createInitialValueProp as v, createMaxLengthProp as w, createMinLengthProp as x, createInputModeProp as y, resolveAutoComplete as z };
+//# sourceMappingURL=common-81f08e86.esm.js.map