@app-studio/web 0.3.34 → 0.3.36

package/dist/components/Form/Password/Password/Password.props.d.ts

@@ -22,3 +22,13 @@ export interface PasswordProps extends TextFieldProps {
      */
     [x: string]: any;
 }
+export interface PasswordViewProps extends PasswordProps {
+    /**
+     * Optional prop to determine if the password is visible
+     */
+    isVisible?: boolean;
+    /**
+     * Optional callback prop to update the visibility state
+     */
+    setIsVisible?: Function;
+}

package/dist/components/Form/Password/Password/Password.state.d.ts

@@ -1,5 +1,14 @@
 /// <reference types="react" />
-export declare const usePasswordState: () => {
+import { PasswordProps } from './Password.props';
+export declare const usePasswordState: (props: PasswordProps) => {
+    hint: string | undefined;
+    setHint: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    isFocused: boolean;
+    setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    isHovered: boolean;
+    setIsHovered: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    inputValue: string;
+    setInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
     isVisible: boolean;
     setIsVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };

package/dist/web.cjs.development.js

@@ -3135,16 +3135,6 @@ var DatePickerComponent = function DatePickerComponent(props) {
  */
 var DatePicker = DatePickerComponent;
 
-var usePasswordState = function usePasswordState() {
-  var _useState = React.useState(false),
-    isVisible = _useState[0],
-    setIsVisible = _useState[1];
-  return {
-    isVisible: isVisible,
-    setIsVisible: setIsVisible
-  };
-};
-
 var useTextFieldState = function useTextFieldState(_ref) {
   var label = _ref.label,
     placeholder = _ref.placeholder,
@@ -3173,6 +3163,17 @@ var useTextFieldState = function useTextFieldState(_ref) {
   };
 };
 
+var usePasswordState = function usePasswordState(props) {
+  var textFieldStates = useTextFieldState(props);
+  var _useState = React.useState(false),
+    isVisible = _useState[0],
+    setIsVisible = _useState[1];
+  return _extends({
+    isVisible: isVisible,
+    setIsVisible: setIsVisible
+  }, textFieldStates);
+};
+
 var _excluded$o = ["id", "name", "label", "value", "hint", "inputValue", "onChange", "leftChild", "rightChild", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setInputValue", "onClick", "onFocus", "onBlur"];
 var TextFieldInput = function TextFieldInput(props) {
   return React__default.createElement(appStudio.Input, Object.assign({
@@ -3349,19 +3350,10 @@ var TextFieldView = function TextFieldView(_ref) {
   }))));
 };
 
-var TextFieldComponent = function TextFieldComponent(props) {
-  var textFieldStates = useTextFieldState(props);
-  return React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, props));
-};
-/**
- * TextField is used to capture text data from users.
- */
-var TextField = TextFieldComponent;
-
-var _excluded$p = ["name", "visibleIcon", "hiddenIcon", "isDisabled"];
-var PasswordView = function PasswordView(_ref) {
-  var name = _ref.name,
-    _ref$visibleIcon = _ref.visibleIcon,
+var _excluded$p = ["visibleIcon", "hiddenIcon"],
+  _excluded2 = ["isVisible", "setIsVisible"];
+var PasswordComponent = function PasswordComponent(_ref) {
+  var _ref$visibleIcon = _ref.visibleIcon,
     visibleIcon = _ref$visibleIcon === void 0 ? React__default.createElement(OpenEyeSvg, {
       size: 14
     }) : _ref$visibleIcon,
@@ -3369,29 +3361,22 @@ var PasswordView = function PasswordView(_ref) {
     hiddenIcon = _ref$hiddenIcon === void 0 ? React__default.createElement(CloseEyeSvg, {
       size: 14
     }) : _ref$hiddenIcon,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
-  var _useState = React.useState(false),
-    visible = _useState[0],
-    setVisible = _useState[1];
-  return React__default.createElement(TextField, Object.assign({
-    name: name,
-    type: visible ? 'text' : 'password',
-    rightChild: React__default.createElement(View, {
+  var _usePasswordState = usePasswordState(props),
+    isVisible = _usePasswordState.isVisible,
+    setIsVisible = _usePasswordState.setIsVisible,
+    passwordState = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2);
+  return React__default.createElement(TextFieldView, Object.assign({
+    type: isVisible ? 'text' : 'password',
+    isClearable: false,
+    rightChild: React__default.createElement(appStudio.View, {
       onClick: function onClick() {
-        if (!isDisabled) {
-          setVisible(!visible);
+        if (!props.isDisabled) {
+          setIsVisible(!isVisible);
         }
       }
-    }, visible ? visibleIcon : hiddenIcon),
-    isClearable: false
-  }, props));
-};
-
-var PasswordComponent = function PasswordComponent(props) {
-  var passwordState = usePasswordState();
-  return React__default.createElement(PasswordView, Object.assign({}, passwordState, props));
+    }, isVisible ? visibleIcon : hiddenIcon)
+  }, passwordState, props));
 };
 /**
  * To allow users to securely enter sensitive information
@@ -3445,7 +3430,7 @@ var IconSizes$4 = {
 };
 
 var _excluded$q = ["isHovered", "setIsHovered", "option", "size", "callback"],
-  _excluded2 = ["id", "name", "selected", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
+  _excluded2$1 = ["id", "name", "selected", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
   _excluded3 = ["option", "size", "removeOption"],
   _excluded4 = ["id", "name", "label", "selected", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setSelected", "setIsHovered", "setIsFocused"];
 var Item = function Item(_ref) {
@@ -3526,7 +3511,7 @@ var HiddenSelect = function HiddenSelect(_ref3) {
     isReadOnly = _ref3$isReadOnly === void 0 ? false : _ref3$isReadOnly,
     _ref3$options = _ref3.options,
     options = _ref3$options === void 0 ? [] : _ref3$options,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
   var handleChange = function handleChange(event) {
     if (onChange) onChange(event);
   };
@@ -4195,6 +4180,15 @@ var TextAreaComponent = function TextAreaComponent(props) {
  */
 var TextArea = TextAreaComponent;
 
+var TextFieldComponent = function TextFieldComponent(props) {
+  var textFieldStates = useTextFieldState(props);
+  return React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, props));
+};
+/**
+ * TextField is used to capture text data from users.
+ */
+var TextField = TextFieldComponent;
+
 var DefaultSizes = {
   xs: 14,
   sm: 18,
@@ -4214,7 +4208,7 @@ var DefaultSpeeds = {
 };
 
 var _excluded$t = ["size", "speed", "color"],
-  _excluded2$1 = ["size", "speed", "color"],
+  _excluded2$2 = ["size", "speed", "color"],
   _excluded3$1 = ["size", "speed", "color"],
   _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
 var DefaultSpinner = function DefaultSpinner(_ref) {
@@ -4274,7 +4268,7 @@ var Dotted = function Dotted(_ref2) {
     speed = _ref2$speed === void 0 ? 'normal' : _ref2$speed,
     _ref2$color = _ref2.color,
     color = _ref2$color === void 0 ? 'theme.loading' : _ref2$color,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
   var theme = appStudio.useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -4475,7 +4469,7 @@ var HeaderIconSizes = {
 };
 
 var _excluded$u = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
-  _excluded2$2 = ["children", "shadow", "isFullScreen", "shape"],
+  _excluded2$3 = ["children", "shadow", "isFullScreen", "shape"],
   _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$2 = ["children"],
   _excluded5 = ["children"];
@@ -4524,7 +4518,7 @@ var ModalContainer = function ModalContainer(_ref2) {
     isFullScreen = _ref2$isFullScreen === void 0 ? false : _ref2$isFullScreen,
     _ref2$shape = _ref2.shape,
     shape = _ref2$shape === void 0 ? 'rounded' : _ref2$shape,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
   var defaultShadow = typeof document !== undefined ? {
     boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.3)'
   } : {
@@ -4648,7 +4642,7 @@ Modal.Footer = ModalFooter;
 Modal.Layout = ModalLayout;
 
 var _excluded$v = ["src", "color"],
-  _excluded2$3 = ["path"];
+  _excluded2$4 = ["path"];
 var FileSVG = function FileSVG(_ref) {
   var src = _ref.src,
     color = _ref.color,
@@ -4667,7 +4661,7 @@ var FileSVG = function FileSVG(_ref) {
 };
 var FileImage = function FileImage(_ref2) {
   var path = _ref2.path,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
   return React__default.createElement(appStudio.Image, Object.assign({
     src: path
   }, props));