@app-studio/web 0.8.54 → 0.8.56

package/dist/web.esm.js

@@ -140,7 +140,6 @@ var TextView = _ref3 => {
   } : {};
   var fontSize = Typography.fontSizes[size];
   return /*#__PURE__*/React.createElement(Element, Object.assign({
-    role: "text",
     fontSize: fontSize,
     lineHeight: Typography.lineHeights[size],
     fontStyle: isItalic ? 'italic' : 'normal',
@@ -2221,19 +2220,23 @@ var DefaultSpeeds = {
   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 = useTheme();
-  var colorStyle = theme.getColor(color);
+  var {
+    getColor,
+    themeMode
+  } = useTheme();
+  var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
   var [angle, setAngle] = useState(0);
   useEffect(() => {
@@ -2272,11 +2275,15 @@ var Dotted = _ref2 => {
   var {
       size = 'md',
       speed = 'normal',
-      color = 'theme.loading'
+      color = 'theme.loading',
+      themeMode: elementMode
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
-  var theme = useTheme();
-  var colorStyle = theme.getColor(color);
+  var {
+    getColor,
+    themeMode
+  } = useTheme();
+  var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
   var [angle, setAngle] = useState(0);
   useEffect(() => {
@@ -2314,11 +2321,15 @@ var Quarter = _ref3 => {
   var {
       size = 'md',
       speed = 'normal',
-      color = 'theme.loading'
+      color = 'theme.loading',
+      themeMode: elementMode
     } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
-  var theme = useTheme();
-  var colorStyle = theme.getColor(color);
+  var {
+    getColor,
+    themeMode
+  } = useTheme();
+  var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
   var [angle, setAngle] = useState(0);
   useEffect(() => {
@@ -2384,7 +2395,7 @@ React.createElement(LoaderView, Object.assign({}, props)));
 // 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;
@@ -2418,14 +2429,16 @@ var ButtonView = _ref => {
       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
   } = useTheme();
-  var handleHover = () => setIsHovered(!isHovered);
+  var handleHover = over => setIsHovered(over);
   var isActive = !(isDisabled || isLoading);
   var defaultNativeProps = {
     disabled: !isActive
@@ -2433,7 +2446,7 @@ var ButtonView = _ref => {
   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.
@@ -2484,7 +2497,6 @@ var ButtonView = _ref => {
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     gap: 8,
     as: "button",
-    role: "button",
     border: "none",
     color: "color.white",
     display: "flex",
@@ -2494,8 +2506,8 @@ var ButtonView = _ref => {
     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 ? {
@@ -2536,20 +2548,22 @@ var ButtonComponent = props => {
 };
 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
   } = 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.createElement(Center, Object.assign({}, props), /*#__PURE__*/React.createElement(Image, Object.assign({}, Colorprops, {
     content: 'url("' + src + '")',
@@ -3653,7 +3667,7 @@ var useTextFieldState = _ref => {
   };
 };
 
-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.createElement(Input, Object.assign({
   type: "text"
 }, props));
@@ -3694,13 +3708,15 @@ var TextFieldView = _ref => {
       setValue = () => {},
       onClick = () => {},
       onFocus,
-      onBlur = () => {}
+      onBlur = () => {},
+      themeMode: elementMode
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   var {
-    getColor
+    getColor,
+    themeMode
   } = 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,
@@ -5471,7 +5487,7 @@ var IconSizes$4 = {
 
 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.createElement(Element, Object.assign({
@@ -5583,13 +5599,15 @@ var CountryPickerView = _ref5 => {
         dropDown: {},
         helperText: {},
         box: {}
-      }
+      },
+      themeMode: elementMode
     } = _ref5,
     props = _objectWithoutPropertiesLoose(_ref5, _excluded3$3);
   var {
-    getColor
+    getColor,
+    themeMode
   } = 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 => {
@@ -6625,6 +6643,11 @@ var MessageLayout = _ref => {
 
 var useModalStore = /*#__PURE__*/create(set => ({
   modals: [],
+  onHide: name => name,
+  onShow: (name, props) => ({
+    name,
+    props
+  }),
   show: function show(name, modalProps, overlayProps) {
     if (modalProps === void 0) {
       modalProps = {};
@@ -6632,7 +6655,7 @@ var useModalStore = /*#__PURE__*/create(set => ({
     if (overlayProps === void 0) {
       overlayProps = {};
     }
-    set(state => ({
+    set(state => Object.assign({}, state, {
       modals: [...state.modals, {
         name,
         props: Object.assign({}, modalProps, {
@@ -6651,10 +6674,20 @@ var useModalStore = /*#__PURE__*/create(set => ({
         };
       }
       // 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) {
@@ -6665,9 +6698,11 @@ var showModal = function showModal(name, modalProps, overlayProps) {
     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);
 };
 
@@ -6838,9 +6873,17 @@ var ModalFooter = _ref5 => {
 
 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;
   }