@app-studio/web 0.8.54 → 0.8.56

package/dist/web.umd.development.js

@@ -134,7 +134,6 @@
     } : {};
     var fontSize = appStudio.Typography.fontSizes[size];
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-      role: "text",
       fontSize: fontSize,
       lineHeight: appStudio.Typography.lineHeights[size],
       fontStyle: isItalic ? 'italic' : 'normal',
@@ -2215,19 +2214,23 @@
     slow: 300
   };
 
-  var _excluded$8 = ["size", "speed", "color"],
-    _excluded2$1 = ["size", "speed", "color"],
-    _excluded3$1 = ["size", "speed", "color"],
+  var _excluded$8 = ["size", "speed", "color", "themeMode"],
+    _excluded2$1 = ["size", "speed", "color", "themeMode"],
+    _excluded3$1 = ["size", "speed", "color", "themeMode"],
     _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
   var DefaultSpinner = _ref => {
     var {
         size = 'md',
         speed = 'normal',
-        color = 'theme.loading'
+        color = 'theme.loading',
+        themeMode: elementMode
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-    var theme = appStudio.useTheme();
-    var colorStyle = theme.getColor(color);
+    var {
+      getColor,
+      themeMode
+    } = appStudio.useTheme();
+    var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
     var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
     var [angle, setAngle] = React.useState(0);
     React.useEffect(() => {
@@ -2266,11 +2269,15 @@
     var {
         size = 'md',
         speed = 'normal',
-        color = 'theme.loading'
+        color = 'theme.loading',
+        themeMode: elementMode
       } = _ref2,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
-    var theme = appStudio.useTheme();
-    var colorStyle = theme.getColor(color);
+    var {
+      getColor,
+      themeMode
+    } = appStudio.useTheme();
+    var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
     var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
     var [angle, setAngle] = React.useState(0);
     React.useEffect(() => {
@@ -2308,11 +2315,15 @@
     var {
         size = 'md',
         speed = 'normal',
-        color = 'theme.loading'
+        color = 'theme.loading',
+        themeMode: elementMode
       } = _ref3,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
-    var theme = appStudio.useTheme();
-    var colorStyle = theme.getColor(color);
+    var {
+      getColor,
+      themeMode
+    } = appStudio.useTheme();
+    var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
     var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
     var [angle, setAngle] = React.useState(0);
     React.useEffect(() => {
@@ -2378,7 +2389,7 @@
   // Exports the LoaderComponent as Loader, making it available for use in other parts of the application.
   var Loader = LoaderComponent;
 
-  var _excluded$9 = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal"];
+  var _excluded$9 = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "themeMode"];
   var contrast = /*#__PURE__*/require('contrast');
   var ButtonView = _ref => {
     var _props$onClick;
@@ -2412,14 +2423,16 @@
         effect = 'default',
         isHovered,
         setIsHovered = () => {},
-        isExternal = false
+        isExternal = false,
+        themeMode: elementMode
         // Defines CSS properties for 'outline' variant of the button with conditional styles based on reverse state.
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
     var {
-      getColor
+      getColor,
+      themeMode
     } = appStudio.useTheme();
-    var handleHover = () => setIsHovered(!isHovered);
+    var handleHover = over => setIsHovered(over);
     var isActive = !(isDisabled || isLoading);
     var defaultNativeProps = {
       disabled: !isActive
@@ -2427,7 +2440,7 @@
     var buttonColor = isActive ? colorScheme : 'theme.disabled';
     var hovering = isHovered && effect === 'hover';
     var reverse = isHovered && effect === 'reverse';
-    var isLight = contrast(getColor(buttonColor)) == 'light';
+    var isLight = contrast(getColor(buttonColor, elementMode ? elementMode : themeMode)) == 'light';
     var ButtonVariants = {
       filled: {
         // Defines CSS properties for 'link' variant of the button with conditional styles based on reverse state, includes text decoration.
@@ -2478,7 +2491,6 @@
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       gap: 8,
       as: "button",
-      role: "button",
       border: "none",
       color: "color.white",
       display: "flex",
@@ -2488,8 +2500,8 @@
       backgroundColor: buttonColor,
       borderRadius: ButtonShapes[shape],
       onClick: (_props$onClick = props.onClick) != null ? _props$onClick : onClick,
-      onMouseEnter: handleHover,
-      onMouseLeave: handleHover,
+      onMouseEnter: () => handleHover(true),
+      onMouseLeave: () => handleHover(false),
       cursor: isActive ? 'pointer' : 'default',
       filter: hovering ? 'brightness(0.85)' : 'brightness(1)'
     }, hovering && !props.isDisabled ? {
@@ -2530,20 +2542,22 @@
   };
   var Button = ButtonComponent;
 
-  var _excluded$a = ["src", "color"],
+  var _excluded$a = ["src", "color", "themeMode"],
     _excluded2$2 = ["path"];
   var FileSVG = _ref => {
     var {
         src,
-        color
+        color,
+        themeMode: elementMode
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
     var {
-      getColor
+      getColor,
+      themeMode
     } = appStudio.useTheme();
     var Colorprops = color ? {
-      fill: getColor(color),
-      stroke: getColor(color)
+      fill: getColor(color, elementMode ? elementMode : themeMode),
+      stroke: getColor(color, elementMode ? elementMode : themeMode)
     } : {};
     return /*#__PURE__*/React__default.createElement(Center, Object.assign({}, props), /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({}, Colorprops, {
       content: 'url("' + src + '")',
@@ -3647,7 +3661,7 @@
     };
   };
 
-  var _excluded$l = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur"];
+  var _excluded$l = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur", "themeMode"];
   var TextFieldInput = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
     type: "text"
   }, props));
@@ -3688,13 +3702,15 @@
         setValue = () => {},
         onClick = () => {},
         onFocus,
-        onBlur = () => {}
+        onBlur = () => {},
+        themeMode: elementMode
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
     var {
-      getColor
+      getColor,
+      themeMode
     } = appStudio.useTheme();
-    var IconColor = getColor('color.blueGray.700');
+    var IconColor = getColor('color.blueGray.700', elementMode ? elementMode : themeMode);
     var isWithLabel = !!(isFocused && label);
     var fieldStyles = Object.assign({
       margin: 0,
@@ -5465,7 +5481,7 @@
 
   var _excluded$n = ["size"],
     _excluded2$4 = ["size"],
-    _excluded3$3 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "styles"];
+    _excluded3$3 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "styles", "themeMode"];
   var CountryList = _ref => {
     var props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
@@ -5577,13 +5593,15 @@
           dropDown: {},
           helperText: {},
           box: {}
-        }
+        },
+        themeMode: elementMode
       } = _ref5,
       props = _objectWithoutPropertiesLoose(_ref5, _excluded3$3);
     var {
-      getColor
+      getColor,
+      themeMode
     } = appStudio.useTheme();
-    var IconColor = getColor('color.blueGray.700');
+    var IconColor = getColor('color.blueGray.700', elementMode ? elementMode : themeMode);
     var handleHover = () => setIsHovered(!isHovered);
     var handleFocus = () => setIsFocused(true);
     var handleCallback = option => {
@@ -6619,6 +6637,11 @@
 
   var useModalStore = /*#__PURE__*/zustand.create(set => ({
     modals: [],
+    onHide: name => name,
+    onShow: (name, props) => ({
+      name,
+      props
+    }),
     show: function show(name, modalProps, overlayProps) {
       if (modalProps === void 0) {
         modalProps = {};
@@ -6626,7 +6649,7 @@
       if (overlayProps === void 0) {
         overlayProps = {};
       }
-      set(state => ({
+      set(state => Object.assign({}, state, {
         modals: [...state.modals, {
           name,
           props: Object.assign({}, modalProps, {
@@ -6645,10 +6668,20 @@
           };
         }
         // Hide specific modal by name
-        return {
+        return Object.assign({}, state, {
           modals: state.modals.filter(modal => modal.name !== name)
-        };
+        });
       });
+    },
+    setOnHide: onHide => {
+      set(state => Object.assign({}, state, {
+        onHide
+      }));
+    },
+    setOnShow: onShow => {
+      set(state => Object.assign({}, state, {
+        onShow
+      }));
     }
   }));
   var showModal = function showModal(name, modalProps, overlayProps) {
@@ -6659,9 +6692,11 @@
       overlayProps = {};
     }
     useModalStore.getState().show(name, modalProps, overlayProps);
+    useModalStore.getState().onShow(name, modalProps);
   };
   var hideModal = name => {
     console.log('hideModal', name);
+    useModalStore.getState().onHide(name);
     useModalStore.getState().hide(typeof name === 'string' ? name : undefined);
   };
 
@@ -6832,9 +6867,17 @@
 
   var ModalLayout = _ref => {
     var {
-      modals: availableModals
+      modals: availableModals,
+      onShow,
+      onHide
     } = _ref;
     var activeModals = useModalStore(state => state.modals);
+    if (onShow) {
+      useModalStore.getState().setOnShow(onShow);
+    }
+    if (onHide) {
+      useModalStore.getState().setOnHide(onHide);
+    }
     if (activeModals.length === 0) {
       return null;
     }