@wix/editor-react-components 1.2153.0

package/dist/site/components/chunks/elementPropsSDKFactory.js

@@ -0,0 +1,984 @@
+import { r as registerCorvidEvent, c as createCompSchemaValidator, a as createSchemaValidator, u as unregisterCorvidEvent, b as registerCorvidMouseEvent } from "./corvidEvents.js";
+import { c as composeSDKFactories } from "./composeSDKFactories.js";
+import { t as templates } from "./messages.js";
+import { a as reportWarning, r as reportError } from "./reporters.js";
+import { b as basePropsSDKFactory } from "./basePropsSDKFactory.js";
+const createViewportPropsSDKFactory = (registerCallback) => {
+  return (api) => {
+    const { metaData, getSdkInstance, create$w, createEvent } = api;
+    const functionValidator = (value, setterName) => createCompSchemaValidator(metaData.role)(
+      value,
+      {
+        type: ["function"]
+      },
+      setterName
+    );
+    return {
+      onViewportEnter: (cb) => {
+        if (!functionValidator(cb, "onViewportEnter")) {
+          return getSdkInstance();
+        }
+        registerCallback == null ? void 0 : registerCallback("onViewportEnter", () => {
+          const corvidEvent = createEvent({ type: "viewportEnter" });
+          const $w = create$w();
+          cb(corvidEvent, $w);
+        });
+        return registerCorvidEvent("onViewportEnter", api, cb);
+      },
+      onViewportLeave: (cb) => {
+        if (!functionValidator(cb, "onViewportLeave")) {
+          return getSdkInstance();
+        }
+        registerCallback == null ? void 0 : registerCallback("onViewportLeave", () => {
+          const corvidEvent = createEvent({ type: "viewportLeave" });
+          const $w = create$w();
+          cb(corvidEvent, $w);
+        });
+        return registerCorvidEvent("onViewportLeave", api, cb);
+      }
+    };
+  };
+};
+const sharedEffectDefaultOptions = {
+  duration: 1200,
+  delay: 0
+};
+const effectDefaultOptions = {
+  arc: {
+    ...sharedEffectDefaultOptions,
+    direction: "left"
+  },
+  bounce: {
+    ...sharedEffectDefaultOptions,
+    direction: "topLeft",
+    intensity: "medium"
+  },
+  puff: {
+    ...sharedEffectDefaultOptions
+  },
+  zoom: {
+    ...sharedEffectDefaultOptions
+  },
+  fade: {
+    ...sharedEffectDefaultOptions
+  },
+  flip: {
+    ...sharedEffectDefaultOptions,
+    direction: "right"
+  },
+  float: {
+    ...sharedEffectDefaultOptions,
+    direction: "right"
+  },
+  fly: {
+    ...sharedEffectDefaultOptions,
+    direction: "right"
+  },
+  fold: {
+    ...sharedEffectDefaultOptions,
+    direction: "left"
+  },
+  glide: {
+    ...sharedEffectDefaultOptions,
+    angle: 0,
+    distance: 0
+  },
+  roll: {
+    ...sharedEffectDefaultOptions,
+    direction: "left"
+  },
+  slide: {
+    ...sharedEffectDefaultOptions,
+    direction: "left"
+  },
+  spin: {
+    ...sharedEffectDefaultOptions,
+    direction: "cw",
+    cycles: 5
+  },
+  turn: {
+    ...sharedEffectDefaultOptions,
+    direction: "right"
+  },
+  ArcIn: {
+    ...sharedEffectDefaultOptions,
+    direction: "right"
+  },
+  ArcOut: {
+    ...sharedEffectDefaultOptions,
+    direction: "right"
+  },
+  BounceIn: {
+    ...sharedEffectDefaultOptions,
+    direction: "topLeft",
+    intensity: "medium"
+  },
+  BounceOut: {
+    ...sharedEffectDefaultOptions,
+    direction: "topLeft",
+    intensity: "medium"
+  },
+  ExpandIn: {
+    ...sharedEffectDefaultOptions,
+    direction: "right"
+  },
+  CollapseOut: {
+    ...sharedEffectDefaultOptions
+  },
+  Conceal: {
+    ...sharedEffectDefaultOptions,
+    direction: "right"
+  },
+  Reveal: {
+    ...sharedEffectDefaultOptions,
+    direction: "left"
+  },
+  FadeIn: {
+    ...sharedEffectDefaultOptions
+  },
+  FadeOut: {
+    ...sharedEffectDefaultOptions
+  },
+  FlipIn: {
+    ...sharedEffectDefaultOptions,
+    direction: "left"
+  },
+  FlipOut: {
+    ...sharedEffectDefaultOptions,
+    direction: "left"
+  },
+  FloatIn: {
+    ...sharedEffectDefaultOptions,
+    direction: "right"
+  },
+  FloatOut: {
+    ...sharedEffectDefaultOptions,
+    direction: "right"
+  },
+  FlyIn: {
+    ...sharedEffectDefaultOptions,
+    direction: "right"
+  },
+  FlyOut: {
+    ...sharedEffectDefaultOptions,
+    direction: "right"
+  },
+  FoldIn: {
+    ...sharedEffectDefaultOptions,
+    direction: "left"
+  },
+  FoldOut: {
+    ...sharedEffectDefaultOptions,
+    direction: "left"
+  },
+  GlideIn: {
+    ...sharedEffectDefaultOptions,
+    angle: 0,
+    distance: 150
+  },
+  GlideOut: {
+    ...sharedEffectDefaultOptions,
+    angle: 0,
+    distance: 150
+  },
+  DropIn: {
+    ...sharedEffectDefaultOptions
+  },
+  PopOut: {
+    ...sharedEffectDefaultOptions
+  },
+  SlideIn: {
+    ...sharedEffectDefaultOptions,
+    direction: "left"
+  },
+  SlideOut: {
+    ...sharedEffectDefaultOptions,
+    direction: "left"
+  },
+  SpinIn: {
+    ...sharedEffectDefaultOptions,
+    direction: "cw",
+    cycles: 2
+  },
+  SpinOut: {
+    ...sharedEffectDefaultOptions,
+    direction: "cw",
+    cycles: 2
+  },
+  TurnIn: {
+    ...sharedEffectDefaultOptions,
+    direction: "right"
+  },
+  TurnOut: {
+    ...sharedEffectDefaultOptions,
+    direction: "right"
+  }
+};
+const EFFECTS = {
+  HIDE: {
+    suffix: "out",
+    deprecatedValues: [
+      "ArcOut",
+      "BounceOut",
+      "CollapseOut",
+      "Conceal",
+      "FadeOut",
+      "FlipOut",
+      "FloatOut",
+      "FlyOut",
+      "FoldOut",
+      "GlideOut",
+      "PopOut",
+      "SlideOut",
+      "SpinOut",
+      "TurnOut"
+    ]
+  },
+  SHOW: {
+    suffix: "in",
+    deprecatedValues: [
+      "ArcIn",
+      "BounceIn",
+      "DropIn",
+      "ExpandIn",
+      "FadeIn",
+      "FlipIn",
+      "FloatIn",
+      "FlyIn",
+      "FoldIn",
+      "GlideIn",
+      "Reveal",
+      "SlideIn",
+      "SpinIn",
+      "TurnIn"
+    ]
+  }
+};
+const effectInfoLink = (propertyName) => `https://www.wix.com/corvid/reference/$w/hiddenmixin/${propertyName}`;
+const duration = { type: ["number", "nil"], minimum: 0, maximum: 4e3 };
+const delay = { type: ["number", "nil"], minimum: 0, maximum: 8e3 };
+const direction = {
+  type: ["string", "nil"],
+  enum: ["left", "right", "top", "bottom"]
+};
+const effectsValidationSchema = {
+  arc: {
+    type: ["object"],
+    properties: {
+      duration,
+      delay,
+      direction: {
+        type: ["string", "nil"],
+        enum: ["left", "right"]
+      }
+    }
+  },
+  bounce: {
+    type: ["object"],
+    properties: {
+      duration,
+      delay,
+      direction: {
+        type: ["string", "nil"],
+        enum: ["topLeft", "topRight", "bottomRight", "bottomLeft", "center"]
+      },
+      intensity: {
+        type: ["string", "nil"],
+        enum: ["soft", "medium", "hard"]
+      }
+    }
+  },
+  puff: {
+    type: ["object"],
+    properties: {
+      duration,
+      delay
+    }
+  },
+  zoom: {
+    type: ["object"],
+    properties: {
+      duration,
+      delay
+    }
+  },
+  fade: {
+    type: ["object"],
+    properties: {
+      duration,
+      delay
+    }
+  },
+  flip: {
+    type: ["object"],
+    properties: {
+      duration,
+      delay,
+      direction
+    }
+  },
+  float: {
+    type: ["object"],
+    properties: {
+      duration,
+      delay,
+      direction
+    }
+  },
+  fly: {
+    type: ["object"],
+    properties: {
+      duration,
+      delay,
+      direction
+    }
+  },
+  fold: {
+    type: ["object"],
+    properties: {
+      duration,
+      delay,
+      direction
+    }
+  },
+  glide: {
+    type: ["object"],
+    properties: {
+      duration,
+      delay,
+      angle: {
+        type: ["number", "nil"],
+        minimum: 0,
+        maximum: 360
+      },
+      distance: {
+        type: ["number", "nil"],
+        minimum: 0,
+        maximum: 300
+      }
+    }
+  },
+  roll: {
+    type: ["object"],
+    properties: {
+      duration,
+      delay,
+      direction
+    }
+  },
+  slide: {
+    type: ["object"],
+    properties: {
+      duration,
+      delay,
+      direction
+    }
+  },
+  spin: {
+    type: ["object"],
+    properties: {
+      duration,
+      delay,
+      direction: {
+        type: ["string", "nil"],
+        enum: ["cw", "ccw"]
+      },
+      cycles: {
+        type: ["number", "nil"],
+        minimum: 1,
+        maximum: 15
+      }
+    }
+  },
+  turn: {
+    type: ["object"],
+    properties: {
+      duration,
+      delay,
+      direction: {
+        type: ["string", "nil"],
+        enum: ["right", "left"]
+      }
+    }
+  }
+};
+const createInvalidOptionsTypeWarningReporter = ({
+  effectName,
+  propertyName,
+  compName
+}) => {
+  return (message, messageParams) => {
+    reportWarning(
+      templates.warning_invalid_type_effect_options({
+        propertyName,
+        compName,
+        effectName,
+        wrongValue: `${messageParams == null ? void 0 : messageParams.value}`,
+        infoLink: effectInfoLink(propertyName)
+      })
+    );
+  };
+};
+const createWrongOptionsWarningReporter = ({
+  effectName,
+  propertyName,
+  compName
+}) => {
+  return (message, messageParams) => {
+    reportWarning(
+      templates.warning_invalid_effect_options({
+        propertyName,
+        compName,
+        effectName,
+        wrongProperty: "value",
+        wrongValue: `the key "${messageParams == null ? void 0 : messageParams.propertyName}" cannot be set to the value "${messageParams == null ? void 0 : messageParams.value}"`,
+        infoLink: effectInfoLink(propertyName)
+      })
+    );
+  };
+};
+const createEffectOptionsValidation = ({
+  propertyName,
+  compName
+}) => {
+  return (effectName, effectOptions) => {
+    if (!effectName) {
+      return false;
+    }
+    if (effectOptions === void 0) {
+      return true;
+    }
+    const invalidOptionTypeReporter = createInvalidOptionsTypeWarningReporter({
+      effectName,
+      propertyName,
+      compName
+    });
+    const isEffectOptionsTypeValid = () => createSchemaValidator(
+      {
+        reportError: invalidOptionTypeReporter,
+        reportWarning: () => ({})
+      },
+      compName
+    )(effectOptions, { type: ["object"] }, propertyName);
+    if (!isEffectOptionsTypeValid()) {
+      return false;
+    }
+    const invalidEffectOptionsReporter = createWrongOptionsWarningReporter({
+      effectName,
+      propertyName,
+      compName
+    });
+    const isEffectOptionsValid = () => createSchemaValidator(
+      {
+        reportError: invalidEffectOptionsReporter,
+        reportWarning: () => ({})
+      },
+      compName
+    )(effectOptions, effectsValidationSchema[effectName], propertyName);
+    if (!isEffectOptionsValid()) {
+      return false;
+    }
+    return true;
+  };
+};
+const isEmpty = (value) => {
+  return Object.keys(value).length === 0;
+};
+const createEffectValidation = ({ compName }) => {
+  return ({
+    effectName,
+    effectOptions,
+    propertyName
+  }) => {
+    var _a;
+    const validateEffectOption = createEffectOptionsValidation({
+      propertyName,
+      compName
+    });
+    if (!effectName && !effectOptions) {
+      return false;
+    }
+    if (!effectName && effectOptions && !isEmpty(effectOptions)) {
+      reportWarning(
+        templates.warning_effect_options_not_set({
+          propertyName,
+          compName,
+          infoLink: effectInfoLink(propertyName)
+        })
+      );
+      return false;
+    }
+    const PROPERTY = propertyName === "hide" ? "HIDE" : "SHOW";
+    const deprecatedValues = (_a = EFFECTS[PROPERTY]) == null ? void 0 : _a.deprecatedValues;
+    if (effectName && effectOptions && deprecatedValues && deprecatedValues.find((effect) => effect === effectName) && !isEmpty(effectOptions)) {
+      reportWarning(
+        templates.warning_deprecated_effect_with_options({
+          compName,
+          effectName,
+          propertyName,
+          infoLink: effectInfoLink(propertyName)
+        })
+      );
+      return false;
+    }
+    if (deprecatedValues.find((effect) => effect === effectName)) {
+      return true;
+    }
+    if (effectName && !(effectName in effectsValidationSchema)) {
+      reportWarning(
+        templates.warning_invalid_effect_name({
+          propertyName,
+          compName,
+          effectName,
+          infoLink: effectInfoLink(propertyName)
+        })
+      );
+      return false;
+    }
+    if (!validateEffectOption(effectName, effectOptions)) {
+      return false;
+    }
+    return true;
+  };
+};
+const isValidClassName = (className, functionName) => {
+  const classNameRegex = /^[a-zA-Z_-][a-zA-Z0-9_-]*$/;
+  if (typeof className !== "string") {
+    handleTypeError(className, functionName, "className", "string");
+    return false;
+  } else if (!classNameRegex.test(className)) {
+    handleUnsupportedChars(className, functionName);
+    return false;
+  }
+  return true;
+};
+const handleTypeError = (propertyName, functionName, value, expectedType) => {
+  reportError(
+    templates.error_type({
+      propertyName,
+      functionName,
+      value,
+      expectedType
+    })
+  );
+};
+const handleMandatoryVals = (propertyNames, functionName) => {
+  reportError(
+    templates.error_mandatory_multiple_vals({
+      propertyNames,
+      functionName
+    })
+  );
+};
+const handleMandatorySingleVal = (propertyName, functionName) => {
+  reportError(
+    templates.error_mandatory_val({
+      propertyName,
+      functionName
+    })
+  );
+};
+const handleUnsupportedChars = (propertyName, functionName) => {
+  reportError(
+    templates.error_unsupported_chars({
+      propertyName,
+      functionName
+    })
+  );
+};
+const createHiddenCollapsedSDKFactory = ({
+  viewportState,
+  hasPortal = false
+} = {}) => ({
+  setStyles,
+  portal,
+  metaData,
+  getSdkInstance,
+  runAnimation,
+  createSdkState,
+  styleUtils,
+  setProps
+}) => {
+  const validateEffect = createEffectValidation({
+    compName: metaData.role
+  });
+  const [state, setState] = createSdkState(
+    {
+      hidden: metaData.hiddenOnLoad,
+      collapsed: metaData.collapsedOnLoad
+    },
+    "hidden-collapsed"
+  );
+  return {
+    hide: async (effectName, effectOptions) => {
+      var _a;
+      setProps({ hidden: true });
+      if (state.collapsed || state.hidden) {
+        setState({ hidden: true });
+        return;
+      }
+      if (validateEffect({
+        effectName,
+        effectOptions,
+        propertyName: "hide"
+      })) {
+        const animationOptions = {
+          animationDirection: EFFECTS.HIDE.suffix,
+          effectName,
+          effectOptions: {
+            ...(effectDefaultOptions == null ? void 0 : effectDefaultOptions[effectName]) || sharedEffectDefaultOptions,
+            ...effectOptions
+          }
+        };
+        await Promise.all([
+          runAnimation(animationOptions),
+          hasPortal ? portal.runAnimation(animationOptions) : void 0
+        ]);
+      } else {
+        setStyles(styleUtils.getHiddenStyles());
+        if (hasPortal) {
+          portal.setStyles(styleUtils.getHiddenStyles());
+        }
+      }
+      setState({ hidden: true });
+      (_a = viewportState == null ? void 0 : viewportState.onViewportLeave) == null ? void 0 : _a.forEach((cb) => cb());
+    },
+    show: async (effectName, effectOptions) => {
+      var _a;
+      setProps({ hidden: false });
+      if (state.collapsed || !state.hidden) {
+        setState({ hidden: false });
+        return;
+      }
+      if (validateEffect({
+        effectName,
+        effectOptions,
+        propertyName: "show"
+      })) {
+        const runAnimationOptions = {
+          animationDirection: EFFECTS.SHOW.suffix,
+          effectName,
+          effectOptions: {
+            ...(effectDefaultOptions == null ? void 0 : effectDefaultOptions[effectName]) || sharedEffectDefaultOptions,
+            ...effectOptions
+          }
+        };
+        await Promise.all([
+          runAnimation(runAnimationOptions),
+          hasPortal ? portal.runAnimation(runAnimationOptions) : void 0
+        ]);
+      } else {
+        setStyles(styleUtils.getShownStyles());
+        if (hasPortal) {
+          portal.setStyles(styleUtils.getShownStyles());
+        }
+      }
+      setState({ hidden: false });
+      (_a = viewportState == null ? void 0 : viewportState.onViewportEnter) == null ? void 0 : _a.forEach((cb) => cb());
+    },
+    collapse: async () => {
+      var _a;
+      setProps({ collapsed: true });
+      if (!state.collapsed) {
+        setStyles(styleUtils.getCollapsedStyles());
+        if (hasPortal) {
+          portal.setStyles(styleUtils.getCollapsedStyles());
+        }
+        setState({ collapsed: true });
+        if (!state.hidden) {
+          (_a = viewportState == null ? void 0 : viewportState.onViewportLeave) == null ? void 0 : _a.forEach((cb) => cb());
+        }
+      }
+      return;
+    },
+    expand: async () => {
+      var _a;
+      setProps({ collapsed: false });
+      if (state.collapsed) {
+        const style = {
+          ...styleUtils.getExpandedStyles(),
+          visibility: state.hidden ? "hidden" : null
+        };
+        setStyles(style);
+        if (hasPortal) {
+          portal.setStyles(style);
+        }
+        setState({ collapsed: false });
+        if (!state.hidden) {
+          (_a = viewportState == null ? void 0 : viewportState.onViewportEnter) == null ? void 0 : _a.forEach((cb) => cb());
+        }
+      }
+      return;
+    },
+    get collapsed() {
+      return state.collapsed;
+    },
+    get hidden() {
+      return Boolean(state.hidden);
+    },
+    get isVisible() {
+      if (!metaData.isRendered()) {
+        return false;
+      }
+      let parentSdk = getSdkInstance();
+      while (parentSdk) {
+        if (parentSdk.hidden || parentSdk.collapsed) {
+          return false;
+        }
+        parentSdk = parentSdk.parent;
+      }
+      return true;
+    },
+    get isAnimatable() {
+      return true;
+    }
+  };
+};
+const visibilityPropsSDKFactory = (api, hasPortal = false) => {
+  const [state, setState] = api.createSdkState(
+    {
+      onViewportEnter: [],
+      onViewportLeave: []
+    },
+    "viewport"
+  );
+  const registerCallback = (type, callback) => {
+    setState({ [type]: [...state[type], callback] });
+  };
+  const hiddenCollapsedSDKFactory = createHiddenCollapsedSDKFactory({
+    viewportState: state,
+    hasPortal
+  });
+  const viewportPropsSDKFactory2 = createViewportPropsSDKFactory(registerCallback);
+  return composeSDKFactories([
+    hiddenCollapsedSDKFactory,
+    viewportPropsSDKFactory2
+  ])(api);
+};
+const createVisibilityPropsSDKFactory = (hasPortal) => {
+  return (api) => visibilityPropsSDKFactory(api, hasPortal);
+};
+const validateEffects = (possibleEffects, effects, functionName) => {
+  const invalidEffects = effects.filter(
+    (name) => !possibleEffects.includes(name)
+  );
+  if (invalidEffects.length) {
+    reportError(
+      templates.error_effects_input({
+        functionName,
+        wrongEffects: invalidEffects,
+        allowedEffects: possibleEffects
+      })
+    );
+  }
+};
+const effectsTriggersSDKFactory = (api) => {
+  const getEffects = () => {
+    var _a;
+    return ((_a = api.effectsTriggersApi) == null ? void 0 : _a.getEffects()) || [];
+  };
+  return {
+    effects: {
+      get effects() {
+        return getEffects();
+      },
+      get activeEffects() {
+        var _a;
+        return ((_a = api.effectsTriggersApi) == null ? void 0 : _a.getActiveEffects()) || [];
+      },
+      applyEffects: (effects) => {
+        var _a;
+        validateEffects(getEffects(), effects, "applyEffects");
+        (_a = api.effectsTriggersApi) == null ? void 0 : _a.applyEffects(...effects);
+      },
+      removeEffects: (effects) => {
+        var _a;
+        validateEffects(getEffects(), effects, "removeEffects");
+        (_a = api.effectsTriggersApi) == null ? void 0 : _a.removeEffects(...effects);
+      },
+      toggleEffects: (effects) => {
+        var _a;
+        validateEffects(getEffects(), effects, "toggleEffects");
+        (_a = api.effectsTriggersApi) == null ? void 0 : _a.toggleEffects(...effects);
+      },
+      removeAllEffects: () => {
+        var _a;
+        return (_a = api.effectsTriggersApi) == null ? void 0 : _a.removeAllEffects();
+      }
+    }
+  };
+};
+const deletePropsSDKFactory = (api) => ({
+  delete: () => {
+    api.setProps({ deleted: true });
+    api.remove();
+  },
+  restore: () => {
+    api.setProps({ deleted: false });
+    api.restore();
+  },
+  get deleted() {
+    return !!api.props.deleted;
+  }
+});
+const customClassListPropsSDKFactory = (api) => {
+  const { setProps, props } = api;
+  return {
+    customClassList: {
+      get value() {
+        var _a;
+        return props.customClassNames ? (_a = props.customClassNames) == null ? void 0 : _a.join(" ") : "";
+      },
+      values() {
+        return props.customClassNames ? props.customClassNames : [];
+      },
+      add(...classNames) {
+        const customClassListSet = props.customClassNames ? new Set(props.customClassNames) : /* @__PURE__ */ new Set([]);
+        if (!classNames.length) {
+          handleMandatorySingleVal("className", "customClassList.add");
+          return;
+        }
+        for (const className of classNames) {
+          if (isValidClassName(className, "customClassList.add")) {
+            customClassListSet.add(className);
+          } else {
+            return;
+          }
+        }
+        setProps({ customClassNames: Array.from(customClassListSet) });
+      },
+      remove(...classNames) {
+        if (!classNames.length) {
+          handleMandatorySingleVal("className", "customClassList.remove");
+          return;
+        }
+        const customClassListSet = new Set(props.customClassNames);
+        for (const className of classNames) {
+          if (isValidClassName(className, "customClassList.remove")) {
+            customClassListSet.delete(className);
+          } else {
+            return;
+          }
+        }
+        setProps({ customClassNames: Array.from(customClassListSet) });
+      },
+      contains(className) {
+        if (!className) {
+          handleMandatorySingleVal("className", "customClassList.contains");
+          return;
+        }
+        if (isValidClassName(className, "customClassList.contains")) {
+          return props.customClassNames ? props.customClassNames.includes(className) : false;
+        } else {
+          return;
+        }
+      },
+      replace(currentClassName, newClassName) {
+        if (!currentClassName || !newClassName) {
+          handleMandatoryVals(
+            ["currentClassName, newClassName"],
+            "customClassList.replace"
+          );
+          return false;
+        }
+        if (isValidClassName(newClassName, "customClassList.replace") && isValidClassName(currentClassName, "customClassList.replace")) {
+          if (this.contains(currentClassName)) {
+            this.remove(currentClassName);
+            this.add(newClassName);
+            return true;
+          }
+          return false;
+        }
+        return false;
+      },
+      toggle(className) {
+        if (!className) {
+          handleMandatorySingleVal("className", "customClassList.toggle");
+          return false;
+        }
+        if (isValidClassName(className, "customClassList.toggle")) {
+          if (this.contains(className)) {
+            this.remove(className);
+            return false;
+          } else {
+            this.add(className);
+            return true;
+          }
+        }
+        return false;
+      }
+    }
+  };
+};
+const toJSONBase = ({
+  role,
+  compType,
+  isGlobal,
+  isRendered
+}) => ({
+  id: role,
+  type: `$w.${compType}`,
+  global: isGlobal(),
+  rendered: isRendered()
+});
+const baseElementPropsSDKFactory = (api) => ({
+  onMouseIn: (handler) => registerCorvidMouseEvent("onMouseEnter", api, handler),
+  onMouseOut: (handler) => registerCorvidMouseEvent("onMouseLeave", api, handler),
+  removeEventHandler: (type, handler) => {
+    const { getSdkInstance } = api;
+    if (typeof type !== "string") {
+      reportError(
+        templates.error_type({
+          propertyName: "type",
+          functionName: "removeEventHandler",
+          value: type,
+          expectedType: "string"
+        })
+      );
+      return getSdkInstance();
+    }
+    if (typeof handler !== "function") {
+      reportError(
+        templates.error_type({
+          propertyName: "handler",
+          functionName: "removeEventHandler",
+          value: handler,
+          expectedType: "function"
+        })
+      );
+      return getSdkInstance();
+    }
+    return unregisterCorvidEvent(type, api, handler);
+  },
+  get rendered() {
+    return api.metaData.isRendered();
+  },
+  toJSON() {
+    return toJSONBase(api.metaData);
+  }
+});
+const viewportPropsSDKFactory = createViewportPropsSDKFactory();
+composeSDKFactories([
+  basePropsSDKFactory,
+  viewportPropsSDKFactory,
+  baseElementPropsSDKFactory,
+  effectsTriggersSDKFactory,
+  customClassListPropsSDKFactory
+]);
+const createElementPropsSDKFactory = ({
+  useHiddenCollapsed = true,
+  hasPortal = false
+} = {}) => {
+  return composeSDKFactories([
+    basePropsSDKFactory,
+    baseElementPropsSDKFactory,
+    effectsTriggersSDKFactory,
+    deletePropsSDKFactory,
+    useHiddenCollapsed ? createVisibilityPropsSDKFactory(hasPortal) : viewportPropsSDKFactory,
+    customClassListPropsSDKFactory
+  ]);
+};
+export {
+  createElementPropsSDKFactory as c,
+  toJSONBase as t
+};