@app-studio/web 0.8.10 → 0.8.11

package/dist/web.umd.development.js

@@ -190,6 +190,7 @@
   var Text = TextComponent;
 
   var _excluded$1 = ["justifyContent", "isReversed"];
+  // Defines the functional component VerticalView with props specified by VerticalProps
   var VerticalView = function VerticalView(_ref) {
     var _ref$justifyContent = _ref.justifyContent,
       justifyContent = _ref$justifyContent === void 0 ? 'flex-start' : _ref$justifyContent,
@@ -203,39 +204,46 @@
     }, props));
   };
 
-  /**
-   * Vertical layout aligns all the elements in a container on the vertical axis.
-   */
+  // Defines the VerticalComponent as a functional component with VerticalProps as its props signature.
   var VerticalComponent = function VerticalComponent(props) {
-    return React__default.createElement(VerticalView, Object.assign({}, props));
+    return (
+      // Renders the VerticalView component, passing all of the received props through to it.
+      React__default.createElement(VerticalView, Object.assign({}, props))
+    );
   };
+  // Exports the VerticalComponent as Vertical for use in other parts of the application.
   var Vertical = VerticalComponent;
 
-  /**
-   * Horizontal layout aligns all the elements in a container on the horizontal axis.
-   */
+  // Defines a functional component 'HorizontalComponent' utilizing 'ViewProps'. It leverages flexbox to create a horizontal view, which can be reversed based on a prop.
   var HorizontalComponent = function HorizontalComponent(props) {
     return React__default.createElement(appStudio.View, Object.assign({
       display: "flex",
       flexDirection: props.isReversed ? 'row-reverse' : 'row'
     }, props));
   };
+  // Exports the HorizontalComponent as 'Horizontal', making it available for use in other parts of the application.
   var Horizontal = HorizontalComponent;
 
+  // Defines a React Functional Component named CenterView which centers its children both horizontally and vertically using flexbox.
   var CenterView = function CenterView(props) {
-    return React__default.createElement(appStudio.View, Object.assign({
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center"
-    }, props));
+    return (
+      // Renders a 'View' component with display flex and center alignment applied on both axes, passing all received props.
+      React__default.createElement(appStudio.View, Object.assign({
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      }, props))
+    );
   };
 
-  /**
-   * The Center component is a React functional component that provides a centered layout for its children using flexbox.
-   */
+  // Defines a functional component named CenterComponent utilizing React's functional component structure, which expects props of the CenterProps type.
   var CenterComponent = function CenterComponent(props) {
-    return React__default.createElement(CenterView, Object.assign({}, props));
+    return (
+      // Renders the CenterView component, passing down all the props received by the CenterComponent.
+      React__default.createElement(CenterView, Object.assign({}, props))
+    );
   };
+  // Exports CenterComponent as Center, making it available for use in other parts of the application.
   var Center = CenterComponent;
 
   var _excluded$2 = ["size", "color"];
@@ -1020,6 +1028,7 @@
   };
   // The hook returns an object containing 'isHovered' state and the 'setIsHovered' function to enable state management from the consumer component.
 
+  // This function initializes the Link component's state using the useState hook and exposes its state and setter function.
   var useLinkState = function useLinkState() {
     var _useState = React.useState(false),
       isHovered = _useState[0],
@@ -1030,6 +1039,7 @@
     };
   };
 
+  // Defines a mapping of various size names (from 'xs' to '6xl') to their respective numeric icon sizes, providing a scalable way to reference icon sizes throughout the component.
   var IconSizes = {
     xs: 12,
     sm: 14,
@@ -1044,6 +1054,7 @@
   };
 
   var _excluded$g = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
+  // Component definition for 'LinkView', a functional component with props defined by 'LinkViewProps'.
   var LinkView = function LinkView(_ref) {
     var children = _ref.children,
       _ref$href = _ref.href,
@@ -1064,6 +1075,7 @@
       _ref$setIsHovered = _ref.setIsHovered,
       setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    // Function to handle mouse enter/leave events to toggle hover state.
     var handleHover = function handleHover() {
       if (underline === 'hover') setIsHovered(true);
     };
@@ -1084,13 +1096,14 @@
     }))));
   };
 
+  // Defines the 'LinkComponent' as a functional component with props typed to 'LinkProps'
   var LinkComponent = function LinkComponent(props) {
+    // Gets stateful logic and data necessary for the link component via 'useLinkState' hook
     var linkStates = useLinkState();
+    // Renders 'LinkView' component passing down link state and props
     return React__default.createElement(LinkView, Object.assign({}, linkStates, props));
   };
-  /**
-   * Link allows users to navigate from page to page. It have a similar appearance as the hyperlink.
-   */
+  // Exports 'LinkComponent' as 'Link' for use in other parts of the application
   var Link = LinkComponent;
 
   var ButtonSizes = {
@@ -1198,6 +1211,8 @@
     }
   };
 
+  // Defines a mapping of spinning speed labels to their respective duration in seconds for the Loader component animations.
+  // Sets up a scale of sizes, mapping size labels to numerical values to be used for Loader component dimensions.
   var DefaultSizes = {
     xs: 14,
     sm: 18,
@@ -1210,6 +1225,7 @@
     '5xl': 70,
     '6xl': 80
   };
+  // Specifies a mapping of spinning speed labels to numerical millisecond values, determining the speed of the Loader component's animation cycles.
   var DefaultSpeeds = {
     fast: 50,
     normal: 100,
@@ -1393,12 +1409,14 @@
     }, children));
   };
 
+  // Defines a LoaderComponent as a functional component with props defined by LoaderProps and returns the LoaderView component, passing along any received props.
   var LoaderComponent = function LoaderComponent(props) {
-    return React__default.createElement(LoaderView, Object.assign({}, props));
+    return (
+      // Renders the LoaderView component by spreading the received props, which allows for a clean pass-through of properties.
+      React__default.createElement(LoaderView, Object.assign({}, props))
+    );
   };
-  /**
-   * It  gives the user an insight about an action being processed. It may have an undefined waiting time or display the process length.
-   */
+  // Exports the LoaderComponent as Loader, making it available for use in other parts of the application.
   var Loader = LoaderComponent;
 
   var _excluded$i = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered"];
@@ -1584,26 +1602,34 @@
     }, props));
   };
 
+  // Initializes the custom hook 'useSelectState' for managing the state of the Select component
   var useSelectState = function useSelectState(_ref) {
     var placeholder = _ref.placeholder,
       isMulti = _ref.isMulti,
       options = _ref.options;
+    // Determines the default value based on the 'placeholder' and 'isMulti' props, setting to an empty array for multi-select or an empty string/single default option
     var defaultValue = placeholder ? isMulti ? [] : '' : options[0].value;
+    // State hook for managing visibility of the Select dropdown, initially set to hidden
     var _React$useState = React__default.useState(true),
       hide = _React$useState[0],
       setHide = _React$useState[1];
+    // State hook for tracking mouse hover status over the Select component
     var _React$useState2 = React__default.useState(false),
       isHovered = _React$useState2[0],
       setIsHovered = _React$useState2[1];
+    // State hook for tracking focus status of the Select input field
     var _React$useState3 = React__default.useState(false),
       isFocused = _React$useState3[0],
       setIsFocused = _React$useState3[1];
+    // State hook for managing the value(s) selected by the user, initialized with the default value
     var _React$useState4 = React__default.useState(defaultValue),
       value = _React$useState4[0],
       setValue = _React$useState4[1];
+    // State hook for keeping track of the currently highlighted index in the options list
     var _React$useState5 = React__default.useState(0),
       highlightedIndex = _React$useState5[0],
       setHighlightedIndex = _React$useState5[1];
+    // Returns an object containing all stateful values and their associated setters to manage the Select component's state
     return {
       value: value,
       setValue: setValue,
@@ -1617,10 +1643,13 @@
       setHighlightedIndex: setHighlightedIndex
     };
   };
+  // Initializes another custom hook 'useItemState' for managing the hover state of each Select item
   var useItemState = function useItemState() {
+    // State hook for tracking mouse hover status over individual Select item options
     var _React$useState6 = React__default.useState(false),
       isHovered = _React$useState6[0],
       setIsHovered = _React$useState6[1];
+    // Returns an object with 'isHovered' state and its associated setter from the 'useItemState' hook, for controlling individual Select item hover state
     return {
       isHovered: isHovered,
       setIsHovered: setIsHovered
@@ -1894,6 +1923,8 @@
     }, props), children);
   };
 
+  // Defines a mapping of 'Size' types to their corresponding CSSProperties. This allows different size configurations to be provided for the Select component.
+  // Specifies the pixel sizes of icons associated with the Select component based on the predefined 'Size' types allowing for consistent icon scaling.
   var IconSizes$2 = {
     xs: 8,
     sm: 10,
@@ -1906,6 +1937,7 @@
     _excluded2$2 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
     _excluded3$1 = ["option", "size", "removeOption"],
     _excluded4$1 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
+  // Defines a component to render individual selection items within a list.
   var Item = function Item(_ref) {
     var isHovered = _ref.isHovered,
       setIsHovered = _ref.setIsHovered,
@@ -1916,9 +1948,11 @@
       callback = _ref$callback === void 0 ? function () {} : _ref$callback,
       style = _ref.style,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    // Handles the click event on an option by invoking the callback with the selected option's value.
     var handleOptionClick = function handleOptionClick(option) {
       return callback(option);
     };
+    // Toggles the hover state on the item.
     var handleHover = function handleHover() {
       return setIsHovered(!isHovered);
     };
@@ -2061,10 +2095,10 @@
       backgroundColor: "white",
       maxHeight: "200px",
       style: {
-        scrollbarWidth: 'none' /* For Firefox */,
-        msOverflowStyle: 'none' /* For Internet Explorer and Edge */,
+        scrollbarWidth: 'none',
+        msOverflowStyle: 'none',
         '&::-webkit-scrollbar': {
-          display: 'none' /* For Chrome, Safari, and Opera */
+          display: 'none'
         }
       }
     }, shadow, styles['dropDown']), options.map(function (option, index) {
@@ -2258,15 +2292,17 @@
     }));
   };
 
+  // Defines a functional component named 'SelectComponent', which is expected to receive 'SelectProps' as properties.
   var SelectComponent = function SelectComponent(props) {
+    // Invokes the 'useSelectState' hook with props to obtain stateful logic for the Select component.
     var selectStates = useSelectState(props);
+    // Renders the 'SelectView' component, passing along any states controlled by 'useSelectState' and all properties passed to 'SelectComponent'.
     return React__default.createElement(SelectView, Object.assign({}, selectStates, props));
   };
-  /**
-   * Select provides a dropdown list of options for the user to choose from.
-   */
+  // Exports 'SelectComponent' as 'Select', making it available for import in other parts of the application.
   var Select = SelectComponent;
 
+  // This file defines a custom hook for managing the state of a Switch component. It allows tracking whether the switch is hovered, and its on/off state based on 'isDisabled' and 'isChecked' properties.
   var useSwitchState = function useSwitchState(_ref) {
     var isDisabled = _ref.isDisabled,
       isChecked = _ref.isChecked;
@@ -2284,6 +2320,7 @@
     };
   };
 
+  // Defines a mapping of size types to their respective knob style properties, specifying the height and width for various predefined sizes.
   var KnobSizes = {
     xs: {
       height: 6,
@@ -2326,6 +2363,7 @@
       width: 33
     }
   };
+  // Specifies the dimensions of the switch's slider for each predefined size by mapping them to the height and width CSS properties.
   var SliderSizes = {
     xs: {
       height: 16,
@@ -2368,6 +2406,7 @@
       width: 100
     }
   };
+  // Associates each size type with corresponding padding values for vertical and horizontal spacing, used to adjust the position of the elements within the switch.
   var SliderPadding = {
     xs: {
       paddingVertical: 0,
@@ -2502,28 +2541,38 @@
     }, KnobSizes[size], styles['circle'])), inActiveChild && !value && React__default.createElement(View, null, inActiveChild)), labelPosition === 'right' && label && React__default.createElement(View, null, label));
   };
 
+  // Defines the SwitchComponent as a functional component that takes SwitchProps as props.
   var SwitchComponent = function SwitchComponent(props) {
+    // Invokes useSwitchState hook to obtain state for this component, passing props to it.
     var switchStates = useSwitchState(props);
+    // Renders the SwitchView component, spreading the switchStates and props to pass all necessary data.
     return React__default.createElement(SwitchView, Object.assign({}, switchStates, props));
   };
+  // Exports the SwitchComponent as 'Switch' for use in other parts of the application.
   var Switch = SwitchComponent;
 
+  // Declaration of the useTextAreaState custom hook for managing the text area component state.
   var useTextAreaState = function useTextAreaState(_ref) {
     var label = _ref.label,
       placeholder = _ref.placeholder,
       defaultValue = _ref.value;
+    // State hook for the 'hint' value, displaying either the label or placeholder as guidance within the text area.
     var _useState = React.useState(label != null ? label : placeholder),
       hint = _useState[0],
       setHint = _useState[1];
+    // State hook for tracking whether the text area is hovered over.
     var _useState2 = React.useState(false),
       isHovered = _useState2[0],
       setIsHovered = _useState2[1];
+    // State hook to manage the current value of the text area, initialized with the default value or an empty string.
     var _useState3 = React.useState(defaultValue || ''),
       value = _useState3[0],
       setValue = _useState3[1];
+    // State hook to determine if the text area is currently focused.
     var _useState4 = React.useState(false),
       isFocused = _useState4[0],
       setIsFocused = _useState4[1];
+    // Memoized callback that sets the hint based on focus state and value presence to ensure proper label or placeholder visibility.
     React.useMemo(function () {
       setHint(isFocused && !value ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
     }, [value, isFocused, label, placeholder]);
@@ -2537,6 +2586,7 @@
       isFocused: isFocused,
       setIsFocused: setIsFocused
     };
+    // Export of the useTextAreaState hook for external usage.
   };
 
   var _excluded$t = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "colorScheme", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setValue", "setIsFocused", "setIsHovered", "styles"];
@@ -2626,7 +2676,6 @@
     };
     var handleChange = function handleChange(event) {
       if (typeof event === 'string') {
-        //for ios and android
         setValue(event);
         if (onChangeText) onChangeText(event);
       } else {
@@ -2681,34 +2730,44 @@
     })))));
   };
 
+  // Defines the TextAreaComponent as a functional component that accepts TextAreaProps for type safety and structure.
   var TextAreaComponent = function TextAreaComponent(props) {
+    // Creates a state for the TextAreaComponent using custom hook useTextAreaState which initializes the state with props.
     var textAreaState = useTextAreaState(props);
+    // Renders the TextAreaView component, passing along the state and any received props.
     return React__default.createElement(TextAreaView, Object.assign({}, textAreaState, props));
   };
-  /**
-   * Text Area is an component used to create a multi-line input field.
-   */
+  // Exports the TextAreaComponent as TextArea for use in other parts of the application.
   var TextArea = TextAreaComponent;
 
+  // Define a custom hook `useTextFieldState` that creates and manages the state of a text field component based on its properties.
   var useTextFieldState = function useTextFieldState(_ref) {
     var label = _ref.label,
       placeholder = _ref.placeholder,
       defaultValue = _ref.value;
+    // Initialize `hint` state with either the label or placeholder text, using label as a priority if it exists.
     var _useState = React.useState(label != null ? label : placeholder),
       hint = _useState[0],
       setHint = _useState[1];
+    // Set up a boolean state `isFocused` to track if the text field is focused.
     var _useState2 = React.useState(false),
       isFocused = _useState2[0],
       setIsFocused = _useState2[1];
+    // Introduce a boolean state `isHovered` for tracking mouse hover status over the text field.
     var _useState3 = React.useState(false),
       isHovered = _useState3[0],
       setIsHovered = _useState3[1];
+    // Manage the `value` state that holds the current value of the text field, initialized with defaultValue.
     var _useState4 = React.useState(defaultValue),
       value = _useState4[0],
       setValue = _useState4[1];
+    // Use `useMemo` hook to recompute hint text when any dependency changes, updating it based on focus state and presence of value.
     React.useMemo(function () {
+      // Update the `hint` state depending on whether the text field is focused and if value is not present, falling back to placeholder or label.
       setHint(isFocused && !value ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
+      // Specify the dependencies for the `useMemo` hook - updating the `hint` text when value, isFocused, label, or placeholder changes.
     }, [value, isFocused, label, placeholder]);
+    // Return an object exposing the states and state setter functions for consumer components to use and manage the text field's UI and behavior.
     return {
       hint: hint,
       setHint: setHint,
@@ -2815,12 +2874,10 @@
     };
     var handleChange = function handleChange(event) {
       if (typeof event === 'string') {
-        //for ios and android
         setValue(event);
         if (onChangeText) onChangeText(event);
         if (onChange) onChange(event);
       } else {
-        //Web
         setValue(event.target.value);
         if (onChangeText) onChangeText(event.target.value);
         if (onChange) onChange(event.target.value);
@@ -2828,7 +2885,6 @@
     };
     var handleClear = function handleClear() {
       setValue('');
-      //Web
       if (onChange) {
         onBlur({
           target: {
@@ -2838,7 +2894,6 @@
         if (onChangeText) onChangeText('');
         if (onChange) onChange('');
       }
-      //for ios and android
       if (typeof document === 'undefined' && onChangeText) onChangeText('');
     };
     return React__default.createElement(FieldContainer, {
@@ -2888,12 +2943,12 @@
   };
 
   var TextFieldComponent = function TextFieldComponent(props) {
+    // Initializes the 'textFieldStates' with state-management logic and relevant properties from 'useTextFieldState' hook, passing current 'props' as the argument
     var textFieldStates = useTextFieldState(props);
+    // Renders the 'TextFieldView' component with the spread attributes from both 'textFieldStates' and 'props' to pass all necessary data
     return React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, props));
   };
-  /**
-   * TextField is used to capture text data from users.
-   */
+  // Exports 'TextFieldComponent' as 'TextField' for use in other parts of the application
   var TextField = TextFieldComponent;
 
   var useCheckboxState = function useCheckboxState(_ref) {
@@ -4530,6 +4585,7 @@
   	}
   ];
 
+  // Defines a custom hook for managing the CountryPicker component's state, including options from a country list, selected value, and UI states for hiding, focus, and hover.
   var useCountryPickerState = function useCountryPickerState(_ref) {
     var placeholder = _ref.placeholder;
     var _React$useState = React__default.useState(countryList),
@@ -4561,6 +4617,7 @@
     };
   };
 
+  // Defines the size of icons based on predefined size categories to maintain design consistency.
   var IconSizes$4 = {
     xs: 8,
     sm: 10,
@@ -4746,9 +4803,6 @@
       onBlur(event);
       setIsFocused(false);
     };
-    // useEffect(() => {
-    //   if (onChange) onChange(value); // Call onChange when valueCountry changes
-    // }, [onChange, value]);
     var isWithLabel = !!(isFocused && label);
     var fieldStyles = _extends({
       margin: 0,
@@ -4822,13 +4876,14 @@
     }));
   };
 
+  // Defines the CountryPickerComponent as a functional component with type 'React.FC' that takes 'CountryPickerProps' as props.
   var CountryPickerComponent = function CountryPickerComponent(props) {
+    // Invokes the 'useCountryPickerState' hook to obtain state and methods related to country picking functionality.
     var countryPickerStates = useCountryPickerState(props);
+    // Renders the CountryPickerView component passing in state and props for dynamic UI representation.
     return React__default.createElement(CountryPickerView, Object.assign({}, countryPickerStates, props));
   };
-  /**
-   * Country picker allows users to select a country from a dropdown list or search field.
-   */
+  // Exports the CountryPickerComponent for use in other parts of the application as 'CountryPicker'.
   var CountryPicker = CountryPickerComponent;
 
   var useDatePickerState = function useDatePickerState() {
@@ -6013,7 +6068,7 @@
       padding: 0,
       margin: 0,
       filter: "none",
-      isAuto: true
+      width: 0
     });
     return React__default.createElement(Horizontal, Object.assign({
       justifyContent: buttonPosition === 'none' ? 'center' : 'space-between',